/* LexCatalyst design system — tokens + component layer.
   Loaded on the staff product chrome (NOT the client portal, which keeps the
   firm's brand). Tailwind utilities still handle layout; this file owns the look.
   Build once; pages compose from the component classes (and the Jinja macros in
   templates/_components.html). */

:root {
  /* Surfaces — warm paper (Hybrid A×C) */
  --lc-bg:#eceae3;                               /* page surround */
  --lc-paper:#FCFBF8; --lc-paper-2:#FBFAF7;      /* sidebar / paper light */
  --lc-surface:#FFFFFF;                          /* card surface */
  --lc-surface-2:#F2EEE4;                         /* chip / inset fill (warm) */
  --lc-row-hover:#FAF8F2;                         /* table / row hover */
  --lc-brass-tint:#F4EFE3;                        /* nav hover / soft brass */
  /* Brand — navy + brass (LexSteward chrome; fixed, never the firm's color) */
  --lc-brand:#1F3864; --lc-brand-hover:#16294d; --lc-brand-2:#2a4a7a; --lc-brand-ink:#0B1B33;
  --lc-navy-grad:linear-gradient(150deg,#2a3a5c,#1F3864);
  --lc-brass:#c8a86b; --lc-brass-2:#a9863f; --lc-brass-3:#9a7b3a;
  --lc-brass-grad:linear-gradient(150deg,#dfbe83,#c8a86b 55%,#a9863f);
  /* Text */
  /* --lc-muted darkened from the spec's #8a8374 (3.76:1, fails AA) to #6e6757 (~4.7:1 on
     paper) so all small secondary/label text clears WCAG AA. --lc-faint stays light but is
     only used on decorative icons/dots, never as readable text. */
  --lc-ink:#1d2433; --lc-ink-strong:#1b2230; --lc-ink-2:#5c5648; --lc-muted:#6e6757; --lc-faint:#a39c8a;
  /* Lines */
  --lc-line:#EAE5D9; --lc-line-2:#EEE9DD; --lc-line-3:#E7E2D6; --lc-line-4:#E2DCCE;
  /* Semantic (AA-checked on their tint bg) */
  --lc-ok:#357046; --lc-ok-bg:#E7F2EA; --lc-ok-line:#cfe6d6;   /* text 5.14:1 on ok-bg — clears WCAG AA for micro badges */
  --lc-warn:#8A4708; --lc-warn-bg:#FBF1E3;
  --lc-danger:#B42318; --lc-danger-bg:#FBEAE8;
  --lc-info:#1D4ED8; --lc-info-bg:#E8EEFB;
  /* Type — Source Serif 4 headings, Inter body/UI */
  --lc-font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --lc-serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --lc-fs-display:28px; --lc-fs-h1:24px; --lc-fs-h2:18px; --lc-fs-body:14px; --lc-fs-sm:13px; --lc-fs-micro:11px;
  --lc-lh:1.5; --lc-tracking-label:.08em;
  /* Radius */
  --lc-r-frame:10px; --lc-r-sm:6px; --lc-r:7px; --lc-r-lg:12px; --lc-r-pill:999px;
  /* Directional desk shadows (light source top-left) */
  --lc-sh-1:2px 3px 6px -1px rgba(45,42,34,.11), 8px 12px 24px -10px rgba(45,42,34,.20);
  --lc-sh-kpi:2px 3px 5px -1px rgba(45,42,34,.11), 6px 9px 18px -8px rgba(45,42,34,.20);
  --lc-sh-lift:7px 14px 24px -4px rgba(45,42,34,.20), 26px 40px 64px -18px rgba(45,42,34,.38);
  --lc-sh-frame:3px 4px 8px -2px rgba(45,42,34,.12), 18px 24px 48px -20px rgba(45,42,34,.34);
  --lc-sh-flyout:7px 14px 28px -8px rgba(45,42,34,.30), 2px 3px 8px rgba(45,42,34,.12);
  --lc-sh-pop:0 18px 44px -12px rgba(40,38,32,.4), 0 4px 10px rgba(40,38,32,.16);
  --lc-sh-2:var(--lc-sh-kpi); --lc-sh-3:var(--lc-sh-lift);   /* back-compat aliases */
  --lc-space:4px;
  --lc-sidebar-w:226px;
}

/* ── base ───────────────────────────────────────────────────────────────── */
.lc { font-family:var(--lc-font); color:var(--lc-ink); font-size:var(--lc-fs-body); line-height:var(--lc-lh); background:var(--lc-bg); }
.lc *, .lc *::before, .lc *::after { box-sizing:border-box; }
.lc-num { font-variant-numeric:tabular-nums; }
.lc-muted { color:var(--lc-muted); }
.lc-label { font-size:var(--lc-fs-micro); letter-spacing:var(--lc-tracking-label); text-transform:uppercase; color:var(--lc-muted); font-weight:700; }
.lc h1,.lc-h1 { font-family:var(--lc-serif); font-size:var(--lc-fs-h1); font-weight:600; letter-spacing:-.005em; color:var(--lc-ink-strong); }
.lc-h2 { font-family:var(--lc-serif); font-size:var(--lc-fs-h2); font-weight:600; color:var(--lc-ink-strong); }
.lc-display { font-family:var(--lc-serif); font-size:var(--lc-fs-display); font-weight:600; letter-spacing:-.01em; color:var(--lc-ink-strong); }
/* a 40px brass underline rule under a page greeting (Source Serif h1) */
.lc-rule-brass { width:40px; height:3px; border-radius:2px; background:linear-gradient(90deg,var(--lc-brass),transparent); margin:8px 0 0; }
.lc a { color:var(--lc-brand); text-decoration:none; }
.lc a:hover { text-decoration:underline; }
:focus-visible { outline:2px solid var(--lc-brass-2); outline-offset:2px; border-radius:var(--lc-r-sm); }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }

/* ── app shell — light sidebar + main inside a floating warm frame ─────────── */
.lc-app { display:flex; min-height:calc(100vh - 28px); margin:14px; background:var(--lc-surface);
  border-radius:var(--lc-r-frame); box-shadow:var(--lc-sh-frame); }
.lc-side { width:var(--lc-sidebar-w); flex:0 0 var(--lc-sidebar-w); align-self:flex-start;
  position:sticky; top:14px; max-height:calc(100vh - 28px); overflow-y:auto;
  background:var(--lc-paper); color:var(--lc-ink-2); border-right:1px solid var(--lc-line-3); padding:16px 12px;
  display:flex; flex-direction:column; gap:2px; border-radius:var(--lc-r-frame) 0 0 var(--lc-r-frame); }
.lc-side__brand { display:flex; align-items:center; gap:9px; font-family:var(--lc-serif); font-weight:600; font-size:16px;
  letter-spacing:-.005em; padding:4px 8px 14px; color:var(--lc-brand); }
.lc-side__brand .lc-mark { width:30px; height:30px; border-radius:7px; background:var(--lc-brass-grad); flex:none;
  display:inline-flex; align-items:center; justify-content:center; font-family:var(--lc-serif); font-size:15px; font-weight:600; color:#3a2c10;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4), 0 1px 2px rgba(120,90,30,.3); }
.lc-side__label { font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--lc-muted); padding:8px 10px 4px; }
.lc-nav { display:flex; flex-direction:column; gap:1px; }
.lc-nav a, .lc-nav summary { position:relative; display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:var(--lc-r-sm);
  color:var(--lc-ink-2); font-size:13.5px; cursor:pointer; list-style:none; transition:background .12s,color .12s; }
.lc-nav a i, .lc-nav summary > i:first-child { color:var(--lc-faint); font-size:17px; transition:color .12s; }
.lc-nav a:hover, .lc-nav summary:hover { background:var(--lc-brass-tint); color:var(--lc-brand); text-decoration:none; }
.lc-nav a.is-active { background:var(--lc-brass-tint); color:var(--lc-brand); font-weight:600; }
.lc-nav a.is-active i { color:var(--lc-brass-2); }
.lc-nav a.is-active::before { content:""; position:absolute; left:0; top:7px; bottom:7px; width:3px; border-radius:3px; background:var(--lc-brass); }
.lc-nav .lc-sub { margin-left:26px; font-size:12.5px; }
.lc-nav summary::-webkit-details-marker{ display:none; }
.lc-nav .caret { margin-left:auto; opacity:.5; transition:transform .15s; font-size:.85em; }
.lc-nav details[open] > summary .caret { transform:rotate(90deg); }
.lc-side__foot { margin-top:auto; padding-top:12px; border-top:1px solid var(--lc-line-3); font-size:11px; color:var(--lc-muted); display:flex; align-items:center; gap:6px; }
.lc-side__foot i { color:var(--lc-brass-2); }

.lc-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.lc-topbar { position:sticky; top:14px; z-index:20; display:flex; align-items:center; gap:12px; height:58px; padding:0 24px;
  background:var(--lc-surface); border-bottom:1px solid var(--lc-line-3); border-radius:0 var(--lc-r-frame) 0 0; }
.lc-topbar__title { font-family:var(--lc-serif); font-size:18px; font-weight:600; color:var(--lc-ink-strong); }
.lc-content { padding:24px; width:100%; }
.lc-cmdk-trigger { display:flex; align-items:center; gap:8px; height:34px; padding:0 10px; min-width:240px; color:var(--lc-muted);
  background:#F7F6F1; border:1px solid var(--lc-line-3); border-radius:var(--lc-r); font-size:var(--lc-fs-sm); cursor:text; }
.lc-cmdk-trigger:hover { border-color:var(--lc-line-4); }
.lc-cmdk-trigger kbd { margin-left:auto; font:inherit; font-size:var(--lc-fs-micro); background:var(--lc-surface-2); border:1px solid var(--lc-line-3); border-radius:5px; padding:1px 5px; color:var(--lc-muted); }
/* navy-gradient avatar (topbar) */
.lc-avatar { width:30px; height:30px; border-radius:999px; background:var(--lc-navy-grad); color:#dcc18a; flex:none;
  display:inline-flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; }

/* ── buttons ────────────────────────────────────────────────────────────── */
.lc-btn { --b:var(--lc-surface); --bd:var(--lc-line); --fg:var(--lc-ink);
  display:inline-flex; align-items:center; justify-content:center; gap:6px; height:34px; padding:0 14px;
  border:1px solid var(--bd); background:var(--b); color:var(--fg); border-radius:var(--lc-r); font:inherit; font-size:var(--lc-fs-sm);
  font-weight:560; cursor:pointer; white-space:nowrap; transition:filter .12s,background .12s,border-color .12s,transform .08s; }
.lc-btn:hover { filter:brightness(.985); border-color:#cfd6e0; text-decoration:none; }
.lc-btn:active { transform:translateY(.5px); }
.lc-btn:disabled { opacity:.5; cursor:not-allowed; }
.lc-btn--primary { --b:var(--lc-brand); --bd:var(--lc-brand); --fg:#fff; box-shadow:0 1px 2px rgba(31,56,100,.25); }
.lc-btn--primary:hover { --b:var(--lc-brand-hover); --bd:var(--lc-brand-hover); filter:none; transform:translateY(-1px); }
.lc-btn--brass { --b:var(--lc-brass-2); --bd:var(--lc-brass-2); --fg:#fff; }
.lc-btn--brass:hover { --b:var(--lc-brass-3); --bd:var(--lc-brass-3); filter:none; transform:translateY(-1px); }
.lc-btn--ghost { --b:transparent; --bd:transparent; --fg:var(--lc-ink-2); }
.lc-btn--ghost:hover { --b:var(--lc-brass-tint); }
.lc-btn--danger { --b:var(--lc-danger); --bd:var(--lc-danger); --fg:#fff; }
.lc-btn--warn   { --b:var(--lc-warn);   --bd:var(--lc-warn);   --fg:#fff; }
.lc-btn--sm { height:28px; padding:0 10px; font-size:var(--lc-fs-micro); }
/* anchor buttons must honor their variant color/hover, not the global .lc a link rule */
.lc a.lc-btn { color:var(--fg); }
.lc a.lc-btn:hover { text-decoration:none; }
/* hover-lift: opt-in directional lift on cards/tiles/panels */
.lc-lift { transition:transform .18s ease, box-shadow .18s ease; }
.lc-lift:hover { transform:translateY(-6px); box-shadow:var(--lc-sh-lift); }

/* ── fields ─────────────────────────────────────────────────────────────── */
.lc-field { display:flex; flex-direction:column; gap:4px; }
.lc-field > label { font-size:var(--lc-fs-micro); letter-spacing:var(--lc-tracking-label); text-transform:uppercase; color:var(--lc-muted); font-weight:600; }
.lc-input, .lc-select, .lc-textarea { width:100%; height:34px; padding:0 10px; font:inherit; font-size:var(--lc-fs-sm); color:var(--lc-ink);
  background:var(--lc-surface); border:1px solid var(--lc-line); border-radius:var(--lc-r); transition:border-color .12s,box-shadow .12s; }
.lc-textarea { height:auto; padding:8px 10px; }
.lc-input--sm { padding:5px 9px; font-size:var(--lc-fs-sm); }   /* compact input/select (promoted from per-page <style> blocks) */
.lc-input:focus, .lc-select:focus, .lc-textarea:focus { outline:none; border-color:var(--lc-brand-2); box-shadow:0 0 0 3px rgba(46,117,182,.15); }
.lc-field--error .lc-input, .lc-field--error .lc-select, .lc-field--error .lc-textarea { border-color:var(--lc-danger); }
.lc-field__err { color:var(--lc-danger); font-size:var(--lc-fs-micro); }

/* ── card / section ─────────────────────────────────────────────────────── */
.lc-card { background:var(--lc-surface); border:1px solid var(--lc-line); border-radius:var(--lc-r-lg); box-shadow:var(--lc-sh-1); }
.lc-card__head { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--lc-line); }
.lc-card__head h2 { font-family:var(--lc-serif); font-size:var(--lc-fs-h2); font-weight:600; color:var(--lc-ink-strong); }
.lc-card__head .lc-spacer { flex:1; }
.lc-card__body { padding:16px 18px; }
/* Status callout — replaces the one-side accent stripe (the "side-tab" anti-pattern, QUALITY_BAR §11)
   with a tinted, evenly-inset card that carries the same status meaning via a soft semantic fill. */
/* Dashboard widget helpers — migrated off the Tailwind CDN onto the --lc-* system (two-brand: staff
   chrome only; never the firm's --brand/--accent). */
.lc-w-title { font-size:var(--lc-fs-sm); font-weight:600; margin-bottom:12px; }
.lc-w-link { display:block; text-decoration:none; color:inherit; border-radius:var(--lc-r); transition:background .12s ease; }
.lc-w-link:hover { background:var(--lc-surface-2); }
.lc-flag--brand, .lc-flag--brass { background:var(--lc-brass-tint); }
.lc-flag--ok { background:var(--lc-ok-bg); border-color:var(--lc-ok-line); }
.lc-flag--warn { background:var(--lc-warn-bg); border-color:var(--lc-line-4); }
/* DEMO/BETA overlay banner — high-contrast amber strip; #fff text intentional (WCAG ≥7:1 on --lc-warn) */
.lc-beta-banner{display:flex;align-items:center;justify-content:center;gap:12px;
  background:var(--lc-warn);color:#fff;font:600 var(--lc-fs-sm)/1.45 var(--lc-font);
  padding:9px 44px;text-align:center;position:relative;z-index:200}
.lc-beta-banner strong{letter-spacing:.05em}
.lc-beta-banner__x{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  background:transparent;border:0;color:#fff;font-size:22px;line-height:1;cursor:pointer;
  padding:2px 9px;border-radius:var(--lc-r-sm);opacity:.85}
.lc-beta-banner__x:hover{opacity:1;background:rgba(255,255,255,.16)}
.lc-beta-banner__x:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lc-flag--danger { background:var(--lc-danger-bg); border-color:var(--lc-line-4); }
.lc-section + .lc-section { margin-top:24px; }

/* ── KPI tile (never an orphan number) ──────────────────────────────────── */
.lc-kpi { position:relative; display:block; background:var(--lc-surface); border:1px solid var(--lc-line); border-radius:var(--lc-r-lg); box-shadow:var(--lc-sh-kpi); padding:15px 17px; transition:transform .18s ease, box-shadow .18s ease; }
.lc-kpi:hover { transform:translateY(-6px); box-shadow:var(--lc-sh-lift); text-decoration:none; }
.lc-kpi__label { font-size:10.5px; letter-spacing:var(--lc-tracking-label); text-transform:uppercase; color:var(--lc-muted); font-weight:700; }
.lc-kpi__val { font-family:var(--lc-serif); font-size:28px; font-weight:600; letter-spacing:-.005em; color:var(--lc-ink-strong); font-variant-numeric:tabular-nums; margin-top:3px; }
.lc-kpi__ctx { font-size:11.5px; color:var(--lc-muted); margin-top:4px; display:flex; align-items:center; gap:4px; }
/* the "via intake / LexSteward" lead-bridge KPI — brass top accent (product bridge) */
.lc-kpi--bridge::before { content:""; position:absolute; left:0; right:0; top:0; height:3px; border-radius:var(--lc-r-lg) var(--lc-r-lg) 0 0; background:var(--lc-brass-grad); }
.lc-kpi__delta--up { color:var(--lc-ok); } .lc-kpi__delta--down { color:var(--lc-danger); }

/* ── badge / status pill ────────────────────────────────────────────────── */
.lc-badge { display:inline-flex; align-items:center; gap:4px; font-size:var(--lc-fs-micro); font-weight:600; padding:1px 8px; border-radius:var(--lc-r-pill); background:var(--lc-surface-2); color:var(--lc-ink-2); white-space:nowrap; }
.lc-badge--ok { background:var(--lc-ok-bg); color:var(--lc-ok); }
.lc-badge--warn { background:var(--lc-warn-bg); color:var(--lc-warn); }
.lc-badge--danger { background:var(--lc-danger-bg); color:var(--lc-danger); }
.lc-badge--info { background:var(--lc-info-bg); color:var(--lc-info); }
.lc-badge--neutral { background:var(--lc-surface-2); color:var(--lc-ink-2); }

/* ── filter chip (saved views) ──────────────────────────────────────────── */
.lc-chip { font-size:var(--lc-fs-sm); padding:4px 12px; border:1px solid var(--lc-line); border-radius:var(--lc-r-pill); background:var(--lc-surface); color:var(--lc-ink-2); cursor:pointer; }
.lc-chip:hover { background:var(--lc-surface-2); }
.lc-chip--on { background:var(--lc-brand); color:var(--lc-surface); border-color:var(--lc-brand); }

/* ── responsive two-column detail layout ────────────────────────────────── */
.lc-detail-cols { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
@media (max-width:900px) { .lc-detail-cols { grid-template-columns:1fr; } }
/* A 2-up form/field grid that collapses to a single column on narrow screens. */
.lc-form-2col { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:center; }
@media (max-width:640px) { .lc-form-2col { grid-template-columns:1fr; } }
/* Visually-hidden but screen-reader-available (a11y context for icon-only/ordinal UI). */
.lc-visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ── table / list primitive ─────────────────────────────────────────────── */
.lc-table-wrap { background:var(--lc-surface); border:1px solid var(--lc-line); border-radius:var(--lc-r-lg); box-shadow:var(--lc-sh-1); overflow:hidden; }
.lc-table-toolbar { display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--lc-line); flex-wrap:wrap; }
.lc-table-toolbar .lc-spacer { flex:1; }
.lc-table { width:100%; border-collapse:collapse; font-size:var(--lc-fs-sm); }
.lc-table thead th { position:sticky; top:0; background:var(--lc-row-hover); z-index:1; text-align:left; font-size:10px;
  letter-spacing:var(--lc-tracking-label); text-transform:uppercase; color:var(--lc-muted); font-weight:700; padding:9px 12px; white-space:nowrap; border-bottom:1px solid var(--lc-line); }
.lc-table th.lc-sortable { cursor:pointer; user-select:none; }
.lc-table th.lc-sortable:hover { color:var(--lc-ink-2); }
.lc-table th .lc-sort-ind { opacity:.4; font-size:.85em; }
.lc-table th[aria-sort="ascending"] .lc-sort-ind, .lc-table th[aria-sort="descending"] .lc-sort-ind { opacity:1; }
.lc-table tbody td { padding:9px 12px; border-top:1px solid var(--lc-line); color:var(--lc-ink); vertical-align:middle; }
.lc-table tbody tr { transition:background .1s; }
.lc-table tbody tr:hover { background:var(--lc-row-hover); }
.lc-table .lc-num { text-align:right; font-variant-numeric:tabular-nums; }
.lc-table .lc-row-actions { opacity:0; transition:opacity .1s; white-space:nowrap; text-align:right; }
.lc-table tbody tr:hover .lc-row-actions { opacity:1; }
.lc-table--compact tbody td { padding:5px 12px; }
.lc-table--compact thead th { padding:5px 12px; }
.lc-check { width:15px; height:15px; accent-color:var(--lc-brand); }
.lc-table-foot { display:flex; align-items:center; gap:8px; padding:8px 12px; border-top:1px solid var(--lc-line); color:var(--lc-muted); font-size:var(--lc-fs-micro); }
.lc-table-foot .lc-spacer { flex:1; }
.lc-pager { display:inline-flex; align-items:center; gap:6px; }
.lc-pager button { height:26px; min-width:26px; padding:0 6px; border:1px solid var(--lc-line); background:var(--lc-surface); border-radius:var(--lc-r-sm); cursor:pointer; color:var(--lc-ink-2); }
.lc-pager button:disabled { opacity:.4; cursor:not-allowed; }
/* selection + bulk-action bar */
.lc-bulkbar { display:flex; align-items:center; gap:10px; padding:8px 12px; background:var(--lc-info-bg); border-bottom:1px solid var(--lc-line); color:var(--lc-info); font-size:var(--lc-fs-sm); }
.lc-bulkbar .lc-spacer { flex:1; }
.lc-bulkbar__count { font-weight:600; font-variant-numeric:tabular-nums; }

/* ── tabs ───────────────────────────────────────────────────────────────── */
.lc-tabs { display:flex; gap:2px; border-bottom:1px solid var(--lc-line); }
.lc-tab { padding:8px 12px; font-size:var(--lc-fs-sm); color:var(--lc-muted); border-bottom:2px solid transparent; cursor:pointer; }
.lc-tab:hover { color:var(--lc-ink-2); }
.lc-tab.is-active { color:var(--lc-brand); border-bottom-color:var(--lc-brass-2); font-weight:600; }

/* ── drawer / modal / toast ─────────────────────────────────────────────── */
.lc-scrim { position:fixed; inset:0; background:rgba(16,23,38,.28); z-index:60; opacity:0; animation:lc-fade .14s ease forwards; }
.lc-drawer { position:fixed; top:0; right:0; height:100vh; width:min(440px,100%); background:var(--lc-surface); box-shadow:var(--lc-sh-3); z-index:61;
  transform:translateX(8px); opacity:0; animation:lc-slide-in .16s ease forwards; overflow-y:auto; }
.lc-modal { position:fixed; left:50%; top:14%; transform:translateX(-50%) translateY(6px); width:min(560px,94vw); background:var(--lc-surface);
  border-radius:var(--lc-r-lg); box-shadow:var(--lc-sh-3); z-index:61; opacity:0; animation:lc-pop .16s ease forwards; }
@keyframes lc-fade { to { opacity:1; } }
@keyframes lc-slide-in { to { transform:translateX(0); opacity:1; } }
@keyframes lc-pop { to { transform:translateX(-50%) translateY(0); opacity:1; } }
.lc-toast { position:fixed; bottom:calc(18px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%);
  z-index:70; max-width:min(92vw,420px); background:var(--lc-ink); color:#fff;
  padding:9px 16px; border-radius:var(--lc-r); box-shadow:var(--lc-sh-2); font-size:var(--lc-fs-sm); }
.lc-toast--err { background:var(--lc-danger); }

/* ── review layer (Edit / Comment / Ask-AI over matter fields) ⭐ ───────────── */
.lc-rev-modes { display:inline-flex; border:1px solid var(--lc-line-3); border-radius:var(--lc-r); overflow:hidden; background:var(--lc-surface); }
.lc-rev-modes button { font:inherit; font-size:12.5px; font-weight:560; padding:5px 12px; border:0; border-left:1px solid var(--lc-line-3); background:none; color:var(--lc-ink-2); cursor:pointer; }
.lc-rev-modes button:first-child { border-left:0; }
.lc-rev-modes button:hover { background:var(--lc-brass-tint); }
.lc-rev-modes button.on { background:var(--lc-brand); color:#fff; }
.lc-t { border-radius:5px; transition:background .12s, box-shadow .12s; position:relative; }
/* resting affordance at ≥3:1 (WCAG 1.4.11) — the at-rest outline is the only non-hover cue */
[data-mode="edit"] .lc-t { box-shadow:0 0 0 1.5px rgba(15,128,79,.85) inset; cursor:pointer; }
[data-mode="comment"] .lc-t { box-shadow:0 0 0 1.5px rgba(138,71,8,.9) inset; cursor:pointer; }
[data-mode="ai"] .lc-t { box-shadow:0 0 0 1.5px rgba(31,56,100,.85) inset; cursor:pointer; }
.lc-t:focus-visible { outline:2px solid var(--lc-brand-2); outline-offset:1px; }
[data-mode="edit"] .lc-t:hover { box-shadow:0 0 0 2px #0f805f inset; background:rgba(15,128,79,.06); }
[data-mode="comment"] .lc-t:hover { box-shadow:0 0 0 2px #c17c1e inset; background:rgba(193,124,30,.07); }
[data-mode="ai"] .lc-t:hover { box-shadow:0 0 0 2px #1F3864 inset; background:rgba(31,56,100,.06); }
.lc-t__badge { display:inline-flex; align-items:center; justify-content:center; min-width:15px; height:15px; padding:0 4px; margin-left:6px; border-radius:999px; background:#8a4708; color:#fff; font-size:10px; font-weight:700; vertical-align:middle; }
.lc-rev-pop { position:fixed; z-index:80; width:328px; max-width:calc(100vw - 24px); background:var(--lc-surface); border:1px solid var(--lc-line-4); border-radius:var(--lc-r-lg); box-shadow:var(--lc-sh-pop); padding:14px; font-size:13.5px; }
.lc-rev-pop h4 { font-family:var(--lc-serif); font-size:14px; font-weight:600; color:var(--lc-ink-strong); margin:0 0 8px; }
.lc-rev-pop p.lc-rev-cur { color:var(--lc-ink-2); font-size:12.5px; margin:0 0 8px; }
.lc-rev-pop textarea, .lc-rev-pop input.lc-rev-in { width:100%; border:1px solid var(--lc-line-3); border-radius:var(--lc-r-sm); padding:7px 9px; font:inherit; font-size:13px; background:var(--lc-surface); color:var(--lc-ink); }
.lc-rev-pop textarea:focus, .lc-rev-pop input.lc-rev-in:focus { outline:none; border-color:var(--lc-brand-2); box-shadow:0 0 0 3px rgba(31,56,100,.12); }
.lc-rev-pop__act { display:flex; gap:8px; justify-content:flex-end; margin-top:10px; }
.lc-rev-locked { background:var(--lc-warn-bg); color:var(--lc-warn); border:1px solid #f0dca6; border-radius:var(--lc-r-sm); padding:10px 12px; font-size:12.5px; line-height:1.55; }
.lc-rev-locked i { color:var(--lc-warn); }
.lc-rev-note { border-top:1px solid var(--lc-line-2); padding:7px 0; font-size:12.5px; color:var(--lc-ink-2); }
.lc-rev-note .lc-rev-note__who { color:var(--lc-muted); font-size:11px; }
.lc-rev-firmonly { font-size:11px; color:var(--lc-muted); margin:0 0 8px; display:flex; align-items:center; gap:5px; }
.lc-kf { display:flex; flex-direction:column; }
.lc-kf__row { display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:7px 0; border-top:1px solid var(--lc-line-2); }
.lc-kf__row:first-child { border-top:none; }
.lc-kf__k { color:var(--lc-muted); font-size:13px; }
.lc-kf__v { color:var(--lc-ink); font-size:13.5px; text-align:right; padding:2px 6px; }
.lc-kf__v[data-locked="1"] { color:var(--lc-ink-strong); font-weight:560; }

/* ── command bar ────────────────────────────────────────────────────────── */
.lc-cmdk { position:fixed; left:50%; top:12%; transform:translateX(-50%); width:min(620px,94vw); background:var(--lc-surface);
  border-radius:var(--lc-r-lg); box-shadow:var(--lc-sh-3); z-index:61; overflow:hidden; opacity:0; animation:lc-pop .14s ease forwards; }
.lc-cmdk input { width:100%; height:50px; border:0; border-bottom:1px solid var(--lc-line); padding:0 16px; font:inherit; font-size:16px; outline:none; }
.lc-cmdk__list { max-height:52vh; overflow-y:auto; padding:6px; }
.lc-cmdk__group { font-size:var(--lc-fs-micro); letter-spacing:var(--lc-tracking-label); text-transform:uppercase; color:var(--lc-muted); padding:8px 10px 4px; }
.lc-cmdk__item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--lc-r); cursor:pointer; color:var(--lc-ink); }
.lc-cmdk__item .lc-cmdk__meta { margin-left:auto; font-size:var(--lc-fs-micro); color:var(--lc-muted); }
.lc-cmdk__item.is-active, .lc-cmdk__item:hover { background:var(--lc-surface-2); }
.lc-cmdk__empty { padding:22px 16px; text-align:center; color:var(--lc-muted); font-size:var(--lc-fs-sm); }
/* Ask-Ward answer panel (inline below the results) */
.lc-cmdk__answer { display:none; }
.lc-cmdk__answer.is-open { display:block; border-top:1px solid var(--lc-line); padding:12px 16px; max-height:40vh; overflow-y:auto; }
.lc-cmdk__thinking { color:var(--lc-muted); font-size:var(--lc-fs-sm); }
.lc-cmdk__msg { font-size:var(--lc-fs-sm); color:var(--lc-ink); line-height:1.5; margin-bottom:8px; }
.lc-cmdk__msg--proposal { color:var(--lc-warn); }
.lc-cmdk__msg--proposal a { color:var(--lc-brand); font-weight:600; }
.lc-cmdk__cites { font-size:var(--lc-fs-micro); color:var(--lc-muted); margin-bottom:8px; }
.lc-cmdk__back { background:none; border:0; color:var(--lc-muted); font:inherit; font-size:var(--lc-fs-sm); cursor:pointer; padding:4px 0; display:inline-flex; align-items:center; gap:6px; }
.lc-cmdk__back:hover { color:var(--lc-ink); }

/* ── empty state + skeleton ─────────────────────────────────────────────── */
.lc-empty { text-align:center; padding:48px 24px; color:var(--lc-muted); }
.lc-empty__icon { font-size:28px; opacity:.5; }
.lc-empty__title { color:var(--lc-ink-2); font-weight:600; margin-top:8px; }
.lc-empty__sub { font-size:var(--lc-fs-sm); margin:4px 0 14px; }
.lc-skel { background:linear-gradient(90deg,var(--lc-surface-2) 25%,#e9edf3 37%,var(--lc-surface-2) 63%); background-size:400% 100%;
  animation:lc-shimmer 1.2s ease infinite; border-radius:var(--lc-r-sm); height:14px; }
@keyframes lc-shimmer { 0%{background-position:100% 0;} 100%{background-position:0 0;} }

/* htmx swap fade */
.htmx-swapping { opacity:0; transition:opacity .12s ease; }
.htmx-settling { opacity:1; }
.lc-hidden { display:none !important; }

/* Connections — provider icon tile (warm brass tint, soft depth) */
.lc-conn-icon { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; flex:none;
  border-radius:var(--lc-r); background:var(--lc-brass-tint); color:var(--lc-brass-2); font-size:20px; }
.lc-conn-icon--lg { width:60px; height:60px; font-size:30px; border-radius:var(--lc-r-lg); }

/* ── Mobile: off-canvas nav drawer (staff OS is desktop-primary; this keeps it usable on a
   phone with no horizontal overflow). CSS-only via the #lc-nav-toggle checkbox. ───────── */
.lc-nav-toggle { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }   /* sr-only but still focusable/toggleable */
.lc-nav-burger { display:none; align-items:center; justify-content:center; width:40px; height:40px;
  margin-left:-8px; border-radius:var(--lc-r-sm); color:var(--lc-ink-2); cursor:pointer; font-size:20px; flex:none; }
.lc-nav-burger:hover { background:var(--lc-brass-tint); color:var(--lc-brand); }
.lc-nav-toggle:focus-visible + .lc-app .lc-nav-burger { outline:2px solid var(--lc-brass-2); outline-offset:2px; }
.lc-nav-backdrop { display:none; }

@media (max-width:768px) {
  .lc-app { margin:8px; }
  /* clip horizontal bleed so the page never scrolls sideways on a phone; wide tables keep
     their own internal scroll (lc_table wraps them in overflow-x:auto). clip (not hidden)
     avoids creating a scroll container / forcing overflow-y. */
  .lc-content { padding:16px; overflow-x:clip; }
  .lc-main { min-width:0; }
  .lc-topbar { padding:0 14px; }
  .lc-nav-burger { display:inline-flex; }
  /* sidebar becomes a slide-in drawer, out of flow so .lc-main takes the full width */
  .lc-side { position:fixed; top:0; left:0; height:100vh; max-height:100vh; z-index:50;
    width:min(86vw, 300px); flex-basis:auto; border-radius:0; transform:translateX(-100%);
    transition:transform .22s ease; box-shadow:var(--lc-sh-lift); }
  .lc-nav-toggle:checked + .lc-app .lc-side { transform:none; }
  .lc-nav-toggle:checked + .lc-app .lc-nav-backdrop { display:block; position:fixed; inset:0; z-index:40;
    background:rgba(20,20,30,.45); }
  /* compress the topbar so it fits a phone: drop the firm/user labels, shrink search to an icon */
  .lc-topbar { gap:8px; }
  .lc-topbar__firm, .lc-topbar__user { display:none; }
  .lc-cmdk-trigger { flex:none; width:38px; min-width:0; padding:0; justify-content:center; }
  .lc-cmdk-trigger span, .lc-cmdk-trigger kbd { display:none; }
  .lc-topbar__title { font-size:16px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* Thumb-friendly touch targets on phones (≥44px) — approvals + capture done one-handed (Simplicity #4) */
  .lc-btn, .lc-btn--sm, .lc-input, .lc-select, .lc-textarea { min-height:44px; }
  .lc-nav a, .lc-sub, .lc-nav summary { padding-top:11px; padding-bottom:11px; }
  /* approve/reject in the queue: full-width, stacked, easy to hit without mis-taps */
  #queue .approve, #queue .reject { flex:1 1 0; min-width:44px; }
}