/* ============================================================
   Locke Prime — UI design system
   Extracted verbatim from ui-preview/variant-b.html  (Fable, "Warm Paper")
   Tokens + shared components: sidebar, topbar, KPI cards, panels,
   quick-action buttons, focus list, empty state, table, badges, pills.
   ============================================================ */
  /* ═══ Warm Paper tokens on existing dashboard layout — v4 ═══
          left accent bars only · Times New Roman everywhere            */
  :root {
    --bg:        #FAF9F6;
    --surface:   #FFFFFF;
    --surface2:  #F6F4F0;
    --surface3:  #F0EDE7;
    --navy:      #17243A;
    --gold:      #B88A2E;
    --gold-soft: rgba(184,138,46,.10);
    --text:      #1C1A17;
    --muted:     #6E6A63;
    --border:    #E8E4DD;
    --ok:        #2F8F5B;
    --ok-soft:   rgba(47,143,91,.10);
    --warn:      #E0A040;
    --bad:       #C94343;
    --bad-soft:  rgba(201,67,67,.08);
    --ai:        #2F7DBD;
    --shadow-1:  0 1px 2px rgba(28,26,23,.05), 0 2px 8px rgba(28,26,23,.04);
    --shadow-2:  0 2px 4px rgba(28,26,23,.06), 0 8px 24px rgba(28,26,23,.08);
    --serif:     'Times New Roman', Times, serif;
    /* Top cards — canonical height (dashboard .kpi is the reference) */
    --top-card-pad-y: 18px;
    --top-card-pad-x: 20px;
    --top-card-min-h: 104px;
    --top-card-num: 28px;
    --top-card-lbl: 15px;
    --top-card-sub: 16px;
    /* Card title floor — matches Documents stat-lbl / panel phead reference */
    --card-title: var(--top-card-lbl);
    /* Page greeting — Dev Console reference */
    --page-title-size: 44px;
    --page-sub-size: 18px;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body { background:var(--bg); color:var(--text); font-family:var(--serif); font-size:16px; -webkit-font-smoothing:antialiased; }

  /* ── Main ── */
  .main { display:grid; grid-template-rows:68px 1fr; overflow:hidden; }
  body[data-content-font-size="13"] { --lp-content-font-size:13px; }
  body[data-content-font-size="15"] { --lp-content-font-size:15px; }
  body[data-content-font-size="17"] { --lp-content-font-size:17px; }
  body[data-content-font-size="20"] { --lp-content-font-size:20px; }
  body[data-content-font-size] .main :where(p, li, td, th, label, input, select, textarea, button, .pbody, .more, .meta, .muted, .greeting .sub) {
    font-size: var(--lp-content-font-size);
  }
  .topbar { display:flex; align-items:center; padding:0 24px; border-bottom:1px solid var(--border); background:var(--surface); }
  .topbar h1 { font-size:var(--page-title-size); font-weight:700; }
  .tools { margin-left:auto; display:flex; gap:10px; }
  .pill { display:flex; align-items:center; gap:7px; font-size:18px; padding:7px 14px; border:1px solid var(--border); border-radius:99px; background:var(--surface); cursor:pointer; font-family:var(--serif); color:var(--text); transition:box-shadow .15s ease, transform .15s ease; }
  .pill:hover { box-shadow:var(--shadow-1); transform:translateY(-1px); }
  .pill.logout { color:var(--bad); }
  .dot { width:7px; height:7px; border-radius:50%; background:var(--ok); }
  .content { overflow:auto; padding:18px 22px; }

  /* ── Top cards — dashboard .kpi (horizontal) + .top-card (stacked) share one height spec ── */
  .kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:14px; }
  .kpi { background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--ok); border-radius:12px; padding:var(--top-card-pad-y) var(--top-card-pad-x); min-height:var(--top-card-min-h); display:flex; gap:14px; align-items:flex-start; box-shadow:var(--shadow-1); cursor:pointer; transition:box-shadow .18s ease, transform .18s ease; }
  .kpi:hover { box-shadow:var(--shadow-2); transform:translateY(-2px); }
  .kpi.green  { border-left-color:var(--ok); }
  .kpi.red    { border-left-color:var(--bad); }
  .kpi.orange { border-left-color:var(--warn); }
  .kpi.blue   { border-left-color:var(--ai); }
  .kpi-icon { margin-top:2px; }
  .kpi-icon svg { width:22px; height:22px; stroke:var(--text); }
  .kpi-lbl { font-size:var(--top-card-lbl); letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:5px; }
  .kpi-n { font-size:var(--top-card-num); font-weight:800; line-height:1; }
  .kpi-s { font-size:var(--top-card-sub); color:var(--muted); margin-top:4px; }

  /* Top-card left accent: border-left uses --c from .ok/.warn/.bad/.gold/.ai (canonical — do not redefine per page). */
  .top-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-bottom:14px; }
  .top-cards--4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .top-cards--5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .top-cards--6 { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .top-cards--7 { grid-template-columns:repeat(7,minmax(0,1fr)); }
  .top-card { display:flex; flex-direction:column; align-items:flex-start; gap:5px; background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--c,var(--ai)); border-radius:12px; padding:var(--top-card-pad-y) var(--top-card-pad-x); min-height:var(--top-card-min-h); box-shadow:var(--shadow-1); font-family:var(--serif); text-align:left; }
  .top-card.ok { --c:var(--ok); } .top-card.warn { --c:var(--warn); } .top-card.bad { --c:var(--bad); } .top-card.gold { --c:var(--gold); } .top-card.ai { --c:var(--ai); }
  button.top-card { appearance:none; width:100%; cursor:pointer; font:inherit; color:inherit; transition:box-shadow .15s ease,transform .15s ease,border-color .15s ease; }
  button.top-card:hover { box-shadow:var(--shadow-2); transform:translateY(-2px); }
  .top-card.on { border-color:var(--c,var(--ai)); box-shadow:inset 0 0 0 1.5px var(--c,var(--ai)); background:rgba(90,160,219,.12); }
  .top-card.bad.on { background:var(--bad-soft); } .top-card.warn.on { background:var(--gold-soft); } .top-card.ok.on { background:var(--ok-soft); }
  .top-card.on .top-card-l { color:var(--text); }
  .top-card-n { font-size:var(--top-card-num); font-weight:800; color:var(--text); line-height:1; }
  .top-card-l { font-size:var(--top-card-lbl); letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); font-weight:600; }
  .top-card-s { font-size:var(--top-card-sub); color:var(--muted); min-height:1.25em; }
  .top-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; }
  .top-card-head svg { width:19px; height:19px; stroke:var(--muted); fill:none; flex:none; }
  @media (max-width:1180px) {
    .top-cards--7 { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .top-cards--6,.top-cards--5 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  }
  @media (max-width:720px) {
    .top-cards--7,.top-cards--6,.top-cards--5,.top-cards--4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  }

  /* ── Panels row — matches .mid-row ── */
  .row2 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:14px; }
  .row2 .panel { min-height:240px; }
  .panel { background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow-1); overflow:hidden; }
  .lp-accent { border-left:3px solid var(--lp-accent, var(--ai)); }
  .lp-accent.ai { --lp-accent:var(--ai); }
  .lp-accent.gold { --lp-accent:var(--gold); }
  .lp-accent.ok { --lp-accent:var(--ok); }
  .lp-accent.warn { --lp-accent:var(--warn); }
  .lp-accent.bad { --lp-accent:var(--bad); }
  .lp-accent.workspace { --lp-accent:var(--sec-workspace); }
  .lp-accent.analysis { --lp-accent:var(--sec-analysis); }
  .lp-accent.records { --lp-accent:var(--sec-records); }
  .lp-accent.command { --lp-accent:var(--sec-command); }

  /* Left accent bar — every surfaced panel/box unless explicitly opted out */
  .panel:not(.new-matter-panel):not(.accent-none),
  [class$="-filterpanel"]:not(.accent-none),
  [class$="-spotcol"]:not(.accent-none),
  .inbox-panel:not(.accent-none),
  .cal-surface:not(.accent-none) {
    border-left:3px solid var(--lp-accent, var(--ai));
  }

  /* Top-card KPI row — optional left icon column (matches dashboard .kpi) */
  .top-card.has-icon { flex-direction:row; align-items:flex-start; gap:14px; }
  .top-card-icon { margin-top:2px; display:flex; align-items:center; flex:none; }
  .top-card-icon svg { width:22px; height:22px; stroke:var(--muted); fill:none; }
  .top-card-stack { display:flex; flex-direction:column; align-items:flex-start; gap:5px; flex:1; min-width:0; }
  .phead { display:flex; align-items:center; justify-content:space-between; padding:13px 18px; border-bottom:1px solid var(--border); background:var(--surface2); }
  .phead h2 { font-size:var(--card-title); font-weight:700; display:flex; gap:8px; align-items:center; }
  .stat-lbl { font-size:var(--card-title); letter-spacing:1.3px; text-transform:uppercase; color:var(--muted); font-weight:600; }
  .cal-spothead h2,
  .inbox-spothead h2,
  .m-spothead h2,
  .rv-spothead h2,
  .wr-spothead h2 { font-size:var(--card-title); }
  .phead h2 .emoji { font-size:17px; line-height:1; }
  .phead h2 svg { width:17px; height:17px; stroke:var(--text); }
  .phead .more { font-size:18px; color:var(--muted); text-decoration:none; font-weight:700; white-space:nowrap; }
  .phead .more:hover { color:var(--navy); }
  .pbody { padding:14px 16px 16px; }

  .qa { display:flex; flex-direction:column; gap:10px; }
  .qbtn { display:flex; align-items:center; gap:10px; padding:11px 13px; border:1px solid var(--border); border-radius:9px; background:var(--surface); cursor:pointer; font-family:var(--serif); font-size:14px; font-weight:700; color:var(--text); transition:box-shadow .15s ease, transform .15s ease, border-color .15s ease; text-decoration:none; }
  .qbtn:hover { box-shadow:var(--shadow-2); transform:translateY(-1px); border-color:var(--gold); }
  .qbtn svg { width:18px; height:18px; stroke:var(--navy); flex-shrink:0; }
  .qbtn.primary { background:var(--navy); border-color:var(--navy); color:#F6F4F0; }
  .qbtn.primary svg { stroke:#E9D8AE; }

  .fitem { display:flex; align-items:center; gap:12px; padding:11px 4px; border-bottom:1px solid var(--surface3); cursor:pointer; border-radius:6px; transition:background .15s ease; }
  .fitem:hover { background:var(--surface2); }
  .fitem:last-child { border-bottom:none; }
  .fdot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  .fitem .t { font-size:var(--card-title); font-weight:700; }
  .fitem .s { font-size:18px; color:var(--muted); margin-top:2px; }
  .fitem .when { margin-left:auto; font-size:17px; font-weight:700; color:var(--bad); background:var(--bad-soft); padding:4px 10px; border-radius:99px; white-space:nowrap; }
  .fitem .when.soon { color:#96701F; background:var(--gold-soft); }

  .empty { display:flex; flex-direction:column; align-items:center; text-align:center; padding:26px 16px 22px; }
  .empty .glyph { width:42px; height:42px; border-radius:50%; background:var(--surface2); display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
  .empty .glyph svg { width:19px; height:19px; stroke:var(--muted); }
  .empty h3 { font-size:16.5px; font-weight:700; }
  .empty p { color:var(--muted); font-size:18px; margin:5px 0 14px; }
  .btn { display:inline-flex; align-items:center; gap:7px; padding:8px 17px; border-radius:8px; border:1px solid var(--border); background:var(--surface); font-family:var(--serif); font-size:18px; font-weight:700; color:var(--navy); cursor:pointer; transition:box-shadow .15s ease, transform .15s ease; }
  .btn:hover { box-shadow:var(--shadow-1); transform:translateY(-1px); }
  .btn.solid { background:var(--navy); color:#fff; border-color:var(--navy); }

  table { width:100%; border-collapse:collapse; }
  th { font-size:16px; font-weight:700; letter-spacing:.12em; color:var(--muted); text-align:left; padding:11px 18px; background:var(--surface2); border-bottom:1px solid var(--border); }
  td { padding:13px 18px; border-bottom:1px solid var(--surface3); font-size:14px; }
  tr:last-child td { border-bottom:none; }
  tbody tr { cursor:pointer; transition:background .12s ease; }
  tbody tr:hover { background:var(--surface2); }
  td .matter { font-weight:700; } td .sub { font-size:18px; color:var(--muted); margin-top:2px; }
  .badge { font-size:17px; font-weight:700; padding:4px 11px; border-radius:99px; }
  .badge.red { color:var(--bad); background:var(--bad-soft); }
  .badge.gold { color:#96701F; background:var(--gold-soft); }
  .badge.green { color:var(--ok); background:var(--ok-soft); }
  .rowact { font-size:18px; font-weight:700; color:var(--ai); }

  /* ============================================================
     CANONICAL ADDITIONS — Variant C (locked 2026-06-15)
     Dark theme · strategic section colors · greeting header
     (no title bar) · KPI semantic chips · 2x2 quick-action grid.
     ============================================================ */

  /* Light-mode section hues + nav-icon. Consumed by non-sidebar elements
     (e.g. support.html .support-card) so they must live here; sidebar-standard.css
     only defines these for [data-theme="dark"] and as sidebar-scoped fallbacks. */
  :root {
    --sec-workspace: #17243A;
    --sec-analysis:  #2F7DBD;
    --sec-records:   #2F8F5B;
    --sec-command:   #C0623A;
    --nav-icon:      #57534B;
  }

  /* ── DARK THEME — blue (locked per Randy 2026-06-15). Do not change. ── */
  [data-theme="dark"] {
    --bg:        #080B10;
    --surface:   #121722;
    --surface2:  #161D2A;
    --surface3:  #1A2030;
    --navy:      #C9A84C;   /* gold primary accent in dark */
    --gold:      #C9A84C;
    --gold-soft: rgba(201,168,76,.14);
    --text:      #F4F6FA;
    --muted:     #C8D0DC;
    --border:    #232B3A;
    --ok:        #4FB07A;  --ok-soft:  rgba(79,176,122,.15);
    --warn:      #E0A84A;
    --bad:       #E26D6D;  --bad-soft: rgba(226,109,109,.15);
    --ai:        #5AA0DB;
    --shadow-1:  0 2px 8px rgba(0,0,0,.40);
    --shadow-2:  0 4px 20px rgba(0,0,0,.52);
  }
  .badge.gold, .fitem .when.soon { color: var(--gold); }

  /* ── Greeting header replaces the title bar ── */
  .main { display:block; overflow:auto; }
  .content { padding:24px 28px 48px; }
  .page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:22px; }
  .page-head .greeting h1,
  .greeting h1 { font-size:var(--page-title-size); line-height:1.05; font-weight:700; margin:0; letter-spacing:0; }
  .greeting .sub { color:var(--muted); font-size:var(--page-sub-size); line-height:1.45; margin-top:7px; }
  .greeting .sub b { color:var(--text); font-weight:700; }
  .greeting .sub .alert { color:var(--bad); font-weight:700; }
  .util { display:flex; gap:9px; align-items:center; flex-shrink:0; }
  .util .pill svg { width:24px; height:24px; stroke-width:1.7; flex:none; }

  /* Panel-header icons */
  .phead h2 svg { width:19px; height:19px; }
  /* ic-focus sets its own pink/blue per-path strokes. */

  /* ── AI trust footer (grounding + audit) — top-tier standard, every AI output ── */
  .ai-trust { display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; justify-content:space-between;
              margin-top:14px; padding-top:11px; border-top:1px solid var(--border); font-size:16px; color:var(--muted); }
  .ai-trust .ait-l { display:inline-flex; align-items:center; gap:7px; font-weight:600; color:var(--ai); }
  .ai-trust .ait-l svg { width:13px; height:13px; stroke:var(--ai); flex:none; }
  .ai-trust .ait-r { font-variant-numeric:tabular-nums; letter-spacing:.2px; }
  .ai-trust .ait-r a { color:var(--gold); text-decoration:none; font-weight:600; }
  .ai-trust .ait-r a:hover { text-decoration:underline; }

  .lp-grounding { margin-top:10px; padding-top:10px; border-top:1px solid var(--border); font-size:15px; }
  .lp-grounding-head { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:8px; }
  .lp-grounding-score { color:var(--muted); font-size:14px; text-transform:uppercase; letter-spacing:.3px; font-weight:700; }
  .lp-grounding-note, .lp-grounding-route { color:var(--muted); font-size:14px; margin-bottom:6px; }
  .lp-grounding-markers { margin:0; padding-left:18px; color:var(--muted); }
  .lp-grounding-markers .warn { color:var(--warn); }
  .lp-grounding-markers .error { color:var(--bad); }
  .lp-grounding-sources { display:grid; gap:8px; margin-top:8px; }
  .lp-grounding-source { background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:10px 12px; }

  /* KPI: keep the left accent bar (the status signal) — icons are MONOCHROME,
     since the colored sidebar already does the wayfinding (per Randy). */
  .kpi-icon { margin-top:2px; display:flex; align-items:center; }
  .kpi-icon svg { width:22px; height:22px; stroke:var(--muted); fill:none; }

  .phead h2 svg.ic-quick { fill:#ff7a3d; stroke:#ff7a3d; }

  .dashboard-row { grid-template-columns:minmax(0,1.25fr) minmax(0,1.25fr) minmax(150px,.7fr); }
  .qgrid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .qgrid .qbtn { flex-direction:column; align-items:flex-start; gap:11px; padding:14px 14px 13px; }
  .qgrid .qbtn .chip { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center;
    background: color-mix(in srgb, var(--c, var(--navy)) 15%, transparent); }
  .qgrid .qbtn .chip svg { width:18px; height:18px; stroke: var(--c, var(--navy)); }
  .qgrid .qbtn .qlabel { font-weight:700; font-size:var(--card-title); }
  .qgrid .qbtn.primary { grid-column:1 / -1; flex-direction:row; align-items:center; gap:10px; }
  .qa-workspace { --c: var(--sec-workspace); }
  .qa-analysis  { --c: var(--sec-analysis); }
  .qa-records   { --c: var(--sec-records); }
  .qa-command   { --c: var(--sec-command); }

  .new-matter-panel { min-height:240px; border-left:3px solid var(--gold); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; text-decoration:none; color:var(--text); transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
  .new-matter-panel:hover { box-shadow:var(--shadow-2); transform:translateY(-2px); border-color:var(--gold); }
  .new-matter-icon { width:54px; height:54px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--gold-soft); color:var(--gold); }
  .new-matter-icon svg { width:28px; height:28px; stroke:currentColor; }
  .new-matter-label { font-size:22px; font-weight:700; }