/* #34 — chat attach picker styles live in the PERMANENT head stylesheet (not the
   team-chat template's conditionally-injected <style>) so the file-browser popup —
   which renders on document.body and can be invoked before that block mounts —
   is always styled correctly. Mirrors the team-chat rules; safe to co-exist. */
.tc-attach-menu,.tc-attach-files-pop{position:fixed;z-index:var(--z-toast,1200);min-width:230px;padding:6px;border-radius:12px;background:var(--card-bg);box-shadow:0 14px 40px rgba(0,0,0,.22),inset 0 0 0 .5px var(--border)}
.tc-attach-files-pop{max-height:400px;overflow-y:auto;min-width:280px}
.tc-attach-menu-item,.tc-attach-file-row{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;background:transparent;padding:9px 10px;border-radius:8px;cursor:pointer;font:inherit;font-size:13px;color:var(--text-primary)}
.tc-attach-menu-item:hover,.tc-attach-file-row:hover{background:var(--accent-tint)}
.tc-attach-menu-item svg,.tc-attach-file-row svg{width:15px;height:15px;flex:0 0 auto;color:var(--text-secondary)}
.tc-attach-file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.tc-attach-file-sz{font-size:11px;color:var(--text-muted);flex:0 0 auto}
.tc-attach-files-head{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--text-muted);padding:6px 10px 8px}
.tc-attach-back{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:0;background:transparent;border-radius:6px;cursor:pointer;color:var(--text-secondary);flex:0 0 auto}
.tc-attach-back:hover{background:var(--accent-tint);color:var(--text-primary)}
.tc-attach-back svg{width:13px;height:13px}
.tc-attach-crumb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-attach-chevr{width:12px;height:12px;margin-left:auto;opacity:.5;flex:0 0 auto}
.tc-attach-files-empty{padding:14px 10px;font-size:12px;color:var(--text-muted);text-align:center}
:root{
  /* ── Mobile design tokens (2026-05-14 mobile overhaul) ───────────────────
     Spacing scale (4px-based), tap-target minimum, mobile gutter, header
     height. Adopted by Phase 1 + Phase 2 mobile work — NOT a retroactive
     sweep of existing desktop CSS. */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --tap-min:44px;          /* iOS minimum tap target */
  --mobile-tabbar-h:45px;  /* mobile bottom tab bar height; magic-number used by all bottom-anchored chrome */
  --mobile-fab-h:48px;     /* Quick Notes FAB diameter; used to size scroll-content padding so the FAB never overlaps last row */
  --mobile-bottom-pad:calc(var(--mobile-tabbar-h) + var(--mobile-fab-h) + 24px);  /* scroll-area padding-bottom: tabbar + FAB + breathing room. Safe-area added per-rule. */
  --mobile-gutter:16px;    /* standard screen-edge padding on phones */
  --header-h:52px;         /* desktop header height (V-navmode: 48→52 for breathing room); overridden to 56px at <=1024px (see Task 0.2) */
  --vvp-bottom:0px;        /* V80 📘 visual-viewport bottom inset (keyboard height on iPad); updated by JS */
  /* Legacy app tokens (kept for body + inherited uses) */
  --app-bg:#1a3a2a;
  --app-fg:#fff;
  --app-text:#fff;
  --app-accent:#36b37e;
  --app-danger:#ff5630;
  --accent:var(--app-accent);
  /* 🛰️ money-flow semantic tokens — money IN (green) vs money OUT (amber). Semantic, not per-theme;
     one definition inherited by every theme. Readable on both light + dark surfaces. */
  --flow-in:#0a8f4f;
  --flow-out:#c2571b;
  --color-warn:#c98a00;
  /* Surface tokens (cards/modals/tables/inputs) */
  --surface:#ffffff;
  --surface-2:#f4f5f7;
  --surface-3:#ebecf0;
  --card-bg:#ffffff;
  --overlay-bg:rgba(0,0,0,.55);
  /* V81 — Apple Notes surface model, theme-aware. Real Apple Notes is a 2-tone
     split: a list pane that steps subtly off the editor, and an editor whose
     toolbar is FLUSH on the editor surface (no separate fill, hairline only).
     Derive both from theme tokens via color-mix so EVERY theme (incl. the dark
     midnight/contrast themes) gets correct values — the old hardcoded light
     greys (#d5d7df / #e8eaef) were defined only in :root and leaked onto dark
     themes as wrong light panels.
       • list pane = card-bg nudged ~8% toward app-bg (subtle step-down)
       • toolbar  = the editor surface itself (card-bg) — flush, hairline divider */
  --qn-list-bg:color-mix(in srgb, var(--card-bg) 92%, var(--app-bg));
  --qn-toolbar-bg:var(--card-bg);
  /* Text tokens */
  --text-primary:#172b4d;
  --text-secondary:#42526e;
  --text-muted:#5e6c84;
  --on-accent:#ffffff;
  --on-app-bg:#ffffff;
  --bg:#f4f5f7;
  /* Text-field surface — one shared grey so every input matches the nav-bar search field
     (which uses color-mix(--on-chrome 4/9%) on dark chrome). color-mix resolves per-theme
     off --text-primary, so this stays consistent across all themes without per-theme overrides. */
  --field-fill:color-mix(in srgb, var(--text-primary) 4%, transparent);
  --field-stroke:color-mix(in srgb, var(--text-primary) 9%, transparent);
  /* Line + focus */
  --border:#dfe1e6;
  --border-strong:#c1c7d0;
  --focus:#388bff;
  --link:#0052cc;
  /* Status accents (kept constant across themes for semantic meaning) */
  --ok:#36b37e;
  --warn:#ff991f;
  --err:#ff5630;
  /* Contacts-directory aliases (were previously only fallbacks) */
  --muted:var(--text-muted);
  --primary:var(--link);
  --card:var(--card-bg);
  --text:var(--text-primary);
  /* Header pill chrome (translucent over dark header bg) */
  --header-pill-bg:rgba(255,255,255,.14);
  --header-pill-border:rgba(255,255,255,.18);
  /* Header chrome — translucent overlays sitting on the app-bg band */
  --header-shade:rgba(0,0,0,.35);
  --header-shade-2:rgba(0,0,0,.20);
  --header-shade-3:rgba(0,0,0,.30);
  --chrome-bg:rgba(255,255,255,.14);
  --chrome-bg-hover:rgba(255,255,255,.24);
  --chrome-bg-strong:rgba(255,255,255,.22);
  --chrome-bg-strong-hover:rgba(255,255,255,.32);
  --chrome-border:rgba(255,255,255,.18);
  --chrome-border-strong:rgba(255,255,255,.5);
  --on-chrome:#fff;
  --on-chrome-muted:rgba(255,255,255,.7);
  --on-chrome-dim:rgba(255,255,255,.55);
  --chrome-arrow:rgba(255,255,255,.6);
  --chrome-scroll:rgba(255,255,255,.3);
  /* Surface hover overlays (for interactive surface elements like modal titles, tabs, buttons on light surfaces) */
  --hover-overlay:rgba(9,30,66,.06);
  --hover-overlay-strong:rgba(9,30,66,.10);
  --modal-bg:var(--surface-3);
  --tab-active:var(--link);

  /* Column (board) chrome — translucent overlays on app-bg */
  --col-bg:rgba(255,255,255,.12);
  --col-bg-drag:rgba(255,255,255,.25);
  --col-outline-drag:rgba(255,255,255,.6);
  --col-count-bg:rgba(255,255,255,.25);
  --col-menu-hover:rgba(255,255,255,.2);
  --col-add-bg:rgba(255,255,255,.15);
  --col-add-hover:rgba(255,255,255,.25);
  --col-add-border:rgba(255,255,255,.25);
  --col-scroll:rgba(255,255,255,.2);
  --col-active-bg:rgba(255,255,255,.22);
  --col-active-outline:rgba(255,255,255,.4);
  --list-empty:rgba(255,255,255,.5);
  /* Card "open board" CTA + move button primary hover */
  --cta-bg:#e8f0ff;
  --cta-bg-hover:#c7dcff;
  --cta-fg:var(--link);
  --link-hover:#0747a6;
  /* Semantic accents (badges, blockers) */
  --priority-critical-bg:#ff5630;--priority-critical-fg:#fff;
  --priority-high-bg:#ff8b00;--priority-high-fg:#fff;
  --priority-medium-bg:#f59e0b;--priority-medium-fg:#fff;
  --priority-low-bg:#36b37e;--priority-low-fg:#fff;
  --risk-low-bg:#e3fcef;--risk-low-fg:#006644;
  --risk-medium-bg:#fff7d6;--risk-medium-fg:#7a4d00;
  --risk-high-bg:#ffe8e3;--risk-high-fg:#bf2600;
  --blocker-bg:#fff5f3;--blocker-fg:#5e2b1f;--blocker-border:#ff5630;
  --field-hint:#6b778c;
  --clear-bg:rgba(255,100,50,.35);--clear-bg-hover:rgba(255,100,50,.55);--clear-border:rgba(255,100,50,.5);
  --auth-err-bg:#ffe8e6;--auth-err-fg:#c42a1c;
  --del-hover-bg:#ffe8e3;
  /* Status states (task/tracked/stage items) */
  --status-progress-border:#0052cc;--status-progress-bg:#f6f8ff;--status-progress-fg:#0052cc;
  --status-progress-select-border:#4c9aff;--status-progress-select-bg:#e8f0ff;
  --status-blocked-border:#ff5630;--status-blocked-bg:#fff5f3;--status-blocked-fg:#bf2600;
  --status-blocked-select-border:#ff7452;--status-blocked-select-bg:#ffe8e3;
  --status-complete-border:#36b37e;--status-complete-bg:#f3faf6;--status-complete-fg:#006644;
  --status-complete-select-border:#79f2c0;--status-complete-select-bg:#e3fcef;
  --status-waiting-border:#ff8b00;--status-waiting-bg:#fffaf0;--status-waiting-fg:#7a4d00;
  --status-waiting-select-border:#ffab33;--status-waiting-select-bg:#fff0cc;
  --status-void-bg:#f4f5f7;
  --status-progress-alt-bg:#f0f4ff;
  /* Semantic pill types */
  --type-rfi-bg:#deebff;--type-rfi-fg:#0052cc;
  --type-change-bg:#fff0b3;--type-change-fg:#7a4d00;
  --type-selection-bg:#eae6ff;--type-selection-fg:#403294;
  --type-inspection-bg:#e3fcef;--type-inspection-fg:#006644;
  --type-blocker-bg:#ffe8e3;--type-blocker-fg:#bf2600;
  --type-itb-bg:#e0f7f4;--type-itb-fg:#006c67;
  /* Generic neutral pill */
  --badge-neutral-bg:#eef2f7;--badge-neutral-fg:#42526e;
  --badge-soft-bg:#f4f5f7;--badge-soft-fg:#42526e;
  /* Sidebar buttons */
  --sidebar-btn-bg:rgba(9,30,66,.08);--sidebar-btn-hover:rgba(9,30,66,.15);
  --sidebar-danger-bg:#ffebe6;--sidebar-danger-fg:#bf2600;
  --sidebar-danger-hover-bg:#ff8f73;--sidebar-danger-hover-fg:#fff;
  /* Context menu */
  --ctx-menu-shadow:rgba(9,30,66,.35);--ctx-menu-hover:#f4f5f7;--ctx-sep:#ebecf0;
  --ctx-danger-hover:#ffebe6;
  /* Notes */
  --note-border:#edf0f5;--note-group-border:#dfe1e6;--note-edit-border:#4c9aff;
  --note-save-bg:#0052cc;--note-save-hover:#0747a6;
  /* Icon dim (muted action icons) */
  --icon-dim:#c1c7d0;--icon-dim-strong:#6b778c;
  /* Detail-group subtle surface */
  --detail-group-bg:rgba(255,255,255,.42);
  /* Timeline dot on-color */
  --on-timeline-dot:#fff;
  /* Task claim hover */
  --claim-hover-bg:#e3fcef;--claim-hover-fg:#006644;
  /* Apple-style multi-layer shadows */
  --shadow-card:0 1px 2px rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.10),0 0 0 0.5px rgba(0,0,0,.05);
  --shadow-card-hover:0 2px 4px rgba(0,0,0,.08),0 10px 28px rgba(0,0,0,.16),0 0 0 0.5px rgba(0,0,0,.06);
  --shadow-card-drag:0 16px 40px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.08);
  --shadow-modal:0 20px 60px rgba(0,0,0,.3),0 0 0 1px rgba(0,0,0,.08);
  --shadow-menu:0 8px 30px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.06);
  --shadow-auth:0 24px 60px rgba(0,0,0,.35);
  --shadow-list:0 4px 16px rgba(0,0,0,.12);
  /* Border radius tokens */
  --radius-card:14px;--radius-modal:18px;--radius-auth:18px;
  --radius-input:10px;--radius-btn:10px;--radius-btn-sm:8px;
  --radius-pill:999px;--radius-menu:14px;--radius-group:12px;--radius-tag:8px;
  /* ── Atira design foundation (V-navmode3 2026-06-28) — orb/moon-hues/mono micro-labels,
     theme-token-driven so it adapts to Gulf(light)+Bayfront(dark). The 7 moon hues color-
     code categories; the mono var carries the Space-Mono-style micro-labels (system mono
     for now). The branded floating-popover recipe lives in --atira-pop-*. ── */
  --font-mono:'Space Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --moon-projects:#4A8EE8; --moon-field:#FF6B35; --moon-financials:#34C759;
  --moon-schedule:#F5A623; --moon-documents:#9B6FFF; --moon-people:#E8357A; --moon-clients:#E0453C;
  --atira-pop-radius:16px;
  /* Overlay variants */
  --overlay-bg-light:rgba(0,0,0,.45);--overlay-bg-heavy:rgba(0,0,0,.82);
  /* Calendar urgency pills + dots */
  --cal-overdue-bg:#fee2e2;--cal-overdue-fg:#991b1b;--cal-overdue-dot:#ef4444;
  --cal-due-bg:#fef9c3;--cal-due-fg:#92400e;--cal-due-dot:#f59e0b;
  --cal-upcoming-bg:#dbeafe;--cal-upcoming-fg:#1e40af;--cal-upcoming-dot:#3b82f6;
  /* Health score badge colors */
  --hs-green-bg:#dcfce7;--hs-green-fg:#15803d;
  --hs-amber-bg:#fef9c3;--hs-amber-fg:#92400e;
  --hs-red-bg:#fee2e2;--hs-red-fg:#991b1b;
  /* Finance card meta */
  --meta-date-fg:#7a869a;
  --co-approved-fg:#0b8a0b;--co-pending-fg:#b45309;
  --co-amount-pos:#0b8a0b;--co-amount-neg:#b45309;
  --frozen-warn-bg:#fef3c7;--frozen-warn-fg:#b45309;
  /* Invoice status badges */
  --inv-paid-bg:#dcfce7;--inv-paid-fg:#166534;
  --inv-sent-bg:#dbeafe;--inv-sent-fg:#1e40af;
  --inv-pending-bg:#fef3c7;--inv-pending-fg:#92400e;
  --inv-partial-bg:#cffafe;--inv-partial-fg:#0e7490;
  /* Contact directory type/status badges (semantic, stable across themes) */
  --cd-sub-bg:#dbeafe;--cd-sub-fg:#1e40af;
  --cd-vendor-bg:#fef3c7;--cd-vendor-fg:#92400e;
  --cd-gc-bg:#d1fae5;--cd-gc-fg:#065f46;
  --cd-client-bg:#ede9fe;--cd-client-fg:#5b21b6;
  /* Reports phase badges */
  --rp-bidding-bg:#e8f4ff;--rp-bidding-fg:#0052cc;
  --rp-inprog-bg:#e3fcef;--rp-inprog-fg:#006644;
  --rp-complete-bg:#eae6ff;--rp-complete-fg:#403294;
  --rp-invoicing-bg:#fffae6;--rp-invoicing-fg:#974f0c;
  --rp-closed-bg:#f4f5f7;--rp-closed-fg:#5e6c84;
  /* Reports variance */
  --variance-pos:#15803d;--variance-neg:#b91c1c;
  /* Auth card secondary text */
  --auth-sub-fg:#5a6b80;
  /* Translucent accent overlays (active rows, mentions, focus rings) */
  --accent-tint:rgba(54,179,126,.14);
  --accent-tint-strong:rgba(54,179,126,.22);
  --accent-ring:rgba(54,179,126,.18);
  /* Todo-revamp specific tokens (status colors, semantic — universal across themes) */
  --td-priority-low:#ff9f0a;
  --td-priority-med:#ff9500;
  --td-priority-high:#ff453a;
  --td-flag:#ff2d55;
  --td-sidebar-bg:var(--surface-2);
  --td-checkbox-stroke:var(--border-strong);
  /* H16: smart-list color palette — promoted from JS hardcodes so themes can override */
  --td-smart-today:#0a84ff;
  --td-smart-overdue:#ff453a;
  --td-smart-scheduled:#ff9500;
  --td-smart-flagged:#ff2d55;
  --td-smart-all:#5e5ce6;
  --td-smart-completed:#8e8e93;
  /* Status row backgrounds (subtle tints for "in_progress" / "complete" / "blocked" rows) */
  --ok-bg:#d1fae5;--ok-fg:#065f46;
  --err-bg:#fee2e2;--err-fg:#991b1b;
  --warn-bg:#fef3c7;--warn-fg:#92400e;
  /* Archived project badge */
  --archived-tag-bg:#fef3c7;--archived-tag-fg:#b45309;
  --archived-badge-bg:#fef3c7;--archived-badge-fg:#b45309;
  /* Calendar overdue dot */
  --cal-overdue-dot:#dc2626;
  /* Daily-log entry type chips (FI / CO / RFI) */
  --type-fi-bg:#dbeafe;--type-fi-fg:#1d4ed8;
  --type-co-bg:#fef3c7;--type-co-fg:#92400e;
  --type-rfi-fg:#6d28d9;
  /* Elevated surface aliases (popovers / cmd palette) */
  --bg-elevated:var(--card-bg);--fg:var(--text-primary);

  /* ═════════════════════════════════════════════════════════════════════════
     V39 — Apple HIG design tokens (2026-05-18 📘)
     Added by the overnight UI sweep. Subsequent commits migrate existing raw
     values to these tokens. New code MUST use tokens, never raw values.
     Source-of-truth audit: docs/2026-05-18-ui-audit.md
     ═════════════════════════════════════════════════════════════════════════ */

  /* Corner radii — Apple continuous-curve scale.
     Map from raw values found in the audit:
       3,4 → xs  ·  5,6,7 → sm  ·  8,9,10,11 → md  ·  12,14 → lg
       17,18,20,22 → xl  ·  999 → pill */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 999px;
  /* Compliance unified-frame rail width — ONE token for BOTH domain right rails
     (Expiry detail/insight rail + Vendors detail/insight rail) so the working
     area below the hero is structurally invariant when toggling domains. */
  --cmp-rail-w: 336px;

  /* Motion — durations + the Apple standard ease curve.
     Map from raw values: .08-.12s → fast  ·  .14-.22s → base  ·  .25-.32s → slow */
  --motion-fast: 150ms;
  --motion-base: 220ms;
  --motion-slow: 320ms;
  --ease-out: cubic-bezier(.32,.72,0,1);
  --ease-in-out: cubic-bezier(.42,0,.58,1);

  /* Z-index scale — replaces the 20-distinct-values free-for-all (which
     produced the V38g FAB-vs-popout bug). HIGHEST first below; lower scale
     values mean deeper in the stack. Use --z-top sparingly — it's reserved
     for system-must-be-on-top elements like the auth overlay and toasts on
     top of modals. */
  --z-base: 0;
  --z-sticky: 100;
  --z-header: 200;
  --z-fab: 800;
  --z-popover: 900;
  --z-modal-backdrop: 1000;
  --z-modal: 1100;
  /* V77.1 — Popovers anchored to inputs INSIDE the modal (rrt-cp-popover is
     appended to document.body, so it doesn't inherit the modal's stacking
     context) need to render ABOVE the modal. ITB / PO typeahead dropdowns
     were silently invisible because --z-popover (900) sat below --z-modal
     (1100). Toast still wins so error-tier feedback stays visible. */
  --z-popover-modal: 1150;
  --z-toast: 1200;
  --z-tooltip: 1300;
  --z-top: 9999;

  /* Focus ring — Apple HIG-style 2.5px accent ring with offset. Per-component
     overrides allowed for inset rings on inputs etc. */
  --focus-ring-width: 2.5px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--app-accent);

  /* Hairline border — Apple 0.5px chrome divider. 1px reserved for emphasis. */
  --hairline: 0.5px;
  --hairline-color: var(--chrome-border);

  /* ═════════════════════════════════════════════════════════════════════════
     V82 — Apple Design Sweep system (2026-05-23 📘)
     Pro-app caliber: unified elevation, semantic color, frosted glass, bold
     display type, spring motion. Builds on (does NOT duplicate) the V39 tokens
     above — reuses --motion-fast / --focus-ring-* / --radius-*. New names are
     only for genuinely new concepts (elevation ladder, semantic status, frost,
     display type, spring curve). Frosted surfaces derive from --surface (an
     opaque theme token) NOT --chrome-bg (a header-band white film) so glass
     reads correctly on light content across all 6 themes. A touch of classic
     Macintosh-era craft (crisp inner highlights, beveled glass shine) layered
     onto the modern Apple finish.
     ═════════════════════════════════════════════════════════════════════════ */

  /* Elevation ladder — theme-adaptive via color-mix on --app-accent so shadows
     pick up a subtle accent cast and never go warm-theme-blind. */
  --shadow-e0: none;
  --shadow-e1: 0 1px 3px color-mix(in srgb, var(--app-accent) 4%, rgba(0,0,0,.10)),
               0 0 0 0.5px color-mix(in srgb, var(--app-accent) 3%, rgba(0,0,0,.07));
  --shadow-e2: 0 4px 14px color-mix(in srgb, var(--app-accent) 6%, rgba(0,0,0,.12)),
               0 2px 4px  color-mix(in srgb, var(--app-accent) 4%, rgba(0,0,0,.08)),
               0 0 0 0.5px color-mix(in srgb, var(--app-accent) 3%, rgba(0,0,0,.06));
  --shadow-e3: 0 8px 28px color-mix(in srgb, var(--app-accent) 8%, rgba(0,0,0,.16)),
               0 3px 8px  color-mix(in srgb, var(--app-accent) 5%, rgba(0,0,0,.10)),
               0 0 0 0.5px color-mix(in srgb, var(--app-accent) 3%, rgba(0,0,0,.07));
  --shadow-e4: 0 16px 48px color-mix(in srgb, var(--app-accent) 10%, rgba(0,0,0,.22)),
               0 6px 16px  color-mix(in srgb, var(--app-accent) 6%, rgba(0,0,0,.12)),
               0 0 0 0.5px color-mix(in srgb, var(--app-accent) 4%, rgba(0,0,0,.08));

  /* Semantic status color — Apple system palette. *-bg are faint tints. */
  --color-success:    #30d158;
  --color-success-bg: color-mix(in srgb, #30d158 12%, transparent);
  --color-warning:    #ff9f0a;
  --color-warning-bg: color-mix(in srgb, #ff9f0a 12%, transparent);
  --color-error:      #ff453a;
  --color-error-bg:   color-mix(in srgb, #ff453a 12%, transparent);
  --color-info:       var(--app-accent);
  --color-info-bg:    color-mix(in srgb, var(--app-accent) 10%, transparent);
  /* Control-flow marker hue (Document Studio {{#if}}/{{#each}} bands) — a deliberate
     PURPLE distinct from the accent-blue field/token chips, so a control-flow band never
     reads the same as a {{field}}. Single source of truth (was the literal #7c5cff). */
  --color-flow:       #7c5cff;
  --color-flow-bg:    color-mix(in srgb, #7c5cff 13%, transparent);
  /* Document Studio PAPER canon — the printed sheet is theme-independent white-on-ink
     (it's the document, not chrome). Centralized so a future paper theme can fork them. */
  --color-paper-bg:   #ffffff;
  --color-paper-ink:  #1c1c1e;
  --color-teal:       #0a8a8f;
  --color-teal-bg:    color-mix(in srgb, #0a8a8f 13%, transparent);
  --color-pillgreen:    #15803d;
  --color-pillgreen-bg: color-mix(in srgb, #15803d 13%, transparent);

  /* Frosted glass — opaque-surface base + saturated blur. --frost-bg is the
     light/content frost (sidebars, sticky headers, composers floating over
     rows). --frost-bg-strong is denser for headers that must stay legible. */
  --frost-bg:        color-mix(in srgb, var(--surface) 78%, transparent);
  --frost-bg-strong: color-mix(in srgb, var(--surface) 88%, transparent);
  --frost-blur:      blur(20px) saturate(1.8);

  /* Liquid Glass (V82.3, 2026-05-23) — Apple's translucent light-bending material
     for FLOATING CHROME ONLY (menus/popovers/sheets/sidebars/sticky headers/drag
     ghost/tab bar/active nav pill). Content cards stay solid. Built on --surface
     (never --chrome-bg). --lg-refract bends + brightens content behind the pane;
     --lg-edge is the specular top/leading rim + soft inner bottom shadow that make
     it read as a real lit pane. --lg-sheen-* drive the pointer-tracking glint. */
  --lg-bg:         color-mix(in srgb, var(--surface) 70%, transparent);
  --lg-bg-strong:  color-mix(in srgb, var(--surface) 84%, transparent);
  /* V-glass2 2026-06-30 — Liquid Glass UPGRADE. Richer refraction; a SOFTER, diffuse
     feathered top rim (--lg-rim) replacing the hard hairline look; and a VARIED static
     edge-light (--lg-litX origin keyed per surface) so panels catch light differently
     instead of all sharing one stuck glare spot. NO pointer-tracking sheen (it read bad
     on dark). All theme-adaptive; the Bayfront override tempers the rim below. */
  --lg-refract:    blur(26px) saturate(2.0) brightness(1.06);
  --lg-edge:       inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 color-mix(in srgb, var(--app-bg) 18%, transparent);
  --lg-rim:        inset 0 1.5px 1px -.5px rgba(255,255,255,.5), inset 0 0 0 .5px rgba(255,255,255,.10), inset 0 -8px 18px -12px color-mix(in srgb, var(--app-bg) 60%, transparent);
  --lg-litX:       30%;   /* default edge-light origin; surfaces vary it (header/nav/dock/popover) */
  --lg-sheen:      color-mix(in srgb, #fff 60%, transparent);  /* edge-light tint (static) */
  --lg-sheen-x:    50%;   /* legacy var — retained so old refs resolve; no longer pointer-driven */
  --lg-sheen-y:    0%;
  /* Specular inner-highlight for lit/armed control fills — surface-derived so the
     bright rim reads correctly on light/contrast themes (a fixed white-alpha washes
     flat on a light accent fill). Used by armed markup tools + the etched divider. */
  --specular-hi:   color-mix(in srgb, #fff 80%, transparent);

  /* V83 — Quick Note color stripes: single source of truth (was literal hexes
     duplicated across the switcher chip / dropdown dot / page-row stripe).
     iOS system-color set used by the popout note-color system. */
  --qn-c-red:#ff3b30; --qn-c-orange:#ff9500; --qn-c-yellow:#ffcc00;
  --qn-c-green:#34c759; --qn-c-blue:#007aff; --qn-c-gray:#8e8e93;

  /* Bold display type scale — SF Pro Display feel for headers/metrics,
     SF Pro Text for body/labels. */
  --text-display: 700 32px/1.05 -apple-system, "SF Pro Display", system-ui, sans-serif;
  --text-title:   600 17px/1.3  -apple-system, "SF Pro Display", system-ui, sans-serif;
  --text-label:   500 13px/1.4  -apple-system, "SF Pro Text", system-ui, sans-serif;
  --text-caption: 400 11px/1.5  -apple-system, "SF Pro Text", system-ui, sans-serif;

  /* Spring curve for press/bloom feedback (overshoot). Duration aliases reuse
     the existing V39 motion tokens — one source of truth. */
  --ease-spring:   cubic-bezier(.34, 1.56, .64, 1);
  --duration-fast: var(--motion-fast);

  /* ═════════════════════════════════════════════════════════════════════════
     V132 — MAX design layer (2026-05-28 📘). Pro-app caliber pushed further:
     a hero elevation tier with accent-glow, gradient card surfaces, a richer
     specular bevel, and shared liquid-glass utility classes so glass is ONE
     system (not per-component re-rolls). All ADDITIVE — opt surfaces in; nothing
     existing changes until referenced. Everything theme-adaptive via color-mix
     on --app-accent / --card-bg / --surface so it reads on all 7 themes.
     ═════════════════════════════════════════════════════════════════════════ */

  /* Hero elevation — for the surfaces that should command (active cards on hover,
     primary CTAs, open popovers). Layered drop + a soft accent glow halo. */
  --shadow-e5: 0 24px 64px color-mix(in srgb, var(--app-accent) 12%, rgba(0,0,0,.26)),
               0 10px 24px color-mix(in srgb, var(--app-accent) 8%, rgba(0,0,0,.14)),
               0 0 0 0.5px color-mix(in srgb, var(--app-accent) 5%, rgba(0,0,0,.08));
  /* Accent-glow ring — a focus/hero bloom that tints with the theme accent. Pair
     with an elevation token for "this surface is lit / alive". */
  --glow-accent:   0 0 0 1px color-mix(in srgb, var(--app-accent) 22%, transparent),
                   0 6px 22px color-mix(in srgb, var(--app-accent) 22%, transparent);
  --glow-accent-soft: 0 4px 18px color-mix(in srgb, var(--app-accent) 14%, transparent);

  /* Gradient card surface — subtle top-lit sheen so solid content cards read as
     physical panes (NOT glass — legibility kept). 145deg picks up the light from
     the top-leading edge like the Liquid-Glass chrome. */
  --surface-grad:      linear-gradient(155deg, color-mix(in srgb, #fff 5%, var(--card-bg)), var(--card-bg) 58%, color-mix(in srgb, var(--app-bg) 5%, var(--card-bg)));
  --surface-grad-hover:linear-gradient(155deg, color-mix(in srgb, var(--app-accent) 5%, var(--card-bg)), var(--card-bg) 55%, color-mix(in srgb, var(--app-bg) 4%, var(--card-bg)));
  /* Crisp inner top-highlight bevel (classic-Mac craft) for solid cards — a 1px
     lit rim that makes the surface feel pressable/physical. */
  --bevel-top:   inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
  --bevel-edge:  inset 0 1px 0 color-mix(in srgb, #fff 50%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--app-bg) 10%, transparent);

  /* Stronger specular rim for hero glass (brighter top edge + deeper inner base)
     so floating chrome reads as a thick lit pane, not a film. */
  --lg-edge-strong: inset 0 1.5px 0 rgba(255,255,255,.42), inset 0 -1px 0 color-mix(in srgb, var(--app-bg) 24%, transparent), inset 1px 0 0 rgba(255,255,255,.14);
}

/* A4 fix (2026-06-10) — dark-on-dark glass was nearly invisible. On midnight/contrast the
   matte (--app-bg) and the panel surface are both dark, so the default --lg-bg (--surface @70%
   transparent) composited over the matte barely differed from bare matte → "glass paneling
   just doesn't show". On dark themes the glass must LIFT off the matte: a lighter translucent
   layer (tinted toward the theme's light text) + a brighter top rim so the pane reads as lit.
   (rr-brand/Mangrove is unaffected — its --surface is white, so its glass already reads.) */
[data-theme="midnight"], [data-theme="contrast"]{
  --lg-bg:        color-mix(in srgb, var(--surface) 62%, color-mix(in srgb, var(--text-primary) 12%, transparent));
  --lg-bg-strong: color-mix(in srgb, var(--surface) 80%, color-mix(in srgb, var(--text-primary) 14%, transparent));
  --lg-edge:      inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 .5px rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.30);
  /* V-glass2 — softer dark rim: tempered top specular, no harsh full ring; deep bottom seat. */
  --lg-rim:       inset 0 1.5px 1px -.5px rgba(255,255,255,.26), inset 0 0 0 .5px rgba(255,255,255,.07), inset 0 -10px 22px -12px rgba(0,0,0,.55);
}
/* V-depth2 2026-06-29 — Bayfront-ONLY glass-edge rework. The shared dark --lg-edge above
   carries a FULL inset white ring (inset 0 0 0 .5px) which, stacked on the panel's own
   .5px border, drew a DOUBLED outline + flat highlight — surfaces read as drawn rectangles,
   not floating material ("odd outline/preset highlight"). Bayfront now gets a clean edge:
   a soft top specular + a darker bottom seat ONLY — no full ring. Depth comes from the
   V-depth1 shadow ladder + the frosted material, not from edges. (Lido Sun/contrast KEEPS
   the ring above — its border-carried depth is the intentional AMOLED a11y design.) */
[data-theme="midnight"]{
  --lg-edge:        inset 0 1px 0 rgba(255,255,255,.14), inset 0 -10px 22px -14px rgba(0,0,0,.5);
  --lg-edge-strong: inset 0 1.5px 0 rgba(255,255,255,.22), inset 0 -12px 26px -14px rgba(0,0,0,.55);
  /* The root --bevel-top is a 55%-WHITE top line — a subtle sheen on Gulf's white cards,
     but a harsh painted stripe on Bayfront's dark cards (the other half of the "preset
     highlight"). Soften to a gentle lit edge so dark cards read as LIT material, not
     outlined. Fixes every --bevel-top consumer (dash-cards/stats/money-row) on dark. */
  --bevel-top:      inset 0 1px 0 rgba(255,255,255,.10);
}
/* Recede the floating-panel hairline on Bayfront so SHADOW lifts the surface, not a
   drawn outline. Scoped to the panel utilities only (NOT global --chrome-border, which
   1000+ chrome seams depend on). The frosted material + V-depth1 shadow do the lifting. */
[data-theme="midnight"] .rt-panel,
[data-theme="midnight"] .rt-panel-solid{border-color:rgba(230,237,247,.06)}

/* ── V132 shared utilities — one glass + bevel system, opt-in via class ────── */
/* Liquid-glass floating chrome (menus/sheets/sidebars/sticky bars). Solid-enough
   to stay legible, light-bending, specular-rimmed, theme-adaptive. */
.liquid-glass{
  position:relative;isolation:isolate;
  background:var(--lg-bg-strong);
  backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract);
  box-shadow:var(--lg-rim), var(--shadow-e4);
  border:0.5px solid color-mix(in srgb,var(--app-accent) 6%,var(--chrome-border));
}
/* V-glass2 — VARIED EDGE-LIGHT (replaces the old pointer-tracking sheen). A static
   specular that rides the TOP RIM, its origin set per surface via --lg-litX so no two
   panels share one stuck glare spot; faint iridescent fringe on the rim only. NOT
   cursor-tracked → no dark-theme halo. Applied to .liquid-glass + .lg-sheen surfaces. */
.liquid-glass::before,.lg-sheen::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:
    radial-gradient(150% 60px at var(--lg-litX,30%) -10%, color-mix(in srgb,#fff 50%,transparent), color-mix(in srgb,#bcdcff 16%,transparent) 40%, transparent 70%),
    radial-gradient(120% 40px at calc(var(--lg-litX,30%) + 8%) -6%, color-mix(in srgb,#ffb4dc 14%,transparent), transparent 60%);
  opacity:.9;mix-blend-mode:screen}
[data-theme="midnight"] .liquid-glass::before,[data-theme="contrast"] .liquid-glass::before,
[data-theme="midnight"] .lg-sheen::before,[data-theme="contrast"] .lg-sheen::before{
  background:radial-gradient(150% 50px at var(--lg-litX,30%) -12%, rgba(255,255,255,.26), color-mix(in srgb,#96beff 10%,transparent) 45%, transparent 72%);opacity:.8}
/* hover-bloom: the surface brightens + intensifies on hover (whole-surface state, not cursor) */
.lg-sheen{position:relative;isolation:isolate;transition:box-shadow var(--motion-base) var(--ease-out)}
.liquid-glass:hover,.lg-sheen:hover{box-shadow:var(--lg-rim),var(--shadow-e4),var(--glow-accent-soft)}
/* per-surface edge-light origins so the glare spot varies (chrome that opts into .lg-sheen) */
.header.lg-sheen{--lg-litX:28%}
.preset-popover{--lg-litX:74%}
/* Solid premium content card — gradient sheen + bevel + e2 resting → e3+lift on
   hover → e1 press. The signature "physical pane" feel for content surfaces. */
.surface-card{background:var(--surface-grad);box-shadow:var(--bevel-top),var(--shadow-e2);
  border-radius:var(--radius-lg);transition:box-shadow var(--motion-base) var(--ease-out),transform var(--motion-fast) var(--ease-spring),background var(--motion-base)}
.surface-card.is-interactive{cursor:pointer}
.surface-card.is-interactive:hover{background:var(--surface-grad-hover);box-shadow:var(--bevel-top),var(--shadow-e3),var(--glow-accent-soft);transform:translateY(-2px)}
.surface-card.is-interactive:active{transform:translateY(0) scale(.994);box-shadow:var(--bevel-top),var(--shadow-e1)}
@media (prefers-reduced-transparency:reduce){
  .liquid-glass{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (prefers-reduced-motion:reduce){
  .lg-sheen::after{transition:none}
  .surface-card,.surface-card.is-interactive:hover,.surface-card.is-interactive:active{transition:none;transform:none}
}

/* ── FLOATING PANEL SYSTEM (V133, 2026-06-06 — the standard section layout) ──────
   The standing way to lay out a page's major sections: sections are FLOATING panels
   on the page matte, NOT flat zones sharing the raw background. First built on the
   Contacts page (rail + grid + detail), now the default for all pages/tabs.
   • .rt-panel-stage  = the container: the page MATTE (--app-bg) with padding + a gap,
     so the matte shows through BETWEEN panels (the visual separation).
   • .rt-panel        = a floating frosted-GLASS panel (chrome: rails, nav, toolbars,
     the scrolling canvas) — Liquid Glass + rounded + edge/elevation shadow + hairline.
   • .rt-panel-solid  = a floating SOLID-white panel (CONTENT that must stay legible:
     detail/reading panes) — same float/shadow/radius, opaque card bg (no blur).
   Accessibility fallback is built in (solid --surface when blur unsupported / reduced
   transparency). Compose: a .rt-panel-stage flex/grid row of .rt-panel(+ -solid). */
.rt-panel-stage{background:var(--app-bg);padding:12px;gap:12px}
.rt-panel{position:relative;background:var(--lg-bg);backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract);border-radius:var(--radius-lg);box-shadow:var(--lg-rim),var(--shadow-e2);border:.5px solid color-mix(in srgb,var(--chrome-border) 78%,transparent)}
/* V-glass2 — varied edge-light on floating panels too; alternate the lit origin between
   adjacent panels (odd vs even) so a rail + canvas + detail row never share one glare spot. */
.rt-panel::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(150% 56px at var(--lg-litX,34%) -10%, color-mix(in srgb,#fff 42%,transparent), color-mix(in srgb,#bcdcff 12%,transparent) 42%, transparent 72%);opacity:.85;mix-blend-mode:screen}
.rt-panel:nth-of-type(even){--lg-litX:66%}
[data-theme="midnight"] .rt-panel::before,[data-theme="contrast"] .rt-panel::before{
  background:radial-gradient(150% 48px at var(--lg-litX,34%) -12%, rgba(255,255,255,.22), transparent 72%);opacity:.75}
.rt-panel-solid{background:var(--card-bg);border-radius:var(--radius-lg);box-shadow:var(--lg-edge),var(--shadow-e2);border:.5px solid var(--chrome-border)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .rt-panel{background:var(--surface)}
}
@media (prefers-reduced-transparency:reduce){
  .rt-panel{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}
}
/* ── V133 LIFT KIT (2026-06-06 — reusable section-shell composition) ──────────────
   The minimal classes to "lift the sections into floating panels" on an existing page
   WITHOUT re-laying-out its content. Apply to a view-wrap + its existing sections:
   • .rt-view        = make the view-wrap a FIXED flex column that fills the body-flex
     (no whole-page scroll) and become the matte stage (--app-bg + 12px pad/gap).
     Each direct child is then a floating panel separated by the matte gap.
   • .rt-panel-fixed = a panel laid out as a flex column: its direct chrome children
     (head/toolbar) stay PUT (flex:0 0 auto), and its .rt-scroll child scrolls.
   • .rt-scroll      = the single contained-scroll host inside a fixed panel
     (flex:1;min-height:0;overflow-y:auto) with the standard 22px content padding.
   Compose: <div class="view rt-view"> → <section class="rt-panel rt-panel-fixed">
   [fixed head/toolbar] + <div class="rt-scroll">[scrolling content]</div>. This mirrors
   the Contacts .cd-main reference exactly, generalized so every page reuses one recipe. */
.rt-view{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;background:var(--app-bg);padding:12px;gap:12px;overflow:hidden;box-sizing:border-box}
.rt-panel-fixed{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.rt-panel-fixed > .rt-scroll{flex:1;min-height:0;overflow-y:auto;padding:18px 22px 24px}
.rt-panel-fixed > .rt-scroll.rt-scroll-x{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}

/* ── PFV SINGLE RAISED SURFACE (2026-06-08 — every full-project-view tab onto ONE
   raised surface) ───────────────────────────────────────────────────────────────
   The relocated .modal-body becomes a single .rt-panel-solid surface that fills the
   full content width with an even matte gap all around (the gap is #pfvContent's
   padding; the sidebar gap comes from .pfv-body). The tab's sections sit ON the
   surface (de-elevated — no card-on-card double shadow), and any analytics rail is an
   inset column on the same surface. Scoped to #pfvContent (full-page only — the modal
   view's recessed-gray field is untouched) and NOT doc-mode (Project Record is full-bleed). */
#pfvContent:not(.pfv-doc-mode){padding:12px;box-sizing:border-box}
/* ── SURFACE MODEL FLIP (2026-06-30 cont.34 — the app-wide sweep) ───────────────────
   PRIOR model (2026-06-08/09): .modal-body was a RAISED near-white (--surface-grad) panel
   and every section DE-ELEVATED (transparent) onto it → separation came from flex-gap only,
   which on a near-white panel read flat and needed hairline dividers to fake structure.
   NEW locked model (Gavin, cont.34): the BASE is the TRUE GREY --surface matte; the RAISED
   LIGHTER (white) SECTIONS floating on that grey are what do the visual separation — the
   grey→white tone step + shadow + gap. This is the Contacts / Financials two-tier recipe,
   now made real (previously the grey base was hidden behind the near-white panel). */
#pfvContent:not(.pfv-doc-mode) > .modal-body{
  /* TIER 0 — the MIDDLE SECTION matte, matched to Contacts .cd-main (measured live cont.34).
     Uses --app-bg, NOT --surface: --app-bg is the true page matte in EVERY theme and is always a
     distinct tone step below --card-bg (apple grey #f2f2f7, midnight navy #0c1422, bayfront green
     #1a3a2a, etc.). --surface only steps down on the apple theme — it EQUALS --card-bg on midnight/
     contrast/bayfront/rr-brand/light/sepia, which would make base==card == flat white-on-white. So
     --app-bg is what keeps the two-tier tone step alive across all 7 themes. 14px radius + a faint
     hairline (color-mix off the text color so it works light AND dark) so it reads as a panel. */
  background:var(--app-bg);
  border-radius:14px;
  border:.5px solid var(--chrome-border);
  /* EXACT Contacts .cd-main recipe (measured live cont.34): the grey middle section is itself a
     RAISED panel — top+bottom inset hairlines + the same --shadow-e2 drop the white cards use, so
     the whole grey slab floats off the page. Was flat (top-highlight only) → "didn't match Contacts". */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 color-mix(in srgb,var(--surface) 90%,transparent),var(--shadow-e2);
  padding:18px 20px 22px;
  box-sizing:border-box;
}
/* TIER 1 — SECTION SHELLS are RAISED WHITE cards floating on the grey base. The grey→white
   tone step + --shadow-e2 + the flex gap is the separation (no dividers). Layout-only
   wrappers (.pfv-ws-master/detail, rails) and NESTED sections opt back out below so we never
   double-elevate. ITEM cards inside a section keep their own lift — they're content. */
#pfvContent:not(.pfv-doc-mode) .modal-section{
  background:var(--card-bg);
  border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),var(--shadow-e2);
  border:.5px solid color-mix(in srgb,var(--text-primary) 6%,transparent);
}
/* NESTED section inside a section → flat/transparent (no 3rd tier, no card-on-card shadow) */
#pfvContent:not(.pfv-doc-mode) .modal-section .modal-section{background:transparent;box-shadow:none;border:0;border-radius:0}
/* .pfv-ws-card is a SECTION shell (the workspace panel) → raised white card like .modal-section.
   Its inner item cards use other classes (.perm-card/.insp-card/.task-ws-row/etc.) — untouched. */
#pfvContent:not(.pfv-doc-mode) > .modal-body .pfv-ws-card{
  background:var(--card-bg);
  border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),var(--shadow-e2);
  border:.5px solid color-mix(in srgb,var(--text-primary) 6%,transparent);
}
/* Analytics rail (cont.34) — under the grey-base model the rail cards float on the grey too,
   exactly like the Financials Cash Position / Working Capital cards. So they are RAISED WHITE
   cards (not de-elevated), and the old left hairline divider is removed — the tone step + gap
   separates the rail from the main column, no line. The 2-col grid structure is unchanged. */
#pfvContent:not(.pfv-doc-mode) .reg-ws-rail > *,
#pfvContent:not(.pfv-doc-mode) .pfv-ws-rail > *{
  background:var(--card-bg);
  border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),var(--shadow-e2);
  border:.5px solid color-mix(in srgb,var(--text-primary) 6%,transparent);
}
#pfvContent:not(.pfv-doc-mode) .reg-ws-rail,
#pfvContent:not(.pfv-doc-mode) .pfv-ws-rail{padding-left:0;border-left:0}
/* V-fin4c (2026-06-30) — TWO TIERS, no redundant container (Contacts model, corrected again). The PAGE
   matte (.pfv-body) is ALREADY the grey var(--surface) base — exactly the Contacts middle-panel grey.
   So the .fin-2col columns are JUST invisible layout (transparent, no surface, no padding box); the
   WHITE .zone cards float DIRECTLY on that grey matte. No grey-on-grey wrapper, no third tier. Depth =
   the white-card-on-grey tone step + the gap; dividers stay removed. */
/* cont.34 — the .panel is a TRANSPARENT layout column; the base .panel{overflow:hidden} (line ~26424)
   was clipping the child .zone cards' --shadow-e2 at a hard line (Rule 8 shadow-cutoff). It's not a
   surface, so it must NOT clip → overflow:visible lets the white zones' shadows bleed + fade cleanly. */
#pfvContent:not(.pfv-doc-mode) #financialsBody .fin-2col > .panel{display:flex;flex-direction:column;gap:12px;padding:0;background:transparent;border:0;box-shadow:none;overflow:visible}
/* each .zone = a white card floating directly on the grey page matte (gap-separated, no divider) */
#financialsBody .fin-2col > .panel > .zone{margin:0;padding:16px 18px;background:var(--card-bg);border-radius:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),var(--shadow-e2);border:.5px solid color-mix(in srgb,var(--text-primary) 6%,transparent);transition:box-shadow var(--motion-base,.22s) var(--ease-out),transform var(--motion-base,.22s) var(--ease-out)}
/* cont.34 — the zones are RAISED, interactive cards: lift + deepen on hover so they "move" (Gavin). */
#financialsBody .fin-2col > .panel > .zone:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),var(--shadow-e3,0 12px 28px -8px rgba(20,30,48,.24),0 4px 10px -4px rgba(20,30,48,.14))}
#financialsBody .fin-2col > .panel > .zone + .zone{border-top:0}
@media (prefers-reduced-motion:reduce){#financialsBody .fin-2col > .panel > .zone{transition:none}#financialsBody .fin-2col > .panel > .zone:hover{transform:none}}
/* S1-C7 🧊 — 3-band semantic grouping. Bands stack; each has a quiet section header +
   a responsive 2-up grid of the SAME white .zone cards (styling inherited from the rule
   above, re-scoped to .fin-band-grid > .zone since the .fin-2col/.panel wrappers are gone). */
#financialsBody .fin-bands{display:flex;flex-direction:column;gap:22px}
#financialsBody .fin-band{display:flex;flex-direction:column;gap:12px}
#financialsBody .fin-band-head{display:flex;align-items:center;gap:8px;padding:0 2px}
#financialsBody .fin-band-head .ic{width:15px;height:15px;color:var(--app-accent);opacity:.85}
#financialsBody .fin-band-head h3{margin:0;font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--text-secondary,var(--text-muted))}
#financialsBody .fin-band-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
/* the Profitability band's waterfall/BvA read best full-width; let the first zone span both cols on wide screens when the band has an odd primary chart */
#financialsBody .fin-band-profit .fin-band-grid > .zone:first-child{grid-column:1 / -1}
#pfvContent:not(.pfv-doc-mode) #financialsBody .fin-band-grid > .zone{margin:0;padding:16px 18px;background:var(--card-bg);border-radius:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),var(--shadow-e2);border:.5px solid color-mix(in srgb,var(--text-primary) 6%,transparent);transition:box-shadow var(--motion-base,.22s) var(--ease-out),transform var(--motion-base,.22s) var(--ease-out)}
#pfvContent:not(.pfv-doc-mode) #financialsBody .fin-band-grid > .zone:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),var(--shadow-e3,0 12px 28px -8px rgba(20,30,48,.24),0 4px 10px -4px rgba(20,30,48,.14))}
/* spiStrip is a thin strip, never a full card — keep it flush inside the band grid */
#financialsBody .fin-band-grid > .fin-spi-strip{grid-column:1 / -1}
@media(max-width:1000px){#financialsBody .fin-band-grid{grid-template-columns:1fr}#financialsBody .fin-band-profit .fin-band-grid > .zone:first-child{grid-column:auto}}
@media (prefers-reduced-motion:reduce){#pfvContent #financialsBody .fin-band-grid > .zone{transition:none}#pfvContent #financialsBody .fin-band-grid > .zone:hover{transform:none}}
[data-theme="rr-brand"]{
  /* Mangrove — 2026-05-27 📘 retune. KEPT white cards (their light-tint status/
     risk/type pills all read correctly on white — converting to full-dark would
     mean re-tinting ~50 content tokens + risk contrast bugs). The actual flaw
     was DEPTH: a flat dark-green canvas with a 12%-white column film that barely
     lifted off it. Fix = deepen + richen the canvas (so white cards pop), and
     make columns a distinctly stronger frosted layer so bg→column→card reads.
     Accent kept the brand mangrove green. */
  --app-bg:#103024;--app-fg:#fff;--app-text:#fff;--app-accent:#0f7d4a;--app-danger:#ff5630;--accent:var(--app-accent);
  --surface:#ffffff;--surface-2:#f4f5f7;--surface-3:#ebecf0;--card-bg:#ffffff;--overlay-bg:rgba(0,0,0,.55);
  --text-primary:#172b4d;--text-secondary:#42526e;--text-muted:#5e6c84;--on-accent:#fff;--on-app-bg:#fff;--bg:#f4f5f7;
  --border:#dfe1e6;--border-strong:#c1c7d0;--focus:#388bff;--link:#0052cc;
  --header-pill-bg:rgba(255,255,255,.14);--header-pill-border:rgba(255,255,255,.18);
  --header-shade:rgba(0,0,0,.35);--header-shade-2:rgba(0,0,0,.20);--header-shade-3:rgba(0,0,0,.30);
  --chrome-bg:rgba(255,255,255,.14);--chrome-bg-hover:rgba(255,255,255,.24);
  --chrome-bg-strong:rgba(255,255,255,.22);--chrome-bg-strong-hover:rgba(255,255,255,.32);
  --chrome-border:rgba(255,255,255,.18);--chrome-border-strong:rgba(255,255,255,.5);
  --on-chrome:#fff;--on-chrome-muted:rgba(255,255,255,.7);--on-chrome-dim:rgba(255,255,255,.55);
  --chrome-arrow:rgba(255,255,255,.6);--chrome-scroll:rgba(255,255,255,.3);
  --hover-overlay:rgba(9,30,66,.06);--hover-overlay-strong:rgba(9,30,66,.10);
  --modal-bg:#ebecf0;--tab-active:#0052cc;
  --col-bg:rgba(255,255,255,.07);--col-bg-drag:rgba(255,255,255,.2);--col-outline-drag:rgba(255,255,255,.6);
  --col-count-bg:rgba(255,255,255,.22);--col-menu-hover:rgba(255,255,255,.16);
  --col-add-bg:rgba(255,255,255,.10);--col-add-hover:rgba(255,255,255,.2);--col-add-border:rgba(255,255,255,.22);
  --col-scroll:rgba(255,255,255,.2);--col-active-bg:rgba(255,255,255,.18);--col-active-outline:rgba(255,255,255,.4);
  --list-empty:rgba(255,255,255,.5);
  --cta-bg:#e8f0ff;--cta-bg-hover:#c7dcff;--cta-fg:#0052cc;--link-hover:#0747a6;
  --priority-critical-bg:#ff5630;--priority-critical-fg:#fff;
  --priority-high-bg:#ff8b00;--priority-high-fg:#fff;
  --priority-medium-bg:#f59e0b;--priority-medium-fg:#fff;
  --priority-low-bg:#36b37e;--priority-low-fg:#fff;
  --risk-low-bg:#e3fcef;--risk-low-fg:#006644;
  --risk-medium-bg:#fff7d6;--risk-medium-fg:#7a4d00;
  --risk-high-bg:#ffe8e3;--risk-high-fg:#bf2600;
  --blocker-bg:#fff5f3;--blocker-fg:#5e2b1f;--blocker-border:#ff5630;
  --field-hint:#6b778c;
  --clear-bg:rgba(255,100,50,.35);--clear-bg-hover:rgba(255,100,50,.55);--clear-border:rgba(255,100,50,.5);
  --auth-err-bg:#ffe8e6;--auth-err-fg:#c42a1c;--del-hover-bg:#ffe8e3;
  --status-progress-border:#0052cc;--status-progress-bg:#f6f8ff;--status-progress-fg:#0052cc;
  --status-progress-select-border:#4c9aff;--status-progress-select-bg:#e8f0ff;
  --status-blocked-border:#ff5630;--status-blocked-bg:#fff5f3;--status-blocked-fg:#bf2600;
  --status-blocked-select-border:#ff7452;--status-blocked-select-bg:#ffe8e3;
  --status-complete-border:#36b37e;--status-complete-bg:#f3faf6;--status-complete-fg:#006644;
  --status-complete-select-border:#79f2c0;--status-complete-select-bg:#e3fcef;
  --status-waiting-border:#ff8b00;--status-waiting-bg:#fffaf0;--status-waiting-fg:#7a4d00;
  --status-waiting-select-border:#ffab33;--status-waiting-select-bg:#fff0cc;
  --status-void-bg:#f4f5f7;--status-progress-alt-bg:#f0f4ff;
  --type-rfi-bg:#deebff;--type-rfi-fg:#0052cc;
  --type-change-bg:#fff0b3;--type-change-fg:#7a4d00;
  --type-selection-bg:#eae6ff;--type-selection-fg:#403294;
  --type-inspection-bg:#e3fcef;--type-inspection-fg:#006644;
  --type-blocker-bg:#ffe8e3;--type-blocker-fg:#bf2600;
  --type-itb-bg:#e0f7f4;--type-itb-fg:#006c67;
  --badge-neutral-bg:#eef2f7;--badge-neutral-fg:#42526e;
  --badge-soft-bg:#f4f5f7;--badge-soft-fg:#42526e;
  --sidebar-btn-bg:rgba(9,30,66,.08);--sidebar-btn-hover:rgba(9,30,66,.15);
  --sidebar-danger-bg:#ffebe6;--sidebar-danger-fg:#bf2600;
  --sidebar-danger-hover-bg:#ff8f73;--sidebar-danger-hover-fg:#fff;
  --ctx-menu-shadow:rgba(9,30,66,.35);--ctx-menu-hover:#f4f5f7;--ctx-sep:#ebecf0;--ctx-danger-hover:#ffebe6;
  --note-border:#edf0f5;--note-group-border:#dfe1e6;--note-edit-border:#4c9aff;
  --note-save-bg:#0052cc;--note-save-hover:#0747a6;
  --icon-dim:#c1c7d0;--icon-dim-strong:#6b778c;
  --detail-group-bg:rgba(255,255,255,.42);
  --on-timeline-dot:#fff;
  --claim-hover-bg:#e3fcef;--claim-hover-fg:#006644;
  /* H7: restore :root shadow alphas — reduced alphas made white cards on dark green look "stuck on" */
  --shadow-card:0 1px 2px rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.10),0 0 0 0.5px rgba(0,0,0,.05);
  --shadow-card-hover:0 2px 4px rgba(0,0,0,.08),0 10px 28px rgba(0,0,0,.16),0 0 0 0.5px rgba(0,0,0,.06);
  --shadow-card-drag:0 16px 40px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.08);
  --shadow-modal:0 20px 60px rgba(0,0,0,.3),0 0 0 1px rgba(0,0,0,.08);
  --shadow-menu:0 8px 30px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.06);
  --shadow-auth:0 24px 60px rgba(0,0,0,.35);
  --shadow-list:0 4px 16px rgba(0,0,0,.12);
  --radius-card:14px;--radius-modal:18px;--radius-auth:18px;
  --radius-input:10px;--radius-btn:10px;--radius-btn-sm:8px;
  --radius-pill:999px;--radius-menu:14px;--radius-group:12px;--radius-tag:8px;
  --overlay-bg-light:rgba(0,0,0,.45);--overlay-bg-heavy:rgba(0,0,0,.82);
  --cal-overdue-bg:#fee2e2;--cal-overdue-fg:#991b1b;--cal-overdue-dot:#ef4444;
  --cal-due-bg:#fef9c3;--cal-due-fg:#92400e;--cal-due-dot:#f59e0b;
  --cal-upcoming-bg:#dbeafe;--cal-upcoming-fg:#1e40af;--cal-upcoming-dot:#3b82f6;
  --hs-green-bg:#dcfce7;--hs-green-fg:#15803d;
  --hs-amber-bg:#fef9c3;--hs-amber-fg:#92400e;
  --hs-red-bg:#fee2e2;--hs-red-fg:#991b1b;
  --meta-date-fg:#6b778c;--auth-sub-fg:#5a6b80;
  --co-approved-fg:#0b8a0b;--co-pending-fg:#b45309;
  --co-amount-pos:#0b8a0b;--co-amount-neg:#b45309;
  --frozen-warn-bg:#fff0b3;--frozen-warn-fg:#7a4d00;
  --inv-paid-bg:#e3fcef;--inv-paid-fg:#006644;
  --inv-sent-bg:#deebff;--inv-sent-fg:#0052cc;
  --inv-pending-bg:#fff0b3;--inv-pending-fg:#7a4d00;
  --inv-partial-bg:#ccf5fb;--inv-partial-fg:#0b6e87;
  --cd-sub-bg:#deebff;--cd-sub-fg:#0052cc;
  --cd-vendor-bg:#fff0b3;--cd-vendor-fg:#7a4d00;
  --cd-gc-bg:#e3fcef;--cd-gc-fg:#006644;
  --cd-client-bg:#eae6fb;--cd-client-fg:#5e3bbd;
  --rp-bidding-bg:#e8f0ff;--rp-bidding-fg:#0052cc;
  --rp-inprog-bg:#e3fcef;--rp-inprog-fg:#006644;
  --rp-complete-bg:#eae6ff;--rp-complete-fg:#403294;
  --rp-invoicing-bg:#fff0b3;--rp-invoicing-fg:#7a4d00;
  --rp-closed-bg:#f4f5f7;--rp-closed-fg:#5e6c84;
  --variance-pos:#006644;--variance-neg:#bf2600;
  --accent-tint:rgba(54,179,126,.14);--accent-tint-strong:rgba(54,179,126,.22);--accent-ring:rgba(54,179,126,.18);
  --archived-tag-bg:#fef3c7;--archived-tag-fg:#b45309;
  --archived-badge-bg:#fef3c7;--archived-badge-fg:#b45309;
  --cal-overdue-dot:#dc2626;
  --type-fi-bg:#dbeafe;--type-fi-fg:#1d4ed8;
  --type-co-bg:#fef3c7;--type-co-fg:#92400e;
  --type-rfi-fg:#6d28d9;
  /* H7: semantic status accents tuned to this theme's palette */
  --ok:#36b37e;--warn:#ffa033;--err:#ff5a4a;
  --bg-elevated:var(--card-bg);--fg:var(--text-primary);
}
[data-theme="light"]{
  /* Sandbar — 2026-05-27 📘 retune. Was a cool near-white #ebeef3 only ~6% off
     white, so white cards + columns barely lifted off the canvas (flat, washed
     out). Warmed + deepened the canvas to a real SAND tone (#e7e1d6, ~12% off
     white) so the bg→column→card value ladder reads with clear depth — the
     surface-to-card delta now does its job alongside the shadow (matching how
     Gulf's grey canvas separates from white cards). Surfaces stay warm-neutral
     so cards read as crisp paper on sand, not blue-grey on blue-grey. */
  --app-bg:#ddd4c4;--app-fg:#1a2332;--app-text:#1a2332;--app-accent:#0b7a4a;--app-danger:#c42a1c;--accent:var(--app-accent);
  --surface:#ffffff;--surface-2:#f4efe6;--surface-3:#e6ddcf;--card-bg:#ffffff;--overlay-bg:rgba(20,30,45,.45);
  --text-primary:#1a2332;--text-secondary:#3d4757;--text-muted:#5a6678;--on-accent:#fff;--on-app-bg:#1a2332;--bg:#f6f3ee;
  --border:#d2cabc;--border-strong:#b7ac98;--focus:#2b6cb0;--link:#1a4fa0;
  --header-pill-bg:rgba(0,0,0,.08);--header-pill-border:rgba(0,0,0,.12);
  --header-shade:rgba(0,0,0,.10);--header-shade-2:rgba(0,0,0,.06);--header-shade-3:rgba(0,0,0,.08);
  --chrome-bg:rgba(0,0,0,.06);--chrome-bg-hover:rgba(0,0,0,.12);
  --chrome-bg-strong:rgba(0,0,0,.10);--chrome-bg-strong-hover:rgba(0,0,0,.16);
  --chrome-border:rgba(0,0,0,.12);--chrome-border-strong:rgba(0,0,0,.28);
  --on-chrome:#1a2332;--on-chrome-muted:rgba(26,35,50,.7);--on-chrome-dim:rgba(26,35,50,.55);
  --chrome-arrow:rgba(26,35,50,.6);--chrome-scroll:rgba(0,0,0,.18);
  --hover-overlay:rgba(26,35,50,.06);--hover-overlay-strong:rgba(26,35,50,.10);
  --modal-bg:#e4dccd;--tab-active:#1a4fa0;
  --col-bg:rgba(74,58,38,.06);--col-bg-drag:rgba(74,58,38,.13);--col-outline-drag:rgba(74,58,38,.4);
  --col-count-bg:rgba(26,35,50,.10);--col-menu-hover:rgba(26,35,50,.10);
  --col-add-bg:rgba(26,35,50,.06);--col-add-hover:rgba(26,35,50,.12);--col-add-border:rgba(26,35,50,.14);
  --col-scroll:rgba(26,35,50,.18);--col-active-bg:rgba(26,35,50,.10);--col-active-outline:rgba(26,35,50,.25);
  --list-empty:rgba(26,35,50,.45);
  --cta-bg:#dfeaff;--cta-bg-hover:#c2d7f5;--cta-fg:#1a4fa0;--link-hover:#0d3a7c;
  --priority-critical-bg:#c42a1c;--priority-critical-fg:#fff;
  --priority-high-bg:#d97706;--priority-high-fg:#fff;
  --priority-medium-bg:#b45309;--priority-medium-fg:#fff;
  --priority-low-bg:#0b7a4a;--priority-low-fg:#fff;
  --risk-low-bg:#d6f4e2;--risk-low-fg:#064a2d;
  --risk-medium-bg:#fbecc6;--risk-medium-fg:#5a3700;
  --risk-high-bg:#fcd7cf;--risk-high-fg:#8a1c00;
  --blocker-bg:#fde6e1;--blocker-fg:#4a1f14;--blocker-border:#c42a1c;
  --field-hint:#5a6678;
  --clear-bg:rgba(196,42,28,.18);--clear-bg-hover:rgba(196,42,28,.30);--clear-border:rgba(196,42,28,.40);
  --auth-err-bg:#fde6e1;--auth-err-fg:#8a1c00;--del-hover-bg:#fcd7cf;
  --status-progress-border:#1a4fa0;--status-progress-bg:#eaf1fb;--status-progress-fg:#1a4fa0;
  --status-progress-select-border:#4b7cc4;--status-progress-select-bg:#dfeaff;
  --status-blocked-border:#c42a1c;--status-blocked-bg:#fde6e1;--status-blocked-fg:#8a1c00;
  --status-blocked-select-border:#d85a4a;--status-blocked-select-bg:#fcd7cf;
  --status-complete-border:#0b7a4a;--status-complete-bg:#eaf5ee;--status-complete-fg:#064a2d;
  --status-complete-select-border:#5cc28c;--status-complete-select-bg:#d6f4e2;
  --status-waiting-border:#d97706;--status-waiting-bg:#fff5e6;--status-waiting-fg:#5a3700;
  --status-waiting-select-border:#e6953a;--status-waiting-select-bg:#fbecc6;
  --status-void-bg:#e4e8ef;--status-progress-alt-bg:#e4edfa;
  --type-rfi-bg:#dfeaff;--type-rfi-fg:#1a4fa0;
  --type-change-bg:#fbecc6;--type-change-fg:#5a3700;
  --type-selection-bg:#e5e0f4;--type-selection-fg:#382a7a;
  --type-inspection-bg:#d6f4e2;--type-inspection-fg:#064a2d;
  --type-blocker-bg:#fcd7cf;--type-blocker-fg:#8a1c00;
  --type-itb-bg:#d6efec;--type-itb-fg:#0a5a55;
  --badge-neutral-bg:#e8e1d4;--badge-neutral-fg:#475468;
  --badge-soft-bg:#eceff4;--badge-soft-fg:#475468;
  --sidebar-btn-bg:rgba(26,35,50,.08);--sidebar-btn-hover:rgba(26,35,50,.15);
  --sidebar-danger-bg:#fde6e1;--sidebar-danger-fg:#8a1c00;
  --sidebar-danger-hover-bg:#d85a4a;--sidebar-danger-hover-fg:#fff;
  --ctx-menu-shadow:rgba(26,35,50,.28);--ctx-menu-hover:#eceff4;--ctx-sep:#dce1e9;--ctx-danger-hover:#fde6e1;
  --note-border:#e8e1d4;--note-group-border:#d2cabc;--note-edit-border:#4b7cc4;
  --note-save-bg:#1a4fa0;--note-save-hover:#0d3a7c;
  --icon-dim:#b4bac5;--icon-dim-strong:#5a6678;
  --detail-group-bg:rgba(255,255,255,.55);
  --on-timeline-dot:#fff;
  --claim-hover-bg:#d6f4e2;--claim-hover-fg:#064a2d;
  --shadow-card:0 1px 2px rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.10),0 0 0 0.5px rgba(0,0,0,.05);
  --shadow-card-hover:0 2px 4px rgba(0,0,0,.08),0 10px 28px rgba(0,0,0,.16),0 0 0 0.5px rgba(0,0,0,.06);
  --shadow-card-drag:0 16px 40px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.08);
  --shadow-modal:0 20px 60px rgba(0,0,0,.3),0 0 0 1px rgba(0,0,0,.08);
  --shadow-menu:0 8px 30px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.06);
  --shadow-auth:0 24px 60px rgba(0,0,0,.35);
  --shadow-list:0 4px 16px rgba(0,0,0,.12);
  --radius-card:14px;--radius-modal:18px;--radius-auth:18px;
  --radius-input:10px;--radius-btn:10px;--radius-btn-sm:8px;
  --radius-pill:999px;--radius-menu:14px;--radius-group:12px;--radius-tag:8px;
  --overlay-bg-light:rgba(0,0,0,.45);--overlay-bg-heavy:rgba(0,0,0,.82);
  --cal-overdue-bg:#fee2e2;--cal-overdue-fg:#991b1b;--cal-overdue-dot:#ef4444;
  --cal-due-bg:#fef9c3;--cal-due-fg:#92400e;--cal-due-dot:#f59e0b;
  --cal-upcoming-bg:#dbeafe;--cal-upcoming-fg:#1e40af;--cal-upcoming-dot:#3b82f6;
  --hs-green-bg:#dcfce7;--hs-green-fg:#15803d;
  --hs-amber-bg:#fef9c3;--hs-amber-fg:#92400e;
  --hs-red-bg:#fee2e2;--hs-red-fg:#991b1b;
  --meta-date-fg:#5a6678;--auth-sub-fg:#475468;
  --co-approved-fg:#064a2d;--co-pending-fg:#5a3700;
  --co-amount-pos:#064a2d;--co-amount-neg:#8a1c00;
  --frozen-warn-bg:#fbecc6;--frozen-warn-fg:#5a3700;
  --inv-paid-bg:#d6f4e2;--inv-paid-fg:#064a2d;
  --inv-sent-bg:#dfeaff;--inv-sent-fg:#1a4fa0;
  --inv-pending-bg:#fbecc6;--inv-pending-fg:#5a3700;
  --inv-partial-bg:#cdeef3;--inv-partial-fg:#0a5d70;
  --cd-sub-bg:#dfeaff;--cd-sub-fg:#1a4fa0;
  --cd-vendor-bg:#fbecc6;--cd-vendor-fg:#5a3700;
  --cd-gc-bg:#d6f4e2;--cd-gc-fg:#064a2d;
  --cd-client-bg:#e8e0f5;--cd-client-fg:#4f2d8f;
  --rp-bidding-bg:#dfeaff;--rp-bidding-fg:#1a4fa0;
  --rp-inprog-bg:#d6f4e2;--rp-inprog-fg:#064a2d;
  --rp-complete-bg:#e5e0f4;--rp-complete-fg:#382a7a;
  --rp-invoicing-bg:#fbecc6;--rp-invoicing-fg:#5a3700;
  --rp-closed-bg:#e4e8ef;--rp-closed-fg:#475468;
  --variance-pos:#064a2d;--variance-neg:#8a1c00;
  --accent-tint:rgba(11,122,74,.10);--accent-tint-strong:rgba(11,122,74,.18);--accent-ring:rgba(11,122,74,.18);
  --archived-tag-bg:#fef3c7;--archived-tag-fg:#b45309;
  --archived-badge-bg:#fef3c7;--archived-badge-fg:#b45309;
  --cal-overdue-dot:#dc2626;
  --type-fi-bg:#dbeafe;--type-fi-fg:#1d4ed8;
  --type-co-bg:#fef3c7;--type-co-fg:#92400e;
  --type-rfi-fg:#6d28d9;
  /* H7: semantic status accents tuned to this theme's palette */
  --ok:#0b7a4a;--warn:#b45309;--err:#c42a1c;
  /* H11: row tint --*-bg/-fg overrides matching this theme's muted aesthetic */
  --ok-bg:#e3f5ec;--ok-fg:#0b5d39;
  --warn-bg:#fbecd6;--warn-fg:#8a3f06;
  --err-bg:#fae0dc;--err-fg:#a01c14;
  --bg-elevated:var(--card-bg);--fg:var(--text-primary);
}
[data-theme="sepia"]{
  /* Driftwood — 2026-05-27 📘 retune. The old accent #7a5530 was a muted muddy
     brown used as the PRIMARY CTA bg with DARK on-accent text → "Open Board"
     buttons nearly vanished against the cream cards (no CTA pop). Swapped to a
     saturated terracotta #c2611c with WHITE on-accent text — warm + on-theme
     for "Driftwood", but reads as a real, confident primary button (6.3:1 white
     on it). Canvas/cards kept (cream-on-brown layering was already good);
     deepened the canvas slightly + warmed surface-2/3 so columns separate. */
  --app-bg:#4d3d2c;--app-fg:#fff8ec;--app-text:#fff8ec;--app-accent:#b35717;--app-danger:#c4582a;--accent:var(--app-accent);
  --surface:#fdf5e3;--surface-2:#f3e6cb;--surface-3:#e7d6b0;--card-bg:#fdf5e3;--overlay-bg:rgba(40,28,12,.55);
  --text-primary:#3a2c1a;--text-secondary:#52432c;--text-muted:#6b5a3f;--on-accent:#fff8ec;--on-app-bg:#fff8ec;--bg:#f3e6cb;
  --border:#d9c8a4;--border-strong:#bfa978;--focus:#a8702a;--link:#8a5a1f;
  --header-pill-bg:rgba(255,248,236,.14);--header-pill-border:rgba(255,248,236,.22);
  --header-shade:rgba(40,28,12,.35);--header-shade-2:rgba(40,28,12,.20);--header-shade-3:rgba(40,28,12,.30);
  --chrome-bg:rgba(255,248,236,.14);--chrome-bg-hover:rgba(255,248,236,.24);
  --chrome-bg-strong:rgba(255,248,236,.22);--chrome-bg-strong-hover:rgba(255,248,236,.32);
  --chrome-border:rgba(255,248,236,.22);--chrome-border-strong:rgba(255,248,236,.5);
  --on-chrome:#fff8ec;--on-chrome-muted:rgba(255,248,236,.7);--on-chrome-dim:rgba(255,248,236,.55);
  --chrome-arrow:rgba(255,248,236,.6);--chrome-scroll:rgba(255,248,236,.3);
  --hover-overlay:rgba(58,44,26,.08);--hover-overlay-strong:rgba(58,44,26,.14);
  --modal-bg:#eadcb8;--tab-active:#8a5a1f;
  --col-bg:rgba(255,248,236,.10);--col-bg-drag:rgba(255,248,236,.22);--col-outline-drag:rgba(255,248,236,.55);
  --col-count-bg:rgba(255,248,236,.22);--col-menu-hover:rgba(255,248,236,.18);
  --col-add-bg:rgba(255,248,236,.12);--col-add-hover:rgba(255,248,236,.22);--col-add-border:rgba(255,248,236,.22);
  --col-scroll:rgba(255,248,236,.20);--col-active-bg:rgba(255,248,236,.20);--col-active-outline:rgba(255,248,236,.38);
  --list-empty:rgba(255,248,236,.50);
  --cta-bg:#f5e4c3;--cta-bg-hover:#e6cc93;--cta-fg:#8a5a1f;--link-hover:#6b4513;
  --priority-critical-bg:#c4582a;--priority-critical-fg:#fff;
  --priority-high-bg:#c88a1c;--priority-high-fg:#fff;
  --priority-medium-bg:#a8702a;--priority-medium-fg:#fff;
  --priority-low-bg:#6b8a3a;--priority-low-fg:#fff;
  --risk-low-bg:#dceabb;--risk-low-fg:#3a4a1a;
  --risk-medium-bg:#f0dca2;--risk-medium-fg:#5a3a0a;
  --risk-high-bg:#f2c8aa;--risk-high-fg:#6b2a10;
  --blocker-bg:#f0d4c2;--blocker-fg:#4a2410;--blocker-border:#c4582a;
  --field-hint:#6b5a3f;
  --clear-bg:rgba(196,88,42,.25);--clear-bg-hover:rgba(196,88,42,.45);--clear-border:rgba(196,88,42,.45);
  --auth-err-bg:#f2c8aa;--auth-err-fg:#6b2a10;--del-hover-bg:#f0d4c2;
  --status-progress-border:#8a5a1f;--status-progress-bg:#f0e8d8;--status-progress-fg:#6b4513;
  --status-progress-select-border:#bfa978;--status-progress-select-bg:#f5e4c3;
  --status-blocked-border:#c4582a;--status-blocked-bg:#f0d4c2;--status-blocked-fg:#6b2a10;
  --status-blocked-select-border:#d87a4a;--status-blocked-select-bg:#f2c8aa;
  --status-complete-border:#6b8a3a;--status-complete-bg:#e8efd0;--status-complete-fg:#3a4a1a;
  --status-complete-select-border:#9cb25a;--status-complete-select-bg:#dceabb;
  --status-waiting-border:#c88a1c;--status-waiting-bg:#faecc4;--status-waiting-fg:#5a3a0a;
  --status-waiting-select-border:#d9a34a;--status-waiting-select-bg:#e8d290;
  --status-void-bg:#e0ceaa;--status-progress-alt-bg:#ebe0c4;
  --type-rfi-bg:#f5e4c3;--type-rfi-fg:#8a5a1f;
  --type-change-bg:#f0dca2;--type-change-fg:#5a3a0a;
  --type-selection-bg:#e6d8ea;--type-selection-fg:#5a2a6b;
  --type-inspection-bg:#dceabb;--type-inspection-fg:#3a4a1a;
  --type-blocker-bg:#f2c8aa;--type-blocker-fg:#6b2a10;
  --type-itb-bg:#d8e8dc;--type-itb-fg:#2a5a3a;
  --badge-neutral-bg:#e0ceaa;--badge-neutral-fg:#6b5a3f;
  --badge-soft-bg:#eadcb8;--badge-soft-fg:#6b5a3f;
  --sidebar-btn-bg:rgba(58,44,26,.10);--sidebar-btn-hover:rgba(58,44,26,.18);
  --sidebar-danger-bg:#f0d4c2;--sidebar-danger-fg:#6b2a10;
  --sidebar-danger-hover-bg:#c4582a;--sidebar-danger-hover-fg:#fff;
  --ctx-menu-shadow:rgba(40,28,12,.35);--ctx-menu-hover:#eadcb8;--ctx-sep:#d9c8a4;--ctx-danger-hover:#f0d4c2;
  --note-border:#e0ceaa;--note-group-border:#d9c8a4;--note-edit-border:#bfa978;
  --note-save-bg:#8a5a1f;--note-save-hover:#6b4513;
  --icon-dim:#bfa978;--icon-dim-strong:#6b5a3f;
  --detail-group-bg:rgba(253,245,227,.55);
  --on-timeline-dot:#fdf5e3;
  --claim-hover-bg:#dceabb;--claim-hover-fg:#3a4a1a;
  --shadow-card:0 1px 2px rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.10),0 0 0 0.5px rgba(0,0,0,.05);
  --shadow-card-hover:0 2px 4px rgba(0,0,0,.08),0 10px 28px rgba(0,0,0,.16),0 0 0 0.5px rgba(0,0,0,.06);
  --shadow-card-drag:0 16px 40px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.08);
  --shadow-modal:0 20px 60px rgba(0,0,0,.3),0 0 0 1px rgba(0,0,0,.08);
  --shadow-menu:0 8px 30px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.06);
  --shadow-auth:0 24px 60px rgba(0,0,0,.35);
  --shadow-list:0 4px 16px rgba(0,0,0,.12);
  --radius-card:14px;--radius-modal:18px;--radius-auth:18px;
  --radius-input:10px;--radius-btn:10px;--radius-btn-sm:8px;
  --radius-pill:999px;--radius-menu:14px;--radius-group:12px;--radius-tag:8px;
  --overlay-bg-light:rgba(40,28,12,.50);--overlay-bg-heavy:rgba(40,28,12,.88);
  --cal-overdue-bg:#f2c8aa;--cal-overdue-fg:#6b2a10;--cal-overdue-dot:#c4582a;
  --cal-due-bg:#f0dca2;--cal-due-fg:#5a3a0a;--cal-due-dot:#c88a1c;
  --cal-upcoming-bg:#cdd6d2;--cal-upcoming-fg:#2f4742;--cal-upcoming-dot:#6e8a82;
  --hs-green-bg:#dceabb;--hs-green-fg:#3a4a1a;
  --hs-amber-bg:#f0dca2;--hs-amber-fg:#5a3a0a;
  --hs-red-bg:#f2c8aa;--hs-red-fg:#6b2a10;
  --meta-date-fg:#6b5a3f;--auth-sub-fg:#6b5a3f;
  --co-approved-fg:#3a4a1a;--co-pending-fg:#5a3a0a;
  --co-amount-pos:#3a4a1a;--co-amount-neg:#6b2a10;
  --frozen-warn-bg:#f0dca2;--frozen-warn-fg:#5a3a0a;
  --inv-paid-bg:#dceabb;--inv-paid-fg:#3a4a1a;
  --inv-sent-bg:#cdd6d2;--inv-sent-fg:#2f4742;
  --inv-pending-bg:#f0dca2;--inv-pending-fg:#5a3a0a;
  --inv-partial-bg:#cfe6df;--inv-partial-fg:#1f5a52;
  --cd-sub-bg:#cdd6d2;--cd-sub-fg:#2f4742;
  --cd-vendor-bg:#f0dca2;--cd-vendor-fg:#5a3a0a;
  --cd-gc-bg:#dceabb;--cd-gc-fg:#3a4a1a;
  --cd-client-bg:#e4dcc4;--cd-client-fg:#4a3a14;
  --rp-bidding-bg:#cdd6d2;--rp-bidding-fg:#2f4742;
  --rp-inprog-bg:#dceabb;--rp-inprog-fg:#3a4a1a;
  --rp-complete-bg:#e6d8ea;--rp-complete-fg:#5a2a6b;
  --rp-invoicing-bg:#f0dca2;--rp-invoicing-fg:#5a3a0a;
  --rp-closed-bg:#e0ceaa;--rp-closed-fg:#6b5a3f;
  --variance-pos:#3a4a1a;--variance-neg:#6b2a10;
  --accent-tint:rgba(210,167,106,.16);--accent-tint-strong:rgba(210,167,106,.26);--accent-ring:rgba(210,167,106,.22);
  --archived-tag-bg:#f1e3c1;--archived-tag-fg:#8a5b00;
  --archived-badge-bg:#f1e3c1;--archived-badge-fg:#8a5b00;
  --cal-overdue-dot:#a93832;
  --type-fi-bg:#d3dcd6;--type-fi-fg:#2f4742;
  --type-co-bg:#f1e3c1;--type-co-fg:#6e4500;
  --type-rfi-fg:#5d2b9b;
  /* H7: semantic status accents tuned to this theme's palette */
  --ok:#6b8a3a;--warn:#c88a1c;--err:#c4582a;
  /* H11: row tint --*-bg/-fg overrides — warm sepia derivatives */
  --ok-bg:#ecead0;--ok-fg:#4a611f;
  --warn-bg:#f4e2b8;--warn-fg:#8a5a12;
  --err-bg:#f0d4c2;--err-fg:#8a3a1a;
  --bg-elevated:var(--card-bg);--fg:var(--text-primary);
}
[data-theme="midnight"]{
  /* V39f: --app-accent darkened #5b8def → #2a66de for white-on-accent contrast
     (3.23 → 4.95, passes AA on accent-button text). */
  --app-bg:#0c1422;--app-fg:#e6edf7;--app-text:#e6edf7;--app-accent:#2a66de;--app-danger:#ff5677;--accent:var(--app-accent);
  --surface:#172032;--surface-2:#1f293e;--surface-3:#28344d;--card-bg:#172032;--overlay-bg:rgba(0,0,0,.65);
  /* V-depth1 2026-06-29 — DARK-THEME ELEVATION LADDER override (Bayfront only).
     The root ladder is black-at-low-alpha, which reads as real lift on a LIGHT matte
     but vanishes on Bayfront's near-black #0c1422 (black-on-black). Dark-mode depth
     needs three layers the light ladder lacks: (1) a DEEPER + WIDER black drop shadow
     so the card grounds against the matte; (2) a faint accent-tinted ambient HALO —
     the brand's dark-water blue glow — so the surface lifts luminously, not just by a
     hairline; (3) a brighter specular TOP edge + a darker bottom seat so the card has
     real top-and-bottom definition. One token change → every raised card/chip/panel
     across the app floats again. (Lido Sun/contrast is deliberately border-depth AMOLED
     and is NOT included; Driftwood/Mangrove use light cards so the root ladder reads.) */
  /* V-depth2 2026-06-29 — AMBIENT-LED dark shadows. The prior ladder was a downward DROP
     (0 6px / 0 2px + big blur); in dense grids (e.g. Contacts, rowGap 13px) the next card's
     opaque fill painted OVER the bottom of that drop → "shadow missing on the bottom half."
     Fix: lead with an AMBIENT, near-symmetric shadow (small/no Y-offset, wide soft blur) so
     the card is grounded EVENLY on all sides and nothing gets clipped by a tight next row,
     plus a SMALL directional component for sit. Reads grounded top+bottom even when packed. */
  /* V-depth3 — edge hairline is now a SUBTLE LIGHT rim (not a black ring). The black
     grounding ring (0 0 0 .5px rgba(0,0,0,.4)) stacked on cards' own dark border read as a
     THICK DARK outline on dark-on-dark ("too dark / thick sides"). On dark, the edge should
     be defined by a faint LIGHT hairline; the soft ambient shadow alone does the grounding. */
  --shadow-e1: 0 2px 8px rgba(0,0,0,.4),
               0 0 0 .5px rgba(255,255,255,.04),
               inset 0 1px 0 rgba(255,255,255,.05);
  --shadow-e2: 0 0 14px rgba(0,0,0,.4),
               0 2px 5px rgba(0,0,0,.45),
               0 0 0 .5px rgba(255,255,255,.05),
               0 0 26px -14px color-mix(in srgb,var(--app-accent) 50%,transparent),
               inset 0 1px 0 rgba(255,255,255,.06);
  --shadow-e3: 0 0 24px rgba(0,0,0,.45),
               0 4px 12px rgba(0,0,0,.45),
               0 0 0 .5px rgba(255,255,255,.06),
               0 0 32px -14px color-mix(in srgb,var(--app-accent) 60%,transparent),
               inset 0 1px 0 rgba(255,255,255,.08);
  --shadow-e4: 0 0 40px rgba(0,0,0,.5),
               0 10px 26px rgba(0,0,0,.5),
               0 0 0 .5px rgba(255,255,255,.06),
               0 0 48px -14px color-mix(in srgb,var(--app-accent) 65%,transparent),
               inset 0 1px 0 rgba(255,255,255,.10);
  --text-primary:#e6edf7;--text-secondary:#b3bdd1;--text-muted:#8a97b2;--on-accent:#fff;--on-app-bg:#e6edf7;--bg:#1f293e;
  --border:#2c3a57;--border-strong:#3f4e70;--focus:#5b8def;--link:#7aa7ff;
  --header-pill-bg:rgba(230,237,247,.10);--header-pill-border:rgba(230,237,247,.18);
  --header-shade:rgba(0,0,0,.45);--header-shade-2:rgba(0,0,0,.30);--header-shade-3:rgba(0,0,0,.40);
  --chrome-bg:rgba(230,237,247,.10);--chrome-bg-hover:rgba(230,237,247,.20);
  --chrome-bg-strong:rgba(230,237,247,.16);--chrome-bg-strong-hover:rgba(230,237,247,.26);
  --chrome-border:rgba(230,237,247,.18);--chrome-border-strong:rgba(230,237,247,.45);
  --on-chrome:#e6edf7;--on-chrome-muted:rgba(230,237,247,.7);--on-chrome-dim:rgba(230,237,247,.55);
  --chrome-arrow:rgba(230,237,247,.6);--chrome-scroll:rgba(230,237,247,.3);
  --hover-overlay:rgba(230,237,247,.06);--hover-overlay-strong:rgba(230,237,247,.12);
  --modal-bg:#28344d;--tab-active:#7aa7ff;
  --col-bg:rgba(230,237,247,.06);--col-bg-drag:rgba(230,237,247,.16);--col-outline-drag:rgba(230,237,247,.5);
  --col-count-bg:rgba(230,237,247,.18);--col-menu-hover:rgba(230,237,247,.16);
  --col-add-bg:rgba(230,237,247,.08);--col-add-hover:rgba(230,237,247,.18);--col-add-border:rgba(230,237,247,.20);
  --col-scroll:rgba(230,237,247,.20);--col-active-bg:rgba(230,237,247,.16);--col-active-outline:rgba(230,237,247,.38);
  --list-empty:rgba(230,237,247,.45);
  --cta-bg:#1f293e;--cta-bg-hover:#2a3f6b;--cta-fg:#7aa7ff;--link-hover:#9cbcff;
  --priority-critical-bg:#ff5677;--priority-critical-fg:#fff;
  --priority-high-bg:#ff9d3a;--priority-high-fg:#0c1422;
  --priority-medium-bg:#ffc93a;--priority-medium-fg:#0c1422;
  --priority-low-bg:#5be0a0;--priority-low-fg:#0c1422;
  --risk-low-bg:#1e3a2d;--risk-low-fg:#5be0a0;
  --risk-medium-bg:#3a2f0a;--risk-medium-fg:#ffc93a;
  --risk-high-bg:#3a1a1a;--risk-high-fg:#ff8888;
  --blocker-bg:#2a1414;--blocker-fg:#ff8888;--blocker-border:#ff5677;
  --field-hint:#8a97b2;
  --clear-bg:rgba(255,86,119,.25);--clear-bg-hover:rgba(255,86,119,.45);--clear-border:rgba(255,86,119,.5);
  --auth-err-bg:#2a1414;--auth-err-fg:#ff8888;--del-hover-bg:#3a1a1a;
  --status-progress-border:#5b8def;--status-progress-bg:#1a2a4d;--status-progress-fg:#9cbcff;
  --status-progress-select-border:#7aa7ff;--status-progress-select-bg:#24355e;
  --status-blocked-border:#ff5677;--status-blocked-bg:#3a1a1a;--status-blocked-fg:#ff8888;
  --status-blocked-select-border:#ff7a92;--status-blocked-select-bg:#4a2020;
  --status-complete-border:#5be0a0;--status-complete-bg:#1e3a2d;--status-complete-fg:#7ce8b8;
  --status-complete-select-border:#7ce8b8;--status-complete-select-bg:#254a3b;
  --status-waiting-border:#ffc93a;--status-waiting-bg:#3a2f0a;--status-waiting-fg:#ffc93a;
  --status-waiting-select-border:#ffc93a;--status-waiting-select-bg:#4a3e14;
  --status-void-bg:#28344d;--status-progress-alt-bg:#1f2d4a;
  --type-rfi-bg:#1a2a4d;--type-rfi-fg:#9cbcff;
  --type-change-bg:#3a2f0a;--type-change-fg:#ffc93a;
  --type-selection-bg:#2a1f4a;--type-selection-fg:#b89cff;
  --type-inspection-bg:#1e3a2d;--type-inspection-fg:#7ce8b8;
  --type-blocker-bg:#3a1a1a;--type-blocker-fg:#ff8888;
  --type-itb-bg:#1a3a38;--type-itb-fg:#6fd4cc;
  --badge-neutral-bg:#28344d;--badge-neutral-fg:#8a97b2;
  --badge-soft-bg:#1f293e;--badge-soft-fg:#8a97b2;
  --sidebar-btn-bg:rgba(230,237,247,.10);--sidebar-btn-hover:rgba(230,237,247,.18);
  --sidebar-danger-bg:#3a1a1a;--sidebar-danger-fg:#ff8888;
  --sidebar-danger-hover-bg:#ff5677;--sidebar-danger-hover-fg:#fff;
  --ctx-menu-shadow:rgba(0,0,0,.55);--ctx-menu-hover:#28344d;--ctx-sep:#2c3a57;--ctx-danger-hover:#3a1a1a;
  --note-border:#28344d;--note-group-border:#2c3a57;--note-edit-border:#5b8def;
  --note-save-bg:#5b8def;--note-save-hover:#7aa7ff;
  --icon-dim:#3f4e70;--icon-dim-strong:#8a97b2;
  --detail-group-bg:rgba(230,237,247,.06);
  --on-timeline-dot:#0c1422;
  --claim-hover-bg:#1e3a2d;--claim-hover-fg:#7ce8b8;
  --shadow-card:0 1px 3px rgba(0,0,0,.5),0 6px 18px rgba(0,0,0,.5),0 0 0 0.5px rgba(255,255,255,.1);
  --shadow-card-hover:0 2px 5px rgba(0,0,0,.6),0 12px 30px rgba(0,0,0,.6),0 0 0 0.5px rgba(255,255,255,.13);
  --shadow-card-drag:0 16px 40px rgba(0,0,0,.65),0 0 0 0.5px rgba(255,255,255,.12);
  --shadow-modal:0 20px 60px rgba(0,0,0,.65),0 0 0 0.5px rgba(255,255,255,.10);
  --shadow-menu:0 8px 30px rgba(0,0,0,.5),0 0 0 0.5px rgba(255,255,255,.08);
  --shadow-auth:0 24px 60px rgba(0,0,0,.6);
  --shadow-list:0 4px 16px rgba(0,0,0,.072);
  --radius-card:14px;--radius-modal:18px;--radius-auth:18px;
  --radius-input:10px;--radius-btn:10px;--radius-btn-sm:8px;
  --radius-pill:999px;--radius-menu:14px;--radius-group:12px;--radius-tag:8px;
  --overlay-bg-light:rgba(0,0,0,.60);--overlay-bg-heavy:rgba(0,0,0,.88);
  --cal-overdue-bg:#3a1a1a;--cal-overdue-fg:#ff8888;--cal-overdue-dot:#ff5677;
  --cal-due-bg:#3a2f0a;--cal-due-fg:#ffc93a;--cal-due-dot:#ffc93a;
  --cal-upcoming-bg:#1a2a4d;--cal-upcoming-fg:#9cbcff;--cal-upcoming-dot:#5b8def;
  --hs-green-bg:#1e3a2d;--hs-green-fg:#7ce8b8;
  --hs-amber-bg:#3a2f0a;--hs-amber-fg:#ffc93a;
  --hs-red-bg:#3a1a1a;--hs-red-fg:#ff8888;
  --meta-date-fg:#8a97b2;--auth-sub-fg:#8a97b2;
  --co-approved-fg:#7ce8b8;--co-pending-fg:#ffc93a;
  --co-amount-pos:#7ce8b8;--co-amount-neg:#ff8888;
  --frozen-warn-bg:#3a2f0a;--frozen-warn-fg:#ffc93a;
  --inv-paid-bg:#1e3a2d;--inv-paid-fg:#7ce8b8;
  --inv-sent-bg:#1a2a4d;--inv-sent-fg:#9cbcff;
  --inv-pending-bg:#3a2f0a;--inv-pending-fg:#ffc93a;
  --inv-partial-bg:#0a2f3a;--inv-partial-fg:#5fd6e8;
  --cd-sub-bg:#1a2a4d;--cd-sub-fg:#9cbcff;
  --cd-vendor-bg:#3a2f0a;--cd-vendor-fg:#ffc93a;
  --cd-gc-bg:#1e3a2d;--cd-gc-fg:#7ce8b8;
  --cd-client-bg:#2e2548;--cd-client-fg:#c4b5fd;
  --rp-bidding-bg:#1a2a4d;--rp-bidding-fg:#9cbcff;
  --rp-inprog-bg:#1e3a2d;--rp-inprog-fg:#7ce8b8;
  --rp-complete-bg:#2a1f4a;--rp-complete-fg:#b89cff;
  --rp-invoicing-bg:#3a2f0a;--rp-invoicing-fg:#ffc93a;
  --rp-closed-bg:#28344d;--rp-closed-fg:#8a97b2;
  --variance-pos:#7ce8b8;--variance-neg:#ff8888;
  --accent-tint:rgba(91,141,239,.18);--accent-tint-strong:rgba(91,141,239,.28);--accent-ring:rgba(91,141,239,.22);
  --archived-tag-bg:#3b2e0a;--archived-tag-fg:#ffc93a;
  --archived-badge-bg:#3b2e0a;--archived-badge-fg:#ffc93a;
  --cal-overdue-dot:#ff8888;
  --type-fi-bg:#172a4a;--type-fi-fg:#7ec8ff;
  --type-co-bg:#3b2e0a;--type-co-fg:#ffc93a;
  --type-rfi-fg:#c4a3ff;
  /* H7: semantic status accents tuned to this theme's palette */
  --ok:#5be0a0;--warn:#ffc93a;--err:#ff5677;
  /* H11: row tint --*-bg/-fg overrides — dark mode subtle tints (lighter text on dark bg) */
  --ok-bg:rgba(91,224,160,.14);--ok-fg:#5be0a0;
  --warn-bg:rgba(255,201,58,.14);--warn-fg:#ffc93a;
  --err-bg:rgba(255,86,119,.14);--err-fg:#ff7a92;
  --bg-elevated:var(--card-bg);--fg:var(--text-primary);
}
[data-theme="contrast"]{
  /* Lido Sun — 2026-05-27 📘 retune. Intentionally a HIGH-CONTRAST / AMOLED a11y
     theme: pure-black canvas, white borders carry the depth (valid WCAG
     high-contrast approach), gold accent. Was black-on-black-on-black (canvas,
     columns, cards ALL #000 → card edges only readable via border). Lifted the
     CARDS to a near-black #121212 on the pure-#000 canvas so they read as a real
     layer (still AMOLED-dark) WITHOUT softening the white-border contrast. Gold
     softened #ffd400 → #ffd633 (a hair less harsh) but still a bold sun accent. */
  --app-bg:#000;--app-fg:#fff;--app-text:#fff;--app-accent:#ffd633;--app-danger:#ff453a;--accent:var(--app-accent);
  --surface:#121212;--surface-2:#1c1c1c;--surface-3:#262626;--card-bg:#121212;--overlay-bg:rgba(0,0,0,.8);
  --text-primary:#ffffff;--text-secondary:#ececec;--text-muted:#cfcfcf;--on-accent:#000;--on-app-bg:#fff;--bg:#0a0a0a;
  --border:#ffffff;--border-strong:#ffd400;--focus:#ffd400;--link:#ffd400;
  --header-pill-bg:rgba(255,212,0,.14);--header-pill-border:#ffd400;
  --header-shade:rgba(0,0,0,.55);--header-shade-2:rgba(0,0,0,.40);--header-shade-3:rgba(0,0,0,.50);
  --chrome-bg:rgba(255,212,0,.14);--chrome-bg-hover:rgba(255,212,0,.28);
  --chrome-bg-strong:rgba(255,212,0,.22);--chrome-bg-strong-hover:rgba(255,212,0,.36);
  --chrome-border:#ffd400;--chrome-border-strong:#ffd400;
  --on-chrome:#fff;--on-chrome-muted:#ffd400;--on-chrome-dim:#d0d0d0;
  --chrome-arrow:#ffd400;--chrome-scroll:#ffd400;
  --hover-overlay:rgba(255,212,0,.14);--hover-overlay-strong:rgba(255,212,0,.24);
  --modal-bg:#0a0a0a;--tab-active:#ffd633;
  --col-bg:rgba(255,255,255,.05);--col-bg-drag:rgba(255,214,51,.2);--col-outline-drag:#ffd633;
  --col-count-bg:rgba(255,212,0,.22);--col-menu-hover:rgba(255,212,0,.22);
  --col-add-bg:rgba(255,212,0,.14);--col-add-hover:rgba(255,212,0,.28);--col-add-border:#ffd400;
  --col-scroll:#ffd400;--col-active-bg:rgba(255,212,0,.22);--col-active-outline:#ffd400;
  --list-empty:#d0d0d0;
  --cta-bg:rgba(255,212,0,.14);--cta-bg-hover:rgba(255,212,0,.28);--cta-fg:#ffd400;--link-hover:#fff;
  --priority-critical-bg:#ff2d2d;--priority-critical-fg:#fff;
  --priority-high-bg:#ffa800;--priority-high-fg:#000;
  --priority-medium-bg:#ffd400;--priority-medium-fg:#000;
  --priority-low-bg:#00d48a;--priority-low-fg:#000;
  --risk-low-bg:#000000;--risk-low-fg:#00d48a;
  --risk-medium-bg:#000000;--risk-medium-fg:#ffd400;
  --risk-high-bg:#000000;--risk-high-fg:#ff2d2d;
  --blocker-bg:#000000;--blocker-fg:#ff2d2d;--blocker-border:#ff2d2d;
  --field-hint:#d0d0d0;
  --clear-bg:rgba(255,45,45,.30);--clear-bg-hover:rgba(255,45,45,.55);--clear-border:#ff2d2d;
  --auth-err-bg:#000000;--auth-err-fg:#ff2d2d;--del-hover-bg:rgba(255,45,45,.25);
  --status-progress-border:#ffd400;--status-progress-bg:#000;--status-progress-fg:#ffd400;
  --status-progress-select-border:#ffd400;--status-progress-select-bg:#1a1a1a;
  --status-blocked-border:#ff2d2d;--status-blocked-bg:#000;--status-blocked-fg:#ff2d2d;
  --status-blocked-select-border:#ff2d2d;--status-blocked-select-bg:#1a1a1a;
  --status-complete-border:#00d48a;--status-complete-bg:#000;--status-complete-fg:#00d48a;
  --status-complete-select-border:#00d48a;--status-complete-select-bg:#1a1a1a;
  --status-waiting-border:#ffa800;--status-waiting-bg:#000;--status-waiting-fg:#ffa800;
  --status-waiting-select-border:#ffa800;--status-waiting-select-bg:#1a1a1a;
  --status-void-bg:#0a0a0a;--status-progress-alt-bg:#0a0a0a;
  --type-rfi-bg:#000;--type-rfi-fg:#ffd400;
  --type-change-bg:#000;--type-change-fg:#ffa800;
  --type-selection-bg:#000;--type-selection-fg:#c78bff;
  --type-inspection-bg:#000;--type-inspection-fg:#00d48a;
  --type-blocker-bg:#000;--type-blocker-fg:#ff2d2d;
  --type-itb-bg:#000;--type-itb-fg:#00d4c8;
  --badge-neutral-bg:#1a1a1a;--badge-neutral-fg:#fff;
  --badge-soft-bg:#0a0a0a;--badge-soft-fg:#d0d0d0;
  --sidebar-btn-bg:rgba(255,212,0,.14);--sidebar-btn-hover:rgba(255,212,0,.28);
  --sidebar-danger-bg:#000;--sidebar-danger-fg:#ff2d2d;
  --sidebar-danger-hover-bg:#ff2d2d;--sidebar-danger-hover-fg:#fff;
  --ctx-menu-shadow:rgba(255,212,0,.35);--ctx-menu-hover:#1a1a1a;--ctx-sep:#ffd400;--ctx-danger-hover:rgba(255,45,45,.25);
  --note-border:#ffd400;--note-group-border:#ffd400;--note-edit-border:#ffd400;
  --note-save-bg:#ffd633;--note-save-hover:#ffe066;
  --icon-dim:#d0d0d0;--icon-dim-strong:#fff;
  --detail-group-bg:rgba(255,212,0,.06);
  --on-timeline-dot:#000;
  --claim-hover-bg:#000;--claim-hover-fg:#00d48a;
  --shadow-card:0 0 0 2px #ffe600;
  --shadow-card-hover:0 0 0 2px #ffe600,0 4px 16px rgba(255,230,0,.25);
  --shadow-card-drag:0 0 0 2px #ffe600,0 8px 24px rgba(255,230,0,.4);
  --shadow-modal:0 0 0 2px #ffe600;
  --shadow-menu:0 0 0 2px #ffe600;
  --shadow-auth:0 0 0 2px #ffe600;
  --shadow-list:0 0 0 2px #ffe600;
  --radius-card:14px;--radius-modal:18px;--radius-auth:18px;
  --radius-input:10px;--radius-btn:10px;--radius-btn-sm:8px;
  --radius-pill:999px;--radius-menu:14px;--radius-group:12px;--radius-tag:8px;
  --overlay-bg-light:rgba(0,0,0,.65);--overlay-bg-heavy:rgba(0,0,0,.92);
  --cal-overdue-bg:#000;--cal-overdue-fg:#ff2d2d;--cal-overdue-dot:#ff2d2d;
  --cal-due-bg:#000;--cal-due-fg:#ffa800;--cal-due-dot:#ffa800;
  --cal-upcoming-bg:#000;--cal-upcoming-fg:#ffd400;--cal-upcoming-dot:#ffd400;
  --hs-green-bg:#000;--hs-green-fg:#00d48a;
  --hs-amber-bg:#000;--hs-amber-fg:#ffa800;
  --hs-red-bg:#000;--hs-red-fg:#ff2d2d;
  --meta-date-fg:#d0d0d0;--auth-sub-fg:#d0d0d0;
  --co-approved-fg:#00d48a;--co-pending-fg:#ffa800;
  --co-amount-pos:#00d48a;--co-amount-neg:#ff2d2d;
  --frozen-warn-bg:#000;--frozen-warn-fg:#ffa800;
  --inv-paid-bg:#000;--inv-paid-fg:#00d48a;
  --inv-sent-bg:#000;--inv-sent-fg:#ffd400;
  --inv-pending-bg:#000;--inv-pending-fg:#ffa800;
  --inv-partial-bg:#000;--inv-partial-fg:#22d3ee;
  --cd-sub-bg:#000;--cd-sub-fg:#ffd400;
  --cd-vendor-bg:#000;--cd-vendor-fg:#ffa800;
  --cd-gc-bg:#000;--cd-gc-fg:#00d48a;
  --cd-client-bg:#000;--cd-client-fg:#c08bff;
  --rp-bidding-bg:#000;--rp-bidding-fg:#ffd400;
  --rp-inprog-bg:#000;--rp-inprog-fg:#00d48a;
  --rp-complete-bg:#000;--rp-complete-fg:#c78bff;
  --rp-invoicing-bg:#000;--rp-invoicing-fg:#ffa800;
  --rp-closed-bg:#1a1a1a;--rp-closed-fg:#d0d0d0;
  --variance-pos:#00d48a;--variance-neg:#ff2d2d;
  --accent-tint:rgba(255,212,0,.22);--accent-tint-strong:rgba(255,212,0,.34);--accent-ring:rgba(255,212,0,.32);
  --archived-tag-bg:#1a1a1a;--archived-tag-fg:#ffa800;
  --archived-badge-bg:#1a1a1a;--archived-badge-fg:#ffa800;
  --cal-overdue-dot:#ff2d2d;
  --type-fi-bg:#0a1a2a;--type-fi-fg:#7ec8ff;
  --type-co-bg:#1a1a1a;--type-co-fg:#ffa800;
  --type-rfi-fg:#d6a3ff;
  /* H7: semantic status accents tuned to this theme's palette */
  --ok:#00d48a;--warn:#ffa800;--err:#ff2d2d;
  /* H15: row tint --*-bg/-fg overrides — black bg + saturated accent fg, matching --status-* convention */
  --ok-bg:#000;--ok-fg:#00d48a;
  --warn-bg:#000;--warn-fg:#ffa800;
  --err-bg:#000;--err-fg:#ff2d2d;
  --bg-elevated:var(--card-bg);--fg:var(--text-primary);
}
[data-theme="apple"]{
  /* V39f: --app-accent darkened from #007aff (4.02 contrast on white, fails AA)
     to #0066d6 (5.16 contrast, passes AA). Maintains Apple-blue identity.
     iOS uses #007aff for chrome but darker variants for body-text links. */
  --app-bg:#f2f2f7;--app-fg:#1c1c1e;--app-text:#1c1c1e;--app-accent:#0066d6;--app-danger:#d70015;--accent:var(--app-accent);
  --surface:#f2f2f7;--surface-2:#e5e5ea;--surface-3:#d1d1d6;--card-bg:#ffffff;--overlay-bg:rgba(0,0,0,.4);
  --text-primary:#1c1c1e;--text-secondary:#5a5a5e;--text-muted:#8e8e93;--on-accent:#ffffff;--on-app-bg:#1c1c1e;--bg:#e5e5ea;
  --border:#c6c6c8;--border-strong:#aeaeb2;--focus:rgba(0,102,214,.4);--link:#0066d6;
  --header-pill-bg:rgba(118,118,128,.08);--header-pill-border:rgba(60,60,67,.10);
  /* Apple-system toolbar: translucent white with blur (set on .header in CSS) */
  --header-shade:rgba(255,255,255,.78);--header-shade-2:rgba(118,118,128,.12);--header-shade-3:rgba(118,118,128,.18);
  --chrome-bg:rgba(118,118,128,.12);--chrome-bg-hover:rgba(118,118,128,.18);
  --chrome-bg-strong:#ffffff;--chrome-bg-strong-hover:rgba(255,255,255,.85);
  --chrome-border:rgba(60,60,67,.10);--chrome-border-strong:var(--chrome-border);
  --on-chrome:#1c1c1e;--on-chrome-muted:#6e6e73;--on-chrome-dim:#8e8e93;
  --chrome-arrow:#8e8e93;--chrome-scroll:rgba(28,28,30,.25);
  --hover-overlay:rgba(118,118,128,.08);--hover-overlay-strong:rgba(118,118,128,.14);
  --modal-bg:#f2f2f7;--tab-active:#007aff;
  /* Board column: tinted grey (Shade B, locked 2026-05-11) with white cards on top */
  --col-bg:#ececef;--col-bg-drag:rgba(0,122,255,.10);--col-outline-drag:rgba(0,122,255,.5);
  --col-count-bg:rgba(0,0,0,.12);--col-menu-hover:rgba(0,0,0,.06);
  --col-add-bg:rgba(0,0,0,.06);--col-add-hover:rgba(0,0,0,.10);--col-add-border:rgba(0,0,0,.12);
  --col-scroll:rgba(0,0,0,.2);--col-active-bg:rgba(0,122,255,.1);--col-active-outline:rgba(0,122,255,.4);
  --list-empty:rgba(0,0,0,.35);
  --cta-bg:#dbeaff;--cta-bg-hover:#c5dcff;--cta-fg:#007aff;--link-hover:#005ec4;
  --priority-critical-bg:#ff3b30;--priority-critical-fg:#fff;
  --priority-high-bg:#ff9500;--priority-high-fg:#fff;
  --priority-medium-bg:#ffcc00;--priority-medium-fg:#1c1c1e;
  --priority-low-bg:#34c759;--priority-low-fg:#fff;
  --risk-low-bg:#d1f2dd;--risk-low-fg:#1a5c2a;
  --risk-medium-bg:#fff5cc;--risk-medium-fg:#7a4d00;
  --risk-high-bg:#ffece9;--risk-high-fg:#c00;
  --blocker-bg:#ffece9;--blocker-fg:#c00;--blocker-border:#ff3b30;
  --field-hint:#8e8e93;
  --clear-bg:rgba(255,59,48,.2);--clear-bg-hover:rgba(255,59,48,.35);--clear-border:rgba(255,59,48,.4);
  --auth-err-bg:#ffece9;--auth-err-fg:#c00;--del-hover-bg:#ffece9;
  --status-progress-border:#007aff;--status-progress-bg:#f0f6ff;--status-progress-fg:#007aff;
  --status-progress-select-border:#4da3ff;--status-progress-select-bg:#dbeaff;
  --status-blocked-border:#ff3b30;--status-blocked-bg:#ffece9;--status-blocked-fg:#c00;
  --status-blocked-select-border:#ff6b62;--status-blocked-select-bg:#ffece9;
  --status-complete-border:#34c759;--status-complete-bg:#f0faf3;--status-complete-fg:#1a5c2a;
  --status-complete-select-border:#5dd87c;--status-complete-select-bg:#d1f2dd;
  --status-waiting-border:#ff9500;--status-waiting-bg:#fff8ec;--status-waiting-fg:#7a4d00;
  --status-waiting-select-border:#ffb340;--status-waiting-select-bg:#fff0cc;
  --status-void-bg:#f2f2f7;--status-progress-alt-bg:#f0f6ff;
  --type-rfi-bg:#dbeaff;--type-rfi-fg:#007aff;
  --type-change-bg:#fff5cc;--type-change-fg:#7a4d00;
  --type-selection-bg:#ede8ff;--type-selection-fg:#4a2d9c;
  --type-inspection-bg:#d1f2dd;--type-inspection-fg:#1a5c2a;
  --type-blocker-bg:#ffece9;--type-blocker-fg:#c00;
  --type-itb-bg:#d4f5f0;--type-itb-fg:#005a52;
  --badge-neutral-bg:#e5e5ea;--badge-neutral-fg:#3c3c43;
  --badge-soft-bg:#f2f2f7;--badge-soft-fg:#3c3c43;
  --sidebar-btn-bg:rgba(0,0,0,.06);--sidebar-btn-hover:rgba(0,0,0,.10);
  --sidebar-danger-bg:#ffece9;--sidebar-danger-fg:#c00;
  --sidebar-danger-hover-bg:#ff3b30;--sidebar-danger-hover-fg:#fff;
  --ctx-menu-hover:#f2f2f7;--ctx-sep:#e5e5ea;--ctx-danger-hover:#ffece9;
  --note-border:#e5e5ea;--note-group-border:#c6c6c8;--note-edit-border:#007aff;
  --note-save-bg:#007aff;--note-save-hover:#005ec4;
  --icon-dim:#c6c6c8;--icon-dim-strong:#8e8e93;
  --detail-group-bg:rgba(255,255,255,.7);
  --on-timeline-dot:#fff;
  --claim-hover-bg:#d1f2dd;--claim-hover-fg:#1a5c2a;
  /* H7: complete the iOS system color set (--ok already set; add --warn/--err)
     V39f: --err darkened #ff3b30 → #d70015 for AA contrast on white (3.55 → 5.5).
     --ok and --warn kept at iOS-vibrant values since they're used mostly as
     dots/chips/icons rather than body text. */
  --ok:#34c759;--warn:#ff9500;--err:#d70015;
  --shadow-card:0 1px 2px rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.10),0 0 0 0.5px rgba(0,0,0,.05);
  --shadow-card-hover:0 2px 4px rgba(0,0,0,.08),0 10px 28px rgba(0,0,0,.16),0 0 0 0.5px rgba(0,0,0,.06);
  --shadow-card-drag:0 16px 40px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.08);
  --shadow-modal:0 20px 60px rgba(0,0,0,.3),0 0 0 1px rgba(0,0,0,.08);
  --shadow-menu:0 8px 30px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.06);
  --shadow-auth:0 24px 60px rgba(0,0,0,.35);
  --shadow-list:0 4px 16px rgba(0,0,0,.12);
  --radius-card:14px;--radius-modal:18px;--radius-auth:18px;
  --radius-input:10px;--radius-btn:10px;--radius-btn-sm:8px;
  --radius-pill:999px;--radius-menu:14px;--radius-group:12px;--radius-tag:8px;
  /* Aliases for contacts directory */
  --muted:var(--text-muted);--primary:var(--app-accent);--card:var(--card-bg);--text:var(--text-primary);
  --overlay-bg-light:rgba(0,0,0,.40);--overlay-bg-heavy:rgba(0,0,0,.80);
  --cal-overdue-bg:#ffece9;--cal-overdue-fg:#c00;--cal-overdue-dot:#ff3b30;
  --cal-due-bg:#fff8ec;--cal-due-fg:#7a4d00;--cal-due-dot:#ff9500;
  --cal-upcoming-bg:#dbeaff;--cal-upcoming-fg:#005ec4;--cal-upcoming-dot:#007aff;
  --hs-green-bg:#d1f2dd;--hs-green-fg:#1a5c2a;
  --hs-amber-bg:#fff0cc;--hs-amber-fg:#7a4d00;
  --hs-red-bg:#ffece9;--hs-red-fg:#c00;
  --meta-date-fg:#8e8e93;--auth-sub-fg:#8e8e93;
  --co-approved-fg:#1a5c2a;--co-pending-fg:#7a4d00;
  --co-amount-pos:#1a5c2a;--co-amount-neg:#c00;
  --frozen-warn-bg:#fff5cc;--frozen-warn-fg:#7a4d00;
  --inv-paid-bg:#d1f2dd;--inv-paid-fg:#1a5c2a;
  --inv-sent-bg:#dbeaff;--inv-sent-fg:#005ec4;
  --inv-pending-bg:#fff5cc;--inv-pending-fg:#7a4d00;
  --inv-partial-bg:#d6f1f7;--inv-partial-fg:#0b6273;
  --cd-sub-bg:#dbeaff;--cd-sub-fg:#005ec4;
  --cd-vendor-bg:#fff5cc;--cd-vendor-fg:#7a4d00;
  --cd-gc-bg:#d1f2dd;--cd-gc-fg:#1a5c2a;
  --cd-client-bg:#ece6fb;--cd-client-fg:#5b2db8;
  --rp-bidding-bg:#dbeaff;--rp-bidding-fg:#005ec4;
  --rp-inprog-bg:#d1f2dd;--rp-inprog-fg:#1a5c2a;
  --rp-complete-bg:#ede8ff;--rp-complete-fg:#4a2d9c;
  --rp-invoicing-bg:#fff5cc;--rp-invoicing-fg:#7a4d00;
  --rp-closed-bg:#f2f2f7;--rp-closed-fg:#3c3c43;
  --variance-pos:#1a5c2a;--variance-neg:#c00;
  --accent-tint:rgba(0,122,255,.14);--accent-tint-strong:rgba(0,122,255,.22);--accent-ring:rgba(0,122,255,.18);
  --archived-tag-bg:#fff4e0;--archived-tag-fg:#a04500;
  --archived-badge-bg:#fff4e0;--archived-badge-fg:#a04500;
  --cal-overdue-dot:#ff3b30;
  --type-fi-bg:#dbeaff;--type-fi-fg:#005ec4;
  --type-co-bg:#fff4e0;--type-co-fg:#a04500;
  --type-rfi-fg:#5e5ce6;
  --bg-elevated:var(--card-bg);--fg:var(--text-primary);
}
*{box-sizing:border-box;margin:0;padding:0}
html{height:100%;overflow:hidden;overscroll-behavior:none}
body{font-family:"SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;background:var(--app-bg);height:100%;width:100%;max-width:100%;overflow:hidden;overscroll-behavior:none;color:var(--app-text);display:flex;flex-direction:column;transition:background var(--motion-slow) var(--ease-out);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
/* 2026-07-04 — GLOBAL form-control font inheritance. Browsers render <button>/<input>/<select>/
   <textarea> in their own default (Arial-ish), NOT the body font, unless told to inherit. Without this
   ~360 buttons + 42 inputs across the app fell back to Arial (visible in the project banner chips + the
   overview vitals). One rule fixes the whole class; per-component font-family:inherit becomes redundant. */
button,input,select,textarea,optgroup{font-family:inherit}
/* 2026-05-31 📘 — every view-wrap is a flex child of body; a wide kanban board /
   projects table would stretch body past the viewport (default flex min-width:auto)
   → header/logo/user-pill sheared off on iPad. min-width:0 lets each wrap shrink to
   the viewport so its OWN overflow-x scroll contains the wide content. */
.board-wrap,.list-wrap,.contacts-wrap,.activity-wrap,.dashboard-wrap,.chat-wrap,.photos-page,.admin-wrap{min-width:0;max-width:100%}

/* V39aa — global smooth scroll + keyboard-focus scroll-margin for header offset.
   prefers-reduced-motion = no smooth (respects user accessibility setting). */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
/* When user keyboards through focusable elements, ensure the element scrolls
   below the sticky header (~48px) so it's not hidden. */
:focus-visible { scroll-margin-top: calc(var(--header-h, 48px) + 16px); }

/* V39aa — global image rendering. Apple-style: max-width:100% to prevent
   horizontal overflow; image-rendering hint for sharper downscaling of icons. */
img { max-width: 100%; height: auto; }
img, svg { -webkit-user-select: none; user-select: none; }

/* V39gg — print stylesheet. Russell Tracker users print project cards,
   reports, and shop drawings. Hide UI chrome, expand sticky elements to
   static, force light-theme colors regardless of selected theme. */
@media print {
  body { background: #fff !important; color: #000 !important; height: auto !important; overflow: visible !important; }
  .header, .mobile-tabbar, .ai-launcher, #qnGlobalLauncher,
  .modal-close, .gm-close, .pm-close, .profile-modal-close, .modal-overlay {
    display: none !important;
  }
  .card, .modal, .dash-card, .list-table-wrap {
    box-shadow: none !important;
    border: 0.5px solid #ccc !important;
    page-break-inside: avoid;
  }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* V39k — global thin Apple-style scrollbar fallback for browsers/platforms
   where the OS scrollbar is heavy (Windows Chrome, Linux). Mac auto-fading
   scrollbars are unaffected by these rules (OS rendering takes precedence). */
/* pass-3 (2026-06-07): thin FLOATING OVERLAY scrollbars app-wide. The native/OS scrollbar is hidden
   (Firefox `scrollbar-width:none`); a custom 6px webkit thumb floats over the content reserving NO
   gutter — so it can never look "gigantic". Faint at rest, darkens on hover. */
* { scrollbar-width: none; }                 /* Firefox: hide native (we draw our own on webkit) */
*::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-primary) 16%, transparent); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text-primary) 30%, transparent); }
*::-webkit-scrollbar-corner { background: transparent; }

/* 2026-05-15 cont. 16 — Theme safety: card-bg surfaces must use --text-primary,
   not inherited --app-text. rr-brand had white --app-text + white --card-bg,
   which made content invisible on cards that didn't override color (caught by
   the 6-theme smoke pass). Hits all reusable card containers. */
.cd-table-wrap,.rpt-section,.cal-grid-wrap,.gantt-wrap,#todoView .td-main,.admin-role-presets-list,.dash-card,.dash-stat{color:var(--text-primary)}

/* Auth */
/* V39jjjjj — auth overlay backdrop blur (was sharp Board chrome bleeding through) */
.auth-overlay{position:fixed;inset:0;background:var(--overlay-bg);display:flex;align-items:center;justify-content:center;z-index:var(--z-top);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);animation:rtAuthIn var(--motion-base,.22s) var(--ease-out,ease)}
@keyframes rtAuthIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.auth-overlay{animation:none}}
/* V39ooooo — auth-card hairline border so it separates from dark theme bg.
   Uses chrome-border-strong (45% on dark) for better visibility — V39ppppp catch. */
.auth-card{background:var(--card-bg);color:var(--text-primary);border-radius:var(--radius-auth);padding:28px 28px 22px;width:340px;box-shadow:var(--shadow-auth);border:0.5px solid var(--chrome-border-strong);font-family:inherit}
/* V39eeeeee — auth-card h2 was overridden by inline font-size:22px in
   every JS-rendered form. Made the class match the inline value so the
   inline can be dropped. Apple HIG sheet-title size. */
.auth-card h2{font-size:22px;font-weight:600;letter-spacing:-.3px;margin:0 0 6px 0}
/* V39eeeeee — auth-card subtitle was inline-styled font-size:13px + color
   var(--auth-sub-fg) + margin:0 0 16px in every form. Class now matches. */
.auth-card p.auth-sub{font-size:13px;color:var(--auth-sub-fg);margin:0 0 16px 0}
.auth-card label{display:block;font-size:11px;font-weight:600;color:var(--text-primary);margin:8px 0 3px;text-transform:uppercase;letter-spacing:.4px}
/* V39lllll/qqqqq — auth inputs use surface-2 (slight tint) so they're visibly
   distinct from the white card. On midnight where surface=card-bg, fall back
   to surface-3 (the slightly-brighter tier) for visible contrast. */
.auth-card input{width:100%;height:36px;padding:0 12px;border:0.5px solid var(--border);border-radius:var(--radius-input);font-size:14px;outline:none;font-family:inherit;background:var(--surface-2);color:var(--text-primary);transition:border-color var(--motion-fast),box-shadow var(--motion-fast),background var(--motion-fast)}
.auth-card input:hover{background:var(--surface-3)}
.auth-card input:focus{background:var(--surface-3);border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 18%, transparent)}
/* V39mmmmm — forgot-password row: proper top-spacing + hover color */
.auth-forgot-row{margin:8px 0 14px;text-align:right;font-size:12px}
.auth-forgot-link{color:var(--auth-sub-fg);text-decoration:none;transition:color var(--motion-fast)}
.auth-forgot-link:hover{color:var(--app-accent)}
/* V39ooooo — auth-switch-row "Don't have an account? Request access" */
.auth-switch-row{margin:14px 0 0;text-align:center;font-size:12.5px;color:var(--auth-sub-fg)}
.auth-switch-link{color:var(--app-accent);text-decoration:none;font-weight:600;transition:opacity var(--motion-fast)}
.auth-switch-link:hover{opacity:.8}
.auth-actions{display:flex;gap:8px;margin-top:14px}
/* V39n — auth buttons match .btn-primary polish (active scale, opacity hover) */
.auth-actions button{flex:1;height:36px;border:none;border-radius:var(--radius-btn);font-size:13.5px;font-weight:600;letter-spacing:-.1px;cursor:pointer;transition:background var(--motion-fast),transform var(--motion-fast),opacity var(--motion-fast)}
.auth-actions button:hover{opacity:.88}
.auth-actions button:active{transform:scale(.97);opacity:1}
.auth-primary{background:var(--app-accent);color:var(--on-accent);box-shadow:inset 0 0 0 0.5px rgba(255,255,255,.16)}
.auth-secondary{background:var(--surface-2);color:var(--text-primary)}
.auth-toggle{margin-top:10px;font-size:12px;text-align:center;color:var(--text-muted)}
.auth-toggle a{color:var(--link);cursor:pointer;font-weight:600}
.auth-error{background:var(--auth-err-bg);color:var(--auth-err-fg);border-radius:var(--radius-tag);padding:6px 8px;font-size:12px;margin-top:10px;display:none}
.auth-error.show{display:block}
/* V39rrrrr — Apple HIG 44pt minimum tap target on mobile (inputs + primary actions).
   Desktop keeps the tighter 36px feel; mobile gets thumb-friendly heights. */
@media (max-width: 640px){
  .auth-card{width:auto;max-width:360px;padding:24px 22px 20px}
  .auth-card input{height:44px;font-size:16px}
  .auth-actions button{height:44px;font-size:15px}
  .auth-forgot-row{font-size:13px;margin:10px 0 16px}
  .auth-switch-row{font-size:13.5px;margin-top:16px}
}
/* V39jj — user-pill: hairline border + Apple press feedback */
/* V-nav1 — user pill RAISED to match the adjacent .notif-bell circles (was a flat header-pill).
   Same lit gradient fill + raised inset/drop shadow stack so the trailing cluster reads uniform. */
/* V-nav2 — raised user pill. On a WIDE pill the old notif-bell radial put a bright #fff hotspot
   at the corner (great on a tiny circle, but on the 143px pill it clashed with the text → low
   contrast on dark). Now a gentle TOP-DOWN sheen (linear, subtle) over the surface so the fill is
   uniform + text stays legible; raised inset/drop shadow keeps the lift. Theme-adaptive. */
.user-pill{display:flex;align-items:center;gap:8px;height:32px;border:0.5px solid var(--header-pill-border);border-radius:var(--radius-pill);padding:0 11px 0 4px;color:var(--text-primary);font-size:12.5px;font-weight:600;cursor:pointer;max-width:200px;min-width:0;flex-shrink:0;line-height:1;
  background:linear-gradient(180deg,color-mix(in srgb,#fff 10%,var(--surface)),var(--surface));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 .5px color-mix(in srgb,var(--on-chrome) 8%,transparent),0 1px 2px rgba(16,24,40,.16),0 4px 9px -3px rgba(16,24,40,.26);
  transition:background var(--motion-fast),transform var(--motion-fast),box-shadow var(--motion-fast),color var(--motion-fast)}
.user-pill #userPillName{color:var(--text-primary)}
/* Bayfront — keep the sheen faint so the dark pill stays uniform + the light name stays readable */
[data-theme="midnight"] .user-pill{background:linear-gradient(180deg,color-mix(in srgb,#fff 6%,var(--surface)),color-mix(in srgb,#000 6%,var(--surface)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 0 .5px rgba(255,255,255,.05),0 2px 6px rgba(0,0,0,.5),0 0 0 .5px rgba(0,0,0,.4)}
.user-pill:hover{color:var(--app-accent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--app-accent) 10%,var(--surface)),var(--surface));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 .5px color-mix(in srgb,var(--app-accent) 18%,transparent),0 1px 3px rgba(16,24,40,.2),0 6px 13px -3px color-mix(in srgb,var(--app-accent) 32%,transparent)}
[data-theme="midnight"] .user-pill:hover{background:linear-gradient(180deg,color-mix(in srgb,var(--app-accent) 14%,var(--surface)),color-mix(in srgb,#000 6%,var(--surface)))}
.user-pill:active{transform:scale(.97)}
.user-pill #userPillName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:140px;display:inline-block;line-height:1.2}
/* V-navmode2 — thin, clean, fully-rounded search pill. */
.header-search-wrap{position:relative;display:flex;align-items:center;gap:8px;flex:0 1 290px;width:auto;min-width:230px;max-width:320px;background:color-mix(in srgb,var(--on-chrome) 4%,transparent);border:0.5px solid color-mix(in srgb,var(--on-chrome) 9%,transparent);border-radius:var(--radius-pill);padding:0 7px 0 12px;height:30px;margin:0 8px;transition:background var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast)}
/* 2026-05-22 📘 Soft accent glow on focus (the intended affordance). Suppress
   the global hard :focus-visible outline on the wrap + input so we don't get a
   doubled blue rectangle around the whole search field. */
.header-search-wrap:focus-within{background:var(--card-bg);border-color:color-mix(in srgb,var(--app-accent) 45%,var(--header-pill-border));box-shadow:none}
.header-search-wrap:focus-within,.header-search-wrap:focus-visible,.header-search-input:focus,.header-search-input:focus-visible{outline:none!important;box-shadow:none!important}
/* V39sssss — header search: theme-aware colors. Was #999/#1a1a1a/#999, which
   broke contrast on dark themes (black text on dark surface = invisible). */
.header-search-icon{width:13px;height:13px;color:var(--text-muted);flex-shrink:0}
.header-search-input{flex:1;background:transparent;border:none;outline:none;font-size:13px;color:var(--text-primary);font-family:inherit;letter-spacing:-.05px;min-width:0;-webkit-appearance:none;appearance:none}
.header-search-input::placeholder{color:var(--text-muted)}
/* V-navmode — search keyboard hint chip; fades out while typing/focused */
.header-search-kbd{flex:0 0 auto;font-size:10.5px;font-weight:700;color:var(--text-muted);background:color-mix(in srgb,var(--on-chrome) 8%,transparent);border:none;border-radius:50%;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;line-height:1;transition:opacity var(--motion-fast)}
.header-search-wrap:focus-within .header-search-kbd{opacity:0}
/* Search dropdown — frosted card, fixed-positioned so it escapes the narrow
   header-search-wrap on desktop/iPad. JS positions it after the wrap's rect. */
/* V-navmode3 — search-results panel: clean frosted Atira box (radius-16), no blue tint, soft shadow. */
/* V-search2 — search dropdown now uses real LIQUID GLASS (matches the AI/attention/chat popout).
   Was background:var(--card-bg)!important (fully opaque → flat white panel; the backdrop-filter
   did nothing under a solid fill). Now a translucent glass body + saturated refraction blur +
   the specular edge, so it reads as glass over the board. Theme-adaptive via --lg-bg-strong. */
.header-search-results.rt-glass-pop{position:fixed;border-radius:var(--atira-pop-radius)!important;max-height:min(72vh,540px);overflow-y:auto;z-index:var(--z-modal-backdrop);padding:7px;min-width:380px;max-width:460px;
  background:var(--lg-bg-strong)!important;border:0.5px solid color-mix(in srgb,var(--app-accent) 6%,var(--chrome-border));
  box-shadow:var(--lg-edge-strong),0 28px 70px -12px rgba(0,0,0,.34),0 6px 18px rgba(0,0,0,.12);
  backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract)}
@media (prefers-reduced-transparency:reduce){.header-search-results.rt-glass-pop{background:var(--surface)!important;backdrop-filter:none;-webkit-backdrop-filter:none}}
.hsr-section{padding:6px 0}
.hsr-section + .hsr-section{border-top:0.5px solid var(--chrome-border)}
/* V-navmode3 — branded search section header (Space Mono + hue dot + count) + glyph-tile rows */
.hsr-section-head{font-family:var(--font-mono);font-size:9.5px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.16em;padding:9px 12px 5px;display:flex;align-items:center;gap:7px}
.hsr-section-head .hsr-sec-count{margin-left:auto;opacity:.7}
.hsr-item{display:flex;align-items:center;gap:11px;padding:7px 10px;margin:0 4px;border-radius:10px;cursor:pointer;text-align:left;width:calc(100% - 8px);border:none;background:transparent;font-family:inherit;transition:background var(--motion-fast) var(--ease-out)}
.hsr-tile{width:28px;height:28px}
.hsr-item-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.hsr-item:hover,.hsr-item.hsr-active{background:color-mix(in srgb,var(--on-app-bg,var(--text-primary)) 7%,transparent)}
.hsr-item-title{font-size:13px;font-weight:500;color:var(--text-primary);letter-spacing:-.05px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.hsr-item-sub{font-size:11.5px;color:var(--text-muted);margin-top:2px;letter-spacing:-.05px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.hsr-empty{padding:16px 20px 12px;color:var(--text-muted);font-size:13px;line-height:1.6;text-align:center}
.hsr-empty-tip{font-size:11.5px;color:var(--text-dim,var(--text-muted));margin-top:4px;opacity:.7}
/* V-navmode3 — branded search empty state: orb + title + searchable-category hue chips */
.hsr-empty-brand{padding:26px 20px 22px;display:flex;flex-direction:column;align-items:center;gap:0}
.hsr-empty-brand .hse-orb{width:46px;height:46px;margin-bottom:13px}
.hsr-empty-brand .hse-orb svg{width:46px;height:46px;overflow:visible;filter:drop-shadow(0 2px 8px color-mix(in srgb,var(--app-accent) 30%,transparent))}
.hsr-empty-brand .hse-title{font-size:16px;font-weight:750;letter-spacing:-.3px;color:var(--text-primary)}
.hsr-empty-brand .hse-sub{font-size:12.5px;color:var(--text-muted);margin-top:4px;max-width:280px;line-height:1.5}
.hsr-empty-brand .hse-cats{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:16px}
.hsr-empty-brand .hse-cat{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);padding:5px 11px 5px 9px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--ap-hue) 9%,transparent);border:0.5px solid color-mix(in srgb,var(--ap-hue) 22%,transparent)}
.hsr-empty-brand .hse-cat .ap-dot{width:7px;height:7px}
.hsr-item-title mark,.hsr-item-sub mark{background:color-mix(in srgb,var(--app-accent) 22%,transparent);color:var(--app-accent);padding:1px 4px;border-radius:5px;font-weight:600}
/* Enhancement #8 — files full-text "In document" match. Contained rounded pill (fill signal,
   NOT an edge-strip); the snippet sub-line gets 2 clamped lines so the in-doc excerpt reads. */
.hsr-badge-doc{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:9.5px;font-weight:600;letter-spacing:.2px;text-transform:uppercase;vertical-align:middle;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 14%,transparent)}
.hsr-item-content .hsr-item-sub{-webkit-line-clamp:2;font-style:italic;color:var(--text-secondary,var(--text-muted))}
/* Chip strip — single scrolling row, no wrap. iOS-native feel. */
.hsr-toolbar{display:flex;gap:6px;flex-wrap:nowrap;padding:10px 14px 10px;border-bottom:0.5px solid var(--chrome-border);overflow-x:auto;scrollbar-width:none;position:sticky;top:0;z-index:1;background:var(--card-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 20px),transparent 100%);mask-image:linear-gradient(to right,#000 calc(100% - 20px),transparent 100%)}
.hsr-toolbar::-webkit-scrollbar{display:none}
.hsr-chip{height:28px;padding:0 13px;font-size:12.5px;font-weight:500;color:var(--text-muted);border:0.5px solid var(--chrome-border);border-radius:var(--radius-pill);background:var(--chrome-bg);cursor:pointer;font-family:inherit;letter-spacing:-.05px;display:inline-flex;align-items:center;gap:4px;transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast),transform var(--motion-fast);flex-shrink:0;white-space:nowrap}
.hsr-chip.hsr-chip-active{background:var(--app-accent);color:var(--on-accent);border-color:transparent;font-weight:600}
.hsr-chip:hover:not(.hsr-chip-active){background:var(--chrome-bg-hover);border-color:var(--chrome-border-strong)}
.hsr-chip:active{transform:scale(.96)}
.hsr-chip-fuzzy{font-weight:600}
.hsr-chip-spacer{flex:1 1 0;min-width:4px}
.hsr-mini{height:22px;padding:0 8px;font-size:11px;color:var(--text-muted);background:transparent;border:none;cursor:pointer;font-family:inherit;transition:color var(--motion-fast)}
.hsr-mini:hover{color:var(--text-primary)}
.hsr-recent-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 14px;border-left:2px solid transparent;cursor:pointer;font-size:12px;transition:background var(--motion-fast) var(--ease-out),border-left-color var(--motion-fast) var(--ease-out)}
.hsr-recent-row:hover,.hsr-recent-row.hsr-active{background:var(--surface-2);border-left-color:var(--app-accent)}
.hsr-recent-title{flex:1;min-width:0;color:var(--text-primary);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hsr-recent-kind{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px;flex-shrink:0}
.hsr-recent-x{background:transparent;border:none;color:var(--text-muted);cursor:pointer;font-size:13px;padding:0 4px;font-family:inherit;flex-shrink:0;transition:color var(--motion-fast),transform var(--motion-fast)}
.hsr-recent-x:hover{color:var(--app-danger)}
.hsr-recent-x:active{transform:scale(.85)}
@media (max-width: 1024px) {.header-search-wrap{min-width:100px;max-width:100px;width:100px}}
/* 2026-05-22 📘 Mobile search consolidation: the single search bar on phones is
   the GLOBAL search (searches projects/tasks/files/notes/contacts/templates),
   NOT the board-only filter. So on mobile we SHOW the global header search
   full-width and HIDE the legacy project-filter .search-wrap. Both are hidden on
   the project full-page (.pfv) + chat views, where a search bar covers content. */
@media (max-width: 640px) {
  /* 2026-05-22 📘 order:6 puts the mobile global-search on its OWN row BELOW the
     nav row (brand + the 4 trailing actions, order 1–5). Was order:3 with
     flex 100%, which wedged a full-width line-break between Export and the
     (+)/bell/avatar — forcing them to wrap to a third row (the gap bug). */
  .header-search-wrap{display:flex !important;order:6;flex:1 1 100%;width:100%;min-width:0;max-width:none;height:38px;border-radius:var(--radius-sm);margin:0}
  /* On mobile the full-width bar makes the accent border obvious — no glow ring needed */
  .header-search-wrap:focus-within{box-shadow:none!important}
  .header-search-input{font-size:15px}
  .search-wrap{display:none !important}
}

/* ── Tablet (641-1024px) targeted UX wins — 2026-05-16 cont. 3c ──
   The existing @media (max-width:1024px) blocks throughout the file fire on
   BOTH tablet (641-1024px) AND phone (≤640px) because their bounds are
   inclusive of phone. The @media (max-width:640px) blocks then OVERRIDE for
   phone only. That leaves the tablet "sweet spot" (641-1024px) sometimes
   stuck with mobile-flavored CSS that wastes the extra screen real estate.
   This block targets tablet-only (min-width:641px AND max-width:1024px) and
   walks back specific phone-stack rules where the tablet has room. */
@media (min-width: 641px) and (max-width: 1024px) {
  /* Header search — phone hides it, tablet should keep it WIDE not narrow. */
  .header-search-wrap{min-width:280px}
  /* Dashboard — phone forced 1-col, tablet can do 2-col comfortably; the
     base 1024px rule already says 2-col but the left rail is hidden. On
     tablet that's fine — the right rail (mentions, recent comments) gets
     the full second column instead of stacking. Bring it back. */
  .dash-rails{grid-template-columns:minmax(0,1fr) minmax(0,300px)}
  .dash-rail-left{display:block}
  /* Files 2-pane — the 1024px rule collapses to 1-col which forces the
     mobile drill-in flow. On tablet the sidebar fits beside the main pane
     comfortably; restore the 2-col grid. */
  .files-2pane{grid-template-columns:260px 1fr;gap:14px}
  .files-sidebar{position:sticky;max-height:calc(100svh - 140px)}
  /* PFV overview — base 1024px rule forces 2-col + spans wider widgets to
     full width. Tablet has room for 3-col, just slightly tighter gaps. */
  .pfv-ov-grid{grid-template-columns:repeat(3,1fr);gap:10px}
  .pfv-ov-widget[data-w="3"]{grid-column:span 3}
  .pfv-ov-widget[data-w="2"]{grid-column:span 2}
  /* Reports section — tighten section padding so 2-col chart layouts breathe. */
  .rpt-section{padding:14px 16px}
  /* Contacts directory table — tablet has room for the desktop table without
     stacking. The .rrt-stack mobile-card rules fire at ≤640px so this is
     mostly a no-op, but force whitespace breathing in the toolbar. */
  .cd-topbar{gap:12px;flex-wrap:nowrap}
  .cd-tabs{gap:6px}

  /* V30 (2026-05-17 cont. 14): tablet (641-1024px) was inheriting many mobile
     phone rules from the broader (max-width:1024px) block. Walk back the ones
     that no longer make sense at tablet width: top-nav labels, list-view table,
     kanban board horizontal scroll, contacts table. */

  /* V30.1: restore top-nav labels — phone hides text via font-size:0 to fit
     icons in the limited width, but tablet has plenty of horizontal room. */
  .view-btn{font-size:12px !important;min-width:auto;padding:4px 10px}
  .view-btn .vb-label{display:inline}
  /* V30.2: restore desktop list-view table (mobile stacks into cards). */
  .list-table-wrap{background:var(--card-bg);border-radius:var(--radius-lg);box-shadow:var(--bevel-top),var(--shadow-e2);overflow:auto;-webkit-overflow-scrolling:touch}
  .list-table,.list-table thead,.list-table tbody,.list-table tr,.list-table th,.list-table td{display:revert}
  .list-table{background:transparent;border-radius:0;box-shadow:none;width:100%;border-collapse:collapse;font-size:12px}
  .list-table thead{display:table-header-group}
  .list-table tbody{display:table-row-group}
  .list-table tr{display:table-row;background:transparent;border-radius:0;box-shadow:none;padding:0}
  .list-table td{display:table-cell;border:0;border-top:0.5px solid color-mix(in srgb, var(--text-primary) 8%, transparent);max-width:200px;white-space:nowrap;padding:8px 10px;font-size:12px;justify-content:flex-start}
  .list-table td::before{display:none}
  .list-table th{display:table-cell;position:sticky;top:0}
  /* V30.3: restore horizontal kanban scroll on board (mobile stacks columns vertically). */
  .board-wrap{height:calc(100svh - 130px);flex-direction:row;align-items:flex-start;overflow-x:auto;overflow-y:hidden;padding:12px;gap:12px}
  .board-wrap .column{flex:0 0 280px;width:280px;max-width:280px;max-height:calc(100svh - 160px);overflow-y:auto;border-radius:var(--radius-lg)}
  /* V30.4: restore desktop contacts table (mobile stacks each row into a card). */
  .cd-table.rrt-stack thead{position:static;width:auto;height:auto;clip:auto;overflow:visible}
  .cd-table.rrt-stack,
  .cd-table.rrt-stack tbody,
  .cd-table.rrt-stack tfoot,
  .cd-table.rrt-stack tr,
  .cd-table.rrt-stack td{display:revert}
  .cd-table.rrt-stack{display:table;width:100%;border-collapse:collapse}
  .cd-table.rrt-stack thead{display:table-header-group}
  .cd-table.rrt-stack tbody{display:table-row-group}
  .cd-table.rrt-stack tr{display:table-row;background:transparent;box-shadow:none;padding:0;margin:0}
  .cd-table.rrt-stack td{display:table-cell;padding:8px 10px;font-size:12px;border-top:0.5px solid color-mix(in srgb, var(--text-primary) 8%, transparent);white-space:nowrap}
  /* V82.1 — the rrt-stack table-restore covered thead/tr/td but NOT th, so the
     ≤1024 `.cd-table th{display:block}` rule left the header labels stacked
     vertically on tablet. Restore th to a real header cell. */
  .cd-table.rrt-stack thead th{display:table-cell}
  .cd-table.rrt-stack td::before{display:none}
  /* V153 — the table-restore above sets td{display:revert}, which re-shows the
     phone-only data-mobile-only cells (the combined cd-m-id identity cell + the
     cd-m-actrow comms row) as a duplicate avatar/row on tablet. Re-hide them so
     the iPad table matches desktop (real columns only). */
  .cd-table.rrt-stack td[data-mobile-only]{display:none}
}
/* DESKTOP-ONLY: hides the board-filter .search-wrap in the 1024-1500px range so it
   doesn't crowd the non-wrapping desktop header row. .search-wrap is separately
   hidden at <=1024px and re-shown <=640px, so this 1500px rule only governs the
   1024-1500px desktop band — intentionally non-conforming, left as a desktop tweak
   (2026-05-14 mobile overhaul). */
@media (max-width: 1500px) {.search-wrap{display:none}}
@media (max-width: 640px) {.search-wrap{display:flex}}
/* TABLET: the former 821-1180px mid-desktop header rule (.view-toggle / .btn /
   .header-search-wrap nav-strip tweaks) was folded into the <=1024px block
   (2026-05-14 mobile overhaul). The <=1024px tier already restyles those same
   selectors with mobile-appropriate values, so the 821-1180 declarations were
   redundant/superseded and not re-added. Revisit during the dedicated tablet pass. */
/* V-navmode 2026-06-28 — the user-pill avatar reads as a RAISED ORB: a drop-shadow lift + a top
   specular highlight ring, on a gradient sphere for the initials fallback. The lift+ring also frame
   a user-set photo nicely (the photo variant keeps overflow:hidden + the same shadows below). */
.user-pill .user-avatar{width:25px;height:25px;min-width:25px;min-height:25px;flex-shrink:0;border-radius:50%;color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;overflow:hidden;line-height:1;
  background:radial-gradient(circle at 35% 26%,color-mix(in srgb,var(--app-accent) 42%,#fff),var(--app-accent) 86%);
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.55),0 1px 2px rgba(16,24,40,.18),0 2px 6px -1px color-mix(in srgb,var(--app-accent) 45%,transparent);
  transition:box-shadow var(--motion-fast),transform var(--motion-fast)}
.user-pill:hover .user-avatar{box-shadow:inset 0 .5px 0 rgba(255,255,255,.6),0 1px 3px rgba(16,24,40,.22),0 4px 10px -2px color-mix(in srgb,var(--app-accent) 55%,transparent)}
.user-menu{position:absolute;right:14px;top:46px;color:var(--text-primary);border-radius:var(--radius-menu);padding:7px;width:288px;max-width:calc(100vw - 28px);max-height:calc(100vh - 60px);overflow-y:auto;overscroll-behavior:contain;z-index:var(--z-modal-backdrop);display:none;transform-origin:top right;transform:scale(.96) translateY(-6px);opacity:0;transition:transform var(--motion-base) var(--ease-spring),opacity var(--motion-fast)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.user-menu{background:var(--card-bg)}}
@media (prefers-reduced-transparency:reduce){.user-menu{background:var(--card-bg);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media (prefers-reduced-motion:reduce){.user-menu{transition:opacity var(--motion-fast)}}

/* ── AI Chat sidebar ── */
/* 2026-05-17 📘 V10: hardcoded rgba(0,122,255) shadow was always blue
   regardless of theme — looked wrong on the green/dark/brown themes
   where the FAB itself is a different color. Swap to color-mix on
   --app-accent so the halo matches the FAB body color in any theme. */
/* Item 10 (2026-05-25) — Quick Note launcher redone as a LIQUID GLASS button so
   the bottom-corner FAB reads as a light frosted control, not an opaque accent
   blob blocking content behind it. Translucent glass + accent-tinted icon +
   accent rim; backdrop-blur shows the page through it. Solid-frost fallback. */
.ai-launcher{position:fixed;right:calc(18px + env(safe-area-inset-right,0));bottom:calc(18px + env(safe-area-inset-bottom,0));width:48px;height:48px;border-radius:50%;background:color-mix(in srgb, var(--app-accent) 26%, var(--lg-bg-strong));backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract);color:var(--app-accent);border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--shadow-e3),inset 0 0 0 0.5px color-mix(in srgb,var(--app-accent) 40%,rgba(255,255,255,.3)),inset 0 1px 0 rgba(255,255,255,.35);z-index:var(--z-fab);transition:transform var(--motion-base),box-shadow var(--motion-base),background var(--motion-base)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.ai-launcher{background:var(--app-accent);color:var(--on-accent)}}
@media (prefers-reduced-transparency:reduce){.ai-launcher{background:var(--app-accent);color:var(--on-accent);backdrop-filter:none;-webkit-backdrop-filter:none}}
/* 2026-05-26 — QuickNote launcher elevated to hero Liquid Glass (Gavin: "more
   liquid glass"). Adds the four glass traits on top of the base .ai-launcher:
   a brighter specular top edge, a refraction brightness bump, e4 hover bloom,
   and a pointer-tracking sheen (a radial glint driven by --sx/--sy set in JS —
   DESIGN.md reserves the sheen for hero glass, which this is). All on the V82
   tokens; degrades to the solid fallback above under reduced-transparency. */
/* V-navmode 2026-06-28 — the quick-note FAB is now a glossy Atira ORB: a saturated accent sphere
   (radial gradient, light top-left → deep accent) + a bright specular cap + a strong lift. White
   glyph for contrast. Reads as the hero orb of the chrome. */
#qnGlobalLauncher{overflow:hidden;color:#fff;
  background:radial-gradient(circle at 33% 26%,color-mix(in srgb,var(--app-accent) 30%,#fff),var(--app-accent) 62%,color-mix(in srgb,var(--app-accent) 78%,#000) 100%);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.65),inset 0 -3px 6px color-mix(in srgb,var(--app-accent) 60%,#000),inset 0 0 0 .5px color-mix(in srgb,var(--app-accent) 55%,#000),0 2px 5px rgba(16,24,40,.24),0 8px 20px -5px color-mix(in srgb,var(--app-accent) 60%,transparent)}
#qnGlobalLauncher:hover{box-shadow:inset 0 1.5px 0 rgba(255,255,255,.75),inset 0 -3px 6px color-mix(in srgb,var(--app-accent) 65%,#000),inset 0 0 0 .5px color-mix(in srgb,var(--app-accent) 60%,#000),0 3px 7px rgba(16,24,40,.28),0 12px 26px -6px color-mix(in srgb,var(--app-accent) 70%,transparent)}
#qnGlobalLauncher::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--sx,70%) var(--sy,18%), rgba(255,255,255,.5), rgba(255,255,255,0) 60%);opacity:.5;transition:opacity var(--motion-base) var(--ease-out)}
#qnGlobalLauncher:hover{box-shadow:var(--lg-edge),var(--shadow-e4),inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 0.5px color-mix(in srgb,var(--app-accent) 52%,rgba(255,255,255,.35))}
#qnGlobalLauncher:hover::before{opacity:.8}
#qnGlobalLauncher:active{transform:translateY(0) scale(.93)}
#qnGlobalLauncher>svg{position:relative;z-index:1}
@media (prefers-reduced-transparency:reduce){#qnGlobalLauncher::before{display:none}}
/* 2026-05-26 — user-configurable launcher states. Hidden = user disabled it in
   settings (notes still reachable via To-Do section + re-show). Dragging = lifted
   grab state; freeze the position transition so it tracks the pointer 1:1. */
#qnGlobalLauncher.qn-launcher-hidden{display:none!important}
/* Hub owns its bottom corners → suppress the global Quick Notes FAB on the Hub (Notes is a block there). */
body.hub-active #qnGlobalLauncher{display:none!important}
#qnGlobalLauncher.qn-launcher-dragging{cursor:grabbing;transition:box-shadow var(--motion-base) var(--ease-out);box-shadow:var(--lg-edge),var(--shadow-e4),inset 0 1px 0 rgba(255,255,255,.5);transform:scale(1.06)}
#qnGlobalLauncher.qn-launcher-dragging::before{opacity:.85}

/* ── V38 Quick Notes redesign ── Apple-style popout window.
   Continues the site's existing token language: glass blur + 0.5px hairlines
   + SF stack + cubic-bezier(.32,.72,0,1) motion + apple-theme color tokens.
   Anchored bottom-right per Gavin Q1; draggable+resizable; persists position. */
.qn-popout{
  position:fixed;
  bottom:14px;
  right:14px;
  width:480px;
  height:640px;
  /* V83 — flagship floating chrome on the shared Liquid Glass token system
     (matches .ctx-menu / .preset-popover / .kbd-sheet). Hero glass: strong
     surface-derived bg + refraction + specular edge + e4 elevation. Was a
     hand-rolled --header-shade + raw blur + hardcoded shadow stack. */
  background:var(--lg-bg-strong);
  backdrop-filter:var(--lg-refract);
  -webkit-backdrop-filter:var(--lg-refract);
  border:0.5px solid var(--chrome-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--lg-edge), var(--shadow-e4);
  display:none;
  flex-direction:column;
  z-index:var(--z-modal);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  opacity:0;
  transform:translateY(8px) scale(0.98);
  transition:opacity var(--motion-base) cubic-bezier(.32,.72,0,1), transform var(--motion-base) cubic-bezier(.32,.72,0,1);
  overflow:hidden;
}
.qn-popout.open{display:flex;opacity:1;transform:translateY(0) scale(1)}
/* V83 — glass fallbacks (match .ctx-menu / .kbd-sheet): solid surface when the
   OS asks for reduced transparency or the engine lacks backdrop-filter. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.qn-popout{background:var(--surface)}}
@media (prefers-reduced-transparency:reduce){.qn-popout{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.qn-popout-header,.qn-popout-toolbar{background:var(--surface-2)}}
@media (prefers-reduced-transparency:reduce){.qn-popout-header,.qn-popout-toolbar{background:var(--surface-2);backdrop-filter:none;-webkit-backdrop-filter:none}}
.qn-popout-header{
  height:48px;
  padding:0 8px 0 14px;
  display:flex;
  align-items:center;
  gap:8px;
  border-bottom:0.5px solid var(--chrome-border);
  /* V81.6 — frosted chrome bar so the header reads as navigation chrome, not
     part of the white note body (Apple Notes / Mail header treatment).
     V83 — on the shared Liquid Glass refraction token (was a raw blur stack). */
  background:transparent;
  -webkit-backdrop-filter:var(--lg-refract);
  backdrop-filter:var(--lg-refract);
  box-shadow:var(--lg-edge);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  cursor:move;
  user-select:none;
  flex-shrink:0;
}
/* V38b-g2 — Switcher strip is horizontally scrollable. Right-edge fade
   hints at scrollable overflow when chips exceed visible width. Mouse-wheel
   converts vertical scroll to horizontal via JS in _qnWireSwitcherWheel. */
.qn-popout-switcher{
  display:flex;align-items:center;gap:4px;
  flex:1;min-width:0;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;
  /* Mask creates a soft fade on the right edge so users can see there's
     more content to scroll to. Left edge fade appears once scrolled. */
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%);
  padding:0 4px;
}
.qn-popout-switcher::-webkit-scrollbar{display:none}
/* V38b-g3 — Smaller chips per Gavin's ask. Was 26h × 40-140w / 11px;
   now 22h × 30-110w / 10.5px with tighter padding + radius. Keeps pin icon
   + color stripe visible but takes less vertical+horizontal real estate. */
/* V39jjj — qn-switcher-chip: Apple press feedback */
.qn-switcher-chip{
  height:22px;min-width:30px;max-width:110px;
  padding:0 8px;border-radius:var(--radius-md);
  background:var(--chrome-bg);
  border:0.5px solid var(--chrome-border);
  color:var(--text-secondary, var(--text-primary));
  display:inline-flex;align-items:center;gap:3px;
  flex:0 0 auto;cursor:pointer;
  font-family:inherit;font-size:10.5px;font-weight:500;
  transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast);
  white-space:nowrap;line-height:1;
}
.qn-switcher-chip:hover{background:var(--surface-3,var(--chrome-bg));color:var(--text-primary)}
.qn-switcher-chip:active{transform:scale(.96)}
.qn-switcher-chip.active{background:var(--app-accent);color:var(--on-accent);border-color:transparent;font-weight:600}
.qn-switcher-pin{font-size:8px;flex:0 0 auto;line-height:1}
.qn-switcher-label{overflow:hidden;text-overflow:ellipsis;min-width:0}
/* Color-tinted left edge per swatch when the note has a color set */
.qn-switcher-chip[data-color="red"]{box-shadow:inset 3px 0 0 var(--qn-c-red)}
.qn-switcher-chip[data-color="orange"]{box-shadow:inset 3px 0 0 var(--qn-c-orange)}
.qn-switcher-chip[data-color="yellow"]{box-shadow:inset 3px 0 0 var(--qn-c-yellow)}
.qn-switcher-chip[data-color="green"]{box-shadow:inset 3px 0 0 var(--qn-c-green)}
.qn-switcher-chip[data-color="blue"]{box-shadow:inset 3px 0 0 var(--qn-c-blue)}
.qn-switcher-chip[data-color="gray"]{box-shadow:inset 3px 0 0 var(--qn-c-gray)}
.qn-switcher-chip[data-color]{padding-left:10px}
.qn-popout-actions{display:flex;align-items:center;gap:2px;flex:0 0 auto}
/* V81.6 — Switcher is now a single 'Note name ▾' dropdown (Apple Notes title
   menu) instead of a cramped horizontal chip strip. */
.qn-switcher-dropdown{
  display:inline-flex;align-items:center;gap:6px;
  max-width:100%;min-width:0;
  height:32px;padding:0 10px;
  background:transparent;border:none;cursor:pointer;
  font-family:inherit;font-size:15px;font-weight:600;letter-spacing:-.2px;
  color:var(--text-primary);
  border-radius:var(--radius-md);
  transition:background var(--motion-fast);
}
.qn-switcher-dropdown:hover{background:color-mix(in srgb,var(--text-primary) 6%,transparent)}
.qn-switcher-dropdown:active{transform:scale(.98)}
.qn-switcher-dropdown .qn-switcher-dd-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.qn-switcher-dropdown .qn-switcher-dd-caret{flex-shrink:0;width:11px;height:11px;opacity:.5}
.qn-switcher-dropdown[data-color]::before{content:'';width:8px;height:8px;border-radius:50%;flex-shrink:0}
.qn-switcher-dropdown[data-color="red"]::before{background:var(--qn-c-red)}
.qn-switcher-dropdown[data-color="orange"]::before{background:var(--qn-c-orange)}
.qn-switcher-dropdown[data-color="yellow"]::before{background:var(--qn-c-yellow)}
.qn-switcher-dropdown[data-color="green"]::before{background:var(--qn-c-green)}
.qn-switcher-dropdown[data-color="blue"]::before{background:var(--qn-c-blue)}
.qn-switcher-dropdown[data-color="gray"]::before{background:var(--qn-c-gray)}
/* Note-list menu (popover) */
.qn-switcher-menu{
  position:fixed;z-index:var(--z-top);
  min-width:240px;max-width:320px;max-height:60vh;overflow-y:auto;
  background:color-mix(in srgb,var(--card-bg) 96%,transparent);
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  border-radius:var(--radius-lg);
  box-shadow:0 12px 40px rgba(0,0,0,.18),0 0 0 0.5px var(--chrome-border);
  padding:6px;animation:rrtInputModalPop var(--motion-fast) var(--ease-out,ease-out);
}
.qn-switcher-menu-row{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:9px 10px;border:none;background:transparent;cursor:pointer;
  font-family:inherit;font-size:14px;color:var(--text-primary);text-align:left;
  border-radius:var(--radius-md);
}
.qn-switcher-menu-row:hover{background:color-mix(in srgb,var(--text-primary) 6%,transparent)}
.qn-switcher-menu-row.active{background:var(--accent-tint);color:var(--app-accent);font-weight:600}
.qn-switcher-menu-row .qn-sm-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--dot,var(--text-muted))}
.qn-switcher-menu-row .qn-sm-dot-empty{background:transparent}
/* P7 — pinned indicator is the #icon-pin SVG (was a raw 📌 emoji prefix). */
.qn-switcher-pin-ico{width:10px;height:10px;flex:0 0 auto;margin-right:4px;vertical-align:-1px;opacity:.7;color:var(--app-accent)}
.qn-switcher-dd-label .qn-switcher-pin-ico{display:inline-block}
.qn-switcher-menu-row .qn-sm-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* V39fff — qn-popout-action: Apple press feedback */
.qn-popout-action{
  width:32px;height:32px;border-radius:var(--radius-md);
  background:transparent;border:none;cursor:pointer;
  color:var(--text-muted);
  display:inline-flex;align-items:center;justify-content:center;padding:0;
  transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast);
}
.qn-popout-action:hover{background:var(--chrome-bg);color:var(--text-primary)}
.qn-popout-action:active{transform:scale(.92)}
.qn-popout-action svg{width:14px;height:14px}
/* V77.4 — Added min-width:0 + max-width:100% + overflow:hidden so popout-
   mounted editor with long unbreakable runs (URLs, monospace lines) clips
   instead of overflowing the popout window. Same fix as .qn-page-editor. */
.qn-popout-body{flex:1;min-height:0;min-width:0;max-width:100%;overflow:hidden;display:flex;flex-direction:column;background:var(--card-bg)}
.qn-editor-title{
  border:none;outline:none;background:transparent;
  font-family:inherit;font-size:23px;font-weight:700;letter-spacing:-.5px;
  color:var(--text-primary);
  padding:18px 20px 8px 20px;   /* V81.6 — more breathing room below frosted header */
  width:100%;box-sizing:border-box;
}
.qn-editor-title::placeholder{color:var(--text-muted);opacity:.55}
/* V83 — kill the bright full-width accent line under the title. The title is a
   borderless full-width <input>, so the global input:focus-visible rule
   (box-shadow:0 0 0 2.5px --focus-ring-color) rendered as a hard blue bar
   across the editor on focus (worst on mobile, where the title autofocuses).
   Apple Notes title fields carry no focus ring — the caret is the signal. The
   .qn-editor-titlebar-rule hairline below stays as the only separator. */
.qn-editor-title:focus,
.qn-editor-title:focus-visible{outline:none !important;box-shadow:none !important}
/* P3.7 — Gavin: remove the line that appears between the title/text area and tags.
   The hairline rule is hidden; title + tags + body read as one continuous surface. */
.qn-editor-titlebar-rule{display:none}
.qn-editor-body{
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  padding:8px 18px 14px 18px;
  font-family:inherit;font-size:var(--qn-editor-size, 17px);line-height:1.5;letter-spacing:-.05px;
  color:var(--text-primary);
  outline:none;
  /* V38b-f1: preserve legacy notes' \n line breaks (white-space:pre-wrap) +
     break overflowing words / URLs so nothing scrolls horizontally past the
     popout edge. Combined with overflow-x:hidden on the parent this guarantees
     content fits the window regardless of how it was authored. */
  white-space:pre-wrap;
  word-wrap:break-word;
  overflow-wrap:anywhere;
  max-width:100%;
  box-sizing:border-box;
}
.qn-editor-body *{
  /* Belt-and-suspenders: any descendant (b/i/u/code/pre/ul/li/h2/h3) inherits
     the wrap rules so a stray <pre> or long URL doesn't bust the layout.
     V38g: !important needed to defeat inline style="white-space:pre" attrs
     that pasted-from-terminal / pasted-from-Markdown-renderer content often
     carries. The inline style normally wins; !important on the class rule
     overrides it. Also force max-width on every descendant box so nothing can
     grow past the editor's content box.
     V81: the prior rule set overflow-wrap/word-break but NOT white-space, so
     inline style="white-space:pre" (from pasted/legacy content) still won and
     suppressed wrapping entirely — text ran off the right edge with no h-scroll.
     Now force pre-wrap (preserve authored newlines, wrap everything else) and
     normalize the inline monospace font to the proportional Apple system font
     so notes read like Apple Notes. <code>/<pre> opt back into mono below. */
  max-width:100% !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  white-space:pre-wrap !important;
  font-family:inherit !important;
}
/* V81 — Per-note "no-wrap" mode: the whole body scrolls horizontally instead of
   wrapping. Toggled per note from the AA text-size menu (default = wrap). We
   must beat the .qn-editor-body * { white-space:pre-wrap !important } rule, so
   re-assert white-space:pre + overflow-x:auto with matching specificity. The
   parent .qn-page-editor / .qn-popout-body have overflow:hidden, so the scroll
   lives ON the body itself. */
.qn-editor-body.nowrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.qn-editor-body.nowrap, .qn-editor-body.nowrap *{
  white-space:pre !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  max-width:none !important;
}
/* V81 — Wide-block scroll islands (ALWAYS on, both wrap + nowrap modes). Tables
   and <pre> blocks that are genuinely wider than the editor get their own
   horizontal scroll instead of forcing the whole note to wrap awkwardly — the
   Apple Notes table pattern. A subtle right-edge fade hints at more content. */
.qn-editor-body table,
.qn-editor-body pre.qn-scroll-block{
  display:block;
  max-width:100% !important;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  white-space:pre !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
}
.qn-editor-body table{border-collapse:collapse}
.qn-editor-body table td,.qn-editor-body table th{white-space:nowrap !important;padding:4px 10px;border:0.5px solid var(--chrome-border)}
.qn-editor-body pre{
  /* V38g: !important to defeat inline white-space:pre on pasted content.
     pre-wrap = preserve newlines but wrap at spaces; combined with
     overflow-wrap:anywhere from the descendant rule above, long unbreakable
     runs (URLs, tokens) also wrap. overflow-x:hidden prevents the horizontal
     scrollbar that used to appear inside a pre when wrap was overridden.
     V77.3: explicit max-width + box-sizing + display:block to defeat any
     intrinsic content-width sizing that lets the pre grow past its parent. */
  white-space:pre-wrap !important;
  word-wrap:break-word !important;
  word-break:break-word !important;
  overflow-wrap:anywhere !important;
  background:var(--chrome-bg);
  padding:8px 10px;border-radius:var(--radius-sm);
  font-family:"SF Mono","Menlo",ui-monospace,monospace;
  font-size:0.85em;
  overflow-x:hidden !important;
  max-width:100% !important;
  width:100% !important;
  display:block !important;
  box-sizing:border-box !important;
}
/* V77.8 — Mobile content envelope: force the editor body + every descendant
   (including legacy <pre>) to break-all so long monospace lines wrap inside
   the editor pane no matter what. Plus tighten padding so content has room
   to wrap without being eaten by the editor gutter. */
@media (max-width:640px){
  .qn-editor-body{padding:8px 14px 14px 14px}
  .qn-editor-body, .qn-editor-body *{
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
    max-width:100% !important;
    white-space:pre-wrap !important;   /* V81: defeat inline white-space:pre on mobile too */
  }
  .qn-editor-body pre{
    padding:8px 8px !important;
    font-size:13px !important;
  }
  /* Title input is a single-line <input> so it can't wrap. Use ellipsis
     when long titles overflow + tighten padding so more text fits before
     truncation. */
  .qn-editor-title{
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    padding:10px 14px 6px 14px !important;
    font-size:20px !important;
  }
}
.qn-editor-body:empty::before{
  content:attr(data-placeholder);
  color:var(--text-muted);opacity:.55;pointer-events:none;
}
/* P2 — Empty-state hint. When the body is empty, a subtle second line surfaces
   the markdown shortcuts that already work (_qnMaybeMarkdownExpand). Apple-
   subtle: muted, small, pointer-events:none so it never blocks the cursor;
   vanishes the instant the user types (the :empty selector drops). */
.qn-editor-body:empty::after{
  content:"# heading  ·  - list  ·  [ ] checklist";
  display:block;
  margin-top:10px;
  font-size:12px;
  font-family:"SF Mono","Menlo",ui-monospace,monospace;
  color:var(--text-muted);
  opacity:.4;
  letter-spacing:-.1px;
  pointer-events:none;
}
.qn-editor-body h2{font-size:22px;font-weight:600;letter-spacing:-.3px;margin:14px 0 6px}
.qn-editor-body h3{font-size:18px;font-weight:600;letter-spacing:-.2px;margin:12px 0 4px}
.qn-editor-body ul,.qn-editor-body ol{margin:6px 0 6px 22px;padding:0}
.qn-editor-body li{margin:3px 0}
/* P3 — Inserted code block. A <pre class="qn-code-block qn-scroll-block"><code>
   keeps the existing wide-block horizontal scroll + monospace from the .pre
   rules above; this adds the framed material so it reads as a distinct block. */
.qn-editor-body pre.qn-code-block{
  background:var(--surface-2);
  border:0.5px solid var(--chrome-border);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  margin:8px 0;
}
.qn-editor-body pre.qn-code-block code{
  font-family:"SF Mono","Menlo",ui-monospace,monospace;
  font-size:0.85em;background:transparent;padding:0;
}
/* P3 — Divider (/divider → <hr>). Quiet hairline on the editor's matte. */
.qn-editor-body hr{
  border:none;height:0.5px;background:var(--chrome-border);
  margin:14px 0;
}
/* P3 — Table affordances. The table itself is styled by the existing
   .qn-editor-body table rules; this adds a hover-revealed +row / +col pair so a
   user can grow the grid without a heavy editor. Kept Apple-clean: small frosted
   pills that only appear on hover/focus-within. */
.qn-editor-body .qn-table-wrap{position:relative;display:block;margin:8px 0;width:fit-content;max-width:100%}
.qn-table-afford{
  position:absolute;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity var(--motion-fast),transform var(--motion-fast) var(--ease-spring);
  pointer-events:none;
}
.qn-editor-body .qn-table-wrap:hover .qn-table-afford,
.qn-editor-body .qn-table-wrap:focus-within .qn-table-afford{opacity:1;pointer-events:auto}
.qn-table-afford button{
  display:flex;align-items:center;justify-content:center;
  background:var(--frost-bg,var(--card-bg));
  -webkit-backdrop-filter:var(--frost-blur);backdrop-filter:var(--frost-blur);
  border:0.5px solid var(--chrome-border);
  color:var(--text-secondary,var(--text-primary));
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-e1);
  cursor:pointer;padding:0;
  transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring),color var(--motion-fast);
}
.qn-table-afford button:hover{background:color-mix(in srgb,var(--app-accent) 16%,transparent);color:var(--app-accent);transform:scale(1.06)}
.qn-table-afford button:active{transform:scale(.94)}
.qn-table-afford button svg{width:13px;height:13px}
.qn-table-addrow{left:0;right:0;bottom:-13px;height:18px}
.qn-table-addrow button{width:46px;height:16px}
.qn-table-addcol{top:0;bottom:0;right:-13px;width:18px}
.qn-table-addcol button{width:16px;height:46px}
@media (prefers-reduced-transparency:reduce){
  .qn-table-afford button{background:var(--surface,var(--card-bg));backdrop-filter:none;-webkit-backdrop-filter:none}
}
.qn-editor-body code{
  background:var(--chrome-bg);
  border-radius:var(--radius-xs);padding:1px 5px;
  font-family:"SF Mono","Menlo",ui-monospace,monospace;
  font-size:14px;
  /* V38g: defeat inline white-space:pre on pasted ``` content. */
  white-space:pre-wrap !important;
  overflow-wrap:anywhere !important;
}
.qn-editor-body .qn-checklist{list-style:none;padding-left:0;margin-left:0}
.qn-editor-body .qn-checklist li{padding-left:24px;position:relative}
.qn-editor-body .qn-checklist li::before{
  content:'';position:absolute;left:0;top:5px;
  width:16px;height:16px;border:1.5px solid var(--text-muted);border-radius:var(--radius-xs);
  background:var(--card-bg);
}
.qn-editor-body .qn-checklist li[data-checked="1"]{color:var(--text-muted);text-decoration:line-through}
.qn-editor-body .qn-checklist li[data-checked="1"]::before{
  background:var(--app-accent);border-color:var(--app-accent);
}
/* V77.4 — Match the page toolbar's distinct tone so popout + page editor
   are visually consistent. Border-top here (popout toolbar at bottom). */
.qn-popout-toolbar{
  height:48px;flex-shrink:0;
  padding:0 10px;
  display:flex;align-items:center;gap:2px;
  border-top:0.5px solid var(--chrome-border);
  /* V81.6 — frosted chrome bar matching the header (was white-ish, blended
     into the body). Grouped, distinct toolbar zone.
     V83 — on the shared Liquid Glass refraction token (was a raw blur stack). */
  background:transparent;
  -webkit-backdrop-filter:var(--lg-refract);
  backdrop-filter:var(--lg-refract);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  overflow-x:auto;
  scrollbar-width:none;
}
.qn-popout-toolbar::-webkit-scrollbar{display:none}
/* V39fff — qn-tool: Apple press feedback */
.qn-tool{
  width:32px;height:32px;border-radius:var(--radius-sm);
  background:transparent;border:none;cursor:pointer;padding:0;
  color:var(--text-secondary);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:inherit;font-size:14px;font-weight:600;
  transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast);
  flex:0 0 auto;
}
.qn-tool:hover{background:var(--chrome-bg);color:var(--text-primary)}
.qn-tool:active{transform:scale(.92)}
.qn-tool.active{background:var(--chrome-bg-strong,var(--surface-2));color:var(--app-accent)}
.qn-tool svg{width:14px;height:14px}
/* V83 — text-size "Aa" button: lifted the inline font-weight/tracking + the
   per-span font sizes into a class (was style="font-weight:400;letter-spacing:-1px"
   + style="font-size:11px/15px" inline one-offs). */
.qn-tool-textsize{font-weight:400;letter-spacing:-1px}
.qn-tool-textsize .qn-ts-sm{font-size:11px}
.qn-tool-textsize .qn-ts-lg{font-size:15px}
/* V83 — template-picker caret (was a raw ▼ glyph at 9px). Now the shared
   chevron-down SVG symbol, sized down to read as a small affordance. */
.qn-popout-action .qn-tmpl-caret{width:9px;height:9px}
/* V38d-c2 — Danger-action toolbar button (trash). Distinct red color so it
   stands out from the routine formatting controls — was using the 🗑 emoji
   which rendered with low contrast across themes. */
.qn-tool-danger{color:var(--text-secondary,var(--text-primary))}
.qn-tool-danger:hover{background:color-mix(in srgb, var(--app-danger) 12%, transparent);color:var(--app-danger)}
/* V38d-c4 — Custom tooltip on toolbar buttons. Native title=""s have a
   ~1500ms browser delay and no styling; this gives 350ms + theme-token
   bg/text. Pure-CSS — no JS layer needed. The hover-time delay uses CSS
   transition-delay on opacity (effectively the same UX as native delay
   but immediately consistent across browsers + themes). */
.qn-tool, .qn-popout-action{position:relative}
.qn-tool[title]:hover::after,
.qn-popout-action[title]:hover::after{
  content:attr(title);
  position:absolute;
  top:calc(100% + 6px);          /* V81: below the button — toolbar sits at the
                                    pane top, so above-tooltips were clipped. */
  left:50%;transform:translateX(-50%);
  background:var(--text-primary);
  color:var(--card-bg);
  padding:4px 8px;
  border-radius:var(--radius-sm);
  font-size:11px;font-weight:500;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transition:opacity var(--motion-fast) ease-out;
  transition-delay:.35s;
  z-index:var(--z-tooltip);
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.qn-tool[title]:hover::after,
.qn-popout-action[title]:hover::after{opacity:1}
/* Hide the native title tooltip from showing AFTER the custom one by
   stripping it via JS isn't possible declaratively; instead the CSS one
   appears first (.35s delay vs ~1.5s native) so the user only sees ours. */
.qn-tool-sep{width:1px;height:20px;background:var(--chrome-border);margin:0 4px;flex:0 0 1px}
.qn-tool-spacer{flex:1;min-width:8px}
.qn-color-pop{
  position:absolute;
  background:var(--card-bg);
  border:0.5px solid var(--chrome-border);
  border-radius:var(--radius-md);
  padding:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.18),0 0 0 0.5px rgba(0,0,0,.06);
  display:flex;gap:6px;z-index:var(--z-toast);
}
.qn-color-swatch{
  width:24px;height:24px;border-radius:50%;
  border:0.5px solid var(--chrome-border);
  cursor:pointer;padding:0;
  transition:transform var(--motion-fast);
}
.qn-color-swatch:hover{transform:scale(1.15)}
.qn-color-swatch:active{transform:scale(.95)}
.qn-color-swatch[data-color="red"]{background:#ff3b30}
.qn-color-swatch[data-color="orange"]{background:#ff9500}
.qn-color-swatch[data-color="yellow"]{background:#ffcc00}
.qn-color-swatch[data-color="green"]{background:#34c759}
.qn-color-swatch[data-color="blue"]{background:#007aff}
.qn-color-swatch[data-color="gray"]{background:#8e8e93}
.qn-color-swatch[data-color="null"]{background:var(--card-bg);position:relative}
.qn-color-swatch[data-color="null"]::after{content:'⊘';color:var(--text-muted);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px}
/* V38b-f2 — Text size popover */
.qn-size-pop{
  position:absolute;
  background:var(--card-bg);
  border:0.5px solid var(--chrome-border);
  border-radius:var(--radius-md);
  padding:10px 12px;
  box-shadow:0 8px 24px rgba(0,0,0,.18),0 0 0 0.5px rgba(0,0,0,.06);
  display:flex;flex-direction:column;gap:8px;z-index:var(--z-toast);
  min-width:200px;
}
.qn-size-pop-label{font-size:11px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.qn-size-pop-divider{height:0.5px;background:var(--chrome-border);margin:8px 0 2px}
.qn-size-pop-row{display:flex;gap:6px}
.qn-size-swatch{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 4px;
  background:transparent;border:1px solid var(--chrome-border);border-radius:var(--radius-md);
  cursor:pointer;font-family:inherit;color:var(--text-primary);
  transition:background var(--motion-fast),border-color var(--motion-fast);
}
.qn-size-swatch:hover{background:var(--surface-2)}
.qn-size-swatch:active{transform:scale(.95)}
.qn-size-swatch.active{background:var(--app-accent);color:var(--on-accent);border-color:transparent}
.qn-size-label{font-size:10px;color:var(--text-muted);font-weight:600}
.qn-size-swatch.active .qn-size-label{color:var(--on-accent);opacity:.9}
.qn-size-autofit, .qn-size-wraptoggle{
  background:var(--surface-2);border:0.5px solid var(--chrome-border);
  color:var(--text-primary);font-family:inherit;font-size:12px;
  padding:8px 12px;border-radius:var(--radius-md);cursor:pointer;
  transition:background var(--motion-fast);
  margin-top:6px;text-align:left;width:100%;
}
.qn-size-autofit:hover, .qn-size-wraptoggle:hover{background:var(--surface-3,var(--chrome-bg))}
/* V38b-f5 — Export popover. V38d reviewer C1 fold: factored out shared base
   style so V38c/V38d sibling popovers (folder-menu/folder-pick/link-pick/
   attach-pick/attach-files) get the same chrome WITHOUT inheriting the
   `qn-export-pop` class itself (which is a toggle-guard selector in JS). */
.qn-export-pop,
.qn-folder-menu-pop,
.qn-folder-pick-pop,
.qn-link-pick-pop,
.qn-attach-pick-pop,
.qn-attach-files-pop,
.qn-more-menu-pop{
  position:absolute;
  border-radius:var(--radius-md);
  padding:8px;
  display:flex;flex-direction:column;gap:4px;z-index:var(--z-toast);
  min-width:220px;
}
.qn-export-pop-label{font-size:11px;color:var(--text-muted);font-weight:600;padding:4px 8px 6px;border-bottom:0.5px solid var(--chrome-border);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qn-export-action{
  background:transparent;border:none;
  text-align:left;padding:8px 10px;border-radius:var(--radius-sm);
  color:var(--text-primary);font-family:inherit;font-size:13px;
  cursor:pointer;transition:background var(--motion-fast);
}
.qn-export-action:hover{background:var(--surface-2)}
.qn-export-action.qn-exp-ic{display:flex;align-items:center;gap:8px}
.qn-export-action.qn-exp-ic .ic{width:14px;height:14px;flex:0 0 auto;color:var(--text-secondary)}
/* P2 — More overflow menu. Frosted Apple popover (shares .qn-export-pop chrome
   via the base rule above) with labeled rows: leading SVG icon + text label,
   NOT bare icons. Glass + reduced-transparency fallback below. */
.qn-more-menu-pop{
  min-width:224px;
}
.qn-more-row{display:flex;align-items:center;gap:10px}
.qn-more-row svg{width:15px;height:15px;flex:0 0 auto;color:var(--text-secondary,var(--text-primary))}
.qn-more-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qn-more-divider{height:0.5px;background:var(--chrome-border);margin:5px 6px}
.qn-more-danger{color:var(--app-danger)}
.qn-more-danger svg{color:var(--app-danger)}
.qn-more-danger:hover{background:color-mix(in srgb, var(--app-danger) 12%, transparent)}
/* P5 — project linker rows: leading color dot (color via --dot custom prop, no
   inline style), trailing check SVG when linked (replaces the raw ✓ glyph). */
.qn-link-row{display:flex;align-items:center;gap:8px}
.qn-link-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--dot,var(--text-muted));box-shadow:inset 0 0 0 0.5px color-mix(in srgb,var(--text-primary) 18%,transparent)}
.qn-link-row-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qn-link-row-check{width:15px;height:15px;flex:0 0 auto;color:var(--app-accent);opacity:0;transition:opacity var(--motion-fast)}
.qn-link-row.linked .qn-link-row-check{opacity:1}
/* P3 — Slash-command menu. Frosted Apple popover anchored at the caret. Shares
   the glass language with .ctx-menu / .qn-more-menu-pop: surface-derived frost,
   saturated backdrop-blur, layered elevation + specular edge, reduced-transparency
   fallback to a solid surface. Rows = leading SVG icon + label + a muted hint. */
.qn-slash-pop{
  position:absolute;
  background:var(--frost-bg,var(--card-bg));
  -webkit-backdrop-filter:var(--frost-blur);
  backdrop-filter:var(--frost-blur);
  border:0.5px solid var(--chrome-border);
  border-radius:var(--radius-md);
  padding:6px;
  box-shadow:var(--shadow-e4),0 0 0 0.5px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.18);
  display:flex;flex-direction:column;gap:2px;
  z-index:var(--z-toast);
  min-width:248px;max-width:300px;
  max-height:340px;overflow-y:auto;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .qn-slash-pop{background:var(--surface,var(--card-bg))}
}
@media (prefers-reduced-transparency:reduce){
  .qn-slash-pop{background:var(--surface,var(--card-bg));backdrop-filter:none;-webkit-backdrop-filter:none}
}
.qn-slash-row{
  display:flex;align-items:center;gap:10px;
  background:transparent;border:none;
  text-align:left;padding:8px 10px;border-radius:var(--radius-sm);
  color:var(--text-primary);font-family:inherit;font-size:13px;
  cursor:pointer;transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring);
}
.qn-slash-row:hover{background:var(--surface-2)}
.qn-slash-row.active{background:color-mix(in srgb,var(--app-accent) 16%,transparent)}
.qn-slash-row .qn-slash-ico{
  width:24px;height:24px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);background:var(--surface-2);
  color:var(--text-secondary,var(--text-primary));
}
.qn-slash-row.active .qn-slash-ico{background:color-mix(in srgb,var(--app-accent) 22%,transparent);color:var(--app-accent)}
.qn-slash-row .qn-slash-ico svg{width:14px;height:14px}
.qn-slash-row .qn-slash-ico b{font-size:12px;font-weight:700;letter-spacing:-.3px}
.qn-slash-label{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.qn-slash-label .qn-slash-name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qn-slash-label .qn-slash-hint{font-size:11px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qn-slash-empty{padding:10px 12px;font-size:12px;color:var(--text-muted)}
/* V38d-1 — Icon picker popover (5×4 grid of SVG swatches). */
.qn-icon-pick-pop{
  position:absolute;
  background:var(--card-bg);
  border:0.5px solid var(--chrome-border);
  border-radius:var(--radius-md);padding:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.18),0 0 0 0.5px rgba(0,0,0,.06);
  z-index:var(--z-toast);min-width:220px;
}
.qn-icon-pick-label{font-size:11px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.qn-icon-pick-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.qn-icon-swatch{
  width:34px;height:34px;border-radius:var(--radius-md);
  background:transparent;border:0.5px solid var(--chrome-border);
  color:var(--text-secondary,var(--text-primary));
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;font-family:inherit;
  transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast);
}
.qn-icon-swatch:hover{background:var(--surface-2);color:var(--text-primary)}
.qn-icon-swatch.active{background:var(--app-accent);color:var(--on-accent);border-color:transparent}
.qn-icon-swatch svg{width:18px;height:18px}
.qn-icon-clear{font-size:15px;color:var(--text-muted)}
.qn-switcher-noteicon{width:11px;height:11px;flex:0 0 auto}
.qn-page-row-icon{width:14px;height:14px;flex:0 0 auto;color:var(--text-secondary,var(--text-primary))}
/* V38d-2 — Template picker (rows with icon + label). */
.qn-tmpl-pick-pop{
  position:absolute;
  background:var(--card-bg);
  border:0.5px solid var(--chrome-border);
  border-radius:var(--radius-md);padding:6px;
  box-shadow:0 8px 24px rgba(0,0,0,.18),0 0 0 0.5px rgba(0,0,0,.06);
  z-index:var(--z-toast);min-width:220px;
  display:flex;flex-direction:column;gap:2px;
}
.qn-tmpl-pick-label{font-size:11px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:4px 8px 6px;border-bottom:0.5px solid var(--chrome-border);margin-bottom:4px}
.qn-tmpl-row{
  display:flex;align-items:center;gap:10px;
  background:transparent;border:none;
  text-align:left;padding:8px 10px;border-radius:var(--radius-sm);
  color:var(--text-primary);font-family:inherit;font-size:13px;
  cursor:pointer;transition:background var(--motion-fast);
}
.qn-tmpl-row:hover{background:var(--surface-2)}
.qn-tmpl-icon{width:16px;height:16px;flex:0 0 auto;color:var(--text-secondary,var(--text-primary))}
.qn-tmpl-icon-blank{color:var(--text-muted);font-size:13px;line-height:16px;text-align:center}
/* V38d-2 — Page list "+ New ▼" split button. */
/* V77.3 — Apple HIG unified split button. Was two visually separate halves
   (left rounded-left, right rounded-right, 1px seam) reading as a Bootstrap-
   era split button. Now the wrapper is the visible rounded pill; both
   buttons sit flush inside with no border-radius of their own. Caret has a
   subtle separator instead of a hard border. */
.qn-page-list-new-wrap{display:inline-flex;align-items:stretch;gap:0;border-radius:var(--radius-pill);overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.08),inset 0 0 0 0.5px rgba(255,255,255,.16)}
.qn-page-list-new-wrap .qn-page-list-new{border-radius:0;box-shadow:none}
.qn-page-list-new-wrap .qn-page-list-new-caret{border-radius:0;padding:5px 9px;border-left:0.5px solid color-mix(in srgb, var(--on-accent) 22%, transparent);box-shadow:none;display:inline-flex;align-items:center}
/* V83 — caret is the shared chevron-down SVG (was a raw ▼ glyph at 9px). */
.qn-page-list-new-caret svg{width:9px;height:9px}
/* V38d-4 — Inline images in editor body should respect editor wrap rules. */
.qn-editor-body img{max-width:100%;border-radius:var(--radius-sm);display:inline-block}
/* D2 — attachment embeds are openable (the editor click handler opens them in a
   new tab). Give them a clear clickable affordance on hover. */
.qn-editor-body a.qn-file-card{transition:background var(--motion-fast),box-shadow var(--motion-fast)}
.qn-editor-body a.qn-file-card:hover{background:var(--surface-2,var(--chrome-bg));box-shadow:inset 0 0 0 0.5px var(--chrome-border)}
.qn-editor-body img.qn-attach-img:hover{box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 40%,transparent)}
/* QN resize (2026-05-26) — macOS-window model: any edge OR corner is grabbable,
   not just the bottom-right corner. The corner-only grip was a 14px target
   (below the comfortable touch size) AND, since the window anchors bottom/right,
   could only push the window further into its pinned corner — awkward on iPad,
   "off" on desktop. The edge/corner zones are invisible hit areas; the visible
   bottom-right grip stays as the discoverable affordance (now 22px + glyph,
   matching .htmlv-resize-grip). All gated off on phones (full-bleed sheet). */
.qn-resize-zone{position:absolute;z-index:2;touch-action:none}
/* Edges — comfortable ~10px grab band, inset from corners so corner zones win there. */
.qn-rz-n{top:-3px;left:14px;right:14px;height:11px;cursor:ns-resize}
.qn-rz-s{bottom:-3px;left:14px;right:14px;height:11px;cursor:ns-resize}
.qn-rz-w{left:-3px;top:14px;bottom:14px;width:11px;cursor:ew-resize}
.qn-rz-e{right:-3px;top:14px;bottom:14px;width:11px;cursor:ew-resize}
/* Corners — 18px square, generous for touch. */
.qn-rz-nw{top:-3px;left:-3px;width:18px;height:18px;cursor:nwse-resize}
.qn-rz-ne{top:-3px;right:-3px;width:18px;height:18px;cursor:nesw-resize}
.qn-rz-sw{bottom:-3px;left:-3px;width:18px;height:18px;cursor:nesw-resize}
.qn-rz-se{bottom:-3px;right:-3px;width:18px;height:18px;cursor:nwse-resize}
/* Visible bottom-right grip — discoverable affordance, glyph matches the
   doc-viewer grip. Sits above the invisible SE zone (which still owns the hit). */
.qn-popout-resize{
  position:absolute;right:0;bottom:0;
  width:22px;height:22px;cursor:nwse-resize;z-index:1;
  display:flex;align-items:flex-end;justify-content:flex-end;padding:4px;
  color:color-mix(in srgb,var(--text-primary) 28%,transparent);
  pointer-events:none; /* the .qn-rz-se zone above handles the drag */
  transition:color var(--motion-fast) var(--ease-out);
}
.qn-popout-resize svg{width:13px;height:13px;display:block}
.qn-popout:hover .qn-popout-resize{color:color-mix(in srgb,var(--text-primary) 50%,transparent)}
@media (max-width:640px){
  .qn-popout{
    /* P2 — true full-bleed sheet. Was height:92svh, which left a sliver of the
       board peeking at the top. Pin to all four edges; the header already
       carries safe-area padding so content clears the notch. */
    inset:0;
    width:100%;
    height:100svh;
    height:100dvh;
    max-height:100svh;
    max-height:100dvh;
    border-radius:0;
    transform:translateY(100%);
  }
  .qn-popout.open{transform:translateY(0)}
  .qn-popout-resize,.qn-resize-zone{display:none}
  /* P2 — full-bleed sheet pins the header to the screen top; pad for the
     notch/safe-area + disable drag (header drag is a desktop-only affordance;
     the JS handler already bails ≤640px). */
  .qn-popout-header{cursor:default;height:auto;min-height:48px;padding-top:env(safe-area-inset-top,0px)}
}
/* 2026-07-02 📘 — TO-DO POP-OUT chrome — mirrors .qn-popout (same glass tokens, same resize model),
   wider default because it hosts the full To-Do sidebar+list+detail. The live #todoView node is
   relocated into #tdPopoutBody while open, so no To-Do CSS is duplicated — only the window chrome. */
/* Visibility gated by display (none↔flex); opacity stays 1 so a style recalc from the hosted
   To-Do render can't strand an opacity transition mid-flight (it did — the panel stuck at opacity:0).
   The transform gives a subtle rise-in without touching opacity. */
.td-popout{position:fixed;bottom:14px;right:14px;width:760px;height:640px;background:var(--lg-bg-strong);backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);box-shadow:var(--lg-edge),var(--shadow-e4);display:none;flex-direction:column;z-index:var(--z-modal);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;transform:translateY(8px) scale(0.99);transition:transform var(--motion-base) cubic-bezier(.32,.72,0,1);overflow:hidden}
.td-popout.open{display:flex;transform:translateY(0) scale(1)}
@media (prefers-reduced-motion:reduce){.td-popout{transition:none}}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.td-popout{background:var(--surface)}}
@media (prefers-reduced-transparency:reduce){.td-popout{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
.td-popout-header{height:48px;padding:0 8px 0 14px;display:flex;align-items:center;gap:8px;border-bottom:0.5px solid var(--chrome-border);cursor:grab;flex:0 0 auto;touch-action:none}
.td-popout-header:active{cursor:grabbing}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.td-popout-header{background:var(--surface-2)}}
.td-popout-title{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary);flex:1;min-width:0}
.td-popout-title-ico{width:16px;height:16px;color:var(--app-accent);flex:0 0 auto}
.td-popout-actions{display:flex;align-items:center;gap:2px;flex:0 0 auto}
/* the relocated #todoView fills the body; keep its native horizontal flex layout (sidebar | main),
   just neutralize the page padding/scroll so it sits clean in the panel. NEVER force display:block —
   that collapses the 2-column layout into a stacked sidebar-over-list (the bug). */
.td-popout-body{flex:1;min-height:0;min-width:0;max-width:100%;overflow:hidden;display:flex;flex-direction:column;background:var(--card-bg)}
.td-popout-body > #todoView{display:flex!important;flex:1 1 auto;min-height:0;padding:10px;gap:10px}
/* inside the pop-out the main column shouldn't cap at 980px — let it fill the panel */
.td-popout-body > #todoView .td-main{overflow:auto}
.td-popout-body > #todoView .td-main-inner{max-width:none}
/* resize zones reuse .qn-resize-zone base; give the td-* variants the same edge/corner geometry */
.td-rz-n{top:-3px;left:14px;right:14px;height:11px;cursor:ns-resize}
.td-rz-s{bottom:-3px;left:14px;right:14px;height:11px;cursor:ns-resize}
.td-rz-w{left:-3px;top:14px;bottom:14px;width:11px;cursor:ew-resize}
.td-rz-e{right:-3px;top:14px;bottom:14px;width:11px;cursor:ew-resize}
.td-rz-nw{top:-3px;left:-3px;width:18px;height:18px;cursor:nwse-resize}
.td-rz-ne{top:-3px;right:-3px;width:18px;height:18px;cursor:nesw-resize}
.td-rz-sw{bottom:-3px;left:-3px;width:18px;height:18px;cursor:nesw-resize}
.td-rz-se{bottom:-3px;right:-3px;width:18px;height:18px;cursor:nwse-resize}
.td-popout:hover .qn-popout-resize{color:color-mix(in srgb,var(--text-primary) 50%,transparent)}
@media (max-width:640px){
  .td-popout{inset:0;width:100%;height:100svh;height:100dvh;max-height:100dvh;border-radius:0;transform:translateY(100%)}
  .td-popout.open{transform:translateY(0)}
  .td-popout .qn-popout-resize,.td-popout .qn-resize-zone{display:none}
  .td-popout-header{cursor:default;height:auto;min-height:48px;padding-top:env(safe-area-inset-top,0px)}
}
/* V38b — Editor core wrapper. Singleton subtree that moves between the popout
   body and the page Notes pane host. flex column so its title/rule/body lay out
   the same regardless of host. */
/* V77.3 — Added min-width:0 so content with long unbreakable runs (URLs,
   monospace lines without spaces) doesn't push the editor wider than its
   parent flex slot. Was causing right-edge clipping in iPad/desktop page
   mount (.qn-page-editor → .qn-editor-core → .qn-editor-body). */
.qn-editor-core{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;max-width:100%}
/* P2.11 — split (dual-note) view: body becomes a row, both panes share width. */
.qn-popout.qn-split-on .qn-popout-body{flex-direction:row;gap:0}
.qn-popout.qn-split-on .qn-editor-core{flex:1 1 50%;max-width:50%}
.qn-split-pane{display:flex;flex-direction:column;flex:1 1 50%;min-width:0;min-height:0;border-left:0.5px solid var(--chrome-border)}
.qn-split-pane[hidden]{display:none}
.qn-split-head{display:flex;align-items:center;gap:6px;padding:6px 10px 4px}
.qn-split-switcher{flex:1;min-width:0;display:flex;align-items:center;gap:6px;background:none;border:0;font-family:inherit;font-size:14px;font-weight:600;color:var(--text-primary);cursor:pointer;padding:4px 6px;border-radius:var(--radius-sm);overflow:hidden}
.qn-split-switcher:hover{background:var(--chrome-bg)}
.qn-split-switcher span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qn-split-switcher svg{width:11px;height:8px;flex:0 0 auto;color:var(--text-muted)}
.qn-split-title-input{padding:2px 16px 6px}
.qn-split-body{flex:1;min-height:0;overflow:auto;padding:8px 16px 14px}
/* On phones the popout is a bottom sheet — stack the split panes vertically instead. */
@media (max-width:640px){
  .qn-popout.qn-split-on .qn-popout-body{flex-direction:column}
  .qn-popout.qn-split-on .qn-editor-core{flex:1 1 50%;max-width:100%}
  .qn-split-pane{flex:1 1 50%;border-left:none;border-top:0.5px solid var(--chrome-border)}
}
/* V38b — Page Notes pane (Todo view, when view starts with notes:). 2-pane
   split: notes list (320px) + editor host (fills rest). Reuses qn-editor-body
   styling so the contenteditable looks identical to the popout. */
/* V77.3 — Notes pane sits INSIDE .td-main (which already has the floating
   shadow). Stacking another full shadow on top read as a card-in-card. Drop
   to a clean inset hairline so the inner pane looks structured without
   competing depth. */
.qn-page-pane{display:flex;flex:1;min-height:0;width:100%;gap:0;background:var(--card-bg);border-radius:var(--radius-lg);overflow:hidden;
  /* V81 — give the Notes pane a real Apple floating-card lift off the app bg
     (the V77.3 inset-hairline-only made it read flat once the toolbar grey was
     removed). Layered soft shadow + a hairline ring so it reads as an elevated
     sheet on both light and dark themes. */
  box-shadow:0 1px 3px rgba(0,0,0,.06), 0 8px 24px -6px rgba(0,0,0,.12), 0 0 0 0.5px var(--chrome-border)}
/* V77.4 — Apple Notes 3-tier hierarchy: sidebar (surface-2) < list pane
   (--qn-list-bg, defined per-theme to visibly step down from sidebar) <
   editor (card-bg white). Theme variables stay tokenized so dark mode works. */
.qn-page-list{width:320px;flex-shrink:0;border-right:0.5px solid var(--chrome-border);background:var(--qn-list-bg,var(--surface-3));display:flex;flex-direction:column;min-height:0}
.qn-page-list-head{padding:14px 14px 8px;display:flex;align-items:center;justify-content:space-between;background:transparent;gap:8px}
/* V77.3 — Back to Lists button on Notes pane (mobile only). Apple Reminders/Mail
   convention: chevron + label, no border, accent color. Hidden on desktop/iPad
   where the sidebar is always visible. */
.qn-page-back-btn{display:none;align-items:center;background:transparent;border:none;color:var(--app-accent);font-family:inherit;font-size:14px;font-weight:500;letter-spacing:-.2px;padding:0;cursor:pointer;flex-shrink:0}
.qn-page-back-btn:active{opacity:.6}
@media (max-width:640px){.qn-page-back-btn{display:inline-flex}}
.qn-page-list-title{font-size:13px;font-weight:600;color:var(--text-primary);letter-spacing:-.1px}
/* V39ppp — qn-page-list-new: full Apple primary-button treatment */
/* V77.6 — Smaller, less heavy than before. Apple iOS toolbar buttons are
   typically 13px text and use the system font's natural weight. */
.qn-page-list-new{background:var(--app-accent);color:var(--on-accent);border:none;border-radius:var(--radius-sm);padding:6px 12px;font-size:13px;font-weight:500;letter-spacing:-.1px;cursor:pointer;font-family:inherit;transition:opacity var(--motion-fast),transform var(--motion-fast);box-shadow:0 1px 2px rgba(0,0,0,.08),inset 0 0 0 0.5px rgba(255,255,255,.16);min-height:30px}
.qn-page-list-new:hover{opacity:.92}
.qn-page-list-new:active{transform:scale(.96);opacity:1}
/* V38c — Search input above the notes list. Apple-Notes-style: subtle
   surface background, no border, rounded. Hidden type="search" decorations. */
.qn-page-list-search{padding:0 14px 10px;background:transparent;border-bottom:0.5px solid var(--chrome-border)}
/* V77.3 — Apple Notes search pill: surface-2 fill, no visible border,
   subtle inset shadow + rounded-pill corners. */
.qn-page-list-search input{
  width:100%;box-sizing:border-box;
  padding:6px 12px;
  background:var(--surface-2);
  border:none;
  border-radius:var(--radius-pill);
  font-family:inherit;font-size:13px;
  color:var(--text-primary);
  outline:none;
  box-shadow:inset 0 0 0 0.5px var(--chrome-border);
  transition:box-shadow var(--motion-fast);
}
.qn-page-list-search input:focus{
  box-shadow:inset 0 0 0 0.5px var(--app-accent), 0 0 0 3px color-mix(in srgb, var(--app-accent) 18%, transparent);
}
.qn-page-list-search input::-webkit-search-cancel-button{
  -webkit-appearance:none;appearance:none;
  width:14px;height:14px;border-radius:50%;
  background:var(--text-muted);opacity:.5;cursor:pointer;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 3L9 9M9 3L3 9' stroke='black' stroke-width='2' fill='none' stroke-linecap='round'/></svg>") center/8px no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 3L9 9M9 3L3 9' stroke='black' stroke-width='2' fill='none' stroke-linecap='round'/></svg>") center/8px no-repeat;
}
.qn-page-list-scroll{flex:1;overflow-y:auto;padding:4px 0}
.qn-page-row{display:flex;flex-direction:column;gap:4px;padding:10px 14px 10px 14px;cursor:pointer;transition:background var(--motion-fast)}
.qn-page-row:hover{background:var(--hover-overlay)}
/* V39zzzz — qn-page-row press feedback */
.qn-page-row:active{background:var(--hover-overlay-strong)}
.qn-page-row.active{background:var(--accent-tint)}
/* Note color signals via a rounded leading dot (NOT an edge-strip — hard-banned). */
.qn-page-row-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--text-tertiary,var(--text-secondary))}
.qn-page-row-dot-inherit{opacity:.5}
.qn-page-row-dot[data-color="red"]{background:var(--qn-c-red)}
.qn-page-row-dot[data-color="orange"]{background:var(--qn-c-orange)}
.qn-page-row-dot[data-color="yellow"]{background:var(--qn-c-yellow)}
.qn-page-row-dot[data-color="green"]{background:var(--qn-c-green)}
.qn-page-row-dot[data-color="blue"]{background:var(--qn-c-blue)}
.qn-page-row-dot[data-color="gray"]{background:var(--qn-c-gray)}
.qn-page-row-title{font-size:13px;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:6px}
/* P2 — pin glyph is now the #icon-pin SVG (was a raw 📌 emoji). Sized to
   match the other row icons (.qn-page-row-icon = 14px). */
.qn-page-row-pin{color:var(--app-accent);flex-shrink:0;display:inline-flex;align-items:center}
.qn-page-row-pin svg{width:12px;height:12px}
.qn-page-row-preview{font-size:12px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}
.qn-page-row-date{font-size:11px;color:var(--text-muted);opacity:.7}
/* P4 — row footer holds the date + (when search scope=All) a source chip. */
.qn-page-row-foot{display:flex;align-items:center;gap:8px;min-width:0}
.qn-page-row-source{font-size:10px;font-weight:600;letter-spacing:.2px;color:var(--text-secondary,var(--text-muted));background:var(--surface-2);border-radius:var(--radius-pill);padding:1px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;box-shadow:inset 0 0 0 0.5px var(--chrome-border)}
/* P4 — search-match highlight. Subtle accent tint (NOT raw yellow), per DESIGN. */
.qn-hl{background:color-mix(in srgb, var(--app-accent) 24%, transparent);color:inherit;border-radius:3px;padding:0 1px;font-weight:600;box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* P4 — list head actions cluster (sort button + New). */
.qn-page-list-head-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
/* P4 — Sort button: quiet frosted pill, SVG sort glyph + label + caret. */
.qn-page-sort-btn{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);border:none;box-shadow:inset 0 0 0 0.5px var(--chrome-border);border-radius:var(--radius-pill);padding:5px 9px;font-family:inherit;font-size:12px;font-weight:500;letter-spacing:-.1px;color:var(--text-secondary,var(--text-primary));cursor:pointer;min-height:30px;transition:background var(--motion-fast),transform var(--motion-fast)}
.qn-page-sort-btn:hover{background:var(--card-bg)}
.qn-page-sort-btn:active{transform:scale(.96)}
.qn-page-sort-btn .qn-sort-ico{width:13px;height:13px;flex:0 0 auto}
.qn-page-sort-btn .qn-sort-caret{width:11px;height:11px;flex:0 0 auto;opacity:.6}
.qn-page-sort-btn .qn-sort-label{white-space:nowrap}
@media (max-width:640px){.qn-page-sort-btn .qn-sort-label{display:none}}
/* P4 — Sort menu: rides .qn-more-menu-pop glass (frost + reduced-transparency
   fallback already defined). Row = leading check (visible on active) + label. */
.qn-sort-menu-pop{min-width:180px}
.qn-sort-row{display:flex;align-items:center;gap:10px}
.qn-sort-row .qn-sort-check{width:14px;height:14px;flex:0 0 auto;color:var(--app-accent)}
.qn-sort-row.active{color:var(--text-primary);font-weight:600}
/* P4 — Search scope toggle next to the search pill. role=switch. */
.qn-page-list-search{display:flex;align-items:center;gap:8px}
.qn-page-list-search input{flex:1;min-width:0}
.qn-scope-toggle{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;background:var(--surface-2);border:none;box-shadow:inset 0 0 0 0.5px var(--chrome-border);border-radius:var(--radius-pill);padding:5px 9px;font-family:inherit;font-size:11px;font-weight:600;letter-spacing:-.1px;color:var(--text-secondary,var(--text-muted));cursor:pointer;min-height:30px;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast),box-shadow var(--motion-fast)}
/* the scope toggle is only meaningful while searching — hide it until there's a query (2026-06-17 📘;
   it confused: with no search it read as a mystery 'This view' button with no visible effect). */
.qn-page-list-search:not(.has-query) .qn-scope-toggle{display:none}
.qn-scope-toggle .qn-scope-ico{width:13px;height:13px;flex:0 0 auto}
.qn-scope-toggle:hover{background:var(--card-bg)}
.qn-scope-toggle:active{transform:scale(.96)}
.qn-scope-toggle.active{background:var(--app-accent);color:var(--on-accent);box-shadow:inset 0 0 0 0.5px transparent,0 1px 2px rgba(0,0,0,.12)}
/* P4 — editor tag bar: editable #hashtag chips for the active note. */
.qn-editor-tags{display:flex;flex-wrap:wrap;gap:6px;padding:6px 16px 2px;align-items:center}
.qn-editor-tags:empty{display:none}
/* P2.7 — quick-note tag picker popover */
.qn-tagpick-pop{position:fixed;z-index:var(--z-popover);width:280px;max-width:calc(100vw - 16px);padding:10px 12px}
.qn-tagpick-sec-h{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-tertiary,var(--text-muted));margin:6px 2px 5px}
.qn-tagpick-sec-h:first-child{margin-top:0}
.qn-tagpick-grid{display:flex;flex-wrap:wrap;gap:5px}
.qn-tagpick-chip{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:600;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 10%,transparent);border:0.5px solid color-mix(in srgb,var(--app-accent) 18%,transparent);padding:3px 9px;border-radius:var(--radius-pill);cursor:pointer;font-family:inherit;transition:background var(--motion-fast),transform var(--motion-fast)}
.qn-tagpick-chip:hover:not(:disabled){background:color-mix(in srgb,var(--app-accent) 18%,transparent)}
.qn-tagpick-chip:active:not(:disabled){transform:scale(.95)}
.qn-tagpick-chip.is-applied{opacity:.4;cursor:default}
.qn-tagpick-del{margin-left:1px;color:var(--text-muted);font-weight:700;padding:0 1px;border-radius:50%}
.qn-tagpick-del:hover{color:var(--app-danger)}
.qn-tagpick-empty{font-size:12px;color:var(--text-muted);padding:2px 2px}
.qn-tagpick-new{display:flex;gap:6px;margin-top:10px;padding-top:9px;border-top:0.5px solid var(--chrome-border)}
.qn-tagpick-input{flex:1;min-width:0;font-size:12.5px;padding:5px 9px;border:0.5px solid var(--chrome-border);border-radius:var(--radius-sm);background:var(--input-bg,var(--card-bg));color:var(--text-primary);font-family:inherit;outline:none}
.qn-tagpick-input:focus{border-color:var(--app-accent)}
.qn-tagpick-add{flex:0 0 auto;font-size:12px;font-weight:600;color:var(--on-accent,#fff);background:var(--app-accent);border:0;padding:5px 12px;border-radius:var(--radius-sm);cursor:pointer;font-family:inherit}
.qn-tagpick-add:active{transform:scale(.96)}
.qn-etag{display:inline-flex;align-items:center;gap:4px;background:var(--surface-2);box-shadow:inset 0 0 0 0.5px var(--chrome-border);border-radius:var(--radius-pill);padding:2px 4px 2px 9px;font-size:12px;font-weight:500;color:var(--text-secondary,var(--text-primary));letter-spacing:-.1px;transition:background var(--motion-fast)}
.qn-etag:hover{background:var(--card-bg)}
.qn-etag-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.qn-etag-name{line-height:1}
.qn-etag-x{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;border:none;background:transparent;color:var(--text-muted);cursor:pointer;padding:0;transition:background var(--motion-fast),color var(--motion-fast)}
.qn-etag-x svg{width:9px;height:9px}
.qn-etag-x:hover{background:color-mix(in srgb,var(--app-danger) 14%,transparent);color:var(--app-danger)}
.qn-etag-add{display:inline-flex;align-items:center;gap:3px;background:transparent;border:1px dashed var(--chrome-border);border-radius:var(--radius-pill);padding:2px 9px;font-family:inherit;font-size:12px;font-weight:500;color:var(--text-muted);cursor:pointer;transition:color var(--motion-fast),border-color var(--motion-fast),transform var(--motion-fast)}
.qn-etag-add svg{width:10px;height:10px}
.qn-etag-add:hover{color:var(--app-accent);border-color:var(--app-accent)}
.qn-etag-add:active{transform:scale(.96)}
/* P4 — per-tag color dot on the sidebar tag chips. */
.qn-tag-chip-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:middle}
/* P5 — editor linked-project chips: tap to navigate to the project. */
.qn-editor-links{display:flex;flex-wrap:wrap;gap:6px;padding:2px 16px 2px;align-items:center}
.qn-editor-links:empty{display:none}
.qn-link-chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);box-shadow:inset 0 0 0 0.5px var(--chrome-border);border-radius:var(--radius-pill);padding:3px 10px 3px 8px;font-family:inherit;font-size:12px;font-weight:600;color:var(--text-secondary,var(--text-primary));letter-spacing:-.1px;cursor:pointer;transition:background var(--motion-fast),transform var(--motion-fast),box-shadow var(--motion-fast)}
.qn-link-chip:hover{background:var(--card-bg);transform:translateY(-1px);box-shadow:inset 0 0 0 0.5px var(--chrome-border),var(--shadow-e1)}
.qn-link-chip:active{transform:scale(.97)}
.qn-link-chip .qn-link-chip-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--dot,var(--app-accent));box-shadow:inset 0 0 0 0.5px color-mix(in srgb,var(--text-primary) 18%,transparent)}
.qn-link-chip svg{width:11px;height:11px;flex:0 0 auto;color:var(--text-muted)}
.qn-link-chip .qn-link-chip-name{line-height:1;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* O1 — linked task / daily-log chips + "Link task"/"Link log" affordances.
   Same pill family as .qn-link-chip (project chips) so the editor's link area
   reads as one consistent system. The chip navigates to the project's tab; the
   "add" affordance is a quiet dashed pill that opens the frosted picker. */
.qn-editor-tasklog{display:flex;flex-wrap:wrap;gap:6px;padding:2px 16px 2px;align-items:center}
.qn-editor-tasklog:empty{display:none}
.qn-tl-chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);box-shadow:inset 0 0 0 0.5px var(--chrome-border);border-radius:var(--radius-pill);padding:3px 8px 3px 9px;font-family:inherit;font-size:12px;font-weight:600;color:var(--text-secondary,var(--text-primary));letter-spacing:-.1px;cursor:pointer;border:none;transition:background var(--motion-fast),transform var(--motion-fast),box-shadow var(--motion-fast)}
.qn-tl-chip:hover{background:var(--card-bg);transform:translateY(-1px);box-shadow:inset 0 0 0 0.5px var(--chrome-border),var(--shadow-e1)}
.qn-tl-chip:active{transform:scale(.97)}
.qn-tl-chip .qn-tl-chip-ico{width:12px;height:12px;flex:0 0 auto;color:var(--app-accent)}
.qn-tl-chip .qn-tl-chip-chev{width:10px;height:10px;flex:0 0 auto;color:var(--text-muted)}
.qn-tl-chip .qn-tl-chip-name{line-height:1;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qn-tl-chip.is-removed{color:var(--text-muted)}
.qn-tl-chip.is-removed .qn-tl-chip-ico,.qn-tl-chip.is-removed .qn-tl-chip-chev{color:var(--color-error,#ff3b30)}
.qn-tl-add{display:inline-flex;align-items:center;gap:5px;background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text-primary) 18%,transparent);border:none;border-radius:var(--radius-pill);padding:3px 10px 3px 8px;font-family:inherit;font-size:12px;font-weight:600;color:var(--text-muted);letter-spacing:-.1px;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast),box-shadow var(--motion-fast)}
.qn-tl-add:hover{color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 8%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--app-accent) 35%,transparent);transform:translateY(-1px)}
.qn-tl-add:active{transform:scale(.97)}
.qn-tl-add .qn-tl-add-ico{width:12px;height:12px;flex:0 0 auto}
/* O1 — picker rows reuse .qn-export-action/.qn-link-row; add a leading icon slot
   (the project linker uses a color dot; tasks/logs use an SVG glyph instead). */
.qn-link-row-ico{width:14px;height:14px;flex:0 0 auto;color:var(--text-secondary,var(--text-primary))}
.qn-link-row.linked .qn-link-row-ico{color:var(--app-accent)}
/* P6 — reminder + due-date chips. Status-toned pill family matching .qn-link-chip,
   but semantic-colored (info for a future reminder, warning when due soon, error
   when overdue). Leading SVG (bell/clock), label, trailing clear ✕. */
.qn-editor-reminders{display:flex;flex-wrap:wrap;gap:6px;padding:2px 16px 2px;align-items:center}
.qn-editor-reminders:empty{display:none}
.qn-rem-chip{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-pill);padding:3px 6px 3px 9px;font-family:inherit;font-size:12px;font-weight:600;letter-spacing:-.1px;line-height:1;background:var(--color-info-bg,color-mix(in srgb,var(--color-info,#007aff) 12%,transparent));color:var(--color-info,#007aff);box-shadow:inset 0 0 0 0.5px color-mix(in srgb,var(--color-info,#007aff) 30%,transparent)}
.qn-rem-chip svg{width:12px;height:12px;flex:0 0 auto}
.qn-rem-chip.is-warn{background:var(--color-warning-bg,color-mix(in srgb,var(--color-warning,#ff9500) 12%,transparent));color:var(--color-warning,#ff9500);box-shadow:inset 0 0 0 0.5px color-mix(in srgb,var(--color-warning,#ff9500) 30%,transparent)}
.qn-rem-chip.is-over{background:var(--color-error-bg,color-mix(in srgb,var(--color-error,#ff3b30) 12%,transparent));color:var(--color-error,#ff3b30);box-shadow:inset 0 0 0 0.5px color-mix(in srgb,var(--color-error,#ff3b30) 30%,transparent)}
.qn-rem-chip.is-due{background:var(--surface-2);color:var(--text-secondary,var(--text-primary));box-shadow:inset 0 0 0 0.5px var(--chrome-border)}
.qn-rem-chip-x{background:transparent;border:none;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;cursor:pointer;color:inherit;opacity:.7;transition:opacity var(--motion-fast),background var(--motion-fast)}
.qn-rem-chip-x:hover{opacity:1;background:color-mix(in srgb,currentColor 16%,transparent)}
.qn-rem-chip-x svg{width:9px;height:9px}
/* P6 — "Remind me" date/time popover. Rides the frosted .qn-more-menu-pop glass.
   Quick presets + a custom datetime-local + optional due toggle. */
.qn-rem-pop{min-width:248px}
.qn-rem-pop .qn-rem-preset{background:transparent;border:none;text-align:left;padding:9px 10px;border-radius:var(--radius-sm);color:var(--text-primary);font-family:inherit;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:10px;transition:background var(--motion-fast)}
.qn-rem-pop .qn-rem-preset svg{width:14px;height:14px;flex:0 0 auto;color:var(--text-secondary,var(--text-primary))}
.qn-rem-pop .qn-rem-preset:hover{background:var(--surface-2)}
.qn-rem-pop .qn-rem-preset .qn-rem-preset-hint{margin-left:auto;font-size:11px;color:var(--text-muted);font-weight:500}
.qn-rem-pop .qn-rem-custom-wrap{padding:6px 8px 2px;display:flex;flex-direction:column;gap:6px}
.qn-rem-pop .qn-rem-custom-label{font-size:11px;color:var(--text-muted);font-weight:600;letter-spacing:.02em}
.qn-rem-pop input[type=datetime-local]{font-family:inherit;font-size:13px;padding:7px 9px;border-radius:var(--radius-sm);border:0.5px solid var(--chrome-border);background:var(--surface-2);color:var(--text-primary);width:100%}
.qn-rem-pop .qn-rem-set-btn{margin-top:2px;background:var(--app-accent);color:#fff;border:none;border-radius:var(--radius-sm);padding:8px 10px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:filter var(--motion-fast),transform var(--motion-fast)}
.qn-rem-pop .qn-rem-set-btn:hover{filter:brightness(1.06)}
.qn-rem-pop .qn-rem-set-btn:active{transform:scale(.97)}
/* P6 — note-row reminder dot (list pane): a small status-toned pill after the title. */
.qn-row-rem{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;color:var(--color-info,#007aff);margin-left:6px;vertical-align:middle}
.qn-row-rem.is-warn{color:var(--color-warning,#ff9500)}
.qn-row-rem.is-over{color:var(--color-error,#ff3b30)}
.qn-row-rem svg{width:10px;height:10px}
/* V77.6 — Apple-style empty state: muted icon at large size + tagline text.
   Matches the editor placeholder treatment for visual consistency. */
.qn-page-empty{padding:60px 24px;text-align:center;font-size:15px;letter-spacing:-.1px;color:var(--text-muted);display:flex;flex-direction:column;align-items:center;gap:12px}
.qn-page-empty .qn-empty-ic{width:40px;height:40px;opacity:.32;color:var(--text-muted)}
/* V77.3 — overflow:hidden + max-width:100% prevents the editor body or any
   pre/code descendant from pushing past the pane's right edge. */
.qn-page-editor{flex:1;display:flex;flex-direction:column;min-width:0;max-width:100%;overflow:hidden;background:var(--card-bg)}
/* V77.3 — Apple Notes-style empty state: larger muted typography, centered. */
.qn-page-editor-placeholder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-muted);font-size:15px;letter-spacing:-.1px;padding:32px;text-align:center;gap:10px}
.qn-page-editor-placeholder .qn-empty-ic{width:36px;height:36px;opacity:.35;color:var(--text-muted)}
/* V81 — Apple Notes toolbar: FLUSH on the editor surface (--qn-toolbar-bg now
   = card-bg), separated from the editor body only by a bottom hairline. This is
   the real Apple Notes look — the format bar is part of the white editor sheet,
   not a contrasting grey slab. (Was a distinct grey tone that clashed.) */
.qn-page-toolbar{height:44px;flex-shrink:0;padding:0 14px;display:flex;align-items:center;gap:2px;border-bottom:0.5px solid var(--chrome-border);background:var(--qn-toolbar-bg,var(--card-bg));overflow:visible;scrollbar-width:none}
.qn-page-toolbar::-webkit-scrollbar{display:none}
/* V77.7 — Mobile toolbar: floating Apple-style pill instead of full-width
   slab. Centered, rounded-pill corners, lifted shadow, sits a few pixels in
   from the screen edges. Matches Apple Mail/Maps/Calendar floating action
   bars. Sticky so it stays in view while scrolling the editor body. */
@media (max-width:640px){
  .qn-page-toolbar{
    height:40px;padding:0 6px;
    margin:6px 0 6px;
    border:none;border-bottom:none;
    border-radius:var(--radius-pill);
    /* V83 — floating mobile format pill on the shared Liquid Glass tokens
       (was a raw blur(12px) + hardcoded rgba shadow stack). */
    background:var(--lg-bg-strong);
    backdrop-filter:var(--lg-refract);
    -webkit-backdrop-filter:var(--lg-refract);
    box-shadow:var(--lg-edge), var(--shadow-e4);
    position:sticky;top:8px;z-index:2;
    gap:3px;
    align-self:center;
    width:auto;
    max-width:100%;
    overflow-x:auto;   /* V81: narrow mobile pill scrolls horizontally (no hover tooltips on touch, so clipping is fine here). Desktop stays overflow:visible so tooltips escape. */
  }
  .qn-page-toolbar .qn-tool, .qn-page-toolbar .qn-popout-action{min-width:32px;height:32px;border-radius:var(--radius-sm)}
  .qn-page-toolbar .qn-tool svg{width:13px;height:13px}
  /* V83 — glass fallback for the mobile format pill. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.qn-page-toolbar{background:var(--surface-2)}}
}
@media (max-width:640px) and (prefers-reduced-transparency:reduce){.qn-page-toolbar{background:var(--surface-2);backdrop-filter:none;-webkit-backdrop-filter:none}}
/* V38b — Restore button for Recently Deleted rows. */
/* V77.3 — Apple-style ghost buttons for Recently Deleted row actions. Was
   showing as bare text in some Safari renders; explicit background +
   stronger border + radius-pill gives it real button chrome that defeats
   cascade strips. */
.qn-page-row-actions{display:flex;gap:6px;margin-top:6px}
.qn-page-row-actions button{background:var(--surface-2);border:0.5px solid var(--chrome-border);color:var(--text-primary);font-size:12px;font-weight:500;padding:4px 12px;border-radius:var(--radius-pill);cursor:pointer;font-family:inherit;letter-spacing:-.1px;transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast)}
.qn-page-row-actions button:hover{background:var(--card-bg)}
.qn-page-row-actions button.danger{color:var(--app-danger)}
.qn-page-row-actions button.danger:hover{background:color-mix(in srgb,var(--app-danger) 10%,var(--surface-2));border-color:var(--app-danger)}
@media (max-width:900px){
  .qn-page-pane{flex-direction:column;box-shadow:none;border-radius:0;background:transparent}
  .qn-page-list{width:100%;max-height:none;flex:1;min-height:0;border-right:none;border-bottom:none;background:transparent}
  /* V77.6 — Mobile Notes header: Apple Reminders/Notes pattern. The "< Lists"
     back chevron is its own row above the large title (32px bold), with the
     "+ New" pill on its own row aligned trailing. Stops the cram of three
     elements competing on a single line. */
  .qn-page-list-head{padding:4px 0 8px;background:transparent;border-bottom:none;flex-wrap:wrap;gap:8px;align-items:center;row-gap:4px}
  .qn-page-back-btn{order:0;flex-basis:100%;font-size:15px;padding:6px 0 2px;color:var(--app-accent)}
  .qn-page-list-title{font-size:32px;font-weight:700;letter-spacing:-.6px;flex:1;min-width:0;order:1;line-height:1.05}
  .qn-page-list-new-wrap{order:2;margin-left:auto;align-self:flex-end}
  .qn-page-list-search{padding:6px 0 10px;background:transparent;border-bottom:none}
}
/* V77.6 — Apple iOS alert-style input modal. Centered, capped width,
   blurred backdrop, two stacked text buttons separated by hairline. Replaces
   window.prompt() so all input flows feel native. */
.rrt-input-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.32);backdrop-filter:blur(8px) saturate(140%);-webkit-backdrop-filter:blur(8px) saturate(140%);display:flex;align-items:center;justify-content:center;z-index:var(--z-top, 10000);animation:rrtInputModalIn var(--motion-fast) var(--ease-out,ease-out)}
@keyframes rrtInputModalIn{from{opacity:0}to{opacity:1}}
.rrt-input-modal{width:min(92vw,320px);background:color-mix(in srgb, var(--card-bg) 92%, transparent);border-radius:22px;padding:22px 20px 0;display:flex;flex-direction:column;gap:6px;box-shadow:0 22px 48px -16px rgba(15,23,42,.32),0 0 0 0.5px rgba(15,23,42,.06);animation:rrtInputModalPop var(--motion-fast) var(--ease-out,ease-out)}
@keyframes rrtInputModalPop{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
/* ── .rt-dialog — premium Apple-maximum centered modal (2026-06-25) ──────────────────
   Replaces the dated iOS-alert (.rrt-input-modal) for Sign + Move. Frosted heavy-blur
   backdrop, solid material card, large radius, depth-e4, bold display title, filled-primary
   + ghost actions, spring pop. Glass discipline: the card is SOLID (content), backdrop is glass. */
.rt-dialog-overlay{position:fixed;inset:0;z-index:var(--z-top,10000);display:flex;align-items:center;justify-content:center;padding:20px;background:color-mix(in srgb,#0b1220 46%,transparent);backdrop-filter:blur(16px) saturate(135%);-webkit-backdrop-filter:blur(16px) saturate(135%);opacity:0;transition:opacity var(--motion-base,220ms) var(--ease-out,ease-out)}
.rt-dialog-overlay.show{opacity:1}
.rt-dialog{width:min(94vw,420px);background:var(--card-bg,var(--surface));color:var(--text-primary);border-radius:24px;box-shadow:var(--shadow-e4),inset 0 1px 0 rgba(255,255,255,.16),0 0 0 .5px color-mix(in srgb,var(--text-primary) 8%,transparent);overflow:hidden;transform:translateY(10px) scale(.96);opacity:0;transition:transform var(--motion-base,220ms) var(--ease-spring,cubic-bezier(.34,1.56,.64,1)),opacity var(--motion-base,220ms) var(--ease-out,ease-out)}
.rt-dialog-overlay.show .rt-dialog{transform:translateY(0) scale(1);opacity:1}
.rt-dialog-head{display:flex;align-items:center;gap:13px;padding:22px 22px 14px}
.rt-dialog-icon{flex:0 0 auto;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:var(--app-accent);background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 18%,var(--card-bg)),color-mix(in srgb,var(--app-accent) 9%,var(--card-bg)));box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 .5px color-mix(in srgb,var(--app-accent) 30%,transparent)}
.rt-dialog-icon svg{width:22px;height:22px}
.rt-dialog-htext{min-width:0}
.rt-dialog-title{font:700 19px/1.15 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;letter-spacing:-.02em;color:var(--text-primary)}
.rt-dialog-sub{font-size:13px;color:var(--text-muted);margin-top:2px;line-height:1.35}
.rt-dialog-fname{font-weight:600;color:var(--text-secondary,var(--text-muted))}
.rt-dialog-body{padding:4px 22px 6px;display:flex;flex-direction:column}
.rt-field-label{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:6px}
.rt-select-wrap{position:relative}
.rt-select{width:100%;height:42px;-webkit-appearance:none;appearance:none;border:.5px solid var(--chrome-border);border-radius:12px;background:var(--surface-2,color-mix(in srgb,var(--text-primary) 4%,var(--card-bg)));color:var(--text-primary);font:500 14px/1 inherit;padding:0 38px 0 13px;cursor:pointer;outline:none;transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
.rt-select:hover{border-color:color-mix(in srgb,var(--app-accent) 30%,var(--chrome-border))}
.rt-select:focus{border-color:color-mix(in srgb,var(--app-accent) 55%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 15%,transparent)}
.rt-select-chev{position:absolute;right:13px;top:50%;transform:translateY(-50%);width:12px;height:8px;color:var(--text-muted);pointer-events:none}
/* action-sheet choice rows (Sign dialog) */
.rt-dialog-choices{padding:6px 16px 4px;display:flex;flex-direction:column;gap:7px}
.rt-choice{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:11px 12px;border:.5px solid var(--chrome-border);border-radius:14px;background:var(--surface-2,color-mix(in srgb,var(--text-primary) 3.5%,var(--card-bg)));cursor:pointer;font-family:inherit;transition:background var(--motion-fast),border-color var(--motion-fast),transform var(--motion-fast),box-shadow var(--motion-fast)}
.rt-choice:hover{background:color-mix(in srgb,var(--app-accent) 8%,var(--card-bg));border-color:color-mix(in srgb,var(--app-accent) 30%,var(--chrome-border));transform:translateY(-1px);box-shadow:var(--shadow-e1)}
.rt-choice:active{transform:scale(.985)}
.rt-choice.is-primary{background:linear-gradient(170deg,color-mix(in srgb,var(--app-accent) 14%,var(--card-bg)),color-mix(in srgb,var(--app-accent) 7%,var(--card-bg)));border-color:color-mix(in srgb,var(--app-accent) 38%,transparent)}
.rt-choice-ic{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 14%,transparent)}
.rt-choice.is-primary .rt-choice-ic{background:var(--app-accent);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.rt-choice-ic svg{width:18px;height:18px}
.rt-choice-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rt-choice-title{font-size:14.5px;font-weight:650;color:var(--text-primary);letter-spacing:-.01em}
.rt-choice-sub{font-size:12px;color:var(--text-muted);line-height:1.3}
.rt-choice-chev{flex:0 0 auto;color:var(--text-muted);opacity:.5;transition:transform var(--motion-fast),opacity var(--motion-fast)}
.rt-choice-chev svg{width:14px;height:14px}
.rt-choice:hover .rt-choice-chev{opacity:.9;transform:translateX(2px)}
/* footer action bar */
.rt-dialog-foot{display:flex;gap:9px;justify-content:flex-end;padding:14px 22px 20px}
.rt-dialog-sheet .rt-dialog-foot{justify-content:center;padding-top:8px}
.rt-dialog-btn{height:40px;padding:0 20px;border-radius:11px;font:650 14px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;cursor:pointer;border:.5px solid transparent;transition:background var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast)}
.rt-dialog-btn:active{transform:scale(.96)}
.rt-dialog-primary{background:linear-gradient(180deg,color-mix(in srgb,var(--app-accent) 92%,#fff),var(--app-accent));color:#fff;box-shadow:var(--shadow-e1),inset 0 1px 0 rgba(255,255,255,.3)}
.rt-dialog-primary:hover{filter:brightness(1.05)}
.rt-dialog-ghost{background:var(--surface-2,color-mix(in srgb,var(--text-primary) 5%,var(--card-bg)));color:var(--text-secondary,var(--text-primary));border-color:var(--chrome-border)}
.rt-dialog-ghost:hover{background:color-mix(in srgb,var(--text-primary) 9%,var(--card-bg));color:var(--text-primary)}
@media (prefers-reduced-motion:reduce){.rt-dialog,.rt-dialog-overlay{transition-duration:1ms}.rt-dialog{transform:none}}
/* 2026-06-20 — N-line balanced manual journal-entry modal. Wider than the default iOS
   dialog; an account/debit/credit grid with add/remove lines + a live Σdebit/Σcredit/
   difference balance bar (post enabled only when difference = 0). */
.gl-je-modal{width:min(94vw,560px)!important;text-align:left}
.gl-je-modal .rrt-input-modal-subtitle{text-align:left}
.gl-je-memo-wrap{display:flex;flex-direction:column;gap:4px;margin:10px 0 4px}
.gl-je-memo-l{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
.gl-je-memo{height:36px;border:.5px solid var(--chrome-border);border-radius:10px;background:var(--surface-2,var(--chrome-bg));padding:0 11px;font-size:14px;color:var(--text-primary);font-family:inherit;outline:none;transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
.gl-je-memo:focus{border-color:color-mix(in srgb,var(--app-accent) 50%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 15%,transparent)}
.gl-je-grid{margin-top:8px}
.gl-je-grid-head{display:grid;grid-template-columns:1fr 110px 110px 32px;gap:8px;padding:0 2px 5px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
.gl-je-grid-head .gl-je-num{text-align:right}
.gl-je-rows{display:flex;flex-direction:column;gap:6px;max-height:38vh;overflow-y:auto}
.gl-je-row{display:grid;grid-template-columns:1fr 110px 110px 32px;gap:8px;align-items:center}
.gl-je-acct,.gl-je-amt{height:36px;border:.5px solid var(--chrome-border);border-radius:10px;background:var(--card-bg);padding:0 10px;font-size:13.5px;color:var(--text-primary);font-family:inherit;outline:none;transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
.gl-je-acct{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238e8e93'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;padding-right:24px}
.gl-je-amt{text-align:right;font-variant-numeric:tabular-nums}
.gl-je-acct:focus,.gl-je-amt:focus{border-color:color-mix(in srgb,var(--app-accent) 50%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 15%,transparent)}
.gl-je-del{width:32px;height:32px;border:none;background:transparent;border-radius:9px;color:var(--text-muted);cursor:pointer;display:grid;place-items:center;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast)}
.gl-je-del svg{width:14px;height:14px}
.gl-je-del:hover{background:color-mix(in srgb,var(--color-error) 12%,transparent);color:var(--color-error)}
.gl-je-del:active{transform:scale(.9)}
.gl-je-addline{margin-top:8px;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:.5px dashed color-mix(in srgb,var(--app-accent) 40%,var(--chrome-border));background:color-mix(in srgb,var(--app-accent) 6%,transparent);color:var(--app-accent);border-radius:999px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;transition:background var(--motion-fast),transform var(--motion-fast)}
.gl-je-addline svg{width:12px;height:12px}
.gl-je-addline:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
.gl-je-addline:active{transform:scale(.97)}
.gl-je-balance{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;padding:11px 12px;border-radius:12px;background:var(--surface-2,var(--chrome-bg));box-shadow:var(--bevel-top),inset 0 0 0 .5px var(--chrome-border)}
.gl-je-bal-cell{display:flex;flex-direction:column;gap:2px}
.gl-je-bal-l{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
.gl-je-bal-v{font-size:16px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.gl-je-bal-diff{position:relative}
.gl-je-bal-diff.balanced .gl-je-bal-v{color:var(--color-success)}
.gl-je-bal-diff.off .gl-je-bal-v{color:var(--color-error)}
.gl-je-bal-diff.balanced .gl-je-bal-l::after{content:" ✓";color:var(--color-success)}
.rrt-input-modal-ok:disabled{opacity:.4;cursor:default}
@media (max-width:520px){.gl-je-grid-head,.gl-je-row{grid-template-columns:1fr 84px 84px 30px}.gl-je-balance{grid-template-columns:1fr}}
/* G3-W4 — named schedule-baseline library manager (list + rename + A/B compare). Floating
   wide modal on the matte; rounded rows that don't hard-lift inside the scroll container. */
.schb-lib-modal{width:min(94vw,620px)!important;text-align:left;padding-bottom:0}
.schb-lib-modal .rrt-input-modal-subtitle{text-align:left}
.schb-lib-list{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow-y:auto;margin:12px 0 4px;padding:2px}
.schb-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--surface-2,var(--chrome-bg));box-shadow:inset 0 0 0 .5px var(--chrome-border);transition:box-shadow var(--motion-fast),background var(--motion-fast)}
.schb-row:hover{background:color-mix(in srgb,var(--app-accent) 5%,var(--surface-2,var(--chrome-bg)))}
.schb-row.is-active{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--app-accent) 55%,transparent)}
.schb-row-main{flex:1;min-width:0}
.schb-row-name{font-weight:700;font-size:14px;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.schb-row-name .schb-num{font-weight:600;color:var(--text-muted);font-size:12px}
.schb-active-pill{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:2px 9px;border-radius:999px;background:color-mix(in srgb,var(--app-accent) 16%,transparent);color:var(--app-accent)}
.schb-row-sub{font-size:12px;color:var(--text-muted);margin-top:3px;font-variant-numeric:tabular-nums}
.schb-row-acts{display:flex;gap:6px;flex:0 0 auto}
.schb-act{width:32px;height:32px;border:none;border-radius:10px;background:transparent;color:var(--text-muted);cursor:pointer;display:grid;place-items:center;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast)}
.schb-act svg{width:14px;height:14px}
.schb-act:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent)}
.schb-act:active{transform:scale(.9)}
.schb-act.sel-a{box-shadow:inset 0 0 0 1.5px var(--app-accent);color:var(--app-accent)}
.schb-act.sel-b{box-shadow:inset 0 0 0 1.5px var(--color-success,#34c759);color:var(--color-success,#34c759)}
.schb-cmp-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 12px;margin-top:4px;border-radius:12px;background:var(--surface-2,var(--chrome-bg));box-shadow:inset 0 0 0 .5px var(--chrome-border);font-size:12.5px;color:var(--text-muted)}
.schb-cmp-bar .schb-cmp-go{margin-left:auto}
.schb-diff-tbl{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:6px}
.schb-diff-tbl th{text-align:left;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);padding:6px 8px;border-bottom:.5px solid var(--chrome-border)}
.schb-diff-tbl td{padding:7px 8px;border-bottom:.5px solid color-mix(in srgb,var(--chrome-border) 50%,transparent);font-variant-numeric:tabular-nums}
.schb-diff-tbl td.num{text-align:right}
.schb-slip{color:var(--color-error)}.schb-gain{color:var(--color-success,#34c759)}
/* G3-W4 — delay-narrative auto-draft editor (editable prose + live cause-breakdown chart). */
.dln-modal{width:min(94vw,640px)!important;text-align:left;padding-bottom:0}
.dln-modal .rrt-input-modal-subtitle{text-align:left}
.dln-stats{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 4px}
.dln-stat{flex:1;min-width:96px;padding:10px 12px;border-radius:12px;background:var(--surface-2,var(--chrome-bg));box-shadow:inset 0 0 0 .5px var(--chrome-border)}
.dln-stat-l{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
.dln-stat-v{font-size:20px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text-primary);margin-top:2px}
.dln-chart{margin:14px 0 4px}.dln-chart-h{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:8px}
.dln-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:7px;font-size:12.5px}
.dln-bar-lbl{width:96px;flex:0 0 auto;font-weight:600;text-transform:capitalize;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dln-bar-track{flex:1;height:14px;border-radius:999px;background:rgba(127,127,127,.12);overflow:hidden}
.dln-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--app-accent),color-mix(in srgb,var(--app-accent) 55%,#7c5bff));transition:width .4s ease}
.dln-bar-val{width:62px;flex:0 0 auto;text-align:right;color:var(--text-muted);font-variant-numeric:tabular-nums}
.dln-prose{width:100%;min-height:200px;max-height:40vh;resize:vertical;border:.5px solid var(--chrome-border);border-radius:12px;background:var(--card-bg);color:var(--text-primary);padding:12px 14px;font:inherit;font-size:13.5px;line-height:1.55;outline:none;margin-top:6px;transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
.dln-prose:focus{border-color:color-mix(in srgb,var(--app-accent) 50%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 15%,transparent)}
/* W5 — Forensic Delay/Claim Engine (Claim Engine panel + windows/TIA modals). Floating .rt-panel-solid
   on the matte (via _schedPanel); a real-data snapshot list + slip-by-cause table + TIA cascade table.
   No colored edge-strips — the baseline state signals via a pill + a soft inset fill, never an edge bar. */
.fce-capture{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.fce-cap-date{display:flex;flex-direction:column;gap:4px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
.fce-cap-date input,.fce-cap-date select{font:inherit;font-size:13px;padding:7px 10px;border-radius:10px;border:.5px solid var(--chrome-border);background:var(--card-bg);color:var(--text-primary);outline:none;transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
.fce-cap-date input:focus,.fce-cap-date select:focus{border-color:color-mix(in srgb,var(--app-accent) 50%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 14%,transparent)}
.fce-cap-btn{margin:0}
.fce-snap-list{display:flex;flex-direction:column;gap:6px;margin:4px 0 12px}
.fce-snap-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;border-radius:12px;background:var(--surface-2,var(--chrome-bg));box-shadow:inset 0 0 0 .5px var(--chrome-border);transition:box-shadow var(--motion-fast),transform var(--motion-fast)}
.fce-snap-row:hover{box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--app-accent) 38%,var(--chrome-border)),var(--shadow-e1,0 2px 8px rgba(0,0,0,.08))}
.fce-snap-row.is-base{background:color-mix(in srgb,var(--app-accent) 8%,var(--surface-2,var(--chrome-bg)));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--app-accent) 30%,transparent)}
.fce-snap-main{min-width:0}
.fce-snap-date{font-size:13.5px;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:8px}
.fce-base-badge{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:999px;background:color-mix(in srgb,var(--app-accent) 16%,transparent);color:var(--app-accent)}
.fce-snap-meta{font-size:11.5px;color:var(--text-secondary);margin-top:2px}
.fce-snap-actions{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.fce-icon-btn{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--text-muted);border-radius:9px;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
.fce-icon-btn svg{width:15px;height:15px}
.fce-icon-btn:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent)}
.fce-icon-btn.fce-del:hover{background:color-mix(in srgb,var(--color-error,#d33) 12%,transparent);color:var(--color-error,#d33)}
.fce-actions{display:flex;flex-direction:column;gap:8px}
.fce-actions .cpm-whatif-btn{margin:0}
.fce-modal{width:min(95vw,680px)!important;text-align:left;padding-bottom:0}
.fce-modal .rrt-input-modal-title,.fce-modal .rrt-input-modal-subtitle{text-align:left}
.fce-win-pick{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin:14px 0 12px}
.fce-win-arrow{font-size:18px;color:var(--text-muted);padding-bottom:7px}
.fce-win-run,.fce-tia-run{margin:0}
.fce-tia-run{margin-top:12px;width:100%}
.fce-win-head{font-size:12.5px;font-weight:700;color:var(--text-secondary);font-variant-numeric:tabular-nums;margin:8px 0 4px}
.fce-tia-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:14px 0 4px}
.fce-fld{display:flex;flex-direction:column;gap:5px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
.fce-fld select,.fce-fld input{font:inherit;font-size:13px;padding:8px 10px;border-radius:10px;border:.5px solid var(--chrome-border);background:var(--card-bg);color:var(--text-primary);outline:none;transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
.fce-fld select:focus,.fce-fld input:focus{border-color:color-mix(in srgb,var(--app-accent) 50%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 14%,transparent)}
.fce-evidence{font-size:12px;color:var(--text-secondary);line-height:1.5;margin:10px 0;padding:9px 12px;border-radius:11px;background:var(--surface-2,var(--chrome-bg));box-shadow:inset 0 0 0 .5px var(--chrome-border)}
.fce-table{width:100%;border-collapse:collapse;margin-top:10px;font-size:12.5px}
.fce-table th{text-align:left;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);padding:6px 8px;border-bottom:.5px solid var(--chrome-border)}
.fce-table td{padding:7px 8px;border-bottom:.5px solid color-mix(in srgb,var(--chrome-border) 55%,transparent);vertical-align:middle}
.fce-table tbody tr:last-child td{border-bottom:none}
.fce-td-name{font-weight:600;color:var(--text-primary)}
.fce-td-slip{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.fce-slip-bad{color:var(--color-error,#c0392b)}
.fce-slip-good{color:var(--color-success,#15803d)}
.fce-td-cause{color:var(--text-secondary)}
.fce-cause-tag{display:inline-block;font-size:10.5px;font-weight:700;text-transform:capitalize;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent)}
.fce-crit-tag{display:inline-block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:2px 7px;border-radius:999px;background:color-mix(in srgb,var(--color-error,#d33) 13%,transparent);color:var(--color-error,#c0392b);margin-left:6px}
.fce-crit-tag.muted{background:rgba(127,127,127,.12);color:var(--text-muted)}
/* Forensic claim export — editable narrative + branded-PDF action, native to the .fce modal. */
.fce-export{margin-top:14px;padding-top:13px;border-top:.5px solid color-mix(in srgb,var(--chrome-border) 60%,transparent)}
.fce-export-lbl{display:block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:6px}
.fce-export-lbl span{font-weight:600;text-transform:none;letter-spacing:0;color:color-mix(in srgb,var(--text-muted) 80%,transparent)}
.fce-export-prose{min-height:112px}
.fce-export-btn{margin-top:10px}
@media (max-width:560px){.fce-tia-grid{grid-template-columns:1fr}.fce-win-pick{flex-direction:column;align-items:stretch}.fce-win-arrow{display:none}}
/* ── Flowline / Takt scheduling (Tier-2, 2026-06-24). Floating .rt-panel-solid (via _schedPanel) on the
   matte: a real-data SVG flowline chart (location rows × time axis; each stage a diagonal polyline),
   a takt grid table, a location-tree CRUD editor + a stage→location assignment row. Tokens-only,
   all-theme; NO colored edge-strips (state signals via fill/pill/icon); rounded hovers; collisions
   highlighted via a soft inset tint + a warning pill, never an edge bar. */
.fl-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.fl-seg{display:inline-flex;background:color-mix(in srgb,var(--app-accent) 7%,var(--card-bg));border:.5px solid var(--chrome-border);border-radius:11px;padding:2px;gap:2px}
.fl-seg button{font:inherit;font-size:12px;font-weight:650;padding:6px 13px;border:none;background:transparent;color:var(--text-secondary);border-radius:9px;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
.fl-seg button.active{background:var(--card-bg);color:var(--app-accent);box-shadow:var(--shadow-e1)}
.fl-seg button:not(.active):hover{color:var(--text-primary)}
.fl-spacer{flex:1 1 auto;min-width:8px}
.fl-collide-pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:750;padding:5px 11px;border-radius:999px;background:color-mix(in srgb,var(--color-warning,#d9822b) 15%,transparent);color:var(--color-warning,#b45309)}
.fl-collide-pill svg{width:13px;height:13px;fill:currentColor}
.fl-collide-pill.clean{background:color-mix(in srgb,var(--color-success,#15803d) 13%,transparent);color:var(--color-success,#15803d)}
.fl-mini-btn{font:inherit;font-size:12px;font-weight:650;padding:6px 12px;border-radius:10px;border:.5px solid var(--chrome-border);background:var(--card-bg);color:var(--text-primary);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast),border-color var(--motion-fast)}
.fl-mini-btn svg{width:13px;height:13px;fill:currentColor}
.fl-mini-btn:hover{border-color:color-mix(in srgb,var(--app-accent) 45%,var(--chrome-border));box-shadow:var(--shadow-e2)}
.fl-mini-btn:active{transform:scale(.96)}
.fl-mini-btn.primary{background:var(--app-accent);color:#fff;border-color:transparent}
/* SVG flowline chart — location rows on Y, time on X, each stage a diagonal polyline across the
   locations it visits. Scrolls horizontally on overflow; the row labels stay in a sticky gutter. */
.fl-chart-wrap{border:.5px solid var(--chrome-border);border-radius:14px;background:var(--card-bg);overflow:hidden;margin-top:4px}
.fl-chart-scroll{overflow-x:auto;overflow-y:hidden}
.fl-chart-svg{display:block}
.fl-grid-line{stroke:color-mix(in srgb,var(--chrome-border) 70%,transparent);stroke-width:1}
.fl-row-band{fill:color-mix(in srgb,var(--app-accent) 3%,transparent)}
.fl-row-band.alt{fill:transparent}
.fl-row-label{font-size:11.5px;font-weight:650;fill:var(--text-primary)}
.fl-row-sub{font-size:9.5px;fill:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.fl-axis-label{font-size:9.5px;fill:var(--text-muted);font-weight:600}
.fl-today-line{stroke:var(--color-error,#d33);stroke-width:1.5;stroke-dasharray:4 3;opacity:.7}
.fl-stage-line{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke-width var(--motion-fast),opacity var(--motion-fast)}
.fl-stage-node{stroke:var(--card-bg);stroke-width:1.5;transition:r var(--motion-fast)}
.fl-seg-rect{rx:4;opacity:.9;transition:opacity var(--motion-fast)}
.fl-collision-mark{fill:none;stroke:var(--color-warning,#d9822b);stroke-width:2;stroke-dasharray:3 2;rx:5}
.fl-collision-zone{fill:color-mix(in srgb,var(--color-warning,#d9822b) 16%,transparent)}
.fl-chart-stage:hover .fl-stage-line{stroke-width:4}
.fl-chart-stage:hover .fl-stage-node{r:6}
.fl-legend{display:flex;flex-wrap:wrap;gap:5px 14px;padding:11px 14px;border-top:.5px solid color-mix(in srgb,var(--chrome-border) 60%,transparent)}
.fl-leg-item{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-secondary);font-weight:600}
.fl-leg-swatch{width:14px;height:3px;border-radius:2px;flex:none}
.fl-leg-dot{width:9px;height:9px;border-radius:50%;flex:none}
/* Takt grid table — locations × stages; each cell shows the window the stage occupies that location,
   collision cells get a soft inset warning tint (no edge bar). */
.fl-takt-wrap{overflow-x:auto;border:.5px solid var(--chrome-border);border-radius:14px;background:var(--card-bg);margin-top:4px}
.fl-takt{width:100%;border-collapse:collapse;font-size:12px}
.fl-takt th,.fl-takt td{padding:8px 10px;border-bottom:.5px solid color-mix(in srgb,var(--chrome-border) 55%,transparent);text-align:left;vertical-align:middle}
.fl-takt thead th{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);position:sticky;top:0;background:var(--card-bg);z-index:1}
.fl-takt tbody tr:last-child td{border-bottom:none}
.fl-takt-loc{font-weight:650;color:var(--text-primary);white-space:nowrap}
.fl-takt-loc .fl-loc-depth{color:var(--text-muted);font-weight:600}
.fl-takt-cell{font-variant-numeric:tabular-nums;border-radius:8px}
.fl-takt-cell.has{background:color-mix(in srgb,var(--app-accent) 8%,transparent)}
.fl-takt-cell.collide{background:color-mix(in srgb,var(--color-warning,#d9822b) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-warning,#d9822b) 40%,transparent)}
.fl-takt-stage{font-weight:600;color:var(--text-primary);font-size:11.5px}
.fl-takt-dates{color:var(--text-muted);font-size:10.5px;white-space:nowrap}
.fl-takt-empty{color:var(--text-muted)}
/* Location-tree CRUD editor */
.fl-tree{margin-top:6px;display:flex;flex-direction:column;gap:3px}
.fl-tree-row{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:11px;background:color-mix(in srgb,var(--app-accent) 4%,var(--card-bg));border:.5px solid color-mix(in srgb,var(--chrome-border) 60%,transparent);transition:background var(--motion-fast),box-shadow var(--motion-fast)}
.fl-tree-row:hover{background:color-mix(in srgb,var(--app-accent) 8%,var(--card-bg));box-shadow:var(--shadow-e1)}
.fl-tree-swatch{width:11px;height:11px;border-radius:50%;flex:none;border:1px solid color-mix(in srgb,var(--text-muted) 30%,transparent)}
.fl-tree-name{font-weight:600;color:var(--text-primary);font-size:13px;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl-tree-meta{font-size:10.5px;color:var(--text-muted);font-weight:600}
.fl-tree-actions{display:flex;gap:4px;flex:none}
.fl-icon-btn{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;border:.5px solid transparent;background:transparent;color:var(--text-muted);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
.fl-icon-btn svg{width:14px;height:14px;fill:currentColor}
.fl-icon-btn:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent)}
.fl-icon-btn.danger:hover{background:color-mix(in srgb,var(--color-error,#d33) 12%,transparent);color:var(--color-error,#c0392b)}
.fl-add-row{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;margin-top:10px;padding-top:11px;border-top:.5px solid color-mix(in srgb,var(--chrome-border) 55%,transparent)}
.fl-field{display:flex;flex-direction:column;gap:4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
.fl-field input,.fl-field select{font:inherit;font-size:13px;padding:7px 10px;border-radius:10px;border:.5px solid var(--chrome-border);background:var(--card-bg);color:var(--text-primary);outline:none;transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
.fl-field input:focus,.fl-field select:focus{border-color:color-mix(in srgb,var(--app-accent) 50%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 14%,transparent)}
.fl-field input[type=color]{padding:3px;width:42px;height:34px;cursor:pointer}
.fl-assign-list{margin-top:6px;display:flex;flex-direction:column;gap:3px}
.fl-assign-row{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:11px;background:color-mix(in srgb,var(--app-accent) 4%,var(--card-bg));border:.5px solid color-mix(in srgb,var(--chrome-border) 60%,transparent);transition:background var(--motion-fast),box-shadow var(--motion-fast)}
.fl-assign-row:hover{background:color-mix(in srgb,var(--app-accent) 8%,var(--card-bg));box-shadow:var(--shadow-e1)}
.fl-assign-dot{width:10px;height:3px;border-radius:2px;flex:none}
.fl-assign-main{flex:1 1 auto;min-width:0}
.fl-assign-stage{font-weight:600;color:var(--text-primary);font-size:12.5px}
.fl-assign-where{font-size:10.5px;color:var(--text-muted);font-weight:600}
.fl-assign-where .fl-derived{font-style:italic}
.fl-note{font-size:11.5px;color:var(--text-secondary);line-height:1.55;margin-top:11px}
.fl-empty{text-align:center;padding:26px 14px;color:var(--text-muted)}
.fl-empty svg{width:34px;height:34px;fill:color-mix(in srgb,var(--app-accent) 40%,var(--text-muted));margin-bottom:8px}
.fl-empty-title{font-weight:700;color:var(--text-secondary);font-size:14px;margin-bottom:3px}
.fl-empty-sub{font-size:12px;max-width:380px;margin:0 auto}
.fl-subhead{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin:16px 0 4px}
@media (prefers-reduced-motion:reduce){.fl-mini-btn,.fl-stage-line,.fl-stage-node,.fl-seg-rect{transition:none}}
@media (max-width:560px){.fl-add-row{flex-direction:column;align-items:stretch}.fl-add-row .fl-field{width:100%}.fl-field input,.fl-field select{width:100%}}
/* Tier-2 — ACTIVITY↔RECORD REFERENCES + schedule-conflict cockpit. Stage→record link chips on the
   stage detail surface + a project-level Schedule Risks panel (grouped critical/warning). Floating
   .rt-panel-solid (via _schedPanel). Severity signals via a FILL pill + an inset tint, NEVER a colored
   edge-strip (DESIGN.md). Rounded hover lift on each chip; band cells stay contained. */
.srf-group{margin:4px 0 12px}
.srf-group-head{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);display:flex;align-items:center;gap:7px;margin:10px 0 6px}
.srf-group-head .srf-count{font-variant-numeric:tabular-nums;padding:1px 7px;border-radius:999px;font-size:10px;font-weight:800}
.srf-group-head.is-crit .srf-count{background:color-mix(in srgb,var(--color-error,#d33) 14%,transparent);color:var(--color-error,#c0392b)}
.srf-group-head.is-warn .srf-count{background:color-mix(in srgb,var(--color-warning,#d97706) 16%,transparent);color:var(--color-warning,#b45309)}
.srf-list{display:flex;flex-direction:column;gap:6px}
.srf-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:9px 11px;border-radius:12px;background:var(--surface-2,var(--chrome-bg));box-shadow:inset 0 0 0 .5px var(--chrome-border);transition:box-shadow var(--motion-fast),transform var(--motion-fast)}
.srf-row:hover{box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--app-accent) 38%,var(--chrome-border)),var(--shadow-e1,0 2px 8px rgba(0,0,0,.08))}
.srf-row.sev-critical{background:color-mix(in srgb,var(--color-error,#d33) 7%,var(--surface-2,var(--chrome-bg)));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-error,#d33) 22%,transparent)}
.srf-row.sev-warning{background:color-mix(in srgb,var(--color-warning,#d97706) 8%,var(--surface-2,var(--chrome-bg)));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-warning,#d97706) 24%,transparent)}
.srf-main{min-width:0;flex:1}
.srf-title{font-size:13px;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.srf-kind{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:999px;background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent)}
.srf-sev{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:999px}
.srf-sev svg{width:11px;height:11px}
.srf-sev.sev-safe{background:color-mix(in srgb,var(--color-success,#15803d) 13%,transparent);color:var(--color-success,#15803d)}
.srf-sev.sev-warning{background:color-mix(in srgb,var(--color-warning,#d97706) 16%,transparent);color:var(--color-warning,#b45309)}
.srf-sev.sev-critical{background:color-mix(in srgb,var(--color-error,#d33) 14%,transparent);color:var(--color-error,#c0392b)}
.srf-meta{font-size:11.5px;color:var(--text-secondary);margin-top:3px;line-height:1.45}
.srf-stage-link{color:var(--app-accent);font-weight:600;cursor:pointer;background:none;border:0;padding:0;font:inherit;font-size:11.5px}
.srf-stage-link:hover{text-decoration:underline}
.srf-actions{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.srf-add{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.srf-add .cpm-whatif-btn{margin:0}
.rrt-input-modal-title{font-size:17px;font-weight:600;color:var(--text-primary);letter-spacing:-.2px;text-align:center;line-height:1.2}
/* §2 — sign/save popup: a long filename used to overflow the title + flash. Truncate the
   filename to a basename ellipsis (hover shows the full name) so the modal never blows out. */
.rrt-fname-ellip{display:inline-block;max-width:min(62vw,360px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.rrt-input-modal-subtitle{font-size:13px;color:var(--text-secondary);text-align:center;letter-spacing:-.05px;line-height:1.35}
.rrt-input-modal-input{margin-top:14px;width:100%;box-sizing:border-box;padding:11px 16px;font-size:16px;font-family:inherit;color:var(--text-primary);background:var(--surface-2);border:none;border-radius:var(--radius-pill);outline:none;transition:box-shadow var(--motion-fast)}
.rrt-input-modal-input:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 22%, transparent);border-color:var(--app-accent)}
/* A3 dialog foundation (2026-06-10) — form / picker / info modals on the rrt-input-modal base. */
.rrt-form-modal,.rrt-pick-modal,.rrt-info-modal{width:min(94vw,400px);text-align:left}
.rrt-form-modal .rrt-input-modal-title,.rrt-pick-modal .rrt-input-modal-title,.rrt-info-modal .rrt-input-modal-title{text-align:left}
.rrt-form-modal .rrt-input-modal-subtitle,.rrt-pick-modal .rrt-input-modal-subtitle{text-align:left}
.rrt-fm-body{margin-top:14px;display:flex;flex-direction:column;gap:13px;max-height:min(56vh,440px);overflow-y:auto;padding-right:2px}
.rrt-fm-field{display:flex;flex-direction:column;gap:5px}
/* Assembly editor — wider modal + a component-line editor grid (desc · qty · unit · $ · mk% · total · ×) */
.ae-editor{width:min(96vw,620px)}
.ae-lines-h{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;font-weight:700;color:var(--text-secondary);margin-top:4px}
.ae-lines-total{font-weight:600;color:var(--text-muted);font-variant-numeric:tabular-nums}
.ae-lines{display:flex;flex-direction:column;gap:6px}
.ae-lines-empty{padding:12px 4px;font-size:12.5px}
.ae-line{display:grid;grid-template-columns:1fr 56px 50px 72px 52px auto 24px;gap:6px;align-items:center}
.ae-line .rrt-fm-input{height:32px;font-size:12.5px;padding:4px 8px}
.ae-l-num{text-align:right}
.ae-l-total{font-size:12px;font-variant-numeric:tabular-nums;color:var(--text-primary);text-align:right;white-space:nowrap;min-width:64px}
.ae-l-del{width:24px;height:24px;border:0;background:transparent;color:var(--text-muted);font-size:17px;line-height:1;border-radius:7px;cursor:pointer;transition:background .14s,color .14s}
.ae-l-del:hover{background:color-mix(in srgb,var(--color-danger,#d33) 12%,transparent);color:var(--color-danger,#d33)}
.ae-addline{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;border:0;background:color-mix(in srgb,var(--app-accent) 9%,transparent);color:var(--app-accent);font-size:12px;font-weight:600;padding:6px 11px;border-radius:9px;cursor:pointer;transition:background .14s}
.ae-addline:hover{background:color-mix(in srgb,var(--app-accent) 16%,transparent)}
.ae-addline .ic{width:13px;height:13px}
.ae-actions{display:flex;align-items:center;gap:8px}
.ae-delete{color:var(--color-danger,#d33);background:transparent;border:.5px solid color-mix(in srgb,var(--color-danger,#d33) 30%,transparent)}
.ae-delete:hover{background:color-mix(in srgb,var(--color-danger,#d33) 10%,transparent)}
@media (max-width:560px){.ae-line{grid-template-columns:1fr 50px 64px 24px;}.ae-line .ae-l-unit,.ae-line .ae-l-mk,.ae-line .ae-l-total{display:none}}
.rrt-fm-label{font-size:12px;font-weight:600;color:var(--text-secondary);letter-spacing:.01em}
.rrt-fm-req{color:var(--color-error,#d6453a)}
.rrt-fm-input{width:100%;box-sizing:border-box;padding:10px 13px;font-size:15px;font-family:inherit;color:var(--text-primary);background:var(--surface-2);border:.5px solid var(--chrome-border);border-radius:12px;outline:none;transition:box-shadow var(--motion-fast),border-color var(--motion-fast)}
.rrt-fm-input:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 20%,transparent);border-color:var(--app-accent)}
.rrt-fm-textarea{resize:vertical;min-height:64px;line-height:1.4;border-radius:14px}
select.rrt-fm-input{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' d='M3 4.5L6 7.5 9 4.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.rrt-fm-help{font-size:11px;color:var(--text-muted);letter-spacing:.01em}
.rrt-fm-invalid{border-color:var(--color-error,#d6453a)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-error,#d6453a) 16%,transparent)!important}
.rrt-fm-err{margin-top:10px;font-size:12px;color:var(--color-error,#d6453a);font-weight:600}
.rrt-input-modal-ok.is-danger{color:var(--color-error,#d6453a)}
/* picker */
.rrt-pick-list{margin-top:12px;display:flex;flex-direction:column;gap:2px;max-height:min(52vh,380px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.rrt-pick-search{margin-top:12px}
.rrt-pick-row{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:left;padding:10px 12px;border:0;background:transparent;border-radius:10px;cursor:pointer;font:inherit;color:var(--text-primary)}
.rrt-pick-row:hover{background:var(--hover-overlay,rgba(0,0,0,.05))}
.rrt-pick-row-l{font-size:14px;font-weight:600}
.rrt-pick-row-s{font-size:12px;color:var(--text-muted)}
.rrt-pick-empty{padding:20px 12px;text-align:center;color:var(--text-muted);font-size:13px}
/* P4 cost-code picker — "+ Add to library" chip + selected-row highlight (built on the A3 picker) */
.cc-pick-chipwrap:empty{display:none}
.cc-pick-chipwrap{margin-top:10px}
.cc-pick-chip{display:flex;align-items:center;gap:7px;width:100%;text-align:left;padding:10px 12px;border:0;border-radius:10px;cursor:pointer;font:inherit;font-size:13.5px;font-weight:600;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 12%,transparent);transition:background var(--motion-fast)}
.cc-pick-chip:hover{background:color-mix(in srgb,var(--app-accent) 20%,transparent)}
.cc-pick-row.is-current{background:color-mix(in srgb,var(--app-accent) 10%,transparent)}
.cc-trigger{display:flex;align-items:center;text-align:left;cursor:pointer;width:100%}
.cc-trigger.is-disabled{cursor:default;opacity:.6}
.cc-trigger-ph{color:var(--text-muted)}
.pbi-cc-pill{display:inline-block;padding:1px 7px;border-radius:6px;font-size:11px;font-weight:600;color:var(--text-secondary);background:var(--surface-2)}
.pbi-cc-pill.is-auto{color:var(--text-muted);background:color-mix(in srgb,var(--text-muted) 12%,transparent);font-weight:500}
/* P7 — cost-code threshold admin panel */
/* Cost-code Thresholds (2026-06-17 📘 — layout rework). Org-default lives in a contained sub-card
   with a proper aligned input grid + a quiet caption; per-code overrides are a clearly separated block. */
/* 2026-07-02 📘 — Pricing Library admin summary: live stat tiles + recent-pricing peek + division chips. */
.plib-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:16px}
.plib-stat{background:var(--card-bg);border:0.5px solid color-mix(in srgb,var(--text-primary) 9%,transparent);border-radius:12px;padding:12px 14px}
.plib-stat-n{font-size:22px;font-weight:800;letter-spacing:-.5px;color:var(--text-primary);line-height:1}
.plib-stat-l{font-size:11.5px;font-weight:600;color:var(--text-secondary);margin-top:4px}
.plib-stat-s{font-size:10.5px;color:var(--text-muted);margin-top:2px}
/* C2 — cost-code manager (list/add/rename/archive/delete inside the Pricing Library panel). */
.cc-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.cc-searchwrap{position:relative;flex:1 1 220px;min-width:180px}
.cc-searchic{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--text-muted);pointer-events:none}
.cc-search{width:100%;height:36px;padding:0 12px 0 33px;font-size:13px;color:var(--text-primary);background:var(--input-bg,var(--card-bg));border:.5px solid var(--chrome-border);border-radius:var(--radius-md,10px);box-shadow:var(--shadow-e1)}
.cc-search:focus{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 45%,transparent)}
.cc-arch-toggle{font-size:12px;color:var(--text-muted);display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap}
.cc-add{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.cc-add-code{flex:0 0 160px;min-width:120px}
.cc-add-name{flex:1 1 240px;min-width:180px}
.cc-add input{height:36px;padding:0 12px;font-size:13px;color:var(--text-primary);background:var(--input-bg,var(--card-bg));border:.5px solid var(--chrome-border);border-radius:var(--radius-md,10px);box-shadow:var(--shadow-e1)}
.cc-add input:focus{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 45%,transparent)}
.cc-add-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 15px;font-size:12.5px;font-weight:600;font-family:inherit;color:#fff;background:var(--app-accent);border:none;border-radius:var(--radius-md,10px);cursor:pointer;transition:filter var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.cc-add-btn:hover{filter:brightness(1.05)}
.cc-add-btn:active{transform:scale(.97)}
.cc-add-btn svg{width:12px;height:12px}
.cc-list{display:flex;flex-direction:column;gap:14px;max-height:420px;overflow-y:auto}
.cc-div-h{font-size:10.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;padding-bottom:5px;border-bottom:.5px solid color-mix(in srgb,var(--text-primary) 7%,transparent)}
.cc-row{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:9px;transition:background var(--motion-fast) var(--ease-out)}
.cc-row:hover{background:color-mix(in srgb,var(--text-primary) 4%,transparent)}
.cc-row.is-archived{opacity:.55}
.cc-code{flex:0 0 auto;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-primary);min-width:80px}
.cc-name{flex:1 1 auto;font-size:13px;color:var(--text-secondary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-seed{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.2px;color:var(--text-muted);background:color-mix(in srgb,var(--text-primary) 7%,transparent);padding:1px 6px;border-radius:999px;margin-left:4px}
.cc-arch-pill{font-size:9.5px;font-weight:700;text-transform:uppercase;color:var(--color-warning);background:color-mix(in srgb,var(--color-warning) 15%,transparent);padding:1px 6px;border-radius:999px;margin-left:4px}
.cc-acts{flex:0 0 auto;display:flex;gap:3px;opacity:0;transition:opacity var(--motion-fast)}
.cc-row:hover .cc-acts,.cc-row:focus-within .cc-acts{opacity:1}
.cc-act{width:28px;height:28px;border:none;border-radius:8px;background:transparent;color:var(--text-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--motion-fast),color var(--motion-fast)}
.cc-act:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent)}
.cc-act.is-danger:hover{background:color-mix(in srgb,var(--color-error) 12%,transparent);color:var(--color-error)}
.cc-act svg{width:14px;height:14px}
@media (hover:none){.cc-acts{opacity:1}}
.plib-group{margin-bottom:14px}
.plib-group-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--text-secondary);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.plib-group-hint{font-weight:500;text-transform:none;letter-spacing:0;color:var(--text-muted);font-size:11px}
.plib-recent{display:flex;flex-direction:column;gap:2px}
.plib-recent-row{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:7px 10px;border-radius:9px;font-size:12.5px}
.plib-recent-row:hover{background:color-mix(in srgb,var(--text-primary) 4%,transparent)}
.plib-recent-desc{color:var(--text-primary);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plib-recent-meta{color:var(--text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap}
.plib-actual{color:var(--color-success);font-weight:700}
.plib-recent-when{color:var(--text-muted);font-size:11px;white-space:nowrap}
.plib-divs{display:flex;flex-wrap:wrap;gap:7px}
.plib-div-chip{font-size:11.5px;color:var(--text-secondary);background:color-mix(in srgb,var(--app-accent) 8%,transparent);border-radius:var(--radius-pill,999px);padding:3px 11px}
.plib-div-chip b{color:var(--app-accent);font-weight:800}
.plib-empty{font-size:12px;color:var(--text-muted);padding:6px 0}
.plib-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:6px;padding-top:14px;border-top:0.5px solid color-mix(in srgb,var(--text-primary) 8%,transparent)}
.ct-default-card{background:var(--surface-2);border:.5px solid var(--border);border-radius:14px;padding:14px 16px;margin-bottom:16px}
.ct-default-card .ct-lbl{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px}
.ct-default-row{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.ct-f{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:600;color:var(--text-muted)}
.ct-num{width:84px}
.ct-default-row .eq-action-btn{margin-bottom:1px}
.ct-default-note{display:block;margin:11px 0 0;font-size:11.5px;line-height:1.5;color:var(--text-muted)}
.ct-ov-head{display:flex;align-items:center;font-size:13px;font-weight:700;color:var(--text-primary);margin:4px 0 10px}
.ct-ov-list{display:flex;flex-direction:column;gap:6px}
.ct-ov-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;background:var(--surface-2);border:.5px solid var(--border)}
/* 2026-07-02 📘 — Cost-threshold LIVE EFFECT: which codes are actually near/over budget now (real data). */
.ct-live-sec{margin-top:18px;padding-top:16px;border-top:0.5px solid color-mix(in srgb,var(--text-primary) 9%,transparent)}
.ct-live-head{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--text-secondary);margin-bottom:9px;display:flex;align-items:center;gap:10px}
.ct-live-summary{font-weight:600;text-transform:none;letter-spacing:0;font-size:12px}
.ct-live-over-n{color:var(--color-error)}
.ct-live-warn-n{color:var(--color-warning,#d08700)}
.ct-live-clear{color:var(--color-success);font-weight:600}
.ct-live-list{display:flex;flex-direction:column;gap:3px}
.ct-live-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:11px;align-items:center;padding:7px 11px;border-radius:9px;font-size:12.5px;background:var(--card-bg)}
.ct-live-band{font-size:9.5px;font-weight:800;letter-spacing:.4px;padding:2px 7px;border-radius:var(--radius-pill,999px);color:#fff}
.ct-live-over .ct-live-band{background:var(--color-error)}
.ct-live-warn .ct-live-band{background:var(--color-warning,#d08700)}
.ct-live-code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-primary)}
.ct-live-code code{font-weight:700;color:var(--app-accent)}
.ct-live-proj{color:var(--text-muted);font-size:11.5px;white-space:nowrap}
.ct-live-pct{font-weight:800;font-variant-numeric:tabular-nums}
.ct-live-over .ct-live-pct{color:var(--color-error)}
.ct-live-warn .ct-live-pct{color:var(--color-warning,#d08700)}
.ct-live-more{font-size:11.5px;color:var(--text-muted);padding:5px 11px}
.ct-code{font-size:11.5px;background:var(--card-bg);padding:2px 8px;border-radius:6px;font-weight:700;border:.5px solid var(--border)}
.ct-ov-meta{flex:1;font-size:11.5px;color:var(--text-muted)}
.ct-ov-empty{padding:14px;text-align:center;font-size:12px;color:var(--text-muted);background:var(--surface-2);border:.5px dashed var(--border);border-radius:10px}
/* info */
.rrt-info-rows{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.rrt-info-row{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.rrt-info-k{font-size:13px;color:var(--text-secondary)}
.rrt-info-v{font-size:14px;color:var(--text-primary);font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.rrt-info-v.is-strong{font-size:17px;color:var(--app-accent)}
.rrt-info-body{margin-top:14px;font-size:14px;color:var(--text-primary);line-height:1.5;white-space:pre-wrap}
/* P0.2 L4 — e-sign signing timeline (sequential-routing status). Step-dots on a
   connecting spine, semantic tones, current signer highlighted. */
.esign-timeline{margin:14px 0 4px;display:flex;flex-direction:column}
.esign-step{position:relative;display:flex;align-items:center;gap:11px;padding:7px 0 7px 2px}
.esign-step::before{content:"";position:absolute;left:12px;top:24px;bottom:-7px;width:2px;background:var(--border);z-index:0}
.esign-step-last::before{display:none}
.esign-step-done::before{background:color-mix(in srgb,var(--color-success) 55%,var(--border))}
.esign-dot{position:relative;z-index:1;flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;background:var(--surface-2);color:var(--text-muted);box-shadow:inset 0 0 0 1.5px var(--border)}
.esign-step-done .esign-dot{background:var(--color-success);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 3px color-mix(in srgb,var(--color-success) 40%,transparent)}
.esign-step-current .esign-dot{background:var(--app-accent);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 3px color-mix(in srgb,var(--app-accent) 18%,transparent),0 1px 3px color-mix(in srgb,var(--app-accent) 40%,transparent);animation:esignPulse 2s var(--ease-in-out,ease-in-out) infinite}
@keyframes esignPulse{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 3px color-mix(in srgb,var(--app-accent) 18%,transparent),0 1px 3px color-mix(in srgb,var(--app-accent) 40%,transparent)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 5px color-mix(in srgb,var(--app-accent) 8%,transparent),0 1px 3px color-mix(in srgb,var(--app-accent) 40%,transparent)}}
.esign-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.esign-role{font-size:13.5px;font-weight:600;color:var(--text-primary);letter-spacing:-.1px}
.esign-name{font-size:11.5px;color:var(--text-muted)}
.esign-pill{flex:0 0 auto;font-size:10.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;padding:3px 9px;border-radius:var(--radius-pill);white-space:nowrap}
.esign-pill-done{background:var(--color-success-bg,color-mix(in srgb,var(--color-success) 14%,transparent));color:var(--color-success)}
.esign-pill-current{background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent)}
.esign-pill-wait{background:color-mix(in srgb,var(--text-primary) 6%,transparent);color:var(--text-muted)}
@media (prefers-reduced-motion:reduce){.esign-step-current .esign-dot{animation:none}}
/* P0.3 Stage B — callout link picker (RFI / punch / photo chooser). */
.rrt-callout-modal{width:min(94vw,420px)}
.rrt-callout-list{margin-top:10px;max-height:46vh;overflow:auto;display:flex;flex-direction:column;gap:2px;-webkit-overflow-scrolling:touch}
.rrt-callout-row{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border:none;border-radius:11px;background:transparent;color:var(--text-primary);text-align:left;cursor:pointer;font:inherit;transition:background var(--motion-fast)}
.rrt-callout-row:hover{background:var(--surface-2)}
.rrt-callout-ico{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;border-radius:8px;font-size:13px;color:#fff}
.rrt-callout-ico .ic{width:15px;height:15px}
.rrt-callout-ico-rfi{background:#0a84ff}
.rrt-callout-ico-punch{background:#ff9500}
.rrt-callout-ico-photo{background:#34c759}
.rrt-callout-label{flex:1;min-width:0;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrt-callout-empty{padding:18px;text-align:center;font-size:13px;color:var(--text-muted)}
/* P0.3 Stage C — form-fill modal rows. */
.pdfv-ff-list{margin-top:10px;max-height:50vh;overflow:auto;display:flex;flex-direction:column;gap:10px;padding-right:2px}
.pdfv-ff-row{display:flex;flex-direction:column;gap:4px}
.pdfv-ff-row label{font-size:12px;font-weight:600;color:var(--text-secondary,var(--text-muted))}
.pdfv-ff-row input[type=text],.pdfv-ff-row select{height:34px;padding:0 11px;font:inherit;font-size:14px;color:var(--text-primary);background:var(--surface-2);border:0.5px solid var(--border);border-radius:9px;outline:none}
.pdfv-ff-row input[type=text]:focus,.pdfv-ff-row select:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 28%,transparent)}
.pdfv-ff-check{flex-direction:row;align-items:center;gap:8px}
.pdfv-ff-check input{margin:0;accent-color:var(--app-accent)}
.pdfv-ff-check span{font-size:13.5px;color:var(--text-primary)}
.rrt-input-modal-actions{display:flex;border-top:0.5px solid var(--chrome-border);margin:18px -20px 0;border-radius:0 0 22px 22px;overflow:hidden}
.rrt-input-modal-btn{flex:1;height:44px;background:transparent;border:none;color:var(--app-accent);font-family:inherit;font-size:17px;font-weight:400;cursor:pointer;letter-spacing:-.2px}
.rrt-input-modal-btn:hover{background:color-mix(in srgb,var(--app-accent) 6%, transparent)}
.rrt-input-modal-btn:active{background:color-mix(in srgb,var(--app-accent) 12%, transparent)}
.rrt-input-modal-btn.rrt-input-modal-cancel{border-right:0.5px solid var(--chrome-border);font-weight:400;color:var(--text-secondary)}
.rrt-input-modal-btn.rrt-input-modal-ok{font-weight:600}
/* 📒 V160 — the FORM modal (rrtFormModal editor sheets) elevated past the iOS-alert look
   (Gavin: "looked like old apple iOS, not maximum design spec"): pro-app sheet — wider,
   bold display header on a soft accent wash, specular edge + e4 elevation, 2-col field
   grid (textareas/text span both), real pill buttons instead of the hairline-divided
   full-width text row. Alert-style confirms deliberately KEEP the classic iOS form. */
.rrt-form-modal{width:min(94vw,480px);padding:24px 24px 20px;border-radius:24px;gap:4px;background:var(--card-bg);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 .5px rgba(15,23,42,.08),var(--shadow-e4,0 32px 72px -20px rgba(15,23,42,.45));position:relative;overflow:hidden}
.rrt-form-modal::before{content:"";position:absolute;inset:0 0 auto 0;height:110px;background:radial-gradient(120% 100% at 50% -30%,color-mix(in srgb,var(--app-accent) 10%,transparent),transparent 75%);pointer-events:none}
.rrt-form-modal .rrt-input-modal-title{font-size:20px;font-weight:800;letter-spacing:-.02em;position:relative}
.rrt-form-modal .rrt-input-modal-subtitle{position:relative}
.rrt-form-modal .rrt-fm-body{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;position:relative}
.rrt-form-modal .rrt-fm-field{gap:6px}
.rrt-form-modal .rrt-fm-field:has(.rrt-fm-textarea),.rrt-form-modal .rrt-fm-field:has(input[type="text"]),.rrt-form-modal .rrt-fm-field:has(input[type="email"]){grid-column:1/-1}
.rrt-form-modal .rrt-fm-label{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-secondary)}
.rrt-form-modal .rrt-fm-input{box-shadow:inset 0 1px 2px rgba(15,23,42,.05)}
.rrt-form-modal .rrt-fm-input:hover{border-color:color-mix(in srgb,var(--app-accent) 30%,var(--chrome-border))}
.rrt-form-modal .rrt-input-modal-actions{border-top:none;margin:20px 0 0;border-radius:0;overflow:visible;gap:10px;justify-content:flex-end;position:relative}
.rrt-form-modal .rrt-input-modal-btn{flex:0 0 auto;height:40px;padding:0 20px;border-radius:999px;font-size:14px;font-weight:700;letter-spacing:-.1px;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast),background var(--motion-fast)}
.rrt-form-modal .rrt-input-modal-cancel{border-right:none;background:var(--surface-2);color:var(--text-primary);box-shadow:0 0 0 .5px var(--chrome-border)}
.rrt-form-modal .rrt-input-modal-cancel:hover{background:var(--surface)}
.rrt-form-modal .rrt-input-modal-ok{background:var(--app-accent);color:#fff;box-shadow:0 8px 20px -8px color-mix(in srgb,var(--app-accent) 70%,transparent),inset 0 1px 0 rgba(255,255,255,.25)}
.rrt-form-modal .rrt-input-modal-ok:hover{transform:translateY(-1px);box-shadow:0 12px 26px -10px color-mix(in srgb,var(--app-accent) 80%,transparent),inset 0 1px 0 rgba(255,255,255,.25);background:color-mix(in srgb,var(--app-accent) 92%,#fff)}
.rrt-form-modal .rrt-input-modal-ok:active,.rrt-form-modal .rrt-input-modal-cancel:active{transform:scale(.97)}
.rrt-form-modal .rrt-input-modal-ok.is-danger{background:var(--color-error);box-shadow:0 8px 20px -8px color-mix(in srgb,var(--color-error) 70%,transparent),inset 0 1px 0 rgba(255,255,255,.25)}

/* ──────────────────────────────────────────────────────────────────────────
   G3 📘 — Document classification + data-extraction sheet. Apple-style frosted
   sheet shown after a file is picked for a project. Reuses the rrt-input-modal
   overlay backdrop family; widens for the type grid + review form. Glass lives
   on the floating sheet (chrome); content fields stay solid. Tokens only.
   ────────────────────────────────────────────────────────────────────────── */
.docc-sheet{width:min(94vw,440px);max-height:88vh;overflow:hidden;display:flex;flex-direction:column;background:var(--frost-bg,color-mix(in srgb,var(--surface) 92%, transparent));backdrop-filter:var(--frost-blur,blur(20px) saturate(1.8)) brightness(1.04);-webkit-backdrop-filter:var(--frost-blur,blur(20px) saturate(1.8)) brightness(1.04);border-radius:24px;box-shadow:var(--shadow-e4),inset 0 1px 0 rgba(255,255,255,.18);animation:rrtInputModalPop var(--motion-fast) var(--ease-spring,ease-out)}
@media (prefers-reduced-transparency:reduce){.docc-sheet{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media (prefers-reduced-motion:reduce){.docc-sheet{animation:none}}
/* P6b — Email-a-document compose sheet (frost-sheet family; tokens-only, all-theme). */
/* #26 — larger Apple-composer sheet (was 460px) + a phone bottom-sheet override
   (the overlay had none — it stayed a centered dialog on mobile). */
.de-sheet{width:min(94vw,900px)}
@media (max-width:640px){
  .rrt-input-modal-overlay:has(.de-sheet){align-items:flex-end;padding:0}
  .de-sheet{width:100%;max-width:none;border-radius:22px 22px 0 0;align-self:flex-end;max-height:94svh}
}
/* #26 — merged recipient token field: chips + persistent inline input + smart-fill dropdown. */
.de-tokfield{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:5px;min-height:38px;padding:5px 8px;background:var(--surface-2);border:.5px solid var(--chrome-border);border-radius:var(--radius-md);transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
.de-tokfield:focus-within{border-color:color-mix(in srgb,var(--app-accent) 55%,var(--chrome-border));box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 10%,transparent)}
.de-tok{display:inline-flex;align-items:center;gap:5px;padding:2px 6px 2px 3px;background:color-mix(in srgb,var(--app-accent) 12%,var(--card-bg));border:.5px solid color-mix(in srgb,var(--app-accent) 26%,transparent);border-radius:var(--radius-pill);font-size:12px;font-weight:600;color:var(--text-primary);max-width:100%}
.de-tok-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.de-tok-x{display:inline-flex;width:15px;height:15px;align-items:center;justify-content:center;border:0;background:transparent;border-radius:50%;cursor:pointer;color:var(--text-muted);flex:0 0 auto}
.de-tok-x:hover{background:color-mix(in srgb,var(--text-primary) 12%,transparent);color:var(--text-primary)}
.de-tok-x svg{width:9px;height:9px}
.de-tokin{flex:1;min-width:120px;border:0;background:transparent;outline:none;font:inherit;font-size:13px;color:var(--text-primary);padding:3px 2px}
.de-tokin::placeholder{color:var(--text-muted)}
.de-drop{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:5;max-height:230px;overflow-y:auto;background:var(--card-bg);border:.5px solid var(--chrome-border);border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.22),inset 0 0 0 .5px var(--border);padding:5px;display:none}
.de-drop-row{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;background:transparent;padding:7px 9px;border-radius:8px;cursor:pointer;font:inherit}
.de-drop-row:hover{background:var(--accent-tint,color-mix(in srgb,var(--app-accent) 10%,transparent))}
.de-drop-main{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.de-drop-name{font-size:13px;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.de-drop-email{font-size:11.5px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.de-drop-label{padding:6px 12px 2px;font:600 11px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted)}
.de-drop-divider{height:1px;background:var(--border);margin:4px 6px}
.de-drop-divider:last-child{display:none}
.de-drop-row .tc-avatar{flex:none}
.de-drop-add .de-drop-plus{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;border-radius:50%;background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent);font-weight:700;flex:0 0 auto}
.de-ccbcc{float:right;display:inline-flex;gap:2px}
.de-ccbcc-btn{border:0;background:transparent;color:var(--app-accent);font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;padding:0 4px;border-radius:5px}
.de-ccbcc-btn:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
.de-noemail{display:flex;flex-wrap:wrap;gap:5px;margin-top:-2px}
.de-noemail-row{border:0;background:transparent;color:var(--text-muted);font:inherit;font-size:11.5px;cursor:pointer;padding:2px 4px;border-radius:5px}
.de-noemail-row span{color:var(--app-accent);font-weight:600}
.de-noemail-row:hover{background:var(--surface-2)}
.de-chip-x{padding-right:3px}
.de-chip-rm{display:inline-flex;width:15px;height:15px;align-items:center;justify-content:center;border:0;background:transparent;border-radius:50%;cursor:pointer;color:var(--text-muted);margin-left:2px}
.de-chip-rm:hover{background:color-mix(in srgb,var(--text-primary) 12%,transparent);color:var(--text-primary)}
.de-chip-rm svg{width:9px;height:9px}
.de-addfiles{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 10px;border:.5px dashed var(--chrome-border);background:transparent;border-radius:var(--radius-pill);color:var(--text-secondary);font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast)}
.de-addfiles:hover{background:color-mix(in srgb,var(--app-accent) 10%,transparent);color:var(--app-accent);border-color:color-mix(in srgb,var(--app-accent) 30%,var(--chrome-border))}
.de-outlook{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;margin-right:auto;border:.5px solid var(--chrome-border);background:var(--surface-2);border-radius:var(--radius-md);color:var(--text-secondary);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
.de-outlook:hover{background:var(--surface-3);color:var(--text-primary)}
.de-head{position:relative;padding:18px 20px 12px;border-bottom:.5px solid var(--chrome-border,var(--border))}
.de-title{font:700 17px/1.2 -apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,sans-serif;color:var(--text-primary)}
.de-sub{margin-top:2px;font-size:12.5px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.de-x{position:absolute;top:14px;right:14px;width:28px;height:28px;border:none;border-radius:50%;background:color-mix(in srgb,var(--text-primary) 7%,transparent);color:var(--text-secondary,var(--text-muted));cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--motion-fast),color var(--motion-fast)}
.de-x:hover{background:color-mix(in srgb,var(--text-primary) 13%,transparent);color:var(--text-primary)}
.de-x svg{width:13px;height:13px}
.de-body{padding:14px 24px 4px;overflow-y:auto;display:flex;flex-direction:column;gap:7px;max-height:min(76vh,760px)}
.de-label{font:600 11px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;letter-spacing:.02em;text-transform:uppercase;color:var(--text-muted);margin-top:7px;display:flex;align-items:baseline;gap:7px}
.de-hint{font-weight:400;text-transform:none;letter-spacing:0;font-size:11px;color:var(--text-muted);opacity:.8}
.de-clist{max-height:190px;overflow-y:auto;display:flex;flex-direction:column;gap:3px;border:.5px solid var(--chrome-border,var(--border));border-radius:13px;padding:5px;background:var(--surface-2,var(--surface))}
.de-clist-sub{font:600 10px/1 system-ui;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);opacity:.7;padding:8px 6px 3px}
.de-c-row{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:8px 9px;border:none;background:transparent;border-radius:10px;cursor:pointer;transition:background var(--motion-fast)}
.de-c-row:hover{background:color-mix(in srgb,var(--text-primary) 7%,transparent)}
.de-c-row.on{background:color-mix(in srgb,var(--accent,#0a84ff) 13%,transparent)}
.de-c-check{flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--chrome-border,var(--border));display:inline-flex;align-items:center;justify-content:center;color:#fff}
.de-c-row.on .de-c-check{background:var(--accent,#0a84ff);border-color:var(--accent,#0a84ff)}
.de-c-check svg{width:10px;height:10px;opacity:0}
.de-c-row.on .de-c-check svg{opacity:1}
.de-c-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.de-c-name{font-size:13.5px;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.de-c-email{font-size:11.5px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.de-c-muted{opacity:.7;font-style:italic}
.de-c-tag{flex:none;font:600 9.5px/1 system-ui;letter-spacing:.03em;text-transform:uppercase;color:var(--accent,#0a84ff);background:color-mix(in srgb,var(--accent,#0a84ff) 13%,transparent);padding:3px 6px;border-radius:6px}
.de-c-disabled{cursor:default;opacity:.85}
.de-c-disabled:hover{background:transparent}
.de-c-addmail{flex:none;font:600 11px/1 system-ui;color:var(--accent,#0a84ff);background:none;border:none;cursor:pointer;padding:4px 6px;border-radius:7px;transition:background var(--motion-fast)}
.de-c-addmail:hover{background:color-mix(in srgb,var(--accent,#0a84ff) 12%,transparent)}
.de-empty{padding:14px 8px;font-size:12.5px;color:var(--text-muted);text-align:center}
.de-in{font:inherit;font-size:13.5px;padding:9px 11px;border:.5px solid var(--chrome-border,var(--border));border-radius:11px;background:var(--surface-2,var(--surface));color:var(--text-primary);outline:none;transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
.de-in:focus{border-color:color-mix(in srgb,var(--app-accent) 55%,var(--chrome-border));box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 15%,transparent)}
.de-ta{resize:vertical;min-height:62px;line-height:1.45}
/* #email — rich-text composer (toolbar + contenteditable). */
.de-rte-bar{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:6px 8px;background:var(--surface-2);border:.5px solid var(--chrome-border);border-bottom:0;border-radius:11px 11px 0 0}
.de-rte-btn{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 6px;border:0;background:transparent;color:var(--text-secondary);font:inherit;font-size:13px;border-radius:7px;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
.de-rte-btn:hover{background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-primary)}
.de-rte-btn.on{background:color-mix(in srgb,var(--app-accent) 16%,transparent);color:var(--app-accent)}
.de-rte-sep{width:1px;height:18px;background:var(--chrome-border);margin:0 4px}
.de-rte-size{height:26px;border:.5px solid var(--chrome-border);background:var(--card-bg);border-radius:7px;color:var(--text-secondary);font:inherit;font-size:12px;cursor:pointer}
.de-rte-color{position:relative;overflow:hidden}
.de-rte-color input{position:absolute;inset:0;opacity:0;cursor:pointer}
.de-rte{min-height:120px;max-height:280px;overflow-y:auto;border-top:0;border-radius:0 0 11px 11px;line-height:1.55}
.de-rte:focus{outline:none;border-color:color-mix(in srgb,var(--app-accent) 55%,var(--chrome-border));border-top:0;box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 15%,transparent)}
/* Kill the global :focus-visible hard outline on the sheet's fields — the contenteditable composer
   is a <div>, so the input/textarea/select neutralizer misses it. Our own accent ring stands in. */
.de-rte:focus-visible,.de-in:focus-visible,.de-tokfield:focus-within,.de-tokin:focus-visible{outline:none!important}
.de-rte:empty::before{content:attr(aria-label);color:var(--text-muted)}
.de-rte blockquote{margin:6px 0;padding:2px 0 2px 12px;border-left:3px solid var(--chrome-border);color:var(--text-secondary)}
.de-rte ul,.de-rte ol{margin:6px 0;padding-left:22px}
.de-rte a{color:var(--app-accent)}
.de-attach-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:11px}
/* Attachment = the document being sent → an elevated chip-TILE that POPs (real
   --shadow-e2 elevation, glyph-led; signal type via the icon, never an edge-strip). */
.de-chip{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--text-primary);background:var(--card-bg,var(--surface));padding:7px 12px 7px 8px;border-radius:12px;max-width:240px;box-shadow:var(--shadow-e2),inset 0 0 0 .5px color-mix(in srgb,var(--text-primary) 9%,transparent),inset 0 1px 0 rgba(255,255,255,.22)}
.de-chip>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.de-chip .de-chip-ico{flex:none;width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--app-accent) 14%,var(--surface-2));color:var(--app-accent)}
.de-chip .de-chip-ico svg{width:13px;height:13px;color:inherit}
.de-attach-note{font-size:12px;color:var(--text-muted)}
.de-seg{display:inline-flex;border:.5px solid var(--chrome-border,var(--border));border-radius:10px;overflow:hidden;background:var(--surface-2,var(--surface));box-shadow:inset 0 1px 2px color-mix(in srgb,var(--text-primary) 6%,transparent)}
.de-seg-btn{font:600 12px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;padding:7px 13px;border:none;background:transparent;color:var(--text-secondary,var(--text-muted));cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast) var(--ease-spring,ease-out)}
.de-seg-btn.on{background:var(--app-accent,#0a84ff);color:var(--on-accent,#fff)}
.de-seg-btn:active{transform:scale(.94)}
@media (prefers-reduced-motion:reduce){.de-seg-btn:active{transform:none}}
.de-optbar{display:flex;flex-wrap:wrap;gap:16px;padding:10px 20px 0;margin-top:8px}
.de-opt{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:12.5px;color:var(--text-secondary);user-select:none}
.de-opt input{position:absolute;opacity:0;width:0;height:0}
.de-opt-sw{position:relative;width:32px;height:18px;border-radius:9px;background:var(--surface-3,color-mix(in srgb,var(--text-primary) 14%,transparent));transition:background var(--motion-fast);flex:none}
.de-opt-sw::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform var(--motion-fast)}
.de-opt input:checked + .de-opt-sw{background:var(--app-accent)}
.de-opt input:checked + .de-opt-sw::after{transform:translateX(14px)}
.de-opt input:focus-visible + .de-opt-sw{outline:2px solid color-mix(in srgb,var(--app-accent) 45%,transparent);outline-offset:2px}
.de-opt-lbl{white-space:nowrap}
/* Email engagement surface (2026-07-03 📘) */
.ee-wrap{width:100%;box-sizing:border-box}
.gm-modal:has(.ee-wrap){width:min(92vw,640px)}
.ee-head{margin-bottom:14px}
.ee-head h2{font:700 20px/1.2 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:var(--text-primary);margin:0}
.ee-sub{font-size:13px;color:var(--text-muted);margin-top:3px}
.ee-list{display:flex;flex-direction:column;gap:8px}
.ee-empty{padding:32px 16px;text-align:center;color:var(--text-muted);font-size:13.5px}
.ee-row{border:.5px solid var(--chrome-border);border-radius:13px;background:var(--surface-2);overflow:hidden}
.ee-row-head{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;background:transparent;padding:12px 14px;cursor:pointer;font:inherit}
.ee-row-head:hover{background:color-mix(in srgb,var(--text-primary) 4%,transparent)}
.ee-row-main{flex:1;min-width:0}
.ee-row-subj{font-size:14px;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ee-row-meta{font-size:12px;color:var(--text-muted);margin-top:2px}
.ee-row-status{display:flex;align-items:center;gap:8px;flex:none}
.ee-caret{color:var(--text-muted);transition:transform var(--motion-fast)}
.ee-row.ee-open .ee-caret{transform:rotate(90deg)}
.ee-recips{max-height:0;overflow:hidden;transition:max-height var(--motion-med,.24s) ease}
.ee-row.ee-open .ee-recips{max-height:600px;overflow-y:auto}
.ee-recip{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-top:.5px solid var(--border)}
.ee-recip-email{flex:1;min-width:0;font-size:13px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ee-role{font-size:10px;font-weight:600;text-transform:uppercase;color:var(--text-muted);background:color-mix(in srgb,var(--text-primary) 8%,transparent);padding:1px 4px;border-radius:4px}
.ee-recip-state{display:flex;align-items:center;gap:8px;flex:none}
.ee-recip-when{font-size:11.5px;color:var(--text-muted)}
.ee-recip-bcc{font-size:12px;color:var(--text-muted);font-style:italic;justify-content:flex-start}
.ee-chip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:var(--radius-pill);white-space:nowrap}
.ee-chip-ico{font-size:10px}
.ee-st-sent{background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-secondary)}
.ee-st-deliv{background:color-mix(in srgb,var(--text-primary) 10%,transparent);color:var(--text-secondary)}
.ee-st-open{background:color-mix(in srgb,var(--app-accent) 15%,transparent);color:var(--app-accent)}
.ee-st-click{background:color-mix(in srgb,#34c759 18%,transparent);color:#248a3d}
.ee-st-reply{background:color-mix(in srgb,#5e5ce6 18%,transparent);color:#4b47d6}
.ee-st-fail{background:color-mix(in srgb,#ff3b30 15%,transparent);color:#c0392b}
/* Phase 2 — project document-engagement dashboard (reuses .ee-* rows) */
.ee-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:8px;margin:0 0 14px}
.ee-stat{background:var(--surface-2);border:.5px solid var(--chrome-border,var(--border));border-radius:12px;padding:11px 12px;text-align:left}
.ee-stat-n{font:700 22px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:var(--text-primary)}
.ee-stat-l{font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--text-muted);margin-top:4px}
.ee-stat.ee-stat-stale .ee-stat-n{color:#c77700}
.ee-stat.ee-stat-reply .ee-stat-n{color:#4b47d6}
.ee-flag-stale{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:#c77700;background:color-mix(in srgb,#ff9500 15%,transparent);padding:2px 7px;border-radius:var(--radius-pill);white-space:nowrap}
.ee-followup{border:0;background:color-mix(in srgb,#ff9500 14%,transparent);color:#c77700;font:600 12px/1 -apple-system,system-ui,sans-serif;padding:6px 11px;border-radius:9px;cursor:pointer;white-space:nowrap}
.ee-followup:hover{filter:brightness(0.96)}
.ee-linkctl{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-top:.5px solid var(--border);font-size:12.5px;color:var(--text-muted)}
.ee-recip-reply{padding:7px 14px 10px;border-top:.5px solid var(--border);font-size:12.5px;color:var(--text-secondary);background:color-mix(in srgb,#5e5ce6 5%,transparent)}
.ee-recip-reply b{color:var(--text-primary);font-weight:600}
.de-foot{display:flex;justify-content:flex-end;gap:9px;padding:13px 20px 16px;border-top:.5px solid var(--chrome-border,var(--border));margin-top:6px}
@media (prefers-reduced-transparency:reduce){.de-sheet{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}

/* ══════════════════════════════════════════════════════════════════════════
   EMAIL COMPOSER (F6 send-document modal) — .ecx-* family.
   Replaces the old fully-inline _emailOpenModal markup. A considered Apple
   pro-app send sheet: Liquid-Glass floating modal (not a flat --surface zone,
   not see-through --chrome-bg fields), recipient picker with avatars + chips,
   rounded focus rings, ONE primary Send (press-deform + sending→sent morph),
   an elevated attachment tile, and an Undo-send window. Tokens only; reads on
   every theme; reduced-transparency + reduced-motion fallbacks baked in.
   ══════════════════════════════════════════════════════════════════════════ */
.ecx-overlay{position:fixed;inset:0;z-index:var(--z-top,9999);display:flex;align-items:center;justify-content:center;padding:20px;background:color-mix(in srgb,var(--app-bg) 56%,transparent);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:ecxFade var(--motion-fast) var(--ease-out,ease)}
@keyframes ecxFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.ecx-overlay{animation:none}}
.ecx-sheet{width:min(96vw,680px);min-height:min(560px,90svh);max-height:92svh;display:flex;flex-direction:column;overflow:hidden;border-radius:24px;background:var(--frost-bg,color-mix(in srgb,var(--surface) 92%,transparent));backdrop-filter:var(--frost-blur,blur(20px) saturate(1.8)) brightness(1.04);-webkit-backdrop-filter:var(--frost-blur,blur(20px) saturate(1.8)) brightness(1.04);box-shadow:var(--shadow-e4),inset 0 1px 0 rgba(255,255,255,.18);animation:rrtInputModalPop var(--motion-fast) var(--ease-spring,ease-out)}
@media (prefers-reduced-transparency:reduce){.ecx-sheet{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media (prefers-reduced-motion:reduce){.ecx-sheet{animation:none}}
.ecx-head{position:relative;display:flex;align-items:center;gap:11px;padding:17px 20px 13px;border-bottom:.5px solid color-mix(in srgb,var(--chrome-border) 72%,transparent)}
.ecx-head-ico{flex:none;width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--app-accent) 15%,var(--surface-2));color:var(--app-accent);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--app-accent) 28%,transparent)}
.ecx-head-ico svg{width:17px;height:17px}
.ecx-head-txt{flex:1;min-width:0}
.ecx-title{font:700 17px/1.2 -apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,sans-serif;color:var(--text-primary);letter-spacing:-.2px}
.ecx-sub{margin-top:1px;font-size:12.5px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ecx-x{flex:none;width:28px;height:28px;border:none;border-radius:50%;background:color-mix(in srgb,var(--text-primary) 7%,transparent);color:var(--text-secondary,var(--text-muted));cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast) var(--ease-spring,ease-out)}
.ecx-x:hover{background:color-mix(in srgb,var(--text-primary) 13%,transparent);color:var(--text-primary)}
.ecx-x:active{transform:scale(.9)}
.ecx-x svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8}
.ecx-body{flex:1 1 auto;padding:14px 20px 6px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.ecx-label{font:600 11px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;letter-spacing:.02em;text-transform:uppercase;color:var(--text-muted);margin-top:8px;display:flex;align-items:baseline;gap:7px}
.ecx-hint{font-weight:400;text-transform:none;letter-spacing:0;font-size:11px;color:var(--text-muted);opacity:.85}
/* Picked-recipient chips (avatar + name, removable). */
.ecx-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:1px}
.ecx-chip{display:inline-flex;align-items:center;gap:7px;padding:4px 8px 4px 4px;border-radius:999px;background:var(--card-bg,var(--surface));color:var(--text-primary);font-size:12.5px;font-weight:600;max-width:220px;box-shadow:var(--shadow-e1),inset 0 0 0 .5px color-mix(in srgb,var(--text-primary) 10%,transparent);animation:ecxChipIn var(--motion-fast) var(--ease-spring,ease-out)}
@keyframes ecxChipIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ecx-chip{animation:none}}
.ecx-chip .tc-avatar{flex:none;font-size:9.5px}
.ecx-chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ecx-chip-rm{flex:none;width:18px;height:18px;border:none;border-radius:50%;background:transparent;color:var(--text-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--motion-fast),color var(--motion-fast)}
.ecx-chip-rm:hover{background:color-mix(in srgb,var(--color-error) 16%,transparent);color:var(--color-error)}
.ecx-chip-rm svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:2.2}
/* Contact picker list — avatar rows, rounded selection, scrollable. */
.ecx-clist{max-height:184px;overflow-y:auto;display:flex;flex-direction:column;gap:3px;border:.5px solid var(--chrome-border,var(--border));border-radius:14px;padding:5px;background:var(--surface-2,var(--surface))}
.ecx-c-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:7px 9px;border:none;background:transparent;border-radius:11px;cursor:pointer;font-family:inherit;transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring,ease-out)}
.ecx-c-row:hover{background:color-mix(in srgb,var(--text-primary) 7%,transparent)}
.ecx-c-row:active{transform:scale(.99)}
.ecx-c-row.on{background:color-mix(in srgb,var(--app-accent) 13%,transparent)}
.ecx-c-row:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 34%,transparent)}
.ecx-c-row .tc-avatar{flex:none}
/* Recipient search (2026-06-28) — rounded glass-field w/ leading icon + clear; filters the list live. */
.ecx-search{position:relative;display:flex;align-items:center;margin-bottom:7px}
.ecx-search-ico{position:absolute;left:11px;display:inline-flex;width:15px;height:15px;color:var(--text-muted);pointer-events:none}
.ecx-search-ico svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}
.ecx-search-in{width:100%;height:38px;padding:0 34px 0 33px;border:.5px solid var(--chrome-border,var(--border));border-radius:11px;background:var(--surface-2,var(--surface));color:var(--text-primary);font:500 13px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;outline:none;transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
.ecx-search-in::placeholder{color:var(--text-muted)}
.ecx-search-in:focus{border-color:color-mix(in srgb,var(--app-accent) 55%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 16%,transparent)}
.ecx-search-clear{position:absolute;right:7px;width:22px;height:22px;border:none;border-radius:50%;background:transparent;color:var(--text-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--motion-fast),color var(--motion-fast)}
.ecx-search-clear:hover{background:color-mix(in srgb,var(--text-primary) 9%,transparent);color:var(--text-primary)}
.ecx-search-clear svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2}
.ecx-c-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ecx-c-name{font-size:13.5px;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ecx-c-email{font-size:11.5px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ecx-c-muted{opacity:.7;font-style:italic}
.ecx-c-check{flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--chrome-border,var(--border));display:inline-flex;align-items:center;justify-content:center;color:var(--on-accent,#fff);transition:background var(--motion-fast),border-color var(--motion-fast)}
.ecx-c-row.on .ecx-c-check{background:var(--app-accent,#0a84ff);border-color:var(--app-accent,#0a84ff)}
.ecx-c-check svg{width:10px;height:10px;opacity:0;fill:none;stroke:currentColor;stroke-width:2.4}
.ecx-c-row.on .ecx-c-check svg{opacity:1}
.ecx-c-disabled{cursor:default;opacity:.85}
.ecx-c-disabled:hover{background:transparent;transform:none}
.ecx-empty{padding:14px 8px;font-size:12.5px;color:var(--text-muted);text-align:center}
/* Fields — rounded rest radius so the focus ring is ROUNDED, never boxy. */
.ecx-in{font:inherit;font-size:13.5px;width:100%;box-sizing:border-box;padding:9px 12px;border:.5px solid var(--chrome-border,var(--border));border-radius:12px;background:var(--surface-2,var(--surface));color:var(--text-primary);outline:none;transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
.ecx-in::placeholder{color:var(--text-muted);opacity:.8}
.ecx-in:focus{border-color:color-mix(in srgb,var(--app-accent,#0a84ff) 55%,var(--chrome-border));box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent,#0a84ff) 10%,transparent)}
.ecx-ta{flex:1 1 auto;resize:vertical;min-height:120px;line-height:1.5}
.ecx-attach-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;margin-bottom:2px}
.ecx-foot{display:flex;align-items:center;gap:9px;padding:13px 20px 16px;border-top:.5px solid color-mix(in srgb,var(--chrome-border) 72%,transparent)}
.ecx-foot-note{margin-right:auto;font-size:11.5px;color:var(--text-muted);display:inline-flex;align-items:center;gap:6px;min-width:0}
.ecx-foot-note svg{width:12px;height:12px;flex:none;color:var(--text-muted)}
/* The send affordance — single primary, icon-led, press-deform, state morph. */
.ecx-send{height:36px;padding:0 18px;border:none;border-radius:999px;display:inline-flex;align-items:center;gap:7px;font:600 13.5px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;letter-spacing:-.1px;cursor:pointer;color:var(--on-accent,#fff);background:linear-gradient(to bottom,color-mix(in srgb,#fff 16%,var(--app-accent)),var(--app-accent) 64%,color-mix(in srgb,#000 8%,var(--app-accent)));box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 2px 8px -2px color-mix(in srgb,var(--app-accent) 50%,transparent),0 0 0 .5px color-mix(in srgb,#000 8%,transparent);transition:transform var(--motion-fast) var(--ease-spring,ease-out),box-shadow var(--motion-base),filter var(--motion-fast)}
.ecx-send svg{width:14px;height:14px;flex:none}
.ecx-send:hover{filter:brightness(1.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 4px 14px -3px color-mix(in srgb,var(--app-accent) 55%,transparent),0 0 0 .5px color-mix(in srgb,#000 8%,transparent)}
.ecx-send:active{transform:scale(.95);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 4px -1px color-mix(in srgb,var(--app-accent) 50%,transparent)}
.ecx-send:disabled{filter:none;opacity:.5;cursor:default;transform:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 .5px color-mix(in srgb,#000 8%,transparent)}
.ecx-send.is-sending{cursor:progress}
.ecx-send.is-sent{background:linear-gradient(to bottom,color-mix(in srgb,#fff 16%,var(--color-success)),var(--color-success) 70%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 2px 8px -2px color-mix(in srgb,var(--color-success) 50%,transparent)}
.ecx-send .ecx-spin{width:13px;height:13px;border:2px solid color-mix(in srgb,#fff 45%,transparent);border-top-color:#fff;border-radius:50%;animation:doccSpin .7s linear infinite}
@media (prefers-reduced-motion:reduce){.ecx-send{transition:none}.ecx-send:active{transform:none}.ecx-send .ecx-spin{animation:none}}
@media (max-width:640px){.ecx-sheet{width:100%;max-width:none;border-radius:22px 22px 0 0;align-self:flex-end;max-height:94svh}.ecx-overlay{align-items:flex-end;padding:0}}

/* Undo-send window — a quiet toast-row with a reachable Undo (per the Undo/Delete-
   everywhere rule); the message is queued, not hard-sent, until the window lapses. */
.ecx-undo{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(8px);z-index:calc(var(--z-top,9999) + 2);display:flex;align-items:center;gap:14px;padding:11px 12px 11px 16px;border-radius:14px;background:var(--frost-bg-strong,color-mix(in srgb,var(--surface) 90%,transparent));backdrop-filter:var(--frost-blur,blur(20px) saturate(1.8)) brightness(1.04);-webkit-backdrop-filter:var(--frost-blur,blur(20px) saturate(1.8)) brightness(1.04);box-shadow:var(--shadow-e4),inset 0 1px 0 rgba(255,255,255,.18);max-width:calc(100vw - 32px);opacity:0;transition:opacity var(--motion-base) var(--ease-out,ease),transform var(--motion-base) var(--ease-spring,ease-out)}
.ecx-undo.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-transparency:reduce){.ecx-undo{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media (prefers-reduced-motion:reduce){.ecx-undo{transition:opacity var(--motion-fast)}}
.ecx-undo-ico{flex:none;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--app-accent) 16%,transparent);color:var(--app-accent)}
.ecx-undo-ico svg{width:13px;height:13px}
.ecx-undo-txt{font-size:13px;font-weight:600;color:var(--text-primary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ecx-undo-bar{flex:none;width:30px;height:3px;border-radius:2px;background:color-mix(in srgb,var(--text-primary) 14%,transparent);overflow:hidden}
.ecx-undo-bar i{display:block;height:100%;width:100%;background:var(--app-accent);transform-origin:left;animation:ecxUndoDrain var(--ecx-undo-ms,5000ms) linear forwards}
@keyframes ecxUndoDrain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.ecx-undo-bar i{animation:none}}
.ecx-undo-btn{flex:none;appearance:none;border:none;background:color-mix(in srgb,var(--app-accent) 13%,transparent);color:var(--app-accent);font:700 12.5px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;padding:7px 13px;border-radius:999px;cursor:pointer;transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring,ease-out)}
.ecx-undo-btn:hover{background:color-mix(in srgb,var(--app-accent) 22%,transparent)}
.ecx-undo-btn:active{transform:scale(.94)}
@media (prefers-reduced-motion:reduce){.ecx-undo-btn:active{transform:none}}

/* #15 Document Packet Builder sheet — same frost-sheet family as .docc-sheet, wider. */
.pk-sheet{width:min(94vw,560px);max-height:88vh;overflow:hidden;display:flex;flex-direction:column;background:var(--frost-bg,color-mix(in srgb,var(--surface) 92%,transparent));backdrop-filter:var(--frost-blur,blur(20px) saturate(1.8)) brightness(1.04);-webkit-backdrop-filter:var(--frost-blur,blur(20px) saturate(1.8)) brightness(1.04);border-radius:22px;box-shadow:var(--shadow-e4),inset 0 1px 0 rgba(255,255,255,.18);animation:rrtInputModalPop var(--motion-fast) var(--ease-spring,ease-out)}
@media (prefers-reduced-transparency:reduce){.pk-sheet{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media (prefers-reduced-motion:reduce){.pk-sheet{animation:none}}
.pk-sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 22px 12px;flex-shrink:0;border-bottom:0.5px solid color-mix(in srgb,var(--chrome-border) 70%,transparent)}
.pk-sheet-title{font-size:18px;font-weight:700;color:var(--text-primary);letter-spacing:-.3px}
.pk-sheet-sub{font-size:12.5px;color:var(--text-secondary);margin-top:2px}
.pk-sheet-x{appearance:none;border:none;background:transparent;color:var(--text-muted);width:30px;height:30px;border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--motion-fast),color var(--motion-fast)}
.pk-sheet-x:hover{background:var(--chrome-bg-hover);color:var(--text-primary)}
.pk-sheet-x svg{fill:none;stroke:currentColor}
.pk-sheet-body{padding:14px 22px 8px;overflow-y:auto;flex:1 1 auto}
.pk-field-lbl{font-size:12px;font-weight:700;color:var(--text-secondary);letter-spacing:.2px;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.pk-sel-count{font-weight:600;color:var(--app-accent);font-size:11.5px}
.pk-pick-list{display:flex;flex-direction:column;gap:12px}
.pk-pick-sec{border-radius:12px;background:color-mix(in srgb,var(--text-primary) 3%,transparent);padding:9px 11px}
.pk-pick-sec-h{font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text-muted);margin-bottom:5px}
.pk-pick-row{display:flex;align-items:center;gap:9px;padding:5px 2px;font-size:13px;color:var(--text-primary);cursor:pointer}
.pk-pick-row input{accent-color:var(--app-accent);flex-shrink:0;width:15px;height:15px;cursor:pointer}
.pk-pick-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.pk-pick-sub{font-size:11px;color:var(--text-muted);flex-shrink:0}
.pk-pick-na{opacity:.6}
.pk-pick-na .pk-pick-name{font-style:italic}
/* V152 — packet picker: tactile type-glyph pick-rows + per-section toggle-all. */
.pk-pick-row{min-height:44px;border-radius:10px;padding:7px 10px;transition:background var(--motion-fast) var(--ease-out)}
.pk-pick-row:hover{background:color-mix(in srgb,var(--app-accent) 6%,transparent)}
.pk-pick-row.on{background:color-mix(in srgb,var(--app-accent) 9%,transparent)}
.pk-pick-glyph{flex-shrink:0;width:26px;height:26px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--app-accent) 10%,transparent);color:var(--app-accent)}
.pk-pick-glyph svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5}
.pk-pick-na .pk-pick-glyph{background:color-mix(in srgb,var(--text-primary) 7%,transparent);color:var(--text-muted)}
.pk-pick-sec-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pk-sec-meta{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;color:var(--text-muted);font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0}
.pk-sec-all{appearance:none;border:none;background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent);font:inherit;font-size:10.5px;font-weight:700;padding:2px 10px;border-radius:var(--radius-pill);cursor:pointer;transition:background var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-out)}
.pk-sec-all:hover{background:color-mix(in srgb,var(--app-accent) 20%,transparent)}
.pk-sec-all:active{transform:scale(.94)}
.pk-sig-glyph{flex-shrink:0;width:28px;height:28px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--app-accent) 10%,transparent);color:var(--app-accent)}
.pk-sig-glyph svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5}
@media (prefers-reduced-motion:reduce){.pk-sec-all:active{transform:none}}
.pk-sig-list{display:flex;flex-direction:column;gap:8px}
.pk-sig-row{display:flex;align-items:center;gap:8px}
.pk-sig-row .field-input{flex:1;min-width:0}
/* V151 — linked-contact field (Details PM/Super): avatar chip + the input, inline. */
.pcl-wrap{display:flex;align-items:center;gap:8px}
.pcl-wrap .field-input{flex:1;min-width:0}
.pcl-avatar{flex:0 0 auto;width:26px;height:26px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font:800 10px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:#fff;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12)}
.pcl-hint{font-weight:700;color:var(--app-accent,#0a84ff);font-size:11px}
.pk-sig-rm{appearance:none;border:none;background:transparent;color:var(--text-muted);width:36px;height:36px;border-radius:9px;cursor:pointer;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;transition:background var(--motion-fast),color var(--motion-fast)}
.pk-sig-rm:hover{background:color-mix(in srgb,var(--color-error) 13%,transparent);color:var(--color-error)}
.pk-sig-rm svg{fill:none;stroke:currentColor}
.pk-sheet-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:14px 22px 18px;flex-shrink:0;border-top:0.5px solid color-mix(in srgb,var(--chrome-border) 70%,transparent)}
.pk-build-summary{margin-right:auto;font-size:12px;font-weight:600;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.docc-head{padding:20px 22px 8px;text-align:center;flex-shrink:0}
.docc-title{font-size:18px;font-weight:700;color:var(--text-primary);letter-spacing:-.3px;line-height:1.2}
.docc-sub{font-size:13px;color:var(--text-secondary);margin-top:3px;letter-spacing:-.05px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.docc-body{padding:6px 22px 6px;overflow-y:auto;flex:1 1 auto}
.docc-type-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:10px 0 4px}
.docc-type{display:flex;align-items:center;gap:9px;padding:11px 12px;border-radius:14px;background:var(--surface-2);border:1px solid transparent;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--text-primary);text-align:left;letter-spacing:-.1px;transition:transform var(--motion-fast) var(--ease-spring,ease-out),background var(--motion-fast),box-shadow var(--motion-fast)}
.docc-type svg{width:17px;height:17px;flex-shrink:0;color:var(--app-accent);fill:none;stroke:currentColor}
.docc-type:hover{background:color-mix(in srgb,var(--app-accent) 9%,var(--surface-2));box-shadow:var(--shadow-e1)}
.docc-type:active{transform:scale(.96)}
.docc-type.docc-type-sel{background:color-mix(in srgb,var(--app-accent) 16%,var(--surface));border-color:color-mix(in srgb,var(--app-accent) 45%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 18%,transparent),var(--shadow-e1)}
@media (prefers-reduced-motion:reduce){.docc-type{transition:none}.docc-type:active{transform:none}}
.docc-extract-prompt{margin:12px 0 6px;padding:13px 14px;border-radius:14px;background:color-mix(in srgb,var(--app-accent) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--app-accent) 22%,transparent);display:flex;flex-direction:column;gap:9px}
.docc-extract-prompt-row{display:flex;align-items:flex-start;gap:9px}
.docc-extract-prompt-row svg{width:18px;height:18px;flex-shrink:0;margin-top:1px;color:var(--app-accent);fill:none;stroke:currentColor}
.docc-extract-prompt-txt{font-size:13px;color:var(--text-primary);line-height:1.4;letter-spacing:-.05px}
.docc-extract-prompt-txt b{font-weight:700}
.docc-field{margin:0 0 10px}
.docc-field-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);margin-bottom:5px;display:block}
.docc-field-in{width:100%;box-sizing:border-box;padding:10px 13px;font-size:15px;font-family:inherit;color:var(--text-primary);background:var(--surface-2);border:1px solid var(--border,transparent);border-radius:11px;outline:none;transition:box-shadow var(--motion-fast)}
.docc-field-in:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 22%,transparent);border-color:var(--app-accent)}
.docc-field-row{display:flex;gap:10px}
.docc-field-row .docc-field{flex:1;min-width:0}
.docc-lines{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.docc-line{display:flex;gap:6px;align-items:center}
.docc-line input{flex:1;min-width:0}
.docc-line input.docc-line-amt{flex:0 0 90px}
.docc-line-rm{flex:0 0 auto;width:28px;height:28px;border-radius:8px;border:none;background:var(--surface-2);color:var(--color-error,#d33);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1}
.docc-line-rm:hover{background:color-mix(in srgb,var(--color-error,#d33) 14%,var(--surface-2))}
.docc-line-add{align-self:flex-start;margin-top:4px;background:transparent;border:none;color:var(--app-accent);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:4px 0;display:inline-flex;align-items:center;gap:4px}
.docc-line-add svg{width:13px;height:13px;fill:none;stroke:currentColor}
.docc-extract-status{font-size:12px;color:var(--text-secondary);margin:2px 0 8px;display:flex;align-items:center;gap:6px;letter-spacing:-.05px}
.docc-extract-status svg{width:13px;height:13px;fill:none;stroke:currentColor;flex-shrink:0}
.docc-spin{width:13px;height:13px;border:2px solid color-mix(in srgb,var(--app-accent) 30%,transparent);border-top-color:var(--app-accent);border-radius:50%;animation:doccSpin .7s linear infinite;flex-shrink:0}
@keyframes doccSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.docc-spin{animation:none}}
.docc-actions{display:flex;gap:9px;padding:14px 22px 18px;flex-shrink:0;border-top:.5px solid var(--chrome-border)}
.docc-btn{flex:1;height:44px;border-radius:13px;border:none;font-family:inherit;font-size:15.5px;font-weight:600;cursor:pointer;letter-spacing:-.2px;transition:transform var(--motion-fast) var(--ease-spring,ease-out),filter var(--motion-fast)}
.docc-btn:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){.docc-btn{transition:none}.docc-btn:active{transform:none}}
.docc-btn-quiet{background:var(--surface-2);color:var(--text-primary)}
.docc-btn-quiet:hover{filter:brightness(.97)}
.docc-btn-primary{background:var(--app-accent);color:#fff;box-shadow:var(--shadow-e1)}
.docc-btn-primary:hover{filter:brightness(1.05)}
.docc-btn-primary:disabled{opacity:.5;cursor:default;transform:none}

/* ══════════════════════════════════════════════════════════════════════════
   G3-P1 — THE PAGE GUIDE CSS FAMILY (.pg-*) (2026-06-10)
   Tokens only (no raw hex/shadow/blur); reads on every theme; rounded hovers,
   no edge-strips; popover becomes a bottom sheet on phones (structural).
   ══════════════════════════════════════════════════════════════════════════ */
/* The "Guide" cap-pill — a quiet circled-? affordance in each page header. */
.pg-cap{display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 9px;border-radius:999px;border:.5px solid var(--chrome-border);background:var(--surface-2);color:var(--text-secondary);font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:-.1px;cursor:pointer;flex-shrink:0;transition:transform var(--motion-fast) var(--ease-spring,ease-out),background var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast)}
.pg-cap:hover{background:color-mix(in srgb,var(--app-accent) 10%,var(--surface-2));color:var(--text-primary);box-shadow:var(--shadow-e1)}
.pg-cap:active{transform:scale(.96)}
.pg-cap:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 26%,transparent)}
.pg-cap-ico{width:15px;height:15px;flex-shrink:0;color:var(--app-accent);fill:none;stroke:currentColor}
.pg-cap-lab{line-height:1}
@media (prefers-reduced-motion:reduce){.pg-cap{transition:none}.pg-cap:active{transform:none}}
@media (max-width:640px){.pg-cap-lab{display:none}.pg-cap{padding:6px 8px}}

/* The capability popover — frosted door list (modeled on .docc-sheet). */
.pg-popover{position:fixed;z-index:9400;width:340px;max-width:calc(100vw - 24px);max-height:min(70vh,520px);display:flex;flex-direction:column;overflow:hidden;background:var(--frost-bg-strong,color-mix(in srgb,var(--surface) 88%,transparent));backdrop-filter:var(--frost-blur,blur(20px) saturate(1.8)) brightness(1.04);-webkit-backdrop-filter:var(--frost-blur,blur(20px) saturate(1.8)) brightness(1.04);border-radius:18px;border:.5px solid var(--chrome-border);box-shadow:var(--shadow-e4),inset 0 1px 0 rgba(255,255,255,.16);animation:pgPop var(--motion-fast) var(--ease-spring,ease-out)}
@keyframes pgPop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-transparency:reduce){.pg-popover{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media (prefers-reduced-motion:reduce){.pg-popover{animation:none}}
.pg-pop-head{position:relative;padding:14px 16px 10px;flex-shrink:0;border-bottom:.5px solid color-mix(in srgb,var(--chrome-border) 70%,transparent)}
.pg-pop-h{font-size:14px;font-weight:700;color:var(--text-primary);letter-spacing:-.2px}
.pg-pop-sub{font-size:12px;color:var(--text-secondary);margin-top:2px;line-height:1.35;padding-right:24px}
.pg-pop-x{position:absolute;top:10px;right:10px;appearance:none;border:none;background:transparent;color:var(--text-muted);width:28px;height:28px;border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--motion-fast),color var(--motion-fast)}
.pg-pop-x:hover{background:var(--chrome-bg-hover,var(--surface-2));color:var(--text-primary)}
.pg-pop-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}
.pg-pop-list{padding:8px;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:3px}
.pg-pop-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:9px 10px;border-radius:12px;border:none;background:transparent;font-family:inherit;cursor:pointer;color:var(--text-primary);transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring,ease-out)}
.pg-pop-row:hover{background:color-mix(in srgb,var(--app-accent) 9%,transparent)}
.pg-pop-row:active{transform:scale(.985)}
.pg-pop-row:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 30%,transparent)}
.pg-pop-ico{flex-shrink:0;width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--app-accent) 12%,var(--surface-2));color:var(--app-accent)}
.pg-pop-ico svg{width:16px;height:16px;fill:none;stroke:currentColor}
.pg-pop-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pg-pop-lab{font-size:13.5px;font-weight:600;letter-spacing:-.1px;line-height:1.25}
.pg-pop-pay{font-size:11.5px;color:var(--text-secondary);line-height:1.3}
.pg-pop-chev{flex-shrink:0;color:var(--text-muted);width:14px;height:14px}
.pg-pop-chev svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4}
.pg-pop-empty{padding:18px 12px;text-align:center;font-size:12.5px;color:var(--text-muted)}
@media (prefers-reduced-motion:reduce){.pg-pop-row{transition:none}.pg-pop-row:active{transform:none}}
/* Phone → bottom sheet (structural, not shrunken). */
.pg-popover.pg-popover-sheet{left:0;right:0;bottom:0;top:auto;width:100%;max-width:none;max-height:78vh;border-radius:20px 20px 0 0;animation:pgSheetUp var(--motion-base) var(--ease-spring,ease-out)}
@keyframes pgSheetUp{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.pg-popover.pg-popover-sheet{animation:none}}

/* First-use guide layer — in-flow, never a full-screen overlay. */
.pg-guide{display:flex;align-items:center;gap:16px;padding:16px 18px;margin:0 0 14px;border-radius:var(--radius-lg,16px);background:color-mix(in srgb,var(--app-accent) 7%,var(--card-bg));border:.5px solid color-mix(in srgb,var(--app-accent) 24%,var(--chrome-border));box-shadow:var(--shadow-e1);animation:pgGuideIn var(--motion-base) var(--ease-out,ease)}
@keyframes pgGuideIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.pg-guide.pg-guide-out{opacity:0;transform:translateY(-4px);transition:opacity var(--motion-fast),transform var(--motion-fast)}
@media (prefers-reduced-motion:reduce){.pg-guide,.pg-guide.pg-guide-out{animation:none;transition:none}}
.pg-guide-body{flex:1;min-width:0}
.pg-guide-title{font-size:15px;font-weight:700;color:var(--text-primary);letter-spacing:-.2px;margin-bottom:9px}
.pg-guide-steps{display:flex;flex-wrap:wrap;gap:8px 18px}
.pg-guide-step{display:flex;align-items:flex-start;gap:8px;min-width:180px;flex:1 1 200px}
.pg-guide-num{flex-shrink:0;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;background:var(--app-accent);color:#fff;margin-top:1px}
.pg-guide-stxt{display:flex;flex-direction:column;gap:1px;font-size:12.5px;line-height:1.3}
.pg-guide-stxt b{font-weight:700;color:var(--text-primary)}
.pg-guide-stxt span{color:var(--text-secondary)}
.pg-guide-got{flex-shrink:0;align-self:flex-start;appearance:none;border:.5px solid var(--chrome-border);background:var(--surface-2);color:var(--text-primary);font-family:inherit;font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:999px;cursor:pointer;transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring,ease-out)}
.pg-guide-got:hover{background:var(--surface-3,var(--surface-2));filter:brightness(.98)}
.pg-guide-got:active{transform:scale(.96)}
@media (prefers-reduced-motion:reduce){.pg-guide-got{transition:none}.pg-guide-got:active{transform:none}}
@media (max-width:640px){.pg-guide{flex-direction:column;align-items:stretch;gap:12px}.pg-guide-got{align-self:flex-end}}

/* Quick-action pill row — verb-first, content-sized (never full-width bars). */
.pg-qa-row{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.pg-qa{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;border:.5px solid var(--chrome-border);background:var(--card-bg);color:var(--text-primary);font-family:inherit;font-size:13px;font-weight:600;letter-spacing:-.1px;cursor:pointer;box-shadow:var(--shadow-e1);transition:transform var(--motion-fast) var(--ease-spring,ease-out),background var(--motion-fast),box-shadow var(--motion-fast)}
.pg-qa:hover{background:color-mix(in srgb,var(--app-accent) 9%,var(--card-bg));box-shadow:var(--shadow-e2)}
.pg-qa:active{transform:scale(.97)}
.pg-qa:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 24%,transparent)}
.pg-qa-ico{width:15px;height:15px;flex-shrink:0;color:var(--app-accent);fill:none;stroke:currentColor}
@media (prefers-reduced-motion:reduce){.pg-qa{transition:none}.pg-qa:active{transform:none}}

/* Sample-data ghost — dimmed, labeled example for empty zones (No Static Visuals:
   reads unmistakably as an example, never chart-shaped fake data). */
.pg-ghost{position:relative;opacity:.5;pointer-events:none;filter:grayscale(.3)}
.pg-ghost::after{content:"example";position:absolute;top:8px;right:10px;font-size:9.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-muted);background:var(--surface-2);padding:2px 7px;border-radius:999px;pointer-events:none}

/* Door-focus flash — a brief rounded highlight when a popover door focuses a control. */
.pg-flash{animation:pgFlash 1.1s var(--ease-out,ease)}
@keyframes pgFlash{0%,100%{box-shadow:0 0 0 0 transparent}25%{box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 40%,transparent)}}
@media (prefers-reduced-motion:reduce){.pg-flash{animation:none}}

/* V77.5/V77.6 — Mobile single-pane Apple Notes pattern. data-mobile-view on
   .qn-page-pane toggles which child is visible. Default = list; selecting
   a note sets it to "editor". Tap "< All Notes" sets it back to "list". */
@media (max-width:640px){
  .qn-page-pane[data-mobile-view="list"] .qn-page-editor{display:none !important}
  .qn-page-pane[data-mobile-view="editor"] .qn-page-list{display:none !important}
  .qn-page-pane[data-mobile-view="editor"] .qn-page-editor{display:flex;background:var(--card-bg);padding:0 var(--mobile-gutter,12px)}
  /* In-editor back button replaces "< Lists" with "< [List Name]" when a note
     is open. Apple iOS Notes back chevron: 17px text, accent color, no border. */
  .qn-editor-mobile-back{display:inline-flex;align-items:center;gap:3px;background:transparent;border:none;color:var(--app-accent);font-family:inherit;font-size:17px;font-weight:400;letter-spacing:-.3px;padding:10px 0 8px;cursor:pointer;align-self:flex-start;min-height:44px}
  .qn-editor-mobile-back:active{opacity:.55}
  .qn-editor-mobile-back svg{width:13px !important;height:13px !important;stroke-width:2.6 !important}
}
.qn-editor-mobile-back{display:none}
/* V38c — Folder ⋯ menu button in sidebar row. Hidden until row hover (matches
   the existing "has-settings" pattern on My Lists / Personal). */
.qn-folder-row{position:relative}
.qn-folder-menu{
  background:transparent;border:none;
  color:var(--text-muted);
  width:22px;height:22px;border-radius:var(--radius-sm);
  font-size:14px;line-height:1;font-weight:700;
  cursor:pointer;padding:0;
  opacity:0;transition:opacity var(--motion-fast),background var(--motion-fast),color var(--motion-fast);
  flex-shrink:0;margin-left:2px;
  font-family:inherit;
}
.qn-folder-row:hover .qn-folder-menu{opacity:1}
.qn-folder-menu:hover{background:var(--hover-overlay);color:var(--text-primary);opacity:1}
@media (max-width:640px){.qn-folder-menu{opacity:1}}
/* V38c — Tag chips in sidebar. Small pills, click to filter. */
.qn-tag-chips{display:flex;flex-wrap:wrap;gap:5px;padding:4px 10px 10px}
/* V39kkk — qn-tag-chip: Apple press feedback */
.qn-tag-chip{
  background:var(--surface-2);
  border:0.5px solid var(--chrome-border);
  color:var(--text-secondary, var(--text-primary));
  border-radius:var(--radius-md);
  padding:2px 8px;
  font-size:10.5px;font-weight:500;line-height:1.5;
  cursor:pointer;font-family:inherit;
  transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast),transform var(--motion-fast);
  white-space:nowrap;
}
.qn-tag-chip:hover{background:var(--surface-3,var(--chrome-bg));color:var(--text-primary)}
.qn-tag-chip:active{transform:scale(.96)}
.qn-tag-chip.active{background:var(--app-accent);color:var(--on-accent);border-color:transparent;font-weight:600}
.ai-launcher:hover{transform:translateY(-2px);background:color-mix(in srgb, var(--app-accent) 34%, var(--lg-bg-strong));box-shadow:var(--shadow-e4),inset 0 0 0 0.5px color-mix(in srgb,var(--app-accent) 50%,rgba(255,255,255,.3)),inset 0 1px 0 rgba(255,255,255,.4)}
.ai-launcher:active{transform:translateY(0) scale(.95)}
.ai-launcher svg{width:22px;height:22px}
.ai-launcher.has-msgs::after{content:'';position:absolute;top:6px;right:6px;width:8px;height:8px;background:var(--app-danger);border-radius:50%;border:2px solid color-mix(in srgb,#fff 70%,transparent);box-sizing:content-box}
/* R&R Assistant — dock surface (relocated 2026-06-15 from the right-edge flyout).
   Fills #dockBody (which has padding:12px 12px 24px); negative margins cancel that
   so the message list and bottom-pinned composer span edge-to-edge, mirroring the
   .dock-browser pattern. */
.dock-assistant{position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;height:auto;align-self:stretch;margin:-12px -12px -24px}
.dock-assistant-actions{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:8px 12px 0}
/* Atira identity cluster — orb + wordmark on the LEFT of the actions row (room reserved for
   future conversation controls per the orb-chat-ux spec). Apple-caliber: generous spacing,
   no chrome, no edge-strips. Orb palette is locked inside /js/atira-orb.js. */
.dock-assistant-identity{display:flex;align-items:center;gap:8px;min-width:0}
.atira-orb{width:30px;height:30px;flex:0 0 auto;display:block}
.dock-assistant-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
/* Phase C3 — assistant seed-prompt chips (project-scoped quick questions) */
.dock-ai-seeds{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 8px;flex:0 0 auto}
/* 📰 MCP S5 — connected-apps chip in the assistant */
.dock-ai-connected{padding:0 14px 4px}
.dock-ai-conn-chip{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:650;color:var(--text-secondary);background:var(--chrome-bg);border:0.5px solid var(--chrome-border);border-radius:999px;padding:5px 12px;cursor:pointer;transition:color .15s ease,border-color .15s ease}
.dock-ai-conn-chip:hover{color:var(--text-primary);border-color:var(--app-accent)}
.dock-ai-conn-dot{width:7px;height:7px;border-radius:50%;background:var(--color-success);box-shadow:0 0 6px color-mix(in srgb,var(--color-success) 60%,transparent)}
.dock-ai-seed{border:0.5px solid var(--border);background:var(--card-bg);color:var(--text-secondary,var(--text-muted));font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:999px;cursor:pointer;transition:background var(--motion-fast) ease,color var(--motion-fast) ease,border-color var(--motion-fast) ease}
.dock-ai-seed:hover{background:color-mix(in srgb,var(--app-accent) 10%,transparent);color:var(--app-accent);border-color:color-mix(in srgb,var(--app-accent) 30%,transparent)}
.dock-assistant-input{padding:10px 14px calc(12px + env(safe-area-inset-bottom,0));border-top:0.5px solid var(--chrome-border);display:flex;align-items:flex-end;gap:8px;background:var(--card-bg);flex:0 0 auto}
.dock-assistant-footer{padding:8px 14px calc(8px + env(safe-area-inset-bottom,0));font-size:10.5px;color:var(--text-muted);letter-spacing:-.05px;text-align:center;border-top:0.5px solid var(--chrome-border);flex:0 0 auto}
/* §dock-chat — the mini Team Chat surface. Same edge-to-edge dock-body pattern. */
.dock-chat{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;height:auto;align-self:stretch;margin:-12px -12px -24px}
.dock-chat-empty{padding:28px 16px;text-align:center;font-size:12.5px;color:var(--text-muted)}
/* Field/Office switch (mirrors the chat-header .tc-channel-switch + dock scope chip). */
.dock-chat-switch{display:flex;gap:2px;margin:10px 12px 4px;padding:2px;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 7%,transparent);align-self:flex-start}
.dock-cs-seg{position:relative;display:inline-flex;align-items:center;gap:5px;border:none;background:transparent;color:var(--text-muted);font-size:11.5px;font-weight:700;letter-spacing:-.01em;padding:4px 12px;border-radius:999px;cursor:pointer;transition:background var(--motion-fast) ease,color var(--motion-fast) ease}
.dock-cs-seg:hover{color:var(--text-primary)}
.dock-cs-seg.dock-cs-on{background:var(--card-bg);color:var(--app-accent);box-shadow:var(--shadow-e1)}
.dock-cs-dot{width:6px;height:6px;border-radius:50%;background:var(--app-accent)}
.dock-chat-msgs{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:10px 12px;display:flex;flex-direction:column;gap:7px}
.dock-chat-msg{display:flex;flex-direction:column;gap:2px;max-width:88%;align-self:flex-start}
.dock-chat-msg.mine{align-self:flex-end;align-items:flex-end}
.dock-chat-who{font-size:10.5px;font-weight:700;color:var(--text-muted);padding:0 4px}
.dock-chat-bubble{font-size:13px;line-height:1.4;padding:7px 11px;border-radius:14px;background:var(--surface-3,color-mix(in srgb,var(--text-primary) 7%,transparent));color:var(--text-primary);word-break:break-word}
.dock-chat-msg.mine .dock-chat-bubble{background:var(--app-accent);color:var(--on-accent)}
.dock-chat-composer{display:flex;align-items:flex-end;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0));border-top:0.5px solid var(--chrome-border);background:var(--card-bg);flex:0 0 auto}
.dock-chat-input{flex:1 1 auto;min-width:0;resize:none;max-height:120px;border:0.5px solid var(--border);border-radius:14px;background:var(--surface);color:var(--text-primary);font-family:inherit;font-size:13px;line-height:1.4;padding:8px 12px;outline:none}
.dock-chat-input:focus{border-color:var(--app-accent)}
.dock-chat-send{flex:0 0 auto;width:34px;height:34px;border:none;border-radius:50%;background:var(--app-accent);color:var(--on-accent);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.dock-chat-send:disabled{opacity:.5;cursor:default}
.dock-chat-send svg{width:15px;height:15px}
/* all-scope launcher list */
.dock-chat-search{flex:0 0 auto;display:flex;align-items:center;gap:7px;margin:10px 12px 4px;padding:0 10px;height:34px;border:0.5px solid var(--border);border-radius:999px;background:var(--surface)}
.dock-chat-search:focus-within{border-color:var(--app-accent)}
.dock-chat-search-ico{width:14px;height:14px;flex:0 0 auto;color:var(--text-muted)}
.dock-chat-search-input{flex:1 1 auto;min-width:0;border:none;background:transparent;outline:none;font-family:inherit;font-size:13px;color:var(--text-primary)}
.dock-chat-launchlist{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:10px 10px;display:flex;flex-direction:column;gap:2px}
.dock-chat-launch{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:none;background:transparent;padding:8px 10px;border-radius:10px;cursor:pointer;transition:background var(--motion-fast) ease}
.dock-chat-launch:hover{background:color-mix(in srgb,var(--app-accent) 6%,transparent)}
.dock-chat-launch.dock-chat-on{background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
.dock-chat-launch-ico{flex:0 0 auto;display:inline-flex}
/* convIconFor() returns .tc-conv-mark/.tc-conv-icon spans whose ROUND shape is only styled
   under #teamChatView — in the dock they'd render boxy. Re-assert the shape here (the same
   #teamChatView-scoping trap as the mobile picker). */
.dock-chat-launch-ico .tc-conv-mark{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:700;flex-shrink:0;box-shadow:0 1px 2px rgba(0,0,0,.10)}
.dock-chat-launch-ico .tc-conv-icon{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.dock-chat-launch-ico .tc-avatar,.dock-chat-launch-ico img{border-radius:50%}
/* custom uploaded channel/chat image (2026-06-17 📘) — fills the mark/icon, inherits its border-radius
   (rounded-square for spaces, circle for DMs). Global so it works in the dock list, full chat page,
   header, and picker alike. */
.tc-conv-img{overflow:hidden;padding:0}
.tc-conv-img img{width:100%;height:100%;object-fit:cover;display:block}
.dock-chat-launch-ico .tc-conv-img.tc-conv-mark img{border-radius:9px}
.dock-chat-launch-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.dock-chat-launch-name{font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock-chat-launch-sub{font-size:11px;color:var(--text-muted)}
.dock-chat-badge{flex:0 0 auto;background:var(--app-accent);color:var(--on-accent);font-size:10px;font-weight:700;padding:1px 6px;border-radius:999px;min-width:18px;text-align:center}
.dock-chat-foot{flex:0 0 auto;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0));border-top:0.5px solid var(--chrome-border)}
.dock-chat-openfull{width:100%;border:none;border-radius:10px;background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent);font-size:12.5px;font-weight:600;padding:9px;cursor:pointer}
.dock-chat-openfull:hover{background:color-mix(in srgb,var(--app-accent) 18%,transparent)}
.dock-chat-backrow{display:flex;align-items:center;gap:6px;padding:10px 12px 4px;flex:0 0 auto}
.dock-chat-back{border:none;background:transparent;color:var(--text-muted);width:26px;height:26px;border-radius:7px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.dock-chat-back:hover{background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-primary)}
.dock-chat-back svg{width:14px;height:14px}
.dock-chat-title{font-size:13px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* V-asst1 — assistant header action buttons reworked: cleaner 30px pills with a hairline rest
   surface, accent-tinted "new chat", danger-on-hover "clear", + CSS hover tooltips (data-tip)
   that appear quickly (no native title delay). */
.ai-action{position:relative;background:transparent;border:.5px solid transparent;width:30px;height:30px;border-radius:9px;cursor:pointer;color:var(--text-muted);display:inline-flex;align-items:center;justify-content:center;outline:none;transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast)}
.ai-action:hover{background:color-mix(in srgb,var(--text-primary) 7%,transparent);border-color:var(--chrome-border);color:var(--text-primary)}
.ai-action:active{transform:scale(.94)}
.ai-action:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb, var(--app-accent) 30%, transparent)}
.ai-action svg{width:15px;height:15px}
.ai-action.ai-action-primary{color:var(--app-accent)}
.ai-action.ai-action-primary:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent);border-color:color-mix(in srgb,var(--app-accent) 28%,transparent);color:var(--app-accent)}
.ai-action.ai-action-danger:hover{background:color-mix(in srgb,var(--color-error) 12%,transparent);border-color:color-mix(in srgb,var(--color-error) 28%,transparent);color:var(--color-error)}
/* quick hover tooltip (data-tip) — frosted dark chip below the button */
.ai-action[data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%) translateY(-3px);
  background:var(--tooltip-bg,#1c2230);color:#fff;font-size:11px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;padding:4px 8px;border-radius:7px;
  box-shadow:0 4px 12px -3px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .12s ease,transform .12s ease;z-index:50}
.ai-action[data-tip]:hover::after{opacity:1;transform:translateX(-50%) translateY(0);transition-delay:.35s}
.dock-assistant-act-group{display:flex;align-items:center;gap:2px;flex:0 0 auto}
/* ── Ship 3 — "What Atira remembers" memory panel (body-mounted modal) ────────────
   Apple-caliber: dimmed scrim, frosted material panel, rounded source chips, locked
   palette (no edge-strips, no hard-cornered hovers). Mirrors the confirm/doc-gen
   overlay family. Backdrop rests at opacity:1 (click-trap-safe); the inner card animates. */
.aim-overlay{position:fixed;inset:0;z-index:var(--z-modal-backdrop,1000);background:rgba(0,0,0,.36);backdrop-filter:blur(8px) saturate(1.3);-webkit-backdrop-filter:blur(8px) saturate(1.3);display:flex;align-items:center;justify-content:center;padding:5vh 4vw;opacity:1;animation:aimScrimIn var(--motion-fast,.16s) var(--ease-out,ease)}
@keyframes aimScrimIn{from{opacity:0}to{opacity:1}}
.aim-card{width:min(440px,100%);max-height:min(86vh,720px);display:flex;flex-direction:column;background:var(--card-bg);border-radius:var(--radius-lg,18px);box-shadow:var(--lg-edge),var(--shadow-e3,0 24px 60px rgba(0,0,0,.28));border:.5px solid var(--chrome-border);overflow:hidden;animation:aimCardIn var(--motion-base,.22s) var(--ease-spring,cubic-bezier(.34,1.56,.64,1))}
@keyframes aimCardIn{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
.aim-head{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:16px 18px 12px}
.aim-head-ico{flex:0 0 auto;width:34px;height:34px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent)}
.aim-head-ico svg{width:17px;height:17px}
.aim-head-txt{flex:1 1 auto;min-width:0}
.aim-title{font-size:15.5px;font-weight:700;color:var(--text-primary);letter-spacing:-.2px}
.aim-sub{font-size:12px;color:var(--text-muted);margin-top:1px}
.aim-x{flex:0 0 auto;width:30px;height:30px;border:none;background:transparent;color:var(--text-muted);border-radius:9px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:15px;transition:background var(--motion-fast),color var(--motion-fast)}
.aim-x:hover{background:var(--surface-3);color:var(--text-primary)}
.aim-x:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 30%,transparent)}
/* master pause row */
.aim-pause{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;margin:2px 18px 6px;padding:11px 14px;border-radius:14px;background:var(--surface-2)}
.aim-pause-lbl{font-size:13.5px;font-weight:600;color:var(--text-primary)}
.aim-pause-sub{font-size:11.5px;color:var(--text-muted);margin-top:1px}
.aim-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px 18px 10px;display:flex;flex-direction:column;gap:8px}
.aim-fact{display:flex;flex-direction:column;gap:7px;padding:12px 13px;border-radius:14px;background:var(--surface-2);box-shadow:var(--shadow-e1)}
.aim-fact-body{font-size:13.5px;line-height:1.45;color:var(--text-primary);word-break:break-word}
.aim-fact-edit{width:100%;border:0.5px solid var(--border);border-radius:10px;background:var(--card-bg);color:var(--text-primary);font-family:inherit;font-size:13.5px;line-height:1.45;padding:8px 10px;outline:none;resize:vertical;min-height:52px}
.aim-fact-edit:focus{border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 18%,transparent)}
.aim-fact-row{display:flex;align-items:center;gap:8px}
/* rounded source chip — fill-tinted, no edge-strip */
.aim-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;letter-spacing:-.02em;padding:3px 9px;border-radius:999px}
.aim-chip.is-user{background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent)}
.aim-chip.is-inferred{background:color-mix(in srgb,var(--text-primary) 9%,transparent);color:var(--text-muted)}
.aim-chip-dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.85}
.aim-fact-acts{margin-left:auto;display:flex;align-items:center;gap:2px}
.aim-act{width:28px;height:28px;border:none;background:transparent;color:var(--text-muted);border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--motion-fast),color var(--motion-fast)}
.aim-act:hover{background:var(--surface-3);color:var(--text-primary)}
.aim-act.danger:hover{background:color-mix(in srgb,var(--app-danger) 14%,transparent);color:var(--app-danger)}
.aim-act:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 30%,transparent)}
.aim-act svg{width:14px;height:14px}
.aim-edit-acts{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.aim-btn{border:none;border-radius:9px;font-family:inherit;font-size:12.5px;font-weight:600;padding:6px 13px;cursor:pointer;transition:background var(--motion-fast),opacity var(--motion-fast)}
.aim-btn-primary{background:var(--app-accent);color:var(--on-accent)}
.aim-btn-primary:hover{opacity:.92}
.aim-btn-ghost{background:var(--surface-3);color:var(--text-primary)}
.aim-btn-ghost:hover{background:color-mix(in srgb,var(--text-primary) 12%,transparent)}
/* empty state */
.aim-empty{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:40px 24px;text-align:center}
.aim-empty-ico{width:48px;height:48px;border-radius:15px;display:inline-flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--text-muted)}
.aim-empty-ico svg{width:23px;height:23px}
.aim-empty-t{font-size:13.5px;color:var(--text-secondary,var(--text-muted));max-width:280px;line-height:1.45}
.aim-loading{padding:40px 24px;text-align:center;font-size:13px;color:var(--text-muted)}
/* ── Ship 4 — Conversation switcher popover (frosted, iOS Messages/Notes-style list) ─────────
   Floats over the dock assistant header: glass material (chrome, per DESIGN.md), rounded rows,
   current-highlight via fill-tint (no edge-strip), per-row rename/archive/delete on hover.
   Anchored top-right under the actions row; .dock-assistant is position:relative for this. */
.aicv-panel{position:absolute;top:42px;right:12px;z-index:60;width:min(310px,calc(100% - 24px));max-height:min(64vh,440px);display:flex;flex-direction:column;
  background:var(--frost-bg,var(--surface));backdrop-filter:var(--frost-blur,blur(20px) saturate(1.8));-webkit-backdrop-filter:var(--frost-blur,blur(20px) saturate(1.8));
  border-radius:var(--radius-lg,16px);border:.5px solid var(--chrome-border);box-shadow:var(--lg-edge),var(--shadow-e4,0 24px 60px rgba(0,0,0,.32));
  overflow:hidden;transform-origin:top right;animation:aicvPop var(--motion-base,.2s) var(--ease-spring,cubic-bezier(.34,1.56,.64,1))}
@keyframes aicvPop{from{opacity:0;transform:scale(.94) translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-transparency:reduce){.aicv-panel{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
.aicv-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px 9px;border-bottom:.5px solid color-mix(in srgb,var(--chrome-border) 70%,transparent)}
.aicv-head-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted)}
.aicv-new{display:inline-flex;align-items:center;gap:5px;font-family:inherit;font-size:12px;font-weight:600;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 12%,transparent);border:none;border-radius:999px;padding:5px 11px 5px 9px;cursor:pointer;transition:background var(--motion-fast),transform var(--motion-fast)}
.aicv-new svg{width:12px;height:12px}
.aicv-new:hover{background:color-mix(in srgb,var(--app-accent) 20%,transparent)}
.aicv-new:active{transform:scale(.96)}
.aicv-new:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 30%,transparent)}
.aicv-list{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px;display:flex;flex-direction:column;gap:3px}
.aicv-list-arch{padding-top:0}
.aicv-row{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:transparent;border:none;border-radius:11px;padding:8px 9px;cursor:pointer;font-family:inherit;color:var(--text-primary);transition:background var(--motion-fast)}
.aicv-row:hover{background:var(--surface-3,color-mix(in srgb,var(--text-primary) 7%,transparent))}
.aicv-row.is-current{background:color-mix(in srgb,var(--app-accent) 13%,transparent)}
.aicv-row.is-current:hover{background:color-mix(in srgb,var(--app-accent) 18%,transparent)}
.aicv-row:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 30%,transparent)}
.aicv-row-ico{flex:0 0 auto;width:28px;height:28px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--text-primary) 7%,transparent);color:var(--text-muted)}
.aicv-row.is-current .aicv-row-ico{background:color-mix(in srgb,var(--app-accent) 18%,transparent);color:var(--app-accent)}
.aicv-row-ico svg{width:14px;height:14px}
.aicv-row-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.aicv-row-title{font-size:13px;font-weight:600;color:var(--text-primary);letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.aicv-row.is-current .aicv-row-title{color:var(--app-accent)}
.aicv-row-meta{font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aicv-row-acts{flex:0 0 auto;display:flex;align-items:center;gap:1px;opacity:0;transition:opacity var(--motion-fast)}
.aicv-row:hover .aicv-row-acts,.aicv-row:focus-within .aicv-row-acts{opacity:1}
.aicv-act{width:26px;height:26px;border:none;background:transparent;color:var(--text-muted);border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--motion-fast),color var(--motion-fast)}
.aicv-act:hover{background:color-mix(in srgb,var(--text-primary) 12%,transparent);color:var(--text-primary)}
.aicv-act.danger:hover{background:color-mix(in srgb,var(--app-danger) 14%,transparent);color:var(--app-danger)}
.aicv-act:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 30%,transparent)}
/* V-asst1 — Memory panel (shares the .aicv-panel shell). Pause row + facts list + add-input,
   re-scoped from the old full-screen modal to the anchored-panel padding. */
/* Memory panel — a touch wider + taller so it doesn't feel cramped (Gavin: "tiny"). Overrides
   the narrower .aicv-panel default just for memory. */
.aim-panel{width:min(360px,calc(100% - 24px));max-height:min(78vh,560px)}
.aicv-head-title{display:inline-flex;align-items:center;gap:7px}
.aim-head-ico{display:inline-flex;color:var(--app-accent)}
.aim-head-ico svg{width:14px;height:14px}
.aim-panel .aim-pause{margin:8px 10px 4px;padding:9px 11px;border-radius:11px;background:color-mix(in srgb,var(--text-primary) 5%,transparent)}
.aim-panel .aim-pause-lbl{font-size:12.5px}
.aim-panel .aim-list{padding:4px 10px 8px;gap:6px}
.aim-add{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:9px 10px;border-top:.5px solid color-mix(in srgb,var(--chrome-border) 70%,transparent)}
.aim-add-input{flex:1 1 auto;min-width:0;height:32px;border:.5px solid var(--chrome-border);background:var(--surface-2);border-radius:var(--radius-pill);padding:0 12px;font-size:12.5px;color:var(--text-primary);font-family:inherit;outline:none;transition:border-color var(--motion-fast),box-shadow var(--motion-fast),background var(--motion-fast)}
.aim-add-input:focus{background:var(--card-bg);border-color:color-mix(in srgb,var(--app-accent) 45%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 12%,transparent)}
.aim-add-btn{flex:0 0 auto;width:32px;height:32px;border:none;border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  background:var(--app-accent);color:#fff;box-shadow:var(--shadow-e1);transition:filter var(--motion-fast),transform var(--motion-fast)}
.aim-add-btn:hover{filter:brightness(1.06)}
.aim-add-btn:active{transform:scale(.94)}
.aim-add-btn svg{width:15px;height:15px}
.aicv-act svg{width:13px;height:13px}
/* inline rename row */
.aicv-row.aicv-editing{flex-direction:column;align-items:stretch;gap:7px;cursor:default}
.aicv-row.aicv-editing:hover{background:color-mix(in srgb,var(--app-accent) 8%,transparent)}
.aicv-edit-input{width:100%;box-sizing:border-box;font-family:inherit;font-size:13px;color:var(--text-primary);background:var(--card-bg);border:.5px solid var(--chrome-border);border-radius:9px;padding:7px 9px;outline:none;transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
.aicv-edit-input:focus{border-color:color-mix(in srgb,var(--app-accent) 55%,var(--chrome-border));box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 16%,transparent)}
.aicv-edit-acts{display:flex;align-items:center;gap:7px;justify-content:flex-end}
.aicv-mini{border:none;border-radius:8px;font-family:inherit;font-size:12px;font-weight:600;padding:5px 12px;cursor:pointer;transition:background var(--motion-fast),opacity var(--motion-fast)}
.aicv-mini.primary{background:var(--app-accent);color:var(--on-accent)}
.aicv-mini.primary:hover{opacity:.92}
.aicv-mini.ghost{background:var(--surface-3,color-mix(in srgb,var(--text-primary) 8%,transparent));color:var(--text-primary)}
.aicv-mini.ghost:hover{background:color-mix(in srgb,var(--text-primary) 14%,transparent)}
/* archived disclosure */
.aicv-arch-toggle{flex:0 0 auto;display:flex;align-items:center;gap:7px;width:calc(100% - 12px);margin:2px 6px;padding:7px 9px;background:transparent;border:none;border-radius:9px;cursor:pointer;font-family:inherit;font-size:11.5px;font-weight:600;color:var(--text-muted);transition:background var(--motion-fast),color var(--motion-fast)}
.aicv-arch-toggle:hover{background:var(--surface-3,color-mix(in srgb,var(--text-primary) 7%,transparent));color:var(--text-secondary,var(--text-primary))}
.aicv-arch-toggle:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 30%,transparent)}
.aicv-arch-chev{width:11px;height:11px;flex:0 0 auto;color:var(--text-muted)}
.aicv-arch-count{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--text-muted);background:color-mix(in srgb,var(--text-primary) 9%,transparent);border-radius:999px;padding:1px 7px}
.aicv-empty{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:30px 22px;text-align:center}
.aicv-empty-ico{width:42px;height:42px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--text-muted)}
.aicv-empty-ico svg{width:20px;height:20px}
.aicv-empty-t{font-size:12.5px;color:var(--text-secondary,var(--text-muted));max-width:220px;line-height:1.4}
.aicv-loading{padding:30px 22px;text-align:center;font-size:12.5px;color:var(--text-muted)}
.ai-msg{max-width:90%;padding:8px 12px;border-radius:var(--radius-lg);font-size:13px;line-height:1.45;letter-spacing:-.05px;word-wrap:break-word}
.ai-msg.user{align-self:flex-end;background:var(--app-accent);color:var(--on-accent);border-bottom-right-radius:4px}
.ai-msg.assistant{align-self:flex-start;background:var(--surface-2);color:var(--text-primary);border-bottom-left-radius:4px}
.ai-msg.assistant strong{color:var(--text-primary)}
/* V39uuuuu — AI chat code/pre backgrounds use theme-aware color-mix.
   Was rgba(0,0,0,.06) which was invisible on dark themes (~6% black on near-black). */
.ai-msg.assistant code{background:color-mix(in srgb,var(--text-primary) 8%,transparent);padding:1px 4px;border-radius:var(--radius-xs);font-family:'SF Mono',Menlo,monospace;font-size:12px}
.ai-msg.assistant pre{background:color-mix(in srgb,var(--text-primary) 8%,transparent);padding:8px 10px;border-radius:var(--radius-sm);font-family:'SF Mono',Menlo,monospace;font-size:11.5px;overflow-x:auto;margin:6px 0}
.ai-sources{font-size:11px;color:var(--text-muted);padding:4px 12px 0 12px;margin-top:-2px}
.ai-source-chip{font-size:10.5px;background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent);border:none;padding:2px 8px;border-radius:var(--radius-sm);margin:0 4px 4px 0;cursor:pointer;font-family:inherit;outline:none;transition:background var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast)}
/* V39iii — ai-source-chip: press feedback */
.ai-source-chip:hover{background:color-mix(in srgb,var(--app-accent) 22%,transparent)}
.ai-source-chip:active{transform:scale(.96)}
.ai-source-chip:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb, var(--app-accent) 30%, transparent)}
.ai-actions{display:flex;flex-wrap:wrap;gap:6px;padding:6px 12px 2px 12px;margin-top:2px}
.ai-action-chip{font-size:11.5px;background:var(--chrome-bg);color:var(--text-primary);border:0.5px solid var(--chrome-border);padding:3px 9px;border-radius:var(--radius-btn-sm,8px);cursor:pointer;font-family:inherit;letter-spacing:-.05px;transition:background var(--motion-fast),transform var(--motion-fast)}
.ai-action-chip:hover{background:var(--chrome-bg-hover)}
.ai-action-chip:active{transform:scale(.96)}
.ai-action-chip:focus{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 30%,transparent)}
/* MCP/AI — confirm-before-write proposal cards */
.ai-proposal{align-self:flex-start;max-width:90%;margin:6px 0 2px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--app-accent) 8%,var(--surface-2));border:0.5px solid color-mix(in srgb,var(--app-accent) 30%,transparent)}
.ai-proposal.sensitive{background:color-mix(in srgb,#d0463b 9%,var(--surface-2));border-color:color-mix(in srgb,#d0463b 35%,transparent)}
.ai-prop-head{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--app-accent);margin-bottom:4px}
.ai-proposal.sensitive .ai-prop-head{color:#c0392b}
.ai-prop-body{font-size:13px;color:var(--text-primary);line-height:1.4;margin-bottom:8px}
.ai-prop-acts{display:flex;gap:8px}
.ai-prop-confirm{font-size:12px;font-weight:600;padding:5px 14px;border-radius:999px;border:none;cursor:pointer;background:var(--app-accent);color:var(--on-accent,#fff)}
.ai-prop-confirm.sensitive{background:#c0392b}
.ai-prop-confirm:hover{filter:brightness(1.06)}
.ai-prop-cancel{font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px;border:0.5px solid var(--chrome-border);background:var(--surface);color:var(--text-secondary);cursor:pointer}
.ai-prop-status{font-size:12px;font-weight:600}
.ai-prop-status.done{color:#0a8a5a;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.ai-prop-status.cancelled{color:var(--text-muted)}.ai-prop-status.error{color:#c0392b}
.ai-prop-followup{font-weight:600}
/* 🪺 B1.3 — the capped-turn block: usage numbers + the request-more CTA under a budget refusal.
   Warning-toned (a limit is a state, not an error), rounded throughout, no edge-strip. */
.ai-budget{align-self:flex-start;max-width:90%;margin:6px 0 2px;padding:9px 12px;border-radius:12px;display:flex;flex-direction:column;gap:7px;align-items:flex-start;background:color-mix(in srgb,var(--color-warning) 9%,var(--surface-2));border:0.5px solid color-mix(in srgb,var(--color-warning) 30%,transparent)}
.ai-budget-nums{font-size:11.5px;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.ai-budget-ask{font-size:12px;font-weight:600;padding:5px 14px;border-radius:999px;border:none;cursor:pointer;background:var(--app-accent);color:var(--on-accent,#fff);font-family:inherit;transition:filter var(--motion-fast),transform var(--motion-fast)}
.ai-budget-ask:hover{filter:brightness(1.06)}
.ai-budget-ask:active{transform:scale(.96)}
.ai-budget-ask:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 30%,transparent)}
.ai-budget-sent{font-size:12px;font-weight:600;color:#0a8a5a}
/* Smart Auto-Fill Forms (Ship 2) — schema-driven editable proposal form */
.ai-proposal-form{max-width:100%;padding:12px 13px 13px}
.aff-form{display:flex;flex-direction:column;gap:10px}
.aff-form-summary{font-size:12.5px;color:var(--text-secondary);line-height:1.4}
.aff-warn-note{display:flex;align-items:flex-start;gap:6px;font-size:11.5px;font-weight:600;color:#c0392b;line-height:1.35;padding:7px 9px;border-radius:10px;background:color-mix(in srgb,#d0463b 8%,transparent)}
.aff-warn-note .ic{width:13px;height:13px;flex:0 0 auto;margin-top:1px}
.aff-rows{display:flex;flex-direction:column;gap:9px}
.aff-row{display:flex;flex-direction:column;gap:4px}
.aff-label{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;letter-spacing:.2px;color:var(--text-secondary)}
.aff-row.aff-filled .aff-label{color:var(--text-primary)}
.aff-dot{width:11px;height:11px;color:#0a8a5a;opacity:.9}
.aff-req{color:var(--app-accent);font-weight:800;margin-left:1px}
.ai-proposal.sensitive .aff-req{color:#c0392b}
.aff-control{width:100%;box-sizing:border-box;min-height:34px;font-size:13px;font-family:inherit;color:var(--text-primary);background:var(--surface);border:0.5px solid var(--chrome-border);border-radius:10px;padding:7px 10px;transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
.aff-textarea{min-height:54px;resize:vertical;line-height:1.4}
.aff-control::placeholder{color:var(--text-muted)}
.aff-control:focus{outline:none;border-color:color-mix(in srgb,var(--app-accent) 55%,var(--chrome-border));box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 16%,transparent)}
.aff-row.aff-filled .aff-control{background:color-mix(in srgb,var(--app-accent) 5%,var(--surface));border-color:color-mix(in srgb,var(--app-accent) 22%,var(--chrome-border))}
.aff-row.aff-blank .aff-control{background:var(--surface-2)}
.aff-row.aff-readonly .aff-control{opacity:.7;cursor:default;background:var(--surface-2)}
.aff-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a8a8e' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:26px}
.aff-row-bool{flex-direction:row;align-items:center;gap:8px}
.aff-check{width:17px;height:17px;flex:0 0 auto;accent-color:var(--app-accent);cursor:pointer;margin:0}
.aff-blabel{font-size:12.5px;font-weight:600;color:var(--text-primary);cursor:pointer;display:flex;align-items:center;gap:3px}
.aff-error{font-size:11.5px;font-weight:600;color:#c0392b;line-height:1.35;padding:7px 9px;border-radius:9px;background:color-mix(in srgb,#d0463b 8%,transparent)}
.aff-foot{display:flex;gap:8px;margin-top:2px}
.aff-approve{font-size:12.5px;font-weight:600;padding:7px 16px;border-radius:999px;border:none;cursor:pointer;background:var(--app-accent);color:var(--on-accent,#fff);transition:filter var(--motion-fast)}
.aff-approve:hover{filter:brightness(1.06)}
.aff-approve.sensitive{background:#c0392b}
.aff-cancel{font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:999px;border:0.5px solid var(--chrome-border);background:var(--surface);color:var(--text-secondary);cursor:pointer;transition:background var(--motion-fast)}
.aff-cancel:hover{background:var(--surface-2)}
.ai-empty{text-align:center;color:var(--text-muted);font-size:12.5px;padding:32px 16px;line-height:1.5}
.ai-empty strong{color:var(--text-primary)}
/* V-asst1 — added a transition so the focus bg/border/glow EASES in (was instant → read as a
   jarring "flash" on every tab re-entry; combined with the now-guarded autofocus). */
.ai-input{flex:1;background:var(--surface-2);border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);padding:8px 10px;font-size:13px;color:var(--text-primary);font-family:inherit;letter-spacing:-.05px;resize:none;line-height:1.4;outline:none;transition:background var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out)}
.ai-input:focus{background:var(--card-bg);border-color:color-mix(in srgb,var(--app-accent) 50%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 12%,transparent)}
.ai-send{background:var(--app-accent);color:var(--on-accent);border:none;width:32px;height:32px;border-radius:var(--radius-md);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity var(--motion-fast),transform var(--motion-fast)}
.ai-send:hover{opacity:.92}
.ai-send:active{transform:scale(.94);opacity:1}
.ai-send:disabled{opacity:.5;cursor:not-allowed}
.ai-send svg{width:14px;height:14px}
/* U5 — voice dictation mic: quiet sibling of .ai-send; turns accent-red while recording. */
.ai-mic{background:var(--surface-2);color:var(--text-secondary);border:0.5px solid var(--chrome-border);width:32px;height:32px;border-radius:var(--radius-md);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast)}
.ai-mic:hover{background:var(--chrome-bg-hover)}
.ai-mic:active{transform:scale(.94)}
.ai-mic svg{width:14px;height:14px}
.ai-mic.dl-mic-rec{background:color-mix(in srgb,var(--danger,#e5484d) 16%,transparent);color:var(--danger,#e5484d);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger,#e5484d) 18%,transparent)}
/* ── Mobile (≤640px): dock assistant surface — safe-area composer + tap targets ──
   The dock itself becomes a full-width sheet on phones; here we only tune the
   inner assistant ergonomics: clear icon + send hit --tap-min, ai-input uses 16px
   to suppress iOS zoom-on-focus, and inline action/source chips become real tap
   targets. (Relocated from the old .ai-sidebar flyout block — Task 2.13 carryover.) */
@media (max-width: 640px) {
  /* Clear icon hits the tap target on phones (was 28x28). */
  .dock-assistant-actions{padding:8px var(--mobile-gutter,12px) 0}
  .ai-action{width:var(--tap-min);height:var(--tap-min);min-width:var(--tap-min);min-height:var(--tap-min)}
  .ai-action svg{width:16px;height:16px}
  /* Ship 4 — conversation popover: full-width sheet feel + hittable rows/acts on phones. */
  .aicv-panel{top:50px;right:var(--mobile-gutter,12px);width:calc(100% - var(--mobile-gutter,12px)*2);max-height:70vh}
  .aicv-row{padding:11px 10px}
  .aicv-act{width:36px;height:36px}
  .aicv-row-acts{opacity:1}
  /* Body padding follows the mobile gutter for consistency with other views. */
  .dock-assistant-body{padding:12px var(--mobile-gutter,12px)}
  /* Composer: ai-input uses 16px to suppress iOS zoom; ai-send hits --tap-min
     so the tap target matches the textarea height. */
  .dock-assistant-input{
    padding:10px var(--mobile-gutter,12px);
    gap:10px;
  }
  .ai-input{font-size:16px;padding:10px 12px}
  .ai-send{width:var(--tap-min);height:var(--tap-min);min-width:var(--tap-min);min-height:var(--tap-min)}
  .ai-send svg{width:16px;height:16px}
  /* Inline assistant action buttons ("Draft as RFI", "Add as todo", "Copy") —
     each chip becomes a real tap target. Width auto so labels stay one-line
     when possible; min-height keeps the row hittable. */
  .ai-actions{padding:8px 4px 2px;gap:8px}
  .ai-action-chip{
    min-height:var(--tap-min);
    padding:8px 14px;
    font-size:13px;
    display:inline-flex;align-items:center;
  }
  /* Source citation chips — same tap-min treatment so users can reliably
     tap "Tell me more about <heading>" follow-ups on phones. */
  .ai-sources{padding:6px 4px 0}
  .ai-source-chip{
    min-height:var(--tap-min);
    padding:8px 12px;
    font-size:12.5px;
    display:inline-flex;align-items:center;
  }
  /* Bubble width can use a touch more horizontal real estate on phones. */
  .ai-msg{max-width:92%;font-size:14px;padding:10px 13px}
  /* Footer is non-essential — keep but center-pad consistently. */
  .dock-assistant-footer{padding:6px var(--mobile-gutter,12px) calc(6px + env(safe-area-inset-bottom,0))}
  /* Launcher position handled by the mobile tab bar block (3954) which adds
     bottom:calc(58px + safe-area). Tighten right gutter so it doesn't crowd
     the edge. */
  .ai-launcher{right:14px}
}
.user-menu.show{display:block}
.user-menu.show{transform:scale(1) translateY(0);opacity:1}
/* Account identity header */
.user-menu .um-account{display:flex;align-items:center;gap:11px;padding:8px 9px 11px}
.um-account .um-avatar{flex:0 0 auto}  /* orb depth comes from the shared .acct-avatar orb rule */
.um-account .um-id{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:1px}
.um-account .um-name{font-size:14px;font-weight:650;letter-spacing:-.2px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.um-account .um-email{font-size:11.5px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.um-account .um-role-wrap{margin-top:4px}
/* Shared avatar treatment (account header + profile + admin) */
.acct-avatar{border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:650;letter-spacing:-.3px;overflow:hidden;position:relative;flex-shrink:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 .5px rgba(0,0,0,.06),0 2px 6px rgba(0,0,0,.14)}
.acct-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.acct-avatar.sz-36{width:36px;height:36px;font-size:14.5px}
.acct-avatar.sz-30{width:30px;height:30px;font-size:12px}
/* Shared role badge */
.role-badge{display:inline-flex;align-items:center;gap:4px;height:18px;padding:0 8px;border-radius:var(--radius-pill);font-size:10.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;line-height:1;white-space:nowrap;border:0.5px solid transparent}
.role-badge svg{width:9px;height:9px}
.role-badge[data-role="admin"]{background:color-mix(in srgb,var(--app-accent) 16%,transparent);color:var(--app-accent);border-color:color-mix(in srgb,var(--app-accent) 28%,transparent)}
.role-badge[data-role="manager"]{background:var(--color-info-bg,color-mix(in srgb,var(--color-info,#3b82f6) 14%,transparent));color:var(--color-info,#3b82f6);border-color:color-mix(in srgb,var(--color-info,#3b82f6) 26%,transparent)}
.role-badge[data-role="office"]{background:color-mix(in srgb,var(--color-success,#34c759) 14%,transparent);color:var(--color-success,#34c759);border-color:color-mix(in srgb,var(--color-success,#34c759) 26%,transparent)}
.role-badge[data-role="field"]{background:color-mix(in srgb,var(--color-warning,#ff9500) 16%,transparent);color:var(--color-warning,#ff9500);border-color:color-mix(in srgb,var(--color-warning,#ff9500) 28%,transparent)}
.role-badge[data-role="viewer"]{background:color-mix(in srgb,var(--text-primary) 9%,transparent);color:var(--text-secondary);border-color:color-mix(in srgb,var(--text-primary) 16%,transparent)}
/* Menu rows */
.user-menu .user-menu-row{padding:8px 10px;font-size:13.5px;font-weight:500;letter-spacing:-.1px;cursor:pointer;display:flex;gap:11px;align-items:center;border-radius:9px;color:var(--text-primary);transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.user-menu .user-menu-row .um-ico{width:17px;height:17px;flex:0 0 auto;color:var(--text-secondary);display:inline-flex;align-items:center;justify-content:center}
.user-menu .user-menu-row .um-ico svg{width:16px;height:16px}
.user-menu .user-menu-row > span:not(.um-ico){flex:1 1 auto}
.user-menu .user-menu-row .um-chev{width:12px;height:12px;color:var(--text-muted);flex:0 0 auto}
.user-menu .user-menu-row:hover{background:color-mix(in srgb,var(--app-accent) 11%,transparent)}
.user-menu .user-menu-row:active{transform:scale(.975)}
.user-menu .user-menu-row.um-danger{color:var(--app-danger)}
.user-menu .user-menu-row.um-danger .um-ico{color:var(--app-danger)}
.user-menu .user-menu-row.um-danger:hover{background:color-mix(in srgb,var(--app-danger) 12%,transparent)}
.user-menu .user-menu-head{padding:9px 10px 4px;font-size:10.5px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}
.user-menu .user-menu-head.theme-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.user-menu .theme-active-name{font-size:11.5px;font-weight:650;color:var(--app-accent);text-transform:none;letter-spacing:0}
.user-menu hr{border:none;border-top:0.5px solid var(--chrome-border);margin:6px 8px}
/* Toggle rows inside the menu get the same row padding + radius rhythm */
.user-menu .density-toggle-row{padding:7px 10px;border-radius:9px}
.user-menu .density-toggle-row > span:first-child{display:inline-flex;align-items:center;gap:11px;font-size:13.5px;font-weight:500;color:var(--text-primary)}
/* V-attn1 — attention on-sign-in 3-way segmented control (Atira control language) */
.user-menu .um-seg-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 10px}
.user-menu .um-seg-lbl{font-size:13.5px;font-weight:500;color:var(--text-primary)}
.user-menu .um-seg{display:inline-flex;gap:3px;padding:3px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--text-primary) 5%,transparent);border:.5px solid var(--chrome-border)}
.user-menu .um-seg-btn{appearance:none;border:0;background:transparent;color:var(--text-secondary);font:inherit;font-size:11.5px;font-weight:600;padding:4px 11px;border-radius:var(--radius-pill);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast)}
.user-menu .um-seg-btn:hover:not(.um-seg-on){color:var(--text-primary)}
.user-menu .um-seg-btn.um-seg-on{color:var(--app-accent);background:var(--card-bg);box-shadow:var(--shadow-e1),var(--bevel-top)}
[data-theme="midnight"] .user-menu .um-seg-btn.um-seg-on{background:color-mix(in srgb,#fff 86%,var(--surface-3))}
.user-menu .density-toggle-row .um-ico{width:17px;height:17px;color:var(--text-secondary);display:inline-flex;align-items:center;justify-content:center}
.user-menu .density-toggle-row .um-ico svg{width:16px;height:16px}
@media (max-width:640px){
  .user-menu{right:8px;width:calc(100vw - 16px);max-width:340px}
  .user-menu .user-menu-row{min-height:var(--tap-min);font-size:15px}
}

/* Base avatar — round by default everywhere (2026-06-28). Was missing: only #teamChatView/
   .dgst-av/etc carried their own .tc-avatar shape, so contexts that just sized it (e.g. the
   email composer .ecx-c-row) rendered the letter-initial circle as an unstyled SQUARE. This
   base gives every .tc-avatar the round chip + centered initials; scoped rules (incl the one
   intentional 6px #teamChatView .tc-header-mark, which is more specific) still override. */
.tc-avatar{border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--on-accent,#fff);font-weight:600;line-height:1;flex:none;overflow:hidden;position:relative}
/* V-navmode 2026-06-28 — SITE-WIDE orb avatar treatment. Every chat/user/channel/card avatar
   (.tc-avatar, .acct-avatar, .avatar, .pm-avatar, .pc-avatar) reads as a RAISED ORB: the per-user
   hue stays the base; a SOFT top specular cap (%-sized so it scales to any avatar size; kept gentle
   — true sphere, not glossy plastic) + a deeper inner bottom shade + a soft lift give sphere depth.
   Photos sit above the cap, framed by the lift. */
/* specular cap — NOT on .pc-avatar (its ::after renders the initials text via attr(data-initials));
   .pc-avatar still gets the box-shadow orb lift below + a ::before specular instead. */
/* 🖇️ 2026-07-08 — `.ct-card-av` (the project-page contact + team cards) was NOT in this family:
   it rendered a flat 13px squircle with no inner bottom shade and no specular cap, while every
   other avatar in the app was a raised round orb. Joined here so the contacts surface matches. */
.tc-avatar:not(.tc-avatar-spacer)::after,.acct-avatar::after,.avatar:not(.avatar-empty)::after,.pm-avatar::after,.ct-card-av::after,.pc-avatar::before{content:'';position:absolute;left:50%;top:7%;transform:translateX(-50%);width:64%;height:46%;border-radius:50%;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.5),rgba(255,255,255,0) 75%)}
.tc-avatar-spacer{box-shadow:none!important}
.tc-avatar,.acct-avatar,.avatar,.pm-avatar,.ct-card-av,.pc-avatar{position:relative;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 4px rgba(0,0,0,.16),inset 0 0 0 .5px rgba(0,0,0,.05),0 1px 2px rgba(16,24,40,.14),0 2px 6px -2px rgba(16,24,40,.2)}
.tc-avatar img,.acct-avatar img,.avatar img,.pm-avatar img,.ct-card-av img,.pc-avatar img{position:relative;z-index:1}
/* Avatar images — shared across pill, menus, chat, team list */
.tc-avatar.tc-avatar-img,.user-pill .user-avatar.tc-avatar-img{padding:0;overflow:hidden;background:var(--surface-2);position:relative}
.tc-avatar.tc-avatar-img img,.user-pill .user-avatar.tc-avatar-img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.tc-avatar.tc-avatar-broken{background:linear-gradient(135deg,#bbb,#888)}

/* Profile modal — Apple-grade glass treatment */
.profile-modal-overlay{position:fixed;inset:0;background:rgba(15,18,25,.42);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);display:flex;align-items:center;justify-content:center;padding:24px 16px;z-index:var(--z-modal);opacity:0;pointer-events:none;transition:opacity var(--motion-slow) cubic-bezier(.32,.72,0,1)}
.profile-modal-overlay.show{opacity:1;pointer-events:auto}
/* 2026-05-26 — widened from 520px → 820px on desktop/iPad. 520 felt cramped for
   a real settings surface (Daily Digest, defaults, the QN size picker). The
   ≤640px rule below still overrides this to a full-bleed mobile sheet, so phones
   are unchanged. max-width keeps the 24px overlay gutters on narrower iPads. */
.profile-modal{background:var(--modal-bg);border-radius:var(--radius-modal);width:min(1040px, calc(100vw - 48px));max-width:calc(100vw - 48px);max-height:calc(100vh - 48px);display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,sans-serif;transform:scale(.96) translateY(8px);opacity:0;transition:transform .34s cubic-bezier(.32,.72,0,1),opacity var(--motion-slow) cubic-bezier(.32,.72,0,1);overflow:hidden}
.profile-modal-overlay.show .profile-modal{transform:scale(1) translateY(0);opacity:1}
.profile-modal-head{padding:18px 22px 12px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;border-bottom:0.5px solid var(--chrome-border);background:var(--surface-frost,var(--surface));position:relative;z-index:1}
.profile-modal-title{font-size:17px;font-weight:700;letter-spacing:-.3px;color:var(--text-primary)}
.profile-modal-close{width:28px;height:28px;border-radius:50%;border:none;background:var(--surface-2);color:var(--text-muted);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--motion-base),transform var(--motion-fast)}
.profile-modal-close:hover{background:var(--surface)}
.profile-modal-close:active{transform:scale(.92)}
.profile-modal-body{padding:0;display:flex;flex-direction:column;align-items:stretch;gap:0;flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.profile-modal-body > *{flex-shrink:0}
/* Hero identity zone */
.profile-hero{display:flex;align-items:center;gap:16px;padding:22px 24px 20px;background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 9%,var(--surface)),var(--surface));border-bottom:0.5px solid var(--chrome-border)}
.profile-hero .profile-avatar-frame{width:84px;height:84px}
.profile-avatar-frame .profile-avatar-placeholder{font-size:30px}
.profile-hero-id{min-width:0;display:flex;flex-direction:column;gap:3px}
.profile-hero-name{font-size:20px;font-weight:700;letter-spacing:-.4px;color:var(--text-primary);line-height:1.15}
.profile-hero-email{font-size:13px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-hero-role{margin-top:6px}
.profile-hero-hint{font-size:11.5px;color:var(--text-muted);margin-top:5px}
/* Sections */
.profile-section{padding:18px 24px;border-bottom:0.5px solid var(--chrome-border)}
.profile-section:last-child{border-bottom:none}
.profile-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin:0 0 12px}
.profile-field-label{font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:5px;display:block}
/* Navigation mode chooser — two illustrated cards (mini layout previews), instant-apply. */
.navmode-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.navmode-card{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px;border-radius:var(--radius-lg);cursor:pointer;
  background:var(--surface);border:1px solid var(--chrome-border);text-align:left;font:inherit;
  transition:border-color var(--motion-fast),background var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast)}
.navmode-card:hover{background:var(--surface-2);border-color:color-mix(in srgb,var(--app-accent) 30%,var(--chrome-border))}
.navmode-card:active{transform:scale(.985)}
.navmode-card.on{border-color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 8%,var(--surface));
  box-shadow:0 0 0 1px var(--app-accent),0 2px 10px color-mix(in srgb,var(--app-accent) 16%,transparent)}
.navmode-art{width:100%;height:62px;border-radius:9px;overflow:hidden;position:relative;margin-bottom:8px;
  background:var(--app-bg);border:0.5px solid var(--chrome-border)}
.navmode-art .nm-bar{position:absolute;left:0;right:0;top:0;height:14px;background:color-mix(in srgb,var(--app-accent) 55%,var(--surface))}
.navmode-art .nm-rail{position:absolute;left:0;top:0;bottom:0;width:18px;background:color-mix(in srgb,var(--app-accent) 55%,var(--surface))}
.navmode-art-top .nm-body{position:absolute;left:7px;right:7px;top:21px;bottom:7px;border-radius:5px;background:var(--card-bg);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.navmode-art-side .nm-body{position:absolute;left:25px;right:7px;top:7px;bottom:7px;border-radius:5px;background:var(--card-bg);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.navmode-card.on .navmode-art .nm-bar,.navmode-card.on .navmode-art .nm-rail{background:var(--app-accent)}
.navmode-name{font-size:13.5px;font-weight:700;color:var(--text-primary)}
.navmode-sub{font-size:11px;font-weight:500;color:var(--text-muted);line-height:1.3}
.navmode-card.on .navmode-name{color:var(--app-accent)}
.profile-field-input,.profile-section select.profile-field-input{appearance:none;width:100%;box-sizing:border-box;padding:9px 12px;border:0.5px solid var(--chrome-border);border-radius:var(--radius-input);font-size:14px;font-family:inherit;background:var(--card-bg);color:var(--text-primary);transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
.profile-field-input:focus{outline:none;border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 18%,transparent)}
.profile-section select.profile-field-input{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%23888' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 11px center;padding-right:30px}
.profile-field-row{display:flex;gap:10px;align-items:flex-end}
.profile-field-msg{display:none;margin-top:9px;font-size:12px;padding:7px 10px;border-radius:var(--radius-tag);line-height:1.4}
/* 2026-05-26 — on the WIDE desktop/iPad modal, lay each section out as a
   two-column row: the section TITLE sits in a left rail, the controls fill the
   rest of the width (macOS System Settings pattern). This uses the full width
   evenly — no lopsided empty band on the right — and works regardless of each
   section's inner markup. The hero is exempt (it owns its own layout). Mobile
   (≤640) keeps the stacked single-column layout. */
@media (min-width: 641px) {
  .profile-modal-body .profile-section{
    display:grid;
    grid-template-columns:200px minmax(0,1fr);
    column-gap:32px;
    align-items:start;
    padding:22px 32px;
  }
  .profile-modal-body .profile-section-title{margin:2px 0 0;padding-top:2px}
  /* Every non-title child flows into the right column as one stacked block. */
  .profile-modal-body .profile-section > :not(.profile-section-title){grid-column:2}
  /* keep multi-child sections (e.g. Profile Photo: actions + hint + error) from
     each starting a new grid row — wrap them visually by spanning + stacking. */
  .profile-modal-body .profile-section{grid-auto-rows:min-content}
  /* Text inputs/selects shouldn't stretch the full right column into a thin
     ribbon — cap them at a comfortable field width, left-aligned. The size
     picker, digest sections, and the field-row (input + inline Save) flex
     naturally and are left to fill as needed. */
  .profile-modal-body .profile-field-input{max-width:440px}
  .profile-modal-body .profile-field-row{max-width:540px}
  /* Profile Photo actions left-align in the control column (the base rule
     centers them, which only made sense in the old single-column layout). */
  .profile-modal-body .profile-actions{justify-content:flex-start}
}
.profile-disclosure{appearance:none;background:none;border:none;color:var(--text-primary);font-size:13.5px;font-weight:600;cursor:pointer;padding:0;display:flex;align-items:center;gap:8px;width:100%;letter-spacing:-.1px}
.profile-disclosure .pd-caret{display:inline-flex;align-items:center;transition:transform var(--motion-base) var(--ease-out)}
.profile-disclosure .pd-caret svg{width:11px;height:11px;color:var(--text-muted)}
.profile-disclosure[aria-expanded="true"] .pd-caret{transform:rotate(90deg)}
.profile-disclosure .pd-ico{width:17px;height:17px;color:var(--text-secondary);display:inline-flex}
.profile-disclosure .pd-ico svg{width:16px;height:16px}
.profile-modal-body > *{flex-shrink:0}
.profile-avatar-frame{width:148px;height:148px;flex-shrink:0;border-radius:50%;background:var(--surface-2);position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 8px 24px rgba(0,0,0,.18);transition:transform var(--motion-slow) cubic-bezier(.32,.72,0,1)}
.profile-avatar-frame.dragover{transform:scale(1.04);box-shadow:inset 0 0 0 2px var(--app-accent),0 12px 32px rgba(0,0,0,.22)}
.profile-avatar-frame img{width:100%;height:100%;object-fit:cover;display:block}
.profile-avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:54px;font-weight:600;color:#fff;letter-spacing:-1px}
.profile-avatar-spinner{position:absolute;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity var(--motion-base)}
.profile-avatar-spinner.show{opacity:1;pointer-events:auto}
.profile-avatar-spinner::after{content:"";width:32px;height:32px;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:profspin .9s linear infinite}
@keyframes profspin{to{transform:rotate(360deg)}}
.profile-dropzone-hint{font-size:12.5px;color:var(--text-muted);text-align:center;line-height:1.45;max-width:300px}
.profile-actions{display:flex;gap:10px;width:100%;justify-content:center;flex-wrap:wrap}
.profile-btn{appearance:none;border:none;border-radius:var(--radius-md);padding:10px 18px;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;letter-spacing:-.1px;transition:transform var(--motion-fast) cubic-bezier(.32,.72,0,1),background var(--motion-base),opacity var(--motion-base)}
.profile-btn:active{transform:scale(.97)}
.profile-btn-primary{background:var(--app-accent);color:var(--on-accent)}
/* V39ffffff — paired secondary so cancel buttons don't need inline styles */
.profile-btn-secondary{background:var(--surface-2);color:var(--text-primary)}
.profile-btn-secondary:hover{background:var(--surface-3)}
.profile-btn-primary:hover{opacity:.92}
.profile-btn-secondary{background:var(--surface-2);color:var(--text-primary)}
.profile-btn-secondary:hover{background:var(--surface)}
.profile-btn-danger{background:transparent;color:var(--app-danger)}
.profile-btn-danger:hover{background:rgba(255,86,48,.08)}
.profile-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.profile-meta{font-size:12px;color:var(--text-muted);text-align:center;margin-top:-4px}
.profile-error{font-size:13px;color:var(--app-danger);text-align:center;min-height:18px}

/* Accountability Engine (2026-05-24) — Daily Digest prefs controls */
.digest-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer}
.digest-toggle-label{display:block;font-size:14px;font-weight:600;color:var(--text-primary)}
.digest-toggle-sub{display:block;font-size:12px;color:var(--text-muted);margin-top:2px}
.digest-switch{position:relative;flex:0 0 auto;width:51px;height:31px}
.digest-switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:2}
.digest-switch-track{position:absolute;inset:0;border-radius:999px;background:var(--surface-3,rgba(120,120,128,.32));transition:background var(--motion-base,.22s) var(--ease-out,ease);box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.digest-switch-thumb{position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:999px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3),0 1px 1px rgba(0,0,0,.16);transition:transform var(--motion-base,.22s) var(--ease-spring,cubic-bezier(.34,1.56,.64,1))}
.digest-switch input:checked ~ .digest-switch-track{background:var(--app-accent,#0a84ff)}
.digest-switch input:checked ~ .digest-switch-track .digest-switch-thumb{transform:translateX(20px)}
.digest-switch input:focus-visible ~ .digest-switch-track{outline:2px solid var(--app-accent,#0a84ff);outline-offset:2px}
/* 2026-05-26 — Quick Notes button size segmented control (Apple segmented style,
   matches the .td-segctl family). */
/* Live size picker: each option is a real glass Quick Notes button at its actual
   px size so the choice previews itself. Options share a tinted stage; the demo
   circles use the same Liquid Glass language as the live launcher (WYSIWYG). The
   three are baseline-aligned (align-items:end) so the size difference reads
   clearly; the selected one gets the accent ring + lift. */
.qn-size-picker{display:flex;gap:14px;align-items:flex-end;background:var(--surface-2,var(--chrome-bg));border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);padding:18px 16px 14px}
.qn-size-opt{appearance:none;border:none;background:none;font-family:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:9px;padding:6px 8px;border-radius:var(--radius-md);flex:1 1 0;transition:background var(--motion-fast) var(--ease-out)}
.qn-size-opt:hover{background:var(--hover-overlay)}
.qn-size-opt:active .qn-size-demo{transform:scale(.93)}
/* P3.6 — match the ACTUAL Quick Notes launcher (#qnGlobalLauncher): same accent fill,
   same --shadow-e3 + inset highlight recipe + sheen overlay, so each preview reads as
   the real button at its size. Previously a weaker 26% fill + --shadow-e2/e4 mismatch
   gave the "bad shadowing" Gavin flagged. */
.qn-size-demo{position:relative;overflow:hidden;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  background:color-mix(in srgb, var(--app-accent) 26%, var(--lg-bg-strong));
  backdrop-filter:var(--lg-refract) brightness(1.05);-webkit-backdrop-filter:var(--lg-refract) brightness(1.05);
  color:var(--app-accent);
  box-shadow:var(--lg-edge),var(--shadow-e3),inset 0 1px 0 rgba(255,255,255,.42),inset 0 0 0 0.5px color-mix(in srgb,var(--app-accent) 40%,rgba(255,255,255,.3));
  transition:transform var(--motion-base) var(--ease-spring),box-shadow var(--motion-base) var(--ease-out)}
.qn-size-demo::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at 70% 18%, rgba(255,255,255,.5), rgba(255,255,255,0) 60%);opacity:.5}
.qn-size-demo-sm{width:40px;height:40px}
.qn-size-demo-md{width:48px;height:48px}
.qn-size-demo-lg{width:60px;height:60px}
.qn-size-demo svg{width:46%;height:46%;display:block}
.qn-size-cap{font-size:12px;font-weight:600;color:var(--text-muted);letter-spacing:-.05px;transition:color var(--motion-fast) var(--ease-out)}
.qn-size-opt[aria-checked="true"] .qn-size-demo{box-shadow:var(--lg-edge),var(--shadow-e3),inset 0 1px 0 rgba(255,255,255,.5),0 0 0 3px color-mix(in srgb,var(--app-accent) 38%,transparent);transform:translateY(-2px)}
.qn-size-opt[aria-checked="true"] .qn-size-cap{color:var(--text-primary)}
.qn-size-opt:focus-visible{outline:none}
.qn-size-opt:focus-visible .qn-size-demo{box-shadow:var(--lg-edge),var(--shadow-e3),0 0 0 4px color-mix(in srgb,var(--app-accent) 30%,transparent)}
@media (prefers-reduced-transparency:reduce){.qn-size-demo{background:var(--app-accent);color:var(--on-accent);backdrop-filter:none;-webkit-backdrop-filter:none}}
.digest-sections{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.digest-sections label{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text-primary);cursor:pointer}
.digest-sections input{width:16px;height:16px;accent-color:var(--app-accent,#0a84ff);cursor:pointer}

/* Send-as-me (2026-05-24) — Email / Outlook connection cards */
.ol-active{display:flex;align-items:center;gap:9px;padding:10px 13px;border-radius:12px;background:var(--surface-2);font-size:13px;color:var(--text-secondary);margin-bottom:14px}
.ol-active-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--text-muted);box-shadow:0 0 0 3px color-mix(in srgb,var(--text-muted) 22%,transparent)}
.ol-active.is-graph .ol-active-dot,.ol-active.is-smtp .ol-active-dot{background:var(--color-success);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-success) 26%,transparent)}
.ol-active-text strong{color:var(--text-primary);font-weight:600}
#olActiveAddr{color:var(--text-muted)}
.ol-card{border-radius:16px;background:var(--card-bg,var(--surface));box-shadow:var(--shadow-e1),inset 0 1px 0 rgba(255,255,255,.05);padding:14px 15px;margin-bottom:12px;transition:box-shadow var(--motion-base,.22s) var(--ease-out,ease),transform var(--motion-fast,.15s) var(--ease-out,ease)}
/* 2026-07-02 📘 — ChatGPT connect: numbered steps + one-click copy of the token-extraction command,
   so connecting your ChatGPT subscription reads as a guided 1-2-3 instead of a wall of dev instructions. */
.cs-steps{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:12px;counter-reset:cs}
.cs-steps li{display:flex;gap:11px;align-items:flex-start}
.cs-step-n{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:color-mix(in srgb,#10a37f 18%,var(--card-bg));color:#10a37f;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.cs-step-b{font-size:12.5px;line-height:1.55;color:var(--text-secondary)}
.cs-inline{font:11.5px ui-monospace,SFMono-Regular,Menlo,monospace;background:color-mix(in srgb,var(--text-primary) 8%,transparent);padding:1px 6px;border-radius:5px;color:var(--text-primary)}
.cs-snip-wrap{position:relative;margin-top:8px}
.cs-snip-wrap pre{background:var(--bg-elevated,#1c1c1e);color:var(--text-secondary);font:11.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;padding:10px 46px 10px 12px;border-radius:9px;white-space:pre-wrap;word-break:break-all;margin:0;border:0.5px solid var(--border,rgba(255,255,255,.08))}
.cs-copy-btn{position:absolute;top:7px;right:7px;display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:8px;border:0.5px solid color-mix(in srgb,var(--text-primary) 16%,transparent);background:var(--card-bg);color:var(--text-secondary);font-size:11px;font-weight:600;cursor:pointer;transition:background var(--motion-fast,.15s),color var(--motion-fast,.15s)}
.cs-copy-btn:hover{background:color-mix(in srgb,var(--text-primary) 8%,var(--card-bg));color:var(--text-primary)}
.cs-copy-btn.is-copied{background:color-mix(in srgb,var(--color-success) 16%,var(--card-bg));color:var(--color-success);border-color:color-mix(in srgb,var(--color-success) 34%,transparent)}
.cs-copy-btn .sb-ico{width:12px;height:12px}
.ol-card:hover{box-shadow:var(--shadow-e2),inset 0 1px 0 rgba(255,255,255,.07)}
.ol-card-head{display:flex;align-items:flex-start;gap:11px}
.ol-card-icon{flex:0 0 auto;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--surface-2)}
.ol-card-icon-key{color:var(--app-accent)}
.ol-card-titles{flex:1 1 auto;min-width:0}
.ol-card-title{font-size:14.5px;font-weight:650;color:var(--text-primary);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ol-card-sub{font-size:12.5px;color:var(--text-muted);margin-top:2px;line-height:1.45}
.ol-badge{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:999px}
.ol-badge-durable{background:color-mix(in srgb,var(--app-accent) 16%,transparent);color:var(--app-accent)}
.ol-badge-now{background:var(--color-success-bg);color:var(--color-success)}
.ol-status-pill{flex:0 0 auto;align-self:center;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--surface-2);color:var(--text-muted);white-space:nowrap}
.ol-status-pill.is-on{background:var(--color-success-bg);color:var(--color-success)}
.ol-card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.ol-card-actions:empty{display:none}
/* 2026-06-23 📘 — Offline/PWA field write-queue. Contained pill on the existing
   card (fill + icon signal, NO edge-strip). amber=pending, green=confirmed,
   red=failed. The whole pill is rounded; it must never lift on hover (contained). */
.rt-sync-pill{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;font-size:11px;font-weight:650;letter-spacing:.01em;padding:3px 9px 3px 7px;border-radius:999px;white-space:nowrap;line-height:1;vertical-align:middle}
.rt-sync-pill svg{width:11px;height:11px;flex-shrink:0}
.rt-sync-pill.pending{background:color-mix(in srgb,var(--color-warning) 18%,transparent);color:color-mix(in srgb,var(--color-warning) 78%,#000)}
.rt-sync-pill.synced{background:var(--color-success-bg);color:var(--color-success)}
.rt-sync-pill.failed{background:color-mix(in srgb,var(--color-error,var(--err,#ff3b30)) 16%,transparent);color:var(--color-error,var(--err,#ff3b30))}
.rt-sync-pill .rt-sync-act{background:transparent;border:0;padding:0 1px;margin:0;color:inherit;font:inherit;font-weight:700;cursor:pointer;text-decoration:underline;opacity:.85}
.rt-sync-pill .rt-sync-act:hover{opacity:1}
/* Offline banner — floating .rt-panel on the matte, RESTS opacity:1 (never a
   click-trap: it must be a real visible panel, not a transparent pointer sink).
   Fixed, safe-area aware, mobile-first full-width with desktop max-width. */
#rtOfflineBanner{position:fixed;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);z-index:var(--z-top);margin:0 auto;max-width:520px;opacity:1;display:flex;align-items:center;gap:11px;padding:11px 14px;font-size:13px;color:var(--text-primary);background:var(--lg-bg,var(--card-bg));backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract);border:.5px solid var(--chrome-border,rgba(0,0,0,.08));border-radius:var(--radius-lg);box-shadow:var(--lg-edge,0 0 0 .5px rgba(0,0,0,.04)),var(--shadow-menu,0 8px 30px rgba(0,0,0,.18))}
#rtOfflineBanner[hidden]{display:none}
#rtOfflineBanner .rt-ofl-dot{width:9px;height:9px;border-radius:50%;background:var(--color-warning);flex-shrink:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-warning) 22%,transparent)}
#rtOfflineBanner .rt-ofl-txt{min-width:0;flex:1;line-height:1.35}
#rtOfflineBanner .rt-ofl-txt b{font-weight:700;display:block}
#rtOfflineBanner .rt-ofl-sub{color:var(--text-muted);font-size:12px}
@media (max-width:480px){#rtOfflineBanner{left:8px;right:8px}}
.ol-smtp-form{margin-top:13px;padding-top:13px;border-top:0.5px solid var(--chrome-border,rgba(0,0,0,.08))}
.ol-help{font-size:11.5px;color:var(--text-muted);line-height:1.5;margin-top:9px}
.ol-help strong{color:var(--text-secondary);font-weight:600}
.ol-note{font-size:12px;color:var(--text-muted);font-style:italic}

/* Task 2.16 — Profile modal becomes a true full-screen sheet on phones.
   The base CSS above pins the modal to a fixed 460px width with no @media
   rule at all (per the Phase 2 audit, this was the weakest-covered surface).
   At ≤640px we mirror the Task 1.3 pattern for .modal: stretch overlay,
   border-radius 0, min-height 100svh, safe-area padding, scrollable body,
   full-width form fields, and tap-min affordances on every control.
   Inline-styled inputs in #profileChangePwForm need explicit overrides
   for font-size (iOS no-zoom needs ≥16px) and min-height (--tap-min). */
@media (max-width: 640px) {
  .profile-modal-overlay{padding:0;align-items:stretch;justify-content:stretch}
  .profile-modal{
    width:100%;max-width:100%;border-radius:0;
    min-height:100svh;height:100svh;max-height:100svh;
    padding-bottom:env(safe-area-inset-bottom,0);
    display:flex;flex-direction:column;
  }
  .profile-modal-head{
    padding:14px var(--mobile-gutter) 6px;
    padding-top:max(14px,env(safe-area-inset-top,0));
    flex-shrink:0;
  }
  .profile-modal-close{
    width:var(--tap-min);height:var(--tap-min);
    min-width:var(--tap-min);min-height:var(--tap-min);
    border-radius:50%;
  }
  /* Body scrolls so tall content (hero + sections + password) never
     overflows the viewport on small phones. Sections own their gutter. */
  .profile-modal-body{
    padding:0;
    gap:0;
    flex:1;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .profile-hero{padding:18px var(--mobile-gutter) 16px}
  .profile-hero .profile-avatar-frame{width:72px;height:72px}
  .profile-section{padding:16px var(--mobile-gutter)}
  .profile-field-input{font-size:16px}
  /* Action buttons go single-column full-width, tap-min height. */
  .profile-actions{flex-direction:column;gap:10px;width:100%}
  .profile-actions .profile-btn{
    width:100%;
    min-height:var(--tap-min);
    font-size:15px;
    padding:10px 16px;
  }
  /* Password section inputs need higher specificity to override the inline
     font-size:13px / padding:8px 10px set on each <input> in the markup.
     Also make the Update/Cancel row stack so each button is tap-min wide. */
  .profile-security{width:100%}
  .profile-security input[type="password"]{
    font-size:16px !important;
    min-height:var(--tap-min);
    padding:10px 12px !important;
  }
  .profile-security #profileChangePwForm > div[style*="display:flex"]{
    flex-direction:column;gap:8px;
  }
  .profile-security #profileChangePwForm .profile-btn{
    width:100%;
    min-height:var(--tap-min);
    font-size:15px;
  }
  .profile-security #profileChangePwToggle{
    min-height:var(--tap-min);
  }
  .profile-security #profileLogoutEverywhere{
    min-height:var(--tap-min);
    display:flex;align-items:center;
  }
}

.theme-swatches{display:flex;gap:10px;padding:6px 12px 10px}
/* V-navmode 2026-06-28 — theme swatches read as ORB spheres: the inline color is the base; a glossy
   top specular + an inset bottom shade + a soft lift give it the same orb depth as the rest of the
   chrome. The swatch's own background-color shows through (the highlights are translucent overlays). */
.theme-swatch{position:relative;width:23px;height:23px;border-radius:50%;border:0.5px solid color-mix(in srgb, var(--text-primary) 14%, transparent);cursor:pointer;overflow:hidden;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.45),inset 0 -2px 3px rgba(0,0,0,.28),0 1px 2px rgba(16,24,40,.2),0 3px 6px -2px rgba(16,24,40,.26);
  transition:transform var(--motion-fast),box-shadow var(--motion-fast)}
.theme-swatch::after{content:'';position:absolute;left:50%;top:2px;transform:translateX(-50%);width:62%;height:42%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.85),rgba(255,255,255,0) 72%)}
.theme-swatch:hover{transform:scale(1.1)}
.theme-swatch:active{transform:scale(.94)}
.theme-swatch.active{box-shadow:inset 0 1px 1px rgba(255,255,255,.5),inset 0 -2px 3px rgba(0,0,0,.28),0 0 0 2px var(--card-bg),0 0 0 4px var(--app-accent),0 3px 8px -2px color-mix(in srgb,var(--app-accent) 45%,transparent)}

/* ── Notification bell ── */
/* V-navmode2 — CONSISTENT round soft icon-buttons (same color/form) for activity ⚡ + bell. */
/* V-navmode 2026-06-28 — the round cluster icons (+ create · ⚡ dock · 🔔 bell) read as RAISED ORBS:
   a soft frosted gradient sphere + a top specular highlight ring + a drop-shadow lift (same orb idiom
   as the user avatar, kept NEUTRAL — not accent-filled — since these are chrome controls). */
.notif-bell{position:relative;border:none;cursor:pointer;width:33px;height:33px;padding:0;border-radius:50%;color:var(--on-chrome);line-height:1;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  background:radial-gradient(circle at 32% 24%,#fff 0%,color-mix(in srgb,var(--on-chrome) 4%,var(--surface,#fff)) 46%,color-mix(in srgb,var(--on-chrome) 15%,var(--surface,#fff)) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 1px color-mix(in srgb,var(--on-chrome) 10%,transparent),inset 0 0 0 .5px color-mix(in srgb,var(--on-chrome) 10%,transparent),0 1px 2px rgba(16,24,40,.16),0 4px 9px -3px rgba(16,24,40,.26);
  transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast),box-shadow var(--motion-fast)}
/* glossy top specular cap — the sharp little highlight that sells the sphere */
.notif-bell::after{content:'';position:absolute;left:50%;top:3px;transform:translateX(-50%);width:60%;height:42%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.9),rgba(255,255,255,0) 70%);opacity:.85}
.notif-bell:hover{color:var(--app-accent);
  background:radial-gradient(circle at 32% 24%,#fff 0%,color-mix(in srgb,var(--app-accent) 8%,var(--surface,#fff)) 46%,color-mix(in srgb,var(--app-accent) 20%,var(--surface,#fff)) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1),inset 0 -1px 1px color-mix(in srgb,var(--app-accent) 14%,transparent),inset 0 0 0 .5px color-mix(in srgb,var(--app-accent) 26%,transparent),0 1px 3px rgba(16,24,40,.2),0 6px 13px -3px color-mix(in srgb,var(--app-accent) 38%,transparent)}
.notif-bell:active{transform:scale(.93)}
.notif-bell:hover .nb-ico{opacity:1}
/* V-nav2 — Bayfront: the #fff-0% hotspot + 95%-white inset + bright specular cap read as harsh
   GLARE on the dark header. Soften all three to a subtle raised dark sphere. */
[data-theme="midnight"] .notif-bell{
  background:radial-gradient(circle at 32% 26%,color-mix(in srgb,#fff 16%,var(--surface)),color-mix(in srgb,#000 10%,var(--surface)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 .5px rgba(255,255,255,.05),0 2px 6px rgba(0,0,0,.5),0 0 0 .5px rgba(0,0,0,.4)}
[data-theme="midnight"] .notif-bell::after{background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.22),rgba(255,255,255,0) 70%);opacity:.7}
[data-theme="midnight"] .notif-bell:hover{
  background:radial-gradient(circle at 32% 26%,color-mix(in srgb,var(--app-accent) 24%,var(--surface)),color-mix(in srgb,#000 8%,var(--surface)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 .5px color-mix(in srgb,var(--app-accent) 22%,transparent),0 3px 9px rgba(0,0,0,.5),0 0 0 .5px rgba(0,0,0,.4)}
.notif-bell:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 55%,transparent)}
.notif-bell:active{transform:scale(.92)}
.notif-bell .nb-ico{width:18px;height:18px;opacity:.85}
/* V-navmode 2026-06-28 — the notification count badge reads as an ORB: a glossy danger-red sphere
   (radial gradient + top specular + ring) instead of a flat dot. */
.notif-badge{position:absolute;top:-2px;right:-2px;color:#fff;font-size:9.5px;font-weight:700;min-width:15px;height:15px;border-radius:var(--radius-pill);display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1;pointer-events:none;letter-spacing:-.1px;
  background:radial-gradient(circle at 36% 28%,color-mix(in srgb,var(--app-danger) 38%,#fff),var(--app-danger) 70%,color-mix(in srgb,var(--app-danger) 82%,#000) 100%);
  box-shadow:0 0 0 2px var(--header-shade),inset 0 1px 0 rgba(255,255,255,.55),0 1px 2px rgba(16,24,40,.3)}
/* #25 — briefing re-surface badge on the persistent dock-toggle (Atira) button. Reuses .notif-badge geometry; accent-tinted (an attention cue, not an error) + clickable to re-float the .rt-brief panel. */
.rt-brief-badge{background:var(--app-accent);cursor:pointer;pointer-events:auto;transition:transform var(--motion-fast)}
.rt-brief-badge:hover{transform:scale(1.08)}
.rt-brief-badge:active{transform:scale(.92)}
/* A4 (2026-06-11) — onto the --lg-* glass tokens so the dark-theme override
   (Bayfront/Lido Sun) lifts this panel too; it bypassed the ded2c23 fix. */
#notifPanel{position:absolute;right:14px;top:48px;width:340px;max-height:480px;background:var(--lg-bg-strong);backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract);color:var(--text-primary);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-e4);z-index:var(--z-modal);display:none;flex-direction:column;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif}
#notifPanel.show{display:flex}
.notif-panel-head{display:flex;align-items:center;justify-content:space-between;padding:11px 14px 9px;border-bottom:0.5px solid var(--chrome-border);flex-shrink:0}
.notif-panel-head span{font-size:13.5px;font-weight:600;color:var(--text-primary);letter-spacing:-.15px}
.notif-panel-head button{background:none;border:none;font-size:12px;color:var(--app-accent);cursor:pointer;font-weight:500;padding:0;letter-spacing:-.05px;font-family:inherit;transition:opacity var(--motion-fast)}
.notif-panel-head button:hover{text-decoration:underline}
.notif-panel-head button:active{opacity:.7}
.notif-list{overflow-y:auto;flex:1}
/* V39lll — notif-item: active press background-darken */
.notif-item{display:flex;gap:10px;padding:10px 14px;cursor:pointer;border-bottom:0.5px solid color-mix(in srgb, var(--text-primary) 8%, transparent);transition:background var(--motion-fast);align-items:flex-start}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:var(--surface-2)}
.notif-item:active{background:var(--surface-3)}
.notif-item.unread{background:color-mix(in srgb, var(--app-accent) 8%, transparent)}
.notif-item.unread:hover{background:color-mix(in srgb, var(--app-accent) 14%, transparent)}
.notif-item.unread:active{background:color-mix(in srgb, var(--app-accent) 22%, transparent)}
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--app-accent);flex-shrink:0;margin-top:4px}
.notif-item.read .notif-dot{background:var(--border)}
.notif-msg{font-size:12px;line-height:1.4;color:var(--text-primary);flex:1}
.notif-time{font-size:11px;color:var(--text-muted);white-space:nowrap;margin-top:2px}
.notif-empty{padding:24px 14px;text-align:center;font-size:13px;color:var(--text-muted)}

/* ── W2-E screen-capture preview overlay (Apple-quality sheet) ── */
.cap-overlay{position:fixed;inset:0;z-index:var(--z-top);display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,#000 52%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity var(--motion-base);padding:24px;box-sizing:border-box}
.cap-overlay.show{opacity:1}
.cap-sheet{width:min(720px,calc(100vw - 32px));max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-card);box-shadow:var(--shadow-e4);overflow:hidden;transform:scale(.96) translateY(8px);transition:transform var(--motion-base) var(--ease-spring)}
.cap-overlay.show .cap-sheet{transform:none}
.cap-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:0.5px solid var(--chrome-border)}
.cap-title{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;letter-spacing:-.2px;color:var(--text-primary)}
.cap-title-ico{width:17px;height:17px;color:var(--app-accent)}
.cap-x{width:30px;height:30px;border:none;background:transparent;color:var(--text-muted);border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--motion-fast),color var(--motion-fast)}
.cap-x svg{width:15px;height:15px}
.cap-x:hover{background:var(--surface-2);color:var(--text-primary)}
.cap-imgwrap{flex:1;min-height:0;overflow:auto;background:var(--surface-2);padding:12px;display:flex;align-items:center;justify-content:center}
.cap-img{max-width:100%;max-height:60vh;border-radius:var(--radius-md);box-shadow:var(--shadow-e2);display:block}
.cap-meta{padding:8px 16px;font-size:12px;color:var(--text-muted);border-top:0.5px solid var(--chrome-border);text-align:center}
.cap-actions{display:flex;gap:8px;padding:12px 16px 16px;flex-wrap:wrap;justify-content:flex-end}
.cap-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border:0.5px solid var(--chrome-border);background:var(--surface-2);color:var(--text-primary);border-radius:var(--radius-btn);font:600 13.5px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;letter-spacing:-.1px;cursor:pointer;transition:background var(--motion-fast),transform var(--motion-fast),box-shadow var(--motion-fast)}
.cap-btn svg{width:15px;height:15px}
.cap-btn:hover{background:var(--surface-3,var(--surface-2));transform:translateY(-1px)}
.cap-btn:active{transform:translateY(0)}
.cap-btn-primary{background:var(--app-accent);color:var(--on-accent);border-color:transparent;box-shadow:0 1px 2px rgba(0,0,0,.10),inset 0 0 0 0.5px rgba(255,255,255,.16)}
.cap-btn-primary:hover{background:color-mix(in srgb,var(--app-accent) 90%,#000)}
@media (prefers-reduced-transparency:reduce){.cap-overlay{background:rgba(0,0,0,.6);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media (prefers-reduced-motion:reduce){.cap-sheet,.cap-btn,.cap-strip-seg,.cap-strip-x{transition:none}}
@media (max-width:640px){.cap-actions{justify-content:stretch}.cap-btn{flex:1;justify-content:center}}
.cap-btn-ghost{background:transparent;border-color:transparent;color:var(--text-secondary)}
.cap-btn-ghost:hover{background:var(--surface-2)}
/* C1/P4 — capture mode strip (Full / Window / Area) anchored under the user pill. */
.cap-strip-pop{z-index:var(--z-top);padding:6px;border-radius:var(--radius-md);min-width:260px}
.cap-strip{display:flex;gap:4px;align-items:center}
.cap-strip-seg{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 6px;border:0;background:transparent;border-radius:var(--radius-sm);color:var(--text-primary);font:600 11.5px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;cursor:pointer;transition:background var(--motion-fast)}
.cap-strip-seg svg{width:18px;height:18px;color:var(--text-secondary)}
.cap-strip-seg:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
.cap-strip-seg:hover svg{color:var(--app-accent)}
.cap-strip-x{width:30px;height:30px;border:0;background:transparent;color:var(--text-muted);border-radius:50%;cursor:pointer;flex:0 0 auto}
.cap-strip-x:hover{background:var(--surface-2)}
.cap-strip-note{font-size:11px;color:var(--text-muted);padding:6px 6px 2px;text-align:center}
/* C1/P4 — area crop overlay (frozen-frame canvas). */
.cap-crop-overlay{position:fixed;inset:0;z-index:var(--z-top);cursor:crosshair}
.cap-crop-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.cap-crop-rect{position:absolute;border:1.5px solid var(--app-accent);border-radius:2px;pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.cap-crop-badge{position:absolute;top:-26px;left:0;background:color-mix(in srgb,#000 70%,transparent);color:#fff;text-shadow:0 0 2px rgba(0,0,0,.6);font:600 11px/1 -apple-system,system-ui,sans-serif;font-variant-numeric:tabular-nums;padding:4px 7px;border-radius:6px;white-space:nowrap;backdrop-filter:blur(6px)}
.cap-crop-bar{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;gap:10px;background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-pill);padding:8px 12px;box-shadow:var(--shadow-e4)}
/* C1/P4 — share-sheet caption + conversation picker. */
.cap-share-fields{padding:0 16px 4px;display:flex;flex-direction:column;gap:8px}
.cap-caption{width:100%;box-sizing:border-box;padding:9px 12px;border:0.5px solid var(--border);border-radius:var(--radius-md);background:var(--surface-2,var(--input-bg));color:var(--text);font-size:14px;outline:none}
.cap-caption:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.cap-conv-row{display:flex;align-items:center;gap:8px}
.cap-conv-lbl{font-size:12.5px;color:var(--text-muted);font-weight:600;flex:0 0 auto}
.cap-conv-picker{flex:1;padding:8px 10px;border:0.5px solid var(--border);border-radius:var(--radius-md);background:var(--surface-2,var(--input-bg));color:var(--text);font-size:13.5px;outline:none}
.cap-conv-picker:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
/* C1/P4 — the success jump button (floats above the toast region). */
.cap-jump-pop{position:fixed;left:50%;bottom:64px;transform:translateX(-50%);z-index:var(--z-top);background:var(--app-accent);color:var(--on-accent);border:0;border-radius:var(--radius-pill);padding:8px 16px;font:600 13px/1 -apple-system,system-ui,sans-serif;cursor:pointer;box-shadow:var(--shadow-e3);animation:capJumpIn var(--motion-base) var(--ease-spring)}
@keyframes capJumpIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.cap-jump-pop{animation:none}}

/* ── Header (Apple-system translucent toolbar) ── */
/* U7 — header is floating chrome: align it to the shared Liquid Glass language.
   Keeps its theme-tuned --header-shade tint (intentionally per-theme), but now
   uses the shared --lg-refract (blur+saturate+brightness) instead of a one-off
   blur(20px) saturate(180%), and gains the --lg-edge specular rim so it reads as
   the same lit pane as menus/popovers. Solid fallbacks below. */
.header{height:50px;background:var(--header-shade);backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract);box-shadow:var(--lg-edge-strong),0 1px 0 color-mix(in srgb,var(--chrome-border) 60%,transparent),0 6px 20px -10px rgba(0,0,0,.18);display:flex;align-items:center;gap:8px;padding:0 14px;flex-shrink:0;border-bottom:0.5px solid var(--chrome-border);position:relative;z-index:var(--z-header)}
/* V-navmode 2026-06-28 — richer glass: a top specular highlight line + a faint accent
   sheen sweeping from the brand side, so the bar reads as a real lit, layered pane. */
.header::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,color-mix(in srgb,#fff 12%,transparent),transparent 40%),
             radial-gradient(120% 180% at 0% -40%,color-mix(in srgb,var(--app-accent) 7%,transparent),transparent 55%)}
.header > *{position:relative;z-index:1}  /* keep all bar controls above the sheen layer */
[data-theme="midnight"] .header::before,[data-theme="bayfront"] .header::before{
  background:linear-gradient(180deg,color-mix(in srgb,#fff 6%,transparent),transparent 38%),
             radial-gradient(120% 180% at 0% -40%,color-mix(in srgb,var(--app-accent) 12%,transparent),transparent 55%)}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.header{background:var(--surface)}}
@media (prefers-reduced-transparency: reduce){.header{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
/* V-navmode 2026-06-28 — bolder brand lockup: larger logo w/ a soft accent glow halo,
   heavier wordmark, a hairline divider trailing it so the brand reads as a confident
   anchor (Gavin: bigger/bolder brand + rich glass). */
.header-brand{color:var(--on-chrome);font-weight:750;font-size:16px;letter-spacing:-.2px;display:flex;align-items:center;gap:9px;white-space:nowrap;margin-right:0;cursor:pointer;user-select:none;border-radius:var(--radius-md);padding:3px 6px 3px 5px;margin-left:-2px;position:relative;transition:opacity var(--motion-fast),background var(--motion-fast)}
/* V-navmode2 — no divider between brand and the project switcher (Gavin). */
/* PROJECT SWITCHER — thinner pill, DISTINCT accent-tinted material w/ real depth so it
   reads as its own object (the job context), not the same surface as the nav. */
/* V-navmode 2026-06-28 — FIXED width (not max-width). The pill used to size to the project NAME
   (96px for "Six88", 220px for a long name); since it shares the header row with the fit-measured
   nav strip, that 124px swing changed the nav budget → the inline-tab count flipped 6↔7 and the
   WHOLE bar visibly re-laid-out every time you switched projects (Gavin: "moving randomly"). A fixed
   width makes the nav budget CONSTANT regardless of project; the name truncates with ellipsis. */
/* V-ctl2 — project switcher = canonical SELECTED pill (white/light surface, project name in
   primary text + the status orb dot). Consistent with the active-tab selected language;
   keeps the identity dot. Near-white on Bayfront. */
/* V-nav2 — project switcher = TRANSLUCENT HEADER CHROME (matches the search bar), not the white
   selected-pill (the white read off on the header band). A subtle on-chrome-tinted pill that
   blends with the header; the name + dot lead. Theme-adaptive via --on-chrome. */
.proj-switcher{display:inline-flex;align-items:center;gap:6px;height:30px;width:196px;max-width:196px;padding:0 11px 0 12px;margin:0;
  border:0.5px solid color-mix(in srgb,var(--on-chrome) 9%,transparent);border-radius:var(--radius-pill);cursor:pointer;font-family:inherit;font-size:12.5px;flex:0 0 auto;
  color:var(--on-chrome);
  background:color-mix(in srgb,var(--on-chrome) 4%,transparent);
  transition:background var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast)}
.proj-switcher .ps-name{color:var(--on-chrome)}
.proj-switcher .ps-chev{color:var(--on-chrome-muted,var(--on-chrome))}
.proj-switcher:hover{background:color-mix(in srgb,var(--on-chrome) 11%,transparent);border-color:color-mix(in srgb,var(--on-chrome) 20%,transparent)}
.proj-switcher:active{filter:brightness(.98)}
/* V-navmode 2026-06-28 — the pill status dot is now an ORB sphere (matches the dropdown hue-tiles):
   a radial gradient sphere in the project's status hue with a top specular highlight + soft hue glow. */
.proj-switcher .ps-dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 34% 28%,color-mix(in srgb,var(--ap-hue,var(--app-accent)) 45%,#fff),var(--ap-hue,var(--app-accent)) 82%);
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.6),0 0 0 .5px color-mix(in srgb,var(--ap-hue,var(--app-accent)) 30%,transparent),0 0 7px color-mix(in srgb,var(--ap-hue,var(--app-accent)) 60%,transparent)}
.proj-switcher .ps-name{flex:1 1 auto;min-width:0;text-align:left;font-weight:700;color:var(--on-chrome);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj-switcher .ps-chev{width:13px;height:13px;color:var(--app-accent);opacity:.85;flex:0 0 auto;margin-left:1px;transition:transform var(--motion-fast)}
.proj-switcher[aria-expanded="true"] .ps-chev{transform:rotate(180deg)}
/* dropdown */
.proj-switcher-menu{position:fixed;min-width:300px;max-width:360px;max-height:min(72vh,560px);overflow-y:auto;padding:7px;border-radius:var(--radius-lg);z-index:var(--z-modal-backdrop);display:flex;flex-direction:column;gap:1px}
/* V-navmode3 — search-field oval (pill) like the header search; NO blue focus ring. */
.psm-search{display:flex;align-items:center;gap:8px;margin:2px 3px 8px;padding:8px 13px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--on-app-bg,var(--text-primary)) 5%,transparent);border:0.5px solid color-mix(in srgb,var(--on-app-bg,var(--text-primary)) 9%,transparent);color:var(--text-muted);font-size:13px;transition:border-color var(--motion-fast)}
.psm-search:focus-within{border-color:color-mix(in srgb,var(--app-accent) 40%,transparent);box-shadow:none;outline:none}
.psm-search input:focus,.psm-search input:focus-visible{outline:none!important;box-shadow:none!important}
.psm-search svg{width:14px;height:14px;opacity:.7;flex:0 0 auto}
.psm-search input{flex:1;border:none;background:transparent;outline:none;font:inherit;font-size:13px;color:var(--text-primary)}
.psm-grp{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);padding:7px 11px 4px}
.psm-row{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:9px;border:none;background:none;cursor:pointer;color:var(--text-primary);font:inherit;font-size:13.5px;font-weight:600;text-align:left;width:100%;transition:background var(--motion-fast)}
.psm-row:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
.psm-row .psr-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.psm-row .psr-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.psm-row .psr-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.psm-row .psr-s{font-size:11.5px;font-weight:500;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.psm-row .psr-chip{font-size:10px;font-weight:700;padding:2px 8px;border-radius:var(--radius-pill);flex:0 0 auto;color:var(--text-muted);background:color-mix(in srgb,var(--text-muted) 14%,transparent)}
.psm-row.psm-foot{color:var(--app-accent);font-weight:650}
.psm-row.psm-foot svg{width:16px;height:16px;flex:0 0 auto}
.psm-div{height:1px;background:var(--chrome-border);margin:6px 4px}
.psm-empty{padding:14px 12px;color:var(--text-muted);font-size:12.5px;text-align:center}
/* project initial-tile (gradient avatar) + a status glow-dot pip */
/* V-navmode3 — project initial-tile uses the project's STATUS HUE (differentiates rows by stage)
   as a gradient sphere with a white initial. */
.ps-itile{position:relative;width:28px;height:28px;flex:0 0 auto;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:12px;color:#fff;
  background:radial-gradient(circle at 34% 28%,color-mix(in srgb,var(--ap-hue,var(--app-accent)) 55%,#fff),var(--ap-hue,var(--app-accent)) 80%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1px 3px color-mix(in srgb,var(--ap-hue,var(--app-accent)) 35%,transparent)}
.ps-itile .ps-itile-dot{display:none}

/* ═══════════════ ATIRA CANONICAL CONTROL LANGUAGE (V-ctl1 2026-06-29) ═══════════════
   ONE consistent set of pill/tab/button states across the whole app — replaces the ~15
   drifted per-surface treatments (.view-btn / .modal-tab / .rpt-tab / .fi-seg / .cm-seg /
   .acct-* / .seg / .filter-pill / .ds-seg / .ba-seg / .chipf …). Three roles, theme-adaptive
   (Gulf + Bayfront), approved as "Option F":
     • .rt-ctl-primary  — PRIMARY ACTIONS only (New Contact, Open Board, Save). Solid-blue,
                          top-lit gradient, white text, raised. Blue is reserved for actions.
     • .rt-ctl-selected — the SELECTED state (active tab / sub-tab / row / filter). A WHITE/
                          LIGHT raised pill + accent text — white card on Gulf, near-white on
                          Bayfront so it reads light (NOT blue) on dark. Restrained lift.
     • .rt-ctl-ghost    — SECONDARY/quiet actions. Transparent + hairline on Gulf; a subtle
                          neutral fill on Bayfront so it still reads on the dark matte.
   Shared base = .rt-ctl (geometry + press feedback). Apply role class alongside it.
   These are utility classes; existing surfaces migrate onto them surface-by-surface. */
.rt-ctl{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 15px;
  border-radius:var(--radius-pill);font-size:12.5px;font-weight:700;font-family:inherit;letter-spacing:-.01em;
  cursor:pointer;border:.5px solid transparent;background:transparent;color:var(--text-secondary);white-space:nowrap;
  transition:background var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast) var(--ease-spring),border-color var(--motion-fast)}
.rt-ctl:active{transform:scale(.97)}
.rt-ctl:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 32%,transparent)}
/* tab-sized variant (slightly tighter than the action pill) */
.rt-ctl.rt-ctl-tab{height:32px;font-size:13px;font-weight:600;padding:0 16px}

/* — PRIMARY (actions) — solid-blue top-lit gradient, white text, raised — */
.rt-ctl-primary{
  background:linear-gradient(180deg,color-mix(in srgb,#fff 14%,var(--app-accent)),var(--app-accent));
  color:#fff;border-color:transparent;
  box-shadow:var(--shadow-e2),0 0 0 .5px color-mix(in srgb,var(--app-accent) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.25)}
.rt-ctl-primary:hover{box-shadow:var(--shadow-e3),inset 0 1px 0 rgba(255,255,255,.25);filter:brightness(1.05)}

/* — SELECTED (active tab/sub-tab/row/filter) — white/light pill, accent text — */
.rt-ctl-selected{color:var(--app-accent);background:var(--card-bg);border-color:transparent;
  box-shadow:var(--shadow-e1),var(--bevel-top)}
.rt-ctl-selected:hover{box-shadow:var(--shadow-e2),var(--bevel-top)}

/* — GHOST (secondary) — transparent + hairline (Gulf default) — */
.rt-ctl-ghost{background:transparent;color:var(--text-secondary);border:.5px solid var(--chrome-border)}
.rt-ctl-ghost:hover{background:color-mix(in srgb,var(--text-primary) 5%,transparent);color:var(--text-primary)}

/* — ORB-MATERIAL surface (V-orb1) — the glossy blue Atira-orb sphere as a button/tile bg.
   A lit radial sphere in --app-accent with a top specular highlight + soft accent glow ring;
   white glyph on top. Reusable for hero action buttons + the project identity tile (keeps
   their function glyph, gains the orb look). Models the .ps-itile / .ap-tile orb recipe. */
.rt-orb-surface{
  background:radial-gradient(circle at 34% 26%,color-mix(in srgb,var(--app-accent) 42%,#fff),var(--app-accent) 62%,color-mix(in srgb,var(--app-accent) 78%,#000) 100%);
  color:#fff;border:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 2px color-mix(in srgb,#000 22%,transparent),
             0 2px 6px color-mix(in srgb,var(--app-accent) 38%,transparent),0 0 0 .5px color-mix(in srgb,var(--app-accent) 30%,transparent)}
.rt-orb-surface:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 2px color-mix(in srgb,#000 22%,transparent),
             0 4px 12px color-mix(in srgb,var(--app-accent) 46%,transparent),0 0 0 .5px color-mix(in srgb,var(--app-accent) 38%,transparent);
  filter:brightness(1.05)}
.rt-orb-surface:active{filter:brightness(.97);transform:scale(.96)}
.rt-orb-surface svg,.rt-orb-surface .ic{color:#fff;fill:currentColor}

/* — INACTIVE tab (quiet text, fills faintly on hover) — */
.rt-ctl-tab:not(.rt-ctl-selected):not(.rt-ctl-primary):hover{
  background:color-mix(in srgb,var(--text-primary) 6%,transparent);color:var(--text-primary)}

/* ── Bayfront (dark) overrides: selected reads NEAR-WHITE (light, not blue); ghost gets a
   subtle fill so it reads on the dark matte. (Driftwood/Mangrove use light cards so the
   defaults already read; Lido Sun is the AMOLED-border a11y theme — its border carries it.) */
[data-theme="midnight"] .rt-ctl-selected{background:color-mix(in srgb,#fff 86%,var(--surface-3))}
[data-theme="midnight"] .rt-ctl-ghost{background:color-mix(in srgb,var(--text-primary) 5%,transparent)}

/* ═══════════ V-ctl2 2026-06-29 — APP-WIDE MIGRATION onto the canonical SELECTED recipe ═══════════
   Every drifted in-page active-tab / sub-tab / segmented / filter "selected" treatment is
   retargeted HERE to the one Option-F look: a WHITE/LIGHT pill + accent text (white card on
   Gulf, near-white on Bayfront), restrained lift — NEVER a solid-blue or accent-tint fill
   (blue stays for PRIMARY actions only). Consolidated so the language lives in one place and
   the scattered per-surface rules below are overridden uniformly. Phase-btn is EXCLUDED — its
   active fill is the project's PHASE COLOR (a separate, intentional visual language). */
.rpt-tab.rpt-tab-active,
.fi-seg-btn.active,
.de-seg-btn.on,
.modal-tabs-wrap .modal-tab.active,
.acct-hub-tab.acct-hub-tab-active,
#acctHomeView .acct-subseg button.on,
.seg button.on,
#ownerHomeView .seg button.on,
#ledgerView .seg button.on,
.cm-seg-btn.is-active,
.ds-seg-btn.on,
.filter-pill.active,
.btn-preset.active,
.btn-preset.btn-preset-active,
.btn-select-mode.active,
#ledgerView .chipf.is-on,
.cal-mode-btn.active,
.la-mode-btn.active,
.board-actions-popover .ba-seg-btn.active{
  background:var(--card-bg)!important;
  color:var(--app-accent)!important;
  border-color:transparent!important;
  box-shadow:var(--shadow-e1),var(--bevel-top)!important;
}
/* Bayfront — the selected pill reads NEAR-WHITE (light, not blue) everywhere. */
[data-theme="midnight"] :is(
  .rpt-tab.rpt-tab-active, .fi-seg-btn.active, .de-seg-btn.on, .modal-tabs-wrap .modal-tab.active,
  .acct-hub-tab.acct-hub-tab-active, #acctHomeView .acct-subseg button.on, .seg button.on,
  #ownerHomeView .seg button.on, #ledgerView .seg button.on, .cm-seg-btn.is-active, .ds-seg-btn.on,
  .filter-pill.active, .btn-preset.active, .btn-preset.btn-preset-active, .btn-select-mode.active,
  #ledgerView .chipf.is-on, .cal-mode-btn.active, .la-mode-btn.active,
  .board-actions-popover .ba-seg-btn.active){
  background:color-mix(in srgb,#fff 86%,var(--surface-3))!important;
}
/* Inner accent badges inside a now-light selected pill must flip OFF the white-on-accent look. */
.fi-seg-btn.active .fi-seg-badge{background:color-mix(in srgb,var(--app-accent) 16%,transparent)!important;color:var(--app-accent)!important}

/* ══════════ ATIRA branded popover foundation (V-navmode3) — shared by the search-results,
   page-picker (More), and project-switcher dropdowns. Radius-16 frosted box, big soft shadow,
   Space-Mono uppercase section headers, hue-tinted glyph-tile icons, glowing-dot rows,
   rounded hovers, cascade-reveal. Theme-token-driven (works Gulf + Bayfront). ══════════ */
.atira-pop{border-radius:var(--atira-pop-radius);padding:8px;border:0.5px solid var(--chrome-border);
  box-shadow:0 28px 70px -12px rgba(0,0,0,.34),0 6px 18px rgba(0,0,0,.12),var(--lg-edge)}
.atira-pop .ap-head{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);padding:9px 11px 5px;display:flex;align-items:center;gap:7px}
.atira-pop .ap-head .ap-count{margin-left:auto;opacity:.7}
.atira-pop .ap-row{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:10px;border:none;background:none;cursor:pointer;color:var(--text-primary);font:inherit;font-size:13.5px;font-weight:600;text-align:left;width:100%;transition:background var(--motion-fast) var(--ease-out)}
.atira-pop .ap-row:hover{background:color-mix(in srgb,var(--on-app-bg,var(--text-primary)) 7%,transparent)}
.atira-pop .ap-row .ap-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.atira-pop .ap-row .ap-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.atira-pop .ap-row .ap-s{font-family:var(--font-mono);font-size:9.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atira-pop .ap-row.on{background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
.atira-pop .ap-row.on .ap-t{color:var(--app-accent)}
/* hue glyph-tile icon (per category) */
/* V-navmode3 — hue glyph-tile: a SATURATED gradient sphere-tile in the category hue with a
   WHITE icon. Strong, consistent contrast across all 7 hues (the old low-opacity tint washed
   out greens/oranges). Reads as an orb/sphere — on-brand. */
.ap-tile{width:28px;height:28px;flex:0 0 auto;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 34% 28%,color-mix(in srgb,var(--ap-hue,var(--app-accent)) 60%,#fff),var(--ap-hue,var(--app-accent)) 78%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 3px color-mix(in srgb,var(--ap-hue,var(--app-accent)) 35%,transparent)}
.ap-tile svg{width:15px;height:15px;color:#fff}
/* glowing-orb dot (leading bullet) */
.ap-dot{width:9px;height:9px;flex:0 0 auto;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.6),var(--ap-hue,var(--app-accent)) 66%);
  box-shadow:0 0 9px -1px var(--ap-hue,var(--app-accent))}
.atira-pop .ap-div{height:1px;background:var(--chrome-border);margin:6px 6px}
.atira-pop .ap-foot{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;cursor:pointer;color:var(--app-accent);font-weight:650;font-size:13px;width:100%;border:none;background:none;text-align:left;transition:background var(--motion-fast)}
.atira-pop .ap-foot:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
.atira-pop .ap-foot svg{width:16px;height:16px;flex:0 0 auto}
/* category grid (page-picker) */
.atira-pop .ap-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
/* cascade-reveal */
@keyframes apReveal{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.atira-pop .ap-row,.atira-pop .ap-foot{animation:apReveal .26s var(--ease-out) both}
.atira-pop.no-cascade .ap-row,.atira-pop.no-cascade .ap-foot{animation:none}

/* create-anything menu (off the round + button) */
.create-menu{position:fixed;min-width:220px;padding:6px;border-radius:var(--radius-lg);z-index:var(--z-modal-backdrop);display:none;flex-direction:column;gap:1px}
.create-menu.open{display:flex}
.cm-row{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;border:none;background:none;cursor:pointer;color:var(--text-primary);font:inherit;font-size:13.5px;font-weight:600;text-align:left;width:100%;transition:background var(--motion-fast)}
.cm-row:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
.cm-row svg{width:17px;height:17px;flex:0 0 auto;opacity:.8;color:var(--text-secondary)}
.cm-row:hover svg{color:var(--app-accent);opacity:1}
.cm-grp{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);padding:7px 11px 4px}
.cm-div{height:1px;background:var(--chrome-border);margin:5px 4px}
.header-brand:hover{background:var(--chrome-bg)}
.header-brand:active{opacity:.8}
.header-brand:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb, var(--app-accent) 60%, transparent)}
/* V-navmode 2026-06-28 — radial GLOW HALO behind the Atira orb (per Gavin's old mockup). A soft
   bloom sits behind the mark via a layered drop-shadow glow + a blurred radial ::before halo. Only
   the default orb SVG gets it — an org's own logo (the <img> path) stays clean, no Atira bloom. */
.header-brand svg{height:36px;width:auto;display:block;flex-shrink:0;position:relative;z-index:1;
  filter:drop-shadow(0 1px 4px color-mix(in srgb,var(--app-accent) 26%,transparent))}
/* soft WIDE diffuse bloom behind the Atira orb (per the mockup) — large radius, low opacity, heavy
   blur so it reads as atmospheric glow, not a dense blob right on the mark. */
.header-brand:has(svg)::before{content:'';position:absolute;left:-6px;top:50%;transform:translateY(-50%);width:58px;height:58px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,color-mix(in srgb,var(--app-accent) 24%,transparent) 0%,color-mix(in srgb,var(--app-accent) 9%,transparent) 38%,transparent 70%);filter:blur(7px)}
.header-brand-logo{height:36px;width:auto;max-width:180px;object-fit:contain;display:block;flex-shrink:0;position:relative;z-index:1}
/* V-navmode 2026-06-28 — cap the brand name so a long ORG name can't blow out the header width and
   shift the nav budget (keeps the nav split stable regardless of branding). Ellipsis past the cap. */
.header-brand-name{font-weight:750;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* V-navmode3 — the "Atira" wordmark uses the brand font (Plus Jakarta Sans). When an org
   sets its OWN brand_name, that's not "Atira" so the brand font still reads as the Atira
   wordmark only; org names fall back to the system stack via the .brand-name base rule. */
.header-brand-name.brand-name{font-family:'Plus Jakarta Sans',var(--font-ui,inherit);font-weight:800;letter-spacing:-.2px}
/* an org's OWN name reads in the system stack (the Atira brand font is for the Atira wordmark only) */
.header-brand-name.brand-name.is-org-name{font-family:inherit;font-weight:750;letter-spacing:-.1px}
/* Logo color roles — defaults for light themes (apple, light) */
:root{--logo-dark:#444141;--logo-green:#339043;--logo-shadow:#989696}
/* Dark themes: lighten the charcoal strokes so they read on dark headers */
[data-theme="rr-brand"]{--logo-dark:#d0cece;--logo-shadow:#b0aeae;--logo-green:#5ec775}
[data-theme="midnight"]{--logo-dark:#ccc9c9;--logo-shadow:#aaa8a8}
[data-theme="sepia"]{--logo-dark:#e8e0d4;--logo-shadow:#c4b8a8}
[data-theme="contrast"]{--logo-dark:#ffffff;--logo-shadow:#cccccc;--logo-green:#5ec775}
/* V82.2 — legacy per-board "Search projects…" bar fully retired (Gavin): the
   one global header search now covers everything. Kept in the DOM (hidden) so
   applyFilters()/#searchInput .value reads stay valid; never shown on any width. */
.search-wrap{display:none !important}
/* V39k — search-input upgraded: 0.5px hairline border, Apple-style focus ring
   (3px accent-tinted halo + accent border), explicit transition. */
.search-input{width:100%;height:30px;background:var(--chrome-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-input);color:var(--on-chrome);font-size:13px;padding:0 10px 0 30px;outline:none;font-family:inherit;transition:background var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast)}
.search-input::placeholder{color:var(--on-chrome-dim)}
/* V-navmode3 — no colored focus RING on search (Gavin); subtle border brighten only. */
.search-input:focus{background:var(--chrome-bg-strong);border-color:color-mix(in srgb,var(--app-accent) 45%, var(--chrome-border));box-shadow:none}
.search-wrap{position:relative}
.search-wrap::before{content:'';position:absolute;left:10px;top:50%;width:11px;height:11px;border:1.5px solid var(--on-chrome-dim);border-radius:50%;transform:translateY(-50%);pointer-events:none}
.search-wrap::after{content:'';position:absolute;left:17px;top:calc(50% + 4px);width:5px;height:1.5px;background:var(--on-chrome-dim);transform:translateY(-50%) rotate(45deg);transform-origin:left center;pointer-events:none}
.header-gap{display:none}
/* 2026-05-27 — desktop header: the trailing cluster (Export · Search · New Project ·
   bell · user pill) packed left, leaving dead space after the pill before the right
   edge. Push the cluster to the right edge with a flex auto-margin on its first item.
   Desktop-only (min-width:1025px) so the ≤1024 order/flex-wrap header layout is untouched. */
/* V-navmode 2026-06-28 — push the RIGHT CLUSTER (search + create/dock/bell + user pill) to the
   right edge so leftover header width collapses into ONE gap between the nav strip and the cluster,
   instead of pooling as dead space AFTER the user pill (Gavin: "big empty space right of the user
   pill"). margin-left:auto on the first right-cluster item (the search wrap) absorbs the slack. */
@media (min-width: 1025px){ .header .export-menu-wrap{ margin-left:auto } .header .header-search-wrap{ margin-left:auto } }
/* G14 — main-nav tabs scroll with the wheel/trackpad but hide the scrollbar,
   matching the modal-tabs treatment (.modal-tabs-wrap). overflow-x:auto keeps
   wheel + touch + drag scrolling; the bar itself is hidden on all engines. */
/* V-navmode 2026-06-28 — underline-active nav (B direction): a clean transparent row,
   no recessed track. The active view is marked by an accent UNDERLINE + accent label
   (Linear/Vercel style) rather than a heavy pill — calmer + more confident. */
/* V-navmode2 2026-06-28 — UNIFIED NAV PANEL: one tactile-glass panel holds the pages as
   flat items (no per-item boxes). Active = accent color + dot, ZERO reflow on switch. */
/* V-navmode3 — THINNER unified nav panel; items flat by default, selected RAISES (lift +
   accent ring + hue glow) per the Atira "lift when selected" idiom. Overflow visible so the
   raised tab's shadow isn't clipped (x-scroll kept for the rare narrow case via a wrapper). */
.view-toggle{display:flex;align-items:center;flex:0 1 auto;min-width:0;gap:2px;padding:3px;border-radius:var(--radius-pill);
  background:var(--surface);box-shadow:var(--shadow-e1),var(--lg-edge);
  overflow:visible;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;touch-action:pan-x}
.view-toggle::-webkit-scrollbar{height:0;width:0;display:none}
/* Wide desktop: the "More ▾" overflow caps the tab count, so the strip sizes to
   its content and never shrinks below it (no clipped tabs/More button). Narrower
   widths keep their existing shrink+scroll caps (1025–1280 + ≤1024 rules below). */
/* V-navmode 2026-06-28 — the nav strip stays SHRINKABLE at every desktop width (it scrolls
   internally), and the header search wrap is allowed to shrink too. This removes the old dead
   zone (1441–1510px) where the strip was pinned flex-shrink:0 AND the search wasn't yet hidden,
   so the trailing user pill sheared off the right edge. */
@media (min-width: 1025px){
  .header{flex-wrap:nowrap;min-width:0}
  .view-toggle{flex:0 1 auto !important;min-width:0 !important;flex-shrink:1 !important;overflow-x:auto !important}
  /* V-navmode 2026-06-28 — the search wrap is FIXED-width at desktop (not flex-shrink). With the
     project pill ALSO fixed, the nav strip is the ONLY element whose width varies → the nav budget
     becomes a pure function of window width, so the inline/More split is deterministic (no flex
     tug-of-war between search & nav that made the count flip between renders / states). */
  /* V-nav2 — margin-left:auto restored so the trailing cluster (search + create/notif/user pill)
     hugs the RIGHT edge (the 16px version left an ~86px empty gap AFTER the user pill). The
     space between the nav tabs and the search is the natural right-align slack, not a bug. */
  .header-search-wrap{flex:0 0 auto !important;width:240px !important;min-width:240px !important;max-width:240px !important;margin-left:auto !important}
  .search-wrap{display:none !important}
}
.view-btn{position:relative;background:transparent;border:none;color:var(--on-chrome-muted);font-size:12.5px;font-weight:600;letter-spacing:-.05px;height:28px;display:inline-flex;align-items:center;gap:6px;padding:0 13px;border-radius:var(--radius-pill);cursor:pointer;transition:color var(--motion-fast),background var(--motion-fast),box-shadow var(--motion-fast);white-space:nowrap;font-family:inherit;flex-shrink:0}
.view-btn .nav-fav-star{width:10px;height:10px;color:var(--app-accent);margin-left:4px;flex:0 0 auto}
.view-btn.active .nav-fav-star{color:var(--app-accent)}
/* flat item by default — hover = subtle IN-PLACE tint only (no size/position change) */
.view-btn:hover:not(.active){background:color-mix(in srgb,var(--on-chrome) 7%,transparent);color:var(--on-chrome)}
.view-btn:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 55%,transparent)}
/* ACTIVE = the Atira "lift when selected" idiom: the tile RAISES (translateY) + a raised
   accent-tinted glass fill + a 1px accent ring + a soft accent glow, accent icon/label,
   and the dot. The lift is a TRANSFORM (not layout) so the row never reflows. */
/* ACTIVE = the SAME glassy accent-tinted pill as the project switcher pill (Gavin: keep them
   consistent) — a blue-tinted gradient over the surface + soft inner ring + top specular + lift
   shadow, accent label/icon. Stays VERTICALLY CENTERED (no size/position change → zero reflow). */
/* V-navsel1 2026-06-29 — the ACTIVE nav tab now matches the SELECTED-project pill exactly:
   same accent-tinted fill, same specular/shadow, and the same confident on-chrome text
   (was --app-accent blue text → read as a quiet OUTLINED pill while the project pill read
   as a FILLED blue pill right beside it). One selected-state language: filled accent pill,
   light text. Theme-agnostic — reads consistently on Gulf + Bayfront. */
/* V-ctl2 — active main-nav tab = canonical SELECTED pill (white/light + accent text). */
.view-btn.active{color:var(--app-accent);background:var(--card-bg);
  box-shadow:var(--shadow-e1),var(--bevel-top)}
[data-theme="midnight"] .view-btn.active{background:color-mix(in srgb,#fff 86%,var(--surface-3))}
.view-btn.active .vb-ico{opacity:1;color:var(--app-accent)}
.view-btn.active:hover{box-shadow:var(--shadow-e2),var(--bevel-top)}
.view-btn .vb-ico{width:15px;height:15px;flex-shrink:0;opacity:.72;transition:opacity var(--motion-fast),color var(--motion-fast)}
.view-btn:hover .vb-ico{opacity:1}
.view-btn.active .vb-ico{opacity:1;color:var(--app-accent)}
.view-btn .vb-label{line-height:1}
/* Desktop nav overflow — "More ▾" + frosted popover (progressive disclosure;
   primary views stay inline, the rest live here). Mirrors the mobile More sheet. */
.nav-more-wrap{flex-shrink:0}
.nav-more-btn{gap:3px}
.nav-more-btn .vb-more-chev{width:9px;height:9px;opacity:.6;transition:transform var(--motion-fast) var(--ease-out),opacity var(--motion-fast)}
.nav-more-btn:hover .vb-more-chev{opacity:1}
.nav-more-wrap.open .nav-more-btn .vb-more-chev{transform:rotate(180deg)}
.nav-more-wrap.open .nav-more-btn{background:var(--chrome-bg);color:var(--on-chrome)}
.nav-more-menu{position:absolute;top:calc(100% + 7px);right:0;min-width:320px;max-width:380px;max-height:min(72vh,540px);overflow-y:auto;z-index:var(--z-modal-backdrop);display:flex;flex-direction:column;gap:0;animation:navMorePop var(--motion-fast) var(--ease-spring)}
/* nav-more-menu is reparented to <body> + position:fixed on open (see openNavMore),
   so backdrop-filter renders and it uses the native rt-glass-pop recipe — matching
   the More Filters / preset popovers exactly. No opacity override needed. */
@keyframes navMorePop{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
.nav-more-item{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:var(--radius-sm);border:none;background:none;color:var(--text-primary);font:inherit;font-size:13.5px;font-weight:500;text-align:left;cursor:pointer;white-space:nowrap;transition:background var(--motion-fast) var(--ease-out),transform var(--motion-fast)}
.nav-more-item:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
.nav-more-item:active{transform:scale(.98)}
.nav-more-item.active{background:color-mix(in srgb,var(--app-accent) 18%,transparent);color:var(--app-accent);font-weight:600}
.nav-more-item .nmi-ico{width:15px;height:15px;flex-shrink:0;opacity:.75}
.nav-more-item.active .nmi-ico{opacity:1;color:var(--app-accent)}
.nav-more-item .nmi-label{flex:1;min-width:0}
.nav-more-item .nmi-badge{flex-shrink:0;font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 16%,transparent);padding:1px 6px;border-radius:var(--radius-pill)}

/* ══════════════ NAV RAIL (Side Bar mode) ══════════════
   Fixed left vertical nav; icon+label items off the shared registry. Visible only when
   body.nav-sidebar AND >1024px. Glass chrome mirrors .cmp-rail / .td-sidebar conventions
   (var(--header-shade) frosted band, --chrome-border hairline) so it tracks every theme. */
:root{--nav-rail-w:64px}
/* UNIFIED L-CHROME: the rail shares the header's EXACT frosted material + tint + hairline so
   the two read as one continuous chrome wrapping the top-left. Rail sits ABOVE the header in z
   (z-header + 1) so its top zone forms the clean corner of the L; a translucent --surface floor
   (92%) under the frost keeps horizontally-scrolled content from ghosting through while still
   reading as glass. */
.nav-rail{display:none;position:fixed;left:0;top:0;bottom:0;width:var(--nav-rail-w);z-index:calc(var(--z-header) + 1);
  flex-direction:column;align-items:center;padding:8px 0 8px;
  /* EXACT header material: --header-shade tint over a theme-matched opaque floor + the same
     backdrop blur. --nav-rail-floor is the opaque under-layer so scrolled content can't ghost
     through; it defaults to --surface (light) and is overridden darker in dark themes so the
     rail tracks the header's tone (was a fixed navy --surface → rail read lighter than header). */
  --nav-rail-floor:var(--surface);
  background:linear-gradient(var(--header-shade),var(--header-shade)),var(--nav-rail-floor);
  backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract);
  border-right:0.5px solid var(--chrome-border);
  box-shadow:var(--lg-edge-strong),1px 0 0 color-mix(in srgb,var(--chrome-border) 60%,transparent),6px 0 20px -10px rgba(0,0,0,.18)}
/* dark themes: floor the rail on near-black (matches the header's rgba(0,0,0,.45+) tone) so the
   header + rail read as ONE dark chrome, not a lighter navy rail beside a darker header. */
[data-theme="midnight"] .nav-rail{--nav-rail-floor:color-mix(in srgb,var(--surface) 42%,#000)}
[data-theme="contrast"] .nav-rail{--nav-rail-floor:#000}
body.nav-sidebar .nav-rail{display:flex}  /* sidebar mode → rail visible (JS also clears [hidden]) */
.nav-rail[hidden]{display:none}            /* topbar mode keeps it hidden via the attr */
.nav-rail-brand{width:40px;height:40px;flex:0 0 auto;margin-bottom:4px;border-radius:var(--radius-md);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background var(--motion-fast),transform var(--motion-fast)}
.nav-rail-brand:hover{background:var(--chrome-bg)}
.nav-rail-brand:active{transform:scale(.94)}
.nav-rail-brand:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 60%,transparent)}
.nav-rail-brand svg{width:31px;height:31px;display:block;overflow:visible;filter:drop-shadow(0 2px 6px rgba(0,80,173,.28))}
.nav-rail-brand img{width:31px;height:31px;object-fit:contain;border-radius:7px}
/* Collapse toggle — a slim ghost button under the brand; hides the rail, reclaiming its 76px.
   The header's #navRailReopen brings it back. Icon mirrors the files-sidebar collapse glyph. */
/* Collapse toggle — a small, quiet chevron-left ("hide the left rail"). Sits just under the
   brand; low-key at rest, brightens on hover. Deliberately understated so it never competes
   with the nav items. */
.nav-rail-collapse{width:22px;height:22px;flex:0 0 auto;margin:0 0 2px;border:none;background:transparent;border-radius:7px;
  color:var(--on-chrome-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.45;
  transition:opacity var(--motion-fast),background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast)}
.nav-rail-collapse svg{width:13px;height:13px}
/* In AUTO-HIDE mode the rail is purely reveal-on-hover — no collapse/pin button (Gavin). Mode is
   changed only in Settings; nothing to accidentally click in the revealed rail. */
body.nav-rail-autohide .nav-rail-collapse{display:none}
.nav-rail-collapse:hover{opacity:1;background:color-mix(in srgb,var(--on-chrome) 8%,transparent);color:var(--on-chrome)}
.nav-rail-collapse:active{transform:scale(.88)}
.nav-rail-scroll{flex:1 1 auto;width:100%;display:flex;flex-direction:column;align-items:center;gap:2px;
  overflow-y:auto;overflow-x:hidden;scrollbar-width:none;padding:6px 0 8px;
  /* smoother scroll: momentum/inertia on touch, eased programmatic scrolls (e.g. active tab
     scroll-into-view), and CONTAIN so scrolling the rail to its end never chains to the page
     behind it (that scroll-chaining was the main 'rough' feel). */
  -webkit-overflow-scrolling:touch;scroll-behavior:smooth;overscroll-behavior:contain;
  /* soft fade at top+bottom so items DON'T hard-clip against the brand/foot when the list
     scrolls (20 items overflow a short viewport). Items dissolve at the edges instead. */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14px,#000 calc(100% - 16px),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 14px,#000 calc(100% - 16px),transparent 100%)}
.nav-rail-scroll::-webkit-scrollbar{display:none}
/* respect reduced-motion — no eased scroll for users who opt out */
@media (prefers-reduced-motion:reduce){ .nav-rail-scroll{scroll-behavior:auto} }
/* Header re-open button — only present when the rail is hidden in sidebar mode. Slim, glassy,
   sits at the far left of the slim header where the rail's edge used to be. */
/* quiet ghost — transparent at rest, faint; only tints subtly on hover. It's a low-key
   "bring the rail back" affordance, must NOT compete with the Atira brand beside it. */
.nav-rail-reopen{display:none;width:26px;height:26px;flex:0 0 auto;margin-right:4px;border:none;border-radius:8px;
  background:transparent;color:var(--on-chrome-muted);opacity:.5;cursor:pointer;align-items:center;justify-content:center;
  transition:background var(--motion-fast),color var(--motion-fast),opacity var(--motion-fast),transform var(--motion-fast)}
.nav-rail-reopen svg{width:15px;height:15px}
.nav-rail-reopen:hover{background:color-mix(in srgb,var(--on-chrome) 8%,transparent);color:var(--on-chrome);opacity:1}
.nav-rail-reopen:active{transform:scale(.9)}
@media (min-width:1025px){ body.nav-sidebar.nav-rail-hidden .nav-rail-reopen{display:inline-flex} }
/* Favorites divider — a quiet hairline separating pinned favorites from the rest,
   mirroring how the top strip floats favorites first. */
.nr-sep{width:40px;height:0;flex:0 0 auto;margin:5px 0 4px;border-top:0.5px solid var(--chrome-border);opacity:.85}
.nr-sep:first-child{display:none}
.nav-rail-foot{flex:0 0 auto;width:100%;display:flex;flex-direction:column;align-items:center;gap:7px;padding-top:10px;padding-bottom:2px;
  margin-top:6px;position:relative}
.nav-rail-foot:empty{display:none}   /* header owns the action/profile controls → no foot in sidebar mode */
/* divider = a soft hairline that fades at both ends (no hard full-width seam) */
.nav-rail-foot::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:36px;height:1px;
  background:linear-gradient(90deg,transparent,var(--chrome-border) 22%,var(--chrome-border) 78%,transparent)}
/* ── Rail items — Seven-Moons ICON-TILE system. Every item is an icon in its own rounded
   squircle tile (the material surface) + a label below. At rest the tile is a soft raised
   chip faintly tinted with the item's moon hue → the whole rail reads as one cohesive column
   of app-icon tiles, alive + consistent (never flat gray). ACTIVE = the tile becomes a
   filled glossy moon-hue ORB (radial fill + specular + depth) with a white glyph. NO left
   strip — the filled orb IS the selected marker. Spacing tuned as a system. ── */
.nav-rail-scroll{gap:1px}   /* rhythm comes from item padding + tile, not row gap */
.nr-item{--nr-hue:var(--app-accent);width:100%;border:none;background:transparent;cursor:pointer;color:var(--on-chrome-muted);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:5px 2px;border-radius:12px;
  font:inherit;font-size:8px;font-weight:600;letter-spacing:-.1px;line-height:1.05;text-align:center;position:relative;
  transition:color var(--motion-fast)}
/* the tile — a 34px squircle, soft-raised material, faintly moon-tinted at rest */
.nr-item .nr-tile{width:34px;height:34px;flex:0 0 auto;border-radius:11px;display:flex;align-items:center;justify-content:center;position:relative;
  background:linear-gradient(180deg,color-mix(in srgb,var(--nr-hue) 9%,var(--card-bg)),color-mix(in srgb,var(--nr-hue) 4%,var(--card-bg)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 .5px color-mix(in srgb,var(--nr-hue) 14%,var(--chrome-border)),0 1px 2px rgba(16,24,40,.08),0 2px 6px -3px rgba(16,24,40,.14);
  transition:transform var(--motion-base),box-shadow var(--motion-base),background var(--motion-base)}
/* dark themes: the light-mode white top-inset reads as a harsh bright edge on a dark tile —
   soften it to a faint highlight + a hairline so the tile still has form without glare. */
[data-theme="midnight"] .nr-item .nr-tile,[data-theme="contrast"] .nr-item .nr-tile{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 .5px color-mix(in srgb,var(--nr-hue) 20%,rgba(255,255,255,.06)),0 1px 2px rgba(0,0,0,.4)}
.nr-item .nr-ico{width:18px;height:18px;flex:0 0 auto;color:var(--nr-hue);opacity:.9;position:relative;z-index:1;
  filter:drop-shadow(0 1px 1px rgba(16,24,40,.18));transition:color var(--motion-fast),transform var(--motion-fast),filter var(--motion-fast)}
.nr-item .nr-lbl{max-width:56px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.82;transition:opacity var(--motion-fast),color var(--motion-fast)}
/* hover = the tile lifts + brightens; icon deepens into full hue */
.nr-item:hover:not(.active) .nr-tile{transform:translateY(-1.5px);
  background:linear-gradient(180deg,color-mix(in srgb,var(--nr-hue) 16%,var(--card-bg)),color-mix(in srgb,var(--nr-hue) 8%,var(--card-bg)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 .5px color-mix(in srgb,var(--nr-hue) 24%,var(--chrome-border)),0 3px 8px -2px color-mix(in srgb,var(--nr-hue) 30%,rgba(16,24,40,.2))}
.nr-item:hover:not(.active){color:var(--on-chrome)}
.nr-item:hover:not(.active) .nr-ico{opacity:1;transform:scale(1.04)}
.nr-item:hover:not(.active) .nr-lbl{opacity:1}
.nr-item:focus-visible{outline:none}
.nr-item:focus-visible .nr-tile{box-shadow:0 0 0 2px color-mix(in srgb,var(--nr-hue) 60%,transparent)}
.nr-item:active .nr-tile{transform:scale(.92)}
/* ACTIVE = a filled glossy moon-hue ORB tile — radial-gradient sphere fill + top specular +
   inset bevel + hue drop-shadow, white glyph. The confident selected state; no left strip. */
.nr-item.active .nr-tile{
  background:radial-gradient(ellipse at 42% 26%,color-mix(in srgb,var(--nr-hue) 55%,#fff),var(--nr-hue) 64%,color-mix(in srgb,var(--nr-hue) 82%,#000));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 5px rgba(0,0,0,.2),inset 0 0 0 .5px color-mix(in srgb,var(--nr-hue) 60%,#000),0 2px 6px -1px color-mix(in srgb,var(--nr-hue) 55%,transparent),0 5px 14px -4px color-mix(in srgb,var(--nr-hue) 60%,transparent)}
.nr-item.active .nr-ico{color:#fff;opacity:1;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.3))}
.nr-item.active .nr-lbl{opacity:1;color:var(--nr-hue);font-weight:700}
/* live count badge — pins to the tile corner; mirrors the top-nav .la-nav-badge count orb. */
.nr-item .nr-badge{position:absolute;top:-3px;right:-3px;min-width:15px;height:15px;padding:0 4px;border-radius:99px;z-index:2;
  background:var(--app-accent);color:#fff;font-size:9px;font-weight:800;line-height:15px;text-align:center;
  font-variant-numeric:tabular-nums;box-shadow:0 0 0 1.5px var(--header-shade),inset 0 1px 0 rgba(255,255,255,.35),0 1px 2px rgba(16,24,40,.25)}
.nr-item .nr-badge.alert{background:var(--app-danger,#ff3b30)}
.nr-item .nr-badge.warn{background:var(--moon-schedule,#F5A623);color:#3a2600}
.nr-item .nav-fav-star{position:absolute;top:-2px;right:-2px;width:10px;height:10px;color:var(--nr-hue);z-index:2;filter:drop-shadow(0 1px 1px rgba(16,24,40,.3))}
/* ── Foot cluster — mirrors the TOP-BAR orb pattern exactly (Gavin): the 3 action orbs
   (Create · Attention · Notifications) are WHITE-GLASS spheres — byte-identical recipe to the
   header .notif-bell (incl. the glossy ::after specular cap + dark --on-chrome glyph + accent
   hover). ONLY the user orb is the blue Atira avatar (matching header #userAvatar). ── */
.nr-foot-btn{width:30px;height:30px;border:none;border-radius:50%;color:var(--on-chrome);cursor:pointer;position:relative;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 32% 24%,#fff 0%,color-mix(in srgb,var(--on-chrome) 4%,var(--surface,#fff)) 46%,color-mix(in srgb,var(--on-chrome) 15%,var(--surface,#fff)) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 1px color-mix(in srgb,var(--on-chrome) 10%,transparent),inset 0 0 0 .5px color-mix(in srgb,var(--on-chrome) 10%,transparent),0 1px 2px rgba(16,24,40,.16),0 4px 9px -3px rgba(16,24,40,.26);
  transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast),box-shadow var(--motion-fast)}
/* glossy top specular cap — the highlight that sells the sphere (same as .notif-bell::after) */
.nr-foot-btn::after{content:'';position:absolute;left:50%;top:3px;transform:translateX(-50%);width:60%;height:42%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.9),rgba(255,255,255,0) 70%);opacity:.85}
.nr-foot-btn svg{width:15px;height:15px;position:relative;z-index:1;opacity:.85}
.nr-foot-btn:hover{color:var(--app-accent);
  background:radial-gradient(circle at 32% 24%,#fff 0%,color-mix(in srgb,var(--app-accent) 8%,var(--surface,#fff)) 46%,color-mix(in srgb,var(--app-accent) 20%,var(--surface,#fff)) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1),inset 0 -1px 1px color-mix(in srgb,var(--app-accent) 14%,transparent),inset 0 0 0 .5px color-mix(in srgb,var(--app-accent) 26%,transparent),0 1px 3px rgba(16,24,40,.2),0 6px 13px -3px color-mix(in srgb,var(--app-accent) 38%,transparent)}
.nr-foot-btn:hover svg{opacity:1}
.nr-foot-btn:active{transform:scale(.92)}
[data-theme="midnight"] .nr-foot-btn{
  background:radial-gradient(circle at 32% 26%,color-mix(in srgb,#fff 16%,var(--surface)),color-mix(in srgb,#000 10%,var(--surface)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 .5px rgba(255,255,255,.05),0 2px 6px rgba(0,0,0,.5),0 0 0 .5px rgba(0,0,0,.4)}
[data-theme="midnight"] .nr-foot-btn::after{background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.22),rgba(255,255,255,0) 70%);opacity:.7}
.nr-foot-btn .nr-foot-badge{position:absolute;top:-3px;right:-3px;min-width:15px;height:15px;padding:0 4px;border-radius:99px;z-index:2;
  background:var(--app-danger,#ff3b30);color:#fff;font-size:9px;font-weight:800;line-height:15px;text-align:center;
  font-variant-numeric:tabular-nums;box-shadow:0 0 0 1.5px var(--header-shade),inset 0 1px 0 rgba(255,255,255,.35)}
/* user orb — the blue Atira avatar (matches header #userAvatar), SAME size as the action orbs */
.nr-foot-ava{width:30px;height:30px;border:none;border-radius:50%;color:var(--on-accent);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;cursor:pointer;overflow:hidden;position:relative;
  background:radial-gradient(circle at 35% 26%,color-mix(in srgb,var(--app-accent) 42%,#fff),var(--app-accent) 86%);
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.55),0 1px 2px rgba(16,24,40,.18),0 2px 6px -1px color-mix(in srgb,var(--app-accent) 45%,transparent);
  transition:transform var(--motion-fast),box-shadow var(--motion-fast)}
.nr-foot-ava:hover{transform:translateY(-1px);box-shadow:inset 0 .5px 0 rgba(255,255,255,.6),0 1px 3px rgba(16,24,40,.22),0 4px 10px -2px color-mix(in srgb,var(--app-accent) 55%,transparent)}
.nr-foot-ava:active{transform:scale(.92)}
.nr-foot-ava img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}

/* Sidebar-mode shell shift — mirror the dock's margin mechanism (rail=left, dock=right).
   Desktop only; ≤1024px the rail hides and the existing top strip / mobile tabbar own nav.
   --nav-rail-shift is the reclaimable width: full when the rail is shown, 0 when collapsed
   (body.nav-rail-hidden) so the header + views reflow into the reclaimed space, animated. */
@media (min-width:1025px){
  body.nav-sidebar{--nav-rail-shift:var(--nav-rail-w)}
  body.nav-sidebar.nav-rail-hidden{--nav-rail-shift:0px}
  /* slide the rail off-canvas + fade when hidden (transform = no reflow of the rail itself) */
  body.nav-sidebar .nav-rail{transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .2s ease}
  body.nav-sidebar.nav-rail-hidden .nav-rail{transform:translateX(-100%);opacity:0;pointer-events:none}
  /* AUTO-HIDE — content takes the FULL width (shift 0, no reserved rail gutter); the rail hides
     off-screen and reveals as a floating OVERLAY (.nav-rail-peek) on left-edge hover. World-class
     motion: reveal eases IN with the app's --ease-out over --motion-base and the depth-shadow
     GROWS as it arrives; hide is a touch faster (--motion-fast) so it gets out of the way. Opacity
     + transform move in tandem so it 'materializes' rather than just pushing in. */
  body.nav-sidebar.nav-rail-autohide{--nav-rail-shift:0px}
  body.nav-sidebar.nav-rail-autohide .nav-rail{transform:translateX(-100%);opacity:0;pointer-events:none;
    box-shadow:var(--lg-edge-strong),0 0 0 .5px transparent,0 0 0 0 transparent;
    /* HIDE is snappy (120ms) so the rail gets out of the way promptly once the pointer leaves */
    transition:transform 120ms var(--ease-out),opacity 100ms var(--ease-out),box-shadow 120ms var(--ease-out)}
  body.nav-sidebar.nav-rail-autohide.nav-rail-peek .nav-rail{transform:translateX(0);opacity:1;pointer-events:auto;
    box-shadow:var(--lg-edge-strong),1px 0 0 color-mix(in srgb,var(--chrome-border) 60%,transparent),14px 0 40px -8px rgba(16,24,40,.34);
    transition:transform var(--motion-base) var(--ease-out),opacity var(--motion-fast) var(--ease-out),box-shadow var(--motion-base) var(--ease-out)}
  /* soft scrim that fades in with the revealed rail — grounds the overlay against the page
     without a hard modal backdrop (subtle, only left ~200px, click-through everywhere). */
  body.nav-sidebar.nav-rail-autohide::after{content:'';position:fixed;left:0;top:0;bottom:0;width:220px;pointer-events:none;
    z-index:var(--z-header);opacity:0;transition:opacity var(--motion-base) var(--ease-out);
    background:linear-gradient(90deg,rgba(16,24,40,.10),rgba(16,24,40,0) 78%)}
  body.nav-sidebar.nav-rail-autohide.nav-rail-peek::after{opacity:1}
  /* a thin invisible hot-zone strip at the far-left so the reveal is discoverable even over
     scrollable/interactive content (the JS also listens on mousemove as the primary trigger) */
  body.nav-sidebar.nav-rail-autohide::before{content:'';position:fixed;left:0;top:0;bottom:0;width:6px;z-index:calc(var(--z-header) - 1);pointer-events:none}
  body.nav-sidebar > .header{margin-left:var(--nav-rail-shift);transition:margin-left .28s cubic-bezier(.4,0,.2,1)}
  /* .filter-bar is a body-level, position:sticky, full-width bar in a display:flex body —
     margin-left doesn't move it. Push its CONTENT clear of the rail with padding instead so
     the bar background stays continuous but nothing tucks under the rail. (Base pad is 16px.) */
  body.nav-sidebar .filter-bar{padding-left:calc(16px + var(--nav-rail-shift)) !important;
    transition:padding-left .28s cubic-bezier(.4,0,.2,1)}
  body.nav-sidebar #board,body.nav-sidebar #listView,body.nav-sidebar #activityView,body.nav-sidebar #dashboardView,
  body.nav-sidebar #contactsView,body.nav-sidebar #complianceView,body.nav-sidebar #omHomeView,body.nav-sidebar #estHomeView,
  body.nav-sidebar #bidPipelineView,body.nav-sidebar #acctHomeView,body.nav-sidebar #ledgerView,body.nav-sidebar #ownerHomeView,
  body.nav-sidebar #adminView,body.nav-sidebar #chatView,body.nav-sidebar #teamChatView,body.nav-sidebar #todoView,
  body.nav-sidebar #reportsView,body.nav-sidebar #recurringView,body.nav-sidebar #myWorkView,body.nav-sidebar #photosView,
  body.nav-sidebar #filesView,body.nav-sidebar #calendarView,body.nav-sidebar #lookaheadView,body.nav-sidebar #ganttView,
  body.nav-sidebar #projectBoardView,body.nav-sidebar #projectFullView{margin-left:var(--nav-rail-shift);
    /* Views set width/max-width off 100vw; the rail margin pushes their right edge past the
       viewport (clipped by body overflow:hidden). Cap the usable width to the space LEFT of
       the rail so nothing is cut off. width auto lets flex/block reflow. */
    max-width:calc(100vw - var(--nav-rail-shift)) !important; width:auto !important;
    transition:margin-left .28s cubic-bezier(.4,0,.2,1),max-width .28s cubic-bezier(.4,0,.2,1)}
  /* In sidebar mode the top strip nav lives in the rail → collapse the header's view-toggle,
     leaving the header as a slim CONTEXT bar (brand handled by the rail; keep search + right cluster).
     When the rail is HIDDEN, restore the header brand so the product mark isn't lost. */
  body.nav-sidebar .header .view-toggle{display:none}
  body.nav-sidebar .header .header-brand{display:none}
  body.nav-sidebar.nav-rail-hidden .header .header-brand{display:flex}
}
@media (max-width:1024px){ body.nav-sidebar .nav-rail{display:none !important} }
/* V39h — .btn refined to Apple HIG: subtle scale+opacity on active (not brightness),
   inset hairline highlight on primary, faster/tighter motion. font-size kept at
   13/13.5px so existing layouts don't reflow. */
.btn{height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border:none;border-radius:var(--radius-md);font-size:13px;font-weight:600;cursor:pointer;transition:background var(--motion-fast),transform var(--motion-fast),opacity var(--motion-fast);white-space:nowrap;letter-spacing:-.05px}
.btn:hover{opacity:.85}
.btn:active{transform:scale(.97);opacity:1}
/* V39bbbbbb — disabled state shouldn't show hover-opacity or active-press. The
   global rule at V39t handles opacity+cursor; this just kills the press effects
   so disabled buttons don't pretend to be tappable. */
.btn:disabled:hover,.btn[disabled]:hover,.btn-primary:disabled:hover,.btn-primary[disabled]:hover,
.btn:disabled:active,.btn[disabled]:active,.btn-primary:disabled:active,.btn-primary[disabled]:active{opacity:.45;transform:none}
/* V132 — primary CTA = hero pill: top-lit accent gradient + specular rim, lifts
   with an accent-glow halo on hover, springy press deform. */
.btn-primary{background:linear-gradient(to bottom, color-mix(in srgb,#fff 16%,var(--app-accent)), var(--app-accent) 64%, color-mix(in srgb,#000 8%,var(--app-accent)));color:var(--on-accent);border:none;border-radius:var(--radius-md);height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;font-size:13px;font-weight:600;letter-spacing:-.1px;cursor:pointer;white-space:nowrap;transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-base),filter var(--motion-fast);font-family:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 1px 2px color-mix(in srgb,var(--app-accent) 30%,transparent),0 0 0 0.5px color-mix(in srgb,#000 8%,transparent)}
.btn-primary:hover{filter:brightness(1.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 4px 14px color-mix(in srgb, var(--app-accent) 38%, transparent),0 0 0 0.5px color-mix(in srgb,#000 8%,transparent);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0) scale(.96);filter:brightness(1);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 1px 2px color-mix(in srgb,var(--app-accent) 24%,transparent)}
/* V-glass2 2026-06-30 — BOLD primary button (the "Max" CTA Gavin picked): an accent GLOW
   halo on rest + hover, plus a faint top specular cap. The specular is a BACKGROUND LAYER
   (an extra top-radial composited into the fill) — NOT a pseudo-element — so it always sits
   behind the label/icons with zero stacking-context or containing-block side effects (no
   position:relative, no ::after over text). A colored solid → no glare/halo concern. */
.btn-primary{
  background:
    radial-gradient(60% 90% at 38% -30%, rgba(255,255,255,.34), transparent 72%),
    linear-gradient(to bottom, color-mix(in srgb,#fff 16%,var(--app-accent)), var(--app-accent) 64%, color-mix(in srgb,#000 8%,var(--app-accent)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 1px 2px color-mix(in srgb,var(--app-accent) 30%,transparent),0 0 0 0.5px color-mix(in srgb,#000 8%,transparent),var(--glow-accent-soft)}
.btn-primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 6px 18px color-mix(in srgb,var(--app-accent) 42%,transparent),0 0 0 0.5px color-mix(in srgb,#000 8%,transparent),var(--glow-accent-soft)}
.btn-white{background:var(--chrome-bg-strong);color:var(--on-chrome);border:1px solid var(--chrome-border)}
.btn-white:hover{background:var(--chrome-bg-strong-hover);filter:none}
.btn-green{background:var(--app-accent);color:var(--on-accent)}
/* V63 — Project modal contacts/clients assign buttons share min-width so
   they read as the same control. */
.pc-assign-btn{min-width:140px}
/* V66 — Project Actions as a 2x2 grid of compact tiles. Each tile is a
   card with a colored icon tile + label. Better use of mobile width than
   the 4-row list pattern. */
.action-grid{
  display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px;
}
@media (max-width:640px){
  /* mobile modal is full-width → 2x2 action grid (Board/Archive top,
     Duplicate/Delete bottom). 1-col is only for the narrow desktop sidebar. */
  .action-grid{grid-template-columns:1fr 1fr;gap:10px}
}
.action-tile{
  display:flex;flex-direction:row;align-items:center;gap:10px;
  background:var(--surface-grad,var(--card-bg));border:0.5px solid var(--chrome-border);
  border-radius:var(--radius-lg);
  padding:10px 12px;font-family:inherit;font-size:13.5px;font-weight:500;
  color:var(--text-primary);cursor:pointer;text-align:left;
  transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast),border-color var(--motion-fast);
  min-height:44px;letter-spacing:-.15px;
  box-shadow:var(--bevel-top,inset 0 1px 0 rgba(255,255,255,.35)),var(--shadow-e1);
  -webkit-tap-highlight-color:transparent;
}
.action-tile:hover{transform:translateY(-1px);box-shadow:var(--bevel-top,inset 0 1px 0 rgba(255,255,255,.35)),var(--shadow-e2);border-color:color-mix(in srgb,var(--app-accent) 30%,var(--chrome-border))}
.action-tile:active{transform:scale(.97);background:color-mix(in srgb, var(--text-primary) 4%, var(--card-bg))}
.action-tile-label{flex:1;min-width:0;line-height:1.25}
.action-tile-danger{color:var(--app-danger)}
.action-tile-danger:hover{border-color:color-mix(in srgb,var(--app-danger) 38%,var(--chrome-border));background:color-mix(in srgb,var(--app-danger) 5%,var(--card-bg))}
.action-tile-danger:active{background:color-mix(in srgb, var(--app-danger) 8%, var(--card-bg))}
/* Icon tile (shared with old row pattern + new grid pattern) */
.action-row-tile{
  width:28px;height:28px;flex-shrink:0;border-radius:var(--radius-sm);
  display:inline-flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--app-accent) 16%, transparent);
  color:var(--app-accent);
}
.action-row-ico{width:16px;height:16px;flex-shrink:0;display:block}
/* V63 — Collapsible sections inside the project modal. Uses native <details>
   for accessibility (keyboard, screen reader). Summary row is the section
   title; clicking toggles open/closed. */
/* V135 — GLOBAL: no raw browser disclosure triangle (▶) on any <summary> (Gavin: the native
   expandable glyph is off-brand and showed up across many sections). Marker suppressed app-wide;
   summaries that want an affordance use a custom chevron (see .rt-summary-caret / per-class carets). */
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
summary::marker{content:''}
/* V135 — reusable quiet disclosure row: label + a rotating chevron (replaces bare summaries that
   used to show the native ▶). Use on any inline/bare <summary> that needs a clear expand affordance. */
.rt-disclosure-summary{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--text-muted);padding:5px 2px;border-radius:var(--radius-sm);transition:color var(--motion-fast)}
.rt-disclosure-summary:hover{color:var(--text-primary)}
.rt-disclosure-summary::after{content:'';flex:0 0 auto;margin-left:auto;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);opacity:.7;transition:transform var(--motion-base) var(--ease-out)}
details[open] > .rt-disclosure-summary::after{transform:rotate(45deg)}
.modal-collapsible > summary.modal-collapsible-summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0;margin:0;
  user-select:none;-webkit-user-select:none;
}
.modal-collapsible > summary.modal-collapsible-summary::-webkit-details-marker{display:none}
.modal-collapsible > summary.modal-collapsible-summary::after{
  content:'';width:8px;height:8px;border-right:1.5px solid var(--text-muted);border-bottom:1.5px solid var(--text-muted);
  transform:rotate(45deg);transition:transform var(--motion-fast);margin-right:4px;
}
.modal-collapsible[open] > summary.modal-collapsible-summary::after{transform:rotate(-135deg)}
.modal-collapsible > .modal-collapsible-body{margin-top:12px;animation:modalCollapseIn var(--motion-fast) ease-out}
@keyframes modalCollapseIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.dl-placeholder{background:color-mix(in srgb,var(--app-accent) 8%,transparent);border-radius:var(--radius-md);margin:1px 0}
.dl-dragging{box-shadow:var(--shadow-e4);transform:scale(1.02);background:var(--card-bg);border-radius:var(--radius-md)}
[data-drag-handle]{touch-action:none}
/* ── Customize Layout sheet (Task 5) ── */
/* V101 — keyboard shortcut sheet */
.kbd-sheet-backdrop{position:fixed;inset:0;background:var(--overlay-bg,rgba(0,0,0,.45));z-index:var(--z-modal,1000);display:flex;align-items:center;justify-content:center;padding:20px;animation:modalOverlayIn var(--motion-base) var(--ease-out)}
.kbd-sheet{background:var(--lg-bg-strong);backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),var(--shadow-e4);border:0.5px solid var(--chrome-border);border-radius:var(--radius-card);padding:20px 22px;width:min(94vw,360px);color:var(--text-primary)}
@media (prefers-reduced-transparency:reduce){.kbd-sheet{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
.kbd-sheet-title{font-size:17px;font-weight:700;letter-spacing:-.3px;margin-bottom:14px}
.kbd-sheet-list{display:flex;flex-direction:column;gap:7px}
.kbd-sheet-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.kbd-sheet-label{font-size:13px;color:var(--text-primary);font-weight:500}
.kbd-keys{display:inline-flex;align-items:center;gap:4px}
.kbd-then{font-size:10.5px;color:var(--text-muted)}
.kbd-sheet kbd{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;background:color-mix(in srgb,var(--text-primary) 8%,transparent);border:0.5px solid var(--chrome-border);border-bottom-width:1.5px;border-radius:var(--radius-xs);font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-primary)}
.kbd-sheet-hint{margin-top:14px;font-size:11px;color:var(--text-muted);text-align:center}
.cz-sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:var(--z-modal,1000);display:flex;align-items:flex-end;justify-content:center}
@media(min-width:641px){.cz-sheet-backdrop{align-items:center}}
.cz-sheet{background:var(--lg-bg-strong);backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),var(--shadow-e4);width:100%;max-width:420px;border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:14px 14px 18px;max-height:88vh;display:flex;flex-direction:column}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.cz-sheet{background:var(--surface)}}
@media (prefers-reduced-transparency:reduce){.cz-sheet{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(min-width:641px){.cz-sheet{border-radius:var(--radius-xl)}}
.cz-sheet-head{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto}
.cz-sheet-title{font-weight:700;font-size:17px;color:var(--text-primary)}
.cz-done{color:var(--app-accent);font-weight:600;background:none;border:0;font-size:15px;cursor:pointer;font-family:inherit}
.cz-sheet-body{flex:1;min-height:0;overflow-y:auto;margin-top:6px}
.cz-zone-head{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;margin:16px 4px 6px;display:flex;align-items:center;gap:6px}
.cz-zone{display:flex;flex-direction:column;gap:1px;background:var(--card-bg);border-radius:var(--radius-group);overflow:hidden;min-height:8px}
.cz-zone.cz-fav{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--app-accent) 22%,transparent)}
.cz-row{display:flex;align-items:center;gap:13px;padding:12px 14px;background:var(--card-bg)}
.cz-circ{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto;cursor:pointer;color:#fff;font-size:17px;line-height:1;font-weight:600;user-select:none}
.cz-circ.rm{background:var(--color-error)}.cz-circ.add{background:var(--color-success)}
.cz-name{flex:1;font-size:15px;color:var(--text-primary);display:flex;align-items:center;gap:10px}
.cz-star{width:18px;height:18px;flex:0 0 auto;color:color-mix(in srgb,var(--text-primary) 20%,transparent);cursor:pointer}
.cz-star.on{color:var(--app-accent)}
.cz-grip{color:color-mix(in srgb,var(--text-primary) 24%,transparent);cursor:grab;touch-action:none}
.cz-ico{width:18px;height:18px;flex:0 0 auto}
.cz-reset{flex:0 0 auto;margin-top:16px;background:var(--card-bg);border:0;border-radius:var(--radius-group);padding:12px;color:var(--color-error);font-weight:500;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-family:inherit;font-size:15px}
.cz-reset .cz-ico{color:var(--color-error)}

/* Interactive HTML doc viewer (Task 5) — theme tokens only */
/* Desktop/iPad: centered card. Mobile: iOS bottom sheet (rounded top, grabber, safe-area). */
.htmlv-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:var(--z-modal,1100);display:none;align-items:center;justify-content:center;padding:16px}
/* Default sheet must be wide enough that the embedded doc renders its FULL desktop
   layout (Lido/Swanson docs: 264px sidebar + 1180px content ≈ 1444px ideal; they
   stay 2-col + sidebar-pinned down to ~980px). min(1480px, 96vw) gives the full
   layout on desktop and the widest possible on iPad — never crops the page. On
   iPad+desktop the sheet is user-resizable (drag the corner); mobile is a full
   bottom sheet (resize disabled below). */
.htmlv-sheet{background:var(--card-bg);width:96vw;max-width:1480px;height:90vh;border-radius:var(--radius-xl);display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-menu,0 12px 48px rgba(0,0,0,.3));position:relative;min-width:480px;min-height:360px;max-height:96vh}
/* User resize (iPad+desktop): a dedicated corner grip, since CSS resize:both needs
   overflow:auto (would break the sheet's rounded-corner clipping + iframe contain).
   Hidden on mobile. When the user drags it we set explicit px width/height inline
   (overriding the vw/vh defaults) — the default load always shows the full page. */
.htmlv-resize-grip{position:absolute;right:0;bottom:0;width:22px;height:22px;cursor:nwse-resize;z-index:3;touch-action:none;display:flex;align-items:flex-end;justify-content:flex-end;padding:3px;color:color-mix(in srgb,var(--text-primary) 30%,transparent)}
.htmlv-resize-grip svg{width:13px;height:13px;display:block}
.htmlv-resize-grip:hover{color:color-mix(in srgb,var(--text-primary) 55%,transparent)}
.htmlv-grabber{display:none}
.htmlv-head{flex:0 0 auto;display:flex;align-items:center;gap:10px;justify-content:space-between;padding:12px 16px;border-bottom:0.5px solid var(--border)}
.htmlv-title{font-weight:700;font-size:16px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.htmlv-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.htmlv-btn{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2,color-mix(in srgb,var(--text-primary) 6%,transparent));border:0.5px solid var(--border);border-radius:9px;padding:7px 11px;font-size:13px;font-weight:500;color:var(--text-primary);cursor:pointer;font-family:inherit;white-space:nowrap}
.htmlv-btn:hover{background:var(--surface-3,color-mix(in srgb,var(--text-primary) 10%,transparent))}
.htmlv-btn:active{transform:scale(.97)}
.htmlv-btn-label{display:inline}
/* §1 — deep search box + hit panel + version rail (Apple-caliber, theme-token driven). */
.htmlv-search{flex:1 1 auto;min-width:120px;max-width:380px;display:flex;align-items:center;gap:7px;background:var(--surface-2,color-mix(in srgb,var(--text-primary) 6%,transparent));border:0.5px solid var(--border);border-radius:9px;padding:0 10px;height:34px}
.htmlv-search-ico{width:15px;height:15px;flex:0 0 auto;color:var(--text-secondary,var(--text-muted))}
.htmlv-search-input{flex:1 1 auto;min-width:0;border:0;background:transparent;font:inherit;font-size:13px;color:var(--text-primary);outline:none}
.htmlv-search-input::placeholder{color:var(--text-muted)}
.htmlv-searchpanel{flex:0 0 auto;max-height:34vh;overflow-y:auto;border-bottom:0.5px solid var(--border);background:var(--surface-1,var(--card-bg))}
.htmlv-search-head{position:sticky;top:0;padding:8px 16px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);background:var(--surface-1,var(--card-bg))}
.htmlv-search-empty{padding:14px 16px;font-size:13px;color:var(--text-muted)}
.htmlv-search-hit{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;padding:9px 16px;border:0;border-top:0.5px solid var(--border);background:transparent;cursor:pointer;font-family:inherit}
.htmlv-search-hit:hover{background:var(--surface-2,color-mix(in srgb,var(--text-primary) 6%,transparent))}
.htmlv-search-hit-loc{font-size:12px;font-weight:600;color:var(--app-accent)}
.htmlv-search-hit-snip{font-size:12.5px;color:var(--text-secondary,var(--text-muted));line-height:1.4}
.htmlv-versions{flex:0 0 auto;max-height:38vh;overflow-y:auto;border-bottom:0.5px solid var(--border);background:var(--surface-1,var(--card-bg))}
.htmlv-versions-head{position:sticky;top:0;padding:10px 16px;font-size:12px;font-weight:700;color:var(--text-primary);background:var(--surface-1,var(--card-bg));border-bottom:0.5px solid var(--border)}
.htmlv-versions-count{display:inline-flex;min-width:18px;justify-content:center;margin-left:6px;padding:0 6px;border-radius:999px;font-size:11px;background:var(--surface-3,color-mix(in srgb,var(--text-primary) 10%,transparent));color:var(--text-secondary,var(--text-muted))}
.htmlv-version-row{display:flex;align-items:center;gap:10px;padding:9px 16px;border-top:0.5px solid var(--border)}
.htmlv-version-when{flex:1 1 auto;font-size:13px;color:var(--text-primary)}
.htmlv-version-reason{flex:0 0 auto;font-size:11.5px;color:var(--text-muted);text-transform:capitalize}
.htmlv-version-restore{padding:5px 11px;font-size:12.5px}
@media (max-width:640px){.htmlv-search{max-width:none;order:5;flex-basis:100%}.htmlv-btn-label{display:none}}
.htmlv-close{padding:7px}
.htmlv-ico{width:15px;height:15px;flex:0 0 auto}
/* Doc body: a neutral "mat" so a white doc reads as intentional paper on any theme,
   not a rendering seam against dark chrome. */
.htmlv-body{flex:1;min-height:0;background:color-mix(in srgb,var(--text-primary) 6%,var(--app-bg));position:relative}
.htmlv-iframe{width:100%;height:100%;border:0;display:block;background:#fff}
/* 2026-05-22 📘 Inline Project Record doc (embedded in the PFV tab, not an overlay).
   The #tabDocument tab-content fills #pfvContent; the doc host is a flex column with
   a toolbar on top + the iframe filling the rest, scrolling inside the frame. */
/* doc-mode: the Project Record tab is full-bleed — the interactive HTML fills the
   whole content area. The tab content lives inside .modal-cols (a 2-col grid:
   main + 192px phase/actions rail) nested under .modal-body in #pfvContent. In
   doc-mode we: (1) flex #pfvContent + .modal-body + .modal-cols to fill height,
   (2) collapse .modal-cols to a single column (.no-sidebar, already defined) so
   the rail is hidden, (3) let #tabDocument + the doc host flex to fill. */
/* B3 fix (2026-06-10): the Project Record doc grows to its full height (the iframe is sized
   to content by the pvHtmlH reporter) and THIS container is the single page scroller — so the
   whole document shows with ONE scrollbar (no inner-iframe half-cutoff). */
.pfv-content.pfv-doc-mode{display:flex;flex-direction:column;padding:0;overflow-y:auto;overflow-x:hidden}
.pfv-content.pfv-doc-mode > .modal-body{display:flex;flex-direction:column;flex:1;min-height:0}
.pfv-content.pfv-doc-mode .modal-cols{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:100%;align-items:stretch}
.pfv-content.pfv-doc-mode .modal-cols > *:not(:first-child){display:none !important}
.pfv-content.pfv-doc-mode .modal-cols > :first-child{min-height:0;height:100%;display:flex;flex-direction:column;align-self:stretch}
.pfv-content.pfv-doc-mode .pfv-section-strip{display:none !important}
#tabDocument.tab-content.active{display:flex;flex-direction:column;flex:1;min-height:0;padding:0;margin:0}
/* §4 — the per-job Cockpit landing page + its .pfv-cockpit / .pfv-ck-* styles were removed
   (Overview is the project landing now). The shared .cockpit metric-tile grid (used by the
   Overview Vitals zone) lives on, further down. */
/* Workspace P1 — sidebar "Customize" footer + popover */
.pfv-sb-customize{margin-top:10px;padding-top:10px;border-top:0.5px solid var(--chrome-border)}
.pfv-sb-custom-btn{width:100%;display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--radius-md);border:0;background:transparent;color:var(--text-muted);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
.pfv-sb-custom-btn:hover:not([disabled]){background:var(--chrome-bg-hover);color:var(--text-primary)}
.pfv-sb-custom-btn[disabled]{opacity:.45;cursor:default}
.pfv-sb-custom-btn svg{width:15px;height:15px;flex:0 0 auto}
.pfv-cz-pop{position:fixed;z-index:var(--z-popover,900);width:300px;max-width:calc(100vw - 24px);max-height:70vh;overflow-y:auto;padding:14px;border-radius:var(--radius-lg);box-shadow:var(--shadow-e4);display:flex;flex-direction:column;gap:10px}
.pfv-cz-head{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:700;color:var(--text-primary)}
.pfv-cz-x{border:0;background:transparent;color:var(--text-muted);cursor:pointer;width:26px;height:26px;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center}
.pfv-cz-x:hover{background:var(--chrome-bg-hover);color:var(--text-primary)}.pfv-cz-x svg{width:13px;height:13px}
.pfv-cz-land{display:flex;align-items:center;gap:8px}
.pfv-cz-land-l{font-size:12px;font-weight:600;color:var(--text-muted);flex:0 0 auto}
.pfv-cz-land-sel{flex:1;min-width:0;font:inherit;font-size:13px;padding:6px 8px;border-radius:var(--radius-sm);border:0.5px solid var(--chrome-border);background:var(--surface-2);color:var(--text-primary)}
.pfv-cz-sub{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin-top:2px}
.pfv-cz-rows{display:flex;flex-direction:column;gap:1px}
.pfv-cz-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px;border-radius:var(--radius-sm);cursor:pointer}
.pfv-cz-row:hover{background:var(--chrome-bg-hover)}
.pfv-cz-name{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--text-primary);min-width:0}
.pfv-cz-ico{width:14px;height:14px;flex:0 0 auto;color:var(--text-muted)}
.pfv-cz-reset{margin-top:4px;width:100%;padding:8px;border-radius:var(--radius-md);border:0.5px solid var(--chrome-border);background:var(--surface-2);color:var(--text-primary);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.pfv-cz-reset:hover{background:var(--chrome-bg-hover)}
.pfv-htmldoc{display:flex;flex-direction:column;flex:1;min-height:0;width:100%}
.pfv-htmldoc-bar{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:8px 4px;border-bottom:0.5px solid var(--chrome-border);margin-bottom:0}
.pfv-htmldoc-bar:empty{display:none}
/* B3: frame + iframe grow to the doc's content height (reporter sets iframe height); the
   container above scrolls. min-height keeps a sensible floor before the first height report. */
.pfv-htmldoc-frame{flex:0 0 auto;min-height:60vh;position:relative;background:color-mix(in srgb,var(--text-primary) 6%,var(--app-bg))}
.pfv-htmldoc-iframe{width:100%;height:100%;min-height:60vh;border:0;display:block;background:#fff}
.pfv-htmldoc-empty{padding:40px 20px;text-align:center;color:var(--text-muted);font-size:14px;display:flex;flex-direction:column;align-items:center;gap:14px}
/* V121 📘 — Project Records picker shelf: a gallery of a project's HTML records
   (many per project; one active). Content cards (solid/opaque per DESIGN.md), lazy
   live previews, active badge, admin ⋯ menu. */
.pfv-records-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 16px 12px}
.pfv-records-title{font-size:17px;font-weight:700;letter-spacing:-.3px;color:var(--text-primary);display:inline-flex;align-items:center;gap:9px}
.pfv-records-count{font-size:12px;font-weight:700;color:var(--text-muted);background:color-mix(in srgb,var(--text-primary) 7%,transparent);border-radius:999px;padding:2px 9px;font-variant-numeric:tabular-nums}
.pfv-records-addbtn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;font-size:13px}
.pfv-records-add-ico{width:13px;height:13px;flex-shrink:0}
.pfv-records-add{display:inline-flex;align-items:center;gap:8px}
.pfv-records-empty{margin-top:8px}
/* Scroll container clips the box-shadow on its edges (overflow-y:auto makes the X
   axis clip too, per CSS spec). Pad enough (≥ shadow spread) on all sides so each
   card's shadow renders fully inside the padded area, never reaching the clip edge. */
.pfv-records-grid{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:18px;padding:14px 16px 20px;align-content:start}
/* NOTE: no overflow:hidden on the card — that clips the box-shadow into a hard
   square edge (a bug seen elsewhere too). The preview region does its own clipping
   + carries the top corner radius; the footer is square-bottom inside the radius. */
.pfv-rec-card{background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-e2);cursor:pointer;display:flex;flex-direction:column;transition:transform var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out)}
.pfv-rec-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-e3)}
.pfv-rec-card:active{transform:scale(.99)}
.pfv-rec-card-active{border-color:color-mix(in srgb,var(--app-accent) 55%,var(--chrome-border));box-shadow:var(--shadow-e2),0 0 0 1px color-mix(in srgb,var(--app-accent) 32%,transparent)}
/* While this card's ⋯ menu is open, freeze it — no hover-lift, no press reaction. */
.pfv-rec-card-menuopen,.pfv-rec-card-menuopen:hover,.pfv-rec-card-menuopen:active{transform:none;box-shadow:var(--shadow-e2)}
.pfv-rec-card-active.pfv-rec-card-menuopen{box-shadow:var(--shadow-e2),0 0 0 1px color-mix(in srgb,var(--app-accent) 32%,transparent)}
/* Preview window — a clipped, non-interactive mini render scaled to fit the card.
   Carries the card's TOP corner radius (the card itself no longer clips). */
.pfv-rec-preview{position:relative;height:150px;background:color-mix(in srgb,var(--text-primary) 5%,var(--app-bg));overflow:hidden;border-bottom:0.5px solid var(--chrome-border);border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.pfv-rec-preview-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.pfv-rec-ph-ico{width:30px;height:30px;color:color-mix(in srgb,var(--text-primary) 22%,transparent)}
.pfv-rec-preview-frame{position:absolute;top:0;left:0;width:200%;height:300px;border:0;transform:scale(.5);transform-origin:top left;pointer-events:none;opacity:0;transition:opacity var(--motion-base) var(--ease-out);background:#fff}
.pfv-rec-preview-ready .pfv-rec-preview-frame{opacity:1}
.pfv-rec-preview-ready .pfv-rec-preview-ph{opacity:0}
.pfv-rec-foot{display:flex;align-items:center;gap:8px;padding:11px 12px}
.pfv-rec-info{flex:1;min-width:0}
.pfv-rec-title{font-size:13.5px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:7px}
.pfv-rec-badge{flex-shrink:0;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:#fff;background:var(--app-accent);border-radius:5px;padding:2px 6px}
.pfv-rec-meta{font-size:11px;color:var(--text-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfv-rec-menu-btn{flex-shrink:0;width:30px;height:30px;border:0;background:transparent;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);transition:background var(--motion-fast),color var(--motion-fast)}
@media (pointer:coarse){.pfv-rec-menu-btn{min-width:var(--tap-min,44px);min-height:var(--tap-min,44px)}}
.pfv-rec-menu-btn:hover{background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-primary)}
.pfv-rec-menu-ico{width:16px;height:16px}
/* Record ⋯ menu — glass pop (rt-glass-pop) with ROUNDED, INSET hover rows so the
   highlight reads as a pill inset from the menu edge (the qn-export-action family),
   not a square full-bleed bar. */
.pfv-rec-menu-pop{position:absolute;z-index:var(--z-toast);border-radius:var(--radius-md);padding:6px;min-width:200px;display:flex;flex-direction:column;gap:1px}
.pfv-rec-act{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:none;text-align:left;padding:8px 10px;border-radius:var(--radius-sm);color:var(--text-primary);font-family:inherit;font-size:13px;cursor:pointer;transition:background var(--motion-fast)}
.pfv-rec-act:hover{background:var(--surface-2)}
.pfv-rec-act-ico{width:15px;height:15px;flex-shrink:0;color:var(--text-secondary)}
.pfv-rec-menu-sep{height:0.5px;background:var(--chrome-border);margin:5px 6px}
.pfv-rec-act-danger{color:var(--color-error)}
.pfv-rec-act-danger .pfv-rec-act-ico{color:var(--color-error)}
.pfv-rec-act-danger:hover{background:color-mix(in srgb,var(--color-error) 12%,transparent)}
.htmlv-activity{flex:0 0 auto;max-height:34%;overflow-y:auto;border-top:0.5px solid var(--border);padding:8px 16px;background:var(--app-bg)}
.htmlv-act-head{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);margin:8px 0 4px}
.htmlv-act-row{font-size:12.5px;color:var(--text-primary);padding:5px 0;border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 8%,transparent)}
.htmlv-act-row code{background:color-mix(in srgb,var(--app-accent) 12%,transparent);padding:1px 5px;border-radius:5px;font-size:11.5px}
@media(max-width:640px){
  .htmlv-overlay{align-items:flex-end;padding:0}
  /* Mobile: full-width bottom sheet, NOT resizable (full page is reachable via
     the doc's own ≤820px responsive layout + vertical scroll). */
  .htmlv-sheet{width:100%;height:94vh;max-width:100%;min-width:0;border-radius:var(--radius-xl) var(--radius-xl) 0 0;animation:htmlvSheetUp .28s var(--ease-out,cubic-bezier(.32,.72,0,1))}
  .htmlv-resize-grip{display:none}
  .htmlv-grabber{display:block;width:36px;height:5px;border-radius:3px;background:color-mix(in srgb,var(--text-primary) 22%,transparent);margin:7px auto 0;flex:0 0 auto}
  .htmlv-head{padding:8px 14px 12px;padding-top:8px}
  .htmlv-title{font-size:15px}
  /* icon-only buttons on mobile — no text wrap, tap-friendly */
  .htmlv-btn{padding:8px;border-radius:10px}
  .htmlv-btn-label{display:none}
  .htmlv-activity{max-height:42%;padding-bottom:calc(8px + env(safe-area-inset-bottom,0))}
  .htmlv-body{padding-bottom:env(safe-area-inset-bottom,0)}
}
@keyframes htmlvSheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.btn-danger{background:var(--app-danger);color:var(--on-accent)}
/* V28b (2026-05-17 cont. 14): .btn-quiet had same root-cause class as V27d .btn-ghost
   — translucent --chrome-bg on surface zone + white --on-chrome text on rr-brand/sepia
   = invisible chip with invisible text. Hybrid pattern matches V27d. */
/* V77.8 — Apple-style quiet button. Was 1px hard border + heavy translucent
   fill that read as Bootstrap-y. Now: hairline 0.5px border, lighter fill
   tone, rounded pill corners, 14px medium weight. Matches Apple iOS UIButton
   .filled style for secondary actions. */
.btn-quiet{background:color-mix(in srgb, var(--text-primary) 5%, transparent);color:var(--text-primary);border:0.5px solid color-mix(in srgb, var(--text-primary) 14%, transparent);border-radius:var(--radius-md);font-size:13px;font-weight:500;letter-spacing:-.1px;box-shadow:0 1px 1px rgba(15,23,42,.04)}
/* V132.3 — a .btn-quiet in the HEADER sits on the chrome matte (dark green on
   Mangrove/Bayfront) → --text-primary (dark navy) rendered nearly invisible.
   Header instances use the chrome foreground + a header-pill film so they read
   on every theme (the 76 content .btn-quiet uses are untouched). */
/* Use the header's own shade (a dark scrim on dark themes, light on light) as the
   pill film + --on-chrome text → always high-contrast, regardless of the header's
   backdrop brightness. */
.header .btn-quiet{background:var(--surface);color:var(--text-primary);border-color:var(--chrome-border);box-shadow:var(--shadow-e1)}
.header .btn-quiet:hover{background:var(--surface-2)}
.btn-quiet:hover{background:color-mix(in srgb, var(--text-primary) 9%, transparent);filter:none}
.btn-quiet:active{transform:scale(.97)}

/* V77.8 — Apple-style Export dropdown menu. Was a stark white panel with
   1px hard border and chunky rows. Apple Context menu pattern: blurred
   translucent background, 0.5px inner ring, soft elevated shadow, rounded
   ~10px corners. Rows are 36px with subtle hover, danger-style hierarchy. */
.export-menu{
  border-radius:var(--radius-card) !important;
  padding:5px !important;
  min-width:240px !important;
}
.export-menu .export-item{
  display:flex;
  align-items:center;
  gap:9px;
  padding:7px 10px !important;
  font-size:13.5px;
  font-weight:400;
  letter-spacing:-.1px;
  border-radius:7px;
  color:var(--text-primary);
  cursor:pointer;
  transition:background var(--motion-fast), transform var(--motion-fast) var(--ease-spring);
}
.export-menu .export-item .export-item-ico{
  width:14px;height:14px;flex-shrink:0;opacity:.62;
  transition:opacity var(--motion-fast);
}
.export-menu .export-item:hover{
  background:color-mix(in srgb, var(--app-accent) 12%, transparent);
  color:var(--text-primary);
}
.export-menu .export-item:hover .export-item-ico{ opacity:.95; }
.export-menu .export-item:active{
  background:color-mix(in srgb, var(--app-accent) 22%, transparent);
  transform:scale(.975);
}
.export-menu .export-item:focus-visible{ background:color-mix(in srgb, var(--app-accent) 12%, transparent); }
.export-menu .export-item.export-item-primary{ font-weight:600; }
.export-menu .export-item.export-item-primary .export-item-ico{ opacity:.9; color:var(--app-accent); }
/* Scope header — the always-visible "what am I exporting" banner. */
.export-menu .export-scope-head{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px 9px;
  margin-bottom:3px;
  border-bottom:0.5px solid color-mix(in srgb, var(--text-primary) 9%, transparent);
}
.export-menu .export-scope-ico{
  width:17px;height:17px;flex-shrink:0;color:var(--app-accent);opacity:.95;
}
.export-menu .export-scope-sub{
  font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.7px;
  color:var(--text-muted);flex-shrink:0;
}
.export-menu .export-scope-name{
  font-size:13px;font-weight:700;letter-spacing:-.2px;color:var(--text-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.export-menu .export-group-label{
  padding:6px 10px 3px;
  font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;
  color:var(--text-muted);
}
.export-menu .export-sep{
  height:0;margin:5px 6px;
  border-top:0.5px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
}
.export-menu hr{
  margin:5px 4px !important;
  border:none !important;
  border-top:0.5px solid color-mix(in srgb, var(--text-primary) 10%, transparent) !important;
}
.msheet-group{
  padding:10px 4px 4px;
  font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;
  color:var(--text-muted);
}
[data-theme="midnight"] .btn-quiet,
[data-theme="sepia"] .btn-quiet,
[data-theme="contrast"] .btn-quiet{background:var(--surface-2);border:1px solid color-mix(in srgb, var(--text-primary) 14%, transparent)}
[data-theme="midnight"] .btn-quiet:hover,
[data-theme="sepia"] .btn-quiet:hover,
[data-theme="contrast"] .btn-quiet:hover{background:color-mix(in srgb, var(--text-primary) 8%, var(--surface-2))}
/* V27d (2026-05-17 cont. 14): .btn-ghost was invisible on rr-brand + sepia because
   --chrome-bg/--chrome-border are tinted toward the chrome zone color (white/cream),
   which vanishes against the SURFACE area where these buttons actually render.
   Hybrid fix: base uses theme-aware translucency on --text-primary (always visible
   regardless of theme); dark themes (midnight/sepia/contrast) override to a solid
   --surface-2 chip below for stronger affordance on dark cards. */
.btn-ghost{background:color-mix(in srgb, var(--text-primary) 8%, transparent);border:0.5px solid color-mix(in srgb, var(--text-primary) 20%, transparent);border-radius:var(--radius-md);padding:6px 13px;font-size:12.5px;font-weight:600;letter-spacing:-.1px;cursor:pointer;color:var(--text-primary);white-space:nowrap;transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring);font-family:inherit;box-shadow:inset 0 0.5px 0 color-mix(in srgb,#fff 24%,transparent)}
.btn-ghost:hover{background:color-mix(in srgb, var(--app-accent) 10%, transparent);border-color:color-mix(in srgb,var(--app-accent) 30%,transparent)}
.btn-ghost:active{transform:scale(.96)}
.btn-ghost:hover{background:color-mix(in srgb, var(--text-primary) 16%, transparent);color:var(--text-primary)}
.btn-ghost:active{transform:scale(.97)}
/* V122 📘 — admin Company Files panel: brand-image upload slots + company-docs list. */
.org-img-slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.org-img-slot{background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-e2),var(--lg-edge);padding:13px;display:flex;flex-direction:column;gap:8px;transition:transform var(--motion-base) var(--ease-spring),box-shadow var(--motion-base)}
.org-img-slot:hover{transform:translateY(-2px);box-shadow:var(--shadow-e3),var(--lg-edge)}
.org-img-slot-head{display:flex;flex-direction:column;gap:1px}
.org-img-slot-label{font-size:12.5px;font-weight:600;color:var(--text-primary)}
.org-img-slot-hint{font-size:10.5px;color:var(--text-muted)}
.org-img-slot-preview{height:64px;display:flex;align-items:center;justify-content:center;border:0.5px solid var(--chrome-border);border-radius:var(--radius-input);background:#fff;padding:6px;text-align:center}
.org-img-slot-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:auto}
.org-img-slot-btn{font-size:12px;padding:0 13px;height:30px;border-radius:var(--radius-pill)!important;display:inline-flex;align-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
/* Slot becomes a flex column so the action buttons pin to the bottom (aligned across
   all three slots regardless of preview content). */
.org-img-slot{display:flex;flex-direction:column}
.org-img-slot-preview{flex:1}
.org-img-slot-msg{font-size:10.5px;color:var(--text-muted);min-height:13px}
.org-img-slot-cancel{color:var(--color-error)}
.org-doc-upload{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;padding:12px 14px;background:color-mix(in srgb,var(--text-primary) 2.5%,transparent);border:0.5px dashed var(--chrome-border);border-radius:var(--radius-lg)}
.org-doc-kind-select{height:34px;border:0.5px solid var(--chrome-border);border-radius:var(--radius-pill);background:var(--card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238e8e93'/%3E%3C/svg%3E") no-repeat right 11px center;-webkit-appearance:none;appearance:none;color:var(--text-secondary);font-size:12.5px;font-weight:600;font-family:inherit;padding:0 30px 0 13px;cursor:pointer;box-shadow:inset 0 1px 2px rgba(0,0,0,.03)}
.org-doc-upload .org-img-slot-btn{height:34px}
.org-doc-list{display:flex;flex-direction:column;gap:8px}
.org-doc-row{display:flex;align-items:center;gap:12px;background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-e1),var(--lg-edge);padding:12px 14px;transition:box-shadow var(--motion-fast),transform var(--motion-fast) var(--ease-out)}
.org-doc-row:hover{box-shadow:var(--shadow-e2),var(--lg-edge);transform:translateY(-1px)}
.org-doc-ico{width:20px;height:20px;flex-shrink:0;color:var(--app-accent)}
.org-doc-info{flex:1;min-width:0}
.org-doc-name{font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.org-doc-meta{font-size:11px;color:var(--text-muted);margin-top:1px}
.org-doc-kind{font-weight:600;color:var(--text-secondary)}
.org-doc-act{flex-shrink:0;width:30px;height:30px;border:0;background:transparent;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);transition:background var(--motion-fast),color var(--motion-fast)}
@media (pointer:coarse){.org-doc-act{min-width:var(--tap-min,44px);min-height:var(--tap-min,44px)}}
.org-doc-act svg{width:15px;height:15px}
.org-doc-act:hover{background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-primary)}
.org-doc-del:hover{background:color-mix(in srgb,var(--color-error) 12%,transparent);color:var(--color-error)}
.org-doc-empty{font-size:12px;color:var(--text-muted);padding:14px;text-align:center;border:0.5px dashed var(--chrome-border);border-radius:var(--radius-md)}
[data-theme="midnight"] .btn-ghost,
[data-theme="sepia"] .btn-ghost,
[data-theme="contrast"] .btn-ghost{background:var(--surface-2);border:0.5px solid color-mix(in srgb, var(--text-primary) 14%, transparent)}
[data-theme="midnight"] .btn-ghost:hover,
[data-theme="sepia"] .btn-ghost:hover,
[data-theme="contrast"] .btn-ghost:hover{background:color-mix(in srgb, var(--text-primary) 8%, var(--surface-2))}

/* ── Filter bar ── */
/* V39kkkkk — filter-bar bottom border softened (chrome-border-strong was too heavy) */
/* V-flt2 — slim board toolbar, REWORKED to the Apple/Atira pill language. The bar stays
   VIEWPORT-width and sticky (was stretching to board-width → pushed Presets/⋯ off-page).
   Every control is a real resting GHOST PILL (card-surface + hairline + e1 lift), not bare
   text; active states promote to the canonical SELECTED pill. */
.filter-bar{height:44px;background:transparent;display:flex;align-items:center;padding:7px 16px;gap:8px;flex-shrink:0;border-bottom:0.5px solid var(--chrome-border);
  position:sticky;left:0;box-sizing:border-box}
/* thin divider between the filter group (Sort/Filters/At Risk/Clear) and Presets/⋯ */
.flt-div{width:1px;height:20px;background:var(--chrome-border);flex:0 0 auto;margin:0 3px}
/* every toolbar control = a resting Apple pill (surface fill, hairline, soft lift) */
.filter-bar .rt-ctl{height:32px;font-size:12.5px;font-weight:600;padding:0 14px;gap:6px;
  background:var(--card-bg);color:var(--text-secondary);border:.5px solid var(--chrome-border);
  box-shadow:var(--shadow-e1);border-radius:var(--radius-pill)}
.filter-bar .rt-ctl:hover{color:var(--text-primary);box-shadow:var(--shadow-e2)}
.filter-bar .rt-ctl:active{transform:scale(.97)}
.filter-bar .flt-icon-btn{width:32px;padding:0;justify-content:center}
.filter-bar .flt-ico{width:15px;height:15px;flex:0 0 auto;opacity:.7}
.filter-bar .rt-ctl:hover .flt-ico{opacity:1}
/* spring pushes Presets/⋯ to the right WITHIN the viewport-width bar (no board-width stretch) */
.flt-spring{flex:1 1 auto;min-width:8px}
/* SORT pill — wraps the native select (transparent select on top), chevron on the wrapper */
.flt-sort-pill{position:relative;padding-right:28px!important;gap:8px}
.flt-sort-select{appearance:none;-webkit-appearance:none;border:0;background:transparent;font:inherit;font-size:12.5px;font-weight:600;color:inherit;cursor:pointer;padding:0;outline:none;max-width:150px}
/* V-flt2 — NO focus ring/outline/highlight on the sort pill when clicked. The native select
   ring + the global focus-visible ring are both suppressed; the open dropdown menu is the only
   feedback (it's a quiet pill, not a focusable form field that needs a ring). */
.flt-sort-select:focus,.flt-sort-select:focus-visible{outline:none!important;box-shadow:none!important}
.flt-sort-pill,.flt-sort-pill:focus,.flt-sort-pill:focus-within,.flt-sort-pill:focus-visible{outline:none!important}
.flt-sort-pill::after{content:"";position:absolute;right:13px;top:50%;width:6px;height:6px;border-right:1.5px solid var(--text-muted);border-bottom:1.5px solid var(--text-muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
/* FILTERS count badge */
.flt-badge{margin-left:2px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--app-accent);color:#fff;font-size:10.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
/* ACTIVE/SELECTED promotion — Filters (accent) + At Risk (error) become the canonical
   selected pill: brighter surface + accent text + accent hairline + the bevel specular. */
.filter-bar .flt-btn.has-active{color:var(--app-accent);background:var(--card-bg);
  border-color:color-mix(in srgb,var(--app-accent) 30%,transparent);box-shadow:var(--shadow-e2),var(--bevel-top)}
[data-theme="midnight"] .filter-bar .flt-btn.has-active{background:color-mix(in srgb,#fff 88%,var(--surface-3))}
.filter-bar .flt-btn.has-active .flt-ico{opacity:1;color:var(--app-accent)}
.filter-bar .flt-atrisk.on{color:var(--color-error);background:var(--card-bg);
  border-color:color-mix(in srgb,var(--color-error) 30%,transparent);box-shadow:var(--shadow-e2),var(--bevel-top)}
[data-theme="midnight"] .filter-bar .flt-atrisk.on{background:color-mix(in srgb,#fff 88%,var(--surface-3))}
.filter-bar .flt-atrisk.on .flt-ico{opacity:1;color:var(--color-error)}
/* CLEAR — a quiet error-tinted pill (matches the pill family, not a bare link) */
.filter-bar .btn-clear{height:32px;padding:0 13px;gap:6px;border-radius:var(--radius-pill);font-size:12.5px;font-weight:600;cursor:pointer;
  background:color-mix(in srgb,var(--color-error) 8%,var(--card-bg));color:var(--color-error);
  border:.5px solid color-mix(in srgb,var(--color-error) 24%,transparent);box-shadow:var(--shadow-e1);display:inline-flex;align-items:center}
.filter-bar .btn-clear:hover{background:color-mix(in srgb,var(--color-error) 14%,var(--card-bg));box-shadow:var(--shadow-e2)}
.filter-bar .btn-clear:active{transform:scale(.97)}
.filter-bar .btn-clear.hidden{display:none}
.filter-bar::-webkit-scrollbar{height:4px}
.filter-bar::-webkit-scrollbar-thumb{background:var(--chrome-scroll);border-radius:2px}
.filter-select{height:32px;background:var(--card-bg);border:0.5px solid var(--border,var(--chrome-border));border-radius:var(--radius-md);box-shadow:var(--shadow-e1),inset 0 1px 0 rgba(255,255,255,.12);color:var(--text-primary);font-size:13px;font-weight:500;padding:0 26px 0 11px;outline:none;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238e8e93'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 7px center;transition:box-shadow var(--motion-base) var(--ease-out,ease),border-color var(--motion-fast),transform var(--motion-fast) var(--ease-spring,ease);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;letter-spacing:-.05px}
.filter-select:hover{box-shadow:var(--shadow-e2),inset 0 1px 0 rgba(255,255,255,.18);border-color:var(--app-accent)}
/* 2026-05-20 📘 — Apple-style filter pill via WRAPPER. iOS Safari forces a
   focused <select> to square corners (ignores border-radius). Fix: the visible
   pill is a <div class="filter-pill"> (not a form control → never squares); the
   <select> sits transparent inside it for the tap target + native picker. The
   chevron lives on the wrapper as the dropdown signal. _wrapFilterPills() builds
   these at boot. */
/* UI-revamp (2026-06-02): filter-bar controls live on the page matte (.filter-bar is
   transparent), so --chrome-bg (the header white-film) rendered them near-invisible on
   dark themes. Moved to surface material + token shadow + a classic-Mac specular top
   highlight + spring press-deform — matching the .dc-tile/.estb-chip material. */
.filter-pill{position:relative;display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 24px 0 12px;background:var(--card-bg);border:0.5px solid var(--border,var(--chrome-border));border-radius:var(--radius-pill);box-shadow:var(--shadow-e1),inset 0 1px 0 rgba(255,255,255,.12);font-size:12px;font-weight:500;color:var(--text-primary);letter-spacing:-.05px;cursor:pointer;flex:0 0 auto;white-space:nowrap;transition:transform var(--motion-fast) var(--ease-spring,ease),box-shadow var(--motion-base) var(--ease-out,ease),border-color var(--motion-fast)}
.filter-pill:hover{box-shadow:var(--shadow-e2),inset 0 1px 0 rgba(255,255,255,.18);border-color:var(--app-accent);transform:translateY(-1px)}
.filter-pill:active{transform:scale(.96)}
.filter-pill::after{content:"";position:absolute;right:11px;top:50%;width:9px;height:6px;transform:translateY(-50%);background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/contain;opacity:.55;pointer-events:none}
/* Hide the pill caret while its dropdown is open — it otherwise jitters/flashes
   against the open glass popover (the select gets .gs-open on open). */
.filter-pill.pill-open::after{opacity:0}
.filter-pill.active{background:color-mix(in srgb,var(--app-accent) 10%,transparent);border-color:color-mix(in srgb,var(--app-accent) 30%,transparent);color:var(--app-accent)}
.filter-pill > .filter-select{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;padding:0;border:none;background:none;cursor:pointer;-webkit-appearance:none;appearance:none;z-index:1}
.filter-pill > .filter-select:focus{box-shadow:none;outline:none}
.filter-pill-label{pointer-events:none;line-height:1}
.filter-select:focus-visible{outline:none;border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--app-accent) 22%, transparent)}
.filter-select:focus{border-color:var(--chrome-border);box-shadow:none;outline:none;-webkit-appearance:none;appearance:none}
.filter-select option{background:var(--card-bg);color:var(--text-primary)}
.filter-select.active{background:color-mix(in srgb,var(--app-accent) 10%,transparent);border-color:color-mix(in srgb,var(--app-accent) 30%,transparent);color:var(--app-accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2020/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23007aff'/%3E%3C/svg%3E")}
/* 2026-05-22 📘 Sort is always set (it's not a filter) — never show it as an
   "active filter" pill. Target the WRAPPER pill that contains #fSort (the wrapper
   div gets the .active class, not the select itself). */
.filter-pill:has(#fSort),.filter-pill:has(#fSort).active{background:var(--card-bg);border-color:var(--border,var(--chrome-border));color:var(--text-primary)}
.filter-sep{width:0.5px;height:18px;background:var(--chrome-border-strong);flex-shrink:0;margin:0 2px}
.btn-clear{background:color-mix(in srgb,var(--app-danger) 10%,transparent);border:0.5px solid color-mix(in srgb,var(--app-danger) 25%,transparent);color:var(--app-danger);font-size:13px;font-weight:600;height:32px;display:inline-flex;align-items:center;gap:6px;padding:0 12px;border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;transition:background var(--motion-fast);letter-spacing:-.05px}
.btn-clear:hover{background:color-mix(in srgb,var(--app-danger) 18%,transparent)}
.filter-count{color:var(--text-muted);font-size:11.5px;white-space:nowrap;font-weight:500;letter-spacing:-.05px}
.btn-preset{background:var(--card-bg);border:0.5px solid var(--border,var(--chrome-border));box-shadow:var(--shadow-e1),inset 0 1px 0 rgba(255,255,255,.12);color:var(--text-primary);font-size:12px;font-weight:500;height:28px;display:inline-flex;align-items:center;gap:5px;padding:0 12px;border-radius:var(--radius-pill);cursor:pointer;white-space:nowrap;transition:transform var(--motion-fast) var(--ease-spring,ease),box-shadow var(--motion-base) var(--ease-out,ease),border-color var(--motion-fast);letter-spacing:-.05px}
.btn-preset:hover{box-shadow:var(--shadow-e2),inset 0 1px 0 rgba(255,255,255,.18);border-color:var(--app-accent);transform:translateY(-1px)}
.btn-preset:active{transform:scale(.96)}
.btn-preset .bp-ico{width:11px;height:11px;flex-shrink:0;opacity:.7}
/* 2026-05-22 📘 Solid Apple frosted-menu surface — was --chrome-bg (translucent)
   with no blur, so cards showed through. Opaque card bg + saturated blur +
   stronger shadow + hairline ring = a proper iOS context menu. */
/* V82.3 — popovers/menus are Liquid Glass (refraction + specular edge + e4 depth
   layering so they read above the frosted sidebar/header beneath them). */
.preset-popover{position:fixed;z-index:var(--z-popover);border-radius:var(--radius-card);min-width:200px;overflow:hidden}
/* Pointer-tracking specular sheen on the open menu (hero glass) — the glint
   follows the cursor via --lg-sheen-x/y (updated by the global pointer handler). */
.preset-popover::before{display:none}
@media (prefers-reduced-transparency: reduce){ .preset-popover{background:var(--card-bg);backdrop-filter:none;-webkit-backdrop-filter:none} .preset-popover::before{display:none} }
.preset-popover-header{font-size:11px;font-weight:600;color:var(--on-chrome-dim);padding:8px 12px 4px;text-transform:uppercase;letter-spacing:.04em}
/* V39ttt — preset-popover-item smooth hover */
.preset-popover-item{display:flex;align-items:center;gap:6px;padding:7px 12px;cursor:pointer;color:var(--on-chrome);font-size:13px;transition:background var(--motion-fast)}
.preset-popover-item:hover{background:var(--chrome-bg-strong-hover)}
/* V39dddd — preset-del transition + active */
.preset-popover-item .preset-del{margin-left:auto;color:var(--on-chrome-dim);font-size:12px;padding:1px 4px;border-radius:var(--radius-xs);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast)}
.preset-popover-item .preset-del:hover{background:var(--err-bg);color:var(--err-fg)}
.preset-popover-item .preset-del:active{transform:scale(.85)}
/* 10.5 Phase B (2026-05-15 cont. 19) — active preset highlight + pill active state */
.preset-popover-item.preset-active{background:color-mix(in srgb, var(--app-accent) 18%, transparent);color:var(--on-chrome);font-weight:600}
.preset-popover-item.preset-active:hover{background:color-mix(in srgb, var(--app-accent) 28%, transparent)}
.preset-active-badge{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--app-accent);background:color-mix(in srgb, var(--app-accent) 15%, transparent);padding:1px 6px;border-radius:var(--radius-xs);margin-left:6px;font-weight:600}
.btn-preset.btn-preset-active{background:color-mix(in srgb, var(--app-accent) 20%, transparent);border-color:color-mix(in srgb, var(--app-accent) 40%, var(--chrome-border));color:var(--text-primary)}
/* V39cccc — preset-popover-save: hairline border-top */
.preset-popover-save{display:flex;align-items:center;gap:6px;padding:7px 12px;border-top:0.5px solid var(--chrome-border)}
.preset-popover-save input{flex:1;height:24px;background:var(--app-bg);border:1px solid var(--chrome-border);border-radius:var(--radius-input);color:var(--on-app-bg);font-size:12px;padding:0 6px;outline:none;transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
.preset-popover-save input:focus{border-color:var(--link);box-shadow:0 0 0 3px color-mix(in srgb,var(--link) 18%,transparent)}
.preset-popover-save button{height:24px;padding:0 8px;font-size:12px;background:var(--link);border:none;color:var(--on-accent);border-radius:var(--radius-btn-sm);cursor:pointer}

/* 2026-05-22 📘 More Filters popover — labeled rows, each hosting one of the
   relocated <select>s. Apple grouped-list feel. */
.more-filters-popover{padding:4px 0 0}
.mf-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;cursor:default}
.mf-row + .mf-row{border-top:0.5px solid color-mix(in srgb,var(--chrome-border) 60%,transparent)}
.mf-row-label{font-size:13px;color:var(--on-chrome);font-weight:500;flex-shrink:0}
.mf-row-field{flex:0 0 auto;display:flex;align-items:center}
/* More-filters pills: same pill family, fixed width so all rows align */
.mf-pill{min-width:130px;justify-content:flex-start;padding-left:11px}
.mf-footer{border-top:0.5px solid var(--chrome-border);padding:7px 12px}
.mf-clear{width:100%;height:30px;background:transparent;border:none;color:var(--app-accent);font-size:13px;font-weight:600;cursor:pointer;border-radius:var(--radius-sm);transition:background var(--motion-fast)}
.mf-clear:hover{background:color-mix(in srgb,var(--app-accent) 10%,transparent)}
/* More Filters button active-count badge */
.more-filters-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;margin-left:2px;background:var(--app-accent);color:var(--on-accent);font-size:10px;font-weight:700;border-radius:var(--radius-pill);line-height:1}
.btn-preset.active{background:color-mix(in srgb,var(--app-accent) 12%,transparent);border-color:color-mix(in srgb,var(--app-accent) 32%,transparent);color:var(--app-accent)}
/* V100 — At Risk chip lights ERROR-toned when active (it's a risk filter, not a neutral one) */
.filter-atrisk.active{background:color-mix(in srgb,var(--color-error) 12%,transparent)!important;border-color:color-mix(in srgb,var(--color-error) 34%,transparent)!important;color:var(--color-error)!important}
.btn-preset:active{transform:scale(.97)}
/* Board actions overflow popover rows — match .preset-popover-item style */
.board-actions-popover .ba-item{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;color:var(--on-chrome);font-size:13px;font-weight:500;transition:background var(--motion-fast);letter-spacing:-.05px}
.board-actions-popover .ba-item:hover{background:var(--chrome-bg-strong-hover)}
.board-actions-popover .ba-item:active{background:var(--chrome-bg-strong-hover);opacity:.8}
.board-actions-popover .ba-item .bp-ico{width:14px;height:14px;flex-shrink:0;opacity:.75}
/* 2026-06-20 — density / Columns / card-detail controls in the Board actions popover.
   Segmented controls (rounded pills, active = accent-tinted), a hairline separator,
   uppercase group labels, an iOS-style toggle for compact card detail. */
.board-actions-popover .ba-sep{height:.5px;background:var(--chrome-border);margin:6px 12px;opacity:.6}
.board-actions-popover .ba-group-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);padding:4px 12px 3px}
.board-actions-popover .ba-seg{display:flex;gap:3px;padding:2px 12px 6px}
.board-actions-popover .ba-seg.ba-seg-cols{flex-wrap:wrap}
.board-actions-popover .ba-seg-btn{flex:1 1 auto;min-width:0;padding:5px 9px;border:.5px solid var(--chrome-border);background:var(--surface-2,var(--chrome-bg));color:var(--on-chrome);border-radius:var(--radius-pill);font-size:11.5px;font-weight:700;letter-spacing:-.1px;cursor:pointer;font-family:inherit;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast),box-shadow var(--motion-fast);white-space:nowrap}
.board-actions-popover .ba-seg-cols .ba-seg-btn{flex:0 0 auto;min-width:34px;text-align:center}
.board-actions-popover .ba-seg-btn:hover{background:var(--chrome-bg-strong-hover);border-color:var(--border-strong)}
.board-actions-popover .ba-seg-btn:active{transform:scale(.95)}
.board-actions-popover .ba-seg-btn.active{background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 26%,var(--card-bg)),color-mix(in srgb,var(--app-accent) 16%,var(--card-bg)));color:color-mix(in srgb,var(--app-accent) 86%,#000);border-color:color-mix(in srgb,var(--app-accent) 40%,transparent);box-shadow:var(--bevel-top),inset 0 0 0 .5px color-mix(in srgb,var(--app-accent) 30%,transparent)}
.board-actions-popover .ba-seg-btn.active:hover{background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 32%,var(--card-bg)),color-mix(in srgb,var(--app-accent) 20%,var(--card-bg)))}
.board-actions-popover .ba-toggle-item{justify-content:space-between}
.board-actions-popover .ba-toggle-item span:not(.ba-toggle){flex:1}
.board-actions-popover .ba-toggle{width:34px;height:20px;border-radius:999px;background:var(--surface-2,var(--chrome-bg));box-shadow:inset 0 0 0 .5px var(--chrome-border);position:relative;flex:0 0 34px;transition:background var(--motion-base)}
.board-actions-popover .ba-toggle::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform var(--motion-base) var(--ease-spring)}
.board-actions-popover .ba-toggle.on{background:var(--app-accent)}
.board-actions-popover .ba-toggle.on::after{transform:translateX(14px)}

/* ── Board wrap ── */
.board-wrap{overflow-x:auto;overflow-y:hidden;padding:12px;display:flex;gap:12px;align-items:flex-start;flex:1;min-height:0;box-sizing:border-box}
/* Mouse-grab pan affordance (desktop pointers only). Cards/buttons keep their own
   cursors; this only styles the board background. While dragging, columns + cards
   ignore the pointer so a grab-pan never selects text or hovers a card. */
@media (hover:hover) and (pointer:fine){
  .board-wrap{cursor:grab}
  .board-wrap.board-grabbing{cursor:grabbing;scroll-behavior:auto;user-select:none}
  .board-wrap.board-grabbing *{pointer-events:none}
}
/* Mobile: all top-level view containers fill remaining viewport and scroll */
@media (max-width: 1024px) {
  .board-wrap,.list-wrap,.activity-wrap,.dashboard-wrap,.contacts-wrap,.admin-wrap,.chat-wrap,.photos-page,
  .reports-page,.files-page,.cal-page,.la-page,.gantt-page,.recur-page,.compliance-wrap{
    height:auto;flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
}
/* Project Board */
.project-board-wrap{display:flex;flex-direction:column;height:calc(100vh - 48px);height:calc(100svh - 48px);flex:1;min-height:0}
/* V39wwwww — project-board header switched from rgba(255,255,255,.78) to themed
   color-mix so midnight/contrast themes get a dark frosted band instead of inverting. */
/* A4 (2026-06-11) — onto the --lg-* glass tokens (was a hardcoded card-bg mix
   that bypassed the dark-theme glass override). */
.pb-header{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;padding:10px 16px;background:var(--lg-bg-strong);backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract);flex-shrink:0;border-bottom:0.5px solid var(--chrome-border);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif}
.pb-back{background:var(--chrome-bg);border:0.5px solid var(--chrome-border);color:var(--app-accent);padding:5px 11px 5px 9px;border-radius:var(--radius-sm);cursor:pointer;font-size:12.5px;font-weight:500;display:inline-flex;align-items:center;gap:5px;transition:background var(--motion-fast);letter-spacing:-.05px}
.pb-back:hover{background:var(--chrome-bg-hover)}
.pb-back .pb-back-ico{width:11px;height:11px;flex-shrink:0;transform:rotate(180deg)}
.pb-add-phase{background:var(--app-accent);border:none;color:var(--on-accent);padding:6px 14px;border-radius:var(--radius-md);cursor:pointer;font-size:12.5px;font-weight:500;display:inline-flex;align-items:center;gap:5px;box-shadow:0 1px 2px color-mix(in srgb, var(--app-accent) 25%, transparent);transition:opacity var(--motion-fast),transform var(--motion-fast);letter-spacing:-.05px}
.pb-add-phase:hover{opacity:.92}
.pb-add-phase:active{transform:scale(.97);opacity:1}
.pb-add-phase .pb-add-ico{width:11px;height:11px;flex-shrink:0}
.pb-template-tools{display:flex;align-items:center;gap:6px;margin-left:auto}
.pb-template-select{height:28px;min-width:180px;background:var(--chrome-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-sm);color:var(--on-chrome);font-size:12px;font-weight:500;padding:0 24px 0 9px;outline:none;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238e8e93'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;font-family:inherit;letter-spacing:-.05px}
.pb-template-select option{background:var(--card-bg);color:var(--text-primary)}
.pb-template-btn{height:28px;border:0.5px solid var(--chrome-border);border-radius:var(--radius-sm);background:var(--chrome-bg);color:var(--on-chrome);padding:0 11px;font-size:12px;font-weight:500;cursor:pointer;transition:background var(--motion-fast),border-color var(--motion-fast);font-family:inherit;letter-spacing:-.05px}
.pb-template-btn:hover{background:var(--chrome-bg-hover);border-color:var(--chrome-border-strong)}
.pb-template-btn:active{transform:scale(.97)}
.pb-title{font-size:15px;font-weight:600;color:var(--text-primary);letter-spacing:-.2px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb-meta{font-size:11.5px;color:var(--text-muted);letter-spacing:-.05px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.project-board-empty{color:var(--text-muted);padding:24px;font-size:14px;line-height:1.5;max-width:420px}
.project-board-empty .btn{margin-top:14px}
/* Phase manage modal */
.pm-overlay{position:fixed;inset:0;background:var(--overlay-bg);z-index:var(--z-modal-backdrop);display:flex;align-items:center;justify-content:center}
.pm-modal{background:var(--card-bg);border-radius:var(--radius-modal);padding:24px;width:420px;max-width:95vw;box-shadow:var(--shadow-e4)}
.pm-title{font-size:16px;font-weight:600;color:var(--text-primary);margin-bottom:16px}
.pm-phase-row{display:flex;align-items:center;gap:8px;padding:8px;background:var(--surface-2);border-radius:var(--radius-tag);margin-bottom:6px}
.pm-phase-name{flex:1;font-size:13px;font-weight:600;color:var(--text-primary)}
.pm-maps{font-size:11px;color:var(--text-muted)}
.pm-actions{display:flex;gap:4px}
.pm-btn{background:none;border:none;cursor:pointer;padding:3px 6px;border-radius:var(--radius-tag);font-size:12px;color:var(--text-muted);transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast)}
.pm-btn:hover{background:var(--border);color:var(--text-primary)}
.pm-btn:active{transform:scale(.94)}
.pm-btn.del:hover{background:var(--del-hover-bg);color:var(--app-danger)}
.pm-form{margin-top:14px;border-top:0.5px solid var(--chrome-border);padding-top:14px;display:flex;flex-direction:column;gap:8px}
.pm-row{display:flex;gap:8px}
.pm-row .field-input{flex:1}
.pm-close{float:right;background:var(--surface-2);border:none;width:26px;height:26px;cursor:pointer;color:var(--text-muted);line-height:1;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast)}
.pm-close:hover{background:var(--surface-3);color:var(--text-primary)}
.pm-close:active{transform:scale(.92)}
/* Generic modal (openGenericModal) — Apple-system chrome matching pm-modal */
.gm-overlay{position:fixed;inset:0;background:var(--overlay-bg-light);z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:16px}
.gm-modal{position:relative;background:var(--card-bg);border-radius:var(--radius-modal);max-width:600px;width:100%;max-height:90svh;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-e4),0 0 0 0.5px var(--chrome-border-strong)}
.gm-modal.wide{max-width:min(1040px,94vw)}
.gm-scroll{overflow-y:auto;padding:24px;min-height:0;-webkit-overflow-scrolling:touch}
.gm-close{position:absolute;top:14px;right:14px;background:var(--surface-2);border:none;width:26px;height:26px;cursor:pointer;color:var(--text-muted);line-height:1;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast);z-index:1}
.gm-close:hover{background:var(--surface-3);color:var(--text-primary)}
.gm-close:active{transform:scale(.92)}
.board-wrap::-webkit-scrollbar{height:8px}
.board-wrap::-webkit-scrollbar-thumb{background:var(--chrome-scroll);border-radius:var(--radius-xs)}

/* ── List wrap ── */
/* 2026-05-31 📘 — vertical scroll only. Was overflow:auto (both axes), so the
   wide projects table pushed the WHOLE page (title + filter bar) to scroll
   sideways on iPad-landscape, shifting content off both edges. The table's own
   horizontal scroll lives on .list-table-wrap; the page must not scroll-x. */
/* scrollbar-gutter:stable both-edges reserves the vertical-scrollbar space symmetrically on
   BOTH sides, so the rollup + table card sit with EQUAL left/right gutters (the scrollbar was
   eating ~11px off the right only → asymmetric). */
/* V133 (2026-06-06) — the List page is now a FIXED matte stage: head+rollup float as a
   chrome panel (fixed), the table floats as a content panel that fills the rest and owns
   its OWN scroll, so the page chrome never moves. Was overflow-y:auto on the wrap (whole
   page scrolled). Content/table internals unchanged — only the section shell lifted. */
.list-wrap{display:flex;flex-direction:column;gap:12px;overflow:hidden;padding:12px;flex:1;min-height:0;min-width:0;width:100%;max-width:100vw;box-sizing:border-box;background:var(--app-bg)}
.list-head-panel{flex:0 0 auto;padding:14px 18px 16px}
.list-head-panel .list-page-head{margin:0 0 12px}
.list-head-panel .rollup{margin:0}
.list-empty-panel{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
/* The table-wrap fills the matte stage (minus the 12px stage padding) and owns its scroll.
   Override .lt-surface's own 14px/26px margins so the table panel aligns flush with the
   head panel above it inside the stage (the stage padding IS the gutter now). */
.list-wrap > .list-table-wrap{flex:1;min-height:0;margin:0;width:auto;max-width:none;overflow:auto;scrollbar-gutter:stable both-edges}
.list-wrap > .list-table-wrap::-webkit-scrollbar{width:8px;height:8px}
.list-wrap > .list-table-wrap::-webkit-scrollbar-thumb{background:var(--chrome-scroll);border-radius:var(--radius-xs)}

/* Apple-system list page toolbar */
.list-page-toolbar{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px;padding:0 2px;gap:12px;flex-wrap:wrap}
.list-page-title{font-size:18px;font-weight:700;letter-spacing:-0.3px;color:var(--on-app-bg);margin:0}
.list-page-meta{font-size:12px;color:var(--text-muted);margin-top:2px}
.list-page-actions{display:flex;gap:6px;align-items:center;flex-shrink:0}
.list-actbtn{padding:5px 11px;border-radius:var(--radius-btn-sm,8px);font-size:11.5px;font-weight:600;background:var(--chrome-bg);color:var(--text-primary);border:0.5px solid var(--chrome-border);cursor:pointer;font-family:inherit;transition:background var(--motion-fast)}
.list-actbtn:hover{background:var(--chrome-bg-hover)}
.list-actbtn.primary{background:var(--app-accent);color:var(--on-accent);border-color:var(--app-accent)}
.list-actbtn.primary:hover{background:var(--link-hover,#005ec4)}

/* Card-wrapped table (Finder / Mail style) */
/* V115 — scroll horizontally when the table outgrows its card. 14 data-aware columns can
   exceed the viewport (~1440px) → the Health column was CLIPPED by overflow:hidden and
   unreachable. overflow-x:auto keeps every column reachable; the rounded card edge still
   clips cleanly. */
.list-table-wrap{background:var(--card-bg);border-radius:var(--radius-lg);box-shadow:var(--bevel-top),var(--shadow-e2);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;width:100%;max-width:100%;min-width:0;overscroll-behavior-x:contain}
/* width:100% fills the card when few columns are shown; min-width:max-content lets the
   table grow PAST the card when the data-aware column set is wide (desktop ~21 cols >
   viewport) so .list-table-wrap's overflow-x:auto actually produces a side-scroll instead
   of crushing/clipping the columns. */
.list-table{width:100%;min-width:max-content;border-collapse:collapse;font-size:12.5px}
.list-table th{position:sticky;top:0;z-index:1;background:var(--frost-bg-strong,var(--surface));backdrop-filter:var(--frost-blur);-webkit-backdrop-filter:var(--frost-blur);color:var(--text-muted);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;padding:10px 12px;text-align:left;cursor:pointer;user-select:none;white-space:nowrap;border-bottom:0.5px solid var(--chrome-border-strong);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);transition:background var(--motion-fast),color var(--motion-fast)}
.list-table th:hover{background:var(--surface-2);color:var(--text-primary)}
/* V39cccc — list-table header press feedback (subtle) */
.list-table th:active{background:var(--surface-3)}
.list-table th.sort-asc::after{content:' ↑';opacity:0.7}
.list-table th.sort-desc::after{content:' ↓';opacity:0.7}
/* V133 (2026-06-20) — on tablet/phone (≤1024) the sticky list header ate ~25-30%
   of the short viewport, leaving only a sliver of rows visible while scrolling.
   Make the header STATIC ≤1024 so all vertical space goes to the data. Placed
   after the base sticky rule + the 641-1024 tablet block so source-order wins. */
@media (max-width:1024px){.list-table th{position:static;top:auto}}
.list-table th.col-center{text-align:center}
.list-table td{padding:10px 12px;color:var(--text-primary);border-top:0.5px solid color-mix(in srgb, var(--text-primary) 8%, transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;vertical-align:middle}
/* ── List row density (2026-06-20) — data-density on #listView scales the cell
   vertical padding + body font so the table reads roomy / standard / dense. ── */
#listView[data-density="comfortable"] .list-table td{padding:14px 12px}
#listView[data-density="comfortable"] .list-table th{padding:13px 12px}
#listView[data-density="compact"] .list-table td{padding:6px 10px;font-size:12.5px}
#listView[data-density="compact"] .list-table th{padding:7px 10px}
.list-table tbody tr:first-child td{border-top:none}
.list-table tbody tr{transition:background var(--motion-fast)}
.list-table tbody tr:hover td{background:color-mix(in srgb,var(--app-accent) 5%,transparent);cursor:pointer}
.list-table tbody tr:active td{background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
/* Item 3 — inline row quick-actions: revealed on row hover/focus, rounded
   icon buttons (rounded-hover rule); the danger one tints red. */
.list-table .lt-row-acts-th{width:1%;position:sticky;right:0;z-index:3;background:var(--card-bg);box-shadow:-8px 0 12px -8px rgba(0,0,0,.16)}
.list-table td.lt-row-acts-cell{width:1%;white-space:nowrap;padding-right:10px;position:sticky;right:0;z-index:2;background:var(--card-bg);box-shadow:-8px 0 12px -8px rgba(0,0,0,.16)}
.list-table tbody tr:hover td.lt-row-acts-cell{background:var(--hover-bg,var(--card-bg))}
.list-table .lt-row-acts{display:inline-flex;align-items:center;gap:4px;opacity:0;transition:opacity var(--motion-fast)}
.list-table tbody tr:hover .lt-row-acts,.list-table tbody tr:focus-within .lt-row-acts{opacity:1}
.lt-row-act{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:transparent;color:var(--text-muted);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
/* Touch: grow the tap target vertically (rows are already ~44px tall) but NOT the width —
   .lt-row-act lives in a position:sticky right:0 cell whose 3-button cluster would otherwise
   reserve ~140px and squeeze the data columns on a narrow phone. 36px width keeps the column
   lean while a 44px min-height + 7px padding gives a comfortable iOS tap area. (B11 review fix) */
@media (pointer:coarse){.lt-row-act{min-width:36px;min-height:var(--tap-min,44px);padding:7px 0}}
.lt-row-act:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent)}
.lt-row-act.lt-row-act-danger:hover{background:color-mix(in srgb,var(--color-error,#ef4444) 12%,transparent);color:var(--color-error,#ef4444)}
.lt-row-act:active{transform:scale(.9)}
.lt-row-act:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 24%,transparent)}
.lt-row-act svg{width:14px;height:14px;fill:none;stroke:currentColor}
@media (hover:none){.list-table .lt-row-acts{opacity:1}}
.list-table td.td-center{text-align:center}
/* 2026-05-31 📘 — a long status-chip string (e.g. "Billing: ~53.7% billed —
   through Pay App #3…") rendered as one un-wrapping inline-block chip up to
   ~712px wide, blowing the table past the viewport → the whole page laid out
   1536px wide and shifted off both edges on iPad. Cap + ellipsize chips inside
   the projects table so a verbose status can't force horizontal overflow. */
.list-table td .status-chip{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
/* 2026-07-02 📘 — the project-number column was set in SF Mono, which read as a foreign typeface next to
   the SF Pro rest of the List page (Gavin flagged it). Use the site font with tabular-nums so the IDs stay
   column-aligned without a different-looking monospace face. */
.td-num{font-size:11px;color:var(--app-accent);font-weight:600;letter-spacing:0.2px;font-variant-numeric:tabular-nums}
.td-name{font-weight:600;letter-spacing:-0.1px}
.td-muted{color:var(--text-muted)}
/* Permit # cell — free-text permit numbers can be long (correction-set notes); cap + ellipsis. */
.td-permit-num{display:inline-block;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;font-variant-numeric:tabular-nums}
/* Pass-2 — Name identity sub-line (project number under the name, Board parity). */
.lt-name-sub{display:block;font-size:10.5px;font-weight:600;color:var(--text-muted);font-family:"SF Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.2px;margin-top:1px}
/* Pass-2 — ball-in-court person cell: mini avatar + name (Board avatar vocab). */
.lt-person{display:inline-flex;align-items:center;gap:7px;min-width:0}
.lt-person-av{width:22px;height:22px;flex:0 0 22px;border-radius:50%;display:grid;place-items:center;font-size:9px;font-weight:800;color:#fff;letter-spacing:.02em}
.lt-person-nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary);font-weight:500}
.td-phase-pill{--pill-accent:var(--app-accent);display:inline-block;padding:3px 10px;border-radius:var(--radius-pill);font-size:10.5px;font-weight:700;letter-spacing:.01em;background:color-mix(in srgb,var(--pill-accent) 14%,transparent);color:color-mix(in srgb,var(--pill-accent) 72%,var(--text-primary));box-shadow:inset 0 0 0 0.5px color-mix(in srgb,var(--pill-accent) 30%,transparent);white-space:nowrap}
.td-tasks{font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.td-tasks.done{color:var(--ok)}
.td-value{font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:-.3px;color:color-mix(in srgb,var(--color-success) 64%,var(--text-primary))}
.td-budget{font-variant-numeric:tabular-nums;font-weight:500}
.td-budget.over{color:var(--err);font-weight:700}
.due-dot{display:inline-block;width:6px;height:6px;border-radius:50%;vertical-align:middle;margin-right:5px;flex-shrink:0}
.list-empty{text-align:center;padding:56px 24px;color:var(--text-muted);font-size:14px;letter-spacing:-.05px;background:var(--surface-grad);border-radius:var(--radius-lg);box-shadow:var(--bevel-top),var(--shadow-e1)}

/* ── Column ── */
/* V82 — column body: theme-adaptive e2, subtle top-to-bottom gradient */
/* V82.2 — min-height so EMPTY phase columns still present a tall, easy drop
   zone (esp. for touch drag — you can drop onto a phase that has no cards yet). */
/* V84 layout revamp — column reads as its phase identity. --col-accent is set per-column
   from phase.color (JS); falls back to the app accent. The column body picks up a faint
   accent wash at the top fading into the matte, so each phase is visually distinct + premium. */
/* V132 — columns float more convincingly: deeper layered elevation (e3) so the
   bg→column→card depth ladder reads clearly, and a touch more phase-accent in
   the top wash so each column's phase color is unmistakable. */
.column{--col-accent:var(--app-accent);flex:0 0 280px;border-radius:var(--radius-lg);display:flex;flex-direction:column;max-height:100%;min-height:min(440px, calc(100svh - 220px));transition:background var(--motion-base),flex-basis var(--motion-base),width var(--motion-base),box-shadow var(--motion-base) ease;box-shadow:var(--shadow-e3);background:linear-gradient(to bottom, color-mix(in srgb, var(--col-accent) 18%, var(--col-bg)) 0%, color-mix(in srgb, var(--col-bg) 92%, var(--app-bg)) 140px)}
/* V-col1 — collapsed column = a compact vertical CHIP that fits its content at the TOP of the
   track (was stretching to a sibling's full height → a tall half-empty strip). align-self
   stops the flex row from stretching it; height:auto + min-height fits the header content. */
.column.collapsed{flex:0 0 46px;overflow:hidden;cursor:pointer;align-self:flex-start;height:auto;min-height:0}
.column.collapsed .col-header{height:auto!important}
.column.collapsed .cards,.column.collapsed .col-add-btn,.column.collapsed .col-color-bar,.column.collapsed .col-menu-btn,.column.collapsed .col-count,.column.collapsed .col-title-wrap{display:none}
/* V-col1 — collapsed column REWORK. Was: content stacked at the TOP of a full-height strip
   (justify-content:flex-start) → the strip read half-empty/unfinished. Now the strip is an
   intentional vertical CHIP: arrow at top, the vertical label GROWS to fill the center (so the
   name reads down the spine), count seated at the bottom — the whole height is used on purpose. */
/* V-col2 — the collapsed chip IS the whole header, so: round ALL corners (not just top),
   drop the header's bottom border/line, and let the arrow be a bare glyph (no padded box). */
.column.collapsed .col-header{flex-direction:column;justify-content:flex-start;padding:12px 6px 14px;align-items:center;height:auto;gap:10px;
  border-bottom:0!important;border-radius:var(--radius-lg)!important}
.column.collapsed .col-collapse-btn{padding:0;border-radius:50%;background:none!important;font-size:12px}
.column.collapsed .col-collapse-btn:hover{background:color-mix(in srgb,var(--on-app-bg) 10%,transparent)!important;color:var(--on-app-bg)}
.col-collapse-color{display:none;width:10px;height:10px;border-radius:50%;flex-shrink:0}
.column.collapsed .col-collapse-color{display:block}
/* vertical label flexes to fill the strip's center; centered within its own track */
.col-collapse-label{display:none;writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);font-size:12.5px;font-weight:700;letter-spacing:.01em;color:var(--on-app-bg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-height:200px}
.column.collapsed .col-collapse-label{display:block}
.col-collapse-count{display:none;background:var(--col-count-bg);color:var(--on-app-bg);border-radius:var(--radius-pill);min-width:22px;padding:3px 6px;font-size:11px;font-weight:800;text-align:center;font-variant-numeric:tabular-nums;flex-shrink:0}
.column.collapsed .col-collapse-count{display:block}
.col-collapse-btn{background:none;border:none;color:var(--on-chrome-muted);font-size:13px;cursor:pointer;padding:2px 4px;border-radius:var(--radius-xs);flex-shrink:0;line-height:1;transition:background var(--motion-fast),color var(--motion-fast)}
.col-collapse-btn:hover{background:var(--col-menu-hover);color:var(--on-app-bg)}
.column.drag-over{outline:none}
/* V133 (2026-06-20) — column header is a SOLID content/command surface, not full
   liquid glass: opaque --surface-grad base with a STRONGER phase-accent lead
   (title-area top 18%→22%) so each column unmistakably leads its phase color over
   the cards, plus --shadow-e2 elevation + a bevel rim (replacing the glass
   backdrop-filter). Keeps the per-column --col-accent tint + accent hairline. */
.col-header{padding:13px 14px 10px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0;background:linear-gradient(to bottom, color-mix(in srgb, var(--col-accent) 22%, var(--surface)), color-mix(in srgb, var(--col-accent) 6%, var(--surface)) 90%);box-shadow:var(--bevel-top),var(--shadow-e2);border-bottom:0.5px solid color-mix(in srgb, var(--col-accent) 28%, var(--chrome-border));border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.col-title-wrap{display:flex;align-items:center;gap:7px;flex:1;min-width:0}
.col-emoji{flex-shrink:0;opacity:.85;line-height:1;display:inline-flex;align-items:center}
.col-title{color:var(--text-primary);font-weight:700;font-size:14.5px;letter-spacing:-.25px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;flex:1;transition:color var(--motion-fast)}
.col-title:hover{text-decoration:none;color:var(--app-accent)}
.col-count{background:color-mix(in srgb, var(--col-accent) 18%, transparent);color:color-mix(in srgb, var(--col-accent) 72%, var(--text-primary));border-radius:var(--radius-pill);padding:2px 9px;font-size:11.5px;font-weight:700;letter-spacing:0;flex-shrink:0;min-width:20px;text-align:center;font-variant-numeric:tabular-nums}
.col-menu-btn{background:none;border:none;color:var(--text-muted);font-size:16px;cursor:pointer;padding:2px 5px;border-radius:var(--radius-sm);line-height:1;flex-shrink:0;transition:background var(--motion-fast),color var(--motion-fast)}
.col-menu-btn:hover{background:var(--col-menu-hover);color:var(--text-primary)}
/* 2026-05-22 📘 Category/phase color bar gets a soft glow + the column a deeper
   shadow so the kanban headers separate from the page bg (all themes). */
/* V82 — taller, full-opacity phase bar with a real color glow */
.col-color-bar{height:4px;margin:0 8px 7px;border-radius:3px;opacity:1;box-shadow:0 2px 8px color-mix(in srgb,currentColor 50%,transparent),0 1px 2px color-mix(in srgb,currentColor 35%,transparent)}
/* 2026-05-22 📘 Phase drag-to-reorder: a subtle grip in the column header that
   appears on hover (desktop) / always (touch). Dragging it reorders columns. */
.col-drag-handle{position:relative;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;margin-right:2px;border:none;background:transparent;color:var(--text-muted);cursor:grab;border-radius:var(--radius-sm);opacity:0;flex-shrink:0;transition:opacity var(--motion-fast),background var(--motion-fast),color var(--motion-fast)}
.col-drag-handle:active{cursor:grabbing}
.col-drag-handle:hover{background:var(--col-menu-hover);color:var(--text-primary)}
.col-grip-ico{width:14px;height:14px}
.col-header:hover .col-drag-handle{opacity:.7}
.column.collapsed .col-drag-handle{display:none}
@media (hover: none){ .col-drag-handle{opacity:.55} }
.column.col-dragging{opacity:.4}
/* Lifted ghost clone of a column being dragged (mirrors the card pop-out lift). */
.column.col-ghost{opacity:1;cursor:grabbing;will-change:transform;border:0.5px solid var(--chrome-border)}
.column.col-drop-target{outline:2px dashed var(--app-accent);outline-offset:-2px}
/* V137 — squared-shadow fix: the scroll container computes overflow-x to clip (one non-visible
   axis forces the other per CSS spec), so card drop-shadows were cut at the top/side edges.
   Pad ≥ the e1 shadow spread (~4px) on all sides so shadows render inside the clip box. */
.cards{overflow-y:auto;flex:1;padding:5px 9px 9px;display:flex;flex-direction:column;gap:10px;min-height:40px}
/* V84 — crafted empty-column state: instead of a dead matte void, a quiet accent-tinted
   dashed drop zone with a cue, so empty phases read as intentional + invite a drop. */
.column-empty .cards{padding:8px}
.column-empty .cards::after{content:'Drop a project here';pointer-events:none;display:flex;align-items:center;justify-content:center;flex:1;min-height:120px;margin:2px;border:1.5px dashed color-mix(in srgb, var(--col-accent) 32%, transparent);border-radius:var(--radius-md);background:color-mix(in srgb, var(--col-accent) 5%, transparent);color:color-mix(in srgb, var(--col-accent) 62%, var(--text-muted));font-size:11.5px;font-weight:600;letter-spacing:-.1px;text-align:center;padding:14px;transition:background var(--motion-base) var(--ease-out),border-color var(--motion-base) var(--ease-out)}
.column-empty.drag-over .cards::after{background:color-mix(in srgb, var(--col-accent) 14%, transparent);border-color:color-mix(in srgb, var(--col-accent) 55%, transparent)}
.cards::-webkit-scrollbar{width:4px}
.cards::-webkit-scrollbar-thumb{background:var(--col-scroll);border-radius:2px}
/* V39jj — col-add button: Apple press feedback */
.col-add-btn{margin:6px 8px 8px;background:var(--col-add-bg);border:none;border-radius:var(--radius-btn-sm);color:var(--on-chrome);padding:8px;text-align:left;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background var(--motion-fast),transform var(--motion-fast);flex-shrink:0}
.col-add-btn:hover{background:var(--col-add-hover);color:var(--on-app-bg)}
.col-add-btn:active{transform:scale(.98)}
.add-column{flex:0 0 260px;background:var(--chrome-bg);border-radius:var(--radius-card);height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--on-chrome-muted);font-size:14px;font-weight:600;border:2px dashed var(--chrome-border);transition:all var(--motion-base)}
.add-column:hover{background:var(--chrome-bg-hover);color:var(--on-app-bg);border-color:var(--col-add-border)}

/* ── Card ── */
/* 2026-05-22 📘 Cards use the theme-aware --shadow-card token (incl. a hairline
   that reads on dark themes where flat rgba(0,0,0) shadows vanish) so project
   cards have real Apple-style elevation + contrast on every theme. */
/* V82.1 — flex-shrink:0 is critical: .cards is a column-flex with a bounded
   height, so the default flex-shrink:1 COMPRESSED every card (down to ~20–59px,
   clipping content) when a column had more cards than fit. Cards must keep their
   content height and let .cards SCROLL instead. */
/* V132 — premium card material: top-lit gradient surface + crisp bevel rim so
   the card reads as a physical pane, not flat paper. Phase-tint stripe + content
   unchanged. */
.card{background:var(--surface-grad);border-radius:var(--radius-md);padding:0;cursor:pointer;box-shadow:var(--bevel-top),var(--shadow-e1);transition:box-shadow var(--motion-base) ease,transform var(--motion-fast) var(--ease-spring),background var(--motion-base);position:relative;user-select:none;overflow:hidden;flex-shrink:0}
/* V82 — card hover bloom: lift + slight scale + e3 elevation.
   2026-05-26 — GATED to real hover (mouse/trackpad). On iOS the first tap fires
   a sticky :hover, which lifted the card + swapped to the plain --shadow-e3
   (stripping the phase-tint inset hairline) → the card looked like it lost its
   tint/glass and grew a boxy lifted shadow. Touch now skips the bloom entirely;
   its only press feedback is the rounded :active below. */
@media (hover:hover) and (pointer:fine){
  /* V132 — hover bloom now lifts higher with a soft accent glow halo + the
     gradient brightens, so the card feels lit/alive on focus. */
  .card:hover{background:var(--surface-grad-hover);box-shadow:var(--bevel-top),var(--shadow-e3),var(--glow-accent-soft);transform:translateY(-3px) scale(1.008)}
}
/* V39zzz — card press feedback (pull-down). Subtle, rounded (box-shadow follows
   the card's border-radius), keeps the tint. Fine for both mouse + touch. */
.card:active{transform:translateY(-1px) scale(1.002);box-shadow:var(--bevel-top),var(--shadow-e2)}
.card.dragging{opacity:.5;transform:rotate(1.5deg);box-shadow:var(--shadow-e5)}
/* V82.2 — touch long-press drag (iPad + mobile). Ghost follows the finger; the
   source card dims in place; body scroll/selection lock while a drag is live. */
.card.td-ghost{will-change:transform,box-shadow,opacity}
/* Source dims on the design-system curve (not an instant cut) while it's lifted. */
.card.td-source-hidden{opacity:.32;transform:scale(.98);transition:opacity var(--motion-base) var(--ease-out),transform var(--motion-base) var(--ease-out)}
body.td-dragging-active{overflow:hidden!important;touch-action:none;-webkit-user-select:none;user-select:none}
body.td-dragging-active .board-wrap{scroll-snap-type:none!important}
/* (Board snap is disabled inline on the board element during a pill-tap tween —
   see _mbpTapScrollTo — so the tween's scrollLeft isn't quantized to column
   boundaries. Was a body.mbp-tap-scrolling rule; moved inline to avoid a
   whole-board repaint flash on tap.) */
/* Target column highlight eases in/out (matches the card-bloom motion language). */
.column{transition:background var(--motion-base),flex-basis var(--motion-base),width var(--motion-base),box-shadow var(--motion-fast) ease}
/* V82.4 — drop target reads through MATERIAL, not a boxy outline (DESIGN.md:
   never border-as-elevation). Soft accent tint + a gentle inset accent glow. */
.column.drag-over{background:color-mix(in srgb,var(--app-accent) 10%,var(--col-bg));box-shadow:var(--shadow-e2), inset 0 0 0 1px color-mix(in srgb,var(--app-accent) 30%,transparent), inset 0 0 24px color-mix(in srgb,var(--app-accent) 12%,transparent)}
/* User-picked project color: 3px LEFT edge stripe. Apple convention puts
   identity color on the leading edge, not the top. */
.card-label{position:absolute;top:0;left:0;bottom:0;width:3px}
/* Stripe-tinted body padding gives the rest of the card a clean white
   surface without the color reading as "I'm in a colored card." */
.card.has-stripe .card-body{padding-left:14px}
/* Phase-tinted card (2026-05-25, Item 3): the left color STRIPE is replaced by
   a subtle low-saturation wash of the project's CURRENT PHASE color across the
   whole card, so the board reads by phase at a glance without shouting. The
   tint is a tiny color-mix into the card surface + a faint phase-colored hairline.
   --card-phase is set inline from phaseColor(current_phase). */
.card.phase-tinted{
  background:linear-gradient(to bottom, color-mix(in srgb, var(--card-phase) var(--card-phase-mix, 10%), var(--card-bg)) 0%, color-mix(in srgb, var(--card-phase) var(--card-phase-mix-b, 5%), var(--card-bg)) 100%);
  box-shadow:var(--shadow-e1), inset 0 0 0 0.5px color-mix(in srgb, var(--card-phase) 22%, transparent);
}
/* 2026-05-26 — gated to real hover so touch keeps the resting tint hairline
   (sticky :hover on iOS was swapping the inset on first tap). */
@media (hover:hover) and (pointer:fine){
  .card.phase-tinted:hover{box-shadow:var(--shadow-e3), inset 0 0 0 0.5px color-mix(in srgb, var(--card-phase) 30%, transparent)}
}
/* Touch press keeps the phase-tint inset hairline + a gentle e2 lift (rounded). */
.card.phase-tinted:active{box-shadow:var(--shadow-e2), inset 0 0 0 0.5px color-mix(in srgb, var(--card-phase) 28%, transparent)}
/* 2026-05-22 📘 Flex column so "Open Project Board" pins to the card bottom
   regardless of how much meta a card has — uniform layout across all cards. */
/* V82.1 — was min-height:100% (a circular % vs the card's content-driven
   height) which let the card collapse SHORTER than its content, so overflow:
   hidden clipped the bottom priority/risk badge. min-height:0 lets the card
   size to its content; the footer already sits via its own margin-top. */
.card-body{padding:13px 14px;display:flex;flex-direction:column;min-height:0}
/* V97 — board project cards (not the compact per-project phase-board pb-card) get a
   min-height floor so short cards read evenly + the footer has room to pin to bottom. */
.card:not(.pb-card) .card-body{min-height:152px}
/* ── Board density toggle (2026-06-20) ────────────────────────────────────────
   data-density on #board.board-wrap scales card padding/min-height/name size +
   the inter-card gap. Comfortable = roomier; compact = tighter, more cards in view.
   data-detail="compact" hides secondary card meta rows for a glance-only card.
   data-cols-mode="fixed" + --board-cols-fixed pins each column's width so N columns
   fill the track evenly (Columns picker); auto keeps the native 280px flex track. */
.board-wrap[data-density="comfortable"] .cards{gap:13px;padding:7px 11px 11px}
.board-wrap[data-density="comfortable"] .card-body{padding:15px 16px}
.board-wrap[data-density="comfortable"] .card:not(.pb-card) .card-body{min-height:168px}
.board-wrap[data-density="compact"] .cards{gap:7px;padding:4px 7px 7px}
.board-wrap[data-density="compact"] .card-body{padding:9px 11px}
.board-wrap[data-density="compact"] .card:not(.pb-card) .card-body{min-height:0}
.board-wrap[data-density="compact"] .card-name{font-size:13.5px;line-height:1.32}
.board-wrap[data-density="compact"] .card-meta-row{font-size:11.5px}
/* Compact card-detail level: a glance-only card — drop the address/value/phase
   meta rows, keep name + number + badges. (Density-independent; an opt-in flag.) */
.board-wrap[data-detail="compact"] .card .card-meta-row,
.board-wrap[data-detail="compact"] .card .card-value,
.board-wrap[data-detail="compact"] .card .card-stage-wrap{display:none}
.board-wrap[data-detail="compact"] .card:not(.pb-card) .card-body{min-height:0}
/* Columns picker — fixed N columns fill the VISIBLE board width; the rest scroll
   horizontally. Each column is sized to (100% − inter-column gaps)/N of the track
   so exactly N read at once. The +Add button stays content-sized (not a .column).
   Desktop/tablet ONLY (≥1025px): below that the board owns its native single-column
   scroll-snap track (≤640) / fixed-280 (641–1024), which the picker must not override. */
@media (min-width:1025px){
  .board-wrap[data-cols-mode="fixed"]{--board-col-w:calc((100% - (var(--board-cols-fixed,3) - 1) * 12px) / var(--board-cols-fixed,3))}
  .board-wrap[data-cols-mode="fixed"] > .column{flex:0 0 var(--board-col-w);width:var(--board-col-w);max-width:var(--board-col-w);min-width:200px}
  .board-wrap[data-cols-mode="fixed"] > .column.collapsed{flex:0 0 44px;width:44px;max-width:44px;min-width:0}
}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:4px}
/* 2026-05-22 📘 Card head: name + project# + priority/risk badges flow together
   on the LEFT (badges sit inline right under the #), action buttons pinned
   top-RIGHT on one line. No tall right-hand column → no empty white band, and
   the buttons never shift regardless of badge count. */
.card-top-main{min-width:0;flex:1 1 auto}
.card-actions{display:flex;gap:4px;align-items:center;flex-shrink:0}
/* V130 — compact health ring on the board card (ring/dot, NOT a progress bar) */
.card-badges{display:flex;gap:5px;flex-wrap:wrap;align-items:center;margin-top:7px}
.card-badges:empty{display:none}
.card-name{font-weight:600;font-size:15px;letter-spacing:-0.1px;color:var(--text-primary);line-height:1.4;flex:1}
.card-num{font-size:10px;color:var(--text-muted);font-family:monospace;white-space:nowrap;margin-top:2px}
.card-archived-tag{font-size:10px;font-weight:600;color:var(--archived-tag-fg);background:var(--archived-tag-bg);border-radius:var(--radius-xs);padding:1px 5px;display:inline-block;margin-top:2px}
.card-note-tip{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:var(--z-header);background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-card);box-shadow:var(--shadow-card-hover);padding:8px 10px;pointer-events:none;opacity:0;transform:translateY(-4px);transition:opacity var(--motion-base),transform var(--motion-base)}
.card:hover .card-note-tip{opacity:1;transform:translateY(0)}
.card-note-tip-text{font-size:12px;color:var(--text-primary);line-height:1.4;word-break:break-word}
.card-note-tip-meta{font-size:10px;color:var(--text-muted);margin-top:4px;display:flex;gap:6px;align-items:center}
/* ── Bulk selection ─────────────────────────────────────────────────────────── */
/* V135 — board card select box is circular too (round selection everywhere). */
.card-sel-cb{display:none;position:absolute;top:8px;right:8px;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--border-strong);background:var(--card-bg);cursor:pointer;z-index:10;flex-shrink:0;align-items:center;justify-content:center;transition:background var(--motion-fast),border-color var(--motion-fast)}
.board-select-mode .card-sel-cb{display:flex}
.board-select-mode .card{cursor:default}
.board-select-mode .card:hover{transform:none}
.card.bulk-selected{outline:2px solid var(--focus);box-shadow:0 0 0 4px rgba(56,139,255,.18)}
.card.bulk-selected .card-sel-cb{background:var(--focus);border-color:var(--focus);color:var(--on-accent)}
.card.bulk-selected .card-sel-cb::after{content:'✓';font-size:12px;line-height:1;color:var(--on-accent)}
.btn-select-mode{background:var(--chrome-bg);border:0.5px solid var(--chrome-border);color:var(--text-primary);border-radius:var(--radius-pill);height:28px;display:inline-flex;align-items:center;gap:5px;padding:0 12px;font-size:12px;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast);display:inline-flex;align-items:center;gap:5px;letter-spacing:-.05px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif}
.btn-select-mode:hover{background:var(--chrome-bg-hover);border-color:var(--chrome-border-strong)}
.btn-select-mode.active{background:color-mix(in srgb,var(--app-accent) 12%,transparent);border-color:color-mix(in srgb,var(--app-accent) 30%,transparent);color:var(--app-accent)}
.btn-select-mode .bp-ico{width:11px;height:11px;flex-shrink:0;opacity:.7}
/* Bulk action bar — translucent floating toolbar (Apple-system) */
/* V39m — bulk-bar now theme-aware (was hardcoded color-mix(in srgb, var(--card-bg) 92%, transparent) which
   appeared white on dark themes). Uses --card-bg with 92% alpha via color-mix. */
/* V133 (2026-06-20) — bulk action bar = a SOLID elevated command surface (it
   issues actions = command chrome that must read with authority), not a
   see-through frosted film. Opaque --surface-grad + the top-tier --shadow-e5 +
   --glow-accent ring, and a SPRING entrance (--ease-spring overshoot) so it
   lands tactilely instead of sliding flat. */
.bulk-bar{position:fixed;bottom:calc(14px + env(safe-area-inset-bottom));left:50%;right:auto;transform:translateX(-50%) translateY(120%);z-index:var(--z-fab);background:var(--surface-grad);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);padding:10px 16px;display:flex;align-items:center;gap:10px;box-shadow:var(--bevel-top),var(--shadow-e5),var(--glow-accent);transition:transform var(--motion-slow) var(--ease-spring),opacity var(--motion-base);opacity:0;pointer-events:none;max-width:min(720px,calc(100vw - 28px));font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif}
.bulk-bar.visible{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}
.bulk-bar-count{font-size:13px;font-weight:600;color:var(--text-primary);letter-spacing:-.1px}
.bulk-bar-label{font-size:12px;color:var(--text-muted);white-space:nowrap;letter-spacing:-.05px}
.bulk-bar select{height:28px;border:0.5px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text-primary);font-size:12px;font-weight:500;padding:0 22px 0 9px;min-width:170px;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238e8e93'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;letter-spacing:-.05px;font-family:inherit}
.bulk-bar select:hover{background-color:var(--surface-2)}
/* V39tt — bulk-bar-btn: replace stale transition:filter, add :active scale */
.bulk-bar-btn{height:28px;padding:0 14px;border:none;border-radius:var(--radius-sm);font-size:12.5px;font-weight:500;cursor:pointer;white-space:nowrap;transition:background var(--motion-fast),opacity var(--motion-fast),transform var(--motion-fast);letter-spacing:-.05px;font-family:inherit}
.bulk-bar-btn.move{background:var(--app-accent);color:var(--on-accent);box-shadow:0 1px 2px color-mix(in srgb, var(--app-accent) 25%, transparent)}
.bulk-bar-btn.move:hover{opacity:.92}
.bulk-bar-btn.move:active{transform:scale(.97);opacity:1}
.bulk-bar-btn.move:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.bulk-bar-btn.cancel{background:transparent;border:0.5px solid var(--border);color:var(--text-primary)}
.bulk-bar-btn.cancel:hover{background:var(--surface-2)}
.bulk-bar-sep{width:0.5px;height:18px;background:var(--border);flex-shrink:0;margin:0 2px}
/* ── Labor / Time bulk-ops surface (2026-06-26) ───────────────────────────────────────────────── */
.te-rollup{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.te-stat{flex:1 1 110px;min-width:96px;display:flex;flex-direction:column;gap:3px;padding:11px 13px;background:var(--card-bg);border-radius:var(--radius-md,14px);box-shadow:var(--shadow-e2)}
.te-stat-lbl{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
.te-stat-val{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--text-primary);font-variant-numeric:tabular-nums}
.te-stat-accent .te-stat-val{color:var(--color-success)}
.te-stat-warn .te-stat-val{color:var(--color-warning)}
.te-add-block{background:var(--surface-2);border-radius:var(--radius-lg);box-shadow:var(--shadow-e2);padding:14px;margin-bottom:18px}
.te-add-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.te-add-hint{font-size:11.5px;color:var(--text-muted)}
.te-add-grid-head,.te-add-row{display:grid;grid-template-columns:minmax(110px,1.4fr) minmax(120px,1fr) 64px 64px 70px minmax(100px,1.1fr) 34px;gap:7px;align-items:center}
.te-add-grid-head{padding:0 2px 6px;font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
.te-add-rows{display:flex;flex-direction:column;gap:7px}
.te-add-row .field-input{height:34px;font-size:12.5px}
.te-af-n{text-align:right;font-variant-numeric:tabular-nums}
.te-add-del{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:10px;background:transparent;color:var(--text-muted);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast)}
.te-add-del:hover:not(:disabled){background:color-mix(in srgb,var(--color-error,#e5484d) 14%,transparent);color:var(--color-error,#e5484d)}
.te-add-del:active:not(:disabled){transform:scale(.92)}
.te-add-del:disabled{opacity:.32;cursor:not-allowed}
.te-add-del .sb-ico{width:14px;height:14px}
.te-add-acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;justify-content:flex-end}
.te-list-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.te-selall{font-size:12px;font-weight:600;color:var(--app-accent);background:transparent;border:none;cursor:pointer;padding:4px 8px;border-radius:8px;transition:background var(--motion-fast)}
.te-selall:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
.te-list{display:flex;flex-direction:column;gap:7px;padding-bottom:8px}
.te-row{display:flex;align-items:center;gap:11px;padding:10px 12px;background:var(--card-bg);border-radius:14px;box-shadow:var(--shadow-e1);transition:box-shadow var(--motion-fast),background var(--motion-fast)}
.te-row:hover{box-shadow:var(--shadow-e2)}
.te-row-sel{background:color-mix(in srgb,var(--app-accent) 9%,var(--card-bg));box-shadow:0 0 0 1.5px color-mix(in srgb,var(--app-accent) 55%,transparent),var(--shadow-e2)}
.te-row-lock{opacity:.78}
.te-check{flex-shrink:0;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--border);background:var(--surface);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--on-accent);transition:background var(--motion-fast),border-color var(--motion-fast),transform var(--motion-fast)}
.te-check:hover:not(:disabled){border-color:var(--app-accent)}
.te-check:active:not(:disabled){transform:scale(.9)}
.te-check.on{background:var(--app-accent);border-color:var(--app-accent)}
.te-check:disabled{opacity:.4;cursor:not-allowed}
.te-row-main{flex:1;min-width:0}
.te-row-desc{font-size:13px;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.te-row-meta{font-size:11.5px;color:var(--text-muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.te-row-cost{font-size:13px;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums;flex-shrink:0}
.te-row-del{flex-shrink:0;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:9px;background:transparent;color:var(--text-muted);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast)}
.te-row-del:hover:not(:disabled){background:color-mix(in srgb,var(--color-error,#e5484d) 14%,transparent);color:var(--color-error,#e5484d)}
.te-row-del:active:not(:disabled){transform:scale(.9)}
.te-row-del:disabled{opacity:.3;cursor:not-allowed}
.te-row-del .sb-ico{width:14px;height:14px}
.te-pill{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;letter-spacing:.02em;padding:2px 8px;border-radius:999px;text-transform:uppercase}
.te-pill-ok{color:var(--color-success);background:color-mix(in srgb,var(--color-success) 15%,transparent)}
.te-pill-pending{color:var(--color-warning);background:color-mix(in srgb,var(--color-warning) 16%,transparent)}
.te-pill-lock{color:var(--text-muted);background:color-mix(in srgb,var(--text-muted) 16%,transparent)}
/* bulk action bar — frosted Apple chrome floating in the modal */
.te-bulkbar{position:sticky;bottom:6px;margin-top:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 13px;border-radius:var(--radius-lg);background:var(--frost-bg);backdrop-filter:var(--frost-blur);-webkit-backdrop-filter:var(--frost-blur);box-shadow:var(--bevel-top),var(--shadow-e4);border:0.5px solid var(--chrome-border,var(--border));opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity var(--motion-base),transform var(--motion-base) var(--ease-spring)}
.te-bulkbar.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.te-bb-count{font-size:12.5px;font-weight:700;color:var(--text-primary);letter-spacing:-.01em}
.te-bb-sep{width:0.5px;height:18px;background:var(--border);flex-shrink:0}
.te-bb-btn{height:30px;padding:0 11px;border:0.5px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text-primary);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background var(--motion-fast),transform var(--motion-fast),box-shadow var(--motion-fast)}
.te-bb-btn:hover{background:var(--surface-2)}
.te-bb-btn:active{transform:scale(.96)}
.te-bb-btn.ok{background:var(--app-accent);color:var(--on-accent);border-color:transparent;box-shadow:0 1px 3px color-mix(in srgb,var(--app-accent) 30%,transparent)}
.te-bb-btn.ok:hover{filter:brightness(1.05)}
.te-bb-btn.danger:hover{background:color-mix(in srgb,var(--color-error,#e5484d) 14%,transparent);color:var(--color-error,#e5484d);border-color:color-mix(in srgb,var(--color-error,#e5484d) 35%,transparent)}
.te-bb-btn.quiet{background:transparent;color:var(--text-muted)}
/* bulk-undo toast — frosted pill, bottom-center, above everything */
.te-undo-toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(14px);z-index:calc(var(--z-modal,1000) + 50);display:flex;align-items:center;gap:14px;padding:11px 14px 11px 18px;border-radius:999px;background:var(--frost-bg-strong,var(--frost-bg));backdrop-filter:var(--frost-blur);-webkit-backdrop-filter:var(--frost-blur);box-shadow:var(--bevel-top),var(--shadow-e4);border:0.5px solid var(--chrome-border,var(--border));opacity:0;pointer-events:none;transition:opacity var(--motion-base),transform var(--motion-base) var(--ease-spring);max-width:calc(100vw - 28px)}
.te-undo-toast.visible{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.te-undo-msg{font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.te-undo-btn{flex-shrink:0;height:28px;padding:0 14px;border:none;border-radius:999px;background:var(--app-accent);color:var(--on-accent);font-size:12.5px;font-weight:700;cursor:pointer;transition:filter var(--motion-fast),transform var(--motion-fast)}
.te-undo-btn:hover{filter:brightness(1.06)}
.te-undo-btn:active{transform:scale(.95)}
@media (max-width:560px){
  .te-add-grid-head{display:none}
  .te-add-row{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .te-add-row .field-input[data-addf="worker"]{grid-column:1 / -1}
  .te-add-row .field-input[data-addf="cost_code"]{grid-column:1 / -1}
  .te-add-del{grid-column:1 / -1;width:100%}
  .te-bulkbar{justify-content:center}
}
@media (prefers-reduced-transparency:reduce){
  .te-bulkbar,.te-undo-toast{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (prefers-reduced-motion:reduce){
  .te-bulkbar,.te-undo-toast,.te-check,.te-bb-btn,.te-row-del,.te-add-del{transition:none}
}
.card-unread-dot{position:absolute;top:6px;left:6px;width:8px;height:8px;border-radius:50%;background:var(--focus);z-index:5;animation:unread-pulse 2s infinite;pointer-events:none}
@keyframes unread-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.25)}}
.card-meta{font-size:12px;color:var(--text-muted);display:flex;flex-direction:column;gap:2px;margin-top:2px}
.card-meta-row{display:flex;align-items:center;gap:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-value{margin-top:5px;font-size:12px;font-weight:600;color:var(--ok)}
.card-footer{margin-top:6px;display:flex;align-items:center;justify-content:space-between;gap:6px}
.card-task-wrap{display:flex;align-items:center;gap:5px;flex:1}
.card-stage-wrap{display:flex;align-items:center;gap:5px;margin-top:8px;margin-bottom:4px}
.pb-card{cursor:default!important}
.pb-move-row{display:flex;justify-content:space-between;gap:6px;margin-top:10px;padding-top:8px;border-top:0.5px solid var(--chrome-border)}
/* V39bbbb — pb-move-btn smooth hover + press feedback */
.pb-move-btn{font-size:11px;padding:4px 10px;border:none;border-radius:var(--radius-btn-sm);background:var(--surface-2);color:var(--text-primary);cursor:pointer;font-weight:600;transition:background var(--motion-fast),transform var(--motion-fast)}
.pb-move-btn:hover{background:var(--border)}
.pb-move-btn:active{transform:scale(.96)}
.pb-move-btn.primary{background:var(--link);color:var(--on-accent)}
.pb-move-btn.primary:hover{background:var(--link-hover)}
/* V39aaaa — card-phase-btn: smooth hover + press feedback */
.card-phase-btn{position:relative;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:none;border-radius:var(--radius-btn-sm);background:transparent;color:var(--text-muted);cursor:pointer;font-size:15px;line-height:1;padding:0;flex-shrink:0;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast)}
/* Rule 7 — expand the tap target to ~34px on TOUCH only (where fat-finger help applies);
   on desktop the 22px visual is already a fine pointer target and a larger overlay would
   graze the card's open-click strip. */
@media (pointer:coarse){
  .card-phase-btn::before,.col-drag-handle::before{content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;transform:translate(-50%,-50%)}
}
.card-phase-btn:hover{background:var(--surface-2);color:var(--text-primary)}
.card-phase-btn:active{transform:scale(.92)}
.ctx-menu-phase-item{display:flex;align-items:center;gap:8px}
.ctx-menu-phase-item .phase-check{width:14px;font-size:12px;flex-shrink:0}
.pb-active-col{background:var(--col-active-bg)!important;outline:2px solid var(--col-active-outline)}
.card-task-text{font-size:11px;color:var(--text-muted);white-space:nowrap}
.card-task-bar{flex:1;height:4px;background:var(--border);border-radius:2px;overflow:hidden}
.card-task-fill{height:100%;background:var(--ok);border-radius:2px;transition:width var(--motion-slow)}
.td-budget{white-space:nowrap;font-size:12px}
.td-budget.over{color:var(--err);font-weight:700}
.card-due{font-size:11px;font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.card-due.overdue{color:var(--err)}
.card-due.due-soon{color:var(--warn)}
.card-due.ok{color:var(--text-muted)}
.card-due-dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0}
.card-due.overdue .card-due-dot{background:var(--err)}
.card-due.due-soon .card-due-dot{background:var(--warn)}
.card-due-ico{width:11px;height:11px;flex-shrink:0;color:currentColor}
.card-drag-handle{position:absolute;top:8px;right:8px;color:var(--border-strong);font-size:12px;opacity:0}
.card:hover .card-drag-handle{opacity:1}
/* SF-Symbol-style line icon inside card meta rows */
.card-meta-ico{width:11px;height:11px;flex-shrink:0;color:var(--text-muted);margin-right:1px}
.card-meta-row .card-meta-ico{margin-right:2px}
.card-value .card-meta-ico{color:var(--app-accent);margin-right:3px}
.card-phase-ico{width:14px;height:14px;color:currentColor}
.card-archived-tag .card-meta-ico{margin-right:3px}
/* "Open Project Board" button (Apple-system action affordance per card) */
/* 2026-05-17 📘 visual fix V2 F3: bg 6%→16% accent + border 22%→32% for
   readable contrast on white card. Was barely-distinguishable pale blue
   text on near-white tint. */
/* 2026-05-22 📘 Card footer = a pinned two-button action row (Apple). A hairline
   separates it from the meta; "Full Page" (secondary, quiet) + "Open Board"
   (primary, filled accent) sit balanced side-by-side, same height. Pinned to the
   card bottom (margin-top:auto on the flex-column body) so spacing is IDENTICAL
   across every card regardless of blocker/meta length. */
/* 2026-05-22 📘 Footer = two compact, fully-rounded PILLS (text-only, no icons)
   right-aligned — matches the tracker's pill language (priority/filter/header
   pills). Content-sized, not stretched full-width, so they read light. */
/* Pills span the footer — secondary (Full Page) anchored left, primary (Open
   Board) anchored right — balanced across the width, not crammed in a corner. */
/* 2026-05-22 📘 Footer gap is FIXED + identical on every card. (Was margin-top:
   auto to pin-to-bottom, but on content-height board cards `auto` resolves to 0
   → the buttons touched the content above.) Card-body children all space via
   margin-TOP, so zeroing their bottom margins makes the footer's own 14px
   margin-top the single, consistent gap regardless of what precedes it. */
.card-body > *{margin-bottom:0}
/* V82.2 — compact footer pills (Gavin: were too large). Content-sized, not
   stretched edge-to-edge; pills hug their label and sit at the trailing edge. */
/* V97 — footer pins to the card bottom so every card has consistent rhythm
   regardless of how many meta rows / status chips it carries (no floating gap
   above the buttons). `margin-top:auto` pushes it down; the card-body min-height
   gives short cards (e.g. a lone blocker chip) enough room to read evenly. */
.card-footer-actions{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin-top:auto;padding-top:12px}
.card-fbtn{display:inline-flex;align-items:center;justify-content:center;height:25px;padding:0 11px;font-size:11.5px;font-weight:600;letter-spacing:-.05px;border-radius:var(--radius-pill);cursor:pointer;font-family:inherit;white-space:nowrap;transition:background var(--motion-fast),transform var(--motion-fast),opacity var(--motion-fast)}
.card-fbtn:active{transform:scale(.96)}
.card-fbtn-secondary{background:var(--surface-2);color:var(--text-primary);border:0.5px solid var(--chrome-border)}
.card-fbtn-secondary:hover{background:var(--surface-3,var(--surface-2));border-color:var(--border-strong,var(--chrome-border))}
/* V82 — primary footer pill: glass-shine gradient + accent glow */
.card-fbtn-primary{background:linear-gradient(to bottom, color-mix(in srgb, var(--app-accent) 92%, #fff), var(--app-accent));color:var(--on-accent);border:0.5px solid transparent;box-shadow:0 1px 3px color-mix(in srgb, var(--app-accent) 40%, transparent),inset 0 1px 0 rgba(255,255,255,.18);transition:filter var(--motion-fast),box-shadow var(--motion-fast)}
.card-fbtn-primary:hover{filter:brightness(1.08);box-shadow:0 3px 8px color-mix(in srgb, var(--app-accent) 50%, transparent),inset 0 1px 0 rgba(255,255,255,.22)}
.card-fbtn-primary:active{filter:brightness(.97);box-shadow:0 1px 2px color-mix(in srgb, var(--app-accent) 40%, transparent),inset 0 1px 0 rgba(255,255,255,.12)}

/* ── Priority badges ── */
/* V39i — bumped from 9px/800 to 10px/700 + tighter letter-spacing. 9px-uppercase-extra-bold
   reads as "engineering placeholder"; 10px-uppercase-bold reads as Apple chip. */
.priority-badge{display:inline-block;padding:2px 7px;border-radius:var(--radius-pill);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;line-height:1.4}
.priority-critical{background:var(--priority-critical-bg);color:var(--priority-critical-fg)}
.priority-high{background:var(--priority-high-bg);color:var(--priority-high-fg)}
.priority-medium{background:var(--priority-medium-bg);color:var(--priority-medium-fg)}
.priority-low{background:var(--priority-low-bg);color:var(--priority-low-fg)}
/* V-chip1 — NORMAL had NO fill (rendered as bare text, not a pill like the others). Give it a
   quiet neutral pill so every priority is a consistent badge — calm/muted since it's the default. */
.priority-normal{background:color-mix(in srgb,var(--text-muted) 16%,transparent);color:var(--text-secondary)}
.risk-badge{display:inline-block;padding:2px 7px;border-radius:var(--radius-pill);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;line-height:1.4}
.risk-low{background:var(--risk-low-bg);color:var(--risk-low-fg)}
.risk-medium{background:var(--risk-medium-bg);color:var(--risk-medium-fg)}
.risk-high{background:var(--risk-high-bg);color:var(--risk-high-fg)}
.status-chip{display:inline-block;padding:2px 7px;border-radius:var(--radius-pill);font-size:10px;font-weight:600;letter-spacing:.2px;line-height:1.4}
.status-chip.sc-ok{background:var(--risk-low-bg);color:var(--risk-low-fg)}
.status-chip.sc-warn{background:var(--risk-medium-bg);color:var(--risk-medium-fg)}
.status-chip.sc-alert{background:var(--risk-high-bg);color:var(--risk-high-fg)}
.status-chip.sc-neutral{background:var(--surface);color:var(--text-muted);border:0.5px solid var(--chrome-border)}
.field-hint{font-size:11px;color:var(--field-hint);margin-top:3px;line-height:1.4}

/* ── Modal overlay ── */
.modal-overlay{position:fixed;inset:0;background:var(--overlay-bg);display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;z-index:var(--z-modal);overflow-y:auto;animation:modalOverlayIn var(--motion-base) var(--ease-out)}
.modal-overlay.hidden{display:none}
/* V132 — modal floats as a hero pane: layered hero elevation + a crisp specular
   top rim (replaces the flat static --shadow-modal). */
.modal{background:var(--modal-bg);border-radius:var(--radius-modal);width:780px;max-width:100%;position:relative;padding:0 0 24px;box-shadow:var(--shadow-e5),inset 0 1px 0 rgba(255,255,255,.22);animation:modalContentIn var(--motion-slow) var(--ease-out)}
/* V39h — Apple-style modal entrance: backdrop fades, content slides up+fades. */
@keyframes modalOverlayIn{from{opacity:0}to{opacity:1}}
@keyframes modalContentIn{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Modal header — V150 redesign: one crafted Apple pro-app header.
   --modal-accent is set by openCard() from project.color (falls back to
   --app-accent). The whole header rhythm hangs off it: label bar, icon tile,
   title focus, meta phase chip. */
.modal-label-bar{--modal-accent:var(--app-accent);border-radius:var(--radius-modal) var(--radius-modal) 0 0;width:100%;transition:height var(--motion-base) var(--ease-out);position:relative;overflow:hidden}
/* Specular sheen on the crisp color rail so it reads as a lit accent, not a stray strip. */
.modal-label-bar::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,0) 55%,rgba(0,0,0,.10));pointer-events:none}
.modal-title-wrap{display:flex;align-items:center;gap:11px;padding:15px 152px 6px 16px;min-height:30px}
/* Icon tile — a tinted rounded square carrying the project accent, not a bare glyph. */
.modal-title-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;color:var(--modal-accent,var(--app-accent));background:color-mix(in srgb,var(--modal-accent,var(--app-accent)) 15%,transparent);box-shadow:inset 0 0 0 0.5px color-mix(in srgb,var(--modal-accent,var(--app-accent)) 34%,transparent),inset 0 1px 0 rgba(255,255,255,.22);transition:background var(--motion-fast) var(--ease-out)}
.modal-title-icon svg{width:17px!important;height:17px!important}
/* V150 — display-weight project name (was 19/600). Commands the header. */
.modal-title{font-size:20px;font-weight:700;letter-spacing:-0.45px;line-height:1.2;color:var(--text-primary);border:none;background:transparent;resize:none;flex:1 1 auto;width:auto;min-width:0;outline:none;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,sans-serif;padding:2px 5px;border-radius:var(--radius-sm);min-height:26px;display:block;box-sizing:border-box;transition:background var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out)}
.modal-title::placeholder{color:var(--text-muted);font-weight:600}
.modal-title:hover{background:var(--hover-overlay)}
.modal-title:focus{background:var(--surface-2);box-shadow:0 0 0 2px color-mix(in srgb,var(--modal-accent,var(--app-accent)) 38%,transparent)}
/* V150 — close + Full Page: liquid-glass header chips, integrated into the rhythm. */
.modal-close{position:absolute;top:13px;right:13px;background:var(--lg-bg);backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract);border:0.5px solid var(--chrome-border);width:30px;height:30px;color:var(--text-secondary);cursor:pointer;border-radius:50%;line-height:1;display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--lg-edge),var(--shadow-e1);transition:background var(--motion-fast) var(--ease-out),color var(--motion-fast),transform var(--motion-fast) var(--ease-spring);z-index:2}
.modal-close:hover{background:var(--lg-bg-strong);color:var(--text-primary);box-shadow:var(--lg-edge),var(--shadow-e2)}
.modal-close:active{transform:scale(.9)}
@media (prefers-reduced-transparency:reduce){.modal-close{background:var(--surface-2);backdrop-filter:none;-webkit-backdrop-filter:none}.modal-close:hover{background:var(--surface-3)}}
/* Labeled "Full Page" pill — discoverable entry to the full-page project view */
.modal-fullpage-btn{position:absolute;top:15px;display:inline-flex;align-items:center;gap:5px;background:var(--lg-bg);backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract);border:0.5px solid var(--chrome-border);color:var(--text-secondary);font-size:11.5px;font-weight:600;font-family:inherit;cursor:pointer;padding:0 11px;height:28px;border-radius:var(--radius-pill);line-height:1;box-shadow:var(--lg-edge),var(--shadow-e1);transition:background var(--motion-fast) var(--ease-out),color var(--motion-fast),transform var(--motion-fast) var(--ease-spring);z-index:2}
.modal-fullpage-btn:hover{background:var(--lg-bg-strong);color:var(--text-primary);box-shadow:var(--lg-edge),var(--shadow-e2)}
.modal-fullpage-btn:active{transform:scale(.95)}
.modal-fullpage-btn svg{width:11px;height:11px;flex-shrink:0}
@media (prefers-reduced-transparency:reduce){.modal-fullpage-btn{background:var(--surface-2);backdrop-filter:none;-webkit-backdrop-filter:none}.modal-fullpage-btn:hover{background:var(--surface-3)}}
/* ── Meta chip row — V150 unified system ──
   One coherent metadata strip: every informational chip shares height (24px),
   radius (pill), padding, and weight. Tone is semantic (phase=phase color,
   priority=its warning tone, type=neutral). Report is an ACTION, toned apart. */
.modal-meta-row{display:flex;align-items:center;gap:7px;padding:8px 16px 11px;flex-wrap:wrap;border-bottom:0.5px solid var(--chrome-border);margin-bottom:2px}
.modal-meta-badge{font-size:11px;font-weight:600;color:var(--text-secondary);background:var(--surface-2);border:0.5px solid var(--chrome-border);border-radius:var(--radius-pill);padding:0 10px;height:24px;display:inline-flex;align-items:center;gap:5px;letter-spacing:.1px;line-height:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.modal-meta-badge .mm-ico{width:12px;height:12px;flex-shrink:0;opacity:.8}
.modal-meta-badge.mm-id{font-family:'SF Mono','Menlo',monospace;font-weight:600;letter-spacing:0;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 10%,transparent);border-color:color-mix(in srgb,var(--app-accent) 22%,transparent)}
.modal-meta-badge.mm-phase{font-weight:700}
.modal-meta-badge.mm-archived{background:color-mix(in srgb,#8e8e93 14%,transparent);color:var(--text-primary);border-color:color-mix(in srgb,#8e8e93 26%,transparent)}
/* Priority / risk / status chips in THIS row inherit the unified geometry so they
   sit flush with the meta badges (their semantic color still comes from their own class). */
.modal-meta-row .priority-badge,
.modal-meta-row .risk-badge,
.modal-meta-row .status-chip{height:24px;padding:0 10px;font-size:10.5px;display:inline-flex;align-items:center;line-height:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
/* Report = distinct action affordance: filled accent tint + chevron, separated by a hairline divider. */
.modal-report-link{text-decoration:none;cursor:pointer;font-weight:600;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 12%,transparent);border-color:color-mix(in srgb,var(--app-accent) 26%,transparent);margin-left:3px;transition:background var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.modal-report-link .mm-ico{opacity:1;color:var(--app-accent)}
.modal-report-link:hover{background:color-mix(in srgb,var(--app-accent) 20%,transparent);border-color:color-mix(in srgb,var(--app-accent) 40%,transparent);box-shadow:var(--shadow-e1)}
.modal-report-link:active{transform:scale(.95)}

/* ── Modal tabs — V150 liquid-glass segmented control with elegant scroll affordance ──
   The shell is a positioning context: it carries the glass container chrome,
   the edge-fade overlays (which only paint on the side that has more content,
   driven by data-scroll-l / data-scroll-r set by initTabScroll), and a slim
   always-visible scroll progress indicator. The inner .modal-tabs-wrap is the
   transparent horizontal scroller. This replaces the dead #tab-scroll-thumb
   that read the wrong element and had no base CSS. */
/* V134 — shell HUGS its tabs (width:fit-content) instead of stretching full-width with a big
   empty right side (Gavin). Apple segmented controls size to content. max-width:100% keeps it
   scroll-capable on narrow widths. */
/* 2026-06-03 — The quick-view modal is now ONE surface (no tabs): the Overview
   glance for existing projects, or the Details form for a brand-new project. The
   tab shell is hidden — switchTab still activates the right .tab-content by id, so
   Overview/Details show correctly without the tab bar. The full-page workspace uses
   its own #pfvSidebar nav (this shell was never used in full-page); Tasks/Notes/
   Photos surface as glance sections within the Overview. */
.modal-tabs-shell{display:none}
@media (prefers-reduced-transparency:reduce){.modal-tabs-shell{background:var(--surface-2);backdrop-filter:none;-webkit-backdrop-filter:none}}
/* Edge fades — soft feather + a hairline accent rim, only shown when scrollable
   in that direction. No mask-image (the mask clipped the active-tab glass + hit
   the iOS layer-promotion bug on mobile, see V25). Pure overlay = safe. */
/* Edge scroll-fade gradients removed (2026-05-25): they read as a bright band/
   highlight on each side on desktop/iPad. Scroll affordance is the wheel + drag. */
.modal-tabs-shell::before,.modal-tabs-shell::after{display:none}
.modal-tabs-wrap{display:flex;flex-direction:row;align-items:center;gap:1px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-x;background:transparent;border-radius:var(--radius-md);padding:3px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,sans-serif}
.modal-tabs-wrap{scrollbar-width:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.modal-tabs-wrap .modal-tab{-webkit-tap-highlight-color:transparent}
.modal-tabs-wrap::-webkit-scrollbar{height:0;width:0;display:none}
.modal-tabs-wrap::-webkit-scrollbar-track{background:transparent}
.modal-tabs-wrap::-webkit-scrollbar-thumb{background:transparent}
.modal-tabs{display:flex;flex-direction:row;align-items:center;gap:3px;flex-shrink:0;flex-wrap:nowrap;background:transparent;border-radius:0;padding:0;margin:0}
.modal-tab{background:transparent;border:none;padding:6px 11px;font-size:12px;font-weight:600;letter-spacing:-.1px;color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm);transition:background var(--motion-fast) var(--ease-out),color var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast) var(--ease-spring);white-space:nowrap;position:relative;flex-shrink:0;font-family:inherit;display:inline-flex;align-items:center;gap:5px}
.modal-tab-ico{width:13px;height:13px;flex-shrink:0;opacity:.7}
.modal-tab.active .modal-tab-ico{opacity:1}
/* Slim always-on scroll progress indicator (replaces dead #tab-scroll-thumb).
   Pinned to the shell bottom edge; the thumb width/position is driven by JS
   from the wrap's real scroll metrics. Hidden when nothing overflows. */
/* Tab scroll track removed (2026-05-25): it was a non-interactive decorative
   progress bar. Scrolling is via mouse wheel (desktop) + touch drag (iPad/mobile),
   both wired in initHorizontalWheelScroll's attach(). */
.tab-scroll-track{display:none !important}
.tab-scroll-thumb{position:absolute;top:0;height:100%;border-radius:2px;background:color-mix(in srgb,var(--modal-accent,var(--app-accent)) 70%,transparent);box-shadow:0 0 6px color-mix(in srgb,var(--modal-accent,var(--app-accent)) 40%,transparent);min-width:18px;transition:opacity var(--motion-fast) var(--ease-out)}
/* V102 — Modal Overview hero + intel grid */
/* V134 — hero reworked into a clean, aligned stat strip (Gavin: the health ring + metrics row
   was loosely placed, and an empty Contract Value rendered as a lone floating "—"). Now: ring +
   a metric group with even gaps + hairline dividers between stats, all top-aligned, status line
   beneath. Reads as one composed header, not scattered numbers. */
.mov-hero{display:flex;align-items:center;gap:16px;padding:12px 2px 14px}
.pfv-ov-hero{padding:14px 4px 16px;margin-bottom:4px;border-bottom:0.5px solid var(--chrome-border)}
.mov-hero-ring{width:64px;height:64px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.mov-hero-ring-inner{width:50px;height:50px;border-radius:50%;background:var(--card-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.mov-hero-score{font-size:20px;font-weight:800;letter-spacing:-1px;color:var(--text-primary);line-height:1;font-variant-numeric:tabular-nums}
.mov-hero-score-lbl{font-size:8px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text-muted)}
.mov-hero-main{flex:1;min-width:0}
.mov-hero-metrics{display:flex;flex-wrap:wrap;align-items:stretch;gap:0}
.mov-hero-metrics .mov-metric{display:flex;flex-direction:column;justify-content:flex-start;padding:0 16px;position:relative}
.mov-hero-metrics .mov-metric:first-child{padding-left:0}
.mov-hero-metrics .mov-metric + .mov-metric::before{content:'';position:absolute;left:0;top:2px;bottom:2px;width:1px;background:color-mix(in srgb,var(--text-primary) 10%,transparent)}
.mov-metric-val{font-size:19px;font-weight:800;letter-spacing:-.5px;color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1.1;white-space:nowrap}
.mov-metric-val.is-empty{color:var(--text-muted);font-weight:600}
.mov-metric-lbl{font-size:9.5px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--text-muted);margin-top:3px;white-space:nowrap}
/* V111 — hero metrics are drill-throughs to their tab. V134 — hover wash inset within the
   metric's own padding (no negative margin that would break the divider rhythm). */
.mov-hero-metrics .mov-metric-link{cursor:pointer;border-radius:var(--radius-sm);transition:background var(--motion-fast) var(--ease-out)}
.mov-hero-metrics .mov-metric-link:hover{background:color-mix(in srgb,var(--app-accent) 9%,transparent)}
.mov-hero-metrics .mov-metric-link:active{transform:scale(.97)}
.mov-hero-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;margin-top:10px}
.mov-hero-dot{width:8px;height:8px;border-radius:50%}
.mov-hero-why{font-weight:600;color:var(--text-muted);cursor:pointer;text-decoration:none;border-bottom:1px dotted color-mix(in srgb,var(--text-muted) 50%,transparent)}
.mov-hero-why:hover{color:var(--app-accent);border-bottom-color:var(--app-accent)}
.mov-hero-ring-btn{cursor:pointer;transition:transform var(--motion-fast) var(--ease-out)}
.mov-hero-ring-btn:hover{transform:scale(1.04)}
/* 2026-06-03 — Commanding modal hero band. ONE premium beveled surface (the focal
   moment): a phase-tinted gradient pane carrying the health ring + display-weight
   metrics (engraved, each a door to Full Page) + a clear status line. Replaces the
   old flat top-left .mov-hero cluster. Real tokens, phase color, Macintosh bevel. */
.mov-bhero{display:flex;align-items:center;gap:18px;padding:16px 18px;margin:2px 0 14px;border-radius:var(--radius-lg);
  background:linear-gradient(180deg,color-mix(in srgb,var(--mov-phase,var(--app-accent)) 9%,var(--surface)),color-mix(in srgb,var(--mov-phase,var(--app-accent)) 4%,var(--surface)));
  box-shadow:var(--bevel-top),var(--shadow-e2),inset 0 0 0 0.5px color-mix(in srgb,var(--mov-phase,var(--app-accent)) 16%,transparent)}
.mov-bhero-ring{width:72px;height:72px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-e1),inset 0 1px 0 rgba(255,255,255,.22)}
.mov-bhero-ring-inner{width:56px;height:56px;border-radius:50%;background:var(--card-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--text-primary) 8%,transparent)}
.mov-bhero-score{font-size:23px;font-weight:800;letter-spacing:-1px;color:var(--text-primary);line-height:1;font-variant-numeric:tabular-nums}
.mov-bhero-score-lbl{font-size:8px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);margin-top:1px}
.mov-bhero-ring-btn{cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring)}
.mov-bhero-ring-btn:hover{transform:scale(1.04)}
.mov-bhero-ring-btn:active{transform:scale(.97)}
.mov-bhero-main{flex:1;min-width:0}
.mov-bhero-metrics{display:flex;flex-wrap:wrap;align-items:stretch;gap:0}
.mov-bhero-metric{display:flex;flex-direction:column;justify-content:flex-start;padding:0 18px;position:relative}
.mov-bhero-metric:first-child{padding-left:0}
.mov-bhero-metric + .mov-bhero-metric::before{content:'';position:absolute;left:0;top:3px;bottom:3px;width:1px;background:color-mix(in srgb,var(--text-primary) 11%,transparent)}
.mov-bhero-val{font-size:22px;font-weight:800;letter-spacing:-.6px;color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1.05;white-space:nowrap}
.mov-bhero-metric.is-empty .mov-bhero-val{color:var(--text-muted);font-weight:600}
.mov-bhero-lbl{font-size:9.5px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--text-muted);margin-top:4px;white-space:nowrap}
.mov-bhero-metric-link{cursor:pointer;border-radius:var(--radius-sm);margin:-4px -6px;padding:4px 12px;transition:background var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-spring)}
.mov-bhero-metric-link:first-child{padding-left:6px;margin-left:-6px}
.mov-bhero-metric-link:hover{background:color-mix(in srgb,var(--mov-phase,var(--app-accent)) 10%,transparent)}
.mov-bhero-metric-link:active{transform:scale(.96)}
.mov-bhero-status{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;margin-top:12px}
.mov-bhero-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 16%,transparent)}
.mov-bhero-why{font-weight:600;color:var(--text-muted);cursor:pointer;border-bottom:1px dotted color-mix(in srgb,var(--text-muted) 50%,transparent)}
.mov-bhero-why:hover{color:var(--app-accent);border-bottom-color:var(--app-accent)}
@media (prefers-reduced-motion:reduce){.mov-bhero-ring-btn,.mov-bhero-metric-link{transition:background var(--motion-fast)}.mov-bhero-ring-btn:active,.mov-bhero-metric-link:active{transform:none}}
@media (max-width:640px){.mov-bhero{flex-wrap:wrap;gap:14px;padding:14px}.mov-bhero-metrics{gap:0}}
.mov-hero-ring-btn:active{transform:scale(.97)}
/* V117 — health diagnostic diagram */
.health-diagram{margin:2px 2px 14px;padding:12px 14px;border-radius:var(--radius-group);background:color-mix(in srgb,var(--text-primary) 3.5%,transparent);border:0.5px solid var(--chrome-border);animation:hd-in var(--motion-base) var(--ease-out)}
@keyframes hd-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.hd-bar-head{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);margin-bottom:8px}
.hd-bar-total{font-size:13px;font-weight:800;color:var(--text-primary);letter-spacing:-.3px;text-transform:none;font-variant-numeric:tabular-nums}
.hd-bar{display:flex;gap:3px;height:14px;margin-bottom:12px}
.hd-seg{position:relative;border-radius:4px;background:color-mix(in srgb,var(--text-primary) 9%,transparent);overflow:hidden}
.hd-seg-fill{position:absolute;left:0;top:0;height:100%;border-radius:4px;transition:width var(--motion-slow) var(--ease-spring)}
.hd-rows{display:flex;flex-direction:column;gap:1px}
.hd-row{display:flex;align-items:center;gap:9px;width:100%;background:none;border:none;font:inherit;cursor:pointer;padding:7px 6px;border-radius:var(--radius-sm);text-align:left;transition:background var(--motion-fast) var(--ease-out)}
.hd-row:hover{background:color-mix(in srgb,var(--app-accent) 7%,transparent)}
/* V151 — connected-records rail on Details (Salesforce Record-Home pattern). Floating panel,
   drill rows reuse the .hd-row anatomy. Rounded hover, no edge-strip. */
.cr-panel{margin:0 0 14px;padding:12px 14px}
.cr-head{display:flex;align-items:center;gap:7px;font:800 11px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:8px}
.cr-head svg{width:13px;height:13px}
.cr-rail{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px}
.cr-row{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;font:inherit;cursor:pointer;padding:9px 10px;border-radius:10px;text-align:left;transition:background var(--motion-fast) var(--ease-out)}
.cr-row:hover{background:color-mix(in srgb,var(--app-accent) 8%,transparent)}
.cr-ico{flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--app-accent) 10%,transparent);color:var(--app-accent)}
.cr-ico svg{width:14px;height:14px}
.cr-label{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-count{font-size:13px;font-weight:800;color:var(--text-primary);background:color-mix(in srgb,var(--text-primary) 7%,transparent);padding:1px 9px;border-radius:999px}
.cr-chev{width:14px;height:14px;color:var(--text-muted);flex:0 0 auto}
/* V151 — custom fields on Details + the admin manager modal. */
.cf-req{color:var(--color-error,#ef4444)}
.cf-grouphead{font:800 11px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin:6px 0 2px}
.cf-check{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;cursor:pointer}
.cf-field-check{align-self:end}
.cfm-list{display:flex;flex-direction:column;gap:3px;margin-bottom:18px}
.cfm-row{display:grid;grid-template-columns:1fr 92px 1fr 70px auto auto;align-items:center;gap:10px;padding:10px;border-radius:11px;font-size:13px;transition:background var(--motion-fast,.15s) var(--ease-out,ease),box-shadow var(--motion-fast,.15s)}
.cfm-row:hover{background:color-mix(in srgb,var(--app-accent) 6%,transparent);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--app-accent) 14%,transparent)}
.cfm-label{font-weight:700;letter-spacing:-.005em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfm-type-pill{justify-self:start;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 12%,transparent);padding:3px 9px;border-radius:999px}
.cfm-grp,.cfm-req{font-size:12px;color:var(--text-muted);font-weight:600}
.cfm-row .btn-xs{opacity:.55;transition:opacity var(--motion-fast,.15s)}
.cfm-row:hover .btn-xs{opacity:1}
@media (hover:none){.cfm-row .btn-xs{opacity:1}}
.cfm-del{color:var(--color-error,#ef4444)}
.cfm-add{border-top:.5px solid var(--chrome-border);padding-top:16px;margin-top:4px}
.cfm-add-title{font:800 11px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:11px}
.cfm-add-grid{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.cfm-add-grid .field-input{flex:1;min-width:150px;border-radius:11px}
.cfm-add-grid .cf-check{white-space:nowrap}
@media (max-width:640px){.cfm-row{grid-template-columns:1fr auto;row-gap:4px}.cfm-row .cfm-grp,.cfm-row .cfm-req{display:none}.cfm-add-grid .field-input{flex:1 1 100%}}
/* V151 — closeout readiness gate on the Overview (reads project.closeout). Conic ring + pending list. */
.cog{display:flex;align-items:center;gap:16px;cursor:pointer;padding:4px 2px;flex-wrap:wrap}
.cog-ring{flex:0 0 auto;width:64px;height:64px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--app-accent) calc(var(--cog-pct)*1%),color-mix(in srgb,var(--text-primary) 10%,transparent) 0);position:relative}
.cog-ring::after{content:"";position:absolute;inset:6px;border-radius:999px;background:var(--card-bg,#fff)}
.cog-ring>span{position:relative;z-index:1;font:800 17px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:var(--text-primary)}
.cog-ring>span small{font-size:11px;font-weight:700;color:var(--text-muted)}
.cog-ring.cog-ready{background:conic-gradient(var(--color-success,#10b981) 100%,var(--color-success,#10b981) 0)}
.cog-body{flex:1;min-width:200px}
.cog-title{font:700 14px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:var(--text-primary);margin-bottom:7px}
.cog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:3px 12px}
.cog-item{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-secondary)}
.cog-item.cog-on{color:var(--text-muted)}
.cog-ck{width:15px;height:15px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--color-success,#10b981)}
.cog-item.cog-on .cog-ck{background:color-mix(in srgb,var(--color-success,#10b981) 16%,transparent)}
.cog-ck svg{width:9px;height:9px}
.cog-more{font-size:12px;color:var(--text-muted);font-weight:600}
.cog-foot{flex:0 0 auto;align-self:center}
.cog-remain{font-size:12.5px;font-weight:700;color:var(--color-warning,#f59e0b)}
.cog-action{font-size:13px;padding:8px 14px}
.hd-row:active{transform:scale(.99)}
.hd-row-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.hd-row-label{font-size:13px;font-weight:600;color:var(--text-primary);flex-shrink:0}
.hd-row-detail{font-size:11.5px;color:var(--text-muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hd-row-pts{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.hd-row-max{font-size:10.5px;font-weight:600;color:var(--text-muted)}
.hd-row-chev{color:var(--text-muted);opacity:.5;flex-shrink:0}
/* U3 — phase stepper: horizontal-scroll (hidden scrollbar like .modal-tabs-wrap),
   fixed step widths + ellipsis labels so phases NEVER overlap at any width.
   On narrow widths it scrolls; the current phase is emphasized. */
.mov-stepper{display:flex;align-items:flex-start;gap:0;padding:12px 4px 16px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-x;scrollbar-width:none;-ms-overflow-style:none;border-bottom:0.5px solid var(--chrome-border);margin-bottom:14px}
.mov-stepper::-webkit-scrollbar{height:0;width:0;display:none}
.mov-step{display:flex;flex-direction:column;align-items:center;gap:5px;width:72px;min-width:72px;flex:0 0 72px;text-align:center}
.mov-step-dot{width:18px;height:18px;border-radius:50%;flex-shrink:0;background:color-mix(in srgb,var(--text-primary) 12%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--text-primary) 14%,transparent);transition:all var(--motion-base) var(--ease-out)}
/* Item 7 (2026-05-25) — wider + no mid-word hyphenation so phase names read
   cleanly ("Pre-Construction" wraps on the hyphen / space, not "Pre-Construc-tion").
   Widened 72→92px, clamp bumped to 3 lines, hyphens off, break on normal word
   boundaries. The full label is always available via the title= tooltip. */
.mov-step-label{font-size:9.5px;font-weight:500;line-height:1.2;color:color-mix(in srgb,var(--text-primary) 58%,transparent);width:100%;max-width:92px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;overflow-wrap:break-word;hyphens:manual}
.mov-step.done .mov-step-label{color:color-mix(in srgb,var(--text-primary) 78%,transparent);font-weight:600}
.mov-step.current .mov-step-label{color:var(--text-primary);font-weight:700}
.mov-step-bar{flex:0 0 auto;width:14px;height:2.5px;background:var(--chrome-border);margin-top:8px;border-radius:2px;align-self:flex-start}
/* compact: on phones, slim the steps + bar so more phases fit before scroll */
@media (max-width:640px){
  .mov-step{width:76px;min-width:76px;flex:0 0 76px}
  .mov-step-label{max-width:76px;font-size:9px}
  .mov-step-bar{width:8px}
}
.mov-qa{margin-bottom:14px}
/* G8 — responsive auto-fill so the modal Overview uses iPad/desktop width instead
   of leaving dead space below a narrow 2-col grid. Cards flow into as many columns
   as fit (min 240px each); a card can span 2 via .mov-widget-wide. */
/* V134 — masonry via CSS columns (Gavin: the grid stranded tall voids when a short card paired
   with a tall one — e.g. Financials 154px beside To-Do 269px left a 115px hole). Columns flow
   cards top→bottom filling each column with NO row-pairing voids; cards size to content. No wide
   cards are rendered, so the columns model is safe. column-width drives the responsive count
   (2-up in the modal, 3-4-up in the wider full-page). */
.mov-grid{column-width:240px;column-gap:12px;column-fill:balance}
.mov-widget{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;margin:0 0 12px}
.mov-widget-wide{column-span:all}
@media (max-width:640px){.mov-grid{column-width:auto;column-count:1}.mov-hero{flex-wrap:wrap}}
.mov-widget{background:var(--surface-grad);border:none;border-radius:var(--radius-lg);padding:13px 14px;box-shadow:var(--bevel-top),var(--shadow-e2);transition:box-shadow var(--motion-base) var(--ease-out)}
.mov-widget:hover{box-shadow:var(--shadow-e2)}
.mov-widget-title{font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--text-primary);margin-bottom:9px;display:flex;align-items:center;gap:6px}
.mov-widget-title svg{width:13px;height:13px;color:var(--app-accent)}
.mov-widget-body{font-size:12px;color:var(--text-primary)}
/* 2026-06-03 — Modal Overview guided-surface recompose. The kept widgets render
   inside authored ov-card sections (gradient+bevel+e2, reused from full-page) with
   the ov-sh titled header — replacing the old mov-grid box-soup. mov-sec-body just
   sets the content type scale inside an ov-card. */
.mov-sec-body{font-size:12px;color:var(--text-primary)}
.mov-sec-body .pfv-ov-row,.mov-sec-body .pfv-ov-empty{font-size:12px}
/* The workspace door — the modal is the glance; deep work happens in Full Page.
   A confident full-width premium row (not a quiet link): gradient surface, bevel,
   accent-led, presses on tap. Leads the user to the real workspace. */
.mov-fp-door{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  margin-top:2px;padding:13px 15px;border:none;border-radius:var(--radius-lg);cursor:pointer;
  font-family:inherit;text-align:left;
  background:linear-gradient(180deg,color-mix(in srgb,var(--app-accent) 12%,var(--surface)),color-mix(in srgb,var(--app-accent) 7%,var(--surface)));
  box-shadow:var(--bevel-top),var(--shadow-e1),inset 0 0 0 0.5px color-mix(in srgb,var(--app-accent) 22%,transparent);
  transition:box-shadow var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-spring),background var(--motion-fast)}
.mov-fp-door:hover{box-shadow:var(--bevel-top),var(--shadow-e2),inset 0 0 0 0.5px color-mix(in srgb,var(--app-accent) 34%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--app-accent) 16%,var(--surface)),color-mix(in srgb,var(--app-accent) 9%,var(--surface)))}
.mov-fp-door:active{transform:scale(.985)}
.mov-fp-door-main{display:flex;align-items:center;gap:11px;min-width:0}
.mov-fp-door-ico{width:18px;height:18px;flex:0 0 auto;color:var(--app-accent)}
.mov-fp-door-main > span{display:flex;flex-direction:column;gap:1px;min-width:0}
.mov-fp-door-main b{font-size:13.5px;font-weight:700;letter-spacing:-.2px;color:var(--text-primary)}
.mov-fp-door-sub{font-size:11px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mov-fp-door-chev{width:14px;height:14px;flex:0 0 auto;color:var(--app-accent);opacity:.7}
@media (prefers-reduced-motion:reduce){.mov-fp-door{transition:box-shadow var(--motion-fast)}.mov-fp-door:active{transform:none}}
/* P2.9 — Linked To-Dos panel on the project Overview */
.mlt-count{margin-left:auto;font-size:11px;font-weight:700;color:var(--text-secondary);background:color-mix(in srgb,var(--app-accent) 12%,transparent);padding:1px 7px;border-radius:var(--radius-pill)}
.mlt-list{display:flex;flex-direction:column;gap:2px}
.mlt-row{display:flex;align-items:center;gap:8px;padding:5px 2px;border-bottom:0.5px solid color-mix(in srgb,var(--chrome-border) 50%,transparent)}
.mlt-row:last-child{border-bottom:none}
.mlt-check{flex:0 0 auto;width:13px;height:13px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--text-muted) 60%,transparent)}
.mlt-check.is-done{background:var(--color-success);border-color:var(--color-success)}
.mlt-text{flex:1;min-width:0;font-size:12.5px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mlt-text.is-done{color:var(--text-muted);text-decoration:line-through}
.mlt-flag{color:var(--color-warning);font-size:11px;flex:0 0 auto;display:inline-flex}
.mlt-flag-ico{width:12px;height:12px;stroke:currentColor;fill:none}
.mlt-due{flex:0 0 auto;font-size:11px;font-weight:600;color:var(--text-secondary)}
.mlt-due.is-overdue{color:var(--color-error)}
.mlt-open{margin-top:8px;background:none;border:0;color:var(--app-accent);font-size:12px;font-weight:600;cursor:pointer;padding:2px 0;font-family:inherit}
.mlt-open:hover{text-decoration:underline}
/* D5 — full-page Linked to-dos zone: loading + empty lines (zone provides the head) */
.mlt-empty-load,.mlt-empty{font-size:12.5px;color:var(--text-muted);padding:2px 0}
/* G8 — Key Dates widget rows */
.mov-kd-rows{display:flex;flex-direction:column;gap:6px}
.mov-kd-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.mov-kd-lbl{font-size:11.5px;color:var(--text-secondary)}
.mov-kd-val{font-size:12.5px;font-weight:600;color:var(--text-primary);font-variant-numeric:tabular-nums}
/* P5 — Linked Notes deep panel (full-page Overview only). */
.mov-ln{margin-top:14px}
.mov-ln-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.mov-ln-head .dl-deep-title svg{color:var(--app-accent)}
.mov-ln-new{display:inline-flex;align-items:center;gap:5px;background:transparent;border:0.5px solid var(--chrome-border);border-radius:var(--radius-pill);padding:5px 11px;font-family:inherit;font-size:12px;font-weight:600;color:var(--app-accent);cursor:pointer;transition:background var(--motion-fast),transform var(--motion-fast),box-shadow var(--motion-fast)}
.mov-ln-new svg{width:12px;height:12px}
.mov-ln-new:hover{background:color-mix(in srgb,var(--app-accent) 10%,transparent);box-shadow:var(--shadow-e1)}
.mov-ln-new:active{transform:scale(.97)}
.mov-ln-list{display:flex;flex-direction:column;gap:6px}
.mov-ln-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);padding:9px 12px;font-family:inherit;cursor:pointer;box-shadow:var(--shadow-e1);transition:box-shadow var(--motion-base) var(--ease-out),transform var(--motion-fast) var(--ease-out)}
.mov-ln-row:hover{box-shadow:var(--shadow-e2);transform:translateY(-1px)}
.mov-ln-row:active{transform:scale(.99)}
.mov-ln-dot{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:0 0 auto;border-radius:8px;background:color-mix(in srgb,var(--dot,var(--app-accent)) 16%,transparent);color:var(--dot,var(--app-accent));box-shadow:inset 0 0 0 0.5px color-mix(in srgb,var(--dot,var(--app-accent)) 40%,transparent)}
.mov-ln-dot svg{width:13px;height:13px}
.mov-ln-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.mov-ln-title{font-size:13.5px;font-weight:600;color:var(--text-primary);letter-spacing:-.1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mov-ln-snip{font-size:12px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* O1 — sub-labels for a note linked to a specific task/log in THIS project. */
.mov-ln-subs{display:flex;flex-wrap:wrap;gap:5px;margin-top:1px}
.mov-ln-sub{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--app-accent);letter-spacing:-.1px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mov-ln-sub svg{width:10px;height:10px;flex:0 0 auto;color:var(--app-accent)}
.mov-ln-date{font-size:11.5px;color:var(--text-muted);flex:0 0 auto;font-variant-numeric:tabular-nums}
.mov-ln-empty{font-size:12.5px;color:var(--text-muted);padding:10px 2px}
/* V39uu — theme-aware hover (was hardcoded grey rgba(120,120,128,.10)) */
.modal-tab:not(.active):hover{background:color-mix(in srgb, var(--text-primary) 9%, transparent);color:var(--text-primary)}
.modal-tab:active:not(.active){transform:scale(.94)}
/* Active tab — a lifted solid card with a specular rim + accent underglow,
   so the selection reads as a real pressed segment in the glass control. */
/* V134 — active modal tab uses the BRAND accent (--app-accent), matching the main-page nav pill
   exactly (Gavin: the modal tab highlight was a different — peach — color because it keyed off
   --modal-accent = the project's color, while the nav keys off --app-accent). Same selection
   language across both surfaces now. */
.modal-tab.active{background:linear-gradient(to bottom, color-mix(in srgb,var(--app-accent) 14%,var(--card-bg)), var(--card-bg));box-shadow:var(--shadow-e2),inset 0 1px 0 rgba(255,255,255,.4),0 0 0 0.5px color-mix(in srgb,var(--app-accent) 18%,transparent);color:var(--text-primary);font-weight:700}
.modal-tab.active .modal-tab-ico{color:var(--app-accent)}
/* "More" button removed — kept hidden in case any code still references it */
/* "More ▾" toggle for the quick-view modal — opens the non-quick tabs popover.
   (Was display:none when the overflow split was defunct; re-enabled for quick-view.) */
.tab-more-btn{display:inline-flex;align-items:center;gap:3px}
.tab-more-btn .vb-more-chev{opacity:.6;transition:transform var(--motion-fast) var(--ease-out)}
.tab-more-btn[aria-expanded="true"] .vb-more-chev{transform:rotate(180deg)}
/* Overflow row — flattened into the same horizontal scroll bar. V29a (2026-05-17 cont. 14):
   removed desktop-only .tab-overflow-row .modal-tab overrides that gave the overflow tabs
   a different background/active-state than the inner .modal-tabs row. Both rows now share
   the base .modal-tab styling for visual consistency in the same horizontal strip. */
/* Quick-view: non-quick tabs are PARKED here (off-screen) so switchTab's active
   toggle still finds their buttons; they're surfaced via the "More ▾" popover,
   not shown inline. (Was a visible inline flex row in the old overflow design.) */
.tab-overflow-row{display:none}
/* Task 6 — modal-tab reorder (edit mode). Pencil affordance pinned at the end of
   the horizontal tab strip; flex:0 0 auto keeps it from stretching. */
.modal-tab-edit-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-left:4px;padding:0;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
.modal-tab-edit-btn:hover{background:color-mix(in srgb, var(--text-primary) 10%, transparent);color:var(--text-primary)}
.modal-tab-edit-btn.active{background:var(--modal-accent,var(--app-accent));color:var(--on-accent,#fff);box-shadow:var(--shadow-e1)}
.modal-tab-edit-btn svg{width:15px;height:15px;display:block}
.modal-tabs-editing .modal-tab[data-tab]{background:color-mix(in srgb, var(--text-primary) 6%, transparent)}
.modal-tabs-editing .modal-tab[data-tab]{cursor:grab}
.modal-tab-grip{width:11px;height:11px;margin-right:5px;vertical-align:middle;color:var(--text-muted);cursor:grab;touch-action:none}
/* Red dot badge — replaces numeric text badge */
.tab-badge{display:none}
.tab-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--app-danger);box-shadow:0 0 0 1.5px color-mix(in srgb,var(--card-bg) 60%,transparent),0 0 5px color-mix(in srgb,var(--app-danger) 55%,transparent);margin-left:5px;vertical-align:middle;margin-bottom:1px;flex-shrink:0}
.tab-dot.hidden{display:none}

/* ── Full-Page Project View (H36) ── */
.pfv{position:fixed;inset:0;top:var(--header-h);background:var(--app-bg,var(--surface-1));z-index:50;display:flex;flex-direction:column;overflow:hidden}
.pfv.hidden{display:none}
/* pass-3 (2026-06-07): NO breadcrumb bar — banner sits directly under the nav; exit via top nav tabs. */
.pfv-backbar{display:none}
.pfv-back-btn{display:inline-flex;align-items:center;gap:4px;background:transparent;border:none;color:var(--app-accent);font-size:12px;font-family:inherit;cursor:pointer;transition:transform var(--motion-fast);padding:2px 4px;border-radius:var(--radius-sm)}
.pfv-back-btn:hover{background:var(--chrome-bg-hover)}
.pfv-back-btn:active{transform:scale(.96)}
.pfv-crumb-sep{color:var(--text-muted)}
.pfv-crumb-project{color:var(--text-primary);font-weight:600;letter-spacing:-.1px}
.pfv-as-modal-btn{margin-left:auto;display:inline-flex;align-items:center;gap:4px;background:var(--card-bg);border:0.5px solid var(--chrome-border);color:var(--text-secondary);font-size:11px;font-family:inherit;cursor:pointer;transition:transform var(--motion-fast);padding:3px 9px;border-radius:var(--radius-sm)}
.pfv-as-modal-btn:hover{background:var(--chrome-bg-hover);color:var(--text-primary)}
.pfv-as-modal-btn:active{transform:scale(.96)}
.pfv-hero{flex-shrink:0}
/* 2026-06-02 — ALL-IN shell. The old fat green banner (.pfv-hero-band) + the
   separate numbered stepper (.pfv-timeline) are replaced by ONE persistent
   frosted command bar that reads on every tab and folds identity + phase
   journey + vitals + presence + actions into a single glass strip. */
.pfv-timeline{display:none}            /* stepper folded into the command bar */
.pfv-cmd{position:relative;display:flex;align-items:center;gap:16px;padding:11px 22px;flex-shrink:0;
  background:var(--frost-bg-strong);backdrop-filter:var(--frost-blur);-webkit-backdrop-filter:var(--frost-blur);
  border-bottom:0.5px solid var(--chrome-border);box-shadow:var(--bevel-top),0 1px 0 color-mix(in srgb,var(--cmd-phase,var(--app-accent)) 10%,transparent),var(--shadow-e1);overflow:hidden}
.pfv-cmd::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;pointer-events:none;
  background:linear-gradient(180deg,var(--cmd-phase,var(--app-accent)),color-mix(in srgb,var(--cmd-phase,var(--app-accent)) 55%,transparent));opacity:0}
.pfv-cmd::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 140% at 0% -20%,color-mix(in srgb,var(--cmd-phase,var(--app-accent)) 9%,transparent),transparent 58%)}
/* identity cluster */
.pfv-cmd-id{display:flex;align-items:center;gap:11px;min-width:0;position:relative;z-index:1}
.pfv-cmd-tile{width:38px;height:38px;border-radius:var(--radius-md);flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,color-mix(in srgb,var(--cmd-phase,var(--app-accent)) 88%,#fff),var(--cmd-phase,var(--app-accent)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 0 .5px rgba(255,255,255,.2),0 2px 6px color-mix(in srgb,var(--cmd-phase,var(--app-accent)) 38%,transparent)}
.pfv-cmd-tile svg{width:19px;height:19px;color:#fff;filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}
.pfv-cmd-name{font-family:"SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,sans-serif;font-size:17px;font-weight:700;letter-spacing:-.35px;color:var(--text-primary);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.pfv-cmd-sub{font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px;margin-top:1px}
.pfv-cmd-phasepill{display:inline-flex;align-items:center;gap:5px;margin-top:3px;padding:2px 9px 2px 7px;border-radius:var(--radius-pill);font-size:10.5px;font-weight:700;letter-spacing:.1px;
  background:color-mix(in srgb,var(--cmd-phase,var(--app-accent)) 15%,var(--card-bg));color:color-mix(in srgb,var(--cmd-phase,var(--app-accent)) 72%,var(--text-primary));box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--cmd-phase,var(--app-accent)) 30%,transparent)}
.pfv-cmd-phasedot{width:6px;height:6px;border-radius:50%;background:var(--cmd-phase,var(--app-accent));box-shadow:0 0 5px color-mix(in srgb,var(--cmd-phase,var(--app-accent)) 70%,transparent)}
/* inline phase journey — a continuous phase-colored progress meter (replaces the stepper) */
.pfv-cmd-journey{display:flex;align-items:center;gap:11px;flex:1;min-width:120px;max-width:520px;overflow:hidden;position:relative;z-index:1;cursor:pointer;border-radius:var(--radius-md);padding:5px 9px;margin:0 4px;transition:background var(--motion-fast) var(--ease-out)}
.pfv-cmd-journey:hover{background:var(--chrome-bg-hover)}
.pfv-cj-meta{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;line-height:1.1}
.pfv-cj-meta-lbl{font-size:8.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted)}
.pfv-cj-meta-count{font-size:12.5px;font-weight:800;letter-spacing:-.2px;color:var(--text-primary);font-variant-numeric:tabular-nums}
.pfv-cj-track{position:relative;flex:1;min-width:60px;height:9px;border-radius:var(--radius-pill);display:flex;gap:1.5px;padding:0;overflow:visible;
  background:color-mix(in srgb,var(--text-primary) 7%,transparent);box-shadow:inset 0 1px 2px color-mix(in srgb,var(--text-primary) 10%,transparent)}
.pfv-cj-fill{flex:1;min-width:2px;border-radius:2px;transition:background var(--motion-base) var(--ease-out)}
.pfv-cj-fill:first-child{border-top-left-radius:var(--radius-pill);border-bottom-left-radius:var(--radius-pill)}
.pfv-cj-fill:last-child{border-top-right-radius:var(--radius-pill);border-bottom-right-radius:var(--radius-pill)}
.pfv-cj-fill.done{background:linear-gradient(180deg,color-mix(in srgb,var(--cj-c,var(--color-success)) 78%,#fff),var(--cj-c,var(--color-success)));box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.pfv-cj-fill.current{background:linear-gradient(180deg,color-mix(in srgb,var(--cj-c,var(--app-accent)) 70%,#fff),var(--cj-c,var(--app-accent)));box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 7px color-mix(in srgb,var(--cj-c,var(--app-accent)) 55%,transparent)}
.pfv-cj-fill.todo{background:color-mix(in srgb,var(--text-primary) 11%,transparent)}
.pfv-cj-pip{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle at 50% 35%,#fff,color-mix(in srgb,var(--cj-c,var(--app-accent)) 30%,#fff) 60%,var(--cj-c,var(--app-accent)));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--cj-c,var(--app-accent)) 70%,transparent),0 1px 4px color-mix(in srgb,var(--cj-c,var(--app-accent)) 55%,transparent)}
.pfv-cj-pip::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--cj-c,var(--app-accent)) 45%,transparent);animation:cjPulse 2.4s var(--ease-out) infinite}
@keyframes cjPulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(2);opacity:0}100%{opacity:0}}
.pfv-cj-now{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;max-width:140px}
.pfv-cj-now-lbl{font-size:8.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted)}
.pfv-cj-now-val{font-size:12.5px;font-weight:700;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
/* vitals + presence + actions cluster */
.pfv-cmd-end{display:flex;align-items:center;gap:14px;margin-left:auto;flex-shrink:0;position:relative;z-index:1}
.pfv-cmd-vitals{display:flex;align-items:center;gap:14px}
.pfv-cmd-vital{display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer;border-radius:var(--radius-sm);padding:3px 4px;transition:background var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-spring)}
.pfv-cmd-vital:hover{background:var(--chrome-bg-hover)}
.pfv-cmd-vital:active{transform:scale(.94)}
.pfv-cmd-vital-val{font-size:16px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums;line-height:1}
.pfv-cmd-vital-lbl{font-size:8.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text-muted)}
.pfv-cmd-sep{width:0.5px;align-self:stretch;background:var(--chrome-border);margin:4px 0}
.pfv-cmd-presence{display:flex;align-items:center}
.pfv-cmd-av{width:26px;height:26px;border-radius:50%;margin-left:-7px;border:2px solid var(--frost-bg-strong);background:var(--surface-2);display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--text-secondary);box-shadow:var(--shadow-e1);overflow:hidden}
.pfv-cmd-av:first-child{margin-left:0}
.pfv-cmd-av img{width:100%;height:100%;object-fit:cover}
.pfv-cmd-av-more{background:var(--chrome-bg);color:var(--text-secondary);font-size:9.5px}
.pfv-cmd-actions{display:flex;align-items:center;gap:7px}
.pfv-cmd-act{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius-sm);cursor:pointer;border:none;
  background:var(--surface-2);color:var(--text-secondary);box-shadow:var(--bevel-top),var(--shadow-e1);transition:transform var(--motion-fast) var(--ease-spring),background var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out)}
.pfv-cmd-act svg{width:15px;height:15px}
.pfv-cmd-act:hover{background:var(--chrome-bg-strong);color:var(--text-primary);transform:translateY(-1px)}
.pfv-cmd-act:active{transform:scale(.93)}
.pfv-cmd-act.primary{background:linear-gradient(180deg,color-mix(in srgb,var(--app-accent) 92%,#fff),var(--app-accent));color:var(--on-accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 2px 8px color-mix(in srgb,var(--app-accent) 36%,transparent)}
.pfv-cmd-act.primary:hover{filter:brightness(1.05)}
@media(prefers-reduced-transparency:reduce){.pfv-cmd{background:var(--card-bg);backdrop-filter:none;-webkit-backdrop-filter:none}.pfv-cmd-av{border-color:var(--card-bg)}}
@media(prefers-reduced-motion:reduce){.pfv-cj-pip::after{animation:none}}
@media(max-width:1100px){.pfv-cmd-journey{display:none}}
@media(max-width:760px){.pfv-cmd-vitals{gap:9px}.pfv-cmd-vital-val{font-size:14px}.pfv-cmd-presence{display:none}}
@media(max-width:640px){.pfv-cmd{flex-wrap:wrap;gap:9px;padding:9px var(--mobile-gutter)}.pfv-cmd-name{max-width:none}.pfv-cmd-end{width:100%;margin-left:0;justify-content:space-between}.pfv-cmd-act{width:36px;height:36px}}
/* pass-3 (2026-06-07): matte stage — rail + content float on --app-bg with equal 12px gaps (matches Contacts .contacts-dir) */
.pfv-body{flex:1;display:flex;min-height:0;overflow:hidden;background:var(--app-bg);padding:12px;gap:12px}
/* 2026-05-22 📘 Lock the sidebar to vertical scroll only — on iPad it let you
   pan left/right (touch-action default), shifting the layout. */
/* 2026-06-02 ALL-IN — the left nav reworked into the command-center language:
   a frosted rail, grouped sections with a quiet hairline rhythm, and an active
   pill that's a real beveled gradient surface (not a flat accent block). */
/* pass-3: rail = floating GLASS panel (matches Contacts .cd-rail): radius + shadow-e2 + glass, no flush slab */
.pfv-sidebar{width:212px;flex-shrink:0;margin-top:8px;background:var(--lg-bg);backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);box-shadow:var(--lg-edge),var(--shadow-e2);overflow-y:auto;overflow-x:hidden;touch-action:pan-y;overscroll-behavior-x:none;padding:12px 10px 16px}
@media (prefers-reduced-transparency:reduce){.pfv-sidebar{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
/* pass-3: subtle Apple-style overlay scrollbar on the rail — thin, faint, inset from the rounded
   corners so it never runs through the top/bottom of the panel. */
.pfv-sidebar{scrollbar-width:none}
.pfv-sidebar::-webkit-scrollbar{width:6px;height:6px;background:transparent}
.pfv-sidebar::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text-primary) 16%,transparent);border-radius:999px}
.pfv-sidebar::-webkit-scrollbar-track{background:transparent;margin:10px 0}
.pfv-sidebar::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text-primary) 14%,transparent);border-radius:999px;border:0}
.pfv-sidebar:hover::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text-primary) 24%,transparent)}
.pfv-sidebar::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--text-primary) 32%,transparent)}
/* U5 — unify the tab backdrop with the modal. The same .modal-section content
   cards render in BOTH the modal (on --modal-bg, a recessed gray field) and
   full-page. Previously full-page laid them on the bare --app-bg matte, so the
   "gray field behind the cards" appeared in the modal but vanished full-page —
   the inconsistency Gavin flagged. Give .pfv-content the SAME recessed field so
   solid content cards sit on an identical backdrop in both contexts. (doc-mode
   overrides padding/overflow below and fills the area, so this is harmless
   there; workspace .pfv-ws cards simply float on the same recessed field.) */
/* pass-3: top/side padding so the panel's shadow + rounded corners aren't clipped by the scroll
   edge. The rail gets a matching top inset (.pfv-sidebar margin-top) so the two tops stay aligned. */
.pfv-content{flex:1;overflow-y:auto;padding:8px 4px 8px 0;min-width:0;background:transparent}
/* pass-3: subtle Apple overlay scrollbar on the content scroll area too */
.pfv-content{scrollbar-width:none}
.pfv-content::-webkit-scrollbar{width:6px;height:6px;background:transparent}
.pfv-content::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text-primary) 14%,transparent);border-radius:999px}
.pfv-content::-webkit-scrollbar-track{background:transparent;margin:8px 0}
.pfv-content::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text-primary) 13%,transparent);border-radius:999px}
.pfv-content:hover::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text-primary) 22%,transparent)}
/* ════════════════════════════════════════════════════════════════════════════
   G1 — Full-page WORKSPACE layout engine. The full-page project view's reason to
   exist: a multi-region workspace (master list · detail pane · analytics rail)
   instead of the modal's single-column quick view. Tabs opt in via _pfvWorkspace()
   when _isFullPage(); the modal keeps its compact single column. Regions collapse
   to a single stack on iPad-portrait / narrow so it degrades gracefully.
   ════════════════════════════════════════════════════════════════════════════ */
.pfv-ws{display:grid;gap:12px;min-height:0;grid-template-columns:minmax(0,1.15fr) minmax(0,320px);grid-template-areas:'master rail';align-items:start}
/* 🐢 SOV recomposed flow (Gavin) — a vertical stack of full-width bands, no stranded middle void:
   worktop = SOV list + pay-app rail (2-up), then a FULL-WIDTH line-detail band, then sub-money. */
.sov-flow{display:flex;flex-direction:column;gap:12px;min-height:0}
.sov-worktop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:12px;align-items:start}
.sov-worktop-rail{display:flex;flex-direction:column;gap:12px;min-width:0}
.sov-worktop-list{min-width:0}
/* the line detail is now a full-width band — its inner card lays fields + stats across the full width */
.sov-detailband{min-width:0}
.sov-detailband .task-ws-field-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.sov-detailband .sov-detail-stats{max-width:520px}
.sov-detailband .task-ws-title-input{max-width:640px}
@media(max-width:900px){ .sov-worktop{grid-template-columns:1fr} }
/* V133 — when a tab body holds a workspace grid, the scroll area reads as the MATTE so
   the .pfv-ws-card panels float off it (glass=chrome, solid card=content). Scoped via
   :has() so non-workspace tabs (Overview etc.) keep their existing --modal-bg. */
.pfv-content:has(> .pfv-ws),.pfv-content:has(#dailyLogsWorkspaceWrap .dl-wrap){background:var(--app-bg)}
.pfv-ws.pfv-ws-3{grid-template-columns:minmax(0,300px) minmax(0,1fr) minmax(0,300px);grid-template-areas:'master detail rail'}
/* iPad-landscape intermediate: 3-col squeezes the detail column to ~140px with the dock/pane open at 1101-1320 — drop the rail below into a 2-col tier (B11). Disjoint from the <=1100 single-col collapse. */
@media (min-width:1101px) and (max-width:1320px){.pfv-ws.pfv-ws-3{grid-template-columns:minmax(0,300px) minmax(0,1fr);grid-template-areas:'master detail' 'rail rail'}}
.pfv-ws.pfv-ws-detail{grid-template-columns:minmax(0,320px) minmax(0,1fr);grid-template-areas:'master detail'}
.pfv-ws-master{grid-area:master;min-width:0;display:flex;flex-direction:column;gap:12px}
/* C2-P1 — project-workspace Chat tab (the "door" surface). Solid panel (content),
   floating on the matte (V133); never an edge-strip. */
#pfvChatHost .pfvchat-loading{padding:40px 0;text-align:center;color:var(--text-muted);font-size:13px}
.pfvchat-panel{padding:22px;display:flex;flex-direction:column;gap:18px;max-width:560px}
.pfvchat-head{display:flex;align-items:center;gap:12px}
.pfvchat-stack{display:flex;align-items:center}
.pfvchat-av{width:28px;height:28px;border-radius:50%;margin-left:-8px;box-shadow:0 0 0 2px var(--card-bg);overflow:hidden;position:relative}
.pfvchat-av:first-child{margin-left:0}
.pfvchat-av .tc-avatar{width:28px !important;height:28px !important;font-size:11px}
.pfvchat-more{display:flex;align-items:center;justify-content:center;background:var(--surface-3,var(--surface-2));color:var(--text-muted);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.pfvchat-meta{font-size:13px;font-weight:600;color:var(--text-secondary)}
.pfvchat-prev-card{background:var(--surface-2);border-radius:var(--radius-md);padding:12px 14px;display:flex;flex-direction:column;gap:7px}
.pfvchat-prev-lbl{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);margin-bottom:2px}
.pfvchat-prev-row{display:flex;gap:7px;font-size:13px;min-width:0}
.pfvchat-prev-who{font-weight:600;color:var(--text-primary);flex:0 0 auto}
.pfvchat-prev-txt{color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pfvchat-empty{font-size:12.5px;color:var(--text-muted);line-height:1.5}
.pfvchat-open{align-self:flex-start;display:inline-flex;align-items:center;font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:var(--radius-md);cursor:pointer}
.pfv-ws-detail{grid-area:detail;min-width:0;display:flex;flex-direction:column;gap:12px}
.pfv-ws-rail{grid-area:rail;min-width:0;display:flex;flex-direction:column;gap:12px}
/* Rails whose cards are wrapped in a per-surface host (#coWsRail etc.) lose the .pfv-ws-rail flex gap
   (the host becomes the single flex child, cards inside collapse to 0 spacing). Make those hosts flex
   columns with the same 12px rhythm so the section cards breathe consistently. */
/* Rail hosts: flex column w/ rhythm + a small horizontal inset so the raised section cards sit INSIDE
   the rail (their shadow breathes on both sides) instead of spanning edge-to-edge as wide as the rail. */
#coWsRail,#invWsRail,#poWsRail{display:flex;flex-direction:column;gap:12px;min-width:0;padding:6px}
#coWsRail > *,#invWsRail > *,#poWsRail > *{width:100%;min-width:0;box-sizing:border-box}
/* the per-CO bar chart must never force the card wider than the rail (it clipped on the right) */
#coWsRail .bar-chart,#coWsRail .stage-ws-rail-chart{max-width:100%;overflow:hidden}
/* V-ctgrid 2026-07-01 — full-page CONTACTS card-grid layout (replaces the master-detail
   3-pane, which wasted the page on a narrow list + a giant empty detail). Full-width
   scannable card grid beside the roster rail. */
/* 🖇️ 2026-07-08 — ANCHOR THE STAGE (Gavin: "keep the background/lifted space the contact cards
   sit on a consistent size so clicking through those contact tabs it doesn't jump").
   The grid was purely content-sized: All 1417px → Team 230px → Subs 622px → Suppliers 426px, a
   1187px jump per click. Now the stage is a FIXED height (the remaining viewport) and the card
   grid scrolls INSIDE it — RT's content-only-scroll canon. Every tab, rich or sparse, is the same
   size. The stage top is a constant 306px under header+tabs+filter bar (measured on all 4 tabs);
   the floor protects short viewports where 100vh-offset would under-reserve. */
/* 🫔 §7 — internal read-only portal view (a view_portals teammate sees what the client sees). */
.ipv-stage-wrap{padding:18px;display:flex;flex-direction:column;gap:16px}
.ipv-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:22px 24px;border-radius:18px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,transparent),color-mix(in srgb,var(--accent) 4%,transparent));
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.ipv-kicker{font-size:11px;font-weight:700;letter-spacing:.08em;color:color-mix(in srgb,var(--accent) 80%,var(--text-secondary))}
.ipv-title{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-top:4px}
.ipv-sub{font-size:12.5px;color:var(--text-secondary);margin-top:6px;max-width:52ch;line-height:1.45}
.ipv-pct{flex:none;text-align:right}.ipv-pct b{font-size:26px;font-weight:800;display:block;letter-spacing:-.02em}
.ipv-pct span{font-size:11px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em}
.ipv-picker{display:flex;gap:8px;flex-wrap:wrap}
.ipv-pill{padding:7px 14px;border-radius:999px;border:1px solid var(--border);background:var(--panel-bg);font-size:12.5px;font-weight:600;cursor:pointer;transition:all .15s}
.ipv-pill:hover{border-color:var(--accent)}.ipv-pill.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.ipv-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:16px;align-items:start}
@media (max-width:1000px){.ipv-grid{grid-template-columns:minmax(0,1fr)}}
.ipv-sec{padding:16px 18px}.ipv-sec-h{font-size:13px;font-weight:700;margin-bottom:12px;display:flex;align-items:baseline;gap:8px}
.ipv-clientlbl{font-size:11px;font-weight:500;color:var(--text-secondary)}
.ipv-sched{display:flex;flex-direction:column;gap:2px}
.ipv-stage{display:flex;align-items:center;gap:12px;padding:9px 4px;border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent)}
.ipv-stage:last-child{border-bottom:0}.ipv-stage-n{flex:1;font-size:13px;font-weight:600}
.ipv-stage-s{font-size:11.5px;color:var(--text-secondary);text-transform:capitalize}
.ipv-dot{width:11px;height:11px;border-radius:50%;flex:none;background:var(--border)}
.ipv-dot.ipv-inprogress,.ipv-dot.ipv-in_progress{background:var(--accent)}
.ipv-dot.ipv-complete,.ipv-dot.ipv-completed,.ipv-dot.ipv-done{background:#22c55e}
.ipv-bill{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ipv-bill>div{display:flex;flex-direction:column;gap:2px}.ipv-bill b{font-size:16px;font-weight:800}
.ipv-bill span{font-size:10.5px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}
.ipv-bill .ipv-paid{color:#22c55e}.ipv-bill .ipv-out{color:#f59e0b}
.ipv-docs{display:flex;flex-direction:column;gap:6px}
.ipv-doc{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:var(--panel-bg);font-size:12.5px;font-weight:600}
.ipv-doc-i{width:16px;height:16px;flex:none;color:var(--accent)}
.ipv-thread-panel{display:flex;flex-direction:column}
.ipv-thread{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow-y:auto;margin-bottom:12px}
.ipv-msg{max-width:88%;padding:9px 12px;border-radius:14px;font-size:13px;line-height:1.4}
.ipv-msg-a{font-size:11px;font-weight:700;opacity:.7;margin-bottom:2px}
.ipv-msg-team{align-self:flex-end;background:var(--accent);color:#fff}
.ipv-msg-team .ipv-msg-a{color:#fff;opacity:.85}
.ipv-msg-client{align-self:flex-start;background:var(--panel-bg);border:1px solid var(--border)}
.ipv-composer{display:flex;gap:8px;align-items:flex-end}
.ipv-composer textarea{flex:1;resize:none;padding:9px 12px;border-radius:12px;border:1px solid var(--border);background:var(--field-fill,var(--panel-bg));font:inherit;font-size:13px}
.ipv-empty{color:var(--text-secondary);font-size:12.5px;padding:10px 2px;text-align:center}
.ct-ws2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,290px);gap:20px;align-items:stretch;
  height:max(440px,calc(100vh - 320px));min-height:max(440px,calc(100vh - 320px))}
@media (max-width:1100px){.ct-ws2{grid-template-columns:minmax(0,1fr)}}
/* phones: the tab strip wraps and the pane starts lower — don't over-reserve into a dead scroll. */
@media (max-width:640px){.ct-ws2{height:max(360px,calc(100vh - 380px));min-height:max(360px,calc(100vh - 380px))}}
/* Content-only scroll: the columns own their overflow, the stage itself never grows.
   🖇️ A scroll container CLIPS its children's box-shadows at the edge — the cards' `0 4px 14px`
   lift and the rail card's bevel were being sliced flat against the scroll box (Gavin's
   "cut off weird shadow/depth errors"). Pad the container so the glow has room, then pull the
   padding back out with a matching negative margin so nothing shifts in the grid. */
.ct-ws2-main,.ct-ws2-rail{min-width:0;min-height:0;display:flex;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;
  /* room for the lift; no negative margin (it would widen grid items into the gap + stage edge) */
  padding:8px 10px 14px}
.ct-ws2-main{gap:20px}
.ct-ws2-rail{gap:12px}
/* pull the stage's own box back by the padding so the columns still line up with the page gutter */
.ct-ws2{margin:-8px -10px -14px}
.ct-ws2-head{display:flex;align-items:baseline;gap:10px;padding:0 2px}
.ct-ws2-title{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--text-primary)}
.ct-ws2-title .ic{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;color:var(--app-accent)}
.ct-ws2-count{font-size:12.5px;font-weight:700;color:var(--text-muted)}
.ct-grid-sec{display:flex;flex-direction:column;gap:11px}
.ct-grid-seclabel{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--text-secondary)}
.ct-grid-seclabel .ct-rl-dot{width:8px;height:8px;border-radius:999px;flex:0 0 8px}
.ct-grid-seclabel .ct-rl-n{font-size:11px;font-weight:800;color:var(--text-muted);background:color-mix(in srgb,var(--text-primary) 7%,transparent);border-radius:999px;padding:1px 8px;margin-left:2px}
.ct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:13px}
.ct-card{display:flex;flex-direction:column;gap:11px;padding:15px 16px;border-radius:16px;background:var(--card-bg);border:.5px solid color-mix(in srgb,#000 6%,transparent);box-shadow:var(--shadow-e2);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
.ct-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-e3)}
.ct-card-top{display:flex;align-items:center;gap:12px}
/* 🖇️ — round ORB, not a squircle: joins the site-wide avatar orb family (the specular cap +
   inner bottom shade + lift are declared with .tc-avatar/.acct-avatar/… above, so no shadow
   is repeated here — the old inset+e1 pair fought the orb rule and flattened it). */
.ct-card-av{width:44px;height:44px;flex:0 0 44px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:15px;font-weight:800;letter-spacing:-.02em;overflow:hidden}
/* 🖇️ Team tab — member cards reuse .ct-card. `.you` + `.role-chip` were scoped
   `#projectMemberList …`, so they'd paint as nothing inside the contacts workspace
   (the same scoping bug this pass fixes for .cd-chip). Declared here for the card grid. */
.ct-card-av-img{position:relative;overflow:hidden}
.ct-card-av-img img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
/* the initials fallback must sit ABOVE the orb's specular cap (z-index 2), or the cap washes it out */
.ct-card-av-img .ct-av-fb{display:none;position:relative;z-index:3}
.ct-card-av-img.ct-av-broken .ct-av-fb{display:block}
.ct-card-av-img.ct-av-broken{background:var(--surface-2)!important;color:var(--text-secondary)}
.ct-card-name .you{margin-left:6px;font-size:9.5px;font-weight:800;padding:1px 6px;border-radius:999px;background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent);vertical-align:middle}
.ct-card-top .role-chip{font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:999px;flex:0 0 auto;white-space:nowrap;letter-spacing:.01em}
.ct-card-top .role-chip.r-owner{background:var(--cd-client-bg,color-mix(in srgb,#0a8a8f 14%,transparent));color:var(--cd-client-fg,#0a8a8f)}
.ct-card-top .role-chip.r-admin{background:var(--cd-gc-bg,color-mix(in srgb,#2563eb 14%,transparent));color:var(--cd-gc-fg,#2563eb)}
.ct-card-top .role-chip.r-member{background:var(--cd-sub-bg,color-mix(in srgb,#7c3aed 14%,transparent));color:var(--cd-sub-fg,#7c3aed)}
.ct-card-top .role-chip.r-viewer{background:var(--badge-neutral-bg,var(--surface-2));color:var(--badge-neutral-fg,var(--text-secondary))}
/* 🖇️ C5b — the role chip is click-to-edit. Rounded hover (never a hard-corner pop), no layout
   shift on click: the swapped-in input matches the chip's box. */
.ct-card-top .role-chip.is-editable{cursor:pointer;border:none;font-family:inherit;transition:box-shadow var(--motion-fast) var(--ease-spring),transform var(--motion-fast)}
.ct-card-top .role-chip.is-editable:hover{box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 22%,transparent)}
.ct-card-top .role-chip.is-editable:focus-visible{outline:none;box-shadow:0 0 0 2px var(--app-accent)}
.ct-card-top .ct-role-add{opacity:.72}
.ct-card-top .ct-role-add:hover{opacity:1}
.ct-card-top .ct-role-input{flex:0 0 auto;width:132px;max-width:132px;font-size:10.5px;font-weight:800;letter-spacing:.01em;padding:3px 8px;border-radius:999px;border:none;background:var(--surface-2,var(--surface));color:var(--text-primary);box-shadow:0 0 0 2px var(--app-accent)}
.ct-card-top .ct-role-input:focus{outline:none}
.ct-card-id{flex:1;min-width:0}
.ct-card-name{font-size:15px;font-weight:800;letter-spacing:-.02em;line-height:1.15;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-card-sub{font-size:11.5px;font-weight:600;color:var(--text-secondary);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-card-lines{display:grid;gap:5px;font-size:12.5px;font-weight:600}
.ct-card-lines .ccl{display:flex;align-items:center;gap:8px;min-width:0}
.ct-card-lines .ccl-ico{width:13px;height:13px;flex:0 0 13px;fill:none;stroke:var(--text-muted);stroke-width:2}
.ct-card-lines .ccl-v{color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a.ccl-v{color:var(--app-accent);text-decoration:none}a.ccl-v:hover{text-decoration:underline}
.ct-card-noreach{color:var(--text-muted);font-style:italic;font-weight:600;font-size:12px}
.ct-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:1px;padding-top:11px;border-top:.5px solid color-mix(in srgb,#000 6%,transparent)}
.ct-card-acts{display:flex;gap:7px}
.ct-act{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 9%,transparent);border-radius:9px;padding:5px 10px;text-decoration:none;transition:background var(--motion-fast)}
.ct-act:hover{background:color-mix(in srgb,var(--app-accent) 16%,transparent)}
.ct-act svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
.ct-noact{font-size:12px;color:var(--text-muted)}
.ct-unlink{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;border:0;background:transparent;color:var(--text-muted);cursor:pointer;opacity:0;transition:opacity var(--motion-fast),background var(--motion-fast),color var(--motion-fast)}
.ct-card:hover .ct-unlink,.ct-unlink:focus-visible{opacity:1}
.ct-unlink:hover{background:color-mix(in srgb,var(--color-error) 12%,transparent);color:var(--color-error)}
.ct-unlink svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
/* V-emptyfull 2026-07-01 — full-width crafted empty state (replaces the 3-pane's dead
   detail void when a money/schedule collection is empty). Owns the width; centered card. */
.pfv-empty-full{display:flex;justify-content:center;padding:8px 0 4px}
.pfv-empty-card{width:100%;max-width:640px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:44px 32px;border-radius:20px;background:var(--card-bg);border:.5px solid color-mix(in srgb,#000 6%,transparent);box-shadow:var(--shadow-e2)}
.pfv-empty-ico{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:color-mix(in srgb,var(--app-accent) 12%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.pfv-empty-ico svg{width:28px;height:28px;fill:none;stroke:var(--app-accent);stroke-width:2}
.pfv-empty-title{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--text-primary)}
.pfv-empty-sub{font-size:13.5px;font-weight:500;color:var(--text-secondary);max-width:440px;line-height:1.5;margin-top:-4px}
.pfv-empty-form{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:100%;max-width:520px;margin-top:6px}
.pfv-empty-form .field-input{flex:1;min-width:120px}
.pfv-empty-cta{margin-top:4px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.pfv-empty-points{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px;padding-top:16px;border-top:.5px solid color-mix(in srgb,#000 6%,transparent);width:100%}
.pfv-empty-point{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--text-secondary);background:color-mix(in srgb,var(--text-primary) 4%,transparent);border-radius:10px;padding:8px 13px}
.pfv-empty-point-ico{display:inline-grid;place-items:center;color:var(--app-accent)}
.pfv-empty-point-ico svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
/* Rail card — the analytics container (native-SVG charts, rollups). Content card,
   so solid surface per DESIGN.md (glass is chrome, not content). */
/* 2026-06-02 ALL-IN polish — the shared workspace card elevated to the command-
   center material (stronger specular edge + accent-tick section eyebrow). One
   edit lifts every .pfv-ws tab (Tasks/Stages/Estimates/Invoices/SOV/Files/…). */
.pfv-ws-card{background:var(--card-bg);border:.5px solid var(--chrome-border);border-radius:var(--radius-lg);box-shadow:var(--lg-edge),var(--shadow-e2);padding:15px 16px}
.pfv-ws-card-title{font-size:10.5px;font-weight:800;letter-spacing:.55px;text-transform:uppercase;color:var(--text-secondary);margin-bottom:11px;display:flex;align-items:center;gap:7px}
.pfv-ws-card-title svg{width:13px;height:13px;opacity:.85;color:var(--text-secondary)}
/* ── Budget (cost-code BvA) dashboard ── real-data bars, rounded, no edge-strips, semantic pills ── */
.bva-empty{color:var(--text-muted);font-size:13px;padding:14px 4px;text-align:center}
.bva-row{padding:11px 12px;border-radius:13px;cursor:pointer;transition:background var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-spring);margin:2px 0}
.bva-row:hover{background:color-mix(in srgb,var(--app-accent) 6%,transparent)}
.bva-row:active{transform:scale(.995)}
.bva-row.sel{background:color-mix(in srgb,var(--app-accent) 11%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--app-accent) 30%,transparent)}
.bva-row-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.bva-name{font-size:13px;font-weight:700;color:var(--text-primary)}
.bva-cn{font-weight:500;color:var(--text-secondary)}
.bva-vchip{flex-shrink:0;font-size:11px}
.bva-track{position:relative;height:13px;border-radius:999px;background:var(--surface-2,var(--card-bg));overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.07)}
.bva-spent{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 82%,#fff),var(--app-accent));box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.bva-mk{position:absolute;top:-2px;bottom:-2px;width:2px;border-radius:2px}
.bva-mk-bud{background:var(--text-primary);opacity:.5}
.bva-mk-eac{background:var(--color-warning,#e0a800);opacity:.9}
.bva-figs{display:flex;flex-wrap:wrap;gap:10px;margin-top:7px;font-size:11.5px;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.bva-pills{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:9px;margin-bottom:14px}
.bva-pill{background:var(--surface-grad,var(--card-bg));border-radius:11px;padding:9px 11px;box-shadow:var(--bevel-top,inset 0 1px 0 rgba(255,255,255,.3)),var(--shadow-e1,0 1px 3px rgba(0,0,0,.08))}
.bva-pill-l{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted)}
.bva-pill-v{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text-primary);margin-top:2px}
.bva-pill-over .bva-pill-v{color:var(--color-error,#d23)}
.bva-pill-under .bva-pill-v{color:var(--color-success,#1a8)}
.bva-pct{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:11px 0;border-top:.5px solid var(--chrome-border);border-bottom:.5px solid var(--chrome-border);margin-bottom:12px}
.bva-pct-l{font-size:12.5px;font-weight:600;color:var(--text-secondary)}
.bva-pct-src{margin-left:6px;font-size:11px;padding:2px 8px;border-radius:999px;background:var(--surface-2,var(--card-bg));color:var(--text-secondary)}
.bva-pct-src.manual{background:color-mix(in srgb,var(--app-accent) 16%,transparent);color:var(--app-accent)}
.bva-pct-ctl{display:flex;align-items:center;gap:8px}
.bva-pct-in{width:64px;height:32px;border-radius:9px;border:.5px solid var(--chrome-border);background:var(--card-bg);color:var(--text-primary);font-size:13px;padding:0 9px;text-align:right;font-variant-numeric:tabular-nums}
.bva-pct-in:focus{outline:none;border-color:color-mix(in srgb,var(--app-accent) 50%,transparent)}
.bva-tiles{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}
.bva-tile{background:var(--surface-grad,var(--card-bg));border-radius:11px;padding:11px 12px;box-shadow:var(--bevel-top,inset 0 1px 0 rgba(255,255,255,.3)),var(--shadow-e1,0 1px 3px rgba(0,0,0,.08))}
.bva-tile-l{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted)}
.bva-tile-v{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:2px}
.bva-rollvar{font-size:12.5px;font-weight:600;padding:10px 12px;border-radius:11px;margin-bottom:12px}
.bva-rollvar.over{background:var(--color-error-bg,color-mix(in srgb,#d23 12%,transparent));color:var(--color-error,#d23)}
.bva-rollvar.under{background:var(--color-success-bg,color-mix(in srgb,#1a8 12%,transparent));color:var(--color-success,#1a8)}
.bva-top-h{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);margin-bottom:6px}
.bva-top-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 9px;border-radius:9px;cursor:pointer;font-size:12.5px;transition:background var(--motion-fast)}
.bva-top-row:hover{background:color-mix(in srgb,var(--app-accent) 7%,transparent)}
.bva-top-amt{font-weight:700;color:var(--color-error,#d23);font-variant-numeric:tabular-nums}
.bva-lines{margin-top:4px}
/* #9 — unallocated-hours catch-up queue (Budget rail) */
.bva-unalloc-n{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:color-mix(in srgb,var(--color-warning,#e0a800) 22%,transparent);color:var(--color-warning,#b8860b);font-size:11px;font-weight:800;margin-left:6px}
.bva-unalloc-sub{font-size:11.5px;color:var(--text-secondary);margin-bottom:8px}
.bva-unalloc-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:9px;cursor:pointer;font-size:12.5px;transition:background var(--motion-fast)}
.bva-unalloc-row:hover{background:color-mix(in srgb,var(--app-accent) 7%,transparent)}
.bva-unalloc-lbl{color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bva-unalloc-h{flex-shrink:0;font-weight:700;color:var(--color-warning,#b8860b);font-variant-numeric:tabular-nums}
/* #9 — allocation modal (line-by-line split; built on the .rrt-input-modal overlay) */
.logalloc-modal{max-width:560px;width:94vw}
.logalloc-sub{font-size:12.5px;color:var(--text-secondary);margin:-4px 0 12px}
.logalloc-meter{font-size:12.5px;color:var(--text-secondary);padding:8px 11px;border-radius:9px;background:var(--surface-2,var(--card-bg));margin-bottom:11px}
.logalloc-meter.over{background:var(--color-error-bg,color-mix(in srgb,#d23 12%,transparent));color:var(--color-error,#d23)}
.logalloc-meter b{color:var(--text-primary);font-variant-numeric:tabular-nums}
.logalloc-row{display:flex;align-items:flex-end;gap:8px;padding:7px 0;border-bottom:.5px solid var(--chrome-border)}
.logalloc-cc{flex:1 1 120px;min-width:90px;height:34px;border-radius:9px;border:.5px solid var(--chrome-border);background:var(--card-bg);color:var(--text-primary);font-size:12.5px;padding:0 10px;text-align:left;cursor:pointer}
.logalloc-cc-ph{color:var(--text-muted)}
.logalloc-f{display:flex;flex-direction:column;gap:3px;font-size:10px;color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.logalloc-f .logalloc-in{width:64px;height:34px;border-radius:9px;border:.5px solid var(--chrome-border);background:var(--card-bg);color:var(--text-primary);font-size:13px;padding:0 8px;text-align:right;font-variant-numeric:tabular-nums}
.logalloc-cost{flex:0 0 auto;min-width:62px;text-align:right;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.logalloc-rm{flex:0 0 auto;width:26px;height:26px;border-radius:7px;border:0;background:transparent;color:var(--text-muted);font-size:17px;cursor:pointer}
.logalloc-rm:hover{background:color-mix(in srgb,var(--color-error,#d23) 12%,transparent);color:var(--color-error,#d23)}
.logalloc-addrow{margin:10px 0 4px;font-size:12.5px}
.logalloc-undo{margin-right:auto;color:var(--color-error,#d23)}
.pfv-ws-stat{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;border-bottom:0.5px solid color-mix(in srgb,var(--chrome-border) 60%,transparent)}
.rail-export-btn{display:inline-flex;align-items:center;gap:5px;margin-top:10px;font-size:12px;font-weight:600}
.rail-export-btn .ic{width:13px;height:13px}
/* Register-rail analytics (Batch A): a tight stat-tile grid + a labeled breakdown list,
   styled to sit inside a .pfv-ws-card. Tones reuse the app's semantic colors. */
.reg-rail-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
/* 2026-06-02 ALL-IN polish — register-rail stat tiles glossed up (specular bevel
   + tonal tint) so the register tabs' analytics rails match the command-center
   material. Shared across Members/Permits/Submittals/Warranties/Comm Log/Field. */
.reg-rail-tile{background:var(--surface-grad);border-radius:var(--radius-md);padding:9px 10px;text-align:center;box-shadow:var(--bevel-top),var(--shadow-e1)}
.reg-rail-tile-v{font-size:19px;font-weight:800;letter-spacing:-.4px;color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1.1}
.reg-rail-tile-l{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);margin-top:3px}
.reg-rail-tile.reg-tone-warn{background:linear-gradient(160deg,color-mix(in srgb,var(--color-warning) 12%,var(--card-bg)),var(--card-bg))}
.reg-rail-tile.reg-tone-warn .reg-rail-tile-v{color:color-mix(in srgb,var(--color-warning) 82%,var(--text-primary))}
.reg-rail-tile.reg-tone-bad{background:linear-gradient(160deg,color-mix(in srgb,var(--color-error) 12%,var(--card-bg)),var(--card-bg))}
.reg-rail-tile.reg-tone-bad .reg-rail-tile-v{color:color-mix(in srgb,var(--color-error) 82%,var(--text-primary))}
.reg-rail-tile.reg-tone-good{background:linear-gradient(160deg,color-mix(in srgb,var(--color-success) 12%,var(--card-bg)),var(--card-bg))}
.reg-rail-tile.reg-tone-good .reg-rail-tile-v{color:color-mix(in srgb,var(--color-success) 78%,var(--text-primary))}
.reg-rail-rows{display:flex;flex-direction:column;gap:2px;margin-top:10px}
.reg-rail-row{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0;border-bottom:0.5px solid color-mix(in srgb,var(--chrome-border) 55%,transparent);font-size:12.5px}
.reg-rail-row:last-child{border-bottom:none}
.reg-rail-row-l{color:var(--text-secondary);text-transform:capitalize}
.reg-rail-row-l.reg-tone-good{color:color-mix(in srgb,var(--color-success) 70%,var(--text-primary))}
.reg-rail-row-l.reg-tone-bad{color:color-mix(in srgb,var(--color-error) 75%,var(--text-primary))}
.reg-rail-row-l.reg-tone-accent{color:color-mix(in srgb,var(--app-accent) 80%,var(--text-primary))}
.reg-rail-row-n{font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums}
.reg-rail-note{font-size:11.5px;color:var(--text-muted);margin-top:8px;text-align:center}
.reg-rail-empty{font-size:12px;color:var(--text-muted);padding:4px 0}
/* 2026-06-02 ALL-IN — guided register-rail empty state (teaches what the tab tracks) */
.reg-rail-guide{font-size:12px;color:var(--text-secondary);line-height:1.5}
.reg-rail-guidelist{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.reg-rail-guideitem{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-primary);font-weight:500}
.reg-rail-guidedot{width:7px;height:7px;border-radius:50%;flex-shrink:0;box-shadow:0 0 5px color-mix(in srgb,currentColor 30%,transparent)}
/* PO detail — inline "why locked" hint (replaces a modal-referencing note) */
.po-detail-hint{display:flex;align-items:flex-start;gap:7px;margin-top:11px;padding:9px 11px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--text-primary) 4%,transparent);font-size:11.5px;color:var(--text-muted);line-height:1.45}
.po-detail-hint-ico{flex-shrink:0;width:13px;height:13px;margin-top:1px;opacity:.7}
.po-detail-hint strong{color:var(--text-secondary);font-weight:700}
/* Tiny activity sparkline (last-N-days bar row) for the Batch-C record rails. */
.reg-rail-spark-wrap{margin-top:10px}
.reg-rail-spark{display:flex;align-items:flex-end;gap:2px;height:34px}
.reg-rail-spark-bar{flex:1;min-height:2px;background:color-mix(in srgb,var(--app-accent) 55%,transparent);border-radius:1.5px 1.5px 0 0}
.reg-rail-spark-bar[data-n="0"]{background:color-mix(in srgb,var(--text-primary) 8%,transparent)}
.reg-rail-spark-cap{font-size:10px;color:var(--text-muted);text-align:center;margin-top:4px;text-transform:uppercase;letter-spacing:.3px}
/* Item #21 — compact 14-day activity-velocity sparkline in the Activity zone head (reuses .reg-rail-spark). */
.ovx-act-velo{margin-left:auto;display:inline-flex;align-items:center;gap:7px}
.ovx-act-velo .reg-rail-spark{height:18px;width:84px;gap:1.5px}
.ovx-act-velo .reg-rail-spark-bar{border-radius:1px 1px 0 0}
.ovx-act-velo-cap{font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}
.ovx-act-velo.is-loading .reg-rail-spark-bar{background:color-mix(in srgb,var(--text-primary) 8%,transparent)}
.ovx-act-velo + .zh-action{margin-left:0}
.pfv-ws-stat:last-child{border-bottom:none}
.pfv-ws-stat-lbl{font-size:12px;color:var(--text-secondary)}
.pfv-ws-stat-val{font-size:13px;font-weight:600;color:var(--text-primary);font-variant-numeric:tabular-nums}
/* H4 — rail "every metric is a door": a drillable stat row/bar/segment reads as tappable. */
.pfv-ws-stat.pfv-drill{cursor:pointer;border-radius:var(--radius-sm);margin:0 -8px;padding:5px 8px;transition:background var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-out)}
.pfv-ws-stat.pfv-drill:hover{background:color-mix(in srgb,var(--app-accent) 9%,transparent)}
.pfv-ws-stat.pfv-drill:active{transform:scale(.985)}
.pfv-ws-stat.pfv-drill .pfv-ws-stat-lbl::after{content:'';display:inline-block;width:6px;height:9px;margin-left:5px;vertical-align:-1px;opacity:.45;background:currentColor;-webkit-mask:var(--chev-mask) center/contain no-repeat;mask:var(--chev-mask) center/contain no-repeat}
.task-ws-bar-row.pfv-drill,.fin-ws-aging-bar.pfv-drill,.fin-ws-leg.pfv-drill{cursor:pointer;border-radius:var(--radius-sm);transition:background var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-out)}
.task-ws-bar-row.pfv-drill:hover{background:color-mix(in srgb,var(--app-accent) 9%,transparent)}
.task-ws-bar-row.pfv-drill:active,.fin-ws-leg.pfv-drill:active{transform:scale(.985)}
.fin-ws-aging-bar.pfv-drill .fin-ws-aging-seg{cursor:pointer}
.fin-ws-aging-bar.pfv-drill .fin-ws-aging-seg:hover{filter:brightness(1.12)}
.fin-ws-leg.pfv-drill:hover{background:color-mix(in srgb,var(--app-accent) 9%,transparent)}
:root{--chev-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
/* W2-L icon-pass glyph masks — SF-Symbols-style line icons for register action buttons
   (mask-image, tinted via background-color:currentColor). Stroke ~1.8, round caps/joins. */
:root{
  --ico-trash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2m2 0v14a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6M10 11v6M14 11v6'/%3E%3C/svg%3E");
  --ico-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
  --ico-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  --ico-paperclip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 9.5 12.5 18a4 4 0 0 1-5.7-5.7l8-8a2.6 2.6 0 0 1 3.7 3.7l-8 8a1.2 1.2 0 0 1-1.7-1.7l7.3-7.3'/%3E%3C/svg%3E");
}
.task-ws-scope-chip{margin-left:7px;padding:3px 9px;border-radius:999px;border:none;font:inherit;font-size:11px;font-weight:600;cursor:pointer;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 14%,transparent);transition:background var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-out)}
.task-ws-scope-chip:hover{background:color-mix(in srgb,var(--app-accent) 22%,transparent)}
.task-ws-scope-chip:active{transform:scale(.95)}
.task-ws-scope-chip span{opacity:.7;font-weight:700}
.pfv-drill-flash{animation:pfvDrillFlash .85s var(--ease-out)}
@keyframes pfvDrillFlash{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--app-accent) 55%,transparent)}45%{box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 38%,transparent)}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.pfv-drill-flash{animation:none}}
@media (max-width:1100px){
  .pfv-ws,.pfv-ws.pfv-ws-3,.pfv-ws.pfv-ws-detail{grid-template-columns:minmax(0,1fr);grid-template-areas:'master' 'detail' 'rail'}
}
/* ── G1 📘 Tasks workspace ────────────────────────────────────────────────── */
.task-ws-add-row{display:flex;gap:8px;align-items:center}
.task-ws-add-input{flex:1;min-width:0}
.task-ws-add-btn{flex-shrink:0}
.task-ws-filter-wrap{margin-left:auto}
.task-ws-filter{font-size:11px;font-weight:600;padding:3px 8px;height:auto;width:auto;min-width:110px}
.task-ws-group{margin-bottom:14px}
.task-ws-group:last-child{margin-bottom:0}
.task-ws-group-head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-secondary);margin:0 0 9px;padding:7px 13px;border-radius:11px;background:var(--surface-grad,linear-gradient(160deg,#fff,#f7f8fb));box-shadow:0 1px 0 rgba(255,255,255,.6) inset,var(--shadow-e1);border:0.5px solid rgba(0,0,0,.04)}
.task-ws-group-head svg{width:12px;height:12px;opacity:.9}
.task-ws-group-count{margin-left:auto;font-variant-numeric:tabular-nums;background:color-mix(in srgb,var(--text-primary) 8%,transparent);border-radius:999px;padding:1px 8px;font-size:10.5px}
.task-ws-tone-error{color:var(--color-error)}.task-ws-tone-error .task-ws-group-count{background:var(--color-error-bg);color:var(--color-error)}
.task-ws-tone-warning{color:var(--color-warning)}.task-ws-tone-warning .task-ws-group-count{background:var(--color-warning-bg);color:var(--color-warning)}
.task-ws-tone-success{color:var(--color-success)}
.task-ws-group-body{display:flex;flex-direction:column;gap:6px}
.task-ws-row{display:flex;align-items:flex-start;gap:10px;padding:9px 11px;border-radius:var(--radius-md);background:var(--card-bg);border:0.5px solid color-mix(in srgb,var(--chrome-border) 70%,transparent);box-shadow:0 1px 0 rgba(255,255,255,.6) inset;cursor:pointer;transition:all var(--motion-fast) var(--ease-out)}
.task-ws-row:hover{box-shadow:0 1px 0 rgba(255,255,255,.6) inset,var(--shadow-e1);transform:translateY(-1px);border-color:color-mix(in srgb,var(--app-accent) 30%,var(--chrome-border))}
.task-ws-row:active{transform:translateY(0) scale(.995)}
.task-ws-row-sel{border-color:var(--app-accent);box-shadow:var(--shadow-e2),inset 0 0 0 1px color-mix(in srgb,var(--app-accent) 35%,transparent);background:color-mix(in srgb,var(--app-accent) 5%,var(--card-bg))}
/* proto-23: overdue/due-soon urgency reads via a subtle whole-surface tint + a colored
   check-medallion ring (NOT an edge strip — hard rule). Selection still wins (above). */
.task-ws-row.over:not(.task-ws-row-sel){background:linear-gradient(160deg,var(--color-error-bg,#fdeaea),var(--card-bg) 62%);border-color:color-mix(in srgb,var(--color-error,#ef4444) 20%,var(--chrome-border))}
.task-ws-row.soon:not(.task-ws-row-sel){background:linear-gradient(160deg,var(--color-warning-bg,#fdf3e0),var(--card-bg) 62%);border-color:color-mix(in srgb,var(--color-warning,#f59e0b) 20%,var(--chrome-border))}
.task-ws-row.over:not(.task-ws-row-sel) .task-ws-check:not(.done){border-color:var(--color-error,#ef4444);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-error,#ef4444) 16%,transparent)}
.task-ws-row.soon:not(.task-ws-row-sel) .task-ws-check:not(.done){border-color:var(--color-warning,#f59e0b);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-warning,#f59e0b) 16%,transparent)}
.task-ws-check{flex-shrink:0;width:20px;height:20px;margin-top:1px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--text-primary) 28%,transparent);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:all var(--motion-fast) var(--ease-spring)}
.task-ws-check:hover{border-color:var(--app-accent)}
.task-ws-check.done{background:var(--color-success);border-color:var(--color-success)}
.task-ws-check svg{width:11px;height:11px;color:#fff}
.task-ws-check.sm{width:17px;height:17px}.task-ws-check.sm svg{width:9px;height:9px}
.task-ws-row-body{flex:1;min-width:0}
.task-ws-row-title{font-size:13.5px;font-weight:600;color:var(--text-primary);line-height:1.3;word-break:break-word}
.task-ws-row-title.done{text-decoration:line-through;color:var(--text-muted);font-weight:500}
.task-ws-urgent{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--color-error);background:var(--color-error-bg);border-radius:4px;padding:1px 5px;margin-right:6px;vertical-align:1px}
.task-ws-row-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.task-ws-chip{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:600;color:var(--text-secondary);background:color-mix(in srgb,var(--text-primary) 6%,transparent);border-radius:999px;padding:2px 7px}
.task-ws-chip-from{background:color-mix(in srgb,#bf5af2 14%,transparent);color:color-mix(in srgb,#bf5af2 78%,var(--text-primary))}
.task-ws-chip svg{width:10px;height:10px;opacity:.85}
.task-ws-chip.due-overdue{color:var(--color-error);background:var(--color-error-bg)}
.task-ws-chip.due-soon{color:var(--color-warning);background:var(--color-warning-bg)}
.task-ws-chip.priority-critical,.task-ws-chip.priority-high{color:var(--color-error);background:var(--color-error-bg)}
.task-ws-chip.priority-medium{color:var(--color-warning);background:var(--color-warning-bg)}
.task-ws-status{flex-shrink:0;align-self:flex-start;font-size:9.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;border-radius:999px;padding:3px 8px;background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-secondary)}
.task-ws-status.st-in_progress{color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 14%,transparent)}
.task-ws-status.st-blocked{color:var(--color-error);background:var(--color-error-bg)}
.task-ws-status.st-complete{color:var(--color-success);background:var(--color-success-bg)}
.task-ws-empty,.task-ws-subs-empty,.task-ws-rail-empty{font-size:12px;color:var(--text-muted);padding:8px 2px;font-style:italic}
/* Dependency graph (rail mini-graph + full project map) */
.task-ws-map-btn{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:5px 10px}
.task-ws-map-btn svg{width:13px;height:13px}
#taskWsMiniGraph .task-dep-svg{max-height:220px}
.task-dep-svg{overflow:visible}
.dep-map-host .task-dep-svg{max-height:none}
/* Rail Dependency HEALTH — project-wide analytics (additive to the middle detail). */
.tws-dh{display:flex;flex-direction:column;gap:2px}
.tws-dh-stat{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;border-bottom:.5px solid var(--border)}
.tws-dh-stat.pfv-drill{cursor:pointer;border-radius:var(--radius-sm);margin:0 -6px;padding:6px}
.tws-dh-stat.pfv-drill:hover{background:color-mix(in srgb,var(--app-accent) 6%,transparent)}
.tws-dh-lbl{font-size:12px;color:var(--text-secondary)}
.tws-dh-val{font-size:15px;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums}
.tws-dh-val.warn{color:var(--color-warning)}
.tws-dh-val.ok{color:var(--color-success)}
.tws-dh-top{padding:8px 0 4px}
.tws-dh-toptask{display:flex;align-items:center;gap:8px;width:100%;background:var(--surface-2);border:.5px solid var(--border);border-radius:var(--radius-md);padding:8px 10px;cursor:pointer;text-align:left;font-size:12.5px;color:var(--text-primary);transition:background var(--motion-fast,.15s),box-shadow var(--motion-fast,.15s),border-color var(--motion-fast,.15s)}
.tws-dh-toptask:hover{border-color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 6%,transparent);box-shadow:var(--shadow-e1)}
.tws-dh-topn{margin-left:auto;font-size:10.5px;font-weight:600;color:var(--color-warning);white-space:nowrap;flex-shrink:0}
.task-ws-map-link{display:block;width:100%;text-align:left;background:none;border:none;color:var(--app-accent);font-size:11.5px;font-weight:600;cursor:pointer;padding:8px 0 0}
.task-ws-map-link:hover{text-decoration:underline}
.task-dep-node text{pointer-events:none}
.task-dep-node.focus rect{filter:drop-shadow(0 2px 8px color-mix(in srgb,var(--app-accent) 40%,transparent))}
.task-dep-node.cp rect{stroke:var(--app-accent);stroke-width:2}
.dep-map-host{width:100%;max-height:64vh;min-height:200px;overflow:auto;background:var(--surface-2);border-radius:var(--radius-lg);padding:20px;display:flex;align-items:flex-start;justify-content:center}
.dep-map-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:.5px solid var(--border)}
.dep-map-leg-item{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-secondary)}
.dep-map-leg-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.dep-map-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-right:40px;gap:12px}
.dep-map-cp{font-size:11px;font-weight:600;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 10%,transparent);padding:3px 10px;border-radius:var(--radius-pill);white-space:nowrap;flex-shrink:0}
/* Detail pane */
.task-ws-detail-card,.stage-ws-detail-card{position:sticky;top:0}
.task-ws-detail-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 20px;gap:6px}
.task-ws-detail-empty-ico{width:36px;height:36px;color:color-mix(in srgb,var(--text-primary) 22%,transparent);margin-bottom:4px}
.task-ws-detail-empty-title{font-size:15px;font-weight:600;color:var(--text-primary)}
.task-ws-detail-empty-sub{font-size:12.5px;color:var(--text-muted);max-width:240px}
.task-ws-title-input{width:100%;box-sizing:border-box;font-size:16px;font-weight:600;line-height:1.3;color:var(--text-primary);background:var(--chrome-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);padding:9px 11px;resize:vertical;font-family:inherit;transition:border-color var(--motion-fast) var(--ease-out)}
.task-ws-title-input:focus{outline:none;border-color:var(--app-accent)}
.task-ws-done-line{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--color-success);margin-top:8px}
.task-ws-done-line svg{width:12px;height:12px}
.task-ws-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.task-ws-field{display:flex;flex-direction:column;gap:4px}
.task-ws-field-wide{grid-column:1 / -1}
.task-ws-field-lbl{font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text-muted)}
.task-ws-subs{margin-top:16px;padding-top:16px;border-top:.5px solid var(--border)}
.task-ws-subs-head{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
.task-ws-subs-count{font-variant-numeric:tabular-nums}
.task-ws-subs-track{height:5px;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 9%,transparent);overflow:hidden;margin-bottom:10px}
.task-ws-subs-fill{height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--color-success) 75%,var(--app-accent)),var(--color-success));border-radius:999px;transition:width var(--motion-base) var(--ease-spring)}
.task-ws-subs-list{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.task-ws-sub{display:flex;align-items:center;gap:8px;padding:5px 4px}
.task-ws-sub-text{flex:1;min-width:0;font-size:13px;color:var(--text-primary)}
.task-ws-sub.done .task-ws-sub-text{text-decoration:line-through;color:var(--text-muted)}
.task-ws-sub-del{flex-shrink:0;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:13px;padding:2px 5px;border-radius:5px;line-height:1;transition:color var(--motion-fast) var(--ease-out)}
.task-ws-sub-del:hover{color:var(--color-error)}
.task-ws-sub-add,.stage-ws-add{display:flex;gap:8px;align-items:center;margin-top:6px}
.task-ws-sub-add .field-input,.stage-ws-add .field-input{flex:1;min-width:0}
.task-ws-sub-add-btn,.stage-ws-add .btn{flex-shrink:0}
.task-ws-deps{margin-top:16px;padding-top:16px;border-top:.5px solid var(--border)}
.task-ws-deps-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:8px}
.task-ws-ready{font-size:11px;padding:2px 8px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--color-success) 14%,transparent);color:var(--color-success)}
.task-ws-ready.waiting{background:color-mix(in srgb,var(--color-warning) 16%,transparent);color:var(--color-warning)}
.task-ws-dep-row{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 8px;border-radius:var(--radius-md);background:var(--surface-2);margin-bottom:6px}
.task-ws-dep-row.done{opacity:.55}
.task-ws-dep-row.done .task-ws-dep-del{opacity:1}
.task-ws-dep-ico{width:13px;height:13px;color:var(--text-muted);flex-shrink:0}
.task-ws-dep-name{background:none;border:none;color:var(--text-primary);cursor:pointer;font-size:13px;text-align:left;flex:1;padding:0}
.task-ws-dep-name:hover{color:var(--app-accent);text-decoration:underline}
.task-ws-dep-reason{font-size:11px;color:var(--text-muted);font-style:italic}
.task-ws-dep-del{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:2px 4px;border-radius:var(--radius-sm)}
.task-ws-dep-del:hover{color:var(--app-danger);background:color-mix(in srgb,var(--app-danger) 10%,transparent)}
.task-ws-dep-add{margin-top:6px;font-size:12px;display:inline-flex;align-items:center;gap:6px;background:none;border:.5px dashed color-mix(in srgb,var(--border-strong,var(--border)) 90%,transparent);color:var(--app-accent);padding:6px 11px;border-radius:var(--radius-md);cursor:pointer;transition:background var(--motion-fast,.15s),border-color var(--motion-fast,.15s)}
.task-ws-dep-add:hover{background:color-mix(in srgb,var(--app-accent) 8%,transparent);border-color:var(--app-accent)}
.task-ws-dep-add svg{width:13px;height:13px;flex-shrink:0}
.task-ws-dep-blocking{margin-top:8px;font-size:11px;color:var(--text-muted)}
.task-ws-dep-link,.task-ws-deps-empty{background:none;border:none;color:var(--app-accent);cursor:pointer;font-size:11px;padding:0}
.task-ws-deps-empty{color:var(--text-muted);font-size:12px;padding:4px 2px}
.task-ws-comments{margin-top:16px;padding-top:16px;border-top:.5px solid var(--border)}
/* Blocker-context panel — peek slide-over → pin split-pane */
.bcx-panel{position:fixed;top:calc(var(--header-h,52px) + 8px);right:8px;height:calc(100vh - var(--header-h,52px) - 16px);width:min(440px,92vw);background:var(--surface-1);border:.5px solid var(--border);border-radius:var(--radius-lg);box-shadow:-8px 0 32px rgba(0,0,0,.18);transform:translateX(calc(100% + 12px));transition:transform .28s cubic-bezier(.4,0,.2,1);z-index:1050;display:flex;flex-direction:column;overflow:hidden}
.bcx-panel.open{transform:translateX(0)}
.bcx-backdrop{position:fixed;top:var(--header-h,52px);left:0;right:0;bottom:0;background:rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .28s;z-index:1049}
.bcx-panel.open ~ .bcx-backdrop,.bcx-backdrop.open{opacity:1;pointer-events:auto}
.bcx-panel.open:not(.pinned) ~ #bcxBackdrop{opacity:1;pointer-events:auto}
body.bcx-split .bcx-backdrop{opacity:0!important;pointer-events:none!important}
body.bcx-split #projectFullView{margin-right:min(440px,92vw);transition:margin .28s}
.bcx-head{display:flex;justify-content:space-between;align-items:center;padding:18px;border-bottom:.5px solid var(--border)}
.bcx-loading{color:var(--text-muted);font-size:13px}
.bcx-empty-state{display:flex;flex-direction:column;align-items:center;gap:10px;padding:32px 18px;color:var(--text-muted);text-align:center}
.bcx-empty-state svg{width:26px;height:26px;opacity:.4}
.bcx-title{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--text-primary)}
.bcx-title svg{width:16px;height:16px}
.bcx-actions{display:flex;gap:6px}
.bcx-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:6px;border-radius:var(--radius-sm)}
.bcx-btn svg{width:16px;height:16px;display:block}
.bcx-btn:hover{background:var(--surface-2);color:var(--text-primary)}
.bcx-body{padding:18px;overflow-y:auto;flex:1}
.bcx-proj{font-size:12px;color:var(--text-muted);margin-bottom:4px}
.bcx-task-title{font-size:17px;font-weight:600;color:var(--text-primary);margin-bottom:10px}
.bcx-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.bcx-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:3px 8px;border-radius:var(--radius-pill);background:var(--surface-2);color:var(--text-secondary)}
.bcx-chip svg{width:11px;height:11px}
.bcx-section{margin-bottom:18px}
.bcx-section-h{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:8px}
.bcx-uplink{display:block;width:100%;text-align:left;margin-bottom:6px;background:var(--surface-2);border:.5px solid var(--border);border-radius:var(--radius-md);padding:8px 10px;color:var(--text-primary);cursor:pointer;font-size:13px;transition:background var(--motion-fast,.15s),box-shadow var(--motion-fast,.15s),border-color var(--motion-fast,.15s)}
.bcx-uplink:hover{border-color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 6%,transparent);box-shadow:var(--shadow-e1)}
.bcx-foot{margin-top:16px;padding-top:14px;border-top:.5px solid var(--border);position:sticky;bottom:0;background:var(--surface-1)}
.bcx-foot .btn{width:100%}
@media(max-width:640px){.bcx-panel{width:100vw}body.bcx-split #projectFullView{margin-right:0}}
/* Rail */
.task-ws-donut,.stage-ws-rail-chart{display:flex;justify-content:center;align-items:center;width:100%;max-width:100%;padding:4px 0 2px;overflow:hidden;box-sizing:border-box}
.task-ws-donut > svg{margin:0 auto;flex:0 0 auto}
/* Item #35 — SOV by-division "show all" expander (subtle rounded text-button, no edge-strip). */
.sov-div-expander{display:block;width:100%;margin-top:8px;padding:7px 12px;border:none;background:color-mix(in srgb,var(--app-accent) 8%,transparent);color:var(--app-accent);font-size:11px;font-weight:600;letter-spacing:.01em;border-radius:9px;cursor:pointer;transition:background .15s ease,transform .12s ease}
.sov-div-expander:hover{background:color-mix(in srgb,var(--app-accent) 15%,transparent)}
.sov-div-expander:active{transform:scale(.985)}
.task-ws-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.task-ws-bar-row:last-child{margin-bottom:0}
.task-ws-bar-lbl{width:78px;flex-shrink:0;font-size:11.5px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task-ws-bar-track{flex:1;height:7px;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 8%,transparent);overflow:hidden}
.task-ws-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--app-accent) 70%,#fff),var(--app-accent));transition:width var(--motion-base) var(--ease-spring)}
.task-ws-bar-fill.muted{background:color-mix(in srgb,var(--text-primary) 28%,transparent)}
.task-ws-bar-fill.done{background:linear-gradient(90deg,color-mix(in srgb,var(--color-success,#34c759) 70%,#fff),var(--color-success,#34c759))}
.task-ws-bar-meta{flex-shrink:0;font-size:10.5px;font-weight:600;color:var(--text-muted);font-variant-numeric:tabular-nums;width:54px;text-align:right}
.task-ws-age-row{display:flex;align-items:center;gap:8px;padding:5px 2px;cursor:pointer;border-radius:6px;transition:background var(--motion-fast) var(--ease-out)}
.task-ws-age-row:hover{background:color-mix(in srgb,var(--app-accent) 6%,transparent)}
.task-ws-age-name{flex:1;min-width:0;font-size:12px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task-ws-age-due{flex-shrink:0;font-size:10.5px;font-weight:600;color:var(--text-muted)}
.task-ws-age-due.over{color:var(--color-error)}
/* ── G1 📘 Stages workspace ───────────────────────────────────────────────── */
.stage-ws-prog{margin-left:auto;font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:none;letter-spacing:0}
.stage-ws-prog-count{color:var(--text-primary);font-variant-numeric:tabular-nums}
.stage-ws-track{height:6px;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 9%,transparent);overflow:hidden;margin-bottom:12px}
.stage-ws-fill{height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--color-success) 72%,var(--app-accent)),var(--color-success));border-radius:999px;transition:width var(--motion-base) var(--ease-spring)}
.stage-ws-list{display:flex;flex-direction:column;gap:6px;margin:4px 0 12px}
.stage-ws-row{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--radius-md);background:var(--card-bg);border:0.5px solid color-mix(in srgb,var(--chrome-border) 70%,transparent);cursor:pointer;transition:all var(--motion-fast) var(--ease-out)}
.stage-ws-row:hover{box-shadow:var(--shadow-e1);transform:translateY(-1px);border-color:color-mix(in srgb,var(--app-accent) 30%,var(--chrome-border))}
.stage-ws-row-sel{border-color:var(--app-accent);box-shadow:var(--shadow-e2),inset 0 0 0 1px color-mix(in srgb,var(--app-accent) 35%,transparent);background:color-mix(in srgb,var(--app-accent) 5%,var(--card-bg))}
/* 'you are here' focus (Track-Q #15): completed rows rest as a slim done-row while work is in-motion. */
.stage-ws-collapsed{padding:6px 11px;opacity:.62}
.stage-ws-collapsed .stage-ws-status{display:none}
.stage-ws-collapsed .stage-ws-rbody .stage-ws-rtop{margin:0}
.stage-ws-collapsed:hover{opacity:1}
.stage-ws-donetag{flex-shrink:0;font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--color-success);background:color-mix(in srgb,var(--color-success) 12%,transparent);padding:2px 7px;border-radius:999px}
/* cont.34 — stage status marker as a lit Atira ORB (was a flat 11px dot); tone via --orbt per status */
.stage-ws-dot{flex-shrink:0;width:14px;height:14px;border-radius:50%;position:relative;--orbt:color-mix(in srgb,var(--text-primary) 30%,transparent);
  background-color:var(--orbt);
  background-image:radial-gradient(circle at 34% 28%,rgba(255,255,255,.62),transparent 48%),radial-gradient(circle at 66% 82%,rgba(0,0,0,.26),transparent 54%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 2px rgba(0,0,0,.2),0 1px 3px color-mix(in srgb,var(--orbt) 40%,transparent),0 0 0 .5px color-mix(in srgb,var(--orbt) 28%,transparent)}
.stage-ws-dot.st-in_progress{--orbt:var(--app-accent)}
.stage-ws-dot.st-complete{--orbt:var(--color-success)}
.stage-ws-dot.st-blocked,.stage-ws-dot.slip{--orbt:var(--color-error)}
[data-theme="midnight"] .stage-ws-dot,[data-theme="contrast"] .stage-ws-dot{background-image:radial-gradient(circle at 34% 28%,rgba(255,255,255,.42),transparent 48%),radial-gradient(circle at 66% 82%,rgba(0,0,0,.4),transparent 54%)}
/* Item 7 (2026-05-25) — was white-space:nowrap+ellipsis, which clipped longer
   phase names ("Pre-Construction", "Demo & Structure") in the full-page stages
   workspace. Let the full name show by wrapping. */
/* single-line ellipsis — NOT overflow-wrap:break-word, which (with flex:1;min-width:0 in a
   squeezed 300px master row) shattered long stage names into one-letter-per-line vertical
   text on hover. The full name is in the row's title= tooltip. */
/* cont.34 — 2-line stage row so the NAME reads FULL WIDTH (was crushed to ~3 chars beside the select) */
.stage-ws-rbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.stage-ws-rtop{display:flex;align-items:baseline;gap:8px;min-width:0}
.stage-ws-name{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--text-primary);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage-ws-row .stage-ws-rbody .stage-status-select{max-width:none;width:100%;align-self:stretch}
.stage-ws-date{flex-shrink:0;font-size:11px;font-weight:600;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.stage-ws-date.slip{color:var(--color-error)}
.stage-ws-nodate{flex-shrink:0;font-size:11px;color:var(--text-muted);font-style:italic}
/* Workspace stage rail is narrow (~268px). The status select + "No date" were
   starving the name to ~43px → mid-word wrap. Cap the select, hide "No date" until
   hover (the dot already encodes status; set a date on demand). Name gets the room. */
.stage-ws-row .stage-status-select{max-width:108px;text-overflow:ellipsis}
.stage-ws-row .stage-ws-nodate{opacity:0;width:0;overflow:hidden;transition:opacity var(--motion-fast)}
.stage-ws-row:hover .stage-ws-nodate{opacity:.8;width:auto}
.stage-ws-status{flex-shrink:0;width:auto;min-width:120px;height:auto;font-size:11px;padding:4px 8px}
.stage-ws-name-input{font-size:15px}
.stage-ws-stats{display:flex;gap:10px;margin-top:14px}
.stage-ws-stat{flex:1;background:var(--card-bg);border:0.5px solid color-mix(in srgb,var(--chrome-border) 70%,transparent);border-radius:var(--radius-md);padding:9px 10px;text-align:center}
.stage-ws-stat-val{display:block;font-size:14px;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums}
.stage-ws-stat-lbl{display:block;font-size:9.5px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--text-muted);margin-top:2px}
/* cont.34 — inside the white LINE DETAIL card these are SUB-elements, not a 3rd grey tier: flat/
   transparent, separated by the flex gap. Inherit the faint white-tile base from .stage-ws-stat. */
.sov-stat{position:relative;background:transparent;border:.5px solid color-mix(in srgb,var(--text-primary) 7%,transparent);box-shadow:none;overflow:hidden}
.sov-stat .stage-ws-stat-val{font-size:16px;letter-spacing:-.02em}
.sov-stat-gauge{display:block;height:4px;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 9%,transparent);margin:6px 2px 0;overflow:hidden}
.sov-stat-gauge i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--color-success) 82%,#000),var(--color-success));transition:width var(--motion-base,.22s) var(--ease-spring)}
@media (prefers-reduced-motion:reduce){.sov-stat-gauge i{transition:none}}
.stage-ws-sub-section{margin-top:16px;padding-top:14px;border-top:0.5px solid color-mix(in srgb,var(--chrome-border) 70%,transparent)}
.stage-ws-sub-title{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text-muted);margin-bottom:9px}
.stage-ws-sub-title svg{width:12px;height:12px;opacity:.85}
.stage-ws-loglist,.stage-ws-tasklist{display:flex;flex-direction:column;gap:5px}
.stage-ws-logrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 2px;font-size:12.5px}
.stage-ws-log-date{font-weight:600;color:var(--text-primary);font-variant-numeric:tabular-nums}
.stage-ws-log-meta{color:var(--text-secondary)}
.stage-ws-taskrow{display:flex;align-items:center;gap:8px;padding:5px 2px}
.stage-ws-taskrow.done .stage-ws-task-name{text-decoration:line-through;color:var(--text-muted)}
.stage-ws-task-dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--text-primary) 25%,transparent)}
.stage-ws-task-dot.st-in_progress{background:var(--app-accent)}
.stage-ws-task-dot.st-complete{background:var(--color-success)}
.stage-ws-task-dot.st-blocked{background:var(--color-error)}
.stage-ws-task-name{flex:1;min-width:0;font-size:12.5px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage-ws-task-due{flex-shrink:0;font-size:10.5px;font-weight:600;color:var(--text-muted);font-variant-numeric:tabular-nums}
.stage-ws-more{font-size:11px;color:var(--text-muted);margin-top:6px;font-style:italic}
/* ── G1 📘 Financials workspaces (Invoices · SOV · Change Orders · Estimates · POs) ── */
.fin-ws-list{display:flex;flex-direction:column;gap:7px;margin:6px 0 4px}
/* 🐢 fixed-section: a long master list (e.g. 16 SOV divisions) scrolls IN PLACE, bounded, instead of
   running down the whole page — which forced you to scroll PAST the workspace to reach the last item and
   stranded a big void beside the short detail/rail columns (Gavin flag). Padding room so the now-neutral
   row shadow + accent-ring selected state never clip. est-cards card grid opts out (it's not a scroll list). */
.pfv-ws-master .fin-ws-list,.sov-worktop-list .fin-ws-list{max-height:min(52vh,480px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:4px 6px;margin-left:-6px;margin-right:-6px;scrollbar-gutter:stable}
.pfv-ws-master .est-view-cards .fin-ws-list,.sov-worktop-list .est-view-cards .fin-ws-list{max-height:none;overflow:visible;padding:0;margin:0}
/* 📔 register controls (CO master; shared naming so other money workspaces can adopt) — a rounded
   pill-track seg for filter + sort, riding the existing seg language (um-seg family), never a stock control. */
.fin-ws-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:8px 0 2px}
.fin-ws-seg{display:inline-flex;gap:2px;padding:2.5px;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 6%,transparent);box-shadow:inset 0 1px 1.5px rgba(0,0,0,.05)}
.fin-ws-seg-btn{appearance:none;border:0;background:transparent;color:var(--text-secondary);font:inherit;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:background var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast) var(--ease-spring,ease-out)}
.fin-ws-seg-btn:hover:not(.on){color:var(--text-primary)}
.fin-ws-seg-btn:active{transform:scale(.95)}
.fin-ws-seg-btn.on{color:var(--app-accent);background:var(--card-bg);box-shadow:var(--shadow-e1),var(--bevel-top,inset 0 1px 0 rgba(255,255,255,.35))}
[data-theme="midnight"] .fin-ws-seg-btn.on{background:color-mix(in srgb,#fff 86%,var(--surface-3))}
.fin-ws-seg-btn .fws-n{font-size:10px;font-weight:700;padding:1px 5.5px;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 9%,transparent);color:var(--text-secondary)}
.fin-ws-seg-btn.on .fws-n{background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent)}
@media (prefers-reduced-motion:reduce){.fin-ws-seg-btn:active{transform:none}}
/* 📔 register footer — the shown set's Σ, quiet, hairline-separated */
.fin-ws-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 2px 0;padding:7px 4px 1px;border-top:1px solid color-mix(in srgb,var(--text-primary) 9%,transparent);font-size:11px;font-weight:600;color:var(--text-muted)}
.fin-ws-foot-sum{font-variant-numeric:tabular-nums;font-size:12px}
.fin-ws-foot-sum.pos{color:var(--color-success)}
.fin-ws-foot-sum.neg{color:var(--color-error)}
/* proto-35: role-grouped project-contacts master (Client/GC/Subs/Vendors/Other).
   Role-color dot header (NOT an edge strip) + count; rows keep the shared .fin-ws-row. */
.fin-ws-list.ct-grouped{gap:0}
.ct-role-group{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
.ct-role-group:last-child{margin-bottom:0}
.ct-role-label{display:flex;align-items:center;gap:8px;padding:2px 2px 1px;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.ct-rl-dot{width:8px;height:8px;border-radius:999px;flex:0 0 8px}
.ct-rl-n{margin-left:auto;font-weight:700;letter-spacing:0;color:var(--text-muted)}
/* 2026-06-02 ALL-IN polish — master-list rows now glossy + tactile (specular top
   edge, spring-press), shared across all financial + files/photos workspaces. */
/* 🐢 calmer financial-list rows (SOV/Invoices/POs/COs/Estimates share this): the old rich accent-tinted
   e3 shadow + a -2px lift + a 14px selected-glow read heavy & "colored/cut-off" in a dense narrow column
   (Gavin flag). Neutral soft elevation, a gentle non-lifting hover, and a clean flat selected state (accent
   ring + light tint, NO glow) — a rounded, contained treatment that stays tidy at list density. */
.fin-ws-row{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--radius-md);background:var(--card-bg);border:0.5px solid var(--chrome-border);box-shadow:0 1px 2px rgba(15,23,42,.06);cursor:pointer;transition:box-shadow var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out),background var(--motion-fast)}
.fin-ws-row:hover{box-shadow:0 2px 6px rgba(15,23,42,.09);border-color:color-mix(in srgb,var(--app-accent) 28%,var(--chrome-border))}
.fin-ws-row:active{background:color-mix(in srgb,var(--text-primary) 2%,var(--card-bg))}
.fin-ws-row-sel,.fin-ws-row-sel:hover{border-color:var(--app-accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--app-accent) 45%,transparent),0 1px 3px rgba(15,23,42,.08);background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 6%,var(--card-bg)),var(--card-bg))}
/* F6 #19 — bulk-select highlight on punch rows (.bulk-selected was scoped to .card/.task-item only).
   Rounded contained tint + ring — NO colored edge strip (the NO-COLORED-EDGE-STRIPS canon). */
.fin-ws-row.bulk-selected,.fin-ws-row.bulk-selected:hover{border-color:var(--app-accent);box-shadow:var(--shadow-e1),0 0 0 1.5px color-mix(in srgb,var(--app-accent) 45%,transparent);background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 11%,var(--card-bg)),var(--card-bg))}
.pn-bulk-check{width:18px;height:18px;border-radius:6px;border:1.5px solid color-mix(in srgb,var(--chrome-border) 80%,transparent);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;flex-shrink:0}
.pn-bulk-check.on{background:var(--app-accent);border-color:var(--app-accent)}
.pn-bulk-bar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:9px 11px;margin:0 0 10px;border-radius:12px;background:color-mix(in srgb,var(--app-accent) 7%,var(--card-bg));border:.5px solid color-mix(in srgb,var(--app-accent) 22%,transparent)}
.pn-bulk-count{font-size:12px;font-weight:700;color:var(--text-secondary);margin-right:2px}
.pn-bulk-del:not(:disabled){color:var(--color-error,#d04437)}
.pn-tpl-list{display:flex;flex-direction:column;gap:4px;max-height:300px;overflow:auto}
.pn-tpl-row{display:flex;align-items:center;gap:6px}
.pn-tpl-del{color:var(--text-muted)}
.fin-ws-row-body{flex:1;min-width:0}
/* cont.34 — money-workspace list titles (SOV/CO/PO/Invoices) wrap ≤2 lines instead of ellipsis-
   clipping the division/line name mid-word in the narrow master column (Rule 11 — show full name). */
.fin-ws-row-title{font-size:13.5px;font-weight:700;color:var(--text-primary);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;line-height:1.3}
/* gap#8 — SOV line-kind badge (deposit/stored-material/allowance; installed work has none) */
.sov-kind{display:inline-block;margin-left:7px;font-size:9.5px;font-weight:800;letter-spacing:.02em;padding:1px 7px;border-radius:999px;vertical-align:middle;background:color-mix(in srgb,var(--skc,var(--app-accent)) 14%,transparent);color:var(--skc,var(--app-accent))}
.sov-kind.dep{--skc:#0a84c9}
.sov-kind.stored{--skc:#8a5aa8}
.sov-kind.alw{--skc:#a8845a}
.fin-ws-row-sub{font-size:11px;color:var(--text-muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fin-ws-row-amt{flex-shrink:0;text-align:right;font-size:14px;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums}
.fin-ws-row-amt.neg{color:var(--color-error)}.fin-ws-row-amt.pos{color:var(--color-success)}
.fin-ws-pill{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:var(--radius-pill);text-transform:uppercase;letter-spacing:.3px;margin-top:3px}
.fin-ws-pill.fin-ws-pill-ico{display:inline-flex;align-items:center;gap:4px;vertical-align:middle}
.fin-ws-pill .fwp-ico{width:10px;height:10px;flex:0 0 auto}
.fin-ws-pill.paid{background:var(--inv-paid-bg);color:var(--inv-paid-fg)}
.fin-ws-pill.sent{background:var(--inv-sent-bg);color:var(--inv-sent-fg)}
.fin-ws-pill.partial{background:var(--inv-partial-bg);color:var(--inv-partial-fg)}
.fin-ws-pill.pending{background:var(--inv-pending-bg);color:var(--inv-pending-fg)}
.fin-ws-pill.approved{background:var(--color-success-bg);color:var(--color-success)}
.fin-ws-pill.rejected,.fin-ws-pill.overdue{background:var(--color-error-bg);color:var(--color-error)}
.fin-ws-pill.received{background:var(--color-success-bg);color:var(--color-success)}
.fin-ws-pill.open{background:var(--color-warning-bg);color:var(--color-warning)}
/* Phase B/D status pills (were unstyled — naked text in the row) */
.fin-ws-pill.draft{background:color-mix(in srgb,var(--text-primary) 9%,transparent);color:var(--text-secondary)}
.fin-ws-pill.requested{background:var(--color-info-bg,color-mix(in srgb,var(--color-info) 14%,transparent));color:var(--color-info)}
/* 📯 S1-C3 — per-record reconciliation note (small $ drift vs the executed/booked doc) */
.cod-recon{margin-top:8px}
.cod-recon-chip{appearance:none;border:none;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:5px 12px;border-radius:999px;background:var(--color-warning-bg,#fdf3e0);color:var(--co-pending-fg,#b45309);font-size:12px;font-weight:600;text-align:left}
.cod-recon-chip .ic{width:12px;height:12px;flex:0 0 auto}
.cod-recon-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cod-recon-add{appearance:none;border:none;background:none;cursor:pointer;font-family:inherit;font-size:12px;font-weight:600;color:var(--text-muted);padding:4px 0}
.cod-recon-add:hover{color:var(--text-secondary)}
/* 🪼 D2 — inline reconciliation-note field (replaces the old modal popup). */
.inv-recon-row{display:flex;align-items:center;gap:8px}
.inv-recon-ico{width:13px;height:13px;flex:0 0 auto;color:var(--color-warning)}
.inv-recon-input{flex:1 1 auto;min-width:0}
.inv-recon-clear{flex:0 0 auto;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--text-muted);border-radius:50%;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
.inv-recon-clear svg{width:12px;height:12px}
.inv-recon-clear:hover{background:color-mix(in srgb,var(--color-error) 12%,transparent);color:var(--color-error)}
/* 📯 S1-C4 — permit by-others chip + lifecycle trail + reinstate */
.perm-resp-chip{display:inline-block;padding:1px 8px;border-radius:999px;background:var(--color-info-bg,color-mix(in srgb,var(--color-info) 14%,transparent));color:var(--color-info);font-size:10.5px;font-weight:700;vertical-align:1px}
.perm-lifecycle{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:8px;font-size:11.5px;color:var(--text-secondary)}
.perm-lifecycle .ic{width:11px;height:11px;flex:0 0 auto;color:var(--text-muted)}
.perm-life-arrow{color:var(--text-muted)}
.perm-life-d{color:var(--text-muted);font-size:10.5px}
.perm-reinstate{padding:4px 10px;font-size:11.5px;margin-left:6px}
.perm-reinstate .ic{width:11px;height:11px;vertical-align:-1px;margin-right:3px}
.fin-ws-pill.pending_approval{background:var(--color-warning-bg);color:var(--color-warning)}
.fin-ws-pill.awarded,.fin-ws-pill.signed{background:var(--color-info-bg,color-mix(in srgb,var(--color-info) 14%,transparent));color:var(--color-info)}
.fin-ws-pill.closed{background:var(--color-success-bg);color:var(--color-success)}
.fin-ws-add{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.fin-ws-add .field-input{flex:1;min-width:90px}
.fin-ws-add .field-input.amt{flex:0 0 110px;min-width:90px}
.fin-ws-add .btn{flex-shrink:0}
.sov-row-gauge{display:flex;align-items:center;gap:9px;margin-top:6px}
.sov-row-track{position:relative;flex:1;min-width:0;height:6px;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 9%,transparent);overflow:hidden}
.sov-row-track i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--color-success) 75%,var(--app-accent)),var(--color-success));transition:width var(--motion-base) var(--ease-spring)}
.sov-row-pct{flex:0 0 auto;display:inline-flex;align-items:baseline;gap:4px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-secondary);background:color-mix(in srgb,var(--text-primary) 7%,transparent)}
.sov-row-pct span{font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
.sov-row-pct.is-part{color:color-mix(in srgb,var(--color-info) 76%,var(--text-primary));background:color-mix(in srgb,var(--color-info) 12%,transparent)}
.sov-row-pct.is-full{color:color-mix(in srgb,var(--color-success) 74%,var(--text-primary));background:color-mix(in srgb,var(--color-success) 15%,transparent)}
@media (prefers-reduced-motion:reduce){.sov-row-track i{transition:none}}
.fin-ws-detail-amt{font-size:26px;font-weight:800;color:var(--text-primary);font-variant-numeric:tabular-nums;letter-spacing:-.5px;margin-top:2px}
.fin-ws-detail-amt.neg{color:var(--color-error)}
/* Detailed estimating — cost code, category badge, markup breakdown, category rollup. */
.est-detail-cost{display:block;font-size:11.5px;font-weight:500;color:var(--text-muted);letter-spacing:0;margin-top:3px}
.est-code{font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 11%,transparent);padding:1px 6px;border-radius:var(--radius-tag);letter-spacing:.2px;vertical-align:1px}
.est-cat-badge{display:inline-block;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:1px 6px;border-radius:var(--radius-pill);margin-left:6px;vertical-align:1px}
.est-cat-labor{background:color-mix(in srgb,#ff9f0a 18%,transparent);color:color-mix(in srgb,#ff9f0a 78%,var(--text-primary))}
.est-cat-material{background:color-mix(in srgb,var(--color-info,#0a84ff) 16%,transparent);color:color-mix(in srgb,var(--color-info,#0a84ff) 76%,var(--text-primary))}
.est-cat-sub{background:color-mix(in srgb,#bf5af2 16%,transparent);color:color-mix(in srgb,#bf5af2 76%,var(--text-primary))}
.est-cat-equipment{background:color-mix(in srgb,#30d158 16%,transparent);color:color-mix(in srgb,#30d158 74%,var(--text-primary))}
.est-cat-other{background:color-mix(in srgb,var(--text-primary) 9%,transparent);color:var(--text-secondary)}
.est-ws-add .est-add-code{flex:0 0 120px;min-width:96px}
.est-ws-add .est-add-cat{flex:0 0 110px;min-width:92px}
.est-ws-add .est-add-desc{flex:1 1 140px;min-width:120px}
.est-cat-list{display:flex;flex-direction:column;gap:8px}
.est-cat-row{display:flex;align-items:center;gap:8px;font-size:12px}
.est-cat-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.est-cat-dot.est-cat-labor{background:#ff9f0a}.est-cat-dot.est-cat-material{background:var(--color-info,#0a84ff)}.est-cat-dot.est-cat-sub{background:#bf5af2}.est-cat-dot.est-cat-equipment{background:#30d158}.est-cat-dot.est-cat-other{background:color-mix(in srgb,var(--text-primary) 40%,transparent)}
.est-cat-row-lbl{flex:0 0 58px;color:var(--text-secondary);font-weight:500}
.est-cat-row-bar{flex:1;height:6px;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 8%,transparent);overflow:hidden;min-width:30px}
.est-cat-row-fill{display:block;height:100%;border-radius:999px}
/* ═══ P1 ESTIMATE BUILDER (.estb-*) — Gulf-themed full-page builder. All on V82
   tokens so it adapts across every theme. ═══ */
.estb{display:flex;flex-direction:column;min-height:0}
.estb-empty,.estb-blank{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:40px 20px;margin:auto;max-width:280px}
/* Full-page estimate empty-state — create the estimate right here (no modal hand-off). */
.estb-empty-create{max-width:420px;gap:6px}
.estb-empty-create .estb-empty-icon{width:46px;height:46px;display:flex;align-items:center;justify-content:center;color:var(--app-accent);margin-bottom:6px;border-radius:14px;background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 16%,transparent),color-mix(in srgb,var(--app-accent) 6%,transparent));box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.estb-empty-create .estb-empty-icon .ic{width:22px;height:22px}
.estb-empty-title{font-size:17px;font-weight:700;letter-spacing:-.01em}
.estb-empty-sub{font-size:13px;color:var(--text-muted);line-height:1.5;max-width:340px}
.estb-empty-form{display:flex;gap:8px;margin-top:14px;width:100%;max-width:380px;flex-wrap:wrap;justify-content:center}
.estb-empty-in{flex:1;min-width:180px}
.estb-newest{height:32px;display:inline-flex;align-items:center;gap:4px;padding:0 11px;border:0.5px solid var(--chrome-border);border-radius:var(--radius-pill);background:var(--surface-grad);color:var(--app-accent);font:inherit;font-size:11.5px;font-weight:700;cursor:pointer;box-shadow:var(--lg-edge),var(--shadow-e1);transition:transform var(--motion-fast) var(--ease-spring)}
.estb-newest:hover{transform:translateY(-1px)}
.estb-newest .ic{width:13px;height:13px}
.estb-blank-ico{width:36px;height:36px;color:var(--app-accent);opacity:.7;padding:8px;border-radius:11px;background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 14%,transparent),color-mix(in srgb,var(--app-accent) 6%,transparent));box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.estb-blank-t{font-size:14px;font-weight:700;color:var(--text-secondary);letter-spacing:-.2px}
.estb-blank-s{font-size:12px;color:var(--text-muted);line-height:1.45}
/* header: version switcher row */
.estb-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 2px 10px;flex-wrap:wrap}
.estb-head-l{display:flex;align-items:center;gap:9px;min-width:0;flex-wrap:wrap}
.estb-head-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.estb-switch{max-width:100%}
.estb-title{font-size:15px;font-weight:800;letter-spacing:-.3px;color:var(--on-app-bg)}
.estb-vchip{font-size:11px;font-weight:700;padding:1px 7px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--app-accent) 16%,transparent);color:var(--app-accent)}
.estb-switch,.estb-mode{height:32px;padding:0 30px 0 12px;border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);background:var(--surface-grad);color:var(--text-primary);font:inherit;font-size:13px;font-weight:600;cursor:pointer;box-shadow:var(--lg-edge),var(--shadow-e1);-webkit-appearance:none;appearance:none;background-image:linear-gradient(155deg,color-mix(in srgb,#fff 5%,var(--card-bg)),var(--card-bg) 58%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238e8e93' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center,0 0}
.estb-status{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;padding:2px 8px;border-radius:var(--radius-pill);background:var(--badge-neutral-bg);color:var(--badge-neutral-fg)}
.estb-status-draft{background:var(--badge-soft-bg);color:var(--text-muted)}
.estb-status-sent,.estb-status-submitted{background:var(--status-progress-bg);color:var(--status-progress-fg)}
.estb-frozen{font-size:11px;font-weight:700;color:var(--text-muted)}
.estb-mode-pill{font-size:12px;font-weight:600;color:var(--text-secondary)}
/* always-visible totals bar */
.estb-totbar{display:flex;background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);box-shadow:var(--lg-edge),var(--shadow-e2);overflow:hidden;margin-bottom:11px}
.estb-tot{flex:1;padding:10px 14px;border-right:0.5px solid color-mix(in srgb,var(--chrome-border) 60%,transparent)}
.estb-tot:last-child{border-right:none}
.estb-tot-k{font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted)}
.estb-tot-v{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.4px;margin-top:2px;color:var(--text-primary)}
.estb-tot-grand{background:linear-gradient(180deg,color-mix(in srgb,var(--app-accent) 7%,var(--card-bg)),var(--card-bg))}
.estb-tot-grand .estb-tot-v{color:var(--app-accent);font-size:19px}
/* Pass-2 (2026-06-05) rollup band — Subtotal + O&P = Proposal Total → Contract (real _estbTotals data) */
/* 2026-06-06 — proto rollup HERO: green gradient band (Subtotal + O&P = Proposal Total →
   Contract). Always-visible, compact. White text + frosted-glass inner cells on the green. */
/* pass-3 AUDIT FIX: deepened the green gradient so white text passes WCAG across the WHOLE rollup hero (was #2c885d 4.39 / #34a06a 3.29 fail; now #176545→#1f7a55, both ≥4.5). */
.estb-rollup{position:relative;border-radius:18px;padding:14px 18px;margin-bottom:14px;overflow:hidden;color:#fff;
  /* Match the TOP project hero (.proj-hero) — same --ph-tone-driven gradient so the rollup band and the
     project banner read as one identity. --ph-tone is set inline from the project's color; the #2c885d
     fallback is the same WCAG-safe dark green the hero falls back to. */
  background:linear-gradient(135deg,color-mix(in srgb,var(--ph-tone,#2c885d) 86%,#000) 0%,var(--ph-tone,#2c885d) 60%,color-mix(in srgb,var(--ph-tone,#2c885d) 92%,#000) 100%);
  box-shadow:var(--lg-edge-strong,inset 0 1px 0 rgba(255,255,255,.28)),var(--shadow-e3)}
.estb-rollup::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(130% 90% at 0% -10%,rgba(255,255,255,.22),transparent 55%)}
.estb-ru-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto 1fr auto 1.3fr;gap:14px;align-items:center}
.estb-ru-b .l{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;opacity:.82}
.estb-ru-b .v{font-size:25px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.05;margin-top:2px;color:#fff}
.estb-ru-b .s{font-size:10.5px;font-weight:600;opacity:.82;margin-top:2px}
.estb-ru-op{display:grid;place-items:center;font-size:22px;font-weight:300;opacity:.7}
.estb-ru-total{border-radius:14px;padding:11px 15px;text-align:right;background:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.estb-ru-total .l{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;opacity:.9}
.estb-ru-total .v{font-size:28px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.05;margin-top:2px;color:#fff}
.estb-ru-total .s{font-size:10.5px;font-weight:600;opacity:.82;margin-top:2px}
.estb-ru-cta{display:flex;flex-direction:column;justify-content:center;gap:8px}
.estb-ru-cta .btn-primary{background:#fff;color:#1f6f4e;border:0;box-shadow:0 6px 16px -7px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.6);font-weight:800;height:36px}
.estb-ru-cta .btn-primary:hover{filter:brightness(.98);transform:translateY(-1px)}
.estb-ru-callout{position:relative;z-index:1;display:flex;align-items:center;gap:10px;margin-top:12px;padding:9px 14px;border-radius:12px;background:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.25);font-size:12px;font-weight:600;color:rgba(255,255,255,.95)}
.estb-ru-callout b{color:#fff}
.estb-ru-callout .pulse{width:9px;height:9px;border-radius:999px;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.3);flex-shrink:0}
@media (max-width:760px){.estb-ru-grid{grid-template-columns:1fr;gap:9px}.estb-ru-op{display:none}.estb-ru-total{text-align:left}}
/* A4 (2026-06-11) — the hover was identical to the resting shadow → invisible
   (Gavin: "Gulf estimates-banner hover barely shows"). Band cells stay
   no-transform (overflow container); hover reads via a stronger contained
   white wash + ring instead. Works on the gradient across all themes. */
.estb-ru-b.metric-door:hover,.estb-ru-total.metric-door:hover{transform:none;background:rgba(255,255,255,.27);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 1px rgba(255,255,255,.38)}
/* Track-Q door affordance on the estimate headline tiles (dark gradient → light cue). */
.estb-ru-b.metric-door,.estb-ru-total.metric-door{cursor:pointer}
.estb-ru-cue{color:rgba(255,255,255,.6);font-weight:800;margin-left:2px;transition:color var(--motion-fast) var(--ease-out)}
.estb-ru-b.metric-door:hover .estb-ru-cue,.estb-ru-total.metric-door:hover .estb-ru-cue{color:rgba(255,255,255,.95)}
.estb-ru-b.metric-door:active,.estb-ru-total.metric-door:active{background:rgba(255,255,255,.34)}
.estb-ru-b.metric-door:focus-visible,.estb-ru-total.metric-door:focus-visible{outline:2px solid rgba(255,255,255,.85);outline-offset:-2px;border-radius:12px}

/* 2026-06-06 — collapsible footer/rail panels: caret toggle + headline-when-collapsed. */
.estb-panel-caret{font-size:9px;width:11px;flex:0 0 11px;display:inline-flex;align-items:center;justify-content:center;transition:transform var(--motion-fast) var(--ease-spring);opacity:.6}
.estb-panel-caret.collapsed{transform:rotate(-90deg)}
.estb-panel-caret .ic,.estb-div-caret .ic,.estb-out-caret{width:11px;height:11px}
/* Estimate-builder chip/label sprite (Rule 17): inline before the text, inherits the tone. */
.estb-chip .estb-ic,.estb-frozen .estb-ic{width:13px;height:13px;vertical-align:-2px;margin-right:1px}
.estb-sn-title .estb-ic,.estb-wf-edit .estb-ic,.bo-head-title .estb-ic{width:14px;height:14px;vertical-align:-2px;margin-right:3px}
.estb-wf-toggle,.estb-cov-toggle,.estb-out-toggle,.estb-prov-toggle{display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:0;margin:0;font:inherit;cursor:pointer;color:inherit;flex:1;text-align:left}
.estb-wf-headline,.estb-cov-headline,.estb-out-headline,.estb-prov-headline{font-size:13px;font-weight:800;color:var(--text-primary);font-variant-numeric:tabular-nums;margin-left:auto}
.estb-panel-col .estb-wf-h,.estb-panel-col .estb-cov-h,.estb-panel-col .estb-out-h,.estb-panel-col .estb-prov-head{margin-bottom:0;padding-bottom:0;border-bottom:0}
/* estimate lifecycle strip (honest provenance — real dates/states, no fabricated avatar chain) */
.estb-prov{border-radius:14px;padding:12px 15px;margin-bottom:12px;background:var(--surface-grad);box-shadow:var(--bevel-top),var(--shadow-e1);border:.5px solid rgba(0,0,0,.05)}
.estb-prov-head{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.estb-prov-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}
.estb-prov-chain{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.estb-prov-step{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--text-muted)}
.estb-prov-step.done{color:var(--text-primary)}
.estb-prov-dot{width:8px;height:8px;border-radius:999px;background:var(--surface-3,#d1d1d6)}
.estb-prov-step.done .estb-prov-dot{background:var(--color-success)}
.estb-prov-date{font-weight:600;color:var(--text-muted);font-size:11px}
.estb-prov-arrow{color:var(--text-muted);font-size:13px}
.estb-prov-note{font-size:11px;color:var(--text-muted);margin-top:8px;font-weight:600}
/* 2026-06-06 — Ball-in-court avatar chain (drafted → reviewed → signed). */
.estb-prov-chain2{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.estb-prov-step2{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:12px;background:color-mix(in srgb,var(--text-primary) 3%,var(--card-bg));border:.5px solid var(--chrome-border);transition:background var(--motion-fast),box-shadow var(--motion-fast)}
.estb-prov-step2.done{background:color-mix(in srgb,var(--color-success) 7%,var(--card-bg));border-color:color-mix(in srgb,var(--color-success) 22%,var(--chrome-border))}
.estb-prov-step2.todo[role=button]{cursor:pointer;border-style:dashed}
.estb-prov-step2.todo[role=button]:hover{background:color-mix(in srgb,var(--app-accent) 8%,var(--card-bg));box-shadow:var(--shadow-e1)}
.estb-prov-av{width:30px;height:30px;flex:0 0 30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;box-shadow:var(--shadow-e1),inset 0 1px 0 rgba(255,255,255,.25)}
.estb-prov-av-empty{background:transparent;color:var(--text-muted);border:1.5px dashed var(--chrome-border);box-shadow:none;font-size:16px;font-weight:400}
.estb-prov-meta{display:flex;flex-direction:column;gap:0;min-width:0}
.estb-prov-role{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
.estb-prov-who{font-size:12.5px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.estb-prov-step2.todo .estb-prov-who{color:var(--app-accent);font-weight:700}
.estb-prov-arrow2{color:var(--text-muted);font-size:14px;flex:0 0 auto}
/* toolbar */
.estb-toolbar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
/* S1-C7 🧊 — "More" overflow chip + its popover menu (collapses 8 task chips off the toolbar). */
.estb-chip-more{margin-left:auto}
.estb-more-menu{display:flex;flex-direction:column;min-width:200px;padding:4px}
.estb-more-item{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;border-radius:9px;background:transparent;color:var(--text-primary);font:inherit;font-size:12.5px;font-weight:600;text-align:left;cursor:pointer;transition:background .12s ease}
.estb-more-item:hover{background:var(--surface-2,rgba(20,30,48,.06))}
.estb-more-item .estb-ic{width:14px;height:14px;flex:0 0 14px;opacity:.75}
.estb-chip{height:32px;display:inline-flex;align-items:center;gap:5px;padding:0 12px;border:0.5px solid var(--chrome-border);border-radius:var(--radius-pill);background:var(--surface-grad);color:var(--text-primary);font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;box-shadow:var(--lg-edge),var(--shadow-e1);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-base)}
.estb-chip:hover{box-shadow:var(--lg-edge),var(--shadow-e2)}
.estb-chip:active{transform:scale(.96)}
.estb-chip[disabled]{opacity:.45;pointer-events:none}
.estb-chip-pri{background:linear-gradient(180deg,color-mix(in srgb,#fff 16%,var(--app-accent)),var(--app-accent));color:var(--on-accent);border-color:var(--app-accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),var(--shadow-e1)}
.estb-chip-go{margin-left:auto;background:color-mix(in srgb,var(--color-success) 14%,transparent);color:color-mix(in srgb,var(--color-success) 78%,var(--text-primary));border-color:color-mix(in srgb,var(--color-success) 30%,transparent)}
/* body: builder | library */
.estb-body{display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:12px;align-items:start}
.estb-build{min-width:0;display:flex;flex-direction:column;gap:11px}
/* division card */
.estb-div{background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);box-shadow:var(--lg-edge),var(--shadow-e2);overflow:hidden;transition:box-shadow var(--motion-base)}
.estb-div.estb-drop-on{box-shadow:var(--lg-edge),var(--shadow-e3),0 0 0 2px var(--dc,var(--app-accent))}
/* 2026-06-06 — proto .div-bar: header tinted in the division's CSI color (--dc), collapsible
   via a caret, subtotal always visible (even when collapsed). */
.estb-div-h{display:flex;align-items:center;gap:9px;padding:11px 14px;cursor:pointer;background:linear-gradient(160deg,color-mix(in srgb,var(--dc,var(--app-accent)) 10%,var(--card-bg)),color-mix(in srgb,var(--dc,var(--app-accent)) 3%,var(--card-bg)));border-bottom:0.5px solid var(--chrome-border);transition:background var(--motion-fast)}
.estb-div-h:hover{background:linear-gradient(160deg,color-mix(in srgb,var(--dc,var(--app-accent)) 15%,var(--card-bg)),color-mix(in srgb,var(--dc,var(--app-accent)) 6%,var(--card-bg)))}
.estb-div-collapsed .estb-div-h{border-bottom:0}
.estb-div-caret{font-size:9px;color:var(--text-muted);width:11px;flex:0 0 11px;transition:transform var(--motion-fast) var(--ease-spring);display:inline-flex;justify-content:center}
.estb-div-caret.collapsed{transform:rotate(-90deg)}
.estb-div-ung{background:linear-gradient(160deg,color-mix(in srgb,var(--text-primary) 4%,var(--card-bg)),var(--card-bg))}
.estb-div-no{background:var(--dc,var(--app-accent));color:#fff;border-radius:7px;padding:2px 8px;font-size:10.5px;font-weight:800;letter-spacing:.02em;font-variant-numeric:tabular-nums;box-shadow:inset 0 1px 0 rgba(255,255,255,.3);flex:0 0 auto}
.estb-div-name{font-weight:800;letter-spacing:-.2px;font-size:13.5px;color:var(--text-primary);cursor:default;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:340px}
.estb-div-h:not(.estb-div-ung) .estb-div-name{cursor:text}
.estb-div-count{font-size:11px;font-weight:700;color:var(--text-muted);flex:0 0 auto}
.estb-div-sub{margin-left:auto;font-weight:800;color:color-mix(in srgb,var(--dc,var(--app-accent)) 72%,var(--text-primary));font-variant-numeric:tabular-nums;font-size:15px;letter-spacing:-.01em;flex:0 0 auto}
.estb-div-x{width:24px;height:24px;border:none;background:transparent;border-radius:7px;color:var(--text-muted);cursor:pointer;font-size:13px;display:inline-flex;align-items:center;justify-content:center;transition:background var(--motion-fast),color var(--motion-fast)}
.estb-div-x:hover{background:color-mix(in srgb,var(--color-error) 12%,transparent);color:var(--color-error)}
.estb-grip{color:color-mix(in srgb,var(--text-primary) 22%,transparent);cursor:grab;font-size:13px;flex:0 0 auto}
/* column grid (header + rows share columns) */
.estb-ghead,.estb-line{display:grid;grid-template-columns:16px minmax(0,1fr) 58px 44px 84px 52px 104px 92px;align-items:center;gap:0}
.estb-ghead{padding:6px 13px;border-bottom:0.5px solid color-mix(in srgb,var(--chrome-border) 60%,transparent)}
.estb-ghead>div{font-size:8.5px;font-weight:700;color:var(--text-tertiary,var(--text-muted));text-transform:uppercase;letter-spacing:.5px;padding:0 4px}
.estb-ghead .ta-r,.estb-acts{text-align:right;justify-self:end}
/* numeric cells FILL their grid track (justify-self:stretch) and right-align text within it — so a wide
   value can't shrink-to-content and overflow into the next column. text clips inside the box if ever too
   wide (clip falls on the left, by MKUP, never over the ACTIONS icons). */
.estb-num{text-align:right;justify-self:stretch;overflow:hidden}
.estb-line{padding:8px 13px;border-bottom:0.5px solid color-mix(in srgb,var(--chrome-border) 40%,transparent);cursor:pointer;transition:background var(--motion-fast)}
.estb-line:last-child{border-bottom:none}
.estb-line:hover{background:color-mix(in srgb,var(--app-accent) 5%,transparent)}
.estb-line.estb-line-sel{background:color-mix(in srgb,var(--app-accent) 11%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--app-accent) 32%,transparent)}
.estb-line.estb-dragging{opacity:.45}
.estb-line>div{padding:0 4px;min-width:0}
/* cont.34 — estimate line descriptions carry real scope; wrap to ≤2 lines instead of ellipsis-
   clipping mid-word (Rule 11 — show full wording when layout allows). Rows grow to fit cleanly. */
.estb-desc .estb-nm{font-weight:600;letter-spacing:-.1px;color:var(--text-primary);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;gap:2px;line-height:1.32}
.estb-desc .estb-tr{font-size:10px;color:var(--text-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.estb-num{font-variant-numeric:tabular-nums;color:var(--text-secondary);font-size:12.5px}
.estb-num.estb-num-tot{font-weight:800;color:var(--text-primary)}
/* Inline-editable grid cell (Batch 1, P0-2 / 1a) — looks like a flat number until hover/focus, then
   reveals as an editable input. The input fills the cell; right-aligned tabular numerals; the displayed
   (formatted) value is shown via the data-attr only when blurred+unfocused via :not(:focus) overlay. */
.estb-cell{position:relative;padding:0!important;min-width:0}
.estb-cell-in{display:block;width:100%;box-sizing:border-box;height:24px;border:1px solid transparent;border-radius:6px;background:transparent;
  color:var(--text-secondary);font:inherit;font-size:12.5px;font-variant-numeric:tabular-nums;
  text-align:right;padding:0 5px;cursor:text;transition:background var(--motion-fast),border-color var(--motion-fast)}
.estb-cell-in::placeholder{color:var(--text-tertiary,var(--text-muted));opacity:.5}
.estb-line:hover .estb-cell-in{background:color-mix(in srgb,var(--chrome-border) 22%,transparent)}
.estb-cell-in:hover{border-color:color-mix(in srgb,var(--app-accent) 28%,transparent)}
.estb-cell-in:focus{outline:none;background:var(--surface-1,var(--bg-elevated,#fff));
  border-color:var(--app-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 22%,transparent);color:var(--text-primary)}
.estb-cell-ro{opacity:.85} /* frozen estimate → read-only cell */
.estb-cell-in.estb-cell-inh{color:var(--text-muted);font-style:italic} /* inherited markup (dim until edited) */
.estb-cell-in.estb-cell-inh:focus{font-style:normal;color:var(--text-primary)}
/* Slide-in line-detail panel (P0-2 "both" — depth panel beside the inline grid). Fixed to the right,
   slides in when a line is selected; a dim scrim closes it. Full-height, own scroll. */
.estb-detail-scrim{position:fixed;inset:0;background:color-mix(in srgb,var(--text-primary) 22%,transparent);
  opacity:0;pointer-events:none;transition:opacity var(--motion-med);z-index:60}
.estb-detail-scrim.open{opacity:1;pointer-events:auto}
.estb-detail-panel{position:fixed;top:0;right:0;height:100vh;width:420px;max-width:92vw;z-index:61;
  background:var(--card-bg);border-left:0.5px solid var(--chrome-border);box-shadow:-8px 0 40px rgba(0,0,0,.18);
  transform:translateX(100%);transition:transform var(--motion-med) var(--ease-spring);
  overflow-y:auto;overflow-x:hidden;padding:16px 16px 40px}
.estb-detail-panel.open{transform:translateX(0)}
.estb-detail-x{position:absolute;top:12px;right:12px;width:30px;height:30px;border:none;background:var(--surface-2);
  border-radius:8px;color:var(--text-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;z-index:2;
  transition:background var(--motion-fast),color var(--motion-fast)}
.estb-detail-x:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent)}
.estb-detail-x svg{width:15px;height:15px}
@media (max-width:560px){.estb-detail-panel{width:100vw;max-width:100vw}}
.estb-acts{display:flex;gap:2px;justify-content:flex-end;padding:0 0 0 8px}
/* TOTAL never bleeds into ACTIONS: the number cell clips to its box (right-aligned, so any clip is
   on the left where MKUP sits, not over the icons). Column is sized to fit the largest per-line total. */
.estb-num.estb-num-tot{overflow:hidden;text-overflow:clip;white-space:nowrap}
.estb-lbtn{position:relative;width:26px;height:26px;border:none;background:transparent;border-radius:7px;color:var(--text-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.estb-lbtn:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent)}
.estb-lbtn:active{transform:scale(.9)}
.estb-lbtn svg{width:14px;height:14px}
.estb-lbtn.has::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:var(--color-warning);top:3px;right:3px}
.estb-div-empty{padding:14px;text-align:center;font-size:11.5px;color:var(--text-muted)}
.estb-lnadd{padding:8px 13px;font-weight:600;color:var(--app-accent);font-size:11.5px;cursor:pointer;border-top:1px dashed color-mix(in srgb,var(--chrome-border) 70%,transparent)}
.estb-lnadd:hover{background:color-mix(in srgb,var(--app-accent) 5%,transparent)}
/* library sidebar */
.estb-lib{background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);box-shadow:var(--lg-edge),var(--shadow-e1);padding:10px;position:sticky;top:8px;display:flex;flex-direction:column;max-height:calc(100vh - 24px)}
/* tabs + search stay pinned; the body fills the rest of the rail and scrolls — so the library uses
   the full right-side area instead of hugging its (often empty) content. */
.estb-lib .estb-lib-tabs,.estb-lib .estb-lib-searchwrap{flex:0 0 auto}
.estb-lib-body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column}
.estb-lib-body .estb-lib-list{flex:0 0 auto}
.estb-lib-body .estb-lib-add{margin-top:auto}
.estb-lib-tabs{display:flex;gap:3px;background:var(--surface-2);padding:3px;border-radius:9px;margin-bottom:8px}
.estb-lib-tab{flex:1;text-align:center;font-size:9.5px;font-weight:700;padding:5px;border-radius:7px;color:var(--text-muted);cursor:pointer}
.estb-lib-tab-on{background:var(--card-bg);color:var(--app-accent);box-shadow:var(--shadow-e1)}
.estb-lib-search{padding:7px 10px;border:0.5px solid var(--chrome-border);border-radius:9px;color:var(--text-muted);background:var(--surface-2);font-size:11px;margin-bottom:8px}
.estb-lib-soon{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;padding:22px 10px}
/* P2 library — search input + draggable cards + price-history popup */
.estb-lib-search{width:100%;box-sizing:border-box;display:block;font:inherit}
.estb-lib-searchwrap{position:relative;margin-bottom:8px}
.estb-lib-searchwrap .estb-lib-search{margin-bottom:0;padding-left:30px}
.estb-lib-searchic{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--text-muted);pointer-events:none;opacity:.7}
.estb-lib-add .estb-ic{width:12px;height:12px;vertical-align:-2px;margin-right:2px}
.estb-lib-list{display:flex;flex-direction:column;gap:6px}
.estb-lib-card{display:flex;align-items:center;gap:8px;padding:8px 10px;border:0.5px solid var(--chrome-border);border-radius:11px;background:var(--surface-2);cursor:grab;transition:box-shadow .16s ease,transform .16s ease}
.estb-lib-card:hover{box-shadow:var(--shadow-e2);transform:translateY(-1px)}
.estb-lib-card:active{cursor:grabbing}
.estb-lib-card.estb-dragging{opacity:.45}
.estb-lib-card-main{flex:1;min-width:0}
.estb-lib-card-nm{font-size:12px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.estb-lib-card-sub{font-size:10px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.estb-lib-card-cost{font-size:12px;font-weight:800;color:var(--text-primary);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;flex:0 0 auto}
.estb-lib-trend{margin-left:3px;font-size:9px;display:inline-flex;align-items:center}
.estb-lib-trend .ic{width:11px;height:11px}
.estb-lib-trend.up{color:var(--color-error)}
.estb-lib-trend.down{color:var(--color-success,#1a9d4b)}
.estb-lib-trend.down .ic{transform:rotate(180deg)}
.estb-lib-meta{display:block;font-size:9px;font-weight:600;color:var(--text-muted)}
/* P4 — edit affordance on a library card (hover-revealed; opens the full item editor) */
.estb-lib-card-edit{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:0;border-radius:8px;background:transparent;color:var(--text-muted);cursor:pointer;opacity:0;transition:opacity .14s ease,background .14s ease,color .14s ease}
.estb-lib-card:hover .estb-lib-card-edit{opacity:1}
.estb-lib-card-edit:hover{background:var(--hover-overlay,rgba(0,0,0,.06));color:var(--text-primary)}
@media (hover:none),(pointer:coarse){.estb-lib-card-edit{opacity:1}}
.estb-lib-add{margin-top:8px;padding:8px;text-align:center;font-size:11.5px;font-weight:700;color:var(--app-accent);border:1px dashed color-mix(in srgb,var(--app-accent) 40%,transparent);border-radius:9px;background:color-mix(in srgb,var(--app-accent) 5%,transparent);cursor:pointer}
.estb-lib-add:hover{background:color-mix(in srgb,var(--app-accent) 10%,transparent)}
.estb-hist-pop{max-width:300px;max-height:60vh;overflow:auto}
.estb-hist-sec{margin-top:10px;margin-bottom:3px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted)}
.estb-hist-row{display:flex;justify-content:space-between;gap:12px;padding:5px 2px;font-size:12px;font-variant-numeric:tabular-nums;color:var(--text-primary);border-bottom:0.5px solid color-mix(in srgb,var(--border) 55%,transparent)}
.estb-hist-empty{font-size:11.5px;color:var(--text-muted);padding:5px 2px}
.estb-drift{margin-left:4px;color:var(--color-error);cursor:help;font-size:10px;display:inline-flex;align-items:center}
.estb-drift .ic,.estb-flag-to .ic{width:11px;height:11px}
/* P3 — markup precedence, waterfall footer, margin slider, alternates, cost/sell view */
.estb-tot-wf{font-size:11px;opacity:.7;cursor:help}
.estb-chip-tog.on{background:color-mix(in srgb,var(--app-accent) 12%,var(--card-bg));border-color:color-mix(in srgb,var(--app-accent) 35%,transparent);color:var(--app-accent)}
.estb-div-mk{margin-left:7px;font-size:10.5px;font-weight:700;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 9%,transparent);padding:1px 6px;border-radius:6px;cursor:pointer;white-space:nowrap}
.estb-div-mk-set{color:var(--text-muted);background:transparent;border:1px dashed var(--chrome-border);font-weight:600}
.estb-div-mk:hover{background:color-mix(in srgb,var(--app-accent) 16%,transparent)}
.estb-mk-inh{color:var(--text-muted);font-style:italic;font-size:11px;cursor:help}
.estb-flag{margin-left:5px;font-size:8.5px;font-weight:800;letter-spacing:.4px;padding:1px 4px;border-radius:4px;vertical-align:middle}
.estb-flag-alt{color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 13%,transparent)}
.estb-flag-alw{color:var(--text-muted);background:var(--surface-2)}
/* F3 — per-line tri-state taxability chip (rounded pill; signal via fill, no edge-strip). */
.estb-tax{margin-left:5px;font-size:8.5px;font-weight:800;letter-spacing:.3px;padding:1px 7px;border-radius:999px;vertical-align:middle;cursor:pointer;text-transform:uppercase;transition:filter .12s ease,background .12s ease}
.estb-tax:hover{filter:brightness(.97)}
.estb-tax:focus-visible{outline:2px solid var(--app-accent);outline-offset:1px}
.estb-tax-def{color:var(--text-muted);background:var(--surface-2)}
.estb-tax-tax{color:var(--co-pending-fg,#b45309);background:var(--color-warning-bg,#fdf3e0)}
.estb-tax-exempt{color:var(--color-success,#1a8754);background:var(--color-success-bg,#dcf5e8)}
.estb-line-alt{opacity:.82}
.estb-num-cost{color:var(--text-muted)}
.estb-footer{margin-top:12px}
/* ── Estimate Accuracy Intelligence ─────────────────────────────────────────
   Solid-white floating panels (depth via elevation, never color tints); rounded
   everywhere; direction signalled by semantic TEXT/PILL color, never an edge-strip. */
.estb-line-wrap{display:block}
.estb-miss-badge svg{color:var(--warn,#d97706)}
.estb-nudge{display:flex;align-items:center;gap:8px;margin:0 13px 7px;padding:7px 11px;background:color-mix(in srgb,var(--app-accent) 6%,var(--card-bg));border:0.5px solid color-mix(in srgb,var(--app-accent) 22%,transparent);border-radius:11px;box-shadow:var(--shadow-e1);font-size:11.5px;color:var(--text-secondary)}
.estb-nudge-ico{width:14px;height:14px;color:var(--app-accent);flex:none}
.estb-nudge-txt{flex:1;min-width:0}
.estb-nudge-txt b{color:var(--text-primary);font-weight:700}
.estb-nudge-pct.under{color:var(--err,#dc2626)}
.estb-nudge-pct.over{color:var(--ok,#16a34a)}
.estb-nudge-apply{font-size:11px;font-weight:700;color:#fff;background:var(--app-accent);border:none;border-radius:8px;padding:4px 11px;cursor:pointer;flex:none;transition:filter var(--motion-fast)}
.estb-nudge-apply:hover{filter:brightness(1.08)}
.estb-nudge-x{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:8px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;flex:none}
.estb-nudge-x:hover{background:color-mix(in srgb,var(--text-muted) 14%,transparent)}
.estb-nudge-x svg{width:10px;height:10px}
/* mark-a-miss sheet */
.ea-miss{display:flex;flex-direction:column;gap:13px;min-width:340px}
.ea-miss-h{display:flex;align-items:center;gap:11px}
.ea-miss-h-ico{width:22px;height:22px;color:var(--warn,#d97706);flex:none}
.ea-miss-title{font-size:16px;font-weight:800;color:var(--text-primary)}
.ea-miss-sub{font-size:12px;color:var(--text-muted);margin-top:1px}
.ea-row{display:flex;flex-direction:column;gap:5px}
.ea-row>label{font-size:11px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.4px}
.ea-grid2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.ea-causes{display:flex;flex-wrap:wrap;gap:6px}
.ea-cause{font-size:12px;font-weight:600;color:var(--text-secondary);background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:9px;padding:6px 11px;cursor:pointer;transition:all var(--motion-fast)}
.ea-cause:hover{border-color:color-mix(in srgb,var(--app-accent) 40%,transparent)}
.ea-cause.on{color:#fff;background:var(--app-accent);border-color:var(--app-accent)}
.ea-miss input,.ea-miss textarea{font:inherit;font-size:13px;padding:8px 10px;border:0.5px solid var(--chrome-border);border-radius:9px;background:var(--input-bg,var(--card-bg));color:var(--text-primary);width:100%;box-sizing:border-box}
.ea-miss input:disabled{opacity:.6}
.ea-push{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-secondary);cursor:pointer}
.ea-act-preview{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--app-accent);min-height:16px}
.ea-act-ico{width:13px;height:13px}
.ea-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px}
.ea-foot-r{display:flex;gap:8px;margin-left:auto}
.ea-undo{color:var(--err,#dc2626)}
/* ── Communication Nervous System — Turn-into action sheet + spawn chip + from-chat banner ── */
.m2r{display:flex;flex-direction:column;gap:13px;min-width:340px}
.m2r-h{display:flex;align-items:center;gap:12px;margin-bottom:2px}
.m2r-h-mark{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:var(--lg-bg);-webkit-backdrop-filter:var(--lg-refract);backdrop-filter:var(--lg-refract);box-shadow:var(--lg-edge),var(--shadow-e2);color:var(--app-accent)}
.m2r-h-mark svg{width:18px;height:18px}
.m2r-title{font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary)}
.m2r-sub{font-size:12.5px;color:var(--text-muted);margin-top:2px;font-weight:500}
.m2r-row{display:flex;flex-direction:column;gap:5px}
.m2r-row>label{font-size:10.5px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}
.m2r .ea-foot{margin-top:6px;padding-top:14px;border-top:.5px solid color-mix(in srgb,var(--text-primary) 8%,transparent)}
.m2r #m2rGo{box-shadow:var(--shadow-e1),inset 0 1px 0 rgba(255,255,255,.18)}
.m2r #m2rGo:hover{box-shadow:var(--shadow-e2),inset 0 1px 0 rgba(255,255,255,.22)}
.m2r #m2rGo:active{transform:scale(.98)}
@media (prefers-reduced-transparency:reduce){.m2r-h-mark{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}}
/* m2cal — styled calendar-date modal (replaces window.prompt); reuses .m2r-* header + .field-input */
.m2cal{display:flex;flex-direction:column;gap:14px;min-width:320px}
.m2cal .ea-foot{margin-top:6px;padding-top:14px;border-top:.5px solid color-mix(in srgb,var(--text-primary) 8%,transparent)}
.m2r-targets{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
.m2r-target{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--text-secondary);background:var(--card-bg);border:.5px solid color-mix(in srgb,var(--text-primary) 9%,transparent);border-radius:var(--radius-md);padding:11px 8px 9px;cursor:pointer;box-shadow:var(--shadow-e1);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast) var(--ease-out),background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast)}
.m2r-target .m2r-tg-ico{width:18px;height:18px;color:var(--text-muted);transition:color var(--motion-fast)}
.m2r-target:hover{transform:translateY(-1px);box-shadow:var(--shadow-e2);border-color:color-mix(in srgb,var(--app-accent) 32%,transparent)}
.m2r-target:hover .m2r-tg-ico{color:var(--app-accent)}
.m2r-target:active{transform:translateY(0) scale(.97);box-shadow:var(--shadow-e1)}
.m2r-target.on{color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 10%,var(--card-bg));border-color:color-mix(in srgb,var(--app-accent) 55%,transparent);box-shadow:var(--shadow-e2),inset 0 0 0 1px color-mix(in srgb,var(--app-accent) 22%,transparent)}
.m2r-target.on .m2r-tg-ico{color:var(--app-accent)}
@media (prefers-reduced-motion:reduce){.m2r-target,.m2r-target:hover,.m2r-target:active{transition:none;transform:none}}
.tc-spawn-chip{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 8%,transparent);border:0.5px solid color-mix(in srgb,var(--app-accent) 22%,transparent);border-radius:7px;padding:2px 7px;margin:2px 3px 0 0;text-decoration:none;cursor:pointer}
.tc-spawn-chip:hover{background:color-mix(in srgb,var(--app-accent) 14%,transparent)}
.tc-spawn-x{margin-left:2px;opacity:.6;font-weight:700}
.tc-spawn-x:hover{opacity:1}
/* Pillar B — decision-of-record chip: a distinct governance tone (amber), icon-signalled (no edge-strip). */
.tc-decision-chip{color:var(--co-pending-fg,#9a6212);background:var(--color-warning-bg,#fdf3e0);border-color:color-mix(in srgb,var(--co-pending-fg,#9a6212) 20%,transparent)}
.tc-decision-chip:hover{background:color-mix(in srgb,var(--co-pending-fg,#9a6212) 16%,transparent)}
.tc-decision-chip .tc-dec-ico{width:11px;height:11px;margin-right:1px}
/* F4 — "Generate doc" action appended to the decision-of-record chip */
.tc-decision-chip .tc-dec-doc{display:inline-flex;align-items:center;gap:2px;margin-left:6px;padding-left:6px;border-left:1px solid color-mix(in srgb,var(--co-pending-fg,#9a6212) 24%,transparent);font-weight:600}
.tc-decision-chip .tc-dec-doc:hover{text-decoration:underline}
/* F4 — Generate-document modal (reuses .rt-confirm-overlay scrim) */
.f4-panel{max-width:540px;width:calc(100vw - 32px);text-align:left}
.f4-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.f4-ico{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:color-mix(in srgb,var(--app-accent) 16%,transparent);color:var(--app-accent)}
.f4-ico svg{width:18px;height:18px}
.f4-title{font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary)}
.f4-sub{font-size:12.5px;color:var(--text-secondary,var(--text-muted));margin-top:2px}
.f4-section-label{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin:12px 0 6px}
.f4-tpls{display:flex;flex-direction:column;gap:6px}
.f4-tpl{position:relative;display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;width:100%;padding:11px 38px 11px 13px;border:.5px solid color-mix(in srgb,var(--text-primary) 8%,transparent);background:var(--card-bg);border-radius:var(--radius-md);cursor:pointer;box-shadow:var(--shadow-e1);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast) var(--ease-out),background var(--motion-fast),border-color var(--motion-fast)}
.f4-tpl:hover{transform:translateY(-1px);box-shadow:var(--shadow-e2);border-color:color-mix(in srgb,var(--app-accent) 30%,transparent)}
.f4-tpl:active{transform:translateY(0) scale(.985);box-shadow:var(--shadow-e1)}
.f4-tpl.f4-on{border-color:color-mix(in srgb,var(--app-accent) 55%,transparent);background:color-mix(in srgb,var(--app-accent) 7%,var(--card-bg));box-shadow:var(--shadow-e2),inset 0 0 0 1px color-mix(in srgb,var(--app-accent) 20%,transparent)}
.f4-tpl-name{font-size:13px;font-weight:700;color:var(--text-primary)}
.f4-tpl-why{font-size:11.5px;color:var(--text-muted);line-height:1.35}
.f4-tpl-check{position:absolute;top:50%;right:12px;transform:translateY(-50%) scale(.6);width:18px;height:18px;color:var(--app-accent);opacity:0;transition:opacity var(--motion-fast),transform var(--motion-base) var(--ease-spring)}
.f4-tpl.f4-on .f4-tpl-check{opacity:1;transform:translateY(-50%) scale(1)}
@media (prefers-reduced-motion:reduce){.f4-tpl,.f4-tpl:hover,.f4-tpl:active,.f4-tpl-check{transition:none;transform:none}.f4-tpl:hover{transform:none}}
.f4-empty{font-size:12.5px;color:var(--text-muted);padding:4px 2px}
.f4-owner{display:flex;align-items:center;gap:9px;margin-top:14px;padding:9px 12px;font-size:12.5px;font-weight:500;color:var(--text-primary);cursor:pointer;background:var(--surface-2);border:.5px solid color-mix(in srgb,var(--text-primary) 7%,transparent);border-radius:var(--radius-md);transition:background var(--motion-fast),border-color var(--motion-fast)}
.f4-owner:hover{border-color:color-mix(in srgb,var(--app-accent) 28%,transparent)}
.f4-owner:has(#f4Owner:checked){background:color-mix(in srgb,var(--app-accent) 8%,var(--surface-2));border-color:color-mix(in srgb,var(--app-accent) 40%,transparent)}
.f4-owner #f4Owner{width:17px;height:17px;accent-color:var(--app-accent);border-radius:5px;cursor:pointer;flex:0 0 auto}
.f4-owner #f4Owner:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 22%,transparent);border-radius:5px}
.f4-fields[hidden]{display:none}
.f4-field{margin-top:8px}
.f4-status{margin-top:10px;font-size:12.5px;color:var(--text-secondary,var(--text-muted))}
.f4-status[hidden]{display:none}
.f4-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.fc-card{background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-e1);padding:10px 12px;margin-top:10px}
.fc-h{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.4px;margin-bottom:7px}
.fc-h-ico,.fc-ico{width:13px;height:13px;color:var(--app-accent);flex:none}
.fc-row{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:transparent;border:none;border-radius:9px;padding:7px 8px;cursor:pointer;color:var(--text-primary)}
.fc-row:hover{background:color-mix(in srgb,var(--app-accent) 6%,transparent)}
.fc-snip{flex:1;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fc-meta{font-size:11px;color:var(--text-muted)}
.fc-na{font-size:11px;color:var(--text-muted);padding:6px 8px}
/* Pillar B — record decision chip (a record reflecting a decision of record). */
.dec-chip-wrap{margin-top:9px}
.dec-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:650;color:var(--co-pending-fg,#9a6212);background:var(--color-warning-bg,#fdf3e0);border:0.5px solid color-mix(in srgb,var(--co-pending-fg,#9a6212) 22%,transparent);border-radius:9px;padding:6px 11px;cursor:pointer;transition:background var(--motion-fast,.15s)}
.dec-chip:hover{background:color-mix(in srgb,var(--co-pending-fg,#9a6212) 14%,transparent)}
.dec-chip-ico{width:13px;height:13px;flex:none}
/* scorecard panel — solid card, elevation, no tints/strips */
.estb-sc{background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);box-shadow:var(--lg-edge),var(--shadow-e1);padding:13px 15px;margin-top:12px}
.estb-sc:empty{display:none}
.estb-sc-head{display:flex;align-items:center;gap:8px;margin-bottom:11px;padding-bottom:8px;border-bottom:0.5px solid var(--border)}
.estb-sc-ico{width:15px;height:15px;color:var(--app-accent)}
.estb-sc-title{font-size:12px;font-weight:800;color:var(--text-primary);text-transform:uppercase;letter-spacing:.4px}
.estb-sc-fresh{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;color:var(--text-muted)}
.estb-sc-fresh .ic{width:11px;height:11px;opacity:.75}
.ea-sc-top{display:flex;align-items:center;gap:16px;margin-bottom:13px}
.ea-score{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:86px;padding:10px 14px;border-radius:13px;background:var(--card-bg);box-shadow:var(--shadow-e2)}
.ea-score-num{font-size:30px;font-weight:850;line-height:1;letter-spacing:-.5px}
.ea-score-lbl{font-size:9.5px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-top:5px}
.ea-score-good .ea-score-num{color:var(--ok,#16a34a)}
.ea-score-mid .ea-score-num{color:var(--warn,#d97706)}
.ea-score-low .ea-score-num{color:var(--err,#dc2626)}
.ea-score-cal .ea-score-num{font-size:16px;color:var(--text-muted);font-weight:700}
.ea-spark-wrap{flex:1}
.ea-spark-lbl{font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.ea-spark{display:block}
.ea-spark-mid{stroke:var(--border);stroke-width:1;stroke-dasharray:2 3}
.ea-spark-line{fill:none;stroke:var(--app-accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ea-verdict{margin-bottom:13px}
.ea-verdict-h{font-size:11px;font-weight:800;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.4px;margin-bottom:7px}
.ea-vrow{display:grid;grid-template-columns:18px 1fr auto auto;gap:9px;align-items:center;padding:6px 0;border-bottom:0.5px solid color-mix(in srgb,var(--border) 60%,transparent)}
.ea-vrow:last-child{border-bottom:none}
.ea-vrank{font-size:11px;font-weight:800;color:var(--text-muted);text-align:center}
.ea-vlbl{font-size:12.5px;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ea-vbias{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.ea-vdollar{font-size:12.5px;font-weight:800;color:var(--text-primary);font-variant-numeric:tabular-nums;min-width:64px;text-align:right}
.ea-vbias.under,.ea-tbias.under,.ea-bh-bias.under,.ea-slice.under{color:var(--err,#dc2626)}
.ea-vbias.over,.ea-tbias.over,.ea-bh-bias.over,.ea-slice.over{color:var(--ok,#16a34a)}
.ea-tbl{display:flex;flex-direction:column}
.ea-th{display:grid;grid-template-columns:1fr 56px 70px 28px;gap:8px;font-size:9px;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;padding:0 0 5px;border-bottom:0.5px solid var(--border)}
.ea-th span:not(:first-child){text-align:right}
.ea-trow{padding:7px 0;border-bottom:0.5px solid color-mix(in srgb,var(--border) 55%,transparent)}
.ea-trow:last-child{border-bottom:none}
.ea-trow-main{display:grid;grid-template-columns:1fr 56px 70px 28px;gap:8px;align-items:center}
.ea-tcode{font-size:12.5px;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ea-tbias{font-size:12px;font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.ea-tdollar{font-size:12.5px;font-weight:700;color:var(--text-secondary);text-align:right;font-variant-numeric:tabular-nums}
.ea-tn{font-size:12px;color:var(--text-muted);text-align:right;font-variant-numeric:tabular-nums}
.ea-slices{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px;padding-left:2px}
.ea-slice{font-size:10.5px;font-weight:600;color:var(--text-secondary);background:color-mix(in srgb,var(--text-muted) 9%,transparent);border-radius:7px;padding:3px 8px}
.ea-empty{padding:18px 8px;text-align:center}
.ea-empty-t{font-size:13px;font-weight:700;color:var(--text-secondary)}
.ea-empty-sub{font-size:11.5px;color:var(--text-muted);margin-top:5px;max-width:340px;margin-left:auto;margin-right:auto;line-height:1.5}
/* bid-health gate sheet */
.ea-bh{display:flex;flex-direction:column;gap:13px;min-width:340px}
.ea-bh-h{display:flex;align-items:center;gap:11px}
.ea-bh-h-ico{width:22px;height:22px;color:var(--warn,#d97706);flex:none}
.ea-bh-title{font-size:16px;font-weight:800;color:var(--text-primary)}
.ea-bh-sub{font-size:12px;color:var(--text-muted);margin-top:1px}
.ea-bh-list{display:flex;flex-direction:column;gap:1px;max-height:280px;overflow:auto}
.ea-bh-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:0.5px solid color-mix(in srgb,var(--border) 55%,transparent)}
.ea-bh-desc{font-size:12.5px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ea-bh-bias{font-size:12px;font-weight:800;flex:none;font-variant-numeric:tabular-nums}
.estb-wf{background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);box-shadow:var(--lg-edge),var(--shadow-e1);padding:12px 14px;max-width:520px;margin-left:auto}
.estb-wf-h{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding-bottom:7px;border-bottom:0.5px solid var(--border)}
.estb-wf-title{font-size:12px;font-weight:800;color:var(--text-primary);flex:1;text-transform:uppercase;letter-spacing:.4px}
.estb-wf-edit{font-size:11px;font-weight:700;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 8%,transparent);border:0.5px solid color-mix(in srgb,var(--app-accent) 25%,transparent);border-radius:7px;padding:4px 9px;cursor:pointer}
.estb-wf-edit:hover{background:color-mix(in srgb,var(--app-accent) 14%,transparent)}
.estb-wf-row{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:baseline;padding:4px 0;font-size:12.5px;font-variant-numeric:tabular-nums}
.estb-wf-l{color:var(--text-secondary)}
.estb-wf-pct{color:var(--text-muted);font-size:11px;font-weight:600}
.estb-wf-a{color:var(--text-muted);text-align:right;min-width:64px}
.estb-wf-r{color:var(--text-primary);font-weight:600;text-align:right;min-width:80px}
.estb-wf-base{border-bottom:0.5px solid var(--border);padding-bottom:6px;margin-bottom:2px;font-weight:600}
.estb-wf-base .estb-wf-l{color:var(--text-primary)}
.estb-wf-grand{border-top:1.5px solid var(--border);margin-top:4px;padding-top:7px;font-size:14px;font-weight:800}
.estb-wf-grand .estb-wf-l,.estb-wf-grand .estb-wf-r{color:var(--app-accent)}
.estb-wf-alt,.estb-wf-rnd{font-size:11.5px}
.estb-wf-alt .estb-wf-l,.estb-wf-rnd .estb-wf-l{color:var(--text-muted)}
.estb-wf-empty{font-size:11.5px;color:var(--text-muted);padding:6px 0;font-style:italic}
.estb-wf-form{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;margin:8px 0}
.estb-wf-f{display:flex;flex-direction:column;gap:3px;font-size:11px;font-weight:600;color:var(--text-secondary)}
.estb-wf-f input,.estb-wf-f select{font:inherit;font-size:12.5px;padding:6px 8px;border:0.5px solid var(--chrome-border);border-radius:8px;background:var(--surface-2);color:var(--text-primary)}
.estb-mg-wrap{padding:10px 4px 4px}
.estb-mg-range{width:100%;accent-color:var(--app-accent)}
.estb-mg-read{margin-top:9px;font-size:12.5px;color:var(--text-secondary);text-align:center}
.estb-mg-read b{color:var(--app-accent)}
@media (max-width:1100px){.estb-wf{max-width:none;margin-left:0}}
/* P4 — quote coverage meter, bid-leveling matrix, deepened quote popup, confidence dot */
/* S1-C7 🧊 — footer analytics rail: segmented control on top, 2-col grid below. */
.estb-footer{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.estb-foot-seg{display:inline-flex;gap:3px;padding:3px;border-radius:12px;background:var(--surface-2,rgba(20,30,48,.05));border:.5px solid var(--chrome-border);align-self:flex-start;flex-wrap:wrap}
.estb-foot-tab{appearance:none;border:0;background:transparent;border-radius:9px;padding:6px 13px;font-size:12.5px;font-weight:700;letter-spacing:-.1px;color:var(--text-secondary,var(--text-muted));cursor:pointer;transition:background .14s ease,color .14s ease,box-shadow .14s ease}
.estb-foot-tab:hover{color:var(--text-primary)}
.estb-foot-tab.on{background:var(--card-bg);color:var(--text-primary);box-shadow:0 1px 3px rgba(20,30,48,.14),inset 0 1px 0 rgba(255,255,255,.5)}
.estb-foot-tab:focus-visible{outline:2px solid var(--app-accent);outline-offset:2px}
.estb-foot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.estb-foot-grid.is-solo{grid-template-columns:1fr}
/* the panels sized themselves with flex:1 1 320px for the old wrap; inside the grid they should just fill their cell */
.estb-foot-grid > .estb-cov,.estb-foot-grid > .estb-wf,.estb-foot-grid > .estb-prov-step2,.estb-foot-grid > .estb-sc,.estb-foot-grid > .estb-out{flex:none!important;min-width:0!important;width:auto!important;margin:0}
@media(max-width:900px){.estb-foot-grid{grid-template-columns:1fr}}
.estb-footer-legacy{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
.estb-cov{flex:1 1 320px;min-width:300px;background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);box-shadow:var(--lg-edge),var(--shadow-e1);padding:12px 14px}
.estb-cov-h{display:flex;align-items:center;gap:8px;margin-bottom:9px;padding-bottom:7px;border-bottom:0.5px solid var(--border)}
.estb-cov-title{font-size:12px;font-weight:800;color:var(--text-primary);flex:1;text-transform:uppercase;letter-spacing:.4px}
.estb-cov-levtog{font-size:11px;font-weight:700;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 8%,transparent);border:0.5px solid color-mix(in srgb,var(--app-accent) 25%,transparent);border-radius:7px;padding:4px 9px;cursor:pointer}
.estb-cov-levtog.on{background:color-mix(in srgb,var(--app-accent) 16%,transparent)}
.estb-cov-row{display:grid;grid-template-columns:1fr 90px 38px;gap:9px;align-items:center;margin:7px 0}
.estb-cov-lbl{font-size:12px;font-weight:600;color:var(--text-primary);display:flex;flex-direction:column}
.estb-cov-sub{font-size:10px;font-weight:500;color:var(--text-muted)}
.estb-cov-track{height:8px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.estb-cov-fill{height:100%;border-radius:5px;transition:width var(--motion-base)}
.estb-cov-fill.q{background:var(--app-accent)}
.estb-cov-fill.f{background:var(--color-success,#1a9d4b)}
.estb-cov-fill.a{background:var(--color-warning,#d99a4a)}  /* awaiting RFQ response */
.estb-cov-pct{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;text-align:right;color:var(--text-primary)}
.estb-cov-mix{display:flex;height:7px;border-radius:4px;overflow:hidden;margin-top:8px;background:var(--surface-2)}
.estb-cov-seg{height:100%}
.cm-firm{background:var(--color-success,#1a9d4b)}.cm-est{background:var(--app-accent)}.cm-place{background:#e0a030}.cm-un{background:var(--text-muted)}
.estb-lev-wrap{margin-top:10px;overflow-x:auto;border-top:0.5px solid var(--border);padding-top:9px}
.estb-lev{display:inline-block;min-width:100%}
.estb-lev-row{display:flex}
.estb-lev-head .estb-lev-cell{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--text-muted);background:var(--surface-2)}
.estb-lev-cell{flex:0 0 80px;padding:5px 7px;font-size:11px;font-variant-numeric:tabular-nums;border:0.5px solid var(--border);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.estb-lev-line{flex:0 0 150px;text-align:left;font-weight:600;color:var(--text-primary)}
.estb-lev-val{cursor:pointer;color:var(--text-primary)}
.estb-lev-val:hover{background:color-mix(in srgb,var(--app-accent) 8%,transparent)}
.estb-lev-val.lev-low{background:color-mix(in srgb,var(--color-success,#1a9d4b) 13%,transparent);font-weight:700}
.estb-lev-val.lev-outlier{color:var(--color-error)}
.estb-lev-val.lev-chosen{outline:1.5px solid var(--app-accent);outline-offset:-1.5px}
.estb-lev-val .lev-dot{margin-left:3px;color:var(--app-accent);font-size:8px}
.estb-lev-empty-cell{color:var(--text-muted)}
.estb-lev-empty{font-size:11.5px;color:var(--text-muted);padding:8px 0;font-style:italic}
/* deepened 📎 quote popup */
.estb-q-pop-wide{min-width:300px;max-width:340px}
.estb-q-stats{display:flex;gap:6px;margin:2px 0 7px;font-size:10px}
.estb-q-stats .eq-stat{flex:1;text-align:center;padding:3px 4px;border-radius:6px;background:var(--surface-2);font-weight:700}
.estb-q-stats .eq-low{color:var(--color-success,#1a9d4b)}.estb-q-stats .eq-high{color:var(--color-error)}
.estb-q-row{display:flex;align-items:center;gap:7px;padding:5px 3px;border-bottom:0.5px solid color-mix(in srgb,var(--border) 55%,transparent);font-size:12px}
.estb-q-row.estb-q-chosen{background:color-mix(in srgb,var(--app-accent) 6%,transparent)}
.estb-q-v{flex:1;min-width:0;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.estb-q-a{font-weight:800;font-variant-numeric:tabular-nums;color:var(--app-accent);white-space:nowrap;text-align:right}
.estb-q-u{display:block;font-size:9.5px;font-weight:600;color:var(--text-muted)}
.estb-q-acts{display:flex;gap:3px;flex:0 0 auto}
.eq-mini{font-size:10px;font-weight:700;padding:2px 6px;border:0.5px solid var(--chrome-border);border-radius:6px;background:var(--surface-2);color:var(--app-accent);cursor:pointer}
.eq-mini:hover{background:color-mix(in srgb,var(--app-accent) 10%,transparent)}
.eq-chosen-tag,.eq-rec-tag,.eq-low-tag,.eq-outlier-tag{margin-left:4px;font-size:8px;font-weight:800;padding:1px 4px;border-radius:4px;vertical-align:middle}
.eq-chosen-tag{color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 14%,transparent)}
.eq-rec-tag{color:#e0a030}.eq-low-tag{color:var(--color-success,#1a9d4b);background:color-mix(in srgb,var(--color-success,#1a9d4b) 12%,transparent)}
.eq-outlier-tag{color:var(--color-error);background:color-mix(in srgb,var(--color-error) 12%,transparent)}
.estb-q-quickadd{display:flex;gap:5px;margin-top:9px}
.estb-q-qv{flex:1;min-width:0}.estb-q-qa{flex:0 0 70px}
.estb-q-qv,.estb-q-qa{font:inherit;font-size:11.5px;padding:6px 8px;border:0.5px solid var(--chrome-border);border-radius:7px;background:var(--surface-2);color:var(--text-primary)}
.estb-q-qbtn{flex:0 0 auto;font-size:14px;font-weight:800;padding:0 11px;border:0.5px solid color-mix(in srgb,var(--app-accent) 30%,transparent);border-radius:7px;background:color-mix(in srgb,var(--app-accent) 8%,transparent);color:var(--app-accent);cursor:pointer}
.estb-q-applyrow{display:flex;gap:6px;margin-top:7px}
.estb-q-apply{flex:1;font-size:11px;font-weight:700;padding:6px;border:0.5px dashed color-mix(in srgb,var(--app-accent) 35%,transparent);border-radius:7px;background:transparent;color:var(--app-accent);cursor:pointer}
.estb-q-apply:hover{background:color-mix(in srgb,var(--app-accent) 8%,transparent)}
.estb-q-filechips{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.estb-q-chip{font-size:10px;font-weight:600;color:var(--text-secondary);background:var(--surface-2);border-radius:6px;padding:2px 6px;display:inline-flex;align-items:center;gap:3px}
.estb-q-chip .estb-ic{width:11px;height:11px}
.eq-mini-ic{display:inline-flex;align-items:center;justify-content:center}
.eq-mini-ic .estb-ic{width:12px;height:12px}
.estb-q-apply .estb-ic{width:12px;height:12px;vertical-align:-2px;margin-right:2px}
.estb-q-chip-x{border:none;background:none;color:var(--text-muted);cursor:pointer;font-size:12px;line-height:1;padding:0}
.estb-conf{margin-right:4px;font-size:9px;vertical-align:middle}
.estb-conf-firm{color:var(--color-success,#1a9d4b)}.estb-conf-estimate{color:var(--app-accent)}.estb-conf-placeholder{color:#e0a030}
.estb-flag-to{color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 11%,transparent)}
@media (max-width:1100px){.estb-cov{min-width:0;flex-basis:100%}}
/* #19 — bid-leveling scope normalizer panel (under the leveling matrix). Severity via tint,
   no edge-strip; the carry button is the one accent action. */
.estb-sn{margin-top:10px;border-top:0.5px solid var(--border);padding-top:9px}
.estb-sn-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.estb-sn-title{font-size:12px;font-weight:700;color:var(--text-secondary);letter-spacing:.2px}
.estb-sn-warn{font-size:11px;font-weight:700;color:color-mix(in srgb,var(--color-warning) 84%,var(--text-primary))}
.estb-sn-ok{font-size:11px;font-weight:600;color:color-mix(in srgb,var(--color-success) 78%,var(--text-primary))}
.estb-sn-row{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-warning) 9%,transparent);margin-bottom:6px}
.estb-sn-line{flex:1;min-width:0}
.estb-sn-line-desc{font-size:12.5px;font-weight:700;color:var(--text-primary)}
.estb-sn-line-sub{font-size:11.5px;color:var(--text-secondary);margin:2px 0 5px}
.estb-sn-items{display:flex;flex-wrap:wrap;gap:5px}
.estb-sn-item{font-size:11px;font-weight:600;padding:2px 8px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--color-error) 13%,transparent);color:color-mix(in srgb,var(--color-error) 82%,var(--text-primary))}
.estb-sn-carry{flex-shrink:0;appearance:none;border:0.5px solid color-mix(in srgb,var(--app-accent) 32%,transparent);background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent);font-size:11.5px;font-weight:700;padding:6px 12px;border-radius:var(--radius-pill);cursor:pointer;font-family:inherit;transition:background var(--motion-fast)}
.estb-sn-carry:hover{background:color-mix(in srgb,var(--app-accent) 22%,transparent)}
@media (max-width:560px){.estb-sn-row{flex-direction:column}.estb-sn-carry{width:100%}}
/* P5 — win/loss outcome chip (header) + project margin-correlation panel + paste hint */
.estb-out-chip{font-size:11px;font-weight:800;padding:5px 11px;border-radius:var(--radius-pill);border:0.5px solid var(--chrome-border);background:var(--surface-grad);cursor:pointer;box-shadow:var(--lg-edge),var(--shadow-e1);white-space:nowrap}
.estb-out-untagged{color:var(--text-muted);font-weight:600}
.estb-out-won{color:#fff;background:var(--color-success,#1a9d4b);border-color:transparent}
.estb-out-lost{color:#fff;background:var(--color-error);border-color:transparent}
.estb-out-no_bid{color:var(--text-primary);background:var(--surface-2)}
.estb-out{flex:1 1 280px;min-width:260px;background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);box-shadow:var(--lg-edge),var(--shadow-e1);padding:12px 14px}
.estb-out-h{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding-bottom:7px;border-bottom:0.5px solid var(--border)}
.estb-out-title{font-size:12px;font-weight:800;color:var(--text-primary);flex:1;text-transform:uppercase;letter-spacing:.4px}
.estb-out-wr{font-size:11px;font-weight:700;color:var(--app-accent)}
.estb-out-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:9px;align-items:center;padding:4px 0;font-size:12.5px;font-variant-numeric:tabular-nums}
.estb-out-dot{width:9px;height:9px;border-radius:50%}
.estb-out-dot.won{background:var(--color-success,#1a9d4b)}.estb-out-dot.lost{background:var(--color-error)}.estb-out-dot.nobid{background:var(--text-muted)}
.estb-out-lbl{color:var(--text-primary);font-weight:600}
.estb-out-n{color:var(--text-muted)}
.estb-out-m{font-weight:800;color:var(--text-primary)}
.estb-out-foot{margin-top:9px;padding-top:8px;border-top:0.5px solid var(--border);font-size:11px;color:var(--text-muted);line-height:1.5}
.estb-out-foot b{color:var(--app-accent)}
.estb-paste-hint{margin-left:6px;font-size:10px;font-weight:500;color:var(--text-muted);opacity:.7}
.estb-div:focus-within .estb-paste-hint,.estb-div:focus .estb-paste-hint{opacity:1;color:var(--app-accent)}
@media (max-width:1100px){.estb-out{min-width:0;flex-basis:100%}}
@media (hover:none),(pointer:coarse){.estb-lib-card{cursor:default}}
/* line ⋯ menu (uses the shared .ctx-menu glass) */
.estb-line-menu .ctx-sub-h{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);padding:6px 12px 3px}
.estb-line-menu .ctx-ico{display:inline-block;width:17px;text-align:center;color:var(--text-muted);margin-right:3px}
.estb-line-menu .ctx-item:hover .ctx-ico{color:var(--app-accent)}
.estb-line-menu .ctx-item.danger:hover .ctx-ico{color:var(--color-error)}
/* 📎 quotes popup (reuses the .ctx-menu glass shell via _estbOpenMenu) */
.estb-q-pop{min-width:240px;max-width:300px;padding:10px}
.estb-q-h{font-size:12.5px;font-weight:800;color:var(--text-primary);padding:2px 4px 8px;border-bottom:0.5px solid var(--border)}
.estb-q-h small{display:block;font-weight:500;color:var(--text-muted);font-size:10.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.estb-q-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 4px;border-bottom:0.5px solid color-mix(in srgb,var(--border) 60%,transparent);font-size:12.5px}
.estb-q-v{color:var(--text-primary);font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.estb-q-a{color:var(--app-accent);font-weight:800;font-variant-numeric:tabular-nums;flex:0 0 auto}
.estb-q-files{font-size:11px;color:var(--text-muted);padding:7px 4px 2px}
.estb-q-empty{font-size:11.5px;color:var(--text-muted);padding:10px 4px;text-align:center}
.estb-q-add{width:100%;margin-top:8px;padding:8px;border:1px dashed color-mix(in srgb,var(--app-accent) 40%,transparent);border-radius:8px;background:color-mix(in srgb,var(--app-accent) 5%,transparent);color:var(--app-accent);font:inherit;font-size:11.5px;font-weight:700;cursor:pointer}
.estb-q-add:hover{background:color-mix(in srgb,var(--app-accent) 10%,transparent)}
@media (max-width:1100px){.estb-body{grid-template-columns:minmax(0,1fr)}.estb-lib{position:static}}
/* 1c — responsive estimate grid. The 8-col grid (~384px of fixed numeric cols before the description)
   crushes/overflows on tablet+phone. Instead of stacking to cards (loses the spreadsheet at-a-glance),
   horizontal-scroll the grid as a UNIT: the division card scrolls X, header + rows share a min-width so
   columns stay aligned, and the description column keeps a sane min so the line name is readable. The
   rollup band, toolbar, footer, and detail panel already have their own ≤1100/≤560 treatments. */
@media (max-width:820px){
  .estb-div{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
  .estb-ghead,.estb-line{min-width:560px}
  .estb-lnadd,.estb-div-empty{min-width:560px}
}
@media (max-width:560px){
  .estb-ghead,.estb-line{min-width:548px;grid-template-columns:14px minmax(120px,1fr) 50px 38px 76px 46px 96px 56px}
  .estb-lnadd,.estb-div-empty{min-width:548px}
}
/* touch: line buttons always reachable (no hover dependency — iPad) */
@media (hover:none),(pointer:coarse){.estb-lbtn{color:var(--text-secondary)}}
.est-cat-row-fill.est-cat-labor{background:#ff9f0a}.est-cat-row-fill.est-cat-material{background:var(--color-info,#0a84ff)}.est-cat-row-fill.est-cat-sub{background:#bf5af2}.est-cat-row-fill.est-cat-equipment{background:#30d158}.est-cat-row-fill.est-cat-other{background:color-mix(in srgb,var(--text-primary) 35%,transparent)}
.est-cat-row-val{flex-shrink:0;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-primary);letter-spacing:-.2px}
/* ── Phase C — quote comparison · price memory · sections · pricing mode ── */
.est-quote-count{display:inline-block;font-size:9.5px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 14%,transparent);padding:1px 5px;border-radius:var(--radius-pill);margin-left:6px;vertical-align:1px;letter-spacing:.2px}
/* W2-4 — estimate line bought out (its sourced PO is paid). Success tone = done/no
   procurement needed. */
.est-procured{display:inline-block;font-size:9.5px;font-weight:700;color:color-mix(in srgb,var(--color-success) 78%,var(--text-primary));background:color-mix(in srgb,var(--color-success) 13%,transparent);padding:1px 7px;border-radius:var(--radius-pill);margin-left:6px;vertical-align:1px;letter-spacing:.1px}
/* Quote panel inside line detail */
.est-quote-panel{margin-top:14px;border-radius:var(--radius-card,12px);background:color-mix(in srgb,var(--app-accent) 4%,var(--surface));border:0.5px solid color-mix(in srgb,var(--text-primary) 10%,transparent);box-shadow:var(--shadow-e1);overflow:hidden}
.est-quote-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 13px;background:color-mix(in srgb,var(--app-accent) 7%,transparent);border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 9%,transparent);flex-wrap:wrap}
.est-quote-title{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--text-primary);letter-spacing:-.1px}
.est-quote-ico{width:14px;height:14px;fill:currentColor;color:var(--app-accent)}
.est-quote-stats{display:inline-flex;gap:6px;flex-wrap:wrap}
.eq-stat{font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums;padding:2px 8px;border-radius:var(--radius-pill);letter-spacing:.2px}
.eq-low{color:var(--color-success);background:color-mix(in srgb,var(--color-success) 14%,transparent)}
.eq-avg{color:var(--text-secondary);background:color-mix(in srgb,var(--text-primary) 9%,transparent)}
.eq-high{color:var(--color-error);background:color-mix(in srgb,var(--color-error) 13%,transparent)}
.est-quote-list{display:flex;flex-direction:column}
.est-quote-empty{padding:14px 13px;font-size:12px;color:var(--text-muted);line-height:1.5}
.est-quote-row{display:flex;align-items:center;gap:10px;padding:9px 13px;border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 6%,transparent);transition:background var(--motion-fast) var(--ease-out)}
.est-quote-row:last-child{border-bottom:0}
.est-quote-row:hover{background:color-mix(in srgb,var(--app-accent) 5%,transparent)}
.est-quote-chosen{background:color-mix(in srgb,var(--color-success) 8%,transparent)}
.est-quote-chosen:hover{background:color-mix(in srgb,var(--color-success) 11%,transparent)}
.est-quote-vendor{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:var(--text-primary);display:flex;flex-direction:column;gap:2px}
.est-quote-meta{font-size:10.5px;font-weight:500;color:var(--text-muted);letter-spacing:0}
.eq-chosen-tag{display:inline-block;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--color-success);background:color-mix(in srgb,var(--color-success) 16%,transparent);padding:1px 5px;border-radius:var(--radius-pill);margin-left:6px;vertical-align:1px}
.eq-low-tag{display:inline-block;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--color-success);border:0.5px solid color-mix(in srgb,var(--color-success) 40%,transparent);padding:0 5px;border-radius:var(--radius-pill);margin-left:6px;vertical-align:1px}
.est-quote-amt{flex-shrink:0;text-align:right;font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-primary);letter-spacing:-.3px;display:flex;flex-direction:column;gap:1px}
.est-quote-unit{font-size:10px;font-weight:500;color:var(--text-muted);letter-spacing:0}
.est-quote-acts{flex-shrink:0;display:inline-flex;gap:4px}
.eq-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:28px;height:28px;padding:0 8px;border-radius:8px;border:0.5px solid color-mix(in srgb,var(--text-primary) 13%,transparent);background:var(--surface);color:var(--text-secondary);font-size:11px;font-weight:700;cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring),background var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out)}
.eq-btn .sb-ico{width:13px;height:13px;fill:currentColor}
.eq-btn:hover{background:color-mix(in srgb,var(--app-accent) 10%,var(--surface));color:var(--text-primary)}
.eq-btn:active{transform:scale(.92)}
.eq-pick{color:var(--app-accent);border-color:color-mix(in srgb,var(--app-accent) 35%,transparent)}
.eq-pick:hover{background:var(--app-accent);color:#fff}
.eq-del:hover{background:color-mix(in srgb,var(--color-error) 14%,var(--surface));color:var(--color-error)}
.est-quote-actions{display:flex;flex-direction:column;gap:8px;padding:10px 13px;background:color-mix(in srgb,var(--text-primary) 3%,transparent);border-top:0.5px solid color-mix(in srgb,var(--text-primary) 7%,transparent)}
.eq-add-btn,.eq-action-btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px;border-radius:var(--radius-pill);font-size:12px;font-weight:700;cursor:pointer;border:0.5px solid color-mix(in srgb,var(--text-primary) 14%,transparent);background:var(--surface);color:var(--text-secondary);transition:transform var(--motion-fast) var(--ease-spring),background var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out)}
.eq-add-btn .sb-ico{width:13px;height:13px;fill:currentColor}
.eq-add-btn{color:var(--app-accent);border-color:color-mix(in srgb,var(--app-accent) 32%,transparent)}
.eq-add-btn:hover{background:var(--app-accent);color:#fff}
.eq-action-btn:hover{background:color-mix(in srgb,var(--app-accent) 10%,var(--surface));color:var(--text-primary)}
.eq-add-btn:active,.eq-action-btn:active{transform:scale(.95)}
/* Inline "last time = $X" price-memory hint */
.est-price-hint{display:none}
.est-price-hint.est-price-hint-shown{display:inline-flex;align-items:center;gap:4px;margin-top:5px;font-size:10.5px;font-weight:600;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 9%,transparent);padding:2px 8px;border-radius:var(--radius-pill);letter-spacing:0;width:fit-content;max-width:100%;line-height:1.3}
.est-hint-ico{width:11px;height:11px;fill:currentColor;flex-shrink:0}
.est-hint-anomaly{margin-left:8px;font-weight:800;color:var(--color-warning);background:color-mix(in srgb,var(--color-warning) 16%,transparent);padding:1px 7px;border-radius:var(--radius-pill)}
.est-hint-paid{font-weight:800;color:var(--color-success)}
.est-price-hint-anomaly{background:color-mix(in srgb,var(--color-warning) 11%,transparent)!important}
/* Phase H — Help/Guide mode: contextual hint chips, hidden until coach mode is on */
[data-coach]{display:none}
body.coach-on [data-coach]{display:block;font-size:11.5px;line-height:1.45;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 8%,transparent);border:0.5px solid color-mix(in srgb,var(--app-accent) 24%,transparent);border-radius:9px;padding:8px 11px;margin:8px 0}
body.coach-on [data-coach]::before{content:"💡 ";}
/* G3 page-guide layer (cap pill + first-use guide + quick-action pills) obeys the
   same Help/Guide-mode toggle. Default-ON (see _coachOn): the body lacks .coach-on
   ONLY after an explicit opt-out, which hides the whole layer. Every guide host
   pill is .pg-cap; every injected guide/quick-action lives inside a *GuideSlot —
   so these two rules collapse the entire layer (no phantom slot padding). */
body:not(.coach-on) .pg-cap{display:none}
body:not(.coach-on) [id$="GuideSlot"]{display:none}
/* Item 5 — a true first-use empty state (zero projects) shows regardless of Help
   mode; it's a crafted invitation, not the coach-gated guide layer. */
body:not(.coach-on) #boardGuideSlot.board-guide-firstuse{display:block}
body:not(.coach-on) #dashGuideSlot.dash-guide-firstuse{display:block}
.est-price-hint-tap{cursor:pointer;transition:background var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-spring)}
.est-price-hint-tap:hover{background:color-mix(in srgb,var(--app-accent) 16%,transparent)}
.est-price-hint-tap:active{transform:scale(.96)}
.est-hint-apply{margin-left:5px;font-weight:800;opacity:.85}
/* Inline quick-add quote row */
.eq-quick-add{display:flex;gap:6px;align-items:center;flex:1;min-width:220px}
.eq-quick-vendor{flex:1;min-width:90px}
.eq-quick-amt{flex:0 0 92px;min-width:78px}
.eq-quick-apply{display:inline-flex;gap:8px}
.eq-more{padding:0 11px!important;font-weight:800}
/* Section heads + rollups in the master list */
.est-est-head{display:flex;align-items:center;gap:8px}
.est-est-name{flex:1;min-width:0}
.est-mode-wrap{flex-shrink:0;display:inline-flex;align-items:center;gap:5px}
/* F4 — version chain chips + diff table */
/* 2026-06-06 — proto version pills: a segmented switch (current = raised white-on-surface),
   with a LOCKED/ACCEPTED tag on the relevant version. */
.est-ver-chain{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap;padding:3px;border-radius:var(--radius-pill);background:var(--surface-2)}
.est-ver-chip{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 11px;border-radius:var(--radius-pill);border:0;background:transparent;color:var(--text-secondary);font-size:11.5px;font-weight:700;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast)}
.est-ver-chip:hover{color:var(--text-primary)}
.est-ver-chip-cur{background:var(--card-bg);color:var(--text-primary);box-shadow:var(--shadow-e1)}
.est-ver-tag{font-size:8.5px;font-weight:800;letter-spacing:.04em;padding:1px 5px;border-radius:999px}
.est-ver-tag-locked{background:color-mix(in srgb,var(--color-success) 18%,transparent);color:color-mix(in srgb,var(--color-success) 78%,var(--text-primary))}
.est-ver-tag-ok{background:color-mix(in srgb,var(--app-accent) 16%,transparent);color:var(--app-accent)}
.est-ver-arrow{color:var(--text-muted);font-size:11px}
.est-ver-compare{margin-left:4px}
.est-diff-table th,.est-diff-table td{padding:5px 8px;border-bottom:0.5px solid var(--border)}
.est-diff-add{background:color-mix(in srgb,var(--color-success) 12%,transparent)}
.est-diff-rem{background:color-mix(in srgb,var(--color-error) 12%,transparent)}
.est-diff-chg{background:color-mix(in srgb,var(--app-accent) 9%,transparent)}
.est-overview-card .est-workflow{margin-top:10px}
/* Task 5 — markup waterfall rail card */
.est-mk-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px 10px;margin-bottom:8px}
.est-mk-row,.est-mk-round,.est-mk-target{display:flex;align-items:center;gap:6px}
.est-mk-lbl{font-size:11px;color:var(--text-muted);flex:1;min-width:0;white-space:nowrap}
.est-mk-inp{width:56px;height:26px;border-radius:8px;border:0.5px solid color-mix(in srgb,var(--text-primary) 16%,transparent);background:var(--surface);color:var(--text-primary);font-size:12px;text-align:right;padding:0 6px}
.est-mk-pct{font-size:11px;color:var(--text-muted)}
.est-mk-sel{height:26px;border-radius:8px;border:0.5px solid color-mix(in srgb,var(--text-primary) 16%,transparent);background:var(--surface);color:var(--text-secondary);font-size:11px;padding:0 6px}
.est-mk-round{margin:6px 0}
.est-mk-target{margin-top:8px;padding-top:8px;border-top:0.5px solid var(--border)}
.est-breakdown{margin-top:8px;display:flex;flex-direction:column;gap:3px}
.est-bd-row{display:flex;justify-content:space-between;font-size:11.5px;color:var(--text-secondary)}
.est-bd-base{color:var(--text-muted)}
.est-bd-alt{color:var(--text-muted);font-style:italic}
.est-bd-grand{font-weight:700;color:var(--text-primary);border-top:0.5px solid var(--border);padding-top:4px;margin-top:2px}
/* Task 5 — advanced math disclosure */
.est-adv{margin:8px 0;border:0.5px solid var(--border);border-radius:10px;padding:0 10px;background:color-mix(in srgb,var(--text-primary) 2%,transparent)}
.est-adv-sum{cursor:pointer;font-size:11.5px;font-weight:600;color:var(--text-secondary);padding:8px 0;list-style:none}
.est-adv-sum::-webkit-details-marker{display:none}
.est-adv-sum::before{content:'▸ ';color:var(--text-muted)}
.est-adv[open] .est-adv-sum::before{content:'▾ '}
.est-adv-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:4px 0 10px}
.est-adv-check{grid-column:1/-1;display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-secondary);cursor:pointer}
/* Batch 2e — crew field in the labor block + crew-manager modal */
.est-crew-field{grid-column:1/-1}
.est-crew-manage-link{margin-top:4px;background:none;border:none;color:var(--app-accent);font:inherit;font-size:11px;font-weight:600;cursor:pointer;padding:2px 0;text-align:left}
.est-crew-manage-link:hover{text-decoration:underline}
.est-crew-mgr{display:flex;flex-direction:column;gap:12px;min-width:min(540px,86vw)}
.est-crew-mgr-h{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary)}
.est-crew-mgr-h .sb-ico{width:18px;height:18px;color:var(--app-accent)}
.est-crew-blended{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--app-accent)}
.est-crew-back{background:var(--surface-2);border:none;border-radius:8px;padding:5px 10px;font:inherit;font-size:12px;font-weight:600;color:var(--text-secondary);cursor:pointer}
.est-crew-back:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent)}
.est-crew-mgr-sub{font-size:12px;color:var(--text-muted);line-height:1.5}
.est-crew-new{display:flex;gap:8px;align-items:center}
.est-crew-new .field-input{flex:1}
.est-crew-list{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow:auto}
.est-crew-row{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border:0.5px solid var(--chrome-border);border-radius:12px;background:var(--card-bg)}
.est-crew-row-main{flex:1;min-width:0}
.est-crew-name{font-weight:700;font-size:13.5px;color:var(--text-primary)}
.est-crew-meta{font-size:12px;color:var(--text-secondary);margin-top:2px}
.est-crew-members{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.est-crew-chip{font-size:11px;padding:3px 8px;border-radius:999px;background:var(--surface-2);color:var(--text-secondary)}
.est-crew-row-acts{display:flex;gap:6px;flex-shrink:0}
.est-crew-empty,.est-crew-empty-sub{font-size:12.5px;color:var(--text-muted);padding:14px;text-align:center}
.est-crew-empty-sub{padding:8px 0;text-align:left}
.est-crew-members-edit{display:flex;flex-direction:column;gap:6px}
.est-crew-mrow{display:flex;align-items:center;gap:9px;padding:7px 11px;border:0.5px solid var(--chrome-border);border-radius:10px}
.est-crew-mname{font-weight:600;font-size:12.5px;color:var(--text-primary);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.est-crew-mrate{font-size:11.5px;color:var(--text-muted)}
.est-crew-mcount{width:58px;flex:0 0 58px;text-align:center}
.est-crew-mdel{flex:0 0 30px;width:30px;height:30px;border:none;background:transparent;border-radius:8px;color:var(--text-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--motion-fast),color var(--motion-fast)}
.est-crew-mdel:hover{background:color-mix(in srgb,var(--color-error) 14%,transparent);color:var(--color-error)}
.est-crew-mdel svg{width:15px;height:15px}
.est-crew-add-member{display:flex;gap:8px;align-items:center;padding-top:4px}
.est-crew-add-member .field-input:first-child{flex:1}
/* Task 4 — pricing-source block */
.est-source-block{margin:8px 0;padding:10px;border:0.5px solid var(--border);border-radius:10px}
.est-source-head{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--text-secondary);margin-bottom:8px}
.est-source-head .sb-ico{width:13px;height:13px}
.est-source-note{margin-top:6px;width:100%}
.est-source-files{margin-top:8px}
.est-ref-open{background:none;border:0;color:var(--app-accent);cursor:pointer;font-size:11px;padding:0}
.est-source-attach{margin-top:8px;width:100%;justify-content:center}
/* Full-page parity — register pages (Compliance / Submittals / Warranties / Field) */
.reg-page-head{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary);margin:4px 0 14px}
.reg-page-ico{width:20px;height:20px;color:var(--app-accent)}
.reg-page-host{display:flex;flex-direction:column;gap:14px}
.reg-page-host .modal-section{margin:0}

/* ═══ Certified Payroll / Prevailing-Wage compliance ═══════════════════════════ */
#certifiedPayrollHost{display:flex;flex-direction:column;gap:14px}
.cp-loading{padding:28px 14px;color:var(--text-muted);font-size:13.5px;text-align:center}
/* header */
.cp-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 18px;flex-wrap:wrap}
.cp-head-l{display:flex;align-items:flex-start;gap:13px;min-width:0}
.cp-head-ico{width:26px;height:26px;flex:0 0 auto;color:var(--app-accent);margin-top:2px}
.cp-head-title{font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--text-primary);display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.cp-head-sub{font-size:12px;font-weight:600;color:var(--text-muted);letter-spacing:0}
.cp-head-meta{font-size:12.5px;color:var(--text-secondary);margin-top:3px;max-width:560px;line-height:1.5}
.cp-head-r{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.cp-toggle-lbl{font-size:12.5px;font-weight:700;color:var(--text-secondary)}
/* switch */
.cp-switch{position:relative;width:46px;height:27px;border-radius:999px;border:none;background:var(--border-strong);cursor:pointer;transition:background .22s var(--ease-out,ease);padding:0;flex:0 0 auto}
.cp-switch.on{background:var(--color-success)}
.cp-switch-knob{position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28);transition:transform .22s var(--ease-out,ease)}
.cp-switch.on .cp-switch-knob{transform:translateX(19px)}
.cp-switch:focus-visible{outline:2px solid var(--app-accent);outline-offset:2px}
.cp-pill{font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px}
.cp-pill-on{background:var(--color-success-bg);color:var(--color-success)}
.cp-pill-off{background:color-mix(in srgb,var(--text-muted) 12%,transparent);color:var(--text-muted)}
/* off state */
.cp-off{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:38px 26px}
.cp-off-ico{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--color-info-bg);color:var(--app-accent)}
.cp-off-ico svg{width:24px;height:24px}
.cp-off-title{font-size:16px;font-weight:800;color:var(--text-primary);letter-spacing:-.01em}
.cp-off-sub{font-size:13px;color:var(--text-secondary);max-width:480px;line-height:1.55}
.cp-off-note{font-size:12.5px;color:var(--text-muted)}
/* scorecard */
.cp-score{display:grid;grid-template-columns:repeat(5,1fr);gap:11px}
.cp-score-card{display:flex;flex-direction:column;gap:5px;padding:14px 15px;border-radius:var(--radius-lg);background:var(--card-bg);box-shadow:var(--lg-edge),var(--shadow-e2);border:.5px solid var(--chrome-border)}
.cp-score-ico{width:18px;height:18px;color:var(--text-muted)}
.cp-score-ico svg{width:18px;height:18px}
.cp-score-val{font-size:24px;font-weight:800;letter-spacing:-.03em;color:var(--text-primary);line-height:1.05}
.cp-score-lbl{font-size:11.5px;font-weight:600;color:var(--text-muted)}
.cp-tone-ok .cp-score-ico{color:var(--color-success)}
.cp-tone-err{background:var(--color-error-bg)}.cp-tone-err .cp-score-ico,.cp-tone-err .cp-score-val{color:var(--color-error)}
.cp-tone-warn{background:var(--color-warning-bg)}.cp-tone-warn .cp-score-ico{color:var(--color-warning)}
.cp-tone-info .cp-score-ico{color:var(--app-accent)}
/* grid */
.cp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:14px;align-items:start}
.cp-col-main,.cp-col-side{display:flex;flex-direction:column;gap:14px;min-width:0}
@media (max-width:1024px){.cp-grid{grid-template-columns:1fr}.cp-score{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cp-score{grid-template-columns:1fr}.cp-head{flex-direction:column;align-items:flex-start}}
/* panels */
.cp-panel{padding:15px 16px}
.cp-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px;flex-wrap:wrap}
.cp-panel-title{font-size:14.5px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary)}
.cp-panel-sub{font-size:11.5px;color:var(--text-muted);font-weight:500;flex-basis:100%;line-height:1.45}
.cp-empty{padding:18px 14px;font-size:12.5px;color:var(--text-muted);line-height:1.55;text-align:center}
.cp-empty-sm{padding:12px 8px;font-size:12px;text-align:left}
.cp-muted{color:var(--text-muted)}
/* table */
.cp-table-wrap{overflow-x:auto;border-radius:10px}
.cp-table{width:100%;border-collapse:collapse;font-size:12.5px}
.cp-table th{text-align:left;font-weight:700;color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:.03em;padding:7px 10px;border-bottom:1px solid var(--border)}
.cp-table td{padding:9px 10px;border-bottom:1px solid var(--border);color:var(--text-secondary);vertical-align:middle}
.cp-table tbody tr:last-child td{border-bottom:none}
.cp-table .num{text-align:right;font-variant-numeric:tabular-nums}
.cp-table th.num{text-align:right}
.cp-table .cp-w{font-weight:700;color:var(--text-primary)}
.cp-table .cp-neg{color:var(--color-error);font-weight:700}
.cp-table tbody tr{transition:background .12s ease}
.cp-table tbody tr:hover{background:color-mix(in srgb,var(--app-accent) 5%,transparent)}
.cp-row-under{background:var(--color-error-bg)}
.cp-row-under:hover{background:color-mix(in srgb,var(--color-error) 16%,transparent)}
.cp-table-sm{font-size:11.5px}.cp-table-sm td,.cp-table-sm th{padding:6px 8px}
/* compliance pill — fill+icon, no edge strip */
.cp-status{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 10px 3px 8px;border-radius:999px;white-space:nowrap}
.cp-status-ico{width:13px;height:13px}
.cp-status-ok{background:var(--color-success-bg);color:var(--color-pillgreen)}
.cp-status-err{background:var(--color-error-bg);color:var(--color-error)}
.cp-status-warn{background:var(--color-warning-bg);color:color-mix(in srgb,var(--color-warning) 80%,#000)}
/* apprenticeship */
.cp-ratio-bar{height:12px;border-radius:999px;background:color-mix(in srgb,var(--app-accent) 14%,transparent);overflow:hidden;margin:2px 0 9px}
.cp-ratio-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--app-accent),color-mix(in srgb,var(--app-accent) 70%,#fff));transition:width .4s var(--ease-out,ease)}
.cp-ratio-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--text-secondary);font-weight:600}
.cp-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:0}
.cp-dot-appr{background:var(--app-accent)}.cp-dot-journ{background:color-mix(in srgb,var(--app-accent) 30%,var(--border-strong))}
.cp-ratio-note{font-size:11.5px;color:var(--text-muted);margin-top:8px}
.cp-trade-list{margin-top:11px;display:flex;flex-direction:column;gap:6px}
.cp-trade-row{display:flex;justify-content:space-between;gap:10px;font-size:12px;padding:5px 0;border-top:1px solid var(--border)}
.cp-trade-name{font-weight:700;color:var(--text-primary)}.cp-trade-nums{color:var(--text-muted);font-variant-numeric:tabular-nums}
/* wage determinations */
.cp-det-list{display:flex;flex-direction:column;gap:9px}
.cp-det-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:11px 12px;border-radius:12px;background:color-mix(in srgb,var(--app-bg) 4%,var(--card-bg));border:.5px solid var(--border)}
.cp-det-main{min-width:0;flex:1}
.cp-det-trade{font-size:13.5px;font-weight:800;color:var(--text-primary);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.cp-det-class{font-weight:600;color:var(--text-secondary);font-size:12.5px}
.cp-det-rates{display:flex;gap:12px;flex-wrap:wrap;margin-top:5px;font-size:12px;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.cp-det-total{font-weight:800;color:var(--text-primary)}
.cp-det-meta{font-size:11px;color:var(--text-muted);margin-top:5px}
.cp-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:color-mix(in srgb,var(--app-accent) 9%,transparent);color:var(--app-accent);padding:1px 6px;border-radius:6px;font-size:10.5px;font-weight:700}
.cp-badge{font-size:10px;font-weight:800;padding:2px 8px;border-radius:999px;letter-spacing:.02em}
.cp-badge-appr{background:var(--color-info-bg);color:var(--app-accent)}
.cp-det-actions{display:flex;gap:4px;flex:0 0 auto}
.cp-iconbtn{width:30px;height:30px;border-radius:9px;border:.5px solid var(--border);background:var(--card-bg);color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.13s ease}
.cp-iconbtn svg{width:14px;height:14px}
.cp-iconbtn:hover{background:color-mix(in srgb,var(--app-accent) 10%,var(--card-bg));color:var(--app-accent);border-color:color-mix(in srgb,var(--app-accent) 40%,var(--border))}
.cp-iconbtn-del:hover{background:var(--color-error-bg);color:var(--color-error);border-color:color-mix(in srgb,var(--color-error) 40%,var(--border))}
/* det form */
.cp-det-form{padding:13px;border-radius:12px;background:color-mix(in srgb,var(--app-accent) 5%,var(--card-bg));border:1px solid color-mix(in srgb,var(--app-accent) 30%,var(--border))}
.cp-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cp-field{display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:700;color:var(--text-secondary)}
.cp-field input[type=text],.cp-field input[type=number],.cp-field input[type=date]{font:inherit;font-size:13px;font-weight:500;padding:7px 10px;border-radius:9px;border:1px solid var(--border);background:var(--card-bg);color:var(--text-primary);width:100%}
.cp-field input:focus{outline:none;border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 18%,transparent)}
.cp-field-check{flex-direction:row;align-items:center;gap:8px;grid-column:1/-1}
.cp-field-check input{width:17px;height:17px;accent-color:var(--app-accent)}
.cp-field-inline{flex-direction:row;align-items:center;gap:8px}
.cp-form-actions{display:flex;gap:8px;margin-top:11px}
/* buttons */
.cp-btn{font:inherit;font-size:13px;font-weight:700;padding:8px 15px;border-radius:999px;border:.5px solid var(--border-strong);background:var(--card-bg);color:var(--text-primary);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.14s ease}
.cp-btn:hover{background:color-mix(in srgb,var(--app-accent) 8%,var(--card-bg));border-color:color-mix(in srgb,var(--app-accent) 35%,var(--border-strong))}
.cp-btn-primary{background:var(--app-accent);color:#fff;border-color:transparent}
.cp-btn-primary:hover{background:color-mix(in srgb,var(--app-accent) 88%,#000);color:#fff}
.cp-btn-sm{font-size:12px;padding:6px 13px}
.cp-btn-ico{width:14px;height:14px}
/* export */
.cp-export-row{display:flex;align-items:flex-end;gap:11px;flex-wrap:wrap;margin-bottom:8px}
.cp-export-note{font-size:11.5px;color:var(--text-muted);line-height:1.5}
.cp-export-preview{margin-top:12px}
.cp-preview-head{font-size:12px;font-weight:700;color:var(--text-secondary);margin-bottom:8px}
.cp-preview-tot td{font-weight:800;color:var(--text-primary);border-top:1.5px solid var(--border-strong)}
/* undo */
.cp-undo{display:flex;align-items:center;gap:12px;justify-content:center;padding:11px 16px;border-radius:12px;background:var(--text-primary);color:#fff;font-size:13px;font-weight:600;box-shadow:var(--shadow-e2);position:sticky;bottom:12px}
.cp-undo-btn{font:inherit;font-weight:800;color:var(--color-success);background:none;border:none;cursor:pointer;padding:0;text-decoration:underline}

/* ════════ Document Control Center (Lane 1, 2026-06-01) ════════
   The office manager's cockpit. Apple pro-app finish + classic-Mac bevel craft:
   layered token shadows, specular edge highlights on the hero tiles (chrome glass,
   content stays solid), tactile press-deform, status-toned semantic color. */
.dc-wrap{display:flex;flex-direction:column;gap:16px;padding-bottom:24px}
.dc-head{margin-bottom:2px}
/* V133 (2026-06-06) — float the cockpit page-head (Compliance · Doc Control · Transmittals)
   as a slim glass chrome panel on the matte instead of a flat text row, so it reads as a
   fixed page header consistent with the rest of the app. Scoped to the PAGE head (.dc-head);
   the bare in-card .reg-page-head section labels stay flat. Content below unchanged. */
.reg-page-head.dc-head{margin:0;padding:14px 18px;background:var(--lg-bg);backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract);border-radius:var(--radius-lg);box-shadow:var(--lg-edge),var(--shadow-e2);border:.5px solid var(--chrome-border);flex-wrap:wrap}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.reg-page-head.dc-head{background:var(--surface)}}
@media (prefers-reduced-transparency:reduce){.reg-page-head.dc-head{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
.dc-head-sub{font-size:12.5px;font-weight:500;color:var(--text-muted);letter-spacing:0;margin-left:8px}
@media (max-width:640px){.dc-head-sub{display:none}}
/* Hero metric tiles — glanceable story. Glass chrome: solid surface + specular bevel. */
.dc-hero{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
@media (max-width:900px){.dc-hero{grid-template-columns:repeat(3,1fr)}}
@media (max-width:480px){.dc-hero{grid-template-columns:repeat(2,1fr)}}
/* 2026-06-02 ALL-IN (Part 2) — the shared KPI tile (Document Control hero +
   Estimator/Accounting/O&M home pages) elevated to the cockpit's glossy material:
   surface-grad + specular bevel + a soft accent sheen, tactile press. Tone
   variants get a whole-tile tint (not just colored text) so red/amber KPIs read. */
.dc-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:14px 16px;border:none;cursor:pointer;text-align:left;overflow:hidden;
  background:var(--surface-grad);border-radius:var(--radius-lg);box-shadow:var(--bevel-top),var(--shadow-e2);
  transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-base) var(--ease-out)}
.dc-tile::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 80% at 100% -20%,color-mix(in srgb,var(--app-accent) 8%,transparent),transparent 60%)}
.dc-tile:hover{transform:translateY(-3px);box-shadow:var(--bevel-top),var(--shadow-e3)}
.dc-tile:active{transform:translateY(0) scale(.972);box-shadow:var(--bevel-top),var(--shadow-e1)}
.dc-tile-on{outline:2px solid var(--app-accent);outline-offset:1px}
.dc-tile-v{position:relative;font-size:27px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums;color:var(--text-primary);line-height:1}
.dc-tile-l{position:relative;font-size:10.5px;font-weight:700;letter-spacing:.4px;color:var(--text-muted);text-transform:uppercase}
/* Tone tints LAYER over the base surface-grad via ::after (so the base still
   darkens on dark themes — mixing into --card-bg went near-white on midnight). */
.dc-tile.dc-tone-bad .dc-tile-v{color:var(--color-error)}
.dc-tile.dc-tone-bad::after{background:linear-gradient(165deg,color-mix(in srgb,var(--color-error) 16%,transparent),transparent 62%)}
.dc-tile.dc-tone-warn .dc-tile-v{color:color-mix(in srgb,var(--color-warning) 84%,var(--text-primary))}
.dc-tile.dc-tone-warn::after{background:linear-gradient(165deg,color-mix(in srgb,var(--color-warning) 16%,transparent),transparent 62%)}
.dc-tile.dc-tone-good .dc-tile-v{color:color-mix(in srgb,var(--color-success) 78%,var(--text-primary))}
.dc-tile.dc-tone-good::after{background:linear-gradient(165deg,color-mix(in srgb,var(--color-success) 16%,transparent),transparent 62%)}
/* Ball-in-court chip row */
.dc-bic-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dc-bic-lbl{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
.dc-bic-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 7px 5px 12px;border:1px solid var(--border);border-radius:var(--radius-pill,999px);
  background:var(--card-bg);cursor:pointer;font-size:12.5px;font-weight:600;color:var(--text-primary);
  transition:transform var(--motion-fast) var(--ease-spring),border-color var(--motion-base) var(--ease-out)}
.dc-bic-chip:hover{transform:translateY(-1px);border-color:var(--app-accent)}
.dc-bic-chip:active{transform:scale(.95)}
.dc-bic-n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:color-mix(in srgb,var(--app-accent) 16%,transparent);color:var(--app-accent);font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
/* Controls row */
.dc-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dc-fpills{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.dc-fpill{padding:6px 13px;border:1px solid var(--border);border-radius:var(--radius-pill,999px);background:var(--card-bg);
  font-size:12.5px;font-weight:600;color:var(--text-muted);cursor:pointer;transition:all var(--motion-fast) var(--ease-out)}
.dc-fpill:hover{color:var(--text-primary);border-color:var(--app-accent)}
.dc-fpill:active{transform:scale(.95)}
.dc-fpill-on{background:var(--app-accent);border-color:var(--app-accent);color:#fff}
.dc-controls-right{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap;justify-content:flex-end}
.dc-seg{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius-md,10px);overflow:hidden;background:var(--card-bg)}
.dc-seg-btn{padding:6px 12px;border:none;background:transparent;font-size:12px;font-weight:600;color:var(--text-muted);cursor:pointer;transition:all var(--motion-fast) var(--ease-out)}
.dc-seg-btn+.dc-seg-btn{border-left:1px solid var(--border)}
.dc-seg-btn:hover{color:var(--text-primary)}
.dc-seg-on{background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent)}
/* Groups + rows */
.dc-group{display:flex;flex-direction:column;gap:7px}
.dc-group+.dc-group{margin-top:6px}
.dc-group-head{display:flex;align-items:center;gap:9px;padding:0 2px}
.dc-group-title{font-size:13px;font-weight:700;letter-spacing:-.01em;color:var(--text-primary)}
.dc-group-n{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-muted);font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums}
.dc-rows{display:flex;flex-direction:column;gap:6px}
.dc-row{display:flex;align-items:center;gap:12px;padding:11px 13px;background:var(--card-bg);border-radius:var(--radius-md,12px);
  box-shadow:var(--shadow-e1);cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-base) var(--ease-out)}
.dc-row:hover{transform:translateX(2px);box-shadow:var(--shadow-e2)}
.dc-row:active{transform:scale(.99)}
/* #15 (2026-06-24) — drillable TB/BS account rows: keyboard focus ring (hover/pointer inherit .dc-row). */
.dc-row-drill:focus-visible{outline:2px solid var(--app-accent);outline-offset:1px}
/* 2026-06-02 §8.5 fix — overdue was a red LEFT edge-strip (forbidden). Re-express
   as a whole-surface red-tint fill + the kind-icon chip goes red. No edge stripe. */
.dc-row-overdue{background:linear-gradient(160deg,color-mix(in srgb,var(--color-error) 9%,var(--card-bg)),var(--card-bg) 70%);box-shadow:var(--shadow-e1),inset 0 0 0 .5px color-mix(in srgb,var(--color-error) 26%,transparent)}
.dc-row-overdue .dc-row-kind{background:color-mix(in srgb,var(--color-error) 15%,transparent)!important}
.dc-row-overdue .dc-row-kind svg{color:var(--color-error)!important}
.dc-row-kind{display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 34px;border-radius:10px;
  background:color-mix(in srgb,var(--app-accent) 12%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.dc-row-kind svg{width:17px;height:17px;color:var(--app-accent)}
.dc-k-sub{background:color-mix(in srgb,#4a90d9 16%,transparent)}.dc-k-sub svg{color:#4a90d9}
.dc-k-rfi{background:color-mix(in srgb,#b07ad9 16%,transparent)}.dc-k-rfi svg{color:#b07ad9}
.dc-k-itb{background:color-mix(in srgb,#d99a4a 16%,transparent)}.dc-k-itb svg{color:#d99a4a}
.dc-k-tr{background:color-mix(in srgb,#46b98a 16%,transparent)}.dc-k-tr svg{color:#46b98a}
.dc-k-comp{background:color-mix(in srgb,var(--color-warning) 18%,transparent)}.dc-k-comp svg{color:var(--color-warning)}
.dc-row-body{flex:1 1 auto;min-width:0}
.dc-row-title{font-size:14px;font-weight:600;color:var(--text-primary);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:7px}
.dc-row-num{font-size:11px;font-weight:700;color:var(--text-muted);font-variant-numeric:tabular-nums;flex:0 0 auto}
.dc-rev{font-size:10px;font-weight:700;padding:1px 6px;border-radius:999px;background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent)}
.dc-row-sub{display:flex;align-items:center;gap:8px;margin-top:3px;flex-wrap:wrap}
.dc-row-party{font-size:11.5px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.dc-meta-dim{font-size:11px;color:var(--text-muted)}
.dc-status{font-size:10.5px;font-weight:700;letter-spacing:.01em;padding:2px 8px;border-radius:999px;text-transform:capitalize;
  background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-muted)}
.dc-status-approved,.dc-status-approved-as-noted,.dc-status-closed,.dc-status-acknowledged{background:var(--color-success-bg,color-mix(in srgb,var(--color-success) 14%,transparent));color:var(--color-success)}
.dc-status-pending,.dc-status-open,.dc-status-sent,.dc-status-in-progress{background:color-mix(in srgb,var(--color-info,#4a90d9) 14%,transparent);color:var(--color-info,#4a90d9)}
.dc-status-revise-resubmit,.dc-status-rejected,.dc-status-expired{background:color-mix(in srgb,var(--color-error) 14%,transparent);color:var(--color-error)}
.dc-status-expiring{background:color-mix(in srgb,var(--color-warning) 16%,transparent);color:var(--color-warning)}
.dc-row-due{flex:0 0 auto;font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.dc-due-bad{color:var(--color-error)}
.dc-due-warn{color:var(--color-warning)}
.dc-due-muted{color:var(--text-muted)}
.dc-row-chev{width:15px;height:15px;flex:0 0 auto;color:var(--text-muted);opacity:.5}
.dc-row:hover .dc-row-chev{opacity:1;color:var(--app-accent)}
.dc-rows-card{gap:7px}
/* Loading + empty states */
.dc-loading{display:flex;align-items:center;justify-content:center;gap:12px;padding:60px 20px;color:var(--text-muted);font-size:14px}
/* V-orb1 — Atira ORB loader (replaces the generic rotating border circle). A lit blue orb
   core that breathes + a moon dot orbiting it (the "Seven Moons / consuming" idiom), pure CSS
   so every .dc-spinner callsite swaps at once. Keeps the 20px footprint + currentColor tint. */
.dc-spinner{position:relative;width:20px;height:20px;border:0;border-radius:50%;background:none;animation:dc-orbit 1.1s linear infinite}
.dc-spinner::before{content:"";position:absolute;inset:30%;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,color-mix(in srgb,#fff 65%,var(--app-accent)),var(--app-accent) 62%,color-mix(in srgb,var(--app-accent) 78%,#000));
  box-shadow:0 0 6px -1px color-mix(in srgb,var(--app-accent) 70%,transparent);animation:dc-breathe 1.1s ease-in-out infinite}
.dc-spinner::after{content:"";position:absolute;top:0;left:50%;width:25%;height:25%;margin-left:-12.5%;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff,var(--app-accent) 70%);box-shadow:0 0 5px -1px color-mix(in srgb,var(--app-accent) 70%,transparent)}
@keyframes dc-orbit{to{transform:rotate(360deg)}}
@keyframes dc-breathe{0%,100%{transform:scale(.82);opacity:.78}50%{transform:scale(1);opacity:1}}
.dc-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:54px 24px;text-align:center}
/* 🗒️ pt.8 (Track-Q row 14) — row select checkbox for bulk bundling. The bulk bar itself
   is the app-canon fixed .bulk-bar (an overlay — zero layout shift by construction). */
.dc-row-ck{display:flex;align-items:center;justify-content:center;width:22px;flex:none;cursor:pointer}
.dc-row-ck input{width:15px;height:15px;accent-color:var(--app-accent);cursor:pointer;margin:0}
.dc-row-ck-blank{cursor:default}
.dc-empty-ico{width:42px;height:42px;color:var(--text-muted);opacity:.45;margin-bottom:4px}
.dc-empty-title{font-size:16px;font-weight:700;color:var(--text-primary)}
.dc-empty-sub{font-size:13px;color:var(--text-muted);max-width:380px;line-height:1.5}
/* Accessibility: respect reduced motion + reduced transparency */
@media (prefers-reduced-motion:reduce){.dc-tile,.dc-row,.dc-bic-chip,.dc-fpill{transition:none}.dc-spinner,.dc-spinner::before,.dc-spinner::after{animation:none}.dc-spinner::after{display:none}}
@media (prefers-reduced-transparency:reduce){.dc-tile,.dc-row-kind{box-shadow:var(--shadow-e1)}}

/* ═══ G6-W1 — People & Docs Wave-1 ═══════════════════════════════════════ */
/* — Vendor prequal pill (soft-gate badge; fill-toned, never an edge-strip) — */
.pq-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;letter-spacing:.01em;padding:3px 9px;border-radius:999px;line-height:1.2;white-space:nowrap;transition:transform var(--motion-fast,.15s) var(--ease-spring,ease),box-shadow var(--motion-fast,.15s)}
.pq-pill[role=button]{cursor:pointer}
.pq-pill[role=button]:hover{transform:translateY(-1px)}
.pq-pill .pq-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 6px}
.pq-pill-sm{font-size:10px;padding:2px 7px}
.pq-pill-sm .pq-dot{width:5px;height:5px;flex:0 0 5px}
.pq-approved{background:color-mix(in srgb,var(--color-success,#30d158) 15%,transparent);color:color-mix(in srgb,var(--color-success,#30d158) 78%,var(--text-primary))}
.pq-conditional{background:color-mix(in srgb,var(--color-warning,#ff9f0a) 18%,transparent);color:color-mix(in srgb,var(--color-warning,#ff9f0a) 62%,var(--text-primary))}
.pq-expired{background:color-mix(in srgb,var(--color-error,#ff453a) 16%,transparent);color:color-mix(in srgb,var(--color-error,#ff453a) 72%,var(--text-primary))}
.pq-notqual{background:color-mix(in srgb,var(--text-muted) 16%,transparent);color:var(--text-secondary)}
.rrt-cp-pq{margin-left:6px;vertical-align:1px}
/* Prequal detail sheet */
.pqd-body{display:flex;flex-direction:column;gap:14px}
.pqd-clear{font-size:13px;color:var(--text-secondary);padding:14px;background:color-mix(in srgb,var(--color-success,#30d158) 9%,transparent);border-radius:var(--radius-md,12px);line-height:1.5}
.pqd-group-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin-bottom:7px}
.pqd-group-h.pqd-bad{color:var(--color-error,#ff453a)}
.pqd-group-h.pqd-warn{color:var(--color-warning,#ff9f0a)}
.pqd-doc{font-size:13px;font-weight:600;color:var(--text-primary);padding:8px 12px;background:var(--surface-2,color-mix(in srgb,var(--text-primary) 5%,transparent));border-radius:10px;margin-bottom:5px}

/* — Doc-control aging buckets (fill severity ramp; no edge-strips) — */
.dc-aging-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.dc-aging-lbl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-right:2px}
.dc-age-chip{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;padding:7px 13px;border:none;border-radius:14px;cursor:pointer;text-align:left;transition:transform var(--motion-fast,.15s) var(--ease-spring,ease),box-shadow var(--motion-fast,.15s);box-shadow:var(--shadow-e1)}
.dc-age-chip:hover{transform:translateY(-2px);box-shadow:var(--shadow-e2)}
.dc-age-chip:active{transform:scale(.96)}
.dc-age-chip.dc-age-on{box-shadow:var(--shadow-e2),0 0 0 2px color-mix(in srgb,var(--app-accent) 45%,transparent)}
.dc-age-chip.dc-age-static{cursor:default;flex-direction:row;align-items:center;gap:7px;padding:5px 11px}
.dc-age-chip.dc-age-static:hover{transform:none;box-shadow:var(--shadow-e1)}
.dc-age-chip.dc-age-zero{opacity:.5}
.dc-age-n{font-size:16px;font-weight:800;letter-spacing:-.02em;line-height:1}
.dc-age-static .dc-age-n{font-size:13px}
.dc-age-l{font-size:10px;font-weight:700;opacity:.82}
.dc-age-1{background:color-mix(in srgb,var(--color-warning,#ff9f0a) 16%,transparent);color:color-mix(in srgb,var(--color-warning,#ff9f0a) 60%,var(--text-primary))}
.dc-age-2{background:color-mix(in srgb,#ff8c2b 20%,transparent);color:color-mix(in srgb,#ff8c2b 64%,var(--text-primary))}
.dc-age-3{background:color-mix(in srgb,var(--color-error,#ff453a) 17%,transparent);color:color-mix(in srgb,var(--color-error,#ff453a) 66%,var(--text-primary))}
.dc-age-4{background:color-mix(in srgb,var(--color-error,#ff453a) 28%,transparent);color:color-mix(in srgb,var(--color-error,#ff453a) 80%,var(--text-primary))}

/* — Transmittal items editor (in modal form) — */
.tr-items-block{margin-top:6px;display:flex;flex-direction:column;gap:9px}
.tr-items-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tr-items-sub{font-size:11.5px;color:var(--text-muted)}
.tr-items-list{display:flex;flex-direction:column;gap:6px}
.tr-items-empty{font-size:12.5px;color:var(--text-muted);padding:11px 13px;border:1px dashed var(--border);border-radius:var(--radius-md,10px)}
.tr-item-row{display:flex;align-items:center;gap:9px;padding:8px 11px;background:var(--surface-2,color-mix(in srgb,var(--text-primary) 4%,transparent));border-radius:11px}
.tr-item-ico{display:grid;place-items:center;width:26px;height:26px;flex:0 0 26px;border-radius:8px;background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent)}
.tr-item-ico svg{width:14px;height:14px}
.tr-item-kind{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);flex:0 0 auto}
.tr-item-label{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-item-ref{font-size:11px;color:var(--text-muted);margin-left:6px;font-weight:600}
.tr-item-x{flex:0 0 auto;width:26px;height:26px;border:none;background:transparent;color:var(--text-muted);border-radius:8px;cursor:pointer;display:grid;place-items:center;transition:background var(--motion-fast,.15s),color var(--motion-fast,.15s)}
.tr-item-x:hover{background:color-mix(in srgb,var(--color-error,#ff453a) 14%,transparent);color:var(--color-error,#ff453a)}
.tr-item-x svg{width:12px;height:12px}
.tr-items-add{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tr-add-kind{flex:0 0 auto;width:130px}
.tr-add-ref{flex:1 1 180px;min-width:0}
.tr-add-ref:empty{display:none}
.tr-add-refsel{width:100%}
.tr-add-label{flex:1 1 160px;min-width:0}
.tr-add-btn{flex:0 0 auto}
@media (max-width:560px){.tr-add-kind,.tr-add-ref,.tr-add-label{flex:1 1 100%;width:100%}}

/* ══ Transmittal BUILDER — two-pane shell (author | live cover-sheet preview) ══
   The widened modal mirrors the established .qi-wrap idiom. The preview is solid
   "paper on the desk" (content, never glass-in-scroll); the only glass is the sticky
   preview header (chrome). Collapses to single column on narrow widths. */
.gm-modal:has(.trf-shell){max-width:min(1080px,96vw)}
.trf-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:18px;align-items:start}
.trf-author{min-width:0}
.trf-author-sub{margin:0 0 14px;font-size:12.5px;color:var(--text-muted);line-height:1.45}
.trf-preview-pane{min-width:0;position:sticky;top:0;align-self:start}
/* Reactive polish for the item-selector rows + add control. Contained rounded hover
   (no transform — rows live in a list), spring press-deform on Add. Token-driven. */
.tr-item-row{transition:background var(--motion-fast,.15s) var(--ease-out,ease),box-shadow var(--motion-fast,.15s) var(--ease-out,ease)}
.tr-item-row:hover{background:color-mix(in srgb,var(--app-accent) 7%,var(--card-bg));box-shadow:var(--shadow-e1)}
.tr-add-btn{transition:transform var(--motion-fast,.15s) var(--ease-spring,ease),box-shadow var(--motion-fast,.15s) var(--ease-out,ease)}
.tr-add-btn:active{transform:scale(.95)}
.tr-items-empty{transition:border-color var(--motion-base,.22s) var(--ease-out,ease)}
.tr-items-block:focus-within .tr-items-empty{border-color:color-mix(in srgb,var(--app-accent) 40%,var(--border))}
/* Recipient / ball-in-court summary chip — situates the send (who has the ball + the deadline). */
.trf-recip{margin-top:2px}
.trf-recip-card{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:12px;
  background:color-mix(in srgb,var(--app-accent) 6%,var(--card-bg));box-shadow:var(--shadow-e1)}
.trf-recip-ico{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:9px;
  background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent)}
.trf-recip-ico svg{width:15px;height:15px}
.trf-recip-who{display:flex;flex-direction:column;min-width:0;flex:1}
.trf-recip-l{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
.trf-recip-v{font-size:13px;font-weight:700;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trf-recip-due{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;font-size:11px;font-weight:700;
  padding:4px 9px;border-radius:999px;color:var(--color-warning);
  background:color-mix(in srgb,var(--color-warning) 14%,transparent)}
.trf-recip-due.is-urgent{color:var(--color-error,#ff453a);background:color-mix(in srgb,var(--color-error,#ff453a) 14%,transparent)}
.trf-recip-due .ic{width:12px;height:12px}
/* — Preview pane chrome — */
.trf-preview-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;border-radius:12px 12px 0 0;
  background:var(--frost-bg);backdrop-filter:var(--frost-blur);-webkit-backdrop-filter:var(--frost-blur);
  border-bottom:.5px solid color-mix(in srgb,var(--text-primary) 8%,transparent);position:relative;z-index:1}
.trf-preview-head-l{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--text-primary)}
.trf-preview-head-l .ic{width:14px;height:14px}
.trf-preview-head-r{display:inline-flex;align-items:center;gap:8px}
.trf-preview-count{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:999px;
  color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 12%,transparent);transition:transform var(--motion-fast,.15s) var(--ease-spring,ease)}
.trf-preview-count.is-tick{transform:scale(1.14)}
.trf-preview-head-tag{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--app-accent)}
.trf-preview-toggle{display:none}
.trf-preview-scroll{max-height:62svh;overflow-y:auto;scrollbar-width:none;padding:14px;
  background:color-mix(in srgb,var(--text-primary) 4%,transparent);border-radius:0 0 12px 12px}
.trf-preview-scroll::-webkit-scrollbar{width:6px}
.trf-preview-scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text-primary) 14%,transparent);border-radius:3px}
/* — Cover-sheet "paper". Forced-light letterhead surface; values are NAMED paper tokens
     (documented light-surface set), not ad-hoc greys, so it stays a clean white sheet on
     every theme without raw inline hex. Solid content card — never glass-in-scroll. — */
.trf-pp{
  --trf-paper-bg:#ffffff; --trf-paper-ink:#1c1c1e; --trf-paper-strong:#111114;
  --trf-paper-body:#3a3a3c; --trf-paper-muted:#636366; --trf-paper-faint:#8e8e93;
  --trf-paper-line:#e6e6e6; --trf-paper-line-soft:#f0f0f0; --trf-paper-dash:#bbbbbe;
  --trf-paper-rule:#33333a;
  background:var(--trf-paper-bg);color:var(--trf-paper-ink);border-radius:10px;padding:0 0 30px;overflow:hidden;
  box-shadow:var(--shadow-e2);font-size:12px;line-height:1.5;font-feature-settings:'tnum' 1}
.trf-pp.is-fresh{animation:trfPaperIn .26s var(--ease-out,ease) both}
@keyframes trfPaperIn{from{opacity:.55;transform:translateY(3px)}to{opacity:1;transform:none}}
/* Letterhead masthead band (structural — carries NO tenant brand; the branded PDF still
   comes from the untouched Generate path). Reads as the top of a physical sheet. */
.trf-pp-mast{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:22px 26px 16px;border-bottom:2px solid var(--trf-paper-rule)}
.trf-pp-mast-l{min-width:0}
.trf-pp-eyebrow{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--trf-paper-faint)}
.trf-pp-title{font-size:21px;font-weight:800;letter-spacing:-.01em;color:var(--trf-paper-strong);margin-top:2px}
.trf-pp-sub{font-size:12.5px;color:var(--trf-paper-muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trf-pp-mast-r{flex:0 0 auto;text-align:right}
.trf-pp-no-l{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--trf-paper-faint)}
.trf-pp-no-v{font-size:14px;font-weight:800;color:var(--trf-paper-strong);font-variant-numeric:tabular-nums}
.trf-pp-purpose{display:inline-block;margin-top:5px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--trf-paper-rule) 8%,transparent);color:var(--trf-paper-body)}
.trf-pp-body{padding:0 26px}
.trf-pp-sec{margin-top:18px}
.trf-pp-h{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--trf-paper-faint);border-bottom:1px solid var(--trf-paper-line);padding-bottom:5px;margin-bottom:9px;
  display:flex;align-items:center;justify-content:space-between;gap:8px}
.trf-pp-h-roll{font-size:9.5px;font-weight:800;letter-spacing:.02em;color:var(--trf-paper-muted);text-transform:none}
.trf-pp-pair{display:grid;grid-template-columns:104px 1fr;gap:6px 12px;margin:0}
.trf-pp-pair dt{font-weight:700;color:var(--trf-paper-muted)}
.trf-pp-pair dd{margin:0;color:var(--trf-paper-ink)}
.trf-pp-pair dd.is-due-urgent{color:var(--color-error,#ff453a);font-weight:700}
.trf-pp-dash{color:var(--trf-paper-dash)}
.trf-pp-tbl{width:100%;border-collapse:collapse;font-size:11.5px}
.trf-pp-tbl th{text-align:left;font-weight:700;color:var(--trf-paper-faint);border-bottom:1px solid var(--trf-paper-line);padding:4px 6px}
.trf-pp-tbl td{padding:5px 6px;border-bottom:1px solid var(--trf-paper-line-soft);color:var(--trf-paper-body);vertical-align:top}
.trf-pp-tbl td:first-child{color:var(--trf-paper-faint);font-variant-numeric:tabular-nums}
.trf-pp-empty-row{text-align:center;color:var(--trf-paper-faint);font-style:italic}
.trf-pp-block{white-space:pre-wrap;color:var(--trf-paper-body)}
.trf-pp-sig{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:32px 26px 0}
.trf-pp-sigline{border-top:1px solid var(--trf-paper-rule);padding-top:5px;font-size:10.5px;color:var(--trf-paper-muted);font-weight:600}
.trf-preview-gen{margin-top:12px}
.trf-preview-note{margin-top:12px;font-size:11.5px;color:var(--text-muted);text-align:center;line-height:1.4}
@media (prefers-reduced-transparency: reduce){
  .trf-preview-head{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (prefers-reduced-motion: reduce){
  .trf-pp.is-fresh{animation:none}
  .tr-item-row,.tr-add-btn,.trf-preview-count{transition:none}
  .tr-add-btn:active{transform:none}
  .trf-preview-count.is-tick{transform:none}
}
/* Collapse to single column; the preview becomes a collapsible section so it stays reachable
   on phone portrait without scrolling past the whole form. */
@media (max-width:900px){
  .gm-modal:has(.trf-shell){max-width:min(640px,94vw)}
  .trf-shell{grid-template-columns:1fr}
  .trf-preview-pane{position:static;margin-top:4px}
  .trf-preview-toggle{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;
    color:var(--text-muted);border-radius:8px;cursor:pointer;transition:transform var(--motion-fast,.15s) var(--ease-out,ease)}
  .trf-preview-toggle svg{width:13px;height:13px}
  .trf-preview-pane.is-collapsed .trf-preview-toggle{transform:rotate(-90deg)}
  .trf-preview-pane.is-collapsed .trf-preview-head{border-radius:12px}
  .trf-preview-pane.is-collapsed .trf-preview-scroll,
  .trf-preview-pane.is-collapsed .trf-preview-gen,
  .trf-preview-pane.is-collapsed .trf-preview-note{display:none}
}

/* — Transmittal full-page workspace (master / detail / rail) — */
.trw-wrap{display:flex;flex-direction:column;gap:16px;min-height:0}
.trw-grid{display:grid;grid-template-columns:300px minmax(0,1fr) 270px;gap:16px;align-items:start}
/* 🗒️ pt.8 (row 21) — panes reach the viewport bottom (was min-height:340px = a fixed
   island over a dead matte on short lists). Content-only scroll inside each pane. */
.trw-master,.trw-detail,.trw-rail{padding:14px;min-height:min(560px,calc(100vh - 230px));max-height:calc(100vh - 230px);overflow:hidden;display:flex;flex-direction:column}
.trw-master-head{display:flex;align-items:center;gap:8px;margin-bottom:11px;flex-wrap:wrap}
.trw-filters{display:flex;gap:6px;flex:1;flex-wrap:wrap}
.trw-fsel{font:inherit;font-size:11.5px;padding:5px 8px;border-radius:var(--radius-pill,999px);border:1px solid var(--border);background:var(--card-bg);color:var(--text-primary);cursor:pointer}
.btn.btn-sm.trw-new{padding:5px 11px;font-size:12px}
.trw-master-list{display:flex;flex-direction:column;gap:5px;overflow-y:auto;flex:1;margin:-4px;padding:4px}
.trw-master-empty{font-size:12.5px;color:var(--text-muted);padding:18px 8px;text-align:center}
.trw-row{display:flex;align-items:center;gap:10px;padding:10px 11px;border:none;background:transparent;border-radius:12px;cursor:pointer;text-align:left;width:100%;transition:background var(--motion-fast,.15s)}
.trw-row:hover{background:color-mix(in srgb,var(--text-primary) 5%,transparent)}
.trw-row-on{background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
.trw-row-on:hover{background:color-mix(in srgb,var(--app-accent) 16%,transparent)}
.trw-row-status{width:8px;height:8px;border-radius:50%;flex:0 0 8px;background:var(--text-muted)}
.trw-st-sent .trw-row-status,.trw-row .trw-st-sent{background:var(--color-info,#4a90d9)}
.trw-row-status.trw-st-sent{background:var(--color-info,#4a90d9)}
.trw-row .trw-st-acknowledged,.trw-row-status.trw-st-acknowledged{background:var(--color-success,#30d158)}
.trw-row-status.trw-st-closed{background:var(--text-muted)}
.trw-row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.trw-row-title{font-size:13.5px;font-weight:700;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trw-row-num{font-size:11px;font-weight:700;color:var(--text-muted);margin-right:6px}
.trw-row-sub{font-size:11.5px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trw-detail{overflow-y:auto}
.trw-detail-empty,.trw-detail-empty .dc-empty-ico{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;text-align:center;gap:8px;color:var(--text-muted)}
.trw-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.trw-detail-num{font-size:12px;font-weight:700;color:var(--text-muted);display:flex;align-items:center;gap:8px;margin-bottom:4px}
.trw-detail-subj{margin:0;font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--text-primary)}
.trw-detail-acts{display:flex;gap:7px;align-items:center}
.trw-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px 18px;padding:13px 0;border-top:.5px solid var(--border);border-bottom:.5px solid var(--border)}
.trw-field{display:flex;flex-direction:column;gap:2px;min-width:0}
.trw-field-l{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
.trw-field-v{font-size:13.5px;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:6px}
.trw-contact-link{border:none;background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent);width:22px;height:22px;border-radius:7px;cursor:pointer;display:inline-grid;place-items:center}
.trw-contact-link svg{width:12px;height:12px}
.trw-notes{margin-top:13px}
.trw-notes p{margin:5px 0 0;font-size:13px;color:var(--text-secondary);line-height:1.5;white-space:pre-wrap}
.trw-items-sec,.trw-trail-sec{margin-top:16px}
.trw-sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px}
.trw-sec-head span:first-child{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary)}
.trw-sec-n{font-size:11.5px;color:var(--text-muted);font-weight:600}
.trw-items{display:flex;flex-direction:column;gap:6px}
.trw-item{display:flex;align-items:center;gap:9px;padding:8px 11px;background:var(--surface-2,color-mix(in srgb,var(--text-primary) 4%,transparent));border-radius:11px}
.trw-item-kind{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);flex:0 0 auto}
.trw-item-label{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trw-item-empty,.trw-trail-empty,.trw-trail-loading{font-size:12.5px;color:var(--text-muted);padding:10px 0}
.trw-inline-link{border:none;background:transparent;color:var(--app-accent);font:inherit;font-weight:700;cursor:pointer;padding:0;text-decoration:underline}
.trw-trail{display:flex;flex-direction:column;gap:0;position:relative}
.trw-trail-row{display:flex;gap:11px;padding:7px 0;position:relative}
.trw-trail-dot{width:9px;height:9px;border-radius:50%;background:var(--app-accent);flex:0 0 9px;margin-top:4px;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 16%,transparent)}
.trw-trail-body{display:flex;flex-direction:column;gap:1px;min-width:0}
.trw-trail-lbl{font-size:13px;font-weight:700;color:var(--text-primary)}
.trw-trail-meta{font-size:11.5px;color:var(--text-muted)}
.trw-rail{gap:13px}
.trw-rail-status{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.03em;padding:9px 13px;border-radius:12px;background:var(--surface-2,color-mix(in srgb,var(--text-primary) 5%,transparent));color:var(--text-secondary)}
.trw-rail-status.trw-st-sent{background:color-mix(in srgb,var(--color-info,#4a90d9) 14%,transparent);color:var(--color-info,#4a90d9)}
.trw-rail-status.trw-st-acknowledged{background:color-mix(in srgb,var(--color-success,#30d158) 15%,transparent);color:color-mix(in srgb,var(--color-success,#30d158) 74%,var(--text-primary))}
.trw-rail-status-dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 8px}
.trw-rail-block{display:flex;flex-direction:column;gap:2px}
.trw-rail-l{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
.trw-rail-v{font-size:13.5px;font-weight:600;color:var(--text-primary)}
.trw-rail-actions{display:flex;flex-direction:column;gap:8px;margin-top:5px}
.btn.btn-block{display:flex;width:100%;justify-content:center}
@media (max-width:1100px){.trw-grid{grid-template-columns:260px minmax(0,1fr)}.trw-rail{display:none}}
@media (max-width:760px){.trw-grid{grid-template-columns:1fr}.trw-master,.trw-detail{max-height:none}.trw-detail-grid{grid-template-columns:1fr}}

/* — Doc-control detail drawer (full-page in-page side sheet) — */
.dc-drawer-scrim{position:fixed;inset:0;background:rgba(0,0,0,.28);z-index:1400;opacity:0;transition:opacity .22s ease}
.dc-drawer-scrim-on{opacity:1}
.dc-drawer{position:fixed;top:0;right:0;height:100vh;height:100dvh;width:380px;max-width:92vw;z-index:1401;background:var(--card-bg);box-shadow:-8px 0 40px rgba(0,0,0,.18);border-left:.5px solid var(--chrome-border);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .26s var(--ease-spring,cubic-bezier(.32,.72,0,1))}
/* W5-5 — bare 100vh = iOS Safari's LARGE viewport (extends under the bottom toolbar), so the fixed
   .dcd-actions footer clipped behind it. 100dvh (with 100vh fallback) tracks the visible height, and
   the safe-area pad keeps the buttons above the home indicator / toolbar. */
.dc-drawer .dcd-actions{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
.dc-drawer.dc-drawer-on{transform:translateX(0)}
.dcd-head{padding:18px 18px 14px;border-bottom:.5px solid var(--border)}
.dcd-head-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.dcd-head-top .dc-row-kind{width:34px;height:34px;border-radius:11px}
.dcd-close{border:none;background:var(--surface-2,color-mix(in srgb,var(--text-primary) 6%,transparent));width:30px;height:30px;border-radius:9px;cursor:pointer;display:grid;place-items:center;color:var(--text-muted);transition:background var(--motion-fast,.15s)}
.dcd-close:hover{background:color-mix(in srgb,var(--text-primary) 11%,transparent);color:var(--text-primary)}
.dcd-close svg{width:12px;height:12px}
.dcd-title{font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--text-primary);line-height:1.25}
/* #27 — title is click-to-rename: a quiet hover affordance so it reads as editable. */
.dcd-title[data-fileid]{cursor:text;border-radius:var(--radius-sm);padding:1px 4px;margin:-1px -4px;transition:background var(--motion-fast)}
.dcd-title[data-fileid]:hover{background:color-mix(in srgb,var(--text-primary) 6%,transparent)}
.dcd-title-edit{width:100%;font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--text-primary);line-height:1.25;background:var(--surface-2);border:.5px solid var(--app-accent);border-radius:var(--radius-sm);padding:2px 6px;outline:none;font-family:inherit;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 15%,transparent)}
/* #27 — inline category picker in the detail drawer. */
.dcd-cat-select{-webkit-appearance:none;appearance:none;height:28px;padding:0 26px 0 10px;background:var(--surface-2);border:.5px solid var(--chrome-border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;outline:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238e8e93'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;transition:border-color var(--motion-fast)}
.dcd-cat-select:hover{border-color:var(--chrome-border-strong)}
.dcd-cat-select:focus{border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 15%,transparent)}
.dcd-sub{font-size:12.5px;color:var(--text-muted);margin-top:3px}
.dcd-statusrow{display:flex;align-items:center;gap:8px;margin-top:9px}
.dcd-kind{font-size:11px;font-weight:700;color:var(--text-muted)}
.dcd-body{padding:16px 18px;display:flex;flex-direction:column;gap:13px;overflow-y:auto;flex:1}
.dcd-clock{padding:13px 15px;border-radius:14px;background:var(--surface-2,color-mix(in srgb,var(--text-primary) 5%,transparent))}
.dcd-clock-ok{background:color-mix(in srgb,var(--color-info,#4a90d9) 11%,transparent)}
.dcd-clock-warn{background:color-mix(in srgb,var(--color-warning,#ff9f0a) 15%,transparent)}
.dcd-clock-bad{background:color-mix(in srgb,var(--color-error,#ff453a) 14%,transparent)}
.dcd-clock-main{font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary)}
.dcd-clock-sub{font-size:11.5px;color:var(--text-muted);margin-top:3px}
.dcd-field{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:11px;border-bottom:.5px solid var(--border)}
.dcd-field:last-child{border-bottom:none;padding-bottom:0}
/* Live ball-in-court chain mounted in the drawer — full width, sits below the aging field, above meta. */
.dcd-chain{padding:2px 0 11px;border-bottom:.5px solid var(--border);margin-bottom:11px}
.dcd-chain .cc-editor{margin-top:0}
.dcd-chain:empty,.dcd-chain .co-chain-host:empty{display:none}
.dcd-field-l{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
.dcd-field-v{font-size:13.5px;font-weight:600;color:var(--text-primary);text-align:right}
.dcd-actions{padding:14px 18px 18px;border-top:.5px solid var(--border);display:flex;flex-direction:column;gap:8px}
@media (max-width:560px){.dc-drawer{width:100vw;max-width:100vw}}

/* ── G6-W2 — doc-control drawer depth (file badge + from-chat) ─────────────── */
.dcd-filebadge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;color:var(--text-muted);background:color-mix(in srgb,var(--text-primary) 7%,transparent);border-radius:999px;padding:2px 8px}
.dcd-filebadge svg{width:11px;height:11px}
.dcd-fromchat:empty{display:none}
.dcd-fromchat{margin-top:2px}

/* ── G6-W2 — bundle-into-transmittal picker (floating panel on the matte) ──── */
.dc-bundle-scrim{position:fixed;inset:0;z-index:1450;background:rgba(0,0,0,.34);opacity:0;transition:opacity .2s var(--ease-out,ease)}
.dc-bundle-scrim.dc-bundle-scrim-on{opacity:1}
.dc-bundle-pop{position:fixed;z-index:1451;top:50%;left:50%;transform:translate(-50%,-46%) scale(.97);width:440px;max-width:94vw;max-height:80vh;display:flex;flex-direction:column;padding:0;opacity:0;transition:opacity .2s var(--ease-out,ease),transform .2s var(--ease-spring,cubic-bezier(.32,.72,0,1))}
.dc-bundle-pop.dc-bundle-pop-on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.dc-bundle-head{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 8px}
.dc-bundle-title{font-size:16px;font-weight:800;letter-spacing:-.02em;color:var(--text-primary)}
.dc-bundle-sub{padding:0 18px 10px;font-size:12.5px;color:var(--text-muted)}
.dc-bundle-list{overflow-y:auto;padding:0 12px;display:flex;flex-direction:column;gap:6px}
.dc-bundle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;border:none;background:var(--surface-2,color-mix(in srgb,var(--text-primary) 5%,transparent));border-radius:12px;padding:11px 13px;cursor:pointer;transition:background var(--motion-fast,.15s),transform var(--motion-fast,.15s)}
.dc-bundle-row:hover{background:color-mix(in srgb,var(--app-accent) 12%,var(--surface-2,transparent));transform:translateY(-1px)}
.dc-bundle-row-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.dc-bundle-row-num{font-size:13px;font-weight:800;color:var(--text-primary)}
.dc-bundle-row-subj{font-size:12px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-bundle-row-meta{display:flex;align-items:center;gap:8px;flex-shrink:0}
.dc-bundle-row-n{font-size:11px;font-weight:700;color:var(--text-muted)}
.dc-bundle-empty{padding:18px;text-align:center;font-size:13px;color:var(--text-muted)}
.dc-bundle-foot{padding:12px 18px 18px}

/* ── G6-W2 — toast action button (Undo) ───────────────────────────────────── */
.dl-toast-action{position:fixed;top:calc(64px + env(safe-area-inset-top,0));left:50%;transform:translateX(-50%);z-index:var(--z-top,2000);border:none;background:var(--text-primary);color:var(--card-bg,#fff);font-weight:700;font-size:13px;padding:9px 18px;border-radius:999px;cursor:pointer;box-shadow:var(--shadow-e4,0 8px 30px rgba(0,0,0,.22));backdrop-filter:blur(12px)}
.dl-toast-action:hover{opacity:.9}
.dl-toast-action:active{transform:translateX(-50%) scale(.95)}

/* ── G6-W2 — distribution-lists manager (floating panel) ──────────────────── */
.dc-dl-btn svg.ic{width:13px;height:13px;vertical-align:-2px;margin-right:5px}
.dl-mgr-scrim{position:fixed;inset:0;z-index:1450;background:rgba(0,0,0,.34);opacity:0;transition:opacity .2s var(--ease-out,ease)}
.dl-mgr-scrim.dl-mgr-scrim-on{opacity:1}
.dl-mgr-pop{position:fixed;z-index:1451;top:50%;left:50%;transform:translate(-50%,-46%) scale(.97);width:520px;max-width:94vw;max-height:84vh;display:flex;flex-direction:column;padding:0;opacity:0;transition:opacity .2s var(--ease-out,ease),transform .2s var(--ease-spring,cubic-bezier(.32,.72,0,1))}
.dl-mgr-pop.dl-mgr-pop-on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.dl-mgr-head{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 6px}
.dl-mgr-title{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--text-primary)}
.dl-mgr-ico{width:18px;height:18px;color:var(--app-accent)}
.dl-mgr-sub{padding:0 18px 12px;font-size:12.5px;color:var(--text-muted)}
.dl-mgr-toolbar{padding:0 18px 12px;display:flex;justify-content:flex-end}
.dl-mgr-list{overflow-y:auto;padding:0 12px 16px;display:flex;flex-direction:column;gap:6px}
.dl-row{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:12px;background:var(--surface-2,color-mix(in srgb,var(--text-primary) 5%,transparent));transition:background var(--motion-fast,.15s),transform var(--motion-fast,.15s)}
.dl-row:hover{background:color-mix(in srgb,var(--app-accent) 9%,var(--surface-2,transparent));transform:translateY(-1px)}
.dl-row-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.dl-row-name{font-size:13.5px;font-weight:700;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-row-meta{font-size:11px;color:var(--text-muted)}
.dl-count-pill{flex-shrink:0;min-width:24px;text-align:center;font-size:12px;font-weight:800;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 14%,transparent);border-radius:999px;padding:3px 9px}
.dl-row-acts{display:flex;gap:4px;flex-shrink:0}
.dl-icon-btn{border:none;background:transparent;width:30px;height:30px;border-radius:9px;cursor:pointer;display:grid;place-items:center;color:var(--text-muted);transition:background var(--motion-fast,.15s),color var(--motion-fast,.15s)}
.dl-icon-btn:hover{background:color-mix(in srgb,var(--text-primary) 9%,transparent);color:var(--text-primary)}
.dl-icon-btn svg{width:14px;height:14px}
/* manager row action buttons — keep the 14px glyph, expand the hit area for field/tablet use */
.dl-icon-btn{transition:background var(--motion-fast,.15s),color var(--motion-fast,.15s),transform var(--motion-fast,.15s) var(--ease-spring)}
.dl-icon-btn:active{transform:scale(.92)}
@media(prefers-reduced-motion:reduce){.dl-icon-btn:active{transform:none}}
@media(max-width:640px){.dl-icon-btn{width:44px;height:44px}.dl-row{padding:13px 13px}}
.dl-empty{padding:30px 18px;text-align:center}
.dl-editor{margin:0 12px 12px;padding:16px;display:flex;flex-direction:column;gap:12px}
.dl-editor-head{font-size:14px;font-weight:800;color:var(--text-primary)}
.dl-editor-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:2px}
.dl-scope-check{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-muted);cursor:pointer}
.dl-load-btn{margin-left:8px;border:none;background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent);font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;vertical-align:middle;transition:background var(--motion-fast,.15s)}
.dl-load-btn:hover{background:color-mix(in srgb,var(--app-accent) 20%,transparent)}
.dl-load-btn svg{width:10px;height:10px}
/* picker popover (reuses .rt-glass-pop chrome) */
.dl-pick-pop{z-index:1460;min-width:230px;max-width:300px;max-height:50vh;overflow-y:auto;padding:6px;border-radius:14px}
.dl-pick-head{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);padding:6px 8px 4px}
.dl-pick-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;border:none;background:transparent;border-radius:9px;padding:8px 9px;cursor:pointer;transition:background var(--motion-fast,.15s)}
.dl-pick-row:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
.dl-pick-name{font-size:13px;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-pick-n{flex-shrink:0;font-size:11px;font-weight:800;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 14%,transparent);border-radius:999px;padding:1px 7px}
.dl-pick-empty{padding:10px;font-size:12.5px;color:var(--text-muted)}
.dl-pick-foot{border-top:.5px solid var(--border);margin-top:4px;padding:6px 8px 2px}
.trw-fromchat:empty,.pn-fromchat:empty{display:none}
.trw-fromchat,.pn-fromchat{margin-top:12px}
@media (max-width:560px){.dl-mgr-pop,.dc-bundle-pop{top:auto;bottom:0;transform:translate(-50%,12px);border-radius:18px 18px 0 0;max-height:88vh;width:100vw;max-width:100vw}.dl-mgr-pop.dl-mgr-pop-on,.dc-bundle-pop.dc-bundle-pop-on{transform:translate(-50%,0)}}

/* Lane 3 — RFQ vendor picker */
.rfq-vlist{max-height:300px;overflow-y:auto;border:0.5px solid var(--border);border-radius:var(--radius-md,10px);padding:4px}
.rfq-vrow{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--radius-md,8px);cursor:pointer}
.rfq-vrow:hover{background:color-mix(in srgb,var(--text-primary) 5%,transparent)}
.rfq-vrow input{flex:0 0 auto}
.rfq-vname{font-size:13px;font-weight:600;color:var(--text-primary)}
.rfq-vmeta{font-size:11.5px;color:var(--text-muted);margin-left:auto}
/* Lane 3 — estimate-delta → CO preview list */
.m2t-delta-list{max-height:300px;overflow-y:auto;border:0.5px solid var(--border);border-radius:var(--radius-md,10px);padding:10px 12px;margin-bottom:14px}
.m2t-delta-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);margin:8px 0 4px}
.m2t-delta-h:first-child{margin-top:0}
.m2t-delta-row{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;padding:3px 0;color:var(--text-primary)}
.m2t-delta-row span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m2t-pos{color:var(--color-success);font-variant-numeric:tabular-nums;font-weight:600}
.m2t-neg{color:var(--color-error);font-variant-numeric:tabular-nums;font-weight:600}
/* F7 — RT Documents editor overlay (Quill, vendored). Full-screen sheet over the app;
   Quill's .ql-* surfaces re-skinned to our tokens so it never looks like stock Quill. */
.rtdoc-overlay{position:fixed;inset:0;z-index:var(--z-top,1000);background:color-mix(in srgb,var(--app-bg) 70%,rgba(0,0,0,.5));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:stretch;justify-content:center;animation:rtdocIn var(--motion-base,220ms) var(--ease-out,ease)}
@keyframes rtdocIn{from{opacity:0}to{opacity:1}}
.rtdoc-shell{display:flex;flex-direction:column;width:min(900px,100%);margin:24px;background:var(--surface);border-radius:var(--radius-lg,16px);box-shadow:var(--shadow-e4,0 24px 64px rgba(0,0,0,.3)),inset 0 1px 0 rgba(255,255,255,.14);overflow:hidden}
@media (max-width:640px){.rtdoc-shell{margin:0;border-radius:0}}
.rtdoc-head{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:0.5px solid var(--border);flex:0 0 auto}
.rtdoc-title{flex:1 1 auto;min-width:0;border:none;background:transparent;font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--text-primary);outline:none;font-family:inherit}
.rtdoc-title::placeholder{color:var(--text-muted)}
.rtdoc-head-actions{display:flex;gap:8px;flex:0 0 auto;align-items:center}
/* 2026-06-20 — doc editor head hierarchy: [title][spacer][status chip][quiet Cancel][bold Save].
   The title flexes (spacer), a Saved/Unsaved/Saving status chip sits before the actions, Cancel
   is a quiet ghost, Save is the single bold primary. */
.rtdoc-status-chip{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;height:26px;padding:0 11px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:-.1px;background:var(--surface-2,var(--chrome-bg));color:var(--text-muted);border:.5px solid var(--chrome-border);transition:background var(--motion-base),color var(--motion-base)}
.rtdoc-status-chip .rsc-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 7px;box-shadow:0 0 0 2px color-mix(in srgb,currentColor 20%,transparent)}
.rtdoc-status-chip[data-state="saved"]{color:var(--color-success);background:color-mix(in srgb,var(--color-success) 10%,var(--card-bg));border-color:color-mix(in srgb,var(--color-success) 22%,transparent)}
.rtdoc-status-chip[data-state="unsaved"]{color:var(--color-warning);background:color-mix(in srgb,var(--color-warning) 10%,var(--card-bg));border-color:color-mix(in srgb,var(--color-warning) 24%,transparent)}
.rtdoc-status-chip[data-state="saving"]{color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 10%,var(--card-bg));border-color:color-mix(in srgb,var(--app-accent) 22%,transparent)}
.rtdoc-status-chip[data-state="saving"] .rsc-dot{animation:rsc-pulse 1s ease-in-out infinite}
.rtdoc-status-chip[data-state="error"]{color:var(--color-error);background:color-mix(in srgb,var(--color-error) 10%,var(--card-bg));border-color:color-mix(in srgb,var(--color-error) 24%,transparent)}
@keyframes rsc-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.rtdoc-btn-quiet{flex:0 0 auto;height:34px;padding:0 14px;border-radius:var(--radius-pill,999px);border:.5px solid var(--chrome-border);background:var(--chrome-bg);color:var(--text-secondary,var(--text-primary));font-size:13px;font-weight:600;letter-spacing:-.1px;cursor:pointer;font-family:inherit;transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast),transform var(--motion-fast)}
.rtdoc-btn-quiet:hover{background:var(--chrome-bg-hover);color:var(--text-primary);border-color:var(--border-strong)}
.rtdoc-btn-quiet:active{transform:scale(.96)}
.rtdoc-btn-quiet:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 22%,transparent)}
.rtdoc-btn-primary{flex:0 0 auto;height:34px;padding:0 18px;border-radius:var(--radius-pill,999px);border:none;background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 92%,#fff),var(--app-accent));color:var(--on-accent,#fff);font-size:13px;font-weight:800;letter-spacing:-.1px;cursor:pointer;font-family:inherit;box-shadow:var(--bevel-top),0 6px 16px -8px color-mix(in srgb,var(--app-accent) 60%,transparent);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-base),filter var(--motion-fast)}
.rtdoc-btn-primary:hover{transform:translateY(-1px);box-shadow:var(--bevel-top),0 10px 22px -8px color-mix(in srgb,var(--app-accent) 65%,transparent);filter:brightness(1.04)}
.rtdoc-btn-primary:active{transform:translateY(0) scale(.97)}
.rtdoc-btn-primary:disabled{opacity:.55;cursor:default;transform:none;filter:none}
.rtdoc-btn-primary:focus-visible{outline:none;box-shadow:var(--bevel-top),0 0 0 3px color-mix(in srgb,var(--app-accent) 30%,transparent)}
@media (max-width:640px){.rtdoc-status-chip .rsc-label{display:none}.rtdoc-status-chip{padding:0 8px}}
.rtdoc-editor-wrap{flex:1 1 auto;overflow:hidden;display:flex;flex-direction:column;min-height:0}
.rtdoc-foot{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 14px;border-top:0.5px solid var(--border);background:var(--card-bg);font-size:12px;color:var(--text-muted)}
.rtdoc-count{font-variant-numeric:tabular-nums;font-weight:600}
.rtdoc-foot-hint{opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--motion-fast) ease}
.rtdoc-foot-hint.rtdoc-state-err{color:var(--color-error);opacity:1;font-weight:600}
.rtsheet-toolbar{flex:0 0 auto;display:flex;align-items:center;gap:2px;padding:6px 12px;border-bottom:0.5px solid var(--border);background:var(--card-bg);flex-wrap:wrap}
.rtsheet-tb-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;border-radius:7px;background:transparent;color:var(--text-secondary,var(--text-primary));cursor:pointer;padding:0;position:relative;transition:background var(--motion-fast) ease,color var(--motion-fast) ease}
.rtsheet-tb-btn:hover{background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent)}
.rtsheet-tb-btn:active{transform:scale(.92)}
.rtsheet-tb-btn svg{width:18px;height:18px;display:block}
.rtsheet-tb-sep{width:1px;height:20px;background:var(--border);margin:0 5px;flex:0 0 auto}
.rtsheet-tb-color{overflow:hidden}
.rtsheet-tb-color input[type=color]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;border:none;padding:0}
@media (max-width:640px){.rtdoc-foot-hint{display:none}}
.rtdoc-overlay .ql-toolbar.ql-snow{border:none;border-bottom:0.5px solid var(--border);padding:8px 12px;background:var(--card-bg)}
/* Custom undo/redo toolbar buttons have no built-in Quill icon — inject one (curved arrow). */
.rtdoc-overlay .ql-toolbar .ql-undo,.rtdoc-overlay .ql-toolbar .ql-redo{background-repeat:no-repeat;background-position:center;background-size:17px 17px}
.rtdoc-overlay .ql-toolbar .ql-undo{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h7a4 4 0 0 1 0 8H6'/><path d='M4 7l3-3M4 7l3 3'/></svg>")}
.rtdoc-overlay .ql-toolbar .ql-redo{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M14 7H7a4 4 0 0 0 0 8h5'/><path d='M14 7l-3-3M14 7l-3 3'/></svg>")}
.rtdoc-overlay .ql-container.ql-snow{border:none;flex:1 1 auto;overflow-y:auto;font-family:inherit;font-size:15px}
.rtdoc-overlay .ql-editor{padding:28px 32px;line-height:1.65;color:var(--text-primary);max-width:760px;margin:0 auto;width:100%}
.rtdoc-overlay .ql-editor.ql-blank::before{color:var(--text-muted);font-style:normal;left:32px}
.rtdoc-overlay .ql-snow .ql-stroke{stroke:var(--text-muted)}
.rtdoc-overlay .ql-snow .ql-fill{fill:var(--text-muted)}
.rtdoc-overlay .ql-snow .ql-picker{color:var(--text-primary)}
.rtdoc-overlay .ql-snow.ql-toolbar button:hover .ql-stroke,.rtdoc-overlay .ql-snow .ql-toolbar button:hover .ql-stroke,.rtdoc-overlay .ql-snow.ql-toolbar button.ql-active .ql-stroke{stroke:var(--app-accent)}
.rtdoc-overlay .ql-snow.ql-toolbar button.ql-active .ql-fill{fill:var(--app-accent)}
.rtdoc-overlay .ql-snow .ql-picker-options{background:var(--surface);border:0.5px solid var(--border);box-shadow:var(--shadow-e4)}
body.rtdoc-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){.rtdoc-overlay{animation:none}}
@media (prefers-reduced-transparency:reduce){.rtdoc-overlay{background:var(--app-bg);backdrop-filter:none;-webkit-backdrop-filter:none}}
/* F8 — RT Sheets grid (jspreadsheet). Wider shell; the grid scrolls inside. */
.rtsheet-shell{width:min(1200px,100%)}
.rtsheet-grid-wrap{flex:1 1 auto;overflow:auto;padding:8px;background:var(--surface);min-height:0}
.rtsheet-overlay .jexcel_content{font-family:inherit}
.rtsheet-overlay .jexcel>thead>tr>td,.rtsheet-overlay .jexcel>tbody>tr>td{font-size:13px}

/* F1 — Dockable side-panel (split workspace). Chrome floating above content → glass
   per DESIGN.md (frosted surface + blur + edge highlight). JS-owned width var. */
.dock-panel{position:fixed;top:var(--header-h,56px);right:0;bottom:0;width:var(--dock-w,360px);z-index:var(--z-popover,900);
  display:flex;flex-direction:column;background:var(--frost-bg,var(--surface));backdrop-filter:var(--frost-blur,blur(20px) saturate(1.8));-webkit-backdrop-filter:var(--frost-blur,blur(20px) saturate(1.8));
  border-left:0.5px solid var(--border);box-shadow:-8px 0 32px rgba(0,0,0,.16),inset 1px 0 0 rgba(255,255,255,.10);
  border-top-left-radius:var(--radius-lg,16px);border-bottom-left-radius:var(--radius-lg,16px);overflow:hidden;
  animation:dockIn var(--motion-base,220ms) var(--ease-out,ease)}
.dock-panel[hidden]{display:none}
@keyframes dockIn{from{transform:translateX(20px);opacity:.4}to{transform:translateX(0);opacity:1}}
.dock-resize{position:absolute;left:-3px;top:0;bottom:0;width:7px;cursor:col-resize;z-index:2}
.dock-resize:hover,body.dock-resizing .dock-resize{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--app-accent) 40%,transparent))}
body.dock-resizing{cursor:col-resize;user-select:none}
.dock-head{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:12px 14px 10px;border-bottom:0.5px solid var(--border);flex:0 0 auto;position:relative}
/* §dock-float — tools cluster (customize · pop-out/dock · close). */
.dock-tools{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.dock-tool{border:none;background:transparent;color:var(--text-muted);width:26px;height:26px;border-radius:7px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--motion-fast) ease,color var(--motion-fast) ease}
.dock-tool:hover{background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-primary)}
.dock-tool.active{background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent)}
.dock-tool-ico{width:15px;height:15px}
/* §dock-float — FLOAT MODE: detach into a free window. The body class flips position model;
   the panel keeps its own frosted card look (rounded all corners, full drop shadow). */
body.dock-floating .dock-panel{top:auto;right:auto;bottom:auto;left:0;
  border:0.5px solid var(--border);border-radius:var(--radius-lg,16px);
  box-shadow:0 24px 64px rgba(0,0,0,.30),0 2px 8px rgba(0,0,0,.14),inset 0 0 0 .5px rgba(255,255,255,.10);
  animation:dockFloatIn var(--motion-base,220ms) var(--ease-out,ease);overflow:hidden}
@keyframes dockFloatIn{from{transform:scale(.97);opacity:.5}to{transform:scale(1);opacity:1}}
body.dock-floating .dock-head{cursor:grab}
body.dock-floating.dock-dragging,body.dock-floating.dock-dragging *{cursor:grabbing !important;user-select:none}
body.dock-floating .dock-head:active{cursor:grabbing}
/* The left-edge width handle is docked-only; float uses the 8 zones. */
body.dock-floating .dock-resize{display:none}
/* 8-way resize zones — hidden when docked, shown when floating (mirrors qn-resize-zone). */
.dock-rz{position:absolute;z-index:4;touch-action:none;display:none}
body.dock-floating .dock-rz{display:block}
.dock-rz-n{top:-3px;left:14px;right:14px;height:11px;cursor:ns-resize}
.dock-rz-s{bottom:-3px;left:14px;right:14px;height:11px;cursor:ns-resize}
.dock-rz-w{left:-3px;top:14px;bottom:14px;width:11px;cursor:ew-resize}
.dock-rz-e{right:-3px;top:14px;bottom:14px;width:11px;cursor:ew-resize}
.dock-rz-nw{top:-3px;left:-3px;width:18px;height:18px;cursor:nwse-resize}
.dock-rz-ne{top:-3px;right:-3px;width:18px;height:18px;cursor:nesw-resize}
.dock-rz-sw{bottom:-3px;left:-3px;width:18px;height:18px;cursor:nesw-resize}
.dock-rz-se{bottom:-3px;right:-3px;width:18px;height:18px;cursor:nwse-resize}
/* Mobile (≤640px): floating gets unwieldy → force docked full-width regardless of saved mode. */
@media (max-width:640px){
  body.dock-floating .dock-panel{top:var(--header-h,56px) !important;right:0 !important;left:auto !important;bottom:0 !important;width:min(100vw,420px) !important;height:auto !important;border-radius:0}
  body.dock-floating .dock-rz{display:none}
  body.dock-floating .dock-head{cursor:default}
  /* Rule 7 — comfortable tap targets for the dock chrome on the full-width mobile dock. */
  .dock-x,.dock-tool,.dock-chat-back{min-width:var(--tap-min,44px);min-height:var(--tap-min,44px)}
  .dock-url-go{min-width:40px;min-height:40px}
}
/* §dock-customize — the panels show/hide/reorder menu (glass pop under the gear). */
.dock-customize-pop{position:absolute;top:calc(100% + 6px);right:8px;z-index:var(--z-toast,1200);min-width:248px;padding:8px;border-radius:var(--radius-md,12px);background:var(--card-bg);box-shadow:0 16px 40px rgba(0,0,0,.22),inset 0 0 0 .5px var(--border)}
.dock-cz-head{font-size:12.5px;font-weight:800;color:var(--text-primary);padding:4px 8px 2px;letter-spacing:-.01em}
.dock-cz-hint{font-size:11px;color:var(--text-muted);padding:0 8px 8px;line-height:1.4}
.dock-cz-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:9px;transition:background var(--motion-fast) ease}
.dock-cz-row:hover{background:color-mix(in srgb,var(--text-primary) 5%,transparent)}
.dock-cz-row.dock-cz-off .dock-cz-lbl,.dock-cz-row.dock-cz-off .dock-cz-ico{opacity:.5}
.dock-cz-ico{width:15px;height:15px;color:var(--app-accent);flex:0 0 auto}
.dock-cz-lbl{flex:1 1 auto;font-size:12.5px;font-weight:600;color:var(--text-primary);white-space:nowrap}
.dock-cz-moves{display:inline-flex;gap:1px;flex:0 0 auto}
.dock-cz-move{border:none;background:transparent;color:var(--text-muted);width:22px;height:22px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.dock-cz-move:hover{background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-primary)}
.dock-cz-move svg{width:12px;height:12px}
.dock-cz-move-spacer{width:22px;height:22px;display:inline-block}
.dock-cz-toggle{flex:0 0 auto;position:relative;width:34px;height:20px;border:none;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 18%,transparent);cursor:pointer;transition:background var(--motion-fast) ease;padding:0}
.dock-cz-toggle.on{background:var(--app-accent)}
.dock-cz-knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform var(--motion-fast) ease}
.dock-cz-toggle.on .dock-cz-knob{transform:translateX(14px)}
.dock-title{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary);text-transform:uppercase}
.dock-title-ico{width:14px;height:14px;color:var(--app-accent)}
.dock-x{border:none;background:transparent;color:var(--text-muted);font-size:15px;cursor:pointer;width:26px;height:26px;border-radius:7px;transition:background var(--motion-fast) ease;display:inline-flex;align-items:center;justify-content:center}
.dock-x .ic{width:14px;height:14px}
.dock-url-go .ic{width:16px;height:16px}
.dock-mirror-x{display:inline-flex;align-items:center;justify-content:center}
.dock-mirror-x .ic{width:12px;height:12px}
.ai-prop-head .ic{vertical-align:-2px}
.dock-x:hover{background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-primary)}
/* Phase C — cockpit context chip: the single scope control above every surface */
.dock-context{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:0.5px solid var(--border);flex:0 0 auto}
.dock-ctx-proj{display:flex;align-items:center;gap:6px;min-width:0;font-size:12px;font-weight:700;color:var(--text-primary)}
.dock-ctx-proj .dock-ctx-ico{width:13px;height:13px;color:var(--app-accent);flex:0 0 auto}
.dock-ctx-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* clickable project-picker chip (2026-07-05) — lets you bind/change the focused project from any
   dock surface, incl. from the 'All projects' state (was a dead label). */
.dock-ctx-pick{border:none;background:transparent;cursor:pointer;border-radius:8px;padding:3px 6px;transition:background var(--motion-fast)}
.dock-ctx-pick:hover{background:color-mix(in srgb,var(--app-accent) 10%,transparent)}
.dock-ctx-pick .dock-ctx-chev{width:11px;height:11px;color:var(--text-muted);flex:0 0 auto;opacity:.7}
.dock-proj-pick-menu{min-width:230px;max-width:300px;max-height:340px;overflow-y:auto;padding:6px;border-radius:14px;
  font-size:13px;color:var(--text-primary)}
.dock-proj-pick-menu .dpp-head{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);padding:5px 9px 6px}
.dock-proj-pick-menu .dpp-row{display:flex;align-items:center;gap:9px;width:100%;border:none;background:transparent;cursor:pointer;
  padding:7px 9px;border-radius:9px;text-align:left;color:var(--text-primary);font-size:13px;font-weight:600;transition:background var(--motion-fast)}
.dock-proj-pick-menu .dpp-row:hover{background:color-mix(in srgb,var(--app-accent) 10%,transparent)}
.dock-proj-pick-menu .dpp-row.dpp-on{background:color-mix(in srgb,var(--app-accent) 16%,transparent);color:var(--app-accent)}
.dock-proj-pick-menu .dpp-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1px 2px rgba(16,24,40,.2)}
.dock-proj-pick-menu .dpp-allico{width:14px;height:14px;flex:0 0 auto;color:var(--app-accent)}
.dock-proj-pick-menu .dpp-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.dock-proj-pick-menu .dpp-sep{height:1px;background:var(--chrome-border);margin:5px 6px}
.dock-proj-pick-menu .dpp-empty{padding:10px;color:var(--text-muted);font-size:12px;text-align:center}
.dock-ctx-toggle{display:inline-flex;margin-left:auto;flex:0 0 auto;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 7%,transparent);padding:2px}
.dock-ctx-seg{border:none;background:transparent;color:var(--text-muted);font-size:10.5px;font-weight:700;letter-spacing:-.01em;padding:3px 9px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:background var(--motion-fast) ease,color var(--motion-fast) ease}
.dock-ctx-seg:hover{color:var(--text-primary)}
.dock-ctx-seg.dock-ctx-on{background:var(--card-bg);color:var(--app-accent);box-shadow:var(--shadow-e1)}
.dock-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:12px 12px 24px;display:flex;flex-direction:column;gap:12px}
.dock-summary{font-size:13px;color:var(--text-muted)}.dock-summary b{color:var(--text-primary);font-size:15px}
.dock-sec{display:flex;flex-direction:column;gap:5px}
.dock-sec-h{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);display:flex;align-items:center;gap:6px}
.dock-sec-h span{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 8%,transparent);font-size:10px;font-variant-numeric:tabular-nums}
.dock-row{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;width:100%;padding:8px 10px;border:none;background:var(--card-bg);border-radius:var(--radius-md,10px);box-shadow:var(--shadow-e1);cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring,ease),box-shadow var(--motion-base) ease}
.dock-row:hover{transform:translateX(2px);box-shadow:var(--shadow-e2)}.dock-row:active{transform:scale(.98)}
/* Phase C4 — per-row cross-surface actions (reveal on hover/focus-within of the row) */
.dock-row-wrap{position:relative}
.dock-row-wrap .dock-row{padding-right:62px}
.dock-row-acts{position:absolute;top:6px;right:6px;display:flex;gap:3px;opacity:0;transition:opacity var(--motion-fast) ease}
.dock-row-wrap:hover .dock-row-acts,.dock-row-wrap:focus-within .dock-row-acts{opacity:1}
.dock-row-act{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;border-radius:7px;background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-muted);cursor:pointer;transition:background var(--motion-fast) ease,color var(--motion-fast) ease}
.dock-row-act:hover{background:color-mix(in srgb,var(--app-accent) 16%,transparent);color:var(--app-accent)}
.dock-row-act svg{width:13px;height:13px}
.dock-row.dock-bad{background:linear-gradient(160deg,color-mix(in srgb,var(--color-error) 9%,var(--card-bg)),var(--card-bg) 72%);box-shadow:var(--shadow-e1),inset 0 0 0 .5px color-mix(in srgb,var(--color-error) 26%,transparent)}
.dock-row-t{font-size:12.5px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.dock-row-s{display:flex;gap:8px;font-size:11px;color:var(--text-muted);flex-wrap:wrap}
/* 2026-07-05 — anchor the 'Open full command center' button to the BOTTOM of the panel (was the
   last item in the scrolling list → it scrolled away) AND match the Team-Chat 'Open full Chat'
   button EXACTLY (Gavin): same radius/tint/size/weight/padding + the same footer chrome (top
   hairline + backdrop). sticky bottom pins it to the visible base of the scroll area. */
.dock-full{position:sticky;bottom:0;z-index:2;width:100%;box-sizing:border-box;margin-top:auto;
  border:none;border-radius:10px;padding:9px;
  background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent);font-size:12.5px;font-weight:600;cursor:pointer;
  transition:background var(--motion-fast)}
/* footer chrome behind the sticky button — matches .dock-chat-foot (top hairline + solid base),
   so scrolled list rows don't bleed under it and it reads as a real anchored footer. */
.dock-full::before{content:'';position:absolute;left:-8px;right:-8px;top:-8px;bottom:calc(-8px - env(safe-area-inset-bottom,0px));z-index:-1;pointer-events:none;
  background:linear-gradient(to top,var(--surface) 68%,transparent);
  border-top:0.5px solid var(--chrome-border)}
.dock-full:hover{background:color-mix(in srgb,var(--app-accent) 18%,transparent)}
.dock-toggle-btn.active{background:color-mix(in srgb,var(--app-accent) 16%,transparent);color:var(--app-accent)}
/* V-attn1 — TYPED CUE on the ⚡ dock-toggle: a glow/pulse tinted to the source surface
   (--dock-cue-tint set in JS) + a count badge. The tint hints WHICH surface has news (the
   toggle opens the whole dock). Respects reduced-motion (glow stays, pulse stops). */
/* Reactive cue (2026-07-05 rework) — the ORB ITSELF reacts, not just an under-glow halo.
   The fill tints toward the cue color and the whole orb gently breathes (scale). Crucially it
   KEEPS the same lift shadow as its sibling orbs (create/notif) so a reacting orb never looks
   flatter — the old rule replaced the lift with a bare outer ring. A tight cue ring + a soft
   outer glow are layered ON TOP of the full lift, not instead of it. */
.dock-toggle-btn.dock-cue{color:#fff;
  background:radial-gradient(circle at 32% 24%,color-mix(in srgb,var(--dock-cue-tint,var(--app-accent)) 30%,#fff) 0%,var(--dock-cue-tint,var(--app-accent)) 62%,color-mix(in srgb,var(--dock-cue-tint,var(--app-accent)) 78%,#000) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 2px rgba(0,0,0,.22),inset 0 0 0 .5px color-mix(in srgb,var(--dock-cue-tint,var(--app-accent)) 60%,#000),0 1px 2px rgba(16,24,40,.2),0 4px 10px -3px color-mix(in srgb,var(--dock-cue-tint,var(--app-accent)) 55%,transparent);
  animation:dockCuePulse 2.2s var(--ease-in-out,ease-in-out) infinite}
.dock-toggle-btn.dock-cue .nb-ico{filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
@keyframes dockCuePulse{
  0%,100%{transform:scale(1);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 2px rgba(0,0,0,.22),inset 0 0 0 .5px color-mix(in srgb,var(--dock-cue-tint,var(--app-accent)) 60%,#000),0 1px 2px rgba(16,24,40,.2),0 3px 8px -3px color-mix(in srgb,var(--dock-cue-tint,var(--app-accent)) 45%,transparent),0 0 0 0 color-mix(in srgb,var(--dock-cue-tint,var(--app-accent)) 0%,transparent)}
  50%{transform:scale(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 2px rgba(0,0,0,.22),inset 0 0 0 .5px color-mix(in srgb,var(--dock-cue-tint,var(--app-accent)) 70%,#000),0 2px 4px rgba(16,24,40,.24),0 6px 14px -3px color-mix(in srgb,var(--dock-cue-tint,var(--app-accent)) 60%,transparent),0 0 12px 2px color-mix(in srgb,var(--dock-cue-tint,var(--app-accent)) 40%,transparent)}}
@media (prefers-reduced-motion:reduce){.dock-toggle-btn.dock-cue{animation:none}}
.dock-cue-badge{position:absolute;top:-3px;right:-3px;min-width:15px;height:15px;padding:0 4px;border-radius:99px;background:var(--dock-cue-tint,var(--app-accent));color:#fff;font-size:9.5px;font-weight:800;line-height:15px;text-align:center;box-shadow:0 0 0 1.5px var(--surface);font-variant-numeric:tabular-nums;pointer-events:none}
/* F3 — dock surface switcher (Attention | Browser) */
.dock-surf-switch{display:flex;gap:2px;min-width:0;flex:1 1 auto;overflow-x:auto;scrollbar-width:none}
.dock-surf-switch::-webkit-scrollbar{display:none}
.dock-surf-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border:none;background:transparent;border-radius:8px;font-size:11.5px;font-weight:700;letter-spacing:-.02em;color:var(--text-muted);cursor:pointer;text-transform:uppercase;white-space:nowrap;flex:0 0 auto;transition:background var(--motion-fast) ease,color var(--motion-fast) ease}
.dock-surf-btn .dock-title-ico{flex:0 0 auto}
.dock-surf-btn:hover{color:var(--text-primary)}
.dock-surf-btn.dock-surf-on{background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent)}
/* F3 — built-in browser surface */
.dock-browser{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;height:auto;align-self:stretch;gap:0;margin:-12px -12px -24px}
/* V-asst1 — Browser address bar reworked to a clean ADDRESS-BAR PILL: a rounded frosted field
   with a leading link glyph + the input, and a circular accent go-button. Matches the Atira
   control language; tighter, clearer hierarchy than the old flat row. */
.dock-url-bar{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:0.5px solid var(--chrome-border);flex:0 0 auto}
.dock-url-field{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;height:34px;padding:0 6px 0 12px;border-radius:var(--radius-pill);background:var(--surface-2);border:0.5px solid var(--chrome-border);transition:border-color var(--motion-fast),box-shadow var(--motion-fast),background var(--motion-fast)}
/* V-asst1 — single clean focus cue: a soft accent border on the FIELD only. The input itself
   suppresses its own ring (the global :focus-visible was stacking a 2nd solid blue outline). */
.dock-url-field:focus-within{background:var(--card-bg);border-color:color-mix(in srgb,var(--app-accent) 40%,transparent)}
.dock-url-input:focus,.dock-url-input:focus-visible{outline:none!important;box-shadow:none!important}
.dock-url-lead{flex:0 0 auto;width:14px;height:14px;color:var(--text-muted)}
.dock-url-input{flex:1 1 auto;min-width:0;height:100%;border:0;background:transparent;color:var(--text-primary);font-size:12.5px;outline:none;font-family:inherit}
.dock-url-go{flex:0 0 auto;width:28px;height:28px;border:none;border-radius:50%;background:var(--app-accent);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:filter var(--motion-fast),transform var(--motion-fast)}
.dock-url-go:hover{filter:brightness(1.06)}
.dock-url-go:active{transform:scale(.92)}
.dock-url-go svg{width:14px;height:14px}
.dock-browser-view{flex:1 1 auto;position:relative;min-height:0;display:flex;flex-direction:column;overflow:auto}
.dock-browser-frame{flex:1 1 auto;width:100%;border:none;background:#fff}
.dock-browser-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:32px 20px;text-align:center;min-height:100%;height:auto;box-sizing:border-box}
.dock-browser-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 12px;border-top:0.5px solid var(--border);background:var(--frost-bg,var(--surface));flex:0 0 auto}
.dock-browser-host{font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock-browser-ext{flex:0 0 auto;border:0.5px solid var(--border);background:var(--card-bg);color:var(--app-accent);font-size:11px;font-weight:600;padding:4px 9px;border-radius:999px;cursor:pointer}
.dock-browser-ext:hover{border-color:var(--app-accent)}
/* Loading state shown while a framed URL settles (replaces the old blank-white pane). */
.dock-browser-load{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--surface);color:var(--text-muted)}
.dock-browser-load-host{font-size:12px;font-weight:600;color:var(--text-muted)}
/* Embedding-blocked notice: most sites refuse framing → blank iframe with no error event.
   We surface this honest, dismissible card over the (likely blank) frame after a grace. */
.dock-browser-blocked{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:28px 22px;text-align:center;background:var(--frost-bg,var(--surface));backdrop-filter:var(--frost-blur,blur(20px) saturate(1.8));-webkit-backdrop-filter:var(--frost-blur,blur(20px) saturate(1.8))}
.dock-browser-blocked[hidden]{display:none}
.dock-browser-blocked-ico{width:38px;height:38px;color:var(--text-muted);opacity:.5;margin-bottom:2px}
.dock-browser-blocked-title{font-size:15px;font-weight:700;color:var(--text-primary);letter-spacing:-.01em;max-width:300px}
.dock-browser-blocked-sub{font-size:12.5px;color:var(--text-muted);max-width:320px;line-height:1.5}
.dock-browser-blocked-actions{display:flex;flex-direction:column;gap:7px;margin-top:6px;width:100%;max-width:240px}
.dock-browser-blocked-go{border:none;background:var(--app-accent);color:#fff;font-size:13px;font-weight:600;padding:9px 14px;border-radius:10px;cursor:pointer;box-shadow:var(--shadow-e1);transition:transform var(--motion-fast,150ms) var(--ease-out,ease),filter var(--motion-fast,150ms) ease}
.dock-browser-blocked-go:hover{filter:brightness(1.06)}
.dock-browser-blocked-go:active{transform:scale(.97)}
.dock-browser-blocked-dismiss{border:none;background:transparent;color:var(--text-muted);font-size:12px;font-weight:500;padding:5px;border-radius:8px;cursor:pointer}
.dock-browser-blocked-dismiss:hover{color:var(--text-primary)}
/* rtbx — companion-extension "install" state (shown when the extension isn't detected). */
.rtbx-install{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:9px;min-height:100%;height:auto;box-sizing:border-box;padding:24px 22px;text-align:center}
.rtbx-install-ico{width:40px;height:40px;color:var(--app-accent);opacity:.85;margin-bottom:2px}
.rtbx-install-title{font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary)}
.rtbx-install-sub{font-size:12.5px;color:var(--text-muted);max-width:320px;line-height:1.5}
.rtbx-install-actions{display:flex;flex-direction:column;gap:7px;margin-top:8px;width:100%;max-width:248px}
.rtbx-install-go{border:none;background:var(--app-accent);color:#fff;font-size:13px;font-weight:600;padding:10px 14px;border-radius:10px;cursor:pointer;box-shadow:var(--shadow-e1);transition:transform var(--motion-fast,150ms) var(--ease-out,ease),filter var(--motion-fast,150ms) ease}
.rtbx-install-go:hover{filter:brightness(1.06)}
.rtbx-install-go:active{transform:scale(.97)}
.rtbx-install-alt{border:0.5px solid var(--border);background:var(--card-bg);color:var(--app-accent);font-size:12px;font-weight:600;padding:7px 12px;border-radius:10px;cursor:pointer}
.rtbx-install-alt:hover{border-color:var(--app-accent)}
.rtbx-install-foot{font-size:11px;color:var(--text-muted);opacity:.8;margin-top:4px}
.rtbx-install-notes{list-style:none;margin:8px 0 0;padding:0;max-width:320px;display:flex;flex-direction:column;gap:5px;text-align:left}
.rtbx-install-notes li{font-size:11.5px;color:var(--text-muted);line-height:1.45;padding-left:14px;position:relative}
.rtbx-install-notes li::before{content:"•";position:absolute;left:2px;color:var(--app-accent);opacity:.7}
/* A1 input-target confirm bar — overlays the stage until the user vouches the shared tab */
.rtbx-input-confirm{position:absolute;left:8px;right:8px;bottom:8px;z-index:6;display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:space-between;padding:9px 11px;border-radius:10px;background:color-mix(in srgb,var(--app-accent) 92%,black);color:#fff;box-shadow:var(--shadow-e2);animation:rtbxKbIn var(--motion-fast,150ms) var(--ease-out,ease)}
.rtbx-ic-text{font-size:11.5px;line-height:1.4;flex:1 1 180px;min-width:0}
.rtbx-ic-acts{display:flex;gap:6px;flex:0 0 auto}
.rtbx-ic-yes,.rtbx-ic-no{border:none;border-radius:8px;font-size:11.5px;font-weight:600;padding:6px 10px;cursor:pointer}
.rtbx-ic-yes{background:#fff;color:var(--app-accent)}
.rtbx-ic-no{background:color-mix(in srgb,#fff 18%,transparent);color:#fff}
.rtbx-ic-yes:active,.rtbx-ic-no:active{transform:scale(.96)}
/* A1 — "mirror a live tab" opt-in toggle on the dock Browser surface (desktop only). */
.dock-mirror-row{flex:0 0 auto;display:flex;align-items:center;gap:4px;padding:0 8px 0 0;border-bottom:0.5px solid var(--border);background:var(--card-bg);min-width:0}
.dock-mirror-toggle{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:12.5px;color:var(--text-secondary,var(--text-muted));cursor:pointer;user-select:none}
.dock-mirror-toggle input{flex:0 0 auto;accent-color:var(--app-accent);width:15px;height:15px;cursor:pointer}
.dock-mirror-toggle > span:not(.dock-mirror-hint){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dock-mirror-toggle .dock-mirror-hint{margin-left:auto;font-size:10.5px;color:var(--text-muted);opacity:.8;white-space:nowrap;flex:0 0 auto}
.dock-mirror-x{flex:0 0 auto;border:none;background:transparent;color:var(--text-muted);font-size:13px;line-height:1;width:22px;height:22px;border-radius:6px;cursor:pointer}
.dock-mirror-x:hover{background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-primary)}
/* rtbx — top navigation bar (P3) over the live mirrored tab. */
.rtbx-navbar{display:flex;align-items:center;gap:4px;padding:5px 7px;border-bottom:0.5px solid var(--border);background:var(--frost-bg,var(--surface));flex:0 0 auto}
.rtbx-nav-btn{flex:0 0 auto;border:none;background:transparent;color:var(--text-secondary,var(--text-muted));font-size:14px;line-height:1;width:26px;height:26px;border-radius:7px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--motion-fast,150ms) ease,color var(--motion-fast,150ms) ease}
.rtbx-nav-btn:hover:not(:disabled){background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-primary)}
.rtbx-nav-btn:disabled{opacity:.32;cursor:default}
.rtbx-nav-host{flex:1 1 auto;min-width:0;font-size:11.5px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}
/* The stage holds the <video> (fills remaining height under the nav bar). */
.rtbx-stage{position:relative;flex:1 1 auto;min-height:0}
/* rtbx — live mirrored tab (Phase 1+): <video> fills the stage. */
.rtbx-video{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--card-bg);object-fit:contain;display:block;cursor:default}
.rtbx-video:focus{outline:2px solid var(--app-accent);outline-offset:-2px}
/* Keyboard-capture affordance (P2): shown while the panel owns the keyboard. */
.rtbx-kb-badge{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:4;background:color-mix(in srgb,var(--app-accent) 92%,black);color:#fff;font-size:11px;font-weight:600;padding:5px 11px;border-radius:999px;box-shadow:var(--shadow-e2);pointer-events:none;white-space:nowrap;animation:rtbxKbIn var(--motion-fast,150ms) var(--ease-out,ease)}
@keyframes rtbxKbIn{from{opacity:0;transform:translate(-50%,4px)}to{opacity:1;transform:translate(-50%,0)}}
/* E10 — page-side getDisplayMedia "pick a tab" hint, shown under the navbar until the user
   chooses a surface in the native picker. Centered card, rounded, no edge-strips. */
.rtbx-local-hint{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;padding:22px 26px;color:var(--text-secondary,var(--text-muted))}
.rtbx-local-hint-ico{width:34px;height:34px;color:var(--app-accent);opacity:.92}
.rtbx-local-hint-title{font-size:14px;font-weight:700;color:var(--text-primary)}
.rtbx-local-hint-sub{font-size:12px;line-height:1.5;max-width:300px;color:var(--text-muted)}
/* Resizable bookmarks/quick-links zone — drag the split below it to grow into the embed space. */
.dock-bm-zone{flex:0 0 auto;display:flex;flex-direction:column;min-height:40px;overflow-y:auto;background:var(--card-bg)}
.dock-split{flex:0 0 auto;height:9px;cursor:row-resize;position:relative;border-bottom:0.5px solid var(--border);background:var(--card-bg)}
.dock-split::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:28px;height:3px;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 18%,transparent)}
.dock-split:hover::after,body.dock-resizing .dock-split::after{background:color-mix(in srgb,var(--app-accent) 55%,transparent)}
.dock-bm-bar{flex:0 0 auto;display:flex;align-items:flex-start;gap:6px;padding:6px 10px;background:var(--card-bg);flex-wrap:wrap}
.dock-bm-empty{flex:1 1 auto;min-width:0;font-size:11px;color:var(--text-muted);opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock-bm-add{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:26px;height:24px;border:0.5px solid var(--border);background:var(--surface);color:var(--app-accent);border-radius:7px;cursor:pointer;padding:0}
.dock-bm-add:hover{border-color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
.dock-bm-add svg{width:15px;height:15px}
.dock-bm-chip{flex:0 0 auto;display:inline-flex;align-items:center;border:0.5px solid var(--border);background:var(--surface);border-radius:999px;overflow:hidden;max-width:160px}
.dock-bm-open{border:none;background:transparent;color:var(--text-primary);font-size:11px;font-weight:600;padding:4px 4px 4px 10px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:128px}
.dock-bm-open:hover{color:var(--app-accent)}
.dock-bm-del{border:none;background:transparent;color:var(--text-muted);font-size:14px;line-height:1;padding:0 8px 0 4px;cursor:pointer}
.dock-bm-del:hover{color:var(--color-error)}
/* Browser Tier-1 — "Save this page to <project>" snapshot action. Pill, accent-tinted, rounded (no edge-strips). */
.dock-snap-add{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;height:24px;border:0.5px solid var(--border);background:var(--surface);color:var(--app-accent);border-radius:999px;cursor:pointer;padding:0 11px;font-size:11px;font-weight:600;white-space:nowrap;transition:border-color var(--motion-fast,150ms) ease,background var(--motion-fast,150ms) ease}
.dock-snap-add:hover:not(:disabled){border-color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
.dock-snap-add:disabled{opacity:.45;cursor:default;color:var(--text-muted)}
.dock-snap-add svg{width:13px;height:13px;flex:0 0 auto}
.dock-snap-add.is-busy{pointer-events:none}
/* V-orb1 — dock-snap mini orb: just scale the footprint; the orb renders from pseudo-elements now. */
.dock-snap-add .dc-spinner{width:12px;height:12px}
/* Browser Tier-0 — per-project deep-link launchers (floating-panel canon, rounded, no edge-strips). */
.dock-deeplinks{flex:0 0 auto;padding:10px 12px;border-bottom:0.5px solid var(--border);background:var(--card-bg);display:flex;flex-direction:column;gap:8px}
.dock-deeplinks[hidden]{display:none}
.dock-dl-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dock-dl-title{flex:1 1 auto;min-width:0;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dock-dl-add{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;border:0.5px solid var(--border);background:var(--surface);color:var(--app-accent);font-size:11px;font-weight:600;border-radius:8px;padding:4px 9px;cursor:pointer}
.dock-dl-add svg{width:13px;height:13px}
.dock-dl-add:hover{border-color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
/* Tier 2 — tile-beside-RT toggle chip */
.dock-dl-tile{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:26px;height:24px;border:0.5px solid var(--border);background:var(--surface);color:var(--text-muted);border-radius:8px;cursor:pointer;transition:border-color var(--motion-fast) ease,background var(--motion-fast) ease,color var(--motion-fast) ease}
.dock-dl-tile svg{width:14px;height:14px}
.dock-dl-tile:hover{color:var(--text-primary);border-color:color-mix(in srgb,var(--text-primary) 24%,transparent)}
.dock-dl-tile.on{color:var(--app-accent);border-color:color-mix(in srgb,var(--app-accent) 35%,transparent);background:color-mix(in srgb,var(--app-accent) 10%,transparent)}
.dock-dl-empty{font-size:11.5px;color:var(--text-muted);line-height:1.45;opacity:.9}
.dock-dl-grid{display:flex;flex-direction:column;gap:6px}
.dock-dl-card{display:flex;align-items:center;gap:10px;border:0.5px solid var(--border);background:var(--surface);border-radius:11px;padding:8px 10px;cursor:pointer;transition:border-color var(--motion-fast,140ms) var(--ease-out,ease),background var(--motion-fast,140ms) var(--ease-out,ease),transform var(--motion-fast,140ms) var(--ease-out,ease),box-shadow var(--motion-fast,140ms) var(--ease-out,ease)}
.dock-dl-card:hover{border-color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 7%,var(--surface));transform:translateY(-1px);box-shadow:var(--shadow-e1,0 3px 10px rgba(0,0,0,.12))}
.dock-dl-card:focus-visible{outline:none;border-color:var(--app-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 40%,transparent)}
.dock-dl-ico{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent);font-size:15px}
.dock-dl-ico svg{width:16px;height:16px}
.dock-dl-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.dock-dl-label{font-size:12.5px;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dock-dl-host{font-size:10.5px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dock-dl-edit,.dock-dl-del{flex:0 0 auto;border:none;background:transparent;color:var(--text-muted);cursor:pointer;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;opacity:0;transition:opacity var(--motion-fast,140ms) var(--ease-out,ease),background var(--motion-fast,140ms) var(--ease-out,ease),color var(--motion-fast,140ms) var(--ease-out,ease)}
.dock-dl-card:hover .dock-dl-edit,.dock-dl-card:hover .dock-dl-del,.dock-dl-card:focus-within .dock-dl-edit,.dock-dl-card:focus-within .dock-dl-del{opacity:1}
.dock-dl-edit svg{width:13px;height:13px}
.dock-dl-del{font-size:16px;line-height:1}
.dock-dl-edit:hover{background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--app-accent)}
.dock-dl-del:hover{background:color-mix(in srgb,var(--color-error) 12%,transparent);color:var(--color-error)}
@media (hover:none){.dock-dl-edit,.dock-dl-del{opacity:1}}
@media (prefers-reduced-motion:reduce){.dock-dl-card{transition:none}.dock-dl-card:hover{transform:none}}
/* Deep-link manage modal — material panel on a dimmed scrim (reuses .rt-confirm-overlay). */
.rt-dl-modal{width:min(92vw,420px);background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius-lg,16px);box-shadow:var(--shadow-e4,0 24px 64px rgba(0,0,0,.32));padding:20px;display:flex;flex-direction:column;gap:12px;animation:pipIn var(--motion-base,220ms) var(--ease-out,ease)}
.rt-dl-modal-title{font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--text-primary)}
.rt-dl-modal-sub{font-size:12.5px;color:var(--text-muted);line-height:1.5}
.rt-dl-modal-sub code{font-family:var(--font-mono,ui-monospace,monospace);font-size:11px;background:color-mix(in srgb,var(--text-primary) 7%,transparent);padding:1px 5px;border-radius:5px;color:var(--text-primary)}
.rt-dl-field{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:var(--text-muted)}
.rt-dl-field input{font-size:13.5px;font-weight:400;color:var(--text-primary);background:var(--card-bg);border:0.5px solid var(--border);border-radius:10px;padding:9px 11px;width:100%;box-sizing:border-box}
.rt-dl-field input:focus{outline:none;border-color:var(--app-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 30%,transparent)}
.rt-dl-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.rt-dl-btn-cancel{border:0.5px solid var(--border);background:var(--surface);color:var(--text-primary);font-size:13px;font-weight:600;border-radius:10px;padding:8px 16px;cursor:pointer}
.rt-dl-btn-cancel:hover{background:color-mix(in srgb,var(--text-primary) 6%,transparent)}
.rt-dl-btn-save{border:none;background:var(--app-accent);color:#fff;font-size:13px;font-weight:600;border-radius:10px;padding:8px 18px;cursor:pointer}
.rt-dl-btn-save:hover{filter:brightness(1.06)}
@media (prefers-reduced-motion:reduce){.rt-dl-modal{animation:none}}
/* F4 — picture-in-picture record cards (float over any view; draggable; stack). */
.pip-card{position:fixed;z-index:calc(var(--z-top,1000) + 5);width:240px;background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius-lg,14px);box-shadow:var(--shadow-e4,0 16px 48px rgba(0,0,0,.28)),inset 0 1px 0 rgba(255,255,255,.14);overflow:hidden;animation:pipIn var(--motion-base,220ms) var(--ease-out,ease)}
@keyframes pipIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.pip-flash{animation:pipFlash .7s ease-out}
@keyframes pipFlash{0%,40%{box-shadow:0 0 0 2px var(--app-accent),var(--shadow-e4)}100%{box-shadow:var(--shadow-e4)}}
.pip-head{display:flex;align-items:center;gap:7px;padding:8px 10px;background:var(--card-bg);border-bottom:0.5px solid var(--border);cursor:grab;user-select:none}
body.pip-dragging .pip-head{cursor:grabbing}
.pip-ico{width:13px;height:13px;color:var(--app-accent);flex:0 0 auto}
.pip-kind{flex:1 1 auto;font-size:11px;font-weight:700;letter-spacing:.01em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pip-x{flex:0 0 auto;border:none;background:transparent;color:var(--text-muted);font-size:13px;cursor:pointer;width:22px;height:22px;border-radius:6px}
.pip-x:hover{background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-primary)}
.pip-body{padding:11px 12px;display:flex;flex-direction:column;gap:5px}
.pip-title{font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--text-primary);line-height:1.3}
.pip-sub{font-size:12px;color:var(--text-muted)}
.pip-meta{font-size:11.5px;color:var(--text-muted)}.pip-meta b{color:var(--text-primary);font-weight:600}
.pip-open{margin-top:6px;padding:6px;border:none;border-radius:var(--radius-md,8px);background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent);font-size:12px;font-weight:600;cursor:pointer}
.pip-open:hover{background:color-mix(in srgb,var(--app-accent) 18%,transparent)}
@media (prefers-reduced-motion:reduce){.pip-card{animation:none}.pip-flash{animation:none}}
@media (max-width:640px){.pip-card{width:min(86vw,240px)}}
/* Shift the main content left when the dock is open (desktop only — on narrow widths
   the dock overlays full-width instead of squeezing the content). */
@media (min-width:1025px){ body.dock-open #board,body.dock-open #listView,body.dock-open #dashboardView,body.dock-open #contactsView,body.dock-open #complianceView,body.dock-open #omHomeView,body.dock-open #estHomeView,body.dock-open #acctHomeView,body.dock-open #ownerHomeView,body.dock-open #projectFullView,body.dock-open #reportsView,body.dock-open #filesView,body.dock-open #photosView,body.dock-open #todoView,body.dock-open #adminView,body.dock-open #chatView{margin-right:var(--dock-w,360px)} }
/* §dock-float — when the dock is POPPED OUT (floating), it's detached from the layout, so the
   content must reclaim the full width — don't reserve the docked rail's margin (the empty-gap bug). */
@media (min-width:1025px){ body.dock-floating #board,body.dock-floating #listView,body.dock-floating #dashboardView,body.dock-floating #contactsView,body.dock-floating #complianceView,body.dock-floating #omHomeView,body.dock-floating #estHomeView,body.dock-floating #acctHomeView,body.dock-floating #ownerHomeView,body.dock-floating #projectFullView,body.dock-floating #reportsView,body.dock-floating #filesView,body.dock-floating #photosView,body.dock-floating #todoView,body.dock-floating #adminView,body.dock-floating #chatView{margin-right:0} }
@media (max-width:1024px){ .dock-panel{width:min(100vw,420px)} }
@media (prefers-reduced-motion:reduce){ .dock-panel{animation:none} .dock-row{transition:none} }
@media (prefers-reduced-transparency:reduce){ .dock-panel{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none} }
/* ── Workspace Phase 2 — canonical project-view side pane ──────────────────────────
   ONE pane abstraction (not a 4th one-off): same mechanism as the dock (a width var +
   a margin-right shift), but PROJECT-SCOPED (shifts only #projectFullView, not all 16
   views) with its own var + body class so the two never compose — mutually exclusive in
   v1 (spec §4.1a; the --pfv-rightshift the spec imagined never shipped, so we add the
   parallel --pfv-pane-w here next to the dock contract). */
@media (min-width:1025px){ body.pfv-pane-open #projectFullView{ margin-right:var(--pfv-pane-w,420px) } }
.pfv-pane{position:fixed;top:var(--header-h,56px);right:0;bottom:0;width:var(--pfv-pane-w,420px);z-index:var(--z-popover,900);
  display:flex;flex-direction:column;background:var(--lg-bg);backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract);
  border-left:0.5px solid var(--chrome-border);box-shadow:var(--lg-edge),var(--shadow-e3);overscroll-behavior:contain}
.pfv-pane[hidden]{display:none}
.pfv-pane-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:0.5px solid var(--chrome-border);flex-shrink:0;min-height:44px}
.pfv-pane-title{font-weight:600;font-size:13px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.pfv-pane-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
.pfv-pane-act{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;border-radius:8px;color:var(--text-muted);cursor:pointer}
.pfv-pane-act[hidden]{display:none} /* the class sets display:inline-flex, which beats UA [hidden] — re-assert (RT hidden-attr trap) */
.pfv-pane-act svg{width:15px;height:15px}
.pfv-pane-act:hover{background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-primary)}
.pfv-pane-body{flex:1;min-height:0;overflow:auto;padding:12px}
.pfv-pane-empty{color:var(--text-muted);font-size:13px;text-align:center;padding:32px 12px}
/* the record card drilled into the pane (reuses the workspace .pfv-ws-card detail) */
.pfv-pane-record{padding:2px}
/* 📃 pt.7 (row 24) — Connections mount under the pane/split record detail. The widget
   renders nothing when the record has no links, so the wrapper collapses to zero. */
.pfv-pane-connections{margin-top:10px}
.pfv-pane-connections:empty{display:none}
.pfv-pane-connections .rel-card{margin:0}
/* "⤢ open in side pane" affordance — quiet by default, blooms on row hover; rounded
   (no hard corners), press-deforms, theme-token only. Extends "every metric is a door". */
.pfv-rec-drill{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;border:0;background:transparent;border-radius:var(--radius-sm,8px);color:var(--text-muted);cursor:pointer;opacity:0;margin-left:6px;transition:opacity var(--motion-fast) var(--ease-out),background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.fin-ws-row:hover .pfv-rec-drill,.task-ws-row:hover .pfv-rec-drill,.stage-ws-row:hover .pfv-rec-drill,.rel-row:hover .pfv-rec-drill,.bic-head:hover .pfv-rec-drill,.pfv-rec-drill:focus-visible{opacity:1}
.pfv-rec-drill:hover{background:color-mix(in srgb,var(--app-accent) 10%,transparent);color:var(--app-accent)}
.pfv-rec-drill:active{transform:scale(.9)}
.pfv-rec-drill svg{width:13px;height:13px;pointer-events:none}
@media (prefers-reduced-motion:reduce){.pfv-rec-drill{transition:opacity var(--motion-fast)}.pfv-rec-drill:active{transform:none}}
/* drag-resize grip on the LEFT edge (pane is right-anchored) — mirrors #dockResize */
.pfv-pane-resize{position:absolute;left:-3px;top:0;bottom:0;width:7px;cursor:col-resize;z-index:1}
body.pfv-pane-resizing{cursor:col-resize;user-select:none}
@media (prefers-reduced-transparency:reduce){.pfv-pane{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
/* Below iPad-landscape the pane overlays full-width (no shift) — office is not phone-first
   but must degrade, not break. */
@media (max-width:1024px){ .pfv-pane{width:min(420px,92vw);max-width:92vw} body.pfv-pane-open #projectFullView{margin-right:0} }
/* ── E2 Workspace-Shell · the two-pane SPLIT (_rtSplitPane) ──────────────────
   The canonical dual-workspace: two floating record/document panels side-by-side
   over the full-page matte. NOT a flat split-column — each half is its own floating
   .rt-panel-style surface with a quiet gap (the matte shows through the seam). The
   divider signals the active drag via a contained fill (NO colored edge-strip — HARD).
   Mutually exclusive with the side pane + dock (one right-rail consumer at a time). */
#pfvSplit{position:fixed;top:var(--header-h,56px);right:0;bottom:0;left:0;z-index:var(--z-popover,900);
  display:flex;flex-direction:row;gap:10px;padding:10px;box-sizing:border-box;
  background:color-mix(in srgb,var(--bg) 62%,transparent);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}
#pfvSplit[hidden]{display:none}
/* the full-page view sits behind the split overlay while it's open (the split owns the canvas) */
body.pfv-split-open #projectFullView .pfv-section-strip{pointer-events:none}
.pfv-split-pane{display:flex;flex-direction:column;min-width:0;min-height:0;flex:1 1 50%;
  background:var(--lg-bg);backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract);
  border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg,16px);box-shadow:var(--lg-edge),var(--shadow-e3);
  overflow:hidden;transition:box-shadow var(--motion-fast) var(--ease-out)}
/* active half — signal via elevation + a soft accent-tinted ring, never an edge bar */
.pfv-split-pane.pfv-split-active{box-shadow:var(--lg-edge),var(--shadow-e4),0 0 0 1.5px color-mix(in srgb,var(--app-accent) 40%,transparent)}
.pfv-split-head{display:flex;align-items:center;gap:8px;padding:9px 11px;border-bottom:0.5px solid var(--chrome-border);flex-shrink:0;min-height:42px}
.pfv-split-title{font-weight:600;font-size:13px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.pfv-split-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
.pfv-split-act{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;border-radius:8px;color:var(--text-muted);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.pfv-split-act[hidden]{display:none}
.pfv-split-act svg{width:14px;height:14px;pointer-events:none}
.pfv-split-act:hover{background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-primary)}
.pfv-split-act:active{transform:scale(.9)}
.pfv-split-body{flex:1;min-height:0;overflow:auto;padding:12px}
.pfv-split-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:100%;min-height:240px;color:var(--text-muted);text-align:center;padding:32px 24px}
.pfv-split-empty-ico{width:34px;height:34px;opacity:.35}
.pfv-split-empty-title{font-size:15px;font-weight:600;color:var(--text-secondary)}
.pfv-split-empty-sub{font-size:12.5px;line-height:1.5;max-width:240px}
.pfv-split-empty-chip{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:var(--radius-sm);background:var(--surface-3,var(--surface-2));vertical-align:middle;margin:0 1px}
.pfv-split-empty-chip svg{width:11px;height:11px}
/* the seam handle — a slim rounded grip the matte gap reveals; hover blooms it, no hard corners */
.pfv-split-divider{flex:0 0 10px;align-self:stretch;display:flex;align-items:center;justify-content:center;cursor:col-resize;position:relative;touch-action:none}
.pfv-split-divider::before{content:"";width:4px;height:48px;max-height:40%;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 22%,transparent);transition:background var(--motion-fast),height var(--motion-fast) var(--ease-out)}
.pfv-split-divider:hover::before,body.pfv-split-resizing .pfv-split-divider::before{background:color-mix(in srgb,var(--app-accent) 70%,transparent);height:72px}
body.pfv-split-resizing{cursor:col-resize;user-select:none}
/* touch (iOS-WebKit): the grip is always visible + fatter so the drag target is reachable */
@media (hover:none),(pointer:coarse){ .pfv-split-divider{flex-basis:18px} .pfv-split-divider::before{width:5px;background:color-mix(in srgb,var(--app-accent) 55%,transparent)} }
@media (prefers-reduced-transparency:reduce){ #pfvSplit{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none} .pfv-split-pane{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none} }
@media (prefers-reduced-motion:reduce){ .pfv-split-pane,.pfv-split-act,.pfv-split-divider::before{transition:none} .pfv-split-act:active{transform:none} }
/* Below iPad-landscape the split STACKS vertically (the qn-split-pane idiom) so neither
   half collapses to nothing on a phone; the divider becomes a horizontal row grip. */
@media (max-width:1024px){
  #pfvSplit{flex-direction:column}
  .pfv-split-pane{flex-basis:50% !important}
  .pfv-split-divider{flex-basis:14px;cursor:row-resize;width:100%}
  .pfv-split-divider::before{width:48px;max-width:40%;height:4px}
  .pfv-split-divider:hover::before,body.pfv-split-resizing .pfv-split-divider::before{width:72px;height:4px}
  body.pfv-split-resizing{cursor:row-resize}
}
/* F5 — Office Manager home (new main page; reuses the .dc-* board system). */
/* A1 fix (2026-06-10) — the role-home pages (omHome/estHome/acctHome/ownerHome all share
   .omh-wrap) had ONLY {padding:0}: no flex/overflow. Inside the fixed-height flex BODY
   (overflow:hidden) their tall content overflowed and the bottom was CLIPPED with no scroll
   (Accounting + Portfolio "doesn't scroll"). Make .omh-wrap the scroll container: fill the
   body's height + scroll its own overflow. */
.omh-wrap{padding:0;flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.omh-inner{padding:22px 24px 48px;max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
@media (max-width:640px){.omh-inner{padding:16px 14px 36px;gap:14px}}
.omh-head{margin-bottom:2px}
.omh-greet{font-size:26px;font-weight:800;letter-spacing:-.02em;color:inherit}
.omh-sub{font-size:13.5px;color:var(--on-app-bg,var(--text-muted));opacity:.75;margin-top:3px}
.omh-hero{margin-bottom:6px;grid-template-columns:repeat(5,1fr)}  /* 5 tiles — override .dc-hero's 6-col */
@media (max-width:900px){.omh-hero{grid-template-columns:repeat(3,1fr)}}
@media (max-width:480px){.omh-hero{grid-template-columns:repeat(2,1fr)}}
.omh-section{display:flex;flex-direction:column;gap:8px}
.omh-sec-ico{width:16px;height:16px;color:var(--app-accent);flex:0 0 auto}
.omh-empty{padding:14px 16px;font-size:13px;color:var(--text-muted);background:var(--card-bg);border-radius:var(--radius-md,12px);box-shadow:var(--shadow-e1)}

/* ═══ 🏮 HUB WORKBENCH (2026-07-11) — rail + 1–4 pane canvas. Fills #omHomeView edge to edge (no
   dashboard gutters). Rail is slim glass; canvas is a CSS grid keyed by layout; panes are raised cards
   with a tab-strip. Apple-caliber: rounded, soft-elevated, no colored edge-strips. ═══ */
#omHomeView .hw-root{display:flex;gap:12px;height:calc(100vh - var(--app-header-h,56px) - 24px);min-height:520px;padding:12px 14px;box-sizing:border-box;width:100%}
/* Rail */
#omHomeView .hw-rail{flex:0 0 180px;display:flex;flex-direction:column;gap:8px;padding:12px 11px;border-radius:var(--radius-lg,16px);background:var(--lg-bg,var(--surface));backdrop-filter:var(--lg-refract,blur(20px) saturate(1.8));-webkit-backdrop-filter:var(--lg-refract,blur(20px) saturate(1.8));box-shadow:var(--lg-edge),var(--shadow-e2);border:.5px solid color-mix(in srgb,var(--chrome-border) 75%,transparent);overflow:hidden}
/* Atira orb brand header */
#omHomeView .hw-rail-brand{display:flex;align-items:center;gap:8px;padding:2px 4px 6px}
#omHomeView .hw-rail-orb{width:26px;height:26px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
#omHomeView .hw-rail-orb svg{width:26px;height:26px;filter:drop-shadow(0 1px 4px color-mix(in srgb,var(--app-accent) 30%,transparent))}
#omHomeView .hw-rail-brand-t{font-family:'Plus Jakarta Sans',var(--font-ui,inherit);font-size:15px;font-weight:800;letter-spacing:-.2px;color:var(--text-primary)}
/* group micro-labels (Space Mono — Atira's mono voice) */
#omHomeView .hw-rail-grp-t{font-family:'Space Mono','SFMono-Regular',ui-monospace,monospace;font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);padding:2px 6px;margin:6px 0 2px}
#omHomeView .hw-rail-grp-t:first-child{margin-top:2px}
#omHomeView .hw-rail-scroll{flex:1 1 auto;overflow-y:auto;margin:2px -4px 0;padding:0 4px;scrollbar-width:thin}
#omHomeView .hw-rail-scroll{scrollbar-color:color-mix(in srgb,var(--text-primary) 16%,transparent) transparent}
#omHomeView .hw-rail-scroll::-webkit-scrollbar{width:8px;background:transparent}
#omHomeView .hw-rail-scroll::-webkit-scrollbar-track{background:transparent}
#omHomeView .hw-rail-scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text-primary) 16%,transparent);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
#omHomeView .hw-rail-scroll::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--text-primary) 26%,transparent);background-clip:padding-box}
/* quiet footer tip — anchors the rail bottom so short lists don't leave a dead void */
#omHomeView .hw-rail-tip{flex:0 0 auto;display:flex;align-items:flex-start;gap:7px;margin-top:8px;padding:10px 11px;border-radius:11px;background:color-mix(in srgb,var(--app-accent) 6%,transparent);border:.5px solid color-mix(in srgb,var(--app-accent) 16%,transparent);font-size:10.5px;line-height:1.4;font-weight:600;color:var(--text-muted)}
#omHomeView .hw-rail-tip svg{width:13px;height:13px;flex:0 0 auto;margin-top:1px;color:var(--app-accent);opacity:.85}
/* Help/Guide-mode parity: the Hub rail tip is guide content — it obeys the app-wide
   coach toggle like .pg-cap / [id$="GuideSlot"], hidden when Help mode is off. */
body:not(.coach-on) #omHomeView .hw-rail-tip{display:none}
#omHomeView .hw-new{display:flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:11px;padding:10px 12px;font-family:inherit;font-size:12.5px;font-weight:800;color:var(--on-accent,#fff);background:linear-gradient(180deg,var(--app-accent),color-mix(in srgb,var(--app-accent) 82%,#000));box-shadow:0 2px 8px -3px color-mix(in srgb,var(--app-accent) 60%,transparent),inset 0 1px 0 rgba(255,255,255,.25);cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
#omHomeView .hw-new:hover{transform:translateY(-1px)}
#omHomeView .hw-new:active{transform:translateY(0)}
#omHomeView .hw-new svg{width:15px;height:15px}
#omHomeView .hw-tidy{display:flex;gap:4px;margin-top:8px}
#omHomeView .hw-tidy-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;border:0;background:color-mix(in srgb,var(--text-primary) 5%,transparent);border-radius:9px;padding:7px 6px;font-family:inherit;font-size:11px;font-weight:700;color:var(--text-secondary);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
#omHomeView .hw-tidy-btn svg{width:13px;height:13px}
#omHomeView .hw-tidy-btn:hover{background:color-mix(in srgb,var(--text-primary) 9%,transparent);color:var(--text-primary)}
#omHomeView .hw-rail-sep{height:.5px;background:var(--chrome-border);margin:10px 2px}
#omHomeView .hw-rail-objs{display:flex;flex-direction:column;gap:2px}
#omHomeView .hw-rail-obj{display:flex;align-items:center;gap:9px;border:0;background:transparent;border-radius:9px;padding:8px 9px;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--text-secondary);cursor:pointer;text-align:left;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast) var(--ease-spring);position:relative}
#omHomeView .hw-rail-obj:hover{background:color-mix(in srgb,var(--text-primary) 5%,transparent);color:var(--text-primary);transform:translateX(1px)}
#omHomeView .hw-rail-ico{width:16px;height:16px;flex:0 0 auto;color:var(--text-muted)}
#omHomeView .hw-rail-obj:hover .hw-rail-ico{color:var(--app-accent)}
#omHomeView .hw-rail-lbl{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#omHomeView .hw-rail-obj-soon{opacity:.5}
#omHomeView .hw-rail-soon{font-size:8.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);background:color-mix(in srgb,var(--text-primary) 8%,transparent);padding:1px 5px;border-radius:999px}
/* Canvas — a positioning surface for free-floating windows */
#omHomeView .hw-canvas{flex:1 1 auto;min-width:0;position:relative;overflow:hidden;border-radius:var(--radius-lg,16px)}
/* Hub Canvas P1 — the transformed WORLD layer holds all windows; one transform pans+zooms everything. */
#omHomeView .hw-world{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;transform-origin:0 0;transform:translate(var(--hw-pan-x,0),var(--hw-pan-y,0)) scale(var(--hw-zoom,1));will-change:transform}
/* smooth (eased) camera moves for button/minimap navigation — cleared during 1:1 drag-pan */
#omHomeView .hw-world.hw-cam-smooth{transition:transform var(--motion-base,.34s) var(--ease-out,cubic-bezier(.2,.7,.3,1))}
@media (prefers-reduced-motion:reduce){#omHomeView .hw-world.hw-cam-smooth{transition:none}}
/* backdrop variants (grid tracks zoom via --hw-grid + pan via --hw-grid-x/y) — user-toggleable */
/* Grid moved to a ::before layer so an edge-fade MASK can feather it into the border (reads as an INFINITE
   plane, not a bounded rectangle) WITHOUT masking the windows (which are real children of .hw-canvas). */
#omHomeView .hw-canvas.bg-dots::before,#omHomeView .hw-canvas.bg-lines::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background-size:var(--hw-grid,22px) var(--hw-grid,22px);background-position:var(--hw-grid-x,0) var(--hw-grid-y,0);-webkit-mask:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent),linear-gradient(to bottom,transparent,#000 40px,#000 calc(100% - 40px),transparent);-webkit-mask-composite:source-in;mask:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent),linear-gradient(to bottom,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-composite:intersect}
#omHomeView .hw-canvas.bg-dots::before{background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--text-primary) 8%,transparent) 1px,transparent 0)}
#omHomeView .hw-canvas.bg-dots{background:none}
#omHomeView .hw-canvas.bg-lines::before{background-image:linear-gradient(color-mix(in srgb,var(--text-primary) 6%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--text-primary) 6%,transparent) 1px,transparent 1px)}
#omHomeView .hw-canvas.bg-lines{background:none}
#omHomeView .hw-canvas.bg-plain{background:none}
/* Hub Canvas P1 — chip LOD: below ~0.4x zoom, windows collapse to an icon+title chip (scannable board). */
/* Zoomed-out (chip-LOD): keep the content VISIBLE (it's already scaled by the world transform) — just
   soften interaction. Do NOT display:none the body or collapse the window height (that made windows blank
   out on zoom-out then hard-reflow on zoom-in — jarring). A gentle fade only. */
#omHomeView .hw-world.is-zoomed-out .hw-win-body{pointer-events:none}
#omHomeView .hw-world.is-zoomed-out .hw-win{transition:none}
#omHomeView .hw-win-idle{min-height:40px}
/* Hub Canvas P1 — camera control cluster (bottom-left) + minimap (bottom-right), floating over canvas. */
#omHomeView .hw-cam-controls{position:absolute;left:14px;bottom:14px;z-index:50;display:flex;align-items:center;gap:3px;padding:5px;border-radius:999px;background:color-mix(in srgb,var(--card-bg,#fff) 92%,transparent);backdrop-filter:blur(12px);box-shadow:var(--shadow-e2);border:.5px solid color-mix(in srgb,var(--chrome-border) 60%,transparent)}
#omHomeView .hw-cam-controls.hw-dragging-ctl{cursor:grabbing;box-shadow:var(--shadow-e4)}
#omHomeView .hw-cam-grip{display:inline-flex;align-items:center;justify-content:center;width:18px;height:26px;flex:0 0 auto;color:var(--text-muted);cursor:grab;opacity:.55;transition:opacity var(--motion-fast)}
#omHomeView .hw-cam-grip:hover{opacity:1}
#omHomeView .hw-cam-grip svg{width:13px;height:13px;display:block}
#omHomeView .hw-cam-b,#omHomeView .hw-cam-bd{display:inline-flex;align-items:center;justify-content:center;height:28px;min-width:28px;padding:0 6px;border:0;border-radius:999px;background:transparent;color:var(--text-secondary);cursor:pointer;font-size:12px;font-weight:700;transition:background var(--motion-fast,.15s),color var(--motion-fast,.15s),transform var(--motion-fast,.15s)}
#omHomeView .hw-cam-b svg,#omHomeView .hw-cam-bd svg{width:14px;height:14px}
#omHomeView .hw-cam-b:hover,#omHomeView .hw-cam-bd:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent);transform:translateY(-1px)}
#omHomeView .hw-cam-bd.on{background:var(--app-accent);color:var(--on-accent,#fff)}
#omHomeView .hw-cam-z{height:28px;padding:0 10px;border:0;border-radius:999px;background:transparent;color:var(--text-primary);cursor:pointer;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;min-width:46px}
#omHomeView .hw-cam-z:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent)}
#omHomeView .hw-cam-sep{width:1px;height:18px;background:color-mix(in srgb,var(--chrome-border) 70%,transparent);margin:0 2px}
/* Canvas-settings popover (backdrop swatches + snap toggle) — frosted glass chrome */
.hw-cs-pop{min-width:210px}
.hw-cs{display:flex;flex-direction:column;gap:8px;padding:4px}
.hw-cs-bds{display:flex;gap:6px}
.hw-cs-bd{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px 4px 8px;border:.5px solid var(--chrome-border);border-radius:11px;background:var(--card-bg,#fff);cursor:pointer;font-family:inherit;font-size:11px;font-weight:700;color:var(--text-muted);transition:border-color var(--motion-fast),color var(--motion-fast),transform var(--motion-fast)}
.hw-cs-bd:hover{transform:translateY(-1px);color:var(--text-primary)}
.hw-cs-bd.on{border-color:var(--app-accent);color:var(--app-accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--app-accent) 35%,transparent)}
.hw-cs-swatch{width:100%;height:30px;border-radius:8px;background:var(--surface,#f4f5f7);box-shadow:inset 0 0 0 .5px color-mix(in srgb,#000 8%,transparent)}
.hw-cs-bd-dots .hw-cs-swatch{background:radial-gradient(circle at 3px 3px,color-mix(in srgb,var(--text-primary) 30%,transparent) 1.2px,transparent 0) 0 0/8px 8px,var(--surface,#f4f5f7)}
.hw-cs-bd-lines .hw-cs-swatch{background:linear-gradient(color-mix(in srgb,var(--text-primary) 18%,transparent) 1px,transparent 1px) 0 0/9px 9px,linear-gradient(90deg,color-mix(in srgb,var(--text-primary) 18%,transparent) 1px,transparent 1px) 0 0/9px 9px,var(--surface,#f4f5f7)}
.hw-cs-snap{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:8px 6px;border:none;background:transparent;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;color:var(--text-primary);border-radius:8px}
.hw-cs-snap:hover{background:color-mix(in srgb,var(--text-primary) 4%,transparent)}
.hw-cs-snap-l{display:flex;align-items:center;gap:8px}
.hw-cs-snap-l svg{width:15px;height:15px;color:var(--text-muted)}
.hw-cs-toggle{width:36px;height:21px;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 14%,transparent);position:relative;flex:0 0 auto;transition:background var(--motion-base) var(--ease-out)}
.hw-cs-snap.on .hw-cs-toggle{background:var(--app-accent)}
.hw-cs-knob{position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform var(--motion-base) var(--ease-spring)}
.hw-cs-snap.on .hw-cs-knob{transform:translateX(15px)}
#omHomeView .hw-minimap{position:absolute;right:14px;bottom:14px;z-index:50;width:132px;height:84px;border-radius:12px;background:var(--lg-bg,color-mix(in srgb,var(--card-bg,#fff) 90%,transparent));backdrop-filter:var(--lg-refract,blur(14px) saturate(1.6));-webkit-backdrop-filter:var(--lg-refract,blur(14px) saturate(1.6));box-shadow:var(--lg-edge),var(--shadow-e3);border:.5px solid color-mix(in srgb,var(--chrome-border) 55%,transparent);overflow:hidden;cursor:pointer;opacity:.8;transition:opacity var(--motion-fast),box-shadow var(--motion-fast)}
#omHomeView .hw-minimap.hidden{display:none!important}
#omHomeView .hw-minimap:hover{opacity:1;box-shadow:var(--lg-edge),var(--shadow-e4)}
/* Touch — enlarge the small Hub hit-targets on coarse pointers (visual size unchanged, box grows). */
@media (hover:none),(pointer:coarse){
  #omHomeView .hw-win-btn{min-width:var(--tap-min,44px);min-height:var(--tap-min,44px)}
  #omHomeView .hw-tab-x{min-width:34px;min-height:34px;padding:8px}
  #omHomeView .hw-mt-tr{min-height:var(--tap-min,44px)}
}
/* Accessibility — drop the backdrop blur + go opaque for reduced-transparency on the Hub glass chrome. */
@media (prefers-reduced-transparency:reduce){
  #omHomeView .hw-rail,#omHomeView .hw-win-bar,#omHomeView .hw-minimap,#omHomeView .hw-cam-controls{backdrop-filter:none;-webkit-backdrop-filter:none}
  #omHomeView .hw-win-bar{background:var(--frost-bg-strong,var(--surface))}
  #omHomeView .hw-minimap,#omHomeView .hw-cam-controls,#omHomeView .hw-rail{background:var(--surface,var(--card-bg))}
}
#omHomeView .hw-mm-box{position:absolute;border-radius:2px}
#omHomeView .hw-mm-box.win{background:color-mix(in srgb,var(--text-primary) 22%,transparent)}
#omHomeView .hw-mm-box.view{border:1.5px solid var(--app-accent);background:color-mix(in srgb,var(--app-accent) 10%,transparent)}
/* Hub Canvas P1 — pan cursors: grab on empty canvas + while space-held; grabbing during a pan. */
#omHomeView .hw-canvas{cursor:grab}
#omHomeView .hw-canvas .hw-win{cursor:auto}
body.hw-space #omHomeView .hw-canvas,body.hw-space #omHomeView .hw-canvas .hw-win{cursor:grab}
body.hw-panning,body.hw-panning *{cursor:grabbing !important}
body.hw-dragging{cursor:inherit;user-select:none}
body.hw-dragging iframe{pointer-events:none}
/* Window */
#omHomeView .hw-win{position:absolute;display:flex;flex-direction:column;min-width:240px;min-height:150px;border-radius:15px;background:var(--card-bg,var(--surface));box-shadow:var(--shadow-e3);border:.5px solid color-mix(in srgb,var(--chrome-border) 80%,transparent);overflow:hidden;transition:box-shadow var(--motion-base) var(--ease-out),transform var(--motion-base) var(--ease-out)}
#omHomeView .hw-win.front{box-shadow:var(--shadow-e4),0 0 0 1px color-mix(in srgb,var(--app-accent) 22%,transparent)}
/* per-window accent (personalization): front-ring + title-bar tint use the window's own accent var */
#omHomeView .hw-win.tinted.front{box-shadow:var(--shadow-e4),0 0 0 1px color-mix(in srgb,var(--hw-win-accent) 40%,transparent)}
#omHomeView .hw-win.tinted .hw-win-bar{background:color-mix(in srgb,var(--hw-win-accent) 10%,transparent)}
#omHomeView .hw-win-name{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;padding:4px 9px;margin-right:2px;border-radius:8px;font-size:12px;font-weight:800;color:var(--text-primary);background:color-mix(in srgb,var(--hw-win-accent,var(--app-accent)) 16%,transparent);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#omHomeView .hw-win-name svg{width:12px;height:12px;flex:0 0 auto}
.hw-swatches{display:flex;flex-wrap:wrap;gap:6px;padding:4px 10px 8px}
.hw-swatch{width:20px;height:20px;border-radius:50%;border:1.5px solid transparent;cursor:pointer;padding:0;transition:transform var(--motion-fast) var(--ease-spring)}
.hw-swatch:hover{transform:scale(1.15)}
.hw-swatch.on{border-color:var(--text-primary);box-shadow:0 0 0 2px var(--card-bg),0 0 0 3.5px var(--text-primary)}
#omHomeView .hw-win.min{min-height:0;height:auto!important}
/* Maximized windows STAY rounded (Gavin) — a maximized pane is still a floating panel, just larger; it
   insets slightly from the canvas edges (see the .max geometry) so the rounding + shadow read. */
#omHomeView .hw-win.max{border-radius:15px}
#omHomeView .hw-win.max .hw-win-bar{border-radius:15px 15px 0 0}
/* snap preview overlay (shown while dragging a window to a canvas edge) */
#omHomeView .hw-snap-pv{position:absolute;z-index:99998;border-radius:12px;background:color-mix(in srgb,var(--app-accent) 14%,transparent);border:1.5px solid color-mix(in srgb,var(--app-accent) 55%,transparent);pointer-events:none;transition:left .09s ease,top .09s ease,width .09s ease,height .09s ease}
#omHomeView .hw-win-bar{display:flex;align-items:center;gap:6px;padding:6px 7px 6px 9px;background:var(--frost-bg,color-mix(in srgb,var(--text-primary) 3%,transparent));backdrop-filter:var(--frost-blur,blur(16px) saturate(1.6));-webkit-backdrop-filter:var(--frost-blur,blur(16px) saturate(1.6));border-bottom:.5px solid color-mix(in srgb,var(--chrome-border) 70%,transparent);border-radius:15px 15px 0 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.16);cursor:move;flex:0 0 auto;user-select:none}
#omHomeView .hw-win.min .hw-win-bar{border-bottom:0}
#omHomeView .hw-win-tabs{display:flex;align-items:center;gap:3px;flex:1 1 auto;min-width:0;overflow-x:auto}
#omHomeView .hw-win-ctl{display:flex;align-items:center;gap:2px;flex:0 0 auto}
#omHomeView .hw-win-btn{display:grid;place-items:center;width:24px;height:24px;border:0;background:transparent;border-radius:7px;color:var(--text-muted);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
#omHomeView .hw-win-btn svg{width:13px;height:13px}
#omHomeView .hw-win-btn:hover{background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-primary)}
#omHomeView .hw-win-btn.close:hover{background:color-mix(in srgb,var(--color-error,#c0392b) 15%,transparent);color:var(--color-error,#c0392b)}
#omHomeView .hw-tab{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:8px;font-size:12px;font-weight:700;color:var(--text-muted);cursor:pointer;max-width:180px;white-space:nowrap;transition:background var(--motion-fast),color var(--motion-fast)}
#omHomeView .hw-tab:hover{background:color-mix(in srgb,var(--text-primary) 6%,transparent);color:var(--text-secondary)}
#omHomeView .hw-tab.on{background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent)}
#omHomeView .hw-tab-ico{width:13px;height:13px;flex:0 0 auto}
#omHomeView .hw-tab-t{overflow:hidden;text-overflow:ellipsis}
#omHomeView .hw-tab-x{display:grid;place-items:center;border:0;background:transparent;border-radius:5px;padding:2px;color:var(--text-muted);cursor:pointer;opacity:.5;transition:opacity var(--motion-fast),background var(--motion-fast)}
#omHomeView .hw-tab-x svg{width:11px;height:11px}
#omHomeView .hw-tab:hover .hw-tab-x{opacity:1}
#omHomeView .hw-tab-x:hover{background:color-mix(in srgb,var(--color-error,#c0392b) 15%,transparent);color:var(--color-error,#c0392b)}
#omHomeView .hw-tab{cursor:grab}
#omHomeView .hw-win-bar.tab-drop{background:color-mix(in srgb,var(--app-accent) 18%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--app-accent) 55%,transparent)}
.hw-tab-ghost{position:fixed;z-index:100000;pointer-events:none;padding:5px 11px;border-radius:9px;font-size:12px;font-weight:700;color:#fff;background:var(--app-accent);box-shadow:0 8px 20px -6px rgba(0,0,20,.5);opacity:.92}
#omHomeView .hw-win-body{flex:1 1 auto;min-height:0;overflow:auto;padding:13px}
/* resize handles (8 edges/corners) */
#omHomeView .hw-rz{position:absolute;z-index:5}
#omHomeView .hw-rz.e{top:8px;bottom:8px;right:0;width:7px;cursor:ew-resize}
#omHomeView .hw-rz.w{top:8px;bottom:8px;left:0;width:7px;cursor:ew-resize}
#omHomeView .hw-rz.s{left:8px;right:8px;bottom:0;height:7px;cursor:ns-resize}
#omHomeView .hw-rz.n{left:8px;right:8px;top:0;height:7px;cursor:ns-resize}
#omHomeView .hw-rz.se{right:0;bottom:0;width:14px;height:14px;cursor:nwse-resize}
#omHomeView .hw-rz.nw{left:0;top:0;width:14px;height:14px;cursor:nwse-resize}
#omHomeView .hw-rz.ne{right:0;top:0;width:14px;height:14px;cursor:nesw-resize}
#omHomeView .hw-rz.sw{left:0;bottom:0;width:14px;height:14px;cursor:nesw-resize}
/* ＋New popover menu */
.hw-menu{position:fixed;z-index:9999;min-width:170px;padding:6px;border-radius:12px;background:var(--card-bg,var(--surface));box-shadow:var(--shadow-e2),0 12px 30px -10px rgba(0,0,20,.4);border:.5px solid var(--chrome-border);display:flex;flex-direction:column;gap:1px}
.hw-menu-item{display:flex;align-items:center;gap:9px;border:0;background:transparent;border-radius:8px;padding:8px 10px;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--text-secondary);cursor:pointer;text-align:left;transition:background var(--motion-fast),color var(--motion-fast)}
.hw-menu-item svg{width:15px;height:15px;color:var(--text-muted)}
.hw-menu-item:hover{background:color-mix(in srgb,var(--app-accent) 10%,transparent);color:var(--text-primary)}
.hw-menu-item.grow{flex:1 1 auto;min-width:0}
.hw-menu-item.grow svg{flex:0 0 auto}
.hw-menu-cap{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);padding:5px 10px 3px}
.hw-menu-sep{height:.5px;background:var(--chrome-border);margin:5px 4px}
.hw-menu-empty{font-size:12px;color:var(--text-muted);padding:8px 10px}
.hw-menu-row{display:flex;align-items:center;gap:1px;border-radius:8px}
.hw-menu-row.on{background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
.hw-menu-row .hw-menu-item{flex:1 1 auto}
.hw-menu-mini{display:grid;place-items:center;width:26px;height:26px;flex:0 0 auto;border:0;background:transparent;border-radius:7px;color:var(--text-muted);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
.hw-menu-mini svg{width:12px;height:12px}
.hw-menu-mini:hover{background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-primary)}
.hw-menu-badge{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;font-size:9.5px;font-weight:700;letter-spacing:.02em;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 14%,transparent);vertical-align:middle}
.hw-menu-mini.danger:hover{background:color-mix(in srgb,var(--color-error,#c0392b) 14%,transparent);color:var(--color-error,#c0392b)}
/* workspace switcher button in the rail */
/* D-P2 — board-scope switcher (Global | project board) */
#omHomeView .hw-board-switch{display:flex;align-items:center;gap:7px;width:100%;margin-top:7px;border:.5px solid color-mix(in srgb,var(--app-accent) 22%,transparent);border-radius:10px;padding:8px 10px;font-family:inherit;font-size:12px;font-weight:700;color:var(--text-primary);background:color-mix(in srgb,var(--app-accent) 7%,transparent);cursor:pointer;transition:background var(--motion-fast)}
#omHomeView .hw-board-switch:hover{background:color-mix(in srgb,var(--app-accent) 13%,transparent)}
#omHomeView .hw-bs-ic{width:14px;height:14px;flex:0 0 auto;color:var(--app-accent)}
#omHomeView .hw-bs-name{flex:1 1 auto;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#omHomeView .hw-bs-cv{width:11px;height:11px;flex:0 0 auto;opacity:.6}
#omHomeView .hw-ws{display:flex;align-items:center;gap:7px;width:100%;margin-top:7px;border:0;border-radius:10px;padding:8px 10px;font-family:inherit;font-size:12px;font-weight:700;color:var(--text-secondary);background:color-mix(in srgb,var(--text-primary) 5%,transparent);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
#omHomeView .hw-ws:hover{background:color-mix(in srgb,var(--text-primary) 9%,transparent);color:var(--text-primary)}
#omHomeView .hw-ws>svg:first-child{width:14px;height:14px;flex:0 0 auto;color:var(--text-muted)}
#omHomeView .hw-ws-name{flex:1 1 auto;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#omHomeView .hw-ws-cv{width:12px;height:12px;flex:0 0 auto;color:var(--text-muted)}
.hw-menu-item:hover svg{color:var(--app-accent)}
/* Quick-start */
#omHomeView .hw-qs{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;padding:24px}
#omHomeView .hw-qs-head h2{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:0 0 4px}
#omHomeView .hw-qs-head p{font-size:13px;color:var(--text-secondary);font-weight:600;margin:0}
#omHomeView .hw-qs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px;width:100%;max-width:440px}
#omHomeView .hw-qs-tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 10px;border:0;border-radius:14px;background:var(--card-bg);box-shadow:var(--shadow-e1),inset 0 0 0 .5px var(--chrome-border);font-family:inherit;font-size:12px;font-weight:700;color:var(--text-primary);cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
#omHomeView .hw-qs-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-e2),inset 0 0 0 .5px var(--chrome-border)}
#omHomeView .hw-qs-tile svg{width:22px;height:22px;color:var(--app-accent)}
#omHomeView .hw-qs-more{color:var(--text-secondary)}
#omHomeView .hw-qs-foot{font-size:11.5px;color:var(--text-muted);font-weight:600;max-width:380px}
/* object stubs + errors */
#omHomeView .hw-obj-soon,#omHomeView .hw-obj-err{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;color:var(--text-muted);font-size:13px;font-weight:600}
#omHomeView .hw-obj-soon svg{width:30px;height:30px;opacity:.5}
/* ── Hub Canvas P2 — free-form block states + adapters ── */
#omHomeView .hw-block-load,#omHomeView .hw-block-gone{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;color:var(--text-muted);font-size:12.5px;font-weight:600;padding:16px}
#omHomeView .hw-block-gone svg{width:26px;height:26px;opacity:.55}
/* Sticky */
#omHomeView .hw-sticky{height:100%;display:flex;flex-direction:column;gap:10px;--sticky-fill:#FEF3C7}
#omHomeView .hw-sticky-ta{flex:1 1 auto;resize:none;border:none;border-radius:14px;padding:14px 15px;font-family:inherit;font-size:14px;line-height:1.55;color:#3a2f14;background:var(--sticky-fill);box-shadow:inset 0 0 0 .5px color-mix(in srgb,#000 6%,transparent),0 1px 2px color-mix(in srgb,#000 5%,transparent);outline:none;transition:box-shadow var(--motion-fast)}
#omHomeView .hw-sticky-ta::placeholder{color:color-mix(in srgb,#3a2f14 40%,transparent)}
#omHomeView .hw-sticky-ta:focus{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--app-accent) 40%,transparent),0 1px 3px color-mix(in srgb,#000 8%,transparent)}
/* Full-width tinted swatch bar (matches the note fill); small centered swatches with real orb depth. */
#omHomeView .hw-sticky-bar{display:flex;gap:10px;justify-content:center;align-items:center;padding:9px 12px;border-radius:12px;background:color-mix(in srgb,var(--sticky-fill) 55%,var(--card-bg,#fff));box-shadow:inset 0 0 0 .5px color-mix(in srgb,#000 6%,transparent)}
#omHomeView .hw-sticky-sw{width:15px;height:15px;border-radius:50%;border:none;cursor:pointer;padding:0;position:relative;box-shadow:inset 0 1px 1px rgba(255,255,255,.55),inset 0 -1px 2px rgba(0,0,0,.14),0 1px 2px rgba(16,24,40,.18);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
#omHomeView .hw-sticky-sw:hover{transform:scale(1.22)}
#omHomeView .hw-sticky-sw.on{transform:scale(1.15);box-shadow:inset 0 1px 1px rgba(255,255,255,.55),0 0 0 2px var(--card-bg,#fff),0 0 0 3.5px var(--app-accent),0 1px 2px rgba(16,24,40,.2)}
#omHomeView .hw-sticky-ro{font-size:11px;font-weight:700;color:var(--text-muted);text-align:center;letter-spacing:.02em}
/* shared block-form primitives (Link/Image/Embed/Metric edit modes) */
#omHomeView .hw-fld{display:flex;flex-direction:column;gap:5px;font-size:11.5px;font-weight:700;color:var(--text-muted)}
#omHomeView .hw-fld em{font-weight:600;font-style:normal;opacity:.7}
#omHomeView .hw-in{border:.5px solid var(--chrome-border);border-radius:10px;padding:9px 11px;font-family:inherit;font-size:13.5px;color:var(--text-primary);background:var(--surface-1,#fff);outline:none;transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
#omHomeView .hw-in:focus{border-color:color-mix(in srgb,var(--app-accent) 55%,var(--chrome-border));box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 12%,transparent)}
/* Hub buttons ADOPT the app's real button family — .hw-btn = .btn-ghost (secondary pill), .hw-btn.primary
   = .btn-primary (hero accent pill). Match tokens/height/press so the Hub feels like the rest of Atira. */
#omHomeView .hw-btn,.hw-menu .hw-btn{height:30px;display:inline-flex;align-items:center;justify-content:center;gap:5px;background:color-mix(in srgb,var(--text-primary) 8%,transparent);border:.5px solid color-mix(in srgb,var(--text-primary) 20%,transparent);border-radius:var(--radius-md,10px);padding:0 13px;font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:-.1px;color:var(--text-primary);cursor:pointer;white-space:nowrap;box-shadow:inset 0 .5px 0 color-mix(in srgb,#fff 24%,transparent);transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
#omHomeView .hw-btn:hover,.hw-menu .hw-btn:hover{background:color-mix(in srgb,var(--text-primary) 13%,transparent)}
#omHomeView .hw-btn:active,.hw-menu .hw-btn:active{transform:scale(.97)}
#omHomeView .hw-btn.primary,.hw-menu .hw-btn.primary{background:radial-gradient(60% 90% at 38% -30%, rgba(255,255,255,.34), transparent 72%),linear-gradient(to bottom, color-mix(in srgb,#fff 16%,var(--app-accent)), var(--app-accent) 64%, color-mix(in srgb,#000 8%,var(--app-accent)));border-color:transparent;color:var(--on-accent,#fff);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 1px 2px color-mix(in srgb,var(--app-accent) 30%,transparent),0 0 0 .5px color-mix(in srgb,#000 8%,transparent),var(--glow-accent-soft)}
#omHomeView .hw-btn.primary:hover,.hw-menu .hw-btn.primary:hover{filter:brightness(1.05);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 6px 18px color-mix(in srgb,var(--app-accent) 42%,transparent),0 0 0 .5px color-mix(in srgb,#000 8%,transparent),var(--glow-accent-soft)}
#omHomeView .hw-btn.primary:active,.hw-menu .hw-btn.primary:active{transform:translateY(0) scale(.96);filter:brightness(1)}
/* Link */
#omHomeView .hw-linkedit{display:flex;flex-direction:column;gap:12px;padding:2px}
#omHomeView .hw-linkedit-err{font-size:12px;font-weight:600;color:var(--danger,#d33)}
#omHomeView .hw-linkedit-btns{display:flex;gap:8px;margin-top:2px}
#omHomeView .hw-link{height:100%;display:flex;align-items:flex-start;gap:8px}
#omHomeView .hw-link-tile{flex:1 1 auto;display:flex;align-items:center;gap:12px;min-width:0;padding:14px 15px;border:.5px solid var(--chrome-border);border-radius:14px;background:var(--surface-1,#fff);cursor:pointer;text-align:left;transition:background var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast)}
#omHomeView .hw-link-tile:hover{background:color-mix(in srgb,var(--app-accent) 5%,transparent);border-color:color-mix(in srgb,var(--app-accent) 35%,var(--chrome-border));box-shadow:0 2px 10px color-mix(in srgb,var(--app-accent) 10%,transparent)}
#omHomeView .hw-link-fav{flex:0 0 auto;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--text-primary) 5%,transparent);font-weight:800;color:var(--text-muted);font-size:16px;overflow:hidden}
#omHomeView .hw-link-fav img{width:24px;height:24px;object-fit:contain}
#omHomeView .hw-link-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
#omHomeView .hw-link-title{font-size:14px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#omHomeView .hw-link-host{font-size:11.5px;font-weight:600;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#omHomeView .hw-link-go{width:16px;height:16px;flex:0 0 auto;margin-left:auto;color:var(--text-muted);opacity:.6}
#omHomeView .hw-link-edit{flex:0 0 auto;width:34px;height:34px;border:.5px solid var(--chrome-border);border-radius:10px;background:var(--surface-1,#fff);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:background var(--motion-fast),color var(--motion-fast)}
#omHomeView .hw-link-edit:hover{background:color-mix(in srgb,var(--text-primary) 5%,transparent);color:var(--text-primary)}
#omHomeView .hw-link-edit svg{width:15px;height:15px}
/* rich link preview (Milanote unfurl thumbnail) */
#omHomeView .hw-link.has-thumb{align-items:stretch}
#omHomeView .hw-link-tile.rich{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden}
#omHomeView .hw-link-thumb{display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:color-mix(in srgb,var(--text-primary) 5%,transparent)}
#omHomeView .hw-link-thumb img{width:100%;height:100%;object-fit:cover;display:block}
#omHomeView .hw-link-body{display:flex;flex-direction:column;gap:4px;padding:12px 14px;min-width:0}
#omHomeView .hw-link-tile.rich .hw-link-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}
#omHomeView .hw-link-favmini{width:14px;height:14px;object-fit:contain;margin-right:5px;vertical-align:-2px}
#omHomeView .hw-link-site{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em}
/* Notes */
#omHomeView .hw-notes{height:100%;display:grid;grid-template-columns:minmax(140px,38%) 1fr;gap:12px}
#omHomeView .hw-notes-list{display:flex;flex-direction:column;gap:8px;min-height:0}
#omHomeView .hw-notes-new{display:flex;align-items:center;gap:6px;justify-content:center;padding:8px;border:.5px dashed var(--chrome-border);border-radius:10px;background:transparent;color:var(--text-muted);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast)}
#omHomeView .hw-notes-new:hover{background:color-mix(in srgb,var(--app-accent) 6%,transparent);color:var(--app-accent);border-color:color-mix(in srgb,var(--app-accent) 40%,var(--chrome-border))}
#omHomeView .hw-notes-new svg{width:13px;height:13px}
#omHomeView .hw-notes-rows{flex:1 1 auto;overflow-y:auto;display:flex;flex-direction:column;gap:4px;min-height:0}
#omHomeView .hw-note-row{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;padding:9px 11px;border:.5px solid transparent;border-radius:10px;background:transparent;cursor:pointer;transition:background var(--motion-fast),border-color var(--motion-fast)}
#omHomeView .hw-note-row:hover{background:color-mix(in srgb,var(--text-primary) 4%,transparent)}
#omHomeView .hw-note-row.on{background:color-mix(in srgb,var(--app-accent) 9%,transparent);border-color:color-mix(in srgb,var(--app-accent) 30%,transparent)}
#omHomeView .hw-note-row-t{font-size:13px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#omHomeView .hw-note-row-s{font-size:11px;font-weight:500;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#omHomeView .hw-notes-empty,#omHomeView .hw-notes-none{color:var(--text-muted);font-size:12px;font-weight:600;text-align:center;padding:20px 8px;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:center}
#omHomeView .hw-notes-none svg{width:26px;height:26px;opacity:.5}
#omHomeView .hw-notes-editor{display:flex;flex-direction:column;gap:8px;min-height:0}
#omHomeView .hw-note-title{border:none;border-bottom:.5px solid var(--chrome-border);border-radius:0;padding:6px 2px;font-family:inherit;font-size:15px;font-weight:700;color:var(--text-primary);background:transparent;outline:none}
#omHomeView .hw-note-title:focus{border-bottom-color:var(--app-accent)}
#omHomeView .hw-note-body{flex:1 1 auto;resize:none;border:.5px solid var(--chrome-border);border-radius:12px;padding:11px 12px;font-family:inherit;font-size:13.5px;line-height:1.55;color:var(--text-primary);background:color-mix(in srgb,var(--text-primary) 2%,transparent);outline:none;min-height:60px}
#omHomeView .hw-note-body:focus{border-color:color-mix(in srgb,var(--app-accent) 45%,var(--chrome-border))}
#omHomeView .hw-note-foot{display:flex;justify-content:flex-end}
#omHomeView .hw-note-del{display:flex;align-items:center;gap:5px;padding:6px 11px;border:.5px solid transparent;border-radius:9px;background:transparent;color:var(--text-muted);font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
#omHomeView .hw-note-del:hover{background:color-mix(in srgb,var(--danger,#d33) 10%,transparent);color:var(--danger,#d33)}
#omHomeView .hw-note-del svg{width:13px;height:13px}
/* A2 — note-card visuals (color dot + pin + tags) mirroring the real Quick Notes idiom */
#omHomeView .hw-note-row-head{display:flex;align-items:center;gap:6px;width:100%}
#omHomeView .hw-note-dot{width:9px;height:9px;flex:0 0 auto;border-radius:50%;background:var(--dot,var(--text-muted))}
#omHomeView .hw-note-dot-empty{background:transparent;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--text-primary) 20%,transparent)}
#omHomeView .hw-note-pin{width:11px;height:11px;flex:0 0 auto;margin-left:auto;fill:var(--app-accent);opacity:.9}
#omHomeView .hw-note-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px}
#omHomeView .hw-note-tag{font-size:9.5px;font-weight:700;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 10%,transparent);padding:1px 6px;border-radius:var(--radius-pill,999px);letter-spacing:.02em}
/* A2 — editor metadata bar (pin toggle, color swatches, full-editor handoff) */
#omHomeView .hw-note-bar{display:flex;align-items:center;gap:8px;padding-bottom:2px}
#omHomeView .hw-note-bar-sp{flex:1 1 auto}
#omHomeView .hw-note-mbtn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex:0 0 auto;border:.5px solid transparent;border-radius:8px;background:transparent;color:var(--text-muted);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
#omHomeView .hw-note-mbtn svg{width:14px;height:14px}
#omHomeView .hw-note-mbtn:hover{background:color-mix(in srgb,var(--text-primary) 6%,transparent);color:var(--text-primary)}
#omHomeView .hw-note-pinbtn.on{color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
#omHomeView .hw-note-sws{display:flex;align-items:center;gap:5px}
#omHomeView .hw-note-sw{width:16px;height:16px;flex:0 0 auto;border-radius:50%;border:1.5px solid transparent;background:var(--sw);cursor:pointer;padding:0;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
#omHomeView .hw-note-sw:hover{transform:scale(1.15)}
#omHomeView .hw-note-sw.on{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--sw)}
#omHomeView .hw-note-full{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border:.5px solid color-mix(in srgb,var(--app-accent) 30%,transparent);border-radius:9px;background:color-mix(in srgb,var(--app-accent) 7%,transparent);color:var(--app-accent);font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;transition:background var(--motion-fast)}
#omHomeView .hw-note-full:hover{background:color-mix(in srgb,var(--app-accent) 14%,transparent)}
#omHomeView .hw-note-full svg{width:13px;height:13px}
/* Image */
#omHomeView .hw-image{height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:12px;overflow:hidden;background:color-mix(in srgb,var(--text-primary) 3%,transparent)}
#omHomeView .hw-image-img{max-width:100%;max-height:100%;object-fit:contain;display:block}
#omHomeView .hw-image-replace{position:absolute;top:8px;right:8px;width:32px;height:32px;border:none;border-radius:9px;background:color-mix(in srgb,#000 45%,transparent);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--motion-fast)}
#omHomeView .hw-image:hover .hw-image-replace{opacity:1}
#omHomeView .hw-image-replace svg{width:15px;height:15px}
#omHomeView .hw-image-err{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text-muted);font-size:12px;font-weight:600}
#omHomeView .hw-image-err[hidden]{display:none}
#omHomeView .hw-image-err svg{width:24px;height:24px;opacity:.5}
#omHomeView .hw-image-drop{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border:1px dashed var(--chrome-border);border-radius:14px;color:var(--text-muted);text-align:center;padding:20px;transition:border-color var(--motion-fast),background var(--motion-fast);outline:none}
#omHomeView .hw-image-drop.over{border-color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 7%,transparent)}
#omHomeView .hw-image-drop>svg{width:34px;height:34px;opacity:.45}
#omHomeView .hw-image-drop-t{font-size:12.5px;font-weight:600;max-width:220px}
#omHomeView .hw-image-up{font-size:12px;font-weight:700;color:var(--app-accent)}
/* Table */
#omHomeView .hw-tbl-wrap{height:100%;display:flex;flex-direction:column;gap:10px;overflow:auto}
#omHomeView .hw-tbl{border-collapse:separate;border-spacing:0;width:100%;font-size:13px;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-e1)}
#omHomeView .hw-tbl th,#omHomeView .hw-tbl td{border-bottom:.5px solid var(--chrome-border);border-right:.5px solid var(--chrome-border);padding:0}
#omHomeView .hw-tbl th:last-child,#omHomeView .hw-tbl td:last-child{border-right:none}
#omHomeView .hw-tbl tr:last-child td{border-bottom:none}
#omHomeView .hw-tbl thead th{background:color-mix(in srgb,var(--app-accent) 8%,var(--card-bg,#fff));font-weight:700;color:var(--text-primary);text-align:left}
#omHomeView .hw-tbl td{background:var(--card-bg,#fff)}
#omHomeView .hw-tbl-cell{padding:8px 11px;min-height:18px;outline:none;color:var(--text-primary);transition:box-shadow var(--motion-fast)}
#omHomeView .hw-tbl-cell[contenteditable]:focus{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--app-accent) 45%,transparent);border-radius:6px}
#omHomeView .hw-tbl-rowx{width:30px;text-align:center;background:var(--card-bg,#fff)!important}
#omHomeView .hw-tbl-delrow{width:22px;height:22px;border:none;border-radius:7px;background:transparent;color:var(--text-muted);cursor:pointer;opacity:0;transition:opacity var(--motion-fast),background var(--motion-fast),color var(--motion-fast)}
#omHomeView .hw-tbl tr:hover .hw-tbl-delrow{opacity:.7}
#omHomeView .hw-tbl-delrow:hover{opacity:1;background:color-mix(in srgb,var(--color-error,#d33) 12%,transparent);color:var(--color-error,#d33)}
#omHomeView .hw-tbl-delrow svg{width:12px;height:12px}
#omHomeView .hw-tbl-bar{display:flex;gap:8px;flex-wrap:wrap}
#omHomeView .hw-tbl-bar .hw-btn{display:flex;align-items:center;gap:5px}
#omHomeView .hw-tbl-bar .hw-btn svg{width:12px;height:12px}
/* Checklist */
#omHomeView .hw-ck{height:100%;display:flex;flex-direction:column;gap:10px}
#omHomeView .hw-ck-head{display:flex;align-items:center;justify-content:space-between}
#omHomeView .hw-ck-count{font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--text-muted)}
#omHomeView .hw-ck-rows{flex:0 1 auto;overflow-y:auto;display:flex;flex-direction:column;gap:3px;min-height:0}
#omHomeView .hw-ck-row{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:10px;transition:background var(--motion-fast)}
#omHomeView .hw-ck-row:hover{background:color-mix(in srgb,var(--text-primary) 4%,transparent)}
#omHomeView .hw-ck-box{flex:0 0 auto;width:20px;height:20px;border:1.5px solid var(--chrome-border);border-radius:7px;background:var(--card-bg,#fff);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--on-accent,#fff);transition:background var(--motion-fast),border-color var(--motion-fast),transform var(--motion-fast)}
#omHomeView .hw-ck-box:active{transform:scale(.9)}
#omHomeView .hw-ck-row.done .hw-ck-box{background:var(--app-accent);border-color:var(--app-accent)}
#omHomeView .hw-ck-box svg{width:12px;height:12px}
#omHomeView .hw-ck-text{flex:1 1 auto;outline:none;font-size:13.5px;color:var(--text-primary);padding:2px 3px;border-radius:6px;transition:box-shadow var(--motion-fast)}
#omHomeView .hw-ck-text:focus{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--app-accent) 40%,transparent)}
#omHomeView .hw-ck-row.done .hw-ck-text{text-decoration:line-through;color:var(--text-muted)}
#omHomeView .hw-ck-del{flex:0 0 auto;width:24px;height:24px;border:none;border-radius:7px;background:transparent;color:var(--text-muted);cursor:pointer;opacity:0;display:flex;align-items:center;justify-content:center;transition:opacity var(--motion-fast),background var(--motion-fast),color var(--motion-fast)}
#omHomeView .hw-ck-row:hover .hw-ck-del{opacity:.7}
#omHomeView .hw-ck-del:hover{opacity:1;background:color-mix(in srgb,var(--color-error,#d33) 12%,transparent);color:var(--color-error,#d33)}
#omHomeView .hw-ck-del svg{width:12px;height:12px}
#omHomeView .hw-ck-empty{color:var(--text-muted);font-size:12px;font-weight:600;text-align:center;padding:20px}
#omHomeView .hw-ck-add{display:flex;align-items:center;gap:6px;justify-content:center;padding:8px;border:.5px dashed var(--chrome-border);border-radius:10px;background:transparent;color:var(--text-muted);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast)}
#omHomeView .hw-ck-add:hover{background:color-mix(in srgb,var(--app-accent) 6%,transparent);color:var(--app-accent);border-color:color-mix(in srgb,var(--app-accent) 40%,var(--chrome-border))}
/* A1 — checklist-as-real-todos: per-item inline controls + the add row + open-full link.
   Rows themselves reuse the real .td-item/.td-check/.td-text/.td-meta classes (already mirrored). */
#omHomeView .hw-ck-openfull{border:0;background:transparent;color:var(--app-accent);font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;padding:2px 4px;border-radius:6px;transition:background var(--motion-fast)}
#omHomeView .hw-ck-openfull:hover{background:color-mix(in srgb,var(--app-accent) 10%,transparent)}
#omHomeView .hw-ck-item{position:relative}
#omHomeView .hw-ck-acts{display:flex;align-items:center;gap:3px;flex:0 0 auto;opacity:0;transition:opacity var(--motion-fast)}
#omHomeView .hw-ck-item:hover .hw-ck-acts,#omHomeView .hw-ck-item:focus-within .hw-ck-acts{opacity:1}
#omHomeView .hw-ck-date{width:30px;height:24px;border:.5px solid transparent;border-radius:7px;background:transparent;color:var(--text-muted);font-family:inherit;font-size:0;cursor:pointer;padding:0;overflow:hidden}
#omHomeView .hw-ck-date::-webkit-calendar-picker-indicator{opacity:.6;cursor:pointer}
#omHomeView .hw-ck-date:hover{background:color-mix(in srgb,var(--text-primary) 6%,transparent)}
#omHomeView .hw-ck-pri,#omHomeView .hw-ck-flag{width:24px;height:24px;flex:0 0 auto;border:.5px solid transparent;border-radius:7px;background:transparent;color:var(--text-muted);font-size:12px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--motion-fast),color var(--motion-fast)}
#omHomeView .hw-ck-pri:hover,#omHomeView .hw-ck-flag:hover{background:color-mix(in srgb,var(--text-primary) 6%,transparent);color:var(--text-primary)}
#omHomeView .hw-ck-pri.pri-high{color:var(--color-error,#d33)}
#omHomeView .hw-ck-pri.pri-med{color:var(--color-warning,#e59)}
#omHomeView .hw-ck-pri.pri-low{color:var(--text-muted)}
#omHomeView .hw-ck-flag.on{color:var(--app-accent)}
#omHomeView .hw-ck-add.td-quick{display:flex;gap:6px;align-items:center}
#omHomeView .hw-ck-addinput{flex:1 1 auto;border:.5px solid var(--chrome-border);border-radius:9px;padding:8px 11px;font-family:inherit;font-size:13px;color:var(--text-primary);background:color-mix(in srgb,var(--text-primary) 2%,transparent);outline:none}
#omHomeView .hw-ck-addinput:focus{border-color:color-mix(in srgb,var(--app-accent) 45%,var(--chrome-border))}
#omHomeView .hw-ck-addbtn{flex:0 0 auto;width:32px;height:32px;border:0;border-radius:9px;background:var(--app-accent);color:var(--on-accent,#fff);cursor:pointer;display:flex;align-items:center;justify-content:center}
#omHomeView .hw-ck-addbtn svg{width:14px;height:14px}
/* Hub Canvas P3 — project-scoped work-tool objects (shared scoped-host chrome + rows) */
#omHomeView .hw-scoped-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
#omHomeView .hw-proj-pick{display:inline-flex;align-items:center;gap:5px;max-width:60%;border:.5px solid var(--chrome-border);border-radius:9px;background:color-mix(in srgb,var(--text-primary) 3%,transparent);color:var(--text-primary);font-family:inherit;font-size:12px;font-weight:700;padding:5px 9px;cursor:pointer;transition:background var(--motion-fast),border-color var(--motion-fast)}
#omHomeView .hw-proj-pick:hover{background:color-mix(in srgb,var(--app-accent) 8%,transparent);border-color:color-mix(in srgb,var(--app-accent) 35%,var(--chrome-border))}
#omHomeView .hw-proj-pick-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#omHomeView .hw-proj-pick svg{width:11px;height:11px;flex:0 0 auto;opacity:.7}
#omHomeView .hw-scoped-body{flex:1 1 auto;overflow-y:auto;min-height:0;margin-top:8px}
#omHomeView .hw-scoped-roll{display:flex;gap:14px;padding:6px 4px 10px;font-size:11.5px;font-weight:600;color:var(--text-muted)}
#omHomeView .hw-scoped-roll b{color:var(--text-primary);font-weight:800}
#omHomeView .hw-scoped-roll b.warn{color:var(--color-warning,#e59400)}
#omHomeView .hw-scoped-list{display:flex;flex-direction:column;gap:4px}
#omHomeView .hw-scoped-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;border-radius:10px;border:.5px solid transparent;background:transparent;cursor:pointer;text-align:left;transition:background var(--motion-fast),border-color var(--motion-fast)}
#omHomeView .hw-scoped-row:hover{background:color-mix(in srgb,var(--text-primary) 4%,transparent);border-color:color-mix(in srgb,var(--chrome-border) 60%,transparent)}
#omHomeView .hw-sr-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
#omHomeView .hw-sr-num{font-size:11px;font-weight:800;letter-spacing:.02em;color:var(--app-accent)}
#omHomeView .hw-sr-title{font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#omHomeView .hw-sr-sub{font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#omHomeView .hw-sr-meta{display:flex;align-items:center;gap:6px;flex:0 0 auto}
#omHomeView .hw-sr-amt{font-size:12.5px;font-weight:800;color:var(--text-primary)}
#omHomeView .hw-sr-chip{font-size:9.5px;font-weight:700;color:var(--text-muted);background:color-mix(in srgb,var(--text-primary) 7%,transparent);padding:2px 7px;border-radius:var(--radius-pill,999px);white-space:nowrap;text-transform:capitalize}
#omHomeView .hw-sr-chip.tone-err{color:var(--color-error,#d33);background:color-mix(in srgb,var(--color-error,#d33) 12%,transparent)}
#omHomeView .hw-sr-chip.tone-warn{color:var(--color-warning,#e59400);background:color-mix(in srgb,var(--color-warning,#e59400) 14%,transparent)}
#omHomeView .hw-sr-chip.tone-ok{color:var(--color-success,#2a2);background:color-mix(in srgb,var(--color-success,#2a2) 12%,transparent)}
/* E4a — Workflows Hub object: rule-trigger icon chip + the deep-link-to-Automation button */
#omHomeView .hw-wf-ico{flex:0 0 auto;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:#fff;box-shadow:var(--shadow-e1)}
#omHomeView .hw-wf-ico svg{width:14px;height:14px}
#omHomeView .hw-wf-open{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:11px;font-weight:700;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 12%,transparent);border:0;border-radius:var(--radius-pill,999px);padding:4px 11px;cursor:pointer;transition:background var(--motion-fast)}
#omHomeView .hw-wf-open:hover{background:color-mix(in srgb,var(--app-accent) 20%,transparent)}
#omHomeView .hw-wf-open svg{width:12px;height:12px}
/* E4b — Macros Hub object: list rows, run/edit/delete actions, and the step-chain editor */
#omHomeView .hw-mac-row{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;transition:background var(--motion-fast)}
#omHomeView .hw-mac-row:hover{background:color-mix(in srgb,var(--text-primary) 5%,transparent)}
#omHomeView .hw-mac-ico{flex:0 0 auto;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:#fff;background:linear-gradient(160deg,var(--app-accent),color-mix(in srgb,var(--app-accent) 60%,#000));box-shadow:var(--shadow-e1)}
#omHomeView .hw-mac-ico svg{width:14px;height:14px}
#omHomeView .hw-mac-main{flex:1;min-width:0}
#omHomeView .hw-mac-nm{font-size:13px;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:6px}
#omHomeView .hw-mac-sum{font-size:11.5px;color:var(--text-secondary);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#omHomeView .hw-mac-acts{display:flex;align-items:center;gap:5px;flex:0 0 auto}
#omHomeView .hw-mac-run{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:11.5px;font-weight:700;color:#fff;background:var(--app-accent);border:0;border-radius:var(--radius-pill,999px);padding:5px 12px;cursor:pointer;transition:filter var(--motion-fast),opacity var(--motion-fast)}
#omHomeView .hw-mac-run:hover{filter:brightness(1.06)}
#omHomeView .hw-mac-run.running{opacity:.6;pointer-events:none}
#omHomeView .hw-mac-run svg{width:12px;height:12px}
#omHomeView .hw-mac-editor{padding:4px 2px;display:flex;flex-direction:column;gap:9px}
#omHomeView .hw-mac-ed-head{font-size:12.5px;font-weight:700;color:var(--text-primary)}
#omHomeView .hw-mac-name,#omHomeView .hw-mac-proj,#omHomeView .hw-mac-act,#omHomeView .hw-mac-arg{font:inherit;font-size:12.5px;color:var(--text-primary);background:var(--card-bg,#fff);border:.5px solid color-mix(in srgb,var(--text-primary) 14%,transparent);border-radius:8px;padding:7px 10px;width:100%}
#omHomeView .hw-mac-name:focus,#omHomeView .hw-mac-arg:focus,#omHomeView .hw-mac-proj:focus,#omHomeView .hw-mac-act:focus{outline:none;border-color:var(--app-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 18%,transparent)}
#omHomeView .hw-mac-steps{display:flex;flex-direction:column;gap:7px}
#omHomeView .hw-mac-step{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:7px;border-radius:9px;background:color-mix(in srgb,var(--text-primary) 4%,transparent)}
#omHomeView .hw-mac-step-n{flex:0 0 auto;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700;color:#fff;background:var(--app-accent)}
#omHomeView .hw-mac-step .hw-mac-act{flex:1 1 130px;width:auto;min-width:120px}
#omHomeView .hw-mac-step .hw-mac-arg{flex:2 1 140px;width:auto}
#omHomeView .hw-mac-stepdel{flex:0 0 auto;border:0;background:transparent;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:6px;display:grid;place-items:center}
#omHomeView .hw-mac-stepdel:hover{color:var(--color-error,#d33);background:color-mix(in srgb,var(--color-error,#d33) 10%,transparent)}
#omHomeView .hw-mac-stepdel svg{width:13px;height:13px}
#omHomeView .hw-mac-addstep{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:11.5px;font-weight:600;color:var(--app-accent);background:transparent;border:.5px dashed color-mix(in srgb,var(--app-accent) 40%,transparent);border-radius:8px;padding:6px 11px;cursor:pointer}
#omHomeView .hw-mac-addstep:hover{background:color-mix(in srgb,var(--app-accent) 8%,transparent)}
#omHomeView .hw-mac-addstep svg{width:12px;height:12px}
#omHomeView .hw-mac-ed-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:2px}
#omHomeView .hw-mac-cancel{font:inherit;font-size:12px;font-weight:600;color:var(--text-secondary);background:transparent;border:.5px solid color-mix(in srgb,var(--text-primary) 14%,transparent);border-radius:8px;padding:6px 14px;cursor:pointer}
#omHomeView .hw-mac-cancel:hover{background:color-mix(in srgb,var(--text-primary) 6%,transparent)}
#omHomeView .hw-sr-status{font-size:10px;font-weight:800;text-transform:capitalize;color:var(--text-muted);padding:2px 8px;border-radius:var(--radius-pill,999px);background:color-mix(in srgb,var(--text-primary) 7%,transparent)}
#omHomeView .hw-sr-status.tone-err{color:var(--color-error,#d33);background:color-mix(in srgb,var(--color-error,#d33) 12%,transparent)}
#omHomeView .hw-sr-status.tone-warn{color:var(--color-warning,#e59400);background:color-mix(in srgb,var(--color-warning,#e59400) 14%,transparent)}
#omHomeView .hw-sr-status.tone-ok{color:var(--color-success,#2a2);background:color-mix(in srgb,var(--color-success,#2a2) 12%,transparent)}
/* Budget summary tile */
#omHomeView .hw-budget{display:flex;flex-direction:column;gap:14px}
#omHomeView .hw-budget-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#omHomeView .hw-budget-tile{display:flex;flex-direction:column;gap:3px;padding:11px 12px;border-radius:12px;background:color-mix(in srgb,var(--text-primary) 4%,transparent)}
#omHomeView .hw-bt-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
#omHomeView .hw-bt-val{font-size:17px;font-weight:800;color:var(--text-primary)}
#omHomeView .hw-bt-over{background:color-mix(in srgb,var(--color-error,#d33) 12%,transparent)}
#omHomeView .hw-bt-over .hw-bt-val{color:var(--color-error,#d33)}
#omHomeView .hw-bt-under{background:color-mix(in srgb,var(--color-success,#2a2) 12%,transparent)}
#omHomeView .hw-bt-under .hw-bt-val{color:var(--color-success,#2a2)}
#omHomeView .hw-budget-chart{padding:4px 2px}
/* Photo grid */
#omHomeView .hw-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
#omHomeView .hw-photo-thumb{display:flex;flex-direction:column;gap:4px;border:0;background:transparent;padding:0;cursor:pointer;text-align:left}
#omHomeView .hw-photo-img{width:100%;aspect-ratio:1;border-radius:10px;background-size:cover;background-position:center;background-color:color-mix(in srgb,var(--text-primary) 8%,transparent);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
#omHomeView .hw-photo-thumb:hover .hw-photo-img{transform:scale(1.03);box-shadow:var(--shadow-e2)}
#omHomeView .hw-photo-cap{font-size:10.5px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* project-picker popover (mounts at body) */
.hw-proj-pick-menu{position:fixed;z-index:99999;width:280px;max-height:360px;display:flex;flex-direction:column;background:var(--surface,#fff);border:.5px solid var(--chrome-border);border-radius:14px;box-shadow:var(--shadow-e4,0 12px 40px -8px rgba(0,0,0,.3));overflow:hidden;padding:8px}
.hw-ppm-search{border:.5px solid var(--chrome-border);border-radius:9px;padding:8px 11px;font-family:inherit;font-size:13px;color:var(--text-primary);background:color-mix(in srgb,var(--text-primary) 3%,transparent);outline:none;margin-bottom:6px}
.hw-ppm-search:focus{border-color:color-mix(in srgb,var(--app-accent) 45%,var(--chrome-border))}
.hw-ppm-list{flex:1 1 auto;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.hw-ppm-row{display:flex;flex-direction:column;gap:1px;align-items:flex-start;text-align:left;padding:8px 10px;border:0;border-radius:9px;background:transparent;cursor:pointer;transition:background var(--motion-fast)}
.hw-ppm-row:hover{background:color-mix(in srgb,var(--text-primary) 5%,transparent)}
.hw-ppm-row.on{background:color-mix(in srgb,var(--app-accent) 10%,transparent)}
.hw-ppm-name{font-size:13px;font-weight:700;color:var(--text-primary)}
.hw-ppm-sub{font-size:11px;color:var(--text-muted)}
.hw-ppm-empty{padding:14px;text-align:center;color:var(--text-muted);font-size:12px}
/* E3 — global feed objects (search, sub-headers, ball-in-court groups) */
#omHomeView .hw-gl-search{width:100%;box-sizing:border-box;border:.5px solid var(--chrome-border);border-radius:9px;padding:8px 11px;font-family:inherit;font-size:13px;color:var(--text-primary);background:color-mix(in srgb,var(--text-primary) 2%,transparent);outline:none;margin-bottom:8px}
#omHomeView .hw-gl-search:focus{border-color:color-mix(in srgb,var(--app-accent) 45%,var(--chrome-border))}
#omHomeView .hw-gl-subhd{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);margin:10px 2px 5px}
#omHomeView .hw-bic-groups{display:flex;flex-direction:column;gap:12px}
#omHomeView .hw-bic-party{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:800;color:var(--text-primary);padding:2px 2px 6px}
#omHomeView .hw-bic-party svg{width:12px;height:12px;color:var(--app-accent);flex:0 0 auto}
#omHomeView .hw-bic-ct{margin-left:auto;font-size:10px;font-weight:700;color:var(--text-muted);background:color-mix(in srgb,var(--text-primary) 8%,transparent);padding:1px 8px;border-radius:var(--radius-pill,999px)}
#omHomeView .hw-bic-item{margin-left:2px}
#omHomeView .hw-ck-add svg{width:13px;height:13px}
/* Metric */
#omHomeView .hw-mt{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;border-radius:14px;padding:16px;background:radial-gradient(120% 120% at 50% 0%,color-mix(in srgb,var(--app-accent) 6%,transparent),transparent 70%)}
#omHomeView .hw-mt-main{display:flex;align-items:baseline;gap:6px;justify-content:center}
#omHomeView .hw-mt-value{font-size:clamp(32px,7vw,52px);font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text-primary);outline:none;border-radius:8px;transition:box-shadow var(--motion-fast)}
#omHomeView .hw-mt-value:focus,#omHomeView .hw-mt-label:focus,#omHomeView .hw-mt-unit:focus{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--app-accent) 40%,transparent)}
#omHomeView .hw-mt-unit{font-size:clamp(15px,3vw,22px);font-weight:700;color:var(--text-muted);outline:none;border-radius:6px;min-width:6px}
#omHomeView .hw-mt-label{font-size:13px;font-weight:600;color:var(--text-muted);outline:none;border-radius:6px;padding:2px 6px}
#omHomeView .hw-mt-up .hw-mt-value{color:var(--color-success,#1a9d5a)}
#omHomeView .hw-mt-down .hw-mt-value{color:var(--color-error,#d3402f)}
#omHomeView .hw-mt-trends{display:flex;gap:6px;margin-top:4px}
#omHomeView .hw-mt-tr{width:30px;height:26px;border:.5px solid var(--chrome-border);border-radius:8px;background:var(--card-bg,#fff);color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast)}
#omHomeView .hw-mt-tr:active{transform:scale(.92)}
#omHomeView .hw-mt-tr.on{background:var(--app-accent);border-color:transparent;color:var(--on-accent,#fff)}
#omHomeView .hw-mt-tr.down svg{transform:rotate(180deg)}
#omHomeView .hw-mt-tr svg{width:14px;height:14px}
#omHomeView .hw-mt-trend-badge{display:inline-flex;align-items:center;gap:4px;color:var(--text-muted);font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase}
#omHomeView .hw-mt-up .hw-mt-trend-badge{color:var(--color-success,#1a9d5a)}
#omHomeView .hw-mt-down .hw-mt-trend-badge{color:var(--color-error,#d3402f)}
#omHomeView .hw-mt-trend-badge svg{width:14px;height:14px}
#omHomeView .hw-mt-down .hw-mt-trend-badge svg{transform:rotate(180deg)}
/* Countdown */
#omHomeView .hw-cd{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;position:relative;padding:12px}
#omHomeView .hw-cd-digits{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
#omHomeView .hw-cd-unit{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:56px;padding:10px 6px;border-radius:12px;background:var(--card-bg,#fff);box-shadow:var(--shadow-e1)}
#omHomeView .hw-cd-num{font-size:clamp(24px,5vw,38px);font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text-primary)}
#omHomeView .hw-cd-u{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
#omHomeView .hw-cd-label{font-size:13.5px;font-weight:700;color:var(--text-primary);text-align:center}
#omHomeView .hw-cd-over{font-size:16px;font-weight:800;color:var(--app-accent);letter-spacing:-.01em}
#omHomeView .hw-cd-loading{color:var(--text-muted);font-size:14px}
#omHomeView .hw-cd-editbtn{position:absolute;top:6px;right:6px;width:28px;height:28px;border:.5px solid var(--chrome-border);border-radius:8px;background:var(--card-bg,#fff);color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--motion-fast),background var(--motion-fast),color var(--motion-fast)}
#omHomeView .hw-cd:hover .hw-cd-editbtn{opacity:1}
#omHomeView .hw-cd-editbtn:hover{background:color-mix(in srgb,var(--text-primary) 5%,transparent);color:var(--text-primary)}
#omHomeView .hw-cd-editbtn svg{width:14px;height:14px}
#omHomeView .hw-cd-edit{display:flex;flex-direction:column;gap:12px;padding:2px}
/* Kanban */
#omHomeView .hw-kb{height:100%;overflow:auto}
#omHomeView .hw-kb-board{display:flex;gap:12px;align-items:stretch;min-height:100%;height:100%;padding-bottom:4px}
#omHomeView .hw-kb-col{flex:0 0 200px;display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:14px;background:color-mix(in srgb,var(--text-primary) 3.5%,transparent);transition:background var(--motion-fast),box-shadow var(--motion-fast);align-self:stretch}
#omHomeView .hw-kb-col.hw-kb-over{background:color-mix(in srgb,var(--app-accent) 10%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--app-accent) 45%,transparent)}
#omHomeView .hw-kb-colhead{display:flex;align-items:center;gap:6px}
#omHomeView .hw-kb-colname{flex:1 1 auto;font-size:12px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--text-muted);outline:none;border-radius:6px;padding:2px 4px;transition:box-shadow var(--motion-fast)}
#omHomeView .hw-kb-colname:focus{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--app-accent) 40%,transparent)}
#omHomeView .hw-kb-colcount{font-size:11px;font-weight:800;color:var(--text-muted);background:color-mix(in srgb,var(--text-primary) 8%,transparent);border-radius:999px;padding:1px 7px;font-variant-numeric:tabular-nums}
#omHomeView .hw-kb-colx{width:22px;height:22px;border:none;border-radius:6px;background:transparent;color:var(--text-muted);cursor:pointer;opacity:0;display:flex;align-items:center;justify-content:center;transition:opacity var(--motion-fast),background var(--motion-fast),color var(--motion-fast)}
#omHomeView .hw-kb-col:hover .hw-kb-colx{opacity:.6}
#omHomeView .hw-kb-colx:hover{opacity:1;background:color-mix(in srgb,var(--color-error,#d33) 12%,transparent);color:var(--color-error,#d33)}
#omHomeView .hw-kb-colx svg{width:11px;height:11px}
#omHomeView .hw-kb-cards{display:flex;flex-direction:column;gap:7px;min-height:48px;flex:1 1 auto}
#omHomeView .hw-kb-card{display:flex;align-items:flex-start;gap:6px;padding:9px 10px;border-radius:11px;background:var(--card-bg,#fff);box-shadow:var(--shadow-e1);cursor:grab;transition:box-shadow var(--motion-fast),transform var(--motion-fast)}
#omHomeView .hw-kb-card:hover{box-shadow:var(--shadow-e2);transform:translateY(-1px)}
#omHomeView .hw-kb-card.hw-kb-dragging{opacity:.35}
#omHomeView .hw-kb-cardtext{flex:1 1 auto;font-size:13px;line-height:1.4;color:var(--text-primary);outline:none;border-radius:5px;cursor:text;min-height:16px;word-break:break-word}
#omHomeView .hw-kb-cardtext:focus{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--app-accent) 40%,transparent)}
#omHomeView .hw-kb-cardx{flex:0 0 auto;width:20px;height:20px;border:none;border-radius:6px;background:transparent;color:var(--text-muted);cursor:pointer;opacity:0;display:flex;align-items:center;justify-content:center;transition:opacity var(--motion-fast),background var(--motion-fast),color var(--motion-fast)}
#omHomeView .hw-kb-card:hover .hw-kb-cardx{opacity:.55}
#omHomeView .hw-kb-cardx:hover{opacity:1;background:color-mix(in srgb,var(--color-error,#d33) 12%,transparent);color:var(--color-error,#d33)}
#omHomeView .hw-kb-cardx svg{width:11px;height:11px}
/* F10 — card action cluster (Move to → + Delete) + keyboard focus ring */
#omHomeView .hw-kb-cardacts{display:flex;align-items:center;gap:1px;flex:0 0 auto}
#omHomeView .hw-kb-cardmove{flex:0 0 auto;width:20px;height:20px;border:none;border-radius:6px;background:transparent;color:var(--text-muted);cursor:pointer;opacity:0;display:flex;align-items:center;justify-content:center;transition:opacity var(--motion-fast),background var(--motion-fast),color var(--motion-fast)}
#omHomeView .hw-kb-card:hover .hw-kb-cardmove{opacity:.55}
#omHomeView .hw-kb-cardmove:hover{opacity:1;background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent)}
#omHomeView .hw-kb-cardmove svg{width:12px;height:12px;transform:rotate(90deg)}
#omHomeView .hw-kb-card:focus-visible{outline:2px solid var(--app-accent);outline-offset:1px}
#omHomeView .hw-kb-card:focus-visible .hw-kb-cardmove{opacity:1}
.hw-kb-move-cap{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);padding:4px 8px 2px}
#omHomeView .hw-kb-addcard{display:flex;align-items:center;gap:5px;justify-content:center;padding:7px;border:.5px dashed var(--chrome-border);border-radius:9px;background:transparent;color:var(--text-muted);font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast)}
#omHomeView .hw-kb-addcard:hover{background:color-mix(in srgb,var(--app-accent) 6%,transparent);color:var(--app-accent);border-color:color-mix(in srgb,var(--app-accent) 40%,var(--chrome-border))}
#omHomeView .hw-kb-addcard svg{width:12px;height:12px}
#omHomeView .hw-kb-addcol{flex:0 0 auto;align-self:flex-start;display:flex;align-items:center;gap:5px;padding:9px 13px;border:.5px dashed var(--chrome-border);border-radius:11px;background:transparent;color:var(--text-muted);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast)}
#omHomeView .hw-kb-addcol:hover{background:color-mix(in srgb,var(--app-accent) 6%,transparent);color:var(--app-accent);border-color:color-mix(in srgb,var(--app-accent) 40%,var(--chrome-border))}
#omHomeView .hw-kb-addcol svg{width:13px;height:13px}
.hw-kb-ghost{position:fixed;z-index:100000;pointer-events:none;padding:9px 11px;border-radius:11px;background:var(--card-bg,#fff);box-shadow:var(--shadow-e4,0 12px 32px rgba(0,0,0,.22));font-size:13px;font-weight:600;color:var(--text-primary,#111);max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:rotate(-1.5deg)}
/* Embed */
#omHomeView .hw-emb{height:100%;position:relative;border-radius:12px;overflow:hidden;background:color-mix(in srgb,var(--text-primary) 3%,transparent)}
#omHomeView .hw-emb-frame{width:100%;height:100%;border:none;display:block;background:#fff;border-radius:12px}
#omHomeView .hw-emb-editbtn{position:absolute;top:8px;right:8px;width:30px;height:30px;border:none;border-radius:9px;background:color-mix(in srgb,#000 42%,transparent);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--motion-fast);z-index:2}
#omHomeView .hw-emb:hover .hw-emb-editbtn,#omHomeView .hw-emb-ext:hover .hw-emb-editbtn{opacity:1}
#omHomeView .hw-emb-editbtn svg{width:15px;height:15px}
#omHomeView .hw-emb-ext{height:100%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px;color:var(--text-muted)}
#omHomeView .hw-emb-ext>svg{width:34px;height:34px;opacity:.5}
#omHomeView .hw-emb-ext-host{font-size:15px;font-weight:800;color:var(--text-primary);word-break:break-all}
#omHomeView .hw-emb-ext-note{font-size:12px;font-weight:600;max-width:280px;line-height:1.45}
#omHomeView .hw-emb-ext .hw-emb-editbtn{background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-muted)}
#omHomeView .hw-emb-edit{display:flex;flex-direction:column;gap:12px;padding:2px}
#omHomeView .hw-emb-hosts{font-size:11.5px;font-weight:600;color:var(--text-muted);line-height:1.5}
/* Sharing popover + shared-with-me */
.hw-share-pop{min-width:320px;max-width:380px}
.hw-share{display:flex;flex-direction:column;gap:12px;padding:4px}
.hw-share-head{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--text-primary)}
.hw-share-head svg{width:16px;height:16px;color:var(--app-accent)}
.hw-share-rows{display:flex;flex-direction:column;gap:6px;max-height:280px;overflow-y:auto}
.hw-share-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px;border-radius:10px}
.hw-share-row:hover{background:color-mix(in srgb,var(--text-primary) 4%,transparent)}
.hw-share-who{display:flex;align-items:center;gap:9px;min-width:0}
.hw-share-who .acct-avatar{flex:0 0 auto}
.hw-share-name{font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* iOS-style segmented control: a grey track, the SELECTED segment lifts as a white pill (accent text on
   the granting segments). Reads as one control, not three buttons. */
.hw-share-seg{display:flex;flex:0 0 auto;background:color-mix(in srgb,var(--text-primary) 8%,transparent);border-radius:9px;padding:2px}
.hw-share-lvl{border:none;background:transparent;color:var(--text-muted);font-family:inherit;font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:7px;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast)}
.hw-share-lvl:hover{color:var(--text-primary)}
.hw-share-lvl.on{background:var(--card-bg,#fff);color:var(--text-primary);box-shadow:0 1px 2px color-mix(in srgb,#000 12%,transparent),inset 0 0 0 .5px color-mix(in srgb,#000 5%,transparent)}
.hw-share-lvl[data-lvl="read"].on,.hw-share-lvl[data-lvl="edit"].on{color:var(--app-accent)}
.hw-share-empty{font-size:12px;color:var(--text-muted);font-weight:600;text-align:center;padding:16px}
.hw-share-foot{display:flex;justify-content:flex-end}
.hw-swm{display:flex;flex-direction:column;gap:4px;min-width:300px;max-width:360px}
.hw-swm-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px;border-radius:10px}
.hw-swm-row:hover{background:color-mix(in srgb,var(--text-primary) 4%,transparent)}
.hw-swm-who{display:flex;align-items:center;gap:9px;min-width:0}
.hw-swm-who .acct-avatar{flex:0 0 auto}
.hw-swm-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.hw-swm-title{font-size:13px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hw-swm-sub{font-size:11px;font-weight:600;color:var(--text-muted)}
.hw-swm-acts{display:flex;gap:6px;flex:0 0 auto}
.hw-swm-acts .hw-btn{padding:6px 11px;font-size:11.5px}
/* shared object chrome (head + segmented control), reused across adapters */
#omHomeView .hw-obj-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
#omHomeView .hw-seg{display:inline-flex;gap:2px;padding:3px;border-radius:10px;background:color-mix(in srgb,var(--text-primary) 5%,transparent)}
#omHomeView .hw-seg-b{border:0;background:transparent;border-radius:7px;padding:5px 11px;font-family:inherit;font-size:12px;font-weight:700;color:var(--text-secondary);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
#omHomeView .hw-seg-b:hover{color:var(--text-primary)}
#omHomeView .hw-seg-b.on{background:var(--card-bg);color:var(--text-primary);box-shadow:var(--shadow-e1)}
/* To-dos adapter */
#omHomeView .hw-todos{display:flex;flex-direction:column;height:100%;gap:10px}
/* To-dos uses the MAIN #todoView design system — these rules mirror #todoView's core classes so the Hub
   To-dos is visually identical (same check circle, type, meta chips). Scoped to .td-scope inside the Hub. */
#omHomeView .td-scope .td-quick{background:var(--card-bg);border-radius:var(--radius-md);padding:8px 12px;display:flex;align-items:center;gap:9px;border:.5px solid var(--chrome-border);box-shadow:0 1px 2px rgba(15,23,42,.04),0 0 0 .5px rgba(15,23,42,.04);transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
#omHomeView .td-scope .td-quick:focus-within{border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 20%,transparent)}
#omHomeView .td-scope .hw-todo-input{flex:1 1 auto;background:transparent;border:0;outline:none;font-size:13px;color:var(--text-primary);font-family:inherit}
#omHomeView .td-scope .hw-todo-input::placeholder{color:var(--text-muted)}
#omHomeView .td-scope .hw-todo-addbtn{display:grid;place-items:center;flex:0 0 auto;width:30px;height:30px;border:0;border-radius:9px;background:var(--app-accent);color:#fff;cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring)}
#omHomeView .td-scope .hw-todo-addbtn:hover{transform:translateY(-1px)}
#omHomeView .td-scope .hw-todo-addbtn svg{width:14px;height:14px}
#omHomeView .td-scope .td-list{flex:1 1 auto;overflow:auto}
/* mirrored #todoView row design */
#omHomeView .td-scope .td-item{display:flex;align-items:flex-start;gap:12px;padding:10px 6px;border-bottom:.5px solid var(--border);transition:background var(--motion-fast);position:relative}
#omHomeView .td-scope .td-item:hover{background:var(--hover-overlay)}
#omHomeView .td-scope .td-item.done{opacity:.45}
#omHomeView .td-scope .td-item.done .td-text{text-decoration:line-through}
#omHomeView .td-scope .td-check{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--td-checkbox-stroke,var(--chrome-border));background:radial-gradient(circle at 36% 28%,color-mix(in srgb,var(--card-bg) 100%,#fff),color-mix(in srgb,var(--td-checkbox-stroke,var(--chrome-border)) 8%,var(--card-bg)));flex-shrink:0;margin-top:1px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 3px rgba(0,0,0,.06),0 1px 2px rgba(16,24,40,.12);transition:transform var(--motion-base) cubic-bezier(.32,.72,0,1),background var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast)}
#omHomeView .td-scope .td-check:hover{border-color:var(--app-accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 5px -1px color-mix(in srgb,var(--app-accent) 35%,transparent)}
#omHomeView .td-scope .td-check:active{transform:scale(.9)}
#omHomeView .td-scope .td-check.done{border-color:transparent;color:#fff;background:radial-gradient(circle at 34% 26%,color-mix(in srgb,var(--app-accent) 32%,#fff),var(--app-accent) 64%,color-mix(in srgb,var(--app-accent) 80%,#000) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 4px color-mix(in srgb,var(--app-accent) 55%,#000),0 2px 6px -1px color-mix(in srgb,var(--app-accent) 50%,transparent)}
#omHomeView .td-scope .td-check.done::after{content:'\\2713';font-size:13px;font-weight:700;line-height:1}
#omHomeView .td-scope .td-body{flex:1;min-width:0}
#omHomeView .td-scope .td-text{font-size:14px;color:var(--text-primary);word-break:break-word;font-weight:500}
#omHomeView .td-scope .td-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:3px;align-items:center}
#omHomeView .td-scope .td-meta-due{font-size:11px;color:var(--text-muted);display:inline-flex;align-items:center;gap:3px}
#omHomeView .td-scope .td-meta-ico{width:10px;height:10px;flex-shrink:0;color:currentColor}
#omHomeView .td-scope .td-meta-due.overdue{color:var(--color-error);font-weight:600}
#omHomeView .td-scope .td-meta-due.today{color:var(--color-warning);font-weight:600}
#omHomeView .td-scope .td-meta-flag{font-size:11px;color:#ff2d55}
#omHomeView .td-scope .td-meta-prio{font-size:11px;font-weight:700;color:var(--color-warning)}
#omHomeView .td-scope .td-item[data-priority="high"] .td-meta-prio{color:var(--color-error)}
#omHomeView .td-scope .td-item[data-priority="low"] .td-meta-prio{color:var(--color-success)}
#omHomeView .td-scope .td-meta-pill{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:var(--text-primary);padding:1px 6px;border-radius:var(--radius-xs)}
#omHomeView .td-scope .td-pill-dot{width:6px;height:6px;border-radius:50%}
/* depth controls (date/priority/flag) as a hover action cluster — styled to sit with the meta row */
#omHomeView .td-scope .hw-todo-acts{display:flex;gap:2px;flex:0 0 auto;opacity:0;transition:opacity var(--motion-fast);margin-top:1px}
#omHomeView .td-scope .td-item:hover .hw-todo-acts{opacity:1}
#omHomeView .td-scope .hw-todo-mini{display:grid;place-items:center;width:26px;height:26px;border:0;background:transparent;border-radius:7px;color:var(--text-muted);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
#omHomeView .td-scope .hw-todo-mini svg{width:13px;height:13px}
#omHomeView .td-scope .hw-todo-mini:hover{background:color-mix(in srgb,var(--text-primary) 7%,transparent);color:var(--text-primary)}
#omHomeView .td-scope .hw-todo-datepick{border:.5px solid var(--chrome-border);border-radius:8px;padding:4px 6px;font-family:inherit;font-size:11px;color:var(--text-secondary);background:transparent;outline:none;max-width:118px}
#omHomeView .td-scope .hw-todo-pri{display:grid;place-items:center;width:28px;height:28px;flex:0 0 auto;border:0;border-radius:8px;background:color-mix(in srgb,var(--text-primary) 6%,transparent);color:var(--text-muted);font-size:12px;font-weight:800;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
#omHomeView .td-scope .hw-todo-pri:hover{background:color-mix(in srgb,var(--text-primary) 11%,transparent)}
#omHomeView .td-scope .hw-todo-pri.pri-high{color:var(--color-error);background:color-mix(in srgb,var(--color-error) 12%,transparent)}
#omHomeView .td-scope .hw-todo-pri.pri-med{color:var(--color-warning);background:color-mix(in srgb,var(--color-warning) 12%,transparent)}
#omHomeView .td-scope .hw-todo-pri.pri-low{color:var(--color-success);background:color-mix(in srgb,var(--color-success) 12%,transparent)}
#omHomeView .td-scope .hw-todo-duepick{position:relative;overflow:hidden;cursor:pointer}
#omHomeView .td-scope .hw-todo-duepick input[type=date]{position:absolute;inset:0;opacity:0;cursor:pointer}
#omHomeView .td-scope .hw-todo-duepick.on{color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 10%,transparent)}
#omHomeView .td-scope .hw-todo-flag.on{color:#ff2d55;background:color-mix(in srgb,#ff2d55 12%,transparent)}
/* shared object head-actions + count + back button (reused across adapters) */
#omHomeView .hw-obj-head h3{display:flex;align-items:center;gap:7px;margin:0;font-size:13.5px;font-weight:800;letter-spacing:-.01em}
#omHomeView .hw-obj-head .hub-w-ico{width:15px;height:15px;flex:0 0 auto;color:var(--text-muted)}
#omHomeView .hw-head-acts{margin-left:auto;display:flex;align-items:center;gap:5px}
#omHomeView .hw-head-add{display:inline-flex;align-items:center;gap:5px;border:0;border-radius:9px;padding:6px 11px;font-family:inherit;font-size:12px;font-weight:700;color:var(--on-accent,#fff);background:var(--app-accent);cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring)}
#omHomeView .hw-head-add:hover{transform:translateY(-1px)}
#omHomeView .hw-head-add svg{width:12px;height:12px}
#omHomeView .hw-mini-btn{display:grid;place-items:center;width:28px;height:28px;border:0;background:transparent;border-radius:8px;color:var(--text-muted);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
#omHomeView .hw-mini-btn svg{width:14px;height:14px}
#omHomeView .hw-mini-btn:hover{background:color-mix(in srgb,var(--text-primary) 7%,transparent);color:var(--text-primary)}
#omHomeView .hw-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 6px;border-radius:999px;font-size:10.5px;font-weight:800;background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent)}
#omHomeView .hw-back{display:inline-flex;align-items:center;gap:3px;border:0;background:transparent;color:var(--app-accent);font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;padding:2px 4px;border-radius:7px}
#omHomeView .hw-back svg{width:14px;height:14px}
#omHomeView .hw-back:hover{background:color-mix(in srgb,var(--app-accent) 10%,transparent)}
/* Calendar adapter — mirrors the main Lookahead page's #lookaheadView .day-grp/.day-hd/.wk-task/.wt-*
   rules (defined ~28148) scoped to #omHomeView, so the Hub Calendar reads identically to the real page:
   type identity via a leading dot + pill (never an edge stripe), contained rounded tint hover. */
#omHomeView .hw-cal-scope{display:flex;flex-direction:column;gap:2px}
#omHomeView .hw-cal-scope .day-grp{margin:2px 0}
#omHomeView .hw-cal-scope .day-hd{display:flex;align-items:center;gap:8px;padding:6px 4px}
#omHomeView .hw-cal-scope .day-hd .dd{font-size:11.5px;font-weight:800;letter-spacing:.02em}
#omHomeView .hw-cal-scope .day-hd .dd-date{font-size:11px;color:var(--text-muted);font-weight:700}
#omHomeView .hw-cal-scope .day-hd.today .dd{color:var(--app-accent)}
#omHomeView .hw-cal-scope .day-hd .dd-today{font-size:9.5px;font-weight:800;color:var(--on-accent,#fff);background:var(--app-accent);padding:1px 7px;border-radius:999px}
#omHomeView .hw-cal-scope .day-hd .dd-count{margin-left:auto;font-size:10.5px;font-weight:800;color:var(--text-muted)}
#omHomeView .hw-cal-scope .wk-task{display:flex;gap:9px;padding:8px 10px;border-radius:12px;position:relative;background:color-mix(in srgb,var(--surface-2) 50%,transparent);border:.5px solid rgba(0,0,0,.04);margin-bottom:5px;transition:background var(--motion-fast) var(--ease-out,ease),border-color var(--motion-fast)}
#omHomeView .hw-cal-scope .wk-task:hover{background:color-mix(in srgb,var(--wts,var(--app-accent)) 8%,var(--surface-2));border-color:color-mix(in srgb,var(--wts,var(--app-accent)) 22%,transparent)}
#omHomeView .hw-cal-scope .wk-task .wt-dot{width:9px;height:9px;border-radius:999px;flex:0 0 9px;margin-top:4px;background:var(--wts,var(--app-accent));box-shadow:0 0 0 3px color-mix(in srgb,var(--wts,var(--app-accent)) 18%,transparent)}
#omHomeView .hw-cal-scope .wt-body{min-width:0;flex:1}
#omHomeView .hw-cal-scope .wt-t{font-size:12.5px;font-weight:700;line-height:1.25;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#omHomeView .hw-cal-scope .wt-m{font-size:11px;color:var(--text-secondary);margin-top:2px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
#omHomeView .hw-cal-scope .wt-proj{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
#omHomeView .hw-cal-scope .wt-type{font-size:9.5px;font-weight:800;padding:1px 6px;border-radius:999px}
#omHomeView .hw-cal-scope .wt-bic{display:flex;align-items:center;flex:0 0 auto}
#omHomeView .hw-cal-scope .wt-face{width:21px;height:21px;border-radius:999px;display:grid;place-items:center;color:#fff;font-size:9px;font-weight:800;box-shadow:0 0 0 1.5px var(--card-bg,#fff)}
/* Files adapter — reuses the main Files page's global .file-row / .file-row-icon.cat-* /
   .file-row-name / .file-row-proj classes (same icon tints + type), but a #omHomeView compact
   override reflows the desktop 6-column grid into a pane-friendly 3-column row (icon · name+sub · dl). */
#omHomeView .hw-files-scope{display:flex;flex-direction:column;gap:5px}
#omHomeView .hw-files-scope .file-row{display:grid;grid-template-columns:30px minmax(0,1fr) 28px;grid-template-rows:auto auto;align-items:center;gap:1px 10px;padding:8px 10px;box-shadow:var(--shadow-e1);cursor:pointer}
#omHomeView .hw-files-scope .file-row.hw-files-static{cursor:default}
#omHomeView .hw-files-scope .file-row:hover{box-shadow:var(--shadow-e2);transform:translateY(-1px)}
#omHomeView .hw-files-scope .file-row-icon{grid-column:1;grid-row:1 / span 2;margin-left:0;align-self:center}
#omHomeView .hw-files-scope .file-row-name{grid-column:2;grid-row:1}
#omHomeView .hw-files-scope .file-row-proj{grid-column:2;grid-row:2;font-size:11px}
#omHomeView .hw-files-open-t{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#omHomeView .hw-files-doc{position:relative;min-height:200px}
#omHomeView .hw-files-search{width:100%;border:.5px solid var(--chrome-border);border-radius:9px;padding:7px 11px;font-family:inherit;font-size:12.5px;color:var(--text-primary);background:color-mix(in srgb,var(--text-primary) 2%,transparent);outline:none;margin-bottom:7px;box-sizing:border-box}
#omHomeView .hw-files-search:focus{border-color:color-mix(in srgb,var(--app-accent) 45%,var(--chrome-border))}
#omHomeView .hw-files-dl{grid-column:3;grid-row:1 / span 2;display:grid;place-items:center;flex:0 0 auto;width:28px;height:28px;border-radius:8px;color:var(--text-muted);opacity:0;transition:opacity var(--motion-fast),background var(--motion-fast),color var(--motion-fast)}
#omHomeView .hw-files-dl svg{width:14px;height:14px}
#omHomeView .hw-files-scope .file-row:hover .hw-files-dl{opacity:1}
/* E2 — Finder layout: tree sidebar + main pane + view modes */
#omHomeView .hw-files2{display:grid;grid-template-columns:minmax(120px,30%) 1fr;gap:10px;height:100%;min-height:0}
#omHomeView .hw-files2-side{overflow-y:auto;min-height:0;border-right:.5px solid color-mix(in srgb,var(--chrome-border) 60%,transparent);padding-right:6px}
#omHomeView .hw-ftree{display:flex;flex-direction:column;gap:1px}
#omHomeView .hw-ftree-node{display:flex;align-items:center;gap:6px;width:100%;text-align:left;border:0;background:transparent;border-radius:8px;padding:6px 8px;font-family:inherit;font-size:12px;font-weight:600;color:var(--text-primary);cursor:pointer;transition:background var(--motion-fast)}
#omHomeView .hw-ftree-node:hover{background:color-mix(in srgb,var(--text-primary) 5%,transparent)}
#omHomeView .hw-ftree-node.on{background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent)}
#omHomeView .hw-ftree-node span:not(.hw-ftree-ct){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}
#omHomeView .hw-ftree-ic{width:13px;height:13px;flex:0 0 auto;opacity:.75}
#omHomeView .hw-ftree-ct{font-size:10px;font-weight:700;color:var(--text-muted);flex:0 0 auto}
#omHomeView .hw-files2-main{display:flex;flex-direction:column;min-width:0;min-height:0}
#omHomeView .hw-files2-bar{display:flex;align-items:center;gap:7px;margin-bottom:7px}
#omHomeView .hw-files2-bar .hw-files-search{margin-bottom:0;flex:1 1 auto}
#omHomeView .hw-files-modes{display:flex;gap:2px;flex:0 0 auto;background:color-mix(in srgb,var(--text-primary) 5%,transparent);border-radius:9px;padding:2px}
#omHomeView .hw-files-mode{width:26px;height:24px;border:0;border-radius:7px;background:transparent;color:var(--text-muted);cursor:pointer;display:grid;place-items:center;transition:background var(--motion-fast),color var(--motion-fast)}
#omHomeView .hw-files-mode svg{width:14px;height:14px}
#omHomeView .hw-files-mode.on{background:var(--surface,#fff);color:var(--app-accent);box-shadow:var(--shadow-e1)}
#omHomeView .hw-files-sort{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;border:.5px solid var(--chrome-border);border-radius:9px;background:transparent;color:var(--text-primary);font-family:inherit;font-size:11.5px;font-weight:700;padding:5px 9px;cursor:pointer}
#omHomeView .hw-files-sort svg{width:10px;height:10px;opacity:.6}
#omHomeView .hw-files2-crumb{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin:0 2px 6px}
#omHomeView .hw-files2-body{flex:1 1 auto;overflow-y:auto;min-height:0}
/* grid / gallery modes */
#omHomeView .hw-files-mode-grid,#omHomeView .hw-files-mode-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
#omHomeView .hw-files-mode-gallery{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
#omHomeView .hw-file-card{display:flex;flex-direction:column;gap:5px;align-items:flex-start;text-align:left;border:.5px solid var(--chrome-border);border-radius:12px;background:var(--surface,#fff);padding:10px;cursor:pointer;box-shadow:var(--shadow-e1);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
#omHomeView .hw-file-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-e2)}
#omHomeView .hw-file-card .file-card-media{width:100%;aspect-ratio:4/3;border-radius:9px;display:grid;place-items:center}
#omHomeView .hw-files-mode-gallery .file-card-media{aspect-ratio:1}
#omHomeView .hw-file-card .file-card-media svg{width:28px;height:28px}
#omHomeView .hw-file-card-name{font-size:12px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#omHomeView .hw-file-card-sub{font-size:10px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* columns mode — CSS multi-column flow of rows (Miller-ish) */
#omHomeView .hw-files-mode-columns{column-width:220px;column-gap:12px}
#omHomeView .hw-files-mode-columns .file-row{break-inside:avoid;margin-bottom:5px}
#omHomeView .hw-files-dl:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent)}
/* Templates adapter */
#omHomeView .hw-tpl-proj-lbl{font-size:11px;font-weight:700;color:var(--text-muted)}
#omHomeView .hw-tpl-proj{border:.5px solid var(--chrome-border);border-radius:8px;padding:4px 8px;font-family:inherit;font-size:12px;color:var(--text-primary);background:var(--card-bg);max-width:180px}
/* 🦜 E1 reskin — the gallery + fields now emit the REAL Doc Studio classes (.dgx-gal-cats /
   .dgx-card / .dg-field / .field-input, all global); the ad-hoc card/field skins are gone.
   Only hub-scoped LAYOUT glue remains below. */
#omHomeView .hw-tpl-cats{margin:2px 0 10px}
/* padding must be generous enough that a lifted card's shadow (hover translateY(-3px) +
   e3 shadow) never clips against this scroll container (Gavin caught the 2px version). */
#omHomeView .hw-tpl-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));overflow:auto;padding:10px 14px 26px;margin:0 -8px;scrollbar-width:thin}
#omHomeView .hw-tpl-search{max-width:200px;font-size:12px;padding:6px 10px}
#omHomeView .hw-tpl-projname{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--text-muted)}
#omHomeView .hw-tpl-body{display:grid;grid-template-columns:minmax(200px,1fr) 1.2fr;gap:12px;flex:1 1 auto;min-height:0;margin-top:2px}
#omHomeView .hw-tpl-form{overflow:auto;display:flex;flex-direction:column;gap:9px;padding-right:4px}
#omHomeView textarea.hw-tpl-field{min-height:64px;resize:vertical}
#omHomeView input[type=checkbox].hw-tpl-field{align-self:flex-start;width:18px;height:18px}
#omHomeView .hw-tpl-pane{border:.5px solid var(--chrome-border);border-radius:11px;overflow:hidden;background:#fff;min-height:200px}
#omHomeView .hw-tpl-preview{width:100%;height:100%;min-height:200px;border:0}
#omHomeView .hw-tpl-foot{display:flex;align-items:center;gap:12px;margin-top:10px;padding-top:10px;border-top:.5px solid var(--chrome-border)}
#omHomeView .hw-tpl-missing{font-size:12px;font-weight:600;color:var(--text-muted)}
#omHomeView .hw-tpl-gen{margin-left:auto;border:0;border-radius:10px;padding:9px 16px;font-family:inherit;font-size:12.5px;font-weight:700;color:#fff;background:var(--app-accent);cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring),opacity var(--motion-fast)}
#omHomeView .hw-tpl-gen:hover:not(:disabled){transform:translateY(-1px)}
#omHomeView .hw-tpl-gen:disabled{opacity:.45;cursor:not-allowed}
/* Chat adapter */
#omHomeView .hw-chat{display:flex;flex-direction:column;height:100%;gap:8px}
#omHomeView .hw-chat-sel{border:.5px solid var(--chrome-border);border-radius:8px;padding:4px 8px;font-family:inherit;font-size:12px;color:var(--text-primary);background:var(--card-bg);max-width:150px}
#omHomeView .hw-chat-list{flex:1 1 auto;overflow:auto;display:flex;flex-direction:column;gap:6px;padding:2px}
/* mirrors the main Team Chat #teamChatView .tc-* rules (~113894) scoped to #omHomeView: row-reverse for
   own messages, accent-gradient own bubble + e1 incoming bubble, quiet recessed timestamp. */
#omHomeView .hw-chat-scope .tc-row{display:flex;gap:8px;align-items:flex-end;padding:1px 2px;position:relative}
#omHomeView .hw-chat-scope .tc-row.mine{flex-direction:row-reverse}
#omHomeView .hw-chat-scope .tc-avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--on-accent);font-size:11px;font-weight:600;flex-shrink:0;box-shadow:0 1px 2px rgba(0,0,0,0.08)}
#omHomeView .hw-chat-scope .tc-avatar-img img{width:100%;height:100%;border-radius:50%;object-fit:cover}
#omHomeView .hw-chat-scope .tc-bubble-wrap{display:flex;flex-direction:column;max-width:78%;min-width:0}
#omHomeView .hw-chat-scope .tc-row.mine .tc-bubble-wrap{align-items:flex-end}
#omHomeView .hw-chat-scope .tc-name{font-size:11px;font-weight:600;color:var(--text-muted);margin:0 12px 3px;letter-spacing:0.1px}
#omHomeView .hw-chat-scope .tc-bubble{background:var(--surface-2,var(--card-bg));border-radius:var(--radius-xl);padding:7px 13px;position:relative;font-size:14px;line-height:1.32;word-wrap:break-word;color:var(--text-primary);box-shadow:var(--shadow-e1);border:0.5px solid var(--chrome-border)}
#omHomeView .hw-chat-scope .tc-row.mine .tc-bubble{background:linear-gradient(135deg,var(--app-accent),color-mix(in srgb,var(--app-accent) 85%,#000));color:var(--on-accent);border:0.5px solid transparent;box-shadow:0 2px 8px color-mix(in srgb,var(--app-accent) 35%,transparent),inset 0 1px 0 rgba(255,255,255,.14)}
#omHomeView .hw-chat-scope .tc-text{white-space:pre-wrap}
#omHomeView .hw-chat-scope .tc-time{font:400 10px/1.4 -apple-system,"SF Pro Text",system-ui,sans-serif;color:var(--text-secondary);opacity:.65;margin:3px 14px 2px;display:inline-flex;align-items:center;gap:7px}
#omHomeView .hw-chat-scope .tc-row.mine .tc-time{color:var(--text-muted)}
#omHomeView .hw-chat-composer{display:flex;gap:7px;align-items:center;flex:0 0 auto}
#omHomeView .hw-chat-input{flex:1 1 auto;border:.5px solid var(--chrome-border);border-radius:999px;padding:9px 14px;font-family:inherit;font-size:13px;color:var(--text-primary);background:color-mix(in srgb,var(--text-primary) 2%,transparent);outline:none;transition:border-color var(--motion-fast)}
#omHomeView .hw-chat-input:focus{border-color:color-mix(in srgb,var(--app-accent) 45%,var(--chrome-border))}
#omHomeView .hw-chat-send{display:grid;place-items:center;flex:0 0 auto;width:36px;height:36px;border:0;border-radius:50%;background:var(--app-accent);color:#fff;cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring)}
#omHomeView .hw-chat-send:hover{transform:scale(1.06)}
#omHomeView .hw-chat-send svg{width:15px;height:15px}
/* Assistant adapter — reuses the main assistant's GLOBAL .ai-msg / .ai-msg.user / .ai-msg.assistant
   bubble classes (defined ~4169, unscoped so they apply in-pane) + the real _aiFormatAssistant markdown
   renderer. Only the log/proposals/composer chrome stays adapter-scoped. */
#omHomeView .hw-ai-log{flex:1 1 auto;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:2px}
#omHomeView .hw-ai-welcome{margin:auto}
#omHomeView .hw-ai-thinking{color:var(--text-muted);font-style:italic}
#omHomeView .hw-ai-proposals{margin-top:-4px;align-self:flex-start;max-width:90%;display:flex;flex-direction:column;gap:5px}
#omHomeView .hw-ai-proposal{border:.5px solid var(--chrome-border);border-radius:10px;padding:7px 10px;background:var(--card-bg)}
#omHomeView .hw-ai-proposal-title{font-size:12px;font-weight:700;color:var(--text-primary)}
#omHomeView .hw-ai-proposal-desc{font-size:11.5px;color:var(--text-muted);margin-top:2px}
#omHomeView .hw-ai-proposal-note{font-size:10.5px;color:var(--text-muted);font-style:italic;margin-top:2px}
#omHomeView .hw-ai-composer{display:flex;gap:7px;align-items:flex-end;flex:0 0 auto;margin-top:8px}
#omHomeView .hw-ai-input{flex:1 1 auto;border:.5px solid var(--chrome-border);border-radius:14px;padding:9px 12px;font-family:inherit;font-size:13px;line-height:1.4;color:var(--text-primary);background:color-mix(in srgb,var(--text-primary) 2%,transparent);outline:none;resize:none;transition:border-color var(--motion-fast)}
#omHomeView .hw-ai-input:focus{border-color:color-mix(in srgb,var(--app-accent) 45%,var(--chrome-border))}
#omHomeView .hw-ai-send{display:grid;place-items:center;flex:0 0 auto;width:36px;height:36px;border:0;border-radius:50%;background:var(--app-accent);color:#fff;cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring),opacity var(--motion-fast)}
#omHomeView .hw-ai-send:hover:not(:disabled){transform:scale(1.06)}
#omHomeView .hw-ai-send:disabled{opacity:.5;cursor:default}
#omHomeView .hw-ai-send svg{width:15px;height:15px}
/* Projects adapter */
#omHomeView .hw-proj{display:flex;flex-direction:column;height:100%}
#omHomeView .hw-proj-search{border:.5px solid var(--chrome-border);border-radius:10px;padding:8px 12px;font-family:inherit;font-size:13px;color:var(--text-primary);background:color-mix(in srgb,var(--text-primary) 2%,transparent);outline:none;margin-bottom:8px}
#omHomeView .hw-proj-search:focus{border-color:color-mix(in srgb,var(--app-accent) 45%,var(--chrome-border))}
#omHomeView .hw-proj-list{flex:1 1 auto;overflow:auto;display:flex;flex-direction:column;gap:2px}
#omHomeView .hw-proj-row{display:flex;flex-direction:column;gap:1px;text-align:left;border:0;background:transparent;border-radius:9px;padding:8px 10px;cursor:pointer;transition:background var(--motion-fast)}
#omHomeView .hw-proj-row:hover{background:color-mix(in srgb,var(--text-primary) 5%,transparent)}
#omHomeView .hw-proj-name{font-size:13px;font-weight:700;color:var(--text-primary)}
#omHomeView .hw-proj-sub{font-size:11.5px;color:var(--text-muted)}
/* metric tiles reuse the global .mov-bhero-* type/color (val 22px/800, lbl 9.5px uppercase muted); a
   grid override reflows the main page's divider-hero row into pane-friendly soft tiles. */
#omHomeView .hw-proj-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:9px;margin-top:4px}
#omHomeView .hw-proj-metrics .mov-bhero-metric{padding:11px 12px;border-radius:12px;background:var(--card-bg);box-shadow:var(--shadow-e1),inset 0 0 0 .5px var(--chrome-border)}
#omHomeView .hw-proj-metrics .mov-bhero-metric::before{display:none}
#omHomeView .hw-proj-metrics .mov-bhero-val{font-size:18px}
#omHomeView .hw-proj-note{margin-top:11px}
#omHomeView .hw-proj-note-t{font-size:12.5px;color:var(--text-primary);line-height:1.4}
#omHomeView .hw-proj-note-m{font-size:11px;color:var(--text-muted);margin-top:4px}
/* Needs-you adapter — rows/headers now reuse the main dashboard's #omHomeView .q-head/.trow
   design system (see _hwHostNeedsYou); only the group wrappers remain adapter-scoped. */
#omHomeView .hw-ny-groups{display:flex;flex-direction:column;gap:14px}
#omHomeView .hw-ny-group{display:flex;flex-direction:column;gap:2px}
/* Workforce adapter in a pane — the 3 panels flow (wrap to the pane width, not a forced 3-across that
   eats the whole workbench), and stretch to EQUAL height so Roster isn't shorter than its siblings.
   Also fixes the zone-head icon+title alignment inside a pane (the old flex rule was .hub-widget-scoped). */
#omHomeView .hw-wf{height:100%}
#omHomeView .hw-wf-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important;align-items:stretch!important}
#omHomeView .hw-wf-grid > div{display:flex;flex-direction:column;height:100%}
#omHomeView .hw-wf-grid > div > .tc-panel{flex:1;min-height:0}
/* Workforce Hub deepen — the .tc-* design system (global classes) applies as-is; these style only the
   Hub-specific additions (rollup stat, project meta, expandable approval sessions, labor donut). */
#omHomeView .hub-wf-rollup{margin-left:auto;font-size:11px;font-weight:700;color:var(--text-secondary);white-space:nowrap}
#omHomeView .hub-wf-wc-proj{opacity:.78;font-weight:600}
#omHomeView .hub-wf-grp-toggle{display:block;width:100%;text-align:left;background:none;border:0;padding:0;cursor:pointer;color:var(--text-secondary);font:inherit}
#omHomeView .hub-wf-grp-toggle .hub-wf-caret{width:11px;height:11px;vertical-align:-1px;transition:transform var(--motion-fast,.15s)}
#omHomeView .hub-wf-grp-toggle[aria-expanded="true"] .hub-wf-caret{transform:rotate(180deg)}
#omHomeView .hub-wf-grp-open{background:none;border:0;padding:2px;margin-left:4px;cursor:pointer;color:var(--text-tertiary,var(--text-secondary));opacity:0;transition:opacity var(--motion-fast,.15s)}
#omHomeView .hub-wf-grp-open svg{width:12px;height:12px}
#omHomeView .tc-appr-row:hover .hub-wf-grp-open{opacity:.85}
#omHomeView .hub-wf-grp-tl{margin-top:7px;display:flex;flex-direction:column;gap:4px}
#omHomeView .hub-wf-tl-row{display:flex;align-items:center;gap:8px;padding:5px 9px;border-radius:9px;background:color-mix(in srgb,var(--chrome-border) 22%,transparent);font-size:11.5px}
#omHomeView .hub-wf-tl-row .tc-ws-tl-when{color:var(--text-secondary);font-variant-numeric:tabular-nums}
#omHomeView .hub-wf-tl-row .tc-ws-tl-meta{display:flex;gap:4px;margin-left:2px}
#omHomeView .hub-wf-tl-row .tc-ws-tl-hrs{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums}
#omHomeView .hub-wf-crews{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
#omHomeView .hub-wf-a-sub{font-size:11px;font-weight:700;color:var(--text-secondary);margin-bottom:8px}
#omHomeView .hub-wf-donut{display:flex;align-items:center;gap:14px;margin-top:12px}
#omHomeView .hub-wf-donut-lgnd{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--text-secondary)}
#omHomeView .hub-wf-lgnd-i{display:flex;align-items:center;gap:7px}
#omHomeView .hub-wf-lgnd-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
#omHomeView .hw-wf .om-zone-head{display:flex;align-items:center;gap:8px;margin-bottom:11px}
#omHomeView .hw-wf .om-zone-head h3{display:flex;align-items:center;gap:7px;margin:0;font-size:13.5px;font-weight:800;letter-spacing:-.01em}
#omHomeView .hw-wf .om-zone-head .hub-w-ico{width:15px;height:15px;flex:0 0 auto}
#omHomeView .hw-wf .om-zone-head .hub-w-open{margin-left:auto}
/* Responsive — narrow (iPad/phone): free-floating windows have no room to drag, so the canvas flows
   windows as a stacked full-width column (position:static overrides the absolute geometry). */
@media(max-width:900px){
  #omHomeView .hw-root{flex-direction:column;height:auto;min-height:0}
  #omHomeView .hw-rail{flex:none;flex-direction:row;flex-wrap:wrap;width:auto;overflow:visible}
  #omHomeView .hw-rail-objs{flex-direction:row;flex-wrap:wrap;flex:1 1 100%}
  #omHomeView .hw-rail-obj{flex:0 0 auto}
  #omHomeView .hw-tidy{margin-top:0}
  #omHomeView .hw-canvas{overflow:visible;background:none;display:flex;flex-direction:column;gap:12px}
  /* Hub Canvas P1 — on the mobile stack the world layer is inert (no transform); windows flow vertically. */
  #omHomeView .hw-world{position:static;transform:none;display:flex;flex-direction:column;gap:12px;width:auto;height:auto}
  #omHomeView .hw-cam-controls,#omHomeView .hw-minimap{display:none}
  #omHomeView .hw-win{position:static!important;width:auto!important;height:auto!important;min-height:320px}
  #omHomeView .hw-win.min{min-height:0}
  #omHomeView .hw-rz{display:none}
  #omHomeView .hw-win-bar{cursor:default}
}

/* ===== OM Home · Pass 2 (proto 19) — Ops Command Center ===== */
/* ops-blue command identity (distinct from owner money-green + estimator amber) */
#omHomeView{--ops-blue:#1e6fa8;--ops-blue-deep:#0a2c47}
/* pass-3 (_STANDARD.md A): wider command center — 1320→1600 cap so it fills normal screens (no dead gutters ≤1600) without runaway 2-col stretch at 4K/ultrawide (agent-flagged). */
#omHomeView .om-wrap{padding:22px 26px 38px;width:100%;margin:0;box-sizing:border-box}
/* command hero — §6: theme-accent-driven (mirrors .proj-hero's tri-stop recipe). --hero-tone
   defaults to the live theme accent so the banner re-tints per theme; override per-hero by setting
   --hero-tone on this rule alone (e.g. `--hero-tone:var(--ops-blue)`). Ink = --on-accent per theme
   (each theme defines a luminance-correct on-accent — incl. Lido Sun's black-on-yellow). */
#omHomeView /* 2026-07-02 📘 — Hub hero elevated: a richer multi-stop diagonal that shifts hue (deep→brand→a lighter
   cool highlight) + a layered specular/glow (::after) and a fine grain + soft mesh-glow (::before) so the
   band reads as premium Apple material rather than a flat blue slab. */
.om-hero{--hero-tone:var(--app-accent);position:relative;border-radius:24px;padding:26px 30px;color:var(--hero-ink,var(--on-accent,#fff));overflow:hidden;margin-bottom:18px;background:
  linear-gradient(135deg,color-mix(in srgb,var(--hero-tone) 82%,#001832) 0%,var(--hero-tone) 46%,color-mix(in srgb,var(--hero-tone) 72%,#4aa3ff) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 0 .5px rgba(255,255,255,.08),var(--shadow-e4,0 22px 60px -20px rgba(12,40,80,.58))}
#omHomeView .om-hero::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(90% 120% at 88% -10%,rgba(120,200,255,.32),transparent 60%),radial-gradient(60% 90% at 12% 120%,rgba(0,20,60,.28),transparent 62%);
  mix-blend-mode:screen;opacity:.9}
#omHomeView .om-hero::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.26),transparent 52%),
    linear-gradient(180deg,rgba(255,255,255,.12),transparent 26%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-size:auto,auto,140px 140px;opacity:.5}
#omHomeView .omh-top{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap;position:relative;z-index:1}
#omHomeView .omh-greet .omh-k{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.88;color:inherit}
#omHomeView .omh-greet h2{font-size:38px;font-weight:800;letter-spacing:-.025em;margin:4px 0 3px;line-height:1;font-variant-numeric:tabular-nums;color:inherit}
#omHomeView .omh-greet h2 .court{font-size:22px;font-weight:700;opacity:.78;letter-spacing:-.01em}
#omHomeView .omh-greet h2 .amber{color:#ffe08a}
#omHomeView .omh-greet h2 .allclear{color:#bff0c8}
#omHomeView .omh-greet .omh-sub{font-size:13px;opacity:.92;font-weight:600;color:inherit}
/* vital pills inside hero */
#omHomeView .omh-vitals{display:flex;gap:10px;margin-top:20px;position:relative;z-index:1;flex-wrap:wrap}
#omHomeView .omv{flex:1;min-width:120px;border-radius:15px;padding:13px 15px;background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.09));box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 .5px rgba(255,255,255,.12),0 2px 8px -4px rgba(0,0,20,.3);cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring),background var(--motion-fast),box-shadow var(--motion-fast);border:0;text-align:left;color:inherit;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#omHomeView .omv:hover{transform:translateY(-2px);background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.13));box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 0 0 .5px rgba(255,255,255,.18),0 8px 20px -8px rgba(0,0,20,.4)}
#omHomeView .omv:active{transform:translateY(0)}
#omHomeView .omv .ov-v{font-size:23px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
#omHomeView .omv .ov-l{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;opacity:.86;margin-top:5px}
#omHomeView .omv.alert .ov-v{color:#ffd0c2}
#omHomeView .omv.warn .ov-v{color:#ffe08a}
/* zero-value vital tiles recede so live counts command the eye (still tappable, still legible) */
#omHomeView .omv.is-zero{opacity:.58;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.05))}
#omHomeView .omv.is-zero:hover{opacity:.82}
#omHomeView .omv.is-zero .ov-v{font-weight:700}
/* 2026-07-02 📘 — court-load bar: the honest shape of total_items split into overdue / due-soon /
   on-track (all real counts). Gives the hero a sense of workload composition, no fabricated figure. */
#omHomeView .om-load{display:flex;align-items:center;gap:12px;margin-top:16px;position:relative;z-index:1;flex-wrap:wrap}
#omHomeView .om-load-track{flex:1;min-width:220px;height:9px;border-radius:999px;overflow:hidden;display:flex;background:rgba(255,255,255,.16);box-shadow:inset 0 1px 2px rgba(0,0,20,.28),inset 0 0 0 .5px rgba(255,255,255,.14)}
#omHomeView .om-load-seg{height:100%;transition:width var(--motion-base,.3s) var(--ease-out,ease)}
#omHomeView .om-load-seg.od{background:linear-gradient(180deg,#ff9d84,#f5674a)}
#omHomeView .om-load-seg.soon{background:linear-gradient(180deg,#ffdf8f,#f2b53c)}
#omHomeView .om-load-seg.ok{background:linear-gradient(180deg,rgba(190,240,200,.9),rgba(120,210,150,.8))}
#omHomeView .om-load-legend{display:flex;gap:14px;flex-wrap:wrap}
#omHomeView .om-load-leg{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:inherit;opacity:.92}
#omHomeView .om-load-leg .dot{width:8px;height:8px;border-radius:2.5px;flex:0 0 auto}
#omHomeView .om-load-leg .dot.od{background:#f5674a}
#omHomeView .om-load-leg .dot.soon{background:#f2b53c}
#omHomeView .om-load-leg .dot.ok{background:rgba(150,225,175,.95)}
#omHomeView .om-load-leg b{font-variant-numeric:tabular-nums;font-weight:800}
/* 2-col grid */
#omHomeView .om-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:18px;align-items:start}
@media(max-width:1100px){#omHomeView .om-grid{grid-template-columns:1fr}}
#omHomeView .om-col{display:flex;flex-direction:column;gap:6px}
/* queue group head */
#omHomeView .q-head{display:flex;align-items:center;gap:9px;margin:14px 0 9px}
#omHomeView .q-head:first-child{margin-top:0}
#omHomeView .qh-ic{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-size:13px;flex:0 0 auto}
#omHomeView .qh-ic .ic{width:15px;height:15px}
#omHomeView .qh-t{font-size:14px;font-weight:800;letter-spacing:-.01em}
#omHomeView .qh-c{font-size:11px;font-weight:800;min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:grid;place-items:center}
#omHomeView .qh-act{margin-left:auto;font-size:12px;font-weight:700;color:var(--app-accent);cursor:pointer;background:0;border:0;padding:0}
#omHomeView .qh-act:hover{text-decoration:underline}
/* dense task rows — tone via tinted check medallion (NO edge-strip) */
#omHomeView .trow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:14px;align-items:center;padding:7px 14px;border-radius:12px;background:var(--card-bg);box-shadow:var(--bevel-top),var(--shadow-e1);border:.5px solid rgba(0,0,0,.05);margin-bottom:5px;position:relative;cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
/* V133/pass-3 — Contacts-style 3-panel layout: glass rail | glass main | glass detail */
#omHomeView .om-court{display:flex;gap:12px;align-items:start;margin-bottom:18px}
#omHomeView .om-rail{width:230px;flex:0 0 230px;padding:14px 12px;background:var(--lg-bg);backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract);border-radius:var(--radius-lg);box-shadow:var(--lg-edge),var(--shadow-e2);border:.5px solid var(--chrome-border);display:flex;flex-direction:column;gap:6px}
#omHomeView .om-main{flex:1;min-width:0;padding:16px;background:var(--lg-bg);backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract);border-radius:var(--radius-lg);box-shadow:var(--lg-edge),var(--shadow-e2);border:.5px solid var(--chrome-border)}
#omHomeView .om-detail{width:440px;flex:0 0 440px;padding:14px;background:var(--lg-bg);backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract);border-radius:var(--radius-lg);box-shadow:var(--lg-edge),var(--shadow-e2);border:.5px solid var(--chrome-border)}
/* reduced-transparency accessibility fallback — solid surface, no blur */
@media (prefers-reduced-transparency:reduce){#omHomeView .om-rail,#omHomeView .om-main,#omHomeView .om-detail{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
/* rail */
#omHomeView .om-rail-cap{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);padding:6px 8px 2px}
#omHomeView .om-rail-group{display:flex;flex-direction:column;gap:3px;margin-bottom:6px}
#omHomeView .om-rail-item{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:none;background:transparent;border-radius:10px;font-family:inherit;font-size:13px;font-weight:600;color:var(--text-secondary);cursor:pointer;text-align:left;transition:background var(--motion-fast)}
#omHomeView .om-rail-item .ic{width:15px;height:15px;flex:0 0 auto;color:var(--text-muted)}
#omHomeView .om-rail-item:hover{background:color-mix(in srgb,var(--app-accent) 6%,transparent)}
#omHomeView .om-rail-item.on{background:var(--card-bg);box-shadow:var(--shadow-e1);color:var(--text-primary)}
#omHomeView .om-rail-item.on .ic{color:var(--text-primary)}
/* My Work rail-item count + main sub + sub-tabs (folded-in 2026-06-26) */
#omHomeView .om-rail-n{margin-left:auto;flex:0 0 auto;font-size:10.5px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 15%,transparent);padding:1px 7px;border-radius:999px}
#omHomeView .om-rail-item.on .om-rail-n{color:var(--app-accent)}
#omHomeView .om-main-sub{display:block;font-size:12px;font-weight:600;color:var(--text-secondary);margin-top:3px}
#omHomeView .om-mine-tabs{display:flex;gap:8px;margin-bottom:13px}
#omHomeView .om-mine-tab{appearance:none;border:.5px solid var(--chrome-border);background:var(--surface-2);color:var(--text-secondary);font-family:inherit;font-size:12.5px;font-weight:700;padding:7px 14px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:background var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast)}
#omHomeView .om-mine-tab:active{transform:scale(.96)}
#omHomeView .om-mine-tab.on{background:var(--app-accent);color:var(--on-accent,#fff);border-color:transparent;box-shadow:var(--shadow-e1)}
#omHomeView .om-mine-n{font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 8%,transparent)}
#omHomeView .om-mine-tab.on .om-mine-n{background:rgba(255,255,255,.24)}
#omHomeView .om-rail-q{justify-content:space-between}
#omHomeView .orq-l{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#omHomeView .orq-c{flex:0 0 auto;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text-muted);background:var(--surface-2);padding:1px 8px;border-radius:999px}
#omHomeView .orq-c.on{color:var(--color-error,#c0392b);background:var(--color-error-bg,color-mix(in srgb,#c0392b 12%,transparent))}
/* main */
#omHomeView .om-main-head{margin-bottom:12px;padding:0 2px}
#omHomeView .om-detail .om-panel{margin-bottom:12px}
#omHomeView .om-detail .om-panel:last-child{margin-bottom:0}
/* 2026-07-02 📘 — Hub "all clear" state → a quick-start launcher (fills the center purposefully + invites
   action) instead of dead space. */
.om-allclear{text-align:center;padding:34px 22px 30px}
.om-ac-ico{width:38px;height:38px;color:var(--color-success)}
.om-ac-title{font-size:16px;font-weight:800;letter-spacing:-.01em;margin-top:10px}
.om-ac-sub{font-size:12.5px;color:var(--text-secondary);font-weight:600;margin-top:4px}
.om-ac-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px}
.om-ac-btn{display:flex;flex-direction:column;align-items:center;gap:7px;width:96px;padding:14px 8px;border:0.5px solid color-mix(in srgb,var(--text-primary) 9%,transparent);border-radius:14px;background:var(--card-bg);cursor:pointer;transition:transform var(--motion-fast,.15s) var(--ease-spring,ease),box-shadow var(--motion-fast,.15s),border-color var(--motion-fast,.15s)}
.om-ac-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-e2,0 6px 18px -8px rgba(16,24,40,.28));border-color:color-mix(in srgb,var(--app-accent) 32%,transparent)}
.om-ac-btn:active{transform:translateY(0)}
.om-ac-btn svg{width:20px;height:20px;color:var(--app-accent)}
.om-ac-btn span{font-size:11.5px;font-weight:700;color:var(--text-secondary)}
/* 2026-07-02 📘 — Hub mini-widgets (calendar / to-do / quick-notes peeks that link to the full section). */
#omHomeView .hub-widgets{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
#omHomeView .hub-widget .om-zone-head{display:flex;align-items:center;justify-content:space-between}
#omHomeView .hub-widget .om-zone-head h3{display:flex;align-items:center;gap:7px}
.hub-w-ico{width:14px;height:14px;color:var(--app-accent);flex:0 0 auto}
.hub-w-open{display:inline-flex;align-items:center;gap:2px;border:0;background:transparent;color:var(--app-accent);font-size:11.5px;font-weight:700;cursor:pointer;padding:2px 4px;border-radius:7px;transition:background var(--motion-fast,.15s)}
.hub-w-open:hover{background:color-mix(in srgb,var(--app-accent) 10%,transparent)}
.hub-w-open svg{width:12px;height:12px}
.hub-w-body{display:flex;flex-direction:column;gap:1px}
.hub-w-loading,.hub-w-empty{font-size:12px;color:var(--text-muted);padding:6px 2px}
/* 2026-07-02 📘 — crafted peek-widget empty state (icon + invite + quiet CTA) */
.hub-w-blank{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;padding:16px 10px 12px}
.hub-w-blank-ico{width:26px;height:26px;color:color-mix(in srgb,var(--app-accent) 55%,var(--text-muted));opacity:.85}
.hub-w-blank-msg{font-size:12px;font-weight:600;color:var(--text-secondary);line-height:1.35;max-width:200px}
.hub-w-blank-cta{display:inline-flex;align-items:center;gap:2px;border:0;background:color-mix(in srgb,var(--app-accent) 9%,transparent);color:var(--app-accent);font-family:inherit;font-size:11.5px;font-weight:700;padding:4px 10px 4px 12px;border-radius:999px;cursor:pointer;margin-top:1px;transition:background var(--motion-fast,.15s),transform var(--motion-fast,.15s) var(--ease-spring,ease)}
.hub-w-blank-cta:hover{background:color-mix(in srgb,var(--app-accent) 16%,transparent);transform:translateY(-1px)}
.hub-w-blank-cta:active{transform:translateY(0)}
.hub-w-blank-cta svg{width:12px;height:12px}
/* ── 🏮 Workforce Hub section (2026-07-11) — portfolio home over the per-project Time Clock. Full-width
   section below the in-court board: 3 raised .om-panel cards (on-clock · approvals · roster) on a grid
   that collapses on iPad/iPhone. Reuses the Hub token vocabulary; no colored edge-strips; rounded hovers. */
/* Workforce lives INSIDE .om-main, under the in-court work — it fills the center (no stranded footer
   band) and reads as the next zone down. A hairline top rule + spacing separates it from the queues. */
#omHomeView .hub-workforce{margin-top:18px;padding-top:16px;border-top:.5px solid var(--chrome-border)}
#omHomeView .hub-wf-head{margin-bottom:12px}
#omHomeView .hub-wf-head .hub-wf-sub{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--text-muted)}
/* auto-fit on the CONTAINER width (not viewport) — inside the narrower main column the three panels
   drop to two, then one, on their own; no viewport media query can know the column's real width. */
#omHomeView .hub-wf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;align-items:start}
.hub-wf-panel{min-height:0}
.hub-wf-n{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 6px;margin-left:5px;border-radius:999px;font-size:10.5px;font-weight:800;font-variant-numeric:tabular-nums;background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent);vertical-align:middle}
.hub-wf-n.warn{background:var(--color-warning-bg,#fdf0d5);color:var(--color-warning,#9a6212)}
.hub-wf-rows{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.hub-wf-row{display:flex;align-items:center;gap:10px;padding:8px 8px;border-radius:11px;transition:background var(--motion-fast,.15s)}
.hub-wf-row:hover{background:color-mix(in srgb,var(--text-primary) 4%,transparent)}
.hub-wf-row.compact{padding:6px 8px}
.hub-wf-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--text-muted);position:relative;box-shadow:inset 0 1px 1px rgba(255,255,255,.5),inset 0 -1px 2px rgba(0,0,0,.22),0 1px 2px rgba(0,0,20,.2)}
.hub-wf-dot::before{content:"";position:absolute;top:1.3px;left:1.8px;width:3px;height:2.6px;border-radius:50%;background:rgba(255,255,255,.68)}
.hub-wf-dot.on{background:#34c759;box-shadow:inset 0 1px 1px rgba(255,255,255,.55),inset 0 -1px 2px rgba(0,0,0,.2),0 0 0 3px color-mix(in srgb,#34c759 22%,transparent)}
.hub-wf-main{flex:1 1 auto;min-width:0}
.hub-wf-t{font-size:13px;font-weight:700;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:6px}
.hub-wf-m{font-size:11.5px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.hub-wf-hrs{font-size:11px;font-weight:800;color:var(--app-accent);font-variant-numeric:tabular-nums}
.hub-wf-cc{font-weight:600;color:var(--text-secondary)}
.hub-wf-right{text-align:right;flex:0 0 auto}
.hub-wf-el{font-size:12.5px;font-weight:800;color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1.1}
.hub-wf-since{font-size:10.5px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.hub-wf-tag{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;padding:1px 6px;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-secondary)}
.hub-wf-tag.warn{background:var(--color-warning-bg,#fdf0d5);color:var(--color-warning,#9a6212)}
.hub-wf-appr .hub-wf-main{cursor:pointer;border-radius:8px}
.hub-wf-acts{display:flex;align-items:center;gap:5px;flex:0 0 auto}
.hub-wf-btn{display:inline-flex;align-items:center;gap:4px;border:0;font-family:inherit;font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px;cursor:pointer;transition:background var(--motion-fast,.15s),transform var(--motion-fast,.15s) var(--ease-spring,ease),opacity var(--motion-fast,.15s)}
.hub-wf-btn svg{width:12px;height:12px}
.hub-wf-btn.ok{background:color-mix(in srgb,#34c759 15%,transparent);color:#1d8a3f}
.hub-wf-btn.ok:hover{background:color-mix(in srgb,#34c759 24%,transparent);transform:translateY(-1px)}
.hub-wf-btn.no{background:color-mix(in srgb,var(--color-error,#c0392b) 11%,transparent);color:var(--color-error,#c0392b);padding:5px 9px}
.hub-wf-btn.no:hover{background:color-mix(in srgb,var(--color-error,#c0392b) 20%,transparent);transform:translateY(-1px)}
.hub-wf-btn:active{transform:translateY(0)}
.hub-wf-btn.busy{opacity:.5;pointer-events:none}
.hub-wf-crews{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 8px}
.hub-wf-crew{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--text-secondary);padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 6%,transparent)}
.hub-wf-crew.more{color:var(--text-muted)}
.hub-wf-crew-n{display:inline-grid;place-items:center;min-width:15px;height:15px;padding:0 4px;border-radius:999px;font-size:9.5px;font-weight:800;background:color-mix(in srgb,var(--app-accent) 16%,transparent);color:var(--app-accent)}
.hub-wf-more{font-size:11px;font-weight:600;color:var(--text-muted);padding:5px 8px}
/* calendar rows */
.hub-cal-row{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;padding:6px 4px;border-radius:8px;cursor:pointer;transition:background var(--motion-fast,.15s)}
.hub-cal-row:hover{background:color-mix(in srgb,var(--text-primary) 4%,transparent)}
.hub-cal-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;position:relative;box-shadow:inset 0 1px 1px rgba(255,255,255,.5),inset 0 -1px 2px rgba(0,0,0,.22),0 1px 2px rgba(0,0,20,.2)}
.hub-cal-dot::before{content:"";position:absolute;top:1.3px;left:1.8px;width:3px;height:2.6px;border-radius:50%;background:rgba(255,255,255,.68)}
.hub-cal-title{font-size:12.5px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-cal-when{font-size:11px;color:var(--text-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.hub-cal-when.is-today{color:var(--app-accent);font-weight:700}
/* todo rows */
.hub-todo-row{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;padding:6px 4px;border-radius:8px}
.hub-todo-row:hover{background:color-mix(in srgb,var(--text-primary) 4%,transparent)}
.hub-todo-check{width:15px;height:15px;flex:0 0 auto;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--text-primary) 32%,transparent);background:transparent;cursor:pointer;padding:0;transition:border-color var(--motion-fast,.15s),background var(--motion-fast,.15s)}
.hub-todo-check:hover{border-color:var(--color-success);background:color-mix(in srgb,var(--color-success) 18%,transparent)}
.hub-todo-text{font-size:12.5px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-todo-text.od{color:var(--color-error)}
.hub-todo-flag{color:var(--color-warning,#d08700);margin-right:5px;font-size:9px;vertical-align:1px}
.hub-todo-due{font-size:11px;color:var(--text-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.hub-todo-due.od{color:var(--color-error);font-weight:700}
/* note rows */
.hub-note-row{padding:7px 4px;border-radius:8px;cursor:pointer;transition:background var(--motion-fast,.15s)}
.hub-note-row:hover{background:color-mix(in srgb,var(--text-primary) 4%,transparent)}
.hub-note-title{font-size:12.5px;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-note-snip{font-size:11.5px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
/* queue sections = solid-white raised cards inside the glass main panel */
#omHomeView .om-queue-panel{padding:14px 16px 8px;transition:box-shadow var(--motion-base)}
/* Jump-to-queue highlight = a brief BLOOM that fades on its own (was a static ring that never cleared,
   so it stuck on the panel forever — 2026-06-26 fix). Animation-based, like .pfv-drill-flash. */
#omHomeView .om-queue-panel.om-flash,#omHomeView .om-detail .om-panel.om-flash{animation:omQueueFlash 1.1s var(--ease-out)}
@keyframes omQueueFlash{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--app-accent) 55%,transparent),var(--shadow-e2)}40%{box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 42%,transparent),var(--shadow-e2)}100%{box-shadow:0 0 0 0 transparent,var(--shadow-e2)}}
@media (prefers-reduced-motion:reduce){#omHomeView .om-queue-panel.om-flash,#omHomeView .om-detail .om-panel.om-flash{animation:none}}
/* a queue item's project chip becomes a quiet full-page door (the row body opens the quick-look) */
#omHomeView .pjchip-link{cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
#omHomeView .pjchip-link:hover{background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent)}
#omHomeView .pjchip-link:focus-visible{outline:none;box-shadow:0 0 0 2.5px color-mix(in srgb,var(--app-accent) 35%,transparent)}
/* ===== Quick-look (2026-06-26) — a clicked queue item's overview, in the center panel ===== */
#omHomeView .om-quicklook{display:flex;flex-direction:column;gap:12px;animation:omqIn var(--motion-base) var(--ease-out)}
@keyframes omqIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#omHomeView .om-quicklook{animation:none}}
#omHomeView .omq-back{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;color:var(--text-secondary);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;padding:6px 10px;margin-left:-6px;border-radius:10px;transition:background var(--motion-fast),color var(--motion-fast)}
#omHomeView .omq-back .ic{width:15px;height:15px}
#omHomeView .omq-back:hover{background:color-mix(in srgb,var(--app-accent) 8%,transparent);color:var(--app-accent)}
#omHomeView .omq-card{padding:0;overflow:hidden}
/* status hero — tone via a tinted icon medallion + a faint top wash (legible, not a full color slab) */
#omHomeView .omq-hero{display:flex;align-items:flex-start;gap:14px;padding:20px 22px;border-bottom:.5px solid var(--chrome-border)}
#omHomeView .omq-hero-ic{flex:0 0 44px;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--app-accent) 13%,var(--card-bg));color:var(--app-accent)}
#omHomeView .omq-hero.omq-err .omq-hero-ic{background:color-mix(in srgb,var(--color-error) 14%,var(--card-bg));color:var(--color-error)}
#omHomeView .omq-hero.omq-warn .omq-hero-ic{background:color-mix(in srgb,var(--color-warning) 16%,var(--card-bg));color:color-mix(in srgb,var(--color-warning) 70%,#5a3800)}
#omHomeView .omq-hero-ic .ic{width:21px;height:21px}
#omHomeView .omq-hero-b{flex:1;min-width:0}
#omHomeView .omq-kicker{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
#omHomeView .omq-title{font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary);margin:3px 0 8px;line-height:1.25;overflow-wrap:anywhere}
#omHomeView .omq-badges{display:flex;flex-wrap:wrap;gap:7px}
#omHomeView .omq-status{font-size:11.5px;font-weight:800;padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--text-muted) 16%,transparent);color:var(--text-secondary)}
#omHomeView .omq-status.err{background:color-mix(in srgb,var(--color-error) 14%,transparent);color:var(--color-error)}
#omHomeView .omq-status.warn{background:color-mix(in srgb,var(--color-warning) 18%,transparent);color:color-mix(in srgb,var(--color-warning) 68%,#5a3800)}
#omHomeView .omq-due{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--text-muted) 12%,transparent);color:var(--text-secondary)}
#omHomeView .omq-due.err{background:color-mix(in srgb,var(--color-error) 12%,transparent);color:var(--color-error)}
#omHomeView .omq-due.warn{background:color-mix(in srgb,var(--color-warning) 16%,transparent);color:color-mix(in srgb,var(--color-warning) 68%,#5a3800)}
/* facts — clean labeled rows */
#omHomeView .omq-facts{padding:8px 22px}
#omHomeView .omq-fact{display:flex;align-items:baseline;gap:14px;padding:9px 0;border-bottom:.5px solid var(--chrome-border)}
#omHomeView .omq-fact:last-child{border-bottom:0}
#omHomeView .omq-fl{flex:0 0 110px;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--text-muted)}
#omHomeView .omq-fv{flex:1;min-width:0;font-size:14px;font-weight:600;color:var(--text-primary);overflow-wrap:anywhere}
/* actions — inline contextual buttons on the left, the full-page door on the right */
#omHomeView .omq-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:14px 22px 18px;border-top:.5px solid var(--chrome-border)}
#omHomeView .omq-spacer{flex:1}
#omHomeView .omq-act,#omHomeView .omq-full{display:inline-flex;align-items:center;gap:6px}
@media (max-width:560px){#omHomeView .omq-actions{flex-direction:column;align-items:stretch}#omHomeView .omq-spacer{display:none}#omHomeView .omq-fl{flex-basis:84px}}
/* responsive — collapse to stacked single column on narrow widths */
@media (max-width:1100px){#omHomeView .om-court{flex-direction:column}#omHomeView .om-rail{width:auto;flex:none;flex-direction:row;flex-wrap:wrap}#omHomeView .om-rail-group{flex-direction:row;flex-wrap:wrap}#omHomeView .om-detail{width:auto;flex:none;max-width:100%}
  /* In the stacked column, the main panel must not grow to its content's max-content width — cap it to
     the column so wide children (the ball-in-court board) stay inside the viewport on tablet/phone. */
  #omHomeView .om-main{width:100%;max-width:100%}}
#omHomeView .om-queue-rows{display:flex;flex-direction:column;align-items:stretch}
#omHomeView .om-queue-rows .trow{width:100%}
/* ===== Ball-in-court board (2026-06-26) — collapse-and-drill, mobile-first. Lives in OM Home. ===== */
#omHomeView .om-ballcourt{display:flex;flex-direction:column;gap:14px;min-width:0}
/* compact stat strip — fluid chips that WRAP (never a fixed-min grid → sizes down to phones) */
#omHomeView .bcq-stats{display:flex;flex-wrap:wrap;gap:8px}
/* 2026-07-02 📘 — ball-in-court INSIGHTS (command-center analytics: SLA bar, aging histogram, bottleneck). */
.bci-wrap{display:flex;flex-direction:column;gap:16px;margin-top:12px}
.bci-block{background:var(--card-bg);border:0.5px solid color-mix(in srgb,var(--text-primary) 9%,transparent);border-radius:14px;padding:14px 16px}
.bci-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--text-secondary);margin-bottom:11px;display:flex;align-items:baseline;gap:8px}
.bci-hsub{font-weight:500;text-transform:none;letter-spacing:0;color:var(--text-muted);font-size:11px}
.bci-slabar{display:flex;height:12px;border-radius:999px;overflow:hidden;background:color-mix(in srgb,var(--text-primary) 8%,transparent);margin-bottom:9px}
.bci-slaseg{display:block}
.bci-slaseg.err{background:var(--color-error)}.bci-slaseg.warn{background:var(--color-warning,#d08700)}.bci-slaseg.ok{background:var(--color-success)}.bci-slaseg.muted{background:var(--text-muted)}
.bci-slaleg{display:flex;flex-wrap:wrap;gap:12px;font-size:11.5px;font-weight:600}
.bci-leg{display:inline-flex;align-items:center;gap:5px;color:var(--text-secondary)}
.bci-leg::before{content:'';width:8px;height:8px;border-radius:50%}
.bci-leg.err::before{background:var(--color-error)}.bci-leg.warn::before{background:var(--color-warning,#d08700)}.bci-leg.ok::before{background:var(--color-success)}.bci-leg.muted::before{background:var(--text-muted)}
.bci-aging{display:flex;flex-direction:column;gap:7px}
.bci-age-row{display:grid;grid-template-columns:78px 1fr auto;gap:10px;align-items:center;font-size:12px}
.bci-age-lbl{color:var(--text-secondary);white-space:nowrap}
.bci-age-track{height:8px;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 8%,transparent);overflow:hidden}
.bci-age-fill{display:block;height:100%;border-radius:999px;background:var(--app-accent);transition:width var(--motion-base,.22s) var(--ease-out,ease)}
.bci-age-row.crit .bci-age-fill{background:var(--color-error)}
.bci-age-n{font-weight:800;font-variant-numeric:tabular-nums;color:var(--text-primary);min-width:22px;text-align:right}
.bci-bn{display:flex;flex-direction:column;gap:9px}
.bci-bn-row{display:grid;grid-template-columns:auto auto 1fr auto;gap:11px;align-items:center}
.bci-bn-rank{width:18px;text-align:center;font-weight:800;font-size:11px;color:var(--text-muted)}
.bci-bn-av{width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--app-accent) 16%,var(--card-bg));color:var(--app-accent);font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.bci-bn-main{min-width:0}
.bci-bn-name{font-size:13px;font-weight:650;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bci-bn-meta{font-size:11px;color:var(--text-muted);margin:1px 0 4px}
.bci-bn-track{display:block;height:6px;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 8%,transparent);overflow:hidden}
.bci-bn-fill{display:block;height:100%;border-radius:999px;background:var(--color-error)}
.bci-bn-days{font-weight:800;font-variant-numeric:tabular-nums;color:var(--color-error);font-size:12.5px}
.bci-kinds{display:flex;flex-wrap:wrap;gap:8px}
.bci-kind-chip{font-size:12px;color:var(--text-secondary);background:color-mix(in srgb,var(--text-primary) 5%,transparent);border-radius:999px;padding:4px 12px}
.bci-kind-chip b{color:var(--text-primary);font-weight:800}
.bci-empty{font-size:12.5px;color:var(--color-success);font-weight:600;padding:4px 0}
#omHomeView .bcq-stat{flex:1 1 auto;min-width:96px;display:flex;flex-direction:column;gap:1px;padding:10px 14px;border-radius:13px;background:var(--card-bg);box-shadow:var(--lg-edge),var(--shadow-e1);border:.5px solid var(--chrome-border)}
#omHomeView .bcq-stat-v{font-size:21px;font-weight:800;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
#omHomeView .bcq-stat-l{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--text-muted)}
#omHomeView .bcq-stat.is-err{background:color-mix(in srgb,var(--color-error) 8%,var(--card-bg));border-color:color-mix(in srgb,var(--color-error) 24%,transparent)}
#omHomeView .bcq-stat.is-err .bcq-stat-v{color:var(--color-error)}
#omHomeView .bcq-stat.is-warn{background:color-mix(in srgb,var(--color-warning) 10%,var(--card-bg));border-color:color-mix(in srgb,var(--color-warning) 26%,transparent)}
#omHomeView .bcq-stat.is-warn .bcq-stat-v{color:color-mix(in srgb,var(--color-warning) 66%,#5a3800)}
/* controls — wrap on narrow; segmented scope + breached + expand-all */
#omHomeView .bcq-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
#omHomeView .bcq-seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--surface-2);flex:0 0 auto}
#omHomeView .bcq-seg button{border:0;background:transparent;padding:6px 13px;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--text-secondary);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast)}
#omHomeView .bcq-seg button.on{background:var(--card-bg);color:var(--text-primary);box-shadow:var(--shadow-e1)}
#omHomeView .bcq-chip{display:inline-flex;align-items:center;gap:6px;border:.5px solid var(--chrome-border);background:var(--card-bg);padding:7px 13px;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--text-secondary);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast)}
#omHomeView .bcq-chip .ic{width:13px;height:13px}
#omHomeView .bcq-chip:hover{color:var(--text-primary);box-shadow:var(--shadow-e1)}
#omHomeView .bcq-chip.on{background:color-mix(in srgb,var(--color-error) 13%,var(--card-bg));color:var(--color-error);border-color:color-mix(in srgb,var(--color-error) 30%,transparent)}
#omHomeView .bcq-expand{margin-left:auto}
/* party cards — collapsed by default; tap the header to drill in */
#omHomeView .bcq-parties{display:flex;flex-direction:column;gap:9px}
#omHomeView .bcq-party{background:var(--card-bg);border-radius:14px;box-shadow:var(--lg-edge),var(--shadow-e1);border:.5px solid var(--chrome-border);overflow:hidden}
#omHomeView .bcq-party.has-overdue{border-color:color-mix(in srgb,var(--color-error) 24%,transparent)}
#omHomeView .bcq-phead{display:flex;align-items:center;gap:11px;width:100%;padding:12px 13px;border:0;background:transparent;cursor:pointer;text-align:left;font-family:inherit;transition:background var(--motion-fast)}
#omHomeView .bcq-phead:hover{background:color-mix(in srgb,var(--app-accent) 5%,transparent)}
#omHomeView .bcq-pav{flex:0 0 34px;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:12px;font-weight:800;background:color-mix(in srgb,var(--text-muted) 16%,transparent);color:var(--text-secondary)}
#omHomeView .bcq-pav.is-me{background:color-mix(in srgb,var(--app-accent) 18%,transparent);color:var(--app-accent)}
#omHomeView .bcq-pid{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#omHomeView .bcq-pname{font-size:14px;font-weight:750;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#omHomeView .bcq-youtag{font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 14%,transparent);padding:1px 6px;border-radius:999px;margin-left:5px;vertical-align:1px}
#omHomeView .bcq-pmeta{font-size:11.5px;font-weight:600;color:var(--text-muted)}
#omHomeView .bcq-tag{flex:0 0 auto;font-size:11px;font-weight:800;padding:4px 9px;border-radius:999px;white-space:nowrap}
#omHomeView .bcq-tag.err{background:color-mix(in srgb,var(--color-error) 13%,transparent);color:var(--color-error)}
#omHomeView .bcq-tag.warn{background:color-mix(in srgb,var(--color-warning) 16%,transparent);color:color-mix(in srgb,var(--color-warning) 66%,#5a3800)}
#omHomeView .bcq-tag.ok{background:color-mix(in srgb,var(--color-success) 13%,transparent);color:var(--color-success)}
#omHomeView .bcq-chev{flex:0 0 auto;width:15px;height:15px;color:var(--text-muted);transition:transform var(--motion-base) var(--ease-out)}
#omHomeView .bcq-party.is-open .bcq-chev{transform:rotate(90deg)}
#omHomeView .bcq-rows{display:flex;flex-direction:column;padding:2px 8px 9px;border-top:.5px solid var(--chrome-border)}
/* the shared row renderer puts the party label on the right — redundant here (it's in the card header)
   AND it's the main width-overflow culprit on phones. Hide it; keep the SLA pill, which is the useful bit. */
#omHomeView .om-ballcourt .cmp-ib-row{min-width:0}
/* 2026-07-02 📘 — act-from-inbox: an inline actions button + popover menu on each Hub BIC row so the
   board is triageable in place (nudge / hand off / resolve) instead of drill-only. */
.hub-ib-act{flex:0 0 auto;width:26px;height:26px;border-radius:8px;border:0;background:transparent;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.55;transition:opacity var(--motion-fast,.15s),background var(--motion-fast,.15s),color var(--motion-fast,.15s)}
.cmp-ib-row:hover .hub-ib-act{opacity:1}
.hub-ib-act:hover{background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-primary)}
.hub-ib-act svg{width:15px;height:15px}
.hub-ib-menu{position:fixed;z-index:var(--z-toast,9999);min-width:170px;background:var(--card-bg);border:0.5px solid var(--chrome-border,var(--border));border-radius:12px;box-shadow:var(--shadow-e3,0 8px 30px rgba(0,0,0,.24));padding:5px;display:flex;flex-direction:column;gap:1px}
.hub-ib-menu button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;background:transparent;padding:8px 11px;border-radius:8px;font-size:12.5px;font-weight:500;color:var(--text-primary);cursor:pointer;transition:background var(--motion-fast,.15s)}
.hub-ib-menu button:hover{background:color-mix(in srgb,var(--app-accent) 10%,transparent)}
.hub-ib-menu button svg{width:13px;height:13px;color:var(--text-secondary);flex:0 0 auto}
#omHomeView .om-ballcourt .cmp-ib-party{display:none}
#omHomeView .om-ballcourt .cmp-ib-right{flex:0 0 auto;min-width:0}
#omHomeView .om-ballcourt .cmp-ib-title{overflow-wrap:anywhere}
@media (max-width:560px){
  #omHomeView .bcq-stat{flex:1 1 calc(50% - 4px);min-width:0}  /* 2×2 on phones */
  #omHomeView .bcq-expand{margin-left:0}
  #omHomeView .om-ballcourt .cmp-ib-row{flex-wrap:wrap;gap:6px}
  #omHomeView .om-ballcourt .cmp-ib-right{width:100%;justify-content:flex-start}
}
#omHomeView .om-queue-rows .trow{background:transparent;box-shadow:none;border:none;border-radius:9px;margin-bottom:0;padding:8px 10px}
#omHomeView .om-queue-rows .trow+.trow{border-top:.5px solid color-mix(in srgb,var(--text-primary) 7%,transparent)}
#omHomeView .om-queue-rows .trow:hover{background:color-mix(in srgb,var(--app-accent) 5%,transparent)}
#omHomeView .om-queue-rows .trow:hover .tr-acts{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--app-accent) 5%,var(--card-bg)) 22%)}
#omHomeView .trow:hover{transform:translateX(2px);box-shadow:var(--shadow-e2)}
#omHomeView .trow.err{--tc:var(--color-error)}
#omHomeView .trow.warn{--tc:var(--color-warning)}
#omHomeView .trow.info{--tc:var(--color-info)}
/* 2026-07-02 📘 — status medallion → Atira ORB: a lit sphere in the row's tone (--tc). The orb
   language now runs across the Hub (task tone · grouped-count · rail radar dots) as one connective
   system. Recipe mirrors .rt-orb-surface but tone-parameterized. */
#omHomeView .tr-check{width:16px;height:16px;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 34% 26%,color-mix(in srgb,var(--tc,var(--border-strong)) 30%,#fff),var(--tc,var(--border-strong)) 64%,color-mix(in srgb,var(--tc,var(--border-strong)) 74%,#000) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 2px color-mix(in srgb,#000 22%,transparent),0 1px 3px color-mix(in srgb,var(--tc,var(--border-strong)) 40%,transparent),0 0 0 .5px color-mix(in srgb,var(--tc,var(--border-strong)) 26%,transparent)}
/* 2026-07-02 📘 — grouped recurring-task rows (identical task text across projects → one parent + expandable kids) */
#omHomeView .trow.om-grp{align-items:center}
/* grouped-count medallion = a slightly larger tone orb with a "stacked" offset shadow + white count */
#omHomeView .om-grp-stack{width:20px;height:20px;position:relative;display:grid;place-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 2px color-mix(in srgb,#000 22%,transparent),0 1px 3px color-mix(in srgb,var(--tc) 40%,transparent),0 0 0 .5px color-mix(in srgb,var(--tc) 26%,transparent),2px -2px 0 -1px color-mix(in srgb,var(--tc) 26%,var(--card-bg)),3.5px -3.5px 0 -1px color-mix(in srgb,var(--tc) 14%,var(--card-bg))}
#omHomeView .om-grp-n{font-size:10px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;line-height:1;text-shadow:0 1px 1px color-mix(in srgb,#000 30%,transparent);position:relative;z-index:1}
#omHomeView .om-grp-across{color:var(--text-muted)}
#omHomeView .om-grp-across::before{content:"·";margin-right:8px;opacity:.6}
#omHomeView .om-grp-chev{width:15px;height:15px;color:var(--text-muted);transition:transform var(--motion-fast,.15s) var(--ease-spring,ease)}
#omHomeView .trow.om-grp.is-open .om-grp-chev{transform:rotate(180deg);color:var(--app-accent)}
#omHomeView .trow.om-grp.is-open{background:color-mix(in srgb,var(--app-accent) 4%,transparent)}
#omHomeView .om-grp-kids{padding:2px 0 6px 26px;position:relative}
#omHomeView .om-grp-kids::before{content:"";position:absolute;left:19px;top:0;bottom:8px;width:1.5px;border-radius:2px;background:color-mix(in srgb,var(--app-accent) 22%,transparent)}
#omHomeView .om-grp-kids .trow{padding:6px 10px}
#omHomeView .om-grp-kids .trow+.trow{border-top:none}
#omHomeView .om-grp-kid .tr-t{font-weight:600;color:var(--text-secondary)}
#omHomeView .tr-body{min-width:0;display:flex;align-items:baseline;gap:12px}
#omHomeView .tr-t{font-size:13px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0}
#omHomeView .tr-m{font-size:11px;color:var(--text-muted);font-weight:600;margin-top:0;display:flex;gap:8px;flex-wrap:nowrap;align-items:center;flex:0 0 auto;white-space:nowrap}
#omHomeView .tr-m .due-err{color:var(--color-error);font-weight:700}
#omHomeView .tr-m .due-warn{color:color-mix(in srgb,var(--color-warning) 62%,#5a3800);font-weight:700}
#omHomeView .tr-right{display:flex;align-items:center;gap:8px;justify-content:flex-end;min-width:0}
#omHomeView .tr-acts{position:absolute;top:50%;right:14px;transform:translateY(-50%);display:flex;align-items:center;gap:6px;background:linear-gradient(90deg,transparent,var(--card-bg) 22%);padding-left:24px;opacity:0;pointer-events:none;transition:opacity var(--motion-fast)}
#omHomeView .trow:hover .tr-acts,#omHomeView .trow:focus-within .tr-acts{opacity:1;pointer-events:auto}
#omHomeView .pjchip{font-size:10px;font-weight:800;letter-spacing:.02em;padding:3px 8px;border-radius:999px;background:var(--surface-2);color:var(--text-secondary);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* G3-P1 — inline row action ("Done" on overdue tasks). Quiet until row hover; rounded,
   accent-tinted, success-toned. Always visible on touch (no hover). */
#omHomeView .tr-act{appearance:none;border:.5px solid var(--chrome-border);background:var(--surface-2);color:var(--color-success,#2e8b5f);font-family:inherit;font-size:11px;font-weight:700;letter-spacing:-.05px;padding:5px 11px;border-radius:999px;cursor:pointer;flex:0 0 auto;transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
#omHomeView .tr-act:hover{background:color-mix(in srgb,var(--color-success,#2e8b5f) 14%,var(--surface-2))}
#omHomeView .tr-act:active{transform:scale(.94)}
#omHomeView .tr-act:disabled{opacity:.6;cursor:default}
@media (hover:none){#omHomeView .tr-act{opacity:1}}
@media (prefers-reduced-motion:reduce){#omHomeView .tr-act{transition:none}#omHomeView .tr-act:active{transform:none}}
/* Wave B — snooze defer menu (anchored, frosted). */
.om-snooze-menu{position:fixed;z-index:9400;display:flex;flex-direction:column;gap:2px;padding:5px;min-width:120px;background:var(--frost-bg-strong,color-mix(in srgb,var(--surface) 88%,transparent));backdrop-filter:var(--frost-blur,blur(20px) saturate(1.8));-webkit-backdrop-filter:var(--frost-blur,blur(20px) saturate(1.8));border:.5px solid var(--chrome-border);border-radius:12px;box-shadow:var(--shadow-e4);animation:pgPop var(--motion-fast) var(--ease-spring,ease-out)}
@media (prefers-reduced-transparency:reduce){.om-snooze-menu{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media (prefers-reduced-motion:reduce){.om-snooze-menu{animation:none}}
.om-snooze-opt{appearance:none;border:none;background:transparent;color:var(--text-primary);font-family:inherit;font-size:13px;font-weight:600;text-align:left;padding:8px 11px;border-radius:8px;cursor:pointer;transition:background var(--motion-fast)}
.om-snooze-opt:hover{background:color-mix(in srgb,var(--app-accent) 10%,transparent)}
/* Wave B — keyboard-triage focus ring on the active row (rounded, no hard corners). */
#omHomeView .trow.om-kb-focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 55%,transparent),var(--shadow-e2)}
/* Wave B — today's schedule rows (meetings + inspections) in the right column. */
#omHomeView .om-sched-row{display:flex;align-items:center;gap:9px;padding:8px 4px;cursor:pointer;border-radius:9px;transition:background var(--motion-fast)}
#omHomeView .om-sched-row:hover{background:color-mix(in srgb,var(--app-accent) 6%,transparent)}
#omHomeView .om-sched-pill{font-size:10px;font-weight:800;letter-spacing:.02em;padding:3px 8px;border-radius:999px;flex-shrink:0;text-transform:uppercase}
#omHomeView .om-sched-pill.meet{background:var(--type-selection-bg);color:var(--type-selection-fg)}
#omHomeView .om-sched-pill.insp{background:color-mix(in srgb,var(--color-info,#1e6fa8) 16%,transparent);color:var(--color-info,#1e6fa8)}
#omHomeView .om-sched-t{flex:1;min-width:0;font-size:12.5px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#omHomeView .om-sched-time{font-size:11.5px;font-weight:700;color:var(--text-secondary);flex-shrink:0;font-variant-numeric:tabular-nums}
#omHomeView .om-showmore{width:100%;justify-content:center;margin:2px 0 6px}
/* right-column authored panels */
/* pass-3 AUDIT FIX (root cause): color:--text-primary on the panel CARD → ALL its text children (trow/blk/radar titles) inherit card text instead of the matte's --on-app-bg (invisible on sepia). One rule for the whole panel. */
#omHomeView .om-panel{background:var(--card-bg);color:var(--text-primary);border-radius:18px;box-shadow:var(--bevel-top),var(--shadow-e2);border:.5px solid color-mix(in srgb,var(--app-accent) 4%,rgba(0,0,0,.05));padding:16px 18px;margin-bottom:16px}
#omHomeView .om-zone+.om-zone{margin-top:16px;padding-top:14px;border-top:.5px solid var(--chrome-border,rgba(0,0,0,.08))}
#omHomeView .om-zone-head{display:flex;align-items:center;gap:9px;margin-bottom:11px}
#omHomeView .om-zone-head h3{font-size:14px;font-weight:800;letter-spacing:-.01em;margin:0}
#omHomeView .om-zone-head .zh-c{margin-left:auto;font-size:11px;font-weight:800;min-width:20px;height:20px;padding:0 7px;border-radius:999px;display:grid;place-items:center;background:var(--color-error-bg);color:var(--color-error)}
/* blocker rows (tint, no edge-strip) */
#omHomeView .blk-row{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:12px;margin-bottom:8px;background:linear-gradient(110deg,color-mix(in srgb,var(--color-error) 7%,var(--card-bg)),var(--card-bg) 60%);box-shadow:var(--shadow-e1);border:.5px solid color-mix(in srgb,var(--color-error) 12%,rgba(0,0,0,.05))}
#omHomeView .blk-row:last-child{margin-bottom:0}
#omHomeView .blk-row .bi{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:15px;background:var(--color-error-bg);flex:0 0 auto}
#omHomeView .blk-body{flex:1;min-width:0}
#omHomeView .blk-t{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#omHomeView .blk-s{font-size:11px;color:var(--text-secondary);font-weight:600;margin-top:1px}
#omHomeView .blk-act{font-size:11px;font-weight:700;color:var(--app-accent);cursor:pointer;background:0;border:0;padding:5px 9px;border-radius:8px;flex:0 0 auto}
#omHomeView .blk-act:hover{background:color-mix(in srgb,var(--app-accent) 10%,transparent)}
/* radar mini-rows (due-today / weather / nudges) */
#omHomeView .om-radar-row{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:.5px solid var(--chrome-border,rgba(0,0,0,.06))}
#omHomeView .om-radar-row:last-child{border-bottom:0}
/* 2026-07-02 📘 — radar dots → mini Atira ORBs (specular highlight + soft glow) so the rail status
   markers share the orb language. Inline background = the tone; the highlight/glow ride on top. */
#omHomeView .om-radar-dot{width:10px;height:10px;border-radius:50%;flex:0 0 10px;margin-top:3px;position:relative;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.55),inset 0 -1px 2px rgba(0,0,0,.24),0 1px 3px rgba(0,0,20,.22)}
#omHomeView .om-radar-dot::before{content:"";position:absolute;top:1.5px;left:2px;width:3.5px;height:3px;border-radius:50%;background:rgba(255,255,255,.7);filter:blur(.3px)}
#omHomeView .om-radar-t{font-size:12.5px;font-weight:600;color:var(--text-primary);min-width:0;flex:1;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#omHomeView .om-radar-n{margin-left:auto;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;flex:0 0 auto}
#omHomeView .om-zone-empty{font-size:12px;color:var(--text-muted);padding:6px 0}
@media(max-width:560px){#omHomeView .om-wrap{padding:16px 14px 32px}#omHomeView .omh-greet h2{font-size:30px}#omHomeView .omv{min-width:calc(50% - 5px)}}

/* ===== Accountant Home · Pass 2 (proto 20, 2026-06-05) — Finance Command Center =====
   Recompose of the thin OM-clone into a money-first command center. All classes
   are .acct-* prefixed + scoped under #acctHomeView so the proto's generic names
   (.door/.deck/.tile) never collide with the rest of the single-file SPA. Honest:
   AR-aging from a 2nd /api/reports/financial fetch; draws/MTD/ball-in-court (no
   backing) honest-replaced with real money-hub fields. NO edge-strips. */
#acctHomeView .acct-wrap{padding:22px 26px 40px;margin:0;display:grid;gap:18px}
@media(max-width:640px){#acctHomeView .acct-wrap{padding:16px 14px 34px;gap:14px}}
/* P2 — portfolio cost-code BvA surface + drill (shared .ccbva-* namespace; lives in acctHome) */
#acctHomeView .ccbva-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
/* P10 — Cost Insights radar */
#acctHomeView .ci-wrap{display:flex;flex-direction:column;gap:14px}
#acctHomeView .ci-pred-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:900px){#acctHomeView .ci-pred-tiles{grid-template-columns:repeat(2,1fr)}}
/* metric tiles — raised white cards w/ semantic accent (V133) */
#acctHomeView .ci-pt{position:relative;background:var(--card-bg);border-radius:14px;padding:14px 16px;box-shadow:var(--bevel-top),var(--shadow-e2);border:.5px solid var(--chrome-border);overflow:hidden}
#acctHomeView .ci-pt::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--ci-tone,var(--app-accent));opacity:.0}
#acctHomeView .ci-pt.ci-pt-bad{background:color-mix(in srgb,var(--color-error) 5%,var(--card-bg))}
#acctHomeView .ci-pt.ci-pt-warn{background:color-mix(in srgb,var(--color-warning,#b8860b) 6%,var(--card-bg))}
#acctHomeView .ci-pt-v{font-size:24px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.05}
#acctHomeView .ci-pt-v.ci-red{color:var(--color-error)} #acctHomeView .ci-pt-v.ci-amber{color:var(--color-warning,#b8860b)}
#acctHomeView .ci-pt-l{font-size:11px;font-weight:600;color:var(--text-muted);margin-top:4px;letter-spacing:.01em}
#acctHomeView .ci-worst{font-size:12.5px;color:var(--text-secondary);margin-top:2px;padding:0 2px}
#acctHomeView .ci-ask{display:flex;gap:8px;align-items:center}
#acctHomeView .ci-ask-in{flex:1}
#acctHomeView .ci-ask-off{font-size:11.5px;color:var(--text-muted);padding:8px 12px;background:color-mix(in srgb,var(--app-accent) 4%,var(--card-bg));border-radius:10px;border:.5px dashed var(--chrome-border)}
#acctHomeView .ci-answer{background:color-mix(in srgb,var(--app-accent) 8%,transparent);border-radius:10px;padding:10px 12px;font-size:13px;margin-top:8px;line-height:1.5}
#acctHomeView .ci-answer-load{opacity:.7}
#acctHomeView .ci-answer-note{font-size:10.5px;color:var(--text-muted);margin-top:5px}
#acctHomeView .ci-list{display:flex;flex-direction:column;gap:8px}
/* insight rows — raised cards w/ the $ amount surfaced on the right (kills dead space) */
#acctHomeView .ci-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;padding:12px 15px;border-radius:13px;background:var(--card-bg);box-shadow:var(--bevel-top),var(--shadow-e1);border:.5px solid var(--chrome-border);cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
#acctHomeView .ci-row:hover{transform:translateY(-1px);box-shadow:var(--bevel-top),var(--shadow-e3)}
#acctHomeView .ci-row-main{min-width:0}
#acctHomeView .ci-row-t{font-size:13px;font-weight:700;letter-spacing:-.01em}
#acctHomeView .ci-row-d{font-size:11.5px;color:var(--text-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#acctHomeView .ci-row-amt{flex:0 0 auto;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;text-align:right;white-space:nowrap}
#acctHomeView .ci-row-amt.ci-amt-bad{color:var(--color-error)}
#acctHomeView .ci-row-amt.ci-amt-warn{color:var(--color-warning,#b8860b)}
#acctHomeView .ci-sev{flex:0 0 auto;align-self:center;font-size:10px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;padding:3px 9px;border-radius:7px}
#acctHomeView .ci-sev-red{color:var(--color-error);background:color-mix(in srgb,var(--color-error) 14%,transparent)}
#acctHomeView .ci-sev-amber{color:var(--color-warning,#b8860b);background:color-mix(in srgb,var(--color-warning,#b8860b) 15%,transparent)}
#acctHomeView .ci-sev-info{color:var(--text-secondary);background:color-mix(in srgb,var(--text-primary) 7%,transparent)}
#acctHomeView .ccbva-seg{display:inline-flex;background:var(--surface-2);border-radius:var(--radius-pill);padding:3px;gap:2px}
#acctHomeView .ccbva-seg button{border:0;background:transparent;color:var(--text-secondary);font:inherit;font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:var(--radius-pill);cursor:pointer}
#acctHomeView .ccbva-seg button.on{background:var(--card-bg);color:var(--text-primary);box-shadow:var(--shadow-e1)}
.ccbva-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.ccbva-tbl th{text-align:left;color:var(--text-muted);font-weight:600;font-size:11px;padding:6px 8px;border-bottom:.5px solid var(--border);cursor:pointer;user-select:none}
.ccbva-tbl th.num,.ccbva-tbl td.num{text-align:right;font-variant-numeric:tabular-nums}
.ccbva-tbl td{padding:7px 8px;border-bottom:.5px solid var(--border)}
.ccbva-row{cursor:pointer;transition:background var(--motion-fast)}
.ccbva-row:hover{background:color-mix(in srgb,var(--app-accent) 6%,transparent)}
.ccbva-code code{font-size:11.5px;background:var(--surface-2);padding:1px 6px;border-radius:6px}
.ccbva-offlib{font-size:9.5px;font-weight:800;letter-spacing:.03em;color:var(--color-warning,#b8860b);margin-left:6px}
.ccbva-var-over{color:var(--color-error)}
.ccbva-var-under{color:var(--color-success)}
/* #20 — advisory "Received" column: deliberately muted so it reads as secondary delivery-proof info,
   never competing with the bold Spent figure. The em-dash placeholder is dimmer still (no receipts). */
.ccbva-received{color:var(--text-muted);font-weight:500}
.ccbva-received .ccbva-dash{color:var(--text-muted);opacity:.45}
.ccbva-chev{display:inline-block;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);opacity:.5;transition:transform var(--motion-base) var(--ease-out);margin-right:7px}
/* P5 — Code × Type matrix */
#acctHomeView .ccbva-metric-seg{margin:10px 0 4px}
.ccbva-tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ccbva-type-tbl{min-width:560px}
.ccbva-type-tbl th.ccbva-tcol{text-align:right;cursor:default}
.ccbva-trow-total,.ccbva-type-tbl tfoot td{font-weight:800}
.ccbva-tcell{cursor:pointer;border-radius:8px;transition:background var(--motion-fast)}
.ccbva-tcell:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
.ccbva-tcell-empty{color:var(--text-muted);opacity:.5}
.ccbva-tfoot td{border-top:.5px solid var(--border);border-bottom:0}
.ccbva-thint{margin-top:8px;font-size:11px;color:var(--text-muted)}
.ccbva-tdrill-job{margin:6px 0}
.ccbva-tdrill-jobname{font-size:11px;font-weight:700;color:var(--text-secondary);margin:4px 0 2px}
/* mobile: stack the matrix into a per-type list under each code (no horizontal scroll trap) */
@media (max-width:640px){
  .ccbva-type-tbl{min-width:0}
  .ccbva-type-tbl thead{display:none}
  .ccbva-type-tbl,.ccbva-type-tbl tbody,.ccbva-type-tbl tr{display:block;width:100%}
  .ccbva-type-tbl .ccbva-trow{display:flex;flex-wrap:wrap;gap:4px 10px;padding:8px 0;border-bottom:.5px solid var(--border)}
  .ccbva-type-tbl .ccbva-trow td{display:inline-flex;border:0;padding:1px 0}
  .ccbva-type-tbl .ccbva-trow .ccbva-code{flex:1 1 100%;font-weight:700}
  .ccbva-type-tbl .ccbva-tcell::before,.ccbva-type-tbl .ccbva-tcell-empty::before{content:attr(data-tlabel)' ';color:var(--text-muted);font-size:10px;margin-right:4px}
  .ccbva-type-tbl .ccbva-tcell-empty{display:none}
  .ccbva-type-tbl tfoot{display:block}
  .ccbva-type-tbl .ccbva-tfoot{display:flex;flex-wrap:wrap;gap:4px 10px}
  .ccbva-type-tbl .ccbva-tfoot td{display:inline-flex;border:0}
}
/* P6 — bonding WIP schedule */
.wip-sched-actions{margin-left:auto;display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.wip-basis-seg button{font-size:11px}
.wip-sched-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.wip-sched-tbl{min-width:920px}
.wip-sched-tbl th.num,.wip-sched-tbl td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.wip-row{cursor:pointer;transition:background var(--motion-fast)}
.wip-row.wip-over{background:color-mix(in srgb,var(--color-warning,#b8860b) 6%,transparent)}
.wip-row.wip-under{background:color-mix(in srgb,var(--color-success) 5%,transparent)}
.wip-row:hover{background:color-mix(in srgb,var(--app-accent) 6%,transparent)}
.wip-proj{font-weight:600}
.wip-tot td{font-weight:800;border-top:.5px solid var(--border)}
.wip-asset{color:var(--color-success)}
.wip-liab{color:var(--color-warning,#b8860b)}
.wip-flags{display:inline-flex;gap:4px;flex-wrap:wrap;margin-left:6px}
.wip-flag{font-size:9.5px;font-weight:700;padding:1px 6px;border-radius:5px;color:var(--color-error);background:color-mix(in srgb,var(--color-error) 12%,transparent)}
.wip-basis-note{color:var(--text-muted);font-weight:700}
@media (max-width:760px){
  .wip-sched-tbl{min-width:0}
  .wip-sched-tbl thead{display:none}
  .wip-sched-tbl,.wip-sched-tbl tbody,.wip-sched-tbl tr{display:block;width:100%}
  .wip-sched-tbl .wip-row,.wip-sched-tbl .wip-tot{display:flex;flex-wrap:wrap;gap:3px 12px;padding:9px 0;border-bottom:.5px solid var(--border)}
  .wip-sched-tbl .wip-row td,.wip-sched-tbl .wip-tot td{display:inline-flex;border:0;padding:0;font-size:12px}
  .wip-sched-tbl .wip-proj{flex:1 1 100%;font-size:13px}
  .wip-sched-tbl .wip-row td.num::before{content:attr(data-wl)' ';color:var(--text-muted);font-size:10px;margin-right:3px}
}
.ccbva-row.open .ccbva-chev{transform:rotate(45deg)}
.ccbva-drill{background:var(--surface-2);padding:0}
.ccbva-drill-inner{padding:8px 12px 12px 26px}
.ccbva-job{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:8px;cursor:pointer;font-size:12px}
.ccbva-job:hover{background:color-mix(in srgb,var(--app-accent) 7%,transparent)}
.ccbva-job-name{flex:1;min-width:0;font-weight:600}
.ccbva-srcgrp{margin:6px 0 2px;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
.ccbva-srcline{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:7px;font-size:11.5px}
.ccbva-srcline:hover{background:color-mix(in srgb,var(--app-accent) 7%,transparent)}
.ccbva-srcline-link{cursor:pointer}
.ccbva-srcline-desc{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-secondary)}
.ccbva-srcline-amt{font-variant-numeric:tabular-nums;font-weight:600}
/* 🐚 §7-C P3.2 — MISC direct-cost affordances (BvA detail add + source-line delete) */
.ccbva-srcline-misc .ccbva-srcline-del{flex-shrink:0;border:none;background:transparent;color:var(--text-tertiary);cursor:pointer;font-size:11px;line-height:1;padding:2px 4px;border-radius:6px;opacity:0;transition:opacity .12s,background .12s,color .12s}
.ccbva-srcline-misc:hover .ccbva-srcline-del{opacity:1}
.ccbva-srcline-del:hover{background:color-mix(in srgb,#ff3b30 14%,transparent);color:#ff3b30}
.bva-misc-add{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 2px}
.bva-misc-add-btn{font-size:12px;padding:5px 11px;border-radius:8px}
.bva-misc-add-hint{font-size:11px;color:var(--text-tertiary);flex:1;min-width:140px}
.ccbva-empty{color:var(--text-muted);font-size:12px;padding:14px 8px;text-align:center}
@media (max-width:640px){.ccbva-tbl th:nth-child(3),.ccbva-tbl td:nth-child(3){display:none}}
.fin-bva-clickable{cursor:pointer;border-radius:8px;transition:background var(--motion-fast)}
.fin-bva-clickable:hover{background:color-mix(in srgb,var(--app-accent) 6%,transparent)}
.fin-bva-drill{margin:2px 0 8px}
/* P3 — division→code hierarchy tree (portfolio cost-code surface) */
#acctHomeView .cctree-div{border-bottom:.5px solid var(--border)}
#acctHomeView .cctree-divhead{display:grid;grid-template-columns:1fr auto auto auto auto auto;gap:8px;align-items:center;padding:9px 8px;cursor:pointer;font-weight:700;transition:background var(--motion-fast)}
#acctHomeView .cctree-divhead:hover{background:color-mix(in srgb,var(--app-accent) 6%,transparent)}
#acctHomeView .cctree-divname{display:flex;align-items:center;gap:8px;min-width:0}
#acctHomeView .cctree-divno{font-size:11px;font-weight:800;color:var(--text-muted);background:var(--surface-2);padding:1px 7px;border-radius:6px}
#acctHomeView .cctree-caret{display:inline-block;width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);opacity:.55;transition:transform var(--motion-base) var(--ease-out)}
#acctHomeView .cctree-div.open .cctree-caret{transform:rotate(45deg)}
#acctHomeView .cctree-num{text-align:right;font-variant-numeric:tabular-nums;font-size:12.5px}
#acctHomeView .cctree-codes{display:none;padding:0 0 6px 8px}
#acctHomeView .cctree-div.open .cctree-codes{display:block}
@media (max-width:640px){#acctHomeView .cctree-divhead{grid-template-columns:1fr auto auto}#acctHomeView .cctree-num.hide-sm{display:none}}
/* money-forward hero — §6: theme-accent-driven (was a hardcoded green). --hero-tone defaults to the
   live theme accent; for a per-hero money-green identity later, set `--hero-tone:#1f6f4e` on this rule
   alone. Ink = --on-accent per theme (luminance-correct, incl. Lido Sun black-on-yellow). */
#acctHomeView .acct-hero{--hero-tone:var(--app-accent);position:relative;border-radius:24px;padding:24px 26px 22px;color:var(--hero-ink,var(--on-accent,#fff));overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--hero-tone) 86%,#000) 0%,var(--hero-tone) 58%,color-mix(in srgb,var(--hero-tone) 92%,#000) 100%);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,var(--shadow-e4,0 18px 50px -18px rgba(20,30,48,.45))}
#acctHomeView .acct-hero::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(130% 90% at 0% 0%,rgba(255,255,255,.20),transparent 52%)}
#acctHomeView .ah-row{position:relative;z-index:1;display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
#acctHomeView .ah-kicker{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.82}
#acctHomeView .acct-hero h2{font-size:30px;font-weight:800;letter-spacing:-.025em;margin:4px 0 6px}
#acctHomeView .ah-sub{font-size:13.5px;opacity:.9;font-weight:600;display:flex;gap:14px;flex-wrap:wrap}
#acctHomeView .ah-sub b{font-variant-numeric:tabular-nums}
#acctHomeView .ah-spacer{flex:1}
#acctHomeView .ah-cash{position:relative;z-index:1;text-align:right}
#acctHomeView .ah-cash .acl{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.78}
#acctHomeView .ah-cash .acv{font-size:32px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
#acctHomeView .ah-cash .acr{font-size:12px;font-weight:700;opacity:.9;margin-top:4px}
/* metric-door cash lanes */
/* 🐝 5 doors (added Sub-Exposure) — 5-col wide, 3-col iPad-landscape, 2-col narrow (balances cleanly). */
#acctHomeView .acct-doors{display:grid;gap:13px;grid-template-columns:repeat(5,1fr)}
@media(max-width:1100px){#acctHomeView .acct-doors{grid-template-columns:repeat(2,1fr)}}
/* iPad-landscape intermediate: 5-col cramps at 1101-1366 with the Money Hub dock open — 3-col tier (B11) */
@media (min-width:1101px) and (max-width:1366px){#acctHomeView .acct-doors{grid-template-columns:repeat(3,1fr)}}
#acctHomeView .acct-door{position:relative;border-radius:18px;padding:16px 17px;overflow:hidden;background:var(--surface-grad,linear-gradient(160deg,#fff,#f7f8fb));box-shadow:0 1px 0 rgba(255,255,255,.6) inset,var(--shadow-e2);border:.5px solid rgba(0,0,0,.05);cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast);text-align:left;font-family:inherit;width:100%;color:var(--text-primary)}
#acctHomeView .acct-door:hover{transform:translateY(-3px);box-shadow:var(--shadow-e3)}
#acctHomeView .acct-door:active{transform:translateY(-1px) scale(.99)}
#acctHomeView .acct-door .d-label{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
#acctHomeView .acct-door .d-value{font-size:28px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin:4px 0 2px;line-height:1}
#acctHomeView .acct-door .d-sub{font-size:11.5px;color:var(--text-secondary);font-weight:600}
#acctHomeView .acct-door .d-ico{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--surface-2);box-shadow:var(--shadow-e1)}
#acctHomeView .acct-door .d-ico svg{width:14px;height:14px;color:var(--text-secondary)}
#acctHomeView .acct-door.warn{background:linear-gradient(160deg,color-mix(in srgb,var(--color-warning) 16%,var(--card-bg)),var(--card-bg))}
#acctHomeView .acct-door.warn .d-value{color:var(--co-pending-fg,#b45309)}
#acctHomeView .acct-door.warn .d-ico svg{color:var(--color-warning)}
#acctHomeView .acct-door.bad{background:linear-gradient(160deg,color-mix(in srgb,var(--color-error) 13%,var(--card-bg)),var(--card-bg))}
#acctHomeView .acct-door.bad .d-value{color:var(--color-error)}
#acctHomeView .acct-door.bad .d-ico svg{color:var(--color-error)}
/* AR aging — the one authoritative AR module */
#acctHomeView .ar-hero{background:var(--card-bg);border-radius:18px;box-shadow:var(--bevel-top),var(--shadow-e2);overflow:hidden}
#acctHomeView .arh-head{display:flex;align-items:center;gap:12px;padding:18px 20px 6px;flex-wrap:wrap}
#acctHomeView .arh-head h3{font-size:16px;font-weight:800;letter-spacing:-.01em;margin:0;display:flex;align-items:center;gap:8px}
#acctHomeView .arh-head h3 svg{width:16px;height:16px;color:var(--text-secondary)}
#acctHomeView .arh-chip{font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--color-error) 12%,var(--card-bg));color:var(--color-error)}
#acctHomeView .arh-chip.ok{background:color-mix(in srgb,var(--color-success) 13%,var(--card-bg));color:var(--color-success)}
#acctHomeView .arh-total{margin-left:auto;text-align:right}
#acctHomeView .arh-total .v{font-size:23px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
#acctHomeView .arh-total .l{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}
#acctHomeView .agebar{display:flex;height:12px;margin:8px 20px 4px;border-radius:999px;overflow:hidden;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.06);background:var(--surface-2)}
#acctHomeView .agebar .seg{box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
#acctHomeView .age-legend{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--chrome-border);border-top:.5px solid var(--chrome-border);margin-top:12px}
@media (max-width:1200px){#acctHomeView .age-legend{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){#acctHomeView .age-legend{grid-template-columns:repeat(2,1fr)}}
#acctHomeView .age-cell{background:var(--card-bg);padding:14px 16px;cursor:pointer;transition:background var(--motion-fast);border:none;text-align:left;font-family:inherit;color:var(--text-primary)}
#acctHomeView .age-cell:hover{background:var(--hover-overlay,rgba(0,0,0,.025));border-radius:10px}
#acctHomeView .age-cell .ac-band{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary)}
#acctHomeView .age-cell .ac-dot{width:9px;height:9px;border-radius:999px}
#acctHomeView .age-cell .ac-v{font-size:19px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:4px 0 0}
#acctHomeView .age-cell .ac-n{font-size:11px;color:var(--text-muted);font-weight:600}
/* AR drill-through — active band: rounded contained fill + inset ring (no edge-strip, per design canon) */
#acctHomeView .age-cell.on{background:var(--hover-overlay,rgba(0,0,0,.04));border-radius:10px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--app-accent) 55%,transparent)}
#acctHomeView .age-cell.on .ac-band{color:var(--app-accent)}
/* clear-filter chip in the collection-priorities header (the undo path) */
#acctHomeView .coll-filter-chip{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border:none;border-radius:999px;background:var(--surface-2);color:var(--text-secondary);font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;transition:background var(--motion-fast)}
#acctHomeView .coll-filter-chip:hover{background:var(--hover-overlay,rgba(0,0,0,.06))}
#acctHomeView .coll-filter-chip .cfc-dot{width:8px;height:8px;border-radius:999px}
#acctHomeView .coll-filter-chip .cfc-x{margin-left:2px;font-size:10px;opacity:.65}
/* two-column lower deck */
#acctHomeView .acct-deck{display:grid;gap:18px;grid-template-columns:1.4fr 1fr;align-items:start}
@media(max-width:1100px){#acctHomeView .acct-deck{grid-template-columns:1fr}}
#acctHomeView .acct-surf{background:var(--card-bg);border-radius:18px;box-shadow:var(--bevel-top),var(--shadow-e2);padding:16px 18px}
#acctHomeView .acct-surf-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
#acctHomeView .acct-surf-head h3{font-size:15px;font-weight:800;letter-spacing:-.01em;margin:0}
#acctHomeView .acct-surf-head .sh-action{margin-left:auto;font-size:12px;font-weight:700;color:var(--app-accent);cursor:pointer}
/* ══ 🛰️ CONNECTED MONEY-FLOW VIEW — Sankey-style topology (owner→you→subs/material, gated) ══ */
#acctHomeView .flow-surf{padding:20px 22px 22px;overflow:hidden}
#acctHomeView .flow-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
#acctHomeView .flow-head h3{font-size:17px;font-weight:800;letter-spacing:-.02em;margin:0 0 3px}
#acctHomeView .flow-sub{font-size:12.5px;line-height:1.5;color:var(--text-muted);max-width:560px}
#acctHomeView .flow-sub b{color:var(--text-secondary);font-weight:700}
#acctHomeView .flow-scope-sel{appearance:none;-webkit-appearance:none;border:1px solid var(--border-soft,rgba(0,0,0,.1));background:var(--card-bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>") no-repeat right 12px center;border-radius:12px;padding:9px 32px 9px 14px;font-size:12.5px;font-weight:650;color:var(--text-primary);cursor:pointer;box-shadow:var(--bevel-top),0 1px 2px rgba(0,0,0,.05);max-width:260px}
#acctHomeView .flow-scope-sel:hover{border-color:var(--app-accent)}
/* canvas — 3 columns (in · hub · out) joined by SVG connectors */
#acctHomeView .flow-canvas{display:grid;grid-template-columns:minmax(0,1fr) 88px minmax(150px,0.72fr) 110px minmax(0,1fr);align-items:center;gap:0;position:relative;padding:6px 0}
/* nodes — solid white cards, depth via elevation (never color tint), rounded, pressable */
#acctHomeView .flow-node{background:var(--card-bg);border-radius:18px;box-shadow:var(--bevel-top),var(--shadow-e2);padding:16px 17px 13px;position:relative;cursor:pointer;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s;border:1px solid transparent}
#acctHomeView .flow-node:hover{transform:translateY(-3px);box-shadow:var(--bevel-top),var(--shadow-e3,0 18px 40px -12px rgba(0,0,0,.28))}
#acctHomeView .flow-node:focus-visible{outline:none;border-color:var(--app-accent);box-shadow:var(--bevel-top),var(--shadow-e3,0 18px 40px -12px rgba(0,0,0,.28)),0 0 0 3px color-mix(in srgb,var(--app-accent) 30%,transparent)}
#acctHomeView .flow-node+.flow-node{margin-top:16px}
#acctHomeView .flow-node-top{display:flex;align-items:center;gap:9px;margin-bottom:9px}
#acctHomeView .flow-node-ico{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--surface-2,rgba(0,0,0,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
#acctHomeView .flow-node-ico svg{width:16px;height:16px;fill:currentColor;color:var(--text-secondary)}
#acctHomeView .flow-node-ico.in{background:color-mix(in srgb,var(--flow-in,#0a8f4f) 15%,transparent)}
#acctHomeView .flow-node-ico.in svg{color:var(--flow-in,#0a8f4f)}
#acctHomeView .flow-node-ico.out{background:color-mix(in srgb,var(--flow-out,#c2571b) 14%,transparent)}
#acctHomeView .flow-node-ico.out svg{color:var(--flow-out,#c2571b)}
#acctHomeView .flow-node-kicker{font-size:10.5px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)}
#acctHomeView .flow-node-title{font-size:14px;font-weight:750;letter-spacing:-.01em;color:var(--text-primary);line-height:1.2}
#acctHomeView .flow-node-amt{font-size:26px;font-weight:800;letter-spacing:-.025em;color:var(--text-primary);margin-top:3px;font-variant-numeric:tabular-nums}
#acctHomeView .flow-in .flow-node-amt{color:var(--flow-in,#0a8f4f)}
#acctHomeView .flow-out .flow-node-amt{color:var(--flow-out,#c2571b)}
#acctHomeView .flow-node-sub{font-size:11.5px;line-height:1.45;color:var(--text-muted);margin-top:4px}
#acctHomeView .flow-node-sub .flow-warn{color:var(--color-error,#d0342c);font-weight:700}
#acctHomeView .flow-node-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
#acctHomeView .flow-chip{font-size:10.5px;font-weight:650;color:var(--text-muted);background:var(--surface-2,rgba(0,0,0,.045));border-radius:8px;padding:3px 8px;display:inline-flex;gap:5px;align-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
#acctHomeView .flow-chip b{color:var(--text-secondary);font-weight:800;font-variant-numeric:tabular-nums}
#acctHomeView .flow-chip.good b{color:var(--flow-in,#0a8f4f)}
#acctHomeView .flow-chip.bad{background:color-mix(in srgb,var(--color-error,#d0342c) 12%,transparent)}#acctHomeView .flow-chip.bad b{color:var(--color-error,#d0342c)}
#acctHomeView .flow-chip.muted b{color:var(--text-muted)}
#acctHomeView .flow-node-drill{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--app-accent);margin-top:12px;opacity:.72;transition:opacity .16s,gap .16s}
#acctHomeView .flow-node:hover .flow-node-drill{opacity:1;gap:7px}
#acctHomeView .flow-node-drill svg{width:12px;height:12px;fill:currentColor}
#acctHomeView .flow-node.flow-empty{cursor:default;opacity:.72}
#acctHomeView .flow-node.flow-empty:hover{transform:none;box-shadow:var(--bevel-top),var(--shadow-e2)}
/* central hub — brand-neutral "you"; a glass ring with the net position */
#acctHomeView .flow-hub{background:linear-gradient(160deg,var(--card-bg),color-mix(in srgb,var(--app-accent) 6%,var(--card-bg)));border-radius:20px;box-shadow:var(--bevel-top),var(--shadow-e3,0 18px 44px -14px rgba(0,0,0,.3));padding:18px 12px 15px;text-align:center;position:relative;z-index:2;border:1px solid color-mix(in srgb,var(--app-accent) 18%,transparent)}
#acctHomeView .flow-hub-ring{width:52px;height:52px;margin:0 auto 9px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 32% 28%,color-mix(in srgb,var(--app-accent) 34%,transparent),color-mix(in srgb,var(--app-accent) 12%,transparent));box-shadow:inset 0 1px 2px rgba(255,255,255,.6),0 4px 12px -3px color-mix(in srgb,var(--app-accent) 45%,transparent)}
#acctHomeView .flow-hub-ico svg{width:22px;height:22px;fill:var(--app-accent)}
#acctHomeView .flow-hub-label{font-size:10.5px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)}
#acctHomeView .flow-hub-net{font-size:20px;font-weight:800;letter-spacing:-.025em;color:var(--text-primary);margin-top:5px;font-variant-numeric:tabular-nums}
#acctHomeView .flow-hub-netlbl{font-size:10px;color:var(--text-muted);line-height:1.3;margin-top:1px}
#acctHomeView .flow-hub-split{display:flex;flex-direction:column;gap:3px;margin-top:10px;font-size:10.5px;font-weight:650}
#acctHomeView .flow-hub-split span{display:inline-flex;align-items:center;gap:5px;justify-content:center;color:var(--text-secondary);font-variant-numeric:tabular-nums}
#acctHomeView .flow-hub-split i{width:7px;height:7px;border-radius:2px;flex:none}
#acctHomeView .flow-hub-split .in i{background:var(--flow-in,#0a8f4f)}
#acctHomeView .flow-hub-split .out i{background:var(--flow-out,#c2571b)}
/* connectors — SVG paths with an animated flux pulse; width scales with $ magnitude */
#acctHomeView .flow-link{position:relative;height:100%;min-height:120px}
#acctHomeView .flow-link svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#acctHomeView .flow-link svg path{fill:none;stroke-linecap:round}
#acctHomeView .flow-link-in svg path{stroke:color-mix(in srgb,var(--flow-in,#0a8f4f) 42%,transparent);stroke-width:var(--w-in,10px)}
#acctHomeView .flow-link-out svg path.p-sub,#acctHomeView .flow-link-out svg path.p-mat{stroke:color-mix(in srgb,var(--flow-out,#c2571b) 40%,transparent)}
#acctHomeView .flow-link-out svg path.p-sub{stroke-width:var(--w-sub,10px)}
#acctHomeView .flow-link-out svg path.p-mat{stroke-width:var(--w-mat,8px)}
#acctHomeView .flow-flux{position:absolute;width:7px;height:7px;border-radius:50%;top:50%;left:0;margin-top:-3.5px;box-shadow:0 0 8px 1px currentColor;opacity:.9}
#acctHomeView .flux-in{color:var(--flow-in,#0a8f4f);background:currentColor;animation:flowPulseIn 2.4s linear infinite}
#acctHomeView .flux-sub{color:var(--flow-out,#c2571b);background:currentColor;animation:flowPulseSub 2.8s linear infinite .3s}
#acctHomeView .flux-mat{color:var(--flow-out,#c2571b);background:currentColor;animation:flowPulseMat 2.8s linear infinite .9s}
@keyframes flowPulseIn{0%{left:2%;opacity:0}12%{opacity:.95}88%{opacity:.95}100%{left:96%;opacity:0}}
@keyframes flowPulseSub{0%{left:2%;top:50%;opacity:0}12%{opacity:.95}88%{opacity:.95}100%{left:94%;top:24%;opacity:0}}
@keyframes flowPulseMat{0%{left:2%;top:50%;opacity:0}12%{opacity:.95}88%{opacity:.95}100%{left:94%;top:76%;opacity:0}}
@media(prefers-reduced-motion:reduce){#acctHomeView .flow-flux{animation:none;opacity:.5;left:48%}}
/* gates on the sub arrow — retainage held + waiver gaps */
#acctHomeView .flow-gates{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:8px;z-index:3}
#acctHomeView .flow-gate{display:flex;align-items:center;gap:7px;background:var(--card-bg);border-radius:12px;box-shadow:var(--bevel-top),var(--shadow-e2);padding:6px 9px;cursor:pointer;border:1px solid transparent;transition:transform .16s,box-shadow .16s;white-space:nowrap}
#acctHomeView .flow-gate:hover{transform:scale(1.04);box-shadow:var(--bevel-top),var(--shadow-e3,0 14px 30px -10px rgba(0,0,0,.28))}
#acctHomeView .flow-gate:focus-visible{outline:none;border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 28%,transparent)}
#acctHomeView .flow-gate-ico{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;flex:none;background:var(--surface-2,rgba(0,0,0,.05))}
#acctHomeView .flow-gate-ico svg{width:12px;height:12px;fill:var(--text-muted)}
#acctHomeView .flow-gate.active .flow-gate-ico{background:color-mix(in srgb,var(--app-accent) 16%,transparent)}#acctHomeView .flow-gate.active .flow-gate-ico svg{fill:var(--app-accent)}
#acctHomeView .flow-gate.warn .flow-gate-ico{background:color-mix(in srgb,var(--color-warn,#c98a00) 18%,transparent)}#acctHomeView .flow-gate.warn .flow-gate-ico svg{fill:var(--color-warn,#c98a00)}
#acctHomeView .flow-gate.clear .flow-gate-ico{background:color-mix(in srgb,var(--flow-in,#0a8f4f) 15%,transparent)}#acctHomeView .flow-gate.clear .flow-gate-ico svg{fill:var(--flow-in,#0a8f4f)}
#acctHomeView .flow-gate-body{display:flex;flex-direction:column;line-height:1.1}
#acctHomeView .flow-gate-body b{font-size:13px;font-weight:800;color:var(--text-primary);font-variant-numeric:tabular-nums}
#acctHomeView .flow-gate-body i{font-size:9.5px;font-style:normal;font-weight:600;color:var(--text-muted);letter-spacing:.02em}
#acctHomeView .flow-col-out .flow-node+.flow-node{margin-top:16px}
/* legend */
#acctHomeView .flow-legend{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:20px;padding-top:15px;border-top:1px solid var(--border-soft,rgba(0,0,0,.07));font-size:11px;font-weight:600;color:var(--text-muted)}
#acctHomeView .flow-legend span{display:inline-flex;align-items:center;gap:6px}
#acctHomeView .flow-legend .dot{width:9px;height:9px;border-radius:3px;flex:none}
#acctHomeView .flow-legend .dot.in{background:var(--flow-in,#0a8f4f)}
#acctHomeView .flow-legend .dot.out{background:var(--flow-out,#c2571b)}
#acctHomeView .flow-legend .dot.gate{background:var(--color-warn,#c98a00)}
#acctHomeView .flow-legend-note{margin-left:auto;font-style:italic;opacity:.85}
/* flow-health strip — the pay-when-paid read + risk flags; 4 stat tiles that pop */
#acctHomeView .flow-health{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px;padding-top:20px;border-top:1px solid var(--border-soft,rgba(0,0,0,.07))}
#acctHomeView .flow-stat{background:var(--card-bg);border-radius:14px;box-shadow:var(--bevel-top),var(--shadow-e1,0 2px 8px -2px rgba(0,0,0,.12));padding:13px 15px;position:relative;border:1px solid transparent;transition:transform .16s,box-shadow .16s}
#acctHomeView .flow-stat[role=button]{cursor:pointer}
#acctHomeView .flow-stat[role=button]:hover{transform:translateY(-2px);box-shadow:var(--bevel-top),var(--shadow-e2)}
#acctHomeView .flow-stat[role=button]:focus-visible{outline:none;border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 26%,transparent)}
#acctHomeView .flow-stat-val{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1}
#acctHomeView .flow-stat-lbl{font-size:11px;font-weight:650;color:var(--text-secondary);margin-top:5px;line-height:1.2}
#acctHomeView .flow-stat-hint{font-size:10px;color:var(--text-muted);margin-top:3px;line-height:1.3}
/* signal via fill-tint + value color, NOT an edge strip */
#acctHomeView .flow-stat.good{background:color-mix(in srgb,var(--flow-in,#0a8f4f) 6%,var(--card-bg))}
#acctHomeView .flow-stat.good .flow-stat-val{color:var(--flow-in,#0a8f4f)}
#acctHomeView .flow-stat.warn{background:color-mix(in srgb,var(--color-warn,#c98a00) 7%,var(--card-bg))}
#acctHomeView .flow-stat.warn .flow-stat-val{color:var(--color-warn,#c98a00)}
#acctHomeView .flow-stat.bad{background:color-mix(in srgb,var(--color-error,#d0342c) 7%,var(--card-bg))}
#acctHomeView .flow-stat.bad .flow-stat-val{color:var(--color-error,#d0342c)}
@media(max-width:900px){#acctHomeView .flow-health{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){#acctHomeView .flow-health{grid-template-columns:1fr}}
/* responsive — stack to a vertical flow on iPad/iPhone; hide horizontal connectors, keep gates inline */
@media(max-width:900px){
  #acctHomeView .flow-canvas{grid-template-columns:1fr;gap:0}
  #acctHomeView .flow-link{min-height:36px;height:36px}
  #acctHomeView .flow-link svg{display:none}
  #acctHomeView .flow-link-in::after,#acctHomeView .flow-link-out::after{content:'';position:absolute;left:50%;top:0;bottom:0;width:3px;transform:translateX(-50%);border-radius:2px;background:linear-gradient(var(--flow-in,#0a8f4f),color-mix(in srgb,var(--flow-out,#c2571b) 60%,var(--flow-in,#0a8f4f)))}
  #acctHomeView .flow-gates{position:static;transform:none;flex-direction:row;justify-content:center;padding:4px 0}
  #acctHomeView .flow-flux{display:none}
  #acctHomeView .flow-hub{max-width:340px;margin:0 auto}
  #acctHomeView .flow-legend-note{margin-left:0;flex-basis:100%}
}
/* 🐝 §7-C portfolio sub-money — Subs tab roll-up + inline per-job drill */
/* posture hero band — triage-first summary tiles (each a sort door) */
#acctHomeView .sp-posture{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}
@media(max-width:1100px){#acctHomeView .sp-posture{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){#acctHomeView .sp-posture{grid-template-columns:repeat(2,1fr)}}
#acctHomeView .sp-post-tile{text-align:left;background:var(--surface-1,var(--card,#fff));border:.5px solid var(--border);border-radius:14px;padding:14px 15px;cursor:pointer;transition:transform .12s,box-shadow .12s,border-color .12s;box-shadow:0 1px 2px rgba(0,0,0,.03)}
#acctHomeView .sp-post-tile:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.08)}
#acctHomeView .sp-post-tile.on{border-color:var(--app-accent);box-shadow:0 0 0 1px var(--app-accent) inset}
#acctHomeView .sp-post-l{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
#acctHomeView .sp-post-v{font-size:23px;font-weight:800;letter-spacing:-.02em;margin:5px 0 3px;font-variant-numeric:tabular-nums}
#acctHomeView .sp-post-s{font-size:11.5px;color:var(--text-secondary)}
#acctHomeView .sp-post-bad .sp-post-v{color:var(--color-error,#c0362c)}
#acctHomeView .sp-post-warn .sp-post-v{color:var(--co-pending-fg,#b45309)}
#acctHomeView .sp-post-ok .sp-post-v{color:var(--color-success,#2e7d52)}
.acct-subseg-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 5px;margin-left:5px;border-radius:8px;background:var(--co-pending-bg,#fde8c8);color:var(--co-pending-fg,#b45309);font-size:10.5px;font-weight:800;line-height:1;vertical-align:1px}
.acct-subseg-badge.neutral{background:color-mix(in srgb,var(--text-primary) 9%,transparent);color:var(--text-secondary)}
.acct-subseg-badge.bad{background:color-mix(in srgb,var(--color-error,#c0362c) 15%,transparent);color:var(--color-error,#c0362c)}
#acctHomeView .sp-surf{overflow:hidden}
#acctHomeView .sp-tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
#acctHomeView .sp-tbl th{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);padding:0 9px 8px;text-align:right;cursor:pointer;white-space:nowrap;user-select:none}
#acctHomeView .sp-tbl th.sp-al{text-align:left}
#acctHomeView .sp-tbl th.sp-th-on{color:var(--app-accent)}
#acctHomeView .sp-tbl td{padding:11px 9px;border-bottom:.5px solid color-mix(in srgb,var(--app-accent) 3%,rgba(0,0,0,.05));text-align:right}
#acctHomeView .sp-tbl td.sp-al{text-align:left}
#acctHomeView .sp-row{cursor:pointer;transition:background .12s}
#acctHomeView .sp-row:hover{background:color-mix(in srgb,var(--app-accent) 5%,transparent)}
#acctHomeView .sp-row.open{background:color-mix(in srgb,var(--app-accent) 7%,transparent)}
#acctHomeView .sp-chev{display:inline-block;width:0;height:0;border-left:5px solid var(--text-muted);border-top:4px solid transparent;border-bottom:4px solid transparent;margin-right:8px;vertical-align:middle;transition:transform .15s}
#acctHomeView .sp-row.open .sp-chev{transform:rotate(90deg)}
#acctHomeView .sp-name{font-weight:700}
#acctHomeView .sp-muted{color:var(--text-muted)}
#acctHomeView .sp-neg{color:var(--color-error,#c0362c);font-weight:700}
#acctHomeView .sp-dash{color:var(--text-muted);opacity:.5}
#acctHomeView .sp-age{margin-left:5px;font-size:10px;color:var(--text-muted);font-weight:600}
#acctHomeView .sp-gap{color:var(--co-pending-fg,#b45309);font-weight:700}
#acctHomeView .sp-foot td{font-weight:800;border-top:.5px solid var(--border);border-bottom:none;padding-top:10px}
#acctHomeView .sp-link-contact{margin-left:7px;font-size:10.5px;font-weight:700;color:var(--app-accent);background:none;border:none;cursor:pointer;padding:1px 4px;border-radius:5px}
#acctHomeView .sp-link-contact:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
#acctHomeView .sp-chip{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--text-secondary);white-space:nowrap}
#acctHomeView .sp-chip-bad{background:color-mix(in srgb,var(--color-error,#c0362c) 14%,transparent);color:var(--color-error,#c0362c)}
#acctHomeView .sp-chip-warn{background:var(--co-pending-bg,#fde8c8);color:var(--co-pending-fg,#b45309)}
#acctHomeView .sp-chip-ok{background:color-mix(in srgb,var(--color-success,#2e7d52) 14%,transparent);color:var(--color-success,#2e7d52)}
#acctHomeView .sp-chip-quiet{opacity:.6}
#acctHomeView .sp-drill{padding:0 !important;background:color-mix(in srgb,var(--app-accent) 3%,transparent)}
#acctHomeView .sp-drill-inner{padding:14px 16px 18px}
#acctHomeView .sp-drill-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
#acctHomeView .sp-drill-title{font-weight:800;font-size:13px}
#acctHomeView .sp-cockpit-btn{margin-left:auto;font-size:12px;font-weight:700;color:#fff;background:var(--app-accent);border:none;border-radius:8px;padding:6px 12px;cursor:pointer}
#acctHomeView .sp-cockpit-btn:hover{filter:brightness(1.06)}
#acctHomeView .spj-tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
#acctHomeView .spj-tbl th{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);padding:0 8px 6px;text-align:right}
#acctHomeView .spj-tbl th.sp-al{text-align:left}
#acctHomeView .spj-tbl td{padding:8px;font-size:12.5px;text-align:right;border-bottom:.5px solid color-mix(in srgb,var(--app-accent) 3%,rgba(0,0,0,.04))}
#acctHomeView .spj-tbl td.sp-al{text-align:left}
#acctHomeView .spj-ready{color:var(--color-success,#2e7d52);font-weight:800}
#acctHomeView .spj-open{font-size:11px;font-weight:700;color:var(--app-accent);background:none;border:none;cursor:pointer;padding:2px 6px;border-radius:5px}
#acctHomeView .spj-open:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
@media(max-width:720px){#acctHomeView .sp-tbl .hide-sm,#acctHomeView .spj-tbl .hide-sm{display:none}}
/* 🐝 PORTFOLIO SUB-MONEY COMMAND CENTER — purpose-built (not the borrowed compact _sck* modal). */
.spck-body{font-variant-numeric:tabular-nums}
/* the cockpit needs more room than the standard wide modal — give it a dedicated wider cap */
.gm-modal.wide:has(.spck-body){max-width:min(1180px,96vw)}
/* HERO — gradient identity band */
.spck-body .spck-hero{background:linear-gradient(135deg,color-mix(in srgb,var(--app-accent) 92%,#1a3a6b),color-mix(in srgb,var(--app-accent) 70%,#0b1f3a));border-radius:16px;padding:18px 20px;color:#fff;margin-bottom:16px}
.spck-body .spck-hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.spck-body .spck-hero-id{display:flex;align-items:center;gap:13px;min-width:0}
.spck-body .spck-hero-avatar{width:44px;height:44px;flex:0 0 auto;border-radius:12px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800}
.spck-body .spck-hero-name{font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.spck-body .spck-hero-sub{font-size:12.5px;opacity:.9;margin-top:3px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.spck-body .spck-status{font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;background:rgba(255,255,255,.18)}
.spck-body .spck-status.ok{background:rgba(120,230,170,.28)}
.spck-body .spck-status.bad{background:rgba(255,150,140,.32)}
.spck-body .spck-hero-figs{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:560px){.spck-body .spck-hero-figs{width:100%}.spck-body .spck-fig{flex:1 1 0;min-width:0}}
.spck-body .spck-fig{background:rgba(255,255,255,.12);border-radius:12px;padding:9px 14px;min-width:92px}
.spck-body .spck-fig-l{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;opacity:.8}
.spck-body .spck-fig-v{font-size:18px;font-weight:800;letter-spacing:-.01em;margin-top:2px}
.spck-body .spck-fig.bad .spck-fig-v{color:#ffd7d2}
.spck-body .spck-fig.warn .spck-fig-v{color:#ffe6b8}
.spck-body .spck-fig.ok .spck-fig-v{color:#c6f6d9}
.spck-body .spck-hero-bar{position:relative;height:22px;margin-top:15px;background:rgba(255,255,255,.15);border-radius:999px;overflow:hidden}
.spck-body .spck-hero-fill{position:absolute;inset:0 auto 0 0;background:rgba(255,255,255,.4);border-radius:999px}
.spck-body .spck-hero-barlabel{position:absolute;inset:0;display:flex;align-items:center;padding:0 12px;font-size:11px;font-weight:700}
/* 3-PANE GRID */
.spck-body .spck-grid{display:grid;grid-template-columns:250px minmax(0,1fr) 230px;gap:18px}
@media(max-width:820px){.spck-body .spck-grid{grid-template-columns:1fr}}
.spck-body .spck-pane-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin:0 0 10px;display:flex;align-items:center;gap:7px}
.spck-body .spck-count{background:var(--surface-2);border-radius:999px;padding:1px 7px;font-size:10.5px;font-weight:800;color:var(--text-secondary)}
/* JOBS master */
.spck-body .spck-job{display:block;width:100%;text-align:left;background:var(--surface-1,var(--card,#fff));border:none;border-radius:14px;padding:13px 14px;margin-bottom:11px;cursor:pointer;box-shadow:0 1px 1px rgba(0,0,0,.04),0 3px 8px rgba(0,0,0,.08),inset 0 0 0 .5px color-mix(in srgb,var(--text-primary) 6%,transparent);transition:transform .13s cubic-bezier(.2,.7,.3,1),box-shadow .13s}
.spck-body .spck-job:hover{transform:translateY(-2px);box-shadow:0 2px 3px rgba(0,0,0,.05),0 10px 22px rgba(0,0,0,.12),inset 0 0 0 .5px color-mix(in srgb,var(--text-primary) 8%,transparent)}
.spck-body .spck-job.sel{box-shadow:0 1px 1px rgba(0,0,0,.04),0 4px 12px color-mix(in srgb,var(--app-accent) 22%,transparent),inset 0 0 0 1.5px var(--app-accent)}
.spck-body .spck-job-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.spck-body .spck-job-name{font-weight:700;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spck-body .spck-job-cv{font-weight:800;font-size:13px;flex:0 0 auto}
.spck-body .spck-job-bar{height:5px;background:var(--surface-2);border-radius:999px;overflow:hidden;margin:8px 0 7px}
.spck-body .spck-job-fill{height:100%;background:var(--app-accent);border-radius:999px}
.spck-body .spck-job-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11.5px;color:var(--text-muted)}
.spck-body .spck-job-flag{font-size:10px;font-weight:800;padding:1px 7px;border-radius:999px;background:var(--surface-2);color:var(--text-secondary)}
.spck-body .spck-job-flag.bad{background:color-mix(in srgb,var(--color-error,#c0362c) 14%,transparent);color:var(--color-error,#c0362c)}
.spck-body .spck-job-flag.warn{background:var(--co-pending-bg,#fde8c8);color:var(--co-pending-fg,#b45309)}
.spck-body .spck-job-flag.ok{background:color-mix(in srgb,var(--color-success,#2e7d52) 14%,transparent);color:var(--color-success,#2e7d52)}
/* DETAIL center pane */
.spck-body .spck-detailwrap{min-width:0}
.spck-body .spck-detail{background:var(--surface-1,var(--card,#fff));border:none;border-radius:16px;padding:18px 19px;box-shadow:0 1px 1px rgba(0,0,0,.04),0 4px 12px rgba(0,0,0,.07),inset 0 0 0 .5px color-mix(in srgb,var(--text-primary) 5%,transparent)}
.spck-body .spck-detail-empty{display:flex;align-items:center;justify-content:center;min-height:260px;text-align:center;background:var(--surface-1,var(--card,#fff));border:none;border-radius:16px;box-shadow:0 1px 1px rgba(0,0,0,.04),0 4px 12px rgba(0,0,0,.07),inset 0 0 0 .5px color-mix(in srgb,var(--text-primary) 5%,transparent)}
.spck-body .spck-detail-loading{color:var(--text-muted);padding:40px}
.spck-body .spck-detail-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:13px}
.spck-body .spck-detail-name{font-size:16px;font-weight:800;letter-spacing:-.01em}
.spck-body .spck-detail-bal{font-size:13px;font-weight:700;color:var(--text-secondary)}
.spck-body .spck-kv-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.spck-body .spck-kv{background:color-mix(in srgb,var(--app-accent) 4%,var(--surface-1,#fff));border-radius:12px;padding:10px 12px;box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--app-accent) 12%,transparent)}
.spck-body .spck-kv span{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
.spck-body .spck-kv strong{font-size:15px;font-weight:800;display:block;margin-top:2px}
.spck-body .spck-kv strong.neg{color:var(--color-error,#c0362c)}
.spck-body .spck-detail-sub{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin:0 0 8px;display:flex;align-items:center;gap:7px}
.spck-body .spck-txns{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.spck-body .spck-txn{display:flex;align-items:center;gap:11px;padding:9px 4px;border-bottom:.5px solid color-mix(in srgb,var(--app-accent) 4%,rgba(0,0,0,.05))}
.spck-body .spck-txn-ic{width:26px;height:26px;flex:0 0 auto;border-radius:8px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent)}
.spck-body .spck-txn-ic.bc{background:color-mix(in srgb,var(--color-error,#c0362c) 12%,transparent);color:var(--color-error,#c0362c)}
.spck-body .spck-txn-body{flex:1;min-width:0}
.spck-body .spck-txn-lbl{display:block;font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spck-body .spck-txn-date{display:block;font-size:11px;color:var(--text-muted)}
.spck-body .spck-txn-amt{font-weight:800;font-size:14px;flex:0 0 auto}
.spck-body .spck-txn-amt.neg{color:var(--color-error,#c0362c)}
.spck-body .spck-txn.void{opacity:.5}.spck-body .spck-txn.void .spck-txn-amt{text-decoration:line-through}
.spck-body .spck-txn-void{font-size:10px;font-weight:800;color:var(--text-muted);text-transform:uppercase}
.spck-body .spck-txn-empty{padding:20px;text-align:center;color:var(--text-muted);font-size:12.5px}
.spck-body .spck-jobbtn{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:#fff;background:var(--app-accent);border:none;border-radius:10px;padding:9px 15px;cursor:pointer;transition:filter .12s}
.spck-body .spck-jobbtn:hover{filter:brightness(1.07)}
/* RAIL — exposure cards as RAISED CHIPS: real resting elevation (depth, not a border), lift on hover. */
.spck-body .spck-rail-card{display:block;width:100%;text-align:left;background:var(--surface-1,var(--card,#fff));border:none;border-radius:14px;padding:13px 14px;margin-bottom:11px;cursor:pointer;box-shadow:0 1px 1px rgba(0,0,0,.04),0 3px 8px rgba(0,0,0,.08),inset 0 0 0 .5px color-mix(in srgb,var(--text-primary) 6%,transparent);transition:transform .13s cubic-bezier(.2,.7,.3,1),box-shadow .13s}
.spck-body .spck-rail-card:hover{transform:translateY(-2px);box-shadow:0 2px 3px rgba(0,0,0,.05),0 10px 22px rgba(0,0,0,.12),inset 0 0 0 .5px color-mix(in srgb,var(--text-primary) 8%,transparent)}
.spck-body .spck-rail-card:active{transform:translateY(0);box-shadow:0 1px 1px rgba(0,0,0,.04),0 2px 5px rgba(0,0,0,.08),inset 0 0 0 .5px color-mix(in srgb,var(--text-primary) 6%,transparent)}
/* tone-tinted raised chips — the colored ones get a matching soft ambient glow so risk reads at a glance */
.spck-body .spck-rail-card.bad{box-shadow:0 1px 1px rgba(0,0,0,.04),0 3px 10px color-mix(in srgb,var(--color-error,#c0362c) 20%,transparent),inset 0 0 0 .5px color-mix(in srgb,var(--color-error,#c0362c) 22%,transparent)}
.spck-body .spck-rail-card.bad:hover{box-shadow:0 2px 3px rgba(0,0,0,.05),0 10px 24px color-mix(in srgb,var(--color-error,#c0362c) 28%,transparent),inset 0 0 0 .5px color-mix(in srgb,var(--color-error,#c0362c) 30%,transparent)}
.spck-body .spck-rail-card.warn{box-shadow:0 1px 1px rgba(0,0,0,.04),0 3px 10px color-mix(in srgb,var(--co-pending-fg,#b45309) 18%,transparent),inset 0 0 0 .5px color-mix(in srgb,var(--co-pending-fg,#b45309) 24%,transparent)}
.spck-body .spck-rail-card.warn:hover{box-shadow:0 2px 3px rgba(0,0,0,.05),0 10px 24px color-mix(in srgb,var(--co-pending-fg,#b45309) 26%,transparent),inset 0 0 0 .5px color-mix(in srgb,var(--co-pending-fg,#b45309) 32%,transparent)}
.spck-body .spck-rail-card.ok{box-shadow:0 1px 1px rgba(0,0,0,.04),0 3px 10px color-mix(in srgb,var(--color-success,#2e7d52) 16%,transparent),inset 0 0 0 .5px color-mix(in srgb,var(--color-success,#2e7d52) 22%,transparent)}
.spck-body .spck-rail-card.ok:hover{box-shadow:0 2px 3px rgba(0,0,0,.05),0 10px 24px color-mix(in srgb,var(--color-success,#2e7d52) 24%,transparent),inset 0 0 0 .5px color-mix(in srgb,var(--color-success,#2e7d52) 30%,transparent)}
.spck-body .spck-rail-l{display:flex;align-items:center;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
.spck-body .spck-rail-chev{margin-left:auto;opacity:.4}
.spck-body .spck-rail-v{font-size:17px;font-weight:800;letter-spacing:-.01em;margin-top:4px}
.spck-body .spck-rail-s{font-size:11px;color:var(--text-secondary);margin-top:1px}
.spck-body .spck-rail-card.bad .spck-rail-v{color:var(--color-error,#c0362c)}
.spck-body .spck-rail-card.warn .spck-rail-v{color:var(--co-pending-fg,#b45309)}
.spck-body .spck-rail-card.ok .spck-rail-v{color:var(--color-success,#2e7d52)}
.spck-body .spck-empty{padding:16px;text-align:center;color:var(--text-muted);font-size:12.5px}
#acctHomeView .mini-stat .ms-side{margin-left:auto;display:flex;align-items:center}
/* per-project financial-health table */
#acctHomeView .pfh-tbl{width:100%;border-collapse:collapse}
#acctHomeView .pfh-tbl th{text-align:right;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);padding:0 10px 8px}
#acctHomeView .pfh-tbl th:first-child{text-align:left}
#acctHomeView .pfh-row td{padding:11px 10px;border-bottom:.5px solid color-mix(in srgb,var(--app-accent) 3%,rgba(0,0,0,.05));font-variant-numeric:tabular-nums;text-align:right}
#acctHomeView .pfh-row td:first-child{text-align:left}
#acctHomeView .pfh-row:last-child td{border-bottom:0}
#acctHomeView .pfh-row{cursor:pointer;transition:background var(--motion-fast)}
#acctHomeView .pfh-row:hover td{background:var(--hover-overlay,rgba(0,0,0,.025))}#acctHomeView .pfh-row:hover td:first-child{border-top-left-radius:10px;border-bottom-left-radius:10px}#acctHomeView .pfh-row:hover td:last-child{border-top-right-radius:10px;border-bottom-right-radius:10px}
#acctHomeView .pfh-name{font-weight:800;font-size:13.5px;letter-spacing:-.01em}
#acctHomeView .pfh-sub{font-size:11px;color:var(--text-muted);font-weight:600}
#acctHomeView .money-cell{font-weight:800}
#acctHomeView .money-cell.neg{color:var(--color-error)}
#acctHomeView .money-cell.warn{color:var(--co-pending-fg,#b45309)}
#acctHomeView .health-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap}
#acctHomeView .hp-ok{background:var(--hs-green-bg,color-mix(in srgb,var(--color-success) 14%,var(--card-bg)));color:var(--hs-green-fg,var(--color-success))}
#acctHomeView .hp-amber{background:var(--hs-amber-bg,color-mix(in srgb,var(--color-warning) 16%,var(--card-bg)));color:var(--hs-amber-fg,var(--co-pending-fg,#b45309))}
#acctHomeView .hp-red{background:var(--hs-red-bg,color-mix(in srgb,var(--color-error) 13%,var(--card-bg)));color:var(--hs-red-fg,var(--color-error))}
/* collection priorities (ranked overdue invoices, ball-in-court honest-omitted) */
#acctHomeView .coll-item{display:flex;align-items:center;gap:12px;padding:13px 2px;border-bottom:.5px solid color-mix(in srgb,var(--app-accent) 3%,rgba(0,0,0,.05));cursor:pointer;transition:background var(--motion-fast);border-radius:10px}
#acctHomeView .coll-item:last-child{border-bottom:0}
#acctHomeView .coll-item:hover{background:var(--hover-overlay,rgba(0,0,0,.025))}
#acctHomeView .coll-rank{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;font-size:12px;font-weight:800;background:color-mix(in srgb,var(--color-error) 13%,var(--card-bg));color:var(--color-error);flex:0 0 auto}
#acctHomeView .coll-body{flex:1;min-width:0}
#acctHomeView .coll-body .cb-name{font-size:13px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#acctHomeView .coll-body .cb-meta{font-size:11.5px;color:var(--text-secondary);font-weight:600}
#acctHomeView .coll-amt{text-align:right;flex:0 0 auto}
#acctHomeView .coll-amt .v{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--color-error)}
#acctHomeView .coll-amt .d{font-size:10.5px;font-weight:700;color:var(--text-muted)}
/* AP mini-cards (real payables — honest replacement for fabricated draws) */
#acctHomeView .mini-stat{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:.5px solid color-mix(in srgb,var(--app-accent) 3%,rgba(0,0,0,.05));cursor:pointer;transition:background var(--motion-fast);border-radius:10px}
#acctHomeView .mini-stat:last-child{border-bottom:0}
#acctHomeView .mini-stat:hover{background:var(--hover-overlay,rgba(0,0,0,.025))}
#acctHomeView .ms-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--surface-2);flex:0 0 auto}
#acctHomeView .ms-ico svg{width:16px;height:16px;color:var(--text-secondary)}
#acctHomeView .ms-body{flex:1;min-width:0}
#acctHomeView .ms-body .t{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#acctHomeView .ms-body .s{font-size:11.5px;color:var(--text-muted);font-weight:600}
#acctHomeView .ms-v{font-variant-numeric:tabular-nums;font-weight:800;font-size:14px;flex:0 0 auto}
/* retainage tile grid */
#acctHomeView .acct-ret-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
@media(max-width:1100px){#acctHomeView .acct-ret-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){#acctHomeView .acct-ret-grid{grid-template-columns:1fr}}
#acctHomeView .acct-ret-tile{background:var(--surface-grad);border-radius:14px;padding:13px 15px;box-shadow:var(--bevel-top),var(--shadow-e1);cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
#acctHomeView .acct-ret-tile:hover{transform:translateY(-2px);box-shadow:var(--bevel-top),var(--shadow-e3)}
#acctHomeView .acct-ret-tile .rt-l{font-size:11px;font-weight:700;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#acctHomeView .acct-ret-tile .rt-v{font-size:22px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:3px 0 2px}
#acctHomeView .acct-ret-tile .rt-s{font-size:11px;color:var(--text-muted);font-weight:600}
#acctHomeView .acct-empty{padding:20px 16px;text-align:center;color:var(--text-muted);font-size:13px}

/* ===== Estimator Home · Pass 2 (2026-06-05) — Bid Command Center ===== */
#estHomeView .est-wrap{padding:22px 26px 38px;margin:0;display:grid;gap:18px}
/* bidding hero — §6: theme-accent-driven (was a hardcoded amber) + thinner band. --hero-tone defaults
   to the live theme accent; for a per-hero amber identity later, set `--hero-tone:#c47d0e` on this rule
   alone. Ink = --on-accent per theme (luminance-correct). Padding trimmed (was 24/22) for a leaner band. */
#estHomeView .est-hero{--hero-tone:var(--app-accent);position:relative;border-radius:24px;padding:18px 26px 16px;color:var(--hero-ink,var(--on-accent,#fff));overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--hero-tone) 86%,#000) 0%,var(--hero-tone) 58%,color-mix(in srgb,var(--hero-tone) 92%,#000) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),var(--shadow-e4,0 18px 50px -18px rgba(20,30,48,.45))}
#estHomeView .est-hero::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(130% 90% at 0% 0%,rgba(255,255,255,.22),transparent 52%)}
#estHomeView .eh-row{position:relative;z-index:1;display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
#estHomeView .eh-kicker{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.84}
#estHomeView .est-hero h2{font-size:30px;font-weight:800;letter-spacing:-.025em;margin:4px 0 6px}
#estHomeView .eh-sub{font-size:13.5px;opacity:.92;font-weight:600;display:flex;gap:14px;flex-wrap:wrap}
#estHomeView .eh-sub b{font-variant-numeric:tabular-nums}
#estHomeView .eh-spacer{flex:1}
#estHomeView .eh-due{position:relative;z-index:1;text-align:right}
#estHomeView .eh-due .edl{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
#estHomeView .eh-due .edv{font-size:32px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
#estHomeView .eh-due .edr{font-size:12px;font-weight:700;opacity:.92;margin-top:4px}
/* §6 — the loaded-state pill in the kicker: a rounded glass chip + a status dot (amber=bids due,
   green=clear). Fill, never an edge-strip; inherits the hero ink so it adapts per theme. */
#estHomeView .eh-pill{display:inline-flex;align-items:center;gap:6px;margin-left:8px;padding:3px 10px 3px 8px;border-radius:999px;background:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.22);font-size:10.5px;font-weight:800;letter-spacing:.02em;text-transform:none;vertical-align:middle;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#estHomeView .eh-pill-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 2px rgba(255,255,255,.18)}
#estHomeView .eh-pill-due .eh-pill-dot{background:#ffd166}
#estHomeView .eh-pill-clear .eh-pill-dot{background:#7ee0a0}
/* metric doors */
#estHomeView .est-doors{display:grid;gap:13px;grid-template-columns:repeat(5,1fr)}
@media (max-width:1100px){#estHomeView .est-doors{grid-template-columns:repeat(2,1fr)}}
/* iPad-landscape intermediate: 5-col cramps at 1101-1366 (esp. with the dock open) — 3-col tier (B11) */
@media (min-width:1101px) and (max-width:1366px){#estHomeView .est-doors{grid-template-columns:repeat(3,1fr)}}
#estHomeView .door{position:relative;border-radius:18px;padding:16px 17px;overflow:hidden;background:var(--surface-grad,linear-gradient(160deg,#fff,#f7f8fb));box-shadow:inset 0 1px 0 rgba(255,255,255,.6),var(--shadow-e2);border:.5px solid rgba(0,0,0,.05);cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
#estHomeView .door:hover{transform:translateY(-3px);box-shadow:var(--shadow-e3)}
#estHomeView .door .d-label{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
#estHomeView .door .d-value{font-size:30px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin:4px 0 2px;line-height:1;color:var(--text-primary)}
#estHomeView .door .d-sub{font-size:11.5px;color:var(--text-secondary);font-weight:600}
#estHomeView .door .d-ico{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.7);font-size:14px;box-shadow:var(--shadow-e1)}
#estHomeView .door .d-ico .ic{width:15px;height:15px;color:var(--app-accent)}
/* V-navmode 2026-06-28 — SITE-WIDE KPI-badge orb. The little corner icon badges on stat/metric
   "doors" (Estimator, Bid Pipeline, Accounting, Account Home, …) become ROUND orb spheres: a soft
   frosted sphere gradient + gentle top specular + lift. One rule covers every .d-ico variant. */
#estHomeView .door .d-ico, #bidPipelineView .door .d-ico, #acctHomeView .acct-door .d-ico, .door .d-ico, .acct-door .d-ico{
  border-radius:50% !important; overflow:hidden;
  background:radial-gradient(circle at 35% 27%, #fff, color-mix(in srgb,var(--app-accent) 7%,var(--surface,#fff))) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 4px rgba(0,0,0,.08), inset 0 0 0 .5px color-mix(in srgb,var(--app-accent) 14%,transparent), 0 1px 2px rgba(16,24,40,.12), 0 2px 5px -2px rgba(16,24,40,.16) !important}
.door .d-ico::after, .acct-door .d-ico::after{content:''; position:absolute; left:50%; top:8%; transform:translateX(-50%); width:60%; height:42%; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 75%)}
.door .d-ico .ic, .acct-door .d-ico .ic, .door .d-ico svg, .acct-door .d-ico svg{position:relative; z-index:1}
#estHomeView .br-ico .ic,#estHomeView .eitb-ico .ic{width:16px;height:16px}
#estHomeView .empty .em-ico .ic{width:28px;height:28px}
/* ============================================================================
   V-orb3 — ORB SWEEP ROUND 2 (2026-06-30). Consolidated block carrying the orb
   idiom to the remaining flat round elements site-wide, in 3 tiers. Keeps each
   element's MEANING (category color, status hue) and adds dimensional depth:
   a soft sphere gradient (lit upper-left), a top specular cap, an inset edge +
   a gentle lift. Mirrors the canonical .d-ico recipe; one home, not per-component.
   ============================================================================ */
/* --- TIER 1: small status dots (8-9px) — tinted sphere + crisp top specular, no lift --- */
#acctHomeView .age-cell .ac-dot,
.trw-rail-status-dot,
.contacts-dir .peek-status-dot,
.psm-row .psr-dot{
  background-image:radial-gradient(circle at 35% 28%, rgba(255,255,255,.75), rgba(255,255,255,0) 58%),
    radial-gradient(circle at 60% 75%, rgba(0,0,0,.18), rgba(0,0,0,0) 62%);
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.5), inset 0 -1px 1.5px rgba(0,0,0,.16), 0 1px 2px rgba(16,24,40,.18);
}
/* dots set color via background (currentColor / a token) — layer the sphere over it.
   The status-dot tones keep their solid base color UNDER the two gloss gradients above. */
.trw-rail-status-dot{background-color:currentColor;background-blend-mode:overlay,normal,normal}
.contacts-dir .peek-status-dot{background-blend-mode:overlay,normal,normal}
#acctHomeView .age-cell .ac-dot{background-blend-mode:overlay,normal,normal}
.psm-row .psr-dot{background-blend-mode:overlay,normal,normal}

/* --- TIER 2: medium circles (24-30px) — full orb: sphere + ::after specular cap + lift --- */
.esign-dot{position:relative;
  background-image:radial-gradient(circle at 35% 27%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%);
  background-blend-mode:soft-light;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 4px rgba(0,0,0,.10), inset 0 0 0 1.5px var(--border), 0 1px 3px rgba(16,24,40,.14)}
.esign-step-done .esign-dot,.esign-step-current .esign-dot{background-blend-mode:soft-light}
.esign-dot::after{content:'';position:absolute;left:50%;top:9%;transform:translateX(-50%);width:58%;height:40%;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.6), rgba(255,255,255,0) 75%)}
.esign-dot>*{position:relative;z-index:1}
/* .ip-tl-node already has a radial fill — promote it to a true orb: add the specular cap + lift */
.ip-tl-node{box-shadow:var(--bevel-top), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 4px rgba(0,0,0,.07), 0 0 0 1px color-mix(in srgb,var(--chrome-border) 80%,transparent), 0 2px 5px -2px rgba(16,24,40,.18)}
.ip-tl-node::after{content:'';position:absolute;left:50%;top:8%;transform:translateX(-50%);width:58%;height:40%;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 75%)}
.ip-tl-node svg{position:relative;z-index:1}
.header-search-kbd{
  background-image:radial-gradient(circle at 38% 28%, rgba(255,255,255,.5), rgba(255,255,255,0) 60%);
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.5), inset 0 -1px 2px rgba(0,0,0,.10), 0 1px 2px rgba(16,24,40,.14)}

/* --- TIER 3: colored ICON-TILES (rounded squares) — KEEP category color, add orb depth.
   The tile's own background (category-tinted) stays; we overlay a sphere-light + specular
   cap + inset bevel + lift so it reads as a glossy tinted lozenge, not a flat tint. --- */
.perm-card-ico,.insp-card-ico,.reg-card-ico,.clog-cat-ico,.file-card-icon,.pk-pick-glyph,.pk-sig-glyph,.perm-portal-tile-ico{
  position:relative;overflow:hidden;
  background-image:radial-gradient(circle at 32% 24%, rgba(255,255,255,.55), rgba(255,255,255,0) 58%),
    radial-gradient(circle at 70% 92%, rgba(0,0,0,.12), rgba(0,0,0,0) 60%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 4px rgba(0,0,0,.07), inset 0 0 0 .5px rgba(255,255,255,.14), 0 1px 2px rgba(16,24,40,.10), 0 2px 6px -2px rgba(16,24,40,.14);
}
/* The .tone-good/-warn/-bad variants set `background:` SHORTHAND (resets background-image
   to none) at HIGHER specificity (0,2,0) → they were wiping the gloss above. Re-assert the
   gloss background-image on the toned variants (longhand layers over their background-color,
   tone color preserved). Covers perm/insp/reg tiles. */
.perm-card-ico.tone-good,.perm-card-ico.tone-warn,.perm-card-ico.tone-bad,
.insp-card-ico.tone-good,.insp-card-ico.tone-warn,.insp-card-ico.tone-bad,
.reg-card-ico.tone-good,.reg-card-ico.tone-warn,.reg-card-ico.tone-bad{
  background-image:radial-gradient(circle at 32% 24%, rgba(255,255,255,.55), rgba(255,255,255,0) 58%),
    radial-gradient(circle at 70% 92%, rgba(0,0,0,.12), rgba(0,0,0,0) 60%);
}
/* .file-card-icon.cat-* set `background:color-mix` SHORTHAND (0,2,0) → same wipe. Re-assert. */
.file-card-icon.cat-spreadsheet,.file-card-icon.cat-presentation,.file-card-icon.cat-drawing,
.file-card-icon.cat-image,.file-card-icon.cat-archive,.file-card-icon.cat-document,.file-card-icon.cat-other{
  background-image:radial-gradient(circle at 32% 24%, rgba(255,255,255,.55), rgba(255,255,255,0) 58%),
    radial-gradient(circle at 70% 92%, rgba(0,0,0,.12), rgba(0,0,0,0) 60%);
}
.perm-card-ico::after,.insp-card-ico::after,.reg-card-ico::after,.clog-cat-ico::after,.file-card-icon::after,.pk-pick-glyph::after,.pk-sig-glyph::after,.perm-portal-tile-ico::after{
  content:'';position:absolute;left:50%;top:6%;transform:translateX(-50%);width:62%;height:38%;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.5), rgba(255,255,255,0) 76%)}
.perm-card-ico svg,.insp-card-ico svg,.reg-card-ico svg,.clog-cat-ico svg,.file-card-icon svg,.pk-pick-glyph svg,.pk-sig-glyph svg,.perm-portal-tile-ico svg{position:relative;z-index:1}
/* Bayfront/dark themes: the white sphere-light reads too hot on dark tiles — temper it. */
[data-theme="midnight"] .perm-card-ico,[data-theme="midnight"] .insp-card-ico,[data-theme="midnight"] .reg-card-ico,
[data-theme="midnight"] .clog-cat-ico,[data-theme="midnight"] .file-card-icon,[data-theme="midnight"] .pk-pick-glyph,[data-theme="midnight"] .pk-sig-glyph,
[data-theme="contrast"] .perm-card-ico,[data-theme="contrast"] .insp-card-ico,[data-theme="contrast"] .reg-card-ico,
[data-theme="contrast"] .clog-cat-ico,[data-theme="contrast"] .file-card-icon,[data-theme="contrast"] .pk-pick-glyph,[data-theme="contrast"] .pk-sig-glyph,
[data-theme="midnight"] .perm-portal-tile-ico,[data-theme="contrast"] .perm-portal-tile-ico{
  background-image:radial-gradient(circle at 32% 24%, rgba(255,255,255,.22), rgba(255,255,255,0) 58%),
    radial-gradient(circle at 70% 92%, rgba(0,0,0,.28), rgba(0,0,0,0) 60%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -2px 5px rgba(0,0,0,.3), inset 0 0 0 .5px rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.3), 0 2px 6px -2px rgba(0,0,0,.4)}
/* dark-theme toned variants — re-assert the tempered gloss (tone shorthand wipes it; this
   selector (0,2,1) outranks the bare tone rule (0,2,0), so the dark gloss survives). */
[data-theme="midnight"] .perm-card-ico.tone-good,[data-theme="midnight"] .perm-card-ico.tone-warn,[data-theme="midnight"] .perm-card-ico.tone-bad,
[data-theme="midnight"] .insp-card-ico.tone-good,[data-theme="midnight"] .insp-card-ico.tone-warn,[data-theme="midnight"] .insp-card-ico.tone-bad,
[data-theme="midnight"] .reg-card-ico.tone-good,[data-theme="midnight"] .reg-card-ico.tone-warn,[data-theme="midnight"] .reg-card-ico.tone-bad,
[data-theme="contrast"] .perm-card-ico.tone-good,[data-theme="contrast"] .perm-card-ico.tone-warn,[data-theme="contrast"] .perm-card-ico.tone-bad,
[data-theme="contrast"] .insp-card-ico.tone-good,[data-theme="contrast"] .insp-card-ico.tone-warn,[data-theme="contrast"] .insp-card-ico.tone-bad,
[data-theme="contrast"] .reg-card-ico.tone-good,[data-theme="contrast"] .reg-card-ico.tone-warn,[data-theme="contrast"] .reg-card-ico.tone-bad{
  background-image:radial-gradient(circle at 32% 24%, rgba(255,255,255,.22), rgba(255,255,255,0) 58%),
    radial-gradient(circle at 70% 92%, rgba(0,0,0,.28), rgba(0,0,0,0) 60%);
}
[data-theme="midnight"] .esign-dot,[data-theme="contrast"] .esign-dot,
[data-theme="midnight"] .ip-tl-node,[data-theme="contrast"] .ip-tl-node{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -2px 4px rgba(0,0,0,.32), inset 0 0 0 1.5px rgba(255,255,255,.06), 0 2px 5px -2px rgba(0,0,0,.4)}
/* reduced-transparency: drop the gloss gradients/specular, keep solid + flat (a11y) */
@media (prefers-reduced-transparency:reduce){
  #acctHomeView .age-cell .ac-dot,.trw-rail-status-dot,.contacts-dir .peek-status-dot,.psm-row .psr-dot,
  .esign-dot,.ip-tl-node,.header-search-kbd,
  .perm-card-ico,.insp-card-ico,.reg-card-ico,.clog-cat-ico,.file-card-icon,.pk-pick-glyph,.pk-sig-glyph,.perm-portal-tile-ico{background-image:none}
  .esign-dot::after,.ip-tl-node::after,.perm-card-ico::after,.insp-card-ico::after,.reg-card-ico::after,
  .clog-cat-ico::after,.file-card-icon::after,.pk-pick-glyph::after,.pk-sig-glyph::after,.perm-portal-tile-ico::after{display:none}
}
/* === end V-orb3 === */
#estHomeView .surf-head h3 .ic{width:16px;height:16px}
#estHomeView .door.bid{background:linear-gradient(160deg,color-mix(in srgb,var(--color-warning,#f59e0b) 16%,var(--card-bg)),var(--card-bg))}
#estHomeView .door.bid .d-value{color:var(--co-pending-fg,#b45309)}
#estHomeView .door.win{background:linear-gradient(160deg,color-mix(in srgb,var(--color-success,#10b981) 16%,var(--card-bg)),var(--card-bg))}
#estHomeView .door.win .d-value{color:var(--color-success,#137a4b)}
#estHomeView .door.early{background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 8%,var(--card-bg)),var(--card-bg))}
#estHomeView .door.early .d-value{color:var(--text-muted)}
/* pipeline funnel */
#estHomeView .funnel{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
#estHomeView .fstep{position:relative;padding:16px 18px;background:var(--card-bg)}
#estHomeView .fstep:first-child{border-top-left-radius:14px;border-bottom-left-radius:14px}
#estHomeView .fstep:last-child{border-top-right-radius:14px;border-bottom-right-radius:14px}
#estHomeView .fstep::after{content:"›";position:absolute;right:-9px;top:50%;transform:translateY(-50%);z-index:2;color:var(--text-muted);font-size:22px;font-weight:300}
#estHomeView .fstep:last-child::after{display:none}
#estHomeView .fstep .fs-l{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
#estHomeView .fstep .fs-v{font-size:24px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:4px 0 2px;color:var(--text-primary)}
#estHomeView .fstep .fs-n{font-size:11.5px;color:var(--text-secondary);font-weight:600}
#estHomeView .fstep .fs-bar{height:5px;border-radius:999px;margin-top:9px;background:color-mix(in srgb,var(--color-warning,#f59e0b) 18%,var(--surface-2,#eee));overflow:hidden}
#estHomeView .fstep .fs-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--color-warning,#f59e0b),color-mix(in srgb,var(--color-warning,#f59e0b) 80%,#000))}
/* bids-in-court lane */
#estHomeView .court-lane{display:grid;gap:11px}
#estHomeView .bidcard{display:flex;align-items:center;gap:14px;padding:15px 16px;border-radius:16px;background:var(--surface-grad,linear-gradient(160deg,#fff,#f7f8fb));box-shadow:inset 0 1px 0 rgba(255,255,255,.6),var(--shadow-e1);border:.5px solid rgba(0,0,0,.05);cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
#estHomeView .bidcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-e3)}
#estHomeView .bc-due{width:56px;flex:0 0 56px;text-align:center;border-radius:13px;padding:7px 0;background:color-mix(in srgb,var(--color-warning,#f59e0b) 14%,var(--card-bg));box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 6px -3px color-mix(in srgb,var(--color-warning,#f59e0b) 50%,transparent)}
#estHomeView .bc-due .day{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--co-pending-fg,#b45309)}
#estHomeView .bc-due .mon{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--co-pending-fg,#b45309);opacity:.8}
#estHomeView .bc-due.urgent{background:color-mix(in srgb,var(--color-error,#ef4444) 14%,var(--card-bg));box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 6px -3px color-mix(in srgb,var(--color-error,#ef4444) 50%,transparent)}
#estHomeView .bc-due.urgent .day,#estHomeView .bc-due.urgent .mon{color:var(--color-error,#c0392b)}
#estHomeView .bc-body{flex:1;min-width:0}
#estHomeView .bc-name{font-size:14.5px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary)}
#estHomeView .bc-meta{font-size:11.5px;color:var(--text-secondary);font-weight:600;display:flex;gap:10px;flex-wrap:wrap;margin-top:2px}
#estHomeView .bc-prog{margin-top:8px;height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden}
#estHomeView .bc-prog i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--app-accent,#0066d6),color-mix(in srgb,var(--app-accent,#0066d6) 70%,#fff))}
#estHomeView .bc-right{text-align:right;flex:0 0 auto}
#estHomeView .bc-right .amt{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text-primary)}
#estHomeView .bc-right .lab{font-size:10.5px;font-weight:700;color:var(--text-muted)}
/* deck */
#estHomeView .est-deck{display:grid;gap:18px;grid-template-columns:1.5fr 1fr}
@media (max-width:1100px){#estHomeView .est-deck{grid-template-columns:1fr}}
/* active bids list */
#estHomeView .bid-row{display:flex;align-items:center;gap:13px;padding:13px 4px;border-bottom:.5px solid color-mix(in srgb,var(--app-accent) 3%,rgba(0,0,0,.05));cursor:pointer}
#estHomeView .bid-row:last-child{border-bottom:0}
#estHomeView .bid-row:hover{background:var(--hover-overlay,rgba(0,0,0,.025));border-radius:10px}
#estHomeView .br-ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:15px;background:color-mix(in srgb,var(--color-warning,#f59e0b) 12%,var(--card-bg));color:var(--co-pending-fg,#b45309);flex:0 0 auto}
#estHomeView .br-body{flex:1;min-width:0}
#estHomeView .br-name{font-size:13.5px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary)}
#estHomeView .br-sub{font-size:11.5px;color:var(--text-muted);font-weight:600}
#estHomeView .br-amt{font-variant-numeric:tabular-nums;font-weight:800;font-size:14.5px;text-align:right;color:var(--text-primary)}
/* awaiting vendor bids (ITBs out) */
#estHomeView .eitb-row{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:.5px solid color-mix(in srgb,var(--app-accent) 3%,rgba(0,0,0,.05))}
#estHomeView .eitb-row:last-child{border-bottom:0}
#estHomeView .eitb-ico{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:14px;background:var(--type-itb-bg);color:var(--type-itb-fg);flex:0 0 auto}
#estHomeView .eitb-body{flex:1;min-width:0}
#estHomeView .eitb-name{font-size:13px;font-weight:700;color:var(--text-primary)}
#estHomeView .eitb-sub{font-size:11px;color:var(--text-muted);font-weight:600}
#estHomeView .eitb-stat{font-size:11px;font-weight:800;color:var(--co-pending-fg,#b45309);white-space:nowrap}
#estHomeView .est-presence{position:relative;z-index:1;margin-top:14px;display:inline-flex;align-items:center;gap:10px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.16);border:.5px solid rgba(255,255,255,.24);font-size:12px;font-weight:600}
#estHomeView .est-presence .live-dot{box-shadow:0 0 0 3px rgba(255,255,255,.28)}
@media (max-width:760px){#estHomeView .est-doors{grid-template-columns:repeat(2,1fr)}#estHomeView .funnel{grid-template-columns:1fr 1fr}}

/* ============================================================================
   BID PIPELINE (Estimating Batch 3) — the pursuit board. Reuses the Estimator's
   Desk hero/door material (redeclared here, scoped to #bidPipelineView so the
   estHome rules stay untouched) + a horizontal funnel-lane board with drag-to-
   advance cards. Apple-caliber: floating glass cards on the matte, rounded hovers,
   no edge-strips, theme-accent hero. Per DESIGN.md.
   ============================================================================ */
#bidPipelineView .est-wrap{padding:22px 26px 38px;margin:0;display:grid;gap:18px}
@media (max-width:640px){#bidPipelineView .est-wrap{padding:16px 14px 32px;gap:14px}}
#bidPipelineView .bp-hero{--hero-tone:var(--app-accent);position:relative;border-radius:24px;padding:18px 26px 16px;color:var(--hero-ink,var(--on-accent,#fff));overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--hero-tone) 86%,#000) 0%,var(--hero-tone) 58%,color-mix(in srgb,var(--hero-tone) 92%,#000) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),var(--shadow-e4,0 18px 50px -18px rgba(20,30,48,.45))}
#bidPipelineView .bp-hero::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(130% 90% at 0% 0%,rgba(255,255,255,.22),transparent 52%)}
#bidPipelineView .eh-row{position:relative;z-index:1;display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
#bidPipelineView .eh-kicker{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.84}
#bidPipelineView .bp-hero h2{font-size:30px;font-weight:800;letter-spacing:-.025em;margin:4px 0 6px;color:inherit}
#bidPipelineView .eh-sub{font-size:13.5px;opacity:.92;font-weight:600;display:flex;gap:14px;flex-wrap:wrap}
#bidPipelineView .eh-sub b{font-variant-numeric:tabular-nums}
#bidPipelineView .eh-spacer{flex:1}
#bidPipelineView .bp-new-btn{position:relative;z-index:1;flex:0 0 auto}
#bidPipelineView .est-doors{display:grid;gap:13px;grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){#bidPipelineView .est-doors{grid-template-columns:1fr}}
#bidPipelineView .door{position:relative;border-radius:18px;padding:16px 17px;overflow:hidden;background:var(--surface-grad,linear-gradient(160deg,#fff,#f7f8fb));box-shadow:inset 0 1px 0 rgba(255,255,255,.6),var(--shadow-e2);border:.5px solid rgba(0,0,0,.05)}
#bidPipelineView .door .d-label{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
#bidPipelineView .door .d-value{font-size:30px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin:4px 0 2px;line-height:1;color:var(--text-primary)}
#bidPipelineView .door .d-sub{font-size:11.5px;color:var(--text-secondary);font-weight:600}
#bidPipelineView .door .d-ico{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.7);box-shadow:var(--shadow-e1)}
#bidPipelineView .door .d-ico .ic{width:15px;height:15px;color:var(--app-accent)}
/* the funnel board — five lanes, horizontal scroll on narrow viewports */
#bidPipelineView .bp-board{display:grid;grid-template-columns:repeat(5,minmax(220px,1fr));gap:14px;align-items:start}
@media (max-width:1100px){#bidPipelineView .bp-board{grid-auto-flow:column;grid-auto-columns:minmax(240px,80%);grid-template-columns:none;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:8px}#bidPipelineView .bp-lane{scroll-snap-align:start}}
#bidPipelineView .bp-lane{display:flex;flex-direction:column;gap:10px;background:color-mix(in srgb,var(--surface-2,#f3f4f7) 70%,transparent);border-radius:18px;padding:12px 11px;min-height:120px;border:.5px solid rgba(0,0,0,.05);transition:background var(--motion-fast),box-shadow var(--motion-fast)}
#bidPipelineView .bp-lane.bp-drop-on{background:color-mix(in srgb,var(--app-accent) 12%,var(--surface-2,#f3f4f7));box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--app-accent) 45%,transparent)}
#bidPipelineView .bp-lane-head{padding:2px 4px 6px}
#bidPipelineView .bp-lane-title{font-size:13px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary);display:flex;align-items:center;gap:7px}
#bidPipelineView .bp-lane-count{font-size:11px;font-weight:700;color:var(--text-muted);background:var(--surface-1,#fff);border-radius:999px;padding:1px 8px;box-shadow:var(--shadow-e1)}
#bidPipelineView .bp-lane-hint{font-size:10.5px;font-weight:600;color:var(--text-muted);margin-top:2px}
#bidPipelineView .bp-lane-val{font-size:11.5px;font-weight:800;color:var(--text-secondary);font-variant-numeric:tabular-nums;margin-top:3px}
#bidPipelineView .bp-lane-body{display:flex;flex-direction:column;gap:9px;min-height:24px}
#bidPipelineView .bp-lane-empty{font-size:11.5px;color:var(--text-muted);font-weight:600;text-align:center;padding:14px 6px;opacity:.7}
#bidPipelineView .bp-card{background:var(--surface-grad,linear-gradient(160deg,#fff,#f8f9fc));border-radius:14px;padding:12px 13px;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),var(--shadow-e2);border:.5px solid rgba(0,0,0,.06);cursor:grab;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
#bidPipelineView .bp-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-e3)}
#bidPipelineView .bp-card:active{cursor:grabbing}
#bidPipelineView .bp-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
#bidPipelineView .bp-card-name{font-size:13.5px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary);line-height:1.25}
#bidPipelineView .bp-card-val{font-size:12.5px;font-weight:800;color:var(--app-accent);font-variant-numeric:tabular-nums;white-space:nowrap}
#bidPipelineView .bp-card-client{font-size:11.5px;font-weight:600;color:var(--text-secondary);margin-top:2px}
#bidPipelineView .bp-card-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
#bidPipelineView .bp-chip{font-size:10px;font-weight:700;color:var(--text-secondary);background:var(--surface-1,#fff);border-radius:999px;padding:2px 8px;box-shadow:var(--shadow-e1)}
#bidPipelineView .bp-chip-muted{color:var(--text-muted);opacity:.85}
#bidPipelineView .bp-due{font-size:10px;font-weight:800;border-radius:999px;padding:2px 8px}
#bidPipelineView .bp-due-over{color:#fff;background:var(--color-danger,#e5484d)}
#bidPipelineView .bp-due-soon{color:#7a4d00;background:#ffd166}
#bidPipelineView .bp-due-ok{color:var(--text-secondary);background:var(--surface-1,#fff);box-shadow:var(--shadow-e1)}
#bidPipelineView .bp-card-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
#bidPipelineView .bp-act{font-size:11px;font-weight:700;border:none;border-radius:9px;padding:5px 9px;cursor:pointer;background:var(--surface-1,#fff);color:var(--text-secondary);box-shadow:var(--shadow-e1);transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast)}
#bidPipelineView .bp-act:hover{transform:translateY(-1px);background:var(--surface-2,#eef0f4);color:var(--text-primary)}
#bidPipelineView .bp-act-win:hover{background:color-mix(in srgb,var(--color-success,#30a46c) 16%,#fff);color:var(--color-success,#1f7a4d)}
#bidPipelineView .bp-act-lost:hover{background:color-mix(in srgb,var(--color-danger,#e5484d) 14%,#fff);color:var(--color-danger,#c2363b)}
#bidPipelineView .bp-empty{text-align:center;padding:48px 24px}
#bidPipelineView .bp-empty-ico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;margin:0 auto 14px;background:color-mix(in srgb,var(--app-accent) 12%,var(--surface-1,#fff));box-shadow:var(--shadow-e1)}
#bidPipelineView .bp-empty-ico .ic{width:26px;height:26px;color:var(--app-accent)}
#bidPipelineView .bp-empty h3{font-size:18px;font-weight:800;letter-spacing:-.02em;margin:0 0 6px;color:var(--text-primary)}
#bidPipelineView .bp-empty p{font-size:13px;color:var(--text-secondary);max-width:460px;margin:0 auto 16px;line-height:1.5}
/* New Pursuit compact create modal (reuses the .rt-confirm-overlay scrim) */
.bp-new-panel{text-align:left;max-width:440px}
.bp-new-ico{background:color-mix(in srgb,var(--app-accent) 16%,#fff)!important}
.bp-new-ico .ic{color:var(--app-accent)!important}
.bp-new-form{display:flex;flex-direction:column;gap:11px;margin:16px 0 4px}
.bp-new-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.bp-new-row{display:flex;flex-direction:column;gap:5px}
.bp-new-row>span{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
.bp-new-row>span>i{font-style:normal;color:var(--app-accent);opacity:.85;text-transform:none;letter-spacing:0;font-weight:700;margin-left:4px}
.bp-new-row input,.bp-new-row select{font:inherit;font-size:14px;padding:9px 11px;border-radius:10px;border:1px solid var(--border-1,rgba(0,0,0,.12));background:var(--surface-1,#fff);color:var(--text-primary);outline:none;transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
.bp-new-row input:focus,.bp-new-row select:focus{border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 22%,transparent)}

/* ============================================================================
   OWNER HOME — Exec Portfolio Surface, Pass-2 (2026-06-04). Faithful port of
   18-ownerHome.html, driven by the extended /api/reports/portfolio. Scoped under
   #ownerHomeView. Reuses .surf/.chip/.bar-track/.metric-door/.btn-primary/.row/.stack.
   Schedule-confidence % + counts are REAL (health-band rollup); presence omitted.
   ============================================================================ */
#ownerHomeView .own-wrap{padding:22px 24px 48px;margin:0;display:flex;flex-direction:column;gap:16px}
@media (max-width:640px){ #ownerHomeView .own-wrap{padding:16px 14px 36px;gap:14px} }
/* greeting hero (green exec band) */
#ownerHomeView .own-hero{position:relative;overflow:hidden;border-radius:24px;padding:24px 26px;color:var(--hero-ink,var(--on-accent,#fff));
  background:linear-gradient(135deg,color-mix(in srgb,var(--color-success) 72%,#0a3a22),var(--color-success) 55%,color-mix(in srgb,var(--color-success) 80%,#7ee6a8));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),var(--shadow-e4,0 22px 60px -22px rgba(20,60,40,.5))}
#ownerHomeView .own-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 100% 0%,rgba(255,255,255,.2),transparent 55%)}
#ownerHomeView .oh-top{position:relative;z-index:1;display:flex;align-items:flex-end;gap:30px;flex-wrap:wrap}
#ownerHomeView .oh-greet{min-width:0}
#ownerHomeView .oh-k{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.86}
#ownerHomeView .oh-greet h2{font-size:30px;font-weight:800;letter-spacing:-.02em;margin:3px 0 4px}
#ownerHomeView .oh-sub{font-size:13.5px;font-weight:600;opacity:.92}
#ownerHomeView .oh-port{margin-left:auto;text-align:right;border-radius:16px;padding:12px 16px;background:rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.22);transition:transform var(--motion-fast) var(--ease-spring),background var(--motion-fast)}
#ownerHomeView .oh-port:hover{transform:translateY(-2px);background:rgba(255,255,255,.2)}
#ownerHomeView .op-l{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.82}
#ownerHomeView .op-v{font-size:44px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1;margin:3px 0}
#ownerHomeView .op-m{font-size:11.5px;font-weight:600;opacity:.9}
#ownerHomeView .oh-stats{position:relative;z-index:1;display:flex;gap:14px;flex-wrap:wrap;margin-top:16px}
#ownerHomeView .oh-stat{flex:1;min-width:140px;border-radius:14px;padding:12px 14px;background:rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
#ownerHomeView .oh-stat.warn .os-v{color:#ffe08a}
#ownerHomeView .os-l{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;opacity:.82}
#ownerHomeView .os-v{font-size:23px;font-weight:800;font-variant-numeric:tabular-nums;margin:2px 0}
#ownerHomeView .os-m{font-size:11px;font-weight:600;opacity:.88}
/* 2-col grid */
#ownerHomeView .own-grid{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
#ownerHomeView .own-col-main{min-width:0}
@media (max-width:1100px){ #ownerHomeView .own-grid{grid-template-columns:1fr} }
/* health cards */
#ownerHomeView .health-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
@media (max-width:760px){ #ownerHomeView .health-grid{grid-template-columns:1fr} }
#ownerHomeView .hcard{border-radius:18px;padding:15px 16px;background:var(--card-bg);border:.5px solid rgba(0,0,0,.05);box-shadow:var(--bevel-top),var(--shadow-e1);cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
#ownerHomeView .hcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-e3)}
#ownerHomeView .hc-top{display:flex;align-items:flex-start;gap:10px;margin-bottom:11px}
#ownerHomeView .hc-name{font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary)}
#ownerHomeView .hc-loc{font-size:11px;font-weight:600;color:var(--text-muted);margin-top:1px}
#ownerHomeView .hc-health{margin-left:auto;flex:0 0 auto;min-width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
#ownerHomeView .hc-bar{height:9px;margin-bottom:9px}
#ownerHomeView .hc-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11.5px;font-weight:700;margin-bottom:10px}
#ownerHomeView .hc-foot{display:flex;align-items:center;gap:8px}
#ownerHomeView .hc-money{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--color-success);flex-shrink:0}
/* G3-P2 — a long phase label truncates inside the chip instead of crushing the money value. */
#ownerHomeView .chip-phase{color:#fff;font-weight:800;font-size:10px;letter-spacing:.04em;max-width:46%;overflow:hidden;text-overflow:ellipsis;flex-shrink:1}
/* segmented control */
#ownerHomeView .seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--surface-2)}
#ownerHomeView .seg button{border:0;background:transparent;padding:5px 13px;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--text-secondary);cursor:pointer}
#ownerHomeView .seg button.on{background:var(--card-bg);color:var(--text-primary);box-shadow:var(--shadow-e1)}
/* draw / CO / AR rows */
#ownerHomeView .draw-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:11px 0;border-bottom:.5px solid color-mix(in srgb,var(--app-accent) 4%,rgba(0,0,0,.06))}
#ownerHomeView .draw-row:last-child{border-bottom:0}
#ownerHomeView .draw-name{font-size:13px;font-weight:700;color:var(--text-primary)}
#ownerHomeView .draw-sub{font-size:11px;font-weight:600;color:var(--text-muted);margin-top:1px}
#ownerHomeView .draw-amt{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text-primary)}
#ownerHomeView .warn-fg{color:color-mix(in srgb,var(--color-warning) 62%,#5a3800)}
#ownerHomeView .sh-action{margin-left:auto;font-size:12px;font-weight:700;color:var(--app-accent);cursor:pointer}
/* schedule confidence ring (pure CSS conic gauge from REAL confidence_pct) */
#ownerHomeView .conf-wrap{display:flex;align-items:center;gap:18px}
#ownerHomeView .conf-ring{width:96px;height:96px;flex:0 0 96px;border-radius:999px;display:grid;place-items:center;
  background:conic-gradient(var(--color-success) calc(var(--pct,0)*1%),var(--surface-2) 0)}
#ownerHomeView .conf-ring .cr-in{width:74px;height:74px;border-radius:999px;background:var(--card-bg);display:grid;place-items:center}
#ownerHomeView .conf-ring .cr-v{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text-primary)}
#ownerHomeView .conf-leg{display:flex;flex-direction:column;gap:7px}
#ownerHomeView .conf-leg .cl{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--text-secondary)}
#ownerHomeView .conf-leg .cl .d{width:9px;height:9px;border-radius:3px;flex:0 0 9px}
#ownerHomeView .omh-empty{box-shadow:none;background:transparent;padding:8px 2px}

/* Compliance view — top-level page wrapper (reuses the .dc-* board system). */
.compliance-wrap{padding:22px 26px 38px;margin:0;flex:1;min-height:0;overflow-y:auto;width:100%;box-sizing:border-box}
@media (max-width:640px){.compliance-wrap{padding:12px 12px calc(var(--mobile-tabbar-h, 45px) + env(safe-area-inset-bottom, 0px) + 12px)}}
.dc-tile-static{cursor:default}

/* ============================================================================
   COMPLIANCE — RISK COMMAND, Pass-2 (2026-06-04). Faithful port of
   15-compliance.html, driven by the real unified register (GET /api/compliance).
   Reuses shared .tiles/.tile/.panel/.bar-track/.chip; adds page-specific classes
   scoped under .cmp-wrap. §713.13 NOC alert hero is REAL (permit type=NOC + project).
   ============================================================================ */
#complianceView .cmp-wrap{margin:0;display:flex;flex-direction:column;gap:16px}
/* G5-W3 — Coverage tracker pane (additional-insured / limits). Tiles + table; fill-toned pills,
   rounded, no edge-strips; row hover lifts (contained — no overflow clip). */
.cmp-cov-wrap{display:flex;flex-direction:column;gap:14px}
.cmp-cov-intro{font-size:12.5px;color:var(--text-muted);margin:0 2px}
.cmp-cov-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.cmp-cov-tile{text-align:left;background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:14px;padding:13px 15px;cursor:pointer;transition:box-shadow var(--motion-base),transform var(--motion-fast),border-color var(--motion-fast)}
.cmp-cov-tile:hover{box-shadow:var(--shadow-e2);transform:translateY(-2px)}
.cmp-cov-tile.is-on{border-color:color-mix(in srgb,var(--app-accent) 55%,var(--chrome-border));box-shadow:var(--shadow-e1),inset 0 0 0 1px color-mix(in srgb,var(--app-accent) 30%,transparent)}
.cmp-cov-tile-n{font-size:24px;font-weight:780;color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1}
.cmp-cov-tile-l{font-size:11px;font-weight:600;color:var(--text-muted);margin-top:4px}
.cmp-cov-tile.t-warn .cmp-cov-tile-n{color:var(--color-warning,#d97706)}
.cmp-cov-tile.t-error .cmp-cov-tile-n{color:var(--color-error,#dc2626)}
.cmp-cov-tablewrap{padding:4px;overflow-x:auto}
.cmp-cov-table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:640px}
.cmp-cov-table th{text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);padding:10px 12px;border-bottom:1px solid var(--chrome-border)}
.cmp-cov-table td{padding:11px 12px;border-bottom:0.5px solid color-mix(in srgb,var(--chrome-border) 55%,transparent);color:var(--text-secondary);vertical-align:middle}
.cmp-cov-table tbody tr{cursor:pointer;transition:background var(--motion-fast)}
.cmp-cov-table tbody tr:hover{background:color-mix(in srgb,var(--surface-2) 70%,transparent)}
.cmp-cov-table tbody tr:last-child td{border-bottom:0}
.cmp-cov-name{font-weight:650;color:var(--text-primary)}
.cmp-cov-pol{color:var(--text-muted)}
.cmp-cov-lim{font-variant-numeric:tabular-nums;white-space:nowrap}
.cmp-cov-flags{display:inline-flex;gap:5px;flex-wrap:wrap}
.cmp-cov-flag{font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;white-space:nowrap}
.cmp-cov-flag.on{background:color-mix(in srgb,var(--color-success,#16a34a) 16%,transparent);color:color-mix(in srgb,var(--color-success,#16a34a) 80%,var(--text-primary))}
.cmp-cov-flag.off{background:var(--surface-2);color:var(--text-muted);opacity:.7}
.cmp-cov-exp{font-size:11.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.cmp-cov-exp.warn{color:var(--color-warning,#d97706);font-weight:650}
.cmp-cov-exp.bad{color:var(--color-error,#dc2626);font-weight:700}
/* G5-W3 vendor × doc-type matrix — status pills per cell (fill-based, rounded; NO edge-strips) */
.cmp-mx-table th.cmp-mx-th{text-align:center}
.cmp-mx-table td.cmp-mx-td{text-align:center;padding:9px 10px}
.cmp-mx-cell{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:24px;padding:0 9px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.cmp-mx-cell.ok{background:color-mix(in srgb,var(--color-success,#16a34a) 16%,transparent);color:color-mix(in srgb,var(--color-success,#16a34a) 82%,var(--text-primary))}
.cmp-mx-cell.warn{background:color-mix(in srgb,var(--color-warning,#d97706) 18%,transparent);color:color-mix(in srgb,var(--color-warning,#d97706) 88%,var(--text-primary))}
.cmp-mx-cell.exp{background:color-mix(in srgb,var(--color-error,#dc2626) 16%,transparent);color:var(--color-error,#dc2626)}
.cmp-mx-cell.miss{background:var(--surface-2);color:var(--text-muted);opacity:.65;font-weight:600}
/* G6-W4 — Vendor Scorecard pane */
.sc-table{min-width:880px}
.sc-table th.sc-th-c,.sc-table td.sc-td-c{text-align:center}
.sc-table th.sc-th-grade{min-width:118px}
.sc-sortbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:2px 2px 12px;font-size:12px}
.sc-sortbar-l{color:var(--text-muted);font-weight:600;margin-right:2px}
.sc-sort{appearance:none;border:0.5px solid var(--chrome-border);background:var(--card-bg);color:var(--text-secondary);border-radius:var(--radius-pill);padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast)}
.sc-sort:hover{background:color-mix(in srgb,var(--app-accent) 9%,transparent);border-color:color-mix(in srgb,var(--app-accent) 30%,transparent)}
.sc-sort.is-on{background:color-mix(in srgb,var(--app-accent) 16%,transparent);color:var(--app-accent);border-color:color-mix(in srgb,var(--app-accent) 36%,transparent)}
.sc-row{cursor:pointer;transition:background var(--motion-fast)}
.sc-row td{border-radius:0}
.sc-row:hover{background:color-mix(in srgb,var(--app-accent) 7%,transparent)}
.sc-row-at-risk{background:color-mix(in srgb,var(--color-error,#dc2626) 6%,transparent)}
.sc-row-at-risk:hover{background:color-mix(in srgb,var(--color-error,#dc2626) 11%,transparent)}
.sc-name{font-weight:650;color:var(--text-primary)}
/* ===== Vendor CARD GRID (2026-06-26 redesign) — replaces the 236-row flat table. Dense, scannable
   cards; highlight ONLY on hover + the open/selected card (NO always-on tier-tint — that washed the
   whole list since every vendor is watch-tier). Tier reads from the grade pill, not a card wash. ===== */
/* ===== 🐋 VENDOR LEADERBOARD TABLE (2026-07-13 ground-up redo) — replaces the card grid,
   which drowned when hundreds of vendors shared a grade. One dense row per vendor; the
   differences (grade / doc dots / on-time / open / spend) line up in scannable columns. ===== */
#complianceView .vtb-wrap{padding:4px 4px 8px;overflow-x:auto;border-radius:var(--radius-lg)}
#complianceView .vtb{width:100%;border-collapse:collapse;font-size:12.5px;min-width:680px}
#complianceView .vtb th{text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);padding:10px 12px;border-bottom:1px solid var(--chrome-border);position:sticky;top:0;background:var(--card-bg);z-index:1}
#complianceView .vtb td{padding:9px 12px;border-bottom:.5px solid color-mix(in srgb,var(--chrome-border) 55%,transparent);vertical-align:middle}
#complianceView .vtb tbody tr:last-child td{border-bottom:0}
#complianceView .vtb-row{cursor:pointer;transition:background var(--motion-fast)}
#complianceView .vtb-row:hover{background:color-mix(in srgb,var(--app-accent) 7%,transparent)}
#complianceView .vtb-row:hover td:first-child{border-radius:10px 0 0 10px}
#complianceView .vtb-row:hover td:last-child{border-radius:0 10px 10px 0}
#complianceView .vtb-row:focus-visible{outline:none;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--app-accent) 40%,transparent)}
#complianceView .vtb-row.is-selected{background:color-mix(in srgb,var(--app-accent) 10%,transparent)}
#complianceView .vtb-nm{display:block;font-weight:700;color:var(--text-primary);max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#complianceView .vtb-cat{display:block;font-size:10.5px;font-weight:600;color:var(--text-muted);margin-top:1px}
#complianceView .vtb-grade{white-space:nowrap}
#complianceView .vtb-docs .cmp-doc-dots{display:inline-flex;gap:5px;flex-wrap:nowrap}
#complianceView .vtb th.vtb-c,#complianceView .vtb td.vtb-c{text-align:center;white-space:nowrap}
#complianceView .vtb th.vtb-money,#complianceView .vtb td.vtb-money{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text-muted)}
#complianceView .vtb td.vtb-money.has{color:var(--text-primary);font-weight:650}
#complianceView .vtb-sig{text-align:right;white-space:nowrap}
#complianceView .vtb-badge{display:inline-flex;font-size:10px;font-weight:800;letter-spacing:.02em;padding:3px 8px;border-radius:999px;margin-right:6px;white-space:nowrap}
#complianceView .vtb-badge.warn{background:color-mix(in srgb,var(--color-warning) 17%,transparent);color:color-mix(in srgb,var(--color-warning) 68%,#5a3800)}
#complianceView .vtb-chev{width:12px;height:12px;color:var(--text-muted);vertical-align:-1px}
#complianceView .vtb-count{text-align:center;font-size:11.5px;font-weight:600;color:var(--text-muted);padding:9px 0 3px}
/* ===== 🐋 PROCUREMENT COCKPIT (2026-07-13) — aggregation cards on the pfv workspace grid.
   One authored card per cluster (canon #4); pipeline columns divide ONE card, not box soup. */
.proc-card{display:flex;flex-direction:column;gap:10px}
.proc-card-head{display:flex;align-items:center;gap:8px}
.proc-card-head h3{margin:0;font-size:13.5px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary)}
.proc-card-head .ic{width:15px;height:15px;color:var(--app-accent)}
.proc-pipe{display:flex;align-items:stretch;border:.5px solid var(--chrome-border);border-radius:12px;overflow:hidden;background:var(--surface-2)}
.proc-pipe-col{flex:1;min-width:0;display:flex;flex-direction:column}
.proc-pipe-col + .proc-pipe-col{border-left:.5px solid var(--chrome-border)}
.proc-pipe-head{display:flex;align-items:baseline;gap:6px;padding:9px 11px;border:0;background:transparent;cursor:pointer;font-family:inherit;border-bottom:.5px solid var(--chrome-border);transition:background var(--motion-fast)}
.proc-pipe-head:hover{background:color-mix(in srgb,var(--app-accent) 8%,transparent)}
.proc-pipe-l{font-size:11px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--text-muted)}
.proc-pipe-head.t-warn .proc-pipe-l{color:color-mix(in srgb,var(--color-warning) 70%,#5a3800)}
.proc-pipe-head.t-ok .proc-pipe-l{color:var(--color-success)}
.proc-pipe-n{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.proc-pipe-s{margin-left:auto;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-secondary);white-space:nowrap}
.proc-pipe-list{display:flex;flex-direction:column;padding:5px}
.proc-pipe-empty{font-size:11.5px;color:var(--text-muted);padding:9px 8px}
.proc-list{display:flex;flex-direction:column;gap:2px}
.proc-po-row{display:flex;align-items:center;gap:9px;border:0;background:transparent;border-radius:9px;padding:7px 9px;cursor:pointer;font-family:inherit;text-align:left;min-width:0;transition:background var(--motion-fast)}
.proc-po-row:hover{background:color-mix(in srgb,var(--app-accent) 8%,transparent)}
.proc-po-row:focus-visible{outline:none;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--app-accent) 40%,transparent)}
.proc-po-t{flex:1;min-width:0;font-size:12.5px;font-weight:650;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proc-po-v{font-size:11px;font-weight:600;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38%}
.proc-po-a{font-size:12px;font-weight:750;font-variant-numeric:tabular-nums;color:var(--text-primary);white-space:nowrap}
.proc-po-a.proc-ok{color:var(--color-success)}
.proc-po-a.proc-warn{color:color-mix(in srgb,var(--color-warning) 70%,#5a3800)}
.proc-dmg{color:var(--color-error);font-weight:750}
.proc-more{align-self:flex-start;border:0;background:transparent;color:var(--app-accent);font-size:12px;font-weight:700;cursor:pointer;padding:5px 9px;border-radius:8px;font-family:inherit}
.proc-more:hover{background:color-mix(in srgb,var(--app-accent) 9%,transparent)}
.proc-gaps{display:flex;flex-direction:column;gap:2px}
.proc-gap-row{display:flex;align-items:center;gap:10px;border:0;background:transparent;border-radius:9px;padding:6px 9px;cursor:pointer;font-family:inherit;transition:background var(--motion-fast)}
.proc-gap-row:hover{background:color-mix(in srgb,var(--app-accent) 8%,transparent)}
.proc-gap-l{flex:0 0 130px;min-width:0;font-size:12px;font-weight:650;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.proc-gap-bar{flex:1;height:7px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.proc-gap-bar i{display:block;height:100%;border-radius:999px;background:color-mix(in srgb,var(--color-warning) 75%,transparent)}
.proc-gap-v{flex:0 0 auto;font-size:12px;font-weight:750;font-variant-numeric:tabular-nums;color:var(--text-primary)}
@media (max-width:900px){.proc-pipe{flex-wrap:wrap}.proc-pipe-col{flex:1 1 46%}.proc-pipe-col + .proc-pipe-col{border-left:0}.proc-pipe-col:nth-child(n+2){border-top:.5px solid var(--chrome-border)}}
/* ── 🐋 PROCUREMENT LOG v2 ── */
.procl-pgcard .procl-pg-headline{margin-left:auto;font-size:12px;font-weight:700;color:var(--text-secondary)}
.procl-pg-bar{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--surface-2)}
.procl-pg-seg.pg-done{background:var(--color-success)}
.procl-pg-seg.pg-proc{background:color-mix(in srgb,var(--color-success) 45%,var(--app-accent))}
.procl-pg-seg.pg-appr{background:var(--app-accent)}
.procl-pg-seg.pg-samp{background:color-mix(in srgb,var(--color-warning) 80%,transparent)}
.procl-pg-seg.pg-pend{background:color-mix(in srgb,var(--text-muted) 30%,transparent)}
.procl-pg-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;font-weight:650;color:var(--text-secondary)}
.procl-pg-leg i{display:inline-block;width:8px;height:8px;border-radius:3px;margin-right:5px;vertical-align:0}
.procl-pg-leg.pg-done i{background:var(--color-success)}.procl-pg-leg.pg-proc i{background:color-mix(in srgb,var(--color-success) 45%,var(--app-accent))}
.procl-pg-leg.pg-appr i{background:var(--app-accent)}.procl-pg-leg.pg-samp i{background:color-mix(in srgb,var(--color-warning) 80%,transparent)}.procl-pg-leg.pg-pend i{background:color-mix(in srgb,var(--text-muted) 30%,transparent)}
.procl-week .procl-week-sub{margin-left:auto;font-size:11px;font-weight:600;color:var(--text-muted)}
.procl-week-row{cursor:default}
.procl-badge{display:inline-flex;align-items:center;font-size:10.5px;font-weight:750;padding:3px 9px;border-radius:999px;white-space:nowrap}
.procl-badge.err{background:color-mix(in srgb,var(--color-error) 13%,transparent);color:var(--color-error)}
.procl-badge.warn{background:color-mix(in srgb,var(--color-warning) 17%,transparent);color:color-mix(in srgb,var(--color-warning) 68%,#5a3800)}
.procl-badge.ok{background:color-mix(in srgb,var(--color-success) 14%,transparent);color:var(--color-success)}
.procl-badge.info{background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent)}
.procl-badge.muted{background:var(--surface-2);color:var(--text-muted)}
.procl-mini-btn{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:9px;white-space:nowrap}
.procl-head{flex-wrap:wrap}
.procl-chips{display:flex;gap:6px;flex-wrap:wrap;margin-left:6px}
.procl-viewseg{margin-left:auto;display:flex;gap:2px;background:var(--surface-2);border:.5px solid var(--chrome-border);border-radius:999px;padding:2px}
.procl-viewseg button{border:0;background:transparent;border-radius:999px;padding:5px 13px;font-size:11.5px;font-weight:700;color:var(--text-secondary);cursor:pointer;font-family:inherit;white-space:nowrap;transition:background var(--motion-fast),color var(--motion-fast)}
.procl-viewseg button:hover{color:var(--text-primary)}
.procl-viewseg button.on{background:var(--card-bg);color:var(--text-primary);box-shadow:var(--shadow-e1)}
.procl-add-btn{font-size:12px;padding:6px 12px}
.procl-addform{display:flex;gap:7px;flex-wrap:wrap;padding:10px;border:.5px dashed var(--chrome-border);border-radius:12px;background:var(--surface-2)}
.procl-addform .field-input{flex:1;min-width:120px;font-size:12.5px}
.procl-addform #proclAddTitle{flex:2.2;min-width:220px}
.procl-empty{padding:26px 18px;text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center}
.procl-empty-t{font-size:14.5px;font-weight:800;color:var(--text-primary)}
.procl-empty-s{font-size:12.5px;color:var(--text-secondary);max-width:56ch}
.procl-tablewrap{overflow-x:auto}
.procl-table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:760px}
.procl-table th{text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);padding:8px 10px;border-bottom:1px solid var(--chrome-border)}
.procl-table td{padding:8px 10px;border-bottom:.5px solid color-mix(in srgb,var(--chrome-border) 55%,transparent);vertical-align:middle}
.procl-row{cursor:pointer;transition:background var(--motion-fast)}
.procl-row:hover{background:color-mix(in srgb,var(--app-accent) 6%,transparent)}
.procl-row.is-open{background:color-mix(in srgb,var(--app-accent) 9%,transparent)}
.procl-t{display:block;font-weight:700;color:var(--text-primary)}
.procl-sub{display:block;font-size:11px;font-weight:600;color:var(--text-muted)}
.procl-dim{color:var(--text-muted);opacity:.7}
.procl-chip-n{display:inline-flex;margin-left:6px;font-size:10px;font-weight:800;background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent);border-radius:999px;padding:1px 7px;vertical-align:1px}
.procl-c-num,.procl-c-date{white-space:nowrap;font-variant-numeric:tabular-nums}
.procl-c-ob{white-space:nowrap}
.procl-status-sel{font:inherit;font-size:12px;font-weight:650;padding:4px 8px;border-radius:9px;border:.5px solid var(--chrome-border);background:var(--card-bg);color:var(--text-primary);cursor:pointer}
.procl-c-run{min-width:120px}
.procl-run{position:relative;display:block;height:12px;border-radius:999px;background:var(--surface-2);overflow:visible;min-width:110px}
.procl-run-span{position:absolute;top:2px;bottom:2px;border-radius:999px;background:color-mix(in srgb,var(--app-accent) 45%,transparent)}
.procl-run-span.err{background:color-mix(in srgb,var(--color-error) 45%,transparent)}
.procl-run-span.warn{background:color-mix(in srgb,var(--color-warning) 55%,transparent)}
.procl-run-span.ok{background:color-mix(in srgb,var(--color-success) 45%,transparent)}
.procl-run-ros{position:absolute;top:-2px;bottom:-2px;width:2.5px;border-radius:2px;background:var(--text-primary);opacity:.75}
.procl-run-today{position:absolute;top:-3px;bottom:-3px;width:2px;border-radius:2px;background:var(--color-error)}
.procl-detail-row > td{padding:0 10px 12px;background:color-mix(in srgb,var(--app-accent) 4%,transparent)}
.procl-drawer{padding:12px 6px 4px}
.procl-drawer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.procl-dsec-wide{grid-column:1/-1}
.procl-dsec-h{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
.procl-dsec-hint{font-weight:600;text-transform:none;letter-spacing:0;opacity:.8}
.procl-quotes{display:flex;gap:10px;overflow-x:auto;align-items:stretch;padding-bottom:4px}
.procl-q{flex:0 0 200px;display:flex;flex-direction:column;gap:5px;border:.5px solid var(--chrome-border);border-radius:12px;padding:11px 12px;background:var(--card-bg);box-shadow:var(--shadow-e1)}
.procl-q.is-sel{border-color:var(--app-accent);box-shadow:var(--shadow-e1),0 0 0 1.5px color-mix(in srgb,var(--app-accent) 45%,transparent)}
.procl-q-v{font-size:12.5px;font-weight:750;color:var(--text-primary)}
.procl-q-c{font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary);font-variant-numeric:tabular-nums}
.procl-q-line{font-size:11px;color:var(--text-secondary);line-height:1.35}
.procl-q-line span{display:block;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted)}
.procl-q-link{font-size:11.5px;font-weight:700;color:var(--app-accent);text-decoration:none}
.procl-q .procl-mini-btn{margin-top:auto;align-self:flex-start}
.procl-q-add{background:var(--surface-2);border-style:dashed;flex-basis:220px}
.procl-q-add .field-input{font-size:11.5px;padding:5px 8px}
.procl-sample,.procl-inline-add{display:flex;align-items:center;gap:8px;padding:5px 0}
.procl-sample .procl-t{flex:1;font-size:12.5px}
.procl-inline-add .field-input{flex:1;font-size:12px}
.procl-links{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.procl-link{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:650;background:var(--surface-2);border:.5px solid var(--chrome-border);border-radius:999px;padding:3px 6px 3px 10px}
.procl-link a,.procl-link > span{display:inline-flex;align-items:center;gap:5px;color:var(--text-primary);text-decoration:none}
.procl-link .ic{width:11px;height:11px;color:var(--app-accent)}
.procl-link button{border:0;background:transparent;color:var(--text-muted);cursor:pointer;font-size:13px;padding:0 4px;border-radius:99px}
.procl-link button:hover{color:var(--color-error)}
.procl-flds{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.procl-fld{display:flex;flex-direction:column;gap:3px;font-size:10.5px;font-weight:700;color:var(--text-muted)}
.procl-fld .field-input{font-size:12px;padding:5px 8px}
.procl-fld-wide{margin-top:8px}
.procl-hist{font-size:11.5px;color:var(--text-secondary);padding:3px 0;line-height:1.4}
.procl-hist-when{font-weight:700;color:var(--text-muted);margin-right:7px;font-variant-numeric:tabular-nums}
.procl-runway{display:flex;flex-direction:column;gap:3px}
.procl-runway-row{display:grid;grid-template-columns:minmax(120px,.9fr) minmax(140px,1.6fr) auto;align-items:center;gap:12px;border:0;background:transparent;border-radius:10px;padding:7px 9px;cursor:pointer;font-family:inherit;text-align:left;transition:background var(--motion-fast)}
.procl-runway-row:hover{background:color-mix(in srgb,var(--app-accent) 7%,transparent)}
.procl-runway-l{font-size:12.5px;font-weight:700;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.procl-fin-room{margin-bottom:12px}
.procl-fin-roomhead{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text-secondary);padding:6px 4px;border-bottom:1px solid var(--chrome-border);margin-bottom:4px}
.procl-fin-row{display:grid;grid-template-columns:minmax(120px,1fr) minmax(120px,1.3fr) minmax(90px,.9fr) auto;align-items:center;gap:10px;width:100%;border:0;background:transparent;border-radius:10px;padding:7px 8px;cursor:pointer;font-family:inherit;text-align:left;transition:background var(--motion-fast)}
.procl-fin-row:hover{background:color-mix(in srgb,var(--app-accent) 7%,transparent)}
.procl-fin-prod{font-size:12px;font-weight:600;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:900px){.procl-drawer-grid{grid-template-columns:1fr}}
/* 🦩 drawer quotes stack on small screens (the h-scroll row overflowed the drawer) */
@media (max-width:640px){.procl-quotes{flex-direction:column}.procl-q,.procl-q-add{flex:1 1 auto}}
/* 🦩 PO / submittal doors on log rows */
.procl-door{border:0;cursor:pointer;font-family:inherit;transition:background var(--motion-fast)}
.procl-door:hover{background:color-mix(in srgb,var(--app-accent) 24%,transparent)}
/* 🦩 submittal read-through strip */
.procl-subread{margin-top:12px;border-top:1px dashed var(--chrome-border);padding-top:10px}
.procl-subread-h{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
.procl-subread-h .ic{width:13px;height:13px;color:var(--app-accent)}
.procl-subread-row{display:grid;grid-template-columns:minmax(140px,1.4fr) minmax(120px,1fr) auto auto;align-items:center;gap:10px;padding:6px 4px;border-radius:10px}
.procl-subread-row:hover{background:color-mix(in srgb,var(--app-accent) 5%,transparent)}
.procl-subread-row .procl-t{font-size:12.5px}
@media (max-width:640px){.procl-subread-row{grid-template-columns:1fr auto;row-gap:3px}}
/* 🦩 remaining-to-buy uncategorized hint */
.proc-gap-hint{font-size:11px;font-weight:600;color:var(--text-muted);padding:7px 2px 0}
/* Compact risk hero (🐋): the hero earns its footprint — tighter rhythm, flags as a slim strip */
#complianceView .cmp-risk-hero{padding:14px 16px;gap:11px}
#complianceView .cmp-rh-ico{width:38px;height:38px;flex-basis:38px;border-radius:11px}
#complianceView .cmp-rh-ico .ic{width:20px;height:20px}
#complianceView .cmp-rh-head{font-size:16.5px}
#complianceView .cmp-rh-flag{padding:9px 12px;min-width:160px}
/* Vendor toolbar controls — live in the SAME single-row wrapping .cmp-toolbar container as
   the Expiry toolbar (no forced 2-row column). Slots: filter group · spacer · sort · trade ·
   flags · search — identical skeleton/height to Expiry, so the bar never grows/shrinks on toggle. */
#complianceView .cmp-trade-sel{font:inherit;font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:10px;border:.5px solid var(--chrome-border);background:var(--card-bg);color:var(--text-primary);max-width:180px;cursor:pointer}
#complianceView .cmp-tb-div{width:1px;align-self:stretch;min-height:22px;background:var(--chrome-border)}
#complianceView .cmp-tb-sigs{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}
#complianceView .cmp-tb-sigl{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
#complianceView .cmp-fchip-sig{font-size:12px}
#complianceView .cmp-fchip-clear{color:var(--text-muted);font-weight:700}
#complianceView .cmp-fchip-clear:hover{color:var(--color-error)}
.cmp-empty-clear{border:0;background:transparent;color:var(--app-accent);font-weight:700;cursor:pointer;text-decoration:underline;font-size:inherit;font-family:inherit}
.sc-cat{display:block;font-size:10.5px;color:var(--text-muted);margin-top:1px}
.sc-td-grade{white-space:nowrap}
.sc-grade{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-pill);padding:3px 10px 3px 4px;font-size:11px;font-weight:700}
.sc-grade-score{display:inline-grid;place-items:center;min-width:24px;height:22px;border-radius:999px;background:rgba(255,255,255,.5);font-variant-numeric:tabular-nums;font-size:11.5px}
.sc-grade-lbl{letter-spacing:.2px}
.sc-grade.sc-excellent{background:color-mix(in srgb,var(--color-success,#16a34a) 16%,transparent);color:color-mix(in srgb,var(--color-success,#16a34a) 82%,var(--text-primary))}
.sc-grade.sc-excellent .sc-grade-score{background:color-mix(in srgb,var(--color-success,#16a34a) 26%,transparent)}
.sc-grade.sc-good{background:color-mix(in srgb,var(--color-success,#16a34a) 11%,transparent);color:color-mix(in srgb,var(--color-success,#16a34a) 78%,var(--text-primary))}
.sc-grade.sc-good .sc-grade-score{background:color-mix(in srgb,var(--color-success,#16a34a) 20%,transparent)}
.sc-grade.sc-watch{background:color-mix(in srgb,var(--color-warning,#d97706) 18%,transparent);color:color-mix(in srgb,var(--color-warning,#d97706) 88%,var(--text-primary))}
.sc-grade.sc-watch .sc-grade-score{background:color-mix(in srgb,var(--color-warning,#d97706) 28%,transparent)}
.sc-grade.sc-atrisk{background:color-mix(in srgb,var(--color-error,#dc2626) 17%,transparent);color:var(--color-error,#dc2626)}
.sc-grade.sc-atrisk .sc-grade-score{background:color-mix(in srgb,var(--color-error,#dc2626) 26%,transparent)}
.sc-reason{display:block;font-size:10.5px;color:var(--text-muted);margin-top:3px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-stars{color:var(--color-warning,#d97706);font-size:12.5px;letter-spacing:.5px}
.sc-norate,.sc-na{color:var(--text-muted);opacity:.6}
.sc-ontime{font-variant-numeric:tabular-nums}
.sc-ontime-good{background:color-mix(in srgb,var(--color-success,#16a34a) 16%,transparent);color:color-mix(in srgb,var(--color-success,#16a34a) 82%,var(--text-primary))}
.sc-ontime-warn{background:color-mix(in srgb,var(--color-warning,#d97706) 18%,transparent);color:color-mix(in srgb,var(--color-warning,#d97706) 88%,var(--text-primary))}
.sc-ontime-alert{background:color-mix(in srgb,var(--color-error,#dc2626) 16%,transparent);color:var(--color-error,#dc2626)}
.sc-td-money{white-space:nowrap;min-width:128px}
.sc-money{font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.sc-money.sc-open{color:color-mix(in srgb,var(--color-warning,#d97706) 88%,var(--text-primary))}
.sc-sub{display:block;font-size:10px;color:var(--text-muted);margin-top:1px}
.sc-bar{display:block;height:5px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-top:4px;max-width:120px}
.sc-bar-fill{display:block;height:100%;border-radius:999px;transition:width var(--motion-base) var(--ease-spring)}
.sc-bar-spend{background:linear-gradient(90deg,color-mix(in srgb,var(--app-accent) 60%,#fff),var(--app-accent))}
.sc-bar-open{background:linear-gradient(90deg,color-mix(in srgb,var(--color-warning,#d97706) 55%,#fff),var(--color-warning,#d97706))}
.sc-last{font-variant-numeric:tabular-nums;color:var(--text-secondary);white-space:nowrap}
@media (max-width:760px){.sc-reason{max-width:120px}}
/* alert hero — red risk-command band (or calm all-clear variant) */
.cmp-wrap .alert-hero{position:relative;overflow:hidden;border-radius:22px;padding:22px 24px;color:#fff;
  background:linear-gradient(135deg,color-mix(in srgb,var(--color-error) 78%,#3a0c08),var(--color-error) 55%,color-mix(in srgb,var(--color-error) 82%,#ff7a5c));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 50px -18px rgba(180,30,30,.5)}
.cmp-wrap .alert-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.22),transparent 55%)}
.cmp-wrap .alert-hero.ah-clear{background:linear-gradient(135deg,color-mix(in srgb,var(--color-success) 70%,#0a3a22),var(--color-success) 60%,color-mix(in srgb,var(--color-success) 80%,#7ee6a8));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 50px -18px rgba(30,150,80,.45)}
.cmp-wrap .ah-top{position:relative;z-index:1;display:flex;align-items:flex-start;gap:14px}
.cmp-wrap .ah-siren{width:46px;height:46px;flex:0 0 46px;border-radius:14px;display:grid;place-items:center;font-size:22px;background:rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.cmp-wrap .ah-siren .ic{width:24px;height:24px;color:#fff}
.cmp-wrap .ah-main{min-width:0}
.cmp-wrap .ah-kicker{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.92}
.cmp-wrap .ah-head{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:3px 0}
.cmp-wrap .ah-sub{font-size:13px;font-weight:600;opacity:.92;max-width:70ch}
.cmp-wrap .ah-flags{position:relative;z-index:1;display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
/* 2026-06-20 — hero flag tiles: a specular bevel + a real shadow bloom on hover (was a
   flat bg-swap) and a press-deform (squish + shadow-tuck on :active) so they read as
   tactile glass keys on the hero. */
.cmp-wrap .ah-flag{flex:1;min-width:170px;text-align:left;border:0;cursor:pointer;border-radius:14px;padding:12px 14px;color:#fff;background:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.22);transition:transform var(--motion-fast) var(--ease-spring),background var(--motion-fast),box-shadow var(--motion-base)}
.cmp-wrap .ah-flag:hover{transform:translateY(-3px);background:rgba(255,255,255,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 30px -12px rgba(0,0,0,.45)}
.cmp-wrap .ah-flag:active{transform:translateY(-1px) scale(.97);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 4px 10px -6px rgba(0,0,0,.4)}
.cmp-wrap .ah-flag:focus-visible{outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 3px rgba(255,255,255,.5)}
.cmp-wrap .ah-flag .afl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;opacity:.85}
.cmp-wrap .ah-flag .afv{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;margin:2px 0}
.cmp-wrap .ah-flag .afm{font-size:11.5px;opacity:.9}
/* vitals tile click affordance */
.cmp-wrap .tile.metric-door{cursor:pointer;text-align:left;width:100%;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
.cmp-wrap .tile.metric-door:hover{transform:translateY(-2px);box-shadow:var(--shadow-e3)}
.cmp-wrap .tile.tile-on{box-shadow:var(--shadow-e2),inset 0 0 0 1.5px color-mix(in srgb,var(--app-accent) 45%,transparent)}
.cmp-wrap .tile .tl-label{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.cmp-wrap .tile .tl-sub{font-size:11.5px;font-weight:600;color:var(--text-secondary);margin-top:2px}
/* filter bar */
.cmp-wrap .cmp-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cmp-wrap .cmp-bar .spacer{flex:1}
.cmp-wrap .cmp-seg-lbl{font-size:12px;font-weight:600;color:var(--text-muted)}
.cmp-wrap .cmp-seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--surface-2)}
.cmp-wrap .cmp-seg button{border:0;background:transparent;padding:5px 13px;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--text-secondary);cursor:pointer}
.cmp-wrap .cmp-seg button.on{background:var(--card-bg);color:var(--text-primary);box-shadow:var(--shadow-e1)}
/* 2-col grid: rows + rail */
.cmp-wrap .cmp-grid{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
/* (legacy 2-col surface folded into the unified .cmp-surface frame, 2026-06-28) */
#complianceView .cmp-detail-rail{margin:0}
.cmp-wrap .cmp-col-main{min-width:0}
.cmp-wrap .cmp-panel{padding:4px 16px 8px}
.cmp-wrap .cmp-zone{padding:14px 0}
.cmp-wrap .cmp-zone + .cmp-zone{border-top:.5px solid var(--chrome-border)}
/* 2026-06-20 — group header: more breathing room (whitespace above + below), a colored
   icon circle leading the label, and a 0.75px divider line extending across. */
.cmp-wrap .cgrp-head{display:flex;align-items:center;gap:11px;margin:6px 0 13px}
.cmp-wrap .cgh-circle{width:28px;height:28px;flex:0 0 28px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);box-shadow:var(--bevel-top),inset 0 0 0 .5px var(--chrome-border)}
.cmp-wrap .cgh-circle .ic{width:15px;height:15px;color:var(--text-secondary)}
.cmp-wrap .cgh-circle.cgh-err{background:color-mix(in srgb,var(--color-error) 16%,var(--card-bg));box-shadow:var(--bevel-top),inset 0 0 0 .5px color-mix(in srgb,var(--color-error) 30%,transparent)}
.cmp-wrap .cgh-circle.cgh-err .ic{color:var(--color-error)}
.cmp-wrap .cgh-circle.cgh-warn{background:color-mix(in srgb,var(--color-warning) 18%,var(--card-bg));box-shadow:var(--bevel-top),inset 0 0 0 .5px color-mix(in srgb,var(--color-warning) 32%,transparent)}
.cmp-wrap .cgh-circle.cgh-warn .ic{color:color-mix(in srgb,var(--color-warning) 70%,#5a3800)}
.cmp-wrap .cgh-circle.cgh-ok{background:color-mix(in srgb,var(--color-success) 15%,var(--card-bg));box-shadow:var(--bevel-top),inset 0 0 0 .5px color-mix(in srgb,var(--color-success) 30%,transparent)}
.cmp-wrap .cgh-circle.cgh-ok .ic{color:var(--color-success)}
.cmp-wrap .cgh-circle.cgh-info{background:color-mix(in srgb,var(--color-info) 15%,var(--card-bg));box-shadow:var(--bevel-top),inset 0 0 0 .5px color-mix(in srgb,var(--color-info) 30%,transparent)}
.cmp-wrap .cgh-circle.cgh-info .ic{color:var(--color-info)}
.cmp-wrap .cgh-t{font-size:13px;font-weight:800}
.cmp-wrap .cgh-t.cgh-err{color:var(--color-error)}
.cmp-wrap .cgh-t.cgh-warn{color:color-mix(in srgb,var(--color-warning) 62%,#5a3800)}
.cmp-wrap .cgh-t.cgh-ok{color:var(--color-success)}
.cmp-wrap .cgh-c{font-size:11.5px;font-weight:700;color:var(--text-muted);background:var(--surface-2);border-radius:999px;min-width:20px;text-align:center;padding:1px 7px}
.cmp-wrap .cgrp-head .hair{flex:1;border:0;border-top:.75px solid var(--chrome-border);margin:0}
/* status-toned compliance row */
/* 2026-06-20 — the compliance rows live inside a scroll panel, so per the rounded-hover
   rule they must NOT lift (a transform/shadow lift inside a clipped/scrolling list reads
   as a glitch + can clip). Hover = a CONTAINED rounded accent bg-tint only (no transform,
   no shadow, no padding shift). The row already carries a 12px radius so the fill is rounded. */
.cmp-wrap .crow{display:flex;align-items:center;gap:13px;padding:12px 12px;margin:0 -12px;border-radius:12px;cursor:pointer;position:relative;transition:background var(--motion-fast)}
.cmp-wrap .crow:hover{background:color-mix(in srgb,var(--app-accent) 7%,transparent)}
.cmp-wrap .crow:active{background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
.cmp-wrap .crow:focus-visible{outline:none;background:color-mix(in srgb,var(--app-accent) 7%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--app-accent) 40%,transparent)}
.cmp-wrap .crow-ico{width:40px;height:40px;flex:0 0 40px;border-radius:12px;display:grid;place-items:center;font-size:18px;background:var(--surface-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.cmp-wrap .crow-ico .ic{width:19px;height:19px;color:var(--text-secondary)}
.cmp-wrap .crow.tone-err .crow-ico .ic{color:var(--color-error)}
.cmp-wrap .crow.tone-warn .crow-ico .ic{color:var(--color-warning)}
.cmp-wrap .crow.tone-info .crow-ico .ic{color:var(--color-info)}
.cmp-wrap .crow.tone-ok .crow-ico .ic{color:var(--color-success)}
.cmp-wrap .crow.tone-err .crow-ico{background:color-mix(in srgb,var(--color-error) 16%,var(--card-bg))}
.cmp-wrap .crow.tone-warn .crow-ico{background:color-mix(in srgb,var(--color-warning) 18%,var(--card-bg))}
.cmp-wrap .crow.tone-info .crow-ico{background:color-mix(in srgb,var(--color-info) 16%,var(--card-bg))}
.cmp-wrap .crow.tone-ok .crow-ico{background:color-mix(in srgb,var(--color-success) 15%,var(--card-bg))}
.cmp-wrap .crow-body{flex:1;min-width:0}
.cmp-wrap .crow-name{font-size:14px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-wrap .crow-meta{display:flex;align-items:center;gap:14px;margin-top:4px;flex-wrap:wrap;font-size:11.5px;font-weight:600;color:var(--text-muted)}
.cmp-wrap .crow-meta .m-ico{opacity:.55;margin-right:4px;display:inline-flex;align-items:center}
.cmp-wrap .crow-meta .m-ico .ic{width:12px;height:12px;vertical-align:-1px}
.cmp-wrap .crow-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}
/* Quiet per-row delete on compliance doc rows — appears on row hover, rounded
   danger-tinted hover (rounded-hover rule), full opacity on touch devices. */
.cmp-wrap .crow-del{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:transparent;color:var(--text-muted);cursor:pointer;opacity:0;transition:opacity var(--motion-fast),background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.cmp-wrap .crow:hover .crow-del,.cmp-wrap .crow-del:focus-visible{opacity:1}
.cmp-wrap .crow-del:hover{background:color-mix(in srgb,var(--color-error) 12%,transparent);color:var(--color-error)}
.cmp-wrap .crow-del:active{transform:scale(.9)}
.cmp-wrap .crow-del:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-error) 24%,transparent)}
.cmp-wrap .crow-del .ic{width:14px;height:14px}
@media (hover:none){.cmp-wrap .crow-del{opacity:1}}
/* Per-row compliance nudge — mirrors .crow-del geometry/reveal but accent-tinted (request, not destroy). Rounded hover; full opacity on touch. */
.cmp-wrap .crow-act{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:transparent;color:var(--text-muted);cursor:pointer;opacity:0;transition:opacity var(--motion-fast),background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.cmp-wrap .crow:hover .crow-act,.cmp-wrap .crow-act:focus-visible{opacity:1}
.cmp-wrap .crow-act:hover{background:var(--accent-tint);color:var(--accent)}
.cmp-wrap .crow-act:active{transform:scale(.9)}
.cmp-wrap .crow-act:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
.cmp-wrap .crow-act .ic{width:14px;height:14px}
@media (hover:none){.cmp-wrap .crow-act{opacity:1}}
.cmp-wrap .crow-when{text-align:right}
.cmp-wrap .crow-when .cw-v{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.cmp-wrap .crow-when .cw-l{font-size:10.5px;font-weight:600;color:var(--text-muted);white-space:nowrap}
.cmp-wrap .crow-when.cw-err .cw-v{color:var(--color-error)}
.cmp-wrap .crow-when.cw-warn .cw-v{color:color-mix(in srgb,var(--color-warning) 62%,#5a3800)}
.cmp-wrap .crow-when.cw-muted .cw-v{color:var(--text-secondary)}
/* right rail rollup */
/* V133 (2026-06-20) — the compliance rail shows STATIC compliance scores =
   CONTENT, so it must be an OPAQUE solid panel (legibility-first), never glass.
   Explicit .rt-panel-solid treatment: opaque --card-bg + --shadow-e2 + the lit
   --lg-edge specular + the proper --chrome-border hairline (the base .panel used
   a near-invisible rgba(0,0,0,.05) border that vanishes on midnight/dark). This
   overrides the later, equal-specificity base .panel rule via the scoped
   selector. */
.cmp-wrap .cmp-detail-rail .panel{padding:0;background:var(--card-bg);border-radius:var(--radius-lg);
  box-shadow:var(--lg-edge),var(--shadow-e2);border:.5px solid var(--chrome-border)}
.cmp-wrap .cmp-detail-rail .zone{padding:16px 18px}
.cmp-wrap .cmp-detail-rail .zone + .zone{border-top:.5px solid var(--chrome-border)}
.cmp-wrap .cmp-detail-rail .zone-head h3{font-size:14px;font-weight:700;margin:0}
.cmp-wrap .rollup-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:.5px solid var(--chrome-border);cursor:pointer}
.cmp-wrap .rollup-item:last-child{border-bottom:0}
.cmp-wrap .rollup-l{flex:1;min-width:0}
.cmp-wrap .rollup-name{font-size:13px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-wrap .rollup-sub{font-size:11px;font-weight:600;color:var(--text-muted);margin:1px 0 5px}
.cmp-wrap .rollup-item .bar-track{width:100%}
.cmp-wrap .rb-score{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;flex:0 0 auto}
.cmp-wrap .rb-error{color:var(--color-error)}
.cmp-wrap .rb-warn{color:color-mix(in srgb,var(--color-warning) 62%,#5a3800)}
.cmp-wrap .rb-success{color:var(--color-success)}
/* Risk leaderboard — conic ring fills proportional to score + tones with risk (real r.score/r.tone). */
.cmp-wrap .rb-score{position:relative;width:38px;height:38px;border-radius:999px;display:grid;place-items:center;background:conic-gradient(var(--rbc,var(--app-accent)) calc(var(--s,0)*1%),var(--surface-2) 0);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.cmp-wrap .rb-score::after{content:"";position:absolute;inset:4px;border-radius:999px;background:var(--card-bg);box-shadow:inset 0 1px 2px rgba(0,0,0,.08)}
.cmp-wrap .rb-score>span{position:relative;z-index:1;font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.cmp-wrap .rb-score.rb-error{--rbc:var(--color-error)} .cmp-wrap .rb-score.rb-error>span{color:var(--color-error)}
.cmp-wrap .rb-score.rb-warn{--rbc:var(--color-warning)} .cmp-wrap .rb-score.rb-warn>span{color:color-mix(in srgb,var(--color-warning) 80%,var(--text-primary))}
.cmp-wrap .rb-score.rb-success{--rbc:var(--color-success)} .cmp-wrap .rb-score.rb-success>span{color:var(--color-success)}
.cmp-wrap .rollup-item{border-radius:12px;padding:10px 10px;transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.cmp-wrap .rollup-item:hover{background:color-mix(in srgb,var(--app-accent) 5%,transparent)}
.cmp-wrap .rollup-item:active{transform:scale(.99)}
@media (prefers-reduced-motion:reduce){.cmp-wrap .rollup-item{transition:none}}
/* Hero horizon-distribution strip — leads the rollup with register shape (real `all` data). */
.cmp-wrap .cmp-dist{margin-top:14px}
.cmp-wrap .cmp-dist-bar{display:flex;gap:3px;height:10px;border-radius:999px;overflow:hidden;background:var(--surface-2)}
.cmp-wrap .cmp-dist-seg{border-radius:999px;min-width:4px;transition:flex var(--motion-slow) var(--ease-out),filter var(--motion-fast),transform var(--motion-fast)}
.cmp-wrap .cmp-dist-seg.cmp-dist-door{cursor:pointer}
.cmp-wrap .cmp-dist-seg.cmp-dist-door:hover{filter:brightness(1.12) saturate(1.1);transform:scaleY(1.35)}
.cmp-wrap .cmp-dist-seg.cmp-dist-door:focus-visible{outline:2px solid color-mix(in srgb,var(--app-accent) 55%,transparent);outline-offset:2px}
.cmp-wrap .cmp-dist-legend .cmp-dist-door{cursor:pointer;border-radius:6px;padding:1px 5px;margin:0 -3px;transition:background var(--motion-fast)}
.cmp-wrap .cmp-dist-legend .cmp-dist-door:hover{background:color-mix(in srgb,currentColor 12%,transparent)}
.cmp-wrap .cmp-dist-seg.cd-err{background:linear-gradient(90deg,color-mix(in srgb,var(--color-error) 78%,#fff),var(--color-error))}
.cmp-wrap .cmp-dist-seg.cd-warn{background:linear-gradient(90deg,color-mix(in srgb,var(--color-warning) 76%,#fff),var(--color-warning))}
.cmp-wrap .cmp-dist-seg.cd-info{background:linear-gradient(90deg,color-mix(in srgb,var(--color-info) 76%,#fff),var(--color-info))}
.cmp-wrap .cmp-dist-seg.cd-ok{background:color-mix(in srgb,var(--color-success) 60%,var(--surface-2))}
.cmp-wrap .cmp-dist-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:9px;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.cmp-wrap .cmp-dist-legend span{display:inline-flex;align-items:center;gap:5px;color:var(--text-muted)}
.cmp-wrap .cmp-dist-legend span::before{content:"";width:8px;height:8px;border-radius:999px;flex:0 0 8px}
.cmp-wrap .cmp-dist-legend .cd-err{color:var(--color-error)} .cmp-wrap .cmp-dist-legend .cd-err::before{background:var(--color-error)}
.cmp-wrap .cmp-dist-legend .cd-warn{color:color-mix(in srgb,var(--color-warning) 82%,var(--text-primary))} .cmp-wrap .cmp-dist-legend .cd-warn::before{background:var(--color-warning)}
.cmp-wrap .cmp-dist-legend .cd-info{color:var(--color-info)} .cmp-wrap .cmp-dist-legend .cd-info::before{background:var(--color-info)}
.cmp-wrap .cmp-dist-legend .cd-ok{color:var(--text-secondary)} .cmp-wrap .cmp-dist-legend .cd-ok::before{background:color-mix(in srgb,var(--color-success) 60%,var(--text-muted))}
@media (prefers-reduced-motion:reduce){.cmp-wrap .cmp-dist-seg{transition:none}}
.cmp-wrap .doc-chips{display:flex;gap:6px;flex-wrap:wrap}
.cmp-wrap .peek-empty-line{font-size:12px;color:var(--text-muted)}
@media (max-width:1100px){ .cmp-wrap .cmp-grid{grid-template-columns:1fr} .cmp-wrap .cmp-detail-rail{order:-1} }
@media (max-width:640px){
  /* The compliance row reflows on phones: icon + name/meta stay on the top line; the
     right-hand when/actions block wraps to a full-width second line below. The meta line
     truncates with an ellipsis so a long project/permit string never overflows. */
  .cmp-wrap .crow{flex-wrap:wrap;align-items:flex-start;gap:8px 11px;padding:11px 12px}
  .cmp-wrap .crow-ico{width:34px;height:34px;flex-basis:34px}
  .cmp-wrap .crow-body{flex:1 1 auto;min-width:0}
  .cmp-wrap .crow-meta{gap:10px;flex-wrap:nowrap;overflow:hidden}
  .cmp-wrap .crow-meta > *{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-flex;align-items:center}
  .cmp-wrap .crow-right{flex:1 0 100%;justify-content:space-between;align-items:center;padding-left:45px}
  .cmp-wrap .crow-when{text-align:left}
}
/* ══ G5-W1 — Compliance spine: tab bar + Ball-in-My-Court inbox + forward calendar band ══ */
.cmp-wrap .cmp-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:14px;background:var(--surface-2);margin:2px 0 16px}
.cmp-wrap .cmp-tab{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;padding:8px 15px;border-radius:11px;font-size:13px;font-weight:700;color:var(--text-secondary);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast)}
.cmp-wrap .cmp-tab .ic{width:15px;height:15px}
.cmp-wrap .cmp-tab:hover{color:var(--text-primary)}
.cmp-wrap .cmp-tab.is-on{background:var(--card-bg);color:var(--text-primary);box-shadow:var(--shadow-e1)}
.cmp-wrap .cmp-tab .cmp-tab-n{font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;min-width:18px;text-align:center;padding:1px 6px;border-radius:999px;background:color-mix(in srgb,var(--text-muted) 18%,transparent);color:var(--text-secondary)}
.cmp-wrap .cmp-tab.is-on .cmp-tab-n{background:color-mix(in srgb,var(--app-accent) 16%,transparent);color:var(--app-accent)}
/* — F1 inbox — */
.cmp-wrap .cmp-ib-score{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.cmp-wrap .cmp-ib-tile{background:var(--card-bg);border-radius:15px;padding:14px 16px;box-shadow:var(--lg-edge),var(--shadow-e1);border:.5px solid var(--chrome-border)}
.cmp-wrap .cmp-ib-tile.is-err{background:color-mix(in srgb,var(--color-error) 7%,var(--card-bg));border-color:color-mix(in srgb,var(--color-error) 24%,transparent)}
.cmp-wrap .cmp-ib-tile.is-warn{background:color-mix(in srgb,var(--color-warning) 9%,var(--card-bg));border-color:color-mix(in srgb,var(--color-warning) 26%,transparent)}
.cmp-wrap .cmp-ib-tl{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)}
.cmp-wrap .cmp-ib-tv{font-size:30px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.05;margin:3px 0 1px;color:var(--text-primary)}
.cmp-wrap .cmp-ib-tile.is-err .cmp-ib-tv{color:var(--color-error)}
.cmp-wrap .cmp-ib-tile.is-warn .cmp-ib-tv{color:color-mix(in srgb,var(--color-warning) 66%,#5a3800)}
.cmp-wrap .cmp-ib-ts{font-size:11.5px;font-weight:600;color:var(--text-secondary)}
.cmp-wrap .cmp-ib-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.cmp-wrap .cmp-ib-controls .spacer{flex:1}
.cmp-wrap .cmp-ib-chip{display:inline-flex;align-items:center;gap:6px;border:.5px solid var(--chrome-border);background:var(--card-bg);padding:6px 13px;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--text-secondary);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast)}
.cmp-wrap .cmp-ib-chip .ic{width:13px;height:13px}
.cmp-wrap .cmp-ib-chip:hover{color:var(--text-primary);box-shadow:var(--shadow-e1)}
.cmp-wrap .cmp-ib-chip.on{background:color-mix(in srgb,var(--color-error) 13%,var(--card-bg));color:var(--color-error);border-color:color-mix(in srgb,var(--color-error) 30%,transparent)}
.cmp-wrap .cmp-ib-groups{display:flex;flex-direction:column;gap:14px}
.cmp-wrap .cmp-ib-group{background:var(--card-bg);border-radius:16px;box-shadow:var(--lg-edge),var(--shadow-e1);border:.5px solid var(--chrome-border);overflow:hidden}
.cmp-wrap .cmp-ib-group.has-overdue{border-color:color-mix(in srgb,var(--color-error) 26%,transparent)}
.cmp-wrap .cmp-ib-ghead{display:flex;align-items:center;gap:11px;padding:13px 16px;border-bottom:.5px solid var(--chrome-border)}
.cmp-wrap .cmp-ib-gav{width:34px;height:34px;flex:0 0 34px;border-radius:999px;display:grid;place-items:center;background:var(--surface-2);color:var(--text-secondary);font-size:12px;font-weight:800}
.cmp-wrap .cmp-ib-gav.is-me{background:color-mix(in srgb,var(--app-accent) 18%,var(--card-bg));color:var(--app-accent)}
.cmp-wrap .cmp-ib-gname{font-size:14px;font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:7px}
.cmp-wrap .cmp-ib-youtag{font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 14%,transparent);padding:1px 6px;border-radius:999px}
.cmp-wrap .cmp-ib-gmeta{font-size:11.5px;font-weight:600;color:var(--text-muted);margin-top:2px}
.cmp-wrap .cmp-ib-gstat.over{color:var(--color-error);font-weight:700}
.cmp-wrap .cmp-ib-gstat.warn{color:color-mix(in srgb,var(--color-warning) 64%,#5a3800);font-weight:700}
.cmp-wrap .cmp-ib-rows{padding:4px 8px 8px}
.cmp-wrap .cmp-ib-row{display:flex;align-items:center;gap:12px;padding:11px 10px;border-radius:12px;cursor:pointer;transition:background var(--motion-fast)}
.cmp-wrap .cmp-ib-row:hover{background:color-mix(in srgb,var(--app-accent) 7%,transparent)}
.cmp-wrap .cmp-ib-row:active{background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
.cmp-wrap .cmp-ib-row:focus-visible{outline:none;background:color-mix(in srgb,var(--app-accent) 7%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--app-accent) 40%,transparent)}
.cmp-wrap .cmp-ib-ico{width:36px;height:36px;flex:0 0 36px;border-radius:11px;display:grid;place-items:center;background:var(--surface-2)}
.cmp-wrap .cmp-ib-ico .ic{width:17px;height:17px;color:var(--text-secondary)}
.cmp-wrap .cmp-ib-row.tone-err .cmp-ib-ico{background:color-mix(in srgb,var(--color-error) 15%,var(--card-bg))}
.cmp-wrap .cmp-ib-row.tone-err .cmp-ib-ico .ic{color:var(--color-error)}
.cmp-wrap .cmp-ib-row.tone-warn .cmp-ib-ico{background:color-mix(in srgb,var(--color-warning) 16%,var(--card-bg))}
.cmp-wrap .cmp-ib-row.tone-warn .cmp-ib-ico .ic{color:color-mix(in srgb,var(--color-warning) 70%,#5a3800)}
.cmp-wrap .cmp-ib-body{flex:1;min-width:0}
.cmp-wrap .cmp-ib-title{font-size:13.5px;font-weight:700;letter-spacing:-.01em;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-wrap .cmp-ib-meta{display:flex;align-items:center;gap:12px;margin-top:3px;flex-wrap:wrap;font-size:11px;font-weight:600;color:var(--text-muted)}
.cmp-wrap .cmp-ib-meta .m-ico{opacity:.55;margin-right:3px;display:inline-flex;align-items:center}
.cmp-wrap .cmp-ib-meta .m-ico .ic{width:11px;height:11px;vertical-align:-1px}
/* Chain roll-up open-ask pill — a warm accountability signal (rounded, contained tint, no edge-strip). */
.cmp-wrap .cmp-ib-meta .cmp-ib-asks{display:inline-flex;align-items:center;padding:1px 8px 1px 6px;border-radius:999px;background:color-mix(in srgb,var(--color-warning) 14%,transparent);color:color-mix(in srgb,var(--color-warning) 82%,var(--text-primary));font-weight:700}
.cmp-wrap .cmp-ib-meta .cmp-ib-asks .m-ico{opacity:.9;color:inherit}
.cmp-wrap .cmp-ib-kind{font-weight:800;letter-spacing:.03em;text-transform:uppercase;font-size:10px;color:var(--text-secondary);background:var(--surface-2);padding:1px 7px;border-radius:999px}
.cmp-wrap .cmp-ib-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.cmp-wrap .cmp-ib-party{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--text-secondary);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-wrap .cmp-ib-pav{width:20px;height:20px;flex:0 0 20px;border-radius:999px;display:grid;place-items:center;background:var(--surface-2);color:var(--text-muted);font-size:9px;font-weight:800}
.cmp-wrap .cmp-pill-na{font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-secondary);background:var(--surface-2);padding:2px 9px;border-radius:999px}
/* — F2 forward calendar band — */
.cmp-wrap .cmp-cal .cmp-bar{margin-bottom:14px}
.cmp-wrap .cmp-cal-panel{padding:16px 18px}
.cmp-wrap .cmp-cal-axis{display:flex;justify-content:space-between;padding:0 2px 12px;border-bottom:.75px solid var(--chrome-border);margin-bottom:14px}
.cmp-wrap .cmp-cal-axm{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
/* TRUE positioned forward axis (today→horizon) with proportional gridline ticks. */
.cmp-wrap .cmp-axis2{position:relative;margin:2px 2px 20px;padding-bottom:22px}
.cmp-wrap .cmp-axis2-track{position:relative;height:2px;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--color-error) 45%,var(--surface-2)),var(--surface-2) 30%,var(--surface-2))}
.cmp-wrap .cmp-axis2-tick{position:absolute;top:-4px;width:1.5px;height:10px;border-radius:999px;background:color-mix(in srgb,var(--text-muted) 45%,transparent);transform:translateX(-50%)}
.cmp-wrap .cmp-axis2-now{position:absolute;top:-5px;width:11px;height:11px;border-radius:999px;background:var(--color-error);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-error) 22%,transparent),inset 0 1px 0 rgba(255,255,255,.4);transform:translateX(-50%)}
.cmp-wrap .cmp-axis2-labs{position:relative;height:14px;margin-top:9px}
.cmp-wrap .cmp-axis2-lab{position:absolute;font-size:10px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--text-muted);transform:translateX(-50%);white-space:nowrap}
.cmp-wrap .cmp-axis2-lab.is-now{color:var(--color-error);transform:translateX(0)}
.cmp-wrap .cmp-axis2-lab:last-child{transform:translateX(-100%)}
.cmp-wrap .cmp-cal-lane-pos{flex:0 0 70px;height:5px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-left:auto}
.cmp-wrap .cmp-cal-lane-pos>i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--color-info),color-mix(in srgb,var(--color-info) 60%,#fff))}
.cmp-wrap .cmp-cal-lane-hd{align-items:center}
@media(max-width:640px){.cmp-wrap .cmp-cal-lane-pos{display:none}.cmp-wrap .cmp-axis2-lab:not(.is-now):not(:last-child){display:none}}
.cmp-wrap .cmp-cal-track{display:flex;flex-direction:column;gap:18px}
.cmp-wrap .cmp-cal-lane-hd{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.cmp-wrap .cmp-cal-lane-dot{width:9px;height:9px;flex:0 0 9px;border-radius:999px;background:var(--app-accent)}
.cmp-wrap .cmp-cal-lane-dot.err{background:var(--color-error)}
.cmp-wrap .cmp-cal-lane-t{font-size:12.5px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary)}
.cmp-wrap .cmp-cal-lane.is-lapsed .cmp-cal-lane-t{color:var(--color-error)}
.cmp-wrap .cmp-cal-lane-c{font-size:11px;font-weight:700;color:var(--text-muted);background:var(--surface-2);border-radius:999px;min-width:20px;text-align:center;padding:1px 7px}
.cmp-wrap .cmp-cal-lane-cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.cmp-wrap .cmp-cal-cell{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:13px;background:var(--surface-2);border:.5px solid var(--chrome-border);cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
.cmp-wrap .cmp-cal-cell:hover{transform:translateY(-2px);box-shadow:var(--shadow-e2)}
.cmp-wrap .cmp-cal-cell:active{transform:translateY(0) scale(.99)}
.cmp-wrap .cmp-cal-cell:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 30%,transparent)}
.cmp-wrap .cmp-cal-cell.tone-err{background:color-mix(in srgb,var(--color-error) 10%,var(--card-bg));border-color:color-mix(in srgb,var(--color-error) 28%,transparent)}
.cmp-wrap .cmp-cal-cell.tone-warn{background:color-mix(in srgb,var(--color-warning) 11%,var(--card-bg));border-color:color-mix(in srgb,var(--color-warning) 28%,transparent)}
.cmp-wrap .cmp-cal-cell.tone-info{background:color-mix(in srgb,var(--color-info) 9%,var(--card-bg));border-color:color-mix(in srgb,var(--color-info) 24%,transparent)}
.cmp-wrap .cmp-cal-cell-ico{width:34px;height:34px;flex:0 0 34px;border-radius:10px;display:grid;place-items:center;background:var(--card-bg);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.cmp-wrap .cmp-cal-cell-ico .ic{width:16px;height:16px;color:var(--text-secondary)}
.cmp-wrap .cmp-cal-cell.tone-err .cmp-cal-cell-ico .ic{color:var(--color-error)}
.cmp-wrap .cmp-cal-cell.tone-warn .cmp-cal-cell-ico .ic{color:color-mix(in srgb,var(--color-warning) 70%,#5a3800)}
.cmp-wrap .cmp-cal-cell.tone-info .cmp-cal-cell-ico .ic{color:var(--color-info)}
.cmp-wrap .cmp-cal-cell-body{flex:1;min-width:0}
.cmp-wrap .cmp-cal-cell-title{font-size:13px;font-weight:700;letter-spacing:-.01em;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-wrap .cmp-cal-cell-meta{font-size:11px;font-weight:600;color:var(--text-muted);margin-top:2px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cmp-wrap .cmp-cal-statute{font-size:10px;font-weight:800;color:var(--color-error);background:color-mix(in srgb,var(--color-error) 12%,transparent);padding:1px 6px;border-radius:999px}
.cmp-wrap .cmp-cal-cell-when{text-align:right;flex:0 0 auto}
.cmp-wrap .cmp-cal-cell-d{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.cmp-wrap .cmp-cal-cell.tone-err .cmp-cal-cell-d{color:var(--color-error)}
.cmp-wrap .cmp-cal-cell.tone-warn .cmp-cal-cell-d{color:color-mix(in srgb,var(--color-warning) 64%,#5a3800)}
.cmp-wrap .cmp-cal-cell-dt{font-size:10px;font-weight:600;color:var(--text-muted);white-space:nowrap}
@media (max-width:640px){
  .cmp-wrap .cmp-ib-right{flex-direction:column;align-items:flex-end;gap:5px}
  .cmp-wrap .cmp-cal-lane-cells{grid-template-columns:1fr}
}
/* ════════════════════════════════════════════════════════════════════════════
   COMPLIANCE — UNIFIED COMMAND PAGE (2026-06-26). Matte stage → page hero (title +
   chip-tile vitals) → glass domain rail + main surface. Two surfaces: Expiry & Risk
   (list/timeline) and Vendors (master table + detail side-panel). Glass = chrome
   (rail); white (--shadow-e2) = content. Depth via elevation, never color.
   ════════════════════════════════════════════════════════════════════════════ */
.cmp-stage{display:flex;flex-direction:column;gap:12px}
/* — Page hero (solid-white card) — */
.cmp-hero{padding:18px 20px;display:flex;flex-direction:column;gap:16px;border-radius:var(--radius-lg)}
.cmp-hero-head{display:flex;align-items:flex-start;gap:14px}
.cmp-hero-mark{width:46px;height:46px;flex:0 0 46px;border-radius:14px;display:grid;place-items:center;background:var(--lg-bg);backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract);box-shadow:var(--lg-edge),var(--shadow-e1);border:.5px solid var(--chrome-border);color:var(--app-accent)}
.cmp-hero-mark .ic{width:23px;height:23px}
.cmp-hero-id{flex:1;min-width:0}
.cmp-hero-title{font-size:27px;font-weight:800;letter-spacing:-.02em;margin:0;color:var(--text-primary);line-height:1.05}
.cmp-hero-sub{font-size:13px;font-weight:600;color:var(--text-secondary);margin:4px 0 0;max-width:72ch}
/* 🐋 2026-07-13 ground-up redo — ONE command band replaces the 4 giant single-stat cards
   (canon #4: related metrics = one authored card with internal dividers, not box soup).
   Cells are dense (number beside label), tone-tinted only when non-zero, each an exact door. */
.cmp-cmd{display:flex;align-items:stretch;background:var(--surface-2);border:.5px solid var(--chrome-border);border-radius:14px;overflow:hidden}
.cmp-cmd-cell{flex:1;min-width:0;display:flex;align-items:baseline;justify-content:center;gap:7px;padding:11px 12px;border:0;background:transparent;cursor:pointer;font-family:inherit;transition:background var(--motion-fast)}
.cmp-cmd-cell + .cmp-cmd-cell{border-left:.5px solid var(--chrome-border)}
.cmp-cmd-cell:hover{background:color-mix(in srgb,var(--app-accent) 8%,transparent)}
.cmp-cmd-cell:focus-visible{outline:none;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--app-accent) 40%,transparent);border-radius:10px}
.cmp-cmd-n{font-size:20px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1;color:var(--text-primary)}
.cmp-cmd-l{font-size:11px;font-weight:700;letter-spacing:.01em;color:var(--text-muted);white-space:nowrap}
.cmp-cmd-cell.t-warn .cmp-cmd-n{color:color-mix(in srgb,var(--color-warning) 70%,#5a3800)}
.cmp-cmd-cell.t-error .cmp-cmd-n{color:var(--color-error)}
@media (max-width:900px){.cmp-cmd{flex-wrap:wrap}.cmp-cmd-cell{flex:1 1 32%}.cmp-cmd-cell + .cmp-cmd-cell{border-left:0}.cmp-cmd-cell:nth-child(n+2){border-top:.5px solid var(--chrome-border)}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.cmp-hero-mark{background:var(--surface)}}
@media (prefers-reduced-transparency:reduce){.cmp-hero-mark{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media (max-width:760px){.cmp-hero-head{flex-wrap:wrap}}
.cmp-main{min-width:0}
/* 🐋 ONE-PAGE sections — each is a titled stretch of the single flow; heads are quiet
   (icon chip + title + count), sitting on the matte between panels, not boxed. */
.cmp-sec{display:flex;flex-direction:column;gap:12px;scroll-margin-top:14px}
.cmp-sec + .cmp-sec{margin-top:10px}
.cmp-sec-head{display:flex;align-items:center;gap:9px;padding:0 3px}
.cmp-sec-ico{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--card-bg);border:.5px solid var(--chrome-border);box-shadow:var(--shadow-e1);color:var(--app-accent)}
.cmp-sec-ico .ic{width:14px;height:14px}
.cmp-sec-t{font-size:15px;font-weight:800;letter-spacing:-.015em;color:var(--text-primary);margin:0}
.cmp-sec-n{font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-secondary);border-radius:999px;padding:2px 9px}
/* Quick-actions rail card */
.cmp-qa{padding:14px;border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:8px}
.cmp-qa-h{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin:0 2px 2px}
.cmp-qa-btn{display:flex;align-items:flex-start;gap:10px;text-align:left;border:.5px solid var(--chrome-border);background:var(--surface-2);border-radius:12px;padding:10px 12px;cursor:pointer;font-family:inherit;transition:background var(--motion-fast),border-color var(--motion-fast)}
.cmp-qa-btn:hover{background:color-mix(in srgb,var(--app-accent) 8%,transparent);border-color:color-mix(in srgb,var(--app-accent) 28%,var(--chrome-border))}
.cmp-qa-btn:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 40%,transparent)}
.cmp-qa-btn .ic{width:15px;height:15px;margin-top:2px;color:var(--app-accent);flex:0 0 15px}
.cmp-qa-t{display:flex;flex-direction:column;gap:2px;font-size:12.5px;font-weight:700;color:var(--text-primary)}
.cmp-qa-sub{font-size:11px;font-weight:600;color:var(--text-muted)}
/* UNIFIED FRAME (2026-06-28) — BOTH domains (Expiry & Risk, Vendors) emit this exact
   grid: a working column (hero → toolbar → content) + a fixed-width right rail that is
   ALWAYS reserved. Toggling domains swaps only the cell CONTENTS, never the frame shape —
   the right rail never appears/disappears, so #cmpMain's bounding box is invariant. */
.cmp-surface{display:grid;grid-template-columns:minmax(0,1fr) var(--cmp-rail-w);gap:12px;align-items:start;min-width:0}
.cmp-col-main{display:flex;flex-direction:column;gap:12px;min-width:0}
.cmp-aside{display:flex;flex-direction:column;gap:12px;min-width:0;position:sticky;top:12px}
.cmp-empty{padding:38px 20px;text-align:center;color:var(--text-muted);font-size:13px;border-radius:var(--radius-lg)}
/* — Surface toolbar (solid-white card) — one skeleton across BOTH domains: a single-row
   wrapping flex with the same slots (filter group · spacer · secondary controls · search) and
   a shared min-height so the bar reads at the same baseline height on either domain. — */
.cmp-toolbar{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;padding:10px 12px;border-radius:var(--radius-lg);min-height:66px;box-sizing:border-box}
.cmp-tb-spacer{flex:1;min-width:6px}
.cmp-toolbar .cmp-seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--surface-2);max-width:100%}
.cmp-toolbar .cmp-seg.cmp-seg-wrap{flex-wrap:wrap;border-radius:14px}
.cmp-toolbar .cmp-seg button{border:0;background:transparent;padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--text-secondary);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast);display:inline-flex;align-items:center;gap:6px}
.cmp-toolbar .cmp-seg button:hover{color:var(--text-primary)}
.cmp-toolbar .cmp-seg button.on{background:var(--card-bg);color:var(--text-primary);box-shadow:var(--shadow-e1)}
.cmp-toolbar .cmp-seg button .ic{width:14px;height:14px}
.cmp-toolbar .cmp-seg-lbl{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--text-muted)}
.cmp-viewtoggle .cmp-vt-l{font-size:12.5px}
.cmp-search{display:inline-flex;align-items:center;gap:7px;background:var(--surface-2);border-radius:999px;padding:5px 12px;color:var(--text-muted);min-width:128px;flex:1 1 150px;max-width:340px}
.cmp-search .ic{width:15px;height:15px;flex:0 0 15px}
.cmp-search input{border:0;background:transparent;outline:none;font-size:13px;font-weight:600;color:var(--text-primary);width:100%;min-width:0}
.cmp-search input::placeholder{color:var(--text-muted)}
/* §7-C P2 — obligation template manager button + modal */
.cmp-tb-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--surface-2);border:0;color:var(--text-primary);font-size:12.5px;font-weight:650;cursor:pointer;transition:background .18s ease}
.cmp-tb-btn:hover{background:var(--surface-3,var(--surface-2))}
.cmp-tb-btn .ic{width:14px;height:14px}
.cmp-tpl-modal{max-width:560px}
.cmp-tpl-sub{margin:0 0 14px;font-size:13px;color:var(--text-muted);line-height:1.45}
.cmp-tpl-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;max-height:38vh;overflow:auto}
.cmp-tpl-row{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border-radius:14px;background:var(--surface-2)}
.cmp-tpl-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.cmp-tpl-trade{font-size:14px;font-weight:700;color:var(--text-primary);text-transform:capitalize}
.cmp-tpl-docs,.cmp-tpl-mins{display:flex;flex-wrap:wrap;gap:5px}
.cmp-tpl-empty{font-size:13px;color:var(--text-muted);padding:6px 0}
.cmp-tpl-form{display:flex;flex-direction:column;gap:11px;border-top:1px solid var(--chrome-border);padding-top:15px}
.cmp-tpl-checks{display:flex;flex-wrap:wrap;gap:9px 15px}
.cmp-tpl-check{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--text-secondary);cursor:pointer}
.cmp-tpl-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cmp-search:focus-within{box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 32%,transparent)}
/* Vendor filter chips */
.cmp-tb-filters{display:inline-flex;gap:6px;flex-wrap:wrap}
.cmp-fchip{display:inline-flex;align-items:center;gap:7px;border:.5px solid var(--chrome-border);background:var(--card-bg);border-radius:999px;padding:5px 11px 5px 13px;font-size:12.5px;font-weight:700;color:var(--text-secondary);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast)}
.cmp-fchip:hover{color:var(--text-primary);border-color:color-mix(in srgb,var(--app-accent) 30%,var(--chrome-border))}
.cmp-fchip.is-on{background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent);border-color:color-mix(in srgb,var(--app-accent) 36%,transparent)}
.cmp-fchip-n{font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;min-width:18px;text-align:center;padding:1px 6px;border-radius:999px;background:var(--surface-2);color:var(--text-secondary)}
.cmp-fchip.is-on .cmp-fchip-n{background:color-mix(in srgb,var(--app-accent) 22%,transparent);color:var(--app-accent)}
.cmp-fchip.t-warn .cmp-fchip-n{background:color-mix(in srgb,var(--color-warning) 18%,transparent);color:color-mix(in srgb,var(--color-warning) 78%,var(--text-primary))}
.cmp-fchip.t-error .cmp-fchip-n{background:color-mix(in srgb,var(--color-error) 16%,transparent);color:var(--color-error)}
.cmp-tb-sort{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.cmp-tb-sortl{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--text-muted)}
/* — Surface A: §713.13 risk hero (solid-white card; tone via icon/pill, NOT a color wash) — */
.cmp-risk-hero{border-radius:var(--radius-lg);padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.cmp-risk-hero.is-clear{flex-direction:row;align-items:center}
.cmp-rh-top{display:flex;align-items:flex-start;gap:14px}
.cmp-rh-ico{width:44px;height:44px;flex:0 0 44px;border-radius:13px;display:grid;place-items:center}
.cmp-rh-ico.is-risk{background:color-mix(in srgb,var(--color-error) 14%,var(--card-bg));color:var(--color-error);box-shadow:var(--bevel-top),inset 0 0 0 .5px color-mix(in srgb,var(--color-error) 30%,transparent)}
.cmp-rh-ico.is-clear{background:color-mix(in srgb,var(--color-success) 14%,var(--card-bg));color:var(--color-success);box-shadow:var(--bevel-top),inset 0 0 0 .5px color-mix(in srgb,var(--color-success) 30%,transparent)}
.cmp-rh-ico .ic{width:23px;height:23px}
.cmp-rh-main{min-width:0;flex:1}
.cmp-rh-kicker{margin-bottom:5px}
.cmp-rh-pill{display:inline-flex;align-items:center;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:999px}
.cmp-rh-pill.is-risk{background:color-mix(in srgb,var(--color-error) 14%,transparent);color:var(--color-error)}
.cmp-rh-pill.is-clear{background:color-mix(in srgb,var(--color-success) 14%,transparent);color:var(--color-success)}
.cmp-rh-head{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--text-primary);line-height:1.15}
.cmp-rh-sub{font-size:12.5px;font-weight:600;color:var(--text-secondary);margin-top:4px;max-width:80ch}
.cmp-rh-flags{display:flex;gap:10px;flex-wrap:wrap}
.cmp-rh-flag{flex:1;min-width:180px;text-align:left;border:.5px solid var(--chrome-border);cursor:pointer;border-radius:13px;padding:11px 13px;background:var(--card-bg);box-shadow:var(--bevel-top),var(--shadow-e1);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
.cmp-rh-flag:hover{transform:translateY(-2px);box-shadow:var(--bevel-top),var(--shadow-e3)}
.cmp-rh-flag:active{transform:translateY(0) scale(.98)}
/* gap#9 — a lien-risk NOC flag reads sharper than a plain expiry (fill tint, not an edge stripe) */
.cmp-rh-flag.is-lien{background:color-mix(in srgb,var(--risk-high-fg,#c0392b) 8%,var(--card-bg));border-color:color-mix(in srgb,var(--risk-high-fg,#c0392b) 30%,var(--chrome-border))}
.cmp-rh-flag.is-lien .cmp-rh-fv{color:var(--risk-high-fg,#c0392b);font-weight:800}
.cmp-rh-flag:focus-visible{outline:none;box-shadow:var(--shadow-e1),0 0 0 3px color-mix(in srgb,var(--color-error) 28%,transparent)}
.cmp-rh-fl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-rh-fv{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--color-error);margin:2px 0}
.cmp-rh-fm{font-size:11.5px;font-weight:600;color:var(--text-secondary)}
/* Surface A: the list panel uses .rt-panel-solid + the .cmp-panel inner padding */
.cmp-wrap .cmp-surface .cmp-panel{padding:4px 16px 8px;border-radius:var(--radius-lg)}
/* — Surface B: vendors master list lives in the working column; the detail/insight
   panel lives in the shared .cmp-aside rail (same column the Expiry rail uses). — */
.cmp-vendors-list{min-width:0}
/* inline mini doc dots in the master table */
.cmp-doc-dots{display:inline-flex;gap:4px}
.cmp-doc-dot{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:21px;padding:0 6px;border-radius:7px;font-size:9.5px;font-weight:800;letter-spacing:.02em}
.cmp-doc-dot.ok{background:color-mix(in srgb,var(--color-success,#16a34a) 16%,transparent);color:color-mix(in srgb,var(--color-success,#16a34a) 80%,var(--text-primary))}
.cmp-doc-dot.warn{background:color-mix(in srgb,var(--color-warning,#d97706) 18%,transparent);color:color-mix(in srgb,var(--color-warning,#d97706) 86%,var(--text-primary))}
.cmp-doc-dot.exp{background:color-mix(in srgb,var(--color-error,#dc2626) 16%,transparent);color:var(--color-error,#dc2626)}
.cmp-doc-dot.miss{background:var(--surface-2);color:var(--text-muted);opacity:.6}
.sc-table th.sc-th-docs,.sc-table td.sc-td-docs{white-space:nowrap}
.sc-row.is-selected{background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
.sc-row.is-selected:hover{background:color-mix(in srgb,var(--app-accent) 15%,transparent)}
/* detail side-panel (lives in the shared .cmp-aside, which owns the sticky position) */
.cmp-vdetail{border-radius:var(--radius-lg);padding:0;overflow:hidden;display:flex;flex-direction:column}
.cmp-vdetail-empty{align-items:center;text-align:center;padding:34px 22px;gap:8px}
.cmp-vd-emptyico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--surface-2);color:var(--text-muted);margin-bottom:4px}
.cmp-vd-emptyico .ic{width:22px;height:22px}
.cmp-vd-emptyt{font-size:15px;font-weight:800;color:var(--text-primary)}
.cmp-vd-emptys{font-size:12.5px;font-weight:600;color:var(--text-muted);max-width:34ch}
.cmp-vd-head{display:flex;align-items:flex-start;gap:10px;padding:16px 18px;border-bottom:.5px solid var(--chrome-border)}
.cmp-vd-id{flex:1;min-width:0}
.cmp-vd-name{font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary)}
.cmp-vd-cat{font-size:11.5px;font-weight:600;color:var(--text-muted);margin-top:1px}
.cmp-vd-close{width:30px;height:30px;flex:0 0 30px;border:0;border-radius:9px;background:var(--surface-2);color:var(--text-secondary);cursor:pointer;display:grid;place-items:center;transition:background var(--motion-fast),transform var(--motion-fast)}
.cmp-vd-close:hover{background:color-mix(in srgb,var(--text-muted) 18%,transparent);color:var(--text-primary)}
.cmp-vd-close:active{transform:scale(.92)}
.cmp-vd-close .ic{width:15px;height:15px}
.cmp-vd-gradecard{margin:14px 18px 0;padding:12px 14px;border-radius:13px;background:var(--surface-2);box-shadow:var(--bevel-top),inset 0 0 0 .5px var(--chrome-border)}
.cmp-vd-reason{font-size:12px;font-weight:600;color:var(--text-secondary);margin-top:7px;line-height:1.4}
.cmp-vd-section{padding:14px 18px 0}
.cmp-vd-section:last-of-type{padding-bottom:4px}
.cmp-vd-sh{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:9px}
.cmp-vd-docs{display:flex;flex-direction:column;gap:7px}
.cmp-vd-docrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cmp-vd-doclbl{font-size:12.5px;font-weight:700;color:var(--text-primary)}
.cmp-vd-kv{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:.5px solid color-mix(in srgb,var(--chrome-border) 55%,transparent)}
.cmp-vd-kv:last-child{border-bottom:0}
.cmp-vd-k{font-size:11.5px;font-weight:600;color:var(--text-muted);flex:0 0 auto}
.cmp-vd-v{font-size:12.5px;font-weight:700;color:var(--text-primary);text-align:right;font-variant-numeric:tabular-nums;min-width:0}
.cmp-vd-v.sc-open{color:color-mix(in srgb,var(--color-warning,#d97706) 86%,var(--text-primary))}
.cmp-vd-flags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.cmp-vd-drill{margin:14px 18px 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:.5px solid var(--chrome-border);background:var(--card-bg);border-radius:11px;padding:9px 14px;font-size:13px;font-weight:700;color:var(--app-accent);cursor:pointer;box-shadow:var(--shadow-e1);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
.cmp-vd-drill:hover{transform:translateY(-1px);box-shadow:var(--shadow-e2)}
.cmp-vd-drill:active{transform:scale(.98)}
.cmp-vd-drill .ic{width:15px;height:15px}
/* — Vendors insight rail (shown when no vendor open): grade-distribution bar + per-doc coverage
   rollup, both REAL data. Fills the reserved rail column so the frame never reflows on toggle. — */
.cmp-vd-insight{padding-bottom:16px}
.cmp-ins-distbar{margin-top:2px}
.cmp-ins-legrow{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.cmp-ins-leg{display:inline-flex;align-items:center;gap:5px;border:.5px solid var(--chrome-border);background:var(--card-bg);border-radius:999px;padding:3px 10px 3px 8px;font-size:11px;font-weight:700;color:var(--text-secondary);cursor:pointer;transition:background var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast)}
.cmp-ins-leg:hover{border-color:color-mix(in srgb,var(--app-accent) 30%,var(--chrome-border));color:var(--text-primary)}
.cmp-ins-leg-n{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.cmp-ins-leg.cd-err .cmp-ins-leg-n{color:var(--color-error)}
.cmp-ins-leg.cd-warn .cmp-ins-leg-n{color:color-mix(in srgb,var(--color-warning) 82%,var(--text-primary))}
.cmp-ins-leg.cd-info .cmp-ins-leg-n{color:var(--color-info)}
.cmp-ins-leg.cd-ok .cmp-ins-leg-n{color:var(--color-success)}
.cmp-ins-covs{display:flex;flex-direction:column;gap:11px}
.cmp-ins-cov{display:block;width:100%;text-align:left;border:0;background:transparent;padding:0;cursor:pointer;font-family:inherit}
.cmp-ins-cov-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:5px}
.cmp-ins-cov-l{font-size:12px;font-weight:700;color:var(--text-primary)}
.cmp-ins-cov-n{font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-muted)}
.cmp-ins-cov-track{height:7px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.cmp-ins-cov-track>i{display:block;height:100%;border-radius:999px;transition:width var(--motion-slow) var(--ease-out)}
.cmp-ins-cov-track>i.cd-ok{background:color-mix(in srgb,var(--color-success) 70%,var(--surface-2))}
.cmp-ins-cov-track>i.cd-warn{background:linear-gradient(90deg,color-mix(in srgb,var(--color-warning) 72%,#fff),var(--color-warning))}
.cmp-ins-cov-track>i.cd-err{background:linear-gradient(90deg,color-mix(in srgb,var(--color-error) 75%,#fff),var(--color-error))}
.cmp-ins-cov:hover .cmp-ins-cov-l{color:var(--app-accent)}
.cmp-ins-hint{display:flex;align-items:flex-start;gap:8px;margin:16px 18px 0;padding-top:13px;border-top:.5px solid var(--chrome-border);font-size:11.5px;font-weight:600;color:var(--text-muted);line-height:1.4}
.cmp-ins-hint .ic{width:15px;height:15px;flex:0 0 15px;margin-top:1px;color:var(--text-muted)}
@media (prefers-reduced-motion:reduce){.cmp-ins-cov-track>i{transition:none}}
/* 🦩 trade-grouped leaderboard rows (the 234-row wall fix) */
#complianceView .vtb-grp{cursor:pointer;background:color-mix(in srgb,var(--text-primary) 3%,transparent);transition:background var(--motion-fast)}
#complianceView .vtb-grp:hover{background:color-mix(in srgb,var(--app-accent) 8%,transparent)}
#complianceView .vtb-grp td{border-bottom:.5px solid var(--chrome-border)}
#complianceView .vtb-grp:focus-visible{outline:none;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--app-accent) 40%,transparent)}
#complianceView .vtb-grp-name{display:inline-flex;align-items:center;gap:8px;max-width:100%}
#complianceView .vtb-grp-chev{width:12px;height:12px;flex:0 0 12px;color:var(--text-muted);transition:transform var(--motion-fast)}
#complianceView .vtb-grp.is-open .vtb-grp-chev{transform:rotate(90deg)}
#complianceView .vtb-grp-n{font-size:10.5px;font-weight:800;font-variant-numeric:tabular-nums;background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-secondary);border-radius:999px;padding:1px 8px}
#complianceView .vtb-grp-arrow{transition:transform var(--motion-fast)}
#complianceView .vtb-grp-arrow.is-open{transform:rotate(90deg)}
#complianceView .vtb-grp-quiet{color:var(--text-muted)}
#complianceView .vtb-badge.err{background:color-mix(in srgb,var(--color-error) 14%,transparent);color:var(--color-error)}
#complianceView .vtb-in-grp .vtb-name{padding-left:26px}
/* 🦩 compact section empties — a one-line positive state, not a tall hero (canon #3) */
#complianceView .cmp-panel .rt-empty{flex-direction:row;justify-content:center;align-items:center;text-align:left;gap:12px;padding:14px 18px;margin:4px 0}
#complianceView .cmp-panel .rt-empty .rt-empty-ico{width:34px;height:34px;flex:0 0 34px}
#complianceView .cmp-panel .rt-empty .rt-empty-title{font-size:13.5px}
#complianceView .cmp-panel .rt-empty .rt-empty-sub{margin-top:1px}
/* 🦩 deterministic toolbar wrap — the flag chips always take their own row (never an arbitrary
   mid-group wrap), and at mid widths the spacer forces the split: row 1 = filters + search,
   row 2 = the secondary controls. Kills the dangling-divider / lone-toggle wrap states. */
#complianceView .cmp-tb-sigs{flex-basis:100%}
@media (max-width:1380px){
  #complianceView .cmp-toolbar .cmp-tb-spacer{flex-basis:100%;order:0}
}
/* a lone at-risk flag card must not stretch into a half-empty full-width card (canon #3) */
.cmp-rh-flags .cmp-rh-flag:only-child{max-width:380px}
/* 🦩 vendor-detail bottom sheet (≤1100px) — the detail panel inside a body-mounted msheet-peek */
.cmp-vd-sheet{max-height:68vh;overflow-y:auto;border-radius:14px}
.cmp-vd-sheet .cmp-vdetail{box-shadow:none;border:0}
/* 🦩 inline rail placement (≤1100px) — hidden on wide, swaps in for the sidebar on narrow */
.cmp-aside-inline{display:none}
/* — Responsive — the unified frame collapses identically for BOTH domains: below 1100px
   the working column + right rail stack to one column; the rail content renders INLINE
   between the horizon and vendors sections (the stacked sidebar would land below the
   vendor table, unreachable), so the <aside> is hidden there. — */
@media (max-width:1100px){
  .cmp-surface{grid-template-columns:1fr}
  .cmp-aside{display:none}
  .cmp-aside-inline{display:flex;flex-direction:column;gap:12px}
}
@media (max-width:1024px){
  .cmp-body{grid-template-columns:1fr}
  .cmp-rail{position:static;top:auto}
  .cmp-rail-nav{flex-direction:row;gap:6px}
  .cmp-rail-item{flex:1;justify-content:center}
  .cmp-rail-s{display:none}
}
@media (max-width:640px){
  .cmp-vitals{grid-template-columns:repeat(2,1fr)}
  .cmp-hero{padding:15px 15px}
  .cmp-hero-title{font-size:23px}
  .cmp-toolbar{padding:9px 11px;gap:7px}
  .cmp-tb-sort{width:100%;order:3}
  .cmp-search{flex:1 1 100%;order:4}
  .cmp-rh-flag{flex:1 1 100%;min-width:0}
  .cmp-rail-l{font-size:12.5px}
}
.dc-tile-static:hover{transform:none;box-shadow:var(--shadow-e1),inset 0 1px 0 rgba(255,255,255,.14)}
.dc-seg-lbl{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
/* Full-page register workspace: register (master) + analytics rail. Mirrors .pfv-ws
   but tuned for a register host (which fills the master) + a fixed analytics rail. The
   rail is hidden + the grid collapses to one column on narrow widths (modal/iPad) so
   the relocated register reads exactly as before there. */
.reg-ws{display:grid;gap:16px;grid-template-columns:minmax(0,1fr) minmax(0,300px);align-items:start}
.reg-ws-rail{display:flex;flex-direction:column;gap:12px}
.reg-ws-rail:empty{display:none}
/* 📒 V160 (row-24 pattern) — an EMPTY rail must not keep its 300px column reserved:
   collapse the grid to one column so the master gets the width back. */
.reg-ws:has(.reg-ws-rail:empty){grid-template-columns:minmax(0,1fr)}
/* V-permlayout 2026-06-30 — the rail also carries .pfv-ws-rail (shared rail utility) which
   sets `grid-area:rail` for the UNRELATED .pfv-ws-3 'master detail rail' layout. Inside
   .reg-ws there is NO 'rail' named area → the item fell into phantom implicit tracks
   (computed `1fr 300px 0 ~300px`), shrinking the master to ~half width + dropping the rail
   to a new row at the bottom-right. Reset to auto-placement so the 2-col grid is honored.
   Fixes ALL .reg-ws register tabs (Compliance/Field/ITBs/…), not just Permits. */
.reg-ws > .pfv-ws-rail{grid-area:auto}
@media (max-width:1024px){.reg-ws{grid-template-columns:1fr}.reg-ws-rail{display:none}}
/* 📃 pt.7 (Track-Q row 21) — collapsed add-form disclosure for register tabs (ITBs first):
   the always-open multi-field form under a register was the scroll-and-scroll offense. */
.reg-add-disclosure{margin-top:14px;border:0.5px dashed var(--chrome-border);border-radius:14px;overflow:hidden}
.reg-add-toggle{display:flex;align-items:center;gap:8px;width:100%;padding:11px 14px;background:none;border:none;font-family:inherit;font-size:13px;font-weight:650;color:var(--app-accent);cursor:pointer;text-align:left}
.reg-add-toggle svg{width:13px;height:13px;flex:none}
.reg-add-toggle .reg-add-chev{margin-left:auto;color:var(--text-muted);transition:transform var(--motion-fast)}
.reg-add-toggle.open .reg-add-chev{transform:rotate(180deg)}
.reg-add-toggle:hover{background:color-mix(in srgb,var(--app-accent) 5%,transparent)}
.reg-add-disclosure .itb-add-grid{padding:4px 14px 14px;border-top:0.5px dashed var(--chrome-border)}
/* zero-state owns the stage: when the ITB register is empty (fill-the-stage armed + the
   rich empty rendered), stretch the master column chain so the empty fills the canvas */
#tabItbs .reg-ws[data-pfv-fill]:has(.rt-emptyplus) .reg-ws-master{display:flex;flex-direction:column}
#tabItbs .reg-ws[data-pfv-fill]:has(.rt-emptyplus) .reg-ws-master>.modal-section{flex:1;display:flex;flex-direction:column}
#tabItbs .reg-ws[data-pfv-fill]:has(.rt-emptyplus) .tracked-list{flex:1;display:flex;flex-direction:column}
#tabItbs .reg-ws[data-pfv-fill] .tracked-list .rt-emptyplus{flex:1}
/* 🗒️ pt.8 (Track-Q row 21) — Transmittals zero state owns the stage (fill chain). */
#tabTransmittals .trw-wrap-zero[data-pfv-fill]{display:flex;flex-direction:column}
#tabTransmittals .trw-wrap-zero[data-pfv-fill] .rt-emptyplus{flex:1}
/* 🗒️ pt.8 (row 21) — Certified Payroll OFF state fills the stage. */
#certifiedPayrollHost[data-pfv-fill] .cp-off{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}
/* 🗒️ pt.8 (row 21) — Members zero state owns the stage + the add-disclosure grid. */
#tabMembers .reg-ws[data-pfv-fill]:has(.rt-emptyplus) .reg-ws-master{display:flex;flex-direction:column}
#tabMembers .reg-ws[data-pfv-fill]:has(.rt-emptyplus) .reg-ws-master>.modal-section{flex:1;display:flex;flex-direction:column}
#tabMembers .reg-ws[data-pfv-fill]:has(.rt-emptyplus) #projectMemberList{flex:1;display:flex;flex-direction:column}
#tabMembers .reg-ws[data-pfv-fill] #projectMemberList .rt-emptyplus{flex:1}
.reg-add-disclosure .pm-add-grid{padding:4px 14px 14px;border-top:0.5px dashed var(--chrome-border)}
/* Submittal-log depth chips */
.sub-rev{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:var(--radius-pill);background:var(--app-accent);color:#fff;font-size:10px;font-weight:700;cursor:pointer}
.sub-lead,.sub-dist,.sub-rfi{display:inline-block;margin-left:6px;padding:0 6px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-secondary);font-size:10.5px;font-weight:600}
.sub-lead-late{background:color-mix(in srgb,var(--color-error) 16%,transparent);color:var(--color-error)}
.sub-lead-risk{background:color-mix(in srgb,var(--color-warning) 16%,transparent);color:var(--color-warning)}
/* FEATURE 2 — submittal package: per-row select checkbox + the floating "Package selected" bar. */
.sub-pkg-chk{display:inline-flex;align-items:center;margin-right:8px;vertical-align:middle;cursor:pointer}
.sub-pkg-chk input{width:15px;height:15px;accent-color:var(--app-accent);cursor:pointer;margin:0}
.sub-pkg-chk.disabled{opacity:.4;cursor:not-allowed}
.sub-pkg-chk.disabled input{cursor:not-allowed}
.sub-pkg-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:10px 0;padding:9px 13px;border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow-e1);border:0.5px solid var(--chrome-border)}
.sub-pkg-bar-info{font-size:12.5px;color:var(--text-secondary)}
.sub-pkg-bar-info strong{color:var(--app-accent);font-variant-numeric:tabular-nums}
.sub-pkg-bar-acts{display:flex;align-items:center;gap:8px}
.sub-pkg-go{display:inline-flex;align-items:center;gap:6px}
.sub-pkg-go .ic{width:13px;height:13px}
/* ===== Submittal workflow-status PILL (replaces bare colored status text) ===== */
.sub-status-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 11px 3px 9px;border-radius:var(--radius-pill);font-size:11.5px;font-weight:700;letter-spacing:-.01em;line-height:1.3;white-space:nowrap;background:color-mix(in srgb,var(--text-primary) 7%,transparent);color:var(--text-secondary);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--text-primary) 8%,transparent)}
.sub-status-pill .ssp-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent)}
.sub-status-pill .ic{width:12px;height:12px;flex-shrink:0}
.sub-status-pill.ssp-pending{background:color-mix(in srgb,var(--color-warning) 15%,var(--card-bg));color:color-mix(in srgb,var(--color-warning) 82%,var(--text-primary))}
.sub-status-pill.ssp-revise{background:color-mix(in srgb,var(--color-warning) 18%,var(--card-bg));color:color-mix(in srgb,var(--color-warning) 84%,var(--text-primary))}
.sub-status-pill.ssp-approved{background:color-mix(in srgb,var(--color-success) 16%,var(--card-bg));color:color-mix(in srgb,var(--color-success) 78%,var(--text-primary))}
.sub-status-pill.ssp-noted{background:color-mix(in srgb,var(--color-success) 13%,var(--card-bg));color:color-mix(in srgb,var(--color-success) 74%,var(--text-primary))}
.sub-status-pill.ssp-rejected{background:color-mix(in srgb,var(--color-error) 15%,var(--card-bg));color:color-mix(in srgb,var(--color-error) 80%,var(--text-primary))}
.sub-status-pill[role=button]{cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
.sub-status-pill[role=button]:hover{box-shadow:inset 0 0 0 .5px color-mix(in srgb,currentColor 30%,transparent),var(--shadow-e1)}
.sub-status-pill[role=button]:active{transform:scale(.96)}
.sub-due-inline{display:inline-block;margin-right:8px;font-size:11px;color:var(--text-muted);font-weight:600;vertical-align:middle}
@media (prefers-reduced-motion:reduce){.sub-status-pill[role=button]{transition:none}.sub-status-pill[role=button]:active{transform:none}}
/* ===== In-editor workflow STATUS CONTROL — toned state-flow + ball-in-court ===== */
.sub-flow{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-e2),var(--lg-edge);margin:0 0 16px}
.sub-flow-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.sub-flow-head .sf-lbl{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)}
.sub-flow-bic{font-size:12px;color:var(--text-secondary);display:inline-flex;align-items:center;gap:6px}
.sub-flow-bic .ic{width:13px;height:13px;color:var(--app-accent);flex-shrink:0}
.sub-flow-bic strong{color:var(--text-primary);font-weight:700}
.sub-flow-bic.is-door{cursor:pointer;border-radius:var(--radius-pill);padding:3px 9px;margin:-3px -9px;transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.sub-flow-bic.is-door:hover{background:color-mix(in srgb,var(--app-accent) 10%,transparent)}
.sub-flow-bic.is-door:active{transform:scale(.97)}
.sub-steps{display:flex;align-items:flex-start;gap:0;position:relative}
.sub-step{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;text-align:center}
.sub-step::before{content:"";position:absolute;top:13px;left:-50%;width:100%;height:2px;background:color-mix(in srgb,var(--text-primary) 10%,transparent);z-index:0}
.sub-step:first-child::before{display:none}
.sub-step.done::before,.sub-step.cur::before{background:color-mix(in srgb,var(--app-accent) 55%,transparent)}
.sub-step.branch.is-revise::before{background:color-mix(in srgb,var(--color-warning) 55%,transparent)}
.sub-step.branch.is-reject::before{background:color-mix(in srgb,var(--color-error) 55%,transparent)}
.sub-step-node{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--card-bg);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--text-primary) 14%,transparent);color:var(--text-muted);position:relative;z-index:1;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast),background var(--motion-fast)}
.sub-step-node .ic{width:14px;height:14px}
.sub-step.done .sub-step-node{background:color-mix(in srgb,var(--color-success) 16%,var(--card-bg));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--color-success) 55%,transparent);color:color-mix(in srgb,var(--color-success) 78%,var(--text-primary))}
.sub-step.cur .sub-step-node{background:var(--app-accent);color:var(--on-accent,#fff);box-shadow:0 0 0 4px color-mix(in srgb,var(--app-accent) 18%,transparent),var(--shadow-e2);transform:scale(1.06)}
.sub-step.branch.is-revise .sub-step-node{background:var(--color-warning);color:var(--on-accent,#fff);box-shadow:0 0 0 4px color-mix(in srgb,var(--color-warning) 18%,transparent),var(--shadow-e2);transform:scale(1.06)}
.sub-step.branch.is-reject .sub-step-node{background:var(--color-error);color:var(--on-accent,#fff);box-shadow:0 0 0 4px color-mix(in srgb,var(--color-error) 18%,transparent),var(--shadow-e2);transform:scale(1.06)}
.sub-step-lbl{font-size:10.5px;font-weight:700;color:var(--text-secondary);line-height:1.25}
.sub-step.cur .sub-step-lbl,.sub-step.branch .sub-step-lbl{color:var(--text-primary)}
.sub-flow-acts{display:flex;gap:8px;flex-wrap:wrap}
.sub-edit-head{margin:0 0 14px}
.sub-edit-head-sub{font-size:12px;color:var(--text-muted);margin-top:3px;font-weight:500}
@media (prefers-reduced-motion:reduce){.sub-step-node{transition:none}.sub-step.cur .sub-step-node,.sub-step.branch .sub-step-node,.sub-flow-bic.is-door:active{transform:none}}
@media (max-width:640px){.sub-flow{padding:12px}.sub-steps .sub-step-lbl{font-size:9.5px}}
/* ===== Live submit-by readout (in-editor lead-time backwards-calc, mirrors row's 3-state) ===== */
.sub-byline{grid-column:1/-1;display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--app-accent) 6%,var(--surface));box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--app-accent) 16%,transparent);font-size:12.5px;color:var(--text-secondary)}
.sub-byline .ic{width:15px;height:15px;color:var(--app-accent);flex-shrink:0}
.sub-byline strong{color:var(--text-primary);font-weight:700;font-variant-numeric:tabular-nums}
.sub-byline.is-risk{background:color-mix(in srgb,var(--color-warning) 9%,var(--surface));box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--color-warning) 28%,transparent)}
.sub-byline.is-risk .ic,.sub-byline.is-risk strong{color:color-mix(in srgb,var(--color-warning) 88%,var(--text-primary))}
.sub-byline.is-late{background:color-mix(in srgb,var(--color-error) 9%,var(--surface));box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--color-error) 24%,transparent)}
.sub-byline.is-late .ic,.sub-byline.is-late strong{color:var(--color-error)}
.sub-byline.is-empty{color:var(--text-muted);background:var(--surface);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--text-primary) 8%,transparent)}
.sub-byline.is-empty .ic{color:var(--text-muted)}
/* ===== Premium revision-history TIMELINE ===== */
.sub-tl{position:relative;margin:8px 0 4px;padding:2px 0 2px 6px;max-height:54vh;overflow:auto;scrollbar-width:none}
.sub-tl::-webkit-scrollbar{width:6px}
.sub-tl::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text-primary) 14%,transparent);border-radius:99px}
.sub-tl-item{position:relative;display:flex;gap:14px;padding:0 4px 16px 0}
.sub-tl-item:last-child{padding-bottom:2px}
.sub-tl-rail{position:relative;flex:0 0 26px;display:flex;justify-content:center}
.sub-tl-rail::before{content:"";position:absolute;top:24px;bottom:-16px;left:50%;width:2px;transform:translateX(-50%);background:color-mix(in srgb,var(--text-primary) 11%,transparent)}
.sub-tl-item:last-child .sub-tl-rail::before{display:none}
.sub-tl-node{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--card-bg);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--text-primary) 14%,transparent),var(--shadow-e1);color:var(--text-muted);z-index:1}
.sub-tl-node .ic{width:13px;height:13px}
.sub-tl-node.n-approved,.sub-tl-node.n-noted{background:color-mix(in srgb,var(--color-success) 15%,var(--card-bg));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--color-success) 50%,transparent);color:color-mix(in srgb,var(--color-success) 78%,var(--text-primary))}
.sub-tl-node.n-revise,.sub-tl-node.n-pending{background:color-mix(in srgb,var(--color-warning) 16%,var(--card-bg));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--color-warning) 52%,transparent);color:color-mix(in srgb,var(--color-warning) 82%,var(--text-primary))}
.sub-tl-node.n-rejected{background:color-mix(in srgb,var(--color-error) 15%,var(--card-bg));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--color-error) 52%,transparent);color:color-mix(in srgb,var(--color-error) 80%,var(--text-primary))}
.sub-tl-body{flex:1;min-width:0;padding-top:1px}
.sub-tl-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sub-tl-rev{font-size:13px;font-weight:700;color:var(--text-primary)}
.sub-tl-meta{font-size:11px;color:var(--text-muted);margin-top:3px;line-height:1.4}
.sub-tl-notes{font-size:12px;color:var(--text-secondary);margin-top:5px;padding:7px 10px;border-radius:var(--radius-md);background:var(--surface);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--text-primary) 7%,transparent)}
.sub-tl-cur{font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--app-accent);padding:1px 7px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
.sub-bic-track{display:flex;flex-direction:column;gap:0;margin-top:6px;border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-e1),var(--lg-edge);overflow:hidden}
.sub-bic-step{display:flex;align-items:center;gap:10px;padding:9px 13px}
.sub-bic-step+.sub-bic-step{box-shadow:inset 0 .5px 0 color-mix(in srgb,var(--text-primary) 7%,transparent)}
.sub-bic-step.is-cur{background:color-mix(in srgb,var(--app-accent) 7%,transparent)}
.sub-bic-who{font-size:12.5px;font-weight:700;color:var(--text-primary);display:inline-flex;align-items:center;gap:7px}
.sub-bic-who .ic{width:13px;height:13px;color:var(--app-accent);flex-shrink:0}
.sub-bic-tag{font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--app-accent);padding:1px 6px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--app-accent) 13%,transparent)}
.sub-bic-when{margin-left:auto;font-size:11px;color:var(--text-muted);font-variant-numeric:tabular-nums}
/* Inspection depth chips + checklist editor */
.insp-cl,.insp-src{display:inline-block;margin-left:6px;padding:0 7px;border-radius:var(--radius-pill);font-size:10.5px;font-weight:600;cursor:pointer;background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-secondary)}
.insp-cl-fail{background:color-mix(in srgb,var(--color-error) 16%,transparent);color:var(--color-error)}
.insp-src{cursor:default}
/* Modal checklist-editor row — aligned 3-track grid (item / result / delete).
   The delete is force-shown here: .insp-cl-row is neither .rt-row nor .dl-fr-row,
   so the global .rt-row-del opacity:0 default would otherwise hide it on desktop. */
.insp-cl-row{display:grid;grid-template-columns:1fr 92px 32px;gap:8px;align-items:center;margin-bottom:7px}
.insp-cl-row .insp-cl-item{min-width:0}
.insp-cl-row .insp-cl-res{min-width:0}
.insp-cl-row .rt-row-del{opacity:1;display:inline-flex;align-items:center;justify-content:center}
.eq-action-btn.ic-lead{display:inline-flex;align-items:center;gap:6px}
.eq-action-btn.ic-lead .ic{width:13px;height:13px}
@media (max-width:640px){.insp-cl-row{grid-template-columns:1fr 84px 30px}}
/* Task 6 — parametric assembly drivers */
.est-asm-drivers{margin:4px 0 12px}
.est-asm-drivers-lbl{font-size:11.5px;color:var(--text-muted);margin:8px 0 6px;font-weight:600}
/* Task 7 — line-list view modes */
.est-view-switch{display:inline-flex;gap:0;margin-left:auto;border:0.5px solid var(--border);border-radius:var(--radius-pill);overflow:hidden}
.est-view-btn{background:var(--surface);border:0;color:var(--text-muted);font-size:10.5px;font-weight:700;padding:4px 10px;cursor:pointer}
.est-view-btn-on{background:var(--app-accent);color:#fff}
.est-view-compact .fin-ws-row{padding-top:3px;padding-bottom:3px}
.est-view-compact .fin-ws-row-sub{display:none}
.est-view-compact .est-sec-head{margin-top:4px}
.est-view-cards .fin-ws-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.est-view-cards .fin-ws-row{flex-direction:column;align-items:flex-start;border:0.5px solid var(--border);border-radius:12px;padding:10px;gap:4px}
.est-view-cards .fin-ws-row-amt{align-self:flex-end;font-size:15px}
/* Task 9 — leveling flags */
.eq-rec-tag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:var(--radius-pill);background:var(--color-success);color:#fff;font-size:9.5px;font-weight:700}
.eq-outlier-tag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--color-warning,#e8a33d) 20%,transparent);color:var(--color-warning,#b8791a);font-size:9.5px;font-weight:700}
.est-quote-outlier{background:color-mix(in srgb,var(--color-warning,#e8a33d) 6%,transparent)}
.est-mode-select,.est-mode-fee{height:26px;border-radius:var(--radius-pill);border:0.5px solid color-mix(in srgb,var(--text-primary) 16%,transparent);background:var(--surface);color:var(--text-secondary);font-size:11px;font-weight:700;padding:0 9px;cursor:pointer;appearance:none;-webkit-appearance:none}
.est-mode-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M0 0l4.5 6 4.5-6z' fill='%238e8e93'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;padding-right:24px}
.est-mode-fee{width:62px;padding:0 8px;font-variant-numeric:tabular-nums}
.est-mode-select:hover{color:var(--text-primary);border-color:color-mix(in srgb,var(--app-accent) 35%,transparent)}
.est-mode-pill{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;padding:2px 8px;border-radius:var(--radius-pill);color:var(--text-secondary);background:color-mix(in srgb,var(--text-primary) 9%,transparent)}
.est-mode-note{font-size:9.5px;font-weight:600;color:var(--text-muted);text-transform:none;letter-spacing:0}
.est-sec-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0 3px;padding:3px 4px}
.est-sec-name{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:color-mix(in srgb,var(--app-accent) 72%,var(--text-secondary))}
.est-sec-roll{display:inline-flex;align-items:baseline;gap:8px}
.est-sec-sell{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.est-sec-margin{font-size:10px;font-weight:700;color:var(--color-success);font-variant-numeric:tabular-nums}
/* By-Section rail rollup */
.est-sec-roll-list{display:flex;flex-direction:column;gap:7px}
.est-sec-roll-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px}
.est-sec-roll-name{flex:1;min-width:0;color:var(--text-secondary);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.est-sec-roll-tap{cursor:pointer;border-radius:7px;padding:3px 6px;margin:0 -6px;transition:background var(--motion-fast) var(--ease-out)}
.est-sec-roll-tap:hover{background:color-mix(in srgb,var(--app-accent) 8%,transparent)}
.est-sec-roll-nums{display:inline-flex;align-items:baseline;gap:8px;flex-shrink:0}
.est-sec-roll-sell{font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-primary);letter-spacing:-.2px}
.est-sec-roll-margin{font-size:10px;font-weight:700;color:var(--color-success);font-variant-numeric:tabular-nums}
/* Quote prompt modal grid */
.est-qp-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.est-qp-wide{grid-column:1/-1}
.est-qp-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}
/* Owner-acceptance proposal link (inside the Proposal modal). */
.prop-share{margin-top:18px;padding-top:16px;border-top:1px solid var(--chrome-border)}
.prop-share-h{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700}
.prop-share-h .ic{width:14px;height:14px;color:var(--app-accent)}
.prop-share-sub{font-size:12px;color:var(--text-muted);margin:4px 0 12px;line-height:1.5}
.prop-share-link{display:flex;gap:8px;align-items:center}
.prop-share-link input{flex:1;font-size:12.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.prop-share-accepted{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:13px;font-weight:600;color:var(--ok,#1a9c43)}
.prop-share-accepted .ic{width:14px;height:14px}
.prop-share-pending{margin-top:10px;font-size:12.5px;color:var(--text-muted)}
.prop-share-revoke{margin-top:8px;padding:0;font-size:12px}
.prop-share-mint .ic{width:13px;height:13px}
/* Quote-PDF import — review & map panel. Widen the generic modal only when it hosts this panel. */
.gm-modal:has(.qi-wrap){max-width:960px}
/* Import-lines modal: .estimp-wrap is min-width 640px, wider than the default 600px modal cap,
   which clipped the mapper footer ("Add lines") under overflow:hidden. Let the modal fit it. */
.gm-modal:has(.estimp-wrap){max-width:min(720px,94vw)}
.qi-h{margin:0 0 14px;font-size:18px;font-weight:700;letter-spacing:-.01em}
.qi-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.qi-meta-l{font-size:13.5px}.qi-meta-r{font-size:12px}
.qi-muted{color:var(--text-muted)}
.qi-src{display:inline-flex;align-items:center;padding:1px 7px;border-radius:var(--radius-pill);font-size:10.5px;font-weight:700;background:var(--surface-2,color-mix(in srgb,var(--text-muted) 12%,transparent));color:var(--text-muted);margin-left:6px}
.qi-src-ai{background:color-mix(in srgb,var(--app-accent) 15%,transparent);color:var(--app-accent)}
.qi-hint{font-size:12px;margin:8px 0 14px;line-height:1.5}
.qi-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:0.5px solid var(--chrome-border);border-radius:var(--radius-card,12px)}
.qi-table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:680px}
.qi-table thead th{text-align:left;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);padding:10px 12px;background:var(--surface-2,color-mix(in srgb,var(--text-muted) 6%,transparent));border-bottom:0.5px solid var(--chrome-border);position:sticky;top:0}
.qi-table td{padding:8px 12px;border-bottom:0.5px solid color-mix(in srgb,var(--chrome-border) 60%,transparent);vertical-align:middle}
.qi-table tr:last-child td{border-bottom:0}
.qi-desc{min-width:240px}.qi-desc-in{width:100%}
.qi-code{display:inline-block;margin-top:3px;font-size:10px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.qi-qty{white-space:nowrap;color:var(--text-muted);font-variant-numeric:tabular-nums}
.qi-amt-in{width:104px;text-align:right;font-variant-numeric:tabular-nums}
.qi-mode-sel{width:140px}.qi-target{width:220px;max-width:42vw}
.qi-target-cell{white-space:nowrap}
.qi-score{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:var(--radius-pill);font-size:10px;font-weight:700;font-variant-numeric:tabular-nums}
.qi-score-hi{background:color-mix(in srgb,var(--ok,#34c759) 18%,transparent);color:var(--ok,#1a9c43)}
.qi-score-mid{background:color-mix(in srgb,var(--app-accent) 16%,transparent);color:var(--app-accent)}
.qi-score-lo{background:color-mix(in srgb,var(--text-muted) 14%,transparent);color:var(--text-muted)}
.qi-row.qi-mode-skip{opacity:.5}
.qi-row.qi-mode-line .qi-target-cell{opacity:.45}
.qi-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}
@media(max-width:640px){.qi-target{max-width:60vw}}
/* ── Batch 3 — Excel/CSV estimate-line import (column-mapping panel). ── */
.estimp-wrap{min-width:min(640px,90vw)}
.estimp-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:30px 20px;border:1.5px dashed color-mix(in srgb,var(--app-accent) 40%,var(--chrome-border));border-radius:var(--radius-card,14px);background:color-mix(in srgb,var(--app-accent) 5%,transparent);cursor:pointer;transition:background var(--motion-base),border-color var(--motion-base)}
.estimp-drop:hover,.estimp-drop.over{background:color-mix(in srgb,var(--app-accent) 11%,transparent);border-color:var(--app-accent)}
.estimp-drop-ic{width:30px;height:30px;color:var(--app-accent);opacity:.85}
.estimp-drop-ic .ic{width:30px;height:30px}
.estimp-drop-t{font-size:14px;font-weight:700}.estimp-drop-s{font-size:11.5px}
.estimp-loading,.estimp-err{display:flex;align-items:center;gap:8px;padding:16px 4px;font-size:13px}
.estimp-err{color:var(--color-danger,#d33)}
.estimp-mapper-h{font-size:12.5px;margin:16px 0 8px;color:var(--text-secondary)}
.estimp-table-scroll{overflow:auto;max-height:42vh;border:0.5px solid var(--chrome-border);border-radius:var(--radius-card,12px)}
.estimp-table{border-collapse:collapse;font-size:12px}
.estimp-table thead th{padding:8px 10px;background:var(--surface-2,color-mix(in srgb,var(--text-muted) 6%,transparent));border-bottom:0.5px solid var(--chrome-border);vertical-align:top;position:sticky;top:0;text-align:left;min-width:130px}
.estimp-col-h{font-size:10.5px;font-weight:700;color:var(--text-muted);margin-bottom:6px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.estimp-map{width:100%;font-size:11.5px;height:30px}
.estimp-table td{padding:6px 10px;border-bottom:0.5px solid color-mix(in srgb,var(--chrome-border) 55%,transparent);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary)}
.estimp-savemap{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-secondary)}
/* Slice C — live import-preview readout + per-row status dots + styled preview */
.estimp-statbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:10px 0 8px;font-size:13px;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.estimp-statbar strong{color:var(--text-primary)}
.estimp-stat-sep{color:var(--text-muted);opacity:.6}
.estimp-stat-skip{display:inline-flex;align-items:center;gap:5px;color:var(--color-danger,#d33)}
.estimp-stat-skip .ic{width:13px;height:13px}
.estimp-stat-warn{color:var(--color-warning,#e8a33d)}
.estimp-dotcol{width:22px;min-width:22px!important;padding:8px 0 8px 8px!important}
.estimp-dotcell{width:22px;padding-left:8px!important;padding-right:0!important}
.estimp-rowdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--text-muted);opacity:.4}
.estimp-dot-ok{background:var(--color-success,#1a9c43);opacity:.9}
.estimp-dot-warn{background:var(--color-warning,#e8a33d);opacity:.95}
.estimp-dot-skip{background:var(--color-danger,#d33);opacity:.85}
.estimp-mapper-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;flex-wrap:wrap}
.estimp-mapper-foot .btn-quiet{padding:5px 11px;font-size:12px}
.estimp-styled{max-height:42vh;overflow:auto;border:0.5px solid var(--chrome-border);border-radius:var(--radius-card,12px)}
.estimp-styled-table{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}
.estimp-styled-table th{position:sticky;top:0;background:var(--surface-2,color-mix(in srgb,var(--text-muted) 6%,transparent));padding:8px 10px;text-align:left;font-size:10.5px;font-weight:700;color:var(--text-muted);border-bottom:0.5px solid var(--chrome-border)}
.estimp-styled-table td{padding:6px 10px;border-bottom:0.5px solid color-mix(in srgb,var(--chrome-border) 55%,transparent);color:var(--text-secondary)}
.estimp-styled-table .num{text-align:right;white-space:nowrap}
.estimp-styled-table tfoot td{border-top:0.5px solid var(--chrome-border);border-bottom:none;color:var(--text-primary);padding-top:9px}
.estimp-styled-warn td{background:color-mix(in srgb,var(--color-warning,#e8a33d) 8%,transparent)}
.estimp-styled-empty{padding:22px 4px;font-size:13px}
.estimp-result-h{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;margin:6px 0 12px}
.estimp-result-h.ok{color:var(--color-success,#1a9c43)}
.estimp-trunc{font-size:12px;margin-bottom:10px}
.estimp-errs{list-style:none;margin:0;padding:0;max-height:36vh;overflow:auto;display:flex;flex-direction:column;gap:5px}
.estimp-errli{display:flex;align-items:center;gap:7px;font-size:12px;padding:7px 10px;border-radius:9px;background:color-mix(in srgb,var(--color-warning,#e8a33d) 12%,transparent);color:var(--text-secondary)}
.estimp-errli .ic{width:13px;height:13px;flex:0 0 auto;color:var(--color-warning,#e8a33d)}
.estimp-errli.skip{background:color-mix(in srgb,var(--color-danger,#d33) 11%,transparent)}
.estimp-errli.skip .ic{color:var(--color-danger,#d33)}
/* ── Batch 3 — estimate documents hub ── */
.estdoc-wrap{min-width:min(560px,90vw)}
.estdoc-empty{display:flex;align-items:center;gap:9px;padding:24px 4px;font-size:13px}
.estdoc-list{display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow:auto}
.estdoc-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:0.5px solid var(--chrome-border);border-radius:var(--radius-card,12px);background:var(--surface-grad,var(--card-bg))}
.estdoc-type{flex:0 0 auto;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--app-accent) 13%,transparent);color:var(--app-accent)}
.estdoc-title{flex:1 1 auto;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.estdoc-by{flex:0 0 auto;font-size:11px}
.estdoc-acts{flex:0 0 auto;display:flex;gap:5px}
/* ── Batch 3 — loss-reason capture modal + win/loss advisor panel ── */
.lossr-wrap{min-width:min(440px,90vw)}
.lossr-opts{display:flex;flex-direction:column;gap:4px;margin:4px 0 12px}
.lossr-opt{display:flex;align-items:center;gap:9px;padding:9px 12px;border:0.5px solid var(--chrome-border);border-radius:11px;font-size:13px;cursor:pointer;transition:background var(--motion-fast),border-color var(--motion-fast)}
.lossr-opt:hover{background:color-mix(in srgb,var(--app-accent) 6%,transparent)}
.lossr-opt:has(input:checked){background:color-mix(in srgb,var(--app-accent) 12%,transparent);border-color:color-mix(in srgb,var(--app-accent) 38%,transparent)}
.lossr-notes{width:100%;resize:vertical}
.wl-panel{margin-top:18px;padding:18px 20px}
.wl-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.wl-title{font-size:15px;font-weight:700;letter-spacing:-.01em}
.wl-rate{font-size:13px;color:var(--text-secondary)}
.wl-insight{font-size:13px;line-height:1.5;color:var(--text-secondary);padding:9px 12px;border-radius:11px;background:color-mix(in srgb,var(--app-accent) 7%,transparent);margin-bottom:14px}
.wl-body{display:grid;grid-template-columns:1.4fr 1fr;gap:22px}
.wl-reasons{display:flex;flex-direction:column;gap:11px}
.wl-reason-h{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;margin-bottom:4px}
.wl-reason-name{font-weight:600}.wl-reason-stat{color:var(--text-muted);font-variant-numeric:tabular-nums}
.wl-bar{height:7px;border-radius:4px;background:color-mix(in srgb,var(--text-muted) 12%,transparent);overflow:hidden}
.wl-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,color-mix(in srgb,var(--color-warning,#e8a33d) 70%,var(--app-accent)),var(--color-warning,#e8a33d))}
.wl-recent-h{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:7px}
.wl-recent-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.wl-recent-li{display:flex;align-items:center;gap:8px;font-size:12px}
.wl-recent-clickable{cursor:pointer;border-radius:9px;margin:0 -7px;padding:4px 7px;transition:background var(--motion-base,.15s)}
.wl-recent-clickable:hover,.wl-recent-clickable:focus-visible{background:color-mix(in srgb,var(--text-primary) 6%,transparent);outline:none}
.wl-recent-proj{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.wl-recent-r{flex:0 0 auto;padding:1px 7px;border-radius:var(--radius-pill);font-size:10px;font-weight:700;background:color-mix(in srgb,var(--color-warning,#e8a33d) 14%,transparent);color:color-mix(in srgb,var(--color-warning,#e8a33d) 80%,var(--text-primary))}
.wl-recent-v{flex:0 0 auto;font-variant-numeric:tabular-nums}
.wl-untracked{font-size:11.5px;margin-top:12px;padding-top:10px;border-top:0.5px solid color-mix(in srgb,var(--chrome-border) 60%,transparent)}
@media(max-width:680px){.wl-body{grid-template-columns:1fr}}
/* Feature #3 — create-from-message type toggle (Task / Punch item). */
.m2t-type-btn{padding:7px 16px;font-size:12.5px;font-weight:600;border-radius:9px;background:var(--surface-2,var(--card-bg));color:var(--text-muted);border:0.5px solid var(--chrome-border)}
.m2t-type-btn.m2t-on{background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent);border-color:color-mix(in srgb,var(--app-accent) 36%,transparent);font-weight:700}
/* ── Register summary chips (meetings list + reusable) ── */
.reg-chip{display:inline-block;font-size:10.5px;font-weight:600;line-height:1.4;padding:1px 7px;border-radius:var(--radius-pill);background:var(--surface-3);color:var(--text-secondary);border:1px solid var(--border);vertical-align:middle;margin-left:3px}
.reg-chip-ok{background:var(--accent-tint);color:var(--accent);border-color:var(--accent-ring)}
.reg-chip-info{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);border-color:var(--accent-ring)}
.reg-chip-warn{background:color-mix(in srgb,var(--color-warning) 16%,transparent);color:color-mix(in srgb,var(--color-warning) 80%,var(--text-primary));border-color:color-mix(in srgb,var(--color-warning) 30%,transparent)}
/* G6-W3 — as-built file-link picker rows */
.ab-file-list{display:flex;flex-direction:column;gap:6px;max-height:30vh;overflow:auto;border:0;border-radius:var(--radius-lg);padding:2px}
/* Selectable file tiles — depth via shadow, toned active state, no border-spine.
   The hidden .abRed checkbox is preserved so _asbuiltFilesSave's selector is untouched. */
.ab-file-tile{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--radius-md);font-size:13px;cursor:pointer;background:var(--surface);box-shadow:var(--shadow-e1);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast),background var(--motion-fast)}
.ab-file-tile:hover{box-shadow:var(--shadow-e2)}
.ab-file-tile:active{transform:scale(.99)}
.ab-file-tile input{position:absolute;opacity:0;pointer-events:none}
.ab-file-ico{display:inline-flex;color:var(--text-muted)}
.ab-file-ico .ic{width:15px;height:15px}
.ab-file-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ab-file-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary)}
.ab-file-meta{font-size:10.5px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.ab-file-check{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:var(--radius-pill);color:#fff;background:transparent;opacity:0;transform:scale(.6);transition:opacity var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.ab-file-check .ic{width:12px;height:12px}
.ab-file-tile:has(.abRed:checked){background:color-mix(in srgb,var(--app-accent) 9%,var(--surface));box-shadow:var(--shadow-e1),inset 0 0 0 1px color-mix(in srgb,var(--app-accent) 28%,transparent)}
.ab-file-tile:has(.abRed:checked) .ab-file-name{color:var(--text-primary);font-weight:600}
.ab-file-tile:has(.abRed:checked) .ab-file-check{background:var(--app-accent);opacity:1;transform:scale(1)}
.field-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.field-grid-3 .field-full{grid-column:1/-1}
@media (max-width:640px){.field-grid-3{grid-template-columns:1fr 1fr}.field-grid-3 .field-dated[style*="span 2"]{grid-column:1/-1!important}}
@media (prefers-reduced-motion:reduce){.ab-file-tile,.ab-file-check{transition:opacity var(--motion-fast),background var(--motion-fast)}.ab-file-tile:active{transform:none}}
.reg-chip-type{background:var(--surface-2);text-transform:uppercase;letter-spacing:.04em;font-size:9.5px}
/* ── Meeting action-item register (inline editor) ── */
.mtg-register{display:flex;flex-direction:column;gap:6px;max-height:38vh;overflow:auto;padding:2px}
.mtg-item{display:grid;grid-template-columns:auto minmax(120px,1fr) 100px 130px 84px 96px 110px auto;gap:6px;align-items:center;padding:5px;border:1px solid var(--border);border-radius:var(--radius-group);background:var(--surface-2)}
.mtg-item .field-input{font-size:12px;padding:5px 7px}
.mtg-item-no{font-size:11px;font-weight:700;color:var(--text-secondary);min-width:22px;text-align:center;white-space:nowrap}
.mtg-item-closed{opacity:.6}
.mtg-item-closed .mtg-item-text{text-decoration:line-through}
.mtg-item-prog{box-shadow:inset 3px 0 0 0 var(--accent)}
@media(max-width:760px){.mtg-item{grid-template-columns:auto 1fr 1fr;grid-auto-rows:auto}.mtg-item-no{grid-column:1;grid-row:1}.mtg-item-text{grid-column:2/-1}}
/* ── Daily Log F5 — sign-off banner + field sub-registers ── */
.dl-signoff-banner{display:flex;align-items:center;gap:8px;padding:7px 10px;margin:2px 0 12px;border-radius:var(--radius-group);background:var(--surface-2);border:1px solid var(--border);font-size:12px}
.dl-signoff-banner svg{width:13px;height:13px;flex-shrink:0}
.dl-signoff-locked{background:var(--accent-tint);border-color:var(--accent-ring);color:var(--accent)}
.task-ws-detail-card.dl-locked .field-input:disabled{opacity:.7;cursor:not-allowed}
/* ── Daily Log entry registers — tactile category cards (depth via shadow+gap, NOT border) ── */
.dl-subregisters{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.dl-subreg{
  position:relative;background:var(--card-bg);border-radius:var(--radius-group);
  padding:11px 12px 10px;
  box-shadow:var(--lg-edge),var(--shadow-e1),0 0 0 .5px var(--chrome-border);
  transition:box-shadow var(--motion-base) var(--ease-out),transform var(--motion-fast) var(--ease-spring);
}
.dl-subreg:hover{transform:translateY(-1px);box-shadow:var(--lg-edge),var(--shadow-e2),0 0 0 .5px color-mix(in srgb,var(--dl-cat,var(--app-accent)) 30%,var(--chrome-border))}
/* faint category wash so the card reads as toned without an edge-strip */
.dl-subreg::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(150deg,color-mix(in srgb,var(--dl-cat,var(--app-accent)) 7%,transparent),transparent 58%)}
.dl-subreg-head{position:relative;display:flex;align-items:center;gap:8px;margin-bottom:8px;
  font:600 11.5px/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary)}
/* toned icon medallion = the category's glanceable identity (no stripe) */
.dl-subreg-ico{flex:0 0 auto;width:24px;height:24px;border-radius:8px;display:grid;place-items:center;
  color:var(--dl-cat,var(--app-accent));
  background:color-mix(in srgb,var(--dl-cat,var(--app-accent)) 14%,transparent);
  box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--dl-cat,var(--app-accent)) 28%,transparent)}
.dl-subreg-ico svg{width:14px;height:14px}
.dl-subreg-head-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-subreg-count{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;padding:0 6px;border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--dl-cat,var(--app-accent)) 16%,transparent);
  color:var(--dl-cat,var(--app-accent));font-size:10.5px;font-weight:800}
/* category tones (semantic; theme-adaptive via color-mix). Contrast-theme floor: blend modest %
   AND mix toward text-primary so the identity survives on a high-contrast matte */
.dl-subreg[data-dlcat="subs_onsite"]{--dl-cat:var(--app-accent)}
.dl-subreg[data-dlcat="equipment_onsite"]{--dl-cat:var(--color-warning,#d9822b)}
.dl-subreg[data-dlcat="deliveries"]{--dl-cat:var(--color-info,#3b82f6)}
.dl-subreg[data-dlcat="visitors"]{--dl-cat:color-mix(in srgb,var(--app-accent) 55%,var(--color-info,#3b82f6))}
.dl-subreg[data-dlcat="production"]{--dl-cat:var(--color-success,#1a8f5a)}
.dl-subreg-rows{position:relative;display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.dl-subreg-row{display:flex;align-items:center;gap:8px;font-size:13px;padding:6px 7px;border-radius:9px;
  background:color-mix(in srgb,var(--text-primary) 3%,transparent);
  transition:background var(--motion-fast) var(--ease-out)}
.dl-subreg-row:hover{background:color-mix(in srgb,var(--dl-cat,var(--app-accent)) 9%,transparent)}
.dl-subreg-name{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-subreg-meta{font-size:11.5px;color:var(--text-secondary);white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.dl-downtime{display:inline-flex;align-items:center;gap:3px;color:var(--color-warning,#d9822b);font-weight:700;font-size:11px}
.dl-downtime svg{width:11px;height:11px}
/* register-footer rollup — surfaces the latent numeric insight each register already carries */
.dl-subreg-roll{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px;padding:7px 8px;border-radius:9px;
  background:color-mix(in srgb,var(--dl-cat,var(--app-accent)) 8%,transparent)}
.dl-subreg-roll-lbl{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--text-secondary)}
.dl-subreg-roll-val{font-size:13px;font-weight:800;color:color-mix(in srgb,var(--dl-cat,var(--app-accent)) 88%,var(--text-primary))}
/* crafted empty state — a faint toned icon ghost + a tap-to-log prompt (no dead gray void) */
.dl-subreg-empty{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 8px 10px;text-align:center}
.dl-subreg-empty svg{width:22px;height:22px;color:color-mix(in srgb,var(--dl-cat,var(--app-accent)) 36%,transparent)}
.dl-subreg-empty-txt{font-size:11.5px;color:var(--text-secondary)}
/* F5 #21 — production %-of-estimate chip (rounded pill, contained tint — no edge strip) */
.dl-prod-pct{display:inline-block;font-size:10.5px;font-weight:800;padding:1px 8px;border-radius:999px;background:color-mix(in srgb,var(--color-success,#1a8f5a) 14%,transparent);color:var(--color-success,#1a8f5a);margin-left:2px}
/* delete = a real rounded icon button, comfortable hit area, contained tint (no hard corners) */
.dl-subreg-del{flex:0 0 auto;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:13px;line-height:1;
  min-width:32px;min-height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;
  transition:background var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-spring)}
.dl-subreg-del:hover{background:color-mix(in srgb,var(--color-error,#ef4444) 12%,transparent);color:var(--color-error,#ef4444)}
.dl-subreg-del:active{transform:scale(.9)}
/* add row — FIELD-FIRST touch sizing; overrides the legacy 11.5px (iOS zoom-on-focus) inputs */
.dl-subreg-add{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:2px}
.dl-subreg-add .dl-add-name{flex:1 1 92px;min-width:64px;min-height:38px;font-size:14px;padding:8px 10px;border-radius:var(--radius-input)}
.dl-subreg-add .dl-add-num{width:58px;flex:0 0 auto;min-height:38px;font-size:14px;padding:8px 7px;text-align:center;border-radius:var(--radius-input)}
.dl-subreg-add .dl-add-btn{flex:0 0 auto;min-height:38px;font-size:13px;font-weight:650;padding:8px 14px;border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--dl-cat,var(--app-accent)) 15%,transparent);color:color-mix(in srgb,var(--dl-cat,var(--app-accent)) 90%,var(--text-primary));
  border:none;cursor:pointer;transition:background var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-spring)}
.dl-subreg-add .dl-add-btn:hover{background:color-mix(in srgb,var(--dl-cat,var(--app-accent)) 24%,transparent)}
.dl-subreg-add .dl-add-btn:active{transform:scale(.95)}
/* #11 — inline lapsed/expiring-COI warning under the sub add row (wraps to its own line) */
.dl-sub-coi{flex:1 1 100%;display:flex;align-items:center;gap:6px;margin-top:2px}
.dl-sub-coi[hidden]{display:none}
.dl-sub-coi .dl-sub-coi-txt{font-size:10.5px;color:var(--text-secondary);line-height:1.3}
.dl-hotchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.dl-hotchip{display:inline-flex;align-items:center;min-height:30px;font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--dl-cat,var(--app-accent)) 10%,transparent);
  color:color-mix(in srgb,var(--dl-cat,var(--app-accent)) 88%,var(--text-primary));
  border:.5px solid color-mix(in srgb,var(--dl-cat,var(--app-accent)) 24%,transparent);
  cursor:pointer;transition:background var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-spring)}
.dl-hotchip:hover{background:color-mix(in srgb,var(--dl-cat,var(--app-accent)) 20%,transparent)}
.dl-hotchip:active{transform:scale(.94)}
@media(prefers-reduced-motion:reduce){
  .dl-subreg,.dl-subreg-del,.dl-subreg-add .dl-add-btn,.dl-hotchip{transition:none}
  .dl-subreg:hover,.dl-subreg-del:active,.dl-subreg-add .dl-add-btn:active,.dl-hotchip:active{transform:none}
}
@media(max-width:760px){.dl-subregisters{grid-template-columns:1fr}}
@media(max-width:640px){
  .dl-subreg-add .dl-add-name,.dl-subreg-add .dl-add-num,.dl-subreg-add .dl-add-btn{min-height:44px;font-size:16px}
  .dl-subreg-add .dl-add-num{width:64px}
  .dl-hotchip{min-height:36px;font-size:13.5px;padding:7px 14px}
}
/* ── Punch F6 — SLA aging / overdue / verify ── */
.pn-overdue{color:var(--color-error,#d04437);font-weight:600;font-size:11px}
.pn-duesoon{color:var(--color-warning,#d9822b);font-weight:600;font-size:11px}
/* overdue reads via a contained whole-row tint + the inline "Nd overdue" chip — NOT a
   colored left-edge spine (HARD rule; the old inset 3px 0 0 0 was an edge strip). */
.pn-row-overdue:not(.fin-ws-row-sel){background:linear-gradient(160deg,color-mix(in srgb,var(--color-error,#d04437) 8%,var(--card-bg)),var(--card-bg) 64%);border-color:color-mix(in srgb,var(--color-error,#d04437) 22%,var(--chrome-border,rgba(0,0,0,.08)))}
/* cont.34 — punch-item severity as a lit Atira ORB (was a flat 8px dot) */
.pn-sev-orb{width:15px;height:15px;border-radius:50%;flex-shrink:0;position:relative;
  background-color:var(--orbt,var(--color-warning));
  background-image:radial-gradient(circle at 34% 28%,rgba(255,255,255,.7),transparent 48%),radial-gradient(circle at 66% 82%,rgba(0,0,0,.28),transparent 54%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 2px rgba(0,0,0,.22),0 1px 4px color-mix(in srgb,var(--orbt,var(--color-warning)) 42%,transparent),0 0 0 .5px color-mix(in srgb,var(--orbt,var(--color-warning)) 32%,transparent)}
[data-theme="midnight"] .pn-sev-orb,[data-theme="contrast"] .pn-sev-orb{background-image:radial-gradient(circle at 34% 28%,rgba(255,255,255,.5),transparent 48%),radial-gradient(circle at 66% 82%,rgba(0,0,0,.4),transparent 54%)}
.pn-verified-tick{color:var(--accent)}
.pn-banner{display:flex;align-items:center;gap:8px;padding:6px 10px;margin:2px 0 12px;border-radius:var(--radius-group);background:var(--surface-2);border:1px solid var(--border);font-size:12px}
.pn-banner svg{width:13px;height:13px;flex-shrink:0}
.pn-banner-overdue{background:color-mix(in srgb,var(--color-error,#d04437) 12%,transparent);border-color:color-mix(in srgb,var(--color-error,#d04437) 30%,transparent);color:var(--color-error,#d04437)}
.pn-banner-ok{background:var(--accent-tint);border-color:var(--accent-ring);color:var(--accent)}
/* ── Punch F3 #6 — Walk mode (rapid sequential capture) ──
   Click-trap-safe overlay: the backdrop RESTS at opacity:1 (capturing every click so the
   site behind is inert); only the inner sheet fades/slides in. NEVER from-0 the overlay. */
.pwalk-overlay{position:fixed;inset:0;z-index:var(--z-top,9999);display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));box-sizing:border-box;background:color-mix(in srgb,#0b0d12 72%,transparent);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);opacity:1}
@media (prefers-reduced-transparency:reduce){.pwalk-overlay{background:rgba(8,10,14,.9);backdrop-filter:none;-webkit-backdrop-filter:none}}
.pwalk-sheet{width:min(440px,100%);max-height:100%;display:flex;flex-direction:column;background:var(--surface,#fff);border-radius:var(--radius-xl,22px);box-shadow:var(--shadow-e5,0 24px 70px rgba(0,0,0,.5)),inset 0 1px 0 rgba(255,255,255,.14);border:.5px solid var(--chrome-border,rgba(0,0,0,.1));overflow:hidden;opacity:0;transform:translateY(14px) scale(.985);transition:opacity var(--motion-base,.22s) var(--ease-out,ease),transform var(--motion-base,.22s) var(--ease-spring,cubic-bezier(.32,.72,0,1))}
.pwalk-overlay.show .pwalk-sheet{opacity:1;transform:none}
.pwalk-head{display:flex;align-items:center;gap:10px;padding:15px 16px 13px;border-bottom:.5px solid var(--border)}
.pwalk-head-ico{width:30px;height:30px;border-radius:9px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent)}
.pwalk-head-ico svg{width:16px;height:16px}
.pwalk-head-tt{font-size:15px;font-weight:700;color:var(--text-primary);line-height:1.15}
.pwalk-head-sub{font-size:11.5px;color:var(--text-muted);margin-top:1px}
.pwalk-count{margin-left:auto;font-size:12px;font-weight:700;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 12%,transparent);padding:3px 9px;border-radius:999px}
.pwalk-x{flex-shrink:0;width:30px;height:30px;border:none;background:color-mix(in srgb,var(--text-primary) 6%,transparent);color:var(--text-muted);border-radius:9px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--motion-fast),color var(--motion-fast)}
.pwalk-x:hover{background:color-mix(in srgb,var(--text-primary) 12%,transparent);color:var(--text-primary)}
.pwalk-x svg{width:14px;height:14px}
.pwalk-body{padding:14px 16px 4px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.pwalk-shot{width:100%;aspect-ratio:4/3;border-radius:var(--radius-lg,16px);border:1.5px dashed color-mix(in srgb,var(--app-accent) 38%,var(--border));background:color-mix(in srgb,var(--app-accent) 5%,var(--surface-2,var(--card-bg)));color:var(--app-accent);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;cursor:pointer;font:inherit;transition:background var(--motion-fast),border-color var(--motion-fast),transform var(--motion-fast)}
.pwalk-shot:hover{background:color-mix(in srgb,var(--app-accent) 10%,var(--surface-2,var(--card-bg)));border-color:color-mix(in srgb,var(--app-accent) 55%,var(--border))}
.pwalk-shot:active{transform:scale(.99)}
.pwalk-shot svg{width:34px;height:34px}
.pwalk-shot-lbl{font-size:13.5px;font-weight:650}
.pwalk-shot-sub{font-size:11px;color:var(--text-muted);font-weight:500}
.pwalk-shot.thumbed{aspect-ratio:auto;padding:0;border-style:solid;border-color:var(--border);background:#000;overflow:hidden;position:relative;display:block}
.pwalk-shot.thumbed img{width:100%;display:block;max-height:46vh;object-fit:contain}
.pwalk-shot.thumbed .pwalk-retake{position:absolute;right:8px;bottom:8px;font-size:11px;font-weight:650;padding:5px 10px;border-radius:999px;background:color-mix(in srgb,#000 55%,transparent);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pwalk-fields{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:13px}
.pwalk-fld{display:flex;flex-direction:column;gap:4px}
.pwalk-fld.wide{grid-column:1/-1}
.pwalk-fld-lbl{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
.pwalk-assignee-hint{font-size:11px;color:var(--app-accent);margin-top:5px;display:flex;align-items:center;gap:5px}
.pwalk-assignee-hint svg{width:12px;height:12px;flex-shrink:0}
.pwalk-foot{padding:12px 16px max(14px,env(safe-area-inset-bottom));border-top:.5px solid var(--border);display:flex;align-items:center;gap:10px}
.pwalk-foot .pwalk-done{font-size:13px;color:var(--text-muted);background:none;border:none;cursor:pointer;padding:6px 4px;font:inherit}
.pwalk-foot .pwalk-done:hover{color:var(--text-primary)}
.pwalk-next{margin-left:auto}
.pwalk-undo{font-size:11.5px;color:var(--text-muted);display:flex;align-items:center;gap:5px;padding:4px 0}
.pwalk-undo button{color:var(--app-accent);font-weight:650;background:none;border:none;cursor:pointer;font:inherit;padding:2px 4px;border-radius:6px}
.pwalk-undo button:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
/* ── Punch F3 #4 — lifecycle photo strip (Defect · Fix · Verify · Unsorted) ── */
.pn-stage-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.pn-stage-slot{flex:1 1 120px;min-width:110px;background:var(--surface-2,var(--card-bg));border:.5px solid var(--border);border-radius:var(--radius-group,12px);padding:8px 9px}
.pn-stage-head{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:6px;display:flex;align-items:center;gap:5px}
.pn-stage-n{font-weight:700;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 13%,transparent);border-radius:999px;padding:0 6px;font-size:10px}
.pn-stage-thumbs{display:flex;flex-wrap:wrap;gap:6px}
.pn-stage-thumb{width:44px;height:44px;padding:0;border:none;border-radius:9px;overflow:hidden;cursor:pointer;background:#000;box-shadow:inset 0 0 0 .5px var(--chrome-border);transition:transform var(--motion-fast)}
.pn-stage-thumb:hover{transform:translateY(-1px) scale(1.03)}
.pn-stage-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pn-stage-add{width:44px;height:44px;border:1.5px dashed color-mix(in srgb,var(--app-accent) 40%,var(--border));border-radius:9px;background:color-mix(in srgb,var(--app-accent) 5%,transparent);color:var(--app-accent);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--motion-fast),border-color var(--motion-fast)}
.pn-stage-add:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent);border-color:color-mix(in srgb,var(--app-accent) 60%,var(--border))}
.pn-stage-add svg{width:15px;height:15px}
/* lightbox stage pills */
.photo-lb-stage-row{display:flex;flex-wrap:wrap;gap:6px}
.lb-stage-pill{font-size:11.5px;font-weight:650;padding:5px 12px;border-radius:999px;border:.5px solid var(--border);background:color-mix(in srgb,#fff 8%,transparent);color:var(--text-secondary,#ddd);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast)}
.lb-stage-pill:hover{background:color-mix(in srgb,var(--app-accent) 20%,transparent);color:#fff}
.lb-stage-pill.active{background:var(--app-accent);border-color:var(--app-accent);color:#fff}
.lb-stage-empty{font-size:11.5px;color:var(--text-muted)}
/* ── Punch F3 #5 — ball-in-court chip + sub note + list mini-pills ── */
.pn-bic-chip{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:650;padding:5px 11px;border-radius:999px;margin:0 0 10px;border:.5px solid var(--border)}
.pn-bic-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:currentColor}
.pn-bic-gc{background:var(--accent-tint);border-color:var(--accent-ring);color:var(--accent)}
.pn-bic-sub{background:color-mix(in srgb,var(--color-warning,#d9822b) 14%,transparent);border-color:color-mix(in srgb,var(--color-warning,#d9822b) 32%,transparent);color:var(--color-warning,#d9822b)}
.pn-bic-ready{margin-left:6px;font-weight:700;color:var(--color-success,#1a9d5a)}
.pn-sub-note{font-size:12px;color:var(--text-secondary);background:var(--surface-2,var(--card-bg));border:.5px solid var(--border);border-radius:var(--radius-group,12px);padding:8px 10px;margin:0 0 10px}
.pn-sub-note-lbl{display:block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:3px}
.pn-bic-mini{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--color-warning,#d9822b) 14%,transparent);color:var(--color-warning,#d9822b)}
.pn-bic-mini .pn-bic-dot{width:5px;height:5px}
.pn-bic-mini.ready{background:color-mix(in srgb,var(--color-success,#1a9d5a) 14%,transparent);color:var(--color-success,#1a9d5a)}
/* ── Schedule F9 — conflicts + resource leveling ── */
.sched-conflict{padding:6px 8px;margin:4px 0;border-radius:var(--radius-group);background:color-mix(in srgb,var(--color-error,#d04437) 8%,transparent);border:1px solid color-mix(in srgb,var(--color-error,#d04437) 24%,transparent);cursor:pointer}
.sched-conflict:hover{background:color-mix(in srgb,var(--color-error,#d04437) 14%,transparent)}
.sched-conflict-k{font-size:11px;font-weight:700;color:var(--color-error,#d04437)}
.sched-conflict-d{font-size:11.5px;color:var(--text-secondary);margin-top:1px}
.sched-over{font-size:11.5px;color:var(--color-error,#d04437);font-weight:600;margin:4px 0;padding:5px 8px;border-radius:9px;background:color-mix(in srgb,var(--color-error,#d04437) 10%,transparent)}
.fin-wontrecover{display:flex;align-items:flex-start;gap:9px;margin:10px 0 2px;padding:11px 14px;border-radius:14px;background:color-mix(in srgb,var(--color-error,#d04437) 11%,var(--surface));color:var(--text-primary);font-size:12.5px;line-height:1.45;box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--color-error,#d04437) 32%,transparent)}
.fin-wontrecover .ic{flex:0 0 auto;width:17px;height:17px;margin-top:1px;color:var(--color-error,#d04437)}
.fin-wontrecover b{color:var(--color-error,#d04437);font-weight:700}
/* SCHED-P4 — resource-leveling solver suggestions */
.lvl-sugg-head{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin:11px 0 6px}
.lvl-sugg{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:10px;background:color-mix(in srgb,var(--app-accent) 5%,var(--card-bg));border:.5px solid color-mix(in srgb,var(--app-accent) 18%,var(--chrome-border));margin-bottom:6px}
.lvl-sugg-body{flex:1;min-width:0}
.lvl-sugg .ls-t{font-size:12px;color:var(--text-primary);font-weight:600;line-height:1.3}
.lvl-sugg .ls-m{font-size:10.5px;color:var(--text-secondary);font-weight:600;margin-top:2px}
.lvl-sugg .ls-apply{flex:0 0 auto;appearance:none;border:0;background:var(--app-accent);color:var(--on-accent,#fff);font-family:inherit;font-size:11.5px;font-weight:700;padding:6px 13px;border-radius:999px;cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring,ease-out)}
.lvl-sugg .ls-apply:active{transform:scale(.95)}
/* W7 — Auto-Balance suggestion actions (Why? + Accept) — rounded, contained, no edge-strips. */
.lvl-sugg .ls-actions{flex:0 0 auto;display:flex;align-items:center;gap:6px}
.lvl-sugg .ls-why{appearance:none;border:.5px solid var(--chrome-border);background:var(--card-bg);color:var(--text-secondary);font-family:inherit;font-size:11px;font-weight:700;padding:6px 11px;border-radius:999px;cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring,ease-out),background var(--motion-fast) ease}
.lvl-sugg .ls-why:hover{background:color-mix(in srgb,var(--app-accent) 8%,var(--card-bg));color:var(--text-primary)}
.lvl-sugg .ls-why:active{transform:scale(.95)}
/* W10 — Schedule-Triage inbox rows + urgency chips (dashboard widget + full view). */
.trg-row{display:flex;align-items:flex-start;gap:9px;padding:9px 10px;border-radius:11px;background:var(--card-bg);border:.5px solid var(--chrome-border);margin-bottom:7px;cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring,ease-out),box-shadow var(--motion-fast) ease}
.trg-row:hover{transform:translateY(-1px);box-shadow:var(--shadow-e2)}
.trg-row.trg-read{opacity:.62}
.trg-chip{flex:0 0 auto;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:999px;margin-top:1px}
.trg-chip.trg-at_risk,.trg-chip.trg-slip{background:var(--color-error-bg);color:var(--color-error)}
.trg-chip.trg-eot{background:var(--color-warning-bg);color:var(--color-warning)}
.trg-chip.trg-made_ready{background:var(--color-success-bg);color:var(--color-success)}
.trg-chip.trg-other{background:var(--badge-neutral-bg);color:var(--text-secondary)}
.trg-body{flex:1;min-width:0}
.trg-msg{font-size:12px;color:var(--text-primary);font-weight:600;line-height:1.34}
.trg-meta{font-size:10.5px;color:var(--text-muted);font-weight:600;margin-top:2px}
.trg-acts{flex:0 0 auto;display:flex;gap:5px;align-items:center}
.trg-snooze,.trg-done{appearance:none;border:.5px solid var(--chrome-border);background:var(--card-bg);color:var(--text-secondary);font-family:inherit;font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:999px;cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring,ease-out),background var(--motion-fast) ease}
.trg-snooze:hover,.trg-done:hover{background:color-mix(in srgb,var(--app-accent) 8%,var(--card-bg));color:var(--text-primary)}
.trg-snooze:active,.trg-done:active{transform:scale(.94)}
.dash-seeall{display:block;width:100%;margin-top:4px;appearance:none;border:0;background:transparent;color:var(--app-accent);font-family:inherit;font-size:11.5px;font-weight:700;padding:7px 8px;border-radius:9px;cursor:pointer;text-align:center;transition:background var(--motion-fast) ease}
.dash-seeall:hover{background:color-mix(in srgb,var(--app-accent) 8%,transparent)}
.trg-filter{appearance:none;border:.5px solid var(--chrome-border);background:var(--card-bg);color:var(--text-secondary);font-family:inherit;font-size:11.5px;font-weight:700;padding:5px 12px;border-radius:999px;cursor:pointer;transition:background var(--motion-fast) ease,color var(--motion-fast) ease}
.trg-filter:hover{background:color-mix(in srgb,var(--app-accent) 8%,var(--card-bg));color:var(--text-primary)}
.trg-filter.on{background:var(--app-accent);color:var(--on-accent,#fff);border-color:transparent}
.trg-filter-n{opacity:.75;font-weight:800;margin-left:2px}
/* W10 follow-up — snooze duration menu: a frosted Apple context menu (opaque surface + saturated blur +
   layered shadow + hairline). Glass = chrome (this is a transient popover, not content). */
.trg-snooze-menu{position:fixed;z-index:var(--z-toast,9500);min-width:128px;padding:5px;display:flex;flex-direction:column;gap:2px;border-radius:12px;background:var(--frost-bg-strong,var(--surface));backdrop-filter:var(--frost-blur,blur(20px) saturate(1.8));-webkit-backdrop-filter:var(--frost-blur,blur(20px) saturate(1.8));box-shadow:var(--lg-edge),var(--shadow-e4);border:.5px solid var(--chrome-border);animation:dgRise var(--motion-fast) var(--ease-spring,ease-out)}
.trg-snooze-menu button{appearance:none;border:0;background:transparent;color:var(--text-primary);font-family:inherit;font-size:12.5px;font-weight:600;text-align:left;padding:7px 11px;border-radius:8px;cursor:pointer;transition:background var(--motion-fast) ease}
.trg-snooze-menu button:hover{background:color-mix(in srgb,var(--app-accent) 10%,transparent)}
.trg-snooze-menu button:active{transform:scale(.97)}
@media (prefers-reduced-transparency: reduce){.trg-snooze-menu{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media (prefers-reduced-motion: reduce){.trg-snooze-menu{animation:none}}
.po-amend-note{font-size:11.5px;color:var(--accent);font-weight:600;margin:8px 0 2px;padding:4px 8px;border-radius:6px;background:var(--accent-tint)}
.est-add-sec{}
.est-takeoff-row{display:flex;gap:8px;flex-wrap:wrap}
.est-takeoff-btn{flex:0 0 auto;white-space:nowrap}
/* Phase G — PDF takeoff modal */
/* Same class as the doc-gen fix — a full-screen click-capturing backdrop must not
   depend on a from-0 opacity animation (it can stall transparent-but-present + eat
   clicks). Rest at opacity:1; the inner modal keeps its own enter animation. */
.to-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.5);backdrop-filter:blur(8px) saturate(1.4);-webkit-backdrop-filter:blur(8px) saturate(1.4);display:flex;align-items:center;justify-content:center;padding:2vh 2vw;opacity:1}
.to-modal{width:min(1680px,94vw);height:92vh;background:var(--surface);border-radius:var(--radius-modal,18px);box-shadow:var(--lg-edge),var(--shadow-e5);display:flex;flex-direction:column;overflow:hidden;animation:dgRise var(--motion-base) var(--ease-spring)}
.to-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:0.5px solid var(--border);background:var(--surface-grad);box-shadow:var(--lg-edge)}
.to-title{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px;color:var(--text-primary)}
.to-title .sb-ico{width:16px;height:16px;color:var(--app-accent)}
.to-unit-tag{font-weight:500;font-size:12px;color:var(--text-secondary)}
.to-x{background:none;border:none;font-size:17px;color:var(--text-muted);cursor:pointer;padding:4px 8px;border-radius:8px}
.to-x:hover{background:var(--frost-bg);color:var(--text-primary)}
.to-body{flex:1;display:flex;min-height:0}
.to-side{flex:0 0 260px;border-right:0.5px solid var(--border);padding:14px;overflow-y:auto;display:flex;flex-direction:column;gap:14px;background:var(--surface-2,var(--surface))}
.to-side-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);margin-bottom:6px}
.to-picker{display:flex;flex-direction:column;gap:5px;max-height:160px;overflow-y:auto}
.to-file{display:flex;align-items:center;gap:7px;padding:8px 10px;border:0.5px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text-primary);font-size:12.5px;cursor:pointer;text-align:left;box-shadow:var(--lg-edge);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-base),background var(--motion-fast),border-color var(--motion-fast)}
.to-file:hover{background:var(--frost-bg);border-color:var(--app-accent);box-shadow:var(--lg-edge),var(--shadow-e2);transform:translateY(-1px)}
.to-file:active{transform:translateY(0) scale(.98)}
.to-file .sb-ico{width:13px;height:13px;flex:0 0 auto;color:var(--app-accent)}
.to-empty,.to-empty-sm{color:var(--text-muted);font-size:12px;padding:6px 2px}
.to-tool-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.to-tool{padding:9px 8px;border:0.5px solid var(--border);border-radius:9px;background:var(--surface-grad);color:var(--text-primary);font-size:12px;font-weight:600;cursor:pointer;box-shadow:var(--lg-edge);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-base),background var(--motion-fast)}
.to-tool:hover{background:var(--surface-grad-hover);box-shadow:var(--lg-edge),var(--shadow-e2)}
.to-tool:active{transform:scale(.96)}
.to-tool-on{background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 92%,#fff),var(--app-accent));color:#fff;border-color:color-mix(in srgb,var(--app-accent) 60%,#000);box-shadow:var(--lg-edge-strong),var(--shadow-e2),var(--glow-accent)}
.to-cal-state{font-size:11.5px;color:var(--text-secondary);line-height:1.5;background:var(--frost-bg);border-radius:8px;padding:8px 10px;margin-top:8px}
.to-recal,.to-list .to-del,.to-del{background:none;border:none;color:var(--app-accent);cursor:pointer;font-size:11.5px;padding:0}
.to-page-row{display:flex;align-items:center;gap:10px;justify-content:center}
.to-pg{width:30px;height:30px;border:0.5px solid var(--border);border-radius:8px;background:var(--surface);cursor:pointer;font-size:15px;color:var(--text-primary)}
.to-pg:hover{background:var(--frost-bg)}
.to-list{display:flex;flex-direction:column;gap:4px;max-height:160px;overflow-y:auto}
.to-list-row{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text-primary);padding:4px 8px;background:var(--surface);border-radius:7px;border:0.5px solid var(--border)}
.to-list-pg{color:var(--text-muted);font-size:10.5px;margin-left:5px}
.to-del{font-size:12px;color:var(--text-muted)}.to-del:hover{color:var(--color-error)}
.to-actions{display:flex;gap:8px;margin-top:6px}
.to-apply{background:var(--app-accent)!important;color:#fff!important}
.to-total{font-size:12.5px;color:var(--text-primary);padding:6px 2px}
/* P0.R2 — estimate-lines side panel (plan ‖ estimate) */
.to-est-lines{display:flex;flex-direction:column;gap:4px;max-height:200px;overflow-y:auto}
.to-est-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 9px;border:0.5px solid var(--border);border-radius:8px;background:var(--surface);cursor:pointer;transition:background var(--motion-fast),border-color var(--motion-fast)}
.to-est-row:hover{background:var(--frost-bg)}
.to-est-active{border-color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 10%,transparent)}
.to-est-desc{font-size:12px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.to-est-qty{font-size:11.5px;font-weight:700;color:var(--app-accent);flex:0 0 auto}
.to-canvas-wrap{flex:1;position:relative;overflow:auto;background:#3a3a3a;display:flex;align-items:flex-start;justify-content:center}
.to-canvas,.to-overlay-canvas{display:block;position:absolute;top:0;left:50%;transform:translateX(-50%)}
.to-canvas{z-index:1}.to-overlay-canvas{z-index:2;cursor:crosshair}
.to-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;color:#eee;font-size:13px;background:rgba(0,0,0,.5);padding:10px 16px;border-radius:10px}
.to-hidden{display:none!important}
@media (max-width:760px){.to-side{flex-basis:200px}.to-modal{height:96vh}}
.est-asm-save{background:color-mix(in srgb,var(--app-accent) 5%,var(--surface));border:0.5px solid color-mix(in srgb,var(--text-primary) 9%,transparent);border-radius:var(--radius-card,12px);padding:12px 14px}
/* Price Book browse list */
.pb-list{display:flex;flex-direction:column;max-height:52vh;overflow:auto;border-radius:var(--radius-card,12px);border:0.5px solid color-mix(in srgb,var(--text-primary) 10%,transparent)}
.pb-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 7%,transparent)}
.pb-row:last-child{border-bottom:0}
.pb-row:hover{background:color-mix(in srgb,var(--app-accent) 5%,transparent)}
.pb-row-main{flex:1;min-width:0}
.pb-row-desc{font-size:13px;font-weight:650;color:var(--text-primary)}
.pb-unit{font-size:10.5px;font-weight:500;color:var(--text-muted);margin-left:2px}
.pb-row-meta{font-size:10.5px;font-weight:500;color:var(--text-muted);margin-top:2px}
.pb-row-nums{flex-shrink:0;text-align:right;display:flex;flex-direction:column;gap:2px}
.pb-last{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text-primary);letter-spacing:-.3px}
.pb-range{font-size:10px;font-weight:600;color:var(--text-muted);font-variant-numeric:tabular-nums}
.eq-award{color:var(--color-success);border-color:color-mix(in srgb,var(--color-success) 40%,transparent);font-weight:800}
.eq-award:hover{background:var(--color-success);color:#fff}
/* Phase B — Award Package: scope block, provenance, approval routing */
.po-scope-block,.po-approval-block{margin-top:14px;border-radius:var(--radius-card,12px);background:color-mix(in srgb,var(--app-accent) 4%,var(--surface));border:0.5px solid color-mix(in srgb,var(--text-primary) 10%,transparent);padding:13px 15px}
.po-block-lbl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--text-secondary);margin-bottom:9px}
/* Two-stage accounting hand-off (2026-07-02) — the route→confirm overlay on PO/bill cards. Signals via
   fill + pill (never an edge-strip). Stage tints: draft neutral, routed accent, paid success. */
.aph-block{margin-top:12px;padding:12px 13px;border-radius:var(--radius-card,12px);background:color-mix(in srgb,var(--text-primary) 3.5%,var(--surface));border:0.5px solid color-mix(in srgb,var(--text-primary) 9%,transparent)}
.aph-block.aph-routed{background:color-mix(in srgb,var(--app-accent) 6%,var(--surface));border-color:color-mix(in srgb,var(--app-accent) 26%,transparent)}
.aph-block.aph-paid{background:color-mix(in srgb,var(--color-success) 6%,var(--surface));border-color:color-mix(in srgb,var(--color-success) 26%,transparent)}
.aph-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.aph-badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;letter-spacing:-.1px;padding:3px 10px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-secondary)}
.aph-routed .aph-badge{background:var(--app-accent);color:#fff}
.aph-paid .aph-badge{background:var(--color-success);color:#fff}
.aph-badge .sb-ico{width:12px;height:12px}
.aph-rail{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;color:var(--text-muted);flex-wrap:wrap}
.aph-step{opacity:.5;transition:opacity .2s var(--ease-out,ease)}
.aph-step.on{opacity:1;color:var(--text-secondary)}
.aph-step.cur{color:var(--app-accent);font-weight:800}
.aph-paid .aph-step.cur{color:var(--color-success)}
.aph-arrow{opacity:.4}
.aph-note{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-secondary);padding:6px 9px;border-radius:9px;background:color-mix(in srgb,var(--app-accent) 7%,transparent);margin-bottom:8px;line-height:1.4}
.aph-note .sb-ico{width:12px;height:12px;flex:0 0 auto;color:var(--app-accent)}
.aph-note-warn{background:color-mix(in srgb,var(--color-warning) 12%,transparent);color:color-mix(in srgb,var(--color-warning) 78%,var(--text-primary))}
.aph-note-warn .sb-ico{color:var(--color-warning)}
.aph-actions{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.aph-hint{font-size:10.5px;color:var(--text-muted);margin-top:8px;line-height:1.4}
.aph-comments{margin-top:10px;border-top:0.5px solid color-mix(in srgb,var(--text-primary) 9%,transparent);padding-top:10px}
.aph-cmt-list{display:flex;flex-direction:column;gap:8px;max-height:220px;overflow:auto;margin-bottom:9px}
.aph-cmt{background:color-mix(in srgb,var(--text-primary) 4%,transparent);border-radius:10px;padding:7px 10px}
.aph-cmt-head{display:flex;justify-content:space-between;gap:8px;font-size:11px;margin-bottom:2px}
.aph-cmt-author{font-weight:700;color:var(--text-secondary)}
.aph-cmt-when{color:var(--text-muted)}
.aph-cmt-body{font-size:12.5px;color:var(--text-primary);line-height:1.4;white-space:pre-wrap;word-break:break-word}
.aph-cmt-compose{display:flex;gap:7px;align-items:center}
.po-prov{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 9%,transparent);padding:6px 10px;border-radius:var(--radius-pill);margin-bottom:9px;line-height:1.4}
/* W2-1 — "Revised by CO #N" chip on a PO an approved change order touched (amber = a
   change happened; informational, not an error). */
.po-co-chip{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:color-mix(in srgb,var(--color-warning) 75%,var(--text-primary));background:var(--color-warning-bg,color-mix(in srgb,var(--color-warning) 12%,transparent));border:0.5px solid color-mix(in srgb,var(--color-warning) 30%,transparent);padding:2px 9px;border-radius:var(--radius-pill);letter-spacing:-.05px}
/* A/R Piece 2 — "Ready to pay" PO badge (funded by a collected reimbursable invoice, not yet disbursed). */
.po-funded-pill{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;color:var(--color-success);background:color-mix(in srgb,var(--color-success) 14%,transparent);border:0.5px solid color-mix(in srgb,var(--color-success) 32%,transparent);padding:2px 9px;border-radius:var(--radius-pill);letter-spacing:-.05px}
.po-scope-list{display:flex;flex-direction:column;gap:6px}
.po-scope-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;padding:6px 0;border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 6%,transparent)}
.po-scope-row:last-child{border-bottom:0}
.po-scope-desc{flex:1;min-width:0;font-weight:600;color:var(--text-primary)}
.po-ordered-tag{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--color-success);background:color-mix(in srgb,var(--color-success) 15%,transparent);padding:1px 5px;border-radius:var(--radius-pill);margin-left:6px}
.po-ordered-toggle{flex:0 0 auto;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:2px 8px;border-radius:var(--radius-pill);border:0.5px solid color-mix(in srgb,var(--text-primary) 16%,transparent);background:var(--surface);color:var(--text-muted);cursor:pointer;transition:all var(--motion-fast) var(--ease-out)}
.po-ordered-toggle:hover{color:var(--text-secondary)}
.po-ordered-toggle.on{color:var(--color-success);border-color:color-mix(in srgb,var(--color-success) 40%,transparent);background:color-mix(in srgb,var(--color-success) 12%,transparent)}
.po-scope-add{display:flex;gap:7px;align-items:center;margin-top:10px}
.po-scope-add .field-input{flex:1}
.po-req-toggle{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.po-req-lbl{font-size:10.5px;font-weight:700;color:var(--text-muted)}
.po-req-chip{font-size:10px;font-weight:700;padding:3px 9px;border-radius:var(--radius-pill);border:0.5px solid color-mix(in srgb,var(--text-primary) 16%,transparent);background:var(--surface);color:var(--text-muted);cursor:pointer;transition:all var(--motion-fast) var(--ease-spring)}
.po-req-chip:active{transform:scale(.93)}
.po-req-chip.on{color:var(--app-accent);border-color:color-mix(in srgb,var(--app-accent) 45%,transparent);background:color-mix(in srgb,var(--app-accent) 11%,transparent)}
.po-scope-amt{flex-shrink:0;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-primary);letter-spacing:-.2px}
.po-sign-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.po-sign{border:0.5px solid color-mix(in srgb,var(--text-primary) 12%,transparent);border-radius:10px;padding:10px 12px;background:var(--surface);display:flex;flex-direction:column;gap:7px}
.po-signed{border-color:color-mix(in srgb,var(--color-success) 40%,transparent);background:color-mix(in srgb,var(--color-success) 7%,var(--surface))}
.po-sign-role{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--text-secondary)}
.po-sign-by{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--color-success)}
.po-sign-img{display:block;max-width:160px;max-height:48px;margin-bottom:5px;border-radius:6px;background:#fff;padding:3px;border:0.5px solid color-mix(in srgb,var(--text-primary) 12%,transparent)}
/* E-signature capture pad */
.sig-pad-wrap{position:relative;margin-bottom:4px}
/* Real signing card: lit-paper fill, ruled baseline, specular top edge (chrome-finish, never glass — the pad is content/paper). */
.sig-pad{width:100%;height:150px;border:0.5px solid color-mix(in srgb,var(--text-primary) 18%,transparent);border-radius:var(--radius-card,12px);background:linear-gradient(color-mix(in srgb,var(--text-primary) 2%,var(--surface)),color-mix(in srgb,var(--text-primary) 5%,var(--surface)));box-shadow:inset 0 2px 7px color-mix(in srgb,var(--text-primary) 8%,transparent),inset 0 1px 0 var(--specular-hi);cursor:crosshair;touch-action:none;display:block}
.sig-pad-wrap::before{content:"";position:absolute;left:18px;right:18px;bottom:34%;border-bottom:1px dashed color-mix(in srgb,var(--app-accent) 32%,transparent);pointer-events:none;z-index:1}
.sig-pad-cue{position:absolute;left:0;right:0;bottom:calc(34% + 6px);text-align:center;font-size:12px;font-weight:600;letter-spacing:.02em;color:color-mix(in srgb,var(--text-muted) 80%,transparent);pointer-events:none;z-index:1;transition:opacity var(--motion-fast)}
.sig-pad-wrap.has-ink .sig-pad-cue{opacity:0}
.sig-clear{position:absolute;top:8px;right:8px;font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:var(--radius-pill);border:0.5px solid color-mix(in srgb,var(--text-primary) 16%,transparent);background:var(--surface);color:var(--text-secondary);cursor:pointer}
.sig-clear:hover{color:var(--text-primary)}
.sig-mode-tabs{display:inline-flex;gap:2px;margin-bottom:10px;padding:3px;background:color-mix(in srgb,var(--text-primary) 8%,var(--surface));border:0.5px solid color-mix(in srgb,var(--text-primary) 12%,transparent);border-radius:10px}
.sig-mode-tab{appearance:none;border:0;background:transparent;color:var(--text-secondary,var(--text-muted));font:inherit;font-size:13px;font-weight:600;padding:6px 20px;border-radius:8px;cursor:pointer;transition:background var(--motion-fast,.15s) ease,color var(--motion-fast,.15s) ease,transform var(--motion-fast) var(--ease-spring)}
.sig-mode-tab:hover{color:var(--text-primary)}
.sig-mode-tab:active{transform:scale(.96)}
.sig-mode-tab.on{background:var(--surface);color:var(--text-primary);box-shadow:0 1px 3px color-mix(in srgb,var(--text-primary) 14%,transparent),inset 0 1px 0 var(--specular-hi)}
.sig-font-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.sig-font-chip{appearance:none;font-size:18px;line-height:1;padding:8px 16px;border-radius:10px;border:0.5px solid color-mix(in srgb,var(--text-primary) 14%,transparent);background:color-mix(in srgb,var(--text-primary) 3%,var(--surface));color:var(--text-secondary);cursor:pointer;transition:border-color var(--motion-fast,.15s) ease,background var(--motion-fast,.15s) ease,color var(--motion-fast,.15s) ease,transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
.sig-font-chip:hover{color:var(--text-primary);background:color-mix(in srgb,var(--text-primary) 6%,var(--surface))}
.sig-font-chip:active{transform:scale(.96)}
.sig-font-chip.on{color:var(--text-primary);border-color:color-mix(in srgb,var(--accent,#0066D6) 55%,transparent);background:color-mix(in srgb,var(--accent,#0066D6) 10%,var(--surface));box-shadow:0 2px 6px color-mix(in srgb,var(--accent,#0066D6) 16%,transparent),inset 0 1px 0 var(--specular-hi);transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.sig-mode-tab:active,.sig-font-chip:active,.sig-font-chip.on{transform:none}.sig-pad-cue{transition:none}}
.po-check{width:13px;height:13px;fill:currentColor}
.po-route-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:11px}
.po-route-note{font-size:11.5px;font-weight:600;color:var(--text-muted)}
/* PU-1 — per-record change-history timeline (in the shared history modal) */
.rec-hist{display:flex;flex-direction:column;position:relative;padding-left:6px}
.rec-hist-row{display:flex;gap:11px;padding:0 0 14px;position:relative}.rec-hist-row:last-child{padding-bottom:2px}
.rec-hist-dot{flex:0 0 auto;width:9px;height:9px;margin-top:4px;border-radius:50%;background:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 16%,transparent);position:relative;z-index:1}
.rec-hist-row::after{content:"";position:absolute;left:4px;top:15px;bottom:-2px;width:2px;background:color-mix(in srgb,var(--text-primary) 9%,transparent)}.rec-hist-row:last-child::after{display:none}
.rec-hist-main{flex:1;min-width:0}
.rec-hist-line{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.rec-hist-verb{font-size:13px;font-weight:700;color:var(--text-primary)}
.rec-hist-chg{font-size:12px;font-weight:600;color:var(--text-secondary)}
.rec-hist-arrow{color:var(--app-accent);font-weight:800}
.rec-hist-detail{font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.rec-hist-meta{font-size:11px;font-weight:600;color:var(--text-muted);margin-top:2px}
.rec-hist-btn{margin-left:auto;display:inline-flex;align-items:center;gap:5px;appearance:none;border:.5px solid var(--chrome-border);background:var(--surface-2);color:var(--text-secondary);font-family:inherit;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast) var(--ease-spring,ease-out)}
.rec-hist-btn:hover{background:color-mix(in srgb,var(--app-accent) 10%,var(--surface-2));color:var(--app-accent)}
.rec-hist-btn:active{transform:scale(.96)}
.rec-hist-btn svg{width:12px;height:12px;flex:0 0 auto;fill:none;stroke:currentColor}
/* #26 — record-history modal: local event-type + actor filter chips (mirror the activity-feed .ac chip look; scoped names so they work inside the generic modal) */
.rec-hist-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:13px}
.rec-hist-chip{height:30px;padding:0 12px;border-radius:999px;font-size:12px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:.5px solid var(--chrome-border);box-shadow:var(--shadow-e1);color:var(--text-primary);font-family:inherit;transition:background var(--motion-fast),box-shadow var(--motion-fast),color var(--motion-fast)}
.rec-hist-chip:hover{background:var(--surface-2)}
.rec-hist-chip.on{background:color-mix(in srgb,var(--app-accent) 14%,var(--card-bg));color:var(--app-accent);border-color:transparent}
.rec-hist-chip .ava{width:18px;height:18px;border-radius:999px;display:grid;place-items:center;color:#fff;font-size:9px;font-weight:800;flex:0 0 auto}
.rec-hist-chip-n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;font-size:11px;font-weight:800;background:color-mix(in srgb,var(--text-muted) 16%,transparent);color:var(--text-secondary)}
.rec-hist-chip.on .rec-hist-chip-n{background:color-mix(in srgb,var(--app-accent) 24%,transparent);color:var(--app-accent)}
.rec-hist-empty-filter{font-size:12px;color:var(--text-muted);padding:6px 2px}
/* #26 — substring diff highlight on the from→to change line */
.rec-hist-del{background:color-mix(in srgb,var(--color-danger,#ff453a) 16%,transparent);color:var(--text-primary);border-radius:4px;padding:0 2px;text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--color-danger,#ff453a) 60%,transparent)}
.rec-hist-ins{background:color-mix(in srgb,var(--color-success,#30d158) 18%,transparent);color:var(--text-primary);border-radius:4px;padding:0 2px}
.po-route-note.po-sent{color:var(--color-success)}
/* #22 — owner↔team message thread (GC side, in the Portals modal). Bubbles by author. */
.omsg-thread-gc{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto;margin-bottom:10px;padding:2px}
.omsgg{max-width:80%;padding:8px 11px;border-radius:13px;font-size:13px;line-height:1.45}
.omsgg-me{align-self:flex-end;background:color-mix(in srgb,var(--app-accent) 14%,transparent)}
.omsgg-them{align-self:flex-start;background:var(--surface-2)}
.omsgg-who{font-size:10px;font-weight:700;color:var(--app-accent);margin-bottom:2px}
.omsgg-them .omsgg-who{color:var(--text-muted)}
.omsgg-body{color:var(--text-primary);white-space:pre-wrap;word-break:break-word}
.omsgg-at{font-size:9.5px;color:var(--text-muted);margin-top:3px;text-align:right}
/* 📃 P3 — per-message view-receipt under office-authored messages */
.omsgg-seen{font-size:9.5px;color:color-mix(in srgb,var(--app-accent) 75%,var(--text-muted));margin-top:2px;text-align:right;font-weight:600}
/* 📃 P3 — per-file receipt chip in the workspace Portal tab documents list */
.pgr-rcpt{flex:none;font-size:10.5px;font-weight:650;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--color-success) 12%,transparent);color:color-mix(in srgb,var(--color-success) 72%,var(--text-primary));white-space:nowrap}
.pgr-rcpt-none{background:color-mix(in srgb,var(--text-primary) 5%,transparent);color:var(--text-muted)}
.omsgg-compose{display:flex;gap:8px;align-items:flex-end}
.omsgg-compose textarea{flex:1;resize:vertical;min-height:40px}
.po-route-hint{font-size:10.5px;color:var(--text-muted);margin-top:8px;line-height:1.4}
.po-docs{display:flex;flex-wrap:wrap;gap:6px}
.po-doc-chip{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:var(--radius-pill);letter-spacing:.2px;font-variant-numeric:tabular-nums}
.po-doc-ok{color:var(--color-success);background:color-mix(in srgb,var(--color-success) 14%,transparent)}
.po-doc-miss{color:var(--color-error);background:color-mix(in srgb,var(--color-error) 13%,transparent)}
.po-doc-exp{color:var(--color-warning);background:color-mix(in srgb,var(--color-warning) 16%,transparent)}
.po-ready{margin-top:11px}
.po-ready-yes{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--color-success);background:color-mix(in srgb,var(--color-success) 10%,transparent);padding:7px 11px;border-radius:var(--radius-pill)}
.po-ready-no{font-size:11.5px;font-weight:600;color:var(--color-warning);background:color-mix(in srgb,var(--color-warning) 10%,transparent);padding:7px 11px;border-radius:var(--radius-pill);line-height:1.4}
.po-paid-row{display:flex;align-items:center;gap:9px;margin-top:6px;flex-wrap:wrap}
/* Pass-2 PO master-row execution chip — the grid tells the signature story (rounded, contained, no edge-strip). */
.po-exec-chip{display:inline-flex;align-items:center;gap:4px;margin-top:5px;font-size:10px;font-weight:700;letter-spacing:.01em;padding:2px 8px;border-radius:var(--radius-pill);text-transform:none}
.po-exec-chip .pec-ico{width:10px;height:10px;flex:0 0 auto}
.po-exec-chip.on{background:color-mix(in srgb,var(--color-success) 12%,transparent);color:var(--color-success)}
.po-exec-chip.wait{background:color-mix(in srgb,var(--color-warning) 13%,transparent);color:color-mix(in srgb,var(--color-warning) 88%,var(--text-primary))}
/* Pass-2 PO detail-header execution gauge ring (conic; mirrors the cog/sov ring recipe).
   ONE .po-gauge rule (review fix — was double-declared); the 76px height reserves room for
   the absolutely-positioned label below the 56px ring so it never collides at any width. */
.po-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.po-detail-head-main{flex:1;min-width:0}
.po-gauge{position:relative;flex:0 0 auto;width:56px;height:56px;margin-bottom:16px;border-radius:50%;background:conic-gradient(var(--gtone) var(--g),color-mix(in srgb,var(--text-primary) 10%,transparent) var(--g));box-shadow:var(--shadow-e1);transition:background var(--motion-base) var(--ease-out)}
.po-gauge-inner{position:absolute;top:6px;left:6px;width:44px;height:44px;border-radius:50%;background:var(--card-bg);box-shadow:var(--bevel-top);display:flex;align-items:center;justify-content:center}
.po-gauge .pgv{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text-primary);letter-spacing:-.02em}
.po-gauge .pgv small{font-size:10px;font-weight:700;color:var(--text-muted)}
.po-gauge-lbl{position:absolute;top:60px;left:50%;transform:translateX(-50%);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);white-space:nowrap;text-align:center}
.po-detail-head + .po-paid-row{margin-top:14px}
@media (prefers-reduced-motion:reduce){.po-gauge{transition:none}}
.po-recon-line{margin-top:6px;font-size:11.5px;color:var(--text-muted)}
.po-paid-toggle{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 13px;border-radius:var(--radius-pill);font-size:11.5px;font-weight:700;cursor:pointer;border:0.5px solid color-mix(in srgb,var(--color-success) 40%,transparent);background:var(--surface);color:var(--color-success);transition:transform var(--motion-fast) var(--ease-spring),background var(--motion-fast) var(--ease-out)}
.po-paid-toggle:hover{background:color-mix(in srgb,var(--color-success) 12%,var(--surface))}
.po-paid-toggle:active{transform:scale(.95)}
.po-paid-on{background:color-mix(in srgb,var(--color-success) 14%,transparent)}
.po-paid-on .po-check{width:12px;height:12px;fill:currentColor}
.po-acct-sub{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--text-muted);margin:2px 0 5px}
.po-acct-note{font-size:10px;color:var(--text-muted);margin-top:9px;line-height:1.4}
.cpm-chain{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.cpm-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;padding:4px 8px;border-radius:7px;background:color-mix(in srgb,var(--text-primary) 4%,transparent)}
.cpm-row.cpm-crit{background:color-mix(in srgb,var(--color-error) 12%,transparent);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--color-error) 28%,transparent);font-weight:600}
.cpm-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-secondary);font-weight:600}
.cpm-float{flex:0 0 auto;font-size:10px;font-weight:700;color:var(--text-muted)}
.cpm-crit .cpm-float{color:var(--color-error)}
/* #9 — Schedule export (DCMA/CPM/Gantt). Button lives in the schedule lead header; a tiny
   rounded menu offers Print report + CSV float table. Rounded hover, no hard corners. */
.sched-export-btn{display:inline-flex;align-items:center;gap:6px;margin-left:auto;align-self:center;padding:7px 13px;border-radius:999px;border:.5px solid color-mix(in srgb,var(--chrome-border) 70%,transparent);background:var(--surface-1,#fff);color:var(--text-primary);font-size:12px;font-weight:650;cursor:pointer;transition:background .15s ease,box-shadow .15s ease,transform .12s ease}
.sched-export-btn svg{width:14px;height:14px}
.sched-export-btn:hover{background:var(--ctx-menu-hover,#f4f5f7);box-shadow:0 2px 8px rgba(9,30,66,.12);transform:translateY(-1px)}
.sched-export-btn:active{transform:translateY(0)}
.sched-export-menu{position:fixed;z-index:var(--z-popover,900);min-width:212px;background:var(--surface-1,#fff);border:.5px solid color-mix(in srgb,var(--chrome-border) 70%,transparent);border-radius:14px;box-shadow:0 12px 34px var(--ctx-menu-shadow,rgba(9,30,66,.35));padding:6px;animation:schExpFade .14s ease}
@keyframes schExpFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.sched-export-menu .sem-item{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;padding:9px 11px;border-radius:10px;border:none;background:none;cursor:pointer;color:var(--text-primary)}
.sched-export-menu .sem-item:hover{background:var(--ctx-menu-hover,#f4f5f7)}
.sched-export-menu .sem-item svg{width:16px;height:16px;flex:0 0 16px;margin-top:1px;color:var(--text-secondary)}
.sched-export-menu .sem-t{font-size:13px;font-weight:650;line-height:1.2}
.sched-export-menu .sem-d{font-size:11px;color:var(--text-muted);line-height:1.3;margin-top:2px}
/* G3-W1 — Schedule-workspace CPM sortable float table (rows sorted by float ascending; critical rows toned) */
.scpm-tbl-wrap{margin-top:10px;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;border-radius:10px}
.scpm-tbl{width:100%;border-collapse:collapse;font-size:12px}
.scpm-tbl th{text-align:left;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);padding:4px 8px;border-bottom:.5px solid color-mix(in srgb,var(--chrome-border) 60%,transparent);white-space:nowrap}
.scpm-tbl td{padding:6px 8px;color:var(--text-secondary);border-bottom:.5px solid color-mix(in srgb,var(--chrome-border) 35%,transparent)}
.scpm-tbl tbody tr:last-child td{border-bottom:none}
.scpm-tbl .scpm-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.scpm-tbl .scpm-name{font-weight:600;color:var(--text-primary);max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scpm-tbl .scpm-flag{text-align:right;white-space:nowrap}
.scpm-tbl tr.scpm-crit td{background:color-mix(in srgb,var(--color-error) 9%,transparent)}
.scpm-tbl tr.scpm-crit .scpm-name,.scpm-tbl tr.scpm-crit .scpm-num{color:var(--color-error)}
.scpm-pill{display:inline-block;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--color-error);background:color-mix(in srgb,var(--color-error) 14%,transparent);padding:2px 7px;border-radius:999px}
/* W6 📘 — Monte-Carlo Risk & Certainty panel. Confidence signalled by FILL + label (never an edge
   strip). All chart data is REAL (driven by the run's completion_distribution / criticality JSON). */
.schr-run{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.schr-run-btn{display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;font:inherit;font-size:12.5px;font-weight:700;color:#fff;background:linear-gradient(180deg,color-mix(in srgb,var(--app-accent) 92%,white),var(--app-accent));padding:8px 15px;border-radius:999px;box-shadow:0 1px 2px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.22);transition:transform var(--motion-fast,.16s) var(--ease-out,ease),box-shadow var(--motion-fast,.16s) var(--ease-out,ease),opacity .16s ease}
.schr-run-btn:hover{transform:translateY(-1px);box-shadow:0 3px 9px color-mix(in srgb,var(--app-accent) 35%,transparent),inset 0 1px 0 rgba(255,255,255,.22)}
.schr-run-btn:active{transform:translateY(0)}
.schr-run-btn[disabled]{opacity:.62;cursor:default;transform:none;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.schr-run-btn svg{width:14px;height:14px}
.schr-iters{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--text-secondary)}
.schr-iters select{appearance:none;-webkit-appearance:none;font:inherit;font-size:11.5px;font-weight:600;color:var(--text-primary);background:var(--surface-2,color-mix(in srgb,var(--chrome-border) 18%,transparent));border:.5px solid var(--chrome-border);border-radius:8px;padding:4px 22px 4px 9px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a8a8e' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}
.schr-pcts{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:13px 0 4px}
.schr-pcell{position:relative;border-radius:13px;padding:11px 12px;background:color-mix(in srgb,var(--app-accent) 8%,var(--card-bg));border:.5px solid color-mix(in srgb,var(--app-accent) 22%,transparent);overflow:hidden}
.schr-pcell.p80{background:color-mix(in srgb,var(--color-warning) 10%,var(--card-bg));border-color:color-mix(in srgb,var(--color-warning) 26%,transparent)}
.schr-pcell.p95{background:color-mix(in srgb,var(--color-error) 9%,var(--card-bg));border-color:color-mix(in srgb,var(--color-error) 24%,transparent)}
.schr-pk{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary)}
.schr-pv{font-size:16px;font-weight:800;color:var(--text-primary);font-variant-numeric:tabular-nums;margin-top:3px;letter-spacing:-.01em}
.schr-pd{font-size:10.5px;color:var(--text-secondary);margin-top:1px}
.schr-det{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:9px 11px;border-radius:11px;background:color-mix(in srgb,var(--chrome-border) 14%,transparent);margin:9px 0 2px}
.schr-det-l{font-size:11.5px;color:var(--text-secondary)}
.schr-det-v{font-size:12.5px;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums}
.schr-sec{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin:15px 0 8px}
/* Real histogram (one bar per finish-date bucket; height = frequency). overflow:hidden host → bars
   must NOT lift on hover (contained tint only, per the canon). */
.schr-hist{display:flex;align-items:flex-end;gap:2px;height:88px;padding:0 1px;border-radius:10px;overflow:hidden}
.schr-bar{flex:1 1 0;min-width:2px;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,color-mix(in srgb,var(--app-accent) 78%,white),var(--app-accent));transition:background .14s ease;cursor:default}
.schr-bar:hover{background:linear-gradient(180deg,color-mix(in srgb,var(--app-accent) 92%,white),color-mix(in srgb,var(--app-accent) 80%,black))}
.schr-bar.b80{background:linear-gradient(180deg,color-mix(in srgb,var(--color-warning) 80%,white),var(--color-warning))}
.schr-bar.b95{background:linear-gradient(180deg,color-mix(in srgb,var(--color-error) 78%,white),var(--color-error))}
.schr-hist-axis{display:flex;justify-content:space-between;font-size:9.5px;color:var(--text-muted);margin-top:4px;font-variant-numeric:tabular-nums}
/* Criticality heat-map rows: fill intensity scales with criticality% (no edge strip). Contained,
   rounded, no lift inside the overflow:hidden host. */
.schr-heat-row{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:9px;margin-bottom:3px;background:var(--heat,transparent);transition:background .14s ease}
.schr-heat-name{flex:1 1 auto;min-width:0;font-size:12px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.schr-heat-bar{flex:0 0 84px;height:7px;border-radius:999px;background:color-mix(in srgb,var(--chrome-border) 45%,transparent);overflow:hidden}
.schr-heat-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--color-warning) 70%,transparent),var(--color-error))}
.schr-heat-pct{flex:0 0 auto;font-size:11.5px;font-weight:700;color:var(--text-secondary);font-variant-numeric:tabular-nums;min-width:42px;text-align:right}
.schr-empty{font-size:12px;color:var(--text-secondary);line-height:1.5}
.schr-3pt-tip{font-size:11px;color:var(--text-muted);line-height:1.5;margin-top:11px}
/* W1-A 📘 — DCMA-14 schedule-health scorecard. Pass/watch/fail signalled by FILL + icon + text
   tone (never a colored edge-strip). Rows rest contained; no lift in overflow:hidden contexts. */
.schh-head{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;margin-bottom:10px}
.schh-head-pass{background:color-mix(in srgb,var(--color-success) 12%,transparent)}
.schh-head-watch{background:color-mix(in srgb,var(--color-warning) 13%,transparent)}
.schh-head-fail{background:color-mix(in srgb,var(--color-error) 12%,transparent)}
.schh-score{font-size:30px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.schh-head-pass .schh-score{color:var(--color-success)}
.schh-head-watch .schh-score{color:var(--color-warning)}
.schh-head-fail .schh-score{color:var(--color-error)}
.schh-score-d{font-size:16px;font-weight:700;opacity:.55}
.schh-score-lbl{font-size:11.5px;color:var(--text-secondary);line-height:1.35}
.schh-score-lbl b{color:var(--text-primary);font-size:12px;font-weight:700}
.schh-list{display:flex;flex-direction:column;gap:4px}
.schh-row{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:9px}
.schh-row .schh-ic{flex:0 0 auto;width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center}
.schh-row .schh-ic svg{width:13px;height:13px}
.schh-lbl{flex:1;min-width:0;font-size:12.5px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.schh-val{flex:0 0 auto;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.schh-pass{background:color-mix(in srgb,var(--color-success) 8%,transparent)}
.schh-pass .schh-ic{color:var(--color-success)} .schh-pass .schh-val{color:var(--color-success)}
.schh-watch{background:color-mix(in srgb,var(--color-warning) 9%,transparent)}
.schh-watch .schh-ic{color:var(--color-warning)} .schh-watch .schh-val{color:var(--color-warning)}
.schh-fail{background:color-mix(in srgb,var(--color-error) 9%,transparent)}
.schh-fail .schh-ic{color:var(--color-error)} .schh-fail .schh-val{color:var(--color-error)}
.schh-na{background:color-mix(in srgb,var(--text-muted) 6%,transparent)}
.schh-na .schh-ic{color:var(--text-muted)} .schh-na .schh-lbl,.schh-na .schh-val{color:var(--text-muted)}
/* CPM-1 — milestone toggle in the stage detail editor */
.stage-ws-milestone{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.stage-ws-ms-toggle{display:inline-flex;align-items:center;gap:8px;appearance:none;border:.5px solid var(--chrome-border);background:var(--surface-2);color:var(--text-secondary);font-family:inherit;font-size:12.5px;font-weight:700;padding:7px 12px;border-radius:999px;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast),transform var(--motion-fast) var(--ease-spring,ease-out)}
.stage-ws-ms-toggle:hover{background:color-mix(in srgb,var(--app-accent) 8%,var(--surface-2))}
.stage-ws-ms-toggle:active{transform:scale(.97)}
.stage-ws-ms-toggle.on{background:color-mix(in srgb,var(--app-accent) 14%,var(--surface));color:var(--app-accent);border-color:color-mix(in srgb,var(--app-accent) 34%,transparent)}
.stage-ws-ms-ico{width:14px;height:14px;flex:0 0 auto;fill:none;stroke:currentColor}
.stage-ws-ms-knob{width:26px;height:15px;flex:0 0 auto;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 18%,transparent);position:relative;transition:background var(--motion-base) var(--ease-out)}
.stage-ws-ms-knob::after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform var(--motion-base) var(--ease-spring,ease-out)}
.stage-ws-ms-toggle.on .stage-ws-ms-knob{background:var(--app-accent)}
.stage-ws-ms-toggle.on .stage-ws-ms-knob::after{transform:translateX(11px)}
.stage-ws-ms-label{flex:1;min-width:140px}
/* CPM-1 — owner-visible milestone tracker rail card */
.ms-list{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.ms-row{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:10px;background:color-mix(in srgb,var(--text-primary) 4%,transparent);cursor:pointer;transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring,ease-out)}
.ms-row:hover{background:color-mix(in srgb,var(--app-accent) 9%,transparent);transform:translateX(1px)}
.ms-row:active{transform:scale(.99)}
.ms-row-dot{width:9px;height:9px;flex:0 0 auto;border-radius:50%;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 0%,transparent)}
.ms-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ms-row-name{font-size:12.5px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-row-meta{font-size:10.5px;font-weight:600;color:var(--text-muted)}
.ms-row-slip{font-size:10.5px;font-weight:800;letter-spacing:-.1px}
.ms-row-status{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.3px}
.ms-row-sico{width:12px;height:12px;flex:0 0 auto;fill:none;stroke:currentColor}
/* CPM-2 — weather-day → schedule impact card */
.wx-impact-preview{margin-top:8px;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--color-warning) 9%,transparent);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--color-warning) 22%,transparent)}
/* V152 — weather-impact stat-tile rollup (logged / folded / unaccounted). Warn tile is a door → fold. */
.wx-roll{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.wx-roll-tile{display:flex;flex-direction:column;gap:2px;align-items:flex-start;padding:10px 12px;border-radius:12px;border:none;font:inherit;text-align:left;background:color-mix(in srgb,var(--text-primary) 4%,var(--card-bg));box-shadow:var(--shadow-e1),inset 0 0 0 .5px color-mix(in srgb,var(--text-primary) 8%,transparent)}
.wx-roll-tile.warn{background:color-mix(in srgb,var(--color-warning) 10%,var(--card-bg));box-shadow:var(--shadow-e1),inset 0 0 0 .5px color-mix(in srgb,var(--color-warning) 32%,transparent)}
.wx-roll-door{cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-base) var(--ease-out)}
.wx-roll-door:hover{transform:translateY(-1px);box-shadow:var(--shadow-e2),inset 0 0 0 .5px color-mix(in srgb,var(--color-warning) 40%,transparent)}
.wx-roll-door:active{transform:scale(.97)}
.wx-roll-n{font-size:22px;font-weight:800;letter-spacing:-.5px;color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1}
.wx-roll-tile.warn .wx-roll-n{color:color-mix(in srgb,var(--color-warning) 84%,var(--text-primary))}
.wx-roll-l{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
@media (max-width:640px){.wx-roll{grid-template-columns:1fr 1fr}.wx-roll-tile:last-child{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){.wx-roll-door{transition:none}.wx-roll-door:hover,.wx-roll-door:active{transform:none}}
.wx-impact-pv-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11.5px;padding:2px 0}
.wx-impact-pv-lbl{color:var(--text-secondary);font-weight:600}
.wx-impact-pv-val{font-weight:700;color:var(--text-primary);text-align:right;min-width:0}
.wx-impact-hist-title{margin-top:10px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted)}
.wx-impact-hist-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;margin-top:4px;border-radius:9px;background:color-mix(in srgb,var(--text-primary) 4%,transparent)}
.wx-impact-hist-main{flex:1;min-width:0;display:flex;align-items:baseline;gap:6px}
.wx-impact-hist-days{font-size:12px;font-weight:800;color:var(--app-accent);flex:0 0 auto}
.wx-impact-hist-meta{font-size:10.5px;font-weight:600;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wx-impact-undo{flex:0 0 auto;appearance:none;border:.5px solid var(--chrome-border);background:var(--surface-2);color:var(--text-secondary);font-family:inherit;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast) var(--ease-spring,ease-out)}
.wx-impact-undo:hover{background:color-mix(in srgb,var(--color-error) 12%,var(--surface-2));color:var(--color-error)}
.wx-impact-undo:active{transform:scale(.96)}
/* SCHED-P2 — "Model a slip" what-if entry + modal */
.cpm-whatif-btn{display:inline-flex;align-items:center;gap:6px;margin-top:9px;width:100%;justify-content:center;appearance:none;border:.5px solid color-mix(in srgb,var(--app-accent) 30%,var(--chrome-border));background:color-mix(in srgb,var(--app-accent) 7%,var(--surface-2));color:var(--app-accent);font-family:inherit;font-size:12px;font-weight:700;padding:8px 12px;border-radius:10px;cursor:pointer;transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring,ease-out)}
.cpm-whatif-btn:hover{background:color-mix(in srgb,var(--app-accent) 13%,var(--surface-2))}
.cpm-whatif-btn:active{transform:scale(.98)}
/* #24 — Cash-forecast what-if pill in the zone head (rounded; accent-tinted; no edge-strip). */
.cf-wi-btn{display:inline-flex;align-items:center;gap:4px;margin-left:auto;padding:4px 9px;border-radius:999px;border:.5px solid color-mix(in srgb,var(--app-accent) 28%,var(--chrome-border));background:color-mix(in srgb,var(--app-accent) 8%,var(--surface-2));font-size:11px;font-weight:700;transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring,ease-out)}
.cf-wi-btn:hover{background:color-mix(in srgb,var(--app-accent) 14%,var(--surface-2))}
.cf-wi-btn:active{transform:scale(.97)}
.cpm-whatif-btn .cwi-ico{width:14px;height:14px;flex:0 0 auto;fill:none;stroke:currentColor}
.slip-wi-modal{max-width:520px;width:calc(100vw - 32px)}
.slip-wi-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.slip-wi-head h3{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:700;letter-spacing:-.2px;margin:0}
.slip-wi-head h3 svg{width:18px;height:18px;fill:none;stroke:var(--app-accent)}
.slip-wi-x{appearance:none;border:0;background:var(--surface-2);color:var(--text-secondary);width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:15px;line-height:1}
.slip-wi-controls{display:flex;gap:12px;margin-bottom:14px}
.swc-field{display:flex;flex-direction:column;gap:5px;font-size:11.5px;font-weight:700;color:var(--text-secondary)}
.swc-field:first-child{flex:1;min-width:0}
.swc-field.swc-days{width:130px;flex:0 0 auto}
.swc-field select,.swc-field input{font-family:inherit;font-size:13px;padding:8px 10px;border-radius:10px;border:.5px solid var(--chrome-border);background:var(--surface-2);color:var(--text-primary)}
.slip-wi-result{min-height:80px;max-height:46vh;overflow:auto;border-radius:12px;background:color-mix(in srgb,var(--text-primary) 3%,transparent);padding:13px 14px;border:.5px solid var(--chrome-border)}
.swr-empty{color:var(--text-muted);font-size:12.5px;font-weight:500;text-align:center;padding:18px 0}
.swr-finish{font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:6px}
.swr-finish.bad{color:var(--color-error)}
.swr-finish b{font-weight:800}
.swr-count{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:9px}
.swr-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.swr-tbl th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);padding:0 8px 6px;font-weight:700}
.swr-tbl td{padding:5px 8px;border-top:.5px solid color-mix(in srgb,var(--text-primary) 7%,transparent);color:var(--text-secondary)}
.swr-tbl td:first-child{color:var(--text-primary);font-weight:600}
.swr-shift{color:var(--color-error);font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.slip-wi-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.swa-cancel,.swa-apply{appearance:none;font-family:inherit;font-size:13px;font-weight:700;padding:9px 18px;border-radius:999px;cursor:pointer;transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring,ease-out)}
.swa-cancel{border:.5px solid var(--chrome-border);background:var(--surface-2);color:var(--text-primary)}
.swa-apply{border:0;background:var(--app-accent);color:var(--on-accent,#fff)}
.swa-apply:disabled{opacity:.45;cursor:not-allowed}
.swa-cancel:active,.swa-apply:active:not(:disabled){transform:scale(.97)}
/* #24 — "fold pending COs" checkbox row in the cash what-if modal. */
.cf-wi-toggle{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;font-weight:600;color:var(--text-secondary);cursor:pointer;margin-bottom:12px;line-height:1.35}
.cf-wi-toggle input{margin-top:1px;flex:0 0 auto;accent-color:var(--app-accent)}
/* G3-W2-A — project work-calendar editor */
.wkcal-modal{max-width:520px;width:calc(100vw - 32px)}
.wkcal-sec{margin-bottom:18px}
.wkcal-sec-lbl{display:block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:9px}
.wkcal-days{display:flex;gap:7px;flex-wrap:wrap}
.wkcal-day{appearance:none;border:.5px solid var(--chrome-border);background:var(--surface-2);color:var(--text-secondary);font-family:inherit;font-size:12.5px;font-weight:700;width:42px;height:42px;border-radius:12px;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast),transform var(--motion-fast) var(--ease-spring,ease-out)}
.wkcal-day:hover{background:color-mix(in srgb,var(--text-primary) 5%,var(--surface-2))}
.wkcal-day:active{transform:scale(.93)}
.wkcal-day.on{background:var(--app-accent);border-color:transparent;color:var(--on-accent,#fff);box-shadow:0 2px 8px color-mix(in srgb,var(--app-accent) 30%,transparent)}
.wkcal-hol-add{display:flex;gap:9px;margin-bottom:11px}
.wkcal-hol-add input{flex:1;min-width:0;font-family:inherit;font-size:13px;padding:9px 11px;border-radius:10px;border:.5px solid var(--chrome-border);background:var(--surface-2);color:var(--text-primary)}
.wkcal-hol-add button{flex:0 0 auto;appearance:none;border:.5px solid color-mix(in srgb,var(--app-accent) 30%,var(--chrome-border));background:color-mix(in srgb,var(--app-accent) 8%,var(--surface-2));color:var(--app-accent);font-family:inherit;font-size:12.5px;font-weight:700;padding:0 16px;border-radius:10px;cursor:pointer;transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring,ease-out)}
.wkcal-hol-add button:hover{background:color-mix(in srgb,var(--app-accent) 15%,var(--surface-2))}
.wkcal-hol-add button:active{transform:scale(.96)}
.wkcal-hol-list{display:flex;flex-direction:column;gap:6px;max-height:34vh;overflow:auto}
.wkcal-hol-empty{color:var(--text-muted);font-size:12.5px;font-weight:500;text-align:center;padding:14px 0}
.wkcal-hol-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border-radius:10px;background:color-mix(in srgb,var(--text-primary) 3%,transparent);border:.5px solid color-mix(in srgb,var(--text-primary) 7%,transparent)}
.wkcal-hol-date{font-size:13px;font-weight:600;color:var(--text-primary);font-variant-numeric:tabular-nums}
.wkcal-hol-rm{appearance:none;border:0;background:transparent;color:var(--text-muted);width:26px;height:26px;border-radius:8px;cursor:pointer;font-size:15px;line-height:1;transition:background var(--motion-fast),color var(--motion-fast)}
.wkcal-hol-rm:hover{background:color-mix(in srgb,var(--color-error) 12%,transparent);color:var(--color-error)}
.wkcal-hint{font-size:11.5px;font-weight:500;color:var(--text-muted);line-height:1.45;margin-top:7px}
/* Phase F+ — interactive stage Gantt */
.stage-gantt-wrap{margin:6px 0 12px;border:0.5px solid color-mix(in srgb,var(--text-primary) 9%,transparent);border-radius:var(--radius-card,12px);background:color-mix(in srgb,var(--text-primary) 2.5%,transparent);overflow:hidden}
.stage-gantt-empty{padding:14px;font-size:12px;color:var(--text-muted);text-align:center}
.sg-head{display:flex;justify-content:space-between;align-items:baseline;padding:9px 13px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--text-secondary);border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 8%,transparent)}
.sg-hint{font-weight:500;text-transform:none;letter-spacing:0;color:var(--text-muted)}
.sg-chart{position:relative;padding:22px 13px 10px}
/* 🪁 S1-C8 — ZOOM scroller. The chart can be WIDER than this box at week/month/quarter zoom;
   this wrapper scrolls it horizontally. At 'fit' the chart is width:100% so there's nothing to
   scroll. scrollbar-gutter keeps the chart height stable when the bar appears. */
.sg-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--text-primary) 22%,transparent) transparent}
.sg-scroll::-webkit-scrollbar{height:9px}
.sg-scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text-primary) 20%,transparent);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
.sg-scroll::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--text-primary) 34%,transparent);background-clip:padding-box}
.sg-grid{position:absolute;top:18px;bottom:6px;width:0;border-left:0.5px dashed color-mix(in srgb,var(--text-primary) 10%,transparent)}
/* 🪁 S1-C8 — fainter interstitial week ticks (week zoom only) */
.sg-grid-wk{border-left-style:dotted;border-left-color:color-mix(in srgb,var(--text-primary) 6%,transparent)}
.sg-grid-lbl{position:absolute;top:3px;font-size:9px;font-weight:600;color:var(--text-muted);transform:translateX(2px)}
/* 🪁 S1-C8 — weekend / holiday / blackout day shading (timed zoom levels). Low-z tinted columns
   behind the bars + links, using the same work-calendar the drag cascade honors. Weekend is the
   quietest; holiday a touch warmer; blackout the most assertive (a hard no-work band). */
.sg-shade{position:absolute;top:18px;bottom:6px;z-index:0;background:color-mix(in srgb,var(--text-primary) 4%,transparent);pointer-events:none}
.sg-shade-hol{background:color-mix(in srgb,var(--color-warning,#d98a1f) 11%,transparent)}
.sg-shade-blk{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--color-error) 12%,transparent) 0,color-mix(in srgb,var(--color-error) 12%,transparent) 5px,transparent 5px,transparent 10px)}
.sg-today{position:absolute;top:16px;bottom:6px;width:0;border-left:1.5px solid var(--app-accent);z-index:2}
.sg-today span{position:absolute;top:-14px;left:-14px;font-size:8.5px;font-weight:700;color:var(--app-accent)}
/* 🪢 A4 — Critical-path OVERLAY. Independent of color-by: a critical bar keeps its status color
   but gains a red ring + lift so the driving path reads over any palette. The float chip shows the
   slack on each bar (0d = on the critical path). When the overlay is on, critical links intensify. */
.sg-bar.sg-bar-cpon{box-shadow:0 0 0 2px var(--card-bg,#fff),0 0 0 3.5px var(--color-error),0 2px 9px color-mix(in srgb,var(--color-error) 46%,transparent);z-index:3}
.sg-bar-float{position:absolute;right:4px;top:50%;transform:translateY(-50%);z-index:2;font-size:8.5px;font-weight:800;line-height:1;letter-spacing:.02em;color:var(--text-primary);background:var(--frost-bg-strong,var(--card-bg));border:.5px solid var(--chrome-border);padding:2px 4px;border-radius:6px;pointer-events:none;font-variant-numeric:tabular-nums;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.sg-bar-float.crit{color:#fff;background:linear-gradient(180deg,color-mix(in srgb,var(--color-error) 88%,#fff),var(--color-error));border-color:transparent}
.sg-cp-on .sg-link-path.sg-link-crit{opacity:.95;stroke-width:2.5}
.sg-cp-on .sg-link-arrow.sg-link-crit{opacity:.95}
.sg-row{display:flex;align-items:center;gap:8px;height:30px}
.sg-row-name{flex:0 0 92px;font-size:11.5px;font-weight:600;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 🪢 A1 — the editable schedule GRID: a fixed-width column band on the left of each row + a sticky
   header, aligned to the bars. The cells ARE the row's left flex region (the track stays flex:1),
   so vertical alignment is automatic. Columns: name (flex) · start · finish · dur · % · preds. */
.sg-grid-head{display:flex;align-items:center;gap:0;flex:0 0 auto;height:24px;position:sticky;top:0;z-index:5;background:var(--card-bg,#fff);border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 12%,transparent)}
.sg-grid-head .sg-gc{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);padding:0 6px;background:transparent;border:0;display:inline-flex;align-items:center}
.sg-grid-row{display:flex;align-items:center;gap:0;flex:0 0 auto}
.sg-gc{flex:0 0 auto;font-size:11px;height:24px;line-height:24px;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-right:0.5px solid color-mix(in srgb,var(--text-primary) 7%,transparent)}
.sg-gc-idx{flex:0 0 26px;width:26px;text-align:right;padding:0 5px 0 3px;color:var(--text-muted);font-size:10px;font-weight:700;font-variant-numeric:tabular-nums}
.sg-gc-name{flex:1 1 150px;min-width:120px;max-width:240px;font-weight:600;color:var(--text-primary);padding:0 7px;border-radius:5px;outline:none}
.sg-gc-name[contenteditable="true"]:hover{background:color-mix(in srgb,var(--app-accent) 7%,transparent)}
.sg-gc-name[contenteditable="true"]:focus{background:color-mix(in srgb,var(--app-accent) 12%,transparent);box-shadow:inset 0 0 0 1px var(--app-accent)}
.sg-gc-date{flex:0 0 116px;width:116px;font:inherit;font-size:10.5px;color:var(--text-secondary);background:transparent;border:0;border-right:0.5px solid color-mix(in srgb,var(--text-primary) 7%,transparent);padding:0 5px;border-radius:5px;font-variant-numeric:tabular-nums}
.sg-gc-date:hover{background:color-mix(in srgb,var(--app-accent) 7%,transparent)}
.sg-gc-date:focus{outline:none;background:color-mix(in srgb,var(--app-accent) 12%,transparent);box-shadow:inset 0 0 0 1px var(--app-accent)}
.sg-gc-dur{flex:0 0 52px;width:52px;font:inherit;font-size:11px;text-align:right;color:var(--text-secondary);background:transparent;border:0;border-right:0.5px solid color-mix(in srgb,var(--text-primary) 7%,transparent);padding:0 6px;border-radius:5px;font-variant-numeric:tabular-nums}
.sg-gc-dur:hover:not(:disabled){background:color-mix(in srgb,var(--app-accent) 7%,transparent)}
.sg-gc-dur:focus{outline:none;background:color-mix(in srgb,var(--app-accent) 12%,transparent);box-shadow:inset 0 0 0 1px var(--app-accent)}
.sg-gc-dur:disabled{opacity:.4}
.sg-gc-pct{flex:0 0 50px;width:50px;text-align:right;padding:0 7px;color:var(--text-secondary);font-variant-numeric:tabular-nums;font-weight:600}
.sg-gc-pred{flex:0 0 150px;width:150px;text-align:left;font:inherit;font-size:10.5px;color:var(--text-secondary);background:transparent;border:0;padding:0 7px;cursor:pointer;border-radius:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-gc-pred:hover{background:color-mix(in srgb,var(--app-accent) 10%,transparent);color:var(--app-accent)}
.sg-gc-mile{color:var(--app-accent);font-size:9px;vertical-align:1px}
.sg-grid-row-mile .sg-gc-name{font-weight:700}
.sg-row-track{position:relative;flex:1;height:100%}
.sg-bar{position:absolute;top:5px;height:20px;border-radius:6px;background:linear-gradient(180deg,color-mix(in srgb,var(--app-accent) 88%,#fff),var(--app-accent));box-shadow:0 1px 4px color-mix(in srgb,var(--app-accent) 40%,transparent);cursor:grab;display:flex;align-items:center;overflow:hidden;min-width:8px;transition:box-shadow var(--motion-fast)}
/* SCHED-P3 — locked-baseline ghost bar: a faint hollow dashed outline at the planned
   position, BEHIND the live bar. When the live bar is on plan it hides the ghost; when a
   stage slips, the ghost peeks out at where it was supposed to be (the classic baseline read). */
.sg-ghost{position:absolute;top:5px;height:20px;border-radius:6px;background:transparent;border:1px dashed color-mix(in srgb,var(--text-primary) 32%,transparent);pointer-events:none;min-width:6px;z-index:0}
.sg-bar{z-index:1}
.sg-bar.st-complete{background:linear-gradient(180deg,color-mix(in srgb,var(--color-success) 85%,#fff),var(--color-success));box-shadow:0 1px 4px color-mix(in srgb,var(--color-success) 36%,transparent)}
.sg-bar.sg-crit{background:linear-gradient(180deg,color-mix(in srgb,var(--color-error) 82%,#fff),var(--color-error));box-shadow:0 1px 5px color-mix(in srgb,var(--color-error) 42%,transparent)}
.sg-bar:active,.sg-bar.sg-dragging{cursor:grabbing;box-shadow:0 3px 12px rgba(0,0,0,.35);z-index:3}
.sg-bar-lbl{position:relative;z-index:1;font-size:10px;font-weight:700;color:#fff;padding:0 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 1px rgba(0,0,0,.2)}
/* 🪁 S1-C8 — %-complete fill: a brighter inset band from the left edge over the bar's own color,
   with a soft leading edge so partial progress reads at a glance. Sits above the bar gradient,
   below the label (which is z-indexed above). The done portion looks "solid", the rest "planned". */
.sg-bar-fill{position:absolute;left:0;top:0;bottom:0;z-index:0;border-radius:6px 0 0 6px;background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.14));box-shadow:inset -1px 0 0 rgba(255,255,255,.5);pointer-events:none}
.sg-bar:not(.sg-bar-fill-full) .sg-bar-fill{border-radius:6px 0 0 6px}
/* F.gantt-edit — edge-resize handles (inset at each bar end, ew-resize cursor). Sit
   inside the bar's overflow:hidden bounds so they're not clipped; widen on hover for
   grab affordance + a bigger tap target on touch. */
/* max-width:33% so the two handles never cover a narrow bar's whole body — a short
   stage stays body-draggable (move-both-dates) even on touch where handles widen. */
.sg-bar-rz{position:absolute;top:0;bottom:0;width:7px;max-width:33%;z-index:2;cursor:ew-resize;flex:0 0 auto}
.sg-bar-rz-l{left:0;border-radius:6px 0 0 6px}
.sg-bar-rz-r{right:0;border-radius:0 6px 6px 0}
.sg-bar:hover .sg-bar-rz{background:rgba(255,255,255,.35);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
@media (hover:none),(pointer:coarse){.sg-bar-rz{width:14px}}
/* F.gantt-edit — dependency-link drawing: a grab-dot on each bar's right edge that
   you drag onto another bar to create a predecessor→successor link. */
.sg-bar-link{position:absolute;right:-5px;top:50%;transform:translateY(-50%);width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--app-accent),0 1px 3px rgba(0,0,0,.3);opacity:0;transition:opacity var(--motion-fast);cursor:crosshair;z-index:4}
.sg-bar:hover .sg-bar-link{opacity:.95}
.sg-bar.sg-link-target{box-shadow:0 0 0 2px #fff,0 0 0 5px var(--app-accent)}
@media (hover:none),(pointer:coarse){.sg-bar-link{opacity:.9;width:15px;height:15px;right:-7px}}
/* G3-W2-D — color-by: data-driven modes paint the bar from --sc (set inline per stage). The
   status/critical modes keep their dedicated CSS hooks above; .sg-cb wins via specificity for
   the data modes (float/baseline/crew/milestone) without disturbing the default look. */
.sg-bar.sg-cb{background:linear-gradient(180deg,color-mix(in srgb,var(--sc,var(--app-accent)) 86%,#fff),var(--sc,var(--app-accent)));box-shadow:0 1px 4px color-mix(in srgb,var(--sc,var(--app-accent)) 38%,transparent)}
/* Milestone bars read as a diamond-tipped accent regardless of color-by (an owner checkpoint). */
.sg-bar.sg-bar-milestone{box-shadow:0 1px 4px color-mix(in srgb,var(--sc,var(--app-accent)) 38%,transparent),inset 0 0 0 1.5px rgba(255,255,255,.5)}
/* 🪢 A3 — milestone rendered as a DIAMOND on the track (P6/MSP convention): a rotated accent square
   at the milestone date with the label beside it, instead of a wide bar. Zero-width host so `left`
   centers the point; the diamond + label overflow it. Keeps drag (data-sid) + the link dot. */
.sg-bar.sg-bar-diamond{background:none;box-shadow:none;width:0;top:5px;height:20px;overflow:visible;border-radius:0;display:flex;align-items:center}
.sg-diamond{width:13px;height:13px;flex:0 0 auto;transform:translateX(-50%) rotate(45deg);background:linear-gradient(135deg,color-mix(in srgb,var(--app-accent) 88%,#fff),var(--app-accent));box-shadow:0 1px 4px color-mix(in srgb,var(--app-accent) 45%,transparent),inset 0 0 0 1px rgba(255,255,255,.55);border-radius:2px}
.sg-bar-diamond.sg-crit .sg-diamond,.sg-cp-on .sg-bar-diamond.sg-bar-cpon .sg-diamond{background:linear-gradient(135deg,color-mix(in srgb,var(--color-error) 85%,#fff),var(--color-error));box-shadow:0 1px 5px color-mix(in srgb,var(--color-error) 48%,transparent),inset 0 0 0 1px rgba(255,255,255,.55)}
.sg-bar-diamond.sg-bar-cpon{box-shadow:none}
.sg-bar-diamond-lbl{margin-left:9px;font-size:10px;font-weight:700;color:var(--text-secondary);white-space:nowrap;pointer-events:none}
.sg-bar-diamond .sg-bar-link{right:auto;left:-1px}
/* Phase-WBS — WBS outline. Section (summary) bars are DERIVED + STRUCTURALLY UNLINKABLE: they carry
   no .sg-bar/.sg-bar-link/data-sid, so links/drags/marquee can never resolve them. MSP-style dark
   bracket bar with down-caps; label knocked out against the bar. Boundary milestones (⧫ minted
   phase atoms) tint their diamond amber to read apart from user milestones. */
.sg-ind{display:inline-block;width:14px;flex:0 0 14px}
.sg-caret{background:none;border:0;padding:0 3px 0 0;margin:0;cursor:pointer;font-size:10px;color:var(--text-muted);line-height:1;border-radius:6px}
.sg-caret:hover{color:var(--app-accent)}
.sg-row-hidden{display:none}
.sg-row-name-sum{font-weight:800;color:var(--text-primary)}
.sg-sumbar{position:absolute;top:9px;height:12px;border-radius:4px;background:linear-gradient(180deg,color-mix(in srgb,var(--text-primary) 84%,var(--card-bg)),color-mix(in srgb,var(--text-primary) 66%,var(--card-bg)));box-shadow:var(--shadow-e1);display:flex;align-items:center;cursor:default}
.sg-sumbar::before,.sg-sumbar::after{content:'';position:absolute;bottom:-4px;width:0;height:0;border-style:solid}
.sg-sumbar::before{left:0;border-width:6px 5px 0 0;border-color:color-mix(in srgb,var(--text-primary) 74%,var(--card-bg)) transparent transparent transparent}
.sg-sumbar::after{right:0;border-width:6px 0 0 5px;border-color:color-mix(in srgb,var(--text-primary) 74%,var(--card-bg)) transparent transparent transparent}
.sg-sumbar-lbl{font-size:10px;font-weight:700;color:var(--card-bg);padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sg-sumbar-lbl b{font-weight:800;opacity:.8;margin-left:4px}
.sg-bar-bound .sg-diamond{background:linear-gradient(135deg,color-mix(in srgb,var(--color-warning) 88%,#fff),var(--color-warning));box-shadow:0 1px 5px color-mix(in srgb,var(--color-warning) 45%,transparent),inset 0 0 0 1px rgba(255,255,255,.5)}
/* Phase-WBS — outline authoring panel (floating .rt-panel-solid over the page). */
.wbs-ol-panel{position:fixed;top:88px;right:20px;bottom:20px;width:440px;z-index:1200;display:flex;flex-direction:column;padding:14px 14px 10px;overflow:hidden}
.wbs-ol-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.wbs-ol-title{font-weight:800;font-size:14px;flex:1;color:var(--text-primary)}
.wbs-ol-x{background:none;border:0;cursor:pointer;font-size:13px;color:var(--text-muted);border-radius:8px;padding:4px 7px}
.wbs-ol-x:hover{background:color-mix(in srgb,var(--text-primary) 7%,transparent);color:var(--text-primary)}
.wbs-ol-bar{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.wbs-ol-hint{font-size:10.5px;color:var(--text-muted);flex-basis:100%}
.wbs-ol-list{flex:1;min-height:0;overflow-y:auto;border-top:.5px solid var(--border);padding-top:6px}
.wbs-ol-row{display:flex;align-items:center;gap:6px;padding:5px 4px;border-radius:8px;font-size:12.5px}
.wbs-ol-row:hover{background:color-mix(in srgb,var(--app-accent) 6%,transparent)}
.wbs-ol-ind{flex:0 0 auto}
.wbs-ol-ico{width:14px;text-align:center;color:var(--text-muted);font-size:11px}
.wbs-ol-sum .wbs-ol-name{font-weight:800}
.wbs-ol-bound .wbs-ol-ico{color:var(--color-warning)}
.wbs-ol-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:text;color:var(--text-primary)}
.wbs-ol-meta{font-size:10.5px;color:var(--text-muted);white-space:nowrap}
.wbs-ol-ctls{display:none;gap:2px}
.wbs-ol-row:hover .wbs-ol-ctls{display:inline-flex}
.wbs-ol-ctl{background:none;border:.5px solid var(--border);border-radius:6px;cursor:pointer;font-size:10px;line-height:1;padding:3px 5px;color:var(--text-secondary)}
.wbs-ol-ctl:hover{color:var(--app-accent);border-color:var(--app-accent)}
.wbs-ol-rename{font-size:12.5px;flex:1}
.wbs-ol-empty{padding:16px;color:var(--text-muted);font-size:12px}
@media(max-width:760px){.wbs-ol-panel{left:12px;right:12px;width:auto}}
/* 🫐 A4 — per-portal share picker popover (Files page). Solid panel, rounded rows. */
.flw-pp{position:fixed;z-index:1300;width:300px;padding:12px;display:flex;flex-direction:column;gap:6px}
.flw-pp-head{font-weight:800;font-size:12.5px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.flw-pp-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:9px;font-size:12.5px;cursor:pointer;color:var(--text-primary)}
.flw-pp-row:hover{background:color-mix(in srgb,var(--app-accent) 7%,transparent)}
.flw-pp-all{font-weight:700}
.flw-pp-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flw-pp-role{font-size:10.5px;color:var(--text-muted);text-transform:capitalize}
.flw-pp-div{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin:4px 2px 0;padding-top:6px;border-top:.5px solid var(--border)}
.flw-pp-list{max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.flw-pp-empty{padding:10px 8px;font-size:11.5px;color:var(--text-muted)}
.flw-pp-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:6px;padding-top:8px;border-top:.5px solid var(--border)}
/* 🫐 row-10 — chat long-press MESSAGE MENU: compact anchored glass popover (iMessage-style,
   same visual family as .tc-react-pop) — NOT a full-width bottom sheet. */
.tc-msg-menu{position:fixed;z-index:var(--z-top);min-width:198px;max-width:250px;padding:5px;display:flex;flex-direction:column;gap:1px;border-radius:var(--radius-xl);background:var(--lg-bg-strong);border:.5px solid var(--chrome-border);box-shadow:var(--lg-edge-strong),0 18px 48px -10px rgba(0,0,0,.32),0 4px 14px rgba(0,0,0,.12);backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract);animation:tcPopIn var(--motion-fast) ease-out}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.tc-msg-menu{background:var(--surface)}}
@media (prefers-reduced-transparency:reduce){.tc-msg-menu{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
.tc-mm-row{display:flex;align-items:center;gap:10px;padding:9px 11px;border:0;background:none;border-radius:10px;font-size:13.5px;font-weight:550;color:var(--text-primary);cursor:pointer;text-align:left;width:100%}
.tc-mm-row:active,.tc-mm-row:hover{background:color-mix(in srgb,var(--app-accent) 9%,transparent)}
.tc-mm-ico{width:16px;height:16px;flex:0 0 16px;color:var(--text-secondary)}
.tc-mm-danger,.tc-mm-danger .tc-mm-ico{color:var(--color-error)}
.tc-mm-danger:active,.tc-mm-danger:hover{background:color-mix(in srgb,var(--color-error) 10%,transparent)}
.tc-mm-sep{height:.5px;background:var(--border);margin:3px 8px}
.tc-mm-tapbacks{display:flex;gap:2px;justify-content:space-between;padding:3px 2px 6px;margin-bottom:3px;border-bottom:.5px solid var(--border)}
.tc-mm-tap{background:none;border:0;border-radius:999px;width:32px;height:32px;font-size:18px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:transform var(--motion-fast),background var(--motion-fast)}
.tc-mm-tap:hover,.tc-mm-tap:active{background:color-mix(in srgb,var(--app-accent) 10%,transparent);transform:scale(1.2)}
/* G3-W2-C — selected bars (marquee / shift-click): a rounded accent ring (no edge-strip), and
   a subtle lift. The ring is rounded to satisfy the no-hard-corners rule. */
.sg-bar.sg-bar-sel{box-shadow:0 0 0 2px var(--card-bg,#fff),0 0 0 4px var(--app-accent),0 2px 8px color-mix(in srgb,var(--app-accent) 40%,transparent);z-index:4}
/* G3-W2-C — the rubber-band marquee rect itself (rounded, frosted accent tint). */
.sg-marquee{position:absolute;z-index:6;border:1.5px solid var(--app-accent);border-radius:8px;background:color-mix(in srgb,var(--app-accent) 12%,transparent);pointer-events:none;box-shadow:0 2px 10px color-mix(in srgb,var(--app-accent) 22%,transparent)}
.sg-marquee[hidden]{display:none}
/* G3-W2-B — drag-ripple preview: predicted downstream positions as rounded dashed accent
   outlines (distinct from the static baseline ghost), plus a floating summary chip. */
.sg-ripple{position:absolute;top:5px;height:20px;border-radius:6px;background:color-mix(in srgb,var(--app-accent) 14%,transparent);border:1.5px dashed var(--app-accent);pointer-events:none;min-width:6px;z-index:2;animation:sgRippleIn var(--motion-fast,150ms) var(--ease-out,ease)}
@keyframes sgRippleIn{from{opacity:0}to{opacity:.92}}
.sg-ripple-chip{position:absolute;top:2px;right:10px;z-index:7;font-size:10.5px;font-weight:800;letter-spacing:.01em;color:#fff;background:linear-gradient(180deg,color-mix(in srgb,var(--app-accent) 90%,#fff),var(--app-accent));padding:3px 9px;border-radius:999px;box-shadow:0 2px 8px color-mix(in srgb,var(--app-accent) 40%,transparent);pointer-events:none}
.sg-ripple-chip.bad{background:linear-gradient(180deg,color-mix(in srgb,var(--color-error) 88%,#fff),var(--color-error));box-shadow:0 2px 8px color-mix(in srgb,var(--color-error) 40%,transparent)}
/* 🪁 S1-C8 — live drag date tag: a frosted chip that follows the cursor showing the projected
   date(s) mid-drag. High z so it floats over bars; pointer-events:none so it never eats the drag. */
.sg-drag-tag{position:absolute;z-index:9;pointer-events:none;font-size:11px;font-weight:700;letter-spacing:.01em;color:var(--text-primary);background:var(--frost-bg-strong,var(--card-bg));-webkit-backdrop-filter:var(--lg-refract,blur(14px));backdrop-filter:var(--lg-refract,blur(14px));border:.5px solid var(--chrome-border);padding:4px 9px;border-radius:9px;box-shadow:var(--shadow-e3,0 4px 14px rgba(0,0,0,.22));white-space:nowrap;font-variant-numeric:tabular-nums}
/* G3-W2-D — color-by segmented toolbar + legend (a floating control row under the head). */
.sg-cb-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:8px 13px;border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 7%,transparent)}
/* 🪁 S1-C8 — the zoom control shares the color-by bar's look; slightly tighter as a sibling row */
.sg-cb-bar-lower{padding-top:7px;padding-bottom:7px}
.sg-cb-cap{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted)}
.sg-cb-segs{display:inline-flex;gap:2px;padding:2px;background:var(--surface-2,color-mix(in srgb,var(--text-primary) 6%,transparent));border-radius:10px}
.sg-cb-seg{font:inherit;font-size:11px;font-weight:700;color:var(--text-secondary);background:transparent;border:0;padding:4px 9px;border-radius:8px;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast)}
.sg-cb-seg:hover{color:var(--text-primary);background:color-mix(in srgb,var(--app-accent) 10%,transparent)}
.sg-cb-seg.on{color:#fff;background:linear-gradient(180deg,color-mix(in srgb,var(--app-accent) 88%,#fff),var(--app-accent));box-shadow:0 1px 4px color-mix(in srgb,var(--app-accent) 36%,transparent)}
.sg-cb-legend{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 11px;font-size:10.5px;font-weight:600;color:var(--text-secondary)}
.sg-lg-item{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.sg-lg-sw{width:11px;height:11px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
/* G3-W2-E — saved-view chips in the head trailing edge. */
.sg-head{flex-wrap:wrap;gap:6px 12px}
.sg-head-l{display:flex;flex-direction:column;gap:1px;min-width:0}
.sg-views{display:inline-flex;align-items:center;flex-wrap:wrap;gap:5px;margin-left:auto}
.sg-view-chip,.sg-view-save{font:inherit;font-size:10.5px;font-weight:700;text-transform:none;letter-spacing:0;display:inline-flex;align-items:center;color:var(--text-secondary);background:var(--surface-2,color-mix(in srgb,var(--text-primary) 6%,transparent));border:.5px solid transparent;padding:3px 9px;border-radius:999px;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast)}
.sg-view-chip:hover,.sg-view-save:hover{color:var(--text-primary);background:color-mix(in srgb,var(--app-accent) 12%,transparent);box-shadow:0 1px 4px color-mix(in srgb,var(--app-accent) 18%,transparent)}
.sg-view-x{margin-left:5px;font-size:12px;line-height:1;color:var(--text-muted);border-radius:50%;width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;transition:background var(--motion-fast),color var(--motion-fast)}
.sg-view-x:hover{background:color-mix(in srgb,var(--color-error) 16%,transparent);color:var(--color-error)}
.sg-view-save .ic{color:var(--app-accent)}
/* Touch: the marquee + group-drag need a comfortable target; selection ring stays visible. */
@media (hover:none),(pointer:coarse){.sg-cb-seg{padding:6px 11px}.sg-view-chip,.sg-view-save{padding:5px 11px}}
/* No pointer-events:none here — the parent would suppress hit-testing for every child
   path regardless of their own pointer-events, breaking click-to-remove. Each path opts
   in via pointer-events:stroke; the empty SVG canvas stays click-through (no fill). */
.sg-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1}
.sg-link-path{stroke:var(--text-secondary);stroke-width:1.5;fill:none;opacity:.55;pointer-events:stroke;cursor:pointer;transition:opacity var(--motion-fast),stroke var(--motion-fast)}
.sg-link-path:hover{opacity:1;stroke:var(--color-error);stroke-width:2.5}
.sg-link-path.sg-link-crit{stroke:var(--color-error);opacity:.7}
.sg-link-arrow{fill:var(--text-secondary);opacity:.55}
.sg-link-arrow.sg-link-crit{fill:var(--color-error);opacity:.7}
.sg-link-drag{stroke:var(--app-accent);stroke-width:2;stroke-dasharray:4 3;fill:none;opacity:.85}
/* SCHED-P1 — a non-default link (SS/FF/SF or any lag) is dashed + carries a type chip */
.sg-link-path.sg-link-typed{stroke-dasharray:5 3}
/* 🪁 S1-C8 — per-type dash cadence so the three non-FS types read apart at a glance (chip still
   names them exactly). FS = solid (no class). SS = tight even dashes; FF = long dash + gap; SF =
   dash-dot. Lag-only FS links keep the generic .sg-link-typed dash above. */
.sg-link-path.sg-link-t-SS{stroke-dasharray:3 3}
.sg-link-path.sg-link-t-FF{stroke-dasharray:8 4}
.sg-link-path.sg-link-t-SF{stroke-dasharray:7 3 2 3}
.sg-link-lbl{fill:var(--text-secondary);font-size:9px;font-weight:800;letter-spacing:.02em;pointer-events:none;paint-order:stroke;stroke:var(--card-bg);stroke-width:3px}
/* SCHED-P1 — dependency link editor popover (type · lag · remove) */
.gantt-link-pop{position:fixed;z-index:1200;width:248px;background:var(--frost-bg-strong,var(--card-bg));-webkit-backdrop-filter:var(--lg-refract,blur(18px));backdrop-filter:var(--lg-refract,blur(18px));border:.5px solid var(--chrome-border);border-radius:14px;box-shadow:var(--shadow-e4);padding:12px 13px;animation:pgGuideIn var(--motion-base) var(--ease-out,ease)}
.gantt-link-pop .glp-head{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--text-primary);margin-bottom:10px;line-height:1.25}
.gantt-link-pop .glp-from,.gantt-link-pop .glp-to{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gantt-link-pop .glp-to{text-align:right}
.gantt-link-pop .glp-arrow{flex:0 0 auto;color:var(--text-muted)}
.gantt-link-pop .glp-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11.5px;font-weight:600;color:var(--text-secondary);margin-bottom:8px}
.gantt-link-pop .glp-type,.gantt-link-pop .glp-lag{font-family:inherit;font-size:12px;padding:5px 8px;border-radius:9px;border:.5px solid var(--chrome-border);background:var(--surface-2);color:var(--text-primary)}
.gantt-link-pop .glp-type{flex:1;min-width:0}
.gantt-link-pop .glp-lag{width:74px;text-align:right}
.gantt-link-pop .glp-actions{display:flex;justify-content:space-between;gap:8px;margin-top:11px}
.gantt-link-pop .glp-remove,.gantt-link-pop .glp-save{appearance:none;font-family:inherit;font-size:12px;font-weight:700;padding:7px 14px;border-radius:999px;cursor:pointer;transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring,ease-out)}
.gantt-link-pop .glp-remove{border:.5px solid var(--chrome-border);background:var(--surface-2);color:var(--color-error)}
.gantt-link-pop .glp-save{border:0;background:var(--app-accent);color:var(--on-accent,#fff)}
.gantt-link-pop .glp-remove:active,.gantt-link-pop .glp-save:active{transform:scale(.96)}
@media(max-width:640px){.sg-row-name{flex:0 0 64px;font-size:10.5px}}
.po-bill-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 6%,transparent);font-size:12px}
.po-bill-row:last-child{border-bottom:0}
.po-bill-desc{flex:1;min-width:0;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;gap:1px}
.po-bill-vendor{font-size:9.5px;font-weight:500;color:var(--text-muted)}
.po-bill-amt{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.po-bill-pay{flex:0 0 auto;font-size:9.5px;font-weight:800;padding:2px 8px;border-radius:var(--radius-pill);border:0.5px solid color-mix(in srgb,var(--color-success) 36%,transparent);background:var(--surface);color:var(--color-success);cursor:pointer}
.po-bill-pay.on{background:color-mix(in srgb,var(--color-success) 14%,transparent)}
.po-spr-badge{font-size:9.5px;font-weight:800;color:#fff;background:var(--color-warning);padding:1px 7px;border-radius:var(--radius-pill);margin-left:6px}
.po-spr-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 6%,transparent);font-size:12px}
.po-spr-row:last-child{border-bottom:0}
.po-spr-main{flex:1;min-width:0}
.po-spr-vendor{font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.po-spr-meta{font-size:9.5px;color:var(--text-muted)}
.po-spr-amt{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.po-spr-acts{flex:0 0 auto;display:inline-flex;gap:4px}
.po-spr-ok,.po-spr-no{width:24px;height:24px;border-radius:7px;border:0.5px solid color-mix(in srgb,var(--text-primary) 14%,transparent);background:var(--surface);cursor:pointer;font-weight:800;font-size:12px;line-height:1}
.po-spr-ok{color:var(--color-success)}.po-spr-ok:hover{background:color-mix(in srgb,var(--color-success) 14%,var(--surface))}
.po-spr-no{color:var(--color-error)}.po-spr-no:hover{background:color-mix(in srgb,var(--color-error) 12%,var(--surface))}
.po-spr-status{flex:0 0 auto;font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:var(--radius-pill)}
.po-spr-approved{color:var(--color-success);background:color-mix(in srgb,var(--color-success) 14%,transparent)}
.po-spr-rejected{color:var(--color-error);background:color-mix(in srgb,var(--color-error) 12%,transparent)}
/* 🐡 §7-C P3.3 (G) — office "Reconcile" action on a submitted sub pay request. */
.po-spr-recon{flex:0 0 auto;height:24px;padding:0 9px;border-radius:7px;border:0.5px solid color-mix(in srgb,var(--app-accent) 30%,transparent);background:color-mix(in srgb,var(--app-accent) 8%,var(--surface));color:var(--app-accent);cursor:pointer;font-weight:700;font-size:11px;line-height:1}
.po-spr-recon:hover{background:color-mix(in srgb,var(--app-accent) 16%,var(--surface))}
.po-spr-priced{font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;background:color-mix(in srgb,var(--color-success) 20%,transparent);color:color-mix(in srgb,var(--color-success) 78%,var(--text-primary));padding:0 4px;border-radius:var(--radius-pill);margin-left:4px}
/* Reconcile grid modal — mirrors renderSovPanel's G703 grid, line-by-line approve/adjust. */
.src-body{display:flex;flex-direction:column;gap:14px;min-width:min(760px,86vw)}
.src-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.src-vendor{font-size:17px;font-weight:800}
.src-sub{font-size:12px;color:var(--text-muted);margin-top:2px}
.src-priced{color:color-mix(in srgb,var(--color-success) 78%,var(--text-primary));font-weight:700}
.src-ctxfig{text-align:right}
.src-ctxfig-l{font-size:10.5px;text-transform:uppercase;letter-spacing:.35px;color:var(--text-muted)}
.src-ctxfig-v{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.src-grid-wrap{overflow-x:auto;border-radius:var(--radius-md);box-shadow:inset 0 0 0 1px var(--chrome-border)}
.src-grid{width:100%;border-collapse:collapse;font-size:12px}
.src-grid th{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--text-muted);padding:8px 10px;text-align:left;background:var(--surface-2,color-mix(in srgb,var(--text-primary) 4%,transparent));border-bottom:0.5px solid var(--chrome-border);white-space:nowrap}
.src-grid th.num,.src-grid td.num{text-align:right;font-variant-numeric:tabular-nums}
.src-grid td{padding:7px 10px;border-bottom:0.5px solid color-mix(in srgb,var(--chrome-border) 55%,transparent)}
.src-item{font-weight:600;color:var(--text-primary)}
.src-cc{display:inline-block;font-size:10px;font-weight:600;color:var(--text-muted);background:color-mix(in srgb,var(--text-primary) 6%,transparent);padding:0 6px;border-radius:var(--radius-pill);margin-left:6px}
.src-proposed{color:var(--text-secondary)}
.src-approve-cell{width:130px}
.src-approve{height:28px;font-size:12px;text-align:right;width:110px}
.src-earned{font-weight:700;color:var(--text-primary)}
.src-row.src-over .src-approve{box-shadow:0 0 0 1.5px var(--color-warning)}
.src-row.src-over .src-remain{color:var(--color-warning);font-weight:700}
.src-foot td{border-top:1px solid var(--chrome-border);border-bottom:0;font-weight:800;font-size:12.5px;padding-top:9px}
.src-foot .src-t-net{color:var(--app-accent)}
.src-actions{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.src-net{font-size:13px;color:var(--text-secondary)}
.src-net strong{font-size:17px;color:var(--text-primary);font-variant-numeric:tabular-nums;margin-left:4px}
.src-empty-note{font-size:12.5px;color:var(--text-muted);background:var(--surface-2,color-mix(in srgb,var(--text-primary) 4%,transparent));padding:11px 13px;border-radius:var(--radius-md);line-height:1.5}
.src-coarse{margin:14px 0}
/* Award-type selectable cards (was two competing primary CTAs) */
.award-kind-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.award-kind-card{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;padding:14px 15px;border-radius:var(--radius-card,12px);border:0.5px solid color-mix(in srgb,var(--text-primary) 14%,transparent);background:var(--surface);cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring),border-color var(--motion-fast) var(--ease-out),background var(--motion-fast) var(--ease-out)}
.award-kind-card:hover{border-color:color-mix(in srgb,var(--app-accent) 50%,transparent);background:color-mix(in srgb,var(--app-accent) 6%,var(--surface))}
.award-kind-card:active{transform:scale(.97)}
.award-kind-title{font-size:14px;font-weight:700;color:var(--text-primary)}
.award-kind-sub{font-size:11px;font-weight:500;color:var(--text-muted)}
@media(max-width:480px){.award-kind-grid{grid-template-columns:1fr}}
/* Estimate quick-add line row — was 8 fixed-width controls, broke on phones */
@media(max-width:760px){
  .est-ws-add{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .est-ws-add .est-add-desc{grid-column:1/-1}
  .est-ws-add input,.est-ws-add select,.est-ws-add button{flex:1 1 auto!important;min-width:0!important;width:100%}
  .est-ws-add .btn{grid-column:1/-1}
}
@media(max-width:640px){.est-qp-grid{grid-template-columns:1fr}.est-quote-acts{flex-wrap:wrap}.est-est-head{flex-wrap:wrap}.pb-list{max-height:60vh}.po-sign-grid{grid-template-columns:1fr}}
.pfv-ws-stat-total{border-top:0.5px solid color-mix(in srgb,var(--text-primary) 14%,transparent);margin-top:2px;padding-top:7px}
.pfv-ws-stat-total .pfv-ws-stat-lbl{font-weight:700;color:var(--text-primary)}
.pfv-ws-stat-total .pfv-ws-stat-val{font-size:16px;font-weight:800}
/* CO builder line items (in the CO detail pane). */
.co-lines-block{margin-top:14px}
.co-lines-head{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-secondary);margin-bottom:8px;display:flex;align-items:baseline;gap:8px}
.co-lines-total{margin-left:auto;font-size:11px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--text-muted);font-variant-numeric:tabular-nums}
.co-line-row{position:relative}
.co-line-del{flex-shrink:0;width:22px;height:22px;border:none;background:transparent;color:var(--text-muted);border-radius:50%;cursor:pointer;opacity:0;display:grid;place-items:center;transition:opacity var(--motion-fast),background var(--motion-fast),color var(--motion-fast)}
.co-line-del svg{width:11px;height:11px}
.co-line-row:hover .co-line-del{opacity:1}
.co-line-del:hover{background:color-mix(in srgb,var(--color-error) 14%,transparent);color:var(--color-error)}
.co-line-add .co-add-desc{flex:1 1 140px;min-width:110px}
.co-line-add .co-add-n{flex:0 0 60px;min-width:50px}
.co-line-add .co-add-cost{flex:0 0 92px;min-width:80px}
.co-line-add .co-add-go{flex:0 0 auto}
/* ── CO detail redesign (2026-07-04) — Apple-caliber sectioned layout; shared by the inline tab AND
   the 420px side-pane, so it reflows narrow. Sections float with even rhythm; ONE primary action. ── */
.cod-card{display:flex;flex-direction:column}
.cod-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.cod-head-kicker{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
.cod-head-kicker svg{width:14px;height:14px}
.cod-hist{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:650;color:var(--text-secondary);background:var(--surface-2);border:none;border-radius:999px;padding:4px 11px;cursor:pointer;transition:background var(--motion-fast) var(--ease-out),color var(--motion-fast)}
.cod-hist svg{width:12px;height:12px}
.cod-hist:hover{background:color-mix(in srgb,var(--app-accent) 10%,var(--surface-2));color:var(--app-accent)}
.cod-hero{margin-bottom:14px}
.cod-title{font-size:15.5px;font-weight:800;letter-spacing:-.02em;color:var(--text-primary);line-height:1.25}
.cod-amt-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.cod-amt{font-size:27px;font-weight:850;font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1}
.cod-amt.pos{color:var(--text-primary)}.cod-amt.neg{color:var(--color-error)}
.cod-status{flex:0 0 auto}
.cod-sub{font-size:12px;color:var(--text-muted);margin-top:6px;font-variant-numeric:tabular-nums}
.cod-sec{margin-top:14px;padding-top:14px;border-top:.5px solid color-mix(in srgb,var(--chrome-border) 60%,transparent)}
.co-chain-host.cod-sec:empty{display:none}
.cod-field{display:flex;flex-direction:column;gap:5px}
.cod-field-lbl{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
.cod-desc{width:100%;resize:vertical;min-height:40px;line-height:1.4}
/* actions: quiet secondaries left, primary + destructive right; ONE primary weight */
.cod-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:.5px solid color-mix(in srgb,var(--chrome-border) 70%,transparent)}
.cod-actions-secondary{display:flex;gap:7px;flex-wrap:wrap}
.cod-actions-primary{display:flex;align-items:center;gap:8px;margin-left:auto}
.cod-sec-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;font-size:12px}
.cod-sec-btn svg{width:13px;height:13px}
.cod-primary,.cod-reverse{display:inline-flex;align-items:center;gap:6px;padding:7px 15px;font-size:13px;font-weight:700}
.cod-primary svg,.cod-reverse svg{width:14px;height:14px}
.cod-del{width:34px;height:34px;flex:0 0 auto;border:none;background:transparent;color:var(--text-muted);border-radius:10px;display:grid;place-items:center;cursor:pointer;transition:background var(--motion-fast) var(--ease-out),color var(--motion-fast),transform var(--motion-fast)}
.cod-del svg{width:15px;height:15px}
.cod-del:hover{background:color-mix(in srgb,var(--color-error) 12%,transparent);color:var(--color-error)}
.cod-del:active{transform:scale(.92)}
/* narrow side-pane (≤460px) — stack the add-line inputs + let actions wrap gracefully */
.pfv-pane-record .cod-actions,.pfv-pane .cod-actions{flex-direction:column;align-items:stretch}
.pfv-pane-record .cod-actions-primary,.pfv-pane .cod-actions-primary{margin-left:0;justify-content:space-between}
.pfv-pane-record .co-line-add,.pfv-pane .co-line-add{flex-wrap:wrap}
/* Procurement buyout bar (PO analytics rail). */
.buyout-bar{height:8px;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 9%,transparent);overflow:hidden;margin:2px 0 5px}
.buyout-bar-fill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--app-accent) 78%,var(--color-success)),var(--app-accent));transition:width var(--motion-base) var(--ease-spring)}
.buyout-bar-lbl{display:flex;justify-content:space-between;font-size:11px;font-weight:600;color:var(--text-muted);font-variant-numeric:tabular-nums;margin-bottom:8px}
.buyout-panel{margin-bottom:12px}
.buyout-panel-head{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:var(--text-primary);letter-spacing:-.2px;margin-bottom:10px}
.buyout-panel-pct{margin-left:auto;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;padding:2px 10px;border-radius:var(--radius-pill)}
.buyout-panel-pct.pos{background:color-mix(in srgb,var(--color-success) 15%,transparent);color:color-mix(in srgb,var(--color-success) 78%,var(--text-primary))}
.buyout-panel-pct.neg{background:color-mix(in srgb,var(--color-error) 16%,transparent);color:color-mix(in srgb,var(--color-error) 78%,var(--text-primary))}
.buyout-panel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:4px}
.buyout-stat{border:0.5px solid var(--chrome-border);background:var(--card-bg);border-radius:var(--radius-md);padding:9px 11px}
.buyout-stat-lbl{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.35px;color:var(--text-muted)}
.buyout-stat-val{font-size:18px;font-weight:800;color:var(--text-primary);font-variant-numeric:tabular-nums;letter-spacing:-.4px;margin-top:3px}
.buyout-trades{margin-top:12px}
.buyout-trades-lbl{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.35px;color:var(--text-secondary);margin-bottom:7px}
@media (max-width:640px){.buyout-panel-grid{grid-template-columns:1fr}}
.pay-app-hint{font-size:10.5px;color:var(--text-muted);line-height:1.4;margin-top:7px;text-align:center}
.sov-payapp-due{display:flex;flex-direction:column;gap:1px;margin-top:8px;padding-top:9px;border-top:.5px solid color-mix(in srgb,var(--text-primary) 14%,transparent)}
.sov-payapp-due-lbl{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
.sov-payapp-due-val{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.05;color:var(--color-success);font-variant-numeric:tabular-nums}
.sov-payapp-cta{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:11px;padding:11px 14px;border:none;border-radius:var(--radius-md);cursor:pointer;font-size:13.5px;font-weight:700;color:var(--on-accent);background:linear-gradient(160deg,color-mix(in srgb,var(--color-success) 86%,#fff) 0%,var(--color-success) 55%,color-mix(in srgb,var(--color-success) 80%,#000) 100%);box-shadow:var(--bevel-top),var(--shadow-e2),inset 0 -1px 0 color-mix(in srgb,#000 18%,transparent);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast),filter var(--motion-fast)}
.sov-payapp-cta svg{width:15px;height:15px}
.sov-payapp-cta:hover:not(:disabled){filter:brightness(1.04);box-shadow:var(--bevel-top),var(--shadow-e3),inset 0 -1px 0 color-mix(in srgb,#000 18%,transparent)}
.sov-payapp-cta:active:not(:disabled){transform:scale(.975);box-shadow:var(--bevel-top),var(--shadow-e1)}
.sov-payapp-cta:disabled{opacity:.5;cursor:not-allowed;filter:saturate(.6)}
@media (prefers-reduced-motion:reduce){.sov-payapp-cta{transition:none}.sov-payapp-cta:active:not(:disabled){transform:none}}
/* CPM-3 — SOV line earned-vs-billed drift readout */
.sov-drift{margin-top:12px;padding:11px 12px;border-radius:12px;background:color-mix(in srgb,var(--sov-drift-tone,var(--text-primary)) 8%,transparent);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--sov-drift-tone,var(--text-primary)) 22%,transparent)}
.sov-drift-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:9px}
.sov-drift-badge{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.3px}
.sov-drift-stage{font-size:11px;font-weight:600;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sov-drift-bars{display:flex;flex-direction:column;gap:6px}
.sov-drift-bar-row{display:flex;align-items:center;gap:8px}
.sov-drift-bar-lbl{flex:0 0 46px;font-size:10.5px;font-weight:700;color:var(--text-secondary)}
.sov-drift-track{flex:1;height:8px;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 10%,transparent);overflow:hidden;min-width:0}
.sov-drift-fill{display:block;height:100%;border-radius:999px;transition:width var(--motion-base) var(--ease-out)}
.sov-drift-pct{flex:0 0 auto;font-size:11px;font-weight:800;color:var(--text-primary);font-variant-numeric:tabular-nums;min-width:34px;text-align:right}
.sov-drift-note{margin-top:9px;font-size:11px;font-weight:600;line-height:1.4}
/* Compact list-row utility — used by allowances + warranties + similar registers. */
.rt-stack{display:flex;flex-direction:column;gap:6px}
/* Rule 6/14 — elevation from shadow + a hairline, not a box border acting as the spine. */
.rt-row{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--radius-md);background:var(--card-bg);border:0.5px solid color-mix(in srgb,var(--chrome-border) 60%,transparent);box-shadow:var(--shadow-e1);position:relative}
.rt-row-main{flex:1;min-width:0;font-size:13px}
.rt-row-sub{font-size:11.5px;color:var(--text-muted);margin-top:2px;line-height:1.35}
.rt-row-num{flex-shrink:0;font-size:12px;font-weight:600;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.rt-row-action{flex-shrink:0;padding:3px 9px;border:none;background:color-mix(in srgb,var(--app-accent) 11%,transparent);color:var(--app-accent);font-size:11px;font-weight:600;border-radius:var(--radius-pill);cursor:pointer;transition:background var(--motion-fast);font-family:inherit}
.rt-row-action:hover{background:color-mix(in srgb,var(--app-accent) 22%,transparent)}
.rt-row-action-pos{background:color-mix(in srgb,var(--color-success) 13%,transparent);color:color-mix(in srgb,var(--color-success) 78%,var(--text-primary))}
.rt-row-action-pos:hover{background:color-mix(in srgb,var(--color-success) 24%,transparent)}
.rt-row-action-warn{background:color-mix(in srgb,var(--color-warning) 16%,transparent);color:color-mix(in srgb,var(--color-warning) 80%,var(--text-primary))}
.rt-row-action-warn:hover{background:color-mix(in srgb,var(--color-warning) 28%,transparent)}
.rt-row-action-neg{background:color-mix(in srgb,var(--color-error) 13%,transparent);color:color-mix(in srgb,var(--color-error) 78%,var(--text-primary))}
.rt-row-action-neg:hover{background:color-mix(in srgb,var(--color-error) 24%,transparent)}
/* Submittal-scoped row-action press-deform + rounded hover bloom (scoped to the submittal
   register + its editor flow control so the app-wide .rt-row-action/.rt-row-del callsites are
   untouched — see review weak_spot #5). Reduced-motion safe. */
#submittalList .rt-row-action,.sub-flow .rt-row-action{transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast);display:inline-flex;align-items:center;gap:4px}
#submittalList .rt-row-action:hover,.sub-flow .rt-row-action:hover{box-shadow:var(--shadow-e1)}
#submittalList .rt-row-action:active,.sub-flow .rt-row-action:active{transform:scale(.94)}
#submittalList .rt-row-action-pos,.sub-flow .rt-row-action-pos{font-weight:700}
#submittalList .rt-row-action-pos:hover,.sub-flow .rt-row-action-pos:hover{box-shadow:0 1px 6px color-mix(in srgb,var(--color-success) 22%,transparent)}
#submittalList .rt-row-del{transition:opacity var(--motion-fast),background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
#submittalList .rt-row-del:active{transform:scale(.9)}
@media (prefers-reduced-motion:reduce){#submittalList .rt-row-action,.sub-flow .rt-row-action,#submittalList .rt-row-del{transition:background var(--motion-fast),opacity var(--motion-fast)}#submittalList .rt-row-action:active,.sub-flow .rt-row-action:active,#submittalList .rt-row-del:active{transform:none}}
/* E16 — register file attachment picker + chips */
.reg-attach-pop{position:fixed;z-index:var(--z-top,9000);min-width:260px;max-width:320px;background:var(--surface,var(--card-bg));border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);box-shadow:var(--shadow-e4,0 12px 32px rgba(0,0,0,.22));padding:10px}
.reg-attach-head{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);margin-bottom:8px}
.reg-attach-select{width:100%;font-size:12.5px;padding:4px;border:0.5px solid var(--chrome-border);border-radius:var(--radius-sm);background:var(--card-bg);color:var(--text-primary);font-family:inherit;margin-bottom:8px}
.reg-attach-actions{display:flex;justify-content:flex-end;gap:6px}
.reg-attach-actions .btn{padding:4px 10px;font-size:11.5px}
.reg-attach-or{text-align:center;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin:8px 0 6px;position:relative}
.reg-attach-empty{font-size:12px;color:var(--text-muted);margin-bottom:8px}
.reg-attach-upload{width:100%;justify-content:center;padding:5px 10px;font-size:11.5px}
.reg-attached{margin-top:6px;display:flex;flex-wrap:wrap;gap:5px}
.reg-attached-chip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:500;padding:2px 4px 2px 8px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--app-accent) 9%,transparent);color:color-mix(in srgb,var(--app-accent) 80%,var(--text-primary));max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reg-attached-chip .reg-chip-ic{width:12px;height:12px;flex:0 0 auto}
/* Button with a leading sprite icon (Rule 17 swaps) — align icon + label cleanly. */
.btn-ic-lead{display:inline-flex;align-items:center;gap:5px}
.btn-ic-lead .ic{width:13px;height:13px;flex:0 0 auto}
.est-meta-ic{display:inline-flex;align-items:center;gap:3px}
.est-meta-ic .estb-ic{width:12px;height:12px}
/* Rule 7 / Touch — the detach × gets a ~26px hit box (negative margin so the chip doesn't grow). */
.reg-attached-x{border:none;background:transparent;color:inherit;font-size:13px;line-height:1;cursor:pointer;opacity:.7;min-width:24px;min-height:24px;display:inline-flex;align-items:center;justify-content:center;margin:-6px -4px -6px 0}
.reg-attached-x:hover{opacity:1;color:var(--color-error)}
/* F1 — pricing workspace chips (estimate header + per-line quote source) */
.est-version-chip{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:1px 8px;border-radius:var(--radius-pill);background:color-mix(in srgb,#bf5af2 14%,transparent);color:color-mix(in srgb,#bf5af2 80%,var(--text-primary))}
.est-status-pill{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:1px 8px;border-radius:var(--radius-pill)}
.est-status-draft{background:color-mix(in srgb,var(--text-primary) 9%,transparent);color:var(--text-secondary)}
.est-status-submitted{background:color-mix(in srgb,var(--color-warning) 14%,transparent);color:color-mix(in srgb,var(--color-warning) 80%,var(--text-primary))}
.est-status-accepted{background:color-mix(in srgb,var(--color-success) 14%,transparent);color:color-mix(in srgb,var(--color-success) 78%,var(--text-primary))}
.est-status-declined,.est-status-superseded{background:color-mix(in srgb,var(--color-error) 12%,transparent);color:color-mix(in srgb,var(--color-error) 76%,var(--text-primary))}
.est-quote-chip{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;padding:1px 7px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--text-primary) 6%,transparent);color:var(--text-secondary);max-width:100%;border:none;cursor:default;font-family:inherit}
.est-quote-chip-btn{cursor:pointer;transition:background var(--motion-fast)}
.est-quote-chip-btn:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent)}
.est-quote-vendor{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:90px}
.est-quote-conf{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;border-radius:50%;font-size:9px;font-weight:700;line-height:1;margin-left:2px}
.est-quote-conf-firm{background:var(--color-success);color:#fff}
.est-quote-conf-estimate{background:var(--color-warning);color:#fff}
.est-quote-conf-placeholder{background:color-mix(in srgb,var(--text-primary) 30%,transparent);color:#fff}
.est-quote-empty{color:var(--text-muted);font-style:italic;font-size:10px}
/* F2 — Daily Field Report items panel inside the collapsible <details>. */
.dl-field-report-toggle{padding:6px 0;border-top:0.5px solid var(--chrome-border);margin-top:4px}
.dl-fr-panel{margin-top:10px;display:flex;flex-direction:column;gap:14px}
.dl-fr-section{}
.dl-fr-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.35px;color:var(--text-secondary);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.dl-fr-title .ic{width:13px;height:13px}
.dl-fr-count{font-size:10.5px;font-weight:600;color:var(--text-muted);background:color-mix(in srgb,var(--text-primary) 8%,transparent);padding:1px 6px;border-radius:999px}
.dl-fr-list{display:flex;flex-direction:column;gap:4px;margin-bottom:6px}
.dl-fr-row{display:flex;align-items:center;gap:8px;padding:5px 9px;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--text-primary) 4%,transparent);position:relative}
.dl-fr-row-label{flex:1;font-size:12px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-fr-row .rt-row-del{opacity:0}
.dl-fr-row:hover .rt-row-del{opacity:1}
.dl-fr-add{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dl-fr-add .dl-fr-input{height:30px;font-size:12px;padding:0 8px;min-width:0}
.dl-fr-add .btn{padding:4px 10px;font-size:11.5px;flex-shrink:0}
/* F3 — RFI deep workflow inset (inside Tracked detail when type=RFI) */
/* RFI deep-workflow — solid floating sub-panel (depth = elevation, never tint/border-spine; canon #14) */
.rfi-deep{margin-top:14px;padding:16px 16px 15px;border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-e2);border:.5px solid color-mix(in srgb,var(--text-primary) 8%,transparent)}
.rfi-deep-title{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--app-accent);margin-bottom:12px}
.rfi-deep-title .ic{width:14px;height:14px}
/* internal dividers (canon #4: one authored panel w/ sections, not box-soup) */
.rfi-deep-sec{margin-top:14px;padding-top:13px;border-top:.5px solid color-mix(in srgb,var(--text-primary) 7%,transparent)}
.rfi-deep-sec-lbl{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);margin-bottom:9px;display:flex;align-items:center;gap:6px}
.rfi-deep-sec-lbl .ic{width:12px;height:12px;color:var(--text-muted)}
/* status stepper (pending → answered → closed), derived honestly from existing fields */
.rfi-stepper{display:flex;align-items:flex-start;gap:0;margin-bottom:14px;flex-wrap:wrap}
.rfi-step{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 6px;border-radius:var(--radius-pill);background:var(--surface-2);border:0;cursor:default;font-family:inherit;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast),background var(--motion-fast)}
button.rfi-step{cursor:pointer}
button.rfi-step:hover{transform:translateY(-1px);box-shadow:var(--shadow-e2)}
button.rfi-step:active{transform:scale(.98)}
.rfi-step-dot{flex:0 0 auto;width:22px;height:22px;border-radius:var(--radius-pill);display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--text-muted) 22%,transparent)}
.rfi-step-dot .ic{width:12px;height:12px;color:var(--text-muted)}
.rfi-step-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.rfi-step-lbl{font-size:12px;font-weight:600;color:var(--text-muted)}
.rfi-step-date{font-size:9.5px;font-weight:600;color:var(--text-muted);font-variant-numeric:tabular-nums}
.rfi-step-line{flex:0 0 18px;height:2px;border-radius:2px;background:color-mix(in srgb,var(--text-muted) 24%,transparent);margin:14px 2px 0}
.rfi-step-line.is-done{background:color-mix(in srgb,var(--color-success) 70%,transparent)}
.rfi-step.is-done .rfi-step-dot{background:color-mix(in srgb,var(--color-success) 18%,transparent)}
.rfi-step.is-done .rfi-step-dot .ic{color:var(--color-success)}
.rfi-step.is-done .rfi-step-lbl{color:var(--text-secondary)}
.rfi-step.is-live{background:color-mix(in srgb,var(--app-accent) 14%,var(--surface));box-shadow:var(--shadow-e2)}
.rfi-step.is-live .rfi-step-dot{background:var(--app-accent)}
.rfi-step.is-live .rfi-step-dot .ic{color:var(--on-accent)}
.rfi-step.is-live .rfi-step-lbl{color:var(--app-accent);font-weight:700}
.rfi-step.is-live.rfi-step-rej{background:color-mix(in srgb,var(--color-error) 14%,var(--surface))}
.rfi-step.is-live.rfi-step-rej .rfi-step-dot{background:var(--color-error)}
.rfi-step.is-live.rfi-step-rej .rfi-step-lbl{color:var(--color-error)}
/* ball-in-court chip + situated due/age/turnaround clock */
.rfi-clockrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.rfi-bic-chip{display:inline-flex;align-items:center;gap:9px;padding:5px 13px 5px 5px;border-radius:var(--radius-pill);background:var(--surface-2);box-shadow:var(--shadow-e1)}
.rfi-bic-mono{flex:0 0 auto;width:26px;height:26px;border-radius:var(--radius-pill);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;letter-spacing:.3px;color:var(--on-accent);background:var(--app-accent)}
.rfi-bic-empty .rfi-bic-mono{background:color-mix(in srgb,var(--text-muted) 38%,transparent)}
.rfi-bic-txt{display:flex;flex-direction:column;line-height:1.15}
.rfi-bic-k{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted)}
.rfi-bic-v{font-size:12.5px;font-weight:600;color:var(--text-primary)}
.rfi-clock{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--radius-pill);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.rfi-clock .ic{width:13px;height:13px}
.rfi-clock-muted{background:var(--surface-2);color:var(--text-secondary)}
.rfi-clock-muted .ic{color:var(--text-muted)}
.rfi-clock-warn{background:color-mix(in srgb,var(--color-warning) 16%,transparent);color:color-mix(in srgb,var(--color-warning) 72%,var(--text-primary))}
.rfi-clock-warn .ic{color:var(--color-warning)}
.rfi-clock-over{background:color-mix(in srgb,var(--color-error) 15%,transparent);color:color-mix(in srgb,var(--color-error) 78%,var(--text-primary))}
.rfi-clock-over .ic{color:var(--color-error)}
.rfi-clock-ok{background:color-mix(in srgb,var(--color-success) 15%,transparent);color:color-mix(in srgb,var(--color-success) 70%,var(--text-primary))}
.rfi-clock-ok .ic{color:var(--color-success)}
/* correspondence reading panes — rounded focus ring (canon #7) */
.rfi-pane{position:relative;margin-top:10px;padding:9px 11px 11px;border-radius:var(--radius-md);background:var(--surface-2);transition:box-shadow var(--motion-fast)}
.rfi-pane:first-of-type{margin-top:2px}
.rfi-pane:focus-within{box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 55%,transparent)}
.rfi-pane.is-answered{background:color-mix(in srgb,var(--color-success) 8%,var(--surface-2))}
.rfi-pane-role{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);margin-bottom:6px}
.rfi-pane.is-answered .rfi-pane-role{color:color-mix(in srgb,var(--color-success) 70%,var(--text-primary))}
.rfi-pane-ta{background:var(--surface);border-radius:var(--radius-md)!important;width:100%;resize:vertical}
.rfi-pane-ta:focus{outline:none;box-shadow:none}
/* impact pill-tiles + live rollup (cost = neutral/info fact; schedule = warning when adverse) */
.rfi-impact{display:flex;gap:10px;margin-top:4px;flex-wrap:wrap}
.rfi-impact-row{display:flex;flex-direction:column;gap:7px;flex:1;min-width:200px;padding:11px 12px;border-radius:var(--radius-md);background:var(--surface-2);transition:box-shadow var(--motion-fast),background var(--motion-fast)}
.rfi-impact-row.is-cost{background:color-mix(in srgb,var(--color-info) 11%,var(--surface));box-shadow:var(--shadow-e1)}
.rfi-impact-row.is-sched{background:color-mix(in srgb,var(--color-warning) 12%,var(--surface));box-shadow:var(--shadow-e1)}
.rfi-impact-toggle{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;cursor:pointer;color:var(--text-primary);white-space:nowrap}
.rfi-impact-toggle input[type="checkbox"]{margin:0}
.rfi-impact-toggle .ic{width:13px;height:13px;color:var(--text-muted)}
.rfi-impact-row.is-cost .rfi-impact-toggle .ic{color:var(--color-info)}
.rfi-impact-row.is-sched .rfi-impact-toggle .ic{color:var(--color-warning)}
.rfi-impact-input{width:100%;min-width:0;border-radius:var(--radius-md)!important}
.rfi-impact-input:disabled{opacity:.5}
.rfi-impact-roll{margin-top:9px;font-size:11.5px;color:var(--text-secondary);display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.rfi-impact-roll .ic{width:13px;height:13px;color:var(--app-accent)}
.rfi-impact-roll.is-clear{color:var(--text-muted)}
.rfi-impact-roll.is-clear .ic{color:var(--text-muted)}
/* FEATURE 3 — RFI "Related specs" panel (suggestions list). Rounded-only hovers, no edge strips. */
.rfi-relspecs{margin-top:14px;padding-top:13px;border-top:.5px solid color-mix(in srgb,var(--text-primary) 7%,transparent)}
.rfi-relspecs-head{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);margin-bottom:9px}
.rfi-relspecs-head .ic{width:12px;height:12px;color:var(--text-muted)}
/* per-kind tint keyed off the JS-emitted .is-submittal class (not a fragile onclick/title match) */
.rfi-rel-row.is-submittal .rfi-rel-ico{background:color-mix(in srgb,var(--color-info) 14%,transparent)}
.rfi-rel-row.is-submittal .rfi-rel-ico svg{color:var(--color-info)}
.rfi-relspecs-load{margin-left:auto;border:0.5px solid color-mix(in srgb,var(--app-accent) 30%,transparent);background:color-mix(in srgb,var(--app-accent) 8%,transparent);color:var(--app-accent);font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;padding:3px 11px;border-radius:var(--radius-pill);cursor:pointer;transition:background var(--motion-fast),box-shadow var(--motion-fast)}
.rfi-relspecs-load:hover{background:color-mix(in srgb,var(--app-accent) 15%,transparent);box-shadow:var(--shadow-e2)}
.rfi-relspecs-hint,.rfi-relspecs-empty{font-size:12px;color:var(--text-muted);line-height:1.5;padding:4px 2px}
.rfi-rel-row{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;padding:8px 10px;margin-bottom:6px;border:0.5px solid transparent;border-radius:var(--radius-md);background:var(--surface);color:var(--text-primary);cursor:pointer;font-family:inherit;box-shadow:var(--shadow-e1);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast),background var(--motion-fast)}
.rfi-rel-row:hover{background:var(--surface-2);box-shadow:var(--shadow-e3);transform:translateY(-1px)}
.rfi-rel-row:active{transform:scale(.99)}
.rfi-rel-ico{flex:0 0 auto;width:28px;height:28px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--app-accent) 12%,transparent);margin-top:1px}
.rfi-rel-ico svg{width:14px;height:14px;color:var(--app-accent)}
.rfi-rel-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.rfi-rel-title{font-size:12.5px;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rfi-rel-sub{font-size:11px;color:var(--text-muted)}
.rfi-rel-snip{font-size:11.5px;line-height:1.4;color:var(--text-muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rfi-rel-terms{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.rfi-rel-term{font-size:9.5px;font-weight:600;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 12%,transparent);padding:1px 6px;border-radius:999px}
@media (max-width:640px){.rfi-stepper{flex-direction:column;align-items:flex-start;gap:4px}.rfi-step-line{width:2px;height:14px;margin:0 0 0 16px}}
/* ONE consolidated reduced-motion guard for ALL new RFI-workflow transitions (incl .rfi-pane) */
@media (prefers-reduced-motion:reduce){.rfi-step,.rfi-pane,.rfi-impact-row,.rfi-bic-chip,.rfi-clock,.rfi-rel-row,.rfi-relspecs-load{transition:none}button.rfi-step:hover,.rfi-rel-row:hover{transform:none}}
/* F5 — Sub-payment tracker on the PO tab */
.sp-card{}
.sp-bar{height:6px;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 8%,transparent);overflow:hidden}
.sp-bar-fill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--app-accent) 78%,var(--color-success)),var(--app-accent));transition:width var(--motion-base) var(--ease-spring)}
.sp-pay-block{margin-top:10px;overflow-x:auto}
.sp-tbl{width:100%;border-collapse:collapse;font-size:12px}
.sp-tbl th{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--text-muted);padding:6px 8px;text-align:left;border-bottom:0.5px solid var(--chrome-border)}
.sp-tbl th.num,.sp-tbl td.num{text-align:right;font-variant-numeric:tabular-nums}
.sp-tbl td{padding:7px 8px;border-bottom:0.5px solid color-mix(in srgb,var(--chrome-border) 60%,transparent)}
.sp-tbl tr:last-child td{border-bottom:0}
.sp-add-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;padding-top:8px;border-top:0.5px dashed var(--chrome-border)}
.sp-add-row .field-input{height:30px;font-size:12px;min-width:60px}
.sp-add-row .btn{padding:4px 12px;font-size:11.5px;flex-shrink:0}
.sp-waiver-chip{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:var(--radius-pill)}
.sp-waiver-chip.ok{background:color-mix(in srgb,var(--color-success) 13%,transparent);color:color-mix(in srgb,var(--color-success) 78%,var(--text-primary))}
.sp-ready-pill{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.35px;padding:2px 9px;border-radius:var(--radius-pill)}
.sp-ready-pill.ok{background:color-mix(in srgb,var(--color-success) 16%,transparent);color:color-mix(in srgb,var(--color-success) 78%,var(--text-primary))}
.sp-ready-pill.warn{background:color-mix(in srgb,var(--color-warning) 16%,transparent);color:color-mix(in srgb,var(--color-warning) 80%,var(--text-primary))}
/* 🐡 §7-C P3.3 (F/H) — back-charge ledger on the sub card. Costs recovered FROM the sub render as
   negative (red) rows; the type color signals deduct vs bill-back via a quiet pill, NOT an edge strip. */
.sp-bc-block{margin-top:10px;padding-top:8px;border-top:0.5px dashed color-mix(in srgb,var(--color-error) 40%,var(--chrome-border))}
.sp-bc-head{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.35px;color:color-mix(in srgb,var(--color-error) 62%,var(--text-muted));margin-bottom:4px}
.sp-bc-expo{font-size:11px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--color-error);background:var(--color-error-bg);padding:1px 8px;border-radius:var(--radius-pill)}
.sp-bc-amt{color:var(--color-error);font-weight:700}
.sp-bc-void td{opacity:.55}
.sp-bc-void .sp-bc-amt{text-decoration:line-through}
.sp-bc-voidtag{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--text-muted);background:color-mix(in srgb,var(--text-primary) 8%,transparent);padding:0 6px;border-radius:var(--radius-pill);margin-left:5px;vertical-align:1px}
.sp-card-foot{margin-top:8px;display:flex;justify-content:flex-end}
.sp-bc-btn{color:color-mix(in srgb,var(--color-error) 70%,var(--text-secondary))}
.sp-bc-btn:hover{background:var(--color-error-bg);color:var(--color-error);border-radius:var(--radius-md)}
/* Back-charge modal — deduct vs bill-back choice, guided by live remaining balance. */
.sbc-body{display:flex;flex-direction:column;gap:14px}
.sbc-ctx{font-size:12.5px;color:var(--text-secondary);background:var(--surface-2,color-mix(in srgb,var(--text-primary) 4%,transparent));padding:10px 12px;border-radius:var(--radius-md)}
.sbc-ctx strong{color:var(--text-primary);font-variant-numeric:tabular-nums}
.sbc-modes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sbc-mode{text-align:left;padding:11px 13px;border-radius:var(--radius-md);background:var(--card-bg);box-shadow:inset 0 0 0 1px var(--chrome-border);cursor:pointer;transition:box-shadow var(--motion-fast) var(--ease-out),background var(--motion-fast) var(--ease-out)}
.sbc-mode:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--app-accent) 40%,var(--chrome-border))}
.sbc-mode.is-on{box-shadow:inset 0 0 0 1.5px var(--app-accent),var(--shadow-e1);background:color-mix(in srgb,var(--app-accent) 6%,var(--card-bg))}
.sbc-mode-t{font-size:13px;font-weight:700;color:var(--text-primary);margin-bottom:2px}
.sbc-mode-d{font-size:11px;color:var(--text-muted);line-height:1.4}
.sbc-warn{font-size:11.5px;color:var(--color-warning);display:none}
.sbc-warn.show{display:block}
/* 🐡 §7-C P3.3 (H) — SUB-MONEY COCKPIT. The vendor-name link on the sub card + the 3-pane cockpit modal. */
.sp-cockpit-link{background:none;border:0;padding:0;margin:0;font:inherit;font-weight:700;font-size:14px;color:var(--text-primary);cursor:pointer;display:inline-flex;align-items:center;border-radius:6px}
.sp-cockpit-link:hover{color:var(--app-accent)}
.sck-body{display:flex;flex-direction:column;gap:14px;min-width:min(860px,88vw)}
.sck-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap}
.sck-hero-name{font-size:19px;font-weight:800}
.sck-hero-sub{font-size:12.5px;color:var(--text-muted);margin-top:3px}
.sck-ready{color:color-mix(in srgb,var(--color-success) 78%,var(--text-primary));font-weight:700}
.sck-hero-figs{display:flex;gap:10px}
.sck-fig{text-align:right;padding:8px 14px;border-radius:var(--radius-md);background:var(--surface-2,color-mix(in srgb,var(--text-primary) 4%,transparent));min-width:120px}
.sck-fig-l{font-size:10px;text-transform:uppercase;letter-spacing:.35px;color:var(--text-muted)}
.sck-fig-v{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:2px}
.sck-fig-warn .sck-fig-v{color:var(--color-warning)}
.sck-fig-ok .sck-fig-v{color:color-mix(in srgb,var(--color-success) 80%,var(--text-primary))}
/* master ledger */
.sck-master-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.35px;color:var(--text-muted);margin-bottom:8px}
.sck-led{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;text-align:left;background:var(--card-bg);border:0;box-shadow:inset 0 0 0 1px var(--chrome-border);border-radius:var(--radius-md);padding:9px 12px;margin-bottom:6px;cursor:pointer;transition:box-shadow var(--motion-fast) var(--ease-out),background var(--motion-fast) var(--ease-out)}
.sck-led:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--app-accent) 35%,var(--chrome-border))}
.sck-led-sel{box-shadow:inset 0 0 0 1.5px var(--app-accent),var(--shadow-e1);background:color-mix(in srgb,var(--app-accent) 5%,var(--card-bg))}
.sck-led-l{display:flex;flex-direction:column;gap:2px;min-width:0}
.sck-led-lbl{font-size:13px;font-weight:600;color:var(--text-primary)}
.sck-led-date{font-size:11px;color:var(--text-muted)}
.sck-led-amt{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.sck-led-amt.neg{color:var(--color-error)}
.sck-led-void{opacity:.55}
.sck-led-void .sck-led-amt{text-decoration:line-through}
.sck-led-voidtag{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--text-muted);background:color-mix(in srgb,var(--text-primary) 8%,transparent);padding:0 5px;border-radius:var(--radius-pill)}
.sck-empty-in,.sck-detail-empty{font-size:12.5px;color:var(--text-muted);padding:14px;line-height:1.5}
/* detail pane */
.sck-detail-h{font-size:14px;font-weight:700;margin-bottom:10px}
.sck-kv{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:12.5px;color:var(--text-secondary);border-bottom:0.5px solid color-mix(in srgb,var(--chrome-border) 55%,transparent)}
.sck-kv strong{color:var(--text-primary);font-variant-numeric:tabular-nums}
.sck-kv strong.neg,.sck-detail .neg{color:var(--color-error)}
.sck-detail-sub{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--text-muted);margin:12px 0 6px}
.sck-tbl{width:100%;border-collapse:collapse;font-size:12px}
.sck-tbl td{padding:5px 0;border-bottom:0.5px solid color-mix(in srgb,var(--chrome-border) 45%,transparent)}
.sck-tbl td.num{text-align:right;font-variant-numeric:tabular-nums}
.sck-note{font-size:12px;color:var(--text-muted);padding:2px 0}
.sck-note-warn{color:var(--color-warning)}
/* rail door cards */
.sck-rail-card{display:block;width:100%;text-align:left;background:var(--card-bg);border:0;box-shadow:inset 0 0 0 1px var(--chrome-border);border-radius:var(--radius-md);padding:11px 13px;margin-bottom:8px;cursor:pointer;transition:box-shadow var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-out)}
.sck-rail-card:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--app-accent) 35%,var(--chrome-border)),var(--shadow-e1);transform:translateY(-1px)}
.sck-rail-t{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--text-muted)}
.sck-rail-chev{opacity:.4}
.sck-rail-b{font-size:12.5px;color:var(--text-secondary);margin-top:5px}
.sck-rail-b strong{color:var(--text-primary);font-variant-numeric:tabular-nums}
.sck-rail-b strong.neg{color:var(--color-error)}
.sck-rail-warn{color:var(--color-warning);font-weight:600}
.sck-rail-ok{color:color-mix(in srgb,var(--color-success) 80%,var(--text-primary));font-weight:700}
/* A/R Piece 1 — invoice payments ledger panel (the AR twin of .sp-*; mounted on the invoice detail). */
.ip-ledger{margin-top:14px;padding-top:12px;border-top:0.5px solid var(--chrome-border)}
.ip-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.ip-head-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.35px;color:var(--text-muted)}
.ip-head-figs{font-size:12px;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.ip-head-figs strong{color:var(--text-primary)}
.ip-bar{height:6px;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 8%,transparent);overflow:hidden;margin:2px 0 10px}
.ip-bar-fill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--app-accent) 78%,var(--color-success)),var(--app-accent));transition:width var(--motion-base) var(--ease-spring)}
.ip-add-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;padding-top:8px;border-top:0.5px dashed var(--chrome-border)}
.ip-add-row .field-input{height:30px;font-size:12px;min-width:60px}
.ip-add-row .btn{padding:4px 12px;font-size:11.5px;flex-shrink:0}
.ip-force{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;color:var(--text-secondary);flex-wrap:wrap}
.ip-force-note{font-size:11.5px;color:var(--color-warning);background:color-mix(in srgb,var(--color-warning) 12%,transparent);padding:3px 9px;border-radius:var(--radius-pill);font-weight:600}
.ip-empty{display:flex;align-items:center;gap:8px;padding:8px 2px;font-size:12px;color:var(--text-muted)}
.ip-empty-ico{width:15px;height:15px;color:var(--text-muted);opacity:.7;flex:0 0 auto}
/* Ledger summary — plain elevated metric tiles (NOT .metric-door: they wire no drill,
   so they must not lift/pointer like a door — false-affordance). Command figures, tabular-nums. */
.ip-sum{display:flex;gap:8px;margin:2px 0 9px;flex-wrap:wrap}
.ip-sum-t{flex:1 1 0;min-width:96px;display:flex;flex-direction:column;gap:1px;padding:9px 12px;border-radius:var(--radius-md);background:var(--surface-grad);border:.5px solid color-mix(in srgb,var(--chrome-border) 65%,transparent);box-shadow:var(--bevel-top),var(--shadow-e1)}
.ip-sum-l{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
.ip-sum-v{font-size:18px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.08;color:var(--text-primary)}
.ip-sum-s{font-size:10px;font-weight:600;color:var(--text-secondary)}
@media (max-width:520px){.ip-sum-t{flex:1 1 100%}}
/* Payment timeline — each payment a floating rounded row anchored by a method node;
   spine is a centered neutral pseudo-element behind the nodes (NOT a card-edge strip). */
.ip-tl{position:relative;display:flex;flex-direction:column;gap:7px;margin:4px 0 2px;padding-left:2px}
.ip-tl::before{content:'';position:absolute;left:16px;top:14px;bottom:14px;width:1.5px;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--text-primary) 12%,transparent) 12%,color-mix(in srgb,var(--text-primary) 12%,transparent) 88%,transparent);pointer-events:none}
.ip-tl-mo{position:relative;z-index:1;display:flex;align-items:center;margin:5px 0 1px;padding-left:2px}
.ip-tl-mo span{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);background:var(--card-bg);padding:2px 8px;border-radius:var(--radius-pill);box-shadow:0 0 0 .5px color-mix(in srgb,var(--chrome-border) 70%,transparent)}
.ip-tl-mo:first-child{margin-top:0}
.ip-tl-row{position:relative;display:flex;align-items:center;gap:11px;padding:9px 11px 9px 9px;border-radius:var(--radius-md);background:var(--surface-grad);border:.5px solid color-mix(in srgb,var(--chrome-border) 70%,transparent);box-shadow:var(--bevel-top),var(--shadow-e1);transition:box-shadow var(--motion-base) var(--ease-out),transform var(--motion-fast) var(--ease-spring),border-color var(--motion-fast) var(--ease-out)}
.ip-tl-row:hover{box-shadow:var(--bevel-top),var(--shadow-e3);transform:translateY(-2px);border-color:color-mix(in srgb,var(--app-accent) 28%,var(--chrome-border))}
.ip-tl-row:active{transform:translateY(0) scale(.99)}
.ip-tl-row-recent{border-color:color-mix(in srgb,var(--color-success) 40%,var(--chrome-border));box-shadow:var(--bevel-top),var(--shadow-e2),0 0 0 1px color-mix(in srgb,var(--color-success) 22%,transparent)}
.ip-tl-row-recent .ip-tl-node{animation:ipNodePulse 1.6s var(--ease-out) 1}
@keyframes ipNodePulse{0%{box-shadow:var(--bevel-top),0 0 0 0 color-mix(in srgb,var(--color-success) 45%,transparent),0 1px 3px rgba(0,0,0,.08)}70%{box-shadow:var(--bevel-top),0 0 0 7px color-mix(in srgb,var(--color-success) 0%,transparent),0 1px 3px rgba(0,0,0,.08)}100%{box-shadow:var(--bevel-top),0 0 0 0 color-mix(in srgb,var(--color-success) 0%,transparent),0 1px 3px rgba(0,0,0,.08)}}
@media (prefers-reduced-motion:reduce){.ip-tl-row-recent .ip-tl-node{animation:none}}
.ip-tl-node{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--text-secondary);background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--text-primary) 9%,var(--card-bg)),color-mix(in srgb,var(--text-primary) 4%,var(--card-bg)));box-shadow:var(--bevel-top),0 0 0 1px color-mix(in srgb,var(--chrome-border) 80%,transparent),0 1px 3px rgba(0,0,0,.08);position:relative;z-index:1}
.ip-tl-node svg{width:15px;height:15px}
.ip-tl-node.m-check{color:var(--color-success);background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--color-success) 22%,var(--card-bg)),color-mix(in srgb,var(--color-success) 10%,var(--card-bg)));box-shadow:var(--bevel-top),0 0 0 1px color-mix(in srgb,var(--color-success) 18%,transparent),0 1px 3px rgba(0,0,0,.08)}
.ip-tl-node.m-bank{color:var(--app-accent);background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--app-accent) 20%,var(--card-bg)),color-mix(in srgb,var(--app-accent) 9%,var(--card-bg)));box-shadow:var(--bevel-top),0 0 0 1px color-mix(in srgb,var(--app-accent) 18%,transparent),0 1px 3px rgba(0,0,0,.08)}
.ip-tl-node.m-card{color:var(--color-warning);background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--color-warning) 20%,var(--card-bg)),color-mix(in srgb,var(--color-warning) 9%,var(--card-bg)));box-shadow:var(--bevel-top),0 0 0 1px color-mix(in srgb,var(--color-warning) 18%,transparent),0 1px 3px rgba(0,0,0,.08)}
.ip-tl-node.m-cash{color:var(--color-success);background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--color-success) 16%,var(--card-bg)),color-mix(in srgb,var(--color-success) 7%,var(--card-bg)));box-shadow:var(--bevel-top),0 0 0 1px color-mix(in srgb,var(--color-success) 14%,transparent),0 1px 3px rgba(0,0,0,.08)}
.ip-tl-body{flex:1;min-width:0}
.ip-tl-l1{display:flex;align-items:baseline;gap:9px}
.ip-tl-method{font-size:12.5px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ip-tl-ref{font-size:11px;color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
.ip-tl-tag{font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--color-success);background:color-mix(in srgb,var(--color-success) 14%,transparent);padding:1px 6px;border-radius:var(--radius-pill);flex:0 0 auto}
.ip-tl-amt{margin-left:auto;flex:0 0 auto;font-size:14.5px;font-weight:800;color:var(--text-primary);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.ip-tl-l2{display:flex;align-items:center;gap:8px;margin-top:2px;font-size:11px;color:var(--text-muted)}
.ip-tl-date{font-variant-numeric:tabular-nums;flex:0 0 auto}
.ip-tl-note{color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
.ip-tl-bal{margin-left:auto;flex:0 0 auto;font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-secondary);background:color-mix(in srgb,var(--text-primary) 6%,transparent);padding:1px 7px;border-radius:var(--radius-pill)}
.ip-tl-del{flex:0 0 auto;width:28px;height:28px;border:none;background:transparent;color:var(--text-muted);border-radius:50%;cursor:pointer;opacity:0;display:inline-flex;align-items:center;justify-content:center;transition:opacity var(--motion-fast),background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.ip-tl-del svg{width:14px;height:14px}
.ip-tl-row:hover .ip-tl-del,.ip-tl-del:focus-visible{opacity:1}
.ip-tl-del:hover{background:color-mix(in srgb,var(--color-error) 13%,transparent);color:var(--color-error)}
.ip-tl-del:active{transform:scale(.9)}
@media (prefers-reduced-motion:reduce){.ip-tl-row,.ip-tl-del{transition:none}.ip-tl-row:hover{transform:none}}
@media (hover:none){.ip-tl-del{opacity:1}}
/* 🪼 §7-C P3.1 Commit D — per-draw action cluster (edit + delete). Reveal on hover, rounded, no edge-strip. */
.ip-tl-acts{flex:0 0 auto;display:inline-flex;align-items:center;gap:2px}
.ip-tl-edit{flex:0 0 auto;width:28px;height:28px;border:none;background:transparent;color:var(--text-muted);border-radius:50%;cursor:pointer;opacity:0;display:inline-flex;align-items:center;justify-content:center;transition:opacity var(--motion-fast),background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.ip-tl-edit svg{width:13px;height:13px}
.ip-tl-row:hover .ip-tl-edit,.ip-tl-edit:focus-visible{opacity:1}
.ip-tl-edit:hover{background:color-mix(in srgb,var(--app-accent) 13%,transparent);color:var(--app-accent)}
.ip-tl-edit:active{transform:scale(.9)}
@media (hover:none){.ip-tl-edit{opacity:1}}
.ip-tl-row.ip-tl-editing{transform:none;box-shadow:var(--bevel-top),var(--shadow-e2),0 0 0 1px color-mix(in srgb,var(--app-accent) 30%,transparent)}
.ip-tl-edit-form{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.ip-tl-edit-form .ip-e-amt{flex:0 0 110px}.ip-tl-edit-form .ip-e-date{flex:0 0 150px}
.ip-tl-edit-form .ip-e-method,.ip-tl-edit-form .ip-e-ref{flex:1 1 120px;min-width:100px}
.ip-tl-edit-form .btn{flex:0 0 auto;padding:5px 12px;font-size:12px}
/* 🪼 Commit D — invoice header band: counterparty + direction + total/paid/due. Floating figures, rounded chips. */
.inv-hb{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:11px 13px;border-radius:var(--radius-md);background:var(--surface-grad);border:.5px solid color-mix(in srgb,var(--chrome-border) 70%,transparent);box-shadow:var(--bevel-top),var(--shadow-e1)}
.inv-hb-parties{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.inv-hb-cp{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:var(--radius-pill);border:.5px solid color-mix(in srgb,var(--chrome-border) 75%,transparent);background:color-mix(in srgb,var(--text-primary) 4%,transparent);color:var(--text-primary);font-size:12.5px;font-weight:600;cursor:pointer;max-width:100%;transition:background var(--motion-fast),border-color var(--motion-fast),transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
.inv-hb-cp svg{width:13px;height:13px;flex:0 0 auto;color:var(--text-muted)}
.inv-hb-cp>span:not(.inv-hb-role){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.inv-hb-cp:hover{background:color-mix(in srgb,var(--app-accent) 10%,transparent);border-color:color-mix(in srgb,var(--app-accent) 35%,var(--chrome-border));transform:translateY(-1px);box-shadow:var(--shadow-e2)}
.inv-hb-cp:active{transform:translateY(0) scale(.98)}
.inv-hb-cp.unset{color:var(--text-secondary);font-weight:500;border-style:dashed}
.inv-hb-cp .inv-hb-role{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);background:color-mix(in srgb,var(--text-primary) 7%,transparent);padding:1px 6px;border-radius:var(--radius-pill);flex:0 0 auto}
.inv-hb-dir{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:3px 9px;border-radius:var(--radius-pill)}
.inv-hb-dir.up{color:var(--color-success);background:color-mix(in srgb,var(--color-success) 13%,transparent)}
.inv-hb-dir.down{color:var(--color-warning);background:color-mix(in srgb,var(--color-warning) 13%,transparent)}
.inv-hb-dir-ico{width:11px;height:11px}
.inv-hb-dir.down .inv-hb-dir-ico{transform:rotate(180deg)}
.inv-hb-figs{display:inline-flex;align-items:center;gap:16px;flex-wrap:wrap}
.inv-hb-fig{display:flex;flex-direction:column;gap:1px;text-align:right}
.inv-hb-fig .inv-hb-l{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
.inv-hb-fig .inv-hb-v{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--text-primary)}
@media (prefers-reduced-motion:reduce){.inv-hb-cp{transition:none}.inv-hb-cp:hover{transform:none}}
/* z-index sits JUST BELOW the rrtContactPicker dropdown (--z-popover-modal:1150) so its typeahead menu
   renders ABOVE this popover, not behind it (Gavin). Still well above the workspace surface. */
.inv-cp-pop{position:absolute;z-index:1140;min-width:260px;max-width:340px;padding:11px;border-radius:var(--radius-md);background:var(--card-bg);border:.5px solid var(--chrome-border);box-shadow:var(--shadow-e4),var(--bevel-top)}
.inv-cp-pop-head{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:7px}
.inv-cp-clear{margin-top:8px;width:100%;padding:6px 10px;border:.5px dashed color-mix(in srgb,var(--color-error) 45%,var(--chrome-border));background:transparent;color:var(--color-error);border-radius:var(--radius-md);font-size:12px;font-weight:600;cursor:pointer;transition:background var(--motion-fast)}
.inv-cp-clear:hover{background:color-mix(in srgb,var(--color-error) 10%,transparent)}
/* 🪼 Commit D — "Pull from…" smart-fill popover (PO/subcontract/SOV → invoice lines). */
.inv-li-pull-pop{position:absolute;z-index:9600;width:340px;max-height:60vh;overflow-y:auto;padding:11px;border-radius:var(--radius-md);background:var(--card-bg);border:.5px solid var(--chrome-border);box-shadow:var(--shadow-e4),var(--bevel-top)}
.inv-li-pull-head{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:8px}
.inv-li-pull-loading,.inv-li-pull-empty{font-size:12px;color:var(--text-muted);padding:6px 2px}
.inv-li-pull-sect{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin:9px 0 5px}
.inv-li-pull-sec:first-child .inv-li-pull-sect{margin-top:0}
.inv-li-pull-row{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:1px 10px;width:100%;text-align:left;padding:7px 9px;border:none;background:transparent;border-radius:var(--radius-md);cursor:pointer;transition:background var(--motion-fast)}
.inv-li-pull-row:hover{background:color-mix(in srgb,var(--app-accent) 9%,transparent)}
.inv-li-pull-l{grid-column:1;grid-row:1;font-size:12.5px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inv-li-pull-s{grid-column:1;grid-row:2;font-size:10.5px;color:var(--text-muted)}
.inv-li-pull-v{grid-column:2;grid-row:1/span 2;align-self:center;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-secondary);white-space:nowrap}
.inv-li-pull-draft{font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);background:color-mix(in srgb,var(--text-primary) 8%,transparent);padding:0 5px;border-radius:var(--radius-pill)}
.inv-li-pull-row.inv-li-pull-added{opacity:.6}
.inv-li-pull-row.inv-li-pull-added .inv-li-pull-v{color:var(--color-success)}
/* 🪼 Commit D — editable line-items table. Rows of {desc,qty,unit} with derived amount; add/edit/delete. */
.inv-li{margin-top:14px;padding:12px 13px;border-radius:var(--radius-md);background:var(--surface-grad);border:.5px solid color-mix(in srgb,var(--chrome-border) 70%,transparent);box-shadow:var(--bevel-top),var(--shadow-e1)}
.inv-li-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px}
.inv-li-title{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary)}
.inv-li-drift{font-size:10.5px;font-weight:700;color:var(--color-warning);background:color-mix(in srgb,var(--color-warning) 12%,transparent);padding:2px 8px;border-radius:var(--radius-pill);font-variant-numeric:tabular-nums}
.inv-li-match{font-size:10.5px;font-weight:700;color:var(--color-success);font-variant-numeric:tabular-nums}
.inv-li-body{display:flex;flex-direction:column;gap:6px}
.inv-li-row{display:flex;align-items:center;gap:7px}
.inv-li-row .inv-li-desc{flex:1 1 auto;min-width:80px}
.inv-li-row .inv-li-qty{flex:0 0 74px}
.inv-li-pricewrap{flex:0 0 96px;position:relative;display:inline-flex;align-items:center}
.inv-li-pricecur{position:absolute;left:9px;font-size:12.5px;font-weight:600;color:var(--text-muted);pointer-events:none}
.inv-li-pricewrap .inv-li-price{width:100%;padding-left:19px}
/* 🪼 Commit D — currency-formatted Amount field ($ prefix + grouped value). */
/* 🪼 D2 — stable invoice-detail height so switching between a tall invoice (line items + draws) and a short
   one doesn't shrink the scrollable content and clamp/bounce the page scroll (Gavin). Matches the rail's
   typical height; short invoices just show whitespace at the bottom rather than collapsing the pane. */
#invWsDetail{min-height:720px}
.inv-amt-wrap{position:relative;display:block}
.inv-amt-cur{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:13px;font-weight:600;color:var(--text-muted);pointer-events:none}
.inv-amt-wrap .inv-amt-input{width:100%;padding-left:23px;font-variant-numeric:tabular-nums}
/* 🪼 Commit D — Amount/Status/Due date in a clean 3-across grid (no orphan cell / dead space under Status). */
.inv-field-grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:720px){.inv-field-grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.inv-field-grid-3{grid-template-columns:1fr}}
/* 🪼 Commit D — rich-text Notes editor: larger by default, auto-grows to content, format toolbar, collapse. */
.inv-notes{margin-top:14px;border-radius:var(--radius-md);background:var(--surface-grad);border:.5px solid color-mix(in srgb,var(--chrome-border) 70%,transparent);box-shadow:var(--bevel-top),var(--shadow-e1);overflow:hidden}
.inv-notes-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px 7px}
.inv-notes-title{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary)}
.inv-notes-tools{display:inline-flex;align-items:center;gap:3px}
.inv-notes-btn{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--text-secondary);border-radius:7px;cursor:pointer;font-size:12.5px;transition:background var(--motion-fast),color var(--motion-fast)}
.inv-notes-btn svg{width:13px;height:13px}
.inv-notes-btn:hover{background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-primary)}
.inv-notes-btn.on{background:color-mix(in srgb,var(--app-accent) 16%,transparent);color:var(--app-accent)}
.inv-notes-sep{width:1px;height:16px;background:color-mix(in srgb,var(--chrome-border) 80%,transparent);margin:0 3px}
.inv-notes-collapse{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--text-muted);border-radius:7px;cursor:pointer;margin-left:4px;transition:background var(--motion-fast),transform var(--motion-base)}
.inv-notes-collapse svg{width:14px;height:14px}
.inv-notes-collapse:hover{background:color-mix(in srgb,var(--text-primary) 8%,transparent)}
.inv-notes-body{min-height:96px;max-height:520px;overflow-y:auto;padding:10px 13px 13px;font-size:13.5px;line-height:1.5;color:var(--text-primary);outline:none;transition:max-height var(--motion-base) var(--ease-out)}
.inv-notes-body:focus{background:color-mix(in srgb,var(--app-accent) 3%,transparent)}
.inv-notes-body[data-empty="1"]:not([data-editing="1"])::before{content:attr(data-placeholder);color:var(--text-muted);pointer-events:none}
.inv-notes-body ul,.inv-notes-body ol{margin:4px 0 4px 20px}
.inv-notes-body p{margin:0 0 6px}
.inv-notes-collapsed .inv-notes-body{max-height:0;min-height:0;padding-top:0;padding-bottom:0}
.inv-notes-collapsed .inv-notes-collapse svg{transform:rotate(-90deg)}
.inv-li-row .inv-li-amt{flex:0 0 92px;text-align:right;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.inv-li-colhead{display:flex;align-items:center;gap:7px;margin-bottom:5px;padding:0 2px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
.inv-li-colhead .inv-li-ch-desc{flex:1 1 auto;min-width:80px}
.inv-li-colhead .inv-li-ch-qty{flex:0 0 74px}
.inv-li-colhead .inv-li-ch-price{flex:0 0 96px}
.inv-li-colhead .inv-li-ch-amt{flex:0 0 92px;text-align:right}
.inv-li-colhead .inv-li-ch-sp{flex:0 0 26px}
.inv-li-del{flex:0 0 auto;width:26px;height:26px;border:none;background:transparent;color:var(--text-muted);border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.inv-li-del svg{width:13px;height:13px}
.inv-li-del:hover{background:color-mix(in srgb,var(--color-error) 13%,transparent);color:var(--color-error)}
.inv-li-del:active{transform:scale(.9)}
.inv-li-empty{display:flex;align-items:center;gap:9px;padding:12px 4px;color:var(--text-muted);font-size:12px}
.inv-li-empty-ico{width:17px;height:17px;flex:0 0 auto;opacity:.6}
.inv-li-actions{display:flex;align-items:center;gap:8px;margin-top:10px}
.inv-li-actions .btn{padding:5px 11px;font-size:12px}
@media (max-width:600px){.inv-li-row{flex-wrap:wrap}.inv-li-row .inv-li-desc{flex:1 1 100%}.inv-hb-fig{text-align:left}}
/* A/R Piece 2 — reimbursable section (toggle + release-PO checklist). Rounded, semantic fill, no edge-strip. */
.ip-reimb{margin-top:10px;padding-top:10px;border-top:0.5px solid var(--chrome-border)}
.ip-reimb-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;color:var(--text-secondary)}
.ip-reimb-status{margin-top:8px;font-size:12px;color:var(--text-secondary)}
.ip-reimb-status.ok{color:var(--color-success);font-weight:600}
.ip-reimb-pos{margin-top:8px;display:flex;flex-direction:column;gap:4px}
.ip-reimb-po{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:var(--radius-md,10px);background:var(--surface-2,color-mix(in srgb,var(--text-primary) 4%,transparent));cursor:pointer;font-size:12px}
.ip-reimb-po:hover{background:color-mix(in srgb,var(--app-accent) 8%,transparent)}
.ip-reimb-po-t{flex:1;color:var(--text-primary);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ip-reimb-po-v{flex:0 0 auto;color:var(--text-muted);max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ip-reimb-po-a{flex:0 0 auto;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.ip-reimb-tag{flex:0 0 auto;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:var(--radius-pill);text-transform:uppercase;letter-spacing:.3px}
.ip-reimb-tag.ready{color:var(--color-success);background:color-mix(in srgb,var(--color-success) 14%,transparent)}
.ip-reimb-tag.other{color:var(--text-muted);background:color-mix(in srgb,var(--text-primary) 8%,transparent)}
.rt-row-del{flex-shrink:0;width:30px;height:30px;border:none;background:transparent;color:var(--text-muted);font-size:12px;border-radius:50%;cursor:pointer;opacity:0;display:inline-flex;align-items:center;justify-content:center;transition:opacity var(--motion-fast),background var(--motion-fast),color var(--motion-fast)}
.rt-row:hover .rt-row-del{opacity:1}
/* pass-4 📘 — GLOBAL default size for the .ic inline-icon helper. Previously .ic had NO default
   size, so any <svg class="ic"> without a scoped width/height rule expanded to fill its parent
   (a real bug — e.g. a delete-button SVG rendered 300px). All 14 existing scoped .ic rules set
   their own size and override this. This is a safe fallback that prevents the whole bug class. */
svg.ic{width:16px;height:16px;flex-shrink:0;display:inline-block;vertical-align:middle}
.rt-row-del .ic,.rt-row-action .ic{width:14px;height:14px}
.rt-row-del:hover{color:var(--color-error);background:color-mix(in srgb,var(--color-error) 12%,transparent)}
.rt-row-del:hover{background:color-mix(in srgb,var(--color-error) 14%,transparent);color:var(--color-error)}
/* ── W2-L icon system pass — render proper SF-Symbols-style glyphs for the register
   action buttons that historically used raw ✕/📎/✓/✗/× text. CSS-mask keeps the markup
   untouched (the raw char stays as a no-CSS / screen-reader fallback) while every instance
   of each shared class updates at once (DESIGN.md: fix the class, not one callsite). Glyphs
   inherit currentColor so all 7 themes + the existing hover tints keep working. */
/* Only hide the raw fallback glyph + draw the mask icon WHERE masks are supported
   (@supports), so any engine without mask-image keeps the legible ✕/📎/✓ text. */
@supports ((-webkit-mask-image:url()) or (mask-image:url())){
  .rt-row-del,.reg-attached-x,.note-action-btn.del,.task-ws-sub-del,.subtask-del,.tracked-delete,.dl-subreg-del,.comment-del,.insp-cl-del{font-size:0 !important}
  .rt-row-del::before,.reg-attached-x::before,.note-action-btn.del::before,.task-ws-sub-del::before,.subtask-del::before,.tracked-delete::before,.dl-subreg-del::before,.comment-del::before,.insp-cl-del::before,
  .rt-row-action.rt-row-ico::before{content:'';display:inline-block;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;vertical-align:middle}
  /* trash (delete) */
  .rt-row-del::before,.note-action-btn.del::before,.task-ws-sub-del::before,.subtask-del::before,.tracked-delete::before,.dl-subreg-del::before,.comment-del::before,.insp-cl-del::before{width:13px;height:13px;-webkit-mask-image:var(--ico-trash);mask-image:var(--ico-trash)}
  /* small × (detach chip) */
  .reg-attached-x::before{width:11px;height:11px;-webkit-mask-image:var(--ico-x);mask-image:var(--ico-x)}
  /* glyph-only action variant (✓/✗/📎) — text hidden, icon via ::before. Text pills keep their label. */
  .rt-row-action.rt-row-ico{font-size:0;width:26px;padding:3px 0;display:inline-flex;align-items:center;justify-content:center}
  .rt-row-action.rt-row-ico::before{width:14px;height:14px}
}
.rt-row-action-pos.rt-row-ico::before{-webkit-mask-image:var(--ico-check);mask-image:var(--ico-check)}
.rt-row-action-neg.rt-row-ico::before{-webkit-mask-image:var(--ico-x);mask-image:var(--ico-x)}
.rt-row-action-attach.rt-row-ico::before{-webkit-mask-image:var(--ico-paperclip);mask-image:var(--ico-paperclip)}
.allow-var.pos{color:color-mix(in srgb,var(--color-success) 78%,var(--text-primary))}
.allow-var.neg{color:color-mix(in srgb,var(--color-error) 78%,var(--text-primary))}
/* gap#3 — reconciled allowance chip (closed out → CO). Neutral success tone; clickable when CO-linked. */
.allow-recon{color:color-mix(in srgb,var(--color-success) 70%,var(--text-primary));font-weight:700}
.allow-recon[role="button"]{cursor:pointer}
.allow-recon[role="button"]:hover{color:var(--color-success);text-decoration:underline}
.warr-pos{color:color-mix(in srgb,var(--color-success) 74%,var(--text-primary))}
.warr-warn{color:color-mix(in srgb,var(--color-warning) 78%,var(--text-primary))}
.warr-neg{color:color-mix(in srgb,var(--color-error) 78%,var(--text-primary))}
/* pass-4 📘 — Warranties hero (metric-door tiles), claim chip + claim-log modal */
.warr-hero{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;margin:2px 0 14px}
/* Command-center dual-track pulse: a small label above each hero door row. */
.ci-track-lbl{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);margin:2px 0 7px}
#inspectionHero .warr-hero{margin-bottom:14px}
/* Lifecycle timeline (rail) — Apply→Review→Approved→Inspecting→Closed with you-are-here. */
.ci-life{display:flex;flex-direction:column;gap:0}
.ci-life-step{display:flex;align-items:center;gap:9px;position:relative;padding:5px 0;font-size:12px}
.ci-life-step:not(:last-child)::before{content:'';position:absolute;left:5px;top:18px;bottom:-5px;width:1.5px;background:color-mix(in srgb,var(--chrome-border) 70%,transparent)}
.ci-life-step.is-done:not(:last-child)::before{background:color-mix(in srgb,var(--color-success) 50%,transparent)}
.ci-life-dot{width:11px;height:11px;border-radius:50%;flex:none;z-index:1;background:color-mix(in srgb,var(--text-primary) 16%,transparent);box-shadow:inset 0 0 0 2px var(--card-bg)}
.ci-life-step.is-done .ci-life-dot{background:var(--color-success)}
.ci-life-step.is-current .ci-life-dot{background:var(--app-accent);box-shadow:inset 0 0 0 2px var(--card-bg),0 0 0 3px color-mix(in srgb,var(--app-accent) 24%,transparent)}
.ci-life-lbl{color:var(--text-muted);font-weight:600}
.ci-life-step.is-done .ci-life-lbl{color:var(--text-secondary)}
.ci-life-step.is-current .ci-life-lbl{color:var(--text-primary);font-weight:800}
.ci-next{margin-top:10px;padding-top:10px;border-top:0.5px solid color-mix(in srgb,var(--chrome-border) 60%,transparent);font-size:12px;color:var(--text-secondary);line-height:1.4}
.ci-next-lbl{display:block;font-size:9px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--app-accent);margin-bottom:3px}
.warr-door{flex:1 1 0;min-width:88px;border:.5px solid var(--chrome-border);background:var(--card-bg);border-radius:14px;padding:11px 14px;cursor:pointer;text-align:left;box-shadow:var(--shadow-e2),inset 0 1px 0 rgba(255,255,255,.16);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast),border-color var(--motion-fast);position:relative}
.warr-door:hover:not([disabled]){transform:translateY(-2px);box-shadow:var(--shadow-e3),inset 0 1px 0 rgba(255,255,255,.22)}
.warr-door[disabled]{cursor:default;opacity:.55;box-shadow:var(--shadow-e1)}
.warr-door.on{border-color:transparent;outline:2px solid var(--app-accent);outline-offset:-2px}
.warr-door .wd-n{font-size:26px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1;color:var(--text-primary)}
.warr-door .wd-l{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);margin-top:5px}
.warr-door .wd-s{font-size:10px;font-weight:700;color:var(--text-secondary);margin-top:2px}
#itbList .trk .ic{width:11px;height:11px;vertical-align:-1px;margin-right:1px}
.warr-door.tone-ok .wd-n{color:color-mix(in srgb,var(--color-success) 76%,var(--text-primary))}
.warr-door.tone-warn .wd-n{color:color-mix(in srgb,var(--color-warning) 80%,var(--text-primary))}
.warr-door.tone-bad .wd-n{color:color-mix(in srgb,var(--color-error) 80%,var(--text-primary))}
.warr-hero-claims{display:flex;flex-direction:column;justify-content:center;padding:11px 16px;border-radius:14px;background:color-mix(in srgb,var(--app-accent) 8%,var(--card-bg));border:.5px solid var(--chrome-border)}
.warr-hero-claims .wd-n{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;color:var(--app-accent)}
.warr-hero-claims .wd-l{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);margin-top:5px}
.warr-claim-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px;border:.5px solid var(--chrome-border);background:var(--card-bg);color:var(--text-secondary);cursor:pointer;box-shadow:var(--shadow-e1);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast),color var(--motion-fast);flex-shrink:0}
.warr-claim-chip .ic{width:12px;height:12px}
.warr-claim-chip:hover{transform:translateY(-1px);box-shadow:var(--shadow-e2);color:var(--text-primary)}
.warr-claim-chip.has{color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 10%,var(--card-bg))}
.wc-modal{max-height:52vh;overflow:auto;display:flex;flex-direction:column;gap:14px}
.wc-list{display:flex;flex-direction:column;gap:8px}
.wc-empty{font-size:12.5px;color:var(--text-muted);padding:10px 2px}
.wc-row{border:.5px solid rgba(0,0,0,.06);border-radius:13px;padding:11px 13px;background:var(--card-bg);box-shadow:var(--shadow-e1),var(--bevel-top);transition:box-shadow var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-spring)}
.wc-row:hover{box-shadow:var(--shadow-e2),var(--bevel-top);transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.wc-row{transition:none}.wc-row:hover{transform:none}}
.wc-row-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.wc-date{font-size:12px;font-weight:700;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.wc-status{font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--text-muted) 14%,transparent);color:var(--text-secondary)}
.wc-status.tone-ok{background:color-mix(in srgb,var(--color-success) 16%,transparent);color:color-mix(in srgb,var(--color-success) 72%,var(--text-primary))}
.wc-status.tone-warn{background:color-mix(in srgb,var(--color-warning) 18%,transparent);color:color-mix(in srgb,var(--color-warning) 76%,var(--text-primary))}
.wc-status.tone-bad{background:color-mix(in srgb,var(--color-error) 16%,transparent);color:color-mix(in srgb,var(--color-error) 76%,var(--text-primary))}
.wc-status.tone-info{background:color-mix(in srgb,var(--app-accent) 15%,transparent);color:color-mix(in srgb,var(--app-accent) 78%,var(--text-primary))}
/* G6-W3 — per-claim lifecycle actions (rounded hover pops, no edge-strips). */
.wc-row-actions{display:inline-flex;align-items:center;gap:2px;margin-left:auto}
.wc-act{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:none;border-radius:8px;background:transparent;color:var(--text-muted);cursor:pointer;transition:background .12s,color .12s}
.wc-act:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent)}
.wc-act .ic{width:14px;height:14px}
.wc-act-danger:hover{background:color-mix(in srgb,var(--color-error) 14%,transparent);color:var(--color-error)}
.wc-row.wc-editing{border-color:color-mix(in srgb,var(--app-accent) 40%,var(--chrome-border));box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 12%,transparent)}
.wc-desc{font-size:13px;color:var(--text-primary);line-height:1.4}
.wc-res{display:flex;align-items:flex-start;gap:7px;margin-top:8px;padding:7px 10px;font-size:12px;color:var(--text-secondary);background:color-mix(in srgb,var(--color-success) 8%,transparent);border-radius:9px;line-height:1.4}
.wc-res .ic{width:13px;height:13px;flex-shrink:0;margin-top:1px;color:var(--color-success)}
.wc-add{margin-top:4px;padding:13px;border-radius:13px;background:var(--surface-2);box-shadow:inset 0 1px 2px color-mix(in srgb,#000 6%,transparent);border:.5px solid rgba(0,0,0,.05)}
.wc-add-title{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
.wc-add-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:560px){.warr-door{flex:1 1 40%}.wc-add-grid{grid-template-columns:1fr}}
.wc-roll{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:13px}
.wc-roll-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:600;color:var(--text-secondary);background:color-mix(in srgb,var(--text-muted) 12%,transparent);box-shadow:var(--bevel-top)}
.wc-roll-chip b{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.wc-roll-chip.tone-warn{background:color-mix(in srgb,var(--color-warning) 14%,transparent)}
.wc-roll-chip.tone-warn b{color:color-mix(in srgb,var(--color-warning) 78%,var(--text-primary))}
.wc-roll-chip.tone-info{background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
.wc-roll-chip.tone-info b{color:color-mix(in srgb,var(--app-accent) 80%,var(--text-primary))}
.wc-roll-chip.tone-ok{background:color-mix(in srgb,var(--color-success) 13%,transparent)}
.wc-roll-chip.tone-ok b{color:color-mix(in srgb,var(--color-success) 74%,var(--text-primary))}
.wc-roll-chip.tone-muted{background:color-mix(in srgb,var(--text-muted) 12%,transparent)}
/* Permit status — ONE current pill + a compact change-status dropdown beside it. */
.perm-stat-cell{display:flex;align-items:center;gap:6px;flex-shrink:0}
.perm-stat-pill{display:inline-flex;align-items:center;padding:3px 9px;border-radius:var(--radius-pill);font-size:11px;font-weight:700;letter-spacing:.2px;text-transform:capitalize;white-space:nowrap;border:0.5px solid transparent}
.pstat-applied{color:color-mix(in srgb,var(--color-warning) 80%,var(--text-primary));background:color-mix(in srgb,var(--color-warning) 14%,transparent);border-color:color-mix(in srgb,var(--color-warning) 28%,transparent)}
.pstat-reviewing{color:color-mix(in srgb,var(--app-accent) 86%,var(--text-primary));background:color-mix(in srgb,var(--app-accent) 13%,transparent);border-color:color-mix(in srgb,var(--app-accent) 30%,transparent)}
.pstat-approved{color:color-mix(in srgb,var(--color-success) 80%,var(--text-primary));background:color-mix(in srgb,var(--color-success) 14%,transparent);border-color:color-mix(in srgb,var(--color-success) 30%,transparent)}
.pstat-expired{color:color-mix(in srgb,var(--color-error) 80%,var(--text-primary));background:color-mix(in srgb,var(--color-error) 13%,transparent);border-color:color-mix(in srgb,var(--color-error) 28%,transparent)}
.pstat-denied{color:color-mix(in srgb,var(--color-error) 82%,var(--text-primary));background:color-mix(in srgb,var(--color-error) 15%,transparent);border-color:color-mix(in srgb,var(--color-error) 32%,transparent)}
/* V-permstatus 2026-06-30 — the status select IS the pill now (single control). Shares the
   pstat-* tint classes with the old pill; styled as a rounded, tinted, capitalized pill with
   a chevron (appearance:none so it's not a stock <select>). Editing changes the status. */
.perm-stat-select{font-size:11px;font-weight:700;letter-spacing:.2px;text-transform:capitalize;font-family:inherit;
  border:0.5px solid transparent;border-radius:var(--radius-pill);padding:3px 22px 3px 10px;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;
  transition:filter var(--motion-fast),box-shadow var(--motion-fast)}
.perm-stat-select:hover{filter:brightness(1.04);box-shadow:var(--shadow-e1)}
.perm-stat-select:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 22%,transparent)}
/* the pstat-* classes set a non-solid (translucent) background; the chevron + tint compose.
   Ensure the option list itself is legible (some OSes inherit the select bg). */
.perm-stat-select option{color:var(--text-primary);background:var(--card-bg);font-weight:600}
.perm-portal-link{color:var(--app-accent);font-weight:600;text-decoration:none}
.perm-portal-link:hover{text-decoration:underline}
/* ── W2-L permitting rework — permit-as-mini-project cards, review-stage meter,
   surfaced portals, add-as-disclosure. Status is signaled by pill + tinted icon,
   NEVER a colored card edge-strip (hard rule). Content cards stay solid (no glass). */
.perm-region{display:flex;flex-direction:column;gap:13px}
.perm-region-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:1px}
.perm-region-title{font-size:12.5px;font-weight:700;letter-spacing:.2px;color:var(--text-secondary)}
.perm-region-count{font-size:11.5px;font-weight:600;color:var(--text-muted);font-variant-numeric:tabular-nums}
/* Surfaced "Permit portals" jump band — one-tap access to each AHJ portal. */
/* V-permlayout 2026-06-30 — quiet the OUTER portals container so it's a grouping zone, not a
   second raised card under the already-raised tiles (was --surface-grad + e2 → panel-on-panel
   double elevation). Subtle inset tint + hairline; the tiles carry the single real elevation. */
.perm-portals{display:flex;flex-direction:column;gap:8px;padding:13px 14px;border-radius:var(--radius-lg);background:color-mix(in srgb,var(--text-primary) 3%,transparent);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--chrome-border) 60%,transparent)}
.perm-portals-head{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--text-primary);letter-spacing:-.1px}
.perm-portals-head svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;color:var(--app-accent)}
.perm-portals-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.perm-portal-tile{display:flex;align-items:center;gap:10px;min-width:0;padding:9px 11px;border-radius:var(--radius-md);background:var(--card-bg);text-decoration:none;color:inherit;transition:background var(--motion-fast),transform var(--motion-fast),box-shadow var(--motion-fast);box-shadow:var(--bevel-top),var(--shadow-e1)}
.perm-portal-tile:hover{box-shadow:var(--bevel-top),var(--shadow-e2);transform:translateY(-1px)}
.perm-portal-tile:hover{background:color-mix(in srgb,var(--app-accent) 12%,var(--card-bg));transform:translateY(-1px)}
.perm-portal-tile-ico{width:30px;height:30px;flex-shrink:0;border-radius:8px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--app-accent) 16%,transparent);color:var(--app-accent)}
.perm-portal-tile-ico svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7}
.perm-portal-tile-body{min-width:0;flex:1}
/* V-permlayout 2026-06-30 — these were inline <span>s; text-overflow:ellipsis is a NO-OP on
   inline elements, so the long sub-text overflowed the card. display:block makes the ellipsis
   engage within the min-width:0 flex body. */
.perm-portal-tile-name{display:block;font-size:12.5px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.perm-portal-tile-sub{display:block;font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.perm-portal-tile-go{flex-shrink:0;color:var(--app-accent);opacity:.65}
.perm-portal-tile:hover .perm-portal-tile-go{opacity:1}
/* V-pi2.5 cleanup — the old (V132-era) .perm-card / -head / -ico / -actions / -status /
   -dates / -stages / -edit-grid rules were REMOVED here; the V-pi2 block below is the single
   source of truth for all of them (the old .perm-card-ico used a `background:` shorthand that
   clobbered the orb gradient — gone now). KEPT below: only the rules V-pi2 does NOT redefine —
   the expiry-flag tones, the editor's expiry-input states, and the blocked stage states. */
.perm-stage-fill.blocked{background:linear-gradient(180deg,color-mix(in srgb,var(--color-error) 70%,#fff),var(--color-error))}
.perm-stage-chip.is-blocked{background:color-mix(in srgb,var(--color-error) 11%,transparent);color:color-mix(in srgb,var(--color-error) 84%,var(--text-primary));border-color:color-mix(in srgb,var(--color-error) 28%,transparent)}
.perm-stage-chip.is-blocked .perm-stage-dot{background:var(--color-error)}
.perm-stage-hint{font-size:10.5px;color:var(--text-muted);margin-top:6px}
.perm-edit-field.is-expiring .field-input{border-color:color-mix(in srgb,var(--color-warning) 55%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-warning) 14%,transparent)}
.perm-edit-field.is-expired .field-input{border-color:color-mix(in srgb,var(--color-error) 55%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-error) 14%,transparent)}
.perm-exp-flag{align-self:flex-start;margin-top:5px;font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:2px 8px;border-radius:var(--radius-pill)}
.perm-exp-flag.tone-warn{background:color-mix(in srgb,var(--color-warning) 16%,transparent);color:color-mix(in srgb,var(--color-warning) 80%,var(--text-primary))}
.perm-exp-flag.tone-bad{background:color-mix(in srgb,var(--color-error) 16%,transparent);color:color-mix(in srgb,var(--color-error) 82%,var(--text-primary))}
.perm-exp-flag.tone-ok{background:color-mix(in srgb,var(--color-success) 14%,transparent);color:color-mix(in srgb,var(--color-success) 80%,var(--text-primary))}
.perm-edit-actions .btn-primary .ic{width:13px;height:13px;vertical-align:-2px;margin-right:3px}
.perm-edit-grid .field-full{grid-column:1 / -1}

/* ============================================================================
   V-pi2 2026-06-30 — PERMITS & INSPECTIONS REDESIGN (max-Apple). Command-header
   lifecycle spine + counts + portal chip; flat permit cards w/ orb tiles, chips
   that POP, nested inspections; redesigned inline editor. Built on the app's V82
   tokens (--shadow-e*, --bevel-top, --surface-grad, --app-accent). Both themes.
   ============================================================================ */
/* shared orb tile (sphere: lit upper-left + inner shade + specular cap + lift) */
.pi2-orb{position:relative;overflow:hidden;display:grid;place-items:center;
  background-image:radial-gradient(circle at 32% 26%,rgba(255,255,255,.55),transparent 56%),radial-gradient(circle at 72% 90%,rgba(0,0,0,.1),transparent 60%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 5px rgba(0,0,0,.08),inset 0 0 0 .5px rgba(255,255,255,.12),var(--shadow-e1)}
.pi2-orb::after{content:'';position:absolute;left:50%;top:7%;transform:translateX(-50%);width:62%;height:40%;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.5),transparent 74%)}
.pi2-orb svg{position:relative;z-index:1}
[data-theme="midnight"] .pi2-orb,[data-theme="contrast"] .pi2-orb{
  background-image:radial-gradient(circle at 32% 26%,rgba(255,255,255,.24),transparent 56%),radial-gradient(circle at 72% 90%,rgba(0,0,0,.4),transparent 60%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 5px rgba(0,0,0,.4),inset 0 0 0 .5px rgba(255,255,255,.06),var(--shadow-e1)}

/* ── command header ── */
.pi2-head{background:var(--surface-grad);border-radius:var(--radius-lg);box-shadow:var(--bevel-top),var(--shadow-e2);border:.5px solid color-mix(in srgb,var(--chrome-border) 60%,transparent);padding:22px 22px 18px;display:flex;flex-direction:column;gap:18px;margin-bottom:14px}
.pi2-head-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pi2-title{font-size:22px;font-weight:820;letter-spacing:-.5px;color:var(--text-primary);display:flex;align-items:center;gap:13px}
.pi2-title .tico{width:38px;height:38px;border-radius:12px;color:var(--app-accent);background-color:color-mix(in srgb,var(--app-accent) 15%,var(--card-bg))}
.pi2-title .tico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7}
.pi2-portal-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--app-accent) 8%,var(--card-bg));border:.5px solid color-mix(in srgb,var(--app-accent) 24%,transparent);color:var(--app-accent);font-size:12.5px;font-weight:700;text-decoration:none;cursor:pointer;box-shadow:var(--bevel-top),var(--shadow-e1);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
.pi2-portal-chip:hover{transform:translateY(-1px);box-shadow:var(--bevel-top),var(--shadow-e2),var(--glow-accent-soft)}
.pi2-portal-chip .g{width:24px;height:24px;border-radius:50%;background-color:color-mix(in srgb,var(--app-accent) 22%,transparent);color:var(--app-accent)}
.pi2-portal-chip .g svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8}
/* V-pi2.2 — counts → an integrated STAT STRIP (one quiet inset rail, divider-separated, not
   4 loud competing tiles). Numbers command, labels recede, meaningful ones tint. */
.pi2-counts{display:flex;align-items:stretch;margin-left:auto;border-radius:14px;background:color-mix(in srgb,var(--app-bg) 5%,transparent);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--chrome-border) 70%,transparent);overflow:hidden}
.pi2-count{display:flex;flex-direction:column;justify-content:center;gap:5px;padding:11px 20px;position:relative;min-width:0}
.pi2-count+.pi2-count::before{content:'';position:absolute;left:0;top:22%;bottom:22%;width:.5px;background:color-mix(in srgb,var(--chrome-border) 70%,transparent)}
.pi2-count b{font-size:22px;font-weight:820;letter-spacing:-.7px;font-variant-numeric:tabular-nums;color:var(--text-primary);line-height:1}
.pi2-count span{font-size:9px;font-weight:760;color:var(--text-muted);text-transform:uppercase;letter-spacing:.07em}
.pi2-count.warn b{color:color-mix(in srgb,var(--color-warning) 88%,var(--text-primary))}
.pi2-count.accent b{color:var(--app-accent)}

/* V-pi2.2 — CONNECTED LIFECYCLE TIMELINE (depth) — nodes joined by a track that FILLS to
   the current stage. done=green check node on solid line · current=lifted accent orb w/ halo
   · todo=muted node on quiet line. Replaces the flat grey segmented ribbon (felt "not us"). */
.pi2-flow{position:relative;padding:8px 6px 2px}
.pi2-flow-track{display:flex;align-items:flex-start;justify-content:space-between;position:relative}
.pi2-flow-track::before,.pi2-flow-track::after{content:'';position:absolute;top:11px;height:3px;border-radius:2px;left:7%}
.pi2-flow-track::before{right:7%;background:color-mix(in srgb,var(--text-primary) 10%,transparent)}
.pi2-flow-track::after{width:var(--flow-pct,30%);background:linear-gradient(90deg,var(--color-success),var(--app-accent));box-shadow:0 0 8px color-mix(in srgb,var(--app-accent) 40%,transparent)}
.pi2-node{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:7px;flex:1;min-width:0}
.pi2-node .nd{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background-image:radial-gradient(circle at 34% 28%,rgba(255,255,255,.55),transparent 58%),radial-gradient(circle at 70% 88%,rgba(0,0,0,.12),transparent 62%);
  background-color:var(--surface);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 2px rgba(0,0,0,.1),0 0 0 3px var(--card-bg),var(--shadow-e1)}
.pi2-node .nd svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:2.6;opacity:0}
.pi2-node .nl{font-size:11.5px;font-weight:650;color:var(--text-muted);transition:color var(--motion-base);white-space:nowrap}
.pi2-node.done .nd{background-color:var(--color-success)}
.pi2-node.done .nd svg{opacity:1}
.pi2-node.done .nl{color:var(--text-secondary);font-weight:700}
/* V-pi2.4 — current node = a SOLID accent orb. Override the inherited .nd sphere-light
   gradient (two stacked white radials washed the center → looked half-filled) with ONE
   gentle top specular; punch-out ring uses --card-bg (not pure white) + a soft accent halo. */
.pi2-node.current .nd{width:30px;height:30px;background-color:var(--app-accent);
  background-image:radial-gradient(circle at 50% 22%,rgba(255,255,255,.4),transparent 55%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.45),0 0 0 4px var(--card-bg),0 0 0 6px color-mix(in srgb,var(--app-accent) 18%,transparent),var(--shadow-e2);margin-top:-3px}
.pi2-node.current .nl{color:var(--text-primary);font-weight:820}
/* V-pi2.4 — ::after removed; the single top specular now lives in the node's background-image
   (the prior ::after was a 2nd white overlay diluting the accent fill). */
[data-theme="midnight"] .pi2-node .nd,[data-theme="contrast"] .pi2-node .nd{background-image:radial-gradient(circle at 34% 28%,rgba(255,255,255,.22),transparent 58%),radial-gradient(circle at 70% 88%,rgba(0,0,0,.4),transparent 62%);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 3px var(--card-bg),var(--shadow-e1)}
.pi2-rib-next{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--text-secondary);align-self:flex-start;padding:9px 14px 9px 9px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--app-accent) 7%,var(--card-bg));box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--app-accent) 18%,transparent)}
.pi2-rib-next b{font-size:10px;font-weight:800;color:var(--on-accent);text-transform:uppercase;letter-spacing:.08em;padding:3px 9px;border-radius:var(--radius-pill);background:var(--app-accent)}
@media (max-width:680px){.pi2-node .nl{font-size:10px}.pi2-counts{width:100%;margin-left:0}}

/* ── permit card (flat, premium) ── */
.perm-card{background:var(--surface-grad);border-radius:var(--radius-lg);box-shadow:var(--bevel-top),var(--shadow-e2);border:.5px solid color-mix(in srgb,var(--chrome-border) 60%,transparent);overflow:hidden;transition:box-shadow var(--motion-base) var(--ease-out),transform var(--motion-fast) var(--ease-spring)}
.perm-card:hover{box-shadow:var(--bevel-top),var(--shadow-e3);transform:translateY(-1px)}
.perm-cards{display:flex;flex-direction:column;gap:14px}
.perm-card-head{display:flex;align-items:center;gap:14px;padding:18px 18px 14px}
.perm-card-ico{width:44px;height:44px;flex:none;border-radius:13px;color:var(--app-accent);background-color:color-mix(in srgb,var(--app-accent) 14%,var(--card-bg))}
.perm-card-ico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7}
.perm-card-ico.tone-good{color:color-mix(in srgb,var(--color-success) 82%,var(--text-primary));background-color:color-mix(in srgb,var(--color-success) 16%,var(--card-bg))}
.perm-card-ico.tone-warn{color:color-mix(in srgb,var(--color-warning) 84%,var(--text-primary));background-color:color-mix(in srgb,var(--color-warning) 16%,var(--card-bg))}
.perm-card-ico.tone-bad{color:color-mix(in srgb,var(--color-error) 82%,var(--text-primary));background-color:color-mix(in srgb,var(--color-error) 15%,var(--card-bg))}
.perm-card-id{flex:1;min-width:0}
.perm-card-type{font-size:16.5px;font-weight:760;letter-spacing:-.3px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.perm-card-meta{font-size:12.5px;color:var(--text-muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.perm-card-meta .perm-portal-link{color:var(--app-accent);text-decoration:none;font-weight:650}
.perm-card-status{flex:none;order:3}
.perm-card-actions{display:flex;gap:6px;flex:none;order:4}
.perm-card-act{width:34px;height:34px;border-radius:10px;border:0;background:var(--surface-2,color-mix(in srgb,var(--text-primary) 4%,var(--card-bg)));color:var(--text-muted);display:grid;place-items:center;cursor:pointer;box-shadow:var(--bevel-top),var(--shadow-e1);transition:all var(--motion-fast) var(--ease-spring)}
.perm-card-act:hover{background:color-mix(in srgb,var(--app-accent) 12%,var(--card-bg));color:var(--app-accent);transform:translateY(-1px);box-shadow:var(--bevel-top),var(--shadow-e2)}
.perm-card-act:active{transform:scale(.92)}
.perm-card-act svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7}
.perm-card-act.danger:hover{background:color-mix(in srgb,var(--color-error) 12%,var(--card-bg));color:var(--color-error)}
/* status select sits in the head row (moved out of its own row) */
.perm-card-head .perm-stat-select,.perm-card-head .perm-stat-pill{order:2}
/* card body (meter+chips+dates) */
.perm-card-body{padding:0 18px 16px;display:flex;flex-direction:column;gap:16px}
.perm-stages{display:flex;flex-direction:column;gap:11px}
/* V-pi2.1 — ONE continuous bar (gap:0 removes the segment dividing lines Gavin flagged).
   Only the outer ends round; adjacent same-state fills blend seamlessly. */
.perm-stages-track{height:9px;border-radius:var(--radius-pill);display:flex;gap:0;overflow:hidden;background:var(--surface-2,color-mix(in srgb,var(--text-primary) 6%,transparent));box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}
.perm-stage-fill{flex:1;border-radius:0}
.perm-stage-fill:first-child{border-radius:var(--radius-pill) 0 0 var(--radius-pill)}
.perm-stage-fill:last-child{border-radius:0 var(--radius-pill) var(--radius-pill) 0}
.perm-stage-fill.done{background:linear-gradient(180deg,color-mix(in srgb,var(--color-success) 76%,#fff),var(--color-success));box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.perm-stage-fill.current{background:linear-gradient(180deg,color-mix(in srgb,var(--app-accent) 70%,#fff),var(--app-accent));box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 10px color-mix(in srgb,var(--app-accent) 55%,transparent)}
.perm-stage-fill.blocked{background:linear-gradient(180deg,color-mix(in srgb,var(--color-error) 70%,#fff),var(--color-error))}
.perm-stage-fill.todo{background:color-mix(in srgb,var(--text-primary) 8%,transparent)}
.perm-stage-list{display:flex;flex-wrap:wrap;gap:9px}
.perm-stage-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 13px 6px 10px;border-radius:var(--radius-pill);font-size:11.5px;font-weight:650;border:.5px solid color-mix(in srgb,var(--chrome-border) 70%,transparent);background:linear-gradient(180deg,color-mix(in srgb,#fff 4%,var(--card-bg)),var(--card-bg));color:var(--text-secondary);cursor:pointer;box-shadow:var(--bevel-top),var(--shadow-e1);transition:all var(--motion-fast) var(--ease-spring)}
.perm-stage-chip:hover{transform:translateY(-1px);box-shadow:var(--bevel-top),var(--shadow-e2)}
.perm-stage-dot{width:8px;height:8px;border-radius:50%;background-color:color-mix(in srgb,var(--text-primary) 26%,transparent);background-image:radial-gradient(circle at 35% 28%,rgba(255,255,255,.5),transparent 60%);box-shadow:inset 0 -1px 1px rgba(0,0,0,.15)}
.perm-stage-chip.is-done{color:color-mix(in srgb,var(--color-success) 80%,var(--text-primary))}
.perm-stage-chip.is-done .perm-stage-dot{background-color:var(--color-success)}
.perm-stage-chip.is-current{background:linear-gradient(180deg,color-mix(in srgb,var(--app-accent) 16%,var(--card-bg)),color-mix(in srgb,var(--app-accent) 10%,var(--card-bg)));color:color-mix(in srgb,var(--app-accent) 92%,var(--text-primary));border-color:color-mix(in srgb,var(--app-accent) 34%,transparent);box-shadow:var(--bevel-top),var(--shadow-e2),var(--glow-accent-soft)}
.perm-stage-chip.is-current .perm-stage-dot{background-color:var(--app-accent)}
.perm-stage-chip.is-blocked{color:color-mix(in srgb,var(--color-error) 82%,var(--text-primary))}
.perm-stage-chip.is-blocked .perm-stage-dot{background-color:var(--color-error)}
.perm-stage-hint{font-size:10.5px;color:var(--text-muted);margin-top:6px}
.perm-card-dates{display:flex;gap:32px;flex-wrap:wrap}
.perm-date{display:flex;flex-direction:column;line-height:1.2}
.perm-date-lbl{font-size:10px;font-weight:750;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}
.perm-date-val{font-size:15px;font-weight:720;font-variant-numeric:tabular-nums;letter-spacing:-.2px;color:var(--text-primary);margin-top:5px}
.perm-date-val.is-overdue{color:var(--color-error)}

/* ── nested inspections inside a permit card ── */
.perm-insp{background:color-mix(in srgb,var(--app-bg) 4%,transparent);border-top:.5px solid color-mix(in srgb,var(--chrome-border) 55%,transparent);padding:14px 18px 18px;display:flex;flex-direction:column;gap:10px}
.perm-insp-head{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted)}
.perm-insp-head .hico{width:18px;height:18px;border-radius:6px;color:var(--text-secondary);background-color:color-mix(in srgb,var(--text-primary) 8%,transparent)}
.perm-insp-head .hico svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2}
.perm-insp-head .ct{margin-left:auto;font-weight:750;color:var(--text-secondary);text-transform:none;letter-spacing:0;font-size:11.5px}
.perm-irow{display:flex;align-items:center;gap:14px;padding:11px 13px;border-radius:var(--radius-md);background:var(--card-bg);box-shadow:var(--bevel-top),var(--shadow-e1);transition:all var(--motion-fast) var(--ease-spring)}
.perm-irow:hover{transform:translateY(-1px);box-shadow:var(--bevel-top),var(--shadow-e2)}
.perm-irow-ico{width:30px;height:30px;flex:none;border-radius:9px}
.perm-irow-ico svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.perm-irow-ico.passed{background-color:color-mix(in srgb,var(--color-success) 18%,transparent);color:color-mix(in srgb,var(--color-success) 80%,var(--text-primary))}
.perm-irow-ico.scheduled{background-color:color-mix(in srgb,var(--app-accent) 16%,transparent);color:var(--app-accent)}
.perm-irow-ico.failed{background-color:color-mix(in srgb,var(--color-error) 16%,transparent);color:color-mix(in srgb,var(--color-error) 82%,var(--text-primary))}
.perm-irow-ico.conditional{background-color:color-mix(in srgb,var(--color-warning) 16%,transparent);color:color-mix(in srgb,var(--color-warning) 84%,var(--text-primary))}
.perm-irow-id{flex:1;min-width:0}
.perm-irow-type{font-size:13.5px;font-weight:680;letter-spacing:-.1px;color:var(--text-primary)}
.perm-irow-meta{font-size:11.5px;color:var(--text-muted);margin-top:2px}
.perm-irow-res{font-size:10.5px;font-weight:750;text-transform:capitalize;letter-spacing:.2px;padding:5px 12px;border-radius:var(--radius-pill);box-shadow:var(--bevel-top);white-space:nowrap}
.perm-irow-res.passed{background:color-mix(in srgb,var(--color-success) 15%,transparent);color:color-mix(in srgb,var(--color-success) 80%,var(--text-primary))}
.perm-irow-res.scheduled,.perm-irow-res.re-inspect{background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:color-mix(in srgb,var(--app-accent) 88%,var(--text-primary))}
.perm-irow-res.failed{background:color-mix(in srgb,var(--color-error) 15%,transparent);color:color-mix(in srgb,var(--color-error) 82%,var(--text-primary))}
.perm-irow-res.conditional{background:color-mix(in srgb,var(--color-warning) 15%,transparent);color:color-mix(in srgb,var(--color-warning) 84%,var(--text-primary))}
.perm-iadd{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;padding:8px 15px;border-radius:var(--radius-pill);border:1px dashed color-mix(in srgb,var(--app-accent) 38%,var(--chrome-border));background:color-mix(in srgb,var(--app-accent) 5%,transparent);color:var(--app-accent);font-size:12px;font-weight:720;cursor:pointer;transition:all var(--motion-fast) var(--ease-spring)}
.perm-iadd:hover{background:color-mix(in srgb,var(--app-accent) 11%,transparent);transform:translateY(-1px)}
.perm-iadd svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2}
.perm-insp-empty{font-size:12px;color:var(--text-muted)}

/* ── redesigned inline editor ── */
.perm-edit{border-top:.5px solid color-mix(in srgb,var(--chrome-border) 55%,transparent);background:color-mix(in srgb,var(--app-accent) 4%,transparent);padding:18px;margin:0;border-radius:0;box-shadow:none}
.perm-edit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.perm-edit-field{display:flex;flex-direction:column;gap:6px;position:relative}
.perm-edit-field .field-sublabel{font-size:10.5px;font-weight:750;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin:0 0 0 2px}
.perm-edit-field .field-input{box-shadow:var(--bevel-top),inset 0 1px 2px color-mix(in srgb,var(--app-bg) 25%,transparent)}
/* a <select> inside the redesigned editor — not a stock select: appearance:none + chevron */
.pi2-fieldselect{-webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23889'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:30px}
.perm-exp-flag{align-self:flex-start;font-size:10px;font-weight:780;text-transform:uppercase;letter-spacing:.3px;padding:3px 11px;border-radius:var(--radius-pill);box-shadow:var(--bevel-top);margin-top:1px}
.perm-edit-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}

/* ── DE-NEST: inside the Permits & Inspections tab, the section shells must be FLAT
   groups (a label + a flat container), NOT raised cards. My command header + permit
   cards are the ONLY raised surfaces — kill the .detail-group / .modal-section card
   chrome here so there's no raised-on-raised nesting (Gavin's repeated catch). ── */
#tabCompliance .detail-group{background:none;box-shadow:none;border:0;border-radius:0;padding:0;margin:0}
#tabCompliance .detail-group-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);margin:0 0 10px 2px}
#tabCompliance .detail-group-title .dg-ico{width:20px;height:20px;border-radius:6px;background:none;box-shadow:none;color:var(--text-muted)}
#tabCompliance .modal-section{background:none;box-shadow:none;border:0;padding:0;margin:0}
/* the command header is the page banner — drop the redundant "Permits" group label above it */
#tabCompliance #permitHero{margin-bottom:0}
#regHostCompliance > .modal-section:first-child > .detail-group > .detail-group-title{display:none}
/* spacing between the major flat groups on the matte */
#regHostCompliance{gap:18px}

/* ── RAIL: floating glass panels, NO hard cut-off. Remove the vertical border-left
   separator + re-elevate the cards into real floating panels (the flat-with-left-border
   treatment read as a hard cut). Soften internal dividers to faint tinted hairlines. ── */
#pfvContent:not(.pfv-doc-mode) #railCompliance{padding-left:0;border-left:0}
#pfvContent:not(.pfv-doc-mode) #railCompliance .pfv-ws-card,
#pfvContent:not(.pfv-doc-mode) #railCompliance > *{background:var(--surface-grad);box-shadow:var(--bevel-top),var(--shadow-e2);border:.5px solid color-mix(in srgb,var(--chrome-border) 55%,transparent);border-radius:var(--radius-lg);padding:15px 16px}
#railCompliance .ci-next{border-top-color:color-mix(in srgb,var(--chrome-border) 40%,transparent)}
#railCompliance .reg-rail-row{border-bottom-color:color-mix(in srgb,var(--chrome-border) 35%,transparent)}
#railCompliance .reg-rail-row:last-child{border-bottom:0}
/* a richer rail: a small metric-tile pair atop a card (fees + pass-rate) */
.pi2-rail-tiles{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:4px}
.pi2-rail-tile{padding:11px 12px;border-radius:var(--radius-md);background:var(--surface-2,color-mix(in srgb,var(--text-primary) 4%,var(--card-bg)));box-shadow:var(--bevel-top),var(--shadow-e1)}
.pi2-rail-tile b{display:block;font-size:18px;font-weight:820;letter-spacing:-.5px;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.pi2-rail-tile span{font-size:9.5px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-top:4px;display:block}
.pi2-rail-tile.ok b{color:color-mix(in srgb,var(--color-success) 78%,var(--text-primary))}
.pi2-rail-tile.warn b{color:var(--color-warning)}

/* ── V-pi2.3 — matched ADD-PILL pair (pills, not full-width bands) + section header ── */
.pi2-sec-head{display:flex;align-items:center;gap:10px;padding:2px 4px 0;margin-bottom:-4px}
.pi2-sec-t{font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--text-primary)}
.pi2-sec-ct{font-size:11.5px;font-weight:650;color:var(--text-muted)}
.pi2-addpill{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:7px 14px 7px 11px;border-radius:var(--radius-pill);border:.5px solid color-mix(in srgb,var(--app-accent) 30%,transparent);background:color-mix(in srgb,var(--app-accent) 9%,var(--card-bg));color:var(--app-accent);font:inherit;font-size:12px;font-weight:760;cursor:pointer;box-shadow:var(--bevel-top),var(--shadow-e1);transition:all var(--motion-fast) var(--ease-spring)}
.pi2-addpill:hover{background:color-mix(in srgb,var(--app-accent) 16%,var(--card-bg));transform:translateY(-1px);box-shadow:var(--bevel-top),var(--shadow-e2),var(--glow-accent-soft)}
.pi2-addpill:active{transform:scale(.96)}
/* #44 — quiet export pills (CSV/PDF) sit left of the accent Add pill; only the first
   pill in the group carries the margin-left:auto so the trio right-aligns together. */
.pi2-addpill-quiet{margin-left:0;padding:7px 12px;border-color:var(--chrome-border);background:var(--card-bg);color:var(--text-secondary);font-weight:650}
.pi2-addpill-quiet:first-of-type{margin-left:auto}
.pi2-addpill-quiet:hover{background:var(--chrome-bg-hover);color:var(--text-primary);box-shadow:var(--bevel-top),var(--shadow-e1)}
.pi2-sec-head .pi2-addpill:not(.pi2-addpill-quiet){margin-left:8px}
.pi2-addpill svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4}
.pi2-addpill.sm{margin-left:auto;padding:5px 11px 5px 9px;font-size:11px}
/* hide the legacy full-width add-permit disclosure inside the redesigned tab (replaced by the pill) */
#tabCompliance #permitAddDisclosure{display:none}
#tabCompliance #permitAddDisclosure.pi2-open{display:block;margin-top:12px}

/* ── V-pi2.3 — DEDICATED inspections rail card (full-height) + snapshot + rows + empty state ── */
.pi2-insp-snap{display:flex;gap:8px;margin-bottom:12px}
.pi2-insp-snap-t{flex:1;padding:9px 10px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--app-bg) 5%,transparent);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--chrome-border) 70%,transparent);text-align:center}
.pi2-insp-snap-t b{display:block;font-size:18px;font-weight:840;letter-spacing:-.5px;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.pi2-insp-snap-t span{font-size:9px;font-weight:760;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-top:3px;display:block}
.pi2-insp-snap-t.ok b{color:color-mix(in srgb,var(--color-success) 78%,var(--text-primary))}
.pi2-insp-snap-t.accent b{color:var(--app-accent)}
.pi2-insp-list{display:flex;flex-direction:column;gap:8px}
.pi2-iitem{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:var(--radius-md);background:var(--card-bg);box-shadow:var(--bevel-top),var(--shadow-e1);cursor:pointer;transition:all var(--motion-fast) var(--ease-spring)}
.pi2-iitem:hover{transform:translateY(-1px);box-shadow:var(--bevel-top),var(--shadow-e2)}
.pi2-iico{width:28px;height:28px;flex:none;border-radius:8px}
.pi2-iico svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.pi2-iico.passed{background-color:color-mix(in srgb,var(--color-success) 18%,transparent);color:color-mix(in srgb,var(--color-success) 80%,var(--text-primary))}
.pi2-iico.scheduled,.pi2-iico\.re-inspect{background-color:color-mix(in srgb,var(--app-accent) 16%,transparent);color:var(--app-accent)}
.pi2-iico.failed{background-color:color-mix(in srgb,var(--color-error) 16%,transparent);color:color-mix(in srgb,var(--color-error) 82%,var(--text-primary))}
.pi2-iico.conditional{background-color:color-mix(in srgb,var(--color-warning) 16%,transparent);color:color-mix(in srgb,var(--color-warning) 84%,var(--text-primary))}
.pi2-iid{flex:1;min-width:0}
.pi2-it{font-size:13px;font-weight:680;letter-spacing:-.1px;color:var(--text-primary)}
.pi2-im{font-size:10.5px;color:var(--text-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pi2-ires{font-size:10px;font-weight:760;text-transform:capitalize;padding:4px 10px;border-radius:var(--radius-pill);box-shadow:var(--bevel-top);white-space:nowrap}
.pi2-ires.passed{background:color-mix(in srgb,var(--color-success) 15%,transparent);color:color-mix(in srgb,var(--color-success) 80%,var(--text-primary))}
.pi2-ires.scheduled,.pi2-ires\.re-inspect{background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:color-mix(in srgb,var(--app-accent) 88%,var(--text-primary))}
.pi2-ires.failed{background:color-mix(in srgb,var(--color-error) 15%,transparent);color:color-mix(in srgb,var(--color-error) 82%,var(--text-primary))}
.pi2-ires.conditional{background:color-mix(in srgb,var(--color-warning) 15%,transparent);color:color-mix(in srgb,var(--color-warning) 84%,var(--text-primary))}
/* crafted empty state — panel always present */
.pi2-insp-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:22px 14px 18px;border-radius:var(--radius-md);border:1px dashed color-mix(in srgb,var(--app-accent) 26%,var(--chrome-border));background:color-mix(in srgb,var(--app-accent) 3%,transparent)}
.pi2-insp-empty-ico{width:42px;height:42px;border-radius:13px;background-color:color-mix(in srgb,var(--app-accent) 13%,transparent);color:var(--app-accent);display:grid;place-items:center;margin-bottom:2px}
.pi2-insp-empty-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9}
.pi2-insp-empty-t{font-size:13.5px;font-weight:760;color:var(--text-primary)}
.pi2-insp-empty-s{font-size:11.5px;color:var(--text-muted);line-height:1.5;max-width:230px}
.pi2-insp-empty .pi2-addpill{margin:6px auto 0}
/* V-pi2.4 — on ≤1024 the legacy rule HID the rail (it was disposable insight). Now the rail
   holds FIRST-CLASS inspections → keep it visible, stacked BELOW the permits (DOM order:
   host then rail; grid-area:auto + 1-col already give that). Override the old display:none. */
@media (max-width:1024px){
  #tabCompliance .reg-ws-rail{display:flex !important}
  #tabCompliance .reg-ws{grid-template-columns:1fr}
}
/* the rail inspections card title needs the +Add pill pushed right */
#railCompliance .pfv-ws-card-title{display:flex;align-items:center;gap:7px}
#railCompliance .pfv-ws-card-title .pi2-addpill{margin-left:auto}
/* hide the legacy "Tracked permits" region head (replaced by the pi2 section header w/ pill) +
   the old standalone add-permit summary band */
#tabCompliance .perm-region-head{display:none}
/* ── V-pi2.5 — DEEP inspection detail surface (main section) + raised bottom panel ── */
/* the main Inspections section = a proper RAISED panel (matches Trade Network layering:
   matte → solid panel → cards). Was a flat de-chromed zone. */
#tabCompliance #inspectionList{display:block}
#tabCompliance .modal-section:last-of-type .detail-group{background:var(--surface-grad);box-shadow:var(--bevel-top),var(--shadow-e2);border:.5px solid color-mix(in srgb,var(--chrome-border) 60%,transparent);border-radius:var(--radius-lg);padding:18px}
/* inspection group headers (per-permit) */
.insp-group{margin-bottom:6px}
.insp-group+.insp-group{margin-top:18px}
.insp-group-head{display:flex;align-items:center;gap:10px;margin:0 2px 10px}
.insp-group-lbl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}
.insp-group-ct{font-size:11px;font-weight:650;color:var(--text-secondary);margin-left:auto}
/* the rich inspection card = a raised card on the panel (contacts recipe: card-bg + hairline + e2, lift on hover) */
.insp-cards{display:flex;flex-direction:column;gap:11px}
.insp-card{border-radius:var(--radius-lg);background:var(--card-bg);box-shadow:var(--shadow-e2);border:.5px solid color-mix(in srgb,var(--chrome-border) 55%,transparent);padding:15px 16px;transition:box-shadow var(--motion-base) var(--ease-out),transform var(--motion-fast) var(--ease-spring)}
.insp-card:hover{box-shadow:var(--shadow-e3);transform:translateY(-2px)}
.insp-card-ico{width:36px;height:36px;flex:none;border-radius:11px}
.insp-card-ico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}
/* inline-editable detail grid (scheduled/completed/inspector) */
.insp-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-top:13px}
.insp-field{display:flex;flex-direction:column;gap:5px}
.insp-field-full{margin-top:11px}
.insp-field-lbl{font-size:10px;font-weight:750;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;padding-left:2px}
.insp-resched-hint{font-weight:600;letter-spacing:0;text-transform:none;color:color-mix(in srgb,var(--app-accent) 70%,var(--text-muted))}
.insp-field-in{background:var(--card-bg);border:.5px solid var(--chrome-border);border-radius:var(--radius-md);padding:9px 11px;font:inherit;font-size:13px;color:var(--text-primary);outline:none;box-shadow:var(--bevel-top),inset 0 1px 2px color-mix(in srgb,var(--app-bg) 22%,transparent);transition:border-color var(--motion-fast),box-shadow var(--motion-fast);width:100%;-webkit-appearance:none;appearance:none;font-family:inherit}
.insp-field-in:focus{border-color:color-mix(in srgb,var(--app-accent) 50%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 15%,transparent)}
.insp-notes-in{resize:vertical;min-height:40px;line-height:1.5}
/* inline-editable inspection TYPE — reads as the card title until focused */
.insp-card-type{display:flex;align-items:center;gap:8px}
.insp-type-in{flex:1;min-width:0;font:inherit;font-size:15px;font-weight:740;letter-spacing:-.2px;color:var(--text-primary);background:transparent;border:.5px solid transparent;border-radius:var(--radius-sm);padding:3px 7px;margin-left:-7px;outline:none;transition:all var(--motion-fast)}
.insp-type-in:hover{background:color-mix(in srgb,var(--text-primary) 4%,transparent)}
.insp-type-in:focus{background:var(--card-bg);border-color:color-mix(in srgb,var(--app-accent) 50%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 15%,transparent)}
.insp-type-in::placeholder{color:var(--text-muted);font-weight:600}
@media (max-width:560px){.insp-detail-grid{grid-template-columns:1fr 1fr}}
/* focus flash when the rail / a card is targeted from a cross-link */
.pi2-flash{animation:pi2Flash 1.4s var(--ease-out)}
@keyframes pi2Flash{0%,100%{box-shadow:var(--bevel-top),var(--shadow-e2)}30%{box-shadow:var(--bevel-top),var(--shadow-e3),0 0 0 3px color-mix(in srgb,var(--app-accent) 35%,transparent)}}
@media (prefers-reduced-motion:reduce){.pi2-flash{animation:none}}
/* === end V-pi2 === */
/* "Add permit" disclosure — small affordance once permits exist */
.perm-add-disclosure{margin-top:4px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--text-primary) 3%,transparent)}
.perm-add-disclosure>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:12.5px;font-weight:600;color:var(--app-accent);user-select:none;border-radius:var(--radius-md);transition:background var(--motion-fast)}
.perm-add-disclosure>summary::-webkit-details-marker{display:none}
.perm-add-disclosure>summary:hover{background:color-mix(in srgb,var(--app-accent) 8%,transparent)}
.perm-add-disclosure>summary svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;transition:transform var(--motion-fast)}
.perm-add-disclosure[open]>summary svg.perm-add-chev{transform:rotate(45deg)}
.perm-add-disclosure>.field-grid{padding:4px 12px 12px}

/* ── Inspection cards — full-depth, mirrors the .perm-card vocabulary so permits +
   inspections read as one workspace. Result pill (5 states) · inspector · dates ·
   permit-link chip · per-item pass/fail checklist · inline re-inspect loop. ── */
.insp-cards{display:flex;flex-direction:column;gap:11px}
.insp-card{border-radius:var(--radius-lg);background:var(--surface-grad);box-shadow:var(--bevel-top),var(--shadow-e2);padding:13px 15px 14px;transition:box-shadow var(--motion-fast)}
.insp-card:hover{box-shadow:var(--bevel-top),var(--shadow-e3)}
.insp-card.is-reinspect{border-left:0}                 /* provenance shown via chip, never an edge-strip */
.insp-card-head{display:flex;align-items:flex-start;gap:11px}
.insp-card-ico{width:34px;height:34px;flex-shrink:0;border-radius:9px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--app-accent) 13%,transparent);color:var(--app-accent)}
.insp-card-ico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6}
.insp-card-ico.tone-good{background:color-mix(in srgb,var(--color-success) 15%,transparent);color:color-mix(in srgb,var(--color-success) 80%,var(--text-primary))}
.insp-card-ico.tone-warn{background:color-mix(in srgb,var(--color-warning) 16%,transparent);color:color-mix(in srgb,var(--color-warning) 82%,var(--text-primary))}
.insp-card-ico.tone-bad{background:color-mix(in srgb,var(--color-error) 15%,transparent);color:color-mix(in srgb,var(--color-error) 80%,var(--text-primary))}
.insp-card-id{min-width:0;flex:1}
.insp-card-type{font-size:14.5px;font-weight:700;letter-spacing:-.2px;color:var(--text-primary);line-height:1.25;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.insp-card-meta{font-size:12px;color:var(--text-muted);margin-top:1px}
.insp-card-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
.insp-card-act{appearance:none;border:none;background:transparent;color:var(--text-muted);width:28px;height:28px;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
.insp-card-act:hover{background:var(--chrome-bg-hover);color:var(--text-primary)}
.insp-card-act.danger:hover{background:color-mix(in srgb,var(--color-error) 14%,transparent);color:var(--color-error)}
.insp-card-act svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7}
/* result pill — 5 states */
.insp-stat-pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:var(--radius-pill);font-size:11px;font-weight:700;letter-spacing:.1px}
.insp-stat-pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.istat-scheduled{background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-secondary)}
.istat-passed{background:color-mix(in srgb,var(--color-success) 15%,transparent);color:color-mix(in srgb,var(--color-success) 82%,var(--text-primary))}
.istat-conditional{background:color-mix(in srgb,var(--color-warning) 16%,transparent);color:color-mix(in srgb,var(--color-warning) 84%,var(--text-primary))}
.istat-failed{background:color-mix(in srgb,var(--color-error) 15%,transparent);color:color-mix(in srgb,var(--color-error) 82%,var(--text-primary))}
.istat-re-inspect{background:color-mix(in srgb,var(--color-warning) 14%,transparent);color:color-mix(in srgb,var(--color-warning) 84%,var(--text-primary))}
.insp-card-status{display:flex;align-items:center;gap:7px;margin:11px 0 3px;flex-wrap:wrap}
.insp-stat-select{appearance:none;border:0.5px solid var(--chrome-border);background:var(--chrome-bg);color:var(--text-secondary);border-radius:var(--radius-pill);font-size:11px;font-weight:600;padding:2px 22px 2px 9px;cursor:pointer;background-image:var(--chev-mask-img,none)}
/* permit-link chip + provenance chip */
.insp-link-chip,.insp-prov-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--radius-pill);font-size:10.5px;font-weight:700;cursor:pointer;border:0.5px solid var(--chrome-border);background:var(--chrome-bg);color:var(--text-secondary);transition:background var(--motion-fast),color var(--motion-fast)}
.insp-link-chip:hover{background:color-mix(in srgb,var(--app-accent) 10%,transparent);color:var(--app-accent);border-color:color-mix(in srgb,var(--app-accent) 30%,transparent)}
.insp-link-chip.is-linked{background:color-mix(in srgb,var(--app-accent) 10%,transparent);color:color-mix(in srgb,var(--app-accent) 88%,var(--text-primary));border-color:color-mix(in srgb,var(--app-accent) 28%,transparent)}
.insp-link-chip svg,.insp-prov-chip svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.8}
.insp-prov-chip{cursor:default;background:color-mix(in srgb,var(--color-warning) 12%,transparent);color:color-mix(in srgb,var(--color-warning) 84%,var(--text-primary));border-color:color-mix(in srgb,var(--color-warning) 26%,transparent)}
.insp-card-dates{display:flex;flex-wrap:wrap;gap:5px 16px;margin-top:9px;font-size:11.5px}
/* checklist — per-item pass/fail/na, content-sized (no internal scroller / drag-to-read) */
.insp-checklist{margin-top:11px;border-top:0.5px solid color-mix(in srgb,var(--chrome-border) 70%,transparent);padding-top:10px}
.insp-cl-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.insp-cl-title{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted)}
.insp-cl-summary{font-size:11px;font-weight:700;color:var(--text-secondary)}
.insp-cl-summary .insp-cl-failn{color:color-mix(in srgb,var(--color-error) 82%,var(--text-primary))}
.insp-cl-items{display:flex;flex-direction:column;gap:5px}
.insp-cl-item-row{display:flex;align-items:center;gap:10px;font-size:12.5px;padding:3px 0;flex-wrap:wrap}
.insp-cl-item-txt{flex:1;color:var(--text-secondary);min-width:90px;line-height:1.35}
.insp-cl-item-row.is-fail{background:color-mix(in srgb,var(--color-error) 6%,transparent);border-radius:var(--radius-md);padding:3px 8px;margin:0 -8px}
.insp-cl-item-row.is-fail .insp-cl-item-txt{color:color-mix(in srgb,var(--color-error) 80%,var(--text-primary));font-weight:600}
/* True 3-state segmented result control — recessed track, lifted toned active segment. */
.insp-seg-group{display:inline-flex;flex:none;background:color-mix(in srgb,var(--text-primary) 6%,var(--surface));border-radius:var(--radius-pill);padding:2px;gap:2px;box-shadow:inset 0 1px 2px color-mix(in srgb,var(--text-primary) 8%,transparent)}
.insp-seg{appearance:none;border:0;background:transparent;color:var(--text-muted);font-size:10.5px;font-weight:700;letter-spacing:.2px;padding:3px 10px;min-width:42px;border-radius:var(--radius-pill);cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring),background var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast)}
.insp-seg:hover:not(.is-on){color:var(--text-secondary)}
.insp-seg:active{transform:scale(.94)}
.insp-seg.is-on{box-shadow:var(--shadow-e1),var(--lg-edge);color:#fff}
.insp-seg.s-pass.is-on{background:var(--color-success)}
.insp-seg.s-fail.is-on{background:var(--color-error)}
.insp-seg.s-na.is-on{background:color-mix(in srgb,var(--color-warning) 88%,var(--text-primary));color:#fff}
.insp-cl-del{appearance:none;border:none;background:transparent;color:var(--text-muted);cursor:pointer;width:30px;height:30px;border-radius:var(--radius-sm);flex:none;font-size:13px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.insp-cl-del:hover{background:color-mix(in srgb,var(--color-error) 12%,transparent);color:var(--color-error)}
/* Composer + crafted empty state — off --chrome-bg, icon-led primary-tinted Add. */
.insp-cl-empty{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11.5px;color:var(--text-muted);padding:10px 8px;border:.5px dashed color-mix(in srgb,var(--text-primary) 18%,transparent);border-radius:var(--radius-md);background:color-mix(in srgb,var(--text-primary) 3%,transparent);margin-bottom:2px}
.insp-cl-empty .ic{width:14px;height:14px;opacity:.7}
.insp-cl-add{display:flex;gap:7px;margin-top:9px;align-items:stretch}
.insp-cl-add .field-input{flex:1;font-size:12.5px;padding:6px 11px}
.insp-cl-addbtn{display:inline-flex;align-items:center;gap:5px;appearance:none;border:0;background:color-mix(in srgb,var(--app-accent) 12%,var(--surface));color:var(--app-accent);border-radius:var(--radius-md);font-size:12px;font-weight:600;padding:0 13px;cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring),background var(--motion-fast);box-shadow:var(--shadow-e1),var(--lg-edge)}
.insp-cl-addbtn .ic{width:13px;height:13px}
.insp-cl-addbtn:hover{background:color-mix(in srgb,var(--app-accent) 20%,var(--surface))}
.insp-cl-addbtn:active{transform:scale(.95)}
@media (prefers-reduced-motion:reduce){.insp-seg{transition:background var(--motion-fast),color var(--motion-fast)}.insp-seg:active{transform:none}.insp-cl-addbtn{transition:background var(--motion-fast)}.insp-cl-addbtn:active{transform:none}}
/* failed-inspection rework + inline re-inspect region (content-sized) */
.insp-rework{margin-top:11px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-error) 6%,var(--surface-2,var(--card-bg)));border:0.5px solid color-mix(in srgb,var(--color-error) 20%,var(--chrome-border));padding:10px 12px}
.insp-rework-head{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:color-mix(in srgb,var(--color-error) 80%,var(--text-primary));margin-bottom:7px}
.insp-rework-head svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8}
.insp-rework-list{display:flex;flex-direction:column;gap:4px;margin-bottom:9px}
.insp-rework-row{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-secondary)}
.insp-rework-row::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--color-error);flex:none}
.insp-rework-tasklink{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--app-accent);margin-bottom:9px;cursor:pointer;background:none;border:none;padding:0}
.insp-rework-tasklink:hover{text-decoration:underline}
.insp-rework-actions{display:flex;gap:8px;flex-wrap:wrap}
.insp-reinspect-btn{appearance:none;border:0.5px solid color-mix(in srgb,var(--app-accent) 40%,transparent);background:color-mix(in srgb,var(--app-accent) 10%,transparent);color:var(--app-accent);border-radius:var(--radius-pill);font-size:12px;font-weight:700;padding:5px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.insp-reinspect-btn:hover{background:color-mix(in srgb,var(--app-accent) 16%,transparent)}
.insp-reinspect-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8}
.insp-group-head{display:flex;align-items:center;gap:8px;margin:16px 0 9px;font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted)}
.insp-group-head .igh-count{margin-left:auto;font-weight:700;color:var(--text-secondary)}
.insp-group-head hr{flex:1;border:none;border-top:0.5px solid color-mix(in srgb,var(--chrome-border) 60%,transparent);margin:0}

/* ── Shared register card — replaces the flat .rt-row for the secondary registers
   (Drawings · Meetings · Safety · Equipment · Allowances). Icon-button actions (no
   emoji), an identity header + meta line + chips, optional right-aligned value. Reads
   as one family with .perm-card / .insp-card. Cards size to content. ── */
.reg-cards{display:flex;flex-direction:column;gap:9px}
.reg-card{display:flex;align-items:flex-start;gap:11px;border-radius:var(--radius-lg);background:var(--surface-grad);box-shadow:var(--bevel-top),var(--shadow-e2);padding:11px 14px;transition:box-shadow var(--motion-fast)}
.reg-card:hover{box-shadow:var(--bevel-top),var(--shadow-e3)}
.reg-card.is-alert{box-shadow:var(--bevel-top),var(--shadow-e2),0 0 0 1px color-mix(in srgb,var(--color-error) 30%,transparent)}
.reg-card-ico{width:30px;height:30px;flex:none;border-radius:8px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent)}
.reg-card-ico svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6}
.reg-card-ico.tone-good{background:color-mix(in srgb,var(--color-success) 14%,transparent);color:color-mix(in srgb,var(--color-success) 80%,var(--text-primary))}
.reg-card-ico.tone-warn{background:color-mix(in srgb,var(--color-warning) 15%,transparent);color:color-mix(in srgb,var(--color-warning) 82%,var(--text-primary))}
.reg-card-ico.tone-bad{background:color-mix(in srgb,var(--color-error) 14%,transparent);color:color-mix(in srgb,var(--color-error) 80%,var(--text-primary))}
.reg-card-body{flex:1;min-width:0}
.reg-card-title{font-size:13.5px;font-weight:700;letter-spacing:-.15px;color:var(--text-primary);line-height:1.3;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.reg-card-sub{font-size:11.5px;color:var(--text-muted);margin-top:3px;line-height:1.4}
.reg-card-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;align-items:center}
.reg-card-val{font-size:12px;font-weight:700;color:var(--text-secondary);white-space:nowrap;align-self:center;font-variant-numeric:tabular-nums}
.reg-card-actions{display:flex;align-items:center;gap:3px;flex:none;align-self:flex-start}
.reg-card-act{appearance:none;border:none;background:transparent;color:var(--text-muted);width:27px;height:27px;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
@media (pointer:coarse){.perm-card-act,.insp-card-act,.reg-card-act{min-width:var(--tap-min,44px);min-height:var(--tap-min,44px)}}
.reg-card-act:hover{background:var(--chrome-bg-hover);color:var(--text-primary)}
.reg-card-act.danger:hover{background:color-mix(in srgb,var(--color-error) 14%,transparent);color:var(--color-error)}
.reg-card-act svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7}
/* a labeled pill action (e.g. "→ Tasks", "+ Next") for the richer registers */
.reg-card-pillact{appearance:none;border:0.5px solid var(--chrome-border);background:var(--chrome-bg);color:var(--text-secondary);border-radius:var(--radius-pill);font-size:11px;font-weight:600;padding:3px 10px;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast);white-space:nowrap}
.reg-card-pillact:hover{background:color-mix(in srgb,var(--app-accent) 10%,transparent);color:var(--app-accent);border-color:color-mix(in srgb,var(--app-accent) 28%,transparent)}
/* V-pi2.4 — the rail now holds FIRST-CLASS inspections (not disposable insight). On narrow
   widths it stacks as a full-width column BELOW the permits (natural DOM order: host → rail),
   NOT a horizontal band floated to the top (the old order:-1 reflow). */
@media (max-width:1024px){
  #railCompliance{display:flex;flex-direction:column;order:0}
  #railCompliance>*{flex:0 0 auto;min-width:0}
}
@media (max-width:560px){
  .perm-edit-grid{grid-template-columns:1fr}
  .perm-portals-grid{grid-template-columns:1fr}
}
/* #16 AR dunning / collections strip — overdue invoices + cadence. Severity via tinted
   fill + age pill, NEVER a colored card edge-strip (hard rule). Solid content card. */
.dun-strip{border-radius:var(--radius-lg);background:var(--surface-grad);box-shadow:var(--bevel-top),var(--shadow-e2);padding:12px 14px;margin-bottom:14px}
.dun-head{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:color-mix(in srgb,var(--color-warning) 82%,var(--text-primary));margin-bottom:9px}
.dun-head-ico{display:inline-flex;color:color-mix(in srgb,var(--color-warning) 82%,var(--text-primary))}
.dun-head-ico svg{fill:none;stroke:currentColor}
.dun-rows{display:flex;flex-direction:column;gap:6px}
.dun-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 11px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--text-primary) 4%,transparent)}
.dun-row.dun-soft{background:color-mix(in srgb,var(--color-warning) 8%,transparent)}
.dun-row.dun-warn{background:color-mix(in srgb,var(--color-warning) 14%,transparent)}
.dun-row.dun-bad{background:color-mix(in srgb,var(--color-error) 13%,transparent)}
.dun-row-main{display:flex;align-items:center;gap:9px;min-width:0;flex:1}
.dun-row-id{font-size:12.5px;font-weight:700;color:var(--text-primary);white-space:nowrap}
.dun-row-who{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dun-row-stage{font-size:10.5px;font-weight:600;color:var(--text-muted);white-space:nowrap}
.dun-row-end{display:flex;align-items:center;gap:10px;flex-shrink:0}
.dun-row-amt{font-size:12.5px;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums}
.dun-row-age{font-size:11px;font-weight:700;padding:2px 8px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-secondary);font-variant-numeric:tabular-nums}
.dun-row.dun-bad .dun-row-age{background:color-mix(in srgb,var(--color-error) 20%,transparent);color:color-mix(in srgb,var(--color-error) 84%,var(--text-primary))}
.dun-remind{appearance:none;border:0.5px solid color-mix(in srgb,var(--app-accent) 32%,transparent);background:color-mix(in srgb,var(--app-accent) 11%,transparent);color:var(--app-accent);font-size:11px;font-weight:700;padding:4px 11px;border-radius:var(--radius-pill);cursor:pointer;font-family:inherit;transition:background var(--motion-fast)}
.dun-remind:hover{background:color-mix(in srgb,var(--app-accent) 20%,transparent)}
@media (max-width:560px){.dun-row{flex-wrap:wrap;gap:6px}.dun-row-end{width:100%;justify-content:space-between}}
/* #20 subcontractor buyout strip — estimated vs awarded by trade. Severity via text color +
   status chip, no edge-strip; solid content card. */
.bo-strip{border-radius:var(--radius-lg);background:var(--surface-grad);box-shadow:var(--bevel-top),var(--shadow-e2);padding:12px 14px;margin-bottom:14px}
/* At-issue PO over-budget warning — contained tint pill (no edge-strip), rounded. */
.po-budget-warn{display:flex;align-items:flex-start;gap:9px;margin-top:10px;padding:10px 13px;border-radius:var(--radius-md);font-size:12.5px;line-height:1.45;font-weight:500}
.po-budget-warn[hidden]{display:none}
.po-budget-warn .pbw-ic{flex:0 0 auto;width:16px;height:16px;margin-top:1px}
.po-budget-warn .pbw-strong{font-weight:700}
.po-budget-warn.is-over{background:var(--color-error-bg);color:var(--color-error)}
.po-budget-warn.is-warn{background:var(--color-warning-bg);color:var(--color-warning)}
.bo-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:9px}
.bo-head-title{font-size:13px;font-weight:700;color:var(--text-primary)}
.bo-head-base{font-weight:500;color:var(--text-muted);font-size:11.5px}
.bo-head-tot{font-size:12px;font-weight:700;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.bo-rows{display:flex;flex-direction:column;gap:5px}
.bo-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:7px 11px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--text-primary) 4%,transparent);flex-wrap:wrap}
.bo-row-trade{font-size:12.5px;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:8px;min-width:0}
.bo-row-nums{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.bo-n{font-size:12px;font-weight:600;color:var(--text-secondary);font-variant-numeric:tabular-nums;display:inline-flex;align-items:baseline;gap:5px}
.bo-n-k{font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text-muted)}
.bo-good{color:color-mix(in srgb,var(--color-success) 80%,var(--text-primary))}
.bo-bad{color:color-mix(in srgb,var(--color-error) 80%,var(--text-primary))}
.bo-chip{font-size:9.5px;font-weight:700;padding:1px 7px;border-radius:var(--radius-pill);letter-spacing:.2px;text-transform:uppercase}
.bo-chip-ok{background:color-mix(in srgb,var(--color-success) 15%,transparent);color:color-mix(in srgb,var(--color-success) 80%,var(--text-primary))}
.bo-chip-bad{background:color-mix(in srgb,var(--color-error) 15%,transparent);color:color-mix(in srgb,var(--color-error) 82%,var(--text-primary))}
.bo-chip-warn{background:color-mix(in srgb,var(--color-warning) 16%,transparent);color:color-mix(in srgb,var(--color-warning) 82%,var(--text-primary))}
.bo-chip-open{background:color-mix(in srgb,var(--text-primary) 9%,transparent);color:var(--text-muted)}
@media (max-width:560px){.bo-row{flex-direction:column;align-items:flex-start;gap:5px}.bo-row-nums{gap:12px}}
/* #24 Field Daily Recap card — today's field rollup + post-to-channel. */
.fr-card{border-radius:var(--radius-lg);background:var(--surface-grad);box-shadow:var(--bevel-top),var(--shadow-e2);padding:11px 14px;margin-bottom:12px}
.fr-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.fr-title{font-size:12.5px;font-weight:700;color:var(--text-primary);display:inline-flex;align-items:center;gap:5px}
.fr-title .ic{width:14px;height:14px;color:var(--app-accent)}
.fr-post{appearance:none;border:0.5px solid color-mix(in srgb,var(--app-accent) 32%,transparent);background:color-mix(in srgb,var(--app-accent) 11%,transparent);color:var(--app-accent);font-size:11px;font-weight:700;padding:4px 11px;border-radius:var(--radius-pill);cursor:pointer;font-family:inherit;transition:background var(--motion-fast)}
.fr-post:hover{background:color-mix(in srgb,var(--app-accent) 20%,transparent)}
.fr-chips{display:flex;flex-wrap:wrap;gap:6px}
.fr-chip{display:inline-flex;align-items:baseline;gap:5px;font-size:11.5px;font-weight:600;color:var(--text-secondary);background:color-mix(in srgb,var(--text-primary) 5%,transparent);padding:2px 9px;border-radius:var(--radius-pill);font-variant-numeric:tabular-nums}
.fr-chip-k{font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text-muted)}
.fr-chip-warn{background:color-mix(in srgb,var(--color-warning) 15%,transparent);color:color-mix(in srgb,var(--color-warning) 82%,var(--text-primary))}
.fr-chip-bad{background:color-mix(in srgb,var(--color-error) 14%,transparent);color:color-mix(in srgb,var(--color-error) 82%,var(--text-primary))}
.fr-issues{font-size:11.5px;color:color-mix(in srgb,var(--color-warning) 82%,var(--text-primary));margin-top:7px}
.fr-empty{font-size:12px;color:var(--text-muted)}
/* F18 — 3-week Lookahead block (Overview enhancement). */
.lookahead{margin:6px 0 16px;padding:13px 15px;border-radius:var(--radius-lg);background:var(--surface-grad);border:none;box-shadow:var(--bevel-top),var(--shadow-e2)}
.lookahead-head{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--text-primary);letter-spacing:-.2px;margin-bottom:10px}
.lookahead-count{margin-left:auto;font-size:11.5px;font-weight:500;color:var(--text-muted)}
.lookahead-days{display:flex;flex-direction:column;gap:7px}
.lh-day{display:flex;gap:14px;padding:6px 0;border-top:0.5px solid color-mix(in srgb,var(--chrome-border) 70%,transparent)}
.lh-day:first-child{border-top:0}
.lh-day-date{flex:0 0 110px;font-size:11.5px;font-weight:700;color:var(--text-secondary);font-variant-numeric:tabular-nums;letter-spacing:.1px;padding-top:3px}
.lh-day-past .lh-day-date{color:color-mix(in srgb,var(--color-error) 70%,var(--text-primary))}
.lh-day-today .lh-day-date{color:var(--app-accent)}
.lh-day-items{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.lh-item{display:flex;align-items:center;gap:8px;font-size:12.5px;min-width:0}
.lh-title{flex:1;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lh-kind{flex:0 0 auto;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:1.5px 7px;border-radius:var(--radius-pill);min-width:88px;text-align:center}
.lh-task{background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:color-mix(in srgb,var(--app-accent) 80%,var(--text-primary))}
.lh-stage{background:color-mix(in srgb,#bf5af2 14%,transparent);color:color-mix(in srgb,#bf5af2 80%,var(--text-primary))}
.lh-itb{background:color-mix(in srgb,#ff9f0a 16%,transparent);color:color-mix(in srgb,#ff9f0a 78%,var(--text-primary))}
.lh-sub{background:color-mix(in srgb,var(--color-info,#0a84ff) 14%,transparent);color:color-mix(in srgb,var(--color-info,#0a84ff) 78%,var(--text-primary))}
.lh-insp{background:color-mix(in srgb,#30d158 14%,transparent);color:color-mix(in srgb,#30d158 75%,var(--text-primary))}
.lh-rfi,.lh-tracked{background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-secondary)}
/* Financial Health cashflow mini-chart */
.fhealth-cashflow{margin-top:10px;padding-top:10px;border-top:0.5px solid color-mix(in srgb,var(--chrome-border) 60%,transparent)}
.fhealth-cashflow-head{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.35px;color:var(--text-muted);margin-bottom:6px}
.fhealth-cashflow-svg{display:block;width:100%;height:36px}
.fhealth-cashflow-empty{display:flex;align-items:center;min-height:36px;font-size:12px;font-style:italic;color:var(--text-muted);line-height:1.35}
.fin-ws-detail-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:0.5px solid color-mix(in srgb,var(--chrome-border) 70%,transparent)}
/* 🪼 Commit D — unified invoice action bar. One consistent button style; Delete is a right-aligned danger
   pill (NOT a full-width bar); pay-app doc actions group on the left; approval status reads as a pill. */
.fin-ws-detail-actions .inv-act-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fin-ws-detail-actions .inv-act{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;font-size:12px;font-weight:600;color:var(--text-secondary);background:var(--surface-grad);border:.5px solid color-mix(in srgb,var(--chrome-border) 75%,transparent);border-radius:var(--radius-md);box-shadow:var(--bevel-top),var(--shadow-e1);cursor:pointer;transition:background var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast),transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
.fin-ws-detail-actions .inv-act svg{width:13px;height:13px;flex:0 0 auto;opacity:.85}
.fin-ws-detail-actions .inv-act:hover{background:color-mix(in srgb,var(--app-accent) 8%,var(--card-bg));border-color:color-mix(in srgb,var(--app-accent) 32%,var(--chrome-border));color:var(--text-primary);transform:translateY(-1px);box-shadow:var(--bevel-top),var(--shadow-e2)}
.fin-ws-detail-actions .inv-act:active{transform:translateY(0) scale(.98)}
.fin-ws-detail-actions .inv-act-danger{margin-left:auto;color:var(--color-error)}
.fin-ws-detail-actions .inv-act-danger:hover{background:color-mix(in srgb,var(--color-error) 10%,var(--card-bg));border-color:color-mix(in srgb,var(--color-error) 38%,var(--chrome-border));color:var(--color-error)}
.fin-ws-detail-actions .inv-act-pill{font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:var(--radius-pill)}
.fin-ws-detail-actions .inv-act-pill.ok{color:var(--color-success);background:color-mix(in srgb,var(--color-success) 14%,transparent)}
.fin-ws-detail-actions .inv-act-pill.warn{color:var(--color-warning);background:color-mix(in srgb,var(--color-warning) 14%,transparent)}
.fin-ws-aging-bar{display:flex;height:9px;border-radius:999px;overflow:hidden;margin:4px 0 9px;background:color-mix(in srgb,var(--text-primary) 8%,transparent)}
.fin-ws-aging-seg{height:100%}
.fin-ws-aging-legend{display:flex;flex-direction:column;gap:4px}
.fin-ws-leg{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--text-secondary)}
.fin-ws-leg-dot{width:9px;height:9px;border-radius:2px;flex-shrink:0}
.fin-ws-leg-v{margin-left:auto;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums}
/* 🪼 Commit D — "Owed by counterparty" mini-bars in the invoice rail (uses the counterparty spine). */
.inv-cp-bars{display:flex;flex-direction:column;gap:8px}
.inv-cp-bar-row{display:grid;grid-template-columns:minmax(0,1fr) 64px auto;align-items:center;gap:8px}
.inv-cp-bar-name{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 🐚 §7-C P3.2 — a counterparty row that drills into its cross-project ledger */
.inv-cp-bar-drill{cursor:pointer;border-radius:8px;padding:3px 6px;margin:0 -6px;transition:background .12s}
.inv-cp-bar-drill:hover,.inv-cp-bar-drill:focus-visible{background:color-mix(in srgb,var(--app-accent) 9%,transparent);outline:none}
/* Cross-project contact-ledger overlay */
.cl-modal{max-width:460px;width:calc(100vw - 40px)}
.cl-loading{padding:24px 8px;text-align:center;color:var(--text-tertiary);font-size:13px}
.cl-head{margin-bottom:14px}
.cl-title{font-size:18px;font-weight:700;color:var(--text-primary)}
.cl-sub{font-size:12px;color:var(--text-tertiary);margin-top:2px;text-transform:capitalize}
.cl-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.cl-stat{background:var(--surface-2,rgba(120,120,128,.08));border-radius:11px;padding:10px 12px}
.cl-stat-l{font-size:11px;color:var(--text-tertiary)}
.cl-stat-v{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-primary);margin-top:2px}
.cl-stat-in .cl-stat-v{color:var(--color-success,#34c759)}
.cl-stat-out .cl-stat-v{color:var(--color-warning,#ff9500)}
.cl-co{font-size:12px;color:var(--text-secondary);background:color-mix(in srgb,var(--app-accent) 7%,transparent);border-radius:9px;padding:7px 11px;margin-bottom:12px}
.cl-proj-h{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-tertiary);margin-bottom:6px}
.cl-projs{display:flex;flex-direction:column;gap:4px;max-height:230px;overflow:auto}
.cl-proj-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 9px;border-radius:9px;background:var(--surface-2,rgba(120,120,128,.06))}
.cl-proj-name{font-size:12.5px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.cl-proj-nums{display:flex;gap:5px;flex-shrink:0}
.cl-tag{font-size:11px;font-variant-numeric:tabular-nums;padding:2px 7px;border-radius:6px;font-weight:600}
.cl-tag-in{background:color-mix(in srgb,#34c759 16%,transparent);color:#2a9d47}
.cl-tag-out{background:color-mix(in srgb,#ff9500 16%,transparent);color:#c96f00}
.cl-tag-paid{background:var(--surface-3,rgba(120,120,128,.14));color:var(--text-secondary)}
.inv-cp-bar-track{height:7px;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 8%,transparent);overflow:hidden}
.inv-cp-bar-track i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--app-accent) 80%,#fff),var(--app-accent))}
.inv-cp-bar-v{font-size:12px;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums;text-align:right}
.fin-ws-scurve{margin-top:8px}
.fin-ws-scurve-head{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
/* ── G2 📘 Schedule workspace ─────────────────────────────────────────────── */
.sched-clear-btn{margin-left:auto;background:none;border:0.5px solid var(--chrome-border);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:10px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;padding:3px 9px;cursor:pointer;transition:all var(--motion-fast) var(--ease-out)}
.sched-clear-btn:hover{color:var(--color-error);border-color:color-mix(in srgb,var(--color-error) 50%,transparent);background:var(--color-error-bg)}
.sched-url-input{margin-bottom:4px}
/* Import drop zone — crafted, on-brand affordance (DESIGN.md: empty is a design state). */
.sched-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:20px 14px;border:1.5px dashed color-mix(in srgb,var(--app-accent) 38%,var(--chrome-border));border-radius:var(--radius-lg);background:color-mix(in srgb,var(--app-accent) 5%,transparent);cursor:pointer;text-align:center;transition:all var(--motion-base) var(--ease-spring)}
.sched-drop:hover{border-color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 9%,transparent);transform:translateY(-1px)}
.sched-drop-over{border-color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 14%,transparent);box-shadow:var(--shadow-e2)}
.sched-drop-icon{width:24px;height:24px;color:var(--app-accent);margin-bottom:2px}
.sched-drop-title{font-size:13px;font-weight:600;color:var(--text-primary)}
.sched-drop-sub{font-size:11px;color:var(--text-muted)}
/* Master task list */
.sched-mtask-list{display:flex;flex-direction:column;gap:2px;max-height:520px;overflow-y:auto;margin:0 -6px;padding:0 6px}
.sched-mtask{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:var(--radius-md);cursor:pointer;transition:background var(--motion-fast) var(--ease-out)}
.sched-mtask:hover{background:var(--surface-2)}
.sched-mtask-sel{background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
.sched-mtask-bar{width:3px;align-self:stretch;border-radius:2px;flex-shrink:0;min-height:26px}
.sched-mtask-body{flex:1;min-width:0}
.sched-mtask-name{font-size:12.5px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sched-mtask-meta{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--text-muted);margin-top:1px}
.sched-mtask-wbs{font-variant-numeric:tabular-nums;background:var(--surface-2);border-radius:4px;padding:0 4px;font-weight:600}
.sched-mtask-pct{font-size:11px;font-weight:700;color:var(--text-secondary);font-variant-numeric:tabular-nums;flex-shrink:0}
.sched-mtask-pct-done{color:var(--color-success)}
/* Gantt detail region */
.sched-detail-card{display:flex;flex-direction:column;min-height:0;padding:14px 0 0}
.sched-detail-card .pfv-ws-card-title{padding:0 16px}
.sched-gantt-header-row{padding:0 8px}
.sched-gantt-rows-scroll{overflow:auto;max-height:540px;position:relative;padding:0 8px 8px}
.sched-task-detail{margin:8px 16px 16px;padding:12px 14px;background:var(--surface-2);border-radius:var(--radius-md);border:0.5px solid var(--chrome-border)}
.sched-td-name{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:10px}
.sched-td-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 16px}
.sched-td-cell{min-width:0}
.sched-td-lbl{font-size:9.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text-muted);margin-bottom:2px}
.sched-td-val{font-size:12.5px;font-weight:600;color:var(--text-primary);font-variant-numeric:tabular-nums;word-break:break-word}
/* Rail */
.sched-rail-empty,.sched-rail-note{font-size:11.5px;color:var(--text-muted);line-height:1.5}
.sched-rail-note{margin-top:8px;padding-top:8px;border-top:0.5px solid color-mix(in srgb,var(--chrome-border) 60%,transparent)}
.sched-rail-chart{margin-top:4px}
/* Empty state */
.sched-empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;padding:26px 16px}
.sched-empty-icon{width:30px;height:30px;color:color-mix(in srgb,var(--app-accent) 55%,var(--text-muted));margin-bottom:2px}
.sched-empty-title{font-size:13.5px;font-weight:600;color:var(--text-primary)}
.sched-empty-sub{font-size:11.5px;color:var(--text-muted);line-height:1.5;max-width:240px}
@media (max-width:1100px){.sched-td-grid{grid-template-columns:repeat(2,1fr)}}
/* ===== Project Schedule · Pass 2 (2026-06-05) — baseline-vs-actual phase gantt ===== */
#schedP2{min-width:0}
/* lead vitals */
.sched-lead{border-radius:18px;padding:16px 20px;display:flex;align-items:center;gap:28px;flex-wrap:wrap;background:var(--frost-bg-strong,color-mix(in srgb,var(--card-bg) 88%,transparent));-webkit-backdrop-filter:var(--frost-blur);backdrop-filter:var(--frost-blur);box-shadow:var(--shadow-e2);border:.5px solid rgba(0,0,0,.05);margin-bottom:16px}
.sched-lead .sl-head{display:flex;flex-direction:column;gap:2px;padding-right:24px;border-right:.5px solid var(--chrome-border);min-width:0}
.sched-lead .sl-kicker{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--app-accent)}
.sched-lead .sl-title{font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--text-primary)}
.sched-lead .sl-sub{font-size:12px;color:var(--text-secondary);font-weight:600}
.sched-lead .sl-sub b{color:var(--text-primary)}
.sched-lead .sl-cell{display:flex;flex-direction:column;gap:1px}
.sched-lead .sl-cell .slc-v{font-size:22px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1;color:var(--text-primary)}
.sched-lead .sl-cell .slc-l{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
.sched-lead .sl-cell.slip{border-radius:13px;padding:9px 13px;margin:-9px -4px;background:linear-gradient(160deg,color-mix(in srgb,var(--color-warning,#f59e0b) 20%,var(--card-bg)),color-mix(in srgb,var(--color-warning,#f59e0b) 7%,var(--card-bg)));box-shadow:inset 0 1px 0 rgba(255,255,255,.6),var(--shadow-e1)}
.sched-lead .sl-cell.slip .slc-v{color:#b45309}
.sched-lead .sl-cell.slip .slc-l{color:#8a5a12}
.sched-lead .sl-cell.ahead{border-radius:13px;padding:9px 13px;margin:-9px -4px;background:linear-gradient(160deg,color-mix(in srgb,var(--color-success,#30d158) 18%,var(--card-bg)),color-mix(in srgb,var(--color-success,#30d158) 6%,var(--card-bg)));box-shadow:inset 0 1px 0 rgba(255,255,255,.6),var(--shadow-e1)}
.sched-lead .sl-cell.ahead .slc-v{color:#137a4b}
.sched-lead .sl-cell.ahead .slc-l{color:#1a6b42}
.sched-p2-row{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;align-items:start}
/* phase gantt */
.pgantt-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.pgantt-head h3{font-size:16px;font-weight:800;letter-spacing:-.01em;margin:0;color:var(--text-primary)}
/* §7 easy-Gantt — inline "Add stage" row on the Phase Timeline. Rounded, theme-adaptive,
   sits on a quiet inset surface; collapses fields gracefully on narrow widths. */
.sched-add-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 11px;margin-bottom:12px;border-radius:12px;background:var(--surface-2);border:.5px solid var(--chrome-border)}
.sched-add-row .sched-add-name{flex:1;min-width:160px;font-family:inherit;font-size:13px;padding:7px 11px;border-radius:9px;border:.5px solid var(--chrome-border);background:var(--surface);color:var(--text-primary);outline:none;transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
.sched-add-row .sched-add-name:focus{border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 18%,transparent)}
.sched-add-row .sched-add-date{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em}
.sched-add-row .sched-add-date input{font-family:inherit;font-size:12.5px;padding:6px 8px;border-radius:8px;border:.5px solid var(--chrome-border);background:var(--surface);color:var(--text-primary);outline:none}
.sched-add-row .sched-add-date input:focus{border-color:var(--app-accent)}
.sched-add-row .sched-add-btn{appearance:none;border:0;font-family:inherit;font-size:12.5px;font-weight:700;padding:8px 16px;border-radius:999px;background:var(--app-accent);color:var(--on-accent,#fff);cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring),opacity var(--motion-fast)}
.sched-add-row .sched-add-btn:hover{opacity:.92}
.sched-add-row .sched-add-btn:active{transform:scale(.96)}
.pgantt{position:relative}
.pg-months{display:grid;margin-bottom:8px}
.pg-months div{font-size:10.5px;font-weight:800;color:var(--text-muted);border-left:.5px solid var(--chrome-border);padding-left:6px}
.pg-row{display:grid;grid-template-columns:160px 1fr;align-items:center;min-height:44px}
.pg-lbl{font-size:12px;font-weight:700;line-height:1.15;padding-right:10px;color:var(--text-primary)}
.pg-lbl .pgl-phase{font-size:10px;font-weight:700;display:flex;align-items:center;gap:5px;margin-top:2px;color:var(--text-muted)}
.pg-lbl .pgl-phase .d{width:7px;height:7px;border-radius:999px;flex-shrink:0}
.pg-track{position:relative;height:44px}
.pg-track .vl{position:absolute;top:0;bottom:0;width:.5px;background:var(--chrome-border)}
.pg-base{position:absolute;top:11px;height:7px;border-radius:999px;background:var(--surface-3,#d1d1d6)}
.pg-actual{position:absolute;top:21px;height:13px;border-radius:7px;background:linear-gradient(180deg,color-mix(in srgb,#fff 24%,var(--pc)),var(--pc) 55%,color-mix(in srgb,#000 12%,var(--pc)));box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 6px -2px color-mix(in srgb,var(--pc) 60%,transparent)}
.pg-actual.slip{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 1.5px color-mix(in srgb,var(--color-error,#ef4444) 60%,transparent)}
.pg-today{position:absolute;width:2px;background:var(--app-accent);z-index:3}
.pg-ms{position:absolute;top:50%;transform:translate(-50%,-50%) rotate(45deg);width:11px;height:11px;border-radius:3px;background:var(--msc,#10b981);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 5px -1px rgba(0,0,0,.3);z-index:2}
.pg-legend{font-size:11.5px;font-weight:600;color:var(--text-secondary)}
/* milestone list */
.ms-row{display:flex;align-items:center;gap:11px;padding:10px 6px;border-bottom:.5px solid color-mix(in srgb,var(--app-accent) 3%,rgba(0,0,0,.05))}
.ms-row:last-child{border-bottom:0}
.ms-dia{width:14px;height:14px;border-radius:3px;transform:rotate(45deg);flex:0 0 14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.ms-t{font-size:12.5px;font-weight:700;color:var(--text-primary)}
.ms-d{font-size:11px;color:var(--text-secondary)}
.ms-status{margin-left:auto;font-size:10px;font-weight:800;padding:2px 9px;border-radius:999px;flex-shrink:0}
/* import affordance */
.import-card{border-radius:16px;padding:16px;background:color-mix(in srgb,var(--app-accent) 4%,var(--card-bg));border:1.5px dashed color-mix(in srgb,var(--app-accent) 28%,rgba(0,0,0,.08));margin-bottom:14px}
.import-card.over{background:color-mix(in srgb,var(--app-accent) 10%,var(--card-bg));border-color:color-mix(in srgb,var(--app-accent) 55%,transparent)}
.import-card .ic-t{font-size:13px;font-weight:800;display:flex;align-items:center;gap:8px;color:var(--text-primary)}
.import-card .ic-s{font-size:11.5px;color:var(--text-secondary);margin:4px 0 10px}
.import-card .ic-formats{display:flex;gap:6px;flex-wrap:wrap}
.import-card .fmt{font-size:10px;font-weight:800;padding:3px 9px;border-radius:999px;background:var(--surface-2,#e5e5ea);color:var(--text-secondary)}
@media (max-width:980px){.sched-p2-row{grid-template-columns:1fr}.pg-row{grid-template-columns:120px 1fr}.pg-lbl{font-size:11px}}
/* 📔 C3 — Schedule page: full-width interactive gantt hero + adaptive analytics grid (kills the
   old one-sided rail stack that left the entire left column an empty void). */
.sched-hero-gantt{margin:0 0 14px}
/* legacy flat pile (kept for any other caller); the schedule page now uses banded groups below */
.sched-mod-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:14px;align-items:start}
.sched-mod-grid > .rt-panel-solid,.sched-mod-grid .rt-panel-solid{margin-top:0}
.sched-mod-grid > div:empty{display:none}
@media (max-width:820px){.sched-mod-grid{grid-template-columns:1fr}}
/* ── Schedule-page analytics: banded, grouped layout (replaces the flat auto-fit pile) ── */
.sched-lead-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px;align-items:start;margin-bottom:18px}
.sched-lead-grid > .rt-panel-solid,.sched-lead-grid .surf,.sched-lead-grid > .rt-panel-solid.rt-panel-solid{margin-top:0}
.sched-band{margin:0 0 20px}
.sched-band:last-child{margin-bottom:2px}
.sched-band-h{display:flex;align-items:baseline;gap:10px;margin:0 2px 10px;padding-bottom:7px;border-bottom:.5px solid color-mix(in srgb,var(--text-primary) 9%,transparent)}
.sched-band-t{font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--text-primary)}
.sched-band-s{font-size:11.5px;color:var(--text-muted);font-weight:500}
.sched-band-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px;align-items:start}
.sched-band-grid > .rt-panel-solid{margin-top:0!important}
.sched-band-grid > div:empty{display:none}
/* the Location Views band is a single wide chart surface — let it use the full row */
.sched-band[data-band="views"] .sched-band-grid{grid-template-columns:1fr}
@media (max-width:820px){.sched-lead-grid,.sched-band-grid{grid-template-columns:1fr}}
.sl-cell.sl-cell-door{cursor:pointer}
/* pass-3: group label matches Contacts .cdr-grp (11px / 800 / .09em / text-secondary) */
.pfv-sb-group{padding:13px 10px 6px;color:var(--text-secondary);font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.pfv-sb-group:first-child{padding-top:2px}
/* 2026-05-22 📘 width was 100% PLUS 6px side margins → the item was 12px wider
   than the sidebar, and nowrap labels could overflow, causing the iPad
   horizontal drag. Keep full width (so the unread dot stays right-aligned) but
   subtract the margins via calc + box-sizing, and ellipsis the label. */
/* pass-3: rail item typography matches Contacts .cdr-item (13px / 600 / text-secondary) */
.pfv-sb-item{display:flex;align-items:center;gap:9px;width:calc(100% - 12px);text-align:left;background:transparent;border:none;font-family:inherit;font-size:13px;font-weight:600;color:var(--text-secondary);cursor:pointer;padding:8px 10px;white-space:nowrap;overflow:hidden;border-radius:10px;margin:1px 6px;box-sizing:border-box;transition:background var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-spring)}
.pfv-sb-item:active{transform:scale(.97)}
.pfv-sb-item > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pfv-sb-item:not(.active):hover{background:var(--hover-overlay,rgba(0,0,0,.04));color:var(--text-primary)}
.pfv-sb-item svg{width:15px;height:15px;flex-shrink:0;opacity:.78}
.pfv-sb-item:not(.active):hover svg{opacity:1}
/* Active wins over hover/press on every engine — a beveled accent-gradient pill
   (not a flat block) so it reads premium and snaps straight to final on click. */
/* pass-3: active item = white raised pill + NEUTRAL dark text/icon (matches Contacts .cdr-item.is-active) */
.pfv-sb-item.active,.pfv-sb-item.active:hover,.pfv-sb-item.active:focus{
  background:var(--card-bg)!important;color:var(--text-primary)!important;font-weight:650;
  box-shadow:var(--shadow-e1)}
.pfv-sb-item.active svg{opacity:.9;color:var(--text-primary)}
.pfv-sb-dot{width:6px;height:6px;border-radius:50%;background:var(--app-danger);margin-left:auto;flex-shrink:0}
/* Live attention badge — the count pill on a sidebar nav item (overdue tasks,
   open ITBs, pending COs, overdue invoices). Pushes to the trailing edge; the
   label flex-grows + ellipsizes so the count never gets clipped. */
.pfv-sb-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pfv-sb-badge{flex-shrink:0;margin-left:8px;min-width:17px;height:17px;padding:0 5px;border-radius:9px;font-size:10.5px;font-weight:700;line-height:17px;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:-.2px}
.pfv-sb-badge-alert{background:var(--color-error);color:#fff}
.pfv-sb-badge-warn{background:color-mix(in srgb,var(--color-warning) 22%,transparent);color:var(--color-warning)}
.pfv-sb-badge-go{background:color-mix(in srgb,var(--app-accent) 16%,transparent);color:var(--app-accent)}
/* On the active (accent-filled) item, badges invert to read on the accent bg. */
.pfv-sb-item.active .pfv-sb-badge{background:color-mix(in srgb,#fff 26%,transparent);color:var(--on-accent)}
/* Hero masthead — the page's most-seen element. Pushed to max material per DESIGN.md:
   a real lit-glass pane (crisp top specular hairline + layered top-sheen and bottom
   vignette over the phase-colored gradient), commanding contract-value metric. */
.pfv-hero-band{padding:18px 22px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow-e3),inset 0 1.5px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(0,0,0,.22)}
/* richer material: a top specular sweep + a soft secondary light on the right + a fine diagonal sheen pattern + base vignette */
.pfv-hero-band::after{content:'';position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(135% 110% at 12% -16%,rgba(255,255,255,.34),transparent 50%),
  radial-gradient(90% 120% at 100% 8%,rgba(255,255,255,.16),transparent 46%),
  repeating-linear-gradient(125deg,rgba(255,255,255,.05) 0 2px,transparent 2px 9px),
  linear-gradient(180deg,transparent 54%,rgba(0,0,0,.2))}
/* subtle ghosted phase glyph filling the dead middle space */
.pfv-hero-band::before{content:'';position:absolute;right:30%;top:50%;transform:translateY(-50%);width:220px;height:220px;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.10),transparent 62%);opacity:.8}
.pfv-hero-tile{width:46px;height:46px;border-radius:var(--radius-md);background:linear-gradient(160deg,rgba(255,255,255,.26),rgba(255,255,255,.12));box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 .5px rgba(255,255,255,.18),0 1px 3px rgba(0,0,0,.18);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.pfv-hero-tile svg{width:22px;height:22px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}
.pfv-hero-row{display:flex;align-items:center;gap:12px;position:relative}
.pfv-hero-name{font-size:21px;font-weight:800;letter-spacing:-.4px;text-shadow:0 1px 2px rgba(0,0,0,.16)}
.pfv-hero-sub{font-size:11px;opacity:.88;margin-top:1px}
.pfv-hero-stat{margin-left:auto;text-align:right}
.pfv-hero-stat-val{font-size:28px;font-weight:800;letter-spacing:-1px;font-variant-numeric:tabular-nums;line-height:1;text-shadow:0 1px 3px rgba(0,0,0,.2)}
.pfv-hero-stat-label{font-size:9.5px;font-weight:700;opacity:.82;letter-spacing:.5px;text-transform:uppercase;margin-top:3px}
/* V88 — stage progress rail reads as a real Apple stepper: larger dots, semantic
   done/current states with a glow on the active step, a progress-fill connector,
   and legible labels (upcoming no longer washed-out). */
.pfv-tl-eyebrow{display:flex;align-items:baseline;gap:8px;padding:12px 22px 0}
.pfv-tl-eyebrow-lbl{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:color-mix(in srgb,var(--text-primary) 52%,transparent)}
.pfv-tl-eyebrow-count{font-size:11px;font-weight:600;color:color-mix(in srgb,var(--text-primary) 38%,transparent);font-variant-numeric:tabular-nums}
.pfv-tl-row{display:flex;align-items:flex-start;padding:10px 22px 12px;gap:0;font-size:10px;overflow-x:auto}
.pfv-tl-step{text-align:center;min-width:70px;flex:1}
.pfv-tl-dot{width:22px;height:22px;border-radius:50%;margin:0 auto 5px;line-height:22px;font-size:10px;font-weight:700;background:var(--surface-3,var(--chrome-bg));color:var(--text-muted);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--text-primary) 14%,transparent);transition:background var(--motion-base) var(--ease-out),box-shadow var(--motion-base) var(--ease-out)}
.pfv-tl-dot.done{background:var(--color-success);color:#fff;box-shadow:0 1px 4px color-mix(in srgb,var(--color-success) 40%,transparent)}
.pfv-tl-dot.current{background:var(--app-accent);color:var(--on-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--app-accent) 22%,transparent),0 2px 8px color-mix(in srgb,var(--app-accent) 40%,transparent)}
.pfv-tl-label{color:color-mix(in srgb,var(--text-primary) 60%,transparent);white-space:nowrap;font-weight:500;letter-spacing:-.05px}
.pfv-tl-step.done .pfv-tl-label{color:color-mix(in srgb,var(--text-primary) 80%,transparent);font-weight:600}
.pfv-tl-step.current .pfv-tl-label{color:var(--text-primary);font-weight:700}
/* Mobile: stage labels were colliding (flex:1 squished evenly-spaced steps below their
   label width). Let steps size to content + scroll horizontally so labels never overlap. */
@media(max-width:640px){
  .pfv-tl-row{gap:14px;padding-left:16px;padding-right:16px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .pfv-tl-step{flex:0 0 auto;min-width:62px;scroll-snap-align:start}
  .pfv-tl-label{font-size:9.5px}
}
.pfv-tl-bar{height:3px;flex:1;background:var(--chrome-border);margin-top:9.5px;border-radius:2px;overflow:hidden}
.pfv-tl-bar.done{background:var(--color-success)}
.pfv-tl-bar.done{background:var(--ok,#34c759)}
/* ── Mobile pfv (Task 2.15) ──
   At ≤640px the 54px icon-only sidebar is too cramped — replace it with a
   horizontal scroll-snap chip strip at the top of .pfv-content. Hero band
   stacks single-column, phase timeline keeps horizontal scroll, Overview
   widget grid is already 1fr at ≤640px (line below). Back/as-modal buttons
   meet --tap-min. Desktop unchanged. */
.pfv-section-strip{display:none}
@media (max-width: 640px) {
  /* Hide the desktop sidebar entirely on phones — replaced by the chip strip
     rendered INSIDE .pfv-content (sticky-top, scrolls with content). */
  .pfv-sidebar{display:none}
  .pfv-content{padding:0; -webkit-overflow-scrolling:touch}
  /* The relocated .modal-body is the scrolling content — pad it for phones.
     2026-05-17 📘 Commit C P0 #3: bottom padding now covers tabbar + FAB +
     safe-area so the last row of every PFV tab (Overview/Budget/Files/etc)
     stays reachable above the tabbar. Was: var(--space-4) (32px) → permanently
     hid ~13px under the tabbar + entire home-indicator zone. */
  .pfv-content > .modal-body{
    padding:
      var(--space-2)
      var(--mobile-gutter)
      calc(var(--mobile-bottom-pad) + env(safe-area-inset-bottom, 0));
  }
  /* Back + as-modal buttons: hit --tap-min on phones. Compact label "Modal"
     replaces the longer "Open as modal" label via a CSS-only swap. */
  .pfv-backbar{padding:6px var(--mobile-gutter); gap:6px}
  .pfv-back-btn{
    min-height:var(--tap-min); min-width:var(--tap-min);
    padding:8px 10px; font-size:14px;
  }
  .pfv-as-modal-btn{
    min-height:var(--tap-min); min-width:var(--tap-min);
    padding:8px 10px; font-size:12px;
  }
  /* Hero band: stack the row into a single column on phones. The stat block
     drops below the name/sub-row instead of right-aligned. */
  .pfv-hero-band{padding:var(--space-3) var(--mobile-gutter)}
  .pfv-hero-row{flex-direction:column; align-items:flex-start; gap:var(--space-2)}
  .pfv-hero-stat{margin-left:0; text-align:left; align-self:stretch}
  .pfv-hero-name{font-size:18px}
  /* Phase timeline: already scrolls horizontally via .pfv-tl-row's overflow-x.
     Tighten padding for phones and let it use the full width. */
  .pfv-tl-row{padding:10px var(--mobile-gutter); -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain}
  /* Section chip strip — sticky to the top of .pfv-content, sits above the
     relocated .modal-body. Reuses the modal-tabs / mobile-board-picker
     pattern: scroll-snap-type:x proximity, --tap-min chips, edge-fade. */
  .pfv-section-strip{
    display:flex;
    gap:6px;
    padding:8px var(--mobile-gutter);
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    background:var(--card-bg);
    border-bottom:0.5px solid var(--chrome-border);
    position:sticky; top:0; z-index:40;
    scrollbar-width:none;
    flex-shrink:0;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);
            mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);
  }
  .pfv-section-strip::-webkit-scrollbar{display:none}
  .pfv-section-chip{
    flex:0 0 auto;
    scroll-snap-align:start;
    min-height:var(--tap-min);
    padding:8px 12px;
    border-radius:var(--radius-pill);
    border:0.5px solid var(--chrome-border);
    background:var(--card-bg);
    color:var(--text-primary);
    font-size:13px;
    font-weight:500;
    letter-spacing:-.1px;
    white-space:nowrap;
    cursor:pointer;
    font-family:inherit;
    display:inline-flex;
    align-items:center;
    gap:6px;
    transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast);
  }
  .pfv-section-chip svg{width:13px;height:13px;flex-shrink:0}
  .pfv-section-chip:not(.active):hover{background:var(--chrome-bg-hover)}
  .pfv-section-chip.active{
    background:var(--app-accent);
    color:var(--on-accent);
    border-color:var(--app-accent);
    box-shadow:0 1px 2px color-mix(in srgb, var(--app-accent) 25%, transparent);
    font-weight:600;
  }
  /* Subtle separator between the 5 sidebar groups in the chip strip. */
  .pfv-section-strip-sep{
    flex:0 0 auto;
    width:1px;
    height:24px;
    background:var(--chrome-border);
    align-self:center;
    margin:0 2px;
  }
  /* PFV mobile touch-target pass (2026-05-27 📘) — audit found sub-28px taps in
     Tasks (checkboxes/drill stats/bar+age rows) + Notes (action btns). Keep the
     VISUAL size tasteful; expand the HIT AREA to a comfortable touch zone
     (DESIGN.md: a control's hit area can exceed its visual size). */
  /* Task checkbox: 20px circle visually, taller tap via an invisible expander.
     Expand vertically (full 44px) + slightly left, but NOT rightward into the
     row's title — the row has its own onclick (open task) distinct from the
     checkbox's (toggle done), so a rightward-bleeding expander would hijack
     title taps. Width capped to the circle + small left lead. */
  .task-ws-check{position:relative}
  .task-ws-check::after{content:'';position:absolute;top:50%;left:-8px;transform:translateY(-50%);width:calc(100% + 8px);height:44px}
  /* Drill stat rows / task bar + age rows: comfortable min-height + roomy hit pad. */
  .pfv-ws-stat{min-height:40px;padding-top:9px;padding-bottom:9px}
  .task-ws-bar-row,.task-ws-age-row{min-height:38px;padding-top:7px;padding-bottom:7px}
  /* Note action buttons: full tap target (were 3×6 padding → ~20px tall). */
  .note-action-btn{min-width:var(--tap-min);min-height:var(--tap-min);padding:8px;font-size:15px;display:inline-flex;align-items:center;justify-content:center}
  /* PFV workspace cards: roomier padding + bottom breathing room on phones. */
  .pfv-ws-card{padding:14px 14px}
  .pfv-ws{gap:14px}
  /* Mobile legibility floor (2026-05-27 📘) — audit found sub-10px label text on
     Overview/Stages tabs (8.5–9.5px). Desktop density is fine; on phones bump the
     smallest uppercase/micro labels to a ~10.5px legible floor. Tracking labels
     stay "labels" — just readable at arm's length. */
  /* #pfvContent prefix raises specificity above the base label rules that are
     declared LATER in the file (donut-center-sub @7629, pfv-fin-vlabel) and
     would otherwise win at equal specificity. */
  #pfvContent .mov-hero-score-lbl,#pfvContent .mov-step-label,#pfvContent .stage-ws-stat-lbl,#pfvContent .donut-center-sub,#pfvContent .pfv-fin-vlabel{font-size:10.5px}
  #pfvContent .mov-metric-lbl{font-size:11px}
  /* Cramped grids → stack on phones: stage form fields (2-col→1), SoV/retention
     stat row (3-col→2 so each cell isn't ~115px). */
  .task-ws-field-grid{grid-template-columns:1fr;gap:12px}
  .ret-stat-row{grid-template-columns:1fr 1fr}
}
/* ── H36 Phase 2: customizable Overview widget board ── */
.pfv-ov-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.pfv-ov-title{font-size:15px;font-weight:600;color:var(--text-primary);letter-spacing:-.2px;margin-right:auto}
.pfv-ov-btn{display:inline-flex;align-items:center;gap:5px;background:var(--card-bg);border:0.5px solid var(--chrome-border);color:var(--text-secondary);font-size:11.5px;font-family:inherit;cursor:pointer;padding:5px 11px;border-radius:var(--radius-sm);transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast)}
.pfv-ov-btn:hover{background:var(--chrome-bg-hover);color:var(--text-primary)}
.pfv-ov-btn:active{transform:scale(.97)}
.pfv-ov-btn.active{background:var(--accent-tint);color:var(--app-accent);border-color:transparent}
.pfv-ov-btn svg{width:12px;height:12px}
/* quick-action bar */
.pfv-qa-bar{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
/* V133 — quick-action buttons now carry the same elevation language as the rest of the modal's
   pressable controls (.action-tile / .mov-widget): a subtle bevel + resting shadow, a hover lift,
   a press tuck. Was flat (border-as-spine, no shadow) on desktop while everything around them
   levitated → the "some elements levitate, others flat" inconsistency Gavin flagged. Primary
   (Add Task) keeps the accent fill + a slightly stronger lift so hierarchy stays intact. */
.pfv-qa-btn{display:inline-flex;align-items:center;gap:5px;background:var(--surface-grad,var(--card-bg));border:0.5px solid var(--chrome-border);color:var(--text-primary);font-size:11.5px;font-family:inherit;cursor:pointer;padding:6px 12px;border-radius:var(--radius-md);box-shadow:var(--bevel-top),var(--shadow-e1);transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast),border-color var(--motion-fast)}
.pfv-qa-btn:hover{background:var(--chrome-bg-hover);transform:translateY(-1px);box-shadow:var(--bevel-top),var(--shadow-e2);border-color:color-mix(in srgb,var(--app-accent) 28%,var(--chrome-border))}
.pfv-qa-btn:active{transform:scale(.97);box-shadow:var(--bevel-top),var(--shadow-e1)}
.pfv-qa-btn.primary{background:var(--app-accent);color:var(--on-accent);border-color:transparent;box-shadow:var(--bevel-top),0 1px 3px color-mix(in srgb,var(--app-accent) 32%,transparent),var(--shadow-e1)}
.pfv-qa-btn.primary:hover{background:var(--app-accent);transform:translateY(-1px);box-shadow:var(--bevel-top),0 3px 8px color-mix(in srgb,var(--app-accent) 36%,transparent),var(--shadow-e2)}
.pfv-qa-btn svg{width:13px;height:13px}
/* 2026-05-22 📘 Mobile Overview quick-actions → clean Apple 2×2 tile grid.
   The flex-wrap row left a lonely 4th pill; on phones use an even 2-column grid
   of card tiles (44px tap target, soft elevation, primary tinted) that reads like
   an iOS action grid. Larger text, generous spacing. */
@media (max-width: 640px) {
  .pfv-qa-bar{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
  .pfv-qa-btn{justify-content:center;min-height:48px;font-size:15px;font-weight:600;letter-spacing:-.2px;border-radius:var(--radius-md);border:none;gap:7px;box-shadow:var(--bevel-top),var(--shadow-e1)}
  .pfv-qa-btn svg{width:16px;height:16px}
  .pfv-qa-btn.primary{box-shadow:0 1px 2px rgba(0,0,0,.12),0 6px 18px -4px color-mix(in srgb,var(--app-accent) 45%,transparent),0 0 0 0.5px color-mix(in srgb,var(--app-accent) 40%,transparent)}
  .pfv-qa-btn:active{transform:scale(.97)}
  /* Overview header row reads as an iOS section header */
  .pfv-ov-toolbar{margin-bottom:12px}
  .pfv-ov-title{font-size:20px;font-weight:700;letter-spacing:-.4px}
  .pfv-ov-btn{min-height:34px;font-size:13px;padding:6px 12px;border-radius:var(--radius-pill)}
  .pfv-ov-btn svg{width:13px;height:13px}
}
/* widget grid */
.pfv-ov-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
/* 2026-05-22 📘 Dropped the 3px accent left-border spine — it read as clutter
   (esp. on the blocker/attention widget). Cards are defined by their hairline +
   shadow, Apple-style, not a colored edge. */
.pfv-ov-widget{background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);padding:13px 14px;position:relative;overflow:hidden;box-shadow:var(--shadow-e1);transition:box-shadow var(--motion-base) var(--ease-out),transform var(--motion-fast) var(--ease-out)}
.pfv-ov-widget:hover{box-shadow:var(--shadow-e2)}
.pfv-ov-widget[data-w="2"]{grid-column:span 2}
.pfv-ov-widget[data-w="3"]{grid-column:span 3}
.pfv-ov-widget-title{font-size:11.5px;font-weight:600;color:var(--text-primary);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.pfv-ov-widget-title svg{width:13px;height:13px;color:var(--app-accent)}
.pfv-ov-widget-body{font-size:11.5px;color:var(--text-primary)}
.pfv-ov-row{padding:3px 0;border-bottom:0.5px solid var(--chrome-border)}
.pfv-ov-row:last-child{border-bottom:none}
.pfv-ov-empty{font-size:11.5px;color:var(--text-muted);padding:4px 0}
/* V92 — Overview Financials widget */
.pfv-fin-widget{display:flex;flex-direction:column}
.pfv-fin-money{display:flex;flex-direction:column;gap:5px;margin:8px 0 4px}
/* V134 — money row wraps gracefully so the trailing "unpaid/out" tag never overflows the rounded
   edge on a narrow card (Gavin: "$60,090 out" was spilling past the chip). label takes row 1,
   value+tag wrap to row 2 if they can't fit beside it; nothing escapes the border. */
.pfv-fin-money-row{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;width:100%;box-sizing:border-box;background:color-mix(in srgb,var(--text-primary) 4%,transparent);border:0.5px solid color-mix(in srgb,var(--text-primary) 8%,transparent);border-radius:9px;padding:6px 10px;cursor:pointer;font:inherit;transition:background var(--motion-fast) var(--ease-out)}
.pfv-fin-money-row:hover{background:color-mix(in srgb,var(--app-accent) 8%,transparent)}
.pfm-lbl{font-size:11px;font-weight:600;color:var(--text-secondary);flex:0 0 auto}
.pfm-val{font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text-primary);margin-left:auto;white-space:nowrap}
.pfm-tag{font-size:9.5px;font-weight:700;padding:1px 6px;border-radius:var(--radius-pill);flex:0 0 auto;white-space:nowrap;max-width:100%}
.pfm-tag.warn{color:var(--color-warning);background:color-mix(in srgb,var(--color-warning) 14%,transparent)}
.pfm-tag.ok{color:var(--color-success);background:color-mix(in srgb,var(--color-success) 14%,transparent)}
.pfv-fin-value{font-size:21px;font-weight:800;letter-spacing:-.6px;color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1.05}
.pfv-fin-vlabel{font-size:9.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);margin-top:2px}
.pfv-fin-bar-head{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;margin-bottom:5px;font-size:11px;font-weight:600;color:var(--text-muted)}
.pfv-fin-pct{font-weight:700;font-variant-numeric:tabular-nums}
.pfv-fin-track{height:7px;background:color-mix(in srgb,var(--text-primary) 10%,transparent);border-radius:var(--radius-pill);overflow:hidden}
.pfv-fin-fill{height:100%;border-radius:var(--radius-pill);transition:width var(--motion-slow) var(--ease-spring)}
/* V114 — "Budget detail →" drill link on the Financials widget */
.pfv-fin-link{align-self:flex-start;margin-top:9px;padding:0;background:none;border:none;cursor:pointer;font:inherit;font-size:11.5px;font-weight:600;letter-spacing:-.1px;color:var(--app-accent);display:inline-flex;align-items:center;gap:4px;transition:gap var(--motion-fast) var(--ease-out),opacity var(--motion-fast) var(--ease-out)}
.pfv-fin-link:hover{gap:7px;opacity:.85}
/* edit-mode chrome */
.pfv-ov-grid.editing .pfv-ov-widget{cursor:grab}
.pfv-ov-grid.editing .pfv-ov-widget.dragging{opacity:.5}
.pfv-ov-widget-remove{position:absolute;top:6px;right:6px;width:18px;height:18px;border-radius:50%;background:var(--app-danger);color:#fff;border:none;cursor:pointer;display:none;align-items:center;justify-content:center}
.pfv-ov-grid.editing .pfv-ov-widget-remove{display:inline-flex}
.pfv-ov-widget-remove svg{width:9px;height:9px}
.pfv-ov-widget-resize{position:absolute;bottom:2px;right:2px;width:14px;height:14px;cursor:nwse-resize;display:none;opacity:.5}
.pfv-ov-grid.editing .pfv-ov-widget-resize{display:block}
/* health ring */
.pfv-ring{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pfv-ring-inner{width:34px;height:34px;border-radius:50%;background:var(--card-bg);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--text-primary)}
/* add-widget picker */
.pfv-ov-picker{position:absolute;z-index:60;background:var(--card-bg);border:0.5px solid var(--chrome-border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-e4);padding:6px;max-height:320px;overflow-y:auto;min-width:200px}
.pfv-ov-picker-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--radius-sm);cursor:pointer;font-size:12px;color:var(--text-primary);transition:background var(--motion-fast) var(--ease-out)}
.pfv-ov-picker-item:hover{background:var(--chrome-bg-hover)}
.pfv-ov-picker-item.disabled{opacity:.4;cursor:default}
.pfv-ov-picker-item svg{width:13px;height:13px;color:var(--text-muted)}
.pfv-photo-widget img{width:100%;border-radius:var(--radius-sm);display:block}
/* Breakpoint normalized 900px -> 1024px (2026-05-14 mobile overhaul). The rules
   below cover the CUSTOMIZABLE widget-grid path (.pfv-ov-grid). The live full-page
   Overview (the .ovx-panel render-path via renderModalOverview) already reflows on
   phone via its own zone rules: .ovx-panel is flex-column; .cockpit -> 2col @<=560;
   .statpanel -> 1col @<=560; .finband -> 2col @<=900; .court-chain wraps. Verified
   single-column-clean at 390px (2026-06-18) — no separate phone pass needed. */
@media (max-width: 1024px) {.pfv-ov-grid{grid-template-columns:repeat(2,1fr)}.pfv-ov-widget[data-w="3"],.pfv-ov-widget[data-w="2"]{grid-column:span 2}}
@media (max-width: 640px) {.pfv-ov-grid{grid-template-columns:1fr}.pfv-ov-widget[data-w="2"],.pfv-ov-widget[data-w="3"]{grid-column:span 1}}

/* Modal body */
.modal-body{padding:0 16px}
.modal-cols{display:grid;grid-template-columns:minmax(0,1fr) 192px;gap:14px;align-items:start}
/* 2026-05-20 📘 — Desktop/iPad project modal: cap height + internal scroll so it
   doesn't grow unbounded (empty space) and the save bar stays pinned. Mobile
   keeps its own 94svh sheet rules (≤640). */
@media (min-width: 641px){
  .modal{display:flex;flex-direction:column;height:88vh;max-height:88vh;padding-bottom:0;overflow:hidden}
  /* fixed (non-scrolling) header chrome must keep its height — without an
     explicit flex-basis these collapsed (tabs squished to 12px). */
  .modal > .modal-label-bar,.modal > .modal-title-wrap,.modal > .modal-fullpage-btn,.modal > .modal-close,.modal > .modal-meta-row,.modal > .modal-tabs-shell{flex:0 0 auto}
  .modal > .modal-body-host{overflow-y:auto;overflow-x:hidden;flex:1 1 auto;min-height:0}
  .modal > .save-bar{position:sticky;bottom:0;flex:0 0 auto;background:var(--modal-bg);border-top:0.5px solid var(--chrome-border);padding:12px 16px;margin-top:0;z-index:2}
  /* sidebar (PHASE + ACTIONS) sticks to the top of the scroll viewport so it
     stays visible while the tall form scrolls — kills the big empty zone below
     it (form was 1836px, sidebar 691px, top-aligned). */
  .modal-cols > *:last-child{position:sticky;top:0;align-self:start}
}
.modal-cols.no-sidebar{grid-template-columns:minmax(0,1fr)}
.modal-cols > *{min-width:0}
#modalSidebar.hidden{display:none}
.tab-content{display:none}
.tab-content.active{display:block}
/* 2026-05-26 — swipe entrance accent: a quick fade + subtle rise on the new tab
   panel after a swipe-driven tab change (added by initModalTabSwipe). Purely
   additive polish on the active panel only — never animates two panels at once,
   so it can't reproduce the overlap glitch. Respects reduced-motion. */
@keyframes tabSwipeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.tab-content.tab-swipe-in{animation:tabSwipeIn 240ms var(--ease-out) both}
@media (prefers-reduced-motion:reduce){.tab-content.tab-swipe-in{animation:none}}

/* Sections */
.modal-section{margin-top:18px}
/* Unify tab content card styling — Details tab uses .detail-group cards, every
   other tab uses bare .modal-section. Wrapping with the same shaded-card
   treatment so all project-modal tabs look consistent. (.field-compact opts out
   — it's the Details tab's tight field-grid layout where outer cards already
   exist and an extra layer would double-shade.) */
.tab-content > .modal-section:not(.field-compact){background:var(--surface-grad);border:none;border-radius:var(--radius-lg);padding:14px 16px;margin-top:12px;box-shadow:var(--bevel-top),var(--shadow-e2)}
.tab-content > .modal-section:not(.field-compact):first-child{margin-top:0}
.modal-section-title{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;display:flex;align-items:center;gap:6px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif}
/* V77.2 — Apple HIG layered shadow on project modal section cards. Was a
   single 0 1px 2px alpha .03 — barely visible against the page surface.
   Now matches dash-card stack: close ambient + medium drop. */
/* Pass-2 (proto 45) — Details identity hero: confident header above the metadata
   zones. Color reads via the rounded mark fill + phase pill (NO edge-strip). */
.det-idhero{display:flex;align-items:center;gap:15px;padding:16px 18px;margin-bottom:14px;border-radius:18px;background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 8%,var(--card-bg)),var(--card-bg) 64%);box-shadow:var(--bevel-top),var(--shadow-e2);border:.5px solid color-mix(in srgb,var(--app-accent) 8%,rgba(0,0,0,.05))}
.det-idhero[hidden]{display:none}
.dih-mark{width:60px;height:60px;flex:0 0 60px;border-radius:16px;display:grid;place-items:center;font-size:27px;font-weight:800;color:#fff;box-shadow:var(--shadow-e2),inset 0 1px 0 rgba(255,255,255,.4)}
.dih-id{min-width:0;display:flex;flex-direction:column;gap:4px}
.dih-name{font-size:22px;font-weight:800;letter-spacing:-.3px;color:var(--text-primary);line-height:1.1}
.dih-sub{font-size:12px;font-weight:600;color:var(--text-muted)}
.dih-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.dih-chip{font-size:10.5px;font-weight:800;letter-spacing:.02em;padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--text-secondary)}
.dih-chip.dih-val{background:color-mix(in srgb,var(--color-success) 13%,var(--card-bg));color:var(--color-success)}
.dih-chip.dih-phase{display:inline-flex;align-items:center;gap:5px;background:color-mix(in srgb,var(--c,var(--app-accent)) 14%,var(--card-bg));color:color-mix(in srgb,var(--c,var(--app-accent)) 72%,var(--text-primary))}
.dih-chip.dih-phase i{width:6px;height:6px;border-radius:999px;background:var(--c,var(--app-accent));flex:0 0 6px}
.detail-group{background:var(--surface-grad);border:none;border-radius:var(--radius-lg);padding:14px 16px;margin-top:12px;box-shadow:var(--bevel-top),var(--shadow-e2)}
.detail-group:first-child{margin-top:0}
/* cont.34 ceiling — full-page Details: flow the detail-group cards in a 2-col MASONRY so the form
   uses the FULL WIDTH and scrolls ~half as far (was a tall single-column stack). Groups keep their
   raised-card material; break-inside:avoid keeps each card intact. Narrow → single column. */
@media (min-width:1000px){
  #projectFullView #tabDetails .modal-section.field-compact{columns:2;column-gap:12px}
  #projectFullView #tabDetails .modal-section.field-compact .detail-group{break-inside:avoid;margin-top:0;margin-bottom:12px;display:inline-block;width:100%}
}
.detail-group-title{font-size:14px;font-weight:700;letter-spacing:-.2px;color:var(--text-primary);margin-bottom:13px;display:flex;align-items:center;gap:9px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif}
/* V102 — section-header accent icon chip (max-Apple form grouping) */
.dg-ico{flex-shrink:0;width:24px;height:24px;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--app-accent) 13%,transparent);color:var(--app-accent)}
.dg-ico svg{width:13px;height:13px}
.detail-group .field-grid{gap:10px}
.field-compact textarea.field-input{min-height:54px}

/* V83 — native checkbox/radio adopt the brand accent (Apple's utility-checkbox approach)
   so un-classed native boxes (activity Show-all, reports header, pending opts…) tint to the
   theme accent instead of stock blue. Custom checkboxes (.td-check etc.) override locally. */
input[type="checkbox"],input[type="radio"]{accent-color:var(--app-accent)}
/* V135 — GLOBAL circular checkbox (Gavin: no square select/check boxes anywhere — round design
   everywhere). Every plain checkbox inherits the round .rt-check look (appearance:none ring →
   accent-filled circle + white check). Excludes role="switch" toggles (they're not checkboxes)
   and .no-style escape hatch. Components with their own checkbox rule (.task-cb/.task-sel-cb/
   .subtask-cb/.td-check) keep their specific styling. */
input[type="checkbox"]:not([role="switch"]):not(.no-style):not(.task-sel-cb):not(.task-cb):not(.subtask-cb){-webkit-appearance:none;appearance:none;flex:0 0 auto;width:17px;height:17px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--text-primary) 28%,transparent);background:var(--card-bg);cursor:pointer;display:inline-grid;place-content:center;vertical-align:middle;transition:background var(--motion-fast),border-color var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
input[type="checkbox"]:not([role="switch"]):not(.no-style):not(.task-sel-cb):not(.task-cb):not(.subtask-cb)::before{content:'';width:9px;height:9px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;background-position:center;opacity:0;transform:scale(.5);transition:opacity var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
input[type="checkbox"]:not([role="switch"]):not(.no-style):not(.task-sel-cb):not(.task-cb):not(.subtask-cb):hover{border-color:color-mix(in srgb,var(--app-accent) 55%,var(--text-primary))}
input[type="checkbox"]:not([role="switch"]):not(.no-style):not(.task-sel-cb):not(.task-cb):not(.subtask-cb):active{transform:scale(.9)}
input[type="checkbox"]:not([role="switch"]):not(.no-style):not(.task-sel-cb):not(.task-cb):not(.subtask-cb):checked{background:var(--app-accent);border-color:var(--app-accent)}
input[type="checkbox"]:not([role="switch"]):not(.no-style):not(.task-sel-cb):not(.task-cb):not(.subtask-cb):checked::before{opacity:1;transform:scale(1)}
/* Field grid — Apple form field treatment (chrome-bg pill, hairline border, accent focus ring) */
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field-full{grid-column:1/-1}
.field-label{font-size:11px;font-weight:500;color:var(--text-muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.4px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif}
/* A labeled field cell — a tiny caption above an input that otherwise reads as a bare box (date/select). */
.field-dated{display:flex;flex-direction:column}
.field-sublabel{font-size:10.5px;font-weight:600;color:var(--text-muted);letter-spacing:.3px;margin:0 0 3px 2px;text-transform:uppercase}
.field-input{background:var(--field-fill);border:0.5px solid var(--field-stroke);border-radius:var(--radius-md);padding:8px 11px;font-size:13px;font-weight:400;color:var(--text-primary);width:100%;outline:none;transition:background var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;letter-spacing:-.05px;-webkit-appearance:none;appearance:none;max-width:100%}
/* V60 — Strip native iOS chrome from date/time inputs so they don't overflow
   the form card. iOS Safari's default -webkit-appearance adds spinner/calendar
   button widgets that violate the field width on small screens. Reset to none
   so the .field-input width:100% + box-sizing:border-box wins. */
.field-input[type="date"],.field-input[type="time"],.field-input[type="datetime-local"]{
  min-height:36px;
  -webkit-appearance:none;appearance:none;
  position:relative;
}
.field-input[type="date"]::-webkit-date-and-time-value,
.field-input[type="time"]::-webkit-date-and-time-value{text-align:left}
.field-input[type="date"]::-webkit-calendar-picker-indicator,
.field-input[type="time"]::-webkit-calendar-picker-indicator{opacity:.6;cursor:pointer}
/* V77 — Empty date/time inputs were rendering as anonymous grey pills (no
   placeholder, no icon, no affordance). Add a "Choose date" / "Choose time"
   pseudo-element so empty inputs read as an obvious tap target. Wrapper
   .field-input-date-wrap[data-empty="1"] is set by JS via _decorateDateInput
   on modal open + on input change. */
.field-input-date-wrap{position:relative;display:block}
.field-input-date-wrap[data-empty="1"]::before{
  content:attr(data-placeholder);
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  font-size:13.5px;color:var(--text-muted);opacity:.7;pointer-events:none;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
}
.field-input-date-wrap[data-empty="1"]::after{
  content:"";position:absolute;right:11px;top:50%;width:14px;height:14px;
  transform:translateY(-50%);pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238e8e93'%3E%3Cpath d='M11 2v1H5V2a1 1 0 1 0-2 0v1H2a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-1V2a1 1 0 1 0-2 0zM2 6h12v7H2V6z'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:.5;
}
.field-input-date-wrap[data-empty="1"] > input{color:transparent}
.field-input-date-wrap[data-empty="1"] > input:focus{color:var(--text-primary)}
/* Use background-COLOR (not the `background` shorthand) on hover/focus — the
   shorthand resets background-image:none, which wiped the select caret SVG and made
   the arrow flash/disappear on hover. Setting only the color preserves the caret. */
.field-input:hover{background-color:var(--chrome-bg-hover)}
.field-input:focus{background-color:var(--card-bg);border-color:color-mix(in srgb,var(--app-accent) 50%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 15%,transparent)}
.field-input::placeholder{color:var(--text-muted);opacity:.7}
textarea.field-input{resize:vertical;min-height:72px;line-height:1.45}
select.field-input{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238e8e93'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:30px;cursor:pointer}

/* V29i (2026-05-17 cont. 14): autocomplete combobox for Contacts/Clients assign.
   Replaces dropdown-only selects with type-as-you-go matching + "create new" affordance. */
.rrt-combobox{position:relative}
.rrt-combobox-list{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);box-shadow:0 6px 24px rgba(0,0,0,.12);max-height:280px;overflow-y:auto;z-index:var(--z-popover);padding:4px 0}
.rrt-combobox-item{padding:8px 12px;font-size:13px;color:var(--text-primary);cursor:pointer;display:flex;flex-direction:column;gap:1px;line-height:1.3;transition:background var(--motion-fast)}
.rrt-combobox-item:hover,.rrt-combobox-item.active{background:var(--surface-2)}
.rrt-combobox-item:active{background:var(--surface-3)}
.rrt-combobox-item .rrt-combobox-sub{font-size:11.5px;color:var(--text-muted)}
.rrt-combobox-item.rrt-combobox-create{border-top:0.5px solid var(--chrome-border);color:var(--app-accent);font-weight:600}
.rrt-combobox-item.rrt-combobox-empty{color:var(--text-muted);cursor:default;font-style:italic;padding:10px 12px;text-align:center}

/* ── Glass Select — reusable Liquid Glass dropdown (progressive enhancement of
   native <select class="glass-select">). The closed box stays the native
   styled select; the OPEN list is a real glass popover so it looks identical
   on Mac AND Windows (native <select> option-lists are OS-drawn and can't be
   glassed — this replaces that list with our own). Backdrop-blur with a
   solid-frost fallback for no-blur / reduced-transparency. */
.glass-select-pop{position:fixed;z-index:var(--z-top);min-width:160px;max-width:min(340px,calc(100vw - 24px));max-height:min(60vh,420px);overflow-y:auto;border-radius:var(--radius-card);padding:5px;-webkit-overflow-scrolling:touch;transform-origin:top center;animation:glassSelIn var(--motion-base) var(--ease-spring)}
@keyframes glassSelIn{from{opacity:0;transform:scale(.97) translateY(-4px)}to{opacity:1;transform:none}}
.glass-select-pop::before{display:none}
.glass-select-opt{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:13px;font-weight:500;color:var(--text-primary);cursor:pointer;border-radius:var(--radius-sm);transition:background var(--motion-fast);white-space:nowrap;position:relative}
.glass-select-opt:hover{background:color-mix(in srgb,var(--text-primary) 8%,transparent)}
.glass-select-opt:active{background:color-mix(in srgb,var(--text-primary) 13%,transparent)}
.glass-select-opt.sel{color:var(--app-accent);font-weight:600}
.glass-select-opt .gs-check{margin-left:auto;width:14px;height:14px;flex-shrink:0;opacity:0}
.glass-select-opt.sel .gs-check{opacity:1}
.glass-select-opt[aria-disabled="true"]{opacity:.45;pointer-events:none}
/* Open-state affordance on the trigger select */
select.gs-open{border-color:color-mix(in srgb,var(--app-accent) 55%,var(--chrome-border));box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 16%,transparent)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass-select-pop{background:var(--card-bg)}.glass-select-pop::before{display:none}}
@media (prefers-reduced-transparency:reduce){.glass-select-pop{background:var(--card-bg);backdrop-filter:none;-webkit-backdrop-filter:none}.glass-select-pop::before{display:none}}
@media (prefers-reduced-motion:reduce){.glass-select-pop{animation:none}}

/* ── Glass Date Picker — Apple-style calendar popover (rides .rt-glass-pop) ── */
.glass-date-pop{position:fixed;z-index:var(--z-top);width:288px;max-width:calc(100vw - 16px);border-radius:var(--radius-card);padding:12px;transform-origin:top center;animation:glassSelIn var(--motion-base) var(--ease-spring)}
.glass-date-pop .gd-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.glass-date-pop .gd-mlabel{font-size:14px;font-weight:700;color:var(--text-primary);letter-spacing:-.01em}
.glass-date-pop .gd-nav{width:28px;height:28px;border-radius:9px;border:0;background:transparent;color:var(--text-secondary);display:grid;place-items:center;cursor:pointer;transition:background var(--motion-fast)}
.glass-date-pop .gd-nav:hover{background:var(--ctx-menu-hover);color:var(--text-primary)}
.glass-date-pop .gd-nav svg{width:15px;height:15px}
.glass-date-pop .gd-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.glass-date-pop .gd-dow span{text-align:center;font-size:11px;font-weight:700;color:var(--text-muted);padding:2px 0}
.glass-date-pop .gd-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.glass-date-pop .gd-cell,.glass-time-pop .gd-cell{height:34px;border:0;background:transparent;border-radius:9px;font-size:13px;font-weight:600;color:var(--text-primary);cursor:pointer;display:grid;place-items:center;transition:background var(--motion-fast),color var(--motion-fast)}
.glass-date-pop .gd-cell:hover,.glass-time-pop .gd-cell:hover{background:var(--ctx-menu-hover)}
.glass-date-pop .gd-cell.gd-out,.glass-time-pop .gd-cell.gd-out{color:var(--text-muted);opacity:.4;cursor:default;font-weight:500}
.glass-date-pop .gd-cell.gd-out:hover,.glass-time-pop .gd-cell.gd-out:hover{background:transparent}
.glass-date-pop .gd-cell.gd-today,.glass-time-pop .gd-cell.gd-today{color:var(--app-accent);font-weight:800}
.glass-date-pop .gd-cell.gd-sel,.glass-time-pop .gd-cell.gd-sel{background:var(--app-accent);color:#fff;box-shadow:var(--shadow-e1)}
.glass-date-pop .gd-cell.gd-sel:hover,.glass-time-pop .gd-cell.gd-sel:hover{background:var(--app-accent)}
.glass-date-pop .gd-foot,.glass-time-pop .gd-foot{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:.5px solid color-mix(in srgb,var(--chrome-border) 60%,transparent)}
.glass-date-pop .gd-foot-btn,.glass-time-pop .gd-foot-btn{border:0;background:transparent;color:var(--app-accent);font-size:13px;font-weight:600;cursor:pointer;padding:4px 8px;border-radius:8px}
.glass-date-pop .gd-foot-btn:hover,.glass-time-pop .gd-foot-btn:hover{background:color-mix(in srgb,var(--app-accent) 10%,transparent)}
input[type="date"].gs-open{border-color:color-mix(in srgb,var(--app-accent) 55%,var(--chrome-border));box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 16%,transparent)}
/* our calendar replaces the native picker — hide the native indicator so there's no
   double-icon (the whole field opens our popover). Keep it for .no-glass-date inputs. */
input[type="date"]:not(.no-glass-date)::-webkit-calendar-picker-indicator{opacity:0;cursor:pointer}
@media (prefers-reduced-motion:reduce){.glass-date-pop{animation:none}}
/* 📖 V163 — glass TIME popover (companion to the calendar; opt-in input[type="time"].glass-time) */
.glass-time-pop{position:fixed;z-index:var(--z-top);width:288px;max-width:calc(100vw - 16px);border-radius:var(--radius-card);padding:12px;transform-origin:top center;animation:glassSelIn var(--motion-base) var(--ease-spring)}
.glass-time-pop .gt-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.glass-time-pop .gt-preview{flex:1;text-align:center;font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--text-primary);font-variant-numeric:tabular-nums}
.glass-time-pop .gt-step{width:28px;height:28px;border-radius:9px;border:0;background:transparent;color:var(--text-secondary);display:grid;place-items:center;cursor:pointer;transition:background var(--motion-fast)}
.glass-time-pop .gt-step:hover{background:var(--ctx-menu-hover);color:var(--text-primary)}
.glass-time-pop .gt-step svg{width:13px;height:13px}
.glass-time-pop .gt-ap{display:inline-flex;border-radius:9px;overflow:hidden;box-shadow:inset 0 0 0 .5px var(--chrome-border)}
.glass-time-pop .gt-ap button{border:0;background:transparent;color:var(--text-secondary);font-size:11px;font-weight:800;padding:6px 9px;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
.glass-time-pop .gt-ap button.is-on{background:var(--app-accent);color:#fff}
.glass-time-pop .gt-lab{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin:8px 2px 4px}
.glass-time-pop .gt-hours,.glass-time-pop .gt-mins{display:grid;grid-template-columns:repeat(6,1fr);gap:2px}
.glass-time-pop .gd-cell.gd-near{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--app-accent) 45%,transparent)}
.glass-time-pop .gt-done{margin-left:auto;font-weight:800}
input[type="time"].glass-time::-webkit-calendar-picker-indicator{opacity:0;cursor:pointer}
input[type="time"].gs-open{border-color:color-mix(in srgb,var(--app-accent) 55%,var(--chrome-border));box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 16%,transparent)}
@media (prefers-reduced-motion:reduce){.glass-time-pop{animation:none}}
@media (max-width:640px){.glass-select-opt{padding:11px 13px;font-size:14px}}
/* ── Canonical dropdown glass — single source of truth ──────────────────────
   Every dropdown/popover/menu rides .rt-glass-pop for ONE Liquid Glass recipe
   across the whole app + all OSes. Each surface keeps its own position / size /
   radius / animation; ONLY the glass (bg + blur + rim + border) lives here. */
.rt-glass-pop{
  /* More transparent + stronger blur than the base LG token so it reads as real
     Liquid Glass over LIGHT backgrounds (desktop/iPad), not a flat panel. Built on
     --surface so dark themes (Bayfront/midnight) darken automatically. */
  background:color-mix(in srgb, var(--surface) 64%, transparent);
  backdrop-filter:blur(30px) saturate(1.8);-webkit-backdrop-filter:blur(30px) saturate(1.8);
  border:0.5px solid var(--chrome-border);
  box-shadow:var(--lg-edge),var(--shadow-e4);
  /* The ONE recipe must carry the menu radius so every consumer is rounded by default
     (the Files sort + ⋯ pops set only inline padding → were rendering square-ish). */
  border-radius:var(--radius-menu);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .rt-glass-pop{background:var(--card-bg)}
}
@media (prefers-reduced-transparency:reduce){
  .rt-glass-pop{background:var(--card-bg);backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* ── First-run welcome / permissions pre-prompt (Item 2) — Liquid Glass card ── */
.rt-welcome-overlay{position:fixed;inset:0;z-index:var(--z-toast,99999);display:flex;align-items:center;justify-content:center;padding:24px;background:var(--overlay-bg,rgba(0,0,0,.55));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity var(--motion-base) var(--ease-out)}
.rt-welcome-overlay.open{opacity:1}
.rt-welcome-card{width:min(440px,100%);background:var(--lg-bg-strong);backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract);border:0.5px solid var(--chrome-border);border-radius:var(--radius-modal,20px);box-shadow:var(--lg-edge),var(--shadow-e4);padding:26px 24px 18px;text-align:center;transform:scale(.95) translateY(8px);transition:transform var(--motion-base) var(--ease-spring);position:relative;overflow:hidden}
.rt-welcome-overlay.open .rt-welcome-card{transform:none}
.rt-welcome-card::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(220px 140px at 50% 0%,var(--lg-sheen),transparent 70%);opacity:.4;mix-blend-mode:screen}
.rt-welcome-ico{width:52px;height:52px;margin:0 auto 14px;border-radius:15px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--app-accent) 16%,transparent);color:var(--app-accent);box-shadow:inset 0 0 0 0.5px color-mix(in srgb,var(--app-accent) 34%,transparent),inset 0 1px 0 rgba(255,255,255,.22)}
.rt-welcome-ico svg{width:26px;height:26px;display:block}
.rt-welcome-title{font-size:21px;font-weight:700;letter-spacing:-0.4px;color:var(--text-primary);margin:0 0 6px}
.rt-welcome-sub{font-size:13.5px;line-height:1.45;color:var(--text-secondary);margin:0 0 18px}
.rt-welcome-perms{display:flex;flex-direction:column;gap:10px;text-align:left;margin-bottom:20px}
.rt-welcome-perm{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--text-primary) 5%,transparent)}
.rt-welcome-perm-ico{flex-shrink:0;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--card-bg);color:var(--app-accent);box-shadow:var(--shadow-e1)}
.rt-welcome-perm-ico svg{width:17px;height:17px;display:block}
.rt-welcome-perm div strong{display:block;font-size:13.5px;font-weight:600;color:var(--text-primary)}
.rt-welcome-perm div span{display:block;font-size:11.5px;color:var(--text-muted);line-height:1.35}
.rt-welcome-actions{display:flex;gap:10px;margin-bottom:12px}
.rt-welcome-actions button{flex:1;justify-content:center;padding:11px}
.rt-welcome-foot{font-size:10.5px;color:var(--text-muted);line-height:1.4;margin:0}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.rt-welcome-card{background:var(--card-bg)}.rt-welcome-card::before{display:none}}
@media (prefers-reduced-transparency:reduce){.rt-welcome-overlay{backdrop-filter:none;-webkit-backdrop-filter:none}.rt-welcome-card{background:var(--card-bg);backdrop-filter:none;-webkit-backdrop-filter:none}.rt-welcome-card::before{display:none}}
@media (prefers-reduced-motion:reduce){.rt-welcome-overlay,.rt-welcome-card{transition:none}}

/* ── E6-F-A — Atira proactive login briefing (floating, dismissible, real-data) ──────────────
   A floating frosted-glass .rt-panel anchored bottom-right (NOT a full-screen overlay → no
   click-trap; the underlying view stays fully interactive). Each row = one anomaly/suggestion,
   one-tap to its suggested action (open Atira pre-filled) or its drill. Severity reads via a
   PILL FILL + icon tint — never a colored edge-strip. Rounded throughout; all viewports. */
.rt-brief{position:fixed;right:18px;bottom:18px;z-index:var(--z-toast,99999);width:min(380px,calc(100vw - 36px));max-height:min(70vh,560px);display:flex;flex-direction:column;
  background:var(--lg-bg-strong,var(--lg-bg));backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract);
  border:.5px solid var(--chrome-border);border-radius:var(--radius-lg,16px);box-shadow:var(--lg-edge),var(--shadow-e4);
  overflow:hidden;opacity:0;transform:translateY(10px) scale(.98);transition:opacity var(--motion-base) var(--ease-out),transform var(--motion-base) var(--ease-spring)}
.rt-brief.open{opacity:1;transform:none}
.rt-brief-head{display:flex;align-items:center;gap:10px;padding:13px 14px 11px;border-bottom:.5px solid var(--chrome-border)}
.rt-brief-orb{width:26px;height:26px;flex:0 0 auto;display:grid;place-items:center;border-radius:8px;background:color-mix(in srgb,var(--accent,#0a84ff) 16%,transparent);color:var(--accent,#0a84ff)}
.rt-brief-head-txt{flex:1;min-width:0}
.rt-brief-title{font-size:13.5px;font-weight:650;letter-spacing:-.2px;color:var(--text-primary);line-height:1.2}
.rt-brief-sub{font-size:11px;color:var(--text-secondary);margin-top:1px}
.rt-brief-x{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;border:none;background:transparent;color:var(--text-secondary);border-radius:50%;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
.rt-brief-x:hover{background:var(--hover-bg,rgba(127,127,127,.14));color:var(--text-primary)}
.rt-brief-x svg{width:14px;height:14px}
.rt-brief-list{overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:7px;-webkit-overflow-scrolling:touch}
.rt-brief-row{display:flex;align-items:flex-start;gap:10px;padding:10px 10px 10px 11px;border-radius:var(--radius-md,12px);background:var(--card-bg);border:.5px solid var(--chrome-border);transition:box-shadow var(--motion-base) var(--ease-out),transform var(--motion-fast) var(--ease-out),border-color var(--motion-fast)}
.rt-brief-row:hover{box-shadow:var(--shadow-e2);border-color:var(--chrome-border-strong,var(--chrome-border))}
.rt-brief-sev{flex:0 0 auto;margin-top:1px;width:22px;height:22px;border-radius:7px;display:grid;place-items:center}
.rt-brief-sev svg{width:13px;height:13px}
.rt-brief-sev.high,.rt-brief-sev.critical{background:color-mix(in srgb,var(--danger,#ff3b30) 16%,transparent);color:var(--danger,#ff3b30)}
.rt-brief-sev.medium{background:color-mix(in srgb,var(--warn,#ff9500) 16%,transparent);color:var(--warn,#ff9500)}
.rt-brief-sev.low{background:color-mix(in srgb,var(--accent,#0a84ff) 14%,transparent);color:var(--accent,#0a84ff)}
.rt-brief-main{flex:1;min-width:0}
.rt-brief-headline{font-size:12.5px;font-weight:600;letter-spacing:-.1px;color:var(--text-primary);line-height:1.3}
.rt-brief-proj{font-size:10.5px;font-weight:600;color:var(--text-secondary);margin-top:1px;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rt-brief-detail{font-size:11.5px;color:var(--text-secondary);line-height:1.35;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rt-brief-acts{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.rt-brief-act{font-size:11px;font-weight:600;letter-spacing:-.1px;padding:5px 11px;border-radius:999px;border:none;cursor:pointer;background:var(--accent,#0a84ff);color:#fff;transition:filter var(--motion-fast),transform var(--motion-fast) var(--ease-out)}
.rt-brief-act:hover{filter:brightness(1.07)}
.rt-brief-act:active{transform:scale(.97)}
.rt-brief-act.ghost{background:var(--hover-bg,rgba(127,127,127,.12));color:var(--text-primary)}
.rt-brief-dismiss{flex:0 0 auto;width:24px;height:24px;display:grid;place-items:center;border:none;background:transparent;color:var(--text-tertiary,var(--text-secondary));border-radius:50%;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
.rt-brief-dismiss:hover{background:var(--hover-bg,rgba(127,127,127,.14));color:var(--text-primary)}
.rt-brief-dismiss svg{width:12px;height:12px}
.rt-brief-foot{padding:9px 12px;border-top:.5px solid var(--chrome-border);text-align:center}
.rt-brief-dismissall{font-size:11.5px;font-weight:600;color:var(--text-secondary);background:transparent;border:none;cursor:pointer;padding:4px 10px;border-radius:8px;transition:background var(--motion-fast),color var(--motion-fast)}
.rt-brief-dismissall:hover{background:var(--hover-bg,rgba(127,127,127,.12));color:var(--text-primary)}
@media (max-width:520px){.rt-brief{right:10px;left:10px;bottom:10px;width:auto;max-height:62vh}}
@media (prefers-reduced-transparency:reduce){.rt-brief{background:var(--card-bg);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media (prefers-reduced-motion:reduce){.rt-brief{transition:opacity var(--motion-base) linear}}

.rrt-combobox-item.rrt-combobox-empty:hover{background:transparent}

/* Phase buttons — Apple-system list pill */
.phase-buttons{display:flex;flex-direction:column;gap:3px}
.phase-btn{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--radius-md);border:0.5px solid transparent;cursor:pointer;font-size:12.5px;font-weight:500;letter-spacing:-.05px;background:transparent;color:var(--text-primary);transition:background var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-base) var(--ease-out),transform var(--motion-fast) var(--ease-out);text-align:left;width:100%;min-width:0;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif}
.phase-btn:active{transform:scale(.98)}
.phase-btn .phase-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.phase-btn .phase-emoji{flex-shrink:0;opacity:.85;line-height:1;display:inline-flex;align-items:center}
.phase-btn:hover{background:var(--chrome-bg-hover);transform:none}
.phase-btn:active{transform:scale(.98)}
.phase-btn.active{color:#fff;border-color:transparent;font-weight:600;box-shadow:var(--shadow-e2),inset 0 1px 0 rgba(255,255,255,.18)}
.phase-btn.active .phase-dot{background:rgba(255,255,255,.9)!important;box-shadow:0 0 0 0.5px rgba(0,0,0,.12)}
.phase-btn.active .phase-emoji{opacity:.95}
.phase-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 0.5px rgba(0,0,0,.08)}
/* Phase rail rework — wrap the phase list + actions in canonical cards so the
   rail reads as cohesive panels (matching the Overview cards), not a flat list
   floating next to elevated cards. Card recipe = .surface-card. */
/* V134 — sidebar rhythm (Gavin: PHASE crowded the top bar; PHASE↔ACTIONS gap was inconsistent).
   Wrap the sidebar in a flex column so both cards share ONE uniform gap (12px, matching the
   .mov-grid content gap), and the column aligns with the content's first card. */
#modalSidebar{display:flex;flex-direction:column;gap:12px}
#modalSidebar .modal-phase-section{background:var(--surface-grad);border:none;border-radius:var(--radius-lg);box-shadow:var(--bevel-top),var(--shadow-e2);padding:12px 12px 10px;margin:0}
#modalSidebar .project-actions{background:var(--surface-grad);border:none;border-radius:var(--radius-lg);box-shadow:var(--bevel-top),var(--shadow-e2);padding:12px 12px 10px;margin:0}
#modalSidebar .modal-section-title{margin-bottom:8px}
/* tighter phase rows inside the card; the active row keeps its phase-color fill */
#modalSidebar .phase-btn{padding:6px 9px}
/* P3.2 — phase-rail rework. The desktop rail (#modalSidebar) is a sticky 192px
   column; with a long phase list (R&R sets run 12+) the flat list grew taller
   than the 88vh modal, pushing Actions (incl. Delete) below the fold where the
   sticky rail couldn't recover them. Cap the phase list and scroll it internally
   so Actions stay reachable; the active phase is scrolled into view in JS. A slim
   scrollbar is the affordance — no mask-image fade (deliberately abandoned on the
   tab scroller, see ~L4087: it clipped active-item glass + hit an iOS layer bug).
   (Mobile hides this section entirely.) */
#modalSidebar .phase-buttons{max-height:230px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:2px}
#modalSidebar .phase-buttons::-webkit-scrollbar{width:6px}
#modalSidebar .phase-buttons::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text-primary) 18%,transparent);border-radius:var(--radius-pill)}
/* P3.2 — desktop rail Actions as a 2×2 grid (was a single column of 4 tall tiles
   ~190px tall). 2×2 halves the rail height so Phase + Actions both fit; the tiles
   stack icon-over-label so they read clearly at the narrower column width. */
#modalSidebar .action-grid{grid-template-columns:1fr 1fr;gap:8px}
#modalSidebar .action-tile{flex-direction:column;align-items:flex-start;gap:7px;min-height:32px;padding:11px 11px}
#modalSidebar .action-tile-label{flex:0 0 auto;font-size:12.5px}

/* 2026-06-02 ALL-IN — full-page-ONLY right-rail polish into the new command-
   center language (modal is out of scope, so every rule is scoped under
   #projectFullView, where #modalSidebar is relocated into #pfvContent). Glass
   panels, an uppercase section eyebrow with an accent tick, a premium phase
   selector, and glossy tactile action tiles that press. */
#projectFullView #modalSidebar{gap:14px}
#projectFullView #modalSidebar .modal-phase-section,
#projectFullView #modalSidebar .project-actions{
  background:var(--frost-bg-strong);backdrop-filter:var(--frost-blur);-webkit-backdrop-filter:var(--frost-blur);
  border-radius:var(--radius-lg);box-shadow:var(--lg-edge),var(--shadow-e2);padding:13px 13px 12px}
#projectFullView #modalSidebar .modal-section-title{display:flex;align-items:center;gap:7px;margin-bottom:10px;
  font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--text-secondary)}
#projectFullView #modalSidebar .phase-btn{padding:7px 10px;border-radius:var(--radius-md);font-size:12px;font-weight:600;transition:background var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-base) var(--ease-out)}
#projectFullView #modalSidebar .phase-btn:not(.active):hover{background:var(--chrome-bg-hover);transform:translateX(2px)}
#projectFullView #modalSidebar .phase-btn.active{box-shadow:var(--shadow-e2),inset 0 1px 0 rgba(255,255,255,.28),0 0 0 .5px color-mix(in srgb,#000 6%,transparent)}
#projectFullView #modalSidebar .phase-dot{width:8px;height:8px;box-shadow:0 0 5px color-mix(in srgb,currentColor 40%,transparent),0 0 0 .5px rgba(0,0,0,.08)}
#projectFullView #modalSidebar .action-grid{gap:9px}
#projectFullView #modalSidebar .action-tile{flex-direction:column;align-items:flex-start;gap:8px;min-height:34px;padding:12px 12px;border-radius:var(--radius-md);
  background:var(--surface-grad);box-shadow:var(--bevel-top),var(--shadow-e1);border:none;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-base) var(--ease-out),background var(--motion-fast) var(--ease-out)}
#projectFullView #modalSidebar .action-tile:hover{transform:translateY(-2px);box-shadow:var(--bevel-top),var(--shadow-e3)}
#projectFullView #modalSidebar .action-tile:active{transform:scale(.96)}
#projectFullView #modalSidebar .action-tile .action-row-tile{width:30px;height:30px;border-radius:var(--radius-sm);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
#projectFullView #modalSidebar .action-tile-label{font-size:12px;font-weight:600;color:var(--text-primary)}
#projectFullView #modalSidebar .action-tile-danger:hover{box-shadow:var(--bevel-top),var(--shadow-e3),0 0 0 1px color-mix(in srgb,var(--color-error) 30%,transparent)}

/* Color picker */
.color-picker{display:flex;flex-wrap:wrap;gap:6px}
.color-swatch{width:28px;height:20px;border-radius:var(--radius-xs);cursor:pointer;border:3px solid transparent;transition:transform var(--motion-fast)}
.color-swatch:hover{transform:scale(1.15)}
.color-swatch.selected{border-color:var(--text-primary)}

/* Notes — Apple-system */
.note-toolbar{display:grid;grid-template-columns:minmax(0,1fr) 140px;gap:8px;margin-bottom:12px}
.note-list{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
.note-group{display:flex;flex-direction:column;gap:7px}
.note-group-title{font-size:10.5px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;border-bottom:0.5px solid var(--chrome-border);padding-bottom:6px;margin-bottom:2px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif}
/* V77.2 — Apple HIG layered shadow on note items + Daily Log list rows. */
.note-item{background:var(--surface-grad);border:none;border-radius:var(--radius-md);padding:11px 13px;font-size:13px;color:var(--text-primary);line-height:1.5;position:relative;transition:box-shadow var(--motion-base) var(--ease-out),transform var(--motion-fast) var(--ease-spring);letter-spacing:-.05px;box-shadow:var(--bevel-top),var(--shadow-e1)}
.note-item:hover{box-shadow:var(--bevel-top),var(--shadow-e2)}
.note-item:hover .note-actions{opacity:1}
.note-actions{position:absolute;top:8px;right:8px;display:flex;gap:3px;opacity:.35;transition:opacity var(--motion-fast)}
/* V39mmm — note-action-btn press feedback */
.note-action-btn{background:transparent;border:none;cursor:pointer;font-size:13px;padding:3px 6px;border-radius:var(--radius-sm);color:var(--text-muted);line-height:1;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast)}
.note-action-btn:hover{background:var(--surface-2);color:var(--text-primary)}
.note-action-btn:active{transform:scale(.94)}
.note-action-btn.del:hover{background:color-mix(in srgb,var(--app-danger) 10%,transparent);color:var(--app-danger)}
/* V134 — reserve room on the note body's first line so text never runs under the floating
   edit/delete actions (Gavin: note text was overlapping the pencil). */
.note-item .note-body{padding-right:56px}
.note-item .note-date{font-size:10.5px;color:var(--text-muted);margin-top:7px;font-weight:500;letter-spacing:.05px}
.note-edit-area{width:100%;box-sizing:border-box;font-size:13px;color:var(--text-primary);border:0.5px solid color-mix(in srgb,var(--app-accent) 50%,transparent);border-radius:var(--radius-sm);padding:8px 10px;resize:none;overflow:hidden;min-height:60px;font-family:inherit;line-height:1.5;outline:none;background:var(--card-bg);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 15%,transparent);letter-spacing:-.05px}
/* V134 — auto-growing textareas never show the off-brand native corner resize glyph (Gavin).
   They size to content via autoResize(); manual drag-resize is replaced by auto-grow. */
textarea.auto-resize{resize:none;overflow:hidden}
.note-edit-row{display:flex;gap:6px;margin-top:8px}
.note-save-btn{font-size:12px;padding:5px 12px;background:var(--app-accent);color:var(--on-accent);border:none;border-radius:var(--radius-sm);cursor:pointer;font-weight:500;letter-spacing:-.05px;font-family:inherit;box-shadow:0 1px 2px color-mix(in srgb, var(--app-accent) 25%, transparent);transition:opacity var(--motion-fast),transform var(--motion-fast)}
.note-save-btn:hover{opacity:.92}
.note-save-btn:active{transform:scale(.97);opacity:1}
.note-cancel-btn{font-size:12px;padding:5px 12px;background:transparent;color:var(--text-primary);border:0.5px solid var(--chrome-border);border-radius:var(--radius-sm);cursor:pointer;font-weight:500;letter-spacing:-.05px;font-family:inherit;transition:background var(--motion-fast),transform var(--motion-fast)}
.note-cancel-btn:hover{background:var(--surface-2)}
.note-cancel-btn:active{transform:scale(.97)}
.note-input-row{display:flex;gap:8px}
.note-input{flex:1;background:var(--chrome-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);padding:8px 11px;font-size:13px;color:var(--text-primary);outline:none;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;resize:none;letter-spacing:-.05px;transition:background var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast)}
.note-input:hover{background:var(--chrome-bg-hover)}
.note-input:focus{background:var(--card-bg);border-color:color-mix(in srgb,var(--app-accent) 50%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 15%,transparent)}

/* Tasks */
.task-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;margin-bottom:12px}
#taskFilter{min-width:138px}
.task-summary{display:flex;flex-wrap:wrap;gap:5px}
/* V76 — Task summary pills: lighter, more Apple-subtitle. No box, just
   small muted text. Danger/warn variants get colored. */
.task-summary-pill{display:inline-flex;align-items:center;gap:4px;border-radius:0;background:transparent;border:none;color:var(--text-muted);padding:0;font-size:13px;font-weight:500;letter-spacing:-.1px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif}
/* dot separator only between PLAIN (untinted) pills — never before a tinted
   status pill (the dot clashing with the tinted bg was the awkward look). */
.task-summary-pill + .task-summary-pill:not(.warn):not(.danger)::before{content:'·';margin:0 6px;color:color-mix(in srgb, var(--text-primary) 25%, transparent)}
.task-summary-pill + .task-summary-pill.warn,.task-summary-pill + .task-summary-pill.danger{margin-left:6px}
/* tinted status pills get real pill geometry (were padding:0 → text touched the
   tint edges) + theme tokens (were hardcoded #ff9500/#7a4d00/#c00). */
.task-summary-pill.warn,.task-summary-pill.danger{padding:2px 9px;border-radius:var(--radius-pill);font-weight:600}
.task-summary-pill.warn{background:var(--color-warning-bg);color:color-mix(in srgb,var(--color-warning) 60%,var(--text-primary))}
.task-summary-pill.danger{background:color-mix(in srgb,var(--app-danger) 10%,transparent);color:var(--app-danger)}
.task-list{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.task-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;padding:11px 13px;background:var(--surface-grad);border:none;border-radius:var(--radius-md);align-items:start;transition:box-shadow var(--motion-base) ease-out,background var(--motion-base),transform var(--motion-fast) var(--ease-spring);position:relative;overflow:hidden;box-shadow:var(--bevel-top),var(--shadow-e1)}
.task-item:hover{box-shadow:var(--bevel-top),var(--shadow-e2)}
/* pass-2 G1: task status via tinted whole-row fill (NOT a left edge-spine — hard
   rule). The status select/checkbox + priority pill in the row carry the state. */
.task-item.task-flash,.task-item.dash-flash,
.note-item.dash-flash,.tracked-item.dash-flash,.stage-item.dash-flash,
.fin-card.dash-flash,.est-card.dash-flash,.tc-msg.dash-flash,
.cd-row.dash-flash,.contact-row.dash-flash,
.dash-card.dash-flash{box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 35%,transparent),0 4px 16px color-mix(in srgb,var(--app-accent) 20%,transparent) !important;background:color-mix(in srgb,var(--app-accent) 6%,var(--card-bg)) !important}
.task-item.in_progress{background:color-mix(in srgb,var(--app-accent) 4%,var(--card-bg))}
.task-item.blocked{background:color-mix(in srgb,var(--app-danger) 4%,var(--card-bg))}
.task-item.complete{background:color-mix(in srgb,var(--color-success) 4%,var(--card-bg))}
/* V39uuu — task-item active state (subtle press feedback for card-level tap) */
.task-item:hover{border-color:var(--border-strong)}
.task-item:active{transform:scale(.995);transition-duration:var(--motion-fast)}
.task-item:hover .task-delete,.task-item:hover .task-claim{opacity:1}
/* V134 — true CIRCULAR checkbox (Gavin: the native square accent-color box reads wrong;
   border-radius:50% does nothing to a native appearance:auto checkbox). Custom round control:
   hairline ring when empty, accent-filled circle + white check when done. Shared via .rt-check
   so task / select / subtask checkboxes are one consistent round design. */
.rt-check,.task-cb,.subtask-cb{-webkit-appearance:none;appearance:none;flex-shrink:0;cursor:pointer;width:18px;height:18px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--text-primary) 26%,transparent);background:var(--card-bg);margin:0;display:inline-grid;place-content:center;transition:background var(--motion-fast),border-color var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.rt-check::before,.task-cb::before,.subtask-cb::before{content:'';width:9px;height:9px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;background-position:center;opacity:0;transform:scale(.5);transition:opacity var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.rt-check:hover,.task-cb:hover,.subtask-cb:hover{border-color:color-mix(in srgb,var(--color-success) 55%,var(--text-primary))}
.rt-check:active,.task-cb:active,.subtask-cb:active{transform:scale(.9)}
.rt-check:checked,.task-cb:checked,.subtask-cb:checked{background:var(--color-success);border-color:var(--color-success)}
.rt-check:checked::before,.task-cb:checked::before,.subtask-cb:checked::before{opacity:1;transform:scale(1)}
.task-cb{width:18px;height:18px;margin-top:1px}
.task-main{min-width:0}
.task-text-el{display:block;font-size:13.5px;font-weight:500;letter-spacing:-.1px;color:var(--text-primary);line-height:1.45;overflow-wrap:anywhere;word-break:break-word;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif}
/* 2026-05-22 📘 Urgent severity badge — clean SVG chip that replaces a literal
   "⚠️ URGENT" emoji prefix in a task title (no emoji-in-UI). Sits inline before
   the title text and stays out of the way on a done row. */
.task-urgent-badge{display:inline-flex;align-items:center;gap:3px;vertical-align:middle;margin-right:6px;padding:1px 6px 1px 5px;border-radius:var(--radius-sm);background:var(--app-danger);color:#fff;font-size:10px;font-weight:700;letter-spacing:.3px;line-height:1.4;text-transform:uppercase;white-space:nowrap;flex-shrink:0;translate:0 -1px}
.task-urgent-badge svg{width:11px;height:11px;flex-shrink:0}
.task-text-el.done .task-urgent-badge{background:var(--surface-2);color:var(--text-muted)}
.task-text-el.done{text-decoration:line-through;color:var(--text-muted)}
.task-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.task-pill{display:inline-flex;align-items:center;gap:4px;min-height:20px;padding:3px 9px;border-radius:var(--radius-sm);background:var(--surface-2);border:0.5px solid transparent;color:var(--text-muted);font-size:11px;font-weight:500;line-height:1.25;white-space:nowrap;letter-spacing:-.05px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif}
.task-pill .tp-ico{width:11px;height:11px;flex-shrink:0;opacity:.85}
.task-pill.reminder{background:color-mix(in srgb,var(--app-accent) 10%,transparent);color:var(--app-accent);border-color:color-mix(in srgb,var(--app-accent) 22%,transparent)}
.task-pill.completed{background:color-mix(in srgb,var(--color-success) 10%,transparent);color:color-mix(in srgb, var(--color-success) 72%, var(--text-primary));border-color:color-mix(in srgb,var(--color-success) 25%,transparent)}
.task-pill.overdue{background:color-mix(in srgb,var(--app-danger) 10%,transparent);color:#c00;border-color:color-mix(in srgb,var(--app-danger) 25%,transparent)}
.task-pill.due-soon{background:var(--color-warning-bg);color:color-mix(in srgb,var(--color-warning) 60%,var(--text-primary));border-color:color-mix(in srgb,var(--color-warning) 25%,transparent)}
.task-pill.priority-critical{background:var(--app-danger);color:#fff;border-color:transparent;font-weight:600}
.task-pill.priority-high{background:var(--priority-high-bg);color:var(--priority-high-fg);border-color:transparent;font-weight:600}
.task-pill.priority-medium{background:color-mix(in srgb,var(--priority-medium-bg) 30%,transparent);color:var(--priority-medium-fg);border-color:color-mix(in srgb,var(--priority-medium-bg) 50%,transparent);font-weight:600}
.task-pill.priority-low{background:color-mix(in srgb,var(--color-success) 14%,transparent);color:color-mix(in srgb, var(--color-success) 72%, var(--text-primary));border-color:color-mix(in srgb,var(--color-success) 30%,transparent);font-weight:600}
.task-pill.recur{background:color-mix(in srgb,var(--app-accent) 10%,transparent);color:var(--app-accent);border-color:color-mix(in srgb,var(--app-accent) 22%,transparent)}
.task-pill.blocked-by{background:color-mix(in srgb,var(--app-danger) 10%,transparent);color:#c00;border-color:color-mix(in srgb,var(--app-danger) 25%,transparent);cursor:pointer}
.task-pill.blocked-by:hover{opacity:.85}
.task-pill.comment-count{background:var(--surface-2);color:var(--text-muted);cursor:pointer;border-color:var(--border)}
.task-pill.comment-count:hover{background:var(--surface-3);color:var(--text-primary)}
.task-controls{display:flex;align-items:flex-start;gap:5px}
.task-status-select{align-self:start;font-size:11px;padding:3px 22px 3px 9px;border-radius:var(--radius-sm);border:0.5px solid var(--chrome-border);background:var(--chrome-bg);color:var(--text-muted);cursor:pointer;font-weight:500;letter-spacing:-.05px;font-family:inherit;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238e8e93'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;transition:background var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast)}
.task-status-select:hover{background-color:var(--chrome-bg-hover)}
.task-item.in_progress .task-status-select{border-color:color-mix(in srgb,var(--app-accent) 30%,transparent);background-color:color-mix(in srgb,var(--app-accent) 10%,transparent);color:var(--app-accent)}
.task-item.blocked .task-status-select{border-color:color-mix(in srgb,var(--app-danger) 30%,transparent);background-color:color-mix(in srgb,var(--app-danger) 10%,transparent);color:#c00}
.task-item.complete .task-status-select{border-color:color-mix(in srgb,var(--color-success) 30%,transparent);background-color:color-mix(in srgb,var(--color-success) 10%,transparent);color:color-mix(in srgb, var(--color-success) 72%, var(--text-primary))}
.task-delete,.task-claim,.task-set-blocker,.task-edit-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:12px;padding:4px 6px;border-radius:var(--radius-sm);opacity:.5;transition:opacity var(--motion-fast),background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast);line-height:1;flex-shrink:0}
.task-delete:active,.task-claim:active,.task-set-blocker:active,.task-edit-btn:active{transform:scale(.92)}
.task-item:hover .task-set-blocker,.task-item:hover .task-edit-btn{opacity:1}
.task-edit-btn:hover{background:var(--surface-2);color:var(--text-primary)}
.task-claim:hover{background:color-mix(in srgb,var(--color-success) 12%,transparent);color:color-mix(in srgb, var(--color-success) 72%, var(--text-primary))}
.task-set-blocker:hover{background:color-mix(in srgb,var(--app-danger) 10%,transparent);color:#c00}
.task-delete:hover{background:color-mix(in srgb,var(--app-danger) 10%,transparent);color:var(--app-danger)}
/* V136 — task ⋯ overflow trigger: quiet round icon button, brightens on hover/open. */
.task-more-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:0;width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;opacity:.55;flex-shrink:0;transition:opacity var(--motion-fast),background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast)}
.task-item:hover .task-more-btn{opacity:1}
.task-more-btn:hover{background:var(--surface-2);color:var(--text-primary)}
.task-more-btn:active{transform:scale(.9)}
@media (hover:none){.task-more-btn{opacity:.85}}
.blocker-picker-popup{position:absolute;z-index:var(--z-top);background:var(--card-bg);border:0.5px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-e4);min-width:240px;max-width:320px;padding:6px 0;font-size:13px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif}
.blocker-picker-title{padding:8px 14px 6px;font-weight:600;color:var(--text-muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;border-bottom:.5px solid var(--border);margin-bottom:4px}
.blocker-picker-opt{padding:7px 14px;cursor:pointer;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;letter-spacing:-.05px}
.blocker-picker-opt:hover{background:color-mix(in srgb,var(--app-accent) 8%,transparent);color:var(--app-accent)}
.blocker-picker-clear{color:var(--text-muted);font-style:italic;border-top:.5px solid var(--border);margin-top:4px}
.blocker-picker-clear:hover{background:color-mix(in srgb,var(--text-primary) 6%,transparent);color:var(--text-primary)}
.blocker-picker-proj{color:var(--text-muted);font-size:11px}
.blocker-picker-search{margin:2px 14px 6px;width:calc(100% - 28px);box-sizing:border-box;font-size:13px;padding:8px 11px;height:34px;border:.5px solid var(--border);border-radius:var(--radius-md);background:var(--card-bg);color:var(--text-primary);box-shadow:inset 0 1px 2px rgba(0,0,0,.04);outline:none}
.blocker-picker-search:focus{border-color:var(--app-accent);box-shadow:inset 0 1px 2px rgba(0,0,0,.04),0 0 0 3px color-mix(in srgb,var(--app-accent) 18%,transparent)}
.blocker-picker-list{max-height:240px;overflow-y:auto}
.blocker-picker-addcustom{display:flex;align-items:flex-start;gap:6px;color:var(--app-accent);border-top:.5px solid var(--border);white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
.blocker-picker-addcustom svg{width:12px;height:12px;flex-shrink:0;margin-top:2px}
.blocker-picker-addcustom:hover{background:color-mix(in srgb,var(--app-accent) 10%,transparent);color:var(--app-accent)}
.blocker-picker-addcustom strong{font-weight:600}
.task-ws-dep-note .task-ws-dep-ico{color:var(--color-warning)}
.task-ws-dep-tag{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);background:var(--surface-3,var(--surface-2));padding:2px 6px;border-radius:var(--radius-pill);flex-shrink:0;margin-left:auto}
/* V103 — commanding task completion progress (count + bar), matching Stages stepper */
.task-progress{margin-bottom:14px}
.task-prog-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:7px}
.task-prog-count{font-size:18px;font-weight:800;letter-spacing:-.5px;color:var(--text-primary);font-variant-numeric:tabular-nums}
.task-prog-of{font-size:12px;font-weight:500;color:var(--text-muted);letter-spacing:-.05px}
.task-prog-pct{font-size:13px;font-weight:700;color:color-mix(in srgb,var(--color-success) 70%,var(--text-primary));font-variant-numeric:tabular-nums}
.task-prog-track{height:6px;background:color-mix(in srgb,var(--text-primary) 10%,transparent);border-radius:var(--radius-pill);overflow:hidden}
.task-prog-fill{height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--color-success) 80%,#fff),var(--color-success));border-radius:var(--radius-pill);transition:width var(--motion-slow) var(--ease-spring)}
.task-progress.all-done .task-prog-pct{color:var(--color-success)}
.task-progress.all-done{color:color-mix(in srgb, var(--color-success) 72%, var(--text-primary))}
.card-overdue-badge{display:inline-flex;align-items:center;background:color-mix(in srgb,var(--app-danger) 10%,transparent);color:var(--app-danger);border:0.5px solid color-mix(in srgb,var(--app-danger) 25%,transparent);border-radius:var(--radius-sm);font-size:10px;font-weight:600;padding:1px 5px;margin-left:4px;vertical-align:middle;white-space:nowrap;letter-spacing:-.05px}
/* 2026-05-22 📘 Project panel (modal + full-page) task rows: the panel column is
   narrow, so the inline [title | controls] grid crammed the title against the
   status select + Claim/sub-task/edit/delete buttons (Gavin's iPad shot). Mirror
   the Apple-Reminders mobile pattern at ALL widths inside these panels — title
   on its own row, controls on a tidy row beneath it with a hairline divider. The
   ≤640px phone rule still overrides below. */
@media (min-width:641px){
  .modal-cols .task-item,.pfv-content .task-item{grid-template-columns:auto minmax(0,1fr);align-items:flex-start;row-gap:0}
  .modal-cols .task-main,.pfv-content .task-main{grid-column:2/-1;min-width:0;display:flex;flex-direction:column;gap:7px}
  .modal-cols .task-controls,.pfv-content .task-controls{grid-column:1/-1;width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:9px;padding-top:9px;border-top:0.5px solid color-mix(in srgb,var(--text-primary) 6%,transparent)}
  .modal-cols .task-controls .task-status-select,.pfv-content .task-controls .task-status-select{flex:0 0 auto;width:auto;height:30px;min-height:30px;font-size:12.5px;padding:0 26px 0 12px;border-radius:var(--radius-pill)}
  /* P3.4 — controls row = [Status] [⋯]. The status select is the only visible control;
     ALL secondary actions (mark-complete / set-blocker / sub-tasks / edit / delete) live
     behind the trailing ⋯ overflow. The ⋯ pins to the right edge — clean two-item row.
     (.task-claim was the old inline "Claim Done" button, now folded into the menu; the
     selector below is a harmless no-match left in place — see the shared rules at ~5604.) */
  .modal-cols .task-controls .task-claim,.pfv-content .task-controls .task-claim{flex:0 0 auto;opacity:1}
  .modal-cols .task-controls .task-more-btn,.pfv-content .task-controls .task-more-btn{margin-left:auto;flex:0 0 auto}
  .modal-cols .task-subtask-area,.pfv-content .task-subtask-area,
  .modal-cols .task-item > .comment-thread,.pfv-content .task-item > .comment-thread{grid-column:1/-1;width:100%;min-width:0;margin-top:9px}
}
/* ── Bulk task actions ── */
/* V73 — task-select-toggle matches the sibling select height so the row
   reads as a balanced toolbar instead of a small button next to a tall
   dropdown. */
.task-select-toggle{background:var(--chrome-bg);border:0.5px solid var(--chrome-border);color:var(--text-primary);cursor:pointer;font-size:13px;font-weight:500;padding:0 14px;height:36px;border-radius:var(--radius-md);flex-shrink:0;white-space:nowrap;letter-spacing:-.05px;transition:background var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast)}
.task-select-toggle:hover{background:var(--surface-2);border-color:var(--border-strong)}
.task-select-toggle.active{background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent);border-color:color-mix(in srgb,var(--app-accent) 30%,transparent)}
.task-bulk-bar{position:sticky;bottom:0;z-index:var(--z-sticky);background:color-mix(in srgb, var(--card-bg) 92%, transparent);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-top:0.5px solid var(--chrome-border);padding:8px 14px;display:flex;align-items:center;gap:8px;border-radius:0 0 var(--radius-card) var(--radius-card);box-shadow:0 -4px 12px rgba(0,0,0,.06)}
.task-bulk-count{font-size:12.5px;font-weight:600;color:var(--text-primary);flex:1;letter-spacing:-.1px}
/* Item 3 — shared floating bulk-action bar (one mechanism behind every list
   surface's multi-select). Frosted, centered, rounded; rides the motion tokens. */
.rt-bulkbar{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0));transform:translateX(-50%);z-index:var(--z-toast,99999);display:flex;align-items:center;gap:12px;padding:9px 10px 9px 16px;border-radius:999px;background:var(--frost-bg-strong,var(--surface));backdrop-filter:blur(24px) saturate(1.8);-webkit-backdrop-filter:blur(24px) saturate(1.8);border:.5px solid var(--chrome-border);box-shadow:var(--shadow-e4),inset 0 1px 0 rgba(255,255,255,.18);animation:rtBulkIn var(--motion-base) var(--ease-spring,ease-out);max-width:calc(100vw - 24px)}
@keyframes rtBulkIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
.rt-bulkbar-count{font-size:13px;font-weight:700;color:var(--text-primary);letter-spacing:-.1px;white-space:nowrap;flex:0 0 auto}
.rt-bulkbar-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rt-bulkbar-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border:.5px solid var(--chrome-border);border-radius:999px;background:var(--card-bg);color:var(--text-primary);font:inherit;font-size:12.5px;font-weight:600;letter-spacing:-.1px;cursor:pointer;box-shadow:var(--shadow-e1);transition:background var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast) var(--ease-spring),opacity var(--motion-fast)}
.rt-bulkbar-btn:hover{box-shadow:var(--shadow-e2);background:color-mix(in srgb,var(--app-accent) 7%,var(--card-bg))}
.rt-bulkbar-btn:active{transform:scale(.96)}
.rt-bulkbar-btn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 24%,transparent)}
.rt-bulkbar-btn:disabled{opacity:.45;cursor:default;box-shadow:none}
.rt-bulkbar-btn.is-primary{border-color:transparent;color:var(--on-accent);background:linear-gradient(to bottom,color-mix(in srgb,#fff 16%,var(--app-accent)),var(--app-accent) 64%);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 1px 2px color-mix(in srgb,var(--app-accent) 30%,transparent)}
.rt-bulkbar-btn.is-danger{border-color:transparent;color:#fff;background:linear-gradient(to bottom,color-mix(in srgb,#fff 14%,var(--color-error,#ef4444)),var(--color-error,#ef4444) 70%);box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 1px 2px color-mix(in srgb,var(--color-error,#ef4444) 30%,transparent)}
.rt-bulkbar-btn.is-danger:hover,.rt-bulkbar-btn.is-primary:hover{filter:brightness(1.05);background-blend-mode:normal}
.rt-bulkbar-ico{width:13px;height:13px;flex:0 0 auto;fill:none;stroke:currentColor}
.rt-bulkbar-btn:not(.is-primary):not(.is-danger) .rt-bulkbar-ico{color:var(--app-accent)}
.rt-bulkbar-cancel{flex:0 0 auto;height:32px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--text-secondary);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
.rt-bulkbar-cancel:hover{background:color-mix(in srgb,var(--app-accent) 8%,transparent);color:var(--text-primary)}
.rt-bulkbar-cancel:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 24%,transparent)}
@media (prefers-reduced-motion:reduce){.rt-bulkbar{animation:none}.rt-bulkbar-btn{transition:none}}
@media (prefers-reduced-transparency:reduce){.rt-bulkbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--surface)}}
/* Selection checkbox shown on cards/rows when a surface is in select-mode. */
.rt-selectable .rt-sel-cb{position:absolute;top:10px;left:10px;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--chrome-border);background:var(--card-bg);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;box-shadow:var(--shadow-e1);transition:background var(--motion-fast),border-color var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.rt-selectable .rt-sel-cb:hover{transform:scale(1.08)}
.rt-selectable .rt-sel-cb svg{width:13px;height:13px;color:#fff;opacity:0;fill:none;stroke:currentColor;stroke-width:2.5}
.rt-selectable.rt-sel-on .rt-sel-cb{background:var(--app-accent);border-color:transparent}
.rt-selectable.rt-sel-on .rt-sel-cb svg{opacity:1}
.rt-selectable.rt-sel-on{box-shadow:0 0 0 2px var(--app-accent),var(--shadow-e2)!important}
/* In select-mode the contacts card shifts its content right so the checkbox clears
   the avatar; the checkbox sits top-left over the rounded corner. */
.contacts-dir .ccard.rt-selectable{padding-left:42px}
.contacts-dir .ccard.rt-selectable .rt-sel-cb{top:50%;transform:translateY(-50%)}
.contacts-dir .ccard.rt-selectable .rt-sel-cb:hover{transform:translateY(-50%) scale(1.08)}
/* V39tt — task-bulk-btn: replace stale transition:filter */
.task-bulk-btn{font-size:12px;font-weight:500;padding:5px 12px;border:0.5px solid transparent;border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;letter-spacing:-.05px;transition:background var(--motion-fast),opacity var(--motion-fast),transform var(--motion-fast);display:inline-flex;align-items:center;gap:5px}
.task-bulk-btn:active{transform:scale(.97)}
.task-bulk-btn .tb-ico{width:11px;height:11px;flex-shrink:0;opacity:.8}
.task-bulk-btn.done{background:var(--ok);color:var(--on-accent);box-shadow:0 1px 2px rgba(52,199,89,.25)}
.task-bulk-btn.done:hover{opacity:.92}
.task-bulk-btn.assign{background:var(--app-accent);color:var(--on-accent);box-shadow:0 1px 2px color-mix(in srgb, var(--app-accent) 25%, transparent)}
.task-bulk-btn.assign:hover{opacity:.92}
.task-bulk-btn.del{background:var(--app-danger);color:var(--on-accent);box-shadow:0 1px 2px rgba(255,59,48,.25)}
.task-bulk-btn.del:hover{opacity:.92}
.task-bulk-btn.clear{background:transparent;border-color:var(--border);color:var(--text-primary)}
.task-bulk-btn.clear:hover{background:var(--surface-2)}
/* V134 — bulk-select checkbox: same circular control, focus-blue when checked. */
.task-sel-cb{-webkit-appearance:none;appearance:none;width:18px;height:18px;flex-shrink:0;cursor:pointer;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--text-primary) 26%,transparent);background:var(--card-bg);margin-top:1px;display:none;place-content:center;transition:background var(--motion-fast),border-color var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.task-sel-cb::before{content:'';width:9px;height:9px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;background-position:center;opacity:0;transform:scale(.5);transition:opacity var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.task-sel-cb:checked{background:var(--focus);border-color:var(--focus)}
.task-sel-cb:checked::before{opacity:1;transform:scale(1)}
.select-mode .task-sel-cb{display:inline-grid}
.select-mode .task-item.bulk-selected{background:color-mix(in srgb,var(--focus) 10%,var(--surface));border-color:var(--focus);outline:1px solid var(--focus)}
.select-mode .task-item{cursor:pointer}
/* ── Sub-tasks ── */
.task-subtask-area{grid-column:1/-1;margin-top:9px;padding-top:9px;border-top:0.5px solid var(--chrome-border)}
.subtask-progress-bar{height:3px;border-radius:2px;background:var(--surface-3);margin-bottom:9px;overflow:hidden}
.subtask-progress-fill{height:100%;border-radius:2px;background:var(--ok);transition:width var(--motion-slow)}
.subtask-list{display:flex;flex-direction:column;gap:3px;margin-bottom:6px}
.subtask-item{display:flex;align-items:center;gap:8px;padding:5px 9px;border-radius:var(--radius-sm);background:var(--surface-2);transition:background var(--motion-fast)}
.subtask-item:hover{background:var(--surface-3)}
.subtask-item.done .subtask-text{text-decoration:line-through;color:var(--text-muted)}
.subtask-text{flex:1;font-size:12.5px;color:var(--text-primary);overflow-wrap:anywhere;letter-spacing:-.05px}
.subtask-cb{width:15px;height:15px;border-width:1.5px}
.subtask-cb::before{width:8px;height:8px}
.subtask-del{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:11px;padding:2px 4px;border-radius:var(--radius-xs);opacity:0;line-height:1;transition:opacity var(--motion-fast),color var(--motion-fast),background var(--motion-fast)}
.subtask-item:hover .subtask-del{opacity:.65}
.subtask-del:hover{color:var(--app-danger);background:color-mix(in srgb,var(--app-danger) 10%,transparent);opacity:1}
.subtask-count{font-size:11px;font-weight:600;color:var(--text-muted);cursor:pointer;user-select:none;letter-spacing:-.05px}
.subtask-count.all-done{color:color-mix(in srgb, var(--color-success) 72%, var(--text-primary))}
.subtask-add-row{display:flex;gap:6px;align-items:center;margin-top:6px}
.subtask-input{flex:1;font-size:12.5px;padding:6px 10px;border:0.5px solid var(--chrome-border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text-primary);font-family:inherit;letter-spacing:-.05px;outline:none;transition:background var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast)}
.subtask-input:focus{background:var(--card-bg);border-color:color-mix(in srgb,var(--app-accent) 50%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 15%,transparent)}
.subtask-add-btn{font-size:12px;padding:5px 11px;border-radius:var(--radius-sm);border:0.5px solid var(--chrome-border);background:var(--chrome-bg);color:var(--text-primary);cursor:pointer;white-space:nowrap;font-weight:500;letter-spacing:-.05px;font-family:inherit;transition:background var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast),transform var(--motion-fast)}
.subtask-add-btn:hover{background:var(--app-accent);color:var(--on-accent);border-color:var(--app-accent)}
.subtask-add-btn:active{transform:scale(.97)}
/* V39mmm — subtask-toggle-btn press feedback */
.subtask-toggle-btn{font-size:11px;padding:3px 8px;border-radius:var(--radius-sm);border:0.5px solid var(--chrome-border);background:transparent;color:var(--text-muted);cursor:pointer;margin-left:4px;font-weight:500;letter-spacing:-.05px;font-family:inherit;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast)}
.subtask-toggle-btn:hover{background:var(--surface-2);color:var(--text-primary)}
.subtask-toggle-btn:active{transform:scale(.96)}
.task-add-row{display:flex;gap:8px;align-items:center}
.task-add-row .field-input{flex:1}
/* V73 — Tasks add form (.task-add-grid) had a surface-2 grey background
   INSIDE the white .modal-section card — same card-in-card pattern V67
   fixed for the Tracked tab. Drop bg/border, let parent card show through. */
.task-add-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,132px) minmax(0,116px) minmax(0,124px) minmax(0,110px);gap:8px;align-items:center;min-width:0;padding:0;background:transparent;border:none;margin-top:8px}
.task-add-reminders{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,150px) minmax(0,160px) minmax(0,150px) minmax(0,1fr) auto;gap:8px;align-items:center;min-width:0}
.task-add-help{font-size:11px;color:var(--text-muted);font-weight:500;letter-spacing:-.05px}

/* V75 — Apple Reminders-style add task form. Title is primary, everything
   else lives behind a "More details" <details> disclosure. */
.task-add-form{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.task-add-more{margin-top:0}
.task-add-more > summary.task-add-more-summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 0;
  font-size:14px;font-weight:500;color:var(--app-accent);letter-spacing:-.1px;
  user-select:none;-webkit-user-select:none;
}
.task-add-more > summary.task-add-more-summary::-webkit-details-marker{display:none}
.task-add-more > summary.task-add-more-summary::after{
  content:'';width:7px;height:7px;border-right:1.5px solid var(--app-accent);border-bottom:1.5px solid var(--app-accent);
  transform:rotate(45deg);transition:transform var(--motion-fast);margin-right:4px;
}
.task-add-more[open] > summary.task-add-more-summary::after{transform:rotate(-135deg)}
.task-add-more-body{display:flex;flex-direction:column;gap:14px;margin-top:6px;padding-top:6px;border-top:0.5px solid color-mix(in srgb, var(--text-primary) 6%, transparent)}
.task-add-action-row{display:flex;justify-content:flex-end;margin-top:6px}
.task-add-action-row .btn{min-width:140px;min-height:40px;font-weight:600}

/* Tracked Items — Apple-system */
.tracked-list{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.tracked-item{display:grid;grid-template-columns:minmax(0,1fr) 132px auto;gap:10px;padding:10px 12px;background:var(--surface-grad);border:none;border-radius:var(--radius-md);position:relative;overflow:hidden;transition:box-shadow var(--motion-base) var(--ease-out);box-shadow:var(--bevel-top),var(--shadow-e1)}
.tracked-item:hover{box-shadow:var(--bevel-top),var(--shadow-e2)}
/* pass-2 G1: status via tinted whole-row fill (NOT a left edge-spine — hard rule).
   Status chips/pills in the row carry the explicit label + color. */
.tracked-item.open{background:color-mix(in srgb,var(--app-accent) 4%,var(--card-bg))}
.tracked-item.waiting,.tracked-item.submitted{background:color-mix(in srgb,var(--color-warning,#ff9500) 5%,var(--card-bg))}
.tracked-item.approved,.tracked-item.resolved,.tracked-item.closed{background:color-mix(in srgb,var(--color-success) 4%,var(--card-bg))}
.tracked-item.rejected,.tracked-item.void{background:var(--surface-2);opacity:.7}
.tracked-item:hover{border-color:var(--border-strong)}
.tracked-item:hover .tracked-delete{opacity:1}
.tracked-main{min-width:0}
.tracked-title{font-size:13px;font-weight:500;letter-spacing:-.1px;color:var(--text-primary);line-height:1.4;overflow-wrap:anywhere;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif}
/* Feature #7 — RFI number badge + escalated pill + register summary strip. */
.tracked-rfi-num{display:inline-block;font-weight:700;font-size:11px;letter-spacing:.02em;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 12%,transparent);border-radius:5px;padding:1px 6px;margin-right:2px;font-variant-numeric:tabular-nums;vertical-align:1px}
.tracked-pill.tracked-escalated{background:color-mix(in srgb,var(--color-error) 12%,transparent);color:var(--color-error);border-color:color-mix(in srgb,var(--color-error) 28%,transparent);font-weight:600}
/* Feature #11 — linked-stage chip + link button on RFI/submittal rows. */
.tracked-pill.tracked-stage-link{background:color-mix(in srgb,var(--app-accent) 10%,transparent);color:var(--app-accent);border-color:color-mix(in srgb,var(--app-accent) 26%,transparent)}
.tracked-stagelink-btn{background:none;border:none;cursor:pointer;font-size:14px;opacity:.6;padding:2px 5px;border-radius:6px}.tracked-stagelink-btn:hover{opacity:1;background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
.rfi-reg-strip{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 12px;padding:10px 14px;border-radius:var(--radius-lg,14px);background:var(--surface-2,var(--card-bg));border:0.5px solid var(--chrome-border);box-shadow:var(--lg-edge),var(--shadow-e1)}
.rfi-reg-counts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.rfi-reg-chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--text-primary);background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:999px;padding:3px 10px}
.rfi-reg-chip.rfi-reg-overdue{color:var(--color-error);border-color:color-mix(in srgb,var(--color-error) 30%,transparent);background:color-mix(in srgb,var(--color-error) 9%,transparent)}
.rfi-reg-chip.rfi-reg-soon{color:var(--color-warning);border-color:color-mix(in srgb,var(--color-warning) 30%,transparent);background:color-mix(in srgb,var(--color-warning) 9%,transparent)}
.rfi-reg-chip.rfi-reg-muted{color:var(--text-muted)}
.rfi-reg-aging{display:flex;gap:6px;margin-left:auto}
.rfi-age{display:flex;flex-direction:column;align-items:center;min-width:42px;font-size:15px;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums;background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:8px;padding:4px 6px;line-height:1.1}
.rfi-age i{font-size:9px;font-weight:600;font-style:normal;color:var(--text-muted);margin-top:2px;text-transform:none;letter-spacing:0}
.rfi-age-c{color:var(--color-warning)}.rfi-age-d{color:var(--color-error)}
.rfi-reg-escalate{font-size:12px;padding:6px 12px}
/* Feature #11 — schedule-impact banner under the RFI register strip (signal via fill+icon). */
.rfi-sched-impact{display:flex;align-items:flex-start;gap:9px;margin:8px 0 12px;padding:10px 14px;border-radius:var(--radius-lg,14px);font-size:12.5px;line-height:1.5;color:var(--text-primary);background:color-mix(in srgb,var(--color-error) 8%,var(--surface-2,var(--card-bg)));border:0.5px solid color-mix(in srgb,var(--color-error) 26%,transparent);box-shadow:var(--lg-edge),var(--shadow-e1)}
.rfi-si-ico{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:0 0 22px;border-radius:50%;color:var(--color-error);background:color-mix(in srgb,var(--color-error) 15%,transparent);margin-top:1px}
.tracked-desc{font-size:12px;color:var(--text-muted);margin-top:4px;line-height:1.45;overflow-wrap:anywhere;letter-spacing:-.05px}
.tracked-meta{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.tracked-pill{display:inline-flex;align-items:center;gap:4px;min-height:18px;padding:2px 7px;border-radius:var(--radius-sm);border:0.5px solid transparent;background:var(--surface-2);color:var(--text-muted);font-size:10.5px;font-weight:500;line-height:1.25;letter-spacing:-.05px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif}
.tracked-pill .tp-ico{width:10px;height:10px;flex-shrink:0;opacity:.85}
/* Ship 6 (2026-05-15 cont. 19 bundle-2) — time-in-status pill + history popover */
.tracked-pill.tracked-age-fresh{background:color-mix(in srgb,var(--ok) 8%,transparent);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 22%,transparent)}
.tracked-pill.tracked-age-warn{background:color-mix(in srgb,var(--color-warning) 10%,transparent);color:color-mix(in srgb,var(--color-warning) 80%,var(--text-primary));border-color:color-mix(in srgb,var(--color-warning) 25%,transparent)}
.tracked-pill.tracked-age-stale{background:color-mix(in srgb,var(--color-error) 10%,transparent);color:color-mix(in srgb,var(--color-error) 78%,var(--text-primary));border-color:color-mix(in srgb,var(--color-error) 25%,transparent)}
.tracked-history-pop{position:fixed;z-index:var(--z-top);background:var(--card-bg);color:var(--text-primary);border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);box-shadow:0 12px 36px rgba(0,0,0,.16);min-width:240px;max-width:300px;padding:8px 0;font-size:12.5px}
.tracked-history-head{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;padding:0 12px 8px;border-bottom:0.5px solid var(--chrome-border);margin-bottom:6px}
.tracked-history-row{padding:6px 12px;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.tracked-history-row:hover{background:var(--chrome-bg-hover)}
.tracked-history-arrow{font-weight:600;color:var(--text-primary)}
.tracked-history-ts{font-size:11px;color:var(--text-muted);flex-shrink:0}
.tracked-type-rfi{background:color-mix(in srgb,var(--app-accent) 10%,transparent);color:var(--app-accent);border-color:color-mix(in srgb,var(--app-accent) 22%,transparent);font-weight:600}
.tracked-type-change-order{background:color-mix(in srgb,#ff9500 10%,transparent);color:#7a4d00;border-color:color-mix(in srgb,#ff9500 25%,transparent);font-weight:600}
.tracked-type-selection{background:color-mix(in srgb,#5e5ce6 10%,transparent);color:#4a2d9c;border-color:color-mix(in srgb,#5e5ce6 25%,transparent);font-weight:600}
.tracked-type-inspection{background:color-mix(in srgb,var(--color-success) 10%,transparent);color:color-mix(in srgb, var(--color-success) 72%, var(--text-primary));border-color:color-mix(in srgb,var(--color-success) 25%,transparent);font-weight:600}
.tracked-type-blocker{background:color-mix(in srgb,var(--app-danger) 10%,transparent);color:#c00;border-color:color-mix(in srgb,var(--app-danger) 25%,transparent);font-weight:600}
/* V128 — submittal tracked type (teal) */
.tracked-type-submittal{background:color-mix(in srgb,#0ea5a5 12%,transparent);color:color-mix(in srgb,#0ea5a5 78%,var(--text-primary));border-color:color-mix(in srgb,#0ea5a5 28%,transparent);font-weight:600}
.tracked-pill.overdue{background:color-mix(in srgb,var(--app-danger) 10%,transparent);color:#c00;border-color:color-mix(in srgb,var(--app-danger) 25%,transparent)}
.tracked-pill.due-soon{background:color-mix(in srgb,#ff9500 10%,transparent);color:#7a4d00;border-color:color-mix(in srgb,#ff9500 25%,transparent)}
.tracked-status-select{align-self:start;font-size:11px;padding:3px 22px 3px 9px;border-radius:var(--radius-sm);border:0.5px solid var(--chrome-border);background:var(--chrome-bg);color:var(--text-muted);cursor:pointer;font-weight:500;letter-spacing:-.05px;font-family:inherit;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238e8e93'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;transition:background var(--motion-fast),border-color var(--motion-fast)}
.tracked-status-select:hover{background-color:var(--chrome-bg-hover)}
.tracked-delete{background:transparent;border:none;color:var(--text-muted);cursor:pointer;font-size:14px;padding:4px 6px;border-radius:var(--radius-sm);opacity:0;transition:opacity var(--motion-fast),color var(--motion-fast),background var(--motion-fast);line-height:1;flex-shrink:0}
.tracked-pdf-btn,.tracked-email-btn{background:transparent;border:none;color:var(--text-muted);cursor:pointer;font-size:14px;padding:4px 6px;border-radius:var(--radius-sm);opacity:0;transition:opacity var(--motion-fast),color var(--motion-fast),background var(--motion-fast);line-height:1;flex-shrink:0}
.tracked-item:hover .tracked-pdf-btn,.tracked-item:hover .tracked-email-btn{opacity:.7}
.tracked-pdf-btn:hover,.tracked-email-btn:hover{opacity:1;background:var(--chrome-bg-hover)}
.tracked-delete:hover{color:var(--app-danger);background:color-mix(in srgb,var(--app-danger) 10%,transparent);opacity:1}
.tracked-progress{font-size:11px;color:var(--text-muted);margin-bottom:10px;font-weight:500;letter-spacing:-.05px}

/* ═══ Tracked · Pass-2 modal composition (proto 38) — open-count ring + continuous
   status strip + ball-in-court roll-up + checklist tracker rows. ALL scoped under
   #trackedList so the .type-pill / .stat-pill / .bic names never collide with the
   global ball-in-court board (.bic-scorecard) or the calendar type pills. */
#trackedList .thero{display:grid;grid-template-columns:188px 1fr;gap:20px;align-items:center;background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 8%,var(--card-bg)),var(--card-bg) 70%);border-radius:20px;padding:20px 22px;box-shadow:var(--bevel-top),var(--shadow-e2);border:.5px solid color-mix(in srgb,var(--app-accent) 6%,rgba(0,0,0,.05));margin-bottom:16px}
#trackedList .thero .metric-door{border-radius:999px}
#trackedList .tring{width:150px;height:150px;border-radius:999px;display:grid;place-items:center;margin:0 auto;position:relative}
#trackedList .tring::before{content:"";position:absolute;inset:13px;border-radius:999px;background:var(--card-bg);box-shadow:inset 0 1px 4px rgba(0,0,0,.08)}
#trackedList .tring .rc{position:relative;text-align:center}
#trackedList .tring .rn{font-size:40px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1;color:var(--text-primary)}
#trackedList .tring .rl{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);margin-top:3px}
#trackedList .status-strip{display:grid;grid-template-columns:repeat(4,1fr);border-radius:15px;overflow:hidden;background:var(--card-bg);box-shadow:inset 0 0 0 .5px var(--chrome-border,rgba(0,0,0,.08))}
#trackedList .ss-cell{padding:13px 15px;position:relative}
#trackedList .ss-cell+.ss-cell{box-shadow:inset .5px 0 0 var(--chrome-border,rgba(0,0,0,.08))}
#trackedList .ss-cell .ss-l{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
#trackedList .ss-cell .ss-l::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--ssc,var(--text-muted));flex:0 0 8px}
#trackedList .ss-cell .ss-v{font-size:28px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.05;color:var(--ssc,var(--text-primary));margin-top:3px}
#trackedList .ss-cell .ss-s{font-size:11px;color:var(--text-secondary);font-weight:600;margin-top:1px}
/* ball-in-court roll-up (tbic-* — distinct from the global .bic-scorecard board) */
#trackedList .tbic{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:11px;margin-bottom:16px}
#trackedList .tbic-card{background:var(--card-bg);border-radius:15px;padding:12px 14px;box-shadow:var(--bevel-top),var(--shadow-e1);border:.5px solid rgba(0,0,0,.05);display:flex;align-items:center;gap:11px}
#trackedList .tbic-av{width:36px;height:36px;border-radius:999px;flex:0 0 36px;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:800;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif}
#trackedList .tbic-l{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
#trackedList .tbic-name{font-size:13px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
#trackedList .tbic-n{margin-left:auto;font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text-primary)}
/* G5-W1-F3 — three-tone SLA ramp on the "In court" tile (green→amber→red). CONTAINED fill-tint +
   a tinted hairline border (NOT an edge-strip); the number inherits the tone. Matches the global
   board, court chip and inbox so the BIC language is identical everywhere. */
#trackedList .tbic-card.tbic-ok{background:color-mix(in srgb,var(--color-success) 9%,var(--card-bg));border-color:color-mix(in srgb,var(--color-success) 26%,transparent)}
#trackedList .tbic-card.tbic-ok .tbic-n{color:var(--color-success)}
#trackedList .tbic-card.tbic-warn{background:color-mix(in srgb,var(--color-warning) 12%,var(--card-bg));border-color:color-mix(in srgb,var(--color-warning) 30%,transparent)}
#trackedList .tbic-card.tbic-warn .tbic-n{color:color-mix(in srgb,var(--color-warning) 66%,#5a3800)}
#trackedList .tbic-card.tbic-error{background:color-mix(in srgb,var(--color-error) 12%,var(--card-bg));border-color:color-mix(in srgb,var(--color-error) 30%,transparent)}
#trackedList .tbic-card.tbic-error .tbic-n{color:var(--color-error)}
/* checklist tracker card */
#trackedList .tcard{background:var(--card-bg);border-radius:18px;box-shadow:var(--bevel-top),var(--shadow-e2);border:.5px solid color-mix(in srgb,var(--app-accent) 4%,rgba(0,0,0,.05));overflow:hidden}
#trackedList .tcard-head{display:flex;align-items:center;gap:10px;padding:13px 17px;border-bottom:.5px solid var(--chrome-border,rgba(0,0,0,.08));flex-wrap:wrap}
#trackedList .tcard-head h3{font-size:15px;font-weight:800;margin:0;letter-spacing:-.01em}
#trackedList .tcard-head .tc-count{font-weight:700;font-size:12px;color:var(--text-secondary)}
#trackedList .tcard-head .tc-spacer{flex:1}
#trackedList .tfilter{display:inline-flex;padding:3px;border-radius:999px;background:var(--surface-2)}
#trackedList .tfilter button{border:0;background:transparent;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700;color:var(--text-secondary);cursor:pointer;transition:background var(--motion-fast,.15s),color var(--motion-fast,.15s)}
#trackedList .tfilter button.on{background:var(--card-bg);color:var(--text-primary);box-shadow:var(--shadow-e1)}
#trackedList .titem{display:flex;align-items:center;gap:12px;padding:12px 17px;border-bottom:.5px solid var(--chrome-border,rgba(0,0,0,.08));transition:background var(--motion-fast,.15s)}
#trackedList .titem:last-child{border-bottom:0}
#trackedList .titem:hover{background:var(--hover-overlay,rgba(0,0,0,.025))}
#trackedList .tcheck{width:24px;height:24px;border-radius:999px;flex:0 0 24px;border:2px solid var(--border-strong);display:grid;place-items:center;font-size:12px;color:transparent;cursor:pointer;background:transparent;transition:background var(--motion-fast,.15s),border-color var(--motion-fast,.15s)}
#trackedList .tcheck:hover{border-color:var(--color-success)}
#trackedList .tcheck.done{background:var(--color-success);border-color:var(--color-success);color:#fff}
#trackedList .titem.done .ti-name{text-decoration:line-through;color:var(--text-muted)}
#trackedList .ti-main{min-width:0;flex:1}
#trackedList .ti-name{font-size:14px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#trackedList .ti-sub{font-size:11.5px;color:var(--text-secondary);font-weight:600;margin-top:3px;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
#trackedList .ti-sub .ti-detail{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px}
#trackedList .type-pill{font-size:9.5px;font-weight:800;padding:2px 8px;border-radius:999px;letter-spacing:.02em;text-transform:uppercase;background:var(--badge-neutral-bg,var(--surface-2));color:var(--badge-neutral-fg,var(--text-secondary))}
#trackedList .type-pill.t-rfi{background:var(--type-rfi-bg,color-mix(in srgb,var(--color-info) 14%,transparent));color:var(--type-rfi-fg,color-mix(in srgb,var(--color-info) 78%,var(--text-primary)))}
#trackedList .type-pill.t-submittal{background:var(--cd-sub-bg,color-mix(in srgb,#8b5cf6 14%,transparent));color:var(--cd-sub-fg,#7c3aed)}
#trackedList .type-pill.t-change-order{background:var(--type-change-bg,color-mix(in srgb,var(--color-warning) 16%,transparent));color:var(--type-change-fg,color-mix(in srgb,var(--color-warning) 80%,var(--text-primary)))}
#trackedList .type-pill.t-selection{background:color-mix(in srgb,#2dd4bf 16%,transparent);color:#0a8a8f}
#trackedList .type-pill.t-inspection{background:var(--type-inspection-bg,color-mix(in srgb,#a78bfa 16%,transparent));color:var(--type-inspection-fg,#7c3aed)}
#trackedList .type-pill.t-blocker{background:color-mix(in srgb,var(--color-error) 14%,transparent);color:color-mix(in srgb,var(--color-error) 80%,var(--text-primary))}
#trackedList .stat-pill{font-size:9.5px;font-weight:800;padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.02em}
#trackedList .stat-pill.s-open{background:color-mix(in srgb,var(--color-info) 14%,transparent);color:color-mix(in srgb,var(--color-info) 78%,var(--text-primary))}
#trackedList .stat-pill.s-waiting{background:var(--status-waiting-bg,color-mix(in srgb,var(--color-warning) 15%,transparent));color:var(--status-waiting-fg,color-mix(in srgb,var(--color-warning) 80%,var(--text-primary)))}
#trackedList .stat-pill.s-submitted{background:var(--badge-neutral-bg,var(--surface-2));color:var(--badge-neutral-fg,var(--text-secondary))}
#trackedList .stat-pill.s-done{background:var(--status-complete-bg,color-mix(in srgb,var(--color-success) 15%,transparent));color:var(--status-complete-fg,color-mix(in srgb,var(--color-success) 80%,var(--text-primary)))}
#trackedList .ti-owner{display:flex;align-items:center;gap:7px;flex:0 0 auto}
#trackedList .ti-owner .tbic-av{width:27px;height:27px;border-radius:999px;flex:0 0 27px;font-size:10px}
#trackedList .ti-due{font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;min-width:78px;text-align:right;flex:0 0 auto;color:var(--text-secondary);display:flex;align-items:center;gap:4px;justify-content:flex-end}
#trackedList .ti-due.over{color:var(--color-error)}
#trackedList .ti-due.soon{color:color-mix(in srgb,var(--color-warning) 85%,var(--text-primary))}
#trackedList .tcard-add{display:flex;gap:8px;padding:12px 17px;border-top:.5px solid var(--chrome-border,rgba(0,0,0,.08));align-items:center}
#trackedList .tcard-add select{flex:0 0 130px}
#trackedList .tcard-add input{flex:1;min-width:0}
@media(max-width:760px){
  #trackedList .thero{grid-template-columns:1fr;gap:14px}
  #trackedList .status-strip{grid-template-columns:repeat(2,1fr)}
  #trackedList .ss-cell:nth-child(-n+2){box-shadow:inset 0 -.5px 0 var(--chrome-border,rgba(0,0,0,.08))}
  #trackedList .ss-cell:nth-child(3){box-shadow:none}
  #trackedList .titem{flex-wrap:wrap}
  #trackedList .ti-due{min-width:0;margin-left:auto}
  #trackedList .tcard-add{flex-wrap:wrap}
  #trackedList .tcard-add select{flex:1 1 100%}
}

/* ── C2 — Turnaround SLA pill (on-time / due-soon / overdue) ─────────────────
   Reuses the tracked-pill family + semantic tokens. The accountability verdict
   of an open item vs its turnaround target. */
.trn-pill{display:inline-flex;align-items:center;gap:4px;min-height:18px;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:650;line-height:1.25;letter-spacing:-.02px;border:0.5px solid transparent;font-variant-numeric:tabular-nums;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif}
.trn-pill .tp-ico{width:10px;height:10px;flex-shrink:0;opacity:.9}
.trn-on_time{background:color-mix(in srgb,var(--color-success) 12%,transparent);color:color-mix(in srgb,var(--color-success) 72%,var(--text-primary));border-color:color-mix(in srgb,var(--color-success) 28%,transparent)}
.trn-due_soon{background:color-mix(in srgb,var(--color-warning) 14%,transparent);color:color-mix(in srgb,var(--color-warning) 78%,var(--text-primary));border-color:color-mix(in srgb,var(--color-warning) 30%,transparent)}
.trn-overdue{background:color-mix(in srgb,var(--color-error) 14%,transparent);color:color-mix(in srgb,var(--color-error) 80%,var(--text-primary));border-color:color-mix(in srgb,var(--color-error) 32%,transparent)}

/* ── C2 — Ball-in-Court accountability board ─────────────────────────────────
   Scorecard tiles + per-party group cards. Solid content cards (legibility),
   shadow-for-elevation, severity-toned. Every item row is a door. */
.bic-scorecard{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:12px;margin-bottom:18px}
/* PM-grade accountability rollup banner — leads the board; live distribution bar + plain-language headline. */
.bic-rollup{display:flex;gap:16px;align-items:flex-start;background:linear-gradient(165deg,color-mix(in srgb,var(--app-accent) 7%,var(--card-bg)),var(--card-bg) 70%);border:.5px solid var(--chrome-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-e2),inset 0 1px 0 rgba(255,255,255,.18);padding:18px 20px;margin-bottom:14px}
.bic-rollup.tone-error{background:linear-gradient(165deg,color-mix(in srgb,var(--color-error) 9%,var(--card-bg)),var(--card-bg) 72%);box-shadow:var(--shadow-e2),inset 0 0 0 .5px color-mix(in srgb,var(--color-error) 22%,transparent),inset 0 1px 0 rgba(255,255,255,.16)}
.bic-rollup.tone-warning{background:linear-gradient(165deg,color-mix(in srgb,var(--color-warning) 9%,var(--card-bg)),var(--card-bg) 72%);box-shadow:var(--shadow-e2),inset 0 0 0 .5px color-mix(in srgb,var(--color-warning) 22%,transparent),inset 0 1px 0 rgba(255,255,255,.16)}
.bic-rollup.tone-success{background:linear-gradient(165deg,color-mix(in srgb,var(--color-success) 8%,var(--card-bg)),var(--card-bg) 74%)}
.bic-roll-mark{width:46px;height:46px;flex:0 0 46px;border-radius:14px;display:grid;place-items:center;background:var(--card-bg);box-shadow:var(--shadow-e1),inset 0 1px 0 rgba(255,255,255,.4)}
.bic-roll-mark svg{width:22px;height:22px;color:var(--app-accent)}
.bic-rollup.tone-error .bic-roll-mark svg{color:var(--color-error)}
.bic-rollup.tone-warning .bic-roll-mark svg{color:color-mix(in srgb,var(--color-warning) 80%,var(--text-primary))}
.bic-rollup.tone-success .bic-roll-mark svg{color:var(--color-success)}
.bic-roll-main{flex:1;min-width:0}
.bic-roll-kicker{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.bic-roll-head{font-size:21px;font-weight:760;letter-spacing:-.02em;line-height:1.12;color:var(--text-primary);margin-top:3px}
.bic-rollup.tone-error .bic-roll-head{color:var(--color-error)}
.bic-roll-sub{font-size:12.5px;font-weight:600;color:var(--text-muted);margin-top:4px;font-variant-numeric:tabular-nums}
.bic-roll-bar{display:flex;gap:3px;height:10px;border-radius:999px;overflow:hidden;margin-top:12px;background:var(--surface-2)}
.bic-roll-seg{border-radius:999px;min-width:4px;transition:flex var(--motion-slow) var(--ease-out)}
.bic-roll-seg.seg-error{background:linear-gradient(90deg,color-mix(in srgb,var(--color-error) 78%,#fff),var(--color-error))}
.bic-roll-seg.seg-warn{background:linear-gradient(90deg,color-mix(in srgb,var(--color-warning) 76%,#fff),var(--color-warning))}
.bic-roll-seg.seg-ok{background:linear-gradient(90deg,color-mix(in srgb,var(--color-success) 76%,#fff),var(--color-success))}
.bic-roll-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:9px}
.bic-roll-legend .bl{font-size:11px;font-weight:700;color:var(--text-muted);font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:5px}
.bic-roll-legend .bl::before{content:"";width:8px;height:8px;border-radius:999px;background:currentColor;flex:0 0 8px}
.bic-roll-legend .bl.seg-error{color:var(--color-error)}
.bic-roll-legend .bl.seg-warn{color:color-mix(in srgb,var(--color-warning) 82%,var(--text-primary))}
.bic-roll-legend .bl.seg-ok{color:var(--color-success)}
@media(max-width:640px){.bic-roll-head{font-size:18px}.bic-rollup{padding:15px 16px;gap:13px}}
@media (prefers-reduced-motion:reduce){.bic-roll-seg{transition:none}}
.bic-score-tile{background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);padding:15px 16px;box-shadow:var(--shadow-e2);position:relative;overflow:hidden;transition:transform var(--motion-base) var(--ease-spring),box-shadow var(--motion-base)}
/* 2026-06-02 §8.5 — was a colored LEFT edge-strip (::before bar). Re-expressed as
   a whole-tile tonal fill + ring; the big metric value already carries the tone. */
.bic-score-tile.tone-error{background:linear-gradient(160deg,color-mix(in srgb,var(--color-error) 10%,var(--card-bg)),var(--card-bg) 72%);box-shadow:var(--shadow-e2),inset 0 0 0 .5px color-mix(in srgb,var(--color-error) 24%,transparent)}
.bic-score-tile.tone-warning{background:linear-gradient(160deg,color-mix(in srgb,var(--color-warning) 10%,var(--card-bg)),var(--card-bg) 72%);box-shadow:var(--shadow-e2),inset 0 0 0 .5px color-mix(in srgb,var(--color-warning) 24%,transparent)}
.bic-score-tile.tone-success{background:linear-gradient(160deg,color-mix(in srgb,var(--color-success) 10%,var(--card-bg)),var(--card-bg) 72%);box-shadow:var(--shadow-e2),inset 0 0 0 .5px color-mix(in srgb,var(--color-success) 24%,transparent)}
.bic-score-lbl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.045em;color:var(--text-muted)}
.bic-score-val{font-size:30px;font-weight:760;letter-spacing:-.02em;line-height:1.04;margin-top:6px;color:var(--text-primary);font-variant-numeric:tabular-nums}
.bic-score-val.tone-error{color:var(--color-error)}
.bic-score-val.tone-warning{color:color-mix(in srgb,var(--color-warning) 82%,var(--text-primary))}
.bic-score-val.tone-success{color:var(--color-success)}
.bic-score-sub{font-size:11.5px;color:var(--text-muted);margin-top:3px;letter-spacing:-.05px}

.bic-groups{display:flex;flex-direction:column;gap:14px}
.bic-group{background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-e2);overflow:hidden}
.bic-group.has-overdue{box-shadow:var(--shadow-e2),inset 0 0 0 .5px color-mix(in srgb,var(--color-error) 30%,transparent)}
.bic-group.has-overdue .bic-group-head{background:linear-gradient(180deg,color-mix(in srgb,var(--color-error) 9%,var(--card-bg)),var(--card-bg))}
.bic-group-head{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:0.5px solid var(--chrome-border);background:linear-gradient(180deg,color-mix(in srgb,var(--app-accent) 5%,var(--card-bg)),var(--card-bg))}
.bic-group.has-overdue .bic-group-head{background:linear-gradient(180deg,color-mix(in srgb,var(--color-error) 7%,var(--card-bg)),var(--card-bg))}
.bic-group-avatar{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--app-accent),color-mix(in srgb,var(--app-accent) 60%,#000));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.18);letter-spacing:-.02em}
.bic-group.has-overdue .bic-group-avatar{background:linear-gradient(135deg,var(--color-error),color-mix(in srgb,var(--color-error) 62%,#000))}
.bic-group-id{min-width:0;flex:1}
.bic-group-name{font-size:15px;font-weight:680;letter-spacing:-.01em;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bic-group-meta{font-size:12px;color:var(--text-muted);margin-top:2px;display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.bic-group-stat{display:inline-flex;align-items:center;gap:4px;font-weight:600;font-variant-numeric:tabular-nums}
.bic-group-stat.over{color:var(--color-error)}
/* Per-owner inline aging bar — overdue/due-soon/on-track split, visible at the band level. */
.bic-group-head{align-items:center}
.bic-group-age{flex:0 0 96px;height:7px;border-radius:999px;display:flex;gap:2px;overflow:hidden;background:var(--surface-2);box-shadow:inset 0 1px 1px rgba(0,0,0,.07)}
.bic-group-age i{display:block;border-radius:999px;min-width:3px}
.bic-group-age .a-err{background:var(--color-error)}
.bic-group-age .a-warn{background:color-mix(in srgb,var(--color-warning) 88%,#000)}
.bic-group-age .a-ok{background:color-mix(in srgb,var(--color-success) 72%,#fff)}
@media(max-width:640px){.bic-group-age{display:none}}
/* Specular + spring press polish on the score tiles (base box-shadow/transition already set above). */
.bic-score-tile{box-shadow:var(--shadow-e2),inset 0 1px 0 rgba(255,255,255,.16)}
.bic-score-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-e3),inset 0 1px 0 rgba(255,255,255,.22)}
.bic-score-tile:active{transform:translateY(0) scale(.985)}
@media (prefers-reduced-motion:reduce){.bic-score-tile:hover{transform:none}}
.bic-group-rows{display:flex;flex-direction:column}
.bic-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:12px;align-items:center;padding:11px 16px;border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 7%,transparent);cursor:pointer;transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.bic-row:last-child{border-bottom:none}
.bic-row:hover{background:color-mix(in srgb,var(--app-accent) 5%,transparent)}
/* Feature #4 — per-row Nudge / Reassign actions (reveal on hover; always-on for touch). */
.bic-row-acts{display:flex;gap:6px;opacity:0;transition:opacity var(--motion-fast);flex-shrink:0}
.bic-row:hover .bic-row-acts,.bic-row:focus-within .bic-row-acts{opacity:1}
.bic-row-act{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 10%,transparent);border:0.5px solid color-mix(in srgb,var(--app-accent) 24%,transparent);border-radius:7px;padding:4px 9px;cursor:pointer;white-space:nowrap}
.bic-row-act:hover{background:color-mix(in srgb,var(--app-accent) 18%,transparent)}
@media(hover:none){.bic-row-acts{opacity:1}}
.bic-row:active{transform:scale(.992)}
.bic-row-main{min-width:0}
.bic-row-title{font-size:13.5px;font-weight:560;letter-spacing:-.1px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bic-row-sub{font-size:11.5px;color:var(--text-muted);margin-top:3px;display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.bic-row-wait{text-align:right;font-variant-numeric:tabular-nums;flex-shrink:0}
.bic-row-wait-d{font-size:17px;font-weight:720;letter-spacing:-.02em;line-height:1;color:var(--text-primary)}
/* Semantic aging of days-waiting: <2d green / 2–7d warn / >7d error (item 4). */
.bic-row-wait.wait-ok .bic-row-wait-d{color:var(--color-success)}
.bic-row-wait.wait-warn .bic-row-wait-d{color:var(--co-pending-fg,var(--color-warning))}
.bic-row-wait.wait-error .bic-row-wait-d,.bic-row-wait.over .bic-row-wait-d{color:var(--color-error)}
.bic-row-wait-lbl{font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-top:2px}
.bic-row-chev{width:16px;height:16px;color:var(--text-muted);opacity:.5;flex-shrink:0}
.bic-metrics{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
@media(max-width:680px){.bic-metrics{grid-template-columns:1fr}.bic-row{grid-template-columns:minmax(0,1fr) auto auto}.bic-row-chev{display:none}.bic-row-act span,.bic-row-act{font-size:11px;padding:4px 7px}}
.bic-metric-card{background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-e1);padding:14px 16px}
.bic-metric-title{font-size:12px;font-weight:680;color:var(--text-primary);margin-bottom:11px;display:flex;align-items:center;gap:7px}
.bic-metric-title svg{width:13px;height:13px;color:var(--app-accent);opacity:.85}
.bic-metric-row{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:12.5px}
.bic-metric-row-lbl{flex:1;min-width:0;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bic-metric-row-bar{flex:0 0 90px;height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.bic-metric-row-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--app-accent),color-mix(in srgb,var(--app-accent) 65%,#fff));transition:width var(--motion-slow) var(--ease-out)}
/* Value-toned fills: the slowest responders read hot (real diagnostic, same r.avg_days data). */
.bic-metric-row-fill.mr-cool{background:linear-gradient(90deg,color-mix(in srgb,var(--color-success) 70%,#fff),var(--color-success))}
.bic-metric-row-fill.mr-warm{background:linear-gradient(90deg,color-mix(in srgb,var(--color-warning) 72%,#fff),var(--color-warning))}
.bic-metric-row-fill.mr-hot{background:linear-gradient(90deg,color-mix(in srgb,var(--color-error) 72%,#fff),var(--color-error))}
@media (prefers-reduced-motion:reduce){.bic-metric-row-fill{transition:none}}
.bic-metric-row-val{flex:0 0 auto;font-variant-numeric:tabular-nums;font-weight:650;color:var(--text-primary);min-width:54px;text-align:right}

/* ── Pillar B — Unified Decision Log panel (chat decisions-of-record + manual decisions) ──
   A floating panel above the Comm-Log list; amber governance tone, icon-signalled, no edge-strip. */
.declog-panel{background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-e2);padding:15px 16px;margin-bottom:18px}
.declog-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}
.declog-h-title{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--text-primary)}
.declog-h-ico{width:16px;height:16px;color:var(--co-pending-fg,#9a6212)}
.declog-count{font-size:11.5px;font-weight:600;color:var(--text-muted);font-variant-numeric:tabular-nums;margin-left:auto}
.declog-h-actions{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto}
.declog-h-export{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;border:0.5px solid var(--chrome-border);background:var(--surface-2);color:var(--text-muted);cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}
.declog-h-export:hover{background:var(--surface-3,var(--surface-2));color:var(--text-primary);border-color:var(--text-muted)}
.declog-h-export svg{width:13px;height:13px}
.declog-finder{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:0.5px solid var(--chrome-border);border-radius:10px;padding:7px 11px;margin-bottom:12px}
.declog-find-ico{width:14px;height:14px;color:var(--text-muted);flex:0 0 auto}
.declog-find-in{flex:1;border:0;background:transparent;outline:0;font-size:13px;color:var(--text-primary)}
.declog-list{display:flex;flex-direction:column;gap:9px}
.declog-row{display:flex;gap:11px;align-items:flex-start;background:var(--surface-1,var(--card-bg));border:0.5px solid var(--chrome-border);border-radius:12px;padding:11px 13px;transition:box-shadow var(--motion-base),transform var(--motion-fast) var(--ease-spring)}
.declog-row:hover{box-shadow:var(--shadow-e1)}
.declog-row.is-superseded{opacity:.62}
.declog-row.is-superseded .declog-row-title{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--text-muted) 60%,transparent)}
.declog-row-main{flex:1;min-width:0}
.declog-row-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:4px}
.declog-cat-pill{font-size:10.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--co-pending-fg,#9a6212);background:var(--color-warning-bg,#fdf3e0);border-radius:6px;padding:2px 7px}
.declog-origin{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:650;border-radius:6px;padding:2px 7px}
.declog-origin svg{width:10px;height:10px}
.declog-origin-chat{color:var(--color-info,#2563c9);background:var(--color-info-bg,#e8f0fd)}
.declog-origin-manual{color:var(--text-secondary);background:var(--surface-2)}
.declog-superseded{font-size:10px;font-weight:700;color:var(--text-muted);background:var(--surface-2);border-radius:6px;padding:2px 7px;text-transform:uppercase;letter-spacing:.03em}
.declog-when{margin-left:auto;font-size:11px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.declog-row-title{font-size:13.5px;font-weight:650;color:var(--text-primary);line-height:1.35}
.declog-row-body{font-size:12.5px;color:var(--text-secondary);line-height:1.45;margin-top:3px}
.declog-sup{font-size:11.5px;color:var(--text-muted);margin-top:4px;font-style:italic}
.declog-row-by{font-size:11.5px;color:var(--text-muted);margin-top:5px}
.declog-row-acts{flex:0 0 auto;display:flex;gap:4px;align-items:center}
.declog-jump,.declog-del{width:26px;height:26px;border-radius:8px;border:0;background:transparent;color:var(--text-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--motion-fast),color var(--motion-fast)}
@media (pointer:coarse){.declog-jump,.declog-del{min-width:var(--tap-min,44px);min-height:var(--tap-min,44px)}}
.declog-jump svg,.declog-del svg{width:14px;height:14px}
.declog-jump:hover{background:var(--color-info-bg,#e8f0fd);color:var(--color-info,#2563c9)}
.declog-del:hover{background:var(--err-bg,#fdeaea);color:var(--app-danger,#c0392b)}
.declog-empty{font-size:12.5px;color:var(--text-muted);padding:14px 4px;text-align:center;line-height:1.5}

/* ── C3 — Project decision & communication log ───────────────────────────────
   Chronological human-authored record. Filter chips + entry cards (door each).*/
.clog-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.clog-filter-chips{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.clog-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;border:0.5px solid var(--chrome-border);background:var(--surface-2);color:var(--text-muted);font-size:12px;font-weight:600;cursor:pointer;letter-spacing:-.02px;transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.clog-chip:hover{background:var(--chrome-bg-hover)}
.clog-chip:active{transform:scale(.95)}
.clog-chip.active{background:var(--app-accent);color:#fff;border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.clog-list{display:flex;flex-direction:column;gap:10px}
.clog-entry{display:flex;gap:13px;background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-e1);padding:13px 15px;position:relative;overflow:hidden;transition:box-shadow var(--motion-base),transform var(--motion-fast) var(--ease-spring)}
.clog-entry:hover{box-shadow:var(--shadow-e2)}
/* pass-2 G1: category color is carried by the .clog-cat-ico medallion + .clog-cat-pill —
   the left edge-spine (banned hard rule) is removed. */
.clog-rail{flex:0 0 38px;display:flex;flex-direction:column;align-items:center;padding-top:2px}
.clog-cat-ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--cat-accent,var(--app-accent)) 14%,var(--card-bg));border:0.5px solid color-mix(in srgb,var(--cat-accent,var(--app-accent)) 26%,transparent)}
.clog-cat-ico svg{width:17px;height:17px;color:var(--cat-accent,var(--app-accent))}
.clog-body{flex:1;min-width:0}
.clog-entry-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.clog-cat-pill{display:inline-flex;align-items:center;padding:1px 8px;border-radius:999px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:color-mix(in srgb,var(--cat-accent,var(--app-accent)) 14%,transparent);color:var(--cat-accent,var(--app-accent));border:0.5px solid color-mix(in srgb,var(--cat-accent,var(--app-accent)) 28%,transparent)}
.clog-entry-title{font-size:14px;font-weight:660;letter-spacing:-.01em;color:var(--text-primary);flex:1;min-width:0}
.clog-entry-when{font-size:11.5px;color:var(--text-muted);flex-shrink:0;font-variant-numeric:tabular-nums}
.clog-entry-text{font-size:13px;color:var(--text-secondary,var(--text-primary));line-height:1.5;margin-top:5px;white-space:pre-wrap;overflow-wrap:anywhere}
.clog-entry-foot{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:9px}
.clog-meta-pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--text-muted);background:var(--surface-2);border:0.5px solid var(--chrome-border);border-radius:999px;padding:2px 8px;letter-spacing:-.03px}
.clog-meta-pill svg{width:10px;height:10px;opacity:.8}
.clog-meta-pill.link{cursor:pointer;color:var(--app-accent);border-color:color-mix(in srgb,var(--app-accent) 26%,transparent);background:color-mix(in srgb,var(--app-accent) 8%,transparent)}
.clog-meta-pill.link:hover{background:color-mix(in srgb,var(--app-accent) 15%,transparent)}
.clog-del{margin-left:auto;background:transparent;border:none;color:var(--text-muted);cursor:pointer;font-size:13px;padding:3px 6px;border-radius:var(--radius-sm);opacity:0;transition:opacity var(--motion-fast),color var(--motion-fast),background var(--motion-fast)}
.clog-entry:hover .clog-del{opacity:.65}
.clog-del:hover{opacity:1;color:var(--app-danger);background:color-mix(in srgb,var(--app-danger) 10%,transparent)}
.clog-cat-decision{--cat-accent:var(--app-accent)}
.clog-cat-directive{--cat-accent:#5e5ce6}
.clog-cat-verbal{--cat-accent:#ff9500}
.clog-cat-phone{--cat-accent:#0ea5a5}
.clog-cat-field_note{--cat-accent:var(--color-success)}
.clog-cat-meeting{--cat-accent:#bf5af2}
.clog-add-btn{display:inline-flex;align-items:center;gap:6px;flex-shrink:0}
/* Composer category picker (segmented chips inside the rrt-input-modal). */
.clog-cat-picker{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.clog-cat-pick{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:999px;border:0.5px solid var(--chrome-border);background:var(--surface-2);color:var(--text-secondary);font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;letter-spacing:-.02px;transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.clog-cat-pick svg{color:var(--cat-accent,var(--app-accent))}
.clog-cat-pick:hover{background:var(--chrome-bg-hover)}
.clog-cat-pick:active{transform:scale(.95)}
.clog-cat-pick.active{background:color-mix(in srgb,var(--cat-accent,var(--app-accent)) 14%,transparent);color:var(--cat-accent,var(--app-accent));border-color:color-mix(in srgb,var(--cat-accent,var(--app-accent)) 36%,transparent)}
.clog-cat-pick.active svg{color:var(--cat-accent,var(--app-accent))}
.clog-composer .clog-comp-body{font-family:inherit}
@media(prefers-reduced-motion:reduce){.bic-score-tile,.bic-row,.clog-chip,.clog-entry,.clog-cat-pick{transition:none}}

/* V68 — Section subtitle + stat-tile grid + ghost action button for the
   SOV and Punch List tabs. */
.modal-section-sub{font-size:13px;color:var(--text-muted);margin:-2px 0 12px;line-height:1.35;letter-spacing:-.1px}
/* P2.8 — Project Work Log (manual dated action journal) */
.wl-add-row{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.wl-textarea{resize:vertical;min-height:46px;font-family:inherit;line-height:1.4}
.wl-add-controls{display:flex;align-items:center;gap:10px;justify-content:flex-end}
.wl-date{width:auto;max-width:170px}
.wl-add-btn{flex:0 0 auto}
.wl-list{display:flex;flex-direction:column}
.wl-empty{color:var(--text-muted);font-size:13px;padding:14px 2px;line-height:1.4}
/* 2026-06-02 ALL-IN — Work Log rebuilt as a date-grouped journal timeline. */
.wl-filterbar{display:flex;align-items:center;gap:8px;padding:7px 11px;margin-bottom:14px;border-radius:var(--radius-md);background:var(--surface-2);box-shadow:inset 0 0 0 .5px var(--chrome-border)}
.wl-filter-ico{display:inline-flex;color:var(--text-muted)}.wl-filter-ico svg{width:14px;height:14px}
.wl-filter-input{flex:1;min-width:0;border:none;background:transparent;font-family:inherit;font-size:13px;color:var(--text-primary);outline:none}
.wl-filter-count{font-size:11px;font-weight:700;color:var(--text-muted);font-variant-numeric:tabular-nums;flex-shrink:0}
.wl-timeline{position:relative;display:flex;flex-direction:column;gap:18px}
.wl-day{position:relative}
.wl-day-head{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.2px;color:var(--text-secondary);margin-bottom:9px;text-transform:none}
.wl-day-dot{width:8px;height:8px;border-radius:50%;background:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 14%,transparent);flex-shrink:0}
.wl-day-n{font-size:10px;font-weight:700;color:var(--text-muted);background:var(--chrome-bg);border-radius:var(--radius-pill);padding:0 7px;line-height:16px;font-variant-numeric:tabular-nums}
.wl-day-items{display:flex;flex-direction:column;gap:8px;padding-left:4px;margin-left:3px;border-left:1.5px solid color-mix(in srgb,var(--chrome-border) 75%,transparent)}
.wl-entry{position:relative;padding-left:14px}
.wl-entry::before{content:"";position:absolute;left:-1px;top:13px;width:9px;height:1.5px;background:color-mix(in srgb,var(--chrome-border) 80%,transparent)}
.wl-entry-body{flex:1;min-width:0;background:var(--surface-grad);border-radius:var(--radius-md);padding:10px 12px;box-shadow:var(--bevel-top),var(--shadow-e1);transition:box-shadow var(--motion-base) var(--ease-out),transform var(--motion-fast) var(--ease-spring)}
.wl-entry:hover .wl-entry-body{box-shadow:var(--bevel-top),var(--shadow-e2);transform:translateX(1px)}
.wl-entry-text{font-size:13.5px;color:var(--text-primary);line-height:1.5;white-space:pre-wrap;word-break:break-word}
.wl-entry-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:7px}
.wl-who{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--text-secondary)}
.wl-who-av{width:17px;height:17px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:8.5px;font-weight:700;color:#fff;flex-shrink:0}
.wl-task-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 11%,transparent);padding:2px 9px;border-radius:var(--radius-pill);max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;transition:background var(--motion-fast)}
.wl-task-chip:hover{background:color-mix(in srgb,var(--app-accent) 18%,transparent)}
.wl-task-chip-ico{width:11px;height:11px;flex-shrink:0}
.wl-time{font-size:11px;color:var(--text-muted)}
.wl-del{margin-left:auto;background:none;border:0;color:var(--text-muted);cursor:pointer;padding:2px;border-radius:var(--radius-sm);opacity:0;transition:opacity var(--motion-fast),color var(--motion-fast)}
.wl-del svg{width:13px;height:13px}
.wl-entry:hover .wl-del{opacity:.7}.wl-del:hover{color:var(--app-danger);opacity:1}
/* first-run / empty state — a guided invitation, not a void */
/* 📒 V160 — .wl-firstrun replaced by the shared .rt-emptyplus zero state; the zero state
   flexes to fill the master column in full-page (no island + void). */
.wl-zero{margin-top:12px}
#workLogList[data-pfv-fill]{display:flex;flex-direction:column}
#workLogList[data-pfv-fill] .wl-zero{flex:1;display:flex;flex-direction:column}
#workLogList[data-pfv-fill] .wl-zero .rt-emptyplus{flex:1}
/* 📖 V165 — rich-state fill: the ledger PANEL frame stretches to the fold (breathing room
   inside the panel); entries themselves keep natural height. */
#workLogList.wl-rich-fill .wl-ledger{flex:1}
/* ===== Work Log · Pass 2 (2026-06-04) — labor as a living ledger ===== */
/* HERO — split panel: green command (this-week hrs + spark + crew) | billable split + by-crew */
.wl-hero{display:grid;grid-template-columns:1.4fr 1fr;gap:0;border-radius:22px;overflow:hidden;box-shadow:var(--shadow-e3);border:.5px solid color-mix(in srgb,var(--app-accent) 5%,rgba(0,0,0,.05));margin-bottom:18px}
/* pass-3 AUDIT FIX: deepened the light gradient stop so white text passes WCAG across the whole hero (was #19a07f 100% = white 3.29 fail; now #157a60, white ≥4.5). */
.wl-hero-l{position:relative;padding:22px 26px 24px;color:var(--on-accent,#fff);overflow:hidden;display:flex;flex-direction:column;background:linear-gradient(140deg,color-mix(in srgb,var(--app-accent) 86%,#000) 0%,var(--app-accent) 55%,color-mix(in srgb,var(--app-accent) 92%,#000) 100%)}
.wl-hero-l::after{content:"";position:absolute;inset:0;background:radial-gradient(130% 90% at 100% 0%,rgba(255,255,255,.16),transparent 55%),radial-gradient(90% 70% at 0% 100%,rgba(0,0,0,.18),transparent 60%);pointer-events:none}
/* 📒 V160 — metric + week chart share one row: the chart owns the width the void used to
   waste; bars read as a real chart (value labels on bars, baseline stubs for zero days). */
.wl-hero-row{position:relative;display:flex;align-items:flex-end;gap:28px;margin-top:12px;flex:1}
.wl-hero-metric{flex:0 0 auto;padding-bottom:16px}
.wl-hero-l .wl-hk{position:relative;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.82}
.wl-cmd{position:relative;display:inline-flex;align-items:baseline;gap:10px;margin:8px 0 4px;padding:10px 16px;border-radius:16px;background:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(0,0,0,.12),0 6px 16px -8px rgba(0,0,0,.4)}
.wl-cmd .wl-n{font-size:62px;font-weight:800;letter-spacing:-.04em;line-height:.9;font-variant-numeric:tabular-nums}
.wl-cmd .wl-u{font-size:19px;font-weight:700;opacity:.85}
.wl-hero-l .wl-sub{position:relative;font-size:13px;font-weight:600;opacity:.9}
.wl-hero-l .wl-sub b{font-weight:800}
.wl-spark{position:relative;display:flex;align-items:flex-end;gap:9px;height:104px;flex:1;min-width:0;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.22)}
.wl-spark .wl-sbar{flex:1;max-width:52px;border-radius:8px 8px 4px 4px;position:relative;background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.3));box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 14px -6px rgba(0,0,0,.45)}
.wl-spark .wl-sbar.hi{background:linear-gradient(180deg,#fff,rgba(255,255,255,.85));box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 8px 18px -6px rgba(0,0,0,.5)}
.wl-spark .wl-sbar.z{height:5px;background:rgba(255,255,255,.22);box-shadow:none;border-radius:999px}
.wl-spark .wl-sbar.z .wl-d{opacity:.5}
.wl-spark .wl-sbar .wl-bv{position:absolute;top:-19px;left:-8px;right:-8px;text-align:center;font-size:10.5px;font-weight:800;letter-spacing:-.02em;text-shadow:0 1px 3px rgba(0,0,0,.35);font-variant-numeric:tabular-nums}
.wl-spark .wl-sbar .wl-d{position:absolute;bottom:-17px;left:-8px;right:-8px;text-align:center;font-size:9.5px;font-weight:700;opacity:.85}
.wl-hero-r{padding:22px 24px;background:var(--card-bg,var(--surface));display:flex;flex-direction:column;gap:13px}
.wl-cap{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.wl-split{display:flex;align-items:center;gap:10px}
.wl-split .wl-lab{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);width:84px}
.wl-bar{flex:1;height:12px;border-radius:999px;background:var(--surface-2);overflow:hidden;display:flex}
.wl-bar i{display:block;height:100%;border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.wl-split .wl-v{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;width:54px;text-align:right}
.wl-hair{border:0;border-top:.5px solid color-mix(in srgb,var(--app-accent) 4%,rgba(0,0,0,.07));margin:3px 0}
/* CREW ROW — shared by hero by-crew + day ledger */
.wl-crew-row{display:flex;align-items:center;gap:11px;padding:11px 4px;border-bottom:.5px solid color-mix(in srgb,var(--app-accent) 3%,rgba(0,0,0,.05))}
.wl-crew-row:last-child{border-bottom:0}
/* 📒 V160 — lifted to the canonical Atira sphere recipe (was a flat disc w/ a bare inset) */
.wl-crew-av{width:30px;height:30px;border-radius:999px;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:800;flex-shrink:0;position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 4px rgba(0,0,0,.16),0 1px 2px rgba(16,24,40,.16),0 2px 6px -2px rgba(16,24,40,.2)}
.wl-crew-av::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.4),rgba(255,255,255,0) 60%)}
.wl-cr-trade{font-size:10px;font-weight:800;letter-spacing:.04em;padding:3px 8px;border-radius:999px;display:inline-block}
.wl-cr-name{font-weight:700;font-size:13.5px;color:var(--text-primary);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.wl-cr-meta{font-size:11.5px;color:var(--text-secondary);line-height:1.4}
.wl-cr-hours{margin-left:auto;text-align:right;flex-shrink:0}
.wl-cr-hours .wl-h{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--text-primary)}
.wl-cr-hours .wl-hl{font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}
.wl-bill-dot{width:8px;height:8px;border-radius:999px;flex-shrink:0}
.wl-crew-row .wl-del{align-self:center}
/* QUICK ADD — worker chip · desc · hours · billable · Add */
.wl-quickadd{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:16px;margin-bottom:16px;background:var(--surface-grad);box-shadow:var(--bevel-top),var(--shadow-e1);border:.5px solid rgba(0,0,0,.05);flex-wrap:wrap}
.wl-qa-worker{height:38px;width:148px;border-radius:11px;background:var(--surface-2);border:.5px solid var(--chrome-border);padding:0 12px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--text-primary);outline:none}
.wl-qa-field{flex:1;min-width:180px;height:38px;border-radius:11px;background:var(--surface-2);border:.5px solid var(--chrome-border);padding:0 14px;color:var(--text-primary);font-family:inherit;font-size:13px;font-weight:500;outline:none}
.wl-qa-field::placeholder{color:var(--text-muted);font-weight:600}
.wl-qa-field:focus,.wl-qa-worker:focus,.wl-qa-hours input:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 18%,transparent);border-color:color-mix(in srgb,var(--app-accent) 45%,var(--chrome-border))}
.wl-qa-hours{height:38px;border-radius:11px;background:var(--surface);border:.5px solid var(--chrome-border);display:inline-flex;align-items:center;gap:2px;padding:0 6px;box-shadow:var(--shadow-e1)}
.wl-qa-hours .wl-step{width:24px;height:30px;border:0;background:transparent;color:var(--text-secondary);font-size:16px;font-weight:700;cursor:pointer;border-radius:7px;line-height:1}
.wl-qa-hours .wl-step:hover{background:var(--surface-2);color:var(--app-accent)}
.wl-qa-hours input{width:38px;border:0;background:transparent;text-align:center;font-family:inherit;font-size:13px;font-weight:800;color:var(--text-primary);font-variant-numeric:tabular-nums;outline:none}
.wl-qa-hours .wl-hu{font-size:11px;font-weight:700;color:var(--text-muted);padding-right:5px}
.wl-qa-bill{height:38px;padding:0 13px;min-width:118px;justify-content:center;border-radius:11px;background:var(--surface);border:.5px solid var(--chrome-border);display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;box-shadow:var(--shadow-e1);cursor:pointer;color:var(--text-primary);transition:background var(--motion-fast),box-shadow var(--motion-fast)} /* 📒 min-width: Billable↔Overhead flip must not shift the row */
.wl-qa-bill:hover{background:var(--surface-2)}
.wl-qa-bill .wl-bdot{width:9px;height:9px;border-radius:999px;background:var(--color-success)}
.wl-qa-bill.is-overhead .wl-bdot{background:var(--color-warning)}
.wl-qa-add{height:38px;flex:0 0 auto}
/* DAY-GROUPED LEDGER */
.wl-day-head2{display:flex;align-items:center;gap:10px;margin:18px 0 8px}
.wl-day-head2:first-child{margin-top:2px}
.wl-day-head2 .wl-dd{font-size:13px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary)}
.wl-day-head2 .wl-dh-sum{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--text-muted)}
.wl-day-head2 .wl-dh-sum b{color:var(--app-accent);font-variant-numeric:tabular-nums}
.wl-ledger .wl-empty{padding:18px 4px}
/* WEEKLY ROLLUP + COST/BURN panel */
.wl-rollup-bar{flex:1;height:13px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.wl-rollup-bar i{display:block;height:100%;border-radius:999px;background:var(--rbc,var(--app-accent));box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
/* Empty state action row */
.wl-list .section-gap{height:16px}
@media (max-width:760px){
  .wl-hero{grid-template-columns:1fr}
  .wl-cmd .wl-n{font-size:52px}
  .wl-quickadd .wl-qa-worker{width:100%}
  .wl-quickadd .wl-qa-add{width:100%}
}
/* ── Time Clock (2026-06-16) — field punch + live on-site board ───────────────── */
.tc-surface{display:flex;flex-direction:column;gap:18px}
/* Punch hero — a dramatic glass panel with one primary action (the punch button). */
.tc-hero{position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--shadow-e3);padding:24px 26px;color:var(--on-accent,#fff);background:linear-gradient(140deg,color-mix(in srgb,var(--app-accent) 86%,#000) 0%,var(--app-accent) 55%,color-mix(in srgb,var(--app-accent) 92%,#000) 100%)}
.tc-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(130% 90% at 100% 0%,rgba(255,255,255,.16),transparent 55%);pointer-events:none}
.tc-hero.is-on{background:linear-gradient(140deg,color-mix(in srgb,var(--color-success,#34c759) 30%,color-mix(in srgb,var(--app-accent) 80%,#000)) 0%,var(--app-accent) 60%,color-mix(in srgb,var(--app-accent) 92%,#000) 100%)}
.tc-hero-top{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.tc-hero-lead{min-width:0}
.tc-hero-hk{position:relative;display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.82;margin-bottom:6px}
.tc-hero-live{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:tcPulse 2s ease-out infinite}
@media (prefers-reduced-motion:reduce){.tc-hero-live{animation:none}}
.tc-hero-state{position:relative;font-size:var(--text-display,32px);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.05}
.tc-hero-sub{position:relative;font-size:13px;font-weight:600;opacity:.9;margin-top:4px}
.tc-hero-sub b{font-weight:800}
/* Today rollup — a quiet glass stat tile on the trailing edge of the hero (real derived hours). */
.tc-hero-today{position:relative;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px 16px;border-radius:16px;background:rgba(255,255,255,.14);border:.5px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.tc-hero-today-n{font-size:26px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.tc-hero-today-u{font-size:14px;font-weight:700;opacity:.8;margin-left:1px}
.tc-hero-today-l{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.78;margin-top:5px}
/* Rejected-hours callout inside the hero — toned, rounded, never an edge-strip. */
.tc-hero-reject{position:relative;display:flex;align-items:center;gap:9px;margin-top:14px;padding:10px 13px;border-radius:13px;font-size:12.5px;font-weight:650;background:rgba(0,0,0,.22);border:.5px solid rgba(255,255,255,.16)}
.tc-hero-reject-ico{width:17px;height:17px;flex-shrink:0;color:#fff;opacity:.95}
.tc-hero-reject b{font-weight:800}
.tc-hero-reject-more{opacity:.78;font-weight:700}
.tc-hero-row{position:relative;display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}
/* The punch button — big, tactile, springy. Primary when clocked-out (green→accent), warning when clocked-in (stop). */
.tc-punch{appearance:none;border:none;cursor:pointer;font:inherit;font-size:16px;font-weight:800;letter-spacing:-.01em;padding:15px 30px;border-radius:16px;min-height:54px;display:inline-flex;align-items:center;gap:10px;color:#fff;box-shadow:var(--bevel-top),var(--shadow-e2);transition:transform var(--motion-fast,150ms) var(--ease-spring),box-shadow var(--motion-fast,150ms) var(--ease-out)}
.tc-punch svg{width:20px;height:20px}
.tc-punch.tc-in{background:linear-gradient(180deg,color-mix(in srgb,var(--color-success,#34c759) 92%,#fff),var(--color-success,#34c759))}
.tc-punch.tc-out{background:linear-gradient(180deg,color-mix(in srgb,var(--color-error,#ff3b30) 92%,#fff),var(--color-error,#ff3b30))}
.tc-punch:hover{transform:translateY(-2px);box-shadow:var(--bevel-top),var(--shadow-e3)}
.tc-punch:active{transform:scale(.97);box-shadow:var(--bevel-top),var(--shadow-e1)}
.tc-break-btn{appearance:none;cursor:pointer;font:inherit;font-size:13px;font-weight:700;padding:11px 18px;border-radius:13px;min-height:44px;color:var(--on-accent,#fff);background:rgba(255,255,255,.16);border:.5px solid rgba(255,255,255,.28);backdrop-filter:blur(8px);transition:transform var(--motion-fast,150ms) var(--ease-spring),background var(--motion-fast,150ms)}
.tc-break-btn:hover{background:rgba(255,255,255,.26);transform:translateY(-1px)}
.tc-break-btn:active{transform:scale(.97)}
.tc-hero-field{display:flex;flex-direction:column;gap:3px}
.tc-hero-field label{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.78}
.tc-hero-field input,.tc-hero-field select{appearance:none;font:inherit;font-size:13px;font-weight:600;padding:9px 12px;border-radius:11px;min-height:40px;min-width:150px;color:var(--on-accent,#fff);background:rgba(0,0,0,.18);border:.5px solid rgba(255,255,255,.26)}
.tc-hero-field input::placeholder{color:rgba(255,255,255,.6)}
.tc-elapsed{position:relative;font-variant-numeric:tabular-nums;font-weight:800;font-size:15px;opacity:.95}
.tc-onbreak-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.2);text-transform:uppercase;letter-spacing:.06em}
/* On-site board + history = SOLID floating content panels on the matte (V133 / glass-not-content). */
.tc-panel{background:var(--card-bg,var(--surface));border-radius:var(--radius-lg,16px);box-shadow:var(--shadow-e2);padding:18px 20px}
.tc-panel-head{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.tc-panel-title{font-size:var(--text-title,17px);font-weight:700;letter-spacing:-.01em;color:var(--text-primary)}
.tc-panel-ico{width:17px;height:17px;color:var(--app-accent)}
.tc-live-dot{width:8px;height:8px;border-radius:50%;background:var(--color-success,#34c759);box-shadow:0 0 0 0 color-mix(in srgb,var(--color-success,#34c759) 70%,transparent);animation:tcPulse 2s ease-out infinite;margin-left:auto}
@keyframes tcPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--color-success,#34c759) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.tc-live-dot{animation:none}}
.tc-onsite-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.tc-worker-card{background:var(--surface-grad,var(--surface));border-radius:14px;box-shadow:var(--bevel-top),var(--shadow-e1);padding:14px 16px;transition:transform var(--motion-fast,150ms) var(--ease-spring),box-shadow var(--motion-fast,150ms)}
.tc-worker-card:hover{transform:translateY(-2px);box-shadow:var(--bevel-top),var(--shadow-e2)}
.tc-worker-card.is-stale{box-shadow:var(--bevel-top),0 0 0 1.5px color-mix(in srgb,var(--color-warning,#ff9500) 55%,transparent),var(--shadow-e1)}
.tc-wc-name{font-size:14px;font-weight:800;color:var(--text-primary);letter-spacing:-.01em}
.tc-wc-meta{font-size:11.5px;font-weight:600;color:var(--text-muted);margin-top:2px}
.tc-wc-time{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--app-accent);margin-top:8px}
.tc-wc-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.tc-chip{font-size:10px;font-weight:800;padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.05em}
.tc-chip.tone-warn{background:var(--color-warning-bg,rgba(255,149,0,.14));color:var(--color-warning,#c47700)}
.tc-chip.tone-info{background:var(--color-info-bg,rgba(0,122,255,.12));color:var(--color-info,#0a84ff)}
.tc-chip.tone-muted{background:color-mix(in srgb,var(--text-muted) 14%,transparent);color:var(--text-muted)}
.tc-totals{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:14px;border-top:.5px solid var(--hairline,rgba(0,0,0,.08))}
.tc-total-pill{display:inline-flex;align-items:baseline;gap:6px;font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--app-accent) 8%,transparent);color:var(--text-primary)}
.tc-total-pill b{font-weight:800;font-variant-numeric:tabular-nums;color:var(--app-accent)}
/* F4 #13 — geofence arrival prompt card */
.tc-arrival{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding:13px 16px;border-radius:16px;background:color-mix(in srgb,var(--app-accent) 10%,var(--card-bg,var(--surface)));border:.5px solid color-mix(in srgb,var(--app-accent) 30%,var(--chrome-border,rgba(0,0,0,.08)));box-shadow:var(--shadow-e2);animation:tcArrivalIn var(--motion-base,.22s) var(--ease-spring,cubic-bezier(.32,.72,0,1))}
@keyframes tcArrivalIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.tc-arrival-ico{width:30px;height:30px;flex-shrink:0;color:var(--app-accent)}
.tc-arrival-body{flex:1;min-width:0}
.tc-arrival-title{font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary)}
.tc-arrival-sub{font-size:12px;color:var(--text-muted);margin-top:1px}
.tc-arrival-go{flex-shrink:0;border:none;background:var(--app-accent);color:var(--on-accent,#fff);font:inherit;font-weight:800;font-size:13px;min-height:44px;padding:11px 18px;border-radius:999px;cursor:pointer;box-shadow:var(--bevel-top),var(--shadow-e1);transition:filter var(--motion-fast),transform var(--motion-fast,150ms) var(--ease-spring)}
.tc-arrival-go:hover{filter:brightness(1.06);transform:translateY(-1px)}
.tc-arrival-go:active{transform:scale(.97)}
.tc-arrival-x{flex-shrink:0;width:28px;height:28px;border:none;background:color-mix(in srgb,var(--text-primary) 6%,transparent);color:var(--text-muted);border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.tc-arrival-x:hover{background:color-mix(in srgb,var(--text-primary) 12%,transparent);color:var(--text-primary)}
.tc-arrival-x svg{width:13px;height:13px}
/* F4 #11 — crew clock-in button + picker + crew punch-out */
.tc-punch.tc-crew{background:color-mix(in srgb,#fff 14%,transparent);color:var(--on-accent,#fff)}
.tc-punch.tc-crew:hover{background:color-mix(in srgb,#fff 22%,transparent)}
.tc-crew-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 8px}
.tc-crew-summary{font-size:12px;font-weight:700;color:var(--text-muted);font-variant-numeric:tabular-nums}
.tc-crew-all{appearance:none;border:none;cursor:pointer;font:inherit;font-size:12px;font-weight:700;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 10%,transparent);border-radius:999px;padding:5px 12px;transition:background var(--motion-fast,150ms)}
.tc-crew-all:hover{background:color-mix(in srgb,var(--app-accent) 18%,transparent)}
.tc-crew-pick{display:flex;flex-direction:column;gap:4px;max-height:46vh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-right:2px}
/* Avatar multi-select row — the checkbox stays the source of truth (visually hidden), the whole rounded
   tile is the tap target; selection shows a fill + a check tick. ~48px tall for comfortable touch. */
.tc-crew-row{display:flex;align-items:center;gap:11px;min-height:48px;padding:8px 12px;border-radius:13px;font-size:13.5px;color:var(--text-primary);cursor:pointer;background:color-mix(in srgb,var(--text-primary) 3%,transparent);transition:background var(--motion-fast,150ms),box-shadow var(--motion-fast,150ms)}
.tc-crew-row:hover{background:color-mix(in srgb,var(--text-primary) 6%,transparent)}
.tc-crew-row.is-on{background:color-mix(in srgb,var(--app-accent) 11%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--app-accent) 28%,transparent)}
.tc-crew-row input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.tc-crew-av{flex-shrink:0;width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:800;letter-spacing:.01em;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 14%,var(--surface));box-shadow:var(--bevel-top),0 1px 2px rgba(0,0,0,.05)}
.tc-crew-row.is-on .tc-crew-av{color:var(--on-accent,#fff);background:var(--app-accent)}
.tc-crew-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.tc-crew-nm{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-crew-tick{width:18px;height:18px;flex-shrink:0;color:var(--app-accent);opacity:0;transform:scale(.7);transition:opacity var(--motion-fast,150ms),transform var(--motion-fast,150ms) var(--ease-spring)}
.tc-crew-row.is-on .tc-crew-tick{opacity:1;transform:scale(1)}
@media (prefers-reduced-motion:reduce){.tc-crew-tick{transition:none}}
.tc-crew-noid{font-size:10.5px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.tc-crew-out{margin-left:auto;display:inline-flex;align-items:center;gap:5px;border:none;background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent);font:inherit;font-weight:650;font-size:12px;padding:6px 12px;border-radius:999px;cursor:pointer;transition:background var(--motion-fast)}
.tc-crew-out:hover{background:color-mix(in srgb,var(--app-accent) 20%,transparent)}
.tc-crew-out svg{width:13px;height:13px}
/* F4 #12 — approval queue panel */
.tc-appr-panel{border:.5px solid color-mix(in srgb,var(--color-warning,#d9822b) 30%,var(--chrome-border,rgba(0,0,0,.08)))}
.tc-appr-count{margin-left:auto;font-size:12px;font-weight:800;color:var(--color-warning,#d9822b);background:color-mix(in srgb,var(--color-warning,#d9822b) 14%,transparent);border-radius:999px;padding:1px 9px}
.tc-appr-sub{font-size:12px;color:var(--text-muted);margin:2px 0 10px}
.tc-appr-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:.5px solid var(--hairline,rgba(0,0,0,.07))}
.tc-appr-row:last-child{border-bottom:none}
.tc-appr-body{flex:1;min-width:0}
.tc-appr-name{font-size:13.5px;font-weight:700;color:var(--text-primary)}
.tc-appr-meta{font-size:12px;color:var(--text-muted);margin-top:1px}
.tc-appr-meta b{color:var(--text-primary);font-variant-numeric:tabular-nums}
.tc-appr-ok,.tc-appr-no{flex-shrink:0;border:none;font:inherit;font-weight:650;font-size:12.5px;padding:7px 14px;border-radius:999px;cursor:pointer;transition:filter var(--motion-fast),background var(--motion-fast)}
.tc-appr-ok{background:var(--app-accent);color:var(--on-accent,#fff)}
.tc-appr-ok:hover{filter:brightness(1.06)}
.tc-appr-no{background:color-mix(in srgb,var(--color-error,#d04437) 12%,transparent);color:var(--color-error,#d04437)}
.tc-appr-no:hover{background:color-mix(in srgb,var(--color-error,#d04437) 20%,transparent)}
.tc-chip.tone-ok{background:color-mix(in srgb,var(--color-success,#1a9d5a) 14%,transparent);color:var(--color-success,#1a9d5a)}
.tc-flag{color:var(--color-warning,#d9822b);font-weight:600}
/* F4 #15 — full-page workspace: roster · timeline · rail */
.tc-ws-roster{display:flex;flex-direction:column;gap:2px}
.tc-ws-rrow{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:12px;cursor:pointer;transition:background var(--motion-fast)}
.tc-ws-rrow:hover{background:color-mix(in srgb,var(--text-primary) 4%,transparent)}
.tc-ws-rrow.is-selected{background:color-mix(in srgb,var(--app-accent) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--app-accent) 30%,transparent)}
.tc-ws-rrow-body{flex:1;min-width:0}
/* cont.34 — worker roster ATIRA ORB avatar (lit sphere w/ initial); live pulse-ring when clocked in */
.tc-ws-orb{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:800;color:#fff;letter-spacing:-.02em;position:relative;
  background-color:var(--app-accent);
  background-image:radial-gradient(circle at 34% 28%,rgba(255,255,255,.5),transparent 48%),radial-gradient(circle at 66% 82%,rgba(0,0,0,.28),transparent 54%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 3px rgba(0,0,0,.2),0 2px 6px color-mix(in srgb,var(--app-accent) 40%,transparent),0 0 0 .5px color-mix(in srgb,var(--app-accent) 30%,transparent)}
.tc-ws-orb.is-live{background-color:var(--color-success,#1a9d5a);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 3px rgba(0,0,0,.2),0 2px 6px color-mix(in srgb,var(--color-success) 45%,transparent),0 0 0 .5px color-mix(in srgb,var(--color-success) 34%,transparent),0 0 0 3px color-mix(in srgb,var(--color-success) 18%,transparent)}
.tc-ws-orb.is-live::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--color-success) 55%,transparent);animation:tcPulse 2s var(--ease-out) infinite}
@keyframes tcPulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.28);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.tc-ws-orb.is-live::after{animation:none;opacity:.4}}
.tc-ws-rrow-name{font-size:13.5px;font-weight:650;color:var(--text-primary)}
.tc-ws-onnow{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--color-success,#1a9d5a);background:color-mix(in srgb,var(--color-success,#1a9d5a) 14%,transparent);border-radius:999px;padding:1px 7px;margin-left:4px}
.tc-ws-rrow-meta{font-size:11.5px;color:var(--text-muted);margin-top:1px}
.tc-ws-tl{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:.5px solid var(--hairline,rgba(0,0,0,.07))}
.tc-ws-tl:last-child{border-bottom:none}
.tc-ws-tl-main{flex:1;min-width:0}
.tc-ws-tl-when{font-size:13px;font-weight:650;color:var(--text-primary);font-variant-numeric:tabular-nums}
.tc-ws-tl-meta{font-size:11.5px;color:var(--text-muted);margin-top:1px}
.tc-ws-tl-hrs{flex-shrink:0;display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.tc-ws-tl-acts{flex-shrink:0;display:flex;gap:4px}
.tc-ws-tl-btn{width:28px;height:28px;border:none;background:color-mix(in srgb,var(--text-primary) 6%,transparent);color:var(--text-muted);border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.tc-ws-tl-btn:hover{background:color-mix(in srgb,var(--text-primary) 12%,transparent);color:var(--text-primary)}
.tc-ws-tl-btn.danger:hover{background:color-mix(in srgb,var(--color-error,#d04437) 14%,transparent);color:var(--color-error,#d04437)}
.tc-ws-tl-btn svg{width:13px;height:13px}
.tc-ws-budgetnote{font-size:11.5px;color:var(--text-muted);margin-top:8px;text-align:center}
/* 📖 V163 — compact zero-burn budget stat (replaces the broken-looking zero-labor bar chart) */
.tc-ws-budgetzero{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 0 2px}
.tc-ws-budgetzero .n{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--text-primary);font-variant-numeric:tabular-nums}
.tc-ws-budgetzero .l{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}
/* History rows */
.tc-hist-row{display:flex;align-items:flex-start;gap:12px;padding:12px 6px;border-radius:12px;border-bottom:.5px solid var(--hairline,rgba(0,0,0,.06));transition:background var(--motion-fast,150ms)}
.tc-hist-row:last-child{border-bottom:none}
.tc-hist-row:hover{background:color-mix(in srgb,var(--text-primary) 3.5%,transparent)}
.tc-hist-row.is-rejected{background:color-mix(in srgb,var(--color-warning,#d9822b) 7%,transparent)}
.tc-hist-row.is-rejected:hover{background:color-mix(in srgb,var(--color-warning,#d9822b) 11%,transparent)}
.tc-hist-main{flex:1;min-width:0}
.tc-hist-worker{font-size:13.5px;font-weight:700;color:var(--text-primary)}
.tc-hist-sub{font-size:11.5px;font-weight:600;color:var(--text-muted);margin-top:1px}
.tc-hist-side{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.tc-hist-hours{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.tc-hist-reject{display:flex;align-items:center;gap:7px;margin-top:7px;padding:7px 10px;border-radius:10px;font-size:11.5px;font-weight:600;line-height:1.35;color:var(--color-warning,#c47700);background:var(--color-warning-bg,rgba(255,149,0,.12))}
.tc-hist-reject-ico{width:14px;height:14px;flex-shrink:0}
.tc-hist-actions{display:flex;gap:6px;flex-shrink:0}
.tc-mini-btn{appearance:none;cursor:pointer;font:inherit;font-size:11px;font-weight:700;padding:6px 11px;border-radius:10px;border:.5px solid var(--hairline,rgba(0,0,0,.12));background:var(--surface);color:var(--text-secondary,var(--text-primary));transition:transform var(--motion-fast,150ms) var(--ease-spring),background var(--motion-fast,150ms)}
.tc-mini-btn:hover{transform:translateY(-1px);background:color-mix(in srgb,var(--app-accent) 8%,var(--surface))}
.tc-mini-btn:active{transform:scale(.95)}
.tc-mini-btn.is-danger{color:var(--color-error,#ff3b30)}
.tc-empty{color:var(--text-muted);font-size:13px;padding:18px 4px;text-align:center;line-height:1.5}
/* Correct-punch form — premium scoped layout over the shared rrt-fm material (already rounded + ringed). */
.tc-edit-form{display:flex;flex-direction:column;gap:13px}
.tc-edit-grid{display:grid;grid-template-columns:1fr;gap:11px}
/* 📖 V163 — the old 320px modal clipped the Clock-out datetime input; the tc modals now ride
   .rrt-form-modal (480px sheet). A lone body child spans the sheet's 2-col field grid, and the
   datetime fields shrink inside their columns instead of overflowing. */
.rrt-form-modal .rrt-fm-body > :only-child{grid-column:1/-1}
.tc-edit-grid .rrt-fm-input{min-width:0;width:100%}
.tc-edit-dt{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:7px}
/* 📖 V163 — field-side crew manager sheet */
.tc-crewmgr{width:min(94vw,560px)}
.tc-crewmgr-body{display:flex;flex-direction:column;gap:12px;max-height:min(56vh,520px);overflow:auto;padding:2px}
.tc-cm-crew{border:.5px solid var(--chrome-border);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:9px;background:var(--surface)}
.tc-cm-crewhead{display:flex;align-items:center;gap:9px}
.tc-cm-name{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:14.5px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary);border-radius:8px;padding:4px 6px;outline:none}
.tc-cm-name:hover:not(:disabled){background:var(--surface-2)}
.tc-cm-name:focus{background:var(--surface-2);box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 30%,transparent)}
.tc-cm-rate{font-size:11px;font-weight:800;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 10%,transparent);border-radius:999px;padding:4px 9px;white-space:nowrap}
.tc-cm-del{appearance:none;border:0;background:transparent;color:var(--text-muted);width:28px;height:28px;border-radius:9px;display:grid;place-items:center;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
.tc-cm-del:hover{background:color-mix(in srgb,var(--color-error,#ef4444) 12%,transparent);color:var(--color-error,#ef4444)}
.tc-cm-del svg{width:14px;height:14px}
.tc-cm-chips{display:flex;flex-wrap:wrap;gap:6px}
.tc-cm-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--text-primary);background:var(--surface-2);border:.5px solid var(--chrome-border);border-radius:999px;padding:5px 7px 5px 11px}
.tc-cm-chip .tc-cm-x{appearance:none;border:0;background:transparent;color:var(--text-muted);font-size:14px;line-height:1;width:18px;height:18px;border-radius:50%;cursor:pointer;display:grid;place-items:center}
.tc-cm-chip .tc-cm-x:hover{background:color-mix(in srgb,var(--color-error,#ef4444) 14%,transparent);color:var(--color-error,#ef4444)}
.tc-cm-none{font-size:12px;color:var(--text-muted);padding:3px 0}
.tc-cm-addrow{display:flex;gap:8px;align-items:center}
.tc-cm-addrow .rrt-fm-input{flex:1;min-width:0;font-size:13px;padding:8px 11px}
.tc-cm-ratein{flex:0 0 84px!important}
.tc-cm-addbtn{appearance:none;border:0;cursor:pointer;font:inherit;font-size:12.5px;font-weight:800;padding:9px 16px;border-radius:999px;background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent);white-space:nowrap;transition:transform var(--motion-fast) var(--ease-spring),background var(--motion-fast)}
.tc-cm-addbtn:hover{background:color-mix(in srgb,var(--app-accent) 18%,transparent);transform:translateY(-1px)}
.tc-cm-addbtn:active{transform:scale(.96)}
.tc-cm-newcrew,.tc-cm-newworker{border-top:.5px dashed var(--chrome-border);padding-top:12px}
/* 📖 V164 — org intelligence brain admin browser */
.om-row{display:flex;align-items:flex-start;gap:11px;padding:11px 12px;border-bottom:.5px solid color-mix(in srgb,var(--chrome-border) 60%,transparent)}
.om-row:last-child{border-bottom:0}
.om-row.is-archived{opacity:.55}
.om-kind{flex:0 0 auto;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;border-radius:999px;padding:4px 9px;margin-top:1px;background:var(--surface-2);color:var(--text-secondary)}
.om-kind-numbers{background:color-mix(in srgb,var(--color-success,#34c759) 14%,transparent);color:var(--color-success,#248a3d)}
.om-kind-workflow{background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent)}
.om-kind-people{background:color-mix(in srgb,#8b5cf6 14%,transparent);color:#6d4ad6}
.om-body{flex:1;min-width:0;font-size:13px;line-height:1.5;color:var(--text-primary);overflow-wrap:break-word}
.om-meta{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:10.5px;font-weight:700;color:var(--text-muted)}
.om-chip{font-size:10px;font-weight:800;border-radius:999px;padding:2px 7px;background:var(--surface-2);color:var(--text-secondary)}
.om-chip-prov{background:color-mix(in srgb,var(--app-accent) 10%,transparent);color:var(--app-accent)}
.om-acts{flex:0 0 auto;display:flex;gap:6px}
.om-compose{display:flex;gap:8px;align-items:center;margin-top:12px;padding-top:12px;border-top:.5px dashed var(--chrome-border)}
.om-compose .rrt-fm-input{font-size:12.5px;padding:8px 11px;min-width:0}
.tc-edit-hint{display:flex;align-items:center;gap:8px;margin-top:2px;padding:9px 12px;border-radius:11px;font-size:11.5px;font-weight:600;color:var(--text-muted);background:color-mix(in srgb,var(--app-accent) 6%,transparent)}
.tc-edit-hint-ico{width:14px;height:14px;flex-shrink:0;color:var(--app-accent)}
@media (max-width:760px){
  .tc-punch{width:100%;justify-content:center;font-size:18px;padding:18px;min-height:60px}
  .tc-hero-field input,.tc-hero-field select{width:100%}
  .tc-onsite-grid{grid-template-columns:1fr}
  .tc-hero-top{flex-direction:column;gap:14px}
  .tc-hero-today{align-self:flex-start;flex-direction:row;align-items:baseline;gap:8px;padding:9px 15px}
  .tc-hero-today-l{margin-top:0}
  .tc-edit-grid{grid-template-columns:1fr}
  .tc-hist-row{flex-wrap:wrap}
  .tc-hist-actions{width:100%;margin-top:2px}
}
/* ── Receiving inspection (2026-06-16) — delivery inspection field surface ────── */
.ri-surface{display:flex;flex-direction:column;gap:18px}
/* cont.34 ceiling — full-page Receiving: main (compose + history) + insights rail, full width */
.ri-wrap{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:1000px){.ri-wrap{grid-template-columns:minmax(0,1fr) 300px;align-items:start}}
.ri-main{display:flex;flex-direction:column;gap:12px;min-width:0}
.ri-rail{position:sticky;top:12px}
.ri-rail-card{background:var(--card-bg);border-radius:var(--radius-lg);box-shadow:var(--bevel-top),var(--shadow-e2);border:.5px solid color-mix(in srgb,var(--text-primary) 6%,transparent);padding:16px}
.ri-rail-h{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:12px}
.ri-mtiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ri-mtile{padding:10px 12px;border-radius:12px;background:var(--surface-grad,var(--card-bg));box-shadow:var(--bevel-top),var(--shadow-e1);border:.5px solid color-mix(in srgb,var(--text-primary) 5%,transparent)}
.ri-mtile .v{font-size:20px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ri-mtile .l{font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--text-muted);margin-top:4px}
.ri-rail-note{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:12px;color:var(--text-secondary)}
.ri-rail-dot{width:8px;height:8px;border-radius:50%;background:var(--text-muted);flex:0 0 auto}
.ri-rail-dot.warn{background:var(--color-warning)}
.ri-panel{background:var(--card-bg,var(--surface));border-radius:var(--radius-lg,16px);box-shadow:var(--shadow-e2);padding:18px 20px}
.ri-panel-head{display:flex;align-items:center;gap:9px;margin-bottom:14px;flex-wrap:wrap}
.ri-panel-title{font-size:var(--text-title,17px);font-weight:700;letter-spacing:-.01em;color:var(--text-primary)}
.ri-panel-ico{width:17px;height:17px;color:var(--app-accent)}
/* New-inspection composer */
.ri-compose-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:14px}
.ri-field{display:flex;flex-direction:column;gap:4px}
.ri-field label{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.ri-field input,.ri-field select{appearance:none;font:inherit;font-size:13px;font-weight:600;padding:9px 12px;border-radius:11px;min-height:40px;min-width:160px;color:var(--text-primary);background:var(--surface);border:.5px solid var(--hairline,rgba(0,0,0,.14))}
.ri-field input:focus,.ri-field select:focus{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 22%,transparent);border-color:var(--app-accent)}
.ri-btn{appearance:none;cursor:pointer;font:inherit;font-size:13px;font-weight:700;padding:10px 18px;border-radius:12px;min-height:42px;border:none;color:#fff;background:linear-gradient(180deg,color-mix(in srgb,var(--app-accent) 92%,#fff),var(--app-accent));box-shadow:var(--bevel-top),var(--shadow-e1);transition:transform var(--motion-fast,150ms) var(--ease-spring),box-shadow var(--motion-fast,150ms)}
.ri-btn:hover{transform:translateY(-1px);box-shadow:var(--bevel-top),var(--shadow-e2)}
.ri-btn:active{transform:scale(.97)}
.ri-btn.ghost{background:var(--surface);color:var(--text-secondary,var(--text-primary));border:.5px solid var(--hairline,rgba(0,0,0,.14));box-shadow:none}
/* Line checklist — a card per material line */
.ri-lines{display:flex;flex-direction:column;gap:10px}
.ri-line{background:var(--surface-grad,var(--surface));border-radius:14px;box-shadow:var(--bevel-top),var(--shadow-e1);padding:12px 14px}
.ri-line.is-flagged{box-shadow:var(--bevel-top),0 0 0 1.5px color-mix(in srgb,var(--color-warning,#ff9500) 55%,transparent),var(--shadow-e1)}
.ri-line-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ri-line-desc{font-size:13.5px;font-weight:800;color:var(--text-primary);flex:1;min-width:120px}
.ri-line-controls{display:flex;gap:9px;flex-wrap:wrap;align-items:flex-end;margin-top:9px}
.ri-line-controls select{appearance:none;font:inherit;font-size:12px;font-weight:600;padding:7px 10px;border-radius:9px;min-height:36px;color:var(--text-primary);background:var(--surface);border:.5px solid var(--hairline,rgba(0,0,0,.14))}
.ri-line-rm{appearance:none;cursor:pointer;font:inherit;font-size:11px;font-weight:700;padding:6px 11px;border-radius:9px;border:.5px solid var(--hairline,rgba(0,0,0,.12));background:var(--surface);color:var(--color-error,#ff3b30);margin-left:auto}
.ri-line-rm:hover{background:color-mix(in srgb,var(--color-error,#ff3b30) 8%,var(--surface))}
.ri-compose-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:.5px solid var(--hairline,rgba(0,0,0,.08))}
/* Result chips */
.ri-chip{font-size:10px;font-weight:800;padding:3px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.05em}
.ri-chip.tone-good{background:var(--color-success-bg,rgba(52,199,89,.14));color:var(--color-success,#1f9d4d)}
.ri-chip.tone-partial{background:var(--color-warning-bg,rgba(255,149,0,.14));color:var(--color-warning,#c47700)}
.ri-chip.tone-reject{background:var(--color-error-bg,rgba(255,59,48,.12));color:var(--color-error,#d70015)}
/* F5 #17 — slip-scan camera overlay (backdrop rests opaque; only the framed video area is the focus) */
.ri-scan-overlay{position:fixed;inset:0;z-index:9000;background:rgba(8,10,16,.92);display:grid;place-items:center}
.ri-scan-frame{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px}
.ri-scan-frame video{width:min(86vw,420px);height:min(64vh,420px);object-fit:cover;border-radius:18px;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.ri-scan-reticle{position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(80vw,380px);height:min(60vh,380px);border:3px solid rgba(255,255,255,.85);border-radius:16px;pointer-events:none}
.ri-scan-cancel{background:rgba(255,255,255,.16);color:#fff;border:none;padding:9px 22px;border-radius:999px;font-weight:700;cursor:pointer}
/* F1 #3 — delivery match banner (rolls up over/short/damage vs the PO) */
.ri-variance-banner{display:inline-flex;align-items:center;margin:10px 0 2px;max-width:100%}
/* Receiving elevation — reconcile ledges (Ordered ▸ Received + accept/reject split) */
.ri-reconcile{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:12px;margin-top:11px}
.ri-led{display:flex;flex-direction:column;gap:5px;padding:9px 12px 10px;border-radius:13px;background:var(--surface);box-shadow:var(--bevel-top),inset 0 0 0 .5px var(--hairline,rgba(0,0,0,.10))}
.ri-led-cap{display:flex;align-items:center;gap:5px;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.ri-led-ico{width:12px;height:12px}
.ri-led-num{appearance:none;font:inherit;font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;width:100%;min-height:44px;padding:2px 0;border:none;outline:none;background:transparent;color:var(--text-primary)}
.ri-led-num::-webkit-inner-spin-button,.ri-led-num::-webkit-outer-spin-button{opacity:.35}
.ri-led:focus-within{box-shadow:var(--bevel-top),0 0 0 2.5px color-mix(in srgb,var(--app-accent) 30%,transparent),var(--shadow-e1)}
.ri-led-ref{background:linear-gradient(160deg,color-mix(in srgb,var(--text-primary) 4%,var(--surface)),var(--surface))}
.ri-led-recv{background:var(--surface-grad,var(--surface));box-shadow:var(--bevel-top),var(--shadow-e1)}
.ri-led-ok .ri-led-cap{color:color-mix(in srgb,var(--color-success) 78%,var(--text-muted))}
.ri-led-ok:focus-within{box-shadow:var(--bevel-top),0 0 0 2.5px color-mix(in srgb,var(--color-success) 32%,transparent)}
.ri-led-bad .ri-led-cap{color:color-mix(in srgb,var(--color-error) 76%,var(--text-muted))}
.ri-led-bad:focus-within{box-shadow:var(--bevel-top),0 0 0 2.5px color-mix(in srgb,var(--color-error) 30%,transparent)}
.ri-recon-arrow{display:flex;align-items:center;justify-content:center;width:30px;height:30px;align-self:center;margin-bottom:6px;border-radius:50%;background:color-mix(in srgb,var(--app-accent) 9%,var(--surface));color:var(--app-accent)}
.ri-recon-arrow svg{width:15px;height:15px;transform:rotate(-90deg)}
.ri-delta-pill{grid-column:1 / -1;justify-self:start;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;padding:5px 12px;border-radius:999px;letter-spacing:.01em}
.ri-delta-pill svg{width:12px;height:12px}
.ri-delta-pill.tone-idle{background:color-mix(in srgb,var(--text-primary) 6%,transparent);color:var(--text-muted)}
.ri-delta-pill.tone-good{background:var(--color-success-bg,rgba(52,199,89,.14));color:var(--color-success,#1f9d4d)}
.ri-delta-pill.tone-partial{background:var(--color-warning-bg,rgba(255,149,0,.14));color:var(--color-warning,#c47700)}
.ri-delta-pill.tone-reject{background:var(--color-error-bg,rgba(255,59,48,.12));color:var(--color-error,#d70015)}
.ri-split{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
/* PO-match meter (weighted accepted/rejected/short bar) — authored AFTER .ri-variance-banner so
   display/width/margin win source-order, even after the live in-place swap in _riSetLine. */
.ri-match-meter{display:flex;flex-direction:column;gap:9px;width:100%;padding:13px 15px;border-radius:14px;background:var(--surface-grad,var(--surface));box-shadow:var(--bevel-top),var(--shadow-e1);margin:12px 0 4px}
.ri-match-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ri-match-status{margin:0}
.ri-match-pct{font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text-muted);letter-spacing:.02em}
.ri-meter-track{display:flex;height:10px;border-radius:999px;overflow:hidden;background:color-mix(in srgb,var(--text-primary) 8%,transparent);box-shadow:inset 0 1px 2px rgba(0,0,0,.10)}
.ri-meter-seg{display:block;transition:flex var(--motion-base,220ms) var(--ease-out,ease)}
.ri-meter-seg.seg-ok{background:linear-gradient(180deg,color-mix(in srgb,var(--color-success) 88%,#fff),var(--color-success))}
.ri-meter-seg.seg-bad{background:linear-gradient(180deg,color-mix(in srgb,var(--color-error) 88%,#fff),var(--color-error))}
.ri-meter-seg.seg-short{background:linear-gradient(180deg,color-mix(in srgb,var(--color-warning) 88%,#fff),var(--color-warning))}
.ri-meter-seg.seg-empty{background:transparent}
.ri-rollup{display:flex;gap:20px;flex-wrap:wrap}
.ri-rollup-stat{display:flex;flex-direction:column;gap:1px}
.ri-rollup-num{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--text-primary)}
.ri-rollup-num.is-ok{color:var(--color-success,#1f9d4d)}
.ri-rollup-num.is-bad{color:var(--color-error,#d70015)}
.ri-rollup-num.is-short{color:var(--color-warning,#c47700)}
.ri-rollup-lbl{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
/* Delivery status banner (header of the draft editor) */
.ri-delivery-banner{display:flex;align-items:stretch;gap:16px;flex-wrap:wrap;padding:14px 16px;border-radius:14px;background:linear-gradient(155deg,color-mix(in srgb,var(--app-accent) 7%,var(--surface)),var(--surface) 70%);box-shadow:var(--bevel-top),inset 0 0 0 .5px var(--hairline,rgba(0,0,0,.08));margin-bottom:13px}
.ri-db-date{display:flex;align-items:center;gap:11px;padding-right:16px;border-right:.5px solid var(--hairline,rgba(0,0,0,.10))}
.ri-db-ico{width:26px;height:26px;color:var(--app-accent);flex-shrink:0}
.ri-db-ico-sm{width:13px;height:13px}
.ri-db-meta{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;flex:1;min-width:0}
.ri-field-bare label{font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted)}
.ri-field-bare input{appearance:none;font:inherit;font-size:14px;font-weight:700;min-height:44px;padding:7px 11px;border-radius:11px;color:var(--text-primary);background:var(--card-bg,var(--surface));border:.5px solid var(--hairline,rgba(0,0,0,.12))}
.ri-field-bare input:focus{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 22%,transparent);border-color:var(--app-accent)}
.ri-db-tie{display:inline-flex;align-items:center;gap:6px;align-self:center;font-size:12.5px;font-weight:800;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 10%,transparent);padding:7px 13px;border-radius:999px}
/* Submit preview pane */
.ri-preview{margin-top:14px;padding:14px 16px;border-radius:14px;background:linear-gradient(155deg,color-mix(in srgb,var(--app-accent) 6%,var(--card-bg,var(--surface))),var(--card-bg,var(--surface)) 72%);box-shadow:var(--bevel-top),var(--shadow-e1);display:flex;flex-direction:column;gap:11px}
.ri-preview-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ri-preview-ico{width:17px;height:17px;color:var(--app-accent)}
.ri-preview-title{font-size:14px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary)}
.ri-preview-stats{display:flex;gap:24px;flex-wrap:wrap}
.ri-pv-stat{display:flex;flex-direction:column;gap:2px}
.ri-pv-num{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--text-primary)}
.ri-pv-num.is-ok{color:var(--color-success,#1f9d4d)}
.ri-pv-num.is-bad{color:var(--color-error,#d70015)}
.ri-pv-lbl{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
/* History result cards */
.ri-hist-grid{display:grid;grid-template-columns:1fr;gap:11px}
.ri-hist-card{display:flex;align-items:flex-start;gap:13px;padding:14px 15px;border-radius:14px;background:var(--surface-grad,var(--surface));box-shadow:var(--bevel-top),var(--shadow-e1);transition:transform var(--motion-fast,150ms) var(--ease-spring),box-shadow var(--motion-fast,150ms)}
.ri-hist-card:hover{transform:translateY(-2px);box-shadow:var(--bevel-top),var(--shadow-e2)}
.ri-hist-card:active{transform:translateY(-1px) scale(.995)}
.ri-hist-badge{flex-shrink:0;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center}
.ri-hist-badge svg{width:18px;height:18px}
.ri-hist-badge.tone-good{background:var(--color-success-bg,rgba(52,199,89,.14));color:var(--color-success,#1f9d4d)}
.ri-hist-badge.tone-partial{background:var(--color-warning-bg,rgba(255,149,0,.14));color:var(--color-warning,#c47700)}
.ri-hist-badge.tone-reject{background:var(--color-error-bg,rgba(255,59,48,.12));color:var(--color-error,#d70015)}
.ri-hist-recon{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px;font-size:11.5px;font-weight:600;color:var(--text-muted);font-variant-numeric:tabular-nums}
.ri-hist-recon b{font-weight:800;color:var(--text-primary)}
.ri-hist-recon .is-ok b{color:var(--color-success,#1f9d4d)}
.ri-hist-recon .is-bad b{color:var(--color-error,#d70015)}
.ri-empty-ico{width:30px;height:30px;color:var(--text-muted);opacity:.5;display:block;margin:0 auto 8px}
/* Receiving — press feedback + a11y fallbacks for the reconcile/meter/history rebuild */
.ri-led-num,.ri-recon-arrow{transition:transform var(--motion-fast,150ms) var(--ease-spring),box-shadow var(--motion-fast,150ms)}
@media(prefers-reduced-motion:reduce){
  .ri-hist-card,.ri-hist-card:hover,.ri-hist-card:active,.ri-meter-seg,.ri-recon-arrow,.ri-led-num{transition:none;transform:none}
}
@media(prefers-reduced-transparency:reduce){
  .ri-delivery-banner,.ri-preview{background:var(--card-bg,var(--surface))}
}
@media(min-width:1024px){.ri-hist-grid{grid-template-columns:1fr 1fr}}
/* iPad portrait + small landscape band (641–1023): keep two-column reconcile but tighten gaps so
   the Ordered/Received ledges don't crowd; split stays 3-up with comfortable touch ledges. */
@media(min-width:641px) and (max-width:1023px){
  .ri-reconcile{gap:10px}
  .ri-split{gap:9px}
  .ri-delivery-banner{gap:14px}
}
@media(max-width:640px){
  .ri-reconcile{grid-template-columns:1fr;gap:8px}
  .ri-recon-arrow{transform:none;margin:0 auto}
  .ri-recon-arrow svg{transform:rotate(0deg)}
  .ri-delta-pill{justify-self:stretch;justify-content:center}
  .ri-split{grid-template-columns:1fr}
  .ri-db-date{padding-right:0;border-right:none;border-bottom:.5px solid var(--hairline,rgba(0,0,0,.10));padding-bottom:12px;width:100%}
  .ri-db-meta{width:100%}
  .ri-field-bare input{width:100%}
  .ri-hist-card{flex-wrap:wrap}
  .ri-hist-actions{width:100%}
  .ri-mini-btn{flex:1;min-height:40px}
  .ri-preview-stats{gap:16px}
}
/* F1 #2 — per-line photo evidence (damage/condition documentation) */
.ri-line-photos{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.ri-photo-thumb-wrap{position:relative;display:inline-flex}
.ri-photo-thumb{width:54px;height:54px;object-fit:cover;border-radius:var(--radius-sm);cursor:pointer;border:.5px solid var(--hairline,rgba(0,0,0,.12))}
.ri-photo-thumb-missing{display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--text-muted);background:var(--chrome-bg,rgba(0,0,0,.04));cursor:default}
.ri-photo-rm{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;border:none;cursor:pointer;background:var(--color-error,#ff3b30);color:#fff;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.ri-photo-rm-ico{width:11px;height:11px;stroke:currentColor;fill:none}
.ri-add-photo-btn{align-self:center}
/* History rows */
.ri-hist-main{flex:1;min-width:0}
.ri-hist-title{font-size:13.5px;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ri-hist-sub{font-size:11.5px;font-weight:600;color:var(--text-muted);margin-top:2px}
.ri-hist-actions{display:flex;gap:6px;flex-wrap:wrap}
.ri-mini-btn{appearance:none;cursor:pointer;font:inherit;font-size:11px;font-weight:700;padding:6px 11px;border-radius:10px;border:.5px solid var(--hairline,rgba(0,0,0,.12));background:var(--surface);color:var(--text-secondary,var(--text-primary));transition:transform var(--motion-fast,150ms) var(--ease-spring),background var(--motion-fast,150ms)}
.ri-mini-btn:hover{transform:translateY(-1px);background:color-mix(in srgb,var(--app-accent) 8%,var(--surface))}
.ri-mini-btn:active{transform:scale(.95)}
.ri-mini-btn.is-danger{color:var(--color-error,#ff3b30)}
.ri-empty{color:var(--text-muted);font-size:13px;padding:18px 4px;text-align:center;line-height:1.5}
@media (max-width:760px){
  .ri-field input,.ri-field select{width:100%;min-width:0}
  .ri-compose-row{flex-direction:column;align-items:stretch}
  .ri-btn{width:100%;justify-content:center}
  .ri-led-num{font-size:22px}
  .ri-mini-btn{min-height:40px}
  .ri-recon-arrow{margin-bottom:0}
}
/* P2.1 — Automation rules panel */
.auto-add-btn{margin-bottom:14px}
.auto-empty{color:var(--text-muted);font-size:13px;padding:14px 2px;line-height:1.4}
.auto-list{display:flex;flex-direction:column;gap:8px}
.auto-rule{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--surface-grad);border-radius:var(--radius-lg);box-shadow:var(--bevel-top),var(--shadow-e1)}
.auto-rule.is-off{opacity:.6}
.auto-rule-main{flex:1;min-width:0}
.auto-rule-name{font-size:13.5px;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:8px}
.auto-scope{font-size:10.5px;font-weight:600;color:var(--text-secondary);background:color-mix(in srgb,var(--text-primary) 8%,transparent);padding:1px 7px;border-radius:var(--radius-pill)}
.auto-rule-desc{font-size:12px;color:var(--text-secondary);margin-top:2px}
.auto-rule-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.auto-icon-btn{background:none;border:0;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:var(--radius-sm);transition:color var(--motion-fast)}
.auto-icon-btn svg{width:14px;height:14px}
.auto-icon-btn:hover{color:var(--text-primary)}
.auto-icon-btn.auto-danger:hover{color:var(--app-danger)}
.auto-toggle{position:relative;display:inline-block;width:36px;height:21px;cursor:pointer}
.auto-toggle input{position:absolute;opacity:0;width:0;height:0}
.auto-toggle-track{position:absolute;inset:0;background:color-mix(in srgb,var(--text-muted) 40%,transparent);border-radius:var(--radius-pill);transition:background var(--motion-fast)}
.auto-toggle-track::before{content:"";position:absolute;left:2px;top:2px;width:17px;height:17px;background:#fff;border-radius:50%;box-shadow:var(--shadow-e1);transition:transform var(--motion-fast)}
.auto-toggle input:checked + .auto-toggle-track{background:var(--color-success)}
.auto-toggle input:checked + .auto-toggle-track::before{transform:translateX(15px)}
.auto-editor{background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);padding:14px;margin-bottom:10px;box-shadow:var(--shadow-e2)}
.auto-ed-row{margin-bottom:10px}
.auto-ed-lbl{display:block;font-size:11.5px;font-weight:600;color:var(--text-secondary);margin-bottom:4px}
.auto-ed-check{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text-primary);margin:4px 0 12px}
.auto-ed-btns{display:flex;justify-content:flex-end;gap:8px}
.auto-ed-hint{font-size:10.5px;font-weight:500;color:var(--text-muted)}
/* Condition builder (2026-06-08) — recursive AND/OR group tree. */
.auto-cond-group{border:.5px solid color-mix(in srgb,var(--app-accent) 14%,rgba(0,0,0,.1));border-radius:12px;padding:9px 10px;background:color-mix(in srgb,var(--app-accent) 2.5%,var(--card-bg))}
.auto-cond-group[data-depth="1"],.auto-cond-group[data-depth="2"]{margin-top:7px;background:color-mix(in srgb,var(--app-accent) 5%,var(--card-bg))}
.auto-cond-grouphead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.auto-cond-joiner{display:inline-flex;align-items:center;gap:5px}
.auto-cond-op{height:22px;padding:0 9px;border-radius:999px;border:.5px solid color-mix(in srgb,var(--app-accent) 22%,transparent);background:var(--surface-2);color:var(--text-secondary);font-size:10.5px;font-weight:800;letter-spacing:.03em;cursor:pointer}
.auto-cond-op.on{background:var(--accent-tint,color-mix(in srgb,var(--app-accent) 16%,transparent));color:var(--app-accent);border-color:color-mix(in srgb,var(--app-accent) 34%,transparent)}
.auto-cond-joiner-lbl{font-size:11px;color:var(--text-muted);font-weight:600}
.auto-cond-rows{display:flex;flex-direction:column;gap:7px}
.auto-cond-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.auto-cond-row .field-input{height:32px;font-size:12px;padding:0 8px}
.auto-cond-row .auto-cond-field{flex:1 1 130px;min-width:110px}
.auto-cond-row .auto-cond-op-sel{flex:0 0 auto;min-width:84px}
.auto-cond-row .auto-cond-val,.auto-cond-row .auto-cond-customkey{flex:1 1 90px;min-width:80px}
.auto-cond-empty{font-size:11.5px;color:var(--text-muted);padding:3px 2px}
.auto-cond-add{display:flex;gap:6px;margin-top:8px}
.auto-cond-addbtn{height:26px;padding:0 11px;border-radius:8px;border:.5px dashed color-mix(in srgb,var(--app-accent) 30%,transparent);background:transparent;color:var(--app-accent);font-size:11.5px;font-weight:700;cursor:pointer}
.auto-cond-addbtn:hover{background:color-mix(in srgb,var(--app-accent) 8%,transparent)}
.auto-cond-rm{width:22px;height:22px;flex:0 0 auto;border:none;border-radius:999px;background:var(--surface-2);color:var(--text-muted);font-size:13px;line-height:1;cursor:pointer;display:grid;place-items:center}
.auto-cond-rm:hover{background:var(--color-error,#c0392b);color:#fff}
.auto-sched-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.auto-sched-row .auto-sched-part{height:32px;font-size:12px;flex:0 0 auto;min-width:90px}
.auto-sched-at{font-size:12px;color:var(--text-muted);font-weight:600}
/* G7-W2 — multi-step editor + backtest. Rounded, accent-tinted fills (no edge strips). */
#autoEdAddStepRow{display:flex;align-items:center;gap:9px;margin-top:2px}
.auto-addstep{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 12px;border-radius:999px;border:.5px dashed color-mix(in srgb,var(--app-accent) 32%,transparent);background:transparent;color:var(--app-accent);font-size:11.5px;font-weight:700;cursor:pointer;transition:background var(--motion-fast),transform var(--motion-fast)}
.auto-addstep:hover{background:color-mix(in srgb,var(--app-accent) 9%,transparent)}
.auto-addstep:active{transform:scale(.97)}
.auto-addstep .ic{width:12px;height:12px}
.auto-steps-lbl{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin:2px 0 7px}
.auto-step{border:.5px solid color-mix(in srgb,var(--app-accent) 14%,rgba(0,0,0,.1));border-radius:12px;padding:9px 10px;background:color-mix(in srgb,var(--app-accent) 3%,var(--card-bg));margin-bottom:8px}
.auto-step-head{display:flex;align-items:center;gap:8px}
.auto-step-num{flex:0 0 auto;width:20px;height:20px;border-radius:999px;background:color-mix(in srgb,var(--app-accent) 16%,transparent);color:var(--app-accent);font-size:11px;font-weight:800;display:grid;place-items:center}
.auto-step-action{flex:1 1 auto;height:32px;font-size:12px;padding:0 8px}
.auto-step-del{flex:0 0 auto;width:24px;height:24px;border:none;border-radius:999px;background:var(--surface-2);color:var(--text-muted);cursor:pointer;display:grid;place-items:center;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast)}
.auto-step-del:hover{background:color-mix(in srgb,var(--app-danger,#c0392b) 14%,transparent);color:var(--app-danger,#c0392b)}
.auto-step-del:active{transform:scale(.92)}
.auto-step-del .ic{width:12px;height:12px}
.auto-step-args:not(:empty){margin-top:8px;display:flex;flex-direction:column;gap:0}
.auto-step-args .auto-step-in{height:auto}
.auto-step-args input.auto-step-in{height:32px;font-size:12px}
.auto-backtest-btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px;border-radius:999px;border:.5px solid color-mix(in srgb,var(--app-accent) 26%,transparent);background:color-mix(in srgb,var(--app-accent) 7%,transparent);color:var(--app-accent);font-size:12px;font-weight:700;cursor:pointer;transition:background var(--motion-fast),transform var(--motion-fast)}
.auto-backtest-btn:hover{background:color-mix(in srgb,var(--app-accent) 13%,transparent)}
.auto-backtest-btn:active{transform:scale(.97)}
.auto-backtest-btn .ic{width:13px;height:13px}
.auto-bt-load{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-muted);margin-top:9px}
.auto-bt-err{font-size:12px;color:var(--app-danger,#c0392b);margin-top:9px;font-weight:600}
.auto-bt-card{margin-top:10px;border:.5px solid var(--chrome-border);border-radius:14px;padding:12px 13px;background:var(--surface-grad,var(--surface-2));box-shadow:var(--bevel-top),var(--shadow-e1)}
.auto-bt-headline{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.auto-bt-num{font-size:26px;font-weight:800;color:var(--app-accent);letter-spacing:-.02em;line-height:1}
.auto-bt-of{font-size:13px;font-weight:600;color:var(--text-secondary)}
.auto-bt-window{font-size:11px;color:var(--text-muted);font-weight:600;margin-left:auto}
.auto-bt-bar{height:8px;border-radius:999px;background:color-mix(in srgb,var(--text-muted) 18%,transparent);margin:10px 0 8px;overflow:hidden}
.auto-bt-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--app-accent) 70%,transparent),var(--app-accent));transition:width var(--motion-base) var(--ease-out)}
.auto-bt-sub{font-size:11.5px;color:var(--text-secondary);font-weight:500}
.auto-bt-sample{margin-top:9px}
.auto-bt-sample summary{font-size:11.5px;font-weight:700;color:var(--app-accent);cursor:pointer;list-style:none}
.auto-bt-sample summary::-webkit-details-marker{display:none}
.auto-bt-sample-list{margin-top:7px;display:flex;flex-direction:column;gap:4px;max-height:180px;overflow:auto}
.auto-bt-sample-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11.5px;padding:5px 9px;border-radius:8px;background:var(--card-bg)}
.auto-bt-sample-type{font-weight:600;color:var(--text-primary)}
.auto-bt-sample-at{color:var(--text-muted);font-weight:500}

/* ============================================================================
   AUTOMATION — Pass-2 (2026-06-04). Faithful port of 44-project-automation.html.
   Full-width surface (rule #3): bypass .reg-ws, hide the rail. All scoped to
   #tabAutomation / .auto-surface. Reuses shared vocab (.surf/.panel/.zone/.chip/
   .presence/.live-dot from the ~15048 pass-2 block).
   ============================================================================ */
/* Full-width: collapse the workspace grid + hide the rail (rule #3 — no right gutter). */
#tabAutomation .reg-ws{display:block}
#tabAutomation .reg-ws-master{max-width:none}
#tabAutomation #railAutomation[hidden]{display:none}
.auto-surface{display:block}

/* page-head (project-tab content head — matches the prototype .page-head) */
.auto-surface .au-head{margin:2px 2px 16px}
.auto-surface .au-head .au-kicker{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--app-accent)}
.auto-surface .au-head h2{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:4px 0 5px;color:var(--text-primary)}
.auto-surface .au-head .au-subtitle{font-size:13.5px;color:var(--text-secondary);max-width:62ch;line-height:1.45}

/* hero — violet command band */
.au-hero{position:relative;display:flex;align-items:center;gap:24px;padding:22px 24px;border-radius:22px;color:var(--on-accent,#fff);overflow:hidden;margin-bottom:18px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--app-accent) 86%,#000) 0%,var(--app-accent) 50%,color-mix(in srgb,var(--app-accent) 92%,#000) 100%);box-shadow:var(--lg-edge),var(--shadow-e3)}
.au-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.18),transparent 55%);pointer-events:none}
.au-hero .ah-main{position:relative;flex:1;min-width:0}
.au-hero .ah-k{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.82}
.au-hero .ah-big{display:flex;align-items:baseline;gap:10px;margin:6px 0 3px}
.au-hero .ah-big .n{font-size:46px;font-weight:800;letter-spacing:-.03em;line-height:.9;font-variant-numeric:tabular-nums}
.au-hero .ah-big .t{font-size:17px;font-weight:700;opacity:.85}
.au-hero .ah-sub{font-size:13px;font-weight:600;opacity:.9}
.au-cta{position:relative;margin-top:16px;display:flex;align-items:center;gap:10px;padding:6px 6px 6px 16px;border-radius:14px;
  background:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 0.5px rgba(255,255,255,.2)}
.au-cta .ac-ico{font-size:16px;opacity:.85}
.au-cta .ac-text{flex:1;font-size:13.5px;font-weight:600;opacity:.92}
.au-cta .ac-text b{opacity:1}
.au-cta .ac-go{height:34px;padding:0 16px;border-radius:10px;border:0;cursor:pointer;font-size:13px;font-weight:800;background:#fff;color:#6d4ad6;box-shadow:0 5px 14px -6px rgba(0,0,0,.4);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
.au-cta .ac-go:hover{transform:translateY(-1px);box-shadow:0 8px 18px -6px rgba(0,0,0,.45)}
.au-stats{position:relative;display:flex;gap:24px;flex:0 0 auto;align-self:flex-start}
.au-stats .s{text-align:center}
.au-stats .sv{font-size:26px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.au-stats .sl{font-size:10px;font-weight:700;opacity:.82;text-transform:uppercase;letter-spacing:.05em;margin-top:4px}

/* toolbar */
.auto-surface .au-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.auto-surface .au-toolbar .spacer{flex:1}
.auto-surface .au-toolbar .au-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border-radius:999px;border:.5px solid var(--chrome-border);background:var(--card-bg);color:var(--text-secondary);font-size:12.5px;font-weight:700;cursor:pointer;box-shadow:var(--shadow-e1);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast),color var(--motion-fast)}
.auto-surface .au-toolbar .au-btn:hover{transform:translateY(-1px);color:var(--text-primary);box-shadow:var(--shadow-e2)}
.auto-surface .au-toolbar .au-btn.au-primary{background:var(--app-accent);color:#fff;border-color:transparent}
.auto-surface .au-toolbar .au-btn svg{width:13px;height:13px}

/* two-column body grid */
.auto-surface .au-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.auto-surface .au-coltitle{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin:4px 4px 11px}
.auto-surface .au-col-left{min-width:0}
.auto-surface .au-col-right{display:flex;flex-direction:column;gap:18px;min-width:0}

/* rule cards */
.auto-surface .rule{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:18px;background:var(--card-bg);margin-bottom:13px;
  box-shadow:var(--bevel-top),var(--shadow-e2);border:.5px solid rgba(0,0,0,.05);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
.auto-surface .rule:hover{transform:translateY(-2px);box-shadow:var(--shadow-e3)}
.auto-surface .rule.off{opacity:.62}
.auto-surface .rule-ico{width:46px;height:46px;flex:0 0 46px;border-radius:13px;display:grid;place-items:center;font-size:21px;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.auto-surface .rule-ico .ic{width:22px;height:22px;color:#fff}
.auto-surface .tpl .tp-ico .ic{width:18px;height:18px;color:#fff}
.auto-surface .rf-pill .ic{width:12px;height:12px}
.auto-surface .au-empty .em-ico .ic,.auto-surface .em-ico .ic{width:28px;height:28px}
.auto-surface .rule-body{flex:1;min-width:0}
.auto-surface .rule-name{font-weight:800;font-size:14.5px;letter-spacing:-.01em;color:var(--text-primary)}
.auto-surface .rule-flow{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:9px}
.auto-surface .rf-lab{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.auto-surface .rf-pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px}
.auto-surface .rf-trigger{background:var(--type-selection-bg);color:var(--type-selection-fg)}
.auto-surface .rf-cond{background:var(--surface-2);color:var(--text-secondary)}
.auto-surface .rf-action{background:var(--color-info-bg);color:var(--app-accent)}
.auto-surface .rf-steps{background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent);font-weight:800}
.auto-surface .rf-arrow{color:var(--text-muted);font-weight:800}
.auto-surface .rule-meta{font-size:11px;color:var(--text-muted);margin-top:8px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.auto-surface .rule-meta b{color:var(--text-secondary);font-variant-numeric:tabular-nums}
.auto-surface .rule-acts{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.auto-surface .rule-iconbtn{background:none;border:0;color:var(--text-muted);cursor:pointer;padding:6px;border-radius:9px;transition:color var(--motion-fast),background var(--motion-fast)}
.auto-surface .rule-iconbtn svg{width:14px;height:14px;display:block}
.auto-surface .rule-iconbtn:hover{color:var(--text-primary);background:var(--hover-overlay,rgba(0,0,0,.05))}
.auto-surface .rule-iconbtn.is-danger:hover{color:var(--app-danger)}

/* iOS toggle (the pass-2 .tog) */
.auto-surface .tog{width:46px;height:28px;border-radius:999px;flex:0 0 46px;position:relative;cursor:pointer;transition:background var(--motion-base);border:0;padding:0}
.auto-surface .tog.on{background:linear-gradient(160deg,color-mix(in srgb,var(--color-success) 86%,#fff),var(--color-success));box-shadow:inset 0 1px 3px rgba(0,0,0,.15)}
.auto-surface .tog.off{background:var(--surface-3);box-shadow:inset 0 1px 3px rgba(0,0,0,.12)}
.auto-surface .tog .knob{position:absolute;top:3px;width:22px;height:22px;border-radius:999px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left var(--motion-base) var(--ease-spring)}
.auto-surface .tog.on .knob{left:21px}
.auto-surface .tog.off .knob{left:3px}

/* template gallery — one continuous panel, tiles share hairlines (G4) */
.auto-surface .gallery{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--chrome-border);border-radius:13px;overflow:hidden;box-shadow:inset 0 0 0 0.5px var(--chrome-border)}
.auto-surface .tpl{padding:14px;background:var(--card-bg);cursor:pointer;border:0;text-align:left;font:inherit;transition:background var(--motion-fast) var(--ease-out)}
.auto-surface .tpl:hover{background:var(--hover-overlay,rgba(0,0,0,.025))}
.auto-surface .tpl .tp-ico{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:17px;color:#fff;margin-bottom:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.auto-surface .tpl .tp-name{font-weight:800;font-size:13px;letter-spacing:-.01em;color:var(--text-primary)}
.auto-surface .tpl .tp-desc{font-size:11px;color:var(--text-secondary);margin-top:3px;line-height:1.4}
.auto-surface .tpl .tp-add{font-size:11px;font-weight:800;color:var(--app-accent);margin-top:9px}

/* run history */
.auto-surface .run-row{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:.5px solid color-mix(in srgb,var(--app-accent) 3%,rgba(0,0,0,.05))}
.auto-surface .run-row:last-child{border-bottom:0}
.auto-surface .run-dot{width:9px;height:9px;border-radius:999px;flex:0 0 9px}
.auto-surface .run-name{font-size:12.5px;font-weight:700;color:var(--text-primary)}
.auto-surface .run-act{font-weight:600;color:var(--text-muted)}
.auto-surface .run-body{min-width:0;flex:1}
.auto-surface .run-detail{font-size:11px;color:var(--text-muted);margin-top:1px}
.auto-surface .run-time{margin-left:auto;font-size:11px;font-weight:600;color:var(--text-muted);white-space:nowrap}
/* Run-history audit stats + filter (2026-06-08) */
.auto-surface .au-runstats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:6px 0 12px}
.auto-surface .au-runstat{background:color-mix(in srgb,var(--app-accent) 3.5%,var(--card-bg));border:.5px solid color-mix(in srgb,var(--app-accent) 8%,rgba(0,0,0,.06));border-radius:12px;padding:9px 10px;text-align:center}
.auto-surface .au-runstat-v{font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary);line-height:1.1}
.auto-surface .au-runstat-l{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);margin-top:3px}
.auto-surface .au-runfilter-row{margin-bottom:8px}
.auto-surface .au-runfilter{height:32px;font-size:12px;max-width:220px}

/* zone foot button (compose CTA) */
.auto-surface .au-zone-foot{padding:14px;border-top:.5px solid var(--chrome-border)}
.auto-surface .au-compose{width:100%;height:38px;border-radius:11px;border:0;background:var(--app-accent);color:#fff;font-size:13px;font-weight:800;cursor:pointer;transition:filter var(--motion-fast)}
.auto-surface .au-compose:hover{filter:brightness(1.05)}

/* designed empty-state (no rules yet) — reuses shared .empty/.em-* family */
.auto-surface .au-empty-runs{font-size:12px;color:var(--text-muted);padding:14px 2px 4px;line-height:1.45}

/* inline rule builder (full-width surface variant) */
.auto-surface .auto-editor{max-width:520px;margin:0 0 18px;border-radius:18px;box-shadow:var(--shadow-e3)}
.auto-surface .auto-ed-title{font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary);margin-bottom:12px}

@media (max-width:900px){
  .auto-surface .au-grid{grid-template-columns:1fr}
  .au-hero{flex-direction:column;align-items:stretch;gap:16px}
  .au-stats{justify-content:space-between;gap:12px}
}

.sov-summary-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:14px}
@media (min-width: 641px){.sov-summary-strip{grid-template-columns:repeat(4,1fr)}}
.stat-tile{background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);padding:10px 12px;display:flex;flex-direction:column;gap:3px;box-shadow:var(--shadow-e1)}
.stat-tile-label{font-size:10.5px;color:var(--text-muted);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.stat-tile-value{font-size:19px;color:var(--text-primary);font-weight:700;letter-spacing:-.4px;font-variant-numeric:tabular-nums;line-height:1.1}
.stat-tile-pct{font-size:12px;color:var(--text-muted);font-weight:500;letter-spacing:0}
.stat-tile-danger{background:color-mix(in srgb, var(--app-danger) 12%, transparent)}
.stat-tile-danger .stat-tile-label,.stat-tile-danger .stat-tile-value{color:var(--app-danger)}
/* W3-4 — re-inspect tile (warning tone): items a failed inspection flagged for rework. */
.stat-tile-warn{background:color-mix(in srgb, var(--color-warning) 12%, transparent)}
.stat-tile-warn .stat-tile-label,.stat-tile-warn .stat-tile-value{color:color-mix(in srgb, var(--color-warning) 75%, var(--text-primary))}

/* V72 — Activity tab filter toggle: Apple iOS-style switch. */
.act-filter-row{display:flex;justify-content:flex-end;padding:0 0 12px;border-bottom:0.5px solid color-mix(in srgb, var(--text-primary) 8%, transparent);margin-bottom:10px}
.act-toggle-row{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;-webkit-user-select:none}
.act-toggle-label{font-size:13px;color:var(--text-secondary);font-weight:500;letter-spacing:-.1px}
.act-toggle{position:relative;width:38px;height:22px;flex-shrink:0;cursor:pointer}
.act-toggle input{opacity:0;width:0;height:0;position:absolute}
.act-toggle-slider{position:absolute;inset:0;background:var(--surface-3);border-radius:var(--radius-pill);transition:background var(--motion-base);box-shadow:inset 0 0 0 0.5px color-mix(in srgb, var(--text-primary) 8%, transparent)}
.act-toggle-slider::before{content:'';position:absolute;height:18px;width:18px;left:2px;bottom:2px;background:#fff;border-radius:50%;transition:transform var(--motion-base);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.act-toggle input:checked + .act-toggle-slider{background:var(--app-accent)}
.act-toggle input:checked + .act-toggle-slider::before{transform:translateX(16px)}

/* V74 — Project Contacts/Clients cards: Apple Contacts-style stacked rows.
   Each card: name header + type pill, meta rows (icon + value, stacked),
   trailing Unlink ghost. */
.pc-empty{padding:18px 8px;color:var(--text-muted);font-size:13.5px;text-align:left}
.pc-card{background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);padding:14px 14px;display:flex;flex-direction:column;gap:10px;margin-bottom:10px;box-shadow:var(--shadow-e1);transition:box-shadow var(--motion-base) var(--ease-out)}
.pc-card:hover{box-shadow:var(--shadow-e2)}
.pc-card:last-child{margin-bottom:0}
.pc-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
/* V104 — Contacts card: avatar + sub + tap-to-act button row */
.pc-avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font:700 13px/1 -apple-system,"SF Pro Text",system-ui,sans-serif;color:#fff;letter-spacing:.3px;background:linear-gradient(135deg,var(--app-accent),color-mix(in srgb,var(--app-accent) 70%,#000));box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.pc-avatar::after{content:attr(data-initials)}
.pc-card-headmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pc-card-sub{font-size:11.5px;color:var(--text-muted);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-act-row{display:flex;gap:7px;margin-top:2px}
.pc-act{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;height:34px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--app-accent) 10%,transparent);color:var(--app-accent);font-size:12px;font-weight:600;text-decoration:none;border:0.5px solid color-mix(in srgb,var(--app-accent) 22%,transparent);transition:background var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-out)}
.pc-act svg{width:13px;height:13px}
.pc-act:hover{background:color-mix(in srgb,var(--app-accent) 16%,transparent)}
.pc-act:active{transform:scale(.97)}
/* Mobile: bigger tap targets, hide the label to fit 3-4 actions cleanly if tight */
@media (max-width:640px){.pc-act{height:42px;font-size:12.5px}.pc-avatar{width:42px;height:42px;font-size:14px}}
.pc-card-name{font-size:15.5px;font-weight:600;letter-spacing:-.2px;color:var(--text-primary);line-height:1.3;flex:1;min-width:0}
.pc-type-pill{flex-shrink:0;font-size:10.5px;font-weight:600;letter-spacing:.04em;padding:3px 9px;border-radius:var(--radius-pill);text-transform:uppercase}
.pc-type-gc{background:color-mix(in srgb, var(--color-success) 18%, transparent);color:color-mix(in srgb, var(--color-success) 72%, var(--text-primary))}
.pc-type-sub{background:color-mix(in srgb, var(--app-accent) 16%, transparent);color:var(--app-accent)}
.pc-type-vendor{background:color-mix(in srgb, #8b5cf6 16%, transparent);color:color-mix(in srgb, #8b5cf6 70%, var(--text-primary))}
.pc-type-client{background:color-mix(in srgb, var(--color-warning) 18%, transparent);color:color-mix(in srgb, var(--color-warning) 78%, var(--text-primary))}
.pc-meta-list{display:flex;flex-direction:column;gap:7px}
/* Pass-2 #35 — contact detail panel leads with a centered identity hero (proto .dp-hero):
   gradient wash bleeding to card edges + bottom hairline + 64px avatar. No presence dot
   (.pres = fabrication, honest-omitted). */
.pc-detail-hero{margin:-2px -2px 12px;padding:20px 18px 16px;text-align:center;background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 9%,var(--card-bg)),var(--card-bg) 70%);border-bottom:.5px solid var(--chrome-border);border-radius:12px 12px 0 0}
.pc-meta-row{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--text-primary);min-width:0}
.pc-meta-ico{width:14px;height:14px;flex-shrink:0;color:var(--text-muted)}
.pc-meta-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-primary);text-decoration:none;letter-spacing:-.1px}
a.pc-meta-value{color:var(--app-accent)}
a.pc-meta-value:active{opacity:.7}
.pc-card-foot{display:flex;justify-content:flex-end;margin-top:2px;border-top:0.5px solid color-mix(in srgb, var(--text-primary) 6%, transparent);padding-top:10px}
.pc-unlink-btn{background:transparent;border:none;color:var(--app-danger);font-size:13px;font-weight:500;padding:2px 6px;cursor:pointer;font-family:inherit;border-radius:var(--radius-sm);transition:background var(--motion-fast)}
.pc-unlink-btn:active{background:color-mix(in srgb, var(--app-danger) 10%, transparent)}

/* V76 — Schedule tab preview chrome. */
.sched-empty{color:var(--text-muted);font-size:13.5px;padding:18px 4px;text-align:left}
.sched-preview-img{max-width:100%;border-radius:var(--radius-md);border:0.5px solid var(--chrome-border);display:block}
/* V120 📘 — responsive frame height: the fixed 520px letterboxed hard on small
   phones (Drive viewer chrome + dark bars). Scale with viewport, clamp sanely. */
.sched-preview-frame{width:100%;height:clamp(280px,52vh,560px);border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);background:var(--surface-2);display:block;margin-top:10px}
.sched-hint{font-size:11.5px;color:var(--text-muted);margin-top:8px;line-height:1.4}
.sched-open-card{
  display:flex;align-items:center;gap:12px;padding:14px;
  background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);
  text-decoration:none;color:var(--text-primary);box-shadow:0 1px 2px rgba(0,0,0,.03);
  transition:background var(--motion-fast),transform var(--motion-fast);
}
.sched-open-card:active{background:color-mix(in srgb, var(--text-primary) 4%, var(--card-bg));transform:scale(.98)}
.sched-open-icon{
  width:36px;height:36px;flex-shrink:0;border-radius:var(--radius-md);
  background:color-mix(in srgb, var(--app-accent) 16%, transparent);
  color:var(--app-accent);display:inline-flex;align-items:center;justify-content:center;
}
.sched-open-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sched-open-title{font-size:15px;font-weight:600;letter-spacing:-.15px}
.sched-open-sub{font-size:12px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sched-open-chev{width:9px;height:14px;flex-shrink:0;color:color-mix(in srgb, var(--text-primary) 28%, transparent)}

/* V120 📘 — Schedule MODAL quick-view (status strip + mini-Gantt + link + door).
   Compact glance; the deep workspace is full-page. All on V82 tokens. */
.sched-qv{display:flex;flex-direction:column;gap:0;--mg-name-w:36%;--mg-gap:14px;--mg-row-h:16px;--mg-row-gap:9px}
.sched-qv-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.sched-qv-finish{font-size:11.5px;font-weight:600;color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
/* Status strip — 4 glanceable stat tiles. */
.sched-qv-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.sched-qv-stat{background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);padding:13px 8px 11px;text-align:center;box-shadow:var(--shadow-e1)}
.sched-qv-stat-val{font-size:22px;font-weight:700;letter-spacing:-.5px;color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1}
.sched-qv-stat-unit{font-size:12px;font-weight:600;color:var(--text-muted);margin-left:1px}
.sched-qv-stat-bad{color:var(--color-error)}
.sched-qv-stat-lbl{font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-top:5px}
/* Mini-Gantt — read-only positioned bars over a shared window + today marker. */
.sched-mg{background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);padding:14px 16px;box-shadow:var(--shadow-e1)}
.sched-mg-inner{position:relative}
.sched-mg-rows{display:flex;flex-direction:column;gap:var(--mg-row-gap)}
.sched-mg-row{display:grid;grid-template-columns:var(--mg-name-w) 1fr;align-items:center;gap:var(--mg-gap);position:relative;z-index:1}
.sched-mg-name{font-size:12px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:2px}
.sched-mg-track{position:relative;height:var(--mg-row-h);border-radius:8px;background:color-mix(in srgb,var(--text-primary) 6%,transparent)}
.sched-mg-bar{position:absolute;top:0;height:var(--mg-row-h);border-radius:8px;min-width:4px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.sched-mg-fill{display:block;height:100%;background:rgba(255,255,255,.3)}
/* Track overlay — month gridlines + today marker. Offset to the TRACK column only
   (so nothing crosses into task names) and clipped to the rows' height. */
.sched-mg-track-overlay{position:absolute;top:0;bottom:0;left:calc(var(--mg-name-w) + var(--mg-gap));right:0;pointer-events:none;z-index:2}
.sched-mg-grid{position:absolute;top:-2px;bottom:-2px;width:1px;background:color-mix(in srgb,var(--text-primary) 8%,transparent)}
.sched-mg-today{position:absolute;top:-2px;bottom:-2px;width:1.5px;border-radius:1px;background:var(--color-error);opacity:.55;z-index:1}
.sched-mg-today::before{content:'';position:absolute;top:-3px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:var(--color-error)}
/* Month-tick axis (wide viewports only) — a labeled baseline aligned to the track. */
.sched-mg-axis-row{display:grid;grid-template-columns:var(--mg-name-w) 1fr;gap:var(--mg-gap);margin-top:9px}
.sched-mg-axis{position:relative;height:14px}
.sched-mg-axis-tick{position:absolute;top:0;transform:translateX(-50%);font-size:9.5px;font-weight:600;color:var(--text-muted);letter-spacing:.2px;white-space:nowrap;font-variant-numeric:tabular-nums}
.sched-mg-axis-tick::before{content:'';position:absolute;top:-11px;left:50%;width:1px;height:4px;background:color-mix(in srgb,var(--text-primary) 18%,transparent)}
.sched-mg-more{font-size:11px;color:var(--text-muted);margin-top:11px;padding-top:11px;border-top:0.5px solid var(--chrome-border);text-align:center}
/* Per-task detail list — read-only; fills the wide modal's space below the Gantt
   with status · dates · duration · completion. Hidden on phones (Gantt alone there). */
.sched-tl{display:none;margin-top:14px;background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-e1);overflow:hidden}
.sched-tl-head,.sched-tl-row{display:grid;grid-template-columns:14px minmax(0,1fr) 116px 44px 1fr 40px;align-items:center;gap:12px;padding:0 16px}
.sched-tl-head{height:34px;border-bottom:0.5px solid var(--chrome-border);background:color-mix(in srgb,var(--text-primary) 2.5%,transparent)}
.sched-tl-head span{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted)}
.sched-tl-h-name{grid-column:1 / 3}
.sched-tl-h-dur{text-align:right}
.sched-tl-h-prog{grid-column:5 / 7}
.sched-tl-rows{display:flex;flex-direction:column}
.sched-tl-row{height:40px;border-bottom:0.5px solid color-mix(in srgb,var(--chrome-border) 60%,transparent)}
.sched-tl-row:last-child{border-bottom:0}
.sched-tl-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.sched-tl-dot-done{background:var(--color-success)}
.sched-tl-dot-prog{background:var(--app-accent)}
.sched-tl-dot-late{background:var(--color-error)}
.sched-tl-dot-todo{background:color-mix(in srgb,var(--text-primary) 22%,transparent)}
.sched-tl-name{font-size:12.5px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sched-tl-dates{font-size:11.5px;color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.sched-tl-dur{font-size:11.5px;color:var(--text-secondary);font-variant-numeric:tabular-nums;text-align:right}
.sched-tl-meter{height:6px;border-radius:3px;background:color-mix(in srgb,var(--text-primary) 8%,transparent);overflow:hidden}
.sched-tl-meter-fill{display:block;height:100%;border-radius:3px}
.sched-tl-pct{font-size:11.5px;font-weight:700;color:var(--text-secondary);font-variant-numeric:tabular-nums;text-align:right}
.sched-tl-pct-done{color:var(--color-success)}
.sched-tl-more{font-size:11px;color:var(--text-muted);text-align:center;padding:10px 0;border-top:0.5px solid var(--chrome-border)}
/* Workspace door — the prominent path to import + analytics + interactive Gantt. */
.sched-qv-door-row{margin-top:14px}
.sched-qv-door{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.sched-qv-door-ico{width:14px;height:14px;flex-shrink:0}
.sched-empty-state .sched-qv-door-row{margin-top:18px;width:100%;max-width:280px}
/* "Link a cloud schedule" disclosure — quiet, below the glance. */
.sched-qv-link{margin-top:18px;border-top:0.5px solid var(--chrome-border);padding-top:14px}
.sched-qv-link-summary{display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none;font-size:13px;font-weight:600;color:var(--text-secondary);padding:6px 2px;border-radius:var(--radius-md);transition:color var(--motion-fast)}
.sched-qv-link-summary::-webkit-details-marker{display:none}
.sched-qv-link-summary:hover{color:var(--text-primary)}
.sched-qv-link-ico{width:14px;height:14px;flex-shrink:0;color:var(--text-muted)}
.sched-qv-link-chev{width:8px;height:13px;margin-left:auto;color:var(--text-muted);transition:transform var(--motion-fast) var(--ease-out)}
.sched-qv-link[open] .sched-qv-link-chev{transform:rotate(90deg)}
.sched-qv-link-field{margin-top:10px}
/* Inline-preview reveal (generic Drive links — opt-in so XML never auto-dumps). */
.sched-inline-reveal{margin-top:10px}
.sched-inline-reveal-sum{cursor:pointer;list-style:none;font-size:12px;font-weight:600;color:var(--app-accent);padding:4px 2px}
.sched-inline-reveal-sum::-webkit-details-marker{display:none}
.sched-inline-reveal-note{color:var(--text-muted);font-weight:500}
/* Axis is a wide-view affordance — no room for month labels on a phone track. */
.sched-mg-axis-row{display:none}
@media (max-width:640px){
  .sched-qv-strip{gap:7px}
  .sched-qv-stat{padding:11px 4px 9px}
  .sched-qv-stat-val{font-size:19px}
  .sched-qv-stat-lbl{font-size:9px;letter-spacing:.3px}
  .sched-mg{padding:13px 13px}
  /* Narrower name column + tighter gap on phones so bars get more room and names
     truncate less; the track overlay tracks --mg-name-w automatically. */
  .sched-qv{--mg-name-w:40%;--mg-gap:11px}
}
/* iPad + desktop — the modal is much wider, so the bars had stranded track space
   and no date reference. Narrow the name column proportionally, give the track
   more height + tighter row rhythm so bars read substantial, and show the axis. */
@media (min-width:768px){
  .sched-qv{--mg-name-w:26%;--mg-gap:18px;--mg-row-h:20px;--mg-row-gap:11px}
  .sched-mg{padding:18px 20px}
  .sched-mg-name{font-size:12.5px}
  .sched-mg-axis-row{display:grid}
  .sched-qv-stat-val{font-size:24px}
  .sched-tl{display:block}
}

/* V77.1 — Daily Log card (Recent Logs list): Apple Mail / Notes list-row.
   Was: date crammed in a meta row with 4 action icons on the same line +
   redundant date repeated in footer. Now: date is the prominent heading,
   weather/temp/crew/hours are small muted chips wrapping below, body sections
   read clean, actions move to the footer row right-aligned with author muted
   on the left. */
.dl-log-head{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.dl-log-date{font-size:15px;font-weight:600;color:var(--text-primary);letter-spacing:-.2px;line-height:1.25;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif}
.dl-log-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dl-log-chip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--text-muted);background:color-mix(in srgb, var(--text-primary) 5%, transparent);padding:2px 8px;border-radius:var(--radius-pill);line-height:1.4;letter-spacing:-.05px;font-weight:500}
.dl-log-chip svg{width:11px;height:11px;opacity:.7}
/* #17 — lost-day chip + the delay-flag toggle in the form. Severity via tinted fill (no edge-strip). */
.dl-log-chip-delay{color:color-mix(in srgb,var(--color-warning) 84%,var(--text-primary));background:color-mix(in srgb,var(--color-warning) 15%,transparent);font-weight:700;text-transform:capitalize}
.dl-log-chip-delay svg{width:11px;height:11px;opacity:.95}
/* toned meta-chip families — make the daily-card chip row scannable (semantic color) */
.dl-log-chip-crew{color:color-mix(in srgb,var(--app-accent) 86%,var(--text-primary));background:color-mix(in srgb,var(--app-accent) 11%,transparent)}
.dl-log-chip-hours{color:color-mix(in srgb,var(--color-success,#1a8f5a) 86%,var(--text-primary));background:color-mix(in srgb,var(--color-success,#1a8f5a) 12%,transparent)}
.dl-log-chip-wx{color:color-mix(in srgb,var(--color-info,#3b82f6) 84%,var(--text-primary));background:color-mix(in srgb,var(--color-info,#3b82f6) 11%,transparent)}
.dl-log-chip-crew svg,.dl-log-chip-hours svg{opacity:.95}
.dl-delay-toggle{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:color-mix(in srgb,var(--color-warning) 82%,var(--text-primary));cursor:pointer;padding:4px 0}
.dl-delay-toggle input{accent-color:var(--color-warning);width:15px;height:15px;cursor:pointer}
/* #17 — lost-day editor: tactile cause-tile grid toned by category (the visible control; mirrors the hidden #dlDelayCause select the save path reads). */
.dl-delay-card{margin-top:6px;padding:12px 14px;border-radius:var(--radius-lg);background:color-mix(in srgb,var(--color-warning) 7%,var(--card-bg));box-shadow:var(--shadow-e1),inset 0 0 0 .5px color-mix(in srgb,var(--color-warning) 28%,transparent)}
.dl-delay-card .dl-delay-toggle{align-items:flex-start;padding:0}
.dl-delay-toggle-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.dl-delay-toggle-ttl{display:inline-flex;align-items:center;gap:6px}
.dl-delay-toggle-ttl svg.ic{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6}
.dl-delay-toggle-sub{font-size:11.5px;font-weight:500;color:var(--text-muted)}
.dl-delay-label{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);margin:12px 0 6px}
.dl-cause-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.dl-cause-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:62px;padding:9px 6px;border-radius:12px;border:none;background:color-mix(in srgb,var(--text-primary) 4%,var(--card-bg));box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--text-primary) 9%,transparent);color:var(--text-secondary);font:inherit;font-size:11px;font-weight:650;line-height:1.2;text-align:center;cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-base) var(--ease-out),background var(--motion-base) var(--ease-out),color var(--motion-base) var(--ease-out)}
.dl-cause-tile svg.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;opacity:.85;transition:opacity var(--motion-base)}
.dl-cause-tile span{display:block}
.dl-cause-tile:hover{box-shadow:var(--shadow-e2),inset 0 0 0 .5px color-mix(in srgb,var(--text-primary) 12%,transparent);transform:translateY(-1px)}
.dl-cause-tile:active{transform:scale(.95)}
.dl-cause-tile.on{color:#fff;box-shadow:var(--shadow-e2);transform:translateY(-1px)}
.dl-cause-tile.on svg.ic{opacity:1}
.dl-cause-tile.is-weather.on{background:linear-gradient(160deg,color-mix(in srgb,var(--color-info) 92%,#fff),var(--color-info))}
.dl-cause-tile.is-site.on{background:linear-gradient(160deg,color-mix(in srgb,var(--color-warning) 92%,#fff),var(--color-warning))}
.dl-cause-tile.is-material.on{background:linear-gradient(160deg,color-mix(in srgb,#a855f7 92%,#fff),#a855f7)}
.dl-cause-tile.is-labor.on{background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 92%,#fff),var(--app-accent))}
.dl-cause-tile.is-other.on{background:linear-gradient(160deg,color-mix(in srgb,var(--text-secondary) 86%,#fff),var(--text-secondary))}
.dl-delay-row2{display:flex;gap:10px;margin-top:2px}
.dl-delay-sub-field{display:flex;flex-direction:column;flex:0 0 120px}
.dl-delay-sub-grow{flex:1 1 auto;min-width:0}
.dl-delay-sub-field .field-input{border-radius:10px}
@media (max-width:640px){.dl-cause-grid{grid-template-columns:repeat(3,1fr)}.dl-delay-row2{flex-direction:column}.dl-delay-sub-field{flex:1 1 auto}}
@media (prefers-reduced-motion:reduce){.dl-cause-tile{transition:none}.dl-cause-tile:hover,.dl-cause-tile:active,.dl-cause-tile.on{transform:none}}
/* V111 — "during stage X" connection chip on a daily-log row. Status-toned, tap → Stages. */
.dl-log-stage{display:inline-flex;align-items:center;gap:5px;margin-top:7px;font-size:11.5px;font-weight:600;letter-spacing:-.1px;padding:3px 9px 3px 7px;border-radius:var(--radius-pill);border:1px solid transparent;cursor:pointer;background:transparent;line-height:1.3;transition:transform var(--motion-fast) var(--ease-out),background var(--motion-fast) var(--ease-out)}
.dl-log-stage:hover{transform:translateY(-1px)}
.dl-log-stage:active{transform:scale(.97)}
.dl-log-stage .dl-stage-dot-svg{width:10px;height:10px}
.dl-log-stage-done{color:var(--color-success);background:color-mix(in srgb,var(--color-success) 11%,transparent);border-color:color-mix(in srgb,var(--color-success) 26%,transparent)}
.dl-log-stage-active{color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 12%,transparent);border-color:color-mix(in srgb,var(--app-accent) 28%,transparent)}
.dl-log-stage-blocked{color:var(--color-error);background:color-mix(in srgb,var(--color-error) 11%,transparent);border-color:color-mix(in srgb,var(--color-error) 26%,transparent)}
.dl-log-stage-idle{color:var(--text-muted);background:color-mix(in srgb,var(--text-primary) 6%,transparent);border-color:color-mix(in srgb,var(--text-primary) 12%,transparent)}
.dl-log-section{margin-top:6px;font-size:13.5px;line-height:1.45;color:var(--text-primary)}
.dl-log-section-label{font-weight:600;color:var(--text-primary);margin-right:6px;letter-spacing:-.05px}
.dl-log-section-text{color:var(--text-primary)}
.dl-log-section-danger .dl-log-section-label{color:var(--app-danger)}
.dl-log-section-danger .dl-log-section-text{color:var(--app-danger)}
.dl-photo-strip{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.dl-photo-thumb{width:54px;height:54px;object-fit:cover;border-radius:var(--radius-sm);cursor:pointer}
.dl-add-photo-btn{
  display:inline-flex;align-items:center;gap:5px;background:transparent;border:none;
  color:var(--app-accent);font-size:12.5px;font-weight:500;cursor:pointer;font-family:inherit;
  padding:8px 0 4px;margin-top:4px;
}
.dl-add-photo-btn svg{width:12px;height:12px}

/* ============================================================================
   DAILY LOGS — full-page TIMELINE, Pass-2 (2026-06-04). Faithful port of
   25-project-dailyLogs.html (.dl-head stats + composer + .logcard spine).
   Scoped to #dailyLogsWorkspaceWrap. All data real; reuses .empty/.avatar/.btn.
   ============================================================================ */
/* cont.34 ceiling — full-page Field Log uses the FULL WIDTH: main timeline + insights rail, no cap */
#dailyLogsWorkspaceWrap .dl-wrap{display:grid;grid-template-columns:1fr;gap:12px;max-width:none}
@media (min-width:1000px){#dailyLogsWorkspaceWrap .dl-wrap{grid-template-columns:minmax(0,1fr) 300px;align-items:stretch}#dailyLogsWorkspaceWrap .dl-rail{align-self:start}} /* 📒 V160: main column stretches to the filled stage; rail keeps start so sticky works */
#dailyLogsWorkspaceWrap .dl-main{display:flex;flex-direction:column;gap:12px;min-width:0}
/* 📒 V160 density — the .dl-head band is gone (controls live in the rail); the zero state
   flexes to fill the stage so a fresh project never shows a top-quarter island + void. */
#dailyLogsWorkspaceWrap .dl-zero{flex:1;display:flex;flex-direction:column}
#dailyLogsWorkspaceWrap .dl-zero .rt-emptyplus{flex:1}
#dailyLogsWorkspaceWrap .dl-rail-controls{margin-top:12px}
#dailyLogsWorkspaceWrap .dl-ctl-list{display:flex;flex-direction:column;gap:8px}
#dailyLogsWorkspaceWrap .dl-ctl-list .btn,#dailyLogsWorkspaceWrap .dl-ctl-list .dl-autopost{width:100%;justify-content:flex-start;text-align:left}
/* insights rail */
#dailyLogsWorkspaceWrap .dl-rail{position:sticky;top:12px}
#dailyLogsWorkspaceWrap .dl-rail-card{background:var(--card-bg);border-radius:var(--radius-lg);box-shadow:var(--bevel-top),var(--shadow-e2);border:.5px solid color-mix(in srgb,var(--text-primary) 6%,transparent);padding:16px 16px 18px}
#dailyLogsWorkspaceWrap .dl-rail-h{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:12px}
#dailyLogsWorkspaceWrap .dl-mtiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#dailyLogsWorkspaceWrap .dl-mtile{padding:10px 12px;border-radius:12px;background:var(--surface-grad,var(--card-bg));box-shadow:var(--bevel-top),var(--shadow-e1);border:.5px solid color-mix(in srgb,var(--text-primary) 5%,transparent)}
#dailyLogsWorkspaceWrap .dl-mtile .v{font-size:20px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
#dailyLogsWorkspaceWrap .dl-mtile .l{font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--text-muted);margin-top:4px}
/* 🗒️ pt.8 (Track-Q row 19) — week-over-week delta chip + the gap-backfill action */
#dailyLogsWorkspaceWrap .dl-mt-delta{font-size:10.5px;font-weight:800;margin-left:6px;vertical-align:2px;letter-spacing:0}
#dailyLogsWorkspaceWrap .dl-mt-delta.good{color:var(--color-success,#34a853)}
#dailyLogsWorkspaceWrap .dl-mt-delta.bad{color:var(--color-warning,#d9822b)}
#dailyLogsWorkspaceWrap .dl-mt-delta.flat{color:var(--text-muted);font-weight:600}
.dl-gap-btn{appearance:none;border:none;background:color-mix(in srgb,var(--color-warning,#d9822b) 12%,transparent);color:var(--color-warning,#d9822b);font:inherit;font-size:10.5px;font-weight:800;padding:2px 9px;border-radius:999px;cursor:pointer}
.dl-gap-btn:hover{background:color-mix(in srgb,var(--color-warning,#d9822b) 20%,transparent)}
/* Track-Q "metrics are doors" — cadence tiles that jump into the timeline. These are standalone
   cards (not an overflow:hidden band), so a gentle rounded lift is on-brand + a chevron after the label. */
#dailyLogsWorkspaceWrap .dl-mtile.dl-mtile-door{cursor:pointer;position:relative}
#dailyLogsWorkspaceWrap .dl-mtile.dl-mtile-door .l::after{content:"›";margin-left:4px;color:var(--text-muted);opacity:.5;font-weight:800}
#dailyLogsWorkspaceWrap .dl-mtile.dl-mtile-door:hover{transform:translateY(-2px);box-shadow:var(--bevel-top),var(--shadow-e3,0 16px 40px -16px rgba(20,30,48,.4))}
#dailyLogsWorkspaceWrap .dl-mtile.dl-mtile-door:hover .l::after{opacity:.9}
#dailyLogsWorkspaceWrap .dl-mtile.dl-mtile-door:active{transform:translateY(0) scale(.99)}
#dailyLogsWorkspaceWrap .dl-mtile.dl-mtile-door:focus-visible{outline:2px solid color-mix(in srgb,var(--app-accent) 60%,transparent);outline-offset:-2px}
@media (prefers-reduced-motion:no-preference){#dailyLogsWorkspaceWrap .dl-mtile.dl-mtile-door{transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast) var(--ease-out)}}
@media (prefers-reduced-motion:reduce){#dailyLogsWorkspaceWrap .dl-mtile.dl-mtile-door:hover{transform:none}}
#dailyLogsWorkspaceWrap .dl-spk-h{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--text-muted);margin:16px 0 8px}
#dailyLogsWorkspaceWrap .dl-spk{display:flex;align-items:flex-end;gap:2px;height:34px}
#dailyLogsWorkspaceWrap .dl-spk-bar{flex:1;min-width:0;height:22%;border-radius:2px;background:color-mix(in srgb,var(--text-primary) 9%,transparent)}
#dailyLogsWorkspaceWrap .dl-spk-bar.on{height:100%;background:linear-gradient(180deg,color-mix(in srgb,var(--app-accent) 70%,#fff),var(--app-accent));box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
/* V133 — float the stats/export header as a solid content panel on the matte (the
   composer + logcards already float). Section shell only; the stats inside unchanged. */
/* (.dl-head rules removed 📒 V160 — the toolbar band no longer renders; controls live in the rail) */
/* Pillar C — field-autopost toggle: pill, amber when ON (active bridge), muted when off. */
#dailyLogsWorkspaceWrap .dl-autopost{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:999px;border:0.5px solid var(--chrome-border);background:var(--surface-2);color:var(--text-muted);font-size:12.5px;font-weight:650;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast)}
#dailyLogsWorkspaceWrap .dl-autopost svg{width:14px;height:14px}
#dailyLogsWorkspaceWrap .dl-autopost.on{color:var(--co-pending-fg,#9a6212);background:var(--color-warning-bg,#fdf3e0);border-color:color-mix(in srgb,var(--co-pending-fg,#9a6212) 24%,transparent)}
#dailyLogsWorkspaceWrap .dl-autopost:hover{border-color:var(--co-pending-fg,#9a6212)}
#dailyLogsWorkspaceWrap .dl-stat{display:flex;gap:22px;flex-wrap:wrap}
#dailyLogsWorkspaceWrap .dl-stat .v{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text-primary);line-height:1}
#dailyLogsWorkspaceWrap .dl-stat .l{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);margin-top:3px}
/* composer (field-log banner) — V-theme1: was a STUCK TEAL gradient (theme-blind); now driven
   off --app-accent so it follows the theme (blue on Bayfront, terracotta on Driftwood, etc). */
#dailyLogsWorkspaceWrap .dl-composer{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;border-radius:16px;padding:14px 16px;color:#fff;
  background:linear-gradient(135deg,color-mix(in srgb,var(--app-accent) 82%,#000) 0%,var(--app-accent) 55%,color-mix(in srgb,var(--app-accent) 72%,#fff) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),var(--shadow-e3)}
#dailyLogsWorkspaceWrap .dl-composer::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 100% 0%,rgba(255,255,255,.2),transparent 55%)}
#dailyLogsWorkspaceWrap .dl-composer .cm-ico{position:relative;z-index:1;width:40px;height:40px;flex:0 0 40px;border-radius:12px;display:grid;place-items:center;font-size:19px;background:rgba(255,255,255,.18)}
#dailyLogsWorkspaceWrap .dl-composer .cm-ico .ic{width:20px;height:20px;color:#fff}
#dailyLogsWorkspaceWrap .dl-composer .cm-body{position:relative;z-index:1;flex:1;min-width:0}
#dailyLogsWorkspaceWrap .dl-composer .cm-t{font-size:14.5px;font-weight:800}
#dailyLogsWorkspaceWrap .dl-composer .cm-s{font-size:12px;font-weight:600;opacity:.92;margin-top:1px}
#dailyLogsWorkspaceWrap .dl-composer .cm-cta{position:relative;z-index:1}
#dailyLogsWorkspaceWrap .dl-composer .btnw{height:38px;padding:0 20px;border-radius:999px;border:0;cursor:pointer;font-size:13px;font-weight:800;background:#fff;color:var(--app-accent);box-shadow:0 6px 16px -6px rgba(0,0,0,.4)}
/* timeline spine */
#dailyLogsWorkspaceWrap .dl-timeline{position:relative;padding-left:26px}
#dailyLogsWorkspaceWrap .dl-timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;border-radius:999px;background:var(--surface-3)}
#dailyLogsWorkspaceWrap .dl-day-entry{position:relative;margin-bottom:16px}
#dailyLogsWorkspaceWrap .dl-day-entry::before{content:"";position:absolute;left:-22px;top:20px;width:14px;height:14px;border-radius:999px;background:var(--card-bg);box-shadow:0 0 0 3px var(--app-bg),inset 0 0 0 3px #14b8a6}
/* S1-C7 🧊 — week grouping headers on the timeline. A quiet sticky-ish band that labels
   the week (This week / Last week / N weeks ago) + the date range + that week's log count.
   The .dl-week wrapper is transparent — it only groups; the spine + card dots are unchanged. */
#dailyLogsWorkspaceWrap .dl-week{position:relative}
#dailyLogsWorkspaceWrap .dl-week + .dl-week{margin-top:6px}
#dailyLogsWorkspaceWrap .dl-week-head{display:flex;align-items:baseline;gap:10px;margin:2px 0 12px;padding-left:2px}
#dailyLogsWorkspaceWrap .dl-week-head::before{content:"";position:absolute;left:-22px;width:10px;height:10px;border-radius:999px;background:var(--app-accent);box-shadow:0 0 0 3px var(--app-bg);margin-top:5px}
#dailyLogsWorkspaceWrap .dl-week-when{font-size:13px;font-weight:800;letter-spacing:-.15px;color:var(--text-primary)}
#dailyLogsWorkspaceWrap .dl-week-range{font-size:11.5px;font-weight:600;color:var(--text-muted)}
#dailyLogsWorkspaceWrap .dl-week-n{margin-left:auto;font-size:11px;font-weight:700;color:var(--text-secondary,var(--text-muted));background:var(--surface-2,rgba(20,30,48,.05));border-radius:999px;padding:2px 9px}
/* logcard */
#dailyLogsWorkspaceWrap .logcard{border-radius:18px;background:var(--card-bg);box-shadow:var(--bevel-top),var(--shadow-e2);border:.5px solid rgba(0,0,0,.05);overflow:hidden;transition:box-shadow var(--motion-fast)}
#dailyLogsWorkspaceWrap .logcard:hover{box-shadow:var(--shadow-e3)}
#dailyLogsWorkspaceWrap .lc-head{display:flex;align-items:center;gap:12px;padding:14px 17px 12px;flex-wrap:wrap}
#dailyLogsWorkspaceWrap .lc-date .d-day{font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary)}
#dailyLogsWorkspaceWrap .lc-date .d-rel{font-size:11px;font-weight:700;color:var(--text-muted);margin-top:1px}
#dailyLogsWorkspaceWrap .lc-chips{margin-left:auto;display:flex;flex-wrap:wrap;gap:7px}
#dailyLogsWorkspaceWrap .lc-chips span{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap}
/* pass-3 AUDIT FIX: deepened teal so white text passes WCAG across the WHOLE gradient (was #2dd4bf→#14b8a6 = 2.49 fail; now #0f766e→#115e56, both ends ≥4.5). */
#dailyLogsWorkspaceWrap .dlc-stage{background:linear-gradient(160deg,#0f766e,#115e56);color:#fff;font-weight:800}
#dailyLogsWorkspaceWrap .dlc-weather{background:var(--cal-upcoming-bg,#dbeafe);color:var(--cal-upcoming-fg,#1e40af)}
#dailyLogsWorkspaceWrap .dlc-crew{background:var(--surface-2);color:var(--text-secondary)}
#dailyLogsWorkspaceWrap .dlc-delay{background:var(--color-warning-bg,#fdf3e0);color:var(--co-pending-fg,#9a6212)}
#dailyLogsWorkspaceWrap .lc-body{padding:0 17px 16px}
#dailyLogsWorkspaceWrap .lc-work{font-size:13.5px;line-height:1.5;color:var(--text-primary)}
#dailyLogsWorkspaceWrap .lc-work b{font-weight:800}
#dailyLogsWorkspaceWrap .lc-issue{display:flex;gap:9px;margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--color-warning-bg,#fdf3e0);font-size:12.5px;font-weight:600}
#dailyLogsWorkspaceWrap .lc-issue .li-t{color:var(--co-pending-fg,#9a6212);font-weight:700}
/* field strip — one continuous hairline-divided panel (G4) */
#dailyLogsWorkspaceWrap .dlc-fieldstrip{display:grid;grid-template-columns:repeat(4,1fr);margin-top:12px;border:.5px solid var(--chrome-border);border-radius:13px;overflow:hidden;background:var(--surface-grad,linear-gradient(160deg,#fff,#f7f8fb));box-shadow:var(--bevel-top),var(--shadow-e1)}
#dailyLogsWorkspaceWrap .dlc-fieldstrip .fcell{padding:11px 13px;border-right:.5px solid var(--chrome-border)}
#dailyLogsWorkspaceWrap .dlc-fieldstrip .fcell:nth-child(4n){border-right:0}
#dailyLogsWorkspaceWrap .dlc-fieldstrip .fc-l{font-size:10px;font-weight:800;letter-spacing:.03em;color:var(--text-muted);display:flex;align-items:center;gap:4px}
#dailyLogsWorkspaceWrap .dlc-fieldstrip .fc-l .fc-ic{width:12px;height:12px;opacity:.8}
#dailyLogsWorkspaceWrap .dlc-fieldstrip .fc-v{font-size:12px;font-weight:700;color:var(--text-primary);margin-top:3px}
#dailyLogsWorkspaceWrap .dlc-crew .ic{width:12px;height:12px;vertical-align:-2px;margin-right:1px}
#dailyLogsWorkspaceWrap .dlc-fieldstrip .empty-cell .fc-v{color:var(--text-muted);font-weight:600}
@media (max-width:760px){ #dailyLogsWorkspaceWrap .dlc-fieldstrip{grid-template-columns:repeat(2,1fr)} #dailyLogsWorkspaceWrap .dlc-fieldstrip .fcell:nth-child(2n){border-right:0} }
/* photos */
#dailyLogsWorkspaceWrap .dlc-photos{display:flex;flex-wrap:wrap;gap:9px;margin-top:13px}
#dailyLogsWorkspaceWrap .dlc-photo{width:78px;height:58px;border-radius:12px;object-fit:cover;cursor:pointer;box-shadow:var(--bevel-top),var(--shadow-e1);border:.5px solid rgba(0,0,0,.06);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
#dailyLogsWorkspaceWrap .dlc-photo:hover{transform:translateY(-2px);box-shadow:var(--shadow-e2)}
#dailyLogsWorkspaceWrap .dlc-photo.more{display:grid;place-items:center;background:var(--surface-grad,var(--card-bg));font-size:13px;font-weight:800;color:var(--text-secondary)}
/* F2 #10 — linked-photo unlink (×) affordance (undo path); shown only when the log is editable */
#dailyLogsWorkspaceWrap .dlc-photo-wrap{position:relative;display:inline-flex}
#dailyLogsWorkspaceWrap .dlc-photo-x{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:999px;border:none;cursor:pointer;background:var(--color-error,#ff3b30);color:#fff;font-size:12px;line-height:1;display:none;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.25)}
#dailyLogsWorkspaceWrap .dlc-photo-wrap:hover .dlc-photo-x,#dailyLogsWorkspaceWrap .dlc-photo-wrap:focus-within .dlc-photo-x{display:flex}
/* F2 #10 — "photos taken today, not yet linked" bridge strip. Signals "pending" via a subtle
   labeled pill + reduced thumb opacity (NO colored edge-strip per the HARD rule). */
#dailyLogsWorkspaceWrap .dlc-unlinked-strip{margin-top:13px;padding:11px 12px;border-radius:13px;border:1px dashed var(--chrome-border);background:color-mix(in srgb,var(--app-accent) 3%,transparent)}
#dailyLogsWorkspaceWrap .dlc-unlinked-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
#dailyLogsWorkspaceWrap .dlc-unlinked-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--text-secondary)}
#dailyLogsWorkspaceWrap .dlc-unlinked-pill .ic{width:13px;height:13px;opacity:.8}
#dailyLogsWorkspaceWrap .dlc-linkall{margin-left:auto;appearance:none;border:.5px solid var(--app-accent);background:color-mix(in srgb,var(--app-accent) 10%,transparent);color:var(--app-accent);font:inherit;font-size:11px;font-weight:700;padding:4px 11px;border-radius:999px;cursor:pointer}
#dailyLogsWorkspaceWrap .dlc-linkall:hover{background:color-mix(in srgb,var(--app-accent) 18%,transparent)}
#dailyLogsWorkspaceWrap .dlc-photo.dlc-unlinked{opacity:.72;transition:opacity var(--motion-fast),transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
#dailyLogsWorkspaceWrap .dlc-photo.dlc-unlinked:hover{opacity:1;transform:translateY(-2px);box-shadow:var(--shadow-e2)}
@media (max-width:760px){ #dailyLogsWorkspaceWrap .dlc-unlinked-strip{padding:9px 10px} }
/* footer */
#dailyLogsWorkspaceWrap .lc-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 17px;border-top:.5px solid var(--chrome-border);background:color-mix(in srgb,var(--app-accent) 2%,transparent);font-size:11.5px;color:var(--text-muted)}
#dailyLogsWorkspaceWrap .lc-foot .spacer{flex:1}
#dailyLogsWorkspaceWrap .lc-author{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--text-secondary)}
#dailyLogsWorkspaceWrap .lc-author .avatar{width:24px;height:24px;border-radius:999px;display:grid;place-items:center;color:#fff;font-size:10px;font-weight:800}
#dailyLogsWorkspaceWrap .dlc-signed{color:var(--color-success);font-weight:800}
#dailyLogsWorkspaceWrap .dlc-draft{color:var(--co-pending-fg,#9a6212);font-weight:800;display:inline-flex;align-items:center;gap:3px}
#dailyLogsWorkspaceWrap .dlc-draft .ic{width:12px;height:12px}
/* Rule 7 / Touch — comfortable hit area on the icon-only card actions (PDF/Edit/Delete).
   Visual glyph stays 13px; the tap target grows to 34px so a thumb can't mis-tap on a phone. */
#dailyLogsWorkspaceWrap .dlc-act{padding:5px 10px;font-size:12px;min-height:34px;display:inline-flex;align-items:center;justify-content:center;gap:5px}
#dailyLogsWorkspaceWrap .dlc-act svg{width:13px;height:13px;display:block}
#dailyLogsWorkspaceWrap .dlc-del:hover{color:var(--app-danger,#ef4444)}
#dailyLogsWorkspaceWrap .dl-add-photo-btn{padding-top:10px}
.dl-log-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--text-muted);margin-top:12px;padding-top:8px;border-top:0.5px solid color-mix(in srgb, var(--text-primary) 6%, transparent)}
.dl-log-foot-author{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-log-actions{display:flex;gap:2px;flex-shrink:0}
.dl-log-btn{
  width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-secondary);
  cursor:pointer;font-family:inherit;transition:background var(--motion-fast),color var(--motion-fast);
  -webkit-tap-highlight-color:transparent;
}
.dl-log-btn svg{width:14px;height:14px}
.dl-log-btn:hover{background:color-mix(in srgb, var(--text-primary) 6%, transparent);color:var(--text-primary)}
.dl-log-btn:active{background:color-mix(in srgb, var(--text-primary) 10%, transparent)}
.dl-log-btn-del{color:var(--app-danger)}
.dl-log-btn-del:hover{background:color-mix(in srgb, var(--app-danger) 8%, transparent);color:var(--app-danger)}
.modal-section-actions{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;align-items:center}
.btn-ghost-icon{
  background:color-mix(in srgb, var(--app-accent) 12%, transparent);
  color:var(--app-accent);border:none;border-radius:var(--radius-md);
  padding:8px 14px;font-size:14px;font-weight:600;font-family:inherit;
  cursor:pointer;display:inline-flex;align-items:center;
  transition:background var(--motion-fast),transform var(--motion-fast);
  -webkit-tap-highlight-color:transparent;
}
.btn-ghost-icon:hover{background:color-mix(in srgb, var(--app-accent) 18%, transparent)}
.btn-ghost-icon:active{transform:scale(.97)}

/* V67 — tracked-add-grid was using a surface-2 (darker grey) background
   INSIDE the white .modal-section card, producing a card-in-card with
   the inner panel visibly darker than the outer card. Drop the bg + border
   so it visually flows with the surrounding form, matching the pattern
   used by every other tab's add-form. */
.tracked-add-grid{display:grid;grid-template-columns:minmax(0,130px) minmax(0,2fr) minmax(0,128px) minmax(0,1fr) minmax(0,132px) minmax(0,110px);gap:8px;align-items:center;min-width:0;padding:0;background:transparent;border:none;margin-top:8px}
.tracked-add-grid .field-full{grid-column:1/-1}
.tracked-add-actions{grid-column:1/-1;display:flex;justify-content:flex-end}
.tracked-type-itb{background:var(--type-itb-bg);color:var(--type-itb-fg)}
/* V141 — punch-item photo button (photo↔punch link) */
.punch-act-row{display:inline-flex;align-items:center;gap:4px;justify-content:flex-end}
.punch-photo-btn{display:inline-flex;align-items:center;gap:3px;border:none;background:color-mix(in srgb,var(--text-primary) 7%,transparent);color:var(--text-muted);border-radius:var(--radius-sm);padding:3px 6px;cursor:pointer;font:inherit;transition:background var(--motion-fast),color var(--motion-fast)}
.punch-photo-btn:hover{background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent)}
.punch-photo-btn.has{background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent)}
.punch-photo-n{font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums}
/* V139 — AIA G702 Application for Payment summary (SOV tab) */
.g702-card{margin:0 0 14px;padding:12px 14px;border-radius:var(--radius-group);background:color-mix(in srgb,var(--text-primary) 3.5%,transparent);border:0.5px solid var(--chrome-border)}
.g702-head{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:700;color:var(--text-primary);letter-spacing:-.2px;margin-bottom:9px}
.g702-form{font-size:9.5px;font-weight:700;letter-spacing:.3px;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 12%,transparent);padding:1px 6px;border-radius:var(--radius-pill);vertical-align:1px;margin-left:4px}
.g702-pct{font-size:11.5px;font-weight:600;color:var(--text-muted);letter-spacing:0}
.g702-row{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;font-size:13px;border-top:0.5px solid color-mix(in srgb,var(--text-primary) 6%,transparent)}
.g702-row:first-of-type{border-top:none}
.g702-label{color:var(--text-secondary)}
.g702-val{font-weight:600;color:var(--text-primary);font-variant-numeric:tabular-nums;letter-spacing:-.2px}
.g702-strong .g702-label,.g702-strong .g702-val{font-weight:700;color:var(--text-primary)}
.g702-pay{margin:4px -8px 0;padding:8px;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--color-success) 12%,transparent);border-top:none}
.g702-pay .g702-label{font-weight:700;color:color-mix(in srgb,var(--color-success) 72%,var(--text-primary));text-transform:uppercase;font-size:11px;letter-spacing:.3px}
.g702-pay .g702-val{font-size:17px;font-weight:800;color:color-mix(in srgb,var(--color-success) 72%,var(--text-primary))}
/* V138 — Closeout checklist (Punch tab) */
.closeout-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.closeout-count{font-size:19px;font-weight:800;color:var(--text-primary);letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.closeout-of{font-size:12px;font-weight:500;color:var(--text-muted);letter-spacing:0}
.closeout-pct{font-size:14px;font-weight:700;color:var(--app-accent);font-variant-numeric:tabular-nums}
.closeout-pct.done{color:var(--color-success)}
.closeout-track{height:7px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--text-primary) 9%,transparent);overflow:hidden;margin-bottom:12px}
.closeout-fill{height:100%;border-radius:var(--radius-pill);background:var(--app-accent);transition:width var(--motion-slow) var(--ease-spring)}
.closeout-fill.done{background:var(--color-success)}
.closeout-list{display:flex;flex-direction:column;gap:2px}
.closeout-row{display:flex;align-items:center;gap:11px;width:100%;padding:9px 8px;border:none;background:none;border-radius:var(--radius-sm);cursor:pointer;font:inherit;text-align:left;transition:background var(--motion-fast) var(--ease-out)}
.closeout-row:hover{background:color-mix(in srgb,var(--app-accent) 6%,transparent)}
.closeout-check{width:20px;height:20px;border-radius:6px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid color-mix(in srgb,var(--text-primary) 22%,transparent);color:#fff;transition:background var(--motion-fast),border-color var(--motion-fast)}
.closeout-row.on .closeout-check{background:var(--color-success);border-color:var(--color-success)}
.closeout-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.closeout-label{font-size:13.5px;font-weight:600;color:var(--text-primary);letter-spacing:-.1px}
.closeout-row.on .closeout-label{color:var(--text-muted);text-decoration:line-through}
.closeout-sub{font-size:11.5px;color:var(--text-muted)}
/* V151 — live status hint chip on a closeout item (e.g. punch open count) */
.closeout-hint{margin-left:auto;flex-shrink:0;font-size:10.5px;font-weight:700;letter-spacing:.02em;padding:2px 8px;border-radius:var(--radius-pill);align-self:center}
.closeout-hint-warn{background:color-mix(in srgb,var(--color-warning) 16%,transparent);color:color-mix(in srgb,var(--color-warning) 82%,var(--text-primary))}
.closeout-hint-good{background:color-mix(in srgb,var(--color-success) 14%,transparent);color:color-mix(in srgb,var(--color-success) 74%,var(--text-primary))}
.closeout-zip-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--radius-pill);border:0.5px solid color-mix(in srgb,var(--app-accent) 32%,transparent);background:color-mix(in srgb,var(--app-accent) 8%,transparent);color:var(--app-accent);font:inherit;font-size:11px;font-weight:600;letter-spacing:.1px;cursor:pointer;transition:background var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-out)}
.closeout-zip-btn:hover{background:color-mix(in srgb,var(--app-accent) 14%,transparent)}
.closeout-zip-btn:active{transform:scale(.97)}
.closeout-zip-btn svg{flex-shrink:0}
/* V152 — renderCloseout completion meter: SVG progress ring + grouped tactile checklist. ADD-only;
   the shared rail renderer (_pnWsCloseoutBody) keeps the flat .closeout-head/.closeout-pct look above. */
.closeout-meter{display:flex;align-items:center;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.closeout-ring{position:relative;width:52px;height:52px;flex-shrink:0}
.closeout-ring svg{transform:rotate(-90deg)}
.closeout-ring .cor-bg{fill:none;stroke:color-mix(in srgb,var(--text-primary) 10%,transparent);stroke-width:5}
.closeout-ring .cor-fg{fill:none;stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset var(--motion-slow) var(--ease-spring),stroke var(--motion-base) var(--ease-out)}
.closeout-ring-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:var(--text-primary);font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.closeout-ring-pct span{font-size:8px;font-weight:700;margin-left:1px;color:var(--text-muted)}
.closeout-ring-pct.done{color:var(--color-success)}
.closeout-meter-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.closeout-meter-text .closeout-count{font-size:20px;line-height:1.05}
.closeout-meter-sub{font-size:11.5px;font-weight:600;color:var(--text-muted)}
.closeout-actions{margin-left:auto;display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.closeout-groups{display:flex;flex-direction:column;gap:14px}
.closeout-group{display:flex;flex-direction:column;gap:3px}
.closeout-group-h{display:flex;align-items:center;gap:7px;padding:0 2px 4px}
.closeout-group-h svg{width:13px;height:13px;fill:none;stroke:var(--text-muted);stroke-width:1.5;flex-shrink:0}
.closeout-group-lbl{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)}
.closeout-group-n{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--text-muted);font-variant-numeric:tabular-nums;padding:1px 8px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--text-primary) 7%,transparent)}
.closeout-group-n.done{color:var(--color-success);background:color-mix(in srgb,var(--color-success) 13%,transparent)}
/* Tactile row pop — scoped under .closeout-groups so the shared flat rail is untouched. */
.closeout-groups .closeout-row{min-height:48px;padding:9px 11px;border-radius:var(--radius-md);transition:background var(--motion-fast) var(--ease-out),box-shadow var(--motion-base) var(--ease-out),transform var(--motion-fast) var(--ease-out)}
.closeout-groups .closeout-row:hover{background:color-mix(in srgb,var(--app-accent) 6%,var(--card-bg));box-shadow:var(--shadow-e1);transform:translateY(-1px)}
.closeout-groups .closeout-row:active{transform:scale(.99)}
.closeout-groups .closeout-row.on{background:color-mix(in srgb,var(--color-success) 6%,transparent)}
.closeout-groups .closeout-row.on .closeout-label{text-decoration:none}
.closeout-groups .closeout-check{width:21px;height:21px;border-radius:7px}
.closeout-groups .closeout-row.on .closeout-check{transform:scale(1.06);transition:background var(--motion-fast),border-color var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
@media (max-width:640px){.closeout-actions{margin-left:0;width:100%;justify-content:flex-start;margin-top:4px}}
@media (prefers-reduced-motion:reduce){.closeout-ring .cor-fg{transition:none}.closeout-groups .closeout-row:hover,.closeout-groups .closeout-row:active{transform:none}.closeout-groups .closeout-row.on .closeout-check{transform:none}}
/* G6-W3 — O&M package builder (left candidates, right live preview) */
.om-builder{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-height:56vh}
.om-candidates,.om-preview{overflow:auto;border:.5px solid var(--chrome-border);border-radius:12px;padding:10px;background:color-mix(in srgb,var(--text-primary) 2.5%,transparent)}
.om-group{margin-bottom:12px}
.om-group-title{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
.om-cand{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;font-size:12.5px;cursor:pointer;transition:background .12s}
.om-cand:hover{background:color-mix(in srgb,var(--app-accent) 8%,transparent)}
.om-cand.on{background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
.om-cand input{flex-shrink:0}
.om-cand-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.om-prev-head{font-size:12px;font-weight:700;color:var(--text-secondary);margin-bottom:10px}
.om-prev-count{font-size:20px;font-weight:800;color:var(--app-accent)}
.om-prev-sec{margin-bottom:12px}
.om-prev-sec-h{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px}
.om-prev-row{font-size:12.5px;color:var(--text-primary);padding:3px 0;border-bottom:.5px solid color-mix(in srgb,var(--chrome-border) 60%,transparent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:560px){.om-builder{grid-template-columns:1fr;max-height:none}.om-candidates,.om-preview{max-height:40vh}}
/* V137 — Procurement coverage panel (ITB tab): per-trade buyout status chips */
.proc-cov{margin:0 0 14px;padding:12px 14px;border-radius:var(--radius-group);background:color-mix(in srgb,var(--text-primary) 3.5%,transparent);border:0.5px solid var(--chrome-border)}
.proc-cov-title{font-size:13px;font-weight:700;color:var(--text-primary);letter-spacing:-.2px;display:flex;align-items:center;gap:7px;margin-bottom:10px}
.proc-cov-sub{font-size:11px;font-weight:500;color:var(--text-muted);letter-spacing:0}
.proc-cov-grid{display:flex;flex-wrap:wrap;gap:7px}
.proc-cov-chip{display:inline-flex;flex-direction:column;gap:1px;padding:5px 10px;border-radius:var(--radius-md);border:0.5px solid transparent;min-width:0}
.proc-cov-trade{font-size:12px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.proc-cov-state{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.proc-cov-chip.pc-awarded{background:color-mix(in srgb,var(--color-success) 12%,transparent);border-color:color-mix(in srgb,var(--color-success) 28%,transparent)}
.proc-cov-chip.pc-awarded .proc-cov-state{color:color-mix(in srgb,var(--color-success) 72%,var(--text-primary))}
.proc-cov-chip.pc-bids{background:color-mix(in srgb,var(--app-accent) 10%,transparent);border-color:color-mix(in srgb,var(--app-accent) 24%,transparent)}
.proc-cov-chip.pc-bids .proc-cov-state{color:var(--app-accent)}
.proc-cov-chip.pc-bidding,.proc-cov-chip.pc-invited{background:color-mix(in srgb,var(--color-warning) 11%,transparent);border-color:color-mix(in srgb,var(--color-warning) 26%,transparent)}
.proc-cov-chip.pc-bidding .proc-cov-state,.proc-cov-chip.pc-invited .proc-cov-state{color:color-mix(in srgb,var(--color-warning) 82%,var(--text-primary))}
.proc-cov-chip.pc-nobid{background:color-mix(in srgb,var(--text-primary) 7%,transparent)}
.proc-cov-chip.pc-nobid .proc-cov-state{color:var(--text-muted)}
/* V136 — Bid leveling panel (ITB tab): compare competing bids per trade, low highlighted */
.bid-level{margin:0 0 16px;padding:12px 14px;border-radius:var(--radius-group);background:color-mix(in srgb,var(--text-primary) 3.5%,transparent);border:0.5px solid var(--chrome-border)}
.bid-level-title{font-size:13px;font-weight:700;color:var(--text-primary);letter-spacing:-.2px;display:flex;align-items:center;gap:7px;margin-bottom:12px}
.bid-level-sub{font-size:11px;font-weight:500;color:var(--text-muted);letter-spacing:0}
.bid-level-trade{margin-bottom:12px}
.bid-level-trade:last-child{margin-bottom:0}
.bid-level-trade-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.bid-level-trade-name{font-size:12px;font-weight:700;color:var(--text-primary);text-transform:uppercase;letter-spacing:.3px}
.bid-level-spread{font-size:11px;font-weight:600;color:var(--text-muted);font-variant-numeric:tabular-nums}
.bid-level-row{display:flex;align-items:center;justify-content:space-between;width:100%;gap:10px;padding:7px 10px;border:none;background:color-mix(in srgb,var(--text-primary) 4%,transparent);border-radius:var(--radius-sm);cursor:pointer;font:inherit;text-align:left;margin-bottom:3px;transition:background var(--motion-fast) var(--ease-out)}
.bid-level-row:hover{background:color-mix(in srgb,var(--app-accent) 8%,transparent)}
.bid-level-row.low{background:color-mix(in srgb,var(--color-success) 12%,transparent)}
.bid-level-row.low:hover{background:color-mix(in srgb,var(--color-success) 18%,transparent)}
.bid-level-row.awarded{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--app-accent) 40%,transparent)}
.bid-level-vendor{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text-primary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bid-level-star{color:var(--color-success);flex-shrink:0}
.bid-level-row.low .bid-level-vendor{color:color-mix(in srgb,var(--color-success) 80%,var(--text-primary))}
.bid-level-tag{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 14%,transparent);padding:1px 6px;border-radius:var(--radius-pill)}
.bid-level-amt{font-size:13px;font-weight:800;color:var(--text-primary);font-variant-numeric:tabular-nums;letter-spacing:-.3px;flex-shrink:0}
.bid-level-row.low .bid-level-amt{color:color-mix(in srgb,var(--color-success) 78%,var(--text-primary))}
.bid-level-delta{font-size:10.5px;font-weight:600;color:var(--text-muted)}
.itb-add-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,132px) minmax(0,132px) minmax(0,118px);gap:8px;align-items:center;min-width:0}
.itb-add-grid .field-full{grid-column:1/-1}
.itb-add-actions{grid-column:1/-1;display:flex;justify-content:flex-end}
/* Vendor input — wrapped with a search-icon prefix so it reads as an autocomplete */
.itb-vendor-wrap{position:relative;display:flex;align-items:center;min-width:0}
.itb-vendor-icon{position:absolute;left:10px;width:14px;height:14px;color:var(--text-muted);pointer-events:none;flex-shrink:0}
.itb-vendor-input{padding-left:32px !important}
.itb-vendor-input.rrt-cp-bound:focus + .itb-vendor-icon,.itb-vendor-wrap:focus-within .itb-vendor-icon{color:var(--app-accent)}
.itb-vendor-helper{font-size:11.5px;color:var(--text-muted);padding:2px 2px 6px;line-height:1.4;margin-top:-2px}
.itb-vendor-helper.is-empty{color:var(--app-warn,var(--text-secondary));font-weight:500}
.itb-vendor-helper .itb-vendor-helper-link{color:var(--app-accent);text-decoration:underline;cursor:pointer;background:none;border:none;padding:0;font:inherit}

/* Stages — Apple-system */
.stage-list{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.stage-item{display:flex;align-items:center;gap:10px;padding:8px 11px;background:var(--surface-grad);border:none;border-radius:var(--radius-md);position:relative;overflow:hidden;transition:box-shadow var(--motion-base) ease,opacity var(--motion-fast),transform var(--motion-fast) var(--ease-spring);box-shadow:var(--bevel-top),var(--shadow-e1)}
.stage-item:hover{box-shadow:var(--bevel-top),var(--shadow-e2)}
/* V107 — stage drag-reorder handle + drag/drop affordances */
.stage-grip{flex-shrink:0;background:none;border:none;padding:0 2px;cursor:grab;color:var(--text-muted);display:inline-flex;align-items:center;opacity:.5;transition:opacity var(--motion-fast)}
.stage-grip svg{width:13px;height:13px}
.stage-item:hover .stage-grip{opacity:.85}
.stage-grip:active{cursor:grabbing}
.stage-item.stage-dragging{opacity:.5;box-shadow:var(--shadow-e3)}
.stage-item.stage-drop-above{box-shadow:inset 0 2px 0 var(--app-accent)}
/* V110 — stage timeline strip (mini-schedule from target dates) */
.stage-tl{margin:4px 0 16px;padding:14px 16px 38px;background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-e1)}
.stage-tl-title{font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);margin-bottom:18px}
.stage-tl-track{position:relative;height:14px;margin:0 6px}
.stage-tl-line{position:absolute;left:0;right:0;top:6px;height:2.5px;border-radius:2px;background:color-mix(in srgb,var(--text-primary) 12%,transparent)}
/* V125 — mini-Gantt status segments coloring the line between consecutive stage markers */
.stage-tl-seg{position:absolute;top:6px;height:2.5px;border-radius:2px;background:color-mix(in srgb,var(--text-primary) 12%,transparent);transition:background var(--motion-base) var(--ease-out)}
.stage-tl-seg.done{background:var(--color-success)}
.stage-tl-seg.active{background:linear-gradient(90deg,var(--color-success),var(--app-accent))}
.stage-tl-seg.slip{background:var(--color-error)}
.stage-tl-today{position:absolute;top:-3px;bottom:-26px;width:2px;background:var(--app-accent);opacity:.55;border-radius:1px}
.stage-tl-today::before{content:'today';position:absolute;top:-13px;left:50%;transform:translateX(-50%);font-size:8px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--app-accent);white-space:nowrap}
.stage-tl-marker{position:absolute;top:0;transform:translateX(-50%)}
.stage-tl-dot{width:14px;height:14px;border-radius:50%;background:color-mix(in srgb,var(--text-primary) 18%,transparent);box-shadow:inset 0 0 0 1.5px var(--card-bg),0 0 0 0.5px color-mix(in srgb,var(--text-primary) 14%,transparent)}
.stage-tl-dot.done{background:var(--color-success)}
.stage-tl-dot.active{background:var(--app-accent);box-shadow:inset 0 0 0 1.5px var(--card-bg),0 0 0 3px color-mix(in srgb,var(--app-accent) 22%,transparent)}
.stage-tl-dot.blocked{background:var(--color-error)}
/* V120 — stage slip (overdue / out-of-sequence) detection */
.stage-tl-dot.slip{background:var(--color-error);box-shadow:inset 0 0 0 1.5px var(--card-bg),0 0 0 3px color-mix(in srgb,var(--color-error) 24%,transparent)}
.stage-tl-date.slip{color:var(--color-error)}
/* Slip SEVERITY tones — match the Field Intel slip-alerts palette so a stage reads the
   same urgency everywhere (critical=red [base], high=red-orange, warning=amber).
   --slip-c is consumed by both the timeline strip + the workspace list dots/dates.
   Selectors carry the parent context (.stage-ws-row / .stage-tl-marker / .stage-tl-track)
   so they out-specify the base `.stage-ws-row .stage-ws-dot.slip{red}` rule (same 3-class
   weight would otherwise lose on source order). */
.slip.sev-critical{--slip-c:var(--color-error)}
.slip.sev-high{--slip-c:color-mix(in srgb,var(--color-error) 55%,var(--color-warning))}
.slip.sev-warning{--slip-c:var(--color-warning)}
.stage-tl-track .stage-tl-seg.slip.sev-critical,.stage-tl-track .stage-tl-seg.slip.sev-high,.stage-tl-track .stage-tl-seg.slip.sev-warning{background:var(--slip-c)}
.stage-tl-marker .stage-tl-dot.slip.sev-critical,.stage-tl-marker .stage-tl-dot.slip.sev-high,.stage-tl-marker .stage-tl-dot.slip.sev-warning{background:var(--slip-c);box-shadow:inset 0 0 0 1.5px var(--card-bg),0 0 0 3px color-mix(in srgb,var(--slip-c) 24%,transparent)}
.stage-tl-marker .stage-tl-date.slip.sev-critical,.stage-tl-marker .stage-tl-date.slip.sev-high,.stage-tl-marker .stage-tl-date.slip.sev-warning{color:var(--slip-c)}
.stage-ws-row .stage-ws-dot.slip.sev-critical,.stage-ws-row .stage-ws-dot.slip.sev-high,.stage-ws-row .stage-ws-dot.slip.sev-warning{background:var(--slip-c)}
.stage-ws-row .stage-ws-date.slip.sev-critical,.stage-ws-row .stage-ws-date.slip.sev-high,.stage-ws-row .stage-ws-date.slip.sev-warning{color:var(--slip-c)}
.stage-tl-slip{display:inline-flex;align-items:center;gap:5px;margin-left:10px;padding:2px 9px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--color-error) 12%,transparent);color:var(--color-error);font-size:10px;font-weight:700;letter-spacing:0;text-transform:none;vertical-align:1px}
.stage-tl-slip svg{width:11px;height:11px}
.stage-tl-slip-door{cursor:pointer;transition:background var(--motion-fast),transform var(--motion-fast)}
.stage-tl-slip-door:hover{background:color-mix(in srgb,var(--color-error) 20%,transparent);transform:translateY(-1px)}
.stage-tl-slip-door:focus-visible{outline:2px solid color-mix(in srgb,var(--color-error) 55%,transparent);outline-offset:2px}
.stage-tl-info{position:absolute;top:18px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;white-space:nowrap}
.stage-tl-marker.tl-flip .stage-tl-info{align-items:flex-end;left:auto;right:50%;transform:translateX(50%)}
/* G12 — left-edge markers anchor the label's LEFT edge at the dot (no -50%
   shift) so it extends rightward into the block instead of spilling off-left. */
.stage-tl-marker.tl-pin-l .stage-tl-info{align-items:flex-start;left:0;right:auto;transform:none}
.stage-tl-name{font-size:9.5px;font-weight:600;color:var(--text-primary);max-width:80px;overflow:hidden;text-overflow:ellipsis}
.stage-tl-date{font-size:9px;font-weight:600;color:var(--text-muted);font-variant-numeric:tabular-nums}
/* In the narrow (~270px) full-page workspace master strip, up to 7 absolutely-positioned
   markers make the per-marker NAME labels collide/overlap into an unreadable jumble. The
   strip is a glance overview — keep the dots + dates (which don't collide) and drop the
   names here (full name is in each marker's title= tooltip + the stage list right below).
   The wider modal strip keeps its name labels. */
#stageWsMaster .stage-tl-name{display:none}
/* V108 — per-stage target date control */
.stage-date{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;margin-left:auto;padding:3px 8px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--text-primary) 6%,transparent);cursor:pointer;transition:background var(--motion-fast)}
.stage-date.has-date{background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
.stage-date:hover{background:color-mix(in srgb,var(--text-primary) 11%,transparent)}
.stage-date-ico{display:inline-flex;color:var(--text-muted);flex-shrink:0}
.stage-date.has-date .stage-date-ico{color:var(--app-accent)}
.stage-date-ico svg{width:13px;height:13px}
.stage-date-input{border:none;background:none;font-size:11.5px;font-weight:600;color:var(--text-muted);font-family:inherit;width:108px;cursor:pointer;outline:none;transition:width var(--motion-fast) var(--ease-out)}
/* Empty date = collapse to just the calendar icon so the stage NAME gets the room
   (was forcing mid-word wrap "Demo & Prote/ction"). Expands on hover/focus-within to set a date. */
.stage-date:not(.has-date) .stage-date-input{width:0}
.stage-date:not(.has-date):hover .stage-date-input,
.stage-date:not(.has-date):focus-within .stage-date-input{width:108px}
.stage-date.has-date .stage-date-input{color:color-mix(in srgb,var(--app-accent) 75%,var(--text-primary))}
.stage-date-input::-webkit-calendar-picker-indicator{opacity:0;width:0;margin:0}
@media (max-width:640px){.stage-date-input{width:110px;font-size:11px}}
/* pass-2 G1: status via tinted whole-row fill (NOT a left edge-spine — hard rule).
   The stage status select + dot in the row carry the explicit state. */
.stage-item.in_progress{background:color-mix(in srgb,var(--app-accent) 4%,var(--card-bg))}
.stage-item.blocked{background:color-mix(in srgb,var(--app-danger) 4%,var(--card-bg))}
.stage-item.complete::before{background:var(--color-success)}
.stage-item.complete{background:color-mix(in srgb,var(--color-success) 4%,var(--card-bg))}
.stage-item:hover{border-color:var(--border-strong)}
.stage-name{flex:1;min-width:0;font-size:13px;font-weight:500;letter-spacing:-.05px;color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;word-break:normal;overflow-wrap:break-word;hyphens:none;line-height:1.25}
.stage-item.complete .stage-name{color:var(--text-muted);text-decoration:line-through}
.stage-status-select{flex-shrink:0;font-size:11px;padding:3px 22px 3px 9px;border-radius:var(--radius-sm);border:0.5px solid var(--chrome-border);background-color:var(--surface);color:var(--text-muted);cursor:pointer;font-weight:500;letter-spacing:-.05px;font-family:inherit;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238e8e93'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;box-shadow:var(--shadow-e1);transition:background-color var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast)}
.stage-status-select:hover{border-color:var(--border-strong);box-shadow:var(--shadow-e2)}
/* Project member cards (full-page Members tab) — avatar + name + role pill, matching
   the Contacts-card identity quality (was plain bold-name note rows). */
/* proto-37 team-card list (Members tab). Role identity = a pill chip (NOT an edge strip). */
#projectMemberList .mcard{background:var(--card-bg);border-radius:18px;box-shadow:var(--bevel-top),var(--shadow-e2);border:.5px solid color-mix(in srgb,var(--app-accent) 4%,rgba(0,0,0,.05));overflow:hidden;margin-bottom:14px}
#projectMemberList .m-list{display:flex;flex-direction:column}
#projectMemberList .mrow{display:flex;align-items:center;gap:13px;padding:14px 18px;border-bottom:.5px solid var(--chrome-border,rgba(0,0,0,.08))}
#projectMemberList .mrow:last-child{border-bottom:0}
#projectMemberList .mrow:hover{background:var(--hover-overlay,rgba(0,0,0,.025))}
#projectMemberList .m-av{width:44px;height:44px;border-radius:999px;flex:0 0 44px;display:grid;place-items:center;color:#fff;font-size:14px;font-weight:800;box-shadow:0 1px 0 rgba(255,255,255,.4) inset;background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 78%,#fff),var(--app-accent));overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif}
#projectMemberList .m-av[data-initials]::before{content:attr(data-initials)}
#projectMemberList .m-av-img::before,#projectMemberList .m-av.m-av-broken::before{content:none}
#projectMemberList .m-av-img img{width:100%;height:100%;object-fit:cover;border-radius:999px}
#projectMemberList .m-av.m-av-broken{background:var(--surface-2);color:var(--text-secondary)}
#projectMemberList .m-av.m-av-broken[data-initials]::before{content:attr(data-initials)}
#projectMemberList .m-main{min-width:0;flex:1}
#projectMemberList .m-name{font-size:14.5px;font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:7px}
#projectMemberList .you{font-size:9.5px;font-weight:800;padding:1px 6px;border-radius:999px;background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent)}
#projectMemberList .m-email{font-size:11.5px;color:var(--text-secondary);font-weight:600;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:100%}
#projectMemberList .m-email:hover{color:var(--app-accent);text-decoration:underline}
#projectMemberList .role-chip{font-size:11px;font-weight:800;padding:5px 12px;border-radius:999px;flex:0 0 auto;white-space:nowrap}
#projectMemberList .role-chip.r-owner{background:var(--cd-client-bg,color-mix(in srgb,#0a8a8f 14%,transparent));color:var(--cd-client-fg,#0a8a8f)}
#projectMemberList .role-chip.r-admin{background:var(--cd-gc-bg,color-mix(in srgb,#2563eb 14%,transparent));color:var(--cd-gc-fg,#2563eb)}
#projectMemberList .role-chip.r-member{background:var(--cd-sub-bg,color-mix(in srgb,#7c3aed 14%,transparent));color:var(--cd-sub-fg,#7c3aed)}
#projectMemberList .role-chip.r-viewer{background:var(--badge-neutral-bg,var(--surface-2));color:var(--badge-neutral-fg,var(--text-secondary))}
#projectMemberList .m-remove{width:30px;height:30px;border-radius:999px;border:.5px solid var(--chrome-border,rgba(0,0,0,.1));background:var(--surface);display:grid;place-items:center;font-size:13px;cursor:pointer;color:var(--text-muted);flex:0 0 auto;transition:background var(--motion-fast),color var(--motion-fast)}
#projectMemberList .m-remove:hover{background:var(--color-error-bg,#fdeaea);color:var(--color-error,#c0392b);border-color:transparent}
@media(max-width:560px){#projectMemberList .mrow{flex-wrap:wrap}#projectMemberList .m-main{flex:1 1 100%;order:2}#projectMemberList .role-chip{order:3}}
.pm-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin-bottom:14px}
.pm-card{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:var(--radius-md);position:relative;transition:box-shadow var(--motion-base) var(--ease-out),transform var(--motion-fast) var(--ease-spring)}
.pm-card:hover{transform:translateY(-2px);box-shadow:var(--bevel-top),var(--shadow-e3)}
.pm-avatar{flex-shrink:0;width:38px;height:38px;border-radius:50%;background:var(--app-accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;line-height:1;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.pm-avatar::after{content:attr(data-initials)}
.pm-avatar-img{background:var(--surface-2)}
.pm-avatar-img::after{content:''}
.pm-avatar-img img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.pm-avatar-broken::after{content:attr(data-initials)}
.pm-card-main{flex:1;min-width:0}
.pm-card-name{font-size:13.5px;font-weight:600;color:var(--text-primary);letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-card-email{display:block;font-size:11.5px;color:var(--text-muted);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.pm-card-email:hover{color:var(--app-accent);text-decoration:underline}
.pm-card-role{flex-shrink:0;font-size:11px;font-weight:600;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 12%,transparent);padding:3px 9px;border-radius:var(--radius-pill);white-space:nowrap}
.pm-card-remove{flex-shrink:0;width:24px;height:24px;border:none;background:transparent;color:var(--text-muted);font-size:13px;line-height:1;border-radius:50%;cursor:pointer;opacity:0;transition:opacity var(--motion-fast),background var(--motion-fast),color var(--motion-fast)}
.pm-card:hover .pm-card-remove{opacity:1}
.pm-card-remove:hover{background:color-mix(in srgb,var(--color-error) 14%,transparent);color:var(--color-error)}
.stage-item.in_progress .stage-status-select{border-color:color-mix(in srgb,var(--app-accent) 30%,transparent);background-color:color-mix(in srgb,var(--app-accent) 10%,transparent);color:var(--app-accent)}
.stage-item.blocked .stage-status-select{border-color:color-mix(in srgb,var(--app-danger) 30%,transparent);background-color:color-mix(in srgb,var(--app-danger) 10%,transparent);color:#c00}
.stage-item.complete .stage-status-select{border-color:color-mix(in srgb,var(--color-success) 30%,transparent);background-color:color-mix(in srgb,var(--color-success) 10%,transparent);color:color-mix(in srgb, var(--color-success) 72%, var(--text-primary))}
.stage-delete{background:transparent;border:none;color:var(--text-muted);cursor:pointer;font-size:14px;padding:4px 6px;border-radius:var(--radius-sm);opacity:0;transition:opacity var(--motion-fast),color var(--motion-fast),background var(--motion-fast);line-height:1;flex-shrink:0;display:inline-flex;align-items:center}
.stage-delete-ico{width:13px;height:13px;stroke:currentColor;fill:none}
/* W5-5 — tap-reorder buttons: HIDDEN on hover-capable (mouse) devices where drag-to-reorder works;
   SHOWN on coarse-pointer (touch) devices where HTML5 drag never fires. */
.stage-move{display:none;background:transparent;border:none;color:var(--text-muted);cursor:pointer;padding:4px 6px;border-radius:var(--radius-sm);line-height:1;flex-shrink:0;align-items:center;justify-content:center}
.stage-move svg{width:14px;height:14px;stroke:currentColor;fill:none}
.stage-move:active{transform:scale(.88)}
@media (hover:none),(pointer:coarse){
  .stage-move{display:inline-flex}
  #stageList .jcard .jc-grip{display:none} /* the drag grip is useless on touch — hide it */
}
.stage-item:hover .stage-delete{opacity:.6}
.stage-delete:hover{color:var(--app-danger);background:color-mix(in srgb,var(--app-danger) 10%,transparent);opacity:1}
.stage-summary{margin-bottom:14px}
.stage-summary-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:7px}
.stage-summary-count{font-size:19px;font-weight:800;letter-spacing:-.5px;color:var(--text-primary);font-variant-numeric:tabular-nums}
.stage-summary-of{font-size:12px;font-weight:500;color:var(--text-muted);letter-spacing:-.05px}
.stage-summary-pct{font-size:13px;font-weight:700;color:color-mix(in srgb,var(--color-success) 70%,var(--text-primary));font-variant-numeric:tabular-nums}
.stage-summary-track{height:6px;background:color-mix(in srgb,var(--text-primary) 10%,transparent);border-radius:var(--radius-pill);overflow:hidden}
.stage-summary-fill{height:100%;background:linear-gradient(90deg, color-mix(in srgb,var(--color-success) 80%,#fff), var(--color-success));border-radius:var(--radius-pill);transition:width var(--motion-slow) var(--ease-spring)}

/* ===== Project Stages · Pass 2 (2026-06-05) — guided journey ===== */
/* journey rollup panel (on white) */
#stageList .jp-roll{display:flex;align-items:center;gap:26px;flex-wrap:wrap;background:var(--card-bg);border:.5px solid var(--chrome-border);border-radius:18px;padding:16px 18px;box-shadow:var(--shadow-e1);margin-bottom:16px}
#stageList .jpr-lead{display:flex;flex-direction:column;gap:2px}
#stageList .jpr-kicker{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--app-accent)}
#stageList .jpr-big{font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--text-primary)}
#stageList .jpr-big span{font-size:17px;opacity:.62;font-weight:700}
#stageList .jpr-sub{font-size:12.5px;font-weight:600;color:var(--text-secondary)}
#stageList .jpr-sub b{color:var(--text-primary)}
#stageList .sh-meter{flex:1;min-width:280px}
#stageList .smm-bar{display:flex;gap:3px;height:16px;border-radius:999px;overflow:hidden;background:var(--surface-2,#e5e5ea);padding:3px;box-shadow:inset 0 1px 2px rgba(0,0,0,.08)}
#stageList .seg-fill{flex:1;border-radius:999px;min-width:3px}
#stageList .seg-fill.done{background:linear-gradient(180deg,#3fd07a,#10b981);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
#stageList .seg-fill.active{background:linear-gradient(180deg,color-mix(in srgb,#fff 22%,var(--app-accent)),var(--app-accent));box-shadow:0 0 8px color-mix(in srgb,var(--app-accent) 45%,transparent)}
#stageList .seg-fill.blocked{background:linear-gradient(180deg,#f87171,var(--color-error,#ef4444))}
#stageList .seg-fill.next{background:var(--surface-3,#d1d1d6)}
#stageList .smm-cap{display:flex;justify-content:space-between;font-size:10.5px;font-weight:700;color:var(--text-muted);margin-top:6px;gap:8px}
#stageList .jp-stats{display:flex;gap:1px;border-radius:13px;overflow:hidden;background:var(--chrome-border,rgba(0,0,0,.07))}
#stageList .jp-stat{background:var(--card-bg);padding:10px 16px;text-align:center}
#stageList .jp-stat .sst-v{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;color:var(--text-primary)}
#stageList .jp-stat .sst-l{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-top:3px}
#stageList .jp-stat.warn .sst-v{color:#b45309}
#stageList .jp-stat.bad .sst-v{color:var(--color-error,#c0392b)}
/* Track-Q "metrics are doors" — jp-stat tiles that jump into the journey below. The band is
   overflow:hidden with 1px seams (gap), so doors must NOT lift/transform (would break the seams):
   contained background-tint + focus ring only. A quiet chevron after the label signals tappability. */
#stageList .jp-stat.jp-stat-door{cursor:pointer;position:relative}
#stageList .jp-stat.jp-stat-door .sst-l::after{content:"›";margin-left:4px;color:var(--text-muted);opacity:.55;font-weight:800}
#stageList .jp-stat.jp-stat-door:hover{background:color-mix(in srgb,var(--text-primary) 4%,var(--card-bg))}
#stageList .jp-stat.jp-stat-door:hover .sst-l::after{opacity:.9}
#stageList .jp-stat.jp-stat-door:active{background:color-mix(in srgb,var(--text-primary) 7%,var(--card-bg))}
#stageList .jp-stat.jp-stat-door:focus-visible{outline:2px solid color-mix(in srgb,var(--app-accent) 60%,transparent);outline-offset:-2px}
@media (prefers-reduced-motion:no-preference){#stageList .jp-stat.jp-stat-door{transition:background var(--motion-fast) var(--ease-out)}}
/* journey list — lit-spine milestone cards */
#stageList .journey{position:relative}
#stageList .jstage{display:grid;grid-template-columns:52px 1fr;gap:0}
#stageList .j-spine{position:relative}
#stageList .j-spine::before{content:"";position:absolute;left:25px;top:0;bottom:0;width:2px;background:var(--surface-3,#d1d1d6)}
#stageList .jstage:first-child .j-spine::before{top:24px}
#stageList .jstage:last-child .j-spine::before{bottom:calc(100% - 24px)}
#stageList .jstage.done .j-spine::before,#stageList .jstage.active .j-spine::before{background:linear-gradient(180deg,#10b981,var(--app-accent))}
#stageList .j-node{position:relative;z-index:2;width:30px;height:30px;margin:13px auto 0;border-radius:999px;display:grid;place-items:center;font-size:13px;font-weight:800;background:var(--card-bg,#fff);color:var(--text-muted);box-shadow:0 0 0 2px var(--surface-3,#d1d1d6),inset 0 1px 0 rgba(255,255,255,.6)}
#stageList .jstage.done .j-node{background:linear-gradient(180deg,#3fd07a,#10b981);color:#fff;box-shadow:0 0 0 2px color-mix(in srgb,#10b981 40%,transparent),0 4px 10px -3px #10b981}
#stageList .jstage.active .j-node{background:linear-gradient(180deg,color-mix(in srgb,#fff 22%,var(--app-accent)),var(--app-accent));color:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 28%,transparent),0 4px 12px -3px var(--app-accent)}
#stageList .jstage.blocked .j-node{background:linear-gradient(180deg,#f87171,var(--color-error,#ef4444));color:#fff;box-shadow:0 0 0 2px color-mix(in srgb,var(--color-error,#ef4444) 35%,transparent)}
#stageList .jcard{margin:7px 0 9px;border-radius:16px;padding:13px 16px;position:relative;background:var(--surface-grad,#fff);border:.5px solid rgba(0,0,0,.05);box-shadow:var(--bevel-top),var(--shadow-e1);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
#stageList .jcard:hover{transform:translateY(-2px);box-shadow:var(--bevel-top),var(--shadow-e3)}
#stageList .jstage.active .jcard{box-shadow:var(--bevel-top),var(--glow-accent-soft,0 0 0 3px color-mix(in srgb,var(--app-accent) 12%,transparent)),var(--shadow-e2);border-color:color-mix(in srgb,var(--app-accent) 20%,transparent)}
#stageList .jstage.next .jcard{opacity:.92}
#stageList .jc-medallion{width:30px;height:30px;flex:0 0 30px;border-radius:999px;display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff;background:linear-gradient(180deg,color-mix(in srgb,#fff 24%,var(--phc,var(--app-accent))),var(--phc,var(--app-accent)));box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 3px 8px -3px var(--phc,var(--app-accent))}
#stageList .jstage.next .jc-medallion{background:color-mix(in srgb,var(--phc,var(--app-accent)) 20%,#fff);color:color-mix(in srgb,var(--phc,var(--app-accent)) 80%,#333);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
#stageList .jc-top{display:flex;align-items:flex-start;gap:11px}
#stageList .jc-headtext{flex:1;min-width:0}
#stageList .jc-name{font-size:14.5px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary)}
#stageList .jc-win{font-size:11.5px;color:var(--text-secondary);font-weight:600;margin-top:3px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#stageList .jc-win .w-ico{opacity:.6;display:inline-flex;align-items:center}
#stageList .jc-win .w-ico .ic{width:12px;height:12px}
#stageList .jc-dep .ic{width:12px;height:12px}
#stageList .jc-drift{color:#b45309;font-weight:800}
#stageList .jc-status{margin-left:auto;font-size:10px;font-weight:800;padding:3px 10px;border-radius:999px;white-space:nowrap;flex:0 0 auto}
#stageList .jc-status.st-done{background:var(--color-success-bg,#d1f2dd);color:var(--color-success,#15803d)}
#stageList .jc-status.st-active{background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent)}
#stageList .jc-status.st-next{background:var(--badge-neutral-bg,#e5e5ea);color:var(--text-secondary)}
#stageList .jc-status.st-blocked{background:var(--color-error-bg,#fdeaea);color:var(--color-error,#c0392b)}
#stageList .jc-dep{font-size:11px;color:var(--text-muted);font-weight:600;margin-top:7px;display:flex;align-items:center;gap:6px}
#stageList .jc-dep.blocked-dep{color:var(--color-error,#c0392b);font-weight:700}
#stageList .jc-foot{display:flex;align-items:center;gap:10px;margin-top:11px;flex-wrap:wrap}
/* 📔 'you are here' focus — completed cards rest as slim done-rows while work remains */
#stageList .jstage.jc-collapsed .jcard{padding:8px 16px;cursor:pointer;opacity:.82}
#stageList .jstage.jc-collapsed .jcard:hover{opacity:1;box-shadow:var(--bevel-top),var(--shadow-e2)}
#stageList .jstage.jc-collapsed .jc-foot,#stageList .jstage.jc-collapsed .jc-dep,#stageList .jstage.jc-collapsed .jc-win,#stageList .jstage.jc-collapsed .jc-fold{display:none}
#stageList .jstage.jc-collapsed .jc-name{font-size:13px;font-weight:700}
#stageList .jc-fold{margin-left:4px;flex-shrink:0;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;background:transparent;color:var(--text-muted);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
#stageList .jc-fold:hover{background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-primary)}
#stageList .jc-fold svg{width:13px;height:13px}
/* 📔 row 16 — inline rename input keeps the name's own type so nothing jumps */
#stageList .jc-name-input{font:inherit;font-size:14.5px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary);border:0;border-radius:8px;background:color-mix(in srgb,var(--app-accent) 8%,transparent);padding:1px 7px;margin:-1px -7px;width:100%;min-width:120px;outline:none;box-shadow:0 0 0 1.5px color-mix(in srgb,var(--app-accent) 45%,transparent)}
/* 📔 row 16 — deps pill + frosted checkbox popover (glass = chrome per DESIGN.md) */
.stage-deps-btn{display:inline-flex;align-items:center;gap:4px;border:0;border-radius:999px;padding:5px 9px;background:color-mix(in srgb,var(--text-primary) 6%,transparent);color:var(--text-secondary);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.stage-deps-btn svg{width:12px;height:12px}
.stage-deps-btn:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent)}
.stage-deps-btn:active{transform:scale(.94)}
.stage-deps-btn.has-deps{color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 10%,transparent)}
.stage-deps-btn .sdb-n{font-size:10px;font-weight:800;line-height:1;padding:2px 5px;border-radius:999px;background:color-mix(in srgb,var(--app-accent) 16%,transparent)}
.stage-deps-pop{position:fixed;z-index:3200;min-width:220px;max-width:290px;max-height:300px;overflow:auto;padding:8px;border-radius:14px;background:color-mix(in srgb,var(--card-bg) 92%,transparent);backdrop-filter:blur(24px) saturate(1.8);-webkit-backdrop-filter:blur(24px) saturate(1.8);box-shadow:var(--shadow-e4),inset 0 1px 0 rgba(255,255,255,.18);border:.5px solid color-mix(in srgb,var(--chrome-border) 80%,transparent)}
@media (prefers-reduced-transparency:reduce){.stage-deps-pop{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
.stage-deps-pop .sdp-title{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);padding:3px 8px 6px}
.stage-deps-pop .sdp-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--text-primary);cursor:pointer;transition:background var(--motion-fast)}
.stage-deps-pop .sdp-row:hover{background:color-mix(in srgb,var(--app-accent) 9%,transparent)}
.stage-deps-pop .sdp-row input{accent-color:var(--app-accent)}
.stage-deps-pop .sdp-empty{padding:6px 8px;font-size:12px;color:var(--text-muted)}
/* 📔 row 16 — timeline markers + mini-Gantt segments are doors (rounded contained hover, no lift) */
.stage-tl-door{cursor:pointer}
.stage-tl-seg.stage-tl-door{border-radius:999px}
.stage-tl-seg.stage-tl-door:hover{filter:brightness(1.15)}
.stage-tl-marker.stage-tl-door:hover .stage-tl-dot{transform:scale(1.35);box-shadow:0 0 0 4px color-mix(in srgb,var(--app-accent) 14%,transparent)}
.stage-tl-marker .stage-tl-dot{transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast);border-radius:50%}
#stageList .jc-foot .stage-status-select{height:28px;font-size:11.5px}
#stageList .jc-foot .stage-date{margin:0}
#stageList .jc-foot .stage-delete{margin-left:auto}
#stageList .jc-grip{background:none;border:0;color:var(--text-muted);cursor:grab;padding:2px;opacity:.5}
#stageList .jc-grip svg{width:14px;height:14px}
#stageList .jstage.stage-dragging{opacity:.5}
#stageList .jstage.stage-drop-above .jcard{box-shadow:inset 0 2px 0 var(--app-accent),var(--bevel-top),var(--shadow-e1)}

/* Timeline */
.timeline{display:flex;flex-direction:column;gap:6px}
/* Phase History timeline — redesigned 2026-07-04 (page-audit): each entry is a door to Stages,
   with duration + a cycle rollup + a phase-colored rail. Rounded hovers (DESIGN.md hard rule). */
.tl-rollup{display:flex;align-items:center;gap:10px;margin:2px 0 12px;flex-wrap:wrap}
.tl-roll-tile{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:6px 12px;background:var(--card-bg);border-radius:var(--radius-card);box-shadow:var(--shadow-e1)}
.tl-roll-v{font-size:20px;font-weight:700;line-height:1;color:var(--text-primary);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tl-roll-l{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
.tl-roll-since{font-size:12px;color:var(--text-muted);margin-left:auto}
.tl-rail{display:flex;gap:3px;height:6px;margin:0 0 14px;border-radius:var(--radius-pill,999px);overflow:hidden}
.tl-rail-seg{flex:1 1 0;min-width:6px;background:var(--seg);border-radius:var(--radius-pill,999px);opacity:.9;cursor:pointer;transition:transform var(--motion-fast,150ms) var(--ease-out),opacity var(--motion-fast,150ms)}
.tl-rail-seg:hover{opacity:1;transform:scaleY(1.6)}
.timeline-item{display:flex;align-items:center;gap:10px;font-size:13px;padding:7px 8px;border-radius:12px;cursor:pointer;transition:background var(--motion-fast,150ms) var(--ease-out),box-shadow var(--motion-fast,150ms) var(--ease-out);position:relative}
.timeline-item:hover,.timeline-item:focus-visible{background:var(--hover-bg,color-mix(in srgb,var(--app-accent) 8%,transparent));outline:none}
.timeline-item:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 55%,transparent)}
.timeline-dot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--on-timeline-dot);box-shadow:var(--shadow-e1)}
.tl-dot-ic{width:11px;height:11px;fill:currentColor}
.timeline-text{color:var(--text-primary);flex:1 1 auto;min-width:0}
.tl-row-main{display:flex;align-items:center;gap:7px}
.tl-phase{font-weight:600}
.timeline-current .tl-phase{font-weight:700}
.tl-live{font-size:9px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--color-success);background:var(--color-success-bg,color-mix(in srgb,var(--color-success) 14%,transparent));padding:1px 6px;border-radius:var(--radius-pill,999px)}
.tl-row-meta{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:1px}
.timeline-date{color:var(--text-muted);font-size:12px}
.tl-dur{color:var(--text-secondary,var(--text-muted));font-size:12px;font-variant-numeric:tabular-nums}
.tl-by{color:var(--text-muted);font-size:12px}
.tl-go{width:15px;height:15px;flex-shrink:0;color:var(--text-muted);opacity:0;transform:translateX(-3px);transition:opacity var(--motion-fast,150ms),transform var(--motion-fast,150ms);fill:currentColor}
.timeline-item:hover .tl-go,.timeline-item:focus-visible .tl-go{opacity:.7;transform:translateX(0)}
.tl-empty .em-ico .ic{width:26px;height:26px}
/* rail↔row interactivity + day-grouping (excellence pass 2026-07-04) */
.timeline-item.tl-peek{background:color-mix(in srgb,var(--app-accent) 10%,transparent)}
.timeline-item.tl-flash{animation:tlFlash .9s var(--ease-out)}
@keyframes tlFlash{0%,100%{background:transparent}25%,60%{background:color-mix(in srgb,var(--app-accent) 18%,transparent)}}
.tl-daygroup{border-radius:12px}
.tl-dg-head{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border:none;background:transparent;border-radius:12px;cursor:pointer;text-align:left;color:var(--text-primary);transition:background var(--motion-fast,150ms) var(--ease-out)}
.tl-dg-head:hover,.tl-dg-head:focus-visible{background:color-mix(in srgb,var(--app-accent) 8%,transparent);outline:none}
.tl-dg-swatches{display:inline-flex;flex-shrink:0}
.tl-dg-sw{width:9px;height:16px;border-radius:3px;margin-left:-3px;box-shadow:0 0 0 1.5px var(--card-bg,#fff)}
.tl-dg-sw:first-child{margin-left:0}
.tl-dg-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.tl-dg-net{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-dg-meta{font-size:12px;color:var(--text-muted)}
.tl-dg-chev{width:15px;height:15px;flex-shrink:0;color:var(--text-muted);fill:currentColor;transition:transform var(--motion-base,220ms) var(--ease-out)}
.tl-daygroup.tl-open .tl-dg-chev{transform:rotate(90deg)}
.tl-dg-body{display:none;padding:2px 0 4px 14px;margin-left:9px;border-left:2px solid color-mix(in srgb,var(--app-accent) 14%,transparent)}
.tl-daygroup.tl-open .tl-dg-body{display:block}
.tl-daygroup .timeline-item{font-size:12.5px}

/* Sidebar */
.sidebar-section{margin-top:14px}
.sidebar-btn{width:100%;text-align:left;padding:8px 11px;border-radius:var(--radius-md);border:0.5px solid var(--border);background:var(--surface);color:var(--text-primary);font-size:12.5px;font-weight:500;letter-spacing:-.05px;cursor:pointer;margin-bottom:5px;display:flex;align-items:center;gap:8px;transition:background var(--motion-fast),border-color var(--motion-fast);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif}
.sidebar-btn:hover{background:var(--surface-2);border-color:var(--border-strong)}
.sidebar-btn:active{transform:scale(.98)}
.sidebar-btn .sb-ico{width:14px;height:14px;flex-shrink:0;opacity:.7}
.sidebar-btn:hover .sb-ico{opacity:1}
.sidebar-btn:active{transform:scale(.98)}
.sidebar-btn.danger{color:var(--sidebar-danger-fg);background:var(--surface)}
.sidebar-btn.danger:hover{background:color-mix(in srgb,var(--app-danger) 8%,transparent);border-color:color-mix(in srgb,var(--app-danger) 30%,transparent);color:var(--app-danger)}
.sidebar-btn.danger .sb-ico{color:var(--sidebar-danger-fg)}
.save-bar{padding:14px 14px 0;display:flex;justify-content:flex-end;gap:8px}
.save-bar .btn{padding:10px 22px;font-size:13px}

/* Context menu */
/* V39ii — ctx-menu z-index promoted to --z-popover (was --z-header which made
   context menus appear BEHIND the header on scroll-locked views). */
/* V132 — context menu on the shared hero-glass language (denser frosted pane +
   strong specular rim) so all floating menus read identically. */
.ctx-menu{position:fixed;background:var(--lg-bg-strong);backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract);border-radius:var(--radius-menu);box-shadow:var(--lg-edge-strong),var(--shadow-e4);z-index:var(--z-popover);min-width:180px;padding:6px 0;border:0.5px solid color-mix(in srgb,var(--app-accent) 6%,var(--chrome-border))}
@media (prefers-reduced-transparency:reduce){.ctx-menu{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.ctx-menu{background:var(--card-bg)}}
@media (prefers-reduced-transparency:reduce){.ctx-menu{background:var(--card-bg);backdrop-filter:none;-webkit-backdrop-filter:none}}
/* P2.12 — owner "View as role" preview: role menu head + top banner. The control
   now lives inside the profile dropdown (#viewAsMenuRow), not a floating launcher. */
.va-menu-head{padding:7px 16px 5px;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--text-tertiary,var(--text-muted))}
#viewAsBanner,#viewAsOrgBanner,#viewAsUserBanner{position:fixed;top:0;left:0;right:0;z-index:var(--z-top,9999);display:flex;align-items:center;justify-content:center;gap:12px;min-height:40px;padding:0 calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));font-size:13px;color:#3a2a00;background:linear-gradient(180deg,#ffd60a,#ffc400);box-shadow:0 2px 12px color-mix(in srgb,#ff9f0a 40%,transparent);animation:vaSlideDown var(--motion-base) var(--ease-out)}
/* P0.1 — org-preview banner: a distinct cool tone so it reads apart from the amber role banner (esp. when both stack). */
#viewAsOrgBanner{color:#fff;background:linear-gradient(180deg,#0a84ff,#0060df);box-shadow:0 2px 12px color-mix(in srgb,#0a84ff 45%,transparent)}
/* View-as-user banner: a distinct cyan/teal tone — the THIRD impersonation color (amber role · blue org · cyan user). */
#viewAsUserBanner{color:#03363d;background:linear-gradient(180deg,#22d3ee,#06b6d4);box-shadow:0 2px 12px color-mix(in srgb,#06b6d4 45%,transparent)}
#viewAsBanner .va-dot,#viewAsOrgBanner .va-dot,#viewAsUserBanner .va-dot{width:8px;height:8px;border-radius:50%;background:#3a2a00;animation:vaPulse 1.6s ease-in-out infinite}
#viewAsOrgBanner .va-dot{background:#fff}
#viewAsUserBanner .va-dot{background:#03363d}
#viewAsBanner .va-dot,#viewAsOrgBanner .va-dot,#viewAsUserBanner .va-dot{flex:0 0 auto}
#viewAsBanner .va-text,#viewAsOrgBanner .va-text,#viewAsUserBanner .va-text{font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#viewAsBanner .va-text b,#viewAsOrgBanner .va-text b,#viewAsUserBanner .va-text b{font-weight:700}
#viewAsBanner .va-exit,#viewAsOrgBanner .va-exit,#viewAsUserBanner .va-exit{flex:0 0 auto;appearance:none;border:0.5px solid rgba(58,42,0,.35);background:rgba(58,42,0,.10);color:#3a2a00;font-size:12px;font-weight:700;padding:4px 12px;border-radius:var(--radius-pill);cursor:pointer;transition:background var(--motion-fast)}
#viewAsBanner .va-exit:hover{background:rgba(58,42,0,.20)}
#viewAsOrgBanner .va-exit{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.18);color:#fff}
#viewAsOrgBanner .va-exit:hover{background:rgba(255,255,255,.30)}
#viewAsUserBanner .va-exit{border-color:rgba(3,54,61,.35);background:rgba(3,54,61,.10);color:#03363d}
#viewAsUserBanner .va-exit:hover{background:rgba(3,54,61,.20)}
/* Follow/pause-live toggle in the view-as-user banner (shows only when the target is online). */
#viewAsUserBanner .va-follow{flex:0 0 auto;appearance:none;border:0.5px solid rgba(3,54,61,.35);background:rgba(3,54,61,.10);color:#03363d;font-size:12px;font-weight:700;padding:4px 12px;border-radius:var(--radius-pill);cursor:pointer;transition:background var(--motion-fast)}
#viewAsUserBanner .va-follow:hover{background:rgba(3,54,61,.20)}
/* P3 — live-sync indicator: a small "live / synced Ns ago" chip + a dot pulse on each fresh frame. */
#viewAsUserBanner .va-sync{flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.02em;padding:2px 8px;border-radius:var(--radius-pill);background:rgba(3,54,61,.14);color:#03363d}
#viewAsUserBanner .va-dot.va-dot-sync{animation:vaSyncPulse .6s var(--ease-out)}
@keyframes vaSyncPulse{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(3,54,61,.5)}60%{transform:scale(1.7);box-shadow:0 0 0 5px rgba(3,54,61,0)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(3,54,61,0)}}
@media (prefers-reduced-motion:reduce){#viewAsUserBanner .va-dot.va-dot-sync{animation:none}}
@media (max-width:640px){#viewAsUserBanner .va-sync{display:none}}
/* P3 — "user came online" actionable nudge (frosted Apple toast, primary action + dismiss). */
#mirrorOfferToast{position:fixed;top:calc(20px + env(safe-area-inset-top,0));left:50%;transform:translate(-50%,-20px);z-index:var(--z-top,9999);display:flex;align-items:center;gap:10px;padding:10px 12px 10px 16px;border-radius:var(--radius-lg);font-size:13.5px;color:var(--text-primary);background:var(--frost-bg-strong,var(--surface));backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);box-shadow:var(--shadow-e4),inset 0 1px 0 rgba(255,255,255,.18);border:0.5px solid var(--border);opacity:0;transition:opacity var(--motion-base) var(--ease-out),transform var(--motion-base) var(--ease-out)}
#mirrorOfferToast .mot-dot{width:8px;height:8px;border-radius:50%;background:var(--color-success,#34c759);flex:0 0 auto;animation:vaPulse 1.6s ease-in-out infinite}
#mirrorOfferToast .mot-text{min-width:0;white-space:nowrap}
#mirrorOfferToast .mot-go{flex:0 0 auto;appearance:none;border:0;background:var(--app-accent);color:var(--on-accent,#fff);font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:var(--radius-pill);cursor:pointer;transition:filter var(--motion-fast)}
#mirrorOfferToast .mot-go:hover{filter:brightness(1.06)}
#mirrorOfferToast .mot-x{flex:0 0 auto;appearance:none;border:0;background:transparent;color:var(--text-secondary);font-size:13px;cursor:pointer;padding:4px 6px;border-radius:var(--radius-md)}
#mirrorOfferToast .mot-x:hover{background:var(--surface-2)}
/* Read-only chip in the view-as-user banner — signals the owner can observe but not mutate. */
#viewAsUserBanner .va-ro{flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;padding:2px 8px;border-radius:var(--radius-pill);background:rgba(3,54,61,.14);color:#03363d}
/* C8 — the write-mode toggle in the view-as-user banner. */
#viewAsUserBanner .va-write{flex:0 0 auto;appearance:none;border:0.5px solid rgba(3,54,61,.35);background:rgba(3,54,61,.10);color:#03363d;font-size:12px;font-weight:700;padding:4px 12px;border-radius:var(--radius-pill);cursor:pointer;transition:background var(--motion-fast)}
#viewAsUserBanner .va-write:hover{background:rgba(3,54,61,.20)}
/* C8 — WRITE-ARMED danger state: the whole banner flips amber→red so the owner can never forget
   changes land under someone else's name. Distinct from the calm cyan read-only banner. */
#viewAsUserBanner.writing{color:#fff;background:linear-gradient(180deg,#f43f5e,#e11d48);box-shadow:0 2px 14px color-mix(in srgb,#e11d48 55%,transparent)}
#viewAsUserBanner.writing .va-dot{background:#fff}
#viewAsUserBanner.writing .va-write,#viewAsUserBanner.writing .va-exit{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.16);color:#fff}
#viewAsUserBanner.writing .va-write:hover,#viewAsUserBanner.writing .va-exit:hover{background:rgba(255,255,255,.28)}
#viewAsUserBanner .va-ro.va-writing{background:rgba(255,255,255,.22);color:#fff}
#viewAsBanner,#viewAsOrgBanner,#viewAsUserBanner{padding-top:env(safe-area-inset-top)}
body.view-as-active{padding-top:calc(40px + env(safe-area-inset-top))}
body.view-as-active.view-as-stacked{padding-top:calc(80px + env(safe-area-inset-top))}
@media (max-width:640px){
  #viewAsBanner,#viewAsOrgBanner,#viewAsUserBanner{gap:8px;font-size:12px;padding-left:calc(12px + env(safe-area-inset-left));padding-right:calc(12px + env(safe-area-inset-right));justify-content:space-between}
  #viewAsBanner .va-exit,#viewAsOrgBanner .va-exit,#viewAsUserBanner .va-exit{padding:5px 11px;min-height:30px}
  #viewAsUserBanner .va-ro{display:none}
}
@keyframes vaSlideDown{from{transform:translateY(-100%)}to{transform:translateY(0)}}
@keyframes vaPulse{0%,100%{opacity:1}50%{opacity:.35}}
/* V39bbbbb — ctx-item smooth transition */
.ctx-item{padding:8px 16px;font-size:14px;color:var(--text-primary);cursor:pointer;display:flex;align-items:center;gap:10px;transition:background var(--motion-fast);appearance:none;-webkit-appearance:none;border:0;background:none;width:100%;text-align:left;font-family:inherit;border-radius:8px}
.ctx-item:hover{background:var(--ctx-menu-hover)}
.ctx-item.danger{color:var(--status-blocked-fg)}
.ctx-item.danger:hover{background:var(--ctx-danger-hover)}
.ctx-sep{height:1px;background:var(--ctx-sep);margin:4px 0}

.hidden{display:none!important}

/* ── 2026-05-15 audit fix — iPad tablet tier (641-1180px) tap targets ──
   The mobile-tabbar gate is ≤640 because iPad keeps the desktop nav. But
   iPad is still a touch device, so the desktop's 22-28px contextual buttons
   are too small for touch. Bump card-phase / col-collapse / col-menu /
   btn-preset / cal-mode / gantt-nav / cd-tab / rpt-tab / files-sb-row /
   dash-pin / td-qn-iconbtn / admin-rename / btn-select-mode / tc-new-msg /
   tc-thread-close to a 32px touch floor at tablet sizes. */
@media (min-width: 641px) and (max-width: 1180px) {
  .card-phase-btn,
  .col-collapse-btn,
  .col-menu-btn,
  .btn-preset,
  .cal-mode-btn,
  .gantt-nav-btn,
  .gantt-today-btn,
  .cd-tab,
  .rpt-tab,
  .files-sb-row,
  .dash-pin-btn,
  .dash-density-btn,
  .dash-customize-btn,
  .dash-reset-btn,
  .admin-rename-btn,
  .btn-select-mode,
  .tc-new-msg-btn,
  .tc-thread-close,
  .btn-ghost.admin-role-preset-push,
  .cal-today-btn,
  .card-fbtn{
    min-width:32px;min-height:32px;
  }
  /* photo lightbox actions are larger touch overlays */
  .photo-lb-rename,
  .photo-lb-delete{min-width:36px;min-height:36px;padding:6px 12px}
  /* Top nav view buttons: 21px on desktop is mouse-friendly but cramped for
     touch. Bump to 30px on tablet (HIG floor 44px would cascade-grow the
     header chrome too aggressively; 30 is the readable-touch compromise). */
  .header .view-btn{min-height:30px;padding-top:4px;padding-bottom:4px}
}

/* ── 2026-05-15 audit fix — iPad landscape header overflow ──
   At 1025-1180px (iPad landscape range, between mobile and desktop), the
   header's view-toggle + search + new-project + user-pill row was wider than
   the viewport — user-pill ended up at right=1244 on 1180vw, causing body
   horizontal scroll. Tighten header padding + give view-toggle flex-shrink
   priority so it absorbs the overflow inside its own scroll container. */
@media (min-width: 1025px) and (max-width: 1280px) {
  .header{padding-left:8px;padding-right:8px;gap:6px}
  .header .view-toggle{flex-shrink:1;min-width:0;max-width:calc(100vw - 620px);overflow-x:auto}
  .header .header-search-wrap{width:100px;max-width:100px;min-width:100px}
  .user-pill{max-width:160px}
  .user-pill #userPillName{max-width:100px}
}

@media (max-width: 1024px) {
  :root{--header-h:56px}  /* mobile header is min-height:56px */
  /* iOS safe-area: viewport-fit=cover lets content extend under Dynamic Island
     (top), home indicator (bottom), and rounded corners. Header reserves the
     top inset; body reserves left/right for landscape orientation; the bottom
     mobile tab bar already handles its own bottom inset.
     Status-bar overlap fix (2026-05-16): apple-mobile-web-app-status-bar-style
     is "black-translucent" so iOS draws status bar OVER the page in installed-
     PWA mode. The header's padding-top therefore needs the FULL safe-area-inset-top
     PLUS the visual header padding. Previous max(10px, env()) collapsed the
     10px breathing room when env resolved larger than 10px — header content
     ended up flush against the status bar. Use calc(env() + 10px) so the
     visual padding always stacks ON TOP of the inset (10px on desktop where
     env is 0; inset+10px on notched iPhones). Sides keep max() since L/R
     rounded-corner clearance is sufficient at the 12px floor. */
  body{height:100%;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
  .header{
    height:auto;
    min-height:56px;
    flex-wrap:wrap;
    align-items:center;
    padding-top:calc(env(safe-area-inset-top, 0px) + 10px);
    padding-bottom:10px;
    padding-left:max(12px, env(safe-area-inset-left, 0px));
    padding-right:max(12px, env(safe-area-inset-right, 0px));
    gap:8px;
  }
  /* 2026-05-22 📘 Mobile header = a true iOS navigation bar (Apple creative-
     director standard). ONE row: brand leading-left, trailing actions
     right-aligned and vertically centered — no wrap, no left-gap. Search drops
     to its own full-width row beneath, then filters/phase pills. The trailing
     items are compact iOS bar-items: Export pill (text+chevron) + three 34px
     circles (+ / bell / avatar). The profile NAME is hidden on phones (iOS
     shows the avatar only; the name lives in the menu the avatar opens) so the
     four items fit cleanly beside the brand instead of overflowing. */
  /* Header is a single iOS nav row: brand (order 1, shrinks to fit) + the four
     trailing actions (order 2–5, fixed, hugging the right), then a flex break,
     then search on its own row. The brand NAME (a span) ellipsizes so the brand
     yields width to the actions instead of pushing them to wrap. */
  /* 2026-05-22 📘 Tightened the trailing bar-items to 30px (was 34) + smaller
     gaps + smaller Export pill — the row felt crowded. iOS bar-item ~30px. */
  .header{flex-wrap:wrap;row-gap:9px;column-gap:5px}
  .header-brand{font-size:15px;flex:1 1 0;min-width:0;order:1;overflow:hidden}
  .header-brand svg{height:28px;flex-shrink:0}
  .header-brand-logo{height:28px;max-width:140px;flex-shrink:0}
  .header-brand-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .export-menu-wrap{order:2;flex:0 0 auto!important;margin-left:2px}
  .new-project-btn{order:3;flex:0 0 auto!important}
  .notif-bell{order:4;flex:0 0 auto!important}
  .user-pill{order:5;flex:0 0 auto!important}
  /* Force search (order 6) onto its own row below the nav row. */
  .search-wrap{order:6;flex:1 1 100%!important;width:100%!important}
  /* Export → compact iOS bar pill (text + chevron), matching the pill family. */
  .export-menu-wrap .btn-quiet{
    display:inline-flex;align-items:center;gap:4px;
    height:30px;padding:0 11px;border-radius:var(--radius-pill);
    background:var(--header-pill-bg);border:0.5px solid var(--header-pill-border);
    color:var(--on-app-bg);font-size:12.5px;font-weight:600;white-space:nowrap;
  }
  /* Profile = avatar-only circle on phones (iOS trailing bar item). The name is
     redundant here — it's in the menu the avatar opens. */
  .user-pill{padding:0!important;width:30px!important;min-width:30px!important;height:30px!important;border-radius:50%!important;justify-content:center;gap:0}
  .user-pill #userPillName{display:none!important}
  .user-pill .user-avatar{width:30px;height:30px;min-width:30px;min-height:30px;font-size:12px}
  .export-menu-wrap .btn-quiet:active{transform:scale(.97)}
  /* Bell → circle matching the (+) button (30×30). */
  .notif-bell{min-width:30px!important;width:30px!important;height:30px!important;min-height:30px!important;padding:0!important;border-radius:50%!important;background:var(--header-pill-bg)!important;border:0.5px solid var(--header-pill-border)!important;align-self:center;justify-content:center}
  .notif-bell .nb-ico{width:15px;height:15px;opacity:.9}
  .search-wrap{order:6;flex:1 1 100%;max-width:none}
  .search-input{height:38px;font-size:15px;border-radius:var(--radius-sm)}
  .search-wrap::before{top:19px}
  .header-gap{display:none}
  /* V39vvvvv-mobile — same theme-aware scrollbar fix on mobile breakpoint */
  .view-toggle{height:40px;border-radius:var(--radius-sm);overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--header-pill-border) transparent;-webkit-overflow-scrolling:touch;touch-action:pan-x;flex-shrink:1;max-width:calc(100vw - 120px)}
  .view-toggle::-webkit-scrollbar{height:6px}
  .view-toggle::-webkit-scrollbar-track{background:transparent}
  .view-toggle::-webkit-scrollbar-thumb{background:var(--header-pill-border);border-radius:var(--radius-xs);transition:background var(--motion-base) var(--ease-out)}
  .view-toggle:hover::-webkit-scrollbar-thumb{background:var(--chrome-border-strong, var(--chrome-border))}
  .view-btn{font-size:0;min-width:42px;padding:0 10px;flex-shrink:0}
  .view-btn::first-letter{font-size:16px}
  .btn{min-height:38px;border-radius:var(--radius-sm);font-size:12px;padding:8px 11px}
  /* V55 — Filter bar fade-mask on mobile so partially-visible filters
     (e.g. "All PMs" cut off mid-word) hint they scroll. Matches V51 phase
     picker pattern. */
  .filter-bar{height:auto;min-height:48px;padding:8px 12px;gap:8px;scroll-padding:12px;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
    mask-image:linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);}
  .filter-bar::-webkit-scrollbar{display:none}
  .filter-select{height:30px;width:auto;min-width:0;max-width:none;flex:0 0 auto}
  .filter-pill{height:30px;border-radius:var(--radius-pill);font-size:13px;padding:0 28px 0 14px}
  #fSort{width:auto;min-width:0;max-width:none;flex:0 0 auto}
  .filter-count{min-width:max-content}
  /* V82.1 — board stays a HORIZONTAL kanban on tablet (641–1024px). The old
     flex-direction:column here stacked columns vertically + squished cards on
     iPad; the (min-width:641px)…(max-width:1024px) block already wants row but
     lost the cascade to this later rule. Phones (≤640) re-assert their own
     scroll-snap row track below. */
  .board-wrap{height:auto;flex:1;min-height:0;overflow-x:auto;overflow-y:hidden;padding:12px;gap:12px;flex-direction:row;align-items:flex-start;-webkit-overflow-scrolling:touch}
  .column{flex:0 0 280px;width:280px;max-width:280px;max-height:calc(100svh - 150px);border-radius:var(--radius-lg);background:var(--col-bg)}
  .col-header{padding:12px 12px 7px}
  .col-title{font-size:15px}
  .cards{max-height:none;overflow-y:auto;padding:5px 9px 9px}
  /* V29d (2026-05-17 cont. 14): + Add a project is a rare-use action — slim it down
     so it doesn't dominate the daily column view. Reduced from 42px → 30px and font 14px → 12.5px. */
  .col-add-btn{min-height:30px;font-size:12.5px;font-weight:500;margin:4px 8px 9px;padding:5px 10px;opacity:.75}
  .col-add-btn:hover{opacity:1}
  .add-column{width:100%;flex:0 0 46px}
  .card{border-radius:var(--radius-card)}
  .card-body{padding:10px 12px 12px}
  .card-name{font-size:15px}
  /* 2026-05-22 📘 Mobile card: the right-side controls (priority pill + buttons)
     made .card-top tall, leaving a big gap under the project # before the meta.
     Pin card-top contents to the top and snug the meta up against the # row. */
  .card-top{align-items:flex-start;margin-bottom:2px}
  .card-num{margin-top:1px}
  .card-meta{font-size:13px;gap:4px;margin-top:0}
  .card-footer{margin-top:9px}
  .list-wrap{height:auto;flex:1;min-height:0;padding:10px;overflow:auto;-webkit-overflow-scrolling:touch}
  .list-table,.list-table thead,.list-table tbody,.list-table tr,.list-table th,.list-table td{display:block}
  /* reset the desktop min-width:max-content — the ≤1024 card-stack is block-flow and must
     fit the viewport, not expand to the table's natural (wide) content width. */
  .list-table{background:transparent;border-radius:0;box-shadow:none;min-width:0}
  /* V133 — on phone the ROWS are the floating cards, so the table-wrap panel must go
     flat (no border/shadow/radius) to avoid a panel-inside-panel double frame. The
     desktop matte stage also reverts to natural page scroll above (line ~9128). */
  .list-wrap > .list-table-wrap,.list-table-wrap.lt-surface{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible;margin:0}
  .list-table thead{display:none}
  .list-table tbody{display:flex;flex-direction:column;gap:10px}
  .list-table tr{background:var(--surface-grad);border-radius:var(--radius-card);box-shadow:var(--bevel-top),var(--shadow-e2);overflow:hidden;padding:8px 10px}
  .list-table tr:hover td{background:transparent}
  .list-table td{border:0;max-width:none;white-space:normal;padding:3px 0;font-size:13px;display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
  .list-table td::before{content:attr(data-label);font-size:10px;font-weight:700;text-transform:uppercase;color:var(--icon-dim-strong);letter-spacing:.4px;min-width:76px}
  .list-table .td-name{font-size:16px;padding-bottom:6px}
  .list-table .td-name::before{display:none}
  .project-board-wrap{height:auto;flex:1;min-height:0}
  .pb-header{flex-wrap:wrap;gap:8px;padding:10px 12px}
  .pb-back{min-height:36px;border-radius:var(--radius-btn)}
  .pb-add-phase{min-height:36px;border-radius:var(--radius-btn);margin-left:0}
  .pb-template-tools{order:5;flex:1 1 100%;margin-left:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .pb-template-select{grid-column:1/-1;min-width:0;width:100%;height:36px;border-radius:var(--radius-input)}
  .pb-template-btn{height:36px;border-radius:var(--radius-btn-sm)}
  .pb-title{flex:1 1 100%;font-size:16px;order:3}
  .pb-meta{order:4;flex:1 1 100%}
  #projectBoard{height:auto!important;flex:1;min-height:0}
  .pm-overlay{align-items:flex-end;padding:0}
  .pm-modal{width:100%;max-width:100%;border-radius:var(--radius-modal) var(--radius-modal) 0 0;padding:20px 16px calc(20px + env(safe-area-inset-bottom))}
  .pm-row{flex-direction:column}
  .modal-overlay{align-items:flex-end;justify-content:center;padding:0;overflow:hidden}
  .modal{width:100%;max-width:100%;height:94svh;max-height:94svh;border-radius:var(--radius-modal) var(--radius-modal) 0 0;padding-bottom:0;display:flex;flex-direction:column;overflow:hidden}
  .modal-label-bar{border-radius:var(--radius-modal) var(--radius-modal) 0 0}
  /* V13: modal opens FULL-SCREEN on phones (height:94svh). The title-bar
     sits at top of screen which on iPhone with dynamic-island = ~59pt safe
     area top inset. Padding must include env(safe-area-inset-top) or the
     dynamic-island camera overlay covers the title + close button.
     Same fix needed on .modal-close + .modal-fullpage-btn so they stay
     reachable below the camera. */
  /* V58 — Apple HIG sheet header on mobile:
     - Center the title, drop the leading icon (icon belongs on phase badge).
     - Hide Full Page button entirely (modals are full-screen on mobile already).
     - Bump close button to 44pt tap target.
     - Hide secondary meta chips (risk/permit/inspect/billing/report); show
       only id + type + phase as a one-line subtitle pattern.
     - V72 — Symmetric padding (54px each side) — close X is at right:10
       + 44px wide → 54px total. Match on left so the title centers visually. */
  /* iPad (641–1024px): keep the icon + left-aligned title — a tablet is not a
     phone, so the bare centered treatment is reserved for ≤640px below. */
  .modal-title-wrap{padding:calc(15px + env(safe-area-inset-top)) 120px 6px 16px;justify-content:flex-start;text-align:left}
  .modal-title{font-size:19px;line-height:1.25;text-align:left;padding:2px 5px}
  .modal-close{top:calc(10px + env(safe-area-inset-top));right:10px;min-width:44px;min-height:44px;background:transparent}
  .modal-close:active{background:var(--hover-overlay-strong)}
  .modal-fullpage-btn{display:none !important}
  /* Meta-row: keep id, type, phase visible on mobile. Hide risk/priority/permit/
     inspect/billing/report/archived — they live on the Details tab body. */
  .modal-meta-row .priority-badge,
  .modal-meta-row .risk-badge,
  .modal-meta-row .status-chip,
  .modal-meta-row .mm-archived { display:none !important }
  .modal-report-link { display:none !important }
  /* Strip the redundant project_type icon — the chip text alone is enough */
  .modal-meta-row .modal-meta-badge svg.mm-ico { display:none }
  /* Tab adjustments — base CSS already provides horizontal-scroll pill bar.
     V16: pad bottom for breathing room; LET V15 override font/padding via !important
     (don't redeclare smaller padding here).
     V150: the .modal-tabs-shell wrapper owns the glass chrome + outer margin on
     iPad (641–1024). On phones (≤640) the shell is neutralized further down so
     the wrap keeps its self-contained segmented look. */
  .modal-tabs-shell{margin:10px 14px 5px}
  .modal-tabs-wrap{padding:4px}
  /* V16+V17+V18: chip row above tabs (RR-004 / Commercial / Bidding / High /
     Report) was wrapping to 2 lines OR cramming chips behind close X. Make
     it scroll horizontally + RESERVE right-padding so chips never run under
     the close X button (which is fixed at top-right of the modal,
     36×36 + 10px inset). V18: bump chip padding + gap so chips breathe. */
  .modal-meta-row{
    padding:8px 14px 6px !important;
    gap:6px !important;
    flex-wrap:nowrap !important;
    /* center the pills under the title; safe-center avoids clipping the first
       pill when they overflow (then it scrolls). Auto-recenters as pills change. */
    justify-content:safe center !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .modal-meta-row::-webkit-scrollbar{display:none}
  .modal-meta-row > *{flex-shrink:0}
  /* Chips themselves: a touch bigger so text reads cleanly on phone +
     consistent height regardless of phase/priority/risk class. */
  .modal-meta-badge, .priority-badge, .risk-badge, .status-chip {
    font-size: 11.5px !important;
    padding: 4px 10px !important;
    min-height: 22px !important;
    line-height: 1.3 !important;
  }
  /* Title-wrap above this row already reserves padding-right:148px for
     close + Full Page buttons. Chip row was getting clipped because it
     uses overflow-x:auto — fade-out gradient on the right edge gives a
     visual "scroll for more" hint without crowding the close X visually. */
  .modal-title-wrap{position:relative}
  .modal-meta-row{position:relative}
  /* 2026-05-17 📘 V25 — modal-meta-row right-edge fade gradient removed.
     Same iOS Safari layer-promotion bug class as V24/V25 modal-tabs-wrap
     fade: the meta-row uses `-webkit-overflow-scrolling:touch` which
     implicitly promotes the scroll container to a GPU layer on iOS Safari.
     The sticky `::after` pseudo gets painted into the wrong layer (a child
     badge's layer) and ends up rendering INSIDE a badge body (the Report
     chip showed a visible vertical white fade band cutting through it).
     Affordance preserved by partial visibility of the clipped trailing
     chip — users still see "more content to scroll" via the chip itself. */
  /* Modal body: flex:1 fills remaining space inside the modal column — prevents height jumping between tabs */
  /* V61 — modal-body must NEVER scroll horizontally on mobile (caused by
     descendant horizontal-scroll strips bleeding out via negative margin). */
  .modal-body{padding:4px 14px 14px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-y;min-height:0;flex:1}
  /* 2026-05-17 📘 V23 — flex chain break through .modal-body-host wrapper.
     The host was added so .modal-body can be relocated to PFV (full-page).
     But the host has default `display:block` with no flex sizing, which
     collapses .modal-body to its content height instead of filling the
     remaining modal height. Result: save-bar floats mid-modal with empty
     space below it on short-content tabs (Stages, etc). Fix: make the
     host a transparent flex pass-through so its child .modal-body can
     still flex:1 against the modal column. */
  .modal-body-host{display:flex;flex-direction:column;flex:1;min-height:0;width:100%}
  .modal-cols{display:flex;flex-direction:column;gap:0;width:100%}
  .modal-cols > div:first-child{width:100%;min-width:0}
  .tab-content{width:100%;min-width:0}
  .field-grid{grid-template-columns:1fr;gap:11px}
  .detail-group{padding:11px;border-radius:var(--radius-group)}
  .field-label{font-size:12px;margin-bottom:5px}
  .field-input,.note-input{min-height:42px;font-size:16px;border-radius:var(--radius-input)}
  /* V72 — bump min-height + ensure resize is enabled for tap-to-grow. */
  textarea.field-input{min-height:96px;resize:vertical}
  textarea.field-input.auto-resize{resize:none;overflow:hidden}
  /* V29h (2026-05-17 cont. 14): on phones, redesign the phase picker as a
     horizontal scrollable strip (matches the .mobile-board-picker pattern at
     the top of the Board view). User no longer has to scroll vertically
     through a long list of phases inside the project modal. */
  /* V62 — Hide the Phase modal-section entirely on mobile. Current phase
     already shown in the title meta-row pill; phase changes happen on
     Board/List view. */
  .modal-phase-section{display:none !important}
  /* U4 — mobile action grid: even 2x2 with consistent side gutters matching the
     modal content (the .modal-body 14px gutter), comfortable gap + clear bottom
     breathing room, tap-sized tiles. The section is full-bleed inside the
     relocated sidebar, so we re-assert the gutter + spacing here. */
  .project-actions{margin-top:18px;padding-bottom:4px}
  .project-actions .modal-section-title{margin-bottom:10px}
  .project-actions .action-grid{grid-template-columns:1fr 1fr;gap:12px;margin-top:0}
  .project-actions .action-tile{min-height:56px;padding:12px 14px;border-radius:var(--radius-lg)}
  /* V61 — Phase-button strip was bleeding out via negative margin AND
     letting iOS Safari treat horizontal swipes on it as page-level scroll,
     dragging the entire modal body off-screen. Constrain with overscroll-
     behavior:contain to keep the swipe local to the strip, drop the
     negative margin (it was causing the visible right-edge overflow seen
     in sim), and use mask-image fade for the scroll hint. */
  .phase-buttons{
    display:flex;flex-direction:row;gap:6px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    padding:4px 0 8px;
    scrollbar-width:none;
    max-width:100%;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
    mask-image:linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  }
  .phase-buttons::-webkit-scrollbar{display:none}
  .phase-btn{
    min-height:38px;height:38px;
    width:auto;flex-shrink:0;
    padding:6px 14px;
    border-radius:var(--radius-pill);
    font-size:13px;font-weight:600;
    background:var(--surface-2);
    border:0.5px solid color-mix(in srgb, var(--text-primary) 14%, transparent);
    scroll-snap-align:start;
  }
  .phase-btn .phase-label{
    overflow:visible;text-overflow:clip;white-space:nowrap;
  }
  .phase-btn.active{
    box-shadow:0 1px 4px rgba(0,0,0,.18);
    border-color:transparent;
  }
  [data-theme="midnight"] .phase-btn,
  [data-theme="sepia"] .phase-btn,
  [data-theme="contrast"] .phase-btn{background:var(--surface-2)}
  .color-swatch{width:34px;height:26px;border-radius:var(--radius-sm)}
  .task-item,.stage-item,.note-item{border-radius:var(--radius-tag)}
  /* V75 — Apple Reminders-style mobile task row:
       Row 1: [done checkbox] [title spanning full width]
       Row 2: [meta pills under title] (optional, only shown if meta exists)
       Row 3: [status select | edit | delete] — minimal controls
       Subtask area + comments collapsed by default; tap the row to expand
       via existing toggleSubtasks/comment thread behavior.

     Hidden on mobile: select-checkbox (.task-sel-cb), Claim Done button,
     lock/blocker icon button, +sub-task button. All accessible via the
     edit modal opened by .task-edit-btn. Apple HIG: surface only the
     primary action; hide secondary actions behind 'Edit'. */
  .task-item{grid-template-columns:auto minmax(0,1fr);align-items:flex-start;padding:12px 14px;gap:12px;column-gap:12px;row-gap:0}
  .task-sel-cb{display:none}
  .task-cb{width:26px;height:26px;margin-top:1px;flex-shrink:0}
  .task-cb::before{width:13px;height:13px}
  .task-main{grid-column:2/-1;min-width:0;display:flex;flex-direction:column;gap:6px}
  .task-text-el{font-size:15px;line-height:1.35;letter-spacing:-.15px;font-weight:500;color:var(--text-primary);word-break:break-word}
  .task-text-el.done{color:var(--text-muted);text-decoration:line-through}
  .task-meta{display:flex;flex-wrap:wrap;gap:4px}
  .task-controls{grid-column:1/-1;width:100%;align-items:center;display:flex;gap:8px;margin-top:10px;padding-top:10px;border-top:0.5px solid color-mix(in srgb, var(--text-primary) 6%, transparent)}
  /* V77.1 — Was flex:1 1 auto which stretched the status pill across the
     entire row width on mobile. Apple: status reads as a TIGHT inline pill
     sized to its content, with action buttons immediately right. */
  .task-status-select{min-height:32px;width:auto;flex:0 0 auto;border-radius:var(--radius-pill);font-size:13px;padding:0 26px 0 12px;font-weight:500}
  /* V136 — mobile: status pill + a single ⋯ (opens the actions bottom sheet). Claim Done hidden
     (tap the checkbox to complete); all secondary actions live in the sheet. */
  .task-controls .task-claim{display:none}
  .task-controls .task-more-btn{
    margin-left:auto;flex:0 0 auto;width:36px;height:36px;opacity:1;
    border:0.5px solid color-mix(in srgb, var(--text-primary) 12%, transparent);
  }
  .stage-delete,.note-actions{opacity:1}
  .task-subtask-area,.task-item > .comment-thread{grid-column:1/-1;width:100%;min-width:0;margin-top:8px}
  .task-add-row,.note-input-row{flex-direction:column;align-items:stretch}
  .task-add-row .btn,.note-input-row .btn{width:100%}
  .task-toolbar,.note-toolbar{grid-template-columns:1fr;gap:8px}
  .task-add-grid,.task-add-reminders{grid-template-columns:1fr;gap:9px}
  .task-add-grid .btn{width:100%}
  .tracked-item{grid-template-columns:1fr;gap:8px;padding:10px}
  .tracked-status-select{width:100%;min-height:34px;border-radius:var(--radius-xl)}
  .tracked-delete{opacity:1;justify-self:end}
  .tracked-add-grid{grid-template-columns:1fr;gap:9px}
  .tracked-add-actions{display:block}
  .tracked-add-actions .btn{width:100%}
  .itb-add-grid{grid-template-columns:1fr;gap:9px}
  .itb-add-actions{display:block}
  .itb-add-actions .btn{width:100%}
  .stage-item{display:grid;grid-template-columns:1fr auto;gap:8px}
  .stage-name{grid-column:1/-1}
  .stage-status-select{min-height:36px;font-size:12px;border-radius:var(--radius-xl)}
  .sidebar-section{margin-bottom:10px}
  .sidebar-btn{min-height:42px;border-radius:var(--radius-btn-sm)}
  /* V29e (2026-05-17 cont. 14): modal already adds padding-bottom:env(safe-area-inset-bottom)
     so the save-bar should NOT double it — was producing ~70px of empty space below the buttons
     on iPhones with home indicator. */
  /* V72 — Slimmer save-bar: 6px top + 8px (or safe-area) bottom + 36px buttons
     = ~50px total instead of ~80px. Matches Apple Mail/Settings sheet action
     row sizing. */
  .save-bar{position:sticky;bottom:0;background:var(--card-bg);border-top:0.5px solid var(--chrome-border);padding:6px 14px max(8px, env(safe-area-inset-bottom, 8px));gap:8px;flex-shrink:0;align-items:center}
  .save-bar .btn{min-height:36px;font-size:13.5px;padding:0 14px}
  .save-bar .btn-cancel{flex:0 0 auto;background:transparent !important;color:var(--text-secondary) !important;font-weight:500;padding:0 10px}
  .save-bar .btn-cancel:active{background:var(--hover-overlay) !important}
  .save-bar .btn-green{flex:1 1 auto;font-weight:600;border-radius:var(--radius-md)}
  .ctx-menu{max-width:calc(100vw - 24px)}
}

/* Task 1.3 — Project/generic modal becomes a true full-screen sheet on phones.
   Placed AFTER the ≤1024px modal block so it wins the cascade for ≤640px
   (equal specificity → later source order decides). Tablets keep 94svh. */
@media (max-width: 640px) {
  .modal-overlay{padding:0;align-items:stretch;justify-content:stretch}
  .modal{
    width:100%;max-width:100%;border-radius:0;
    min-height:100svh;height:100svh;max-height:100svh;
    padding-bottom:env(safe-area-inset-bottom,0);
    display:flex;flex-direction:column;
  }
  .modal-label-bar{border-radius:0}
  .modal-close{
    top:max(10px,env(safe-area-inset-top,0));right:10px;
    width:var(--tap-min);height:var(--tap-min);
    min-width:var(--tap-min);min-height:var(--tap-min);
  }
  /* Phones (≤640px): the compact centered header — hide the icon tile, center
     the title, full-width padding. (iPad 641–1024 keeps the icon + left-align.) */
  .modal-title-wrap{padding:calc(14px + env(safe-area-inset-top)) 54px 4px 54px;justify-content:center;text-align:center}
  .modal-title{font-size:18px;line-height:1.3;text-align:center;padding:2px 0}
  .modal-title-icon{display:none !important}
  /* V150 — on phones the .modal-tabs-shell is a transparent passthrough: the
     iOS segmented-control look + scroll-snap lives on the inner .modal-tabs-wrap
     exactly as before. Neutralize the desktop glass chrome + the edge-fade /
     scroll-indicator overlays (the latter reintroduce the same iOS Safari
     layer-promotion paint bug V25 killed — see the long note below). */
  .modal-tabs-shell{margin:8px var(--mobile-gutter) 4px;background:transparent !important;border:none !important;box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
  .modal-tabs-shell::before,.modal-tabs-shell::after{display:none !important}
  .tab-scroll-track{display:none !important}
  /* Tab strip: iOS-style scroll-snap + comfortable tap targets.
     scroll-snap-type on both the wrap and the inner row — either can be the
     effective horizontal scroller depending on overflow. */
  .modal-tabs-wrap{scroll-snap-type:x proximity;margin:0;position:relative}
  .modal-tabs{scroll-snap-type:x proximity}
  /* V14-V20: iOS UISegmentedControl. Final form matches Apple Settings
     segmented controls: surface-2 container with 2pt padding, gap:4 between
     tabs (gives clean visible separation between inactive tabs without the
     "smushed" feel), active tab is white card with subtle lift.
     V20: added gap:4 (was 0 with 1px margin = effectively 2px gap; too tight).
     Also added hairline VERTICAL SEPARATORS between inactive adjacent tabs
     (Apple's classic UISegmentedControl divider) via ::before pseudo-elements
     on non-first non-active tabs. Active tab + tab adjacent to active drop
     their separator (only show between two non-active adjacent tabs). */
  .modal-tabs-wrap{
    background:var(--surface-2) !important;
    padding:3px !important;
    border-radius:var(--radius-md) !important;
    /* V21: ROOT CAUSE of "smushed tabs" was here — the modal is
       display:flex column with modal-body as flex:1 sibling. The tab
       strip got squeezed to its min-content (6px = padding only) because
       overflow:hidden made min-height collapse. flex-shrink:0 keeps the
       strip at its natural ~40px height regardless of body content size. */
    flex-shrink:0 !important;
    min-height:42px !important;
    align-items:center !important;
  }
  .modal-tabs{gap:4px !important}
  .modal-tab{
    scroll-snap-align:start;
    min-height:34px !important;
    padding:6px 14px !important;
    font-size:13.5px !important;
    font-weight:500 !important;
    border-radius:var(--radius-sm) !important;
    letter-spacing:-0.2px !important;
    margin:0 !important;
    position:relative !important;
  }
  .modal-tab.active{
    background:var(--card-bg) !important;
    color:var(--text-primary) !important;
    font-weight:600 !important;
    box-shadow:0 1px 2px rgba(0,0,0,.08), 0 0 0 0.5px rgba(0,0,0,.04) !important;
  }
  /* 2026-05-17 📘 V25 — overflow-row tab styling unification.
     `.tab-overflow-row .modal-tab` (line 1631) gave the overflow tabs (Stages,
     Tracked, Daily Logs, etc) `background:var(--surface)` + `color:var(--text-primary)`
     — full opacity card-look. The inner-row tabs (Details, Tasks, Notes, Contacts,
     ITBs) used the V18 segmented-control transparent-inactive look. When BOTH
     rows render in the same horizontal scrolling strip on phones (as they do),
     the visual inconsistency is jarring — Contacts/ITBs appear faded while
     Tracked/Daily Logs appear solid. Force the overflow-row tabs to match the
     V18 segmented-control inactive style: transparent bg + muted text.
     The active state for both is unified at .modal-tab.active above. */
  .tab-overflow-row .modal-tab{
    background:transparent !important;
    color:var(--text-muted) !important;
    box-shadow:none !important;
  }
  .tab-overflow-row .modal-tab.active{
    background:var(--card-bg) !important;
    color:var(--text-primary) !important;
    box-shadow:0 1px 2px rgba(0,0,0,.08), 0 0 0 0.5px rgba(0,0,0,.04) !important;
  }
  /* 2026-05-17 📘 V25 — kill the modal-tabs-wrap right-edge fade gradient.
     Same iOS Safari layer-promotion bug as V24's mobile-board-picker::after:
     `position:absolute` on the `::after` gets resolved against the nearest
     layer-promoted descendant's compositor layer (here, `.modal-tab` is in
     the translateZ group at line 2950 — same as `.mbp-chip`), not against
     the declared `.modal-tabs-wrap` parent. The fade ended up painting
     INSIDE the active tab body (the "Stages" tab bright-band Gavin saw)
     instead of at the tabs-wrap's right edge.
     V24 fixed the picker by switching to `position:fixed` (picker spans full
     viewport width). The modal-tabs-wrap can't use position:fixed because
     the modal has a horizontal gutter — the tabs-wrap right edge != viewport
     right edge. Cleanest fix: remove the fade entirely. The scroll affordance
     is preserved by:
       (a) the partial visibility of the next clipped tab (e.g., "Daily Logs"
           on the right edge), which is itself a scroll hint;
       (b) V23's switchTab `inline:'center'` scrollIntoView keeping the active
           tab centered, never under the right edge.
     */
}

/* ── Mobile Board (Task 2.1) ──
   At ≤640px: board becomes a horizontal scroll-snap track (one phase column per
   screen). Phase picker chip strip above the board scrolls the track. */
.mobile-board-picker{display:none}
@media (max-width: 640px) {
  /* Override the ≤1024px column-stack rule — at phone widths we want a
     horizontal scroll-snap track with one column per viewport. */
  .board-wrap{
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:stretch;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    padding:var(--space-2) 0;
    gap:0;
    scroll-padding-left:0;
  }
  .board-wrap > .column{
    flex:0 0 100vw;
    width:100vw;
    max-width:100vw;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    /* tiny inner padding so cards don't kiss the viewport edge */
    padding:0 var(--mobile-gutter);
    box-sizing:border-box;
    /* override the desktop column box — drop the card chrome on the outer
       column (each column is the whole screen) and let the cards keep theirs */
    background:transparent;
    box-shadow:none;
    border-radius:0;
  }
  /* The trailing dashed "+ Add Column" affordance is replaced by the
     picker's trailing chip on mobile — hide the in-track add-column. */
  .board-wrap > .add-column{display:none}
  /* Card action buttons (expand + phase-menu): meet the 44px tap target */
  .card .card-phase-btn{
    min-width:var(--tap-min);
    min-height:var(--tap-min);
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  /* Mobile picker — visible only at ≤640px, hidden via display:none above
     for desktop. Horizontal scroll-snap strip of phase chips. */
  .mobile-board-picker{
    display:flex;
    gap:8px;
    padding:8px var(--mobile-gutter);
    /* keep the scroll origin at the gutter so the first chip aligns with the
       filter pills above (was scrolling 16px left, flushing chip to edge). */
    scroll-padding-left:var(--mobile-gutter);
    overflow-x:auto;
    overflow-y:hidden;
    /* 2026-05-17 📘 V9: proximity snap left chips mid-scroll on iOS,
       creating a visible vertical seam through the active chip when the
       background transition animated mid-scroll. Mandatory snap + smooth
       scroll behavior pins chips to exact positions and lets the OS use
       a clean compositor animation instead of the per-pixel paint tear. */
    scroll-snap-type:x proximity;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    background:transparent;
    flex-shrink:0;
    scrollbar-width:none;
    /* 2026-05-20 📘 — removed the edge-fade mask (was a washed-out glare on
       the chip-bar sides and made the first chip look misaligned with the
       filter pills above). Clean edges; chips visibly continue off-screen as
       the scroll affordance. */
  }
  .mobile-board-picker.hidden{display:none}
  .mobile-board-picker::-webkit-scrollbar{display:none}
  .mbp-chip{
    flex:0 0 auto;
    scroll-snap-align:start;
    min-height:var(--tap-min);
    padding:8px 14px;
    border-radius:var(--radius-pill);
    border:0.5px solid var(--chrome-border);
    /* Apple grouped-control tonal fill + soft depth on inactive phase pills
       (was flat --card-bg white → looked like plain tabs). */
    background:var(--chrome-bg);
    box-shadow:0 1px 2px rgba(0,0,0,.04);
    color:var(--text-primary);
    font-size:13px;
    font-weight:500;
    letter-spacing:-.1px;
    white-space:nowrap;
    cursor:pointer;
    font-family:inherit;
    display:inline-flex;
    align-items:center;
    gap:6px;
    /* 2026-05-17 📘 V9: only transition color (text) on iOS — background
       transition during scroll-snap caused paint-tear (visible mid-chip
       seam) on iPhone reports. Background flips instantly; the strip's
       motion provides the affordance. */
    transition:color var(--motion-fast);
    /* Promote to its own layer so iOS Safari composites the chip atomically
       and avoids partial-paint artifacts during scroll-snap animation. */
    transform:translateZ(0);
    -webkit-backface-visibility:hidden;
  }
  .mbp-chip:hover{background:var(--chrome-bg-hover)}
  .mbp-chip.active{
    background:var(--chip-accent, var(--app-accent));
    color:#fff;
    border-color:var(--chip-accent, var(--app-accent));
    /* V9: drop the rgba(0,122,255) hardcoded shadow — color-mix matches the
       chip color regardless of theme + avoids the blue cast on non-blue themes.
       V84: track the per-phase --chip-accent so the active fill = the phase color. */
    box-shadow:0 1px 2px color-mix(in srgb, var(--chip-accent, var(--app-accent)) 30%, transparent);
    font-weight:600;
  }
  /* 2026-05-17 📘 V22 — Active phase chip icon-color cascade fix.
     The chip's icon span hard-codes the phase color inline (e.g. orange for
     Bidding) which beat the active state's white text color, leaving an
     orange target reticle on a blue chip. Inherit forces the icon to take
     the chip's active color (var(--on-accent)). */
  .mbp-chip.active > span { color: inherit !important; }
  /* (The active chip's background normally flips INSTANTLY — the transition above
     is color-only — to avoid an iOS paint-tear during scroll-snap. On a pill TAP
     that read as "flashy", so _mbpTapScrollTo sets a smooth fill transition INLINE
     on the tapped chip for the tween, then reverts it. Free swipes keep the instant
     flip. Done inline rather than via a body class to avoid a whole-board flash.) */
  .mbp-chip.mbp-add{
    color:var(--on-chrome-muted);
    border-style:dashed;
    font-weight:600;
  }
  .mbp-chip.mbp-add:hover{color:var(--on-app-bg)}
}

/* ── Mobile List view (Task 2.2) ──
   At ≤640px: rows become tappable single-column card-rows. The desktop
   <table>'s ≤1024px stacked-card CSS is the foundation (lines 1832-1841);
   this block overlays Phase 0 tokens (--tap-min, --mobile-gutter, --space-2)
   and adds scroll-snap + an edge-fade mask to the filter bar.

   Placement: AFTER the ≤1024px block — same specificity, source order wins.
   Tablets (641-1024px) keep the original looser card spacing. */
@media (max-width: 640px) {
  /* Page padding aligned with the rest of the phone overhaul */
  .list-wrap{
    padding:var(--space-2) var(--mobile-gutter) var(--space-4);
  }
  /* Comfortable spacing between card-rows — Phase 0 token replaces the
     bespoke 10px from the ≤1024px block. */
  .list-table tbody{gap:var(--space-2)}
  /* Each row is a card AND the tap target — meet the iOS 44px minimum and
     center vertically so single-line cards don't feel cramped. */
  .list-table tr{
    min-height:var(--tap-min);
    padding:var(--space-2) var(--space-3);
    display:flex;flex-direction:column;justify-content:center;
  }
  /* Project name reads as the card heading — bigger, full-width, no label.
     This is the data-mobile-primary equivalent for the bespoke list-table. */
  .list-table .td-name{
    font-size:16px;font-weight:600;letter-spacing:-.1px;
    color:var(--text-primary);
    padding-bottom:var(--space-1);
    display:block;
  }
  /* Number column reads as a small caption above the heading */
  .list-table .td-num{
    font-size:11px;padding-bottom:2px;display:block;
  }
  .list-table .td-num::before{display:none}
  /* Filter bar: iOS-style scroll-snap chips + soft edge-fade mask.
     The bar already has overflow-x:auto from the base styles; we just
     add snap and the fade so the scroll feels native. */
  .filter-bar{
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scroll-padding-left:var(--mobile-gutter);
    padding:var(--space-1) var(--mobile-gutter);
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);
  }
  /* Every focusable child of the filter bar — selects, presets, buttons,
     separators are excluded — becomes a snap target with a 44px tap min. */
  .filter-bar > .filter-pill,
  .filter-bar > .btn-clear,
  .filter-bar > .btn-preset,
  .filter-bar > .btn-select-mode{
    scroll-snap-align:start;
    /* match the filter pills' 30px height (was 44px tap-min → buttons were
       taller than the dropdown pills on the same row). */
    height:30px;
    min-height:30px;
    flex-shrink:0;
  }
}

@media (max-width: 480px) {
  /* 2026-05-22 📘 Apple nav bar on phones: the full company name + 4 trailing
     actions don't fit on one 390pt row, and wrapping them looks broken. Show
     the logo MARK only (no text) in the bar — the name is redundant on a known
     app (iOS convention) — so the logo + Export + (+) + bell + avatar sit on a
     single clean row. Brand hugs the left, actions hug the right. */
  .header-brand{min-width:0;flex:0 0 auto}
  .header-brand-name{display:none}
  .header-brand svg{height:30px}
  .header-brand-logo{height:30px}
  /* Export starts the trailing group + pushes it to the right edge. */
  .export-menu-wrap{margin-left:auto!important}
  /* keep new-project a fixed circle (don't let the ≤480 btn-green grow rule
     stretch it across the row) */
  .new-project-btn{flex:0 0 auto!important}
  .filter-select,#fSort{width:auto;min-width:0;max-width:none;flex:0 0 auto}
  .modal-title-icon{display:none}
  .modal-title-wrap{padding-left:14px}
}

/* ── Mobile polish (2026-05-16 cont. 2 — audit follow-ups) ──
   Per-finding fixes from the iPhone Pro Max mobile audit:
   • Bell tap target undersized (was 30x30)
   • Reports section-title + subtitle collide on narrow widths
   • Dashboard widget grids never collapse below 3-col
   • List-view right values overflow card padding
   • FAB (.ai-launcher) sits over modal footer Save/Cancel
   • Lookahead range toggles wrap mid-label
   • Calendar month label needs nowrap on narrow widths
   All theme-safe; no hardcoded colors. */
@media (max-width: 640px) {
  /* V77.1 — Bell 36x36 to match + button + user pill. Apple iOS bar-item
     standard height. Was 38x38 (V39-era), looked slightly off next to the
     new 36x36 + button. */
  .notif-bell{min-width:36px;min-height:36px;padding:9px}
  /* #4 — Reports section-title was flex:row + space-between; on 430px width
     the rpt-sub muted text mashes into the title. Stack vertically below
     640px and align the export button to the right with row-reverse + wrap. */
  .rpt-section-title{flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:2px}
  .rpt-section-title .rpt-sub{flex:1 1 100%;margin-left:0}
  /* #5 — Dashboard widget grids: drop to 2-col counts, 1-col phase rows on
     narrow phones. Defaults at lines ~2671 / ~2706 come AFTER this block in
     source order so they win without !important; lock the override. */
  .dash-counts{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .dash-phase{grid-template-columns:1fr !important;gap:6px;padding:8px 12px}
  .dash-phase-bar{height:6px}
  /* V77.2 — KPI strip orphan-balance. Was targeting .dash-kpi-tile but the
     actual class is .dash-kpi — selector never matched, leaving any odd-
     count KPI strip (currently: Overdue / Hours / Value = 3 tiles) with a
     visible empty hole in the bottom-right of the 2-col grid. Span the
     orphan across both columns so the strip stays balanced. */
  .dash-kpi-strip > .dash-kpi:nth-child(odd):last-child{grid-column:1 / -1}
  /* #6 — List view: right-side values (status, type, priority) overflow the
     card's right padding because the flex td's last child has no min-width
     constraint, so right-aligned text refuses to shrink. */
  .list-table td > *:last-child{
    min-width:0;max-width:60%;text-align:right;
    white-space:normal;overflow-wrap:anywhere;word-break:break-word;
  }
  /* #7 — FAB (.ai-launcher) overlaps the modal's Save Changes / Cancel
     footer on mobile. The original :has() rule was too eager (matched on
     inline display:none); this revised version keys on the .hidden class
     toggle that the modal/pm/profile overlays actually use. Verified at
     #overlay.classList.remove('hidden') in openCard at line 11552 and the
     corresponding .add('hidden') in closeModal sites. */
  /* 2026-05-17 📘 Commit D P0 #4: body.has-modal-open is the JS-toggled
     fallback class for iOS Safari <16.4 (no :has() support). Both selectors
     are listed so modern iOS uses :has() naturally; older iOS uses the
     JS-set class. JS sets/clears body.has-modal-open in openCard/openPM/
     openProfileCard sites + their close-paths. */
  body:has(.modal-overlay:not(.hidden)) .ai-launcher,
  body:has(.pm-overlay) .ai-launcher,
  body:has(.profile-modal-overlay:not(.hidden)) .ai-launcher,
  body.has-modal-open .ai-launcher{display:none}
  /* V39l — Apple modal background-scroll lock. When ANY modal is open, the
     body itself doesn't allow scroll/touchmove (matches Apple where the
     background view is "frozen"). The modal's own overflow-y:auto handles
     intra-modal scrolling. Limited to mobile since body has overflow:hidden
     on desktop already (line 975 — height:100svh; overflow:hidden). */
  body:has(.modal-overlay:not(.hidden)),
  body:has(.pm-overlay),
  body:has(.profile-modal-overlay:not(.hidden)),
  body.has-modal-open { touch-action: none; }
  /* But preserve touch within the modal so users can scroll/swipe inside. */
  .modal-overlay, .pm-overlay, .profile-modal-overlay,
  body.has-modal-open .modal, body.has-modal-open .pm-modal { touch-action: auto; }
  /* V80 📘 Lock body scroll when in fixed-layout views (teamchat, chat).
     iOS ignores overflow:hidden on body for programmatic scroll when an input
     inside a position:fixed element is focused. touch-action:none on the body
     prevents the browser from panning/scrolling it on touch. The chat view's
     own scroll containers (tc-list, tc-conv-list, tc-thread-list) remain
     scrollable because they have explicit overflow-y:auto + their own touch events. */
  body:has(#teamChatView:not(.hidden)),
  body:has(#chatView:not(.hidden)) { touch-action: none; }
  /* Restore touch inside the chat panels themselves. */
  #teamChatView, #chatView { touch-action: auto; }
  /* #8 — Lookahead range toggles wrapped mid-label ("2 weeks" → "2/weeks").
     Real class is .la-mode-btn (the earlier guesses .lookahead-range +
     .la-range-btn didn't exist). Nowrap + no-shrink keeps each button on
     one line. Also bump min-width so each toggle has enough room. */
  .la-mode-btn,.lookahead-range button,.la-range-btn{
    white-space:nowrap;flex:0 0 auto;min-width:max-content;
  }
  /* #11 — Calendar month label: nowrap (the existing 4235 rule sets flex:1
     min-width:0, which on a 430px-wide bar can be narrower than "May 2026"
     and trigger wrap). */
  .cal-month-label{white-space:nowrap}
}

/* ── Mobile fixes (2026-05-17 📘 Commit A — login-zoom + tap-targets) ──
   Real iOS WebKit audit findings. Root cause of "fixes never landed on real
   device": .auth-card input at 13px font triggers iOS Safari viewport auto-zoom
   on every login. Once zoomed, every layout assertion downstream is measured
   against the wrong viewport. Bundle also raises 4 tap-targets that the audit
   probe flagged as below the 44px iOS HIG floor on real-WebKit getBoundingClientRect.
   See [[Notes/2026-05-17 📘 — Mobile + PWA audit findings#P0]]. */
@media (max-width: 640px) {
  /* P0 #1 — auth-card input + #18 — auth-actions button:
     16px+ font prevents iOS auto-zoom on focus; 44px height meets HIG. */
  .auth-card input{font-size:16px;height:44px}
  .auth-actions button{height:44px;font-size:14px}
  /* P0 #6 — global-search close (gs-close-btn was 20×16, only mobile-dismiss path). */
  .gs-close-btn{
    min-width:44px;min-height:44px;
    display:inline-flex;align-items:center;justify-content:center;
    padding:0;
  }
  /* P0 #7 — generic-modal close ✕ (used by 5+ openGenericModal flows). */
  .gm-close{min-width:44px;min-height:44px;width:44px;height:44px}
  /* Bonus tap-target fixes (same audit, lower-frequency but real on iOS): */
  /* !important needed because later inline-style and 641-1180px tier rules
     redefine these at higher specificity. */
  .col-collapse-btn,.col-menu-btn{min-width:40px !important;min-height:40px !important}
  .la-mode-btn,.la-today-btn{min-height:40px !important;padding:6px 12px}
  .rpt-export-btn{min-height:40px !important;padding:6px 12px}
  .dash-density-btn{min-height:40px !important;padding:6px 12px}
  .bulk-bar-btn{min-height:40px !important;padding:8px 14px}
  .mbp-chip{min-height:40px !important}
}

/* ── Mobile fixes (2026-05-17 📘 Commit B — FAB de-overlap) ──
   Audit P0 #2 + P1 #17. The Quick Notes FAB (.ai-launcher#qnGlobalLauncher)
   was already lifted above the tabbar by the existing rule at line ~4805, but
   it still sits OVER the last ~80px of scrollable content on every view
   because no view container has padding-bottom that reaches past the FAB
   clearance zone. Only .board-wrap had the fix (line ~2648).
   Strategy: add bottom padding to all the scroll-area view containers
   (List/Dashboard/Files/Contacts/Reports/Calendar/Lookahead/Todo/Activity/
   Photos/Recurring/Timeline/Gantt) so content always scrolls past the FAB.
   #qnGlobalLauncher is .ai-launcher so it inherits the existing position rule. */
@media (max-width: 640px) {
  #listView, #dashboardView, #filesView, #contactsView, #reportsView,
  #calendarView, #lookaheadView, #todoView, #activityView, #photosView,
  #recurringView, #timelineView, #ganttView, #adminView {
    padding-bottom: calc(var(--mobile-bottom-pad) + env(safe-area-inset-bottom, 0));
    box-sizing: border-box;
  }
  /* Team Chat handles its own bottom-padding (composer is bottom-anchored),
     leave it alone. */

  /* Don't show the FAB on the login overlay (race condition: it can render
     before the auth gate hides it). The auth overlay's existence is the
     authoritative signal. */
  body:has(#authOverlay:not(.hidden)) .ai-launcher,
  body:has(#authCard) .ai-launcher,
  body.has-auth-overlay .ai-launcher { display: none !important; }

  /* 2026-05-26 — the V22 "double FAB on Todo" rule + the Todo-scoped
     #tdQnLauncher were removed (one unified global launcher now). On phones the
     global FAB is hidden entirely (see #qnGlobalLauncher rule below) — QuickNote
     is reached via the bottom-right diagonal corner-swipe gesture + the (…) More
     sheet row, so no To-Do-page special-case is needed here anymore. */

  /* V77.3 — Hide global "Search projects" pill on the To-Do tab. It's the
     project board search, irrelevant when the user is in To-Do/Notes. Frees
     header space + reduces visual noise. */
  body:has(#todoView:not(.hidden)) .search-wrap { display: none !important; }

  /* 2026-05-22 📘 Hide BOTH search bars on the project full-page view (.pfv) and
     the chat views — a header search bar covers the project banner / chat header
     and is redundant there (drop back to the board to search). Covers the legacy
     filter (.search-wrap) and the consolidated global search (.header-search-wrap). */
  body:has(#projectFullView:not(.hidden)) .search-wrap,
  body:has(#projectFullView:not(.hidden)) .header-search-wrap,
  body:has(#teamChatView:not(.hidden)) .search-wrap,
  body:has(#teamChatView:not(.hidden)) .header-search-wrap,
  body:has(#chatView:not(.hidden)) .search-wrap,
  body:has(#chatView:not(.hidden)) .header-search-wrap,
  body:has(#todoView:not(.hidden)) .header-search-wrap { display: none !important; }

  /* 2026-05-17 📘 V32a / 2026-05-26 — no floating QN FAB on phones (it overlapped
     content on 7+ views AND collided with the tab bar's More button). Mobile
     QuickNote is reached instantly by the bottom-right diagonal corner-swipe
     gesture (initQnCornerSwipe) — instant, any page, zero screen footprint — with
     the (…) More-sheet "Quick Notes" row as the discoverable backup. */
  #qnGlobalLauncher { display: none !important; }
}

/* ── Mobile fix (2026-05-17 📘 V11 — Apple HIG visual alignment) ──
   Gavin asked for visual errors AND parts that don't follow Apple UI
   design style. Audited prod screenshots against iOS HIG (modern iOS
   17+). Found several systemic deviations:

   1. Field labels rendered as 10px / 800-weight / UPPERCASE / wide-spaced
      grey — looks like an old-school CRM, not iOS. HIG = 12-13px /
      regular weight / sentence case / system secondary color.
   2. Priority/Risk badges rendered as 9px / 800-weight / UPPERCASE — same.
      HIG badges = 11-12px / 600 weight / sentence or title case / no
      letter-spacing.
   3. Date pills + project tags on todo rows wrap inline metadata in
      colored pill backgrounds — HIG treats inline metadata as colored
      text without pill chrome.
   4. Mobile-sheet drag handle was tiny — HIG iOS UISheetPresentationController
      uses 36×5pt rounded pill in systemFill color.
   5. "Today" large-title used theme accent color — HIG large-title is
      systemLabel (near-black/near-white), accent reserved for active
      state and interactive elements.

   This block fixes all five class-wide. Mobile-scoped (≤640px) so
   desktop is unchanged. */
@media (max-width: 640px) {
  /* 1. Field labels — drop the old-CRM all-caps treatment on phones.
        Sentence case, regular weight, secondary color, normal kerning. */
  .list-table td::before,
  .cd-table td::before {
    font-size: 11.5px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    text-transform: capitalize !important;  /* "Client" not "CLIENT" */
    letter-spacing: -0.05px !important;
    color: var(--text-muted) !important;
  }

  /* 2026-05-20 📘 — Mobile List card alignment fix. The desktop
     .td-center{text-align:center} rule leaked into the flex stacked card and
     shoved the centered cells' labels (Priority/Value/Risk/Budget) off the
     shared left gutter, while left-aligned cells (Client/Phase/Type/Deadline)
     stayed flush — the ragged look. Force every stacked td to a clean
     label-left / value-right two-column rhythm (Apple grouped-list). */
  .list-table td.td-center{text-align:left}
  .list-table td::before{
    text-align:left;
    flex:0 0 auto;        /* label keeps its min-width column, never grows */
  }
  .list-table td > *:last-child{
    margin-left:auto;     /* value pinned to the right edge consistently */
    text-align:right;
  }

  /* 2. Priority + Risk + Status badges — softer, no all-caps, regular weight.
        HIG-style "Label" not screaming-CRM. */
  .priority-badge, .risk-badge, .status-chip {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: -0.05px !important;
    padding: 3px 9px !important;
    line-height: 1.3 !important;
  }
  /* The badge values are usually uppercase in data ("HIGH"/"LOW") — keep
     as-is via text-transform:none + style guide says: title-case in
     content. If data is "high" it stays lowercase. */

  /* 3. Inline date/project chips on todo rows — drop the pill background;
        keep color so semantic distinction stays.
        ACTUAL classes per grep (V13 correction): .td-meta-pill (project/list chip)
        + .td-meta-due (date with calendar icon). My V11 guessed .td-date-pill
        and .td-project-pill, neither of which exist. */
  #todoView .td-meta-pill {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
  }
  /* Date with calendar icon — drop the icon, keep colored date text.
     iOS Reminders shows dates as plain colored text, not pill-wrapped. */
  #todoView .td-meta-due {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    font-size: 12px !important;
    font-weight: 500 !important;
  }
  #todoView .td-meta-due .td-meta-ico { display: none !important; }

  /* HIG form labels — V13 correction: V11 targeted only data-label attrs but
     the PFV detail-view forms use real .field-label divs. */
  .field-label {
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: -0.05px !important;
    color: var(--text-muted) !important;
  }

  /* V19: unify section/group titles ACROSS ALL TABS so each tab's heading
     looks identical. Was: Details uses .detail-group-title (13.5px primary
     sentence case "Basics"), every other tab uses .modal-section-title
     (12px muted "ASSIGN TRADE CONTACT"). That's why every tab felt
     visually different — different heading hierarchy per tab.
     Single canonical heading style applied to both classes: 15px primary
     bold sentence case. Matches HIG iOS list-section headers (Settings,
     Mail, Reminders). */
  .modal-section-title,
  .detail-group-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: -0.2px !important;
    color: var(--text-primary) !important;
    margin-bottom: 10px !important;
  }

  /* V19: unify CARD CHROME across tabs too. Details uses .detail-group
     (line 1848), every other tab uses .modal-section (line 1845). Same
     visual treatment but different selectors meant any future style
     change had to be applied twice. AND the `.modal-section:first-child`
     rule means the first card on Contacts loses top-margin while on
     Details the FIRST card (inside field-compact wrapper) keeps it.
     Bring both to the same margin: 12px top, 0 if first. */
  .tab-content > .modal-section:not(.field-compact),
  .tab-content .detail-group {
    margin-top: 12px !important;
    padding: 14px !important;
    border-radius:var(--radius-lg) !important;
  }
  .tab-content > .modal-section:not(.field-compact):first-child,
  .tab-content .field-compact > .detail-group:first-child {
    margin-top: 0 !important;
  }

  /* 4. Mobile-sheet drag handle — HIG 36×5 systemFill rounded pill. */
  .msheet-grip,
  .mobile-sheet > div:first-child:empty,
  .mobile-sheet [class*="grip"] {
    width: 36px !important;
    height: 5px !important;
    background: rgba(60, 60, 67, 0.3) !important;
    border-radius: 2.5px !important;
    margin: 6px auto 8px !important;
  }

  /* 5. Large-title "Today" + page-titles — neutral label color (HIG).
        Accent color stays for the active-state of the parent .nav button.
        2026-05-17 📘 V26 — Gavin pulled the Apple-Reminders-tinted-title
        exception per cont. 13. Now ALL large titles including the To-Do
        list header (.td-main-title at line 20033) render in neutral
        var(--text-primary). The base .td-main-title rule uses var(--accent)
        which made "Today" render blue — that's the override target. */
  .td-section-title, .list-page-title, h2.page-title, .view-title-large,
  #todoView .td-main-title {
    color: var(--text-primary) !important;
  }
}

/* ── Mobile fix (2026-05-17 📘 V10 — class-wide paint-tear kill on iOS) ──
   The same bug class that caused the "Pre-Construction" chip seam exists
   on every chip/tab/pill that has a `transition: background/border/box-shadow`
   AND lives inside a scroll-snap container OR is touched while another
   animation is in flight. iOS Safari renders these atomically when
   promoted to their own compositor layer.

   ⚠️ V24/V25 STANDING WARNING: `transform:translateZ(0)` promotes the
   element to a GPU compositor layer. iOS Safari then resolves any
   `position:absolute` `::after`/`::before` pseudo on the element's
   PARENT against THIS layer's coordinate system instead of the parent's.
   Result: fade gradients on parent containers (e.g., `::after`
   scroll-affordance fades) can paint INSIDE a child chip/tab's body
   instead of at the parent's right edge. This is the same bug class as
   the well-documented iOS Safari "z-index ignored under transformed
   ancestor" issue.

   Rule for new code: if you add a `::after`/`::before` fade gradient on
   a container with layer-promoted descendants, use one of:
     (a) `position:fixed` if the container spans full viewport width (V24)
     (b) `display:none` — remove the fade, use partial-clip of trailing
         content as the affordance (V25)
     (c) Real DOM sibling overlay outside the container's layer hierarchy
   DO NOT use `position:absolute` for fade overlays on layer-promoted
   ancestors. The implicit promotion from `-webkit-overflow-scrolling:touch`
   ALSO triggers this bug, so any scroll container is at risk.

   Strategy: at ≤640px, promote every common "tappable chip/tab/pill"
   class to its own layer AND drop background/border transitions (color-
   only transition is enough — the tap-down feedback comes from the
   `:active` rule + the immediate background flip). This covers:
     - .mbp-chip            mobile board picker phase chips (the original bug)
     - .modal-tab           PFV/modal tab strip
     - .rpt-tab             Reports tab strip
     - .cal-mode-btn        Calendar Month/Week
     - .la-mode-btn         Lookahead 2-weeks/4-weeks
     - .cd-tab              Contacts Directory tabs
     - .gantt-nav-btn       Gantt nav
     - .hsr-chip            Header-search type-filter chips
     - .ph-tab              other phase/filter chips
     - .files-sb-row        Files sidebar rows (have hover bg transition)
     - .ai-action-chip      AI sidebar action chips
     - .btn-preset          Dashboard preset chips
*/
@media (max-width: 640px) {
  .mbp-chip, .modal-tab, .rpt-tab, .cal-mode-btn, .la-mode-btn,
  .cd-tab, .gantt-nav-btn, .hsr-chip, .files-sb-row,
  .ai-action-chip, .btn-preset, .btn-select-mode {
    /* Atomic compositor layer — iOS Safari paints these as a single unit
       so partial-paint tears (the Pre-Construction seam) cannot happen. */
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    /* Drop background+border transitions — color transition only. The
       :active background flip is instant + scroll motion provides
       the affordance. Background transitions during scroll-snap caused
       the V9 visual seam. */
    transition: color var(--motion-fast) !important;
  }
  /* Smooth scroll-snap on the strips themselves — uses the compositor
     instead of paint-by-paint when snapping into position. */
  .mobile-board-picker, .modal-tabs-wrap, .modal-tabs,
  .rpt-tabs, .cal-mode-toggle,
  .view-toggle, .cd-tabs {
    scroll-behavior: smooth;
  }
  /* Replace any hardcoded rgba(0,122,255) blue shadows on active chips
     with theme-aware color-mix so the halo matches the active theme. */
  .mbp-chip.active, .modal-tab.active, .rpt-tab-active,
  .cal-mode-btn.active, .la-mode-btn.active {
    box-shadow: 0 1px 2px color-mix(in srgb, var(--app-accent) 25%, transparent);
  }
}

/* ── Mobile fix (2026-05-17 📘 V5 — global iOS auto-zoom kill) ──
   37 input/select/textarea elements throughout the app have inline
   `style="...font-size:13px..."` set per-element. Inline styles win
   specificity over every CSS class rule, so the per-element font-size
   leaks past every mobile override and triggers iOS Safari viewport
   auto-zoom on focus. Once zoomed, every layout assertion downstream
   measures against the wrong viewport — visible as "fix never landed."
   This one mobile-scoped rule with !important defeats all 37 inline
   declarations at once and applies to any future input/select/textarea
   added without thinking about font-size. Desktop unaffected (>640px). */
@media (max-width: 640px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  textarea {
    font-size: 16px !important;
  }
  /* <select> excluded from the zoom guard — iOS doesn't zoom native pickers,
     and the guard was bloating the compact filter pills. Selects set their own
     font-size per control. */
}

/* ── Mobile fixes (2026-06-03 📘 — header crowding) ──
   On mobile (≤640px, where the bottom tabbar lives) the header "+ New Project"
   button crowded the logo / Export / bell / user pill row. Remove it from the
   header entirely on mobile — the action now lives at the bottom of the "More"
   sheet (see mobileTabMore), which is the thumb-reach home for project actions.
   Desktop keeps the full button in the header. */
.np-compact{display:none}
@media (max-width: 640px) {
  .new-project-btn{display:none!important}
  .export-menu-wrap{display:none!important}
  /* Export + New Project used to push the trailing cluster (⚡ 🔔 avatar) right.
     With both hidden on mobile, pin the cluster to the right edge via the first
     trailing item so it doesn't collapse leftward against the nav. */
  .header #dockToggleBtn{margin-left:auto}
  /* Fallback anchors: if a role hides ⚡, the first remaining trailing item
     becomes the spacer. Auto-margin only takes effect on the first visible
     flex sibling, so listing all three is safe. */
  .header #dockToggleBtn[style*="display: none"] ~ #notifBell{margin-left:auto}
  .header #dockToggleBtn[style*="display: none"] ~ #userPill{margin-left:auto}
  /* User menu on mobile — drops from the avatar (top-anchored), and is capped
     so it never clips at the bottom. The earlier clipping came from using 100vh
     (which includes the area behind Safari's bottom toolbar); 100dvh is the
     VISIBLE height, so the cap is honest. If the full admin list is taller than
     the visible space, the menu scrolls internally — identical behavior on every
     device because the cap is the real visible viewport. */
  .user-menu{
    /* position:FIXED is the fix — the base rule is position:absolute, which
       positions against the document, so a dvh/viewport height cap doesn't pin
       to the visible screen and the menu overflowed past the tabbar. Fixed pins
       it to the viewport, so the max-height cap is real and the menu bounds
       itself between the header and the tabbar, scrolling internally only if it
       truly can't fit. Same behavior on every device. */
    position:fixed;
    width:264px;right:10px;top:46px;
    max-height:calc(100dvh - 46px - var(--mobile-tabbar-h,45px) - env(safe-area-inset-bottom,0px) - 14px);
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  }
  /* Comfortable-but-compact spacing (the version that looked right), lightly
     tightened so more of the list fits before any scroll is needed. */
  .user-menu .um-account{padding:6px 8px 7px}
  .user-menu .user-menu-row{padding:5px 9px}
  .user-menu .user-menu-head{padding:5px 10px 2px}
  .user-menu hr{margin:3px 8px}
  .user-menu .theme-swatches{padding:3px 12px 6px}
}

/* ── Mobile fixes (2026-05-17 📘 Commit E — polish bundle) ──
   Lower-priority audit findings batched. Each is independently small but
   together they account for the "feels sluggish / off" mobile experience.
   See [[Notes/2026-05-17 📘 — Mobile + PWA audit findings#P1-P2]]. */

/* P1 #13 — kill the iOS Safari grey tap-highlight flash everywhere. */
* { -webkit-tap-highlight-color: transparent; }
/* U7 — also belt-and-suspenders on html/body so momentum-scroll touches never
   paint a highlight box over a section on mobile. */
html, body { -webkit-tap-highlight-color: transparent; }

/* U7 — kill the "section stays highlighted while I scroll" effect on touch.
   On touch devices :hover STICKS after a tap (and fires during scroll-momentum),
   so big content rows/items/cards keep their hover wash painted over a whole
   section as you scroll. Neutralize hover BACKGROUND feedback on touch for the
   broad content surfaces — actual buttons/tiles/pills keep their :active press
   feedback (which is intentional + momentary). Hover stays fully intact on
   pointer:fine (desktop/trackpad) where it belongs. */
/* ════════════════════════════════════════════════════════════════════════════
   TOUCH HIGHLIGHT SUPPRESSION (2026-05-26 — structural, replaces the old
   per-component lists which kept missing classes like .activity-item).
   On touch there is no real "hover", and :active paints the instant a finger
   lands — so dragging/scrolling a finger across rows + buttons flashed their
   hover/press background even with no genuine tap. Gavin: the highlight should
   show ONLY on an actual tap.
   Approach: one CLASS-AGNOSTIC rule. Match interactive elements three ways so we
   don't have to enumerate every component:
     • semantic: button, a, [role="button"], [onclick]
     • naming convention substrings: -row / -item / -btn / -opt / -tile / -cell
       / -chip (CSS [class*=] substring match — catches contact-row, cd-row,
       activity-item, la-row, dash-row, *-opt menus, etc.)
   We revert ONLY the background wash (keeps transform-scale presses, which don't
   flash boxy during a scroll), and protect .active/selected states + the phase-
   tinted card (its tint must survive; its touch behaviour is handled by gating
   the hover lift to pointer:fine elsewhere). A real tap still fires the element's
   onclick — only the transient background paint is dropped. */
@media (hover: none), (pointer: coarse) {
  /* 2026-05-27 — media condition broadened from `(hover:none)` to ALSO catch
     `(pointer:coarse)`: iPad Safari (esp. touch + the simulator) frequently reports
     `hover:hover`, so the touch-highlight suppression below was NOT applying on iPad
     — phase pills etc. still flashed/lingered there. `pointer:coarse` correctly
     identifies touch-primary devices (iPhone AND iPad) while excluding a real
     mouse/trackpad (`pointer:fine`), so hover still works for genuine pointer users. */
  /* (0) THE SYSTEMIC HOVER-HIGHLIGHT KILL (2026-05-27, per Gavin — disable hover
     highlight on touch). iOS keeps :hover applied after a tap until the next tap, so
     any `:hover{background:…}` wash LINGERS as a stuck highlight. ~69 of the app's
     hover washes (pills, phase chips, view/page selectors, filter pills, sidebar
     items, menu options, …) all paint to the SAME token `--chrome-bg-hover`. Rather
     than chase each family's resting value, neutralize that ONE token to transparent
     on touch → every standard hover wash resolves to "no highlight" at once, for
     current AND future elements, with zero per-family selectors or specificity fights.
     Press feedback that uses OTHER tokens (the common `:active` washes, transform
     squish) is unaffected. The `[open]` rule + the two `:active` press rules that used
     this token were repointed to surviving values so their feedback still shows on touch.
     2026-05-27 — neutralize to `--chrome-bg` (the RESTING fill token), NOT `transparent`:
     the solid-resting pills (.mbp-chip/.hsr-chip/.filter-pill rest on --chrome-bg) would
     otherwise LOSE their fill on hover-stick (going flat/transparent — the "highlight" on
     the Permitting chip Gavin saw after a touch-drag). `--chrome-bg` makes their hover ==
     their resting; transparent-resting elements are handled by the :not() rules below. */
  :root, html[data-theme] { --chrome-bg-hover: var(--chrome-bg); }
  /* (0b) The handful of hover rules that wash to the STRUCTURAL token `--chrome-bg`
     directly (not `--chrome-bg-hover`) — e.g. the top-nav view tabs (.view-btn:
     Contacts/Photos/Calendar/Timeline/Field). `--chrome-bg` can't be globally
     neutralized (it's a real surface token used everywhere), so neutralize these
     specific hover rules instead. All five rest transparent/none, so transparent ==
     their resting. This is what left the inactive "Photos" tab lit after a touch.
     (2026-05-27 — completes the touch hover-highlight kill; press stays on :active.) */
  :is(.view-btn,.qn-popout-action,.qn-tool,.dash-drag-handle,.dash-row-action):not(.active):hover {
    background: transparent !important;
  }
  /* Phase pills (.mbp-chip, mobile board phase strip) rest on --chrome-bg; pin their
     hover to the SAME resting value so a touch-stick shows no highlight. Belt-and-
     suspenders alongside the token neutralize (the chip's compositor-layer promotion +
     instant bg flip made the token path unreliable on iPhone). :not(.active) keeps the
     active phase pill's accent fill. (2026-05-27) */
  .mbp-chip:not(.active):hover { background: var(--chrome-bg) !important; }
  /* (1) HOVER — touch has no real hover, so a sticky :hover after a tap/scroll is
     never wanted. Suppress the hover background wash broadly + class-agnostically.
     Safe to revert here: a hover background is by definition an overlay on top of
     the resting bg, so dropping it returns the resting bg. Protect selected/active
     states + the phase-tinted card (tint must survive). */
  /* NON-button interactive elements (divs/links/<tr>-likes) rest with no background,
     so reverting their sticky :hover wash correctly returns them to no-bg. */
  :is(
    a, [role="button"], [onclick],
    [class*="-row"], [class*="-item"], [class*="-btn"], [class*="-opt"],
    [class*="-tile"], [class*="-cell"], [class*="-chip"], .mtab,
    .modal-tab, .view-btn, .pill, .chip, .tab
  ):not(button):not(.active):not(.phase-tinted):not(input):not(select):not(textarea):hover {
    background-color: revert !important;
  }
  /* <button>s in the ROW / ITEM / OPT / CELL families rest with NO background (they're
     list rows like .dash-needs-row, not solid pills), so their sticky post-tap :hover
     wash must be neutralized to transparent — NOT `revert` (which exposes the native
     button-face = the white/grey flash bug, 2026-05-27). Solid-fill button pills
     (.mbp-chip, .hsr-chip, .btn-*, etc.) are intentionally NOT matched here: their
     resting bg is a token, their :hover delta is subtle, and blanking them to
     transparent would be the regression. Touch has no real hover → this only stops
     the lingering stick; the :active press feedback below is the touch affordance. */
  button:is([class*="-row"],[class*="-item"],[class*="-opt"],[class*="-cell"]):not(.active):not(.phase-tinted):not(.bid-level-row):not(.sd-row):not(.cmp-row):not(.mov-ln-row):hover {
    background-color: transparent !important;
  }
  /* Table rows wash the <td>, and a bare <tr> matches none of the class patterns
     above — so cover ALL tables generically (catches .list-table, .cd-table
     contacts directory, and any future table). */
  table tbody tr:hover td { background-color: revert !important; }

  /* (2) ACTIVE — :active paints the instant a finger lands, so scrolling/dragging
     over ROWS + LIST ITEMS flashed their press wash with no real tap. Scope the
     :active revert to ROW/ITEM/MENU-OPTION/CELL families ONLY — NOT solid buttons
     (whose resting bg revert could blank them on a genuine tap). Real taps on rows
     still navigate; only the scroll-over flash is gone. */
  :is(
    [class*="-row"], [class*="-item"], [class*="-opt"], [class*="-cell"]
  ):not(button):not(.active):not(.phase-tinted):not(input):not(select):not(textarea):active {
    /* color-only revert (NOT the `background` shorthand) so resting GRADIENT
       backgrounds — e.g. primary buttons — are never wiped; every hover/active
       wash sets a solid background-color, which this fully undoes.
       2026-05-27 📘 ALL <button>s EXCLUDED (generalized from the old .msheet-row
       one-off): `revert` on a <button> returns the NATIVE button-face (grey/white
       sharp rectangle) — the recurring touch-highlight bug seen on .mbp-chip,
       .dash-needs-row, etc. Buttons manage their own press feedback (rounded ::before
       wash + :active squish) and keep a solid resting bg; they must NOT be reverted.
       Non-button rows/items/opts/cells still revert correctly to their resting bg. */
    background-color: revert !important;
  }
  table tbody tr:active td { background-color: revert !important; }
  /* 2026-06-01 📘 — TOUCH REVEAL for hover-gated row controls. These start
     opacity:0 and only appear on :hover; their existing fallback was a WIDTH
     query (≤640px = phone), which MISSES iPad (touch but >640px wide) → the
     controls were invisible+untappable on iPad. A no-hover device reveals them
     here regardless of width (mirrors .task-more-btn @ 5931). Desktop (real
     pointer) is unaffected — this media query simply doesn't match it. */
  /* (.dash-row-actions reveal lives next to its own base below — its base rule
     is defined LATER in the file, so a touch reveal here would be overridden.) */
  .tracked-delete,.stage-delete,.co-line-del,.rt-row-del,.wl-del,.clog-del,
  .pm-card-remove{opacity:.7}
  .dl-fr-row .rt-row-del{opacity:.7}  /* match the 2-class base at 5142 */
  .note-actions{opacity:1}
}

/* V39t — global disabled state. Apple disabled controls = ~40% opacity +
   not-allowed cursor. Per-component rules can override (some buttons want
   different opacities — chat send is 35%, bulk-bar-btn is 40%) but this
   ensures every disabled control has at LEAST this baseline. */
button:disabled, input:disabled, select:disabled, textarea:disabled,
[role="button"][aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
}
button:disabled, [role="button"][aria-disabled="true"] {
  pointer-events: none;
}

/* V39 — touch-action: manipulation on every interactive element (was scoped
   to ~10 selectors). Kills the iOS 300ms double-tap-zoom delay site-wide.
   Text inputs / selects / textareas keep default touch-action (we want pinch
   zoom available on long-form text content). */
button, a, [role="button"], [onclick],
input[type="button"], input[type="submit"], input[type="reset"],
input[type="checkbox"], input[type="radio"],
.mtab, .msheet-row, .msheet-cancel, .card, .list-row,
.la-mode-btn, .la-today-btn, .cal-mode-btn, .rpt-tab,
.notif-bell, .install-prompt-btn, .install-prompt-dismiss,
.fab-new, .ai-launcher, .gm-close, .gs-close-btn,
.btn, .chip, .tab, .pill, .qn-tool, .qn-popout-action {
  touch-action: manipulation;
}

/* V39 — Apple HIG focus ring. Site-wide :focus-visible with !important so
   it WINS over the ~57 per-component outline:none rules that were never
   paired with a :focus-visible companion. Keyboard users now see a clear
   focus indicator; mouse users see no change (:focus-visible doesn't fire
   on mouse clicks per spec, modulo a few edge cases). */
*:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color) !important;
  outline-offset: var(--focus-ring-offset) !important;
  /* U6 — do NOT force border-radius:inherit here. It was overriding a focused
     pill/rounded field with its PARENT's (often square) radius, squaring the
     corners on focus. The element keeps its OWN border-radius; the outline
     traces the element's actual rounded box in every modern browser. */
  /* V82 — pro-app accent glow halo behind the crisp outline */
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-accent) 22%, transparent);
}
/* 2026-05-26 — on TOUCH devices the hard outline rendered as a sharp rectangle
   that didn't follow rounded corners (WebKit quirk), so a tap flashed a square
   selection box over pills/buttons. On coarse pointers drop the outline and keep
   ONLY the box-shadow halo, which always traces the element's own border-radius.
   Keyboard focus on desktop (pointer:fine) keeps the full crisp ring. */
@media (pointer: coarse) {
  *:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 26%, transparent);
  }
}
/* Search bar: kill the global *:focus-visible outline on both the wrap and input.
   The :focus-within accent border on the wrap is the only focus signal needed. */
.header-search-wrap:focus-visible,
.header-search-input:focus-visible,
.header-search-input:focus {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}
/* Inputs / textareas / selects look better with an inset focus ring than an
   outline that extends past their borders. Same accent color, applied via
   box-shadow to leave the actual border untouched. */
/* V39r — only outline:none is !important; the box-shadow ring is a default
   that any component-specific :focus rule (like .field-input:focus) overrides
   with its own softer/styled ring. This restores the V39h+ field-input halo. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}
/* HARD RULE — focus rings are ROUNDED, never a boxy rectangle (same family as the
   rounded-hover + no-edge-strip rules). The box-shadow ring follows the element's own
   border-radius, so the offenders are radius-LESS inputs/textareas. Give every bare
   input/textarea/select a default radius at REST (not on focus, to avoid a corner-jump)
   so its focus ring is always rounded. Inputs with their own radius keep it (this is a
   low-specificity element selector). */
input, textarea, select { border-radius: var(--radius-md, 9px); }

/* ═══════════════════════════════════════════════════════════════════════════
   V82 — Apple Design Sweep: global utilities (2026-05-23 📘)
   Frosted glass mixin + baseline interactive feedback. Frosted base is the
   opaque --frost-bg (surface-derived), NOT --chrome-bg, so it reads on light
   content across all themes. Transforms are scoped per-view (board cards,
   file cards) to avoid colliding with drag-and-drop transforms; this global
   block only guarantees the transition timing + a frosted helper.
   ═══════════════════════════════════════════════════════════════════════════ */
.surface-frosted {
  background: var(--frost-bg);
  backdrop-filter: var(--frost-blur);
  -webkit-backdrop-filter: var(--frost-blur);
}
.surface-frosted-strong {
  background: var(--frost-bg-strong);
  backdrop-filter: var(--frost-blur);
  -webkit-backdrop-filter: var(--frost-blur);
}

/* ── Liquid Glass material + reactive utilities (V82.3) ──────────────────────
   Floating chrome only (menus/popovers/sidebars/sticky headers/drag ghost/nav).
   .liquid-glass = the lit translucent pane (refraction + specular edge).
   .lg-sheen     = adds a pointer-tracking glint (set --lg-sheen-x/y via JS on
                   hero glass; falls back to a static top sheen).
   .lg-reactive  = press-deform (squish) + hover/focus bloom on the spring curve.
   All degrade under prefers-reduced-transparency / prefers-reduced-motion. */
.liquid-glass {
  position: relative;
  background: var(--lg-bg);
  backdrop-filter: var(--lg-refract);
  -webkit-backdrop-filter: var(--lg-refract);
  box-shadow: var(--lg-edge);
}
.liquid-glass-strong { background: var(--lg-bg-strong); }
/* Liquid Glass for ALL floating dropdowns / pickers / menus — one shared
   treatment so every dropdown reads as the same glass chrome (DESIGN.md:
   "one system, not per-component re-rolls"). Each selector below was a solid
   --card-bg/--surface menu before; now they all pick up the strong glass +
   refraction + layered edge. Higher specificity than the originals via the
   shared list, so it overrides their inline background. Fallbacks for
   no-backdrop-filter + reduced-transparency are grouped at the bottom. */
.user-menu,
.pfv-ov-picker,
.rrt-combobox-list,
.blocker-picker-popup,
.tracked-history-pop,
.dash-assignee-pop,
.dash-snooze-pop,
.rrt-cp-popover,
.files-sb-ctx,
.sd-recent-dropdown,
.tc-react-pop,
.tc-mention-pop,
.td-popover,
#exportMenu {
  background: color-mix(in srgb, var(--surface) 64%, transparent) !important;
  backdrop-filter: blur(30px) saturate(1.8);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: var(--lg-edge), var(--shadow-e4) !important;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .user-menu, .pfv-ov-picker, .rrt-combobox-list, .blocker-picker-popup,
  .tracked-history-pop, .dash-assignee-pop, .dash-snooze-pop, .rrt-cp-popover,
  .files-sb-ctx, .sd-recent-dropdown, .tc-react-pop, .tc-mention-pop, .tc-slash-pop,
  .td-popover, #exportMenu { background: var(--card-bg) !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .user-menu, .pfv-ov-picker, .rrt-combobox-list, .blocker-picker-popup,
  .tracked-history-pop, .dash-assignee-pop, .dash-snooze-pop, .rrt-cp-popover,
  .files-sb-ctx, .sd-recent-dropdown, .tc-react-pop, .tc-mention-pop, .tc-slash-pop,
  .td-popover, #exportMenu {
    background: var(--card-bg) !important; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}
/* V-glass2 2026-06-30 — the old pointer-tracking sheen here is RETIRED (the cursor glint
   read bad on dark). The .lg-sheen::before edge-light is now defined ONCE in the V132 block
   above (static, varied per surface). This stale duplicate is neutralized so it can't
   re-introduce the pointer gradient by later-wins. .lg-sheen:hover handled above. */
/* Reactive: tactile press squish + spring-back, and a hover/focus bloom that
   lifts + intensifies the glass. Opt-in on interactive glass chrome. */
.lg-reactive {
  transition: transform var(--motion-fast) var(--ease-spring),
              box-shadow var(--motion-fast) ease,
              filter var(--motion-fast) ease;
}
.lg-reactive:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: var(--lg-rim), var(--shadow-e3); }
.lg-reactive:active { transform: scale(.96); filter: brightness(.98); box-shadow: var(--lg-rim), var(--shadow-e1); }

/* Accessibility — glass becomes solid + sheen/bloom disabled when the OS asks. */
@media (prefers-reduced-transparency: reduce) {
  .liquid-glass, .liquid-glass-strong { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .lg-sheen::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lg-sheen::before, .lg-reactive { transition: none; }
  .lg-reactive:hover, .lg-reactive:active { transform: none; }
}

/* V82.3 — reactive press-deform (squish + spring-back) on the interactive CHROME
   rows in the worked-on areas (chat conv items, to-do + files sidebar rows).
   Tactile feedback on tap; content cards keep their own bloom. */
#teamChatView .tc-conv-item,
#todoView .td-side-row,
.files-sb-row {
  transition: background var(--motion-fast) ease, transform var(--motion-fast) var(--ease-spring);
}
#teamChatView .tc-conv-item:active,
#todoView .td-side-row:active,
.files-sb-row:active { transform: scale(.975); }
@media (prefers-reduced-motion: reduce) {
  #teamChatView .tc-conv-item:active,
  #todoView .td-side-row:active,
  .files-sb-row:active { transform: none; }
}
/* Baseline interactive feedback timing — components opt into transform/shadow
   bloom in their own rules; this just guarantees the timing is consistent. */
.card,
.file-card,
.cd-table tbody tr,
.tc-conv-item {
  transition: transform var(--duration-fast) var(--ease-spring),
              box-shadow  var(--duration-fast) ease,
              background  var(--duration-fast) ease;
}

@media (max-width: 640px) {
  /* P2 #19 — todo detail inputs auto-zoom on iOS Safari (font-size <16px).
     Override the inline :is(#todoView,.td-portal) .td-detail input styles. */
  :is(#todoView,.td-portal) .td-detail input,
  :is(#todoView,.td-portal) .td-detail select,
  :is(#todoView,.td-portal) .td-detail textarea {
    font-size: 16px;
  }
  /* P2 #21 — Lookahead legend chips wrap to 2 lines at 440px. Labels are
     bare text nodes (not in elements) — kill them by setting parent
     font-size:0. Dots use width/height/background so unaffected. Bump
     dots to 14×14 so the colored circles are still readable iconography. */
  /* !important required because base .la-legend rule at ~line 4485 lives
     outside any @media block and wins source-order ties. */
  .la-legend { gap: 10px !important; row-gap: 6px !important; font-size: 0 !important; }
  .la-legend .la-dot { width: 14px; height: 14px; margin-right: 0; vertical-align: middle; display: inline-block; }

  /* P2 #22 — Calendar Week/Month + Lookahead 2-weeks/4-weeks buttons:
     bump active-state contrast. !important needed because the base
     .cal-mode-btn.active + .la-mode-btn.active rules live OUTSIDE this
     media block and source-order wins ties. */
  .cal-mode-btn.active,
  .la-mode-btn.active {
    background: var(--app-accent) !important;
    color: var(--on-accent) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.15) !important;
  }

  /* V-ctl2 — removed the old mobile accent-fill .rpt-tab-active override; the canonical
     SELECTED recipe (white/light pill) is not media-gated, so it covers mobile too. */
}
/* List view mobile compaction (2026-05-16 cont. 2 — autonomous audit):
   renderList emits 21 columns per row; .rrt-stack converts each to a
   stacked label-row, producing massive cards mostly of "—" rows for
   unset fields. Hide secondary fields on mobile — keep only the 8 that
   matter at-a-glance: Name, Client, Phase, Type, Priority, Value,
   Deadline, Health. Power-user fields stay on desktop. */
@media (max-width: 640px) {
  .list-table td[data-label="#"],
  .list-table td[data-label="PM"],
  .list-table td[data-label="Super"],
  .list-table td[data-label="Risk"],
  .list-table td[data-label="Budget"],
  .list-table td[data-label="Hours"],
  .list-table td[data-label="Start"],
  .list-table td[data-label="Permit"],
  .list-table td[data-label="Inspect"],
  .list-table td[data-label="Billing"],
  .list-table td[data-label="Blocker"],
  .list-table td[data-label="Tracked"],
  .list-table td[data-label="Tasks"],
  .list-table td[data-label="Health"]{display:none}
  /* 2026-05-17 📘 visual fix V2 F2: hide empty rows on mobile so cards
     collapse to ONLY the fields that have data. renderList() stamps
     data-empty="1" on cells whose value is the em-dash placeholder.
     Name + Phase always render (Name=identity, Phase=primary state). */
  .list-table td[data-empty="1"]{display:none}
  /* "All Projects" toolbar needed horizontal padding to match column padding.
     The .list-page-toolbar has padding:0 2px by default; on mobile the
     title sits flush against the left edge of the screen. */
  .list-page-toolbar{padding:0 var(--mobile-gutter)}
}
/* #2 — Mobile phase picker (.mobile-board-picker, 640px and below) scrolls
   horizontally but had no edge fade so clipped chips ("Pre-Cons…") looked
   like a layout bug rather than a scroll affordance. Match the .filter-bar
   pattern at line 2425. Also apply to the desktop .view-toggle on tablets. */
@media (max-width: 1024px) {
  .view-toggle{
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);
  }
}
@media (max-width: 640px) {
  /* Wrap the phase picker in a relative container so we can absolutely-position
     a fade overlay over the right edge. The mask-image approach was invisible
     because the picker's translucent chrome-bg over app-bg yields almost the
     same color as app-bg itself after the mask reveals it. Use a real solid
     gradient overlay instead — fading from transparent to app-bg-opaque. */
  .mobile-board-picker{position:relative}
  /* 2026-05-17 📘 V24 — iOS Safari layer-promotion bug. The `::after` fade
     was painting inside the wrong GPU layer — its `position:absolute` got
     resolved against the nearest layer-promoted descendant (`.mbp-chip` has
     `transform:translateZ(0)` for the V9 paint-tear fix), so the fade
     ended up positioned MID-active-chip instead of at the picker's right
     edge. Pixel-row scan in cont. 9-10 showed the gradient at viewport
     x=287-320 (inside Pre-Construction's chip body) instead of x=408-440
     (the picker's right edge as declared). Switching to `position:fixed`
     decouples the `::after` from any descendant's compositor layer and
     anchors it to the viewport — on mobile (≤640px) the picker spans the
     full viewport width, so picker-right == viewport-right. The fade now
     correctly sits at viewport x=408-440 regardless of which chip is active.
     `top:0;bottom:0` makes the fade full-viewport-height; outside the
     picker's y-band the surrounding page is also `--app-bg`, so the fade
     is invisible against that background (only renders visible inside the
     picker over the chip backgrounds — which is the desired affordance). */
  .mobile-board-picker::after{
    content:'';position:fixed;top:0;right:0;bottom:0;width:32px;
    background:linear-gradient(to right, transparent, var(--app-bg) 80%);
    pointer-events:none;
  }
}
/* #3 — Board column extends behind the bottom mobile tabbar because the
   tabbar is position:fixed (out of flex flow) so .board-wrap thinks it owns
   the bottom of the viewport. Pad the wrap's bottom so its content area ends
   above the tabbar. The column is align-items:stretch off the wrap, so it
   inherits the new shorter height automatically and .col-add-btn sits cleanly
   above the tabbar. (Don't pad .cards — it's flex:1 and padding there pushes
   the sibling .col-add-btn off the bottom of the column.) */
@media (max-width: 640px) {
  .board-wrap{padding-bottom:calc(var(--mobile-tabbar-h, 45px) + env(safe-area-inset-bottom, 0px) + 12px)}
}

/* Activity view */
.activity-wrap,.dashboard-wrap{margin:0;padding:12px;flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;width:100%;box-sizing:border-box}
/* pass-3 (_STANDARD.md A): Activity full-width — scoped override so Dashboard's own cap is untouched. */
/* §2 — Activity main + rail had NO background (looked broken / floating on void). Give the view
   the app matte so its sections read as floating panels on a stage (floating-panel canon V133). */
#activityView.activity-wrap{max-width:none;background:var(--app-bg)}
.activity-header,.dashboard-header{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;justify-content:space-between;margin-bottom:12px;padding:0 2px}
.activity-title,.dashboard-title{font-size:18px;font-weight:700;color:var(--on-app-bg);letter-spacing:-.3px;margin:0;display:block}
.dashboard-subtitle{font-size:12px;color:var(--text-muted);margin-top:2px}
.activity-filters{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.activity-filters select,.activity-filters input{height:30px;padding:0 10px;background:var(--chrome-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);font-size:12px;color:var(--text-primary);font-family:inherit;font-weight:500;letter-spacing:-.05px;transition:background var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast)}
.activity-filters select{-webkit-appearance:none;appearance:none;padding-right:26px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238e8e93'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center}
.activity-filters select:hover,.activity-filters input:hover{background-color:var(--chrome-bg-hover);border-color:var(--chrome-border-strong)}
.activity-filters select:focus-visible,.activity-filters input:focus-visible{outline:none;border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 22%,transparent)}
.activity-filters button{height:30px;padding:0 12px;background:var(--chrome-bg);border:0.5px solid var(--chrome-border);color:var(--text-primary);border-radius:var(--radius-md);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:background var(--motion-fast),transform var(--motion-fast)}
.activity-filters button:hover{background:var(--chrome-bg-hover)}
.activity-filters button:active{transform:scale(.97)}
.activity-list{display:flex;flex-direction:column;gap:0;background:var(--card-bg);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-e2);border:0.5px solid var(--chrome-border)}
.activity-item{display:flex;gap:12px;align-items:flex-start;padding:11px 16px;background:transparent;border:none;border-bottom:0.5px solid color-mix(in srgb, var(--text-primary) 7%, transparent);border-radius:0;transition:background var(--motion-fast)}
/* V98 — activity type glyph: colored rounded square, scannable by event family */
.activity-ico{flex-shrink:0;width:26px;height:26px;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--ai) 14%,transparent);color:var(--ai)}
.activity-ico svg{width:13px;height:13px}
/* 2026-06-02 ALL-IN — actor face + corner type-badge (human-story feel) */
.activity-face{position:relative;flex-shrink:0;width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;box-shadow:var(--shadow-e1),inset 0 1px 0 rgba(255,255,255,.25)}
.activity-face-badge{position:absolute;right:-3px;bottom:-3px}
.activity-face-badge .activity-ico{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--card-bg);box-shadow:none}
.activity-face-badge .activity-ico svg{width:9px;height:9px}
.activity-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.activity-actor{font-weight:700;color:var(--text-primary)}
/* Pass-2 — trailing event-family chip (soft tinted pill keyed off --avc, NOT an edge-strip). */
.activity-verb-chip{display:inline-block;margin-left:7px;vertical-align:middle;font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:999px;white-space:nowrap;color:var(--avc,var(--app-accent));background:color-mix(in srgb,var(--avc,var(--app-accent)) 13%,transparent)}
.activity-item:last-child{border-bottom:none}
.activity-item:hover{background:color-mix(in srgb,var(--app-accent) 5%,transparent);cursor:pointer;border-radius:10px}
.activity-item:active{background:color-mix(in srgb,var(--app-accent) 12%,transparent);border-radius:10px}
.activity-line{min-width:0;font-size:13px;color:var(--text-secondary);overflow-wrap:anywhere;letter-spacing:-.05px;font-weight:500;line-height:1.4}
.activity-meta{font-size:11px;color:var(--text-muted);white-space:nowrap}
.activity-meta a{color:var(--app-accent);text-decoration:none;font-weight:600}
.activity-meta a:hover{text-decoration:underline}
.activity-empty,.activity-loading{padding:32px 20px;text-align:center;color:var(--text-muted);font-size:13px;background:var(--card-bg);border-radius:var(--radius-lg);box-shadow:var(--bevel-top),var(--shadow-e2)}

/* ===== Activity · Pass 2 (2026-06-05) — the human story (face+verb+object, day-grouped) ===== */
/* G3-P1 — page header row: title/sub + Guide pill host. */
:is(#activityView) .act-headrow{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
:is(#activityView) .act-headrow-lead{flex:1;min-width:0}
:is(#activityView) .act-headrow-title{font-size:21px;font-weight:800;letter-spacing:-.3px;color:var(--text-primary);line-height:1.1}
:is(#activityView) .act-headrow-sub{font-size:13px;color:var(--text-secondary);margin-top:3px}
:is(#activityView) .act-headrow-end{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;margin-top:2px}
/* Wave B — search box, saved-view chips, keyboard-focus ring. */
:is(#activityView) .act-search-wrap{display:inline-flex;align-items:center;gap:6px;padding:0 11px}
:is(#activityView) .act-search-ico{width:13px;height:13px;flex-shrink:0;color:var(--text-muted);fill:none;stroke:currentColor}
:is(#activityView) .act-search-in{border:0;background:transparent;font:inherit;font-weight:600;color:var(--text-primary);outline:none;width:150px;max-width:42vw}
:is(#activityView) .act-search-in::placeholder{color:var(--text-muted);font-weight:500}
:is(#activityView) .act-saved-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%;margin-top:10px}
:is(#activityView) .act-saved-chip{color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 9%,var(--card-bg));border-color:transparent}
:is(#activityView) .act-saved-x{margin-left:6px;font-weight:800;opacity:.55;font-size:14px;line-height:1}
:is(#activityView) .act-saved-x:hover{opacity:1}
:is(#activityView) .ev.act-kb-focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 55%,transparent),var(--shadow-e2);border-radius:14px}
:is(#activityView,#projectActivityList) .act-layout{display:grid;grid-template-columns:1fr 280px;gap:24px;align-items:start}
:is(#activityView,#projectActivityList) .act-main{min-width:0;overflow-x:clip}
/* filter chips row */
:is(#activityView,#projectActivityList) .act2-filters{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:20px}
:is(#activityView,#projectActivityList) .ac{height:32px;padding:0 13px;border-radius:999px;font-size:12.5px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:.5px solid var(--chrome-border);box-shadow:var(--shadow-e1);color:var(--text-primary);font-family:inherit;transition:background var(--motion-fast),box-shadow var(--motion-fast)}
:is(#activityView,#projectActivityList) .ac:hover{background:var(--surface-2)}
:is(#activityView,#projectActivityList) .ac.on{background:color-mix(in srgb,var(--app-accent) 14%,var(--card-bg));color:var(--app-accent);border-color:transparent}
:is(#activityView,#projectActivityList) .ac .ava{width:18px;height:18px;border-radius:999px;display:grid;place-items:center;color:#fff;font-size:9px;font-weight:800}
:is(#activityView,#projectActivityList) .ac .acdot{width:8px;height:8px;border-radius:999px;background:var(--d,var(--app-accent))}
:is(#activityView,#projectActivityList) .ac select{border:0;background:transparent;font:inherit;font-weight:700;color:inherit;cursor:pointer;outline:none}
:is(#activityView,#projectActivityList) .ac input[type=date]{border:0;background:transparent;font:inherit;font-weight:700;color:inherit;outline:none;max-width:128px}
/* G2 — Activity filter bar = two stacked rows: a TYPE-family quick-filter chip row
   (raised section framing), then the control row (person chips + group-by/type/
   project/since selects). The .act2-filters parent stays flex-wrap; these children
   span full width so they form distinct rows. */
:is(#activityView,#projectActivityList) .act-fam-row,
:is(#activityView,#projectActivityList) .act-ctl-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;width:100%}
:is(#activityView,#projectActivityList) .act-fam-row{padding:11px 13px;border-radius:16px;background:var(--surface-grad,var(--card-bg));box-shadow:var(--bevel-top,inset 0 1px 0 rgba(255,255,255,.06)),var(--shadow-e1);margin-bottom:11px}
:is(#activityView,#projectActivityList) .act-fam-chip .act-fam-n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;font-size:11px;font-weight:800;background:color-mix(in srgb,var(--text-muted) 16%,transparent);color:var(--text-secondary)}
:is(#activityView,#projectActivityList) .act-fam-chip.on .act-fam-n{background:color-mix(in srgb,var(--app-accent) 24%,transparent);color:var(--app-accent)}
/* day group + sticky frosted head */
:is(#activityView,#projectActivityList) .day{margin-bottom:8px}
/* G3-P1 — sticky day/section header fix. The old top:0 stuck flush to the scroll-
   container edge (touching the controls above) and the partly-transparent frost let
   the timeline spine bleed through at the inset edges. Now: a small top offset for
   breathing room, full-bleed horizontal padding so the frost covers the spine, a
   higher z-index than the spine, and a hairline base so day text never overlaps the
   row scrolling beneath it. Holds in every group mode (day/type/person/project). */
:is(#activityView,#projectActivityList) .day-head2{position:sticky;top:4px;z-index:6;display:flex;align-items:center;gap:11px;padding:11px 8px;margin:0 -8px;border-radius:10px;background:var(--frost-bg-strong,color-mix(in srgb,var(--app-bg) 88%,transparent));-webkit-backdrop-filter:var(--frost-blur);backdrop-filter:var(--frost-blur)}
:is(#activityView,#projectActivityList) .day-title{font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary)}
:is(#activityView,#projectActivityList) .day-sub{font-size:12px;color:var(--text-muted);font-weight:600}
:is(#activityView,#projectActivityList) .day-line{flex:1;height:.5px;background:var(--chrome-border)}
/* spine timeline */
:is(#activityView,#projectActivityList) .tl{position:relative;padding-left:30px}
:is(#activityView,#projectActivityList) .tl::before{content:"";position:absolute;left:13px;top:8px;bottom:8px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--chrome-border),color-mix(in srgb,var(--chrome-border) 30%,transparent))}
/* event card (door) */
/* pass-3 (_STANDARD.md A.4-A.5): event card = solid raised card, depth via elevation; --chrome-border hairline (dark-theme visible). */
:is(#activityView,#projectActivityList) .ev{position:relative;margin-bottom:12px;border-radius:14px;padding:13px 15px;background:var(--card-bg);box-shadow:var(--shadow-e2);border:.5px solid var(--chrome-border);display:flex;gap:12px;align-items:flex-start;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
:is(#activityView,#projectActivityList) .ev:hover{transform:translateX(3px);box-shadow:var(--shadow-e2),var(--glow-accent-soft,0 0 0 3px color-mix(in srgb,var(--app-accent) 12%,transparent))}
:is(#activityView,#projectActivityList) .ev::before{content:"";position:absolute;left:-23px;top:18px;width:12px;height:12px;border-radius:999px;background:var(--vc,var(--app-accent));box-shadow:0 0 0 4px var(--spine-ring,var(--app-bg)),0 0 0 5.5px color-mix(in srgb,var(--vc,var(--app-accent)) 30%,transparent)}
:is(#activityView,#projectActivityList) .ev.major::before{width:14px;height:14px;left:-24px}
/* hero event — today's headline */
:is(#activityView,#projectActivityList) .ev.hero{border-radius:18px;padding:16px 18px;gap:14px;box-shadow:var(--bevel-top),var(--shadow-e3),var(--glow-accent-soft,0 0 0 3px color-mix(in srgb,var(--app-accent) 12%,transparent));border:.5px solid color-mix(in srgb,var(--vc,var(--app-accent)) 18%,rgba(0,0,0,.05))}
:is(#activityView,#projectActivityList) .ev.hero::before{width:16px;height:16px;left:-25px;top:20px;box-shadow:0 0 0 4px var(--app-bg),0 0 0 6px color-mix(in srgb,var(--vc,var(--app-accent)) 40%,transparent)}
:is(#activityView,#projectActivityList) .ev.hero .ev-ava{width:44px;height:44px;font-size:16px}
:is(#activityView,#projectActivityList) .ev.hero .vtext{font-size:15px}
:is(#activityView,#projectActivityList) .ev-pin{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--vc,var(--app-accent));margin-bottom:5px}
:is(#activityView,#projectActivityList) .ev-ava{width:38px;height:38px;border-radius:999px;display:grid;place-items:center;color:#fff;font-size:14px;font-weight:800;flex-shrink:0;box-shadow:0 2px 6px -2px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.3)}
:is(#activityView,#projectActivityList) .ev .vbody{flex:1;min-width:0}
:is(#activityView,#projectActivityList) .ev .vtext{font-size:13.5px;line-height:1.45;color:var(--text-secondary);overflow-wrap:anywhere}
:is(#activityView,#projectActivityList) .ev .vtext b{font-weight:800;color:var(--text-primary)}
:is(#activityView,#projectActivityList) .ev .who{font-weight:800;color:var(--text-primary)}
:is(#activityView,#projectActivityList) .ev .verb{display:inline-flex;align-items:center;font-size:11px;font-weight:800;padding:1px 8px;border-radius:999px;background:var(--badge-neutral-bg);color:var(--badge-neutral-fg)}
:is(#activityView,#projectActivityList) .ev:hover .verb{background:color-mix(in srgb,var(--vc,var(--app-accent)) 14%,transparent);color:var(--vc,var(--app-accent))}
:is(#activityView,#projectActivityList) .ev .vproj{color:var(--app-accent);font-weight:800;cursor:pointer;text-decoration:none}
:is(#activityView,#projectActivityList) .ev .vproj:hover{text-decoration:underline}
/* quiet separator before the project link when the verb already carries its own preposition */
:is(#activityView,#projectActivityList) .ev .vproj-sep{color:var(--text-muted);font-weight:700;padding:0 1px}
:is(#activityView,#projectActivityList) .ev .vmeta{display:flex;align-items:center;gap:10px;margin-top:7px;flex-wrap:wrap}
:is(#activityView,#projectActivityList) .ev .vtime{font-size:11.5px;color:var(--text-muted);font-weight:700}
:is(#activityView,#projectActivityList) .ev .vtype{font-size:10px;font-weight:800;padding:2px 8px;border-radius:999px;letter-spacing:.02em}
/* 2026-06-14 — severity pill (deadline/risk urgency). Rounded, fill-tinted by --sev (set
   inline per level); a tiny leading dot. No edge-strip, follows the no-hard-corner rule. */
:is(#activityView,#projectActivityList) .ev .v-sev{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;padding:2px 9px;border-radius:999px;letter-spacing:.02em;background:color-mix(in srgb,var(--sev) 15%,transparent);color:var(--sev);white-space:nowrap}
:is(#activityView,#projectActivityList) .ev .v-sev::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--sev);flex-shrink:0}
/* amount chip on financial events (REAL — from payload.amount) */
:is(#activityView,#projectActivityList) .v-amt{margin-top:8px;display:inline-flex;align-items:center;gap:8px;border-radius:11px;padding:8px 12px;background:var(--surface-2);border:.5px solid rgba(0,0,0,.04)}
:is(#activityView,#projectActivityList) .v-amt .va-ico{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:800;flex-shrink:0}
:is(#activityView,#projectActivityList) .v-amt .va-name{font-weight:700;font-size:12.5px;color:var(--text-primary)}
:is(#activityView,#projectActivityList) .v-amt .va-amt{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums}
/* ball-in-court handoff (REAL — only on tracked.* events that carry it) */
:is(#activityView,#projectActivityList) .v-handoff{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--text-secondary);margin-top:8px}
:is(#activityView,#projectActivityList) .v-handoff .hava{width:20px;height:20px;border-radius:999px;display:grid;place-items:center;color:#fff;font-size:9px;font-weight:800}
/* presence rail (sticky) */
:is(#activityView,#projectActivityList) .act-rail{position:sticky;top:8px;align-self:start;background:var(--frost-bg,color-mix(in srgb,var(--card-bg) 70%,transparent));-webkit-backdrop-filter:var(--frost-blur);backdrop-filter:var(--frost-blur);border-radius:18px;border:.5px solid var(--chrome-border);box-shadow:var(--shadow-e2);padding:18px}
:is(#activityView,#projectActivityList) .rail-sec{margin-bottom:20px}
:is(#activityView,#projectActivityList) .rail-sec:last-child{margin-bottom:0}
:is(#activityView,#projectActivityList) .rs-t{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px;display:flex;align-items:center;gap:7px}
:is(#activityView,#projectActivityList) .pres-row{display:flex;align-items:center;gap:10px;margin-bottom:11px}
:is(#activityView,#projectActivityList) .pres-row:last-child{margin-bottom:0}
:is(#activityView,#projectActivityList) .pres-ava{width:32px;height:32px;border-radius:999px;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:800;position:relative;box-shadow:inset 0 1px 0 rgba(255,255,255,.3);flex-shrink:0}
:is(#activityView,#projectActivityList) .pres-ava .on-dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:999px;background:var(--color-success);border:2px solid var(--card-bg)}
/* 2026-07-02 📘 — BASE presence-avatar positioning (was ONLY scoped to #activityView/#projectActivityList,
   so a .pres-ava rendered anywhere else had an UNPOSITIONED .on-dot that landed centered ON the photo).
   Make the container position:relative and corner-anchor the dot everywhere, regardless of host view. */
.pres-ava{position:relative}
.pres-ava .on-dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:999px;background:var(--color-success);border:2px solid var(--card-bg);box-sizing:border-box}
:is(#activityView,#projectActivityList) .pr-n{font-weight:700;font-size:12.5px;color:var(--text-primary)}
:is(#activityView,#projectActivityList) .pr-s{font-size:11px;color:var(--text-muted);font-weight:600}
:is(#activityView,#projectActivityList) .mini-stat{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;border-bottom:.5px solid var(--chrome-border)}
:is(#activityView,#projectActivityList) .mini-stat:last-child{border:0}
:is(#activityView,#projectActivityList) .ms-l{font-size:12px;font-weight:700;color:var(--text-secondary)}
:is(#activityView,#projectActivityList) .ms-v{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text-primary)}
/* §5-D — Feed ↔ Sections layout toggle (segmented control). Inset track, rounded
   thumb-on-active per the rounded-hover rule (no hard corners), accent-tinted active. */
#activityView .act-layout-seg{display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:999px;background:var(--surface-2);border:.5px solid var(--chrome-border)}
#activityView .act-layout-seg.is-disabled{opacity:.55}
#activityView .als-btn{appearance:none;border:0;background:transparent;color:var(--text-secondary);font:inherit;font-size:12px;font-weight:700;padding:4px 12px;border-radius:999px;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
#activityView .als-btn:hover:not(.on):not(:disabled){color:var(--text-primary)}
#activityView .als-btn.on{background:var(--card-bg);color:var(--app-accent);box-shadow:var(--shadow-e1),inset 0 0 0 .5px color-mix(in srgb,var(--app-accent) 22%,transparent)}
#activityView .als-btn:disabled{cursor:not-allowed}
/* §5-D — SECTIONS board: responsive auto-fill grid of per-group floating panels.
   Each column is a V133 frosted .rt-panel (chrome) — its own mini activity feed.
   The busiest group leads (size-sorted upstream). Columns are equal-min-width and
   wrap; the matte (--app-bg) shows through the 14px gap as the panel separation. */
#activityView .asec-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;align-items:start}
/* §5-D fix — inside a glass section column the event-card timeline dot sits on the PANEL
   surface, not the page matte; its masking ring must match the panel (was --app-bg → a
   dark navy halo on dark themes). --spine-ring overrides the default for the .ev::before
   ring + the spine line so both read as the panel's own surface. */
#activityView .asec-col{display:flex;flex-direction:column;min-width:0;padding:0;overflow:hidden;--spine-ring:var(--card-bg)}
/* panel header — sticky-feel identity row; hairline base; carries glyph + title + count */
#activityView .asec-head{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:.5px solid var(--chrome-border)}
#activityView .asec-title{font-size:14px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
#activityView .asec-n{flex-shrink:0;display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 7px;border-radius:999px;font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent)}
#activityView .asec-ava{width:26px;height:26px;border-radius:999px;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:800;flex-shrink:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
#activityView .asec-dot{width:11px;height:11px;border-radius:999px;flex-shrink:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 0%,transparent)}
/* panel body — its own scroll-capped column so a giant group can't push the board tall;
   max-height keeps the board readable, content scrolls within the panel. */
#activityView .asec-body{padding:12px 15px 14px;max-height:62vh;overflow-y:auto;overscroll-behavior:contain}
#activityView .asec-day + .asec-day{margin-top:10px}
#activityView .asec-day-h{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin:0 0 8px 2px}
/* tighten the spine + cards inside a section column (narrower than the full feed) */
#activityView .asec-col .tl{padding-left:26px}
#activityView .asec-col .tl::before{left:11px}
#activityView .asec-col .ev{margin-bottom:9px;padding:11px 13px}
#activityView .asec-col .ev::before{left:-20px;top:16px;width:10px;height:10px}
@media (max-width:980px){:is(#activityView,#projectActivityList) .act-layout{grid-template-columns:1fr}:is(#activityView,#projectActivityList) .act-rail{position:static;order:-1}
  /* board collapses to a single column on narrow viewports; panels uncap height so each
     section reads top-to-bottom naturally (no nested scroll on phones). */
  #activityView .asec-board{grid-template-columns:1fr}
  #activityView .asec-body{max-height:none}}

/* Comment threads */
/* V134 — match the task controls divider (0.5px solid, faint) instead of a heavier dashed line,
   and tighten the top gap so the card reads as one cohesive item, not stacked bands (Gavin). */
.comment-thread{margin-top:7px;padding-top:7px;border-top:0.5px solid color-mix(in srgb,var(--text-primary) 6%,transparent)}
/* V133 — comments collapse behind a quiet summary toggle on ALL viewports (was desktop-always-open,
   which put a full composer on every task/note card → heavy). The thread lazy-loads on first open;
   the meta-row count pill + this summary badge surface "N comments" at a glance. */
.comment-summary{display:flex;align-items:center;gap:7px;cursor:pointer;list-style:none;padding:5px 2px;font-size:12px;font-weight:600;color:var(--text-muted);border-radius:var(--radius-sm);transition:color var(--motion-fast)}
.comment-summary::-webkit-details-marker{display:none}
.comment-summary::marker{content:''}
.comment-summary:hover{color:var(--text-primary)}
.comment-summary-ico{width:13px;height:13px;opacity:.7;flex-shrink:0}
.comment-summary-n{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 5px;margin-left:2px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent);font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.comment-summary-chev{margin-left:auto;opacity:.6;transition:transform var(--motion-fast) var(--ease-out)}
details.comment-thread[open] .comment-summary-chev{transform:rotate(180deg)}
details.comment-thread[open] .comment-summary{color:var(--text-primary);margin-bottom:6px}
.comment-list{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.comment-item{padding:6px 8px;background:var(--surface-2);border-radius:var(--radius-tag);font-size:13px}
.comment-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted);margin-bottom:2px}
.comment-body{color:var(--text-primary);overflow-wrap:anywhere}
.comment-del{background:none;border:none;color:var(--status-blocked-border);cursor:pointer;font-size:11px;padding:0 4px}
.comment-del:hover{text-decoration:underline}
.comment-empty,.comment-loading{font-size:12px;color:var(--text-muted);font-style:italic;padding:4px 0}
/* 2026-05-31 📘 — empty/loading text inside a dashboard widget gets the same
   14px horizontal inset as the widget title (was padding:0 left → text sat flush
   at the card edge, mis-aligned under the inset title). */
/* 2026-06-05 📘 — empty/loading state fills + centers in the card so an empty widget reads
   as a calm, intentional state rather than a label stuck at the top of a tall blank card. */
.dash-card .comment-empty,.dash-card .comment-loading{flex:1 1 auto;display:flex;align-items:center;justify-content:center;text-align:center;padding:18px 16px;min-height:0}
/* S1-C7 🧊 — compact dashboard list-widget empty: a quiet icon + honest copy, replacing the
   bare "Nothing here." text. Centered in the card like .comment-empty, but with a signal glyph. */
.dash-mini-empty{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;padding:20px 16px;min-height:0;color:var(--text-muted)}
.dash-mini-empty .dme-ico{width:22px;height:22px;opacity:.5;color:var(--text-secondary,var(--text-muted))}
.dash-mini-empty span{font-size:12px;font-weight:600;letter-spacing:-.1px}
.comment-input-row{display:flex;gap:6px;align-items:stretch}
/* V39v — comment input: 1px → 0.5px hairline, Apple focus halo, button motion */
.comment-input{flex:1;min-width:0;padding:6px 10px;border:0.5px solid var(--field-stroke);border-radius:var(--radius-input);font-size:13px;font-family:inherit;resize:vertical;min-height:30px;max-height:120px;background:var(--field-fill);color:var(--text-primary);outline:none;transition:background var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast)}
.comment-input:focus{border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 18%, transparent)}
.comment-input-row button{padding:6px 12px;font-size:12.5px;border:none;background:var(--link);color:var(--on-accent);border-radius:var(--radius-btn-sm);cursor:pointer;font-weight:600;letter-spacing:-.05px;transition:opacity var(--motion-fast),transform var(--motion-fast),background var(--motion-fast);box-shadow:0 1px 2px rgba(0,0,0,.08),inset 0 0 0 0.5px rgba(255,255,255,.16)}
.comment-input-row button:hover{opacity:.92}
.comment-input-row button:active{transform:scale(.97);opacity:1}

/* Dashboard — Apple-system */
.dashboard-wrap{padding:0;overflow-y:auto;flex:1}
.dashboard-me{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--text-muted);flex-wrap:wrap}
.dashboard-me label{display:flex;align-items:center;gap:6px}
.dashboard-me input{padding:4px 8px;background:var(--chrome-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-sm);font-size:12px;width:140px;color:var(--text-primary);font-family:inherit}
.dashboard-me button{padding:5px 11px;border-radius:var(--radius-sm);font-size:11.5px;font-weight:600;background:var(--chrome-bg);color:var(--text-primary);border:0.5px solid var(--chrome-border);cursor:pointer;font-family:inherit}
.dashboard-me button:hover{background:var(--chrome-bg-hover)}

/* ── Dashboard v2 — three-rail layout ── */
.dashboard-shell{display:flex;flex-direction:column;gap:12px;min-height:100%}
.dashboard-shell[data-dash-density="compact"]{gap:10px}
/* V133 (2026-06-20) — the dashboard sections are FLOATING PANELS on the matte,
   not flat zones. The shell IS the .rt-panel-stage (matte + 12px pad/gap; wrap
   padding zeroed so the stage owns it). Header/KPI strip/pinned rail = glass
   .rt-panel chrome; the main widget grid = a growing solid content panel. The
   panels get their own internal padding here (the bare-zone 0 2px insets are
   absorbed into the panel padding). */
.dashboard-shell.rt-panel-stage{padding:12px;gap:12px;min-height:100%;box-sizing:border-box}
.dash-panel-header{padding:14px 18px}
.dash-panel-kpi{padding:14px 16px}
.dash-panel-main{padding:16px;display:flex;flex-direction:column;min-width:0}
.dash-panel-main > .dashboard-grid{flex:1}
/* The pinned left rail becomes its own labelled glass panel. The panel wraps a
   small 'Pinned' label + the existing card column. It hides when there is
   nothing pinned (toggled in JS) and at ≤1024 where the rail collapses. */
.dash-panel-pinned{display:flex;flex-direction:column;gap:8px;padding:12px;min-width:0;align-self:start}
.dash-panel-pinned.dash-pinned-empty{display:none}
.dash-pinned-label{display:flex;align-items:center;gap:6px;font:600 11px/1 -apple-system,"SF Pro Text",system-ui,sans-serif;
  text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted);padding:2px 2px 4px;margin:0}
.dash-pinned-label svg{width:12px;height:12px;opacity:.7}
@media (max-width:1024px){.dash-panel-pinned{display:none}}
.dashboard-header{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px}
.dashboard-title{font-size:26px;font-weight:800;letter-spacing:-.8px;color:var(--on-app-bg);margin:0;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;line-height:1.1}
.dashboard-subtitle{font-size:12px;color:var(--text-muted);margin-top:2px;letter-spacing:-.05px}
/* 2026-05-31 📘 — Controls are a self-contained, right-aligned cluster that can
   shrink + wrap WITHIN its own box. Previously the inner wrapper used
   display:contents, which dissolved the controls into the header's
   `justify-content:space-between` flex → the trailing ones (Me input / Reset
   layout) bled ~176px off the right edge at EVERY width >1024 (desktop AND
   iPad-landscape, which is RT's primary iPad orientation). Containing them here
   is the real fix; the ≤1024 + ≤640 disclosure collapses still apply below. */
.dashboard-controls{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px;min-width:0;max-width:100%}
/* V77.2 — Dashboard controls "more" disclosure. On wide screens everything is
   inline (now as a contained cluster). On phones (≤640) + tablets/iPad-portrait
   (≤1024) the Cozy/Compact + Me + Reset controls collapse into an Apple-style
   Settings disclosure to reclaim vertical chrome and keep the header tidy. */
.dash-controls-more{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
.dash-controls-more > summary{display:none}
.dash-controls-more > .dash-controls-more-inner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
/* 2026-05-31 📘 — iPad (641–1024px) was stranded between the desktop default
   (all controls inline) and the ≤640px collapse, so the Cozy/Compact + Me +
   Reset-layout controls bled off the right edge unreachably. Give tablets the
   same Settings-disclosure collapse the phone gets (the V77.2 pattern), with
   the inner controls in an anchored popover so the header never grows. */
@media (min-width:641px) and (max-width:1024px){
  .dashboard-controls{position:relative;flex-wrap:nowrap}
  .dash-controls-more{display:block;flex:0 0 auto;position:relative}
  .dash-controls-more > summary{
    display:inline-flex;align-items:center;gap:6px;
    list-style:none;cursor:pointer;
    background:var(--chrome-bg);border:0.5px solid var(--chrome-border);
    border-radius:var(--radius-pill);
    padding:6px 12px;height:32px;
    font-size:13px;font-weight:500;color:var(--text-primary);
    letter-spacing:-.1px;font-family:inherit;
    -webkit-tap-highlight-color:transparent;
  }
  .dash-controls-more > summary::-webkit-details-marker{display:none}
  .dash-controls-more > summary:active{background:color-mix(in srgb, var(--text-primary) 9%, transparent)}
  .dash-controls-more[open] > summary{background:var(--chrome-bg)}
  /* Anchored dropdown panel — doesn't widen or grow the header row. */
  .dash-controls-more > .dash-controls-more-inner{
    display:none;
    position:absolute;top:calc(100% + 6px);right:0;z-index:var(--z-popover);
    flex-direction:column;gap:var(--space-2);
    min-width:200px;padding:10px;
    background:var(--card-bg);border:0.5px solid var(--chrome-border);
    border-radius:var(--radius-md);box-shadow:var(--shadow-e4);
  }
  .dash-controls-more[open] > .dash-controls-more-inner{display:flex}
  .dash-controls-more .dash-density-toggle{align-self:stretch;justify-content:center}
  .dash-controls-more .dash-me-label{justify-content:space-between}
  .dash-controls-more .dash-me-label input{flex:1 1 auto;min-width:0}
}
.dash-me-label{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted)}
.dash-me-label input{background:var(--chrome-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-sm);padding:5px 9px;font-size:12px;color:var(--text-primary);font-family:inherit;letter-spacing:-.05px;outline:none}
.dash-me-label input:focus{background:var(--card-bg);border-color:color-mix(in srgb,var(--app-accent) 50%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 15%,transparent)}
/* V39kk — dash-reset-btn: Apple press feedback */
.dash-reset-btn{background:var(--chrome-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-sm);padding:5px 10px;font-size:12px;font-weight:500;color:var(--text-primary);cursor:pointer;font-family:inherit;letter-spacing:-.05px;transition:background var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast);outline:none}
.dash-reset-btn:hover{background:var(--chrome-bg-hover);border-color:var(--border-strong)}
.dash-reset-btn:active{transform:scale(.97)}
.dash-reset-btn:focus-visible{outline:none;border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--app-accent) 22%, transparent)}
.dash-density-toggle{display:inline-flex;background:var(--surface-2);border-radius:var(--radius-sm);padding:2px;gap:1px;border:0.5px solid var(--chrome-border)}
/* V39iiiii — dash-density-btn press feedback */
.dash-density-btn{background:transparent;border:none;font-size:11.5px;font-weight:500;letter-spacing:-.05px;padding:4px 10px;border-radius:var(--radius-sm);cursor:pointer;color:var(--text-muted);font-family:inherit;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast)}
.dash-density-btn.active{background:var(--card-bg);color:var(--text-primary);box-shadow:0 1px 2px rgba(0,0,0,.05),0 0 0 0.5px rgba(0,0,0,.04);font-weight:600}
.dash-density-btn:hover:not(.active){color:var(--text-primary)}
.dash-density-btn:active:not(.active){transform:scale(.97)}
.dash-layout-select{background:var(--chrome-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-sm);padding:5px 22px 5px 10px;font-size:12px;font-weight:500;color:var(--text-primary);cursor:pointer;font-family:inherit;letter-spacing:-.05px;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238e8e93'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 7px center;min-width:180px;transition:background var(--motion-fast),border-color var(--motion-fast)}
.dash-layout-select:hover{background-color:var(--chrome-bg-hover)}
.dash-customize-btn{background:var(--chrome-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-sm);padding:5px 12px;font-size:12px;font-weight:500;color:var(--text-primary);cursor:pointer;font-family:inherit;letter-spacing:-.05px;transition:background var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast);outline:none}
.dash-customize-btn:hover{background:var(--chrome-bg-hover);border-color:var(--border-strong)}
.dash-customize-btn:focus-visible{outline:none;border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--app-accent) 22%, transparent)}
.dash-customize-btn.active{background:var(--app-accent);color:var(--on-accent);border-color:var(--app-accent)}
/* E1 — Cancel (discard draft) button: quiet secondary next to the active Customize/Save. */
.dash-cancel-edit-btn{background:var(--chrome-bg);color:var(--text-secondary,var(--text-primary));border-color:var(--chrome-border)}
.dash-cancel-edit-btn:hover{background:var(--chrome-bg-hover);color:var(--text-primary);border-color:var(--border-strong)}
/* Fix 5: jiggle animation for edit mode — like iOS icon jiggle */
@keyframes dash-jiggle {
  0%,100%{transform:rotate(0deg)}
  20%{transform:rotate(-0.4deg)}
  60%{transform:rotate(0.4deg)}
}
/* Fix 3: pulse animation so resize handle catches the eye when edit mode turns on */
@keyframes dash-resize-pulse {
  0%{opacity:.4;transform:scale(.8)}
  60%{opacity:1;transform:scale(1.15)}
  100%{opacity:1;transform:scale(1)}
}
.dashboard-shell.dash-edit-mode{background:color-mix(in srgb,var(--app-accent) 3%,transparent)}
/* V34c — "Reset to recommended" button: visible only in edit mode. */
.dash-reset-recommended{display:none}
.dashboard-shell.dash-edit-mode .dash-reset-recommended{display:inline-flex}
.dashboard-shell.dash-edit-mode .dash-card{outline:1.5px dashed color-mix(in srgb,var(--app-accent) 50%,transparent);outline-offset:-1px}
/* In edit mode disable dense auto-flow so widgets don't jump to backfill
   gaps when a card is lifted — the placeholder holds the slot instead. */
.dashboard-shell.dash-edit-mode .dashboard-grid{grid-auto-flow:row}
/* Fix 5: jiggle cards in edit mode */
.dashboard-shell.dash-edit-mode .dash-card{animation:dash-jiggle 2s ease-in-out infinite}
.dashboard-shell.dash-edit-mode .dash-card:active{animation:none}
.dash-widget-remove{position:absolute;top:6px;right:6px;width:22px;height:22px;border:none;background:color-mix(in srgb,var(--app-danger) 90%,transparent);color:var(--on-accent);border-radius:50%;cursor:pointer;display:none;align-items:center;justify-content:center;font-size:13px;line-height:1;z-index:5;transition:transform var(--motion-fast),opacity var(--motion-fast)}
.dash-widget-remove:hover{opacity:.88}
.dash-widget-remove:active{transform:scale(.92)}
.dashboard-shell.dash-edit-mode .dash-widget-remove{display:inline-flex}
/* Fix 3: resize handle — larger, visible grip with SVG lines, accent-tinted corner */
.dash-widget-resize{position:absolute;bottom:0;right:0;width:32px;height:32px;cursor:nwse-resize;display:none;z-index:5;touch-action:none;background:color-mix(in srgb,var(--app-accent) 15%,transparent);border-radius:var(--radius-lg) 0 var(--radius-lg) 0;align-items:center;justify-content:center}
.dashboard-shell.dash-edit-mode .dash-widget-resize{display:flex;animation:dash-resize-pulse .5s ease-out both}
.dashboard-shell.dash-edit-mode .dash-card{position:relative}
/* Fix 4: resize size badge */
.dash-resize-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:color-mix(in srgb,var(--app-accent) 90%,transparent);color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:var(--radius-md);pointer-events:none;z-index:10;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.25);letter-spacing:-.1px}
.dash-add-widget-row{display:flex;justify-content:flex-start;padding:0 2px}
.dash-add-widget-btn{background:color-mix(in srgb,var(--app-accent) 10%,transparent);color:var(--app-accent);border:0.5px dashed color-mix(in srgb,var(--app-accent) 50%,transparent);border-radius:var(--radius-md);padding:10px 14px;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;letter-spacing:-.05px;transition:background var(--motion-fast),border-color var(--motion-fast)}
.dash-add-widget-btn:hover{background:color-mix(in srgb,var(--app-accent) 18%,transparent);border-color:var(--app-accent)}
.dash-gallery-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:var(--z-modal-backdrop);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity var(--motion-base)}
.dash-gallery-overlay.visible{opacity:1}
.dash-gallery{background:var(--card-bg);border-radius:var(--radius-lg);width:780px;max-width:100%;max-height:88svh;display:flex;flex-direction:column;border:0.5px solid var(--chrome-border);box-shadow:0 24px 64px rgba(0,0,0,.25)}
.dash-gallery-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:0.5px solid var(--chrome-border)}
.dash-gallery-head h3{margin:0;font-size:16px;font-weight:700;letter-spacing:-.2px;color:var(--text-primary)}
.dash-gallery-close{background:var(--surface-2);border:none;width:28px;height:28px;border-radius:50%;cursor:pointer;color:var(--text-muted);display:inline-flex;align-items:center;justify-content:center;transition:background var(--motion-fast),transform var(--motion-fast)}
.dash-gallery-close:hover{background:var(--surface-3);color:var(--text-primary)}
.dash-gallery-close:active{transform:scale(.92)}
.dash-gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:16px;overflow-y:auto}
@media (max-width: 640px) {.dash-gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 480px) {.dash-gallery-grid{grid-template-columns:minmax(0,1fr)}}
.dash-gallery-tile{background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);padding:14px;cursor:pointer;text-align:left;font-family:inherit;transition:border-color var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast)}
.dash-gallery-tile:hover{border-color:var(--app-accent);box-shadow:0 4px 12px rgba(0,0,0,.05);transform:translateY(-1px)}
.dash-gallery-tile.added{opacity:.7}
.dgt-title{font-size:13.5px;font-weight:600;color:var(--text-primary);margin-bottom:4px}
.dgt-desc{font-size:11.5px;color:var(--text-muted);line-height:1.4}
.dgt-added{font-size:10px;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 14%,transparent);padding:1px 6px;border-radius:var(--radius-sm);font-weight:600;margin-left:4px}
/* Card action buttons (settings) — hidden in view mode, shown in edit mode */
.dash-card-actions{display:none}
.dashboard-shell.dash-edit-mode .dash-card-actions{display:inline-flex;align-items:center;gap:4px}
.dash-settings-btn{background:transparent;border:none;color:var(--text-muted);cursor:pointer;font-size:12px;padding:4px 6px;border-radius:var(--radius-xs);line-height:1;transition:color var(--motion-fast),background var(--motion-fast)}
.dash-settings-btn:hover{background:var(--surface-2);color:var(--app-accent)}
/* V35b — Template version history rows. */
.dt-history-row{display:flex;align-items:center;gap:12px;padding:12px 18px;border-top:0.5px solid var(--chrome-border)}
.dt-history-row:first-child{border-top:none}
/* P4 — file version side-by-side compare. */
.fcmp-overlay{position:fixed;inset:0;z-index:10050;background:rgba(0,0,0,.42);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;padding:3vh 3vw}
@media (prefers-reduced-transparency:reduce){.fcmp-overlay{backdrop-filter:none;-webkit-backdrop-filter:none}}
.fcmp-modal{width:min(96vw,1100px);height:min(90svh,760px);display:flex;flex-direction:column;background:var(--card-bg);border:.5px solid var(--chrome-border);border-radius:var(--radius-lg,16px);box-shadow:var(--shadow-e5);overflow:hidden}
.fcmp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:.5px solid var(--chrome-border)}
.fcmp-title{font-weight:700;font-size:14px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fcmp-x{width:30px;height:30px;border:0;background:transparent;border-radius:8px;color:var(--text-muted);cursor:pointer;font-size:14px;flex-shrink:0}
.fcmp-x:hover{background:var(--hover-overlay,rgba(0,0,0,.06));color:var(--text-primary)}
.fcmp-body{flex:1;min-height:0;display:flex;gap:1px;background:var(--chrome-border)}
.fcmp-pane{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--surface)}
.fcmp-label{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);padding:8px 12px;border-bottom:.5px solid var(--chrome-border);flex-shrink:0}
.fcmp-frame{flex:1;min-height:0;width:100%;border:0;background:#fff}
.fcmp-noinline{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--text-muted);font-size:13px;text-align:center;padding:20px}
@media(max-width:720px){.fcmp-body{flex-direction:column}}
.dt-history-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dt-history-row-title{font-size:13px;font-weight:600;color:var(--text-primary)}
.dt-history-row-meta{font-size:11.5px;color:var(--text-muted)}
.dt-history-row-actions{display:flex;gap:6px;flex:0 0 auto}

/* V34a — Dashboard nav badge: small accent-red dot when "Needs you" has items.
   Lives on #btnDashboard (desktop top-nav) + .mtab[data-view="dashboard"] (mobile tabbar).
   Position absolute relative to the parent button (which is position:relative by default
   for .view-btn but not .mtab — handled per-rule). */
#btnDashboard{position:relative}
.mtab[data-view="dashboard"]{position:relative}
.dash-nav-dot{position:absolute;top:4px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--app-danger);box-shadow:0 0 0 1.5px var(--header-shade,var(--card-bg));pointer-events:none}
.mtab[data-view="dashboard"] .dash-nav-dot{top:3px;right:calc(50% - 14px);box-shadow:0 0 0 1.5px var(--card-bg)}
/* V33a — "Needs you" inbox card above the KPI strip. */
/* V126 — card sizes to content (was inheriting .dash-card min-height:180px,
   which left dead whitespace below a short 3-row list, esp. on iPad). */
/* Pass-2 — the Needs-you lane is the most-elevated surface (proto nyn-surf): the
   command lane that turns the pile into action. Deeper shadow + larger radius so
   it reads above the cockpit + widget grid. Per the hard rule there is NO colored
   edge-strip — urgency is signaled by the count pill + per-row flag chips. */
/* Pass-2 — the urgent command lane reads warm via a soft full-surface red TINT (contained
   fill, not an edge-strip): a faint red-mixed material + warm-tinted border. Marks it as
   "needs you" without a colored spine on the card edge (honors the no-edge-strip rule). */
.dash-needs-card{position:relative;margin-bottom:0;min-height:0;border-radius:20px;overflow:hidden;background:linear-gradient(160deg,color-mix(in srgb,var(--color-error) 6%,var(--card-bg)),color-mix(in srgb,var(--color-error) 2.5%,var(--card-bg)));border:0.5px solid color-mix(in srgb,var(--color-error) 14%,var(--chrome-border));box-shadow:var(--bevel-top),0 24px 56px -26px rgba(20,30,48,.42),0 10px 26px -16px rgba(20,30,48,.28)}
.dash-needs-card .dash-card-title{padding:13px 16px}
/* In-grid Needs-you: the title text doubles as the slide-over trigger when there's more. */
.dash-needs-grid-title{display:inline-flex;align-items:center}
.dash-needs-grid-title.has-more{cursor:pointer;border-radius:999px;transition:color var(--motion-fast)}
.dash-needs-grid-title.has-more:hover{color:var(--app-accent)}
.dash-needs-grid-title .dash-needs-head-chev{width:14px;height:14px;color:var(--text-muted)}
.dash-needs-card .dash-needs-count{background:color-mix(in srgb,var(--color-error) 13%,transparent);color:var(--color-error)}
.dash-needs-card .dash-needs-row{padding:12px 16px;gap:13px}
.dash-needs-card .dash-needs-row:hover{transform:none}
/* V126 — title is now a button that opens the slide-over (all viewports);
   strip button chrome. Count + chevron group hard-right via .dash-needs-head-trail. */
.dash-needs-head{width:100%;border:none;background:transparent;font-family:inherit;text-align:left;cursor:pointer;transition:background var(--motion-fast)}
.dash-needs-head[disabled]{cursor:default}
.dash-needs-head.has-more:hover{background:color-mix(in srgb,var(--text-primary) 3%,transparent)}
.dash-needs-head.has-more:active{background:color-mix(in srgb,var(--text-primary) 5%,transparent)}
.dash-needs-head-trail{display:inline-flex;align-items:center;gap:6px}
.dash-needs-head-chev{width:15px;height:15px;color:var(--text-muted);flex:0 0 15px}
.dash-needs-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent);font-size:11.5px;font-weight:600;letter-spacing:-.1px}
.dash-needs-list{display:flex;flex-direction:column}
.dash-needs-row{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;border:none;background:transparent;text-align:left;cursor:pointer;border-top:0.5px solid var(--chrome-border);transition:background var(--motion-fast)}
.dash-needs-row:first-child{border-top:none}
.dash-needs-row:hover{background:var(--chrome-bg-hover,color-mix(in srgb,var(--text-primary) 4%,transparent));border-radius:10px}
.dash-needs-row:active{background:color-mix(in srgb,var(--text-primary) 7%,transparent);border-radius:10px}
/* Pass-2 — tone-flag icon chip (contained rounded fill, NOT an edge-strip). */
.dash-needs-flag{width:34px;height:34px;flex:0 0 34px;border-radius:11px;display:grid;place-items:center;background:var(--surface-2)}
.dash-needs-flag svg{width:16px;height:16px;color:var(--text-secondary)}
.dash-needs-flag.tone-red{background:var(--color-error-bg,color-mix(in srgb,var(--color-error) 14%,var(--card-bg)))}
.dash-needs-flag.tone-red svg{color:var(--color-error)}
.dash-needs-flag.tone-amber{background:var(--color-warning-bg,color-mix(in srgb,var(--color-warning) 16%,var(--card-bg)))}
.dash-needs-flag.tone-amber svg{color:var(--color-warning)}
.dash-needs-flag.tone-blue{background:var(--color-info-bg,color-mix(in srgb,var(--color-info) 15%,var(--card-bg)))}
.dash-needs-flag.tone-blue svg{color:var(--color-info)}
/* due pill — trails the row, tone matches urgency. */
.dash-needs-due{font-size:10px;font-weight:800;letter-spacing:.04em;padding:3px 9px;border-radius:999px;white-space:nowrap;flex:0 0 auto}
.dash-needs-due.over{background:color-mix(in srgb,var(--color-error) 13%,var(--card-bg));color:var(--color-error)}
.dash-needs-due.today{background:color-mix(in srgb,var(--color-warning) 16%,var(--card-bg));color:#7a4d00}
.dash-needs-due.soon{background:color-mix(in srgb,var(--color-info) 14%,var(--card-bg));color:var(--color-info)}
.dash-needs-row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dash-needs-row-main{font-size:13.5px;font-weight:600;color:var(--text-primary);letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-needs-row-meta{font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-needs-row-chev{width:14px;height:14px;color:var(--text-muted);flex:0 0 14px}
/* V34b — snooze chip on each Needs-you row. Hover-revealed on desktop; always
   visible on mobile so it's tap-reachable. */
.dash-needs-row-snooze{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius-md);color:var(--text-muted);opacity:0;transition:opacity var(--motion-base),background var(--motion-base),color var(--motion-base);flex:0 0 32px;cursor:pointer}
.dash-needs-row-wrap:hover .dash-needs-row-snooze,
.dash-needs-row-snooze:focus-visible{opacity:1}
.dash-needs-row-snooze:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent)}
@media (max-width:640px){
  .dash-needs-card .dash-card-title{padding:12px 14px}
  .dash-needs-row{padding:12px 14px;min-height:44px}
  .dash-needs-row-main{font-size:14px}
  /* On mobile, always show the snooze chip — no hover state on touch. */
  .dash-needs-row-snooze{opacity:1;width:44px;height:44px;flex:0 0 44px}
  /* V126 — header is a comfortable tap target on mobile (opens the slide-over). */
  .dash-needs-head{min-height:44px}
}
/* V126 — Needs-you mobile full-page slide-over (right→in, ‹ Back bar). Mirrors
   the admin drill-over vocabulary (fixed, translateX, spring, body-relative). */
.needs-sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.32);opacity:0;transition:opacity var(--motion-base);z-index:var(--z-modal,1250);pointer-events:none}
.needs-sheet-backdrop.open{opacity:1;pointer-events:auto}
.needs-sheet{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);background:var(--card-bg);z-index:calc(var(--z-modal,1250) + 1);transform:translateX(100%);transition:transform var(--motion-base) var(--ease-spring);display:flex;flex-direction:column;overflow:hidden}
.needs-sheet.open{transform:translateX(0);box-shadow:-16px 0 48px rgba(0,0,0,.28),inset 1px 0 0 rgba(255,255,255,.08)}
.needs-sheet-backbar{display:flex;align-items:center;gap:8px;width:100%;padding:14px 16px;padding-top:max(14px,env(safe-area-inset-top));border:none;border-bottom:0.5px solid var(--chrome-border);background:var(--card-bg);color:var(--text-primary);font-family:inherit;font-size:17px;font-weight:700;letter-spacing:-.3px;cursor:pointer;position:sticky;top:0;z-index:1}
.needs-sheet-back-ico{width:18px;height:18px;color:var(--app-accent);flex:0 0 18px}
.needs-sheet-count{margin-left:auto}
.needs-sheet-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:max(8px,env(safe-area-inset-bottom))}
/* V33b — Quick-actions row under the KPI strip. */
.dash-quick-actions{display:flex;gap:8px;flex-wrap:wrap;padding:2px 2px}
/* V77.2 — Quick-action tiles get the EXACT same shadow stack as .dash-card
   (incl. the inset ring as the 4th layer). Drop the legacy hairline border in
   favor of the inset ring. */
/* 2026-05-31 📘 — real depth + reaction (was flat --shadow-e1, hover set border
   on a border:none el = no-op, and two conflicting :active rules killed the
   press). Now: bevel + e2 rest, lifts to e3 + accent glow on hover, presses
   down with a scale on :active — matches the app material/press baseline. */
.dash-quick-action{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:var(--surface-grad);border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);color:var(--text-primary);font-size:13px;font-weight:600;letter-spacing:-.1px;cursor:pointer;font-family:inherit;transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-base),border-color var(--motion-fast);box-shadow:var(--bevel-top),var(--shadow-e2)}
.dash-quick-action:hover{background:color-mix(in srgb,var(--app-accent) 7%,var(--card-bg));border-color:color-mix(in srgb,var(--app-accent) 30%,var(--chrome-border));box-shadow:var(--bevel-top),var(--shadow-e3),var(--glow-accent-soft);transform:translateY(-1px)}
.dash-quick-action:active{transform:translateY(0) scale(.97);box-shadow:var(--bevel-top),var(--shadow-e1)}
.dash-quick-ico{width:13px;height:13px;color:var(--app-accent)}
@media (max-width:640px){
  .dash-quick-actions{gap:6px}
  .dash-quick-action{padding:10px 14px;font-size:14px;flex:1;justify-content:center;min-height:44px}
}
.dash-kpi-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.dashboard-shell[data-dash-density="compact"] .dash-kpi-strip{gap:8px}
/* 2026-06-20 — HERO KPI strip: when a hero tile leads, switch to a flex track so the
   hero commands a wider, taller footprint (36–40px metric) and the secondary tiles
   flow beside it, wrapping under as needed. The hero is left-pinned (source order). */
.dash-kpi-strip:has(.dash-kpi-hero){display:flex;flex-wrap:wrap;align-items:stretch}
.dash-kpi-strip:has(.dash-kpi-hero) .dash-kpi{flex:1 1 150px;min-width:140px}
.dash-kpi-hero{flex:2 1 280px!important;min-width:260px!important;padding:18px 22px!important;background:linear-gradient(155deg,color-mix(in srgb,var(--app-accent) 12%,var(--card-bg)),color-mix(in srgb,var(--app-accent) 5%,var(--card-bg)))!important;box-shadow:var(--bevel-top),var(--shadow-e3)!important}
.dash-kpi-hero .dash-kpi-ico{width:46px;height:46px;flex-basis:46px;border-radius:13px}
.dash-kpi-hero .dash-kpi-ico svg{width:22px;height:22px}
.dash-kpi-hero .dash-kpi-n{font-size:40px!important;letter-spacing:-1.8px!important;line-height:1}
.dash-kpi-hero .dash-kpi-l{font-size:12px}
.dash-kpi-hero .dash-kpi-hero-kicker{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--app-accent);margin-bottom:2px}
.dash-kpi-hero.alert .dash-kpi-hero-kicker{color:var(--color-error)}
.dash-kpi-hero.warn .dash-kpi-hero-kicker{color:var(--color-warning)}
.dash-kpi-hero.alert{background:linear-gradient(155deg,color-mix(in srgb,var(--color-error) 14%,var(--card-bg)),color-mix(in srgb,var(--color-error) 5%,var(--card-bg)))!important}
.dash-kpi-hero.warn{background:linear-gradient(155deg,color-mix(in srgb,var(--color-warning) 14%,var(--card-bg)),color-mix(in srgb,var(--color-warning) 5%,var(--card-bg)))!important}
.dash-kpi-hero:hover{box-shadow:var(--bevel-top),var(--shadow-e4),var(--glow-accent-soft)!important;transform:translateY(-3px)}
.dashboard-shell[data-dash-density="compact"] .dash-kpi-hero{padding:13px 16px!important}
.dashboard-shell[data-dash-density="compact"] .dash-kpi-hero .dash-kpi-n{font-size:32px!important}
@media (max-width:640px){.dash-kpi-strip:has(.dash-kpi-hero) .dash-kpi{flex:1 1 calc(50% - 5px)}.dash-kpi-hero{flex:1 1 100%!important;min-width:0!important}.dash-kpi-hero .dash-kpi-n{font-size:34px!important}}
/* V77.2 — KPI tiles get the EXACT same shadow stack as .dash-card (incl. the
   0.5px inset ring as the 4th layer) so the upper KPI grid reads at the same
   depth tier as the bigger widget cards below. Also drop the legacy hairline
   border in favor of the inset ring — was double-stacking with the new ring. */
/* V82 — KPI strip tiles: theme-adaptive e2 elevation, gradient surface, bold
   display number with accent-graded text, semantic problem/positive states. */
/* V132 — KPI tiles: premium gradient + crisp bevel rim at rest; on hover they
   lift with an accent-glow halo so the headline metrics feel lit and tappable. */
.dash-kpi{border:none;border-radius:var(--radius-lg);padding:14px 16px;display:flex;flex-direction:column;gap:3px;cursor:pointer;transition:box-shadow var(--motion-base) ease,transform var(--motion-fast) var(--ease-spring),background var(--motion-base);text-align:left;text-decoration:none;color:var(--text-primary);box-shadow:var(--bevel-top),var(--shadow-e2);
  background:var(--surface-grad)}
.dash-kpi:hover{box-shadow:var(--bevel-top),var(--shadow-e3),var(--glow-accent-soft);transform:translateY(-2px);background:var(--surface-grad-hover)}
.dash-kpi:active{transform:translateY(0) scale(.995);box-shadow:var(--bevel-top),var(--shadow-e1)}
.dash-kpi-n{font:700 34px/1 -apple-system,"SF Pro Display",system-ui,sans-serif;letter-spacing:-1.4px;font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg, var(--text-primary), color-mix(in srgb, var(--text-primary) 68%, var(--app-accent)));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--text-primary)}
.dashboard-shell[data-dash-density="compact"] .dash-kpi{padding:10px 12px}
.dashboard-shell[data-dash-density="compact"] .dash-kpi-n{font-size:26px;letter-spacing:-1px}
.dash-kpi-l{font:500 11px/1.4 -apple-system,"SF Pro Text",system-ui,sans-serif;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}
/* 2026-06-05 — real period-over-period trend chip. Arrow = raw movement; color = whether
   that movement is GOOD for this KPI (good=green, bad=red). Only rendered when a real prior
   snapshot delta exists (honest-omit). */
.dash-kpi-trend{display:inline-flex;align-items:center;gap:3px;margin-top:3px;font-size:11px;font-weight:700;letter-spacing:-.1px;font-variant-numeric:tabular-nums;width:fit-content}
.dash-kpi-trend.good{color:var(--color-success,#137a4b)}
.dash-kpi-trend.bad{color:var(--color-error,#c0392b)}
.dash-kpi.alert .dash-kpi-n{background:none;-webkit-text-fill-color:var(--color-error);color:var(--color-error)}
.dash-kpi.warn  .dash-kpi-n{background:none;-webkit-text-fill-color:var(--color-warning);color:var(--color-warning)}
.dash-kpi.ok    .dash-kpi-n{background:none;-webkit-text-fill-color:var(--color-success);color:var(--color-success)}
.dash-kpi.alert{background:linear-gradient(145deg, color-mix(in srgb, var(--color-error) 9%, var(--card-bg)), color-mix(in srgb, var(--color-error) 4%, var(--card-bg)))}
.dash-kpi.warn {background:linear-gradient(145deg, color-mix(in srgb, var(--color-warning) 9%, var(--card-bg)), color-mix(in srgb, var(--color-warning) 4%, var(--card-bg)))}
.dash-kpi.ok   {background:linear-gradient(145deg, color-mix(in srgb, var(--color-success) 9%, var(--card-bg)), color-mix(in srgb, var(--color-success) 4%, var(--card-bg)))}
/* Pass-2 cockpit metric-door: row layout with a tone-tinted icon chip leading the
   value+label. Chip is a contained rounded fill (NOT an edge-strip). */
.dash-kpi-door{flex-direction:row;align-items:center;gap:12px}
.dash-kpi-door .dash-kpi-body{display:flex;flex-direction:column;gap:3px;min-width:0}
/* 2026-06-05 📘 — KPI icon chips read as fully tone-tinted tiles (proto pass-2): a richer
   tone-colored fill with a faint same-tone ring + soft glow, white-ish glyph reads on top.
   Was a faint 14% wash that looked grey. */
.dash-kpi-ico{width:38px;height:38px;flex:0 0 38px;border-radius:11px;display:grid;place-items:center;background:var(--surface-2);box-shadow:var(--bevel-top)}
.dash-kpi-ico svg{width:18px;height:18px;color:var(--text-secondary)}
.dash-kpi-ico.tone-accent{background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 30%,var(--card-bg)),color-mix(in srgb,var(--app-accent) 20%,var(--card-bg)));box-shadow:var(--bevel-top),inset 0 0 0 .5px color-mix(in srgb,var(--app-accent) 35%,transparent),0 3px 8px -4px color-mix(in srgb,var(--app-accent) 45%,transparent)}
.dash-kpi-ico.tone-accent svg{color:color-mix(in srgb,var(--app-accent) 80%,#000)}
.dash-kpi-ico.tone-ok{background:linear-gradient(160deg,color-mix(in srgb,var(--color-success) 30%,var(--card-bg)),color-mix(in srgb,var(--color-success) 20%,var(--card-bg)));box-shadow:var(--bevel-top),inset 0 0 0 .5px color-mix(in srgb,var(--color-success) 35%,transparent),0 3px 8px -4px color-mix(in srgb,var(--color-success) 45%,transparent)}
.dash-kpi-ico.tone-ok svg{color:color-mix(in srgb,var(--color-success) 78%,#000)}
.dash-kpi-ico.tone-info{background:linear-gradient(160deg,color-mix(in srgb,var(--color-info) 30%,var(--card-bg)),color-mix(in srgb,var(--color-info) 20%,var(--card-bg)));box-shadow:var(--bevel-top),inset 0 0 0 .5px color-mix(in srgb,var(--color-info) 35%,transparent),0 3px 8px -4px color-mix(in srgb,var(--color-info) 45%,transparent)}
.dash-kpi-ico.tone-info svg{color:color-mix(in srgb,var(--color-info) 80%,#000)}
.dash-kpi-ico.tone-error{background:linear-gradient(160deg,color-mix(in srgb,var(--color-error) 30%,var(--card-bg)),color-mix(in srgb,var(--color-error) 20%,var(--card-bg)));box-shadow:var(--bevel-top),inset 0 0 0 .5px color-mix(in srgb,var(--color-error) 35%,transparent),0 3px 8px -4px color-mix(in srgb,var(--color-error) 45%,transparent)}
.dash-kpi-ico.tone-error svg{color:color-mix(in srgb,var(--color-error) 80%,#000)}
.dash-kpi-ico.tone-warn{background:linear-gradient(160deg,color-mix(in srgb,var(--color-warning) 32%,var(--card-bg)),color-mix(in srgb,var(--color-warning) 22%,var(--card-bg)));box-shadow:var(--bevel-top),inset 0 0 0 .5px color-mix(in srgb,var(--color-warning) 38%,transparent),0 3px 8px -4px color-mix(in srgb,var(--color-warning) 45%,transparent)}
.dash-kpi-ico.tone-warn svg{color:color-mix(in srgb,var(--color-warning) 82%,#000)}
.dashboard-shell[data-dash-density="compact"] .dash-kpi-ico{width:32px;height:32px;flex-basis:32px;border-radius:9px}
.dashboard-shell[data-dash-density="compact"] .dash-kpi-ico svg{width:15px;height:15px}
.dash-kpi-door .dash-kpi-n{font-size:28px;letter-spacing:-1.1px}
.dashboard-shell[data-dash-density="compact"] .dash-kpi-door .dash-kpi-n{font-size:23px}
/* 2026-06-24 📘 — KPI trend sparkline: trailing trend tail pushed to the tile's right
   edge, vertically centered. Real captured series only (No-Static-Visuals). Subtle by
   default, lifts to full opacity on hover so the value stays the hero. Auto-hides where
   the tile gets too narrow to avoid crowding the metric (door tiles bottom out at
   ~140px min-width, which the strip hits around the 860px band with 4-5 tiles — hide
   there, not at 640, so the 28px value never overlaps the 64px spark on tablet portrait).
   The value also gets ellipsis/min-width:0 safety so it degrades cleanly if it ever does
   share a too-narrow row. */
.dash-kpi-spark{margin-left:auto;display:inline-flex;align-items:center;flex:0 0 auto;opacity:.72;transition:opacity var(--motion-base) ease}
.dash-kpi:hover .dash-kpi-spark{opacity:1}
.dash-kpi-spark .rpt-spark{display:block}
.dash-kpi-door:has(.dash-kpi-spark) .dash-kpi-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.dashboard-shell[data-dash-density="compact"] .dash-kpi-spark{display:none}
@media (max-width:860px){.dash-kpi-spark{display:none}}
/* item #23 — thin trend spark in the value/labor/portfolio widget TITLES. Like .dash-kpi-spark but
   without margin-left:auto so it sits inline after the title text + count (the title is flex:1). */
.dash-wt-spark{display:inline-flex;align-items:center;flex:0 0 auto;opacity:.66;transition:opacity var(--motion-base) ease}
.dash-card:hover .dash-wt-spark{opacity:1}
.dash-wt-spark .rpt-spark{display:block}
@media (max-width:860px){.dash-wt-spark{display:none}}
.dash-rails{display:grid;grid-template-columns:280px minmax(0,1fr);gap:12px;flex:1;min-height:0}
/* When the pinned panel is hidden (nothing pinned / ≤1024 collapse), let the main
   grid span the full width instead of reserving an empty 280px track. */
.dash-rails:has(.dash-pinned-empty){grid-template-columns:minmax(0,1fr)}
.dashboard-shell[data-dash-density="compact"] .dash-rails{gap:10px}
.dash-rail-left{display:flex;flex-direction:column;gap:10px;min-width:0}
.dashboard-shell[data-dash-density="compact"] .dash-rail-left{gap:8px}
.dashboard-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(220px,auto);grid-auto-flow:dense;gap:12px;align-content:start;min-width:0}
.dashboard-shell[data-dash-density="compact"] .dashboard-grid{grid-auto-rows:minmax(180px,auto);gap:10px}
/* V133 (2026-06-20) — iPad-landscape tier (1180/1194/1366 real device widths):
   the 4-col desktop grid leaves widgets too narrow once the 280px Pinned rail is
   present at iPad widths. Drop to 3 columns between desktop (≥1181, 4-col) and
   tablet (≤1024, 2-col). MUST precede the ≤1024 rule so the 2-col tier still
   wins below 1024 (both max-width rules match there; source order decides). */
@media (max-width: 1180px) {.dashboard-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width: 1024px) {.dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dash-rails{grid-template-columns:minmax(0,1fr)}.dash-rail-left{display:none}}
@media (max-width: 640px) {.dashboard-grid{grid-template-columns:minmax(0,1fr)}.dash-kpi-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* On <1100px, render previously-pinned widgets at the top of main grid (handled in JS render path) */

.dash-counts{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;margin-bottom:14px}
/* V82 — KPI tiles: e2 elevation (theme-adaptive), gradient surface, hover lift */
.dash-stat{border-radius:var(--radius-lg);padding:14px 16px;box-shadow:var(--shadow-e2);display:flex;flex-direction:column;gap:3px;text-align:left;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast) ease;
  background:linear-gradient(145deg, var(--card-bg), color-mix(in srgb, var(--card-bg) 92%, var(--app-bg)));}
.dash-stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-e3)}
/* Bold display number with subtle accent-graded text fill (neutral state) */
.dash-stat-n{font:700 36px/1 -apple-system,"SF Pro Display",system-ui,sans-serif;letter-spacing:-1.5px;font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg, var(--text-primary), color-mix(in srgb, var(--text-primary) 68%, var(--app-accent)));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--text-primary)}
.dash-stat-l{font:500 11px/1.4 -apple-system,"SF Pro Text",system-ui,sans-serif;color:var(--text-secondary);letter-spacing:.1px}
/* Problem/positive states: restore a solid semantic fill + faint tile tint */
.dash-stat.alert .dash-stat-n{background:none;-webkit-text-fill-color:var(--color-error);color:var(--color-error)}
.dash-stat.warn  .dash-stat-n{background:none;-webkit-text-fill-color:var(--color-warning);color:var(--color-warning)}
.dash-stat.ok    .dash-stat-n{background:none;-webkit-text-fill-color:var(--color-success);color:var(--color-success)}
.dash-stat.alert{background:linear-gradient(145deg, color-mix(in srgb, var(--color-error) 8%, var(--card-bg)), color-mix(in srgb, var(--color-error) 4%, var(--card-bg)))}
.dash-stat.warn {background:linear-gradient(145deg, color-mix(in srgb, var(--color-warning) 8%, var(--card-bg)), color-mix(in srgb, var(--color-warning) 4%, var(--card-bg)))}
.dash-stat.ok   {background:linear-gradient(145deg, color-mix(in srgb, var(--color-success) 8%, var(--card-bg)), color-mix(in srgb, var(--color-success) 4%, var(--card-bg)))}

/* V77.2 — Layered Apple HIG shadow stack. Was just 0 4px 12px alpha .05 +
   hairline ring — visually flat on mobile (cards looked like outlined
   rectangles on the same plane as the page surface). Apple cards (Settings,
   Mail, Calendar widgets) use three layers: close ambient (1-2px) + medium
   drop (8-16px) + soft far ambient (24px+). All low alpha but PRESENT.
   Bumped alphas + added the far-ambient layer. */
/* V82 — widget cards: theme-adaptive e2, gradient surface, hover bloom */
/* V132 — widget cards: bevel rim + gradient at rest, accent-glow bloom on hover. */
.dash-card{container-type:inline-size;container-name:widget;border-radius:var(--radius-lg);box-shadow:var(--bevel-top),var(--shadow-e2);overflow:hidden;display:flex;flex-direction:column;min-height:180px;transition:opacity var(--motion-base),box-shadow var(--motion-base) ease,transform var(--motion-fast) var(--ease-spring);
  background:var(--surface-grad)}
.dash-card:hover{box-shadow:var(--bevel-top),var(--shadow-e3),var(--glow-accent-soft);transform:translateY(-2px)}
/* Pass-2 — receded secondary widgets (Risk Radar, Portfolio Mix) sit a tier BEHIND the
   elevated command surfaces: quieter shadow, slightly desaturated material, calmer head.
   They still react to hover (lift to e2) but never bloom to the full e3 + glow tier. */
.dash-card.dash-card-recede{box-shadow:var(--shadow-e1);background:color-mix(in srgb,var(--card-bg) 96%,var(--app-bg))}
.dash-card.dash-card-recede:hover{box-shadow:var(--bevel-top),var(--shadow-e2);transform:translateY(-1px)}
.dash-card.dash-card-recede > .dash-card-title{color:var(--text-secondary)}
.dashboard-shell.dash-edit-mode .dash-card:hover{transform:none}
.dash-card.drag-over-widget{box-shadow:0 0 0 2px var(--app-accent),0 4px 12px rgba(0,0,0,.05)}
.dash-card.dragging-widget{opacity:.45}
/* Widget span classes — Phase 1 layout primitives.
   Apply data-w / data-h on the .dash-card to span. */
.dash-card[data-w="1"]{grid-column:span 1}
.dash-card[data-w="2"]{grid-column:span 2}
.dash-card[data-w="3"]{grid-column:span 3}
.dash-card[data-w="4"]{grid-column:span 4}
.dash-card[data-h="1"]{grid-row:span 1}
.dash-card[data-h="2"]{grid-row:span 2}
.dash-card[data-h="3"]{grid-row:span 3}
@media (max-width: 1024px) {
  .dash-card[data-w="2"],.dash-card[data-w="3"],.dash-card[data-w="4"]{grid-column:span 2}
}
@media (max-width: 640px) {
  .dash-card[data-w="2"],.dash-card[data-w="3"],.dash-card[data-w="4"]{grid-column:span 1}
  .dash-card[data-h="2"],.dash-card[data-h="3"]{grid-row:span 1}
}
/* Pinned widgets in left rail always render 1-wide regardless of stored span */
.dash-rail-left .dash-card{grid-column:auto !important;grid-row:auto !important}
/* V82 — gradient divider line instead of flat hairline */
.dash-card-title{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600;color:var(--text-primary);letter-spacing:-.15px;padding:10px 14px;margin:0;gap:8px;border-bottom:none;background-image:linear-gradient(to right, var(--chrome-border), color-mix(in srgb, var(--chrome-border) 35%, transparent));background-position:bottom;background-repeat:no-repeat;background-size:100% 0.5px}
/* V137 — drag handle is now a direct child of .dash-card-title (sibling to the title text), so
   widgets updating .dash-card-title-text can never clobber it (was nested inside the title span →
   async title rewrites stripped the handle on photo_carousel/weather/portfolio_rollup). */
.dash-card-title-text{display:inline-flex;align-items:center;gap:8px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-drag-handle{cursor:grab;color:var(--icon-dim);font-size:16px;line-height:1;padding:2px 4px;flex-shrink:0;user-select:none;touch-action:none;-webkit-user-select:none;border-radius:4px;transition:color var(--motion-fast),background var(--motion-fast)}
.dash-drag-handle:hover{color:var(--text-primary);background:var(--chrome-bg)}
.dash-drag-handle:active{cursor:grabbing;color:var(--app-accent)}
/* Only show drag handle in edit mode — in view mode it's removed from layout so
   the title aligns with the widget body below (was opacity:0, which kept its
   width + gap and indented every widget title ~32px → looked off-center/mis-set
   vs the left-aligned body text). 2026-05-31 📘 */
.dash-drag-handle{display:none}
.dashboard-shell.dash-edit-mode .dash-drag-handle{display:inline;opacity:1;pointer-events:auto}
.dash-count{font-size:10.5px;color:var(--text-muted);font-weight:600;background:var(--chrome-bg);padding:1px 8px;border-radius:var(--radius-md);letter-spacing:.1px}
.dash-count.alert{background:color-mix(in srgb,var(--app-danger) 12%,transparent);color:var(--app-danger)}
.dash-count.warn {background:color-mix(in srgb,var(--warn) 16%,transparent);color:#a35400}
/* Accountability Engine (2026-05-24) — Needs Follow-Up nudge rows */
.fu-list{display:flex;flex-direction:column;max-height:300px;overflow-y:auto}
.fu-row{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-bottom:.5px solid color-mix(in srgb,var(--text-primary) 7%,transparent)}
.fu-row:last-child{border-bottom:0}
.fu-main{flex:1;min-width:0}
.fu-pill{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;padding:2px 8px;border-radius:999px;margin-bottom:5px}
.fu-tone-error{color:var(--color-error,#d70015);background:var(--color-error-bg,color-mix(in srgb,var(--color-error,#d70015) 12%,transparent))}
.fu-tone-warn{color:var(--color-warning,#b25000);background:var(--color-warning-bg,color-mix(in srgb,var(--color-warning,#b25000) 14%,transparent))}
.fu-title{font-size:13.5px;font-weight:600;color:var(--text-primary);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fu-sub{font-size:11.5px;color:var(--text-muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fu-actions{display:flex;flex-direction:column;gap:5px;flex:0 0 auto;align-items:stretch}
.fu-btn{font:600 11.5px -apple-system,BlinkMacSystemFont,sans-serif;padding:5px 11px;border-radius:999px;border:0;cursor:pointer;background:var(--surface-2,rgba(120,120,128,.12));color:var(--text-primary);white-space:nowrap;transition:transform var(--motion-fast,.15s) var(--ease-spring,ease),background var(--motion-fast,.15s)}
.fu-btn:hover{background:var(--surface-3,rgba(120,120,128,.2))}
.fu-btn:active{transform:scale(.94)}
.fu-btn-primary{background:var(--app-accent,#0a84ff);color:#fff}
.fu-btn-primary:hover{opacity:.92;background:var(--app-accent,#0a84ff)}
.fu-btn-quiet{background:transparent;color:var(--text-muted)}
.fu-btn-quiet:hover{background:var(--surface-2,rgba(120,120,128,.12))}
.fu-btn[disabled]{opacity:.4;cursor:not-allowed}
@media (max-width:640px){.fu-row{flex-direction:column}.fu-actions{flex-direction:row;flex-wrap:wrap;width:100%}.fu-btn{flex:1}}
/* 2026-06-05 📘 — the list FILLS the card body (flex:1) instead of a hard 260px cap
   that left dead space below when the grid stretched the card taller. Now content
   auto-adjusts to the widget's actual height; only overflow scrolls. min-height keeps
   a sensible floor; the card's own min-height/grid row govern the outer size. */
.dash-list{display:flex;flex-direction:column;gap:0;flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;padding:0}
/* 2026-06-05 📘 — silent flex spacer: absorbs spare card height under a short list so the
   rows stay a tidy top-anchored block (no blank-with-divider look). Collapses to nothing
   when the list fills/scrolls. No copy → correct for complete AND capped lists. */
.dash-list-cap{flex:1 0 0;min-height:0;display:block;overflow:hidden}
.dash-row{padding:8px 14px;background:transparent;border-bottom:0.5px solid color-mix(in srgb, var(--text-primary) 6%, transparent);border-radius:0;cursor:pointer;transition:background var(--motion-fast)}
.dash-row:last-child{border-bottom:none}
.dash-row:hover{background:color-mix(in srgb,var(--app-accent) 5%,transparent);border-radius:10px}
/* V39vvv — dash-row press feedback */
.dash-row:active{background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
.dash-row-main{font-size:12.5px;font-weight:500;color:var(--text-primary);overflow-wrap:anywhere;letter-spacing:-.1px}
.dash-row-meta{font-size:10.5px;color:var(--text-muted);margin-top:2px}

/* DWRU — v2 row primitive (2026-05-16). Theme-safe: all surfaces pair
   --card-bg / --chrome-bg backgrounds with var(--text-primary) text. */
.dash-row-v2{display:flex;align-items:flex-start;gap:6px;padding:8px 14px;position:relative}
/* 2026-06-05 📘 — hidden checkbox no longer reserves width (was +20px phantom left
   indent: padding 14 + cb 14 + gap 6 = text started 34px in vs the 14px title). It
   collapses to 0 width while hidden and springs to 14px on hover / bulk-mode, so the
   row text aligns flush-left until you actually engage selection. */
.dash-row-v2 .dash-row-cb{flex:0 0 0;width:0;height:14px;overflow:hidden;border:1.25px solid var(--chrome-border);border-radius:var(--radius-xs);display:inline-flex;align-items:center;justify-content:center;color:transparent;cursor:pointer;margin-top:1px;background:var(--card-bg);transition:width var(--motion-fast),margin var(--motion-fast),background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast),opacity var(--motion-fast);opacity:0;pointer-events:none;margin-right:-6px}
.dash-row-v2:hover .dash-row-cb,.dash-row-v2 .dash-row-cb[aria-checked="true"],.dash-card.dash-bulk-mode .dash-row-v2 .dash-row-cb{flex-basis:14px;width:14px;margin-right:0;opacity:1;pointer-events:auto}
.dash-row-v2 .dash-row-cb[aria-checked="true"]{background:var(--app-accent);border-color:var(--app-accent);color:var(--on-accent)}
.dash-row-v2 .dash-row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.dash-row-v2 .dash-row-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:1px}
.dash-chip{font-size:10px;line-height:1;padding:2px 6px;border-radius:var(--radius-md);background:var(--chrome-bg);color:var(--text-muted);font-weight:500;letter-spacing:.05px;white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis;display:inline-block}
.dash-chip.chip-ok{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--text-primary)}
.dash-chip.chip-warn{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--text-primary)}
.dash-chip.chip-alert{background:color-mix(in srgb,var(--app-danger) 14%,transparent);color:var(--text-primary)}
.dash-chip.chip-muted{background:var(--chrome-bg);color:var(--text-muted)}
.dash-chip.chip-neutral{background:var(--chrome-bg);color:var(--text-primary)}
.dash-chip[data-chip="due"]{cursor:pointer}
.dash-chip[data-chip="assignee"]{cursor:pointer}
.dash-chip[data-chip="due"].dash-chip-editing,.dash-chip[data-chip="assignee"].dash-chip-editing{background:transparent;padding:0}
/* 2026-06-05 📘 — actions OVERLAY the row (absolute), they no longer consume row
   width as a flex child. The old flex:0 0 auto cluster reserved ~100px even while
   opacity:0, squeezing the task text to ~98px → brutal multi-line wrap + dead space.
   Now the body uses the FULL row width; actions fade in over the right edge on hover
   with a soft scrim so they stay legible over text. */
/* 2026-06-05 📘 — revealed actions sit in a solid frosted PILL (not a bare white scrim
   that made the buttons look like ghost boxes). The pill + clearly-filled buttons read
   as real, tappable controls on hover. */
.dash-row-actions{position:absolute;top:50%;right:8px;transform:translateY(-50%);display:flex;gap:3px;opacity:0;transition:opacity var(--motion-fast);align-items:center;padding:3px;background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:999px;box-shadow:0 2px 8px -3px rgba(20,30,48,.28);pointer-events:none}
.dash-row-v2:hover .dash-row-actions,.dash-card.dash-bulk-mode .dash-row-actions{opacity:1;pointer-events:auto}
/* 2026-06-01 📘 — touch reveal: no-hover devices (iPhone AND iPad, any width)
   show the row actions. The old @media(max-width:640px) reveal below missed iPad
   (touch but >640px). Defined here (after the base) so source order wins. */
@media (hover:none),(pointer:coarse){.dash-row-actions{opacity:1}}
.dash-row-action{width:26px;height:26px;border:none;background:var(--surface-2);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-secondary);transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.dash-row-action:hover{background:color-mix(in srgb,var(--app-accent) 14%,var(--card-bg));color:var(--app-accent);transform:scale(1.08)}
.dash-row-action:active{transform:scale(.92)}
.dash-row-action.is-danger:hover{background:color-mix(in srgb,var(--app-danger) 14%,var(--card-bg));color:var(--app-danger)}
.dash-row-action[disabled]{opacity:.35;pointer-events:none}
@media (max-width: 640px){
  .dash-row-actions{opacity:1}
  .dash-row-action.hide-on-mobile{display:none}
  .dash-chip{max-width:120px}
}

/* Delta chip on widget header */
.dash-delta{font-size:10px;font-weight:600;padding:1px 6px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--text-primary);letter-spacing:.1px;margin-left:6px}

/* Bulk action cluster — sprouts in widget header when ≥1 row selected */
.dash-bulk-cluster{display:none;align-items:center;gap:4px;margin-left:6px;flex-wrap:wrap}
.dash-card.dash-has-selection .dash-bulk-cluster{display:inline-flex}
.dash-bulk-btn{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:var(--radius-md);background:var(--chrome-bg);color:var(--text-primary);border:none;cursor:pointer;letter-spacing:.05px}
.dash-bulk-btn:hover{background:color-mix(in srgb,var(--app-accent) 14%,transparent)}
.dash-bulk-btn.is-danger{color:var(--app-danger)}
.dash-bulk-count{font-size:10px;color:var(--text-muted);cursor:pointer;padding:0 4px}
.dash-bulk-count:hover{color:var(--text-primary)}

/* Drag-to-reschedule on row */
.dash-row-v2.dash-row-dragging{opacity:.45}
.dash-row-v2.dash-row-drop-target{background:color-mix(in srgb,var(--app-accent) 12%,transparent);outline:1px dashed var(--app-accent);outline-offset:-2px}

/* Inline editor */
.dash-inline-date{font-size:10px;line-height:1;padding:2px 4px;border:1px solid var(--app-accent);background:var(--card-bg);color:var(--text-primary);border-radius:var(--radius-sm);outline:none;font-family:inherit}
.dash-assignee-pop{position:absolute;z-index:99;background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);padding:6px;min-width:180px;box-shadow:var(--shadow-e3);max-height:240px;overflow:auto}
.dash-assignee-pop input{width:100%;padding:4px 6px;font-size:11.5px;border:0.5px solid var(--chrome-border);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text-primary);outline:none;margin-bottom:4px}
/* V39aaaaa — dash-assignee-opt smooth transition + press */
.dash-assignee-pop .dash-assignee-opt{padding:4px 6px;font-size:11.5px;cursor:pointer;border-radius:var(--radius-xs);color:var(--text-primary);transition:background var(--motion-fast)}
.dash-assignee-pop .dash-assignee-opt:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
.dash-assignee-pop .dash-assignee-opt:active{background:color-mix(in srgb,var(--app-accent) 20%,transparent)}

/* Snooze popover */
.dash-snooze-pop{position:absolute;z-index:99;background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);padding:4px;min-width:120px;box-shadow:var(--shadow-e3)}
/* V39aaaaa — dash-snooze-opt smooth transition + press */
.dash-snooze-opt{padding:5px 10px;font-size:11.5px;cursor:pointer;border-radius:var(--radius-xs);color:var(--text-primary);white-space:nowrap;transition:background var(--motion-fast)}
.dash-snooze-opt:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
.dash-snooze-opt:active{background:color-mix(in srgb,var(--app-accent) 20%,transparent)}

/* Schedule snapshot widget */
/* 2026-06-05 📘 — fill the (often h:2) card instead of leaving dead space below the
   day cells: the grid grows to the card height and the day cells stretch to fill it. */
.dash-sched-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;padding:8px 10px;flex:1 1 auto;align-content:stretch;grid-auto-rows:1fr}
/* 2026-06-05 📘 — every day is a distinct soft cell (matches the weather strip), whether
   empty or with tasks — consistent separation. Cells with items get a touch more presence;
   today gets a faint accent tint. */
.dash-sched-day{background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 2.5%,var(--card-bg)),var(--card-bg));border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);padding:7px;display:flex;flex-direction:column;gap:4px;min-height:120px;box-shadow:var(--bevel-top),var(--shadow-e1)}
.dash-sched-day.has-items{background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 6%,var(--card-bg)),var(--card-bg));box-shadow:var(--bevel-top),var(--shadow-e2)}
.dash-sched-day.is-today{border-color:color-mix(in srgb,var(--app-accent) 38%,var(--chrome-border));background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 10%,var(--card-bg)),color-mix(in srgb,var(--app-accent) 3%,var(--card-bg)))}
.dash-sched-day-head{display:flex;align-items:baseline;justify-content:space-between;border-bottom:0.5px solid var(--chrome-border);padding-bottom:3px;margin-bottom:2px}
.dash-sched-day-label{font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px}
.dash-sched-day-num{font-size:14px;font-weight:600;color:var(--text-primary);font-variant-numeric:tabular-nums}
.dash-sched-day-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.dash-sched-empty{font-size:10.5px;color:var(--text-muted);text-align:center;padding:6px 0;opacity:.5}
.dash-sched-item{background:color-mix(in srgb,var(--app-accent) 13%,transparent);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--app-accent) 26%,transparent);border-radius:var(--radius-xs);padding:3px 5px;cursor:pointer;overflow:hidden}
.dash-sched-item:hover{background:color-mix(in srgb,var(--app-accent) 16%,transparent)}
.dash-sched-item-title{font-size:10.5px;font-weight:500;color:var(--text-primary);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-sched-item-meta{font-size:9.5px;color:var(--text-muted);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-sched-more{font-size:9.5px;color:var(--text-muted);text-align:center;padding-top:1px}
.dash-aging-group{padding:4px 0 6px 0;border-top:0.5px solid var(--chrome-border)}
.dash-aging-group:first-child{border-top:0;padding-top:2px}
.dash-aging-head{display:flex;align-items:baseline;justify-content:space-between;padding:4px 14px 4px 14px;font-size:11px}
.dash-aging-bucket{font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;font-size:10.5px}
.dash-aging-bucket.warn{color:var(--warn)}
.dash-aging-bucket.alert{color:var(--app-danger)}
.dash-aging-bucket-total{color:var(--text-muted);font-variant-numeric:tabular-nums;font-size:11px}
.dash-aging-more{padding:3px 14px 3px 14px;font-size:11px;color:var(--text-muted)}
@media (max-width: 640px) {
  .dash-sched-grid{grid-template-columns:repeat(7,minmax(40px,1fr));overflow-x:auto;padding:6px}
  .dash-sched-day{min-height:90px}
}

/* 2026-05-28 📘 — Portfolio Rollup widget. Tabular: project / % / contract / spent / variance / open / health. */
.dash-portfolio-totals{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px 14px 10px;border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 7%,transparent)}
/* Totals row: 4 money tiles clip at 1-column-widget width — go 2×2 when narrow
   (queried against the .dash-card widget container, not the totals row itself). */
@container widget (max-width: 360px){ .dash-portfolio-totals{grid-template-columns:repeat(2,1fr)} }
.dash-portfolio-totals > div{display:flex;flex-direction:column;gap:1px;min-width:0}
.dash-portfolio-tot-label{font-size:9.5px;font-weight:700;letter-spacing:.4px;color:var(--text-muted);text-transform:uppercase}
.dash-portfolio-tot-val{font-size:13px;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums;letter-spacing:-.2px}
.dash-portfolio-tot-val.pos{color:color-mix(in srgb,var(--color-success) 76%,var(--text-primary))}
.dash-portfolio-tot-val.neg{color:var(--app-danger)}
.dash-portfolio-table{display:flex;flex-direction:column}
/* The widget can be sized 1 or 2 grid columns by the user. A 7-column financial
   table truncates money values when narrow, so drop the lowest-priority columns
   as the WIDGET (.dash-card container) shrinks — keep %, Variance (the risk
   number) + Health legible. Columns by position (1-based): 1 Project · 2 % ·
   3 Contract · 4 Spent · 5 Variance · 6 Open · 7 Health. nth-CHILD (not
   nth-of-type — all cells are <span>, so nth-of-type mis-targets). */
@container widget (max-width: 360px){
  .dash-portfolio-thead,.dash-portfolio-row{grid-template-columns:minmax(0,1.6fr) 34px minmax(0,1fr) minmax(0,1fr) 46px !important;gap:6px !important}
  .dash-portfolio-thead > :nth-child(4),.dash-portfolio-row > :nth-child(4){display:none} /* Spent */
  .dash-portfolio-thead > :nth-child(6),.dash-portfolio-row > :nth-child(6){display:none} /* Open */
}
@container widget (max-width: 290px){
  .dash-portfolio-thead,.dash-portfolio-row{grid-template-columns:minmax(0,1.5fr) 30px minmax(0,1.2fr) 44px !important}
  .dash-portfolio-thead > :nth-child(3),.dash-portfolio-row > :nth-child(3){display:none} /* Contract */
}
/* 2026-05-31 📘 — Cash Position rollup inside a narrow dashboard widget: the
   shared .co-rollup is a horizontal Invoiced › Collected › Outstanding flow, but
   in a tall narrow widget the tiles stack and the `›` operator (only hidden at
   the VIEWPORT ≤560 breakpoint, never on a wide-viewport iPad) left a stray
   chevron between stacked tiles. Scope a clean vertical stack to the widget. */
@container widget (max-width: 420px){
  .dash-card .co-rollup{flex-direction:column;gap:8px}
  .dash-card .co-rollup-op{display:none}
  .dash-card .co-rollup-tile{flex:1 1 auto;width:100%;min-width:0}
}
.dash-portfolio-thead{display:grid;grid-template-columns:minmax(0,1.7fr) 40px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 60px 52px;gap:8px;padding:7px 14px 5px;font-size:9.5px;font-weight:700;letter-spacing:.4px;color:var(--text-muted);text-transform:uppercase;border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 6%,transparent)}
.dash-portfolio-thead .dpr-money,.dash-portfolio-thead .dpr-pct,.dash-portfolio-thead .dpr-open,.dash-portfolio-thead .dpr-health{text-align:right}
.dash-portfolio-row{display:grid;grid-template-columns:minmax(0,1.7fr) 40px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 60px 52px;gap:8px;padding:8px 14px;border:none;background:none;font:inherit;text-align:left;cursor:pointer;align-items:center;border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 5%,transparent);transition:background var(--motion-fast) var(--ease-out)}
.dash-portfolio-row:last-of-type{border-bottom:none}
.dash-portfolio-row:hover{background:color-mix(in srgb,var(--app-accent) 6%,transparent)}
.dash-portfolio-row:active{transform:scale(.998)}
.dpr-name{display:flex;flex-direction:column;gap:1px;min-width:0}
.dpr-name-text{font-size:12.5px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.1px}
.dpr-phase{display:flex;align-items:center;min-width:0;font-size:10.5px;color:var(--text-muted)}
.dpr-phase-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dpr-pct,.dpr-money,.dpr-open,.dpr-health{font-size:11.5px;color:var(--text-primary);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dpr-money.pos{color:color-mix(in srgb,var(--color-success) 70%,var(--text-primary));font-weight:600}
.dpr-money.neg{color:var(--app-danger);font-weight:600}
.dpr-overdue{margin-left:4px;color:var(--app-danger);font-weight:600;font-size:10.5px}
.dpr-stale-chip{display:inline-flex;align-items:center;flex-shrink:0;margin-left:6px;padding:0.5px 5px;border-radius:var(--radius-pill);font-size:9.5px;font-weight:600;letter-spacing:.2px;color:var(--text-muted);background:color-mix(in srgb,var(--text-primary) 8%,transparent)}
.dash-portfolio-row.dpr-stale .dpr-name-text{color:color-mix(in srgb,var(--text-primary) 62%,transparent)}
.dash-portfolio-row.dpr-stale .dpr-pct,.dash-portfolio-row.dpr-stale .dpr-money{color:color-mix(in srgb,var(--text-primary) 58%,transparent)}
.dpr-health-pill{display:inline-flex;align-items:center;justify-content:center;min-width:32px;padding:2px 7px;border-radius:var(--radius-pill);font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.1px}
.dpr-health-good{background:color-mix(in srgb,var(--color-success) 14%,transparent);color:color-mix(in srgb,var(--color-success) 74%,var(--text-primary))}
.dpr-health-warn{background:color-mix(in srgb,var(--color-warning) 16%,transparent);color:color-mix(in srgb,var(--color-warning) 80%,var(--text-primary))}
.dpr-health-alert{background:color-mix(in srgb,var(--app-danger) 14%,transparent);color:var(--app-danger)}
.dash-portfolio-more{padding:7px 14px;font-size:11px;color:var(--text-muted);text-align:center}
@media (max-width: 640px){
  .dash-portfolio-totals{grid-template-columns:repeat(2,1fr)}
  .dash-portfolio-thead,.dash-portfolio-row{grid-template-columns:minmax(0,1.6fr) 36px minmax(0,1fr) minmax(0,1fr) 46px;gap:6px}
  .dash-portfolio-thead > :nth-child(4),.dash-portfolio-row > :nth-child(4){display:none} /* Spent (nth-child: all cells are spans) */
  .dash-portfolio-thead > :nth-child(6),.dash-portfolio-row > :nth-child(6){display:none} /* Open */
}

/* Workload table */
/* 2026-06-05 📘 — fixed layout + truncating assignee so the table auto-fits ANY widget
   width (was overflowing ~40px on a narrow card because names didn't truncate). Num
   columns get a tight fixed share; the assignee column flexes + ellipsizes. */
.dash-workload{width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed}
.dash-workload th{text-align:left;font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;padding:8px 10px;border-bottom:0.5px solid var(--chrome-border)}
.dash-workload th:first-child,.dash-workload td:first-child{padding-left:14px}
.dash-workload th:last-child,.dash-workload td:last-child{padding-right:14px}
.dash-workload th.num{text-align:center;width:46px}
.dash-workload td{padding:7px 10px;border-bottom:0.5px solid color-mix(in srgb, var(--text-primary) 6%, transparent);color:var(--text-primary)}
.dash-workload td:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-workload td.num{text-align:center;font-variant-numeric:tabular-nums}
.dash-workload td.num.warn{color:var(--warn);font-weight:600}
.dash-workload td.num.soon{color:var(--warn);font-weight:600}
.dash-workload td.num.alert{color:var(--app-danger);font-weight:600}
.dash-workload tbody tr:last-child td{border-bottom:none}

/* Value-by-phase bars (3-col grid: label / bar / meta) */
.dash-phase{display:grid;grid-template-columns:100px 1fr 90px;gap:10px;align-items:center;padding:7px 14px;font-size:11.5px}
.dash-phase-clickable{cursor:pointer;border-radius:var(--radius-sm);transition:background var(--motion-fast) var(--ease-out)}
.dash-phase-clickable:hover{background:color-mix(in srgb,var(--app-accent) 8%,transparent)}
.dash-phase-clickable:active{transform:scale(.995)}
.dash-phase-label{color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.dash-phase-bar{height:6px;border-radius:var(--radius-xs);background:var(--chrome-bg-strong-alt,color-mix(in srgb, var(--text-primary) 18%, transparent));overflow:hidden;position:relative}
/* V90 — column/bar chart (reusable) */
.bar-chart{display:flex;align-items:flex-end;padding:0 2px;width:100%;max-width:100%;box-sizing:border-box}
.bar-col{display:flex;flex-direction:column;align-items:center;min-width:0;height:100%;overflow:hidden}
.bar-col-track{position:relative;width:100%;flex:1;display:flex;align-items:flex-end;justify-content:center}
.bar-col-fill{width:min(100%,46px);border-radius:var(--radius-sm) var(--radius-sm) 0 0;transition:height var(--motion-slow) var(--ease-spring);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.bar-col-val{position:absolute;top:-16px;left:-3px;right:-3px;text-align:center;font-size:9.5px;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.02em;overflow:hidden;text-overflow:clip}
/* Narrow charts (≥6 columns in a rail): the value labels can't fit above every bar without
   colliding — drop them and rely on the bar height + hover title. Wider charts keep the labels. */
.bar-chart.bar-chart-dense .bar-col-val{display:none}
.bar-col-label{font-size:10px;font-weight:600;color:var(--text-muted);margin-top:6px;text-align:center;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.bar-empty{font-size:12px;color:var(--text-muted);padding:24px 8px;text-align:center}
/* V89 — donut chart (dashboard Portfolio Mix + reusable) */
/* 2026-06-05 📘 — Portfolio Mix: donut gets breathing room (inset from the edge), the
   composition fills the card width (donut left, legend flexes to fill), and the donut
   ring + center carry real depth so it pops. */
.donut-wrap{display:flex;align-items:center;gap:24px;padding:14px 20px;flex-wrap:wrap;justify-content:flex-start}
.donut-svg-wrap{flex:0 0 auto;position:relative;border-radius:999px;filter:drop-shadow(0 8px 18px rgba(20,30,48,.16))}
/* recessed inner well behind the center number gives the donut depth */
.donut-center{box-shadow:none}
.donut-center-top{text-shadow:0 1px 0 rgba(255,255,255,.5)}
@container widget (max-width:300px){.donut-wrap{flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:12px}.donut-legend{flex:1 1 auto;width:100%}}
.donut-svg-wrap{position:relative;flex-shrink:0}
.donut-svg-wrap svg circle{transition:stroke-dashoffset var(--motion-slow) var(--ease-out),stroke-dasharray var(--motion-slow) var(--ease-out)}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.donut-center-top{font-size:24px;font-weight:800;letter-spacing:-.8px;color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1}
.donut-center-sub{font-size:9.5px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--text-muted);margin-top:2px}
.donut-legend{display:flex;flex-direction:column;gap:3px;flex:1 1 200px;min-width:0;align-self:stretch;justify-content:center}
.donut-leg-item{display:flex;align-items:center;gap:9px;font-size:12.5px;width:100%;max-width:100%;min-width:0;box-sizing:border-box;padding:6px 8px;border-radius:9px;transition:background var(--motion-fast)}
.donut-leg-dot{width:11px;height:11px;border-radius:4px;flex-shrink:0;box-shadow:inset 0 0 0 .5px color-mix(in srgb,#000 14%,transparent),0 1px 2px rgba(0,0,0,.15)}
.donut-leg-label{color:var(--text-primary);font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.donut-leg-val{color:var(--text-primary);font-weight:800;font-variant-numeric:tabular-nums;flex-shrink:0;font-size:13px;margin-left:auto;min-width:18px;text-align:right}
.donut-leg-clickable{cursor:pointer;padding:3px 7px;margin:0;border-radius:var(--radius-sm);transition:background var(--motion-fast) var(--ease-out)}
.donut-leg-clickable:hover{background:color-mix(in srgb,var(--app-accent) 9%,transparent)}
.donut-leg-clickable:active{transform:scale(.98)}
.donut-leg-chev{color:var(--text-muted);opacity:0;margin-left:2px;flex-shrink:0;transition:opacity var(--motion-fast)}
.donut-leg-clickable:hover .donut-leg-chev{opacity:.7}
.donut-empty{font-size:12px;color:var(--text-muted);padding:24px 8px;text-align:center}
.dash-phase-fill{position:absolute;inset:0 auto 0 0;background:var(--app-accent);border-radius:var(--radius-xs)}
.dash-phase-fill.empty{background:var(--border)}
.dash-phase-fill.ok{background:var(--ok)}
.dash-phase-meta{color:var(--text-muted);font-variant-numeric:tabular-nums;text-align:right;font-size:11px}
/* 2026-06-05 📘 — Value-by-Phase: count and $ value read as DISTINCT metrics. Count is a
   small muted pill (how many projects); value is the bold figure (the money). */
.dash-phase-meta{display:inline-flex;align-items:center;gap:7px;justify-content:flex-end}
/* count circle tinted in the phase color (matches the bar + proto color language). */
.dash-phase-meta .dpm-count{font-size:10.5px;font-weight:800;color:var(--text-secondary);background:var(--chrome-bg);padding:1px 7px;border-radius:999px;min-width:20px;text-align:center;font-variant-numeric:tabular-nums}
.dash-phase-meta .dpm-count[style*="--phc"]{color:color-mix(in srgb,var(--phc) 75%,#000);background:color-mix(in srgb,var(--phc) 18%,var(--card-bg));box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--phc) 30%,transparent)}
.dash-phase-meta .dpm-val{font-size:12px;font-weight:700;color:var(--text-primary);letter-spacing:-.1px}
/* 2026-06-05 📘 — weather 5-day strip: each day is its own soft cell so days read as
   distinct (was a gap-only run-together row). Today’s cell gets a faint accent tint. */
.wx-fc-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:11px}
.wx-fc-day{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:11px;background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 3%,var(--card-bg)),var(--card-bg));box-shadow:var(--bevel-top),var(--shadow-e1);min-width:0}
.wx-fc-day:first-child{background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 11%,var(--card-bg)),color-mix(in srgb,var(--app-accent) 4%,var(--card-bg)))}
.wx-fc-wd{font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}
.wx-fc-hi{font-size:13px;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums}
.wx-fc-lo{font-size:11px;color:var(--text-muted);font-variant-numeric:tabular-nums}
/* 2026-06-05 📘 — Recent Photos: polished elevated photo CARDS (Apple-album feel). Each
   is a rounded card with real depth (drop shadow + hairline ring), a frosted footer with
   project name + recency, and a spring lift on hover. Horizontal scroll, vertically
   centered so leftover height is balanced. */
/* generous vertical padding so each card's drop shadow renders fully INSIDE the strip
   (the card's overflow:hidden was slicing shadows into a hard straight line). */
.dash-photo-strip{display:flex;gap:12px;overflow-x:auto;overflow-y:visible;padding:16px 16px 20px;scroll-snap-type:x mandatory;flex:1 1 auto;align-items:center;min-height:0}
.dash-photo-card{flex:0 0 auto;scroll-snap-align:start;cursor:pointer;position:relative;width:150px;height:150px;border:none;padding:0;border-radius:16px;overflow:hidden;background:var(--surface-2);box-shadow:var(--bevel-top),0 8px 22px -10px rgba(20,30,48,.34),0 2px 6px -3px rgba(20,30,48,.24),0 0 0 .5px rgba(0,0,0,.06);transition:transform var(--motion-base) var(--ease-spring),box-shadow var(--motion-base)}
.dash-photo-card:hover{transform:translateY(-3px) scale(1.012);box-shadow:var(--bevel-top),0 18px 38px -12px rgba(20,30,48,.46),0 6px 14px -6px rgba(20,30,48,.3),0 0 0 .5px rgba(0,0,0,.08)}
.dash-photo-card:active{transform:translateY(-1px) scale(.99)}
.dash-photo-img{width:100%;height:100%;object-fit:cover;display:block}
/* frosted footer reads on any photo (gradient scrim under a blur) */
.dash-photo-foot{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:1px;padding:14px 11px 9px;text-align:left;background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,.28) 55%,transparent);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}
.dash-photo-proj{font-size:12px;font-weight:700;color:#fff;letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.dash-photo-when{font-size:10px;font-weight:600;color:rgba(255,255,255,.82);text-shadow:0 1px 2px rgba(0,0,0,.5)}
/* 2026-06-05 📘 — "View all N" footer for capped widget lists (Activity etc.) → routes
   to the full page/popout. Quiet, full-width, tappable. */
.dash-list-more{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;padding:10px 14px;border:none;border-top:0.5px solid var(--chrome-border);background:transparent;color:var(--app-accent);font-family:inherit;font-size:12px;font-weight:700;letter-spacing:-.05px;cursor:pointer;transition:background var(--motion-fast)}
.dash-list-more:hover{background:color-mix(in srgb,var(--app-accent) 6%,transparent)}
.dash-list-more:active{background:color-mix(in srgb,var(--app-accent) 11%,transparent)}

/* Recent comments ticker */
.dash-comment{padding:8px 14px;background:transparent;border-bottom:0.5px solid color-mix(in srgb, var(--text-primary) 6%, transparent);cursor:pointer;transition:background var(--motion-fast)}
.dash-comment:last-child{border-bottom:none}
.dash-comment:hover{background:color-mix(in srgb,var(--app-accent) 5%,transparent)}
.dash-comment:active{background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
.dash-comment-meta{font-size:10.5px;color:var(--text-muted);margin-bottom:3px;display:flex;justify-content:space-between;gap:8px}
.dash-comment-author{font-weight:600;color:var(--text-primary)}
.dash-comment-body{font-size:12.5px;color:var(--text-primary);overflow-wrap:anywhere;line-height:1.4}

/* Mobile-only widget reorder buttons (default hidden everywhere; the mobile
   media query below switches them to inline-flex when in edit mode). */
.dash-move-btn{display:none}

/* ── Mobile Dashboard (Task 2.6) ──
   Single-column widgets confirmed at ≤640px in the earlier dashboard-grid rule.
   This block: tappable edit-mode chrome, mobile-only up/down reorder buttons
   (HTML5 drag-and-drop does not fire on touch — phones use the arrow buttons
   wired in JS), comfortable padding/spacing, and header that wraps cleanly. */
@media (max-width: 640px){
  /* Tighten the wrap padding (was 18px each side) to the standard
     mobile-gutter so the single-column cards have more breathing room. */
  .dashboard-wrap{padding:var(--space-3) var(--mobile-gutter) var(--mobile-gutter)}
  .dashboard-shell{
    gap:var(--space-3);
    padding:0;
  }
  .dashboard-shell[data-dash-density="compact"]{gap:var(--space-2)}
  .dashboard-header{
    flex-direction:column;align-items:stretch;
    gap:var(--space-2);padding:0;
  }
  .dashboard-controls{
    flex-wrap:nowrap;gap:10px;
    align-items:center;
    overflow-x:auto;scrollbar-width:none;
    padding-right:var(--mobile-gutter);   /* V81.2: last pill (Settings) clears the screen edge */
  }
  .dashboard-controls::-webkit-scrollbar{display:none}
  .dashboard-controls > *{flex:0 0 auto}
  /* V77.2 — Phone: show the Settings chip + hide inner controls until tapped. */
  .dash-controls-more{display:block;flex:0 0 auto}
  .dash-controls-more > summary{
    display:inline-flex;align-items:center;gap:6px;
    list-style:none;cursor:pointer;
    background:var(--chrome-bg);border:0.5px solid var(--chrome-border);
    border-radius:var(--radius-pill);
    padding:6px 12px;height:32px;
    font-size:13px;font-weight:500;color:var(--text-primary);
    letter-spacing:-.1px;font-family:inherit;
    -webkit-tap-highlight-color:transparent;
  }
  .dash-controls-more > summary::-webkit-details-marker{display:none}
  .dash-controls-more > summary:active{background:color-mix(in srgb, var(--text-primary) 9%, transparent)}
  .dash-controls-more[open] > summary{background:var(--chrome-bg)}
  .dash-controls-more > .dash-controls-more-inner{
    display:none;
    flex-direction:column;gap:var(--space-2);
    padding:var(--space-2) 0;
    width:100%;
  }
  .dash-controls-more[open] > .dash-controls-more-inner{display:flex}
  .dashboard-title{font-size:23px;letter-spacing:-.6px}
  .dashboard-subtitle{font-size:12.5px}
  /* Edit-mode + header tappable controls */
  /* primary preset-row buttons match the Settings pill (32px, radius-pill) */
  .dash-customize-btn{
    height:32px;min-height:32px;
    padding:0 14px;
    border-radius:var(--radius-pill);
    font-size:13px;
  }
  /* power-user buttons inside the More disclosure keep the comfortable tap size */
  .dash-reset-btn,
  .dash-add-widget-btn{
    min-height:var(--tap-min);
    padding:var(--space-2) var(--space-3);
    font-size:14px;
  }
  .dash-density-toggle{padding:3px}
  .dash-density-btn{
    min-height:36px;padding:var(--space-2) var(--space-3);
    font-size:13px;
  }
  .dash-me-label{font-size:13px;gap:var(--space-2)}
  .dash-me-label input{
    min-height:var(--tap-min);font-size:14px;
    padding:var(--space-2) var(--space-3);
  }
  .dash-layout-select{
    height:32px;min-height:32px;font-size:13px;
    border-radius:var(--radius-pill);
    /* V81.2: hug the SELECTED option's text — the dropdown also contains the
       wider "Save current as…" / "Manage layouts…" options, and a native
       <select> sizes its intrinsic width to the WIDEST option, which left a big
       empty gap before the chevron when the short "Admin Default" was selected.
       field-sizing:content makes it size to the current selection. */
    min-width:0;width:auto;max-width:60vw;
    field-sizing:content;
    padding:0 26px 0 14px;
    background-position:right 9px center;
  }
  .dash-add-widget-row{padding:0}
  .dash-add-widget-btn{width:100%;justify-content:center}
  /* Edit-mode per-card chrome — bigger tap targets */
  .dash-widget-remove{
    width:32px;height:32px;top:8px;right:8px;font-size:16px;
  }
  .dash-settings-btn{
    min-width:var(--tap-min);min-height:var(--tap-min);
    padding:var(--space-2);
  }
  /* Bigger drag/resize tap targets on mobile */
  .dashboard-shell.dash-edit-mode .dash-drag-handle{
    min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  }
  /* Fix 3: 44x44 tap target on mobile for resize handle */
  .dash-widget-resize{width:44px;height:44px}
  /* Card body padding via space tokens — already comfortable, but tighten
     gap between cards a touch and bump min-height for swipe ergonomics. */
  .dashboard-grid{gap:var(--space-3);padding:0}
  .dash-card{min-height:160px}
  .dash-card-title{
    padding:var(--space-3) var(--space-3);
    font-size:14px;gap:var(--space-2);
  }
  /* KPI strip tap targets */
  .dash-kpi{
    min-height:var(--tap-min);padding:var(--space-3) var(--space-3);
  }
  .dash-kpi-n{font-size:20px}
  /* 2026-05-17 📘 V26 — kill UPPERCASE + letter-spacing on KPI labels.
     V11 missed `.dash-kpi-l` (line 3295: `text-transform:uppercase`). On
     phone it reads as old-CRM-style; switch to sentence-case 12px / 500. */
  .dash-kpi-l{font-size:12px !important;text-transform:none !important;letter-spacing:-.05px !important;font-weight:500 !important}
  /* Gallery modal — phone polish (the picker for adding widgets). The form
     popover routes through mobileSheet() in JS; this block covers the
     gallery picker which stays as a fullscreen overlay. */
  .dash-gallery-overlay{padding:var(--mobile-gutter)}
  .dash-gallery{max-height:92svh;width:100%}
  .dash-gallery-head{padding:var(--space-3) var(--mobile-gutter)}
  .dash-gallery-close{width:var(--tap-min);height:var(--tap-min)}
  .dash-gallery-grid{padding:var(--space-3);gap:var(--space-2)}
  .dash-gallery-tile{padding:var(--space-3)}
}

/* ── Financial cards (estimates / COs / POs / invoices) ── */
/* V85 — change-order financial rollup: Original + Approved = Revised, as commanding metric tiles */
/* V99 — Risk Radar widget */
/* 2026-06-05 📘 — list padding insets the full-width pills from the card edges (were
   bleeding edge-to-edge / overflowing). Label truncates; chevron pinned right in-bounds. */
.risk-radar-list{display:flex;flex-direction:column;gap:6px;padding:4px 12px 12px}
.risk-radar-row{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--radius-md);font-size:12.5px;font-weight:600;color:var(--text-primary);transition:background var(--motion-fast) var(--ease-out);min-width:0;box-sizing:border-box}
.risk-radar-row[role=button]{cursor:pointer}
.risk-radar-row.risk-alert{background:color-mix(in srgb,var(--color-error) 10%,transparent)}
.risk-radar-row.risk-warn{background:color-mix(in srgb,var(--color-warning) 10%,transparent)}
.risk-radar-row[role=button]:hover{filter:brightness(1.04)}
.risk-radar-row[role=button]:active{transform:scale(.99)}
.risk-radar-ico{flex-shrink:0;width:24px;height:24px;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center}
.risk-radar-ico svg{width:13px;height:13px}
.risk-alert .risk-radar-ico{background:color-mix(in srgb,var(--color-error) 18%,transparent);color:var(--color-error)}
.risk-warn .risk-radar-ico{background:color-mix(in srgb,var(--color-warning) 18%,transparent);color:color-mix(in srgb,var(--color-warning) 80%,var(--text-primary))}
.risk-radar-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.risk-radar-chev{color:var(--text-muted);opacity:.5;flex-shrink:0}
.risk-radar-clear{display:flex;align-items:center;gap:11px;padding:10px 4px}
.risk-radar-ico.risk-ok{background:color-mix(in srgb,var(--color-success) 16%,transparent);color:var(--color-success);width:30px;height:30px}
.dash-count-alert{background:color-mix(in srgb,var(--color-error) 16%,transparent)!important;color:var(--color-error)!important}
/* Risk Radar column chart (item 2): severity-toned columns, height = real magnitude,
   flame glyph crowns the alert-severity (hottest) signals. */
.rr-chart{display:flex;align-items:flex-end;gap:8px;padding:8px 12px 12px;min-height:120px}
.rr-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;height:128px;border-radius:10px;padding:4px 2px;transition:background var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-spring,ease)}
.rr-col[role=button]{cursor:pointer}
.rr-col[role=button]:hover{background:color-mix(in srgb,var(--text-primary) 5%,transparent);transform:translateY(-2px)}
.rr-col[role=button]:active{transform:translateY(-2px) scale(.97)}
.rr-col-top{display:flex;align-items:center;justify-content:center;gap:2px;height:16px;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.rr-col-mag{letter-spacing:-.02em}
.rr-col.risk-alert .rr-col-mag{color:var(--color-error)}
.rr-col.risk-warn .rr-col-mag{color:color-mix(in srgb,var(--color-warning) 82%,var(--text-primary))}
.rr-flame{display:block;animation:rrFlame 1.6s var(--ease-in-out,ease-in-out) infinite}
.rr-col.risk-alert .rr-flame-wrap{color:var(--color-error)}
@keyframes rrFlame{0%,100%{transform:scale(1) translateY(0);opacity:.92}50%{transform:scale(1.12) translateY(-1px);opacity:1}}
@media (prefers-reduced-motion:reduce){.rr-flame{animation:none}}
.rr-col-bar-wrap{flex:1 1 auto;width:60%;max-width:30px;display:flex;align-items:flex-end;justify-content:center}
.rr-col-bar{width:100%;border-radius:7px 7px 4px 4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.28);transition:height var(--motion-slow,.4s) var(--ease-spring,ease)}
.rr-col.risk-alert .rr-col-bar{background:linear-gradient(180deg,var(--color-error),color-mix(in srgb,var(--color-error) 72%,#000))}
.rr-col.risk-warn .rr-col-bar{background:linear-gradient(180deg,var(--color-warning),color-mix(in srgb,var(--color-warning) 72%,#000))}
.rr-col-cap{font-size:9.5px;font-weight:700;color:var(--text-muted);text-align:center;line-height:1.15;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* F1 — Project Health Radar widget. A status band + ranked, explainable rows. */
.hr-band{display:flex;gap:4px;padding:6px 12px 4px}
.hr-band-seg{flex:0 0 auto;min-width:26px;text-align:center;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;padding:3px 8px;border-radius:999px}
.hr-band-seg.hr-red{background:color-mix(in srgb,var(--color-error) 16%,transparent);color:var(--color-error)}
.hr-band-seg.hr-amber{background:color-mix(in srgb,var(--color-warning) 18%,transparent);color:color-mix(in srgb,var(--color-warning) 82%,var(--text-primary))}
.hr-band-seg.hr-green{background:color-mix(in srgb,var(--color-success) 16%,transparent);color:var(--color-success)}
.hr-list{display:flex;flex-direction:column;gap:4px;padding:4px 10px 12px}
.hr-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-md,10px);background:var(--card-bg);box-shadow:var(--shadow-e1);cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring,ease),box-shadow var(--motion-base) ease;min-width:0;box-sizing:border-box}
.hr-row:hover{transform:translateX(2px);box-shadow:var(--shadow-e2)}
.hr-row:active{transform:scale(.99)}
/* composite score chip — toned by status */
.hr-score{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.hr-score.hr-green{background:color-mix(in srgb,var(--color-success) 15%,transparent);color:var(--color-success)}
.hr-score.hr-amber{background:color-mix(in srgb,var(--color-warning) 18%,transparent);color:color-mix(in srgb,var(--color-warning) 82%,var(--text-primary))}
.hr-score.hr-red{background:color-mix(in srgb,var(--color-error) 16%,transparent);color:var(--color-error)}
.hr-score.hr-unknown{background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-muted)}
.hr-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.hr-name{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr-proj-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%}
.hr-why{font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.hr-why-red{color:var(--color-error)}
.hr-why-amber{color:color-mix(in srgb,var(--color-warning) 78%,var(--text-primary))}
.hr-why-ok{color:var(--text-muted);font-weight:500}
/* per-factor mini-pips: one initial-letter chip per factor, toned by its own status */
.hr-pips{flex:0 0 auto;display:flex;gap:3px}
.hr-pip{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:6px;font-size:9.5px;font-weight:800;color:#fff}
.hr-pip-green{background:var(--color-success)}
.hr-pip-amber{background:var(--color-warning)}
.hr-pip-red{background:var(--color-error)}
.hr-pip-unknown{background:color-mix(in srgb,var(--text-primary) 18%,transparent);color:var(--text-muted)}
@media (max-width:520px){ .hr-pips{display:none} }
/* SVG-bar variant (item 2): score ring + a real-data horizontal score bar. */
.hr-row-bar{align-items:center}
.hr-ring{flex:0 0 auto}
.hr-ring-num{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.hr-row-bar .hr-main{gap:5px;padding:1px 0}
.hr-row-bar .hr-name{gap:6px}
.hr-row-bar .hr-pips{margin-left:auto}
.hr-bar-track{position:relative;height:8px;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 8%,transparent);overflow:hidden;box-shadow:inset 0 1px 1px rgba(0,0,0,.08)}
.hr-bar-fill{position:absolute;inset:0 auto 0 0;height:100%;border-radius:999px;transition:width var(--motion-slow,.4s) var(--ease-spring,ease);box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.hr-bar-fill.hr-green{background:linear-gradient(90deg,color-mix(in srgb,var(--color-success) 80%,#000),var(--color-success))}
.hr-bar-fill.hr-amber{background:linear-gradient(90deg,color-mix(in srgb,var(--color-warning) 82%,#000),var(--color-warning))}
.hr-bar-fill.hr-red{background:linear-gradient(90deg,color-mix(in srgb,var(--color-error) 82%,#000),var(--color-error))}
.hr-bar-fill.hr-unknown{background:color-mix(in srgb,var(--text-primary) 22%,transparent)}

/* F2 — Anomaly Sentinel widget. Severity-toned rows; icon tile + detail + ball-in-court chip. */
.as-list{display:flex;flex-direction:column;gap:5px;padding:4px 10px 12px}
.as-row{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border-radius:var(--radius-md,10px);background:var(--card-bg);box-shadow:var(--shadow-e1);cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring,ease),box-shadow var(--motion-base) ease;min-width:0}
.as-row:hover{transform:translateX(2px);box-shadow:var(--shadow-e2)}
.as-row:active{transform:scale(.99)}
.as-ico{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px}
.as-ico svg{width:15px;height:15px}
.as-row.as-high .as-ico{background:color-mix(in srgb,var(--color-error) 15%,transparent);color:var(--color-error)}
.as-row.as-amber .as-ico{background:color-mix(in srgb,var(--color-warning) 18%,transparent);color:color-mix(in srgb,var(--color-warning) 82%,var(--text-primary))}
.as-row.as-low .as-ico{background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-muted)}
.as-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.as-top{display:flex;align-items:center;gap:8px;justify-content:space-between}
.as-title{font-size:12.5px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.as-court{flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent)}
.as-proj{font-size:11px;font-weight:600;color:var(--text-secondary,var(--text-muted))}
.as-detail{font-size:11.5px;color:var(--text-secondary,var(--text-muted));line-height:1.4}
.as-clear{display:flex;align-items:center;gap:11px;padding:14px 10px}
.as-clear-ico{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;background:color-mix(in srgb,var(--color-success) 16%,transparent);color:var(--color-success)}
.as-clear-ico svg{width:16px;height:16px}

/* W1-3 — Smart Actions inbox (connective: the system's suggested next-actions).
   Canonical card recipe (surface-grad + bevel + e1) with a faint accent rim so it
   reads as "the app noticed something" without shouting. Rows: icon + title/detail +
   Accept (primary glass) / dismiss (quiet). */
/* pass-2 G1: the accent reads via the .sa-ico medallion + .sa-count pill + tinted
   .sa-row fills — NOT a left edge-spine (hard rule). A faint accent surface tint
   replaces the glowing spine. */
.sa-card{position:relative;overflow:hidden;background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 5%,var(--card-bg,#fff)),var(--card-bg,#fff))}
.sa-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--app-accent) 16%,transparent);color:var(--app-accent);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;margin-left:6px}
.sa-list{display:flex;flex-direction:column;gap:7px}
.sa-row{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--app-accent) 4%,var(--surface));box-shadow:var(--bevel-top),var(--shadow-e1);transition:box-shadow var(--motion-base) var(--ease-out),opacity var(--motion-base) var(--ease-out),transform var(--motion-base) var(--ease-spring)}
/* 📒 V161 — coalesced same-kind Smart-Action groups (row 23): one head row, expandable items */
.sa-group{display:flex;flex-direction:column;gap:6px}
.sa-group-head{cursor:pointer;align-items:center}
.sa-group-head:hover{box-shadow:var(--bevel-top),var(--shadow-e2)}
.sa-group-n{flex:0 0 auto;min-width:22px;height:22px;padding:0 7px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent)}
.sa-group-chev{flex:0 0 auto;font-size:15px;font-weight:800;color:var(--text-muted);transition:transform var(--motion-fast) var(--ease-out)}
.sa-group-head[aria-expanded="true"] .sa-group-chev{transform:rotate(90deg)}
.sa-group-items{display:flex;flex-direction:column;gap:6px;padding-left:14px;border-left:2px solid color-mix(in srgb,var(--app-accent) 18%,transparent);margin-left:10px}
.sa-group-items[hidden]{display:none} /* hidden-attr loses to display:flex without this (documented trap) */
.sa-row.sa-busy{opacity:.5;pointer-events:none}
.sa-ico{flex-shrink:0;width:26px;height:26px;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent);margin-top:1px}
.sa-ico svg{width:14px;height:14px}
.sa-main{flex:1;min-width:0}
.sa-title{font-size:12.5px;font-weight:600;color:var(--text-primary);letter-spacing:-.1px;line-height:1.3}
.sa-detail{font-size:11.5px;color:var(--text-muted);margin-top:2px;line-height:1.35}
.sa-actions{display:flex;align-items:center;gap:5px;flex-shrink:0}
.sa-accept{height:28px;padding:0 13px;border:none;border-radius:var(--radius-pill);background:var(--app-accent);color:var(--on-accent);font-family:inherit;font-size:12px;font-weight:600;letter-spacing:-.05px;cursor:pointer;box-shadow:var(--bevel-top),0 1px 3px color-mix(in srgb,var(--app-accent) 30%,transparent);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast),filter var(--motion-fast)}
.sa-accept:hover{filter:brightness(1.05);box-shadow:var(--bevel-top),var(--shadow-e2)}
.sa-accept:active{transform:scale(.95)}
.sa-dismiss{width:28px;height:28px;flex-shrink:0;border:none;border-radius:50%;background:transparent;color:var(--text-muted);font-size:13px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.sa-dismiss:hover{background:var(--surface-2);color:var(--text-primary)}
.sa-dismiss:active{transform:scale(.9)}
.sa-dismiss-ico{width:14px;height:14px;stroke:currentColor;fill:none}

/* W1-4 / W2-8 — Related-items (Connections) panel: the navigable link graph. Canonical
   card recipe; rows are click-through chips to the linked record. */
/* Workspace P3 — the Connections host appended into a workspace detail surface; give it a
   little top breathing room so it doesn't crowd the record's own fields. Self-hides empty. */
.pfv-conn-host:not(:empty){margin-top:12px}
.rel-card .rel-resp{font-size:12px;color:var(--text-secondary);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.rel-ico-inline{width:13px;height:13px;flex-shrink:0;color:var(--text-muted)}
.rel-list{display:flex;flex-direction:column;gap:5px}
.rel-row{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:8px 10px;border:none;border-radius:var(--radius-md);background:var(--surface-2);color:var(--text-primary);font-family:inherit;cursor:pointer;box-shadow:var(--bevel-top),var(--shadow-e1);transition:box-shadow var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-spring),background var(--motion-fast)}
.rel-row:hover{background:var(--surface);box-shadow:var(--bevel-top),var(--shadow-e2);transform:translateY(-1px)}
.rel-row:active{transform:scale(.99)}
.rel-row[disabled]{cursor:default;opacity:.75;box-shadow:var(--shadow-e1)}
.rel-row[disabled]:hover{transform:none;background:var(--surface-2)}
.rel-ico{flex-shrink:0;width:24px;height:24px;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent)}
.rel-ico svg{width:13px;height:13px}
.rel-rel{flex-shrink:0;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--text-muted);min-width:0}
.rel-label{flex:1;min-width:0;font-size:12.5px;font-weight:500;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.co-rollup{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap}
/* Pass-2 — Cash Position money panel: ONE authored surface with hairline-divided zones
   (proto .money-row/.ms-cell), not separate boxes-with-gaps. Operational-first, recedes. */
/* fill the card height so the zones grow instead of leaving a dead band below. */
.dash-money-panel{padding:10px 12px 14px;flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
/* A/R Piece 2 — "Ready to Pay" worklist rows in the dashboard widget. Rounded, hover-lift, no edge-strip. */
.dash-rtp{display:flex;flex-direction:column;gap:3px;padding:6px 8px;overflow:auto;min-height:0}
.dash-rtp-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--radius-md,10px);cursor:pointer;transition:background var(--motion-fast)}
.dash-rtp-row:hover{background:color-mix(in srgb,var(--color-success) 9%,transparent)}
.dash-rtp-main{flex:1;min-width:0;display:flex;flex-direction:column}
.dash-rtp-t{font-size:12.5px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-rtp-sub{font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-rtp-amt{flex:0 0 auto;font-size:13px;font-weight:700;color:var(--color-success);font-variant-numeric:tabular-nums}
/* A/R Piece 3 — portfolio AR aging widget: stacked bar + overdue callout + worst-bucket pill + legend. */
.dash-arap{display:flex;flex-direction:column;gap:9px;padding:10px 12px 12px;cursor:pointer}
.dash-arap-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}
.dash-arap-overdue{min-width:0}
.dash-arap-ov-v{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.05;letter-spacing:-.4px}
.dash-arap-ov-v.neg{color:var(--color-error)}
.dash-arap-ov-v.pos{color:var(--color-success)}
.dash-arap-ov-l{font-size:11px;color:var(--text-muted);margin-top:1px}
.dash-arap-worst{flex:0 0 auto;font-size:11px;font-weight:700;padding:3px 9px;border-radius:var(--radius-pill);white-space:nowrap}
.dash-arap-bar{display:flex;height:12px;border-radius:6px;overflow:hidden;background:color-mix(in srgb,var(--text-primary) 6%,transparent)}
.dash-arap-seg{min-width:2px;transition:flex var(--motion-fast)}
.dash-arap-legend{display:flex;flex-wrap:wrap;gap:4px 14px}
.dash-arap-cell{display:flex;align-items:center;gap:5px;font-size:11px;font-variant-numeric:tabular-nums}
.dash-arap-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.dash-arap-lab{color:var(--text-muted)}
.dash-arap-val{color:var(--text-primary);font-weight:600}
/* 2026-06-05 📘 — each zone now carries a soft top-lit fill + inset hairline so the 4
   quadrants read as distinct surfaces with real depth (was flat hairline-only). The
   panel gets a recessed inner shadow so the zones feel inlaid, not painted on. */
.dash-money-row{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;flex:1 1 auto;border-radius:14px;overflow:hidden;border:0.5px solid var(--chrome-border);background:var(--chrome-border);gap:0.5px;box-shadow:inset 0 1px 3px rgba(20,30,48,.06)}
.dash-money-row .dm-cell{padding:14px;display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0;background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 3%,var(--card-bg)),var(--card-bg));box-shadow:var(--bevel-top)}
.dash-money-row .dm-l{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-money-row .dm-v{font-size:19px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text-primary);line-height:1.1}
.dash-money-row .dm-v.pos{color:var(--color-success,#137a4b)}
.dash-money-row .dm-v.neg{color:var(--color-error,#c0392b)}
.dash-money-row .dm-v.warn{color:var(--co-pending-fg,#b45309)}
.dash-money-row .dm-s{font-size:10.5px;font-weight:600;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-money-clickable{cursor:pointer}
.dash-money-clickable:hover .dash-money-row{border-color:color-mix(in srgb,var(--app-accent) 32%,var(--chrome-border))}
/* Wide widget → single 4-across row; narrow stays 2×2. Gap-based dividers handle both. */
@container widget (min-width:480px){.dash-money-row{grid-template-columns:repeat(4,1fr)}}
/* MONEY HUB (2026-05-24) — per-project P&L card */
.pnl-card{background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 7%,var(--card-bg)),var(--card-bg));border:0.5px solid color-mix(in srgb,var(--app-accent) 22%,var(--chrome-border));border-radius:var(--radius-group);padding:13px 15px;box-shadow:var(--shadow-e1)}
.pnl-card-head{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--text-primary);letter-spacing:-.2px;margin-bottom:8px}
.pnl-card-ico{width:14px;height:14px;color:var(--app-accent)}
.pnl-card-pct{margin-left:auto;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;padding:2px 9px;border-radius:var(--radius-pill)}
.pnl-card-pct.pos{background:color-mix(in srgb,var(--color-success) 15%,transparent);color:color-mix(in srgb,var(--color-success) 76%,var(--text-primary))}
.pnl-card-pct.neg{background:color-mix(in srgb,var(--color-error) 15%,transparent);color:color-mix(in srgb,var(--color-error) 76%,var(--text-primary))}
.pnl-row{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;font-size:13px;border-top:0.5px solid color-mix(in srgb,var(--text-primary) 6%,transparent)}
.pnl-row:first-of-type{border-top:none}
.pnl-lbl{color:var(--text-secondary)}
.pnl-meta{color:var(--text-muted);font-size:11px;font-weight:400;margin-left:4px}
.pnl-val{font-weight:600;color:var(--text-primary);font-variant-numeric:tabular-nums;letter-spacing:-.2px}
.pnl-row-total{border-top:0.5px solid color-mix(in srgb,var(--text-primary) 14%,transparent);margin-top:2px;padding-top:7px}
.pnl-row-total .pnl-lbl{font-weight:700;color:var(--text-primary)}
.pnl-row-total .pnl-val{font-size:16px;font-weight:800}
.pnl-val.pos,.pnl-bd-val.pos{color:color-mix(in srgb,var(--color-success) 72%,var(--text-primary))}
.pnl-val.neg,.pnl-bd-val.neg{color:color-mix(in srgb,var(--color-error) 72%,var(--text-primary))}
.pnl-bd-val.warn{color:color-mix(in srgb,var(--color-warning) 76%,var(--text-primary))}
.pnl-foot{font-size:11px;color:var(--text-muted);margin-top:7px;text-align:right}
.pnl-breakdown{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:11px}
.pnl-bd{background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);padding:9px 11px}
.pnl-bd-lbl{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.35px;color:var(--text-muted);display:block}
.pnl-bd-val{font-size:18px;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums;letter-spacing:-.4px;display:block;margin-top:3px}
.pnl-bd-sub{font-size:10.5px;color:var(--text-muted);display:block;margin-top:1px}
/* Financial Health block — full-page Overview command surface (the project money
   truth, pulled up from the buried Change Orders P&L). Premium top-lit card. */
.fhealth{margin:2px 0 16px;padding:13px 15px;border-radius:var(--radius-lg);background:var(--surface-grad);border:none;box-shadow:var(--bevel-top),var(--shadow-e2)}
.fhealth-head{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--text-primary);letter-spacing:-.2px;margin-bottom:11px}
.fhealth-ico{width:14px;height:14px;color:var(--app-accent);flex-shrink:0}
.fhealth-margin-pill{margin-left:auto;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;padding:2px 10px;border-radius:var(--radius-pill)}
.fhealth-margin-pill.pos{background:color-mix(in srgb,var(--color-success) 15%,transparent);color:color-mix(in srgb,var(--color-success) 78%,var(--text-primary))}
.fhealth-margin-pill.neg{background:color-mix(in srgb,var(--color-error) 16%,transparent);color:color-mix(in srgb,var(--color-error) 78%,var(--text-primary))}
.fhealth-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:9px}
.fhealth-cell{text-align:left;border:0.5px solid var(--chrome-border);background:var(--card-bg);border-radius:var(--radius-md);padding:10px 12px;cursor:pointer;font:inherit;transition:transform var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out),border-color var(--motion-fast)}
.fhealth-cell:hover{transform:translateY(-1px);box-shadow:var(--shadow-e2);border-color:color-mix(in srgb,var(--app-accent) 32%,var(--chrome-border))}
.fhealth-cell:active{transform:scale(.985)}
.fhealth-cell-lbl{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.35px;color:var(--text-muted)}
.fhealth-cell-val{font-size:19px;font-weight:800;color:var(--text-primary);font-variant-numeric:tabular-nums;letter-spacing:-.5px;margin-top:3px;line-height:1.1}
.fhealth-hero .fhealth-cell-val{font-size:23px}
.fhealth-cell-val.pos{color:color-mix(in srgb,var(--color-success) 72%,var(--text-primary))}
.fhealth-cell-val.neg{color:color-mix(in srgb,var(--color-error) 72%,var(--text-primary))}
.fhealth-cell-val.warn{color:color-mix(in srgb,var(--color-warning) 80%,var(--text-primary))}
.fhealth-cell-sub{font-size:11px;color:var(--text-muted);margin-top:2px;line-height:1.3}
.fhealth-foot{display:flex;align-items:center;gap:6px;font-size:11.5px;color:color-mix(in srgb,var(--color-warning) 82%,var(--text-primary));margin-top:10px;font-weight:500}
.fhealth-wip{width:100%;background:color-mix(in srgb,var(--text-primary) 4%,transparent);border:0.5px solid color-mix(in srgb,var(--text-primary) 9%,transparent);border-radius:9px;padding:8px 11px;cursor:pointer;font:inherit;text-align:left;flex-wrap:wrap}
.fhealth-wip.warn{color:var(--color-warning)}.fhealth-wip.pos{color:var(--color-success)}
.fhealth-wip:hover{background:color-mix(in srgb,var(--app-accent) 7%,transparent)}
.fhealth-wip-sub{margin-left:auto;font-size:10.5px;color:var(--text-muted);font-weight:500}
.fhealth-foot-ico{width:12px;height:12px;flex-shrink:0;opacity:.8}
@media (max-width:640px){.fhealth-grid{grid-template-columns:1fr;gap:7px}}
/* MONEY HUB (2026-05-24) — retainage ledger card */
.ret-card,.lw-card{background:color-mix(in srgb,var(--text-primary) 3%,var(--card-bg));border:0.5px solid var(--chrome-border);border-radius:var(--radius-group);padding:13px 15px;box-shadow:var(--shadow-e1)}
.ret-card-head,.lw-card-head{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--text-primary);letter-spacing:-.2px;margin-bottom:11px}
.ret-card-ico,.lw-card-ico{width:14px;height:14px;color:var(--app-accent)}
.ret-release-btn,.lw-add-btn{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 11%,transparent);border:none;border-radius:var(--radius-pill);padding:4px 11px;cursor:pointer;display:inline-flex;align-items:center;transition:background var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-spring)}
.ret-release-btn:hover,.lw-add-btn:hover{background:color-mix(in srgb,var(--app-accent) 18%,transparent)}
.ret-release-btn:active,.lw-add-btn:active{transform:scale(.94)}
.ret-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:11px}
.ret-stat{background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);padding:9px 11px}
.ret-stat-ok{background:color-mix(in srgb,var(--color-success) 7%,var(--card-bg))}
.ret-stat-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted)}
.ret-stat-val{font-size:18px;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums;letter-spacing:-.4px;margin-top:3px}
.ret-stat-val.zero{color:var(--text-muted)}
.ret-rel-list,.lw-list{display:flex;flex-direction:column;gap:6px}
.ret-rel-row,.lw-row{display:flex;align-items:center;gap:9px;padding:8px 10px;background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-md)}
.ret-rel-main,.lw-row-main{flex:1;min-width:0}
.ret-rel-amt{font-size:14px;font-weight:700;color:color-mix(in srgb,var(--color-success) 70%,var(--text-primary));font-variant-numeric:tabular-nums}
.ret-rel-meta,.lw-row-meta{font-size:11px;color:var(--text-muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ret-rel-del,.lw-del,.lw-gen{flex-shrink:0;background:none;border:none;color:var(--text-muted);cursor:pointer;padding:5px;border-radius:var(--radius-sm);display:inline-flex;transition:color var(--motion-fast),background var(--motion-fast)}
.ret-rel-del:hover,.lw-del:hover{color:var(--color-error);background:color-mix(in srgb,var(--color-error) 10%,transparent)}
.lw-gen:hover{color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 10%,transparent)}
.ret-empty,.lw-empty{font-size:12px;color:var(--text-muted);padding:6px 2px}
/* retainage ledger — held breakdown + release-schedule timeline (feature #8, 2026-06-21) */
.ret-section-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin:13px 0 7px}
.ret-brk-group{margin-bottom:9px}
.ret-brk-head{display:flex;align-items:baseline;gap:7px;font-size:11.5px;font-weight:600;color:var(--text-secondary);margin-bottom:5px}
.ret-brk-tot{margin-left:auto;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums}
.ret-brk-row{display:flex;align-items:center;gap:9px;padding:7px 10px;background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);margin-bottom:5px}
.ret-brk-main{flex:1;min-width:0}
.ret-brk-name{font-size:12.5px;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ret-brk-sub{font-size:11px;color:var(--text-muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ret-brk-amt{flex-shrink:0;font-size:13.5px;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums}
.ret-tl{display:flex;flex-direction:column;gap:0;padding-left:3px}
.ret-tl-item{display:flex;gap:10px;padding:3px 0 11px;position:relative}
.ret-tl-item::before{content:'';position:absolute;left:4px;top:14px;bottom:-3px;width:1.5px;background:var(--chrome-border)}
.ret-tl-item:last-child::before{display:none}
.ret-tl-dot{flex-shrink:0;width:9px;height:9px;border-radius:50%;margin-top:4px;background:color-mix(in srgb,var(--color-success) 80%,var(--card-bg));box-shadow:0 0 0 2px var(--card-bg)}
.ret-tl-up .ret-tl-dot{background:var(--card-bg);border:1.5px solid var(--app-accent)}
.ret-tl-body{min-width:0}
.ret-tl-amt{font-size:13px;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums}
.ret-tl-tag{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--color-success);margin-left:4px}
.ret-tl-tag.up{color:var(--app-accent)}
.ret-tl-meta{font-size:11px;color:var(--text-muted);margin-top:1px}
/* G4-W3-C — editable release-schedule milestone rows */
.ret-ms-body{display:flex;align-items:flex-start;gap:8px;width:100%}
.ret-ms-main{flex:1;min-width:0}
.ret-ms-ctrls{flex-shrink:0;display:flex;align-items:center;gap:4px}
.ret-tl-late .ret-tl-dot{background:color-mix(in srgb,var(--color-warning,#e0905a) 75%,var(--card-bg));border:1.5px solid var(--color-warning,#e0905a)}
.ret-tl-late .ret-tl-tag.up{color:var(--color-warning,#e0905a)}
.ret-ms-rel{font:inherit;font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:999px;border:0.5px solid color-mix(in srgb,var(--app-accent) 40%,transparent);background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent);cursor:pointer;transition:background var(--motion-fast)}
.ret-ms-rel:hover{background:color-mix(in srgb,var(--app-accent) 20%,transparent)}
.ret-ms-act{flex-shrink:0;background:none;border:none;color:var(--text-muted);cursor:pointer;padding:5px;border-radius:var(--radius-sm);display:inline-flex;transition:color var(--motion-fast),background var(--motion-fast)}
.ret-ms-act:hover{color:var(--text-primary);background:color-mix(in srgb,var(--text-primary) 8%,transparent)}
.ret-ms-del:hover{color:var(--color-error);background:color-mix(in srgb,var(--color-error) 10%,transparent)}
.ret-ms-add{font:inherit;font-size:11px;font-weight:700;margin-top:10px;padding:5px 12px;border-radius:999px;border:0.5px solid var(--chrome-border);background:var(--card-bg);color:var(--text-primary);cursor:pointer;display:inline-flex;align-items:center;transition:background var(--motion-fast),border-color var(--motion-fast)}
.ret-ms-add:hover{background:color-mix(in srgb,var(--app-accent) 8%,var(--card-bg));border-color:color-mix(in srgb,var(--app-accent) 40%,var(--chrome-border))}
/* 🐢 §7-C P3.3 (H-deepen) — RETAINAGE COMMAND CENTER: command bar + two peer side panels (sub-held /
   owner-held), each with a stat trio, an aging bar, breakdown doors, and a release-schedule lane. */
/* 🐢 ONE unified SUB-MONEY surface (redone as a single intentional panel, not two cards jammed together).
   The outer .sub-money-surface is the ONLY card. Inside: a shared header, then a 2-col grid of two ZONES
   (retainage | waivers) sharing the exact same tile/type/spacing language, split by a hairline divider —
   so they read as one surface. .ret-cc/.lw-card drop ALL their own card chrome here and become bare zones. */
.sub-money-surface{padding:0;overflow:hidden;margin-top:16px}
.sms-head{display:flex;align-items:center;gap:9px;padding:15px 18px 13px;border-bottom:0.5px solid var(--chrome-border);background:color-mix(in srgb,var(--text-primary) 2%,transparent)}
.sms-head-ico{width:16px;height:16px;color:var(--app-accent);flex:0 0 auto}
.sms-head-t{font-size:14px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary)}
.sms-head-sub{font-size:11.5px;color:var(--text-muted);font-weight:600}
.sub-money-zone{display:grid;grid-template-columns:1fr 1fr;align-items:start}
.sms-zone{padding:16px 18px;min-width:0}
.sms-zone-r{border-left:0.5px solid var(--chrome-border)}
@media(max-width:1100px){ .sub-money-zone{grid-template-columns:1fr} .sms-zone-r{border-left:0;border-top:0.5px solid var(--chrome-border)} }
/* zones are bare — no outer card chrome (the surface owns that now) */
.sms-zone .ret-cc,.sms-zone .lw-card{background:none;border:none;box-shadow:none;padding:0;border-radius:0}
.ret-cc{display:flex;flex-direction:column;gap:13px}
/* the retainage command bar → the zone header row (matches the waiver zone header type) */
.ret-cc-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:0 0 11px;margin:0;border:0}
.ret-cc-title{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--text-muted)}
.ret-cc-title .ret-card-ico{width:13px;height:13px;color:var(--text-muted)}
.ret-cc-tot{display:flex;gap:16px;margin-left:auto}
/* waiver zone header matches the retainage zone header (uppercase muted label) */
.sms-zone .lw-card-head{font-size:12px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--text-muted);margin-bottom:11px;padding-bottom:0}
.sms-zone .lw-card-head .lw-card-ico{width:13px;height:13px;color:var(--text-muted)}
.sms-zone .lw-count{text-transform:none;letter-spacing:0}
.ret-cc-stat{display:flex;flex-direction:column;gap:1px}
.ret-cc-l{font-size:9.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--text-muted)}
.ret-cc-v{font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1}
.ret-cc-v.ok{color:var(--color-success,#2e8b5f)}
.ret-cc-v.zero{color:var(--text-muted)}
.ret-cc-rel{margin-left:0}
.ret-cc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ret-cc-grid.ret-cc-one{grid-template-columns:minmax(0,1fr)}
.ret-side{padding:14px 15px;display:flex;flex-direction:column;gap:11px}
.ret-side-hd{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.ret-side-tag{font-size:11px;font-weight:800;letter-spacing:.02em;color:#fff;background:linear-gradient(135deg,var(--app-accent),color-mix(in srgb,var(--app-accent) 82%,#000));padding:3px 10px;border-radius:var(--radius-pill);box-shadow:0 1px 3px color-mix(in srgb,var(--app-accent) 32%,transparent)}
.ret-side-tag.ret-tag-owner{background:linear-gradient(135deg,var(--color-warning,#d08700),color-mix(in srgb,var(--color-warning) 80%,#000))}
.ret-side-tag.ret-tag-unattr{background:linear-gradient(135deg,var(--text-secondary,#667085),color-mix(in srgb,var(--text-secondary,#667085) 80%,#000))}
.ret-side-cap{font-size:11px;color:var(--text-muted);font-weight:600}
.ret-side-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ret-sstat{display:flex;flex-direction:column;gap:2px;padding:9px 11px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--text-primary) 3.5%,transparent)}
.ret-sstat-l{font-size:9.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:var(--text-muted)}
.ret-sstat-v{font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary);font-variant-numeric:tabular-nums}
.ret-sstat-v.ok{color:var(--color-success,#2e8b5f)}
/* aging bar */
.ret-aging{display:flex;flex-direction:column;gap:6px}
.ret-age-bar{display:flex;height:8px;border-radius:var(--radius-pill);overflow:hidden;background:color-mix(in srgb,var(--text-primary) 6%,transparent)}
.ret-age-seg{display:block;min-width:3px}
.ret-age-seg.ret-age-ok,.ret-age-dot.ret-age-ok{background:var(--color-success,#2e8b5f)}
.ret-age-seg.ret-age-warn,.ret-age-dot.ret-age-warn{background:var(--color-warning,#d08700)}
.ret-age-seg.ret-age-err,.ret-age-dot.ret-age-err{background:var(--color-error,#c0392b)}
.ret-age-legend{display:flex;flex-wrap:wrap;gap:9px}
.ret-age-key{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;color:var(--text-muted);font-variant-numeric:tabular-nums}
.ret-age-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.ret-age-flag{font-size:10.5px;font-weight:700;color:color-mix(in srgb,var(--color-warning) 85%,var(--text-primary));background:color-mix(in srgb,var(--color-warning) 10%,transparent);padding:4px 9px;border-radius:var(--radius-md)}
.ret-brk-list{display:flex;flex-direction:column;gap:5px}
.ret-brk-door{cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
.ret-brk-door:hover{transform:translateY(-1px);box-shadow:var(--shadow-e1)}
.ret-brk-dooric{color:var(--text-muted);margin-left:5px;vertical-align:-1px;opacity:0;transition:opacity var(--motion-fast)}
.ret-brk-door:hover .ret-brk-dooric{opacity:1;color:var(--app-accent)}
.ret-brk-prior{opacity:.62}
.ret-side-empty{font-size:11.5px;color:var(--text-muted);font-style:italic;padding:4px 2px}
.ret-lane{margin-top:2px}
.ret-lane-hd{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);margin:0 0 7px}
.ret-blended,.ret-hist{padding:13px 15px}
.ret-cc-addms{margin-top:-2px}
.ret-rel-wchip{display:inline-flex;align-items:center;gap:3px;font-size:9.5px;font-weight:700;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 12%,transparent);padding:1px 7px;border-radius:var(--radius-pill);margin-left:6px;vertical-align:1px}
/* compact inline empty state (no giant centered void) */
.ret-cc-empty{display:flex;align-items:center;gap:13px;padding:15px 17px;border-radius:var(--radius-group);background:color-mix(in srgb,var(--text-primary) 2.5%,transparent);border:0.5px dashed color-mix(in srgb,var(--chrome-border) 90%,transparent)}
.ret-cc-empty-ico{width:26px;height:26px;flex:0 0 auto;color:var(--app-accent);opacity:.7}
.ret-cc-empty-t{font-size:13px;font-weight:700;color:var(--text-primary)}
.ret-cc-empty-s{font-size:11.5px;color:var(--text-muted);margin-top:2px;line-height:1.4;max-width:640px}
@media(max-width:820px){ .ret-cc-grid{grid-template-columns:1fr} .ret-cc-tot{margin-left:0;width:100%;justify-content:space-between} }
/* lien waiver tracker */
.lw-count{font-size:11.5px;font-weight:600;color:var(--text-muted)}
.lw-row-title{font-size:13px;font-weight:600;color:var(--text-primary)}
.lw-type{font-size:10.5px;font-weight:600;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 11%,transparent);padding:1px 7px;border-radius:var(--radius-pill);margin-left:5px;vertical-align:1px}
.lw-status{flex-shrink:0;border:none;cursor:pointer;font-size:11px;font-weight:700;padding:4px 11px;border-radius:var(--radius-pill);transition:transform var(--motion-fast) var(--ease-spring)}
.lw-status:active{transform:scale(.93)}
.lw-status-requested{background:color-mix(in srgb,var(--color-warning) 15%,transparent);color:color-mix(in srgb,var(--color-warning) 80%,var(--text-primary))}
.lw-status-received{background:color-mix(in srgb,var(--color-success) 15%,transparent);color:color-mix(in srgb,var(--color-success) 78%,var(--text-primary))}
.lw-composer{background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);padding:11px;margin-bottom:11px}
.lw-comp-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lw-comp-grid #lwSub{grid-column:1/-1}
.lw-comp-grid #lwFromPay{grid-column:1/-1}
.lw-comp-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:9px}
.lw-comp-cellhint{font-size:11.5px;font-weight:600;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 9%,transparent);border-radius:var(--radius-md);padding:6px 10px;margin-bottom:9px}
.lw-comp-cellhint b{text-transform:capitalize}
/* 🐢 §7-C P3.3 (H-deepen) — lien-waiver conditionality×stage MATRIX + closeout ladder + cell drawer.
   Tone via fill/dot (never an edge-strip); rounded material cells; the ladder reads L→R as the
   closeout arc; the drawer reuses the .lw-row list. */
.lw-matrix{display:grid;grid-template-columns:88px minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:stretch;margin-top:4px}
.lw-mx-corner{}
.lw-mx-colhd{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);text-align:center;align-self:end;padding-bottom:4px}
.lw-mx-rowhd{display:flex;align-items:center;justify-content:flex-end;font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--text-muted);padding-right:4px;text-align:right;line-height:1.15}
.lw-cell{position:relative;display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;padding:13px 15px;border:0.5px solid var(--chrome-border);border-radius:var(--radius-group);background:var(--card-bg);box-shadow:var(--shadow-e1);cursor:default;font-family:inherit;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast) var(--ease-out),border-color var(--motion-fast)}
.lw-cell[onclick]{cursor:pointer}
.lw-cell[onclick]:hover{transform:translateY(-2px);box-shadow:var(--shadow-e2)}
.lw-cell.open{border-color:color-mix(in srgb,var(--app-accent) 55%,var(--chrome-border));box-shadow:0 0 0 1px color-mix(in srgb,var(--app-accent) 40%,transparent),var(--shadow-e2)}
.lw-cell-dot{position:absolute;top:11px;right:11px;width:8px;height:8px;border-radius:50%;background:var(--text-muted);box-shadow:inset 0 1px 1px rgba(255,255,255,.5),0 1px 2px rgba(0,0,20,.18)}
.lw-cell-ok .lw-cell-dot{background:var(--color-success,#2e8b5f)}
.lw-cell-warn .lw-cell-dot{background:var(--color-warning,#d08700)}
.lw-cell-ok{background:linear-gradient(160deg,color-mix(in srgb,var(--color-success) 9%,var(--card-bg)),var(--card-bg))}
.lw-cell-warn{background:linear-gradient(160deg,color-mix(in srgb,var(--color-warning) 9%,var(--card-bg)),var(--card-bg))}
.lw-cell-empty{background:color-mix(in srgb,var(--text-primary) 2%,var(--card-bg));box-shadow:none;border-style:dashed}
.lw-cell-top{display:flex;align-items:baseline;gap:6px;width:100%}
.lw-cell-n{font-size:24px;font-weight:800;letter-spacing:-.03em;color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1}
.lw-cell-empty .lw-cell-n{color:var(--text-muted);font-weight:600}
.lw-cell-lbl{font-size:11px;color:var(--text-muted);font-weight:600}
.lw-cell-req{margin-left:auto;display:grid;place-items:center;width:24px;height:24px;border:none;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--app-accent) 11%,transparent);color:var(--app-accent);cursor:pointer;opacity:0;transform:scale(.85);transition:opacity var(--motion-fast),transform var(--motion-fast) var(--ease-spring),background var(--motion-fast)}
.lw-cell:hover .lw-cell-req,.lw-cell-req:focus-visible{opacity:1;transform:scale(1)}
.lw-cell-empty:hover .lw-cell-req{opacity:1;transform:scale(1)}
.lw-cell-req:hover{background:color-mix(in srgb,var(--app-accent) 20%,transparent)}
.lw-cell-split{display:flex;flex-wrap:wrap;gap:5px}
.lw-cell-seg{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:var(--radius-pill);letter-spacing:.02em}
.lw-seg-signed{background:color-mix(in srgb,var(--color-success) 15%,transparent);color:color-mix(in srgb,var(--color-success) 82%,var(--text-primary))}
.lw-seg-req{background:color-mix(in srgb,var(--color-warning) 15%,transparent);color:color-mix(in srgb,var(--color-warning) 82%,var(--text-primary))}
.lw-cell-amt{font-size:12px;font-weight:700;color:var(--text-secondary,var(--text-muted));font-variant-numeric:tabular-nums}
.lw-cell-none{font-size:11px;color:var(--text-muted);font-style:italic}
/* closeout ladder — 4 rungs across the Progress→Final arc */
.lw-ladder{display:flex;align-items:stretch;gap:0;margin-top:13px;padding:11px 12px;border-radius:var(--radius-group);background:color-mix(in srgb,var(--text-primary) 2.5%,transparent);border:0.5px solid var(--chrome-border);overflow-x:auto}
.lw-rung{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1 1 0;min-width:64px;text-align:center}
.lw-rung-dot{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-size:12px;font-weight:800;background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-muted);box-shadow:inset 0 0 0 1px var(--chrome-border);transition:background var(--motion-fast),color var(--motion-fast)}
.lw-rung-lbl{font-size:9.5px;line-height:1.25;color:var(--text-muted);font-weight:600}
.lw-rung-lbl b{color:var(--text-secondary,var(--text-primary));font-weight:800}
.lw-rung-active .lw-rung-dot{background:color-mix(in srgb,var(--color-warning) 20%,transparent);color:color-mix(in srgb,var(--color-warning) 85%,var(--text-primary))}
.lw-rung-done .lw-rung-dot{background:var(--color-success,#2e8b5f);color:#fff;box-shadow:0 1px 3px color-mix(in srgb,var(--color-success) 40%,transparent)}
.lw-rung-done .lw-rung-lbl b,.lw-rung-active .lw-rung-lbl b{color:var(--text-primary)}
.lw-rung-arm{flex:0 0 auto;align-self:flex-start;margin-top:12px;width:14px;height:2px;border-radius:2px;background:var(--chrome-border)}
/* the drilled-cell drawer */
.lw-drawer{margin-top:11px;border-top:0.5px solid var(--chrome-border);padding-top:11px;animation:lwDrawerIn var(--motion-base,.22s) var(--ease-out)}
@keyframes lwDrawerIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.lw-drawer-head{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text-secondary,var(--text-muted));margin-bottom:8px}
.lw-drawer-head b{color:var(--text-primary);text-transform:capitalize}
.lw-drawer-x{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:var(--radius-sm);display:inline-flex;transition:color var(--motion-fast),background var(--motion-fast)}
.lw-drawer-x:hover{color:var(--text-primary);background:color-mix(in srgb,var(--text-primary) 7%,transparent)}
.lw-row-signed{color:var(--app-accent)!important}
.lw-door{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:2px 4px;border-radius:var(--radius-sm);display:inline-flex;vertical-align:-1px;margin-left:4px;transition:color var(--motion-fast),background var(--motion-fast)}
.lw-door:hover{color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 10%,transparent)}
@media(max-width:640px){
  .lw-matrix{grid-template-columns:1fr 1fr}
  .lw-mx-corner,.lw-mx-rowhd{display:none}
  .lw-cell::after{content:attr(aria-label);position:absolute;bottom:6px;left:12px;font-size:9px;font-weight:700;text-transform:capitalize;color:var(--text-muted);opacity:.7}
}
/* V127 — AR aging bar (Invoices tab) */
.ar-aging{margin:0 0 14px;padding:11px 13px;border-radius:var(--radius-group);background:color-mix(in srgb,var(--text-primary) 3.5%,transparent);border:0.5px solid var(--chrome-border)}
.ar-aging-head{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);margin-bottom:8px}
.ar-aging-out{font-size:12px;font-weight:700;color:var(--text-primary);text-transform:none;letter-spacing:-.2px;font-variant-numeric:tabular-nums}
.ar-aging-bar{display:flex;height:14px;border-radius:5px;overflow:hidden;gap:2px;background:color-mix(in srgb,var(--text-primary) 6%,transparent)}
.ar-aging-seg{height:100%;transition:width var(--motion-slow) var(--ease-spring)}
.ar-aging-seg:first-child{border-radius:5px 0 0 5px}.ar-aging-seg:last-child{border-radius:0 5px 5px 0}
.ar-aging-legend{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:9px}
.ar-aging-leg{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;color:var(--text-muted);font-variant-numeric:tabular-nums}
.ar-aging-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0}
.co-rollup-clickable{cursor:pointer;border-radius:var(--radius-md);transition:transform var(--motion-fast) var(--ease-out)}
.co-rollup-clickable:hover{transform:translateY(-1px)}
.co-rollup-clickable:hover .co-rollup-tile{box-shadow:var(--shadow-e2)}
.co-rollup-clickable:active{transform:translateY(0) scale(.995)}
.co-rollup-tile{flex:1 1 140px;min-width:120px;background:var(--surface-grad);border:none;border-radius:var(--radius-md);padding:11px 14px;box-shadow:var(--bevel-top),var(--shadow-e2);display:flex;flex-direction:column;gap:3px}
.co-rollup-tile-total{background:linear-gradient(160deg, color-mix(in srgb,var(--app-accent) 12%,var(--card-bg)), var(--card-bg));border-color:color-mix(in srgb,var(--app-accent) 35%,var(--chrome-border));box-shadow:var(--shadow-e2)}
.co-rollup-tile-alert{background:linear-gradient(160deg, color-mix(in srgb,var(--color-error) 12%,var(--card-bg)), var(--card-bg));border-color:color-mix(in srgb,var(--color-error) 38%,var(--chrome-border));box-shadow:var(--shadow-e2)}
.co-rollup-label{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted)}
.co-rollup-val{font-size:21px;font-weight:800;letter-spacing:-.6px;color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1.05}
.co-rollup-val.pos{color:color-mix(in srgb,var(--color-success) 70%,var(--text-primary))}
.co-rollup-val.neg{color:var(--color-error)}
.co-rollup-val.total{color:color-mix(in srgb,var(--app-accent) 78%,var(--text-primary))}
.co-rollup-sub{font-size:10.5px;color:var(--text-muted);font-weight:500}
.co-rollup-op{align-self:center;font-size:18px;font-weight:300;color:var(--text-muted);flex:0 0 auto;padding:0 2px}
@media (max-width:560px){.co-rollup-op{display:none}.co-rollup-tile{flex:1 1 100%}}
.fin-card{border:none;border-radius:var(--radius-lg);padding:14px 16px;margin-bottom:10px;background:var(--surface-grad);box-shadow:var(--bevel-top),var(--shadow-e1);transition:box-shadow var(--motion-base) var(--ease-out),transform var(--motion-fast) var(--ease-spring)}
.fin-card:hover{box-shadow:var(--bevel-top),var(--shadow-e2),var(--glow-accent-soft)}
.fin-table-cell{padding:9px 12px;border-top:0.5px solid var(--chrome-border);color:var(--text-primary);font-size:12.5px;letter-spacing:-.05px}
/* ── Universal data grid (F7 rrt-grid) ── */
/* ── G2: rrt-contact-picker ── */
.rrt-cp-popover{position:absolute;z-index:var(--z-popover-modal);background:var(--surface);border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);box-shadow:0 10px 28px rgba(0,0,0,.18);max-height:320px;overflow-y:auto;min-width:240px;font-family:inherit}
.rrt-cp-popover[hidden]{display:none}
.rrt-cp-empty{padding:14px;color:var(--text-muted);font-size:12.5px;text-align:center}
.rrt-cp-item{display:block;width:100%;text-align:left;padding:8px 12px;cursor:pointer;border:none;background:transparent;border-left:2px solid transparent;font-family:inherit;font-size:13px;color:var(--text-primary);transition:background var(--motion-fast),border-left-color var(--motion-fast)}
.rrt-cp-item:hover,.rrt-cp-item.rrt-cp-active{background:var(--surface-2);border-left-color:var(--app-accent)}
.rrt-cp-item-title{font-size:12.5px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.rrt-cp-item-sub{font-size:11px;color:var(--text-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.rrt-cp-item-badge{display:inline-block;font-size:10px;padding:1px 6px;border-radius:var(--radius-pill);background:var(--surface-2);color:var(--text-muted);margin-left:6px;vertical-align:1px}
/* V77.1 — "+ Create new contact" row at the bottom of the picker. Tinted with
   accent color so it reads as a positive forward action distinct from regular
   contact rows. */
.rrt-cp-item.rrt-cp-create{border-top:0.5px solid var(--chrome-border);border-left-color:transparent;background:color-mix(in srgb, var(--app-accent) 5%, transparent)}
.rrt-cp-item.rrt-cp-create:hover{background:color-mix(in srgb, var(--app-accent) 10%, transparent);border-left-color:var(--app-accent)}
.rrt-cp-item.rrt-cp-create .rrt-cp-item-title{color:var(--app-accent);font-weight:600}
.rrt-cp-item.rrt-cp-create .rrt-cp-create-plus{display:inline-block;width:18px;height:18px;line-height:18px;text-align:center;background:var(--app-accent);color:#fff;border-radius:50%;font-weight:700;margin-right:6px;vertical-align:-3px;font-size:12px}
.rrt-cp-item.rrt-cp-create .rrt-cp-create-typed{color:var(--text-primary);font-weight:500}
.rrt-cp-footer-hint{padding:6px 12px;font-size:10.5px;color:var(--text-muted);border-top:0.5px solid var(--chrome-border)}
input.rrt-cp-bound[data-contact-id]:not([data-contact-id=""]){background-image:linear-gradient(to right,transparent 0,transparent calc(100% - 16px),color-mix(in srgb,var(--app-accent) 18%,transparent) 100%)}
/* ── F7: rrt-grid ── */
/* V69 — rrt-grid: drop the visible card-style border + background when
   embedded inside a parent .modal-section card (avoids card-in-card). The
   toolbar also gets transparent bg when its left side is empty, so the
   CSV button doesn't sit in a lonely grey strip. */
.rrt-grid{font-size:12.5px;background:transparent;border:none;border-radius:var(--radius-md);overflow:hidden}
.rrt-grid-toolbar{display:flex;justify-content:flex-end;align-items:center;padding:4px 0 6px;background:transparent;border-bottom:none;font-size:11.5px;color:var(--text-muted)}
.rrt-grid-toolbar-actions{display:flex;gap:6px;align-items:center}
.rrt-grid-toolbar button{height:26px;padding:0 10px;font-size:11.5px;font-weight:600;border-radius:var(--radius-sm);border:0.5px solid var(--chrome-border);background:var(--surface);color:var(--text-primary);cursor:pointer;font-family:inherit;transition:background var(--motion-fast),transform var(--motion-fast)}
.rrt-grid-toolbar button:hover{background:var(--chrome-bg-hover)}
.rrt-grid-toolbar button:active{transform:scale(.96)}
.rrt-grid-table{width:100%;border-collapse:collapse}
/* V69 — grid headers + cells use transparent bg now that grid is inside
   a parent .modal-section card. */
.rrt-grid-th{text-align:left;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);padding:7px 10px;border-bottom:0.5px solid var(--chrome-border);background:transparent}
.rrt-grid-td{padding:6px 10px;border-bottom:0.5px solid color-mix(in srgb, var(--text-primary) 6%, transparent);font-variant-numeric:tabular-nums;background:transparent}
.rrt-grid-cell{cursor:text;transition:background var(--motion-fast)}
.rrt-grid-cell:hover{background:color-mix(in srgb,var(--app-accent) 8%,transparent)}
.rrt-grid-cell.rrt-grid-readonly{cursor:default}
.rrt-grid-cell.rrt-grid-readonly:hover{background:transparent}
.rrt-grid-cell-editing{padding:0!important}
/* H19: punch-list severity/status row tints */
.rrt-grid-table tr.punch-row-complete > td{opacity:.55;color:var(--text-muted)}
.rrt-grid-table tr.punch-row-high > td{background:color-mix(in srgb,var(--app-danger) 6%,var(--surface))}
/* W3-4 — re-inspect row: warning-toned fill so the foreman spots rework items.
   (2026-06-02 §8.5 — dropped the left accent strip; the row fill carries it.) */
.rrt-grid-table tr.punch-row-reinspect > td{background:color-mix(in srgb,var(--color-warning) 10%,var(--surface))}
.rrt-grid-cell-editing input{width:100%;height:30px;padding:0 10px;border:0;background:var(--card-bg);color:var(--text-primary);font-size:12.5px;font-family:inherit;outline:2px solid var(--app-accent);outline-offset:-2px;font-variant-numeric:tabular-nums}
/* V69 — empty-state row inside rrt-grid: clean centered text, no extra bg
   tile (was adding a nested grey strip below the toolbar). */
.rrt-grid-empty{padding:22px 10px;text-align:center;color:var(--text-muted);font-size:13px;background:transparent}
.rrt-grid-footer{padding:7px 10px;background:var(--chrome-bg);border-top:0.5px solid var(--chrome-border);font-size:11.5px}
.rrt-grid-error{color:var(--err);font-size:11px}
.rrt-grid-num{text-align:right}
/* ── Reusable "wide table -> stacked cards" pattern (2026-05-14 mobile overhaul) ──
   Add class .rrt-stack to a <table> (or .rrt-grid-table). On phones each <tr>
   becomes a card and each <td> becomes a "label: value" row. The label comes
   from each <td>'s data-label attribute; <thead> is hidden. */
/* V116 — cells flagged data-mobile-only are hidden on desktop (where the real
   columns exist) and revealed only inside the stacked phone card. Base rule lives
   OUTSIDE the media query so it applies on every width >640px. */
[data-mobile-only]{display:none}
@media (max-width: 640px) {
  .rrt-stack thead{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  }
  /* thead is intentionally OMITTED from this selector list — the
     visually-hidden rule above must keep its width:1px. Including thead
     here would set width:auto via later-same-specificity cascade,
     re-expand it to content width, and push the page horizontally. */
  .rrt-stack,
  .rrt-stack tbody,
  .rrt-stack tfoot,
  .rrt-stack tr,
  .rrt-stack td{display:block;width:auto}
  .rrt-stack tr{
    background:var(--surface);border:0.5px solid var(--chrome-border);
    border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);
    margin-bottom:var(--space-2);box-shadow:0 1px 2px rgba(0,0,0,.04);
  }
  .rrt-stack td{
    display:flex;justify-content:space-between;gap:var(--space-3);
    padding:var(--space-1) 0;border:none;
    font-variant-numeric:tabular-nums;
  }
  .rrt-stack td::before{
    content:attr(data-label);flex-shrink:0;
    font-size:11px;font-weight:600;color:var(--text-muted);
    text-transform:uppercase;letter-spacing:.3px;
  }
  /* a td flagged data-mobile-primary spans full-width as a heading row */
  .rrt-stack td[data-mobile-primary]{
    display:block;font-size:14px;font-weight:600;color:var(--text-primary);
    padding-bottom:var(--space-2);
  }
  .rrt-stack td[data-mobile-primary]::before{display:none}
  /* Empty-state row ("No rows yet.") — text-align:center has no effect on
     flex children, so special-case it back to block layout and hide the
     empty ::before pseudo-element. */
  .rrt-stack td.rrt-grid-empty{display:block;text-align:center}
  .rrt-stack td.rrt-grid-empty::before{display:none}
  /* A td with no (or empty) data-label falls back to full-width text — no
     flex misalignment. Phase 2 consumers that forget data-label still get
     something reasonable. */
  .rrt-stack td[data-label=""],
  .rrt-stack td:not([data-label]){display:block}
  .rrt-stack td[data-label=""]::before,
  .rrt-stack td:not([data-label])::before{display:none}
  /* a td flagged data-mobile-hide is dropped from the phone card.
     Kept last so source order makes it the final word over the fallback
     rules above. */
  .rrt-stack td[data-mobile-hide]{display:none}

  /* V116 — Contacts directory mobile: a combined identity header (avatar + name +
     sub) and a prominent Call/Text/Email tap-row, shown ONLY in the stacked card.
     The desktop avatar cell + inline phone/email links stay; these add the phone
     ergonomics (big tap targets) the cramped stacked card was missing. */
  .rrt-stack td.cd-m-id{display:flex;align-items:center;gap:11px;padding:2px 0 10px;border-top:none;text-align:left;justify-content:flex-start}
  .rrt-stack td.cd-m-id .cd-m-id-text{flex:1 1 auto;min-width:0}
  .rrt-stack td.cd-m-id::before{display:none}
  .rrt-stack td.cd-m-id .cd-avatar{width:40px;height:40px;font-size:14px;flex-shrink:0}
  .cd-m-id-name{font-size:16px;font-weight:700;color:var(--text-primary);letter-spacing:-.2px;line-height:1.2}
  .cd-m-id-sub{font-size:12.5px;color:var(--text-muted);margin-top:1px}
  /* the cd-m-id header now carries the company/name, so suppress the duplicate
     data-mobile-primary row on the contacts tables only (other rrt-stack tables keep it). */
  .cd-table.rrt-stack td[data-mobile-primary]{display:none}
  .rrt-stack td.cd-m-actrow{display:block;padding:10px 0 2px;border-top:0.5px solid color-mix(in srgb,var(--text-primary) 8%,transparent)}
  .rrt-stack td.cd-m-actrow::before{display:none}
  /* V153 — one coherent mobile action row: comms (Call/Text/Email) as equal-flex
     accent icon pills, then a quiet "⋯" more-button (Edit/Assign/Delete behind a
     bottom sheet). 40px touch targets, compact icon-only — not two oversized rows. */
  .cd-m-acts{display:flex;gap:7px;align-items:stretch}
  .cd-m-act{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;min-height:40px;min-width:40px;padding:0;border:none;border-radius:var(--radius-md);background:color-mix(in srgb,var(--app-accent) 11%,transparent);color:var(--app-accent);font-family:inherit;cursor:pointer;text-decoration:none;box-shadow:inset 0 0.5px 0 color-mix(in srgb,#fff 22%,transparent);transition:transform var(--motion-fast) var(--ease-spring),background var(--motion-fast) var(--ease-out)}
  .cd-m-act:active{transform:scale(.93);background:color-mix(in srgb,var(--app-accent) 20%,transparent)}
  .cd-m-act svg{width:17px;height:17px}
  /* more-button: quiet neutral tone so the comms pills read as primary */
  /* U1 — ⋯ always pins to the right edge of the action row, whether or not the
     contact has call/text/email buttons (was left-aligned + lonely when no comms). */
  .cd-m-act.cd-m-more{flex:0 0 44px;margin-left:auto;background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-secondary);box-shadow:inset 0 0.5px 0 color-mix(in srgb,#fff 14%,transparent)}
  .cd-m-act.cd-m-more:active{background:color-mix(in srgb,var(--text-primary) 14%,transparent)}
  .cd-m-act.cd-m-more svg{width:18px;height:18px}
  /* hide the desktop Edit/Assign/Delete action cell on phones — those live in the
     ⋯ sheet now, so the stacked card isn't two awkward rows of oversized buttons. */
  .cd-table.rrt-stack td[data-label="Actions"]{display:none}

  /* Contacts mobile — Actions cell (Edit/Assign/Delete) has white-space:nowrap
     and right-aligns in the desktop table. On phones inside the stacked card
     it can spill past the card edge and collide with the bottom-right FAB.
     Force wrap + stack the buttons so the card stays inside its own bounds
     and the FAB column stays clear. */
  /* (V153) the desktop Actions cell is now hidden on phones — Edit/Assign/Delete
     live in the ⋯ bottom sheet — so the old wrap-the-buttons rule is gone. */
  /* Phone field — let long numbers wrap inside the value column instead of
     pushing the card width past the viewport (and the FAB column). */
  .cd-table.rrt-stack td[data-label="Phone"]{
    word-break:break-word;
  }
  /* 2026-05-17 📘 V26 — hide the data-label row entirely when the value is
     empty. Was rendering "Status / Contact / Phone / Email" labels with
     blank values, leaving big empty rows in vendor cards that had only a
     company name + status. The :empty pseudo matches a td with no children
     or text. */
  .cd-table.rrt-stack td:empty{display:none}
}
.est-card{border:none;border-radius:var(--radius-lg);padding:14px 16px;margin-bottom:10px;background:var(--surface-grad);box-shadow:var(--bevel-top),var(--shadow-e1);transition:box-shadow var(--motion-base) var(--ease-out),transform var(--motion-fast) var(--ease-spring)}
.est-card:hover{box-shadow:var(--bevel-top),var(--shadow-e2),var(--glow-accent-soft)}
.contact-form-label{grid-column:1/-1;display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif}
/* The type+class descendant selector below outranks the single-class .field-input, so it must
   carry the SAME premium treatment: --radius-md rest radius + the rounded accent focus halo
   (HARD canon rule #7 — rounded focus rings), not the old --radius-sm/thin override. */
.contact-form-label input,.contact-form-label select,.contact-form-label textarea{background:var(--card-bg);border:.5px solid var(--chrome-border);border-radius:var(--radius-md);padding:8px 11px;font-size:13px;font-weight:400;color:var(--text-primary);text-transform:none;letter-spacing:-.05px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;outline:none;-webkit-appearance:none;appearance:none;max-width:100%;transition:background var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast)}
.contact-form-label select{padding-right:28px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238e8e93'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.contact-form-label input:hover,.contact-form-label select:hover,.contact-form-label textarea:hover{background-color:var(--chrome-bg-hover)}
.contact-form-label input:focus,.contact-form-label select:focus,.contact-form-label textarea:focus{background-color:var(--card-bg);border-color:color-mix(in srgb,var(--app-accent) 55%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 18%,transparent)}
/* Premium contact-modal header (avatar-preview hero) + grouped sections + footer */
.cm-form-head{display:flex;align-items:center;gap:14px;margin:-4px 0 18px;padding:0 0 16px;border-bottom:.5px solid color-mix(in srgb,var(--chrome-border) 60%,transparent)}
.cm-form-av{width:54px;height:54px;flex:0 0 54px;border-radius:50%;display:grid;place-items:center;color:#fff;font:800 19px/1 -apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;box-shadow:inset 0 1px 0 rgba(255,255,255,.32),var(--shadow-e2);transition:background var(--motion-base)}
.cm-form-head-t{min-width:0}
.cm-form-kicker{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--app-accent)}
.cm-form-head-t h3{margin:2px 0 3px;font:800 21px/1.1 -apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;letter-spacing:-.02em;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-form-sub{font-size:12.5px;color:var(--text-secondary)}
.cm-sec{margin-top:4px}
.cm-sec + .cm-sec{margin-top:18px}
.cm-sec-h{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--app-accent);margin:0 0 10px;display:flex;align-items:center;gap:10px}
.cm-sec-h::after{content:"";flex:1;height:.75px;background:linear-gradient(90deg,color-mix(in srgb,var(--app-accent) 22%,transparent),transparent)}
@media (max-width:480px){.cm-sec .form-grid{grid-template-columns:1fr !important}}
.cm-form-foot{display:flex;justify-content:flex-end;gap:9px;margin-top:20px;padding-top:16px;border-top:.5px solid color-mix(in srgb,var(--chrome-border) 60%,transparent)}
.cm-form-foot .cm-save{display:inline-flex;align-items:center;gap:7px}
.cm-form-foot .cm-save .ic{width:14px;height:14px}
@media (prefers-reduced-motion:reduce){.cm-form-av{transition:none}}
/* Typed segmented Contact-Type control (replaces the dropdown for a 4-option mutually-exclusive
   field). The track is SOLID — this control lives inside the modal's .gm-scroll scroll container,
   so backdrop-filter is forbidden (canon rule #15, HARD: glass never inside a scroll area). The
   recessed-well look comes from a solid surface tint + inset hairline; the active pill is a solid
   filled accent button that pops on --card-bg. */
.cm-seg{display:flex;gap:4px;padding:4px;border-radius:13px;background:var(--surface-2,var(--surface));box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--text-primary) 8%,transparent);text-transform:none;letter-spacing:normal}
/* 🖇️ C5b — the paired "Other type" select. Sits under the 4 primary pills; goes accent-tinted
   when it holds the live value so it's obvious which half of the control is active. */
.cm-seg-ext{margin-top:6px;text-transform:none;letter-spacing:normal;font-weight:600}
.cm-seg-ext.is-set{border-color:color-mix(in srgb,var(--app-accent) 45%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 12%,transparent)}
.cm-seg-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 6px;border:0;background:transparent;border-radius:10px;font:700 12.5px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;color:var(--text-secondary);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.cm-seg-btn .cm-seg-ic{width:14px;height:14px;flex-shrink:0;opacity:.8}
.cm-seg-btn:hover:not(.is-active){background:color-mix(in srgb,var(--text-primary) 6%,transparent);color:var(--text-primary)}
.cm-seg-btn:active{transform:scale(.96)}
.cm-seg-btn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 30%,transparent)}
.cm-seg-btn.is-active{background:var(--card-bg);color:var(--app-accent);box-shadow:var(--bevel-top),var(--shadow-e1)}
.cm-seg-btn.is-active .cm-seg-ic{opacity:1}
@media (prefers-reduced-motion:reduce){.cm-seg-btn{transition:background var(--motion-fast),color var(--motion-fast)}}
@media (max-width:480px){.cm-seg{flex-wrap:wrap}.cm-seg-btn{flex:1 1 calc(50% - 4px)}}

/* ── Contacts Directory ──────────────────────────────────────────────────── */
/* Desktop: the contacts view is a FIXED column — nothing here scrolls except the
   grid inside .cd-main. (Mobile relaxes to natural scroll below.) */
.contacts-wrap{flex:1;min-height:0;overflow:hidden;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column}
.contacts-wrap .cd-wrap{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.contacts-wrap .cd-topbar,.contacts-wrap .cd-tabs{flex:0 0 auto}
.contacts-wrap #cdTabContent{flex:1;min-height:0;display:flex;flex-direction:column}
.contacts-wrap #cdTabContent .contacts-dir{flex:1;min-height:0}
/* No max-width cap — the Contacts directory fills the page (matches the pass-2 proto, which
   has no width cap); the 1600px cap left a big empty gutter on wide desktops + held the grid
   to 2 columns when 3 fit. */
.cd-wrap         { margin:0 auto; padding:14px 20px 18px; width:100%; box-sizing:border-box; }
/* ============================================================================
   CONTACTS DIRECTORY — Pass-2 (2026-06-04). Faithful port of 13-contacts.html:
   trade rail + alpha/trade-grouped rich .ccard grid + side-peek. All scoped to
   .contacts-dir so .cc-av/.cc-name/.cc-role don't collide with the Overview roster.
   ============================================================================ */
/* Fixed 3-pane app layout (Team-Chat composition): the container is the page MATTE
   with padding + a gap, and each panel (rail / grid / detail) is its own FLOATING
   frosted-glass card — the matte shows through the gaps, like the chat page. No
   section sits on the raw background. Mobile relaxes this below. */
.contacts-dir{display:flex;gap:12px;height:100%;min-height:0;padding:12px;background:var(--app-bg);overflow:hidden}
/* Each panel = a floating frosted-glass card (Team-Chat recipe): --lg-bg + refract
   blur + rounded + edge/elevation shadow + hairline. */
.contacts-dir .cd-rail{width:228px;flex:0 0 228px;padding:16px 12px;background:var(--lg-bg);backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract);border-radius:var(--radius-lg);box-shadow:var(--lg-edge),var(--shadow-e2);border:.5px solid var(--chrome-border);overflow-y:auto}
/* 🖇️ 2026-07-08 — UNSCOPED from `.contacts-dir` (same scoping bug as `.cd-chip`): the project
   full-page contacts rail wants this exact idiom, and a third surface had already hand-copied
   these values into comments ("matches Contacts .cdr-item"). `.cdr-*` names are used nowhere
   else in the file, so there is nothing to collide with. One rail primitive, every surface. */
.cdr-grp{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--text-secondary);padding:0 8px 8px}
.cdr-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:8px 9px;border-radius:10px;font-size:13px;font-weight:600;color:var(--text-secondary);cursor:pointer;border:0;background:transparent;transition:background var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast)}
/* 2026-06-20 — stronger rail hover: an accent-tinted rounded fill + subtle inset ring,
   reads as a real pressable row (was a near-invisible 4% wash). */
.cdr-item:hover{background:color-mix(in srgb,var(--app-accent) 9%,transparent);color:var(--text-primary);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--app-accent) 16%,transparent)}
.cdr-item:active{transform:scale(.985)}
.cdr-item:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 25%,transparent)}
/* V-ctl1 — active rail row = canonical SELECTED (white/light pill + ACCENT text, near-white on Bayfront) */
.cdr-item.is-active{background:var(--card-bg);color:var(--app-accent);box-shadow:var(--bevel-top),var(--shadow-e1)}
[data-theme="midnight"] .cdr-item.is-active{background:color-mix(in srgb,#fff 86%,var(--surface-3))}
.cdr-item .cdr-ico{width:18px;text-align:center;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}
.cdr-item .cdr-ico .ic{width:15px;height:15px}
.cdr-item .cdr-n{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--text-muted);font-variant-numeric:tabular-nums}
/* 🖇️ read-only breakdown rows — same typography, no pressable affordance (nothing to click). */
.cdr-item.is-static{cursor:default}
.cdr-item.is-static:hover{background:transparent;color:var(--text-secondary);box-shadow:none}
.cdr-item.is-static:active{transform:none}
.cdr-empty{font-size:12px;font-weight:600;color:var(--text-muted);line-height:1.45;padding:2px 9px 4px}
/* 🫙 Clients rail — at-a-glance stat tiles (fill-toned, rounded — NO edge-strips). 2×2 grid. */
.clr-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:2px 4px 14px;margin-bottom:6px;border-bottom:.5px solid var(--chrome-border)}
.clr-tile{background:var(--card-bg);border-radius:12px;padding:9px 10px;box-shadow:var(--bevel-top),var(--shadow-e1);min-height:52px;display:flex;flex-direction:column;justify-content:center;gap:1px}
.clr-tile-v{font-size:19px;font-weight:800;line-height:1;color:var(--text-primary);font-variant-numeric:tabular-nums}
.clr-tile-l{font-size:10.5px;font-weight:700;letter-spacing:.02em;color:var(--text-muted);text-transform:uppercase}
.clr-tile-good{background:color-mix(in srgb,var(--color-success) 12%,var(--card-bg))}
.clr-tile-good .clr-tile-v{color:var(--color-success)}
.clr-tile-attn{background:color-mix(in srgb,var(--color-warning) 15%,var(--card-bg))}
.clr-tile-attn .clr-tile-v{color:var(--color-warning)}
/* 🫙 Clients peek — directory-at-a-glance default panel */
.cd-peek-glance{overflow-y:auto}
.clg-head{padding:2px 2px 12px;border-bottom:.5px solid var(--chrome-border);margin-bottom:10px}
.clg-head-t{font-size:15px;font-weight:800;color:var(--text-primary);letter-spacing:-.01em}
.clg-head-s{font-size:11.5px;font-weight:600;color:var(--text-muted);margin-top:2px}
.clg-sec h4{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--text-secondary);margin:0 0 6px}
.clg-cnt{margin-left:auto;font-size:11px;font-weight:700;color:var(--text-muted);background:var(--surface-2);border-radius:999px;padding:1px 7px;font-variant-numeric:tabular-nums}
.clg-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.clg-dot-attn{background:var(--color-warning)}
.clg-row{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:7px 8px;border:0;background:transparent;border-radius:10px;cursor:pointer;transition:background var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast)}
.clg-row:hover{background:color-mix(in srgb,var(--app-accent) 9%,transparent);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--app-accent) 16%,transparent)}
.clg-row:active{transform:scale(.985)}
.clg-row:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 25%,transparent)}
.clg-av{width:30px;height:30px;flex-shrink:0;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:800;letter-spacing:.01em}
.clg-body{display:flex;flex-direction:column;min-width:0;flex:1}
.clg-name{font-size:13px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clg-meta{font-size:11.5px;font-weight:600;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clg-caret{width:14px;height:14px;flex-shrink:0;color:var(--text-muted);opacity:.6}
.clg-sec+.clg-sec{margin-top:6px}
/* The project full-page rail reuses `.cd-rail`'s glass panel, but it's a GRID COLUMN — the
   directory's `width:228px;flex:0 0 228px` would fight the 290px track. Own the sizing here. */
.ct-ws2-rail .cd-rail{width:100%;flex:0 0 auto;padding:16px 12px;background:var(--lg-bg);
  backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract);
  border-radius:var(--radius-lg);box-shadow:var(--lg-edge),var(--shadow-e2);
  border:.5px solid var(--chrome-border);box-sizing:border-box}
@supports not (backdrop-filter:blur(1px)){.ct-ws2-rail .cd-rail{background:var(--surface)}}
/* .cd-main is a flex column: the head + toolbar are FIXED (flex:0 0 auto), only the
   grid host (#cdGridHost / #clGridHost) scrolls — so nothing ever scrolls behind or
   above the toolbar, and the stats header stays put too. */
/* Grid = its own floating frosted-glass card (matches the rail + detail panel).
   The card cards inside float on this frosted surface. */
/* .cd-main is SOLID — it OWNS the scrolling grid (#cdGridHost scrolls inside it), so glass here
   would repaint every scroll frame (canon rule #15, HARD). Glass=chrome (rail), solid=content;
   depth via elevation (shadow + matte gap), never color. */
.contacts-dir .cd-main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--lg-edge),var(--shadow-e2);border:.5px solid var(--chrome-border)}
/* Glass fallbacks (mandatory per design canon): solid --surface for the RAIL when blur is
   unsupported or the user prefers reduced transparency, so it never renders near-invisible
   (--lg-bg is 70%-transparent without the blur behind it). .cd-main is already solid. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .contacts-dir .cd-rail{background:var(--surface)}
}
@media (prefers-reduced-transparency:reduce){
  .contacts-dir .cd-rail{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}
}
.contacts-dir .cd-main > .cd-head,.contacts-dir .cd-main > .cd-toolbar,.contacts-dir .cd-main > #contactsGuideSlot{flex:0 0 auto}
/* G3-P4 — Guide pill host in the toolbar + the first-use/quick-action slot above the grid */
.contacts-dir .cd-tb-guide-host{display:inline-flex;align-items:center;flex-shrink:0}
.contacts-dir #contactsGuideSlot:empty{display:none}
.contacts-dir #contactsGuideSlot{padding:0 22px 12px}
.contacts-dir #contactsGuideSlot .pg-guide,.contacts-dir #contactsGuideSlot .pg-qa-row{margin-bottom:0}
.contacts-dir .cd-main > #cdGridHost,.contacts-dir .cd-main > #clGridHost{flex:1;min-height:0;overflow-y:auto;padding:8px 22px 28px;scrollbar-width:none}
/* Thin floating overlay scrollbar (canon rule #16) — no reserved gutter; the 8px top padding
   keeps the first .ccard's --shadow-e2 from clipping at the scroll edge (rule #18). */
.contacts-dir #cdGridHost::-webkit-scrollbar,.contacts-dir #clGridHost::-webkit-scrollbar{width:6px;height:6px}
.contacts-dir #cdGridHost::-webkit-scrollbar-thumb,.contacts-dir #clGridHost::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text-primary) 14%,transparent);border-radius:999px}
.contacts-dir #cdGridHost::-webkit-scrollbar-thumb:hover,.contacts-dir #clGridHost::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--text-primary) 26%,transparent)}
.contacts-dir #cdGridHost::-webkit-scrollbar-track,.contacts-dir #clGridHost::-webkit-scrollbar-track{background:transparent}
.contacts-dir .cd-head{margin:0;padding:18px 22px 6px}
.contacts-dir .cd-head .ph-kicker{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--app-accent)}
.contacts-dir .cd-head h2{font-size:24px;font-weight:800;letter-spacing:-.02em;margin:3px 0 4px;color:var(--text-primary);text-transform:capitalize}
.contacts-dir .cd-head .ph-sub{font-size:13px;color:var(--text-secondary);text-transform:capitalize}
/* Metric-command rollup — live counts-by-type as tappable filter doors (canon V85). */
.contacts-dir .cd-head{padding:18px 22px 8px}
.contacts-dir .cd-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.contacts-dir .cd-metric-row{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
/* Lean row (2026-06-28): only the non-redundant signals remain (On-a-project + Compliance) —
   keep them content-sized compact chips, not stretched half-width tiles. */
.contacts-dir .cd-metric-row-lean .cd-metric{flex:0 0 auto;min-width:0;flex-direction:row;align-items:baseline;gap:7px;padding:9px 14px}
.contacts-dir .cd-metric-row-lean .cd-metric .cd-metric-n{font-size:17px}
.contacts-dir .cd-metric{flex:1 1 96px;min-width:84px;display:flex;flex-direction:column;gap:2px;align-items:flex-start;padding:11px 13px;border-radius:14px;background:var(--card-bg);border:.5px solid color-mix(in srgb,var(--text-primary) 6%,transparent);box-shadow:var(--bevel-top),var(--shadow-e1);cursor:pointer;text-align:left;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast),background var(--motion-fast)}
.contacts-dir .cd-metric:hover{transform:translateY(-2px);box-shadow:var(--bevel-top),var(--shadow-e3)}
.contacts-dir .cd-metric:active{transform:translateY(0) scale(.98)}
.contacts-dir .cd-metric:focus-visible{outline:none;box-shadow:var(--bevel-top),0 0 0 3px color-mix(in srgb,var(--app-accent) 32%,transparent)}
.contacts-dir .cd-metric.is-active{box-shadow:var(--bevel-top),var(--shadow-e2),0 0 0 2px color-mix(in srgb,var(--app-accent) 45%,transparent);background:color-mix(in srgb,var(--app-accent) 6%,var(--card-bg))}
.contacts-dir .cd-metric-n{font:800 23px/1 -apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.contacts-dir .cd-metric-l{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
.contacts-dir .cd-metric-onproj .cd-metric-n{color:var(--app-accent)}
.contacts-dir .cd-metric-warning .cd-metric-n{color:color-mix(in srgb,var(--color-warning) 88%,var(--text-primary))}
.contacts-dir .cd-metric-warning{background:linear-gradient(160deg,color-mix(in srgb,var(--color-warning) 12%,var(--card-bg)),var(--card-bg))}
@media (max-width:640px){.contacts-dir .cd-metric{flex:1 1 calc(50% - 5px)}}
@media (prefers-reduced-motion:reduce){.contacts-dir .cd-metric{transition:none}.contacts-dir .cd-metric:hover{transform:none}}
/* Toolbar lives in the FIXED header zone of .cd-main (not sticky) — the grid scrolls
   below it, so cards can never appear above/behind it. */
.contacts-dir .cd-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 22px 14px;background:transparent;border-bottom:.5px solid color-mix(in srgb,var(--chrome-border) 55%,transparent)}
/* search pill */
.contacts-dir .cd-search-pill{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:999px;background:var(--card-bg);border:.5px solid var(--chrome-border);box-shadow:var(--shadow-e1);min-width:200px;flex:0 1 280px}
/* 2026-06-20 — stronger rounded focus ring (reads on midnight too): brighter accent
   border + a fuller 3px accent halo + a faint accent-tint fill so the pill clearly
   activates on focus across all themes (the 18% halo was faint on dark). */
.contacts-dir .cd-search-pill:focus-within{border-color:color-mix(in srgb,var(--app-accent) 70%,var(--chrome-border));background:color-mix(in srgb,var(--app-accent) 5%,var(--card-bg));box-shadow:var(--shadow-e1),0 0 0 3px color-mix(in srgb,var(--app-accent) 30%,transparent)}
.contacts-dir .cd-search-ico{width:14px;height:14px;flex-shrink:0;color:var(--text-muted)}
.contacts-dir .cd-search-input{flex:1;min-width:0;border:0;background:transparent;outline:none;font-size:13px;font-weight:500;color:var(--text-primary);box-shadow:none}
.contacts-dir .cd-search-input:focus,.contacts-dir .cd-search-input:focus-visible{outline:none;box-shadow:none}
.contacts-dir .cd-search-x{border:0;background:transparent;color:var(--text-muted);font-size:17px;line-height:1;cursor:pointer;padding:0 2px;border-radius:50%}
.contacts-dir .cd-search-x:hover{color:var(--text-primary)}
/* pills (filter + new contact) */
.contacts-dir .cd-pill{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:999px;font-size:12.5px;font-weight:700;border:.5px solid var(--chrome-border);background:var(--card-bg);color:var(--text-primary);cursor:pointer;box-shadow:var(--shadow-e1);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
.contacts-dir .cd-pill:hover{transform:translateY(-1px);box-shadow:var(--shadow-e2)}
.contacts-dir .cd-pill:active{transform:translateY(0)}
.contacts-dir .cd-pill .cd-pill-ico{width:14px;height:14px;flex-shrink:0}
.contacts-dir .cd-pill .cd-pill-caret{width:11px;height:11px;flex-shrink:0;color:var(--text-muted);margin-left:2px}
/* V-ctl1 — active filter = SELECTED state (white/light pill, accent text — not blue-filled) */
.contacts-dir .cd-filter-pill.is-active{border-color:transparent;color:var(--app-accent);background:var(--card-bg);box-shadow:var(--shadow-e1),var(--bevel-top)}
[data-theme="midnight"] .contacts-dir .cd-filter-pill.is-active{background:color-mix(in srgb,#fff 86%,var(--surface-3))}
/* V-ctl1 — migrated to the canonical control language (Option F) */
.contacts-dir .cd-pill-primary{background:linear-gradient(180deg,color-mix(in srgb,#fff 14%,var(--app-accent)),var(--app-accent));color:#fff;border-color:transparent;box-shadow:var(--shadow-e2),0 0 0 .5px color-mix(in srgb,var(--app-accent) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.25)}
.contacts-dir .cd-pill-primary:hover{filter:brightness(1.05);box-shadow:var(--shadow-e3),inset 0 1px 0 rgba(255,255,255,.25)}
/* V-ctl1 — ghost = transparent + hairline (Gulf), subtle fill on Bayfront */
.contacts-dir .cd-pill-ghost{background:transparent;color:var(--text-secondary);box-shadow:none}
.contacts-dir .cd-pill-ghost:hover{background:color-mix(in srgb,var(--text-primary) 5%,transparent);color:var(--text-primary);transform:none;box-shadow:none}
[data-theme="midnight"] .contacts-dir .cd-pill-ghost{background:color-mix(in srgb,var(--text-primary) 5%,transparent)}
.contacts-dir .cd-pill-ghost .cd-pill-ico{color:var(--text-muted)}
.contacts-dir .cd-tb-spacer{flex:1 1 auto}
.contacts-dir .cd-filter-wrap{position:relative;display:inline-block}
/* absolute under the pill; inherits the frosted .ctx-menu shell (rounded, blurred, e4 shadow) */
.contacts-dir .cd-filter-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:190px;z-index:60}
/* the options are <button>s — neutralize UA button chrome so they read as real .ctx-item rows */
.contacts-dir .cd-filter-menu .ctx-item{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;font:inherit;font-size:13.5px;text-align:left;border-radius:8px;margin:0 5px;width:calc(100% - 10px)}
.contacts-dir .cd-filter-menu .ctx-item:hover{background:var(--ctx-menu-hover)}
.contacts-dir .cd-filter-menu .ctx-check{width:15px;flex-shrink:0;color:var(--app-accent);font-weight:800;font-size:12px}
.contacts-dir .cd-filter-menu .ctx-item.is-active{color:var(--app-accent);font-weight:700}
.contacts-dir .alpha-head{display:flex;align-items:center;gap:11px;margin:22px 0 13px}
.contacts-dir .alpha-head:first-of-type{margin-top:4px}
.contacts-dir .alpha-head .ah-letter{font-size:15px;font-weight:800;color:var(--app-accent);min-width:24px}
.contacts-dir .alpha-head .ah-rule{flex:1;height:.5px;background:var(--chrome-border)}
.contacts-dir .alpha-head .ah-count{font-size:11.5px;font-weight:700;color:var(--text-muted)}
.contacts-dir .cd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:13px}
.contacts-dir .ccard{position:relative;display:flex;gap:13px;padding:15px 16px;border-radius:16px;background:var(--card-bg);border:.5px solid rgba(0,0,0,.05);box-shadow:var(--shadow-e2);cursor:pointer;text-align:left;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
.contacts-dir .ccard:hover{transform:translateY(-2px);box-shadow:var(--shadow-e3)}
/* selected card — accent ring so the active contact reads at a glance (no transform,
   so it doesn't jump; pairs with the detail panel). */
.contacts-dir .ccard.is-selected{border-color:color-mix(in srgb,var(--app-accent) 55%,transparent);box-shadow:var(--shadow-e2),0 0 0 2px color-mix(in srgb,var(--app-accent) 35%,transparent)}
.contacts-dir .ccard .cc-av{width:46px;height:46px;flex:0 0 46px;border-radius:14px;display:grid;place-items:center;color:#fff;font-size:16px;font-weight:800;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.contacts-dir .ccard .cc-body{flex:1;min-width:0}
/* quiet ⋯ overflow — Apple progressive disclosure: rests hidden, reveals on card
   hover/focus, opens the management bottom-sheet (Edit / Assign / Delete). */
.contacts-dir .ccard .cc-name{font-size:15.5px;font-weight:800;letter-spacing:-.02em;line-height:1.15;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contacts-dir .ccard .cc-role{font-size:11.5px;font-weight:600;color:var(--text-secondary);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contacts-dir .cc-badges{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:9px 0 8px}
/* Contact type chip — UNSCOPED (was `.contacts-dir .cd-chip`, which meant the project
   full-page contact cards + the client cards rendered these exact classes with NO styling
   at all: transparent bg, 0px radius, inherited 16px/400 text). Paired with `.cd-chip` so
   `#ledgerView .ch-main .ch-sub` (a ledger SUBTITLE, unrelated name collision) can never
   match. One chip system, both surfaces. */
.cd-chip{display:inline-block;font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:999px;letter-spacing:.01em;white-space:nowrap}
.cd-chip.ch-sub{background:var(--cd-sub-bg,#dbeaff);color:var(--cd-sub-fg,#005ec4)}
.cd-chip.ch-vendor{background:var(--cd-vendor-bg,#fff5cc);color:var(--cd-vendor-fg,#7a4d00)}
.cd-chip.ch-gc{background:var(--cd-gc-bg,#d1f2dd);color:var(--cd-gc-fg,#1a5c2a)}
.cd-chip.ch-client{background:var(--cd-client-bg,#ece6fb);color:var(--cd-client-fg,#5b2db8)}
.cd-chip.ch-ae{background:var(--cd-ae-bg,#e3e8f7);color:var(--cd-ae-fg,#2d4a8a)}
.contacts-dir .cc-trade{font-size:11px;font-weight:700;color:var(--text-muted)}
.contacts-dir .cc-trade::before{content:"·";margin-right:6px;color:var(--text-muted)}
.contacts-dir .cc-status{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:var(--text-muted)}
.contacts-dir .cc-status i{width:7px;height:7px;border-radius:999px;flex:0 0 7px}
.contacts-dir .cc-status.new i{background:var(--color-success,#34c759)}
.contacts-dir .cc-status.occ i{background:var(--border-strong,#aeaeb2)}
.contacts-dir .cc-status.inactive i{background:var(--surface-3,#d1d1d6)}
.contacts-dir .cc-comp{font-size:10px;font-weight:800;padding:2px 7px;border-radius:999px}
.contacts-dir .cc-comp-expired{background:color-mix(in srgb,var(--color-error) 14%,transparent);color:var(--color-error)}
.contacts-dir .cc-comp-soon{background:color-mix(in srgb,#ff9500 16%,transparent);color:#7a4d00}
.contacts-dir .cc-lines{font-size:11.5px;font-weight:600;color:var(--text-secondary);display:grid;gap:3px}
.contacts-dir .cc-lines .ccl{display:flex;align-items:center;gap:7px;min-width:0}
.contacts-dir .cc-lines .ccl .m-ico{opacity:.5;width:14px;text-align:center;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}
.contacts-dir .cc-lines .ccl .m-ico .ic,.contacts-dir .cc-proj .m-ico .ic{width:12px;height:12px}
.contacts-dir .cc-lines .ccl .ccl-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contacts-dir .cc-proj{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:11px;font-weight:700;color:var(--text-muted)}
.contacts-dir .cc-proj .m-ico{opacity:.6}
/* side-peek */
/* Detail panel = a floating SOLID-white content card (content stays solid for
   legibility per the glass=chrome rule); floats on the matte like the other panels. */
.contacts-dir .cd-peek{width:340px;flex:0 0 340px;background:var(--card-bg);border-radius:var(--radius-lg);box-shadow:var(--lg-edge),var(--shadow-e2);border:.5px solid var(--chrome-border);overflow-y:auto}
.contacts-dir .cd-peek-empty{border-radius:var(--radius-lg)}
.contacts-dir .cd-peek-empty{display:grid;place-items:center}
.contacts-dir .cdp-empty{text-align:center;padding:40px 24px;color:var(--text-muted)}
/* 📒 V161 — directory-pulse insight pane (the no-selection state earns its footprint) */
.contacts-dir .cd-peek-insight{padding:18px 16px}
.contacts-dir .cdp-ins-h{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:12px}
.contacts-dir .cdp-ins-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:6px}
.contacts-dir .cdp-ins-tile{padding:10px 12px;border-radius:12px;background:var(--surface-grad,var(--card-bg));box-shadow:var(--bevel-top),var(--shadow-e1);border:.5px solid color-mix(in srgb,var(--text-primary) 5%,transparent)}
.contacts-dir .cdp-ins-tile .v{font-size:19px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.contacts-dir .cdp-ins-tile .l{font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--text-muted);margin-top:4px}
.contacts-dir .cdp-ins-sub{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-secondary);margin:14px 0 6px}
.contacts-dir .cdp-ins-pq{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:8px;font-size:12px;font-weight:600;color:var(--text-primary)}
.contacts-dir .cdp-ins-pq .pq-dot{width:8px;height:8px;border-radius:999px;flex:0 0 auto}
.contacts-dir .cdp-ins-pq-l{flex:1}
.contacts-dir .cdp-ins-pq-n{font-weight:800;font-variant-numeric:tabular-nums;color:var(--text-secondary)}
.contacts-dir .cdp-ins-recent{display:flex;align-items:center;gap:9px;padding:6px;border-radius:10px;cursor:pointer;transition:background var(--motion-fast)}
.contacts-dir .cdp-ins-recent:hover{background:color-mix(in srgb,var(--app-accent) 7%,transparent)}
.contacts-dir .cdp-ins-recent .cc-av{display:grid;place-items:center;border-radius:999px;color:#fff;font-weight:800;flex:0 0 auto}
.contacts-dir .cdp-ins-recent-n{font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contacts-dir .cdp-empty-ico{font-size:28px;opacity:.5;margin-bottom:8px}
.contacts-dir .cdp-empty-t{font-size:15px;font-weight:800;color:var(--text-primary)}
.contacts-dir .cdp-empty-s{font-size:12.5px;margin-top:3px;max-width:240px}
.contacts-dir .peek-hero{padding:24px 22px 18px;text-align:center;border-bottom:.5px solid var(--chrome-border)}
.contacts-dir .peek-av{width:72px;height:72px;margin:0 auto 12px;border-radius:20px;display:grid;place-items:center;color:#fff;font-size:26px;font-weight:800;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),var(--shadow-e2)}
.contacts-dir .peek-name{font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--text-primary);display:inline-flex;align-items:center;gap:7px;justify-content:center}
/* 2026-06-20 — hero status dot beside the company name (green active / amber occasional /
   grey inactive); tone via the shared cc-status dot classes. */
.contacts-dir .peek-status-dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px;background:var(--text-muted);box-shadow:0 0 0 2px color-mix(in srgb,currentColor 16%,transparent)}
.contacts-dir .peek-status-dot.new{background:var(--color-success)}
.contacts-dir .peek-status-dot.occ{background:var(--color-warning)}
.contacts-dir .peek-status-dot.inactive{background:var(--text-muted)}
.contacts-dir .peek-role{font-size:12.5px;font-weight:600;color:var(--text-secondary);margin-top:2px}
.contacts-dir .peek-actions{display:flex;gap:9px;justify-content:center;margin-top:16px}
/* 2026-06-20 — 44px action DOORS (comfortable touch target), uniform accent-filled,
   specular bevel + spring press. */
.contacts-dir .peek-act{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff;border:0;background:linear-gradient(165deg,color-mix(in srgb,var(--app-accent) 92%,#fff),var(--app-accent));box-shadow:var(--bevel-top),var(--shadow-e2);cursor:pointer;text-decoration:none;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast),filter var(--motion-fast)}
.contacts-dir .peek-act svg{width:19px;height:19px}
.contacts-dir .peek-act:hover{transform:translateY(-2px);box-shadow:var(--bevel-top),var(--shadow-e3),0 6px 16px -8px color-mix(in srgb,var(--app-accent) 55%,transparent);filter:brightness(1.04)}
.contacts-dir .peek-act:active{transform:translateY(0) scale(.94)}
.contacts-dir .peek-act:focus-visible{outline:none;box-shadow:var(--bevel-top),0 0 0 3px color-mix(in srgb,var(--app-accent) 35%,transparent)}
.contacts-dir .peek-sec{padding:16px 22px;border-bottom:.5px solid var(--chrome-border)}
/* 2026-06-20 — section headers read as accent kicker + a hairline divider so each peek
   section is a clear unit (uppercase accent label, divider rule extends from it). */
.contacts-dir .peek-sec h4{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--app-accent);margin:0 0 11px;display:flex;align-items:center;gap:10px}
.contacts-dir .peek-sec h4::after{content:"";flex:1;height:.75px;background:linear-gradient(90deg,color-mix(in srgb,var(--app-accent) 22%,transparent),transparent)}
.contacts-dir .peek-role-chip{margin-left:0}
.contacts-dir .peek-field{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:13px;color:var(--text-primary)}
.contacts-dir .peek-field .pf-ico{width:18px;text-align:center;opacity:.55;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}
.contacts-dir .peek-field .pf-ico .ic{width:15px;height:15px}
.contacts-dir .empty .em-ico .ic{width:28px;height:28px}
/* full value is the source of truth here — wrap (not ellipsis) so a long email reads in full */
.contacts-dir .peek-field .pf-v{font-weight:600;min-width:0;overflow-wrap:anywhere;word-break:break-word}
.contacts-dir .peek-field .pf-l{margin-left:auto;font-size:11px;font-weight:700;color:var(--text-muted);flex-shrink:0}
.contacts-dir .peek-proj{display:flex;align-items:center;gap:9px;padding:8px 0}
.contacts-dir .peek-proj i{width:9px;height:9px;border-radius:999px;flex:0 0 9px}
.contacts-dir .peek-proj .pp-n{font-size:13px;font-weight:700;color:var(--text-primary)}
.contacts-dir .peek-empty-line{font-size:12px;color:var(--text-muted);padding:4px 0}
/* section header with an inline add action (Compliance ＋ Add) */
.contacts-dir .peek-sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:10px}
.contacts-dir .peek-sec-head h4{margin:0;flex:1}
.contacts-dir .peek-sec-add{border:0;background:transparent;color:var(--app-accent);font-size:12px;font-weight:700;cursor:pointer;padding:2px 6px;border-radius:8px}
.contacts-dir .peek-sec-add:hover{background:color-mix(in srgb,var(--app-accent) 10%,transparent)}
/* danger variant of a peek action button (Delete contact) — quiet until hover */
.contacts-dir .peek-act-danger{background:linear-gradient(165deg,color-mix(in srgb,var(--color-error) 90%,#fff),var(--color-error))}
.contacts-dir .peek-act-danger:hover{box-shadow:var(--bevel-top),var(--shadow-e3),0 6px 16px -8px color-mix(in srgb,var(--color-error) 55%,transparent)}
.contacts-dir .peek-act-danger:focus-visible{box-shadow:var(--bevel-top),0 0 0 3px color-mix(in srgb,var(--color-error) 35%,transparent)}
/* 2026-06-26 — real file rows (preview + download). A contained rounded hover tint (no lift inside
   the scrolling pane, per the design canon); per-file actions are small accent glyph buttons. */
.contacts-dir .peek-file{display:flex;align-items:center;gap:10px;padding:8px 10px;margin:4px -6px;border-radius:12px;transition:background var(--motion-fast)}
.contacts-dir .peek-file:hover{background:color-mix(in srgb,var(--app-accent) 7%,transparent)}
.contacts-dir .peek-file-ico{width:30px;height:30px;flex:0 0 30px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--app-accent) 12%,var(--card-bg));color:var(--app-accent)}
.contacts-dir .peek-file-ico .ic{width:15px;height:15px}
.contacts-dir .peek-file-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.contacts-dir .peek-file-name{font-size:12.5px;font-weight:650;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contacts-dir .peek-file-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.contacts-dir .peek-file-type{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)}
.contacts-dir .peek-file-acts{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.contacts-dir .peek-file-act{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;border:0;background:transparent;color:var(--text-muted);cursor:pointer;text-decoration:none;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast)}
.contacts-dir .peek-file-act svg{width:15px;height:15px}
.contacts-dir .peek-file-act:hover{background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent)}
.contacts-dir .peek-file-act:active{transform:scale(.92)}
.contacts-dir .peek-file-act:focus-visible{outline:none;box-shadow:0 0 0 2.5px color-mix(in srgb,var(--app-accent) 35%,transparent)}
/* quiet destructive action at the foot of the sidebar (Delete contact/client) */
.contacts-dir .peek-sec-danger{padding-top:14px}
.contacts-dir .peek-delete-line{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--color-error);font-size:12.5px;font-weight:700;cursor:pointer;padding:7px 10px;margin:0 -10px;border-radius:10px;transition:background var(--motion-fast)}
.contacts-dir .peek-delete-line svg{width:14px;height:14px}
.contacts-dir .peek-delete-line:hover{background:color-mix(in srgb,var(--color-error) 10%,transparent)}
.contacts-dir .peek-delete-line:focus-visible{outline:none;box-shadow:0 0 0 2.5px color-mix(in srgb,var(--color-error) 32%,transparent)}
/* notes display + add affordance */
.contacts-dir .peek-notes{font-size:13px;line-height:1.5;color:var(--text-primary);white-space:pre-wrap;overflow-wrap:anywhere}
.contacts-dir .peek-add-line{border:0;background:transparent;color:var(--app-accent);font-size:13px;font-weight:600;cursor:pointer;padding:2px 0}
.contacts-dir .peek-add-line:hover{text-decoration:underline}
@media (max-width:1100px){ .contacts-dir .cd-peek{display:none} }
/* v2 row 11 — ≤1100px the side-peek opens as a bottom sheet instead (card tap used to
   paint an invisible panel = dead end on iPad-mini landscape). The .contacts-dir wrapper
   carries the scoped peek styles into the body-mounted sheet; neutralize rail sizing and
   out-specify the media display:none (3 classes > 2). The sheet owns the scroll. */
.mobile-sheet .cd-sheet-peek .cd-peek{display:block;width:auto;flex:none;max-height:62svh;overflow-y:auto;box-shadow:none;border:0;background:transparent}
@media (min-width:641px){
  .mobile-sheet.msheet-peek{left:50%;right:auto;width:min(480px,92vw);transform:translate(-50%,100%)}
  .mobile-sheet.msheet-peek.open{transform:translate(-50%,0)}
}
@media (max-width:820px){
  /* relax the fixed-pane model on phones — natural page flow, no internal scroll cap */
  .contacts-dir{flex-direction:column;height:auto;min-height:0}
  .contacts-dir .cd-main{overflow-y:visible}
  .contacts-dir .cd-toolbar{position:static;backdrop-filter:none;-webkit-backdrop-filter:none}
  .contacts-dir .cd-rail{width:auto;flex:none;display:flex;flex-wrap:wrap;gap:6px;border-right:0;border-bottom:.5px solid var(--chrome-border)}
  .contacts-dir .cdr-grp{width:100%}
  .contacts-dir .cdr-item{width:auto}
  .contacts-dir .cdr-item .cdr-n{margin-left:5px}
  .contacts-dir .cd-grid{grid-template-columns:1fr}
}

.cd-topbar       { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; padding:0 2px; }
.cd-topbar h2    { font-size:18px !important; font-weight:700; letter-spacing:-.3px; margin:0; color:var(--text-primary); }
/* V28a (2026-05-17 cont. 14): segmented-control container was invisible on rr-brand
   + sepia because --chrome-bg (translucent white/cream) vanishes against the surface.
   Same hybrid pattern as V27d .btn-ghost: theme-aware translucency base + solid
   --surface-2 override on dark/cream/contrast themes. */
/* Floating pills — each tab is its own content-sized pill (no shared track), so
   there's no stretched empty bar. Active = white pill w/ depth + accent text;
   inactive = quiet, fills on hover. */
.cd-tabs         { display:inline-flex; gap:8px; background:transparent; border-radius:0; padding:0; margin-bottom:14px; box-shadow:none; }
.cd-tab          { padding:7px 16px; font-size:13px; font-weight:600; cursor:pointer; border:.5px solid transparent; background:transparent; color:var(--text-secondary); border-radius:999px; transition:background var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast),border-color var(--motion-fast); font-family:inherit; letter-spacing:-.01em; }
/* V-ctl1 — active sub-tab = canonical SELECTED state (white/light pill, accent text, no blue border) */
.cd-tab.active   { color:var(--app-accent); background:var(--card-bg); border-color:transparent; box-shadow:var(--shadow-e1),var(--bevel-top); }
[data-theme="midnight"] .cd-tab.active{ background:color-mix(in srgb,#fff 86%,var(--surface-3)); }
.cd-tab:hover:not(.active) { color:var(--text-primary); background:color-mix(in srgb,var(--text-primary) 6%,transparent); }
/* V28a: solid container on dark/cream/contrast themes (same hybrid as V27d .btn-ghost) */
/* .cd-tabs is now floating pills (transparent track) on ALL themes — only the
   Reports .rpt-tabs-wrap keeps the dark-theme track treatment. */
[data-theme="midnight"] .rpt-tabs-wrap,
[data-theme="sepia"] .rpt-tabs-wrap,
[data-theme="contrast"] .rpt-tabs-wrap{background:var(--surface-2);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:inset 0 0 0 0.5px color-mix(in srgb, var(--text-primary) 14%, transparent)}
.cd-filters      { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.cd-filters select { -webkit-appearance:none; appearance:none; padding:5px 26px 5px 9px; background-color:var(--chrome-bg); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238e8e93'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 9px center; border:0.5px solid var(--chrome-border); border-radius:var(--radius-md); font-size:12px; font-weight:500; color:var(--text-primary); font-family:inherit; cursor:pointer; outline:none; transition:border-color var(--motion-fast),box-shadow var(--motion-fast),background-color var(--motion-fast); }
.cd-filters select:hover { background-color:var(--chrome-bg-hover); border-color:var(--chrome-border-strong); }
.cd-filters select:focus-visible { outline:none; border-color:var(--app-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--app-accent) 22%, transparent); }
.cd-search       { padding:5px 12px; background:var(--chrome-bg); border:0.5px solid var(--chrome-border); border-radius:var(--radius-sm); font-size:12px; width:min(320px, 40vw); color:var(--text-primary); font-family:inherit; outline:none; transition:border-color var(--motion-fast),box-shadow var(--motion-fast); }
.cd-search:focus-visible { outline:none; border-color:var(--app-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--app-accent) 22%, transparent); }
.cd-client-toolbar { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.cd-table-wrap   { background:var(--surface-grad); border-radius:var(--radius-lg); box-shadow:var(--bevel-top),var(--shadow-e2); overflow:hidden; }
.cd-table        { width:100%; border-collapse:collapse; font-size:12.5px; }
/* V82 — frosted sticky header, pro-app weight + saturated blur */
.cd-table thead th { position:sticky; top:0; z-index:8; text-align:left; padding:11px 14px; background:var(--lg-bg-strong); backdrop-filter:var(--lg-refract); -webkit-backdrop-filter:var(--lg-refract); box-shadow:var(--lg-edge); color:var(--text-secondary); font:600 11px/1.4 -apple-system,"SF Pro Text",system-ui,sans-serif; text-transform:uppercase; letter-spacing:.5px; border-bottom:0.5px solid var(--chrome-border-strong); white-space:nowrap; }
.cd-table td     { padding:11px 14px; border-top:0.5px solid color-mix(in srgb, var(--text-primary) 8%, transparent); vertical-align:middle; color:var(--text-primary); }
.cd-table tbody tr:first-child td { border-top:none; }
.cd-table tbody tr { transition:background var(--motion-fast); }
/* V82 — stronger row hover/press (was barely-visible 5%) */
.cd-table tbody tr:hover td { background:color-mix(in srgb,var(--app-accent) 9%,transparent); cursor:pointer; }
.cd-table tbody tr:active td { background:color-mix(in srgb,var(--app-accent) 14%,transparent); }
/* P4.2 — desktop/iPad row action = a single quiet Edit (de-clutters the old
   3-equal-button wall). The ⋯ overflow + action-sheet (Edit/Assign/Delete) is
   MOBILE-ONLY — it lives in the cd-m-actrow cell (data-mobile-only). */
.cd-actions-cell{display:flex;gap:6px;align-items:center;justify-content:flex-end}
.cd-row-edit{opacity:.78;transition:opacity var(--motion-fast)}
.cd-table tbody tr:hover .cd-row-edit{opacity:1}
/* V82 — initials avatar identity column */
/* V93 — contact→projects connection chip */
.cd-proj-chip{display:inline-flex;align-items:center;margin-left:8px;padding:1px 7px;border-radius:var(--radius-pill);font-size:10px;font-weight:600;letter-spacing:.01em;background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:color-mix(in srgb,var(--app-accent) 72%,var(--text-primary));vertical-align:1px;cursor:default}
.cd-proj-chip svg{color:currentColor;opacity:.8}
/* Compliance status chip on a contact row (expiring/expired document) */
.cd-comp-chip{display:inline-flex;align-items:center;margin-left:8px;padding:1px 7px;border-radius:var(--radius-pill);font-size:10px;font-weight:700;letter-spacing:.02em;vertical-align:1px;cursor:default}
.cd-comp-chip svg{color:currentColor;opacity:.9}
.cd-comp-soon{background:color-mix(in srgb,var(--color-warning) 16%,transparent);color:color-mix(in srgb,var(--color-warning) 78%,var(--text-primary))}
.cd-comp-expired{background:color-mix(in srgb,var(--color-error) 16%,transparent);color:color-mix(in srgb,var(--color-error) 80%,var(--text-primary))}
/* ── S4 Compliance Calendar ── */
/* Match the Trade/Clients outer frame so switching tabs doesn't change width:
   fill #cdTabContent, same 12px inset as .contacts-dir, scroll internally. */
.contacts-wrap #cdTabContent .cmp-cal-wrap{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:18px;padding:12px 12px 24px}
.cmp-cal-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.cmp-cal-h1{font-size:22px;font-weight:700;letter-spacing:-.4px;color:var(--text-primary)}
.cmp-cal-sub{font-size:13px;color:var(--text-secondary);margin-top:2px;letter-spacing:-.05px}
.cmp-cal-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.cmp-tile{display:flex;flex-direction:column;gap:3px;padding:13px 14px;border-radius:15px;border:none;cursor:pointer;text-align:left;background:var(--surface);box-shadow:var(--shadow-e1),inset 0 1px 0 rgba(255,255,255,.1);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-base),background var(--motion-base);position:relative;overflow:hidden}
/* pass-2 G1: status via tinted whole-tile fill (NOT a left edge-spine — hard rule).
   The big .cmp-tile-n number already carries the status color too. */
.cmp-tile-error{background:linear-gradient(160deg,color-mix(in srgb,var(--color-error) 14%,var(--surface)),var(--surface))}
.cmp-tile-warning{background:linear-gradient(160deg,color-mix(in srgb,var(--color-warning) 15%,var(--surface)),var(--surface))}
.cmp-tile-info{background:linear-gradient(160deg,color-mix(in srgb,var(--color-info) 12%,var(--surface)),var(--surface))}
.cmp-tile-muted{background:var(--surface)}
.cmp-tile-n{font-size:25px;font-weight:700;letter-spacing:-.5px;font-variant-numeric:tabular-nums;line-height:1}
.cmp-tile-error .cmp-tile-n{color:var(--color-error)}
.cmp-tile-warning .cmp-tile-n{color:color-mix(in srgb,var(--color-warning) 88%,var(--text-primary))}
.cmp-tile-info .cmp-tile-n{color:var(--color-info)}
.cmp-tile-muted .cmp-tile-n{color:var(--text-secondary)}
.cmp-tile-l{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
.cmp-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-e3),inset 0 1px 0 rgba(255,255,255,.16)}
.cmp-tile:active{transform:translateY(0) scale(.98)}
.cmp-tile.is-zero{opacity:.5}
.cmp-tile.is-active{box-shadow:var(--shadow-e3),0 0 0 2px var(--app-accent),inset 0 1px 0 rgba(255,255,255,.16)}
.cmp-cal-timeline{display:flex;flex-direction:column;gap:18px}
.cmp-cal-month-h{display:flex;align-items:center;gap:9px;margin:0 0 9px;position:sticky;top:0;z-index:2;padding:6px 2px;background:var(--frost-bg,var(--surface));backdrop-filter:var(--frost-blur);-webkit-backdrop-filter:var(--frost-blur);border-radius:9px}
.cmp-cal-month-l{font-size:13px;font-weight:700;letter-spacing:.01em;color:var(--on-app-bg);text-transform:uppercase}
.cmp-cal-month-n{font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-muted);background:color-mix(in srgb,var(--text-primary) 9%,transparent);border-radius:999px;padding:1px 8px}
.cmp-cal-rows{display:flex;flex-direction:column;gap:8px}
.cmp-row{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:11px 14px;border-radius:14px;border:none;cursor:pointer;background:var(--card-bg,var(--surface));box-shadow:var(--shadow-e1),inset 0 1px 0 rgba(255,255,255,.08);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-base);position:relative}
.cmp-row:hover{transform:translateY(-1px);box-shadow:var(--shadow-e3),inset 0 1px 0 rgba(255,255,255,.14)}
.cmp-row:active{transform:scale(.99)}
.cmp-row-date{flex-shrink:0;width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--app-accent) 7%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text-primary) 8%,transparent)}
.cmp-row-day{font-size:18px;font-weight:700;letter-spacing:-.5px;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.cmp-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cmp-row-co{font-size:14px;font-weight:600;letter-spacing:-.15px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-row-meta{display:flex;align-items:center;gap:8px;min-width:0}
.cmp-doc-tag{flex-shrink:0;font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--app-accent) 13%,transparent);color:color-mix(in srgb,var(--app-accent) 92%,var(--text-primary))}
.cmp-row-fn{font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-row-when{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-size:13px;font-weight:700;letter-spacing:-.1px;text-align:right}
.cmp-when-error{color:var(--color-error)}
.cmp-when-warning{color:color-mix(in srgb,var(--color-warning) 86%,var(--text-primary))}
.cmp-when-info{color:var(--color-info)}
.cmp-when-muted{color:var(--text-secondary)}
.cmp-row-exp{font-size:11px;font-weight:500;color:var(--text-muted);letter-spacing:0}
.cmp-row-chev{width:14px;height:14px;flex-shrink:0;color:var(--text-muted);fill:none;stroke:currentColor;stroke-width:2.4;opacity:.55}
.cmp-cal-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:56px 24px;background:var(--surface);border-radius:18px;box-shadow:var(--shadow-e1)}
.cmp-cal-empty-ic{width:40px;height:40px;color:var(--color-success);fill:none;stroke:currentColor;stroke-width:1.6;opacity:.85}
.cmp-cal-empty-t{font-size:17px;font-weight:700;letter-spacing:-.2px;color:var(--text-primary)}
.cmp-cal-empty-s{font-size:13px;color:var(--text-secondary);max-width:420px;line-height:1.5}
@media (max-width:640px){.cmp-cal-tiles{grid-template-columns:repeat(2,1fr)}.cmp-row-fn{display:none}}
@media (prefers-reduced-transparency:reduce){.cmp-cal-month-h{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media (prefers-reduced-motion:reduce){.cmp-tile,.cmp-row{transition:none}.cmp-tile:hover,.cmp-row:hover{transform:none}}
/* ── Contact modal compliance documents section ── */
.rrt-docs-block{margin-top:6px;padding:14px;border-radius:var(--radius-card,14px);background:color-mix(in srgb,var(--app-accent) 4%,var(--surface));box-shadow:var(--shadow-e1)}
.rrt-docs-head{display:flex;align-items:center;gap:7px;font:var(--text-title);font-weight:600;font-size:14px;color:var(--text-primary);margin-bottom:10px}
.rrt-docs-head .rrt-docs-ico{width:15px;height:15px;color:var(--app-accent);opacity:.9}
.rrt-docs-hint,.rrt-docs-empty{margin:0;font-size:12.5px;color:var(--text-secondary,var(--muted));line-height:1.4}
.rrt-doc-list{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
.rrt-doc-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:var(--card-bg,var(--surface));box-shadow:var(--shadow-e1)}
.rrt-doc-type{flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:color-mix(in srgb,var(--app-accent) 74%,var(--text-primary))}
.rrt-doc-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--text-primary)}
.rrt-doc-vmeta{flex:0 0 auto;font-size:11.5px;color:var(--text-muted);white-space:nowrap}
.rrt-doc-pill{flex:0 0 auto;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:var(--radius-pill);white-space:nowrap}
.rrt-doc-pill-valid{background:color-mix(in srgb,var(--color-success) 14%,transparent);color:color-mix(in srgb,var(--color-success) 76%,var(--text-primary))}
.rrt-doc-pill-soon{background:color-mix(in srgb,var(--color-warning) 16%,transparent);color:color-mix(in srgb,var(--color-warning) 78%,var(--text-primary))}
.rrt-doc-pill-expired{background:color-mix(in srgb,var(--color-error) 16%,transparent);color:color-mix(in srgb,var(--color-error) 80%,var(--text-primary))}
.rrt-doc-pill-none{background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-secondary,var(--muted))}
.rrt-doc-acts{flex:0 0 auto;display:flex;gap:4px}
.rrt-doc-act{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:8px;background:transparent;color:var(--text-secondary,var(--muted));cursor:pointer;transition:background var(--motion-fast,.15s),color var(--motion-fast,.15s),transform var(--motion-fast,.15s)}
.rrt-doc-act svg{width:14px;height:14px}
.rrt-doc-act:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--text-primary)}
.rrt-doc-act:active{transform:scale(.92)}
.rrt-doc-act-danger:hover{background:color-mix(in srgb,var(--color-error) 14%,transparent);color:var(--color-error)}
/* 🦅 Contact roster — people & roles + related companies. Reuses .rrt-doc-act buttons. */
.cm-rost-block{display:flex;flex-direction:column;gap:12px}
.cm-rost-list{display:flex;flex-direction:column;gap:7px}
.cm-rost-row{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:12px;background:var(--card-bg,var(--surface));box-shadow:var(--shadow-e1);transition:box-shadow var(--motion-fast,.15s),transform var(--motion-fast,.15s)}
.cm-rost-row:hover{box-shadow:var(--shadow-e2,var(--shadow-e1));transform:translateY(-1px)}
.cm-rost-row.is-primary{background:color-mix(in srgb,var(--app-accent) 7%,var(--card-bg,var(--surface)));box-shadow:0 0 0 1px color-mix(in srgb,var(--app-accent) 26%,transparent),var(--shadow-e1)}
.cm-rost-row.cm-rost-inbound{opacity:.86}
.cm-rost-avatar{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;letter-spacing:.02em;color:color-mix(in srgb,var(--app-accent) 80%,var(--text-primary));background:color-mix(in srgb,var(--app-accent) 15%,transparent)}
.cm-rost-avatar-co svg{width:16px;height:16px}
.cm-rost-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.cm-rost-nl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cm-rost-name{font-size:13.5px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-rost-door{border:none;background:none;padding:0;cursor:pointer;text-align:left;color:var(--app-accent);text-decoration:none}
.cm-rost-door:hover{text-decoration:underline}
.cm-rost-role{flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--app-accent) 13%,transparent);color:color-mix(in srgb,var(--app-accent) 74%,var(--text-primary))}
.cm-rost-role-in{background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-secondary,var(--muted));text-transform:none;letter-spacing:0;font-weight:600}
.cm-rost-primary{flex:0 0 auto;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--app-accent) 88%,black 4%);color:#fff}
.cm-rost-title{font-size:12px;color:var(--text-secondary,var(--muted))}
.cm-rost-contact{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px}
.cm-rost-link{color:var(--text-secondary,var(--muted));text-decoration:none}
.cm-rost-link:hover{color:var(--app-accent);text-decoration:underline}
.cm-rost-dot{color:var(--text-muted);opacity:.5}
.cm-rost-acts{flex:0 0 auto;display:flex;gap:4px}
.cm-rost-inbound-h{margin:4px 2px 0;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)}
.cm-rost-add{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cm-rost-in{flex:1 1 120px;min-width:0}
.cm-rost-addbtn{flex:0 0 auto;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.cm-rost-addbtn .ic{width:14px;height:14px}
/* Wide contact modal — People & Related-companies sit side-by-side; stack on narrow. */
.cm-roster-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:820px){.cm-roster-grid{grid-template-columns:1fr 1fr;gap:22px}.cm-roster-grid .cm-sec{margin-top:0}}
.rrt-doc-add{display:flex;flex-wrap:wrap;align-items:center;gap:8px;position:relative}
/* Item 6 (2026-05-25) — design-system upgrade for the add row: hide the raw
   native file input, style its label as an Apple upload chip; the type select
   becomes field-input + glass-select; date is field-input. */
.rrt-doc-file-native{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.rrt-doc-filebtn{flex:1 1 180px;min-width:150px;display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:var(--radius-md);background:var(--chrome-bg);border:0.5px dashed color-mix(in srgb,var(--text-primary) 22%,transparent);color:var(--text-secondary);font-size:12.5px;cursor:pointer;transition:background var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast)}
.rrt-doc-filebtn:hover{background:var(--chrome-bg-hover);border-color:color-mix(in srgb,var(--app-accent) 45%,transparent);color:var(--text-primary)}
.rrt-doc-filebtn svg{width:14px;height:14px;flex-shrink:0;color:var(--app-accent)}
.rrt-doc-filebtn.has-file{border-style:solid;border-color:color-mix(in srgb,var(--app-accent) 45%,var(--chrome-border));color:var(--text-primary)}
.rrt-doc-filebtn #cmDocFileName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rrt-doc-typesel{flex:0 0 auto;width:auto;min-width:118px;height:36px}
.rrt-doc-expiry-lbl{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--text-secondary,var(--muted))}
.rrt-doc-expiry-lbl .field-input{padding:7px 9px;width:auto}
.rrt-doc-upload-btn{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto}
.rrt-doc-detect{margin-top:8px;min-height:0;font-size:11.5px;color:var(--text-secondary,var(--muted))}
.rrt-doc-detected{color:color-mix(in srgb,var(--color-success) 80%,var(--text-primary));font-weight:600}
/* G5-W3 — additional-insured / coverage tracker fields + pills (fill-toned, rounded, no edge-strips). */
.rrt-hidden{display:none !important}
.rrt-cov-fields{display:none;margin-top:10px;background:color-mix(in srgb,var(--app-accent) 5%,var(--card-bg,var(--surface)));border:0.5px solid color-mix(in srgb,var(--app-accent) 20%,var(--chrome-border));border-radius:12px;padding:12px 14px}
.rrt-cov-fields.rrt-cov-on{display:block}
.rrt-cov-head{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:var(--text-secondary);margin-bottom:10px}
.rrt-cov-head svg{width:13px;height:13px;color:var(--app-accent)}
.rrt-cov-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px}
.rrt-cov-lbl{display:flex;flex-direction:column;gap:4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted)}
.rrt-cov-lbl .field-input{text-transform:none;font-weight:500;letter-spacing:normal;width:100%;box-sizing:border-box}
.rrt-cov-checks{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px;margin-top:2px}
.rrt-cov-check{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary);cursor:pointer}
.rrt-cov-check input{accent-color:var(--app-accent);width:15px;height:15px}
.rrt-cov-pills{display:inline-flex;flex-wrap:wrap;gap:4px;align-items:center;margin:0 2px}
.rrt-cov-pill{font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--surface-2);color:var(--text-secondary);white-space:nowrap}
.rrt-cov-pill.on{background:color-mix(in srgb,var(--color-success,#16a34a) 16%,transparent);color:color-mix(in srgb,var(--color-success,#16a34a) 80%,var(--text-primary))}
.cd-avatar-cell  { width:44px; padding:6px 4px 6px 14px !important; }
.cd-avatar       { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font:600 12px/1 -apple-system,"SF Pro Text",system-ui,sans-serif; color:#fff; letter-spacing:.2px;
                   background:linear-gradient(135deg, var(--app-accent), color-mix(in srgb, var(--app-accent) 65%, #000));
                   box-shadow:var(--shadow-e1), inset 0 1px 0 rgba(255,255,255,.22); }
.cd-avatar::after{ content:attr(data-initials); }
/* V82 — section group header rows (sticky under thead) */
.cd-section-row td { font:600 11px/1.4 -apple-system,"SF Pro Text",system-ui,sans-serif; letter-spacing:.5px; text-transform:uppercase; color:var(--text-secondary); background:var(--frost-bg); backdrop-filter:var(--frost-blur); -webkit-backdrop-filter:var(--frost-blur); position:sticky; top:39px; z-index:7; padding:8px 14px 6px; border-top:none; border-bottom:0.5px solid var(--chrome-border); }
/* V50 — phone/email/address cells become tappable links (tel:/mailto:/maps:). */
.cd-link { color:var(--text-primary); text-decoration:none; transition:color var(--motion-fast); }
.cd-link:hover { color:var(--app-accent); text-decoration:underline; }
.cd-link:active { opacity:.8 }
.cd-type-pill    { display:inline-block; padding:3px 10px; border-radius:var(--radius-pill); font-size:10.5px; font-weight:700; letter-spacing:.01em; }
.cd-type-sub     { background:var(--cd-sub-bg); color:var(--cd-sub-fg); }
.cd-type-vendor  { background:var(--cd-vendor-bg); color:var(--cd-vendor-fg); }
.cd-type-gc      { background:var(--cd-gc-bg); color:var(--cd-gc-fg); }
.cd-type-client  { background:var(--cd-client-bg); color:var(--cd-client-fg); }
/* Sub/vendor status — unified pill geometry + semantic tones (no one-off hexes).
   Matches .status-chip family; a tone dot + tinted bg + saturated solid as fg. */
.cd-status-pill  { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:var(--radius-pill); font-size:10.5px; font-weight:600; letter-spacing:.01em; line-height:1.4; white-space:nowrap; }
.cd-status-pill::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; flex:none; opacity:.85; }
.cd-status-active_frequent   { background:var(--color-pillgreen-bg); color:var(--color-pillgreen); }
.cd-status-active_occasional { background:var(--color-info-bg);    color:var(--color-info); }
.cd-status-active_rarely     { background:var(--color-teal-bg); color:var(--color-teal); }
.cd-status-inactive          { background:var(--color-error-bg);   color:var(--color-error); }
.cd-status-new_unvetted      { background:var(--color-warning-bg); color:var(--color-warning); }
.cd-status-unknown           { background:color-mix(in srgb, var(--text-muted) 14%, transparent); color:var(--text-secondary); }
.cd-status-unknown::before   { opacity:.6; }
/* Conflict modal */
.conflict-grid   { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.conflict-card   { background:var(--surface); border:0.5px solid var(--chrome-border); border-radius:var(--radius-group); padding:12px; font-size:12px; }
.conflict-card h4 { margin:0 0 8px; font-size:13px; color:var(--text-primary); }
.conflict-card dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:2px 10px; }
.conflict-card dt { font-weight:600; color:var(--muted); }
.conflict-card dd { margin:0; word-break:break-word; }
.conflict-actions { display:flex; gap:8px; margin-top:8px; }

/* Admin pending-row form controls — Apple-system chrome */
.pending-detail input,.pending-detail select{transition:box-shadow var(--motion-base),border-color var(--motion-base)}
.pending-detail input:focus,.pending-detail select:focus{outline:none;border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--app-accent) 22%, transparent)}
.pending-reject:hover{background:var(--chrome-bg-hover)}

/* Admin view */
/* pass-3 (_STANDARD.md A): full-width matte (was max-width:1440px centered). */
.admin-wrap{padding:12px;flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;width:100%;box-sizing:border-box}

/* ── Vault Chat page ─────────────────────────────────────────────────────── */
.chat-wrap{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.chat-page{display:flex;flex-direction:column;flex:1;max-width:900px;width:100%;margin:0 auto;padding:18px 20px 0;min-height:0;box-sizing:border-box}
.chat-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-shrink:0}
.chat-topbar h2{font-size:20px;font-weight:700;color:var(--text-primary);letter-spacing:-.3px}
.chat-clear-btn{padding:5px 12px;font-size:12px;font-weight:500;color:var(--text-muted);background:var(--surface-2);border:0.5px solid var(--chrome-border);border-radius:var(--radius-btn-sm);cursor:pointer;transition:background var(--motion-base),color var(--motion-base),box-shadow var(--motion-base);outline:none}
.chat-clear-btn:hover{background:var(--surface-3);color:var(--text-primary)}
.chat-clear-btn:focus-visible{outline:none;border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--app-accent) 22%, transparent)}
.chat-thread{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:14px;background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-card);box-shadow:var(--shadow-e2);margin-bottom:10px;min-height:0}
.chat-empty{color:var(--text-muted);font-size:13px;text-align:center;margin:auto;padding:16px;line-height:1.5}
.chat-bubble-row{display:flex;flex-direction:column}
.chat-bubble-row.user{align-items:flex-end}
.chat-bubble-row.assistant{align-items:flex-start}
.chat-bubble{max-width:82%;padding:10px 14px;border-radius:var(--radius-lg);font-size:14px;line-height:1.55;word-break:break-word}
.chat-bubble.user{background:var(--app-accent);color:var(--on-accent);border-bottom-right-radius:4px}
.chat-bubble.assistant{background:var(--surface-2);color:var(--text-primary);border-bottom-left-radius:4px}
.chat-bubble strong{font-weight:600}
.chat-bubble hr{border:none;border-top:0.5px solid var(--chrome-border);margin:6px 0}
.chat-thinking{font-size:13px;color:var(--text-muted);padding:6px 2px}
.chat-input-row{display:flex;gap:8px;align-items:flex-end;padding-bottom:16px;flex-shrink:0}
.chat-textarea{flex:1;resize:none;padding:10px 12px;border:0.5px solid var(--chrome-border);border-radius:var(--radius-input);background:var(--surface);color:var(--text-primary);font-size:16px;font-family:inherit;line-height:1.45;outline:none;transition:border-color var(--motion-base),box-shadow var(--motion-base)}
.chat-textarea:focus{border-color:var(--app-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 20%,transparent)}
/* V39kk — chat-send-btn: Apple press feedback + glass top-edge */
.chat-send-btn{padding:10px 18px;background:var(--app-accent);color:var(--on-accent);border:none;border-radius:var(--radius-btn);cursor:pointer;font-size:14px;font-weight:600;letter-spacing:-.05px;white-space:nowrap;height:44px;transition:opacity var(--motion-fast),transform var(--motion-fast);flex-shrink:0;box-shadow:0 1px 2px rgba(0,0,0,.08),inset 0 0 0 0.5px rgba(255,255,255,.16)}
.chat-send-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.chat-send-btn:not(:disabled):hover{opacity:.92}
.chat-send-btn:not(:disabled):active{transform:scale(.97);opacity:1}
.chat-footer-note{flex-shrink:0;padding:0 2px 10px;font-size:11px;color:var(--text-muted);text-align:center}
.chat-sources{margin-top:8px;display:flex;flex-direction:column;gap:4px;max-width:82%}
.chat-sources-label{font-size:11px;color:var(--text-muted);letter-spacing:.3px;text-transform:uppercase;font-weight:600;margin-bottom:4px;padding-left:2px}
.chat-source-chips{display:flex;flex-wrap:wrap;gap:6px}
.chat-source-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-xl);font-size:12px;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:background var(--motion-base),border-color var(--motion-base),color var(--motion-base);white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis}
.chat-source-chip:hover{background:var(--surface-2);border-color:var(--app-accent);color:var(--app-accent)}
.chat-source-chip-icon{font-size:11px;flex-shrink:0;opacity:.6;display:inline-flex;align-items:center}
@media (max-width: 640px) {
  .chat-wrap{height:auto;overflow:hidden}
  .chat-page{padding:12px 14px 0}
  .chat-topbar{margin-bottom:10px}
  .chat-topbar h2{font-size:17px}
  .chat-thread{padding:10px;gap:8px;border-radius:var(--radius-md);margin-bottom:8px}
  .chat-bubble{max-width:92%;padding:9px 12px;font-size:14px;border-radius:var(--radius-lg)}
  .chat-input-row{gap:6px;padding-bottom:env(safe-area-inset-bottom, 12px);padding-bottom:max(env(safe-area-inset-bottom,0px),12px)}
  .chat-textarea{font-size:16px;padding:9px 11px;border-radius:var(--radius-md)}
  .chat-send-btn{padding:9px 14px;font-size:13px;height:42px;border-radius:var(--radius-md)}
  .chat-footer-note{display:none}
}
.admin-table{width:100%;border-collapse:collapse;font-size:12.5px;color:var(--text-primary);background:var(--card-bg);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-e2),0 0 0 0.5px var(--chrome-border)}
.admin-th{position:sticky;top:0;z-index:1;text-align:left;padding:10px 12px;background:var(--surface);border-bottom:0.5px solid var(--chrome-border-strong);color:var(--text-muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;font-weight:600;white-space:nowrap}
.admin-td{padding:10px 12px;border-top:0.5px solid color-mix(in srgb, var(--text-primary) 8%, transparent);vertical-align:middle}
.admin-table tbody tr:first-child .admin-td{border-top:none}
.admin-user-row{transition:background var(--motion-fast)}
.admin-user-row:hover .admin-td{background:color-mix(in srgb,var(--app-accent) 5%,transparent);cursor:default}
/* V39ooo — admin-role-select smooth hover transition */
.admin-role-select{-webkit-appearance:none;appearance:none;padding:4px 26px 4px 9px;background-color:var(--chrome-bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238e8e93'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);color:var(--text-primary);font-size:12px;font-weight:500;cursor:pointer;font-family:inherit;transition:background-color var(--motion-fast),border-color var(--motion-fast)}
.admin-role-select:hover{background-color:var(--chrome-bg-hover);border-color:var(--chrome-border-strong)}
/* 2026-07-02 📘 — constrain the role select so a long option label (e.g. the owner row) can never widen
   it past its cell and overlap the Status column. max-content keeps it snug to its content, capped. */
.admin-role-select{max-width:100%;width:auto;min-width:96px;text-overflow:ellipsis;box-sizing:border-box}
.admin-td[data-label="Role"]{max-width:130px}
/* Pass-2 — semantic role tint (FILL + border, NOT an edge-strip): the select reads as a
   role chip at rest, stays fully editable. admin=accent, manager=info, office=purple,
   field=warning, viewer=neutral. */
.admin-role-select.rl-admin{color:var(--app-accent);font-weight:700;border-color:color-mix(in srgb,var(--app-accent) 38%,var(--chrome-border));background-color:color-mix(in srgb,var(--app-accent) 11%,var(--card-bg))}
.admin-role-select.rl-manager{color:var(--color-info);font-weight:700;border-color:color-mix(in srgb,var(--color-info) 38%,var(--chrome-border));background-color:color-mix(in srgb,var(--color-info) 11%,var(--card-bg))}
.admin-role-select.rl-office{color:#8e3cc4;font-weight:700;border-color:color-mix(in srgb,#8e3cc4 36%,var(--chrome-border));background-color:color-mix(in srgb,#8e3cc4 10%,var(--card-bg))}
.admin-role-select.rl-finance{color:var(--color-success);font-weight:700;border-color:color-mix(in srgb,var(--color-success) 38%,var(--chrome-border));background-color:color-mix(in srgb,var(--color-success) 11%,var(--card-bg))}
.admin-role-select.rl-field{color:var(--co-pending-fg,#b45309);font-weight:700;border-color:color-mix(in srgb,var(--color-warning) 40%,var(--chrome-border));background-color:color-mix(in srgb,var(--color-warning) 12%,var(--card-bg))}
.admin-role-select.rl-viewer{color:var(--text-secondary);font-weight:600}
/* Item 8 (2026-05-25) — editable status control (status-toned), replaces the
   static login-recency pill. Active=green, Suspended=red, Pending=amber. */
.admin-status-select{-webkit-appearance:none;appearance:none;padding:4px 26px 4px 9px;background-color:var(--chrome-bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238e8e93'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:background-color var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast)}
.admin-status-select.st-active{color:var(--color-success);border-color:color-mix(in srgb,var(--color-success) 40%,var(--chrome-border));background-color:var(--color-success-bg)}
.admin-status-select.st-suspended{color:var(--color-error);border-color:color-mix(in srgb,var(--color-error) 40%,var(--chrome-border));background-color:var(--color-error-bg)}
.admin-status-select.st-pending{color:var(--color-warning);border-color:color-mix(in srgb,var(--color-warning) 40%,var(--chrome-border));background-color:var(--color-warning-bg)}
.admin-status-select:disabled{opacity:.6;cursor:default}
.admin-status-activity{display:block;margin-top:3px;font-size:10px;color:var(--text-muted);letter-spacing:.01em}
.admin-role-select:disabled{opacity:.5;cursor:not-allowed}
.admin-del-btn{background:transparent;border:0.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;padding:4px 10px;font-size:11px;font-weight:600;transition:color var(--motion-fast),border-color var(--motion-fast),background var(--motion-fast);font-family:inherit}
.admin-del-btn:hover{color:var(--app-danger);border-color:var(--app-danger);background:color-mix(in srgb,var(--app-danger) 6%,transparent)}
.admin-reset-btn{background:transparent;border:0.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;padding:4px 10px;font-size:11px;font-weight:600;transition:color var(--motion-fast),border-color var(--motion-fast),background var(--motion-fast);font-family:inherit}
/* 📃 pt.7 — inline "Send invite" pill for never-signed-in rows (Last Login cell) */
.admin-invite-link-btn{display:inline-flex;align-items:center;gap:5px;background:color-mix(in srgb,var(--app-accent) 8%,transparent);border:0.5px solid color-mix(in srgb,var(--app-accent) 28%,transparent);border-radius:999px;color:var(--app-accent);cursor:pointer;padding:3px 10px;font-size:11px;font-weight:600;font-family:inherit;transition:background var(--motion-fast),border-color var(--motion-fast)}
.admin-invite-link-btn svg{width:11px;height:11px}
.admin-invite-link-btn:hover{background:color-mix(in srgb,var(--app-accent) 14%,transparent);border-color:color-mix(in srgb,var(--app-accent) 45%,transparent)}
.admin-invite-link-btn:disabled{opacity:.5;cursor:default}
.admin-reset-btn:hover{color:var(--app-accent);border-color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 6%,transparent)}

/* ── User Management revamp (V-account) ── */
.admin-page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.admin-page-head .aph-titles{min-width:0}
.admin-page-title{margin:0;font-size:30px;font-weight:800;letter-spacing:-.9px;color:var(--on-app-bg);line-height:1.02}
.admin-page-sub{margin:6px 0 0;font-size:13.5px;color:var(--on-app-bg);opacity:.6}
/* Pass-2 (proto 17) — command hero: frosted material band, kicker + title + a REAL-data
   stat sentence + a presence pill (online names from /api/users/presence). All counts are
   the already-computed real values; NO fabricated "integrations healthy". */
.admin-hero{position:relative;overflow:hidden;border-radius:22px;padding:22px 24px;margin-bottom:20px;display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;background:var(--card-bg);box-shadow:var(--shadow-e2),var(--bevel-top);border:.5px solid color-mix(in srgb,var(--app-accent) 7%,rgba(0,0,0,.05))}
.admin-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(130% 90% at 0% 0%,color-mix(in srgb,var(--app-accent) 8%,transparent),transparent 55%)}
.admin-hero .ah-body{position:relative;z-index:1;min-width:0;flex:1}
.admin-hero .ah-kicker{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.admin-hero .ah-title{font-size:28px;font-weight:800;letter-spacing:-.6px;color:var(--text-primary);margin:3px 0 6px;line-height:1.04}
.admin-hero .ah-stat{font-size:13.5px;font-weight:600;color:var(--text-secondary);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.admin-hero .ah-stat b{color:var(--text-primary);font-weight:800;font-variant-numeric:tabular-nums}
.admin-hero .ah-pres{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:color-mix(in srgb,var(--color-success) 12%,var(--card-bg));font-size:12px;font-weight:700;color:var(--text-secondary);box-shadow:var(--bevel-top)}
.admin-hero .ah-actions{position:relative;z-index:1;display:flex;gap:8px;flex-shrink:0;align-items:center}
/* G3-P4 — Guide pill host in the admin hero actions + the first-use/quick-action slot above the grid */
.admin-hero .ah-actions .admin-guide-host{display:inline-flex;align-items:center;flex-shrink:0}
#adminGuideSlot:empty{display:none}
#adminGuideSlot{margin:0 0 18px}
#adminGuideSlot .pg-guide,#adminGuideSlot .pg-qa-row{margin-bottom:0}
@media (max-width:768px){#adminGuideSlot{margin:0 0 14px}}
/* ── S2 #11 — org onboarding checklist ("finish setting up") hero ─────────────────────────────
   Solid-white floating CONTENT panel (legibility first — glass is for chrome). Depth via the
   elevation ladder + bevel, never border-as-spine. Sibling material to .admin-hero; distinguished
   by a warm accent-tinted head orb + a live progress bar. Every open step is a rounded, pressable
   DOOR (DESIGN.md "every metric is a door" + rounded-hover + press-deform rules). */
#adminOnboardingSlot:empty{display:none}
#adminOnboardingSlot{margin:0 0 18px}
.onb-card{position:relative;overflow:hidden;border-radius:20px;padding:20px 22px 8px;background:var(--card-bg);box-shadow:var(--shadow-e2),var(--bevel-top);border:.5px solid color-mix(in srgb,var(--app-accent) 9%,rgba(0,0,0,.05));animation:onbIn var(--motion-base) var(--ease-spring) both}
@keyframes onbIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.onb-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 100% at 100% 0%,color-mix(in srgb,var(--app-accent) 9%,transparent),transparent 52%)}
.onb-head{position:relative;z-index:1;display:flex;align-items:flex-start;gap:14px}
.onb-head-orb{flex-shrink:0;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 90%,#fff),color-mix(in srgb,var(--app-accent) 70%,#000));box-shadow:var(--shadow-e2),inset 0 1px 0 rgba(255,255,255,.35);color:#fff}
.onb-head-orb svg{width:20px;height:20px}
.onb-head-txt{flex:1;min-width:0}
.onb-kicker{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.onb-title{font-size:19px;font-weight:800;letter-spacing:-.4px;color:var(--text-primary);margin:2px 0 3px;line-height:1.1}
.onb-sub{font-size:13px;font-weight:600;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.onb-dismiss{flex-shrink:0;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;border:none;background:transparent;color:var(--text-muted);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.onb-dismiss svg{width:14px;height:14px}
.onb-dismiss:hover{background:color-mix(in srgb,var(--text-muted) 12%,transparent);color:var(--text-secondary)}
.onb-dismiss:active{transform:scale(.9)}
.onb-prog{position:relative;z-index:1;height:6px;border-radius:999px;margin:14px 0 4px;background:color-mix(in srgb,var(--text-muted) 16%,transparent);overflow:hidden}
.onb-prog-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--app-accent) 78%,#fff),var(--app-accent));box-shadow:inset 0 1px 0 rgba(255,255,255,.4);transition:width var(--motion-slow,320ms) var(--ease-spring)}
/* 2-column step grid on wide viewports (uses the card's full width instead of a half-empty
   left column); single column when the card is narrow. Each cell is a subtly-tinted tile so the
   grid reads as structured, not a loose list. */
.onb-steps{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
@media (max-width:820px){.onb-steps{grid-template-columns:1fr}}
.onb-step{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:14px;background:color-mix(in srgb,var(--text-muted) 4%,var(--card-bg));border:.5px solid color-mix(in srgb,var(--text-muted) 10%,transparent);transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast),border-color var(--motion-fast)}
.onb-step[role=button]{cursor:pointer}
.onb-step[role=button]:hover{background:color-mix(in srgb,var(--app-accent) 7%,var(--card-bg));border-color:color-mix(in srgb,var(--app-accent) 22%,transparent);box-shadow:var(--shadow-e1);transform:translateY(-1px)}
.onb-step[role=button]:active{transform:scale(.99)}
.onb-step:focus-visible{outline:none;box-shadow:0 0 0 2.5px color-mix(in srgb,var(--app-accent) 45%,transparent)}
.onb-step.is-done{opacity:.72}
.onb-step-dot{flex-shrink:0;width:22px;height:22px;border-radius:999px;display:grid;place-items:center;border:2px solid color-mix(in srgb,var(--text-muted) 40%,transparent);transition:border-color var(--motion-fast),background var(--motion-fast)}
.onb-step.is-done .onb-step-dot{border-color:var(--color-success);background:var(--color-success)}
.onb-dot-check{width:12px;height:12px;color:#fff}
.onb-step-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.onb-step-label{font-size:14px;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:8px}
.onb-step.is-done .onb-step-label{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--text-muted) 60%,transparent);font-weight:600}
.onb-step-hint{font-size:12px;color:var(--text-secondary);line-height:1.25}
.onb-step-opt{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);padding:2px 6px;border-radius:999px;background:color-mix(in srgb,var(--text-muted) 12%,transparent)}
.onb-step-skip{flex-shrink:0;font-size:11.5px;font-weight:700;color:var(--text-muted);background:transparent;border:none;padding:5px 9px;border-radius:8px;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
.onb-step-skip:hover{background:color-mix(in srgb,var(--text-muted) 12%,transparent);color:var(--text-secondary)}
.onb-step-go{flex-shrink:0;color:color-mix(in srgb,var(--app-accent) 80%,var(--text-muted));display:grid;place-items:center;transition:transform var(--motion-fast) var(--ease-spring)}
.onb-step-go svg{width:16px;height:16px}
.onb-step[role=button]:hover .onb-step-go{transform:translateX(2px)}
/* Collapsed "Finish setup" chip — the recoverable state after dismiss. */
.onb-chip{display:inline-flex;align-items:center;gap:9px;padding:8px 13px 8px 9px;border-radius:999px;border:.5px solid color-mix(in srgb,var(--app-accent) 14%,var(--border));background:var(--card-bg);box-shadow:var(--shadow-e1),var(--bevel-top);cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
.onb-chip:hover{box-shadow:var(--shadow-e2);transform:translateY(-1px)}
.onb-chip:active{transform:scale(.97)}
.onb-chip-orb{width:24px;height:24px;border-radius:999px;display:grid;place-items:center;background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 88%,#fff),var(--app-accent));color:#fff}
.onb-chip-orb svg{width:13px;height:13px}
.onb-chip-txt{font-size:13px;font-weight:700;color:var(--text-primary)}
.onb-chip-count{font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--app-accent);padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
@media (max-width:768px){#adminOnboardingSlot{margin:0 0 14px}.onb-card{padding:18px 16px 6px}.onb-title{font-size:17.5px}.onb-step-hint{display:none}}
@media (prefers-reduced-motion:reduce){.onb-card{animation:none}.onb-prog-fill,.onb-step,.onb-step-go,.onb-dismiss,.onb-chip{transition:none}}
/* Invite button — primary glass CTA w/ specular edge + spring press. */
.admin-invite-btn{box-shadow:var(--shadow-e2),inset 0 1px 0 rgba(255,255,255,.28);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-base)}
.admin-invite-btn:hover{box-shadow:var(--shadow-e3),inset 0 1px 0 rgba(255,255,255,.32);transform:translateY(-1px)}
.admin-invite-btn:active{transform:scale(.97)}
/* Table row — smooth the accent-wash hover (rule at .admin-user-row:hover above). */
.admin-user-row .admin-td{transition:background var(--motion-fast)}
/* Name cell: avatar + identity stack */
.admin-name-cell{display:flex;align-items:center;gap:11px;min-width:0}
.admin-name-cell .anc-id{min-width:0;display:flex;flex-direction:column;gap:1px}
.admin-name-cell .anc-name{font-size:13.5px;font-weight:650;letter-spacing:-.15px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-name-cell .anc-name .anc-you{margin-left:6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 14%,transparent);padding:1px 6px;border-radius:var(--radius-pill);vertical-align:1px}
.admin-name-cell .anc-email{font-size:11.5px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Status pill (derived from last_login recency) */
.admin-status{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--radius-pill);font-size:10.5px;font-weight:650;letter-spacing:.01em;line-height:1.4;white-space:nowrap}
.admin-status::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.admin-status.st-active{background:var(--color-success-bg);color:var(--color-success)}
.admin-status.st-idle{background:color-mix(in srgb,var(--text-muted) 14%,transparent);color:var(--text-secondary)}
.admin-status.st-idle::before{opacity:.55}
.admin-status.st-never{background:var(--color-warning-bg);color:var(--color-warning)}
/* Per-user action button (uniform tactile icon pills w/ inner highlight + spring). */
.admin-act-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:34px;padding:0 11px;background:color-mix(in srgb,var(--text-primary) 5%,transparent);border:0.5px solid var(--chrome-border);border-radius:var(--radius-btn-sm);color:var(--text-secondary);font-size:11.5px;font-weight:600;cursor:pointer;font-family:inherit;letter-spacing:-.05px;box-shadow:inset 0 1px 0 rgba(255,255,255,.14);transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.admin-act-btn svg{width:13px;height:13px}
.admin-act-btn:hover{background:color-mix(in srgb,var(--app-accent) 13%,transparent);color:var(--app-accent);border-color:color-mix(in srgb,var(--app-accent) 32%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 4px color-mix(in srgb,var(--app-accent) 14%,transparent)}
.admin-act-btn:active{transform:scale(.93)}
.admin-act-btn.aab-icon{width:34px;padding:0}
.admin-act-btn.aab-danger:hover{background:color-mix(in srgb,var(--app-danger) 13%,transparent);color:var(--app-danger);border-color:color-mix(in srgb,var(--app-danger) 32%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 4px color-mix(in srgb,var(--app-danger) 14%,transparent)}
.admin-actions-group{display:flex;gap:6px;align-items:center;flex-wrap:nowrap;justify-content:flex-end}
/* Row role select — quiet pill that lifts on hover (tactile, not a bare native box). */
.admin-role-select{box-shadow:inset 0 1px 0 rgba(255,255,255,.12);border-radius:var(--radius-pill)!important;transition:background-color var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast)}
.admin-role-select:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 3px rgba(0,0,0,.06)}
.admin-status-select{border-radius:var(--radius-pill)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
/* V123 📘 — MAX material pass. Content cards = solid surface + specular inner edge
   (--lg-edge) + layered elevation. Panel HEADERS = frosted glass band (chrome floats
   above content per DESIGN.md). Everything springs on hover. */
/* pass-3 (_STANDARD.md A.4-A.5): section = solid raised card (depth via elevation, was --surface-grad tint), theme-aware hairline. */
.admin-panel{position:relative;margin-bottom:16px;border:.5px solid var(--chrome-border);border-radius:var(--radius-card);overflow:hidden;background:var(--card-bg);color:var(--text-primary);box-shadow:var(--shadow-e2);transition:box-shadow var(--motion-base) var(--ease-out),transform var(--motion-base) var(--ease-out)}
.admin-panel > summary,.admin-panel-head{cursor:pointer;list-style:none;padding:15px 20px;font-size:14px;font-weight:700;letter-spacing:-.2px;display:flex;align-items:center;justify-content:space-between;color:var(--text-primary);
  background:var(--frost-bg-strong);-webkit-backdrop-filter:var(--frost-blur);backdrop-filter:var(--frost-blur);border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 7%,transparent)}
.admin-panel-empty > summary,.admin-panel-empty .admin-panel-head{border-bottom:none}
.admin-panel > summary:hover{background:var(--frost-bg)}
.admin-panel > summary::-webkit-details-marker{display:none}
.admin-panel-head-l{display:inline-flex;align-items:center;gap:10px}
.admin-panel-head-l svg{width:15px;height:15px;color:var(--app-accent)}
/* P3.9 — margin-left:auto pins the count to the trailing edge regardless of how many
   flex children the head has (Gavin saw the Recent-Auths count read as centered). */
.admin-count-pill{margin-left:auto;flex:0 0 auto;background:color-mix(in srgb,var(--app-accent) 15%,transparent);color:var(--app-accent);padding:3px 10px;border-radius:var(--radius-pill);font-size:11.5px;font-weight:700;box-shadow:inset 0 0 0 0.5px color-mix(in srgb,var(--app-accent) 24%,transparent)}
/* Summary-tab (auth emails / branding / audit) get a chevron that rotates open. */
.admin-panel > summary{position:relative}
/* V135 — consistent on-brand caret on admin disclosure panels (rotates 90° when open), so the
   expandable affordance reads clearly without the native triangle. */
.admin-panel > summary::after{content:'';flex:0 0 auto;width:7px;height:7px;margin-left:10px;border-right:1.5px solid var(--text-muted);border-bottom:1.5px solid var(--text-muted);transform:rotate(-45deg);transition:transform var(--motion-base) var(--ease-out)}
.admin-panel[open] > summary::after{transform:rotate(45deg)}
/* Stat strip — premium metric tiles: gradient icon chip, specular edge, spring lift. */
.admin-stat-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:22px}
.admin-stat{position:relative;background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-card);box-shadow:var(--shadow-e2),var(--lg-edge);padding:17px 18px;display:flex;flex-direction:column;gap:11px;overflow:hidden;transition:transform var(--motion-base) var(--ease-spring),box-shadow var(--motion-base) var(--ease-out)}
.admin-stat:hover{transform:translateY(-3px);box-shadow:var(--shadow-e3),var(--lg-edge)}
.admin-stat-top{display:flex;align-items:center;gap:11px}
/* 2026-07-02 📘 — admin stat-strip icons → Atira ORBS (lit spheres, white glyph) so the admin console
   shares the same orb language as the Hub + permissions matrix. Tone via --orb (accent/warn/success). */
.admin-stat-ico{--orb:var(--app-accent);width:34px;height:34px;flex-shrink:0;border-radius:50%;color:#fff;display:inline-flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 34% 26%,color-mix(in srgb,var(--orb) 40%,#fff),var(--orb) 62%,color-mix(in srgb,var(--orb) 76%,#000) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 2px color-mix(in srgb,#000 22%,transparent),0 2px 6px color-mix(in srgb,var(--orb) 38%,transparent),0 0 0 .5px color-mix(in srgb,var(--orb) 30%,transparent)}
.admin-stat-ico svg{width:16px;height:16px;color:#fff}
.admin-stat-val{font-size:29px;font-weight:800;letter-spacing:-.8px;color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1}
.admin-stat-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted)}
.admin-stat-attn .admin-stat-val{color:var(--color-warning)}
.admin-stat-attn .admin-stat-ico{--orb:var(--color-warning)}
.admin-stat-attn{border-color:color-mix(in srgb,var(--color-warning) 38%,var(--chrome-border));box-shadow:var(--shadow-e2),var(--lg-edge),0 0 0 1px color-mix(in srgb,var(--color-warning) 18%,transparent)}
/* Live "Online now" tile — success icon chip + a pulsing presence dot. */
.admin-stat-live .admin-stat-ico{--orb:var(--color-success)}
.admin-stat-live .admin-stat-val{color:var(--color-success)}
.admin-online-dot{width:10px;height:10px;border-radius:50%;background:var(--color-success);box-shadow:0 0 0 0 color-mix(in srgb,var(--color-success) 70%,transparent);animation:adminPulse 2.4s var(--ease-out) infinite}
@keyframes adminPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--color-success) 60%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.admin-online-dot{animation:none}}
/* Per-row presence dot on the avatar (online = green ring; offline = no dot). */
.admin-presence-av{position:relative}
/* 2026-07-02 📘 — the online dot MUST use ::before, not ::after: .acct-avatar::after is already the orb
   specular-highlight (a large centered oval at left:50%;top:7%). Re-using ::after made the two rules merge
   on the same pseudo — the dot inherited the orb's width:64%/height:46%/left:50%/transform and rendered as
   a big green blob CENTERED on the photo. ::before is free on .acct-avatar, so the dot anchors cleanly. */
.admin-presence-av.is-online::before{content:'';position:absolute;right:-1px;bottom:-1px;left:auto;top:auto;transform:none;width:11px;height:11px;border-radius:50%;background:var(--color-success);border:2px solid var(--card-bg);box-shadow:0 0 0 0.5px color-mix(in srgb,var(--color-success) 40%,transparent);z-index:3;pointer-events:none}
/* Hero users panel — the primary surface; raised, framed, specular-edged. */
.admin-users-panel{background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-card);box-shadow:var(--shadow-e3),var(--lg-edge);overflow:hidden;margin-top:4px}
/* W2-C — owner-only usage & presence insights */
.admin-insights-panel{margin-top:14px}
.admin-insights-panel .admin-panel-head{border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 7%,transparent)}
.admin-insights-panel .admin-panel-head h3{margin:0;font-size:15px;font-weight:700;letter-spacing:-.25px;color:var(--text-primary);display:inline-flex;align-items:center;gap:10px}
.admin-owner-pill{font-size:10.5px;font-weight:700;letter-spacing:.2px;text-transform:uppercase;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 12%,transparent);border:0.5px solid color-mix(in srgb,var(--app-accent) 30%,transparent);padding:2px 8px;border-radius:var(--radius-pill)}
.admin-insights-table{width:100%;border-collapse:collapse;font-size:13px}
.admin-insights-table th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.2px;text-transform:uppercase;color:var(--text-muted);padding:10px 14px;border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 8%,transparent)}
.admin-insights-table td{padding:10px 14px;border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 5%,transparent);color:var(--text-primary);vertical-align:middle}
.admin-insights-table tr:last-child td{border-bottom:none}
.admin-insights-table .ins-name{font-weight:600}
.admin-insights-table .ins-role{font-size:11px;font-weight:500;color:var(--text-muted);text-transform:capitalize;margin-left:4px}
.admin-insights-table .ins-num{font-variant-numeric:tabular-nums;color:var(--text-secondary);white-space:nowrap}
.admin-insights-table .ins-top{color:var(--text-secondary);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-insights-table .ins-seen{color:var(--text-muted)}
.ins-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:baseline;flex:0 0 auto}
.ins-online{background:#34c759;box-shadow:0 0 0 2px color-mix(in srgb,#34c759 25%,transparent)}
.ins-idle{background:#ff9f0a}
.ins-offline{background:var(--border)}
.ins-legend{padding:12px 14px;font-size:11.5px;color:var(--text-muted);display:flex;gap:14px;flex-wrap:wrap;align-items:center;border-top:0.5px solid color-mix(in srgb,var(--text-primary) 6%,transparent)}
@media (max-width:640px){.admin-insights-table .ins-top{display:none}}
/* 🪻 S3 C15 — Admin › AI Usage. Reuses .ovx-strip/.ovx-tile (stat strip), .fi-seg (window
   control) and .admin-insights-table (per-member rows); only the pieces with no existing
   vocabulary are defined here. Rounded throughout — no hard corners, no colored edge-strips. */
.aiu-window-note{font-size:11.5px;color:var(--text-muted);padding:2px 0 0;font-variant-numeric:tabular-nums}
.aiu-bd-h{font-size:12px;font-weight:650;color:var(--text-secondary);letter-spacing:-.1px;padding:0 0 8px}
.aiu-pu-h{padding-top:16px}
.aiu-chart{padding:14px 16px 10px;border-radius:var(--radius-lg);margin-top:12px}
.aiu-bd-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:10px;margin-top:12px}
.aiu-bd{padding:14px 16px;border-radius:var(--radius-lg);display:flex;flex-direction:column}
/* Empty state — an explicit, centered affordance. A breakdown with no rows (by_tool is empty
   on a fresh org) must never render as a blank void; that reads as broken. */
.aiu-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;padding:20px 10px;min-height:118px}
.aiu-empty-wide{min-height:96px;margin-top:6px;border-radius:var(--radius-lg);background:color-mix(in srgb,var(--text-primary) 3%,transparent)}
.aiu-empty-ic{width:20px;height:20px;color:var(--text-muted);opacity:.5}
.aiu-empty-t{font-size:12.5px;font-weight:560;color:var(--text-secondary)}
.aiu-empty-h{font-size:11.5px;color:var(--text-muted);max-width:30ch;line-height:1.35}
/* Reconciliation note — shown ONLY when undated/future tokens make the daily chart sum to less
   than the headline. Informational, not an error: soft, rounded, no edge-strip. */
.aiu-recon{margin-top:10px;padding:9px 13px;border-radius:var(--radius-lg);font-size:11.5px;line-height:1.4;
  color:var(--text-secondary);background:color-mix(in srgb,var(--color-warning) 9%,transparent)}
/* Groups that recorded calls but no tokens — the donut drops zero-value arcs, so they are named
   here rather than silently disappearing from their own breakdown. */
.aiu-silent{display:flex;flex-direction:column;gap:3px;margin-top:9px;padding-top:8px;border-top:.5px solid var(--border)}
.aiu-silent-i{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.aiu-silent-k{font-size:11.5px;font-weight:560;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aiu-silent-v{font-size:11px;color:var(--text-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.aiu-table{margin-top:2px}
.aiu-actions{display:flex;justify-content:flex-end;padding:12px 0 2px}
.aiu-refresh{font:inherit;font-size:12px;font-weight:560;color:var(--text-secondary);background:transparent;
  border:0.5px solid var(--border);border-radius:var(--radius-md);padding:6px 14px;cursor:pointer;
  transition:background .12s ease,color .12s ease}
.aiu-refresh:hover{background:color-mix(in srgb,var(--app-accent) 8%,transparent);color:var(--text-primary)}
.aiu-refresh:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 40%,transparent)}
/* 🪺 B1.3 client half — the caps editor + per-member grant controls. Rounded fields/pills per
   canon; the asked-pill is a warning-toned capsule beside the member's name, never a row stripe. */
.aiu-caps{padding:14px 16px;border-radius:var(--radius-lg)}
.aiu-caps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 14px}
.aiu-cap-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.aiu-cap-lbl{font-size:11px;font-weight:600;letter-spacing:.15px;color:var(--text-secondary)}
.aiu-cap-field input[type=number],.aiu-cap-field select{width:100%;box-sizing:border-box;min-height:32px;font-size:12.5px;font-family:inherit;color:var(--text-primary);background:var(--surface);border:0.5px solid var(--border);border-radius:10px;padding:6px 9px;font-variant-numeric:tabular-nums;transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
.aiu-cap-field input[type=number]:focus-visible,.aiu-cap-field select:focus-visible{outline:none;border-color:color-mix(in srgb,var(--app-accent) 50%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 18%,transparent)}
.aiu-cap-check{justify-content:flex-end}
.aiu-cap-check input{width:16px;height:16px;accent-color:var(--app-accent);margin:8px 0 6px 1px}
.aiu-caps-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;flex-wrap:wrap}
.aiu-caps-hint{font-size:11.5px;color:var(--text-muted);line-height:1.35;max-width:52ch}
.aiu-caps-save{font-size:12px;font-weight:600;padding:6px 16px;border-radius:999px;border:none;cursor:pointer;background:var(--app-accent);color:var(--on-accent,#fff);font-family:inherit;transition:filter var(--motion-fast),transform var(--motion-fast)}
.aiu-caps-save:hover{filter:brightness(1.06)}
.aiu-caps-save:active{transform:scale(.97)}
.aiu-caps-save:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 30%,transparent)}
.aiu-caps-msg{font-size:11.5px;color:var(--text-muted);padding-top:6px;min-height:0}
.aiu-caps-msg.is-err{color:var(--color-error)}
.aiu-asked-pill{display:inline-block;margin-left:8px;font-size:10.5px;font-weight:650;padding:2px 8px;border-radius:var(--radius-pill);vertical-align:1px;background:color-mix(in srgb,var(--color-warning) 14%,transparent);color:color-mix(in srgb,var(--color-warning) 72%,var(--text-primary))}
.aiu-grant-btn{font:inherit;font-size:11.5px;font-weight:600;color:var(--text-secondary);background:transparent;border:0.5px solid var(--border);border-radius:999px;padding:4px 11px;cursor:pointer;white-space:nowrap;transition:background var(--motion-fast),color var(--motion-fast)}
.aiu-grant-btn:hover{background:color-mix(in srgb,var(--app-accent) 8%,transparent);color:var(--text-primary)}
.aiu-grant-btn:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 40%,transparent)}
.aiu-row-asked .aiu-grant-btn{background:var(--app-accent);border-color:transparent;color:var(--on-accent,#fff)}
.aiu-row-asked .aiu-grant-btn:hover{filter:brightness(1.06);color:var(--on-accent,#fff)}
.aiu-nolimit{font-size:11px;color:var(--text-muted);cursor:help}
.aiu-grant-form{display:inline-flex;align-items:center;gap:6px}
.aiu-grant-form input{width:88px;box-sizing:border-box;min-height:28px;font-size:12px;font-family:inherit;color:var(--text-primary);background:var(--surface);border:0.5px solid var(--border);border-radius:9px;padding:4px 8px;font-variant-numeric:tabular-nums}
.aiu-grant-form input:focus-visible{outline:none;border-color:color-mix(in srgb,var(--app-accent) 50%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 18%,transparent)}
.aiu-grant-go{font:inherit;font-size:11.5px;font-weight:600;padding:4px 11px;border-radius:999px;border:none;cursor:pointer;background:var(--app-accent);color:var(--on-accent,#fff)}
.aiu-grant-go:hover{filter:brightness(1.06)}
.aiu-grant-x{font:inherit;font-size:14px;line-height:1;color:var(--text-muted);background:transparent;border:none;cursor:pointer;padding:3px 5px;border-radius:8px}
.aiu-grant-x:hover{background:color-mix(in srgb,var(--text-primary) 7%,transparent);color:var(--text-primary)}
/* ≤640: the member table keeps the DECISION set (Member · Tokens · Limit · Grant) — In/Out/
   Actions/Tool-calls live in the analytics above; 8 columns cannot fit a phone (456px table in a
   353px body, measured). The asked-pill drops under the name so the Member cell stays narrow. */
@media (max-width:640px){
  .aiu-bd-row{grid-template-columns:1fr}
  .aiu-table th:nth-child(3),.aiu-table td:nth-child(3),.aiu-table th:nth-child(4),.aiu-table td:nth-child(4),
  .aiu-table th:nth-child(5),.aiu-table td:nth-child(5),.aiu-table th:nth-child(6),.aiu-table td:nth-child(6){display:none}
  .aiu-asked-pill{display:block;margin:3px 0 0;width:max-content}
  .aiu-table th,.aiu-table td{padding-left:5px;padding-right:5px}
  .aiu-table th:first-child,.aiu-table td:first-child{padding-left:8px}
  .aiu-grant-btn{padding:4px 8px;font-size:11px}
}
/* B8 — the hero orb chip on the panel summary (reuses .rt-orb-surface; sized to the head row) */
.admin-ins-orb{width:26px;height:26px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center}
.admin-ins-orb svg{width:15px;height:15px}
/* B8 — live stat-strip: floating .rt-panel-solid tiles above the table, real-data rollups. */
.ovx-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;padding:12px 0 4px}
.ovx-tile{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:var(--radius-lg)}
.ovx-tile-ic{width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--app-accent) 10%,transparent);color:var(--app-accent);margin-bottom:3px}
.ovx-tile-ic svg{width:15px;height:15px}
.ovx-tile-v{font-size:22px;font-weight:700;letter-spacing:-.4px;font-variant-numeric:tabular-nums;color:var(--text-primary);display:inline-flex;align-items:center;gap:7px;line-height:1}
.ovx-tile-l{font-size:11.5px;font-weight:500;color:var(--text-muted)}
.ovx-live-dot{width:7px;height:7px;border-radius:50%;background:#34c759;box-shadow:0 0 0 2px color-mix(in srgb,#34c759 25%,transparent);flex:0 0 auto;animation:ovxLivePulse 2.4s ease-in-out infinite}
@keyframes ovxLivePulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.ovx-live-dot{animation:none}}
/* F5-P1 — Owner Oversight: row-as-door + the per-user drawer */
.admin-insights-table .ins-row{cursor:pointer;transition:background .12s ease}
.admin-insights-table .ins-row:hover,.admin-insights-table .ins-row:focus-visible{background:color-mix(in srgb,var(--app-accent) 7%,transparent);outline:none}
.admin-insights-table .ins-row:focus-visible{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--app-accent) 45%,transparent)}
.ins-row-chev{width:12px;height:12px;color:var(--text-muted);opacity:0;margin-left:4px;vertical-align:middle;transition:opacity .12s ease}
.admin-insights-table .ins-row:hover .ins-row-chev,.admin-insights-table .ins-row:focus-visible .ins-row-chev{opacity:.7}
/* drawer — hero */
.ovx-hero{display:flex;align-items:center;gap:14px}
.ovx-hero-av{flex:0 0 auto}
.ovx-hero-av .tc-avatar{width:44px !important;height:44px !important;font-size:17px}
.ovx-hero-id{min-width:0}
.ovx-pres.ins-online{color:#34c759}.ovx-pres.ins-idle{color:#ff9f0a}.ovx-pres.ins-offline{color:var(--text-muted)}
.ovx-fresh{color:var(--text-muted)}
/* drawer — top pages */
.ovx-pages{display:flex;gap:6px;flex-wrap:wrap}
.ovx-page-chip{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--text-primary) 6%,transparent);color:var(--text-secondary)}
/* drawer — activity story */
.ovx-activity{display:flex;flex-direction:column;gap:2px}
.ovx-act{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--radius-md,10px);font-size:12.5px;color:var(--text-primary)}
.ovx-act-link{cursor:pointer;transition:background .12s ease}
.ovx-act-link:hover,.ovx-act-link:focus-visible{background:color-mix(in srgb,var(--accent,#0a84ff) 8%,transparent);outline:none}
.ovx-act-dot{flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--accent,#0a84ff) 60%,transparent)}
.ovx-act-txt{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ovx-act-verb{font-weight:600}
.ovx-act-proj{color:var(--text-secondary)}
.ovx-act-when{flex:0 0 auto;color:var(--text-muted);font-size:11.5px;font-variant-numeric:tabular-nums}
/* drawer — sign-ins */
.ovx-signins{display:flex;flex-direction:column;gap:2px}
.ovx-signin{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:var(--radius-md,10px);font-size:12.5px;color:var(--text-secondary)}
.ovx-signin-ico{flex:0 0 auto;width:13px;height:13px;color:var(--text-muted)}
.ovx-signin-rel{margin-left:auto;color:var(--text-muted);font-size:11.5px;font-variant-numeric:tabular-nums}
/* drawer — digest line (deep-links to F1-V) */
.ovx-digest-line{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:11px 14px;border:none;border-radius:var(--radius-md,12px);background:color-mix(in srgb,var(--text-primary) 5%,transparent);color:var(--text-secondary);font-size:13px;font-family:inherit;cursor:pointer;transition:background .12s ease}
.ovx-digest-line:hover,.ovx-digest-line:focus-visible{background:color-mix(in srgb,var(--accent,#0a84ff) 9%,transparent);outline:none}
.ovx-digest-line strong{color:var(--text-primary);font-weight:600}
.ovx-digest-chev{width:13px;height:13px;color:var(--text-muted);margin-left:auto}
.ovx-section{margin-top:18px}
/* F5-P2 — Owner Oversight controls cluster */
.ovx-controls .admin-dp-section-h{display:flex;align-items:baseline;gap:8px}
.ovx-ctl-sub{font-size:11px;font-weight:500;color:var(--text-muted);text-transform:none;letter-spacing:0}
.ovx-ctl-note{font-size:12px;color:var(--text-muted);background:color-mix(in srgb,var(--text-primary) 5%,transparent);border-radius:var(--radius-md,10px);padding:8px 11px;margin-bottom:10px}
.ovx-ctl-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ovx-ctl-row+.ovx-ctl-row{margin-top:10px}
.ovx-ctl-primary{width:100%;justify-content:center;gap:7px;font-size:13px;font-weight:600}
.ovx-ctl-reason{font-size:11.5px;color:var(--text-muted);text-align:center;margin:6px 0 2px}
.ovx-ctl-quiet{gap:8px}
/* F5-P2 — usage time-window control (reuses .fi-seg; just spacing + sizing here) */
.ovx-window-seg{margin:2px 0 14px;display:inline-flex}
.ovx-window-seg .fi-seg-btn{min-width:46px;justify-content:center}
/* F5-P2 — security-audit actor-filter banner */
.admin-audit-filter{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-secondary);padding:7px 11px;margin-bottom:8px;background:color-mix(in srgb,var(--app-accent) 8%,transparent);border-radius:var(--radius-md,10px)}
.admin-audit-filter b{color:var(--text-primary)}
.admin-audit-filter-x{margin-left:auto;border:none;background:transparent;color:var(--app-accent);font-weight:600;font-size:12px;cursor:pointer;font-family:inherit;padding:2px 6px;border-radius:var(--radius-sm,7px)}
/* Phase B (§B2) — audit chain integrity badge. Apple-clean pill: semantic fill + tinted text,
   no edge-strip (NO colored edge-strips rule). Green = un-doctored, red = tampered. */
.audit-integrity{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;letter-spacing:-0.01em;padding:5px 11px;margin-bottom:9px;border-radius:999px;line-height:1}
.audit-integrity svg{flex:none;opacity:.9}
.audit-integrity-ok{color:var(--green-700,#15803d);background:color-mix(in srgb,var(--green-500,#22c55e) 13%,transparent)}
.audit-integrity-bad{color:var(--red-700,#b91c1c);background:color-mix(in srgb,var(--red-500,#ef4444) 14%,transparent)}
.admin-audit-filter-x:hover{background:color-mix(in srgb,var(--app-accent) 14%,transparent)}
/* Phase C (§C2/§C4) — faceted filter bar + security-signals strip + per-user timeline.
   Apple-clean: rounded, soft fills, semantic dots — NO colored edge-strips, real-data only. */
.sec-flt{display:flex;flex-direction:column;gap:9px;padding:10px 0 12px;border-bottom:0.5px solid var(--border)}
.sec-flt-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sec-flt-sel,.sec-flt-search,.sec-flt-date input{font:inherit;font-size:12.5px;color:var(--text-primary);background:var(--surface-2,color-mix(in srgb,var(--text-primary) 4%,transparent));border:0.5px solid var(--border);border-radius:var(--radius-md,10px);padding:6px 10px;outline:none}
/* 2026-07-02 📘 — audit filter selects: appearance:none + ONE custom SVG caret (was showing the native
   OS arrow → the reported "two arrows"; the glass-select JS popup then handles consistent downward open). */
.sec-flt-sel{-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:28px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238e8e93'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.sec-flt-sel:focus,.sec-flt-search:focus,.sec-flt-date input:focus{border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 16%,transparent)}
.sec-flt-search{flex:1;min-width:160px}
.sec-flt-date{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--text-muted)}
.sec-flt-date input{padding:5px 8px}
.sec-flt-chips{display:inline-flex;gap:6px;flex-wrap:wrap}
.sec-flt-chip{font:inherit;font-size:11.5px;font-weight:600;letter-spacing:-0.01em;padding:5px 11px;border-radius:999px;border:0.5px solid var(--border);background:transparent;color:var(--text-secondary);cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.sec-flt-chip:hover{background:color-mix(in srgb,var(--text-primary) 6%,transparent)}
.sec-flt-chip.is-on.sec-flt-chip-info{background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent);border-color:transparent}
.sec-flt-chip.is-on.sec-flt-chip-notice{background:color-mix(in srgb,#3b82f6 16%,transparent);color:#1d4ed8;border-color:transparent}
.sec-flt-chip.is-on.sec-flt-chip-warning{background:color-mix(in srgb,#f59e0b 18%,transparent);color:#b45309;border-color:transparent}
.sec-flt-chip.is-on.sec-flt-chip-critical{background:color-mix(in srgb,var(--red-500,#ef4444) 16%,transparent);color:var(--red-700,#b91c1c);border-color:transparent}
/* Phase D (§D3) — export buttons (CSV / integrity-stamped JSON). Rounded, frosted, no edge-strips. */
.sec-flt-export{display:inline-flex;gap:7px;margin-left:auto}
.sec-flt-exp{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:11.5px;font-weight:600;letter-spacing:-0.01em;color:var(--text-secondary);background:var(--surface-2,color-mix(in srgb,var(--text-primary) 4%,transparent));border:0.5px solid var(--border);border-radius:999px;padding:5px 12px;cursor:pointer;transition:background .12s,color .12s,box-shadow .12s}
.sec-flt-exp svg{flex:none;opacity:.8}
.sec-flt-exp:hover{background:color-mix(in srgb,var(--app-accent) 11%,transparent);color:var(--app-accent);box-shadow:0 2px 8px color-mix(in srgb,var(--text-primary) 8%,transparent)}
/* severity dot on each audit row */
.admin-audit-dot.sec-dot-info{background:var(--app-accent)}
.admin-audit-dot.sec-dot-notice{background:#3b82f6}
.admin-audit-dot.sec-dot-warning{background:#f59e0b}
.admin-audit-dot.sec-dot-critical{background:var(--red-500,#ef4444)}
.sec-actor-link{font:inherit;color:var(--app-accent);font-weight:600;background:none;border:none;padding:0;cursor:pointer}
.sec-actor-link:hover{text-decoration:underline}
.sec-load-more{display:block;width:100%;margin:10px 0 2px;font:inherit;font-size:12.5px;font-weight:600;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 8%,transparent);border:0.5px solid color-mix(in srgb,var(--app-accent) 22%,transparent);border-radius:var(--radius-md,10px);padding:9px;cursor:pointer}
.sec-load-more:hover{background:color-mix(in srgb,var(--app-accent) 14%,transparent)}
.sec-load-more:disabled{opacity:.55;cursor:default}
/* signals strip */
.sec-signals{display:flex;flex-direction:column;gap:7px;padding:2px 0 11px}
.sec-signals-hd{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
.sec-signals-chips{display:flex;flex-wrap:wrap;gap:7px}
.sec-signal-chip{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:12px;font-weight:600;padding:6px 12px;border-radius:999px;border:0.5px solid var(--border);background:var(--surface-2,color-mix(in srgb,var(--text-primary) 4%,transparent));cursor:pointer;transition:transform .12s,box-shadow .12s}
.sec-signal-chip:hover{transform:translateY(-1px);box-shadow:0 4px 12px color-mix(in srgb,var(--text-primary) 9%,transparent)}
.sec-signal-n{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;font-size:11.5px;font-weight:700;color:#fff}
.sec-signal-l{color:var(--text-primary)}
.sec-signal-warning .sec-signal-n{background:#f59e0b}
.sec-signal-notice .sec-signal-n{background:#3b82f6}
.sec-signal-critical .sec-signal-n{background:var(--red-500,#ef4444)}
.sec-signals-clear{flex-direction:row;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--green-700,#15803d);background:color-mix(in srgb,var(--green-500,#22c55e) 11%,transparent);border-radius:var(--radius-md,10px);padding:9px 13px;margin-bottom:4px}
.sec-signals-clear svg{flex:none;opacity:.85}
/* per-user timeline slide-over */
.admin-dp-timeline-btn{display:inline-flex;align-items:center;gap:6px;margin-top:11px;font:inherit;font-size:12px;font-weight:600;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 9%,transparent);border:0.5px solid color-mix(in srgb,var(--app-accent) 22%,transparent);border-radius:999px;padding:6px 14px;cursor:pointer}
.admin-dp-timeline-btn:hover{background:color-mix(in srgb,var(--app-accent) 15%,transparent)}
.tl-stream{display:flex;flex-direction:column}
.tl-row{display:flex;align-items:flex-start;gap:9px;padding:9px 0;border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 8%,transparent);font-size:12.5px}
.tl-row:last-child{border-bottom:0}
.tl-glyph{flex:none;font-size:13px;line-height:1.3}
.tl-body{flex:1;min-width:0;color:var(--text-secondary);line-height:1.45}
.tl-body b{color:var(--text-primary);text-transform:capitalize}
.tl-dot{display:inline-block;width:7px;height:7px;border-radius:999px;margin-right:5px;vertical-align:middle}
.tl-when{flex:none;font-size:11px;color:var(--text-muted);white-space:nowrap;padding-top:1px}
/* F6-P1 — Document Templates admin panel */
.dtpl-head{display:flex;justify-content:flex-end;padding:8px 0 12px}
.dtpl-table td{vertical-align:middle}
.dtpl-acts{display:flex;gap:6px;justify-content:flex-end;white-space:nowrap}
.dtpl-pill{display:inline-flex;align-items:center;font-size:11px;font-weight:600;padding:2px 9px;border-radius:var(--radius-pill);white-space:nowrap}
.dtpl-stock{background:color-mix(in srgb,var(--text-primary) 7%,transparent);color:var(--text-muted)}
.dtpl-custom{background:color-mix(in srgb,var(--app-accent) 13%,transparent);color:var(--app-accent)}
.dtpl-active{background:color-mix(in srgb,var(--color-success,#30d158) 14%,transparent);color:color-mix(in srgb,var(--color-success,#30d158) 70%,var(--text-primary))}
.dtpl-inactive{background:color-mix(in srgb,var(--text-primary) 7%,transparent);color:var(--text-muted)}
/* Template-maker overhaul (2026-06-17 📘) — Document Templates as a visual gallery: a card per
   template with a real (live-rendered) letterhead thumbnail, badges, and a primary "Open in Studio". */
.dtpl-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;padding:4px 0 6px}
.dtpl-card{position:relative;display:flex;flex-direction:column;border-radius:14px;background:var(--surface-2,var(--surface));box-shadow:var(--shadow-e2,0 1px 3px rgba(0,0,0,.08));overflow:hidden;transition:box-shadow var(--motion-fast),transform var(--motion-fast)}
.dtpl-card:hover{box-shadow:var(--shadow-e4,0 8px 24px -6px rgba(0,0,0,.18));transform:translateY(-2px)}
.dtpl-card.is-inactive{opacity:.62}
.dtpl-card-thumb{position:relative;aspect-ratio:8.5/11;background:#fff;overflow:hidden;border-bottom:0.5px solid var(--border);cursor:pointer}
.dtpl-card-thumb iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;background:#fff}
.dtpl-card-thumb-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text-muted);background:linear-gradient(180deg,color-mix(in srgb,var(--text-primary) 4%,#fff),color-mix(in srgb,var(--text-primary) 7%,#fff))}
.dtpl-card-thumb-ph svg{width:30px;height:30px;opacity:.5}
.dtpl-card-badges{position:absolute;top:8px;left:8px;display:flex;gap:5px;z-index:2}
.dtpl-card-body{display:flex;flex-direction:column;gap:3px;padding:11px 13px 9px}
.dtpl-card-name{font:700 13.5px/1.25 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dtpl-card-meta{font:400 11.5px/1.3 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:var(--text-muted)}
/* template chip actions (2026-06-17 📘) — primary CTA full-width on row 1, the icon actions in a tidy
   centered tray on row 2 (no awkward wrapping around the primary button as before). */
.dtpl-card-acts{display:flex;flex-direction:column;align-items:stretch;gap:7px;padding:9px 11px 11px;margin-top:auto}
.dtpl-card-open{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:600 12px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;padding:8px 10px;border-radius:9px;border:none;background:var(--app-accent);color:var(--on-accent,#fff);cursor:pointer;transition:filter var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.dtpl-card-open:hover{filter:brightness(1.06)}
.dtpl-card-open:active{transform:scale(.985)}
.dtpl-card-open svg{width:13px;height:13px}
.dtpl-card-icons{display:flex;align-items:center;justify-content:center;gap:6px}
.dtpl-card-icons .admin-act-btn{flex:0 0 auto;height:32px}
.dtpl-card-icons .admin-act-btn.aab-icon{width:32px}
/* F1-V — Daily Digests admin panel */
.dgst-table .dgst-av{display:inline-flex;vertical-align:middle;margin-right:6px}
.dgst-table .dgst-av .tc-avatar{width:24px !important;height:24px !important;font-size:10px}
/* Daily Digest profile avatars (2026-06-17 📘) — outside #teamChatView the .tc-avatar had NO
   border-radius (the round rule was chat-scoped) so it rendered as a SQUARE box with a round image
   inside ("square with a circle in it"). Make the digest avatars cleanly round with a slight lift. */
.dgst-table .dgst-av .tc-avatar,.dgst-table .dgst-av .tc-avatar img{border-radius:50%}
.dgst-table .dgst-av .tc-avatar{display:inline-flex;align-items:center;justify-content:center;color:var(--on-accent);font-weight:600;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.16),0 0 0 1.5px var(--card-bg)}
.dgst-pill{display:inline-flex;align-items:center;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:var(--radius-pill);white-space:nowrap;font-variant-numeric:tabular-nums}
.dgst-pill.dgst-on{background:color-mix(in srgb,var(--color-success,#30d158) 14%,transparent);color:color-mix(in srgb,var(--color-success,#30d158) 75%,var(--text-primary))}
.dgst-pill.dgst-off{background:color-mix(in srgb,var(--text-primary) 7%,transparent);color:var(--text-muted)}
.dgst-chips{display:inline-flex;gap:4px;flex-wrap:wrap}
.dgst-chip{font-size:10px;font-weight:600;padding:2px 6px;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--text-primary) 6%,transparent);color:var(--text-muted);opacity:.55}
.dgst-chip.on{background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:color-mix(in srgb,var(--app-accent) 80%,var(--text-primary));opacity:1}
.dgst-noemail{display:inline-flex;vertical-align:middle;color:var(--color-warning)}
.dgst-acts{display:flex;gap:4px;white-space:nowrap}
.dgst-preview-overlay{position:fixed;inset:0;z-index:var(--z-top);display:flex;align-items:center;justify-content:center;background:var(--overlay-bg,rgba(0,0,0,.55));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:24px;box-sizing:border-box}
.dgst-preview-sheet{width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-card);box-shadow:var(--shadow-e4);overflow:hidden}
.dgst-preview-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:0.5px solid var(--chrome-border);font:600 14.5px/1 -apple-system,system-ui,sans-serif;color:var(--text-primary)}
.dgst-preview-body{flex:1;min-height:0;overflow:auto;background:var(--surface-2)}
.dgst-preview-frame{width:100%;height:60vh;border:0;display:block;background:#fff}
@media (prefers-reduced-transparency:reduce){.dgst-preview-overlay{background:rgba(0,0,0,.6);backdrop-filter:none;-webkit-backdrop-filter:none}}
/* F1-V mobile: drop the lower-priority columns (Sections, Last sent) so the table fits a
   phone without horizontal scroll — Member · Digest · Actions stay (the actionable core). */
@media (max-width:640px){
  .dgst-table .dgst-chips{display:none}
  .dgst-table th:nth-child(3),.dgst-table td:nth-child(3),
  .dgst-table th:nth-child(4),.dgst-table td:nth-child(4){display:none}
  .dgst-table td,.dgst-table th{padding:9px 8px}
  .dgst-preview-frame{height:70vh}
}
.admin-users-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 20px;border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 7%,transparent);background:var(--frost-bg-strong);-webkit-backdrop-filter:var(--frost-blur);backdrop-filter:var(--frost-blur)}
.admin-users-panel-title{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:700;letter-spacing:-.25px;color:var(--text-primary)}
.admin-users-panel-title svg{width:16px;height:16px;color:var(--app-accent)}
/* Empty panel = a slim single header row (the "No requests" note sits inline).
   P3.9 — keep the SAME depth as a populated panel + Recent Auths (was --shadow-e1,
   reading flat/inconsistent next to the e2 panels Gavin flagged). */
.admin-panel-empty{box-shadow:var(--bevel-top),var(--shadow-e2)}
.admin-panel-empty .admin-panel-head{cursor:default}
.admin-panel-empty-note{color:var(--text-muted);font-size:12px;font-weight:500}
/* Phase A — permission matrix table. */
.pm-note{font-size:12px;color:var(--text-secondary);line-height:1.5;margin-bottom:12px}
/* 📃 pt.7 (punch item 6) — perm-matrix toolbar: live search + the owner-delegation jump */
.pm-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.pm-search-wrap{position:relative;display:inline-flex;align-items:center;flex:1 1 220px;max-width:320px}
.pm-search-ico{position:absolute;left:10px;width:13px;height:13px;color:var(--text-muted);pointer-events:none}
.pm-search{width:100%;padding:7px 10px 7px 30px;border:0.5px solid var(--chrome-border);border-radius:999px;font-size:12.5px;font-family:inherit;background:var(--surface-2);color:var(--text-primary);outline:none;transition:box-shadow var(--motion-fast),border-color var(--motion-fast)}
.pm-search:focus{border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 16%,transparent)}
.pm-deleg-link{display:inline-flex;align-items:center;gap:4px;background:none;border:none;color:var(--app-accent);font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;padding:6px 2px;border-radius:6px}
.pm-deleg-link svg{width:11px;height:11px}
.pm-deleg-link:hover{text-decoration:underline}
.pm-portal-note{display:flex;align-items:flex-start;gap:8px;margin-top:12px;padding:9px 12px;border:0.5px dashed var(--chrome-border);border-radius:10px;font-size:12px;color:var(--text-muted);line-height:1.5}
.pm-portal-note svg{width:12px;height:12px;flex:0 0 auto;margin-top:2px;opacity:.7}
.pm-portal-note b{color:var(--text-secondary)}
/* 📃 pt.7 (punch item 7) — Pending Approval form controls at app material (was plain inline styles) */
.pending-field{display:block;margin-top:4px;width:100%;box-sizing:border-box;padding:8px 11px;border:0.5px solid var(--chrome-border);border-radius:var(--radius-input);font-size:13px;font-family:inherit;background:var(--surface-2);color:var(--text-primary);outline:none;transition:box-shadow var(--motion-fast),border-color var(--motion-fast)}
.pending-field:focus{border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 16%,transparent)}
.pending-projects .pending-project-opt{border-radius:8px;transition:background var(--motion-fast)}
.pending-projects .pending-project-opt:hover{background:color-mix(in srgb,var(--app-accent) 6%,transparent)}
.pending-projects input[type=checkbox]{accent-color:var(--app-accent)}
.pm-ovr-key{color:var(--app-warning,#c47f17);font-weight:600}
.pm-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pm-table{border-collapse:separate;border-spacing:0;width:100%;font-size:12.5px}
.pm-table th,.pm-table td{padding:8px 10px;text-align:center;border-bottom:0.5px solid var(--border)}
.pm-th-perm{text-align:left;font-weight:700;color:var(--text-secondary);position:sticky;left:0;background:var(--surface-grad);z-index:1}
.pm-th-role{font-weight:800;color:var(--text-primary);white-space:nowrap;letter-spacing:-.01em;padding-bottom:10px;border-bottom:1.5px solid color-mix(in srgb,var(--app-accent) 22%,transparent)}
.pm-perm{text-align:left;font-weight:600;color:var(--text-primary);white-space:nowrap;position:sticky;left:0;background:var(--surface-grad)}
/* 2026-07-02 📘 — permission-matrix category header rows: a full-width band that groups perms into an
   information architecture (Access / Projects & field / Financials / …). Sticky-left label stays put. */
.pm-cat-row td.pm-cat{position:sticky;left:0;text-align:left;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-primary);background:linear-gradient(180deg,color-mix(in srgb,var(--app-accent) 9%,var(--surface)),color-mix(in srgb,var(--app-accent) 5%,var(--surface)));padding:11px 12px 9px;border-top:0.5px solid color-mix(in srgb,var(--text-primary) 9%,transparent)}
.pm-cat-row td.pm-cat span{display:inline-flex;align-items:center;gap:9px}
.pm-cat-row:first-child td.pm-cat{border-top:0}
/* accent chip around the category icon — the IA reads as designed sections, not gray dividers */
.pm-cat-ico{width:22px;height:22px;padding:5px;border-radius:7px;flex:0 0 auto;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 12%,transparent);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--app-accent) 22%,transparent)}
.pm-cell{cursor:pointer;font-weight:800;color:var(--text-muted);border-radius:9px;transition:background var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast);min-width:46px}
.pm-cell:hover:not(.pm-locked){background:color-mix(in srgb,var(--app-accent) 7%,transparent)}
.pm-cell.pm-locked{cursor:not-allowed;opacity:.75}
/* 2026-07-02 📘 — cells read as real on/off toggles (Atira orb language): granted = a lit accent
   orb-pill w/ a white check; denied = a quiet hollow dash; locked = a neutral lock orb. */
.pm-mark{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast),background var(--motion-fast)}
.pm-mark svg{width:12px;height:12px}
.pm-mark-on{color:#fff;background:radial-gradient(circle at 34% 26%,color-mix(in srgb,var(--color-success,#2e8b5f) 34%,#fff),var(--color-success,#2e8b5f) 64%,color-mix(in srgb,var(--color-success,#2e8b5f) 74%,#000) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 2px rgba(0,0,0,.22),0 1px 3px color-mix(in srgb,var(--color-success,#2e8b5f) 42%,transparent)}
.pm-mark-off{width:8px;height:8px;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--text-primary) 16%,transparent)}
.pm-mark-lock{color:var(--text-muted);background:color-mix(in srgb,var(--text-primary) 8%,transparent);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--text-primary) 12%,transparent)}
.pm-cell:hover:not(.pm-locked) .pm-mark-on{transform:scale(1.06)}
.pm-cell:hover:not(.pm-locked) .pm-mark-off{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--app-accent) 45%,transparent)}
/* customized-from-default = a soft amber ring on the cell (no harsh box) + an amber tick on the orb */
.pm-cell.pm-ovr{background:color-mix(in srgb,var(--app-warning,#c47f17) 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--app-warning,#c47f17) 45%,transparent)}
.pm-cell.pm-ovr .pm-mark-off{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--app-warning,#c47f17) 55%,transparent)}
/* Phase E (§E1) — per-cell history affordance + (§E1/§E2) the history+explainer popover. */
.pm-cell{position:relative}
.pm-cell-mark{display:inline-grid;place-items:center;min-height:22px}
.pm-hist-btn{position:absolute;top:2px;right:3px;width:15px;height:15px;line-height:13px;padding:0;font-size:10px;font-weight:700;color:var(--text-muted);background:none;border:none;border-radius:999px;cursor:pointer;opacity:0;transition:opacity .12s,background .12s,color .12s}
.pm-cell:hover .pm-hist-btn,.pm-hist-btn:focus-visible{opacity:.65}
.pm-hist-btn:hover{opacity:1;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 14%,transparent)}
.pm-hist-pop{position:fixed;z-index:var(--z-popover,900);width:300px;max-width:calc(100vw - 24px);max-height:min(60vh,440px);display:flex;flex-direction:column;overflow:hidden;background:var(--frost-bg-strong,color-mix(in srgb,var(--surface) 90%,transparent));backdrop-filter:var(--frost-blur,blur(20px) saturate(1.8));-webkit-backdrop-filter:var(--frost-blur,blur(20px) saturate(1.8));border:0.5px solid var(--chrome-border,var(--border));border-radius:16px;box-shadow:var(--shadow-e4,0 16px 40px rgba(0,0,0,.18));animation:pgPop var(--motion-fast,.16s) var(--ease-spring,ease-out)}
@media (prefers-reduced-transparency:reduce){.pm-hist-pop{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media (prefers-reduced-motion:reduce){.pm-hist-pop{animation:none}}
.pm-hist-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 13px 9px;border-bottom:0.5px solid var(--border)}
.pm-hist-title{font-size:13px;font-weight:700;color:var(--text-primary);letter-spacing:-0.01em}
.pm-hist-x{font:inherit;font-size:13px;color:var(--text-muted);background:none;border:none;cursor:pointer;border-radius:999px;width:22px;height:22px;line-height:1}
.pm-hist-x:hover{background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-primary)}
.pm-hist-body{padding:11px 13px 13px;overflow-y:auto}
.pm-hist-explain{font-size:12px;line-height:1.5;color:var(--text-secondary);padding:9px 11px;border-radius:11px;margin-bottom:10px}
.pm-hist-explain b{color:var(--text-primary)}
.pm-hist-def{background:color-mix(in srgb,var(--text-primary) 5%,transparent)}
.pm-hist-ovr{background:color-mix(in srgb,var(--app-warning,#c47f17) 11%,transparent)}
.pm-hist-locked{background:color-mix(in srgb,var(--text-primary) 6%,transparent)}
.pm-hist-list{display:flex;flex-direction:column;gap:2px}
.pm-hist-none{font-size:12px;color:var(--text-muted);padding:3px 1px}
.pm-hist-loading{font-size:12px;color:var(--text-muted)}
.pm-hev{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:7px 0;border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 7%,transparent);font-size:12px}
.pm-hev:last-child{border-bottom:0}
.pm-hev-v{font-weight:700;font-size:11px;padding:2px 8px;border-radius:999px;letter-spacing:-0.01em}
.pm-hev-grant{color:var(--green-700,#15803d);background:color-mix(in srgb,var(--green-500,#22c55e) 14%,transparent)}
.pm-hev-revoke{color:var(--red-700,#b91c1c);background:color-mix(in srgb,var(--red-500,#ef4444) 13%,transparent)}
.pm-hev-reset{color:var(--text-secondary);background:color-mix(in srgb,var(--text-primary) 8%,transparent)}
.pm-hev-by{color:var(--text-secondary)}
.pm-hev-when{margin-left:auto;color:var(--text-muted);font-size:11px}
@media (max-width:560px){.pm-hist-pop{left:0!important;right:0!important;top:auto!important;bottom:0;width:100%;max-width:none;border-radius:18px 18px 0 0;max-height:72vh}}
/* Wave 6 — webhooks panel */
.wh-list{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.wh-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:0.5px solid var(--border);border-radius:10px;background:var(--surface)}
.wh-row.wh-off{opacity:.6}
.wh-main{flex:1;min-width:0}
.wh-url{font-size:12.5px;font-weight:600;color:var(--text-primary);word-break:break-all}
.wh-meta{font-size:11px;color:var(--text-muted);margin-top:3px}
.wh-stat{font-weight:600;margin-left:6px}
.wh-stat-ok{color:var(--color-success)}.wh-stat-err{color:var(--color-error)}.wh-stat-none{color:var(--text-muted)}
.wh-err-txt{color:var(--color-error)}
.wh-acts{display:flex;gap:5px;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}
.wh-add{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
/* 🫗 Chat Moderation (P11 census cluster #3) — the admin conversation surface. Mirrors the
   .wh-row anatomy (the sibling admin panel one section up) so the two read as one system.
   Deletion here is SOFT and undoable, so a binned row is dimmed-but-legible, never a tombstone. */
.cvm-tabs{display:flex;gap:6px;margin-bottom:12px}
.cvm-tabs .eq-btn.is-on{background:var(--accent-tint);color:var(--accent);border-color:var(--accent-ring)}
.cvm-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:0.5px solid var(--border);border-radius:10px;background:var(--surface)}
.cvm-row + .cvm-row{margin-top:6px}
.cvm-row.cvm-gone{opacity:.62}
.cvm-main{flex:1;min-width:0}
.cvm-name{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--text-primary);word-break:break-word}
/* the conversation KIND is metadata, not a heading — a quiet pill, never a colored edge-strip */
.cvm-kind{flex:0 0 auto;padding:1px 7px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;background:var(--surface-2);color:var(--text-muted)}
.cvm-mems{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.cvm-mem{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 9px;border-radius:999px;font-size:11px;font-weight:600;background:var(--surface-2);color:var(--text-secondary)}
.cvm-mem-none{font-size:11px;color:var(--text-muted)}
/* the per-member remove — rounded, never a hard-cornered pop (standing canon) */
.cvm-mem-x{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--text-muted);font-size:12px;line-height:1;cursor:pointer;transition:background var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out)}
.cvm-mem-x:hover{background:color-mix(in srgb,var(--color-error) 16%,transparent);color:var(--color-error)}
.cvm-acts{display:flex;gap:5px;flex:0 0 auto;justify-content:flex-end}
/* ≤640: the DECISION set stays (name + members + the action); the row stacks instead of squeezing */
@media (max-width:640px){
  .cvm-row{align-items:flex-start;flex-wrap:wrap}
  .cvm-acts{width:100%;justify-content:flex-start;margin-top:8px}
}
/* E2 — auto-disabled pill (signal via fill+icon, NOT an edge-strip). */
.wh-disabled-pill{display:inline-flex;align-items:center;gap:5px;margin-left:6px;padding:2px 9px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.01em;background:color-mix(in srgb,var(--color-error) 14%,transparent);color:var(--color-error)}
/* E1 — event-type picker trigger + popover. */
.wh-ev-trigger{flex:1 1 60%;min-width:200px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;border:0.5px solid var(--chrome-border,var(--border));border-radius:var(--radius-input,10px);background:var(--card-bg);color:var(--text-primary);font-size:13px;cursor:pointer;transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
.wh-ev-trigger:hover{border-color:var(--app-accent)}
.wh-ev-trigger:focus-visible{outline:none;border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 18%,transparent)}
.wh-ev-trigger .wh-ev-summary{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-primary)}
.wh-ev-trigger .wh-ev-summary.is-empty{color:var(--text-muted)}
.wh-ev-trigger svg{width:12px;height:12px;flex:0 0 auto;opacity:.55}
/* Shared floating overlay (frosted, rounded, shadowed) for the picker + delivery history. */
.wh-overlay{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(12,22,17,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.wh-sheet{width:min(560px,100%);max-height:min(78vh,640px);display:flex;flex-direction:column;background:var(--card-bg);border-radius:var(--radius-lg,18px);box-shadow:var(--shadow-e2,0 18px 48px -12px rgba(9,30,66,.42),0 4px 12px rgba(9,30,66,.18));border:0.5px solid var(--lg-edge,var(--border));overflow:hidden}
.wh-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 12px;border-bottom:0.5px solid var(--border)}
.wh-sheet-title{font-size:15px;font-weight:700;color:var(--text-primary)}
.wh-sheet-sub{font-size:11.5px;color:var(--text-muted);margin-top:2px}
.wh-sheet-x{flex:0 0 auto;width:30px;height:30px;border-radius:9px;border:0;background:color-mix(in srgb,var(--text-muted) 12%,transparent);color:var(--text-primary);font-size:17px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--motion-fast)}
.wh-sheet-x:hover{background:color-mix(in srgb,var(--text-muted) 22%,transparent)}
.wh-sheet-body{padding:12px 16px 16px;overflow-y:auto;flex:1 1 auto}
.wh-sheet-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-top:0.5px solid var(--border);background:color-mix(in srgb,var(--card-bg) 90%,var(--app-bg))}
/* E1 picker groups. */
.wh-pk-search{width:100%;box-sizing:border-box;padding:9px 12px;margin-bottom:10px;border:0.5px solid var(--chrome-border,var(--border));border-radius:var(--radius-input,10px);background:var(--card-bg);color:var(--text-primary);font-size:13px}
.wh-pk-search:focus{outline:none;border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 18%,transparent)}
.wh-pk-all{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:12px;background:var(--accent-tint,rgba(54,179,126,.14));margin-bottom:10px;cursor:pointer;font-weight:600;font-size:13px;color:var(--text-primary)}
.wh-pk-group{margin-bottom:8px;border:0.5px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface)}
.wh-pk-group>summary{list-style:none;cursor:pointer;padding:9px 12px;display:flex;align-items:center;gap:8px;font-weight:600;font-size:12.5px;color:var(--text-primary);user-select:none}
.wh-pk-group>summary::-webkit-details-marker{display:none}
.wh-pk-group>summary:hover{background:color-mix(in srgb,var(--app-accent) 7%,transparent)}
.wh-pk-gcount{margin-left:auto;font-size:10.5px;font-weight:600;color:var(--text-muted);background:color-mix(in srgb,var(--text-muted) 12%,transparent);padding:1px 7px;border-radius:999px}
.wh-pk-types{padding:4px 12px 10px;display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}
.wh-pk-type{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-primary);padding:3px 6px;border-radius:8px;cursor:pointer;transition:background var(--motion-fast)}
.wh-pk-type:hover{background:color-mix(in srgb,var(--app-accent) 8%,transparent)}
/* E3 delivery rows (real-data log). */
.wh-dlv-empty{padding:26px 12px;text-align:center;color:var(--text-muted);font-size:13px}
.wh-dlv-row{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:11px;background:var(--surface);border:0.5px solid var(--border);margin-bottom:6px}
.wh-dlv-dot{flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.wh-dlv-dot.ok{background:color-mix(in srgb,var(--color-success) 16%,transparent);color:var(--color-success)}
.wh-dlv-dot.err{background:color-mix(in srgb,var(--color-error) 16%,transparent);color:var(--color-error)}
.wh-dlv-main{flex:1;min-width:0}
.wh-dlv-type{font-size:12.5px;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wh-dlv-meta{font-size:11px;color:var(--text-muted);margin-top:2px;display:flex;flex-wrap:wrap;gap:8px}
.wh-dlv-err{color:var(--color-error);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.wh-dlv-code{flex:0 0 auto;font-size:12px;font-weight:700}
.wh-dlv-code.ok{color:var(--color-success)}.wh-dlv-code.err{color:var(--color-error)}
@media (max-width:560px){
  .wh-pk-types{grid-template-columns:1fr}
  .wh-overlay{padding:0;align-items:flex-end}
  .wh-sheet{width:100%;max-height:88vh;border-radius:18px 18px 0 0}
}
/* Wave 7 — portals launcher */
.portals-group{margin-bottom:16px}
.portals-cat{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);margin-bottom:8px}
.portals-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px}
.portals-tile{position:relative;display:flex;flex-direction:column;gap:3px;padding:13px 13px 11px;border:0.5px solid var(--border);border-radius:12px;background:var(--surface-grad);box-shadow:var(--bevel-top),var(--shadow-e2);text-decoration:none;transition:transform var(--motion-base) var(--ease-spring),box-shadow var(--motion-base)}
.portals-tile:hover{transform:translateY(-2px);box-shadow:var(--bevel-top),var(--shadow-e3)}
.portals-tile-ico{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;background:color-mix(in srgb,var(--app-accent) 14%,transparent);margin-bottom:3px}
.portals-tile-ico svg{width:13px;height:13px;color:var(--app-accent)}
.portals-tile-lbl{font-size:13px;font-weight:600;color:var(--text-primary);line-height:1.25}
.portals-tile-host{font-size:11px;color:var(--text-muted)}
.portals-del{position:absolute;top:7px;right:8px;background:none;border:none;color:var(--text-muted);font-size:12px;cursor:pointer;opacity:0;transition:opacity var(--motion-fast)}
.portals-tile:hover .portals-del{opacity:.8}
.portals-del:hover{color:var(--color-error)}
.portals-empty{color:var(--text-muted);font-size:12.5px;padding:10px 0 16px}
.portals-add{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px;padding-top:14px;border-top:0.5px solid var(--border)}
/* P0.2 L3 — generate-document modal */
/* Compliance/app-wide "no buttons work" fix — the doc-gen overlay is a full-screen
   z-9000 backdrop. It used `animation:dgFade` (from{opacity:0}). The modal does heavy
   SYNCHRONOUS work at open (a ~489KB innerHTML build + an iframe load), which throttles
   the fade animation so it STALLS on its 0% frame — leaving the overlay invisible BUT
   present + click-capturing across the WHOLE viewport → every button "did nothing"
   (verified live: the overlay sat at opacity:0, elementFromPoint over a Compliance
   button returned the overlay). Fix: do NOT animate the OVERLAY's opacity at all — it
   rests at opacity:1 (always visible-or-gone, never a transparent click trap). The inner
   `.dg-modal` keeps its own dgRise enter animation, so the open still feels animated. */
.dg-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.5);backdrop-filter:blur(8px) saturate(1.4);-webkit-backdrop-filter:blur(8px) saturate(1.4);display:flex;align-items:center;justify-content:center;padding:2vh 2vw;opacity:1}
@keyframes dgFade{from{opacity:0}to{opacity:1}}
.dg-modal{width:min(1680px,94vw);height:92vh;background:var(--surface);border-radius:var(--radius-modal,18px);box-shadow:var(--lg-edge),var(--shadow-e5);display:flex;flex-direction:column;overflow:hidden;animation:dgRise var(--motion-base) var(--ease-spring)}
@keyframes dgRise{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.dg-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:0.5px solid var(--border);background:var(--surface-grad);box-shadow:var(--lg-edge)}
.dg-title{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px;color:var(--text-primary)}
.dg-title .sb-ico{width:16px;height:16px;color:var(--app-accent)}
.dg-x{background:none;border:none;font-size:17px;color:var(--text-muted);cursor:pointer;padding:4px 8px;border-radius:8px}
.dg-x:hover{background:var(--frost-bg);color:var(--text-primary)}
.dg-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);margin-bottom:7px}
.dg-tpl-pick{padding:14px 20px;border-bottom:0.5px solid var(--border)}
/* Template-maker overhaul (2026-06-17 📘) — header row carries the "Manage templates" Studio bridge. */
.dg-tpl-pick-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dg-tpl-pick-head .dg-lbl{margin-bottom:7px}
.dg-tpl-manage{display:inline-flex;align-items:center;gap:5px;font:600 12px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 9%,transparent);border:none;border-radius:8px;padding:6px 11px;margin-bottom:7px;cursor:pointer;transition:background var(--motion-fast)}
.dg-tpl-manage:hover{background:color-mix(in srgb,var(--app-accent) 16%,transparent)}
.dg-tpl-manage svg{width:13px;height:13px}
.dg-tpl-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:9px}
.dg-tpl{display:inline-flex;align-items:center;gap:9px;padding:11px 13px;border:0.5px solid var(--chrome-border);border-radius:var(--radius-md,10px);background:var(--surface-grad);color:var(--text-primary);font-size:12.5px;font-weight:600;cursor:pointer;text-align:left;box-shadow:var(--lg-edge),var(--shadow-e1);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-base) var(--ease-out),background var(--motion-base)}
.dg-tpl .sb-ico{width:24px;height:24px;flex-shrink:0;padding:5px;border-radius:7px;background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 20%,transparent),color-mix(in srgb,var(--app-accent) 9%,transparent));color:var(--app-accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.dg-tpl:hover{background:var(--surface-grad-hover);box-shadow:var(--lg-edge),var(--shadow-e3),var(--glow-accent-soft);transform:translateY(-2px)}
.dg-tpl:active{transform:translateY(0) scale(.97);box-shadow:var(--lg-edge),var(--shadow-e1)}
.dg-tpl-on{background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 92%,#fff),var(--app-accent));color:#fff;border-color:color-mix(in srgb,var(--app-accent) 60%,#000);box-shadow:var(--lg-edge-strong),var(--shadow-e2),var(--glow-accent)}
.dg-tpl-on:hover{background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 96%,#fff),var(--app-accent));box-shadow:var(--lg-edge-strong),var(--shadow-e3),var(--glow-accent)}
.dg-tpl-on .sb-ico{background:rgba(255,255,255,.22);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.dg-body{flex:1;display:flex;min-height:0}
.dg-form{flex:0 0 440px;border-right:0.5px solid var(--border);padding:18px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.dg-field{display:flex;flex-direction:column;gap:4px}
.dg-field[hidden]{display:none}
/* Phase B — labeled field sections (driven by optional field.group; quiet uppercase head,
   matches the .ddp-fhead idiom; no boxes, no edge-strips per DESIGN.md). */
.dg-group{display:flex;flex-direction:column;gap:14px}
.dg-group + .dg-group{margin-top:4px}
/* §elevate — group header is a flex row with a live per-group N/M tally pill (rounded, themed,
   contained; greens at section-complete). The tally button jumps to the group's first gap. */
.dg-group-h{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);padding:2px 2px;margin-bottom:-2px}
.dg-group-tally{display:inline-flex;align-items:center;border:0;cursor:pointer;font:700 9.5px/1 var(--font-mono,ui-monospace),monospace;letter-spacing:.02em;color:var(--text-secondary);background:color-mix(in srgb,var(--text-primary) 7%,transparent);border-radius:999px;padding:2px 7px;font-variant-numeric:tabular-nums;transition:transform var(--motion-fast) var(--ease-spring),background var(--motion-fast),color var(--motion-fast)}
.dg-group-tally:empty{display:none}
.dg-group-tally:hover{transform:translateY(-1px)}
.dg-group-tally:active{transform:translateY(0) scale(.94)}
.dg-group-tally:focus-visible{outline:2px solid var(--app-accent);outline-offset:1px}
.dg-group-tally.is-complete{color:#fff;background:linear-gradient(160deg,color-mix(in srgb,var(--color-success,#34c759) 92%,#fff),var(--color-success,#34c759))}
@media (prefers-reduced-motion:reduce){.dg-group-tally{transition:none}}
/* Phase B — inline per-field validation: a rounded red ring (follows the input's own radius,
   never hard-cornered) + a small inline "Required" message shown only when the row is flagged. */
.dg-field-err .field-input{border-color:color-mix(in srgb,var(--color-error) 60%,var(--chrome-border));box-shadow:0 0 0 3px color-mix(in srgb,var(--color-error) 16%,transparent)}
.dg-field-err .field-input:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--color-error) 24%,transparent)}
.dg-field-msg{display:none;font-size:11px;font-weight:600;color:var(--color-error);margin-top:2px}
.dg-field-err .dg-field-msg{display:block}
.dg-field-lbl{font-size:12px;font-weight:600;color:var(--text-secondary)}
.dg-req{color:var(--color-error)}
/* §elevate — required affordance = a satisfied DOT: hollow red ring while empty, fills success-green
   the instant the field has a value (positive confirmation, not only a punitive red ring). The actual
   input keeps aria-required for SR users (the dot is decorative). No edge-strip, rounded, themed. */
.dg-req-dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--color-error) 70%,transparent);background:transparent;transition:background var(--motion-fast),border-color var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.dg-req-dot.is-on{background:var(--color-success,#34c759);border-color:var(--color-success,#34c759);transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){.dg-req-dot{transition:none}}
/* §elevate — RECIPIENT CARD: the single most consequential control gets distinct weight.
   Solid content card (no glass), rounded, e1 lift; the avatar-mark fills accent when chosen. The
   native select sits inside borderless so the card IS the control. State via mark fill, not an edge. */
.dgx-rec{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:var(--radius-md,12px);background:var(--card-bg);box-shadow:var(--lg-edge),var(--shadow-e1);transition:box-shadow var(--motion-base),transform var(--motion-fast) var(--ease-spring)}
.dgx-rec:hover{box-shadow:var(--lg-edge),var(--shadow-e2)}
.dgx-rec-mark{flex:0 0 38px;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 15px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:var(--text-muted);background:color-mix(in srgb,var(--text-primary) 6%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.18);transition:background var(--motion-base),color var(--motion-base)}
.dgx-rec-mark .sb-ico{width:17px;height:17px}
.dgx-rec.is-set .dgx-rec-mark{color:#fff;background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 92%,#fff),var(--app-accent));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),var(--glow-accent-soft)}
.dgx-rec-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dgx-rec-eyebrow{font:700 9.5px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.dgx-rec.is-set .dgx-rec-eyebrow{color:var(--app-accent)}
.dgx-rec-sel{appearance:none;-webkit-appearance:none;border:0;background:transparent;padding:0;margin:0;font:700 14px/1.2 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:var(--text-primary);cursor:pointer;outline:none;max-width:100%;text-overflow:ellipsis}
.dgx-rec-sel:focus-visible{outline:2px solid var(--app-accent);outline-offset:2px;border-radius:6px}
.dgx-rec-hint{font:400 10.5px/1.2 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:var(--text-muted)}
.dgx-rec.is-set .dgx-rec-hint{display:none}
.dgx-rec-sub{font:500 11px/1.2 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.dgx-rec{transition:none}}
/* Phase C — new field types (checkbox/multiselect/signature). Round global checkbox, rounded
   rows, hairline borders, theme tokens — no edge-strips (DESIGN.md). */
.dg-check-row{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--text-primary)}
.dg-ms{display:flex;flex-direction:column;gap:6px}
.dg-ms-opt{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--text-primary)}
.dg-sig-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dg-sig-thumb{height:42px;border-radius:var(--radius-card,12px);border:0.5px solid color-mix(in srgb,var(--text-primary) 14%,transparent);background:var(--surface);padding:2px}
.dg-sig-empty{font-size:12.5px;color:var(--text-muted)}
.dg-hint{font-weight:400;color:var(--text-muted);font-size:11px}
/* Document Studio P2 — typed-field affordances (live format hint + computed-calc badge). */
.dg-fmt{font-size:11px;color:var(--text-muted);margin-top:3px;min-height:13px}
.dg-fmt:empty{display:none}
.dg-calc{background:var(--hover-overlay,rgba(0,0,0,.03));color:var(--text-secondary);cursor:default}
.dg-calc:focus{background:var(--hover-overlay,rgba(0,0,0,.03));border-color:var(--border);box-shadow:none}/* read-only computed field: no editable accent ring on click */
.dg-calc-badge{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 10%,transparent);border-radius:999px;padding:1px 7px}
.dg-preview-wrap{flex:1;padding:16px;display:flex;flex-direction:column;min-width:0}
.dg-preview-stage{flex:1;position:relative;min-height:0;border-radius:var(--radius-md,10px);overflow:hidden;box-shadow:var(--lg-edge),var(--shadow-e2);background:#fff}
.dg-preview{position:absolute;inset:0;width:100%;height:100%;border:none;background:#fff}
.dg-preview-blank{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--text-primary) 1.5%,transparent) 0 14px,transparent 14px 28px),var(--surface);pointer-events:none}
.dg-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 20px;border-top:0.5px solid var(--border);background:var(--surface-grad);box-shadow:0 -0.5px 0 var(--lg-edge)}
.dg-missing{font-size:12px;color:var(--color-error);font-weight:600}
.dg-foot-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* Phase B — export-button hierarchy: a divider after Close, quieter secondaries (.dg-sec),
   and an emphasized primary (.dg-primary, accent glow + rounded lift, theme-coherent via the
   --app-accent/--glow-accent tokens so it reads right across all 6 themes). */
.dg-foot-sep{width:1px;align-self:stretch;margin:4px 2px;background:var(--border)}
.dg-sec{font-weight:600;color:var(--text-secondary)}
.dg-sec:not(:disabled):hover{color:var(--text-primary)}
.dg-primary{margin-left:6px;font-weight:700;box-shadow:var(--lg-edge),var(--shadow-e2),var(--glow-accent-soft)}
.dg-primary:not(:disabled):hover{box-shadow:var(--lg-edge-strong),var(--shadow-e3),var(--glow-accent);transform:translateY(-1px)}
.dg-primary:not(:disabled):active{transform:translateY(0) scale(.98)}
/* §elevate — generator action-bar hierarchy (scoped to .dgx-foot so the legacy .dg-foot modal is
   untouched): the 5 export utilities cluster quietly, a hairline separates them, and Generate PDF is
   a pinned, non-collapsing primary that always sits trailing (never wraps under the secondaries). */
.dgx-foot .dg-foot-acts{display:flex;gap:10px;align-items:center;flex-wrap:nowrap;min-width:0}
.dgx-foot-cluster{display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-width:0;justify-content:flex-end}
.dgx-foot-sep{width:1px;align-self:stretch;margin:5px 0;background:var(--border);flex:0 0 1px}
.dgx-foot .dg-primary{flex:0 0 auto;margin-left:0;display:inline-flex;align-items:center}
.dgx-foot .dg-primary .sb-ico{color:#fff}
@media (max-width:640px){.dgx-foot{flex-wrap:wrap}.dgx-foot .dg-foot-acts{flex-wrap:wrap}.dgx-foot .dg-primary{flex:1 1 100%;justify-content:center;margin-top:4px}}
.dg-empty{color:var(--text-muted);font-size:12.5px;padding:10px 2px}
/* ── Document Studio P1 — data picker (Insert from project data) ───────────── */
.dg-field-lbl{display:flex;align-items:center;gap:6px;min-width:0}
/* §elevate — the ⚡ data-pull is the smartest affordance in the form; promote it from a near-invisible
   muted glyph to a discoverable tinted accent pill (still icon-only, but now reads as an action). */
.dg-pick{position:relative;margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex:0 0 24px;border:0;border-radius:8px;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 9%,transparent);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--app-accent) 22%,transparent);cursor:pointer;transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
.dg-pick svg{width:13px;height:13px}
.dg-pick::after{content:"";position:absolute;inset:-7px}/* expand the tap target to ~38px without growing the visual (touch rule) */
.dg-pick:hover{background:color-mix(in srgb,var(--app-accent) 18%,transparent);transform:translateY(-1px);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--app-accent) 34%,transparent),var(--glow-accent-soft)}
.dg-pick:active{transform:translateY(0) scale(.92)}
.dg-pick:focus-visible{outline:2px solid var(--app-accent);outline-offset:1px}
@media (prefers-reduced-motion:reduce){.dg-pick{transition:background var(--motion-fast),box-shadow var(--motion-fast)}}
.dg-src{display:inline-flex;align-items:center;gap:4px;max-width:46%;font-size:10.5px;font-weight:600;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 10%,transparent);border-radius:999px;padding:2px 8px}
.dg-src svg{width:9px;height:9px;flex-shrink:0}
.dg-src-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ITEM 4 — record-bound keep-in-sync chip (pill, never an edge-strip; rounded; theme tokens).
   Off (Bound) = muted; On (Synced) = accent. role=switch + aria-checked for a11y. */
.dg-bind{display:inline-flex;align-items:center;gap:4px;font:600 10.5px/1 system-ui;border:0;border-radius:999px;padding:2px 8px;cursor:pointer;color:var(--text-secondary);background:color-mix(in srgb,var(--text-muted) 10%,transparent);transition:background var(--motion-fast,.15s),color var(--motion-fast,.15s)}
.dg-bind svg{width:9px;height:9px;flex-shrink:0}
.dg-bind-on{color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
.dg-bind:hover{filter:brightness(1.05)}
.dg-bind:focus-visible{outline:2px solid var(--app-accent);outline-offset:1px}
.ddp-overlay{position:fixed;inset:0;z-index:9100;background:rgba(0,0,0,.34);backdrop-filter:blur(8px) saturate(1.3);-webkit-backdrop-filter:blur(8px) saturate(1.3);display:flex;align-items:center;justify-content:center;padding:3vh 3vw;opacity:1}
.ddp-modal{width:min(94vw,760px);max-height:min(82vh,640px);display:flex;flex-direction:column;background:var(--lg-bg,var(--card-bg));backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract);border:.5px solid var(--chrome-border);border-radius:var(--radius-lg,18px);box-shadow:var(--lg-edge),var(--shadow-e5);overflow:hidden}
@media (prefers-reduced-transparency:reduce){.ddp-overlay{backdrop-filter:none;-webkit-backdrop-filter:none}.ddp-modal{background:var(--card-bg);backdrop-filter:none;-webkit-backdrop-filter:none}}
.ddp-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:.5px solid var(--chrome-border);flex-shrink:0}
.ddp-title{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--text-primary);white-space:nowrap}
.ddp-title svg{width:15px;height:15px;flex-shrink:0;color:var(--app-accent)}
.ddp-search{flex:1;min-width:0;max-width:300px;margin-left:auto}
.ddp-close{width:30px;height:30px;flex:0 0 30px;border:0;background:transparent;border-radius:9px;color:var(--text-muted);cursor:pointer;font-size:14px;display:inline-flex;align-items:center;justify-content:center}
.ddp-close:hover{background:var(--hover-overlay,rgba(0,0,0,.06));color:var(--text-primary)}
.ddp-body{display:flex;min-height:0;flex:1}
.ddp-rail{width:236px;flex:0 0 236px;border-right:.5px solid var(--chrome-border);overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:2px}
.ddp-ent{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:8px 10px;border:0;background:transparent;border-radius:9px;cursor:pointer;color:var(--text-secondary);font:inherit;font-size:12.5px}
.ddp-ent-ico{width:14px;height:14px;flex-shrink:0}
.ddp-ent-l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ddp-ent-n{font-size:10.5px;font-weight:600;color:var(--text-muted);background:var(--hover-overlay,rgba(0,0,0,.05));border-radius:999px;padding:1px 7px}
.ddp-ent.on{background:color-mix(in srgb,var(--app-accent) 13%,transparent);color:var(--text-primary);font-weight:600}
.ddp-ent.on .ddp-ent-n{background:color-mix(in srgb,var(--app-accent) 18%,transparent);color:var(--app-accent)}
.ddp-ent:hover:not(.on){background:var(--hover-overlay,rgba(0,0,0,.04))}
.ddp-fields{flex:1;min-width:0;overflow-y:auto;padding:10px 12px}
.ddp-fhead{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);padding:8px 6px 6px}
.ddp-frow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:9px 10px;border:0;background:transparent;border-radius:10px;cursor:pointer;color:var(--text-primary);font:inherit}
.ddp-fl{width:160px;flex:0 0 160px;font-weight:600;font-size:12.5px}
.ddp-fv{flex:1;min-width:0;font-size:12.5px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ddp-ins{font-size:11px;font-weight:700;color:var(--app-accent);opacity:0;transition:opacity var(--motion-fast,.15s)}
.ddp-frow:hover{background:color-mix(in srgb,var(--app-accent) 8%,transparent)}
.ddp-frow:hover .ddp-ins{opacity:1}
.ddp-frow:focus-visible{outline:2px solid var(--app-accent);outline-offset:-2px}
.ddp-frow:focus-visible .ddp-ins{opacity:1}
.ddp-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:36px 16px;text-align:center;color:var(--text-muted);font-size:13px}
/* 🦊 picker upgrade — target-field pill, best-matches section, per-row source tag, kbd cursor. */
.ddp-target{font-size:12px;font-weight:600;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 11%,transparent);border-radius:999px;padding:3px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.ddp-bm-head{display:flex;align-items:center;gap:5px;color:var(--app-accent)}
.ddp-bm-head svg{width:11px;height:11px}
.ddp-src{flex:0 0 auto;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10.5px;font-weight:600;color:var(--text-muted);background:var(--hover-overlay,rgba(0,0,0,.05));border-radius:999px;padding:2px 8px}
.ddp-frow.kbd{background:color-mix(in srgb,var(--app-accent) 10%,transparent)}
.ddp-frow.kbd .ddp-ins{opacity:1}
.ddp-ent-tag{flex:0 0 auto;font-size:9.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 13%,transparent);border-radius:999px;padding:1px 6px}
@media(max-width:640px){.ddp-target{display:none}.ddp-src{display:none}}
/* P4 🦊 — batch mail-merge modal (ddp glass frame + a picker list and a live progress foot). */
.dgb-modal{width:min(94vw,560px);max-height:min(84vh,660px)}
.dgb-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:8px 12px 0}
.dgb-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:1px;padding-bottom:8px}
.dgb-row{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:9px;cursor:pointer;font-size:12.5px;color:var(--text-primary)}
.dgb-row:hover{background:var(--hover-overlay,rgba(0,0,0,.04))}
.dgb-row input{accent-color:var(--app-accent)}
.dgb-name{font-weight:600}
.dgb-sub{margin-left:auto;font-size:11px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55%}
.dgb-all{border-bottom:.5px solid var(--chrome-border);border-radius:9px 9px 0 0;margin-bottom:4px}
.dgb-hint{padding:6px 16px 8px;font-size:11.5px;color:var(--text-muted);line-height:1.45;flex-shrink:0}
.dgb-foot{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:.5px solid var(--chrome-border);flex-shrink:0}
.dgb-merge{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary);cursor:pointer}
.dgb-prog{display:flex;align-items:center;gap:8px;flex:1;min-width:0;font-size:11.5px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.dgb-prog[hidden]{display:none}
.dgb-bar{flex:1;min-width:40px;height:6px;border-radius:999px;background:var(--hover-overlay,rgba(0,0,0,.07));overflow:hidden}
.dgb-bar-fill{height:100%;width:0;border-radius:999px;background:var(--app-accent);transition:width .3s ease}
.dgb-foot .btn{margin-left:auto}
/* P6 🦊 — asset library picker grid. */
.dga-modal{width:min(94vw,640px);max-height:min(80vh,560px)}
.dga-grid{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px;padding:14px}
.dga-cell{display:flex;flex-direction:column;gap:5px;border:1px solid var(--chrome-border);background:var(--card-bg,#fff);border-radius:12px;padding:8px;cursor:pointer;transition:transform var(--motion-fast,.15s) var(--ease-spring,ease),box-shadow var(--motion-fast,.15s)}
.dga-cell:hover{transform:translateY(-2px);box-shadow:var(--shadow-e2)}
.dga-cell img{width:100%;height:86px;object-fit:contain;border-radius:7px;background:repeating-conic-gradient(#f3f4f6 0% 25%,#fff 0% 50%) 0 0/16px 16px}
.dga-cap{font-size:10.5px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:640px){.ddp-rail{width:148px;flex-basis:148px}.ddp-fl{width:auto;flex:0 0 auto;max-width:120px}.ddp-search{max-width:170px}.ddp-title-t{display:none}}
/* Crafted empty states — never dead voids (DESIGN.md). */
.dg-blank{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:32px 18px;margin:auto;max-width:240px}
.dg-blank-ico{width:34px;height:34px;color:var(--app-accent);opacity:.65;padding:8px;border-radius:11px;background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 14%,transparent),color-mix(in srgb,var(--app-accent) 6%,transparent));box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.dg-blank-t{font-size:14px;font-weight:700;color:var(--text-secondary);letter-spacing:-.2px}
.dg-blank-s{font-size:12px;color:var(--text-muted);line-height:1.45}
@media (max-width:820px){.dg-body{flex-direction:column}.dg-form{flex-basis:auto;max-height:46vh;border-right:none;border-bottom:0.5px solid var(--border)}}
/* ════════════════════════════════════════════════════════════════════════════════════════
   Document-first generator revamp (2026-06-27 📘). DESIGN.md bar: glass chrome panels,
   rounded everything, themed via CSS vars, NO colored edge-strips, rounded hovers, motion
   tokens, mobile+iPad+desktop. The legacy .dg-* classes stay (still used by _dvEdit + the modal
   foot); these dgx-* classes are additive.
   ════════════════════════════════════════════════════════════════════════════════════════ */
.dgx-overlay{align-items:stretch;justify-content:stretch;padding:0}
.dgx-modal{width:100vw;height:100vh;max-width:none;border-radius:0;background:var(--app-bg);display:flex;flex-direction:column;overflow:hidden;animation:dgRise var(--motion-base) var(--ease-spring)}
@media (min-width:1100px){.dgx-overlay{padding:2.2vh 2.2vw;align-items:center;justify-content:center}.dgx-modal{width:min(1560px,95.6vw);height:min(95.6vh,1040px);border-radius:var(--radius-modal,18px);box-shadow:var(--lg-edge),var(--shadow-e5)}}
/* Header — glass chrome */
.dgx-head{display:flex;align-items:center;gap:14px;padding:12px 18px;border-bottom:.5px solid var(--border);background:var(--surface-grad);box-shadow:var(--lg-edge)}
.dgx-head-l{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.dgx-head-c{display:flex;align-items:center;gap:8px}
.dgx-head-r{display:flex;align-items:center;gap:8px}
.dgx-title{display:inline-flex;align-items:center;gap:8px;font:700 15px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:var(--text-primary);white-space:nowrap}
.dgx-title .sb-ico{width:18px;height:18px;color:var(--app-accent)}
.dgx-tplchip{display:inline-flex;align-items:center;gap:8px;max-width:340px;padding:7px 12px;border:.5px solid var(--chrome-border);border-radius:999px;background:var(--surface-grad);color:var(--text-primary);font:600 12.5px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;cursor:pointer;box-shadow:var(--lg-edge),var(--shadow-e1);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-base),background var(--motion-base)}
.dgx-tplchip:hover{background:var(--surface-grad-hover);box-shadow:var(--lg-edge),var(--shadow-e3),var(--glow-accent-soft);transform:translateY(-1px)}
.dgx-tplchip:active{transform:translateY(0) scale(.97)}
.dgx-tplchip .sb-ico{width:16px;height:16px;color:var(--app-accent);flex-shrink:0}
.dgx-tplchip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dgx-tplchip-caret{width:12px;height:12px;opacity:.55;flex-shrink:0}
.dgx-tplchip-empty{color:var(--text-secondary);border-style:dashed}
.dgx-tool{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:.5px solid var(--chrome-border);border-radius:10px;background:var(--surface-grad);color:var(--text-primary);font:600 12px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;cursor:pointer;box-shadow:var(--lg-edge),var(--shadow-e1);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-base),background var(--motion-base),color var(--motion-base)}
.dgx-tool svg{width:14px;height:14px}
.dgx-tool:hover:not(:disabled){background:var(--surface-grad-hover);box-shadow:var(--lg-edge),var(--shadow-e3),var(--glow-accent-soft);transform:translateY(-1px)}
.dgx-tool:active:not(:disabled){transform:translateY(0) scale(.96)}
.dgx-tool:disabled{opacity:.45;cursor:not-allowed}
.dgx-tool-on{background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 92%,#fff),var(--app-accent));color:#fff;border-color:color-mix(in srgb,var(--app-accent) 60%,#000);box-shadow:var(--lg-edge-strong),var(--shadow-e2),var(--glow-accent)}
.dgx-tool-on svg{color:#fff}
.dgx-tool-undo{padding:7px 9px}
/* Body = rail + desk on the matte */
.dgx-body{flex:1;display:flex;min-height:0;position:relative;background:var(--app-bg);padding:12px;gap:12px}
.dgx-rail{flex:0 0 360px;display:flex;flex-direction:column;min-height:0;overflow:hidden;border-radius:var(--radius-lg,16px);transition:flex-basis var(--motion-base) var(--ease-out),opacity var(--motion-base),transform var(--motion-base)}
.dgx-rail.is-collapsed{flex-basis:0;opacity:0;transform:translateX(-12px);pointer-events:none;margin:0;padding:0;border:none}
.dgx-rail.is-frozen{opacity:.5;pointer-events:none}
.dgx-rail-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px 8px}
.dgx-rail-title{font:700 13px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:var(--text-primary)}
/* §elevate — live PROGRESS RING (conic arc driven by --p, donut center, contained count + label).
   Rounded, themed, glass-free (solid --card-bg donut mask so it reads clean against the .rt-panel rail).
   The whole prog is a button that jumps to the first unsatisfied required field (metric = a door). */
.dgx-rail-prog{display:inline-flex;align-items:center;gap:8px;font:600 11px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:var(--text-secondary)}
.dgx-rail-prog:empty{display:none}
.dgx-rail-prog .dgx-prog-btn{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;padding:2px;margin:0;border-radius:999px;cursor:pointer;font:inherit;color:inherit;transition:transform var(--motion-fast) var(--ease-spring)}
.dgx-rail-prog .dgx-prog-btn:hover{transform:translateY(-1px)}
.dgx-rail-prog .dgx-prog-btn:active{transform:translateY(0) scale(.96)}
.dgx-rail-prog .dgx-prog-btn:focus-visible{outline:2px solid var(--app-accent);outline-offset:2px}
.dgx-rail-prog .dgx-prog-ring{position:relative;width:30px;height:30px;border-radius:50%;flex:0 0 30px;background:conic-gradient(var(--app-accent) calc(var(--p,0)*360deg), color-mix(in srgb,var(--text-primary) 9%,transparent) 0);transition:background var(--motion-base) var(--ease-out);box-shadow:var(--lg-edge)}
.dgx-rail-prog .dgx-prog-ring::after{content:"";position:absolute;inset:3.5px;border-radius:50%;background:var(--card-bg);box-shadow:inset 0 1px 1px rgba(0,0,0,.06)}
.dgx-rail-prog .dgx-prog-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 9.5px/1 var(--font-mono,ui-monospace),monospace;color:var(--text-primary);z-index:1;font-variant-numeric:tabular-nums}
.dgx-rail-prog .dgx-prog-lbl{font:600 11px/1.2 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:var(--text-secondary);white-space:nowrap}
.dgx-rail-prog.is-complete .dgx-prog-ring{background:conic-gradient(var(--color-success,#34c759) 360deg,var(--color-success,#34c759) 0);animation:dgxProgPop var(--motion-base) var(--ease-spring)}
.dgx-rail-prog.is-complete .dgx-prog-num{color:var(--color-success,#34c759)}
.dgx-rail-prog.is-complete .dgx-prog-lbl{color:var(--color-success,#34c759);font-weight:700}
@keyframes dgxProgPop{0%{transform:scale(.82)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.dgx-rail-prog .dgx-prog-ring{transition:none}.dgx-rail-prog.is-complete .dgx-prog-ring{animation:none}.dgx-rail-prog .dgx-prog-btn{transition:none}}
.dgx-rail-scroll{flex:1;overflow-y:auto;padding:8px 16px 18px;display:flex;flex-direction:column;gap:14px}
.dgx-rail-toggle{position:absolute;top:18px;left:calc(360px + 4px);z-index:3;width:26px;height:34px;border:.5px solid var(--chrome-border);border-radius:9px;background:var(--surface-grad);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--lg-edge),var(--shadow-e2);transition:left var(--motion-base) var(--ease-out),background var(--motion-base),transform var(--motion-fast) var(--ease-spring)}
.dgx-rail-toggle svg{width:13px;height:13px;transition:transform var(--motion-base) var(--ease-spring)}
.dgx-rail-toggle:hover{background:var(--surface-grad-hover);box-shadow:var(--lg-edge),var(--shadow-e3)}
.dgx-rail-toggle.is-collapsed{left:8px}
.dgx-rail-toggle.is-collapsed svg{transform:rotate(180deg)}
.dgx-blank{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:40px 18px;text-align:center;color:var(--text-secondary)}
/* DESK — the document is the primary surface, centered, scrolling */
/* §elevate — DOCUMENT DESK: cradle the live paper on a real matte (subtle accent-tinted gradient)
   with the page drop-shadow on the inset stage, so the document sits ON a desk like Pages/Preview.
   Static gradient + box-shadow only (NO blur) → never repaints on scroll (DESIGN.md rule 15). */
.dgx-desk{flex:1;min-width:0;border-radius:var(--radius-lg,16px);background:radial-gradient(120% 80% at 50% -10%, color-mix(in srgb,var(--app-accent) 4%,transparent), transparent 60%),linear-gradient(180deg, color-mix(in srgb,var(--text-primary) 4%,var(--surface)), color-mix(in srgb,var(--text-primary) 7%,var(--surface)));box-shadow:var(--lg-edge),var(--shadow-e2);overflow:hidden;position:relative;padding:18px}
.dgx-stage{position:absolute;inset:18px;overflow:hidden;border-radius:var(--radius-md,10px);background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.10),0 10px 30px -8px rgba(0,0,0,.22),var(--lg-edge)}
/* one-shot "paper lands on the desk" entrance — added once when the iframe first paints */
.dgx-stage.is-loaded{animation:dgxPaperIn var(--motion-base) var(--ease-spring)}
@keyframes dgxPaperIn{0%{opacity:0;transform:translateY(8px) scale(.985)}100%{opacity:1;transform:none}}
.dgx-preview{position:absolute;inset:0;width:100%;height:100%;border:none;background:#fff;border-radius:inherit}
.dgx-stage-blank{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border-radius:var(--radius-md,10px);background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--text-primary) 1.5%,transparent) 0 14px,transparent 14px 28px),var(--surface);pointer-events:none;color:var(--text-secondary)}
@media (max-width:640px){.dgx-desk{padding:10px}.dgx-stage{inset:10px}}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){.dgx-desk{background:var(--surface)}}
@media (prefers-reduced-motion:reduce){.dgx-stage.is-loaded{animation:none}}
/* Action bar — glass */
.dgx-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px;border-top:.5px solid var(--border);background:var(--surface-grad);box-shadow:0 -.5px 0 var(--lg-edge)}
/* Field-pulse reuse from _dvEdit (already defined as .dve-field-pulse) — no redefine needed. */
/* ── Visual template gallery ── */
.dgx-gal-overlay{position:fixed;inset:0;z-index:9100;background:rgba(0,0,0,.5);backdrop-filter:blur(10px) saturate(1.4);-webkit-backdrop-filter:blur(10px) saturate(1.4);display:flex;align-items:center;justify-content:center;padding:3vh 3vw;opacity:1;animation:dgFade var(--motion-base) var(--ease-out)}
@keyframes dgFade{from{opacity:0}to{opacity:1}}
.dgx-gal{width:min(1180px,94vw);height:min(86vh,860px);background:var(--surface);border-radius:var(--radius-modal,18px);box-shadow:var(--lg-edge-strong),var(--shadow-e5),0 0 0 .5px color-mix(in srgb,var(--app-bg) 30%,transparent);display:flex;flex-direction:column;overflow:hidden;animation:dgRise var(--motion-base) var(--ease-spring)}
/* Flagship frosted header band — CHROME (fixed, above the scroll container; glass is safe here per canon rule 15). */
.dgx-gal-head{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:.5px solid var(--border);background:var(--frost-bg);backdrop-filter:var(--frost-blur);-webkit-backdrop-filter:var(--frost-blur);box-shadow:var(--lg-edge-strong);position:relative;z-index:2}
.dgx-gal-mark{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex-shrink:0;border-radius:10px;background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 18%,var(--card-bg)),var(--card-bg));box-shadow:var(--lg-edge),var(--shadow-e1)}
.dgx-gal-mark .sb-ico{width:18px;height:18px;color:var(--app-accent)}
.dgx-gal-titles{display:flex;flex-direction:column;gap:2px;min-width:0}
.dgx-gal-h1{font:700 19px/1.1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;letter-spacing:-.01em;color:var(--text-primary);white-space:nowrap}
.dgx-gal-sub{font:var(--text-caption);color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dgx-gal-search{flex:1;max-width:420px;margin-left:auto}
.dgx-gal-cats{display:flex;gap:8px;flex-wrap:wrap;padding:12px 20px;border-bottom:.5px solid var(--border)}
.dgx-gal-cat{display:inline-flex;align-items:center;gap:7px;padding:6px 8px 6px 13px;border:.5px solid var(--chrome-border);border-radius:999px;background:var(--frost-bg);backdrop-filter:var(--frost-blur);-webkit-backdrop-filter:var(--frost-blur);color:var(--text-secondary);font:600 12px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;cursor:pointer;box-shadow:var(--lg-edge);transition:background var(--motion-base),color var(--motion-base),transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-base)}
.dgx-gal-cat-n{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-secondary);font:700 10px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-variant-numeric:tabular-nums}
.dgx-gal-cat:hover{background:var(--surface-grad-hover);box-shadow:var(--lg-edge),var(--shadow-e2);transform:translateY(-1px)}
.dgx-gal-cat.on{background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 92%,#fff),var(--app-accent));color:#fff;border-color:color-mix(in srgb,var(--app-accent) 60%,#000);box-shadow:var(--lg-edge-strong),var(--shadow-e2),var(--glow-accent)}
.dgx-gal-cat.on .dgx-gal-cat-n{background:rgba(255,255,255,.26);color:#fff}
.dgx-gal-grid{flex:1;overflow-y:auto;padding:20px 20px 22px;display:grid;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:16px;align-content:start}
.dgx-card{display:flex;flex-direction:column;border:.5px solid var(--chrome-border);border-radius:var(--radius-md,12px);background:var(--card-bg);overflow:hidden;cursor:pointer;box-shadow:var(--lg-edge),var(--shadow-e1);transition:transform var(--motion-base) var(--ease-spring),box-shadow var(--motion-base) var(--ease-out)}
.dgx-card:hover{transform:translateY(-3px);box-shadow:var(--lg-edge),var(--shadow-e3),var(--glow-accent-soft)}
.dgx-card:active{transform:translateY(-1px) scale(.985)}
.dgx-card.is-active{border-color:color-mix(in srgb,var(--app-accent) 55%,var(--chrome-border));box-shadow:var(--lg-edge-strong),var(--shadow-e2),var(--glow-accent)}
.dgx-card-thumb{position:relative;aspect-ratio:8.5/11;background:#fff;overflow:hidden;border-bottom:.5px solid var(--border);container-type:inline-size}
.dgx-card-thumb-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:color-mix(in srgb,var(--text-secondary) 45%,transparent);background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--text-primary) 2.5%,transparent) 0 11px,transparent 11px 22px);transition:opacity var(--motion-base) var(--ease-out)}
/* the rendered iframe overlays the placeholder; once loaded, fade the ph out beneath it (no flash of empty). */
.dgx-card-thumb.is-loaded .dgx-card-thumb-ph{opacity:0}
/* 816px (8.5in) paper scaled to fill the card thumb width via a container query (so it tracks the real
   card size at any breakpoint — no hardcoded scale that clips when the grid reflows). top-left flush. */
.dgx-thumb-ifr{position:absolute;top:0;left:0;width:816px;height:1056px;border:none;transform-origin:top left;transform:scale(0.255);pointer-events:none;background:#fff;opacity:0;transition:opacity var(--motion-base) var(--ease-out)}
.dgx-card-thumb.is-loaded .dgx-thumb-ifr{opacity:1}
@container (min-width:0){.dgx-thumb-ifr{transform:scale(calc(100cqw / 816))}}
.dgx-card-body{display:flex;flex-direction:column;gap:3px;padding:10px 12px 4px}
.dgx-card-name{font:600 13px/1.3 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.005em}
.dgx-card-sub{display:flex;align-items:center;gap:6px;min-width:0}
.dgx-card-dot{width:7px;height:7px;border-radius:999px;flex-shrink:0;background:var(--text-secondary);box-shadow:0 0 0 2.5px color-mix(in srgb,var(--text-secondary) 14%,transparent)}
.dgx-card-cat{font:var(--text-caption);color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dgx-card-dim{font:var(--text-caption);color:color-mix(in srgb,var(--text-secondary) 70%,transparent);flex-shrink:0}
.dgx-card-pillrow{display:flex;align-items:center;gap:6px;padding:0 12px 10px}
.dgx-card-pill{flex-shrink:0;font:600 10px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary);padding:3px 8px;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 6%,transparent);box-shadow:var(--lg-edge)}
.dgx-card-pill.is-custom{color:color-mix(in srgb,var(--app-accent) 78%,var(--text-primary));background:color-mix(in srgb,var(--app-accent) 12%,transparent);box-shadow:var(--lg-edge),inset 0 0 0 .5px color-mix(in srgb,var(--app-accent) 22%,transparent)}
/* Fillable corner badge — rounded capsule on the thumb, never an edge-strip. Reserved SUCCESS tone
   so it reads DISTINCT from the accent-tinted is-custom pill / .on category pill / accent dot
   (--color-info is an alias of --app-accent, which would collapse all three accent signals into one). */
.dgx-card-fill{position:absolute;top:8px;right:8px;z-index:2;display:inline-flex;align-items:center;gap:4px;padding:3px 7px 3px 6px;border-radius:999px;font:600 9.5px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.04em;color:#fff;background:color-mix(in srgb,var(--color-success) 86%,#000);box-shadow:var(--lg-edge),var(--shadow-e2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.dgx-card-fill svg{width:10px;height:10px}
/* Per-category SEMANTIC dots — every tone derived from existing accent/semantic tokens + color-mix
   (zero raw hex). data-dot 0 = neutral (no category). Tone meaning set by _docGenCatTone(). */
.dgx-card[data-dot="1"] .dgx-card-dot{background:var(--app-accent);box-shadow:0 0 0 2.5px color-mix(in srgb,var(--app-accent) 16%,transparent)}
.dgx-card[data-dot="2"] .dgx-card-dot{background:var(--color-warning);box-shadow:0 0 0 2.5px color-mix(in srgb,var(--color-warning) 16%,transparent)}
.dgx-card[data-dot="3"] .dgx-card-dot{background:var(--color-success);box-shadow:0 0 0 2.5px color-mix(in srgb,var(--color-success) 16%,transparent)}
.dgx-card[data-dot="4"] .dgx-card-dot{background:color-mix(in srgb,var(--app-accent) 50%,var(--color-error));box-shadow:0 0 0 2.5px color-mix(in srgb,var(--app-accent) 14%,transparent)}
.dgx-card[data-dot="5"] .dgx-card-dot{background:color-mix(in srgb,var(--app-accent) 60%,var(--color-success));box-shadow:0 0 0 2.5px color-mix(in srgb,var(--app-accent) 14%,transparent)}
.dgx-card[data-dot="6"] .dgx-card-dot{background:var(--color-error);box-shadow:0 0 0 2.5px color-mix(in srgb,var(--color-error) 16%,transparent)}
.dgx-gal-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:64px 20px;color:var(--text-secondary);text-align:center}
.dgx-gal-empty-ico{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:16px;margin-bottom:4px;background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 10%,var(--card-bg)),var(--card-bg));box-shadow:var(--lg-edge),var(--shadow-e1)}
.dgx-gal-empty-ico .dg-blank-ico{width:22px;height:22px;color:color-mix(in srgb,var(--text-secondary) 70%,var(--app-accent))}
.dgx-gal-empty-h{font:600 16px/1.2 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:var(--text-primary)}
.dgx-gal-empty-sub{font:var(--text-caption);color:var(--text-secondary);max-width:280px}
.dgx-gal-empty-btn{margin-top:8px;padding:7px 16px;border:.5px solid var(--chrome-border);border-radius:999px;background:var(--surface-grad);color:var(--text-primary);font:600 12.5px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;cursor:pointer;box-shadow:var(--lg-edge),var(--shadow-e1);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-base)}
.dgx-gal-empty-btn:hover{transform:translateY(-1px);box-shadow:var(--lg-edge),var(--shadow-e2),var(--glow-accent-soft)}
.dgx-gal-empty-btn:active{transform:translateY(0) scale(.97)}
/* ── Tablet / phone: rail stacks above the desk; desk stays the dominant surface ── */
@media (max-width:1024px){
  .dgx-body{flex-direction:column}
  .dgx-rail{flex-basis:auto;max-height:42vh}
  .dgx-rail.is-collapsed{max-height:0;flex-basis:0}
  .dgx-rail-toggle{left:auto;right:14px;top:14px}
  .dgx-rail-toggle.is-collapsed{left:auto;right:14px}
}
@media (max-width:560px){
  .dgx-head{flex-wrap:wrap;gap:8px;padding:10px 12px}
  .dgx-head-c{order:3;width:100%;justify-content:flex-start}
  .dgx-gal-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  /* thumb scale is handled by the container query (100cqw/816) — tracks the smaller card width automatically. */
  /* Flagship gallery header stacks the search full-width below the title row so nothing overflows at 390px. */
  .dgx-gal-head{flex-wrap:wrap}
  .dgx-gal-titles{flex:1}
  .dgx-gal-search{order:3;width:100%;max-width:none;margin-left:0;flex-basis:100%}
  .dgx-gal-cats{padding:10px 14px}
}
/* Reduced-transparency / no-blur fallback (DESIGN.md accessibility baseline). */
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  .dgx-gal-overlay{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(0,0,0,.6)}
  .dgx-rail,.dgx-desk{background:var(--surface)}
  /* The new glass chrome (header band, category pills, fillable badge) drops to solid under reduced-transparency. */
  .dgx-gal-head{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--surface-grad)}
  .dgx-gal-cat{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--surface-grad)}
  .dgx-card-fill{backdrop-filter:none;-webkit-backdrop-filter:none}
}
/* Secondary panels (Pending + Auth Emails) sit side-by-side on wide screens; the
   table + Letterhead stay full-width. align-items:start so an expanded panel
   doesn't stretch its empty neighbor. */
.admin-secondary-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px;align-items:start}
.admin-secondary-grid .admin-panel{margin-bottom:0}
@media (max-width:900px){.admin-secondary-grid{grid-template-columns:1fr}}
/* V124 — dashboard composition: primary column (team table) + right rail. */
.admin-grid{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(300px,.9fr);gap:18px;align-items:start;margin-bottom:18px}
.admin-grid-main{min-width:0;display:flex;flex-direction:column;gap:16px}
.admin-grid-main .admin-users-panel{margin-top:0}
.admin-grid-rail{display:flex;flex-direction:column;gap:14px;min-width:0}
.admin-grid-rail .admin-panel{margin-bottom:0}
/* Activity log lives full-width in the config zone; rows flow in 2 columns to use
   the width, body scrolls past its cap. */
#adminAuditPanel .admin-audit-scroll{max-height:300px;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;gap:0 28px;align-content:start}
@media (max-width:800px){#adminAuditPanel .admin-audit-scroll{grid-template-columns:1fr}}
/* Activity log = fixed-height panel, scrolls internally (never resizes the rail). */
.admin-audit-scroll{max-height:196px;overflow-y:auto}
/* B1 — the Security Audit trail carries far richer per-event cards than the general activity log;
   #id-scoped unclamp beats the shared 196px .admin-audit-scroll rule for #adminSecAuditBody ONLY
   (the general #adminAuditBody stays clamped). Generous internal scroll, never resizes the rail. */
#adminSecAuditBody{max-height:640px;overflow-y:auto}
/* B2/B3 — Security Audit event cards: elevated, rounded, expandable. Depth via elevation (never a
   colored edge-strip); severity via a fill pill; #icon-* glyph per event. Scoped to the sec rows. */
#adminSecAuditRows{display:flex;flex-direction:column;gap:8px;padding:4px 2px 2px}
.admin-audit-card{background:var(--card-bg);border:.5px solid var(--chrome-border);border-radius:var(--radius-md,12px);box-shadow:var(--shadow-e1);transition:box-shadow var(--motion-base) var(--ease-spring),transform var(--motion-base) var(--ease-spring);cursor:pointer;overflow:hidden}
.admin-audit-card:hover,.admin-audit-card:focus-visible{box-shadow:var(--shadow-e2);transform:translateY(-1px);outline:none}
.admin-audit-card:focus-visible{box-shadow:var(--shadow-e2),0 0 0 2px color-mix(in srgb,var(--app-accent) 45%,transparent)}
.sec-row-main{display:flex;align-items:flex-start;gap:11px;padding:11px 13px}
.admin-audit-card .admin-audit-ico{flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--app-accent) 9%,transparent);color:var(--app-accent);margin-top:1px}
.admin-audit-card .admin-audit-ico svg{width:15px;height:15px}
.sec-row-body{flex:1 1 auto;min-width:0}
.sec-row-l1{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--text-primary);line-height:1.4}
.sec-row-l1 b{font-weight:600;text-transform:capitalize}
.sec-row-sum{color:var(--text-secondary);font-weight:400}
.sec-row-l2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:5px}
.sec-meta-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:500;color:var(--text-muted);background:color-mix(in srgb,var(--text-primary) 5%,transparent);padding:2px 8px;border-radius:var(--radius-pill,999px);font-variant-numeric:tabular-nums}
.sec-meta-chip svg{width:11px;height:11px;opacity:.7}
.sec-sev-pill{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;letter-spacing:.2px;text-transform:uppercase;padding:1px 8px;border-radius:var(--radius-pill,999px)}
/* Severity pill fills — solid semantic tints (contained, no edge-strip). Info is quietest. */
.sec-sev-pill.sec-flt-chip-info{background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent)}
.sec-sev-pill.sec-flt-chip-notice{background:color-mix(in srgb,#3b82f6 16%,transparent);color:#1d4ed8}
.sec-sev-pill.sec-flt-chip-warning{background:color-mix(in srgb,#f59e0b 20%,transparent);color:#b45309}
.sec-sev-pill.sec-flt-chip-critical{background:var(--red-500,#ef4444);color:#fff}
[data-theme="midnight"] .sec-sev-pill.sec-flt-chip-notice{color:#93c5fd}
[data-theme="midnight"] .sec-sev-pill.sec-flt-chip-warning{color:#fbbf24}
.admin-audit-when{flex:0 0 auto;font-size:11.5px;color:var(--text-muted);white-space:nowrap;margin-top:2px}
.sec-row-chev{flex:0 0 auto;width:13px;height:13px;color:var(--text-muted);opacity:.5;margin-top:3px;transition:transform var(--motion-fast) var(--ease-out)}
.admin-audit-card.is-open .sec-row-chev{transform:rotate(90deg)}
.sec-row-drawer{margin:0 11px 11px;padding:11px 13px;border-radius:var(--radius-md,10px)}
.sec-chain{display:flex;gap:14px;flex-wrap:wrap;font-size:10.5px;font-family:var(--font-mono,ui-monospace,monospace);color:var(--text-muted);margin-bottom:8px}
.sec-detail-json{margin:0;font-size:11px;font-family:var(--font-mono,ui-monospace,monospace);color:var(--text-secondary);white-space:pre-wrap;word-break:break-word;max-height:200px;overflow:auto;line-height:1.5}
/* B3 — richer empty states (filtered vs never-logged) */
.sec-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:34px 18px;text-align:center}
.sec-empty svg{width:30px;height:30px;color:color-mix(in srgb,var(--app-accent) 45%,var(--text-muted));opacity:.65}
.sec-empty p{margin:0;font-size:13.5px;font-weight:600;color:var(--text-secondary)}
.sec-empty span{font-size:12px;color:var(--text-muted);max-width:320px}
.sec-empty-clear{margin-top:2px;font-size:12px;font-weight:600;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 8%,transparent);border:none;padding:5px 13px;border-radius:var(--radius-pill,999px);cursor:pointer;transition:background var(--motion-fast) var(--ease-out)}
.sec-empty-clear:hover{background:color-mix(in srgb,var(--app-accent) 15%,transparent)}
/* B3 — the integrity + signals hero strip (an .rt-orb-surface orb earns its place here) */
.sec-audit-hero{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:12px;border-radius:var(--radius-lg);background:var(--card-bg);border:.5px solid var(--chrome-border);box-shadow:var(--shadow-e2)}
.sec-audit-hero-orb{width:34px;height:34px;border-radius:11px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center}
.sec-audit-hero-orb svg{width:17px;height:17px}
.sec-audit-hero-txt{flex:1 1 auto;min-width:0}
@media (max-width:1100px){.admin-grid{grid-template-columns:1fr}}
.admin-config-zone{display:flex;flex-direction:column;gap:16px;margin-bottom:18px}
/* Role presets — cards in a responsive grid (was a flat bordered list). */
/* P3.9 — auto-FIT (not auto-fill): collapse empty trailing tracks so the cards
   stretch to fill the row instead of leaving the dead space Gavin flagged. */
.admin-rp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;padding:16px 18px}
.admin-rp-card{background:color-mix(in srgb,var(--text-primary) 2.5%,transparent);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);padding:14px;box-shadow:var(--lg-edge);display:flex;flex-direction:column;gap:7px;transition:transform var(--motion-base) var(--ease-spring),box-shadow var(--motion-base)}
.admin-rp-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-e2),var(--lg-edge)}
.admin-rp-card-top{display:flex;align-items:center;gap:9px}
.admin-rp-ico{width:30px;height:30px;flex-shrink:0;border-radius:9px;background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 20%,transparent),color-mix(in srgb,var(--app-accent) 10%,transparent));color:var(--app-accent);display:inline-flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.admin-rp-ico svg{width:15px;height:15px}
.admin-rp-role{font-size:14px;font-weight:700;letter-spacing:-.2px;color:var(--text-primary);text-transform:capitalize}
.admin-rp-meta{font-size:11px;color:var(--text-muted)}
.admin-rp-push{margin-top:4px;height:30px;border:0.5px solid var(--chrome-border);border-radius:var(--radius-pill);background:var(--card-bg);color:var(--text-secondary);font-size:11.5px;font-weight:600;font-family:inherit;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.14);transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.admin-rp-push:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent);border-color:color-mix(in srgb,var(--app-accent) 32%,transparent)}
.admin-rp-push:active{transform:scale(.96)}
/* C1 — role-preset card actions (Edit + Push) + the editor overlay. */
.admin-rp-actions{display:flex;gap:6px;margin-top:4px}
.admin-rp-actions .admin-rp-push{margin-top:0;flex:1 1 auto}
.admin-rp-edit{height:30px;padding:0 14px;border:0.5px solid var(--chrome-border);border-radius:var(--radius-pill);background:var(--card-bg);color:var(--text-secondary);font-size:11.5px;font-weight:600;font-family:inherit;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.14);transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.admin-rp-edit:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent);border-color:color-mix(in srgb,var(--app-accent) 32%,transparent)}
.admin-rp-edit:active{transform:scale(.96)}
.rp-edit-overlay{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:24px;background:color-mix(in srgb,#000 42%,transparent);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:rpFade var(--motion-fast) var(--ease-out)}
@keyframes rpFade{from{opacity:0}to{opacity:1}}
.rp-edit-panel{width:min(560px,100%);max-height:88vh;display:flex;flex-direction:column;border-radius:var(--radius-lg);overflow:hidden;animation:rpRise var(--motion-base) var(--ease-spring)}
@keyframes rpRise{from{transform:translateY(10px) scale(.985);opacity:0}to{transform:none;opacity:1}}
.rp-edit-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:.5px solid color-mix(in srgb,var(--text-primary) 8%,transparent)}
.rp-edit-title{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--text-primary)}
.rp-edit-title b{text-transform:capitalize}
.rp-edit-orb{width:28px;height:28px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.rp-edit-orb svg{width:15px;height:15px}
.rp-edit-close{width:30px;height:30px;border:none;border-radius:9px;background:color-mix(in srgb,var(--text-primary) 5%,transparent);color:var(--text-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--motion-fast)}
.rp-edit-close:hover{background:color-mix(in srgb,var(--text-primary) 10%,transparent);color:var(--text-primary)}
.rp-edit-close svg{width:15px;height:15px}
.rp-edit-body{flex:1 1 auto;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:18px}
.rp-field{display:flex;flex-direction:column;gap:8px}
.rp-field-l{font-size:12px;font-weight:600;color:var(--text-secondary);display:flex;align-items:center;gap:8px}
.rp-field-count{font-size:11px;font-weight:500;color:var(--text-muted)}
.rp-input{height:38px;padding:0 12px;font-size:13px;color:var(--text-primary);background:var(--input-bg,var(--card-bg));border:.5px solid var(--chrome-border);border-radius:var(--radius-md,10px);box-shadow:var(--shadow-e1)}
.rp-input:focus{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 45%,transparent)}
.rp-seg{display:inline-flex;gap:4px;background:color-mix(in srgb,var(--text-primary) 5%,transparent);padding:3px;border-radius:var(--radius-pill,999px);width:fit-content}
.rp-seg-btn{padding:5px 16px;font-size:12px;font-weight:600;color:var(--text-muted);background:transparent;border:none;border-radius:var(--radius-pill,999px);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
.rp-seg-btn.is-on{background:var(--card-bg);color:var(--text-primary);box-shadow:var(--shadow-e1)}
.rp-cats{display:flex;flex-direction:column;gap:12px}
.rp-cat-h{font-size:10.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
.rp-chips{display:flex;flex-wrap:wrap;gap:7px}
.rp-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--text-secondary);background:color-mix(in srgb,var(--text-primary) 5%,transparent);border:.5px solid transparent;padding:6px 11px;border-radius:var(--radius-pill,999px);cursor:pointer;transition:background var(--motion-fast) var(--ease-out),color var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.rp-chip:hover{background:color-mix(in srgb,var(--text-primary) 9%,transparent)}
.rp-chip:active{transform:scale(.96)}
.rp-chip.is-on{background:color-mix(in srgb,var(--app-accent) 13%,transparent);color:var(--app-accent);border-color:color-mix(in srgb,var(--app-accent) 30%,transparent)}
.rp-chip-ic svg,.rp-chip-x{width:13px;height:13px}
.rp-chip-ic{display:inline-flex;opacity:.75}
.rp-chip-x{margin-left:1px}
.rp-empty-hint{font-size:12px;color:var(--text-muted);font-style:italic}
.rp-edit-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-top:.5px solid color-mix(in srgb,var(--text-primary) 8%,transparent)}
.rp-foot-r{display:flex;gap:8px}
.rp-btn{height:36px;padding:0 18px;font-size:13px;font-weight:600;font-family:inherit;border-radius:var(--radius-pill,999px);cursor:pointer;border:.5px solid transparent;transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.rp-btn:active{transform:scale(.97)}
.rp-btn-primary{background:var(--app-accent);color:#fff}
.rp-btn-primary:hover{filter:brightness(1.05)}
.rp-btn-primary:disabled{opacity:.6;cursor:default}
.rp-btn-ghost{background:transparent;border-color:var(--chrome-border);color:var(--text-secondary)}
.rp-btn-ghost:hover{background:color-mix(in srgb,var(--text-primary) 5%,transparent)}
.rp-btn-quiet{background:transparent;color:var(--text-muted);font-weight:500}
.rp-btn-quiet:hover{color:var(--text-secondary)}
@media (max-width:560px){.rp-edit-foot{flex-direction:column-reverse;align-items:stretch}.rp-foot-r{justify-content:flex-end}}
/* C5 — admin Automation panel: labeled subsections + org-wide rules list + editor overlay. */
/* 📒 V162 row 29 — rule-health run history */
.aar-chips{display:flex;gap:8px;padding:10px 12px 4px}
.aar-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--text-secondary);background:color-mix(in srgb,var(--t) 9%,transparent);border:.5px solid color-mix(in srgb,var(--t) 22%,transparent);padding:4px 11px;border-radius:999px}
.aar-chip b{color:var(--t);font-variant-numeric:tabular-nums}
.aar-list{max-height:380px;overflow-y:auto;padding:6px 4px 8px}
.aar-row{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:10px}
.aar-row:hover{background:color-mix(in srgb,var(--app-accent) 5%,transparent)}
.aar-dot{width:9px;height:9px;border-radius:999px;flex:0 0 auto;margin-top:5px}
.aar-main{flex:1;min-width:0}
.aar-t{font-size:12.5px;font-weight:700;color:var(--text-primary)}
.aar-flow{font-weight:600;color:var(--text-muted);font-size:11.5px}
.aar-d{font-size:11.5px;color:var(--text-muted);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aar-proj{flex:0 0 auto;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:700;color:var(--text-secondary);padding-top:2px}
.aar-when{flex:0 0 auto;font-size:11px;font-weight:600;color:var(--text-muted);font-variant-numeric:tabular-nums;padding-top:2px}
.admin-auto-sub-h{font-size:12.5px;font-weight:700;color:var(--text-primary);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.admin-auto-rules-h{padding-bottom:10px;border-bottom:.5px solid color-mix(in srgb,var(--text-primary) 8%,transparent)}
.admin-auto-count{font-size:11px;font-weight:500;color:var(--text-muted);margin-left:6px}
.admin-auto-new{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;font-size:12.5px;font-weight:600;font-family:inherit;color:#fff;background:var(--app-accent);border:none;border-radius:var(--radius-pill,999px);cursor:pointer;transition:filter var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.admin-auto-new:hover{filter:brightness(1.05)}
.admin-auto-new:active{transform:scale(.97)}
.admin-auto-new svg{width:12px;height:12px}
.admin-auto-rules{margin-top:12px}
.admin-auto-rules .rule:last-child{margin-bottom:0}
.admin-auto-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:30px 18px;text-align:center}
.admin-auto-empty svg{width:28px;height:28px;color:color-mix(in srgb,var(--app-accent) 50%,var(--text-muted));opacity:.7}
.admin-auto-empty p{margin:0;font-size:13.5px;font-weight:600;color:var(--text-secondary)}
.admin-auto-empty span{font-size:12px;color:var(--text-muted);max-width:340px}
.admin-auto-editor-panel{width:min(640px,100%)}
/* V124 — Letterhead & Branding body: upgrade the raw inline-styled inputs to the
   material input style (scoped overrides; the inline base values are superseded). */
.admin-brand-body input[type="text"],.admin-brand-body input[type="url"],.admin-brand-body input:not([type]){
  height:38px!important;padding:0 13px!important;border:0.5px solid var(--chrome-border)!important;border-radius:var(--radius-md)!important;
  background:var(--card-bg)!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.04)!important;font-size:13.5px!important;
  transition:border-color var(--motion-fast),box-shadow var(--motion-fast)!important}
.admin-brand-body input:focus{outline:none!important;border-color:color-mix(in srgb,var(--app-accent) 50%,var(--chrome-border))!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.04),0 0 0 3px color-mix(in srgb,var(--app-accent) 12%,transparent)!important}
.admin-brand-body label{letter-spacing:-.1px}
/* V124 — Letterhead & Branding: full-width grouped cards (fill the panel). */
.admin-brand-intro{font-size:12.5px;color:var(--text-secondary);line-height:1.5;margin-bottom:18px}
.admin-brand-updated{display:block;margin-top:3px;color:var(--text-muted);font-size:11px}
/* P0.2 — Document Template Designer (modal: list ‖ editor ‖ live preview). */
.dd-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(8px) saturate(1.4);-webkit-backdrop-filter:blur(8px) saturate(1.4);opacity:1}
.dd-modal{width:min(96vw,1240px);height:min(92vh,860px);display:flex;flex-direction:column;background:var(--surface,#fff);border-radius:var(--radius-modal,18px);overflow:hidden;box-shadow:var(--lg-edge),var(--shadow-e5,0 24px 64px rgba(0,0,0,.32));animation:dgRise var(--motion-base) var(--ease-spring)}
.dd-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:0.5px solid var(--border)}
.dd-title{font-size:15px;font-weight:700}
.dd-x{border:none;background:transparent;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:8px}
.dd-x svg{width:18px;height:18px}
/* MATTE STAGE: the body becomes the panel-stage; the three panes float on it as
   distinct planes (depth via elevation + matte gap, never border-as-spine). */
.dd-body{flex:1;min-height:0;display:grid;grid-template-columns:228px 1.05fr 1fr;gap:12px;padding:12px;background:var(--app-bg);overflow:hidden}
/* TEMPLATE RAIL (chrome) — SOLID floating panel, NOT glass: it scrolls its own
   content, so a backdrop-filter here would repaint every scroll frame (DESIGN.md
   rule 15 — glass never inside a scroll container). Shadow gives the float. */
.dd-list{overflow-y:auto;overflow-x:hidden;padding:10px;display:flex;flex-direction:column;gap:3px;border:none;border-radius:var(--radius-lg,14px);background:var(--surface);box-shadow:0 0 0 .5px rgba(0,0,0,.06),var(--shadow-e2);scrollbar-width:none}
.dd-list::-webkit-scrollbar{width:6px}
.dd-list::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text-primary) 14%,transparent);border-radius:99px}
.dd-list:hover::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text-primary) 26%,transparent)}
.dd-new{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 11px;border:none;border-radius:10px;background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;margin-bottom:6px;transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.dd-new .ic{width:13px;height:13px}
.dd-new:hover{background:color-mix(in srgb,var(--app-accent) 18%,transparent)}
.dd-new:active{transform:scale(.97)}
.dd-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border:none;border-radius:10px;background:transparent;text-align:left;cursor:pointer;font:inherit;transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
.dd-item-ico{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:0 0 auto;border-radius:8px;background:color-mix(in srgb,var(--text-primary) 5%,transparent);color:var(--text-muted)}
.dd-item-ico .ic{width:14px;height:14px}
.dd-item-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.dd-item-name{font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-item-cat{font-size:11px;color:var(--text-muted)}
.dd-item:hover{background:color-mix(in srgb,var(--text-primary) 4%,transparent)}
.dd-item:active{transform:scale(.98)}
.dd-item.active{background:color-mix(in srgb,var(--app-accent) 14%,transparent);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--app-accent) 35%,transparent)}
.dd-item.active .dd-item-ico{background:color-mix(in srgb,var(--app-accent) 18%,transparent);color:var(--app-accent)}
.dd-item.active .dd-item-name{color:var(--app-accent)}
/* SOLID EDITOR PANEL (content) — opaque, legibility-first, floats with elevation. */
.dd-edit{overflow-y:auto;overflow-x:hidden;padding:18px 18px 22px;border:none;border-radius:var(--radius-lg,14px);background:var(--surface);box-shadow:0 0 0 .5px rgba(0,0,0,.06),var(--shadow-e2);display:flex;flex-direction:column;gap:11px;scrollbar-width:none}
.dd-edit::-webkit-scrollbar{width:6px}
.dd-edit::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text-primary) 13%,transparent);border-radius:99px}
.dd-edit:hover::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text-primary) 24%,transparent)}
.dd-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dd-in{height:32px;padding:0 11px;font:inherit;font-size:13px;border:0.5px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--text-primary);outline:none}
.dd-in:disabled{opacity:.6}
.dd-section-h{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);margin-top:6px;display:flex;align-items:center;justify-content:space-between}
.dd-hint{font-weight:400;text-transform:none;letter-spacing:0}
/* Unified tactile row-action family: gear / insert / delete share one rounded,
   press-deform pattern; signal via fill/color, never an edge-strip. */
.dd-add-field,.dd-f-ins,.dd-f-del,.dd-f-cfg{border:none;background:var(--surface-2);border-radius:8px;cursor:pointer;font:inherit;color:var(--text-secondary);transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.dd-add-field{padding:3px 9px;font-size:11.5px;font-weight:600;color:var(--app-accent)}
.dd-add-field:hover{background:color-mix(in srgb,var(--app-accent) 12%,var(--surface-2))}
.dd-fields{display:flex;flex-direction:column;gap:5px}
.dd-field{display:grid;grid-template-columns:1fr 1.2fr 84px auto auto auto auto;gap:5px;align-items:center}
/* Document Studio P5.1 — per-field config panel (type-aware authoring of calc/select/table/format/conditional). */
/* quiet rounded hover-tint on the whole field row (it is the editable object). */
.dd-field-wrap{display:flex;flex-direction:column;border-radius:9px;padding:3px;margin:0 -3px;transition:background var(--motion-fast)}
.dd-field-wrap:hover{background:color-mix(in srgb,var(--text-primary) 2.5%,transparent)}
.dd-f-cfg{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;font-size:14px;border-radius:8px}
.dd-f-ins:hover,.dd-f-cfg:hover{background:color-mix(in srgb,var(--app-accent) 12%,var(--surface-2));color:var(--app-accent)}
.dd-field-cfg{display:flex;flex-direction:column;gap:7px;padding:9px 12px 11px 12px;margin:3px 0 6px;background:var(--hover-overlay,rgba(0,0,0,.02));border-radius:7px}
.dd-field-cfg[hidden]{display:none}
.dd-cfg-row{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--text-muted)}
.dd-cfg-row > span{font-weight:600}
.dd-cfg-hint{font-weight:400;font-size:10.5px;color:var(--text-muted);opacity:.8;margin-top:1px}
.dd-cfg{font-size:12px;padding:5px 7px;border:.5px solid var(--border);border-radius:7px;background:var(--surface-2);color:var(--text-primary);outline:none;font:inherit;font-size:12px}
.dd-cfg-cond{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px}
.dd-cfg-cond > span{width:100%}
.dd-cfg-cond input,.dd-cfg-cond select{flex:1;min-width:80px}
.dd-field input,.dd-field select{height:30px;padding:0 8px;font:inherit;font-size:12px;border:0.5px solid var(--border);border-radius:7px;background:var(--surface-2);color:var(--text-primary);outline:none;min-width:0;transition:box-shadow var(--motion-fast),border-color var(--motion-fast)}
/* rounded focus rings on every input (rule 7 — never a boxy outline). */
.dd-field input:focus,.dd-field select:focus,.dd-in:focus,.dd-cfg:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 14%,transparent);border-color:color-mix(in srgb,var(--app-accent) 45%,var(--border))}
.dd-f-req{display:flex;align-items:center;gap:3px;font-size:11px;color:var(--text-muted)}
.dd-f-req input{height:auto}
.dd-f-ins,.dd-f-del,.dd-f-cfg{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;font-size:14px;border-radius:8px}
.dd-f-ins .ic,.dd-f-del .ic,.dd-f-cfg .ic{width:13px;height:13px}
.dd-f-del{color:var(--color-error)}
.dd-f-del:hover{background:color-mix(in srgb,var(--color-error) 14%,var(--surface-2));color:var(--color-error)}
.dd-add-field:active,.dd-f-ins:active,.dd-f-del:active,.dd-f-cfg:active{transform:scale(.9)}
/* ── token palette → grouped + searchable + live coverage meter ── */
.dd-tok-search{display:flex;align-items:center;gap:7px;height:32px;padding:0 11px;border-radius:9px;background:var(--surface-2);box-shadow:inset 0 1px 2px rgba(0,0,0,.04);transition:box-shadow var(--motion-fast)}
.dd-tok-search:focus-within{box-shadow:inset 0 1px 2px rgba(0,0,0,.04),0 0 0 3px color-mix(in srgb,var(--app-accent) 14%,transparent)}
.dd-tok-search .ic{width:13px;height:13px;color:var(--text-muted);flex:0 0 auto}
.dd-tok-search input{flex:1;min-width:0;border:none;background:transparent;outline:none;font:inherit;font-size:12.5px;color:var(--text-primary)}
.dd-palette{display:flex;flex-direction:column;gap:9px}
.dd-tok-group-h{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);margin-bottom:5px}
.dd-tok-group-h .ic{width:11px;height:11px;opacity:.7}
.dd-tok-group-body{display:flex;flex-wrap:wrap;gap:5px}
.dd-tok{padding:4px 11px;border:none;border-radius:999px;background:var(--surface-2);color:var(--text-secondary);font-size:11.5px;font-family:inherit;font-weight:600;cursor:pointer;box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--text-primary) 8%,transparent);transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
.dd-tok:hover{background:color-mix(in srgb,var(--app-accent) 12%,var(--surface-2));color:var(--app-accent);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--app-accent) 30%,transparent)}
.dd-tok:active{transform:scale(.94)}
.dd-tok.used{background:color-mix(in srgb,var(--app-accent) 16%,var(--surface));color:var(--app-accent);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--app-accent) 40%,transparent)}
.dd-tok-meter{font-weight:600;font-size:11px;text-transform:none;letter-spacing:0;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 12%,transparent);padding:2px 9px;border-radius:999px}
.dd-tok-warn{display:flex;align-items:center;flex-wrap:wrap;gap:5px;font-size:11.5px;color:var(--text-secondary);padding:7px 10px;border-radius:9px;background:var(--color-warning-bg);margin-top:2px}
.dd-tok-warn .ic{width:13px;height:13px;color:var(--color-warning);flex:0 0 auto}
.dd-tok-warn code{background:color-mix(in srgb,var(--text-primary) 8%,transparent);padding:1px 5px;border-radius:5px;font-size:11px}
/* ── HTML body → framed code editor with header strip + char readout ── */
.dd-code{display:flex;flex-direction:column;flex:1;min-height:240px;border-radius:11px;overflow:hidden;background:var(--surface-2);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--text-primary) 8%,transparent);transition:box-shadow var(--motion-fast)}
.dd-code:focus-within{box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--app-accent) 30%,transparent),0 0 0 3px color-mix(in srgb,var(--app-accent) 13%,transparent)}
.dd-code-bar{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;background:color-mix(in srgb,var(--text-primary) 3%,var(--surface-2));border-bottom:.5px solid color-mix(in srgb,var(--text-primary) 8%,transparent)}
.dd-code-t{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
.dd-code-t .ic{width:12px;height:12px;opacity:.75}
.dd-code-stat{font-family:ui-monospace,SFMono-Regular,monospace;font-size:10.5px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.dd-html{width:100%;min-height:200px;flex:1;padding:12px;font-family:ui-monospace,SFMono-Regular,monospace;font-size:12.5px;line-height:1.55;border:none;border-radius:0;background:transparent;color:var(--text-primary);outline:none;resize:vertical}
.dd-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.dd-del{padding:8px 14px;border:0.5px solid var(--app-danger,#ff3b30);background:transparent;color:var(--app-danger,#ff3b30);border-radius:9px;cursor:pointer;font:inherit;font-size:13px;font-weight:600}
/* SOLID PREVIEW PANEL (content) — its own floating plane on the matte stage. */
.dd-preview{display:flex;flex-direction:column;min-width:0;border:none;border-radius:var(--radius-lg,14px);background:var(--surface);box-shadow:0 0 0 .5px rgba(0,0,0,.06),var(--shadow-e2);overflow:hidden}
.dd-preview-head{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:10px 16px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);border-bottom:.5px solid color-mix(in srgb,var(--text-primary) 8%,transparent)}
.dd-preview-head .ic{width:13px;height:13px;flex:0 0 auto}
.dd-preview-stage{flex:1;position:relative;min-height:0;margin:14px;border-radius:var(--radius-md,10px);overflow:hidden;box-shadow:0 0 0 .5px rgba(0,0,0,.08),var(--shadow-e2);background:#fff}
.dd-preview-frame{position:absolute;inset:0;width:100%;height:100%;border:none;background:#fff}
.dd-preview-blank{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--text-primary) 1.5%,transparent) 0 14px,transparent 14px 28px),var(--surface);pointer-events:none}
.dd-empty,.dd-empty-sm{color:var(--text-muted);font-size:13px;padding:14px}
.dd-empty-sm{padding:6px 0;font-size:12px}
/* Brand-ownership lint advisory (2026-06-27) — semantic warning tokens (theme-correct
   on all themes), SVG alert icon, real elevation, no raw hex, no edge-strip. */
.dd-lint-card{border:.5px solid color-mix(in srgb,var(--color-warning) 38%,transparent);background:color-mix(in srgb,var(--color-warning) 9%,var(--card-bg));border-radius:14px;padding:12px 14px;margin-bottom:12px;box-shadow:var(--shadow-e1)}
.dd-lint-head{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;color:var(--text-primary)}
.dd-lint-ico{width:15px;height:15px;color:var(--color-warning);flex:0 0 auto}
.dd-lint-x{margin-left:auto;border:0;background:transparent;color:var(--text-muted);font-size:18px;line-height:1;cursor:pointer;border-radius:8px;width:24px;height:24px;transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.dd-lint-x:hover{background:color-mix(in srgb,var(--text-primary) 8%,transparent)}
.dd-lint-x:active{transform:scale(.88)}
.dd-lint-sub{font-size:12px;color:var(--text-muted);margin:4px 0 8px}
.dd-lint-list{margin:0;padding-left:18px;font-size:12px;color:var(--text-primary);display:flex;flex-direction:column;gap:4px}
.dd-lint-list code{background:color-mix(in srgb,var(--text-primary) 7%,transparent);padding:1px 5px;border-radius:6px;font-size:11.5px}
.dd-lint-bind{color:var(--text-muted)}
/* Crafted empty states (DESIGN.md) — shared shape with .dg-blank. */
.dd-blank{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:36px 20px;margin:auto;max-width:260px}
.dd-blank-ico{width:36px;height:36px;color:var(--app-accent);opacity:.65;padding:8px;border-radius:11px;background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 14%,transparent),color-mix(in srgb,var(--app-accent) 6%,transparent));box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.dd-blank-t{font-size:14px;font-weight:700;color:var(--text-secondary);letter-spacing:-.2px}
.dd-blank-s{font-size:12px;color:var(--text-muted);line-height:1.45}
@media (max-width:900px){.dd-body{grid-template-columns:1fr;grid-template-rows:auto auto auto;overflow-y:auto}.dd-list{flex-direction:row;flex-wrap:wrap;max-height:130px}}
/* reduced-motion: every press-deform + the modal rise are suppressed (a11y mandatory). */
@media (prefers-reduced-motion:reduce){
  .dd-modal{animation:none}
  .dd-new:active,.dd-item:active,.dd-tok:active,.dd-add-field:active,.dd-f-ins:active,.dd-f-del:active,.dd-f-cfg:active,.dd-lint-x:active{transform:none}
}

/* ══ Document Studio P5b — the visual canvas (palette | canvas | inspector) ══ */
/* MATTE STAGE — the deliberate lit desk the panels float on (replaces the flat --app-bg fill) */
.ds-overlay{position:fixed;inset:0;z-index:240;background:radial-gradient(120% 90% at 50% -10%, color-mix(in srgb,#fff 6%,var(--app-bg)) 0%, var(--app-bg) 58%, color-mix(in srgb,var(--app-bg) 86%,#000) 100%);display:flex;flex-direction:column;animation:modalOverlayIn var(--motion-fast) var(--ease-out)}
/* Premium frosted GLASS header nav band — chrome floating above content (does NOT scroll → blur OK) */
.ds-head{flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:12px 18px;border-bottom:.5px solid var(--chrome-border);background:var(--frost-bg-strong);backdrop-filter:var(--frost-blur);-webkit-backdrop-filter:var(--frost-blur);box-shadow:var(--lg-edge),0 1px 0 color-mix(in srgb,var(--app-bg) 10%,transparent),var(--shadow-e2);position:relative;z-index:2}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.ds-head{background:var(--surface-grad,var(--surface))}}
@media (prefers-reduced-transparency:reduce){.ds-head{background:var(--surface-grad,var(--surface));backdrop-filter:none;-webkit-backdrop-filter:none}}
.ds-head-title-wrap{min-width:0;display:flex;flex-direction:column;gap:1px}
.ds-head-name{font:700 15px/1.2 -apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,sans-serif;color:var(--text-primary);border:none;background:transparent;outline:none;padding:2px 4px;border-radius:6px;min-width:160px;max-width:46vw}
.ds-head-name:focus{background:color-mix(in srgb,var(--text-primary) 5%,transparent)}
.ds-head-sub{font-size:11.5px;color:var(--text-muted);padding-left:4px}
.ds-head-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.ds-dirty-dot{width:7px;height:7px;border-radius:50%;background:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 22%,transparent);flex:0 0 auto}
/* Header history cluster — undo/redo grouped into one segmented glass group, not loose squares */
.ds-head-group{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:11px;background:color-mix(in srgb,var(--text-primary) 6%,transparent);box-shadow:inset 0 0 0 .5px var(--chrome-border)}
.ds-head-group .ds-iconbtn{width:30px;height:30px}
.ds-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;border-radius:9px;background:transparent;color:var(--text-secondary);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.ds-iconbtn:hover:not(:disabled){background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent)}
.ds-iconbtn:active:not(:disabled){transform:scale(.9)}
.ds-iconbtn:disabled{opacity:.32;cursor:default}
.ds-iconbtn svg{width:14px;height:14px}
.ds-body{flex:1;min-height:0;display:grid;grid-template-columns:222px minmax(0,1fr) 304px;gap:14px;padding:14px;overflow:hidden}
/* CHROME panels (palette + inspector) read as floating GLASS; the blur lives on the panel SHELL
   (overflow:hidden, never the scroller — rule 15). The CENTER canvas panel is CONTENT → SOLID. */
.ds-panel{background:var(--lg-bg);backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract);border-radius:18px;box-shadow:var(--lg-edge),var(--shadow-e3);border:.5px solid var(--chrome-border);display:flex;flex-direction:column;min-height:0;overflow:hidden}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.ds-panel{background:var(--surface)}}
@media (prefers-reduced-transparency:reduce){.ds-panel{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
.ds-panel.ds-panel-canvas{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:var(--lg-edge),var(--shadow-e3)}
.ds-panel-head{flex:0 0 auto;padding:13px 16px 9px;font:600 11px/1 -apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
/* The scroll host inside each glass panel paints FULLY OPAQUE so the panel tint never bleeds
   up through the scrolling content (glass=chrome / SOLID=content discipline) and the blur
   layer never repaints on scroll. */
.ds-panel-scroll{flex:1;min-height:0;overflow-y:auto;padding:4px 12px 14px;background:var(--surface)}
/* palette */
.ds-pal-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* Tactile, draggable-feeling block chips — bevel + grip texture + spring lift + press-deform.
   Inner highlight uses --specular-hi (surface-derived) so it reads as a soft bevel on dark themes
   too, never a harsh white hairline. */
.ds-pal-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 6px 13px;border:none;border-radius:13px;background:var(--card-bg);color:var(--text-secondary);cursor:grab;font:600 11.5px/1.1 -apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;box-shadow:var(--shadow-e1),inset 0 1px 0 var(--specular-hi),inset 0 0 0 .5px var(--chrome-border);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast),background var(--motion-fast),color var(--motion-fast)}
.ds-pal-btn::after{content:'';position:absolute;top:8px;right:9px;width:3px;height:3px;border-radius:50%;background:color-mix(in srgb,var(--text-primary) 22%,transparent);box-shadow:0 4px 0 color-mix(in srgb,var(--text-primary) 22%,transparent),4px 0 0 color-mix(in srgb,var(--text-primary) 22%,transparent),4px 4px 0 color-mix(in srgb,var(--text-primary) 22%,transparent);opacity:0;transition:opacity var(--motion-fast)}
.ds-pal-btn:hover{background:color-mix(in srgb,var(--app-accent) 7%,var(--card-bg));color:var(--text-primary);transform:translateY(-2px);box-shadow:var(--shadow-e2),inset 0 1px 0 var(--specular-hi),inset 0 0 0 .5px color-mix(in srgb,var(--app-accent) 22%,var(--chrome-border))}
.ds-pal-btn:hover::after{opacity:1}
.ds-pal-btn:active{cursor:grabbing;transform:translateY(-1px) scale(.95)}
.ds-pal-btn svg{width:20px;height:20px;color:var(--app-accent);transition:transform var(--motion-fast) var(--ease-spring)}
.ds-pal-btn:hover svg{transform:scale(1.06)}
.ds-pal-sec{margin-top:14px}
.ds-pal-sec-head{font:600 10.5px/1 -apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
/* P5b-3d — saved blocks list in the palette */
.ds-saved-blocks-list{display:flex;flex-direction:column;gap:4px}
.ds-saved-block{display:flex;align-items:center;gap:4px;border-radius:10px;overflow:hidden;background:var(--surface-2,var(--surface))}
.ds-saved-block-insert{flex:1;min-width:0;display:flex;align-items:center;gap:7px;padding:8px 10px;border:none;background:transparent;color:var(--text-secondary,var(--text-muted));cursor:pointer;font:600 12px/1.2 -apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background var(--motion-fast),color var(--motion-fast)}
.ds-saved-block-insert:hover{background:color-mix(in srgb,var(--app-accent) 10%,var(--surface-2));color:var(--text-primary)}
.ds-saved-block-del{flex:0 0 auto;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--text-muted);cursor:pointer;border-radius:8px;transition:background var(--motion-fast),color var(--motion-fast)}
.ds-saved-block-del:hover{background:color-mix(in srgb,var(--color-error) 14%,transparent);color:var(--color-error)}
/* Crafted empty state — centered, rounded, faint tint; never a dead void */
.ds-saved-empty{font:400 11.5px/1.5 -apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;color:var(--text-muted);display:block;padding:14px 10px;text-align:center;border:1px dashed var(--chrome-border);border-radius:11px;background:color-mix(in srgb,var(--text-primary) 3%,transparent)}
/* P5b-3d — inline name prompt (replaces window.prompt to avoid dialog-block trap) */
.ds-prompt-overlay{position:fixed;inset:0;z-index:310;background:rgba(0,0,0,.36);display:flex;align-items:center;justify-content:center}
.ds-prompt-box{background:var(--card-bg,var(--surface));border-radius:16px;padding:20px 22px;width:min(360px,90vw);display:flex;flex-direction:column;gap:12px;box-shadow:0 24px 60px -12px rgba(0,0,0,.5),inset 0 0 0 .5px var(--chrome-border,rgba(0,0,0,.1))}
.ds-prompt-title{font:700 15px/1.2 -apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,sans-serif;color:var(--text-primary)}
.ds-prompt-actions{display:flex;gap:8px;justify-content:flex-end}
/* P5b-3d — starter gallery modal */
.ds-gallery-overlay{position:fixed;inset:0;z-index:310;background:rgba(0,0,0,.36);display:flex;align-items:center;justify-content:center}
.ds-gallery-box{background:var(--card-bg,var(--surface));border-radius:18px;width:min(640px,92vw);max-height:80vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 70px -14px rgba(0,0,0,.55),inset 0 0 0 .5px var(--chrome-border,rgba(0,0,0,.1))}
.ds-gallery-head{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:16px 20px 12px;border-bottom:.5px solid var(--chrome-border,var(--border))}
.ds-gallery-title{font:700 16px/1 -apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,sans-serif;color:var(--text-primary)}
.ds-gallery-body{flex:1;overflow-y:auto;padding:16px}
.ds-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.ds-gallery-card{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:16px 14px 14px;border:none;border-radius:12px;background:var(--surface-2,var(--surface));cursor:pointer;text-align:left;transition:background var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast)}
.ds-gallery-card:hover{background:color-mix(in srgb,var(--app-accent) 8%,var(--surface-2));box-shadow:0 4px 14px -4px rgba(0,0,0,.15);transform:translateY(-1px)}
.ds-gallery-card:active{transform:scale(.97)}
.ds-gallery-card-icon{width:36px;height:36px;border-radius:9px;background:color-mix(in srgb,var(--app-accent) 12%,transparent);display:flex;align-items:center;justify-content:center}
.ds-gallery-card-name{font:700 13px/1.3 -apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;color:var(--text-primary)}
.ds-gallery-card-cat{font:400 11.5px/1 -apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;color:var(--text-muted);text-transform:capitalize}
/* P7 (🦫) — the Import card: a soft dashed cradle so it reads as "bring something in" vs the
   solid Blank/starter cards, and its descriptive sub-line keeps its literal case (.docx / PDF). */
.ds-gallery-card-import{background:color-mix(in srgb,var(--app-accent) 5%,var(--surface-2,var(--surface)));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--app-accent) 22%,transparent)}
.ds-gallery-card-import:hover{background:color-mix(in srgb,var(--app-accent) 11%,var(--surface-2));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--app-accent) 34%,transparent),0 4px 14px -4px rgba(0,0,0,.15)}
.ds-gallery-card-import .ds-gallery-card-cat{text-transform:none;line-height:1.35}
/* canvas */
/* DESK — the canvas scroll host gets a soft cradle so the sheet sits in light, not on a void.
   CONTENT scroll container → NO backdrop-filter (rule 15), pure paint. */
.ds-canvas-wrap{overflow-y:auto;padding:22px 4px 32px;display:flex;flex-direction:column;align-items:center;gap:18px;background:radial-gradient(80% 60% at 50% 22%, color-mix(in srgb,var(--app-accent) 4%,var(--surface)) 0%, var(--surface) 70%)}
/* P5b-3c — multi-page strip (page tabs above the canvas) */
.ds-page-strip{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:center;padding:2px 0}
/* Page tabs = filled+lifted CHIPS — active state signalled by FILL + elevation, NEVER a
   border-as-spine (HARD-rule fix). Specular via --specular-hi so it reads on dark themes. */
.ds-page-tab{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 7px 0 11px;border:none;border-radius:10px;background:var(--card-bg);color:var(--text-muted);font:600 12px/1 -apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;cursor:pointer;box-shadow:var(--shadow-e1),inset 0 0 0 .5px var(--chrome-border);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast),color var(--motion-fast),background var(--motion-fast)}
.ds-page-tab:hover{color:var(--text-primary);background:color-mix(in srgb,var(--app-accent) 8%,var(--card-bg));transform:translateY(-1px);box-shadow:var(--shadow-e2),inset 0 0 0 .5px color-mix(in srgb,var(--app-accent) 24%,var(--chrome-border))}
.ds-page-tab.on{color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 14%,var(--card-bg));box-shadow:var(--shadow-e2),inset 0 1px 0 var(--specular-hi),inset 0 0 0 .5px color-mix(in srgb,var(--app-accent) 34%,transparent)}
.ds-page-tab-num{font-variant-numeric:tabular-nums}
.ds-page-tab-acts{display:inline-flex;align-items:center;gap:1px}
.ds-page-mini{display:inline-flex;align-items:center;justify-content:center;width:17px;height:20px;border-radius:6px;font-size:13px;color:var(--text-muted);transition:background var(--motion-fast),color var(--motion-fast)}
.ds-page-mini:hover{background:color-mix(in srgb,var(--text-primary) 9%,transparent);color:var(--text-primary)}
.ds-page-del:hover{background:color-mix(in srgb,var(--color-error) 16%,transparent);color:var(--color-error)}
.ds-page-add{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 12px;border:1px dashed color-mix(in srgb,var(--app-accent) 30%,var(--chrome-border));border-radius:10px;background:transparent;color:var(--text-muted);font:600 12px/1 -apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;cursor:pointer;transition:border-color var(--motion-fast),color var(--motion-fast),background var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.ds-page-add:hover{border-color:var(--app-accent);color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 7%,transparent);transform:translateY(-1px)}
.ds-page-add:active{transform:scale(.96)}
/* P5b-3c — find & replace panel (floating, top-right of the Studio) */
.ds-fr{position:absolute;top:64px;right:18px;z-index:30;width:300px;display:flex;flex-direction:column;gap:7px;padding:12px;border-radius:14px;background:var(--card-bg,var(--surface));border:.5px solid var(--chrome-border,var(--border));box-shadow:0 14px 40px -10px rgba(15,23,42,.4),0 0 0 .5px rgba(15,23,42,.06)}
.ds-fr-row{display:flex;align-items:center;gap:7px}
.ds-fr-in{flex:1;min-width:0;font:inherit;font-size:13px;padding:7px 9px;border:.5px solid var(--chrome-border,var(--border));border-radius:9px;background:var(--surface-2,var(--surface));color:var(--text-primary);outline:none}
.ds-fr-in:focus{border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 16%,transparent)}
.ds-fr-count{font:600 11px/1 -apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;color:var(--text-muted);white-space:nowrap;min-width:54px;text-align:right}
.ds-fr-x{width:26px;height:26px;border:none;background:transparent;border-radius:7px;color:var(--text-muted);font-size:13px;cursor:pointer}
.ds-fr-x:hover{background:color-mix(in srgb,var(--text-primary) 9%,transparent);color:var(--text-primary)}
.ds-fr-btn{height:32px;padding:0 12px;border:.5px solid var(--app-accent);border-radius:9px;background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent);font:600 12px/1 -apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;cursor:pointer;white-space:nowrap;transition:background var(--motion-fast)}
.ds-fr-btn:hover:not(:disabled){background:color-mix(in srgb,var(--app-accent) 20%,transparent)}
.ds-fr-btn:disabled{opacity:.45;cursor:default;border-color:var(--chrome-border,var(--border));color:var(--text-muted);background:transparent}
.ds-fr-ci{display:flex;align-items:center;gap:7px;font:500 12px/1 -apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;color:var(--text-muted);cursor:pointer}
.ds-fr-ci input{width:14px;height:14px;accent-color:var(--app-accent);cursor:pointer}
/* SHEET — lifted document on the --shadow-e4 ladder + specular edge. Paper is intentionally
   theme-independent white-on-ink (it's the printed document); colors come from the centralized
   --color-paper-* canon tokens so a future paper theme can fork them. */
.ds-page{width:min(100%,720px);background:var(--color-paper-bg);color:var(--color-paper-ink);border-radius:10px;box-shadow:var(--shadow-e4),inset 0 1px 0 color-mix(in srgb,#fff 60%,transparent),0 0 0 .5px color-mix(in srgb,var(--color-paper-ink) 10%,transparent);padding:46px 52px;min-height:480px;display:flex;flex-direction:column;gap:2px}
[data-theme] .ds-page{background:var(--color-paper-bg)}
.ds-block{position:relative;border-radius:8px;padding:7px 9px;border:1.5px solid transparent;cursor:pointer;transition:border-color var(--motion-fast),background var(--motion-fast)}
.ds-block:hover{border-color:color-mix(in srgb,var(--app-accent) 35%,transparent);background:color-mix(in srgb,var(--app-accent) 4%,transparent)}
.ds-block.sel{border-color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 7%,transparent)}
.ds-block-tag{position:absolute;top:-9px;left:8px;font:700 9px/1 -apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--on-accent);background:var(--app-accent);padding:3px 6px;border-radius:5px;opacity:0;transition:opacity var(--motion-fast)}
.ds-block:hover .ds-block-tag,.ds-block.sel .ds-block-tag{opacity:1}
.ds-block-ctrls{position:absolute;top:-11px;right:7px;display:flex;gap:2px;opacity:0;transition:opacity var(--motion-fast)}
.ds-block:hover .ds-block-ctrls,.ds-block.sel .ds-block-ctrls{opacity:1}
.ds-block-ctrl{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:6px;background:var(--card-bg);color:var(--text-secondary);box-shadow:var(--shadow-e2),inset 0 0 0 .5px var(--chrome-border);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
.ds-block-ctrl:hover{background:color-mix(in srgb,var(--app-accent) 12%,var(--card-bg));color:var(--app-accent)}
.ds-block-ctrl.danger:hover{background:color-mix(in srgb,var(--color-error) 14%,var(--card-bg));color:var(--color-error)}
.ds-block-ctrl svg{width:12px;height:12px}
.ds-block-ctrl:disabled{opacity:.3;cursor:default}
/* undo/redo (2026-06-17 📘) — clearer enabled vs disabled. When there's something to undo/redo the
   button reads ACTIVE (accent ink + a faint accent wash); disabled stays clearly dimmed + flat. */
.ds-undo:not(:disabled){color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 8%,var(--card-bg))}
.ds-undo:not(:disabled):hover{background:color-mix(in srgb,var(--app-accent) 18%,var(--card-bg))}
.ds-undo:disabled{opacity:.32;box-shadow:inset 0 0 0 .5px var(--chrome-border)}
/* block content visuals (canvas WYSIWYG — distinct from the real PDF, just an authoring proxy) */
.ds-bc-text{font:400 14px/1.55 Georgia,'Times New Roman',serif;color:var(--color-paper-ink);min-height:1.2em;outline:none}
.ds-bc-text:empty::before{content:'Empty text — click to edit';color:color-mix(in srgb,var(--color-paper-ink) 32%,var(--color-paper-bg));font-style:italic}
.ds-bc-text h2{font-size:19px;font-weight:700;margin:2px 0}
.ds-bc-text h3{font-size:16px;font-weight:700;margin:2px 0}
/* Phase A — inline field chips + control-flow bands (render-only; content stays literal {{}}). */
/* Signal via fill + full hairline ring (NOT an edge-strip); rounded; theme-adaptive via vars. */
/* field/token chip — subtle gradient + specular for a 'live token' feel; accent-blue */
.ds-chip{display:inline;white-space:nowrap;font:600 .92em/1.3 -apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;color:var(--app-accent);background:linear-gradient(180deg,color-mix(in srgb,var(--app-accent) 15%,transparent),color-mix(in srgb,var(--app-accent) 9%,transparent));padding:1px 7px;border-radius:7px;cursor:default;-webkit-user-select:none;user-select:none;box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 40%,transparent),inset 0 0 0 .5px color-mix(in srgb,var(--app-accent) 30%,transparent)}
.ds-chip-row{color:var(--text-secondary);background:color-mix(in srgb,var(--text-primary) 7%,transparent);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--text-primary) 14%,transparent)}
.ds-flow{display:inline-flex;align-items:center;gap:4px;font:700 .78em/1 -apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;letter-spacing:.02em;text-transform:uppercase;padding:2px 8px;border-radius:8px;cursor:default;-webkit-user-select:none;user-select:none}
/* control-flow marker — PURPLE (--color-flow), deliberately distinct from accent-blue fields */
.ds-flow-open{color:var(--color-flow);background:var(--color-flow-bg);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--color-flow) 30%,transparent)}
.ds-flow-close{color:var(--text-muted);background:color-mix(in srgb,var(--text-primary) 6%,transparent);font-weight:600;text-transform:none;letter-spacing:0;font-size:.72em}
.ds-bc-field{display:inline-flex;align-items:center;gap:6px;font:600 13px/1.4 -apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;color:var(--app-accent);background:linear-gradient(180deg,color-mix(in srgb,var(--app-accent) 15%,transparent),color-mix(in srgb,var(--app-accent) 9%,transparent));padding:4px 10px;border-radius:8px;box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 40%,transparent),inset 0 0 0 .5px color-mix(in srgb,var(--app-accent) 28%,transparent)}
.ds-bc-field svg{width:12px;height:12px;opacity:.8}
.ds-bc-table{border:1px dashed color-mix(in srgb,var(--app-accent) 40%,transparent);border-radius:7px;padding:9px 11px;font:600 12.5px/1.4 -apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;color:color-mix(in srgb,var(--color-paper-ink) 66%,var(--color-paper-bg))}
.ds-bc-table-cols{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.ds-bc-table-col{font:600 10.5px/1 -apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 12%,transparent);padding:3px 7px;border-radius:5px}
.ds-bc-img{display:flex;align-items:center;justify-content:center;gap:8px;padding:22px;background:color-mix(in srgb,var(--color-paper-ink) 4%,var(--color-paper-bg));border-radius:8px;color:color-mix(in srgb,var(--color-paper-ink) 44%,var(--color-paper-bg));font:600 12.5px/1 -apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif}
.ds-bc-img img{max-width:100%;max-height:160px;border-radius:6px;display:block}
.ds-bc-sig{display:flex;align-items:flex-end;gap:10px;padding:12px 0 4px;color:color-mix(in srgb,var(--color-paper-ink) 44%,var(--color-paper-bg))}
.ds-bc-sig-line{flex:1;border-bottom:1.5px solid var(--color-paper-ink);height:26px}
.ds-bc-spacer{height:20px;display:flex;align-items:center;justify-content:center;color:color-mix(in srgb,var(--color-paper-ink) 24%,var(--color-paper-bg));font-size:10px;letter-spacing:.1em}
.ds-bc-cols{display:grid;gap:12px}
.ds-col{min-height:54px;border:1px dashed color-mix(in srgb,var(--app-accent) 30%,transparent);border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:6px}
.ds-col.ds-col-over{border-color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 7%,transparent)}
.ds-col-empty{flex:1;display:flex;align-items:center;justify-content:center;color:color-mix(in srgb,var(--color-paper-ink) 32%,var(--color-paper-bg));font:600 11px/1 -apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;letter-spacing:.04em;min-height:38px}
.ds-col-child{position:relative;border:1px solid transparent;border-radius:6px;padding:5px 6px;cursor:pointer}
.ds-col-child:hover{border-color:color-mix(in srgb,var(--app-accent) 30%,transparent)}
.ds-col-child.sel{border-color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 6%,transparent)}
.ds-col-child .ds-block-tag{font-size:8px;padding:2px 5px}
/* drag-reorder affordance (P5b-2) */
.ds-block.ds-dragging{opacity:.4}
.ds-drop-line{height:2px;background:var(--app-accent);border-radius:2px;margin:3px 0;box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 28%,transparent)}
.ds-block[draggable]{cursor:grab}
.ds-block-drag{position:absolute;top:-11px;left:8px;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:6px;background:var(--card-bg);color:var(--text-muted);box-shadow:var(--shadow-e2),inset 0 0 0 .5px var(--chrome-border);cursor:grab;opacity:0;transition:opacity var(--motion-fast)}
.ds-block:hover .ds-block-drag,.ds-block.sel .ds-block-drag{opacity:1}
.ds-block-drag svg{width:13px;height:13px}
/* rich-text toolbar (P5b-2) */
.ds-richbar{position:fixed;z-index:260;display:none;align-items:center;gap:2px;padding:5px 7px;border-radius:12px;background:var(--frost-bg-strong,var(--card-bg));box-shadow:var(--shadow-e4),inset 0 0 0 .5px var(--chrome-border,var(--border));backdrop-filter:saturate(1.5) blur(20px);-webkit-backdrop-filter:saturate(1.5) blur(20px)}
.ds-rt-btn{min-width:28px;height:28px;padding:0 7px;border:none;background:transparent;border-radius:7px;color:var(--text-secondary,var(--text-muted));cursor:pointer;font:600 13px/1 -apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;display:inline-flex;align-items:center;justify-content:center;transition:background var(--motion-fast),color var(--motion-fast)}
.ds-rt-btn:hover{background:color-mix(in srgb,var(--text-primary) 9%,transparent);color:var(--text-primary)}
.ds-rt-token{color:var(--app-accent);font-size:12px}
.ds-rt-sep{width:1px;height:18px;background:var(--chrome-border,var(--border));margin:0 3px}
.ds-rt-colors{display:inline-flex;gap:3px;padding:0 2px}
.ds-rt-color{width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);cursor:pointer;box-shadow:0 0 0 .5px rgba(0,0,0,.15)}
.ds-token-menu{position:fixed;z-index:261;width:228px;max-height:280px;display:flex;flex-direction:column;background:var(--frost-bg-strong,var(--card-bg));border-radius:12px;box-shadow:var(--shadow-e5),inset 0 0 0 .5px var(--chrome-border,var(--border));backdrop-filter:saturate(1.5) blur(20px);-webkit-backdrop-filter:saturate(1.5) blur(20px);overflow:hidden}
.ds-token-search{margin:8px;height:30px;padding:0 10px;border:.5px solid var(--chrome-border,var(--border));border-radius:8px;background:var(--surface-2,var(--surface));color:var(--text-primary);font:inherit;font-size:13px;outline:none}
.ds-token-list{flex:1;min-height:0;overflow-y:auto;padding:0 6px 8px}
.ds-token-item{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:8px 9px;border:none;background:transparent;border-radius:8px;text-align:left;cursor:pointer;font:600 13px/1.2 -apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;color:var(--text-primary);transition:background var(--motion-fast)}
.ds-token-item:hover{background:color-mix(in srgb,var(--app-accent) 11%,transparent)}
.ds-token-raw{font:500 10.5px/1 ui-monospace,monospace;color:var(--text-muted);flex:0 0 auto}
/* Crafted empty state — rounded dashed invitation that blooms on the desk; never a dead void */
.ds-canvas-empty{margin:50px auto;max-width:360px;text-align:center;color:var(--text-muted);padding:30px 24px;border:1.5px dashed color-mix(in srgb,var(--app-accent) 26%,var(--chrome-border));border-radius:16px;background:color-mix(in srgb,var(--app-accent) 4%,transparent);transition:background var(--motion-base),border-color var(--motion-base)}
.ds-canvas-empty svg{width:40px;height:40px;opacity:.55;margin-bottom:12px;color:var(--app-accent)}
/* inspector */
.ds-insp-empty{padding:30px 16px;text-align:center;color:var(--text-muted);font-size:12.5px;line-height:1.5}
.ds-insp-row{display:flex;flex-direction:column;gap:5px;margin-bottom:13px}
.ds-insp-row > label{font:600 11px/1 -apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;letter-spacing:.02em;text-transform:uppercase;color:var(--text-muted)}
.ds-insp-in,.ds-insp-ta,.ds-insp-sel{width:100%;font:inherit;font-size:13px;padding:8px 10px;border:.5px solid var(--chrome-border,var(--border));border-radius:9px;background:var(--surface-2,var(--surface));color:var(--text-primary);outline:none;box-sizing:border-box;transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
.ds-insp-in:focus,.ds-insp-ta:focus,.ds-insp-sel:focus{border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 16%,transparent)}
.ds-insp-ta{resize:vertical;min-height:90px;line-height:1.5}
/* Themed select — custom chevron so it never reads as a stock OS dropdown. A <select>'s own
   background-image can't read a CSS var or currentColor, so the chevron is drawn with the system
   neutral grey (#8e8e93 = the --qn-c-gray / iOS systemGray) which reads correctly against the
   select's --surface-2 fill on every theme (light AND dark). */
.ds-insp-sel{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%238e8e93' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px}
.ds-insp-hint{font-weight:400;font-size:10.5px;color:var(--text-muted);opacity:.85;text-transform:none;letter-spacing:0;margin-top:3px}
/* 🦜 — header element toggles (Document branding panel) */
.ds-insp-check{display:flex;align-items:center;gap:7px;font-weight:500;font-size:12.5px;color:var(--text-primary);text-transform:none;letter-spacing:0;margin-top:5px;cursor:pointer}
.ds-insp-check input{width:15px;height:15px;accent-color:var(--app-accent,var(--accent));cursor:pointer}
/* P5b-3a — Document panel (page setup + style theme) */
.ds-insp-doc-head{font:700 11px/1 -apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--text-primary);opacity:.78;margin:2px 0 11px;padding-bottom:7px;border-bottom:.5px solid var(--chrome-border,var(--border))}
/* Document-setup segmented controls — recessed groove track + lifted active pill (system-grade) */
.ds-seg-2,.ds-seg-3,.ds-seg-4{display:grid;gap:4px;padding:3px;border-radius:11px;background:color-mix(in srgb,var(--text-primary) 7%,var(--surface));box-shadow:inset 0 1px 2px color-mix(in srgb,var(--app-bg) 14%,transparent),inset 0 0 0 .5px var(--chrome-border)}
.ds-seg-2{grid-template-columns:1fr 1fr}.ds-seg-3{grid-template-columns:1fr 1fr 1fr}.ds-seg-4{grid-template-columns:1fr 1fr 1fr 1fr}
.ds-check-lbl{display:flex !important;flex-direction:row !important;align-items:center;gap:8px;font:500 12.5px/1.3 -apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif !important;text-transform:none !important;letter-spacing:0 !important;color:var(--text-primary) !important;cursor:pointer}
.ds-check-lbl input{margin:0;width:15px;height:15px;accent-color:var(--app-accent);cursor:pointer}
.ds-seg-btn{height:30px;border:none;background:transparent;border-radius:8px;font:600 12px/1 -apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;color:var(--text-muted);cursor:pointer;transition:color var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.ds-seg-btn:hover{color:var(--text-primary)}
.ds-seg-btn.on{background:var(--card-bg);color:var(--text-primary);box-shadow:var(--shadow-e2),inset 0 1px 0 var(--specular-hi)}
.ds-seg-btn:active{transform:scale(.96)}
.ds-margin-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ds-margin-cell{display:flex;flex-direction:column;gap:4px}
.ds-margin-cell > span{font:600 10px/1 -apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;letter-spacing:.02em;text-transform:uppercase;color:var(--text-muted)}
.ds-margin-cell .ds-insp-in{padding:7px 9px}
.ds-color-in{width:38px;height:30px;padding:0;border:.5px solid var(--chrome-border,var(--border));border-radius:8px;background:var(--surface-2,var(--surface));cursor:pointer}
/* preview pane (a tab on the inspector) — recessed groove track + lifted active pill (system-grade) */
.ds-insp-tabs{display:flex;gap:3px;padding:3px;margin:0 12px 8px;border-radius:11px;background:color-mix(in srgb,var(--text-primary) 7%,var(--surface));box-shadow:inset 0 1px 2px color-mix(in srgb,var(--app-bg) 14%,transparent),inset 0 0 0 .5px var(--chrome-border)}
.ds-insp-tab{flex:1;height:28px;border:none;background:transparent;border-radius:8px;font:600 12px/1 -apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;color:var(--text-muted);cursor:pointer;transition:color var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.ds-insp-tab:hover{color:var(--text-primary)}
.ds-insp-tab.on{background:var(--card-bg);color:var(--app-accent);box-shadow:var(--shadow-e2),inset 0 1px 0 var(--specular-hi)}
.ds-insp-tab:active{transform:scale(.97)}
.ds-preview-frame{width:100%;flex:1;min-height:0;border:none;border-radius:10px;background:var(--color-paper-bg);box-shadow:inset 0 0 0 .5px var(--chrome-border)}
.ds-btn{height:34px;padding:0 15px;border:none;border-radius:10px;font:600 13px/1 -apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background var(--motion-fast),filter var(--motion-fast)}
.ds-btn-ghost{background:color-mix(in srgb,var(--text-primary) 7%,transparent);color:var(--text-primary)}
.ds-btn-ghost:hover{background:color-mix(in srgb,var(--text-primary) 11%,transparent)}
.ds-btn-primary{background:var(--app-accent);color:var(--on-accent)}
.ds-btn-primary:hover{filter:brightness(1.06)}
.ds-btn:disabled{opacity:.45;cursor:default}
.ds-restore-banner{display:flex;align-items:center;gap:10px;padding:9px 14px;margin:0 14px;background:color-mix(in srgb,var(--app-accent) 10%,transparent);border:.5px solid color-mix(in srgb,var(--app-accent) 26%,transparent);border-radius:10px;font-size:12.5px;color:var(--text-primary)}
/* P2 🦊 — designer Version History panel (reuses the ddp glass modal frame). */
.dsh-modal{width:min(96vw,1060px);max-height:min(90vh,780px);height:min(90vh,780px)}
.dsh-count{font-size:11.5px;color:var(--text-muted);white-space:nowrap}
.dsh-mode{display:flex;gap:2px;margin-left:auto;background:var(--hover-overlay,rgba(0,0,0,.05));border-radius:999px;padding:2px}
.dsh-mode-btn{border:0;background:transparent;font:inherit;font-size:12px;font-weight:600;color:var(--text-secondary);padding:5px 12px;border-radius:999px;cursor:pointer}
.dsh-mode-btn.on{background:var(--card-bg,#fff);color:var(--text-primary);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.dsh-mode-btn:disabled{opacity:.4;cursor:default}
.dsh-rail{width:250px;flex-basis:250px}
.dsh-v{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;padding:9px 11px;border:0;background:transparent;border-radius:10px;cursor:pointer;color:var(--text-primary);font:inherit}
.dsh-v-n{font-size:12.5px;font-weight:700}
.dsh-v-meta{font-size:11px;color:var(--text-muted)}
.dsh-v.on{background:color-mix(in srgb,var(--app-accent) 13%,transparent)}
.dsh-v.on .dsh-v-n{color:var(--app-accent)}
.dsh-v:hover:not(.on){background:var(--hover-overlay,rgba(0,0,0,.04))}
.dsh-none{font-size:12px;color:var(--text-muted);line-height:1.5;padding:10px}
.dsh-pane{flex:1;min-width:0;display:flex;flex-direction:column}
.dsh-stage{flex:1;min-height:0;display:flex;position:relative;background:color-mix(in srgb,var(--app-bg) 60%,#e9e9ee)}
.dsh-ifr{flex:1;border:0;width:100%;height:100%}
.dsh-loading{position:absolute;inset:auto 0;top:46%;text-align:center;font-size:13px;color:var(--text-muted);pointer-events:none}
.dsh-foot{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:10px 14px;border-top:.5px solid var(--chrome-border);flex-shrink:0}
.dsh-foot-note{font-size:11.5px;color:var(--text-muted);line-height:1.4}
.dsh-diff-wrap{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
.dsh-diff-wrap[hidden]{display:none}
.dsh-diff{flex:1;overflow-y:auto;padding:22px 26px;font-size:13px;line-height:1.7;color:var(--text-primary);background:var(--card-bg,#fff);white-space:pre-wrap}
.dsh-diff-legend{display:flex;gap:10px;align-items:center;padding:8px 14px;border-bottom:.5px solid var(--chrome-border);font-size:11px;background:var(--card-bg,#fff)}
.dsh-diff-counts{margin-left:auto;font-weight:700;color:var(--text-muted);font-variant-numeric:tabular-nums}
.rt-diff-ins{background:color-mix(in srgb,#34c759 18%,transparent);text-decoration:none;border-radius:3px;padding:0 2px}
.rt-diff-del{background:color-mix(in srgb,#ff3b30 14%,transparent);text-decoration:line-through;border-radius:3px;padding:0 2px;color:var(--text-muted)}
@media(max-width:640px){.dsh-rail{width:150px;flex-basis:150px}.dsh-count{display:none}}
.ds-small-screen{display:none}
@media (max-width:1023px){.ds-body{display:none}.ds-small-screen{display:block;flex:1;min-height:0;overflow:auto;padding:20px 16px}}
.ds-fieldlist{max-width:640px;margin:0 auto}
.ds-fieldlist-head{margin-bottom:18px}
.ds-fieldlist-title{margin:0 0 6px;font-size:18px;font-weight:700;color:var(--text-primary)}
.ds-fieldlist-note{margin:0;font-size:13px;line-height:1.5;color:var(--text-muted)}
.ds-fieldlist-empty{padding:24px 16px;text-align:center;color:var(--text-muted);font-size:13.5px;line-height:1.5}
.ds-fieldlist-rows{display:flex;flex-direction:column;gap:12px;background:var(--card-bg);border:.5px solid var(--chrome-border);border-radius:16px;box-shadow:var(--shadow-e2),var(--lg-edge);padding:18px 16px}
.ds-fieldlist-row{display:flex;flex-direction:column;gap:5px}
.ds-fieldlist-label{font-size:12.5px;font-weight:600;color:var(--text-secondary,var(--text-muted));display:flex;align-items:center;gap:6px}
.ds-fieldlist-type{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);background:var(--hover-overlay,rgba(0,0,0,.04));padding:1px 6px;border-radius:6px}
.ds-fieldlist-in{width:100%;box-sizing:border-box;padding:10px 12px;font-size:15px;font-family:inherit;color:var(--text-primary);background:var(--surface);border:1px solid var(--chrome-border);border-radius:10px;transition:border-color var(--motion-fast,.15s) ease,box-shadow var(--motion-fast,.15s) ease}
.ds-fieldlist-in:focus-visible{outline:none;border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 16%,transparent)}
/* P3.9 — match the Activity-log panel depth (--shadow-e2); was --shadow-e1, reading
   flatter than the sibling panels Gavin compared it to. */
.admin-brand-group{background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-e2),var(--lg-edge);padding:18px 20px;margin-bottom:16px}
.admin-brand-group-h{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:15px;padding-bottom:12px;border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 6%,transparent);flex-wrap:wrap}
.admin-brand-group-h svg{width:14px;height:14px;color:var(--app-accent)}
.admin-brand-hint{font-weight:500;text-transform:none;letter-spacing:0;color:var(--text-muted)}
/* V-navmode3 — app-chrome white-label toggle row */
.org-chrome-toggle{display:flex;align-items:center;gap:16px;padding:14px 16px;border-radius:var(--radius-md);background:var(--surface-2);border:0.5px solid var(--chrome-border);cursor:pointer}
.org-chrome-toggle .oct-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.org-chrome-toggle .oct-title{font-size:13.5px;font-weight:650;color:var(--text-primary)}
.org-chrome-toggle .oct-sub{font-size:11.5px;font-weight:500;color:var(--text-muted);line-height:1.45}
.org-chrome-toggle .oct-switch{position:relative;flex:0 0 auto;width:42px;height:24px}
.org-chrome-toggle .oct-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.org-chrome-toggle .oct-slider{position:absolute;inset:0;border-radius:999px;background:color-mix(in srgb,var(--text-muted) 30%,transparent);transition:background var(--motion-fast)}
.org-chrome-toggle .oct-slider::before{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform var(--motion-fast) var(--ease-out)}
.org-chrome-toggle .oct-switch input:checked + .oct-slider{background:var(--app-accent)}
.org-chrome-toggle .oct-switch input:checked + .oct-slider::before{transform:translateX(18px)}
.admin-brand-fields{display:grid;grid-template-columns:1fr 1fr;gap:15px 18px}
.admin-brand-fields label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:var(--text-secondary)}
.admin-brand-fields input{width:100%}
/* P5 (a) — Automation group checkbox row */
.admin-brand-check{display:flex;align-items:flex-start;gap:10px;font-size:13px;font-weight:500;color:var(--text-primary);cursor:pointer;line-height:1.4}
.admin-brand-check input[type=checkbox]{margin-top:2px;flex-shrink:0;width:16px;height:16px;cursor:pointer;accent-color:var(--app-accent)}
/* BIC (2026-07-03) — court-chain stuck-threshold number field (admin Automation panel). */
.cc-thresh-field{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;margin-left:12px}
.cc-thresh-field input[type=number]{width:64px;height:34px;padding:0 10px;border:.5px solid var(--chrome-border);border-radius:var(--radius-md,10px);background:var(--card-bg);color:var(--text-primary);font-size:14px;font-weight:600;font-family:inherit;font-variant-numeric:tabular-nums;text-align:center;box-shadow:inset 0 1px 2px rgba(0,0,0,.04);transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
.cc-thresh-field input[type=number]:focus{outline:none;border-color:color-mix(in srgb,var(--app-accent) 50%,var(--chrome-border));box-shadow:inset 0 1px 2px rgba(0,0,0,.04),0 0 0 3px color-mix(in srgb,var(--app-accent) 12%,transparent)}
.cc-thresh-field .cc-thresh-unit{font-size:12px;font-weight:600;color:var(--text-muted)}
/* MCP/AI Phase 2 — API token panel */
.apitok-mint{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 10px}
.apitok-in{height:34px;padding:0 10px;border-radius:9px;border:.5px solid var(--chrome-border);background:var(--card-bg);color:var(--text-primary);font-size:13px;outline:none}
.apitok-in:focus{border-color:color-mix(in srgb,var(--app-accent) 50%,transparent)}
#apitokName{flex:1;min-width:180px}
/* B3 — Advanced token scoping (collapsed by default; matches the panel's matte/rounded language) */
.apitok-adv{margin:0 0 12px;border:.5px solid var(--chrome-border);border-radius:12px;background:var(--card-bg);overflow:hidden}
.apitok-adv>summary{list-style:none;cursor:pointer;padding:11px 14px;font-size:13px;font-weight:600;color:var(--text-primary);user-select:none}
.apitok-adv>summary::-webkit-details-marker{display:none}
.apitok-adv>summary::before{content:'›';display:inline-block;margin-right:8px;transition:transform .18s ease;color:var(--text-secondary)}
.apitok-adv[open]>summary::before{transform:rotate(90deg)}
.apitok-adv-body{display:grid;gap:12px;padding:4px 14px 14px}
.apitok-adv-field{display:flex;flex-direction:column;gap:5px}
/* v2 row 14 — the scoping pickers are toggleable chip grids (native multi-selects needed
   ctrl-click and read as flat lists). Pressed = accent-tinted fill; grid scrolls past ~5 rows. */
.apitok-chips{display:flex;flex-wrap:wrap;gap:6px;max-height:172px;overflow-y:auto;padding:9px;border:.5px solid var(--chrome-border);border-radius:12px;background:var(--surface-2)}
.apitok-chip{appearance:none;border:.5px solid var(--chrome-border);border-radius:999px;background:var(--card-bg);color:var(--text-primary);font-size:12px;font-weight:550;padding:4px 11px;cursor:pointer;transition:background .12s ease,border-color .12s ease,color .12s ease;line-height:1.35}
.apitok-chip:hover{border-color:var(--accent,#0066D6)}
.apitok-chip[aria-pressed="true"]{background:color-mix(in srgb, var(--accent,#0066D6) 14%, transparent);border-color:var(--accent,#0066D6);color:var(--accent,#0066D6);font-weight:650}
.apitok-chip .apitok-chip-w{font-weight:400;opacity:.62;font-size:11px;margin-left:4px}
.apitok-chip-filter{margin:0 0 6px;font-size:12.5px}
.apitok-chips-empty{font-size:12px;color:var(--text-muted);padding:2px 4px}
/* S3 C12 — AI-zones matrix (Admin › API Access). One row per business system, a segmented mode
   picker per row. Matches the .apitok-chip family (pill geometry, accent-tinted selected state) so
   the panel reads as one surface. Rounded throughout — the segmented control's ends and its selected
   pill are fully rounded, never hard-cornered (DESIGN.md rounded-hover rule), and the row hover is a
   contained rounded bg-tint with no lift (the row sits inside a bordered band). No colored edge
   strips anywhere — state is carried by the selected pill's tint, not a bar on the row edge. */
/* The matrix is capped and centred rather than stretched: at full admin width a 10-row list of
   short labels would strand its mode pickers ~1100px from their own label, so the row reads as two
   unrelated halves. Capping the band keeps label and control in one glance (layout-density rule). */
.aizone-matrix{display:flex;flex-direction:column;gap:2px;border:.5px solid var(--chrome-border);border-radius:14px;background:var(--surface-2);padding:6px;overflow:hidden;max-width:780px}
.aizone-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:9px 10px;border-radius:10px;transition:background .12s ease}
.aizone-row:hover{background:color-mix(in srgb, var(--accent,#0066D6) 5%, transparent)}
.aizone-name{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;font-size:13px;font-weight:600;color:var(--text-primary);min-width:0}
.aizone-cur{font-size:11.5px;font-weight:400;color:var(--text-muted)}
.aizone-def{font-size:10.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--text-muted);background:var(--card-bg);border:.5px solid var(--chrome-border);border-radius:999px;padding:1px 7px}
.aizone-modes{display:inline-flex;gap:3px;padding:3px;border:.5px solid var(--chrome-border);border-radius:999px;background:var(--card-bg);flex:0 0 auto}
.aizone-mode{appearance:none;border:0;border-radius:999px;background:transparent;color:var(--text-secondary,var(--text-muted));font-size:12px;font-weight:550;padding:4px 12px;cursor:pointer;line-height:1.35;transition:background .12s ease,color .12s ease}
.aizone-mode:hover{background:color-mix(in srgb, var(--accent,#0066D6) 10%, transparent);color:var(--text-primary)}
.aizone-mode:focus-visible{outline:2px solid var(--accent,#0066D6);outline-offset:1px}
.aizone-mode.on{background:color-mix(in srgb, var(--accent,#0066D6) 16%, transparent);color:var(--accent,#0066D6);font-weight:650}
.aizone-matrix.busy{opacity:.55;pointer-events:none}
.aizone-foot{padding:8px 10px 4px;line-height:1.45;max-width:780px}
@media (max-width:640px){
  .aizone-row{align-items:flex-start;flex-direction:column;gap:8px}
  .aizone-modes{width:100%;justify-content:space-between}
  .aizone-mode{flex:1 1 0;text-align:center;padding:5px 6px}
}
/* S3 C14 — token TTL policy. Same container language as .aizone-* above (it sits directly beneath
   it in the same governance group), with a numeric field instead of a segmented control. */
.tokpol-form{display:flex;flex-direction:column;gap:2px;border:.5px solid var(--chrome-border);border-radius:14px;background:var(--surface-2);padding:6px;overflow:hidden;max-width:780px}
.tokpol-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:9px 10px;border-radius:10px;transition:background .12s ease}
.tokpol-row:hover{background:color-mix(in srgb, var(--accent,#0066D6) 5%, transparent)}
.tokpol-name{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;font-size:13px;font-weight:600;color:var(--text-primary);min-width:0;flex:1 1 300px}
.tokpol-hint{flex:1 1 100%;font-size:11.5px;font-weight:400;line-height:1.45;color:var(--text-muted)}
.tokpol-def{font-size:10.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--text-muted);background:var(--card-bg);border:.5px solid var(--chrome-border);border-radius:999px;padding:1px 7px}
.tokpol-ctl{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto}
.tokpol-in{width:88px;appearance:none;border:.5px solid var(--chrome-border);border-radius:10px;background:var(--card-bg);color:var(--text-primary);font-size:13px;font-weight:550;font-variant-numeric:tabular-nums;padding:6px 10px;text-align:right;transition:border-color .12s ease,box-shadow .12s ease}
.tokpol-in:hover{border-color:color-mix(in srgb, var(--accent,#0066D6) 35%, var(--chrome-border))}
.tokpol-in:focus-visible{outline:2px solid var(--accent,#0066D6);outline-offset:1px;border-color:transparent}
.tokpol-unit{font-size:12px;color:var(--text-muted)}
.tokpol-form.busy{opacity:.55;pointer-events:none}
/* S3 C14 — the honest lifetime line under a freshly minted token. */
.apitok-reveal-ttl{margin:8px 0 2px;font-size:12.5px;line-height:1.45;color:var(--text-secondary,var(--text-muted))}
.apitok-reveal-ttl strong{color:var(--text-primary);font-variant-numeric:tabular-nums}
.tokpol-foot{padding:8px 10px 4px;line-height:1.45;max-width:780px}
@media (max-width:640px){
  .tokpol-row{align-items:flex-start;flex-direction:column;gap:8px}
  .tokpol-ctl{width:100%;justify-content:space-between}
  .tokpol-in{flex:1 1 0;text-align:left}
}
/* nested "Block specific tools" reveal (2026-06-17 📘) — quiet sub-section so the deny picker is
   clearly optional/opt-in (nothing is denied by default) instead of looking like active denials. */
.apitok-adv-nested{background:var(--surface-2);margin:2px 0 0}
.apitok-adv-nested>summary{font-size:12.5px;font-weight:600;padding:9px 12px}
/* B4 — per-client OAuth options row (max-scope cap + default-remember) */
.apitok-cli-opts{margin-top:-4px;flex-wrap:wrap;align-items:center;gap:14px}
.apitok-inline{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text-secondary)}
.apitok-inline.apitok-check{cursor:pointer}
.apitok-inline input[type=checkbox]{width:15px;height:15px;accent-color:var(--app-accent);cursor:pointer}
.apitok-reveal{margin:0 0 12px;padding:11px 13px;border-radius:12px;background:color-mix(in srgb,#10b981 12%,var(--card-bg));border:.5px solid color-mix(in srgb,#10b981 40%,transparent)}
.apitok-reveal-h{font-size:12.5px;font-weight:600;color:var(--text-primary);margin-bottom:7px}
.apitok-reveal-row{display:flex;align-items:center;gap:8px}
.apitok-reveal-row code{flex:1;font-family:ui-monospace,Menlo,monospace;font-size:12px;background:var(--surface-2);padding:7px 10px;border-radius:8px;word-break:break-all;color:var(--text-primary)}
/* §7 Stage 2 — "Connect to Claude" config block (Desktop/Code tabs + copyable snippet) */
.apitok-connect{margin:11px 0 0;padding:11px 12px 12px;border-radius:11px;background:var(--card-bg);border:.5px solid var(--chrome-border)}
.apitok-connect-h{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--text-primary);margin-bottom:9px}
.apitok-connect-ic{width:14px;height:14px;fill:none;stroke:var(--app-accent);stroke-width:2}
.apitok-ctabs{display:inline-flex;gap:4px;padding:3px;border-radius:9px;background:var(--surface-2);margin-bottom:9px}
.apitok-ctab{height:26px;padding:0 12px;border:0;border-radius:7px;background:transparent;color:var(--text-secondary);font-size:11.5px;font-weight:700;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
.apitok-ctab.on{background:var(--card-bg);color:var(--text-primary);box-shadow:var(--shadow-e1)}
.apitok-csnip{position:relative;display:flex;align-items:flex-start;gap:8px}
.apitok-csnip pre{flex:1;margin:0;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;line-height:1.5;background:var(--surface-2);padding:10px 12px;border-radius:8px;color:var(--text-primary);white-space:pre-wrap;word-break:break-all;max-height:180px;overflow:auto}
.apitok-ccopy{flex:0 0 auto}
.apitok-chint{font-size:11px;color:var(--text-muted);margin-top:7px;line-height:1.45}
.apitok-chint code{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;background:var(--surface-2);padding:1px 5px;border-radius:5px}
/* §7 Stage 2-B — OAuth clients sub-section inside the API-access group */
.oauthcli-sec{margin-top:18px;padding-top:16px;border-top:.5px solid var(--chrome-border)}
.oauthcli-h{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--text-primary);margin-bottom:4px}
.apitok-list{display:flex;flex-direction:column;gap:8px}
.apitok-empty{font-size:12.5px;color:var(--text-muted);font-style:italic}
/* B6 — float the token/OAuth/grant rows: --shadow-e2 depth + rounded hover lift (no edge-strip). */
.apitok-row{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:11px;background:var(--card-bg);border:.5px solid var(--chrome-border);box-shadow:var(--shadow-e2),var(--lg-edge);transition:box-shadow var(--motion-fast) var(--ease-spring),transform var(--motion-fast) var(--ease-spring)}
.apitok-row:hover,.apitok-row:focus-within{box-shadow:var(--shadow-e3);transform:translateY(-1px)}
.apitok-row.is-revoked{opacity:.55}
.apitok-row.is-revoked:hover{transform:none;box-shadow:var(--shadow-e2)}
/* B6 — leading kind glyph (scoped→lock · read-only→shield · read&write→link) */
.apitok-kind{flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--app-accent) 9%,transparent);color:var(--app-accent)}
.apitok-kind svg{width:15px;height:15px}
.apitok-meta{flex:1 1 auto;min-width:0}
/* C3 — per-token action cluster (rename · rotate · revoke). Rounded ghost icon-buttons; hover is a
   contained tint (no hard corners, no edge-strip). Revoke's danger tint only appears on hover. */
.apitok-actions{flex:0 0 auto;display:inline-flex;align-items:center;gap:3px}
.apitok-act{width:30px;height:30px;border-radius:9px;border:0;background:transparent;color:var(--text-muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--motion-fast) var(--ease-spring),color var(--motion-fast) var(--ease-spring)}
.apitok-act svg{width:15px;height:15px}
.apitok-act:hover{background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-primary)}
.apitok-act.danger:hover{background:color-mix(in srgb,var(--color-error) 13%,transparent);color:var(--color-error)}
.apitok-act:focus-visible{outline:2px solid var(--app-accent);outline-offset:1px}
/* C3 — bulk-revoke bar (clear all expired / never-used in one action). Calm ghost chips. */
.apitok-bulkbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.apitok-bulk{font-size:11.5px;font-weight:600;color:var(--text-secondary);background:color-mix(in srgb,var(--text-primary) 6%,transparent);border:.5px solid var(--chrome-border);border-radius:999px;padding:5px 12px;cursor:pointer;transition:background var(--motion-fast) var(--ease-spring),color var(--motion-fast) var(--ease-spring)}
.apitok-bulk:hover{background:color-mix(in srgb,var(--color-error) 12%,transparent);color:var(--color-error)}
.apitok-bulk:focus-visible{outline:2px solid var(--app-accent);outline-offset:1px}
/* C4 — OAuth-connector provenance badge (fill pill w/ a small glyph, never an edge-strip). */
.apitok-via{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 11%,transparent);padding:1px 8px;border-radius:999px;margin-left:6px;vertical-align:middle}
.apitok-via svg{width:10px;height:10px}
/* C4 — the per-token Activity drawer: a calm inset panel under the row (contained, no lift). */
.apitok-rowwrap{margin-bottom:8px}
.apitok-rowwrap .apitok-row{margin-bottom:0}
.apitok-act.on{background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent)}
.apitok-usage{margin-top:6px;padding:12px 14px;border-radius:10px;background:color-mix(in srgb,var(--text-primary) 4%,transparent);border:.5px solid var(--chrome-border)}
.apitok-usage-loading,.apitok-usage-empty{font-size:12px;color:var(--text-muted)}
.apitok-usage-head{font-size:12px;color:var(--text-secondary);margin-bottom:8px}
.apitok-usage-head b{color:var(--text-primary)}
.apitok-usage-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.apitok-usage-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--text-secondary);background:var(--card-bg);border:.5px solid var(--chrome-border);border-radius:999px;padding:2px 6px 2px 10px}
.apitok-usage-chip b{font-size:10px;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 12%,transparent);border-radius:999px;padding:1px 7px}
.apitok-usage-list{display:flex;flex-direction:column;gap:2px}
.apitok-usage-call{display:flex;align-items:center;gap:9px;font-size:11.5px;padding:4px 2px;border-radius:7px}
.apitok-usage-call:hover{background:color-mix(in srgb,var(--text-primary) 5%,transparent)}
.apitok-usage-ok,.apitok-usage-fail{flex:0 0 auto;width:7px;height:7px;border-radius:50%}
.apitok-usage-ok{background:var(--color-success)}
.apitok-usage-fail{background:var(--color-error)}
.apitok-usage-tool{flex:1 1 auto;min-width:0;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apitok-usage-when{flex:0 0 auto;color:var(--text-muted)}
.apitok-usage-ip{flex:0 0 auto;color:var(--text-muted);font-variant-numeric:tabular-nums;font-size:10.5px}
.apitok-usage-more{font-size:10.5px;color:var(--text-muted);margin-top:8px}
.apitok-name{font-size:13px;font-weight:600;color:var(--text-primary)}
.apitok-sub{display:block;font-size:11px;color:var(--text-muted);margin-top:2px}
/* B6 — scope pills (project/tool restrictions, now that listApiTokens returns them). Fill only. */
.apitok-scopes{display:inline-flex;gap:6px;flex-wrap:wrap;margin-left:6px;vertical-align:middle}
.apitok-scope-pill{font-size:10px;font-weight:600;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 11%,transparent);padding:1px 8px;border-radius:999px}
.apitok-scope-pill.deny{color:#c0392b;background:color-mix(in srgb,#d0463b 12%,transparent)}
/* B6 — the API-access hero orb (signature chrome; pointer-events pass through to the summary) */
.admin-api-orb{width:26px;height:26px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;pointer-events:none}
.admin-api-orb svg{width:15px;height:15px}
/* 🗒️ pt.8 (admin punch item 4) — ONE summary material across the whole config zone +
   rail: every panel head icon is the same 26px accent orb (was a mix of bare svgs and
   two one-off orbs), and every hint uses one class instead of repeated inline styles. */
.admin-sum-orb{width:26px;height:26px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;pointer-events:none;flex:none}
.admin-sum-orb svg{width:15px;height:15px}
.admin-sum-hint{color:var(--text-muted);font-size:11.5px;font-weight:500}
/* 📰 V174 — admin panel nav rail (sticky chip TOC over the config zone) */
.admin-panel-nav{position:sticky;top:8px;z-index:12;display:flex;gap:7px;flex-wrap:wrap;padding:10px 12px;margin:18px 0 10px;background:var(--lg-bg,var(--card-bg));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-e1,0 2px 8px rgba(0,0,0,.06))}
.admin-nav-chip{font-size:12px;font-weight:650;color:var(--text-secondary);background:var(--chrome-bg);border:0.5px solid var(--chrome-border);border-radius:999px;padding:6px 13px;cursor:pointer;transition:color .15s ease,border-color .15s ease,transform .15s ease;white-space:nowrap}
.admin-nav-chip:hover{color:var(--text-primary);border-color:var(--app-accent);transform:translateY(-1px)}
/* 📰 V168 — Portal access panel. Grant rows + the §6.4 scope-matrix editor. */
.admin-portal-orb{width:26px;height:26px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;pointer-events:none}
.admin-portal-orb svg{width:15px;height:15px}
.pgr-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 14px;border:0.5px solid var(--border);border-radius:var(--radius-lg);margin-top:8px;background:var(--card-bg)}
.pgr-row.is-paused{opacity:.72}
.pgr-row.is-revoked{opacity:.5}
.pgr-id{display:flex;align-items:center;gap:10px;min-width:210px;flex:1 1 210px}
.pgr-name{font-weight:650;font-size:13px}
.pgr-email{font-size:11.5px;color:var(--text-secondary)}
.pgr-proj{font-size:12px;color:var(--text-secondary);min-width:130px;flex:0 1 auto}
.pgr-role{font-size:11px;font-weight:700;letter-spacing:.02em;padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent);text-transform:capitalize;white-space:nowrap}
.pgr-status{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:999px}
.pgr-status.st-active{background:color-mix(in srgb,var(--color-success) 14%,transparent);color:var(--color-success)}
.pgr-status.st-paused{background:color-mix(in srgb,var(--color-warning) 16%,transparent);color:var(--color-warning)}
.pgr-status.st-revoked{background:color-mix(in srgb,var(--color-danger) 12%,transparent);color:var(--color-danger)}
.pgr-scopes{display:flex;flex-wrap:wrap;gap:4px;flex:2 1 240px}
.pgr-scope{font-size:10.5px;padding:2px 8px;border-radius:999px;border:0.5px solid var(--border);color:var(--text-secondary);white-space:nowrap}
.pgr-acts{display:flex;gap:6px;margin-left:auto}
.pgm-matrix{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:6px;margin-top:8px}
.pgm-chip{display:flex;align-items:center;gap:8px;padding:8px 11px;border:0.5px solid var(--border);border-radius:11px;cursor:pointer;font-size:12.5px;color:var(--text-secondary);user-select:none;background:var(--card-bg);transition:border-color .12s ease,color .12s ease,background .12s ease}
.pgm-chip input{margin:0;accent-color:var(--app-accent)}
.pgm-chip.is-on{border-color:color-mix(in srgb,var(--app-accent) 44%,transparent);color:var(--text-primary);background:color-mix(in srgb,var(--app-accent) 7%,transparent)}
.pgr-editor{flex-basis:100%;border-top:0.5px solid var(--border);margin-top:6px;padding-top:10px}
.pgr-editor-actions{display:flex;gap:8px;margin-top:10px;align-items:center}
/* 📰 V172 — the project-workspace Portal tab (floating panels on the matte per V133) */
.wp-portal{display:flex;flex-direction:column;gap:14px;padding:16px 18px 40px;max-width:1240px}
.wp-portal .rt-panel{padding:20px 22px}
.wp-portal-hero{background:linear-gradient(135deg,color-mix(in srgb,var(--app-accent) 7%,var(--card-bg)),var(--card-bg))}
.wp-portal-sec .admin-brand-group-h{margin-top:0}
/* Phase-portal (2026-07-09 🫏) — rail+main cockpit. The .ct-ws2 grid + .cd-rail idiom (Contacts/Team),
   so a project's many portals each get a private thread instead of one merged column. */
.wp-cockpit{height:max(480px,calc(100vh - 300px));min-height:0}
.wp-cockpit .wp-ws{height:100%;grid-template-columns:minmax(0,1fr) minmax(0,300px)}
@media (max-width:1100px){.wp-cockpit .wp-ws{grid-template-columns:minmax(0,1fr)}}
.wp-main-scroll{display:flex;flex-direction:column;gap:14px}
.wp-main-scroll .rt-panel{padding:18px 20px}
.wp-rail-item{display:flex;align-items:center;gap:9px}
.wp-rail-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.wp-rail-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.wp-rail-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wp-rail-sub{font-size:11px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wp-rail-badge{flex:0 0 auto;background:var(--app-accent);color:#fff;font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.wp-thread{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow-y:auto;padding:4px 2px}
/* 🫖 SPEC P2 §5.C — portal GROUP cockpit. Extends the wp-* family; floating panels + glass
   chrome per DESIGN.md (glass = overlay chrome; content rows stay solid). */
.wpg-new-btn{display:flex;align-items:center;justify-content:center;gap:7px;width:calc(100% - 16px);margin:10px 8px 6px;padding:9px 12px;border-radius:var(--radius-pill,999px);border:1.5px dashed color-mix(in srgb,var(--app-accent) 45%,transparent);background:color-mix(in srgb,var(--app-accent) 7%,transparent);color:var(--app-accent);font-size:12.5px;font-weight:700;cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast) var(--ease-out),background var(--motion-fast) var(--ease-out)}
.wpg-new-btn:hover{background:color-mix(in srgb,var(--app-accent) 13%,transparent);transform:translateY(-1px);box-shadow:var(--shadow-e2)}
.wpg-new-btn:active{transform:scale(.97)}
.wpg-new-btn svg{width:13px;height:13px}
.wpg-title{font-size:18px;font-weight:800;letter-spacing:-.015em;display:inline-flex;align-items:center;gap:7px;cursor:pointer;border-radius:9px;padding:2px 6px;margin-left:-6px;transition:background var(--motion-fast) var(--ease-out)}
.wpg-title:hover{background:color-mix(in srgb,var(--text-primary) 6%,transparent)}
.wpg-title-pen{width:12px;height:12px;opacity:0;transition:opacity var(--motion-fast) var(--ease-out);color:var(--text-muted)}
.wpg-title:hover .wpg-title-pen{opacity:.8}
.wpg-orbs{display:inline-flex}
.wpg-orb{width:22px;height:22px;border-radius:50%;background:linear-gradient(140deg,color-mix(in srgb,var(--app-accent) 85%,#fff),color-mix(in srgb,var(--app-accent) 60%,#003));color:#fff;font-size:10.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 3px rgba(0,0,0,.25);flex:0 0 auto}
.wpg-orbs .wpg-orb{margin-right:-6px;border:1.5px solid var(--card-bg)}
.wpg-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:650;padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 6%,transparent);color:var(--text-secondary)}
.wpg-chip-btn{cursor:pointer;border:1px dashed color-mix(in srgb,var(--app-accent) 40%,transparent);color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 6%,transparent);transition:background var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-spring)}
.wpg-chip-btn:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent);transform:translateY(-1px)}
.wpg-chip-danger{background:color-mix(in srgb,var(--color-error) 12%,transparent);color:var(--color-error)}
.wpg-danger{color:var(--color-error)}
.wpg-proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px}
.wpg-proj-row{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:11px;background:color-mix(in srgb,var(--text-primary) 3.5%,transparent);cursor:pointer;transition:background var(--motion-fast) var(--ease-out)}
.wpg-proj-row:hover{background:color-mix(in srgb,var(--app-accent) 8%,transparent)}
.wpg-proj-row input{accent-color:var(--app-accent)}
.wpg-proj-name{font-size:12.5px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wpg-mem-row{display:flex;align-items:center;gap:11px;padding:10px 4px;border-top:0.5px solid var(--border)}
.wpg-mem-row:first-of-type{border-top:0}
.wpg-mem-row .wpg-orb{width:30px;height:30px;font-size:13px}
.wpg-mem-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.wpg-mem-name{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:7px}
.wpg-mem-sub{font-size:11.5px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wpg-cfg-grid{display:flex;flex-direction:column}
.wpg-cfg-row{display:flex;align-items:center;gap:12px;padding:9px 2px;border-top:0.5px solid var(--border);flex-wrap:wrap}
.wpg-cfg-row:first-child{border-top:0}
.wpg-cfg-id{flex:1;min-width:180px;display:flex;flex-direction:column;gap:1px}
.wpg-cfg-name{font-size:13px;font-weight:700}
.wpg-cfg-desc{font-size:11px;color:var(--text-muted)}
.wpg-seg{display:inline-flex;background:color-mix(in srgb,var(--text-primary) 5%,transparent);border-radius:999px;padding:2.5px;gap:2px;box-shadow:inset 0 1px 2px rgba(0,0,0,.08)}
.wpg-seg-btn{border:0;background:transparent;color:var(--text-secondary);font-size:11.5px;font-weight:700;padding:4.5px 13px;border-radius:999px;cursor:pointer;transition:background var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-spring)}
.wpg-seg-btn:active{transform:scale(.95)}
.wpg-seg-btn.is-on{background:var(--card-bg);color:var(--text-primary);box-shadow:var(--shadow-e1),inset 0 1px 0 rgba(255,255,255,.25)}
.wpg-drop{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:14px;border:1.5px dashed color-mix(in srgb,var(--app-accent) 35%,transparent);background:color-mix(in srgb,var(--app-accent) 4%,transparent);color:var(--text-secondary);font-size:12.5px;margin-bottom:10px;transition:background var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out)}
.wpg-drop.is-over{background:color-mix(in srgb,var(--app-accent) 12%,transparent);border-color:var(--app-accent)}
.wpg-drop.is-busy{opacity:.65;pointer-events:none}
.wpg-drop.is-busy svg{animation:wpgPulse 1.1s ease-in-out infinite}
@keyframes wpgPulse{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(-3px);opacity:.55}}
@media (prefers-reduced-motion:reduce){.wpg-drop.is-busy svg{animation:none}}
.wpg-drop svg{width:16px;height:16px;color:var(--app-accent);flex:0 0 auto}
.wpg-browse{color:var(--app-accent);font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.wpg-overlay{position:fixed;inset:0;z-index:1200;background:color-mix(in srgb,#000 38%,transparent);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity var(--motion-base) var(--ease-out)}
.wpg-overlay.is-open{opacity:1}
.wpg-sheet{width:min(560px,94vw);max-height:min(78vh,720px);display:flex;flex-direction:column;padding:18px 20px;box-shadow:var(--shadow-e4);transform:translateY(8px) scale(.98);transition:transform var(--motion-base) var(--ease-spring)}
.wpg-overlay.is-open .wpg-sheet{transform:none}
.wpg-sheet-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
.wpg-sheet-title{font-size:16px;font-weight:800;letter-spacing:-.01em}
.wpg-sheet-sub{font-size:12px;color:var(--text-secondary);margin-top:2px}
.wpg-sheet-body{display:flex;flex-direction:column;min-height:0;flex:1}
.wpg-ov-scroll{overflow-y:auto;min-height:0;flex:1;padding-right:2px}
.wpg-ov-foot{display:flex;justify-content:flex-end;gap:9px;padding-top:12px;margin-top:10px;border-top:0.5px solid var(--border)}
.wpg-sheet-grp{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);padding:10px 2px 4px}
.wpg-sheet-row{margin-bottom:4px}
.wpg-conf-danger{background:var(--color-error)!important;border-color:var(--color-error)!important}
@media (prefers-reduced-motion:reduce){.wpg-overlay,.wpg-sheet,.wpg-seg-btn,.wpg-new-btn{transition:none}}

/* B7 — connector tiles (QuickBooks / bank / payroll). Dormant-by-design reads as a CALM elevated
   tile with a "Coming soon" fill-pill + "Set up on server" affordance — never a dead disabled btn. */
.conn-tile{display:flex;align-items:flex-start;gap:11px;padding:12px 14px;border-radius:var(--radius-lg);margin-bottom:8px}
.conn-tile.is-dormant{cursor:default}
.conn-ico{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--app-accent) 10%,transparent);color:var(--app-accent)}
.conn-ico.is-dormant{background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-muted)}
.conn-ico svg{width:17px;height:17px}
.conn-body{flex:1 1 auto;min-width:0}
.conn-title{font-size:13.5px;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.conn-pill{font-size:10px;font-weight:700;letter-spacing:.2px;text-transform:uppercase;padding:2px 8px;border-radius:999px}
.conn-pill-ok{background:color-mix(in srgb,var(--color-success) 18%,transparent);color:var(--color-success)}
.conn-pill-err{background:color-mix(in srgb,var(--color-error) 16%,transparent);color:var(--color-error)}
.conn-pill-soon{background:color-mix(in srgb,var(--app-accent) 11%,transparent);color:var(--app-accent)}
.conn-pill-muted{background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-secondary)}
.conn-meta{font-size:11.5px;color:var(--text-muted);margin-top:4px;display:flex;align-items:center;gap:5px}
.conn-meta.conn-err{color:var(--color-error)}
.conn-meta svg{width:12px;height:12px;flex:0 0 auto}
.conn-hint{font-size:11.5px;color:var(--text-muted);margin-top:5px;display:flex;align-items:center;gap:6px;line-height:1.4}
.conn-hint svg{width:12px;height:12px;flex:0 0 auto;opacity:.7;margin-top:1px}
.conn-actions{flex:0 0 auto;display:flex;align-items:center;gap:6px;margin-top:2px}
.conn-btn{padding:5px 13px;font-size:12.5px;border-radius:var(--radius-pill,999px)}
.conn-soon-pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 8%,transparent);padding:5px 12px;border-radius:var(--radius-pill,999px);white-space:nowrap}
.conn-soon-pill svg{width:12px;height:12px}
.apitok-badge{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:2px 7px;border-radius:999px;margin-left:6px}
.apitok-badge.active{background:color-mix(in srgb,#10b981 18%,transparent);color:#0a8a5a}
.apitok-badge.revoked,.apitok-badge.expired{background:color-mix(in srgb,#d0463b 16%,transparent);color:#c0392b}
.apitok-badge.expiring{background:color-mix(in srgb,#d08700 18%,transparent);color:#a86800}
.apitok-badge.connected{background:color-mix(in srgb,#0066D6 16%,transparent);color:#0a5bc0}
/* G2 — one-click "Connect to ChatGPT" card + live connection-health indicator. Reuses the Atira
   blue accent (#0066D6) + the existing surface/text tokens; rounded, no colored edge-strips. */
.connect-hero{margin:10px 0 6px;padding:15px 16px;border-radius:14px;background:color-mix(in srgb,#0066D6 6%,transparent);border:0.5px solid color-mix(in srgb,#0066D6 22%,transparent)}
.connect-hero-h{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:var(--text-primary)}
.connect-health{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:11.5px;font-weight:700;color:var(--text-secondary);text-transform:none;letter-spacing:0}
.connect-health-dot{width:8px;height:8px;border-radius:999px;display:inline-block}
.connect-health-dot.on{background:#10b981;box-shadow:0 0 0 3px color-mix(in srgb,#10b981 22%,transparent)}
.connect-health-dot.off{background:color-mix(in srgb,var(--text-muted) 60%,transparent)}
.connect-url-row{margin:4px 0 8px}
.connect-url-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.connect-url-line code{flex:1;min-width:180px;font-size:12.5px;background:color-mix(in srgb,var(--text-primary) 6%,transparent);padding:7px 11px;border-radius:9px;word-break:break-all;color:var(--text-primary)}
.connect-copy{white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.connect-steps{margin:8px 0 0;padding-left:20px;font-size:12.5px;line-height:1.7;color:var(--text-secondary)}
.connect-steps strong{color:var(--text-primary)}
/* 2026-07-02 📘 — API-token summary header: at-a-glance active/expired/revoked counts + nudges. */
.apitok-summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;margin-bottom:10px;border-radius:10px;background:color-mix(in srgb,var(--text-primary) 4%,transparent)}
.apitok-sum-counts{font-size:12.5px;color:var(--text-secondary)}
.apitok-sum-counts b{color:var(--text-primary);font-weight:800}
.apitok-sum-notes{display:flex;gap:8px;flex-wrap:wrap}
.apitok-note{font-size:11px;color:var(--text-muted);background:color-mix(in srgb,var(--text-primary) 6%,transparent);padding:2px 9px;border-radius:999px}
.apitok-note.warn{color:#a86800;background:color-mix(in srgb,#d08700 14%,transparent)}

/* ── S3 C13 slice D (2026-07-26) — My AI & Connections (profile modal) + the admin approval queue ──
   Reuses the .apitok-* vocabulary already established on the admin token panel (rows, badges, scope
   pills, usage drawer) rather than forking a parallel one — same facts must read identically on both
   surfaces. Only the layout wrappers unique to these two surfaces are new. All values ride the V82
   tokens; the only literals are the semantic status hues already used by .apitok-badge above. */
.myai-seg{margin-bottom:12px}
.myai-panel{min-height:40px}
.myai-list-head{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);margin:16px 0 8px}
/* The request CTA — a floating panel, not a flat zone (V133). */
.myai-cta{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:14px 16px;border-radius:var(--radius-lg,14px);background:var(--card-bg);
  border:.5px solid var(--chrome-border);box-shadow:var(--shadow-e2),var(--lg-edge)}
.myai-cta-title{font-size:14px;font-weight:700;color:var(--text-primary)}
.myai-cta-sub{font-size:12.5px;color:var(--text-secondary);margin-top:2px;line-height:1.45}
/* The empty state follows the CTA panel directly; without this it butts against the panel's bottom
   edge and reads as part of it rather than as its own quiet line. */
.myai-cta + .apitok-empty,.myai-form + .apitok-empty{display:block;margin-top:12px}
.myai-form{margin-top:12px;padding:14px 16px;border-radius:var(--radius-lg,14px);background:var(--card-bg);
  border:.5px solid var(--chrome-border);box-shadow:var(--shadow-e2),var(--lg-edge)}
/* An open request — the most action-bearing item on the surface, so it carries real elevation. */
.myai-req{padding:13px 15px;border-radius:var(--radius-lg,14px);background:var(--card-bg);
  border:.5px solid var(--chrome-border);box-shadow:var(--shadow-e2),var(--lg-edge);margin-bottom:10px;
  transition:box-shadow var(--motion-fast) var(--ease-spring),transform var(--motion-fast) var(--ease-spring)}
.myai-req.is-approved{box-shadow:var(--shadow-e3),var(--lg-edge)}
.myai-req.is-closed{opacity:.62;box-shadow:var(--shadow-e1)}
.myai-req-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.myai-req-name{font-size:13.5px;font-weight:650;color:var(--text-primary);min-width:0;overflow-wrap:anywhere}
.myai-req-when{font-size:11.5px;color:var(--text-muted);margin-left:auto}
.myai-req-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:11px}
.myai-req-note{font-size:12px;color:var(--text-secondary);line-height:1.45}
.myai-req-reason{font-size:12px;color:var(--text-muted);margin-top:7px;line-height:1.45;overflow-wrap:anywhere}
.myai-req-acts{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.myai-scopes{margin-top:9px;display:flex;gap:6px;flex-wrap:wrap}
.apitok-scope-pill.rw{color:#a86800;background:color-mix(in srgb,#d08700 15%,transparent)}
/* Token rows reuse .apitok-row; only the internal grid differs (icon · body · actions). */
.myai-tok{margin-bottom:8px}
.myai-tok-ico{width:16px;height:16px;flex:0 0 auto;color:var(--text-muted)}
.myai-tok-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.myai-tok-name{font-size:13px;font-weight:650;color:var(--text-primary);display:flex;align-items:center;gap:6px;flex-wrap:wrap;overflow-wrap:anywhere}
.myai-tok-meta{font-size:11.5px;color:var(--text-muted)}
.myai-tok-acts{display:flex;gap:6px;flex:0 0 auto}
.myai-danger{color:var(--color-error)}
.myai-usage{margin:-4px 0 10px}
/* The one-time reveal — the only moment the plaintext exists client-side, so it commands. */
.myai-reveal{margin:12px 0}
.myai-connect{margin-top:11px}
.myai-connect-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);margin-bottom:6px}
.myai-connect-h span{font-weight:500;text-transform:none;letter-spacing:0;color:var(--text-muted);opacity:.8}
.myai-connect-pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;line-height:1.5;
  white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 7px;padding:11px 13px;border-radius:11px;
  background:color-mix(in srgb,var(--text-primary) 5%,transparent);color:var(--text-primary);max-height:200px;overflow:auto}
.myai-usage-sum{display:flex;align-items:baseline;gap:9px;margin-bottom:11px}
.myai-usage-total{font-size:var(--text-display,32px);font-weight:800;color:var(--text-primary);font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}
.myai-usage-total-lbl{font-size:12.5px;color:var(--text-secondary)}
.myai-usage-tok{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border-radius:10px;
  background:color-mix(in srgb,var(--text-primary) 4%,transparent);margin-bottom:6px}
.myai-usage-tok-name{font-size:12.5px;color:var(--text-primary);min-width:0;overflow-wrap:anywhere}
.myai-usage-tok-n{font-size:12.5px;font-weight:800;color:var(--text-primary);font-variant-numeric:tabular-nums}
/* 🪺 B1.3 — the assistant meter atop the Usage tab: own period tokens vs effective limit, with
   the ask CTA when the server verdict says capped. Warning-toned at ≥90%, never an edge-strip. */
.myai-quota{padding:12px 14px;border-radius:var(--radius-lg,14px);margin-bottom:12px;
  background:color-mix(in srgb,var(--text-primary) 4%,transparent)}
.myai-quota.is-warn{background:color-mix(in srgb,var(--color-warning) 8%,transparent)}
.myai-quota.is-capped{background:color-mix(in srgb,var(--color-warning) 11%,transparent)}
.myai-quota-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:5px}
.myai-quota-title{font-size:12px;font-weight:700;color:var(--text-primary)}
.myai-quota-reset{font-size:11px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.myai-quota-nums{font-size:12.5px;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.myai-quota-nums b{color:var(--text-primary);font-weight:800}
.myai-quota-capped{color:color-mix(in srgb,var(--color-warning) 75%,var(--text-primary));font-weight:650}
.myai-quota-bar{height:6px;border-radius:999px;margin-top:8px;overflow:hidden;
  background:color-mix(in srgb,var(--text-primary) 8%,transparent)}
.myai-quota-bar span{display:block;height:100%;border-radius:999px;background:var(--app-accent);transition:width var(--motion-base) var(--ease-out)}
.myai-quota.is-warn .myai-quota-bar span,.myai-quota.is-capped .myai-quota-bar span{background:color-mix(in srgb,var(--color-warning) 80%,var(--text-primary))}
.myai-quota-ask{font-size:12px;font-weight:600;margin-top:9px;padding:5px 14px;border-radius:999px;border:none;cursor:pointer;
  background:var(--app-accent);color:var(--on-accent,#fff);font-family:inherit;transition:filter var(--motion-fast),transform var(--motion-fast)}
.myai-quota-ask:hover{filter:brightness(1.06)}
.myai-quota-ask:active{transform:scale(.97)}
.myai-quota-ask:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 30%,transparent)}
.myai-quota-sent{display:inline-block;margin-top:9px;font-size:12px;font-weight:600;color:#0a8a5a}

/* ── The admin approval queue (Admin › API Access) ── */
.apitokreq-wrap{margin-bottom:20px}
.apitokreq-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px}
.apitokreq-title{font-size:13px;font-weight:700;color:var(--text-primary)}
.apitokreq-count{font-size:10px;font-weight:800;padding:2px 8px;border-radius:999px;
  background:color-mix(in srgb,#d08700 18%,transparent);color:#a86800}
.apitokreq{padding:14px 16px;border-radius:var(--radius-lg,14px);background:var(--card-bg);
  border:.5px solid var(--chrome-border);box-shadow:var(--shadow-e2),var(--lg-edge);margin-bottom:10px;
  transition:box-shadow var(--motion-fast) var(--ease-spring),transform var(--motion-fast) var(--ease-spring)}
.apitokreq:hover{box-shadow:var(--shadow-e3),var(--lg-edge);transform:translateY(-1px)}
/* A read&write request is a materially bigger grant — it reads hotter, WITHOUT an edge strip. */
.apitokreq.is-rw{background:linear-gradient(180deg,color-mix(in srgb,#d08700 7%,var(--card-bg)) 0%,var(--card-bg) 62%)}
.apitokreq-who{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
/* WHO is asking is the primary fact on this row — an approver reads the person first and the scope
   second, so the name commands and the badge (which sits beside it) recedes to a marker. */
.apitokreq-name{font-size:15.5px;font-weight:750;letter-spacing:-.01em;color:var(--text-primary);min-width:0;overflow-wrap:anywhere}
.apitokreq-who .apitok-badge{align-self:center;margin-left:0}
.apitokreq-email{font-size:11.5px;color:var(--text-muted)}
.apitokreq-what{font-size:12.5px;color:var(--text-secondary);margin-top:6px;overflow-wrap:anywhere}
.apitokreq-what b{color:var(--text-primary);font-weight:650}
.apitokreq-reason{font-size:12px;color:var(--text-muted);margin-top:7px;line-height:1.45;overflow-wrap:anywhere}
.apitokreq-tools{font-size:11.5px;color:var(--text-muted);margin-top:6px;line-height:1.5;overflow-wrap:anywhere}
.apitokreq-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px}
.apitokreq-when{font-size:11.5px;color:var(--text-muted)}
.apitokreq-acts{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.apitokreq-self{font-size:11.5px;color:var(--text-muted);font-style:italic}
.admin-brand-save{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:16px;padding-top:16px;border-top:0.5px solid color-mix(in srgb,var(--text-primary) 6%,transparent)}
.admin-brand-save .btn-primary{font-size:13px;padding:9px 22px}
.admin-brand-savemsg{font-size:12px;color:var(--text-muted)}
/* Brand identity = a full-width LIVE document-header banner (a real letterhead-row
   mockup) on top, then the editable fields filling the panel beneath it. */
.admin-brand-preview{margin-bottom:18px}
.admin-brand-preview-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:8px}
/* 2026-07-02 📘 — dropped the border-bottom:3px accent edge-strip (DESIGN.md HARD: no colored edge
   strips on a card). The brand accent now signals via the name color + a thin inset rule below. */
.admin-brand-paper{background:#fff;border:0.5px solid var(--chrome-border);border-radius:10px;box-shadow:var(--shadow-e2);padding:22px 28px 20px;display:flex;align-items:center;gap:18px;--brand-accent:var(--app-accent)}
.admin-brand-paper-logo{width:60px;height:60px;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.admin-brand-paper-logo img{max-width:100%;max-height:100%;object-fit:contain}
.admin-brand-paper-logoph{font-size:9px;font-weight:700;letter-spacing:.5px;color:#c7c7cc;border:1px dashed #d2d2d7;border-radius:6px;padding:16px 10px}
.admin-brand-paper-id{flex:1;min-width:0}
.admin-brand-paper-name{font-size:20px;font-weight:800;letter-spacing:-.4px;color:var(--brand-accent,#1c1c1e);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-brand-paper-sub{font-size:11px;font-weight:600;color:#636366;text-transform:uppercase;letter-spacing:.6px;margin-top:2px}
.admin-brand-paper-meta{font-size:11px;color:#8e8e93;text-align:right;line-height:1.6;flex-shrink:0}
/* World-class doc editor P0 (2026-06-17 📘) — full rendered sample-document preview in the branding panel. */
.admin-brand-docprev{margin-top:14px}
.admin-brand-docprev>summary{list-style:none;margin-bottom:8px}
.admin-brand-docprev>summary::-webkit-details-marker{display:none}
.admin-brand-docprev-stage{position:relative;background:#e9e9ee;border:0.5px solid var(--chrome-border);border-radius:10px;box-shadow:var(--shadow-e2) inset;overflow:hidden;height:560px;padding:0}
.admin-brand-docprev-frame{width:100%;height:100%;border:0;background:#e9e9ee;display:block}
.admin-brand-docprev-frame{width:100%;height:100%;border:0;background:#fff;display:block}
.admin-brand-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
/* Each label = a fixed-height title row (so the hint's second line doesn't push the
   input down) + the input. Inputs align across the row regardless of hints. */
.admin-brand-fields label{display:grid;grid-template-rows:32px auto;gap:0}
.admin-brand-fields .admin-brand-ftitle{display:block;line-height:1.3;overflow:hidden}
.admin-brand-fields .admin-brand-ftitle .admin-brand-hint{font-weight:400}
@media (max-width:880px){.admin-brand-paper{padding:18px 20px;gap:14px}.admin-brand-paper-name{font-size:17px}}
@media (max-width:640px){.admin-brand-fields{grid-template-columns:1fr}.admin-brand-paper-meta{display:none}}
/* B5 — styled color swatch (native input hidden, opacity:0 over a rounded tile showing the hex),
   the .rtsheet-tb-color overlay idiom. Rounded, focus-ring, no OS chip. */
.brand-swatch{position:relative;display:block;height:38px;border-radius:var(--radius-md,10px);border:.5px solid var(--chrome-border);box-shadow:var(--shadow-e1);overflow:hidden;cursor:pointer;transition:box-shadow var(--motion-fast) var(--ease-out)}
.brand-swatch:hover{box-shadow:var(--shadow-e2)}
.brand-swatch:focus-within{box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 45%,transparent)}
.brand-swatch input[type=color]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;padding:0}
/* the face shows a color chip (bg set live by _syncBrandPreview) + the hex, over the hidden input */
.brand-swatch-face{position:absolute;inset:0;display:flex;align-items:center;gap:10px;padding:0 12px;pointer-events:none}
.brand-swatch-face::before{content:"";width:20px;height:20px;border-radius:6px;border:.5px solid var(--chrome-border);background:var(--sw-fill,#ccc);flex:0 0 auto}
.brand-swatch-hex{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-secondary)}
/* B5 — styled font <select> matching the text inputs (rounded, accent focus ring, custom caret). */
.brand-select{appearance:none;-webkit-appearance:none;width:100%;height:38px;padding:0 34px 0 12px;font-size:13px;color:var(--text-primary);background:var(--input-bg,var(--card-bg));border:.5px solid var(--chrome-border);border-radius:var(--radius-md,10px);box-shadow:var(--shadow-e1);cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%238e8e93' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5L6 7.5 9 4.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;transition:box-shadow var(--motion-fast) var(--ease-out)}
.brand-select:focus{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 45%,transparent)}
/* B5 — the live "applied styling" rollup strip (swatch chips + type pairing + set-flags). */
.brand-style-strip{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;min-height:1px}
.brand-style-strip:empty{display:none}
.bss-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--text-secondary);background:color-mix(in srgb,var(--text-primary) 5%,transparent);padding:4px 11px;border-radius:var(--radius-pill,999px)}
.bss-sw{width:13px;height:13px;border-radius:4px;border:.5px solid var(--chrome-border);flex:0 0 auto}
.bss-chip.bss-set{color:var(--color-success)}
.bss-chip.bss-set svg{width:11px;height:11px}
.bss-chip.bss-type{color:var(--text-primary)}
/* #17 elevate — one-click brand theme presets. Rounded floating tiles that POP via elevation (never a
   colored edge strip); active state = accent ring + faint accent-tinted fill + a check, per DESIGN.md. */
.brand-theme-presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px;margin-bottom:16px}
.brand-theme-tile{position:relative;display:flex;align-items:center;gap:11px;padding:11px 13px;text-align:left;background:var(--card-bg);border:.5px solid var(--chrome-border);border-radius:var(--radius-md,10px);box-shadow:var(--shadow-e1);cursor:pointer;font-family:inherit;transition:box-shadow var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-spring),border-color var(--motion-fast)}
.brand-theme-tile:hover{box-shadow:var(--shadow-e2);transform:translateY(-1px)}
.brand-theme-tile:active{transform:translateY(0) scale(.985)}
.brand-theme-tile:focus-visible{outline:none;box-shadow:var(--shadow-e2),0 0 0 3px color-mix(in srgb,var(--app-accent) 30%,transparent)}
.brand-theme-tile.is-active{border-color:color-mix(in srgb,var(--app-accent) 55%,var(--chrome-border));background:color-mix(in srgb,var(--app-accent) 6%,var(--card-bg));box-shadow:var(--shadow-e2),inset 0 0 0 1px color-mix(in srgb,var(--app-accent) 22%,transparent)}
.brand-theme-tile .btt-swatches{position:relative;flex:0 0 auto;width:34px;height:26px}
.brand-theme-tile .btt-sw{position:absolute;top:0;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--card-bg);box-shadow:0 1px 2px rgba(0,0,0,.14)}
.brand-theme-tile .btt-sw:first-child{left:0;z-index:2}
.brand-theme-tile .btt-sw:last-child{right:0;top:4px;z-index:1}
.brand-theme-tile .btt-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.brand-theme-tile .btt-name{font-size:12.5px;font-weight:700;color:var(--text-primary);letter-spacing:-.1px}
.brand-theme-tile .btt-sub{font-size:10.5px;font-weight:500;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-theme-tile .btt-check{position:absolute;top:8px;right:8px;width:16px;height:16px;border-radius:50%;background:var(--app-accent);display:flex;align-items:center;justify-content:center}
.brand-theme-tile .btt-check svg{width:10px;height:10px;color:#fff}
/* V123 Phase B — team toolbar (search · filters · sort) + bulk bar + checkbox col. */
.admin-users-toolbar{position:relative;display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:13px 20px;border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 6%,transparent);background:color-mix(in srgb,var(--text-primary) 1.5%,transparent)}
.admin-search-wrap{position:relative;flex:1;min-width:180px;display:flex;align-items:center}
.admin-search-ico{position:absolute;left:11px;width:14px;height:14px;color:var(--text-muted);pointer-events:none}
.admin-search-input{width:100%;height:34px;padding:0 10px 0 34px;border:0.5px solid var(--chrome-border);border-radius:var(--radius-pill);background:var(--card-bg);color:var(--text-primary);font-size:13px;font-family:inherit;box-shadow:inset 0 1px 2px rgba(0,0,0,.04);transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
.admin-search-input:focus{outline:none;border-color:color-mix(in srgb,var(--app-accent) 50%,var(--chrome-border));box-shadow:inset 0 1px 2px rgba(0,0,0,.04),0 0 0 3px color-mix(in srgb,var(--app-accent) 12%,transparent)}
.admin-filter-select{height:34px;padding:0 28px 0 12px;border:0.5px solid var(--chrome-border);border-radius:var(--radius-pill);background:var(--card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238e8e93'/%3E%3C/svg%3E") no-repeat right 11px center;-webkit-appearance:none;appearance:none;color:var(--text-secondary);font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;box-shadow:inset 0 1px 2px rgba(0,0,0,.03);transition:border-color var(--motion-fast),color var(--motion-fast)}
.admin-filter-select:hover{border-color:var(--chrome-border-strong);color:var(--text-primary)}
/* 📃 pt.7 (punch item 9, zero-shift) — the bulk bar OVERLAYS the filter toolbar instead of
   inserting above the table (checking a row used to push the whole table down — the exact
   click-shifts-layout class Gavin's rect-diff directive bans). Mail.app-style context swap:
   rows selected → the toolbar row becomes the bulk bar, same footprint, nothing below moves.
   .admin-users-toolbar is the positioning host (position:relative below). */
.admin-bulk-bar{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 14px;background:var(--card-bg);border-radius:inherit;box-shadow:inset 0 0 0 500px color-mix(in srgb,var(--app-accent) 9%,transparent);border-bottom:0.5px solid color-mix(in srgb,var(--app-accent) 24%,transparent);flex-wrap:nowrap;overflow-x:auto;animation:modalOverlayIn var(--motion-fast) var(--ease-out)}
.admin-bulk-count{font-size:12.5px;font-weight:700;color:var(--app-accent)}
.admin-bulk-actions{display:flex;align-items:center;gap:7px;flex-wrap:nowrap}
.admin-th-check,.admin-td-check{width:40px;text-align:center;padding-left:16px!important;padding-right:0!important}
.admin-row-check,#adminCheckAll{width:15px;height:15px;cursor:pointer;accent-color:var(--app-accent)}
.admin-no-results{padding:32px 18px;text-align:center;color:var(--text-muted);font-size:13px}
.admin-name-clickable{cursor:pointer;border-radius:var(--radius-md);transition:background var(--motion-fast)}
.admin-name-clickable:hover{background:color-mix(in srgb,var(--app-accent) 6%,transparent)}
/* V123 Phase C — per-user detail slide-over. */
.admin-detail-scrim{position:fixed;inset:0;background:rgba(0,0,0,.32);z-index:var(--z-modal-backdrop,1200);animation:modalOverlayIn var(--motion-fast) var(--ease-out)}
/* 2026-07-02 📘 — admin slide-over → a FLOATING ROUNDED glass card (was edge-to-edge hard square
   corners). Inset from the viewport edges, radius-lg, glass surface + specular edge, so it reads as a
   premium floating panel matching the rest of the Atira chrome — not a browser-chrome drawer. */
.admin-detail-panel{position:fixed;top:14px;right:14px;bottom:14px;width:min(440px,92vw);background:var(--lg-bg-strong);backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);z-index:var(--z-modal,1250);transform:translateX(calc(100% + 20px));transition:transform var(--motion-base) var(--ease-spring),opacity var(--motion-base);opacity:0;overflow-y:auto;display:flex;flex-direction:column}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.admin-detail-panel{background:var(--surface)}}
@media (prefers-reduced-transparency:reduce){.admin-detail-panel{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
/* Shadow + reveal ONLY when open (the panel persists off-screen across views; gating avoids edge bleed). */
.admin-detail-panel.open{transform:translateX(0);opacity:1;box-shadow:var(--lg-edge),var(--shadow-e4)}
/* The "‹ Back" bar (_adminDpBar): on mobile it is the close affordance for EVERY slide-over
   view (≤640 block sets display:flex); on desktop/iPad the slide-over keeps its floated icon
   close (.admin-dp-close) and the bar stays hidden — EXCEPT for NESTED views (an explicit
   back target → `.admin-dp-bar-nested`), which render no close of their own and step back one
   level instead of closing. 🫛 Without the nested rule, desktop's transcript list/viewer had
   NO visible way back at all (found by the first rendered-pixel pass — DOM tests stayed green
   because the markup exists; this base rule hid it). Anatomy below is width-agnostic (it only
   applies once a display rule shows the bar); display stays gated per width. */
.admin-dp-bar{display:none}
.admin-detail-panel .admin-dp-bar{
  position:sticky;top:0;z-index:10;
  align-items:center;gap:10px;
  padding:10px 12px;
  background:var(--card-bg);
  border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 9%,transparent);
  box-shadow:0 1px 8px color-mix(in srgb,var(--app-bg) 30%,transparent);
}
.admin-dp-bar-back{
  display:inline-flex;align-items:center;gap:3px;flex-shrink:0;
  min-height:38px;padding:0 14px 0 8px;border:none;border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--app-accent) 12%,transparent);
  color:var(--app-accent);font-family:inherit;font-size:15px;font-weight:600;
  cursor:pointer;transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring);
}
.admin-dp-bar-back:hover{background:color-mix(in srgb,var(--app-accent) 18%,transparent)}
.admin-dp-bar-back:active{transform:scale(.95);background:color-mix(in srgb,var(--app-accent) 20%,transparent)}
.admin-dp-bar-chev{width:18px;height:18px;flex-shrink:0}
.admin-dp-bar-title{
  flex:1;min-width:0;text-align:center;
  font-size:15px;font-weight:600;color:var(--text-primary);letter-spacing:-.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* spacer balances the back button so the title is truly centered */
.admin-dp-bar-spacer{flex-shrink:0;width:72px}
@media (min-width: 641px){
  .admin-detail-panel .admin-dp-bar.admin-dp-bar-nested{display:flex}
}
.admin-detail-loading{padding:40px;text-align:center;color:var(--text-muted);font-size:13px}
.admin-dp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 22px 14px}
.admin-dp-name{font-size:18px;font-weight:700;letter-spacing:-.3px;color:var(--text-primary)}
.admin-dp-email{font-size:12.5px;color:var(--text-muted);margin-top:2px}
.admin-dp-close{flex-shrink:0;width:30px;height:30px;border:0;background:color-mix(in srgb,var(--text-primary) 6%,transparent);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);transition:background var(--motion-fast)}
.admin-dp-close:hover{background:color-mix(in srgb,var(--text-primary) 12%,transparent);color:var(--text-primary)}
.admin-dp-close svg{width:14px;height:14px}
/* The "Done" text label on the close button shows only on mobile (where it's a
   labeled pill); on desktop the close is a compact icon circle. */
.admin-dp-close-txt{display:none}
.admin-dp-meta{display:flex;flex-wrap:wrap;gap:6px;padding:0 22px 16px}
.admin-dp-chip{font-size:11px;font-weight:600;padding:3px 10px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--text-primary) 7%,transparent);color:var(--text-secondary);text-transform:capitalize}
.admin-dp-chip-role{background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent)}
.admin-dp-chip-active{background:var(--color-success-bg);color:var(--color-success)}
.admin-dp-chip-sus{background:var(--color-error-bg);color:var(--color-error)}
.admin-dp-stats{display:flex;flex-direction:column;gap:0;padding:0 22px 8px}
.admin-dp-stat{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 7%,transparent);font-size:12.5px}
.admin-dp-stat-l{color:var(--text-muted)}
.admin-dp-stat-v{color:var(--text-primary);font-weight:500;font-variant-numeric:tabular-nums}
/* #7 — last sign-in IP + device (owner-only). A calm inset row with a shield glyph. */
.admin-dp-signin{display:flex;align-items:center;gap:10px;margin-top:10px;padding:9px 11px;border-radius:9px;background:color-mix(in srgb,var(--app-accent) 6%,transparent)}
.admin-dp-signin-ic{flex:0 0 auto;width:15px;height:15px;color:var(--app-accent)}
.admin-dp-signin-body{display:flex;flex-direction:column;min-width:0}
.admin-dp-signin-l{font-size:10.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--text-muted)}
.admin-dp-signin-v{font-size:12.5px;color:var(--text-primary);font-weight:500}
.admin-dp-signin-ip{font-variant-numeric:tabular-nums;color:var(--text-secondary)}
.admin-dp-section{padding:16px 22px}
.admin-dp-section-h{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:10px}
.admin-dp-count{font-weight:600;color:var(--text-secondary);text-transform:none;letter-spacing:0}
.admin-dp-projects{display:flex;flex-direction:column;gap:2px;max-height:240px;overflow-y:auto}
.admin-dp-proj{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-md);cursor:pointer;transition:background var(--motion-fast)}
.admin-dp-proj:hover{background:color-mix(in srgb,var(--text-primary) 5%,transparent)}
.admin-dp-proj-check{width:15px;height:15px;cursor:pointer;accent-color:var(--app-accent);flex-shrink:0}
.admin-dp-proj-name{font-size:13px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-dp-proj.is-member .admin-dp-proj-name{font-weight:600}
.admin-dp-act{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 7%,transparent);font-size:12.5px}
.admin-dp-act-type{color:var(--text-primary);text-transform:capitalize}
.admin-dp-act-when{color:var(--text-muted);flex-shrink:0;font-variant-numeric:tabular-nums}
.admin-dp-empty{font-size:12.5px;color:var(--text-muted);padding:8px 0}
/* V124 — clickable rail panels (open a detail slide-over) + their "View details" cue. */
.admin-panel-clickable{cursor:pointer;transition:transform var(--motion-base) var(--ease-spring),box-shadow var(--motion-base)}
.admin-panel-clickable:hover{transform:translateY(-2px);box-shadow:var(--shadow-e3),var(--lg-edge)}
.admin-panel-more{display:flex;align-items:center;justify-content:flex-end;gap:3px;padding:9px 18px;border-top:0.5px solid color-mix(in srgb,var(--text-primary) 6%,transparent);font-size:11.5px;font-weight:600;color:var(--app-accent);opacity:.85;transition:opacity var(--motion-fast)}
.admin-panel-clickable:hover .admin-panel-more{opacity:1}
.admin-panel-more svg{width:11px;height:13px}
/* Redesigned detail slide-over — hero identity card + quick-stat row. */
.admin-dp-close-float{position:absolute;top:16px;right:16px;z-index:2}
.admin-dp-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:30px 22px 18px;border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 7%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--app-accent) 7%,transparent),transparent)}
.acct-avatar.sz-64,.admin-dp-avatar{width:64px;height:64px;font-size:24px;font-weight:700;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;overflow:hidden;box-shadow:var(--shadow-e2),inset 0 0 0 0.5px rgba(255,255,255,.2)}
/* Admin avatar — clickable change-photo affordance (manage_users only) + upload modal. */
.admin-dp-avatar-edit{position:relative;border:0;padding:0;cursor:pointer;transition:transform var(--motion-fast),box-shadow var(--motion-fast)}
.admin-dp-avatar-edit:hover{transform:translateY(-1px);box-shadow:var(--shadow-e3),inset 0 0 0 0.5px rgba(255,255,255,.25)}
.admin-dp-avatar-edit:focus-visible{outline:2px solid var(--app-accent);outline-offset:2px}
.admin-dp-avatar-pencil{position:absolute;right:-2px;bottom:-2px;width:24px;height:24px;border-radius:50%;background:var(--app-accent);color:var(--on-accent,#fff);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(15,23,42,.28),0 0 0 2px var(--card-bg);opacity:0;transform:scale(.7);transition:opacity var(--motion-fast),transform var(--motion-fast)}
.admin-dp-avatar-pencil svg{width:12px;height:12px}
.admin-dp-avatar-edit:hover .admin-dp-avatar-pencil,.admin-dp-avatar-edit:focus-visible .admin-dp-avatar-pencil{opacity:1;transform:scale(1)}
@media (hover:none){.admin-dp-avatar-pencil{opacity:1;transform:scale(1)}}
.admin-av-drop{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;margin:14px 0 4px;padding:22px 16px;border-radius:18px;border:1.5px dashed color-mix(in srgb,var(--text-primary) 18%,transparent);background:color-mix(in srgb,var(--text-primary) 3%,transparent);cursor:pointer;transition:border-color var(--motion-fast),background var(--motion-fast)}
.admin-av-drop:hover,.admin-av-drop:focus-visible{border-color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 7%,transparent);outline:none}
.admin-av-drop.is-drag{border-color:var(--app-accent);border-style:solid;background:color-mix(in srgb,var(--app-accent) 11%,transparent)}
.admin-av-preview{width:88px;height:88px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--text-primary) 8%,transparent);box-shadow:inset 0 0 0 0.5px rgba(15,23,42,.08)}
.admin-av-preview:empty::before{content:"";width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--text-primary) 16%,transparent)}
.admin-av-preview img{width:100%;height:100%;object-fit:cover}
.admin-av-drop-hint{font-size:12px;color:var(--text-muted);max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-av-err{color:var(--color-error);font-size:12px;font-weight:600;margin-top:6px}
.admin-av-actions{flex-wrap:wrap}
.admin-av-clear{color:var(--color-error)}
.admin-dp-avatar img{width:100%;height:100%;object-fit:cover}
.admin-dp-hero .admin-dp-name{font-size:19px;font-weight:700;letter-spacing:-.3px;color:var(--text-primary)}
.admin-dp-hero .admin-dp-email{font-size:12.5px;color:var(--text-muted)}
.admin-dp-hero .admin-dp-meta{justify-content:center;padding:4px 0 0}
.admin-dp-quickstats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:16px 22px;border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 7%,transparent)}
.admin-dp-qs{text-align:center}
.admin-dp-qs-n{font-size:21px;font-weight:800;letter-spacing:-.5px;color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1}
.admin-dp-qs-l{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);margin-top:4px}
.admin-stat-click{cursor:pointer}
.admin-dp-hero-compact{padding:24px 22px 16px}
/* User list inside a stat/drill slide-over. */
.admin-dp-userlist{display:flex;flex-direction:column;gap:2px;margin:0 -6px}
.admin-dp-userrow{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:transparent;border:none;padding:9px 8px;border-radius:var(--radius-md);cursor:pointer;font-family:inherit;transition:background var(--motion-fast)}
.admin-dp-userrow:hover{background:color-mix(in srgb,var(--app-accent) 7%,transparent)}
.admin-dp-userrow-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.admin-dp-userrow-name{font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-dp-userrow-sub{font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-dp-userrow-role{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 12%,transparent);padding:2px 8px;border-radius:var(--radius-pill);flex-shrink:0}
/* 🫎 S3 B4.3 follow-up — transcript-oversight views (user drawer entry · list · read-only thread). */
.admtx-note{font-size:11px;color:var(--text-muted);line-height:1.5;margin-top:7px}
.admtx-open-btn{margin-top:2px}
.admtx-row .admin-dp-chip{flex-shrink:0}
.admtx-thread{display:flex;flex-direction:column;gap:10px;padding:2px 0}
.admtx-msg{display:flex;flex-direction:column;gap:3px;max-width:88%;padding:9px 12px;border-radius:var(--radius-md,12px)}
.admtx-msg-user{align-self:flex-end;background:color-mix(in srgb,var(--app-accent) 10%,transparent)}
.admtx-msg-ai{align-self:flex-start;background:color-mix(in srgb,var(--text-primary) 5%,transparent)}
.admtx-msg-meta{font-size:10.5px;font-weight:600;color:var(--text-muted)}
.admtx-msg-body{font-size:12.5px;line-height:1.55;color:var(--text-primary);overflow-wrap:anywhere}
.admtx-msg-body pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:11.5px;background:color-mix(in srgb,var(--text-primary) 6%,transparent);border-radius:8px;padding:8px 10px;margin:4px 0}
.admtx-msg-body code{font-size:11.5px}
/* V123 Phase D — analytics · system health · activity log. */
.admin-ana-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
/* 🗒️ pt.8 (admin punch item 5) — usage trend delta + 14-day activity spark + alert pill */
.admin-ana-delta{font-size:10.5px;font-weight:800;margin-left:5px;vertical-align:2px}
.admin-ana-delta.up{color:var(--color-success,#34a853)}
.admin-ana-delta.down{color:var(--color-warning,#d9822b)}
.admin-ana-delta.flat{color:var(--text-muted);font-weight:600}
.admin-ana-spk{display:flex;align-items:flex-end;gap:2px;height:26px;margin-top:10px}
.admin-ana-spk i{flex:1;min-height:2px;border-radius:2px;background:color-mix(in srgb,var(--text-primary) 10%,transparent)}
.admin-ana-spk i.on{background:color-mix(in srgb,var(--app-accent) 55%,transparent)}
.admin-count-pill.admin-pill-alert{background:color-mix(in srgb,var(--app-danger,#d93838) 14%,transparent);color:var(--app-danger,#d93838);box-shadow:inset 0 0 0 0.5px color-mix(in srgb,var(--app-danger,#d93838) 26%,transparent)}
.admin-ana-cell{text-align:center}
.admin-ana-n{font-size:22px;font-weight:800;letter-spacing:-.5px;color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1}
.admin-ana-l{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);margin-top:4px}
.admin-ana-toprow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:0.5px solid var(--chrome-border);font-size:12px}
.admin-ana-toplbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted)}
.admin-ana-top{color:var(--text-secondary)}
.admin-ana-top b{color:var(--app-accent);font-variant-numeric:tabular-nums}
.admin-hl-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 7%,transparent);font-size:12.5px}
.admin-hl-row:last-child{border-bottom:0}
.admin-hl-l{color:var(--text-muted)}
.admin-hl-v{color:var(--text-primary);font-weight:500;font-variant-numeric:tabular-nums}
.admin-health-ok{background:var(--color-success-bg);color:var(--color-success)}
.admin-health-warn{background:var(--color-warning-bg);color:var(--color-warning)}
.admin-health-err{background:var(--color-error-bg);color:var(--color-error)}
.admin-audit-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 6%,transparent);font-size:12.5px}
.admin-audit-row:last-child{border-bottom:0}
.admin-audit-dot{width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--app-accent) 60%,transparent);flex-shrink:0}
.admin-audit-txt{flex:1;color:var(--text-primary);text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-audit-when{color:var(--text-muted);flex-shrink:0;font-variant-numeric:tabular-nums;font-size:11.5px}
/* 2026-07-02 📘 — enriched activity-log rows: category icon + two-line detail (label/who then
   detail/project) + importance emphasis + relative time. */
.admin-audit-row{align-items:flex-start;padding:9px 0}
.admin-audit-ico{flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--text-primary) 6%,transparent);margin-top:1px}
.admin-audit-ico svg{width:13px;height:13px;color:var(--text-secondary)}
.admin-audit-row.au-hi .admin-audit-ico{background:color-mix(in srgb,var(--app-accent) 14%,transparent)}
.admin-audit-row.au-hi .admin-audit-ico svg{color:var(--app-accent)}
.admin-audit-main{flex:1;min-width:0}
.admin-audit-line1{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.admin-audit-label{font-weight:650;color:var(--text-primary);font-size:12.5px}
.admin-audit-who{font-size:11.5px;color:var(--text-secondary)}
.admin-audit-line2{display:flex;align-items:baseline;gap:6px;margin-top:2px;font-size:11.5px;color:var(--text-muted);min-width:0}
.admin-audit-detail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.admin-audit-proj{color:var(--app-accent);font-weight:500;white-space:nowrap}
.admin-audit-sep{opacity:.5}
/* Inside the hero panel the table is flat — the panel owns the chrome (no double
   border/shadow/radius). The sticky header sits flush under the panel head. */
.admin-users-panel .admin-table{border-radius:0;box-shadow:none;background:transparent;table-layout:fixed;width:100%}
.admin-users-panel .admin-th{background:var(--card-bg)}
/* Column sizing so the table never overflows its grid column (was cutting off the
   Last Login / Actions columns). Cols: 1 check · 2 name · 3 role · 4 status ·
   5 last-login · 6 actions. Name (2) flexes; the rest are fixed. */
.admin-users-panel .admin-th:nth-child(1),.admin-users-panel .admin-td:nth-child(1){width:40px}
.admin-users-panel .admin-th:nth-child(3),.admin-users-panel .admin-td:nth-child(3){width:104px}
.admin-users-panel .admin-th:nth-child(4),.admin-users-panel .admin-td:nth-child(4){width:122px}
.admin-users-panel .admin-th:nth-child(5),.admin-users-panel .admin-td:nth-child(5){width:88px;white-space:nowrap}
.admin-users-panel .admin-th:nth-child(6){text-align:right}
.admin-users-panel .admin-td:nth-child(6){width:148px}
@media (max-width:1024px){
  .admin-stat-strip{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .admin-stat-strip{grid-template-columns:repeat(2,1fr);gap:8px}
  .admin-stat{padding:11px 12px}
  .admin-stat-val{font-size:22px}
}
@media (max-width:1024px){
  .admin-name-cell{justify-content:flex-start;flex:1}
  .admin-td[data-label="Name"]::before{display:none}
}

/* ── Mobile polish for contacts, conflict modal, financial tables ── */
@media (max-width: 1024px) {
  /* Contacts directory */
  .cd-wrap{padding:10px}
  .cd-search{width:100%}
  .cd-filters{gap:6px}
  .cd-table,.cd-table thead,.cd-table tbody,.cd-table tr,.cd-table th,.cd-table td{display:block}
  .cd-table thead{display:none}
  .cd-table tbody{display:flex;flex-direction:column;gap:8px}
  .cd-table tr{background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-card);padding:8px 10px}
  .cd-table td{border:0;padding:3px 0;font-size:13px;display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
  .cd-table td::before{content:attr(data-label);font-size:10px;font-weight:700;text-transform:uppercase;color:var(--icon-dim-strong);letter-spacing:.4px;min-width:70px;flex-shrink:0}
  .cd-table td:first-child{font-size:15px;font-weight:600;padding-bottom:5px}
  .cd-table td:first-child::before{display:none}
  .cd-table td:last-child{justify-content:flex-end;padding-top:6px;border-top:0.5px solid var(--chrome-border)}
  .cd-table td:last-child::before{display:none}
  .cd-table tr:hover td{background:transparent}
  /* Conflict merge modal */
  .conflict-grid{grid-template-columns:1fr}
  .conflict-actions{flex-wrap:wrap}
  /* Financial estimate tables inside modal — allow horizontal scroll */
  .fin-card table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* Admin table */
  .admin-table,.admin-table thead,.admin-table tbody,.admin-table tr,.admin-table th,.admin-table td{display:block}
  .admin-table thead{display:none}
  .admin-table tbody{display:flex;flex-direction:column;gap:8px}
  .admin-user-row{background:var(--card-bg);border:0.5px solid var(--border);border-radius:var(--radius-card);padding:8px 10px}
  .admin-td{border:0;padding:3px 0;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px}
  .admin-td::before{content:attr(data-label);font-size:10px;font-weight:700;text-transform:uppercase;color:var(--text-muted);letter-spacing:.4px;min-width:60px;flex-shrink:0}
}

/* T2.10: Admin — table->cards + stacked approval rows.
   Layered AFTER the legacy ≤1024 admin-table rules so the phone-only
   tap-min / data-mobile-primary / approval-row affordances win the cascade.
   The admin-table is now class="admin-table rrt-stack" — the .rrt-stack
   pattern from Task 1.5 supplies the card chrome at ≤640, with the rules
   below overriding the legacy admin-td mobile chrome where they conflict
   (notably the actions cell, the role select inside the table card, and
   the "Last Login" data-mobile-hide column). */
@media (max-width: 640px) {
  /* Wrap gutter reduced to 6px on mobile because the .admin-inner now carries a
     12px horizontal padding (shadow room — see the redesign block). 6 + 12 =
     18px comfortable side inset, with 12px of clip-free room for card shadows. */
  .admin-wrap{padding:var(--space-2) 6px var(--space-4)}
  /* (.admin-inner mobile padding is set with !important in the redesign block.) */
  /* Header: stack title above the +Invite User button so the CTA is a
     full-width tap-min target instead of a tiny top-right pill. The desktop
     layout is declared via inline style="display:flex;justify-content:...
     align-items:flex-end;margin-bottom:4px" on the .admin-header div, so
     !important is required to win over those inline properties. */
  .admin-header{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:var(--space-2);
    margin-bottom:var(--space-2) !important;
  }
  .admin-invite-btn{width:100%;min-height:var(--tap-min);font-size:15px}

  /* ── Pending Approval card ─────────────────────────────────────────────
     The card already stacks vertically in source order; we just give every
     form control 44px tap height + full width, and turn the approve/reject
     pair into a 50/50 split that fills the card. Several wrappers carry
     inline style="" — flagged where !important is needed. */
  /* Inline style="border-top:...;padding:11px 14px" → !important on padding. */
  .pending-row{padding:var(--space-3) !important}
  .pending-summary{gap:var(--space-2);align-items:flex-start !important}
  /* User name as the card heading. Pending-summary's first child div carries
     inline font-size:13.5px → !important to upsize. min-width:0 so the long
     email can wrap without forcing horizontal overflow. */
  .pending-summary > div:first-child{
    font-size:15px !important;line-height:1.35;
    min-width:0;flex:1;
  }
  /* Timestamp + chevron column: keep on one line, don't shrink — so the
     "7 min ago" label never word-wraps onto two cramped lines. */
  .pending-summary > div:last-child{
    flex-shrink:0;white-space:nowrap;
    padding-top:2px;
  }
  /* Role select: inline style sets padding:7px 9px and font-size:13px →
     !important. width/min-height/box-sizing are not set inline; safe without. */
  .pending-detail .pending-role{
    width:100%;min-height:var(--tap-min);
    font-size:16px !important;padding:0 12px !important;
    box-sizing:border-box;
  }
  /* Project multi-select: keep the scrollable container, but each option
     row becomes a 44px-tall tappable label so checkboxes are easy to hit.
     The container inline style sets max-height:180px → !important. */
  .pending-projects{max-height:240px !important}
  /* The label has inline style="display:flex;align-items:center;gap:6px;
     padding:4px 6px;font-size:12.5px;cursor:pointer" → padding/font-size
     need !important. */
  .pending-project-opt{
    min-height:var(--tap-min);
    padding:var(--space-2) var(--space-2) !important;
    font-size:14px !important;
  }
  .pending-project-opt input[type=checkbox]{
    /* Use the system-default sizing path — explicit width/height plays well
       with iOS — and give the checkbox itself a tap-friendly footprint. */
    width:20px;height:20px;
  }
  /* Approve / Reject pair: 50/50 split, both tap-min tall. The wrapping
     div has inline style="display:flex;gap:6px;margin-top:11px" — !important
     on gap to widen it. Both buttons carry inline font-size/padding, so
     !important on those as well. */
  .pending-actions{gap:var(--space-2) !important}
  .pending-actions .pending-approve,
  .pending-actions .pending-reject{
    flex:1;min-height:var(--tap-min);
    font-size:15px !important;padding:0 var(--space-3) !important;
  }
  /* Reject-reason form controls: reason input + Confirm/Cancel pair. The
     reason input has inline padding:7px 9px and font-size:12.5px. The
     buttons each carry inline font-size + padding. */
  .pending-reject-form .pending-reject-reason{
    min-height:var(--tap-min);
    font-size:16px !important;padding:0 12px !important;
    box-sizing:border-box;
  }
  .pending-reject-actions{gap:var(--space-2) !important}
  .pending-reject-actions .pending-reject-confirm,
  .pending-reject-actions .pending-reject-cancel{
    flex:1;min-height:var(--tap-min);
    font-size:14px !important;padding:0 var(--space-3) !important;
  }

  /* ── Create New Account form ───────────────────────────────────────────
     The 5-column desktop grid collapses to a single column stack with
     full-width inputs. !important is required because the desktop grid
     template is declared via inline style="" on the .admin-create-grid
     div — same applies to .admin-create-actions's inline gap. Create/Cancel
     becomes a 50/50 tap-min pair. */
  .admin-create-grid{
    grid-template-columns:1fr !important;
    gap:var(--space-2) !important;
  }
  .admin-create-grid > label{display:block}
  /* Each input/select has inline padding:7px 9px and font-size:13px → !important. */
  .admin-create-grid > label > input,
  .admin-create-grid > label > select{
    width:100%;min-height:var(--tap-min);
    font-size:16px !important;padding:0 12px !important;
    box-sizing:border-box;
  }
  .admin-create-actions{gap:var(--space-2) !important}
  /* Create/Cancel buttons each carry inline font-size + padding. */
  .admin-create-actions .btn-primary,
  .admin-create-actions .btn-ghost{
    flex:1;min-height:var(--tap-min);
    font-size:15px !important;padding:0 var(--space-3) !important;
  }

  /* ── Users table → cards ───────────────────────────────────────────────
     The full user-card mobile layout (card chrome, identity header, role/
     status grid rows, action pills) is the single source of truth in the
     "ADMIN — FULL MOBILE REDESIGN" block below. The earlier stale overrides
     that used to live here (flex cells + role-select max-width:60%) were
     REMOVED 2026-05-26 — they fought the redesign and capped the role select
     to a narrow blob. Nothing for user cards belongs in this legacy block. */

  /* ── Dashboard Role Presets section ────────────────────────────────────
     Each row stacks: role name + meta on top, full-width "Push" button
     below at tap-min height. The row's inline style is
     "display:flex;justify-content:space-between;align-items:center;..." so
     !important on flex-direction / align-items is required. */
  .admin-role-preset-row{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:var(--space-2);
  }
  .admin-role-preset-info{font-size:14px;line-height:1.4}
  .admin-role-preset-info > span{
    display:block;margin-left:0 !important;margin-top:2px;font-size:12px;
  }
  .admin-role-preset-actions{width:100%}
  /* Inline padding:4px 10px;font-size:11.5px → !important. */
  .admin-role-preset-push{
    width:100%;min-height:var(--tap-min);
    font-size:13px !important;padding:0 var(--space-3) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   2026-05-26 📘 ADMIN — FULL MOBILE REDESIGN (≤640)
   The desktop dashboard (2-col grid, deeply nested material cards, a tablet-
   width slide-over) had no mobile-native layout. This block is the single
   authoritative ≤640 admin layer; it is intentionally LAST in the admin
   cascade so it wins. Desktop/iPad (>640) is untouched.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── 0 · ONE flat, uniformly-spaced column for the whole admin view ─────
     The view nests several layout wrappers — .admin-grid (2-col→1-col), its
     .admin-grid-main / .admin-grid-rail children, and a separate
     .admin-config-zone — each with its own gap + margins. Where one container
     ended and the next began (e.g. rail's last panel → config-zone's first =
     Recent Auth Emails → Activity log) the spacing compounded into a bigger
     gap than between same-container siblings.
     Fix: dissolve every layout WRAPPER with display:contents so all panels
     promote to direct children of .admin-inner in a single flow, then let
     .admin-inner be ONE flex column with ONE gap. Now every panel-to-panel
     gap is identical — no container seams. (Wrappers carry no visual style of
     their own, so dissolving their boxes is safe; the stat strip keeps its
     own grid since it's content, not a layout wrapper.) */
  /* Inner wrapper has an inline style="padding:24px 32px" (desktop) — the 32px
     sides wasted ~64px on a phone. Use a SMALL horizontal padding (12px) so the
     soft card shadows (~14px spread) have room to bleed before the .admin-wrap
     scroll container clips them (overflow-y:auto forces overflow-x to clip). The
     wrap gutter is reduced to match so total side inset stays comfortable. */
  .admin-inner{display:flex !important;flex-direction:column;gap:14px;padding:0 12px !important}
  .admin-grid,.admin-grid-main,.admin-grid-rail,.admin-config-zone{
    display:contents !important;
  }
  /* With wrappers dissolved, every panel is a sibling — zero stray margins so
     the single 14px flex gap is the only spacing. */
  .admin-inner > .admin-panel,
  .admin-inner .admin-panel,
  .admin-inner .admin-org-settings,
  .admin-inner .admin-users-panel,
  .admin-stat-strip{margin:0 !important}
  /* The stat strip + team panel keep their place at the top of the flow. */
  .admin-stat-strip{margin-bottom:0 !important}

  /* ── 1 · Drill-down slide-over → full-screen iOS sheet ──────────────────
     Was width:min(420px,92vw) anchored right:0 → an 8vw dead gutter + scrim
     showing on the left of every drill-down (accounts, per-user, system,
     usage). On a phone a detail view is a full-screen pushed sheet, not a
     side rail. Full-bleed, slide from the right, own sticky header. */
  .admin-detail-panel{
    width:100vw;max-width:100vw;left:0;right:0;top:0;bottom:0;
    border-radius:0;border:0;
    box-shadow:none;
    background:var(--card-bg);backdrop-filter:none;-webkit-backdrop-filter:none;
    transform:translateX(100%);opacity:1;
    /* the panel itself is the full-bleed surface on phones — drop the float/glass/rim */
  }
  .admin-detail-panel.open{transform:translateX(0);opacity:1;box-shadow:none}
  /* The scrim is fully covered by the full-bleed panel; keep it as the
     tap-target fallback behind, but it's no longer visible. */
  .admin-detail-scrim{background:rgba(0,0,0,.001)}

  /* ── Sticky close BAR (the definitive way back) ─────────────────────────
     A full-width bar pinned to the top of every slide-over with a large
     "‹ Back" button. Structural (not a floated icon that kept disappearing),
     solid bg, safe-area aware, z-index above all panel content. This is THE
     close affordance on mobile; the old floated icon close is hidden below.
     🫛 Anatomy (sticky/bg/back-pill/title/spacer) now lives in the shared
     width-agnostic block beside the base hide rule — here only the mobile
     specifics: show it on EVERY slide-over view, safe-area padding. */
  .admin-detail-panel .admin-dp-bar{
    display:flex;
    padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 10px;
  }
  /* The old floated/in-head icon close is redundant now — hide it on mobile so
     there's ONE clear close (the bar). The panel head's title stays. */
  .admin-detail-panel .admin-dp-close{display:none !important}
  /* The panel no longer needs its own sticky head padding for the close (the
     bar handles it); let the head sit normally under the bar. */
  .admin-detail-panel .admin-dp-head{position:static;padding:16px 16px 12px;background:transparent;border-bottom:none;-webkit-backdrop-filter:none;backdrop-filter:none}

  /* STICKY sheet header so the close (X) is ALWAYS visible — previously the
     .admin-dp-head scrolled with the body, so on a long list you'd scroll past
     the only X and have no way back. Pin it to the top with a frosted bg +
     safe-area top padding (so it clears the notch/status bar). */
  /* (The sticky close BAR above is the close affordance now. The old in-head /
     floated icon close is hidden, the head sits normally under the bar, and the
     hero uses normal padding since the bar — not the hero — owns the top.) */
  .admin-detail-panel .admin-dp-hero{padding:24px 20px 18px}
  .admin-dp-userrow{padding:12px 10px;border-radius:var(--radius-md)}
  .admin-dp-userrow-name{font-size:15px}
  .admin-dp-userrow-sub{font-size:12.5px}
  .admin-dp-userrow-role{font-size:11px;padding:3px 9px}
  .admin-dp-userlist{gap:2px;margin:0 -4px}

  /* ── 2 · Stat tiles — 2-col, Field (5th) spans full width ───────────────
     Was a 2+2+1 grid leaving a stranded orphan tile. Field stretches the
     full bottom row so the grid reads complete; tiles get a horizontal
     layout (icon · big number · label) that fills the wider full-width tile
     cleanly and stays balanced in the 2-col cells. */
  /* Layout: icon on the left, then a STACKED number-over-label block so the
     label gets the full remaining width on its own line — no more "ONLINE
     NOW" / "ADMIN / MGR" wrapping mid-word against a squeezed right column.
     The markup is .admin-stat > (.admin-stat-top[ico+val]) + .admin-stat-lbl;
     we lay the tile out as [ico] [val/lbl column] using the icon pulled out
     of the top row and the val+lbl stacked. */
  .admin-stat-strip{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
  .admin-stat{
    padding:13px 14px;gap:11px;flex-direction:row;align-items:center;
    display:grid;grid-template-columns:auto 1fr;
  }
  /* icon sits in column 1, spanning both stacked text rows */
  .admin-stat-ico{width:38px;height:38px;grid-row:1 / span 2;align-self:center}
  .admin-stat-ico svg{width:18px;height:18px}
  /* .admin-stat-top wraps icon+val in markup; on mobile we DON'T want the icon
     inside it laying out horizontally with val — so flatten: let the ico + the
     two text lines all be grid items. Make .admin-stat-top display:contents so
     its children (ico + val) participate in the parent grid directly. */
  .admin-stat-top{display:contents}
  .admin-stat-val{font-size:23px;grid-column:2;align-self:end;line-height:1}
  .admin-stat-lbl{
    grid-column:2;align-self:start;margin:2px 0 0;text-align:left;
    font-size:10px;line-height:1.2;white-space:nowrap;
  }
  /* The 5th tile (Field) spans both columns — keep the same icon+stack layout,
     just wider. */
  .admin-stat:nth-child(5){grid-column:1 / -1}

  /* ── 3 · Team-member cards — full redesign ──────────────────────────────
     The .rrt-stack label:value rows were cramming a clipped role <select>,
     a status <select> + wrapping presence text, and a 3-col grid of bare
     grey icon-squares (the 4th orphaned). Rebuilt as a clean iOS contact
     card: identity header on top, Role + Status as proper full-width
     controls with their own label, presence as a status line, and a single
     wrap-friendly row of LABELED action pills (no more mystery squares). */

  /* ROOT FIX (verified via live computed-style probe): the <td> cells default
     to width:auto (shrink-to-fit from base `.rrt-stack td`), so a cell turned
     display:grid collapsed its `1fr` track to content width — the role/status
     <select> rendered as a ~48px blob with the text clipped. Force every card
     cell to fill the card width; now the grid 1fr expands and controls fill. */
  .admin-table.rrt-stack .admin-td{width:100%;box-sizing:border-box}

  /* Member rows — FLAT rows inside the Team-members grouped card (iOS Settings
     style, Gavin's pick). No per-row card chrome (that caused double-layers +
     shadow clipping); just a hairline divider between rows. The section card
     (§4) owns the outline + depth. */
  .admin-table.rrt-stack .admin-user-row{
    background:transparent !important;
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
    margin:0 !important;
    padding:14px 4px;
    border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 8%,transparent) !important;
  }
  .admin-table.rrt-stack tbody tr.admin-user-row:last-of-type{border-bottom:none !important}
  /* The hidden auth-log drawer <tr> must contribute NO card chrome/space (the
     base .rrt-stack tr styling was painting a faint second outline below each
     card — the "double layer"). It's display:none inline, but belt-and-suspenders. */
  .admin-table.rrt-stack .admin-auth-log-drawer{
    display:none !important;border:none !important;box-shadow:none !important;
    background:none !important;margin:0 !important;padding:0 !important;
  }

  /* (Team-members panel styling is defined in §4 below — a section shell with
     a light outline + header holding the member cards.) */

  /* Select checkbox — centered at the top of the card, tidy spacing (Gavin:
     keep centered on top). The cell is the first .admin-td (data-label=""). */
  .admin-table.rrt-stack .admin-td-check{
    display:flex !important;justify-content:center;align-items:center;
    padding:0 0 10px 0 !important;
  }
  .admin-table.rrt-stack .admin-td-check::before{display:none}
  .admin-table.rrt-stack .admin-row-check{width:20px;height:20px;margin:0}

  /* Identity header (avatar + name + email) — tighter divider gap. */
  .admin-table.rrt-stack .admin-td[data-mobile-primary]{
    display:block;padding:0 0 11px 0;margin-bottom:11px;
    border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 7%,transparent);
  }
  .admin-table.rrt-stack .admin-name-cell{gap:11px;align-items:center;min-width:0}
  .admin-table.rrt-stack .acct-avatar.sz-30{width:40px;height:40px;font-size:15px;flex-shrink:0}
  /* Name + email each stay on ONE line. The id column must be allowed to shrink
     (min-width:0) so the email truncates with an ellipsis instead of forcing
     overflow; names/emails never wrap to a second line. */
  .admin-table.rrt-stack .anc-id{min-width:0;flex:1;overflow:hidden}
  .admin-table.rrt-stack .anc-name{
    font-size:15px;font-weight:650;letter-spacing:-.2px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;
  }
  .admin-table.rrt-stack .anc-email{
    font-size:12.5px;color:var(--text-muted);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;
  }

  /* Role + Status rows — ROBUST 2-col grid: [label] [full-width control].
     (Previous flex+::before approach left the <select> narrow + the label
     stacked above with dead space — a flex item with flex-grow on a <select>
     doesn't reliably fill. An explicit grid with a 1fr control column is
     unambiguous. !important on display beats the inherited `.rrt-stack td`
     flex rule regardless of source order.) */
  .admin-table.rrt-stack .admin-td[data-label="Role"],
  .admin-table.rrt-stack .admin-td[data-label="Status"]{
    display:grid !important;
    grid-template-columns:58px 1fr;align-items:center;
    column-gap:11px;row-gap:5px;padding:6px 0;
  }
  .admin-table.rrt-stack .admin-td[data-label="Role"]::before,
  .admin-table.rrt-stack .admin-td[data-label="Status"]::before{
    grid-column:1;justify-self:start;
    font-size:11px;font-weight:700;letter-spacing:.3px;color:var(--text-muted);
  }
  /* Controls occupy column 2 and stretch to fill it — guaranteed full width,
     40px tap target, no clip cap. (Role uses a custom pill button — §C role
     picker — styled identically so it's interchangeable with the select.) */
  .admin-table.rrt-stack .admin-role-select,
  .admin-table.rrt-stack .admin-status-select,
  .admin-table.rrt-stack .admin-role-pillbtn{
    grid-column:2;justify-self:stretch;
    width:100% !important;max-width:none !important;min-height:40px;
    font-size:15px;padding:0 34px 0 13px;box-sizing:border-box;
    background-position:right 13px center;
  }
  /* Presence line ("Online now" / "Seen 14d ago") sits in column 2, left-
     aligned under the status control — no longer orphaned/centered. */
  .admin-table.rrt-stack .admin-status-activity{
    grid-column:2;justify-self:start;text-align:left;
    margin:0;font-size:11.5px;color:var(--text-muted);
  }

  /* Action row: compact 2-up grid (Rename | Email log / Reset | Delete) so the
     cluster is half the height of a 4-button stack. Each is a labeled pill. */
  .admin-table.rrt-stack .admin-td-actions{
    display:block;padding-top:12px;margin-top:11px;
    border-top:0.5px solid color-mix(in srgb,var(--text-primary) 7%,transparent);
  }
  .admin-table.rrt-stack .admin-td-actions::before{display:none}
  .admin-table.rrt-stack .admin-actions-group{
    display:grid !important;grid-template-columns:1fr 1fr;gap:8px;width:100%;
  }
  .admin-table.rrt-stack .admin-act-btn{
    min-width:0;min-height:38px;width:auto;padding:0 10px;
    font-size:12.5px;border-radius:var(--radius-pill);white-space:nowrap;
    background:color-mix(in srgb,var(--text-primary) 5%,transparent);
    overflow:hidden;
  }
  .admin-table.rrt-stack .admin-act-btn svg{width:14px;height:14px;flex-shrink:0}
  /* Reveal each icon-button's label (markup is icon-only) via ::after. */
  .admin-table.rrt-stack .admin-act-btn.aab-icon{width:auto;padding:0 12px;gap:6px}
  .admin-table.rrt-stack .admin-rename-btn::after{content:"Rename"}
  .admin-table.rrt-stack .admin-auth-log-btn::after{content:"Email log"}
  .admin-table.rrt-stack .admin-reset-btn::after{content:"Reset"}
  /* Delete sits in the 2×2 grid (Reset | Delete on row 2) — danger-tinted, no
     stranded empty slot. (Chosen 2×2 over a full-width stack per Gavin.) */
  .admin-table.rrt-stack .admin-del-btn{
    color:var(--app-danger);
    background:color-mix(in srgb,var(--app-danger) 8%,transparent);
    border-color:color-mix(in srgb,var(--app-danger) 22%,var(--chrome-border));
  }
  .admin-table.rrt-stack .admin-del-btn::after{content:"Delete"}

  /* "YOU" chip on your own row. */
  .admin-table.rrt-stack .anc-you{font-size:9.5px;margin-left:6px}

  /* Role picker bottom-sheet rows (custom mobile role chooser, §C). The
     current role is accent-tinted with a trailing check; others are plain. */
  .admin-role-sheet-row .msheet-row-label{flex:1;font-size:16px}
  .admin-role-sheet-row.is-current .msheet-row-label{color:var(--app-accent);font-weight:600}
  .admin-role-sheet-row .msheet-row-check{width:18px;height:18px;color:var(--app-accent);flex-shrink:0}

  /* ── 4 · Team-members section — header CARD + filters, then member cards ──
     The section needs its own identity (outline + depth + header) — but NOT a
     heavy card wrapping the member cards (that caused the earlier double-layer).
     Solution: the panel is a SHELL with a light border + soft shadow holding
     the HEADER (title + count) and the FILTER toolbar; the member-row cards sit
     inside it as solid cards. The header keeps a frosted band so it reads as a
     real section header; the member cards (shadow-e2) provide the depth below.
     One light outer outline + the inner cards = clean, no competing double. */
  .admin-users-panel{
    background:var(--card-bg) !important;
    border:0.5px solid var(--chrome-border) !important;
    border-radius:var(--radius-card) !important;
    box-shadow:var(--shadow-e2),var(--lg-edge) !important;
    overflow:hidden !important;
  }
  /* Header: frosted band, rounded top to match the card. */
  .admin-users-panel-head{
    padding:15px 16px;
    background:var(--frost-bg-strong);
    -webkit-backdrop-filter:var(--frost-blur);backdrop-filter:var(--frost-blur);
    border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 8%,transparent);
  }
  .admin-users-toolbar{
    display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:14px 16px;
    background:transparent !important;
    border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 8%,transparent) !important;
  }
  /* Rows are flat inside the card with comfortable side padding (the row's own
     padding:14px 4px + this 12px = 16px inset from the card edge). */
  .admin-users-panel .admin-table.rrt-stack{padding:0 12px}
  .admin-users-toolbar .admin-search-wrap{grid-column:1 / -1}
  .admin-users-toolbar .admin-search-input{min-height:var(--tap-min);font-size:16px}
  .admin-users-toolbar .admin-filter-select{
    width:100%;min-height:var(--tap-min);font-size:14px;box-sizing:border-box;
  }

  /* ── 5 · Letterhead & Branding — flatten the nesting ────────────────────
     Was panel(22px) → group-card(20px) → sub-card, three levels of chrome
     eating ~42px of a 390px screen before any content. On mobile the inner
     .admin-brand-group cards become FLUSH sections (no own bg/border/shadow/
     radius) separated by a hairline, so the panel owns the single card and
     content spans full width. */
  .admin-brand-body{padding:16px 16px !important}
  .admin-brand-group{
    background:transparent;border:none;box-shadow:none;border-radius:0;
    padding:18px 0 0;margin-bottom:0;
    border-top:0.5px solid color-mix(in srgb,var(--text-primary) 8%,transparent);
  }
  .admin-brand-group:first-of-type{border-top:none;padding-top:4px}
  /* Header text hierarchy (was crowded — intro, "Last updated", BRAND IDENTITY
     and the LIVE PREVIEW caption all stacked at similar weight). Give the intro
     room, demote "Last updated" to a quiet caption, add air around the group
     header + preview label so the eye can step down the hierarchy. */
  .admin-brand-intro{font-size:13px;line-height:1.5;margin-bottom:8px;color:var(--text-secondary)}
  .admin-brand-updated{margin-top:6px;font-size:11px;color:var(--text-muted)}
  .admin-brand-group-h{
    margin-bottom:14px;padding-bottom:11px;font-size:11px;letter-spacing:.5px;
  }
  .admin-brand-preview-lbl{
    font-size:10px;line-height:1.4;margin-bottom:10px;color:var(--text-muted);
  }
  /* (Panel-head caption stacking is handled globally for all admin panels in
     §6 below — the "Applied to generated PDFs & emails" caption drops there.) */

  /* Live preview → stacked: logo on top, name/subtitle/address centered
     below, so the full brand name shows (no "RUSSELL &..." truncation).
     Blue accent strip at the bottom removed per Gavin (read as a stray bar). */
  .admin-brand-paper{
    flex-direction:column;align-items:center;text-align:center;
    gap:10px;padding:20px 18px;
    border-bottom:0.5px solid var(--chrome-border);
  }
  .admin-brand-paper-logo{width:64px;height:64px}
  .admin-brand-paper-id{width:100%;min-width:0}
  .admin-brand-paper-name{white-space:normal;font-size:19px;line-height:1.15}
  .admin-brand-paper-meta{display:block;text-align:center;margin-top:2px}

  /* Fields already collapse to 1-col (existing rule at 8449); give them real
     tap height to match the rest of the redesign. */
  .admin-brand-fields{gap:13px}
  .admin-brand-body input[type="text"],
  .admin-brand-body input[type="url"],
  .admin-brand-body input:not([type]){
    height:var(--tap-min) !important;font-size:16px !important;
  }

  /* Brand-image slots → single column flush rows (no nested card grid). */
  .org-img-slots{grid-template-columns:1fr;gap:12px}
  .org-img-slot{padding:14px;border-radius:var(--radius-md);gap:10px}
  /* Preview box: capped height so the slot doesn't balloon (flex:1 was growing
     it into a big empty box). Logo sits centered in a tidy framed strip. */
  .org-img-slot-preview{flex:0 0 auto;min-height:64px;max-height:88px}
  /* Upload / Clear / Cancel → full-width split row of real 40px pills that
     fill the card edge-to-edge (was two cramped left-aligned nubs under a big
     empty preview). When there's only Upload it spans full width. */
  .org-img-slot-actions{display:flex;gap:8px;margin-top:0}
  .org-img-slot-btn{
    flex:1 1 0;height:40px !important;font-size:14px;padding:0 14px !important;
    justify-content:center;min-width:0;
  }

  /* Save changes — full-width primary, anchored. */
  .admin-brand-save{flex-direction:column;align-items:stretch;gap:8px}
  .admin-brand-save .btn-primary{width:100%;min-height:var(--tap-min);font-size:15px !important;padding:0 !important}
  .admin-brand-savemsg{text-align:center}

  /* Company documents: upload control full-width; the doc-kind <select> spans
     full width with comfortable chevron room so the full option text shows
     ("Letterhead Page (full document)" no longer clips to "…docum"). */
  .org-doc-upload{flex-direction:column;align-items:stretch;gap:9px;padding:13px}
  .org-doc-kind-select{
    height:var(--tap-min) !important;width:100%;font-size:15px;
    padding:0 38px 0 14px !important;text-overflow:ellipsis;
    background-position:right 14px center !important;
  }
  .org-doc-upload .org-img-slot-btn{height:var(--tap-min) !important;justify-content:center;flex:none}
  /* Doc rows redesigned for long filenames. Markup is a flat row of:
     [icon] [info] [download <a>] [delete <button>]. Lay it out as a 4-col
     grid: icon + flexible info on row 1 (name WRAPS — was hard-truncated to
     "R&R COI-…"), and the two action buttons share row 2, right-aligned, so a
     long title gets the full width and never cramps against the buttons. */
  .org-doc-row{
    display:grid;grid-template-columns:auto 1fr auto auto;
    column-gap:11px;row-gap:8px;padding:13px;align-items:start;
  }
  .org-doc-ico{grid-row:1;grid-column:1;width:22px;height:22px;margin-top:1px}
  .org-doc-info{grid-row:1;grid-column:2 / -1;min-width:0}
  .org-doc-name{white-space:normal;line-height:1.3;font-size:14px;word-break:break-word}
  .org-doc-meta{font-size:11.5px;line-height:1.4;margin-top:2px}
  /* Both actions on row 2: download in col 3, delete in col 4, right-aligned. */
  .org-doc-row > .org-doc-act{grid-row:2;
    width:42px;height:40px;flex-shrink:0;
    background:color-mix(in srgb,var(--text-primary) 5%,transparent);border-radius:var(--radius-md);
  }
  .org-doc-row > .org-doc-act:nth-of-type(1){grid-column:3}
  .org-doc-row > .org-doc-act:nth-of-type(2){grid-column:4}
  .org-doc-act svg{width:17px;height:17px}

  /* ── 6 · Secondary cards (System status · Usage · Pending · Role Presets)
     + final polish ────────────────────────────────────────────────────── */
  /* Panel heads a touch tighter for phone width. */
  .admin-panel > summary,.admin-panel-head{padding:14px 16px}
  .admin-panel-more{padding:11px 16px}
  /* Caption text ("Push replaces…", "Role · status · access…", "Applied to
     generated PDFs…") was a flex sibling of the title under space-between, so
     on a long title (e.g. "Dashboard Role Presets") it collided/overlapped.
     Wrap the head + force the caption (last bare span, NOT the count pill) to
     a full-width second line. Title + count-pill stay together on row 1. */
  .admin-panel > summary,.admin-panel-head{flex-wrap:wrap;row-gap:3px}
  .admin-panel > summary > span:last-child:not(.admin-count-pill):not(.admin-panel-head-l),
  .admin-panel-head > span:last-child:not(.admin-count-pill):not(.admin-panel-head-l){
    flex:1 1 100%;margin:0;padding-left:25px;
    font-size:11.5px;line-height:1.35;
  }

  /* ── Consistent RAISED card elevation across ALL admin panels ───────────
     The collapsed / empty panels (Pending Approval, Recent Auth Emails) read
     as recessed/pressed-in because the WHOLE panel was just a frosted-strong
     summary head (a darker fill) — while the expanded panels (Activity log,
     Letterhead, Role Presets) have a solid white body that reads as raised.
     Per DESIGN.md these are CONTENT rows (solid --card-bg), not floating glass
     chrome, and they all share ONE resting elevation. Normalize:
       • every panel = solid card bg + e2 resting shadow + lg-edge specular rim
       • the head/summary uses the SAME solid card bg (no frost-strong film) so
         a header-only collapsed panel looks identical to a bodied one
       • reactive: hover/press → e3 bloom + spring lift (clickable ones). */
  .admin-panel,.admin-panel-empty{
    background:var(--card-bg) !important;
    box-shadow:var(--shadow-e2),var(--lg-edge) !important;
    border:0.5px solid var(--chrome-border) !important;
    border-radius:var(--radius-card) !important;
    /* overflow:visible so the soft e2 shadow bleeds/fades fully around the card
       instead of being hard-clipped at the panel's rounded box (the head now
       shares the card bg, so there's no overflowing child needing the clip). */
    overflow:visible !important;
  }
  /* The inner head/body keep the card's rounded corners visually since the head
     bg now matches the body — round the head's top so the top edge isn't square. */
  .admin-panel > summary:first-child,.admin-panel > .admin-panel-head:first-child{
    border-radius:var(--radius-card) var(--radius-card) 0 0;
  }
  .admin-panel > summary,.admin-panel-head{
    background:var(--card-bg) !important;
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  }
  /* Reactive: the tappable panels (clickable stat cards + the activity-log row)
     bloom + lift on press, matching the user-card press language + DESIGN.md
     "press feedback on every interactive element". */
  .admin-panel-clickable:active,
  #adminAuditPanel:active,
  #adminAuditPanel > summary:active{
    box-shadow:var(--shadow-e3),var(--lg-edge) !important;
    transform:scale(.992);
  }
  .admin-panel-clickable,#adminAuditPanel{
    transition:box-shadow var(--motion-base) var(--ease-out),transform var(--motion-fast) var(--ease-spring);
  }
  @media (prefers-reduced-motion:reduce){
    .admin-panel-clickable:active,#adminAuditPanel:active{transform:none}
  }

  /* System status + Usage definition lists already read well; just make the
     tappable "View details" affordance a comfortable 44px row. */
  .admin-panel-clickable .admin-panel-more{min-height:24px}
  .admin-hl-row{font-size:13px;padding:8px 0}
  /* Usage 3-stat row: keep the triplet, but give the wrapping labels room so
     "Active projects" reads cleanly on two centered lines instead of cramped. */
  .admin-ana-grid{gap:6px}
  .admin-ana-l{line-height:1.3;letter-spacing:.3px}
  .admin-ana-n{font-size:24px}
  /* Role-preset cards stack to one column with comfortable padding (the grid
     was auto-fill minmax(180px) → fine, but lock to 1-col + bigger Push tap). */
  .admin-rp-grid{grid-template-columns:1fr;gap:11px;padding:14px 16px}
  .admin-rp-card{padding:15px}
  .admin-rp-role{font-size:15px}
  .admin-rp-push{min-height:var(--tap-min);font-size:13px}
  /* System-status "degraded services" rows inside the drill sheet — readable
     full-width lines (they already are, but ensure the sheet padding matches). */
  .admin-detail-panel .admin-hl-row,
  .admin-detail-panel .admin-audit-row{padding:10px 0}

  /* Activity log → tappable nav row on mobile (opens the slide-over). The
     <details> body is collapsed (auditPanel.open=false in JS); style the
     summary like the other clickable panels with a trailing chevron and no
     expand marker. */
  #adminAuditPanel{cursor:pointer}
  #adminAuditPanel > summary{position:relative;padding-right:40px}
  #adminAuditPanel > summary::after{
    content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;
    border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);
    transform:translateY(-60%) rotate(-45deg);opacity:.7;
  }
  /* Keep the inline body hidden on mobile even if a stray open slips through. */
  #adminAuditPanel[open] > #adminAuditBody{display:none}
  #adminAuditPanel > summary::-webkit-details-marker{display:none}

}

@media (max-width: 480px) {
  .view-toggle{overflow-x:auto;flex-shrink:1;max-width:calc(100vw - 140px)}
  .cd-tabs{overflow-x:auto;gap:0;flex-shrink:0}
  .cd-tab{white-space:nowrap;padding:8px 14px;font-size:13px}
}

/* T2.9: Contacts — single-column cards + comfortable mobile search.
   Layered AFTER the legacy ≤1024 stacked-card rules so the phone-only
   tap-min / data-mobile-primary / search affordances win the cascade.
   Tables are now class="cd-table rrt-stack" — the new .rrt-stack pattern
   from Task 1.5 supplies the card chrome at ≤640, with the rules below
   overriding the legacy cd-table mobile chrome where they conflict. */
@media (max-width: 640px) {
  /* V153 — Filters: compact content-sized pills in one horizontally-scrolling
     row (not three full-width stacked blocks). Each ~33px tall, 16px text to
     keep iOS no-zoom-on-focus while staying visually tight. */
  .cd-filters{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:6px;-ms-overflow-style:none;scrollbar-width:none}
  .cd-filters::-webkit-scrollbar{display:none}
  .cd-filters select{
    flex:0 0 auto;width:auto;
    min-height:33px;
    padding:5px 26px 5px 12px;
    border-radius:var(--radius-pill);
    font-size:16px; /* iOS no-zoom on focus */
  }
  /* Clients toolbar: stack search above the Add button so both are
     full-width and tap-min tall. */
  .cd-client-toolbar{flex-direction:column;align-items:stretch;gap:var(--space-2)}
  .cd-client-toolbar .cd-search{width:100%;min-height:var(--tap-min);font-size:16px;padding:0 12px}
  .cd-client-toolbar .cd-client-add{width:100%;min-height:var(--tap-min);font-size:15px}
  /* cd-table card chrome — neutralize the legacy ≤1024 stacked-card rules
     that conflict with .rrt-stack so the new pattern owns the look at ≤640. */
  .cd-table-wrap{
    background:transparent;
    border-radius:0;
    box-shadow:none;
    overflow:visible;
  }
  .cd-table.rrt-stack{font-size:13px}
  /* Tighten primary-row spacing inside the stacked card. */
  .cd-table.rrt-stack td[data-mobile-primary]{
    font-size:15px;padding-bottom:var(--space-2);
    border-bottom:0.5px solid var(--chrome-border);margin-bottom:var(--space-1);
  }
  /* V153 — Edit/Assign/Delete are no longer a stacked button row on phones;
     they live in the contact detail sidebar (peek) opened by a card tap. Keep the
     desktop Actions cell hidden so the card is just identity + comms row. */
  .cd-table.rrt-stack td[data-label="Actions"]{display:none}
  .cd-table.rrt-stack td[data-label="Actions"]::before{display:none}
  /* Empty-state cell — kept single-line, centered. The legacy ≤1024 rule
     sets td:last-child to border-top + justify-content:flex-end, which
     misaligns the "No contacts" message. */
  .cd-table.rrt-stack td[colspan]{
    display:block;text-align:center;border-top:none;padding:var(--space-3) 0;
  }
  .cd-table.rrt-stack td[colspan]::before{display:none}
  /* V153 — Topbar reworked for phone: title on its own line; the primary
     "+ Add Contact" CTA gets full weight + comfortable height, and the two
     secondary utilities (Download / Import) become a quiet equal-split row
     beneath it — not three equally-bulky full-width bars. */
  .cd-topbar{flex-direction:column;align-items:stretch;gap:var(--space-2);margin-bottom:var(--space-2)}
  .cd-topbar h2{font-size:20px !important;padding:0}
  .cd-topbar > div{display:flex;flex-wrap:wrap;gap:var(--space-2)}
  .cd-topbar .btn-primary{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:42px;padding:0 14px;font-size:14px;font-weight:600;flex:1 1 100%;order:-1;
  }
  .cd-topbar .btn-ghost{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:36px;padding:0 12px;font-size:12.5px;flex:1 1 0;
  }
  /* V153 — Tabs: a true compact segmented control, two equal full-width
     segments. ~34px (not a 44px scrolling band), so it reads tight + Apple. */
  .cd-tabs{display:flex;width:100%;gap:2px;overflow:visible;margin-bottom:var(--space-2)}
  .cd-tab{
    flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;
    min-height:34px;padding:0 12px;font-size:13px;font-weight:600;white-space:nowrap;
  }
  /* Client toolbar buttons — same vertical-centering trick. */
  .cd-client-toolbar .cd-client-add{
    display:inline-flex;align-items:center;justify-content:center;
  }
}

/* ── Phase 20: Mobile polish pass 2 ────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Notification panel — prevent overflow on narrow screens */
  #notifPanel{width:min(340px,calc(100vw - 20px));right:10px}

  /* Reports page — contain width, make table horizontally scrollable */
  .reports-page{padding:12px 10px;width:100%;max-width:100vw;box-sizing:border-box;overflow-x:hidden}
  .reports-header{flex-wrap:wrap;gap:8px}
  .reports-summary-bar{flex-wrap:wrap}
  .reports-stat-card{min-width:calc(50% - 6px);flex:1 1 calc(50% - 6px)}
  /* Table wrapper scrolls horizontally so the table never breaks the page */
  .reports-table-wrap{border-radius:var(--radius-md);overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;width:100%}
  .reports-table{min-width:520px}
  .reports-table th,.reports-table td{padding:8px 10px;font-size:12px;white-space:nowrap}
  #reportsView .rpt-tabs{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;gap:4px}
  #reportsView .rpt-tabs::-webkit-scrollbar{display:none}
  #reportsView .rpt-tab{white-space:nowrap;flex-shrink:0}
  #reportsView .rpt-export-btn{min-height:32px;padding:0 12px;align-items:center}
  /* Activity items — prevent right-side empty space by letting meta wrap */
  .activity-item{flex-wrap:wrap;gap:4px 10px}
  .activity-line{min-width:0;flex:1 1 100%}
  .activity-meta{white-space:normal;flex:1 1 100%;font-size:11px}

  /* Photos page — reduce padding */
  .photos-page{padding:14px 12px}
  .photos-page-header{flex-wrap:wrap;gap:8px}
}

@media (max-width: 640px) {
  /* Photo lightbox — stack vertically instead of side-by-side */
  .photo-lb-inner{flex-direction:column;width:96vw;max-height:92svh;height:92svh}
  .photo-lb-img-wrap{flex:0 0 45%;max-height:45svh}
  .photo-lb-panel{width:100%;flex:1;border-left:none;border-top:0.5px solid var(--chrome-border);padding:14px 16px;overflow-y:auto;max-height:47svh}
  .photo-lb-comments-list{max-height:120px}

  /* Lightbox affordances — meet --tap-min (44px) on phones */
  .photo-lb-close{width:var(--tap-min);height:var(--tap-min);min-width:var(--tap-min);min-height:var(--tap-min)}
  .photo-lb-close svg{width:14px;height:14px}
  .photo-lb-rename{min-height:var(--tap-min);height:auto;padding:0 14px}
  .photo-lb-delete{min-width:var(--tap-min);min-height:var(--tap-min);width:var(--tap-min);height:auto}
  .photo-lb-comment-send{min-height:var(--tap-min);height:auto;padding:0 18px}
  .lb-comment-delete{min-width:var(--tap-min);min-height:var(--tap-min);display:inline-flex;align-items:center;justify-content:center}

  /* Reports stat cards — single column on very small screens */
  .reports-stat-card{min-width:100%;flex:1 1 100%}

  /* Notification panel — full-width minus margin on very small screens */
  #notifPanel{width:calc(100vw - 20px);right:10px;left:10px}
}

/* ── Compact / density toggle ────────────────────────────────────────────── */
/* V29g (2026-05-17 cont. 14): align toggle-row padding with .user-menu-row + .user-menu-head
   (all 12px horizontal). Previously was 0 horizontal → toggle slid flush to menu edge while
   text rows were inset 12px → visually uneven. */
.density-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:6px 12px}
.density-toggle-row span{font-size:13px;color:var(--text-primary)}
.density-switch{position:relative;width:36px;height:20px;cursor:pointer}
.density-switch input{opacity:0;width:0;height:0}
.density-slider{position:absolute;inset:0;background:var(--surface-2);border-radius:var(--radius-xl);transition:background var(--motion-base)}
.density-slider::before{content:'';position:absolute;height:14px;width:14px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:transform var(--motion-base)}
.density-switch input:checked + .density-slider{background:var(--app-accent)}
.density-switch input:checked + .density-slider::before{transform:translateX(16px)}

[data-density="compact"] .header{padding:6px 12px;min-height:44px}
[data-density="compact"] .view-btn{padding:4px 10px;font-size:12px}
[data-density="compact"] .btn{padding:5px 10px;font-size:12px}
[data-density="compact"] .filter-bar{padding:6px 12px;gap:6px}
[data-density="compact"] .filter-select{padding:4px 8px;font-size:12px}
[data-density="compact"] .board-col{min-width:240px;padding:10px}
[data-density="compact"] .card{padding:10px 12px;margin-bottom:6px}
[data-density="compact"] .card-title{font-size:13px}
[data-density="compact"] .card-meta{font-size:11px}
[data-density="compact"] .list-row td{padding:6px 10px;font-size:12px}
[data-density="compact"] .cd-table td{padding:2px 0;font-size:12px}
[data-density="compact"] .cd-table tr{padding:6px 8px}
[data-density="compact"] .cd-topbar{padding:10px 14px 6px}
[data-density="compact"] .cd-search{padding:5px 10px;font-size:12px}
[data-density="compact"] .admin-td{padding:2px 0;font-size:12px}
[data-density="compact"] .admin-user-row{padding:6px 8px}
[data-density="compact"] .chat-page{padding:12px 12px 0}
[data-density="compact"] .chat-bubble{padding:7px 10px;font-size:13px}
[data-density="compact"] .chat-textarea{padding:7px 10px;font-size:13px}

/* ── Photos: top-level page ── */
.photos-page{padding:12px;width:100%;margin:0 auto;box-sizing:border-box;flex:1;min-height:0;overflow-y:auto}
.photos-page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding:0 2px;gap:12px;flex-wrap:wrap}
.photos-page-title{font-size:18px;font-weight:700;color:var(--on-app-bg);letter-spacing:-0.3px;margin:0}
.photos-project-select{height:30px;padding:0 26px 0 10px;background:var(--chrome-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);color:var(--text-primary);font-size:12px;font-weight:500;cursor:pointer;outline:none;font-family:inherit;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238e8e93'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;transition:border-color var(--motion-fast),box-shadow var(--motion-fast),background-color var(--motion-fast)}
.photos-project-select:hover{background-color:var(--chrome-bg-hover);border-color:var(--chrome-border-strong)}
.photos-project-select:focus-visible{outline:none;border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--app-accent) 22%, transparent)}
.photos-project-select:focus{border-color:var(--app-accent)}
.photos-page-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
/* T2.8: Photos grid — force 2-up at phone widths (default auto-fill min 200px collapses to 1-col below ~420px). Placed after base to win cascade. */
@media (max-width: 640px) {
  .photos-page-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}
}

/* ============================================================================
   GLOBAL PHOTOS — Field Gallery, Pass-2 (2026-06-04). Faithful port of
   09-photos.html. renderPhotosPage paints .ph-wrap into #photosPageGrid, so
   neutralize the legacy grid display there. All scoped to #photosView. Honest
   data only: phase dot is derived (real), geo/star/GB OMITTED (no data).
   ============================================================================ */
#photosView .photos-page-grid{display:block;grid-template-columns:none;gap:0}
/* V133 (2026-06-20) — .ph-wrap is the panel STAGE: a flex column with matte gaps
   between the hero and the floating content panels. The hero keeps its own
   surface; the filter bar + photo-groups each sit on a solid panel. The legacy
   per-section margin-bottoms are zeroed so the stage gap owns the spacing. */
#photosView .ph-wrap{padding:6px 2px 20px;display:flex;flex-direction:column;gap:12px}
#photosView .ph-panel{padding:16px 18px;min-width:0}
#photosView .ph-panel-filters{padding:14px 18px}
/* The async guide/series slots are empty most of the time; as flex children they
   would otherwise each eat a 12px stage gap and break the panel rhythm. Collapse
   them out of flow until they hold content. */
#photosView .ph-wrap > #photosGuideSlot:empty,
#photosView .ph-wrap > #photoSeriesSuggest:empty{display:none}
#photosView .ph-panel .ph-filters{margin-bottom:0}
#photosView .ph-panel .ph-group:last-child{margin-bottom:0}

/* leading green hero band — margin-bottom:0; the .ph-wrap stage gap (12px) owns
   the spacing now (V133 2026-06-20). */
#photosView .ph-hero{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:0;border-radius:20px;padding:20px 24px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,color-mix(in srgb,var(--app-accent) 86%,#000) 0%,var(--app-accent) 55%,color-mix(in srgb,var(--app-accent) 92%,#000) 100%);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,var(--shadow-e3)}
#photosView .ph-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 80% at 0% 0%,rgba(255,255,255,.16),transparent 55%)}
#photosView .ph-hero .phh-main{position:relative;z-index:1}
#photosView .ph-hero .phh-count{font-size:38px;font-weight:800;letter-spacing:-.03em;color:var(--on-accent,#fff);font-variant-numeric:tabular-nums;line-height:1}
#photosView .ph-hero .phh-sub{font-size:13px;font-weight:700;color:color-mix(in srgb,var(--on-accent,#fff) 85%,transparent);margin-top:6px}
#photosView .ph-hero .phh-stat{position:relative;z-index:1;display:flex;flex-direction:column;gap:1px;padding-left:20px;border-left:1px solid rgba(255,255,255,.22)}
#photosView .ph-hero .phh-stat .v{font-size:21px;font-weight:800;color:var(--on-accent,#fff);font-variant-numeric:tabular-nums}
#photosView .ph-hero .phh-stat .l{font-size:11px;font-weight:700;color:color-mix(in srgb,var(--on-accent,#fff) 72%,transparent);text-transform:uppercase;letter-spacing:.06em}
#photosView .ph-hero .phh-cta{position:relative;z-index:1;margin-left:auto;display:flex;gap:10px}
#photosView .phh-btn{height:38px;padding:0 16px;border-radius:999px;font-size:13px;font-weight:800;cursor:pointer;border:0;display:inline-flex;align-items:center;gap:7px;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
#photosView .phh-btn.solid{background:#fff;color:#1f6f4e;box-shadow:0 8px 20px -8px rgba(0,0,0,.4)}
#photosView .phh-btn.solid:hover{transform:translateY(-1px);box-shadow:0 11px 22px -8px rgba(0,0,0,.45)}
#photosView .phh-btn.glass{background:rgba(255,255,255,.18);color:#fff;border:.5px solid rgba(255,255,255,.3)}

/* filter chips */
#photosView .ph-filters{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:18px}
#photosView .ph-fchip{height:32px;padding:0 13px;border-radius:999px;font-size:12.5px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px;background:var(--card-bg);color:var(--text-secondary);border:.5px solid var(--chrome-border);box-shadow:var(--shadow-e1);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast),color var(--motion-fast),background var(--motion-fast)}
#photosView .ph-fchip:hover{transform:translateY(-1px);box-shadow:var(--shadow-e2);color:var(--text-primary)}
#photosView .ph-fchip.on{background:color-mix(in srgb,var(--app-accent) 14%,var(--card-bg));color:var(--app-accent);border-color:transparent}
#photosView .ph-fcount{font-size:11px;font-weight:800;opacity:.7;font-variant-numeric:tabular-nums}
#photosView .ph-fdiv{width:1px;height:20px;background:var(--chrome-border);margin:0 3px}
#photosView .ph-fspacer{flex:1}
/* P5 (b) — search + date-range row */
#photosView .ph-searchrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
#photosView .ph-searchbox{position:relative;flex:1;min-width:220px;max-width:420px}
#photosView .ph-search-ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;fill:none;stroke:var(--text-muted);stroke-width:2;pointer-events:none}
#photosView .ph-search-in{width:100%;height:36px;padding:0 12px 0 34px;border-radius:999px;border:.5px solid var(--chrome-border);background:var(--card-bg);color:var(--text-primary);font-size:13px;outline:none;box-shadow:var(--shadow-e1);transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
#photosView .ph-search-in:focus{border-color:color-mix(in srgb,var(--app-accent) 50%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 14%,transparent)}
#photosView .ph-daterange{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--text-secondary)}
#photosView .ph-date-in{height:34px;padding:0 9px;border-radius:10px;border:.5px solid var(--chrome-border);background:var(--card-bg);color:var(--text-primary);font-size:12.5px;outline:none}
#photosView .ph-date-in:focus{border-color:color-mix(in srgb,var(--app-accent) 50%,transparent)}
#photosView .ph-export{color:var(--app-accent);border-color:color-mix(in srgb,var(--app-accent) 28%,transparent)}
#photosView .ph-clearall{color:var(--danger,#d0463b)}
/* P5 (b) — tag-kind badge inside a multi-select tag chip */
#photosView .ph-tagkind{font-size:8.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;padding:1px 5px;border-radius:999px;color:#fff}
#photosView .ph-tagkind-trade{background:#3b82f6}#photosView .ph-tagkind-material{background:#8b5cf6}#photosView .ph-tagkind-phase{background:#10b981}#photosView .ph-tagkind-scene{background:#64748b}
#photosView .ph-tradechip{text-transform:capitalize}
#photosView .ph-nr-clear{background:none;border:none;color:var(--app-accent);font:inherit;font-weight:700;cursor:pointer;padding:0;text-decoration:underline}

/* P5-D1 — suggested before/after series panel (floating .rt-panel on the matte, rounded, no edge strips) */
#photosView .phss-wrap{margin:0 0 18px;border-radius:18px;padding:16px 18px;background:color-mix(in srgb,var(--app-accent) 6%,var(--card-bg));border:.5px solid color-mix(in srgb,var(--app-accent) 22%,var(--chrome-border));box-shadow:var(--shadow-e2)}
#photosView .phss-head{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:800;color:var(--text-primary);margin-bottom:13px;letter-spacing:-.01em}
#photosView .phss-spark{font-size:15px}
#photosView .phss-hint{font-size:11.5px;font-weight:600;color:var(--text-muted);margin-left:auto}
#photosView .phss-list{display:flex;flex-direction:column;gap:9px}
/* 2026-06-20 — series-suggestion card shares the unified tile material (surface-grad +
   specular --bevel-top + spring press), with a hover bloom + active-scale so it reads
   as the same pressable surface family as the photo tiles + file cards. */
#photosView .phss-card{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-radius:14px;padding:11px 14px;background:var(--surface-grad,var(--card-bg));border:.5px solid rgba(0,0,0,.05);box-shadow:var(--bevel-top),var(--shadow-e1);transition:box-shadow var(--motion-base),transform var(--motion-fast) var(--ease-spring),background var(--motion-base)}
#photosView .phss-card:hover{box-shadow:var(--bevel-top),var(--shadow-e3),var(--glow-accent-soft);transform:translateY(-3px) scale(1.006);background:var(--surface-grad-hover,var(--surface-grad,var(--card-bg)))}
#photosView .phss-card:active{transform:translateY(-1px) scale(.985);box-shadow:var(--bevel-top),var(--shadow-e1)}
#photosView .phss-card.phss-busy{opacity:.55;pointer-events:none}
#photosView .phss-info{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
#photosView .phss-thumbs{display:flex;align-items:center}
#photosView .phss-thumb{width:30px;height:30px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;background:color-mix(in srgb,var(--app-accent) 70%,#555);border:2px solid var(--card-bg);margin-left:-8px;box-shadow:var(--shadow-e1)}
#photosView .phss-thumb:first-child{margin-left:0}
#photosView .phss-thumb-img{background-size:cover;background-position:center;background-repeat:no-repeat}
#photosView .phss-more{font-size:11px;font-weight:800;color:var(--text-secondary);margin-left:6px;font-variant-numeric:tabular-nums}
#photosView .phss-meta{min-width:0}
#photosView .phss-title{font-size:13px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#photosView .phss-sub{font-size:11.5px;font-weight:600;color:var(--text-muted);margin-top:1px}
#photosView .phss-acts{display:flex;gap:8px;margin-left:auto}
#photosView .phss-btn{height:32px;padding:0 14px;border-radius:999px;font-size:12.5px;font-weight:800;cursor:pointer;border:.5px solid var(--chrome-border);background:var(--card-bg);color:var(--text-secondary);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast),color var(--motion-fast)}
#photosView .phss-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-e2);color:var(--text-primary)}
#photosView .phss-btn.primary{background:var(--app-accent);color:var(--on-accent,#fff);border-color:transparent}
#photosView .phss-btn.primary:hover{box-shadow:0 8px 18px -8px color-mix(in srgb,var(--app-accent) 60%,transparent)}
@media (max-width:560px){#photosView .phss-acts{margin-left:0;width:100%}#photosView .phss-btn{flex:1}}

/* day group */
#photosView .ph-group{margin-bottom:26px}
#photosView .ph-ghead{display:flex;align-items:center;gap:10px;margin-bottom:13px}
#photosView .ph-gtitle{font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary)}
#photosView .ph-gsub{font-size:12px;color:var(--text-muted);font-weight:600}
#photosView .ph-gline{flex:1;height:.5px;background:var(--chrome-border)}

/* masonry-ish grid + tiles (real card material, G6) */
#photosView .ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
#photosView .ph-tile{position:relative;border-radius:14px;overflow:hidden;cursor:pointer;aspect-ratio:4/3;box-shadow:var(--shadow-e1);border:.5px solid rgba(0,0,0,.06);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast);background:var(--surface-2)}
#photosView .ph-tile::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:4;pointer-events:none;box-shadow:var(--bevel-edge),inset 0 0 0 .5px rgba(255,255,255,.10)}
/* 2026-06-20 — specular bloom on hover: a slight scale + accent glow halo (matches the
   file-card / dash-photo-card bloom) so the photo tiles lift as a real lit pane. */
#photosView .ph-tile:hover{transform:translateY(-3px) scale(1.012);box-shadow:var(--shadow-e3),var(--glow-accent-soft)}
#photosView .ph-tile:active{transform:translateY(-1px) scale(.985);box-shadow:var(--shadow-e2)}
#photosView .ph-img-real{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#photosView .ph-img-fallback{position:absolute;inset:0;background:linear-gradient(160deg,var(--surface-3),var(--surface-2))}
#photosView .ph-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.55) 100%);z-index:1}
#photosView .ph-corner{position:absolute;top:9px;left:9px;z-index:3;display:flex;gap:5px}
#photosView .ph-link{width:22px;height:22px;border-radius:999px;display:grid;place-items:center;font-size:11px;color:#fff;backdrop-filter:blur(6px);background:rgba(0,0,0,.34);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.22)}
#photosView .ph-link .ic{width:12px;height:12px}
#photosView .phss-spark .ic{width:14px;height:14px}
#photosView .ph-awaiting .pa-ico .ic{color:var(--app-accent)}
#photosView .ph-cap{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;z-index:2;color:#fff;display:flex;align-items:center;gap:8px}
#photosView .ph-pcdot{width:9px;height:9px;border-radius:999px;flex-shrink:0;background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.45)}
#photosView .ph-cap-txt{min-width:0}
#photosView .ph-pcn{display:block;font-size:12.5px;font-weight:800;letter-spacing:-.01em;text-shadow:0 1px 3px rgba(0,0,0,.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#photosView .ph-pcm{display:block;font-size:10.5px;font-weight:700;color:rgba(255,255,255,.85);margin-top:1px;text-shadow:0 1px 2px rgba(0,0,0,.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* collapsed "awaiting first photos" affordance */
#photosView .ph-awaiting{display:flex;align-items:center;gap:13px;width:100%;text-align:left;border-radius:14px;padding:14px 18px;margin-top:6px;background:var(--card-bg);box-shadow:var(--bevel-top),var(--shadow-e1);border:.5px solid rgba(0,0,0,.05)}
#photosView .ph-awaiting .pa-ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:18px;flex-shrink:0;background:color-mix(in srgb,var(--app-accent) 12%,var(--card-bg))}
#photosView .ph-awaiting .pa-t{display:block;font-size:13.5px;font-weight:800;color:var(--text-primary)}
#photosView .ph-awaiting .pa-s{display:block;font-size:11.5px;color:var(--text-muted);font-weight:600;margin-top:1px}

/* no-results (filtered to empty) */
#photosView .ph-noresults{text-align:center;padding:48px 24px;color:var(--text-muted)}
#photosView .ph-nr-ico{font-size:30px;opacity:.6;margin-bottom:8px}
#photosView .ph-nr-t{font-size:15px;font-weight:800;color:var(--text-primary)}
#photosView .ph-nr-s{font-size:12.5px;margin-top:3px}

@media (max-width:640px){
  #photosView .ph-hero{flex-direction:column;align-items:stretch;gap:14px}
  #photosView .ph-hero .phh-stat{padding-left:0;border-left:0}
  #photosView .ph-hero .phh-cta{margin-left:0}
  #photosView .ph-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}

/* ============================================================================
   PROJECT PHOTOS (full-page tab) — Pass-2 (2026-06-04). Faithful port of
   42-project-photos.html grouped gallery. Scoped to #photosWorkspaceWrap.
   Honest data: count hero + tag-chip filter + date groups + square grid.
   Per-group STAGE pill omitted (no per-photo stage_id). geo/star omitted.
   ============================================================================ */
#photosWorkspaceWrap .ph-gallery{display:block}
/* cont.34 — the no-photos empty invite shouldn't be a cavernous void: a right-sized crafted card */
#photosWorkspaceWrap .ph-gallery > .empty{padding:34px 24px;max-width:520px;margin:8px auto}
#photosWorkspaceWrap .ph-gallery > .empty .em-ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:color-mix(in srgb,var(--app-accent) 12%,var(--card-bg));box-shadow:var(--bevel-top),var(--shadow-e1);margin-bottom:4px}
#photosWorkspaceWrap .ph-gallery > .empty .em-ico svg{width:26px;height:26px;stroke:var(--app-accent);fill:none}
#photosWorkspaceWrap .photero{display:flex;align-items:center;gap:20px;background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 8%,var(--card-bg)),var(--card-bg) 70%);
  border-radius:22px;padding:20px 24px;box-shadow:var(--shadow-e2);border:.5px solid color-mix(in srgb,var(--app-accent) 6%,rgba(0,0,0,.05));margin-bottom:16px}
#photosWorkspaceWrap .photero .pv{text-align:center}
#photosWorkspaceWrap .photero .pv .pn{font-size:58px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:.95;
  background:linear-gradient(165deg,color-mix(in srgb,var(--app-accent) 88%,#000),var(--app-accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#photosWorkspaceWrap .photero .pv .pl{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-top:5px}
#photosWorkspaceWrap .photero .pdiv{width:.5px;height:54px;background:var(--border)}
#photosWorkspaceWrap .photero .pmini{display:flex;gap:18px}
#photosWorkspaceWrap .photero .pmini .pm-n{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text-primary)}
#photosWorkspaceWrap .photero .pmini .pm-l{font-size:11px;font-weight:700;color:var(--text-secondary)}
#photosWorkspaceWrap .photero .ph-spacer{flex:1}
/* metric-door (the 248 count) — rounded fallback per the no-hard-corner rule */
#photosWorkspaceWrap .photero .pv.metric-door{border-radius:14px;padding:6px 14px}

/* phase/tag filter chips */
#photosWorkspaceWrap .phasebar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
#photosWorkspaceWrap .pchip{font-size:12px;font-weight:700;padding:7px 13px;border-radius:999px;border:.5px solid var(--chrome-border);background:var(--card-bg);color:var(--text-secondary);cursor:pointer;display:inline-flex;align-items:center;gap:7px;box-shadow:var(--shadow-e1);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast),color var(--motion-fast),background var(--motion-fast)}
#photosWorkspaceWrap .pchip:hover{transform:translateY(-1px);box-shadow:var(--shadow-e2);color:var(--text-primary)}
#photosWorkspaceWrap .pchip .pc-n{font-weight:800;color:var(--text-muted);font-variant-numeric:tabular-nums}
#photosWorkspaceWrap .pchip.on{border-color:transparent;background:color-mix(in srgb,var(--app-accent) 13%,var(--card-bg));color:var(--app-accent)}
#photosWorkspaceWrap .pchip.pchip-issue{color:var(--color-error)}
#photosWorkspaceWrap .pchip.pchip-issue.on{background:color-mix(in srgb,var(--color-error) 13%,var(--card-bg));color:var(--color-error)}

/* gallery groups + square contact-sheet grid */
#photosWorkspaceWrap .pgroup{margin-bottom:22px}
#photosWorkspaceWrap .pgroup-head{display:flex;align-items:center;gap:10px;margin-bottom:11px;flex-wrap:wrap}
#photosWorkspaceWrap .pgroup-head .pg-date{font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary)}
#photosWorkspaceWrap .pgroup-head .pg-n{font-size:12px;font-weight:700;color:var(--text-muted)}
#photosWorkspaceWrap .pgroup-head .pg-by{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--text-secondary)}
#photosWorkspaceWrap .pgroup-head .pg-by .av{width:22px;height:22px;border-radius:999px;display:grid;place-items:center;color:#fff;font-size:9px;font-weight:800;box-shadow:0 0 0 2px var(--card-bg);background:linear-gradient(160deg,#48c774,#248a3d)}
#photosWorkspaceWrap .pgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
/* 📒 V161 (row 26) — a 1-2 photo day renders FEATURED tiles instead of two thumbnails
   pinned into a 5-col row (was: photos left, right half void); day-head connectivity chips */
#photosWorkspaceWrap .pgrid.pgrid-few{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));max-width:720px}
#photosWorkspaceWrap .pg-stage{font-size:11px;font-weight:700;color:var(--color-success);background:color-mix(in srgb,var(--color-success) 10%,transparent);padding:3px 10px;border-radius:999px;cursor:pointer}
#photosWorkspaceWrap .pg-stage:hover{background:color-mix(in srgb,var(--color-success) 18%,transparent)}
#photosWorkspaceWrap .pg-dl{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 9%,transparent);padding:3px 10px;border-radius:999px;cursor:pointer}
#photosWorkspaceWrap .pg-dl:hover{background:color-mix(in srgb,var(--app-accent) 16%,transparent)}
#photosWorkspaceWrap .pg-dl .ic{width:11px;height:11px}
#photosWorkspaceWrap .ph-zero{display:flex;flex-direction:column}
#photosWorkspaceWrap .ph-gallery[data-pfv-fill]{display:flex;flex-direction:column}
#photosWorkspaceWrap .ph-gallery[data-pfv-fill] .ph-zero{flex:1}
#photosWorkspaceWrap .ph-gallery[data-pfv-fill] .ph-zero .rt-emptyplus{flex:1}
#photosWorkspaceWrap .pimg{aspect-ratio:1;border-radius:14px;overflow:hidden;position:relative;cursor:pointer;box-shadow:var(--shadow-e1);border:.5px solid rgba(0,0,0,.06);background:var(--surface-2);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
#photosWorkspaceWrap .pimg::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 .5px rgba(0,0,0,.06)}
#photosWorkspaceWrap .pimg:hover{transform:translateY(-3px) scale(1.02);box-shadow:var(--shadow-e3);z-index:1}
#photosWorkspaceWrap .pimg:active{transform:translateY(-1px) scale(.99)}
#photosWorkspaceWrap .pimg::after{content:"";position:absolute;top:8px;right:9px;z-index:3;width:14px;height:14px;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center/contain no-repeat;opacity:0;transition:opacity var(--motion-fast);filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));pointer-events:none}
#photosWorkspaceWrap .pimg:hover::after{opacity:1}
#photosWorkspaceWrap .pimg .pi-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#photosWorkspaceWrap .pimg .pi-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 9px 7px;font-size:10px;font-weight:700;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.55));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#photosWorkspaceWrap .pimg .pi-tag{position:absolute;top:8px;left:8px;z-index:3;font-size:9px;font-weight:800;padding:2px 7px;border-radius:999px;background:rgba(0,0,0,.45);color:#fff;backdrop-filter:blur(4px)}
#photosWorkspaceWrap .pimg .pi-tag-issue{background:rgba(192,57,43,.85)}
/* P4 — geotagged tile badge: a quiet location glyph, bottom-right so it never collides with the
   top-left time tag or top-right select check. Glass-dark chip matching the .pi-tag family. */
#photosWorkspaceWrap .pimg .pi-geo{position:absolute;bottom:8px;right:8px;z-index:3;width:20px;height:20px;border-radius:999px;display:grid;place-items:center;background:rgba(0,0,0,.45);color:#fff;backdrop-filter:blur(4px)}
#photosWorkspaceWrap .pimg .pi-geo .ic{width:11px;height:11px}
/* 2026-06-14 Photo polish — before/after SERIES badge (top-right; hidden in select-mode so it
   never collides with the select check). Accent-tinted glass chip so a paired shot reads as
   part of a set right in the gallery. */
#photosWorkspaceWrap .pimg .pi-series{position:absolute;top:8px;right:8px;z-index:3;display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:800;letter-spacing:.02em;padding:2px 7px;border-radius:999px;background:color-mix(in srgb,var(--app-accent) 82%,#000);color:#fff;backdrop-filter:blur(4px);box-shadow:0 1px 4px rgba(0,0,0,.25)}
#photosWorkspaceWrap .pimg .pi-series .ic{width:10px;height:10px}
#photosWorkspaceWrap .ph-gallery.select-mode .pimg .pi-series{display:none}
/* P4 — geotagged count on the day-group header (quiet, accent-toned, matches .pg-n). */
.pgroup-head .pg-geo{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;color:var(--app-accent);margin-left:8px}
/* F2 #7 — Grid/Map view segmented toggle (in .ph-actions). */
#photosWorkspaceWrap .ph-viewseg{display:inline-flex;border-radius:999px;background:var(--chrome-bg,rgba(120,120,128,.12));padding:2px;gap:2px}
#photosWorkspaceWrap .ph-viewseg-btn{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border:none;background:transparent;border-radius:999px;font-size:12px;font-weight:700;color:var(--text-secondary);cursor:pointer;transition:background var(--motion-fast,140ms),color var(--motion-fast,140ms)}
#photosWorkspaceWrap .ph-viewseg-btn .ic{width:13px;height:13px}
#photosWorkspaceWrap .ph-viewseg-btn.on{background:var(--card-bg,#fff);color:var(--app-accent);box-shadow:var(--shadow-e1,0 1px 3px rgba(0,0,0,.12))}
#photosWorkspaceWrap .ph-viewseg-btn:not(.on):hover{color:var(--text-primary)}
/* F2 #7 — geotagged photo map (no-dependency static pin plot on a floating panel). */
#photosWorkspaceWrap .ph-map-wrap{margin-top:14px;padding:14px;border-radius:18px}
#photosWorkspaceWrap .ph-map-static{position:relative;width:100%;aspect-ratio:16/9;min-height:280px;border-radius:14px;overflow:hidden;background:linear-gradient(145deg,color-mix(in srgb,var(--app-accent) 8%,var(--surface,#f2f2f7)),var(--surface,#f2f2f7))}
#photosWorkspaceWrap .ph-map-grid{position:absolute;inset:0;background-image:linear-gradient(color-mix(in srgb,var(--text-muted) 14%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--text-muted) 14%,transparent) 1px,transparent 1px);background-size:9% 9%;opacity:.5}
#photosWorkspaceWrap .ph-map-pin{position:absolute;transform:translate(-50%,-100%);border:none;background:transparent;padding:0;cursor:pointer;z-index:2;transition:transform var(--motion-fast,140ms) var(--ease-spring,ease)}
#photosWorkspaceWrap .ph-map-pin:hover,#photosWorkspaceWrap .ph-map-pin:focus-visible{transform:translate(-50%,-100%) scale(1.12);z-index:5;outline:none}
#photosWorkspaceWrap .ph-map-pin-thumb{position:absolute;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%) scale(0);transform-origin:bottom center;width:84px;height:64px;object-fit:cover;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.3);border:2px solid #fff;transition:transform var(--motion-fast,140ms) var(--ease-spring,ease);pointer-events:none}
#photosWorkspaceWrap .ph-map-pin:hover .ph-map-pin-thumb,#photosWorkspaceWrap .ph-map-pin:focus-visible .ph-map-pin-thumb{transform:translateX(-50%) scale(1)}
#photosWorkspaceWrap .ph-map-pin-ic{width:30px;height:30px;color:var(--app-accent);filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
#photosWorkspaceWrap .ph-map-hint{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:11.5px;color:var(--text-muted)}
#photosWorkspaceWrap .ph-map-hint .ic{width:13px;height:13px}
@media (prefers-reduced-motion:reduce){#photosWorkspaceWrap .ph-map-pin,#photosWorkspaceWrap .ph-map-pin-thumb{transition:none}}
.pgroup-head .pg-geo .ic{width:12px;height:12px}
@media (max-width:1100px){ #photosWorkspaceWrap .pgrid{grid-template-columns:repeat(4,1fr)} }
@media (max-width:820px){ #photosWorkspaceWrap .pgrid{grid-template-columns:repeat(3,1fr)} #photosWorkspaceWrap .photero{flex-wrap:wrap} }
@media (max-width:520px){ #photosWorkspaceWrap .pgrid{grid-template-columns:repeat(2,1fr)} }
/* pass-4 📘 — Photos: tag/issue icons inline, interactive hero doors, select-mode + bulk bar */
#photosWorkspaceWrap .pchip .ic{width:13px;height:13px}
#photosWorkspaceWrap .pimg .pi-tag-issue .ic{width:10px;height:10px;vertical-align:-1px;margin-right:2px}
#photosWorkspaceWrap .photero .pv.metric-door{border:none;background:transparent;cursor:pointer;font:inherit}
#photosWorkspaceWrap .photero .pv.metric-door:hover{transform:translateY(-2px)}
#photosWorkspaceWrap .photero .pm-issues{border:none;background:transparent;cursor:pointer;font:inherit;padding:4px 8px;border-radius:10px;text-align:center;transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
#photosWorkspaceWrap .photero .pm-issues:hover:not([disabled]){background:color-mix(in srgb,var(--color-error) 9%,transparent);transform:translateY(-1px)}
#photosWorkspaceWrap .photero .pm-issues.on{background:color-mix(in srgb,var(--color-error) 13%,var(--card-bg));box-shadow:var(--shadow-e1)}
#photosWorkspaceWrap .photero .pm-issues[disabled]{cursor:default;opacity:.5}
#photosWorkspaceWrap .photero .ph-actions{display:flex;align-items:center;gap:9px}
#photosWorkspaceWrap .ph-tool{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;padding:8px 13px;border-radius:10px;border:.5px solid var(--chrome-border);background:var(--card-bg);color:var(--text-secondary);cursor:pointer;box-shadow:var(--shadow-e1);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast),color var(--motion-fast),background var(--motion-fast)}
#photosWorkspaceWrap .ph-tool .ic{width:15px;height:15px}
#photosWorkspaceWrap .ph-tool:hover:not([disabled]){transform:translateY(-1px);box-shadow:var(--shadow-e2);color:var(--text-primary)}
#photosWorkspaceWrap .ph-tool.on{border-color:transparent;background:color-mix(in srgb,var(--app-accent) 13%,var(--card-bg));color:var(--app-accent)}
#photosWorkspaceWrap .ph-tool.danger:hover:not([disabled]){color:var(--color-error);border-color:color-mix(in srgb,var(--color-error) 40%,transparent)}
#photosWorkspaceWrap .ph-tool[disabled]{opacity:.45;cursor:default}
#photosWorkspaceWrap .btn-primary .ic{width:15px;height:15px;vertical-align:-3px;margin-right:2px}
#photosWorkspaceWrap .ph-selbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;padding:10px 12px;border-radius:var(--radius-lg);background:var(--lg-bg);backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract);box-shadow:var(--lg-edge),var(--shadow-e2);border:.5px solid var(--chrome-border)}
#photosWorkspaceWrap .ph-selbar .ph-spacer{flex:1}
#photosWorkspaceWrap .ph-selcount{font-size:12.5px;font-weight:800;color:var(--text-primary);font-variant-numeric:tabular-nums}
#photosWorkspaceWrap .pimg .pi-check{position:absolute;top:8px;right:8px;z-index:4;width:24px;height:24px;border-radius:999px;display:grid;place-items:center;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7);transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
#photosWorkspaceWrap .pimg .pi-check .ic{width:14px;height:14px;color:#fff;opacity:0;transition:opacity var(--motion-fast)}
#photosWorkspaceWrap .pimg .pi-check.on{background:var(--app-accent);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.9),var(--shadow-e2)}
#photosWorkspaceWrap .pimg .pi-check.on .ic{opacity:1}
#photosWorkspaceWrap .ph-gallery.select-mode .pimg{cursor:pointer}
#photosWorkspaceWrap .pimg.sel{box-shadow:0 0 0 3px var(--app-accent),var(--shadow-e2)}
#photosWorkspaceWrap .pimg.sel:hover{transform:translateY(-2px) scale(1.01)}

/* ── Files page (redesign 2026-05-26 📘) ── */
/* The app shell is height:100%/overflow:hidden (html+body); each view is a flex
   child that scrolls INTERNALLY. .files-page must own its scroll like every
   sibling view (board-wrap/list-wrap/photos-page = flex:1 1 0% + overflow-y:auto)
   — otherwise the taller redesigned cards overflow the fixed body and clip with
   no scroll (the touch "can't scroll" bug). */
/* 2026-05-28 📘 — Files page: page itself NO LONGER scrolls. The grid inside
   the main column is the only scrolling region (`.files-page-grid`). This
   means header / sidebar / preview / tags stay locked in place forever, and
   only the file cards move when the user scrolls. Apple-Finder model. */
.files-page{flex:1 1 0%;min-height:0;overflow:hidden;padding:12px;width:100%;margin:0 auto;box-sizing:border-box;display:flex;flex-direction:column}
/* Confident header zone: headline (title + live subtitle) on the left,
   the frosted command bar on the right. Wraps gracefully on narrow widths. */
/* 2026-05-28 📘 — Files page header. Page doesn't scroll anymore (the grid
   inside .files-main is the only scroll region), so we no longer need sticky
   positioning — the header naturally stays at the top of the non-scrolling
   page layout. */
/* pass-3 (_STANDARD.md A.2): header lifted into a floating glass chrome panel (was loose on the matte). */
.files-page-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:12px;padding:11px 14px;gap:14px 16px;flex-wrap:wrap;flex-shrink:0;background:var(--lg-bg);backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract);box-shadow:var(--lg-edge),var(--shadow-e2);border:.5px solid var(--chrome-border);border-radius:var(--radius-lg)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.files-page-header{background:var(--card-bg)}}
.files-page-headline{display:flex;flex-direction:column;gap:2px;min-width:0}
.files-page-title{font-size:26px;font-weight:800;color:var(--on-app-bg);letter-spacing:-.6px;margin:0;line-height:1.05}
.files-page-subtitle{font-size:12.5px;font-weight:500;color:color-mix(in srgb,var(--on-app-bg) 62%,transparent);letter-spacing:-.1px;font-variant-numeric:tabular-nums;min-height:16px}
.files-page-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Search — frosted field with a leading glyph */
.files-searchwrap{position:relative;display:inline-flex;align-items:center}
.files-search-ico{position:absolute;left:10px;width:13px;height:13px;color:var(--text-muted);pointer-events:none}
.files-search{height:32px;padding:0 12px 0 30px;min-width:208px;background:var(--surface-2);border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);color:var(--text-primary);font-size:12.5px;font-weight:500;outline:none;font-family:inherit;letter-spacing:-.05px;transition:border-color var(--motion-fast),box-shadow var(--motion-fast),background-color var(--motion-fast)}
.files-search::placeholder{color:var(--text-muted)}
.files-search:focus{border-color:var(--app-accent);background:var(--card-bg);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 15%,transparent)}
/* glass selects — the .glass-select system styles the open POPOVER, but the
   CLOSED <select> still needs its own frosted closed-state (else the native OS
   control paints white on dark themes). Match the command-bar tool pills. */
.files-project-select,.files-category-select{height:32px;-webkit-appearance:none;appearance:none;padding:0 28px 0 12px;background:var(--surface-2);border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);color:var(--text-primary);font-size:12.5px;font-weight:600;letter-spacing:-.05px;font-family:inherit;outline:none;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.1);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238e8e93'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;transition:background-color var(--motion-fast),border-color var(--motion-fast)}
.files-project-select:hover,.files-category-select:hover{background-color:var(--surface-3);border-color:var(--chrome-border-strong)}
.files-project-select:focus,.files-category-select:focus{border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 15%,transparent)}
/* Tool buttons (Sort, ⋯) — frosted pills matching the tracker pill family */
.files-tool-btn{height:32px;padding:0 12px;display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:0.5px solid var(--chrome-border);border-radius:var(--radius-pill);color:var(--text-primary);font-size:12.5px;font-weight:600;letter-spacing:-.05px;cursor:pointer;font-family:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.1);transition:background var(--motion-fast),border-color var(--motion-fast),transform var(--motion-fast)}
.files-tool-btn:hover{background:var(--surface-3);border-color:var(--chrome-border-strong)}
.files-tool-btn:active{transform:scale(.96)}
.files-tool-btn.active{background:color-mix(in srgb,var(--app-accent) 14%,transparent);border-color:color-mix(in srgb,var(--app-accent) 40%,transparent);color:var(--app-accent)}
.files-tool-btn .vb-ico{width:13px;height:13px}
.files-tool-chev{width:9px;height:9px;color:var(--text-muted);margin-left:-1px}
.files-tool-btn.active .files-tool-chev{color:var(--app-accent)}
.files-overflow-ico{width:15px;height:15px}
#filesOverflowBtn{padding:0 9px}
/* Grid/List view toggle — segmented frosted control */
.files-viewtoggle{display:inline-flex;background:var(--surface-2);border:0.5px solid var(--chrome-border);border-radius:var(--radius-pill);padding:2px;gap:2px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.files-vt-btn{width:30px;height:26px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;border-radius:var(--radius-pill);color:var(--text-muted);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast)}
.files-vt-btn svg{width:14px;height:14px}
.files-vt-btn:hover{color:var(--text-primary)}
.files-vt-btn:active{transform:scale(.92)}
.files-vt-btn.active{background:var(--card-bg);color:var(--app-accent);box-shadow:var(--shadow-e1)}
/* #files — the size-cycle button carries a tiny S/M/L label beside its icon.
   #23 redesign: the size control now lives INSIDE the view-toggle segment (one
   cohesive control) — a hairline divides the mode pair from the density cycle. */
/* #31 — fixed min-width so the S/M/L label swap never changes the button width
   (a subtle contributor to the header reflow on size cycle). */
.files-vt-size{width:auto;min-width:44px;justify-content:center;gap:3px;padding:0 7px}
.files-vt-size-lbl{font-size:10px;font-weight:800;letter-spacing:.02em;width:8px;text-align:center}
.files-viewtoggle .files-vt-size{border-left:.5px solid var(--chrome-border);border-radius:0 var(--radius-pill) var(--radius-pill) 0;margin-left:2px;padding-left:8px}
/* #23 redesign — toolbar structure: cluster related controls, separate groups
   with a hairline so the bar reads as organized segments, not a flat pill strip. */
.files-ctl-group{display:inline-flex;align-items:center;gap:8px}
.files-ctl-sep{width:.5px;align-self:stretch;min-height:22px;background:linear-gradient(180deg,transparent,var(--chrome-border) 22%,var(--chrome-border) 78%,transparent);margin:0 1px;flex-shrink:0}
@media (max-width:760px){.files-ctl-sep{display:none}}
/* Joined "create" segment — New Doc + New Sheet read as one create affordance. */
.files-create-seg{display:inline-flex;align-items:center;background:var(--surface-2);border:.5px solid var(--chrome-border);border-radius:var(--radius-pill);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);overflow:hidden}
.files-create-seg .files-tool-btn{background:transparent;border:none;border-radius:0;box-shadow:none;height:32px}
.files-create-seg .files-tool-btn+.files-tool-btn{border-left:.5px solid var(--chrome-border)}
.files-create-seg .files-tool-btn:hover{background:var(--surface-3)}
/* Upload — the single primary pill */
.files-upload-btn{height:32px;padding:0 16px;background:var(--app-accent);color:var(--on-accent);border:none;border-radius:var(--radius-md);font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;letter-spacing:-.05px;display:inline-flex;align-items:center;gap:6px;transition:filter var(--motion-fast),transform var(--motion-fast);box-shadow:0 1px 3px color-mix(in srgb,var(--app-accent) 30%,transparent),inset 0 1px 0 rgba(255,255,255,.22)}
.files-upload-btn:hover{filter:brightness(1.06)}
.files-upload-btn:active{transform:scale(.97)}
.files-upload-btn .vb-ico{width:12px;height:12px}
/* Files command-bar overflow popover rows (rides .rt-glass-pop) */
.files-pop-item{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;color:var(--text-primary);cursor:pointer;transition:background var(--motion-fast);white-space:nowrap}
.files-pop-item:hover{background:color-mix(in srgb,var(--text-primary) 8%,transparent)}
.files-pop-item:active{background:color-mix(in srgb,var(--text-primary) 13%,transparent)}
.files-pop-item.sel{color:var(--app-accent);font-weight:600}
.files-pop-item svg{width:14px;height:14px;flex-shrink:0;color:var(--text-muted)}
.files-pop-item.sel svg{color:var(--app-accent)}
.files-pop-item .fp-check{margin-left:auto;width:13px;height:13px;opacity:0}
.files-pop-item.sel .fp-check{opacity:1}
.files-pop-header{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);padding:6px 11px 4px}
.files-pop-sep{height:.5px;background:var(--chrome-border);margin:4px 6px}
.files-page-stats{display:none}
/* G6: 2-pane Files page (sidebar + main) */
/* 2026-05-28 📘 — 2pane grid fills the remaining vertical space below the
   header. `align-items:stretch` so sidebar + main + preview each get the
   full row height. Min-height:0 lets nested overflow:auto kick in. */
.files-2pane{display:grid;grid-template-columns:240px 1fr;gap:14px;align-items:stretch;flex:1 1 0;min-height:0}
.files-2pane > .files-main{display:flex;flex-direction:column;min-height:0;min-width:0}
/* The RT-SD wrapper holds the file grid + project SD section. It's the
   scroll region — its child .files-rt-col flows naturally (no height
   constraint), grid sizes to its content, and this wrapper scrolls it. */
/* #31 — scrollbar-gutter:stable reserves the vertical-scrollbar track ALWAYS, so a
   size change that crosses the scroll threshold doesn't change content width →
   the header's flex-wrap controls never reflow → the top bar no longer "moves". */
.files-2pane > .files-main > .files-rt-sd-wrap{flex:1 1 0;min-height:0;overflow-y:auto;scrollbar-gutter:stable;-webkit-overflow-scrolling:touch}
/* 2026-06-08 — the file grid/list scroll region is a single RAISED surface (the
   .rt-panel-solid language): the chips (already elevated) sit ON it, with an even
   matte gap around it. Internal padding so chips don't touch the surface edge. */
.files-2pane > .files-main > .files-rt-sd-wrap{
  background:var(--card-bg);
  border-radius:var(--radius-lg);
  box-shadow:var(--lg-edge),var(--shadow-e2);
  border:.5px solid var(--chrome-border);
  padding:14px 16px;
  box-sizing:border-box;
}
@media (prefers-reduced-transparency:reduce){.files-2pane > .files-main > .files-rt-sd-wrap{background:var(--surface)}}
/* the grid's own outer padding is now redundant with the surface padding — trim it so
   the chips align to the surface inset, not double-padded. */
.files-rt-sd-wrap .files-page-grid{padding:2px 0 12px 0}
/* §4 split-view — when the preview pane is open, add a 3rd column. The pane is a
   glass chrome surface (floats above content). Desktop/iPad-landscape only; on
   phones/portrait the pane becomes a full overlay (see ≤640 + portrait rules). */
/* #35 — the preview column width is user-resizable via --files-pv-w (a drag handle on
   the pane's left edge sets + persists it). Falls back to the old 52% when unset. */
.files-2pane.has-preview{grid-template-columns:240px minmax(0,1fr) var(--files-pv-w, minmax(420px, 52%))}
/* #35 — resize grip on the preview pane's left edge (desktop/iPad only). */
.files-pv-resize{position:absolute;top:0;left:-6px;width:12px;height:100%;cursor:col-resize;z-index:6;display:flex;align-items:center;justify-content:center;touch-action:none}
.files-pv-resize::before{content:"";width:3px;height:34px;border-radius:2px;background:var(--chrome-border);transition:background var(--motion-fast)}
.files-pv-resize:hover::before,.files-pv-resize.dragging::before{background:var(--app-accent)}
@media (max-width:640px){.files-pv-resize{display:none}}
/* #35 — pop-out button in the preview head (smaller than the close, quiet). */
.files-pv-popout{width:24px;height:24px;background:transparent}
.files-pv-popout:hover{background:color-mix(in srgb,var(--text-primary) 10%,transparent)}
/* #35 — FLOATING preview: the pane detaches into a fixed, draggable, resizable window;
   its grid cell collapses so the file list reflows to full width behind it. */
.files-2pane.pv-floating.has-preview{grid-template-columns:240px minmax(0,1fr) 0}
.files-2pane.pv-floating .files-preview-pane{position:fixed;z-index:var(--z-modal,1250);box-shadow:0 24px 70px rgba(0,0,0,.34),var(--lg-edge);border-radius:var(--radius-lg);height:auto}
.files-2pane.pv-floating .files-pv-head{cursor:move;user-select:none}
@media (max-width:640px){.files-2pane.pv-floating .files-preview-pane{position:fixed;inset:0;width:auto!important;height:auto!important;left:0!important;top:0!important;border-radius:0}}
.files-preview-pane{display:none}
/* 2026-05-28 📘 — Preview pane fills the right column without ever overflowing
   the viewport bottom. Height comes from `--files-pane-h`, which JS measures
   from the grid cell's top in the viewport (no magic per-device offsets — works
   identically on desktop, iPad, and any Safari URL-bar state). Fallback to a
   conservative dvh-based value if JS hasn't set the var yet (e.g. first paint
   before _filesApplyPreviewLayout fires). */
.files-2pane.has-preview .files-preview-pane{
  display:flex;flex-direction:column;
  /* Pane fills its grid cell at full row height (grid align-items:stretch).
     Page doesn't scroll, so sticky positioning isn't needed. */
  height:100%;
  background:var(--frost-bg);backdrop-filter:var(--frost-blur);-webkit-backdrop-filter:var(--frost-blur);
  border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);
  box-shadow:var(--lg-edge), var(--shadow-e3);overflow:hidden;
}
@media (prefers-reduced-transparency: reduce){
  .files-2pane.has-preview .files-preview-pane{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}
}
.files-pv-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:0.5px solid var(--chrome-border);flex-shrink:0;background:color-mix(in srgb,var(--surface) 60%,transparent)}
.files-pv-title{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.files-pv-close{flex-shrink:0;width:26px;height:26px;border:0;background:color-mix(in srgb,var(--text-primary) 6%,transparent);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.files-pv-close:hover{background:color-mix(in srgb,var(--text-primary) 12%,transparent);color:var(--text-primary)}
.files-pv-close:active{transform:scale(.92)}
/* Pop-out button — expand the previewed file into the large in-page overlay. */
.files-pv-popout{flex-shrink:0;width:26px;height:26px;border:0;background:color-mix(in srgb,var(--text-primary) 6%,transparent);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.files-pv-popout:hover{background:color-mix(in srgb,var(--app-accent) 16%,transparent);color:var(--app-accent)}
.files-pv-popout:active{transform:scale(.92)}
/* 2026-05-28 📘 — Side-pane zoom controls (− / fit / +). Compact segmented
   pill in the pane head. Hidden for PDFs (which have their own toolbar) and
   for unsupported types. */
.files-pv-zoom{flex-shrink:0;display:inline-flex;align-items:center;gap:1px;background:color-mix(in srgb,var(--text-primary) 6%,transparent);border-radius:var(--radius-pill);padding:2px;height:26px}
.files-pv-zoom[hidden]{display:none}
.files-pv-zoom-btn,.files-pv-zoom-fit{border:0;background:transparent;color:var(--text-muted);cursor:pointer;font:inherit;font-weight:600;border-radius:var(--radius-pill);transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast) var(--ease-spring);display:inline-flex;align-items:center;justify-content:center}
.files-pv-zoom-btn{width:22px;height:22px;font-size:14px;line-height:1}
.files-pv-zoom-fit{height:22px;padding:0 8px;font-size:11px;font-variant-numeric:tabular-nums;min-width:46px;letter-spacing:.2px}
.files-pv-zoom-btn:hover,.files-pv-zoom-fit:hover{background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent)}
.files-pv-zoom-btn:active,.files-pv-zoom-fit:active{transform:scale(.94)}
/* Drag-mode toggle (hand icon) — same segmented pill, toggles `aria-pressed` */
.files-pv-pan-toggle{width:22px;height:22px;border:0;background:transparent;color:var(--text-muted);cursor:pointer;border-radius:var(--radius-pill);display:inline-flex;align-items:center;justify-content:center;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast) var(--ease-spring);margin-left:2px}
.files-pv-pan-toggle:hover{background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent)}
.files-pv-pan-toggle:active{transform:scale(.94)}
.files-pv-pan-toggle[aria-pressed="true"]{background:var(--app-accent);color:#fff}
/* V131.3 — flex:1 to claim the pane's remaining height; min-height floor so
   fit-to-height media (PDF/image) never collapse to a sliver when the meta panel
   is present (was the "tiny doc in a huge grey void" bug). */
.files-pv-body{flex:1 1 auto;min-height:240px;display:flex;align-items:center;justify-content:center;overflow:auto;background:color-mix(in srgb,var(--text-primary) 3%,transparent)}
.files-pv-body iframe,.files-pv-body .pdfv-host{width:100%;height:100%;border:0;background:#fff}
.files-pv-body img{max-width:100%;max-height:100%;object-fit:contain;display:block}
/* Document-like content (docx/xlsx tables, pre text, pptx) flows from the top-left
   and scrolls both ways to fit — auto-adjust to the content rather than center it. */
.files-pv-body:has(.files-docx-preview),.files-pv-body:has(.xlsxv-wrap),.files-pv-body:has(.pptxv-wrap),.files-pv-body:has(.pptxv-text),.files-pv-body:has(pre){align-items:stretch;justify-content:flex-start}
/* V131.3 — the PDF viewer + full-bleed HTML iframe must FILL the body (the
   default centering + the host's `height:100%` mis-resolving left it at a tiny
   natural height → the PDF `#pdfvScroll` collapsed to ~112px → fit-to-height
   made the page a sliver). Make the body a column flex so the host stretches
   vertically via flex:1 (deterministic, not %-height). Bare media (<img>/<video>)
   keeps the centered default. */
.files-pv-body:has(.pdfv-host),.files-pv-body:has(.files-html-frame){flex-direction:column;align-items:stretch;justify-content:flex-start}
.files-pv-body .pdfv-host{flex:1 1 0;min-height:0;height:auto;width:100%}
/* 2026-05-28 📘 — HTML iframe is sized in JS to 1024×(paneH/fit) and visually
   shrunk by transform:scale(fit). The layout box stays 1024px wide which would
   normally trigger a horizontal scrollbar — clip it instead, since the scaled
   visual already fits the pane width. The iframe handles its OWN vertical
   scroll for tall content (native iframe behavior). */
/* HTML preview body: ALWAYS overflow:hidden. JS owns all scroll/pan via the
   transform on the iframe element (wheel + touch + drag all feed _filesPvZoom
   tx/ty). Native scroll would fight our drag handler on desktop, so we never
   enable it for the HTML preview. */
.files-pv-body:has(.files-html-frame){overflow:hidden;position:relative}
.files-pv-body .files-html-frame{flex:none;align-self:flex-start}
/* 2026-05-28 📘 — Drag-pan shield: overlays the iframe so pointer events
   reach the pane body (iframes natively capture pointer events, blocking
   drag). Only blocks input when the body has .files-pv-pannable (zoom > fit);
   otherwise pointer-events:none lets the iframe scroll normally. */
/* Iframe shield: always covers the iframe so wheel/touch/mouse events hit
   the body (where our gesture handlers live) instead of being eaten by the
   iframe. Pointer-events:auto AND touch-action:none, always — there's no
   "let iframe receive events" mode; JS owns the gesture in every case. */
.files-pv-iframe-shield{position:absolute;inset:0;pointer-events:auto;z-index:2;touch-action:none}
/* The pane body that contains the HTML iframe: block ALL native touch
   gestures so we own the swipe entirely (no page-scroll fighting). */
.files-pv-body:has(.files-html-frame){touch-action:none;-webkit-user-select:none;user-select:none}
/* Pannable cursor — only when we're capturing mouse drags. */
.files-pv-body.files-pv-pannable{cursor:grab}
.files-pv-body.files-pv-panning{cursor:grabbing}
.files-pv-body.files-pv-pannable img,.files-pv-body.files-pv-pannable .files-docx-preview,.files-pv-body.files-pv-pannable .xlsxv-wrap,.files-pv-body.files-pv-pannable .pptxv-wrap{cursor:grab}
.files-pv-body .files-docx-preview,.files-pv-body .xlsxv-wrap,.files-pv-body .pptxv-wrap,.files-pv-body .pptxv-text{width:100%;min-width:0}
.files-pv-body .xlsxv-sheet{overflow:auto}
.files-pv-body pre{margin:0;padding:14px;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word;width:100%;height:100%;overflow:auto;color:var(--text-primary)}
.files-pv-body video,.files-pv-body audio{max-width:100%}
.files-pv-empty,.files-pv-unsupported{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--text-muted);padding:24px;font-size:12.5px;gap:10px}
/* V131.3 — meta panel must NEVER starve the preview. A `%` max-height doesn't
   resolve against an auto-height flex column (so it was ignored → the 8-row meta
   grew to ~238px and squeezed the PDF/image render down to a tiny ~112px box).
   Cap it to a definite, modest height so the document preview always dominates;
   the metadata is secondary and scrolls within its own cap. */
/* 2026-05-28 📘 — meta panel is a flex column: rows scroll INTERNALLY in
   `.files-pv-meta-rows`, actions stay pinned at the bottom. Cap on the meta
   panel itself stays — keeps the preview body dominant — but the Download
   row is always visible because it lives outside the scrolling rows region. */
/* FIX (shrink file-info): the meta block ate a big chunk of preview height — tighten padding, row spacing,
   and cap it much lower so most of the sidebar goes to the document. It scrolls if a file has many fields. */
.files-pv-meta{flex:0 0 auto;display:flex;flex-direction:column;border-top:0.5px solid var(--chrome-border);padding:7px 12px 8px;max-height:min(24vh,148px);background:color-mix(in srgb,var(--surface) 50%,transparent)}
.files-pv-meta-rows{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column}
.files-pv-meta-row{display:flex;justify-content:space-between;gap:10px;padding:2.5px 0;font-size:11px;border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 5%,transparent)}
.files-pv-meta-row:last-child{border-bottom:0}
.files-pv-meta-k{color:var(--text-muted);flex-shrink:0}
.files-pv-meta-v{color:var(--text-primary);text-align:right;word-break:break-word;font-variant-numeric:tabular-nums}
.files-pv-meta-actions{flex:0 0 auto;display:flex;gap:6px;padding-top:7px}
/* Hide the pinned actions footer when empty (SD files pass actionsHtml=''). */
.files-pv-meta-actions:empty{display:none}
/* §3 — stacked section labels in the content pane ("Project Files" + "Shared
   Drive — <folder>"). Quiet uppercase group headers (Finder-style grouping). */
.files-sec-label{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin:4px 2px 8px;padding-top:4px}
.files-sec-label svg{color:var(--text-muted);opacity:.8}
/* 2026-05-27 — RT files + project Shared Drive composition. Grid mode (default):
   block flow → RT column then SD section stacked below. List mode w/ an SD section:
   `.side-by-side` makes it two equal columns (RT left, SD right) so both file sources
   read in parallel. Collapses back to stacked on narrow widths. */
.files-rt-sd-wrap{display:block}
.files-rt-col{min-width:0}
.files-rt-sd-wrap.side-by-side{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.files-rt-sd-wrap.side-by-side > .files-sd-section{margin-top:0}
.files-rt-sd-wrap.side-by-side > .files-sd-section .files-sd-section-head{margin-top:0;padding-top:4px;border-top:none}
@media (max-width: 900px){ .files-rt-sd-wrap.side-by-side{grid-template-columns:1fr} .files-rt-sd-wrap.side-by-side > .files-sd-section{margin-top:18px} }
.files-sd-section{margin-top:18px}
.files-sd-section .files-sec-label{margin-top:6px}
/* #19 part 2 — dedicated standalone Shared-Drive browse surface (sits BELOW the local files so both
   are visible; the SD renderer paints its own breadcrumb + .sd-row grid here, never #filesPageGrid). */
.files-sd-browse{margin-top:20px;padding-top:14px;border-top:0.5px solid color-mix(in srgb,var(--text-primary) 8%,transparent)}
.files-sd-browse .sd-browse-bc{margin:0 2px 10px;font-size:12.5px;color:var(--text-secondary)}
.files-sd-section-head{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin:18px 2px 8px;padding-top:14px;border-top:0.5px solid color-mix(in srgb,var(--text-primary) 8%,transparent)}
.files-sd-section-head .files-sd-path{font-weight:600;text-transform:none;letter-spacing:0;color:var(--text-secondary)}
.files-sd-section-grid{display:flex;flex-direction:column;gap:2px}
.files-sd-hint-row{font-size:12px;color:var(--text-muted);font-style:italic;padding:10px 4px}
.files-split-toggle{flex-shrink:0;width:28px;height:28px;border:0;background:transparent;border-radius:var(--radius-btn-sm);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast)}
.files-split-toggle:hover{background:var(--surface-2);color:var(--text-primary)}
.files-split-toggle:active{transform:scale(.92)}
/* gap#files — always-visible "New folder" toolbar button (quiet pill, accent on hover) */
.files-newfolder-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border:0.5px solid var(--chrome-border);border-radius:var(--radius-pill);background:transparent;color:var(--text-secondary);font-size:12px;font-weight:600;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast),transform var(--motion-fast)}
.files-newfolder-btn:hover{background:color-mix(in srgb,var(--app-accent) 10%,transparent);color:var(--app-accent);border-color:color-mix(in srgb,var(--app-accent) 30%,var(--chrome-border))}
.files-newfolder-btn:active{transform:scale(.96)}
.files-newfolder-btn svg{color:currentColor}
@media (max-width:640px){.files-newfolder-btn{height:34px;padding:0 10px}.files-newfolder-btn span{display:none}}
.files-split-toggle.active{background:color-mix(in srgb,var(--app-accent) 16%,transparent);color:var(--app-accent)}
/* Phone + iPad-portrait: pane becomes a full-screen overlay (no room for 3 cols). */
@media (max-width: 900px){
  .files-2pane.has-preview{grid-template-columns:240px minmax(0,1fr)}
  /* Reset the desktop pane sizing — fixed+inset:0 should fill the viewport.
     Without this, the desktop `height:calc(100svh - 140px)` + `min-height:480px`
     would leak in and clip the overlay's bottom edge. */
  .files-2pane.has-preview .files-preview-pane{position:fixed;inset:0;z-index:var(--z-modal,1250);height:100%;max-height:none;min-height:0;border-radius:0}
}
/* V82.1 — collapse to a single column only on PHONES. The old max-width:1024px
   stacked the sidebar above the grid on iPad too (wasting the landscape width)
   by overriding the (641–1024) 2-pane rule via cascade order. The ≤640 block
   already switches to display:block for true single-column on phones. */
@media (max-width: 640px) {.files-2pane{grid-template-columns:1fr}}
/* V82 — frosted glass files sidebar */
/* 2026-05-28 📘 — Sidebar fills its grid cell at full row height (grid is
   align-items:stretch). Page no longer scrolls, so position:sticky isn't
   needed — sidebar just naturally occupies the full vertical area inside
   the 2pane row. Internal overflow:auto scrolls the tree when long. */
.files-sidebar{background:var(--lg-bg);backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);padding:8px;min-height:240px;box-shadow:var(--lg-edge), var(--shadow-e2);overflow-y:auto;overflow-x:hidden;height:100%}
/* Subtle vertical scrollbar matching the design system (thin, muted, rounded). */
.files-sidebar{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--text-primary) 18%,transparent) transparent}
.files-sidebar::-webkit-scrollbar{width:5px}
.files-sidebar::-webkit-scrollbar-track{background:transparent}
.files-sidebar::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text-primary) 16%,transparent);border-radius:3px}
.files-sidebar::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--text-primary) 26%,transparent)}
.files-sb-empty{font-size:11.5px;color:var(--text-muted);padding:18px 10px;text-align:center}
/* Files redesign 2026-05-27 📘 — inline hint row under the Shared Drive node
   (connect prompt / loading). Quiet, on-token; padding-left set inline for tree depth. */
.files-sb-sd-hint .files-sb-name{color:var(--text-muted);font-style:italic}
/* H29.1 — sidebar filter + match underline + ARIA focus state */
.files-sb-filter-wrap{padding:6px 8px}
.files-sb-filter{width:100%;height:26px;padding:0 8px;font-size:12px;border:0.5px solid var(--chrome-border);border-radius:var(--radius-sm);background:var(--chrome-bg, var(--surface-2));color:var(--text-primary);font-family:inherit;outline:none;transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
.files-sb-filter:focus{border-color:color-mix(in srgb,var(--app-accent) 50%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 18%,transparent)}
.files-sb-filter::placeholder{color:var(--text-muted)}
.files-sb-row[role="treeitem"]:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 35%,transparent) inset;background:color-mix(in srgb,var(--app-accent) 8%,transparent)}
.files-sb-match{text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--app-accent);text-decoration-thickness:1.5px;color:var(--text-primary);font-weight:600}
/* H29.1 — narrow-viewport sidebar collapse (mobile) */
@media (max-width: 1024px) {
  #filesSidebar.collapsed {
    width:0; min-width:0; padding:0; border:0; overflow:hidden;
  }
  .files-sb-collapse-toggle { display:inline-flex; }
}
.files-sb-collapse-toggle{display:none;align-items:center;justify-content:center;width:28px;height:28px;border:0.5px solid var(--chrome-border);border-radius:var(--radius-sm);background:var(--chrome-bg, var(--surface-2));cursor:pointer;color:var(--text-primary);transition:background var(--motion-fast);flex-shrink:0}
.files-sb-collapse-toggle:hover{background:var(--chrome-bg-hover)}
/* breadcrumb + split-toggle row. No longer sticky — the parent .files-main
   is a flex column; this row gets natural height and the grid scrolls below. */
.files-main-row{display:flex;align-items:center;gap:8px;margin-bottom:4px;flex-shrink:0}
.files-sb-row{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:var(--radius-sm);cursor:pointer;font-size:12.5px;color:var(--text-primary);transition:background var(--motion-fast);min-width:0}
/* V82 — accent-tint hover/active to match the other frosted sidebars */
.files-sb-row:hover{background:color-mix(in srgb,var(--app-accent) 7%,transparent)}
.files-sb-row:active{background:color-mix(in srgb,var(--app-accent) 14%,transparent)}
.files-sb-row.active{background:color-mix(in srgb,var(--app-accent) 13%,transparent);color:var(--app-accent);font-weight:600}
.files-sb-row.sb-drop-target{background:color-mix(in srgb,var(--app-accent) 28%,transparent);outline:2px solid var(--app-accent);outline-offset:-2px}
.files-sb-row.sb-spring{animation:sbSpringPulse 700ms ease-out 1}
@keyframes sbSpringPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--app-accent) 40%,transparent)}100%{box-shadow:0 0 0 6px transparent}}
.files-sb-chev{width:10px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:9px;flex-shrink:0;cursor:pointer;user-select:none}
.files-sb-chev-ico{width:9px;height:9px;display:block}
.files-sb-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Folder/Root/SD name spans render icon + text via inline-flex (set inline). They
   need min-width:0 + overflow:hidden + nowrap so a long folder name clips at the rail
   edge instead of forcing a horizontal scrollbar (the icon stays, text clips). */
.files-sb-name[style*="inline-flex"]{min-width:0;overflow:hidden;white-space:nowrap}
.files-sb-name-edit{flex:1;height:20px;padding:0 6px;font-size:12.5px;border:0.5px solid var(--app-accent);border-radius:var(--radius-sm);background:var(--card-bg);color:var(--text-primary);font-family:inherit;outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 18%,transparent)}
.files-sb-count{font-size:10.5px;color:var(--text-muted);font-variant-numeric:tabular-nums}
/* 2026-05-28 📘 — Smart Views: tinted-icon row, count badge on the right.
   Active state matches existing .files-sb-row.active (accent tint + bold). */
.files-sb-smart .files-sb-smart-ico{width:13px;height:13px;flex-shrink:0;color:var(--app-accent);opacity:.78;transition:opacity var(--motion-fast)}
.files-sb-smart:hover .files-sb-smart-ico{opacity:1}
.files-sb-smart.active .files-sb-smart-ico{opacity:1;color:var(--app-accent)}
/* Recent Uploads stacked rows — two-line: name (12.5px) over uploader·age (10.5px muted). */
.files-sb-recent{align-items:flex-start;padding:7px 8px;gap:8px}
.files-sb-recent-icon{flex-shrink:0;width:24px;height:24px;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--app-accent) 10%,transparent);display:inline-flex;align-items:center;justify-content:center;color:var(--app-accent);margin-top:1px}
.files-sb-recent-icon svg{width:13px;height:13px}
.files-sb-recent-text{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.files-sb-recent-name{font-size:12.5px;color:var(--text-primary);font-weight:500;letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.files-sb-recent-meta{font-size:10.5px;color:var(--text-muted);font-variant-numeric:tabular-nums;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.files-sb-recent-empty{font-size:11.5px;color:var(--text-muted);padding:6px 10px 10px;font-style:italic}
.files-sb-section{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);padding:8px 8px 4px}
/* 2026-05-27 — collapsible top-level group headers (SHARED / PROJECTS) so the rail
   stays short once many branches are open. Clickable, with a leading chevron. */
.files-sb-grp{display:flex;align-items:center;gap:5px;cursor:pointer;border-radius:var(--radius-sm);user-select:none;transition:background var(--motion-fast),color var(--motion-fast)}
.files-sb-grp:hover{background:var(--chrome-bg);color:var(--text-primary)}
.files-sb-grp:focus-visible{outline:none;background:var(--chrome-bg);color:var(--text-primary)}
.files-sb-grp-ico{width:11px;height:11px;flex-shrink:0;color:currentColor;opacity:.8}
/* #29 — personal local-folders section: "MY FOLDERS" group + connection rows. */
.files-pf-section{margin:6px 0 2px}
.files-sb-group-head{padding:5px 8px 4px;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)}
.files-pf-row{display:flex;align-items:center;gap:2px;border-radius:var(--radius-sm)}
.files-pf-row.pf-active{background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
.files-pf-open{flex:1;display:inline-flex;align-items:center;gap:7px;min-width:0;border:0;background:transparent;padding:6px 8px;border-radius:var(--radius-sm);cursor:pointer;font:inherit;font-size:12.5px;color:var(--text-primary);text-align:left}
.files-pf-open:hover{background:var(--chrome-bg)}
.files-pf-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.pf-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.pf-dot-on{background:var(--color-success,#30d158)}
.pf-dot-stale{background:#ff9f0a}
.pf-dot-off{background:var(--text-muted)}
.files-pf-reconnect{font-size:10.5px;font-weight:600;color:var(--app-accent)}
.files-pf-x{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;border-radius:50%;cursor:pointer;color:var(--text-muted);flex:0 0 auto;opacity:0;transition:opacity var(--motion-fast),background var(--motion-fast)}
.files-pf-row:hover .files-pf-x{opacity:1}
.files-pf-x:hover{background:color-mix(in srgb,var(--text-primary) 12%,transparent);color:var(--text-primary)}
/* 2026-07-02 📘 — "Connect a folder" made subtler + smaller (Gavin): a quiet muted text link, not a
   full-width dashed button — it's a secondary action that shouldn't compete with the folder list. */
.files-pf-add{display:inline-flex;align-items:center;gap:4px;margin:2px 4px 2px 6px;padding:3px 6px;border:0;background:transparent;border-radius:var(--radius-sm);color:var(--text-muted);font:inherit;font-size:11px;font-weight:600;cursor:pointer;transition:color var(--motion-fast),background var(--motion-fast)}
.files-pf-add svg{width:10px;height:10px;opacity:.8}
.files-pf-add:hover{color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 8%,transparent)}
.files-pf-note{padding:4px 8px 8px;font-size:11px;color:var(--text-muted);line-height:1.4}
/* #29 — connected-folder subfolder tree in the sidebar (recursive, lazy). Caret expands the
   subfolder hierarchy; name navigates the grid. Mirrors the SD/project tree language. */
.files-pf-caret{width:16px;height:22px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;cursor:pointer;color:var(--text-muted);border-radius:var(--radius-sm)}
.files-pf-caret:hover{color:var(--text-primary);background:var(--chrome-bg)}
.files-pf-caret-sp{width:16px;flex:0 0 auto}
.pf-caret-ic{transition:transform var(--motion-fast)}
.pf-caret-ic.open{transform:rotate(90deg)}
.files-pf-treerow{display:flex;align-items:center;gap:2px;border-radius:var(--radius-sm)}
.files-pf-treerow.pf-tree-active{background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
.files-pf-treename{flex:1;min-width:0;display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;padding:5px 6px;border-radius:var(--radius-sm);cursor:pointer;font:inherit;font-size:12px;color:var(--text-secondary);text-align:left}
.files-pf-treename svg{flex:0 0 auto;color:var(--text-muted)}
.files-pf-treerow.pf-tree-active .files-pf-treename{color:var(--text-primary);font-weight:600}
.files-pf-treename:hover{background:var(--chrome-bg);color:var(--text-primary)}
.files-pf-treename span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.files-pf-tree-empty{font-size:11px;color:var(--text-muted);padding:3px 6px 4px;font-style:italic}
/* Shared-Drive inline folder list — bounded scroll so ~20 folders never dominate. */
.files-sb-sd-scroll{max-height:200px;overflow-y:auto;overscroll-behavior:contain}
.files-sb-sd-scroll::-webkit-scrollbar{width:4px}
.files-sb-sd-scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text-primary) 18%,transparent);border-radius:2px}
/* Projects list — its own bounded inner scroll (matches the SD section's), so a long
   project list / expanded folders scroll within their own window. Taller cap since
   Projects is the primary list. Subtle scrollbar matching the design system. */
.files-sb-proj-scroll{max-height:360px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.files-sb-proj-scroll::-webkit-scrollbar{width:4px}
.files-sb-proj-scroll::-webkit-scrollbar-track{background:transparent}
.files-sb-proj-scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text-primary) 18%,transparent);border-radius:2px}
.files-sb-proj-scroll::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--text-primary) 28%,transparent)}
.files-sb-add{font-size:11px;color:var(--app-accent);padding:4px 8px;cursor:pointer;border-radius:var(--radius-sm);text-align:left;background:transparent;border:none;font-family:inherit;width:100%}
.files-sb-add:hover{background:var(--chrome-bg-hover)}
.files-sb-back{display:flex;align-items:center;gap:6px;width:100%;padding:6px 8px;margin-bottom:4px;background:var(--chrome-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-sm);cursor:pointer;font-size:12px;font-weight:500;color:var(--text-primary);font-family:inherit;transition:background var(--motion-fast),border-color var(--motion-fast);letter-spacing:-.05px}
.files-sb-back:hover{background:var(--chrome-bg-hover);border-color:var(--chrome-border-strong)}
.files-sb-back svg{color:var(--text-muted)}
/* Sidebar right-click context menu */
.files-sb-ctx{position:fixed;z-index:var(--z-top);background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);box-shadow:var(--shadow-e4);padding:4px;min-width:160px}
.files-sb-ctx button{display:block;width:100%;text-align:left;background:transparent;border:none;padding:6px 10px;font-size:12.5px;color:var(--text-primary);cursor:pointer;border-radius:var(--radius-sm);font-family:inherit}
.files-sb-ctx button:hover{background:var(--chrome-bg-hover)}
.files-sb-ctx hr{border:0;border-top:0.5px solid var(--chrome-border);margin:4px 0}
.files-sb-ctx .ctx-danger{color:var(--app-danger)}
/* 7.4 (2026-05-15 cont. 19) — folder color tag picker swatch row */
.files-sb-ctx-color-row{display:flex;align-items:center;gap:4px;padding:5px 8px;flex-wrap:wrap}
.files-sb-ctx-color-label{font-size:11.5px;color:var(--text-muted);margin-right:4px;text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.files-fc-btn{background:transparent;border:none;padding:2px;cursor:pointer;line-height:0;border-radius:var(--radius-xs)}
.files-fc-btn:hover{background:var(--chrome-bg-hover)}
.files-fc-sw{display:inline-block;width:18px;height:18px;border-radius:50%;border:1.5px solid transparent;box-sizing:border-box;vertical-align:middle}
.files-fc-sw.active{border-color:var(--text-primary);box-shadow:0 0 0 1px var(--card-bg) inset}
.files-fc-sw-none{display:inline-flex;align-items:center;justify-content:center;font-size:13px;color:var(--text-muted);background:transparent;border:1.5px dashed var(--chrome-border)}
/* #27 — file color swatch row (drawer) + card/row color dot */
.files-fc-row{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.file-color-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-right:5px;vertical-align:middle;box-shadow:0 0 0 1px color-mix(in srgb,var(--text-primary) 12%,transparent)}
/* #27 smart-org — "send to" folder suggestion chips */
.files-smartorg-row{display:flex;flex-wrap:wrap;gap:6px}
.files-smartorg-chip{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 11px;border:.5px solid color-mix(in srgb,var(--app-accent) 34%,var(--chrome-border));border-radius:var(--radius-pill);background:color-mix(in srgb,var(--app-accent) 8%,transparent);color:var(--app-accent);font-size:12px;font-weight:600;cursor:pointer;transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.files-smartorg-chip:hover{background:color-mix(in srgb,var(--app-accent) 16%,transparent);transform:translateY(-1px)}
.files-smartorg-chip svg{color:currentColor;flex-shrink:0}
/* V82 — sticky frosted breadcrumb toolbar (floats over the scrolling grid) */
.files-breadcrumb{font-size:11.5px;color:var(--text-muted);padding:8px 10px;margin:0 0 6px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;position:sticky;top:0;z-index:9;background:var(--lg-bg-strong);backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract);box-shadow:var(--lg-edge);border-bottom:0.5px solid var(--chrome-border);border-radius:var(--radius-sm)}
.files-breadcrumb a{color:var(--app-accent);cursor:pointer;text-decoration:none}
.files-breadcrumb a:hover{text-decoration:underline}
.files-breadcrumb .sep{color:var(--text-muted);opacity:.5}
/* #24 — Root scope label: fills the once-empty breadcrumb so the main-row never
   reads as a hollow band. Quiet weight (it's context, not a primary control). */
.files-bc-scope{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--text-secondary);letter-spacing:-.05px}
.files-bc-scope svg{color:var(--text-muted)}
.files-page-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:14px;padding:4px 4px 24px 4px}
/* #files — GRID density: smaller/larger cards. md is the default 216px (unchanged). */
.files-page-grid.files-size-sm:not(.files-list-mode){grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px}
.files-page-grid.files-size-lg:not(.files-list-mode){grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
/* 2026-05-28 📘 — Recently Uploaded smart-view: flip the grid container to
   block flow so the wide table can span full content width (default grid
   would cap it at one ~216px cell). */
.files-page-grid.files-recent-mode{display:block;grid-template-columns:none;padding:4px 0 24px 0}
/* 2026-05-28 📘 — Recently Uploaded smart-view table. Five columns: file +
   project/folder + uploaded date + by + status. Apple-style: subtle header,
   1px hairline rows, hover-tint, monospaced date. */
.files-recent-table{background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-e1)}
.files-recent-table-head,.files-recent-row{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1.6fr) 120px 120px 110px;gap:14px;align-items:center;padding:9px 16px}
.files-recent-table-head{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);background:color-mix(in srgb,var(--text-primary) 3%,transparent);border-bottom:0.5px solid var(--chrome-border)}
.files-recent-row{border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 6%,transparent);cursor:pointer;transition:background var(--motion-fast) var(--ease-out)}
.files-recent-row:last-child{border-bottom:0}
.files-recent-row:hover{background:color-mix(in srgb,var(--app-accent) 6%,transparent)}
.files-recent-row:active{background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
.frt-c-file{display:flex;align-items:center;gap:10px;min-width:0}
.frt-icon{flex-shrink:0;width:28px;height:28px;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--app-accent) 10%,transparent);display:inline-flex;align-items:center;justify-content:center;color:var(--app-accent)}
.frt-icon svg{width:14px;height:14px}
.frt-file-name{font-size:13px;font-weight:600;color:var(--text-primary);letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.frt-c-loc{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frt-c-date{display:flex;flex-direction:column;gap:1px;min-width:0;font-variant-numeric:tabular-nums}
.frt-date-abs{font-size:12px;color:var(--text-primary);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frt-date-rel{font-size:10.5px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frt-c-by{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frt-c-status{display:flex;justify-content:flex-end}
.frt-status-pill{display:inline-flex;align-items:center;padding:3px 9px;border-radius:var(--radius-pill);font-size:10.5px;font-weight:600;letter-spacing:.1px;text-transform:capitalize;background:color-mix(in srgb,var(--text-primary) 7%,transparent);color:var(--text-secondary);white-space:nowrap}
.frt-status-pill.frt-status-document{background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent)}
.frt-status-pill.frt-status-spreadsheet{background:color-mix(in srgb,#15803d 14%,transparent);color:#15803d}
.frt-status-pill.frt-status-image{background:color-mix(in srgb,#a855f7 14%,transparent);color:#a855f7}
.frt-status-pill.frt-status-template{background:color-mix(in srgb,#f59e0b 14%,transparent);color:#b45309}
.frt-status-pill.frt-status-company_asset{background:color-mix(in srgb,#0ea5e9 14%,transparent);color:#0369a1}
.files-recent-empty{padding:32px 16px;text-align:center;color:var(--text-muted);font-size:12.5px;font-style:italic}
/* Mobile-narrow: collapse extra columns, keep file + date visible. */
@media (max-width: 720px){
  .files-recent-table-head,.files-recent-row{grid-template-columns:minmax(0,2.2fr) 100px 92px;gap:10px;padding:8px 12px}
  .files-recent-table-head .frt-c-loc,.files-recent-table-head .frt-c-by,
  .files-recent-row .frt-c-loc,.files-recent-row .frt-c-by{display:none}
}
/* ── Files · per-project FULL-PAGE workspace (pass-2 41-project-files) ──────
   Frosted 3-column: folder tree (200px) · file grid (1fr) · preview peek (320px).
   All classes are prefixed .flw- and scoped under #filesWorkspaceWrap so the
   proto's generic names never collide with the global .file-card / .files-sb-*
   / .fin-ws-* rules. Modal path is untouched (stays compact). Recompose adopts
   the proto's superior material onto the existing already-rich files wiring. */
#filesWorkspaceWrap .flw-layout{display:grid;grid-template-columns:200px minmax(0,1fr) 320px;gap:16px;align-items:stretch}
/* 📒 V160 density — fill-the-stage: the tree + main column stretch to the layout's full
   height (which [data-pfv-fill] pins to the viewport bottom), so the tab never strands a
   matte void; the grid area flexes and the dropzone band rests at the bottom. The peek
   column keeps align-self:start so its sticky positioning still works, and collapses
   entirely (.no-peek) when nothing is selectable — never a reserved "Select a file" void. */
#filesWorkspaceWrap .flw-layout.no-peek{grid-template-columns:200px minmax(0,1fr)}
#filesWorkspaceWrap .flw-main-col{display:flex;flex-direction:column;min-width:0}
#filesWorkspaceWrap .flw-main-col .flw-main{flex:1;display:flex;flex-direction:column}
#filesWorkspaceWrap .flw-main .flw-grid{flex:1;align-content:start}
/* an empty grid holds one .flw-empty child — switch to a flex column so the zero state
   fills the whole canvas (in grid mode it was rendering as a single 1/3-width cell) */
#filesWorkspaceWrap .flw-main .flw-grid:has(> .flw-empty){display:flex;flex-direction:column}
#filesWorkspaceWrap .flw-main .flw-empty{flex:1;display:flex;flex-direction:column}
#filesWorkspaceWrap .flw-empty .rt-emptyplus{flex:1}
#filesWorkspaceWrap .flw-peek{align-self:start}
#filesWorkspaceWrap .flw-share-on{color:var(--color-success);border-color:color-mix(in srgb,var(--color-success) 35%,var(--chrome-border));background:color-mix(in srgb,var(--color-success) 7%,transparent)}
/* folder tree — frosted sidebar rail */
#filesWorkspaceWrap .flw-tree{position:relative;border-radius:18px;box-shadow:var(--shadow-e2),var(--bevel-top);border:.5px solid color-mix(in srgb,var(--app-accent) 8%,rgba(0,0,0,.05));padding:12px 10px;position:sticky;top:16px;overflow:hidden;background:var(--frost-bg-strong,rgba(255,255,255,.78));-webkit-backdrop-filter:var(--frost-blur);backdrop-filter:var(--frost-blur)}
#filesWorkspaceWrap .flw-tree::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 70% at 0% 0%, color-mix(in srgb,var(--app-accent) 7%,transparent), transparent 60%)}
#filesWorkspaceWrap .flw-tree>*{position:relative}
#filesWorkspaceWrap .flw-sd-chip{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;padding:7px 10px;border-radius:10px;background:var(--color-teal-bg);color:var(--color-teal);margin-bottom:10px}
#filesWorkspaceWrap .flw-sd-chip .flw-live-dot{width:7px;height:7px;border-radius:999px;background:var(--color-success)}
/* Folders header + the "+" new-folder affordance. */
#filesWorkspaceWrap .flw-tree-head{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 8px 6px}
#filesWorkspaceWrap .flw-tree-head-l{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
#filesWorkspaceWrap .flw-newfolder{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border:.5px solid var(--chrome-border);border-radius:8px;background:var(--card-bg);color:var(--app-accent);cursor:pointer;box-shadow:var(--shadow-e1);transition:background var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
#filesWorkspaceWrap .flw-newfolder:hover{background:color-mix(in srgb,var(--app-accent) 10%,var(--card-bg));box-shadow:var(--shadow-e2)}
#filesWorkspaceWrap .flw-newfolder:active{transform:scale(.9)}
#filesWorkspaceWrap .flw-newfolder:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 24%,transparent)}
#filesWorkspaceWrap .flw-newfolder svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
#filesWorkspaceWrap .flw-node{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:9px;font-size:13px;font-weight:600;color:var(--text-secondary);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast);min-width:0}
#filesWorkspaceWrap .flw-node:hover{background:var(--hover-overlay);color:var(--text-primary)}
#filesWorkspaceWrap .flw-node.is-active{background:color-mix(in srgb,var(--app-accent) 9%,transparent);color:var(--app-accent);font-weight:800}
#filesWorkspaceWrap .flw-node .flw-n-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#filesWorkspaceWrap .flw-node .flw-n{margin-left:auto;font-size:11px;font-weight:800;color:var(--text-muted);flex:0 0 auto}
#filesWorkspaceWrap .flw-node.child{padding-left:24px;font-size:12.5px}
#filesWorkspaceWrap .flw-node svg{width:13px;height:13px;flex:0 0 auto}
#filesWorkspaceWrap .flw-tree-hair{height:.5px;background:var(--chrome-border);margin:8px 4px}
/* file grid */
#filesWorkspaceWrap .flw-main{background:var(--card-bg);border-radius:18px;box-shadow:var(--shadow-e2);border:.5px solid color-mix(in srgb,var(--app-accent) 4%,rgba(0,0,0,.05));overflow:hidden}
#filesWorkspaceWrap .flw-main-head{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:.5px solid var(--chrome-border)}
#filesWorkspaceWrap .flw-main-head h3{font-size:15px;font-weight:800;margin:0}
#filesWorkspaceWrap .flw-main-head .flw-count{font-weight:700;font-size:12px;color:var(--text-muted)}
#filesWorkspaceWrap .flw-main-head .flw-spacer{flex:1}
#filesWorkspaceWrap .flw-viewseg{display:inline-flex;padding:3px;border-radius:999px;background:var(--surface-2)}
#filesWorkspaceWrap .flw-viewseg button{border:0;background:transparent;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:700;color:var(--text-secondary);cursor:pointer}
#filesWorkspaceWrap .flw-viewseg button.on{background:var(--card-bg);color:var(--text-primary);box-shadow:var(--shadow-e1)}
#filesWorkspaceWrap .flw-sort{border:0;background:transparent;font-size:12px;font-weight:700;color:var(--text-secondary);cursor:pointer;padding:5px 8px;border-radius:8px;display:inline-flex;align-items:center;gap:5px}
#filesWorkspaceWrap .flw-sort:hover{background:var(--hover-overlay);color:var(--text-primary)}
#filesWorkspaceWrap .flw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px}
/* real card material — specular bevel + press */
#filesWorkspaceWrap .flw-tile{border-radius:14px;padding:14px;background:var(--surface-grad,linear-gradient(160deg,#fff,#f7f8fb));box-shadow:var(--shadow-e1),var(--bevel-top);border:.5px solid rgba(0,0,0,.05);cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast);position:relative}
#filesWorkspaceWrap .flw-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-e3),var(--bevel-top)}
#filesWorkspaceWrap .flw-tile:active{transform:translateY(-1px) scale(.985)}
#filesWorkspaceWrap .flw-tile.is-sel{box-shadow:var(--glow-accent),var(--bevel-top);border-color:transparent}
/* elevate live/interactive HTML affordance (ONLY real _html_doc_id rows) */
#filesWorkspaceWrap .flw-tile.live{background:linear-gradient(160deg, color-mix(in srgb,var(--color-warning) 9%,#fff), #fff 72%);border-color:color-mix(in srgb,var(--color-warning) 22%,rgba(0,0,0,.05))}
#filesWorkspaceWrap .flw-fico{width:44px;height:52px;border-radius:8px;display:grid;place-items:center;font-size:18px;color:#fff;font-weight:800;margin-bottom:11px;position:relative;box-shadow:var(--shadow-e1);overflow:hidden}
#filesWorkspaceWrap .flw-fico::after{content:"";position:absolute;top:0;right:0;border-width:0 11px 11px 0;border-style:solid;border-color:rgba(255,255,255,.5) #fff}
#filesWorkspaceWrap .flw-fico svg{width:20px;height:20px;color:#fff}
#filesWorkspaceWrap .flw-fico.html{background:linear-gradient(160deg,#ff9f0a,#e07b00)}
#filesWorkspaceWrap .flw-fico.pdf{background:linear-gradient(160deg,#ff453a,#c0271f)}
#filesWorkspaceWrap .flw-fico.xls{background:linear-gradient(160deg,#34c759,#1f8f43)}
#filesWorkspaceWrap .flw-fico.doc{background:linear-gradient(160deg,#0a84ff,#0060d0)}
#filesWorkspaceWrap .flw-fico.img{background:linear-gradient(160deg,#bf5af2,#8e3cc4)}
#filesWorkspaceWrap .flw-fico.other{background:linear-gradient(160deg,#8e8e93,#636366)}
/* image tiles get a real thumbnail filling the icon chip (no static placeholder) */
#filesWorkspaceWrap .flw-fico.thumb{padding:0}
#filesWorkspaceWrap .flw-fico.thumb img{width:100%;height:100%;object-fit:cover;display:block}
#filesWorkspaceWrap .flw-fico-fallback{display:none;width:20px;height:20px;color:#fff}
#filesWorkspaceWrap .flw-fico.thumb.thumb-failed img{display:none}
#filesWorkspaceWrap .flw-fico.thumb.thumb-failed .flw-fico-fallback{display:block}
#filesWorkspaceWrap .flw-tile .flw-ft-name{font-size:13px;font-weight:800;letter-spacing:-.01em;line-height:1.25;word-break:break-word}
#filesWorkspaceWrap .flw-tile .flw-ft-meta{font-size:11px;color:var(--text-muted);font-weight:600;margin-top:4px}
#filesWorkspaceWrap .flw-tile .flw-ft-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
#filesWorkspaceWrap .flw-tile .flw-ft-cmt{margin-left:6px;display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;color:var(--text-muted);vertical-align:middle}
#filesWorkspaceWrap .flw-tile .flw-ft-int{position:absolute;top:12px;right:12px;font-size:9.5px;font-weight:800;padding:3px 8px;border-radius:999px;display:inline-flex;align-items:center;gap:3px;color:#fff;background:linear-gradient(160deg, color-mix(in srgb,var(--color-warning) 92%,#fff), var(--color-warning));box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 4px 9px -4px var(--color-warning)}
/* list view — rows instead of tiles (lifts the global page's grid/list toggle) */
#filesWorkspaceWrap .flw-grid.is-list{display:flex;flex-direction:column;gap:8px}
#filesWorkspaceWrap .flw-grid.is-list .flw-tile{display:flex;align-items:center;gap:12px;padding:10px 12px}
#filesWorkspaceWrap .flw-grid.is-list .flw-fico{width:34px;height:40px;margin-bottom:0;font-size:13px}
#filesWorkspaceWrap .flw-grid.is-list .flw-fico svg{width:15px;height:15px}
#filesWorkspaceWrap .flw-grid.is-list .flw-ft-body{min-width:0;flex:1}
#filesWorkspaceWrap .flw-tile .flw-ft-int .ic{width:11px;height:11px}
#filesWorkspaceWrap .flw-grid.is-list .flw-ft-tags,#filesWorkspaceWrap .flw-grid.is-list .flw-ft-int{display:none}
#filesWorkspaceWrap .flw-grid.is-list .flw-ft-int.flw-ft-int-list{display:inline-flex;position:static;top:auto;right:auto}
#filesWorkspaceWrap .flw-empty{padding:40px 16px;text-align:center;color:var(--text-muted);font-size:13px}
/* preview peek */
#filesWorkspaceWrap .flw-peek{position:sticky;top:16px;background:var(--card-bg);border-radius:18px;box-shadow:var(--shadow-e2);border:.5px solid color-mix(in srgb,var(--app-accent) 4%,rgba(0,0,0,.05));overflow:hidden}
#filesWorkspaceWrap .flw-peek-prev{height:170px;background:repeating-linear-gradient(45deg, #fafbfc, #fafbfc 12px, #f2f4f7 12px, #f2f4f7 24px);display:grid;place-items:center;border-bottom:.5px solid var(--chrome-border);position:relative;overflow:hidden}
#filesWorkspaceWrap .flw-peek-prev .flw-ppico{width:60px;height:72px;border-radius:9px;display:grid;place-items:center;font-size:24px;color:#fff;font-weight:800;box-shadow:var(--shadow-e2)}
#filesWorkspaceWrap .flw-peek-prev .flw-ppico svg{width:26px;height:26px;color:#fff}
#filesWorkspaceWrap .flw-peek-prev .flw-pp-thumb{position:absolute;inset:0}
#filesWorkspaceWrap .flw-peek-prev .flw-pp-thumb img{width:100%;height:100%;object-fit:cover;display:block}
#filesWorkspaceWrap .flw-peek-prev .flw-pp-int{position:absolute;bottom:12px;right:12px;font-size:10px;font-weight:800;padding:4px 10px;border-radius:999px;background:var(--card-bg);color:var(--app-accent);box-shadow:var(--shadow-e1);display:inline-flex;align-items:center;gap:3px}
#filesWorkspaceWrap .flw-peek-prev .flw-pp-int .ic{width:11px;height:11px}
#filesWorkspaceWrap .flw-peek-body{padding:16px 18px}
#filesWorkspaceWrap .flw-peek-name{font-size:16px;font-weight:800;letter-spacing:-.01em;word-break:break-word}
#filesWorkspaceWrap .flw-peek-sub{font-size:11.5px;color:var(--text-muted);font-weight:600;margin-top:2px}
#filesWorkspaceWrap .flw-pfield{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:.5px solid var(--chrome-border);font-size:12.5px}
#filesWorkspaceWrap .flw-pfield:last-child{border-bottom:0}
#filesWorkspaceWrap .flw-pfield .flw-pf-l{color:var(--text-muted);font-weight:700;flex:0 0 auto}
#filesWorkspaceWrap .flw-pfield .flw-pf-v{font-weight:700;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#filesWorkspaceWrap .flw-peek-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
#filesWorkspaceWrap .flw-peek-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
#filesWorkspaceWrap .flw-peek-actions .btn{justify-content:center}
#filesWorkspaceWrap .flw-peek-actions .flw-act-primary{grid-column:1/-1}
/* quiet destructive — a low-key text affordance, not an equal-weight button */
#filesWorkspaceWrap .flw-peek-del{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:12px;font-weight:700;color:var(--text-muted);background:transparent;border:0;padding:6px 2px;cursor:pointer}
#filesWorkspaceWrap .flw-peek-del:hover{color:var(--color-error)}
#filesWorkspaceWrap .flw-peek-empty{padding:40px 18px;text-align:center;color:var(--text-muted)}
#filesWorkspaceWrap .flw-peek-empty svg{width:34px;height:34px;color:var(--text-muted);opacity:.6;margin-bottom:10px}
#filesWorkspaceWrap .flw-peek-empty .flw-pe-title{font-size:13.5px;font-weight:700;color:var(--text-secondary)}
#filesWorkspaceWrap .flw-peek-empty .flw-pe-sub{font-size:11.5px;margin-top:3px}
/* transmittal ball-in-court band — full-fill tinted band (no edge stripe) */
#filesWorkspaceWrap .flw-bic{display:flex;align-items:center;margin:0 16px 14px;padding:11px 14px;border-radius:13px;gap:11px;background:var(--color-teal-bg);flex-wrap:wrap}
#filesWorkspaceWrap .flw-bic .flw-tb-tag{font-size:11px;font-weight:800;padding:4px 9px;border-radius:999px;background:var(--type-itb-bg);color:var(--type-itb-fg);flex:0 0 auto}
#filesWorkspaceWrap .flw-bic-chain{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto}
#filesWorkspaceWrap .flw-bic-av{width:24px;height:24px;border-radius:999px;display:grid;place-items:center;font-size:10px;font-weight:800;color:#fff}
#filesWorkspaceWrap .flw-bic-arrow{color:var(--text-muted);font-weight:700}
#filesWorkspaceWrap .flw-bic-label{font-size:12.5px;color:var(--text-primary);min-width:0;flex:1}
#filesWorkspaceWrap .flw-bic-label b{font-weight:700}
/* dropzone */
#filesWorkspaceWrap .flw-dropzone{margin:0 16px 16px;border:1.5px dashed color-mix(in srgb,var(--app-accent) 30%,rgba(0,0,0,.1));border-radius:14px;padding:18px;display:flex;align-items:center;gap:14px;background:color-mix(in srgb,var(--app-accent) 3%,transparent);transition:background var(--motion-fast),border-color var(--motion-fast)}
#filesWorkspaceWrap .flw-dropzone.drag-over{background:color-mix(in srgb,var(--app-accent) 10%,transparent);border-color:var(--app-accent)}
#filesWorkspaceWrap .flw-dropzone .flw-dz-ico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:19px;background:color-mix(in srgb,var(--app-accent) 12%,#fff);color:var(--app-accent);flex:0 0 42px}
#filesWorkspaceWrap .flw-dropzone .flw-dz-ico svg{width:19px;height:19px}
#filesWorkspaceWrap .flw-dropzone .flw-dz-title{font-size:13.5px;font-weight:800}
#filesWorkspaceWrap .flw-dropzone .flw-dz-sub{font-size:11.5px;color:var(--text-secondary);font-weight:600;margin-top:2px}
#filesWorkspaceWrap .flw-dropzone .flw-dz-up{margin-left:auto;flex:0 0 auto}
/* ── responsive: collapse the 3-col into a single stack on narrow widths ──
   peek drops below the grid, tree becomes a horizontal scroller. Cross-viewport
   rule: anchored to the real layout, not 100vh; identical behavior all sizes. */
@media (max-width:1040px){
  #filesWorkspaceWrap .flw-layout{grid-template-columns:180px minmax(0,1fr)}
  #filesWorkspaceWrap .flw-peek{grid-column:1 / -1;position:static}
  #filesWorkspaceWrap .flw-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  #filesWorkspaceWrap .flw-layout{grid-template-columns:1fr}
  #filesWorkspaceWrap .flw-tree{position:static}
  #filesWorkspaceWrap .flw-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:460px){
  #filesWorkspaceWrap .flw-grid:not(.is-list){grid-template-columns:1fr}
}
/* ── SD-01: Shared Drive — main pane styling ───────────────────────────── */
.files-sb-shared-section{padding-top:8px}
.files-page-grid.sd-drag-active{outline:2px dashed color-mix(in srgb,var(--app-accent) 50%,transparent);outline-offset:-6px;background:color-mix(in srgb,var(--app-accent) 4%,transparent);border-radius:var(--radius-lg)}
/* SD-02: per-project Shared Drive panel + recent-uploads list */
/* #19 — .files-page-sd-* rules removed 2026-07-02 with the top SD popup. */
.proj-sd-panel{padding:14px;border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);background:var(--surface);margin-bottom:14px}
.proj-sd-panel.hidden{display:none}
.proj-sd-panel.sd-drag-active{outline:2px dashed color-mix(in srgb,var(--app-accent) 60%,transparent);outline-offset:-4px;background:color-mix(in srgb,var(--app-accent) 6%,transparent)}
/* SD-02 follow-up: preview modal */
.sd-preview-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:var(--z-top);display:flex;align-items:center;justify-content:center;padding:24px;animation:sdPreviewFadeIn var(--motion-base) var(--ease-out)}
@keyframes sdPreviewFadeIn{from{opacity:0}to{opacity:1}}
.sd-preview-modal{background:var(--card-bg);border-radius:var(--radius-lg);width:min(1200px,100%);max-width:100%;height:min(85vh,900px);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35),0 0 0 0.5px rgba(0,0,0,.06)}
.sd-preview-header{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:0.5px solid var(--chrome-border);flex-shrink:0}
.sd-preview-title{font-weight:600;font-size:14px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;letter-spacing:-.1px}
.sd-preview-close-x{background:transparent;border:none;font-size:24px;line-height:1;color:var(--text-muted);cursor:pointer;padding:0 6px;border-radius:var(--radius-xs);font-family:inherit}
.sd-preview-close-x:hover{background:var(--surface);color:var(--text-primary)}
.sd-preview-body{display:flex;flex:1;overflow:hidden;min-height:0}
.sd-preview-main{flex:1;overflow:auto;background:var(--surface);display:flex;align-items:center;justify-content:center;padding:0;min-width:0}
.sd-preview-side{width:280px;flex-shrink:0;border-left:0.5px solid var(--chrome-border);padding:18px 18px 14px;overflow-y:auto;display:flex;flex-direction:column;gap:14px;background:var(--card-bg)}
.sd-preview-side-section{display:flex;flex-direction:column;gap:3px}
.sd-preview-side-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;font-weight:600;color:var(--text-muted)}
.sd-preview-side-value{font-size:13px;color:var(--text-primary);word-break:break-word;line-height:1.4}
.sd-preview-side-path{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;color:var(--text-secondary);background:var(--surface);padding:6px 8px;border-radius:var(--radius-sm)}
.sd-preview-side-actions{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.sd-preview-download-btn{justify-content:center;display:inline-flex;align-items:center;font-weight:600}
.sd-preview-side-hint{font-size:11px;color:var(--text-muted);line-height:1.4;margin-top:auto;padding-top:10px;border-top:0.5px solid var(--chrome-border)}
.sd-preview-iframe{width:100%;height:100%;border:0;background:#fff}
/* #28 — office/OOXML rich preview host inside the SD modal. Fills the main area so
   _rtRenderDocBody (docx/xlsx/pptx) lays out with real width/height, not centered. */
.sd-preview-rich{align-self:stretch;width:100%;height:100%;overflow:auto;background:var(--surface)}
.sd-preview-main:has(.sd-preview-rich){align-items:stretch;justify-content:stretch}
.sd-preview-img-wrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box}
.sd-preview-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--radius-sm);box-shadow:0 2px 12px rgba(0,0,0,.15)}
.sd-preview-pre{margin:0;padding:18px 22px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.55;color:var(--text-primary);background:var(--card-bg);width:100%;height:100%;overflow:auto;white-space:pre;tab-size:2;text-align:left;align-self:flex-start;box-sizing:border-box}
.sd-preview-media{max-width:100%;max-height:100%;width:auto;height:auto;background:#000}
.sd-preview-unsupported{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;text-align:center;color:var(--text-secondary)}
.sd-preview-unsupported-msg{font-size:15px;color:var(--text-primary);font-weight:600;margin-bottom:6px}
.sd-preview-unsupported-sub{font-size:13px;color:var(--text-muted)}
@media (max-width:780px){
  .sd-preview-overlay{padding:0}
  /* 2026-05-17 📘 Commit C P0 #5: 100vh covers iOS Safari URL bar → modal
     bottom clipped. svh = small viewport height (URL bar visible). Dual-value
     fallback for browsers without svh support. */
  .sd-preview-modal{border-radius:0;height:100vh;height:100svh;max-height:100vh;max-height:100svh;width:100vw}
  .sd-preview-body{flex-direction:column}
  .sd-preview-side{width:auto;border-left:none;border-top:0.5px solid var(--chrome-border);max-height:40vh}
}
.proj-sd-bc{color:var(--text-secondary)}
.proj-sd-bc .files-bc-link,.proj-sd-bc .files-bc-current{font-size:13px}
.proj-sd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:10px}
.sd-recent-uploads{margin-top:14px;font-size:12.5px}
.sd-recent-header{font-weight:600;color:var(--text-muted);margin-bottom:8px;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px}
/* SD-02 follow-up: per-action undo dropdown */
.sd-recent-dropdown{margin-top:6px;border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);background:var(--card-bg);overflow:hidden}
.sd-recent-summary{list-style:none;display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;font-weight:600;color:var(--text-primary);user-select:none;outline:none;transition:background var(--motion-fast)}
.sd-recent-summary::-webkit-details-marker{display:none}
.sd-recent-summary:hover{background:var(--surface)}
.sd-recent-summary:focus-visible{box-shadow:0 0 0 2px var(--app-accent) inset}
.sd-recent-summary-label{font-size:13px}
.sd-recent-summary-count{flex:1;font-weight:500;color:var(--text-muted);font-size:11.5px}
.sd-recent-summary-chev{display:inline-flex;color:var(--text-muted);transition:transform var(--motion-base) var(--ease-out)}
.sd-recent-summary-chev svg{width:12px;height:12px;display:block}
.sd-recent-dropdown[open] .sd-recent-summary-chev{transform:rotate(180deg)}
.sd-recent-dropdown[open] .sd-recent-summary{border-bottom:0.5px solid var(--chrome-border)}
.sd-recent-list{padding:8px 10px 10px 10px;display:flex;flex-direction:column;gap:6px;max-height:320px;overflow-y:auto}
.sd-recent-list .sd-recent-row{margin-bottom:0}
.sd-recent-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:var(--radius-md);border:0.5px solid var(--chrome-border);margin-bottom:6px;background:var(--card-bg)}
.sd-recent-row.sd-recent-staged{background:color-mix(in srgb,var(--err) 8%,transparent);border-color:color-mix(in srgb,var(--err) 30%,var(--chrome-border))}
.sd-recent-meta{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.sd-recent-meta strong{font-size:13px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sd-recent-path{color:var(--text-muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sd-recent-when{color:var(--text-muted);font-size:11px}
.sd-bc-static{color:var(--text-muted);font-size:13px}
.sd-info-card{grid-column:1/-1;background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);padding:28px 32px;max-width:560px;margin:24px auto;box-shadow:0 4px 14px rgba(0,0,0,.04),0 0 0 0.5px rgba(0,0,0,.04);text-align:left}
.sd-info-title{font-size:16px;font-weight:600;color:var(--text-primary);margin-bottom:10px;letter-spacing:-.2px}
.sd-info-body{font-size:13px;color:var(--text-secondary);line-height:1.55;margin-bottom:18px}
.sd-info-body code{background:var(--surface-2);padding:1px 6px;border-radius:var(--radius-sm);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:var(--text-primary)}
.sd-info-actions{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.sd-connect-btn{display:inline-flex;align-items:center;font-weight:600}
.sd-row{grid-column:span 1;display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--card-bg);border:none;border-radius:var(--radius-md);cursor:pointer;text-align:left;font-family:inherit;color:inherit;box-shadow:var(--shadow-e1);transition:transform var(--motion-fast) var(--ease-out),box-shadow var(--motion-base) var(--ease-out),background var(--motion-fast)}
.sd-row:hover{transform:translateY(-1px);box-shadow:var(--shadow-e2);background:var(--surface)}
.sd-row:active{transform:scale(.99)}
/* V39yyy — sd-row press feedback */
.sd-row:active{transform:translateY(0) scale(.995);box-shadow:0 1px 3px rgba(0,0,0,.06),0 0 0 0.5px rgba(0,0,0,.06)}
.sd-row:focus-visible{outline:none;box-shadow:0 0 0 2px var(--app-accent) inset}
/* #29 — selected personal-folder file row (previewing in the split pane) */
.sd-row.is-selected{background:color-mix(in srgb,var(--app-accent) 10%,var(--card-bg));box-shadow:0 0 0 1.5px color-mix(in srgb,var(--app-accent) 55%,transparent),var(--shadow-e1)}
.sd-row.is-selected .sd-row-icon{color:var(--app-accent)}
.sd-row-icon{width:18px;height:18px;flex-shrink:0;color:var(--text-muted)}
.sd-row.sd-folder .sd-row-icon{color:color-mix(in srgb,var(--app-accent) 75%,transparent)}
.sd-row-name{flex:1;font-size:13.5px;color:var(--text-primary);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sd-row-meta{font-size:11px;color:var(--text-muted);flex-shrink:0;letter-spacing:.1px}
.sd-loading{grid-column:1/-1;padding:32px;text-align:center;color:var(--text-muted);font-size:13px}
/* 2026-05-27 — on-brand grid loading state: file-card-shaped shimmer skeletons
   (reuses .rt-skeleton's pulse) so a loading SD/Files grid reads as content arriving.
   Spans the parent grid; its own auto-fill grid mirrors the real card layout. */
.files-skel-wrap{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:10px}
.files-skel-card{background:var(--card-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-e1);overflow:hidden;display:flex;flex-direction:column}
.files-skel-thumb{display:block;height:84px;border-radius:0;background:linear-gradient(90deg,var(--surface-2) 0%,var(--surface-3) 50%,var(--surface-2) 100%);background-size:200% 100%;animation:rtSkelPulse 1.4s ease-in-out infinite}
.files-skel-meta{display:flex;flex-direction:column;gap:7px;padding:11px 13px 13px}
.files-skel-meta .rt-skeleton{height:12px}
.sd-empty{grid-column:1/-1;padding:48px 32px;text-align:center;color:var(--text-muted)}
.sd-empty-icon{margin-bottom:14px;color:var(--text-muted)}
.sd-empty-msg{font-size:14px;color:var(--text-secondary);font-weight:500;margin-bottom:6px}
.sd-empty-sub{font-size:12px;color:var(--text-muted)}
.sd-bc-current{display:inline-flex;align-items:center;gap:10px}
/* Apple/Finder-style flat breadcrumb (used by SD-01 global pane + SD-02 per-project panel).
   Segments are flat text, not buttons-with-borders. Clickable segments get the accent color
   on hover; the current (last) segment is bold neutral. Chevron is a thin muted glyph. */
.files-bc-link,.sd-bc-link{appearance:none;-webkit-appearance:none;background:transparent;border:0;padding:0;margin:0;font:inherit;font-size:13px;color:var(--text-secondary);cursor:pointer;letter-spacing:-.05px;line-height:1.3;text-align:left;border-radius:var(--radius-xs);transition:color var(--motion-fast),background var(--motion-fast)}
.files-bc-link:hover,.sd-bc-link:hover{color:var(--app-accent);text-decoration:underline;text-underline-offset:2px}
.files-bc-link:focus-visible,.sd-bc-link:focus-visible{outline:none;box-shadow:0 0 0 2px var(--app-accent) inset;background:color-mix(in srgb,var(--app-accent) 8%,transparent)}
.files-bc-current,.sd-bc-current{font-size:13px;font-weight:600;color:var(--text-primary);letter-spacing:-.05px;line-height:1.3}
.files-bc-sep{font-size:12px;color:var(--text-muted);margin:0 6px;opacity:.6;user-select:none}
.sd-count{display:inline-block;margin-left:10px;padding:1px 8px;font-size:11px;font-weight:500;color:var(--text-muted);background:var(--surface-2);border-radius:var(--radius-md);letter-spacing:0;line-height:1.4}
.sd-upload-btn{background:var(--app-accent);color:var(--on-accent);border:none;border-radius:var(--radius-sm);padding:4px 10px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;transition:opacity var(--motion-fast),transform var(--motion-fast),transform var(--motion-fast)}
.sd-upload-btn:hover{opacity:.92;transform:translateY(-1px)}
.sd-upload-btn:active{transform:scale(.97);opacity:1}
.sd-upload-btn:active{transform:translateY(0)}
/* Mobile: stack the SD info card padding */
@media (max-width: 640px){
  .sd-info-card{padding:18px 16px;margin:12px;max-width:none}
  .sd-row{padding:14px 12px}
  .sd-row-name{font-size:14px}
}
/* V82 — file card: theme-adaptive e1, spring hover bloom (lift + scale → e3) */
/* Files redesign 2026-05-26 📘 — card = thumbnail/glyph banner + body. Solid
   content surface (legibility first), e1 resting → e3 hover bloom + spring lift. */
/* pass-3 (_STANDARD.md A.4): file card = solid raised card (depth via ELEVATION, was --surface-grad tint). */
/* 2026-06-20 — ONE-SURFACE RULE: the modal .file-card now shares the SAME material
   as the files-workspace .flw-tile (surface-grad fill + specular --bevel-top edge +
   spring press), so the same data never reads as two different surfaces. The bevel
   sits in the box-shadow stack with the elevation token; hover lifts via elevation
   (e2→e3) + the accent glow, keeping the bevel highlight. */
.file-card{background:var(--surface-grad,var(--card-bg));border:.5px solid rgba(0,0,0,.05);border-radius:var(--radius-lg);cursor:pointer;box-shadow:var(--bevel-top),var(--shadow-e2);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-base) ease,opacity var(--motion-base) var(--ease-out),background var(--motion-base);display:flex;flex-direction:column;position:relative;overflow:hidden}
.file-card:hover{transform:translateY(-3px) scale(1.008);box-shadow:var(--bevel-top),var(--shadow-e3),var(--glow-accent-soft);background:var(--surface-grad-hover,var(--surface-grad,var(--card-bg)))}
.file-card:active{transform:translateY(-1px) scale(.985);box-shadow:var(--bevel-top),var(--shadow-e2)}
.file-card.dragging{opacity:.5;transform:scale(.98)}
/* Media banner — tinted category-glyph by default; real thumbnail for images */
/* #32 — the preview thumbnail gets more of the card (108→132px) so the media leads
   and the info footer is the supporting element, not the dominant one. */
.file-card-media{position:relative;height:132px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:color-mix(in srgb,var(--app-accent) 14%,var(--card-bg));color:var(--app-accent);border-bottom:0.5px solid color-mix(in srgb,var(--app-accent) 14%,transparent)}
.files-page-grid.files-size-sm:not(.files-list-mode) .file-card-media{height:104px}
.files-page-grid.files-size-lg:not(.files-list-mode) .file-card-media{height:172px}
.file-card-media.cat-spreadsheet{background:color-mix(in srgb,var(--color-success) 14%,var(--card-bg));color:color-mix(in srgb,var(--color-success) 80%,var(--text-primary));border-bottom-color:color-mix(in srgb,var(--color-success) 16%,transparent)}
.file-card-media.cat-presentation{background:color-mix(in srgb,#ff9500 15%,var(--card-bg));color:#ff9500;border-bottom-color:color-mix(in srgb,#ff9500 16%,transparent)}
.file-card-media.cat-drawing{background:color-mix(in srgb,#af52de 15%,var(--card-bg));color:#af52de;border-bottom-color:color-mix(in srgb,#af52de 16%,transparent)}
.file-card-media.cat-image{background:color-mix(in srgb,#ff2d55 14%,var(--card-bg));color:#ff2d55;border-bottom-color:color-mix(in srgb,#ff2d55 16%,transparent)}
.file-card-media.cat-archive{background:color-mix(in srgb,#8e8e93 16%,var(--card-bg));color:#8e8e93}
.file-card-media.cat-other{background:var(--surface-2);color:var(--text-muted)}
.file-card-media-glyph{width:38px;height:38px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.08))}
.file-card-ext{position:absolute;bottom:8px;right:9px;font-size:9.5px;font-weight:800;letter-spacing:.4px;padding:1px 6px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--card-bg) 78%,transparent);color:currentColor;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:inset 0 0 0 .5px color-mix(in srgb,currentColor 30%,transparent)}
/* Image thumbnail — fills the banner; glyph fallback shown if load fails */
.file-card-media.is-thumb{background:var(--surface-2)}
.file-card-media.is-thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* Lazy-rendered real thumbnail (pdf/docx/xlsx/html) — covers the glyph once it lands,
   top-anchored so the first page reads. The glyph/ext underneath stays as the fallback. */
.file-card-media .file-thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block;background:#fff;animation:fileThumbIn var(--motion-base) var(--ease-out)}
.file-card-media.has-thumb .file-card-media-glyph,.file-card-media.has-thumb .file-card-ext{opacity:0}
@keyframes fileThumbIn{from{opacity:0}to{opacity:1}}
/* HTML/docx/xlsx live mini-preview: render the doc at ~2.6x the slot, scaled down, top-
   anchored. Pointer-inert so the whole chip stays one click target. */
.file-card-media .file-thumb-frame{position:absolute;top:0;left:0;width:260%;height:260%;border:0;transform:scale(.385);transform-origin:top left;background:#fff;pointer-events:none;animation:fileThumbIn var(--motion-base) var(--ease-out)}
/* list-row mini thumbnail */
.file-row-icon .file-thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block;border-radius:inherit;background:#fff}
.file-row-icon[data-thumb-file]{position:relative;overflow:hidden}
.file-row-icon.has-thumb svg{opacity:0}
.file-card-media-fallback{display:none;position:absolute;inset:0;align-items:center;justify-content:center}
.file-card-media-fallback svg{width:34px;height:34px;opacity:.5}
.file-card-media.thumb-failed img{display:none}
.file-card-media.thumb-failed .file-card-media-fallback{display:flex}
/* #32 — tighter footer so the info doesn't eat the card; name stays prominent,
   meta is a single quiet line, description clamps to 1 line. */
.file-card-body{display:flex;flex-direction:column;gap:3px;padding:9px 12px 11px}
/* iOS/iPadOS scroll-lock guard: stacking backdrop-filter on every card inside a
   scrollable grid freezes touch-scroll in WebKit. On ALL touch devices (incl.
   iPad-landscape, which uses the desktop layout), drop the blur on card-level
   chrome — touch can't hover anyway, so the frost added nothing there. The
   floating selection bar (one element, not per-card) keeps its glass. */
@media (hover:none){
  .file-card-actions{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--surface)}
  .file-card-check{backdrop-filter:none;-webkit-backdrop-filter:none}
}
/* Empty-state grid dropzone (Apple Photos / Finder style) */
.files-grid-empty-dropzone{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;justify-content:center;height:220px;border:2px dashed color-mix(in srgb,var(--app-accent) 30%,transparent);border-radius:var(--radius-lg);background:color-mix(in srgb,var(--app-accent) 4%,transparent);color:var(--app-accent);font-size:13.5px;font-weight:500;cursor:pointer;transition:background var(--motion-fast),border-color var(--motion-fast),transform var(--motion-fast);padding:24px;text-align:center}
.files-grid-empty-dropzone.dragover{background:color-mix(in srgb,var(--app-accent) 12%,transparent);border-color:var(--app-accent);transform:scale(1.01)}
.files-grid-empty-dropzone .ico-circle{width:48px;height:48px;border-radius:50%;background:color-mix(in srgb,var(--app-accent) 14%,transparent);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.files-grid-empty-dropzone .ico-circle svg{width:22px;height:22px}
.files-grid-empty-dropzone .dz-sub{font-size:11.5px;color:var(--text-muted);margin-top:6px;font-weight:400}
.file-card-row{display:flex;align-items:flex-start;gap:10px;min-width:0}
/* V82 — larger icon tile, stronger tint, glass inner highlight + soft glow */
.file-card-icon{width:44px;height:44px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:color-mix(in srgb,var(--app-accent) 22%,transparent);color:var(--app-accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 3px color-mix(in srgb,var(--app-accent) 20%,transparent)}
.file-card-icon.cat-spreadsheet{background:color-mix(in srgb,var(--color-success) 22%,transparent);color:color-mix(in srgb,var(--color-success) 78%,var(--text-primary))}
.file-card-icon.cat-presentation{background:color-mix(in srgb,#ff9500 22%,transparent);color:#ff9500}
.file-card-icon.cat-drawing{background:color-mix(in srgb,#af52de 22%,transparent);color:#af52de}
.file-card-icon.cat-image{background:color-mix(in srgb,#ff2d55 22%,transparent);color:#ff2d55}
.file-card-icon.cat-archive{background:color-mix(in srgb,#8e8e93 22%,transparent);color:#8e8e93}
.file-card-icon.cat-document{background:color-mix(in srgb,var(--app-accent) 22%,transparent);color:var(--app-accent)}
.file-card-icon.cat-other{background:var(--surface-2);color:var(--text-muted)}
.file-card-icon svg{width:22px;height:22px}
.file-card-name{font-size:13px;font-weight:650;color:var(--text-primary);letter-spacing:-.15px;line-height:1.3;min-width:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.file-card-meta{font-size:11px;color:var(--text-muted);letter-spacing:-.05px;line-height:1.4}
.file-card-meta .file-card-project{color:var(--text-secondary,var(--text-primary));font-weight:600}
.file-card-desc{font-size:11.5px;color:var(--text-muted);line-height:1.4;letter-spacing:-.05px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* Browser Tier-1 — web-snapshot subtitle (globe + source host + captured date). */
.file-snap-sub{display:flex;align-items:center;gap:5px;margin-top:2px;font-size:11px;color:var(--app-accent);font-weight:600;letter-spacing:-.05px;overflow:hidden}
.file-snap-ico{width:12px;height:12px;flex:0 0 auto;color:var(--app-accent)}
.file-snap-src{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.file-snap-when{color:var(--text-muted);font-weight:500;white-space:nowrap}
/* Hover-reveal frosted action cluster (chrome over content → glass is OK here) */
/* FIX (hover tools covered by the select circle): the actions row is right-anchored; on a narrow card its
   7 icons extended LEFT under the top-left select-circle (which has z-index:2 → it painted OVER the leftmost
   tool). Give the row a left boundary that clears the circle (9+22+7), and wrap/right-align so it never
   underlaps it; a z-index below the circle keeps stacking sane. */
/* #33 — the hover tools used to sit at top:9px/right:9px, DIRECTLY over the preview
   thumbnail (covering it on hover). Anchor them to the card's BOTTOM edge instead so
   they overlay the info footer, never the preview. Full-width translucent bar reads
   as a clean action strip; the select-circle stays clear at top-left (#25). */
.file-card-actions{display:flex;gap:4px;flex-wrap:nowrap;justify-content:center;position:absolute;left:0;right:0;bottom:0;z-index:2;max-width:none;padding:7px 8px;border-radius:0 0 var(--radius-lg) var(--radius-lg);background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--card-bg) 92%,transparent) 32%);backdrop-filter:var(--frost-blur,blur(20px) saturate(1.8));-webkit-backdrop-filter:var(--frost-blur,blur(20px) saturate(1.8));box-shadow:inset 0 .5px 0 var(--chrome-border);opacity:0;transform:translateY(4px);transition:opacity var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.file-card:hover .file-card-actions,.file-card:focus-within .file-card-actions,.file-row:hover .file-card-actions,.file-row:focus-within .file-card-actions{opacity:1;transform:none}
/* W5-2 — touch devices can't hover, and the card body's tap opens the file (never Download/Delete),
   so on any coarse-pointer device (iPhone AND iPad — the field devices) the action bar must be
   permanently visible. Previously only a max-width:640px block revealed it, leaving tablets (>640px)
   with no reachable Download/Delete — a HARD Undo/Delete-Everywhere violation. Apply across all
   touch viewports. */
@media (hover:none),(pointer:coarse){
  .file-card-actions{opacity:1 !important;transform:none !important}
}
.file-card-action{background:transparent;border:none;width:26px;height:26px;border-radius:var(--radius-sm);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--text-secondary,var(--text-muted));transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast)}
.file-card-action:hover{background:color-mix(in srgb,var(--text-primary) 9%,transparent);color:var(--text-primary)}
.file-card-action:active{transform:scale(.88)}
.file-card-action.danger:hover{background:color-mix(in srgb,var(--color-error) 16%,transparent);color:var(--color-error)}
.file-card-action svg{width:13px;height:13px}
/* Multi-select checkbox (hover-reveal; persistent + filled when selected) */
.file-card-check{position:absolute;top:9px;left:9px;width:22px;height:22px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--card-bg) 60%,#000 18%);background:color-mix(in srgb,var(--surface) 92%,transparent);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:transparent;opacity:0;z-index:2;transition:opacity var(--motion-fast),background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast)}
.file-card-check svg{width:12px;height:12px}
.file-card:hover .file-card-check,.files-page-grid.files-select-mode .file-card-check,.file-row:hover .file-card-check,.files-page-grid.files-select-mode .file-row .file-card-check{opacity:1}
.file-card-check:active{transform:scale(.88)}
.file-selected .file-card-check{opacity:1;background:var(--app-accent);border-color:var(--app-accent);color:var(--on-accent)}
.file-card.file-selected{box-shadow:var(--shadow-e2),0 0 0 2px var(--app-accent)}
/* List view */
/* 2026-06-08 — list rows are RAISED chips too (matching the grid cards), so list-mode
   reads as raised chips on the raised surface, separated by a gap (not a flat divider). */
.files-page-grid.files-list-mode{display:flex;flex-direction:column;gap:7px;padding:2px 2px 24px}
/* #31 — LIST density. FIX: rows are .file-row (a grid), NOT .files-card — the old
   rules targeted the wrong element so sm/md/lg barely differed ("vanky"). Now each
   size changes the row's vertical padding + gap for a REAL density step, with a
   smooth transition so cycling isn't abrupt. md = the 7px-gap / 9px-pad default. */
.files-page-grid.files-list-mode.files-size-sm{gap:4px}
.files-page-grid.files-list-mode.files-size-sm .file-row{padding-top:5px;padding-bottom:5px;font-size:12px}
.files-page-grid.files-list-mode.files-size-lg{gap:11px}
.files-page-grid.files-list-mode.files-size-lg .file-row{padding-top:15px;padding-bottom:15px;font-size:13.5px}
.file-row{transition:background var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast) var(--ease-spring),padding var(--motion-fast)}
/* #36 — the last track is a dedicated ACTIONS column: 0-width at rest (row shows all its
   data, incl. the full filename), expands to fit the tools on hover. So the hover tools
   live IN the layout and NEVER overlay the filename or any content — the old absolute
   overlay covered the name and flickered while scrolling. */
.file-row{display:grid;grid-template-columns:26px minmax(0,2.4fr) minmax(0,1.1fr) 72px 92px minmax(0,1fr) 0fr;align-items:center;gap:12px;padding:9px 12px 9px 40px;position:relative;cursor:pointer;border-radius:var(--radius-md);background:var(--card-bg);border:.5px solid var(--chrome-border);box-shadow:var(--shadow-e1);transition:grid-template-columns var(--motion-fast),background var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.file-row:hover,.file-row:focus-within{grid-template-columns:26px minmax(0,2.4fr) minmax(0,1.1fr) 72px 92px minmax(0,1fr) auto}
.file-row:hover{background:var(--card-bg);box-shadow:var(--shadow-e2);transform:translateY(-1px)}
.file-row.file-selected{background:color-mix(in srgb,var(--app-accent) 10%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--app-accent) 40%,transparent)}
.file-row .file-card-check{top:50%;left:10px;transform:translateY(-50%)}
.file-row .file-card-check:active{transform:translateY(-50%) scale(.88)}
.file-row-icon{width:30px;height:30px;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:color-mix(in srgb,var(--app-accent) 16%,transparent);color:var(--app-accent);overflow:hidden;grid-column:1;margin-left:-14px}
.file-row-icon svg{width:16px;height:16px}
.file-row-icon.is-thumb img{width:100%;height:100%;object-fit:cover}
.file-row-icon.is-thumb .file-row-icon-fb{display:none}
.file-row-icon.cat-spreadsheet{background:color-mix(in srgb,var(--color-success) 16%,transparent);color:color-mix(in srgb,var(--color-success) 80%,var(--text-primary))}
.file-row-icon.cat-presentation{background:color-mix(in srgb,#ff9500 16%,transparent);color:#ff9500}
.file-row-icon.cat-drawing{background:color-mix(in srgb,#af52de 16%,transparent);color:#af52de}
.file-row-icon.cat-image{background:color-mix(in srgb,#ff2d55 16%,transparent);color:#ff2d55}
.file-row-icon.cat-archive{background:color-mix(in srgb,#8e8e93 18%,transparent);color:#8e8e93}
.file-row-icon.cat-other{background:var(--surface-2);color:var(--text-muted)}
.file-row-name{font-size:13px;font-weight:600;color:var(--text-primary);letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-row-proj{font-size:11.5px;color:var(--text-secondary,var(--text-muted));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-row-meta{font-size:11.5px;color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* #31 — in a list row the actions were position:static → a 7th grid item with no
   column → the browser made a 206px IMPLICIT ROW (7 icons wrapping at max-width:0),
   ballooning every list row to ~260-280px tall (the "vanky" list). Anchor them as a
   right-edge overlay on hover (out of grid flow) on a single non-wrapping line so the
   row height is driven only by the text rows. */
/* #36 — list-mode tools sit in the row's actions column (in-flow, not an overlay).
   The column is 0fr at rest so the tools are clipped/hidden; on row hover the column
   grows to `auto` (see .file-row:hover template) and they slide in. Never over the name. */
.file-row .file-card-actions{position:static;grid-column:7;justify-self:end;flex-wrap:nowrap;max-width:none;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;opacity:0;padding:0;margin:0;overflow:hidden;transition:opacity var(--motion-fast)}
.file-row:hover .file-card-actions,.file-row:focus-within .file-card-actions{opacity:1}
.file-row .file-card-cmt-badge{margin-left:6px}
/* Floating selection action bar */
.files-selbar{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translate(-50%,16px);z-index:var(--z-top);display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:var(--frost-blur,blur(20px) saturate(1.8));-webkit-backdrop-filter:var(--frost-blur,blur(20px) saturate(1.8));box-shadow:var(--shadow-e4),inset 0 1px 0 rgba(255,255,255,.18);opacity:0;transition:opacity var(--motion-base),transform var(--motion-base) var(--ease-spring);max-width:calc(100vw - 24px)}
.files-selbar.show{opacity:1;transform:translate(-50%,0)}
.files-selbar-x{width:28px;height:28px;border-radius:50%;border:none;background:color-mix(in srgb,var(--text-primary) 9%,transparent);color:var(--text-primary);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--motion-fast),transform var(--motion-fast)}
.files-selbar-x:hover{background:color-mix(in srgb,var(--text-primary) 16%,transparent)}
.files-selbar-x:active{transform:scale(.9)}
.files-selbar-x svg{width:13px;height:13px}
.files-selbar-count{font-size:13px;font-weight:700;color:var(--text-primary);letter-spacing:-.1px;white-space:nowrap;font-variant-numeric:tabular-nums}
.files-selbar-link{background:none;border:none;font-size:12px;font-weight:600;color:var(--app-accent);cursor:pointer;font-family:inherit;white-space:nowrap;padding:0}
.files-selbar-link:hover{text-decoration:underline}
.files-selbar-actions{display:flex;gap:4px;border-left:.5px solid var(--chrome-border);padding-left:10px;margin-left:2px}
.files-selbar-btn{height:30px;padding:0 11px;display:inline-flex;align-items:center;gap:5px;background:transparent;border:none;border-radius:var(--radius-md);color:var(--text-primary);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast)}
.files-selbar-btn svg{width:13px;height:13px}
.files-selbar-btn:hover{background:color-mix(in srgb,var(--text-primary) 9%,transparent)}
.files-selbar-btn:active{transform:scale(.95)}
.files-selbar-btn.danger{color:var(--color-error)}
.files-selbar-btn.danger:hover{background:color-mix(in srgb,var(--color-error) 14%,transparent)}
@media (max-width:560px){.files-selbar-link{display:none}.files-selbar-btn span,.files-selbar-btn{font-size:0}.files-selbar-btn svg{width:16px;height:16px}.files-selbar-btn{padding:0 9px}}
.file-empty{text-align:center;padding:56px 24px;color:var(--text-muted);font-size:14px;letter-spacing:-.05px;grid-column:1/-1}
/* V115 — crafted "All Files" (no-scope) empty state, modeled on .photos-empty-craft */
.files-empty-craft{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:9px;padding:48px 24px;border:1.5px dashed color-mix(in srgb,var(--app-accent) 26%,transparent);border-radius:var(--radius-lg);background:color-mix(in srgb,var(--app-accent) 4%,transparent)}
/* V121 — shared crafted empty state for in-modal tab sections (Notes/Tasks/COs/Invoices/POs) */
/* Crafted empty state — an intentional, on-brand invitation (soft tinted dashed
   zone + bloomed icon), never a dead void. DESIGN.md empty-states rule. */
.rt-empty{display:flex;flex-direction:column;align-items:center;gap:9px;padding:30px 22px;margin:6px 2px;text-align:center;border-radius:var(--radius-group);border:1px dashed color-mix(in srgb,var(--app-accent) 22%,var(--chrome-border));background:radial-gradient(120% 80% at 50% -10%,color-mix(in srgb,var(--app-accent) 5%,transparent),transparent 70%)}
.rt-empty-ico{width:48px;height:48px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 1px color-mix(in srgb,var(--app-accent) 10%,transparent),0 4px 14px color-mix(in srgb,var(--app-accent) 14%,transparent)}
.rt-empty-ico svg{width:22px;height:22px}
.rt-empty-title{font-size:14.5px;font-weight:700;color:var(--text-primary);letter-spacing:-.2px}
.rt-empty-sub{font-size:12.5px;color:var(--text-muted);max-width:320px;line-height:1.45}
/* Item 5 — primary CTA inside a crafted empty state + a success-toned "all clear" variant. */
.rt-empty-cta-btn{margin-top:4px}
/* 📘 Q-REL-9 follow-up (2026-07-30) — the warn-toned "couldn't load" variant. FAILED IS NOT EMPTY:
   a register whose read failed must not borrow the calm accent tone of a genuine zero state, or the
   user reads an outage as fact. Mirrors the shipped Q-REL-10 team-chat affordance (.tc-empty-failed)
   in tone + anatomy, expressed in this surface's own tokens rather than a second bespoke family. */
.rt-empty-failed{border-style:solid;border-color:color-mix(in srgb,var(--warn) 38%,var(--chrome-border));background:radial-gradient(120% 80% at 50% -10%,color-mix(in srgb,var(--warn) 8%,transparent),transparent 70%)}
.rt-empty-failed .rt-empty-ico{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 1px color-mix(in srgb,var(--warn) 12%,transparent),0 4px 14px color-mix(in srgb,var(--warn) 16%,transparent)}
.rt-empty-failed .rt-empty-ico svg{width:22px;height:22px}
.rt-empty-act{margin-top:2px}
.rt-empty-act>button{font:inherit;font-size:12.5px;font-weight:700;color:var(--warn-fg,var(--text-primary));background:var(--warn-bg,color-mix(in srgb,var(--warn) 12%,transparent));border:1px solid color-mix(in srgb,var(--warn) 34%,var(--chrome-border));border-radius:var(--radius-group);padding:7px 14px;cursor:pointer;transition:background var(--motion-fast),border-color var(--motion-fast)}
.rt-empty-act>button:hover{background:color-mix(in srgb,var(--warn) 20%,transparent);border-color:color-mix(in srgb,var(--warn) 50%,var(--chrome-border))}
.rt-empty-act>button:focus-visible{outline:2px solid var(--warn);outline-offset:2px}
/* 📒 V160 — density-program primitives. (1) [data-pfv-fill]: a workspace layout fills the
   viewport below its own top edge (JS sets --fill-top at render; resize re-measures) so tab
   canvases never strand a dead matte void below the content. (2) .rt-emptyplus: the
   affordance-rich zero state — hero + one primary action + secondary action chips + "what
   lives here" hint cards + an optional async live slot. Sparse states must EARN their footprint. */
[data-pfv-fill]{min-height:calc(100dvh - var(--fill-top,240px) - 24px)}
.rt-emptyplus{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:34px 24px;height:100%;min-height:280px;border-radius:var(--radius-group);border:1.5px dashed color-mix(in srgb,var(--app-accent) 24%,var(--chrome-border));background:radial-gradient(120% 90% at 50% -10%,color-mix(in srgb,var(--app-accent) 6%,transparent),transparent 70%);transition:border-color var(--motion-fast),background var(--motion-fast)}
.rt-emptyplus.drag-over{border-color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 8%,transparent)}
.rt-emptyplus .rt-empty-ico{width:54px;height:54px;border-radius:16px}
.rt-emptyplus .rt-empty-ico svg{width:24px;height:24px}
.rt-emptyplus-title{font-size:16px;font-weight:800;letter-spacing:-.015em;color:var(--text-primary)}
.rt-emptyplus-sub{font-size:12.5px;color:var(--text-muted);max-width:420px;line-height:1.5}
.rt-emptyplus-cta{margin-top:2px}
.rt-emptyplus-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:6px}
.rt-emptyplus-chip{appearance:none;display:inline-flex;align-items:center;gap:6px;border:.5px solid var(--chrome-border);background:var(--card-bg);color:var(--text-primary);font-size:12px;font-weight:700;padding:8px 14px;border-radius:999px;cursor:pointer;box-shadow:var(--shadow-e1);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
.rt-emptyplus-chip:hover{transform:translateY(-1px);box-shadow:var(--shadow-e2)}
.rt-emptyplus-chip:active{transform:scale(.97)}
.rt-emptyplus-chip svg{width:13px;height:13px;color:var(--app-accent)}
.rt-emptyplus-hints{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,190px));justify-content:center;gap:10px;margin-top:14px;width:100%}
.rt-emptyplus-hint{background:var(--card-bg);border-radius:14px;box-shadow:var(--shadow-e1);border:.5px solid color-mix(in srgb,var(--text-primary) 5%,transparent);padding:12px 14px;text-align:left;display:flex;flex-direction:column;gap:4px}
/* 🖇️ 2026-07-08 (Gavin) — the hint icon was a bare 15px glyph pinned to the chip's top-left with
   dead space beside it. Give it a real centered icon tile (the app's icon-chip idiom) so it reads
   as a deliberate mark, not a stray sprite. Shared component → fixes every zero-state that uses it. */
.rt-emptyplus-hint > svg{width:26px;height:26px;flex:0 0 26px;padding:5.5px;box-sizing:border-box;border-radius:8px;
  color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 11%,transparent);
  box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--app-accent) 18%,transparent);margin-bottom:2px}
.rt-emptyplus-hint .t{font-size:12px;font-weight:800;color:var(--text-primary)}
.rt-emptyplus-hint .s{font-size:11px;color:var(--text-muted);line-height:1.4}
.rt-emptyplus-live{margin-top:8px;font-size:12.5px;font-weight:700;color:var(--text-secondary)}
.rt-emptyplus-live:empty{display:none}
.rt-emptyplus-live svg{width:16px;height:16px;vertical-align:-3px;margin-right:2px}
/* 📖 V163 — zero-state stage layouts: action card beside a stretch .rt-emptyplus that owns the
   rest of the stage (Time Clock / Receiving / Punch sparse states). Fill-the-stage rides
   [data-pfv-fill]; the empty stretches, the action column keeps its natural height. */
.tc-zero-grid{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:14px;align-items:stretch}
.tc-zero-grid .rt-emptyplus{min-height:100%}
.tc-zero-hero{display:flex;flex-direction:column;gap:12px;align-self:start}
@media (max-width:900px){.tc-zero-grid{grid-template-columns:minmax(0,1fr)}}
.ri-wrap[data-pfv-fill] .ri-main{display:flex;flex-direction:column}
.ri-wrap[data-pfv-fill] .ri-panel:last-child{flex:1;display:flex;flex-direction:column}
.ri-wrap[data-pfv-fill] .ri-panel:last-child .ri-hist-grid{flex:1;display:flex;flex-direction:column}
.ri-wrap[data-pfv-fill] .ri-hist-grid .rt-emptyplus{flex:1}
.ri-rail-guide{font-size:12px;color:var(--text-secondary);line-height:1.5;margin-bottom:12px}
.ri-rail-door{appearance:none;width:100%;display:flex;align-items:center;gap:8px;border:.5px solid var(--chrome-border);background:var(--surface-2);border-radius:11px;padding:9px 11px;font:700 12px/1.3 inherit;font-family:inherit;color:var(--text-primary);cursor:pointer;transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.ri-rail-door:hover{background:var(--surface);transform:translateY(-1px)}
.ri-rail-door:active{transform:scale(.98)}
.pfv-empty-full[data-pfv-fill]{display:flex;align-items:center;justify-content:center}
.rt-empty.rt-empty-ok{border-color:color-mix(in srgb,var(--color-success,#34c759) 26%,var(--chrome-border));background:radial-gradient(120% 80% at 50% -10%,color-mix(in srgb,var(--color-success,#34c759) 6%,transparent),transparent 70%)}
.rt-empty-ico.rt-empty-ico-ok{background:color-mix(in srgb,var(--color-success,#34c759) 13%,transparent);color:var(--color-success,#34c759);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 1px color-mix(in srgb,var(--color-success,#34c759) 12%,transparent),0 4px 14px color-mix(in srgb,var(--color-success,#34c759) 14%,transparent)}
/* G3-P3 — error-tinted variant of .rt-empty + a Retry affordance (designed, recoverable error state) */
.rt-empty-err{border-color:color-mix(in srgb,var(--color-error,#ef4444) 28%,var(--chrome-border));background:radial-gradient(120% 80% at 50% -10%,color-mix(in srgb,var(--color-error,#ef4444) 6%,transparent),transparent 70%)}
.rt-empty-ico-err{background:color-mix(in srgb,var(--color-error,#ef4444) 13%,transparent);color:var(--color-error,#ef4444);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 1px color-mix(in srgb,var(--color-error,#ef4444) 12%,transparent),0 4px 14px color-mix(in srgb,var(--color-error,#ef4444) 14%,transparent)}
.rt-err-retry{margin-top:4px;appearance:none;border:.5px solid var(--chrome-border);background:var(--surface-2,var(--surface));color:var(--text-primary);font:600 12.5px/1 system-ui;padding:8px 16px;border-radius:999px;cursor:pointer;transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring,ease-out),box-shadow var(--motion-fast)}
.rt-err-retry:hover{background:var(--surface);box-shadow:var(--shadow-e1)}
.rt-err-retry:active{transform:scale(.97)}
.rt-err-retry:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 26%,transparent)}
/* #34 — small inline retry pill for the compact cockpit todo-tile sub (too small for the full chip) */
.ct-retry{appearance:none;border:.5px solid var(--chrome-border);background:var(--surface-2,var(--surface));color:var(--app-accent);font:600 10.5px/1 system-ui;padding:3px 8px;border-radius:999px;cursor:pointer;transition:background var(--motion-fast),box-shadow var(--motion-fast)}
.ct-retry:hover{background:var(--surface);box-shadow:var(--shadow-e1)}
.ct-retry:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 26%,transparent)}
@media (prefers-reduced-motion:reduce){.rt-err-retry{transition:none}.rt-err-retry:active{transform:none}}
.files-empty-craft .ico-circle{width:50px;height:50px;border-radius:50%;background:color-mix(in srgb,var(--app-accent) 14%,transparent);display:flex;align-items:center;justify-content:center;color:var(--app-accent)}
.files-empty-craft .ico-circle svg{width:23px;height:23px}
.files-empty-title{font-size:15px;font-weight:700;color:var(--text-primary);letter-spacing:-.2px}
.files-empty-sub{font-size:12.5px;color:var(--text-muted);max-width:340px;text-align:center;line-height:1.45}
.files-empty-cta{margin-top:6px}
/* G3-P3c — the All-Files empty state offers BOTH upload + create-a-document (Document Studio) */
.files-empty-cta-row{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;align-items:center}
.files-dropzone{border:2px dashed color-mix(in srgb,var(--app-accent) 30%,transparent);border-radius:var(--radius-lg);padding:32px 24px;text-align:center;background:color-mix(in srgb,var(--app-accent) 5%,transparent);color:var(--app-accent);font-size:13px;font-weight:500;margin-bottom:12px;transition:background var(--motion-fast),border-color var(--motion-fast);cursor:pointer}
.files-dropzone.dragover{background:color-mix(in srgb,var(--app-accent) 14%,transparent);border-color:var(--app-accent)}
/* W2-N — immediate "uploading" state on a dropzone (pulsing border while the upload runs). */
.files-dropzone.uploading,.files-grid-empty-dropzone.uploading{border-style:solid;border-color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 10%,transparent);animation:filesDzPulse 1.1s var(--ease-out) infinite}
@keyframes filesDzPulse{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.files-dropzone.uploading,.files-grid-empty-dropzone.uploading{animation:none}}
.files-stat-chip{padding:2px 8px;border-radius:var(--radius-sm);background:var(--surface-2);font-size:11px;font-weight:500;color:var(--text-muted);letter-spacing:.2px;text-transform:uppercase}
/* ── Files Phase 2: tag chips, preview lightbox, card tags ── */
.file-card-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.file-card-tag{font-size:10px;font-weight:600;padding:2px 6px;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent);letter-spacing:.1px}
.file-card-tag-more{font-size:10px;font-weight:500;padding:2px 6px;border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text-muted)}
.file-card-cmt-badge{display:inline-flex;align-items:center;gap:3px;margin-left:6px;font-size:10px;font-weight:600;color:var(--text-muted);padding:1px 5px;border-radius:var(--radius-sm);background:var(--surface-2);vertical-align:middle}
.file-card-cmt-badge svg{width:9px;height:9px}
/* Tags row. Sits as a fixed-height child of .files-main; grid scrolls below. */
/* FIX (tags take too much space): tighten the band — small top margin, minimal bottom, no min-height
   floor (it only shows when there ARE tags, so no empty reserved band). */
.files-tag-chip-bar{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 6px;align-items:center;flex-shrink:0}
.files-tag-chip-bar:empty{display:none;margin:0}
/* #37 — inline variant: the tags live in the breadcrumb row now, not a separate band.
   Single-row, horizontal-scroll on overflow (no wrap → no extra vertical height), and it
   flexes to fill the space between the breadcrumb and the right-anchored controls. */
.files-tag-chip-inline{flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;margin:0;padding:1px 2px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.files-tag-chip-inline::-webkit-scrollbar{height:4px}
.files-tag-chip-inline::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text-primary) 18%,transparent);border-radius:2px}
.files-tag-chip-inline .files-tag-chip{flex:0 0 auto}
.files-tag-chip-inline:empty{display:none}
/* the breadcrumb no longer flexes to fill — it hugs its content so the tags sit beside it. */
.files-main-row > .files-breadcrumb{flex:0 1 auto;min-width:0}
/* right-anchor the row controls regardless of whether tags are present (the inline tag bar
   is display:none when empty, so a margin-left:auto here keeps the controls flush right). */
.files-main-row > #filesNewFolderBtn{margin-left:auto}
.files-tag-chip{background:var(--chrome-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-pill);padding:3px 10px;font-size:11px;font-weight:600;color:var(--text-primary);cursor:pointer;letter-spacing:-.05px}
.files-tag-chip:hover{background:var(--chrome-bg-hover)}
.files-tag-chip.active{background:var(--app-accent);color:var(--on-accent);border-color:var(--app-accent)}
.files-tag-chip.active:hover{background:color-mix(in srgb,var(--app-accent) 88%,#000)}
/* Preview lightbox */
.files-preview-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px) saturate(1.4);-webkit-backdrop-filter:blur(8px) saturate(1.4);z-index:var(--z-top);display:flex;align-items:stretch;justify-content:center;padding:4vh 3vw;opacity:1}
/* 2026-05-17 📘 visual fix V7: grid 1fr resolves to content min-content
   when content has intrinsic width (file preview can have a wide PDF/img
   render). Use minmax(0, 1fr) so the column shrinks BELOW content
   min-content, forcing horizontal scroll inside the body instead of
   blowing out the frame. Without this, on phones the head + body grow
   to ~627px wide, pushing the close X off-screen even though it's
   position:absolute right:8px. */
.files-preview-frame{background:var(--surface);border-radius:var(--radius-modal,18px);box-shadow:var(--lg-edge),var(--shadow-e5);width:100%;max-width:94vw;display:grid;grid-template-rows:auto 1fr;grid-template-columns:minmax(0, 1fr) 320px;grid-template-areas:"head head" "body side";overflow:hidden;animation:dgRise var(--motion-base) var(--ease-spring)}
.files-preview-frame:has(.files-preview-side[style*="none"]){grid-template-columns:minmax(0, 1fr) 0}
.files-preview-head{grid-area:head;display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-bottom:0.5px solid var(--chrome-border);gap:12px;background:var(--surface-grad);box-shadow:var(--lg-edge)}
.files-preview-title-wrap{min-width:0}
.files-preview-title{font-size:14.5px;font-weight:600;color:var(--text-primary);letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.files-preview-sub{font-size:11.5px;color:var(--text-muted);margin-top:2px}
.files-preview-actions{display:flex;gap:6px;align-items:center;flex-shrink:0}
.files-preview-btn{height:30px;padding:0 12px;font-size:12px}
/* 2026-06-25 — the rail now carries discrete ACTION buttons (Edit · Sign), not a body-mode toggle
   (markup is always-on). Styled as quiet action pills matching the Tags/Comments/Move family. */
.dv-mode-rail{display:inline-flex;gap:6px;align-items:center;flex-shrink:0}
.dv-action-btn{height:30px;padding:0 13px;border:0.5px solid var(--chrome-border);background:color-mix(in srgb,var(--text-primary) 4%,var(--surface));border-radius:var(--radius-sm);color:var(--text-secondary,var(--text-muted));cursor:pointer;display:inline-flex;align-items:center;gap:6px;font:600 12px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;transition:background var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast)}
.dv-action-btn svg{width:14px;height:14px}
.dv-action-btn:hover{color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 10%,var(--surface));border-color:color-mix(in srgb,var(--app-accent) 30%,var(--chrome-border))}
.dv-action-btn:active{transform:scale(.96)}
/* Sign is the authoritative action — give it a touch more presence (accent-tinted by default). */
.dv-action-btn[data-mode="sign"]{color:var(--app-accent);border-color:color-mix(in srgb,var(--app-accent) 28%,var(--chrome-border));background:color-mix(in srgb,var(--app-accent) 7%,var(--surface))}
.dv-action-btn[data-mode="sign"]:hover{background:color-mix(in srgb,var(--app-accent) 14%,var(--surface))}
@media (max-width:640px){.dv-action-btn span{display:none}.dv-action-btn{padding:0 10px}}
.files-preview-close{background:var(--surface-2);border:0.5px solid var(--chrome-border);width:30px;height:30px;border-radius:var(--radius-sm);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--text-muted)}
.files-preview-close:hover{background:var(--chrome-bg-hover);color:var(--text-primary)}
.files-preview-close svg{width:13px;height:13px}
.files-preview-body{grid-area:body;background:var(--surface-2);overflow:auto;display:flex;align-items:center;justify-content:center;min-height:74svh}
/* Item 4 (2026-05-25) — rendered .docx preview: a clean white document page,
   readable typographic defaults so converted Word HTML looks like a document. */
.files-docx-preview{align-self:flex-start;width:min(820px,100%);margin:24px auto;padding:48px 56px;background:#fff;color:#1d1d1f;border-radius:10px;box-shadow:0 4px 24px rgba(0,0,0,.12);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Georgia,serif;font-size:15px;line-height:1.6}
/* xlsx spreadsheet preview (SheetJS → HTML table) */
.xlsxv-wrap{height:100%;display:flex;flex-direction:column;overflow:hidden}
.xlsxv-tabs{display:flex;gap:4px;padding:8px 10px;overflow-x:auto;flex-shrink:0;border-bottom:0.5px solid var(--chrome-border);scrollbar-width:none}
.xlsxv-tabs::-webkit-scrollbar{display:none}
.xlsxv-tab{padding:5px 12px;border:none;background:var(--surface-2);border-radius:var(--radius-sm);font-size:12px;font-weight:600;color:var(--text-muted);cursor:pointer;white-space:nowrap;flex:0 0 auto}
.xlsxv-tab.active{background:var(--app-accent);color:var(--on-accent,#fff)}
.xlsxv-sheet{flex:1;overflow:auto;padding:12px;-webkit-overflow-scrolling:touch}
.xlsxv-sheet table{border-collapse:collapse;font-size:12px;background:var(--card-bg)}
.xlsxv-sheet td,.xlsxv-sheet th{border:0.5px solid var(--chrome-border);padding:4px 8px;white-space:nowrap;color:var(--text-primary)}
/* pptx preview — full visual render (PPTXjs) + text-only fallback */
.pptxv-wrap{height:100%;overflow:auto;padding:16px;background:var(--surface-2);-webkit-overflow-scrolling:touch}
.pptxv-host{display:flex;flex-direction:column;gap:16px;align-items:center}
.pptxv-host .slide{box-shadow:var(--shadow-e2);border-radius:6px;background:#fff;max-width:100%}
.pptxv-text{padding:20px;overflow:auto;height:100%}
.pptxv-text-note{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:12px}
.pptxv-text-slide{padding:12px 14px;margin-bottom:10px;background:var(--card-bg);border-radius:var(--radius-md);box-shadow:var(--shadow-e1);font-size:13px;color:var(--text-primary)}
.pptxv-text-n{font-size:11px;font-weight:600;color:var(--app-accent);margin-bottom:4px}
.files-docx-preview h1,.files-docx-preview h2,.files-docx-preview h3{color:#111;line-height:1.25;margin:1.2em 0 .5em;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif}
.files-docx-preview h1{font-size:1.7em}.files-docx-preview h2{font-size:1.35em}.files-docx-preview h3{font-size:1.15em}
.files-docx-preview p{margin:0 0 .85em}
.files-docx-preview ul,.files-docx-preview ol{margin:0 0 .85em 1.4em;padding:0}
.files-docx-preview li{margin:.25em 0}
.files-docx-preview table{border-collapse:collapse;width:100%;margin:1em 0;font-size:.92em}
.files-docx-preview td,.files-docx-preview th{border:1px solid #d2d2d7;padding:6px 9px;text-align:left}
.files-docx-preview th{background:#f5f5f7;font-weight:600}
.files-docx-preview img{max-width:100%;height:auto}
.files-docx-preview a{color:#0066cc}
@media (max-width:640px){.files-docx-preview{padding:24px 20px;margin:12px auto}}
/* Doc-to-doc prev/next nav — frame-relative, anchored over the body region.
   The next arrow shifts left by the side-panel width when it's open (the side
   column is 0 when closed, 320px when open — mirrors the grid :has() rule). */
.files-preview-frame{position:relative}
.files-preview-nav{position:absolute;top:calc(50% + 26px);transform:translateY(-50%);z-index:6;width:38px;height:38px;border:none;background:color-mix(in srgb,var(--surface) 80%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--shadow-e2),inset 0 0 0 0.5px var(--chrome-border);color:var(--text-primary);border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--motion-fast),transform var(--motion-fast),opacity var(--motion-fast)}
.files-preview-nav:hover{background:var(--surface)}
.files-preview-nav:active{transform:translateY(-50%) scale(.9)}
.files-preview-nav svg{width:17px;height:17px}
.files-preview-prev{left:14px}
.files-preview-next{right:14px}
.files-preview-frame:not(:has(.files-preview-side[style*="none"])) .files-preview-next{right:calc(320px + 14px)}
.files-preview-nav[disabled]{opacity:0;pointer-events:none}
@media (max-width:900px){.files-preview-frame:not(:has(.files-preview-side[style*="none"])) .files-preview-next{right:14px}}
@media (max-width:640px){.files-preview-nav{width:var(--tap-min);height:var(--tap-min);top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:none}.files-preview-nav:active{transform:scale(.9)}.files-preview-prev{left:12px}.files-preview-next{right:12px}}
/* G10 — PDF.js page-through viewer */
.pdfv-host{width:100%;height:100%;display:flex;flex-direction:column;min-height:0}
/* V131 — preview toolbar: floating glass chrome (DESIGN.md), grouped segments
   with hairline dividers, press-deform on every button, custom hover tooltips. */
.pdfv-toolbar{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--frost-bg-strong,var(--surface));border-bottom:0.5px solid var(--chrome-border);backdrop-filter:var(--frost-blur);-webkit-backdrop-filter:var(--frost-blur);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);position:sticky;top:0;z-index:2;flex-wrap:wrap}
/* Each segment is a subtle inset glass pill grouping its related controls. */
.pdfv-group{display:inline-flex;align-items:center;gap:3px;padding:2px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--text-primary) 5%,transparent);box-shadow:inset 0 0 0 0.5px var(--chrome-border),inset 0 1px 0 color-mix(in srgb,var(--specular-hi) 36%,transparent)}
.pdfv-btn{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 8px;border:0;background:transparent;color:var(--text-primary);border-radius:var(--radius-sm);cursor:pointer;font-size:15px;font-weight:600;line-height:1;transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring),color var(--motion-fast)}
.pdfv-btn:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent)}
.pdfv-btn:active{transform:scale(.9)}
.pdfv-btn svg{width:14px;height:14px}
.pdfv-pageind{font-size:12px;color:var(--text-secondary);font-variant-numeric:tabular-nums;min-width:42px;text-align:center;display:inline-flex;align-items:center;gap:3px;padding:0 4px}
.pdfv-pageind-sep{opacity:.5}
/* Fit/zoom-% reads as a tappable control (snaps to fit) */
.pdfv-zoom{font-size:12px;font-weight:600;color:var(--text-secondary);font-variant-numeric:tabular-nums;min-width:50px;height:28px;text-align:center;border:0;background:transparent;border-radius:var(--radius-sm);cursor:pointer;transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring),color var(--motion-fast)}
.pdfv-zoom:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent)}
.pdfv-zoom:active{transform:scale(.92)}
/* V131 — content centered when it fits, but overflow stays reachable when zoomed
   wider than the frame: center via auto margins on the wraps (NOT align-items,
   which clips the left overflow in a flex column). */
/* P0.3 Stage B — stage row hosts the sheet-index rail + the scroll surface. */
.pdfv-stage{flex:1;min-height:0;display:flex;align-items:stretch}
.pdfv-scroll{flex:1;min-width:0;min-height:0;overflow:auto;background:var(--surface-3,var(--surface-2));padding:16px;display:block;text-align:center;overscroll-behavior:contain}
/* V131 — when zoomed past fit the canvas is grab-pannable. */
.pdfv-scroll.pdfv-pannable{cursor:grab}
/* P0.3 Stage B — sheet-index sidebar (browsable plan-sheet rail). */
.pdfv-sheets{flex:0 0 232px;min-height:0;overflow:auto;background:var(--surface-2,var(--surface));border-right:0.5px solid var(--border);display:flex;flex-direction:column;overscroll-behavior:contain}
.pdfv-sheets[hidden]{display:none}
.pdfv-sheets-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 14px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);background:var(--frost-bg-strong,var(--surface-2));border-bottom:0.5px solid var(--border);backdrop-filter:saturate(1.4) blur(8px);-webkit-backdrop-filter:saturate(1.4) blur(8px)}
.pdfv-sheets-count{font-weight:600;letter-spacing:0;color:var(--text-faint,var(--text-muted))}
.pdfv-sheets-list{flex:1;min-height:0;padding:6px}
.pdfv-sheet-row{display:flex;align-items:baseline;gap:8px;width:100%;padding:8px 10px;border:none;border-radius:9px;background:transparent;color:var(--text-primary);text-align:left;cursor:pointer;font:inherit;transition:background .12s ease}
.pdfv-sheet-row:hover{background:var(--col-active-bg,rgba(0,0,0,.05))}
.pdfv-sheet-row.active{background:var(--col-active-bg,rgba(0,122,255,.12));box-shadow:inset 0 0 0 0.5px var(--col-active-outline,rgba(0,122,255,.3))}
.pdfv-sheet-no{flex:0 0 auto;font-weight:700;font-size:12px;font-variant-numeric:tabular-nums;color:var(--accent,#0a84ff);min-width:42px}
.pdfv-sheet-title{flex:1;min-width:0;font-size:12.5px;color:var(--text-secondary,var(--text-muted));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdfv-sheet-loading{padding:14px;font-size:12px;color:var(--text-muted);text-align:center}
.pdfv-sheets-btn.active,.pdfv-tool#pdfvToolRegion.active{background:var(--col-active-bg,rgba(0,122,255,.16));color:var(--accent,#0a84ff)}
/* P0.3 Stage B — region-zoom marquee rubber-band. */
.pdfv-region-arm{cursor:crosshair !important}
.pdfv-region-box{position:fixed;z-index:60;border:1.5px solid var(--accent,#0a84ff);background:rgba(10,132,255,.12);border-radius:3px;pointer-events:none}
.pdfv-scroll.pdfv-panning{cursor:grabbing;user-select:none}
/* V131 — pages no longer clamped to max-width:100% (that capped zoom). The page
   wrap sizes to the rendered viewport; the scroll container handles overflow. */
.pdfv-page{height:auto;box-shadow:var(--shadow-e2);border-radius:2px;background:#fff;display:block}
/* S5 — redline overlay + tools */
.pdfv-page-wrap{position:relative;box-shadow:var(--shadow-e2);border-radius:2px;display:block;margin:0 auto 14px;text-align:left}
.pdfv-page-wrap:last-child{margin-bottom:0}
.pdfv-page-wrap .pdfv-page{box-shadow:none;border-radius:2px}
.pdfv-anno{position:absolute;inset:0;width:100%;height:100%;border-radius:2px;touch-action:none}
.pdfv-anno.armed{cursor:crosshair}
/* P0.3 Stage B — revision compare split (two PDF panes side-by-side). */
.pdfv-compare{flex:1;min-height:0;display:flex;gap:1px;background:var(--border)}
.pdfv-compare-col{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--surface-2,var(--surface))}
.pdfv-compare-tag{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 12px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);background:var(--frost-bg-strong,var(--surface-2));border-bottom:0.5px solid var(--border)}
.pdfv-cmp-sync{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--text-secondary,var(--text-muted));cursor:pointer}
.pdfv-cmp-sync input{margin:0;accent-color:var(--app-accent)}
.pdfv-compare-col .pdfv-host{flex:1;min-height:0}
@media (max-width:680px){.pdfv-compare{flex-direction:column}}
.rrt-callout-ico-rev{background:#5e5ce6;font-size:11px;font-weight:700}
/* P0.3 Stage C — fill-and-sign: text-label tool buttons + signature pad. */
.pdfv-tool-text{font-size:12px;font-weight:700;min-width:30px;letter-spacing:.01em}
.rrt-sign-modal{width:min(94vw,560px)}
/* Same lit-frame signing-card language as the PO pad — specular top edge + soft lift; pad stays solid white paper (document ink baked at #1a2740), never glass. */
.rrt-sign-padwrap{position:relative;margin-top:12px;border:0.5px solid color-mix(in srgb,#000 12%,transparent);border-radius:12px;overflow:hidden;background:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(0,0,0,.02),0 1px 3px rgba(15,23,42,.10)}
.rrt-sign-pad{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair}
.rrt-sign-baseline{position:absolute;left:24px;right:24px;bottom:34%;border-bottom:1px dashed color-mix(in srgb,var(--app-accent) 40%,transparent);pointer-events:none}
.rrt-sign-cue{position:absolute;left:0;right:0;bottom:calc(34% + 6px);text-align:center;font-size:12px;font-weight:600;letter-spacing:.02em;color:rgba(26,39,64,.42);pointer-events:none;transition:opacity var(--motion-fast)}
.rrt-sign-padwrap.has-ink .rrt-sign-cue{opacity:0}
.rrt-sign-tabs{display:inline-flex;gap:2px;margin-top:12px;padding:3px;background:var(--surface-2,rgba(120,120,128,.12));border-radius:10px}
.rrt-sign-tab{appearance:none;border:0;background:transparent;color:var(--text-secondary,var(--text-muted));font:inherit;font-size:13px;font-weight:600;padding:6px 18px;border-radius:8px;cursor:pointer;transition:background var(--motion-fast,.15s),color var(--motion-fast,.15s),transform var(--motion-fast) var(--ease-spring)}
.rrt-sign-tab:active{transform:scale(.96)}
.rrt-sign-tab.on{background:var(--card-bg,#fff);color:var(--text-primary);box-shadow:0 1px 2px rgba(0,0,0,.08)}
@media (prefers-reduced-motion:reduce){.rrt-sign-tab:active{transform:none}.rrt-sign-cue{transition:none}}
.rrt-sign-typein{width:100%;margin-top:12px;padding:11px 14px;font:inherit;font-size:15px;border:1px solid var(--border);border-radius:10px;background:var(--input-bg,var(--surface-1,#fff));color:var(--text-primary)}
.rrt-sign-typein:focus{outline:none;border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 20%,transparent)}
.rrt-sign-clear{margin-right:auto}
.pdfv-redgroup{display:inline-flex;align-items:center;gap:3px}
.pdfv-tool.active,.pdfv-redtool.on{background:color-mix(in srgb,var(--app-accent) 18%,var(--surface));color:var(--app-accent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--specular-hi) 28%,transparent),inset 0 0 0 0.5px color-mix(in srgb,var(--app-accent) 35%,transparent),0 1px 3px color-mix(in srgb,var(--app-accent) 22%,transparent)}
/* V131 — shared hover tooltip: frosted glass label chip (chrome → glass). */
.rt-tip{position:fixed;z-index:var(--z-top,99999);transform:translateX(-50%) translateY(2px);background:var(--surface);color:var(--text-primary);font-size:11.5px;font-weight:500;letter-spacing:-.1px;padding:5px 9px;border-radius:var(--radius-sm);box-shadow:var(--shadow-e4),inset 0 0 0 0.5px var(--chrome-border);backdrop-filter:var(--frost-blur);-webkit-backdrop-filter:var(--frost-blur);pointer-events:none;opacity:0;white-space:nowrap;transition:opacity var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-out);max-width:240px}
.rt-tip.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-transparency:reduce){.rt-tip{backdrop-filter:none;-webkit-backdrop-filter:none}.pdfv-toolbar{backdrop-filter:none;-webkit-backdrop-filter:none}}
@media (prefers-reduced-motion:reduce){.rt-tip{transition:none}}
.pdfv-colordots{display:inline-flex;align-items:center;gap:4px;margin:0 2px}
.pdfv-colordot{width:16px;height:16px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1px 2px rgba(0,0,0,.25);transition:transform var(--motion-fast) var(--ease-spring)}
.pdfv-colordot:hover{transform:scale(1.15)}
.pdfv-colordot.active{border-color:var(--text-primary);transform:scale(1.1)}
.pdfv-redsave{background:linear-gradient(180deg,color-mix(in srgb,var(--app-accent) 92%,#fff),var(--app-accent));color:#fff;border-color:transparent;font-size:12px;padding:0 12px;box-shadow:var(--shadow-e1),inset 0 1px 0 rgba(255,255,255,.28)}
.pdfv-redsave:hover{filter:brightness(1.05);background:linear-gradient(180deg,color-mix(in srgb,var(--app-accent) 92%,#fff),var(--app-accent))}
/* P0.3 Stage C — Flatten button: distinct from Save (success-green outline pill). */
.pdfv-redflatten{font-size:12px;font-weight:600;padding:0 12px;background:color-mix(in srgb,#34c759 14%,var(--surface));color:#248a3d;border-color:color-mix(in srgb,#34c759 40%,transparent)}
.pdfv-redflatten:hover{background:color-mix(in srgb,#34c759 22%,var(--surface))}
.pdfv-redflatten:disabled{opacity:.6;cursor:default}
/* P0.3 Stage C — threaded-markup popover (review conversation on a note pin). */
.pdfv-thread{position:fixed;z-index:70;width:280px;max-height:62vh;display:flex;flex-direction:column;background:var(--frost-bg-strong,var(--surface));border:0.5px solid var(--border);border-radius:14px;box-shadow:var(--shadow-e5,0 18px 48px rgba(0,0,0,.28));backdrop-filter:saturate(1.5) blur(20px);-webkit-backdrop-filter:saturate(1.5) blur(20px);overflow:hidden}
.pdfv-thread-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);border-bottom:0.5px solid var(--border)}
.pdfv-thread-x{border:none;background:transparent;color:var(--text-muted);font-size:18px;line-height:1;cursor:pointer;padding:0 2px}
.pdfv-thread-orig{padding:11px 14px;border-bottom:0.5px solid var(--border);background:color-mix(in srgb,var(--app-accent) 5%,transparent)}
.pdfv-thread-replies{flex:1;min-height:0;overflow:auto;padding:6px 14px;display:flex;flex-direction:column;gap:10px}
.pdfv-thread-reply{display:flex;flex-direction:column;gap:2px}
.pdfv-thread-who{font-size:12px;font-weight:600;color:var(--text-primary);display:flex;align-items:baseline;gap:8px}
.pdfv-thread-when{font-size:10.5px;font-weight:400;color:var(--text-faint,var(--text-muted))}
.pdfv-thread-text{font-size:13px;color:var(--text-secondary,var(--text-primary));white-space:pre-wrap;word-break:break-word}
.pdfv-thread-compose{display:flex;gap:6px;padding:10px 12px;border-top:0.5px solid var(--border)}
.pdfv-thread-input{flex:1;min-width:0;height:32px;padding:0 12px;font:inherit;font-size:13px;color:var(--text-primary);background:var(--surface-2);border:none;border-radius:var(--radius-pill);outline:none}
.pdfv-thread-input:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 30%,transparent)}
.pdfv-thread-send{flex:0 0 auto;height:32px;padding:0 14px;font-size:12px;font-weight:600;color:#fff;background:var(--app-accent);border:none;border-radius:var(--radius-pill);cursor:pointer}
.pdfv-thread-send:hover{filter:brightness(1.05)}
/* P4b-3 — Review resolve-state */
.pdfv-thread-resolvedwrap:empty{display:none}
.pdfv-thread-resolved{display:flex;align-items:center;gap:7px;padding:8px 14px;font-size:12px;font-weight:600;color:var(--app-success,#34c759);background:color-mix(in srgb,var(--app-success,#34c759) 9%,transparent);border-bottom:0.5px solid var(--border)}
.pdfv-thread-resolved svg{width:13px;height:13px;flex:0 0 auto}
.pdfv-thread-reopen{margin-left:auto;font:600 11.5px/1 system-ui;color:var(--text-muted);background:none;border:none;cursor:pointer;padding:3px 7px;border-radius:7px;transition:background var(--motion-fast),color var(--motion-fast)}
.pdfv-thread-reopen:hover{background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-primary)}
.pdfv-thread-resolve{flex:0 0 auto;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;color:var(--app-success,#34c759);background:color-mix(in srgb,var(--app-success,#34c759) 12%,transparent);border:none;border-radius:var(--radius-pill);cursor:pointer;transition:background var(--motion-fast)}
.pdfv-thread-resolve svg{width:15px;height:15px}
.pdfv-thread-resolve:hover{background:color-mix(in srgb,var(--app-success,#34c759) 22%,transparent)}
.pdfv-page-flash{animation:pdfvFlash 1.1s var(--ease-out)}
@keyframes pdfvFlash{0%{box-shadow:0 0 0 3px var(--app-accent),var(--shadow-e3)}100%{box-shadow:var(--shadow-e2)}}
.pdfv-find-btn.is-active{background:var(--app-accent);color:#fff;border-color:transparent}
/* ── Markup editor _mk* — premium toolbar (revamped 2026-06-25) ───────────── */
.mk-toolbar{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-left:auto;flex-shrink:0;padding:3px;border-radius:12px;background:color-mix(in srgb,var(--text-primary) 4%,var(--surface));box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--chrome-border) 70%,transparent)}
.mk-btn{height:30px;border:0.5px solid transparent;background:transparent;border-radius:9px;color:var(--text-secondary,var(--text-muted));cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px;font:600 11.5px/1 -apple-system,BlinkMacSystemFont,sans-serif;padding:0 10px;transition:background var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast)}
.mk-btn svg{width:16px;height:16px;flex-shrink:0}
.mk-btn:hover{background:color-mix(in srgb,var(--app-accent) 12%,var(--surface));color:var(--app-accent);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--app-accent) 22%,transparent)}
.mk-btn:active{transform:scale(.9)}
.mk-btn.mk-active{background:color-mix(in srgb,var(--app-accent) 16%,var(--card-bg,var(--surface)));color:var(--app-accent);box-shadow:var(--shadow-e1),inset 0 0 0 1px color-mix(in srgb,var(--app-accent) 42%,transparent)}
.mk-btn.mk-icon-only{width:30px;padding:0}
.mk-btn:disabled{opacity:.3;cursor:default;pointer-events:none}
/* Color swatch button — a real lit dot of the active color */
.mk-swatch-btn{position:relative}
.mk-swatch-dot{width:15px;height:15px;border-radius:50%;background:#ff453a;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55),0 0 0 .5px rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.2)}
.mk-color-pop{position:fixed;z-index:calc(var(--z-top, 10000) + 5);display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:11px;border-radius:14px;background:var(--frost-bg,var(--surface));backdrop-filter:var(--frost-blur,blur(20px) saturate(1.8));-webkit-backdrop-filter:var(--frost-blur,blur(20px) saturate(1.8));box-shadow:var(--shadow-e4),inset 0 1px 0 rgba(255,255,255,.18),0 0 0 .5px var(--chrome-border);opacity:0;transform:translateY(-4px) scale(.96);transition:opacity var(--motion-fast),transform var(--motion-fast) var(--ease-spring,ease-out)}
.mk-color-pop.show{opacity:1;transform:translateY(0) scale(1)}
.mk-color-chip{width:26px;height:26px;border-radius:50%;border:none;cursor:pointer;background:var(--chip);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5),0 0 0 .5px rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.18);transition:transform var(--motion-fast) var(--ease-spring,ease-out),box-shadow var(--motion-fast)}
.mk-color-chip:hover{transform:scale(1.14)}
.mk-color-chip.on{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6),0 0 0 2px var(--app-accent),0 1px 3px rgba(0,0,0,.25)}
.mk-sep{width:0.5px;height:18px;background:var(--chrome-border);margin:0 3px;flex-shrink:0}
.mk-dirty-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--app-accent);margin-left:2px;vertical-align:1px;flex-shrink:0}
.mk-save-btn{background:linear-gradient(180deg,color-mix(in srgb,var(--app-accent) 92%,#fff),var(--app-accent));color:#fff;border-color:transparent;box-shadow:var(--shadow-e1),inset 0 1px 0 rgba(255,255,255,.28)}
.mk-save-btn:hover{filter:brightness(1.05);background:linear-gradient(180deg,color-mix(in srgb,var(--app-accent) 92%,#fff),var(--app-accent))}
/* DOM overlay for non-PDF types */
.mk-overlay-wrap{position:relative;width:100%;height:100%}
.mk-overlay{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.mk-overlay.mk-armed{pointer-events:auto;cursor:crosshair}
.mk-overlay.mk-armed.mk-tool-text{cursor:text}
.mk-overlay.mk-armed.mk-tool-move{cursor:default}
.mk-ann{position:absolute;box-sizing:border-box}
.mk-ann-text{white-space:pre-wrap;word-break:break-word;min-width:44px;min-height:22px;cursor:move;background:color-mix(in srgb,var(--app-accent) 8%,transparent);border:1.5px solid color-mix(in srgb,var(--app-accent) 40%,transparent);border-radius:5px;padding:4px 8px;font-size:14px;line-height:1.4;color:var(--text-primary);user-select:none;outline:none;pointer-events:auto;touch-action:none}
.mk-ann-text.mk-editing{cursor:text;user-select:text;background:color-mix(in srgb,var(--app-accent) 12%,var(--surface));border-color:var(--app-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 25%,transparent)}
.mk-ann-text.mk-selected{border-color:var(--app-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 25%,transparent)}
/* Item #19 — non-PDF markup callout chip (rounded pill at the callout point; rounded hover, no edge-strip). */
.mk-ann-callout{display:inline-flex;align-items:center;gap:6px;max-width:240px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.3;white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,.18),inset 0 0 0 .5px rgba(255,255,255,.15);pointer-events:auto;cursor:default;transform:translate(-2px,-50%);transition:transform var(--motion-fast),box-shadow var(--motion-fast)}
.mk-ann-callout-link{cursor:pointer}
.mk-ann-callout-link:hover{transform:translate(-2px,-50%) scale(1.04);box-shadow:0 3px 10px rgba(0,0,0,.24),inset 0 0 0 .5px rgba(255,255,255,.2)}
.mk-ann-callout .mk-callout-label{overflow:hidden;text-overflow:ellipsis;min-width:0}
.mk-ann-callout .mk-ann-text-del{position:absolute;top:-7px;right:-7px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:var(--color-error,#ef4444);color:#fff;font-size:11px;line-height:1;cursor:pointer;padding:0;opacity:0;transition:opacity var(--motion-fast)}
.mk-ann-callout:hover .mk-ann-text-del{opacity:1}
/* P4 — markup annotation review-comment button (parity with the PDF note-thread). */
.mk-ann-text-cmt{position:absolute;top:-9px;right:14px;width:18px;height:18px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:var(--app-accent);color:#fff;cursor:pointer;padding:0;opacity:0;transition:opacity var(--motion-fast)}
.mk-ann-text:hover .mk-ann-text-cmt,.mk-ann-text-cmt[data-n]{opacity:1}
.mk-ann-text-cmt svg{width:11px;height:11px}
.mk-ann-text-cmt[data-n]::after{content:attr(data-n);position:absolute;top:-5px;right:-5px;min-width:13px;height:13px;font-size:9px;font-weight:700;line-height:13px;text-align:center;background:var(--color-error,#ef4444);color:#fff;border-radius:7px;padding:0 2px}
.mk-ann-text-cmt.mk-cmt-resolved{background:var(--app-success,#34c759);opacity:1}/* P4b-3 — resolved thread */
.mk-ann-text-cmt.mk-cmt-resolved[data-n]::after{background:var(--app-success,#34c759)}
.mk-draw-canvas{position:absolute;inset:0;pointer-events:none;z-index:1}
/* Layers panel */
.mk-layers-panel{position:absolute;right:10px;top:44px;z-index:20;width:236px;background:var(--frost-bg-strong,var(--surface));border:0.5px solid var(--border);border-radius:14px;box-shadow:var(--shadow-e4);backdrop-filter:saturate(1.5) blur(18px);-webkit-backdrop-filter:saturate(1.5) blur(18px);overflow:hidden;animation:mkIn var(--motion-fast,160ms) var(--ease-out)}
@keyframes mkIn{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
.mk-layers-head{display:flex;align-items:center;justify-content:space-between;padding:10px 13px 7px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);border-bottom:0.5px solid var(--border)}
.mk-layers-list{max-height:210px;overflow-y:auto;padding:5px 0}
.mk-layers-empty{padding:14px 13px;font-size:12px;color:var(--text-muted);text-align:center;line-height:1.4}
.mk-layer-row{display:flex;align-items:center;gap:7px;padding:6px 13px;transition:background var(--motion-fast)}
.mk-layer-row:hover{background:color-mix(in srgb,var(--text-primary) 4%,transparent)}
.mk-layer-eye{background:transparent;border:none;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);cursor:pointer;color:var(--text-muted);flex-shrink:0;padding:0}
.mk-layer-eye.mk-hidden{opacity:.35}
.mk-layer-eye:hover{background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-primary)}
.mk-layer-name{flex:1 1 auto;font-size:12.5px;color:var(--text-primary);min-width:54px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-layer-by{flex:0 1 auto;min-width:0;font-size:10.5px;color:var(--text-muted);max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}/* P4 — layer authorship (shrinks before the name does) */
.mk-layer-del{background:transparent;border:none;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);cursor:pointer;color:var(--text-muted);opacity:0;transition:opacity var(--motion-fast)}
.mk-layer-row:hover .mk-layer-del{opacity:1}
.mk-layer-del:hover{color:var(--app-danger,#ff3b30)}
/* §3 — Bluebeam-grade layer affordances (active row / count badge / lock / opacity) */
.mk-layer-row[role=button]{cursor:pointer}
.mk-layer-active{background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
.mk-layer-active:hover{background:color-mix(in srgb,var(--app-accent) 16%,transparent)}
.mk-layer-active .mk-layer-name{color:var(--app-accent);font-weight:600}
.mk-layer-locked .mk-layer-name{opacity:.6}
.mk-layer-count{flex-shrink:0;min-width:18px;height:16px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-muted);font-size:10.5px;font-weight:600;font-variant-numeric:tabular-nums}
.mk-layer-active .mk-layer-count{background:color-mix(in srgb,var(--app-accent) 18%,transparent);color:var(--app-accent)}
.mk-layer-lock{background:transparent;border:none;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);cursor:pointer;color:var(--text-muted);opacity:0;transition:opacity var(--motion-fast),color var(--motion-fast);flex-shrink:0;padding:0}
.mk-layer-row:hover .mk-layer-lock,.mk-layer-lock.on{opacity:1}
.mk-layer-lock.on{color:var(--app-accent)}
.mk-layer-lock:hover{background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-primary)}
.mk-layer-opacity{-webkit-appearance:none;appearance:none;display:block;width:calc(100% - 53px);margin:0 13px 7px 40px;height:3px;border-radius:2px;background:color-mix(in srgb,var(--text-primary) 12%,transparent);cursor:pointer}
.mk-layer-opacity::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--app-accent);box-shadow:var(--shadow-e1,0 1px 2px rgba(0,0,0,.25));cursor:pointer}
.mk-layer-opacity::-moz-range-thumb{width:12px;height:12px;border:none;border-radius:50%;background:var(--app-accent);cursor:pointer}
.mk-layers-add{display:flex;align-items:center;gap:7px;padding:8px 13px;border-top:0.5px solid var(--border);font-size:12px;color:var(--app-accent);cursor:pointer;font-weight:600}
.mk-layers-add:hover{background:color-mix(in srgb,var(--app-accent) 6%,transparent)}
/* Export dialog */
.mk-export-dialog{position:fixed;inset:0;background:rgba(0,0,0,0.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:200;display:flex;align-items:center;justify-content:center}
.mk-export-sheet{width:min(380px,92vw);background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius-modal,18px);box-shadow:var(--shadow-e5);padding:22px 22px 18px;display:flex;flex-direction:column;gap:14px;animation:mkIn var(--motion-fast) var(--ease-out)}
.mk-export-title{font-size:16px;font-weight:700;color:var(--text-primary)}
.mk-export-sub{font-size:12.5px;color:var(--text-muted);margin-top:-8px}
/* #22 Stage D — export options (markup with/without + page subset). */
.mk-export-opts{display:flex;flex-direction:column;gap:8px;margin:4px 0 2px;padding-top:8px;border-top:.5px solid var(--chrome-border)}
.mk-export-opt-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--text-secondary)}
.mk-export-seg{display:inline-flex;gap:10px;flex-wrap:wrap}
.mk-export-seg label{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--text-primary);cursor:pointer}
.mk-export-seg input{accent-color:var(--app-accent)}
.mk-export-range{width:100%;height:30px;padding:0 10px;border:.5px solid var(--chrome-border);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text-primary);font:inherit;font-size:12.5px;outline:none}
.mk-export-range:focus{border-color:var(--app-accent)}
.mk-export-layer-list{display:flex;flex-direction:column;gap:5px}
.mk-export-layer-check{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text-primary);cursor:pointer;padding:4px 0}
.mk-export-sink{display:flex;gap:8px}
.mk-export-sink-btn{flex:1;height:38px;border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);background:var(--surface-2);color:var(--text-primary);font:600 13px/1 inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:background var(--motion-fast)}
.mk-export-sink-btn:hover{background:var(--chrome-bg-hover)}
.mk-export-sink-btn.mk-sink-files{background:var(--app-accent);color:#fff;border-color:transparent}
.mk-export-sink-btn.mk-sink-files:hover{filter:brightness(1.08)}
.mk-export-cancel{align-self:flex-end;background:transparent;border:none;color:var(--text-muted);font-size:12px;cursor:pointer;padding:2px 4px}
.mk-export-cancel:hover{color:var(--text-primary)}
/* G9 — Find sheet panel (frosted glass dropdown under the toolbar) */
.pdfv-find{flex:0 0 auto;position:relative;z-index:3;padding:10px 12px;background:var(--frost-bg-strong,var(--surface));backdrop-filter:var(--frost-blur);-webkit-backdrop-filter:var(--frost-blur);border-bottom:0.5px solid var(--chrome-border);box-shadow:var(--shadow-e2)}
.pdfv-find-inputwrap{position:relative;display:flex;align-items:center}
.pdfv-find-icon{position:absolute;left:11px;width:14px;height:14px;color:var(--text-muted);pointer-events:none}
.pdfv-find-input{flex:1;height:36px;padding:0 36px 0 34px;border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);background:var(--surface-2);color:var(--text-primary);font-size:14px;font-family:inherit;outline:none;transition:box-shadow var(--motion-fast),border-color var(--motion-fast)}
.pdfv-find-input::-webkit-search-cancel-button{-webkit-appearance:none}
.pdfv-find-close{position:absolute;right:6px;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:0;background:none;border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer}
.pdfv-find-close:hover{background:var(--chrome-bg-hover);color:var(--text-primary)}
.pdfv-find-close svg{width:12px;height:12px}
.pdfv-find-results{margin-top:8px;max-height:42svh;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.pdfv-find-results:empty{display:none}
.pdfv-find-result{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 10px;border:0.5px solid transparent;border-radius:var(--radius-md);background:var(--surface);color:var(--text-primary);cursor:pointer;font-family:inherit;box-shadow:var(--shadow-e1);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast),background var(--motion-fast)}
.pdfv-find-result:hover{background:var(--surface-2);box-shadow:var(--shadow-e3);transform:translateY(-1px)}
.pdfv-find-result:active{transform:scale(.985)}
.pdfv-find-result.is-active{border-color:var(--app-accent);box-shadow:0 0 0 1px var(--app-accent),var(--shadow-e2);background:color-mix(in srgb,var(--app-accent) 8%,var(--surface))}
.pdfv-find-sheetno{flex:0 0 auto;min-width:52px;font-size:12px;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 12%,transparent);border-radius:var(--radius-sm);padding:3px 7px;text-align:center}
.pdfv-find-rmeta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pdfv-find-rtitle{font-size:13px;font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdfv-find-untitled{color:var(--text-muted);font-weight:500;font-style:italic}
.pdfv-find-snip{font-size:11px;color:var(--text-muted);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdfv-find-pageno{flex:0 0 auto;font-size:11px;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.pdfv-find-empty{padding:14px 12px;text-align:center;font-size:13px;color:var(--text-muted);line-height:1.5}
.pdfv-find-status{display:flex;align-items:center;gap:9px;padding:12px;font-size:13px;color:var(--text-secondary)}
.pdfv-find-spin{width:15px;height:15px;border:2px solid var(--chrome-border);border-top-color:var(--app-accent);border-radius:50%;animation:pdfvSpin .7s linear infinite}
@keyframes pdfvSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.pdfv-find-result,.pdfv-page-flash{transition:none;animation:none}.pdfv-find-spin{animation-duration:1.4s}}
@media (prefers-reduced-transparency:reduce){.pdfv-find{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--surface)}}
/* ── Item 4 — Find-in-document overlay (Cmd/Ctrl+F in the unified doc viewer) ──
   Floating frosted panel, top-right of the doc body; keyboard-driven. */
.rt-docfind{position:absolute;top:12px;right:12px;z-index:40;width:min(360px,calc(100% - 24px));background:var(--frost-bg-strong,var(--surface));backdrop-filter:blur(24px) saturate(1.8);-webkit-backdrop-filter:blur(24px) saturate(1.8);border:.5px solid var(--chrome-border);border-radius:var(--radius-lg,14px);box-shadow:var(--shadow-e4);overflow:hidden;animation:rtDocFindIn var(--motion-base) var(--ease-out)}
/* F1 — in 'pdf' mode the results list stays hidden (matches paint on the canvas), so the bar
   collapses to the input row; clamp the width a touch tighter for the compact look. */
.rt-docfind[data-mode="pdf"]{width:min(380px,calc(100% - 24px))}
@keyframes rtDocFindIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.rt-docfind-bar{display:flex;align-items:center;gap:6px;padding:8px 8px 8px 12px}
.rt-docfind-ico{width:15px;height:15px;flex:0 0 auto;color:var(--text-muted);fill:none;stroke:currentColor}
.rt-docfind-input{flex:1;min-width:0;height:32px;border:0;background:transparent;color:var(--text-primary);font:inherit;font-size:13.5px;font-weight:600;letter-spacing:-.1px;outline:none}
.rt-docfind-input::placeholder{color:var(--text-muted);font-weight:500}
.rt-docfind-count{flex:0 0 auto;font-size:11.5px;font-weight:700;color:var(--text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap;padding:0 2px}
.rt-docfind-count.rt-docfind-none{color:var(--color-error)}
.rt-docfind-nav,.rt-docfind-close{flex:0 0 auto;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:transparent;color:var(--text-secondary);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.rt-docfind-nav:hover,.rt-docfind-close:hover{background:color-mix(in srgb,var(--app-accent) 10%,transparent);color:var(--text-primary)}
.rt-docfind-nav:active,.rt-docfind-close:active{transform:scale(.9)}
.rt-docfind-nav:focus-visible,.rt-docfind-close:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--text-primary) 12%,transparent)}
/* FIX (search blue outline): the doc-find text field must not carry the global blue focus-ring — it's a
   borderless field where the caret is the focus signal (mirrors .header-search-input / .psm-search). */
.rt-docfind-input:focus,.rt-docfind-input:focus-visible{outline:none!important;box-shadow:none!important}
.rt-docfind-nav svg,.rt-docfind-close svg{width:13px;height:13px;fill:none;stroke:currentColor}
.rt-docfind-results{max-height:min(320px,42vh);overflow-y:auto;border-top:.5px solid var(--chrome-border);padding:6px}
/* FIX (search dropdown): a per-match result row — page tag + 2-line context snippet, compact, so the list
   shows more matches in less height. Single consolidated block (a prior edit duplicated these selectors). */
.rt-docfind-hit{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;padding:8px 10px;border:.5px solid transparent;border-radius:9px;background:transparent;cursor:pointer;font:inherit;transition:background var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast)}
.rt-docfind-hit:hover{background:var(--surface-2);box-shadow:var(--shadow-e2);transform:translateY(-1px)}
.rt-docfind-hit.is-active{background:color-mix(in srgb,var(--text-primary) 6%,var(--surface-2));border-color:var(--chrome-border);box-shadow:var(--shadow-e2)}
.rt-docfind-hit-loc{font-size:10px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--text-muted)}
.rt-docfind-hit-snip{font-size:12px;line-height:1.35;color:var(--text-secondary);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rt-docfind-hit-snip .docsearch-hl{background:color-mix(in srgb,var(--app-accent) 22%,transparent);color:var(--text-primary);font-weight:700;border-radius:3px;padding:0 1px}
mark.rt-docfind-mark{background:color-mix(in srgb,var(--color-warning,#f5a623) 55%,transparent);color:inherit;border-radius:3px;padding:0 1px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
mark.rt-docfind-mark.is-active{background:var(--app-accent);color:var(--on-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 40%,transparent)}
@media (prefers-reduced-motion:reduce){.rt-docfind{animation:none}.rt-docfind-nav,.rt-docfind-close,.rt-docfind-hit{transition:none}}
@media (prefers-reduced-transparency:reduce){.rt-docfind{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--surface)}}
/* ── H1 — Project "Find in Plans" cross-file search panel ── */
.planfind-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:var(--z-top);display:flex;align-items:flex-start;justify-content:center;padding:64px 24px 24px}
.planfind-sheet{width:min(640px,100%);max-height:78svh;display:flex;flex-direction:column;border-radius:var(--radius-lg);background:var(--frost-bg-strong,var(--surface));backdrop-filter:var(--frost-blur);-webkit-backdrop-filter:var(--frost-blur);box-shadow:var(--shadow-e4);border:0.5px solid var(--chrome-border);overflow:hidden;animation:planfindIn var(--motion-base) var(--ease-spring)}
@keyframes planfindIn{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
.planfind-head{display:flex;align-items:center;gap:10px;padding:14px 14px 10px}
.planfind-inputwrap{flex:1;display:flex;align-items:center;gap:9px;padding:0 12px;height:42px;border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow-e1),inset 0 1px 0 rgba(255,255,255,.10);border:0.5px solid var(--chrome-border)}
.planfind-icon{width:16px;height:16px;flex:0 0 auto;color:var(--text-secondary)}
.planfind-input{flex:1;border:none;background:transparent;outline:none;font:inherit;font-size:15px;color:var(--text-primary)}
.planfind-input::placeholder{color:var(--text-muted)}
.planfind-input:disabled{opacity:.5}
.planfind-close{flex:0 0 auto;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:var(--surface-2);color:var(--text-secondary);cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring),background var(--motion-fast)}
.planfind-close:hover{background:var(--surface);color:var(--text-primary)}
.planfind-close:active{transform:scale(.9)}
.planfind-close svg{width:13px;height:13px}
.planfind-scope{padding:0 18px 10px;font-size:12px;color:var(--text-muted)}
.planfind-scope strong{color:var(--text-secondary);font-weight:600}
.planfind-results{flex:1;overflow-y:auto;padding:4px 12px 14px;display:flex;flex-direction:column;gap:10px}
.planfind-hint{padding:18px 12px;text-align:center;font-size:13px;color:var(--text-muted);line-height:1.5}
.planfind-status{display:flex;align-items:center;gap:10px;padding:16px 12px;font-size:13px;color:var(--text-secondary)}
.planfind-status-file{color:var(--text-muted);font-size:12px}
.planfind-spin{width:15px;height:15px;flex:0 0 auto;border:2px solid var(--chrome-border);border-top-color:var(--app-accent);border-radius:50%;animation:pdfvSpin .7s linear infinite}
.planfind-group{display:flex;flex-direction:column;gap:4px}
.planfind-group-head{display:flex;align-items:center;gap:8px;padding:2px 8px;font-size:12px;font-weight:600;color:var(--text-secondary)}
.planfind-group-ico{width:13px;height:13px;flex:0 0 auto;color:var(--text-muted)}
.planfind-group-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.planfind-group-count{flex:0 0 auto;font-size:11px;font-weight:600;color:var(--text-secondary);background:var(--surface-2);border-radius:var(--radius-pill);padding:1px 8px;font-variant-numeric:tabular-nums}
.planfind-group-rows{display:flex;flex-direction:column;gap:4px}
.planfind-result{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 11px;border:0.5px solid transparent;border-radius:var(--radius-md);background:var(--surface);color:var(--text-primary);cursor:pointer;font-family:inherit;box-shadow:var(--shadow-e1);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast),background var(--motion-fast)}
.planfind-result:hover{background:var(--surface-2);box-shadow:var(--shadow-e3);transform:translateY(-1px)}
.planfind-result:active{transform:scale(.985)}
.planfind-sheetno{flex:0 0 auto;min-width:54px;font-size:13px;font-weight:700;color:var(--app-accent);font-variant-numeric:tabular-nums}
.planfind-rmeta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.planfind-rtitle{font-size:13px;font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.planfind-untitled{color:var(--text-muted);font-weight:500;font-style:italic}
.planfind-snip{font-size:11px;color:var(--text-muted);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.planfind-pageno{flex:0 0 auto;font-size:11px;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.planfind-empty{padding:36px 24px;text-align:center;color:var(--text-muted)}
.planfind-empty-ico{width:48px;height:48px;margin:0 auto 12px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
.planfind-empty-ico svg{width:22px;height:22px;color:var(--app-accent)}
.planfind-empty-title{font-size:15px;font-weight:600;color:var(--text-secondary);margin-bottom:5px}
.planfind-empty-sub{font-size:12.5px;line-height:1.5}
@media (prefers-reduced-motion:reduce){.planfind-sheet{animation:none}.planfind-result,.planfind-close{transition:none}.planfind-spin{animation-duration:1.4s}}
@media (prefers-reduced-transparency:reduce){.planfind-sheet{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--surface)}}
@media (max-width:640px){.planfind-overlay{padding:0}.planfind-sheet{width:100%;max-height:100svh;height:100svh;border-radius:0}}
/* FEATURE 1 — "Search all documents" results (reuses .planfind-result chrome; these style the
   icon + name + snippet + page badge + match highlight). Rounded-only hovers, no edge strips. */
.docsearch-result{align-items:flex-start}
.docsearch-ico{flex:0 0 auto;width:30px;height:30px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--app-accent) 12%,transparent);margin-top:1px}
.docsearch-ico svg{width:15px;height:15px;color:var(--app-accent)}
.docsearch-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.docsearch-name{font-size:13px;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:7px}
.docsearch-page{flex:0 0 auto;font-size:10.5px;font-weight:700;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 13%,transparent);padding:1px 6px;border-radius:999px;font-variant-numeric:tabular-nums}
.docsearch-snip{font-size:12px;line-height:1.45;color:var(--text-muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.docsearch-hl{background:color-mix(in srgb,var(--app-accent) 26%,transparent);color:var(--text-primary);border-radius:3px;padding:0 1px;font-weight:600}
.files-preview-side{grid-area:side;border-left:0.5px solid var(--chrome-border);overflow:hidden;background:var(--surface);display:flex;flex-direction:column}
/* ── doc-viewer side panes (Tags / Comments) — redesigned 2026-06-25 ──────────── */
.dv-pane-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 16px 13px;flex:0 0 auto;border-bottom:0.5px solid color-mix(in srgb,var(--chrome-border) 70%,transparent)}
.dv-pane-title{font:700 15px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;letter-spacing:-.01em;color:var(--text-primary);display:inline-flex;align-items:center;gap:8px}
.dv-pane-count{font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 14%,transparent);padding:1px 8px;border-radius:999px;min-width:20px;text-align:center}
.dv-pane-x{flex:0 0 auto;width:28px;height:28px;border:none;border-radius:8px;background:transparent;color:var(--text-muted);cursor:pointer;display:grid;place-items:center;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast)}
.dv-pane-x svg{width:14px;height:14px}
.dv-pane-x:hover{background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-primary)}
.dv-pane-x:active{transform:scale(.9)}
.dv-pane-body{padding:14px 16px;flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column}
.dv-pane-scroll{gap:9px}
.dv-pane-empty{color:var(--text-muted);font-size:12.5px;padding:6px 0}
.dv-pane-sublabel{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin:16px 0 8px}
.dv-tag-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.dv-tag-suggs{display:flex;flex-wrap:wrap;gap:6px}
/* composer (Tags inline row + Comments footer) — shared input + filled Post/Add button */
.dv-pane-composer{display:flex;gap:8px;align-items:center}
.dv-pane-foot{flex:0 0 auto;padding:13px 16px;border-top:0.5px solid color-mix(in srgb,var(--chrome-border) 70%,transparent);background:var(--surface)}
.dv-pane-input{flex:1;min-width:0;height:38px;padding:0 12px;border:.5px solid var(--chrome-border);border-radius:11px;background:var(--surface-2,color-mix(in srgb,var(--text-primary) 4%,var(--card-bg)));color:var(--text-primary);font:500 13.5px/1 inherit;outline:none;transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
.dv-pane-input:focus{border-color:color-mix(in srgb,var(--app-accent) 55%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 14%,transparent)}
.dv-pane-textarea{width:100%;min-height:64px;padding:10px 12px;border:.5px solid var(--chrome-border);border-radius:12px;background:var(--surface-2,color-mix(in srgb,var(--text-primary) 4%,var(--card-bg)));color:var(--text-primary);font:500 13.5px/1.45 inherit;resize:vertical;box-sizing:border-box;outline:none;transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
.dv-pane-textarea:focus{border-color:color-mix(in srgb,var(--app-accent) 55%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 14%,transparent)}
/* unified filled Post/Add button (Tags' Add now matches Comments' Post) */
.dv-pane-post{flex:0 0 auto;height:38px;padding:0 18px;border:none;border-radius:11px;background:linear-gradient(180deg,color-mix(in srgb,var(--app-accent) 92%,#fff),var(--app-accent));color:#fff;font:650 13.5px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;cursor:pointer;box-shadow:var(--shadow-e1),inset 0 1px 0 rgba(255,255,255,.3);transition:filter var(--motion-fast),transform var(--motion-fast)}
.dv-pane-post:hover{filter:brightness(1.06)}
.dv-pane-post:active{transform:scale(.96)}
/* comment cards */
.dv-comment{border:.5px solid color-mix(in srgb,var(--chrome-border) 80%,transparent);border-radius:13px;padding:10px 12px;background:var(--surface-2,color-mix(in srgb,var(--text-primary) 2.5%,var(--card-bg)))}
.dv-comment-meta{display:flex;align-items:center;gap:7px;margin-bottom:5px;font-size:11px}
.dv-comment-author{font-weight:700;color:var(--text-primary)}
.dv-comment-when{color:var(--text-muted)}
.dv-comment-del{margin-left:auto;background:none;border:0;cursor:pointer;color:var(--text-muted);font-size:15px;line-height:1;padding:0 2px;border-radius:6px;transition:color var(--motion-fast)}
.dv-comment-del:hover{color:var(--color-error)}
.dv-comment-body{font-size:13px;color:var(--text-primary);white-space:pre-wrap;line-height:1.45}
/* the panes' scrollers use the global 6px floating-overlay thumb (canon #16); reserve no gutter */
.files-preview-side,.dv-pane-body{scrollbar-width:none}
.files-preview-side::-webkit-scrollbar,.dv-pane-body::-webkit-scrollbar{width:6px;height:6px}
.files-preview-side::-webkit-scrollbar-thumb,.dv-pane-body::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text-primary) 15%,transparent);border-radius:999px}
.files-preview-side::-webkit-scrollbar-thumb:hover,.dv-pane-body::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--text-primary) 30%,transparent)}
.files-preview-side::-webkit-scrollbar-track,.dv-pane-body::-webkit-scrollbar-track{background:transparent}
/* World-class doc editor P1 (2026-06-17 📘) — the in-viewer Edit side panel + the dblclick focus pulse. */
.dve-panel{display:flex;flex-direction:column;height:100%}
.dve-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:0.5px solid var(--chrome-border);flex:0 0 auto}
.dve-title{font:600 13px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:var(--text-primary)}
.dve-x{background:none;border:0;cursor:pointer;color:var(--text-muted);font-size:15px;line-height:1;padding:4px 6px;border-radius:8px;transition:background var(--motion-fast),color var(--motion-fast)}
.dve-x:hover{color:var(--text-primary);background:color-mix(in srgb,var(--text-primary) 8%,transparent)}
.dve-form{flex:1 1 auto;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:11px}
.dve-foot{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:0.5px solid var(--chrome-border)}
.dve-missing{flex:1;font-size:11.5px;color:var(--app-danger);line-height:1.3}
.dve-save{flex:0 0 auto}
.dve-save:disabled{opacity:.5;cursor:not-allowed}
/* P2 — version History panel (side panel). Cards per version, current pinned at top, Restore/Download. */
.hp-version{padding:10px 12px;border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);display:flex;flex-direction:column;gap:7px}
.hp-version.hp-current{background:color-mix(in srgb,var(--app-accent) 7%,transparent);border-color:color-mix(in srgb,var(--app-accent) 35%,var(--chrome-border))}
.hp-meta{font-size:12px;color:var(--text-primary);line-height:1.4}
.hp-acts{display:flex;gap:6px;margin-top:2px}
.hp-acts .btn,.hp-acts a.btn{flex:1;text-align:center;padding:5px 8px;font-size:12px;text-decoration:none}
/* Wave-1 — version A/B diff (inline tracked-changes) in the History panel. */
.hp-diff-bar{display:flex;gap:6px;align-items:center;padding-bottom:10px;margin-bottom:2px;border-bottom:0.5px solid var(--chrome-border)}
.hp-diff-bar select{flex:1;min-width:0;padding:4px 6px;font-size:12px;border-radius:var(--radius-sm);border:0.5px solid var(--chrome-border);background:var(--chrome-bg);color:var(--text-primary)}
.hp-diff-legend{font-size:11px;color:var(--text-muted);margin:8px 0 6px}
.hp-diff-paper{border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);padding:14px 16px;background:#fff;color:#1a1a1a;font:13px/1.6 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;max-height:48svh;overflow:auto}
.rt-diff-ins{background:#d8f5dd;color:#176c2b;text-decoration:none;border-radius:2px;padding:0 1px}
.rt-diff-del{background:#ffe0e0;color:#b42318;text-decoration:line-through;border-radius:2px;padding:0 1px}
/* the field a dblclick jumped to gets a brief rounded highlight pulse (never a hard-cornered box). */
@keyframes dveFieldPulse{0%{background:color-mix(in srgb,var(--app-accent) 18%,transparent)}100%{background:transparent}}
.dve-field-pulse{animation:dveFieldPulse 1s ease-out;border-radius:10px}
/* free-text editing toggle — "edit text directly on the document" (a one-off per-instance override). */
.dve-freetoggle{display:flex;align-items:flex-start;gap:10px;padding:11px 16px;border-bottom:0.5px solid var(--chrome-border);background:color-mix(in srgb,var(--app-accent) 4%,transparent)}
.dve-free-switch{position:relative;flex:0 0 auto;width:38px;height:22px;margin-top:1px;cursor:pointer}
.dve-free-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.dve-free-track{position:absolute;inset:0;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 18%,transparent);transition:background var(--motion-fast)}
.dve-free-track::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform var(--motion-fast)}
.dve-free-switch input:checked + .dve-free-track{background:var(--app-accent)}
.dve-free-switch input:checked + .dve-free-track::after{transform:translateX(16px)}
.dve-free-lbl{display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--text-primary);line-height:1.35}
.dve-free-lbl strong{font-weight:600}
.dve-free-hint{font-size:11px;color:var(--text-muted);line-height:1.35}
/* the editable preview iframe owns the viewer body when Edit is active. */
.files-preview-body iframe.dve-preview{width:100%;height:100%;border:0;background:#fff;display:block}
.files-preview-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px;text-align:center;color:var(--text-muted)}
.files-prev-tag{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;padding:3px 8px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent);font-weight:600}
.files-prev-tag button{background:none;border:0;color:inherit;cursor:pointer;font-size:13px;line-height:1;padding:0;opacity:.7}
.files-prev-tag button:hover{opacity:1}
.files-prev-tag-sugg{background:var(--chrome-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-pill);padding:3px 9px;font-size:11px;font-weight:500;color:var(--text-primary);cursor:pointer;font-family:inherit}
.files-prev-tag-sugg:hover{background:var(--chrome-bg-hover)}
@media (max-width: 1024px) {
  .files-preview-frame{grid-template-columns:minmax(0, 1fr);grid-template-areas:"head" "body" "side"}
  .files-preview-frame:has(.files-preview-side[style*="none"]){grid-template-areas:"head" "body"}
}
/* 2026-05-17 📘 visual fix V6+V8 — file preview close button off-screen
   on mobile. .files-preview-actions had 6 items at flex-shrink:0 that
   overflowed 440px width, hiding the close X. V6 made actions scroll
   horizontally with close X pinned. V8 stacks the actions BELOW the
   title row on phones so the title can use full width without
   competing for space.
   Layout on phones:
     ┌─────────────────────────────────────────┐
     │ Filename · meta                      ✕  │  ← row 1 (title + close X)
     │ [Tags] [Comments] [Move] [Download] [Delete] →  ← row 2 (actions scroll horizontally)
     └─────────────────────────────────────────┘
*/
@media (max-width: 640px) {
  /* Full-screen on phones (frame is 100svh, overlay padding:0) → the head is the
     topmost element at y=0, so it must clear the notch/dynamic-island/status bar
     in standalone-PWA mode. Mirror the .modal-close safe-area pattern (~L6642):
     pad the head top + offset the pinned close X by env(safe-area-inset-top). */
  .files-preview-head{
    padding:calc(8px + env(safe-area-inset-top,0px)) 50px 8px 14px;gap:6px;
    flex-direction:column;align-items:stretch;
    position:relative;
  }
  .files-preview-title-wrap{flex:1 1 auto;min-width:0;padding-right:44px}
  .files-preview-actions{
    gap:6px;flex-shrink:1;min-width:0;
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .files-preview-actions::-webkit-scrollbar{display:none}
  /* Pin the close button to the top-right corner of the head so it's
     always visible regardless of how far the user has scrolled the
     actions strip left/right. */
  .files-preview-head .files-preview-close{
    position:absolute;right:8px;top:calc(8px + env(safe-area-inset-top,0px));
    width:40px;height:40px;flex-shrink:0;
    background:var(--surface-2);border:0.5px solid var(--chrome-border);
    z-index:2;
  }
  .files-preview-btn{height:36px;padding:0 10px;font-size:12.5px;flex-shrink:0;white-space:nowrap}
}

/* ── Photos: thumbnail card (Apple Photos-style) ── */
.photo-thumb{background:var(--card-bg);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;transition:transform var(--motion-base) var(--ease-spring),box-shadow var(--motion-base) var(--ease-out);box-shadow:var(--shadow-e1)}
.photo-thumb:hover{transform:translateY(-2px) scale(1.01);box-shadow:var(--shadow-e3)}
.photo-thumb:active{transform:translateY(0) scale(.99)}
.photo-thumb-img-wrap{width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--surface-2)}
.photo-thumb-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--motion-base)}
.photo-thumb:hover .photo-thumb-img{transform:scale(1.04)}
.photo-thumb-info{padding:10px 12px 12px}
.photo-thumb-title{font-size:12.5px;font-weight:600;color:var(--text-primary);letter-spacing:-0.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.photo-thumb-project{font-size:10.5px;color:var(--text-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.photo-thumb-date{font-size:10.5px;color:var(--text-muted);margin-top:1px}
.photos-empty{grid-column:1/-1;padding:56px 24px;text-align:center;color:var(--text-muted);font-size:14px;letter-spacing:-.05px}
/* V106 — crafted photos empty state: inviting upload affordance, not a dead void */
.photos-empty-craft{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:9px;padding:40px 24px;border:1.5px dashed color-mix(in srgb,var(--app-accent) 30%,transparent);border-radius:var(--radius-lg);background:color-mix(in srgb,var(--app-accent) 4%,transparent);transition:background var(--motion-base) var(--ease-out),border-color var(--motion-base) var(--ease-out)}
.photos-empty-craft[role=button]{cursor:pointer}
.photos-empty-craft[role=button]:hover{background:color-mix(in srgb,var(--app-accent) 8%,transparent);border-color:color-mix(in srgb,var(--app-accent) 45%,transparent)}
.photos-empty-ico{width:48px;height:48px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent)}
.photos-empty-ico svg{width:24px;height:24px}
.photos-empty-title{font-size:15px;font-weight:700;color:var(--text-primary);letter-spacing:-.2px}
.photos-empty-sub{font-size:12.5px;color:var(--text-muted);max-width:260px;text-align:center;line-height:1.4}
.dl-photo-thumb{width:64px;height:64px;object-fit:cover;border-radius:var(--radius-md);border:0.5px solid var(--chrome-border);cursor:pointer;transition:transform var(--motion-base),box-shadow var(--motion-base);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.dl-photo-thumb:hover{transform:scale(1.06);box-shadow:0 4px 12px rgba(0,0,0,.1)}
.btn-link{background:none;border:none;padding:0;color:var(--app-accent);cursor:pointer;font-family:inherit;text-decoration:underline;text-underline-offset:2px}
.btn-link:hover{opacity:.75}
.photos-loading{grid-column:1/-1;padding:48px 0;text-align:center;color:var(--text-muted);font-size:14px}

/* ── Photos: modal tab ── */
.photos-tab-header{display:flex;align-items:center;justify-content:flex-end;margin-bottom:14px}
.photos-upload-btn{height:30px;padding:0 14px;background:var(--app-accent);color:var(--on-accent);border:none;border-radius:var(--radius-md);font-size:12.5px;font-weight:600;letter-spacing:-.1px;cursor:pointer;transition:opacity var(--motion-fast),transform var(--motion-fast);font-family:inherit;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.photos-upload-btn:hover{opacity:.92}
.photos-upload-btn:active{transform:scale(.97);opacity:1}
.photos-thumb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}

/* ── Lightbox ── */
.photo-lightbox{position:fixed;inset:0;background:var(--overlay-bg-heavy);z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity var(--motion-base)}
.photo-lightbox.active{opacity:1;pointer-events:all}
.photo-lb-inner{display:flex;width:90vw;max-width:1100px;max-height:90svh;background:var(--card-bg);border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,.5);position:relative}
/* V39rr — photo-lb-close: Apple feel (no scale-up on hover; scale-down on active) */
/* Close sits top-LEFT, over the image area, so it never overlaps the panel's
   delete (trash) button at the panel's top-right (desktop side-by-side layout). */
.photo-lb-close{position:absolute;top:12px;left:12px;z-index:10;width:30px;height:30px;border:none;background:rgba(0,0,0,.5);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#fff;border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;transition:background var(--motion-fast),transform var(--motion-fast)}
.photo-lb-close:hover{background:rgba(0,0,0,.7)}
.photo-lb-close:active{transform:scale(.92)}
/* 2026-06-20 — keyboard focus ring that reads against the dark lightbox: a white halo + a thin
   dark inset so it stays visible on both the dimmed backdrop and a bright photo behind it. */
.photo-lb-close:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(0,0,0,.6),0 0 0 4px #fff}
.photo-lb-close svg{width:12px;height:12px}
/* Lightbox prev/next nav — Apple-feel frosted circular controls over the image. */
.photo-lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:11;width:40px;height:40px;border:none;background:rgba(0,0,0,.42);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#fff;border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;transition:background var(--motion-fast),transform var(--motion-fast),opacity var(--motion-fast)}
.photo-lb-nav:hover{background:rgba(0,0,0,.62)}
.photo-lb-nav:active{transform:translateY(-50%) scale(.9)}
.photo-lb-nav:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(0,0,0,.6),0 0 0 4px #fff}
.photo-lb-nav svg{width:18px;height:18px}
.photo-lb-prev{left:14px}
.photo-lb-next{right:14px}
.photo-lb-nav[disabled]{opacity:0;pointer-events:none}
@media (max-width:640px){.photo-lb-nav{width:var(--tap-min);height:var(--tap-min);background:rgba(0,0,0,.5)}.photo-lb-prev{left:8px}.photo-lb-next{right:8px}}
.photo-lb-img-wrap{flex:1;min-width:0;background:#111;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.photo-lb-img{max-width:100%;max-height:90svh;object-fit:contain;display:block}
/* Photo Intelligence P1 — markup overlay (lightbox). Host sits exactly over the rendered
   image box; canvas captures ink. Toolbar floats as a rounded glass pill (DESIGN.md). */
.photo-lb-img-wrap.pmk-active .photo-lb-img{cursor:crosshair}
.pmk-host{position:absolute;z-index:6;touch-action:none}
.pmk-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
/* Glass material + tactile finishes for .pmk-toolbar live in the shared
   .uae-toolbar,.pmk-toolbar rule below (the --surface-1 bug is fixed there). This
   keeps only the photo-markup-specific button metrics. */
.pmk-btn{height:30px;min-width:30px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;border:0.5px solid transparent;border-radius:9px;background:transparent;color:var(--text-muted);cursor:pointer;transition:background var(--motion-base),color var(--motion-base),transform var(--motion-fast) var(--ease-spring)}
.pmk-btn svg{width:15px;height:15px}
.pmk-btn:hover:not(:disabled){background:var(--chrome-bg-hover);color:var(--text)}
.pmk-btn:disabled{opacity:.4;cursor:default}
.pmk-tool.on{background:var(--app-accent);color:#fff;border-color:transparent}
.pmk-done{font-size:13px;font-weight:600;color:var(--app-accent);padding:0 12px}
.pmk-flatten{font-size:13px;font-weight:600;gap:5px;padding:0 11px;color:var(--app-accent)}
.pmk-flatten span{font-size:12px}
.pmk-flatten.busy{opacity:.6;pointer-events:none}
@media (max-width:640px){.pmk-flatten span{display:none}}
.pmk-sep{width:0.5px;height:18px;background:var(--chrome-border);margin:0 2px;flex-shrink:0}
.pmk-colors{display:flex;gap:4px;align-items:center}
.pmk-swatch{width:18px;height:18px;border-radius:50%;border:1.5px solid transparent;cursor:pointer;padding:0;box-shadow:0 0 0 0.5px rgba(0,0,0,.25)}
.pmk-swatch.on{border-color:#fff;box-shadow:0 0 0 1.5px var(--app-accent)}
.pmk-width{display:flex;align-items:center;transition:opacity var(--motion-base)}
.pmk-width input[type=range]{width:64px;accent-color:var(--app-accent);cursor:pointer}
@media (max-width:640px){.pmk-toolbar{bottom:10px;gap:4px;padding:6px 8px}.pmk-btn{height:var(--tap-min,34px);min-width:var(--tap-min,34px)}.pmk-swatch{width:22px;height:22px}}
/* ═══ §3 Unified Annotation Engine — AnnotationSurface (chat/photo/doc markup overlay) ═══ */
.uae-wrap{position:absolute;inset:0;z-index:6;pointer-events:none}
.uae-wrap.uae-armed .uae-canvas{pointer-events:auto;cursor:crosshair}
.uae-wrap.uae-tool-text .uae-canvas{cursor:copy}
/* W3 re-edit — the select tool needs canvas clicks (it isn't "armed" like a drawing tool, so it
   wouldn't get pointer-events otherwise). default cursor so it reads as select, not draw. */
.uae-wrap.uae-tool-select .uae-canvas{pointer-events:auto;cursor:default}
.uae-canvas{position:absolute;pointer-events:none;touch-action:none}
.uae-dom{position:absolute;pointer-events:none}
.uae-box{position:absolute;pointer-events:auto;min-width:40px;box-sizing:border-box}
.uae-box-text{border:1px dashed transparent;border-radius:6px;padding:2px}
.uae-box-text:hover,.uae-box-text:focus-within{border-color:color-mix(in srgb,var(--app-accent) 50%,transparent)}
.uae-box-body{outline:none;font:600 15px/1.35 BlinkMacSystemFont,-apple-system,"SF Pro Text",sans-serif;min-width:30px;white-space:pre-wrap;word-break:break-word;cursor:text}
.uae-box-body:empty::before{content:"Type…";color:color-mix(in srgb,currentColor 45%,transparent)}
.uae-box-stamp{display:flex;align-items:center;justify-content:center;border:2.5px solid currentColor;border-radius:7px;padding:3px 10px;font:800 13px/1 BlinkMacSystemFont,-apple-system,"SF Pro Display",sans-serif;letter-spacing:.04em;text-transform:uppercase;background:color-mix(in srgb,currentColor 8%,transparent);min-height:26px;user-select:none}
.uae-stamp-label{white-space:nowrap}
/* 8-handle resize grips + rotate + delete */
.uae-h{position:absolute;width:10px;height:10px;background:var(--card-bg);border:1.5px solid var(--app-accent);border-radius:50%;opacity:0;transition:opacity var(--motion-fast)}
.uae-box:hover .uae-h{opacity:1}
.uae-h-nw{left:-5px;top:-5px;cursor:nwse-resize}.uae-h-n{left:calc(50% - 5px);top:-5px;cursor:ns-resize}.uae-h-ne{right:-5px;top:-5px;cursor:nesw-resize}
.uae-h-e{right:-5px;top:calc(50% - 5px);cursor:ew-resize}.uae-h-se{right:-5px;bottom:-5px;cursor:nwse-resize}.uae-h-s{left:calc(50% - 5px);bottom:-5px;cursor:ns-resize}
.uae-h-sw{left:-5px;bottom:-5px;cursor:nesw-resize}.uae-h-w{left:-5px;top:calc(50% - 5px);cursor:ew-resize}
.uae-h-rot{position:absolute;left:calc(50% - 6px);top:-26px;width:12px;height:12px;border-radius:50%;background:var(--app-accent);cursor:grab;opacity:0;transition:opacity var(--motion-fast)}
.uae-h-rot::before{content:"";position:absolute;left:5px;top:12px;width:1.5px;height:14px;background:var(--app-accent)}
.uae-box:hover .uae-h-rot{opacity:1}
.uae-box-del{position:absolute;right:-9px;top:-9px;width:18px;height:18px;border-radius:50%;border:0;background:var(--danger,#ff3b30);color:#fff;font-size:13px;line-height:1;cursor:pointer;opacity:0;display:flex;align-items:center;justify-content:center;transition:opacity var(--motion-fast)}
.uae-box:hover .uae-box-del{opacity:1}
/* toolbar — reuse the photo glass-pill aesthetic */
/* FIX (was broken): bg referenced undefined --surface-1 inside color-mix → whole bg
   declaration invalid → dropped → pill had NO material (survived on blur alone,
   invisible under reduced-transparency). Rebuilt on the real Liquid-Glass system
   (--lg-bg + --lg-edge specular rim + --shadow-e4 popover elevation). Chrome-only
   glass; the .lg-sheen class on the markup adds the reserved pointer-tracking glint. */
.uae-toolbar,.pmk-toolbar{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;flex-wrap:wrap;padding:7px 10px;border-radius:var(--radius-lg,14px);background:var(--lg-bg,var(--frost-bg-strong,var(--surface)));backdrop-filter:var(--lg-refract,blur(24px) saturate(1.9) brightness(1.05));-webkit-backdrop-filter:var(--lg-refract,blur(24px) saturate(1.9) brightness(1.05));border:0.5px solid var(--chrome-border);box-shadow:var(--shadow-e4),var(--lg-edge);max-width:calc(100% - 24px);pointer-events:auto}
.uae-toolbar{z-index:9;gap:5px}
.pmk-toolbar{z-index:8;gap:6px}
/* a11y: no-blur / reduced-transparency keeps the pill a legible solid pane (was missing entirely). */
@media (prefers-reduced-transparency:reduce){.uae-toolbar,.pmk-toolbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--surface);box-shadow:var(--shadow-e3),inset 0 0.5px 0 var(--chrome-border-strong,var(--chrome-border))}}
/* Tactile markup tools — press-deform squish + rounded LIT active state (shared across both toolbars). */
.uae-tool{width:32px;height:32px;border:0;border-radius:9px;background:transparent;color:var(--text-primary);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast),color var(--motion-fast)}
.uae-tool svg{width:16px;height:16px}
.uae-tool:hover{background:color-mix(in srgb,var(--text-primary) 10%,transparent)}
.uae-tool:active,.pmk-btn:active:not(:disabled){transform:scale(.88)}
.uae-tool.on,.pmk-tool.on{background:var(--app-accent);color:var(--on-accent,#fff);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--specular-hi) 38%,transparent),inset 0 -1px 2px color-mix(in srgb,var(--app-accent) 60%,#000),0 0 0 1px color-mix(in srgb,var(--app-accent) 45%,transparent)}
.uae-tool.on:active,.pmk-tool.on:active{transform:scale(.9)}
/* Etched divider — bright specular hairline beside the dark line so it reads milled into the pane (both toolbars). */
.uae-sep,.pmk-sep{width:1px;height:20px;background:linear-gradient(var(--chrome-border),var(--chrome-border));box-shadow:1px 0 0 color-mix(in srgb,var(--specular-hi) 14%,transparent);margin:0 3px;border-radius:1px;flex-shrink:0}
.uae-colors{display:inline-flex;gap:3px}
/* Glassy domed color-wells (shared with .pmk-swatch twin). Specular dome + press squish +
   rounded lit halo when chosen. The selected halo + rest ring use a self-relative
   color-mix against the swatch's OWN fill (currentColor stand-in via the inline bg) so the
   dome reads even on the darkest pigments (a fixed black inner-shadow vanishes on black ink). */
.uae-color,.pmk-swatch{position:relative;width:18px;height:18px;border-radius:50%;border:1.5px solid color-mix(in srgb,#000 14%,transparent);cursor:pointer;padding:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 3px rgba(0,0,0,.22),0 1px 2px rgba(0,0,0,.28),0 0 0 0.5px rgba(255,255,255,.25);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
.uae-color::after,.pmk-swatch::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(120% 90% at 32% 22%,rgba(255,255,255,.55),rgba(255,255,255,0) 52%);pointer-events:none}
.uae-color:hover,.pmk-swatch:hover{transform:scale(1.14)}
.uae-color:active,.pmk-swatch:active{transform:scale(.92)}
.uae-color.on,.pmk-swatch.on{border-color:var(--app-accent);transform:scale(1.08);box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 38%,transparent),inset 0 1px 0 rgba(255,255,255,.5),0 2px 5px rgba(0,0,0,.3)}
@media (prefers-reduced-motion:reduce){.uae-tool,.uae-tool:active,.uae-tool.on:active,.pmk-btn:active,.pmk-tool.on:active{transition:background var(--motion-fast),color var(--motion-fast);transform:none}.uae-color,.uae-color:hover,.uae-color:active,.uae-color.on,.pmk-swatch,.pmk-swatch:hover,.pmk-swatch:active,.pmk-swatch.on{transition:none;transform:none}}
.uae-saved{font-size:11px;font-weight:600;color:var(--text-muted);opacity:0;transition:opacity var(--motion-fast);margin-left:4px}
.uae-saved.show{opacity:1;color:var(--accent-positive,#34c759)}
.uae-stamp-pop{position:absolute;bottom:46px;left:50%;transform:translateX(-50%);min-width:210px;padding:8px;border-radius:14px;display:flex;flex-direction:column;gap:4px;z-index:11}
/* 🐋 (Gavin: "barely visible") — the picker floats over an arbitrary DOCUMENT; glass is illegible
   there. Solid opaque card + strong shadow, out-specifying the .rt-glass-pop material. */
.uae-stamp-pop.rt-glass-pop{background:var(--card-bg);backdrop-filter:none;-webkit-backdrop-filter:none;border:.5px solid var(--chrome-border);box-shadow:0 18px 50px rgba(0,0,0,.4),var(--shadow-e2)}
.uae-stamp-pop-head{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);padding:2px 6px 6px}
.uae-stamp-opt{display:flex;align-items:center;justify-content:flex-start;gap:6px;border:1.5px solid var(--sc,#888);color:var(--sc,#888);background:color-mix(in srgb,var(--sc,#888) 13%,var(--card-bg));border-radius:8px;padding:7px 11px;font:700 12px/1 BlinkMacSystemFont,-apple-system,sans-serif;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;transition:background var(--motion-fast),transform var(--motion-fast)}
.uae-stamp-opt:hover{background:color-mix(in srgb,var(--sc,#888) 24%,var(--card-bg));transform:translateY(-1px)}
.uae-stamp-locked{opacity:.5;cursor:not-allowed}
/* Mobile tap-size restore — placed AFTER the shared color-well rule so it isn't clobbered by it. */
@media (max-width:640px){.uae-toolbar{bottom:10px;gap:3px;padding:6px 8px}.uae-tool{width:var(--tap-min,34px);height:var(--tap-min,34px)}.uae-color,.pmk-swatch{width:22px;height:22px}}
.photo-lb-panel{width:320px;flex-shrink:0;display:flex;flex-direction:column;overflow-y:auto;border-left:0.5px solid var(--chrome-border);padding:24px 20px}
.photo-lb-meta{margin-bottom:20px}
.photo-lb-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:6px}
.photo-lb-title{font-size:16px;font-weight:600;color:var(--text);flex:1;word-break:break-word}
.photo-lb-rename{flex-shrink:0;height:26px;padding:0 10px;background:none;border:0.5px solid var(--chrome-border);border-radius:var(--radius-sm);font-size:12px;color:var(--text-muted);cursor:pointer;transition:border-color var(--motion-base)}
.photo-lb-rename:hover{border-color:var(--app-accent);color:var(--app-accent)}
.photo-lb-delete{flex-shrink:0;height:26px;width:30px;padding:0;background:none;border:0.5px solid var(--chrome-border);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;transition:border-color var(--motion-base),color var(--motion-base);display:inline-flex;align-items:center;justify-content:center;margin-left:4px}
.photo-lb-delete:hover{border-color:var(--err);color:var(--err)}
.photo-lb-rename-input{width:100%;padding:6px 10px;border:0.5px solid var(--app-accent);border-radius:var(--radius-md);font-size:14px;color:var(--text);background:var(--card-bg);outline:none;margin-bottom:10px;box-sizing:border-box;transition:box-shadow var(--motion-base),border-color var(--motion-base)}
.photo-lb-rename-input:focus-visible{outline:none;border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--app-accent) 22%, transparent)}
.photo-lb-info{display:flex;flex-direction:column;gap:6px}
.photo-lb-info-row{display:flex;flex-direction:column;gap:1px}
.photo-lb-info-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted)}
.photo-lb-info-row>span:last-child{font-size:13px;color:var(--text)}
/* P4 — GPS map link in the lightbox location row. Accent, quiet underline-on-hover. */
.photo-lb-maplink{color:var(--app-accent);font-weight:600;text-decoration:none;transition:color var(--motion-fast,150ms) var(--ease-out,ease)}
.photo-lb-maplink:hover{text-decoration:underline}
/* 2026-06-14 Photo polish — pin glyph before the human-readable coordinates in the GPS row. */
.photo-lb-geo{display:inline-flex;align-items:center;gap:5px}
.photo-lb-geo-ico{width:12px;height:12px;color:var(--app-accent);opacity:.85;flex-shrink:0}
/* Lightbox editable tags (pass-2 — tag editing moved here from the old detail pane) */
.photo-lb-tags{margin-top:16px;padding-top:16px;border-top:0.5px solid var(--chrome-border)}
.photo-lb-tags-row{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.lb-tag-chip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;padding:3px 6px 3px 9px;border-radius:999px;background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:color-mix(in srgb,var(--app-accent) 82%,var(--text-primary))}
.lb-tag-chip button{border:none;background:none;cursor:pointer;color:inherit;font-size:13px;line-height:1;padding:0}
.lb-tag-input{border:0.5px solid var(--border);border-radius:999px;padding:3px 10px;font-size:11.5px;outline:none;background:var(--surface-2);color:var(--text-primary);width:84px}
/* P5 (a) — AI tag-suggestion chips (lightbox). Rounded, kind-badged, no edge-strips (DESIGN.md). */
.lb-tagsug-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.lb-tagsug-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 9px 4px 5px;border-radius:999px;border:0.5px solid var(--border);background:var(--surface-2);color:var(--text-primary);font-size:11.5px;font-weight:600;cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-base),background var(--motion-base)}
.lb-tagsug-chip:hover:not(:disabled){background:var(--surface);box-shadow:var(--shadow-e2);transform:translateY(-1px)}
.lb-tagsug-chip:disabled,.lb-tagsug-chip.accepted{cursor:default;opacity:.62}
.lb-tagsug-kind{font-size:9.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:2px 6px;border-radius:999px;color:#fff}
.lb-tagsug-trade{background:#3b82f6}.lb-tagsug-material{background:#8b5cf6}.lb-tagsug-phase{background:#10b981}.lb-tagsug-scene{background:#64748b}
.lb-tagsug-label{color:var(--text-primary)}
.lb-tagsug-conf{font-size:10px;font-weight:600;color:var(--text-tertiary)}
.lb-tagsug-check{color:#10b981;font-weight:700}
/* S2 — photo → punch suggestion (lightbox) */
.photo-lb-punch{margin-top:16px;padding-top:16px;border-top:0.5px solid var(--chrome-border)}
.photo-lb-punch-btn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--app-accent) 30%,transparent);background:color-mix(in srgb,var(--app-accent) 12%,var(--surface));color:var(--app-accent);font-size:13px;font-weight:600;letter-spacing:-.1px;cursor:pointer;box-shadow:var(--shadow-e1),inset 0 1px 0 rgba(255,255,255,.14);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-base),background var(--motion-base)}
.photo-lb-punch-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2}
.photo-lb-punch-btn:hover{background:color-mix(in srgb,var(--app-accent) 18%,var(--surface));box-shadow:var(--shadow-e3),inset 0 1px 0 rgba(255,255,255,.2)}
.photo-lb-punch-btn:active{transform:scale(.96)}
.photo-lb-punch-btn.busy{opacity:.7;pointer-events:none}
/* Pillar C — share-to-chat button (matched pair with the punch suggest button). */
.photo-lb-share{margin-top:10px}
.photo-lb-share-btn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--app-accent) 30%,transparent);background:color-mix(in srgb,var(--app-accent) 12%,var(--surface));color:var(--app-accent);font-size:13px;font-weight:600;letter-spacing:-.1px;cursor:pointer;box-shadow:var(--shadow-e1),inset 0 1px 0 rgba(255,255,255,.14);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-base),background var(--motion-base)}
.photo-lb-share-btn svg{width:14px;height:14px}
.photo-lb-share-btn:hover{background:color-mix(in srgb,var(--app-accent) 18%,var(--surface));box-shadow:var(--shadow-e3),inset 0 1px 0 rgba(255,255,255,.2)}
.photo-lb-share-btn:active{transform:scale(.96)}
.photo-lb-share-btn.busy{opacity:.7;pointer-events:none}
/* Photo Intelligence P1 — markup launcher button (mirrors share/punch pill styling). */
.photo-lb-markup{margin-top:10px}
.photo-lb-markup-btn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--app-accent) 30%,transparent);background:color-mix(in srgb,var(--app-accent) 12%,var(--surface));color:var(--app-accent);font-size:13px;font-weight:600;letter-spacing:-.1px;cursor:pointer;box-shadow:var(--shadow-e1),inset 0 1px 0 rgba(255,255,255,.14);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-base),background var(--motion-base)}
.photo-lb-markup-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2}
.photo-lb-markup-btn:hover{background:color-mix(in srgb,var(--app-accent) 18%,var(--surface));box-shadow:var(--shadow-e3),inset 0 1px 0 rgba(255,255,255,.2)}
.photo-lb-markup-btn:active{transform:scale(.96)}
/* ── Photo Intelligence P4 — series action buttons (reuse the markup-btn pill family) ── */
.photo-lb-series{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.photo-lb-series-btn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--app-accent) 30%,transparent);background:color-mix(in srgb,var(--app-accent) 12%,var(--surface));color:var(--app-accent);font-size:13px;font-weight:600;letter-spacing:-.1px;cursor:pointer;box-shadow:var(--shadow-e1),inset 0 1px 0 rgba(255,255,255,.14);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-base),background var(--motion-base)}
.photo-lb-series-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2}
.photo-lb-series-btn:hover{background:color-mix(in srgb,var(--app-accent) 18%,var(--surface));box-shadow:var(--shadow-e3),inset 0 1px 0 rgba(255,255,255,.2)}
.photo-lb-series-btn:active{transform:scale(.96)}
.photo-lb-series-btn.secondary{border-color:color-mix(in srgb,var(--text-secondary) 24%,transparent);background:var(--surface);color:var(--text-secondary)}
.photo-lb-series-btn.secondary:hover{background:color-mix(in srgb,var(--text-secondary) 8%,var(--surface));color:var(--text)}

/* ── Series picker modal (group same-angle photos) ── */
.lb-series-modal{position:fixed;inset:0;z-index:9600;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.5);backdrop-filter:blur(8px) saturate(1.3);-webkit-backdrop-filter:blur(8px) saturate(1.3)}
.lb-series-modal.active{display:flex}
.lb-series-card{width:min(720px,100%);max-height:86vh;display:flex;flex-direction:column;background:var(--card-bg,var(--surface));border-radius:var(--radius-lg,18px);box-shadow:var(--shadow-e4);overflow:hidden;border:.5px solid rgba(0,0,0,.08)}
.lb-series-head{display:flex;align-items:flex-start;gap:12px;padding:18px 20px 14px}
.lb-series-title{font:600 18px/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif;color:var(--text)}
.lb-series-sub{margin-top:3px;font-size:12.5px;color:var(--text-secondary);max-width:46ch}
.lb-series-close{margin-left:auto;width:32px;height:32px;border-radius:999px;border:none;background:color-mix(in srgb,var(--text-secondary) 10%,transparent);color:var(--text-secondary);display:grid;place-items:center;cursor:pointer;transition:background var(--motion-fast)}
.lb-series-close svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.lb-series-close:hover{background:color-mix(in srgb,var(--text-secondary) 18%,transparent)}
.lb-series-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;padding:4px 20px 16px;overflow-y:auto}
.lbsp-tile{position:relative;aspect-ratio:1;border-radius:13px;overflow:hidden;border:2px solid transparent;background:var(--surface-2);cursor:pointer;padding:0;box-shadow:var(--shadow-e1);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast),border-color var(--motion-fast)}
.lbsp-tile img{width:100%;height:100%;object-fit:cover;display:block}
.lbsp-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-e3)}
.lbsp-tile .lbsp-when{position:absolute;left:6px;bottom:6px;font-size:10px;font-weight:700;color:#fff;padding:1px 6px;border-radius:999px;background:rgba(0,0,0,.5);backdrop-filter:blur(4px)}
.lbsp-tile .lbsp-check{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:999px;display:grid;place-items:center;background:rgba(0,0,0,.35);color:#fff;opacity:0;transform:scale(.8);transition:opacity var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.lbsp-tile .lbsp-check .ic{width:12px;height:12px}
.lbsp-tile.on{border-color:var(--app-accent);box-shadow:var(--shadow-e3),0 0 0 3px color-mix(in srgb,var(--app-accent) 22%,transparent)}
.lbsp-tile.on .lbsp-check{opacity:1;transform:scale(1);background:var(--app-accent)}
.lbsp-empty{grid-column:1/-1;text-align:center;color:var(--text-secondary);font-size:13px;padding:30px 0}
.lb-series-foot{display:flex;align-items:center;gap:10px;padding:14px 20px;border-top:.5px solid rgba(0,0,0,.07);background:color-mix(in srgb,var(--text-secondary) 4%,var(--surface))}
.lb-series-ungroup{color:var(--color-error)}

/* ── Before/After compare overlay (swipe slider + annotation overlay) ── */
.lb-compare-overlay{position:fixed;inset:0;z-index:9650;display:none;flex-direction:column;align-items:center;justify-content:center;padding:24px;background:rgba(10,10,12,.92);backdrop-filter:blur(6px)}
.lb-compare-overlay.active{display:flex}
.lb-compare-close{position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:999px;border:none;background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;cursor:pointer;z-index:3;transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.lb-compare-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.lb-compare-close:hover{background:rgba(255,255,255,.2)}
.lb-compare-close:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(0,0,0,.6),0 0 0 4px #fff}
.lb-compare-close:active{transform:scale(.92)}
.lb-compare-inner{display:flex;flex-direction:column;gap:14px;width:min(1100px,100%);flex:1;min-height:0;align-items:center}
.lb-compare-stage{position:relative;width:100%;flex:1;min-height:0;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 24px 70px rgba(0,0,0,.55);touch-action:none;user-select:none;cursor:ew-resize}
.lb-compare-layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.lb-compare-layer img{max-width:100%;max-height:100%;object-fit:contain;display:block;pointer-events:none}
.lb-compare-after{clip-path:inset(0 0 0 50%)}
.lb-compare-tag{position:absolute;top:14px;font-size:12px;font-weight:600;color:#fff;padding:5px 11px;border-radius:999px;background:rgba(0,0,0,.5);backdrop-filter:blur(8px) saturate(1.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.18);letter-spacing:-.1px}
.lb-compare-tag b{font-weight:800;margin-right:5px}
.lb-compare-tag-before{left:14px}
.lb-compare-tag-after{right:14px}
.lb-compare-ann{position:absolute;pointer-events:none;z-index:2}
.lb-compare-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(0,0,0,.3);transform:translateX(-50%);z-index:3;pointer-events:none}
.lb-compare-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:999px;background:rgba(255,255,255,.96);color:#1c1c1e;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.6)}
.lb-compare-grip svg{width:20px;height:20px}
.lb-compare-bar{display:flex;align-items:center;gap:14px;width:100%;flex-wrap:wrap;background:var(--frost-bg,rgba(40,40,46,.7));backdrop-filter:var(--frost-blur,blur(20px) saturate(1.8));-webkit-backdrop-filter:var(--frost-blur,blur(20px) saturate(1.8));border-radius:14px;padding:10px 14px;box-shadow:var(--shadow-e2),inset 0 1px 0 rgba(255,255,255,.1)}
.lb-compare-toggle{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;font-size:13px;font-weight:600;cursor:pointer;letter-spacing:-.1px;transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast);white-space:nowrap}
.lb-compare-toggle svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2}
.lb-compare-toggle:hover{background:rgba(255,255,255,.16)}
.lb-compare-toggle:focus-visible,.lbcs-tile:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(0,0,0,.55),0 0 0 4px #fff}
.lb-compare-toggle:active{transform:scale(.96)}
.lb-compare-toggle.on{background:var(--app-accent);border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 30%,transparent)}
.lb-compare-strip{display:flex;gap:8px;overflow-x:auto;flex:1;min-width:0;padding:2px}
.lbcs-tile{position:relative;flex:0 0 auto;width:56px;height:56px;border-radius:11px;overflow:hidden;border:2px solid transparent;background:#222;cursor:pointer;padding:0;transition:transform var(--motion-fast) var(--ease-spring),border-color var(--motion-fast)}
.lbcs-tile img{width:100%;height:100%;object-fit:cover;display:block}
.lbcs-tile:hover{transform:translateY(-2px)}
.lbcs-tile.before{border-color:#0a84ff}
.lbcs-tile.after{border-color:#34c759}
.lbcs-tile .lbcs-role{position:absolute;left:0;right:0;bottom:0;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;text-align:center;color:#fff;padding:1px 0;background:rgba(0,0,0,.55)}
@media (max-width:640px){
  .lb-compare-overlay{padding:12px}
  .lb-compare-bar{gap:10px}
  .lb-compare-toggle span{display:none}
  .lb-compare-toggle{padding:0 12px}
}
.lb-punch-status{display:flex;align-items:flex-start;gap:7px;margin-top:12px;font-size:12.5px;line-height:1.4;color:var(--color-success);letter-spacing:-.05px}
.lb-punch-status.assist{color:var(--text-secondary)}
.lb-punch-ic{width:14px;height:14px;flex-shrink:0;margin-top:1px;fill:none;stroke:currentColor;stroke-width:2.2}
.lb-punch-form{display:flex;flex-direction:column;gap:8px;margin-top:11px}
.lb-punch-in{width:100%;box-sizing:border-box;padding:8px 11px;border-radius:11px;border:1px solid var(--chrome-border);background:var(--card-bg);color:var(--text-primary);font-size:13px;outline:none;transition:border-color var(--motion-base),box-shadow var(--motion-base)}
.lb-punch-in:focus-visible{border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 20%,transparent)}
.lb-punch-item{resize:vertical;min-height:48px;font-family:inherit}
.lb-punch-row{display:flex;gap:8px}
.lb-punch-row .lb-punch-in{flex:1}
.lb-punch-sel{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%238a8a8e' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}
.lb-punch-add{margin-top:2px;height:36px;border-radius:999px;border:none;background:linear-gradient(180deg,color-mix(in srgb,var(--app-accent) 92%,#fff) 0%,var(--app-accent) 100%);color:#fff;font-size:13.5px;font-weight:600;letter-spacing:-.1px;cursor:pointer;box-shadow:var(--shadow-e2),inset 0 1px 0 rgba(255,255,255,.26);transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-base),filter var(--motion-base)}
.lb-punch-add:hover{filter:brightness(1.05);box-shadow:var(--shadow-e3),inset 0 1px 0 rgba(255,255,255,.3)}
.lb-punch-add:active{transform:scale(.97)}
.lb-punch-add:disabled{opacity:.6;pointer-events:none}
.photo-lb-comments-wrap{flex:1;display:flex;flex-direction:column;border-top:0.5px solid var(--chrome-border);padding-top:16px;margin-top:4px;min-height:0}
.photo-lb-comments-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:10px}
.photo-lb-comments-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;min-height:0;max-height:260px}
.lb-no-comments{font-size:13px;color:var(--text-muted);text-align:center;padding:16px 0}
.lb-comment{background:var(--bg);border-radius:var(--radius-md);padding:10px 12px}
.lb-comment-header{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.lb-comment-author{font-size:12px;font-weight:600;color:var(--text);flex:1}
.lb-comment-date{font-size:11px;color:var(--text-muted)}
.lb-comment-delete{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:12px;padding:0 2px;transition:color var(--motion-base)}
.lb-comment-delete:hover{color:var(--app-danger)}
.lb-comment-body{font-size:13px;color:var(--text);white-space:pre-wrap;word-break:break-word}
.photo-lb-comment-compose{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.photo-lb-comment-input{width:100%;padding:8px 10px;border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);font-size:13px;color:var(--text);background:var(--card-bg);resize:none;outline:none;font-family:inherit;box-sizing:border-box;transition:box-shadow var(--motion-base),border-color var(--motion-base)}
.photo-lb-comment-input:focus{border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--app-accent) 22%, transparent)}
.photo-lb-comment-send{align-self:flex-end;height:32px;padding:0 16px;background:var(--app-accent);color:var(--on-accent);border:none;border-radius:var(--radius-md);font-size:13px;font-weight:600;cursor:pointer;transition:opacity var(--motion-base)}
.photo-lb-comment-send:hover{opacity:.85}

/* ── Financial Reports ── */
/* pass-3 (_STANDARD.md A): matte stage — full-width, even 12px frame, no centered max-width cap (was 1600px). */
.reports-page{padding:22px 26px;overflow-y:auto;width:100%;box-sizing:border-box;flex:1;min-height:0}
.reports-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px;gap:12px;flex-wrap:wrap;padding:0 2px}
.reports-title{font-size:21px;font-weight:800;color:var(--on-app-bg);letter-spacing:-.4px}
.reports-title-block{display:flex;flex-direction:column;gap:2px;min-width:0}
.reports-subtitle{font-size:12.5px;font-weight:600;color:color-mix(in srgb,var(--on-app-bg) 62%,transparent);letter-spacing:-.1px;font-variant-numeric:tabular-nums}
.reports-header .btn-quiet{color:color-mix(in srgb,var(--on-app-bg) 85%,transparent)}
.reports-header .btn-quiet:hover{color:var(--on-app-bg)}
.reports-summary-bar{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.reports-stat-card{background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);padding:14px 20px;min-width:160px;flex:1;box-shadow:var(--shadow-e1)}
.reports-stat-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.reports-stat-value{font-size:22px;font-weight:700;color:var(--text)}
.reports-stat-sub{font-size:12px;color:var(--text-muted);margin-top:2px}
/* Lead-tile hierarchy (item 4): the primary stat commands — accent-graded surface,
   larger value, raised. Metadata tiles recede beside it. */
.reports-stat-card.lead{flex:1.5 1 0;background:linear-gradient(135deg,color-mix(in srgb,var(--app-accent) 12%,var(--card-bg)),var(--card-bg));border-color:color-mix(in srgb,var(--app-accent) 22%,var(--chrome-border));box-shadow:var(--bevel-top,inset 0 1px 0 rgba(255,255,255,.18)),var(--shadow-e2)}
.reports-stat-card.lead .reports-stat-label{color:color-mix(in srgb,var(--app-accent) 70%,var(--text-muted))}
.reports-stat-card.lead .reports-stat-value{font-size:30px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text-primary)}
/* Labor command rollup (enh6) — one authored card, internal dividers */
.lbr-cmd{display:flex;gap:0;flex-wrap:wrap;align-items:stretch;background:linear-gradient(135deg,color-mix(in srgb,var(--app-accent) 9%,var(--card-bg)),var(--card-bg));border:.5px solid color-mix(in srgb,var(--app-accent) 20%,var(--chrome-border));border-radius:var(--radius-lg);padding:20px 24px;margin-bottom:20px;box-shadow:var(--bevel-top),var(--shadow-e2)}
.lbr-cmd-lead{min-width:200px;padding-right:24px;border-right:.5px solid color-mix(in srgb,var(--text-primary) 8%,transparent)}
.lbr-cmd-eyebrow{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary)}
.lbr-cmd-eyebrow svg{width:13px;height:13px}
.lbr-cmd-big{font-size:36px;font-weight:800;letter-spacing:-1.1px;color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1.05;margin-top:4px}
.lbr-cmd-sub{font-size:12px;color:var(--text-muted);margin-top:4px}
.lbr-cmd-grid{display:flex;gap:30px;align-items:center;flex-wrap:wrap;padding-left:24px}
.lbr-cmd-mv{font-size:23px;font-weight:800;letter-spacing:-.6px;color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1}
.lbr-cmd-ml{font-size:11px;font-weight:600;color:var(--text-secondary);margin-top:5px}
@media (max-width:640px){.lbr-cmd{padding:16px;flex-direction:column}.lbr-cmd-lead{border-right:0;border-bottom:.5px solid color-mix(in srgb,var(--text-primary) 8%,transparent);padding-right:0;padding-bottom:14px;width:100%}.lbr-cmd-grid{padding-left:0;padding-top:14px;gap:20px}.lbr-cmd-big{font-size:28px}.lbr-cmd-mv{font-size:19px}}
/* Labor table hours-share meter + productivity (enh7) */
.lbr-proj{font-weight:600;cursor:pointer;border-radius:var(--radius-md);transition:background var(--motion-fast)}
.lbr-proj:hover{background:color-mix(in srgb,var(--app-accent) 7%,transparent)}
.lbr-hmeter{position:relative;display:inline-flex;align-items:baseline;gap:7px;justify-content:flex-end;padding:3px 9px;border-radius:var(--radius-pill);z-index:0;font-variant-numeric:tabular-nums}
.lbr-hmeter::before{content:"";position:absolute;inset:0;right:auto;width:var(--fill);background:color-mix(in srgb,var(--app-accent) 16%,transparent);border-radius:var(--radius-pill);z-index:-1}
.lbr-hmeter b{font-weight:700;color:var(--text-primary)}
.lbr-share{font-style:normal;font-size:10.5px;font-weight:600;color:var(--text-muted);min-width:30px}
@media (max-width:640px){.lbr-hmeter::before{display:none}.lbr-share{display:none}}
.reports-table-wrap{overflow-x:auto;background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-e2)}
.reports-table{width:100%;border-collapse:collapse;font-size:13px}
.reports-table th{background:var(--surface-2);color:var(--text-muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.4px;padding:10px 14px;text-align:right;border-bottom:0.5px solid var(--chrome-border);white-space:nowrap}
.reports-table th:first-child{text-align:left}
.reports-table td{padding:11px 14px;border-bottom:0.5px solid color-mix(in srgb, var(--text-primary) 8%, transparent);color:var(--text);text-align:right;vertical-align:middle}
.reports-table td:first-child{text-align:left;font-weight:600}
.reports-table tr:last-child td{border-bottom:none}
/* Rounded spring row-hover (DESIGN.md: rounded hovers, never hard corners). The whole
   row lifts + blooms on a spring curve; the leading/trailing cells carry the radius so
   the tinted bloom reads rounded, not a hard rectangle. Press scales back down. */
.reports-table tbody tr{transition:transform var(--motion-fast,.15s) var(--ease-spring,ease)}
.reports-table tbody tr td{transition:background var(--motion-fast,.15s) var(--ease-out),box-shadow var(--motion-fast,.15s)}
.reports-table tbody tr:hover{transform:translateY(-1px)}
.reports-table tbody tr:hover td{background:color-mix(in srgb,var(--app-accent) 7%,var(--surface-2));box-shadow:0 6px 18px -10px color-mix(in srgb,var(--app-accent) 40%,rgba(20,30,48,.4))}
.reports-table tbody tr:hover td:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px}
.reports-table tbody tr:hover td:last-child{border-top-right-radius:12px;border-bottom-right-radius:12px}
/* reports-table row press feedback — settle + a slight active scale-in */
.reports-table tbody tr:active{transform:translateY(-1px) scale(.992)}
.reports-table tbody tr:active td{background:color-mix(in srgb,var(--app-accent) 11%,var(--surface-3))}
@media (prefers-reduced-motion:reduce){.reports-table tbody tr,.reports-table tbody tr:hover,.reports-table tbody tr:active{transform:none}.reports-table tbody tr{transition:none}}
.reports-budget-bar-wrap{width:80px;height:6px;background:var(--border);border-radius:var(--radius-xs);display:inline-block;vertical-align:middle}
.reports-budget-bar{height:6px;border-radius:var(--radius-xs);transition:width var(--motion-slow)}
.reports-no-budget{font-size:12px;color:var(--text-muted)}
.reports-variance-pos{color:var(--variance-pos)}
.reports-variance-neg{color:var(--variance-neg)}
.reports-phase-badge{display:inline-block;padding:2px 8px;border-radius:var(--radius-pill);font-size:11px;font-weight:600;text-transform:capitalize}
.rp-bidding{background:var(--rp-bidding-bg);color:var(--rp-bidding-fg)}
.rp-inprog{background:var(--rp-inprog-bg);color:var(--rp-inprog-fg)}
.rp-complete{background:var(--rp-complete-bg);color:var(--rp-complete-fg)}
.rp-invoicing{background:var(--rp-invoicing-bg);color:var(--rp-invoicing-fg)}
.rp-closed{background:var(--rp-closed-bg);color:var(--rp-closed-fg)}
.rp-default{background:var(--rp-closed-bg);color:var(--rp-closed-fg)}
/* ===== Reports · Financial tab Pass-2 (proto 07) — hero KPI band + 4-zone analytics
   panel + leaderboard. Scoped #reportsView. Phase/series color = bar FILL (no edge-strip);
   zone dividers are neutral hairlines. ===== */
#reportsView .rpt-hero{position:relative;border-radius:22px;overflow:hidden;margin-bottom:16px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:1px;background:linear-gradient(135deg,color-mix(in srgb,var(--app-accent) 86%,#000) 0%,var(--app-accent) 52%,color-mix(in srgb,var(--app-accent) 92%,#000) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),var(--shadow-e3)}
#reportsView .rpt-hero::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(120% 80% at 0% 0%,rgba(255,255,255,.18),transparent 55%)}
#reportsView .rh-cell{position:relative;z-index:1;padding:18px 20px;color:var(--on-accent,#fff)}
#reportsView .rh-cell.lead{background:rgba(255,255,255,.06)}
/* Hero cells live inside an overflow:hidden gradient pane — per DESIGN.md they get a
   CONTAINED rounded bg-tint bloom on hover/focus, never a transform/shadow lift. */
#reportsView .rh-cell.metric-door{cursor:pointer;transition:background var(--motion-fast,.15s) var(--ease-out)}
#reportsView .rh-cell.metric-door:hover,#reportsView .rh-cell.metric-door:focus-visible{transform:none;box-shadow:none;background:rgba(255,255,255,.16);outline:none}
#reportsView .rh-cell.metric-door:focus-visible{box-shadow:inset 0 0 0 2px #fff}
#reportsView .rh-cell.metric-door.lead:hover,#reportsView .rh-cell.metric-door.lead:focus-visible{background:rgba(255,255,255,.2)}
#reportsView .rh-cell.metric-door:active{background:rgba(255,255,255,.24)}
#reportsView .rh-lab{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.86}
#reportsView .rh-val{font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums;line-height:1;margin-top:6px}
#reportsView .rh-cell.lead .rh-val{font-size:34px}
#reportsView .rh-val.sm{font-size:25px}
#reportsView .rh-sub{font-size:11.5px;font-weight:700;opacity:.85;margin-top:6px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
#reportsView .rh-delta{font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.18)}
#reportsView .rh-delta.dn{background:rgba(255,69,58,.3)}
@media(max-width:880px){#reportsView .rpt-hero{grid-template-columns:1fr 1fr}#reportsView .rh-cell.lead{grid-column:1/-1}}
@media(max-width:520px){#reportsView .rpt-hero{grid-template-columns:1fr}#reportsView .rh-cell.lead{grid-column:auto}}
/* Financial hero — portfolio-health pulse strip (real EVM/WIP risk verdict) */
#reportsView .rpt-hero-wrap{margin-bottom:16px}
#reportsView .rpt-hero-wrap .rpt-hero{margin-bottom:0;border-top-left-radius:0;border-top-right-radius:0}
#reportsView .rpt-hero-pulse{display:flex;align-items:center;gap:9px;padding:10px 16px;border-radius:14px 14px 0 0;font-size:12.5px;font-weight:700;letter-spacing:-.1px;border:.5px solid transparent;border-bottom:none}
#reportsView .rpt-hero-pulse b{font-weight:900;font-variant-numeric:tabular-nums}
#reportsView .rpt-hero-pulse.warn{background:color-mix(in srgb,var(--color-warning) 16%,var(--card-bg));color:color-mix(in srgb,var(--color-warning) 72%,#000)}
#reportsView .rpt-hero-pulse.ok{background:color-mix(in srgb,var(--color-success) 13%,var(--card-bg));color:var(--color-success)}
#reportsView .rpt-hero-pulse.warn[role=button]{cursor:pointer;transition:background var(--motion-fast) var(--ease-out)}
#reportsView .rpt-hero-pulse.warn:hover{background:color-mix(in srgb,var(--color-warning) 24%,var(--card-bg))}
#reportsView .rpt-hero-pulse.warn:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-warning)}
#reportsView .rhp-ico{width:15px;height:15px;flex:0 0 auto}
#reportsView .rhp-go{margin-left:auto;font-weight:800;opacity:.85;white-space:nowrap}
/* one authored analytics panel, 4 hairline-split zones */
#reportsView .rpt-analytics{background:var(--card-bg);border-radius:18px;box-shadow:var(--bevel-top),var(--shadow-e2);border:.5px solid color-mix(in srgb,var(--app-accent) 4%,rgba(0,0,0,.05));overflow:hidden;margin-bottom:16px}
#reportsView .rpt-zgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--chrome-border,rgba(0,0,0,.08))}
/* pass-3 AUDIT FIX (root cause): the zone is a --card-bg CARD, so its text must read as card text. Setting color here makes all .rz-* children inherit --text-primary instead of the matte's --on-app-bg (near-white) → fixes invisible-on-sepia for the whole zone in ONE rule. */
#reportsView .rpt-zone{background:var(--card-bg);padding:17px 19px;color:var(--text-primary)}
/* phase zone: only 2-3 phases of real data, so fill the panel — bars area grows, callout sits at bottom */
#reportsView .rpt-zone.rz-phase{display:flex;flex-direction:column;gap:11px}
#reportsView .rz-phase .pbar-list{display:flex;flex-direction:column;gap:11px;flex:1;justify-content:center}
#reportsView .rz-phase .rpt-callout{margin-top:auto}
@media(max-width:900px){#reportsView .rpt-zgrid{grid-template-columns:1fr}}
#reportsView .rz-head{display:flex;align-items:baseline;gap:8px;margin-bottom:12px}
#reportsView .rz-title{font-size:14.5px;font-weight:800;letter-spacing:-.01em}
#reportsView .rz-sub{font-size:11.5px;color:var(--text-muted);font-weight:600}
#reportsView .rz-big{font-size:24px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-left:auto}
#reportsView .rz-big.pos{color:var(--color-success)}#reportsView .rz-big.neg{color:var(--color-error)}
/* phase bars (fill = phase color, no edge-strip) */
#reportsView .rpt-pbars{display:flex;flex-direction:column;gap:10px}
#reportsView .pbar-row{display:grid;grid-template-columns:118px 1fr 92px;gap:10px;align-items:center}
#reportsView .pbar-name{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
#reportsView .pbar-dot{width:9px;height:9px;border-radius:999px;flex:0 0 9px;background:var(--bc,var(--app-accent));box-shadow:0 0 0 3px color-mix(in srgb,var(--bc,var(--app-accent)) 22%,transparent)}
#reportsView .pbar-track{height:20px;border-radius:7px;background:var(--surface-2);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}
#reportsView .pbar-fill{height:100%;border-radius:7px;background:linear-gradient(160deg,color-mix(in srgb,var(--bc,var(--app-accent)) 88%,#fff),var(--bc,var(--app-accent)));box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
#reportsView .pbar-val{font-size:12.5px;font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
/* cash-flow SVG */
#reportsView .rpt-cf-svg{width:100%;height:170px;display:block}
#reportsView .cf-legend{display:flex;gap:16px;margin-top:8px;font-size:11px;color:var(--text-muted);font-weight:600}
#reportsView .cf-leg{display:inline-flex;align-items:center;gap:5px}
#reportsView .cf-leg i{width:14px;height:4px;border-radius:2px;display:inline-block}
/* WIP columns */
#reportsView .rpt-cols{display:flex;align-items:flex-end;gap:12px;height:160px;padding-bottom:2px}
#reportsView .rcol{display:flex;flex-direction:column;flex:1;align-items:center;justify-content:flex-end;gap:7px;height:100%;min-width:0}
#reportsView .rcol-amt{font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
#reportsView .rcol-stack{width:100%;max-width:44px;border-radius:8px 8px 4px 4px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),var(--shadow-e1)}
#reportsView .rcol-seg-earn{background:linear-gradient(160deg,color-mix(in srgb,var(--bc,var(--app-accent)) 88%,#fff),var(--bc,var(--app-accent)))}
#reportsView .rcol-seg-rem{background:color-mix(in srgb,var(--bc,var(--app-accent)) 26%,var(--surface-2))}
#reportsView .rcol-lab{font-size:10.5px;font-weight:700;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* AR aging cells */
#reportsView .rpt-age{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:6px}
#reportsView .age-cell{border-radius:12px;padding:12px 13px;background:var(--surface-2);border:.5px solid rgba(0,0,0,.04)}
#reportsView .age-cell.hot{background:var(--color-error-bg);border-color:transparent}
#reportsView .age-lab{font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
#reportsView .age-cell.hot .age-lab{color:var(--color-error)}
#reportsView .age-val{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:3px}
#reportsView .age-cell.hot .age-val{color:var(--color-error)}
#reportsView .age-n{font-size:10.5px;color:var(--text-muted);font-weight:600;margin-top:2px}
/* plain-language callouts */
#reportsView .rpt-callout{display:flex;gap:9px;align-items:flex-start;margin-top:13px;padding:10px 12px;border-radius:11px;background:color-mix(in srgb,var(--app-accent) 5%,var(--card-bg));font-size:11.5px;font-weight:600;color:var(--text-secondary);line-height:1.45}
#reportsView .rpt-callout.warn{background:var(--color-warning-bg,color-mix(in srgb,var(--color-warning) 10%,var(--card-bg)))}
#reportsView .rpt-callout .co-ico{font-size:14px;flex:0 0 auto;line-height:1.2}
/* "Manage collections in Accounting →" — points this AR summary at the canonical
   collections home (the Accounting hub). Subtle rounded text-button, no hard corners. */
#reportsView .rpt-zone-foot{margin-top:12px;display:flex;justify-content:flex-end}
#reportsView .rpt-zone-link{appearance:none;border:.5px solid var(--chrome-border);background:var(--surface-2);color:var(--app-accent);font-family:inherit;font-size:11.5px;font-weight:700;letter-spacing:-.1px;padding:6px 13px;border-radius:999px;cursor:pointer;transition:background var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast) var(--ease-spring,ease-out)}
#reportsView .rpt-zone-link:hover{background:color-mix(in srgb,var(--app-accent) 9%,var(--surface-2));box-shadow:var(--shadow-e1)}
#reportsView .rpt-zone-link:active{transform:scale(.97)}
#reportsView .rpt-zone-link:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 26%,transparent)}
/* leaderboard */
#reportsView .rpt-lead{background:var(--card-bg);border-radius:18px;box-shadow:var(--bevel-top),var(--shadow-e2);border:.5px solid color-mix(in srgb,var(--app-accent) 4%,rgba(0,0,0,.05));overflow:hidden;margin-bottom:16px}
#reportsView .rpt-lead-head{padding:15px 18px 12px;border-bottom:.5px solid var(--chrome-border,rgba(0,0,0,.08));display:flex;align-items:baseline;gap:8px}
#reportsView .rpt-lead-head h3{font-size:15px;font-weight:800;margin:0;letter-spacing:-.01em}
#reportsView .var-door{font-size:12px;font-weight:800;padding:3px 9px;border-radius:999px;font-variant-numeric:tabular-nums;display:inline-block}
#reportsView .var-pos{background:color-mix(in srgb,var(--color-success) 14%,transparent);color:color-mix(in srgb,var(--color-success) 80%,var(--text-primary))}
#reportsView .var-neg{background:color-mix(in srgb,var(--color-error) 14%,transparent);color:color-mix(in srgb,var(--color-error) 80%,var(--text-primary))}
#reportsView .chip-phase{font-size:10px;font-weight:800;padding:2px 8px;border-radius:999px;color:#fff;white-space:nowrap}
/* IA — financial deep dive: a raised V133 panel with an INNER TAB STRIP (was a collapse
   fold / dropdown). Title bar + .seg tabs + one visible panel. Chrome from .rt-panel-solid. */
#reportsView .rpt-deepdive{margin-top:16px;padding:16px 20px 20px;overflow:hidden}
#reportsView .rpt-dd-titlebar{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
#reportsView .rpt-dd-title{font-size:15px;font-weight:800;letter-spacing:-.2px}
#reportsView .rpt-dd-sub{font-size:12px;font-weight:500;color:var(--text-secondary);line-height:1.35}
#reportsView .rpt-dd-strip{display:flex;margin-bottom:14px;overflow-x:auto;scrollbar-width:none}
#reportsView .rpt-dd-strip::-webkit-scrollbar{display:none}
#reportsView .rpt-dd-seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--surface-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 0 .5px var(--chrome-border);flex-wrap:nowrap}
#reportsView .rpt-dd-seg button{border:0;background:transparent;color:var(--text-secondary);font:inherit;font-size:12.5px;font-weight:700;padding:7px 16px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:background var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast)}
#reportsView .rpt-dd-seg button.on{background:var(--card-bg);color:var(--text-primary);box-shadow:var(--shadow-e1)}
#reportsView .rpt-dd-seg button:not(.on):hover{color:var(--text-primary)}
#reportsView .rpt-ddpanel{display:flex;flex-direction:column;gap:16px}
/* pass-3 (_STANDARD.md C/A): segmented control = frosted GLASS chrome floating on the matte (was a flat text-8% tint), matches .fi-seg. */
/* G3-P1 — page header row: tab bar + Guide pill aligned to the row's end. */
/* P11 — Accounting hub sub-nav. Its OWN class (not .rpt-tab — see _acctHubNavHtml) so it can't
   collide with the report-tab dispatch. Apple-system segmented-control look. */
.acct-hub-nav{margin-bottom:14px}
/* IA — Accounting sub-tab strip (Receivables/Costs/Retainage); .seg pill style, scoped */
#acctHomeView .acct-subtabs{display:flex;margin:18px 0 14px;padding:0 2px}
#acctHomeView .acct-subseg{display:inline-flex;padding:3px;border-radius:999px;background:var(--surface-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 0 .5px var(--chrome-border)}
#acctHomeView .acct-subseg button{border:0;background:transparent;color:var(--text-secondary);font:inherit;font-size:13px;font-weight:700;padding:7px 18px;border-radius:999px;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast)}
#acctHomeView .acct-subseg button.on{background:var(--card-bg);color:var(--text-primary);box-shadow:var(--shadow-e1)}
#acctHomeView .acct-subseg button:not(.on):hover{color:var(--text-primary)}
.acct-hub-tabs{display:inline-flex;background:var(--surface-2);border-radius:var(--radius-pill,999px);padding:3px;gap:2px}
.acct-hub-tab{border:0;background:transparent;color:var(--text-secondary);font:inherit;font-size:12.5px;font-weight:700;padding:6px 16px;border-radius:var(--radius-pill,999px);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
.acct-hub-tab:hover{color:var(--text-primary)}
.acct-hub-tab.acct-hub-tab-active{background:var(--card-bg);color:var(--text-primary);box-shadow:var(--shadow-e1)}
/* G4-W2 📘 — cost-code reconciliation viewer. Pills signal action/state via FILL (never an edge
   strip); inputs match the Apple-system field look; rounded throughout. */
.ccr-pill{display:inline-flex;align-items:center;font-size:10.5px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;padding:2px 8px;border-radius:999px;vertical-align:1px}
.ccr-pill-ok{background:color-mix(in srgb,var(--color-success,#34c759) 16%,transparent);color:var(--color-success,#1f9d4d)}
.ccr-pill-info{background:color-mix(in srgb,var(--focus,#0a84ff) 15%,transparent);color:var(--focus,#0a6fd6)}
.ccr-pill-warn{background:color-mix(in srgb,var(--color-warn,#ff9f0a) 18%,transparent);color:var(--color-warn,#c77700)}
.ccr-pill-muted{background:color-mix(in srgb,var(--text-primary) 9%,transparent);color:var(--text-secondary)}
.ccr-input{width:100%;box-sizing:border-box;font:inherit;font-size:13px;padding:9px 12px;border-radius:var(--radius-md,12px);background:var(--surface-2);color:var(--text-primary);border:.5px solid var(--chrome-border);transition:box-shadow var(--motion-fast),background var(--motion-fast)}
.ccr-input:focus{outline:0;background:var(--card-bg);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus,#0a84ff) 28%,transparent)}
.rpt-tabrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.rpt-tabrow-end{margin-left:auto;display:inline-flex;align-items:center;gap:8px;flex-shrink:0}
.rpt-tabs-wrap{display:inline-flex;gap:3px;background:var(--frost-bg);backdrop-filter:var(--frost-blur);-webkit-backdrop-filter:var(--frost-blur);border-radius:var(--radius-pill,999px);padding:4px;box-shadow:var(--shadow-e2),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.05);border:0.5px solid color-mix(in srgb,var(--on-app-bg) 12%,transparent)}
@media (prefers-reduced-transparency: reduce){.rpt-tabs-wrap{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
/* iPad-band (641-1024px): the 7-tab segmented strip overflows the content width and clips under .reports-page overflow-x:hidden — the existing <=640 scroll fires too late and the <=1024 rule targeted the wrong class (.rpt-tabs, not .rpt-tabs-wrap). Mirror the <=640 horizontal-scroll treatment here. (B11) */
@media (min-width:641px) and (max-width:1024px){#reportsView .rpt-tabs-wrap{display:inline-flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;max-width:100%}#reportsView .rpt-tabs-wrap::-webkit-scrollbar{display:none}#reportsView .rpt-tab{flex:0 0 auto;white-space:nowrap}}
/* V39hhhh — rpt-tab: Apple segmented-control press feedback */
/* pass-3: pill tabs to match the glass wrap; active = accent (matches .fi-seg-btn.active). */
.rpt-tab{background:transparent;border:none;border-radius:var(--radius-pill,999px);padding:7px 15px;font-size:12.5px;font-weight:600;color:color-mix(in srgb,var(--on-app-bg) 64%,transparent);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast),box-shadow var(--motion-base) var(--ease-spring);font-family:inherit;letter-spacing:-.1px}
.rpt-tab:hover:not(.rpt-tab-active){color:var(--on-app-bg);background:color-mix(in srgb,var(--on-app-bg) 7%,transparent)}
.rpt-tab:active:not(.rpt-tab-active){transform:scale(.96)}
.rpt-tab-active{color:var(--on-accent);background:var(--app-accent);box-shadow:0 2px 8px color-mix(in srgb,var(--app-accent) 38%,transparent),inset 0 1px 0 rgba(255,255,255,.28)} /* Reports tab — accent segmented control */
/* ── Reports (R1+R2) — filter selects + sections + charts ── */
.rpt-filter-select{height:34px;padding:0 26px 0 10px;border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);background-color:var(--card-bg);color:var(--text-primary);font-size:13px;font-weight:500;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238e8e93'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;font-family:inherit;letter-spacing:-.05px;min-width:140px;outline:none;transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
.rpt-filter-select:focus-visible{outline:none;border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--app-accent) 22%, transparent)}
.rpt-filter-select:focus{border-color:var(--chrome-border);box-shadow:none;outline:none;border-radius:var(--radius-md);-webkit-appearance:none;appearance:none}
/* pass-3 (_STANDARD.md A.4): section = solid raised card (depth via ELEVATION, was --surface-grad tint). */
/* ── Custom Report Builder (2026-06-10) ── guided builder + live preview. Tokens-only. */
.rb-wrap{display:grid;grid-template-columns:340px 1fr;gap:16px;align-items:start}
@media (max-width:980px){.rb-wrap{grid-template-columns:1fr}}
.rb-builder{padding:18px 18px 20px;position:sticky;top:8px}
@media (max-width:980px){.rb-builder{position:static}}
.rb-b-head{margin-bottom:16px}
.rb-b-title{font-size:16px;font-weight:800;letter-spacing:-.3px;color:var(--text-primary)}
.rb-b-sub{font-size:12px;color:var(--text-secondary);margin-top:2px}
.rb-section{margin-bottom:16px}
.rb-section:last-child{margin-bottom:0}
.rb-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);margin-bottom:8px}
.rb-hint{font-weight:500;text-transform:none;letter-spacing:0;color:var(--text-muted);margin-left:4px}
.rb-entity-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.rb-entity{display:flex;align-items:center;gap:8px;padding:10px 11px;border-radius:11px;border:.5px solid var(--chrome-border);background:var(--surface-2);color:var(--text-primary);font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;text-align:left;transition:background var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.rb-entity:hover{background:color-mix(in srgb,var(--app-accent) 8%,var(--surface-2))}
.rb-entity:active{transform:scale(.97)}
.rb-entity.on{background:color-mix(in srgb,var(--app-accent) 15%,var(--surface));border-color:color-mix(in srgb,var(--app-accent) 40%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 16%,transparent)}
.rb-entity-ico{width:15px;height:15px;flex-shrink:0;color:var(--app-accent);fill:none;stroke:currentColor}
.rb-entity.on .rb-entity-ico{color:var(--app-accent)}
@media (prefers-reduced-motion:reduce){.rb-entity{transition:none}.rb-entity:active{transform:none}}
.rb-chips{display:flex;flex-wrap:wrap;gap:6px}
.rb-chip{padding:6px 11px;border-radius:999px;border:.5px solid var(--chrome-border);background:var(--surface-2);color:var(--text-secondary);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
.rb-chip:hover{background:var(--surface-3,color-mix(in srgb,var(--text-primary) 5%,var(--surface-2)))}
.rb-chip.on{background:color-mix(in srgb,var(--app-accent) 14%,var(--card-bg));color:var(--app-accent);border-color:transparent}
.rb-filter{display:flex;align-items:center;gap:6px;margin-bottom:7px}
.rb-select{appearance:none;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--text-primary);background:var(--surface-2);border:.5px solid var(--chrome-border);border-radius:9px;padding:7px 10px;cursor:pointer;min-width:0;transition:box-shadow var(--motion-fast),border-color var(--motion-fast)}
select.rb-select{padding-right:26px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'><path fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/></svg>");background-repeat:no-repeat;background-position:right 8px center}
.rb-select:focus{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 22%,transparent);border-color:var(--app-accent)}
.rb-fl-field{flex:1.4;min-width:0}.rb-fl-op{flex:1;min-width:0}.rb-fl-val{flex:1;min-width:0}
.rb-fl-rm{flex-shrink:0;width:30px;height:30px;border-radius:8px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--motion-fast),color var(--motion-fast)}
.rb-fl-rm:hover{background:color-mix(in srgb,var(--color-error) 12%,transparent);color:var(--color-error)}
.rb-fl-rm svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6}
.rb-add{appearance:none;border:none;background:transparent;color:var(--app-accent);font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;padding:4px 0;margin-top:2px}
.rb-add:hover{text-decoration:underline}
.rb-row{display:flex;gap:10px;flex-wrap:wrap}
.rb-field{display:flex;flex-direction:column;gap:0;flex:1;min-width:0}
.rb-field .rb-select{width:100%}
.rb-field-sm{flex:0 0 auto;max-width:120px}
#rbAggField{flex-direction:row;align-items:flex-end;gap:6px}
#rbAggField .rb-select{flex:1}
/* preview */
.rb-preview{min-width:0}
.rb-p-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.rb-p-title{font-size:17px;font-weight:800;letter-spacing:-.3px;color:var(--text-primary)}
.rb-p-sub{font-size:12.5px;color:var(--text-secondary);margin-top:2px}
.rb-p-actions{display:inline-flex;gap:7px;flex-shrink:0}
.rb-act{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:.5px solid var(--chrome-border);background:var(--card-bg);color:var(--text-primary);font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;box-shadow:var(--shadow-e1);transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.rb-act:hover{background:color-mix(in srgb,var(--app-accent) 9%,var(--card-bg))}
.rb-act:active{transform:scale(.96)}
.rb-act svg{width:13px;height:13px;fill:none;stroke:currentColor;color:var(--app-accent)}
@media (prefers-reduced-motion:reduce){.rb-act{transition:none}.rb-act:active{transform:none}}
.rb-result{background:var(--card-bg);border:.5px solid var(--chrome-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-e2);overflow:hidden;min-height:200px}
.rb-loading{padding:18px}
.rb-empty{padding:56px 24px;text-align:center;color:var(--text-muted)}
.rb-empty svg{width:32px;height:32px;opacity:.4;fill:none;stroke:currentColor;stroke-width:1.5;margin-bottom:10px}
.rb-empty>div{font-size:14px;font-weight:600;color:var(--text-secondary)}
.rb-empty-sub{font-size:12.5px;color:var(--text-muted);margin-top:5px;font-weight:400}
.rb-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rb-table{width:100%;border-collapse:collapse;font-size:13px}
.rb-table th{text-align:left;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);padding:11px 14px;border-bottom:.5px solid var(--chrome-border);white-space:nowrap;position:sticky;top:0;background:var(--card-bg)}
.rb-table td{padding:10px 14px;border-bottom:.5px solid color-mix(in srgb,var(--chrome-border) 50%,transparent);color:var(--text-primary)}
.rb-table tbody tr:last-child td{border-bottom:0}
.rb-table tbody tr:hover{background:color-mix(in srgb,var(--app-accent) 4%,transparent)}
.rb-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rb-table .rb-tot td{font-weight:800;border-top:1.5px solid var(--chrome-border);background:color-mix(in srgb,var(--text-primary) 3%,transparent)}
.rb-muted{color:var(--text-muted)}
/* saved-report library */
.rb-saved{margin-top:16px;background:var(--card-bg);border:.5px solid var(--chrome-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-e1);padding:14px 16px}
.rb-saved-head{font-size:13px;font-weight:800;letter-spacing:-.2px;color:var(--text-primary);margin-bottom:10px}
.rb-saved-row{display:flex;align-items:center;gap:6px;padding:4px 0}
.rb-saved-row.on .rb-saved-load{color:var(--app-accent)}
.rb-saved-load{flex:1;min-width:0;display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;border:none;background:transparent;color:var(--text-primary);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;text-align:left;transition:background var(--motion-fast)}
.rb-saved-load:hover{background:color-mix(in srgb,var(--app-accent) 7%,transparent)}
.rb-saved-load svg{width:14px;height:14px;flex-shrink:0;color:var(--app-accent);fill:none;stroke:currentColor}
.rb-saved-load span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rb-saved-meta{margin-left:auto;font-size:11px;font-weight:600;color:var(--text-muted);flex-shrink:0}
.rb-saved-dup,.rb-saved-del{flex-shrink:0;width:28px;height:28px;border-radius:7px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--motion-fast),color var(--motion-fast)}
.rb-saved-dup:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--app-accent)}
.rb-saved-del:hover{background:color-mix(in srgb,var(--color-error) 12%,transparent);color:var(--color-error)}
.rb-saved-dup svg,.rb-saved-del svg{width:13px;height:13px;fill:none;stroke:currentColor}

/* Wave B — Change-Order Impact report: hero exposure tiles + drill-through tables. */
.rpt-co-hero{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:12px;margin-bottom:16px}
@media (max-width:640px){.rpt-co-hero{grid-template-columns:1fr}}
.rco-tile{background:var(--card-bg);border:.5px solid var(--chrome-border);border-radius:var(--radius-lg);padding:16px 18px;box-shadow:var(--shadow-e2)}
.rco-tile.rco-hero{background:linear-gradient(135deg,color-mix(in srgb,var(--color-warning,#d98a00) 14%,var(--card-bg)),var(--card-bg))}
.rco-v{font-size:26px;font-weight:800;letter-spacing:-.6px;color:var(--text-primary);font-variant-numeric:tabular-nums}
.rco-l{font-size:12px;font-weight:600;color:var(--text-secondary);margin-top:2px}
.rco-sub{font-size:11.5px;color:var(--text-muted);margin-top:4px}
.rpt-co-table{width:100%;border-collapse:collapse;font-size:13px}
.rpt-co-table th{text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);padding:6px 10px;border-bottom:.5px solid var(--chrome-border)}
.rpt-co-table td{padding:9px 10px;border-bottom:.5px solid color-mix(in srgb,var(--chrome-border) 55%,transparent);color:var(--text-primary)}
.rpt-co-table tbody tr{cursor:pointer;transition:background var(--motion-fast)}
.rpt-co-table tbody tr:hover{background:color-mix(in srgb,var(--app-accent) 6%,transparent)}
.rpt-co-table tbody tr:last-child td{border-bottom:0}
.rpt-co-table .rco-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rco-src{font-size:11px;color:var(--text-muted);font-weight:600}
/* CO exposure command band (enh4) */
.rco-cmd{display:flex;gap:24px;flex-wrap:wrap;align-items:center;background:linear-gradient(135deg,color-mix(in srgb,var(--color-warning) 12%,var(--card-bg)),var(--card-bg));border:.5px solid color-mix(in srgb,var(--color-warning) 28%,var(--chrome-border));border-radius:var(--radius-lg);padding:20px 24px;margin-bottom:16px;box-shadow:var(--bevel-top),var(--shadow-e2)}
.rco-cmd-risk{background:linear-gradient(135deg,color-mix(in srgb,var(--color-error) 12%,var(--card-bg)),var(--card-bg));border-color:color-mix(in srgb,var(--color-error) 30%,var(--chrome-border))}
.rco-cmd-ok{background:linear-gradient(135deg,color-mix(in srgb,var(--app-accent) 8%,var(--card-bg)),var(--card-bg));border-color:color-mix(in srgb,var(--app-accent) 20%,var(--chrome-border))}
.rco-cmd-lead{min-width:220px}
.rco-cmd-eyebrow{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary)}
.rco-cmd-eyebrow svg{width:13px;height:13px}
.rco-cmd-big{font-size:38px;font-weight:800;letter-spacing:-1.2px;color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1.05;margin-top:4px}
.rco-cmd-sub{font-size:12.5px;color:var(--text-muted);margin-top:4px;max-width:280px}
.rco-cmd-grid{display:flex;gap:30px;margin-left:auto;flex-wrap:wrap}
.rco-cmd-mv{font-size:24px;font-weight:800;letter-spacing:-.6px;color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1}
.rco-cmd-age{color:var(--color-warning)}
.rco-cmd-risk .rco-cmd-age{color:var(--color-error)}
.rco-cmd-ml{font-size:11px;font-weight:600;color:var(--text-secondary);margin-top:5px}
@media (max-width:640px){.rco-cmd{padding:16px;gap:14px}.rco-cmd-big{font-size:30px}.rco-cmd-grid{gap:18px;margin-left:0;width:100%}.rco-cmd-mv{font-size:20px}}
/* CO table severity meter + age pills + rounded hover (enh5) */
.rco-meter{position:relative;display:inline-block;padding:2px 8px;border-radius:var(--radius-pill);font-variant-numeric:tabular-nums;z-index:0}
.rco-meter::before{content:"";position:absolute;inset:0;right:auto;width:var(--fill);background:color-mix(in srgb,var(--color-warning) 22%,transparent);border-radius:var(--radius-pill);z-index:-1}
.rco-agepill{display:inline-block;padding:1px 8px;border-radius:var(--radius-pill);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-secondary);background:color-mix(in srgb,var(--text-primary) 6%,transparent)}
.rco-agepill.warm{color:var(--color-warning);background:color-mix(in srgb,var(--color-warning) 14%,transparent)}
.rco-agepill.hot{color:var(--color-error);background:color-mix(in srgb,var(--color-error) 14%,transparent)}
/* Rounded hover ring lives on the CELLS (collapsed-table <tr> ignores border-radius) */
.rpt-co-table tbody tr td{transition:background var(--motion-fast),box-shadow var(--motion-fast)}
.rpt-co-table tbody tr:hover td{background:color-mix(in srgb,var(--app-accent) 7%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--app-accent) 14%,transparent),inset 0 -1px 0 color-mix(in srgb,var(--app-accent) 14%,transparent)}
.rpt-co-table tbody tr:hover td:first-child{box-shadow:inset 1px 0 0 color-mix(in srgb,var(--app-accent) 14%,transparent),inset 0 1px 0 color-mix(in srgb,var(--app-accent) 14%,transparent),inset 0 -1px 0 color-mix(in srgb,var(--app-accent) 14%,transparent);border-top-left-radius:var(--radius-md);border-bottom-left-radius:var(--radius-md)}
.rpt-co-table tbody tr:hover td:last-child{box-shadow:inset -1px 0 0 color-mix(in srgb,var(--app-accent) 14%,transparent),inset 0 1px 0 color-mix(in srgb,var(--app-accent) 14%,transparent),inset 0 -1px 0 color-mix(in srgb,var(--app-accent) 14%,transparent);border-top-right-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md)}
.rpt-section{background:var(--card-bg);border:.5px solid var(--chrome-border);border-radius:var(--radius-lg);padding:16px 18px;margin-bottom:14px;box-shadow:var(--shadow-e2)}
.rpt-section-title{font-size:15px;font-weight:700;letter-spacing:-.25px;color:var(--text-primary);margin:0 0 14px;display:flex;align-items:baseline;justify-content:flex-start;gap:8px}
.rpt-section-title .rpt-sub{font-size:11.5px;font-weight:500;color:var(--text-muted);letter-spacing:0;margin-right:auto}
.rpt-section-title .rpt-export-btn{margin-left:auto}
/* Ship 1 (2026-05-15 cont. 19 bundle-2) — per-section CSV export buttons */
.rpt-export-btn{background:transparent;border:0.5px solid var(--chrome-border);color:var(--text-muted);font-size:11px;font-weight:600;padding:3px 8px;border-radius:var(--radius-sm);cursor:pointer;display:inline-flex;align-items:center;letter-spacing:-.05px;font-family:inherit;margin-left:auto;transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast)}
.rpt-export-btn:hover{background:var(--chrome-bg-hover);color:var(--text-primary);border-color:var(--chrome-border-strong)}
.rpt-export-btn:active{transform:scale(.96);transition:transform var(--motion-fast) var(--ease-out)}
/* Ship 5 (2026-05-15 cont. 19 bundle-2) — Daily log "Copy from" menu */
.dl-copy-menu{position:absolute;top:calc(100% + 4px);right:0;background:var(--lg-bg-strong);backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract);color:var(--text-primary);border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);box-shadow:var(--lg-edge),var(--shadow-e4);min-width:220px;max-width:300px;padding:4px;z-index:var(--z-top)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.dl-copy-menu{background:var(--card-bg)}}
@media (prefers-reduced-transparency:reduce){.dl-copy-menu{background:var(--card-bg);backdrop-filter:none;-webkit-backdrop-filter:none}}
.dl-copy-row{display:block;width:100%;text-align:left;background:transparent;border:none;padding:8px 10px;cursor:pointer;border-radius:var(--radius-sm);font-family:inherit;color:var(--text-primary)}
.dl-copy-row:hover{background:var(--chrome-bg-hover)}
.dl-copy-label{font-size:13px;font-weight:600;letter-spacing:-.1px}
.dl-copy-sub{font-size:11px;color:var(--text-muted);margin-top:2px}
/* V44 — Today's-log status banner above the Daily Log form. */
/* pass-3 Field Log mode toggle (Daily | Labor) */
.fieldlog-modebar{display:flex;gap:6px;margin-bottom:14px;padding:4px;border-radius:999px;background:var(--surface-2);width:fit-content;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.05)}
.fieldlog-mode{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--text-secondary);font-size:12.5px;font-weight:700;cursor:pointer;transition:background var(--motion-fast,.15s),color var(--motion-fast,.15s)}
.fieldlog-mode svg{width:15px;height:15px}
.fieldlog-mode:hover{color:var(--text-primary)}
.fieldlog-mode.is-active{background:var(--card-bg,#fff);color:var(--text-primary);box-shadow:var(--shadow-e1)}
.dl-today-banner{margin-bottom:10px;padding:10px 14px;border-radius:var(--radius-md);font-size:13px;display:flex;align-items:center;gap:10px;border:0.5px solid transparent;font-family:inherit}
/* V149 — Project Pulse: connected command strip on the full-page Overview */
.pfv-pulse{margin:2px 0 14px;padding:11px 14px;border-radius:var(--radius-lg);background:var(--surface-grad);border:none;box-shadow:var(--bevel-top),var(--shadow-e2)}
.pfv-pulse-label{font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text-muted);margin-bottom:9px}
.pfv-pulse-chips{display:flex;flex-wrap:wrap;gap:8px}
.pfv-pulse-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:var(--radius-pill);border:0.5px solid transparent;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:transform var(--motion-fast) var(--ease-out),filter var(--motion-fast) var(--ease-out)}
.pfv-pulse-chip svg{width:13px;height:13px}
.pfv-pulse-chip:hover{transform:translateY(-1px)}
.pfv-pulse-chip:active{transform:scale(.97)}
.pfv-pulse-chip.pulse-good{background:color-mix(in srgb,var(--color-success) 12%,transparent);color:color-mix(in srgb,var(--color-success) 74%,var(--text-primary));border-color:color-mix(in srgb,var(--color-success) 26%,transparent)}
.pfv-pulse-chip.pulse-warn{background:color-mix(in srgb,var(--color-warning) 13%,transparent);color:color-mix(in srgb,var(--color-warning) 82%,var(--text-primary));border-color:color-mix(in srgb,var(--color-warning) 28%,transparent)}
.pfv-pulse-chip.pulse-bad{background:color-mix(in srgb,var(--color-error) 12%,transparent);color:color-mix(in srgb,var(--color-error) 76%,var(--text-primary));border-color:color-mix(in srgb,var(--color-error) 26%,transparent)}
.pfv-pulse-chip.pulse-neutral{background:color-mix(in srgb,var(--text-primary) 7%,transparent);color:var(--text-primary);border-color:color-mix(in srgb,var(--text-primary) 12%,transparent)}
/* V142 — Daily Logs deep analytics panel (full-page only) */
.dl-deep{margin-bottom:14px}
.dl-deep-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px}
@media (max-width:900px){.dl-deep-grid{grid-template-columns:1fr}}
.dl-deep-card{background:color-mix(in srgb,var(--text-primary) 3.5%,transparent);border:0.5px solid var(--chrome-border);border-radius:var(--radius-group);padding:11px 13px}
.dl-deep-title{font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text-muted);margin-bottom:9px}
.dl-deep-stat{display:flex;align-items:baseline;gap:7px;padding:3px 0}
.dl-deep-stat-val{font-size:17px;font-weight:800;color:var(--text-primary);letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.dl-deep-stat-lbl{font-size:11.5px;color:var(--text-muted)}
.dl-deep-wx{display:flex;justify-content:space-between;font-size:12.5px;padding:3px 0;color:var(--text-primary)}
.dl-deep-wx-n{color:var(--text-muted);font-variant-numeric:tabular-nums}
/* V126 — daily-log cadence strip (last 14 days + streak) */
.dl-cadence{align-items:center;gap:10px;margin-bottom:12px;padding:2px 2px 10px;flex-wrap:wrap}
.dl-cad-label{font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text-muted)}
.dl-cad-track{display:inline-flex;gap:3px}
.dl-cad-cell{width:13px;height:13px;border-radius:3px;background:color-mix(in srgb,var(--text-primary) 9%,transparent)}
.dl-cad-cell.on{background:var(--color-success);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.dl-cad-streak{font-size:12px;font-weight:700;color:var(--color-success);margin-left:auto}
.dl-cad-gap{font-size:12px;font-weight:600;color:var(--color-warning);margin-left:auto}
.dl-today-banner.dl-banner-missing{background:color-mix(in srgb, var(--warn) 14%, transparent);border-color:color-mix(in srgb, var(--warn) 30%, transparent);color:var(--text-primary)}
.dl-today-banner.dl-banner-done{background:color-mix(in srgb, var(--ok) 12%, transparent);border-color:color-mix(in srgb, var(--ok) 25%, transparent);color:var(--text-primary)}
.dl-today-banner-spacer{flex:1}
.dl-today-banner .dl-banner-cta{font-size:12.5px;font-weight:600;padding:6px 14px}
/* V41 — Voice dictation mic button. Recording state pulses a red dot + glow. */
.dl-mic-btn{cursor:pointer;transition:color var(--motion-fast),background var(--motion-fast),transform var(--motion-fast)}
.dl-mic-btn:active{transform:scale(.96)}
.dl-mic-btn.dl-mic-rec{color:var(--app-danger);background:color-mix(in srgb, var(--app-danger) 14%, transparent);animation:dlMicPulse 1.2s ease-in-out infinite;box-shadow:0 0 0 0 color-mix(in srgb, var(--app-danger) 50%, transparent)}
@keyframes dlMicPulse{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--app-danger) 50%, transparent)}
  50%{box-shadow:0 0 0 6px color-mix(in srgb, var(--app-danger) 0%, transparent)}
}
/* Ship 8 (2026-05-15 cont. 19 bundle-2) — Loading skeletons + header refresh pulse */
.rt-skeleton{display:block;background:linear-gradient(90deg,var(--surface-2) 0%,var(--surface-3) 50%,var(--surface-2) 100%);background-size:200% 100%;border-radius:var(--radius-sm);animation:rtSkelPulse 1.4s ease-in-out infinite}
@keyframes rtSkelPulse{0%{background-position:200% 0}100%{background-position:-200% 0}}
.rt-skeleton-row{display:flex;align-items:center;gap:10px;padding:12px 0}
.rt-skeleton-row .rt-skeleton{height:14px;flex:1}
.rt-skeleton-row .rt-skeleton.rt-skel-narrow{flex:0 0 100px}
.rt-skeleton-row .rt-skeleton.rt-skel-circle{flex:0 0 28px;height:28px;border-radius:50%}
.rt-skeleton-card{background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);padding:14px;margin-bottom:10px;display:flex;flex-direction:column;gap:8px}
.rt-skeleton-card .rt-skeleton{height:12px}
.rt-skeleton-card .rt-skel-title{height:16px;width:60%}
/* Header refresh pulse — thin bar across the top during background fetches */
.rt-refresh-bar{position:fixed;top:0;left:0;right:0;height:2px;background:transparent;z-index:var(--z-top);pointer-events:none;overflow:hidden}
.rt-refresh-bar.active::before{content:'';position:absolute;top:0;left:0;height:2px;width:40%;background:var(--app-accent);border-radius:0 2px 2px 0;animation:rtRefreshSlide 1.1s ease-in-out infinite}
@keyframes rtRefreshSlide{0%{left:-40%}100%{left:100%}}
/* pass-2: honor reduced-motion on the infinite loaders (audit) */
@media (prefers-reduced-motion:reduce){.rt-skeleton,.files-skel-thumb{animation:none}.rt-refresh-bar.active::before{animation:none;width:100%;opacity:.5}}
.rpt-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.rpt-tiles-4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.rpt-tile{background:var(--surface-grad);border:none;border-radius:var(--radius-md);padding:11px 13px;text-align:left;box-shadow:var(--bevel-top),var(--shadow-e1);transition:box-shadow var(--motion-base) var(--ease-out),transform var(--motion-fast) var(--ease-spring)}
.rpt-tile:hover{box-shadow:var(--bevel-top),var(--shadow-e2),var(--glow-accent-soft);transform:translateY(-1px)}
.rpt-tile-label{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted)}
.rpt-tile-value{font-size:22px;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums;margin-top:5px;letter-spacing:-.5px;line-height:1.05}
.rpt-tile-sub{font-size:11px;color:var(--text-muted);margin-top:1px}
.rpt-tile.rpt-tile-warn{background:color-mix(in srgb,var(--color-warning) 9%,var(--card-bg))}
.rpt-tile.rpt-tile-alert{background:color-mix(in srgb,var(--color-error) 9%,var(--card-bg))}
.rpt-tile.rpt-tile-ok{background:color-mix(in srgb,var(--color-success) 9%,var(--card-bg))}
/* Portfolio PM-grade command rollup (V85 metric-command) */
.rpt-cmdroll{display:grid;grid-template-columns:1.35fr 2fr;gap:0;background:var(--card-bg);border-radius:18px;box-shadow:var(--bevel-top),var(--shadow-e2);border:.5px solid color-mix(in srgb,var(--app-accent) 4%,rgba(0,0,0,.05));overflow:hidden;margin-bottom:16px}
.rcr-hero{padding:18px 20px;display:flex;flex-direction:column;gap:12px;background:linear-gradient(150deg,color-mix(in srgb,var(--app-accent) 7%,var(--card-bg)),var(--card-bg) 70%);border-right:.5px solid var(--chrome-border,rgba(0,0,0,.08))}
.rcr-lab{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.rcr-val{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--app-accent)}
.rcr-spine{display:flex;flex-direction:column;gap:5px}
.rcr-spine-track{height:8px;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 8%,transparent);overflow:hidden}
.rcr-spine-fill{height:100%;border-radius:999px;transition:width var(--motion-slow,.4s) var(--ease-spring,ease-out)}
.rcr-spine-fill.ok{background:linear-gradient(90deg,color-mix(in srgb,var(--color-success) 70%,var(--app-accent)),var(--color-success))}
.rcr-spine-fill.warn{background:linear-gradient(90deg,color-mix(in srgb,var(--color-warning) 80%,#fff),var(--color-warning))}
.rcr-spine-fill.alert{background:linear-gradient(90deg,color-mix(in srgb,var(--color-error) 80%,#fff),var(--color-error))}
.rcr-spine-meta{display:flex;justify-content:space-between;font-size:11.5px;font-weight:700;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.rcr-spine-pct{color:var(--text-muted)}
.rcr-verdict{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:-.1px}
.rcr-verdict.pos{color:var(--color-success)}.rcr-verdict.neg{color:var(--color-error)}
.rcr-vi{width:14px;height:14px;flex:0 0 auto}
.rcr-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--chrome-border,rgba(0,0,0,.08))}
.rcr-stat{background:var(--card-bg);padding:15px 18px;display:flex;flex-direction:column;gap:3px}
.rcr-s-lab{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
.rcr-s-val{font-size:21px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text-primary);line-height:1.05}
.rcr-stat.is-neg .rcr-s-val{color:var(--color-error)}.rcr-stat.is-pos .rcr-s-val{color:var(--color-success)}
.rcr-stat.is-warn .rcr-s-val{color:color-mix(in srgb,var(--color-warning) 72%,#000)}
.rcr-s-sub{font-size:11px;color:var(--text-muted)}
@media(max-width:860px){.rpt-cmdroll{grid-template-columns:1fr}.rcr-hero{border-right:none;border-bottom:.5px solid var(--chrome-border,rgba(0,0,0,.08))}}
@media(max-width:480px){.rcr-stats{grid-template-columns:1fr}.rcr-val{font-size:28px}}
/* ── MONEY HUB (2026-05-24) — portfolio P&L + cash runway + retainage ──────── */
/* ── Project Controls (EVM) — financial-report section ── */
.evm-section{margin-bottom:4px}
.evm-hero-grid{margin-top:4px}
.evm-pill{display:inline-flex;align-items:center;font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;padding:3px 9px;border-radius:999px;color:var(--evm-c);background:color-mix(in srgb,var(--evm-c) 14%,transparent);border:0.5px solid color-mix(in srgb,var(--evm-c) 30%,transparent);white-space:nowrap}
.evm-muted{color:var(--text-muted)}
.evm-table td.num,.evm-table th.num{font-variant-numeric:tabular-nums;text-align:right}
.evm-cf-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:14px 0}
.evm-cf-tile{position:relative;background:var(--surface-grad);border:0.5px solid color-mix(in srgb,var(--chrome-border) 70%,transparent);border-radius:var(--radius-lg,14px);padding:14px 16px;box-shadow:var(--lg-edge),var(--shadow-e2)}
.evm-cf-lbl{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);margin-bottom:6px}
/* Feature #2 — pending-CO exposure scenario banner (signal via fill + icon, never an edge-strip). */
.evm-pending-scenario{display:flex;align-items:flex-start;gap:10px;margin:4px 0 10px;padding:11px 14px;border-radius:var(--radius-lg,14px);background:color-mix(in srgb,var(--color-warning) 9%,var(--surface-2,var(--card-bg)));border:0.5px solid color-mix(in srgb,var(--color-warning) 26%,transparent);box-shadow:var(--lg-edge),var(--shadow-e1)}
.evm-pending-ico{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:0 0 22px;border-radius:50%;color:var(--color-warning);background:color-mix(in srgb,var(--color-warning) 16%,transparent);margin-top:1px}
.evm-pending-txt{font-size:12.5px;line-height:1.5;color:var(--text-primary)}
.evm-pending-txt .pos{color:var(--color-success)}.evm-pending-txt .neg{color:var(--color-error)}
.evm-cf-val{font-size:24px;font-weight:800;letter-spacing:-.6px;color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1.05}
/* Hero tile — the forecast punchline (VAC) commands. */
.evm-cf-tile.evm-hero{box-shadow:var(--lg-edge),var(--shadow-e3),var(--glow-accent-soft);border-color:color-mix(in srgb,var(--app-accent) 28%,var(--chrome-border))}
.evm-cf-tile.evm-hero .evm-cf-val{font-size:27px}
.evm-cf-chart{margin-top:4px}
.evm-cf-cap{font-size:11.5px;color:var(--text-muted);margin-top:8px}
.evm-cf-val.pos{color:color-mix(in srgb,var(--color-success) 74%,var(--text-primary))}
.evm-cf-val.neg{color:color-mix(in srgb,var(--color-error) 74%,var(--text-primary))}
.evm-hero-grid{grid-template-columns:repeat(4,1fr)}
.evm-table{border-collapse:collapse;margin-top:8px;font-size:13px}
.evm-table th{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:var(--text-muted);text-align:left;padding:6px 10px;border-bottom:0.5px solid color-mix(in srgb,var(--chrome-border) 70%,transparent)}
.evm-table td{padding:7px 10px;border-bottom:0.5px solid color-mix(in srgb,var(--chrome-border) 45%,transparent);color:var(--text-primary)}
.evm-table tbody tr{transition:background var(--motion-fast)}
.evm-table tbody tr:hover{background:color-mix(in srgb,var(--app-accent) 7%,transparent)}
.evm-table td.neg{color:color-mix(in srgb,var(--color-error) 74%,var(--text-primary))}
.evm-table td.pos{color:color-mix(in srgb,var(--color-success) 74%,var(--text-primary))}
/* Performance-index cells — at-a-glance health on CPI/SPI (≥1 ok, .9–1 warn, <.9 bad).
   Scoped under .evm-table td to win the cascade over .evm-table td.num. */
.evm-table td.evm-idx{font-weight:800;font-variant-numeric:tabular-nums}
.evm-table td.evm-idx-pos{color:var(--color-success)}
.evm-table td.evm-idx-warn{color:var(--color-warning)}
.evm-table td.evm-idx-neg{color:var(--color-error)}
@media (max-width:900px){.evm-cf-tiles{grid-template-columns:repeat(2,1fr)}.evm-hero-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.evm-cf-tiles{grid-template-columns:1fr 1fr}.evm-cf-val{font-size:16px}}
.money-hub-head{display:flex;align-items:baseline;gap:10px;margin:2px 0 14px;flex-wrap:wrap}
.money-hub-title{font-size:22px;font-weight:800;letter-spacing:-.7px;color:var(--text-primary);margin:0;line-height:1.05}
.money-hub-sub{font-size:12.5px;color:var(--text-muted);font-weight:500}
.mh-income-table td{padding:6px 10px}
.mh-income-table .mh-inc-amt{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.mh-income-table .mh-inc-head td{padding-top:12px;color:var(--text-secondary);font-size:11px;text-transform:uppercase;letter-spacing:.4px}
.mh-income-table .mh-inc-total td{border-top:0.5px solid color-mix(in srgb,var(--text-primary) 14%,transparent)}
.mh-income-table .mh-inc-gp td{border-top:1.5px solid color-mix(in srgb,var(--text-primary) 20%,transparent);font-size:15px;padding-top:9px}
.mh-income-table .rpt-sub{font-weight:400}
.mh-pnl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
@media(max-width:760px){.mh-pnl-grid{grid-template-columns:repeat(2,1fr)}}
.mh-pnl-tile{background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);padding:14px 16px;box-shadow:var(--shadow-e1);position:relative;overflow:hidden;transition:box-shadow var(--motion-base) var(--ease-out),transform var(--motion-fast) var(--ease-spring)}
.mh-pnl-tile.mh-clickable{cursor:pointer}
.mh-pnl-tile.mh-clickable:hover{box-shadow:var(--shadow-e3);transform:translateY(-2px)}
.mh-pnl-tile.mh-clickable:active{transform:translateY(0) scale(.985)}
.mh-pnl-tile.mh-hero{background:linear-gradient(135deg,color-mix(in srgb,var(--app-accent) 13%,var(--card-bg)),var(--card-bg));border-color:color-mix(in srgb,var(--app-accent) 30%,var(--chrome-border));box-shadow:var(--shadow-e2)}
.mh-pnl-tile.mh-hero::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--app-accent) 50%,transparent),transparent)}
.mh-pnl-lbl{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted)}
.mh-pnl-val{font-size:27px;font-weight:800;color:var(--text-primary);font-variant-numeric:tabular-nums;letter-spacing:-1px;margin-top:6px;line-height:1}
.mh-pnl-val.pos{color:color-mix(in srgb,var(--color-success) 74%,var(--text-primary))}
.mh-pnl-val.neg{color:color-mix(in srgb,var(--color-error) 74%,var(--text-primary))}
.mh-pnl-sub{font-size:11.5px;color:var(--text-muted);margin-top:4px;font-weight:500}
.mh-pnl-sub.pos{color:color-mix(in srgb,var(--color-success) 64%,var(--text-secondary))}
.mh-pnl-sub.warn{color:color-mix(in srgb,var(--color-warning) 70%,var(--text-secondary))}
/* Runway projected-balance chart */
.mh-runway-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.mh-runway-badge{display:inline-flex;align-items:baseline;gap:6px;padding:4px 12px;border-radius:var(--radius-pill);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.mh-runway-badge.ok{background:color-mix(in srgb,var(--color-success) 14%,transparent);color:color-mix(in srgb,var(--color-success) 76%,var(--text-primary))}
.mh-runway-badge.warn{background:color-mix(in srgb,var(--color-warning) 16%,transparent);color:color-mix(in srgb,var(--color-warning) 80%,var(--text-primary))}
.mh-runway-badge.alert{background:color-mix(in srgb,var(--color-error) 14%,transparent);color:color-mix(in srgb,var(--color-error) 78%,var(--text-primary))}
.mh-runway-badge b{font-size:16px;font-weight:800}
.mh-runway-host{width:100%}
.mh-pnl-table{width:100%;border-collapse:collapse;font-size:12.5px}
.mh-pnl-table th{text-align:right;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);padding:6px 10px;border-bottom:0.5px solid var(--chrome-border)}
.mh-pnl-table th:first-child{text-align:left}
.mh-pnl-table td{padding:8px 10px;border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 5%,transparent);text-align:right;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.mh-pnl-table td:first-child{text-align:left;font-weight:600}
.mh-pnl-table tbody tr{cursor:pointer;transition:background var(--motion-fast) var(--ease-out)}
.mh-pnl-table tbody tr:hover{background:color-mix(in srgb,var(--app-accent) 6%,transparent)}
.mh-margin-pill{display:inline-block;padding:2px 9px;border-radius:var(--radius-pill);font-weight:700;font-size:11.5px}
.mh-margin-pill.pos{background:color-mix(in srgb,var(--color-success) 14%,transparent);color:color-mix(in srgb,var(--color-success) 76%,var(--text-primary))}
.mh-margin-pill.neg{background:color-mix(in srgb,var(--color-error) 14%,transparent);color:color-mix(in srgb,var(--color-error) 76%,var(--text-primary))}
/* Stacked bar (revenue forecast) */
.rpt-fbar-row{display:grid;grid-template-columns:64px 1fr 110px;gap:8px;align-items:center;padding:5px 0}
.rpt-fbar-label{font-size:11.5px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.rpt-fbar-track{height:18px;background:var(--surface-2);border-radius:var(--radius-sm);overflow:hidden;display:flex;border:0.5px solid var(--chrome-border)}
.rpt-fbar-seg{height:100%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:var(--on-accent)}
.rpt-fbar-projected{background:var(--app-accent)}
.rpt-fbar-pending{background:var(--warn)}
.rpt-fbar-overdue{background:var(--err)}
.rpt-fbar-total{font-size:11.5px;font-weight:600;color:var(--text-primary);text-align:right;font-variant-numeric:tabular-nums}
/* Horizontal burn-down rows */
.rpt-burn-row{display:grid;grid-template-columns:170px 1fr 70px;gap:8px;align-items:center;padding:5px 0}
.rpt-burn-name{font-size:12px;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.rpt-burn-name:hover{color:var(--app-accent)}
.rpt-burn-track{height:14px;background:var(--surface-2);border-radius:var(--radius-xs);overflow:hidden;border:0.5px solid var(--chrome-border)}
.rpt-burn-bar{height:100%;border-radius:var(--radius-xs);transition:width var(--motion-slow)}
.rpt-burn-bar.ok{background:var(--app-accent)}
.rpt-burn-bar.warn{background:var(--warn)}
.rpt-burn-bar.alert{background:var(--err)}
.rpt-burn-pct{font-size:11.5px;font-weight:600;color:var(--text-muted);text-align:right;font-variant-numeric:tabular-nums}
.rpt-burn-pct.over{color:var(--err)}
/* AR/AP aging tables */
.rpt-aging-table{width:100%;border-collapse:collapse;font-size:12px}
.rpt-aging-table th{text-align:left;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);padding:6px 8px;border-bottom:0.5px solid var(--chrome-border)}
.rpt-aging-table td{padding:6px 8px;border-bottom:0.5px solid var(--chrome-border)}
.rpt-aging-table tr:last-child td{border-bottom:none}
.rpt-aging-table tbody tr:hover{cursor:pointer}.rpt-aging-table tbody tr:hover td{background:var(--chrome-bg-hover)}.rpt-aging-table tbody tr:hover td:first-child{border-top-left-radius:10px;border-bottom-left-radius:10px}.rpt-aging-table tbody tr:hover td:last-child{border-top-right-radius:10px;border-bottom-right-radius:10px}
.rpt-aging-table .num{text-align:right;font-variant-numeric:tabular-nums}
.rpt-aging-pill{display:inline-block;font-size:10px;font-weight:600;padding:2px 7px;border-radius:var(--radius-pill);color:var(--on-accent);font-variant-numeric:tabular-nums}
.rpt-aging-pill-0-30{background:var(--app-accent)}
.rpt-aging-pill-31-60{background:var(--warn)}
.rpt-aging-pill-61-90{background:#ff7700}
.rpt-aging-pill-90{background:var(--err)}
/* A/R Piece 3 — 6-bucket AR pills (additive; -0-30/-90 kept for AP which stays 4-bucket). */
.rpt-aging-pill-current{background:var(--color-success)}
.rpt-aging-pill-1-30{background:color-mix(in srgb,var(--color-success) 65%,var(--warn))}
.rpt-aging-pill-91-120{background:#e8431a}
.rpt-aging-pill-120{background:var(--err)}
/* Portfolio table */
.rpt-portfolio-table{width:100%;border-collapse:collapse;font-size:12.5px}
/* V39uuuu — rpt-portfolio-table th smooth transition */
.rpt-portfolio-table th{text-align:left;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);padding:8px;border-bottom:0.5px solid var(--chrome-border);cursor:pointer;user-select:none;white-space:nowrap;transition:color var(--motion-fast)}
.rpt-portfolio-table th:hover{color:var(--text-primary)}
.rpt-portfolio-table th.sort-asc::after{content:" ↑";font-size:9px;color:var(--app-accent)}
.rpt-portfolio-table th.sort-desc::after{content:" ↓";font-size:9px;color:var(--app-accent)}
.rpt-portfolio-table td{padding:7px 8px;border-bottom:0.5px solid var(--chrome-border)}
.rpt-portfolio-table tbody tr{transition:background var(--motion-fast) var(--ease-out)}
.rpt-portfolio-table tbody tr:hover{background:color-mix(in srgb,var(--app-accent) 5%,var(--card-bg));cursor:pointer}
.rpt-portfolio-table tbody tr:active{background:color-mix(in srgb,var(--app-accent) 9%,var(--card-bg))}
.rpt-portfolio-table .num{text-align:right;font-variant-numeric:tabular-nums}
.rpt-spend-cell{display:inline-flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:88px}
.rpt-spend-amt{font-variant-numeric:tabular-nums}
.rpt-spend-bar{width:72px;height:4px;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 8%,transparent);overflow:hidden}
.rpt-spend-fill{display:block;height:100%;border-radius:999px}
.rpt-spend-fill.ok{background:var(--color-success)}
.rpt-spend-fill.warn{background:var(--color-warning)}
.rpt-spend-fill.over{background:var(--color-error)}
.rpt-health-badge[role=button]{cursor:pointer;transition:transform var(--motion-fast) var(--ease-spring,ease-out),box-shadow var(--motion-fast)}
.rpt-health-badge[role=button]:hover{transform:translateY(-1px);box-shadow:var(--shadow-e1)}
.rpt-health-badge[role=button]:active{transform:scale(.95)}
.rpt-health-badge[role=button]:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 30%,transparent)}
.rpt-portfolio-name{font-weight:600;color:var(--text-primary)}
.rpt-portfolio-name:hover{color:var(--app-accent)}
.rpt-variance-pos{color:var(--err);font-weight:600}
.rpt-variance-neg{color:var(--ok);font-weight:600}
.rpt-health-badge{display:inline-block;font-size:11px;font-weight:600;padding:2px 7px;border-radius:var(--radius-sm);font-variant-numeric:tabular-nums;min-width:30px;text-align:center}
.rpt-health-good{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
.rpt-health-warn{background:color-mix(in srgb,var(--warn) 18%,transparent);color:#cc7a00}
.rpt-health-alert{background:color-mix(in srgb,var(--err) 18%,transparent);color:#cc2914}
/* Schedule report — sparkline */
.rpt-spark{display:inline-block;vertical-align:middle;height:24px}
/* V119 — S-curve / cash-flow chart in the Budget-vs-Actual card */
/* P8 — budget baseline lock + overlay */
.bva-lock-btn{display:inline-flex;align-items:center;gap:4px;border:0.5px solid var(--border);background:var(--surface-2);color:var(--text-secondary);font:inherit;font-size:11px;font-weight:600;padding:3px 9px;border-radius:var(--radius-pill);cursor:pointer;transition:background var(--motion-fast)}
.bva-lock-btn:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent);color:var(--text-primary)}
.bva-baseline-row{margin-top:10px;padding-top:9px;border-top:0.5px solid var(--chrome-border)}
.bva-baseline-head{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--text-secondary)}
.bva-hist-btn{margin-left:auto;border:0;background:transparent;color:var(--app-accent);font:inherit;font-size:11px;font-weight:600;cursor:pointer;padding:0}
.bva-scurve{margin-top:12px;padding-top:10px;border-top:0.5px solid var(--chrome-border)}
.bva-scurve-head{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;font-weight:600;color:var(--text-muted);margin-bottom:4px}
.bva-scurve-legend{display:inline-flex;gap:12px}
.bva-leg{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;color:var(--text-muted)}
.bva-leg-line{width:16px;height:0;border-top-width:2.5px;border-top-style:solid;display:inline-block}
.bva-leg-plan{border-top-style:dashed;border-top-color:color-mix(in srgb,var(--text-primary) 38%,transparent)}
.bva-leg-act{border-top-color:var(--color-success)}
.scurve{display:block;width:100%}
.rpt-otr-num{font-size:32px;font-weight:700;color:var(--text-primary);letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.rpt-otr-sample{font-size:11px;color:var(--text-muted);margin-top:2px}
/* Schedule-Health command header (enh1) */
.rpt-cmd{display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:linear-gradient(135deg,color-mix(in srgb,var(--app-accent) 8%,var(--card-bg)),var(--card-bg));border:.5px solid color-mix(in srgb,var(--app-accent) 20%,var(--chrome-border));border-radius:var(--radius-lg);padding:18px 22px;margin-bottom:14px;box-shadow:var(--bevel-top),var(--shadow-e2)}
.rpt-cmd-watch{background:linear-gradient(135deg,color-mix(in srgb,var(--color-warning) 12%,var(--card-bg)),var(--card-bg));border-color:color-mix(in srgb,var(--color-warning) 30%,var(--chrome-border))}
.rpt-cmd-risk{background:linear-gradient(135deg,color-mix(in srgb,var(--color-error) 12%,var(--card-bg)),var(--card-bg));border-color:color-mix(in srgb,var(--color-error) 30%,var(--chrome-border))}
.rpt-cmd-verdict{display:flex;align-items:center;gap:12px;min-width:200px}
.rpt-cmd-vico{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--color-success) 18%,var(--card-bg));color:var(--color-success);box-shadow:var(--bevel-top)}
.rpt-cmd-watch .rpt-cmd-vico{background:color-mix(in srgb,var(--color-warning) 18%,var(--card-bg));color:var(--color-warning)}
.rpt-cmd-risk .rpt-cmd-vico{background:color-mix(in srgb,var(--color-error) 18%,var(--card-bg));color:var(--color-error)}
.rpt-cmd-vico svg{width:20px;height:20px}
.rpt-cmd-vlabel{font-size:17px;font-weight:800;letter-spacing:-.3px;color:var(--text-primary)}
.rpt-cmd-vsub{font-size:12px;color:var(--text-muted);margin-top:1px}
.rpt-cmd-metrics{display:flex;gap:28px;margin-left:auto;flex-wrap:wrap}
.rpt-cmd-mv{font-size:26px;font-weight:800;letter-spacing:-.8px;color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1}
.rpt-cmd-ml{font-size:11.5px;font-weight:600;color:var(--text-secondary);margin-top:5px;display:flex;align-items:center;gap:5px}
.rpt-cmd-delta{display:inline-flex;align-items:center;gap:2px;font-size:11px;font-weight:700;padding:1px 6px;border-radius:var(--radius-pill);font-variant-numeric:tabular-nums}
.rpt-cmd-delta svg{width:9px;height:9px}
.rpt-cmd-delta.up{color:var(--color-success);background:color-mix(in srgb,var(--color-success) 14%,transparent)}
.rpt-cmd-delta.down{color:var(--color-error);background:color-mix(in srgb,var(--color-error) 14%,transparent)}
.rpt-cmd-flat{font-size:11px;color:var(--text-muted)}
@media (max-width:640px){.rpt-cmd{padding:14px 16px;gap:14px}.rpt-cmd-metrics{gap:18px;margin-left:0;width:100%}.rpt-cmd-mv{font-size:22px}}
/* On-time gauge ring (enh2) */
.rpt-otr-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 0 8px}
.rpt-otr-gauge{position:relative;width:130px;height:130px}
.rpt-otr-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.rpt-otr-cl{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-top:2px}
.rpt-otr-trend{margin-top:8px;text-align:center}
.rpt-otr-trend-l{font-size:10px;color:var(--text-muted);margin-top:2px}
/* Drift-toned duration bars (enh3) */
.rpt-burn-baseline-wrap{position:relative}
.rpt-burn-name-w{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0}
.rpt-burn-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rpt-burn-n{flex:none;font-size:10px;font-weight:600;color:var(--text-muted);font-variant-numeric:tabular-nums;background:color-mix(in srgb,var(--text-primary) 7%,transparent);border-radius:var(--radius-pill);padding:0 6px}
.rpt-burn-pct-hot{color:var(--color-warning);font-weight:700}
.rpt-burn-avg{position:absolute;top:4px;bottom:4px;width:2px;background:repeating-linear-gradient(var(--text-primary) 0 3px,transparent 3px 6px);opacity:.28;pointer-events:none}
@media (max-width:1024px){.rpt-burn-avg{display:none}}
/* Empty state */
.rpt-empty{color:var(--text-muted);padding:24px 0;text-align:center;font-size:13px}
/* Responsive */
@media (max-width: 1024px) {
  .rpt-grid-2{grid-template-columns:1fr}
  .rpt-tiles-4{grid-template-columns:repeat(2,1fr)}
  .rpt-burn-row{grid-template-columns:120px 1fr 60px}
  .rpt-portfolio-table{font-size:11.5px}
  .rpt-portfolio-table th, .rpt-portfolio-table td{padding:5px}
}
/* ── Mobile Reports (Task 2.5) ──
   Phone overhaul for the Reports view. Placed AFTER the unwrapped desktop
   rules (.rpt-tabs-wrap etc.) so source-order resolves ties in mobile's favor
   at ≤640px. */
@media (max-width: 640px) {
  /* Tab bar reflow — mirrors the modal-tab-strip pattern (Task 1.3).
     The existing inline-flex segmented control becomes a horizontal scroll
     strip with snap, edge-fade, and tap-min targets. */
  .rpt-tabs-wrap{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    /* The segmented-control bg makes a clipped pill on phones; flatten the
       border-radius slightly so edge-fade reads cleanly. */
    border-radius:var(--radius-md);
    padding:3px;
    /* G3-P1 — bottom spacing is now owned by the parent .rpt-tabrow (zero here so
       mobile doesn't double-space: .rpt-tabrow margin + this margin stacked). */
    margin:0;
    /* Soft edge-fade so the scroll feels native. */
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);
    max-width:100%;
    width:100%;
    box-sizing:border-box;
  }
  .rpt-tabs-wrap::-webkit-scrollbar{display:none}
  .rpt-tab{
    flex:0 0 auto;
    scroll-snap-align:start;
    min-height:var(--tap-min);
    padding:8px 14px;
    font-size:13px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
  }
  /* Page gutter parity with the rest of the mobile overhaul */
  .reports-page{padding:var(--space-2) var(--mobile-gutter) calc(72px + env(safe-area-inset-bottom,0));max-width:100vw}
  /* Header row: stack title + actions row vertically; let the action cluster
     wrap to full-width buttons. */
  .reports-header{flex-direction:column;align-items:stretch;gap:8px}
  .reports-header > div:last-child{
    display:flex !important;
    flex-wrap:wrap;
    gap:8px;
    width:100%;
  }
  /* Per-tab action buttons (CSV/PDF + filter select/checkbox) — full-width
     tap targets that stack neatly. Two side-by-side buttons fit; three buttons
     wrap to a second row with a stacked filter above. */
  .reports-header .rpt-filter-select{
    flex:1 1 100%;
    min-height:var(--tap-min);
    height:var(--tap-min);
    font-size:14px;
  }
  .reports-header .btn-quiet{
    flex:1 1 calc(50% - 4px);
    min-height:var(--tap-min);
    height:auto;
    padding:8px 14px;
    font-size:14px;
    justify-content:center;
  }
  /* The "Active only" checkbox in Portfolio header — keep its label visible
     and give it room to breathe on its own row. */
  .reports-header label{
    flex:1 1 100%;
    min-height:var(--tap-min);
    font-size:13px;
    color:var(--text-primary);
    align-items:center;
    padding:6px 4px;
  }
  .reports-header label input[type=checkbox]{
    width:20px;height:20px;
    margin-right:4px;
  }
  /* Charts + bars: fit phone width.
     - Stacked revenue forecast bars use a 3-col grid with a 64px label.
       Tighten the label and total columns so the middle track fills. */
  .rpt-fbar-row{grid-template-columns:54px 1fr 80px;gap:6px}
  .rpt-fbar-label{font-size:11px}
  .rpt-fbar-total{font-size:11px}
  /* - Burn-down rows: shrink the label column and let the bar dominate.
     ≤640px overrides the ≤1024px 120/1fr/60 grid because source order. */
  .rpt-burn-row{grid-template-columns:110px 1fr 50px;gap:6px}
  .rpt-burn-name{font-size:12px}
  .rpt-burn-pct{font-size:11px}
  /* SVG sparklines + responsive overdue-trend chart — fit the parent container.
     The inline overdue-trend SVG already has width="100%"; the small sparkline
     (90x24 fixed) on the On-Time tile remains intrinsic and is fine. Belt-and-
     suspenders: cap any SVG inside an .rpt-section at 100% to prevent overflow. */
  .rpt-section svg{max-width:100%;height:auto}
  /* The .rpt-section padding eats screen real estate — tighten on phones. */
  .rpt-section{padding:12px 10px;margin-bottom:10px}
  /* Tile grids — already wrap via the ≤1024 rule; keep tiles tap-friendly. */
  .rpt-tiles-4{grid-template-columns:repeat(2,1fr)}
  /* Portfolio top-tiles strip is forced to 5-cols inline; let it wrap. */
  #rptPortBody .rpt-tiles-4[style*="repeat(5"]{grid-template-columns:repeat(2,1fr) !important}
  /* Tables become stacked cards via .rrt-stack — neutralize the desktop
     reports-table chrome that would otherwise leak through. */
  .reports-table-wrap{
    background:transparent;
    border:none;
    box-shadow:none;
    overflow:visible;     /* override the ≤1024 overflow-x:auto */
    border-radius:0;
  }
  /* Cancel the desktop reports-table min-width so stacked cards don't force
     horizontal page overflow. */
  .reports-table.rrt-stack,
  .rpt-aging-table.rrt-stack,
  .rpt-portfolio-table.rrt-stack{
    min-width:0;
    font-size:13px;
    border-collapse:separate; /* stacked-card spacing reads better than collapse */
  }
  /* Aging tiles + table need a little more breathing room at phone widths. */
  .rpt-aging-table.rrt-stack td{font-size:12.5px;padding:3px 0}
  .rpt-portfolio-table.rrt-stack td{font-size:12.5px;padding:3px 0}
  .reports-table.rrt-stack td{font-size:12.5px;padding:3px 0}
  /* Schedule report — top-overdue list rows already wrap nicely (inline
     flex). Just ensure the inline-styled padding doesn't blow out the
     viewport. */
  #rptSchedBody div[onclick^="openCard"]{font-size:13px}
}
/* ── Global Search ── */
.gs-overlay{position:fixed;inset:0;background:var(--overlay-bg);z-index:var(--z-top);display:flex;align-items:flex-start;justify-content:center;padding-top:12svh;opacity:0;pointer-events:none;transition:opacity var(--motion-base)}
.gs-overlay.active{opacity:1;pointer-events:all}
.gs-box{background:var(--surface);border-radius:var(--radius-lg);width:min(620px,94vw);box-shadow:0 24px 60px rgba(0,0,0,.35);overflow:hidden;display:flex;flex-direction:column;max-height:70svh}
.gs-input-row{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:0.5px solid var(--chrome-border)}
.gs-icon{font-size:12px;background:var(--surface-2);border:0.5px solid var(--border);border-radius:var(--radius-xs);padding:2px 5px;color:var(--text-muted);white-space:nowrap;flex-shrink:0}
.gs-input{flex:1;border:none;outline:none;font-size:16px;background:transparent;color:var(--text-primary);font-family:inherit}
.gs-input::placeholder{color:var(--text-muted)}
/* V39tttt — gs-close-btn smooth hover + press */
.gs-close-btn{background:none;border:none;font-size:16px;cursor:pointer;color:var(--text-muted);padding:0 4px;line-height:1;flex-shrink:0;transition:color var(--motion-fast),transform var(--motion-fast)}
.gs-close-btn:hover{color:var(--text-primary)}
.gs-close-btn:active{transform:scale(.92)}
.gs-results{overflow-y:auto;flex:1;padding:6px 0}
.gs-empty{padding:32px 20px;text-align:center;color:var(--text-muted);font-size:14px}
.gs-group-label{padding:6px 16px 2px;font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}
.gs-item{display:flex;align-items:flex-start;gap:10px;padding:8px 16px;cursor:pointer;transition:background var(--motion-fast)}
.gs-item:hover,.gs-item.gs-active{background:var(--surface-2)}
.gs-item-icon{font-size:16px;line-height:1.4;flex-shrink:0}
.gs-item-main{flex:1;min-width:0}
.gs-item-title{font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-item-sub{font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.gs-divider{height:1px;background:var(--border);margin:4px 0}

/* ── Health Score badge ── */
.hs-badge{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:20px;border-radius:var(--radius-pill);font-size:11px;font-weight:600;padding:0 6px;letter-spacing:-0.3px;cursor:default;flex-shrink:0}
.hs-green{background:var(--hs-green-bg);color:var(--hs-green-fg)}
.hs-amber{background:var(--hs-amber-bg);color:var(--hs-amber-fg)}
.hs-red{background:var(--hs-red-bg);color:var(--hs-red-fg)}
.hs-none{background:var(--surface-2);color:var(--text-muted)}
.card-health-row{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.hs-list-cell{display:flex;align-items:center;justify-content:center}

/* ── Density compact overrides ── */
[data-density="compact"] .photos-page{padding:16px 20px}
[data-density="compact"] .photo-thumb-info{padding:7px 10px 9px}
[data-density="compact"] .photos-page-grid{gap:10px}

/* ── Calendar (Phase 22) ── */
/* pass-3 (_STANDARD.md A): matte stage — full-width, even 12px frame, no centered max-width cap (kills the dead side-gutters on wide screens). */
.cal-page{padding:12px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;width:100%;box-sizing:border-box;flex:1;min-height:0}
/* pass-3 (_STANDARD.md A.2): header lifted into a floating glass chrome panel (was loose on the matte). */
.cal-header{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:11px 14px;background:var(--lg-bg);backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract);box-shadow:var(--lg-edge),var(--shadow-e2);border:.5px solid var(--chrome-border);border-radius:var(--radius-lg)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.cal-header{background:var(--card-bg)}}
.cal-title{font-size:18px;font-weight:700;color:var(--on-app-bg);letter-spacing:-0.3px;margin-right:auto}
.cal-nav{display:flex;align-items:center;gap:6px}
.cal-nav-btn{background:var(--surface);border:0.5px solid var(--chrome-border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:15px;font-weight:600;width:34px;height:34px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;transition:background var(--motion-fast);font-family:inherit}
.cal-nav-btn:hover{background:var(--chrome-bg-hover)}
.cal-month-label{font-size:14px;font-weight:700;color:var(--on-app-bg);min-width:140px;text-align:center;letter-spacing:-.2px}
.cal-today-btn{background:var(--app-accent);color:var(--on-accent);border:none;border-radius:var(--radius-btn-sm,8px);font-size:12.5px;font-weight:600;padding:5px 12px;cursor:pointer;transition:opacity var(--motion-fast),transform var(--motion-fast);font-family:inherit;box-shadow:0 1px 2px rgba(0,0,0,.08),inset 0 0 0 0.5px rgba(255,255,255,.16);letter-spacing:-.1px}
.cal-today-btn:hover{opacity:.92}
.cal-today-btn:active{transform:scale(.97);opacity:1}
.cal-legend{display:flex;align-items:center;gap:8px;font-size:11.5px;color:color-mix(in srgb,var(--on-app-bg) 70%,transparent)}
.cal-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:2px}
.cal-dot-overdue{background:var(--cal-overdue-dot)}
.cal-dot-due{background:var(--cal-due-dot)}
.cal-dot-upcoming{background:var(--app-accent)}
/* pass-3 (_STANDARD.md A.3): content panel = floating GLASS chrome (glass=chrome, white=content), depth via elevation not tint — was --surface-grad gradient. */
.cal-grid-wrap{background:var(--lg-bg);backdrop-filter:var(--lg-refract);-webkit-backdrop-filter:var(--lg-refract);box-shadow:var(--lg-edge),var(--shadow-e2);border:.5px solid var(--chrome-border);border-radius:var(--radius-lg);overflow:hidden;padding:10px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.cal-grid-wrap{background:var(--card-bg)}}
.cal-grid-header{display:grid;grid-template-columns:repeat(7,1fr);gap:0;text-align:center}
.cal-dow{font-size:10.5px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;padding:6px 0 8px}
/* V137 — day + agenda list views don't use the Sun…Sat weekday header. */
.cal-grid-wrap.cal-no-dow .cal-grid-header{display:none}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:0;border-top:0.5px solid color-mix(in srgb, var(--text-primary) 8%, transparent);position:relative}
/* Item 5 — Agenda mode: switch the grid container to a flowing list. */
.cal-grid:has(.cal-agenda){display:block;border-top:none}
.cal-agenda{display:flex;flex-direction:column;gap:18px;padding:6px 2px;max-height:min(64vh,640px);overflow-y:auto}
.cal-agenda-day{display:flex;flex-direction:column;gap:7px}
.cal-agenda-date{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;letter-spacing:.01em;color:var(--text-primary);text-transform:uppercase;padding:2px 2px 6px;border-bottom:0.5px solid color-mix(in srgb,var(--text-primary) 8%,transparent)}
.cal-agenda-day.is-today .cal-agenda-date{color:var(--app-accent)}
.cal-agenda-count{font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-muted);background:color-mix(in srgb,var(--text-primary) 9%,transparent);border-radius:999px;padding:1px 8px}
.cal-agenda-day.is-today .cal-agenda-count{background:color-mix(in srgb,var(--app-accent) 16%,transparent);color:var(--app-accent)}
.cal-agenda-items{display:flex;flex-direction:column;gap:5px}
.cal-agenda-kind{flex-shrink:0;font-size:10px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--text-muted);align-self:center}
.cal-cell{background:transparent;border-right:0.5px solid color-mix(in srgb, var(--text-primary) 8%, transparent);border-bottom:0.5px solid color-mix(in srgb, var(--text-primary) 8%, transparent);border-radius:0;min-height:84px;padding:6px 7px;cursor:pointer;position:relative;transition:background var(--motion-fast)}
.cal-cell:nth-child(7n){border-right:none}
.cal-cell:hover{background:color-mix(in srgb,var(--app-accent) 5%,transparent)}
/* V39vvvv — calendar cell press feedback */
.cal-cell:active{background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
.cal-cell.cal-today{background:color-mix(in srgb,var(--app-accent) 8%,transparent)}
.cal-cell.cal-other-month{opacity:.4}
.cal-cell.cal-selected{background:color-mix(in srgb,var(--app-accent) 12%,transparent);box-shadow:inset 0 0 0 1px var(--app-accent)}
.cal-day-num{font-size:11.5px;font-weight:500;color:var(--text-muted);margin-bottom:4px;letter-spacing:-.1px}
.cal-today .cal-day-num{color:var(--on-accent);background:var(--app-accent);width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;margin-bottom:4px}
.cal-pills{display:flex;flex-direction:column;gap:2px}
.cal-pill{font-size:10px;line-height:1.3;padding:1px 5px;border-radius:var(--radius-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.cal-pill-ic{width:10px;height:10px;vertical-align:-1px;margin-right:1px}
.cal-row-ic{width:14px;height:14px;vertical-align:-3px;margin-right:4px;flex:0 0 auto}
.cal-pill-overdue{background:var(--cal-overdue-bg);color:var(--cal-overdue-fg)}
.cal-pill-due{background:var(--cal-due-bg);color:var(--cal-due-fg)}
.cal-pill-upcoming{background:var(--surface-2);color:var(--text-muted)}
.cal-pill-completed{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.cal-pill-inspection{background:color-mix(in srgb,#af52de 16%,transparent);color:color-mix(in srgb,#af52de 70%,var(--text-primary))}
/* G4: event pill (teal) + day-dot */
.cal-pill-event{background:color-mix(in srgb,#0ab6d6 16%,transparent);color:color-mix(in srgb,#0ab6d6 68%,var(--text-primary))}
.cal-pill-submittal{background:color-mix(in srgb,#5856d6 16%,transparent);color:color-mix(in srgb,#5856d6 72%,var(--text-primary))}
.cal-pill-ahj{background:color-mix(in srgb,#30d158 16%,transparent);color:color-mix(in srgb,#30d158 70%,var(--text-primary))}
.cal-pill-permit{background:color-mix(in srgb,#ff9f0a 16%,transparent);color:color-mix(in srgb,#ff9f0a 72%,var(--text-primary))}
.cal-pill-meeting{background:color-mix(in srgb,var(--text-primary) 9%,transparent);color:var(--text-secondary)}
.cal-day-dot-event{background:#0ab6d6}
.cal-pill-log{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok)}
.cal-pill-task{cursor:grab;user-select:none}
.cal-pill-task.dragging{opacity:.45;cursor:grabbing}
.cal-pill-task .cal-pill-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;margin-right:4px;vertical-align:1px}
.cal-cell.cal-drop-target{box-shadow:inset 0 0 0 2px var(--app-accent);background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
/* ── Gantt-on-calendar: schedule-lane overlay (spanning stage bars over the month grid) ── */
/* Agenda/Day/Week chips (single-cell) for stages + milestones */
.cal-pill-stage{background:color-mix(in srgb,var(--app-accent) 15%,transparent);color:color-mix(in srgb,var(--app-accent) 74%,var(--text-primary))}
.cal-pill-stage-done{background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-muted);text-decoration:line-through;text-decoration-thickness:.5px}
.cal-pill-milestone{background:color-mix(in srgb,#ff9f0a 18%,transparent);color:color-mix(in srgb,#ff9f0a 74%,var(--text-primary));font-weight:600}
/* The absolutely-positioned overlay layer sits over #calGrid inside .cal-grid-wrap. It's
   click-through except the bars themselves, so day-cell taps still land between/under bars. */
.cal-sched-lane{position:absolute;inset:0;pointer-events:none;z-index:3}
.cal-sbar{position:absolute;height:15px;pointer-events:auto;cursor:pointer;border-radius:5px;display:flex;align-items:center;overflow:hidden;font-size:10px;font-weight:600;line-height:1;box-shadow:var(--shadow-e1);transition:filter var(--motion-fast),transform var(--motion-fast)}
.cal-sbar:hover{filter:brightness(1.06) saturate(1.05);transform:translateY(-.5px);box-shadow:var(--shadow-e2);z-index:5}
.cal-sbar:focus-visible{outline:2px solid var(--app-accent);outline-offset:1px}
.cal-sbar-label{padding:0 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* status tones — upcoming (outlined accent), active (filled accent), done (muted) */
.cal-sbar-upcoming{background:color-mix(in srgb,var(--app-accent) 16%,var(--card-bg));color:color-mix(in srgb,var(--app-accent) 80%,var(--text-primary));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--app-accent) 40%,transparent),var(--shadow-e1)}
.cal-sbar-active{background:linear-gradient(180deg,color-mix(in srgb,var(--app-accent) 92%,white) 0%,var(--app-accent) 100%);color:var(--on-accent)}
.cal-sbar-done{background:color-mix(in srgb,var(--ok) 24%,var(--surface-2));color:color-mix(in srgb,var(--ok) 55%,var(--text-primary))}
/* caps: a true start/end gets the rounded edge; a clipped edge (week/window boundary) goes flat
   with a subtle chevron notch so the eye reads "continues". */
.cal-sbar.cap-l{border-top-left-radius:5px;border-bottom-left-radius:5px}
.cal-sbar.cap-r{border-top-right-radius:5px;border-bottom-right-radius:5px}
.cal-sbar.clip-l{border-top-left-radius:0;border-bottom-left-radius:0}
.cal-sbar.clip-r{border-top-right-radius:0;border-bottom-right-radius:0}
.cal-sbar.clip-l::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(90deg,color-mix(in srgb,var(--text-primary) 22%,transparent),transparent)}
.cal-sbar.clip-r::after{content:"";position:absolute;right:0;top:0;bottom:0;width:6px;background:linear-gradient(270deg,color-mix(in srgb,var(--text-primary) 22%,transparent),transparent)}
/* milestone diamond marker */
.cal-sbar-ms{width:16px;height:16px;background:transparent!important;box-shadow:none;overflow:visible}
.cal-sbar-ms .cal-sbar-dia{position:absolute;left:0;top:0;width:12px;height:12px;background:linear-gradient(135deg,color-mix(in srgb,#ff9f0a 92%,white),#ff9f0a);transform:rotate(45deg);border-radius:2px;box-shadow:var(--shadow-e1),inset 0 0 0 .5px color-mix(in srgb,#ff9f0a 60%,var(--text-primary))}
.cal-sbar-ms:hover .cal-sbar-dia{filter:brightness(1.08)}
/* continuation lead-in glyph on a clipped-left bar (stage carries over from the prior week) */
.cal-sbar-cont{opacity:.6;margin-right:2px;font-weight:700}
/* "+N more schedule" overflow chip (per week, when stacked lanes exceed the cap) */
.cal-sbar-more{position:absolute;height:14px;pointer-events:auto;cursor:pointer;font-size:9.5px;font-weight:600;line-height:14px;padding:0 6px;border-radius:5px;color:var(--text-muted);background:color-mix(in srgb,var(--text-primary) 7%,transparent);white-space:nowrap;transition:background var(--motion-fast),color var(--motion-fast)}
.cal-sbar-more:hover{background:color-mix(in srgb,var(--app-accent) 16%,transparent);color:color-mix(in srgb,var(--app-accent) 80%,var(--text-primary))}
.cal-sbar-more:focus-visible{outline:2px solid var(--app-accent);outline-offset:1px}
/* Ship 4 (2026-05-15 cont. 19 bundle-2) — calendar reschedule undo toast */
/* V39pp — cal-undo-toast theme-aware (was hardcoded #1f2937 grey that looked
   like a system toast on light themes but was wrong on dark themes). */
.cal-undo-toast{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom,0));left:50%;transform:translateX(-50%);background:var(--text-primary);color:var(--card-bg);padding:10px 14px;border-radius:var(--radius-md);display:flex;align-items:center;gap:12px;font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.22);z-index:var(--z-toast);animation:calUndoIn var(--motion-base) ease-out;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);font-weight:600;letter-spacing:-.05px}
/* V39xxxxx — cal-undo-btn inherits toast text/border colors (toast is
   var(--text-primary) bg w/ var(--card-bg) text — on midnight that's a LIGHT
   toast, so a white-on-toast button was invisible). */
.cal-undo-btn{background:transparent;border:0.5px solid color-mix(in srgb, var(--card-bg) 40%, transparent);color:var(--card-bg);padding:3px 10px;border-radius:var(--radius-sm);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;letter-spacing:-.05px;transition:background var(--motion-fast),transform var(--motion-fast)}
.cal-undo-btn:hover{background:color-mix(in srgb, var(--card-bg) 18%, transparent)}
.cal-undo-btn:active{transform:scale(.95)}
@keyframes calUndoIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
.cal-pill-inspection{cursor:grab}
.cal-pill-event{cursor:grab}
.cal-pill-inspection.dragging,.cal-pill-event.dragging{opacity:.45;cursor:grabbing}
.cal-overflow{font-size:10px;color:var(--text-muted);margin-top:2px;padding-left:2px;font-style:italic;cursor:pointer}
.cal-mode-toggle{display:inline-flex;gap:2px;background:color-mix(in srgb, var(--text-primary) 8%, transparent);border-radius:var(--radius-md);padding:2px;margin-left:8px;box-shadow:inset 0 0 0 0.5px color-mix(in srgb, var(--text-primary) 15%, transparent)}
/* V39hhhh — cal-mode-btn: transition + press feedback */
.cal-mode-btn{background:transparent;border:none;border-radius:var(--radius-sm);padding:3px 10px;font-size:11.5px;font-weight:600;color:color-mix(in srgb,var(--on-app-bg) 60%,transparent);cursor:pointer;font-family:inherit;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast)}
.cal-mode-btn:hover:not(.active){color:var(--text-primary);background:var(--chrome-bg-hover)}
.cal-mode-btn:active:not(.active){transform:scale(.97)}
.cal-mode-btn.active{background:var(--chrome-bg-strong);color:var(--on-app-bg);box-shadow:var(--shadow-e1)}
.cal-project-filter{height:26px;padding:0 22px 0 9px;border:0.5px solid var(--chrome-border);border-radius:var(--radius-sm);background:var(--chrome-bg);color:var(--text-primary);font-size:12px;font-weight:500;font-family:inherit;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238e8e93'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;outline:none;transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
.cal-project-filter:focus-visible{outline:none;border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--app-accent) 22%, transparent)}
.cal-grid-week .cal-cell{min-height:200px}
.cal-day-section{margin-top:10px}
.cal-day-section-h{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);margin-bottom:4px}
.cal-day-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:0.5px solid var(--chrome-border);cursor:pointer}
.cal-day-row:hover{background:var(--chrome-bg-hover);border-radius:var(--radius-sm);padding-left:6px;padding-right:6px}
.cal-day-row-main{flex:1;min-width:0}
.cal-day-row-text{font-size:13px;color:var(--text-primary);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-day-row-meta{font-size:11px;color:var(--text-muted);margin-top:1px}
.cal-day-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.cal-day-dot-overdue{background:var(--err)}
.cal-day-dot-due{background:var(--warn)}
.cal-day-dot-upcoming{background:var(--app-accent)}
.cal-day-dot-completed{background:var(--ok)}
.cal-day-dot-inspection{background:#af52de}
.cal-day-dot-log{background:var(--ok)}
.cal-day-dot-stage{background:var(--app-accent)}
.cal-day-dot-milestone{background:#ff9f0a}
.cal-day-empty{color:var(--text-muted);font-size:13px;padding:18px 0;text-align:center}
.cal-dot-inspection{background:#af52de}
.cal-dot-log{background:var(--ok)}
.cal-more{font-size:10px;color:var(--text-muted);margin-top:2px;padding-left:2px;font-style:italic}
.cal-task-list{background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);padding:14px 18px;box-shadow:var(--shadow-e2)}
.cal-task-list-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.cal-task-list-close{background:none;border:none;font-size:16px;color:var(--text-muted);cursor:pointer;margin-left:auto;line-height:1}
.cal-task-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:0.5px solid color-mix(in srgb, var(--text-primary) 8%, transparent)}
.cal-task-row:last-child{border-bottom:none}
.cal-task-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.cal-task-text{flex:1;font-size:13px;color:var(--text);font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-task-project{font-size:11px;color:var(--text-muted);flex-shrink:0;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-task-assignee{font-size:11px;color:var(--text-muted);flex-shrink:0}
.cal-empty{text-align:center;color:var(--text-muted);font-size:13px;padding:24px 0}

/* ── 6.1 Lookahead (2026-05-15 cont. 19) — 2w/4w cross-project rolling list ── */
/* pass-3 (_STANDARD.md A): matte stage — full-width, even 12px frame, no centered max-width cap (was 1100px → dead side-gutters on wide screens). */
.la-page{padding:12px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;width:100%;box-sizing:border-box;color:var(--text-primary);flex:1;min-height:0}
.la-header{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:0 2px}
.la-title{font-size:18px;font-weight:700;color:var(--on-app-bg);letter-spacing:-.3px;margin-right:auto}
.la-nav{display:flex;align-items:center;gap:6px}
.la-today-btn{background:var(--app-accent);color:var(--on-accent);border:none;border-radius:var(--radius-btn-sm,8px);font-size:12.5px;font-weight:600;padding:5px 12px;cursor:pointer;transition:opacity var(--motion-fast),transform var(--motion-fast);font-family:inherit;box-shadow:0 1px 2px rgba(0,0,0,.08),inset 0 0 0 0.5px rgba(255,255,255,.16);letter-spacing:-.1px}
.la-today-btn:hover{opacity:.92}
.la-today-btn:active{transform:scale(.97);opacity:1}
.la-mode-toggle{display:inline-flex;gap:2px;background:color-mix(in srgb, var(--text-primary) 8%, transparent);border-radius:var(--radius-md);padding:2px;box-shadow:inset 0 0 0 0.5px color-mix(in srgb, var(--text-primary) 15%, transparent)}
/* V39hhhh — la-mode-btn: transition + press */
.la-mode-btn{background:transparent;border:none;border-radius:var(--radius-tag);color:var(--text-muted);padding:5px 10px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;letter-spacing:-.1px;transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast)}
.la-mode-btn:active:not(.active){transform:scale(.97)}
.la-mode-btn.active{background:var(--chrome-bg-strong);color:var(--text-primary);box-shadow:0 1px 2px rgba(0,0,0,.06),0 0 0 0.5px rgba(0,0,0,.04)}
.la-mode-btn:hover:not(.active){background:var(--chrome-bg-hover);color:var(--text-primary)}
.la-project-filter{background:var(--chrome-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);color:var(--text-primary);font-size:12.5px;padding:5px 10px;font-family:inherit;cursor:pointer;height:28px}
/* V98 — collapse/expand-all toggle for the look-ahead sections. Quiet secondary
   pill (the utility-action family); chevron reflects state, label flips. */
.la-collapse-btn{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);color:var(--text-primary);font-size:12.5px;font-weight:600;letter-spacing:-.1px;padding:5px 11px;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background var(--motion-fast),transform var(--motion-fast)}
.la-collapse-btn:hover{background:var(--surface-3)}
.la-collapse-btn:active{transform:scale(.97)}
.la-collapse-ico{width:12px;height:12px;flex-shrink:0;color:var(--text-muted);transition:transform var(--motion-base) var(--ease-spring)}
.la-collapse-btn.all-collapsed .la-collapse-ico{transform:rotate(180deg)}
.la-legend{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--text-muted);width:100%;padding:0 2px;margin-top:-4px}
.la-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:1px}
.la-dot-overdue{background:var(--color-error)}
.la-dot-due{background:var(--color-warning)}
.la-dot-upcoming{background:var(--color-info)}
.la-dot-inspection{background:#8b5cf6}
.la-dot-log{background:var(--color-success)}
.la-dot-event{background:#0ea5e9}
/* ═══ Lookahead · Pass-2 (proto 06) — field-planning hero + overdue banner +
   three week columns of day-grouped rows. All scoped under #lookaheadView. The
   per-task type color reads via a LEADING DOT + type pill (NOT a colored left
   edge-strip — HARD rule). */
/* pass-3 (canon: hero derives from --app-accent → theme-tracks across all 6 themes, was hardcoded Gulf-green). */
#lookaheadView .la-hero{border-radius:22px;padding:20px 24px;color:var(--on-accent);overflow:hidden;position:relative;margin-bottom:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--app-accent) 78%,#0a2a1c) 0%,var(--app-accent) 52%,color-mix(in srgb,var(--app-accent) 82%,#7ee6a8) 100%);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,var(--shadow-e3)}
#lookaheadView .la-hero::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 80% at 0% 0%,rgba(255,255,255,.2),transparent 55%)}
#lookaheadView .la-hero .lh-row{position:relative;display:flex;align-items:center;gap:30px;flex-wrap:wrap}
#lookaheadView .la-hero .lh-lead{display:flex;flex-direction:column;gap:3px;padding-right:26px;border-right:1px solid rgba(255,255,255,.22)}
/* pass-3 FIX: hero text children must use --on-accent (was inheriting the GLOBAL .lh-title{color:--text-primary} / .lh-sub{color:--color-info} → white-on-yellow WCAG fail on contrast theme). Scoped color beats the global. */
#lookaheadView .la-hero .lh-kicker{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.85;color:var(--on-accent)}
#lookaheadView .la-hero .lh-title{font-size:25px;font-weight:800;letter-spacing:-.02em;line-height:1.05;color:var(--on-accent)}
#lookaheadView .la-hero .lh-sub{font-size:12.5px;font-weight:600;opacity:.9;color:var(--on-accent);background:none}
#lookaheadView .lh-cell{display:flex;flex-direction:column;gap:1px}
#lookaheadView .lh-cell .lc-v{font-size:27px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
#lookaheadView .lh-cell .lc-l{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;opacity:.82}
#lookaheadView .lh-cell.alert .lc-v{color:#ffd0cb}
/* the counters host carries display:flex from .fi-hero-counters which beats UA [hidden] —
   add an explicit guard so the empty container doesn't show before data loads. */
#lookaheadView .fi-hero-counters[hidden]{display:none}
#lookaheadView .la-hero .lh-cta{margin-left:auto;display:flex;gap:8px}
#lookaheadView .lh-glassbtn{height:34px;padding:0 15px;border-radius:999px;border:.5px solid rgba(255,255,255,.3);background:rgba(255,255,255,.16);color:var(--on-accent);font-size:12.5px;font-weight:700;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:inline-flex;align-items:center;gap:6px;transition:background var(--motion-fast,.15s)}
#lookaheadView .lh-glassbtn:hover{background:rgba(255,255,255,.26)}
#lookaheadView .lh-glassbtn.solid{background:#fff;color:color-mix(in srgb,var(--app-accent) 70%,#000);border:0}
#lookaheadView .lh-glassbtn.solid:hover{background:rgba(255,255,255,.9)}
/* overdue banner — error tone, leads */
#lookaheadView .la-od{border-radius:18px;overflow:hidden;margin-bottom:16px;border:1px solid color-mix(in srgb,var(--color-error,#ef4444) 30%,transparent);box-shadow:var(--shadow-e1)}
#lookaheadView .la-od .od-head{display:flex;align-items:center;gap:10px;padding:11px 16px;background:var(--color-error-bg,#fdeaea);color:var(--color-error,#c0392b);font-weight:800;font-size:13.5px;cursor:pointer;list-style:none}
#lookaheadView .la-od .od-head::-webkit-details-marker{display:none}
#lookaheadView .la-od .od-count{margin-left:auto;font-size:11px;font-weight:700}
#lookaheadView .la-od .od-chev{width:13px;height:13px;transition:transform var(--motion-fast,.15s)}
#lookaheadView .la-od[open] .od-chev{transform:rotate(90deg)}
#lookaheadView .la-od .od-body{background:var(--card-bg,#fff)}
#lookaheadView .od-row{display:flex;align-items:center;gap:12px;padding:9px 16px;border-top:.5px solid color-mix(in srgb,var(--color-error,#ef4444) 12%,rgba(0,0,0,.05));cursor:pointer;transition:background var(--motion-fast,.15s)}
#lookaheadView .od-row:hover{background:color-mix(in srgb,var(--color-error,#ef4444) 5%,transparent)}
#lookaheadView .od-row .od-flag{color:var(--color-error,#c0392b);font-size:13px;flex:0 0 auto;display:inline-flex;align-items:center}
#lookaheadView .od-row .od-flag .ic{width:13px;height:13px}
#lookaheadView .od-row .od-t{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#lookaheadView .od-row .od-proj{font-size:11.5px;color:var(--text-secondary)}
#lookaheadView .od-row .od-late{font-size:11px;font-weight:800;color:var(--color-error,#c0392b);background:var(--color-error-bg,#fdeaea);padding:2px 8px;border-radius:999px;flex:0 0 auto;font-variant-numeric:tabular-nums}
#lookaheadView .od-spacer{flex:1;min-width:0}
#lookaheadView .od-more{display:flex;justify-content:center;padding:9px 16px;border-top:.5px solid color-mix(in srgb,var(--color-error,#ef4444) 12%,rgba(0,0,0,.05))}
#lookaheadView .od-more button{border:0;background:transparent;color:var(--color-error,#c0392b);font-size:12px;font-weight:700;cursor:pointer;padding:4px 10px;border-radius:999px}
#lookaheadView .od-more button:hover{background:color-mix(in srgb,var(--color-error,#ef4444) 8%,transparent)}
/* three week columns */
#lookaheadView .la-cols{display:grid;grid-template-columns:repeat(var(--lacols,3),1fr);gap:16px;align-items:start}
#lookaheadView .wk{background:var(--card-bg,#fff);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-e2);border:.5px solid rgba(0,0,0,.05)}
#lookaheadView .wk.command{box-shadow:var(--shadow-e3,0 18px 44px -16px rgba(20,30,48,.4));border-color:color-mix(in srgb,var(--wkc,var(--app-accent)) 30%,transparent)}
#lookaheadView .wk.command .wk-title{font-size:17.5px}
#lookaheadView .wk-head{position:relative;padding:13px 16px 12px;border-bottom:.5px solid var(--chrome-border,rgba(0,0,0,.07))}
#lookaheadView .wk-head.now{background:linear-gradient(160deg,color-mix(in srgb,var(--wkc,var(--app-accent)) 13%,var(--card-bg)),color-mix(in srgb,var(--wkc,var(--app-accent)) 3%,var(--card-bg)));box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
#lookaheadView .wk-tag{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--wkc,var(--app-accent))}
#lookaheadView .wk-tag::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--wkc,var(--app-accent));box-shadow:0 0 0 3px color-mix(in srgb,var(--wkc,var(--app-accent)) 22%,transparent)}
#lookaheadView .wk.later{opacity:.92}
#lookaheadView .wk.later .wk-tag::before{box-shadow:none}
#lookaheadView .wk.furthest{opacity:.82}
#lookaheadView .wk.furthest .wk-head{background:color-mix(in srgb,var(--surface-2) 22%,transparent)}
#lookaheadView .wk.furthest .wk-title{font-weight:700}
#lookaheadView .wk-title{font-size:16px;font-weight:800;letter-spacing:-.01em;margin-top:1px}
#lookaheadView .wk-range{font-size:11.5px;color:var(--text-muted);font-weight:600}
#lookaheadView .wk-meta{display:flex;gap:14px;margin-top:8px}
#lookaheadView .wk-meta .wm{display:flex;flex-direction:column}
#lookaheadView .wk-meta .wm-v{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}
#lookaheadView .wk-meta .wm-l{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--text-muted);letter-spacing:.04em}
#lookaheadView .wk-meta .wm.alert .wm-v{color:var(--color-error,#c0392b)}
#lookaheadView .wk-body{padding:8px 10px 12px}
#lookaheadView .day-grp{margin:6px 4px}
#lookaheadView .day-hd{display:flex;align-items:center;gap:8px;padding:6px 8px}
#lookaheadView .day-hd .dd{font-size:11.5px;font-weight:800;letter-spacing:.02em}
#lookaheadView .day-hd .dd-date{font-size:11px;color:var(--text-muted);font-weight:700}
#lookaheadView .day-hd.today .dd{color:var(--app-accent)}
#lookaheadView .day-hd .dd-today{font-size:9.5px;font-weight:800;color:#fff;background:var(--app-accent);padding:1px 7px;border-radius:999px}
#lookaheadView .day-hd .dd-count{margin-left:auto;font-size:10.5px;font-weight:800;color:var(--text-muted)}
#lookaheadView .wk-task{display:flex;gap:9px;padding:8px 10px;border-radius:12px;position:relative;background:color-mix(in srgb,var(--surface-2) 50%,transparent);border:.5px solid rgba(0,0,0,.04);margin-bottom:5px;transition:background var(--motion-fast) var(--ease-out,ease),border-color var(--motion-fast);cursor:pointer}
/* contained rounded tint hover (NOT a lift — the .wk parent is overflow:hidden so a
   transform/shadow would clip at the column edge; hard rule). */
#lookaheadView .wk-task:hover{background:color-mix(in srgb,var(--wts,var(--app-accent)) 8%,var(--surface-2));border-color:color-mix(in srgb,var(--wts,var(--app-accent)) 22%,transparent)}
#lookaheadView .wk-task.over:hover{background:color-mix(in srgb,var(--color-error,#ef4444) 12%,var(--color-error-bg,#fdeaea))}
/* type identity = leading DOT (no edge stripe) */
#lookaheadView .wk-task .wt-dot{width:9px;height:9px;border-radius:999px;flex:0 0 9px;margin-top:4px;background:var(--wts,var(--app-accent));box-shadow:0 0 0 3px color-mix(in srgb,var(--wts,var(--app-accent)) 18%,transparent)}
#lookaheadView .wk-task.over{background:var(--color-error-bg,#fdeaea);border-color:color-mix(in srgb,var(--color-error,#ef4444) 22%,transparent)}
#lookaheadView .wt-body{min-width:0;flex:1}
#lookaheadView .wt-t{font-size:12.5px;font-weight:700;line-height:1.25}
#lookaheadView .wt-m{font-size:11px;color:var(--text-secondary);margin-top:2px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
#lookaheadView .wt-proj{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
#lookaheadView .wt-type{font-size:9.5px;font-weight:800;padding:1px 6px;border-radius:999px}
#lookaheadView .wt-bic{display:flex;align-items:center;flex:0 0 auto}
#lookaheadView .wt-face{width:21px;height:21px;border-radius:999px;display:grid;place-items:center;color:#fff;font-size:9px;font-weight:800;box-shadow:0 0 0 1.5px var(--card-bg,#fff);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif}
#lookaheadView .wk-empty{margin:8px 6px;padding:22px 14px;text-align:center;border:1.5px dashed color-mix(in srgb,var(--app-accent) 22%,rgba(0,0,0,.08));border-radius:14px;background:color-mix(in srgb,var(--app-accent) 3%,transparent)}
#lookaheadView .wk-empty .we-ico{font-size:22px;opacity:.6}
#lookaheadView .wk-empty .we-t{font-size:12.5px;font-weight:800;margin-top:4px}
#lookaheadView .wk-empty .we-s{font-size:11px;color:var(--text-secondary);margin-top:2px}
@media(max-width:1100px){
  #lookaheadView .la-cols{grid-template-columns:1fr}
  #lookaheadView .la-hero .lh-lead{border-right:0;padding-right:0}
}

.la-body{display:flex;flex-direction:column;gap:14px}
.la-empty{text-align:center;color:var(--text-muted);font-size:13px;padding:48px 0}
.la-day{background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-card,14px);overflow:hidden;color:var(--text-primary);box-shadow:var(--shadow-e1);transition:box-shadow var(--motion-base) var(--ease-out)}
.la-day:hover{box-shadow:var(--shadow-e2)}
/* V98 — every look-ahead section is a collapsible <details> with a bounded,
   internally-scrolling body so no single section (e.g. 12 overdue items) eats the
   whole viewport. Header toggles open/closed; chevron rotates; body scrolls in place. */
.la-day > summary{cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.la-day > summary::-webkit-details-marker{display:none}
.la-day-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;font-size:13.5px;font-weight:600;color:var(--text-primary);background:var(--surface-2);border-bottom:0.5px solid var(--chrome-border);letter-spacing:-.2px;transition:background var(--motion-fast)}
.la-day > summary.la-day-head:hover{background:var(--surface-3)}
.la-day-head-label{display:inline-flex;align-items:center;gap:7px}
.la-day-chevron{width:13px;height:13px;flex-shrink:0;color:var(--text-muted);transform:rotate(90deg);transition:transform var(--motion-base) var(--ease-spring)}
.la-day:not([open]) .la-day-chevron{transform:rotate(0deg)}
.la-day-count{font-size:11px;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px}
.la-day-body{display:flex;flex-direction:column;max-height:340px;overflow-y:auto;overscroll-behavior:contain}
.la-day-body::-webkit-scrollbar{width:5px}
.la-day-body::-webkit-scrollbar-thumb{background:var(--col-scroll,color-mix(in srgb,var(--text-primary) 18%,transparent));border-radius:3px}
.la-row{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;border-bottom:0.5px solid color-mix(in srgb, var(--chrome-border) 60%, transparent);transition:background var(--motion-fast)}
.la-row:last-child{border-bottom:none}
.la-row:hover{background:var(--surface-2)}
/* V39hhhhh — la-row press feedback */
.la-row:active{background:var(--surface-3)}
.la-row-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.la-row-icon{font-size:12px;opacity:.7;width:14px;text-align:center;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}
.la-row-icon .ic{width:13px;height:13px}
.la-row-text{flex:1;min-width:0;font-size:13px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.la-row-meta{font-size:11.5px;color:var(--text-muted);flex-shrink:0;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.la-row-task.la-row-completed .la-row-text{text-decoration:line-through;color:var(--text-muted)}
.la-row-task.la-row-overdue .la-row-text{color:var(--color-error)}
/* Ship 2 (2026-05-15 cont. 19 bundle-2) — Overdue section + severity badges + nav badge */
.la-overdue{border-color:color-mix(in srgb, var(--color-error) 40%, var(--chrome-border)) !important;box-shadow:var(--shadow-e2)}
.la-overdue-head{background:color-mix(in srgb, var(--color-error) 8%, var(--surface-2)) !important;border-bottom-color:color-mix(in srgb, var(--color-error) 30%, var(--chrome-border)) !important;color:var(--text-primary)}
.la-overdue-count{background:var(--color-error);color:#fff;padding:1px 7px;border-radius:var(--radius-md);font-size:11px;font-weight:600;letter-spacing:0}
.la-sev-pill{flex-shrink:0;font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:var(--radius-md);letter-spacing:.02em;margin-right:6px}
.la-sev-pill.sev-low{background:var(--color-warning-bg,color-mix(in srgb,var(--color-warning) 14%,transparent));color:color-mix(in srgb,var(--color-warning) 72%,var(--text-primary))}
.la-sev-pill.sev-med{background:color-mix(in srgb,var(--color-warning) 22%,transparent);color:color-mix(in srgb,var(--color-warning) 80%,var(--text-primary))}
.la-sev-pill.sev-high{background:var(--color-error-bg,color-mix(in srgb,var(--color-error) 14%,transparent));color:color-mix(in srgb,var(--color-error) 78%,var(--text-primary))}
.la-nav-badge{display:inline-flex;align-items:center;justify-content:center;background:var(--color-error);color:#fff;font-size:10px;font-weight:600;min-width:16px;height:16px;padding:0 5px;border-radius:var(--radius-md);margin-left:5px;line-height:1}

/* ── Field & Schedule Intelligence (2026-05-24) — deepened Lookahead surface ── */
/* pass-3 (_STANDARD.md A): full-width — removed the 1180px cap (it re-constrained #lookaheadView after .la-page went full-width → dead side-gutters on wide screens). */
.fi-page{max-width:none}
.fi-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:2px 2px 0}
.fi-hero-title{font-size:26px;font-weight:800;letter-spacing:-.5px;color:var(--on-app-bg);line-height:1.1}
.fi-hero-sub{font-size:13.5px;color:color-mix(in srgb,var(--on-app-bg) 62%,transparent);margin-top:5px;letter-spacing:-.1px;max-width:560px}
.fi-hero-actions{display:flex;align-items:center;gap:8px}
/* Segmented control — frosted glass chrome floating over the matte */
.fi-seg{display:inline-flex;gap:3px;padding:4px;border-radius:var(--radius-pill,999px);align-self:flex-start;
  background:var(--frost-bg);backdrop-filter:var(--frost-blur);-webkit-backdrop-filter:var(--frost-blur);
  box-shadow:var(--shadow-e2),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.05);
  border:0.5px solid color-mix(in srgb,var(--on-app-bg) 12%,transparent)}
.fi-seg-btn{display:inline-flex;align-items:center;gap:7px;border:none;background:transparent;cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:600;letter-spacing:-.1px;color:color-mix(in srgb,var(--on-app-bg) 64%,transparent);
  padding:7px 15px;border-radius:var(--radius-pill,999px);transition:background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast),box-shadow var(--motion-base) var(--ease-spring)}
.fi-seg-btn:hover:not(.active){color:var(--on-app-bg);background:color-mix(in srgb,var(--on-app-bg) 7%,transparent)}
.fi-seg-btn:active{transform:scale(.96)}
.fi-seg-btn.active{background:var(--app-accent);color:var(--on-accent);
  box-shadow:0 2px 8px color-mix(in srgb,var(--app-accent) 38%,transparent),inset 0 1px 0 rgba(255,255,255,.28)}
.fi-seg-ico{width:15px;height:15px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fi-seg-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  font-size:10.5px;font-weight:700;line-height:1;background:var(--color-error);color:#fff;margin-left:1px}
.fi-seg-btn.active .fi-seg-badge{background:rgba(255,255,255,.28);color:var(--on-accent)}
.fi-seg-badge-warn{background:var(--color-warning)}
@media (prefers-reduced-transparency: reduce){.fi-seg{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
.fi-panel{animation:fiFadeIn var(--motion-base) var(--ease-out)}
@keyframes fiFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.fi-panel{animation:none}.fi-seg-btn{transition:none}}

/* Look-ahead stage roll-up rail */
.fi-stage-rail{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;margin-bottom:2px;scrollbar-width:thin}
.fi-stage-rail:empty{display:none}
.fi-week-card{flex:0 0 auto;min-width:188px;background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-card,14px);
  padding:12px 13px;box-shadow:var(--shadow-e1);transition:box-shadow var(--motion-base) var(--ease-out),transform var(--motion-fast)}
.fi-week-card:hover{box-shadow:var(--shadow-e3);transform:translateY(-2px)}
.fi-week-label{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
.fi-week-count{font-size:28px;font-weight:800;letter-spacing:-1px;color:var(--text-primary);font-variant-numeric:tabular-nums;margin:3px 0 1px}
.fi-week-range{font-size:11px;color:var(--text-muted)}
.fi-week-mini{display:flex;flex-wrap:nowrap;gap:4px;margin-top:9px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.fi-week-mini::-webkit-scrollbar{height:5px;background:transparent}
.fi-week-mini::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text-primary) 14%,transparent);border-radius:999px}
.fi-week-mini::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--text-primary) 24%,transparent)}
.fi-week-mini .fi-week-chip{flex:0 0 auto;max-width:none}
.fi-week-chip{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--text-secondary);
  border:0.5px solid var(--chrome-border);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;transition:transform var(--motion-fast),background var(--motion-fast)}
.fi-week-chip:hover{background:var(--surface-3);transform:translateY(-1px)}
.fi-week-chip:active{transform:scale(.96)}

/* Slip alert cards */
.fi-empty{text-align:center;color:var(--text-muted);font-size:13.5px;padding:54px 18px;display:flex;flex-direction:column;align-items:center;gap:8px}
.fi-empty svg{width:30px;height:30px;opacity:.4;fill:none;stroke:currentColor;stroke-width:1.6}
.fi-empty-good{color:color-mix(in srgb,var(--color-success) 70%,var(--text-muted))}

/* Wave B — TODAY field-dispatch panel. Per-job morning cards: active stages +
   today's tasks + crew + log status. Raised V133 panels, tokens-only. */
.fi-today-head{padding:14px 17px;margin-bottom:14px;display:flex;align-items:center;gap:12px}
.fi-today-title{font-size:17px;font-weight:800;letter-spacing:-.3px;color:var(--text-primary)}
.fi-today-sub{font-size:12.5px;color:var(--text-secondary);margin-top:2px}
.fi-today-warn{color:var(--color-warning);font-weight:700}
.fi-today-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
@media (max-width:640px){.fi-today-grid{grid-template-columns:1fr}}
.fi-today-card{padding:14px 16px;cursor:pointer;transition:box-shadow var(--motion-base) var(--ease-out),transform var(--motion-fast)}
.fi-today-card:hover{box-shadow:var(--shadow-e3);transform:translateY(-2px)}
.fi-today-card:active{transform:scale(.99)}
@media (prefers-reduced-motion:reduce){.fi-today-card{transition:none}.fi-today-card:hover,.fi-today-card:active{transform:none}}
.fi-today-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.fi-today-proj{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--text-primary);min-width:0}
.fi-today-proj-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.fi-today-logged{font-size:11px;font-weight:700;color:var(--color-success,#2e8b5f);background:color-mix(in srgb,var(--color-success,#2e8b5f) 12%,transparent);padding:4px 10px;border-radius:999px;flex-shrink:0}
.fi-td-logbtn{appearance:none;border:.5px solid var(--chrome-border);background:var(--surface-2);color:var(--app-accent);font-family:inherit;font-size:11px;font-weight:700;padding:5px 12px;border-radius:999px;cursor:pointer;flex-shrink:0;transition:background var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.fi-td-logbtn:hover{background:color-mix(in srgb,var(--app-accent) 12%,var(--surface-2))}
.fi-td-logbtn:active{transform:scale(.95)}
.fi-td-stages{display:flex;flex-direction:column;gap:5px;margin-bottom:9px}
.fi-td-stage{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;font-weight:600;color:var(--text-primary);padding:6px 10px;border-radius:9px;background:color-mix(in srgb,var(--app-accent) 6%,var(--surface-2))}
.fi-td-stage-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fi-td-pct{font-size:11px;font-weight:700;color:var(--app-accent);flex-shrink:0}
.fi-td-none{font-size:12px;color:var(--text-muted);font-style:italic;padding:4px 2px}
.fi-td-tasks{display:flex;flex-direction:column;gap:4px;margin-bottom:9px}
.fi-td-task{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-secondary)}
.fi-td-dot{width:5px;height:5px;border-radius:50%;background:var(--color-info,var(--app-accent));flex-shrink:0}
.fi-td-who{margin-left:auto;font-size:11px;color:var(--text-muted);flex-shrink:0}
.fi-td-crew{display:flex;flex-wrap:wrap;gap:5px}
.fi-td-crew-chip{font-size:11px;font-weight:600;color:var(--text-secondary);background:var(--surface-2);padding:3px 9px;border-radius:999px}
.fi-td-crew-none{font-size:11.5px;color:var(--text-muted);font-style:italic}

/* Wave B — CONSTRAINTS panel (Last-Planner blockers). Per-blocked-stage cards
   listing the overdue/due-soon RFIs+submittals holding them. Raised V133. */
.fi-con-head{padding:14px 17px;margin-bottom:14px}
.fi-con-h{font-size:16px;font-weight:800;letter-spacing:-.2px;color:var(--text-primary)}
.fi-con-sub{font-size:12.5px;color:var(--text-secondary);margin-top:3px;line-height:1.4}
.fi-con-grid{display:flex;flex-direction:column;gap:12px}
.fi-con-card{padding:14px 16px}
.fi-con-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;border-radius:10px;padding:2px;margin:-2px -2px 10px;transition:background var(--motion-fast)}
.fi-con-card-top:hover{background:color-mix(in srgb,var(--app-accent) 6%,transparent)}
.fi-con-stage{font-size:14.5px;font-weight:700;color:var(--text-primary);letter-spacing:-.1px}
.fi-con-proj{font-size:12px;color:var(--text-secondary);margin-top:1px}
.fi-con-count{font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px;flex-shrink:0}
.fi-con-count.crit{color:var(--color-error);background:color-mix(in srgb,var(--color-error) 12%,transparent)}
.fi-con-count.warn{color:var(--color-warning,#9a6212);background:color-mix(in srgb,var(--color-warning,#d98a00) 14%,transparent)}
.fi-con-items{display:flex;flex-direction:column;gap:6px}
.fi-con-item{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:8px 11px;border-radius:10px;background:var(--surface-2);cursor:pointer;transition:background var(--motion-fast),transform var(--motion-fast)}
.fi-con-item:hover{background:var(--surface-3,color-mix(in srgb,var(--text-primary) 5%,var(--surface-2)))}
.fi-con-item:active{transform:scale(.995)}
@media (prefers-reduced-motion:reduce){.fi-con-item{transition:none}.fi-con-item:active{transform:none}}
.fi-con-item-num{font-size:11.5px;font-weight:800;color:var(--text-primary);flex-shrink:0}
.fi-con-item-title{font-size:12.5px;color:var(--text-secondary);min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fi-con-item-pill{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:999px;flex-shrink:0}
.fi-con-item-pill.crit{color:var(--color-error);background:color-mix(in srgb,var(--color-error) 12%,transparent)}
.fi-con-item-pill.warn{color:var(--color-warning,#9a6212);background:color-mix(in srgb,var(--color-warning,#d98a00) 14%,transparent)}
.fi-con-item-bic{font-size:11px;color:var(--text-muted);flex-shrink:0}
.fi-con-sectionhead{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-secondary);margin:18px 2px 10px}

/* G3-W3 Fork A — PPC rail (real-data, dynamically refreshed). Floating panel on the matte;
   bars driven from lookAhead.weeks[i].ppc; variance histogram beneath. No edge-strips, rounded. */
.fi-ppc-panel{padding:15px 17px;margin-bottom:14px}
.fi-ppc-head{margin-bottom:12px}
.fi-ppc-h{font-size:15px;font-weight:800;letter-spacing:-.2px;color:var(--text-primary)}
.fi-ppc-avg{color:var(--color-success);font-weight:800}
.fi-ppc-sub{font-size:12px;color:var(--text-secondary);margin-top:3px;line-height:1.4}
.fi-ppc-chart{display:flex;align-items:flex-end;gap:10px;min-height:128px;padding:6px 2px 0}
.fi-ppc-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.fi-ppc-barwrap{width:100%;max-width:62px;height:96px;display:flex;align-items:flex-end;justify-content:center;background:var(--surface-2);border-radius:10px;overflow:hidden}
.fi-ppc-bar{width:100%;border-radius:10px 10px 0 0;transition:height var(--motion-slow) var(--ease-out),background var(--motion-base)}
.fi-ppc-bar.good{background:linear-gradient(180deg,color-mix(in srgb,var(--color-success) 88%,white),var(--color-success))}
.fi-ppc-bar.mid{background:linear-gradient(180deg,color-mix(in srgb,var(--color-warning) 80%,white),var(--color-warning))}
.fi-ppc-bar.low{background:linear-gradient(180deg,color-mix(in srgb,var(--color-error) 80%,white),var(--color-error))}
.fi-ppc-bar.none{background:var(--surface-3)}
.fi-ppc-val{font-size:14px;font-weight:800;color:var(--text-primary);font-variant-numeric:tabular-nums}
.fi-ppc-lbl{font-size:11px;font-weight:600;color:var(--text-secondary);text-align:center;line-height:1.1}
.fi-ppc-den{font-size:10.5px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.fi-ppc-var{margin-top:14px;padding-top:13px;border-top:.5px solid var(--chrome-border)}
.fi-ppc-var-h{font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:9px}
.fi-ppc-var-row{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.fi-ppc-var-lbl{flex:0 0 40%;font-size:12px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fi-ppc-var-track{flex:1;height:7px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.fi-ppc-var-track > i{display:block;height:100%;border-radius:999px;background:color-mix(in srgb,var(--color-error) 60%,var(--color-warning));transition:width var(--motion-slow) var(--ease-out)}
.fi-ppc-var-n{flex:0 0 auto;font-size:11.5px;font-weight:700;color:var(--text-secondary);font-variant-numeric:tabular-nums;min-width:18px;text-align:right}

/* W3-B/C — reliability-over-time trends (PPC/PCR) + variance Pareto. Floating solid panels, rounded,
   real-data inline SVG, no colored edge-strips (tone lives in fills/dots, never an edge bar). */
.fi-trend-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
@media (max-width:760px){.fi-trend-grid{grid-template-columns:1fr}}
.fi-trend-panel{padding:15px 17px}
.fi-trend-head{margin-bottom:10px}
.fi-trend-h{font-size:15px;font-weight:800;letter-spacing:-.2px;color:var(--text-primary)}
.fi-trend-avg{font-weight:800}
.fi-trend-avg.good{color:var(--color-success)}
.fi-trend-sub{font-size:12px;color:var(--text-secondary);margin-top:3px;line-height:1.4}
.fi-trend-svg{display:block;width:100%;height:auto;overflow:visible}
.fi-trend-area{fill:color-mix(in srgb,var(--app-accent) 16%,transparent);stroke:none}
.fi-trend-line{fill:none;stroke:var(--app-accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.fi-trend-pcr .fi-trend-area{fill:color-mix(in srgb,var(--color-info) 16%,transparent)}
.fi-trend-pcr .fi-trend-line{stroke:var(--color-info)}
.fi-trend-dot{stroke:var(--card-bg,#fff);stroke-width:1.5}
.fi-trend-dot.good{fill:var(--color-success)}
.fi-trend-dot.mid{fill:var(--color-warning)}
.fi-trend-dot.low{fill:var(--color-error)}
.fi-trend-ref{stroke:var(--text-muted);stroke-width:1;stroke-dasharray:3 3;opacity:.5}
.fi-trend-refl{fill:var(--text-muted);font-size:9px;font-weight:700}
.fi-trend-xlbl{fill:var(--text-muted);font-size:9px;font-weight:600}
.fi-trend-vlbl{fill:var(--text-secondary);font-size:9.5px;font-weight:800;font-variant-numeric:tabular-nums}
.fi-pareto-panel{padding:15px 17px;margin-bottom:14px}
.fi-pareto-svg{display:block;width:100%;max-width:480px;height:auto;margin:4px auto 0;overflow:visible}
.fi-pareto-bar.vital{fill:color-mix(in srgb,var(--color-error) 64%,var(--color-warning))}
.fi-pareto-bar.tail{fill:color-mix(in srgb,var(--text-muted) 40%,var(--surface-3,var(--surface-2)))}
.fi-pareto-cumline{fill:none;stroke:var(--app-accent);stroke-width:2;stroke-linejoin:round}
.fi-pareto-cumdot{fill:var(--app-accent);stroke:var(--card-bg,#fff);stroke-width:1.5}
.fi-pareto-ref{stroke:var(--app-accent);stroke-width:1;stroke-dasharray:3 3;opacity:.45}
.fi-pareto-refl{fill:var(--app-accent);font-size:9px;font-weight:700}
.fi-pareto-xlbl{fill:var(--text-secondary);font-size:9px;font-weight:600}
.fi-pareto-xn{fill:var(--text-muted);font-size:9.5px;font-weight:800;font-variant-numeric:tabular-nums}
/* W3-C — variance review list: missed commitments + coded reason picker. Rows are rounded, contained
   hover-tint (no lift in the band), no edge-strip. The select is a proper Apple control, not a stock box. */
.fi-var-panel{padding:15px 17px;margin-bottom:14px}
.fi-var-list{display:flex;flex-direction:column;gap:8px;margin-top:11px}
.fi-var-row{display:flex;align-items:center;gap:12px;padding:9px 11px;border-radius:12px;background:var(--surface-2);transition:background var(--motion-fast)}
.fi-var-row:hover{background:var(--surface-3,color-mix(in srgb,var(--text-primary) 5%,var(--surface-2)))}
.fi-var-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;cursor:pointer;border-radius:8px}
.fi-var-task{font-size:13px;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fi-var-proj{font-size:11px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fi-var-sel{appearance:none;-webkit-appearance:none;flex:0 0 auto;max-width:158px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--text-primary);background:var(--card-bg,#fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%238a8a8e' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center;border:.5px solid var(--chrome-border);border-radius:10px;padding:7px 26px 7px 11px;cursor:pointer;box-shadow:var(--shadow-e1);transition:box-shadow var(--motion-fast),border-color var(--motion-fast)}
.fi-var-sel:hover{box-shadow:var(--shadow-e2)}
.fi-var-sel:focus-visible{outline:none;border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 30%,transparent)}
.fi-var-sel.coded{border-color:color-mix(in srgb,var(--app-accent) 50%,var(--chrome-border));color:var(--app-accent)}
@media (pointer:coarse){.fi-var-sel{min-height:var(--tap-min,44px)}}
@media (max-width:560px){.fi-var-row{flex-wrap:wrap}.fi-var-sel{max-width:none;width:100%}}

/* W3 — My Work cross-project lens (mobile-first). Floating glass hero + solid task list on the matte;
   rows are rounded with contained tint hover (no lift in the band), no edge-strips. */
.mywork-page{min-height:100%}
.mywork-hero{padding:18px 20px;margin-bottom:0;display:flex;flex-direction:column;gap:14px}
.mywork-hero-lead{display:flex;flex-direction:column;gap:2px}
.mywork-kicker{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary)}
.mywork-title{font-size:26px;font-weight:800;letter-spacing:-.6px;color:var(--on-app-bg,var(--text-primary))}
.mywork-sub{font-size:13px;color:var(--text-secondary);line-height:1.4}
.mywork-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mywork-stat{display:flex;flex-direction:column;gap:2px;padding:11px 12px;border-radius:14px;background:var(--surface-2);box-shadow:var(--shadow-e1)}
.mywork-stat.crit{background:color-mix(in srgb,var(--color-error) 12%,var(--surface-2))}
.mywork-stat.warn{background:color-mix(in srgb,var(--color-warning) 13%,var(--surface-2))}
.mywork-stat-n{font-size:22px;font-weight:800;letter-spacing:-.5px;color:var(--text-primary);font-variant-numeric:tabular-nums}
.mywork-stat.crit .mywork-stat-n{color:var(--color-error)}
.mywork-stat.warn .mywork-stat-n{color:color-mix(in srgb,var(--color-warning) 84%,var(--text-primary))}
.mywork-stat-l{font-size:11px;font-weight:600;color:var(--text-secondary)}
.mywork-body{padding:14px 16px}
.mywork-tabs{display:flex;gap:8px;margin-bottom:13px}
.mywork-tab{appearance:none;border:.5px solid var(--chrome-border);background:var(--surface-2);color:var(--text-secondary);font-family:inherit;font-size:13px;font-weight:700;padding:8px 14px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:background var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast)}
.mywork-tab.active{background:var(--app-accent);color:var(--on-accent);border-color:transparent;box-shadow:var(--shadow-e1)}
.mywork-tab-n{font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 8%,transparent)}
.mywork-tab.active .mywork-tab-n{background:rgba(255,255,255,.24)}
.mywork-list{display:flex;flex-direction:column;gap:9px}
.mywork-row{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:14px;background:var(--card-bg,#fff);box-shadow:var(--shadow-e1);cursor:pointer;transition:box-shadow var(--motion-fast),transform var(--motion-fast)}
.mywork-row:hover{box-shadow:var(--shadow-e2)}
.mywork-row:active{transform:scale(.992)}
.mywork-row.done{opacity:.55}
.mywork-row.done .mywork-row-text{text-decoration:line-through}
.mywork-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.mywork-row-text{font-size:14.5px;font-weight:600;color:var(--text-primary);line-height:1.3}
.mywork-row-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.mywork-proj{font-size:12px;font-weight:600;color:var(--text-secondary)}
.mywork-prio{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--text-secondary)}
.mywork-prio.p-high,.mywork-prio.p-urgent{background:color-mix(in srgb,var(--color-error) 14%,transparent);color:var(--color-error)}
.mywork-prio.p-medium{background:color-mix(in srgb,var(--color-warning) 15%,transparent);color:color-mix(in srgb,var(--color-warning) 82%,var(--text-primary))}
.mywork-due{font-size:12px;font-weight:600;color:var(--text-muted);font-variant-numeric:tabular-nums}
.mywork-due.over{color:var(--color-error);font-weight:700}
.mywork-due.today{color:color-mix(in srgb,var(--color-warning) 84%,var(--text-primary));font-weight:700}
.mywork-due.soon{color:color-mix(in srgb,var(--color-warning) 78%,var(--text-primary))}
.mywork-row-actions{display:flex;gap:6px;flex:0 0 auto}
.mywork-act{appearance:none;border:.5px solid var(--chrome-border);background:var(--surface-2);color:var(--text-secondary);width:38px;height:38px;min-width:38px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast)}
.mywork-act:hover{background:var(--app-accent);color:var(--on-accent);border-color:transparent;box-shadow:var(--shadow-e2)}
.mywork-act:active{transform:scale(.92)}
.mywork-act svg{width:16px;height:16px}
@media (pointer:coarse){.mywork-act{width:var(--tap-min,44px);height:var(--tap-min,44px);min-width:var(--tap-min,44px)}}
@media (max-width:560px){.mywork-stat-row{grid-template-columns:repeat(2,1fr)}.mywork-row{flex-wrap:wrap}.mywork-row-actions{width:100%;justify-content:flex-end}}
.mywork-resched{display:flex;flex-direction:column;gap:12px;padding:4px 2px 8px}
.mywork-resched-lbl{font-size:12px;font-weight:700;color:var(--text-secondary)}
.mywork-resched-input{font-family:inherit;font-size:15px;padding:11px 13px;border:.5px solid var(--chrome-border);border-radius:12px;background:var(--card-bg,#fff);color:var(--text-primary)}
.mywork-resched-input:focus-visible{outline:none;border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 30%,transparent)}
.mywork-resched-actions{display:flex;gap:10px;justify-content:flex-end}

/* W3-E — schedule-suggestion approval queue. Floating panel; cards are rounded, signal kind via a pill
   (never an edge-strip); the from→to diff reads as two chips with an arrow. */
.fi-sugg-panel{padding:15px 17px;margin-bottom:14px}
.fi-sugg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:11px;margin-top:11px}
.fi-sugg-card{display:flex;flex-direction:column;gap:8px;padding:13px;border-radius:13px;background:var(--surface-2);box-shadow:var(--shadow-e1)}
.fi-sugg-top{display:flex;align-items:center;gap:8px}
.fi-sugg-kindpill{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--app-accent) 15%,transparent);color:var(--app-accent)}
.fi-sugg-proj{font-size:12px;font-weight:600;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fi-sugg-task{font-size:14px;font-weight:700;color:var(--text-primary);line-height:1.3}
.fi-sugg-diff{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fi-sugg-from,.fi-sugg-to{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;padding:4px 10px;border-radius:9px}
.fi-sugg-from{background:var(--surface-3,color-mix(in srgb,var(--text-primary) 6%,var(--surface-2)));color:var(--text-secondary);text-decoration:line-through}
.fi-sugg-to{background:color-mix(in srgb,var(--color-success) 16%,transparent);color:color-mix(in srgb,var(--color-success) 84%,var(--text-primary))}
.fi-sugg-arrow{width:14px;height:14px;color:var(--text-muted);flex:0 0 auto}
.fi-sugg-why{font-size:12.5px;color:var(--text-secondary);line-height:1.4}
.fi-sugg-actions{display:flex;gap:8px;margin-top:2px}
.fi-sugg-actions .fi-con-btn{flex:1}
.fi-sugg-pending{font-size:11.5px;font-weight:600;color:var(--text-muted);font-style:italic;margin-top:2px}

/* G3-W3 Fork A — Constraint log (composer + list). Floating panel; rows are rounded chips,
   contained tint (no lift in an overflow band), no edge-strips. Apple-caliber inputs. */
.fi-con-log{padding:15px 17px;margin-bottom:14px}
.fi-con-log-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.fi-con-btn{appearance:none;border:.5px solid var(--chrome-border);background:var(--surface-2);color:var(--text-primary);font-family:inherit;font-size:12.5px;font-weight:700;padding:8px 14px;border-radius:10px;cursor:pointer;transition:background var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast);white-space:nowrap}
.fi-con-btn:hover{background:var(--surface-3,color-mix(in srgb,var(--text-primary) 5%,var(--surface-2)))}
.fi-con-btn:active{transform:scale(.97)}
.fi-con-btn.solid{background:var(--app-accent);color:var(--on-accent);border-color:transparent;box-shadow:var(--shadow-e1)}
.fi-con-btn.solid:hover{box-shadow:var(--shadow-e2);background:color-mix(in srgb,var(--app-accent) 90%,black)}
.fi-con-btn.ghost{background:transparent}
.fi-con-composer{display:flex;flex-direction:column;gap:9px;padding:13px;border-radius:12px;background:var(--surface-2);margin-bottom:12px}
.fi-con-comp-row{display:flex;gap:9px;flex-wrap:wrap}
.fi-con-comp-row > *{flex:1;min-width:120px}
.fi-con-inp{appearance:none;font-family:inherit;font-size:13px;color:var(--text-primary);background:var(--card-bg);border:.5px solid var(--chrome-border);border-radius:10px;padding:9px 12px;transition:box-shadow var(--motion-fast),border-color var(--motion-fast);width:100%}
.fi-con-inp:focus{outline:none;border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 22%,transparent)}
.fi-con-inp-wide{width:100%}
.fi-con-fld{display:flex;flex-direction:column;gap:4px;flex:1;min-width:140px}
.fi-con-fld > span{font-size:11px;font-weight:600;color:var(--text-secondary)}
.fi-con-comp-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:2px}
.fi-con-loglist{display:flex;flex-direction:column;gap:7px}
.fi-con-logrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:9px 12px;border-radius:11px;background:var(--surface-2);transition:background var(--motion-fast)}
.fi-con-logrow:hover{background:var(--surface-3,color-mix(in srgb,var(--text-primary) 5%,var(--surface-2)))}
.fi-con-typepill{font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:999px;flex-shrink:0;background:color-mix(in srgb,var(--app-accent) 13%,transparent);color:var(--app-accent);letter-spacing:.02em}
.fi-con-typepill.t-rfi,.fi-con-typepill.t-submittal,.fi-con-typepill.t-info{background:color-mix(in srgb,var(--app-accent) 13%,transparent);color:var(--app-accent)}
.fi-con-typepill.t-material,.fi-con-typepill.t-equipment{background:color-mix(in srgb,var(--color-warning) 16%,transparent);color:color-mix(in srgb,var(--color-warning) 82%,var(--text-primary))}
.fi-con-typepill.t-labor,.fi-con-typepill.t-prereq{background:color-mix(in srgb,#7c5cff 16%,transparent);color:#7c5cff}
.fi-con-logdesc{flex:1;min-width:140px;font-size:13px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fi-con-logproj{font-size:11px;color:var(--text-muted);flex-shrink:0}
.fi-con-logdue{font-size:11px;font-weight:600;color:var(--text-secondary);flex-shrink:0}
.fi-con-logdue.over{color:var(--color-error)}
.fi-con-logactions{display:flex;align-items:center;gap:6px;margin-left:auto;flex-shrink:0}
.fi-con-mini{appearance:none;border:.5px solid var(--chrome-border);background:var(--card-bg);color:var(--text-secondary);font-family:inherit;font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:8px;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
.fi-con-mini:hover{background:var(--app-accent);color:var(--on-accent);border-color:transparent}
.fi-con-mini.danger:hover{background:var(--color-error);color:#fff}
.fi-con-logempty{font-size:12.5px;color:var(--text-muted);font-style:italic;padding:6px 2px}
/* made-ready badge on look-ahead task chips (no edge-strip; pill + dot signal) */
.fi-mr-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;background:color-mix(in srgb,var(--color-success) 15%,transparent);color:var(--color-success);margin-left:6px}
.fi-mr-badge.blocked{background:color-mix(in srgb,var(--color-warning) 16%,transparent);color:color-mix(in srgb,var(--color-warning) 82%,var(--text-primary))}
.fi-mr-badge.committed{background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent)}
/* Made-ready lookahead — activities × ready-state. Pills (not edge-strips) signal state; blocked rows
   are interactive (rounded hover lift, contained — no hard corners) per the design canon. */
.fi-mr-panel{padding:14px 16px;margin-top:12px}
.fi-mr-list{display:flex;flex-direction:column;gap:14px;margin-top:10px}
.fi-mr-week{display:flex;flex-direction:column;gap:5px}
.fi-mr-wkhead{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);margin-bottom:2px}
.fi-mr-wkrange{font-weight:600;text-transform:none;letter-spacing:0;color:var(--text-faint);margin-left:6px}
.fi-mr-row{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:11px;background:color-mix(in srgb,var(--surface-2) 60%,transparent);border:0.5px solid var(--chrome-border)}
.fi-mr-row.blk{cursor:pointer;transition:background .15s ease,transform .15s ease,box-shadow .15s ease}
.fi-mr-row.blk:hover{background:color-mix(in srgb,var(--color-warning) 9%,var(--surface-2));transform:translateY(-1px);box-shadow:var(--shadow-e1)}
.fi-mr-row.blk:focus-visible{outline:2px solid var(--app-accent);outline-offset:1px}
.fi-mr-task{font-size:13px;font-weight:600;color:var(--text-primary);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fi-mr-meta{font-size:11px;color:var(--text-muted);flex-shrink:0;max-width:38%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fi-mr-pill{font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:999px;flex-shrink:0;letter-spacing:.02em;white-space:nowrap}
.fi-mr-pill.ready{background:color-mix(in srgb,var(--color-success) 15%,transparent);color:var(--color-success)}
.fi-mr-pill.blocked{background:color-mix(in srgb,var(--color-warning) 16%,transparent);color:color-mix(in srgb,var(--color-warning) 82%,var(--text-primary))}
@media (max-width:640px){.fi-ppc-col{gap:4px}.fi-ppc-barwrap{height:80px}.fi-con-logdesc{flex:1 1 100%;order:2}.fi-con-logactions{order:1}.fi-mr-meta{max-width:30%}}

/* G3-P1 — slip groups are now raised V133 panels: add interior padding (panel chrome
   comes from .rt-panel-solid). */
.fi-slip-group{margin-bottom:14px;padding:15px 17px}
.fi-slip-group:last-child{margin-bottom:0}
/* Slip filter/org bar — severity segment + project select, on its own raised panel. */
.fi-slip-filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:11px 14px;margin-bottom:14px}
.fi-slip-seg{display:inline-flex;gap:3px;padding:3px;border-radius:11px;background:var(--surface-2)}
.fi-slip-segbtn{appearance:none;border:none;background:transparent;color:var(--text-secondary);font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:-.1px;padding:6px 13px;border-radius:8px;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
.fi-slip-segbtn:hover{color:var(--text-primary)}
.fi-slip-segbtn.active{background:var(--card-bg);color:var(--text-primary);box-shadow:var(--shadow-e1)}
.fi-slip-projsel{margin-left:auto;appearance:none;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--text-primary);background:var(--surface-2);border:.5px solid var(--chrome-border);border-radius:10px;padding:7px 30px 7px 12px;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'><path fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/></svg>");background-repeat:no-repeat;background-position:right 10px center;transition:box-shadow var(--motion-fast),border-color var(--motion-fast)}
.fi-slip-projsel:focus{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 22%,transparent);border-color:var(--app-accent)}
@media (max-width:640px){.fi-slip-projsel{margin-left:0;width:100%}}
.fi-slip-grouphead{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin:0 2px 9px;color:var(--text-secondary)}
.fi-slip-grouphead .fi-sev-dot{width:9px;height:9px;border-radius:50%}
.fi-slip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:11px}
.fi-slip-card{position:relative;background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-card,14px);
  padding:13px 15px;box-shadow:var(--shadow-e1);cursor:pointer;overflow:hidden;
  transition:box-shadow var(--motion-base) var(--ease-out),transform var(--motion-fast)}
.fi-slip-card:hover{box-shadow:var(--shadow-e3);transform:translateY(-2px)}
.fi-slip-card:active{transform:scale(.99)}
/* pass-2 G1: severity via tinted whole-card fill (NOT a left edge-spine — hard rule).
   The .fi-sev-dot in the card head + the severity pill already carry the color. */
.fi-slip-card.sev-critical{background:linear-gradient(160deg,color-mix(in srgb,var(--color-error) 9%,var(--card-bg)),var(--card-bg))}
.fi-slip-card.sev-high{background:linear-gradient(160deg,color-mix(in srgb,var(--color-error) 6%,var(--card-bg)),var(--card-bg))}
.fi-slip-card.sev-warning{background:linear-gradient(160deg,color-mix(in srgb,var(--color-warning) 8%,var(--card-bg)),var(--card-bg))}
.fi-slip-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.fi-slip-stage{font-size:15px;font-weight:700;letter-spacing:-.2px;color:var(--text-primary);line-height:1.25}
.fi-slip-proj{font-size:12px;color:var(--text-muted);margin-top:2px}
.fi-slip-pill{flex-shrink:0;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.fi-slip-pill.crit{background:var(--color-error-bg,color-mix(in srgb,var(--color-error) 13%,transparent));color:var(--color-error)}
.fi-slip-pill.warn{background:var(--color-warning-bg,color-mix(in srgb,var(--color-warning) 15%,transparent));color:color-mix(in srgb,var(--color-warning) 80%,var(--text-primary))}
.fi-slip-meta{display:flex;align-items:center;gap:14px;margin-top:11px;font-size:11.5px;color:var(--text-muted)}
.fi-slip-prog{flex:1;height:6px;border-radius:999px;background:var(--surface-3);overflow:hidden;min-width:60px}
.fi-slip-prog > i{display:block;height:100%;border-radius:999px;background:var(--app-accent);transition:width var(--motion-slow) var(--ease-out)}
.fi-slip-pct{font-variant-numeric:tabular-nums;font-weight:600;color:var(--text-secondary)}

/* G3-P1 — crew/weather panels raised to V133. Interior padding (panel chrome from
   .rt-panel-solid). The forecast band keeps its strip's bottom margin tidy. */
.fi-crew-panel{padding:15px 17px}
.fi-wx-band{padding:15px 17px 5px;margin-bottom:14px}
.fi-wx-band .fi-wx-strip,.fi-wx-band .fi-wx-banner:last-child{margin-bottom:9px}
.fi-wx-stages{padding:15px 17px 6px}
.fi-wx-stages .fi-wx-stage:last-child{margin-bottom:0}

/* Crew load heatmap */
.fi-heat-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 2px 12px;font-size:12px;color:var(--text-muted)}
.fi-heat-scale{display:inline-flex;align-items:center;gap:5px}
.fi-heat-swatch{width:14px;height:14px;border-radius:4px;border:0.5px solid var(--chrome-border)}
.fi-heat-wrap{overflow-x:auto;background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-card,14px);
  box-shadow:var(--shadow-e2);padding:4px}
.fi-heat-grid{border-collapse:separate;border-spacing:3px;width:100%}
.fi-heat-grid th{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--text-muted);padding:6px 4px;text-align:center;white-space:nowrap}
.fi-heat-grid th.fi-heat-corner{text-align:left;min-width:150px;padding-left:10px}
.fi-heat-grid th.fi-heat-now{color:var(--app-accent)}
.fi-heat-rowlbl{font-size:12.5px;font-weight:600;color:var(--text-primary);padding:6px 10px 6px 8px;white-space:nowrap;cursor:pointer;border-radius:8px;display:flex;align-items:center;gap:7px;transition:background var(--motion-fast)}
.fi-heat-rowlbl:hover{background:var(--surface-2)}
.fi-heat-rowdot{width:9px;height:9px;border-radius:3px;flex-shrink:0}
.fi-heat-cell{height:44px;min-width:56px;border-radius:8px;cursor:pointer;position:relative;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--text-primary);background:var(--surface-2);border:0.5px solid color-mix(in srgb,var(--chrome-border) 70%,transparent);
  transition:transform var(--motion-fast),box-shadow var(--motion-fast)}
.fi-heat-cell.fut{border-style:dashed}
.fi-heat-cell.zero{color:var(--text-muted);font-weight:500;opacity:.55}
.fi-heat-cell:hover{transform:scale(1.06);box-shadow:var(--shadow-e2);z-index:2}
.fi-heat-cell .fi-heat-sub{position:absolute;bottom:3px;right:5px;font-size:8.5px;font-weight:600;opacity:.62}

/* Safety compliance — feature #7 (OSHA-style rollup + activity heat-map + non-conformance). */
.sfy-wrap{margin:0 0 12px}
.sfy-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:9px;margin-bottom:12px}
.sfy-stat{background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-card,14px);
  box-shadow:var(--shadow-e1,var(--shadow-e2));padding:11px 13px}
.sfy-stat-val{font-size:21px;font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.sfy-stat-val.good{color:var(--color-success,#16a34a)}
.sfy-stat-val.warn{color:var(--color-warning,#d97706)}
.sfy-stat-val.bad{color:var(--color-error,#dc2626)}
.sfy-stat-lbl{font-size:11px;font-weight:600;color:var(--text-muted);margin-top:3px;letter-spacing:.01em}
.sfy-heat{background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-card,14px);
  box-shadow:var(--shadow-e1,var(--shadow-e2));padding:12px 13px;margin-bottom:12px}
.sfy-heat-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.sfy-heat-title{font-size:12px;font-weight:700;color:var(--text-secondary);letter-spacing:.02em}
.sfy-heat-legend{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:var(--text-muted)}
.sfy-heat-sw{width:11px;height:11px;border-radius:3px;border:0.5px solid var(--chrome-border)}
.sfy-heat-grid{display:flex;gap:4px;overflow-x:auto;padding-bottom:2px}
.sfy-heat-wk{display:flex;flex-direction:column;gap:4px}
.sfy-heat-cell{width:15px;height:15px;border-radius:4px;background:var(--surface-2);
  border:0.5px solid color-mix(in srgb,var(--chrome-border) 70%,transparent);cursor:default;transition:transform var(--motion-fast)}
.sfy-heat-cell:hover{transform:scale(1.22);z-index:2;box-shadow:var(--shadow-e2)}
.sfy-heat-cell.l1{background:color-mix(in srgb,var(--color-success,#16a34a) 32%,var(--surface-2))}
.sfy-heat-cell.l2{background:color-mix(in srgb,var(--color-success,#16a34a) 58%,var(--surface-2))}
.sfy-heat-cell.l3{background:color-mix(in srgb,var(--color-success,#16a34a) 82%,transparent)}
.sfy-heat-cell.l4{background:var(--color-success,#16a34a)}
.sfy-heat-cell.inc{background:var(--color-error,#dc2626);box-shadow:0 0 0 1px color-mix(in srgb,var(--color-error,#dc2626) 50%,transparent)}
.sfy-nc{margin-bottom:6px}
.sfy-nc-title{font-size:12px;font-weight:700;color:var(--color-error,#dc2626);margin:0 2px 7px;display:flex;align-items:center;gap:6px}
.sfy-nc-title svg{width:14px;height:14px}
/* G5-W3 — incident-only OSHA-recordable fields (revealed when kind=incident). Contained
   tint via fill (no edge-strip), rounded, fits the field-grid. */
.sfy-inc-fields{background:color-mix(in srgb,var(--color-error,#dc2626) 6%,var(--card-bg));border:0.5px solid color-mix(in srgb,var(--color-error,#dc2626) 24%,var(--chrome-border));border-radius:var(--radius-card,14px);padding:13px 15px;margin-top:4px}
.sfy-inc-fields[hidden]{display:none}
.sfy-inc-head{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:color-mix(in srgb,var(--color-error,#dc2626) 78%,var(--text-primary));margin-bottom:11px}
.sfy-inc-ico{width:14px;height:14px;flex-shrink:0;color:var(--color-error,#dc2626)}
.sfy-inc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.sfy-inc-lbl{display:flex;flex-direction:column;gap:4px;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted)}
.sfy-inc-lbl .field-input{text-transform:none;font-weight:500;letter-spacing:normal}
.sfy-inc-wide{grid-column:1/-1}
@media (max-width:560px){ .sfy-inc-grid{grid-template-columns:1fr 1fr} .sfy-inc-wide{grid-column:1/-1} }
/* OSHA 300 log panel — floating .rt-panel on a matte overlay; rounded status pills (fill, no strip). */
.osha-overlay{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:20px;background:color-mix(in srgb,var(--scrim,rgba(15,18,24,.5)) 100%,transparent);opacity:1}
.osha-panel{width:min(960px,100%);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;padding:0}
.osha-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px 14px;flex:0 0 auto}
.osha-title{font-size:17px;font-weight:750;color:var(--text-primary);display:flex;align-items:center;gap:9px}
.osha-title svg{width:18px;height:18px;color:var(--color-error,#dc2626)}
.osha-sub{font-size:12px;color:var(--text-muted);margin-top:2px}
.osha-close{background:var(--surface-2);border:0.5px solid var(--chrome-border);border-radius:999px;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-secondary);transition:background var(--motion-fast),transform var(--motion-fast)}
.osha-close:hover{background:var(--surface);transform:scale(1.06)}
.osha-close svg{width:14px;height:14px}
.osha-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:9px;padding:0 22px 14px;flex:0 0 auto}
.osha-stat{background:var(--surface-2);border:0.5px solid var(--chrome-border);border-radius:12px;padding:10px 12px;text-align:center}
.osha-stat-val{font-size:21px;font-weight:750;color:var(--text-primary);font-variant-numeric:tabular-nums}
.osha-stat-val.bad{color:var(--color-error,#dc2626)}
.osha-stat-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);margin-top:2px}
.osha-scroll{flex:1;min-height:0;overflow:auto;padding:0 22px 22px}
.osha-table{width:100%;border-collapse:collapse;font-size:12.5px}
.osha-table th{text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);padding:8px 10px;border-bottom:1px solid var(--chrome-border);position:sticky;top:0;background:var(--card-bg);z-index:1}
.osha-table td{padding:9px 10px;border-bottom:0.5px solid color-mix(in srgb,var(--chrome-border) 60%,transparent);color:var(--text-secondary);vertical-align:top}
.osha-table tr:hover td{background:color-mix(in srgb,var(--surface-2) 60%,transparent)}
.osha-rec{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:999px;white-space:nowrap}
.osha-rec.recordable{background:color-mix(in srgb,var(--color-warning,#d97706) 18%,transparent);color:color-mix(in srgb,var(--color-warning,#d97706) 82%,var(--text-primary))}
.osha-rec.lost_time{background:color-mix(in srgb,var(--color-error,#dc2626) 16%,transparent);color:color-mix(in srgb,var(--color-error,#dc2626) 84%,var(--text-primary))}
.osha-rec.fatality{background:var(--color-error,#dc2626);color:#fff}
.osha-st{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--text-secondary)}
.osha-st.open,.osha-st.investigating,.osha-st.corrective{background:color-mix(in srgb,var(--color-warning,#d97706) 16%,transparent);color:color-mix(in srgb,var(--color-warning,#d97706) 82%,var(--text-primary))}
.osha-st.closed{background:color-mix(in srgb,var(--color-success,#16a34a) 16%,transparent);color:color-mix(in srgb,var(--color-success,#16a34a) 80%,var(--text-primary))}
.osha-empty{padding:38px 20px;text-align:center;color:var(--text-muted);font-size:13px}

/* Weather-aware schedule */
.fi-wx-banner{display:flex;align-items:center;gap:11px;padding:13px 16px;border-radius:var(--radius-card,14px);margin-bottom:14px;
  background:color-mix(in srgb,var(--color-info) 9%,var(--card-bg));border:0.5px solid color-mix(in srgb,var(--color-info) 26%,var(--chrome-border));font-size:13px;color:var(--text-secondary)}
.fi-wx-banner svg{width:18px;height:18px;flex-shrink:0;color:var(--color-info)}
.fi-wx-banner b{color:var(--text-primary)}
.fi-wx-strip{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;margin-bottom:14px}
.fi-wx-day{flex:0 0 auto;width:84px;background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:12px;padding:10px 9px;text-align:center;box-shadow:var(--shadow-e1);transition:box-shadow var(--motion-base),transform var(--motion-fast)}
.fi-wx-day:hover{box-shadow:var(--shadow-e2);transform:translateY(-2px)}
.fi-wx-day.risk{border-color:color-mix(in srgb,var(--color-warning) 50%,var(--chrome-border));background:color-mix(in srgb,var(--color-warning) 7%,var(--card-bg))}
.fi-wx-dow{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
.fi-wx-emoji{font-size:22px;line-height:1.3;margin:2px 0;display:inline-flex}
.fi-wx-emoji .wx-svg{width:22px;height:22px;stroke:currentColor;fill:none;color:var(--app-accent)}
.fi-wx-temp{font-size:12.5px;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums}
.fi-wx-temp .lo{color:var(--text-muted);font-weight:500}
.fi-wx-riskpills{display:flex;flex-direction:column;gap:3px;margin-top:5px}
.fi-wx-riskpill{font-size:9px;font-weight:700;padding:1px 5px;border-radius:999px;background:var(--color-warning-bg,color-mix(in srgb,var(--color-warning) 16%,transparent));color:color-mix(in srgb,var(--color-warning) 82%,var(--text-primary))}
.fi-wx-stage{background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-card,14px);padding:13px 15px;box-shadow:var(--shadow-e1);margin-bottom:10px;cursor:pointer;transition:box-shadow var(--motion-base),transform var(--motion-fast)}
.fi-wx-stage:hover{box-shadow:var(--shadow-e3);transform:translateY(-2px)}
.fi-wx-stage.risk{background:linear-gradient(160deg,color-mix(in srgb,var(--color-warning) 11%,var(--card-bg)),var(--card-bg) 70%);box-shadow:var(--shadow-e1),inset 0 0 0 .5px color-mix(in srgb,var(--color-warning) 28%,transparent)}
.fi-wx-stage-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fi-wx-stage-name{font-size:14.5px;font-weight:700;color:var(--text-primary);letter-spacing:-.2px}
.fi-wx-stage-proj{font-size:12px;color:var(--text-muted);margin-top:2px}
.fi-wx-stage-days{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.fi-wx-stage-daypill{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--color-warning-bg,color-mix(in srgb,var(--color-warning) 14%,transparent));color:color-mix(in srgb,var(--color-warning) 80%,var(--text-primary))}
.fi-wx-ok-pill{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--color-success-bg,color-mix(in srgb,var(--color-success) 13%,transparent));color:color-mix(in srgb,var(--color-success) 72%,var(--text-primary))}

/* Voice daily-log button (extends the dl-mic button family) */
.dl-voicelog-btn{display:inline-flex;align-items:center;gap:7px}
/* F3 — Talk-the-Day Smart Fill modal (reuses the .rt-confirm-overlay scrim). */
.dl-smartfill-panel{max-width:520px;width:calc(100vw - 32px)}
.dl-sf-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.dl-sf-ico{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:color-mix(in srgb,var(--app-accent) 16%,transparent);color:var(--app-accent)}
.dl-sf-ico svg{width:18px;height:18px}
.dl-sf-title{font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary)}
.dl-sf-sub{font-size:12.5px;color:var(--text-muted);line-height:1.45;margin-top:2px}
.dl-sf-text{width:100%;resize:vertical;min-height:110px;font-size:14px;line-height:1.5}
.dl-sf-actions{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.dl-sf-nohint{font-size:11.5px;color:var(--text-muted)}
.dl-sf-status{margin-top:10px;font-size:12.5px;color:var(--text-muted);display:flex;align-items:center;gap:6px}
.dl-sf-status[hidden]{display:none}

@media (max-width: 640px) {
  .fi-page{padding:12px 10px;max-width:100%}
  .fi-hero-title{font-size:21px}
  .fi-seg{width:100%;overflow-x:auto;justify-content:flex-start}
  .fi-seg-btn span:not(.fi-seg-badge){display:none}
  .fi-seg-btn{padding:9px 13px}
  .fi-slip-grid{grid-template-columns:1fr}
}
@media (max-width: 640px) {
  .la-page{padding:12px 10px;max-width:100%}
  .la-row{padding:11px 12px;flex-wrap:wrap}
  .la-row-meta{flex-basis:100%;margin-left:32px;max-width:none;font-size:11px}
}

@media (max-width: 1024px) {
  .cal-page{padding:12px 10px}
  .cal-cell{min-height:56px;padding:4px 4px}
  .cal-pill{display:none}
  .cal-cell.has-items::after{content:'●';font-size:10px;color:var(--app-accent);position:absolute;bottom:4px;left:50%;transform:translateX(-50%)}
  .cal-legend{display:none}
  .cal-month-label{min-width:100px}
}
/* ── Calendar mobile (Task 2.3) ──
   At 480–640px: keep the 7-col month grid but with comfortable tap targets and
   legible type. At ≤480px: switch to a single-column agenda — each non-empty
   day becomes a full-width row with a date header + a vertical stack of items.
   Empty days and other-month cells are hidden so the agenda stays dense.
   Desktop (>640px) and ≤1024px tablet rules are untouched. */
@media (max-width: 640px) {
  /* Header: stack title + nav so the controls have room to breathe and
     remain reachable at tap-min size. */
  .cal-page{padding:var(--space-3) var(--mobile-gutter) var(--space-5);gap:var(--space-2)}
  .cal-header{align-items:stretch;gap:var(--space-2)}
  .cal-title{flex:0 0 100%;margin-right:0;font-size:17px}
  .cal-nav{flex-wrap:wrap;gap:var(--space-2);width:100%}
  .cal-nav-btn{
    min-width:var(--tap-min);min-height:var(--tap-min);
    width:auto;height:auto;
    padding:0 var(--space-3);
    font-size:17px;
  }
  .cal-today-btn{
    min-height:var(--tap-min);
    padding:0 var(--space-4);
    font-size:14px;
  }
  /* Day/week toggle: scrollable strip with snap, each button tap-min height */
  .cal-mode-toggle{
    margin-left:0;
    padding:3px;
    scroll-snap-type:x proximity;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .cal-mode-btn{
    scroll-snap-align:start;
    min-height:var(--tap-min);
    padding:0 var(--space-4);
    font-size:13px;
  }
  /* 2026-05-17 📘 V26 — lift inactive cal-mode-btn contrast on phones.
     Base rule uses var(--text-muted) which on mobile reads as too pale
     against the surface-2 toggle bg. Use text-secondary instead — still
     muted vs primary text but visibly inactive. */
  .cal-mode-btn:not(.active){color:var(--text-secondary)}
  /* 2026-05-17 📘 V26 — cal-nav prev/next chevron buttons were getting
     clipped by the page edge when the parent cal-nav row ran tight.
     Add a small left/right padding buffer on .cal-nav so the buttons
     never sit flush against the page edge. */
  .cal-nav{padding:0 2px}
  .cal-month-label{flex:1;min-width:0;font-size:15px;text-align:center}
  .cal-project-filter{height:var(--tap-min);font-size:14px;padding:0 26px 0 var(--space-3)}
  /* Month grid: comfortable cells with legible day number. Pills stay hidden
     (≤1024px rule keeps that) — the per-day dot indicator does the work. */
  .cal-grid-wrap{padding:var(--space-2)}
  .cal-cell{min-height:var(--tap-min);padding:var(--space-1) var(--space-1)}
  .cal-day-num{font-size:13px;font-weight:600;margin-bottom:2px}
  .cal-today .cal-day-num{width:24px;height:24px;font-size:12px}
  .cal-dow{font-size:10px;padding:6px 0 6px}
}
/* Agenda mode is reserved for the narrowest phones (below the 414px iPhone
   Plus width). 414–640px keeps the compact month grid above. */
@media (max-width: 413px) {
  /* Agenda mode — flip the month grid to a single-column vertical list. */
  .cal-grid-header{display:none}
  .cal-grid-wrap{
    background:transparent;
    box-shadow:none;
    padding:0;
    border-radius:0;
  }
  .cal-grid{
    display:block;
    grid-template-columns:none;
    gap:0;
    border-top:none;
  }
  /* Hide other-month spillover and empty days so the agenda is dense. */
  .cal-cell.cal-other-month,
  .cal-cell:not(.has-items){display:none}
  /* Each remaining cell becomes a full-width agenda card. */
  .cal-cell{
    display:block;
    width:100%;
    min-height:0;
    margin-bottom:var(--space-2);
    padding:var(--space-3);
    background:var(--card-bg);
    border:0.5px solid var(--chrome-border);
    border-right:0.5px solid var(--chrome-border);
    border-bottom:0.5px solid var(--chrome-border);
    border-radius:var(--radius-md);
    box-shadow:0 1px 2px rgba(0,0,0,.04);
  }
  .cal-cell:nth-child(7n){border-right:0.5px solid var(--chrome-border)}
  .cal-cell.cal-today{
    background:color-mix(in srgb,var(--app-accent) 6%,var(--card-bg));
    box-shadow:0 0 0 1px var(--app-accent),0 1px 2px rgba(0,0,0,.04);
  }
  /* Suppress the bottom-center overflow dot — pills are visible now. */
  .cal-cell.has-items::after{display:none}
  /* Day number becomes the agenda row header. */
  .cal-day-num{
    font-size:13px;
    font-weight:700;
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:.4px;
    margin-bottom:var(--space-2);
  }
  .cal-today .cal-day-num{
    width:auto;height:auto;
    background:transparent;
    color:var(--app-accent);
    border-radius:0;
    padding:0;
    display:inline;
    font-size:13px;
  }
  /* Re-show pills (the ≤1024px rule hides them). Stack them as agenda rows. */
  .cal-pills{gap:var(--space-1)}
  .cal-pill{
    display:flex;
    align-items:center;
    font-size:13px;
    line-height:1.35;
    padding:8px 10px;
    border-radius:var(--radius-md);
    min-height:var(--tap-min);
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    box-sizing:border-box;
  }
  .cal-pill .cal-pill-dot{
    width:8px;height:8px;
    margin-right:8px;vertical-align:0;
  }
  .cal-overflow{font-size:12px;margin-top:var(--space-1);padding-left:0}
}
/* ── Gantt Timeline ────────────────────────────────────────── */
.gantt-page{display:flex;flex-direction:column;gap:14px;max-width:1600px;margin:0 auto;padding:12px;overflow-y:auto;width:100%;box-sizing:border-box;flex:1;min-height:0}
.gantt-header{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:0 2px}
.gantt-title{font-size:18px;font-weight:700;color:var(--on-app-bg);letter-spacing:-0.3px;flex:1;margin:0}
/* V39kk — gantt-nav-btn: Apple press feedback */
.gantt-nav-btn{background:var(--chrome-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-sm);padding:5px 11px;font-size:14px;cursor:pointer;color:var(--text-primary);line-height:1;transition:background var(--motion-fast),transform var(--motion-fast);font-family:inherit;font-weight:600}
.gantt-nav-btn:hover{background:var(--chrome-bg-hover)}
.gantt-nav-btn:active{transform:scale(.94)}
/* V39o — Gantt "Today" button gets .btn-primary motion + glass top-edge */
.gantt-today-btn{background:var(--app-accent);color:var(--on-accent);border:none;border-radius:var(--radius-btn-sm,8px);padding:5px 16px;font-size:13px;font-weight:600;cursor:pointer;letter-spacing:-.05px;transition:opacity var(--motion-fast),transform var(--motion-fast),box-shadow var(--motion-fast);box-shadow:0 1px 2px rgba(0,0,0,.08),inset 0 0 0 0.5px rgba(255,255,255,.16)}
.gantt-today-btn:hover{opacity:.92}
.gantt-today-btn:active{transform:scale(.97);opacity:1}
.gantt-range-label{font-size:13px;font-weight:600;color:color-mix(in srgb,var(--on-app-bg) 78%,transparent);min-width:160px;text-align:center}
.gantt-legend{display:flex;align-items:center;gap:14px;margin-left:auto;flex-wrap:wrap}
.gantt-legend-item{display:flex;align-items:center;gap:5px;font-size:12px;color:color-mix(in srgb,var(--on-app-bg) 70%,transparent)}
.gantt-legend-bar{width:20px;height:8px;border-radius:var(--radius-xs)}
.gantt-legend-dot{width:8px;height:8px;border-radius:50%}
.gantt-wrap{overflow-x:auto;border:none;border-radius:var(--radius-lg);background:var(--surface-grad);box-shadow:var(--bevel-top),var(--shadow-e2)}
.gantt-inner{min-width:700px}
.gantt-cols-header{display:flex;border-bottom:0.5px solid var(--chrome-border)}
.gantt-label-col{width:200px;min-width:200px;padding:8px 14px;font-size:11px;font-weight:600;color:var(--text-muted);letter-spacing:.04em;text-transform:uppercase;border-right:0.5px solid var(--chrome-border);flex-shrink:0}
.gantt-timeline-header{flex:1;position:relative;overflow:hidden;height:34px}
.gantt-month-tick{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center}
.gantt-month-label{font-size:11px;font-weight:600;color:var(--text-muted);padding-left:6px;white-space:nowrap}
.gantt-month-line{position:absolute;top:0;bottom:0;width:1px;background:var(--border)}
.gantt-row{display:flex;border-bottom:0.5px solid color-mix(in srgb, var(--text-primary) 8%, transparent);align-items:stretch;cursor:pointer;transition:background var(--motion-fast)}
.gantt-row:last-child{border-bottom:none}
.gantt-row:hover{background:var(--surface-2);border-radius:var(--radius-sm)}
/* V39eeeee — gantt-row press feedback */
.gantt-row:active{background:var(--surface-3);border-radius:var(--radius-sm)}
.gantt-row.gantt-selected{background:var(--surface-2);border-radius:var(--radius-sm)}
.gantt-row-label{width:200px;min-width:200px;padding:10px 14px;border-right:0.5px solid var(--chrome-border);flex-shrink:0;display:flex;flex-direction:column;justify-content:center;gap:3px}
.gantt-row-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gantt-row-phase{font-size:10px;color:var(--text-muted);font-weight:500;text-transform:capitalize}
.gantt-timeline-cell{flex:1;position:relative;min-height:44px;overflow:visible}
/* Pass-2 (proto 05) — prominent today line + a dated pill at the top. */
.gantt-today-line{position:absolute;top:0;bottom:0;width:2px;background:var(--app-accent);opacity:.85;z-index:2;pointer-events:none}
/* date pill only on the first row's today line (data-today set there only) so it
   doesn't repeat down every row. Pinned INSIDE the first cell's top (top:2px, not a
   negative overflow) so it's never clipped by .gantt-wrap's implicit overflow-y:auto. */
.gantt-today-line[data-today]::after{content:attr(data-today);position:absolute;top:2px;left:50%;transform:translateX(-50%);font-size:9px;font-weight:800;letter-spacing:.02em;color:#fff;background:var(--app-accent);padding:1px 6px;border-radius:999px;white-space:nowrap;box-shadow:0 2px 6px -2px color-mix(in srgb,var(--app-accent) 60%,transparent);z-index:5}
.gantt-bar{position:absolute;top:50%;transform:translateY(-50%);height:14px;border-radius:var(--radius-sm);z-index:1;opacity:.9;transition:opacity var(--motion-fast),transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
/* Pass-2 — project-span bar at proto material caliber: 20px pill, crisp specular bevel
   (light top edge + dark bottom edge) + soft drop shadow; spring lift on hover. The phase
   gradient is applied inline by the renderer (color carries phase identity — no edge-strip). */
.gantt-bar-proj{height:20px;border-radius:8px;opacity:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.15),0 3px 8px -3px color-mix(in srgb,var(--app-bg) 40%,rgba(0,0,0,.26))}
.gantt-row:hover .gantt-bar-proj{transform:translateY(-50%) scale(1.01);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.18),0 8px 20px -6px color-mix(in srgb,var(--app-bg) 26%,rgba(0,0,0,.34))}
.gantt-row:hover .gantt-bar{opacity:1}
.gantt-bar-undated{background:var(--surface-2);border:1px dashed var(--border);left:0;right:0;height:6px}
.gantt-task-marker{position:absolute;top:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;z-index:3;border:2px solid var(--card-bg)}
.gantt-task-overdue{background:var(--cal-overdue-dot)}
.gantt-task-due{background:var(--cal-due-dot)}
.gantt-task-upcoming{background:var(--cal-upcoming-dot)}
/* V138 — "No dates set" was near-invisible faint italic abutting the row edge. Make it a legible
   quiet chip (readable text on a faint surface pill, inset from the edge) so the undated state
   reads as an intentional, crafted empty affordance rather than ghost text. */
.gantt-no-date{font-size:10.5px;font-weight:500;color:var(--text-secondary,var(--text-muted));position:absolute;left:12px;top:50%;transform:translateY(-50%);background:color-mix(in srgb,var(--text-primary) 6%,var(--card-bg));border:0.5px solid color-mix(in srgb,var(--text-primary) 10%,transparent);padding:2px 9px;border-radius:var(--radius-pill);letter-spacing:-.05px;white-space:nowrap;pointer-events:none}
.gantt-detail{background:var(--card-bg);border:0.5px solid var(--chrome-border);border-radius:var(--radius-lg);padding:14px 18px;box-shadow:var(--shadow-e2)}
.gantt-detail-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.gantt-detail-close{background:none;border:none;font-size:16px;color:var(--text-muted);cursor:pointer;margin-left:auto;line-height:1}
.gantt-detail-meta{font-size:12px;color:var(--text-muted);margin-bottom:10px}
.gantt-task-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:0.5px solid var(--chrome-border)}
.gantt-task-row:last-child{border-bottom:none}
.gantt-task-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.gantt-task-text{flex:1;font-size:13px;color:var(--text);font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gantt-task-date{font-size:11px;color:var(--text-muted);flex-shrink:0}
.gantt-task-assignee{font-size:11px;color:var(--text-muted);flex-shrink:0}
.gantt-empty{text-align:center;color:var(--text-muted);font-size:13px;padding:32px 0}
/* ── Real Timeline (Phases + Portfolio modes) ── */
.tl-frame{padding:10px}
/* V39wwww — tl-row smooth transition */
.tl-row{display:flex;align-items:center;border-bottom:0.5px solid var(--chrome-border);position:relative;transition:background var(--motion-fast)}
.tl-row:hover{background:var(--chrome-bg-hover)}
.tl-row-label{width:170px;flex-shrink:0;font-size:12px;font-weight:600;color:var(--text-primary);padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-row-bars{position:relative;height:100%;flex:1;min-width:200px}
.tl-bar{position:absolute;top:8px;height:18px;border-radius:var(--radius-xs);color:var(--on-accent);font-size:10.5px;font-weight:600;letter-spacing:-.05px;line-height:18px;padding:0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.06);transition:transform var(--motion-fast)}
.tl-bar:hover{transform:translateY(-1px);opacity:.92}
.tl-bar:active{transform:translateY(0) scale(.995);opacity:1}
.tl-phase-bar{cursor:default}
.tl-bar.tl-draggable{cursor:grab}
.tl-bar.tl-draggable:active{cursor:grabbing}
.tl-bar.tl-bar-dragging{opacity:0.6;cursor:grabbing;z-index:30;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.tl-dep-handle{position:absolute;right:2px;top:50%;transform:translateY(-50%);width:14px;height:14px;background:rgba(255,255,255,0.85);color:var(--text-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:crosshair;font-weight:700;line-height:1;user-select:none}
.tl-dep-handle:hover{background:var(--card-bg);transform:translateY(-50%) scale(1.15)}
.tl-phase-bar.tl-dep-target.tl-dep-hover{outline:2px solid var(--app-accent);outline-offset:2px}
.tl-frame.tl-mode-dependencies .tl-arrow-clickable .tl-arrow-hit{cursor:pointer}
.tl-frame.tl-mode-dependencies .tl-arrow-clickable:hover path:first-of-type{stroke:var(--app-accent)}
.tl-bar-fill{position:absolute;top:0;left:0;bottom:0;background:rgba(0,0,0,.18);border-radius:var(--radius-xs) 0 0 3px}
.tl-bar-label{position:relative;z-index:1}
.tl-task-bar{background:var(--app-accent);border-radius:var(--radius-xs);cursor:pointer;font-size:9.5px;line-height:14px;height:14px;padding:0 4px;color:var(--on-accent);box-shadow:0 1px 2px rgba(0,0,0,.1)}
.tl-task-bar.tl-done{background:var(--ok);opacity:.7}
.tl-task-bar:hover{opacity:.92}
.tl-task-bar:active{transform:scale(.99);opacity:1}
.tl-today-line{z-index:10}
.tl-dep-layer path{opacity:.7}
/* Per-project schedule (WBS) view */
.gantt-project-picker{background:var(--surface-2);border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);padding:5px 10px;font-size:13px;color:var(--text);cursor:pointer;max-width:240px;outline:none;transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}
.gantt-project-picker:focus-visible{outline:none;border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--app-accent) 22%, transparent)}
.gantt-import-btn,.gantt-clear-btn{background:var(--surface-2);border:0.5px solid var(--chrome-border);border-radius:var(--radius-md);padding:5px 12px;font-size:12px;font-weight:600;color:var(--text);cursor:pointer;transition:background var(--motion-base)}
.gantt-import-btn:hover{background:var(--app-accent);color:var(--on-accent);border-color:var(--app-accent)}
.gantt-clear-btn:hover{background:var(--app-danger);color:var(--on-accent);border-color:var(--app-danger)}
.gantt-row-task .gantt-row-label{padding:6px 14px}
.gantt-row-task .gantt-timeline-cell{min-height:28px}
.gantt-row-task .gantt-row-name{font-weight:500;font-size:12px}
.gantt-row-summary .gantt-row-name{font-weight:600;font-size:12px;color:var(--text)}
.gantt-row-wbs{font-size:10px;color:var(--text-muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.gantt-bar-summary{position:absolute;top:50%;transform:translateY(-50%);height:8px;background:var(--text);opacity:.85;z-index:1;border-radius:0;clip-path:polygon(0 0,100% 0,100% 60%,calc(100% - 5px) 100%,5px 100%,0 60%)}
.gantt-bar-task{position:absolute;top:50%;transform:translateY(-50%);height:14px;border-radius:var(--radius-sm);background:var(--app-accent);opacity:.7;z-index:1}
.gantt-bar-task .gantt-bar-progress{position:absolute;left:0;top:0;bottom:0;background:var(--app-accent);opacity:1;border-radius:var(--radius-sm) 0 0 7px}
.gantt-bar-task.gantt-bar-complete{background:var(--ok)}
/* Ship 3 (2026-05-15 cont. 19 bundle-2) — critical path highlight */
.gantt-bar-task.gantt-bar-critical{background:var(--color-error);opacity:1;box-shadow:0 0 0 1px color-mix(in srgb,var(--color-error) 45%,transparent),0 2px 6px color-mix(in srgb,var(--color-error) 28%,transparent)}
.gantt-bar-task.gantt-bar-critical .gantt-bar-progress{background:color-mix(in srgb,var(--color-error) 78%,#000)}
.gantt-dep-line.gantt-dep-critical{stroke:var(--color-error);stroke-width:1.8;opacity:1}
.gantt-dep-svg{position:absolute;top:0;left:200px;right:0;bottom:0;pointer-events:none;z-index:4;overflow:visible}
.gantt-dep-line{stroke:var(--text-muted);stroke-width:1.2;fill:none;opacity:.7}
.gantt-rows-with-deps{position:relative}
@media (max-width: 640px) {.gantt-dep-svg{left:120px}}
@media (max-width: 480px) {.gantt-dep-svg{left:90px}}
/* ── Recurring Tasks view ── */
/* pass-3 (_STANDARD.md A): full-width matte (was max-width:1400px centered). */
.recur-page{padding:12px;display:flex;flex-direction:column;gap:14px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;width:100%;box-sizing:border-box;flex:1;min-height:0}
.recur-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:0 2px}
.recur-title{font-size:18px;font-weight:700;color:var(--on-app-bg);letter-spacing:-.3px;display:inline-flex;align-items:center;gap:8px}
.recur-title .rt-ico{width:18px;height:18px;color:var(--app-accent);opacity:.9}
/* ── Recurring pass-2 (2026-06-04): cad-tile metric-doors + rec-card list. The summary bar
   becomes a 5-up tile grid; the table-wrap becomes a plain container for the card list. ── */
.recur-summary-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
#recurringView .cad-tile{position:relative;border-radius:16px;padding:15px 16px;overflow:hidden;text-align:left;background:var(--card-bg);box-shadow:var(--bevel-top),var(--shadow-e1);border:.5px solid rgba(0,0,0,.05);cursor:pointer;font:inherit}
#recurringView .cad-tile.t-tot{background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 16%,var(--card-bg)),var(--card-bg))}
#recurringView .cad-tile .ct-l{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
#recurringView .cad-tile .ct-v{font-size:30px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1;margin:5px 0 2px;color:var(--text-primary)}
#recurringView .cad-tile .ct-s{font-size:11.5px;color:var(--text-secondary);font-weight:600}
/* pass-3 AUDIT FIX: explicit accent color so the SVG icon (stroke:currentColor) is visible on ALL themes — without this it resolved to BLACK (invisible on dark-theme badges). Emoji had its own color; SVG needs this. */
#recurringView .cad-tile .ct-ico{position:absolute;top:13px;right:13px;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--text-primary) 6%,var(--card-bg));font-size:13px;color:var(--app-accent)}
#recurringView .cad-tile.t-over .ct-ico{color:var(--color-warning)}
#recurringView .cad-tile.t-over .ct-v{color:var(--color-error)}
.recur-table-wrap{background:transparent;border-radius:0;overflow:visible;box-shadow:none}
/* rec-card list */
#recurringView .sec-label{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin:24px 0 12px}
#recurringView .rec-list{display:flex;flex-direction:column;gap:12px}
#recurringView .rec-card{border-radius:16px;padding:16px 18px;display:flex;align-items:center;gap:16px;background:var(--card-bg);box-shadow:var(--bevel-top),var(--shadow-e1);border:.5px solid rgba(0,0,0,.05);position:relative;overflow:hidden;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
#recurringView .rec-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-e3)}
/* overdue row highlight (the Overdue tile toggles an overdue-only list; rows also self-mark) */
#recurringView .rec-card.overdue{box-shadow:var(--bevel-top),var(--shadow-e1),inset 0 0 0 1px color-mix(in srgb,var(--color-error) 30%,transparent)}
#recurringView .cad-tile.t-over.on{box-shadow:var(--bevel-top),var(--shadow-e2),inset 0 0 0 1.5px color-mix(in srgb,var(--color-error) 45%,transparent)}
#recurringView .rc-ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#fff;font-size:19px;flex-shrink:0;background:linear-gradient(160deg,color-mix(in srgb,var(--cc) 84%,#fff),var(--cc));box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 10px -4px var(--cc)}
/* pass-3 (_STANDARD.md C): SVG sprite-icon sizing for the recurring tiles/cards (sprite = stroke:currentColor, viewBox 0 0 16 16). */
#recurringView .ic{stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
#recurringView .rc-ico .ic{width:22px;height:22px}
#recurringView .cad-tile .ct-ico .ic{width:15px;height:15px}
#recurringView .cad-chip .ic{width:13px;height:13px;vertical-align:-2px}
#recurringView .rc-meta .m-ico .ic{width:12px;height:12px;vertical-align:-1px}
#recurringView .rec-empty .em-ico .ic{width:30px;height:30px}
#recurringView .rc-body{flex:1;min-width:0}
#recurringView .rc-title{font-size:15.5px;font-weight:800;letter-spacing:-.015em;color:var(--text-primary)}
#recurringView .rc-meta{display:flex;align-items:center;gap:14px;margin-top:6px;flex-wrap:wrap;font-size:11.5px;color:var(--text-muted);font-weight:600}
#recurringView .rc-meta .m-ico{opacity:.55;margin-right:4px}
#recurringView .cad-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;padding:3px 10px;border-radius:999px;color:#fff;background:var(--cc);box-shadow:inset 0 .5px 0 rgba(255,255,255,.3)}
#recurringView .rc-next{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:120px}
#recurringView .rc-next .nx-l{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
#recurringView .rc-next .nx-v{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text-primary)}
#recurringView .rc-next.due .nx-v{color:var(--color-error)}
#recurringView .rc-owner{display:flex;align-items:center;gap:7px;min-width:120px}
#recurringView .rc-owner .ava{width:28px;height:28px;border-radius:999px;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:800;flex-shrink:0}
#recurringView .rc-owner .o-n{font-size:12px;font-weight:700;color:var(--text-primary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#recurringView .rc-done-btn{background:var(--card-bg);border:.5px solid var(--chrome-border);border-radius:999px;padding:7px 14px;font-size:12px;font-weight:800;color:var(--text-primary);cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
#recurringView .rc-done-btn:hover{background:var(--color-success);color:#fff;border-color:var(--color-success);transform:translateY(-1px)}
#recurringView .rc-done-flag{font-size:12px;font-weight:800;color:var(--color-success);white-space:nowrap;flex-shrink:0}
#recurringView .rec-empty{margin-top:8px}
@media (max-width:900px){
  .recur-summary-bar{grid-template-columns:repeat(3,1fr)}
}
/* Narrow: stack the card so the next-run / owner / action columns drop BELOW the
   medallion+name instead of crowding into the title (no overlap on phones/tablets). */
@media (max-width:760px){
  #recurringView .rec-card{flex-wrap:wrap;align-items:flex-start;gap:10px 14px}
  #recurringView .rc-ico{width:40px;height:40px;font-size:17px}
  #recurringView .rc-body{flex:1 1 calc(100% - 54px)}
  #recurringView .rc-next{order:3;align-items:flex-start;min-width:0;flex:0 0 auto}
  #recurringView .rc-next .nx-l{display:none}
  #recurringView .rc-owner{order:4;min-width:0;flex:1 1 auto}
  #recurringView .rc-done-btn,#recurringView .rc-done-flag{order:5;margin-left:auto}
}
@media (max-width:560px){ .recur-summary-bar{grid-template-columns:repeat(2,1fr)} }
.recur-table{width:100%;border-collapse:collapse;font-size:12.5px}
.recur-table th{text-align:left;padding:10px 14px;font-size:10.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;font-weight:600;border-bottom:0.5px solid var(--chrome-border-strong);white-space:nowrap;background:var(--surface);position:sticky;top:0;z-index:1}
.recur-table td{padding:10px 14px;border-top:0.5px solid color-mix(in srgb, var(--text-primary) 8%, transparent);color:var(--text-primary);vertical-align:middle}
.recur-table tr:hover td{background:color-mix(in srgb,var(--app-accent) 5%,transparent)}
/* V39xxxx — recur-table row press feedback */
.recur-table tr:active td{background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
.recur-freq-badge{display:inline-block;padding:2px 8px;border-radius:var(--radius-sm);font-size:10.5px;font-weight:500;text-transform:capitalize;border:0.5px solid transparent;letter-spacing:-.05px}
.recur-freq-daily{background:color-mix(in srgb,var(--app-accent) 10%,transparent);color:var(--app-accent);border-color:color-mix(in srgb,var(--app-accent) 22%,transparent)}
.recur-freq-weekly{background:color-mix(in srgb,var(--color-success) 10%,transparent);color:color-mix(in srgb, var(--color-success) 72%, var(--text-primary));border-color:color-mix(in srgb,var(--color-success) 25%,transparent)}
.recur-freq-monthly{background:color-mix(in srgb,#ff9500 10%,transparent);color:#7a4d00;border-color:color-mix(in srgb,#ff9500 25%,transparent)}
.recur-group-header{padding:8px 14px;background:var(--surface);font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;border-top:0.5px solid var(--chrome-border-strong);border-bottom:0.5px solid var(--chrome-border-strong)}
.recur-project-link{color:var(--app-accent);font-weight:500;cursor:pointer;text-decoration:none}
.recur-project-link:hover{text-decoration:underline}
.recur-done-btn{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius-sm);padding:4px 10px;font-size:11.5px;font-weight:500;color:var(--text-primary);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast);white-space:nowrap;letter-spacing:-.05px;font-family:inherit}
.recur-done-btn:hover{background:var(--color-success);color:#fff;border-color:var(--color-success)}
@media (max-width: 1024px) {
  .gantt-page{overflow-x:hidden;max-width:100%;width:100%;box-sizing:border-box}
  .gantt-wrap{max-width:100%;box-sizing:border-box}
}
@media (max-width: 640px) {
  /* Page chrome: tighter gutter, no horizontal overflow on the page itself */
  .gantt-page{padding:12px var(--mobile-gutter,10px) calc(72px + env(safe-area-inset-bottom,0));gap:10px}
  .gantt-header{gap:8px;row-gap:8px}
  .gantt-title{flex:0 0 100%;font-size:17px}
  .gantt-range-label{flex:1 1 auto;min-width:0;font-size:13px}
  .gantt-legend{display:none}
  /* Nav/today/import/clear buttons hit the tap target. */
  .gantt-nav-btn{min-height:var(--tap-min);min-width:var(--tap-min);padding:6px 12px;font-size:15px;display:inline-flex;align-items:center;justify-content:center}
  .gantt-nav-btn svg{width:15px !important;height:15px !important}
  .gantt-today-btn{min-height:var(--tap-min);padding:0 var(--space-4);font-size:14px}
  .gantt-project-picker{min-height:var(--tap-min);font-size:14px;max-width:none;flex:1 1 100%;padding:6px 12px}
  .gantt-import-btn,.gantt-clear-btn{min-height:var(--tap-min);padding:6px 12px;font-size:13px}
  /* Zoom dropdown reuses .cal-project-filter which already gets tap-min in calendar rules,
     but be explicit here so the Gantt's zoom select never falls short. */
  #tlZoom.cal-project-filter{min-height:var(--tap-min);height:var(--tap-min);font-size:14px;padding:0 28px 0 var(--space-3)}
  /* Scroll container: the Gantt is inherently 2D — the timeline axis stays
     horizontal-scroll (the spec's accepted exception). Make the WRAPPER fit the
     viewport, but let the inner content overflow horizontally. Cap height so the
     rest of the page is reachable on phones. */
  .gantt-wrap{
    max-width:100%;width:100%;box-sizing:border-box;
    max-height:60svh;overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y;
    overscroll-behavior:contain;
    position:relative;
  }
  /* Sticky left label column: the row labels live OUTSIDE the bars in a flex
     left-column structure (.gantt-label-col + .gantt-row-label), so they can be
     pinned with position:sticky;left:0 relative to .gantt-wrap. They must have
     an opaque background so bars don't bleed through. */
  .gantt-cols-header .gantt-label-col{
    position:sticky;left:0;z-index:3;
    background:var(--card-bg);
    box-shadow:1px 0 0 0 var(--chrome-border);
  }
  .gantt-row-label{
    position:sticky;left:0;z-index:2;
    background:var(--card-bg);
    box-shadow:1px 0 0 0 var(--chrome-border);
  }
  /* Sticky labels must preserve the row's hover/selected background so they
     don't look detached when the row highlights. */
  .gantt-row:hover .gantt-row-label,
  .gantt-row.gantt-selected .gantt-row-label{
    background:var(--surface-2);
  }
  /* Label-column size kept narrow but readable. */
  .gantt-label-col,.gantt-row-label{width:128px;min-width:128px;padding:8px 10px}
  .gantt-row-name{font-size:12px}
  /* Dependency SVG overlay is offset by the label width — keep it aligned. */
  .gantt-dep-svg{left:128px}
  /* ── Real Timeline (Phases / Portfolio modes) — same treatment ── */
  .tl-frame{padding:8px}
  .tl-row-label{
    position:sticky;left:0;z-index:2;
    width:128px;min-width:128px;
    background:var(--surface);
    box-shadow:1px 0 0 0 var(--chrome-border);
    font-size:12px;
  }
  /* The inline-styled header inside .tl-frame uses the first child <div> as the
     label cell — pin it sticky too so the "Phase" / project name caption stays
     visible during horizontal scroll. */
  .tl-frame .tl-header > div:first-child{
    position:sticky;left:0;z-index:3;
    width:128px !important;min-width:128px !important;
    background:var(--surface);
    box-shadow:1px 0 0 0 var(--chrome-border);
  }
}
@media (max-width: 480px) {
  .gantt-page{padding:10px var(--mobile-gutter,8px) calc(72px + env(safe-area-inset-bottom,0))}
  .gantt-label-col,.gantt-row-label{width:96px;min-width:96px;padding:6px 8px}
  .gantt-row-name{font-size:11px}
  .gantt-dep-svg{left:96px}
  .gantt-range-label{font-size:12px}
  .gantt-nav-btn{padding:6px 10px}
  /* Tighten tl-frame label too. */
  .tl-row-label{width:96px;min-width:96px;font-size:11px;padding:0 6px}
  .tl-frame .tl-header > div:first-child{width:96px !important;min-width:96px !important}
}

/* ── Mobile bottom tab bar (2026-05-14 mobile overhaul) ── */
.mobile-tabbar{display:none}
@media (max-width: 640px) {
  html,body{background:var(--card-bg)}
  /* U7 — mobile tab bar = floating chrome on the shared glass system (matches
     the header). Theme-tuned tint + shared --lg-refract + specular rim. */
  .mobile-tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);
    background:var(--header-shade);backdrop-filter:var(--lg-refract);
    -webkit-backdrop-filter:var(--lg-refract);
    box-shadow:var(--lg-edge);
    border-top:0.5px solid var(--chrome-border);
    padding-bottom:0;
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.mobile-tabbar{background:var(--surface)}}
  body::after{
    content:"";
    position:fixed;
    left:0;right:0;bottom:0;
    height:env(safe-area-inset-bottom, 0px);
    background:var(--card-bg);
    z-index:89;
    pointer-events:none;
  }
  /* V39eeee — mtab press feedback */
  .mtab{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;min-height:var(--tap-min);
    padding:6px 2px 4px;
    transform:translateY(6px);
    background:none;border:none;
    cursor:pointer;font-family:inherit;font-size:11px;font-weight:500;
    color:var(--on-chrome-muted);transition:color var(--motion-fast),transform var(--motion-fast),opacity var(--motion-fast);
  }
  .mtab:active{opacity:.6}
  .mtab.active{color:var(--app-accent)}
  .mtab-ico{width:20px;height:20px}
  .mtab span{letter-spacing:-.15px;line-height:1}
  /* hide the desktop view-toggle on phones; reclaim its space */
  .header .view-toggle{display:none}
  /* lift fixed bottom-anchored overlays above the tab bar
     (var aligns to actual tabbar height — was hardcoded 58px which was 13px high) */
  .ai-launcher{bottom:calc(var(--mobile-tabbar-h) + 14px + env(safe-area-inset-bottom,0))}
  .bulk-bar{bottom:calc(var(--mobile-tabbar-h) + 14px + env(safe-area-inset-bottom,0))}
  /* 2026-05-17 📘 Commit C P1 #11 — DUPLICATE removed; canonical
     #installPrompt mobile rule lives at line ~5047 inside the PWA install
     prompt CSS block (closer to the base rule it overrides). Both rules
     were identical at equal specificity; the later one always won, so this
     was dead weight + a maintenance hazard. */
  /* Task 2.11: hide the floating AI launcher while in Team Chat — it
     overlaps the composer's Send button (both at bottom-right) and is
     redundant inside a chat view. :has() lets us key off the visibility
     of #teamChatView without touching JS. */
  body:has(#teamChatView:not(.hidden)) .ai-launcher{display:none !important}

  /* 2026-05-16 cont. 3 — Team Chat keyboard sandwich fix. When the composer
     textarea (or thread composer) is focused, the iOS on-screen keyboard
     pushes the fixed mobile-tabbar above the keyboard, wedging it between
     the message list and the input. Hide the tabbar while typing and drop
     the chat view's reserved bottom padding so the composer sits flush
     against the keyboard. Re-shows the moment focus leaves the composer. */
  /* V80 📘 Tabbar always visible on Team Chat — removed hide-on-focus rule. */
  /* V80 📘 With position:fixed the view resizes with the visual viewport naturally —
     padding-bottom and max-height overrides are no longer needed. */
  /* V80 📘 No padding-bottom override needed — tabbar always shows, padding stays constant. */
  body:has(#teamChatView .tc-thread-composer textarea:focus) #teamChatView .tc-thread-panel:not([hidden]),
  body.has-tc-composing-thread #teamChatView .tc-thread-panel:not([hidden]){
    bottom: 0 !important; /* view padding handles tabbar clearance */
  }
  /* 2026-05-17 📘 Commit D P0 #4: body.has-tc-composing and
     body.has-tc-composing-thread are JS-toggled fallback classes for iOS
     Safari <16.4 (no :has() support). JS wires focus/blur listeners on
     #teamChatView composer textareas to set/clear these classes. */

  /* ── 2026-05-15 audit fixes — mobile tap targets ──
     Board column header buttons + card primary CTA were below the 28px
     readable-touch floor on iPhone (col-collapse 21×17, col-menu 26×20,
     card-open-board 316×27). Bump to 32px minimum. */
  /* V53 — hide column collapse on mobile entirely. Collapsing a single
     phase makes no sense when the mobile phase-picker already paginates
     between phases one at a time. */
  .col-collapse-btn{display:none !important}
  .col-menu-btn{min-width:32px;min-height:32px;font-size:18px;padding:4px 6px}
  /* V82.2 — phones: touch-comfortable but trimmer (was 32px/16px → 29px/13px).
     Primary keeps accent, secondary quiet. */
  .card-fbtn{height:29px;min-height:29px;font-size:12px;padding:0 13px}
  /* Admin Rename button (audit found at 20×16 on iPhone). */
  .admin-rename-btn{min-height:32px;padding:6px 10px;font-size:13px}
}

/* ── Mobile Files — single-pane drill-in (Task 2.7) ──
   At ≤640px the .files-2pane sidebar/main grid becomes a single-pane
   drill-in: data-mview="folders" shows the sidebar (folder list);
   data-mview="files" hides the sidebar and shows the main pane with a
   back button. State is toggled by _filesSetMobileView() in JS. Folder
   ctx-menus and file-card actions become tap-friendly. */
.files-mobile-back{display:none}
.files-sb-kebab{display:none}
@media (max-width: 640px) {
  /* Mobile (2026-05-26 📘): the folder RAIL is dropped on phones — it ate the
     whole viewport and hid the files. Project selection moves to the command-bar
     project DROPDOWN (#filesProjectSelect, already a glass select). The files
     grid (.files-main) is therefore ALWAYS the visible pane; the sidebar +
     mobile back button are hidden regardless of data-mview. */
  .files-2pane{display:block;gap:0}
  .files-2pane > .files-main{display:block}
  .files-2pane > .files-sidebar{display:none !important}
  /* Sidebar at full width when active, drop sticky-cap so the project list
     can scroll the page itself (more natural on phones). */
  .files-sidebar{
    position:static;max-height:none;
    min-height:0;padding:8px 6px;
    border-radius:var(--radius-md);
    overflow:visible;   /* let the PAGE scroll, not a nested rail (iOS) */
  }
  /* Folder/project rows: tap-friendly height + comfortable padding. */
  .files-sb-row{
    min-height:var(--tap-min);
    padding:10px 10px;font-size:14px;gap:8px;
  }
  .files-sb-row .files-sb-name{font-size:14px}
  .files-sb-row .files-sb-count{font-size:12px}
  /* Back button to "All Projects" (existing .files-sb-back) — tap target +
     prominent at the top of the phone sidebar so the project filter doesn't
     feel like a dead-end when it consumes the full viewport. */
  .files-sb-back{
    min-height:var(--tap-min);font-size:14px;font-weight:600;
    padding:12px 14px;gap:10px;
    background:var(--chrome-bg-strong);
    border-color:var(--chrome-border-strong);
    position:sticky;top:0;z-index:5;
    margin-bottom:8px;
  }
  .files-sb-back svg{width:14px;height:14px}
  /* New section / filter / add buttons */
  .files-sb-filter{height:var(--tap-min);font-size:14px;padding:0 12px}
  .files-sb-section{font-size:11px;padding:10px 10px 6px}
  .files-sb-add{min-height:var(--tap-min);font-size:13.5px;padding:10px 12px}
  /* Kebab "⋯" button on each folder row — replaces right-click on touch.
     Mobile-only (display:none default for the .files-sb-kebab class above). */
  .files-sb-kebab{
    display:inline-flex;align-items:center;justify-content:center;
    width:var(--tap-min);min-width:var(--tap-min);height:var(--tap-min);
    margin-left:auto;border:none;background:transparent;
    color:var(--text-muted);cursor:pointer;font-family:inherit;
    font-size:18px;line-height:1;padding:0;border-radius:var(--radius-md);
  }
  .files-sb-kebab:active{background:color-mix(in srgb, var(--text-primary) 9%, transparent)}
  /* Hide the desktop sidebar-collapse toggle on phones (replaced by drill-in). */
  .files-sb-collapse-toggle{display:none}
  /* Mobile back affordance removed — the folder rail it returned to is gone on
     phones (project selection is the command-bar dropdown now). */
  .files-mobile-back{display:none}
  /* Files page padding: leave room for the mobile tab bar at the bottom. */
  .files-page{padding:12px var(--mobile-gutter) calc(72px + env(safe-area-inset-bottom,0))}
  /* Redesigned header on phone: headline full-width, controls in a tidy row.
     Search takes the row; selects split 50/50; Sort/toggle/⋯ + Upload align. */
  .files-page-header{gap:10px;row-gap:10px;align-items:stretch}
  .files-page-headline{flex:0 0 100%}
  .files-page-title{font-size:22px}
  .files-page-subtitle{font-size:12px}
  .files-page-controls{width:100%;flex-wrap:wrap;gap:8px}
  .files-searchwrap{flex:1 1 100%}
  .files-search{width:100%;height:var(--tap-min);font-size:14px;padding:0 12px 0 32px}
  .files-search-ico{left:11px}
  .files-project-select,.files-category-select{flex:1 1 calc(50% - 4px);min-width:0;height:var(--tap-min);font-size:14px}
  .files-tool-btn{height:var(--tap-min);font-size:13.5px}
  #filesSortBtn{flex:1 1 auto}
  .files-viewtoggle{height:var(--tap-min);align-items:center}
  .files-vt-btn{height:calc(var(--tap-min) - 6px);width:38px}
  .files-upload-btn{height:var(--tap-min);font-size:14px;padding:0 16px;flex:1 1 auto}
  /* Single-column cards; banner gets a touch shorter to fit more per screen. */
  .files-page-grid{grid-template-columns:1fr;gap:12px;padding:4px 0 16px 0}
  .file-card-media{height:128px}
  /* Touch: actions become a static, tappable row under the body (no hover).
     backdrop-filter is stripped here — stacking it across every card inside the
     scroll container froze touch-scroll on iOS (WebKit blur-layer bug). */
  .file-card-actions{position:static;opacity:1;transform:none;margin:0 13px 12px;justify-content:flex-end;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;padding:0}
  .file-card-action{width:var(--tap-min);height:var(--tap-min);min-width:var(--tap-min);border-radius:var(--radius-md);background:var(--surface-2)}
  .file-card-action svg{width:15px;height:15px}
  .file-card-check{opacity:1;width:26px;height:26px}
  .file-card-check svg{width:14px;height:14px}
  /* List rows reflow: name + a compact meta line; hide the wide columns. */
  .file-row{grid-template-columns:30px 1fr auto;gap:10px;padding:11px 10px 11px 40px;min-height:var(--tap-min)}
  .file-row-proj,.file-row-by{display:none}
  .file-row-meta{font-size:11px}
  .file-row .file-card-actions{opacity:1;margin:0}
  /* Tag chip bar — let it wrap with comfortable spacing. */
  .files-tag-chip-bar{gap:6px}
  .files-tag-chip{font-size:12px;padding:5px 12px;min-height:32px}
  /* Preview lightbox: full-screen on phones (Task 0.3 vh→svh + this padding
     reduction); already mostly handled but make sure side panel doesn't squeeze. */
  .files-preview-overlay{padding:0}
  .files-preview-frame{border-radius:0;width:100vw;max-width:100vw;height:100svh}
  /* Empty-state dropzone — comfortable on phones. */
  .files-grid-empty-dropzone{height:180px;padding:18px;font-size:14px}
  .files-grid-empty-dropzone .ico-circle{width:44px;height:44px}
  /* Breadcrumb / files-main-row tighter on phones. */
  .files-main-row{margin-bottom:0;gap:6px}
  .files-breadcrumb{font-size:12px;flex-wrap:wrap}
}

/* ── Mobile bottom-sheet popover system (2026-05-14 mobile overhaul) ── */
.msheet-backdrop{
  position:fixed;inset:0;background:var(--overlay-bg);z-index:var(--z-top);
  opacity:0;transition:opacity var(--motion-base) var(--ease-out);
}
.msheet-backdrop.open{opacity:1}
.mobile-sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-top);
  background:color-mix(in srgb, var(--surface) 64%, transparent);backdrop-filter:blur(30px) saturate(1.8);-webkit-backdrop-filter:blur(30px) saturate(1.8);
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 -8px 32px color-mix(in srgb, var(--app-bg) 30%, rgba(0,0,0,.28));
  padding:8px var(--mobile-gutter) calc(var(--mobile-gutter) + env(safe-area-inset-bottom,0));
  transform:translateY(100%);transition:transform var(--motion-base) cubic-bezier(.32,.72,0,1);
  max-height:80svh;overflow-y:auto;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.mobile-sheet{background:var(--card-bg)}}
@media (prefers-reduced-transparency:reduce){.mobile-sheet{background:var(--card-bg);backdrop-filter:none;-webkit-backdrop-filter:none}}
.mobile-sheet.open{transform:translateY(0)}
/* 2026-05-17 📘 V12: bottom-sheet styling brought in line with iOS HIG
   UISheetPresentationController (Photos.app Share-sheet / Apple Music etc.):
   - drag handle 36×5pt rounded systemFill (was 36×4 grey)
   - title sentence-case bold (was 12px UPPERCASE old-CRM)
   - rows tap-friendly with reduced visual chrome (no per-row border)
   - cancel separated by gap, full-width pill style */
.mobile-sheet .msheet-grip{
  width:36px;height:5px;border-radius:var(--radius-xs);
  /* V39w — theme-aware grip handle (was hardcoded iOS grey) */
  background:color-mix(in srgb, var(--text-primary) 30%, transparent);
  margin:8px auto 10px;
}
.mobile-sheet .msheet-title{
  font-size:15px;font-weight:600;color:var(--text-primary);
  letter-spacing:-0.2px;padding:4px 4px 12px;text-align:center;
}
.mobile-sheet .msheet-row{
  position:relative;display:flex;align-items:center;gap:10px;width:100%;
  min-height:var(--tap-min);padding:12px 12px;background:none;border:none;
  border-bottom:0.5px solid var(--chrome-border);
  font-family:inherit;font-size:16px;color:var(--text-primary);
  letter-spacing:-0.2px;
  text-align:left;cursor:pointer;
  /* 2026-05-26 📘 ROOT CAUSE of the sharp-cornered rectangle on iOS: .msheet-row
     is a <button> that never got appearance:none, so WebKit painted its NATIVE
     button focus/tap chrome (a square ring that author outline:none alone won't
     suppress on iOS). Neutralize the native appearance + tap-highlight here so the
     ONLY press feedback is our rounded ::before wash. touch-action:manipulation
     drops the tap-delay; user-select:none stops a long-press text-selection box. */
  -webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;
  transition:transform var(--motion-fast) var(--ease-spring);
}
.mobile-sheet .msheet-row:last-child{border-bottom:none}
/* Inset, rounded press highlight (iOS-Settings style) painted via ::before so it
   sits INSIDE the row with margin + corners — never a full-bleed sharp rectangle. */
.mobile-sheet .msheet-row::before{
  content:"";position:absolute;inset:2px 6px;border-radius:var(--radius-md);
  /* 2026-05-27 — press wash uses a dedicated value (NOT --chrome-bg-hover): that
     token is neutralized to transparent on touch to kill lingering hover highlights,
     but THIS is intentional :active press feedback that must survive on touch. */
  background:color-mix(in srgb, var(--text-primary) 9%, transparent);opacity:0;pointer-events:none;
  transition:opacity var(--motion-fast) var(--ease-out);
}
.mobile-sheet .msheet-row:active::before{opacity:1}
.mobile-sheet .msheet-row:active{transform:scale(.985)}
/* 2026-05-26 📘 The real culprit behind the persistent sharp rectangle: the
   global *:focus-visible halo (line ~6849) lingers on these <button> rows after
   a tap (WebKit keeps the row focused), and since the row carries NO radius the
   box-shadow halo traces a square box. On touch a menu row that fires its action
   shouldn't hold a focus ring — the rounded ::before press wash is the only
   feedback. Kill outline + halo on the row; keyboard focus still lands the inset
   ::before via a fallback below so a11y isn't lost. */
.mobile-sheet .msheet-row:focus,
.mobile-sheet .msheet-row:focus-visible{outline:none!important;box-shadow:none!important}
.mobile-sheet .msheet-row:focus-visible::before{opacity:1;box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 45%,transparent) inset}
@media (prefers-reduced-motion:reduce){
  .mobile-sheet .msheet-row{transition:none}
  .mobile-sheet .msheet-row:active{transform:none}
  .mobile-sheet .msheet-row:active::before{transition:none}
}
/* 2026-05-17 📘 V26 — More-sheet nav-row visual treatment: icon + label + chevron.
   HIG iOS-Settings-style row (icon left, label middle, chevron right). */
.mobile-sheet .msheet-row-nav{gap:12px;padding:14px 14px}
.mobile-sheet .msheet-row-nav .msheet-row-ico{
  width:22px;height:22px;flex-shrink:0;color:var(--app-accent);
}
.mobile-sheet .msheet-row-nav .msheet-row-label{flex:1;min-width:0}
.mobile-sheet .msheet-row-nav .msheet-row-chev{
  width:14px;height:14px;flex-shrink:0;color:var(--text-muted);opacity:.6;
}
.mobile-sheet .msheet-row-danger{color:var(--color-error)}
.mobile-sheet .msheet-row-danger .msheet-row-ico{color:var(--color-error)}
/* 2026-06-03 📘 — primary action row in the More sheet (New Project). Accent
   label so it reads as the sheet's lead action, distinct from neutral nav rows. */
.mobile-sheet .msheet-row-primary .msheet-row-label{color:var(--app-accent);font-weight:600}
.mobile-sheet .msheet-cancel{
  margin-top:12px;width:100%;min-height:var(--tap-min);
  background:var(--card-bg);border:none;border-radius:var(--radius-lg);
  font-family:inherit;font-size:16px;font-weight:600;
  color:var(--app-accent);
  cursor:pointer;letter-spacing:-0.2px;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 0 0 0.5px rgba(0,0,0,.06);
  /* V39bb — Apple press feedback */
  transition:opacity var(--motion-fast),transform var(--motion-fast);
}
.mobile-sheet .msheet-cancel:active{opacity:.65;transform:scale(.98)}
/* Task 2.17 — column-color swatches inside a mobile sheet need real tap targets. */
.mobile-sheet .mcol-swatch{
  width:36px;height:36px;border-radius:var(--radius-md);cursor:pointer;padding:0;
}

/* ── PWA install prompt ── */
#installPrompt{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-toast);background:var(--card-bg);color:var(--text-primary);border-top:0.5px solid var(--chrome-border);box-shadow:0 -8px 32px rgba(0,0,0,.18);padding:14px 16px calc(14px + env(safe-area-inset-bottom));display:none;align-items:center;gap:12px;animation:installSlide var(--motion-slow) ease-out}
#installPrompt.show{display:flex}
/* V52 — When install prompt is visible, push main content up so it doesn't
   get obscured. Prompt is roughly 76px tall + safe-area bottom; reserve 90px
   plus the mobile tabbar height on small screens where it appears. */
@media (max-width: 640px) {
  /* 2026-05-27 📘 — corrected #dashView → #dashboardView (the old id was DEAD,
     so the dashboard never got this padding) + added every other scrollable
     content view that can be active when the install banner shows (Files was
     missing entirely; Photos/Reports/Calendar/Gantt/Lookahead too). */
  body.install-prompt-open #todoView,
  body.install-prompt-open .board-wrap,
  body.install-prompt-open #listView,
  body.install-prompt-open #dashboardView,
  body.install-prompt-open #contactsView,
  body.install-prompt-open #filesView,
  body.install-prompt-open #photosView,
  body.install-prompt-open #reportsView,
  body.install-prompt-open #calendarView,
  body.install-prompt-open #ganttView,
  body.install-prompt-open #lookaheadView {
    padding-bottom: calc(var(--mobile-tabbar-h, 45px) + 100px + env(safe-area-inset-bottom, 0px)) !important;
  }
}
@media (max-width:640px){
  /* 2026-05-17 📘 Commit C P1 #10: position above tabbar+safe-area
     (already correct), AND override padding-bottom to 14px to undo the
     base-rule's `calc(14px + env(safe-area-inset-bottom))`. Otherwise the
     internal bottom padding double-counts the home-indicator inset (the
     prompt's bottom edge is ALREADY above the safe area thanks to this
     bottom: calc). */
  #installPrompt{
    bottom:calc(var(--mobile-tabbar-h) + env(safe-area-inset-bottom,0));
    padding-bottom:14px;
  }
}
@keyframes installSlide{from{transform:translateY(100%)}to{transform:translateY(0)}}
.install-prompt-icon{width:44px;height:44px;border-radius:var(--radius-md);flex-shrink:0;background-image:url('/icon-192.png');background-size:cover;background-position:center}
.install-prompt-body{flex:1;min-width:0}
.install-prompt-title{font-size:14px;font-weight:700;color:var(--text-primary);margin-bottom:2px}
.install-prompt-sub{font-size:12px;color:var(--text-muted);line-height:1.35}
.install-prompt-actions{display:flex;gap:8px;flex-shrink:0}
.install-prompt-btn{height:34px;padding:0 14px;border-radius:var(--radius-btn);border:none;background:var(--accent);color:var(--on-accent);font-size:13px;font-weight:600;cursor:pointer;transition:opacity var(--motion-fast),transform var(--motion-fast);box-shadow:0 1px 2px rgba(0,0,0,.08),inset 0 0 0 0.5px rgba(255,255,255,.16);letter-spacing:-.05px}
.install-prompt-btn:hover{opacity:.92}
.install-prompt-btn:active{transform:scale(.97);opacity:1}
.install-prompt-dismiss{height:34px;padding:0 10px;border-radius:var(--radius-btn);border:0.5px solid var(--chrome-border);background:transparent;color:var(--text-muted);font-size:13px;cursor:pointer;transition:background var(--motion-fast),transform var(--motion-fast)}
.install-prompt-dismiss:hover{background:var(--chrome-bg-hover)}
.install-prompt-dismiss:active{transform:scale(.97)}
.install-prompt-dismiss:hover{background:var(--surface-2)}
#iosInstallModal{position:fixed;inset:0;background:var(--overlay-bg);z-index:var(--z-toast);display:none;align-items:flex-end;justify-content:center}
#iosInstallModal.show{display:flex}
.ios-install-sheet{background:var(--card-bg);color:var(--text-primary);border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:20px 20px calc(24px + env(safe-area-inset-bottom));width:100%;max-width:520px;box-shadow:0 -12px 40px rgba(0,0,0,.3);animation:installSlide var(--motion-slow) ease-out}
.ios-install-title{font-size:16px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:10px}
.ios-install-step{font-size:14px;line-height:1.5;color:var(--text-primary);padding:8px 0;display:flex;align-items:flex-start;gap:10px}
.ios-install-step-num{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;margin-top:1px}
/* V39ccccc — ios-install-close Apple feedback */
.ios-install-close{margin-top:14px;width:100%;height:40px;border:none;border-radius:var(--radius-btn);background:var(--surface-2);color:var(--text-primary);font-size:14px;font-weight:600;cursor:pointer;transition:background var(--motion-fast),transform var(--motion-fast)}
.ios-install-close:hover{background:var(--surface-3)}
.ios-install-close:active{transform:scale(.97)}
.ios-share-glyph{display:inline-block;width:16px;height:22px;vertical-align:middle;position:relative}
.ios-share-glyph::before{content:"";position:absolute;left:3px;top:7px;width:10px;height:13px;border:1.6px solid currentColor;border-top:none;border-radius:2px}
.ios-share-glyph::after{content:"";position:absolute;left:6.2px;top:0;width:3.6px;height:11px;background:currentColor;border-radius:1px}
.ios-share-glyph i{position:absolute;left:3.6px;top:2px;width:8.8px;height:8.8px;border-left:1.6px solid currentColor;border-top:1.6px solid currentColor;transform:rotate(45deg);border-radius:1px}

/* V39hh — dark-theme override for ALL <select> chevrons. The hardcoded grey
   chevron #8e8e93 is invisible on midnight/contrast themes. This applies
   a lighter chevron data-URL to every select on dark themes by matching
   the broad selectors used in the codebase. */
[data-theme="midnight"] select,
[data-theme="contrast"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23cccccc'/%3E%3C/svg%3E") !important;
  /* 2026-05-20 📘 — keep the chevron from TILING. This !important
     image override was dropping the shorthand's no-repeat/position/size, so
     WebKit (Safari/iOS) tiled the 10x6 arrow into a hatch on hover/focus.
     Re-assert the single-instance painting alongside the image. */
  background-repeat: no-repeat !important;
  background-position: right 7px center !important;
  background-size: 10px 6px !important;
}

/* ===== Project Overview dashboard — "mission control" (2026-06-02) =====
   Full-page Overview redesign. Built ONLY on real tokens (no one-off hex/shadow/blur).
   Spec: docs/superpowers/specs/2026-06-02-project-dashboard-overview-design.md
   Glass = chrome only; content stays solid. Honors reduced-motion + reduced-transparency. */
.ov-hero{position:relative;overflow:hidden;border-radius:var(--radius-xl,18px);padding:18px 20px;margin-bottom:14px;
  background:var(--frost-bg-strong);backdrop-filter:var(--frost-blur);-webkit-backdrop-filter:var(--frost-blur);
  box-shadow:var(--lg-edge),var(--shadow-e3)}
.ov-hero-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(460px 200px at 86% -30%,color-mix(in srgb,var(--app-accent) 14%,transparent),transparent 70%)}
/* 2026-06-02 ALL-IN — the cockpit now opens with a personal eyebrow (time-aware
   greeting + your role on this job) instead of repeating the project identity
   that the command bar already owns. */
.ov-hero-eyebrow{position:relative;display:flex;align-items:baseline;gap:10px;margin-bottom:13px;flex-wrap:wrap}
.ov-hero-eyebrow-t{font-family:"SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,sans-serif;font-size:20px;font-weight:800;letter-spacing:-.5px;color:var(--text-primary)}
.ov-hero-eyebrow-sub{font-size:12px;font-weight:600;color:var(--text-muted)}
.ov-hero-top{position:relative;display:flex;align-items:flex-start;gap:16px}
.ov-nm{font:800 22px/1.05 -apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;letter-spacing:-.02em;color:var(--text-primary)}
.ov-meta{color:var(--text-muted);font-size:12.5px;font-weight:600;margin-top:3px}
.ov-pills{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap}
.ov-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:var(--radius-pill);font-size:11px;font-weight:600;letter-spacing:.01em;
  box-shadow:inset 0 .5px 0 color-mix(in srgb,#fff 30%,transparent),inset 0 0 0 .5px color-mix(in srgb,currentColor 18%,transparent)}
.ov-hero-right{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex:none}
.ov-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
/* presence stack */
.ov-presence{display:flex;align-items:center;gap:8px}
.ov-presence-lbl{font:600 10px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
.ov-avs{display:flex}
.ov-avs .ov-av+.ov-av{margin-left:-8px}
.ov-av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;
  font:700 10px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:#fff;border:2px solid var(--card-bg);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.ov-av-more{background:var(--surface-3);color:var(--text-secondary)}
.ov-av-add{background:color-mix(in srgb,var(--app-accent) 10%,transparent);color:var(--app-accent);border-style:dashed;cursor:pointer}
/* money strip fused to hero base */
.ov-money{display:flex;margin:16px -20px -18px;overflow:hidden;border-radius:0 0 var(--radius-xl,18px) var(--radius-xl,18px);
  background:color-mix(in srgb,var(--app-bg) 55%,var(--card-bg));border-top:1px solid color-mix(in srgb,var(--text-primary) 8%,transparent)}
.ov-money-cell{flex:1;padding:11px 20px;position:relative}
.ov-money-cell+.ov-money-cell::before{content:"";position:absolute;left:0;top:20%;bottom:20%;width:1px;background:color-mix(in srgb,var(--text-primary) 8%,transparent)}
.ov-money-v{font:800 16px/1 -apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.ov-money-v.is-empty{color:var(--text-muted)}
.ov-money-l{font:600 8.5px/1.2 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-top:4px}
.ov-money-drill{flex:none;display:grid;place-items:center;padding:0 18px;cursor:pointer;background:color-mix(in srgb,var(--app-accent) 8%,transparent)}
.ov-money-drill span{font:700 11px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:var(--app-accent)}
.ov-money-drill:hover{background:color-mix(in srgb,var(--app-accent) 14%,transparent)}
/* ── vitals cockpit: VIVID glossy colored stat tiles (Macintosh-era specular + Apple-pro depth) ── */
.ov-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:18px}
.ov-stat{position:relative;overflow:hidden;border-radius:15px;padding:13px 14px 12px;cursor:pointer;isolation:isolate;min-height:96px;
  /* richer, more saturated fill in the tile's own color — deep at base, glossy at top */
  background:linear-gradient(168deg,
    color-mix(in srgb,var(--tc) 42%,#fff) 0%,
    color-mix(in srgb,var(--tc) 30%,#fff) 42%,
    color-mix(in srgb,var(--tc) 52%,#fff) 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.9),
    inset 0 -14px 22px -12px color-mix(in srgb,var(--tc) 78%,transparent),
    inset 0 0 0 .5px color-mix(in srgb,var(--tc) 55%,transparent),
    0 1px 2px color-mix(in srgb,var(--tc) 30%,transparent),
    0 8px 20px -6px color-mix(in srgb,var(--tc) 55%,transparent);
  transition:transform var(--motion-fast,150ms) var(--ease-spring,ease-out),box-shadow var(--motion-base,220ms)}
/* top specular glint sweeping across the gloss */
.ov-stat-sheen{position:absolute;inset:0;pointer-events:none;border-radius:15px;
  background:radial-gradient(130% 80% at 16% -12%,rgba(255,255,255,.85),rgba(255,255,255,0) 52%)}
/* tinted icon badge, top-right */
.ov-stat-ico{position:absolute;top:11px;right:11px;width:24px;height:24px;border-radius:8px;display:grid;place-items:center;z-index:2;
  background:linear-gradient(160deg,rgba(255,255,255,.55),color-mix(in srgb,var(--tc) 30%,#fff));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 .5px color-mix(in srgb,var(--tc) 45%,transparent),0 1px 2px color-mix(in srgb,var(--tc) 28%,transparent)}
.ov-stat-ico svg{width:13px;height:13px;color:color-mix(in srgb,var(--tc) 78%,#000);opacity:.92}
.ov-stat:hover{transform:translateY(-3px);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.95),
    inset 0 -14px 22px -12px color-mix(in srgb,var(--tc) 86%,transparent),
    inset 0 0 0 .5px color-mix(in srgb,var(--tc) 62%,transparent),
    0 2px 4px color-mix(in srgb,var(--tc) 32%,transparent),
    0 18px 36px -8px color-mix(in srgb,var(--tc) 64%,transparent)}
.ov-stat:active{transform:translateY(0) scale(.974)}
.ov-stat-v{position:relative;z-index:1;font:800 27px/1 -apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  color:color-mix(in srgb,var(--tc) 90%,#000);text-shadow:0 1px 0 rgba(255,255,255,.6)}
.ov-stat-l{position:relative;z-index:1;margin-top:7px;font:800 9.5px/1.1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.055em;
  color:color-mix(in srgb,var(--tc) 78%,#000)}
.ov-stat-sub{position:relative;z-index:1;margin-top:4px;font:600 10px/1.2 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  color:color-mix(in srgb,var(--tc) 64%,#000)}
@media (prefers-reduced-motion: reduce){.ov-stat{transition:none}.ov-stat:hover{transform:none}}
@media (prefers-reduced-transparency: reduce){.ov-hero{background:var(--card-bg);backdrop-filter:none;-webkit-backdrop-filter:none}}
/* shared surface for the non-hero zones (solid content card on real grad + bevel) */
.ov-card{background:var(--surface-grad);border-radius:var(--radius-lg);box-shadow:var(--bevel-top),var(--shadow-e2);padding:15px 16px;margin-bottom:14px}
/* 🩰 §7-C P1 — contract-chain strip: Owner/GC above → us → N subs below. Rounded glass nodes, quiet
   arrows, no colored edge-strips; each node a rounded-hover door. */
.ov-sh{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}
.ov-sh-t{font:800 13.5px/1 -apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;letter-spacing:-.01em;display:flex;gap:9px;align-items:center;color:var(--text-primary)}
/* section marker = small glossy rounded color chip (intentional header element, NOT an edge strip) */
.ov-sh-bar{width:10px;height:10px;border-radius:3.5px;flex:none;--sc:var(--app-accent);
  background:linear-gradient(160deg,color-mix(in srgb,var(--sc) 78%,#fff),var(--sc));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 8px color-mix(in srgb,var(--sc) 55%,transparent),0 1px 2px color-mix(in srgb,var(--sc) 40%,transparent)}
.ov-sh-bar.is-err{--sc:var(--color-error)}
.ov-sh-bar.is-ph{--sc:var(--color-info)}
.ov-sh-bar.is-ok{--sc:var(--color-success)}
.ov-sh-bar.is-warn{--sc:var(--color-warning)}
.ov-sh-more{font:600 11px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:var(--app-accent);cursor:pointer}
.ov-sh-count{font:600 11px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;padding:5px 10px;border-radius:var(--radius-pill);box-shadow:inset 0 .5px 0 color-mix(in srgb,#fff 30%,transparent),inset 0 0 0 .5px color-mix(in srgb,currentColor 18%,transparent)}
/* needs-you queue */
/* (no colored edge stripe — the section bar + count pill carry the urgency signal) */
.ov-row{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--text-primary) 7%,transparent)}
.ov-row:last-child{border-bottom:0}
.ov-row-grow{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px;color:var(--text-secondary)}
.ov-row-grow b{font-weight:700;color:var(--text-primary)}
.ov-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--text-muted)}
.ov-dot.is-err{background:var(--color-error)}
.ov-dot.is-warn{background:var(--color-warning)}
.ov-dot.is-ok{background:var(--color-success)}
.ov-when{color:var(--text-muted);font:600 11px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;flex:none;font-variant-numeric:tabular-nums}
.ov-chain{display:flex;align-items:center;gap:3px;flex:none}
.ov-chain .ov-av{width:20px;height:20px;font-size:8px;border-width:1.5px;margin:0}
.ov-chain-arr{color:var(--text-muted);font-size:10px;margin:0 1px}
.ov-court{font:600 10.5px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:var(--text-muted);flex:none}
.ov-handoff{font:600 10.5px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:var(--app-accent);flex:none;cursor:pointer;padding:6px 10px;border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--app-accent) 7%,transparent);border:.5px solid color-mix(in srgb,var(--app-accent) 30%,transparent);transition:background var(--motion-fast,150ms)}
.ov-handoff:hover{background:color-mix(in srgb,var(--app-accent) 14%,transparent)}
.ov-clear{color:var(--text-muted);font-size:12px;padding:10px 2px;display:flex;align-items:center;gap:7px}
.ov-clear .ov-dot{background:var(--color-success)}
/* job at a glance — one flowing band, hairline dividers */
.ov-glance{padding:0;overflow:hidden}
.ov-glance-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.ov-gcell{padding:15px 16px;border-right:1px solid color-mix(in srgb,var(--text-primary) 7%,transparent)}
.ov-gcell:last-child{border-right:0}
.ov-gt{font:700 10px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.ov-gt-more{color:var(--app-accent);cursor:pointer;font-size:10px}
.ov-track{height:8px;border-radius:6px;overflow:hidden;flex:1;background:color-mix(in srgb,var(--text-primary) 8%,transparent);box-shadow:inset 0 1px 2px rgba(0,0,0,.10)}
.ov-track>i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--pc,var(--app-accent)),color-mix(in srgb,var(--pc,var(--app-accent)) 65%,#fff))}
.ov-spark{height:38px;display:flex;align-items:flex-end;gap:3px}
.ov-spark>i{flex:1;min-width:2px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--app-accent),color-mix(in srgb,var(--app-accent) 55%,#fff));box-shadow:var(--bevel-top)}
.ov-gsub{color:var(--text-secondary);font-size:11.5px;margin-top:9px}
.ov-gbig{font:800 18px/1 -apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.ov-gpills{display:flex;gap:6px;flex-wrap:wrap}
.ov-empty-cell{color:var(--text-muted);font-size:11px}
.ov-empty-cell .addlink{color:var(--app-accent);font-weight:700;cursor:pointer}
/* team in motion + looking ahead (two-up footer) */
.ov-twoup{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* 2026-06-03 — in the modal Overview the two-up (Key Dates + Financials) is
   followed by the Recent card; the two-up had no bottom margin so Recent sat
   flush against it. Give it the standard ov-card gap. (Full-page two-up is the
   last element, so this is scoped to the modal body to avoid a trailing gap.) */
#modalOverviewBody .ov-twoup{margin-bottom:14px}
.ov-twoup .ov-card{margin-bottom:0}
.ov-story{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid color-mix(in srgb,var(--text-primary) 7%,transparent)}
.ov-story:last-child{border-bottom:0}
.ov-story-txt{flex:1;min-width:0;font-size:12.5px;line-height:1.45;color:var(--text-secondary)}
.ov-story-txt b{font-weight:700;color:var(--text-primary)}
.ov-story .ov-when{align-self:center}
@media (max-width:1240px){.ov-stats{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.ov-twoup{grid-template-columns:1fr}.ov-glance-grid{grid-template-columns:1fr 1fr}.ov-gcell:nth-child(2){border-right:0}.ov-gcell:nth-child(1),.ov-gcell:nth-child(2){border-bottom:1px solid color-mix(in srgb,var(--text-primary) 7%,transparent)}}
@media (max-width:640px){
  .ov-hero-top{flex-direction:column}
  .ov-hero-right{margin-left:0;align-items:flex-start;width:100%}
  .ov-stats{grid-template-columns:repeat(2,1fr)}
  .ov-money{flex-wrap:wrap}
  .ov-money-cell{flex:1 1 33%}
  .ov-glance-grid{grid-template-columns:1fr}
  .ov-gcell{border-right:0;border-bottom:1px solid color-mix(in srgb,var(--text-primary) 7%,transparent)}
  .ov-gcell:last-child{border-bottom:0}
  .ov-row{flex-wrap:wrap}
  .ov-chain{order:3}
}

/* ============================================================
   RT REDESIGN 2026-06 (pass-2) — shared composition vocabulary
   Ported from docs/redesign-2026-06/_assets/shell.css. Built on the
   live Gulf tokens (already match the reference). Bare names verified
   collision-free (existing task-ws-bar-track etc. are different names;
   .avatar/.chip already live in the app and are NOT redefined here).
   Surface-specific classes are added per-view in their own sections.
   ============================================================ */

/* metric-door — every rollup number is a door (hover lift) */
/* HARD RULE (Gavin): every metric-door hover lift is ROUNDED — never a hard-cornered
   square/rectangle shadow. A default radius guarantees the lift pop is always rounded even
   on elements that don't otherwise set one (e.g. the cash-hero .ch-main). Same family of
   rule as no-edge-strips. */
.metric-door{cursor:pointer;border-radius:14px;transition:transform var(--motion-fast,.15s) var(--ease-spring,ease),box-shadow var(--motion-fast,.15s)}
.metric-door:hover{transform:translateY(-2px);box-shadow:var(--shadow-e3,0 16px 40px -16px rgba(20,30,48,.4))}
/* band cells (rollup/insight rows that sit INSIDE a continuous band) must NOT lift +
   cast the big door shadow — that detaches them as a rough floating grey box. They get
   a clean contained bg-tint hover instead, while keeping the drill affordance. */
.ru-cell.metric-door:hover,.ins.metric-door:hover,.fin-cell.metric-door:hover,.ru-b.metric-door:hover{transform:none;box-shadow:none;background:var(--hover-overlay,rgba(0,0,0,.025))}
/* Stronger, clearly-interactive contained hover for the List rollup KPI cells: an accent
   wash + inset top sheen so the clickable widget visibly responds (no lift — they're in the
   overflow:hidden band; lifting clips). Overrides the faint generic band-tint above. */
/* List rollup cells are now free-floating cards (not in an overflow:hidden band), so they
   get a real lift + deeper shadow on hover — clearly interactive, clean rounded depth. */
#listView .rollup .ru-cell.metric-door:hover{transform:translateY(-2px);box-shadow:var(--bevel-top),var(--shadow-e3,0 16px 40px -16px rgba(20,30,48,.4));border-color:color-mix(in srgb,var(--app-accent) 20%,rgba(0,0,0,.06))}

/* tiles / tile — vitals cockpit (material, specular, pressable) */
.tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.tile{position:relative;border-radius:16px;padding:14px 15px;overflow:hidden;background:var(--surface-grad,linear-gradient(160deg,var(--card-bg),color-mix(in srgb,var(--card-bg) 92%,var(--app-bg))));box-shadow:0 1px 0 rgba(255,255,255,.6) inset,var(--shadow-e1,0 4px 14px -6px rgba(20,30,48,.18));border:.5px solid rgba(0,0,0,.04)}
/* V-theme1 — semantic tile tints now mix into --card-bg (was hardcoded #fff → washed light/blob
   on Bayfront). Faint tint over the real card surface so each tile darkens with the theme. */
.tile.t-accent{background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 14%,var(--card-bg)),var(--card-bg))}
.tile.t-info{background:linear-gradient(160deg,color-mix(in srgb,var(--color-info,#3b82f6) 12%,var(--card-bg)),var(--card-bg))}
.tile.t-warn{background:linear-gradient(160deg,color-mix(in srgb,var(--color-warning,#f59e0b) 15%,var(--card-bg)),var(--card-bg))}
.tile.t-error{background:linear-gradient(160deg,color-mix(in srgb,var(--color-error,#ef4444) 14%,var(--card-bg)),var(--card-bg))}
.tile.t-ok{background:linear-gradient(160deg,color-mix(in srgb,var(--color-success,#10b981) 14%,var(--card-bg)),var(--card-bg))}
/* V-theme1 — this was a SECOND, later .tile.t-info that re-introduced the #fff wash (won on
   source order). Now token-based to match the others so COLLECTED (AR) darkens on Bayfront. */
.tile.t-info{background:linear-gradient(160deg,color-mix(in srgb,var(--color-info,#3b82f6) 12%,var(--card-bg)),var(--card-bg))}
.tile .tl-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted,#8a9099)}
.tile .tl-value{font-size:30px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin:2px 0;line-height:1}
.tile .tl-sub{font-size:11.5px;color:var(--text-secondary,#6b7280);font-weight:600}
.tile .tl-ico{position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.6);font-size:13px}

/* surf — generic authored surface */
.surf{background:var(--card-bg,#fff);border-radius:18px;padding:18px;box-shadow:var(--shadow-e2,0 6px 20px -8px rgba(20,30,48,.18));border:.5px solid color-mix(in srgb,var(--app-accent) 4%,rgba(0,0,0,.05))}
.surf-lg{border-radius:22px;padding:22px}
.surf-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.surf-head h3{font-size:16px;font-weight:700;letter-spacing:-.01em;margin:0}
.surf-head .sh-action{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--app-accent);cursor:pointer}

/* panel / zone — continuous authored surface (G4: hairlines, not boxes-with-gaps) */
.panel{background:var(--card-bg,#fff);border-radius:18px;box-shadow:var(--shadow-e2,0 6px 20px -8px rgba(20,30,48,.16));border:.5px solid rgba(0,0,0,.05);overflow:hidden}
.panel>.zone{padding:16px 18px}
.panel>.zone+.zone{border-top:.5px solid var(--chrome-border,rgba(0,0,0,.07))}
.zone-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.zone-head h3{font-size:14px;font-weight:700;margin:0;letter-spacing:-.01em}
.zone-head .zh-action{margin-left:auto;font-size:12px;font-weight:600;color:var(--app-accent);cursor:pointer}

/* bic — ball-in-court / hand-off chain (G5) */
.bic{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bic-chain{display:flex;align-items:center;gap:4px}
.bic-chain .avatar{width:28px;height:28px}
.bic-chain .arrow{color:var(--text-muted);font-size:12px}
.bic-chain .now{box-shadow:0 0 0 2px var(--card-bg,#fff),0 0 0 4px color-mix(in srgb,var(--color-warning,#f59e0b) 60%,transparent)}
.bic-label{font-size:12px;font-weight:600;color:var(--text-secondary)}
.bic-label b{color:var(--text-primary)}

/* bar / bar-track — material chart bars (G6) */
.bar{position:relative;border-radius:7px;background:linear-gradient(160deg,color-mix(in srgb,var(--bc,var(--app-accent)) 92%,#fff),var(--bc,var(--app-accent)));box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 3px 8px -4px var(--bc,var(--app-accent))}
.bar.ghost{background:var(--surface-2,rgba(120,120,128,.14));box-shadow:none}
.bar-track{height:9px;border-radius:999px;background:var(--surface-2,rgba(120,120,128,.14));overflow:hidden}
.bar-track>i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--bc,var(--app-accent)) 80%,#fff),var(--bc,var(--app-accent)));box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}

/* callout — quiet info (replaces flat blue bordered boxes) */
.callout{display:flex;gap:10px;padding:11px 14px;border-radius:12px;font-size:12.5px;line-height:1.5;background:var(--color-info-bg,#e8f0fd);color:color-mix(in srgb,var(--color-info,#2563c9) 78%,#000)}
.callout.warn{background:var(--color-warning-bg,#fdf3e0);color:var(--co-pending-fg,#b45309)}
.callout.alert{background:var(--color-error-bg,#fdeaea);color:var(--color-error,#c0392b)}
.callout .ci{flex:0 0 auto}

/* chip — pass-2 status pill (prototype vocabulary). The app had no standalone .chip pill
   base (only compound transition refs), so pass-2 chips rendered as bare text. This is the
   shared pill used across surfaces (lookahead status, board badges, financial flags, etc.). */
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700;line-height:1.4;white-space:nowrap;background:var(--surface-2,rgba(120,120,128,.12));color:var(--text-secondary)}
.chip-ok{background:var(--color-success-bg,#e7f7ef);color:var(--color-success,#137a4b)}
.chip-warn{background:var(--color-warning-bg,#fdf3e0);color:var(--co-pending-fg,#9a6212)}
.chip-error{background:var(--color-error-bg,#fdeaea);color:var(--color-error,#c0392b)}
.chip-info{background:var(--color-info-bg,#e8f0fd);color:var(--color-info,#2563c9)}
.chip-money{background:var(--color-success-bg,#e7f7ef);color:var(--color-success,#137a4b);font-variant-numeric:tabular-nums}

/* empty — designed empty-state invitation (dashed border, centered, icon+title+sub+CTA).
   shell.css vocab the app lacked → pass-2 empty states ("Capture it before it's gone" etc.)
   rendered as bare text. Standalone .empty is collision-free (only .dash-phase-fill.empty exists). */
.empty{display:grid;place-items:center;text-align:center;padding:32px 24px;gap:8px;border:1.5px dashed color-mix(in srgb,var(--app-accent) 24%,rgba(0,0,0,.08));border-radius:16px;background:color-mix(in srgb,var(--app-accent) 3%,transparent)}
.empty .em-ico{font-size:28px;opacity:.7;line-height:1}
.empty .em-title{font-weight:700;font-size:15px}
.empty .em-sub{color:var(--text-secondary);font-size:12.5px;max-width:360px;line-height:1.5}

/* avatar — base initials/photo circle (collaborative layer). No standalone .avatar
   existed in-app; this is the pass-2 base used by avatar-stack/bic/card-presence. */
/* 2026-07-05 — lift the chat/list .avatar orbs to the canonical Atira sphere (were flat with
   only a 2px ring): a top specular highlight + bottom inner-shade + drop shadow, layered with
   the existing ring, so team-chat + channel + person avatars read as lifted orbs everywhere. */
.avatar{width:26px;height:26px;border-radius:999px;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:700;overflow:hidden;flex:0 0 auto;position:relative;
  box-shadow:0 0 0 2px var(--card-bg,#fff),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 4px rgba(0,0,0,.16),0 1px 2px rgba(16,24,40,.16),0 2px 6px -2px rgba(16,24,40,.2)}
/* glossy top specular cap (the highlight that sells the sphere) */
.avatar::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.4),rgba(255,255,255,0) 60%)}
.avatar img{position:relative;z-index:1}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.avatar-stack{display:flex}
.avatar-stack .avatar+.avatar{margin-left:-8px}
.presence{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary)}
.presence .live-dot{width:7px;height:7px;border-radius:999px;background:var(--color-success,#30d158);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-success,#30d158) 25%,transparent)}

@media (prefers-reduced-motion:reduce){.metric-door{transition:none}}

/* ---- PROJECT-TAB CHROME (PT1 crumb · PT2 proj-hero · G3 phase stepper) ---- */
/* crumb (PT1) — single locked breadcrumb */
.crumb{display:flex;align-items:center;gap:8px;padding:9px 24px;font-size:12.5px;font-weight:600;color:var(--text-secondary);background:var(--surface,#fff);border-bottom:.5px solid var(--chrome-border,rgba(0,0,0,.06))}
.crumb .c-back{color:var(--app-accent);cursor:pointer}
.crumb .c-back:hover{text-decoration:underline}
.crumb .spacer{flex:1}
.crumb .c-actions{display:flex;gap:7px}

/* proj-hero (PT2) — lit glass project identity band; spans frame under the crumb */
/* pass-3 AUDIT: tightened the gradient (removed the +22%-white light end that pushed lighter phase tones toward a white-text fail; now the lightest stop is the pure tone, not tone-mixed-with-white). NOTE: a USER-DEFINED light/yellow phase color still can't carry white text — the proper fix is luminance-based text color set in JS where --ph-tone is assigned (logged in _AUDIT.md); that's a reference-surface JS change held for a dedicated pass. This CSS keeps the dark/normal phase tones unmuddied while removing the worst light-end case. */
/* V-theme1 — --ph-tone fallback is now the THEME accent (was a green #2c885d), so the hero
   follows the theme even before JS sets it; the per-project color injection was removed. */
.proj-hero{position:relative;display:flex;align-items:center;gap:16px;padding:18px 24px;color:var(--hero-text,#fff);overflow:hidden;border-radius:0;background:linear-gradient(135deg,color-mix(in srgb,var(--ph-tone,var(--app-accent)) 86%,#000) 0%,var(--ph-tone,var(--app-accent)) 60%,color-mix(in srgb,var(--ph-tone,var(--app-accent)) 92%,#000) 100%);box-shadow:var(--lg-edge,inset 0 1px 0 rgba(255,255,255,.22)),0 10px 30px -16px rgba(20,40,30,.5);border-bottom:.5px solid rgba(0,0,0,.12)}
.proj-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(130% 90% at 0% -10%,rgba(255,255,255,.22),transparent 55%)}
/* pass-3 banner (2026-06-07): mark = GLASS (phase color refracts through) + float */
/* V-orb1 — project identity tile = ORB-MATERIAL sphere (glossy blue orb gradient + specular),
   keeps its glyph. On the accent hero it reads as a lit, lighter orb so it still pops. */
.proj-hero .ph-mark{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:20px;
  background:radial-gradient(120% 120% at 30% 22%,color-mix(in srgb,#fff 55%,var(--app-accent)) 0%,color-mix(in srgb,#fff 18%,var(--app-accent)) 40%,var(--app-accent) 72%,color-mix(in srgb,var(--app-accent) 72%,#000) 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7),inset 0 -8px 14px -6px rgba(0,0,40,.4),0 6px 16px -4px color-mix(in srgb,var(--app-accent) 50%,transparent),0 1px 3px rgba(0,0,0,.3);
  flex:0 0 auto;position:relative;z-index:1}
.proj-hero .ph-mark svg{width:23px;height:23px;color:#fff;filter:drop-shadow(0 1px 1px rgba(0,0,40,.45));position:relative;z-index:2}
.proj-hero .ph-id{display:flex;flex-direction:column;gap:3px;min-width:0;position:relative;z-index:1}
.proj-hero .ph-name{font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px rgba(0,0,0,.28)}
.proj-hero .ph-meta{font-size:12px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-hero .ph-pills{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap}
.proj-hero .ph-pill{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.18);letter-spacing:.02em;display:inline-flex;align-items:center;gap:5px}
.proj-hero .ph-val{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:2px;text-align:right;position:relative;z-index:1;flex:0 0 auto;cursor:pointer}
/* pass-3: ONLY the $ amount is lifted (engraved shadow); the label stays flat. No box/hover-lift. */
.proj-hero .ph-val .v{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.28)}
.proj-hero .ph-val .l{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.85;line-height:1}
/* 🪼 Commit D polish — empty contract value reads as a muted "Set value" affordance, not a lonely big dash;
   even vertical rhythm with the label + baseline-aligned with the action cluster. */
.proj-hero .ph-val-empty .v{font-size:14px;font-weight:700;opacity:.72}
.proj-hero .ph-val:hover .v{text-decoration:none}
.proj-hero .ph-val-empty:hover .v{opacity:.95}
.proj-hero.op .ph-val .v{font-size:15px;opacity:.92}
/* hero action cluster (reuses the live quick-actions, restyled onto glass) */
.proj-hero .ph-actions{display:flex;gap:8px;margin-left:14px;position:relative;z-index:1}
/* pass-3: ALL 5 circle buttons FILLED uniform white + FLOAT (was: only .primary filled). */
/* V-orb1 — hero action buttons = ORB-MATERIAL spheres (glossy blue orb + white glyph), keep glyphs.
   A lit sphere (lighter top) so they pop off the accent hero band. */
.proj-hero .ph-act{width:36px;height:36px;border-radius:999px;display:grid;place-items:center;cursor:pointer;border:0;
  background:radial-gradient(circle at 34% 26%,color-mix(in srgb,#fff 60%,var(--app-accent)) 0%,color-mix(in srgb,#fff 14%,var(--app-accent)) 44%,var(--app-accent) 74%,color-mix(in srgb,var(--app-accent) 76%,#000) 100%);
  color:#fff;box-shadow:inset 0 1px 1px rgba(255,255,255,.7),inset 0 -2px 4px rgba(0,0,40,.35),0 4px 12px -3px rgba(0,0,0,.4),0 0 0 .5px color-mix(in srgb,var(--app-accent) 30%,transparent);transition:transform var(--motion-fast,.15s) var(--ease-spring,ease),box-shadow var(--motion-fast,.15s),filter var(--motion-fast,.15s)}
.proj-hero .ph-act svg{filter:drop-shadow(0 1px 1px rgba(0,20,60,.4))}
.proj-hero .ph-act svg{width:16px;height:16px}
.proj-hero .ph-act:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:inset 0 1px 1px rgba(255,255,255,.75),inset 0 -2px 4px rgba(0,0,40,.35),0 8px 20px -6px rgba(0,0,0,.45),0 0 0 .5px color-mix(in srgb,var(--app-accent) 38%,transparent)}
.proj-hero .ph-act:active{transform:scale(.94)}
/* V-orb1 — primary action = a brighter orb sphere so it leads the cluster */
.proj-hero .ph-act.primary{background:radial-gradient(circle at 34% 26%,color-mix(in srgb,#fff 72%,var(--app-accent)) 0%,color-mix(in srgb,#fff 28%,var(--app-accent)) 42%,var(--app-accent) 76%,color-mix(in srgb,var(--app-accent) 78%,#000) 100%);color:#fff}
/* mobile: drop the value+actions below the identity so the band doesn't crush the name (audit) */
@media (max-width:640px){
  .proj-hero{padding:14px 16px;gap:12px;flex-wrap:wrap}
  .proj-hero .ph-id{flex:1 1 60%;min-width:0}
  .proj-hero .ph-val{margin-left:0;text-align:left;flex:1 1 100%;order:3}
  .proj-hero .ph-val .v{font-size:20px}
  .proj-hero .ph-actions{margin-left:0;order:4;flex:1 1 100%}
  .proj-hero .ph-presence{margin-left:0;order:5;flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.proj-hero .ph-act{transition:none}.proj-hero .ph-act:active{transform:none}}

/* stepper (G3) — phase-colored stage stepper */
.stepper{display:flex;align-items:center;gap:0;padding:13px 24px;background:var(--surface,#fff);border-bottom:.5px solid var(--chrome-border,rgba(0,0,0,.06));overflow-x:auto;-webkit-overflow-scrolling:touch}
.stepper .st-lead,#pfvTimeline.pfv-timeline .st-lead{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-right:16px;white-space:nowrap;align-self:center;flex:0 0 auto}
.step{display:flex;align-items:center;gap:9px;flex:0 0 auto;cursor:pointer}
.step+.step{margin-left:4px}
.step-medallion{width:26px;height:26px;border-radius:999px;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;background:var(--sc,#6b7280);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 3px 7px -3px var(--sc,#6b7280)}
.step.done .step-medallion{background:var(--sc,#10b981)}
.step.todo .step-medallion{background:color-mix(in srgb,var(--sc,#9aa0a6) 22%,#fff);color:color-mix(in srgb,var(--sc,#6b7280) 80%,#333);box-shadow:none}
.step.current .step-medallion{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 3px color-mix(in srgb,var(--sc) 28%,transparent),0 4px 10px -3px var(--sc)}
.step-label{font-size:11.5px;font-weight:700;color:var(--text-secondary);white-space:nowrap}
.step.current .step-label{color:var(--text-primary)}
.step.todo .step-label{color:var(--text-muted);font-weight:600}
.step-line{width:26px;height:2px;border-radius:2px;background:var(--chrome-border,rgba(0,0,0,.1));margin:0 2px;flex:0 0 auto}
.step-line.done{background:color-mix(in srgb,var(--color-success,#10b981) 55%,transparent)}
.step-more{font-size:11.5px;font-weight:700;color:var(--app-accent);padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--app-accent) 10%,transparent);white-space:nowrap;cursor:pointer;flex:0 0 auto}
/* vitals riding in the stepper lead (health · schedule · needs-you metric-doors) */
.step-vitals{display:flex;gap:14px;margin-right:18px;padding-right:18px;border-right:.5px solid var(--chrome-border,rgba(0,0,0,.1));flex:0 0 auto;align-self:center}
.step-vital{display:flex;flex-direction:column;line-height:1.05;padding:2px 4px;border-radius:8px}
.step-vital .sv-val{font-size:16px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.step-vital .sv-lbl{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
@media (max-width:640px){.step-vitals{display:none}}
/* the retired #pfvTimeline now hosts the pass-2 stepper — un-hide it AND make the
   container itself the flex stepper row (its children are .step/.step-line/.st-lead
   emitted directly into it by pfvRenderTimeline; without flex here they stack vertically). */
#pfvTimeline.pfv-timeline{display:flex;align-items:center;gap:0;padding:11px 22px;background:var(--surface,#fff);border-bottom:.5px solid var(--chrome-border,rgba(0,0,0,.06));overflow-x:auto;-webkit-overflow-scrolling:touch;flex-shrink:0;scrollbar-width:none}
#pfvTimeline.pfv-timeline::-webkit-scrollbar{display:none}
/* spread the steps EVENLY across the width: the connector lines grow to fill the gaps,
   so the medallions distribute across the row instead of packing left with dead space.
   The "+N more" pill at the end absorbs any steps that don't fit. Desktop only — on
   narrow/mobile the row stays a natural-width horizontal scroll strip. */
/* spacer: 0-width by default (mobile = natural scroll strip); grows in the wide layout
   below. Declared BEFORE the @media so the media rule wins on source order (same specificity). */
#pfvTimeline.pfv-timeline .step-spacer{flex:0 0 0;min-width:0}
@media (min-width:861px){
  /* Align the stepper's usable width so the "+N more" pill lines up with the content's
     right edge (the Quick-add pill). The stepper spans the full frame, but the content
     column is inset by the modal-cols right sidebar (192px col + 14px gap + 22px main-col
     right pad + ~16px) — a CONSTANT 244px regardless of viewport (verified by measuring
     frame→content-right at 1280/1440/1680 = 244px each). So a fixed inset is correct + stable. */
  #pfvTimeline.pfv-timeline{overflow-x:hidden;padding-right:244px}
  /* Connector lines GROW EQUALLY so the medallions spread evenly across the full aligned
     width (the slack is distributed between every step, not dumped into one trailing gap).
     The trailing spacer is collapsed to 0 here so the last line carries the run-out to the
     "+N more" pill — keeping it at the padded right edge while the steps stay evenly spaced. */
  #pfvTimeline.pfv-timeline .step-line{flex:1 1 0;min-width:24px}
  #pfvTimeline.pfv-timeline .step-spacer{flex:0 0 0}
  /* labels shrink-cap so the steps NEVER overflow the inset width (which would collapse
     the spacer and push "+N more" past the alignment). Tighter cap at narrower widths. */
  #pfvTimeline.pfv-timeline .step-label{max-width:160px;overflow:hidden;text-overflow:ellipsis}
}
@media (min-width:861px) and (max-width:1520px){
  /* tighter labels + hide the riding vitals so 3 steps always FIT the inset content width
     (otherwise they overflow the spacer and nudge "+N more" past the alignment). */
  #pfvTimeline.pfv-timeline .step-label{max-width:108px}
  #pfvTimeline.pfv-timeline .step-vitals{display:none}
}
#pfvTimeline.pfv-timeline:empty{display:none}
@media (max-width:640px){#pfvTimeline.pfv-timeline{padding:10px 14px;gap:0}}

/* ---- BOARD (pass-2): guiding insight strip + column value rollup ---- */
.board-insight{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:10px 14px 0;padding:13px 18px;border-radius:16px;background:var(--frost-bg-strong,rgba(255,255,255,.82));-webkit-backdrop-filter:var(--frost-blur);backdrop-filter:var(--frost-blur);box-shadow:var(--shadow-e1,0 4px 16px -8px rgba(20,30,48,.2));border:.5px solid color-mix(in srgb,var(--app-accent) 4%,rgba(0,0,0,.05))}
/* the class sets display:flex which beats the UA [hidden]{display:none} — make hidden win
   so the Board-only strip truly disappears off-Board (was leaking onto ledger/full-page). */
.board-insight[hidden]{display:none}
.board-insight .ins{display:flex;flex-direction:column;gap:1px}
.board-insight .ins-v{font-size:20px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.05}
.board-insight .ins-l{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}
.board-insight .ins.alert .ins-v{color:var(--color-error,#c0392b)}
.board-insight .ins.money .ins-v{color:var(--color-success,#137a4b)}
.board-insight .ins-spacer{flex:1}
.board-insight .ins-new-project{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 15px 0 13px;border:none;border-radius:var(--radius-pill);cursor:pointer;
  font:inherit;font-size:13px;font-weight:650;letter-spacing:-.1px;color:var(--on-accent);background:var(--app-accent);flex:0 0 auto;
  box-shadow:0 1px 0 color-mix(in srgb,#fff 22%,transparent) inset,0 2px 8px color-mix(in srgb,var(--app-accent) 30%,transparent);
  transition:filter var(--motion-fast),transform var(--motion-fast),box-shadow var(--motion-fast)}
.board-insight .ins-new-project svg{width:15px;height:15px;flex:0 0 auto}
.board-insight .ins-new-project:hover{filter:brightness(1.06);box-shadow:0 1px 0 color-mix(in srgb,#fff 28%,transparent) inset,0 3px 12px color-mix(in srgb,var(--app-accent) 38%,transparent)}
.board-insight .ins-new-project:active{transform:scale(.97)}
.board-insight .ins-presence{font-size:12px;color:var(--text-secondary)}
/* G3-P4 — Page Guide pill host inside the insight strip + the first-use/quick-action slot above the column track */
.board-insight .ins-guide-host{display:inline-flex;align-items:center;flex-shrink:0}
.board-guide-slot{margin:12px 14px 0}
.board-guide-slot:empty{display:none}
.board-guide-slot .pg-guide,.board-guide-slot .pg-qa-row{margin-bottom:0}
@media (max-width:640px){.board-guide-slot{margin:10px 12px 0}}
/* Tier-C 2: period-over-period delta chip on insight stats */
.board-insight .ins-delta{display:block;font-size:10px;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums;margin-top:1px}
.board-insight .ins-delta.up{color:var(--color-success,#137a4b)}
.board-insight .ins-delta.down{color:var(--text-muted)}
.board-insight .ins-delta.down-bad{color:var(--color-error,#c0392b)}
@media (max-width:640px){.board-insight{gap:14px;margin:8px 12px 0;padding:11px 14px;overflow-x:auto}.board-insight .ins-v{font-size:17px}}
/* ball-in-court / presence stack on board cards (footer) */
.card-presence{display:flex;align-items:center;margin-right:auto}
.card-presence .avatar{width:22px;height:22px;font-size:9.5px;box-shadow:0 0 0 2px var(--card-bg,#fff)}
.card-presence .avatar+.avatar{margin-left:-7px}

/* ---- LIST (pass-2): page-head + rollup band + lt-surface table + chips ---- */
.list-page-head{margin:18px 26px 0}
.list-page-head .lph-kicker{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--app-accent);margin-bottom:4px}
.list-page-head .lph-title{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:0 0 4px}
.list-page-head .lph-sub{color:var(--text-secondary);font-size:13.5px}
/* G3-P4 — page-head row holds the Guide pill top-right; the guide slot sits under the head panel */
.list-page-head .lph-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.list-page-head .lph-guide-host{flex-shrink:0;margin-top:2px}
/* 2026-06-20 — list head trailing cluster: row-density segmented control + guide pill. */
.list-page-head .lph-head-trailing{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-top:2px}
.list-page-head .lph-density{display:inline-flex;align-items:center;gap:2px;background:var(--surface-2,var(--chrome-bg));border:.5px solid var(--chrome-border);border-radius:var(--radius-pill);padding:3px 4px 3px 9px;box-shadow:var(--bevel-top)}
.list-page-head .lph-density-ico{width:13px;height:13px;color:var(--text-muted);margin-right:3px;flex:0 0 13px}
.list-page-head .lph-dens-btn{border:0;background:transparent;color:var(--text-muted);font-size:11.5px;font-weight:700;letter-spacing:-.1px;padding:4px 10px;border-radius:var(--radius-pill);cursor:pointer;font-family:inherit;transition:background var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast)}
.list-page-head .lph-dens-btn:hover:not(.active){color:var(--text-primary)}
.list-page-head .lph-dens-btn:active{transform:scale(.96)}
.list-page-head .lph-dens-btn.active{background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 24%,var(--card-bg)),color-mix(in srgb,var(--app-accent) 15%,var(--card-bg)));color:color-mix(in srgb,var(--app-accent) 86%,#000);box-shadow:var(--bevel-top),inset 0 0 0 .5px color-mix(in srgb,var(--app-accent) 30%,transparent)}
.list-page-head .lph-dens-btn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 22%,transparent)}
@media (max-width:640px){.list-page-head .lph-density .lph-dens-btn{padding:4px 7px}.list-page-head .lph-head-trailing{flex-wrap:wrap}}
#listGuideSlot:empty{display:none}
#listGuideSlot{margin:0}
#listGuideSlot .pg-guide,#listGuideSlot .pg-qa-row{margin-bottom:0}
/* elevated KPI card (matches proto 02): radius + e2 shadow + hairline border give the band
   real depth off the page (was flat — no shadow/border). gap:1px on the tinted bg keeps the
   cells as one continuous hairline-divided strip; the DEPTH is the container's shadow + the
   cells' surface gradient (no per-cell lift — they're inside overflow:hidden, lifting clips). */
/* INDIVIDUAL floating KPI cards (was a hairline-divided strip that read "blocky" — the 1px
   gap + flat cell edges looked like crammed rectangles). Now a transparent gap'd grid; each
   .ru-cell is its own rounded card with a soft shadow + hover lift (safe to lift now — no
   overflow:hidden container clipping them). gap:12px gives clean separation. */
.rollup{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:14px 26px 0}
.ru-cell{background:var(--surface-grad,linear-gradient(160deg,#fff,#f7f8fb));padding:15px 18px;display:flex;flex-direction:column;gap:3px;position:relative;border-radius:16px;border:.5px solid color-mix(in srgb,var(--app-accent) 7%,rgba(0,0,0,.05));box-shadow:var(--bevel-top),var(--shadow-e2);transition:transform var(--motion-fast,.15s) var(--ease-spring,ease),box-shadow var(--motion-fast,.15s)}
.ru-cell .ru-l{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
.ru-cell .ru-v{font-size:22px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.05}
.ru-cell .ru-s{font-size:11px;color:var(--text-secondary);font-weight:600}
.ru-cell.money .ru-v{color:var(--color-success,#137a4b)}
.ru-cell.alert .ru-v{color:var(--color-error,#c0392b)}
.ru-cell.warn .ru-v{color:var(--co-pending-fg,#b45309)}
@media (max-width:1100px){.rollup{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.rollup{grid-template-columns:repeat(2,1fr);margin:12px 12px 0}.list-page-head{margin:14px 14px 0}.list-page-head .lph-title{font-size:21px}}
/* lt-surface: one raised pane wrapping the table with a sticky frosted thead */
/* overflow-x:auto (NOT the old `overflow:hidden` shorthand) so the wide 21-column table
   SCROLLS horizontally inside this card instead of being clipped off the right edge.
   This class is List-only (single use); the shorthand was silently overriding
   .list-table-wrap's overflow-x:auto since it's defined later in the file. */
/* width:auto (override .list-table-wrap's width:100%) so the 26px side margins actually
   apply symmetrically — width:100% + margins overflow the container and collapse the right
   gutter to ~0 (the table card ran flush to the right edge). Block auto-width fills the space
   BETWEEN the equal 26px margins; the table still scrolls horizontally inside via min-width. */
.lt-surface{margin:14px 26px 36px;width:auto;max-width:none;border-radius:18px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;box-shadow:var(--shadow-e2,0 6px 20px -8px rgba(20,30,48,.16));border:.5px solid rgba(0,0,0,.05);background:var(--card-bg,#fff)}
@media (max-width:640px){.lt-surface{margin:12px 12px 28px}}
.lt-surface table.lt thead th{position:sticky;top:0;z-index:2;background:var(--frost-bg-strong,rgba(255,255,255,.9));-webkit-backdrop-filter:var(--frost-blur);backdrop-filter:var(--frost-blur)}
table.lt tbody tr{transition:background var(--motion-fast,.15s)}
table.lt tbody tr:hover td{background:color-mix(in srgb,var(--app-accent) 4%,transparent)}
/* calm dot-pills for priority + risk */
.pr-chip,.risk-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.02em;background:var(--surface-2,rgba(120,120,128,.12));color:var(--text-secondary)}
.pr-chip i,.risk-chip i{width:6px;height:6px;border-radius:999px;background:currentColor;flex:0 0 auto}
/* Unified risk + priority chip coloring (item 4): both families get a faint semantic
   bg tint matching their level, so a chip reads identically whether it's risk or
   priority — a tinted fill + colored text/dot, never a neutral grey with only a dot. */
.pr-chip.pr-critical,.pr-chip.pr-high,.risk-chip.risk-high{color:var(--color-error,#c0392b);background:var(--color-error-bg,#fdeaea)}
.pr-chip.pr-medium,.risk-chip.risk-medium{color:var(--co-pending-fg,#b45309);background:var(--color-warning-bg,color-mix(in srgb,var(--color-warning) 14%,transparent))}
.pr-chip.pr-low,.pr-chip.pr-normal,.risk-chip.risk-low{color:var(--text-secondary)}
/* money + cost-plus + meter cells */
.lt-money{font-variant-numeric:tabular-nums;font-weight:700;color:var(--color-success,#137a4b)}
.lt-money.cp{color:var(--color-info,#2563c9)}
.meter{display:inline-flex;flex-direction:column;gap:3px;min-width:62px}
.meter .mt-pct{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.meter.over .mt-pct{color:var(--color-error,#c0392b)}
.meter.crit .mt-pct{color:var(--co-pending-fg,#b45309)}
.meter.idle .mt-pct{color:var(--text-muted)}

/* ---- DASHBOARD (pass-2): greeting becomes the lit-glass hero (G4) ---- */
/* 2026-06-20 — greeting reads as a GLASS HERO (Apple marketing caliber): a deeper
   diagonal accent gradient, a specular top-edge bevel + soft lower inner-shadow so
   the band reads as a real lit pane, a layered drop shadow, and a second sweeping
   highlight for depth. The composed date/count meta unit + bold display title live
   on top. */
.dashboard-header.dash-greet-band{position:relative;overflow:hidden;border-radius:22px;padding:22px 26px;margin-bottom:16px;color:var(--hero-ink,var(--on-accent,#fff));background:linear-gradient(135deg,color-mix(in srgb,var(--app-accent) 82%,#000) 0%,var(--app-accent) 48%,color-mix(in srgb,var(--app-accent) 84%,#fff) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -22px 44px -28px rgba(0,0,0,.42),0 22px 60px -22px color-mix(in srgb,var(--app-accent) 50%,rgba(20,30,48,.5));align-items:center}
.dashboard-header.dash-greet-band::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(130% 90% at 0% 0%,rgba(255,255,255,.22),transparent 52%),linear-gradient(120deg,transparent 60%,rgba(255,255,255,.10) 78%,transparent 92%)}
.dashboard-header.dash-greet-band .dgb-text{position:relative;z-index:1;min-width:0}
.dashboard-header.dash-greet-band .dashboard-title{color:#fff;letter-spacing:-.025em;font-size:30px;line-height:1.04;text-shadow:0 1px 1px rgba(0,0,0,.14)}
@media (min-width:1100px){.dashboard-header.dash-greet-band .dashboard-title{font-size:32px}}
.dashboard-header.dash-greet-band .dashboard-subtitle{color:rgba(255,255,255,.92);margin-top:6px}
/* Composed date/count meta unit — pill-segmented facts (date · active jobs · needs-you),
   each a frosted glass chip so the subtitle reads as a deliberate unit, not a sentence. */
.dgb-meta{display:inline-flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:9px;position:relative;z-index:1}
.dgb-meta .dgb-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:999px;background:rgba(255,255,255,.16);border:.5px solid rgba(255,255,255,.30);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:12px;font-weight:700;letter-spacing:-.1px;color:#fff;white-space:nowrap}
.dgb-meta .dgb-chip svg{width:12px;height:12px;flex:0 0 12px;opacity:.92}
.dgb-meta .dgb-chip b{font-variant-numeric:tabular-nums;font-weight:800}
.dgb-meta .dgb-chip.alert{background:rgba(255,255,255,.92);color:color-mix(in srgb,var(--color-error) 86%,#000);border-color:rgba(255,255,255,.6)}
/* S1-C7 🧊 — dashboard triage HOT-ZONE (under the greeting band, above the grid). A
   floating .rt-panel-styled band that surfaces me-scoped + portfolio severity as doors;
   the whole element is absent from the DOM when clear (calm), so no empty chrome. */
#dashNeedsYou.dash-hotzone-live{margin:0 0 14px}
.dash-hotzone{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-radius:16px;background:var(--card-bg,#fff);border:.5px solid color-mix(in srgb,var(--chrome-border,rgba(20,30,48,.14)) 78%,transparent);box-shadow:0 10px 30px -20px rgba(20,30,48,.35),inset 0 1px 0 rgba(255,255,255,.5)}
.dash-hotzone.is-urgent{border-color:color-mix(in srgb,var(--color-error) 42%,transparent);box-shadow:0 12px 34px -20px color-mix(in srgb,var(--color-error) 40%,rgba(20,30,48,.4)),inset 0 1px 0 rgba(255,255,255,.5)}
.dash-hotzone .dhz-lead{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;letter-spacing:-.15px;color:var(--text-secondary,var(--text-muted));white-space:nowrap}
.dash-hotzone.is-urgent .dhz-lead{color:color-mix(in srgb,var(--color-error) 84%,var(--text-primary))}
.dash-hotzone .dhz-lead svg{width:15px;height:15px;flex:0 0 15px}
.dash-hotzone .dhz-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.dhz-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px;border-radius:999px;border:.5px solid color-mix(in srgb,var(--chrome-border,rgba(20,30,48,.14)) 70%,transparent);background:var(--surface-2,rgba(20,30,48,.03));font-size:12.5px;font-weight:700;letter-spacing:-.1px;color:var(--text-primary);cursor:pointer;white-space:nowrap;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.dhz-chip svg{width:13px;height:13px;flex:0 0 13px;opacity:.85}
.dhz-chip b{font-variant-numeric:tabular-nums;font-weight:800}
.dhz-chip:hover{transform:translateY(-1px);box-shadow:0 6px 16px -8px rgba(20,30,48,.3)}
.dhz-chip:focus-visible{outline:2px solid var(--app-accent);outline-offset:2px}
.dhz-chip.dhz-act{background:color-mix(in srgb,var(--color-error) 12%,transparent);border-color:color-mix(in srgb,var(--color-error) 34%,transparent);color:color-mix(in srgb,var(--color-error) 88%,#000)}
.dhz-chip.dhz-act svg{opacity:1}
.dhz-chip.dhz-act:hover{background:color-mix(in srgb,var(--color-error) 18%,transparent)}
.dhz-chip.dhz-watch{background:color-mix(in srgb,var(--color-warning,#c8890a) 13%,transparent);border-color:color-mix(in srgb,var(--color-warning,#c8890a) 30%,transparent);color:color-mix(in srgb,var(--color-warning,#c8890a) 74%,#000)}
.dhz-chip.dhz-watch:hover{background:color-mix(in srgb,var(--color-warning,#c8890a) 20%,transparent)}
@media (max-width:640px){.dash-hotzone{padding:11px 13px;gap:9px}.dhz-chip{height:28px;padding:0 11px;font-size:12px}}
.dashboard-header.dash-greet-band .dashboard-controls{position:relative;z-index:1}
/* G3-P4 — Guide pill on the greeting band reads as a frosted control on the gradient; guide slot sits below the hero */
.dashboard-header.dash-greet-band .dash-guide-host{display:inline-flex;align-items:center;flex-shrink:0}
.dashboard-header.dash-greet-band .dash-guide-host .pg-cap{background:color-mix(in srgb,#fff 18%,transparent);border-color:color-mix(in srgb,#fff 28%,transparent);color:#fff;-webkit-backdrop-filter:var(--frost-blur);backdrop-filter:var(--frost-blur)}
.dashboard-header.dash-greet-band .dash-guide-host .pg-cap:hover{background:color-mix(in srgb,#fff 26%,transparent)}
#dashGuideSlot:empty{display:none}
#dashGuideSlot{margin:0 0 14px}
#dashGuideSlot .pg-guide{margin-bottom:0}
/* on-glass controls read on the green band */
.dashboard-header.dash-greet-band .dash-customize-btn,.dashboard-header.dash-greet-band .dash-layout-switcher{color:#fff}
/* Pass-2 — on-glass control chrome reads as frosted glass PILLS (proto .gb-pill ghost).
   Scoped to the greeting band so the same buttons keep their normal chrome elsewhere. */
.dashboard-header.dash-greet-band .dash-customize-btn{background:rgba(255,255,255,.14);border:0.5px solid rgba(255,255,255,.34);border-radius:999px;padding:0 15px;height:34px;font-size:13px;font-weight:700;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);letter-spacing:-.1px}
.dashboard-header.dash-greet-band .dash-customize-btn:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.5)}
.dashboard-header.dash-greet-band .dash-customize-btn.active{background:#fff;color:var(--app-accent);border-color:#fff;box-shadow:0 6px 16px -7px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.6)}
.dashboard-header.dash-greet-band .dash-controls-more > summary{background:rgba(255,255,255,.14);border:0.5px solid rgba(255,255,255,.34);border-radius:999px;color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.dashboard-header.dash-greet-band .dash-controls-more[open] > summary{background:rgba(255,255,255,.24)}
/* 2026-06-05 📘 — the layout-preset switcher ("Admin Default") only appears in Customize
   mode (was always visible, cluttering the band). Glass-pill styled to match the CTAs. */
.dashboard-header.dash-greet-band .dash-layout-switcher{display:none}
.dashboard-shell.dash-edit-mode .dashboard-header.dash-greet-band .dash-layout-switcher{display:inline-flex}
.dashboard-header.dash-greet-band .dash-layout-switcher select,.dashboard-header.dash-greet-band .dash-layout-switcher button{background:rgba(255,255,255,.14);border:0.5px solid rgba(255,255,255,.34);border-radius:999px;color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);height:34px;font-weight:700;font-size:13px}
/* greeting-band CTA pills — one solid command + ghosts. Real-target wired only. */
.dash-greet-cta{height:34px;padding:0 15px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;letter-spacing:-.1px;border:0;transition:transform var(--motion-fast) var(--ease-spring),background var(--motion-fast),box-shadow var(--motion-base)}
.dash-greet-cta svg{width:14px;height:14px;flex:0 0 14px}
.dash-greet-cta.ghost{color:#fff;border:0.5px solid rgba(255,255,255,.34);background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.dash-greet-cta.ghost:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.5);transform:translateY(-1px)}
.dash-greet-cta.solid{background:#fff;color:var(--app-accent);box-shadow:0 6px 16px -7px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.6)}
.dash-greet-cta.solid:hover{transform:translateY(-1px);box-shadow:0 9px 20px -8px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.6)}
.dash-greet-cta:active{transform:translateY(0) scale(.97)}
.dash-greet-cta-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#fff;color:var(--app-accent);font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;box-shadow:0 1px 3px rgba(0,0,0,.18);letter-spacing:-.2px}
/* On the ghost pill the count is a solid white chip so the number POPS against the glass. */
.dash-greet-cta.ghost .dash-greet-cta-count{background:#fff;color:var(--app-accent)}
.dash-greet-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
@media (max-width:640px){.dashboard-header.dash-greet-band{padding:14px 16px;border-radius:16px}.dash-greet-cta .dgc-label{display:none}.dash-greet-cta{padding:0 12px}}

/* ---- CALENDAR (pass-3 _STANDARD.md A.4–A.5): this-period band — raised white cards, depth via ELEVATION not the old accent-tint bg/faux-divider trick ---- */
.cal-week-strip{display:grid;grid-template-columns:1.1fr repeat(4,1fr);gap:10px;margin:0 0 2px;background:none}
.cal-week-strip .ws-lead{background:var(--card-bg,#fff);border:.5px solid var(--chrome-border);box-shadow:var(--shadow-e2);border-radius:14px;padding:13px 16px;display:flex;flex-direction:column;gap:2px;justify-content:center}
.cal-week-strip .wsl-kicker{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--app-accent)}
/* pass-3 AUDIT FIX: explicit --text-primary — the title sits on the white/cream .ws-lead CARD but was inheriting the matte's --on-app-bg (near-white) → near-white-on-cream INVISIBLE on sepia (1.03 contrast). */
.cal-week-strip .wsl-title{font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary)}
.cal-week-strip .wsl-sub{font-size:11.5px;color:var(--text-secondary);font-weight:600}
.cal-week-strip .ws-cell{background:var(--card-bg,#fff);border:.5px solid var(--chrome-border);box-shadow:var(--shadow-e2);border-radius:14px;padding:13px 14px;display:flex;flex-direction:column;gap:1px}
/* pass-3 AUDIT FIX: explicit --text-primary — the metric value sits on the white .ws-cell card but inherited the matte's --on-app-bg → invisible on sepia. (the .alert/.warn/.ok variants override with semantic color.) */
.cal-week-strip .wsc-v{font-size:22px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.05;color:var(--text-primary)}
.cal-week-strip .wsc-l{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
.cal-week-strip .wsc-tag{font-size:10px;font-weight:600;color:var(--text-secondary)}
.cal-week-strip .ws-cell.alert .wsc-v{color:var(--color-error,#c0392b)}
.cal-week-strip .ws-cell.warn .wsc-v{color:var(--co-pending-fg,#b45309)}
.cal-week-strip .ws-cell.ok .wsc-v{color:var(--color-teal,#0d9488)}
@media (max-width:900px){.cal-week-strip{grid-template-columns:repeat(2,1fr)}.cal-week-strip .ws-lead{grid-column:1 / -1}}

/* ---- GANTT (pass-2): portfolio-timeline guiding header ---- */
.gantt-lead{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:0 0 12px;padding:14px 18px;border-radius:16px;background:var(--frost-bg-strong,rgba(255,255,255,.82));-webkit-backdrop-filter:var(--frost-blur);backdrop-filter:var(--frost-blur);box-shadow:var(--shadow-e2,0 6px 20px -8px rgba(20,30,48,.18));border:.5px solid color-mix(in srgb,var(--app-accent) 4%,rgba(0,0,0,.05))}
.gantt-lead .gl-headline{display:flex;flex-direction:column;gap:2px;min-width:180px}
.gantt-lead .gl-kicker{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--app-accent)}
.gantt-lead .gl-title{font-size:17px;font-weight:800;letter-spacing:-.01em}
.gantt-lead .gl-title b{color:var(--color-error,#c0392b)}
.gantt-lead .gl-sub{font-size:11.5px;color:var(--text-secondary);font-weight:600}
.gantt-lead .gl-cell{display:flex;flex-direction:column;gap:1px;padding:4px 10px;border-radius:10px}
.gantt-lead .glc-v{font-size:20px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.05}
.gantt-lead .glc-l{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
.gantt-lead .gl-cell.alert .glc-v{color:var(--color-error,#c0392b)}
.gantt-lead .gl-cell.ok .glc-v{color:var(--color-success,#137a4b)}
.gantt-lead .gl-spacer{flex:1}
.gantt-lead .gl-presence{font-size:11px;color:var(--text-secondary)}
@media (max-width:640px){.gantt-lead{gap:12px;padding:11px 14px}.gantt-lead .glc-v{font-size:17px}}

/* ---- LOOKAHEAD (pass-2): 4 headline counters in the hero ----
   The live .fi-hero is a light/transparent header (not a dark band), so the
   counters use theme text tokens (readable on light), with semantic accents. */
.fi-hero-counters{display:flex;gap:20px;margin-top:12px;flex-wrap:wrap}
.fi-hero-counters .fhc{display:flex;flex-direction:column;gap:0}
.fi-hero-counters .fhc-v{font-size:22px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.05;color:var(--text-primary)}
.fi-hero-counters .fhc-l{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}
.fi-hero-counters .fhc.alert .fhc-v{color:var(--color-error,#c0392b)}
.fi-hero-counters .fhc.warn .fhc-v{color:var(--co-pending-fg,#b45309)}
@media (max-width:640px){.fi-hero-counters{gap:14px;margin-top:10px}.fi-hero-counters .fhc-v{font-size:18px}}

/* ---- PT4 financial rollup band (CO/estimates/PO/invoices/SOV/financials) ---- */
.fin-rollup{display:flex;align-items:stretch;gap:0;margin:0 0 12px;border-radius:16px;overflow:hidden;background:var(--card-bg,#fff);box-shadow:var(--shadow-e2,0 6px 20px -8px rgba(20,30,48,.16));border:.5px solid rgba(0,0,0,.05)}
.fin-rollup .ru-b{flex:1;display:flex;flex-direction:column;gap:3px;padding:16px 18px;justify-content:center}
.fin-rollup .ru-b .ru-l{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
.fin-rollup .ru-b .ru-v{font-size:23px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.05}
.fin-rollup .ru-b.pos .ru-v{color:var(--color-success,#137a4b)}
.fin-rollup .ru-b.neg .ru-v{color:var(--color-error,#c0392b)}
/* pass-3 AUDIT FIX: --on-accent (was #fff) — the band's mid stop is pure --app-accent, so white text fails on the contrast/yellow theme (1.41). --on-accent is black there. SHARED by CO/PO/Invoices/SOV → fixes 4 surfaces. */
.fin-rollup .ru-b.total{background:linear-gradient(135deg,color-mix(in srgb,var(--app-accent) 78%,#000) 0%,var(--app-accent) 60%,color-mix(in srgb,var(--app-accent) 82%,#fff) 100%);color:var(--on-accent);box-shadow:var(--lg-edge,inset 0 1px 0 rgba(255,255,255,.2))}
/* pass-3 AUDIT FIX: derive from --on-accent (were hardcoded white → white-on-yellow on contrast theme). */
.fin-rollup .ru-b.total .ru-l{color:color-mix(in srgb,var(--on-accent) 85%,transparent)}
.fin-rollup .ru-b.total .ru-v{color:var(--on-accent)}
/* 📔 fix: the sub-line + door cue on the accent tile inherited muted colors designed for white tiles —
   near-invisible on the blue gradient ("budget total" bug). Everything on .total reads on-accent. */
.fin-rollup .ru-b.total .ru-s{color:color-mix(in srgb,var(--on-accent) 78%,transparent)}
.fin-rollup .ru-b.total .ru-door-cue{color:color-mix(in srgb,var(--on-accent) 80%,transparent)}
/* The +/= operators center on the band height. Because every .ru-b is justify-content:center, its
   VALUE (the middle line) sits at the tile's vertical center — so centering the operator on the same
   height lands it exactly on the value row: "$X + $Y = $Z" reads as one row. Content-tracking, no magic
   numbers. (The label sits above + any sub below are symmetric enough that the value stays centered.) */
.fin-rollup .ru-op{display:flex;align-items:center;justify-content:center;padding:0 4px;font-size:22px;font-weight:300;color:var(--text-muted);line-height:1}
/* Pass-2 PO rollup: 4-metric band (no operators) + a small sub-line per cell + commit bar */
.fin-rollup.po-rollup .ru-b{gap:2px}
.fin-rollup .ru-b .ru-s{font-size:10.5px;font-weight:600;color:var(--text-secondary);margin-top:1px}
.fin-rollup .ru-b.warn .ru-v{color:var(--co-pending-fg,#b45309)}
.commit-bar{display:flex;height:8px;border-radius:999px;overflow:hidden;background:var(--surface-2,#e5e5ea);margin:-4px 0 12px;box-shadow:inset 0 1px 2px rgba(0,0,0,.08)}
.commit-bar i{display:block;height:100%}
.commit-bar .cb-exec{background:linear-gradient(180deg,#3fd07a,var(--color-success,#10b981))}
.commit-bar .cb-unx{background:linear-gradient(180deg,color-mix(in srgb,var(--color-warning,#f59e0b) 80%,#fff),var(--color-warning,#f59e0b))}
.commit-bar + .fin-rollup-callout{margin-top:4px}   /* avoid the callout's -6px pulling it over the bar */
/* Pass-2 PO HERO (mirrors invoice .ru-lead-od): a FLAT band segment — NO edge-strip border,
   NO outer box-shadow, NO lift — differentiated only by an inner accent-tint gradient + a
   larger accent figure, exactly like the sibling. Carries the % pill + buyout micro-bar. */
.fin-rollup.po-rollup .ru-b.ru-po-hero{flex:1.5;gap:4px;background:linear-gradient(160deg,color-mix(in srgb,var(--app-accent) 9%,var(--card-bg)),var(--card-bg) 62%)}
.fin-rollup.po-rollup .ru-b.ru-po-hero .ru-v{font-size:29px;letter-spacing:-.03em;color:color-mix(in srgb,var(--app-accent) 88%,var(--text-primary))}
.fin-rollup.po-rollup .ru-b.ru-po-hero .ru-l{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap}
.ru-po-ctx{font-size:9px;font-weight:800;letter-spacing:.02em;padding:2px 7px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--app-accent) 16%,transparent);color:color-mix(in srgb,var(--app-accent) 90%,var(--text-primary));text-transform:none}
.ru-po-microbar{height:5px;border-radius:999px;overflow:hidden;background:color-mix(in srgb,var(--text-primary) 8%,transparent);margin-top:7px}
.ru-po-microbar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--app-accent) 78%,var(--color-success)),var(--app-accent));transition:width var(--motion-base) var(--ease-spring)}
@media (max-width:760px){.fin-rollup.po-rollup .ru-b.ru-po-hero{flex:1 1 100%}}
@media (prefers-reduced-motion:reduce){.ru-po-microbar i{transition:none}}
/* Pass-2 PO commit bar — 3-read finish: 9px bar + tabular legend (mirrors .inv-coll-legend)
   so executed / unexecuted / headroom read without hover (no rule-11 hover-reliance). */
.commit-bar.commit-bar-3{height:9px;margin:0 0 8px}
.commit-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 12px;font-size:11px;font-weight:600;color:var(--text-muted);font-variant-numeric:tabular-nums}
.commit-legend span{display:inline-flex;align-items:center;gap:6px}
.commit-legend .cl-sw{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.commit-legend .cl-exec{background:var(--color-success)}
.commit-legend .cl-unx{background:var(--color-warning)}
.commit-legend .cl-head{background:color-mix(in srgb,var(--text-primary) 16%,transparent)}
.commit-legend + .fin-rollup-callout{margin-top:0}
@media (max-width:760px){.fin-rollup.po-rollup .ru-b:last-child{flex:1 1 100%}}  /* % of Contract anchors full-width on mobile */
.fin-rollup-callout{display:flex;align-items:center;gap:9px;margin:-6px 0 12px;padding:10px 16px;border-radius:12px;font-size:12.5px;font-weight:600;color:var(--co-pending-fg,#b45309);background:var(--color-warning-bg,#fdf3e0)}
.fin-rollup-callout .frc-dot{width:8px;height:8px;border-radius:999px;background:var(--color-warning,#f59e0b);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-warning,#f59e0b) 25%,transparent);flex:0 0 auto}
.fin-rollup-callout b{color:var(--text-primary)}
.fin-rollup-callout.alert{color:var(--color-error,#c0392b);background:var(--color-error-bg,#fdeaea)}
.fin-rollup-callout.alert .frc-dot{background:var(--color-error,#ef4444);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-error,#ef4444) 25%,transparent)}
/* ── CO rollup math story: Original + Approved = Revised contract make-up bar ─────
   Real data: original baseline, approved adds, pending projection, scaled to projected.
   Hover a segment → the matching tile blooms (interactive spine, not static viz). */
.cofin-bar{position:relative;height:11px;border-radius:999px;overflow:hidden;background:var(--surface-3,var(--surface-2,#e5e5ea));box-shadow:inset 0 1px 2px rgba(0,0,0,.08);margin:-4px 0 12px}
.cofin-bar i{position:absolute;top:0;bottom:0;cursor:default}
.cofin-bar .cfb-orig{left:0;background:linear-gradient(90deg,color-mix(in srgb,var(--app-accent) 70%,#fff),var(--app-accent));border-radius:999px 0 0 999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.cofin-bar .cfb-appr{background:linear-gradient(90deg,color-mix(in srgb,var(--color-success) 78%,#fff),var(--color-success));box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.cofin-bar .cfb-pend{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--color-warning) 60%,transparent),color-mix(in srgb,var(--color-warning) 60%,transparent) 4px,color-mix(in srgb,var(--color-warning) 30%,transparent) 4px,color-mix(in srgb,var(--color-warning) 30%,transparent) 8px)}
/* 📔 credit carve-out (net-deductive COs): a success-toned reduction hatch — visually "money taken back
   out of the original", distinct from the solid additive-growth segment. */
.cofin-bar .cfb-credit{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--color-success) 55%,transparent),color-mix(in srgb,var(--color-success) 55%,transparent) 4px,color-mix(in srgb,var(--color-success) 22%,transparent) 4px,color-mix(in srgb,var(--color-success) 22%,transparent) 8px)}
.cofin-bar-legend .cfl-credit{background:repeating-linear-gradient(45deg,var(--color-success),var(--color-success) 3px,color-mix(in srgb,var(--color-success) 35%,transparent) 3px,color-mix(in srgb,var(--color-success) 35%,transparent) 6px)}
.cofin-bar i.cfb-hot{filter:brightness(1.08) saturate(1.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.cofin-bar-legend{display:flex;flex-wrap:wrap;gap:14px;margin:-6px 0 12px;font-size:11px;font-weight:600;color:var(--text-secondary)}
.cofin-bar-legend span{display:inline-flex;align-items:center;gap:6px}
.cofin-bar-legend i{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
/* the matching rollup tile blooms when its bar segment is hovered */
.fin-rollup.cofin-rollup .ru-b.cofin-bloom{background:color-mix(in srgb,var(--app-accent) 6%,var(--card-bg));box-shadow:var(--bevel-top),var(--shadow-e1)}
.fin-rollup.cofin-rollup .ru-b.total.cofin-bloom{filter:brightness(1.06)}
@media (prefers-reduced-motion:no-preference){.cofin-bar i{transition:width var(--motion-slow,420ms) var(--ease-out),filter var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out)}.fin-rollup.cofin-rollup .ru-b{transition:background var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out)}}
.fin-rollup.cofin-rollup .ru-op{flex:0 0 auto}
@media (max-width:760px){.fin-rollup.cofin-rollup .ru-op{display:none}}
/* Pending Exposure becomes a door — contained rounded affordance (no edge-strip), reads as a door at rest via a quiet trailing chevron */
.fin-rollup.cofin-rollup .ru-b.co-pend-door{cursor:pointer;position:relative}
.fin-rollup.cofin-rollup .ru-b.co-pend-door .ru-l{display:inline-flex;align-items:center;gap:5px}
.fin-rollup.cofin-rollup .ru-b.co-pend-door .ru-door-cue{display:inline-flex;align-items:center;color:var(--co-pending-fg,#b45309);opacity:.7}
.fin-rollup.cofin-rollup .ru-b.co-pend-door .ru-door-cue svg{width:11px;height:11px}
.fin-rollup.cofin-rollup .ru-b.co-pend-door:hover{background:color-mix(in srgb,var(--color-warning) 8%,var(--card-bg))}
.fin-rollup.cofin-rollup .ru-b.co-pend-door:hover .ru-door-cue{opacity:1}
.fin-rollup.cofin-rollup .ru-b.co-pend-door:active{transform:scale(.985)}
.fin-rollup.cofin-rollup .ru-b.co-pend-door:focus-visible{outline:2px solid color-mix(in srgb,var(--color-warning) 60%,transparent);outline-offset:-2px;border-radius:14px}
@media (prefers-reduced-motion:no-preference){.fin-rollup.cofin-rollup .ru-b.co-pend-door{transition:background var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-spring)}}
/* Generic rollup metric-door (Track-Q "metrics are doors" — CO Original/Approved/Revised, invoice/PO/SOV tiles).
   A contained, rounded affordance: a quiet trailing chevron that reads as a door at rest, a soft tinted hover
   (no edge-strip), a scale-press, and a real focus ring for keyboard. Mirrors the bespoke pending-door quality. */
.fin-rollup .ru-b.metric-door{cursor:pointer;position:relative}
.fin-rollup .ru-b.metric-door .ru-l{display:inline-flex;align-items:center;gap:5px}
.fin-rollup .ru-b.metric-door .ru-door-cue{display:inline-flex;align-items:center;color:var(--text-muted);opacity:.55}
.fin-rollup .ru-b.metric-door .ru-door-cue svg{width:11px;height:11px}
.fin-rollup .ru-b.metric-door:hover{background:var(--hover-overlay,color-mix(in srgb,var(--text-primary) 4%,var(--card-bg)))}
.fin-rollup .ru-b.metric-door:hover .ru-door-cue{opacity:.9}
.fin-rollup .ru-b.metric-door:active{transform:scale(.985)}
.fin-rollup .ru-b.metric-door:focus-visible{outline:2px solid color-mix(in srgb,var(--app-accent) 60%,transparent);outline-offset:-2px;border-radius:14px}
@media (prefers-reduced-motion:no-preference){.fin-rollup .ru-b.metric-door{transition:background var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-spring)}}
/* CO line-item grid: tactile rows (contained rounded tint hover — NO lift inside the list, rule 7b) + clearer cost→price→margin numerics */
.co-line-row.co-line-tactile{border-radius:var(--radius-md);transition:background var(--motion-fast) var(--ease-out)}
.co-line-row.co-line-tactile:hover{transform:none;box-shadow:var(--bevel-top),var(--shadow-e1);background:color-mix(in srgb,var(--app-accent) 5%,var(--card-bg))}
.co-line-amts{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex-shrink:0;text-align:right}
.co-line-price{font-size:14px;font-weight:800;color:var(--text-primary);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.co-line-cm{font-size:10px;font-weight:700;color:var(--text-muted);font-variant-numeric:tabular-nums}
.co-line-cm .pos{color:var(--color-success)}.co-line-cm .neg{color:var(--color-error)}
/* SOV rollup: completion ring leads the band */
.sov-rollup .sov-ring{flex:0 0 auto;width:74px;height:74px;border-radius:999px;margin:8px 16px;display:grid;place-items:center;background:conic-gradient(var(--color-success,#34c759) var(--ring,0deg),var(--surface-2,rgba(120,120,128,.18)) 0)}
.sov-rollup .sov-ring-inner{width:54px;height:54px;border-radius:999px;background:var(--card-bg,#fff);display:grid;place-items:center;box-shadow:var(--shadow-e1)}
.sov-rollup .sov-ring .srv{font-size:16px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.sov-rollup .sov-ring .srl{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}
@media (max-width:760px){.sov-rollup .sov-ring{margin:8px auto}}
.sov-meter{margin:-6px 0 12px;padding:11px 16px 13px;border-radius:14px;background:var(--card-bg);box-shadow:var(--shadow-e2);border:.5px solid rgba(0,0,0,.05)}
.sov-meter-track{position:relative;height:12px;border-radius:999px;background:var(--surface-2);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.08)}
.sov-meter-fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px 0 0 999px;background:linear-gradient(90deg,color-mix(in srgb,var(--color-success) 82%,#000),var(--color-success));box-shadow:var(--bevel-top);transition:width var(--motion-slow,.32s) var(--ease-spring)}
.sov-meter-ret{position:absolute;top:0;bottom:0;background-image:repeating-linear-gradient(45deg,color-mix(in srgb,var(--color-warning) 55%,transparent) 0 5px,transparent 5px 10px);background-color:color-mix(in srgb,var(--color-warning) 16%,transparent)}
.sov-meter-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:9px;font-size:11.5px;font-weight:600;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.sov-meter-legend span{display:inline-flex;align-items:center;gap:6px}
.sml-sw{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.sml-bill{background:var(--color-success)}
.sml-ret{background-image:repeating-linear-gradient(45deg,color-mix(in srgb,var(--color-warning) 70%,transparent) 0 3px,transparent 3px 6px);background-color:color-mix(in srgb,var(--color-warning) 22%,transparent)}
.sml-bal{background:var(--surface-3,#e6ddcf)}
.sov-meter-period{margin-left:auto;color:color-mix(in srgb,var(--color-success) 72%,var(--text-primary));font-weight:700}
@media (prefers-reduced-motion:reduce){.sov-meter-fill{transition:none}}
@media (max-width:560px){.sov-meter-period{margin-left:0}}
/* Invoices (AR) rollup — Pass-2: 5-metric command band led by overdue-receivable (accent
   figure on glass, NOT a red wash/edge-strip) + a collected-vs-outstanding bar below. */
.fin-rollup.inv-rollup .ru-b{gap:2px}
.fin-rollup.inv-rollup .ru-b.ru-lead-od .ru-v{font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1.02;color:var(--color-error,#c0392b)}
.fin-rollup.inv-rollup .ru-b.ru-lead-od{background:linear-gradient(135deg,color-mix(in srgb,var(--color-error) 7%,var(--card-bg)),var(--card-bg) 62%)}
.fin-rollup.inv-rollup .ru-b.ru-lead-od .ru-od-ico{width:9px;height:9px;flex:0 0 auto}
.fin-rollup.inv-rollup .ru-b .ru-clr-ico{width:11px;height:11px;color:var(--color-success);vertical-align:-1.5px;margin-right:3px}
@media (max-width:760px){.fin-rollup.inv-rollup .ru-b.ru-lead-od .ru-v{font-size:25px}}
/* Pass-2 verify — per-row invoice aging chip (proto 32 at-a-glance aging). Pill fill,
   not an edge-strip. */
.inv-row-age{display:inline-flex;align-items:center;gap:3px;margin-left:7px;font-size:10px;font-weight:800;letter-spacing:.02em;padding:1px 7px;border-radius:999px;vertical-align:middle}
.inv-row-age .ira-ico{width:9px;height:9px;flex:0 0 auto}
.inv-row-age.over{background:color-mix(in srgb,var(--color-error) 14%,var(--card-bg));color:var(--color-error)}
.inv-row-age.soon{background:color-mix(in srgb,var(--color-warning) 16%,var(--card-bg));color:var(--co-pending-fg,#b45309)}
.inv-row-age.paid{background:color-mix(in srgb,var(--color-success) 13%,var(--card-bg));color:var(--color-success)}
.fin-rollup.inv-rollup .ru-b.ru-lead-od .ru-l{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.fin-rollup.inv-rollup .ru-od{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:800;padding:2px 7px;border-radius:999px;background:var(--color-error,#ef4444);color:#fff;letter-spacing:.02em}
@media (max-width:760px){.fin-rollup.inv-rollup .ru-b.ru-lead-od{flex:1 1 100%}}
.inv-coll{margin:-4px 0 12px}
.inv-coll-bar{position:relative;height:13px;border-radius:999px;overflow:hidden;background:var(--surface-3,var(--surface-2,#e5e5ea));box-shadow:inset 0 1px 2px rgba(0,0,0,.08)}
.inv-coll-bar .icb-fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px 0 0 999px;background:linear-gradient(90deg,color-mix(in srgb,var(--color-success) 80%,#fff),var(--color-success));box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.inv-coll-bar .icb-ret{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(45deg,var(--surface-2,#e5e5ea),var(--surface-2,#e5e5ea) 4px,var(--surface-3,#d8d8dd) 4px,var(--surface-3,#d8d8dd) 8px)}
.inv-coll-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:9px;font-size:11.5px;font-weight:600;color:var(--text-secondary)}
.inv-coll-legend span{display:inline-flex;align-items:center;gap:6px}
.inv-coll-legend .icl-sw{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.inv-coll-legend .icl-coll{background:var(--color-success)}
.inv-coll-legend .icl-out{background:var(--surface-3,#d8d8dd)}
.inv-coll-legend .icl-ret{background:repeating-linear-gradient(45deg,var(--surface-2,#e5e5ea),var(--surface-2,#e5e5ea) 3px,var(--surface-3,#d8d8dd) 3px,var(--surface-3,#d8d8dd) 6px)}
/* Financials tab — labeled material bars in the command-center panel */
.fin-bar-row{margin:10px 0}
.fin-bar-row+.fin-bar-row{margin-top:13px}
.fin-bar-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.fin-bar-lbl{font-size:12.5px;font-weight:700;color:var(--text-secondary)}
.fin-bar-val{font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.fin-bar-sub{font-size:11px;font-weight:600;color:var(--text-muted)}
/* V-fin4 — Committed vs Spent: 3-stat row + bar + empty state (replaces the dead single bar). */
#financialsBody .cs-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:4px 0 12px}
#financialsBody .cs-stat-l{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)}
#financialsBody .cs-stat-v{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-top:2px;color:var(--text-primary)}
#financialsBody .cs-stat-v.cs-open{color:var(--color-info,#2563c9)}
#financialsBody .cs-bar{position:relative;height:18px;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 8%,transparent);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.08),inset 0 0 0 .5px rgba(0,0,0,.04)}
#financialsBody .cs-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(160deg,color-mix(in srgb,var(--color-info,#3b82f6) 80%,#fff),var(--color-info,#3b82f6));box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
#financialsBody .cs-bar-pct{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:10.5px;font-weight:800;color:var(--text-secondary);font-variant-numeric:tabular-nums}
#financialsBody .cs-note{margin-top:9px;font-size:11.5px;font-weight:600;color:var(--text-muted);line-height:1.45}
#financialsBody .cs-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;padding:14px 16px 6px}
#financialsBody .cs-empty-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--app-accent) 9%,transparent);color:var(--app-accent);margin-bottom:2px}
#financialsBody .cs-empty-ic .ic{width:18px;height:18px}
#financialsBody .cs-empty-t{font-size:13px;font-weight:700;color:var(--text-primary)}
#financialsBody .cs-empty-s{font-size:11.5px;color:var(--text-muted);max-width:320px;line-height:1.5}
/* gap#6 — job-cost history rows */
#financialsBody .jcs-rows{display:flex;flex-direction:column;margin-top:4px}
#financialsBody .jcs-row{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;transition:background var(--motion-fast) var(--ease-out)}
#financialsBody .jcs-row + .jcs-row{box-shadow:0 -0.5px 0 var(--chrome-border,rgba(0,0,0,.06))}
#financialsBody .jcs-row:hover{background:color-mix(in srgb,var(--app-accent) 5%,transparent)}
#financialsBody .jcs-row-door{cursor:pointer}
#financialsBody .jcs-row-door:focus-visible{outline:2px solid color-mix(in srgb,var(--app-accent) 55%,transparent);outline-offset:-2px}
#financialsBody .jcs-period{flex:0 0 auto;font-size:12px;font-weight:800;letter-spacing:.02em;color:var(--text-secondary);font-variant-numeric:tabular-nums;min-width:62px}
#financialsBody .jcs-cost{flex:1;min-width:0;font-size:14px;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums;display:flex;flex-direction:column;line-height:1.25}
#financialsBody .jcs-cost .jcs-meta{font-size:10.5px;font-weight:600;color:var(--text-muted);letter-spacing:.01em}
#financialsBody .jcs-delta{flex:0 0 auto;font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;font-variant-numeric:tabular-nums}
#financialsBody .jcs-delta.up{background:color-mix(in srgb,var(--risk-medium-fg,#c47f17) 14%,transparent);color:var(--risk-medium-fg,#c47f17)}
#financialsBody .jcs-delta.dn{background:color-mix(in srgb,var(--risk-low-fg,#2b8a4a) 14%,transparent);color:var(--risk-low-fg,#2b8a4a)}
#financialsBody .jcs-del{flex:0 0 auto;width:26px;height:26px;border:0;background:transparent;border-radius:8px;display:grid;place-items:center;color:var(--text-muted);cursor:pointer;opacity:0;transition:opacity var(--motion-fast),background var(--motion-fast),color var(--motion-fast)}
#financialsBody .jcs-row:hover .jcs-del{opacity:1}
#financialsBody .jcs-del:hover{background:color-mix(in srgb,var(--risk-high-fg,#c0392b) 12%,transparent);color:var(--risk-high-fg,#c0392b)}
#financialsBody .jcs-del .ic{width:14px;height:14px}

/* ===== Project Financials · Pass-2 (proto 34) — Money Command Center. Real money layer
   (pnl/forecast/accounting/retainage/schedule/cost-codes). Honesty-gated profit hero.
   All scoped #financialsBody .fin-cc. NO edge-strips (fill/dot/pill only). ===== */
#financialsBody .fin-cc{display:flex;flex-direction:column;gap:14px}
/* honesty-aware profit hero (green when healthy; neutral/red-tinted when weak basis / red health) */
/* pass-3 AUDIT FIX: deepened the green (profit) gradient so white text passes WCAG (was #2c885d/#34a06a = 4.39/3.29 fail; now matches the Estimates rollup fix). The .fh-weak (grey) + .fh-loss (red) variants already pass and are unchanged. */
/* V-theme1 — Money Command Center hero: 3 state gradients were HARDCODED (green/grey/red),
   theme-blind (esp. the grey .fh-weak looked like a dead slab on Bayfront). Now routed through
   semantic tokens mixed toward a DARK anchor so #fff text stays WCAG-legible AND the band tracks
   the theme (darker on Bayfront, lighter on Gulf). Green=success, grey=neutral, red=error. */
/* V-fin2 (2026-06-30) — the hero now rides the THEME ACCENT by default (was a flat success-green
   banner that read off-brand — green is a financial-health SIGNAL, not Atira's colorway). The profit
   health now reads from the chip + the value tone, not by flooding the whole banner green. The two
   alarm states keep their semantic color (loss = red, weak/unknown basis = grey) since those are
   genuine warnings, not brand chrome. Mirrors the .proj-hero accent-gradient idiom. */
/* V-fin4 — tightened: less vertical padding + center-aligned so the profit headline and the KPI rail
   share one band (was flex-end with dead air above the rail). Smaller footprint, denser read. */
#financialsBody .fin-hero{position:relative;border-radius:20px;padding:16px 24px;color:#fff;overflow:hidden;display:flex;align-items:center;gap:26px;flex-wrap:wrap;box-shadow:var(--bevel-top),var(--shadow-e3);background:linear-gradient(135deg,color-mix(in srgb,var(--app-accent) 88%,#000) 0%,var(--app-accent) 52%,color-mix(in srgb,var(--app-accent) 80%,#000) 100%)}
/* gap#1 (2026-07-01) — Contract instruments panel: a raised white card listing the job's
   contract(s) + a job total when there are 2+. Pass-3 STANDARD: white card, elevation not color,
   chrome-border hairlines, SVG icons, rounded hovers, NO edge-strips (status carried by a pill). */
#financialsBody .fin-contracts{background:var(--card-bg);border-radius:16px;padding:14px 16px;box-shadow:var(--bevel-top),var(--shadow-e2);border:.5px solid var(--chrome-border,rgba(0,0,0,.06));margin-bottom:2px}
#financialsBody .fin-contracts-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
#financialsBody .fin-contracts-head h3{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--text-secondary)}
#financialsBody .fin-contracts-add{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 9%,transparent);border:0;padding:6px 12px;border-radius:9px;cursor:pointer;transition:background var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-out)}
#financialsBody .fin-contracts-add svg{width:13px;height:13px;stroke:currentColor;fill:none}
#financialsBody .fin-contracts-add:hover{background:color-mix(in srgb,var(--app-accent) 16%,transparent);transform:translateY(-1px)}
#financialsBody .fin-contract-row{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:11px;transition:background var(--motion-fast) var(--ease-out)}
#financialsBody .fin-contract-row + .fin-contract-row{box-shadow:0 -0.5px 0 var(--chrome-border,rgba(0,0,0,.06))}
#financialsBody .fin-contract-row:hover{background:color-mix(in srgb,var(--app-accent) 5%,transparent)}
#financialsBody .fcr-badge{flex:0 0 auto;font-size:10.5px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--fct,var(--text-secondary));background:color-mix(in srgb,var(--fct,var(--text-secondary)) 12%,transparent);padding:4px 9px;border-radius:999px}
#financialsBody .fcr-body{flex:1;min-width:0}
#financialsBody .fcr-title{font-size:13.5px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#financialsBody .fcr-num{font-weight:600;color:var(--text-muted)}
#financialsBody .fcr-price{display:inline-block;margin-left:8px;font-size:10px;font-weight:800;letter-spacing:.02em;padding:2px 8px;border-radius:999px;vertical-align:middle;background:color-mix(in srgb,var(--pcc,var(--app-accent)) 14%,transparent);color:var(--pcc,var(--app-accent))}
#financialsBody .fcr-price.cp{--pcc:#0a84c9}
#financialsBody .fcr-price.gmp{--pcc:#8a5aa8}
#financialsBody .fcr-price.tm{--pcc:#a8845a}
#financialsBody .fcr-sub{font-size:11.5px;color:var(--text-muted);margin-top:1px}
#financialsBody .fcr-val{flex:0 0 auto;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text-primary)}
#financialsBody .fcr-edit{flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;border:0;background:none;color:var(--text-muted);border-radius:8px;cursor:pointer;transition:background var(--motion-fast) var(--ease-out),color var(--motion-fast) var(--ease-out)}
#financialsBody .fcr-edit svg{width:14px;height:14px;stroke:currentColor;fill:none}
#financialsBody .fcr-edit:hover{background:color-mix(in srgb,var(--app-accent) 10%,transparent);color:var(--app-accent)}
#financialsBody .fin-contracts-total{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding:10px 10px 2px;border-top:.5px solid var(--chrome-border,rgba(0,0,0,.08));font-size:13px}
#financialsBody .fin-contracts-total span{font-weight:700;color:var(--text-secondary)}
#financialsBody .fin-contracts-total b{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text-primary)}
/* contract add/edit form (rides the shared .hb-overlay) */
.fin-contract-card{max-width:440px;width:100%}
.fin-contract-form{display:flex;flex-direction:column;gap:12px}
.fin-contract-form .fcf-row{display:flex;flex-direction:column;gap:5px}
.fin-contract-form .fcf-row > span{font-size:11.5px;font-weight:700;color:var(--text-secondary);letter-spacing:.01em}
.fin-contract-form input,.fin-contract-form select,.fin-contract-form textarea{font:inherit;font-size:13.5px;padding:8px 11px;border-radius:9px;border:.5px solid var(--chrome-border,rgba(0,0,0,.14));background:var(--surface,var(--card-bg));color:var(--text-primary);width:100%;box-sizing:border-box}
/* constrain the notes textarea so it can't be dragged out of / past the popup (was resize:both) */
.fin-contract-form textarea{resize:vertical;max-width:100%;min-height:52px;max-height:200px}
.fin-contract-form input:focus,.fin-contract-form select:focus,.fin-contract-form textarea:focus{outline:none;border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 16%,transparent)}
.fin-contract-form .fcf-2col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fin-contract-form .fcf-3col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.fin-contract-form .fcf-sep{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-top:4px;padding-top:10px;border-top:.5px solid var(--chrome-border,rgba(0,0,0,.08))}
/* 🖇️ C5b gap#9 — contract-party slots. `ⓘ` carries the slot's meaning on hover (a notary vs an
   owner rep is not obvious from the label alone); the empty note keeps the section honest when
   the project has no linked contacts yet, instead of showing four dead "— none —" selects. */
.fin-contract-form .fcf-hint{color:var(--text-muted);font-weight:600;cursor:help}
.fin-contract-form .fcf-parties-empty{font-size:11.5px;font-weight:600;color:var(--text-muted);background:var(--surface-2,var(--surface));border:.5px dashed var(--chrome-border,rgba(0,0,0,.14));border-radius:9px;padding:8px 10px;line-height:1.4}
.fin-contract-form .fcf-check{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--text-secondary);cursor:pointer;line-height:1.4}
.fin-contract-form .fcf-check input{width:auto;margin-top:1px;flex:0 0 auto;accent-color:var(--app-accent)}
/* gap#7 — contract value-history timeline in the edit form */
.fin-contract-form .fcf-vhist{background:color-mix(in srgb,var(--app-accent) 5%,transparent);border:.5px solid var(--chrome-border,rgba(0,0,0,.08));border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:4px}
.fin-contract-form .fcf-vhist-h{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
.fin-contract-form .fcf-vhist-row{display:flex;align-items:baseline;gap:8px;font-size:12px}
.fin-contract-form .vh-stage{flex:0 0 auto;font-weight:700;text-transform:capitalize;color:var(--app-accent);min-width:78px;font-size:11px}
.fin-contract-form .vh-val{font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums}
.fin-contract-form .vh-note{color:var(--text-muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fin-contract-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.btn.btn-danger-ghost{background:none;border:0;color:var(--color-error);font-weight:700;cursor:pointer;padding:6px 4px}
.btn.btn-danger-ghost:hover{text-decoration:underline}
/* healthy/profitable default — a restrained success accent on the brand banner (left edge glow + a
   tinted profit value) so "profit" still reads without the whole hero going green. */
#financialsBody .fin-hero.fh-good::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(120% 100% at 100% 120%,color-mix(in srgb,var(--color-success) 55%,transparent),transparent 60%)}
#financialsBody .fin-hero.fh-good .fh-v{color:color-mix(in srgb,var(--color-success) 30%,#fff)}
#financialsBody .fin-hero.fh-weak{background:linear-gradient(135deg,color-mix(in srgb,var(--text-secondary) 40%,#23262b) 0%,color-mix(in srgb,var(--text-muted) 32%,#2c3037) 55%,color-mix(in srgb,var(--text-muted) 30%,#33373d) 100%)}
#financialsBody .fin-hero.fh-loss{background:linear-gradient(135deg,color-mix(in srgb,var(--color-error) 70%,#3a1310) 0%,color-mix(in srgb,var(--color-error) 56%,#3a1310) 55%,color-mix(in srgb,var(--color-error) 52%,var(--card-bg)) 100%)}
#financialsBody .fin-hero::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(130% 90% at 0% -10%,rgba(255,255,255,.2),transparent 55%)}
#financialsBody .fh-profit{position:relative;z-index:1}
#financialsBody .fh-k{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.85;display:inline-flex;align-items:center;gap:8px}
#financialsBody .fh-chip{font-size:9.5px;font-weight:800;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.2);text-transform:none;letter-spacing:.02em;display:inline-flex;align-items:center;gap:3px}
#financialsBody .fh-chip .fh-chip-ic{width:11px;height:11px}
/* V-fin2 — unify the inline text-link actions (Open POs · Set up cost codes · Review) so they read as
   ONE affordance type: accent text + chevron, a subtle rounded accent-tint on hover (the filled .cf-wi-btn
   "What-if" stays distinct — it LAUNCHES a tool, a heavier action). */
#financialsBody .zone-head .zh-action,
#financialsBody .callout .zh-action{display:inline-flex;align-items:center;gap:2px;border-radius:6px;padding:2px 5px;margin:-2px -5px -2px 0;color:var(--app-accent);font-weight:700;cursor:pointer;transition:background var(--motion-fast)}
#financialsBody .zone-head .zh-action:hover,
#financialsBody .callout .zh-action:hover{background:color-mix(in srgb,var(--app-accent) 10%,transparent)}
#financialsBody .zone-head .zh-action .zh-arrow,
#financialsBody .callout .zh-action .zh-arrow{width:13px;height:13px}
#financialsBody .fh-v{font-size:42px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1;margin-top:5px}
#financialsBody .fh-s{font-size:12.5px;font-weight:600;opacity:.9;margin-top:3px}
/* P9 — forecast-method picker */
#financialsBody .fc-method-pick{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px}
#financialsBody .fc-method-lbl{font-size:11px;font-weight:600;opacity:.8}
/* V-fin2 — these controls live ON the dark/colored hero, so they must be glass-on-dark (white text on a
   translucent-white pill), matching the .fcl-toggle "Change history" beside them. The old --surface-2 /
   --border / color:inherit resolved to a LIGHT-GREY pill with WHITE text → near-invisible (white-on-#e5e5ea).
   The <select> also gets a custom white chevron (appearance:none) since the native arrow was barely visible. */
#financialsBody .fc-method-sel{font:inherit;font-size:12px;font-weight:600;padding:4px 30px 4px 11px;border-radius:8px;border:0.5px solid rgba(255,255,255,.34);background:rgba(255,255,255,.16);color:#fff;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;background-size:13px;transition:background var(--motion-fast),border-color var(--motion-fast)}
#financialsBody .fc-method-sel:hover{background-color:rgba(255,255,255,.24);border-color:rgba(255,255,255,.46)}
#financialsBody .fc-method-sel:focus-visible{outline:none;border-color:rgba(255,255,255,.7);box-shadow:0 0 0 3px rgba(255,255,255,.22)}
#financialsBody .fc-method-sel option{color:var(--text-primary);background:var(--card-bg)}
#financialsBody .fc-method-num{font:inherit;font-size:12px;width:110px;padding:4px 10px;border-radius:8px;border:0.5px solid rgba(255,255,255,.34);background:rgba(255,255,255,.16);color:#fff;transition:background var(--motion-fast),border-color var(--motion-fast)}
#financialsBody .fc-method-num::placeholder{color:rgba(255,255,255,.6)}
#financialsBody .fc-method-num:focus-visible{outline:none;border-color:rgba(255,255,255,.7);box-shadow:0 0 0 3px rgba(255,255,255,.22)}
#financialsBody .fc-method-set{font:inherit;font-size:11px;font-weight:700;padding:4px 11px;border-radius:8px;border:0;background:var(--app-accent, #0a84ff);color:#fff;cursor:pointer}
/* G4-W3-A — forecast-method audit timeline (light-on-dark, lives inside the .fin-hero) */
#financialsBody .fcl-toggle{font:inherit;font-size:11px;font-weight:600;display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;border:0.5px solid rgba(255,255,255,.22);background:rgba(255,255,255,.10);color:inherit;cursor:pointer;transition:background var(--motion-fast),border-color var(--motion-fast)}
#financialsBody .fcl-toggle:hover{background:rgba(255,255,255,.18)}
#financialsBody .fcl-toggle[aria-expanded="true"]{background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.34)}
#financialsBody .fcl-toggle-ic{width:12px;height:12px;opacity:.85}
#financialsBody .fcl-wrap{margin-top:11px}
#financialsBody .fcl-wrap[hidden]{display:none}
#financialsBody .fcl-tl{padding-left:3px}
#financialsBody .fcl-tl .ret-tl-item::before{background:rgba(255,255,255,.20)}
#financialsBody .fcl-dot{background:rgba(255,255,255,.30);box-shadow:0 0 0 2px rgba(255,255,255,.10)}
#financialsBody .fcl-tl .ret-tl-meta{color:rgba(255,255,255,.62)}
#financialsBody .fcl-pillrow{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
#financialsBody .fcl-pill{font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;background:rgba(255,255,255,.13);color:inherit;letter-spacing:-.01em}
#financialsBody .fcl-pill.to{background:rgba(255,255,255,.24)}
#financialsBody .fcl-arrow{width:12px;height:12px;opacity:.6;flex-shrink:0}
#financialsBody .fcl-delta{font-size:11px;font-weight:600;color:rgba(255,255,255,.78);margin-top:3px;font-variant-numeric:tabular-nums}
#financialsBody .fcl-empty{font-size:12px;color:rgba(255,255,255,.66);padding:6px 2px}
/* V-fin2 (2026-06-30) — the side stat rail now FILLS the hero width instead of being shoved to the
   far edge by margin-left:auto (which left a wide void on desktop/ultrawide between the profit
   headline and the stats). margin-left:auto starts the rail after the headline; flex:1 + space-between
   distributes the stat blocks evenly across the remaining width so the banner reads dense at any size.
   The schedule metrics (SPI/variance/finish/elapsed) were folded in from the old separate gray strip
   so the hero is one rich command-center band (canon #9 — heroes earn their footprint). */
#financialsBody .fh-side{margin-left:auto;flex:1 1 auto;display:flex;justify-content:space-between;gap:22px 30px;flex-wrap:wrap;position:relative;z-index:1;max-width:74%}
#financialsBody .fh-side .b{display:flex;flex-direction:column}
#financialsBody .fh-side .b .bl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;opacity:.78;white-space:nowrap}
#financialsBody .fh-side .b .bv{font-size:22px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:2px}
#financialsBody .fh-side .b .bv.warn{color:#ffe08a}#financialsBody .fh-side .b .bv.bad{color:#ffc0b8}
/* hairline separating the cost group (left 3) from the schedule group (right 4) when they're on one row */
#financialsBody .fh-side .fh-b-div{padding-left:30px;border-left:1px solid rgba(255,255,255,.18)}
@media(max-width:1100px){#financialsBody .fh-side{max-width:none;justify-content:flex-start;gap:18px}#financialsBody .fh-side .fh-b-div{padding-left:0;border-left:none}}
/* margin waterfall (3 real bars) */
#financialsBody .wf{display:flex;align-items:flex-end;gap:16px;height:190px;padding:6px 2px 2px}
#financialsBody .wf-col{display:flex;flex-direction:column;flex:1;align-items:center;justify-content:flex-end;gap:8px;height:100%;min-width:0}
#financialsBody .wf-col .wf-v{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
#financialsBody .wf-col .wf-bar{position:relative;width:100%;max-width:88px;border-radius:9px;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.12),0 4px 12px -5px rgba(0,0,0,.35);overflow:hidden}
#financialsBody .wf-col .wf-bar::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.25),transparent 45%)}
/* V-fin2 — let the waterfall labels WRAP to 2 lines instead of clipping (canon #11; "Contract Revenue"
   was getting ellipsis-cut on the narrow column). Reserve 2 lines so all three labels share a baseline. */
#financialsBody .wf-col .wf-l{font-size:10.5px;font-weight:700;color:var(--text-secondary);text-align:center;line-height:1.25;max-width:100%;min-height:2.5em;display:flex;align-items:flex-start;justify-content:center}
/* Item #27 — stacked Cost-at-Completion: segments fill the bar bottom→top (spent at the
   base), tonal steps of one amber family with hairline dividers (no colored edge-strip). */
#financialsBody .wf-col .wf-bar.wf-stack{display:flex;flex-direction:column}
#financialsBody .wf-col .wf-bar.wf-stack .wf-seg{flex:0 0 auto;min-height:2px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
#financialsBody .wf-col .wf-bar.wf-stack .wf-seg:first-child{box-shadow:none}
#financialsBody .wf-legend{display:flex;flex-wrap:wrap;gap:7px 16px;margin-top:11px;padding-top:10px;border-top:.5px solid var(--chrome-border,rgba(0,0,0,.08))}
#financialsBody .wf-legend .wf-leg-item{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--text-secondary);font-variant-numeric:tabular-nums}
#financialsBody .wf-legend .wf-leg-item b{font-weight:800;color:var(--text-primary)}
#financialsBody .wf-legend .wf-dot{width:9px;height:9px;border-radius:3px;flex:0 0 9px;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
/* cost-code budget-vs-actual bars */
#financialsBody .fin-bva-row{display:grid;grid-template-columns:130px 1fr auto;gap:11px;align-items:center;margin:9px 0}
#financialsBody .fin-bva-name{font-size:12px;font-weight:700;display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#financialsBody .fin-bva-dot{width:9px;height:9px;border-radius:999px;flex:0 0 9px;background:var(--bc,var(--app-accent))}
#financialsBody .fin-bva-track{position:relative;height:13px;border-radius:999px;background:var(--surface-2);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}
#financialsBody .fin-bva-track .fba{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(160deg,color-mix(in srgb,var(--bc,var(--app-accent)) 82%,#fff),var(--bc,var(--app-accent)));box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
#financialsBody .fin-bva-track .fbm{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--text-primary);opacity:.55}
#financialsBody .fin-bva-num{font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
#financialsBody .fin-bva-num .ov{color:var(--color-error)}
#financialsBody .fin-bva-num .un{color:var(--color-success)}
/* ===== V-fin3 — Budget vs Actual WORKSPACE (.bvw) ===== */
#financialsBody .bvw .zone-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#financialsBody .bvw-sorts{margin-left:auto;display:inline-flex;gap:2px;padding:2px;border-radius:9px;background:color-mix(in srgb,var(--text-primary) 6%,transparent)}
/* V-fin4 — sort toggle follows the canonical control language (.rt-ctl): selected = white pill + ACCENT
   text + restrained lift (rt-ctl-selected), idle = quiet ghost. */
#financialsBody .bvw-sort{font:inherit;font-size:11px;font-weight:700;padding:4px 11px;border:0;border-radius:8px;background:transparent;color:var(--text-secondary);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
#financialsBody .bvw-sort:hover{color:var(--text-primary)}
#financialsBody .bvw-sort:active{transform:scale(.97)}
#financialsBody .bvw-sort.on{background:var(--card-bg);color:var(--app-accent);box-shadow:var(--shadow-e1),var(--bevel-top)}
/* V-fin4 — dark mode: idle toggle text lighter (was a dim grey, low-contrast on the dark matte); the
   selected pill reads WHITE for visibility (accent-blue on the near-white dark pill is too low-contrast). */
[data-theme="midnight"] #financialsBody .bvw-sort,[data-theme="contrast"] #financialsBody .bvw-sort{color:color-mix(in srgb,var(--text-primary) 78%,transparent)}
[data-theme="midnight"] #financialsBody .bvw-sort:hover,[data-theme="contrast"] #financialsBody .bvw-sort:hover{color:#fff}
[data-theme="midnight"] #financialsBody .bvw-sort.on,[data-theme="contrast"] #financialsBody .bvw-sort.on{color:#fff;background:color-mix(in srgb,var(--surface) 70%,#fff 8%)}
/* roll-up header — one authored strip of 4 totals (NOT 4 floating cards), divider-separated */
#financialsBody .bvw-rollup{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:12px 4px;margin-bottom:6px;border-radius:13px;background:linear-gradient(180deg,color-mix(in srgb,var(--app-accent) 5%,var(--card-bg)),var(--card-bg));box-shadow:inset 0 1px 0 rgba(255,255,255,.5),var(--shadow-e2);border:.5px solid color-mix(in srgb,var(--text-primary) 7%,transparent)}
#financialsBody .bvw-ru{padding:0 14px;border-left:.5px solid color-mix(in srgb,var(--text-primary) 9%,transparent)}
#financialsBody .bvw-ru:first-child{border-left:0}
#financialsBody .bvw-ru-l{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)}
#financialsBody .bvw-ru-v{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-top:3px;color:var(--text-primary)}
#financialsBody .bvw-ru-v.ov{color:var(--color-error)}#financialsBody .bvw-ru-v.un{color:var(--color-success)}
/* rows */
#financialsBody .bvw-rows{display:flex;flex-direction:column;gap:2px;margin-top:8px}
#financialsBody .bvw-row{display:grid;grid-template-columns:minmax(96px,1.1fr) minmax(70px,1.4fr) auto auto auto;gap:11px;align-items:center;padding:8px 8px;border-radius:10px;transition:background var(--motion-fast)}
#financialsBody .bvw-row:hover{background:color-mix(in srgb,var(--text-primary) 4%,transparent)}
#financialsBody .bvw-row.bvw-over{background:color-mix(in srgb,var(--color-error) 5%,transparent)}
#financialsBody .bvw-row.bvw-over:hover{background:color-mix(in srgb,var(--color-error) 9%,transparent)}
#financialsBody .bvw-name{display:inline-flex;align-items:center;gap:7px;min-width:0;background:none;border:0;padding:0;font:inherit;cursor:pointer;text-align:left}
#financialsBody .bvw-dot{flex:0 0 9px;width:9px;height:9px;border-radius:999px;background:var(--bc,var(--app-accent));background-image:radial-gradient(circle at 34% 28%,rgba(255,255,255,.7),transparent 60%);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.1)}
#financialsBody .bvw-code{font-size:12.5px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#financialsBody .bvw-name:hover .bvw-code{color:var(--app-accent)}
#financialsBody .bvw-bar{position:relative;height:14px;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 8%,transparent);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.08),inset 0 0 0 .5px rgba(0,0,0,.04)}
#financialsBody .bvw-fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(160deg,color-mix(in srgb,var(--bc,var(--app-accent)) 82%,#fff),var(--bc,var(--app-accent)));box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
#financialsBody .bvw-fill-comm{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--bc,var(--app-accent)) 38%,transparent),color-mix(in srgb,var(--bc,var(--app-accent)) 38%,transparent) 4px,transparent 4px,transparent 8px)}
#financialsBody .bvw-budmark{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--text-primary);opacity:.5;border-radius:1px}
#financialsBody .bvw-nums{font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;display:flex;flex-direction:column;line-height:1.3;min-width:78px}
#financialsBody .bvw-nums .bvw-sp{color:var(--text-primary);font-weight:800}
#financialsBody .bvw-nums .bvw-bd{color:var(--text-muted);font-size:10.5px;font-weight:700}
#financialsBody .bvw-var{font-size:10.5px;font-weight:700}
#financialsBody .bvw-var.ov{color:var(--color-error)}#financialsBody .bvw-var.un{color:var(--color-success)}#financialsBody .bvw-var.bvw-onbud{color:var(--text-muted)}
/* inline %-complete editor chip */
#financialsBody .bvw-pct{display:inline-flex;align-items:center;gap:4px;font:inherit;font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;padding:4px 8px;border-radius:8px;border:.5px solid color-mix(in srgb,var(--text-primary) 14%,transparent);background:var(--card-bg);color:var(--text-primary);cursor:pointer;white-space:nowrap;transition:background var(--motion-fast),border-color var(--motion-fast)}
#financialsBody .bvw-pct:hover{background:color-mix(in srgb,var(--app-accent) 8%,var(--card-bg));border-color:color-mix(in srgb,var(--app-accent) 35%,transparent)}
#financialsBody .bvw-pct-ro{border-color:transparent;background:transparent;color:var(--text-secondary);cursor:default;font-weight:700}
#financialsBody .bvw-drill{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:0;border-radius:8px;background:transparent;color:var(--text-muted);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
#financialsBody .bvw-drill:hover{background:color-mix(in srgb,var(--app-accent) 10%,transparent);color:var(--app-accent)}
#financialsBody .bvw-drill .ic{width:15px;height:15px}
#financialsBody .bvw-more{margin-top:9px;text-align:center;font-size:11.5px;color:var(--text-muted);font-weight:600}
#financialsBody .bvw .fin-bva-drill{grid-column:1 / -1}
/* %-complete editor popover */
#financialsBody .bvw-pct-pop{position:absolute;top:calc(100% + 6px);right:0;z-index:40;width:200px;padding:11px 12px;border-radius:12px;background:var(--card-bg);box-shadow:var(--shadow-e4),inset 0 1px 0 rgba(255,255,255,.5);border:.5px solid color-mix(in srgb,var(--text-primary) 12%,transparent)}
#financialsBody .bvw-pct-lbl{font-size:11px;font-weight:700;color:var(--text-secondary)}
#financialsBody .bvw-pct-inrow{display:flex;align-items:center;gap:6px;margin:8px 0}
#financialsBody .bvw-pct-input{flex:1;font:inherit;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;padding:6px 9px;border-radius:9px;border:.5px solid color-mix(in srgb,var(--text-primary) 18%,transparent);background:var(--surface,#fff);color:var(--text-primary)}
#financialsBody .bvw-pct-input:focus-visible{outline:none;border-color:var(--app-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 22%,transparent)}
#financialsBody .bvw-pct-unit{font-size:14px;font-weight:800;color:var(--text-muted)}
#financialsBody .bvw-pct-actions{display:flex;align-items:center;gap:7px}
#financialsBody .bvw-pct-spacer{flex:1}
#financialsBody .bvw-pct-auto{font:inherit;font-size:11px;font-weight:700;padding:5px 9px;border-radius:8px;border:.5px solid color-mix(in srgb,var(--text-primary) 14%,transparent);background:transparent;color:var(--text-secondary);cursor:pointer}
#financialsBody .bvw-pct-auto:hover{background:color-mix(in srgb,var(--text-primary) 7%,transparent);color:var(--text-primary)}
#financialsBody .bvw-pct-pop .bvw-pct-sm{height:30px;font-size:12px;padding:0 13px}
@media(max-width:560px){#financialsBody .bvw-rollup{grid-template-columns:1fr 1fr;gap:10px 0}#financialsBody .bvw-ru:nth-child(3){border-left:0}#financialsBody .bvw-row{grid-template-columns:1fr auto auto;gap:8px}#financialsBody .bvw-bar{display:none}}
/* cash position rows */
/* V-fin4 — kill the hairline dividers between cash rows (tonal+spacing only, per the divider-free pass). */
#financialsBody .cash-row{display:flex;align-items:center;gap:11px;padding:7px 0}
#financialsBody .cash-row:last-child{border-bottom:0}
/* V-fin4 — Cash Position icons = true ROUND SPHERE orbs (Atira orb idiom), not rounded squares. The
   semantic color is the base (inline background-color); a strong spherical gradient (lit top-left → tone
   → darkened bottom edge) makes it read as a 3D ball, with a bright specular cap (::after) + a soft drop.
   border-radius:50% = sphere. */
#financialsBody .cash-row .ci{position:relative;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:15px;flex:0 0 auto;overflow:hidden;
  background-image:radial-gradient(circle at 34% 28%,rgba(255,255,255,.7),rgba(255,255,255,.12) 40%,transparent 58%),radial-gradient(circle at 68% 86%,rgba(0,0,0,.28),transparent 56%);
  box-shadow:inset 0 1.5px 1px rgba(255,255,255,.55),inset 0 -3px 6px rgba(0,0,0,.22),inset 0 0 0 .5px rgba(0,0,0,.06),0 2px 5px -1px color-mix(in srgb,var(--bc-cash,#000) 22%,transparent),var(--shadow-e1)}
#financialsBody .cash-row .ci::after{content:'';position:absolute;left:50%;top:9%;transform:translateX(-50%);width:56%;height:36%;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.75),rgba(255,255,255,.1) 60%,transparent 78%)}
#financialsBody .cash-row .ci .ic{position:relative;z-index:1;width:15px;height:15px}
[data-theme="midnight"] #financialsBody .cash-row .ci,[data-theme="contrast"] #financialsBody .cash-row .ci{
  background-image:radial-gradient(circle at 34% 28%,rgba(255,255,255,.42),rgba(255,255,255,.08) 42%,transparent 60%),radial-gradient(circle at 68% 86%,rgba(0,0,0,.5),transparent 58%);
  box-shadow:inset 0 1.5px 1px rgba(255,255,255,.22),inset 0 -3px 6px rgba(0,0,0,.5),inset 0 0 0 .5px rgba(255,255,255,.06),var(--shadow-e1)}
/* Tile label sprite (Rule 17): inherits the muted label tone, sits inline before the text. */
#financialsBody .tile .tl-label .tl-ic{width:13px;height:13px;vertical-align:-2px;margin-right:1px;opacity:.85}
/* V-fin2 — KPI tile-row color COHERENCE (canon #4 card discipline / #5 coherent tones). The 6 metric
   tiles are facets of ONE thing (this project's money) → they must read as a unified cluster, not 6
   differently-washed boxes (blue/white/white/blue/amber/green = "box soup"). Neutralize the full-tile
   background washes to a single coherent card surface; carry the semantic meaning as a RESTRAINED accent
   — the label icon tints to its role (info/warn/ok/accent), the surface stays consistent. Scoped to
   #financialsBody so the global .t-* tints elsewhere are untouched. */
#financialsBody .tiles .tile.t-accent,
#financialsBody .tiles .tile.t-info,
#financialsBody .tiles .tile.t-warn,
#financialsBody .tiles .tile.t-ok{background:linear-gradient(160deg,color-mix(in srgb,var(--text-primary) 2.5%,var(--card-bg)),var(--card-bg))}
/* V-fin4b — TWO TIERS ONLY (Contacts model, corrected): grey --surface BASE panel → WHITE .zone cards
   organized on it. NOTHING gets a third (darker) tier. Sub-elements inside a white zone (AR/AP tiles, WIP
   doors, BvA roll-up) are FLAT on the white card — separated by layout + spacing + a faint hairline at
   most, never their own raised/darker surface. */
#financialsBody .zone .tiles .tile.t-info,
#financialsBody .zone .tiles .tile.t-warn{background:transparent;box-shadow:none;border:0;padding:0;
  /* 2026-07-01 fix — these are FLAT transparent sub-tiles (no bg/border), so the base .tile's
     overflow:hidden + 16px radius have nothing to clip against EXCEPT the content itself — which
     shaved the first letter/top of the RECEIVABLE/PAYABLE labels (flush at 0,0). Neutralize. */
  overflow:visible;border-radius:0}
#financialsBody .tiles .tile.t-accent .tl-label .tl-ic{color:var(--app-accent);opacity:1}
#financialsBody .tiles .tile.t-info   .tl-label .tl-ic{color:var(--color-info,#3b82f6);opacity:1}
#financialsBody .tiles .tile.t-warn   .tl-label .tl-ic{color:var(--color-warning,#b8860b);opacity:1}
#financialsBody .tiles .tile.t-ok     .tl-label .tl-ic{color:var(--color-success,#1a8754);opacity:1}
/* V-fin2 — lump-sum Budget-vs-Actual partial state (budget set, no cost-code split). */
#financialsBody .fin-lump{padding:2px 0}
#financialsBody .fin-lump-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
#financialsBody .fin-lump-k{font-size:12px;font-weight:700;color:var(--text-secondary)}
#financialsBody .fin-lump-v{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text-primary)}
#financialsBody .fin-lump-cta{margin-top:11px;padding-top:11px;border-top:.5px solid var(--chrome-border);font-size:12px;color:var(--text-muted);line-height:1.5}
#financialsBody .fin-lump-cta .zh-action{display:inline-flex;align-items:center;gap:3px;margin-left:4px;border-radius:6px;color:var(--app-accent);font-weight:700;cursor:pointer;white-space:nowrap}
#financialsBody .fin-lump-cta .zh-action:hover{text-decoration:underline}
#financialsBody .fin-lump-cta .zh-action .zh-arrow{width:13px;height:13px}
/* Rule 7/8: let the metric-door hover bloom (--shadow-e3) escape — .tile's defensive overflow:hidden
   clipped it to a hard edge. The gradient bg respects border-radius without the clip, so this is safe. */
#financialsBody .tiles .tile.metric-door{overflow:visible}
/* V-fin2 — deepen the KPI tile shading (the e1 rest read too minimal/flat) → e2 with a crisper inner
   top highlight + hairline; clickable metric-doors lift on hover/focus so they read as real, pressable
   surfaces (DESIGN.md depth + tactility). */
/* cont.34 — the 6-across metric tiles are SMALL + packed: --shadow-e2's 0 4px 14px spread pooled
   muddily between them. Use the tight --shadow-e1 (0 1px 3px + ring) so they read crisp; the heavy
   --shadow-e2 stays reserved for the large standalone cards (hero, .zone). */
#financialsBody .tiles .tile{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),var(--shadow-e1);border:.5px solid color-mix(in srgb,var(--text-primary) 7%,transparent)}
#financialsBody .tiles .tile.metric-door{cursor:pointer;transition:box-shadow var(--motion-base) var(--ease-out),transform var(--motion-base) var(--ease-out)}
#financialsBody .tiles .tile.metric-door:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),var(--shadow-e3)}
#financialsBody .tiles .tile.metric-door:active{transform:translateY(0) scale(.99)}
#financialsBody .tiles .tile.metric-door:focus-visible{outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),var(--shadow-e3),0 0 0 2px color-mix(in srgb,var(--app-accent) 45%,transparent)}
#financialsBody .cash-row .cl{font-size:12.5px;font-weight:700}
#financialsBody .cash-row .cs{font-size:11px;color:var(--text-muted);font-weight:600;margin-top:1px}
#financialsBody .cash-row .cv{margin-left:auto;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
#financialsBody .cash-row .cv.pos{color:var(--color-success)}#financialsBody .cash-row .cv.neg{color:var(--color-error)}
#financialsBody .fin-2col{display:grid;grid-template-columns:1.3fr 1fr;gap:14px;align-items:start}
@media(max-width:1000px){#financialsBody .fin-2col{grid-template-columns:1fr}#financialsBody .fin-hero{gap:16px}#financialsBody .fh-side{margin-left:0}}
/* V-fin2 — raised from flat --surface-2 to an elevated card (the Inflow/Outflow/Ending-cash strip under
   the cash-forecast chart was reading flat). */
#financialsBody .fin-spi-strip{display:flex;gap:18px;flex-wrap:wrap;padding:13px 17px;border-radius:14px;background:var(--card-bg,#fff);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),var(--shadow-e2);border:.5px solid color-mix(in srgb,var(--text-primary) 7%,transparent);margin-top:2px}
#financialsBody .fin-spi-strip .sp{display:flex;flex-direction:column}
#financialsBody .fin-spi-strip .sp .spl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
#financialsBody .fin-spi-strip .sp .spv{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:2px}
#financialsBody .fin-spi-strip .sp .spv.warn{color:var(--co-pending-fg,#b45309)}#financialsBody .fin-spi-strip .sp .spv.bad{color:var(--color-error)}
#financialsBody .bic-av{width:28px;height:28px;border-radius:999px;flex:0 0 28px;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:800;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif}
/* V-fin2 — WORKING-CAPITAL aging = ONE segmented bar + legend (replaces the 4 crammed chips). The bar
   is a single rounded track of color segments (green→red by band), proportional to $ outstanding; the
   legend below lists every band (glossy dot · range · compact-$ · count) wrapping cleanly. Reads the
   aging proportion at a glance and never crams 4 cards into a half-column. */
#financialsBody .wc-aging{margin-top:11px}
#financialsBody .wc-bar{display:flex;height:12px;border-radius:999px;overflow:hidden;background:color-mix(in srgb,var(--text-primary) 7%,transparent);box-shadow:inset 0 1px 2px rgba(0,0,0,.10),inset 0 0 0 .5px rgba(0,0,0,.05)}
#financialsBody .wc-seg{min-width:3px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35);transition:flex var(--motion-base) var(--ease-out)}
#financialsBody .wc-seg:not(:last-child){border-right:1px solid color-mix(in srgb,var(--card-bg) 55%,transparent)}
#financialsBody .wc-bar-empty{align-items:center;justify-content:center}
#financialsBody .wc-bar-emptyl{font-size:9px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--text-muted)}
/* V-fin4 — legend is a fixed 2×2 grid so all four bands align IDENTICALLY in every card (the old
   flex-wrap let each card wrap differently → ragged). Each band is one aligned row: dot · range · value. */
#financialsBody .wc-legend{display:grid;grid-template-columns:1fr 1fr;gap:7px 16px;margin-top:11px}
#financialsBody .wc-leg{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--text-muted);opacity:.62;min-width:0}
#financialsBody .wc-leg.wc-leg-has{opacity:1;color:var(--text-secondary)}
#financialsBody .wc-leg-alarm{color:var(--color-error)}
#financialsBody .wc-leg .wc-dot{position:relative;width:8px;height:8px;border-radius:999px;flex:0 0 8px;background-image:radial-gradient(circle at 34% 28%,rgba(255,255,255,.7),transparent 60%);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.10),0 0 4px -1px color-mix(in srgb,var(--bc) 70%,transparent)}
/* V-fin4 — Working-Capital zone header carries the net summary on the right (integrated, not a floating line) */
#financialsBody .wc-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
#financialsBody .wc-net{display:inline-flex;align-items:baseline;gap:7px}
#financialsBody .wc-net-l{font-size:10.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--text-muted)}
#financialsBody .wc-net-v{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
#financialsBody .wc-net-v.un{color:var(--color-success)}#financialsBody .wc-net-v.ov{color:var(--color-error)}
#financialsBody .wc-leg-band{font-weight:700;letter-spacing:.01em;white-space:nowrap}
#financialsBody .wc-leg-right{display:inline-flex;align-items:center;gap:5px;justify-self:end;white-space:nowrap}
#financialsBody .wc-leg-v{font-weight:800;font-variant-numeric:tabular-nums;color:var(--text-primary)}
#financialsBody .wc-leg:not(.wc-leg-has) .wc-leg-v{color:var(--text-muted);font-weight:700}
#financialsBody .wc-leg-alarm .wc-leg-v{color:var(--color-error)}
#financialsBody .wc-leg-n{font-size:9.5px;font-weight:800;min-width:15px;height:15px;padding:0 4px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--text-primary) 9%,transparent);color:var(--text-secondary)}
#financialsBody .wc-leg-alarm .wc-leg-n{background:color-mix(in srgb,var(--color-error) 16%,transparent);color:var(--color-error)}
/* F1 — WIP / bonding zone (over-under billing doors + cost-to-cost bars + surety flags). */
#financialsBody .wip-doors{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:12px}
/* V-fin4 / 2026-07-01 — WIP doors = raised grey --surface sub-cards on the white WIP zone
   (Contacts tier: grey-on-white, specular top highlight + soft elevation so they POP off the
   card instead of reading as flat text on the white). A prior transparent override had killed
   the material → the values sat flat. Restored here. */
#financialsBody .wip-door{position:relative;padding:12px 14px;border-radius:13px;
  background:var(--surface,color-mix(in srgb,var(--text-primary) 3%,var(--card-bg)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),var(--shadow-e1,0 4px 14px -6px rgba(20,30,48,.16));
  border:.5px solid color-mix(in srgb,var(--text-primary) 6%,transparent)}
#financialsBody .wip-door-lbl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
#financialsBody .wip-door-v{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:3px}
#financialsBody .wip-door-v.warn{color:var(--co-pending-fg,#b45309)}
#financialsBody .wip-door-sub{font-size:10.5px;color:var(--text-muted);margin-top:2px}
#financialsBody .wip-bars{display:flex;flex-direction:column;gap:9px}
#financialsBody .wip-bar-row{display:grid;grid-template-columns:108px 1fr auto;gap:11px;align-items:center}
#financialsBody .wip-bar-lbl{font-size:11px;font-weight:700;color:var(--text-muted);white-space:nowrap}
#financialsBody .wip-bar-num{font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
#financialsBody .wip-flags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
#financialsBody .wip-flag{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--color-warning-bg,#fdf3e0);color:var(--co-pending-fg,#b45309);display:inline-flex;align-items:center;gap:3px}
/* F4 — forward cash-curve zone (data-driven SVG polyline; gap month tinted). */
#financialsBody .cf-chart{padding:6px 4px 0;position:relative}
/* V-fin2 — crisp HTML Y-axis labels overlaid on the chart (replaces the distortion-smeared SVG <text>). */
#financialsBody .cf-ylabels{position:absolute;inset:6px 4px 0;pointer-events:none;z-index:1}
#financialsBody .cf-yl{position:absolute;left:2px;transform:translateY(-50%);font-size:9.5px;font-weight:700;color:var(--text-secondary);background:color-mix(in srgb,var(--card-bg) 78%,transparent);padding:0 3px;border-radius:4px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
/* V-fin4 — the first axis label ("THIS MONTH") was colliding with the bottom $0 Y-label (both bottom-left).
   Left-align the first label + indent the row past the Y-label gutter so they no longer overlap; the $0
   Y-label is nudged to sit on its gridline above the axis row. */
#financialsBody .cf-axis{display:flex;justify-content:space-between;margin-top:7px;font-size:9.5px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em}
#financialsBody .cf-axis span{flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#financialsBody .cf-axis span:first-child{text-align:left;padding-left:2px}
/* the bottom $0 Y-label sits fully ABOVE the chart baseline so it never collides with the THIS MONTH
   x-axis label below it; the chart wrapper reserves a little bottom room for the axis row. */
#financialsBody .cf-yl:last-child{transform:translateY(-115%)}
#financialsBody .cf-chart{padding-bottom:2px}
#financialsBody .cf-axis span.gap{color:var(--color-error)}
/* F5 — drill scroll-target highlight pulse (contained tint; zone is not overflow:hidden). */
#financialsBody #finBvaZone.fin-zone-pulse{border-radius:14px;animation:finZonePulse 1.4s ease}
@keyframes finZonePulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--app-accent) 38%,transparent)}40%{box-shadow:0 0 0 5px color-mix(in srgb,var(--app-accent) 16%,transparent)}100%{box-shadow:0 0 0 0 transparent}}
/* G4-W2 📘 — floating drill panel (Spent-to-Date / Cost-at-Completion → source; SOV-billed →
   pay apps). Rounded floating panel; close via icon; lines render through .ccbva-* inside.
   Unscoped — the class is unique to G4-W2 and mounts in both #financialsBody and #sovWorkspaceWrap. */
.fin-cost-drill{margin:6px 0 12px;padding:14px 16px 16px;border-radius:18px;animation:finDrillIn .28s var(--ease-out,ease)}
@keyframes finDrillIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.fin-cost-drill .fin-cost-drill-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.fin-cost-drill-title{font-size:13px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary)}
.fin-cost-drill-x{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:0;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 7%,transparent);color:var(--text-secondary);cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
.fin-cost-drill-x:hover{background:color-mix(in srgb,var(--text-primary) 13%,transparent);color:var(--text-primary)}
.fin-cost-drill-x .ic{width:14px;height:14px}
.fin-cost-drill-body{max-height:340px;overflow-y:auto}
.fin-sov-billed-door{cursor:pointer;border-radius:10px;transition:background var(--motion-fast)}
.fin-sov-billed-door:hover{background:color-mix(in srgb,var(--color-success,#34c759) 9%,transparent)}

/* ---- STAGES (pass-2 G3): journey medallions carry the stage's PHASE COLOR ----
   Phase color is the primary visual language. Default/idle/in-progress dots take
   the stage's --sc (set per-row); complete stays success-green; blocked/slip stay
   error-red (status signals that must override phase). Source-order wins. */
.stage-ws-row .stage-ws-dot{background:color-mix(in srgb,var(--sc,var(--app-accent)) 26%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sc,var(--app-accent)) 30%,transparent)}
.stage-ws-row .stage-ws-dot.st-in_progress{background:var(--sc,var(--app-accent));box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 3px color-mix(in srgb,var(--sc,var(--app-accent)) 26%,transparent)}
.stage-ws-row .stage-ws-dot.st-complete{background:var(--color-success)}
.stage-ws-row .stage-ws-dot.st-blocked,.stage-ws-row .stage-ws-dot.slip{background:var(--color-error)}

/* ---- ROLE HOMES (pass-2 G4): greeting becomes the lit-glass hero band ----
   All 4 homes (owner/om/acct/est) share .omh-head>.omh-greet. Give it the hero
   band so each role landing has one commanding moment (matches the Dashboard). */
/* pass-3 AUDIT FIX: --on-accent (was hardcoded #fff) — the hero derives from --app-accent so white-on-yellow fails WCAG on the contrast theme. Shared by all 4 role homes → fixes OM/Owner/Acct/Est at once. */
.omh-head{position:relative;overflow:hidden;border-radius:20px;padding:18px 22px;margin-bottom:16px;color:var(--on-accent);background:linear-gradient(135deg,color-mix(in srgb,var(--app-accent) 78%,#000) 0%,var(--app-accent) 52%,color-mix(in srgb,var(--app-accent) 82%,#fff) 100%);box-shadow:var(--lg-edge,inset 0 1px 0 rgba(255,255,255,.22)),var(--shadow-e3,0 18px 50px -18px rgba(20,30,48,.45))}
.omh-head::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(120% 80% at 0% 0%,rgba(255,255,255,.18),transparent 55%)}
.omh-head .omh-greet{position:relative;z-index:1;color:var(--on-accent);font-size:26px;font-weight:800;letter-spacing:-.02em}
.omh-head .omh-sub{position:relative;z-index:1;color:var(--on-accent);opacity:.9}
@media (max-width:640px){.omh-head{padding:14px 16px;border-radius:16px}.omh-head .omh-greet{font-size:21px}}
@media (max-width:760px){.fin-rollup{flex-wrap:wrap}.fin-rollup .ru-b{flex:1 1 40%}.fin-rollup .ru-op{flex:0 0 100%;justify-content:center;padding:2px}.fin-rollup .ru-b.total{flex:1 1 100%}}

/* ---- CONFIRM DIALOG (pass-2): material modal w/ scrim + icon tile (was bland) ---- */
.rt-confirm-overlay{position:fixed;inset:0;z-index:var(--z-top,9999);display:flex;align-items:center;justify-content:center;background:var(--overlay-bg,rgba(0,0,0,.4));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:rtConfirmFade var(--motion-base,.2s) var(--ease-out,ease)}
@keyframes rtConfirmFade{from{opacity:0}to{opacity:1}}
.rt-confirm-panel{background:var(--card-bg,#fff);border-radius:var(--radius-modal,18px);padding:20px 22px 16px;min-width:300px;max-width:440px;box-shadow:var(--shadow-e5,0 24px 64px -16px rgba(20,30,48,.4)),inset 0 1px 0 rgba(255,255,255,.22);border:.5px solid color-mix(in srgb,var(--app-accent) 5%,rgba(0,0,0,.06));animation:rtConfirmIn var(--motion-slow,.32s) var(--ease-out,cubic-bezier(.32,.72,0,1))}
@keyframes rtConfirmIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.rt-confirm-head{display:flex;gap:13px;align-items:flex-start;margin-bottom:16px}
.rt-confirm-ico{flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:var(--app-accent)}
.rt-confirm-ico svg{width:19px;height:19px}
.rt-confirm-panel.danger .rt-confirm-ico{background:var(--color-error-bg,#fdeaea);color:var(--color-error,#c0392b)}
.rt-confirm-msg{font-size:14px;line-height:1.5;color:var(--text-primary);padding-top:2px}
.rt-confirm-actions{display:flex;gap:8px;justify-content:flex-end}
@media (prefers-reduced-motion:reduce){.rt-confirm-overlay,.rt-confirm-panel{animation:none}}

/* 📘 Recycle-bin modal (P11 cluster #4) — shared by the daily-log + photo bins.
   Rides the .rt-confirm-overlay/.rt-confirm-panel base; widens the panel and lays out
   the deleted-item list with per-row Restore / Delete-forever. */
.rtbin-panel{width:min(560px,calc(100vw - 32px));max-width:560px;padding:20px 22px 18px;display:flex;flex-direction:column;gap:0}
.rtbin-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.rtbin-title{display:flex;align-items:center;font-size:16px;font-weight:800;color:var(--text-primary)}
.rtbin-x{border:0;background:transparent;font-size:22px;line-height:1;color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-sm,8px);width:30px;height:30px;transition:background var(--motion-base,.2s)}
.rtbin-x:hover{background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-primary)}
.rtbin-sub{font-size:12.5px;color:var(--text-secondary);margin-bottom:14px}
.rtbin-list{display:flex;flex-direction:column;gap:8px;max-height:min(60vh,420px);overflow:auto}
.rtbin-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:var(--radius-md,12px);background:var(--card-bg);border:.5px solid color-mix(in srgb,var(--text-primary) 8%,transparent);box-shadow:var(--shadow-e1,0 1px 2px rgba(20,30,48,.06))}
.rtbin-main{min-width:0;display:flex;flex-direction:column;gap:2px}
.rtbin-item-title{font-size:14px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rtbin-item-meta{font-size:12px;color:var(--text-secondary)}
.rtbin-acts{display:flex;gap:8px;flex-shrink:0}
.rtbin-acts .btn.danger{color:var(--danger,#c0392b)}
.rtbin-empty{padding:28px 8px;text-align:center;color:var(--text-secondary);font-size:13.5px}
.rtbin-thumb{width:56px;height:56px;border-radius:var(--radius-sm,8px);object-fit:cover;flex-shrink:0;background:color-mix(in srgb,var(--text-primary) 6%,transparent)}
.rtbin-row.rtbin-photo-row{gap:12px}
.rtbin-row.rtbin-photo-row .rtbin-main{flex-direction:row;align-items:center;gap:12px;flex:1}

/* E7-3 — "Documents for this record" floating panel (reverse doc↔record back-links). */
.rec-docs-panel{width:min(480px,calc(100vw - 32px));max-width:480px;padding:18px 18px 16px;display:flex;flex-direction:column;gap:12px}
.rec-docs-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rec-docs-title{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:650;color:var(--text-primary)}
.rec-docs-title .sb-ico{width:17px;height:17px;color:var(--app-accent)}
.rec-docs-list{display:flex;flex-direction:column;gap:8px;max-height:min(60vh,440px);overflow:auto;margin:0 -4px;padding:0 4px}
.rec-doc-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--app-accent) 4%,var(--surface-2,rgba(120,130,150,.06)));border:.5px solid color-mix(in srgb,var(--app-accent) 6%,rgba(0,0,0,.05));transition:background var(--motion-base,.2s) var(--ease-out,ease)}
.rec-doc-row:hover{background:color-mix(in srgb,var(--app-accent) 9%,var(--surface-2,rgba(120,130,150,.06)))}
.rec-doc-main{display:flex;align-items:center;gap:10px;min-width:0}
.rec-doc-ic{flex:0 0 auto;width:18px;height:18px;color:var(--app-accent)}
.rec-doc-meta{min-width:0}
.rec-doc-name{font-size:13px;font-weight:550;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec-doc-sub{font-size:11.5px;color:var(--text-muted);margin-top:1px}
.rec-doc-acts{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.rec-doc-empty{text-align:center;padding:30px 18px;color:var(--text-muted)}
.rec-doc-empty-ic{width:30px;height:30px;color:color-mix(in srgb,var(--app-accent) 40%,var(--text-muted));margin-bottom:8px}
.rec-doc-empty-t{font-size:13.5px;font-weight:600;color:var(--text-secondary)}
.rec-doc-empty-s{font-size:12px;margin-top:3px;line-height:1.45}
@media (hover:none){.rec-doc-acts .btn{padding:8px 12px}}

/* ---- ERROR STATE (pass-2): crafted shell w/ alert medallion (was flat text) ---- */
.rt-failure{display:grid;place-items:center;text-align:center;gap:8px;padding:36px 24px;margin:8px 0;border-radius:16px;background:color-mix(in srgb,var(--color-error,#ef4444) 4%,transparent);border:1px dashed color-mix(in srgb,var(--color-error,#ef4444) 28%,transparent)}
.rt-failure-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--color-error-bg,#fdeaea);color:var(--color-error,#c0392b)}
.rt-failure-ico svg{width:21px;height:21px}
.rt-failure-title{font-size:14px;font-weight:700;color:var(--text-primary)}

/* ---- COMM LOG (pass-2): Messages-thread — day dividers + party faces ---- */
.clog-day-divider{display:flex;align-items:center;gap:10px;margin:14px 2px 8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}
.clog-day-divider::before,.clog-day-divider::after{content:"";flex:1;height:.5px;background:var(--chrome-border,rgba(0,0,0,.08))}
.clog-day-divider span{flex:0 0 auto}
.clog-face{width:26px;height:26px;font-size:10px;margin-top:7px}

/* ---- ITBs (pass-2): bid-tracking funnel header ---- */
.itb-funnel{display:flex;align-items:stretch;gap:0;margin:0 0 14px;border-radius:14px;overflow:hidden;background:var(--card-bg,#fff);box-shadow:var(--shadow-e1,0 4px 14px -6px rgba(20,30,48,.18));border:.5px solid rgba(0,0,0,.05)}
.itb-funnel-step{flex:1;display:flex;flex-direction:column;gap:1px;padding:12px 14px;justify-content:center}
.itb-funnel-step .ifs-v{font-size:21px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.05}
.itb-funnel-step .ifs-l{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
.itb-funnel-step.recv .ifs-v{color:var(--color-info,#2563c9)}
.itb-funnel-step.awarded{background:linear-gradient(135deg,color-mix(in srgb,var(--color-success,#34c759) 16%,var(--card-bg)),var(--card-bg))}
.itb-funnel-step.awarded .ifs-v{color:var(--color-success,#137a4b)}
.itb-funnel-arrow{display:flex;align-items:center;padding:0 2px;color:var(--text-muted);font-size:18px;font-weight:300}
@media (max-width:640px){.itb-funnel-step .ifs-v{font-size:17px}.itb-funnel-step{padding:10px}}
/* Tier-C 5: bid-leveling spread bar + low-vs-median flag */
.bl-spread-bar{position:relative;height:22px;margin:8px 4px 4px;padding-top:8px}
.bl-spread-track{position:absolute;left:0;right:0;top:13px;height:3px;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--color-success,#34c759) 55%,transparent),color-mix(in srgb,var(--color-warning,#f59e0b) 45%,transparent),color-mix(in srgb,var(--color-error,#ef4444) 50%,transparent))}
.bl-pip{position:absolute;top:9px;width:11px;height:11px;border-radius:999px;background:var(--text-muted);transform:translateX(-50%);box-shadow:0 0 0 2px var(--card-bg,#fff);z-index:1}
.bl-pip.low{background:var(--color-success,#137a4b);width:13px;height:13px;top:8px}
.bl-pip.won{box-shadow:0 0 0 2px var(--card-bg,#fff),0 0 0 4px color-mix(in srgb,var(--app-accent) 45%,transparent)}
.bl-spread-lbl{position:absolute;top:0;font-size:10px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-muted)}
.bl-spread-lbl.bl-lo{left:0}
.bl-spread-lbl.bl-hi{right:0}
.bl-low-flag{font-size:11px;font-weight:700;margin:2px 4px 8px;display:inline-block;padding:2px 8px;border-radius:999px}
.bl-low-flag.good{color:var(--color-success,#137a4b);background:var(--color-success-bg,#e7f7ef)}
.bl-low-flag.warn{color:var(--co-pending-fg,#b45309);background:var(--color-warning-bg,#fdf3e0)}

/* ===== ITBs · Pass 2 (2026-06-05) — buyout pipeline as per-trade cards ===== */
/* Funnel rollup on white (Invited→Responded→Awarded; viewed honest-omitted — no viewed_at) */
#itbList .ih-funnel{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--chrome-border);border-radius:14px;overflow:hidden;margin-top:4px}
#itbList .funnel-step{background:var(--card-bg);padding:14px 16px}
#itbList .funnel-step .fn{font-size:26px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
#itbList .funnel-step .fl{font-size:10px;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-top:4px}
#itbList .funnel-step .fbar{margin:9px 0 0}
/* ITB per-trade card */
#itbList .itb-card{border-radius:18px;background:var(--card-bg);box-shadow:var(--bevel-top),var(--shadow-e2);border:.5px solid rgba(0,0,0,.05);overflow:hidden;margin-bottom:14px;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast)}
#itbList .itb-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-e3)}
#itbList .itb-top{display:flex;align-items:flex-start;gap:13px;padding:16px 18px 13px;border-bottom:.5px solid color-mix(in srgb,var(--app-accent) 3%,rgba(0,0,0,.05))}
#itbList .itb-trade-ico{width:42px;height:42px;flex:0 0 42px;border-radius:12px;display:grid;place-items:center;font-size:20px;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
#itbList .itb-trade-ico .ic{width:20px;height:20px;color:#fff}
#itbList .itb-scope{font-weight:800;font-size:15px;letter-spacing:-.01em;color:var(--text-primary);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
#itbList .itb-sub{font-size:11.5px;color:var(--text-secondary);margin-top:1px}
#itbList .itb-due{margin-left:auto;text-align:right;flex-shrink:0}
#itbList .itb-due .dn{font-size:13px;font-weight:800}
#itbList .itb-due .dl{font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}
/* recipient (bidder) row */
#itbList .rcpt{display:flex;align-items:center;gap:11px;padding:11px 18px;border-bottom:.5px solid color-mix(in srgb,var(--app-accent) 3%,rgba(0,0,0,.04))}
#itbList .rcpt:last-of-type{border-bottom:0}
#itbList .rcpt .rc-av{width:30px;height:30px;flex:0 0 30px;border-radius:999px;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:800;box-shadow:0 0 0 2px var(--card-bg),var(--shadow-e1)}
#itbList .rcpt .rc-id{min-width:0}
#itbList .rcpt .rc-name{font-weight:700;font-size:13px;color:var(--text-primary)}
#itbList .rcpt .rc-meta{font-size:11px;color:var(--text-muted)}
#itbList .rcpt .rc-amt{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text-primary)}
#itbList .rcpt-track{margin-left:auto;display:flex;align-items:center;gap:7px;flex-shrink:0}
#itbList .trk{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;padding:3px 8px;border-radius:999px;letter-spacing:.02em;border:0;cursor:default}
#itbList .trk-sent{background:var(--badge-neutral-bg);color:var(--badge-neutral-fg)}
#itbList .trk-responded{background:var(--color-success-bg);color:#137a4b}
#itbList .trk-declined{background:var(--color-error-bg);color:#c0392b}
#itbList .lowbid{font-size:9.5px;font-weight:800;padding:2px 7px;border-radius:999px;background:linear-gradient(160deg,color-mix(in srgb,var(--color-success) 88%,#fff),var(--color-success));color:#fff;letter-spacing:.03em}
/* award/status select on a recipient — quiet pill */
#itbList .rcpt-sel{height:26px;border-radius:999px;border:.5px solid var(--chrome-border);background:var(--surface);font-family:inherit;font-size:10.5px;font-weight:700;color:var(--text-secondary);padding:0 6px;cursor:pointer}
#itbList .rcpt-del{background:none;border:0;color:var(--text-muted);cursor:pointer;padding:3px;border-radius:6px;opacity:0;transition:opacity var(--motion-fast),color var(--motion-fast)}
#itbList .rcpt-del svg{width:13px;height:13px}
#itbList .rcpt:hover .rcpt-del{opacity:.7}#itbList .rcpt-del:hover{color:var(--app-danger);opacity:1}
/* bid-spread leveling bar (vs MEDIAN — honest, not a fake budget) */
#itbList .spread-wrap{padding:13px 18px 4px}
#itbList .spread-head{display:flex;align-items:center;gap:8px;margin-bottom:9px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
#itbList .spread-head b{color:var(--app-accent);font-variant-numeric:tabular-nums}
#itbList .spread-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
#itbList .spread-row .sn{width:130px;font-size:11.5px;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:5px;flex-shrink:0}
#itbList .spread-row .sw{flex:1}
#itbList .spread-row .sv{width:66px;text-align:right;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;flex-shrink:0}
/* card foot */
#itbList .itb-foot{display:flex;align-items:center;gap:10px;padding:12px 18px;background:color-mix(in srgb,var(--app-accent) 3%,var(--surface));flex-wrap:wrap}
#itbList .itb-foot .ift-spread{font-size:11.5px;font-weight:700;color:var(--text-secondary)}
#itbList .itb-foot .ift-spread b{color:var(--app-accent);font-variant-numeric:tabular-nums}
#itbList .itb-foot .spacer{flex:1}
/* ITB toolbar (segmented group-by + actions) */
#itbList .itb-toolbar{display:flex;align-items:center;gap:8px;margin:16px 0 14px;flex-wrap:wrap}
#itbList .itb-seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--surface-2)}
#itbList .itb-seg button{border:0;background:transparent;font-family:inherit;font-size:12px;font-weight:700;color:var(--text-secondary);padding:5px 13px;border-radius:999px;cursor:pointer;transition:background var(--motion-fast),box-shadow var(--motion-fast),color var(--motion-fast)}
#itbList .itb-seg button.on{background:var(--surface);box-shadow:var(--shadow-e1);color:var(--text-primary)}
#itbList .itb-toolbar .spacer{flex:1}
@media (max-width:640px){
  #itbList .ih-funnel{grid-template-columns:1fr 1fr}
  #itbList .spread-row .sn{width:96px}
  #itbList .itb-due{margin-left:0;width:100%;text-align:left;margin-top:4px}
}

/* ---- GANTT (pass-2 Tier-C 3): cross-project dependency connectors ---- */
.tl-dep-svg .tl-dep-path{stroke:var(--app-accent);stroke-width:1.5;stroke-dasharray:4 3;opacity:.7}
.tl-dep-svg .tl-dep-dot{fill:var(--app-accent)}
.tl-dep-svg .tl-dep-arrow{fill:var(--app-accent)}
/* timing-conflict link: downstream starts before upstream ends → danger tint */
.tl-dep-svg .tl-dep-conflict .tl-dep-path{stroke:var(--app-danger,#e5484d)}
.tl-dep-svg .tl-dep-conflict .tl-dep-dot,.tl-dep-svg .tl-dep-conflict .tl-dep-arrow{fill:var(--app-danger,#e5484d)}
/* on-graph annotation pill (carries the dep label: type/lag note) */
.tl-dep-svg .tl-dep-pill rect{fill:var(--surface);stroke:var(--app-accent);stroke-width:.75;opacity:.96}
.tl-dep-svg .tl-dep-pill text{fill:var(--text-primary);font-size:10.5px;font-weight:600}
.tl-dep-svg .tl-dep-pill.tl-dep-conflict rect{stroke:var(--app-danger,#e5484d)}
.tl-mode-dependencies .tl-row-label{font-weight:600}
/* crafted empty-state for Dependencies mode — floats centered over the portfolio rows */
.tl-dep-empty{position:absolute;left:50%;top:38px;transform:translateX(-50%);max-width:420px;
  z-index:4;background:var(--surface);border:.5px solid var(--chrome-border);border-radius:16px;
  box-shadow:var(--shadow-e2);padding:6px 10px}

/* ---- REPORTS (pass-2 Tier-C 4): scheduled-delivery composer ---- */
.rsch-list{margin:0 0 12px;display:flex;flex-direction:column;gap:6px}
.rsch-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 11px;border-radius:10px;background:var(--surface-2,rgba(120,120,128,.1));font-size:12.5px;font-weight:600}
.rsch-del{border:0;background:transparent;color:var(--text-muted);cursor:pointer;font-size:13px;padding:2px 6px;border-radius:6px}
.rsch-del:hover{background:var(--color-error-bg,#fdeaea);color:var(--color-error,#c0392b)}
.rsch-empty{margin:0 0 12px;font-size:12.5px;color:var(--text-muted)}
.rsch-form{display:flex;gap:8px;margin-bottom:14px}
.rsch-form .field-input{flex:1}
.rsch-form:last-of-type{margin-bottom:14px}
/* enh7 — schedule row meta: format pill (contained fill, no edge-strip, rounded) + bound-report name */
.rsch-meta{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.rsch-meta>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rsch-pill{flex-shrink:0;font-size:10px;font-weight:800;letter-spacing:.3px;padding:2px 7px;border-radius:999px;background:var(--surface-3,rgba(120,120,128,.16));color:var(--text-muted)}
.rsch-pill-pdf{background:var(--accent-tint,rgba(0,122,255,.14));color:var(--accent,#0a84ff)}
.rsch-src{font-weight:700;color:var(--text-secondary,var(--text-muted))}

/* ---- PROJECT OVERVIEW (pass-2 22-project-overview.html): flagship workspace ---- */
/* Faithful port of the prototype composition. NO colored edge-strips (hard rule) —
   phase/semantic identity is carried via tile FILL tint + the focal next-action band. */
.ovx{display:grid;gap:18px}
/* ── pass-3 standard (2026-06-07): ONE content panel holds the workspace; each section is its own
   raised WHITE sub-card; depth via elevation, never color tint. (_STANDARD.md §A) ── */
/* pass-3: panel = SOLID subtle surface (NOT glass) — content panels stay solid (glass is for
   floating chrome only), and a big backdrop-filter blur inside the scroll area caused scroll JANK
   (per-frame blur repaint). The faint surface tint still lets the white zone-cards pop. */
/* V133 fix (2026-06-09): the outer panel is the MATTE STAGE, not a second raised surface. The pass-3
   "white cards on a white raised panel" model double-raised every section (a raised .ovx-zone sitting on
   a raised .ovx-panel = panel-on-panel, the visible double-box). Per the floating-panel canon, sections
   float ONCE on the matte (--app-bg shows through the gaps); only .ovx-zone carries the shadow. So the
   stage goes flat: matte bg, no shadow, no border — just the flex layout + padding/gap. */
.ovx-panel{display:flex;flex-direction:column;gap:14px;background:transparent;box-shadow:none;border:0;padding:0}
/* V151 — latest-site-photos strip on the Overview (CompanyCam glance). Horizontal scroll, scroll-snap.
   Tile clips its img to rounded corners (overflow:hidden) so the hover is a CONTAINED ring+brighten,
   NOT a translateY lift (the rounded-hover / band-cell-in-overflow:hidden canon). */
.mps-strip{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding:2px 2px 8px;scrollbar-width:thin}
.mps-tile{position:relative;flex:0 0 auto;width:148px;height:108px;border-radius:12px;overflow:hidden;border:0;padding:0;cursor:pointer;scroll-snap-align:start;background:var(--chrome-bg,#f0f0f3);box-shadow:var(--shadow-e2),inset 0 0 0 .5px var(--chrome-border,rgba(0,0,0,.08));transition:box-shadow var(--motion-fast,.15s) var(--ease-spring,ease)}
.mps-tile:hover{box-shadow:var(--shadow-e3),inset 0 0 0 1.5px var(--app-accent,#0a84ff)}
.mps-tile img{width:100%;height:100%;object-fit:cover;display:block}
.mps-when{position:absolute;left:6px;bottom:6px;font:700 10px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:#fff;background:rgba(0,0,0,.55);padding:3px 6px;border-radius:999px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.mps-pin{position:absolute;right:6px;top:6px;width:18px;height:18px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);border-radius:999px;color:#fff}
.mps-pin svg{width:11px;height:11px}
.mps-issue{position:absolute;left:6px;top:6px;font:800 9px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.04em;color:#fff;background:var(--color-error,#ef4444);padding:3px 6px;border-radius:999px}
/* [2026-06-09 depth match] Zone cards use the subtle bevel-tinted surface (not flat #fff) so the bright
   white cockpit chips + content cards INSIDE them read as lifted (lighter-on-tinted = depth), the way
   Contacts' white cards pop off the frosted panel. */
.ovx-zone[hidden]{display:none}
.ovx-zone{padding:18px 20px;border-radius:14px;background:var(--surface-grad,var(--card-bg,#fff));border:.5px solid rgba(0,0,0,.06);box-shadow:var(--lg-edge),var(--shadow-e2)}
/* ══ OVERVIEW COMMAND CENTER (cont.34 redesign) ══════════════════════════════════════ */
.ovc .ovx-panel{gap:11px}
.ovc-act{display:flex;flex-direction:column;gap:7px;scroll-margin-top:80px}
/* the needs content is a raised WHITE card (its own head hidden — the act head is the title) */
.ovc #ovc-needs .ny-card{background:var(--card-bg);border-radius:16px;padding:8px 8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),var(--shadow-e2);border:.5px solid color-mix(in srgb,var(--text-primary) 6%,transparent);transition:box-shadow var(--motion-base) var(--ease-out),transform var(--motion-base) var(--ease-out)}
.ovc #ovc-needs .ny-card:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),var(--shadow-e3)}
.ovc #ovc-needs .ny-card > .ovx-zone-head{display:none}
.ovc-act-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 2px}
.ovc-act-head h2{display:flex;align-items:center;gap:9px;margin:0;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text-secondary)}
.ovc-act-ic{width:15px;height:15px;stroke:currentColor;fill:none;color:var(--app-accent);opacity:.9}
.ovc-act-link{font-size:12.5px;font-weight:700;color:var(--app-accent);cursor:pointer;padding:3px 9px;border-radius:8px;transition:background var(--motion-fast) var(--ease-out)}
.ovc-act-link:hover{background:color-mix(in srgb,var(--app-accent) 10%,transparent)}
.ovc-act-body{display:flex;flex-direction:column;gap:12px}
.ovc-act-body > .ovx-zone-head{display:none}
.ovc-act-body .ovx-zone-head h3{font-size:12.5px;letter-spacing:.02em;color:var(--text-secondary)}
/* 2026-07-01 (Gavin) — bare acts drop the redundant grey section title; the chip's OWN head is the
   title. Reveal any chip head inside a bare act (the merged schedule card + activity self-title). The
   act had no top margin from the removed head, so add a touch of separation from the act above. */
.ovc-act.is-bare{margin-top:2px}
.ovc-act.is-bare .ovx-zone-head{display:flex !important}
.ovc-act.is-bare .ov-sched-merged > .ovx-zone .ovx-zone-head{display:flex !important}
.ovc-act-body > .ovx-zone,.ovc-act-body > .ov-deck > .ovx-zone{background:var(--card-bg);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),var(--shadow-e2);border:.5px solid color-mix(in srgb,var(--text-primary) 6%,transparent);transition:box-shadow var(--motion-base,.22s) var(--ease-out),transform var(--motion-base,.22s) var(--ease-out)}
.ovc-act-body > .ovx-zone:hover,.ovc-act-body > .ov-deck > .ovx-zone:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),var(--shadow-e3)}
@media (prefers-reduced-motion:reduce){.ovc-act-body > .ovx-zone{transition:none}.ovc-act-body > .ovx-zone:hover{transform:none}}
/* (2026-07-31 — the old ≥1100px `#ovc-field .ov-deck{display:grid 1fr 1fr}` override was removed:
   the Field act now lives in the narrow ROW-2 right rail, where a 2-col split never fits; see the
   .ov-field-deck rule further below, which now owns the (stacked) layout for this act.) */
/* 2-col decks compose acts across the FULL WIDTH instead of tall stacks (Schedule, Field).
   V-ov2 2026-07-01 — stretch so an EMPTY card matches its populated sibling's height (an empty
   zone's crafted empty-state then centers/fills the cell instead of clustering at the top with a
   grey void beneath — the sparse-feeling fix). */
.ovc-act-body > .ov-deck-2{display:grid;gap:11px;align-items:stretch}
@media (min-width:960px){.ovc-act-body > .ov-deck-2{grid-template-columns:1fr 1fr}}
/* empty zones become flex columns so their crafted empty-state can center in the freed height */
.ovc-act-body > .ov-deck-2 > .ovx-zone{display:flex;flex-direction:column}
.ovc-act-body > .ov-deck-2 > .ovx-zone{background:var(--card-bg);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),var(--shadow-e2);border:.5px solid color-mix(in srgb,var(--text-primary) 6%,transparent);transition:box-shadow var(--motion-base) var(--ease-out),transform var(--motion-base) var(--ease-out)}
.ovc-act-body > .ov-deck-2 > .ovx-zone:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),var(--shadow-e3)}
/* (2026-07-31 cockpit recompose — the old #ovc-needs 1.7fr/1fr override was removed: Needs-you no
   longer shares a deck row with Ball-in-court, which moved to the ROW-2 right rail as its own act;
   .ov-deck-2 is now UNREFERENCED by overview.js markup (the Record band uses its own
   .ov-record-deck breakpoint set) — kept as dead CSS this wave, candidate for a cleanup pass.) */
/* SCHEDULE act: status+lookahead merged into ONE card (.ov-sched-merged). 2026-07-31 cockpit
   recompose — weather moved OUT to its own act in the RIGHT rail (ROW-2 spec: left column is
   needs→money→schedule, right column is bic→weather→field), so the old .ov-sched-deck 2-col
   sibling grid (schedule beside weather) no longer applies; #movWeatherZone's panel treatment
   below is now scoped directly to the id (still unique per page) instead of that removed parent. */
/* 🦩 #27 — weather work-risk read (uses the delayLikely/windMph the route already returns) */
.ov-wx-wind{font-size:12px;font-weight:650;color:var(--text-secondary)}
.ov-wx-risk{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;border-radius:10px;padding:7px 10px;margin-top:8px}
.ov-wx-risk .ic{width:13px;height:13px;flex:0 0 13px}
.ov-wx-risk.warn{background:color-mix(in srgb,var(--color-warning) 14%,transparent);color:color-mix(in srgb,var(--color-warning) 72%,#5a3800)}
.ov-wx-risk.ok{background:color-mix(in srgb,var(--color-success) 10%,transparent);color:var(--color-success)}
/* weather companion: a self-contained panel — head at top, the (enlarged) conditions readout
   centered in the body, foot pinned to the bottom. Modest min-height so it has presence. */
#movWeatherZone{display:flex;flex-direction:column;min-height:190px}
#movWeatherZone > #movWeather{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
#movWeatherZone .ov-wx{gap:10px}
#movWeatherZone .ov-wx-emoji{font-size:40px}
#movWeatherZone .ov-wx-emoji .wx-svg{width:40px;height:40px}
#movWeatherZone .ov-wx-temp{font-size:32px}
#movWeatherZone .ov-wx-foot{margin-top:auto;padding-top:8px}
#movWeatherZone .ov-wx-empty{margin:auto 0}
/* the merged schedule card holds TWO inner .ovx-zones (status + lookahead) — flatten them so they
   read as one card split by a hairline, not two nested cards. */
.ov-sched-merged{padding:0!important;display:flex;flex-direction:column}
.ov-sched-merged > .ovx-zone{background:none!important;box-shadow:none!important;border:0!important;border-radius:0!important;padding:16px 18px!important}
.ov-sched-merged > .ovx-zone + .ovx-zone{border-top:.5px solid color-mix(in srgb,var(--text-primary) 7%,transparent)!important}
.ov-sched-merged > .ovx-zone:hover{transform:none!important;box-shadow:none!important}
/* FIELD (On site) act: 2026-07-31 cockpit recompose — this act now lives in the NARROW right
   rail column (ROW-2 spec), so activity + photos stack (a side-by-side split doesn't fit a
   ~1fr-of-2.6 column at any viewport that matters). The timestamp-on-the-right treatment from the
   old full-width "solo" layout still reads well stacked-narrow, so it stays the default. */
.ovc-act-body > .ov-field-deck{display:flex;flex-direction:column;gap:11px}
.ovc #ovc-field .story{padding:9px 2px;align-items:center}
.ovc #ovc-field .story .s-body{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.ovc #ovc-field .story .s-time{margin-top:0;flex:0 0 auto;white-space:nowrap}
.ovc-act-body > .ov-field-deck > .ovx-zone{background:var(--card-bg);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),var(--shadow-e2);border:.5px solid color-mix(in srgb,var(--text-primary) 6%,transparent)}
.ovc .ov-clear{display:flex;align-items:center;gap:8px;padding:10px 2px;font-size:12.5px;color:var(--text-secondary)}
/* V-ov2 2026-07-01 — crafted mini empty-state that centers/fills its zone cell (stretched deck).
   Icon medallion (neutral, theme-tracking color — NOT black), title, sub, quiet add affordance. */
.ov-mini-empty{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:22px 16px;min-height:120px}
.ov-mini-empty-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--text-muted);
  background:color-mix(in srgb,var(--text-primary) 5%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.ov-mini-empty-ic svg{width:19px;height:19px;stroke:currentColor}
.ov-mini-empty-title{font-size:13.5px;font-weight:700;color:var(--text-secondary)}
.ov-mini-empty-sub{font-size:12px;font-weight:500;color:var(--text-muted);max-width:34ch;line-height:1.4}
.ov-mini-empty-cta{margin-top:4px;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--app-accent);
  background:color-mix(in srgb,var(--app-accent) 9%,transparent);border:0;padding:6px 13px;border-radius:9px;cursor:pointer;
  transition:background var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-out)}
.ov-mini-empty-cta svg{width:13px;height:13px;stroke:currentColor;fill:none}
.ov-mini-empty-cta:hover{background:color-mix(in srgb,var(--app-accent) 16%,transparent);transform:translateY(-1px)}
/* ── NEEDS YOU NOW — raised card, ATIRA ORB severity, tight rhythm (revamp) ─────────────
   The needs content is a raised white card (the act body wraps it), each row led by a lit Atira
   ORB toned to its severity, tight rows separated by a hairline (no wasted space). */
.ovc #ovc-needs .ny-row{display:flex;align-items:center;gap:13px;padding:10px 12px;border-radius:12px;border-bottom:0;cursor:pointer;position:relative;transition:background var(--motion-fast) var(--ease-out)}
.ovc #ovc-needs .ny-row + .ny-row{box-shadow:0 -0.5px 0 color-mix(in srgb,var(--text-primary) 7%,transparent)}
.ovc #ovc-needs .ny-row:hover{background:color-mix(in srgb,var(--app-accent) 5%,transparent)}
/* the severity dot → a true Atira ORB (lit sphere, per-status tone via --orbt) */
.ovc #ovc-needs .ny-sev{--orbt:var(--color-error);width:26px;height:26px;border-radius:50%;flex:0 0 auto;position:relative;overflow:visible;
  background-color:var(--orbt);
  background-image:radial-gradient(circle at 34% 28%,rgba(255,255,255,.72),transparent 46%),radial-gradient(circle at 66% 82%,rgba(0,0,0,.30),transparent 52%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 3px rgba(0,0,0,.22),0 2px 6px color-mix(in srgb,var(--orbt) 42%,transparent),0 0 0 .5px color-mix(in srgb,var(--orbt) 34%,transparent)}
.ovc #ovc-needs .ny-sev::after{content:"";position:absolute;top:15%;left:26%;width:34%;height:26%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.85),transparent 70%);pointer-events:none}
.ovc #ovc-needs .ny-sev.err{--orbt:var(--color-error)}
.ovc #ovc-needs .ny-sev.warn{--orbt:var(--color-warning)}
.ovc #ovc-needs .ny-sev.ok{--orbt:var(--color-success)}
[data-theme="midnight"] .ovc #ovc-needs .ny-sev,[data-theme="contrast"] .ovc #ovc-needs .ny-sev{background-image:radial-gradient(circle at 34% 28%,rgba(255,255,255,.5),transparent 46%),radial-gradient(circle at 66% 82%,rgba(0,0,0,.42),transparent 52%)}
.ovc #ovc-needs .ny-handoff{font-size:12px;font-weight:800;color:var(--app-accent);padding:5px 11px;border-radius:9px;transition:background var(--motion-fast) var(--ease-out)}
.ovc #ovc-needs .ny-row:hover .ny-handoff{background:color-mix(in srgb,var(--app-accent) 12%,transparent)}
/* the "since your last visit" ribbon = a raised WHITE banner on the grey matte (like the hero).
   2026-07-31 cockpit recompose (ROW 0) — visually slimmer: tighter vertical padding + smaller
   type so it reads as a quiet return-briefing strip, not a full act-weight band. */
.ovc .ovx-since{background:var(--card-bg);border-radius:12px;box-shadow:var(--bevel-top),var(--shadow-e2);border:.5px solid color-mix(in srgb,var(--text-primary) 6%,transparent);padding:8px 16px}
.ovc .ovx-since-empty .since-title{font-size:12.5px;font-weight:600;color:var(--text-secondary)}
.ovc .ovx-since-empty .since-when{font-size:11.5px;color:var(--text-muted)}

/* ══ ROW 2 — COCKPIT GRID (2026-07-31 recompose) ═══════════════════════════════════════════
   Replaces 4 stacked single-column acts (needs/money/schedule/field) with ONE composed 2-col
   grid: LEFT = needs-you-now → money → schedule (the "what do I do, what's it cost, when" spine).
   RIGHT = ball-in-court → weather → field activity+photos (the "who's it on, what's the site
   doing" companion rail). Collapses to 1-col under 960px (mobile/portrait-tablet). Each column's
   acts keep their EXISTING internal builders/CSS (.ovc-act-body > .ovx-zone etc.) — only the
   outer grouping changed, so all the deck/zone rules below this point still apply unmodified. */
/* The ROW-1 pulse rail's zone header ("Project pulse") owns the title now — the strip's own
   inline eyebrow (.pfv-pulse-label, from _pfvPulseHtml) would double it. Scoped to the holder
   so the strip renders unchanged anywhere it isn't wrapped. */
.ovc .ovx-zone.is-holder .pfv-pulse-label{display:none}
.ovc-cockpit{display:grid;gap:14px}
@media (min-width:960px){.ovc-cockpit{grid-template-columns:1.6fr 1fr;align-items:start}}
.ovc-cockpit-col{display:flex;flex-direction:column;gap:14px;min-width:0}
/* a bare act inside a cockpit column still gets its normal top-separation rhythm */
.ovc-cockpit-col .ovc-act.is-bare{margin-top:0}
.ovc-cockpit-col .ovc-act + .ovc-act{margin-top:2px}
/* the right rail's solo zones (BIC / weather) don't have their own act-head wrapper elsewhere —
   give them the same rounded raised-card treatment as every other zone in the cockpit so the two
   columns read as ONE coherent instrument panel, not two different visual systems. */
.ovc-cockpit-right #ovc-bic .ovx-zone,.ovc-cockpit-right #ovc-weather .ovx-zone{margin:0}

/* ══ ROW 3 — RECORD BAND 3-UP (2026-07-31 recompose) ═══════════════════════════════════════
   Decisions / linked to-dos / linked notes as a 3-up deck (collapses to 1-col under 960px, 2-col
   between 700-959px so it never orphans a single narrow card). Connections + closeout trail the
   deck and self-hide when empty (both already gate on `hidden`/empty return) — graceful collapse
   per spec, no extra CSS needed for that part. */
.ovc-act-body > .ov-record-deck{display:grid;gap:11px;align-items:stretch}
@media (min-width:700px) and (max-width:959px){.ovc-act-body > .ov-record-deck{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.ovc-act-body > .ov-record-deck{grid-template-columns:repeat(3,1fr)}}
.ovc-act-body > .ov-record-deck > .ovx-zone{display:flex;flex-direction:column;background:var(--card-bg);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),var(--shadow-e2);border:.5px solid color-mix(in srgb,var(--text-primary) 6%,transparent);transition:box-shadow var(--motion-base) var(--ease-out),transform var(--motion-base) var(--ease-out)}
.ovc-act-body > .ov-record-deck > .ovx-zone:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),var(--shadow-e3)}
/* ══ COMMAND BAR HERO — a premium INSTRUMENT PANEL (ceiling build) ══════════════════════
   Physical-pane material (--surface-grad gradient + bevel + specular top-rim via .lg-sheen),
   carrying the PROJECT color (--ovcb-ph) as a leading identity edge. Ring = dimensional beveled
   gauge w/ glow + draw-in; vitals = pressable physical chips; count-up + ring-sweep motion. */
/* the HERO = ONE full-width instrument panel: command-bar (ring+state+vitals) LEFT, the editable
   phase/PM/contract/progress strip RIGHT — composed together so the width is USED, not half-empty.
   Project identity via a subtle gradient corner-tint (NOT an edge-strip). Depth = bevel + e2 (token
   ladder, no cutoffs). */
.ovc-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(340px,auto) 1fr;align-items:stretch;border-radius:20px;overflow:hidden;
  /* ONE consistent white surface across both halves — the old 120deg accent→card→app-bg gradient
     read as a two-tone split (left tinted, right white). Now a flat card-bg with only a whisper of
     project-color in the very top-left CORNER (radial, fades out by 40%) so the identity edge stays
     but the panel reads as a single material, not two shaded halves. */
  background:var(--card-bg);
  box-shadow:var(--bevel-top),var(--shadow-e2);border:.5px solid color-mix(in srgb,var(--text-primary) 6%,transparent)}
.ovc-hero::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(280px 150px at 0% 0%,color-mix(in srgb,var(--ovcb-ph,var(--app-accent)) 7%,transparent),transparent 46%)}
.ovc-hero > *{position:relative;z-index:1}
.ovc-hero-strip{display:flex;align-items:center;padding:16px 22px 16px 22px;border-left:.5px solid color-mix(in srgb,var(--text-primary) 7%,transparent)}
/* inside the hero the ihdr is NOT its own card (the hero owns the material) — transparent, no margin,
   its own top-shadow/border stripped. The 5 readout cells lay in an EVEN 3-col grid (no ragged wrap /
   dead right-gap), and the progress curve spans the full bottom row so the width is used with intent. */
.ovc-hero-strip .ovx-ihdr{width:100%;background:none;box-shadow:none;border:0;margin:0;padding:0;display:block}
.ovc-hero-strip .ihdr-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 10px;width:100%}
.ovc-hero-strip .ihdr-field{padding:5px 10px}
.ovc-hero-strip .ihdr-curve{min-width:0;width:100%;padding:8px 10px 2px;margin-top:6px;border-top:.5px solid color-mix(in srgb,var(--text-primary) 6%,transparent)}
.ovc-hero-strip .ihc-svg{flex:1}
/* the standalone Progress % grid cell duplicates the richer curve readout below → drop it in the hero */
.ovc-hero-strip .ihdr-field.ihdr-pct{display:none}
@media (max-width:960px){.ovc-hero{grid-template-columns:1fr}.ovc-hero-strip{border-left:0;border-top:.5px solid color-mix(in srgb,var(--text-primary) 7%,transparent)}}
/* 🦜 — 8 labeled fields now (Owner/GC/PM/Super joined): 2-up on phones so long labels
   (GENERAL CONTRACTOR, TARGET COMPLETION) don't ellipsize into noise. */
@media (max-width:640px){.ovc-hero-strip .ihdr-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the command bar sits transparent INSIDE the hero panel (the panel owns the material now) */
.ovcb{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:22px;padding:16px 4px 16px 22px;background:none;border:0;box-shadow:none;overflow:visible}
/* the ring — a beveled, glowing instrument that sweeps to its value on load */
.ovcb-ring{flex:0 0 auto;width:86px;height:86px;border-radius:50%;border:0;cursor:pointer;padding:0;position:relative;display:grid;place-items:center;
  background:conic-gradient(var(--ovcb-tone) var(--ovcb-sweep,0deg),color-mix(in srgb,var(--text-primary) 8%,transparent) 0);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ovcb-tone) 22%,transparent),0 6px 18px -6px color-mix(in srgb,var(--ovcb-tone) 45%,transparent),var(--bevel-top);
  transition:transform var(--motion-base) var(--ease-spring),box-shadow var(--motion-base) var(--ease-out),--ovcb-sweep 1s var(--ease-out)}
@property --ovcb-sweep{syntax:'<angle>';inherits:false;initial-value:0deg}
.ovcb-ring:hover{transform:scale(1.05);box-shadow:0 0 0 1px color-mix(in srgb,var(--ovcb-tone) 34%,transparent),0 10px 26px -6px color-mix(in srgb,var(--ovcb-tone) 60%,transparent),var(--bevel-top)}
.ovcb-ring:active{transform:scale(.97)}
.ovcb-ring-inner{width:66px;height:66px;border-radius:50%;background:var(--surface-grad,var(--card-bg));display:grid;place-items:center;
  box-shadow:var(--bevel-top),inset 0 -2px 6px -2px color-mix(in srgb,var(--text-primary) 14%,transparent),inset 0 0 0 .5px color-mix(in srgb,var(--text-primary) 7%,transparent)}
.ovcb-ring-score{font-size:27px;font-weight:800;line-height:1;color:var(--text-primary);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ovcb-ring-cap{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-top:1px}
.ovcb-read{min-width:0;display:flex;flex-direction:column;gap:14px}
.ovcb-state{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ovcb-state-badge{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:5px 12px;border-radius:999px;color:var(--st);
  background:linear-gradient(180deg,color-mix(in srgb,var(--st) 18%,transparent),color-mix(in srgb,var(--st) 10%,transparent));box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 30%,transparent),0 1px 3px -1px color-mix(in srgb,var(--st) 40%,transparent)}
.ovcb-state-sentence{font-size:17px;font-weight:600;color:var(--text-primary);min-width:0;letter-spacing:-.01em}
.ovcb-cluster{display:flex;gap:10px;flex-wrap:wrap}
.ovcb-vital{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:2px;align-items:flex-start;padding:9px 16px 8px;border-radius:14px;border:.5px solid color-mix(in srgb,var(--text-primary) 7%,transparent);
  background:var(--surface-grad,var(--card-bg));box-shadow:var(--bevel-top),var(--shadow-e1);cursor:pointer;
  transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-base) var(--ease-out)}
.ovcb-vital:hover{transform:translateY(-2px);box-shadow:var(--bevel-top),var(--shadow-e3),var(--glow-accent-soft)}
.ovcb-vital:active{transform:translateY(0) scale(.98);box-shadow:var(--bevel-top),var(--shadow-e1)}
.ovcb-vital-val{font-size:20px;font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ovcb-vital-lbl{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)}
@media (prefers-reduced-motion:reduce){.ovcb-ring{transition:transform var(--motion-fast)}.ovcb-ring[style]{--ovcb-sweep:var(--ovcb-deg)!important}}
@media (max-width:720px){.ovcb{grid-template-columns:1fr;justify-items:center;text-align:center}.ovcb-cluster{justify-content:center}}
/* ══ MONEY ACT — composed money command with real micro-viz (ceiling) ══════════════════ */
.ovm{padding:0!important;background:none!important;box-shadow:none!important;border:0!important}
/* V-ov2 2026-07-01 — Money = a compact 2×2 tile block (was a 4-across row that ate the width). */
.ovm-grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:10px}
@media (max-width:560px){.ovm-grid{grid-template-columns:1fr}}
.ovm-tile{display:flex;flex-direction:column;gap:7px;padding:15px 17px;border-radius:16px;cursor:pointer;
  background:linear-gradient(150deg,color-mix(in srgb,var(--app-bg) 3%,var(--card-bg)),var(--card-bg) 60%);
  box-shadow:var(--bevel-top),var(--shadow-e2);border:.5px solid color-mix(in srgb,var(--text-primary) 6%,transparent);
  transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-base) var(--ease-out)}
.ovm-tile:hover{transform:translateY(-2px);box-shadow:var(--bevel-top),var(--shadow-e3),var(--glow-accent-soft)}
.ovm-tile:active{transform:translateY(0) scale(.99)}
.ovm-k{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)}
.ovm-v{font-size:22px;font-weight:800;line-height:1;color:var(--text-primary);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ovm-v-hero{font-size:28px;color:color-mix(in srgb,var(--color-success) 60%,var(--text-primary))}
.ovm-s{font-size:11.5px;color:var(--text-secondary);font-weight:500}
.ovm-bar{height:7px;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 8%,transparent);overflow:hidden;box-shadow:inset 0 1px 2px color-mix(in srgb,var(--text-primary) 10%,transparent)}
.ovm-bar i{display:block;height:100%;border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35);transition:width var(--motion-slow,.5s) var(--ease-out)}
.ovm-bar-stack{display:flex}
.ovm-seg-base{background:var(--app-accent)}
.ovm-seg-co{background:color-mix(in srgb,var(--color-success) 70%,var(--app-accent))}
/* margin gauge — a radial instrument */
.ovm-gauge-tile{flex-direction:row;align-items:center;gap:14px}
.ovm-gauge{flex:0 0 auto;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--mgt) var(--mg,0deg),color-mix(in srgb,var(--text-primary) 8%,transparent) 0);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--mgt) 20%,transparent),var(--bevel-top)}
.ovm-gauge-in{width:46px;height:46px;border-radius:50%;background:var(--card-bg);display:grid;place-items:center;box-shadow:inset 0 -2px 5px -2px color-mix(in srgb,var(--text-primary) 12%,transparent),inset 0 0 0 .5px color-mix(in srgb,var(--text-primary) 7%,transparent)}
.ovm-gauge-v{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ovm-gauge-l{min-width:0}
@media (prefers-reduced-motion:reduce){.ovm-bar i{transition:none}}
/* Money empty state — a designed invitation */
.ovm-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:30px 20px}
.ovm-empty-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--app-accent) 10%,var(--card-bg));box-shadow:var(--bevel-top),var(--shadow-e1);margin-bottom:2px}
.ovm-empty-ic svg{width:22px;height:22px;stroke:var(--app-accent);fill:none}
.ovm-empty-t{font-size:16px;font-weight:800;color:var(--text-primary)}
.ovm-empty-s{font-size:13px;color:var(--text-secondary);max-width:400px}
.ovm-empty-cta{display:flex;gap:8px;margin-top:6px}
/* health breakdown overlay */
.hb-overlay{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;background:var(--overlay-bg,rgba(0,0,0,.4));opacity:0;transition:opacity var(--motion-base) var(--ease-out);padding:20px}
.hb-overlay.is-open{opacity:1}
.hb-card{width:min(440px,94vw);background:var(--card-bg);border-radius:18px;box-shadow:var(--shadow-e3);border:.5px solid color-mix(in srgb,var(--text-primary) 8%,transparent);transform:translateY(8px) scale(.98);transition:transform var(--motion-base) var(--ease-spring);overflow:hidden}
.hb-overlay.is-open .hb-card{transform:none}
.hb-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 10px}
.hb-head h3{margin:0;font-size:16px;font-weight:800}
.hb-x{width:28px;height:28px;border:0;border-radius:50%;background:var(--chrome-bg);cursor:pointer;display:grid;place-items:center;color:var(--text-muted)}
.hb-x:hover{background:var(--chrome-bg-hover);color:var(--text-primary)}
.hb-body{padding:4px 18px 12px;display:flex;flex-direction:column;gap:8px}
.hb-row{display:grid;grid-template-columns:1fr 84px 40px 10px;align-items:center;gap:10px;padding:7px 8px;border-radius:10px}
.hb-row.hb-drill{cursor:pointer}
.hb-row.hb-drill:hover{background:color-mix(in srgb,var(--app-accent) 7%,transparent)}
.hb-row-lbl{font-size:13px;font-weight:700;color:var(--text-primary)}
/* 📒 V161 — factor detail line + weight chip + door chevron + the live "Right now" section */
.hb-row-main{display:flex;flex-direction:column;gap:1px;min-width:0}
.hb-row-w{font-size:10px;font-weight:700;color:var(--text-muted);margin-left:5px}
.hb-row-detail{font-size:11px;font-weight:600;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-row-go{font-size:14px;font-weight:800;color:var(--text-muted);opacity:.55;text-align:right}
.hb-row.hb-drill:hover .hb-row-go,.hb-now-row:hover .hb-row-go{opacity:1;color:var(--app-accent)}
.hb-now-h{margin-top:8px;padding-top:10px;border-top:.5px solid color-mix(in srgb,var(--text-primary) 7%,transparent);font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary)}
.hb-now-row{display:grid;grid-template-columns:104px 1fr 10px;align-items:center;gap:10px;padding:6px 8px;border-radius:10px;cursor:pointer}
.hb-now-row:hover{background:color-mix(in srgb,var(--app-accent) 7%,transparent)}
.hb-now-lbl{font-size:12px;font-weight:700;color:var(--text-primary)}
.hb-now-val{font-size:12px;font-weight:700}
.hb-diverge{margin-top:6px;padding:9px 12px;border-radius:10px;font-size:11.5px;font-weight:600;line-height:1.45;color:var(--text-secondary);background:color-mix(in srgb,var(--color-info,#3b82f6) 8%,transparent);border:.5px solid color-mix(in srgb,var(--color-info,#3b82f6) 18%,transparent)}
/* needs-you focus flash (the header vital's landing highlight) */
.nv-flash{animation:nvFlash 1.7s var(--ease-out) 1}
@keyframes nvFlash{0%,60%{box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 55%,transparent),var(--shadow-e2)}100%{box-shadow:var(--shadow-e2)}}
.hb-row-bar{height:6px;border-radius:999px;background:color-mix(in srgb,var(--text-primary) 8%,transparent);overflow:hidden}
.hb-row-bar i{display:block;height:100%;border-radius:999px;transition:width var(--motion-slow,.4s) var(--ease-out)}
.hb-row-val{font-size:12.5px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.hb-empty{padding:16px;text-align:center;color:var(--text-muted);font-size:13px}
.hb-foot{padding:10px 18px 16px;font-size:11.5px;color:var(--text-muted);border-top:.5px solid color-mix(in srgb,var(--text-primary) 6%,transparent)}
/* vitals IS a real lifted section card like the others; its chips flatten so they don't double-box */
.ovx-zone.is-holder{background:var(--surface-grad,var(--card-bg,#fff))}
.ovx-zone-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ovx-zone-head h3{margin:0;font-size:14px;font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:9px}
.ovx-zone-head h3 svg{width:17px;height:17px;opacity:.85}
.ovx-zone-head .zh-action{margin-left:auto;font-size:12px;font-weight:700;color:var(--app-accent);cursor:pointer}
/* vitals chips POP with real elevation inside their (flattened) holder zone */
/* [2026-06-09 depth match] The cockpit chips were near-invisible on the Vitals zone: same-tone fill as the
   card below + a downgraded e1 shadow (vs the standalone .ctile / Contacts cards which rest at e2 and pop
   to e3). Give them a BRIGHT WHITE fill (so they read lighter than the tinted zone) + the full e2 resting /
   e3 hover depth, matching Contacts' cards. */
.ovx-panel .cockpit .ctile{background:var(--card-bg,#fff);border:.5px solid rgba(0,0,0,.06);box-shadow:var(--bevel-top),var(--shadow-e2);transition:transform var(--motion-fast,.15s) var(--ease-spring,ease),box-shadow var(--motion-fast,.15s)}
.ovx-panel .cockpit .ctile:hover{transform:translateY(-3px);box-shadow:var(--bevel-top),var(--shadow-e3)}
/* roster pill — who's on the job (raised), replaces the flat presence line */
.ovx-roster{display:inline-flex;align-items:center;gap:9px;height:34px;padding:3px 12px 3px 4px;border-radius:999px;background:var(--card-bg,#fff);border:.5px solid rgba(0,0,0,.06);box-shadow:var(--shadow-e1);cursor:pointer;transition:transform var(--motion-fast,.15s) var(--ease-spring,ease),box-shadow var(--motion-fast,.15s)}
.ovx-roster:hover{transform:translateY(-1px);box-shadow:var(--shadow-e2)}
.ovx-roster .ovx-roster-lbl{font-size:12px;font-weight:700;color:var(--text-primary)}
/* V152 — Overview lens picker (per-project zone arrangement). Pill trigger + popover menu,
   matching the roster pill language (rounded, e1→e2 hover, no edge-strips). */
.ovx-zone-head-tools{margin-left:auto;display:inline-flex;align-items:center;gap:9px}
@media (prefers-reduced-motion: reduce){.ovx-lens-trigger,.ovx-lens-trigger .ovx-lens-caret{transition:none}.ovx-lens-trigger:hover{transform:none}}
/* V152 — inline-header click-to-edit strip (Linear/Notion): a row of in-place editable fields +
   a live progress curve, atop the full-page Overview. Floating panel on the matte (V133), even
   padding, no colored edge-strips. */
.ovx-ihdr{display:flex;align-items:stretch;gap:18px;flex-wrap:wrap;padding:16px 18px;margin-bottom:14px;border-radius:18px;background:var(--card-bg,#fff);border:.5px solid rgba(0,0,0,.06);box-shadow:var(--bevel-top),var(--shadow-e2)}
.ihdr-fields{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;flex:1;min-width:0}
.ihdr-field{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:8px 12px;border-radius:12px;border:.5px solid transparent;background:transparent;min-width:0;transition:background var(--motion-fast,.15s),border-color var(--motion-fast,.15s)}
button.ihdr-field{cursor:pointer;text-align:left;font:inherit}
/* 🦜 — the counterparty (Owner/GC-above) field is a door to Details */
.ihdr-door{cursor:pointer}
.ihdr-door:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 26%,transparent)}
.ihdr-field:hover{background:var(--hover-bg,rgba(0,0,0,.035));border-color:rgba(0,0,0,.05)}
.ihdr-k{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
.ihdr-v{font-size:14px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ihdr-vinput{font-size:14px;font-weight:700;color:var(--text-primary);border:0;background:transparent;padding:0;width:11ch;max-width:100%;font-family:inherit}
.ihdr-vinput:focus{outline:none}
.ihdr-vinput::placeholder{color:var(--text-muted);font-weight:600}
.ihdr-person{display:inline-flex;align-items:center;gap:6px}
.ihdr-av{width:22px;height:22px;font-size:9px;flex:0 0 auto}
.ihdr-av:empty{display:none}
.ihdr-pinput{font-size:13px;font-weight:600;color:var(--text-primary);border:0;background:transparent;padding:0;width:9ch;font-family:inherit}
.ihdr-pinput:focus{outline:none}
.ihdr-pinput::placeholder{color:var(--text-muted);font-weight:500}
.ihdr-pct .ihdr-bar{height:4px;border-radius:999px;background:var(--surface-2,rgba(0,0,0,.07));overflow:hidden;margin-top:2px}
.ihdr-pct .ihdr-bar > span{display:block;height:100%;border-radius:999px;background:var(--app-accent);transition:width var(--motion-base,.3s) var(--ease-out,ease)}
.ihdr-phase[aria-expanded="true"]{background:var(--hover-bg,rgba(0,0,0,.05))}
.ihdr-phase{position:relative}
.ihdr-phase-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:45;min-width:184px;max-height:300px;overflow:auto;padding:6px;border-radius:14px;background:var(--card-bg,#fff);border:.5px solid rgba(0,0,0,.07);box-shadow:var(--shadow-e3);display:flex;flex-direction:column;gap:2px}
.ihdr-phase-opt{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;border-radius:9px;background:transparent;cursor:pointer;font-size:13px;font-weight:600;color:var(--text-primary);text-align:left;transition:background var(--motion-fast,.15s)}
.ihdr-phase-opt:hover{background:var(--hover-bg,rgba(0,0,0,.045))}
.ihdr-phase-opt.is-on{font-weight:800;color:var(--app-accent)}
.ihdr-phase-dot{width:9px;height:9px;border-radius:999px;flex:0 0 auto}
.ihdr-curve{display:flex;align-items:center;gap:9px;padding:8px 4px;min-width:150px}
.ihc-svg{width:132px;height:36px;flex:0 0 auto}
.ihc-line{fill:none;stroke:var(--app-accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ihc-area{fill:var(--app-accent);opacity:.10}
.ihc-cap{font-size:13px;font-weight:800;color:var(--app-accent)}
.ihc-empty{display:flex;flex-direction:column;gap:2px;font-size:12.5px;font-weight:700;color:var(--text-secondary,var(--text-muted))}
.ihc-empty-sub{font-size:10.5px;font-weight:500;color:var(--text-muted)}
@media (max-width:760px){.ovx-ihdr{gap:10px}.ihdr-curve{order:-1;width:100%}.ihc-svg{width:100%}}
@media (prefers-reduced-motion: reduce){.ihdr-pct .ihdr-bar > span{transition:none}}
/* V152 — "Since you were here" delta panel (Gmail/Superhuman new-divider). Topmost Overview
   element; an accent-tinted floating strip when there's a delta, quiet when caught-up. */
.ovx-since{padding:13px 18px;margin-bottom:14px;border-radius:16px;background:var(--card-bg,#fff);border:.5px solid rgba(0,0,0,.06);box-shadow:var(--shadow-e1)}
.ovx-since:not(.ovx-since-empty):not(.ovx-since-first){background:color-mix(in srgb, var(--app-accent) 5%, var(--card-bg,#fff));border-color:color-mix(in srgb, var(--app-accent) 16%, transparent)}
.since-head{display:flex;align-items:center;gap:10px}
.since-dot{width:9px;height:9px;border-radius:999px;background:var(--text-muted);flex:0 0 auto}
.since-dot.is-new{background:var(--app-accent);box-shadow:0 0 0 4px color-mix(in srgb, var(--app-accent) 18%, transparent)}
.since-dot.is-clear{background:var(--color-success,#137a4b)}
.since-title{font-size:13.5px;font-weight:800;letter-spacing:-.01em;color:var(--text-primary)}
.since-title-quiet{font-weight:600;color:var(--text-muted)}
.since-when{font-size:11.5px;font-weight:600;color:var(--text-muted)}
.since-sub{font-size:12px;color:var(--text-muted);margin-top:4px;margin-left:19px}
.since-ai{margin-left:auto;display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border-radius:999px;border:.5px solid color-mix(in srgb, var(--app-accent) 30%, transparent);background:transparent;color:var(--app-accent);font-size:12px;font-weight:700;cursor:pointer;transition:background var(--motion-fast,.15s),transform var(--motion-fast,.15s)}
.since-ai:hover{background:color-mix(in srgb, var(--app-accent) 12%, transparent);transform:translateY(-1px)}
.since-ai svg{width:14px;height:14px}
.since-ai.is-loading{opacity:.6;pointer-events:none}
.since-head .since-ai + .since-dismiss{margin-left:0}
.since-dismiss{margin-left:8px;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;border:0;background:transparent;color:var(--text-muted);cursor:pointer;transition:background var(--motion-fast,.15s),color var(--motion-fast,.15s)}
.since-dismiss:hover{background:var(--hover-bg,rgba(0,0,0,.05));color:var(--text-primary)}
.since-dismiss svg{width:15px;height:15px}
.since-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px;margin-left:19px}
.since-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;background:var(--card-bg,#fff);border:.5px solid rgba(0,0,0,.08);box-shadow:var(--shadow-e1);font-size:12.5px;font-weight:700;color:var(--text-primary);cursor:pointer;transition:transform var(--motion-fast,.15s),box-shadow var(--motion-fast,.15s)}
.since-chip:hover{transform:translateY(-1px);box-shadow:var(--shadow-e2)}
.since-chip svg{width:14px;height:14px;opacity:.7}
.since-chip.is-other{cursor:default;color:var(--text-muted);box-shadow:none;background:transparent}
.since-chip.is-other:hover{transform:none;box-shadow:none}
.since-ai-out{margin-top:11px;margin-left:19px}
.since-ai-out[hidden]{display:none}
.since-ai-load{font-size:12.5px;color:var(--text-muted)}
.since-ai-text{font-size:13px;line-height:1.55;color:var(--text-primary);background:var(--card-bg,#fff);border:.5px solid rgba(0,0,0,.07);border-radius:12px;padding:11px 13px}
.since-ai-text.since-ai-none{color:var(--text-muted)}
@media (max-width:760px){.since-ai{margin-left:0}.since-head{flex-wrap:wrap}}
@media (prefers-reduced-motion: reduce){.since-ai:hover,.since-chip:hover{transform:none}}
/* V152 — Overview jobsite weather tile (current conditions). Lives inside its .ovx-zone holder. */
.ov-wx{display:flex;flex-direction:column;gap:6px}
.ov-wx-now{display:flex;align-items:center;gap:12px}
.ov-wx-emoji{font-size:30px;line-height:1;display:inline-flex}
.ov-wx-emoji .wx-svg{width:30px;height:30px;stroke:currentColor;fill:none;color:var(--app-accent)}
.ov-wx-temp{font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--text-primary)}
.ov-wx-cond{font-size:14px;font-weight:600;color:var(--text-secondary,var(--text-muted))}
.ov-wx-foot{font-size:11.5px;font-weight:500;color:var(--text-muted)}
.ov-wx-empty{font-size:13px;color:var(--text-muted)}
/* Nested helper wrappers (.surf/.ov-card/.qcard) render FLAT inside a zone — the .ovx-zone is the
   only card; no card-in-a-card. The .nextband (red focal hero) keeps its own treatment. */
.ovx-zone > .surf,.ovx-zone > .ov-card{background:transparent;box-shadow:none;border:0;padding:0;margin:0}
/* V154 — one-raised-surface rule (extends the no-card-in-a-card intent above to the
   specific offenders): the .ovx-zone is the ONLY raised layer. Re-raised inner cards
   (sa-card/fhealth/pfv-pulse) strip their own surface; list rows tint-on-hover only
   (rounded, never hard-cornered); since-chips become flat tinted pills; media tiles
   keep an inset hairline, not a box-shadow. The closeout .cog is already flat — the template. */
.ovx-zone .sa-card,.ovx-zone .mov-widget.sa-card,.ovx-zone .fhealth,.ovx-zone .pfv-pulse{
  background:transparent;box-shadow:none;border:0;padding:0;border-radius:0}
.ovx-zone .sa-row{background:transparent;box-shadow:none;border:0;border-radius:10px;transition:background .12s ease,opacity var(--motion-base) var(--ease-out),transform var(--motion-base) var(--ease-spring)}
.ovx-zone .sa-row:hover{background:color-mix(in srgb,var(--app-accent) 7%,transparent)}
.ovx-zone .since-chip{box-shadow:none;border:0;background:color-mix(in srgb,var(--app-accent) 8%,transparent)}
.ovx-zone .since-chip:hover{transform:none;box-shadow:none}
.ovx-zone .mps-tile{box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08)}
.ovx-zone .surf-head{padding:0;margin-bottom:14px}
/* Pillar B — Overview "Decisions of record" zone rows. */
#movDecisions{display:flex;flex-direction:column;gap:8px}
.mov-dec-row{display:flex;align-items:flex-start;gap:11px;padding:9px 4px;border-radius:10px;cursor:pointer;transition:background var(--motion-fast,.15s)}
.mov-dec-row:hover{background:var(--hover-overlay,rgba(0,0,0,.03))}
.mov-dec-row.is-sup{opacity:.6}
.mov-dec-ico{width:17px;height:17px;flex:0 0 auto;margin-top:1px;color:var(--co-pending-fg,#9a6212)}
.mov-dec-grow{flex:1;min-width:0}
.mov-dec-title{font-size:13.5px;font-weight:700;color:var(--text-primary);line-height:1.3}
.mov-dec-row.is-sup .mov-dec-title{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--text-muted) 55%,transparent)}
.mov-dec-meta{display:flex;align-items:center;gap:7px;margin-top:3px}
.mov-dec-origin{font-size:10px;font-weight:700;border-radius:5px;padding:1px 6px}
.mov-dec-chat{color:var(--color-info,#2563c9);background:var(--color-info-bg,#e8f0fd)}
.mov-dec-manual{color:var(--text-secondary);background:var(--surface-2)}
.mov-dec-sup{font-size:10px;font-weight:700;color:var(--text-muted);background:var(--surface-2);border-radius:5px;padding:1px 6px;text-transform:uppercase;letter-spacing:.03em}
.mov-dec-when{font-size:11px;color:var(--text-muted);margin-left:auto;font-variant-numeric:tabular-nums}
.ovx-panel .quad .qcard{background:transparent;box-shadow:none;border:0;border-radius:0;padding:0 16px;border-right:.5px solid color-mix(in srgb,var(--app-accent) 4%,rgba(0,0,0,.06))}
.ovx-panel .quad .qcard:last-child{border-right:0}
.ovx-panel .quad{gap:0}
@media (max-width:1100px){.ovx-panel .quad .qcard{border-right:0}}
/* ── pass-3 proto-exact structures (needs-you rows, status panel, court chain, finband) ── */
.ovx-panel .needs-count{margin-left:auto;font-size:12px;font-weight:800;color:var(--color-error,#c0392b)}
.ovx-panel .ny-row{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:.5px solid color-mix(in srgb,var(--app-accent) 3%,rgba(0,0,0,.05));cursor:pointer;border-radius:10px;transition:background var(--motion-fast,.15s)}
.ovx-panel .ny-row:hover{background:var(--hover-overlay,rgba(0,0,0,.03))}
.ovx-panel .ny-row:last-child{border-bottom:0}
.ovx-panel .ny-sev{width:9px;height:9px;border-radius:999px;flex:0 0 auto}
.ovx-panel .ny-sev.err{background:var(--color-error,#ef4444)} .ovx-panel .ny-sev.warn{background:var(--color-warning,#f59e0b)} .ovx-panel .ny-sev.ok{background:var(--color-success,#10b981)}
.ovx-panel .ny-grow{flex:1;min-width:0}
.ovx-panel .ny-label{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
.ovx-panel .ny-text{font-size:13.5px;font-weight:700}
.ovx-panel .ny-when{font-size:11.5px;font-weight:700;color:var(--color-error,#c0392b)}
.ovx-panel .ny-handoff{font-size:12px;font-weight:800;color:var(--app-accent)}
/* V152 Wave C — triage mode: toggle button + focused-row highlight + verb hint. Rounded focus ring
   (no hard-cornered square pop per the rounded-hovers rule). */
.ovx-panel .ny-triage-btn{margin-left:auto;height:28px;padding:0 12px;border-radius:999px;border:.5px solid color-mix(in srgb,var(--app-accent) 28%,transparent);background:transparent;color:var(--app-accent);font-size:12px;font-weight:700;cursor:pointer;transition:background var(--motion-fast,.15s),transform var(--motion-fast,.15s)}
.ovx-panel .ny-triage-btn:hover{background:color-mix(in srgb,var(--app-accent) 12%,transparent);transform:translateY(-1px)}
.ovx-panel .ny-triage-btn.is-on{background:var(--app-accent);color:var(--on-accent,#fff);border-color:transparent}
.ovx-panel .ny-zone-head .needs-count,.ovx-panel .ny-triage-btn + .needs-count{margin-left:10px}
.ovx-panel .ny-row.triage-focus{background:color-mix(in srgb,var(--app-accent) 10%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--app-accent) 45%,transparent)}
.ovx-panel .ny-triage-hint{font-size:11px;font-weight:800;color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 12%,transparent);padding:2px 8px;border-radius:999px;white-space:nowrap}
@media (prefers-reduced-motion: reduce){.ovx-panel .ny-triage-btn:hover{transform:none}}
.ovx-panel .spec-tag{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:2px 7px;border-radius:999px;background:color-mix(in srgb,var(--type-selection-fg,#5b21b6) 12%,transparent);color:var(--type-selection-fg,#5b21b6)}
/* status panel — hairline-divided cells (replaces .quad here), real-ratio bars */
.ovx-panel .statpanel{display:grid;grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.ovx-panel .statpanel{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.ovx-panel .statpanel{grid-template-columns:1fr}}
.ovx-panel .statcell{padding:2px 18px;border-right:.5px solid color-mix(in srgb,var(--app-accent) 4%,rgba(0,0,0,.06))}
.ovx-panel .statcell:first-child{padding-left:2px} .ovx-panel .statcell:last-child{border-right:0;padding-right:2px}
@media (max-width:1100px){.ovx-panel .statcell:nth-child(2){border-right:0}}
.ovx-panel .statcell .q-h{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:9px}
.ovx-panel .statcell .q-h svg{width:15px;height:15px}
.ovx-panel .statcell .q-v{font-size:22px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ovx-panel .statcell .q-s{font-size:11.5px;color:var(--text-secondary);font-weight:600;margin-top:2px}
.ovx-panel .statcell .qbar{height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-top:9px}
.ovx-panel .statcell .qbar i{display:block;height:100%;border-radius:999px}
/* W1.4 — schedule-variance bar: actual fill (i) + a planned-position tick. overflow:visible so the
   tick shows; the tick is a thin vertical marker at the planned %% (where a linear schedule expects
   us). Real-data: both fill width and tick position come from stage status+order. */
.ovx-panel .statcell .qbar.sched-var{overflow:visible;position:relative}
.ovx-panel .statcell .qbar.sched-var .sched-plan{position:absolute;top:-2px;bottom:-2px;width:2px;border-radius:2px;background:var(--text-muted,rgba(120,120,128,.7));transform:translateX(-1px)}
/* status zone now holds 2 cards (schedule variance + compliance) after the dup cuts */
.ovx-panel .statpanel.statpanel-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:560px){.ovx-panel .statpanel.statpanel-2{grid-template-columns:1fr}}
/* finband cells: contained tint hover (no lift) inside the clipped band */
.ovx-panel .finband .fin-cell:hover{background:var(--hover-overlay,rgba(0,0,0,.025))}
/* presence + greeting row */
.ovx-greet{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:-4px}
.ovx-greet .ovx-greet-l{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto}
.ovx-greet .ovx-greet-act{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:0 0 auto}
/* greet buttons = prototype pill shape (keep our icons; match the .btn pill design) */
.ovx-greet-act .btn{flex:0 0 auto;gap:6px;height:34px;padding:0 16px;border-radius:999px;font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;border:.5px solid var(--chrome-border,rgba(0,0,0,.1));background:var(--surface,#fff);color:var(--text-primary);box-shadow:var(--shadow-e1,0 1px 2px rgba(0,0,0,.06));transition:transform var(--motion-fast,.12s) var(--ease-spring,ease),background var(--motion-fast,.12s)}
.ovx-greet-act .btn:hover{background:var(--hover-overlay,rgba(0,0,0,.03))}
.ovx-greet-act .btn:active{transform:scale(.97)}
.ovx-greet-act .btn svg{width:14px;height:14px;flex:0 0 auto}
.ovx-greet-act .btn.btn-primary{border:0;color:#fff;background:linear-gradient(165deg,color-mix(in srgb,var(--app-accent) 92%,#fff),var(--app-accent));box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 8px 18px -8px var(--app-accent)}
.ovx-greet-act .btn.btn-primary:hover{background:linear-gradient(165deg,color-mix(in srgb,var(--app-accent) 96%,#fff),var(--app-accent))}
@media (max-width:640px){.ovx-greet{gap:10px}.ovx-greet .ovx-greet-l{flex:1 1 100%}.ovx-greet .ovx-greet-act{flex:1 1 100%}.ovx-greet-act .btn{flex:1 1 auto;justify-content:center}}
/* guided next-action hero (the single focal moment; error/warn/accent toned) */
.nextband{position:relative;border-radius:20px;padding:18px 22px;color:#fff;overflow:hidden;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:linear-gradient(135deg,color-mix(in srgb,var(--nb-tone,var(--color-error,#ef4444)) 80%,#000) 0%,color-mix(in srgb,var(--nb-tone,var(--color-error,#ef4444)) 90%,#000) 55%,var(--nb-tone,var(--color-error,#ef4444)) 100%);
  box-shadow:var(--bevel-top,inset 0 1px 0 rgba(255,255,255,.18)),var(--shadow-e3,0 18px 50px -18px rgba(20,30,48,.45))}
.nextband::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.18),transparent 55%)}
.nextband .nb-ico{position:relative;z-index:1;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:23px;background:rgba(255,255,255,.18);border:.5px solid rgba(255,255,255,.28);flex:0 0 auto}
.nextband .nb-ico svg{width:24px;height:24px;color:#fff}
.nextband .nb-body{position:relative;z-index:1;flex:1;min-width:200px}
.nextband .nb-kick{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;opacity:.88}
.nextband .nb-title{font-size:17px;font-weight:800;letter-spacing:-.01em;margin:2px 0;line-height:1.25}
.nextband .nb-meta{font-size:12.5px;opacity:.92;font-weight:600;line-height:1.4}
.nextband .nb-cta{position:relative;z-index:1}
.nextband .nb-cta .btnw{height:38px;padding:0 20px;border-radius:999px;border:0;cursor:pointer;font-size:13.5px;font-weight:800;background:#fff;color:var(--nb-tone,var(--color-error,#c0392b));box-shadow:0 6px 16px -6px rgba(0,0,0,.4);transition:transform var(--motion-fast,.15s) var(--ease-spring,ease)}
.nextband .nb-cta .btnw:active{transform:scale(.96)}
.nextband.ok-clear{background:linear-gradient(135deg,color-mix(in srgb,var(--color-success,#10b981) 76%,#000),var(--color-success,#10b981))}
/* vitals cockpit — 6 metric-door tiles (semantic fill, specular bevel, hover lift) */
.cockpit{display:grid;gap:12px;grid-template-columns:repeat(6,1fr)}
@media (max-width:1366px){.cockpit{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.cockpit{grid-template-columns:repeat(2,1fr)}}
.ctile{position:relative;border-radius:16px;padding:14px 14px 13px;overflow:hidden;cursor:pointer;
  background:var(--surface-grad,linear-gradient(160deg,#fff,#f7f8fb));
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,var(--shadow-e1,0 4px 14px -6px rgba(20,30,48,.18));border:.5px solid rgba(0,0,0,.05);
  transition:transform var(--motion-fast,.15s) var(--ease-spring,ease),box-shadow var(--motion-fast,.15s)}
.ctile:hover{transform:translateY(-3px);box-shadow:var(--shadow-e3,0 18px 44px -16px rgba(20,30,48,.4))}
.ctile:active{transform:translateY(-1px)}
.ctile .ct-l{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted)}
.ctile .ct-v{font-size:28px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin:3px 0 1px;line-height:1;color:var(--ct-tone,var(--text-primary))}
.ctile .ct-s{font-size:11px;color:var(--text-secondary);font-weight:600}
.ctile .ct-ico{position:absolute;top:11px;right:11px;width:15px;height:15px;opacity:.5;color:var(--ct-tone,var(--text-muted))}
.ctile .ct-ico svg{width:15px;height:15px}
/* semantic fills derived from the tile tone (no edge strip — full tinted gradient) */
.ctile.ct-fill{background:linear-gradient(160deg,color-mix(in srgb,var(--ct-tone) 15%,#fff),color-mix(in srgb,var(--ct-tone) 4%,#fff))}
/* financial rollup band (one beveled fin-band of cells split by hairline) */
/* W1.3 — base finband is 4 billing cells (modal quick-view + the projected segment's base).
   The full-page Financials "Projected" segment splices a 5th "Projected margin" cell into the
   SAME grid, so .fin-proj .finband widens to 5 columns there. Base stays 4 so the compact modal
   (which uses the raw 4-cell finband) has no empty trailing column. */
.finband{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--chrome-border,rgba(0,0,0,.07));border-radius:14px;overflow:hidden}
.fin-proj .finband{grid-template-columns:repeat(5,1fr)}
@media (max-width:900px){.finband,.fin-proj .finband{grid-template-columns:repeat(2,1fr)}}
/* W1.3 — Financials zone projected|actual segmented toggle (rounded pill, fill-based on-state,
   no edge-strip). Lives in the zone head; flips .fin-proj / .fin-act. */
.fin-seg{display:inline-flex;gap:2px;background:color-mix(in srgb,var(--app-accent) 8%,transparent);border-radius:999px;padding:2px}
.fin-seg-btn{border:0;background:transparent;border-radius:999px;padding:4px 13px;font:inherit;font-size:12px;font-weight:700;color:var(--text-muted);cursor:pointer;transition:background var(--motion-fast,.15s),color var(--motion-fast,.15s)}
.fin-seg-btn.is-on{background:var(--card-bg,#fff);color:var(--app-accent);box-shadow:var(--shadow-e1)}
.fin-act{margin-top:2px}
.fin-cell{background:var(--card-bg,#fff);padding:15px 16px;cursor:pointer;transition:background var(--motion-fast,.15s)}
.fin-cell:hover{background:var(--hover-overlay,rgba(0,0,0,.03))}
/* fin-cell hover stays inside the band's rounded outer corners (cells are square in the
   middle of the band but the band itself is rounded 14px + clipped, so edge cells read
   rounded). No standalone block — the band's overflow:hidden does the rounding. */
.fin-cell .fc-l{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
.fin-cell .fc-v{font-size:20px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:3px}
.fin-cell .fc-v.is-empty{color:var(--text-muted);font-weight:700}
.fin-cell .fc-s{font-size:11px;color:var(--text-secondary);font-weight:600}
/* ball-in-court hand-off chain (faces; current node ringed; no edge strip) */
/* pass-3 ball-in-court chain (scoped to .ovx-panel for consistent sizing + spacing) */
/* pass-3 ball-in-court — proper spacing + consistent pill sizing */
.ovx-panel .bic-block{margin-top:16px;padding-top:16px;border-top:0.5px solid color-mix(in srgb,var(--app-accent) 4%,rgba(0,0,0,.07))}
.ovx-panel .bic-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.ovx-panel .bic-title{font-size:12.5px;font-weight:800;display:flex;align-items:center;gap:7px}
.ovx-panel .bic-title svg{width:15px;height:15px}
/* both header pills share the EXACT same size/shape (was a chip vs spec-tag mismatch) */
.ovx-panel .bic-tag{display:inline-flex;align-items:center;height:20px;padding:0 9px;border-radius:999px;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;background:color-mix(in srgb,var(--color-warning,#f59e0b) 16%,transparent);color:var(--co-pending-fg,#b45309)}
.ovx-panel .bic-tag-spec{background:color-mix(in srgb,var(--type-selection-fg,#5b21b6) 13%,transparent);color:var(--type-selection-fg,#5b21b6)}
/* Workspace P3 — the "Open →" door on the ball-in-court head: a quiet accent text-link that
   lands on the chain's source record (where the full hand-off controls live). */
.ovx-panel .bic-open{margin-left:auto;font-size:11px;font-weight:700;color:var(--app-accent);cursor:pointer;white-space:nowrap;padding:2px 4px;border-radius:6px}
.ovx-panel .bic-open:hover{background:color-mix(in srgb,var(--app-accent) 10%,transparent)}
/* W1.5 — Ball-in-court BATON. Now its own first-class zone; .bic-block sits FLAT on the zone (no
   top border needed — it's the zone's only content). The current holder is the hero (larger avatar,
   urgency ring via --urg fill — green→amber→red, NEVER an edge-strip); done/queued nodes ghost back.
   ONE status chip on the current node. A plain-language summary leads. */
#movBicBody .bic-block{margin-top:0;padding-top:0;border-top:0}
.ovx-panel .bic-summary{font-size:13px;color:var(--text-secondary,var(--text-muted));line-height:1.45;margin-bottom:14px}
.ovx-panel .bic-summary b{color:var(--text-primary);font-weight:700}
.ovx-panel .bic-baton{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;row-gap:14px}
.ovx-panel .bic-node{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:72px;text-align:center}
.ovx-panel .bic-av{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px;transition:box-shadow .15s ease}
.ovx-panel .bic-node.is-cur .bic-av{width:46px;height:46px;font-size:16px;box-shadow:0 0 0 3px var(--card-bg,#fff),0 0 0 6px var(--urg,var(--app-accent))}
.ovx-panel .bic-node.is-done .bic-av{width:30px;height:30px;opacity:.5}
.ovx-panel .bic-node.is-queued .bic-av{width:30px;height:30px;opacity:.32}
.ovx-panel .bic-nm{font-size:11.5px;font-weight:700;color:var(--text-primary);max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ovx-panel .bic-node.is-cur .bic-nm{font-size:12.5px}
.ovx-panel .bic-rl{font-size:10px;color:var(--text-muted)}
.ovx-panel .bic-chip{margin-top:2px;display:inline-flex;align-items:center;height:18px;padding:0 8px;border-radius:999px;font-size:9.5px;font-weight:800;background:color-mix(in srgb,var(--app-accent) 14%,transparent);color:color-mix(in srgb,var(--app-accent) 78%,var(--text-primary))}
.ovx-panel .bic-chip[data-stuck]{background:color-mix(in srgb,var(--color-error) 16%,transparent);color:color-mix(in srgb,var(--color-error) 78%,var(--text-primary))}
.ovx-panel .bic-ar{align-self:center;color:var(--text-muted);font-size:15px;margin-top:6px}
.ovx-panel .bic-links{display:flex;gap:10px;align-items:center;margin-top:14px}
/* W2 — inline baton actions (Hand off / Resolve / Nudge). A clean button row under the baton. */
.ovx-panel .bic-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:16px}
.ovx-panel .bic-acts .btn-sm{font-size:12px;padding:6px 13px}
.ovx-panel .ovx-empty{font-size:13px;color:var(--text-muted);padding:4px 0}
.ovx-panel .court-chain{display:flex;align-items:flex-start;justify-content:flex-start;gap:20px;flex-wrap:wrap;row-gap:16px}
.ovx-panel .cc-node{display:flex;flex-direction:column;align-items:center;gap:7px;width:104px;flex:0 0 auto;text-align:center}
.ovx-panel .cc-av{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px;box-shadow:0 0 0 3px var(--card-bg,#fff),var(--shadow-e1)}
.ovx-panel .cc-node.cur .cc-av{box-shadow:0 0 0 3px var(--card-bg,#fff),0 0 0 6px color-mix(in srgb,var(--color-error,#ef4444) 32%,transparent)}
.ovx-panel .cc-name{font-size:11.5px;font-weight:800;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ovx-panel .cc-role{font-size:10px;color:var(--text-muted);font-weight:600;line-height:1.2}
.ovx-panel .cc-arrow{color:var(--text-muted);font-size:16px;margin-top:14px;flex:0 0 auto;align-self:flex-start}
.ovx-panel .cc-pill{display:inline-flex;align-items:center;height:18px;padding:0 8px;border-radius:999px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;margin-top:2px;background:var(--surface-2);color:var(--text-muted)}
.ovx-panel .cc-pill.is-cur{background:var(--color-error-bg,#fdeaea);color:var(--color-error,#c0392b)}
/* cc-stuck — a real "ball stuck here N days" tint on the in-court node when its
   handed_at exceeds the threshold. Driven by court_chains.handed_at (real data). */
.ovx-panel .cc-node.cc-stuck .cc-av{box-shadow:0 0 0 3px var(--card-bg,#fff),0 0 0 6px color-mix(in srgb,var(--color-error,#ef4444) 55%,transparent)}
.ovx-panel .cc-pill.is-stuck{background:var(--color-error,#c0392b);color:#fff}
/* Ball-in-court chain EDITOR (2026-06-08) — the interactive panel on Change Orders
   (and future surfaces). Self-contained (NOT .ovx-panel-scoped) so it works in the CO
   card. Reuses the same visual language as the read-only Overview chain. */
/* ── Hand-off composer sheet (2026-07-04) — Apple-caliber: frosted overlay, solid card, orb header,
   sectioned body, rounded inputs w/ focus rings. Replaces the old inline-styled prompt. ── */
.cc-ho-overlay{position:fixed;inset:0;z-index:9200;background:rgba(15,18,25,.42);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);display:grid;place-items:center;padding:20px;animation:ccHoFade var(--motion-base,.2s) var(--ease-out,ease)}
@keyframes ccHoFade{from{opacity:0}to{opacity:1}}
.cc-ho-sheet{background:var(--card-bg);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.06);width:min(460px,100%);max-height:calc(100vh - 44px);display:flex;flex-direction:column;overflow:hidden;transform:scale(.97) translateY(6px);animation:ccHoPop .32s cubic-bezier(.32,.72,0,1) forwards}
@keyframes ccHoPop{to{transform:scale(1) translateY(0)}}
.cc-ho-head{display:flex;align-items:center;gap:12px;padding:18px 18px 14px;border-bottom:.5px solid var(--chrome-border)}
.cc-ho-orb{width:38px;height:38px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center}
.cc-ho-orb svg{width:18px;height:18px}
.cc-ho-head-txt{flex:1;min-width:0}
.cc-ho-title{font-size:16px;font-weight:800;letter-spacing:-.02em;color:var(--text-primary)}
.cc-ho-sub{font-size:11.5px;color:var(--text-muted);margin-top:1px;line-height:1.3}
.cc-ho-x{width:28px;height:28px;flex:0 0 auto;border:none;background:var(--surface-2);color:var(--text-muted);border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:background var(--motion-fast) var(--ease-out),transform var(--motion-fast)}
.cc-ho-x svg{width:13px;height:13px}
.cc-ho-x:hover{background:var(--surface)}.cc-ho-x:active{transform:scale(.92)}
.cc-ho-body{padding:6px 18px 4px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.cc-ho-sec{padding:12px 0;border-bottom:.5px solid color-mix(in srgb,var(--chrome-border) 55%,transparent)}
.cc-ho-sec:last-child{border-bottom:none}
.cc-ho-lbl{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:8px}
.cc-ho-opt{font-weight:600;text-transform:none;letter-spacing:0;opacity:.72;margin-left:5px}
.cc-ho-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px}
.cc-ho-chip{padding:6px 12px;font-size:12px;font-weight:650;border-radius:999px;border:.5px solid var(--chrome-border);background:var(--surface);color:var(--text-secondary);cursor:pointer;transition:all var(--motion-fast) var(--ease-out)}
.cc-ho-chip:hover{background:var(--surface-2);border-color:color-mix(in srgb,var(--app-accent) 30%,var(--chrome-border))}
.cc-ho-chip.on{background:color-mix(in srgb,var(--app-accent) 12%,var(--card-bg));border-color:color-mix(in srgb,var(--app-accent) 45%,transparent);color:var(--app-accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--app-accent) 30%,transparent)}
.cc-ho-input{width:100%;padding:9px 12px;border-radius:11px;border:.5px solid color-mix(in srgb,var(--app-accent) 16%,rgba(0,0,0,.14));background:var(--input-bg,var(--card-bg));font:inherit;font-size:13px;color:var(--text-primary);transition:border-color var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out)}
.cc-ho-input::placeholder{color:var(--text-muted)}
.cc-ho-input:focus{outline:none;border-color:color-mix(in srgb,var(--app-accent) 55%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 16%,transparent)}
.cc-ho-input.cc-ho-err{border-color:var(--color-error);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-error) 16%,transparent)}
textarea.cc-ho-input{resize:vertical;min-height:38px;line-height:1.4}
.cc-ho-turn{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-muted);margin-top:9px}
.cc-ho-target{width:74px;padding:7px 9px;border-radius:9px;border:.5px solid color-mix(in srgb,var(--app-accent) 16%,rgba(0,0,0,.14));background:var(--input-bg,var(--card-bg));font-size:13px;color:var(--text-primary)}
.cc-ho-target:focus{outline:none;border-color:color-mix(in srgb,var(--app-accent) 55%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 16%,transparent)}
.cc-ho-turn-note{opacity:.7;font-size:11px}
.cc-ho-ask-row,.cc-ho-cc-row{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.cc-ho-ask-dot{width:7px;height:7px;flex:0 0 auto;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--app-accent) 45%,var(--text-muted))}
.cc-ho-cc-row .cc-ho-cc-party{flex:0 0 42%}
.cc-ho-rm{width:26px;height:26px;flex:0 0 auto;border:none;background:transparent;color:var(--text-muted);border-radius:8px;display:grid;place-items:center;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
.cc-ho-rm svg{width:12px;height:12px}
.cc-ho-rm:hover{background:color-mix(in srgb,var(--color-error) 12%,transparent);color:var(--color-error)}
.cc-ho-add{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--app-accent);background:none;border:none;cursor:pointer;padding:3px 2px;border-radius:7px;transition:opacity var(--motion-fast)}
.cc-ho-add svg{width:12px;height:12px}
.cc-ho-add:hover{opacity:.72}
.cc-ho-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 18px;border-top:.5px solid var(--chrome-border);background:var(--surface-frost,var(--surface))}
.cc-ho-ok-cue{margin-left:2px;transition:transform var(--motion-fast) var(--ease-out);display:inline-block}
.cc-ho-ok:hover .cc-ho-ok-cue{transform:translateX(2px)}
@media (prefers-reduced-motion:reduce){.cc-ho-overlay,.cc-ho-sheet{animation:none}}
@media (max-width:520px){.cc-ho-sheet{width:100%;max-height:calc(100vh - 24px)}.cc-ho-cc-row{flex-wrap:wrap}.cc-ho-cc-row .cc-ho-cc-party{flex:1 1 100%}}
/* ── Hand-off DETAIL panel (the current holder's inbound note + trackable asks + CC) ── */
.cc-ho-detail{margin-top:12px;padding:11px 12px;border-radius:12px;background:color-mix(in srgb,var(--app-accent) 3%,var(--surface,var(--card-bg)));border:.5px solid color-mix(in srgb,var(--app-accent) 10%,var(--chrome-border))}
.cc-ho-d-note{display:flex;gap:8px;font-size:12.5px;line-height:1.4;color:var(--text-secondary)}
.cc-ho-d-ico{width:13px;height:13px;flex:0 0 auto;margin-top:2px;color:var(--text-muted)}
.cc-ho-d-asks{margin-top:10px}
.cc-ho-d-note + .cc-ho-d-asks{padding-top:10px;border-top:.5px solid color-mix(in srgb,var(--chrome-border) 55%,transparent)}
.cc-ho-d-asks-h{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:7px}
.cc-ho-d-count{font-size:10px;font-weight:800;padding:1px 7px;border-radius:999px;text-transform:none;letter-spacing:0}
.cc-ho-d-count.warn{background:color-mix(in srgb,var(--color-warning) 16%,transparent);color:var(--co-pending-fg,#b45309)}
.cc-ho-d-count.ok{background:color-mix(in srgb,var(--color-success) 15%,transparent);color:var(--color-success)}
.cc-ho-d-ask{display:flex;align-items:center;gap:9px;padding:5px 4px;cursor:pointer;border-radius:8px;transition:background var(--motion-fast) var(--ease-out)}
.cc-ho-d-ask:hover{background:color-mix(in srgb,var(--text-primary) 4%,transparent)}
.cc-ho-d-ask input{position:absolute;opacity:0;width:0;height:0}
.cc-ho-d-ask-box{width:18px;height:18px;flex:0 0 auto;border-radius:6px;border:1.5px solid color-mix(in srgb,var(--app-accent) 40%,var(--text-muted));display:grid;place-items:center;transition:background var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out)}
.cc-ho-d-ask-box svg{width:11px;height:11px;color:#fff;opacity:0;transform:scale(.5);transition:opacity var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
.cc-ho-d-ask.done .cc-ho-d-ask-box{background:var(--color-success);border-color:var(--color-success)}
.cc-ho-d-ask.done .cc-ho-d-ask-box svg{opacity:1;transform:scale(1)}
.cc-ho-d-ask-txt{font-size:12.5px;color:var(--text-primary);line-height:1.35}
.cc-ho-d-ask.done .cc-ho-d-ask-txt{color:var(--text-muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--text-muted) 60%,transparent)}
.cc-ho-d-cc{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:10px;border-top:.5px solid color-mix(in srgb,var(--chrome-border) 55%,transparent)}
.cc-ho-d-cc-lbl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
.cc-ho-d-cc-chip{font-size:11.5px;font-weight:650;padding:2px 9px;border-radius:999px;background:var(--surface-2);color:var(--text-secondary)}
/* Composer — Reference files picker (toggle list of the record's project files) */
.cc-ho-files{display:flex;flex-direction:column;gap:5px;max-height:168px;overflow:auto}
.cc-ho-files-loading,.cc-ho-files-empty{font-size:12px;color:var(--text-muted);padding:4px 2px}
.cc-ho-file{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:7px 9px;border-radius:10px;border:.5px solid var(--field-stroke);background:var(--field-fill);color:var(--text-secondary);font-size:12.5px;cursor:pointer;transition:background var(--motion-fast),border-color var(--motion-fast)}
.cc-ho-file:hover{background:color-mix(in srgb,var(--app-accent) 6%,var(--field-fill));border-color:color-mix(in srgb,var(--app-accent) 30%,var(--field-stroke))}
.cc-ho-file .cc-ho-file-chk{flex:0 0 auto;width:17px;height:17px;border-radius:5px;border:1.5px solid color-mix(in srgb,var(--text-muted) 55%,transparent);display:grid;place-items:center;transition:background var(--motion-fast),border-color var(--motion-fast)}
.cc-ho-file .cc-ho-file-chk svg{width:11px;height:11px;opacity:0;color:#fff;transition:opacity var(--motion-fast)}
.cc-ho-file.on{color:var(--text-primary);background:color-mix(in srgb,var(--app-accent) 8%,var(--field-fill));border-color:color-mix(in srgb,var(--app-accent) 40%,transparent)}
.cc-ho-file.on .cc-ho-file-chk{background:var(--app-accent);border-color:var(--app-accent)}
.cc-ho-file.on .cc-ho-file-chk svg{opacity:1}
.cc-ho-file-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Detail — referenced-file chips + message-posted indicator */
.cc-ho-d-files{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:10px;border-top:.5px solid color-mix(in srgb,var(--chrome-border) 55%,transparent)}
.cc-ho-d-file{display:inline-flex;align-items:center;gap:6px;max-width:220px;padding:3px 10px;border-radius:999px;border:.5px solid var(--field-stroke);background:var(--field-fill);color:var(--text-secondary);font-size:11.5px;font-weight:600;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast)}
.cc-ho-d-file:hover{background:color-mix(in srgb,var(--app-accent) 10%,transparent);color:var(--app-accent);border-color:color-mix(in srgb,var(--app-accent) 35%,transparent)}
.cc-ho-d-file svg{width:12px;height:12px;flex:0 0 auto}
.cc-ho-d-file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-ho-d-msg{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:6px 11px;border-radius:10px;border:.5px solid color-mix(in srgb,var(--app-accent) 18%,var(--field-stroke));background:color-mix(in srgb,var(--app-accent) 5%,var(--field-fill));color:var(--text-secondary);font-size:12px;font-weight:600;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
.cc-ho-d-msg:hover{background:color-mix(in srgb,var(--app-accent) 11%,transparent);color:var(--app-accent)}
.cc-ho-d-msg svg{width:14px;height:14px;flex:0 0 auto}
.cc-editor{border-radius:14px;border:.5px solid color-mix(in srgb,var(--app-accent) 8%,rgba(0,0,0,.08));background:color-mix(in srgb,var(--app-accent) 2.5%,var(--card-bg));padding:12px 14px;margin-top:8px}
.cc-editor .cc-ed-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.cc-editor .cc-ed-title{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
.cc-editor .cc-ed-title svg{width:14px;height:14px}
.cc-editor .cc-ed-stuck{font-size:11px;font-weight:700;color:var(--color-error,#c0392b)}
.cc-editor .cc-flow{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;row-gap:12px}
.cc-editor .cc-n{display:flex;flex-direction:column;align-items:center;gap:5px;width:88px;flex:0 0 auto;text-align:center;position:relative}
/* Ball-in-court party node = the REAL Atira user-pic orb (the .acct-avatar/.pc-avatar sphere recipe):
   the per-party hue is the base (set inline), a top specular cap + inner bottom shade + a soft lift
   give true sphere depth — identical to how every user picture reads across the app. Motion is layered
   on top (pulse on the current holder, hand-off ripple, hover shimmer, stuck intensify). */
.cc-editor .cc-n-av{width:40px;height:40px;border-radius:50%;position:relative;overflow:visible;display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px;letter-spacing:-.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -3px 6px rgba(0,0,0,.22),inset 0 0 0 .5px rgba(0,0,0,.06),0 0 0 3px var(--card-bg,#fff),0 2px 6px rgba(16,24,40,.16),0 4px 12px -4px rgba(16,24,40,.22);
  transition:transform var(--motion-fast,.15s) var(--ease-spring,cubic-bezier(.34,1.56,.64,1)),box-shadow var(--motion-fast,.15s) var(--ease-out)}
/* specular cap — the sphere highlight (same idiom as .acct-avatar::after / .pc-avatar::before) */
.cc-editor .cc-n-av::after{content:'';position:absolute;left:50%;top:8%;transform:translateX(-50%);width:62%;height:44%;border-radius:50%;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.55),rgba(255,255,255,0) 74%)}
.cc-editor .cc-n-av > *{position:relative;z-index:1}
/* HOVER — the orb reacts: lifts + a brighter specular bloom (tactile, signals interactivity).
   Pause the breathe/urgent pulse on hover so the hover transform isn't fought by the keyframe. */
.cc-editor .cc-n:hover .cc-n-av{transform:translateY(-2px) scale(1.05);animation-play-state:paused;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -3px 6px rgba(0,0,0,.22),0 0 0 3px var(--card-bg,#fff),0 5px 16px -4px rgba(16,24,40,.34)}
/* CURRENT holder — accent orb-ring + a gentle live breathe (the action is here) */
.cc-editor .cc-n.cur .cc-n-av{box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -3px 6px rgba(0,0,0,.22),0 0 0 3px var(--card-bg,#fff),0 0 0 5.5px color-mix(in srgb,var(--app-accent) 78%,#fff),0 3px 12px -3px color-mix(in srgb,var(--app-accent) 45%,transparent);
  animation:ccOrbBreathe 2.6s var(--ease-in-out,ease-in-out) infinite}
/* STUCK/overdue — the pulse turns urgent (warmer, faster, stronger) — escalating visual pressure */
.cc-editor .cc-n.stuck .cc-n-av{box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -3px 6px rgba(0,0,0,.22),0 0 0 3px var(--card-bg,#fff),0 0 0 5.5px color-mix(in srgb,var(--color-error,#ef4444) 62%,transparent),0 3px 12px -3px color-mix(in srgb,var(--color-error,#ef4444) 50%,transparent);
  animation:ccOrbUrgent 1.15s var(--ease-in-out,ease-in-out) infinite}
.cc-editor .cc-n.done .cc-n-av{opacity:.5;animation:none}
/* HAND-OFF — when the ball just moved to this node, a one-shot ripple ring blooms outward */
.cc-editor .cc-n.cc-handoff .cc-n-av::before{content:'';position:absolute;inset:-2px;border-radius:50%;z-index:0;pointer-events:none;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--app-accent) 60%,transparent);animation:ccOrbRipple .9s var(--ease-out,ease-out) 1}
@keyframes ccOrbBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes ccOrbUrgent{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes ccOrbRipple{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--app-accent) 55%,transparent)}100%{box-shadow:0 0 0 16px color-mix(in srgb,var(--app-accent) 0%,transparent)}}
@media (prefers-reduced-motion:reduce){.cc-editor .cc-n.cur .cc-n-av,.cc-editor .cc-n.stuck .cc-n-av,.cc-editor .cc-n.cc-handoff .cc-n-av::before{animation:none}}
.cc-editor .cc-n-name{font-size:11px;font-weight:800;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cc-editor .cc-n-role{font-size:9.5px;color:var(--text-muted);font-weight:600;line-height:1.2}
.cc-editor .cc-n-pill{display:inline-flex;align-items:center;height:16px;padding:0 7px;border-radius:999px;font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;background:var(--surface-2,rgba(120,120,128,.14));color:var(--text-muted)}
.cc-editor .cc-n-pill.cur{background:var(--color-error-bg,#fdeaea);color:var(--color-error,#c0392b)}
.cc-editor .cc-n-pill.stuck{background:var(--color-error,#c0392b);color:#fff}
.cc-editor .cc-n-pill.done{background:color-mix(in srgb,var(--color-success,#34c759) 16%,transparent);color:color-mix(in srgb,var(--color-success,#1a7f37) 90%,var(--text-primary))}
.cc-editor .cc-n-rm{position:absolute;top:-4px;right:8px;width:16px;height:16px;border-radius:999px;border:none;background:var(--surface-2,rgba(120,120,128,.18));color:var(--text-muted);font-size:11px;line-height:1;cursor:pointer;display:none;place-items:center;padding:0}
.cc-editor .cc-n.removable:hover .cc-n-rm{display:grid}
.cc-editor .cc-n-rm:hover{background:var(--color-error,#c0392b);color:#fff}
/* BIC (2026-07-03) — per-node edit pencil (opposite corner from remove). Reveals on node hover. */
.cc-editor .cc-n{position:relative}
.cc-editor .cc-n-edit{position:absolute;top:-4px;left:8px;width:16px;height:16px;border-radius:999px;border:none;background:var(--surface-2,rgba(120,120,128,.18));color:var(--text-muted);cursor:pointer;display:none;place-items:center;padding:0}
.cc-editor .cc-n-edit svg{width:9px;height:9px}
.cc-editor .cc-n:hover .cc-n-edit{display:grid}
.cc-editor .cc-n-edit:hover{background:var(--app-accent);color:#fff}
.cc-editor .cc-arrow{color:var(--text-muted);font-size:15px;margin-top:11px;flex:0 0 auto}
.cc-editor .cc-acts{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:11px;padding-top:10px;border-top:.5px solid color-mix(in srgb,var(--app-accent) 5%,rgba(0,0,0,.06));opacity:1}
/* The chain's delete reuses .sidebar-btn (width:100% for the vertical sidebar) — in this horizontal
   acts row that stretched it full-width onto its own line. Keep it compact + pushed to the right so
   the destructive action sits apart (per spec), not as a lonely full-width strip. */
.cc-editor .cc-acts .sidebar-btn{width:auto;margin-bottom:0;margin-left:auto;padding:5px 10px}
.cc-editor .cc-empty{font-size:12px;color:var(--text-muted);padding:4px 0 10px}
/* quad: schedule / field / compliance / team status cards */
.quad{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
@media (max-width:1100px){.quad{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.quad{grid-template-columns:1fr}}
.qcard{border-radius:16px;padding:15px;background:var(--surface-grad,linear-gradient(160deg,#fff,#f7f8fb));box-shadow:0 1px 0 rgba(255,255,255,.7) inset,var(--shadow-e2,0 6px 20px -8px rgba(20,30,48,.18));border:.5px solid color-mix(in srgb,var(--app-accent) 4%,rgba(0,0,0,.06));transition:transform var(--motion-fast,.15s) var(--ease-spring,ease),box-shadow var(--motion-fast,.15s)}
.qcard:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,var(--shadow-e3,0 16px 40px -16px rgba(20,30,48,.4))}
.qcard .q-h{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:9px}
.qcard .q-h svg{width:14px;height:14px}
.qcard .q-v{font-size:22px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.qcard .q-s{font-size:11.5px;color:var(--text-secondary);font-weight:600;margin-top:3px}
.qbar{height:6px;border-radius:999px;background:var(--surface-2,rgba(120,120,128,.14));overflow:hidden;margin-top:9px}
.qbar i{display:block;height:100%;border-radius:999px}
/* ov deck: activity story + lookahead two-up (reuses .surf/.surf-head from this block) */
.ov-deck{display:grid;gap:18px;grid-template-columns:1.4fr 1fr}
@media (max-width:1200px){.ov-deck{grid-template-columns:1fr}}
/* stable min-height on the async-filled lookahead so first-open doesn't bounce when the
   "Loading…" placeholder is replaced by real rows */
#movLookahead{min-height:160px;display:flex;flex-direction:column}
/* activity-as-story rows */
.story{display:flex;gap:13px;padding:12px 2px;border-bottom:.5px solid color-mix(in srgb,var(--app-accent) 3%,rgba(0,0,0,.05))}
.story:last-child{border-bottom:0}
/* V-ov2 2026-07-01 — activity actor avatars = lifted Atira ORBs (lit sphere), not flat disks
   (Gavin). The inline background-color (from _ovAvColor) is the orb's base tone; CSS layers a
   specular top highlight + lower-shadow gradient + inset bevel + drop shadow so it reads as a
   raised sphere. A ::after adds the bright specular dot (the signature Atira orb highlight). */
.story .s-av{position:relative;width:32px;height:32px;border-radius:999px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:12px;flex:0 0 auto;overflow:visible;
  /* NOTE: the base color comes from the inline `background:` (a linear-gradient from _ovAvColor), so
     the orb sheen must layer via ::before/::after (NOT background-image, which the inline shorthand
     would overwrite). box-shadow gives the lift + roundness; ::before is the soft top sheen. */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 4px rgba(0,0,0,.22),0 3px 8px -2px rgba(20,30,48,.32),0 0 0 .5px rgba(0,0,0,.08)}
.story .s-av::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 33% 26%,rgba(255,255,255,.40),transparent 38%),radial-gradient(circle at 70% 86%,rgba(0,0,0,.24),transparent 52%)}
.story .s-av::after{content:"";position:absolute;top:15%;left:26%;width:26%;height:20%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.75),transparent 72%);pointer-events:none;z-index:1}
.story .s-av{text-shadow:0 1px 1px rgba(0,0,20,.4)}
.story .s-body{flex:1;min-width:0}
.story .s-text{font-size:13px;line-height:1.4}
.story .s-text b{font-weight:800}
.story .s-time{font-size:11px;color:var(--text-muted);font-weight:600;margin-top:1px}
/* 3-week lookahead rows (overdue first). SCOPED to #movLookahead — the live Calendar/
   Lookahead PAGE already owns .la-row/.la-body/.lw-* with different layout; these must
   NOT bleed onto it. The Overview lookahead renders into #movLookahead exclusively. */
#movLookahead .la-row{display:flex;align-items:center;gap:12px;padding:11px 10px;margin:0 -10px;border-radius:12px;border-bottom:.5px solid color-mix(in srgb,var(--app-accent) 3%,rgba(0,0,0,.05));cursor:pointer;transition:background var(--motion-fast,.15s),border-color var(--motion-fast,.15s)}
#movLookahead .la-row:last-child{border-bottom:0}
/* rounded, inset hover fill (no hard-corner full-bleed block) */
#movLookahead .la-row:hover{background:var(--hover-overlay,rgba(0,0,0,.025));border-bottom-color:transparent}
#movLookahead .la-when{width:72px;flex:0 0 72px}
/* relative label = uppercase mini-label (consistent w/ the section's label system) */
#movLookahead .la-when .lw-d{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
#movLookahead .la-when .lw-r{font-size:11px;font-weight:700;color:var(--text-muted);margin-top:1px}
/* kind label (e.g. BLOCKER) lives in the when-column under the date — same uppercase mini-label
   tone as lw-d, so the when-cell reads OVERDUE / May 9 / BLOCKER as a coherent stack */
#movLookahead .la-when .lw-kind{font-size:10px;color:var(--text-muted);font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin-top:3px}
#movLookahead .la-body{flex:1;min-width:0;align-self:center}
#movLookahead .la-body .lb-t{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (prefers-reduced-motion:reduce){.ctile,.nextband .nb-cta .btnw{transition:none}.ctile:hover,.ctile:active{transform:none}}

/* ---- LEDGER (pass-2 16-ledger.html): cash-position hero + running-balance ledger.
   SCOPED to #ledgerView — generic names (.seg/.chipf/.ttag/.acct-row) must not bleed. ---- */
/* the ledger content is tall (running-balance journal) but its .omh-wrap parents are
   height-capped + overflow:hidden — so make the ledger view its own scroll region. */
#ledgerView:not(.hidden){height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch}
#ledgerView .led-wrap{padding:20px 26px 40px}
#ledgerView .warn-fg{color:color-mix(in srgb,var(--color-warning) 62%,#5a3800)}
/* cash-position hero band (financial green, lit, specular) */
#ledgerView .cash-hero{position:relative;border-radius:22px;padding:22px 26px;color:#fff;overflow:hidden;margin-bottom:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--color-success) 58%,#06251a) 0%,color-mix(in srgb,var(--color-success) 74%,#0a3a28) 52%,var(--color-success) 100%);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,var(--shadow-e3,0 18px 50px -18px rgba(20,60,40,.45))}
#ledgerView .cash-hero::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 80% at 100% 0%,rgba(255,255,255,.18),transparent 55%)}
#ledgerView .ch-top{display:flex;align-items:flex-end;gap:28px;position:relative;z-index:1;flex-wrap:wrap}
#ledgerView .ch-main{padding:6px 10px;margin:-6px -10px;border-radius:16px}
#ledgerView .ch-main:hover{background:rgba(255,255,255,.08)}
#ledgerView .ch-main .ch-kicker{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.9}
#ledgerView .ch-main .ch-val{font-size:42px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1;margin:4px 0 3px}
#ledgerView .ch-main .ch-sub{font-size:12.5px;opacity:.92;font-weight:600}
#ledgerView .ch-stats{display:flex;gap:12px;margin-left:auto;flex-wrap:wrap}
#ledgerView .ch-stat{display:flex;flex-direction:column;gap:3px;min-width:104px;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.10);border:.5px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 16px -10px rgba(0,0,0,.45);text-align:left}
#ledgerView .ch-stat .cs-l{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;opacity:.82}
#ledgerView .ch-stat .cs-v{font-size:21px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
#ledgerView .ch-stat.is-pos .cs-v{color:#eafff4;text-shadow:0 1px 8px rgba(140,255,200,.35)}
#ledgerView .ch-stat.is-warn .cs-v{color:#ffe9cf;text-shadow:0 1px 8px rgba(255,190,120,.35)}
#ledgerView .ch-stat-door{cursor:pointer;font:inherit;color:#fff;position:relative;overflow:hidden;transition:transform var(--motion-fast,.15s) var(--ease-spring,cubic-bezier(.34,1.56,.64,1)),background var(--motion-fast,.15s),box-shadow var(--motion-fast,.15s)}
#ledgerView .ch-stat-door::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 60%);opacity:0;transition:opacity var(--motion-fast,.15s);pointer-events:none}
#ledgerView .ch-stat-door:hover{transform:translateY(-2px);background:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 26px -12px rgba(0,0,0,.5)}
#ledgerView .ch-stat-door:hover::after{opacity:1}
#ledgerView .ch-stat-door:active{transform:translateY(0) scale(.97)}
#ledgerView .ch-stat-door:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.5)}
@media (prefers-reduced-motion:reduce){#ledgerView .ch-stat-door,#ledgerView .ch-stat-door:hover,#ledgerView .ch-stat-door:active{transform:none;transition:none}}
#ledgerView .ch-spark-wrap{margin-top:14px;position:relative;z-index:1}
#ledgerView .ch-spark-cap{display:flex;justify-content:space-between;align-items:baseline;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;opacity:.8;margin-bottom:7px}
#ledgerView .ch-spark-cap .ch-spark-now{font-variant-numeric:tabular-nums;opacity:1;letter-spacing:-.01em}
#ledgerView .ch-spark{display:flex;align-items:flex-end;gap:4px;height:48px;position:relative;padding-bottom:1px}
#ledgerView .ch-spark::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.28)}
#ledgerView .ch-spark>i{flex:1 1 0;min-width:6px;max-width:16px;border-radius:5px 5px 0 0;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.18));position:relative;transition:background var(--motion-base,.22s) var(--ease-out,ease)}
#ledgerView .ch-spark>i.up{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.32))}
#ledgerView .ch-spark>i.peak{box-shadow:0 0 10px rgba(255,255,255,.35)}
#ledgerView .ch-spark>i.now{background:linear-gradient(180deg,#fff,rgba(255,255,255,.55))}
#ledgerView .ch-spark>i.now>b{position:absolute;top:-5px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.7)}
@media (max-width:640px){#ledgerView .ch-main .ch-val{font-size:32px}#ledgerView .ch-stats{gap:8px;width:100%}#ledgerView .ch-stat{flex:1 1 calc(50% - 4px);min-width:0}}
/* toolbar */
#ledgerView .led-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
/* V133 (2026-06-20) — the 9 transaction-type tabs live on their own self-contained
   flex-wrap row so they never overflow at iPad-landscape widths (1180/1194/1366).
   The pill capsule wraps to a second line gracefully instead of running off-edge. */
#ledgerView .led-tabs-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;min-width:0}
#ledgerView .seg{display:inline-flex;flex-wrap:wrap;padding:3px;border-radius:18px;background:var(--surface-2);max-width:100%}
#ledgerView .seg button{border:0;background:transparent;padding:5px 13px;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--text-secondary);cursor:pointer;transition:background var(--motion-fast,.15s),color var(--motion-fast,.15s)}
#ledgerView .seg button.on{background:var(--surface,#fff);color:var(--text-primary);box-shadow:var(--shadow-e1)}
#ledgerView .chipf{height:32px;padding:0 13px;border-radius:999px;font-size:12.5px;font-weight:600;border:.5px solid var(--chrome-border);background:var(--surface,#fff);color:var(--text-primary);cursor:pointer;display:inline-flex;align-items:center;gap:6px;box-shadow:var(--shadow-e1)}
#ledgerView .chipf.is-on{border-color:transparent;background:color-mix(in srgb,var(--app-accent) 14%,#fff);color:var(--app-accent)}
/* Always-reachable primary create action in the ledger bar (the quick-action
   layer can be hidden when Help mode is off — this guarantees Manual entry is
   never unreachable). Accent-filled per the one-primary-action rule. */
#ledgerView .chipf.chipf-primary{border-color:transparent;color:var(--on-accent);background:linear-gradient(to bottom,color-mix(in srgb,#fff 16%,var(--app-accent)),var(--app-accent) 64%,color-mix(in srgb,#000 8%,var(--app-accent)));box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 1px 2px color-mix(in srgb,var(--app-accent) 30%,transparent);font-weight:700;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast),filter var(--motion-fast)}
#ledgerView .chipf.chipf-primary:hover{filter:brightness(1.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),var(--shadow-e2)}
#ledgerView .chipf.chipf-primary:active{transform:scale(.97)}
#ledgerView .chipf.chipf-primary .chipf-ic{color:var(--on-accent);stroke:currentColor}
#ledgerView .chipf .chipf-ic{width:13px;height:13px}
#ledgerView .led-table-empty .em-ico .ic{width:28px;height:28px}
#ledgerView .chipf.is-dd .dd-caret{opacity:.55;font-size:10px;margin-left:1px}
/* lightweight ledger filter dropdown menu */
.gl-filter-menu{position:fixed;z-index:var(--z-toast,99999);min-width:180px;background:var(--surface,#fff);border:.5px solid var(--chrome-border);border-radius:12px;box-shadow:var(--shadow-e3);padding:6px;max-height:60vh;overflow:auto}
.gl-filter-menu button{display:flex;width:100%;align-items:center;gap:8px;padding:8px 10px;border:0;background:transparent;font:inherit;font-size:12.5px;font-weight:600;color:var(--text-primary);cursor:pointer;border-radius:8px;text-align:left}
.gl-filter-menu button:hover{background:var(--hover-overlay,rgba(0,0,0,.05))}
.gl-filter-menu button.on{color:var(--app-accent);font-weight:700}
#ledgerView .exp-cluster{display:inline-flex}
#ledgerView .exp-cluster .chipf{border-radius:0;margin-left:-.5px}
#ledgerView .exp-cluster .chipf:first-child{border-radius:999px 0 0 999px;margin-left:0}
#ledgerView .exp-cluster .chipf:last-child{border-radius:0 999px 999px 0}
/* ledger table surface */
#ledgerView .led-table-surf{padding:0;overflow:hidden}
#ledgerView .ltbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
/* Rule 15 — sticky table header is a CONTENT header inside a scroll container, NOT floating
   chrome; backdrop-filter here repainted every scroll frame (jank). Solid opaque bg instead. */
#ledgerView .ltbl thead th{text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);padding:12px 16px;background:var(--surface);border-bottom:.5px solid var(--chrome-border);position:sticky;top:0;z-index:1}
#ledgerView .ltbl thead th.num{text-align:right}
#ledgerView .ltbl tbody td{padding:12px 16px;border-bottom:.5px solid color-mix(in srgb,var(--app-accent) 3%,rgba(0,0,0,.05));vertical-align:middle}
#ledgerView .ltbl tbody tr:hover td{background:var(--hover-overlay)}
#ledgerView .ltbl td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:-.01em}
#ledgerView .ltbl .credit{color:var(--color-success);font-weight:800}
#ledgerView .ltbl .debit{color:color-mix(in srgb,var(--color-error) 72%,var(--text-secondary))}
#ledgerView .ltbl .bal{font-weight:800;font-variant-numeric:tabular-nums;color:var(--text-primary)}
/* an em-dash placeholder should recede, not compete with real figures (review weak_spot) */
#ledgerView .ltbl td.num.is-empty{color:var(--text-muted);font-weight:600}
#ledgerView .led-date{font-variant-numeric:tabular-nums;color:var(--text-secondary);font-weight:700;font-size:12px;white-space:nowrap}
#ledgerView .led-desc{font-weight:700}
/* Per-row Void affordance on the Transactions table — quiet until row hover, then
   a rounded danger-tinted icon button (rounded-hover rule). */
#ledgerView .ltbl .led-act-cell{width:36px;text-align:center;padding-left:4px;padding-right:8px}
#ledgerView .led-row-void{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:transparent;color:var(--text-muted);cursor:pointer;opacity:0;transition:opacity var(--motion-fast),background var(--motion-fast),color var(--motion-fast),transform var(--motion-fast) var(--ease-spring)}
#ledgerView .ltbl tbody tr:hover .led-row-void,#ledgerView .led-row-void:focus-visible{opacity:1}
#ledgerView .led-row-void:hover{background:color-mix(in srgb,var(--color-error) 12%,transparent);color:var(--color-error)}
#ledgerView .led-row-void:active{transform:scale(.9)}
#ledgerView .led-row-void:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-error) 24%,transparent)}
#ledgerView .led-row-void .ic{width:13px;height:13px}
#ledgerView .led-voided-tag{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:color-mix(in srgb,var(--color-error) 12%,transparent);color:var(--color-error);vertical-align:1px}
@media (hover:none){#ledgerView .led-row-void{opacity:1}}
#ledgerView .led-proj{font-size:11px;color:var(--text-muted);font-weight:600;margin-top:1px}
#ledgerView .ttag{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.02em;background:var(--badge-neutral-bg,var(--surface-2));color:var(--badge-neutral-fg,var(--text-secondary))}
#ledgerView .ttag::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--tdot,var(--text-muted));flex:0 0 auto}
#ledgerView .ttag.draw{--tdot:var(--color-success)}
#ledgerView .ttag.deposit{--tdot:var(--color-info)}
#ledgerView .ttag.co{--tdot:var(--color-success)}
#ledgerView .ttag.po{--tdot:var(--color-warning)}
#ledgerView .ttag.bill{--tdot:var(--text-muted)}
#ledgerView .ttag.labor{--tdot:var(--text-secondary)}
/* Tokenized payroll / payment-run status pill family — one class (with a status dot) replaces
   the scattered hand-rolled inline `.ttag` backgrounds across all payroll callsites. */
#ledgerView .pay-pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;line-height:1.7;vertical-align:1px;background:var(--surface-2);color:var(--text-secondary)}
#ledgerView .pay-pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:0 0 auto;opacity:.9}
#ledgerView .pay-pill.pp-ok{background:color-mix(in srgb,var(--color-success) 14%,transparent);color:color-mix(in srgb,var(--color-success) 78%,var(--text-primary))}
#ledgerView .pay-pill.pp-warn{background:color-mix(in srgb,var(--color-warning) 16%,transparent);color:color-mix(in srgb,var(--color-warning) 72%,var(--text-primary))}
#ledgerView .pay-pill.pp-error{background:color-mix(in srgb,var(--color-error) 15%,transparent);color:color-mix(in srgb,var(--color-error) 78%,var(--text-primary))}
#ledgerView .pay-pill.pp-void{background:var(--surface-2);color:var(--text-muted)}
#ledgerView .day-row td{background:color-mix(in srgb,var(--app-accent) 5%,transparent);font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);padding:9px 16px 7px;border-top:.5px solid color-mix(in srgb,var(--app-accent) 9%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
#ledgerView .ltbl tbody tr.day-row:first-child td{border-top:0;box-shadow:none}
/* Pay Bills tab — open-payables picker + run actions. Selection = contained rounded tint + ring
   (no edge-strips), hover = rounded lift, per the RT design rules. */
#ledgerView .paybar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 12px}
#ledgerView .paybar .spacer{flex:1 1 auto}
#ledgerView .paysel-sum{font-size:12.5px;font-weight:700;color:var(--text-secondary)}
/* Payroll register rollup — gross − deductions = net as three metric-command tiles
   (net accent-highlighted), withheld breakdown as a quiet caption beneath. */
#ledgerView .pay-reg{margin-top:8px}
#ledgerView .pay-reg-tiles{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
#ledgerView .pay-reg-tile{flex:1 1 140px;min-width:0;padding:12px 14px;border-radius:14px;background:var(--card-bg,#fff);box-shadow:var(--shadow-e1);border:.5px solid color-mix(in srgb,var(--app-accent) 4%,rgba(0,0,0,.05))}
#ledgerView .pay-reg-tile .prt-l{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
#ledgerView .pay-reg-tile .prt-v{font-size:22px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1;margin-top:3px;color:var(--text-primary)}
#ledgerView .pay-reg-tile.is-net{background:color-mix(in srgb,var(--app-accent) 8%,var(--card-bg));border-color:color-mix(in srgb,var(--app-accent) 24%,transparent);box-shadow:var(--shadow-e2),inset 0 1px 0 rgba(255,255,255,.4)}
#ledgerView .pay-reg-tile.is-net .prt-v{color:var(--app-accent)}
#ledgerView .pay-reg-op{display:flex;align-items:center;font-size:18px;font-weight:700;color:var(--text-muted);flex:0 0 auto}
#ledgerView .pay-reg-cap{font-size:12px;color:var(--text-muted);font-weight:600;margin-top:10px}
@media (max-width:640px){#ledgerView .pay-reg-op{display:none}#ledgerView .pay-reg-tile{flex:1 1 calc(50% - 5px)}}
/* E1 CONFIG LAYER — Payroll Settings tab (per-org tax config). Floating .rt-panel-solid card on the
   matte; system-styled fields; rounded focus from the global *:focus-visible. Mobile-first grid. */
#ledgerView .pset-wrap{max-width:860px}
#ledgerView .pset-card{padding:22px 24px 20px;gap:14px}
#ledgerView .pset-sub{font-size:13px;color:var(--text-secondary);line-height:1.5;max-width:62ch;margin:-2px 0 4px}
#ledgerView .pset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 22px}
#ledgerView .pset-fld{display:flex;flex-direction:column;gap:7px;min-width:0}
#ledgerView .pset-lab{font:600 11px/1 var(--font,inherit);letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
#ledgerView .pset-inline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#ledgerView .pset-unit{font-size:12.5px;color:var(--text-secondary);font-weight:600}
#ledgerView .pset-hint{font-size:12px;color:var(--text-muted);line-height:1.45;margin-top:2px}
#ledgerView .pset-plans{margin-top:2px}
#ledgerView .pset-chiprow{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
#ledgerView .pset-chip{font:600 12.5px/1 var(--font,inherit);padding:8px 14px;border-radius:999px;border:1px solid var(--border,#ddd);background:var(--card-bg);color:var(--text-secondary);cursor:pointer;transition:background .15s var(--ease-out,ease),box-shadow .15s var(--ease-out,ease),color .15s var(--ease-out,ease),transform .12s var(--ease-spring,ease)}
#ledgerView .pset-chip:hover{box-shadow:var(--shadow-e2);transform:translateY(-1px)}
#ledgerView .pset-chip:active{transform:translateY(0) scale(.97)}
#ledgerView .pset-chip.is-on{background:color-mix(in srgb,var(--app-accent) 16%,var(--card-bg));color:var(--text-primary);border-color:color-mix(in srgb,var(--app-accent) 42%,transparent);box-shadow:var(--shadow-e1),inset 0 1px 0 rgba(255,255,255,.18)}
#ledgerView .pset-toggle-row{display:flex;align-items:center;gap:11px}
#ledgerView .pset-toggle-cap{font-size:12.5px;color:var(--text-secondary);font-weight:500}
#ledgerView .pset-switch{position:relative;width:46px;height:27px;border-radius:999px;border:none;background:color-mix(in srgb,var(--text-muted) 34%,transparent);cursor:pointer;flex:0 0 auto;transition:background .2s var(--ease-out,ease);box-shadow:inset 0 1px 2px rgba(0,0,0,.18)}
#ledgerView .pset-switch.is-on{background:var(--app-accent)}
#ledgerView .pset-switch.is-disabled{opacity:.4;cursor:not-allowed}
#ledgerView .pset-knob{position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s var(--ease-spring,cubic-bezier(.34,1.56,.64,1))}
#ledgerView .pset-switch.is-on .pset-knob{transform:translateX(19px)}
/* Per-employee pre-tax enrollment modal (renders into body overlay, NOT #ledgerView → self-scoped chips) */
.ded-enroll-body{display:flex;flex-direction:column;gap:14px}
.ded-enroll-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"chip amt" "meta amt";align-items:center;gap:5px 16px;padding:13px 15px;border-radius:14px;border:.5px solid var(--chrome-border,var(--border,#ddd));background:var(--surface-2,var(--card-bg))}
.ded-enroll-row .pset-chip{grid-area:chip;justify-self:start;max-width:100%;white-space:nowrap;font:600 12.5px/1 var(--font,inherit);padding:8px 15px;border-radius:999px;border:1px solid var(--border,#ddd);background:var(--card-bg);color:var(--text-secondary);cursor:pointer;transition:background .15s ease,box-shadow .15s ease,color .15s ease,transform .12s ease}
.ded-enroll-row .pset-chip:hover{box-shadow:var(--shadow-e2);transform:translateY(-1px)}
.ded-enroll-row .pset-chip:active{transform:translateY(0) scale(.97)}
.ded-enroll-row .pset-chip.is-on{background:color-mix(in srgb,var(--app-accent) 16%,var(--card-bg));color:var(--text-primary);border-color:color-mix(in srgb,var(--app-accent) 42%,transparent);box-shadow:var(--shadow-e1),inset 0 1px 0 rgba(255,255,255,.18)}
.ded-enroll-meta{grid-area:meta;min-width:0}
.ded-enroll-amt{grid-area:amt;display:flex;align-items:center;gap:8px;white-space:nowrap}
.ded-enroll-amt .ded-enroll-input{width:76px;flex:0 0 auto;text-align:right}
.ded-enroll-amt .ded-enroll-input:disabled{opacity:.4}
.ded-enroll-unit{font-size:11.5px;white-space:nowrap}
@media (max-width:560px){.ded-enroll-row{grid-template-columns:1fr;grid-template-areas:"chip" "meta" "amt";gap:9px}.ded-enroll-amt{justify-content:flex-start}}
#ledgerView .pset-banners{display:flex;flex-direction:column;gap:8px;margin-top:2px}
#ledgerView .pset-banner{display:flex;align-items:flex-start;gap:9px;padding:11px 14px;border-radius:13px;font-size:12.7px;line-height:1.45;font-weight:500}
#ledgerView .pset-banner .ic{width:16px;height:16px;flex:0 0 auto;margin-top:1px}
#ledgerView .pset-banner-success{background:var(--color-success-bg,color-mix(in srgb,var(--color-success) 12%,transparent));color:var(--text-primary)}
#ledgerView .pset-banner-success .ic{color:var(--color-success)}
#ledgerView .pset-banner-warning{background:var(--color-warning-bg,color-mix(in srgb,var(--color-warning) 14%,transparent));color:var(--text-primary)}
#ledgerView .pset-banner-warning .ic{color:var(--color-warning)}
#ledgerView .pset-banner-info{background:var(--color-info-bg,color-mix(in srgb,var(--color-info) 12%,transparent));color:var(--text-primary)}
#ledgerView .pset-banner-info .ic{color:var(--color-info)}
#ledgerView .pset-actions{display:flex;align-items:center;gap:10px;margin-top:6px;padding-top:14px;border-top:.5px solid var(--chrome-border,rgba(0,0,0,.08))}
#ledgerView .pset-actions .spacer{flex:1 1 auto}
@media (max-width:640px){#ledgerView .pset-grid{grid-template-columns:1fr}#ledgerView .pset-card{padding:18px 16px}}
#ledgerView .payrow{display:flex;align-items:center;gap:12px;border-radius:12px;transition:background .12s ease,box-shadow .12s ease}
#ledgerView .payrow .payrow-cb{width:17px;height:17px;flex:0 0 auto;accent-color:var(--app-accent);cursor:pointer}
#ledgerView .payrow:hover{background:color-mix(in srgb,var(--app-accent) 5%,transparent)}
#ledgerView .payrow.is-sel{background:color-mix(in srgb,var(--app-accent) 9%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--app-accent) 38%,transparent)}
#ledgerView .dc-row.is-void{opacity:.62}
#ledgerView .btn-primary[disabled]{opacity:.45;cursor:default;pointer-events:none}
#ledgerView .led-grid{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}
@media (max-width:1100px){#ledgerView .led-grid{grid-template-columns:1fr}}
#ledgerView .acct-row{display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px 12px;margin:0 -12px;border-bottom:.5px solid color-mix(in srgb,var(--app-accent) 3%,rgba(0,0,0,.06));align-items:center;border-radius:10px}
#ledgerView .acct-row:last-child{border-bottom:0}
#ledgerView .acct-name{font-size:13px;font-weight:700;letter-spacing:-.005em}
#ledgerView .acct-sub{font-size:11px;color:var(--text-muted);font-weight:600}
#ledgerView .acct-val{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
/* contained rounded hover ONLY on drillable rows — they sit inside a card, so the global
   .metric-door lift (transform/shadow) is explicitly reset (review violation #2). */
#ledgerView .acct-row.metric-door{cursor:pointer;transition:background var(--motion-fast,.15s) var(--ease-out,ease)}
#ledgerView .acct-row.metric-door:hover{transform:none;box-shadow:none;background:color-mix(in srgb,var(--app-accent) 7%,transparent)}
#ledgerView .acct-row.metric-door:focus-visible{transform:none;outline:none;background:color-mix(in srgb,var(--app-accent) 9%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--app-accent) 32%,transparent)}
#ledgerView .acct-row.metric-door .acct-val{transition:color var(--motion-fast,.15s)}
#ledgerView .acct-row.metric-door:hover .acct-val{color:var(--app-accent)}
@media (prefers-reduced-motion:reduce){#ledgerView .acct-row.metric-door{transition:none}}
#ledgerView .gp-row{margin-top:6px;padding-top:12px;border-top:1.5px solid var(--chrome-border)}
#ledgerView .gp-row .acct-name{font-size:14px}
#ledgerView .gp-row .acct-val{font-size:18px;color:var(--color-success)}
#ledgerView .led-table-empty{padding:44px 24px;text-align:center}

/* ---- PROJECT NOTES (pass-2 39-project-notes.html): Apple-Notes-caliber quick notes.
   SCOPED to .notes-surface — generic names (.note/.av/.composer) must not bleel. ---- */
/* Notes tab bypasses the .reg-ws master/rail split (its implicit grid tracks were
   shrinking the master + leaving a dead right gutter). The Notes surface is a SELF-
   CONTAINED full-width grid: a notes-main column (2-up cards) + a 300px index column
   (Tags + Open Follow-ups). #railNotes is hidden on this tab so nothing competes. */
#tabNotes .reg-ws{display:block}            /* drop the workspace grid for Notes */
#tabNotes #railNotes{display:none}          /* index lives inside .notes-surface instead */
#tabNotes .reg-ws-master,#tabNotes .modal-section,#tabNotes .note-list{width:100%}
.notes-surface{width:100%}
/* self-contained full-width grid: cards (1fr) + index rail (300px) */
@media (min-width:1180px){
  .notes-surface{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:start}
  .notes-surface .notes-main{min-width:0}
}
/* notes are a SINGLE column (matches the prototype) — even, calm vertical rhythm; no 2-up
   grid (which created uneven gaps). The composer + groups + cards stack with consistent
   12px card gaps (.note margin-bottom) and 18px group labels. */
.notes-surface .notes-main{display:flex;flex-direction:column}
/* toolbar buttons (⇅ Newest first · ⌗ All tags) — pills, not a full-width select */
#tabNotes .note-search-wrap{position:relative;flex:0 1 300px;display:flex;align-items:center}
#tabNotes .note-search-pill{flex:1;border-radius:999px;padding-left:32px}
#tabNotes .note-search-ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--text-muted);pointer-events:none;opacity:.7}
#tabNotes .note-tb-btn{flex:0 0 auto;height:34px;padding:0 14px;border-radius:999px;font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:5px;border:.5px solid var(--chrome-border);background:var(--surface,#fff);color:var(--text-primary);cursor:pointer;box-shadow:var(--shadow-e1,0 1px 2px rgba(0,0,0,.06))}
#tabNotes .note-tb-btn:hover{background:var(--hover-overlay,rgba(0,0,0,.03))}
/* frosted-glass composer */
.notes-surface .composer{position:relative;border-radius:18px;box-shadow:var(--shadow-e2),var(--bevel-top);border:.5px solid color-mix(in srgb,var(--app-accent) 12%,rgba(0,0,0,.05));overflow:hidden;margin-bottom:16px;background:var(--frost-bg-strong,rgba(255,255,255,.82));-webkit-backdrop-filter:var(--frost-blur);backdrop-filter:var(--frost-blur)}
.notes-surface .composer::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 80% at 0% 0%,color-mix(in srgb,var(--app-accent) 9%,transparent),transparent 60%)}
.notes-surface .composer>*{position:relative}
/* pass-2 page-head + toolbar on the Notes tab */
.notes-head{margin-bottom:14px}
.notes-head .ph-kicker{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--app-accent);margin-bottom:4px}
.notes-head h2{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:0 0 4px}
.notes-head .ph-sub{color:var(--text-secondary);font-size:13.5px}
#tabNotes .note-toolbar.page-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
#tabNotes .note-toolbar.page-toolbar .note-search-wrap{flex:0 1 300px}
#tabNotes .note-toolbar.page-toolbar #noteSearch{flex:1}
#tabNotes .note-toolbar.page-toolbar .spacer{flex:1}
.notes-surface .cmp-top{padding:14px 16px 10px}
.notes-surface .cmp-in{width:100%;border:0;background:transparent;font:inherit;font-size:14px;color:var(--text-primary);font-weight:500;min-height:46px;resize:vertical;outline:none}
.notes-surface .cmp-in::placeholder{color:var(--text-muted)}
/* the composer is the focusable SURFACE — the raw textarea shows no boxy focus ring; the
   whole frosted composer lights with a soft, ROUNDED accent ring on focus (follows the 18px
   radius). Kills the global square input focus-ring on .cmp-in. */
.notes-surface .cmp-in:focus,.notes-surface .cmp-in:focus-visible{outline:none!important;box-shadow:none!important}
.notes-surface .composer:focus-within{border-color:color-mix(in srgb,var(--app-accent) 55%,transparent);box-shadow:var(--shadow-e2),var(--bevel-top),0 0 0 3px color-mix(in srgb,var(--app-accent) 16%,transparent)}
.notes-surface .cmp-tools{display:flex;align-items:center;gap:6px;padding:9px 12px;border-top:.5px solid var(--chrome-border);background:color-mix(in srgb,var(--card-bg,#fff) 55%,transparent);flex-wrap:wrap}
.notes-surface .cmp-tool{width:32px;height:32px;border-radius:9px;border:.5px solid var(--chrome-border);background:var(--card-bg,#fff);display:grid;place-items:center;font-size:14px;cursor:pointer;color:var(--text-secondary);flex:0 0 auto;transition:background var(--motion-fast,.15s)}
.notes-surface .cmp-tool:hover{background:var(--hover-overlay,rgba(0,0,0,.04));color:var(--text-primary)}
.notes-surface .cmp-tool .ic{width:16px;height:16px}
.notes-surface .cmp-tags{display:flex;gap:5px;margin-left:2px;flex-wrap:wrap}
.notes-surface .cmp-foot-r{margin-left:auto;display:flex;gap:8px}
.notes-surface .cmp-tag-btn{cursor:pointer;border:0;font:inherit}
.notes-surface .cmp-tag-btn.is-on{outline:2px solid color-mix(in srgb,var(--tc,var(--app-accent)) 55%,transparent);outline-offset:1px}
.notes-surface .cmp-pin{height:30px;padding:0 12px;border-radius:999px;font-size:12px;font-weight:700;border:.5px solid var(--chrome-border);background:var(--surface,#fff);color:var(--text-secondary);cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.notes-surface .cmp-pin.is-on{border-color:transparent;background:var(--cal-due-bg,#fdf3e0);color:var(--cal-due-fg,#b45309)}
.notes-surface .cmp-add{height:30px;padding:0 16px;border-radius:999px;border:0;font-size:12.5px;font-weight:700;color:#fff;cursor:pointer;background:linear-gradient(165deg,color-mix(in srgb,var(--app-accent) 92%,#fff),var(--app-accent));box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 6px 14px -6px var(--app-accent)}
.notes-surface .nlabel{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin:18px 2px 9px;display:flex;align-items:center;gap:7px}
.notes-surface .nlabel:first-of-type{margin-top:0}
/* note card — unpinned recede (e1), pinned commands (e2 + lit). G1: tag color via leading DOT, no edge strip */
.notes-surface .note{background:var(--surface-grad,linear-gradient(160deg,#fff,#fafbfd));border-radius:16px;box-shadow:var(--shadow-e1);border:.5px solid rgba(0,0,0,.05);padding:14px 16px;margin-bottom:12px;position:relative;transition:transform var(--motion-fast) var(--ease-spring),box-shadow var(--motion-fast);cursor:default}
.notes-surface .note.tappable{cursor:pointer}
.notes-surface .note:hover{transform:translateY(-2px);box-shadow:var(--shadow-e3)}
.notes-surface .note.pinned{background:linear-gradient(160deg,color-mix(in srgb,var(--cal-due-fg,#f59e0b) 10%,#fff),#fff 65%);border-color:color-mix(in srgb,var(--cal-due-fg,#f59e0b) 24%,rgba(0,0,0,.05));box-shadow:var(--shadow-e2),var(--bevel-top)}
.notes-surface .note .n-head{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.notes-surface .note .n-dot{width:9px;height:9px;border-radius:999px;flex:0 0 9px;background:var(--tc,var(--text-muted))}
.notes-surface .note .av{width:30px;height:30px;border-radius:999px;flex:0 0 30px;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:800}
.notes-surface .note .n-author{font-size:12.5px;font-weight:800}
.notes-surface .note .n-time{font-size:11px;color:var(--text-muted);font-weight:600}
.notes-surface .note .n-pin{margin-left:auto;font-size:13px;color:var(--text-muted);background:transparent;border:0;cursor:pointer;padding:2px 4px;border-radius:6px;opacity:.5;transition:opacity var(--motion-fast),color var(--motion-fast)}
.notes-surface .note .n-pin:hover{background:var(--hover-overlay,rgba(0,0,0,.04));opacity:1}
.notes-surface .note .n-pin.is-pinned{color:var(--cal-due-fg,#b45309);opacity:1}
.notes-surface .note .n-pin .ic,.notes-surface .note .n-act .ic{width:14px;height:14px}
.notes-surface .note .n-acts{margin-left:6px;display:flex;gap:2px}
.notes-surface .note .n-act{background:transparent;border:0;cursor:pointer;color:var(--text-muted);font-size:12px;padding:3px 5px;border-radius:6px}
.notes-surface .note .n-act:hover{background:var(--hover-overlay,rgba(0,0,0,.04));color:var(--text-primary)}
.notes-surface .note .n-act.del:hover{background:var(--color-error-bg,#fdeaea);color:var(--color-error,#c0392b)}
.notes-surface .note .n-body{font-size:13.5px;line-height:1.5;color:var(--text-primary);white-space:pre-wrap;word-break:break-word}
.notes-surface .note .n-body b{font-weight:800}
.notes-surface .note .n-tags{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.notes-surface .note .n-followup{margin-top:10px;display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:11px;background:var(--surface-2);font-size:11.5px;font-weight:700;color:var(--text-secondary)}
.notes-surface .note .n-followup .fu-check{width:18px;height:18px;border-radius:999px;border:2px solid var(--border-strong);flex:0 0 18px}
.notes-surface .note .n-followup .fu-due{margin-left:auto;color:var(--co-pending-fg,#b45309);font-weight:800}
/* tag-color family — one source drives chip + leading dot + sidebar dot */
.notes-surface .tg-decision,.notes-surface .tagrow.tg-decision{--tc:var(--type-selection-fg,#5b21b6)}
.notes-surface .tg-field,.notes-surface .tagrow.tg-field{--tc:var(--type-inspection-fg,#0a8a8f)}
.notes-surface .tg-cost,.notes-surface .tagrow.tg-cost{--tc:var(--type-change-fg,#b45309)}
.notes-surface .tg-client,.notes-surface .tagrow.tg-client{--tc:var(--cd-client-fg,#2563c9)}
.notes-surface .tg-reminder,.notes-surface .tagrow.tg-reminder{--tc:var(--cal-due-fg,#b45309)}
.notes-surface .ntag{font-size:10px;font-weight:800;padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--text-secondary);display:inline-flex;align-items:center;gap:4px}
.notes-surface .ntag.decision{background:var(--type-selection-bg,#ede9fe);color:var(--type-selection-fg,#5b21b6)}
.notes-surface .ntag.field{background:var(--type-inspection-bg,#e0f5f4);color:var(--type-inspection-fg,#0a8a8f)}
.notes-surface .ntag.client{background:var(--cd-client-bg,#e8f0fd);color:var(--cd-client-fg,#2563c9)}
.notes-surface .ntag.cost{background:var(--type-change-bg,#fdf3e0);color:var(--type-change-fg,#b45309)}
.notes-surface .ntag.reminder{background:var(--cal-due-bg,#fdf3e0);color:var(--cal-due-fg,#b45309)}
/* sidebar panel */
.notes-surface .nside{position:sticky;top:16px}
.notes-surface .tagrow{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:.5px solid var(--chrome-border);cursor:pointer}
.notes-surface .tagrow:last-child{border-bottom:0}
.notes-surface .tagrow .tg-dot{width:9px;height:9px;border-radius:3px;flex:0 0 9px;background:var(--tc,var(--text-muted))}
.notes-surface .tagrow .tg-name{font-size:13px;font-weight:700}
.notes-surface .tagrow .tg-n{margin-left:auto;font-size:12px;font-weight:800;color:var(--text-muted);font-variant-numeric:tabular-nums}
.notes-surface .tagrow.is-active{font-weight:800}
.notes-surface .fu-item{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:.5px solid var(--chrome-border)}
.notes-surface .fu-item:last-child{border-bottom:0}
.notes-surface .fu-item .fu-dot{width:8px;height:8px;border-radius:999px;flex:0 0 8px}
.notes-surface .fu-item .fu-txt{font-size:12.5px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notes-surface .fu-item .fu-when{margin-left:auto;font-size:11px;font-weight:800;color:var(--co-pending-fg,#b45309);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.notes-surface .note{transition:none}.notes-surface .note:hover{transform:none}}

/* shell.css utilities the prototype relies on but the live app lacks (scoped to #ledgerView) */
#ledgerView .stack{display:flex;flex-direction:column;gap:18px}
#ledgerView .led-bar .spacer{flex:1}
#ledgerView .row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#ledgerView .mut{color:var(--text-secondary)}
#ledgerView .hair{height:.5px;background:var(--chrome-border,rgba(0,0,0,.08));border:0;margin:4px 0}

/* ============ end RT REDESIGN 2026-06 (pass-2) shared vocabulary ============ */