/* ============================================================================
   KOREVRA DeLaw — App Shell, Splash, Portals, Modules, Responsive
   ============================================================================ */

#app{ min-height:100vh; }

/* ===================== SPLASH ===================== */
/* background-color repeats the opaque base of the stack below. Purely a
   contrast-audit affordance: the translucent glow layers composite over an
   OPAQUE navy here, so white/#aeb6dd on this panel measures against the real
   backdrop instead of the page canvas (which read 1.08:1). No visual change. */
.splash{ position:fixed; inset:0; z-index:9500; background-color:#0a0e1c; background-image:
  radial-gradient(1200px 700px at 80% -10%, rgba(75,80,230,.28), transparent 60%),
  radial-gradient(900px 600px at 5% 110%, rgba(201,162,75,.18), transparent 55%),
  linear-gradient(160deg,#0b1030,#0a0e1c 60%);
  color:#fff; display:flex; flex-direction:column; overflow:hidden; }
.splash::before{ content:""; position:absolute; inset:0; background-image:
  linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:46px 46px; mask:radial-gradient(circle at 50% 40%,#000,transparent 75%); opacity:.6; }
.splash-nav{ position:relative; display:flex; align-items:center; justify-content:space-between; padding:22px 34px; z-index:2; }
.splash-body{ position:relative; z-index:2; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px 24px 50px; }
.splash-badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:30px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); font-size:var(--fs-sm); font-weight:var(--fw-medium); color:#cdd3f0; margin-bottom:26px; backdrop-filter:blur(8px); }
.splash h1{ font-family:var(--font-display); font-weight:var(--fw-medium); font-size:clamp(38px,7vw,82px); line-height:1.02; letter-spacing:-.03em; max-width:14ch; color:#fff; }
.splash h1 .gold{ background:linear-gradient(120deg,var(--gold-300),var(--gold-500)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.splash .lede{ font-size:clamp(15px,2vw,19px); color:#aeb6dd; max-width:62ch; margin-top:22px; line-height:1.6; }
.splash-cta{ display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; justify-content:center; }
.splash-stats{ display:flex; gap:34px; margin-top:54px; flex-wrap:wrap; justify-content:center; }
.splash-stat .v{ font-family:var(--font-display); font-size:var(--fs-3xl); font-weight:var(--fw-semibold); color:#fff; }
.splash-stat .l{ font-size:var(--fs-sm); color:#8e96c4; margin-top:2px; }
.brandmark{ display:inline-flex; align-items:center; gap:11px; font-weight:var(--fw-bold); font-size:var(--fs-lg); letter-spacing:-.01em; }
.brandmark .logo{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:linear-gradient(145deg,var(--brand-500),var(--brand-700)); box-shadow:var(--shadow-gold); position:relative; }
.brandmark .logo svg{ width:22px; height:22px; color:var(--gold-400); }
.brandmark .sub{ font-weight:var(--fw-medium); color:var(--ink-4); font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; }

/* ===================== PORTAL LAUNCHER ===================== */
.launcher{ min-height:100vh; background:
  radial-gradient(900px 500px at 100% 0%, rgba(75,80,230,.1), transparent 55%),
  var(--bg); padding:0 0 60px; }
.launcher-hd{ background:linear-gradient(160deg,#0b1030,#11163a); color:#fff; padding:34px 0 90px; position:relative; overflow:hidden; }
.launcher-hd::after{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:40px 40px; mask:radial-gradient(circle at 70% 30%,#000,transparent 70%); }
.portal-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:18px; margin-top:-64px; position:relative; z-index:2; }
.portal-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow); cursor:pointer; transition:transform var(--speed),box-shadow var(--speed),border-color var(--speed); position:relative; overflow:hidden; }
.portal-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--brand-300); }
.portal-card .p-ic{ width:50px;height:50px;border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:#fff; }
.portal-card h3{ font-size:var(--fs-lg); font-family:var(--font-display); }
.portal-card .p-arrow{ position:absolute; top:22px; right:22px; color:var(--ink-4); transition:transform var(--speed),color var(--speed); }
.portal-card:hover .p-arrow{ transform:translate(3px,-3px); color:var(--brand-accent); }
.portal-card .p-feat{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }

/* ===================== APP LAYOUT ===================== */
.shell{ display:flex; min-height:100vh; }
/* opaque base so the translucent .nav-item.active fill composites over the navy
   rail rather than the page canvas (active label measured 1.28:1). No visual change. */
.sidebar{ width:var(--sidebar-w); flex:none; background-color:var(--brand-ink-2); background-image:linear-gradient(180deg,var(--brand-ink),var(--brand-ink-2)); color:#cdd3ee; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; transition:width var(--speed) var(--ease); z-index:50; }
.sidebar.collapsed{ width:var(--sidebar-w-collapsed); }
.sb-hd{ height:var(--topbar-h); display:flex; align-items:center; gap:11px; padding:0 16px; border-bottom:1px solid rgba(255,255,255,.07); flex:none; }
.sb-hd .logo{ width:34px;height:34px;border-radius:10px;background:linear-gradient(145deg,var(--brand-500),var(--brand-700)); display:flex; align-items:center; justify-content:center; flex:none; box-shadow:0 4px 14px -4px rgba(0,0,0,.5); }
.sb-hd .logo svg{ width:20px;height:20px;color:var(--gold-400); }
.sb-hd .nm{ font-weight:var(--fw-bold); font-size:var(--fs-md); color:#fff; letter-spacing:-.01em; }
.sb-hd .nm{ min-width:0; }
.sb-hd .nm small{ display:block; font-size:var(--fs-2xs); font-weight:var(--fw-medium); letter-spacing:.14em; color:#8790c1; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:188px; }  /* was #7b84b5 — 4.44 on the rail; one line, never wraps under the wordmark */
.sidebar.collapsed .sb-hd .nm,.sidebar.collapsed .nav-txt,.sidebar.collapsed .nav-group-lbl,.sidebar.collapsed .sb-ft .u-meta,.sidebar.collapsed .nav-badge{ display:none; }
.sidebar.collapsed .sb-hd{ justify-content:center; padding:0; }

/* the nav list fades out under the user footer instead of being cut mid-glyph */
.sb-scroll{ flex:1; overflow-y:auto; padding:12px 12px 26px; scrollbar-width:thin; mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent); -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent); }
.sb-scroll::-webkit-scrollbar{ width:6px; }
.sb-scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border:0; }
.nav-group-lbl{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.1em; color:var(--chrome-muted); font-weight:var(--fw-bold); padding:14px 12px 6px; }  /* was #6b74a6 — 3.57 on the #161f42 rail */
.nav-item{ display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:9px; color:#aab2d8; font-weight:var(--fw-medium); font-size:var(--fs-base); cursor:pointer; transition:all var(--speed); margin-bottom:1px; position:relative; }
.nav-item:hover{ background:rgba(255,255,255,.06); color:#fff; }
.nav-item.active{ background:linear-gradient(90deg,rgba(75,80,230,.32),rgba(75,80,230,.12)); color:#fff; }
.nav-item.active::before{ content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; border-radius:3px; background:var(--gold-400); }
.nav-item .ic{ width:18px; height:18px; flex:none; }
.nav-item .nav-badge{ margin-left:auto; background:var(--gold-500); color:#2a2008; font-size:var(--fs-2xs); font-weight:var(--fw-bold); height:18px; min-width:18px; padding:0 5px; border-radius:9px; display:flex; align-items:center; justify-content:center; }
.nav-item .nav-badge.brand{ background:var(--brand-500); color:#fff; }
.sidebar.collapsed .nav-item{ justify-content:center; padding:10px; }
.sidebar.collapsed .nav-item.active::before{ left:-12px; }

.sb-ft{ padding:12px; border-top:1px solid rgba(255,255,255,.07); flex:none; }
.u-card{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:10px; cursor:pointer; transition:background var(--speed); }
.u-card:hover{ background:rgba(255,255,255,.06); }
.u-meta .u-nm{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:#fff; }
.u-meta .u-role{ font-size:var(--fs-xs); color:var(--chrome-muted); }

/* main */
.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{ height:var(--topbar-h); flex:none; background:color-mix(in srgb,var(--surface) 86%,transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:14px; padding:0 22px; position:sticky; top:0; z-index:40; }
.topbar .search{ flex:1; max-width:440px; }
.search-box{ display:flex; align-items:center; gap:9px; height:38px; padding:0 13px; background:var(--surface-3); border:1px solid transparent; border-radius:var(--radius-sm); color:var(--ink-3); cursor:text; transition:all var(--speed); }
.search-box:hover{ background:var(--hover); }
.search-box:focus-within{ background:var(--surface); border-color:var(--brand-400); box-shadow:var(--ring); }
.search-box input{ border:0; outline:0; background:transparent; flex:1; color:var(--ink); font-size:var(--fs-base); }
.search-box .kbd{ font-size:var(--fs-2xs); font-weight:var(--fw-bold); padding:2px 6px; background:var(--surface); border:1px solid var(--line); border-radius:5px; color:var(--ink-4); }
.topbar-btn{ width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--ink-2); background:transparent; cursor:pointer; transition:all var(--speed); position:relative; border:1px solid transparent; }
.topbar-btn:hover{ background:var(--hover); color:var(--ink); }
.topbar-btn .ndot{ position:absolute; top:7px; right:8px; width:8px;height:8px;border-radius:50%;background:var(--danger-500); border:2px solid var(--surface); }
.topbar-btn .ncount{ position:absolute; top:3px; right:2px; min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--danger-600); color:#fff; font-size:var(--fs-2xs); font-weight:var(--fw-bold); display:flex; align-items:center; justify-content:center; border:2px solid var(--surface); }  /* was --danger-500 — white measured 4.46 on it */

.content{ flex:1; padding:24px; max-width:var(--maxw); width:100%; margin:0 auto; }
.page-hd{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.page-hd .ttl{ font-size:var(--fs-2xl); font-family:var(--font-display); font-weight:var(--fw-medium); letter-spacing:-.02em; line-height:var(--lh-tight); }
.page-hd .sub{ color:var(--ink-3); font-size:var(--fs-base); margin-top:4px; max-width:68ch; }
/* a segmented control inside a flex row may shrink (it scrolls inside its own box on phones) */
.row > .segment{ min-width:0; max-width:100%; }
/* the topbar wordmark button context */
.topbar-btn .ic,.nav-item .ic{ width:18px;height:18px; }
.breadcrumb{ display:flex; align-items:center; gap:7px; font-size:var(--fs-sm); color:var(--ink-3); margin-bottom:8px; }
.breadcrumb a:hover{ color:var(--brand-text); }

.grid{ display:grid; gap:16px; }
/* A grid track defaults to min-width:auto, so a wide table inside a card pushed a 1.6fr column to 594px on a 375px phone and widened the page by 659px (17 Oct 2026). Tracks may shrink; tables scroll inside their card; phones get one column even when the ratio is inline. */
.grid > *{ min-width:0; }
.table-wrap{ overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; }
.brief{ overflow:hidden; }
/* phones: a content + aside grid (an inline ratio like 1.6fr 1fr) becomes one column; a KPI/tile grid
   (a grid whose children are .kpi tiles, or .g-3/.g-4/.g-5) stays TWO-up so four KPIs sit above the fold
   rather than stacking 600px deep, and goes to one column only under 480px. */
@media (max-width:860px){ .grid[style*="grid-template-columns"]:not(:has(> .kpi)):not(.kpis){ grid-template-columns:1fr !important; } }
.g-2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .g-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g-4{ grid-template-columns:repeat(4,minmax(0,1fr)); } .g-5{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.g-auto{ grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.span-2{ grid-column:span 2; } .span-3{ grid-column:span 3; }

.toolbar{ display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.toolbar .grow{ flex:1; }

/* filter bar */
.filterbar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* ===================== KANBAN ===================== */
.kanban{ display:flex; gap:14px; overflow-x:auto; padding-bottom:8px; align-items:flex-start; }
.kan-col{ flex:none; width:288px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); display:flex; flex-direction:column; max-height:calc(100vh - 220px); }
.kan-col-hd{ padding:12px 14px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--surface-2); border-radius:var(--radius) var(--radius) 0 0; z-index:1; }
.kan-col-hd .cnt{ margin-left:auto; font-size:var(--fs-xs); font-weight:var(--fw-bold); color:var(--ink-3); background:var(--surface-3); border-radius:20px; padding:1px 8px; }
.kan-body{ padding:10px; overflow-y:auto; display:flex; flex-direction:column; gap:9px; min-height:60px; flex:1; }
.kan-body.drag-over{ background:var(--brand-50); }
.kan-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px; cursor:grab; box-shadow:var(--shadow-xs); transition:box-shadow var(--speed),transform var(--speed); }
.kan-card:hover{ box-shadow:var(--shadow-sm); }
.kan-card.dragging{ opacity:.5; transform:rotate(1.5deg); }
.kan-card .k-title{ font-weight:var(--fw-semibold); font-size:var(--fs-sm); margin-bottom:7px; }

/* ===================== COPILOT ===================== */
.copilot-fab{ position:fixed; bottom:24px; right:24px; z-index:6500; width:58px;height:58px;border-radius:50%; background:linear-gradient(145deg,var(--violet-500),var(--brand-600)); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 34px -8px rgba(124,77,219,.6); cursor:pointer; transition:transform var(--speed); border:0; }
.copilot-fab:hover{ transform:scale(1.06); }
.copilot-fab svg{ width:26px;height:26px; }
/* the ping says "I am here" three times after a view mounts, then rests; it never loops for ever */
.copilot-fab .ping{ position:absolute; inset:0; border-radius:50%; border:2px solid var(--violet-500); animation:ping 2.4s ease-out 3 both; pointer-events:none; }
html[data-motion="reduced"] .copilot-fab .ping{ animation:none; display:none; }
@keyframes ping{ 0%{transform:scale(1);opacity:.6} 100%{transform:scale(1.5);opacity:0} }

.copilot-panel{ position:fixed; bottom:0; right:0; top:0; width:min(440px,100vw); background:var(--surface); border-left:1px solid var(--line); box-shadow:var(--shadow-lg); z-index:6600; display:flex; flex-direction:column; animation:drawerIn .3s var(--ease); }
.copilot-hd{ padding:14px 16px; background:linear-gradient(135deg,var(--brand-ink),var(--brand-ink-3)); color:#fff; display:flex; align-items:center; gap:11px; }
.copilot-hd .ai-orb{ width:36px;height:36px;border-radius:11px;background:linear-gradient(145deg,var(--violet-500),var(--brand-500)); display:flex; align-items:center; justify-content:center; box-shadow:0 0 18px rgba(124,77,219,.5); }
.copilot-msgs{ flex:1; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:14px; background:var(--surface-2); }
.cmsg{ display:flex; gap:10px; max-width:92%; animation:cardIn .3s var(--ease); }
.cmsg.user{ align-self:flex-end; flex-direction:row-reverse; }
.cmsg .bubble{ padding:11px 13px; border-radius:14px; font-size:var(--fs-sm); line-height:1.55; }
.cmsg.ai .bubble{ background:var(--surface); border:1px solid var(--line); border-top-left-radius:4px; }
.cmsg.user .bubble{ background:var(--brand-500); color:#fff; border-top-right-radius:4px; }
.cmsg .ava{ width:30px;height:30px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center; }
.cmsg.ai .ava{ background:linear-gradient(145deg,var(--violet-500),var(--brand-500)); color:#fff; }
.agent-plan{ background:var(--surface-3); border:1px solid var(--line); border-radius:10px; padding:11px; margin-top:8px; }
.agent-step{ display:flex; align-items:center; gap:9px; padding:5px 0; font-size:var(--fs-sm); }
.agent-step .a-ic{ width:22px;height:22px;border-radius:7px;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:none; }
.agent-step.run .a-ic{ border-color:var(--violet-500); color:var(--violet-500); }
.agent-step.done .a-ic{ background:var(--success-500); border-color:var(--success-500); color:#fff; }
.citation{ display:inline-flex; align-items:center; gap:5px; padding:2px 8px; background:var(--brand-50); border:1px solid var(--brand-100); border-radius:6px; font-size:var(--fs-xs); font-weight:var(--fw-semibold); color:var(--brand-text-strong); margin:2px 3px 2px 0; cursor:pointer; }
.stream-caret{ display:inline-block; width:7px; color:var(--violet-500); animation:caret 1s steps(2) infinite; font-weight:var(--fw-regular); }
@keyframes caret{ 50%{ opacity:0 } }
.copilot-input{ padding:12px 14px; border-top:1px solid var(--line); }
.typing{ display:inline-flex; gap:3px; padding:4px 0; }
.typing i{ width:7px;height:7px;border-radius:50%;background:var(--ink-4); animation:typing 1.2s infinite; }
.typing i:nth-child(2){ animation-delay:.2s } .typing i:nth-child(3){ animation-delay:.4s }
@keyframes typing{ 0%,60%,100%{ transform:translateY(0); opacity:.4 } 30%{ transform:translateY(-5px); opacity:1 } }

/* ===================== COMMAND PALETTE ===================== */
.cmdk-scrim{ position:fixed; inset:0; background:rgba(12,16,32,.5); backdrop-filter:blur(4px); z-index:8500; display:flex; align-items:flex-start; justify-content:center; padding-top:14vh; opacity:0; animation:fade .15s forwards; }
.cmdk{ width:min(620px,calc(100vw - 32px)); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden; animation:modalIn .2s var(--ease); }
.cmdk-input{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line); }
.cmdk-input input{ border:0; outline:0; background:transparent; flex:1; font-size:var(--fs-md); color:var(--ink); }
.cmdk-results{ max-height:50vh; overflow-y:auto; padding:8px; }
.cmdk-item{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:9px; cursor:pointer; }
.cmdk-item.sel{ background:var(--brand-50); }
.cmdk-item .ci-ic{ width:32px;height:32px;border-radius:8px;background:var(--surface-3);display:flex;align-items:center;justify-content:center;color:var(--ink-2);flex:none; }
.cmdk-item.sel .ci-ic{ background:var(--brand-500); color:#fff; }

/* ===================== NOTIFICATIONS ===================== */
.notif-item{ display:flex; gap:12px; padding:13px 14px; border-bottom:1px solid var(--line-2); cursor:pointer; transition:background var(--speed); }
.notif-item:hover{ background:var(--hover); }
.notif-item.unread{ background:var(--brand-50); }
.notif-item.unread:hover{ background:var(--brand-100); }
.notif-ic{ width:36px;height:36px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center; }
.notif-act{ display:flex; gap:7px; margin-top:9px; }

/* ===================== ORGANOGRAM ===================== */
.org-tree{ display:flex; flex-direction:column; align-items:center; padding:20px; overflow-x:auto; }
.org-node{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:12px 16px; box-shadow:var(--shadow-sm); display:flex; align-items:center; gap:11px; min-width:200px; position:relative; cursor:pointer; transition:all var(--speed); }
.org-node:hover{ border-color:var(--brand-400); box-shadow:var(--shadow); }
.org-node.root{ background:linear-gradient(135deg,var(--brand-ink),var(--brand-ink-3)); color:#fff; border-color:transparent; }
.org-children{ display:flex; gap:20px; position:relative; padding-top:28px; }
.org-children::before{ content:""; position:absolute; top:0; left:50%; height:14px; width:2px; background:var(--line); }
.org-branch{ display:flex; flex-direction:column; align-items:center; position:relative; padding-top:14px; }
.org-branch::before{ content:""; position:absolute; top:0; left:50%; height:14px; width:2px; background:var(--line); }
.org-connector{ position:absolute; top:14px; height:2px; background:var(--line); }

/* ===================== CALENDAR ===================== */
/* minmax(0,1fr): a 1fr track is min-content wide, so the nowrap event chips widened the columns past the
   card and overflow:hidden cut Friday and Saturday off at 1366 (and the page scrolled to 1059px on a phone).
   The columns now share the width; chips truncate inside their cell. */
.cal-grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; max-width:100%; }
.cal-dow{ background:var(--surface-2); padding:9px 4px; text-align:center; font-size:var(--fs-xs); font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); min-width:0; overflow:hidden; }
.cal-day{ background:var(--surface); min-height:104px; padding:7px 8px; cursor:pointer; transition:background var(--speed); position:relative; min-width:0; overflow:hidden; }
.cal-day:hover{ background:var(--hover); }
.cal-day.other{ background:var(--surface-2); color:var(--ink-4); }
.cal-day.today .cal-dnum{ background:var(--brand-500); color:#fff; }
.cal-dnum{ display:inline-flex; align-items:center; justify-content:center; width:24px;height:24px;border-radius:50%; font-size:var(--fs-sm); font-weight:var(--fw-semibold); margin-bottom:4px; flex:none; }
/* event chips: the wash and the ink come from the TYPE class (both themes defined by the tokens), never
   from an inline light-mode hex — eleven chips measured 2.7–2.9:1 in dark mode before. A custom colour
   keeps its tint inline but reads with var(--ink). */
.cal-ev{ font-size:var(--fs-2xs); padding:2px 6px; border-radius:5px; margin-bottom:3px; font-weight:var(--fw-medium); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; border-left:2.5px solid var(--ink-4); min-width:0; max-width:100%; background:var(--surface-3); color:var(--ink); }
.cal-ev .ic{ width:9px;height:9px; vertical-align:-1px; }
.cal-ev.ev-hearing{ background:var(--danger-50); color:var(--danger-text); border-left-color:var(--danger-500); }
.cal-ev.ev-meeting{ background:var(--brand-50); color:var(--brand-text); border-left-color:var(--brand-500); }
.cal-ev.ev-deadline{ background:var(--warn-50); color:var(--warn-text); border-left-color:var(--warn-500); }
.cal-ev.ev-filing,.cal-ev.ev-cle{ background:var(--success-50); color:var(--success-text); border-left-color:var(--success-500); }
.cal-ev.ev-internal{ background:var(--teal-50); color:var(--teal-text); border-left-color:var(--teal-500); }
.cal-ev.ev-custom{ color:var(--ink); }
/* calendar header: Find a time + New event stay out; calculator, import and export live in the ⋯ menu */
.cal2-more{ display:inline-block; }
.cal2-more .dd-menu{ min-width:220px; }
.cal2-more .only-phone{ display:none; }
@media (max-width:860px){
  .cal2-tools{ display:none !important; }
  .cal2-more .only-phone{ display:flex; }
  /* the week/day time grid scrolls sideways in its own box; the page does not */
  .cal2-tg{ overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; }
  .cal2-tg-hd,.cal2-tg-bd{ min-width:620px; }
}
@media (max-width:560px){
  /* the month grid fits 390px: cells shrink and each chip becomes a 5px bar in its type colour */
  .cal-day{ min-height:62px; padding:4px 3px; }
  .cal-dnum{ width:20px;height:20px; font-size:var(--fs-xs); margin-bottom:2px; }
  .cal-ev{ font-size:0; height:5px; padding:0; margin-bottom:2px; border-left:0; border-radius:3px; background:currentColor !important; }
  .cal-ev .ic{ display:none; }
  .cal2-holtag span,.cal-day .muted.tiny{ display:none; }
  .cal2-holtag{ padding:1px 3px; }
}

/* ===================== DOC EDITOR ===================== */
.doc-paper{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:48px 56px; max-width:760px; margin:0 auto; font-family:var(--font-display); font-size:var(--fs-base); line-height:1.85; color:var(--ink); }
.doc-paper h2{ font-family:var(--font-display); text-align:center; font-size:var(--fs-lg); margin-bottom:4px; }
.doc-field{ background:var(--brand-50); border-bottom:1.5px dashed var(--brand-300); padding:0 4px; border-radius:3px; cursor:pointer; font-weight:var(--fw-semibold); color:var(--brand-text-strong); }

/* ===================== MOBILE DEVICE FRAME ===================== */
.device-stage{ min-height:calc(100vh - var(--topbar-h)); display:flex; align-items:center; justify-content:center; gap:48px; padding:40px 20px; background:
  radial-gradient(700px 400px at 50% 0%, var(--brand-50), transparent 60%); flex-wrap:wrap; }
.phone{ width:376px; height:760px; background:#0a0e1c; border-radius:46px; padding:13px; box-shadow:0 50px 90px -30px rgba(16,25,53,.5), 0 0 0 2px rgba(0,0,0,.06); position:relative; flex:none; }
.phone-screen{ width:100%; height:100%; background:var(--bg); border-radius:34px; overflow:hidden; position:relative; display:flex; flex-direction:column; }
.phone-notch{ position:absolute; top:13px; left:50%; transform:translateX(-50%); width:128px; height:30px; background:#0a0e1c; border-radius:0 0 18px 18px; z-index:30; }
.phone-statusbar{ height:42px; display:flex; align-items:flex-end; justify-content:space-between; padding:0 24px 6px; font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--ink); flex:none; }
.m-screen{ flex:1; overflow-y:auto; }
.m-tabbar{ height:62px; flex:none; background:var(--surface); border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-around; padding-bottom:6px; }
.m-tab{ display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--ink-4); font-size:var(--fs-2xs); font-weight:var(--fw-semibold); cursor:pointer; flex:1; }
.m-tab.active{ color:var(--brand-accent); }
.m-tab .ic{ width:21px;height:21px; }
.m-topbar{ padding:14px 16px 10px; display:flex; align-items:center; justify-content:space-between; }
.m-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px; margin:0 14px 12px; box-shadow:var(--shadow-xs); }
.m-list-item{ display:flex; align-items:center; gap:11px; padding:12px 16px; border-bottom:1px solid var(--line-2); }
.device-controls{ max-width:300px; }

/* ===================== KOREVRASIGN (e-signature ceremony) ===================== */
.sign-stage{ position:fixed; inset:0; z-index:9100; background:rgba(10,14,28,.72); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:18px; animation:fade .2s forwards; }
.sign-shell{ width:min(1060px,100%); height:min(720px,100%); background:var(--bg); border-radius:18px; overflow:hidden; display:grid; grid-template-columns:1fr 380px; box-shadow:var(--shadow-lg); animation:modalIn .3s var(--ease); }
.sign-doc{ overflow-y:auto; padding:26px; background:var(--bg-tint); }
.sign-rail{ background:var(--surface); border-left:1px solid var(--line); display:flex; flex-direction:column; overflow-y:auto; }
.sign-rail-hd{ padding:16px 18px; background:linear-gradient(135deg,var(--brand-ink),var(--brand-ink-3)); color:#fff; display:flex; align-items:center; gap:10px; }
.sign-body{ padding:18px; flex:1; }
.sign-pad-wrap{ border:1.5px dashed var(--line); border-radius:12px; background:var(--surface-2); position:relative; }
.sign-pad-wrap canvas{ width:100%; height:140px; display:block; touch-action:none; cursor:crosshair; }
.sign-pad-line{ position:absolute; left:18px; right:18px; bottom:30px; border-bottom:1.5px solid var(--ink-4); pointer-events:none; }
.sign-pad-x{ position:absolute; left:18px; bottom:34px; color:var(--ink-4); font-size:var(--fs-md); pointer-events:none; }
.sig-typed{ font-family:'Segoe Script','Brush Script MT',var(--font-display),cursive; font-size:var(--fs-3xl); color:#16204a; }
.sig-stamp{ display:inline-block; padding:6px 14px 4px; border:1.5px solid var(--brand-300); border-radius:8px; background:var(--brand-50); }
.sig-stamp .sig-typed{ font-size:var(--fs-xl); }
.sig-stamp .sig-meta{ font-size:var(--fs-2xs); color:var(--ink-3); font-family:var(--font-mono); }
.sign-party{ display:flex; gap:10px; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:11px; margin-bottom:8px; background:var(--surface); }
.sign-party.current{ border-color:var(--brand-400); box-shadow:var(--ring); }
.sign-cert{ border:1.5px solid var(--gold-500); border-radius:12px; padding:14px; background:linear-gradient(160deg,#fffdf5,#fbf2da); }
html[data-theme="dark"] .sign-cert{ background:#241d0c; }
@media (max-width:860px){ .sign-shell{ grid-template-columns:1fr; height:100%; } .sign-doc{ display:none; } }
/* UX-05 (sixth pass): on a phone "Read the document" shows the document above the signing panel. It was injected by sign.js
   (#signStageCss) at run time; UX request 10 moved it here. */
.sign-doc-toggle{ display:none; }
@media (max-width:860px){
  .sign-doc-toggle{ display:flex; }
  .sign-shell.show-doc{ grid-template-rows:minmax(0,55vh) minmax(0,1fr); }
  .sign-shell.show-doc .sign-doc{ display:block; padding:12px; }
  .sign-shell.show-doc .sign-doc .doc-paper{ padding:20px 18px!important; }
}

/* ===================== DELAW CARE (support) ===================== */
.care-tabs{ display:flex; gap:4px; padding:0 4px; }
.care-tab{ flex:1; border:0; background:transparent; color:var(--ink-3); padding:9px 4px; font-weight:var(--fw-semibold); font-size:var(--fs-sm); border-radius:9px; display:flex; flex-direction:column; align-items:center; gap:4px; }
.care-tab.active{ background:var(--brand-50); color:var(--brand-text-strong); }
.care-chat{ display:flex; flex-direction:column; gap:9px; padding:14px; background:var(--surface-2); border-radius:12px; min-height:260px; max-height:340px; overflow-y:auto; }
.tk-card{ border:1px solid var(--line); border-radius:11px; padding:12px; margin-bottom:9px; background:var(--surface); }

/* ===================== REPORT STUDIO ===================== */
.rpt-page{ background:#fff; color:#101729; width:100%; max-width:780px; margin:0 auto 18px; padding:42px 48px; border-radius:6px; box-shadow:var(--shadow); min-height:540px; position:relative; }
html[data-theme="dark"] .rpt-page{ box-shadow:0 10px 40px rgba(0,0,0,.5); }
.rpt-page .rpt-band{ height:6px; border-radius:3px; background:linear-gradient(90deg,#119a9a,#c9a24b); margin-bottom:22px; }
.rpt-hd{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; }
.rpt-foot{ position:absolute; bottom:16px; left:48px; right:48px; display:flex; justify-content:space-between; font-size:var(--fs-2xs); color:#8a93ab; border-top:1px solid #e8eaf1; padding-top:8px; }
.rpt-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:14px 0; }
.rpt-kpi{ border:1px solid #e8eaf1; border-radius:10px; padding:10px 12px; }
.rpt-kpi .v{ font-family:var(--font-display); font-size:var(--fs-xl); font-weight:var(--fw-semibold); }
.rpt-kpi .l{ font-size:var(--fs-2xs); color:#69718c; }
.rpt-tbl{ width:100%; border-collapse:collapse; font-size:var(--fs-xs); margin:10px 0; }
.rpt-tbl th{ text-align:left; padding:7px 9px; background:#f2f4f9; font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.05em; color:#5b6480; }
.rpt-tbl td{ padding:7px 9px; border-bottom:1px solid #eef0f5; }
@media print{ .rpt-page{ box-shadow:none; margin:0; page-break-after:always; } #ihView > *:not(#rptOut){ display:none; } .page-hd{ display:none !important; } }

/* ===================== DOCUMENT EDITOR ===================== */
.ed-wrap{ display:grid; grid-template-columns:1fr 320px; gap:16px; align-items:start; }
.ed-toolbar{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; padding:8px 10px; background:var(--surface); border:1px solid var(--line); border-radius:12px 12px 0 0; position:sticky; top:calc(var(--topbar-h) + 8px); z-index:10; }
.ed-btn{ width:32px; height:32px; border:0; background:transparent; border-radius:8px; color:var(--ink-2); display:flex; align-items:center; justify-content:center; font-weight:var(--fw-bold); font-size:var(--fs-sm); cursor:pointer; }
.ed-btn:hover{ background:var(--hover); }
.ed-btn.on{ background:var(--brand-50); color:var(--brand-text-strong); }
.ed-sep{ width:1px; height:20px; background:var(--line); margin:0 4px; }
.ed-paper{ background:#fff; color:#14182b; border:1px solid var(--line); border-top:0; border-radius:0 0 12px 12px; padding:0 0 40px; min-height:560px; box-shadow:var(--shadow-sm); }
.ed-body{ padding:30px 52px; font-family:var(--font-display); font-size:var(--fs-base); line-height:1.85; outline:none; min-height:420px; }
.ed-body h3{ font-family:var(--font-display); font-size:var(--fs-md); margin:16px 0 6px; }
.ed-body p{ margin:0 0 10px; }
.ed-body .doc-field{ background:var(--brand-50); }
html[data-theme="dark"] .ed-paper{ background:#fff; color:#14182b; }
.ed-letterhead{ padding:26px 52px 14px; }
.lh-band{ height:5px; border-radius:3px; margin-top:12px; }
.lh-logo{ width:44px; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:var(--fw-bold); font-size:var(--fs-md); letter-spacing:.02em; flex:none; overflow:hidden; }
.lh-logo img{ width:100%; height:100%; object-fit:cover; }
ins.dl-ins{ background:var(--success-50); color:#0b6e48; text-decoration:none; border-bottom:1.5px solid #15a06a; }
del.dl-del{ background:var(--danger-50); color:var(--danger-text); text-decoration:line-through; }
.chg-item{ border:1px solid var(--line); border-radius:10px; padding:10px 11px; margin-bottom:8px; background:var(--surface); }
.cmt-quote{ border-left:3px solid var(--gold-500); padding:2px 8px; background:var(--surface-3); border-radius:0 6px 6px 0; font-style:italic; }

/* ===================== BRAND STUDIO ===================== */
.swatch{ width:34px; height:34px; border-radius:10px; cursor:pointer; border:2.5px solid transparent; transition:transform var(--speed); }
.swatch:hover{ transform:scale(1.08); }
.swatch.on{ border-color:var(--ink); box-shadow:var(--ring); }
.lh-preview{ background:#fff; color:#14182b; border-radius:10px; box-shadow:var(--shadow); padding:0 0 18px; overflow:hidden; }
.sig-vault{ border:1.5px dashed var(--line); border-radius:12px; padding:16px; text-align:center; background:var(--surface-2); }
.sig-vault img{ max-height:64px; margin:0 auto; }

/* mobile firm threads */
.m-unread{ min-width:18px; height:18px; border-radius:9px; background:var(--brand-500); color:#fff; font-size:var(--fs-2xs); font-weight:var(--fw-bold); display:flex; align-items:center; justify-content:center; padding:0 5px; }

/* ===================== ONBOARDING ===================== */
.ob-step{ display:flex; gap:12px; align-items:center; padding:13px 14px; border:1px solid var(--line); border-radius:12px; margin-bottom:9px; background:var(--surface); transition:all var(--speed); }
.ob-step.done{ opacity:.72; background:var(--surface-2); }
.ob-num{ width:30px;height:30px;border-radius:50%;background:var(--brand-50);color:var(--brand-text-strong);display:flex;align-items:center;justify-content:center;font-weight:var(--fw-bold);font-size:var(--fs-sm);flex:none; }
.ob-step.done .ob-num{ background:var(--success-500); color:#fff; }

/* mobile polish */
.m-tab{ position:relative; padding-top:5px; }
.m-tab.active::before{ content:""; position:absolute; top:-1px; left:50%; transform:translateX(-50%); width:34px; height:3px; border-radius:0 0 4px 4px; background:var(--brand-500); }
.m-hero{ margin:12px 14px; border-radius:18px; padding:16px; background:linear-gradient(135deg,var(--brand-ink),var(--brand-ink-3)); color:#fff; position:relative; overflow:hidden; }
.m-hero::after{ content:""; position:absolute; right:-30px; top:-30px; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle,rgba(201,162,75,.25),transparent 70%); }

/* In-House Counsel sidebar (teal) */
.ih-side{ background-color:#0e3a4a !important; background-image:linear-gradient(180deg,#0b2733,#0e3a4a) !important; }
.ih-side .sb-hd .logo{ background:linear-gradient(145deg,#119a9a,#0b5757) !important; box-shadow:0 4px 14px -4px rgba(0,0,0,.5); }
.ih-side .nav-item.active{ background:linear-gradient(90deg,rgba(17,154,154,.36),rgba(17,154,154,.1)) !important; }
.ih-side .nav-item.active::before{ background:var(--gold-400); }
.ih-side .nav-item:hover{ background:rgba(255,255,255,.06); }

/* mobile app chrome */
/* opaque base under the glow layer — see the .splash note. */
.mob-stage{ min-height:100vh; background-color:#0a0e1c; background-image:radial-gradient(800px 500px at 50% -10%, rgba(75,80,230,.22), transparent 60%), linear-gradient(160deg,#0b1030,#0a0e1c 70%); }
.m-appbar{ position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--surface) 92%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); padding:12px 14px; display:flex; align-items:center; gap:10px; }
.m-appbar .m-back{ width:30px;height:30px;border-radius:9px;border:0;background:var(--surface-3);color:var(--ink-2);display:flex;align-items:center;justify-content:center;flex:none; }
.m-iconbtn{ width:34px;height:34px;border-radius:10px;border:0;background:transparent;color:var(--ink-2);display:flex;align-items:center;justify-content:center;flex:none;position:relative; }
.m-section{ padding:4px 16px 2px; display:flex; align-items:center; justify-content:space-between; }
.m-section .ttl{ font-size:var(--fs-sm); font-weight:var(--fw-bold); }
.m-section a{ font-size:var(--fs-xs); }
.m-hscroll{ display:flex; gap:10px; overflow-x:auto; padding:6px 16px 12px; scrollbar-width:none; }
.m-hscroll::-webkit-scrollbar{ display:none; }
.m-mcard{ flex:none; width:210px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:13px; box-shadow:var(--shadow-xs); }
.m-qa{ display:flex; gap:8px; padding:0 16px 12px; }
.m-qa button{ flex:1; flex-direction:column; gap:5px; height:auto; padding:11px 4px; font-size:var(--fs-2xs); border-radius:12px; }
.m-fab{ position:absolute; bottom:78px; right:16px; width:50px;height:50px;border-radius:16px;border:0; background:linear-gradient(145deg,var(--brand-500),var(--brand-700)); color:#fff; box-shadow:0 10px 24px -6px rgba(75,80,230,.55); display:flex;align-items:center;justify-content:center; z-index:15; }
.m-chip{ display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 11px; border-radius:18px; background:var(--surface-3); border:1px solid var(--line); font-size:var(--fs-xs); font-weight:var(--fw-medium); color:var(--ink-2); white-space:nowrap; }
.m-chip.on{ background:var(--brand-500); color:#fff; border-color:var(--brand-600); }
.m-seg{ display:inline-flex; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:10px; padding:3px; gap:2px; }
.m-seg button{ border:0; background:transparent; color:#aeb6dd; height:28px; padding:0 12px; border-radius:7px; font-weight:var(--fw-medium); font-size:var(--fs-sm); }
.m-seg button.on{ background:var(--gold-500); color:#2a2008; }
.m-bubble{ max-width:82%; padding:9px 12px; border-radius:14px; font-size:var(--fs-sm); line-height:1.5; }
.m-bubble.ai{ background:var(--surface); border:1px solid var(--line); border-top-left-radius:4px; align-self:flex-start; }
.m-bubble.me{ background:var(--brand-500); color:#fff; border-top-right-radius:4px; align-self:flex-end; }
.phone-statusbar{ position:relative; z-index:21; }

/* USSD / WhatsApp sim */
.ussd-screen{ background:#0a0e0a; color:#d6ffd6; font-family:var(--font-mono); border-radius:14px; padding:18px; font-size:var(--fs-sm); line-height:1.7; min-height:280px; border:1px solid #1c3a1c; }
.wa-screen{ background:#e5ddd5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='%23d9d0c5' fill-opacity='.4'%3E%3Ccircle cx='8' cy='8' r='1.5'/%3E%3C/g%3E%3C/svg%3E"); border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:8px; min-height:300px; }
html[data-theme="dark"] .wa-screen{ background:#0b141a; }
.wa-msg{ max-width:80%; padding:7px 11px; border-radius:9px; font-size:var(--fs-sm); box-shadow:var(--shadow-xs); position:relative; }
.wa-msg.in{ background:var(--surface); align-self:flex-start; }
.wa-msg.out{ background:#d9fdd3; align-self:flex-end; color:#0c1f17; }
html[data-theme="dark"] .wa-msg.out{ background:#005c4b; color:#e9edef; }
html[data-theme="dark"] .wa-msg.in{ background:#202c33; color:#e9edef; }

/* ===================== HEAT / MATRIX ===================== */
.heat-cell{ aspect-ratio:1; border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:var(--fs-2xs); font-weight:var(--fw-semibold); color:#fff; }

/* mini sparkline / bars */
.minibars{ display:flex; align-items:flex-end; gap:3px; height:42px; }
.minibars i{ flex:1; background:var(--brand-300); border-radius:3px 3px 0 0; min-height:3px; transition:height .5s var(--ease); }
.minibars i.hl{ background:var(--brand-500); }

/* ===================== RESPONSIVE ===================== */
.menu-toggle{ display:none; }
@media (max-width:1024px){
  .g-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } .g-5{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .g-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .span-2{ grid-column:span 1; }
}
@media (max-width:860px){
  .sidebar{ position:fixed; left:0; top:0; transform:translateX(-100%); transition:transform var(--speed); box-shadow:var(--shadow-lg); }
  .sidebar.open{ transform:none; }
  .menu-toggle{ display:flex; }
  .sb-backdrop{ position:fixed; inset:0; background:rgba(12,16,32,.5); z-index:49; }
  /* the phone topbar keeps four things: menu, search (as an icon), bell, New. Collapse-rail, connectivity,
     theme, help and home go — theme and help live in Settings and the ? sheet, home in the sidebar. */
  .topbar{ padding:0 12px; gap:8px; }
  .topbar .search{ display:block; flex:none; max-width:none; }
  .topbar .search-box{ width:38px; height:38px; padding:0; justify-content:center; background:transparent; border-color:transparent; color:var(--ink-2); border-radius:10px; }
  .topbar .search-box input,.topbar .search-box .kbd{ display:none; }
  .topbar .search-box:hover{ background:var(--hover); }
  .topbar .topbar-btn[data-action="sidebar:collapse"],.topbar #connBtn,.topbar .topbar-btn[data-action="toggle:theme"],.topbar .topbar-btn[data-action="care:open"],.topbar .topbar-btn[data-nav=""]{ display:none; }
  .topbar .btn{ flex:none; }
  .content{ padding:16px; }
  .g-2{ grid-template-columns:1fr; }
  .g-3,.g-4,.g-5,.grid:has(> .kpi),.kpis,.oc-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .kpi{ padding:12px 14px; }
  .kpi .kpi-ic,.kpi-ic{ width:32px;height:32px; margin-bottom:8px; }
  .kpi .kpi-val,.kpi-val,.card.oc-kpi .oc-val{ font-size:var(--fs-xl); }
  .page-hd .ttl{ font-size:var(--fs-xl); }
  .phone{ transform:scale(.88); }
}
/* p13: record cards (Matters → Cards, a phone's default) are one to a row on a phone: two-up, an imported matter's
   title, client and next date wrapped to six lines in 166 px */
@media (max-width:640px){ .grid.cards-1up{ grid-template-columns:1fr; } }
@media (max-width:359px){
  .g-3,.g-4,.g-5,.grid:has(> .kpi),.kpis,.oc-kpis{ grid-template-columns:1fr; }  /* a 390px phone keeps KPI tiles two-up; only the narrowest phones stack them */
}
@media (max-width:560px){
  .splash-stats{ gap:20px; } .splash-cta{ width:100%; }
  .modal,.modal.wide,.modal.xwide{ width:calc(100vw - 20px); }
  .drawer{ width:100vw; }
  .copilot-panel{ width:100vw; }
  .grid-form{ grid-template-columns:1fr; }
}

/* ===================== AUTH / LOGIN ===================== */
.auth{ display:flex; min-height:100vh; background:var(--bg); }
/* opaque base under the glow layers — see the .splash note (measured 1.08:1). */
.auth-brand{ width:44%; flex:none; color:#fff; position:relative; overflow:hidden; display:flex; background-color:#0a0e1c;
  background-image:radial-gradient(900px 600px at 20% -10%, rgba(75,80,230,.32), transparent 55%), radial-gradient(700px 500px at 90% 110%, rgba(201,162,75,.16), transparent 55%), linear-gradient(160deg,#0b1030,#0a0e1c 70%); }
.auth-brand::before{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:44px 44px; mask:radial-gradient(circle at 40% 40%,#000,transparent 75%); }
.auth-brand-inner{ position:relative; z-index:2; display:flex; flex-direction:column; padding:48px; width:100%; }
.auth-quote{ margin-top:28px; padding:18px; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); display:flex; gap:12px; color:#cdd3f0; font-size:var(--fs-base); backdrop-filter:blur(6px); }
.auth-quote .tiny{ color:#AAB2DC; opacity:1; }   /* a11y: attribution measured 3.93 on the auth panel -> 5.87 */
.auth-form-wrap{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:36px 24px; }
.auth-form{ width:min(400px,100%); animation:cardIn .4s var(--ease); }
.auth-head{ margin-bottom:22px; }
.auth-head h1,.auth-head h2{ font-size:var(--fs-2xl); font-weight:var(--fw-semibold); margin:0; } .auth-head p{ color:var(--ink-3); margin-top:4px; }
.auth-mfa-ic{ width:54px;height:54px;border-radius:15px;background:var(--brand-50);color:var(--brand-text);display:flex;align-items:center;justify-content:center;margin-bottom:14px; }
.auth-eye{ position:absolute; right:8px; border:0; background:transparent; color:var(--ink-3); width:30px;height:30px;border-radius:7px; cursor:pointer; display:flex;align-items:center;justify-content:center; }
.auth-eye:hover{ background:var(--hover); color:var(--ink); }
.auth-divider{ display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--ink-4); font-size:var(--fs-xs); }
.auth-divider::before,.auth-divider::after{ content:""; flex:1; height:1px; background:var(--line); }
.auth-demo{ margin-top:22px; padding-top:18px; border-top:1px dashed var(--line); }
.auth-foot{ margin-top:26px; text-align:center; }
.otp-row{ display:flex; gap:10px; justify-content:center; }
.otp{ width:46px; height:56px; text-align:center; font-size:var(--fs-xl); font-weight:var(--fw-bold); border:1.5px solid var(--line); border-radius:11px; background:var(--surface); color:var(--ink); transition:all var(--speed); }
.otp:focus{ border-color:var(--brand-400); box-shadow:var(--ring); outline:none; }
@media (max-width:860px){ .auth-brand{ display:none; } }

/* dark-mode legibility for AI citations & document merge-fields */
html[data-theme="dark"] .citation{ color:var(--brand-300); background:rgba(75,80,230,.14); border-color:#2c2f55; }
html[data-theme="dark"] .doc-field{ color:var(--brand-300); background:rgba(75,80,230,.14); border-bottom-color:var(--brand-500); }

/* high-contrast accessibility theme */
/* the high-contrast inks here are LIGHT-theme values (dark theme has its own in theme.css); unscoped
   they overrode the dark theme and measured 1.6–2.3 on navy */
html[data-contrast="high"]:not([data-theme="dark"]){ --ink-3:#3a4255; --ink-4:#4a5468; --line:#9aa3ba; --line-2:#b3bccb; }
html[data-contrast="high"] .btn, html[data-contrast="high"] .badge, html[data-contrast="high"] .card{ border-width:1.5px; }
html[data-contrast="high"] *:focus-visible{ outline:2px solid var(--brand-600); outline-offset:2px; }

/* compact density */
html[data-density="compact"]{ --row-h:38px; }
html[data-density="compact"] .card{ padding:14px; }
html[data-density="compact"] .tbl td, html[data-density="compact"] .tbl th{ padding:8px 12px; }
html[data-density="compact"] .field{ margin-bottom:10px; }
html[data-density="compact"] .nav-item{ padding-top:7px; padding-bottom:7px; }
html[data-density="compact"] .kpi{ padding:12px 14px; }
html[data-density="compact"] .page-hd{ margin-bottom:14px; }
html[data-density="compact"] .page-hd .ttl{ font-size:var(--fs-xl); }
html[data-density="compact"] .kpi .kpi-val,html[data-density="compact"] .card.oc-kpi .oc-val{ font-size:var(--fs-xl); }
html[data-density="compact"] .tbl td .sm.semi,html[data-density="compact"] .tbl td .tname{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px; }

/* Document Intelligence review grid */
.dr-cell{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:7px; }
.dr-cell.ok{ background:color-mix(in srgb, var(--success-500) 16%, transparent); color:var(--success-700); }
.dr-cell.flag{ background:color-mix(in srgb, var(--warn-500) 20%, transparent); color:var(--warn-700, #9a6212); }
.dr-cell.missing{ background:color-mix(in srgb, var(--danger-500) 16%, transparent); color:var(--danger-text); }
.dr-cell:hover{ outline:2px solid var(--brand-300); }

/* guided product tour (coachmarks) */
.tour-spot{ position:fixed; z-index:1401; border-radius:12px; box-shadow:0 0 0 3px var(--brand-400), 0 0 0 9999px rgba(8,12,28,.64); transition:all .26s var(--ease); pointer-events:none; }
.tour-pop{ position:fixed; z-index:1402; width:312px; max-width:calc(100vw - 24px); background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:0 24px 70px -16px rgba(8,12,28,.55); padding:16px 16px 14px; animation:viewIn .22s var(--ease); }
.tour-pop .t-step{ font-size:var(--fs-2xs); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-4); font-weight:var(--fw-bold); }
.tour-pop h4{ margin:4px 0 6px; font-size:var(--fs-md); }
.tour-pop p{ margin:0; color:var(--ink-2); font-size:var(--fs-sm); line-height:1.55; }
.tour-dots{ display:flex; gap:5px; }
.tour-dots i{ width:6px; height:6px; border-radius:50%; background:var(--line-2); }
.tour-dots i.on{ background:var(--brand-500); width:16px; border-radius:3px; }

/* toast undo/action button */
.t-act{ align-self:center; flex:none; margin-left:8px; background:transparent; border:1px solid var(--line); color:var(--brand-text); font-weight:var(--fw-bold); font-size:var(--fs-sm); padding:5px 12px; border-radius:8px; cursor:pointer; white-space:nowrap; }
.t-act:hover{ background:var(--brand-50); border-color:var(--brand-300); }

/* form field validation */
.input.err, .input-group.err { border-color:var(--danger-500) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--danger-500) 16%, transparent); }
.field-err{ display:flex; align-items:center; gap:5px; color:var(--danger-600,#c0362c); font-size:var(--fs-sm); margin-top:6px; }
.field-err svg{ flex:none; }
.shake{ animation:shake .34s var(--ease,cubic-bezier(.36,.07,.19,.97)); }
@keyframes shake{ 10%,90%{ transform:translateX(-1px) } 20%,80%{ transform:translateX(2px) } 30%,50%,70%{ transform:translateX(-4px) } 40%,60%{ transform:translateX(4px) } }

/* view transition + motion preferences */
.vfade{ animation:viewIn .14s var(--ease); }  /* R4: 140 ms (was set by motion.js at run time) */
@keyframes viewIn{ from{ opacity:.35; transform:translateY(5px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }

/* print-ish for docs */
@media print{ .sidebar,.topbar,.copilot-fab{ display:none } }

/* visually hidden, read by assistive tech */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* p15: a file picker styled as a button is a <label> round a visually hidden (not display:none) input, so Tab reaches
   it and Space opens the picker; the label shows the focus ring its input has */
label.btn:focus-within, label.clickable:focus-within{ outline:2px solid var(--brand-500); outline-offset:2px; box-shadow:var(--ring); }
/* p15: the member's own "Motion" switch (My work → Appearance) reduces the interface's motion the way the system
   setting does: dialogs, drawers, toasts and sheets appear without sliding or fading */
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }

/* ---- boot shell: static markup in index.html that paints before the deferred bundle arrives (3G first paint) ---- */
.boot-shell{min-height:100vh;display:grid;place-content:center;justify-items:center;gap:10px;text-align:center;background:var(--brand-ink,#101935);color:#fff;font-family:Georgia,'Times New Roman',serif}
.boot-mark{font-size:var(--fs-3xl);font-weight:var(--fw-bold);letter-spacing:.01em}.boot-mark span{color:var(--gold-500)}
.boot-sub{font-family:Inter,system-ui,sans-serif;font-size:var(--fs-sm);letter-spacing:.14em;text-transform:uppercase;color:#aeb6dd}
.boot-bar{width:160px;height:3px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden;margin-top:14px}
.boot-bar i{display:block;width:40%;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--brand-500),var(--gold-500));animation:bootSlide 1.2s ease-in-out infinite}
.boot-note{font-family:Inter,system-ui,sans-serif;font-size:var(--fs-sm);color:#8790c1;margin-top:6px}
@keyframes bootSlide{0%{transform:translateX(-100%)}100%{transform:translateX(400%)}}
@media (prefers-reduced-motion:reduce){.boot-bar i{animation:none;width:100%}}

/* ---- phone widths: nothing may widen the page (17 Oct 2026 probe of every screen at 375px) ---- */
@media (max-width:860px){
  /* Bare tables inside cards: the table scrolls, the page does not. display:block keeps the
     markup and lets the box scroll; rows still lay out as a table inside it. */
  .card > .tbl, .card .tbl:not(.table-wrap .tbl){ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  /* Tab bars and segmented controls scroll sideways instead of wrapping into three rows or pushing out. */
  .tabs, .segment, .tabbar{ display:flex; flex-wrap:nowrap; overflow-x:auto; max-width:100%; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .tabs::-webkit-scrollbar, .segment::-webkit-scrollbar, .tabbar::-webkit-scrollbar{ display:none; }
  .tabs .tab, .segment .tab, .segment > button{ flex:0 0 auto; white-space:nowrap; }
  /* Page and card header button rows wrap; a nested row may shrink below its content (a segmented
     control inside it scrolls in its own box instead of pushing the page 3px wide). */
  .page-hd .row, .card-hd .row, .page-hd > .row, .row.gap-8.wrap, .page-hd .actions{ flex-wrap:wrap; }
  .row > .row{ min-width:0; max-width:100%; }
  .page-hd{ flex-wrap:wrap; gap:10px; }
  /* The calendar week rail and any kanban scroll in their own box. */
  .cal2-rail, .kanban, .kan-wrap, .cal-wrap{ overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; }
  /* Long unbroken strings (references, emails, hashes) wrap instead of widening. */
  .mono, .ref, .hash{ overflow-wrap:anywhere; }
  #view, .content, main{ max-width:100vw; overflow-x:hidden; }
}

/* ---- sixth pass, ux stream (22 Oct 2026) ---- */
/* TA-08 / TA-10: the workspace in the shell: its name (one line), its logo, its colour as a band, DEMO in the sandbox */
.sb-hd .nm{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-hd .logo.has-img{ background:#fff; overflow:hidden; padding:3px; }
.sb-hd .logo img{ width:100%; height:100%; object-fit:contain; display:block; }
.topbar{ box-shadow:inset 0 3px 0 var(--firm-band, transparent); }
.demo-pill{ letter-spacing:.08em; flex:none; }
.menu-label.plain{ text-transform:none; letter-spacing:0; font-size:var(--fs-sm); color:var(--ink); padding:8px 10px 6px; }
.menu-sub{ display:block; font-weight:var(--fw-medium); color:var(--ink-3); font-size:var(--fs-xs); margin-top:2px; max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* UX-20: the top-bar search is a real button (focusable, named); it looks like the field it opens */
button.search-box{ width:100%; font:inherit; text-align:left; cursor:pointer; }
button.search-box:focus-visible{ background:var(--surface); border-color:var(--brand-400); box-shadow:var(--ring); outline:none; }
.search-box .sb-ph{ flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--ink-4); font-size:var(--fs-base); }
.input-group > .ic{ display:flex; align-items:center; justify-content:center; }
@media (max-width:860px){
  .topbar .search-box .sb-ph{ display:none; }
}
@media (max-width:400px){
  .demo-pill{ padding:0 6px; letter-spacing:.04em; }
}
/* UX-H2: Messages. Desktop: the thread list beside the conversation. Phone (< 768px): one pane at a time. */
.msg-shell{ display:flex; height:calc(100vh - 230px); min-height:420px; overflow:hidden; }
.msg-list{ width:300px; border-right:1px solid var(--line); display:flex; flex-direction:column; flex:none; min-width:0; }
.msg-list-scroll{ overflow-y:auto; flex:1; }
.msg-convo{ min-width:0; }
.msg-convo-hd{ padding:14px 18px; border-bottom:1px solid var(--line); gap:10px; }
.msg-back{ display:none; flex:none; }
.notif-item.msg-active{ background:var(--brand-50); }
@media (max-width:767px){
  .msg-shell{ height:calc(100dvh - 190px); min-height:380px; }
  .msg-list{ width:100%; border-right:0; }
  .msg-shell .msg-convo{ display:none; }
  .msg-shell.show-convo .msg-list{ display:none; }
  .msg-shell.show-convo .msg-convo{ display:block; flex:1; width:100%; }
  .msg-back{ display:inline-flex; }
  .msg-convo-hd{ padding:10px 12px; }
}
/* Fresh's request 9: styles that update.js and nav.js used to inject at run time */
.dl-update{ position:fixed; right:16px; bottom:16px; z-index:9000; display:flex; align-items:center; gap:10px; max-width:min(460px,calc(100vw - 32px)); padding:10px 10px 10px 14px; border-radius:var(--radius-lg,14px); background:var(--surface,#fff); color:var(--ink,#101935); border:1px solid var(--line,rgba(16,25,53,.14)); box-shadow:var(--shadow-lg,0 12px 32px rgba(16,25,53,.18)); font-size:var(--fs-sm,13px); line-height:1.4; }
.dl-update .dl-update-ic{ color:var(--brand-accent,#4b50e6); display:flex; flex:none; }
.dl-update .dl-update-txt{ flex:1; min-width:0; }
.dl-update .dl-update-sub{ color:var(--ink-3,#5b6478); }
.dl-update .dl-update-x{ background:none; border:0; color:var(--ink-3,#5b6478); font-size:20px; line-height:1; padding:4px 8px; cursor:pointer; border-radius:8px; }
.dl-update .dl-update-x:hover{ background:var(--hover,rgba(0,0,0,.05)); }
@media (max-width:640px){ .dl-update{ left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); max-width:none; } }
body.native-app .dl-update{ left:12px; right:12px; bottom:calc(78px + env(safe-area-inset-bottom,0px)); max-width:none; }
@media (prefers-reduced-motion:no-preference){ .dl-update{ animation:dlUpIn .22s ease-out; } }
@keyframes dlUpIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.dl-nav-focus:focus, .dl-nav-focus:focus-visible{ outline:none; box-shadow:none; } /* the global :focus-visible ring drew a box round a heading focused for a screen reader */
/* UX-20: a row's name is a real button, so a keyboard reaches a document in one Tab, not through its row menu */
.link-btn{ background:none; border:0; padding:0; margin:0; font:inherit; color:inherit; text-align:left; cursor:pointer; border-radius:4px; }
.link-btn:hover{ color:var(--brand-text, var(--brand-600)); text-decoration:underline; }
.link-btn:focus-visible{ outline:2px solid var(--brand-500); outline-offset:2px; }
/* UX-H2: in a phone conversation the AI button would sit on the Send button */
@media (max-width:767px){ body:has(.msg-shell.show-convo) .copilot-fab{ display:none; } }
/* UX7-23: the update bar sat on the AI button; while it shows, the button rides above it (core.js measures the bar
   into --dl-update-h; the fallbacks are its usual one- and two-line heights) */
body:has(#dlUpdate) .copilot-fab{ bottom:calc(16px + var(--dl-update-h, 64px) + 12px); }
@media (max-width:640px){ body:has(#dlUpdate) .copilot-fab{ bottom:calc(12px + env(safe-area-inset-bottom,0px) + var(--dl-update-h, 96px) + 12px); } }
body.native-app:has(#dlUpdate) .copilot-fab{ bottom:calc(78px + env(safe-area-inset-bottom,0px) + var(--dl-update-h, 96px) + 12px); }
/* UX7-13: while the guided tour runs, toasts (the "Signed in" one) sit under its dimmed layer, not on the tour card */
body.tour-on #toasts{ z-index:1300; }
/* UX7-19: a link styled as a primary button keeps the button's white text in dark (the dark link colour gave 2.41:1) */
html[data-theme="dark"] a.btn-primary, html[data-theme="dark"] a.btn-primary:hover{ color:#fff; }
/* UX7-19: the ring's label sits on the inner disc, so it carries the disc's colour itself (scanners and forced colours
   read the label against the ring's brand fill otherwise) */
.ring-prog span{ background:var(--surface); border-radius:50%; width:calc(var(--sz) - 11px); height:calc(var(--sz) - 11px); display:flex; align-items:center; justify-content:center; }

/* auth-action.html (app.delaw.io/auth/action): the account-link page. Its firm line stays out until the firm is known. */
.aa-firm[hidden]{ display:none; }
.aa-firm{ align-items:center; }
.aa-logo{ height:28px; width:auto; max-width:140px; border-radius:6px; vertical-align:middle; }
.aa #aaPwErr:empty, .aa #aaNewMsg:empty, .aa #aaResetMsg:empty{ display:none; }
.aa #aaPwErr{ color:var(--danger-text); }
.aa #aaTitle:focus{ outline:none; }   /* focused for screen readers on each step; it is not a control */