/* Loan Book Workspace — mockup. Light only.
   Visual language modelled on a major global bank's public design system:
   restrained blue / white / red, near-black headings, thin borders, ~4px button
   radius, an arc motif over the wordmark, airy sections. Generic "Meridian Bank". */

:root {
  color-scheme: light;

  --paper:#ffffff; --bg:#ffffff;
  --band-sky:#eef5fb; --band-grey:#f4f6f8;
  --surface:#ffffff; --surface-2:#f4f6f8; --sunk:#eef1f4;
  --ink:#1a1a1a; --text:#4a4a4a; --muted:#6b7178; --faint:#8b9199;
  --hair:#d7dbe0; --hair-soft:#e6e9ec;

  --blue:#1560bd; --blue-hi:#0f4c99; --blue-dark:#004785; --blue-logo:#003b70;
  --cyan:#00a9e0; --red:#da291c; --on-blue:#ffffff;
  --blue-soft:#e5eefb;
  --accent:#1560bd; --accent-2:#00a9e0; --accent-ink:#004785; --on-accent:#ffffff;

  --good:#008542; --good-bg:#e4f3ea; --attn:#b05a00; --attn-bg:#fbefe0;
  --watch:#6b7178; --watch-bg:#eef1f4; --crit:#d6002a; --crit-bg:#fbe6ea;

  --exec:#0f1632; --exec-bg:#e7ebf3; --rm:#1560bd; --rm-bg:#e5eefb;
  --officer:#5a7184; --officer-bg:#eceff2;

  --shadow-1:0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.07);
  --shadow-2:0 4px 16px -4px rgba(15,22,50,.14);
  --shadow-pop:0 14px 44px -10px rgba(15,22,50,.24);
  --r:8px; --r-lg:10px; --r-sm:5px; --btn-r:4px;

  --disp:"Libre Franklin","Interstate",Arial,Helvetica,sans-serif;
  --sans:"Libre Franklin",Arial,Helvetica,sans-serif;
  --mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --nav-w:232px; --bar-h:60px; --util-h:30px; --ease:cubic-bezier(.4,0,.2,1);
}
* { box-sizing:border-box; }
html,body { height:100%; }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--sans);
       font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:var(--blue-dark); }
button { font:inherit; cursor:pointer; color:inherit; }
:focus-visible { outline:2px solid var(--blue); outline-offset:2px; border-radius:3px; }
h1,h2,h3,h4 { color:var(--ink); margin:0; font-family:var(--disp); font-weight:700; letter-spacing:-.01em; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }

/* ---------- wordmark + arc ---------- */
.wordmark { display:flex; flex-direction:column; line-height:1; }
.mw { position:relative; font-family:var(--disp); font-weight:700; font-size:20px; letter-spacing:-.02em;
      color:var(--blue-logo); text-transform:lowercase; padding-top:6px; }
.mw .arc { position:absolute; top:0; left:38%; width:30px; height:11px; border:2.5px solid var(--red);
           border-bottom:none; border-radius:30px 30px 0 0; }
.wordmark .sub { margin-top:5px; font-family:var(--mono); font-size:10px; color:var(--faint); letter-spacing:.02em; }

/* ---------- shell ---------- */
.util { height:var(--util-h); background:var(--band-grey); border-bottom:1px solid var(--hair);
        display:flex; align-items:center; padding:0 22px; font-size:11px; color:var(--faint);
        position:relative; z-index:6; }
.util b { color:var(--muted); font-weight:600; margin-right:6px; }
.app { display:grid; grid-template-columns:var(--nav-w) 1fr; grid-template-rows:var(--bar-h) 1fr;
       grid-template-areas:"nav bar" "nav main"; height:calc(100vh - var(--util-h)); }
.nav { grid-area:nav; background:var(--surface); border-right:1px solid var(--hair);
       padding:20px 12px; display:flex; flex-direction:column; gap:2px; overflow-y:auto; }
.kmark { padding:2px 10px 20px; }
.nav a { position:relative; display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:6px;
         color:var(--text); text-decoration:none; font-weight:600; font-size:13.5px; transition:background .12s var(--ease), color .12s var(--ease); }
.nav a .ic { width:18px; text-align:center; font-size:14px; color:var(--blue); }
.nav a:hover { background:var(--band-sky); }
.nav a.active { background:var(--band-sky); color:var(--blue-dark); }
.nav a.active::before { content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; background:var(--blue); }
.nav .grp { font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
            color:var(--faint); padding:18px 13px 8px; }
.nav .foot { margin-top:auto; font-family:var(--mono); font-size:10px; color:var(--faint); padding:12px 13px; line-height:1.6; }

.topbar { grid-area:bar; display:flex; align-items:center; gap:12px; padding:0 22px;
          background:var(--surface); border-bottom:1px solid var(--hair); position:relative; z-index:5; }
.tb-title { font-family:var(--disp); font-weight:700; color:var(--ink); font-size:17px; }
.tb-scope { font-family:var(--mono); font-size:11px; color:var(--faint); border:1px solid var(--hair); padding:4px 11px; border-radius:999px; }
.spacer { flex:1; }
.omni { display:flex; align-items:center; gap:9px; width:min(360px,30vw); background:var(--surface-2);
        border:1px solid var(--hair); border-radius:var(--btn-r); padding:8px 12px; color:var(--muted);
        font-size:12.5px; transition:border-color .12s, box-shadow .12s; }
.omni:hover { border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }
.omni .k { margin-left:auto; font-family:var(--mono); font-size:10px; border:1px solid var(--hair); border-radius:4px; padding:2px 6px; color:var(--faint); }
.icbtn { width:36px; height:36px; border:1px solid var(--hair); border-radius:var(--btn-r); background:var(--surface);
         display:grid; place-items:center; font-size:15px; color:var(--text); transition:background .12s; }
.icbtn:hover { background:var(--surface-2); }
.icbtn.bell { position:relative; }
.icbtn.bell .dot { position:absolute; top:5px; right:6px; width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 0 2px var(--surface); }

main { grid-area:main; overflow-y:auto; padding:34px 44px 120px; scroll-behavior:smooth; }
.page { max-width:1080px; }
.page.wide { max-width:1320px; }
.enter { animation:enter .28s var(--ease) both; }
@keyframes enter { from { opacity:0; transform:translateY(6px); } }

/* ---------- headings ---------- */
.eyebrow { font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
           color:var(--faint); margin-bottom:10px; }
.h1row { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.h1row h1 { font-size:28px; line-height:1.15; font-weight:700; }
.sub { color:var(--muted); font-size:15px; margin:10px 0 30px; max-width:74ch; }
.mono { font-family:var(--mono); } .muted { color:var(--muted); } .faint { color:var(--faint); }

/* ---------- brief ---------- */
.brief { display:grid; grid-template-columns:44px 1fr; gap:16px; background:var(--band-sky);
         border:1px solid var(--hair); border-radius:var(--r); padding:22px 24px; margin-bottom:26px; }
.brief .glyph { width:40px; height:40px; border-radius:var(--r-sm); background:var(--blue); color:#fff;
                font-family:var(--disp); font-weight:700; display:grid; place-items:center; font-size:16px; }
.brief .body { font-size:15px; line-height:1.7; color:var(--text); }
.brief .lbl { font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-dark); margin-bottom:6px; }
.cursor { display:inline-block; width:8px; height:16px; background:var(--blue); margin-left:2px; vertical-align:-2px; animation:blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity:0; } }

/* ---------- KPI ---------- */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0; margin-bottom:28px;
        border:1px solid var(--hair); border-radius:var(--r); overflow:hidden; background:var(--surface); }
.kpi { padding:18px 20px; border-right:1px solid var(--hair-soft); }
.kpi:last-child { border-right:none; }
.kpi .k { font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.kpi .v { font-family:var(--disp); font-size:26px; font-weight:700; color:var(--ink); margin-top:8px; letter-spacing:-.02em; }
.kpi .m { font-size:11.5px; color:var(--faint); margin-top:3px; }
.bbar { display:flex; height:7px; border-radius:2px; overflow:hidden; margin-top:12px; background:var(--sunk); }
.bbar i { display:block; }

/* ---------- chips / meters ---------- */
.chip { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px; font-weight:500;
        padding:3px 9px; border-radius:3px; border:1px solid currentColor; white-space:nowrap; }
.chip::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.chip.plain { color:var(--faint); border-color:var(--hair); } .chip.plain::before { display:none; }
.chip.attn { color:var(--attn); background:var(--attn-bg); } .chip.good { color:var(--good); background:var(--good-bg); }
.chip.watch { color:var(--watch); background:var(--watch-bg); } .chip.crit { color:var(--crit); background:var(--crit-bg); }
.chip.exec { color:var(--exec); background:var(--exec-bg); } .chip.rm { color:var(--rm); background:var(--rm-bg); }
.chip.officer { color:var(--officer); background:var(--officer-bg); }
.tier { font-family:var(--mono); font-size:10px; padding:3px 8px; border-radius:3px; border:1px solid var(--hair); color:var(--faint); }
.tier.committee { color:var(--exec); border-color:var(--exec); }
.tier.maker_checker { color:var(--rm); border-color:var(--rm); }
.tier.tier1_auto { color:var(--good); border-color:var(--good); }
.conf { display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; color:var(--muted); }
.conf .track { width:54px; height:6px; border-radius:2px; background:var(--sunk); overflow:hidden; }
.conf .track i { display:block; height:100%; background:var(--blue); border-radius:2px; }
.src { display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:10.5px; color:var(--faint);
       border:1px solid var(--hair); border-radius:3px; padding:2px 8px; }

/* ---------- filter pills ---------- */
.pills { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.pills button { background:var(--surface); border:1px solid var(--hair); color:var(--muted); border-radius:999px;
                padding:7px 15px; font-size:12.5px; font-weight:600; transition:all .12s var(--ease); }
.pills button:hover { color:var(--text); border-color:var(--blue); }
.pills button.on { background:var(--blue); color:#fff; border-color:var(--blue); }

/* ---------- insight card ---------- */
.stack { display:flex; flex-direction:column; gap:16px; }
.ins { background:var(--surface); border:1px solid var(--hair); border-radius:var(--r); overflow:hidden;
       transition:box-shadow .14s var(--ease); }
.ins:hover { box-shadow:var(--shadow-2); }
.ins .accent { height:3px; background:var(--blue); }
.ins.t-attention .accent { background:var(--attn); } .ins.t-opportunity .accent { background:var(--good); }
.ins.t-watch .accent { background:var(--watch); } .ins.t-escalated .accent { background:var(--crit); }
.ins .in { padding:22px 24px; }
.ins .top { display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin-bottom:14px; }
.ins .who { font-family:var(--disp); font-weight:700; color:var(--ink); font-size:16px; }
.ins .obs { font-size:15.5px; line-height:1.6; color:var(--text); margin:0 0 16px; max-width:80ch; }
.ins .meta-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.ins .rec { font-size:14px; line-height:1.6; margin:0 0 18px; color:var(--text); max-width:80ch; }
.ins .rec b { color:var(--ink); }
.ins .foot { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ins .disc { margin-top:16px; border-top:1px solid var(--hair-soft); padding-top:14px; }
.ins summary { font-family:var(--mono); font-size:10.5px; color:var(--blue-dark); cursor:pointer; list-style:none; }
.ins summary::-webkit-details-marker { display:none; }
.ins summary::before { content:"› "; }
.ins details[open] summary::before { content:"⌄ "; }
.ins .method { margin:12px 0 0; padding-left:20px; font-size:13px; line-height:1.65; color:var(--muted); }
.ins .method li { margin-bottom:5px; }

.btn { border:1px solid var(--blue); background:var(--surface); color:var(--blue-dark); border-radius:var(--btn-r);
       padding:9px 18px; font-size:13px; font-weight:600; transition:background .12s, color .12s; }
.btn:hover { background:var(--blue-soft); }
.btn.primary { background:var(--blue); color:#fff; border-color:var(--blue); }
.btn.primary:hover { background:var(--blue-hi); border-color:var(--blue-hi); }
.btn.sm { padding:6px 13px; font-size:12px; }
.btn.ghost { background:transparent; border-color:transparent; color:var(--blue-dark); padding:6px 4px; }
.btn.ghost::after { content:" ›"; }
.btn.ghost:hover { background:transparent; text-decoration:underline; }
.linklike { background:none; border:none; color:var(--blue-dark); font-weight:600; font-size:12px; padding:0; text-decoration:underline; text-underline-offset:2px; }
.done { font-family:var(--mono); font-size:10.5px; color:var(--good); }

/* ---------- tables ---------- */
.tw { border:1px solid var(--hair); border-radius:var(--r); overflow:hidden; background:var(--surface); }
table { width:100%; border-collapse:collapse; }
thead th { font-family:var(--mono); font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--faint);
           text-align:left; padding:13px 16px; border-bottom:2px solid var(--blue); background:var(--band-grey); cursor:pointer; }
tbody td { padding:14px 16px; border-bottom:1px solid var(--hair-soft); font-size:14px; }
tbody tr:last-child td { border-bottom:none; }
tbody tr[data-goto] { cursor:pointer; transition:background .1s; }
tbody tr[data-goto]:hover td { background:var(--band-sky); }
.num { text-align:right; font-family:var(--mono); font-size:13px; }
.scoreb { display:inline-block; width:58px; height:6px; border-radius:2px; background:var(--sunk); vertical-align:middle; overflow:hidden; }
.scoreb i { display:block; height:100%; }

/* ---------- client 360 ---------- */
.c360 { display:grid; grid-template-columns:1.5fr 1fr; gap:20px; align-items:start; }
.panel { background:var(--surface); border:1px solid var(--hair); border-radius:var(--r); padding:20px 22px; }
.panel h3 { font-size:14px; margin-bottom:16px; }
.okline { display:flex; align-items:center; gap:12px; background:var(--band-sky); border:1px solid var(--hair);
          border-radius:var(--r); padding:16px 20px; margin-bottom:20px; font-size:14.5px; line-height:1.6; }
.okline .glyph { width:30px; height:30px; border-radius:var(--r-sm); background:var(--blue); color:#fff;
                 font-family:var(--disp); font-weight:700; display:grid; place-items:center; font-size:13px; flex:none; }
.tl { list-style:none; margin:0; padding:0; }
.tl li { display:grid; grid-template-columns:84px 12px 1fr; gap:12px; padding:11px 0; border-bottom:1px solid var(--hair-soft); font-size:13.5px; line-height:1.55; }
.tl li:last-child { border-bottom:none; }
.tl .d { font-family:var(--mono); font-size:10.5px; color:var(--faint); }
.tl .dot { width:8px; height:8px; border-radius:50%; margin-top:5px; background:var(--faint); }
.tl .dot.payment { background:var(--blue); } .tl .dot.signal { background:var(--attn); }
.tl .dot.contact { background:var(--rm); } .tl .dot.bureau { background:var(--exec); }
.kv { display:grid; grid-template-columns:auto 1fr; gap:9px 16px; font-size:13.5px; }
.kv dt { color:var(--faint); } .kv dd { margin:0; text-align:right; font-family:var(--mono); font-size:13px; }
.drift { display:flex; gap:6px; align-items:flex-end; height:52px; margin-top:12px; }
.drift i { width:22px; background:var(--blue); border-radius:2px 2px 0 0; }
.drift i.late { background:var(--attn); }

/* ---------- charts ---------- */
.charts { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin-bottom:26px; }
.chart { background:var(--surface); border:1px solid var(--hair); border-radius:var(--r); padding:18px 20px; }
.chart h4 { font-size:12.5px; margin-bottom:14px; color:var(--muted); font-weight:700; }
.chart svg { display:block; width:100%; height:auto; }
.heat { margin-top:8px; }
.hrow { display:grid; grid-template-columns:96px repeat(4,1fr); gap:5px; align-items:center; margin-bottom:5px; }
.hh { font-family:var(--mono); font-size:9.5px; color:var(--faint); text-transform:uppercase; letter-spacing:.05em; }
.cell { height:40px; border-radius:3px; display:grid; place-items:center; font-family:var(--mono); font-size:12px; color:var(--ink); }
.legend { display:flex; align-items:center; gap:8px; margin-top:12px; font-family:var(--mono); font-size:10px; color:var(--faint); }
.legend i { width:50px; height:8px; border-radius:2px; background:linear-gradient(90deg,var(--surface-2),var(--crit)); }

/* ---------- control plane ---------- */
.cp { display:flex; flex-direction:column; gap:26px; }
.cpblock h3 { font-size:14px; margin-bottom:12px; }
.audit { font-family:var(--mono); font-size:12px; background:var(--band-grey); border:1px solid var(--hair); border-radius:var(--r);
         padding:16px 18px; max-height:300px; overflow-y:auto; line-height:1.8; }
.audit .ln { display:grid; grid-template-columns:78px 100px 168px 1fr; gap:12px; padding:2px 0; color:var(--muted); }
.audit .ln .ev { color:var(--blue-dark); }
.status { font-family:var(--mono); font-size:10px; padding:2px 8px; border-radius:3px; }
.status.ok, .status.active { color:var(--good); background:var(--good-bg); }
.status.degraded, .status.fallback { color:var(--attn); background:var(--attn-bg); }
.toggle { width:40px; height:22px; border-radius:999px; background:var(--sunk); border:1px solid var(--hair); position:relative; cursor:pointer; }
.toggle::after { content:""; position:absolute; width:16px; height:16px; border-radius:50%; background:var(--faint); top:2px; left:2px; transition:all .14s var(--ease); }
.toggle.on { background:var(--blue); border-color:var(--blue); }
.toggle.on::after { left:20px; background:#fff; }

/* ---------- ask · chat ---------- */
.chatwrap { display:flex; flex-direction:column; height:calc(100vh - var(--util-h) - var(--bar-h) - 246px); min-height:380px; max-width:1080px; }
.thread { flex:1; overflow-y:auto; padding:8px 4px 20px; display:flex; flex-direction:column; gap:22px; }
.suggest { display:flex; flex-direction:column; gap:10px; margin-top:8px; align-items:flex-start; }
.suggest .lbl { font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:2px; }
.suggest button { text-align:left; background:var(--surface); border:1px solid var(--hair); border-radius:var(--r);
                  padding:14px 18px; font-size:14px; font-weight:600; color:var(--text); transition:border-color .12s, background .12s; max-width:640px; }
.suggest button:hover { border-color:var(--blue); background:var(--band-sky); }
.msg { display:flex; gap:14px; }
.msg.user { justify-content:flex-end; }
.msg.user .bubble { background:var(--blue); color:#fff; border:none; max-width:70%; }
.msg .glyph { width:32px; height:32px; border-radius:var(--r-sm); background:var(--blue); color:#fff;
              font-family:var(--disp); font-weight:700; display:grid; place-items:center; font-size:13px; flex:none; }
.bubble { background:var(--surface); border:1px solid var(--hair); border-radius:var(--r); padding:16px 20px;
          font-size:15px; line-height:1.68; max-width:min(720px, 82%); }
.bubble p { margin:0 0 10px; } .bubble p:last-child { margin:0; }
.bubble .used { font-family:var(--mono); font-size:10px; color:var(--faint); margin-top:14px; padding-top:10px; border-top:1px solid var(--hair-soft); }
.bubble .used b { color:var(--muted); }
.bubble .ctas { margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }
.toolbadge { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px;
             padding:6px 12px; border-radius:999px; margin-bottom:12px; border:1px solid var(--hair); }
.toolbadge.pending { background:var(--band-sky); color:var(--blue-dark); border-color:var(--blue-soft); }
.toolbadge.done { background:var(--good-bg); color:var(--good); border-color:transparent; }
.toolbadge .ti { font-size:13px; line-height:1; }
.toolbadge.pending .ti { display:inline-block; animation:toolspin 1s linear infinite; }
@keyframes toolspin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
.toolbadge .tn { font-weight:700; }
.toolbadge .tp { color:var(--faint); }
.toolbadge .tt { margin-left:auto; font-weight:700; font-variant-numeric:tabular-nums; }
.toolbadge .tt.tcached { font-weight:600; opacity:.8; }
.ldots { display:flex; gap:5px; padding:10px 0 2px; }
.ldots span { width:6px; height:6px; border-radius:50%; background:var(--faint); animation:ldotpulse 1.1s ease-in-out infinite; }
.ldots span:nth-child(2) { animation-delay:.15s; } .ldots span:nth-child(3) { animation-delay:.3s; }
@keyframes ldotpulse { 0%, 80%, 100% { opacity:.25; transform:scale(.8); } 40% { opacity:1; transform:scale(1); } }
.chartbox { margin-top:16px; background:var(--band-grey); border:1px solid var(--hair); border-radius:var(--r); padding:16px 18px; }
.chartbox .ctitle { font-family:var(--mono); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); margin-bottom:12px; }
.chartbox svg { display:block; width:100%; height:auto; }
.dtable { margin-top:14px; width:100%; border-collapse:collapse; font-size:13px; }
.dtable th { text-align:left; font-family:var(--mono); font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); padding:6px 10px; border-bottom:1px solid var(--hair); }
.dtable td { padding:8px 10px; border-bottom:1px solid var(--hair-soft); }
.dtable td:not(:first-child) { text-align:right; font-family:var(--mono); }
.composer { display:flex; gap:12px; align-items:flex-end; padding:16px 0 0; border-top:1px solid var(--hair); }
.composer textarea { flex:1; background:var(--surface); border:1px solid var(--hair); border-radius:var(--r); padding:14px 16px;
                     color:var(--text); font:inherit; font-size:14.5px; resize:none; min-height:52px; max-height:140px; line-height:1.5; }
.composer textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }
.composer .send { width:52px; height:52px; border-radius:var(--btn-r); background:var(--blue); color:#fff; border:none; display:grid; place-items:center; font-size:18px; }
.composer .send:hover { background:var(--blue-hi); }

/* ---------- slide-over ---------- */
.scrim { position:fixed; inset:0; background:rgba(15,22,50,.42); z-index:40; animation:fade .18s var(--ease); }
@keyframes fade { from { opacity:0; } }
.slideover { position:fixed; right:0; top:0; bottom:0; width:460px; max-width:94vw; background:var(--surface);
             border-left:1px solid var(--hair); z-index:50; display:flex; flex-direction:column; box-shadow:var(--shadow-pop);
             animation:slidein .2s var(--ease); }
@keyframes slidein { from { transform:translateX(24px); opacity:0; } }
.slideover .h { padding:18px 22px; border-bottom:2px solid var(--blue); display:flex; align-items:center; gap:12px; }
.slideover .h b { color:var(--ink); }
.slideover .b { padding:20px 22px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:18px; font-size:13.5px; line-height:1.6; }
.slideover .f { padding:16px 22px; border-top:1px solid var(--hair); display:flex; gap:10px; justify-content:flex-end; }
.slideover label { font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); display:block; margin-bottom:6px; }
.slideover input, .slideover textarea { width:100%; background:var(--surface-2); border:1px solid var(--hair); border-radius:var(--btn-r);
                                        padding:10px 12px; color:var(--text); font:inherit; font-size:13.5px; }
.pk { border:1px solid var(--hair); border-radius:var(--r); background:var(--band-grey); padding:16px 17px; }
.pk .r { display:flex; gap:12px; padding:6px 0; font-size:12.5px; line-height:1.5; }
.pk .r .l { font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); width:92px; flex:none; }
.ck { font-family:var(--mono); font-size:11.5px; display:block; }
.ck.pass::before { content:"✓ "; color:var(--good); } .ck.fail::before { content:"✗ "; color:var(--crit); }

/* ---------- advisory: product decision tree + dual client/bank view ---------- */
.dtree { display:flex; flex-direction:column; gap:1px; background:var(--hair-soft); border:1px solid var(--hair);
         border-radius:var(--r-sm); overflow:hidden; margin:6px 0 4px; }
.dtree .row { display:grid; grid-template-columns:20px 1fr auto; gap:12px; align-items:baseline;
              background:var(--surface); padding:10px 14px; }
.dtree .row.chosen { background:var(--band-sky); }
.dtree .pf { font-family:var(--mono); font-size:13px; }
.dtree .pf.y { color:var(--good); } .dtree .pf.n { color:var(--faint); }
.dtree .pname { font-weight:600; color:var(--ink); font-size:13px; }
.dtree .row.chosen .pname { color:var(--blue-dark); }
.dtree .pname .star { color:var(--blue); margin-left:6px; font-family:var(--mono); font-size:10px; }
.dtree .pev { display:block; font-size:12px; color:var(--muted); margin-top:2px; line-height:1.5; }
.dualview { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:14px 0; }
.dv { border-radius:var(--r-sm); padding:14px 16px; border:1px solid var(--hair); }
.dv.client { background:var(--band-sky); border-color:var(--blue-soft); }
.dv.bank { background:var(--band-grey); }
.dv .lbl { font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
           color:var(--faint); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.dv.client .lbl { color:var(--blue-dark); }
.dv p { margin:0; font-size:13.5px; line-height:1.6; color:var(--text); }
@media (max-width:760px) { .dualview { grid-template-columns:1fr; } }

/* ---------- command palette ---------- */
.cmdk-scrim { position:fixed; inset:0; background:rgba(15,22,50,.4); z-index:80; display:grid; place-items:start center; padding-top:14vh; animation:fade .14s; }
.cmdk { width:min(600px,92vw); background:var(--surface); border:1px solid var(--hair); border-radius:var(--r);
        box-shadow:var(--shadow-pop); overflow:hidden; animation:enter .18s var(--ease); }
.cmdk input { width:100%; border:none; background:transparent; padding:20px 22px; font:inherit; font-size:16px; color:var(--ink); border-bottom:2px solid var(--blue); }
.cmdk input:focus { outline:none; }
.cmdk .list { max-height:340px; overflow-y:auto; }
.cmdk .row { display:flex; align-items:center; gap:12px; padding:13px 22px; font-size:14px; cursor:pointer; }
.cmdk .row:hover, .cmdk .row.sel { background:var(--band-sky); }
.cmdk .row .t { font-family:var(--mono); font-size:9px; color:var(--faint); margin-left:auto; text-transform:uppercase; letter-spacing:.06em; }

/* ---------- toast ---------- */
.toasts { position:fixed; left:50%; bottom:30px; transform:translateX(-50%); z-index:90; display:flex; flex-direction:column; gap:10px; align-items:center; }
.toast { background:var(--ink); color:#fff; padding:12px 20px; border-radius:var(--btn-r); font-size:13px; font-weight:600;
         box-shadow:var(--shadow-pop); animation:toastin .22s var(--ease); }
@keyframes toastin { from { transform:translateY(10px); opacity:0; } }

.empty { text-align:center; color:var(--faint); padding:60px 20px; font-size:14px; }

/* ---------- avatar + persona chip ---------- */
.avatar { display:grid; place-items:center; border-radius:50%; font-family:var(--disp); font-weight:700;
          width:30px; height:30px; font-size:12px; flex:none; }
.avatar.t-officer { background:var(--officer-bg); color:var(--officer); }
.avatar.t-rm { background:var(--rm-bg); color:var(--rm); }
.avatar.t-exec { background:var(--exec-bg); color:var(--exec); }
.pchip { display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--hair);
         border-radius:var(--btn-r); padding:5px 12px 5px 6px; transition:border-color .12s, box-shadow .12s; }
.pchip:hover { border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }
.pchip-txt { display:flex; flex-direction:column; line-height:1.15; text-align:left; }
.pchip-txt b { font-size:12.5px; color:var(--ink); font-weight:700; }
.pchip-txt span { font-size:10.5px; color:var(--faint); }
.pchip-caret { color:var(--faint); font-size:10px; }

/* ---------- who's working — public-site style landing ---------- */
.topbar .wordmark { margin-right:6px; }
body.picker .app { grid-template-columns:1fr; grid-template-rows:auto 1fr; grid-template-areas:"bar" "main"; height:calc(100vh - var(--util-h)); }
body.picker .nav { display:none; }
body.picker main { padding:0; }
body.picker .topbar { padding:0 34px; border-bottom:1px solid var(--hair); }
body.picker .topbar .omni, body.picker #navToggle, body.picker .tb-title, body.picker .tb-scope,
body.picker #personaChip, body.picker .icbtn.bell { display:none; }
body.picker .topbar::after { content:"How can we help?"; color:var(--blue-dark); font-weight:600; font-size:13px; }
.whowrap { background:var(--surface); }
.who-nav { border-bottom:1px solid var(--hair); background:var(--band-sky); }
.who-nav .in { max-width:1240px; margin:0 auto; padding:12px 34px; display:flex; gap:26px; font-size:13px; font-weight:600; color:var(--blue-dark); }
.who-nav .in span:last-child { margin-left:auto; color:var(--muted); font-weight:500; }
.who-hero { max-width:1240px; margin:0 auto; padding:56px 34px 40px; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:start;
            background-image:repeating-linear-gradient(-45deg, transparent 0 22px, rgba(21,96,189,.03) 22px 23px); }
.who-hero .eyebrow { color:var(--faint); }
.who-h1 { font-size:clamp(2rem,1.3rem+2.4vw,3rem); line-height:1.08; margin:6px 0 14px; color:var(--ink); }
.who-sub { color:var(--text); font-size:15.5px; max-width:52ch; margin:0 0 26px; line-height:1.6; }
.who-card { background:var(--surface); border:1px solid var(--hair); border-radius:var(--r); box-shadow:var(--shadow-1); padding:26px 28px; }
.who-card .ct { font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:6px; }
.who-card h3 { font-size:19px; margin-bottom:16px; }
.who-card .lead { font-size:13.5px; color:var(--muted); margin:0 0 18px; }
.who-strip { background:var(--band-grey); border-top:1px solid var(--hair); }
.who-strip .in { max-width:1240px; margin:0 auto; padding:0 34px; }
.strip-tile { display:flex; flex-direction:column; align-items:center; gap:10px; padding:26px 8px; text-decoration:none;
              border-right:1px solid var(--hair-soft); }
.strip-tile:last-child { border-right:none; }
.strip-tile .si { width:34px; height:34px; display:grid; place-items:center; color:var(--blue); font-size:18px; border:1px solid var(--blue); border-radius:var(--r-sm); }
.strip-tile .sl { font-size:12.5px; font-weight:700; color:var(--blue-dark); }
.strip-row { display:grid; grid-template-columns:repeat(5,1fr); background:var(--surface); border:1px solid var(--hair);
             border-radius:var(--r); margin:-30px auto 0; max-width:1180px; position:relative; box-shadow:var(--shadow-1); }
.ptiles { max-width:1240px; margin:44px auto 0; padding:0 34px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.ptile { display:flex; flex-direction:column; text-align:left; background:var(--surface); border:1px solid var(--hair);
         border-radius:var(--r); padding:0 0 22px; overflow:hidden; transition:box-shadow .14s var(--ease); }
.ptile:hover { box-shadow:var(--shadow-2); }
.ptile .pt-band { height:6px; }
.ptile.t-officer .pt-band { background:var(--officer); } .ptile.t-rm .pt-band { background:var(--rm); } .ptile.t-exec .pt-band { background:var(--exec); }
.pt-head { display:flex; align-items:center; gap:12px; padding:22px 24px 0; }
.pt-head .avatar { width:46px; height:46px; font-size:16px; }
.pt-head .chip { margin-left:auto; }
.pt-name { font-family:var(--disp); font-size:19px; font-weight:700; color:var(--ink); padding:14px 24px 0; }
.pt-team { font-family:var(--mono); font-size:10.5px; color:var(--faint); padding:4px 24px 0; }
.pt-blurb { font-size:13.5px; line-height:1.55; color:var(--muted); padding:12px 24px 0; flex:1; }
.pt-stats { display:flex; flex-wrap:wrap; gap:6px; padding:16px 24px 0; }
.pt-stats span { font-family:var(--mono); font-size:11px; color:var(--text); background:var(--surface-2); border:1px solid var(--hair); border-radius:3px; padding:3px 8px; }
.pt-go { margin:18px 24px 0; padding:12px 18px; background:var(--blue); color:#fff; text-align:center; font-weight:600; font-size:13.5px; border-radius:var(--btn-r); }
.ptile:hover .pt-go { background:var(--blue-hi); }
.who-foot { max-width:1240px; margin:28px auto 60px; padding:0 34px; font-size:11px; color:var(--faint); }

/* ---------- Today quick tiles (public-site icon-strip) ---------- */
.qtiles { display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin:22px 0; border:1px solid var(--hair);
          border-radius:var(--r); overflow:hidden; background:var(--surface); }
.qtile { display:flex; flex-direction:column; align-items:center; gap:9px; padding:20px 12px;
         border-right:1px solid var(--hair-soft); transition:background .12s; }
.qtile:last-child { border-right:none; }
.qtile:hover { background:var(--band-sky); }
.qtile.on { background:var(--band-sky); box-shadow:inset 0 -3px 0 var(--blue); }
.qic { width:34px; height:34px; border-radius:var(--r-sm); border:1px solid var(--blue); color:var(--blue);
       display:grid; place-items:center; font-size:15px; }
.qlabel { font-size:12px; font-weight:700; color:var(--blue-dark); }
.qcount { font-family:var(--disp); font-size:22px; font-weight:700; color:var(--ink); line-height:1; }
.qcount.arrow { font-family:var(--sans); font-size:16px; color:var(--faint); font-weight:400; }

/* ---------- data-ingest / derivation diagrams ---------- */
.deriv { margin-top:14px; }
.dcap { font-family:var(--mono); font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); margin-bottom:6px; }
.deriv svg { width:100%; height:auto; display:block; }
.dbox { fill:var(--surface); stroke:var(--hair); stroke-width:1; transition:stroke .14s, stroke-width .14s; }
.dbox.d-accent { fill:var(--blue); stroke:var(--blue); }
.darrow { stroke:var(--blue); stroke-width:1.3; }
.dtag { font-family:var(--mono); font-size:8.5px; letter-spacing:.05em; text-transform:uppercase; fill:var(--faint); }
.dtag.on { fill:rgba(255,255,255,.82); }
.dlabel { font-family:var(--mono); font-size:9px; fill:var(--ink); }
.dlabel.on { fill:#fff; }
.dsub { font-family:var(--mono); font-size:8.5px; fill:var(--muted); }
.dsub.on { fill:rgba(255,255,255,.9); }
.dsrc { font-family:var(--mono); font-size:8.5px; fill:var(--text); }
.ddot { fill:var(--good); }
.dnote > rect { fill:#fff; stroke:var(--blue); stroke-width:1; filter:drop-shadow(0 2px 7px rgba(15,22,50,.14)); }
.dnote > text { font-family:var(--mono); font-size:9px; fill:var(--ink); }
.dnote { opacity:.55; transition:opacity .16s; }
.dleader line { stroke:var(--blue); stroke-width:1; stroke-dasharray:2 2; }
.dleader { opacity:.4; transition:opacity .16s; }
.dendp { fill:var(--blue); }
.deriv:hover .dnote { opacity:.82; } .deriv:hover .dleader { opacity:.7; }
.dstep:hover .dnote, .dstep:hover .dleader { opacity:1; }
.dstep:hover .dbox { stroke:var(--blue); stroke-width:1.8; }
@media (prefers-reduced-motion: no-preference) {
  .dnote { animation:dfloat 3.6s ease-in-out infinite; }
}
@keyframes dfloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-2.5px); } }

@media (max-width:1080px){ .who-hero { grid-template-columns:1fr; } .ptiles { grid-template-columns:1fr; } .strip-row, .qtiles { grid-template-columns:repeat(2,1fr); } }
@media (max-width:960px){
  .app { grid-template-columns:1fr; grid-template-areas:"bar" "main"; }
  .nav { position:fixed; left:0; top:calc(var(--util-h) + var(--bar-h)); bottom:0; width:250px; z-index:60; transform:translateX(-100%); transition:transform .2s var(--ease); box-shadow:var(--shadow-pop); }
  .nav.open { transform:translateX(0); }
  .c360 { grid-template-columns:1fr; }
  .omni { width:auto; }
  main { padding:24px 20px 100px; }
}
@media (min-width:961px){ #navToggle { display:none; } }