/* ============================================================
   Lectual — Attorney CRM app shell + views
   Layers on lectual.css. Theme tokens overridden at :root by JS.
   ============================================================ */

:root{
  /* firm-theme token contract (defaults → Lectual cobalt) */
  --firm-primary: var(--accent);
  --firm-primary-hover: var(--accent-press);
  --firm-on-primary: var(--on-accent);
  --firm-accent: var(--accent);
  --firm-radius: 13px;
  --firm-font-display: var(--font-display);

  /* chrome (Lectual rail) */
  --rail-bg:#161310;
  --rail-ink:#B6AD9C;
  --rail-ink-strong:#F4EEE2;
  --rail-seg:#857a68;
  --rail-hover:rgba(255,255,255,.06);
}

html,body{height:100%}
body{overflow:hidden;background:var(--paper)}

.app{display:grid;grid-template-columns:232px 1fr;height:100vh}

/* ============================ RAIL ============================ */
.rail{background:var(--rail-bg);color:var(--rail-ink);display:flex;flex-direction:column;padding:18px 14px}
.rail .brand{display:flex;align-items:center;gap:9px;padding:6px 8px 8px}
.rail .brand .echo{color:var(--rail-ink-strong);font-size:18px}
.rail .firmbadge{margin:6px 8px 16px;padding:8px 11px;border:1px solid rgba(255,255,255,.1);border-radius:10px;display:flex;align-items:center;gap:9px}
.rail .firmbadge .fb-logo{width:26px;height:26px;border-radius:7px;background:var(--firm-primary);color:var(--firm-on-primary);display:grid;place-items:center;font-family:var(--firm-font-display);font-weight:700;font-size:13px;flex:0 0 auto}
.rail .firmbadge .fb-meta{line-height:1.15;overflow:hidden}
.rail .firmbadge .fb-name{font-size:12.5px;color:var(--rail-ink-strong);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail .firmbadge .fb-tier{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--rail-seg)}
.rail .seg{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--rail-seg);margin:16px 0 6px 10px}
.rail a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:var(--rail-ink);text-decoration:none;font-size:14px;font-weight:500;transition:.14s;cursor:pointer;position:relative}
.rail a:hover{background:var(--rail-hover);color:#fff}
.rail a.on{background:var(--firm-primary);color:var(--firm-on-primary);font-weight:700}
.rail a svg{width:17px;height:17px;flex:0 0 auto}
.rail a .badge{margin-left:auto;font-family:var(--font-mono);font-size:10px;background:rgba(255,255,255,.12);color:#fff;border-radius:20px;padding:1px 7px;font-weight:700}
.rail a.on .badge{background:rgba(0,0,0,.18)}
.rail .me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px 8px;border-top:1px solid rgba(255,255,255,.08)}
.rail .me .mav{width:34px;height:34px;border-radius:9px;background:#3a4f8f;display:grid;place-items:center;font-family:var(--firm-font-display);font-weight:700;color:#fff;font-size:14px}
.rail .me .nm{font-size:13px;color:var(--rail-ink-strong);font-weight:600}
.rail .me .ro{font-size:11px;color:var(--rail-seg)}

/* ============================ MAIN ============================ */
.main{display:flex;flex-direction:column;overflow:hidden;background:var(--paper)}
.topbar{height:64px;flex:0 0 auto;display:flex;align-items:center;gap:16px;padding:0 26px;border-bottom:1px solid var(--border);background:var(--paper-2)}
.topbar .eyebrow{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.topbar h1{font-family:var(--firm-font-display);font-weight:700;font-size:21px;letter-spacing:-.02em;line-height:1.05}
.topbar .sp{flex:1}
.search{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border-2);border-radius:11px;padding:8px 13px;width:240px;color:var(--ink-3)}
.search svg{width:17px;height:17px;flex:0 0 auto}
.search input{border:none;background:none;outline:none;font-family:var(--font-body);font-size:14px;color:var(--ink);width:100%}
.iconbtn{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;cursor:pointer;border:1px solid var(--border-2);background:var(--surface);color:var(--ink);transition:.16s;position:relative;flex:0 0 auto}
.iconbtn svg{width:18px;height:18px}
.iconbtn:hover{border-color:var(--ink-3)}
.iconbtn .ndot{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--firm-primary);border:1.5px solid var(--surface)}
.scrollarea{flex:1;overflow-y:auto}

/* button uses firm primary */
.btn-primary{background:var(--firm-primary);color:var(--firm-on-primary);box-shadow:0 8px 20px -10px color-mix(in srgb,var(--firm-primary) 70%,transparent)}
.btn-primary:hover{background:var(--firm-primary-hover)}
.btn-ghost{color:var(--firm-primary)}
.btn-ghost:hover{background:color-mix(in srgb,var(--firm-primary) 13%,transparent)}

/* ============================ OPS HOME (C1) ============================ */
.ops{padding:24px 26px 60px;max-width:1280px}
.ops-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;align-items:start}
@media(max-width:1080px){.ops-grid{grid-template-columns:1fr}}

.briefing{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:26px 28px;position:relative;overflow:hidden;box-shadow:var(--shadow-sm)}
.briefing::before{content:'';position:absolute;inset:0 auto 0 0;width:4px;background:var(--firm-primary)}
.briefing .bh{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.briefing .ai-ic{width:30px;height:30px;border-radius:9px;background:color-mix(in srgb,var(--firm-primary) 14%,var(--surface));color:var(--firm-primary);display:grid;place-items:center}
.briefing .bh .t{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.briefing .bh .stamp{margin-left:auto;font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3)}
.briefing .greet{font-family:var(--firm-font-display);font-weight:700;font-size:23px;letter-spacing:-.02em;margin-bottom:12px}
.briefing p{font-size:15px;color:var(--ink-2);line-height:1.55;margin-bottom:12px;max-width:64ch}
.briefing p b{color:var(--ink);font-weight:700}
.briefing .pri{display:flex;flex-direction:column;gap:9px;margin:16px 0 6px}
.briefing .pri .pr{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--ink-2)}
.briefing .pri .pr .n{width:22px;height:22px;border-radius:7px;background:var(--paper);border:1px solid var(--border);display:grid;place-items:center;font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--firm-primary);flex:0 0 auto}
.briefing .pri .pr b{color:var(--ink)}
.briefing .bfoot{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}

.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px 17px;box-shadow:var(--shadow-sm)}
.kpi .l{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.kpi b{font-family:var(--firm-font-display);font-weight:800;font-size:30px;letter-spacing:-.02em;display:block;line-height:1.05;margin-top:6px}
.kpi .d{font-size:11.5px;font-weight:700;margin-top:3px}
.kpi .d.up{color:var(--protected)}
.kpi .d.dn{color:var(--danger)}
.kpi .d.flat{color:var(--ink-3);font-weight:600}

.colcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.colcard .ch{display:flex;align-items:center;gap:9px;padding:15px 18px;border-bottom:1px solid var(--border)}
.colcard .ch .t{font-family:var(--firm-font-display);font-weight:700;font-size:15.5px;letter-spacing:-.01em}
.colcard .ch .more{margin-left:auto;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--firm-primary);cursor:pointer;background:none;border:none}
.colcard .ch .more:hover{text-decoration:underline}

.agenda .ag{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;padding:13px 18px;border-bottom:1px solid var(--border);cursor:pointer;transition:.12s}
.agenda .ag:last-child{border-bottom:none}
.agenda .ag:hover{background:var(--paper-2)}
.agenda .ag .tm{text-align:right}
.agenda .ag .tm b{font-family:var(--font-mono);font-weight:700;font-size:14px;display:block;letter-spacing:-.01em}
.agenda .ag .tm span{font-family:var(--font-mono);font-size:10px;color:var(--ink-3)}
.agenda .ag .ki{font-size:11px;font-family:var(--font-mono);letter-spacing:.04em;color:var(--ink-3);text-transform:uppercase}
.agenda .ag .nm{font-weight:700;font-size:14px;margin-top:1px}
.agenda .ag .co{font-size:12px;color:var(--ink-3)}

.feed{padding:6px 0}
.feed .fr{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:11px 18px;position:relative}
.feed .fr .ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto}
.feed .fr .ic svg{width:15px;height:15px}
.feed .fr .tt{font-size:13.5px;color:var(--ink-2);line-height:1.4}
.feed .fr .mt{font-family:var(--font-mono);font-size:10px;color:var(--ink-3);margin-top:2px;letter-spacing:.02em}

.stalled .sr{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--border);cursor:pointer;transition:.12s}
.stalled .sr:last-child{border-bottom:none}
.stalled .sr:hover{background:var(--paper-2)}
.stalled .sr .av{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:#fff;font-family:var(--firm-font-display);font-weight:700;font-size:14px}
.stalled .sr .nm{font-weight:700;font-size:13.5px}
.stalled .sr .meta{font-size:11.5px;color:var(--warning);font-weight:700}

/* ============================ PIPELINE (C2) ============================ */
.pipe{display:flex;flex-direction:column;height:100%;overflow:hidden}
.filterbar{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:14px 26px;border-bottom:1px solid var(--border);background:var(--paper-2);flex-wrap:wrap}
.filterbar .seg-toggle{display:flex;background:var(--surface);border:1px solid var(--border-2);border-radius:10px;padding:3px;gap:3px}
.filterbar .seg-toggle button{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:7px 13px;border-radius:7px;border:none;background:none;color:var(--ink-2);cursor:pointer;font-weight:700;display:flex;align-items:center;gap:7px}
.filterbar .seg-toggle button.on{background:var(--ink);color:var(--paper)}
.filterbar .fdrop{position:relative}
.filterbar .chip{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.02em;padding:8px 13px;border-radius:9px;border:1px solid var(--border-2);background:var(--surface);color:var(--ink-2);cursor:pointer;display:flex;align-items:center;gap:7px;transition:.14s}
.filterbar .chip:hover{border-color:var(--ink-3)}
.filterbar .chip.active{background:color-mix(in srgb,var(--firm-primary) 13%,var(--surface));border-color:transparent;color:var(--firm-primary);font-weight:700}
.filterbar .sp{flex:1}

.board{flex:1;overflow-x:auto;overflow-y:hidden;display:flex;gap:14px;padding:18px 26px 24px;align-items:stretch}
.kcol{flex:0 0 268px;display:flex;flex-direction:column;background:var(--paper-2);border:1px solid var(--border);border-radius:var(--r);max-height:100%}
.kcol .kh{padding:13px 14px 11px;border-bottom:1px solid var(--border)}
.kcol .kh .ti{display:flex;align-items:center;gap:8px}
.kcol .kh .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.kcol .kh .nm{font-weight:700;font-size:13.5px;letter-spacing:-.01em}
.kcol .kh .ct{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--ink-3);font-weight:700}
.kcol .kh .val{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3);margin-top:5px;letter-spacing:.02em}
.urg{display:flex;gap:3px;margin-top:9px}
.urg i{height:5px;flex:1;border-radius:3px;background:var(--border-2)}
.urg i.h{background:var(--danger)}.urg i.m{background:var(--warning)}.urg i.l{background:var(--protected)}
.klist{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:9px;min-height:60px}
.klist.dragover{background:color-mix(in srgb,var(--firm-primary) 8%,var(--paper-2));outline:2px dashed color-mix(in srgb,var(--firm-primary) 40%,transparent);outline-offset:-6px;border-radius:8px}
.kcard{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:12px 13px;cursor:grab;box-shadow:var(--shadow-sm);transition:.12s;user-select:none}
.kcard:hover{border-color:var(--ink-3);transform:translateY(-1px)}
.kcard.dragging{opacity:.4}
.kcard .top{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.kcard .av{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#fff;font-family:var(--firm-font-display);font-weight:700;font-size:13px;flex:0 0 auto}
.kcard .top > div{min-width:0;flex:1}
.kcard .nm{font-weight:700;font-size:13.5px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kcard .co{font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kcard .sc{flex:0 0 auto;font-family:var(--firm-font-display);font-weight:800;font-size:17px;letter-spacing:-.02em}
.kcard .meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:4px}
.kcard .pchip{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;padding:3px 7px;border-radius:6px;background:var(--paper-2);color:var(--ink-2);border:1px solid var(--border)}
.kcard .udot{width:7px;height:7px;border-radius:50%;margin-left:auto}
.kcard .val{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);font-weight:700}

/* table mode */
.ptable{flex:1;overflow:auto;padding:0 26px 24px}
.ptbl{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin-top:4px}
.ptbl th{position:sticky;top:0;background:var(--paper-2);text-align:left;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer;white-space:nowrap}
.ptbl th .ar{opacity:.5;margin-left:4px}
.ptbl td{padding:13px 16px;border-bottom:1px solid var(--border);font-size:13.5px;vertical-align:middle}
.ptbl tr:last-child td{border-bottom:none}
.ptbl tbody tr{cursor:pointer;transition:.1s}
.ptbl tbody tr:hover{background:var(--paper-2)}
.ptbl .tname{display:flex;align-items:center;gap:11px}
.ptbl .av{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:#fff;font-family:var(--firm-font-display);font-weight:700;font-size:13px;flex:0 0 auto}
.ptbl .nm{font-weight:700}
.ptbl .co{font-size:12px;color:var(--ink-3)}
.ptbl .stagepill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600}
.ptbl .stagepill .dot{width:8px;height:8px;border-radius:50%}
.ptbl .scn{font-family:var(--firm-font-display);font-weight:800;font-size:17px;letter-spacing:-.02em}

/* status / score helpers reused */
.stbadge{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:6px;font-weight:700;display:inline-block}
.stbadge.Hot{background:color-mix(in srgb,var(--firm-primary) 14%,var(--surface));color:var(--firm-primary)}
.stbadge.New{background:var(--protected-bg);color:var(--protected)}
.stbadge.Nurturing{background:var(--warning-bg);color:var(--warning)}

/* ============================ LEAD DETAIL (C3) ============================ */
.lead3{display:grid;grid-template-columns:300px 1fr 280px;height:100%;overflow:hidden}
@media(max-width:1180px){.lead3{grid-template-columns:1fr 280px}.lead3 .ident{display:none}}
@media(max-width:820px){.lead3{grid-template-columns:1fr}.lead3 .rail3{display:none}}

.ident{border-right:1px solid var(--border);overflow-y:auto;padding:24px 22px;background:var(--paper-2)}
.ident .big-av{width:64px;height:64px;border-radius:16px;display:grid;place-items:center;color:#fff;font-family:var(--firm-font-display);font-weight:800;font-size:26px;margin-bottom:14px}
.ident .nm{font-family:var(--firm-font-display);font-weight:700;font-size:22px;letter-spacing:-.02em;line-height:1.05}
.ident .co{font-size:14px;color:var(--ink-2);margin-top:2px}
.ident .meta-list{margin:18px 0;display:flex;flex-direction:column;gap:11px}
.ident .ml{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2)}
.ident .ml svg{width:15px;height:15px;color:var(--ink-3);flex:0 0 auto}
.ident .ml .v{font-family:var(--font-mono);font-size:12px}
.ident .tagwrap{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}

.center{overflow-y:auto;padding:24px 26px 40px}
.scorecard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.scorecard .ct{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.breakdown{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.gauge{position:relative;flex:0 0 auto}
.gauge svg{transform:rotate(-90deg);display:block}
.gauge .gv{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.gauge .gv b{font-family:var(--firm-font-display);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.gauge .gv span{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.dims{flex:1;min-width:220px;display:flex;flex-direction:column;gap:9px}
.dimrow{display:grid;grid-template-columns:128px 1fr auto;gap:10px;align-items:center;font-size:12.5px}
.dimrow .dn{color:var(--ink-2)}
.dimrow .track{height:7px;border-radius:5px;background:var(--border);overflow:hidden}
.dimrow .fill{height:100%;border-radius:5px;transition:width .8s cubic-bezier(.22,1,.36,1)}
.dimrow .pv{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);width:30px;text-align:right}

.aicard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;margin-bottom:16px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.aicard::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--firm-primary),transparent)}
.aicard .ct{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.aicard .ai-ic{width:24px;height:24px;border-radius:7px;background:var(--firm-primary);color:var(--firm-on-primary);display:grid;place-items:center}
.aicard .regen{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--firm-primary);background:none;border:none;cursor:pointer;margin-left:auto}
.aicard .regen:hover{text-decoration:underline}
.aicard .summary{font-size:14.5px;color:var(--ink-2);line-height:1.55;margin-bottom:16px}
.flags{display:flex;flex-direction:column;gap:9px}
.flag{display:flex;gap:11px;align-items:flex-start;padding:11px 13px;border-radius:10px;font-size:13px;line-height:1.4}
.flag.high{background:color-mix(in srgb,var(--danger) 10%,var(--surface))}
.flag.med{background:var(--warning-bg)}
.flag.low{background:var(--paper)}
.flag .fi{width:18px;height:18px;flex:0 0 auto;margin-top:1px}
.flag.high .fi{color:var(--danger)}.flag.med .fi{color:var(--warning)}.flag.low .fi{color:var(--ink-3)}
.flag .ft{color:var(--ink-2)}
.flag.none{color:var(--protected);background:var(--protected-bg);font-weight:600}
.opener{background:var(--paper);border-left:3px solid var(--firm-primary);border-radius:0 8px 8px 0;padding:11px 14px;font-size:14px;font-style:italic;color:var(--ink);margin-top:14px}
.pkg{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--border-2)}
.pkg .pl{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.pkg .pv{font-weight:700;font-size:14px}

.tlcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-sm)}
.tlcard .ct{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}
.timeline{display:flex;flex-direction:column}
.tlrow{display:grid;grid-template-columns:auto 1fr;gap:13px;padding-bottom:16px;position:relative}
.tlrow:not(:last-child)::before{content:'';position:absolute;left:13px;top:28px;bottom:0;width:1.5px;background:var(--border)}
.tlrow .tdot{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;z-index:1;flex:0 0 auto}
.tlrow .tdot svg{width:14px;height:14px}
.tlrow .tt{font-size:13.5px;color:var(--ink);line-height:1.4}
.tlrow .tm{font-family:var(--font-mono);font-size:10px;color:var(--ink-3);margin-top:2px;letter-spacing:.02em}
.tlrow .tm .actor{color:var(--ink-2)}

/* actions rail */
.rail3{border-left:1px solid var(--border);overflow-y:auto;padding:22px 20px;background:var(--paper-2);display:flex;flex-direction:column;gap:18px}
.rail3 .blk .lab{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.stage-select{display:flex;flex-direction:column;gap:5px}
.stage-opt{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:9px;border:1px solid var(--border);background:var(--surface);cursor:pointer;font-size:12.5px;transition:.12s}
.stage-opt:hover{border-color:var(--ink-3)}
.stage-opt.on{border-color:var(--firm-primary);background:color-mix(in srgb,var(--firm-primary) 9%,var(--surface));font-weight:700}
.stage-opt .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.tageditor{display:flex;flex-wrap:wrap;gap:7px}
.tagx{font-family:var(--font-mono);font-size:11px;padding:5px 9px;border-radius:8px;background:var(--surface);border:1px solid var(--border-2);color:var(--ink-2);display:flex;align-items:center;gap:6px}
.tagx .x{cursor:pointer;color:var(--ink-3);font-weight:700}
.tagx .x:hover{color:var(--danger)}
.tagx.add{cursor:pointer;border-style:dashed;color:var(--firm-primary)}
.rail3 .act-list{display:flex;flex-direction:column;gap:8px}
.actbtn{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:10px;border:1px solid var(--border-2);background:var(--surface);color:var(--ink);font-size:13.5px;font-weight:600;cursor:pointer;transition:.12s;font-family:var(--font-body);text-align:left;width:100%}
.actbtn:hover{border-color:var(--firm-primary);background:color-mix(in srgb,var(--firm-primary) 7%,var(--surface))}
.actbtn svg{width:16px;height:16px;color:var(--firm-primary);flex:0 0 auto}

.lead3 .l3head{grid-column:1/-1}

/* shimmer */
.shim{position:relative;overflow:hidden}
.shim::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface) 70%,#fff),transparent);transform:translateX(-100%);animation:shim 1.1s infinite}
@keyframes shim{to{transform:translateX(100%)}}

/* toast */
.toaster{position:fixed;right:20px;bottom:20px;z-index:200;display:flex;flex-direction:column;gap:10px}
.toast{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--protected);border-radius:11px;box-shadow:var(--shadow-lg);padding:13px 16px;display:flex;align-items:center;gap:11px;min-width:240px;animation:tin .25s cubic-bezier(.22,1,.36,1)}
.toast.err{border-left-color:var(--danger)}
.toast .tt{font-size:13.5px;font-weight:600;color:var(--ink)}
@keyframes tin{from{opacity:0;transform:translateX(20px)}}

/* scrollbar */
.scrollbar-thin::-webkit-scrollbar{width:9px;height:9px}
.scrollbar-thin::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:8px}
.scrollbar-thin::-webkit-scrollbar-track{background:transparent}

/* ============================ AGENTS (C4) ============================ */
.agents{padding:24px 26px 60px}
.agents-inner{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:20px}

.ag-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.ag-kpis{grid-template-columns:repeat(2,1fr)}}
.ag-kpis .kpi b .of{font-family:var(--font-mono);font-size:15px;font-weight:700;color:var(--ink-3);letter-spacing:0;margin-left:3px}

/* review queue */
.rq::before,.rq-empty::before{content:'';position:absolute}
.rq{position:relative;border:1px solid var(--border);overflow:hidden}
.rq .ch{position:relative;border-left:3px solid var(--warning)}
.rq .ch .rq-count{font-family:var(--font-mono);font-size:11px;font-weight:700;background:var(--warning);color:#fff;border-radius:20px;padding:1px 8px;margin-left:2px}
.rq .ch .rq-sub{margin-left:auto;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink-3);text-transform:none}
.rq-row{display:grid;grid-template-columns:auto 1fr;gap:13px;padding:16px 18px;border-bottom:1px solid var(--border)}
.rq-row:last-child{border-bottom:none}
.rq-sev{width:9px;height:9px;border-radius:50%;margin-top:6px}
.rq-sev.high{background:var(--danger)}
.rq-sev.med{background:var(--warning)}
.rq-sev.low{background:var(--ink-3)}
.rq-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:5px}
.rq-kind{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.rq-lead{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;color:var(--firm-primary);cursor:pointer;padding:2px 7px;border-radius:6px;background:color-mix(in srgb,var(--firm-primary) 10%,var(--surface))}
.rq-lead:hover{text-decoration:underline}
.rq-title{font-weight:700;font-size:15px;letter-spacing:-.01em;line-height:1.25}
.rq-detail{font-size:13px;color:var(--ink-2);line-height:1.5;margin-top:5px;max-width:74ch}
.rq-actions{display:flex;align-items:center;gap:9px;margin-top:12px}
.rq-dismiss{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);background:none;border:none;cursor:pointer;padding:6px 4px}
.rq-dismiss:hover{color:var(--danger)}
.rq-clear{display:flex;gap:13px;align-items:flex-start;padding:18px;color:var(--ink-2)}
.rq-clear svg{width:20px;height:20px;color:var(--protected);flex:0 0 auto;margin-top:1px}
.rq-clear b{display:block;color:var(--ink);font-size:14.5px;margin-bottom:2px}
.rq-clear span{font-size:13px;line-height:1.45}

/* roster header */
.ag-roster-head{display:flex;align-items:baseline;gap:12px;margin-top:6px;flex-wrap:wrap}
.ag-roster-head h2{font-family:var(--firm-font-display);font-weight:700;font-size:19px;letter-spacing:-.02em}
.ag-roster-head .arh-sub{font-size:13px;color:var(--ink-3)}
.ag-roster-head .sp{flex:1}

/* roster grid */
.ag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(326px,1fr));gap:16px}
.acard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 19px 16px;box-shadow:var(--shadow-sm);cursor:pointer;transition:.15s;display:flex;flex-direction:column}
.acard:hover{border-color:var(--ink-3);transform:translateY(-2px);box-shadow:var(--shadow)}
.acard.paused{opacity:.72}
.acard.paused .ac-ic{background:var(--paper-2);color:var(--ink-3)}
.ac-head{display:flex;align-items:center;gap:12px}
.ac-ic{width:42px;height:42px;border-radius:12px;background:color-mix(in srgb,var(--firm-primary) 13%,var(--surface));color:var(--firm-primary);display:grid;place-items:center;flex:0 0 auto}
.ac-ic svg{width:21px;height:21px}
.ac-id{flex:1;min-width:0}
.ac-name{font-family:var(--firm-font-display);font-weight:700;font-size:16.5px;letter-spacing:-.01em;line-height:1.1}
.ac-cat{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:2px}
.ac-role{font-size:13px;color:var(--ink-2);line-height:1.5;margin:13px 0 0;min-height:39px}
.ac-mid{display:flex;align-items:center;gap:9px;margin:14px 0 4px}

/* autonomy pill */
.autopill{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:5px 10px;border-radius:20px;white-space:nowrap}
.autopill svg{width:12px;height:12px}
.autopill.auto{background:var(--protected-bg);color:var(--protected)}
.autopill.review{background:color-mix(in srgb,var(--firm-primary) 13%,var(--surface));color:var(--firm-primary)}
.autopill.off{background:var(--paper-2);color:var(--ink-3);border:1px solid var(--border-2)}
.ac-review{font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--warning);background:var(--warning-bg);border-radius:20px;padding:4px 9px;white-space:nowrap}

/* sparkline */
.ac-spark{margin-left:auto;display:flex;align-items:flex-end;gap:2px;width:58px;height:22px}
.ac-spark i{flex:1;border-radius:2px;min-height:3px}

/* stats */
.ac-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;padding:13px 0 0;border-top:1px solid var(--border)}
.ac-stat{text-align:left}
.ac-stat b{font-family:var(--firm-font-display);font-weight:800;font-size:18px;letter-spacing:-.02em;display:block;line-height:1}
.ac-stat span{font-size:10.5px;color:var(--ink-3);margin-top:3px;display:block;line-height:1.2}
.ac-foot{display:flex;align-items:center;gap:10px;margin-top:14px}
.ac-meta{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3);display:flex;align-items:center;gap:7px;letter-spacing:.02em}
.livedot{width:7px;height:7px;border-radius:50%;background:var(--protected);box-shadow:0 0 0 0 var(--protected);animation:livepulse 2.2s infinite}
@keyframes livepulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--protected) 55%,transparent)}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}
.ac-cfg{margin-left:auto;display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;font-weight:700;color:var(--firm-primary);background:none;border:none;cursor:pointer;padding:6px 4px}
.ac-cfg svg{width:14px;height:14px}
.ac-cfg:hover{text-decoration:underline}

/* switch */
.aswitch{width:40px;height:23px;border-radius:20px;background:var(--border-2);border:none;cursor:pointer;position:relative;flex:0 0 auto;transition:background .2s;padding:0}
.aswitch .knob{position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .2s cubic-bezier(.22,1,.36,1)}
.aswitch.on{background:var(--protected)}
.aswitch.on .knob{left:20px}

/* disclaimer */
.ag-disclaimer{display:flex;align-items:center;gap:11px;font-size:12.5px;color:var(--ink-3);line-height:1.5;padding:14px 16px;background:var(--paper-2);border:1px solid var(--border);border-radius:var(--r);margin-top:4px}
.ag-disclaimer svg{width:17px;height:17px;color:var(--protected);flex:0 0 auto}

/* ---------------- drawer ---------------- */
.drawer-wrap{position:fixed;inset:0;z-index:150;background:color-mix(in srgb,var(--ink) 32%,transparent);display:flex;justify-content:flex-end;animation:fadein .2s ease}
@keyframes fadein{from{opacity:0}}
.drawer{width:min(456px,94vw);background:var(--surface);height:100%;overflow-y:auto;padding:24px 24px 28px;box-shadow:-20px 0 50px -20px rgba(0,0,0,.4);animation:slidein .3s cubic-bezier(.22,1,.36,1)}
@keyframes slidein{from{transform:translateX(40px);opacity:.4}}
.dr-head{display:flex;align-items:center;gap:13px}
.dr-ic{width:46px;height:46px;border-radius:13px;background:color-mix(in srgb,var(--firm-primary) 14%,var(--surface));color:var(--firm-primary);display:grid;place-items:center;flex:0 0 auto}
.dr-ic svg{width:23px;height:23px}
.dr-name{font-family:var(--firm-font-display);font-weight:700;font-size:20px;letter-spacing:-.02em;line-height:1.05}
.dr-cat{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:2px}
.dr-x{width:34px;height:34px;border-radius:9px;border:1px solid var(--border-2);background:var(--surface);color:var(--ink-2);cursor:pointer;display:grid;place-items:center;flex:0 0 auto}
.dr-x:hover{border-color:var(--ink-3);color:var(--ink)}
.dr-role{font-size:14.5px;color:var(--ink-2);line-height:1.55;margin:16px 0 0}

.dr-power{margin-top:18px;border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.dr-pstate{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--paper-2);border-bottom:1px solid var(--border)}
.dr-statusdot{width:9px;height:9px;border-radius:50%;background:var(--ink-3);flex:0 0 auto}
.dr-statusdot.on{background:var(--protected)}
.dr-pl{font-weight:700;font-size:14px}
.dr-ph{font-size:11.5px;color:var(--ink-3);margin-top:1px}
.dr-pstate .aswitch{margin-left:auto}
.dr-auto{padding:15px 16px}
.dr-lab{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.dr-seg{width:100%}
.dr-seg button{flex:1;justify-content:center}
.seg-toggle.dr-seg button svg{width:13px;height:13px}
.dr-seg button:disabled{opacity:.4;cursor:not-allowed}
.dr-autonote{font-size:12px;color:var(--ink-2);line-height:1.5;margin-top:11px;display:flex;gap:7px;align-items:flex-start}
.dr-autonote .lockic{color:var(--firm-primary);flex:0 0 auto}
.dr-autonote .lockic svg{width:15px;height:15px}
.dr-autonote b{color:var(--ink);font-weight:700}

.dr-week{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.dr-wstat{background:var(--paper-2);border:1px solid var(--border);border-radius:var(--r);padding:13px 14px;text-align:center}
.dr-wstat b{font-family:var(--firm-font-display);font-weight:800;font-size:21px;letter-spacing:-.02em;display:block;line-height:1}
.dr-wstat span{font-size:10.5px;color:var(--ink-3);margin-top:5px;display:block;line-height:1.2}

.dr-sec{margin-top:24px}
.dr-sl{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:8px;margin-bottom:13px}
.dr-sl svg{width:15px;height:15px;color:var(--firm-primary)}
.dr-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.dr-list li{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);line-height:1.45}
.dr-list.trig .li-dot{width:6px;height:6px;border-radius:50%;background:var(--firm-primary);flex:0 0 auto;margin-top:7px}
.dr-list.guard .li-ic{width:19px;height:19px;border-radius:6px;background:var(--protected-bg);color:var(--protected);display:grid;place-items:center;flex:0 0 auto;margin-top:0}
.dr-list.guard .li-ic svg{width:13px;height:13px}
.dr-timeline .tlrow{padding-bottom:15px}
.dr-foot{margin-top:24px}

@media(max-width:560px){
  .ag-kpis{grid-template-columns:repeat(2,1fr)}
  .ag-grid{grid-template-columns:1fr}
}