/* ============================================================================
   RMG Toolkit — design system
   Restraint over decoration: one accent, reserved status hues, hairlines,
   generous whitespace, tactile motion. Palette = validated dataviz reference.
   ============================================================================ */
:root {
  color-scheme: light;
  --plane:        #f4f4f2;   /* page plane */
  --surface:      #ffffff;   /* cards */
  --surface-2:    #fbfbfa;   /* insets */
  --surface-3:    #f6f6f4;
  --ink:          #0b0b0b;
  --ink-2:        #52514e;
  --muted:        #898781;
  --line:         rgba(11,11,11,.09);
  --line-2:       rgba(11,11,11,.055);
  --hairline:     #e1e0d9;
  --baseline:     #c3c2b7;

  --accent:       #2a78d6;
  --accent-ink:   #1c5cab;
  --accent-wash:  #eaf1fc;

  --good:         #0ca30c;  --good-ink:#006300;  --good-wash:#e7f6e7;
  --warning:      #fab219;  --warn-ink:#8a5a00;  --warn-wash:#fdf3dd;
  --serious:      #ec835a;  --ser-ink:#9a4a26;   --ser-wash:#fdece3;
  --critical:     #d03b3b;  --crit-ink:#a52020;  --crit-wash:#fbe9e9;

  /* categorical (light) — validated order */
  --s1:#2a78d6; --s2:#008300; --s3:#e87ba4; --s4:#eda100; --s5:#1baf7a; --s6:#eb6834; --s7:#4a3aa7; --s8:#e34948;

  --shadow-sm: 0 1px 2px rgba(11,11,11,.04), 0 1px 3px rgba(11,11,11,.05);
  --shadow-md: 0 4px 14px rgba(11,11,11,.07), 0 2px 6px rgba(11,11,11,.05);
  --shadow-lg: 0 18px 50px rgba(11,11,11,.16), 0 6px 18px rgba(11,11,11,.10);
  --radius:   20px;
  --radius-sm:12px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --plane:#0d0d0d; --surface:#1a1a19; --surface-2:#201f1e; --surface-3:#242322;
  --ink:#ffffff; --ink-2:#c3c2b7; --muted:#898781;
  --line:rgba(255,255,255,.12); --line-2:rgba(255,255,255,.07); --hairline:#2c2c2a; --baseline:#383835;
  --accent:#3987e5; --accent-ink:#86b6ef; --accent-wash:#16233a;
  --good:#0ca30c; --good-ink:#4fd44f; --good-wash:#122a12;
  --warning:#fab219; --warn-ink:#fab219; --warn-wash:#2c2410;
  --serious:#ec835a; --ser-ink:#ec835a; --ser-wash:#2c1c14;
  --critical:#d03b3b; --crit-ink:#f08a8a; --crit-wash:#2c1414;
  --s1:#3987e5; --s2:#008300; --s3:#d55181; --s4:#c98500; --s5:#199e70; --s6:#d95926; --s7:#9085e9; --s8:#e66767;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 6px 20px rgba(0,0,0,.5); --shadow-lg:0 24px 60px rgba(0,0,0,.6);
}
* { box-sizing:border-box; margin:0; padding:0; }
[hidden] { display:none !important; }
html,body { height:100%; }
body {
  font-family:var(--font); background:var(--plane); color:var(--ink);
  font-size:13.5px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding-bottom:64px;
}
button { font-family:inherit; cursor:pointer; color:inherit; }
a { color:var(--accent-ink); text-decoration:none; }
a:hover { text-decoration:underline; }
::selection { background:var(--accent-wash); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
/* the main view is focused programmatically after each render for a11y/scroll —
   never show a focus ring around the whole content area */
#view:focus, #view:focus-visible { outline:none; }

/* ---------- Topbar ---------- */
.topbar {
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:20px;
  padding:12px 22px; background:color-mix(in srgb, var(--plane) 78%, transparent);
  backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line-2);
}
.brand { display:flex; align-items:center; gap:12px; min-width:0; }
.brand .mark {
  width:30px; height:30px; border-radius:9px; flex:none;
  background:linear-gradient(145deg, var(--accent), var(--s7));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.4), var(--shadow-sm);
  position:relative;
}
.brand .mark::after{ content:""; position:absolute; inset:7px; border-radius:4px; border:2px solid rgba(255,255,255,.85); border-right-color:transparent; border-bottom-color:transparent; transform:rotate(45deg); }
.brand-text h1 { font-size:15px; font-weight:650; letter-spacing:-.01em; line-height:1.1; }
.brand-sub { font-size:11px; color:var(--muted); letter-spacing:.01em; }

.segmented { display:flex; gap:2px; padding:3px; background:var(--surface-3); border-radius:11px; border:1px solid var(--line-2); }
.segmented button {
  border:none; background:transparent; color:var(--ink-2); font-size:12.5px; font-weight:550;
  padding:6px 13px; border-radius:8px; transition:all .18s var(--ease); white-space:nowrap; display:flex; align-items:center; gap:6px;
}
.segmented button:hover { color:var(--ink); }
.segmented button.active { background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm); }
.badge { font-size:10px; font-weight:700; background:var(--critical); color:#fff; border-radius:20px; padding:1px 6px; min-width:16px; text-align:center; }

.topbar-actions { margin-left:auto; display:flex; align-items:center; gap:8px; }
.cmdk-hint { display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:6px 10px; font-size:12px; color:var(--muted); transition:all .18s var(--ease); }
.cmdk-hint:hover { color:var(--ink); box-shadow:var(--shadow-sm); }
.cmdk-hint kbd, .cmdk-foot kbd { font-family:var(--font); font-size:10.5px; background:var(--surface-3); border:1px solid var(--line); border-radius:5px; padding:1px 5px; color:var(--ink-2); }
.icon-btn { background:var(--surface); border:1px solid var(--line); border-radius:9px; width:34px; height:32px; font-size:15px; color:var(--ink-2); transition:all .18s var(--ease); }
.icon-btn:hover { color:var(--ink); box-shadow:var(--shadow-sm); }

/* ---------- Status bar ---------- */
.statusbar { max-width:1320px; margin:14px auto 0; padding:0 22px; font-size:12px; color:var(--muted); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.statusbar .dot { width:7px; height:7px; border-radius:50%; background:var(--good); box-shadow:0 0 0 3px var(--good-wash); }
.statusbar b { color:var(--ink-2); font-weight:600; }
.statusbar .sep { color:var(--baseline); }

/* ---------- Layout ---------- */
.view { max-width:1320px; margin:0 auto; padding:18px 22px 40px; animation:fade .3s var(--ease); }
@keyframes fade { from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
.section-title { display:flex; align-items:baseline; gap:10px; margin:26px 2px 12px; }
.section-title h2 { font-size:16px; font-weight:640; letter-spacing:-.01em; }
.section-title .hint { font-size:11.5px; color:var(--muted); }
.grid { display:grid; gap:14px; }
.cols-hero { grid-template-columns: 1.15fr 1fr; }
@media (max-width:900px){ .cols-hero{ grid-template-columns:1fr; } }

/* ---------- Cards ---------- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow-sm); transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.card.interactive { cursor:pointer; }
.card.interactive:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--line); }
.card.interactive:active { transform:translateY(-1px); }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px; }
.card-title { font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:9px; min-width:0; }
.card-title .swatch { width:9px; height:9px; border-radius:3px; flex:none; }
.eyebrow { font-size:10.5px; font-weight:650; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }

/* hero number */
.hero-num { font-size:44px; font-weight:600; letter-spacing:-.025em; line-height:1.02; margin:8px 0 2px; }
.hero-num.small { font-size:30px; }
.kpi-row { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:7px 0; font-size:12.5px; border-top:1px solid var(--line-2); }
.kpi-row:first-of-type{ border-top:none; }
.kpi-row .lbl { color:var(--ink-2); }
.kpi-row .val { font-weight:600; font-variant-numeric:tabular-nums; display:flex; gap:8px; align-items:baseline; }

/* deltas */
.delta { font-size:11.5px; font-weight:650; font-variant-numeric:tabular-nums; }
.delta.up-bad { color:var(--critical); } .delta.down-good { color:var(--good-ink); }
.delta.up-good { color:var(--good-ink); } .delta.down-bad { color:var(--critical); }
.delta.flat { color:var(--muted); }

/* pills */
.pill { font-size:10.5px; font-weight:650; padding:2px 9px; border-radius:20px; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.pill.good { background:var(--good-wash); color:var(--good-ink); }
.pill.warn { background:var(--warn-wash); color:var(--warn-ink); }
.pill.serious { background:var(--ser-wash); color:var(--ser-ink); }
.pill.crit { background:var(--crit-wash); color:var(--crit-ink); }
.pill.neutral { background:var(--surface-3); color:var(--ink-2); }
.pill.accent { background:var(--accent-wash); color:var(--accent-ink); }
.pill .ic { font-weight:800; }

/* account cards grid */
.acct-grid { grid-template-columns:repeat(auto-fill, minmax(268px,1fr)); }
.acct-card .spark { height:38px; margin:10px -4px -2px; }
.acct-card .flags { display:flex; gap:5px; flex-wrap:wrap; }

/* ---------- Charts ---------- */
.chartwrap { position:relative; }
.chartbox { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow-sm); }
.chartbox .chart-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; }
.chartbox .chart-title { font-size:12.5px; font-weight:600; }
.chart-canvas { position:relative; height:270px; }
.chart-canvas.short { height:210px; }
.legend { display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; font-size:11.5px; color:var(--ink-2); }
.legend .li { display:flex; align-items:center; gap:6px; }
.legend .li .sw { width:10px; height:3px; border-radius:2px; }

/* ---------- Tables ---------- */
.table-wrap { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; }
table { width:100%; border-collapse:collapse; font-size:12px; }
thead th { text-align:right; padding:10px 12px; background:var(--surface-2); color:var(--muted); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; position:sticky; top:0; }
th:first-child, td:first-child { text-align:left; }
tbody td { padding:9px 12px; border-top:1px solid var(--line-2); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
tbody tr { transition:background .12s; }
tbody tr:hover td { background:var(--surface-2); }
tbody tr.clickable { cursor:pointer; }
td.name { text-align:left; max-width:340px; overflow:hidden; text-overflow:ellipsis; font-weight:550; font-variant-numeric:normal; }
td.name .meta { color:var(--muted); font-size:10.5px; font-weight:400; display:block; margin-top:1px; }

/* ---------- Alerts ---------- */
.alert { background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--baseline); border-radius:14px; padding:13px 16px; margin-bottom:9px; display:flex; gap:12px; align-items:flex-start; box-shadow:var(--shadow-sm); transition:transform .18s var(--ease); }
.alert:hover { transform:translateX(2px); }
.alert.crit { border-left-color:var(--critical); } .alert.warn { border-left-color:var(--warning); }
.alert.info { border-left-color:var(--accent); } .alert.good { border-left-color:var(--good); }
.alert .tag { font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 7px; border-radius:6px; flex:none; margin-top:1px; }
.alert.crit .tag{ background:var(--crit-wash); color:var(--crit-ink);} .alert.warn .tag{ background:var(--warn-wash); color:var(--warn-ink);}
.alert.info .tag{ background:var(--accent-wash); color:var(--accent-ink);} .alert.good .tag{ background:var(--good-wash); color:var(--good-ink);}
.alert .body { font-size:12.5px; line-height:1.5; }
.alert .body b { font-weight:650; }

/* ---------- Playbook ---------- */
.pb { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px 24px; margin-bottom:14px; box-shadow:var(--shadow-sm); }
.pb h3 { font-size:14px; font-weight:640; margin-bottom:10px; color:var(--ink); letter-spacing:-.01em; }
.pb p, .pb li { font-size:12.8px; color:var(--ink-2); margin-bottom:6px; }
.pb ul { padding-left:20px; } .pb li b { color:var(--ink); }
.pb code { background:var(--surface-3); border:1px solid var(--line-2); padding:1px 6px; border-radius:6px; font-size:11.5px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.pb .warn { color:var(--ser-ink); font-weight:600; }
.kv { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:9px; margin:10px 0; }
.kv > div { background:var(--surface-2); border:1px solid var(--line-2); border-radius:11px; padding:9px 12px; font-size:11.8px; color:var(--ink-2); }
.kv b { display:block; font-size:12.5px; color:var(--ink); margin-bottom:1px; }

/* ---------- Client KB ---------- */
.kb-grid { grid-template-columns:repeat(auto-fill, minmax(290px,1fr)); }
.kb-card .kb-meta { display:flex; gap:6px; flex-wrap:wrap; margin-top:9px; }
.nba { margin-top:11px; font-size:11.8px; color:var(--ink-2); background:var(--accent-wash); border-radius:10px; padding:9px 11px; line-height:1.45; }
.nba .eyebrow { color:var(--accent-ink); display:block; margin-bottom:3px; }

/* KB profile (deep-dive) */
.kb-profile { display:grid; grid-template-columns: 1.55fr 1fr; gap:16px; align-items:start; }
@media (max-width:960px){ .kb-profile{ grid-template-columns:1fr; } }
.kb-hero { display:flex; align-items:flex-start; gap:16px; }
.kb-logo { width:52px; height:52px; border-radius:14px; flex:none; display:grid; place-items:center; font-weight:700; font-size:20px; color:#fff; letter-spacing:-.02em; box-shadow:var(--shadow-sm); }
.kb-hero h2 { font-size:22px; font-weight:660; letter-spacing:-.02em; }
.kb-facts { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.fact { font-size:11.5px; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line-2); border-radius:8px; padding:4px 9px; }
.fact b { color:var(--ink); font-weight:600; }
.block { margin-top:18px; }
.block > .eyebrow { display:block; margin-bottom:9px; }
.intel-list { list-style:none; }
.intel-list li { position:relative; padding:6px 0 6px 18px; font-size:12.8px; color:var(--ink-2); border-top:1px solid var(--line-2); }
.intel-list li:first-child{ border-top:none; }
.intel-list li::before { content:""; position:absolute; left:2px; top:12px; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.intel-list.risk li::before { background:var(--serious); }
.stake { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-top:1px solid var(--line-2); font-size:12.5px; }
.stake:first-child{ border-top:none; }
.stake .role { color:var(--muted); font-size:11.5px; }
.contract-row, .opp-row { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:9px 0; border-top:1px solid var(--line-2); font-size:12px; }
.contract-row:first-child,.opp-row:first-child{ border-top:none; }
.call-chip { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; background:var(--surface-2); border:1px solid var(--line-2); border-radius:8px; padding:5px 9px; margin:3px 4px 0 0; }
.call-chip::before { content:"▶"; font-size:8px; color:var(--accent); }
.crumb { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--accent-ink); font-weight:600; margin-bottom:14px; cursor:pointer; }
.crumb:hover{ text-decoration:underline; }

/* executive synthesis */
.synth { background:linear-gradient(180deg, var(--surface), var(--surface-2)); }
.synth-list li { padding:9px 0 9px 0; border-color:var(--line-2); font-size:13px; color:var(--ink); display:flex; gap:10px; align-items:flex-start; }
.synth-list li::before { display:none; }
.synth-list li .syn-tag { flex:none; font-size:9.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent-wash); border-radius:6px; padding:3px 7px; margin-top:1px; min-width:66px; text-align:center; }
.synth-list li:hover { color:var(--ink); }
.synth-list li[style*="pointer"]:hover .syn-tag { background:var(--accent); color:#fff; }

/* opportunity spotlight */
.spotlight-card { background:linear-gradient(135deg, var(--accent-wash), var(--surface) 60%); border-color:color-mix(in srgb, var(--accent) 30%, var(--line)); }
.spotlight-banner { margin-top:12px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-radius:12px; cursor:pointer; background:linear-gradient(135deg, var(--accent-wash), transparent); border:1px solid color-mix(in srgb, var(--accent) 26%, var(--line)); transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
.spotlight-banner:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.card-title .swatch { width:10px; height:10px; border-radius:3px; flex:none; }

/* segment chips row */
.chips { display:flex; gap:8px; flex-wrap:wrap; margin:2px 0 4px; }
.chip { font-size:11.5px; padding:5px 11px; border-radius:9px; background:var(--surface); border:1px solid var(--line); color:var(--ink-2); transition:all .16s var(--ease); }
.chip.active, .chip:hover { color:var(--ink); box-shadow:var(--shadow-sm); border-color:var(--accent); }
.chip.active { background:var(--accent-wash); color:var(--accent-ink); }

/* ---------- Command palette ---------- */
.cmdk-overlay { position:fixed; inset:0; z-index:80; background:rgba(11,11,11,.28); backdrop-filter:blur(3px); display:flex; align-items:flex-start; justify-content:center; padding-top:12vh; animation:fade .16s var(--ease); }
.cmdk { width:min(640px,92vw); background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg); overflow:hidden; }
.cmdk input { width:100%; border:none; padding:18px 20px; font-size:16px; background:transparent; color:var(--ink); outline:none; border-bottom:1px solid var(--line-2); }
.cmdk-results { max-height:52vh; overflow:auto; padding:6px; }
.cmdk-item { display:flex; align-items:center; gap:11px; padding:10px 13px; border-radius:10px; cursor:pointer; font-size:13px; }
.cmdk-item .k-ic { width:24px; height:24px; border-radius:7px; display:grid; place-items:center; font-size:11px; font-weight:700; color:#fff; flex:none; }
.cmdk-item .k-sub { color:var(--muted); font-size:11px; margin-left:auto; }
.cmdk-item.sel, .cmdk-item:hover { background:var(--accent-wash); }
.cmdk-foot { padding:9px 16px; border-top:1px solid var(--line-2); font-size:11px; color:var(--muted); display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* ---------- Blueprint adherence ---------- */
.bp-score { display:inline-flex; align-items:baseline; gap:3px; font-weight:700; font-variant-numeric:tabular-nums; }
.bp-score .u { font-size:.72em; color:var(--muted); font-weight:600; }
.bp-pill { font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:20px; display:inline-flex; align-items:center; gap:5px; }
.bp-pill .bp-dot { width:6px; height:6px; border-radius:50%; }
.bp-pill.good { background:var(--good-wash); color:var(--good-ink);} .bp-pill.good .bp-dot{background:var(--good);}
.bp-pill.warn { background:var(--warn-wash); color:var(--warn-ink);} .bp-pill.warn .bp-dot{background:var(--warning);}
.bp-pill.crit { background:var(--crit-wash); color:var(--crit-ink);} .bp-pill.crit .bp-dot{background:var(--critical);}
.bp-pill.none { background:var(--surface-3); color:var(--muted);} .bp-pill.none .bp-dot{background:var(--baseline);}
.bp-bars { display:flex; flex-direction:column; gap:9px; margin-top:10px; }
.bp-row { display:grid; grid-template-columns:130px 1fr 34px; align-items:center; gap:10px; font-size:11.5px; }
.bp-row .bp-lbl { color:var(--ink-2); text-transform:capitalize; }
.bp-row .bp-val { text-align:right; font-weight:650; font-variant-numeric:tabular-nums; color:var(--ink); }
.bp-track { height:7px; background:var(--surface-3); border-radius:4px; overflow:hidden; }
.bp-fill { height:100%; border-radius:4px; transition:width .6s var(--ease); }
.bp-fill.good{background:var(--good);} .bp-fill.warn{background:var(--warning);} .bp-fill.crit{background:var(--critical);}
.bp-hero { display:flex; align-items:center; gap:14px; }
.bp-ring { --v:0; --c:var(--good); width:56px; height:56px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:conic-gradient(var(--c) calc(var(--v)*1%), var(--surface-3) 0); position:relative; }
.bp-ring::after { content:""; position:absolute; inset:6px; border-radius:50%; background:var(--surface); }
.bp-ring span { position:relative; z-index:1; font-weight:700; font-size:15px; }

/* ---------- Add clients modal ---------- */
.add-modal { width:min(680px,94vw); }
.add-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px 18px 6px; }
.add-title { font-size:15px; font-weight:650; }
.add-sub { font-size:11.5px; color:var(--muted); margin-top:2px; }
.add-modal input { border-bottom:none; padding:8px 18px 10px; font-size:15px; }
.add-chips { display:flex; gap:6px; flex-wrap:wrap; padding:0 16px 10px; border-bottom:1px solid var(--line-2); }
.add-chip { font-size:11px; padding:4px 10px; border-radius:8px; background:var(--surface-2); border:1px solid var(--line-2); color:var(--ink-2); cursor:pointer; transition:all .14s var(--ease); }
.add-chip.active, .add-chip:hover { border-color:var(--accent); color:var(--accent-ink); background:var(--accent-wash); }
.add-results { max-height:52vh; }
.add-row { display:flex; align-items:center; gap:12px; padding:10px 13px; border-radius:11px; }
.add-row:hover { background:var(--surface-2); }
.add-row .a-logo { width:30px; height:30px; border-radius:9px; flex:none; display:grid; place-items:center; font-size:11px; font-weight:700; color:#fff; }
.add-row .a-main { min-width:0; flex:1; }
.add-row .a-name { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.add-row .a-meta { font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.add-row .a-spend { font-size:12px; font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap; }
.add-btn { flex:none; border:1px solid var(--accent); background:var(--accent); color:#fff; font-size:11.5px; font-weight:650; border-radius:8px; padding:5px 12px; cursor:pointer; transition:all .15s var(--ease); }
.add-btn:hover { filter:brightness(1.06); }
.add-btn.added { background:var(--good-wash); border-color:var(--good-wash); color:var(--good-ink); cursor:default; }
.add-btn.inbook { background:var(--surface-3); border-color:var(--line); color:var(--muted); cursor:default; }
.btn-add-clients { display:inline-flex; align-items:center; gap:6px; background:var(--surface); border:1px dashed var(--accent); color:var(--accent-ink); border-radius:10px; padding:6px 13px; font-size:12.5px; font-weight:600; cursor:pointer; transition:all .16s var(--ease); }
.btn-add-clients:hover { background:var(--accent-wash); box-shadow:var(--shadow-sm); }
.added-badge { font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent-wash); border-radius:5px; padding:2px 6px; }
.card-x { position:absolute; top:10px; right:10px; width:22px; height:22px; border-radius:7px; border:1px solid var(--line); background:var(--surface); color:var(--muted); font-size:12px; line-height:1; cursor:pointer; opacity:0; transition:opacity .15s; }
.card:hover .card-x { opacity:1; }
.card-x:hover { color:var(--critical); border-color:var(--critical); }

/* ---------- Sheet (drill) ---------- */
.sheet-overlay { position:fixed; inset:0; z-index:70; background:rgba(11,11,11,.34); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:24px; animation:fade .16s var(--ease); }
.sheet { width:min(720px,94vw); max-height:88vh; overflow:auto; background:var(--surface); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow-lg); padding:24px 26px; animation:pop .24s var(--ease); }
@keyframes pop { from{opacity:0; transform:scale(.97) translateY(8px);} to{opacity:1; transform:none;} }
.sheet .sheet-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:6px; }
.sheet h3 { font-size:18px; font-weight:650; letter-spacing:-.01em; }
.sheet .close { background:var(--surface-3); border:1px solid var(--line); border-radius:9px; width:30px; height:30px; font-size:16px; color:var(--ink-2); flex:none; }
.stat-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:1px; background:var(--line-2); border:1px solid var(--line-2); border-radius:14px; overflow:hidden; margin:14px 0; }
.stat-strip .st { background:var(--surface); padding:11px 13px; }
.stat-strip .st .lbl { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-weight:650; }
.stat-strip .st .v { font-size:18px; font-weight:640; letter-spacing:-.01em; margin-top:3px; font-variant-numeric:tabular-nums; }

/* ---------- Toast ---------- */
.toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(10px); background:var(--ink); color:var(--plane); padding:10px 18px; border-radius:11px; font-size:12.5px; font-weight:550; box-shadow:var(--shadow-lg); opacity:0; transition:all .22s var(--ease); z-index:90; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- Ask-the-book assistant ---------- */
.ask-fab {
  position:fixed; right:22px; bottom:22px; z-index:60; display:flex; align-items:center; gap:9px;
  padding:12px 18px; border:none; border-radius:30px; color:#fff; font-size:13px; font-weight:650;
  background:linear-gradient(135deg, var(--accent), var(--s7)); box-shadow:var(--shadow-lg);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), opacity .2s; cursor:pointer;
}
.ask-fab:hover { transform:translateY(-3px) scale(1.02); }
.ask-fab:active { transform:translateY(-1px) scale(.99); }
.ask-fab.hide { opacity:0; pointer-events:none; transform:translateY(12px); }
.ask-fab-spark { font-size:15px; animation:sparkle 2.6s var(--ease) infinite; }
@keyframes sparkle { 0%,100%{opacity:.7; transform:rotate(0) scale(1);} 50%{opacity:1; transform:rotate(20deg) scale(1.22);} }

.ask-panel {
  position:fixed; top:0; right:0; height:100dvh; width:min(420px,100vw); z-index:65;
  background:color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter:saturate(180%) blur(24px); -webkit-backdrop-filter:saturate(180%) blur(24px);
  border-left:1px solid var(--line); box-shadow:var(--shadow-lg); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .34s var(--ease); will-change:transform;
}
.ask-panel.open { transform:translateX(0); }
.ask-head { display:flex; align-items:center; justify-content:space-between; padding:15px 18px; border-bottom:1px solid var(--line-2); }
.ask-title { font-size:14px; font-weight:650; display:flex; align-items:center; gap:9px; }
.ask-dot { width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--s7)); box-shadow:0 0 0 3px var(--accent-wash); }
.ask-model { font-size:10px; font-weight:700; letter-spacing:.04em; color:var(--accent-ink); background:var(--accent-wash); border-radius:6px; padding:2px 7px; }
.ask-close { background:var(--surface-3); border:1px solid var(--line); border-radius:8px; width:28px; height:28px; font-size:14px; color:var(--ink-2); }
.ask-scroll { flex:1; overflow-y:auto; padding:16px 16px 8px; display:flex; flex-direction:column; gap:12px; }

.ask-welcome { color:var(--ink-2); font-size:13px; line-height:1.55; }
.ask-welcome .eyebrow { display:block; margin-bottom:8px; }
.ask-suggests { display:flex; flex-direction:column; gap:7px; margin-top:12px; }
.ask-sugg { text-align:left; background:var(--surface-2); border:1px solid var(--line-2); border-radius:11px; padding:10px 12px; font-size:12.5px; color:var(--ink); cursor:pointer; transition:all .16s var(--ease); }
.ask-sugg:hover { border-color:var(--accent); box-shadow:var(--shadow-sm); transform:translateY(-1px); }

.msg { max-width:88%; font-size:13px; line-height:1.55; animation:rise .3s var(--ease); }
.msg.user { align-self:flex-end; background:var(--accent); color:#fff; padding:9px 13px; border-radius:16px 16px 5px 16px; }
.msg.bot { align-self:flex-start; color:var(--ink); }
.msg.bot .md { background:var(--surface-2); border:1px solid var(--line-2); padding:11px 14px; border-radius:16px 16px 16px 5px; }
.msg.bot .md p { margin:0 0 7px; } .msg.bot .md p:last-child { margin:0; }
.msg.bot .md ul { margin:4px 0 7px; padding-left:18px; } .msg.bot .md li { margin-bottom:3px; }
.msg.bot .md strong { font-weight:650; }
.msg.bot .md a { color:var(--accent-ink); }
.msg .who { font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
.stream-cursor { display:inline-block; width:7px; height:14px; background:var(--accent); border-radius:2px; margin-left:2px; vertical-align:-2px; animation:blink 1s steps(2) infinite; }
@keyframes blink { 50%{opacity:0;} }
.typing { display:inline-flex; gap:4px; padding:4px 0; }
.typing i { width:6px; height:6px; border-radius:50%; background:var(--muted); animation:bounce 1.2s var(--ease) infinite; }
.typing i:nth-child(2){ animation-delay:.15s; } .typing i:nth-child(3){ animation-delay:.3s; }
@keyframes bounce { 0%,60%,100%{ transform:translateY(0); opacity:.5;} 30%{ transform:translateY(-5px); opacity:1;} }

.ask-input { display:flex; align-items:flex-end; gap:8px; padding:12px 14px; border-top:1px solid var(--line-2); background:var(--surface); }
.ask-input textarea { flex:1; resize:none; border:1px solid var(--line); border-radius:13px; padding:10px 13px; font-family:var(--font); font-size:13px; color:var(--ink); background:var(--surface-2); max-height:120px; outline:none; transition:border-color .16s; }
.ask-input textarea:focus { border-color:var(--accent); }
.ask-input button { flex:none; width:36px; height:36px; border:none; border-radius:11px; background:var(--accent); color:#fff; font-size:17px; font-weight:700; cursor:pointer; transition:transform .15s var(--ease), opacity .15s; }
.ask-input button:hover { transform:translateY(-1px); } .ask-input button:disabled { opacity:.4; cursor:default; transform:none; }
@media (max-width:520px){ .ask-panel{ width:100vw; } .ask-fab span:not(.ask-fab-spark){ display:none; } .ask-fab{ padding:14px; } }

/* ---------- staggered entrance ---------- */
@keyframes rise { from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
.view .cards > *, .view .grid > *, .view .movers > *, .view .alert, .view .pb {
  animation:rise .4s var(--ease) both;
}
.view .grid > *:nth-child(1),.view .cards>*:nth-child(1){animation-delay:.02s}
.view .grid > *:nth-child(2),.view .cards>*:nth-child(2){animation-delay:.05s}
.view .grid > *:nth-child(3),.view .cards>*:nth-child(3){animation-delay:.08s}
.view .grid > *:nth-child(4),.view .cards>*:nth-child(4){animation-delay:.11s}
.view .grid > *:nth-child(5),.view .cards>*:nth-child(5){animation-delay:.14s}
.view .grid > *:nth-child(6),.view .cards>*:nth-child(6){animation-delay:.17s}
.view .grid > *:nth-child(7){animation-delay:.20s}
.view .grid > *:nth-child(8){animation-delay:.23s}
.view .grid > *:nth-child(n+9){animation-delay:.26s}
@media (prefers-reduced-motion: reduce){ .view .cards>*,.view .grid>*,.view .movers>*,.view .alert,.view .pb,.msg{ animation:none !important; } }

/* ---------- misc ---------- */
.loading { text-align:center; padding:80px 20px; color:var(--muted); }
.spinner { width:26px; height:26px; border:3px solid var(--line); border-top-color:var(--accent); border-radius:50%; margin:0 auto 14px; animation:spin 1s linear infinite; }
@keyframes spin { to{ transform:rotate(360deg);} }
.empty { color:var(--muted); font-size:12.5px; padding:14px 2px; }
.hr { height:1px; background:var(--line-2); margin:16px 0; border:none; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.right { text-align:right; } .nowrap{ white-space:nowrap; }
.dim { color:var(--muted); }
.movers { display:flex; gap:10px; overflow-x:auto; padding:2px; }
.mover { flex:none; min-width:150px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px 14px; box-shadow:var(--shadow-sm); cursor:pointer; transition:transform .18s var(--ease),box-shadow .18s var(--ease); }
.mover:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.mover .m-name { font-size:11.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mover .m-val { font-size:17px; font-weight:640; margin-top:4px; letter-spacing:-.01em; }

/* ---------- Clients dropdown (full Q3 book) ---------- */
.clients-dd-wrap { position:relative; }
.clients-btn { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--ink-2); background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:7px 12px; cursor:pointer; transition:all .15s var(--ease); }
.clients-btn:hover, .clients-btn.open { border-color:var(--accent); color:var(--accent-ink); background:var(--accent-wash); }
.clients-btn .dd-count { font-size:10px; font-weight:700; background:var(--accent); color:#fff; border-radius:12px; padding:1px 7px; }
.clients-btn .dd-caret { font-size:9px; opacity:.7; }
.clients-dd { position:absolute; top:calc(100% + 8px); right:0; width:min(480px, 92vw); background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg); overflow:hidden; z-index:60; }
.clients-dd input { width:100%; border:none; padding:14px 16px; font-size:14px; background:transparent; color:var(--ink); outline:none; border-bottom:1px solid var(--line-2); }
.dd-chips { display:flex; gap:6px; padding:9px 12px 3px; flex-wrap:wrap; }
.dd-results { max-height:46vh; overflow:auto; padding:6px; }
.dd-row { display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:10px; cursor:pointer; }
.dd-row:hover { background:var(--accent-wash); }
.dd-row .a-logo { width:28px; height:28px; border-radius:8px; flex:none; display:grid; place-items:center; font-size:10.5px; font-weight:700; color:#fff; }
.dd-row .a-main { min-width:0; flex:1; }
.dd-row .a-name { font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dd-row .a-meta { font-size:10.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dd-row .a-spend { font-size:12px; font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap; }
.dd-foot { padding:8px 15px; border-top:1px solid var(--line-2); font-size:11px; color:var(--muted); }

/* ---------- Summary catalogue ---------- */
.sum-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.sum-table th { text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:650; padding:10px 12px; border-bottom:1px solid var(--hairline); }
.sum-table th.num { text-align:right; }
.sum-table td { padding:9px 12px; border-bottom:1px solid var(--line-2); vertical-align:middle; }
.sum-table tbody tr { cursor:pointer; transition:background .12s var(--ease); }
.sum-table tbody tr:hover { background:var(--surface-2); }
.sum-table tbody tr:last-child td { border-bottom:none; }
.sum-table td.g-name { font-weight:650; white-space:nowrap; max-width:220px; overflow:hidden; text-overflow:ellipsis; }
.sum-table td.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.sum-table td.num.strong { font-weight:700; }
.sum-table td.share { min-width:120px; }
.share-track { display:inline-block; width:70px; height:5px; background:var(--surface-3); border-radius:3px; overflow:hidden; vertical-align:middle; margin-right:7px; }
.share-fill { height:100%; background:var(--accent); border-radius:3px; }
.share-pct { font-size:11px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.sum-table td.tops { max-width:260px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11.5px; }
.sum-table td.tops a { color:var(--accent-ink); cursor:pointer; }
.sum-table td.tops a:hover { text-decoration:underline; }
@media (max-width: 900px) { .sum-table td.tops, .sum-table th:last-child { display:none; } .clients-btn > span:first-child { display:none; } }