/* Converse Studio — the back-office workspace. Its own system, shared with no other page:
   IBM Plex Sans, dense tables, quiet chrome, brand navy and flame. The lab pages keep lab.css. */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* Brand theme: the deep navy carries the interface, the flame orange is spent sparingly —
   an accent used everywhere is an accent used nowhere. Palette from the brand, no logo art. */
:root{
  --ink:#1A1F2B; --muted:#5B6373; --faint:#646C7E; --line:#E3E7EE; --hair:#EEF1F5;
  --bg:#F5F7FA; --card:#FFFFFF; --accent:#1B4272; --accent-ink:#132F53; --accent-soft:#E9EFF7;
  --flame:#F4791F; --flame-soft:#FDEEDF;
  --ok:#16A34A; --ok-soft:#EAF7EF; --warn:#B45309; --warn-soft:#FEF3E2;
  --bad:#DC2626; --bad-soft:#FDECEC; --mono:'IBM Plex Mono',ui-monospace,monospace;
  /* Round 2 (design-r2 final.md 3.2-3.4, 3.7). --faint was #8A92A3 (3.1:1 on white); #646C7E passes on
     every light surface. --control is the one border a control needs to meet 3:1 (inputs, the off-switch
     track, the upcoming-step disc); --select is a selected row or choice card. Each status keeps its
     -soft tint and gains an -edge (the tint's border) and an -ink (text set ON the tint). */
  --ink-2:#3A4558; --control:#848DA0; --select:#F3F6FB;
  --ok-ink:#166534; --warn-ink:#92400E; --bad-ink:#991B1B;
  --ok-edge:#CBEBD6; --warn-edge:#F8DDB8; --bad-edge:#F7CFCF; --info-edge:#D5E1F0;
  /* the dark objects (rail, Live tile, Outcome Pane) are navy-ink in BOTH themes; text on them */
  --on-dark:#FFFFFF; --on-dark-2:#DCE5F2; --on-dark-3:#C9D6EA; --on-dark-4:#A9B8CF; --on-dark-accent:#8AB4E8;
  /* four levels of elevation and one focus ring, nothing else */
  --e1:0 1px 2px rgba(12,33,63,.05);
  --e2:0 4px 12px -2px rgba(12,33,63,.08),0 2px 4px -2px rgba(12,33,63,.06);
  --e3:0 24px 48px -12px rgba(12,33,63,.28),0 0 0 1px rgba(12,33,63,.06);
  --focus:0 0 0 3px rgba(27,66,114,.20); --focus-border:#1B4272;
  --focus-on-dark:0 0 0 3px rgba(138,180,232,.45); --focus-border-on-dark:#8AB4E8;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{font:13.5px/1.55 'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
     color:var(--ink);background:var(--bg)}
a{color:var(--accent);text-decoration:none} a:hover{color:var(--accent-ink)}
::placeholder{color:var(--faint)}

/* ---------------------------------------------------------------- frame */
.frame{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.side{background:var(--card);border-right:1px solid var(--line);padding:14px 10px 12px;
      display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;overflow-y:auto}
.main{min-width:0;display:flex;flex-direction:column}

.ws{display:flex;align-items:center;gap:10px;padding:6px 10px 14px}
.ws-mark{width:30px;height:30px;border-radius:8px;background:var(--accent);color:#fff;
         display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.ws-name{display:flex;flex-direction:column;line-height:1.25}
.ws-name b{font-size:13.5px;font-weight:600}
.ws-name span{font-size:11px;color:var(--faint)}
.ws-dot{color:var(--flame);font-weight:700}
/* The one flame inside the instructions card (P5-01): "instructions changed -- N things". A button that
   reads as a line, because it is a note about the text above it, not a second call to action. */
.flame-note{background:none;border:0;padding:4px 0;margin-top:8px;color:var(--flame);font-weight:600;cursor:pointer;text-align:left}
.flame-note:hover{text-decoration:underline}
/* One change in the wizard's "what the edit changed" sheet. NOT .plan-card: that is Billing's plan
   picker further down, and while this card shared the name the later rule gave it 18px padding, a
   12px radius and a flex column. */
.wiz-plan-card{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-top:8px;background:var(--card)}
.wiz-plan-card .glyph{display:inline-block;width:18px;font-weight:700}

.sect{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
      color:var(--faint);padding:14px 10px 5px}
.nav-i{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:7px;color:var(--ink);
       font-size:13px;cursor:pointer;border:0;background:none;width:100%;text-align:left}
.nav-i:hover{background:var(--hair);color:var(--ink)}
.nav-i.on{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.nav-i svg{flex:none;color:var(--muted)} .nav-i.on svg{color:var(--accent-ink)}
.nav-i .soon{margin-left:auto;font-size:9.5px;font-weight:600;letter-spacing:.05em;color:var(--faint);
             border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.side-foot{margin-top:auto;padding:10px;border-top:1px solid var(--hair);font-size:11.5px;color:var(--muted)}

/* ---------------------------------------------------------------- topbar */
.top{display:flex;align-items:center;gap:14px;padding:14px 28px;background:var(--card);
     border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.top h1{font-size:16px;font-weight:600;letter-spacing:-.01em}
.crumb{font-size:12px;color:var(--faint)}
.top .grow{flex:1}

.content{padding:22px 28px 60px;max-width:1180px;width:100%}
.content.wide{max-width:none}

/* ---------------------------------------------------------------- controls */
button,.btn{font:inherit;font-size:12.5px;font-weight:600;border-radius:8px;padding:8px 14px;
       border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer;
       display:inline-flex;align-items:center;gap:7px}
button:hover,.btn:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
button.ghost{background:var(--card);color:var(--ink);border-color:var(--line)}
button.ghost:hover{background:var(--hair);color:var(--ink)}
button.quiet{background:none;border:0;color:var(--accent);padding:4px 6px}
button.quiet:hover{background:var(--accent-soft);color:var(--accent-ink)}
button.danger-q{background:none;border:0;color:var(--bad);padding:4px 6px}
button.danger-q:hover{background:var(--bad-soft);color:var(--bad-ink)}
button:disabled{opacity:.45;cursor:not-allowed}

input[type=text],input[type=number],input[type=search],select,textarea{
  font:inherit;font-size:13px;padding:8px 11px;border:1px solid var(--line);border-radius:8px;
  background:var(--card);color:var(--ink);width:100%}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid transparent;border-color:var(--focus-border);box-shadow:var(--focus)}
/* a native tick, dot or slider draws no halo, so it keeps an outline in the ring's colour */
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible,input[type=range]:focus-visible{
  outline:2px solid var(--focus-border);outline-offset:2px;box-shadow:none}
/* words for a screen reader only (a11y report 2026-10-19, G: the flash's kind word): the standard clip box */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
textarea{min-height:84px;resize:vertical;line-height:1.5}
input[type=range]{width:100%;accent-color:var(--accent)}

.f{display:flex;flex-direction:column;gap:5px;min-width:0}
.f>label{font-size:12px;font-weight:600;color:var(--ink)}
.help{font-size:11.5px;color:var(--faint);line-height:1.5}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.wide-f{grid-column:1/-1}

.sw{display:flex;align-items:center;gap:9px;font-size:13px;cursor:pointer}
.sw input{width:auto;accent-color:var(--accent)}

/* ---------------------------------------------------------------- surfaces */
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px;
      box-shadow:var(--e1)}
.card+.card{margin-top:16px}
.card h2{font-size:14.5px;font-weight:600;margin-bottom:2px}
.card .sub{font-size:12px;color:var(--muted);line-height:1.55;max-width:88ch;margin-bottom:12px}
.card h3{font-size:12.5px;font-weight:600;margin:0 0 8px}

.tile{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.tile .v{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.tile .k{font-size:11.5px;color:var(--muted);margin-top:2px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}

.banner{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--card);
        border-radius:10px;padding:12px 16px;font-size:12.5px;color:var(--muted)}
.banner.warn{background:var(--warn-soft);border-color:#F3DDB8;color:var(--warn-ink)}
.banner.bad{background:var(--bad-soft);border-color:#F5C6C2;color:var(--bad-ink)}
.banner.accent{background:var(--accent-soft);border-color:#C6D4E6;color:var(--accent-ink)}

/* ---------------------------------------------------------------- data */
table.data{width:100%;border-collapse:collapse;font-size:13px}
.data th{text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
         color:var(--faint);padding:0 14px 9px 0;border-bottom:1px solid var(--line)}
.data td{padding:11px 14px 11px 0;border-bottom:1px solid var(--hair);vertical-align:middle}
.data tr:last-child td{border-bottom:0}
.data tr.rowlink{cursor:pointer} .data tr.rowlink:hover td{background:var(--hair)}

.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
      padding:2px 9px;border-radius:999px;white-space:nowrap}
/* status text set ON its tint is the tint's ink (final.md 3.3): the solid ok green read 2.99:1 on its own tint */
.pill.ok{background:var(--ok-soft);color:var(--ok-ink)}
.pill.warn{background:var(--warn-soft);color:var(--warn-ink)}
.pill.bad{background:var(--bad-soft);color:var(--bad-ink)}
.pill.mute{background:var(--hair);color:var(--muted)}
.pill.accent{background:var(--accent-soft);color:var(--accent-ink)}

.avatar{width:32px;height:32px;border-radius:8px;color:#fff;font-size:13px;font-weight:700;
        display:flex;align-items:center;justify-content:center;flex:none}

.kbd,code{font-family:var(--mono);font-size:12px;background:var(--hair);padding:1px 6px;border-radius:5px}
pre.code{font-family:var(--mono);font-size:12px;background:#12203A;color:#D9DFEA;border-radius:10px;
         padding:16px 18px;overflow-x:auto;line-height:1.6}

/* ---------------------------------------------------------------- tabs & segments */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;border-radius:0;
             color:var(--muted);font-size:13px;font-weight:500;padding:9px 14px}
.tabs button:hover{background:none;color:var(--ink)}
.tabs button.on{color:var(--accent-ink);border-bottom-color:var(--flame);font-weight:600}
/* Each tab's Hindi under its English (review of G22). */
.tabs .tab-hi{display:block;font-size:10.5px;font-weight:400;line-height:1.25;color:var(--muted)}

.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--card)}
.seg button{border:0;border-radius:0;background:var(--card);color:var(--muted);font-size:12px;padding:6px 13px}
.seg button:hover{background:var(--hair);color:var(--ink)}
.seg button.on{background:var(--accent);color:#fff}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:11.5px;padding:4px 10px;border-radius:999px;background:var(--hair);color:var(--muted);
      border:1px solid transparent;cursor:default}
.chip.pick{cursor:pointer;background:var(--card);border-color:var(--line)}
.chip.pick:hover{border-color:var(--accent);color:var(--accent-ink)}
.chip.on{background:var(--accent);color:#fff}
.chip.tok{font-family:var(--mono);font-size:11px;background:var(--accent-soft);color:var(--accent-ink);cursor:pointer}

/* ---------------------------------------------------------------- builder specifics */
.rec{border:1px solid var(--line);border-radius:9px;padding:14px 16px;background:#FBFCFD;margin-top:10px}
.rec-h{display:flex;align-items:center;gap:9px;margin-bottom:4px}
.rec-h strong{font-size:13px;font-weight:600}
.rec .grid2{margin-top:8px}
/* ListEditor's two compact shapes (14 Sep 2026). dense: the fields are the row, so a variable
   is one line and not a boxed card that repeats its own name. collapsible: a summary line with
   the badges, opening to the grid; a closed row costs one line. Nothing new in colour. */
.rec.dense{display:flex;align-items:center;gap:6px;padding:7px 8px 7px 12px;margin-top:6px}
.rec.dense .rec-line{display:flex;flex:1;gap:10px;align-items:center;min-width:0}
.rec.dense .rec-line .f{flex:1;min-width:0}
.rec.dense .rec-line input,.rec.dense .rec-line select{width:100%;box-sizing:border-box;padding:7px 10px}
.rec.dense .rec-line .f>label{display:none}
.rec.dense .rec-line .help{display:none}
.rec.dense .pill,.rec.dense .mono{margin-right:4px}
.dense-head{display:flex;gap:10px;padding:0 8px 0 12px;margin-top:12px}
.dense-head span{flex:1;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.dense-head .ctl{flex:none;width:109px}
.rec.shut{padding-top:9px;padding-bottom:9px}
.rec.shut .rec-h{margin-bottom:0}
.rec-h.tog{cursor:pointer;user-select:none}
.rec-h.tog .tw{color:var(--muted);width:10px;font-size:12px}
.rec-h.tog .pill{font-weight:500}
.rec-h.tog:hover strong{color:var(--accent-ink)}
/* One line of small controls inside an open row: a checkbox and two or three selects that
   would otherwise each take a grid cell and a label of their own. */
.opts{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:13px}
.grid2 .opts select,.grid2 .opts input[type=number]{width:auto}
.opts .sw{font-size:13px}
.numbered{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;margin:18px 0 8px}
.numbered .n{width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;font-size:11px;
             display:flex;align-items:center;justify-content:center;flex:none}

/* the right-hand Test Agent panel */
.tester{position:fixed;top:0;right:0;width:420px;height:100vh;background:var(--card);
        border-left:1px solid var(--line);box-shadow:-8px 0 24px rgba(16,24,40,.08);z-index:40;
        display:flex;flex-direction:column;transform:translateX(100%);transition:transform .18s ease}
.tester.open{transform:none}
.tester-h{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.tester-h b{font-size:14px}
.tester-body{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.tester-foot{border-top:1px solid var(--line);padding:12px 16px;display:flex;flex-direction:column;gap:9px}
.msg{max-width:85%;padding:8px 12px;border-radius:12px;font-size:13px;line-height:1.5}
.msg.agent{background:var(--hair);border-bottom-left-radius:4px;align-self:flex-start}
.msg.caller{background:var(--accent);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.msg.sys{align-self:center;font-size:11px;color:var(--faint);background:none;padding:2px}

.spin{width:14px;height:14px;border:2px solid var(--flame-soft);border-top-color:var(--flame);
      border-radius:50%;animation:spin .8s linear infinite;display:inline-block;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}

.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;
       font-size:12.5px;padding:9px 16px;border-radius:8px;z-index:60;opacity:0;transition:opacity .15s}
.toast.show{opacity:1}

/* The narrow-window shell lives at the END of this file ("the shell on a narrow window"), because
   the sharpened pass below re-states .frame and .content and would otherwise win. What used to be
   here was a 960px collapse that had been dead for exactly that reason — .frame{1fr} written
   before .frame{224px 1fr}, so the sidebar kept its column at every width and main was left with
   151px on a phone. Only the panel that has nowhere else to go stays. */
@media(max-width:960px){
  .tester{width:100vw}
}

/* ---- Platform: workspace switcher, user menu, login (fork additions) ---- */
.wsw{position:relative}
.wsw-btn{display:flex;align-items:center;gap:8px;background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-radius:8px;padding:6px 12px;font-size:13px;font-weight:600}
.wsw-btn:hover{background:var(--hair);color:var(--ink);border-color:var(--line)}
.wsw-dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.wsw-caret{color:var(--faint);font-size:11px}
.wsw-menu,.usr-menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--card);
  border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(20,30,50,.14);
  min-width:230px;padding:6px;z-index:50}
.wsw-item{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;
  background:none;border:0;color:var(--ink);text-align:left;padding:8px 10px;border-radius:7px}
.wsw-item:hover{background:var(--hair);color:var(--ink)}
.wsw-item.on{background:var(--accent-soft)}
.wsw-item b{font-size:13px}
.wsw-item span{font-size:11.5px;color:var(--muted)}
.wsw-add{color:var(--accent);font-weight:600;border-top:1px solid var(--hair);margin-top:4px;border-radius:0 0 7px 7px}
.usr{position:relative}
.usr-btn{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;
  border:0;font-size:12px;font-weight:700;padding:0}
.usr-head{font-weight:700;font-size:13px;padding:8px 10px 2px}
.usr-sub{font-size:11.5px;color:var(--muted);padding:0 10px 8px;border-bottom:1px solid var(--hair)}
.usr-item{display:block;width:100%;background:none;border:0;color:var(--ink);text-align:left;
  padding:8px 10px;border-radius:7px;font-size:13px}
.usr-item:hover{background:var(--hair);color:var(--ink)}
.role-pill{display:inline-block;font-size:11px;font-weight:600;padding:1px 8px;border-radius:20px;
  background:var(--accent-soft);color:var(--accent-ink)}
.role-super{background:#F3E3C4;color:#8A5A12}
.role-owner{background:#E4EEDD;color:#3B6B2C}

/* Login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:24px}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 20px 50px rgba(20,30,50,.10);width:100%;max-width:400px;padding:34px}
.login-mark{display:flex;align-items:center;gap:11px;margin-bottom:24px}
.login-mark .m{width:38px;height:38px;border-radius:10px;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:19px}
.login-mark b{font-size:17px}
.login-mark .ws-dot{color:var(--accent)}
.login-card label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin:14px 0 5px}
.login-card input{width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid var(--line);
  border-radius:9px;font-size:14px;background:var(--card);color:var(--ink)}
.login-card input:focus{outline:2px solid transparent;border-color:var(--focus-border);box-shadow:var(--focus)}
.login-card .btn{width:100%;justify-content:center;margin-top:20px;padding:11px}
.login-err{background:#FBE9E9;color:#9B2C2C;border:1px solid #F3CFCF;border-radius:9px;
  padding:10px 12px;font-size:13px;margin-top:16px}
.login-note{font-size:12px;color:var(--faint);margin-top:18px;text-align:center;line-height:1.5}

/* ---- Premium console layer (fork) ---- */
/* Sidebar brand becomes an org identity block */
.side{background:linear-gradient(180deg,#fff,#FCFDFE)}
.ws{padding:8px 10px 16px;border-bottom:1px solid var(--hair);margin-bottom:6px}
.ws-mark{background:var(--navy-ink);box-shadow:none}
.ws-name b{font-size:14px;letter-spacing:-.01em}
.ws-name span{font-size:11px;color:var(--muted);font-weight:500}

/* Topbar org > workspace context */
.ctx{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);
  background:var(--hair);border-radius:8px;padding:5px 8px 5px 11px}
.ctx b{color:var(--ink);font-weight:600}
.ctx .sep{color:var(--faint)}
.top{gap:12px;box-shadow:0 1px 0 rgba(16,24,40,.03)}
.wsw-btn{box-shadow:var(--e1)}
.usr-btn{box-shadow:0 2px 6px rgba(27,66,114,.25)}

/* Dashboard hero */
.dash-hero{background:linear-gradient(120deg,var(--accent) 0%,#20548C 55%,#2D6FA8 100%);
  color:#fff;border-radius:16px;padding:26px 28px;box-shadow:0 10px 30px rgba(27,66,114,.22);
  position:relative;overflow:hidden}
.dash-hero::after{content:"";position:absolute;right:-40px;top:-40px;width:220px;height:220px;
  border-radius:50%;background:rgba(255,255,255,.06)}
.dash-hero .eyebrow{font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.75;font-weight:600}
.dash-hero h2{font-size:23px;font-weight:700;margin:6px 0 4px;letter-spacing:-.02em}
.dash-hero p{font-size:13px;opacity:.85;max-width:60ch;line-height:1.55}
.dash-hero .cta{display:flex;gap:10px;margin-top:18px;position:relative;z-index:1}
.dash-hero .cta a{background:#fff;color:var(--accent-ink);font-weight:600;font-size:12.5px;
  padding:9px 15px;border-radius:9px;display:inline-flex;align-items:center;gap:7px}
.dash-hero .cta a.outline{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.3)}
.dash-hero .cta a:hover{transform:translateY(-1px);transition:transform .12s}

/* Stat cards with an icon chip */
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;
  display:flex;align-items:center;gap:14px;box-shadow:var(--e1)}
.stat-i{width:40px;height:40px;border-radius:11px;background:var(--accent-soft);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;flex:none}
.stat .v{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1}
.stat .k{font-size:11.5px;color:var(--muted);margin-top:3px}
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:18px 0}

/* Channel toggle chips */
.chtog{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 10px;
  border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--faint);cursor:pointer}
.chtog.on{background:var(--accent-soft);border-color:#C6D4E6;color:var(--accent-ink)}
.chtog:hover{border-color:var(--accent)}
.chtog .d{width:6px;height:6px;border-radius:50%;background:var(--faint)}
.chtog.on .d{background:var(--ok)}
.chset{display:inline-flex;gap:6px}

/* Section heading */
.sec-title{display:flex;align-items:center;gap:10px;margin:26px 0 12px}
.sec-title h2{font-size:15px;font-weight:600}
.sec-title .grow{flex:1}

/* ---- In-page dialogs (replacing native alert/confirm/prompt) ---- */
/* A MODAL TALLER THAN THE WINDOW MUST STILL BE READABLE. `align-items:center` with no overflow
   is the classic trap: the box grows past the top of the viewport, and the part above the centre
   line cannot be scrolled to at all. Anchoring to the start and letting the backdrop scroll,
   with `margin:auto` on the panel, centres what fits and scrolls what does not. */
.vlp-modal-back{position:fixed;inset:0;background:rgba(20,30,50,.38);display:flex;align-items:flex-start;
  justify-content:center;overflow-y:auto;overscroll-behavior:contain;
  z-index:260;padding:20px;animation:vlpfade .12s ease}
/* 260, not 200: a confirm raised from inside a side sheet (.drawer, 251 -- the managed package page's customer row is one) must
   open ABOVE it. At 200 the sheet covered the dialog's own buttons, so the action could be started and never answered. Still
   below the command palette (300) and the receipts (400). */
@keyframes vlpfade{from{opacity:0}to{opacity:1}}
.vlp-modal{background:var(--card);border-radius:14px;padding:24px;max-width:440px;width:100%;
  margin:auto;box-shadow:var(--e3)}
.vlp-modal h3{font-size:16px;font-weight:600;margin:0 0 8px}
.vlp-modal-msg{font-size:13.5px;color:var(--ink);line-height:1.55;margin:0}
.vlp-modal-label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin:6px 0 6px}
.vlp-modal-input{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line);
  border-radius:9px;font-size:14px;background:var(--card);color:var(--ink)}
.vlp-modal-input:focus{outline:2px solid transparent;border-color:var(--focus-border);box-shadow:var(--focus)}
.vlp-modal textarea.vlp-modal-input{min-height:120px;resize:vertical;line-height:1.5}
.vlp-modal-row{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.vlp-danger{background:var(--bad);border-color:var(--bad)}
.vlp-danger:hover{background:#b91c1c;border-color:#b91c1c}

/* ---- Blazor admin panel additions ---- */
.boot{padding:40px;color:var(--muted);font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
#blazor-error-ui{position:fixed;bottom:0;left:0;right:0;display:none;background:var(--bad-soft);
  color:var(--bad);padding:10px 16px;font-size:13px;box-shadow:0 -1px 6px rgba(0,0,0,.06);z-index:2000}
#blazor-error-ui .reload,#blazor-error-ui .dismiss{color:var(--bad);text-decoration:underline;cursor:pointer;margin-left:10px}
td.num{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
td.mute{color:var(--muted)}
.topbar{display:flex;align-items:center;gap:12px;padding:16px 26px;border-bottom:1px solid var(--line);background:var(--card)}
.topbar h1{font-size:16px;font-weight:600}
.topbar .crumb{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
.topbar .grow{flex:1}
.content{padding:22px 26px;overflow:auto}
.flabel{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:5px}
.grid2 input{width:100%;box-sizing:border-box;padding:9px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;background:var(--card);color:var(--ink)}
/* Login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:30px;max-width:380px;width:100%;box-shadow:0 12px 40px rgba(20,30,50,.08)}
.login-card .brand{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.login-card input{width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid var(--line);border-radius:9px;font-size:14px;margin-bottom:14px;background:var(--card);color:var(--ink)}
.login-card label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px}
.login-note{font-size:11.5px;color:var(--faint);line-height:1.5;margin-top:16px;text-align:center}
.secret-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:18px;background:var(--accent-soft);color:var(--accent-ink);border-radius:9px;padding:14px;margin-top:14px;text-align:center;letter-spacing:1px;user-select:all}

/* ---- Roles matrix + API key scopes ---- */
.table-scroll{overflow-x:auto}
table.matrix th.rolehead{min-width:112px;text-align:center;vertical-align:bottom}
table.matrix th.rolehead .help{font-weight:400;text-transform:none;letter-spacing:0;margin-top:2px}
table.matrix td.cell{text-align:center;vertical-align:middle}
table.matrix tr.grouprow td{background:var(--hair);font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:6px 14px 6px 0}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px}
.scopes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 20px;margin-top:8px}
.scopegroup .sect{margin-bottom:6px}
.scope{display:flex;gap:8px;align-items:center;font-size:13px;padding:3px 0}

/* ==== Blazor port: Knowledge base ==== */
/* Knowledge base - retrieval-preview hits (ported from wwwroot/app/knowledge.html; td.mute already exists) */
.kbhit{border-left:3px solid var(--accent);background:var(--hair);border-radius:8px;padding:11px 14px;margin-bottom:8px}
.kbhit-t{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11.5px;font-weight:600;color:var(--accent);margin-bottom:4px}
.kbhit-s{font-weight:500;color:var(--faint);font-variant-numeric:tabular-nums}
.kbhit-x{font-size:12.5px;line-height:1.5;color:var(--ink);white-space:pre-wrap}

/* ==== Blazor port: Inbound calls ==== */
code.inline{font-size:11.5px;word-break:break-all}
.media-url{font-family:var(--mono);font-size:12.5px;background:var(--accent-soft);color:var(--accent-ink);border-radius:9px;padding:12px 14px;margin-top:14px;word-break:break-all;line-height:1.5;user-select:all}

/* ==== Inbound: who answers when (campaign scheduler, 28 Sep 2026) ==== */
/* design/campaign-scheduler/03-inbound-who-answers.html, option B: the rules on the left, read from the
   top, first match wins; on the right what they mean right now, next and this week. Every class is ir-
   (the page) or slot- (SlotEditor, shared with the campaign planner). Tokens only, so the dark theme
   resolves the whole set; flame is not spent. */
.ir-back{font-size:12.5px;margin:-4px 0 10px}
.ir-banner{margin-bottom:12px;line-height:1.5}
.ir-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start}
.ir-side{position:sticky;top:72px;display:flex;flex-direction:column;gap:12px;min-width:0}
.ir-side .card+.card{margin-top:0}
.ir-card{padding:14px 16px}
.ir-h4{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);margin:0 0 6px}
.ir-now{font-size:14px;font-weight:600;color:var(--ink)}
.ir-k{color:var(--muted);font-weight:600}
.ir-zone{font-size:12px;color:var(--muted);margin:-4px 0 12px}
.ir-list{display:flex;flex-direction:column;gap:6px}
.ir-rule{border:1px solid var(--line);border-radius:9px;background:var(--card);padding:8px 10px}
.ir-rule.open{border-color:var(--accent)}
.ir-rule.bad{border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.ir-rule-h{display:flex;align-items:flex-start;gap:9px}
.ir-n{width:20px;height:20px;border-radius:50%;background:var(--hair);color:var(--muted);font-size:11px;font-weight:600;
  display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px}
.ir-what{flex:1;min-width:0;display:block;background:none;border:0;padding:0;color:var(--ink);font-size:13px;font-weight:400;
  line-height:1.45;text-align:left;cursor:pointer;border-radius:0}
.ir-what:hover{background:none;color:var(--ink)}
.ir-what b{font-weight:600}
.ir-what .ir-sub{display:block;font-size:11.5px;color:var(--muted)}
/* Who answers, in the colour the week strip gives the same agent. */
.ir-t0{--tone:var(--accent-ink);--tone-soft:var(--accent-soft);--tone-ink:var(--accent-ink)}
.ir-t1{--tone:var(--warn);--tone-soft:var(--warn-soft);--tone-ink:var(--warn-ink)}
.ir-t2{--tone:var(--ink);--tone-soft:var(--hair);--tone-ink:var(--ink)}
.ir-tr{--tone:var(--ok);--tone-soft:var(--ok-soft);--tone-ink:var(--ok-ink)}
.ir-ta{--tone:var(--muted);--tone-soft:var(--hair);--tone-ink:var(--muted)}
.ir-who{flex:none;max-width:48%;margin-left:auto;margin-top:1px;font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;
  background:var(--tone-soft);color:var(--tone-ink,var(--tone));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ir-ctl{display:flex;flex-wrap:wrap;gap:2px 4px;justify-content:flex-end;align-items:center;margin-top:4px}
.ir-ctl .help{flex:1;min-width:200px;text-align:left;margin-left:29px}
.ir-ed{border-top:1px solid var(--hair);margin-top:8px;padding:10px 0 2px 29px;display:flex;flex-direction:column;gap:12px}
.ir-inline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.ir-chip{display:inline-flex;align-items:center;gap:2px;padding-right:4px}
.ir-chip button{padding:0 4px;font-size:13px;line-height:1}
.ir-err{font-size:11.5px;color:var(--bad);margin:6px 0 0 29px}
.ir-ed .ir-err{margin-left:0}
.ir-note{font-size:11.5px;color:var(--warn);margin:6px 0 0 29px}
.ir-add{margin-top:10px}
.ir-kinds{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ir-after{border-top:1px solid var(--line);margin-top:16px;padding-top:14px}
.ir-after h3{font-size:12.5px;font-weight:600;margin:0 0 2px}
.ir-radios{display:flex;flex-direction:column;gap:6px}
.ir-radio{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:9px;padding:9px 12px;
  cursor:pointer;font-size:13px;line-height:1.45}
.ir-radio.on{border-color:var(--accent);background:var(--accent-soft)}
.ir-radio input{width:auto;margin-top:3px;accent-color:var(--btn);flex:none}
.ir-radio .help{display:block}
.ir-strip{display:flex;gap:4px}
.ir-d{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px}
.ir-dn{color:var(--muted);font-weight:600}
.ir-dl{color:var(--faint);font-size:9.5px;white-space:nowrap}
.ir-bar{position:relative;width:100%;height:14px;border-radius:3px;background:var(--hair);overflow:hidden}
.ir-bar.hol{background:repeating-linear-gradient(45deg,var(--line) 0 3px,transparent 3px 7px),var(--hair)}
.ir-bar i{position:absolute;top:0;bottom:0;background:var(--tone)}
.ir-legend{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:8px;font-size:11px;color:var(--muted)}
.ir-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px;background:var(--tone)}
.ir-legend i.ir-ah{background:var(--hair);box-shadow:inset 0 0 0 1px var(--line)}
.ir-stale{margin-top:8px;color:var(--warn)}
.ir-save{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ir-save .help{flex-basis:100%}
@media (max-width:960px){
  .ir-grid{grid-template-columns:minmax(0,1fr)}
  .ir-side{position:static}
}
@media (max-width:520px){
  .ir-rule-h{flex-wrap:wrap;row-gap:4px}
  .ir-what{flex-basis:calc(100% - 29px)}
  .ir-who{margin-left:29px;max-width:calc(100% - 29px)}
  .ir-ed{padding-left:0}
  .ir-ctl .help,.ir-note,.ir-err{margin-left:0}
}

/* SlotEditor: a row per set of weekdays with one span of hours, and the day as a bar under it. With the
   legal clip on (outbound), the hours TRAI keeps closed are hatched on the bar and greyed in the pickers. */
.slot-ed{display:flex;flex-direction:column;gap:8px}
.slot-row{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--card-2,var(--card))}
.slot-row.bad{border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.slot-days{display:flex;gap:4px;flex-wrap:wrap}
.slot-day{width:28px;height:28px;padding:0;justify-content:center;border-radius:7px;font-size:11.5px;font-weight:600;
  background:var(--card);color:var(--muted);border:1px solid var(--line)}
.slot-day:hover{background:var(--hair);color:var(--ink);border-color:var(--line)}
.slot-day.on,.slot-day.on:hover{background:var(--btn);border-color:var(--btn);color:#fff}
.slot-ed .slot-times{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px}
.slot-ed .slot-times select{width:auto;padding:6px 8px}
.slot-to{font-size:12px;color:var(--muted)}
.slot-bar{position:relative;height:6px;border-radius:3px;background:var(--hair);margin-top:8px;overflow:hidden}
.slot-bar i{position:absolute;top:0;bottom:0}
.slot-bar i.on{background:var(--accent);border-radius:3px}
.slot-bar i.law{background:repeating-linear-gradient(45deg,var(--line) 0 3px,transparent 3px 6px)}
.slot-problem{font-size:11.5px;color:var(--bad);margin-top:6px}
.slot-add{align-self:flex-start}
.slot-note{margin-top:-2px}

/* ==== Blazor port: Outbound calls ==== */
.grid2 select{width:100%;box-sizing:border-box}
/* `.grid2 input` above sizes text fields; a checkbox or radio in a grid2 is a control, not a field */
.grid2 input[type=checkbox],.grid2 input[type=radio]{width:auto;padding:0;margin:0;border:0;flex:none}

/* ==== Blazor port: Call logs ==== */
/* ---- Call logs: transcript viewer ---- */
/* THE CALL DRAWER: a document with two jobs - what was said, and what came of it.
   One column each, side by side, each scrolling on its own inside a dialog of fixed height. The
   conversation is on the LEFT and first because it is what somebody opens a call to read; it
   used to sit at the bottom under five cards, inside a 50vh box that scrolled separately from
   the dialog around it, which is two scrollbars for one document. */
.vlp-modal.call-modal{max-width:1120px;width:100%;height:min(88vh,940px);
  display:flex;flex-direction:column;padding:0;overflow:hidden}
.call-head{flex:none;display:flex;align-items:flex-start;gap:10px;
  background:var(--card);padding:15px 20px 12px;
  border-radius:14px 14px 0 0;border-bottom:1px solid var(--line)}
.call-head .call-id{min-width:0}
.call-head h3{margin:0 0 3px;line-height:1.4}
.call-head .sub{margin:0;font-size:11.5px;max-width:none}
.call-head .grow{flex:1}
.call-head .call-x{font-size:15px;line-height:1;padding:4px 8px;color:var(--muted);flex:none}
.call-head .call-x:hover{color:var(--ink);background:var(--hair)}

.call-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)}
.call-left{min-height:0;overflow-y:auto;padding:14px 18px 20px;border-right:1px solid var(--line)}
.call-right{min-height:0;overflow-y:auto;padding:14px 18px 20px;background:var(--hair)}
.call-right>.card{background:var(--card)}
.call-right .clog-facts{background:var(--card)}
.call-right table.data{background:var(--card);border-radius:8px}

.call-rec{margin-bottom:14px}
.call-rec audio{width:100%;height:34px;display:block}

.ctr-head{display:flex;align-items:center;gap:8px;margin-bottom:11px;
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ctr-head .grow{flex:1}
.ctr-head .help{text-transform:none;letter-spacing:0;font-weight:400}
.ctr-head button.quiet{text-transform:none;letter-spacing:0;font-size:11.5px;font-weight:600}

/* Turns as sides of a conversation, not rows of a table: who spoke is the first thing the eye
   needs and a 56-pixel label column made every line start in the same place. */
.ctr{display:flex;flex-direction:column;gap:11px}
.ctr-turn{max-width:86%}
.ctr-turn.agent{align-self:flex-start}
.ctr-turn.caller{align-self:flex-end}
.ctr-turn.caller .ctr-who{text-align:right}
.ctr-who{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:3px;color:var(--accent)}
.ctr-turn.caller .ctr-who{color:var(--flame)}
.ctr-who .n{font-weight:500;color:var(--faint);margin-left:5px}
.ctr-text{font-size:13px;line-height:1.6;padding:9px 13px;border-radius:12px;
  background:var(--card);border:1px solid var(--line)}
.ctr-turn.agent .ctr-text{border-bottom-left-radius:4px}
.ctr-turn.caller .ctr-text{border-bottom-right-radius:4px;background:var(--accent-soft);
  border-color:color-mix(in srgb,var(--accent) 20%,transparent)}
.ctr-turn.system,.ctr-turn.note{align-self:center;max-width:100%}
.ctr-turn.system .ctr-text,.ctr-turn.note .ctr-text{background:none;border:0;color:var(--faint);font-style:italic;
  font-size:11.5px;padding:2px;text-align:center}

/* Narrow: one column, the conversation still first, the dialog scrolling once. */
@media (max-width:1000px){
  .vlp-modal.call-modal{height:min(92vh,940px)}
  .call-body{grid-template-columns:1fr;overflow-y:auto}
  .call-left,.call-right{overflow:visible;border-right:0}
  .call-right{border-top:1px solid var(--line)}
  .ctr-turn{max-width:100%}
}
.transcript{margin-top:14px;max-height:50vh;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.trow{display:flex;gap:10px;align-items:baseline;font-size:13px}
.trow .who{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;flex:none;width:56px}
.trow.agent .who{color:var(--accent)}
.trow.caller .who{color:var(--flame)}
.trow .txt{line-height:1.5}

/* ==== Blazor port: Agent analytics ==== */
/* ---- Agent analytics ---- */
.volchart{display:block;width:100%;height:224px;margin-top:14px;overflow:visible}
.volchart .grid{stroke:var(--hair);stroke-width:1;shape-rendering:crispEdges}
.volchart .base{stroke:var(--line);stroke-width:1;shape-rendering:crispEdges}
.volchart .axis{font-size:10px;fill:var(--faint);font-variant-numeric:tabular-nums}
.volchart .bar{fill:var(--accent)}
.volchart .bar.zero{fill:var(--line)}
.volchart .col:hover .bar{fill:var(--accent-ink)}
.volchart .val{font-size:10.5px;fill:var(--muted);font-variant-numeric:tabular-nums}
.volchart .lab{font-size:9.5px;fill:var(--faint)}
.donut{margin-top:14px}
.donut-bar{display:flex;height:14px;border-radius:99px;overflow:hidden;background:var(--hair)}
.donut-seg{height:100%}
.donut-legend{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.donut-item{display:flex;align-items:center;gap:8px;font-size:12.5px}
.donut-dot{width:9px;height:9px;border-radius:50%;flex:none}
.donut-item b{margin-left:auto;font-variant-numeric:tabular-nums}

/* ==== Blazor port: Settings ==== */
/* ---- Organization settings ---- */
.setlist{margin-top:4px}
.setrow{display:grid;grid-template-columns:1fr 260px;gap:16px;align-items:start;padding:16px 0;border-top:1px solid var(--hair)}
.setlist .setrow:first-child{border-top:0}
.toggle-col{display:flex;flex-direction:column;gap:10px}
.toggle-col .sw{justify-content:flex-start}
.sw.off{color:var(--muted);cursor:not-allowed}
.swatch-row{display:flex;align-items:center;gap:8px}
.swatch{flex:none;width:18px;height:18px;border-radius:5px;border:1px solid var(--line)}
@media (max-width:720px){.setrow{grid-template-columns:1fr}}

/* ==== Blazor port: Billing & usage ==== */
/* ---- Billing & usage (ported from the inline styles of wwwroot/app/billing.html) ---- */
.plan-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.plan-name{font-size:22px;font-weight:700;letter-spacing:-.01em;margin-top:2px}
.plan-price{font-size:16px;font-weight:600;color:var(--accent)}
.meters{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:20px 0 14px}
/* Each usage meter's box is .usage-meter, NOT .meter: .meter is the 6px progress track further
   down (Compliance, Home, Analytics, Monitor), and while this box shared the name the track's
   height:6px + overflow:hidden clipped every Billing meter to a sliver. */
.usage-meter{min-width:0}
.meter-top{display:flex;justify-content:space-between;font-size:12px;margin-bottom:5px}
.meter-k{color:var(--muted)} .meter-v{font-weight:600;font-variant-numeric:tabular-nums}
.meter-bar{height:7px;background:var(--hair);border-radius:99px;overflow:hidden}
.meter-fill{height:100%;background:var(--accent);border-radius:99px;transition:width .3s}
.meter-fill.warn{background:var(--warn)} .meter-fill.hot{background:var(--bad)}
.meter-note{font-size:10.5px;color:var(--faint)}
.feat-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.plan-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:10px}
.plan-card.current{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.plan-card-name{font-size:15px;font-weight:700}
.plan-card-price{font-size:18px;font-weight:700;color:var(--accent)}
.plan-limits{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.plan-limits li::before{content:"\2713  ";color:var(--ok);font-weight:700}
.plan-feats{display:flex;flex-wrap:wrap;gap:4px}
.feat-chip{font-size:10px;background:var(--hair);color:var(--muted);border-radius:5px;padding:1px 6px}
.plan-card button{margin-top:auto;justify-content:center}
.plan-current-badge{margin-top:auto;font-size:12px;font-weight:600;color:var(--accent);text-align:center;padding:8px;background:var(--accent-soft);border-radius:8px}
.plan-current-badge.pending{color:var(--warn-ink);background:var(--warn-soft)}
.banner .grow{flex:1}
.banner a{font-weight:600}

/* ==== Blazor port: Compliance ==== */
/* Compliance: rate meters against a regulatory ceiling, and the dry-run verdict */
.meter{height:6px;border-radius:999px;background:var(--hair);overflow:hidden;margin-top:8px}
.meter>span{display:block;height:100%;border-radius:999px;background:var(--ok);transition:width .3s}
.meter>span.warn{background:var(--warn)}
.meter>span.bad{background:var(--bad)}
.tile .help{margin-top:6px}
.verdict{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--line);border-radius:9px;padding:14px 16px;background:#FBFCFD;margin-top:14px}
.verdict .v{font-size:13px;font-weight:600;line-height:1.45}
.verdict .pill{flex:none;margin-top:1px}

/* ==== Blazor port: Campaigns ==== */
/* ---- Campaigns: per-contact progress bar (done / failed / skipped / in flight; remainder = waiting) ---- */
.prog{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--hair);min-width:180px}
.prog i{display:block;height:100%;flex:none}
.prog .done{background:var(--ok)}
.prog .fail{background:var(--bad)}
.prog .skip{background:var(--warn)}
.prog .live{background:var(--accent)}
.prog-k{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:5px;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.prog-k b{font-weight:600;color:var(--muted)}

/* ==== Blazor port: Webhooks ==== */
/* ---- Webhooks page ---- */
.wh-url{word-break:break-all;max-width:44ch}
tr.wh-drawer>td{background:var(--hair);padding:12px 14px}
.wh-drawer-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.wh-drawer-head .wh-grow{flex:1}
tr.wh-drawer table.data{background:var(--card);border-radius:8px}
tr.wh-drawer table.data th,tr.wh-drawer table.data td{padding-left:10px}
.wh-events .scope{align-items:flex-start}
.wh-events .scope input{margin-top:3px}

/* ==== Blazor port: Agent builder ==== */
/* The five rules the vanilla agent.html kept in its own page-local <style>. Everything else on
   the builder is already above: cards, tabs, pills, rec, grid2, chips, seg, tester. */

/* The agent's name and purpose written straight into the page. A form field around them would
   make the title of the thing look like one of its settings. */
.name-in{font:inherit;font-size:18px;font-weight:600;border:0;border-bottom:1px dashed transparent;
         background:none;min-width:160px;max-width:420px;padding:2px 0;color:var(--ink)}
.name-in:hover,.name-in:focus{border-bottom-color:var(--line);outline:none}
.purpose-in{font:inherit;font-size:12px;color:var(--faint);border:0;background:none;width:100%;
            max-width:76ch;padding:0 0 10px}
.purpose-in:focus{outline:none;color:var(--muted)}

/* The version dropdown, anchored to its button so it travels with the header when the name wraps. */
.bd-scrim{position:fixed;inset:0;z-index:29}
.bd-menu{position:absolute;top:100%;left:0;margin-top:6px;background:var(--card);
         border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 20px rgba(16,24,40,.12);
         z-index:30;min-width:340px;padding:8px;display:flex;flex-direction:column;gap:2px}

/* A test transcript as it streams. Capped and scrolling: a twelve-turn call otherwise pushes the
   verdicts — the part being waited for — off the bottom of the screen. */
.bd-log{border:1px solid var(--hair);border-radius:8px;padding:10px 12px;margin-top:8px;
        max-height:260px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;background:#FBFCFD}
.bd-line{font-size:12.5px;line-height:1.5}
.bd-line b{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);margin-right:6px}
.bd-verdict{display:flex;gap:8px;align-items:flex-start;padding:7px 0;border-top:1px solid var(--hair);font-size:12.5px}

/* ==== Blazor port: phone number health ==== */
/* A rated row with nothing to compare against - the only number in the workspace, or the bucket
   of calls that recorded no caller ID. Grey, not green: it has not passed a check, it has not
   had one, and a green bar there reads as a verdict the data cannot support. */
.meter>span.mute{background:var(--faint)}

/* ==== Blazor port: the conversation funnel ==== */
/* Horizontal, not the usual tapering trapezoid. A trapezoid encodes the drop in an area nobody
   can read off the screen; bars on a shared baseline let an operator compare two steps by
   looking at where they end. Every bar is a percentage of ATTEMPTED, so the first is always
   full width and the shortening IS the loss. */
.funnel{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.funnel-head{display:flex;align-items:baseline;gap:10px;font-size:12.5px;margin-bottom:5px}
.funnel-head .k{font-weight:600}
.funnel-head .v{margin-left:auto;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.funnel-head .p{color:var(--muted);font-variant-numeric:tabular-nums}
.funnel-track{height:22px;border-radius:6px;background:var(--hair);overflow:hidden}
.funnel-track>span{display:block;height:100%;border-radius:6px;background:var(--accent);transition:width .3s}
.funnel-track>span.mid{background:#2D6FA8}
.funnel-track>span.end{background:var(--ok)}
/* The step that is the point of the chart. A drop nobody looks at is a chart nobody needed. */
.funnel-step.key .funnel-head .v{color:var(--ok)}

/* ==== Phase 5: concurrency over time ==== */
/* Columns on a shared baseline, drawn with divs like every other chart in this panel — there is
   no charting package and there is not going to be one. Two bars per bucket, nested rather than
   side by side: the sampled figure is always inside the bucket's upper bound, and nesting shows
   that containment instead of inviting a reader to compare two independent series. */
.cc-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.cc-head h2{margin:0}
.cc-controls{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cc-plot{position:relative;display:flex;align-items:flex-end;gap:2px;height:180px;
         padding:10px 0 0;border-bottom:1px solid var(--line)}
.cc-col{position:relative;flex:1;min-width:3px;height:100%;display:flex;align-items:flex-end;justify-content:center}
/* The bucket's upper bound. Deliberately the paler of the two: it is the number that is allowed
   to be too high, so it must not be the one that shouts. */
.cc-outer{position:absolute;bottom:0;width:100%;background:var(--accent-soft);border-radius:3px 3px 0 0}
.cc-outer.hot{background:var(--bad-soft)}
/* The exact figure, drawn over it. */
.cc-inner{position:absolute;bottom:0;width:100%;background:var(--accent);border-radius:3px 3px 0 0}
.cc-cap{position:absolute;left:0;right:0;border-top:1px dashed var(--bad);pointer-events:none}
.cc-cap span{position:absolute;right:0;top:-16px;font-size:10.5px;font-weight:600;color:var(--bad);
             background:var(--card);padding:0 4px}
.cc-axis{display:flex;justify-content:space-between;font-size:10.5px;color:var(--faint);margin-top:6px}
.cc-axis-mid{color:var(--faint)}
.cc-legend{display:flex;flex-direction:column;gap:7px;margin-top:14px}
.cc-key{display:flex;align-items:baseline;gap:8px;font-size:11.5px;color:var(--faint);line-height:1.5}
.cc-key b{color:var(--ink);font-size:12px}
.cc-key i{width:12px;height:12px;border-radius:3px;flex:0 0 auto;position:relative;top:2px}
.cc-sw-inner{background:var(--accent)}
.cc-sw-outer{background:var(--accent-soft)}
.cc-caveats{margin-top:14px;font-size:11.5px;color:var(--faint)}
.cc-caveats summary{cursor:pointer;color:var(--muted);font-size:12px}
.cc-caveats ul{margin:8px 0 0;padding-left:18px;line-height:1.6}
.cc-caveats li{margin-bottom:5px}

/* ==== Phase 5: the do-not-call screen ==== */
/* A masked number is the content of the whole table, so it is set in the mono face at a size a
   reader can compare two of at a glance — the last four digits are the only part that
   distinguishes two rows, and they must not be the smallest thing on the page. */
.dnc-num{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em}
.dnc-revealed{background:var(--accent-soft);color:var(--accent-ink);border-radius:5px;padding:1px 6px}
.dnc-origins{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 14px}
.dnc-origin{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:8px 12px;
            font-size:11.5px;color:var(--muted);cursor:pointer;text-align:left;min-width:150px}
.dnc-origin:hover{background:var(--hair)}
.dnc-origin.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.dnc-origin b{display:block;font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums}
.dnc-origin.on b{color:var(--accent-ink)}
.dnc-search{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin-bottom:12px}
.dnc-search .grow{flex:1;min-width:240px}

/* ==== the Test agent panel ==== */
/* It reuses .tester, .tester-h, .tester-body, .tester-foot, .msg and .chip wholesale — it is the
   same drawer the assistant lives in and must not read as a different product. What is added here
   is the strip between the header and the transcript, which the assistant has no equivalent of:
   the panel has to say WHICH DOCUMENT it is about to run before it runs it, and that claim has to
   survive scrolling the conversation. Hence a fixed band rather than a first message. */
.tp-strip{display:flex;align-items:center;gap:8px;padding:9px 16px;border-bottom:1px solid var(--hair);
          background:var(--bg)}
.tp-note{padding:8px 16px;font-size:11.5px;color:var(--faint);line-height:1.5;
         border-bottom:1px solid var(--hair)}
.tp-note b{color:var(--ink)}
.tp-warn{background:var(--warn-soft);color:var(--warn-ink)}
.tp-warn b{color:var(--warn)}
.tp-warn div + div{margin-top:5px}
/* What went wrong for the caller, inline in the conversation (Voice/CallQuality.cs): a system line
   that must be SEEN, so the warn tokens on the dim .msg.sys shape. And the small tag under an agent
   bubble the platform spoke because no model answered. */
.msg.sys.tp-quality{background:var(--warn-soft);color:var(--warn-ink);padding:4px 10px;border-radius:8px;
                    font-size:11.5px;max-width:92%;text-align:center}
.tp-mark{display:block;margin-top:3px;font-size:10.5px;color:var(--faint);font-style:italic}

/* The leg switch sits in the foot, where .tabs' 18px bottom margin would leave a hole. */
.tp-tabs{margin-bottom:0}

/* Microphone level. Painted by wwwroot/js/voicebench.js rather than by Blazor: it moves four
   times a second and re-rendering the builder at that rate to set one width is not a trade worth
   making. */
.tp-level{height:5px;background:var(--hair);border-radius:3px;overflow:hidden}
.tp-level > div{height:100%;width:0;background:var(--ok);transition:width .08s linear}

/* Development quick-fill on the sign-in page. Only ever rendered when VOICELAB_DEV_LOGINS is set;
   styled as a visibly separate strip so nobody mistakes it for part of the product. */
.dev-fill { border: 1px dashed var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 16px; }
.dev-fill-note { display: block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.dev-fill-row { display: flex; flex-wrap: wrap; gap: 6px; }
.dev-fill-chip { font-size: 12px; padding: 5px 10px; }

/* =====================================================================================
   Studio, sharpened. The console keeps its faces and its two colours and changes how
   they are spent: full-bleed layout, a right rail, denser tables, sparklines on tiles,
   counts in the sidebar, one rule for flame (it marks the live or primary thing and nothing
   else), a palette on Ctrl+K, and a dark theme cut from the same tokens.
   ===================================================================================== */

/* ---- tokens: the light set is the one above. --btn is the one colour that must stay dark
   enough to carry white text in BOTH themes, which --accent (also a link colour) cannot. ---- */
:root{--card-2:#FBFCFD; --btn:#1B4272; --btn-ink:#132F53; --flame-ink:#B4500A; color-scheme:light}
@media (prefers-color-scheme: dark){
  :root[data-theme="dark"]{
    --ink:#E8ECF3; --muted:#A6AFBF; --faint:#8A93A4; --line:#2A313D; --hair:#212730;
    --bg:#12161C; --card:#181D25; --card-2:#1D232C; --accent:#8AB4E8; --accent-ink:#B4CDF0; --accent-soft:#1F2C3F;
    --flame:#F79A4D; --flame-soft:#3A2712; --flame-ink:#F9B27A;
    --ok:#4CCB86; --ok-soft:#173225; --warn:#F0B35B; --warn-soft:#3A2A12; --bad:#FF7B7B; --bad-soft:#3D1D1D;
    --btn:#2F6DB5; --btn-ink:#3D7ECB;
    --ink-2:#C9D1DD; --control:#6E7890; --select:#1C2633;
    --ok-ink:#86EFAC; --warn-ink:#FDBA74; --bad-ink:#FCA5A5;
    --ok-edge:#24503A; --warn-edge:#5C4318; --bad-edge:#5E2A2A; --info-edge:#2B3F5C;
    --e1:0 1px 2px rgba(0,0,0,.30); --e2:0 4px 12px -2px rgba(0,0,0,.45),0 2px 4px -2px rgba(0,0,0,.35);
    --e3:0 24px 48px -12px rgba(0,0,0,.60),0 0 0 1px rgba(255,255,255,.06);
    --focus:0 0 0 3px rgba(138,180,232,.45); --focus-border:#8AB4E8;
    color-scheme:dark}
}
/* Round 2 in dark: the new tokens map onto this set; the ember is the --flame here (#F79A4D). --navy-ink
   is never redefined, so the rail, the Live tile and the Outcome Pane stay #0C213F, distinct from --bg.
   --faint is #8A93A4 so it passes 4.5:1 on every dark surface too: 4.86 on --hair, 4.56 on --accent-soft
   (#7C8697 read 4.09 on --hair). */
:root[data-theme="dark"]{
  --ink:#E8ECF3; --muted:#A6AFBF; --faint:#8A93A4; --line:#2A313D; --hair:#212730;
  --bg:#12161C; --card:#181D25; --card-2:#1D232C; --accent:#8AB4E8; --accent-ink:#B4CDF0; --accent-soft:#1F2C3F;
  --flame:#F79A4D; --flame-soft:#3A2712; --flame-ink:#F9B27A;
  --ok:#4CCB86; --ok-soft:#173225; --warn:#F0B35B; --warn-soft:#3A2A12; --bad:#FF7B7B; --bad-soft:#3D1D1D;
  --btn:#2F6DB5; --btn-ink:#3D7ECB;
  --ink-2:#C9D1DD; --control:#6E7890; --select:#1C2633;
  --ok-ink:#86EFAC; --warn-ink:#FDBA74; --bad-ink:#FCA5A5;
  --ok-edge:#24503A; --warn-edge:#5C4318; --bad-edge:#5E2A2A; --info-edge:#2B3F5C;
  --e1:0 1px 2px rgba(0,0,0,.30); --e2:0 4px 12px -2px rgba(0,0,0,.45),0 2px 4px -2px rgba(0,0,0,.35);
  --e3:0 24px 48px -12px rgba(0,0,0,.60),0 0 0 1px rgba(255,255,255,.06);
  --focus:0 0 0 3px rgba(138,180,232,.45); --focus-border:#8AB4E8;
  color-scheme:dark}

/* Everything that painted a literal, re-pointed at a token so the dark set resolves as a set. */
button,.btn{background:var(--btn);border-color:var(--btn)}
button:hover,.btn:hover{background:var(--btn-ink);border-color:var(--btn-ink)}
button.ghost{background:var(--card);color:var(--ink);border-color:var(--line)}
button.ghost:hover{background:var(--hair);color:var(--ink);border-color:var(--line)}
button.quiet{background:none;border:0;color:var(--accent)}
button.quiet:hover{background:var(--accent-soft);color:var(--accent-ink)}
button.danger-q{background:none;border:0;color:var(--bad)}
button.danger-q:hover{background:var(--bad-soft);color:var(--bad-ink)}
.seg button.on,.chip.on,.usr-btn,.msg.caller{background:var(--btn);color:#fff}
.ws-mark{background:var(--navy-ink);box-shadow:none}
.side{background:var(--card)}
.rec,.verdict,.bd-log{background:var(--card-2)}
.role-super{background:var(--warn-soft);color:var(--warn-ink)}
.role-owner{background:var(--ok-soft);color:var(--ok-ink)}
.login-err{background:var(--bad-soft);color:var(--bad-ink);border-color:var(--bad-soft)}
.banner.warn{border-color:color-mix(in srgb,var(--warn) 28%,transparent)}
.banner.bad{border-color:color-mix(in srgb,var(--bad) 28%,transparent)}
.banner.accent{border-color:color-mix(in srgb,var(--accent) 28%,transparent)}
.chtog.on{border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.card,.stat,.tile{box-shadow:none}
input[type=text],input[type=number],input[type=search],input[type=password],input[type=email],select,textarea{background:var(--card);color:var(--ink);border-color:var(--line)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid transparent;border-color:var(--focus-border);box-shadow:var(--focus)}
.login-card{box-shadow:0 20px 50px rgba(0,0,0,.14)}
.vlp-modal{box-shadow:var(--e3)}
.wsw-menu,.usr-menu,.bd-menu{box-shadow:var(--e2)}
.tester{box-shadow:-8px 0 24px rgba(0,0,0,.18)}
.toast{background:var(--ink);color:var(--bg)}
.tp-strip{background:var(--bg)}

/* ---- frame: the width cap goes; the page is content plus an optional rail ---- */
.frame{grid-template-columns:224px 1fr}
.content{max-width:none;padding:20px 26px 64px}
.page{display:grid;grid-template-columns:minmax(0,1fr);align-items:start}
.page.with-rail{grid-template-columns:minmax(0,1fr) 272px}
.rail{position:sticky;top:57px;align-self:start;border-left:1px solid var(--line);background:var(--card);
      min-height:calc(100vh - 57px);padding:18px 18px 40px;display:flex;flex-direction:column;gap:6px}
.rail-h{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:2px}
.rail-empty{font-size:12.5px;color:var(--muted)}
.chk{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.4;color:var(--ink);
     padding:6px 8px;margin:0 -8px;border-radius:7px}
.chk:hover{background:var(--hair);color:var(--ink)}
.chk i{width:10px;height:10px;border-radius:50%;flex:none;margin-top:4px;background:var(--ok)}
.chk i.no{background:transparent;border:2px solid var(--flame)}
.chk i.info{background:var(--faint)}
.chk span{display:block;font-size:11.5px;color:var(--muted)}
@media(max-width:1180px){.page.with-rail{grid-template-columns:1fr}.rail{position:static;min-height:0;border-left:0;border-top:1px solid var(--line)}}

/* ---- sidebar counts ---- */
.nav-i .n{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--faint);white-space:nowrap}
.nav-i.on .n{color:var(--accent-ink)}
.nav-i .n.hot{color:var(--flame-ink);font-weight:500}
.nav-i .n.warn{color:var(--warn);font-weight:500}

/* ---- topbar: the palette button and the theme switch ---- */
.topbar{padding:12px 26px;position:sticky;top:0;z-index:10}
.topbar h1{font-size:16px;font-weight:600;letter-spacing:-.01em}
.kbtn{display:inline-flex;align-items:center;gap:8px;background:var(--hair);border:1px solid var(--line);color:var(--muted);
      border-radius:8px;padding:6px 8px 6px 10px;font-size:12px;font-weight:500;min-width:190px}
.kbtn:hover{background:var(--card);color:var(--ink);border-color:var(--line)}
.kbtn span{flex:1;text-align:left}
.kbtn kbd,.pal-in kbd{font-family:var(--mono);font-size:10px;border:1px solid var(--line);border-radius:4px;padding:1px 5px;
      color:var(--faint);background:var(--card)}
.theme-btn{width:32px;height:32px;padding:0;border-radius:8px;background:var(--card);border:1px solid var(--line);
      color:var(--muted);font-size:14px;justify-content:center}
.theme-btn:hover{background:var(--hair);color:var(--ink);border-color:var(--line)}
.topbar a.btn{color:#fff}

/* The row may wrap. On a wide window it never needs to, so nothing above moves; on a narrow one
   the actions drop to a second line instead of leaving the window. The palette button gives up
   its 190px floor at the same width -- a search box that will not shrink is what pushed the
   buttons off in the first place. */
.topbar{flex-wrap:wrap;row-gap:10px}
@media (max-width:900px){
  .topbar .kbtn{min-width:0}
  .topbar .grow{flex-basis:100%;height:0}
}

/* ---- the palette ---- */
.pal-back{position:fixed;inset:0;background:rgba(10,16,28,.42);z-index:300;display:flex;align-items:flex-start;
          justify-content:center;padding:12vh 20px 20px;animation:vlpfade .1s ease}
.pal{width:100%;max-width:560px;background:var(--card);border:1px solid var(--line);border-radius:12px;
     box-shadow:var(--e3);overflow:hidden}
.pal-in{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);color:var(--faint)}
.pal-in input{flex:1;border:0;background:none;font:inherit;font-size:14px;color:var(--ink);padding:2px 0}
.pal-in input:focus{outline:none;border:0;box-shadow:none}
.pal-list{max-height:52vh;overflow-y:auto;padding:6px}
.pal-item{display:grid;grid-template-columns:96px 1fr;column-gap:12px;align-items:baseline;width:100%;text-align:left;
          background:none;border:0;border-radius:7px;padding:8px 10px;color:var(--ink);font-weight:500;font-size:13px}
.pal-item:hover,.pal-item.on{background:var(--accent-soft);color:var(--accent-ink)}
.pal-g{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.pal-s{grid-column:2;font-size:11.5px;font-weight:400;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-empty{padding:16px 12px;font-size:13px;color:var(--muted)}

/* ---- status: three shapes for three facts. Outcome is a pill; direction is a mono glyph;
   the live thing wears flame. ---- */
.dirx{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap}
.pill.live{background:var(--flame-soft);color:var(--flame-ink)}
.pill.live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--flame);display:inline-block}
.num-m{font-family:var(--mono);font-size:12px;color:var(--ink)}

/* ---- tables: denser, and numbers that line up ---- */
table.data{font-size:12.5px}
.data th{padding:0 12px 7px 0}
.data td{padding:8px 12px 8px 0}
.data td.mute{color:var(--muted)}

/* ---- tiles with a trend ---- */
.stats-row{grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin:0 0 18px}
.stat{display:block;padding:14px 16px 12px;border-radius:10px}
.stat .k{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0}
.stat .v{font-size:24px;line-height:1.1;margin-top:6px;display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.stat .v small{font-size:11.5px;font-weight:600;letter-spacing:0;color:var(--muted)}
.stat .v small.up{color:var(--ok)} .stat .v small.dn{color:var(--bad)}
.stat .spark{display:block;width:100%;height:24px;margin-top:8px;overflow:visible}
.stat .spark path{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.stat .spark .area{fill:var(--accent-soft);stroke:none}
.stat .spark circle{fill:var(--accent)}
.stat .meter{margin-top:10px}
.stat .sub{font-size:11.5px;color:var(--faint);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat.live{border-color:var(--flame);box-shadow:inset 3px 0 0 var(--flame)}
.stat.live .v{color:var(--flame-ink)}
.stat.live .v small{color:var(--flame-ink)}

.sec-title{margin:22px 0 10px}
.sec-title h2{font-size:14px}

@media(prefers-reduced-motion:reduce){.pal-back,.vlp-modal-back{animation:none}.tester{transition:none}}

/* The "+ New workspace" control is a link that happens to be a button: no fill, no border. */
.btn-link,.btn-link:hover{background:none;border:0;color:var(--accent);font-weight:600;padding:0}
.btn-link:hover{color:var(--accent-ink);text-decoration:underline}

/* The turn waterfall in the test panel. Ported from the vanilla bench: a 14px stacked bar whose
   segments are the four stages of one turn, so the eye lands on the widest one. */
.tp-wf { display: flex; gap: 2px; height: 14px; border-radius: 7px; overflow: hidden;
         background: var(--hair); margin-top: 6px; }
.tp-wf > div { height: 100%; min-width: 2px; }

/* =====================================================================================
   Managed voice: the flow screens (catalogue, packages, a package, a customer).
   A flash is the receipt for an action; a step rail says where in the sequence a
   person is; a drawer is the expanded row where the two-press actions live; a kv list
   is "what will be sent", shown before anything is.
   ===================================================================================== */

/* ---- aliases. Three pages were written against table and pill classes the stylesheet never
   defined (grid, pick, pill.good, banner.good), so their tables rendered with browser defaults
   and their "good" states carried no colour. Defined once here so those pages and the campaign
   wizard read the same as every other listing. ---- */
table.grid{width:100%;border-collapse:collapse;font-size:12.5px}
.grid th{text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
         color:var(--faint);padding:0 12px 7px 0;border-bottom:1px solid var(--line)}
.grid td{padding:8px 12px 8px 0;border-bottom:1px solid var(--hair);vertical-align:middle}
.grid tr:last-child td{border-bottom:0}
.grid tr.pick,.data tr.pick{cursor:pointer}
.grid tr.pick:hover td,.data tr.pick:hover td{background:var(--hair)}
.data th.num,.grid th.num{text-align:right}
.data tr.open td,.grid tr.open td{background:var(--hair)}
.data tr.drawer-row td,.grid tr.drawer-row td{padding:0 0 10px;background:transparent}
.data tr.drawer-row:hover td{background:transparent}
.pill.good{background:var(--ok-soft);color:var(--ok-ink)}
.pill.dim{background:var(--hair);color:var(--faint)}
.pill.draft{background:var(--warn-soft);color:var(--warn-ink)}
.banner.good{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 28%,transparent);color:var(--ok-ink)}
.banner>div{flex:1}

/* ---- the flash: one action's receipt ---- */
.flash{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--line);border-radius:10px;
       padding:11px 14px;font-size:12.5px;background:var(--card);color:var(--ink);margin-bottom:14px;
       animation:vlpfade .12s ease}
.flash .flash-i{flex:none;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;
                justify-content:center;font-size:11px;font-weight:700;margin-top:1px;background:var(--hair);color:var(--muted)}
.flash .flash-b{flex:1;line-height:1.5;min-width:0}
.flash .flash-b b{font-weight:600}
.flash .flash-b a{font-weight:600;white-space:nowrap}
.flash .flash-x{background:none;border:0;color:var(--faint);padding:0 4px;font-size:16px;line-height:1;flex:none}
.flash .flash-x:hover{color:var(--ink);background:none;border:0}
.flash.good{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.flash.good .flash-i{background:var(--ok);color:#fff}
.flash.accent{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 28%,transparent)}
.flash.accent .flash-i{background:var(--btn);color:#fff}
.flash.warn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.flash.warn .flash-i{background:var(--warn);color:#fff}
.flash.bad{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 30%,transparent)}
.flash.bad .flash-i{background:var(--bad);color:#fff}

/* ---- the step rail ---- */
.steps{list-style:none;padding:0;margin:0 0 16px;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px}
.step{border:1px solid var(--line);border-radius:9px;background:var(--card);min-width:0}
.step-in{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;color:var(--ink);min-width:0}
a.step-in:hover,button.step-in:hover{background:var(--hair);color:var(--ink);border-radius:9px}
/* A rail step that JUMPS rather than links — a seven- or eight-step wizard lives on one page, so its rail
   cannot be anchors. Reset only what a <button> brings with it; every colour stays the div's. */
button.step-in{width:100%;text-align:left;background:none;border:0;font:inherit;cursor:pointer}
.step-n{flex:none;width:22px;height:22px;border-radius:50%;background:var(--hair);color:var(--muted);
        font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}
.step.done .step-n{background:var(--ok);color:#fff}
.step.current{border-color:var(--flame);box-shadow:inset 3px 0 0 var(--flame)}
.step.current .step-n{background:var(--flame);color:#fff}
.step.blocked .step-n{background:var(--warn-soft);color:var(--warn-ink)}
.step.blocked{border-style:dashed}
.step-t{display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.35}
.step-t b{font-size:12.5px;font-weight:600}
.step-t span{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.steps.vertical{grid-auto-flow:row;grid-auto-columns:auto;gap:0;margin:0 0 12px}
.steps.vertical .step{border:0;border-radius:0;background:none}
.steps.vertical .step.current{box-shadow:none;border-left:3px solid var(--flame)}
.steps.vertical .step-in{padding:7px 10px}
.steps.vertical .step+.step{border-top:1px solid var(--hair)}
@media(max-width:1100px){.steps{grid-auto-flow:row}}

/* ---- the drawer: an expanded row where the two-press actions live ---- */
.drawer{background:var(--card-2);border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin:4px 0 6px}
.drawer h3{font-size:13px;font-weight:600;margin:0 0 3px}
.drawer .sub{font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:10px}
.drawer .f+.f{margin-top:10px}
.drawer-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px}
.drawer-cols>div{min-width:0}

/* ---- "what will be sent": a fact list shown before a telephone rings ---- */
.kv{display:grid;grid-template-columns:max-content 1fr;gap:4px 16px;font-size:12.5px;margin:10px 0 0;
    padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.kv dt{color:var(--muted);font-weight:500}
.kv dd{margin:0;font-variant-numeric:tabular-nums;min-width:0;word-break:break-word}
.kv dd code{font-size:11px}

/* ---- the page head of a package ---- */
.lead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.lead h2{margin:0;font-size:16px}
.lead .sub{margin:4px 0 0;max-width:none}
.lead .pills{display:flex;gap:6px;align-items:center;flex-wrap:wrap;flex:none}

/* ---- action rows and their reasons ---- */
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
.actions .why{font-size:12px;color:var(--muted)}
.unsaved{font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--flame-soft);color:var(--flame-ink)}

/* ---- the three variable sources, as pills ---- */
.src{display:inline-flex;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap}
.src.fixed{background:var(--accent-soft);color:var(--accent-ink)}
.src.contact{background:var(--ok-soft);color:var(--ok-ink)}
.src.returned{background:var(--hair);color:var(--muted)}

/* ---- a radio row in a chooser table ---- */
.data tr.choice td:first-child,.grid tr.choice td:first-child{width:28px;padding-right:4px}
.data tr.choice.off{opacity:.55}
.data tr.choice input[type=radio]{accent-color:var(--btn)}

/* ---- inline definition: a label over a value, for read-only facts inside a form grid ---- */
.fact{display:flex;flex-direction:column;gap:3px;min-width:0}
.fact>label{font-size:12px;font-weight:600;color:var(--ink)}
.fact .v{font-size:13px;padding:8px 0;font-variant-numeric:tabular-nums}
.fact .v.big{font-size:15px;font-weight:600}

/* ==== Live calls: the floor and the monitor panel ==== */
.mon-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:16px}
@media (max-width:960px){.mon-grid{grid-template-columns:1fr}}
.mon-head{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-bottom:10px}
.mon-head .grow{flex:1}
.mon-lvl{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:4px 0 10px}
.mon-lvl .k{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.mon-lvl .meter{margin-top:0}
.mon-lvl .meter>span{width:0;background:var(--flame);transition:width .08s linear}
.mon-lvl .agent .meter>span{background:var(--accent)}
.mon-lvl .human .meter>span{background:var(--ok)}
.mon-tx{max-height:58vh;margin-top:0}
.trow.system .who{color:var(--faint)} .trow.system .txt{color:var(--faint);font-style:italic}
.trow .cut{color:var(--warn);font-size:11px;margin-left:6px}
.mon-ctl .card{padding:14px 16px}
.mon-ctl .card+.card{margin-top:12px}
.mon-ctl textarea,.mon-ctl input{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;background:var(--card);color:var(--ink);margin-top:8px;font-family:inherit}
.mon-ctl .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
/* No solid .pill.live here: the monitor marks its state with accent / human, and a second, global
   .pill.live written this late overrode the status vocabulary's flame-soft one on every page -- white
   text on solid flame, with the ::before dot the same flame and so invisible. */
.pill.human{background:var(--ok);color:#fff}
.state-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--muted);margin-right:6px;vertical-align:middle}
.state-dot.speaking{background:var(--accent)} .state-dot.listening{background:var(--flame)} .state-dot.thinking{background:var(--warn)}
.state-dot.human{background:var(--ok)} .state-dot.ended,.state-dot.closing{background:var(--faint)}
.data tr.rowlink.on td{background:var(--accent-soft)}

/* ==== Agent insights ==== */
.ins-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.ins{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);font-size:13px;line-height:1.5}
.ins.good{border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.ins.warn{border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.ins.bad{border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.ins .dot{width:8px;height:8px;border-radius:50%;flex:none;margin-top:7px;background:var(--muted)}
.ins.good .dot{background:var(--ok)} .ins.warn .dot{background:var(--warn)} .ins.bad .dot{background:var(--bad)}
.bars{display:flex;flex-direction:column;gap:6px}
.bars .b{display:grid;grid-template-columns:150px 1fr 90px;gap:10px;align-items:center;font-size:12px}
.bars .b .meter{margin-top:0}
.bars .b .num{text-align:right;font-variant-numeric:tabular-nums}
.hours{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;margin-top:10px}
.hours .h{height:34px;border-radius:4px;background:var(--hair);position:relative}
.hours .h span{position:absolute;bottom:-16px;left:0;right:0;text-align:center;font-size:9px;color:var(--faint)}
.delta.up{color:var(--ok);font-weight:600} .delta.down{color:var(--bad);font-weight:600}
td.num.bad{color:var(--bad);font-weight:600} td.num.warn{color:var(--warn);font-weight:600}

/* ==== Call log: one block per call, not sixteen columns ====
   The table this replaces had grown a column per feature until the newest two — the cost and
   the AI summary — sat past the right edge of every screen it was opened on. A call is a
   record with a headline and a story, which is a list, not a spreadsheet: seven things on the
   row, one line of what the call was about underneath, everything else in the drawer. */
.clog-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:2px 0 14px}
.clog-bar .grow{flex:1}
.clog-search{flex:1 1 240px;min-width:200px;max-width:400px;box-sizing:border-box;padding:8px 12px;
  border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font-size:13px}
.clog-search::placeholder{color:var(--faint)}
.clog-search:focus{outline:none;border-color:var(--accent)}

.clog{border:1px solid var(--line);border-radius:10px;background:var(--card);overflow:hidden}
.clog-head,.clog-row{display:grid;
  grid-template-columns:var(--clog-cols,76px minmax(132px,1.05fr) minmax(118px,.95fr) 118px 104px 68px 84px);
  gap:4px 12px;padding:9px 14px;align-items:start}
.clog-head{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);background:var(--hair);border-bottom:1px solid var(--line)}
.clog-row{border-top:1px solid var(--line);cursor:pointer;font-size:12.5px;line-height:1.45}
.clog-head+.clog-row{border-top:0}
.clog-row:hover{background:var(--hair)}
.clog-head .r,.clog-row .r{text-align:right;font-variant-numeric:tabular-nums}
.clog-row .l2{display:block;font-size:10.5px;color:var(--faint);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clog-row .c-num{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px}
.clog-row .dirx{color:var(--muted);font-size:10.5px;margin-right:5px;white-space:nowrap}
.clog-row .pill{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* The summary spans the row. A sentence inside a 200-pixel column is a sentence nobody reads. */
.c-sum{grid-column:1/-1;margin-top:5px;padding-top:6px;border-top:1px dashed var(--line);
  font-size:12px;color:var(--muted);line-height:1.5}
.c-sum .next{color:var(--accent-ink);margin-left:6px}
.c-sum .waiting{color:var(--faint);font-size:11px}

/* Narrow: one header row cannot label two columns, so each cell carries its own label. Without
   them a bare "unpriced" under a bare "Neutral" is two facts with no questions attached. */
@media (max-width:1040px){
  .clog-head{display:none}
  .clog-row{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px 14px;gap:10px 14px}
  .clog-head .r,.clog-row .r{text-align:left}
  .clog-row>div[data-k]::before{content:attr(data-k);display:block;margin-bottom:2px;
    font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
}

/* The facts the row no longer spends a column on, in the drawer where there is room. */
.clog-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px 18px;
  margin:12px 0;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--hair)}
.clog-facts .k{display:block;font-size:9.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.clog-facts .v{display:block;font-size:12.5px;margin-top:3px}
.clog-facts .v .help{display:block;margin-top:1px}

/* ==== Phone numbers: an inventory, and two ways to get one ====
   The page used to be four equal cards in one scroll: the inventory, a usually-empty Groups
   table, and — below both — the two acquisition forms, which look alike and do opposite things.
   One of them charges a carrier account every month; the other only writes a row. Weighting them
   the same, at the bottom, past a table of nothing, is where an expensive mistake gets made.
   Acquisition is now two buttons in the topbar that open panels, and the page is the inventory. */
.num-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0 12px}
.num-bar .grow{flex:1}
.num-search{flex:1 1 240px;min-width:200px;max-width:380px;box-sizing:border-box;padding:8px 12px;
  border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font-size:13px}
.num-search::placeholder{color:var(--faint)}
.num-search:focus{outline:none;border-color:var(--accent)}
.num-bar .seg button.empty{color:var(--faint)}
.num-group{padding:7px 10px;border:1px solid var(--line);border-radius:8px;
  background:var(--card);color:var(--ink);font-size:12.5px}

.numlist{border:1px solid var(--line);border-radius:10px;background:var(--card);overflow:hidden}
.numlist-head,.numlist-row{display:grid;
  grid-template-columns:minmax(180px,1.1fr) minmax(120px,1fr) minmax(120px,.9fr) 130px minmax(200px,auto);
  gap:6px 14px;padding:11px 14px;align-items:start}
.numlist-head{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);background:var(--hair);border-bottom:1px solid var(--line)}
.numlist-row{border-top:1px solid var(--line);font-size:12.5px;line-height:1.45}
.numlist-head+.numlist-row{border-top:0}
.numlist-row:hover{background:var(--hair)}

/* The number is the row's name, so it is set like one: bigger, monospaced, and grouped. */
.num-e164{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;font-weight:600;
  letter-spacing:.01em;color:var(--ink)}
.num-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px;font-size:11px}
.num-tags .s{color:var(--muted)}
.num-tags .chip{padding:1px 7px;border-radius:99px;background:var(--accent-soft);
  color:var(--accent-ink);font-size:10.5px;font-weight:600}
.num-tags .dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
.num-tags .dot.ok{background:var(--ok)} .num-tags .dot.warn{background:var(--warn)}
.num-tags .dot.bad{background:var(--bad)} .num-tags .dot.mute{background:var(--faint)}
.numlist-row .l2{display:block;font-size:10.5px;color:var(--faint);margin-top:2px}
.numlist-row .l2.warnish{color:var(--warn)}
.num-idle{color:var(--faint)}
.num-acts{display:flex;gap:2px;flex-wrap:wrap;justify-content:flex-end}
.num-acts button{font-size:11.5px;padding:3px 7px}

.num-empty{text-align:left;max-width:60ch}

/* Groups is a tool, not a destination: folded away with its count on the summary line. */
.fold{padding:0;overflow:hidden}
.foldhead{display:flex;align-items:center;gap:10px;width:100%;padding:14px 20px;background:none;
  border:0;text-align:left;font-size:13px;color:var(--ink);cursor:pointer}
.foldhead:hover{background:var(--hair)}
.foldhead .tw{color:var(--muted);width:10px}
.foldhead .grow{flex:1}
.foldbody{padding:0 20px 18px;border-top:1px solid var(--line)}
.foldbody .sub{margin-top:12px}

@media (max-width:1080px){
  .numlist-head{display:none}
  .numlist-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;padding:13px 14px}
  .numlist-row>div[data-k]::before{content:attr(data-k);display:block;margin-bottom:2px;
    font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .num-acts{grid-column:1/-1;justify-content:flex-start}
}

/* ---- the rent panel: search, choose, review ---- */
.vlp-modal.rent-modal{max-width:720px;padding:0;display:flex;flex-direction:column;max-height:88vh}
.rent-head{display:flex;align-items:flex-start;gap:10px;padding:18px 22px 12px}
.rent-head h3{margin:0 0 3px}
.rent-head .sub{margin:0;font-size:12px}
.rent-head .grow{flex:1}
.rent-steps{display:flex;gap:0;padding:0 22px;border-bottom:1px solid var(--line)}
.rent-steps span{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--faint);padding:0 14px 10px;border-bottom:2px solid transparent;margin-bottom:-1px}
.rent-steps span:first-child{padding-left:0}
.rent-steps span.on{color:var(--accent-ink);border-bottom-color:var(--accent)}
.rent-body{padding:18px 22px;overflow-y:auto;flex:1;min-height:0}
.rent-foot{display:flex;align-items:center;gap:8px;padding:14px 22px;border-top:1px solid var(--line);
  background:var(--hair)}
.rent-foot .grow{flex:1}

.stock{display:flex;flex-direction:column;gap:8px}
.stock-row{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center;
  padding:11px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.stock-row:hover{border-color:var(--accent)}
.stock-row.held{opacity:.6}
.stock-row .l2{display:block;font-size:10.5px;color:var(--faint);margin-top:3px}
/* The price is the headline, and the monthly one is the headline of the price. */
.stock-price{text-align:right}
.stock-price .m{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.stock-price .m span{font-size:11px;font-weight:500;color:var(--muted);margin-left:2px}

.review{max-width:52ch}
.review-num{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:22px;font-weight:700;
  letter-spacing:.01em}
.review-cost{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0;
  padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--hair)}
.review-cost .k{display:block;font-size:9.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.review-cost .v{display:block;font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;
  margin-top:3px}
.review-cost .l2{display:block;font-size:10.5px;color:var(--faint);margin-top:1px}
.review-facts{margin:0;padding-left:18px;font-size:12.5px;line-height:1.65;color:var(--muted)}
.review-facts b{color:var(--ink)}
.rent-from{padding:8px 0;font-size:13px;font-weight:600;color:var(--ink)}

/* Every stat tile names the window it measures. Five figures over five different spans - now,
   today, a fortnight, all time, the last day - were previously distinguishable only on two of
   them, so a reader compared numbers that were never comparable. Same type scale and the same
   muted token as the rest of the tile; this adds a word, not a colour. */
.stat .k .w{font-weight:500;color:var(--faint);margin-left:5px}
.stat .k .w::before{content:"· "}

/* ==== A long explanation, folded ==== */
/* Several screens open with five or six sentences of standing explanation. Every sentence is
   true and worth keeping, and together they push the controls they describe below the fold, so
   the page reads as a wall and the explanation gets skipped by the people who most needed it.
   The first two sentences stay in view; the rest goes behind a disclosure in the same paragraph.
   Nothing is deleted and nothing new is invented: any .sub may now carry a <details>, so this
   costs no class name and cannot drift out of step with the one it would have duplicated. */
.sub details{margin-top:7px}
.sub details>summary{cursor:pointer;color:var(--muted);font-weight:500;width:max-content;
  list-style:none;padding:1px 0}
.sub details>summary::-webkit-details-marker{display:none}
.sub details>summary::after{content:" \25B8";color:var(--faint);font-size:10px}
.sub details[open]>summary::after{content:" \25BE"}
.sub details>summary:hover{color:var(--ink)}
.sub details>div{margin-top:6px}

/* P3-02 — LiveTrace: what a long request is doing, one line per stage. Existing tokens only, so
   the dark block keeps working with no change; the host decides where it sits. */
.lt{display:flex;flex-direction:column;gap:2px;margin-top:8px;font-size:13px}
.lt-h{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:2px}
.lt-l{display:flex;justify-content:space-between;gap:12px;color:var(--faint)}
.lt-l b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:400}
.lt-l.now{color:var(--ink);font-weight:600}
.lt-l.near{color:var(--muted)}
.lt-l.bad{color:var(--warn);font-weight:600}

/* ================================================================ the campaign scheduler */
/* 27 Sep 2026 (design/campaign-scheduler/). Every class is sch-: the Campaigns home's timeline, the
   planner and its live week, the Excel matcher, the running campaign and the inbound rules. The
   colours are the token pairs above, so the dark theme resolves them as a set; flame is not spent. */

/* A lane's colour: --tone for a mark, --tone-soft for a filled block, --tone-ink for the text on that block
   (the tint's ink, final.md 3.3: ok on --ok-soft read 2.99:1, bad on --bad-soft 4.23:1). */
.sch-tone-u{--tone:var(--bad);--tone-soft:var(--bad-soft);--tone-ink:var(--bad-ink)}
.sch-tone-n{--tone:var(--accent-ink);--tone-soft:var(--accent-soft);--tone-ink:var(--accent-ink)}
.sch-tone-bg{--tone:var(--muted);--tone-soft:var(--hair);--tone-ink:var(--muted)}
.sch-tone-in{--tone:var(--ok);--tone-soft:var(--ok-soft);--tone-ink:var(--ok-ink)}
.sch-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none;background:var(--tone,var(--faint))}
.sch-dot.ok{background:var(--ok)} .sch-dot.warn{background:var(--warn)} .sch-dot.mute{background:var(--faint)}

/* the home: "2 calling now · 1 scheduled · 1 paused · 1 of 3 lines kept for incoming" */
.sch-head{display:flex;align-items:baseline;gap:6px 10px;flex-wrap:wrap;font-size:13px;margin:2px 0 12px}
.sch-head .k{color:var(--muted)}

/* the week: one lane per campaign or number, one cell per day, then the lines */
.sch-tl-wrap{overflow-x:auto;padding:2px}
.sch-tl{display:grid;gap:3px;align-items:center;font-size:11.5px;min-width:600px}
.sch-tl-h{text-align:center;font-size:11px;font-weight:600;color:var(--faint);padding-bottom:2px;white-space:nowrap}
.sch-tl-h.now{color:var(--accent-ink)}
/* The names stay put while a narrow window scrolls the days sideways. */
.sch-tl-name,.sch-tl-corner{position:sticky;left:0;z-index:1;background:var(--card);align-self:stretch}
.sch-tl-name{display:flex;align-items:center;gap:7px;min-width:0;font-size:12px;line-height:1.3;padding-right:8px}
.sch-tl-name .nmw{display:flex;flex-direction:column;min-width:0}
.sch-tl-name .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--ink);font-weight:500}
.sch-tl-name a.nm:hover{color:var(--accent)}
.sch-tl-name .k{color:var(--faint);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sch-tl-c{height:24px;background:var(--hair);border-radius:4px;position:relative;min-width:0}
.sch-tl-c.now{box-shadow:inset 0 0 0 2px var(--accent)}
.sch-tl-c.hol{background:repeating-linear-gradient(45deg,var(--line) 0 3px,transparent 3px 7px),var(--hair)}
.sch-tl-c b{position:absolute;inset:3px;border-radius:3px;display:flex;align-items:center;justify-content:center;
  padding:0 3px;font-size:10.5px;font-weight:600;background:var(--tone-soft);color:var(--tone-ink,var(--tone));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sch-tl-c .hl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 3px;
  font-size:9.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sch-tl-c.sch-tl-lines{height:34px;display:flex;flex-direction:column;gap:2px;padding:3px}
.sch-tl-seg{flex:1;min-height:2px;border-radius:2px;background:var(--tone)}
.sch-tl-seg.free{background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}

/* the table's "⋯": a menu anchored to its button */
.sch-more{position:relative;display:inline-block}
.sch-more>button{font-size:15px;line-height:1;padding:3px 9px}
.sch-scrim{position:fixed;inset:0;z-index:29}
.sch-menu{position:absolute;right:0;top:100%;margin-top:4px;z-index:30;min-width:176px;padding:6px;
  display:flex;flex-direction:column;gap:1px;background:var(--card);border:1px solid var(--line);
  border-radius:8px;box-shadow:var(--e2)}
.sch-menu.up{top:auto;bottom:100%;margin:0 0 4px}
.sch-menu button{justify-content:flex-start;width:100%;background:none;border:0;color:var(--ink);
  font-weight:500;padding:7px 10px;border-radius:6px}
.sch-menu button:hover{background:var(--hair);color:var(--ink)}
.sch-menu button.bad{color:var(--bad)}
.sch-menu button.bad:hover{background:var(--bad-soft);color:var(--bad-ink)}
.sch-now{display:flex;align-items:center;gap:7px;white-space:normal;min-width:180px}

/* ConfirmModal's two scheduler shapes: a choice of one, and a checklist */
.vlp-choices{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.vlp-choice{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:9px;
  padding:9px 12px;cursor:pointer;font-size:13px;line-height:1.45}
.vlp-choice.on{border-color:var(--accent);background:var(--accent-soft)}
.vlp-choice input{margin-top:3px;accent-color:var(--btn);flex:none}
.vlp-choice .help{display:block}

/* the planner (design/campaign-scheduler/01): the sentence on top, the sections on the left, the week on
   the right. The week stays in view while the sections scroll; below 1000px it follows them instead. */
.sch-summary{margin-bottom:16px}
.sch-sentence{font-size:16px;line-height:2.05;color:var(--ink)}
.sch-sentence.compact{font-size:14px;line-height:1.85}
.sch-fill{display:inline;font:inherit;font-weight:500;color:var(--accent-ink);background:none;border:0;
  border-bottom:2px solid var(--accent);border-radius:0;padding:0 3px;cursor:default;line-height:inherit}
button.sch-fill{cursor:pointer}
button.sch-fill:hover{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent)}
.sch-plan{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr);gap:16px;align-items:start}
.sch-plan-main{min-width:0}
.sch-plan-side{position:sticky;top:72px;min-width:0}
.sch-sec{scroll-margin-top:72px}
.sch-sec:focus{outline:2px solid transparent;outline-offset:2px;box-shadow:var(--focus)}
.sch-sec h2{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.sch-ok{font-size:12px;font-weight:600;color:var(--ok)}
.sch-sub{margin:16px 0 6px!important;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.sch-sub .help{font-weight:400}
.help.warn,.sch-import .warn{color:var(--warn)}
.help.bad{color:var(--bad)}
.sch-import{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:baseline;font-size:13px}
.sch-import .k{color:var(--muted)}
.sch-file{font-weight:600}
.sch-import-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
/* A file input dressed as a button: the label is what is clicked, the input is kept for the keyboard. */
.sch-filebtn{position:relative;display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  border-radius:8px;padding:8px 14px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.sch-filebtn:hover{background:var(--hair)}
.sch-filebtn.primary{background:var(--btn);border-color:var(--btn);color:#fff}
.sch-filebtn.primary:hover{background:var(--btn-ink);border-color:var(--btn-ink)}
.sch-filebtn.off{opacity:.45;cursor:not-allowed}
.sch-filebtn input{position:absolute;inset:0;opacity:0;width:100%;cursor:inherit}
.sch-filebtn:focus-within,.pd-upload:focus-within{outline:2px solid var(--focus-border);outline-offset:2px;box-shadow:var(--focus)}
.sch-when{display:flex;flex-direction:column;gap:8px}
.sch-when-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.sch-when-l{min-width:52px;font-weight:600;font-size:12.5px}
input.sch-dt{font:inherit;font-size:13px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;
  background:var(--card);color:var(--ink);max-width:100%}
.sch-hols{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sch-extra{display:inline-flex;align-items:center;gap:4px}
.sch-chip-x,.sch-gap-x{background:none;border:0;color:inherit;padding:0 2px;font-size:13px;line-height:1;opacity:.75}
.sch-chip-x:hover{background:none;color:inherit;opacity:1}
.sch-addday{display:inline-flex;align-items:center;gap:4px}
.sch-addday input{font:inherit;font-size:12px;padding:4px 8px;border:1px solid var(--line);border-radius:8px;
  background:var(--card);color:var(--ink)}
.sch-redial-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:12px 0 6px}
.sch-maxdials,.sch-lines{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.sch-maxdials input,.sch-lines input{width:64px!important;padding:5px 8px}
.sch-what h2{margin:0}
.sch-what-h{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.sch-what-h .grow{flex:1}
.sch-wk{padding:3px 9px;font-size:14px;line-height:1}
.sch-est p{margin:8px 0 0;font-size:13px;line-height:1.5}
.sch-acts{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 6px}

/* the week: 9 am at the top of each column, 10 pm at the bottom */
.sch-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;transition:opacity .15s}
.sch-week.busy{opacity:.55}
.sch-day{min-width:0;text-align:center;font-size:11px}
.sch-day-h{font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}
.sch-day-h.now{color:var(--accent-ink)}
.sch-day-f{margin-top:3px;font-size:10.5px;font-weight:600;color:var(--bad);white-space:nowrap}
.sch-col{position:relative;height:156px;background:var(--card);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.sch-col.hol{background:var(--hair)}
.sch-blk{position:absolute;left:2px;right:2px;border-radius:3px;background:color-mix(in srgb,var(--ok) 55%,transparent)}
.sch-law{position:absolute;left:0;right:0;
  background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--bad) 22%,transparent) 0 4px,transparent 4px 8px)}
.sch-hol{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;
  font-size:9.5px;color:var(--muted);overflow:hidden;padding:4px 0}
.sch-done{position:absolute;left:0;right:0;height:2px;background:var(--bad)}
.sch-legend{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px;font-size:11px;color:var(--muted)}
.sch-legend span{display:inline-flex;align-items:center;gap:4px}
.sch-legend i{display:inline-block;width:10px;height:10px;border-radius:2px}
.sch-legend .sw-blk{background:color-mix(in srgb,var(--ok) 55%,transparent)}
.sch-legend .sw-law{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--bad) 35%,transparent) 0 2px,transparent 2px 4px);
  box-shadow:inset 0 0 0 1px var(--line)}
.sch-legend .sw-hol{background:var(--hair);box-shadow:inset 0 0 0 1px var(--line)}
.sch-legend .sw-done{height:2px;background:var(--bad)}

/* the weekly hours: day chips, up to four slots, and a bar that greys what the law keeps closed */
.sch-slots{display:flex;flex-direction:column;gap:8px}
.sch-grp{border:1px solid var(--line);border-radius:9px;padding:10px 12px;background:var(--card-2)}
.sch-grp-h{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.sch-days{display:flex;flex-wrap:wrap;gap:4px}
.sch-daychip{font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);color:var(--muted)}
.sch-daychip:hover{background:var(--hair);color:var(--ink);border-color:var(--line)}
.sch-daychip.on{background:var(--btn);border-color:var(--btn);color:#fff}
.sch-daychip.on:hover{background:var(--btn-ink);border-color:var(--btn-ink);color:#fff}
.sch-daychip.else{border-style:dashed;color:var(--faint)}
.sch-spans{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin-top:8px}
.sch-span{display:inline-flex;align-items:center;gap:4px}
.sch-span select{width:auto;padding:5px 8px;font-size:12.5px}
.sch-span .k{color:var(--faint)}
.sch-track{position:relative;height:8px;border-radius:4px;background:var(--hair);margin-top:10px;overflow:hidden}
.sch-track i{position:absolute;top:0;bottom:0}
.sch-track-closed{background:repeating-linear-gradient(45deg,var(--line) 0 3px,transparent 3px 6px),var(--hair)}
.sch-track-on{background:var(--ok);border-radius:3px}
.sch-track-k{display:flex;justify-content:space-between;font-size:9.5px;color:var(--faint);margin-top:2px}
.sch-slots-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.sch-slots-foot .warn{color:var(--warn)}

/* the redial ladder: one rung per outcome, a chip per wait */
.sch-ladder{display:flex;flex-direction:column;gap:7px}
.sch-rung{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.sch-rung-l{min-width:190px;font-size:13px}
.sch-rung-l input{width:58px!important;padding:3px 6px;display:inline-block}
.sch-gap{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:var(--card);padding:0 4px 0 2px}
.sch-gap select{width:auto;border:0;background:none;padding:3px 4px 3px 8px;font-size:12.5px}
.sch-gap select:focus{outline:none;box-shadow:none}
.sch-gap:focus-within{border-color:var(--focus-border);box-shadow:var(--focus)}
.sch-rung-x{background:none;border:0;color:var(--faint);font-size:11.5px;font-weight:500;padding:3px 6px;margin-left:2px}
.sch-rung-x:hover{background:var(--bad-soft);color:var(--bad-ink)}
.sch-rung.add select{width:auto;font-size:12.5px;padding:5px 8px}

/* the Excel matcher (design/campaign-scheduler/02, A): your own rows, a chip over each column saying what
   it becomes, the cells with a problem in red (not imported) or amber (imported, worth a look) */
.sch-matcher{display:flex;flex-direction:column;gap:8px}
.sch-matcher-h{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
select.sch-sheet{width:auto;padding:3px 8px;font-size:12px}
.sch-sheet-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px}
table.sch-sheet-t{border-collapse:collapse;width:100%;font-size:12px}
.sch-sheet-t th,.sch-sheet-t td{border-bottom:1px solid var(--line);border-right:1px solid var(--hair);padding:5px 8px;
  text-align:left;white-space:nowrap;vertical-align:bottom}
.sch-sheet-t th{background:var(--hair);font-weight:600}
.sch-sheet-t tbody tr:last-child td{border-bottom:0}
.sch-head{display:block;margin-top:4px}
.sch-sheet-t .sch-rownum{color:var(--faint);font-size:10.5px;font-weight:500;text-align:right;width:1%;background:var(--card-2)}
select.sch-chip{display:block;width:auto;max-width:200px;font-size:11px;font-weight:600;border-radius:5px;padding:2px 6px;
  border:1px solid transparent;background:var(--accent-soft);color:var(--accent-ink)}
select.sch-chip.extra{background:var(--card);color:var(--muted);border:1px dashed var(--line)}
select.sch-chip.guess{border-color:var(--warn)}
.sch-sheet-t td.sch-cell-bad{background:var(--bad-soft);color:var(--bad-ink)}
.sch-sheet-t td.sch-cell-meh{background:var(--warn-soft);color:var(--warn-ink)}
.sch-matcher-boxes{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:10px}
.sch-box{border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--card-2);font-size:12.5px;min-width:0}
.card .sch-box h3{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 6px}
.sch-box .ok{color:var(--ok)}
.sch-issue{padding:2px 0;line-height:1.45}
.sch-issue .bad{color:var(--bad);font-weight:600}
.sch-issue .warn{color:var(--warn);font-weight:600}
.sch-box-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
button.sch-inline{display:inline;padding:0 3px;font-size:inherit;vertical-align:baseline}

/* the running campaign (design/campaign-scheduler/04): the sentence, the status line with its actions,
   the outcome tiles, and the people */
.sch-live .sch-sentence{margin-bottom:10px}
/* a campaign made before the scheduler: its one window and its version, changed where they are shown */
.sch-legacy-edit{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:4px 0 10px}
.sch-legacy-edit input[type=time]{width:112px}
.sch-legacy-edit select{max-width:100%}
.sch-status{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;
  padding-top:10px;border-top:1px solid var(--hair)}
.sch-status .sch-now{min-width:0;flex-wrap:wrap}
.sch-status .k{color:var(--muted)}
.sch-status-acts{display:flex;flex-wrap:wrap;gap:6px}
.sch-status-acts button{padding:6px 11px}
button.ghost.sch-stop{color:var(--bad)}
.sch-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;margin:14px 0 16px}
.sch-tile{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 10px;display:flex;
  flex-direction:column;gap:2px;min-width:0}
.sch-tile .k{font-size:11px;color:var(--muted);line-height:1.3}
.sch-tile b{font-size:19px;font-variant-numeric:tabular-nums}
.sch-tile b.ok{color:var(--ok)} .sch-tile b.warn{color:var(--warn)} .sch-tile b.bad{color:var(--bad)}
.sch-people td{white-space:nowrap}
.sch-people td.ok{color:var(--ok)} .sch-people td.warn{color:var(--warn)}
.sch-num{white-space:nowrap;font-variant-numeric:tabular-nums}
.sch-more-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;flex-wrap:wrap}

@media (max-width:1000px){
  .sch-plan{grid-template-columns:minmax(0,1fr)}
  .sch-plan-side{position:static}
}
@media (max-width:720px){
  .sch-sentence{font-size:14.5px;line-height:1.9}
  .sch-rung-l{min-width:0;flex-basis:100%}
  .sch-col{height:132px}
  .sch-day{font-size:10px}
  .sch-day-h{font-size:10px}
  .sch-matcher-boxes{grid-template-columns:minmax(0,1fr)}
}

/* ================================================================ the shell on a narrow window */
/* 22 Sep 2026. Measured at 375x812 the frame was 375px wide, the sidebar kept its whole 224px
   column, and `main` was left with 151px — a card inside it was 99px across and a two-column
   .grid2 row ran to x=501 and was simply cut off, with no page scroll to reach it. The collapse
   that was meant to prevent this had been written EARLIER in the file than the sharpened pass's
   `.frame{224px 1fr}`, so it had never once applied. This block is last on purpose.
                                                                                                
   Below 720px — the breakpoint the settings rows above already use — the sidebar leaves the grid
   entirely and becomes a drawer over the page, opened by the Menu button AdminShell puts first in
   the topbar. `main` then has the full width, with a 16px gutter on both sides from the topbar
   down through the content and the rail. Nothing above 720px moves. */

/* Hidden by default and shown only in the drawer state, so a desk window renders exactly what it
   rendered before: no menu button, no scrim, one grid with two columns. */
.nav-btn{display:none}
.side-scrim{display:none}

@media (max-width:720px){
  .frame{grid-template-columns:minmax(0,1fr)}

  /* Off-canvas rather than merely narrow: `position:fixed` takes the rail out of the grid, so the
     single column is the whole window. `height:auto` is not decoration — the base rule sets
     `height:100vh`, which beats `bottom:0` and would leave the drawer short of the fold on a
     phone whose URL bar is showing. `visibility` is what keeps a shut drawer out of the tab
     order; a translated one is off the screen but still reachable by Tab, which is how a keyboard
     ends up typing into twenty-five links nobody can see. */
  .side{position:fixed;top:0;left:0;bottom:0;height:auto;width:min(288px,84vw);z-index:210;
        transform:translateX(-100%);visibility:hidden;
        transition:transform .18s ease,visibility 0s linear .18s;
        border-right:1px solid var(--line);overflow-y:auto;overscroll-behavior:contain}
  /* `visibility 0s` on the way IN and `0s linear .18s` on the way OUT, never a timed fade of it:
     visibility is a discrete property, so a transition on it still reads `hidden` at progress
     zero — which is the frame the shell focuses the drawer in, and a hidden element cannot take
     focus. Flipping it at once on open and holding it until the slide-out finishes gives both the
     animation and a drawer the keyboard can land in. */
  .side.open{transform:none;visibility:visible;transition:transform .18s ease,visibility 0s;
             box-shadow:14px 0 34px rgba(16,24,40,.22)}

  /* A button, not a styled div: the drawer must be dismissable by Enter as well as by a tap. */
  .side-scrim{display:block;position:fixed;inset:0;z-index:200;padding:0;border:0;border-radius:0;
              background:rgba(10,16,28,.42)}
  .side-scrim:hover{background:rgba(10,16,28,.42)}

  .nav-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;
           width:32px;height:32px;padding:0;border-radius:8px;
           background:var(--card);border:1px solid var(--line);color:var(--muted)}
  .nav-btn:hover{background:var(--hair);color:var(--ink);border-color:var(--line)}

  /* The 16px gutter, every surface the page owns. */
  .topbar{padding:12px 16px;gap:10px}
  .content,.content.wide{padding:18px 16px 56px}
  .rail{padding:16px 16px 36px}

  /* The title shares its row with the menu button and must be allowed to shrink; without
     min-width:0 a long agent name holds the row open and pushes the button off the screen. */
  .topbar>div{min-width:0}
  .topbar h1{font-size:15px;overflow-wrap:anywhere}

  /* 20px of card padding on each side is 40px of a 343px line. The card keeps its shape and gives
     the form back the width. Wide tables need nothing here: `.table-scroll` already wraps them
     and is what keeps a 1030px roster off the page's own scrollbar. */
  .card{padding:16px}
  .tiles,.stats-row,.meters{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
  .grid2{grid-template-columns:minmax(0,1fr);gap:12px}

  /* A five-segment filter is wider than a phone, and `.seg` is `overflow:hidden` for its rounded
     ends — so the last segment was not narrow, it was gone. It scrolls inside its own pill now;
     the segment cut by the right edge is the only affordance such a control has ever needed. */
  .seg{max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .seg::-webkit-scrollbar{display:none}
  .seg button{flex:none}

  .pal-back{padding:10vh 16px 16px}
  .vlp-modal-back{padding:16px}
}

/* The drawer slides; with the system asking for less motion it simply is or is not there. */
@media (prefers-reduced-motion:reduce){.side,.side.open{transition:none}}


/* =====================================================================================
   Console shell, October 2026 (docs/superpowers/specs/2026-10-01-console-shell-design.md).
   An icon rail that expands on hover, a top bar with a user menu, sub-tabs per group, a phone
   tab bar, and the home dashboard kit (widgets on a 12-column grid, Customize mode, charts).
   New class names throughout, so no page rule above changes; the retired .frame/.side/.topbar
   rules stay until Stage 3 removes them. This block is LAST on purpose: it must win the cascade
   over the narrow-window block above it.
   ===================================================================================== */
:root{--navy:#1B4272;--navy-deep:#12305A;--navy-ink:#0C213F;--amber:#FFA726;
      --c1:#2A5C9E;--c2:#4F97E8;--c3:#B8861A;--c4:#E8701A;--c-other:#C9D3E2;--c-other-edge:#A8B3C4;--ease:cubic-bezier(.22,.8,.3,1);
      /* the sticky .vtop's height (10 px padding, the crumb over the title, its border): anything else that
         sticks to the top on a wide screen sits under it, never behind it (lane U review, 9 Oct 2026) */
      --vtop-h:66px}
:root[data-theme="dark"]{--c1:#5B8AD6;--c2:#7FB4F0;--c3:#D1A23A;--c4:#F08A3E;--c-other:#3A4556;--c-other-edge:#4B5669}
@media (prefers-color-scheme: dark){:root[data-theme="dark"]{--c1:#5B8AD6;--c2:#7FB4F0;--c3:#D1A23A;--c4:#F08A3E;--c-other:#3A4556;--c-other-edge:#4B5669}}
@keyframes vrise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes vfade{to{opacity:1}}
@keyframes vgrowx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes vgrowy{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes vdraw{to{stroke-dashoffset:0}}
@keyframes vbar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes vbeacon{to{box-shadow:0 0 0 12px rgba(244,121,31,0)}}

/* ---- frame ---- */
.vshell{display:grid;grid-template-columns:64px minmax(0,1fr);min-height:100vh;background:var(--bg)}
.vshell.fill{height:100vh;overflow:hidden}
.vrailwrap{position:relative;z-index:30}
.vrail{position:sticky;top:0;height:100vh;width:64px;background:var(--navy-ink);color:#fff;--focus:var(--focus-on-dark);--focus-border:var(--focus-border-on-dark);
       padding:12px 10px;display:flex;flex-direction:column;gap:2px;overflow:hidden;white-space:nowrap;
       transition:width .22s var(--ease),box-shadow .22s;border-right:0}
.vrailwrap .vrail{position:absolute;inset:0 auto 0 0}
.vrail:hover,.vrail:focus-within{width:232px;box-shadow:12px 0 40px rgba(12,33,63,.28)}
.vrail .lbl{opacity:0;transition:opacity .15s;overflow:hidden;text-overflow:ellipsis}
.vrail:hover .lbl,.vrail:focus-within .lbl{opacity:1;transition-delay:.08s}
.vrail .mk{display:flex;align-items:center;gap:10px;height:40px;padding:0 6px;margin-bottom:6px;color:#fff}
.vrail .mk .dot{width:30px;height:30px;border-radius:9px;background:var(--flame);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:none;color:#fff}
.vrail .mk img.dot{width:36px;height:30px;border-radius:0;background:none;object-fit:contain}
.vrail .mk b{font-weight:700;letter-spacing:.12em;font-size:15px}
.vrail .mk b i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--flame);margin-left:2px;transform:translateY(-8px)}
.vrail .ws{display:flex;align-items:center;gap:10px;padding:6px;margin:0 0 6px;border-radius:9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);height:44px}
.vrail .ws .av{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-weight:700;flex:none;font-size:12px}
.vrail .ws .nm{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.vrail .ws .nm b{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.vrail .ws .nm span{font-size:11px;opacity:.65}
.vrail nav{display:flex;flex-direction:column;gap:2px;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.vrail nav::-webkit-scrollbar{display:none}
.vrail hr{border:0;border-top:1px solid rgba(255,255,255,.1);margin:6px 4px}
.vrail .sect{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px 2px;height:0;overflow:hidden;color:rgba(255,255,255,.55)}
.vrail:hover .sect,.vrail:focus-within .sect{height:auto}
.vrail .nav-i{display:flex;align-items:center;gap:12px;height:40px;padding:0 11px;border-radius:9px;color:rgba(255,255,255,.78);font-size:13px;
              background:none;border:0;width:100%;text-align:left;position:relative;flex:none;cursor:pointer}
.vrail .nav-i:hover{background:rgba(255,255,255,.08);color:#fff}
.vrail .nav-i.on{background:rgba(255,255,255,.13);color:#fff;font-weight:600}
.vrail .nav-i.on:before{content:"";position:absolute;left:-10px;top:10px;width:3px;height:20px;border-radius:2px;background:var(--flame)}
.vrail .nav-i svg{width:20px;height:20px;flex:none;opacity:.85;color:inherit}
.vrail .nav-i .cnt{margin-left:auto;font-family:inherit;font-size:11px;font-weight:600;color:#fff;background:rgba(255,255,255,.12);padding:1px 7px;border-radius:999px}
.vrail .nav-i .cnt.live{background:var(--flame)}
.vrail .nav-i .cnt.warn{background:var(--warn)}
.vrail .nav-i .b{position:absolute;left:28px;top:8px;width:8px;height:8px;border-radius:50%;background:var(--flame);border:2px solid var(--navy-ink);transition:opacity .15s}
.vrail .nav-i .b.warn{background:var(--warn)}
.vrail:hover .nav-i .b,.vrail:focus-within .nav-i .b{opacity:0}
.vrail .foot{margin-top:auto;padding-top:6px;border-top:1px solid rgba(255,255,255,.1);font-size:11px}
.vrail .foot>.lbl{padding:4px 10px 6px;color:rgba(255,255,255,.7);height:0}
.vrail:hover .foot>.lbl,.vrail:focus-within .foot>.lbl{height:auto}
.vrail .nav-i.out{color:rgba(255,255,255,.6)}

/* ---- main and top bar ---- */
.vmain{min-width:0;min-height:0;display:flex;flex-direction:column}
.vtop{display:flex;align-items:center;gap:12px;padding:10px 22px;background:var(--card);border-bottom:1px solid var(--line);flex:none;position:sticky;top:0;z-index:20;flex-wrap:wrap;row-gap:8px}
.vshell.fill .vtop{position:static}
.vtop .ttl{min-width:0}
.vtop h1{font-size:17px;font-weight:600;letter-spacing:-.01em;overflow-wrap:anywhere}
.vtop .crumb{font-size:12px;color:var(--faint);text-transform:none;letter-spacing:0}
.vtop .grow{flex:1}
.vtop .kbtn{min-width:170px}
.vtop .btn,.vtop button.ghost,.vtop a.btn{white-space:nowrap}
.vtop .nav-btn{display:none}
/* A receipt strip that sticks at the top of a long page sits UNDER the sticky .vtop (z-index 20, --vtop-h tall), never behind it:
   at top:8px it was entirely covered, so a receipt for a write made mid-page was invisible (visual QA, 20 Oct 2026). Its own
   z-index stays below the drawers (250/251), modal back (260), palette (300) and the fixed receipts (400). */
.flash-stick{position:sticky;top:calc(var(--vtop-h) + 8px);z-index:5}
.usr{position:relative}
.usr-btn{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;border:0;font-size:12px;font-weight:700;padding:0;box-shadow:none;justify-content:center}
.usr-btn:hover{background:var(--navy-deep)}
.usr-scrim{position:fixed;inset:0;z-index:40;background:transparent;border:0;padding:0;border-radius:0}
.usr-scrim:hover{background:transparent}
.usr-menu{z-index:50;min-width:260px}
.usr-item{font-weight:500}
.vtabs{display:flex;gap:2px;padding:0 22px;background:var(--card);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;flex:none}
.vtabs::-webkit-scrollbar{display:none}
.vtabs a{padding:10px 12px;font-size:13px;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;margin-bottom:-1px}
.vtabs a:hover{color:var(--ink)}
.vtabs a.on{color:var(--ink);font-weight:600;border-bottom-color:var(--flame)}
.vshell .page{display:grid;grid-template-columns:minmax(0,1fr);align-items:start}
.vshell .page.with-rail{grid-template-columns:minmax(0,1fr) 272px}
.vshell.fill .page{flex:1;min-height:0;display:flex;align-items:stretch}
.vshell.fill .content{flex:1;min-height:0;display:flex;flex-direction:column;padding:14px 22px 16px;overflow:hidden}
.vshell .side-scrim{display:none}
.vtabbar{display:none}

/* ---- the dashboard kit: widgets on 12 columns, every card fills its cell ---- */
.dash{flex:1;min-height:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:max(calc((100% - 154px) / 12),48px);grid-auto-flow:row dense;gap:14px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.dash>*{min-height:0;min-width:0}
.dash .w{position:relative}
.dash .banner{grid-column:1/-1;grid-row:span 1;align-self:start}
.dash .stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:stretch;gap:0;box-shadow:none}
.dash .stat .k{font-size:11.5px;font-weight:600;color:var(--muted);display:flex;justify-content:space-between;text-transform:none;letter-spacing:0;margin:0}
.dash .stat .k .win{font-weight:400;color:var(--faint)}
.dash .stat .v{font-size:26px;font-weight:600;letter-spacing:-.02em;margin-top:2px;line-height:1.1;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.dash .stat .v small{font-size:12px;font-weight:500;color:var(--muted);margin-left:5px;letter-spacing:0}
.dash .stat .v small.up{color:var(--ok)}.dash .stat .v small.dn{color:var(--bad)}
.dash .stat .sub{font-size:12px;color:var(--faint);margin-top:3px;white-space:normal}
.dash .stat .fill{margin-top:auto;padding-top:6px}
.dash .stat.live{background:var(--navy-ink);border-color:var(--navy-ink);color:#fff;flex-direction:row;gap:16px;align-items:center;box-shadow:none;--focus:var(--focus-on-dark);--focus-border:var(--focus-border-on-dark)}
.dash .stat.live .k,.dash .stat.live .k .win,.dash .stat.live .sub,.dash .stat.live .v small{color:rgba(255,255,255,.75)}
.dash .stat.live .v{color:#fff;font-size:40px}
.dash .stat.live .beacon{position:absolute;right:12px;top:12px;width:10px;height:10px;border-radius:50%;background:var(--flame);box-shadow:0 0 0 0 rgba(244,121,31,.6);animation:vbeacon 1.8s infinite}
.dash .stat.live .lanes{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;min-width:0}
.dash .lane{display:flex;align-items:center;gap:7px;font-size:12px;color:rgba(255,255,255,.9);min-width:0}
.dash .lane .wv{display:flex;gap:2px;align-items:flex-end;height:12px;width:14px;flex:none}
.dash .lane .wv i{width:3px;background:var(--amber);border-radius:1px;height:100%;transform-origin:bottom;animation:vbar 1.3s ease-in-out infinite}
.dash .lane .wv i:nth-child(2){animation-delay:.2s}.dash .lane .wv i:nth-child(3){animation-delay:.4s}
.dash .lane b{font-weight:500;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash .lane span{font-family:var(--mono);font-size:11px;opacity:.7}
.dash .spark{width:100%;height:28px;display:block;overflow:visible;margin:0}
.dash .spark path{fill:none;stroke:var(--c1);stroke-width:1.8;vector-effect:non-scaling-stroke}
.dash .spark .area{fill:var(--accent-soft);stroke:none;opacity:0;animation:vfade .6s ease forwards 1.2s}
.dash .spark path:not(.area){stroke-dasharray:1;stroke-dashoffset:1;animation:vdraw 1.3s var(--ease) forwards .4s}
.dash .spark circle{fill:var(--flame);opacity:0;animation:vfade .3s ease forwards 1.6s}
.dash .meter{height:6px;border-radius:3px;background:var(--hair);overflow:hidden;display:flex;gap:2px;margin:0}
.dash .meter i{display:block;height:100%;background:var(--navy);border-radius:3px;transform-origin:left;animation:vgrowx 1.1s var(--ease) both .3s}
.dash .meter i.warn{background:var(--warn)}.dash .meter i.bad{background:var(--bad)}
.dash .split{display:flex;gap:2px;height:8px;border-radius:4px;overflow:hidden}
.dash .split i{display:block;height:100%;transform-origin:left;animation:vgrowx 1s var(--ease) both .3s}

.dash .card{background:var(--card);border:1px solid var(--line);border-radius:12px;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:0;margin:0;box-shadow:none;container-type:inline-size}
.dash .card+.card{margin:0}
.dash .card-h{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--hair);flex:none;flex-wrap:wrap}
.dash .card-h h3{font-size:13px;font-weight:600;margin:0}
.dash .card-h .grow{flex:1}
.dash .card-h a{font-size:12px;font-weight:500;white-space:nowrap}
.dash .card-h .hint{font-size:12px;color:var(--faint);white-space:nowrap}
.dash .card-b{padding:12px 16px;flex:1;min-height:0;display:flex;flex-direction:column}
.dash .legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--muted)}
.dash .legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.dash .legend i.line{height:0;border-top:2px solid var(--faint);width:14px;vertical-align:3px;border-radius:0}
.dash .empty{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);font-size:12.5px;padding:16px;line-height:1.5}

/* insights */
.dash .ins{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.dash .in{display:grid;grid-template-columns:4px 1fr;gap:12px;padding:10px 16px 10px 12px;border-bottom:1px solid var(--hair);opacity:0;animation:vrise .5s var(--ease) forwards;flex:none;color:var(--ink)}
.dash .in:nth-child(1){animation-delay:.1s}.dash .in:nth-child(2){animation-delay:.25s}.dash .in:nth-child(3){animation-delay:.4s}.dash .in:nth-child(n+4){animation-delay:.55s}
.dash .in:last-child{border-bottom:0}
.dash .in:hover{background:var(--hair)}
.dash .in .bar{border-radius:2px;background:var(--faint)}
.dash .in.warn .bar{background:var(--warn)}.dash .in.ok .bar{background:var(--ok)}.dash .in.info .bar{background:var(--c1)}
.dash .in b{display:block;font-weight:600;font-size:12.5px}
.dash .in p{font-size:12px;color:var(--muted);margin-top:2px}
.dash .in .tag{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:1px;display:block}
.dash .in.warn .tag{color:var(--warn)}.dash .in.ok .tag{color:var(--ok)}.dash .in.info .tag{color:var(--c1)}

/* charts */
.dash .chart{width:100%;height:100%;flex:1;min-height:0;display:block;overflow:visible}
.dash .chart text{font-family:'IBM Plex Sans',sans-serif;font-size:11px;fill:var(--faint)}
.dash .chart .grid line{stroke:var(--hair);stroke-width:1}
.dash .chart .axis{stroke:var(--line)}
.dash .chart .seg{transform-box:fill-box;transform-origin:bottom center;animation:vgrowy .8s var(--ease) both}
.dash .chart .seg:hover{filter:brightness(.85)}
.dash .chart .seg.today{fill:var(--c1)}.dash .chart .seg.past{fill:var(--c2);opacity:.75}
.dash .chart .lbl{fill:var(--ink);font-weight:600;opacity:0;animation:vfade .4s ease forwards 1.2s}
.dash .chart .foot{fill:var(--muted)}
.dash .donut{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;flex:1;min-height:0}
.dash .donut .wrap{position:relative;width:132px;height:132px}
.dash .donut svg{width:132px;height:132px;transform:rotate(-90deg)}
.dash .donut circle{fill:none;stroke-width:20;transition:stroke-dasharray 1.1s var(--ease)}
.dash .donut .ring{stroke:var(--hair)}
.dash .donut .center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.dash .donut .center b{font-size:20px;font-weight:600;letter-spacing:-.02em}
.dash .donut .center span{font-size:10.5px;color:var(--faint);text-align:center;max-width:80px;line-height:1.3}
.dash .dk{display:flex;flex-direction:column;justify-content:space-between;height:100%;gap:4px;min-width:0}
.dash .dk div{display:flex;align-items:center;gap:8px;font-size:12px}
.dash .dk i{width:9px;height:9px;border-radius:2px;flex:none}
.dash .dk span{flex:1;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash .dk b{font-weight:600;font-variant-numeric:tabular-nums}
.dash .dk small{color:var(--faint);width:32px;text-align:right;font-variant-numeric:tabular-nums}
.dash .hb{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:space-between;gap:6px}
.dash .hb .r{display:grid;grid-template-columns:104px 1fr 44px;align-items:center;gap:10px;font-size:12px}
.dash .hb .r span{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash .hb .t{height:10px;background:var(--hair);border-radius:3px;overflow:hidden}
.dash .hb .t i{display:block;height:100%;background:var(--c1);border-radius:3px;transform-origin:left;animation:vgrowx 1s var(--ease) both}
.dash .hb .r:nth-child(2) i{animation-delay:.1s}.dash .hb .r:nth-child(3) i{animation-delay:.2s}.dash .hb .r:nth-child(4) i{animation-delay:.3s}.dash .hb .r:nth-child(n+5) i{animation-delay:.4s}
.dash .hb b{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.dash .hb .note{font-size:11.5px;color:var(--muted)}

/* the table inside a widget: never wider than its card, only the rows scroll */
.dash .tbl{overflow-y:auto;overflow-x:hidden;flex:1;min-height:0;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.dash .tbl table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:12.5px}
.dash .tbl th{position:sticky;top:0;background:var(--card);text-align:left;font-size:10.5px;font-weight:600;color:var(--faint);letter-spacing:.05em;text-transform:uppercase;padding:8px 12px;border-bottom:1px solid var(--hair);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:1}
.dash .tbl td{padding:8px 12px;border-bottom:1px solid var(--hair);vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash .tbl td:first-child,.dash .tbl th:first-child{padding-left:16px}.dash .tbl td:last-child,.dash .tbl th:last-child{padding-right:16px}
.dash .tbl tr:last-child td{border-bottom:0}
.dash .tbl tbody tr{opacity:0;animation:vrise .45s var(--ease) forwards;cursor:pointer}
.dash .tbl tbody tr:hover td{background:var(--hair)}
.dash .tbl tbody tr:nth-child(1){animation-delay:.1s}.dash .tbl tbody tr:nth-child(2){animation-delay:.18s}.dash .tbl tbody tr:nth-child(3){animation-delay:.26s}.dash .tbl tbody tr:nth-child(4){animation-delay:.34s}.dash .tbl tbody tr:nth-child(n+5){animation-delay:.42s}
@container (max-width:640px){.dash .tbl th.opt,.dash .tbl td.opt{display:none}}
@container (max-width:520px){.dash .tbl th.opt2,.dash .tbl td.opt2{display:none}}

/* ---- Customize mode ---- */
.dash.editing .w{outline:1.5px dashed color-mix(in srgb,var(--navy) 45%,transparent);outline-offset:-1px;cursor:grab}
.dash.editing .w.drag{opacity:.35}
.dash.editing .w.over{outline:2px solid var(--flame);outline-offset:-2px}
.wt{position:absolute;top:6px;right:6px;z-index:5;display:none;gap:2px;background:var(--navy-ink);border-radius:8px;padding:3px;box-shadow:var(--e2);--focus:var(--focus-on-dark);--focus-border:var(--focus-border-on-dark)}
.dash.editing .wt{display:flex}
.wt button{width:26px;height:24px;border:0;border-radius:5px;background:transparent;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0;font-family:var(--mono)}
.wt button:hover{background:rgba(255,255,255,.14);color:#fff;border:0}
.wt button:focus-visible{outline-offset:-2px}
.wt button.x:hover{background:var(--bad)}
.wt .sz{font-size:10px;color:rgba(255,255,255,.6);padding:0 5px;display:flex;align-items:center;font-family:var(--mono)}
.vtop .btn.cust.on{background:var(--flame);border-color:var(--flame);color:#fff}
.editbar{display:flex;align-items:center;gap:10px;padding:8px 22px;background:var(--flame-soft);border-bottom:1px solid color-mix(in srgb,var(--flame) 30%,transparent);font-size:12.5px;color:var(--flame-ink);flex:none;flex-wrap:wrap}
.editbar .grow{flex:1}
.editbar button{font-size:12px;font-weight:600;padding:6px 11px;border-radius:7px;border:1px solid color-mix(in srgb,var(--flame) 40%,transparent);background:var(--card);color:var(--flame-ink)}
.editbar button:hover{background:var(--hair);color:var(--flame-ink);border-color:color-mix(in srgb,var(--flame) 40%,transparent)}
.editbar button.primary,.editbar button.primary:hover{background:var(--btn);border-color:var(--btn);color:#fff}
.editbar label{display:inline-flex;align-items:center;gap:6px}
.lib{position:fixed;top:0;right:0;bottom:0;width:320px;background:var(--card);border-left:1px solid var(--line);box-shadow:-12px 0 40px rgba(12,33,63,.12);transform:translateX(100%);transition:transform .25s var(--ease);z-index:60;display:flex;flex-direction:column}
.lib.open{transform:none}
.lib .h{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--hair)}
.lib .h h3{font-size:13.5px;font-weight:600;margin:0}
.lib .h .grow{flex:1}
.lib .h button{border:0;background:none;font-size:18px;color:var(--muted);padding:0 4px}
.lib .h button:hover{background:none;color:var(--ink)}
.lib .list{flex:1;overflow-y:auto;padding:10px}
.lib .item{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px}
.lib .item b{display:block;font-weight:600;font-size:12.5px}
.lib .item span{font-size:11.5px;color:var(--muted)}
.lib .item button{font-size:12px;padding:5px 10px}
.vtoast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);background:var(--navy-ink);color:#fff;font-size:12.5px;padding:9px 14px;border-radius:8px;opacity:0;transition:.25s var(--ease);z-index:70;pointer-events:none;max-width:calc(100% - 32px)}
.vtoast.on{opacity:1;transform:translate(-50%,0)}

/* ---- the login page ---- */
.vlogin{min-height:100vh;display:grid;grid-template-columns:1.15fr 1fr;background:var(--bg)}
.vlogin-brand{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 55%,var(--navy-ink) 100%);color:#fff;padding:44px 56px;display:flex;flex-direction:column}
.vlogin-brand .slash{position:absolute;right:-140px;top:-60px;width:260px;height:140%;background:linear-gradient(180deg,var(--flame),var(--amber));transform:skewX(-14deg);opacity:.95;animation:vsweep 1.1s var(--ease) both}
.vlogin-brand .slash.b{right:-230px;width:120px;animation:vsweepb 1.1s var(--ease) both .15s}
@keyframes vsweep{from{transform:skewX(-14deg) translateX(240px);opacity:0}to{transform:skewX(-14deg) translateX(0);opacity:.95}}
@keyframes vsweepb{from{transform:skewX(-14deg) translateX(240px);opacity:0}to{transform:skewX(-14deg) translateX(0);opacity:.35}}
.vlogin-brand .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse at 30% 40%,#000 20%,transparent 70%);mask-image:radial-gradient(ellipse at 30% 40%,#000 20%,transparent 70%)}
.vlogin .wordmark{display:flex;align-items:baseline;gap:2px;font-weight:700;letter-spacing:.14em;font-size:26px;position:relative;color:#fff}
.vlogin .wordmark i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--flame);margin-left:3px;transform:translateY(-14px)}
.vlogin .wordmark small{margin-left:12px;font-size:12px;letter-spacing:.18em;font-weight:500;opacity:.75}
/* The brand mark (planet + comet axis, white planet for dark surfaces) sits before the VoiceAxis wordmark. */
.vlogin .wordmark{align-items:center}
.vlogin .wordmark .mark{height:46px;width:auto;margin-right:12px;flex:none}
.vlogin .rise{opacity:0;animation:vrise .7s var(--ease) forwards}
.vlogin .d1{animation-delay:.15s}.vlogin .d2{animation-delay:.3s}.vlogin .d3{animation-delay:.45s}.vlogin .d4{animation-delay:.6s}.vlogin .d5{animation-delay:.8s}
.vlogin-brand h1{position:relative;font-size:38px;line-height:1.1;font-weight:600;letter-spacing:-.02em;margin-top:auto;padding-top:28px;max-width:540px;text-wrap:balance;color:#fff}
.vlogin-brand h1 em{font-style:normal;color:var(--amber)}
.vlogin-brand p{position:relative;margin-top:14px;max-width:480px;font-size:15px;opacity:.85}
.vlogin .chan{position:relative;margin-top:18px;display:flex;gap:8px;flex-wrap:wrap;max-width:560px}
.vlogin .chan span{font-size:12px;padding:5px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);display:inline-flex;gap:6px;align-items:center}
.vlogin .chan span i{width:6px;height:6px;border-radius:50%;background:var(--amber)}
.vlogin .call{position:relative;margin-top:22px;max-width:560px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.07);overflow:hidden}
.vlogin .call-h{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.1)}
.vlogin .call-h .av{width:30px;height:30px;border-radius:8px;background:var(--flame);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
.vlogin .call-h .who b{display:block;font-size:13px;font-weight:600}
.vlogin .call-h .who span{font-size:11px;opacity:.7}
.vlogin .call-h .grow{flex:1}
.vlogin .call-h .st{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:6px;color:var(--amber)}
.vlogin .call-h .st i{width:7px;height:7px;border-radius:50%;background:var(--flame);box-shadow:0 0 0 0 rgba(244,121,31,.6);animation:vbeacon 1.6s infinite}
.vlogin .call-h .tm{font-family:var(--mono);font-size:12px;opacity:.85;min-width:40px;text-align:right}
.vlogin .call-b{padding:12px 14px;display:flex;flex-direction:column;gap:8px;min-height:150px;justify-content:flex-end}
.vlogin .msg{max-width:88%;padding:8px 11px;border-radius:12px;font-size:13px;line-height:1.45;animation:vrise .35s var(--ease) both}
.vlogin .msg.agent{align-self:flex-start;background:rgba(255,255,255,.12);border-bottom-left-radius:4px}
.vlogin .msg.caller{align-self:flex-end;background:var(--flame);color:#fff;border-bottom-right-radius:4px}
.vlogin .msg .who{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.65;margin-bottom:2px}
.vlogin .msg .cur{display:inline-block;width:2px;height:12px;background:currentColor;vertical-align:-2px;margin-left:2px;animation:vblink .8s steps(1) infinite}
@keyframes vblink{50%{opacity:0}}
.vlogin .msg.out{align-self:center;background:rgba(22,163,74,.22);border:1px solid rgba(74,222,128,.4);color:#D5F5E0;font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px}
.vlogin .call-f{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid rgba(255,255,255,.1)}
.vlogin .call-f .lbl{font-size:11.5px;opacity:.75;min-width:130px}
.vlogin .call-f .lbl b{font-weight:600;opacity:1}
.vlogin .wave{flex:1;height:26px;display:flex;align-items:flex-end;gap:3px}
.vlogin .wave span{flex:1;height:100%;transform-origin:bottom;background:linear-gradient(180deg,var(--amber),var(--flame));border-radius:2px;opacity:.9;animation:vbar 1.6s ease-in-out infinite;transition:opacity .3s}
.vlogin .call.listening .wave span{animation-duration:2.6s;opacity:.35}
.vlogin .call.speaking .wave span:nth-child(odd){animation-duration:.9s}.vlogin .call.speaking .wave span:nth-child(3n){animation-duration:.7s}
.vlogin .wave span:nth-child(odd){animation-duration:1.9s}.vlogin .wave span:nth-child(3n){animation-duration:1.3s}.vlogin .wave span:nth-child(5n){animation-delay:.4s}
.vlogin .pulse{position:relative;margin-top:22px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:560px}
.vlogin .pulse div{border-left:2px solid rgba(255,255,255,.18);padding:2px 0 2px 12px}
.vlogin .pulse .k{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.vlogin .pulse .v{font-size:22px;font-weight:600;margin-top:2px;font-variant-numeric:tabular-nums}
.vlogin .pulse .v small{font-size:12px;font-weight:500;opacity:.7;margin-left:3px}
.vlogin-brand .foot{position:relative;margin-top:auto;padding-top:26px;font-size:12px;opacity:.6}
.vlogin-form{display:flex;align-items:center;justify-content:center;padding:40px 24px;background:var(--card)}
.vlogin-form .form-card{width:100%;max-width:400px;opacity:0;animation:vrise .7s var(--ease) forwards .5s}
.vlogin-form h2{font-size:24px;font-weight:600;letter-spacing:-.01em}
.vlogin-form .sub{color:var(--muted);margin-top:4px;margin-bottom:24px}
.vlogin-form label{display:block;font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.02em;margin:0 0 6px}
.vlogin-form .fld{margin-bottom:16px}
.vlogin-form .fld .row{display:flex;justify-content:space-between;align-items:center}
.vlogin-form .fld .row a{font-size:12px;font-weight:500}
.vlogin-form input[type=email],.vlogin-form input[type=password],.vlogin-form input[type=text]{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);font-size:14px}
.vlogin-form input:focus{outline:2px solid transparent;outline-offset:1px;border-color:var(--focus-border);box-shadow:var(--focus)}
.vlogin-form .btn{width:100%;justify-content:center;padding:12px 16px;border-radius:9px;font-size:14px;margin-top:6px}
.vlogin-form .note{margin-top:22px;font-size:12px;color:var(--faint);line-height:1.6;text-align:center}
.vlogin-form .note button.quiet{font-size:12px}
.vlogin-form .help{margin-bottom:12px}
.vlogin-form .dev-fill{margin-bottom:16px}
.vlogin-form .badge-shield{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:11.5px;background:var(--hair);padding:4px 9px;border-radius:999px}

/* ---- adaptive layouts: desktop from 1200, tablet 768 to 1199, phone under 768 ---- */
@media (max-width:1199px){
  .vshell.fill{height:auto;overflow:visible}
  .vshell.fill .page{display:grid}
  .vshell.fill .content{display:block;overflow:visible;padding:12px 16px 24px}
  .dash{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:auto;overflow:visible;gap:12px}
  .dash .w{grid-row:auto!important}
  .dash .stat.w{grid-column:span 3!important;min-height:118px}
  .dash .stat.live.w{grid-column:span 6!important}
  .dash .card.w{grid-column:span 3!important;min-height:300px;max-height:420px}
  .dash .w.wide{grid-column:span 6!important}
  .dash .chart{height:auto;min-height:240px}
  .vtop .kbtn{min-width:0}
}
@media (max-width:767px){
  .vshell{grid-template-columns:minmax(0,1fr);padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))}
  .vrailwrap{position:static}
  .vrailwrap .vrail{position:fixed;inset:0 auto 0 0;width:min(288px,84vw);height:auto;z-index:210;transform:translateX(-100%);visibility:hidden;
        transition:transform .18s ease,visibility 0s linear .18s;box-shadow:none;overscroll-behavior:contain}
  .vrail.open{transform:none;visibility:visible;transition:transform .18s ease,visibility 0s;box-shadow:14px 0 34px rgba(16,24,40,.35)}
  .vrail .lbl,.vrail.open .lbl{opacity:1}
  .vrail .sect,.vrail .foot>.lbl{height:auto}
  .vrail .nav-i .b{opacity:0}
  .vshell .side-scrim{display:block;position:fixed;inset:0;z-index:200;padding:0;border:0;border-radius:0;background:rgba(10,16,28,.42)}
  .vshell .side-scrim:hover{background:rgba(10,16,28,.42)}
  .vtop{padding:10px 14px;gap:8px;flex-wrap:nowrap}
  .vtop .nav-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;padding:0;border-radius:8px;background:var(--card);border:1px solid var(--line);color:var(--muted)}
  .vtop h1{font-size:15px}
  .vtop .crumb,.vtop .kbtn{display:none}
  .vtop .btn .t{display:none}
  .vtop .btn{padding:8px 10px;min-width:40px;justify-content:center}
  .vtabs{padding:0 14px}
  .vshell .page.with-rail{grid-template-columns:1fr}
  .vshell .content,.vshell.fill .content{padding:12px 12px 20px}
  .dash{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .dash .stat.w{grid-column:span 1!important;min-height:104px;padding:10px 12px}
  .dash .stat .v{font-size:22px}
  .dash .stat .k .win{display:none}
  .dash .stat.live.w{grid-column:span 2!important;flex-direction:column;align-items:stretch;gap:8px}
  .dash .stat.live .v{font-size:32px}
  .dash .card.w,.dash .w.wide{grid-column:span 2!important;min-height:0;max-height:none}
  .dash .card-h{padding:10px 14px}.dash .card-b{padding:12px 14px}
  .dash .chart{min-height:200px}
  .dash .donut{grid-template-columns:1fr;justify-items:center}
  .dash .dk{width:100%}
  .dash .tbl{max-height:380px}
  .editbar{padding:8px 12px;gap:8px}
  .editbar .txt{display:none}
  .lib{width:100%;top:auto;height:72vh;border-left:0;border-top:1px solid var(--line);border-radius:14px 14px 0 0;transform:translateY(100%)}
  .lib.open{transform:none}
  .vtoast{bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  .vtabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;height:calc(60px + env(safe-area-inset-bottom,0px));padding:0 6px env(safe-area-inset-bottom,0px);background:var(--navy-ink);border-top:1px solid rgba(255,255,255,.1);justify-content:space-around;align-items:stretch;
           --focus:var(--focus-on-dark);--focus-border:var(--focus-border-on-dark)}
  /* the bar runs to the screen's edges, so its ring is drawn inside each tab (lane U review) */
  .vtabbar a:focus-visible,.vtabbar button:focus-visible{outline:2px solid var(--focus-border);outline-offset:-4px;box-shadow:none}
  .vtabbar a,.vtabbar button{flex:1;border:0;background:none;color:rgba(255,255,255,.7);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10.5px;font-weight:500;position:relative;min-width:48px;padding:0;border-radius:0}
  .vtabbar a:hover,.vtabbar button:hover{background:none;color:#fff;border:0}
  .vtabbar svg{width:22px;height:22px}
  .vtabbar a.on{color:#fff}
  .vtabbar a.on:after{content:"";position:absolute;top:0;left:22%;right:22%;height:3px;border-radius:0 0 3px 3px;background:var(--flame)}
  .vtabbar .n{position:absolute;top:8px;left:calc(50% + 6px);font-size:9.5px;font-weight:700;font-style:normal;background:var(--flame);color:#fff;border-radius:999px;padding:0 5px;line-height:14px}
  .vlogin{grid-template-columns:1fr}
  .vlogin-brand{padding:28px 20px 32px}
  .vlogin-brand .grid{display:none}
  .vlogin-brand h1{font-size:28px;padding-top:16px}
  .vlogin .pulse{grid-template-columns:1fr 1fr;gap:10px}
  .vlogin-form{padding:24px 16px 32px}
}
@media (max-width:1199px) and (min-width:768px){.vlogin{grid-template-columns:1fr}.vlogin-brand{padding:32px 28px}}
@media (min-width:1800px){.vshell .content{padding-left:28px;padding-right:28px}.dash{gap:18px}.dash .card-h{padding:12px 20px}.dash .card-b{padding:16px 20px}.dash .stat{padding:16px 18px}}
/* A touch screen has no hover, so the rail never expands on its own there; it opens only as the
   drawer. The :not(.open) matters: the drawer IS the rail with .open, and a width forced to 64px
   left the open drawer with icons and no labels. */
@media (hover:none){.vrail:not(.open){width:64px!important;box-shadow:none!important}.vrail:not(.open) .lbl,.vrail:not(.open) .sect{opacity:0;height:0}}
@media (prefers-reduced-motion:reduce){.vrail,.lib,.vtoast{transition:none}.dash *,.vlogin *{animation-duration:.001s!important;animation-delay:0s!important}.vlogin .wave span,.dash .lane .wv i{animation:none;transform:scaleY(.6)}}


/* =====================================================================================
   Screen kit, October 2026 (docs/superpowers/specs/2026-10-01-screen-kit.md).
   The home page's visual language for every other screen. Two layers:
   1. The shared classes every page already uses (.card, table.data, .stat, .banner, .pill,
      .grid2, .sec-title) restyled here, so a page body picks up the look without a rewrite.
   2. New kit classes (vgrid, vcard, vstat, vtbl, vlist, vbars, vkv, vform, vempty, vsplit) for
      the pages that are rebuilt on the grid. All of it sits after the shell block on purpose.
   ===================================================================================== */
/* ---- layer 1: what every page already has ---- */
.vshell .content>.card,.vshell .content .card{border-radius:12px;padding:16px 18px;box-shadow:none}
.vshell .card+.card{margin-top:14px}
.vshell .card>h2,.vshell .card>div>h2{font-size:14px;font-weight:600;letter-spacing:-.01em}
.vshell .card>.sub{margin-bottom:12px}
.vshell .banner{border-radius:10px;padding:10px 14px}
.vshell .banner+.banner,.vshell .banner+.card{margin-top:12px}
.vshell table.data{font-size:12.5px}
.vshell .data th{font-size:10.5px;letter-spacing:.05em;padding:0 12px 8px 0;border-bottom:1px solid var(--hair)}
.vshell .data td{padding:9px 12px 9px 0;border-bottom:1px solid var(--hair)}
.vshell .data tr.rowlink:hover td,.vshell .data tbody tr:hover td{background:var(--hair)}
.vshell .table-scroll{overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.vshell .stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin:0 0 14px}
.vshell .stat{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:12px 14px;border-radius:12px;box-shadow:none}
.vshell .stat .k{font-size:11.5px;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0;margin:0}
.vshell .stat .v{font-size:24px;font-weight:600;letter-spacing:-.02em;margin-top:2px;line-height:1.1}
.vshell .stat.live{background:var(--navy-ink);border-color:var(--navy-ink);color:#fff;box-shadow:none;--focus:var(--focus-on-dark);--focus-border:var(--focus-border-on-dark)}
.vshell .stat.live .k,.vshell .stat.live .sub{color:rgba(255,255,255,.75)}
.vshell .stat.live .v,.vshell .stat.live .v small{color:#fff}
.vshell .tile{border-radius:12px;padding:12px 14px}
.vshell .tile .v{font-size:22px;font-weight:600}
.vshell .sec-title{margin:18px 0 8px}
.vshell .sec-title h2{font-size:13.5px;font-weight:600}
.vshell .pill{font-size:11.5px;padding:2px 9px}
.vshell .grid2{gap:14px}
.vshell .content>.help:first-child{margin-bottom:10px}

/* ---- layer 2: the kit ---- */
.vgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;align-items:stretch}
.vgrid>*{min-width:0;min-height:0}
.c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}.c7{grid-column:span 7}.c8{grid-column:span 8}.c9{grid-column:span 9}.c12{grid-column:span 12}
.vcard{background:var(--card);border:1px solid var(--line);border-radius:12px;min-width:0;display:flex;flex-direction:column;overflow:hidden;container-type:inline-size}
.vcard-h{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--hair);flex:none;flex-wrap:wrap}
.vcard-h h2,.vcard-h h3{font-size:13px;font-weight:600;margin:0}
.vcard-h .grow{flex:1}
.vcard-h a{font-size:12px;font-weight:500;white-space:nowrap}
.vcard-h .hint{font-size:12px;color:var(--faint);white-space:nowrap}
.vcard-b{padding:14px 16px;flex:1;min-height:0;display:flex;flex-direction:column;gap:10px}
.vcard-b>.sub{margin:0}
.vcard-f{padding:10px 16px;border-top:1px solid var(--hair);display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.vstat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.vstat .k{font-size:11.5px;font-weight:600;color:var(--muted);display:flex;justify-content:space-between}
.vstat .k .win{font-weight:400;color:var(--faint)}
.vstat .v{font-size:26px;font-weight:600;letter-spacing:-.02em;margin-top:2px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.vstat .v small{font-size:12px;font-weight:500;color:var(--muted);margin-left:5px}
.vstat .v small.up{color:var(--ok)}.vstat .v small.dn{color:var(--bad)}
.vstat .sub{font-size:12px;color:var(--faint);margin-top:3px}
.vstat .fill{margin-top:auto;padding-top:6px}
.vstat.live{background:var(--navy-ink);border-color:var(--navy-ink);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);--focus:var(--focus-on-dark);--focus-border:var(--focus-border-on-dark)}
.vstat.live .k,.vstat.live .k .win,.vstat.live .sub,.vstat.live .v small{color:rgba(255,255,255,.75)}
.vstat.live .v{color:#fff}
.vstat.live .beacon{position:absolute;right:12px;top:12px;width:10px;height:10px;border-radius:50%;background:var(--flame);box-shadow:0 0 0 0 rgba(244,121,31,.6);animation:vbeacon 1.8s infinite}
.vstat .meter{height:6px;border-radius:3px;background:var(--hair);overflow:hidden}
.vstat .meter i{display:block;height:100%;background:var(--navy);border-radius:3px}
.vstat .meter i.warn{background:var(--warn)}.vstat .meter i.bad{background:var(--bad)}
.vstat .spark{width:100%;height:28px;display:block;overflow:visible}
.vstat .spark path{fill:none;stroke:var(--c1);stroke-width:1.8;vector-effect:non-scaling-stroke}
.vstat .spark .area{fill:var(--accent-soft);stroke:none}
.vstat .spark circle{fill:var(--flame)}

/* a table inside a card: fixed columns, ellipsis, pinned header; optional columns drop as the card narrows */
.vtbl{overflow-y:auto;overflow-x:hidden;flex:1;min-height:0;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.vtbl.fit{overflow:visible}
.vtbl table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:12.5px}
.vtbl th{position:sticky;top:0;background:var(--card);text-align:left;font-size:10.5px;font-weight:600;color:var(--faint);letter-spacing:.05em;text-transform:uppercase;padding:8px 12px;border-bottom:1px solid var(--hair);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:1}
.vtbl td{padding:9px 12px;border-bottom:1px solid var(--hair);vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vtbl td.wrap{white-space:normal}
.vtbl td:first-child,.vtbl th:first-child{padding-left:16px}.vtbl td:last-child,.vtbl th:last-child{padding-right:16px}
.vtbl tr:last-child td{border-bottom:0}
.vtbl tbody tr.rowlink{cursor:pointer}
.vtbl tbody tr:hover td{background:var(--hair)}
.vtbl td.num,.vtbl th.num{text-align:right;font-variant-numeric:tabular-nums}
.vtbl td.acts{text-align:right}
@container (max-width:720px){.vtbl th.opt,.vtbl td.opt{display:none}}
@container (max-width:560px){.vtbl th.opt2,.vtbl td.opt2{display:none}}
@container (max-width:420px){.vtbl th.opt3,.vtbl td.opt3{display:none}}

/* rows with a severity stripe (attention, findings, checklists) */
.vlist{display:flex;flex-direction:column;min-height:0}
.vlist .in{display:grid;grid-template-columns:4px 1fr auto;gap:12px;padding:10px 16px 10px 12px;border-bottom:1px solid var(--hair);color:var(--ink);align-items:center}
.vlist .in:last-child{border-bottom:0}
.vlist .in:hover{background:var(--hair)}
.vlist .in .bar{border-radius:2px;background:var(--faint);align-self:stretch}
.vlist .in.warn .bar{background:var(--warn)}.vlist .in.ok .bar{background:var(--ok)}.vlist .in.info .bar{background:var(--c1)}.vlist .in.bad .bar{background:var(--bad)}.vlist .in.live .bar{background:var(--flame)}
.vlist .in b{display:block;font-weight:600;font-size:12.5px}
.vlist .in p{font-size:12px;color:var(--muted);margin-top:2px}
.vlist .in .tag{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);display:block}
.vlist .in.warn .tag{color:var(--warn)}.vlist .in.ok .tag{color:var(--ok)}.vlist .in.info .tag{color:var(--c1)}.vlist .in.bad .tag{color:var(--bad)}.vlist .in.live .tag{color:var(--flame-ink)}

/* horizontal bars with a label and a value */
.vbars{display:flex;flex-direction:column;gap:8px}
.vbars .r{display:grid;grid-template-columns:minmax(80px,120px) 1fr 48px;align-items:center;gap:10px;font-size:12px}
.vbars .r>span{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vbars .t{height:10px;background:var(--hair);border-radius:3px;overflow:hidden}
.vbars .t i{display:block;height:100%;background:var(--c1);border-radius:3px}
.vbars .t i.c2{background:var(--c2)}.vbars .t i.c3{background:var(--c3)}.vbars .t i.c4{background:var(--c4)}.vbars .t i.warn{background:var(--warn)}.vbars .t i.bad{background:var(--bad)}
.vbars .r b{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.vbars .note{font-size:11.5px;color:var(--muted)}

/* label / value pairs */
.vkv{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;font-size:12.5px;align-items:baseline}
.vkv dt{color:var(--muted);font-weight:500;margin:0}
.vkv dd{margin:0;min-width:0;overflow-wrap:anywhere}

/* forms: fields in a responsive grid, label above, help below; actions in a footer row */
.vform{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px 16px}
.vform .wide{grid-column:1/-1}
.vform .f>label{font-size:12px;font-weight:600;color:var(--ink)}
.vform .f .help{margin-top:2px}
.vactions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--hair);margin-top:4px}
.vactions .grow{flex:1}

/* empty states say why */
.vempty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted);font-size:12.5px;padding:22px 16px;line-height:1.5;gap:8px}
.vempty b{color:var(--ink);font-weight:600;font-size:13px}

/* a main column and a side column that stacks on a phone */
.vsplit{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;align-items:start}
.vsplit.wide{grid-template-columns:minmax(0,1fr) 380px}
.vsplit>.side{display:flex;flex-direction:column;gap:14px;position:sticky;top:64px}

/* segmented switch (filters, views) */
.vseg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--card)}
.vseg button{border:0;border-radius:0;background:none;color:var(--muted);font-weight:500;padding:6px 12px;font-size:12.5px}
.vseg button:hover{background:var(--hair);color:var(--ink)}
.vseg button.on{background:var(--navy);color:#fff}

/* a numbered step rail (wizards) and progress */
.vsteps{display:flex;gap:6px;flex-wrap:wrap}
.vsteps a,.vsteps button{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--muted);font-size:12px;font-weight:500}
.vsteps .n{width:18px;height:18px;border-radius:50%;background:var(--hair);color:var(--muted);font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.vsteps .on{border-color:var(--navy);color:var(--ink);font-weight:600}
.vsteps .on .n{background:var(--navy);color:#fff}
.vsteps .done .n{background:var(--ok-soft);color:var(--ok-ink)}
.vsteps .current{border-color:var(--flame);color:var(--ink);font-weight:600}
.vsteps .current .n{background:var(--flame);color:#fff}

@media (max-width:1199px){.vgrid{grid-template-columns:repeat(6,minmax(0,1fr))}.c7,.c8,.c9,.c12{grid-column:span 6}.c4,.c5,.c6{grid-column:span 6}.c2,.c3{grid-column:span 3}.vsplit,.vsplit.wide{grid-template-columns:1fr}.vsplit>.side{position:static}}
@media (max-width:767px){.vgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.c2,.c3{grid-column:span 1}.c4,.c5,.c6,.c7,.c8,.c9,.c12{grid-column:span 2}.vform{grid-template-columns:1fr}.vkv{grid-template-columns:1fr}.vkv dt{margin-top:6px}.vcard-h{padding:10px 14px}.vcard-b{padding:12px 14px}.vshell .content>.card,.vshell .content .card{padding:14px}.vseg{max-width:100%;overflow-x:auto}}

/* ---- home, October 2026 additions: the channel rows, the day chart's window / yesterday / now marks, the channel cell ---- */
.dash .chs{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.dash .chr{flex:1;display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 16px;border-bottom:1px solid var(--hair);min-height:0;min-width:0;color:var(--ink);opacity:0;animation:vrise .5s var(--ease) forwards}
.dash .chr:nth-child(2){animation-delay:.1s}.dash .chr:nth-child(3){animation-delay:.2s}.dash .chr:nth-child(4){animation-delay:.3s}
.dash .chr:last-child{border-bottom:0}
.dash .chr:hover{background:var(--hair)}
.dash .chr .ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff}
.dash .chr .ic svg{width:17px;height:17px}
.dash .chr .t{min-width:0}
.dash .chr .t b{display:block;font-weight:600;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash .chr .t span{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash .chr .n{text-align:right}
.dash .chr .n b{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.dash .chr .n span{font-size:11px;font-weight:600;color:var(--ok);display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.dash .chr .n span:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}
.dash .chr .n span.warn{color:var(--warn)}.dash .chr .n span.warn:before{background:var(--warn)}
.dash .chart .window{fill:var(--accent-soft);opacity:.6}
.dash .chart .yday{fill:none;stroke:var(--faint);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:vdraw 1.4s var(--ease) forwards .9s}
.dash .chart .nowline{stroke:var(--flame);stroke-width:2;opacity:0;animation:vfade .4s ease forwards 1.2s}
.dash .chart .nowlbl{fill:var(--flame);font-weight:600;opacity:0;animation:vfade .4s ease forwards 1.2s}
.dash .chn{display:inline-flex;align-items:center;gap:6px;font-size:12px;white-space:nowrap}
.dash .chn i{width:8px;height:8px;border-radius:2px;flex:none}
.dash .lane .ch{width:8px;height:8px;border-radius:2px;flex:none}
@media (prefers-reduced-motion:reduce){.dash .chr,.dash .chart .yday,.dash .chart .nowline,.dash .chart .nowlbl{animation:none;opacity:1;stroke-dashoffset:0}}
/* a stat's sub-line never wraps into the number: one line, ellipsis */
.dash .stat .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash .stat.live .sub{white-space:normal}
/* the widget library is hidden, not merely off-screen, until it opens */
.lib{visibility:hidden;transition:transform .25s var(--ease),visibility 0s linear .25s}
.lib.open{visibility:visible;transition:transform .25s var(--ease),visibility 0s}
@container (max-width:460px){.dash .tbl th.opt3,.dash .tbl td.opt3{display:none}}
.dash .tbl td .pill{max-width:100%;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:middle;white-space:nowrap}
/* the router moves focus to the first heading on navigation; no ring on a heading that is not interactive */
.vlogin-brand h1:focus,.vtop h1:focus,.vlogin-form h2:focus{outline:none}

/* ---- kit gaps reported by the builders (1 Oct 2026) ---- */
/* the retired sidebar's .side rules (sticky 100vh column; a fixed, translated drawer under 720px)
   must not reach the kit's side column */
.vsplit>.side,.vsplit>aside.side{position:sticky;top:64px;height:auto;width:auto;background:none;border:0;padding:0;overflow:visible;transform:none;visibility:visible;z-index:auto;box-shadow:none;transition:none}
/* a card never clips its own popover menus; the table inside keeps its own scroll */
.vcard{overflow:visible}
.vcard>.vcard-h{border-radius:12px 12px 0 0}
/* a bare <input> gets the base control styling too */
input:not([type]){font:inherit;font-size:13px;padding:8px 11px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);width:100%}
/* its border shorthand ties input:focus-visible (0,1,1) and comes later, so an untyped input lost the ring's
   edge and kept only the 20% halo (lane U review sweep, Settings): the focus edge is restated above it */
input:not([type]):focus-visible{border-color:var(--focus-border)}
@media (max-width:1199px){.vsplit>.side,.vsplit>aside.side{position:static}}
@media (max-width:767px){.vcard-h .hint,.dash .card-h .hint{white-space:normal}}
/* ---- more kit gaps from the builders (agents-2) ---- */
a.btn.ghost,.vshell a.btn.ghost{background:var(--card);color:var(--ink);border-color:var(--line)}
a.btn.ghost:hover{background:var(--hair);color:var(--ink)}
/* the page, not .content, scrolls on an ordinary screen, so a sticky side column can stick */
.vshell:not(.fill) .content{overflow:visible}
/* a vempty's inline emphasis and links stay in the sentence */
.vempty{display:block;text-align:center}
.vempty b{display:block;margin-bottom:4px}
/* a card part that should take only its content's height */
.vcard-b.auto,.vtbl.auto{flex:none}
/* a sticky side column taller than the window scrolls on its own */
.vsplit>.side,.vsplit>aside.side{max-height:calc(100vh - 80px);overflow-y:auto;scrollbar-width:thin}
@media (max-width:1199px){.vsplit>.side,.vsplit>aside.side{max-height:none;overflow:visible}}
/* ---- kit gaps from the agents-1 family ---- */
.vstat.live .k,.dash .stat.live .k{padding-right:22px}
.banner>div,.banner>span{display:inline}
@media (max-width:767px){.vcard-h .vseg{flex-wrap:wrap;overflow:visible}}
.vsteps span.n+span{font-weight:inherit}
.vsteps .blocked{opacity:.55;cursor:not-allowed}
.vstack{display:flex;flex-direction:column;gap:14px}
/* ---- kit gaps from the monitor family ---- */
.vcard>.vcard-b:has(+.vtbl){flex:none}
.vcard-b>.vtbl.fit{flex:none}
.vstat .beacon{position:absolute;right:12px;top:12px;width:10px;height:10px;border-radius:50%;background:var(--flame);box-shadow:0 0 0 0 rgba(244,121,31,.6);animation:vbeacon 1.8s infinite}
.vcard-b .sub,.vcard-b>.sub{font-size:12px;color:var(--muted);line-height:1.55}
@media (max-width:767px){.vstat .k .win{display:none}.vtop:has(.vseg){flex-wrap:wrap}}
/* ---- kit gaps from the org family ---- */
.btn.flame,button.flame,a.btn.flame{background:var(--flame);border-color:var(--flame);color:#fff}
.btn.flame:hover,button.flame:hover,a.btn.flame:hover{background:var(--flame-ink);border-color:var(--flame-ink);color:#fff}
/* in a card with several parts only the last body grows; anything beside a table or an empty state is content-sized */
.vcard>.vcard-b:not(:last-child){flex:none}
.vtbl td.acts{white-space:normal}
.vtbl td.acts button,.vtbl td.acts a{white-space:nowrap}
select.inline{width:auto;display:inline-block;padding:4px 8px;font-size:12px}
.vcard>.vcard-h+.vcard-h,.vcard>.vcard-b+.vcard-h,.vcard>.vtbl+.vcard-h{border-top:1px solid var(--hair)}


/* ================================================================ screens/agents.css (merged at integration, 2 Oct 2026) */
/* Screen family "agents": page-specific rules written by its builder (October 2026 redesign). Kit classes come from app.css; this file only adds what the family needs. Merged into app.css at integration. */

/* ---- shared by the family ---- */
/* A banner above the grid, with the gap the grid would have given it. */
.vshell .content>.ag-top{margin-bottom:14px}
/* A banner INSIDE a vcard, between the header and the table. */
.vcard>.ag-note{margin:12px 16px 4px;font-size:12px}
/* Cards stacked in a column with the grid's gap, where there is no vgrid to give it. */
.ag-stack{display:flex;flex-direction:column;gap:14px;min-width:0}

/* ---- Agents: the list ---- */
/* Kit gap: the live tile's beacon sits where .k's window label ends; keep the label clear of it. */
.vstat.live .k{padding-right:20px}
/* The template collections switch wraps rather than clipping inside the card header. */
.ag-seg{flex-wrap:wrap}
.ag-who{display:flex;align-items:center;gap:11px;min-width:0}
.ag-who .avatar{flex:none}
.ag-name{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.ag-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.ag-title a{font-weight:600;color:var(--ink)}
.ag-purpose{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44ch}
.ag-tbl td.acts{line-height:1.9}
.ag-tbl td.acts .quiet,.ag-tbl td.acts .danger-q{font-size:12.5px;padding:2px 6px}
.ag-tbl .chset{flex-wrap:wrap}
.ag-tbl .vcard-f select{width:auto;padding:4px 8px;font-size:12px}
.ag-tpls{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.ag-tpl{border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:var(--card-2);display:flex;flex-direction:column;gap:8px;min-width:0}
.ag-tpl b{font-size:13px;font-weight:600}
.ag-tpl p{flex:1;margin:0}
.ag-tpl button{align-self:flex-start}

/* ---- the describe door and the start doors (shared with the wizard) ---- */
.ag-door .vcard-b textarea{min-height:76px}
.ag-door .banner{margin:0}
.ag-door .q{display:flex;flex-direction:column;gap:8px}
.ag-door .q b{font-size:13px}
.ag-door .q input[type=text]{max-width:520px}
.ag-door .drafting{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ag-doors .vseg{flex-wrap:wrap;max-width:100%}
.ag-doors .vseg button{white-space:nowrap}

@media (max-width:767px){
  .ag-purpose{max-width:100%}
  .ag-tbl td.acts{line-height:2}
  .ag-door .q input[type=text]{max-width:none}
  /* The three doors as a full-width row of three on a phone; each label still fits at 375. */
  .ag-doors .vseg{display:flex;width:100%}
  .ag-doors .vseg button{flex:1;padding:6px 6px;font-size:12px}
}

/* ---- the guided journey (AgentWizard) ---- */
.wiz-split{margin-top:14px}
.wiz-main{min-width:0}
/* The step cards keep their .card markup (4,100 lines of steps); the kit's card look is given
   here: the h2 that opens each one reads as a vcard-h strip, and the cards stack with the grid's
   gap. A card whose first child is a fold button or a flex header is left to its own rules. */
.wiz-main>.card+.card,.wiz-main .card+.card{margin-top:0}
.wiz-main .card>h2:first-child{margin:-16px -18px 14px;padding:10px 16px;border-bottom:1px solid var(--hair);font-size:13px;font-weight:600}
.wiz-main .card>h2:first-child+.sub{margin-top:-4px}
.wiz-main details>summary{cursor:pointer;font-size:13px}
.wiz-main details>.card{margin-top:10px}
.wiz-main .swatch-row{flex-wrap:wrap}
.wiz-side .vactions{border-top:0;padding-top:2px;margin-top:0}
.wiz-side .banner{margin:0}
.wiz-side .banner>div{flex:1}
/* The topbar wraps to two rows on this screen, so the sticky side sits lower than the kit's 64px. */
.wiz-split>.side{top:76px}

/* ---- the step rail (Stepper) on vsteps: the Body fragment's step-n / step-t spans ---- */
.vsteps{margin:2px 0 0}
.vsteps>span{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--muted);font-size:12px;font-weight:500}
.vsteps .step-n{width:18px;height:18px;border-radius:50%;background:var(--hair);color:var(--muted);font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none;margin:0}
.vsteps .done .step-n{background:var(--ok-soft);color:var(--ok-ink)}
.vsteps .current .step-n{background:var(--flame);color:#fff}
.vsteps .blocked{border-style:dashed}
.vsteps .blocked .step-n{background:var(--warn-soft);color:var(--warn-ink)}
.vsteps .step-t{display:inline-flex;flex-direction:column;line-height:1.2;min-width:0;text-align:left}
.vsteps .step-t b{font-size:12px;font-weight:inherit}
.vsteps .current .step-t b{font-weight:600}
.vsteps .step-t span{display:none}
.vsteps.vertical{flex-direction:column;align-items:stretch}
.vsteps.vertical .step-t span{display:block;font-size:11px;color:var(--faint);font-weight:400}
@media (max-width:767px){
  .vsteps{gap:5px}
  .vsteps a,.vsteps button,.vsteps>span{padding:5px 8px}
  /* On a phone the pills carry a number each and a label only on the current step. */
  .vsteps a:not(.current) .step-t,.vsteps button:not(.current) .step-t,.vsteps>span:not(.current) .step-t{display:none}
  .wiz-side .vkv{grid-template-columns:max-content 1fr}
}

/* The wizard's topbar actions: seven controls that a desk lays out in the bar (display:contents).
   The shell's phone bar does not wrap, so there they become a strip that scrolls sideways and
   keeps at most three fifths of the bar -- the title keeps the rest instead of a letter a line. */
.wiz-acts{display:contents}
@media (max-width:767px){
  .wiz-acts{display:flex;flex:0 1 auto;min-width:0;max-width:42%;overflow-x:auto;flex-wrap:nowrap;gap:6px;align-items:center;scrollbar-width:none;margin-left:auto}
  .wiz-acts::-webkit-scrollbar{display:none}
  .wiz-acts>*{flex:none}
  .wiz-acts .btn,.wiz-acts button.ghost,.wiz-acts a.btn{padding:6px 10px;font-size:12px;white-space:nowrap}
  .wiz-acts .chips{flex-wrap:nowrap}
  /* The three doors wrap inside their switch rather than clipping at the card edge. */
  .ag-doors .vseg{flex-wrap:wrap}
  .ag-doors .vseg button{flex:1 1 auto}
}

/* Kit gap: the kit's side column is <aside class="side">, and app.css still carries the retired
   sidebar's .side rules (padding, border-right, 100vh, and under 720px the fixed, translated
   drawer), which reach it. Neutralised here at every width; fold into app.css beside .vsplit. */
.vshell .vsplit>aside.side{padding:0;border:0;height:auto;overflow:visible;background:none;gap:14px}
@media (max-width:1199px){.vshell .vsplit>aside.side{position:static}}
@media (max-width:720px){
  .vshell .vsplit>aside.side{position:static;transform:none;visibility:visible;width:auto;left:auto;top:auto;bottom:auto;z-index:auto;transition:none;box-shadow:none;overflow-y:visible}
}

/* ---- Knowledge base ---- */
.ag-kb{margin-bottom:14px}
.ag-kb-ask{display:flex;gap:8px;align-items:center}
.ag-kb-ask input{flex:1;min-width:0}
.ag-kb-ask button{flex:none}
.ag-kb-text{min-height:200px}
.vempty .btn{margin-top:6px}
.vcard-b .kbhit{margin:0}

/* ---- the partner's agent pages ---- */
/* The lock on the partner agent page (was the page's own <style>): the five categories, named and
   empty, drawn as a hatched card so it reads as a decision rather than a broken section. */
.locked{border:1px dashed var(--line);border-radius:12px;padding:16px 18px;background:repeating-linear-gradient(135deg,transparent,transparent 9px,color-mix(in srgb,var(--line) 45%,transparent) 9px,color-mix(in srgb,var(--line) 45%,transparent) 10px)}
.locked .lh{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--muted)}
.lock-rows{display:grid;gap:8px;margin-top:14px}
.lock-row{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--faint)}
.lock-name{width:150px;flex:none}
.lock-bar{height:8px;border-radius:3px;background:var(--hair);border:1px solid var(--line);flex:1}
.lock-foot{margin-top:14px;max-width:70ch}
@media (max-width:767px){.lock-name{width:110px}}


/* ================================================================ screens/agents2.css (merged at integration, 2 Oct 2026) */
/* Screen family "agents2" (advanced builder and managed agents): page-specific rules written by its builder (October 2026 redesign). Merged into app.css at integration. */

/* =====================================================================================
   The advanced builder (Pages/AgentBuilder.razor). A vsplit: the five-tab editor on the left,
   a sticky side card on the right with the primary button, the facts and the readiness panel.
   Flame marks the one primary action (.ab-primary) and nothing else on the page.
   ===================================================================================== */

/* kit gap: aside.side of a vsplit also matches the LEGACY sidebar rule `.side` (app.css line 24:
   padding, border-right, height:100vh, overflow-y:auto) and, below the old shell's narrow
   breakpoint, its off-canvas drawer rule (position:fixed, translated off screen, visibility
   hidden) -- so a detail page's side column sat 14px low on a desk and vanished on a phone.
   Reset here at a higher specificity than `.side`; belongs in app.css beside .vsplit>.side. */
.vsplit>.side{position:sticky;top:64px;left:auto;right:auto;bottom:auto;height:auto;width:auto;z-index:auto;
              transform:none;visibility:visible;transition:none;border-right:0;padding:0;background:transparent;
              overflow:visible;box-shadow:none;overscroll-behavior:auto}

/* kit gap: the legacy `.content{overflow:auto}` (app.css line 357) makes .content a scroll
   container, so a sticky side column measures its top:64px against .content's own edge -- it sat
   64px below the main column on every detail page and never stuck, because .content itself
   never scrolls (the document does). The shell's fill pages keep their own overflow. */
.vshell:not(.fill) .content{overflow:visible}

/* the split: the side column scrolls on its own when it is taller than the window, because a
   sticky column taller than the viewport hides its bottom until the page ends */
.ab-split{align-items:start}
.ab-split>.ab-main{min-width:0;display:flex;flex-direction:column;gap:14px}
.ab-split>.side{max-height:calc(100vh - 78px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.ab-split>.side>*{flex:none}
.ab-split>.side>.card{margin:0;padding:14px 16px;border-radius:12px}
.ab-split>.side>.card h2{font-size:13px}
/* the readiness legs table has six columns; in a 380px column it scrolls sideways rather than
   folding every cell to a word a line. Desk only: once the split stacks, a min-width here would
   become the column's min-content and push the page wider than a phone */
.vsplit>.side{min-width:0}
@media (min-width:1200px){.ab-split>.side .table-scroll table{min-width:540px;font-size:12px}}

/* kit gap: the kit styles button.ghost but not a.btn.ghost, so a ghost LINK in the top bar
   rendered navy. Stated here for the two pages that use one; belongs in app.css */
a.btn.ghost{background:var(--card);color:var(--ink);border-color:var(--line)}
a.btn.ghost:hover{background:var(--hair);color:var(--ink);border-color:var(--line)}

/* the head card: the name written straight into the page, the version menu beside it */
.ab-head .vcard-b{gap:4px}
.ab-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.ab-title .name-in{flex:1 1 200px;min-width:0;max-width:none;font-size:20px}
.ab-title .ab-ver{position:relative;display:inline-flex}
.ab-head .purpose-in{padding:2px 0 0}

/* the tabs: one segmented switch, navy on the active tab (the kit's own), scrolling on a phone */
.ab-tabs{align-self:flex-start;max-width:100%}
.ab-tabs button{white-space:nowrap}

/* a card body reads as one column; sub-sections inside it carry a small heading */
.ab-main .vcard-b>.sub{margin:0}
.ab-main .vcard-b>textarea{width:100%}
.ab-sec{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.ab-sec h4{font-size:12.5px;font-weight:600;margin:0}
.ab-sec .grow{flex:1}
.ab-main .vcard-b .rec{margin-top:0}
.ab-main .vcard-b .rec+.rec{margin-top:8px}
.ab-main .vcard-b>.banner{margin:0}
.ab-main .vcard-b>.chips{margin:0}
.ab-main .vcard-b>.f{max-width:none}

/* the side card: the flame primary, then the facts */
.ab-side .vcard-b{gap:12px}
.ab-side .vkv{gap:5px 14px;font-size:12px}
.ab-side .vkv dd.mono{font-family:var(--mono);font-size:11.5px}
.ab-side .chset{flex-wrap:wrap}
.ab-side .ab-stack{display:flex;flex-direction:column;gap:8px}
.ab-side .ab-stack .btn{justify-content:center}
.btn.ab-primary,button.ab-primary{background:var(--flame);border-color:var(--flame);color:#fff}
.btn.ab-primary:hover,button.ab-primary:hover{background:var(--flame-ink);border-color:var(--flame-ink);color:#fff}
.btn.ab-primary:disabled{background:var(--flame);border-color:var(--flame)}

/* an expanded test row carries a form: wrap it and let it breathe */
.vtbl td.wrap{white-space:normal;overflow:visible;text-overflow:clip}
.vtbl td.wrap .help{white-space:normal}
.vtbl tr.open-row td{background:var(--card-2)}
.vtbl tr.open-row:hover td{background:var(--card-2)}

/* the ListEditor's "nothing here yet": a quieter vempty, because the list sits inside a card that
   already has a heading and the row of controls under it */
.vempty.le-empty{padding:12px 8px;font-size:12px}

/* the tester drawer sits above the phone tab bar (both were z-index 40) and its leg switch is one
   segmented switch that fills the foot rather than a flame-underlined tab strip */
.tester{z-index:45}
.tester-foot .vseg{display:flex}
.tester-foot .vseg button{flex:1;justify-content:center}

/* =====================================================================================
   The managed voice flow (Pages/ManagedAgents.razor, ManagedPackages.razor, ManagedPackage.razor).
   Their flash, step rail, drawer and kv classes stay in app.css; what is here is the drawer row
   inside a kit table and the odd alignment.
   ===================================================================================== */
/* kit gap: a vcard is a flex column whose vcard-b, vtbl and vempty all carry flex:1 with a zero
   basis. Alone that is fine; in a vgrid the card's height becomes definite (align-items:stretch)
   and TWO such parts -- an intro body above a table, or a table above a form -- split the height
   equally whatever their content, so the intro balloons and the table is squeezed and overflows.
   On these pages every part is content-sized. Belongs in app.css as the rule for a multi-part card. */
.vgrid.mg>.vcard>.vcard-b,.vgrid.mg>.vcard>.vtbl,.vgrid.mg>.vcard>.vempty,
.mg-main .vcard>.vcard-b,.mg-main .vcard>.vtbl,.mg-main .vcard>.vempty,.mg-side .vcard>.vcard-b{flex:none}

.vtbl tr.drawer-row td{padding:0 12px 12px;white-space:normal;overflow:visible;background:transparent}
.vtbl tr.drawer-row:hover td{background:transparent}
.vtbl tr.pick{cursor:pointer}
.vtbl tr.open td{background:var(--hair)}
.vtbl td .help{white-space:normal}
.vtbl td.acts .quiet,.vtbl td.acts .danger-q{padding:2px 6px}
.mg-lead{display:flex;flex-direction:column;gap:2px;min-width:0}
.mg-lead .sub{margin:0}
.mg-side .vcard-b .steps.vertical{margin:0}
.vcard-b>.steps{margin-bottom:0}
.vcard-b>.actions{margin-top:4px}
.vcard-b>.rec{margin-top:0}
.vcard-b>.drawer{margin:0}
.vempty .btn{margin-top:4px}
.vcard-b .vform .fact{padding-top:0}
.mg-pills{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

@media (max-width:1199px){
  .vsplit>.side{position:static}
  .ab-split>.side{max-height:none;overflow:visible}
}
@media (max-width:767px){
  .ab-title .name-in{font-size:18px}
  .ab-split>.side>.card{padding:12px 14px}
}


/* ================================================================ screens/campaigns.css (merged at integration, 2 Oct 2026) */
/* Screen family "campaigns": page-specific rules written by its builder (October 2026 redesign). Kit classes come from app.css; this file only adds what the family needs. Merged into app.css at integration. */

/* ---- the Campaigns home (Pages/Campaigns.razor) ---- */
/* The list card must not clip the row's ⋯ menu (the kit's vcard clips its overflow). */
.vcard.sch-list{overflow:visible}
.sch-list .vtbl.fit{overflow:visible}
.sch-list .vtbl th{position:static}
.sch-list td.wrap{white-space:normal;overflow-wrap:anywhere}
.sch-list .sch-name b{font-weight:600;color:var(--ink)}
.sch-list .sch-name:hover b{color:var(--accent)}
.sch-list .pill{margin-left:6px;vertical-align:middle}
.sch-list .sch-cell{overflow:hidden;text-overflow:ellipsis}
.sch-list .prog{min-width:0}
.sch-list .prog-k{white-space:normal}
.sch-list td.mute{color:var(--muted)}
.sch-list .sch-now{min-width:0;font-size:12.5px;line-height:1.4}
.sch-list .sch-more{display:inline-block}
.sch-list .vcard-f{display:flex;flex-direction:column;align-items:flex-start;gap:4px;line-height:1.5}
.sch-foot-details summary{cursor:pointer;color:var(--muted);font-weight:500;list-style:none;padding:1px 0}
.sch-foot-details summary::-webkit-details-marker{display:none}
.sch-foot-details summary::after{content:" \25B8";color:var(--faint);font-size:10px}
.sch-foot-details[open] summary::after{content:" \25BE"}
.sch-foot-details summary:hover{color:var(--ink)}
.sch-foot-details>div{margin-top:4px;max-width:88ch}
/* the week lives inside a card body now: the board keeps its own padding out of the way */
.sch-weekcard .vcard-b{padding:12px 16px 14px}
.sch-weekcard .sch-tl-wrap{padding:0;margin:0 -2px}
.sch-weekcard .vcard-b>.help{margin-top:8px}
.vstat .meter i{transition:width .3s var(--ease,ease)}
.sch-home .vcard-h .sch-hint{white-space:normal;flex:1 1 200px;min-width:0}
.sch-list td.sch-nowcell{overflow-wrap:normal}

/* ---- the planner (Pages/CampaignPlanner.razor): the setup on the left, the sentence and the week sticky on the right ---- */
.sch-steps{margin-bottom:14px}
.sch-steps button{cursor:pointer}
.sch-steps button:hover{background:var(--hair);color:var(--ink)}
.sch-steps .done .n{font-size:10px}
.vsplit.sch-planner{grid-template-columns:minmax(0,1fr) 420px}
.sch-plan-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.sch-planner .sch-sec{scroll-margin-top:72px}
.sch-planner .sch-sec:focus{outline:2px solid transparent;outline-offset:2px;box-shadow:var(--focus)}
.sch-planner .vcard-h h3{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.sch-planner .vcard-h .hint{white-space:normal;text-align:right;flex:1 1 160px;min-width:0}
.sch-planner .vcard-b>.help{margin:0}
.sch-planner h4.sch-sub{font-size:12.5px;font-weight:600;margin:6px 0 0!important;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.sch-planner h4.sch-sub .help{font-weight:400}
.sch-planner .vempty.sch-drop{padding:26px 16px;border:1px dashed var(--line);border-radius:10px;background:var(--card-2,var(--bg))}
.sch-planner .vempty.sch-drop .sch-import-acts{justify-content:center;margin-top:6px}
.sch-planner .vseg button:disabled{opacity:.5}
.sch-planner .sch-plan-side .vempty{padding:18px 8px}
.sch-planner .sch-summary .sch-sentence{font-size:15px;line-height:1.95}
.sch-planner .sch-what-h .hint{white-space:nowrap;flex:none;text-align:center}
.sch-planner .sch-foot{flex-direction:column;align-items:stretch;gap:8px}
.sch-planner .sch-foot .sch-acts{margin:0;justify-content:flex-end}
.sch-planner .sch-foot .help{font-size:12px}
.sch-planner .sch-col{height:140px}
/* KIT GAP: app.css still carries the retired sidebar's rules on `.side` (a 100vh sticky column with its
   own padding and border, and under 768px a fixed drawer translated off the screen). They land on the
   kit's `vsplit > aside.side` too, so the planner's side column is reset here. */
.vsplit.sch-planner>.side{position:sticky;top:64px;left:auto;bottom:auto;height:auto;width:auto;padding:0;border:0;
  background:none;overflow:visible;transform:none;visibility:visible;transition:none;z-index:auto;box-shadow:none}
/* the one flame mark once the plan is whole: the button that starts it */
.sch-planner button.sch-go:not(:disabled){background:var(--flame);border-color:var(--flame);color:#fff}
.sch-planner button.sch-go:not(:disabled):hover{background:var(--c4,var(--flame));border-color:var(--c4,var(--flame))}
@media (max-width:1199px){.vsplit.sch-planner{grid-template-columns:1fr}.vsplit.sch-planner>.side{position:static}}

/* ---- the running campaign (Pages/CampaignLive.razor): a stat band, the plan, the people ---- */
/* the status tile keeps the .sch-status / .sch-now selectors the browser verify reads; app.css's row rules are reset */
.vstat.sch-status{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:12px 14px;border-top:1px solid var(--line)}
.vstat.sch-status .k{display:flex;justify-content:space-between;gap:8px;color:var(--muted)}
.vstat.sch-status.live .k{color:rgba(255,255,255,.75)}
.vstat.sch-status.live{border-top-color:var(--navy-ink)}
.vstat.sch-status .v.sch-statusv{font-size:20px;white-space:normal;overflow:visible;line-height:1.25}
.vstat.sch-status .sch-now{min-width:0;gap:9px;align-items:baseline}
.vstat.sch-status .sch-now .sch-dot{position:relative;top:-2px}
.vstat.sch-status.live .sch-now .sch-dot{background:var(--flame)}
.vstat.sch-status .sub{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vstat .v.sch-when{font-size:20px;white-space:normal;overflow:visible;line-height:1.25}
.sch-live .sch-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0}
.sch-live .sch-tile{padding:10px 12px;gap:2px}
.sch-live .sch-tile .k{font-size:11px;line-height:1.3;display:block}
.sch-live .sch-tile .v{font-size:20px}
.sch-live .sch-tile b{font-weight:600}
.sch-live .sch-tile b.ok{color:var(--ok)} .sch-live .sch-tile b.warn{color:var(--warn)} .sch-live .sch-tile b.bad{color:var(--bad)}
.sch-live .sch-tiles-note{margin:-6px 0 0}
.sch-live .sch-plancard .sch-sentence{margin:0}
.sch-live .sch-status-f{justify-content:flex-end}
.sch-live .sch-status-acts{display:flex;flex-wrap:wrap;gap:6px}
.sch-live .sch-status-acts button{padding:6px 11px}
.sch-live .sch-peoplecard .vtbl td.wrap{white-space:normal;overflow-wrap:anywhere}
.sch-live .sch-peoplecard td.ok{color:var(--ok)} .sch-live .sch-peoplecard td.warn{color:var(--warn)}
.sch-live .sch-peoplecard .sch-inline{margin-left:4px}
.sch-live .sch-peoplecard td.sch-num{white-space:normal}
.sch-live .sch-peoplecard td.sch-num>span{white-space:nowrap}
.sch-live .vcard-f.sch-more-row{margin:0;justify-content:space-between}
.sch-live .vcard-f.sch-more-row .help{flex:1 1 240px;line-height:1.5}
@media (max-width:767px){.sch-live .sch-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.sch-live .sch-status-f{justify-content:flex-start}.vstat .v.sch-when,.vstat.sch-status .v.sch-statusv{font-size:17px}}

/* ---- a single outbound call (Pages/Outbound.razor) ---- */
.ob-page .vcard-h .hint{white-space:normal;flex:1 1 220px;min-width:0;text-align:right;font-size:13px}
.ob-place .vcard-b .banner{margin:0}
.ob-place .vempty span{max-width:60ch}
.ob-foot{justify-content:flex-end}
.ob-foot .help{flex:1 1 220px}
/* the one flame mark on this screen: the button that dials */
.ob-page button.ob-go:not(:disabled){background:var(--flame);border-color:var(--flame);color:#fff}
.ob-page button.ob-go:not(:disabled):hover{background:var(--c4,var(--flame));border-color:var(--c4,var(--flame))}
.ob-recent td.mute{color:var(--muted)}
.ob-place .vform input,.ob-place .vform select{width:100%;box-sizing:border-box;padding:9px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;background:var(--card);color:var(--ink)}
.ob-recent .vtbl td .pill{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;font-size:13px}
/* Task 8.14's sweep: the recent calls of a round-2 screen meet the 13 px floor, in sentence case (final.md §11.2) */
.ob-recent .vtbl table,.ob-recent .vtbl .num-m{font-size:13px}
.ob-recent .vtbl th{font-size:13px;text-transform:none;letter-spacing:0}
@media (max-width:767px){.ob-page .vcard-h .hint{display:none}}
@media (max-width:767px){.sch-planner .vcard-h .hint{display:none}.sch-planner .sch-what-h .hint{display:inline}.sch-steps{gap:4px}.sch-steps button{padding:5px 9px;font-size:11.5px}}


/* ================================================================ screens/monitor.css (merged at integration, 2 Oct 2026) */
/* Screen family "monitor": page-specific rules written by its builder (October 2026 redesign). Kit classes come from app.css; this file only adds what the family needs. Merged into app.css at integration. */

/* ---- Live calls: the floor ----
   One flame per screen: the live tile's beacon. The caller's colour in this family is therefore
   the kit's third categorical colour, not the flame, and the agent's is the first. */
.lc-band{margin-bottom:14px}
/* kit gap: .vstat.live's beacon sits over the tail of the window label; keep the label clear of it */
.lc-band .vstat.live .k{padding-right:18px}
/* kit gap: the home page hides a tile's window label on a phone (.dash .stat .k .win); vstat does not */
@media (max-width:767px){.vstat .k .win{display:none}}
.vcard.lc{cursor:pointer;transition:border-color .15s}
.vcard.lc:hover{border-color:var(--c2)}
.vcard.lc.on{border-color:var(--navy)}
.vcard.lc .vcard-h h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.vcard.lc .vcard-h .hint.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.lc-meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:12.5px}
.lc-meta .mono{font-family:var(--mono);font-size:12px}
.lc-meta .mute{color:var(--muted);font-size:12px}
.lc-warn{color:var(--warn)}
.lc-said{display:flex;flex-direction:column;gap:4px;font-size:12.5px;line-height:1.45;color:var(--ink)}
.lc-said>div{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.who-c,.who-a{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-right:5px}
.who-c{color:var(--c3)}
.who-a{color:var(--c1)}
.vcard.lc .vcard-f{font-variant-numeric:tabular-nums}
.vcard.lc .vcard-f .grow{flex:1}

/* the floor beside an open call: a vlist a click steps through */
.vlist .in[role=button]{cursor:pointer}
.vlist .in.on{background:var(--accent-soft)}
.vlist .in p .mono{font-family:var(--mono);font-size:11.5px}
.lc-turns{font-family:var(--mono);font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.mon-split>.side .vcard{max-height:calc(100vh - 92px);overflow:hidden}
.mon-split>.side .vlist{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}

/* ---- the monitor panel as a card ---- */
.vcard.mon .mon-head{margin-bottom:0;gap:8px 12px}
.vcard.mon .mon-head h3{display:flex;align-items:center;gap:6px;font-size:14px}
.vcard.mon .mon-head .mono{font-family:var(--mono);font-size:12.5px}
.vcard.mon .vcard-b{gap:12px}
.vcard.mon .mon-grid{margin:0}
.mon-tx-col{min-width:0;display:flex;flex-direction:column;gap:12px}
.vcard.mon .mon-lvl{margin:0}
.vcard.mon .mon-lvl .meter{margin-top:0}
.vcard.mon .mon-lvl .meter>span{background:var(--c3)}
.vcard.mon .mon-lvl .agent .meter>span{background:var(--c1)}
.vcard.mon .mon-lvl .human .meter>span{background:var(--ok)}
.vcard.mon .mon-tx{margin-top:0;max-height:58vh;min-height:160px;border:1px solid var(--hair);border-radius:10px;padding:12px 14px;background:var(--bg)}
.vcard.mon .mon-tx .vempty{padding:18px 12px}
.vcard.mon .trow.caller .who{color:var(--c3)}
.vcard.mon .trow.agent .who{color:var(--c1)}
.msec{padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.msec+.msec{margin-top:10px}
.msec h3{font-size:12.5px;font-weight:600;margin:0 0 4px}
.msec .vkv{margin-top:6px}
.vcard.mon .mon-ctl{min-width:0}
@media (max-width:767px){
  .vcard.mon .mon-tx{max-height:46vh}
  .vcard.mon .mon-head .hint{display:none}
}

/* ---- Call logs ---- */
/* kit gap: a .sub inside a vcard body or a section has no type rule of its own (only .card .sub does) */
.vcard-b>.sub,.msec .sub{font-size:12px;color:var(--muted);line-height:1.55;max-width:88ch}
.clog-top{gap:12px;padding-bottom:12px}
/* kit gap: .vcard-b and .vtbl are both flex:1 (basis 0), so in an auto-height card they split the
   height between them and the table overflows the card. A body that sits above a table must not grow. */
.vcard>.vcard-b:has(+.vtbl),.vcard-b.clog-top{flex:none}
/* and a table that sits inside a body must not grow either, or two of them split the body between them */
.vcard-b>.vtbl.fit{flex:none}
.clog-top .clog-bar{margin:0}
.clog-top .sub details{margin-top:4px}
.clog-top .sub summary{cursor:pointer;color:var(--accent);font-weight:500}
.clog-tbl .l2{display:block;font-size:10.5px;color:var(--faint);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clog-tbl td.wrap .pill{margin:0 4px 2px 0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:top}
.clog-tbl td.about{font-size:12px;color:var(--muted);line-height:1.45}
.clog-tbl td.about .clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clog-tbl td.about .next{color:var(--accent-ink);margin-left:6px}
.clog-tbl td.about .waiting{color:var(--faint);font-size:11px}
.clog-tbl td.num{font-variant-numeric:tabular-nums}
.vempty button.quiet{padding:0 2px;font-size:inherit;font-weight:600}

/* test sessions: a row per session, the detail folding out beneath it */
.ts .rows{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.ts .row{padding:9px 12px;cursor:pointer;font-size:12.5px;border-top:1px solid var(--hair)}
.ts .row:first-child{border-top:0}
.ts .row:hover,.ts .row.open{background:var(--hair)}
.ts .row-main{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.ts .row-main .when{font-family:var(--mono);font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.ts .row-main .mono{font-family:var(--mono);font-size:11.5px}
.ts .detail{padding:10px 12px 12px;border-top:1px solid var(--hair);background:var(--card);display:flex;flex-direction:column;gap:8px}
.ts .detail audio{width:100%;height:34px;display:block}
.ts .detail .transcript{margin-top:4px;border:1px solid var(--hair);border-radius:8px;padding:10px 12px;background:var(--bg)}
.ts .turn{font-size:12.5px;line-height:1.5}
.ts .turn b{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-right:6px;color:var(--c1)}
.ts .turn.user b,.ts .turn.caller b{color:var(--c3)}

/* the call drawer: facts as sections with label/value pairs; the caller in the kit's third colour */
.call-right .msec{margin:10px 0}
.call-right .msec .vkv{margin-top:8px}
.call-right .msec .vkv dt .pill{margin-left:6px}
.call-right .msec .vactions{margin-top:10px;padding-top:10px}
.call-right .msec .vtbl{margin-top:6px}
.call-right .msec .vlist .in{padding:6px 10px 6px 8px}
.call-right .msec .vlist .in p{margin:0;color:var(--ink)}
.call-modal .ctr-turn.caller .ctr-who{color:var(--c3)}
.call-modal .vempty{padding:32px 12px}

/* ---- Agent analytics ----
   Every panel is a vcard on the vgrid; the charts are the page's own divs and SVG, recoloured
   with the kit's categorical tokens (c1 first, then c2, c3, c4, then c-other). */
.analytics .vcard-b>.sub{margin-bottom:2px}
.analytics .vcard-b .banner{margin:0}
.analytics .vcard-b>.vempty{padding:26px 12px}
.analytics .vcard-b>.help{font-size:11.5px;color:var(--faint);line-height:1.5}
.analytics .vcard-b .vtbl{margin-top:2px}
.analytics .vtbl th.num,.analytics .vtbl td.num{font-variant-numeric:tabular-nums}
.analytics .vtbl td{white-space:normal}
.analytics .vtbl td .meter{margin-top:6px;height:6px;border-radius:3px;background:var(--hair);overflow:hidden}
.analytics .vtbl td .meter>span{display:block;height:100%;border-radius:3px;background:var(--c1)}
.analytics .vtbl td .meter>span.warn{background:var(--warn)}
.analytics .vtbl td .meter>span.bad{background:var(--bad)}
.analytics .vtbl td .meter>span.ok{background:var(--ok)}
.analytics .vtbl td .meter>span.mute{background:var(--c-other)}
/* tiles inside a panel (goals, sentiment): three vstats on the panel's own grid */
.analytics .an-tiles{margin:2px 0 6px}
.analytics .an-tiles .vstat .v{font-size:22px}
/* the volume chart */
.analytics .volchart{margin-top:4px}
.analytics .volchart .bar{fill:var(--c1)}
.analytics .volchart .bar.zero{fill:var(--c-other)}
.analytics .volchart .col:hover .bar{fill:var(--c2)}
.analytics .volchart .val{fill:var(--ink);font-weight:600}
/* the two stacked bars: outcomes keep the semantic colours their code gives them; direction takes
   the categorical order (inbound c1, outbound c2, web c4) over the literal colours in its code */
.analytics .donut{margin-top:4px}
.analytics .donut-bar{height:12px;border-radius:6px}
.analytics .donut-legend{margin-top:12px;gap:8px}
.analytics .donut-item{font-size:12.5px}
.analytics .donut-item b{font-variant-numeric:tabular-nums}
.analytics .an-dir [style*="--accent"]{background:var(--c1)!important}
.analytics .an-dir [style*="#2D6FA8"]{background:var(--c2)!important}
.analytics .an-dir [style*="--flame"]{background:var(--c4)!important}
/* the funnel */
.analytics .funnel{margin-top:2px}
.analytics .funnel-track{height:18px;border-radius:5px}
.analytics .funnel-track>span{background:var(--c1)}
.analytics .funnel-track>span.mid{background:var(--c2)}
.analytics .funnel-track>span.end{background:var(--c3)}
.analytics .funnel-step.key .funnel-head .v{color:var(--ink)}
.analytics .funnel-head .v{font-variant-numeric:tabular-nums}
@media (max-width:767px){.analytics .volchart .col:nth-child(even) .lab{display:none}}

/* ---- Agent insights ---- */
.ins-top{flex:none;padding-bottom:10px}
.ins-tbl td.num,.ins-tbl th.num{font-variant-numeric:tabular-nums}
.ins-tbl td .help{display:inline;margin-left:3px}
.ins-tbl td.num.bad{color:var(--bad);font-weight:600}
.ins-tbl td.num.warn{color:var(--warn);font-weight:600}
.ins-card .vlist .in p{color:var(--ink);font-size:13px;margin:0}
.vstat.attn .v{color:var(--warn)}
.vcard .ins-sub{font-size:12.5px;font-weight:600;margin:14px 0 8px;padding-top:12px;border-top:1px solid var(--hair)}
.vcard-b .vbars .r>span{color:var(--muted)}
.vcard-b .vbars .r b .help{font-weight:400}
.vcard-b .vbars .t i.warn{background:var(--warn)}
.vcard-b .hours{margin:10px 0 22px}
.vcard-b .vtbl td.delta.up{color:var(--ok);font-weight:600}
.vcard-b .vtbl td.delta.down{color:var(--bad);font-weight:600}
.vcard-b .vtbl td.mute{color:var(--muted)}
.ins-band{gap:14px}
.vcard-b .vtbl td.mute{white-space:normal}
/* the top bar on a phone: a window switch beside the title must not squeeze it to a letter a line */
@media (max-width:767px){
  /* a window switch in the top bar takes a row of its own on a phone rather than the title's room */
  .vtop:has(.vseg){flex-wrap:wrap}
  .vtop .vseg{order:10;flex:1 1 100%;display:flex}
  .vtop .vseg button{flex:1;padding:6px 4px;font-size:12px;justify-content:center}
  .vtop .ttl{min-width:0;flex:1 1 auto}
  .ins-band{gap:10px}
}

/* ---- Conversation QA ---- */
.qa .banner.c12{margin:0}
.qa .vcard-b .banner{margin:0}
.qa .qa-steps p{margin-bottom:8px}
.qa .qa-steps p:last-child{margin-bottom:0}
.qa .vform{margin-top:4px}
.qa .vform .f>label{font-size:12px;font-weight:600;color:var(--ink)}
.qa .vform select,.qa .vform input{width:100%}
.qa .qa-crit{margin-top:6px}
.qa .qa-edit td{white-space:normal;overflow:visible;padding:6px 8px}
.qa .qa-edit td input{width:100%}
.qa .qa-pick{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.qa .qa-pick .f{flex:1 1 320px}
.qa .qa-pick .f>label{font-size:12px;font-weight:600}
.qa .qa-pick select{width:100%}
.qa .qa-scores-top{padding-bottom:10px}
.qa .qa-tbl td .mono{font-family:var(--mono);font-size:11.5px}
.qa .qa-tbl tr.wh-drawer>td{white-space:normal;background:var(--hair);padding:12px 14px}
.qa .qa-break{margin-top:8px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.qa .qa-break td,.qa .qa-break th{background:transparent}
.qa .vempty b{margin-bottom:0}
.qa .qa-tbl th.acts,.qa .qa-tbl td.acts{padding-left:4px}
@media (max-width:767px){
  .qa .qa-edit thead{display:none}
  .qa .qa-edit tr{display:block;padding:8px 0;border-bottom:1px solid var(--hair)}
  .qa .qa-edit tr:last-child{border-bottom:0}
  .qa .qa-edit td{display:block;width:100%!important;padding:3px 0;border:0}
  .qa .qa-edit td.acts{text-align:left}
  .qa .qa-tbl td.acts .quiet{padding:4px 2px}
}


/* ================================================================ screens/channels.css (merged at integration, 2 Oct 2026) */
/* Screen family "channels": page-specific rules written by its builder (October 2026 redesign). Kit classes come from app.css; this file only adds what the family needs. Merged into app.css at integration. */

/* ---- Every channels page (wrapper class "ch") ---- */
/* Kit gap: .vcard-b and .vtbl are flex:1 1 0% for the fixed-height home widgets. In a card that is
   as tall as its content (every list page) a zero basis leaves the table shorter than its rows and
   the card clips them, with the slack landing in the body above. Content-sized here. */
.ch .vcard>.vcard-b,.ch .vcard>.vtbl.fit{flex:none}
.ch .vcard>.vempty{flex:none}
/* A segmented filter wider than a phone wraps onto a second line rather than pushing the page. */
.ch .seg{max-width:100%;flex-wrap:wrap}
.ch .seg button{white-space:nowrap;flex:none}
/* Fields fill their column; a segmented control inside a field keeps its own width. */
.ch .vform .f>input:not([type=checkbox]):not([type=radio]),.ch .vform .f>select,.ch .vform .f>textarea{width:100%;box-sizing:border-box}
.ch .vform .f>.seg{align-self:flex-start}
.ch .vform .f{display:flex;flex-direction:column;gap:4px;min-width:0}

/* A second section inside a card (Add a carrier, Not in the chain): a hairline above, a small
   uppercase heading, then the form or table. */
.ch .vcard>.ch-sect{border-top:1px solid var(--hair)}
.ch .ch-h4{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
/* A bordered sub-box inside a card body (the vendor allowlist). */
.ch .ch-box{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--card-2,var(--card))}
.ch .ch-box .vactions{margin-top:10px}
/* Controls set on one line inside a cell (a rate box, its pulse and Save). */
.ch .ch-inline{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.ch .ch-inline>select,.ch .ch-inline>input{width:auto;flex:none}
/* A pill that carries a name (an env var, a secret reference) wraps rather than clips. */
.ch .ch-tbl td.wrap .pill{white-space:normal;overflow-wrap:anywhere;line-height:1.4}
/* A table that sits inside a card body rather than flush to the card: no outer padding. */
.ch .vtbl.ch-plain td:first-child,.ch .vtbl.ch-plain th:first-child{padding-left:0}
.ch .vtbl.ch-plain td:last-child,.ch .vtbl.ch-plain th:last-child{padding-right:0}
.ch .vcard-b .vactions{padding-top:12px}
.ch .vcard-b details summary{cursor:pointer;color:var(--accent-ink);font-weight:500;margin-top:4px}
.ch .vcard-b details>div{margin-top:6px}
/* A code sample scrolls sideways inside its card rather than being cut at the card's edge. */
.ch .vcard-b pre.code{overflow-x:auto;max-width:100%;box-sizing:border-box;margin:0}

/* The old sidebar rules in app.css hid ".side" on a narrow window; the kit's vsplit side column
   must stack instead. Redundant once the app.css fix lands at integration; harmless after it. */
@media (max-width:1199px){.ch.vsplit>.side{display:flex;position:static;visibility:visible;transform:none;width:auto;max-width:none;box-shadow:none;padding:0;background:none;border:0}}

/* ---- Phone numbers (Pages/Numbers.razor) ---- */
/* The rent panel is a side card in a vsplit; with nothing renting, the split is one column. */
.num-split.solo{grid-template-columns:minmax(0,1fr)}
.num-split>.vgrid{min-width:0}
@media (max-width:1199px){.num-split>.side{order:-1}}
/* A fold head inside a vcard (Groups): the card supplies the border, the head only its row. */
.vcard>.foldhead{padding:11px 16px;border-radius:0}
.vcard>.foldhead .help{margin:0;white-space:nowrap}
@media (max-width:767px){.vcard>.foldhead .help.opt{display:none}}
/* Number rows: two lines in a cell (the number and its tags, the carrier and its series), so the
   cell wraps; the row actions sit right and wrap when the card is narrow. */
.ch-tbl td.wrap{white-space:normal;line-height:1.45;overflow-wrap:anywhere}
/* On a phone a stat tile's title wraps; the window label beside it would land on top of it. */
@media (max-width:767px){.ch .vstat .k .win{display:none}}
.ch-tbl .ch-acts{display:flex;gap:2px;flex-wrap:wrap;justify-content:flex-end}
.ch-tbl .l2{display:block;font-size:10.5px;color:var(--faint);margin-top:2px}
.ch-tbl .l2.warnish{color:var(--warn)}
/* Below 560px of card the table becomes a list: each row a block, each cell captioned, the
   optional columns back (the kit hides them by container width, which a block list has no use for). */
@container (max-width:560px){
  .vcard .ch-tbl table,.vcard .ch-tbl tbody,.vcard .ch-tbl tr,.vcard .ch-tbl td,.vcard .ch-tbl td.opt,.vcard .ch-tbl td.opt2{display:block}
  .vcard .ch-tbl thead{display:none}
  .vcard .ch-tbl tr{padding:10px 0;border-bottom:1px solid var(--hair)}
  .vcard .ch-tbl tr:last-child{border-bottom:0}
  .vcard .ch-tbl td{padding:3px 14px;border-bottom:0;white-space:normal}
  .vcard .ch-tbl td[data-k]::before{content:attr(data-k);display:block;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:1px}
  .vcard .ch-tbl td.acts,.vcard .ch-tbl td.num{text-align:left}
  .vcard .ch-tbl td.acts{padding-top:6px}
  .vcard .ch-tbl td.acts::before{display:none}
  .vcard .ch-tbl .ch-acts{justify-content:flex-start}
}
/* Kit gap: a static step rail (spans, not links) for a wizard nobody clicks through; the kit's
   pill look, applied to spans inside any channels card. */
.ch .vsteps span:not(.n){display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--muted);font-size:12px;font-weight:500}
.ch .vsteps span.on{border-color:var(--navy);color:var(--ink);font-weight:600}
.ch .vsteps span.on .n{background:var(--navy);color:#fff}
/* Two columns of label/value lists (the MCP tool groups); one column on a phone. */
.ch .ch-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px 24px}
.ch .ch-cols .ch-h4{margin-bottom:6px}
.ch .vkv code.mono{font-size:12px}
.ch .vkv dd .help{margin-top:2px}
.rent-card .vform.one{grid-template-columns:1fr}
.rent-card .vform .f input,.rent-card .vform .f select{width:100%;box-sizing:border-box}
.rent-card .rent-from{font-size:13px;font-weight:600;padding:8px 0 2px}
.rent-card .stock{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.rent-card .stock-row{grid-template-columns:minmax(0,1fr) auto;padding:10px 12px;gap:8px 12px;border-bottom:1px solid var(--hair)}
.rent-card .stock-row:last-child{border-bottom:0}
.rent-card .stock-row>div:last-child{grid-column:1/-1;text-align:right}
.rent-card .review-cost{grid-template-columns:1fr;gap:10px}
.rent-card .vcard-f .grow{flex:1}
.rent-card .call-x{padding:2px 8px}


/* ================================================================ screens/org.css (merged at integration, 2 Oct 2026) */
/* Screen family "org": page-specific rules written by its builder (October 2026 redesign). Kit classes come from app.css; this file only adds what the family needs. Merged into app.css at integration. */

/* The one flame per screen: the primary action. The kit has no flame button, so the family adds it. */
.btn.flame,button.flame{background:var(--flame);border-color:var(--flame);color:#fff}
.btn.flame:hover,button.flame:hover{background:var(--flame-ink);border-color:var(--flame-ink);color:#fff}
.btn.flame:disabled,button.flame:disabled{opacity:.55}

/* Settings rows (label left, control right) inside a kit card: the card body already pads. */
.vcard-b>.setlist{margin-top:0}
.vcard-b>.setlist>.setrow:first-child{padding-top:0}
.vcard-b>.setlist>.setrow:last-child{padding-bottom:0}
.vcard-b .setrow input[type=text],.vcard-b .setrow input[type=number],.vcard-b .setrow input[type=password],.vcard-b .setrow select{width:100%;box-sizing:border-box}
.vcard-b .setrow input[type=checkbox]{width:auto;justify-self:start;margin-top:4px}
.vcard-b>.vactions{margin-top:auto}
.vcard-b .secret-code{margin-top:6px}
.vcard-b .banner{margin:0}
.vcard-b>.sub{color:var(--muted);font-size:12.5px;line-height:1.5}

/* A kit card that holds a plain form: fields in a vform grid, the footer row for its button. */
.vform .f>label.flabel{margin-bottom:5px}
.vform .f input,.vform .f select{width:100%;box-sizing:border-box}
.vform .f select{padding:8px 10px}

.vform.one{grid-template-columns:1fr}
/* A card whose body (an intro, a form) sits beside a table or an empty state: the kit gives both
   flex:1, so a card stretched by its grid row split its height between them and the table's rows
   were squeezed. Only the table or the empty state may grow. */
.vcard>.vcard-b{flex:none}
.vcard>.vcard-b:last-child{flex:1}
.vcard>.vcard-b:has(~.vtbl),.vcard>.vcard-b:has(~.vempty),.vcard>.vtbl~.vcard-b,.vcard>.vempty~.vcard-b{flex:none}
.vcard>.vtbl~.vcard-b{border-top:1px solid var(--hair)}
/* The roles matrix keeps its own classes; inside a kit card it scrolls edge to edge. */
.vcard>.matrix-scroll{padding:0 16px 12px}
.vcard>.matrix-scroll table.matrix td:first-child,.vcard>.matrix-scroll table.matrix th:first-child{padding-left:0}
/* A card with more than one section: a second header gets a hairline above it. */
.vcard>.vcard-b+.vcard-h,.vcard>.vtbl+.vcard-h,.vcard>.vempty+.vcard-h,.vcard>.vcard-f+.vcard-h{border-top:1px solid var(--hair)}
.vcard-h h3 code{font-size:12px}
/* A filter box in a card header */
.vcard-h input.hfilter{width:auto;max-width:260px;padding:6px 10px;font-size:12.5px;flex:1 1 160px;min-width:0}
.vcard-h select.hsel{width:auto;padding:5px 8px;font-size:12.5px;max-width:200px}
.vcard-h .pill{flex:none}
.vcard-h button.quiet{padding:4px 8px}
.vempty span{max-width:640px}
.vcard-b .vgrid{gap:10px}
/* Workspace access: the role's can / cannot lists and the transcript scope choices (moved from the
   page's own <style> block). */
.vcard-b .grid2 h3{font-size:12.5px;font-weight:600;margin:0 0 6px}
.vcard-b h3.can{color:var(--ok)}
.vcard-b h3.cannot{color:var(--warn)}
.plain{margin:0;padding-left:17px;font-size:12.5px;color:var(--muted);line-height:1.7}
.scope-choices{display:grid;gap:8px}
.scope-choice{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border:1px solid var(--line);border-radius:9px;cursor:pointer}
.scope-choice.on{border-color:var(--accent);background:var(--accent-soft)}
.scope-choice input{width:auto;margin-top:3px;accent-color:var(--accent)}
.scope-choice b{font-size:13px}
/* Billing: the plan you are on is the live thing on the page, so its badge is the one flame. */
.vcard .plan-card.current{border-color:var(--flame);box-shadow:0 0 0 1px var(--flame)}
.vcard .plan-current-badge{background:var(--flame-soft);color:var(--flame-ink)}
.vcard .plan-current-badge.pending{color:var(--warn-ink);background:var(--warn-soft)}
.vcard-b>.plan-head{margin-bottom:-6px}
.vcard-b>.meters{margin:8px 0 4px}
.vcard-b>.plan-grid{margin:0}
/* A one-line lookup: the field grows, the button sits at its foot */
.lookup-row{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.lookup-row .grow{flex:1;min-width:200px}
.vcard-b .dnc-origins{margin:0}
.vcard-b .dnc-search{margin:0}
.vcard-b .verdict{margin-top:0}
/* Row actions inside a kit table: quiet buttons on one line, wrapping on a phone. */
.vtbl td.acts{white-space:normal}
.vtbl td.acts button{white-space:normal;text-align:center}
.vtbl td .help{white-space:normal}
.vtbl td select.inline{width:100%;padding:4px 8px;font-size:12px}

/* ---- home, matched to the mockup (2 October 2026): the top-bar chips, the sample mark, the tooltip,
   the table's state pills and language tag, the chart's peak and yesterday dots, the library's form ---- */
.vtop .chip{font-size:12px;padding:5px 10px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--muted);display:inline-flex;gap:6px;align-items:center;white-space:nowrap;text-decoration:none}
.vtop .chip .dot{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.vtop .chip.warn{border-color:#F4D9B5;background:var(--warn-soft);color:var(--warn-ink)}
.smp{display:inline-flex;align-items:center;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--warn-ink);background:var(--warn-soft);border:1px dashed #E7B36E;border-radius:4px;padding:0 5px;line-height:15px;vertical-align:2px;margin-left:4px;cursor:help;white-space:nowrap}
.dash .stat.live .smp{background:rgba(255,167,38,.18);color:var(--amber);border-color:rgba(255,167,38,.5)}
.dash .card-h .smp{margin-left:0}
.tip{position:fixed;z-index:60;pointer-events:none;background:var(--navy-ink);color:#fff;font-size:12px;padding:6px 9px;border-radius:6px;box-shadow:var(--e2);white-space:nowrap;opacity:0;transform:translate(-50%,-110%);transition:opacity .08s}
.tip.on{opacity:1}
.tip b{font-weight:600}
.dash .tbl td.mono,.dash .mono{font-family:var(--mono);font-size:12px}
.dash .tbl td .mute{color:var(--faint)}
.dash .lang{font-size:10.5px;color:var(--faint);border:1px solid var(--line);border-radius:4px;padding:0 4px;margin-left:5px;font-family:inherit}
.dash .pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--hair);color:var(--muted)}
.dash .pill.live{background:var(--flame-soft);color:#B4540E}.dash .pill.live:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--flame)}
.dash .pill.ok{background:var(--ok-soft);color:var(--ok-ink)}.dash .pill.warn{background:var(--warn-soft);color:var(--warn-ink)}.dash .pill.navy{background:var(--accent-soft);color:var(--navy)}
.dash .chart .peak{fill:var(--ink);font-weight:600;opacity:0;animation:vfade .4s ease forwards 1.4s}
.dash .chart .ydot{fill:#fff;stroke:var(--faint);stroke-width:2;opacity:0;animation:vfade .4s ease forwards 2.1s}
.dash .chart .seg{cursor:default}
.dash .dk i.tex{background:repeating-linear-gradient(135deg,var(--c-other) 0 2px,#fff 2px 4px);border:1px solid var(--c-other)}
.dash .hb .t i.up{background:var(--c4)}
.dash .hb small{color:var(--faint);font-weight:400;margin-left:3px}
.dash .hb .note{font-size:11.5px;color:var(--muted);margin:0}
.dash .hb .legend{margin-top:2px}
.dash .lane.idle .wv i{animation-duration:2.6s;opacity:.45}
.dash .lane.idle b{font-weight:400;color:rgba(255,255,255,.8)}
.dash .stat.empty{border-style:dashed}
.dash .stat.empty .v{color:var(--faint)}
.dash .chr.smp-row .t span{color:var(--faint)}
.dash .chr .n span.live{color:#B4540E}.dash .chr .n span.live:before{background:var(--flame)}
.dash .chr .ic b{font-family:var(--mono);font-weight:700;letter-spacing:.02em}
.dash .stat .k .win{white-space:nowrap}
.lib .item{grid-template-columns:auto 1fr auto}
.lib .item .ic{width:32px;height:32px;border-radius:8px;background:var(--accent-soft);color:var(--navy);display:flex;align-items:center;justify-content:center}
.lib .item .ic svg{width:16px;height:16px}
.lib .cm{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px dashed var(--line);border-radius:10px;margin-top:6px}
.lib .cm b{font-size:12.5px}
.lib .cm>span{font-size:11.5px;color:var(--muted)}
.lib .cm input,.lib .cm select{font-size:12.5px;padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--ink);width:100%}
.lib .cm .row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lib .cm button{font-size:12px;padding:7px 10px;border-radius:7px;border:1px solid var(--navy);background:var(--navy);color:#fff;font-weight:600}
.lib .cm button:hover{background:var(--navy-deep);color:#fff;border-color:var(--navy-deep)}
.wt .grip{cursor:grab}
@media (max-width:1199px){.vtop .chip{display:none}}
.smp.abs{position:absolute;top:9px;right:10px;margin:0}
.dash .stat.live .smp.abs{right:30px}
.dash .stat:has(> .smp.abs) .k{padding-right:56px}
.dash .donut .wrap,.dash .donut svg{width:116px;height:116px}
.dash .donut circle{stroke-width:18}
.dash .dk div{gap:6px;font-size:11.5px}
.dash .dk small{width:30px}
@media (min-width:1200px){.vtop{flex-wrap:nowrap}.vtop .ttl{flex:1 1 auto;min-width:0}.vtop .crumb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vtop .grow{flex:0 0 0}}
.dash .chr .t .smp{display:inline-flex;margin:0 4px 0 0;vertical-align:1px}

/* =====================================================================================
   UX consistency pass — 2 October 2026 (owner's overnight goal: one look, best experience).
   The philosophy at the top of this file — "the deep navy carries the interface, the flame
   orange is spent sparingly; an accent used everywhere is an accent used nowhere" — held for the
   shell and the home but not for the form pages, where Save was flame while New agent, New
   campaign and Save lines were navy, and the agent builder's disabled Save washed out to peach.
   Primary is now navy on every screen; flame stays only on the live and urgent marks (the live
   pill, the beacon, the live stat tile, the active tab's underline, the Customize-on toggle,
   chart accents, the wordmark dot). This block is last so it wins the cascade; no page markup
   changed, so no behaviour changed.
   ===================================================================================== */
:root{--dur:.15s}

/* one primary button, navy, in both themes; flame no longer fills a button */
.btn.flame,button.flame,a.btn.flame,.btn.ab-primary,button.ab-primary{
  background:var(--btn);border-color:var(--btn);color:#fff}
.btn.flame:hover,button.flame:hover,a.btn.flame:hover,
.btn.ab-primary:hover,button.ab-primary:hover{
  background:var(--btn-ink);border-color:var(--btn-ink);color:#fff}
.btn.flame:disabled,button.flame:disabled,
.btn.ab-primary:disabled,button.ab-primary:disabled{
  background:var(--btn);border-color:var(--btn);color:#fff;opacity:.42}

/* one muted disabled state, never a washed accent */
button:disabled,.btn:disabled{opacity:.42;cursor:not-allowed}

/* every interactive surface eases its state change, so hovers and selections feel deliberate */
button,.btn,.nav-i,.vrail .nav-i,.chip,.seg button,.tabs button,.vtabs a,.pill,
.card,.vcard,.dash .card,.stat,.dash .stat,.tile,.data tr.rowlink,.dash .chr,.dash .in,
input,select,textarea,.kbtn,.theme-btn,.usr-btn,.usr-item{
  transition:background var(--dur) ease,border-color var(--dur) ease,color var(--dur) ease,box-shadow var(--dur) ease,transform var(--dur) ease}

/* a single, visible keyboard focus ring on the control itself (mouse clicks stay clean): the ring's edge
   plus its halo (final.md 3.7). A link, a nav item, a page tab or a summary wears it on its own edge. */
.nav-i:focus-visible,.vrail .nav-i:focus-visible,.vtabs a:focus-visible,
a[href]:focus-visible,summary:focus-visible,[tabindex]:not([tabindex="-1"]):focus-visible{
  outline:1px solid var(--focus-border);outline-offset:0;box-shadow:var(--focus)}
/* A button stands its ring 2 px off, the halo showing between (lane U review, 9 Oct 2026). On a
   navy-filled control (the primary, a.btn, .vbtn, .usr-btn, .chip.on) an edge ON the control was navy on
   navy (1:1) and focus could not be told from rest; 2 px off, it reads on every fill and in both themes.
   a.btn / a.vbtn tie a[href]:focus-visible (0,2,1) and win by coming after it. */
button:focus-visible,.btn:focus-visible,.vbtn:focus-visible,.chip:focus-visible,.tabs button:focus-visible,
.kbtn:focus-visible,.theme-btn:focus-visible,.usr-btn:focus-visible,
a.btn:focus-visible,a.vbtn:focus-visible{
  outline:2px solid var(--focus-border);outline-offset:2px;box-shadow:var(--focus)}
/* A segment sits in a group that clips (.seg, .vseg, .op-seg are overflow:hidden), so its ring is drawn
   inside it: the ring's colour on a plain segment; white on the selected one, whose fill is navy; navy-ink
   on the pane's pressed segment, whose fill is the on-dark ring colour itself. */
.seg button:focus-visible,.vseg button:focus-visible,.op-seg button:focus-visible{
  outline:2px solid var(--focus-border);outline-offset:-4px;box-shadow:none}
.seg button.on:focus-visible,.vseg button.on:focus-visible{outline-color:var(--on-dark)}
.op-seg button[aria-pressed="true"]:focus-visible{outline-color:var(--navy-ink)}

/* ---- entrance motion, matched to the approved home ----
   The mockup and the home settle in: tiles and cards rise a few pixels and fade as they mount.
   Every other screen was static, which is why they felt flatter than the home. The same, quieter,
   language is given to the kit grid here (the stat band only, so tables and forms appear at once), scoped to .vgrid so the
   home's own .dash animations are untouched. Reduced-motion users get none of it. */
@media (prefers-reduced-motion: no-preference){
  .vshell .content .vgrid>.vstat{animation:vrise .36s var(--ease) both}
  .vshell .content .vgrid>.vstat:nth-child(1){animation-delay:.02s}
  .vshell .content .vgrid>.vstat:nth-child(2){animation-delay:.07s}
  .vshell .content .vgrid>.vstat:nth-child(3){animation-delay:.12s}
  .vshell .content .vgrid>.vstat:nth-child(4){animation-delay:.17s}
  .vshell .content .vgrid>.vstat:nth-child(n+5){animation-delay:.20s}
}

/* =====================================================================================
   QUALITY LINE (quality/2026-10-04), kept at the merge with the October 2026 console redesign
   (feature/console-shell-2026-10) on 4 Oct 2026. Everything below styles pages and components
   that exist only on the quality line: the G21 account menu, destination tabs, Settings
   navigation, receipts, drawer and filter bar; the G22-G27 editor, voices, carriers and numbers;
   the G31 call history and call page; the G32 Insights and Home blocks; Knowledge v2 (G26); the
   G10a developers page; Your Nod; the proof-of-merge fixes. Appended AFTER the kit, as the kit
   asks of a family's rules. Three rules the kit already decides (.btn.flame / button.flame, the
   kit's navy primary button, and a.btn.ghost) were dropped and marked in place so the kit stands.
   ===================================================================================== */
/* ---- Knowledge v2 (G26): folders, the drop zone, "Would it know?", citations ---- */
.hi{font-family:"Noto Sans Devanagari","IBM Plex Sans",sans-serif;color:var(--muted);font-weight:400}
.sub.hi,.help.hi{margin-top:2px}
/* (dropped at the 4 Oct 2026 merge: the kit's rule above decides this selector) */
/* (dropped at the 4 Oct 2026 merge: the kit's rule above decides this selector) */
.kb-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.kb-actions{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap}
.kb-head .kb-actions{margin-top:0}
.kb-new{border:1px solid var(--line);border-radius:10px;padding:14px;margin:14px 0;background:var(--hair)}
.kb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:14px;margin-top:16px}
.kb-card{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:10px;padding:14px 16px;
  background:var(--card);color:var(--ink);text-decoration:none}
.kb-card:hover{border-color:var(--accent)}
.kb-card-n{font-weight:600;font-size:14px}
.kb-card-d{font-size:12.5px;color:var(--muted);line-height:1.45}
.kb-card-m{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--faint);margin-top:4px}
.kb-card-u{font-size:12px;color:var(--accent-ink);margin-top:auto}
.kb-empty{border:1px dashed var(--line);border-radius:10px;padding:18px;margin-top:16px;font-size:13px;line-height:1.55}
.kb-empty-t{font-weight:600;margin-bottom:6px}
.dropzone{position:relative;border:2px dashed var(--flame);border-radius:12px;padding:26px 18px;text-align:center;
  background:var(--flame-soft);cursor:pointer}
.dropzone.busy{opacity:.6}
.dropzone-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.dropzone-t{font-weight:600;font-size:14px;margin-bottom:6px}
.kb-results{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.kb-result{border-left:3px solid var(--ok);background:var(--hair);border-radius:8px;padding:9px 12px}
.kb-result.bad{border-left-color:var(--bad);background:var(--bad-soft)}
.kb-result-h{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px;overflow-wrap:anywhere}
.kb-result-x{font-size:12px;color:var(--muted);margin-top:4px;white-space:pre-wrap;line-height:1.45}
.kb-row{display:flex;gap:8px;align-items:center;margin-top:10px}
.kb-row input{flex:1;min-width:0}
.kb-check{display:flex;gap:8px;align-items:center;font-size:12.5px;margin-top:8px;color:var(--muted)}
.kb-src{max-width:260px;overflow-wrap:anywhere}
.kb-cell-actions{white-space:nowrap;text-align:right}
.kb-answer{border-left:3px solid var(--ok);background:var(--ok-soft);border-radius:8px;padding:11px 14px;margin:12px 0 8px;font-size:13px;line-height:1.5}
.kb-answer.no{border-left-color:var(--warn);background:var(--warn-soft)}
.kb-answer.maybe{border-left-color:var(--line);background:var(--hair)}
.kb-by{font-size:11.5px;color:var(--faint);margin-top:6px}
.kb-pin{font-size:11.5px;color:var(--muted);margin-left:4px}
.kb-note{font-size:12px;color:var(--warn-ink,var(--muted));margin-top:4px}
.kb-answer-t{font-weight:600;margin-bottom:4px}
.kb-used{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.kb-folders{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.kb-folders label{display:flex;gap:8px;align-items:flex-start;font-size:13px}
.kb-folders label .help{display:block}
.ctr-src,.kb-cite{font-size:11px;color:var(--accent-ink);margin-top:4px}

/* ==== G22: one editor, the permanent test column, publish ==== */
/* Two columns: the editor, and the Test agent panel docked beside it -- it used to be a drawer over the
   form it tested. Under 1200px the column stacks below the editor rather than squeezing it. */
.bd-cols{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:18px;align-items:start}
.bd-main{min-width:0}
/* OEM P2 Task 9 (review F1): the builder's five field fieldsets -- the four ListEditors and ConnectStep, each wrapped at its use site in
   a disabled-when-read <fieldset> that carries no class -- take no part in the layout. Without this they are block boxes in a flex
   column and the rows lose the column's gap (the builder would look different for everyone, flag off and staff included).
   display:contents drops only the box: `disabled` is DOM-based (HTML Standard, "enabling and disabling form controls": a control is
   disabled when it is a descendant of a fieldset whose disabled attribute is set), so the controls stay disabled. :not([class]) keeps
   this off FallbackPicker's own fieldset (class="f", a direct child of .vcard-b too) and every other fieldset of the console;
   .bd-main is the builder's own column. The last rule is `.vcard-b>.rec{margin-top:0}` for the rows that are no longer direct children. */
.bd-main>fieldset:not([class]),.bd-main .vcard-b>fieldset:not([class]){display:contents}
.bd-main .vcard-b>fieldset:not([class])>.rec{margin-top:0}
.bd-test{position:sticky;top:12px;height:calc(100vh - 110px);min-height:520px}
.bd-test:focus{outline:none}   /* focused by ?focus=test to scroll it into view, not to draw a ring */
.tester.docked{position:static;transform:none;width:auto;height:100%;box-shadow:none;border:1px solid var(--line);
  border-radius:12px;z-index:auto;transition:none;overflow:hidden}
@media(max-width:1200px){.bd-cols{grid-template-columns:1fr}.bd-test{position:static;height:640px}}
.bd-status{font-size:12px;color:var(--muted);display:inline-flex;gap:6px;align-items:center;margin-right:4px}
.bd-status.bad{color:var(--bad)}
.tp-target{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--ink);min-width:0;flex:1}
.tp-target select{flex:1;min-width:0;font-weight:500;padding:5px 8px}
/* the publish review */
.pr-modal{max-width:720px;max-height:calc(100vh - 60px);overflow-y:auto}
.pr-sec{margin-top:16px}
.pr-sec h3{font-size:13px;font-weight:600;margin:0 0 6px}
.pr-group{margin:6px 0 10px}
.pr-change{font-size:12.5px;padding:5px 0;border-top:1px solid var(--hair);display:grid;grid-template-columns:70px 1fr;gap:8px}
.pr-kind{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);padding-top:2px}
.pr-before{color:var(--bad);text-decoration:line-through;white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px}
.pr-after{color:var(--ok);white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px}
/* the Versions tab */
.vt-list{display:flex;flex-direction:column;margin-top:10px}
.vt-row{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:12px;padding:12px 0;border-top:1px solid var(--hair);align-items:start}
.vt-acts{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.vt-diff{border:1px solid var(--hair);border-radius:8px;padding:8px 12px;margin-top:8px;background:var(--card-2,var(--bg))}
@media(max-width:700px){.vt-row{grid-template-columns:1fr}.vt-acts{justify-content:flex-start}}
/* the Tests tab */
.persona-chips{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 14px}
.script-rows{display:flex;flex-direction:column;gap:6px}
.script-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:6px;align-items:center}
/* the agents list: who edited, one row menu */
.edited{display:flex;align-items:center;gap:8px;line-height:1.3}
.avatar.sm{width:24px;height:24px;border-radius:50%;font-size:10.5px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.row-menu{position:relative;display:inline-block}
.row-menu-list{position:absolute;right:0;top:100%;margin-top:4px;background:var(--card);border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--e2);z-index:30;min-width:200px;padding:4px;
  display:flex;flex-direction:column;text-align:left}
.row-menu-list a,.row-menu-list button{display:block;text-align:left;padding:7px 10px;border-radius:6px;font-size:12.5px;
  font-weight:500;background:none;border:0;color:var(--ink)}
.row-menu-list a:hover,.row-menu-list button:hover{background:var(--accent-soft);color:var(--accent-ink)}
.row-menu-list .danger-q{color:var(--bad)}
.code-snip{background:var(--bg);border:1px solid var(--hair);border-radius:8px;padding:12px;font-family:var(--mono);
  font-size:11.5px;white-space:pre-wrap;overflow-wrap:anywhere;margin:8px 0 0}

/* G25: Voice & language. vl- the tab, vg- the voice gallery, sl- the Spoken lines grid,
   pd- the pronunciation dictionary, nt- numbers by type. */
.vl-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.vl-voices select{min-width:220px;max-width:100%}
.vg-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin:10px 0}
.vg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:12px}
.vg-card{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--card)}
.vg-card.on{border-color:var(--accent)}
.vg-name{font-weight:600;font-size:14px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.vg-meta{font-size:11.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.vg-langs{font-size:12px;color:var(--ink);line-height:1.4}
.vg-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:auto}
.vg-actions button{padding:5px 10px}
.vg-cmp{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);cursor:pointer}
.vg-compare{border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-bottom:12px}
.vg-compare-h{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.vg-audio{margin:6px 0 10px;width:100%;max-width:460px}
.sl-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}
.sl-scroll{overflow-x:auto}
.sl-table td{vertical-align:top;min-width:150px}
.sl-key{min-width:160px}
.sl-text{font-size:12.5px;line-height:1.4;overflow-wrap:anywhere}
.sl-foot{display:flex;gap:6px;align-items:center;margin-top:4px}
.pd-table input,.pd-table select{width:100%}
.pd-actions{white-space:nowrap}
.pd-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.pd-upload{position:relative;overflow:hidden;cursor:pointer}
.pd-file{position:absolute;inset:0;opacity:0;cursor:pointer}
.pd-ws{margin-top:18px;padding-top:12px;border-top:1px solid var(--hair)}
.pd-shadowed td{color:var(--faint)}
.nt-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.nt-examples{margin-top:10px}
.pd-upload.btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.pd-upload.btn.ghost:hover{background:var(--hair)}

/* ==== G31: the call history and the call page ====
   History: the columns a reader chose (--clog-cols, set on .clog), a compact density, counts on the chips,
   a test marker, and the sentinel that loads the next page. The call page: two columns (the transcript,
   then the verdict and the facts), a time and a ▶ on every line, the line being heard picked out, leg
   switches marked where they happened, and the player sticky at the bottom -- its play is the one flame. */
.pill.test{background:var(--flame-soft);color:var(--flame-ink)}
.seg button .n{font-variant-numeric:tabular-nums;opacity:.75;margin-left:3px;font-size:11px}
.clog.compact .clog-row{padding:5px 14px;line-height:1.3}
.clog.compact .clog-row .l2{display:none}
.clog-cols{position:relative;font-size:12px}
.clog-cols>summary{cursor:pointer;list-style:none;border:1px solid var(--line);border-radius:8px;padding:6px 11px;
  background:var(--card);color:var(--muted)}
.clog-cols[open]>summary{color:var(--ink)}
.clog-cols-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:20;display:flex;flex-direction:column;gap:6px;
  min-width:200px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);
  box-shadow:var(--e2)}
.clog-cols-menu label{display:flex;gap:8px;align-items:center;white-space:nowrap}
.clog-more{display:flex;gap:10px;align-items:center;justify-content:center;padding:12px 0 2px;min-height:24px}
/* The review of G31: a row is a real link. The When cell's anchor is stretched over the whole row, so a click
   anywhere opens the call, Tab reaches every row, Enter opens it, and ctrl-click, middle-click and "Open in new
   tab" all work. A link inside the row (the campaign) and anything that explains itself on hover (a pill or a
   cell with a title) sit above the stretch: the tooltip still shows, and a click there opens the call through
   the row's own handler. The When cell is never raised: it holds the anchor, whose stretch is the row's. */
.clog-row{position:relative}
.clog-row .clog-open{color:inherit;text-decoration:none}
.clog-row .clog-open::after{content:"";position:absolute;inset:0}
.clog-row .clog-open:focus-visible{outline:none;box-shadow:none}
.clog-row:focus-within{box-shadow:inset 3px 0 0 var(--accent);background:var(--hair)}
.clog-row a:not(.clog-open),.clog-row .pill[title],.clog-row .l2[title],
.clog-row>div[title]:not([data-k^="When"]){position:relative;z-index:1}
.clog-head .hi{display:block;font-weight:500;letter-spacing:0;text-transform:none;color:var(--faint)}
.cplayer .cproblem{flex-basis:100%;font-size:12px;color:var(--bad)}

.cd-head h2{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.cd-head .sub{display:flex;flex-wrap:wrap;gap:4px;align-items:center;max-width:none}
.cd-body{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:16px;margin-top:14px;
  padding-bottom:84px}
.cd-left,.cd-right{min-width:0;display:flex;flex-direction:column;gap:14px}
.cd-left>.card,.cd-right>.card{margin:0}
.cd-at{font-size:10px;color:var(--faint);margin-left:6px;font-weight:500;letter-spacing:0}
.cd-play{font-size:10px;padding:0 5px;margin-left:3px;line-height:1.4}
.cd-orig{font-size:11.5px;color:var(--faint);margin-top:3px;padding:0 13px;line-height:1.5}
.cd-barge{color:var(--warn)}
.cd-switch{align-self:center;font-size:11px;color:var(--accent-ink);background:var(--accent-soft);
  border-radius:999px;padding:3px 11px;margin:2px 0}
.ctr-turn.now .ctr-text{box-shadow:0 0 0 2px var(--flame)}
.cd-knew{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cd-knew .k,.cd-right .k{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.cd-kv{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;font-size:12.5px;padding:4px 0;border-bottom:1px dashed var(--line)}
.cd-kv .mono{font-size:11.5px;color:var(--muted)}
.cd-group{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:12px 0 -4px}
.cd-tech>summary{cursor:pointer}
.cd-handled{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:4px}

.cplayer{position:sticky;bottom:0;z-index:15;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:14px -4px 0;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);
  box-shadow:0 -6px 20px rgba(0,0,0,.08)}
.cplayer .cplay{min-width:92px}
.cplayer .ctime{font-size:12px;color:var(--muted);white-space:nowrap}
.cwave{flex:1 1 240px;height:40px;min-width:160px;cursor:pointer}
.cwave rect{fill:var(--line)}
.cwave rect.played{fill:var(--accent)}
.cwave rect:hover{fill:var(--flame)}
.cwave .cmark{stroke:var(--flame);stroke-width:1.2;vector-effect:non-scaling-stroke}
.cskip{display:flex;gap:6px;align-items:center;font-size:12px;white-space:nowrap}
.ckeys{white-space:nowrap}

@media (max-width:1040px){
  .cd-body{grid-template-columns:1fr}
  .cd-knew{grid-template-columns:1fr}
  .cplayer{gap:8px}
}

/* ---- G32: Insights (Pages/Insights.razor) and Home's new blocks (Pages/Dashboard.razor). One filter bar, the
   findings, tiles that link to their calls, charts drawn in the tokens (connected in navy, not connected in the
   hairline, the spoke line in flame-free accent), a day x hour heatmap whose opacity is the rate, and the legal
   calling window as a band. The page's one flame is the active tab (.tabs button.on). ---- */
.ins-bar{margin:12px 0 8px}
.ins-check{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ins-chips{align-items:center;margin:0 0 12px}
.ins-chips .grow{flex:1}
.ins-x{border:0;background:none;padding:0 0 0 6px;color:var(--muted);cursor:pointer;font-size:13px;line-height:1}
.ins-x:hover{color:var(--bad);background:none}
.ins-period{margin:-8px 0 10px}
.ins-findings{display:flex;flex-direction:column;gap:8px;margin:0 0 16px}
.ins-finding{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;padding:9px 12px;background:var(--card)}
.ins-finding.good{border-left-color:var(--ok)}
.ins-finding.bad{border-left-color:var(--bad)}
.ins-finding a{color:var(--ink);font-weight:600}
.ins-tile{text-decoration:none;color:inherit;display:block}
.ins-tile:hover{border-color:var(--accent)}
.ins-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;margin:0 0 16px}
.ins-panel{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--card);min-width:0}
.ins-panel h3{margin:0 0 6px}
.ins-daily{display:block;width:100%;height:150px;margin-top:8px}
.ins-bar-g{cursor:pointer}
.ins-bar-g:hover rect{opacity:.8}
.ins-conn{fill:var(--accent)}
.ins-not{fill:var(--line)}
.ins-line{fill:none;stroke:var(--ok);stroke-width:1.4;vector-effect:non-scaling-stroke}
.ins-axis{display:flex;justify-content:space-between;font-size:11px;color:var(--faint)}
.ins-step{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;padding:7px 0;border-bottom:1px solid var(--hair)}
.ins-step a{color:var(--ink)}
.ins-lost{margin-left:auto}
.ins-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:0 0 16px}
.ins-group{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--card)}
.ins-group.ins-reached{border-top:3px solid var(--ok)}
.ins-group.ins-noPickup{border-top:3px solid var(--warn)}
.ins-group.ins-blocked{border-top:3px solid var(--accent)}
.ins-group.ins-failed{border-top:3px solid var(--bad)}
.ins-group a{color:var(--ink)}
.ins-big{font-size:22px;font-weight:700;margin:4px 0 6px;font-variant-numeric:tabular-nums}
.ins-big small{font-size:12px;color:var(--muted);font-weight:600}
.ins-item{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:12.5px;border-top:1px solid var(--hair)}
.ins-item .grow{flex:1}
.ins-rank,.ins-dist{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(60px,1fr) auto;gap:10px;align-items:center;
  padding:6px 0;border-bottom:1px solid var(--hair);color:var(--ink);text-decoration:none}
.ins-rank:hover,.ins-dist:hover{background:var(--hair)}
.ins-rank-bar{position:relative;height:8px;border-radius:4px;background:var(--hair);overflow:hidden}
.ins-rank-bar>span{position:absolute;left:0;top:0;bottom:0;background:var(--accent-soft);border-right:2px solid var(--accent)}
.ins-rank-bar>span.met{background:var(--accent);border:0}
.ins-endings{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.ins-ending{border:1px solid var(--line);border-radius:8px;padding:6px 10px;color:var(--ink);background:var(--card)}
.ins-table td a{color:var(--ink)}
.ins-sort{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;font-weight:600}
.ins-sort:hover{background:none;color:var(--accent)}
.ins-spark{display:block;width:90px;height:20px}
.ins-spark path{fill:none;stroke:var(--accent);stroke-width:1.4;vector-effect:non-scaling-stroke}
.ins-marker{stroke:var(--bad);stroke-width:1.2;vector-effect:non-scaling-stroke}
.ins-heat{border-collapse:separate;border-spacing:2px;font-size:11px;margin:8px 0}
.ins-heat th{font-weight:500;color:var(--faint);padding:0 2px;text-align:center}
.ins-heat th.legal{color:var(--ink)}
.ins-cell{width:30px;height:24px;text-align:center;border-radius:4px;cursor:pointer;color:var(--ink);
  background:color-mix(in srgb,var(--accent) calc(var(--r,0) * 85%),var(--hair))}
.ins-cell.thin{background:var(--hair);color:var(--faint)}
.ins-cell.empty{background:transparent;cursor:default;outline:1px dashed var(--hair)}
.ins-cell.legal.empty{outline-color:var(--line)}
.ins-cell:not(.empty):hover{outline:2px solid var(--accent)}
.ins-window{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--hair);padding-top:10px;margin-top:6px}
.ins-goals{display:flex;gap:6px;align-items:flex-end;overflow-x:auto;padding-bottom:6px;margin-bottom:12px}
.ins-goal-day{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:44px;color:var(--ink);text-decoration:none}
.ins-goal-bar{position:relative;width:18px;height:70px;background:var(--hair);border-radius:4px;overflow:hidden}
.ins-goal-bar>span{position:absolute;left:0;right:0;bottom:0;background:var(--accent)}
.home-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin:0 0 14px}
.home-attn-i{display:flex;gap:12px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--hair);color:var(--ink);text-decoration:none}
.home-attn-i b{min-width:28px;font-size:18px;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.home-live-i{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--hair)}
.home-live-i .grow{flex:1}
.home-best{margin:0 0 14px}
.home-best-strip{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:4px;margin:8px 0}
.home-best-h{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;border-radius:6px;font-size:11px;
  background:color-mix(in srgb,var(--accent) calc(var(--r,0) * 70%),var(--hair));color:var(--ink)}
.home-best-h.thin{background:var(--hair);color:var(--faint)}
.home-best-h.best{outline:2px solid var(--accent)}
@media (max-width:720px){
  .ins-rank,.ins-dist{grid-template-columns:minmax(0,1fr) auto}
  .ins-rank-bar{display:none}
  .home-best-strip{grid-template-columns:repeat(6,minmax(0,1fr))}
}

/* ==== G21: console foundation ======================================================================
   Seven destinations and Settings in the rail, a destination's tabs under the top bar, Settings' own
   sub-navigation, the account menu, one receipt, a drawer and a filter bar. Same tokens as everything
   above; flame stays the one primary thing on each screen, so none of these use it (review of G21: the lit
   destination tab was flame too, a second flame beside Calls' Export and Insights' own lit tab). */

/* The rail: Settings sits below the seven, after a hairline. */
.nav-sep{height:1px;background:var(--line);margin:10px 10px}

/* A destination's pages as tabs, under the top bar. */
.dest-tabs{display:flex;gap:2px;padding:0 26px;border-bottom:1px solid var(--line);background:var(--card);overflow-x:auto}
.dest-tab{padding:10px 12px 9px;font-size:13px;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;text-decoration:none}
.dest-tab:hover{color:var(--ink)}
.dest-tab.on{color:var(--accent-ink);border-bottom-color:var(--accent);font-weight:600}
/* A page with its own tab row (Insights' views) carries its destination's other pages at the end of that
   row instead of a second strip above it: one row of tabs. They are links (they leave the page), so they
   never light up; a hairline sets them apart from the views. */
.ins-views{display:contents}
.ins-tabs{flex-wrap:wrap}
.tab-sibs{display:flex;gap:2px;margin-left:auto;padding-left:10px;border-left:1px solid var(--line);align-self:center}
.tab-sib{padding:9px 12px;font-size:13px;font-weight:500;color:var(--muted);white-space:nowrap;text-decoration:none}
.tab-sib:hover{color:var(--ink)}

/* Settings: its sub-navigation is a column beside the section's content. */
.page.with-settings{grid-template-columns:220px minmax(0,1fr)}
.page.with-settings.with-rail{grid-template-columns:220px minmax(0,1fr) 272px}
.set-nav{position:sticky;top:0;align-self:start;padding:18px 10px 40px 18px;display:flex;flex-direction:column;gap:1px}
.set-nav-g{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:12px 10px 4px}
.set-nav-g:first-child{padding-top:0}
.set-nav-i{display:block;padding:6px 10px;border-radius:7px;font-size:13px;color:var(--ink);text-decoration:none}
.set-nav-i:hover{background:var(--hair)}
.set-nav-i.on{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}

/* The account menu: the initials in a circle, and a menu under them. */
.acct{position:relative;flex:none}
.acct-btn{width:32px;height:32px;padding:0;border-radius:999px;background:var(--accent-soft);border:1px solid var(--line);
          color:var(--accent-ink);display:inline-flex;align-items:center;justify-content:center}
.acct-btn:hover{background:var(--hair);color:var(--ink);border-color:var(--line)}
.acct-av{font-size:11.5px;font-weight:600;letter-spacing:.02em}
.acct-back{position:fixed;inset:0;z-index:300;background:transparent}
.acct-menu{position:absolute;right:0;top:40px;z-index:301;min-width:230px;background:var(--card);border:1px solid var(--line);
           border-radius:10px;box-shadow:var(--e2);padding:6px;display:flex;flex-direction:column}
.acct-who{padding:8px 10px 10px;border-bottom:1px solid var(--hair);margin-bottom:4px;display:flex;flex-direction:column;gap:2px}
.acct-who b{font-size:13px} .acct-who span{font-size:11.5px;color:var(--muted);overflow-wrap:anywhere}
.acct-h{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:10px 10px 3px}
.acct-i{display:flex;align-items:center;gap:6px;width:100%;text-align:left;padding:7px 10px;border-radius:7px;font-size:13px;
        background:none;border:0;color:var(--ink);text-decoration:none;font-weight:400}
.acct-i:hover,.acct-i:focus{background:var(--hair);color:var(--ink);outline:none}
.acct-i:focus-visible{outline:2px solid var(--focus-border);outline-offset:-2px;box-shadow:none}
.acct-tick{display:inline-block;width:14px;color:var(--accent-ink)}
.acct-sep{height:1px;background:var(--hair);margin:6px 0}
.acct-err{font-size:12px;color:var(--bad);padding:4px 10px}

/* One receipt, bottom-left. The live region stays on the page; only its words change. */
.receipt-host{position:fixed;left:20px;bottom:20px;z-index:400;max-width:min(460px,calc(100vw - 32px))}
/* Round 2 (design-r2 final.md 5.18): a white card on the success edge with the tick, the words and a
   tertiary Undo; no dark slab, so the content area keeps its one navy-ink object. */
.receipt{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;background:var(--card);color:var(--ink);border:1px solid var(--ok-edge);border-radius:12px;
         padding:6px 6px 6px 14px;box-shadow:var(--e2);font-size:14px;line-height:20px}
.receipt-i{flex:none;color:var(--ok-ink)}
.receipt-t{flex:1 1 auto;min-width:0}
.receipt-undo{min-height:44px;background:none;border:0;padding:0 12px;border-radius:8px;color:var(--accent);font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.receipt-undo:hover{background:var(--accent-soft);color:var(--accent-ink)}
.receipt-x{min-width:44px;min-height:44px;justify-content:center;background:none;border:0;padding:0;border-radius:8px;color:var(--muted);font-size:18px;line-height:1}
.receipt-x:hover{background:var(--hair);color:var(--ink)}

/* A drawer from the right, over a dim that closes it. */
.drawer-back{position:fixed;inset:0;z-index:250;background:rgba(20,30,50,.30)}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:251;width:min(480px,100vw);background:var(--card);
        border-left:1px solid var(--line);box-shadow:-14px 0 34px rgba(16,24,40,.18);display:flex;flex-direction:column}
.drawer.wide{width:min(760px,100vw)}
.drawer-h{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.drawer-h h2{flex:1;font-size:15px;margin:0}
.drawer-x{font-size:18px;line-height:1;padding:2px 8px}
.drawer-b{flex:1;overflow:auto;padding:18px 20px}
.drawer-f{padding:12px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}

/* A filter bar whose chips are the address's query. */
.filter-bar{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.chip-x{background:none;border:0;padding:0 0 0 6px;color:inherit;font-size:13px;line-height:1}
.chip-x:hover{background:none;color:inherit}

/* One language per tile now, so a tile's sub-line wraps instead of cutting a Hindi sentence with "…". */
.stat .sub{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}

@media(max-width:1180px){.page.with-settings.with-rail{grid-template-columns:220px minmax(0,1fr)}}
@media(max-width:720px){
  .dest-tabs{padding:0 16px}
  .page.with-settings,.page.with-settings.with-rail{grid-template-columns:minmax(0,1fr)}
  .set-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:4px;padding:12px 16px 0}
  .set-nav-g{display:none}
  .set-nav-i{border:1px solid var(--line);font-size:12.5px}
  .receipt-host{left:16px;bottom:16px}
}

/* ==== G24: Improve (suggested edits, Health) beside Test ==== */
/* The right column holds two tabs; each pane fills what the tabs leave. */
.bd-test{display:flex;flex-direction:column}
.bd-right-tabs{margin-bottom:8px;flex:none}
.bd-right-tabs button.on{border-bottom-color:var(--accent)}   /* the flame stays on Publish: one flame a screen */
.bd-pane{flex:1;min-height:0}
.health-pill{border:0;cursor:pointer;padding:4px 10px}
.imp{display:flex;flex-direction:column;height:100%;border:1px solid var(--line);border-radius:12px;background:var(--card);overflow:hidden}
.imp-views{display:flex;gap:2px;border-bottom:1px solid var(--line);padding:0 8px;flex:none}
.imp-views button{background:none;border:0;border-bottom:2px solid transparent;border-radius:0;padding:8px 10px;color:var(--muted);font-size:12.5px}
.imp-views button.on{color:var(--accent-ink);border-bottom-color:var(--accent);font-weight:600}
.imp-log,.imp-health{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.imp-foot{border-top:1px solid var(--hair);padding:10px 12px;display:flex;flex-direction:column;gap:8px;flex:none}
.imp-applied{margin:0 12px 8px}
.edit-card,.finding{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--card);display:flex;flex-direction:column;gap:6px;font-size:12.5px}
.edit-card.accepted{border-color:var(--ok);background:var(--ok-soft)}
.edit-card.rejected{opacity:.6}
.ec-h,.ec-a{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ec-h .grow,.ec-a .grow{flex:1}
.ec-diff{font-size:12.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word;background:var(--bg);border-radius:6px;padding:6px 8px}
.diff-del{background:var(--bad-soft);color:var(--bad-ink);text-decoration:line-through}
.diff-add{background:var(--ok-soft);color:var(--ok-ink);text-decoration:none}
.diff-ctx{color:var(--muted)}
.refusal{border:1px solid #F3DDB8;background:var(--warn-soft);color:var(--warn-ink);border-radius:10px;padding:10px 12px;font-size:12.5px;display:flex;flex-direction:column;gap:4px}
.finding.broken,.finding.violation{border-left:3px solid var(--bad)}
.finding.warn,.finding.warning{border-left:3px solid var(--warn)}
.warn-text{color:var(--warn)}
.declare{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:center;font-size:12px}
.declare .btn{grid-column:2;justify-self:start}
.imp-review{border-top:1px solid var(--hair);padding-top:10px;display:flex;flex-direction:column;gap:8px}
/* G24 review: a list or object edit as rows in plain words, its JSON behind a toggle */
.ec-rows{width:100%;border-collapse:collapse;font-size:12.5px;background:var(--bg);border-radius:6px}
.ec-rows td{padding:4px 8px;vertical-align:top;border-top:1px solid var(--hair);word-break:break-word}
.ec-rows tr:first-child td{border-top:0}
.ec-rows .ec-row-k{white-space:nowrap;color:var(--muted);width:1%}
.ec-rows del,.ec-rows ins{display:inline-block;margin-left:6px;padding:0 3px;border-radius:3px}
.ec-json summary{cursor:pointer;font-size:12px;color:var(--muted)}
.ec-json pre{font-size:11.5px;white-space:pre-wrap;word-break:break-word;max-height:220px;overflow:auto;margin:6px 0 0}

/* ---- Screens handback (27 Sep 2026): a ghost LINK drawn as a button is quiet too ----
   Only button.ghost had its quiet look, so every <a class="btn ghost"> (Home's Continue on each agent
   row, the editor's Guided journey ...) drew as a filled navy button beside the page's one flame action.
   verify_nav_redirects P20. */
/* (dropped at the 4 Oct 2026 merge: the kit's rule above decides this selector) */
/* (dropped at the 4 Oct 2026 merge: the kit's rule above decides this selector) */
.topbar a.btn.ghost{color:var(--ink)}

/* G23: the agent editor in plain words -- Hear it, the prompt field's tools, goals as rules, one list of
   actions, presets, the silence timeline, Ends when, call length and the voicemail card. Appended only. */
.hear{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:6px}
.hear-btn{padding:4px 10px;font-size:12px}
.hear-audio{width:100%;max-width:420px;margin-top:6px}
.pt{position:relative;margin-top:8px}
.pt-chips,.pt-pills{margin-top:6px;align-items:center}
.pt-menu{position:absolute;z-index:20;top:0;left:0;min-width:220px;max-height:240px;overflow:auto;background:var(--card);
  border:1px solid var(--line);border-radius:8px;box-shadow:var(--e2);padding:4px}
.pt-menu-g{font-size:11px;font-weight:600;color:var(--muted);padding:6px 8px 2px}
.pt-menu-i{display:block;width:100%;text-align:left;background:none;border:0;border-radius:6px;padding:5px 8px;
  font-family:var(--mono);font-size:12px;color:var(--ink)}
.pt-menu-i:hover,.pt-menu-i:focus{background:var(--accent-soft);color:var(--accent-ink)}
.tryit{margin-top:6px}
.tryit-row{display:flex;gap:8px;align-items:center}
.tryit-row input{flex:1;min-width:0}
.tryit-out{margin-top:6px;padding:8px 10px;border-radius:8px;background:var(--hair);font-size:13px}
.packs{margin:10px 0 4px}
.goal-row.primary{border-color:var(--accent)}
.goal-row .grow,.act-row .grow{flex:1}
.goal-rule{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.goal-rule select,.goal-rule input{width:auto;min-width:0;max-width:100%}
.goal-rule .goal-name{flex:1;min-width:140px}
.goal-say{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;margin-top:8px;font-size:13px}
.act-result{margin-top:8px;display:flex;flex-direction:column;gap:4px}
.act-reply{white-space:pre-wrap;word-break:break-word;max-height:180px;overflow:auto;margin:0;font-size:11.5px}
.act-secret{margin-top:8px;flex-wrap:wrap;gap:8px}
.act-secret input{width:auto;min-width:160px}
.act-advanced{margin-top:8px;border:0}
.act-advanced .foldhead{padding:6px 0;font-size:12px}
.act-advanced .foldbody{padding:4px 0}
.preset-row{display:flex;flex-direction:column;gap:6px;padding:10px 0;border-top:1px solid var(--hair)}
.preset-row:first-of-type{border-top:0}
.preset-q{font-size:13px;font-weight:600}
.presets .seg{flex-wrap:wrap}
.tl-line{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;margin:4px 0 8px}
.tl-step b{font-family:var(--mono);font-weight:600}
.tl-defaults{margin:6px 0 8px 18px;font-size:13px}
.tl-hear{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.ends{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:8px;font-size:13px}
.ends li{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.calllen{margin-top:10px}
.limit-line{display:block;margin-top:4px;font-style:italic}
.vm-card{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:10px}
.vm-progress{margin-top:6px;max-width:320px}
@media (max-width:720px){.tryit-row{flex-direction:column;align-items:stretch}.goal-rule select,.goal-rule input{width:100%}}
/* ---- G27: carriers and numbers ----
   Settings › Telephony › Carriers: your connections (conn-), "Check it" and its history (chk-), the provider
   tiles with their capability chips (prov-, cap-chips), Technical details (tech-). Phone lines: the Add
   numbers menu, Added/Updated under a number, and the find-my-numbers list (scan-). */
.g27-h{font-size:13.5px;font-weight:600;margin:18px 0 8px}
.conn-list{display:flex;flex-direction:column;gap:8px}
.conn-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:12px;align-items:center;
  border:1px solid var(--line);border-radius:10px;padding:10px 14px;background:var(--card)}
.conn-name{font-weight:600}
.conn-state{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.conn-acts{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.chk-items,.chk-history{display:flex;flex-direction:column;gap:6px;margin:2px 0 6px 14px;font-size:12.5px}
.chk-item,.chk-hrow{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.chk-hdetail{color:var(--muted)}
.prov-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px;margin-top:10px}
.prov-tile{border:1px solid var(--line);border-radius:10px;padding:14px;background:var(--card);display:flex;flex-direction:column;gap:8px}
.prov-tile .ghost{align-self:flex-start;margin-top:auto}
.prov-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.prov-pitch{font-size:12.5px;color:var(--muted);line-height:1.45}
.cap-chips{display:flex;flex-wrap:wrap;gap:5px}
.cap-chips .chip{font-size:11px;padding:2px 8px}
.tech-head{margin-top:18px;border:1px solid var(--line);border-radius:10px}
.tech-body{padding-top:12px}
.sip-steps{margin:6px 0 0 18px;padding:0;font-size:12.5px;line-height:1.5}
.add-menu-list{min-width:280px}
.add-menu-list button{display:flex;flex-direction:column;gap:2px}
.add-menu-list .help{font-weight:400}
.num-dates{font-size:11px;color:var(--faint);margin-top:2px}
.scan-bar{display:flex;gap:8px;align-items:flex-end}
.scan-list{display:flex;flex-direction:column;gap:2px;margin-top:8px;max-height:320px;overflow:auto}
.scan-row{display:flex;align-items:center;gap:10px;padding:5px 4px;border-bottom:1px solid var(--hair);font-size:13px}
@media (max-width:700px){
  .conn-row{grid-template-columns:minmax(0,1fr)}
  .conn-acts{justify-content:flex-start}
  .scan-bar{flex-direction:column;align-items:stretch}
}

/* THE PROOF OF THE MERGE (28 Sep 2026): a switch inside a two-column grid kept `.grid2 input{width:100%}`, which
   comes after `.sw input{width:auto}` at the same specificity, so its checkbox stretched across half the row, far
   from its words ("Let callers interrupt", "Detect an answering machine"). verify_nav_redirects P21. */
.grid2 .sw input{width:auto;padding:0;border:0}

/* THE PROOF OF THE MERGE: a fold's header (Phone lines' Groups: its name, its count and its tagline) squeezed into
   three thin columns at 375 px. On a narrow screen it wraps and the tagline takes a line of its
   own. verify_nav_redirects P22. */
@media (max-width:700px){
  .foldhead{flex-wrap:wrap;row-gap:4px}
  .foldhead>.grow+.help{flex-basis:100%;white-space:normal;padding-left:20px}
}

/* THE PROOF OF THE MERGE: Calls' and Insights' filters (.clog-bar) drew every select as a full-width row, so the list
   began a screen down at 1440 px; in the bar a select is as wide as its words, and takes the row below 700 px. A call's
   end reason wraps to two lines rather than "At the end of the conve…". verify_nav_redirects P23. */
.clog-bar select{width:auto;max-width:280px}
.clog-row .l2[title]{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@media (max-width:700px){.clog-bar select{width:100%;max-width:none}}

/* Settings > Keys & developers (G10a): the screen's one flame element is "Create a test key". Dark ink,
   not white: white on flame is about 2.9:1, under WCAG AA for normal text; #1A1F2B is 6.0:1 on the light
   flame and 7.6:1 on the dark theme's, and stays dark in both themes (var(--ink) turns light in dark mode). */
/* (dropped at the 4 Oct 2026 merge: the kit's rule above decides this selector) */
/* (dropped at the 4 Oct 2026 merge: the kit's rule above decides this selector) */

/* Your Nod (spec 2026-10-01 section 3.9): the character builder on the agent wizard's first step. Layout only; the
   character's own CSS comes with the rig (js/nodbuilder.js installs it once). */
.nodb{display:grid;grid-template-columns:minmax(220px,260px) 1fr;gap:22px;align-items:start;margin-top:12px}
@media (max-width:760px){.nodb{grid-template-columns:1fr}}
.nodb-stage{display:flex;flex-direction:column;align-items:center;gap:8px;position:sticky;top:12px}
.nodstage{width:200px;height:230px;cursor:pointer}
.nodstage svg{width:100%;height:100%;overflow:visible}
.nodb-label{font-size:12.5px;font-weight:600;color:var(--ink)}
.nodb-exprs{justify-content:center;max-width:260px}
.nodb-tools{display:flex;gap:8px;margin-top:4px}
.nodb-group h3{margin:12px 0 4px}
.nodb-group .help{margin-top:4px}
.nodb-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0}
.nodb-row>label{width:130px;font-size:12px;color:var(--muted)}
.nodb-row input[type=text]{padding:7px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;background:var(--card);color:var(--ink)}
.nodb-swatches{display:flex;gap:6px;flex-wrap:wrap}
.nodb-swatches button{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);padding:0;cursor:pointer}
.nodb-swatches button.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--accent)}
.seg.wrap{flex-wrap:wrap}

/* =====================================================================================
   ROUND 2 SHARED PARTS (design-r2 final.md section 5, "Studio, sharpened · Split Canvas").
   The recipes the ten round-2 screens are built from, as classes. Every name here is NEW: nothing above
   is restated (verify/verify_css_names.py), so no older screen changes. The components that draw some of
   them are OutcomePane, LiveTile, Connector (Components/Campaign), the Stepper's flow mode, CampaignSentence's
   slots, EmptyArt, Icon, ConfirmModal's change list and ReceiptHost.

   Which recipe is which class:
     5.1  split canvas .op-split / .op-work; master-detail .call-split / .call-list
     5.6  buttons .vbtn (+ .lg .sec .ter .danger .icon .quiet .on-dark)      5.7  .vpill .vkey .vtags .vcount .vtype
     5.8  cards .vpanel (-h -t -d -b -row -f)                               5.9  icon tiles .vtile (+ .md .sm; info done look none problem)
     5.10 .live-strip .live-tile* .live-band* .vmini                        5.11 compact table .vtbl.compact, .vtbl-foot .vtbl-name .vtbl-act
     5.13 .vfield .vlabel .vhelp .vinput .vselect .vsuffix .verror .vcaution 5.14 choice cards .vchoice*
     5.15 .vtick (checkbox row) .vswitch* (switch row)                      5.16 the flow Stepper .vflow*
     5.17 banners .vbanner (+ info ok warn bad calm compact)               5.19 change list .acc-diff .acc-impact (ConfirmModal)
     5.20 the ⋯ menu .vmenu (+ .pop, .vmenu-wrap, .vmenu-sep)               5.21 .vprogress* .vstacked .vlegend*
     5.22 mapping .cmap-* (Connector draws .cmap-pick)                      5.23 .vheadline .vissues/.vissue .vfix*
     5.24 upload .vdrop* .vfile* .vsheet                                    5.26 .vreview .vlink .vchecks
     5.27 .outcome-pane .op-* and the sentence's .cs-slot / .cs-on-dark     5.28 docks .vdock (+ .save) .vdock-*
     5.29 .vempty.framed .vempty-art .va-* .vempty-lock                     5.30 .live-outcomes .live-outcome* .vperson* .live-when .call-detail*
     5.31 admin .acc-*                                                      5.33 .vsr .vmono .vavatar; .vsaved (the receipt chip, 5.4)
   Colours come from the tokens, so the dark theme resolves as a set; the dark objects (the pane, the Live
   tile) are navy-ink in both themes. Phone rules (section 9) are at the end of the block.
   ===================================================================================== */
:root{--line-strong:#D4DAE3;--heading:#0C213F}
:root[data-theme="dark"]{--line-strong:#3A4352;--heading:#F2F5FA}

/* ---- 5.33 small parts ---- */
.vsr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.vmono{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.vic{flex:none;display:inline-block;vertical-align:middle}
.vic.ok{color:var(--ok-ink)}
.vic.warn{color:var(--warn)}
.vic.bad{color:var(--bad)}
.vic.info{color:var(--accent)}
.vavatar{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;border-radius:999px;background:var(--hair);color:var(--ink-2);font-size:13px;line-height:18px;font-weight:700}
.vavatar.me{background:var(--accent-soft);color:var(--accent)}
.vsaved{margin:0;display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:13px;line-height:18px;font-weight:500;color:var(--muted)}
.vsaved .vic{color:var(--ok-ink)}

/* ---- 5.6 buttons: primary by default (one per screen state) ---- */
.vbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--btn-ink);border-radius:8px;
      background:var(--btn);color:#fff;font:inherit;font-size:15px;line-height:20px;font-weight:600;text-decoration:none;white-space:nowrap;cursor:pointer;
      box-shadow:0 1px 2px rgba(12,33,63,.18),inset 0 1px 0 rgba(255,255,255,.10)}
.vbtn:hover{background:var(--btn-ink);border-color:var(--btn-ink);color:#fff}
.vbtn.lg{min-height:48px;padding:0 22px;font-size:16px;line-height:22px}
.vbtn.sec{padding:0 16px;border-color:var(--line-strong);background:var(--card);color:var(--ink);box-shadow:var(--e1)}
.vbtn.sec:hover{background:var(--hair);border-color:var(--line-strong);color:var(--ink)}
.vbtn.sec[aria-pressed="true"],.vbtn.sec[aria-expanded="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.vbtn.ter{padding:0 12px;border-color:transparent;background:transparent;color:var(--accent);box-shadow:none;text-decoration:underline;text-underline-offset:3px}
.vbtn.ter:hover{background:var(--accent-soft);border-color:transparent;color:var(--accent-ink)}
.vbtn.ter.arrow{text-decoration:none}
.vbtn.danger{border-color:#991B1B;background:#B91C1C;color:#fff;box-shadow:0 1px 2px rgba(127,29,29,.25)}
.vbtn.danger:hover{background:#991B1B;border-color:#7F1D1D;color:#fff}
.vbtn.icon{width:44px;height:44px;flex:none;padding:0;border-color:var(--line);background:var(--card);color:var(--ink-2);box-shadow:none}
.vbtn.icon:hover{background:var(--hair);border-color:var(--line);color:var(--ink)}
.vbtn.icon.quiet{border-color:transparent;background:transparent}
.vbtn.on-dark{padding:0 14px;border-color:#24467A;background:#12305A;color:#fff;font-size:14px;box-shadow:none}
.vbtn.on-dark:hover{background:var(--navy);border-color:#24467A;color:#fff}
.vbtn:disabled,.vbtn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}

/* ---- 5.7 pills and chips: a status pill starts with its icon, and the words say the status ---- */
.vpill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:var(--hair);
       color:var(--ink-2);font-size:13px;line-height:18px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.vpill.sm{height:24px;padding:0 8px}
.vpill.lg{height:28px;padding:0 12px}
.vpill.ok{background:var(--ok-soft);border-color:var(--ok-edge);color:var(--ok-ink)}
.vpill.warn{background:var(--warn-soft);border-color:var(--warn-edge);color:var(--warn-ink)}
.vpill.bad{background:var(--bad-soft);border-color:var(--bad-edge);color:var(--bad-ink)}
.vpill.info{background:var(--accent-soft);border-color:var(--info-edge);color:var(--accent)}
.vpill.neutral{background:var(--hair);border-color:var(--line);color:var(--ink-2)}
.vpill.outline{background:var(--card);border-color:var(--line-strong);color:var(--ink-2)}
.vpill.given{background:var(--card);border-color:var(--accent);color:var(--accent)}
.vpill.run::before{content:"";width:8px;height:8px;flex:none;border-radius:999px;background:var(--accent);box-shadow:0 0 0 3px var(--info-edge)}
.vkey{display:inline-flex;align-items:center;height:22px;padding:0 6px;border:1px solid var(--line);border-radius:6px;background:var(--bg);
      font-family:var(--mono);font-size:12px;line-height:16px;font-weight:500;color:var(--muted);white-space:nowrap}
.vtags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.vtags>li{display:inline-flex;align-items:center;height:28px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);
          font-size:13px;line-height:18px;font-weight:500;color:var(--ink)}
.vcount{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 7px;border-radius:999px;background:var(--hair);
        font-size:13px;line-height:18px;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
.vtype{font-size:13px;line-height:18px;color:var(--muted)}

/* ---- 5.8 cards ---- */
.vpanel{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--e1);min-width:0}
.vpanel-h{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px 16px;padding:20px 24px 18px}
.vpanel-hl{flex:1 1 320px;min-width:0;display:flex;align-items:flex-start;gap:14px}
.vpanel-t{margin:0;font-size:18px;line-height:26px;font-weight:600;letter-spacing:-.005em;color:var(--heading)}
.vpanel-d{margin:4px 0 0;font-size:14px;line-height:20px;color:var(--muted)}
.vpanel-b{padding:0 24px 24px}
.vpanel-row{padding:18px 24px;border-top:1px solid var(--hair)}
.vpanel-f{padding:16px 24px;background:var(--card-2);border-top:1px solid var(--line);border-radius:0 0 12px 12px;font-size:14px;line-height:20px;color:var(--muted)}

/* ---- 5.9 icon tiles by meaning ---- */
.vtile{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:10px;background:var(--accent-soft);color:var(--accent)}
.vtile.md{width:36px;height:36px}
.vtile.sm{width:32px;height:32px;border-radius:8px}
.vtile.done{background:var(--ok-soft);color:var(--ok-ink)}
.vtile.look{background:var(--warn-soft);color:var(--warn)}
.vtile.none{background:var(--hair);color:var(--ink-2)}
.vtile.problem{background:var(--bad-soft);color:var(--bad)}

/* ---- 5.13 fields: a label that reads as speech, a 44 px control on the one --control border ---- */
.vfield{display:flex;flex-direction:column;gap:6px;min-width:0}
.vlabel{font-size:14px;line-height:20px;font-weight:600;color:var(--ink)}
.vhelp{font-size:14px;line-height:20px;color:var(--muted)}
input.vinput,select.vinput{width:100%;height:44px;padding:0 12px;border:1px solid var(--control);border-radius:8px;background:var(--card);
  box-shadow:var(--e1);font:inherit;font-size:15px;line-height:22px;color:var(--ink)}
textarea.vinput{width:100%;height:auto;min-height:96px;padding:10px 12px;resize:vertical;border:1px solid var(--control);border-radius:8px;background:var(--card);
  box-shadow:var(--e1);font:inherit;font-size:15px;line-height:22px;color:var(--ink)}
input.vinput.tnum{font-family:var(--mono);font-variant-numeric:tabular-nums}
input.vinput:focus-visible,select.vinput:focus-visible,textarea.vinput:focus-visible{outline:2px solid transparent;border-color:var(--focus-border);box-shadow:var(--focus)}
input.vinput[aria-invalid="true"],select.vinput[aria-invalid="true"],textarea.vinput[aria-invalid="true"]{border-color:var(--bad);box-shadow:0 0 0 3px var(--bad-soft)}
.verror{margin:0;display:flex;align-items:flex-start;gap:6px;font-size:14px;line-height:20px;color:var(--bad-ink)}
.verror .vic{margin-top:2px}
.verror strong{font-weight:600}
.vcaution{display:inline-flex;align-items:flex-start;gap:6px;font-size:14px;line-height:20px;font-weight:600;color:var(--warn)}
.vcaution .vic{margin-top:3px}
.vselect{position:relative;display:block;min-width:0}
.vselect select.vinput{padding:0 40px 0 12px;-webkit-appearance:none;appearance:none;font-weight:500;cursor:pointer}
.vselect.has-ic select.vinput{padding-left:42px}
.vselect .vselect-ic{position:absolute;left:12px;top:12px;color:var(--muted);pointer-events:none}
.vselect .vselect-caret{position:absolute;right:12px;top:12px;color:var(--muted);pointer-events:none}
.vsuffix{display:flex;align-items:stretch;height:44px;border:1px solid var(--control);border-radius:8px;background:var(--card);overflow:hidden;box-shadow:var(--e1)}
.vsuffix:focus-within{border-color:var(--focus-border);box-shadow:var(--focus)}
.vsuffix input{flex:1 1 auto;min-width:0;width:auto;height:100%;padding:0 12px;border:0;border-radius:0;background:transparent;box-shadow:none;
               font:inherit;font-size:15px;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.vsuffix-t{display:inline-flex;align-items:center;padding:0 12px;border-left:1px solid var(--line);background:var(--card-2);font-size:14px;line-height:20px;color:var(--muted);white-space:nowrap}

/* ---- 5.14 choice cards: a question with its options visible (four or fewer) ---- */
.vchoice-set{margin:0;padding:0;border:0;min-width:0}
.vchoice-q{padding:0;margin:0 0 4px;font-size:16px;line-height:24px;font-weight:600;color:var(--heading)}
.vchoice-ex{margin:0 0 12px;font-size:14px;line-height:20px;color:var(--muted)}
.vchoice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.vchoice{display:flex;align-items:flex-start;gap:12px;min-height:48px;padding:16px;border:1px solid var(--line-strong);border-radius:12px;background:var(--card);
         box-shadow:var(--e1);cursor:pointer;min-width:0}
.vchoice:hover{border-color:var(--control)}
.vchoice>input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--accent);cursor:pointer}
.vchoice.on,.vchoice:has(>input:checked){padding:15px;border:2px solid var(--accent);background:var(--select);box-shadow:none}
.vchoice-b{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.vchoice-t{font-size:15px;line-height:22px;font-weight:600;color:var(--ink)}
.vchoice-d{font-size:14px;line-height:20px;color:var(--muted)}
/* the default choice's "Recommended" pill sits in its title line, so a narrow card never squeezes the words */
.vchoice-t .vpill{margin-left:8px;vertical-align:1px}
.vchoice.on .vchoice-t,.vchoice:has(>input:checked) .vchoice-t{color:var(--heading)}
.vchoice.on .vchoice-d,.vchoice:has(>input:checked) .vchoice-d{color:var(--ink-2)}
.vchoice-meta{font-size:13px;line-height:18px;color:var(--muted)}
.vchoice-needs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:6px}
.vchoice.big{padding:20px;gap:14px}
.vchoice.big.on,.vchoice.big:has(>input:checked){padding:19px}
.vchoice.big .vchoice-t{font-size:16px;line-height:24px}
.vchoice.disabled{border:1px dashed var(--line-strong);background:var(--card-2);box-shadow:none;cursor:not-allowed}
.vchoice.disabled>input{cursor:not-allowed}
.vchoice-why{display:inline-flex;align-items:flex-start;gap:6px;font-size:14px;line-height:20px;color:var(--muted)}
.vchoice-why .vic{margin-top:2px}
.vchoice-help{margin:10px 0 0;font-size:14px;line-height:20px;color:var(--muted)}

/* ---- 5.15 checkbox rows and switch rows (the switch always shows On or Off in words) ---- */
.vtick{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:12px 0;cursor:pointer}
.vtick>input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--accent);cursor:pointer}
.vtick-b{display:flex;flex-direction:column;gap:2px;min-width:0}
.vtick-t{font-size:15px;line-height:22px;font-weight:600;color:var(--ink)}
.vtick-d{font-size:14px;line-height:20px;color:var(--muted)}
.vswitch{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:16px 24px;background:var(--card-2);
         border-top:1px solid var(--line);border-radius:0 0 12px 12px;cursor:pointer}
.vswitch.boxed{padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.vswitch-b{display:flex;flex-direction:column;gap:2px;min-width:0}
.vswitch-t{font-size:15px;line-height:22px;font-weight:600;color:var(--ink)}
.vswitch-d{font-size:14px;line-height:20px;color:var(--muted)}
.vswitch-ctl{display:inline-flex;align-items:center;gap:10px;flex:none}
.vswitch-word{font-size:13px;line-height:18px;font-weight:600;color:var(--accent)}
.vswitch-ctl.off .vswitch-word,.vswitch-ctl:has(input:not(:checked)) .vswitch-word{color:var(--muted)}
.vswitch-box{position:relative;flex:none;width:44px;height:24px}
.vswitch-box>input{position:absolute;inset:0;width:44px;height:24px;margin:0;opacity:0;cursor:pointer;z-index:1}
.vswitch-track{display:block;width:44px;height:24px;border-radius:999px;background:var(--btn)}
.vswitch-knob{position:absolute;top:3px;left:23px;width:18px;height:18px;border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(12,33,63,.3)}
.vswitch-box>input:not(:checked)~.vswitch-track{background:var(--card);box-shadow:inset 0 0 0 1px var(--control)}
.vswitch-box>input:not(:checked)~.vswitch-knob{left:3px;background:var(--control);box-shadow:none}
.vswitch-box>input:focus-visible~.vswitch-track{box-shadow:var(--focus)}
.vswitch-box>input:not(:checked):focus-visible~.vswitch-track{box-shadow:inset 0 0 0 1px var(--focus-border),var(--focus)}
.vswitch-box>input:disabled{cursor:not-allowed}
.vswitch-box>input:disabled~.vswitch-track{opacity:.55}

/* ---- 5.16 the flow (Stepper with Current): one current step, the ember ---- */
.vflow{list-style:none;margin:0;padding:0 12px;display:flex;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--e1)}
.vflow>li{flex:1 1 176px;min-width:0;display:flex;padding:0 6px}
.vflow-s{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:12px;min-height:44px;padding:14px 4px 16px;border-top:4px solid var(--line);
         color:inherit;text-decoration:none;text-align:left}
.vflow button.vflow-s{margin:0;border:0;border-top:4px solid var(--accent);border-radius:0;background:none;box-shadow:none;font:inherit;color:inherit;cursor:pointer}
.vflow a.vflow-s:hover,.vflow button.vflow-s:hover{background:var(--select);border-color:var(--accent);color:inherit}
.vflow>li.done .vflow-s{border-top-color:var(--accent)}
.vflow>li.current .vflow-s{border-top-color:var(--flame)}
.vflow-n{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;border-radius:999px;background:var(--card);
         border:1px solid var(--control);color:var(--muted);font-size:14px;line-height:20px;font-weight:600}
.vflow>li.done .vflow-n{background:var(--btn);border-color:var(--btn);color:#fff}
.vflow-s[data-ember] .vflow-n{background:var(--flame);border-color:var(--flame);box-shadow:0 0 0 4px var(--flame-soft);color:var(--navy-ink);font-weight:700}
.vflow-t{display:flex;flex-direction:column;min-width:0}
.vflow-t>b{font-size:15px;line-height:22px;font-weight:500;color:var(--muted)}
.vflow>li.done .vflow-t>b{font-weight:600;color:var(--ink)}
.vflow>li.current .vflow-t>b{font-weight:700;color:var(--heading)}
.vflow-sub{font-size:13px;line-height:18px;color:var(--faint)}
.vflow>li.done .vflow-sub{font-weight:500;color:var(--ok-ink)}
.vflow>li.current .vflow-sub{font-weight:600;color:var(--accent)}
.vflow>li.blocked .vflow-sub{color:var(--warn)}

/* ---- 5.17 banners: the words stay ink, only the icon carries the colour; never a side stripe ---- */
.vbanner{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card);
         font-size:14px;line-height:20px;color:var(--ink)}
.vbanner>.vic{color:var(--accent)}
.vbanner-b{flex:1 1 auto;min-width:0}
.vbanner-b strong{display:block;font-weight:600}
.vbanner .vbtn{flex:none;margin:-12px -8px -12px 0}
.vbanner.info{background:var(--accent-soft);border-color:var(--info-edge)}
.vbanner.ok{background:var(--ok-soft);border-color:var(--ok-edge)}
.vbanner.ok>.vic{color:var(--ok-ink)}
.vbanner.warn{background:var(--warn-soft);border-color:var(--warn-edge)}
.vbanner.warn>.vic{color:var(--warn)}
.vbanner.bad{background:var(--bad-soft);border-color:var(--bad-edge)}
.vbanner.bad>.vic{color:var(--bad)}
.vbanner.calm{background:var(--select);border-color:var(--line)}
.vbanner.compact{padding:12px 14px;border-radius:10px}

/* ---- 5.20 the ⋯ menu: red only on its last item, after a divider. Inside a scrolling table wrapper a
   popover is clipped; open it from a cell that is not in .vtbl.compact's scroller, or position it fixed. ---- */
.vmenu-wrap{position:relative;display:inline-flex}
.vmenu{list-style:none;margin:0;padding:6px;width:240px;max-width:100%;border:1px solid var(--line);border-radius:12px;background:var(--card);box-shadow:var(--e2)}
.vmenu.pop{position:absolute;right:0;top:calc(100% + 4px);z-index:30;max-width:calc(100vw - 32px)}
.vmenu button,.vmenu a{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:8px;background:transparent;
                       box-shadow:none;font:inherit;font-size:15px;line-height:22px;font-weight:500;color:var(--ink);text-align:left;text-decoration:none;cursor:pointer}
.vmenu button:hover,.vmenu a:hover{background:var(--hair);color:var(--ink)}
.vmenu .vmenu-danger,.vmenu .vmenu-danger:hover{color:var(--bad-ink)}
.vmenu-sep{margin:6px 0;border-top:1px solid var(--hair)}

/* ---- 5.21 progress, stacked bar and its legend (the legend is the accessible content) ---- */
.vprogress-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;font-size:14px;line-height:20px}
.vprogress-k{font-weight:600;color:var(--ink)}
.vprogress-n{color:var(--muted);font-variant-numeric:tabular-nums}
.vprogress-track{height:8px;margin-top:8px;border-radius:999px;background:var(--hair);overflow:hidden}
.vprogress-fill{height:100%;border-radius:999px;background:var(--accent)}
.vprogress.sm .vprogress-track{height:6px;margin-top:6px}
.vprogress.cell{display:flex;flex-direction:column;min-width:140px}
.vprogress.on-dark .vprogress-k,.vprogress.on-dark .vprogress-n{color:var(--on-dark-3)}
.vprogress.on-dark .vprogress-track{background:#24467A}
.vprogress.on-dark .vprogress-fill{background:var(--on-dark-accent)}
.vstacked{display:flex;gap:2px;height:12px;border-radius:999px;overflow:hidden;background:var(--hair)}
.vstacked>span{min-width:6px}
.vs-ok{background:var(--ok)}
.vs-warn{background:var(--warn)}
.vs-handled{background:var(--c-other);box-shadow:inset 0 0 0 1px var(--c-other-edge)}
.vs-off{background:var(--muted)}
.vs-c1{background:var(--c1)}
.vs-c2{background:var(--c2)}
.vs-c3{background:var(--c3)}
.vlegend{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.vlegend>li{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--hair);border-radius:10px;background:var(--card-2)}
.vlegend-k{display:inline-flex;align-items:center;gap:8px;font-size:13px;line-height:18px;font-weight:600;color:var(--ink-2)}
.vlegend-sw{width:10px;height:10px;flex:none;border-radius:3px}
.vlegend-v{font-size:22px;line-height:28px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--heading)}

/* ---- 5.10 the live strip: the Live tile (the one dark object, its dot the one flame) and the stat band ---- */
.live-strip{display:flex;flex-wrap:wrap;align-items:stretch;gap:16px}
.live-tile{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:10px;padding:20px 22px;border-radius:12px;background:var(--navy-ink);color:var(--on-dark);
           box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 4px 12px -2px rgba(12,33,63,.18);--focus:var(--focus-on-dark);--focus-border:var(--focus-border-on-dark)}
.live-tile-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.live-tile-h{margin:0;display:flex;align-items:center;gap:10px;font-size:13px;line-height:18px;font-weight:600;color:var(--on-dark-2)}
.live-tile-dot{display:inline-block;width:10px;height:10px;flex:none;border-radius:999px;background:var(--flame);box-shadow:0 0 0 4px rgba(244,121,31,.25)}
.live-tile-title{margin:0;font-size:15px;line-height:22px;font-weight:600;color:var(--on-dark)}
.live-tile-num{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.live-tile-v{font-size:40px;line-height:46px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--on-dark)}
.live-tile-u{font-size:15px;line-height:22px;color:var(--on-dark-3)}
.live-tile-bars{display:flex;align-items:flex-end;gap:3px;height:20px}
.live-tile-bars>span{width:4px;border-radius:2px;background:var(--on-dark-accent)}
.live-tile a{color:var(--on-dark-accent)}
.live-tile a:hover{color:#B4CDF0}
.live-tile-link{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14px;line-height:20px;font-weight:600;text-decoration:none}
.live-tile-link:hover{text-decoration:underline;text-underline-offset:3px}
.live-band{flex:999 1 520px;min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--hair);
           border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--e1)}
.live-band>div{display:flex;flex-direction:column;gap:6px;padding:18px 20px;background:var(--card);min-width:0}
.live-band-k{font-size:13px;line-height:18px;font-weight:600;color:var(--muted)}
.live-band-v{font-size:28px;line-height:34px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--heading)}
.live-band-s{font-size:13px;line-height:18px;color:var(--muted);font-variant-numeric:tabular-nums}
.vmini{padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card-2)}
.vmini-k{display:block;font-size:13px;line-height:18px;font-weight:600;color:var(--muted)}
.vmini-v{display:block;font-size:28px;line-height:34px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--heading)}

/* ---- 5.11 the compact table (live monitor, permission matrices, preview tables): 14 px, 12 x 16 cells,
   44 px targets, sentence-case headers; it scrolls inside its own wrapper, never the page ---- */
.vtbl.compact{position:relative;flex:none;overflow-x:auto;overflow-y:visible}
.vtbl.compact table{table-layout:auto;min-width:640px;font-size:14px;line-height:20px}
.vtbl.compact.wide table{min-width:720px}
.vtbl.compact th{position:static;padding:10px 16px;background:var(--card-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
                 font-size:13px;line-height:18px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted);overflow:visible;text-overflow:clip}
.vtbl.compact td,.vtbl.compact tbody th{padding:12px 16px;border-bottom:1px solid var(--hair);vertical-align:middle;white-space:normal;overflow:visible;text-overflow:clip}
.vtbl.compact tbody th{background:none;border-top:0;font-size:inherit;line-height:inherit;font-weight:400;color:var(--ink);text-align:left}
.vtbl.compact th:first-child,.vtbl.compact td:first-child{padding-left:24px}
.vtbl.compact th:last-child,.vtbl.compact td:last-child{padding-right:24px}
.vtbl.compact tbody th.grp{padding:10px 24px;background:var(--card-2);border-bottom:1px solid var(--line);font-size:14px;line-height:20px;font-weight:600;color:var(--heading)}
.vtbl.compact tbody th.grp span{font-weight:400;color:var(--muted)}
/* only the table's last row drops its divider (5.11). A thead's one row is :last-child too, and the kit's
   .vtbl tr:last-child td drops it per tbody: a group's last row keeps it before the next group. */
.vtbl.compact tbody:last-child>tr:last-child>th{border-bottom:0}
.vtbl.compact tbody:not(:last-child)>tr:last-child>td,.vtbl.compact tbody:not(:last-child)>tr:last-child>th{border-bottom:1px solid var(--hair)}
/* U2-c: the row's own th (scope=row) takes the kit's row hover with its tds; a selected row stays selected */
.vtbl.compact tbody tr:not(.on):hover>th:not(.grp){background:var(--hair)}
.vtbl.compact tr.on>td,.vtbl.compact tr.on>th{background:var(--select)}
.vtbl.compact td.vmono{font-size:13px;line-height:18px}
.vtbl-name{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:600;color:var(--ink);text-decoration:none}
.vtbl-name .vic{color:var(--faint)}
.vtbl-sub{display:block;font-size:14px;line-height:20px;color:var(--muted)}
.vtbl-act{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 8px;font-size:14px;line-height:20px;font-weight:600;color:var(--accent);text-decoration:none}
.vtbl-act[aria-current="true"]{color:var(--heading)}
.vtbl-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:8px 24px;border-top:1px solid var(--line);
           background:var(--card-2);border-radius:0 0 12px 12px;font-size:14px;line-height:20px;color:var(--muted)}

/* ---- 5.27 the Outcome Pane (OutcomePane.razor): the one dark object on a builder or an editor ---- */
.op-split{display:flex;flex-wrap:wrap;align-items:flex-start;gap:24px}
.op-work{flex:999 1 520px;min-width:0;display:flex;flex-direction:column;gap:20px}
.outcome-pane{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:20px;padding:24px;border-radius:16px;background:var(--navy-ink);color:var(--on-dark);
              box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--e3);--focus:var(--focus-on-dark);--focus-border:var(--focus-border-on-dark)}
.outcome-pane a{color:var(--on-dark-accent)}
.outcome-pane a:hover{color:#B4CDF0}
.op-head{display:flex;flex-direction:column;gap:10px}
.op-eyebrow{margin:0;display:inline-flex;align-items:center;gap:10px;font-size:13px;line-height:18px;font-weight:600;color:var(--on-dark-4)}
.op-eyebrow-dot{width:8px;height:8px;flex:none;border-radius:999px;background:var(--on-dark-accent);box-shadow:0 0 0 4px rgba(138,180,232,.20)}
.op-sentence{font-size:18px;line-height:30px;color:var(--on-dark-2)}
/* the pane's colours come from the pane too, so a sentence put in it without OnDark is never navy on navy */
.sch-sentence.cs-on-dark,.outcome-pane .sch-sentence{font-size:18px;line-height:30px;color:var(--on-dark-2)}
.sch-sentence.cs-on-dark .sch-fill,.outcome-pane .sch-sentence .sch-fill{padding:0;border-bottom:0;font-weight:600;color:var(--on-dark)}
.sch-sentence.cs-on-dark button.sch-fill:hover,.outcome-pane .sch-sentence button.sch-fill:hover{background:#12305A;color:var(--on-dark)}
/* a file name is one piece on its line when it fits; one longer than the line wraps inside itself instead
   of pushing the pane (and the page) sideways at 390 px (section 9) */
.cs-mono{display:inline-block;max-width:100%;font-family:var(--mono);font-size:.84em;overflow-wrap:anywhere}
.sch-sentence.cs-on-dark .cs-mono,.outcome-pane .sch-sentence .cs-mono{font-weight:400}
.cs-slot{display:inline-flex;align-items:center;gap:6px;padding:0 8px;border:1px dashed var(--control);border-radius:6px;font-size:.84em;line-height:1.6;
         color:var(--muted);white-space:nowrap;vertical-align:baseline}
.cs-on-dark .cs-slot,.outcome-pane .cs-slot{border-color:#6F8DB8;color:var(--on-dark-3)}
.op-preview{display:flex;flex-direction:column;gap:14px;padding:16px;border:1px solid #24467A;border-radius:12px;background:#12305A}
.op-preview-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.op-preview-t,.op-sub{margin:0;font-size:13px;line-height:18px;font-weight:600;color:var(--on-dark-4)}
.op-text{margin:0;font-size:14px;line-height:20px;color:var(--on-dark-3)}
.op-divide{display:flex;flex-direction:column;gap:10px;padding-top:12px;border-top:1px solid #24467A}
.op-person{display:flex;align-items:center;gap:12px;min-width:0}
.op-avatar{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;border-radius:999px;background:var(--on-dark-accent);
           color:var(--navy-ink);font-size:14px;line-height:20px;font-weight:700}
.op-person-b{display:flex;flex-direction:column;min-width:0}
.op-person-n{font-size:15px;line-height:22px;font-weight:600;color:var(--on-dark)}
.op-person-num{font-family:var(--mono);font-size:13px;line-height:18px;color:var(--on-dark-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.op-person-row{font-size:13px;line-height:18px;color:var(--on-dark-4)}
.op-bubble{margin:0;padding:14px 16px;border-radius:12px 12px 12px 4px;background:var(--navy);font-size:15px;line-height:26px;color:var(--on-dark)}
.op-token{padding:1px 6px;border-radius:6px;background:var(--navy-ink);box-shadow:inset 0 -2px 0 var(--on-dark-accent);font-weight:600;color:var(--on-dark);white-space:nowrap}
.op-token.hole{border:1px dashed var(--on-dark-accent);box-shadow:none}
.op-from{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:6px 12px;font-size:14px;line-height:20px}
.op-from dt{color:var(--on-dark-4)}
.op-from dd{margin:0;color:var(--on-dark-2)}
.op-after{margin:0;display:flex;align-items:flex-start;gap:8px;font-size:14px;line-height:20px;color:var(--on-dark-2)}
.op-after .vic{margin-top:2px;color:var(--on-dark-accent)}
.op-after .vmono{color:var(--on-dark)}
.op-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:6px 12px}
.op-list>li{display:flex;align-items:flex-start;gap:8px;font-size:14px;line-height:20px;color:var(--on-dark-2)}
.op-list>li::before{content:"";width:6px;height:6px;flex:none;margin-top:7px;border-radius:999px;background:var(--on-dark-accent)}
.op-seg{display:inline-flex;border:1px solid #24467A;border-radius:8px;background:var(--navy-ink);overflow:hidden}
.op-seg button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 14px;border:0;border-radius:0;background:transparent;
               box-shadow:none;font:inherit;font-size:14px;line-height:20px;font-weight:600;color:var(--on-dark-3);white-space:nowrap;cursor:pointer}
.op-seg button:hover{background:#12305A;color:var(--on-dark)}
.op-seg button[aria-pressed="true"]{background:var(--on-dark-accent);color:var(--navy-ink)}
.op-ledger{margin:0;display:flex;flex-direction:column}
/* dl > div.op-row > dt + dd (the only children a dl's div may have), with the row's Change link INSIDE the
   dd, beside the value; the link's 44 px target hangs 11 px over the label and the padding, so a row stays
   the 62 px final.md 5.27 draws instead of growing by the target's height */
.op-row{padding:10px 0;border-top:1px solid #1E3A63}
.op-row dt{font-size:13px;line-height:18px;font-weight:600;color:var(--on-dark-4)}
.op-row dd{margin:2px 0 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
           font-size:15px;line-height:22px;font-weight:600;color:var(--on-dark)}
.op-row-v{flex:1 1 160px;min-width:0;overflow-wrap:anywhere}
.op-row dd>.op-link{margin:-11px 0}
.op-link{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 4px;border:0;border-radius:6px;background:none;box-shadow:none;font:inherit;
         font-size:14px;line-height:20px;font-weight:600;color:var(--on-dark-accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.op-link:hover{background:#12305A;border:0;color:#B4CDF0}
.op-pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border:1px solid #24467A;border-radius:999px;background:#12305A;
         font-size:13px;line-height:18px;font-weight:600;color:var(--on-dark-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.op-pill.ok{color:#86EFAC}
.op-pill.warn{color:#FDBA74}
.op-pill.bad{color:#FCA5A5}
.op-pill.info{color:var(--on-dark-accent)}
.op-note{margin:0;display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid #24467A;border-radius:10px;background:#12305A;
         font-size:14px;line-height:20px;color:var(--on-dark-2)}
.op-note .vic,.op-notes .vic{color:var(--on-dark-accent)}
.op-note strong,.op-notes strong{font-weight:600;color:var(--on-dark)}
.op-notes{list-style:none;margin:0;padding:14px;display:flex;flex-direction:column;gap:10px;border:1px solid #24467A;border-radius:10px;background:#12305A}
.op-notes>li{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:20px;color:var(--on-dark-2)}
.op-empty{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px dashed #24467A;border-radius:12px}
.op-empty-line{height:10px;width:60%;border-radius:999px;background:#12305A}
.op-empty-bubble{height:40px;border-radius:12px 12px 12px 4px;background:#12305A}
.op-mini{padding:12px 14px;border:1px solid #24467A;border-radius:10px;background:#12305A}
.op-mini-k{display:block;font-size:13px;line-height:18px;font-weight:600;color:var(--on-dark-4)}
.op-mini-v{display:block;font-size:28px;line-height:34px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--on-dark)}
.op-journey{list-style:none;margin:0;padding:0}
.op-journey>li{display:flex;gap:12px}
.op-journey-rail{display:flex;flex-direction:column;align-items:center;flex:none;width:28px}
.op-journey-ic{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid #24467A;border-radius:999px;
               background:var(--navy-ink);color:var(--on-dark-accent)}
.op-journey-spine{flex:1 1 auto;width:2px;min-height:14px;margin:4px 0;border-radius:999px;background:#24467A}
.op-journey>li:last-child .op-journey-spine{display:none}
.op-journey-b{display:flex;flex-direction:column;min-width:0;padding:2px 0 16px}
.op-journey-when{font-size:13px;line-height:18px;font-weight:600;color:var(--on-dark-4)}
.op-journey-t{font-size:15px;line-height:22px;font-weight:600;color:var(--on-dark)}
.op-journey-d{font-size:14px;line-height:20px;color:var(--on-dark-3)}
.op-week{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(30px,1fr));gap:6px}
.op-week>li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px}
.op-week-bar{position:relative;display:block;width:100%;max-width:28px;height:84px;border:1px solid #24467A;border-radius:6px;background:var(--navy-ink);overflow:hidden}
.op-week-fill{position:absolute;left:3px;right:3px;border-radius:4px;background:var(--on-dark-accent)}
.op-week-d{font-size:13px;line-height:18px;font-weight:600;color:var(--on-dark-2)}
.op-week>li.off .op-week-d{color:var(--on-dark-4)}
.op-estimate{margin:0;font-size:15px;line-height:22px;color:var(--on-dark-3)}
.op-estimate-v{display:block;font-size:40px;line-height:46px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--on-dark)}
.op-label{font-size:13px;line-height:18px;font-weight:600;color:var(--on-dark-2)}
.outcome-pane select.vinput{border-color:#6F8DB8;background:var(--navy-ink);box-shadow:none;color:var(--on-dark)}
.outcome-pane select.vinput:focus-visible{border-color:var(--focus-border);box-shadow:var(--focus)}
.outcome-pane .vselect .vselect-caret{color:var(--on-dark-4)}

/* ---- 5.22 mapping: a list of rows that reflow to one column on a phone (field, picker, samples) ---- */
.cmap-list{list-style:none;margin:0;padding:0}
.cmap-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px 20px;padding:20px 24px;border-top:1px solid var(--hair)}
.cmap-need{flex:1 1 180px;min-width:0;display:flex;flex-direction:column;gap:6px}
.cmap-need-t{font-size:16px;line-height:24px;font-weight:600;color:var(--heading)}
.cmap-need-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.cmap-need-d{font-size:14px;line-height:20px;color:var(--muted)}
.cmap-pick{flex:1 1 280px;min-width:0;display:flex;align-items:flex-start;gap:8px}
.cmap-line{flex:none;margin-top:38px}
.cmap-pick.bare .cmap-line{margin-top:0}
.cmap-line.matched{color:var(--accent)}
.cmap-line.check{color:var(--warn)}
.cmap-line.missing{color:var(--bad)}
.cmap-line.unused{color:var(--control)}
.cmap-field{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px}
.cmap-status{margin:0;display:inline-flex;align-items:flex-start;gap:6px;font-size:14px;line-height:20px;font-weight:600}
.cmap-status .vic{margin-top:2px}
.cmap-status.ok{color:var(--ok-ink)}
.cmap-status.accent{color:var(--accent)}
.cmap-status.warn{color:var(--warn)}
.cmap-status.muted{font-weight:500;color:var(--muted)}
.cmap-status.bad{display:flex;font-weight:400;color:var(--bad-ink)}
.cmap-status.bad strong{font-weight:600}
.cmap-samples{flex:1 1 100%;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px 14px;border:1px solid var(--hair);border-radius:8px;background:var(--card-2)}
.cmap-samples-k{font-size:13px;line-height:18px;font-weight:600;color:var(--muted)}
.cmap-samples-d{font-size:14px;line-height:20px;color:var(--muted)}
.cmap-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 8px;min-width:0;max-width:100%}
.cmap-chips>li{position:relative;display:inline-flex;align-items:center;gap:6px;height:28px;max-width:100%;padding:0 8px;border:1px solid var(--line);border-radius:6px;
               background:var(--card);font-family:var(--mono);font-size:13px;line-height:18px;color:var(--ink);white-space:nowrap;overflow:hidden}
.cmap-chips .vic{color:var(--faint)}
.cmap-was{color:var(--muted)}
.cmap-now{font-weight:500;color:var(--ink)}
.cmap-q{padding:20px 24px;border-top:1px solid var(--hair)}
.cmap-file{list-style:none;margin:0;padding:0}
.cmap-file>li{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;min-height:48px;padding:8px 24px;border-top:1px solid var(--hair)}
.cmap-col{display:inline-flex;align-items:center;gap:10px;min-width:0;font-size:15px;line-height:22px;font-weight:600;color:var(--ink)}
.cmap-col-ic{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:none;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--muted)}
.cmap-dest{display:inline-flex;align-items:center;gap:8px}
.cmap-dest>.vic{color:var(--faint)}
.cmap-foot{padding:16px 24px;background:var(--card-2);border-top:1px solid var(--line);border-radius:0 0 12px 12px;font-size:14px;line-height:20px;color:var(--muted)}
/* step 3's own parts (Task 8.6): the compact hold-back warning under a row, the managed agent's field chooser inside a
   question, one person's call in the pane, the success state inside an issue row */
.cmatch-note{flex:1 1 100%;margin:12px 0 0;display:flex;align-items:flex-start;gap:8px;padding:10px 14px;border:1px solid var(--warn-edge);border-radius:8px;
             background:var(--warn-soft);font-size:14px;line-height:20px;color:var(--warn-ink)}
.cmatch-note .vic{margin-top:2px;color:var(--warn)}
.cmap-row>.cmatch-note{margin:0}
.cmatch-fields{margin:14px 0 0;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--card-2)}
.cmatch-pv{display:flex;flex-direction:column;gap:14px;min-width:0}
.vissue>.vempty.cmatch-fixed{flex:1 1 100%}
.cmatch-check-f{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:8px 16px}

/* ---- 5.23 file check: the headline, then the bar and legend, then the issue rows and the fix panel ---- */
.vheadline{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.vheadline-v{font-size:40px;line-height:46px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--heading)}
.vheadline-u{font-size:16px;line-height:24px;color:var(--muted)}
.vissues{list-style:none;margin:0;padding:0}
.vissue{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:16px 24px;border-top:1px solid var(--hair)}
.vissue-b{flex:1 1 280px;min-width:0}
.vissue-t{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:16px;line-height:24px;font-weight:600;color:var(--heading)}
.vissue-d{margin:2px 0 0;font-size:14px;line-height:20px;color:var(--muted)}
.vfix{flex:1 1 100%;min-width:0;border:1px solid var(--line);border-radius:10px;background:var(--card);overflow:hidden}
.vfix-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:10px 16px;background:var(--card-2);border-bottom:1px solid var(--line)}
.vfix-t{margin:0;font-size:15px;line-height:22px;font-weight:600;color:var(--heading)}
.vfix-list{list-style:none;margin:0;padding:0}
.vfix-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px;padding:14px 16px;border-top:1px solid var(--hair)}
.vfix-list>.vfix-row:first-child{border-top:0}
.vfix-who{flex:1 1 200px;min-width:0}
.vfix-was{flex:1 1 140px;min-width:0;display:flex;flex-direction:column;gap:2px}
.vfix-was-k{font-size:13px;line-height:18px;font-weight:600;color:var(--muted)}
.vfix-in{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:6px}
.vfix-acts{display:flex;flex-wrap:wrap;gap:8px}
.vfix-f{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-top:1px solid var(--line);background:var(--card-2)}
.vperson{display:flex;align-items:center;gap:12px;min-width:0}
.vperson-b{display:flex;flex-direction:column;min-width:0}
.vperson-n{font-size:15px;line-height:22px;font-weight:600;color:var(--ink)}
.vperson-id{font-family:var(--mono);font-size:13px;line-height:18px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.vperson-mail{font-size:14px;line-height:20px;color:var(--muted);overflow-wrap:anywhere}

/* ---- 5.24 upload: the drop zone (its label shows the focus ring through :focus-within), the file row ---- */
.vdrop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:240px;padding:40px 24px;border:2px dashed var(--control);
       border-radius:12px;background:var(--card-2);text-align:center}
.vdrop.over{border-color:var(--accent);background:var(--select)}
.vdrop-ic{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.vdrop-t{margin:0;font-size:18px;line-height:26px;font-weight:600;color:var(--heading)}
.vdrop-d{margin:0;font-size:14px;line-height:20px;color:var(--muted)}
.vdrop-limits{margin:0;font-size:13px;line-height:18px;color:var(--muted)}
.vdrop-pick{position:relative;display:inline-flex}
.vdrop-pick>input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.vdrop-pick:focus-within>label{outline:2px solid var(--focus-border);outline-offset:2px;box-shadow:var(--focus)}
.vfile{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:18px 24px;border-top:1px solid var(--hair)}
.vfile-b{flex:1 1 240px;min-width:0}
.vfile-name{margin:0;font-family:var(--mono);font-size:15px;line-height:22px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vfile-meta{margin:2px 0 0;font-size:14px;line-height:20px;color:var(--muted);font-variant-numeric:tabular-nums}
.vsheet{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding:0 24px 20px}

/* ---- step 2 File (Task 8.5, final.md §8 screen 3): the drop zone takes a file dropped anywhere on it (its visually
   hidden input is spread, unseen, over the zone; the label stays the visible button and shows the ring through
   :focus-within); the reading state; the first rows in their own scrolling wrapper; the pane's row 1 ---- */
.cfile-zone,.cfile-reading{position:relative;margin:0 24px 24px}
.cfile-zone .vdrop-pick{position:static}
.cfile-zone .vdrop-pick>input.cfile-over{top:0;left:0;width:100%;height:100%;margin:0;clip:auto;opacity:0;cursor:pointer}
.cfile-progress{width:100%;max-width:420px;text-align:left}
.cfile-progress-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfile-row{padding:0 24px 20px}
.cfile-head-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin:12px 0 6px}
.cfile-head-row input.vinput{width:140px}
.cfile-pv-t{margin:0;padding:0 24px 8px;font-size:14px;line-height:20px;font-weight:600;color:var(--ink)}
.cfile-scroll{margin:0 24px 24px;border:1px solid var(--line);border-radius:10px}
.cfile-scroll th:first-child,.cfile-scroll td:first-child{width:1%}
.cfile-needs .vchecks-t .vpill{margin-left:6px;vertical-align:1px}
.cfile-needs-more{margin:0}
.cfile-sample{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding-top:10px;padding-bottom:10px}
.cfile-sample .vbtn.ter{margin-left:-12px;max-width:calc(100% + 12px);padding-top:10px;padding-bottom:10px;white-space:normal;text-align:left}
.cfile-pv{display:flex;flex-direction:column;gap:14px}
.cfile-from{margin:0;display:grid;gap:8px}
.cfile-mini{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid #24467A;border-radius:10px;background:#12305A;min-width:0}
.cfile-mini dt{font-size:13px;line-height:18px;font-weight:600;color:var(--on-dark-4)}
.cfile-mini-from{font-weight:400}
.cfile-mini dd{margin:0;font-family:var(--mono);font-size:14px;line-height:20px;color:var(--on-dark);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}

/* ---- 5.26 review sections (a card whose header holds a Change link) and checks ---- */
.vreview{margin:0;padding:0 24px 22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px 24px}
.vreview dt{font-size:13px;line-height:18px;font-weight:600;color:var(--muted)}
.vreview dd{margin:2px 0 0;font-size:15px;line-height:22px;color:var(--ink);overflow-wrap:anywhere}
.vlink{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;border:0;background:none;box-shadow:none;font:inherit;font-size:14px;line-height:20px;
       font-weight:600;color:var(--accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.vlink:hover{background:var(--accent-soft);border:0;color:var(--accent-ink)}
.vchecks{list-style:none;margin:0;padding:0}
.vchecks>li{display:flex;align-items:flex-start;gap:12px;padding:14px 24px;border-top:1px solid var(--hair)}
.vchecks-b{min-width:0}
.vchecks-t{margin:0;font-size:15px;line-height:22px;font-weight:600;color:var(--ink)}
.vchecks-d{margin:2px 0 0;font-size:14px;line-height:20px;color:var(--muted)}

/* ---- 5.28 the action dock (one primary, the hint says why Next is blocked) and the save dock (its dot is
   the editor's flame while changes are not saved: the .vdock-dot carries data-ember, as the flow's current
   step and the Live tile's dot do, so a page counts its flames by [data-ember]). ActionDock.razor draws both;
   .vdock-end keeps to the right with no Back before it (step 1) ---- */
.vdock{position:sticky;bottom:16px;z-index:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;padding:12px 16px 12px 12px;
       background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--e2)}
.vdock.save{padding:12px 16px}
.vdock-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 16px;min-width:0;margin-left:auto}
.vdock-hint{font-size:14px;line-height:20px;color:var(--muted)}
.vdock-hint.blocked{display:inline-flex;align-items:flex-start;gap:6px;font-weight:600;color:var(--bad-ink)}
.vdock-hint.blocked .vic{margin-top:2px}
.vdock-state{margin:0;display:flex;align-items:flex-start;gap:12px;min-width:0}
.vdock-dot{width:10px;height:10px;flex:none;margin-top:6px;border-radius:999px;background:var(--flame);box-shadow:0 0 0 4px var(--flame-soft)}
.vdock-state strong{display:block;font-size:15px;line-height:22px;font-weight:600;color:var(--heading)}
.vdock-state-d{font-size:14px;line-height:20px;color:var(--muted)}
.vdock-acts{display:flex;flex-wrap:wrap;gap:8px}

/* ---- 5.29 empty and success states: the only place for an illustration (EmptyArt) ---- */
.vempty.framed{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:48px 24px;background:var(--card);border:1px dashed var(--line-strong);border-radius:12px;font-size:15px;line-height:24px;color:var(--muted)}
.vempty.framed h2{margin:4px 0 0;font-size:18px;line-height:26px;font-weight:600;color:var(--heading)}
.vempty.framed p{margin:0;max-width:440px}
.vempty-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.vempty-art{display:block;max-width:100%;height:auto}
.vempty-lock{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:999px;background:var(--hair);color:var(--ink-2)}
.va-blob{fill:var(--accent-soft)}
.va-card{fill:var(--card);stroke:var(--c-other)}
.va-c1{fill:var(--c1)}
.va-c2{fill:var(--c2)}
.va-c3{fill:var(--c3)}
.va-line{fill:var(--c-other)}
.va-navy{fill:var(--btn)}
.va-plus,.va-tick{stroke:#fff}
.va-ring{stroke:var(--c2)}
.va-ok{fill:var(--ok)}
.va-oksoft{fill:var(--ok-soft)}

/* ---- 5.30 the live run: outcome tiles that filter the people, the person cell, the call detail panel ---- */
.live-outcomes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.live-outcome{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;min-height:100px;margin:0;padding:14px 16px;border:1px solid var(--line);
              border-radius:12px;background:var(--card);box-shadow:var(--e1);font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.live-outcome:hover{background:var(--card-2);border-color:var(--line-strong);color:var(--ink)}
.live-outcome[aria-pressed="true"]{padding:13px 15px;border:2px solid var(--accent);background:var(--select);box-shadow:none}
.live-outcome-k{display:inline-flex;align-items:center;gap:6px;font-size:14px;line-height:20px;font-weight:600;color:var(--ink)}
.live-outcome-v{font-size:28px;line-height:34px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--heading)}
.live-outcome-s{font-size:13px;line-height:18px;color:var(--muted)}
.live-when{display:block;margin-top:4px;font-size:13px;line-height:18px;color:var(--muted);font-variant-numeric:tabular-nums}
.call-split{display:flex;flex-wrap:wrap;align-items:flex-start;gap:24px}
.call-list{flex:999 1 560px;min-width:0}
.call-detail{flex:1 1 340px;min-width:0;align-self:flex-start;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--e2);overflow:hidden}
.call-detail-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px 14px}
.call-detail-who{min-width:0}
.call-detail-eyebrow{margin:0;font-size:13px;line-height:18px;font-weight:600;color:var(--accent)}
.call-detail-t{margin:2px 0 0;font-size:18px;line-height:26px;font-weight:600;color:var(--heading)}
.call-detail-id{margin:2px 0 0;font-family:var(--mono);font-size:13px;line-height:18px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.call-detail-meta{margin:2px 0 0;font-size:14px;line-height:20px;color:var(--muted)}
.call-detail-pills{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.call-detail-s{padding:16px 20px;border-top:1px solid var(--hair)}
.call-detail-s>h3{margin:0 0 10px;font-size:15px;line-height:22px;font-weight:600;color:var(--heading)}
.call-detail-kv{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px 16px}
.call-detail-kv dt{font-size:13px;line-height:18px;font-weight:600;color:var(--muted)}
.call-detail-kv dd{margin:2px 0 0;font-size:15px;line-height:22px;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.call-detail-f{padding:8px 12px 12px;border-top:1px solid var(--hair)}
.call-detail-rec{display:flex;flex-direction:column;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card-2)}
.call-detail-play-row{display:flex;align-items:center;gap:12px}
.call-detail-play{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;margin:0;padding:0;border:1px solid var(--accent);
                  border-radius:999px;background:var(--card);color:var(--accent);box-shadow:var(--e1);cursor:pointer}
.call-detail-play:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.call-detail-wave{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:2px;height:36px;overflow:hidden}
.call-detail-wave>span{flex:1 1 0;min-width:2px;max-width:4px;border-radius:2px;background:var(--c-other)}
.call-detail-wave>span.played{background:var(--accent)}
.call-detail-time{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px}
.call-detail-clock{font-family:var(--mono);font-size:13px;line-height:18px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.call-detail-lock{display:inline-flex;align-items:center;gap:6px;font-size:13px;line-height:18px;color:var(--muted)}

/* ---- 5.31 admin: tenant cell, menu cards, capability lists and matrices, limits, the menu preview,
   templates, the ceiling explainer, role cards, people, the audit trail; 5.19 the change list ---- */
.acc-tenant{display:flex;align-items:center;gap:12px;min-width:0}
.acc-tenant-mark{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;border-radius:8px;background:var(--accent-soft);
                 color:var(--accent);font-size:13px;line-height:18px;font-weight:700}
.acc-tenant-b{display:flex;flex-direction:column;min-width:0}
.acc-tenant-name{display:inline-flex;align-items:center;min-height:28px;font-size:15px;line-height:22px;font-weight:600;color:var(--ink);text-decoration:none}
.acc-tenant-id{font-family:var(--mono);font-size:13px;line-height:18px;color:var(--muted);white-space:nowrap}
.acc-modules{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;padding:0 24px 24px}
.acc-module{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;
            background:var(--card);cursor:pointer;min-width:0}
.acc-module.always{cursor:default}
.acc-module-l{display:flex;align-items:flex-start;gap:12px;min-width:0}
.acc-module-b{display:flex;flex-direction:column;min-width:0}
.acc-module-t{font-size:15px;line-height:22px;font-weight:600;color:var(--ink)}
.acc-module-d{font-size:14px;line-height:20px;color:var(--muted)}
.acc-caps{display:flex;flex-direction:column;gap:12px}
.acc-cap{border:1px solid var(--line);border-radius:10px;background:var(--card);overflow:hidden}
.acc-cap-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:12px 16px;background:var(--card-2);border-bottom:1px solid var(--line)}
.acc-cap-t{margin:0;font-size:15px;line-height:22px;font-weight:600;color:var(--heading)}
.acc-cap-t span{font-weight:400;color:var(--muted);font-variant-numeric:tabular-nums}
.acc-cap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.acc-cell{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:12px 16px;border-bottom:1px solid var(--hair);cursor:pointer;min-width:0}
.acc-cell>input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--accent);cursor:pointer}
.acc-cell.closed{background:var(--card-2);cursor:not-allowed}
.acc-cell.closed>input{cursor:not-allowed}
.acc-cell-b{display:flex;flex-direction:column;gap:2px;min-width:0}
.acc-cell-t{display:inline-flex;align-items:center;gap:6px;font-size:15px;line-height:22px;font-weight:600;color:var(--ink)}
.acc-cell.closed .acc-cell-t{color:var(--ink-2)}
.acc-cell.closed .acc-cell-t .vic{color:var(--muted)}
.acc-cell-d{font-size:14px;line-height:20px;color:var(--muted)}
.acc-mx-row{display:block;font-size:15px;line-height:22px;font-weight:600;color:var(--ink)}
.acc-mx-rowd{display:block;font-size:13px;line-height:18px;color:var(--muted)}
.acc-mx-sub{display:block;font-weight:400}
.vtbl.compact th.acc-mx-col{text-align:center;min-width:104px}
.vtbl.compact td.acc-mx{padding:0 8px;text-align:center}
.vtbl.compact td.acc-mx.closed{background:var(--card-2)}
.acc-mx-always{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--ok-ink)}
.acc-mx-edit{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;cursor:pointer}
.acc-mx-edit>input{width:20px;height:20px;margin:0;accent-color:var(--accent);cursor:pointer}
.acc-mx-lock{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:44px;font-size:13px;line-height:18px;color:var(--muted)}
.acc-mx-na{position:relative;color:var(--muted)}
.acc-legend{margin:0;padding:12px 24px 0;font-size:14px;line-height:20px;color:var(--muted)}
.acc-limits{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px 20px;padding:0 24px 24px}
.acc-menu{display:flex;flex-direction:column;gap:2px;padding:12px 10px;border:1px solid #24467A;border-radius:10px;background:var(--navy-ink)}
.acc-menu-h{margin:0 0 8px;padding:0 6px;display:flex;align-items:center;gap:8px;font-size:13px;line-height:18px;font-weight:600;color:var(--on-dark)}
.acc-menu-h span{font-weight:400;color:var(--on-dark-4)}
.acc-menu-mark{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:none;border-radius:6px;background:var(--navy);color:#fff}
.acc-menu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.acc-menu-list>li{display:flex;align-items:center;gap:10px;min-height:34px;padding:0 10px;border-radius:6px;font-size:14px;line-height:20px;font-weight:500;color:var(--on-dark-3)}
.acc-menu-list>li.lit{background:var(--navy);font-weight:600;color:var(--on-dark)}
.acc-menu-tag{margin-left:auto;display:inline-flex;align-items:center;height:22px;padding:0 8px;border:1px solid var(--on-dark-accent);border-radius:999px;
              font-size:13px;line-height:18px;font-weight:600;color:var(--on-dark-accent);white-space:nowrap}
.acc-hidden{margin:0;display:flex;align-items:flex-start;gap:8px;font-size:14px;line-height:20px;color:var(--on-dark-3)}
.acc-hidden .vic{margin-top:2px;color:var(--on-dark-4)}
.acc-hidden strong{font-weight:600;color:var(--on-dark)}
.acc-rights{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.acc-rights>li{display:flex;align-items:flex-start;gap:8px;font-size:14px;line-height:20px;color:var(--on-dark-2)}
.acc-rights .vic{margin-top:2px;color:#86EFAC}
.acc-rights.cannot .vic{color:var(--on-dark-4)}
.acc-templates{list-style:none;margin:0;padding:0 24px 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.acc-template{display:flex;flex-direction:column;gap:14px;padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--card);box-shadow:var(--e1);min-width:0}
.acc-template-h{display:flex;align-items:flex-start;gap:12px;min-width:0}
.acc-template-t{margin:0;font-size:16px;line-height:24px;font-weight:600;color:var(--heading)}
.acc-template-d{margin:2px 0 0;font-size:14px;line-height:20px;color:var(--muted)}
.acc-template-dl{margin:0;padding-top:14px;border-top:1px solid var(--hair);display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px 12px}
.acc-template-dl dt{font-size:13px;line-height:18px;font-weight:600;color:var(--muted)}
.acc-template-dl dd{margin:2px 0 0;font-size:14px;line-height:20px;color:var(--ink)}
.acc-template-f{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;font-size:14px;line-height:20px;color:var(--muted)}
/* Screen 8's template editor (OEM phase 5 Task 1b): inline under the cards, one custom template at a time; the rows are the shared
   Rows/* components (their own .oem-row look), stacked here by .acc-tpl-rows. Save is secondary: Add tenant stays the page's one primary. */
.acc-tpl-edit{margin:0 24px 24px;border:1px solid var(--line-strong);border-radius:12px;background:var(--card);box-shadow:var(--e1);min-width:0}
.acc-tpl-h{padding:20px 20px 0}
.acc-tpl-t{margin:0;font-size:16px;line-height:24px;font-weight:600;color:var(--heading)}
.acc-tpl-d{margin:2px 0 0;font-size:14px;line-height:20px;color:var(--muted)}
.acc-tpl-b{display:grid;gap:16px;padding:16px 20px 20px;min-width:0}
.acc-tpl-names{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 16px}
.acc-tpl-sec{display:grid;gap:10px;padding-top:16px;border-top:1px solid var(--hair);min-width:0}
.acc-tpl-q{margin:0;font-size:15px;line-height:22px;font-weight:600;color:var(--heading)}
.acc-tpl-sub{margin:4px 0 0;font-size:14px;line-height:20px;font-weight:600;color:var(--ink-2)}
.acc-tpl-rows{display:grid;gap:6px;min-width:0}
.acc-tpl-obj{display:grid;gap:8px;min-width:0}
.acc-tpl-f{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:14px 20px;border-top:1px solid var(--hair)}
.acc-tpl-f-r{display:flex;flex-wrap:wrap;gap:8px}
.vbtn.ter.acc-tpl-del{color:var(--bad-ink)}
@media (max-width:640px){.acc-tpl-edit{margin:0 16px 16px}.acc-tpl-h,.acc-tpl-b,.acc-tpl-f{padding-left:16px;padding-right:16px}}
.acc-new{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;height:100%;min-height:220px;margin:0;padding:20px;
         border:1px dashed var(--control);border-radius:12px;background:var(--card-2);box-shadow:none;font:inherit;font-size:15px;line-height:22px;font-weight:600;
         color:var(--accent);cursor:pointer}
.acc-new:hover{background:var(--select);border-color:var(--accent);color:var(--accent)}
.acc-new.short{min-height:96px}
.acc-new-ic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;background:var(--accent-soft)}
.acc-ladder{list-style:none;margin:0;padding:0 24px 24px}
.acc-ladder>li{display:flex;gap:14px}
.acc-ladder-rail{display:flex;flex-direction:column;align-items:center;flex:none;width:32px}
.acc-ladder-n{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:999px;background:var(--btn);color:#fff;
              font-size:14px;line-height:20px;font-weight:700}
.acc-ladder-spine{flex:1 1 auto;width:2px;min-height:16px;margin:4px 0;border-radius:999px;background:var(--line-strong)}
.acc-ladder>li:last-child .acc-ladder-spine{display:none}
.acc-ladder-b{display:flex;flex-direction:column;gap:2px;min-width:0;padding:4px 0 18px}
.acc-ladder-t{font-size:16px;line-height:24px;font-weight:600;color:var(--heading)}
.acc-ladder-d{font-size:14px;line-height:20px;color:var(--muted)}
.acc-roles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.acc-role{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;min-height:96px;margin:0;padding:16px;border:1px solid var(--line-strong);
          border-radius:12px;background:var(--card);box-shadow:var(--e1);font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.acc-role:hover{background:var(--card-2);border-color:var(--control);color:var(--ink)}
.acc-role[aria-pressed="true"]{padding:15px;border:2px solid var(--accent);background:var(--select);box-shadow:none}
.acc-role-t{font-size:15px;line-height:22px;font-weight:600;color:var(--heading)}
.acc-role-d{font-size:14px;line-height:20px;color:var(--ink-2)}
.acc-role-pick{position:relative;display:block;min-width:180px}
.acc-audit{list-style:none;margin:0;padding:0}
.acc-audit>li{display:flex;flex-wrap:wrap;gap:4px 12px;padding:12px 24px;border-top:1px solid var(--hair);font-size:14px;line-height:20px}
.acc-audit-when{font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.acc-audit-what{color:var(--ink)}
.acc-audit-what strong{font-weight:600}
.acc-audit-why{flex:1 1 100%;color:var(--muted)}
.acc-diff{list-style:none;margin:12px 0 0;padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.acc-diff>li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:10px 14px;border-top:1px solid var(--hair);font-size:14px;line-height:20px}
.acc-diff>li:first-child{border-top:0}
.acc-impact{margin:10px 0 0;font-size:14px;line-height:20px;color:var(--ink-2)}

/* ---- the build-only behaviour: the pane sticks while the work column scrolls (the whole aside, never its
   first card), the dock sticks to the bottom; neither on a phone. final.md's top:24px assumed a top bar
   that scrolls away; here .vtop sticks at top:0 (z-index 20), so both panels stick 24 px UNDER it and the
   pane's height leaves room for it (lane U review: the eyebrow and the first line were behind the bar) ---- */
@media (min-width:1024px){
  .op-split>.outcome-pane{position:sticky;top:calc(var(--vtop-h) + 24px);max-height:calc(100vh - var(--vtop-h) - 48px);overflow-y:auto;scrollbar-width:thin}
  .call-split>.call-detail{position:sticky;top:calc(var(--vtop-h) + 24px)}
}

/* ---- section 9, the phone (390 px): one column, nothing scrolls sideways, tables scroll in their own
   wrapper, the steps stack, the docks wrap (Back, then the hint, then the primary) and stop sticking ---- */
@media (max-width:767px){
  .vflow{flex-direction:column}
  .vflow>li{flex:none}
  .vdock{position:static}
  .vdock-end{flex:1 1 100%;flex-direction:column;align-items:stretch}
  .vdock-end>.vbtn,.vdock-acts>.vbtn{width:100%}
  .vdock-acts{flex:1 1 100%;flex-direction:column}
  .vdock-hint{text-align:left}
  .outcome-pane{padding:20px}
  .live-tile{flex-basis:100%}
  .vpanel-h,.vpanel-row,.vpanel-f,.cmap-row,.cmap-q,.cmap-file>li,.cmap-foot,.vissue,.vfile,.vchecks>li,.vtbl-foot,.acc-audit>li{padding-left:16px;padding-right:16px}
  .vpanel-b,.vreview,.vsheet,.acc-modules,.acc-limits,.acc-templates,.acc-ladder{padding-left:16px;padding-right:16px}
  .vdrop{min-height:200px;padding:28px 16px}
  .vbanner .vbtn{margin:0}
  .vbanner{flex-wrap:wrap}
}

/* =====================================================================================
   SCREEN 1, THE CAMPAIGNS HOME (design-r2 final.md section 8 screen 1; plan Task 8.3). The recipes the board adds to
   the shared parts above: 5.4 the page header (.vphead*), 5.12 the filter bar (.vfilters, .vchips/.vchip, .vsearch),
   a row action as a button (button.vtbl-act), and the home's own pieces (.chome*): the ⋯ menu drawn as a row under
   its campaign (a popover inside the table's scroller would be clipped), the empty state's three steps, and the week
   folded under the list. Every name is new (verify_css_names.py).
   ===================================================================================== */
.chome{display:flex;flex-direction:column;gap:24px;max-width:1280px;min-width:0}
.vphead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px}
.vphead-b{flex:1 1 520px;min-width:0}
.vphead-eyebrow{margin:0;font-size:13px;line-height:18px;font-weight:600;color:var(--accent)}
.vphead-t{margin:6px 0 0;font-size:30px;line-height:38px;font-weight:600;letter-spacing:-.015em;color:var(--heading)}
.vphead-lead{margin:8px 0 0;max-width:680px;font-size:16px;line-height:26px;color:var(--muted)}
.vphead-meta{margin:8px 0 0;font-size:14px;line-height:20px;color:var(--muted);font-variant-numeric:tabular-nums}
.vphead-acts{display:flex;flex-wrap:wrap;gap:8px}
.vfilters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px;padding:16px 24px;border-top:1px solid var(--hair)}
.vchips{position:relative;margin:0;padding:0;border:0;min-width:0;display:flex;flex-wrap:wrap;gap:8px}
.vchip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--line-strong);border-radius:999px;background:var(--card);
       box-shadow:none;font:inherit;font-size:14px;line-height:20px;font-weight:500;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.vchip:hover{background:var(--hair);border-color:var(--line-strong);color:var(--ink)}
.vchip[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);font-weight:600;color:var(--accent)}
.vchip-n{font-variant-numeric:tabular-nums;color:var(--muted)}
.vchip[aria-pressed="true"] .vchip-n{color:var(--accent)}
.vsearch{position:relative;flex:1 1 240px;min-width:0}
.vsearch>.vinput{padding-left:40px}
.vsearch>.vic{position:absolute;left:12px;top:13px;color:var(--muted);pointer-events:none}
button.vtbl-act{border:0;background:none;box-shadow:none;font:inherit;font-size:14px;line-height:20px;font-weight:600;color:var(--accent);cursor:pointer}
button.vtbl-act:hover{background:var(--accent-soft);color:var(--accent-ink)}
.chome-agent{flex:0 1 240px}
.chome-tbl .vtbl-name{color:var(--ink)}
.chome-tbl tbody th .vpill{margin-top:4px}
.chome-num{display:block;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.chome-more{width:68px;text-align:right}
.vtbl.compact tr.chome-menurow>td{padding:0 24px 12px;border-bottom:1px solid var(--hair)}
.vtbl.compact tbody tr.chome-menurow:hover>td{background:transparent}
.chome-menu-at{display:flex;justify-content:flex-end}
.chome-nomatch{display:flex;flex-direction:column;align-items:center;gap:8px;padding:32px 24px;border-top:1px solid var(--hair);text-align:center;font-size:15px;line-height:24px;color:var(--muted)}
.chome-nomatch p{margin:0}
.chome-how{align-self:stretch;max-width:760px;margin:12px auto 0;padding-top:20px;border-top:1px solid var(--hair);text-align:left}
.chome-how-t{margin:0 0 12px;font-size:13px;line-height:18px;font-weight:600;color:var(--muted)}
.chome-how-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.chome-how-l>li{display:flex;align-items:flex-start;gap:12px;min-width:0}
.chome-how-b{display:flex;flex-direction:column;gap:2px;min-width:0}
.chome-how-n{font-size:13px;line-height:18px;font-weight:600;color:var(--accent)}
.chome-how-s{font-size:15px;line-height:22px;font-weight:600;color:var(--heading)}
.chome-how-d{font-size:14px;line-height:20px;color:var(--muted)}
.chome-week>summary{display:flex;align-items:center;min-height:56px;padding:0 24px;font-size:16px;line-height:24px;font-weight:600;color:var(--heading);cursor:pointer}
.chome-week-b{display:flex;flex-direction:column;gap:16px;padding:0 24px 24px;min-width:0}
.chome-week-b>.vpanel-d{margin:0}
@media (max-width:767px){
  .vfilters,.chome-week>summary,.chome-week-b{padding-left:16px;padding-right:16px}
  .chome-agent{flex:1 1 100%}
  .vtbl.compact tr.chome-menurow>td{padding-left:16px;padding-right:16px}
}

/* =====================================================================================
   SCREEN 2, A NEW CAMPAIGN · STEP 1 AGENT (design-r2 final.md section 8 screen 2; plan Task 8.4). The frame every
   step of Pages/CampaignNew.razor shares (.cnew: the page header, the flow, the split canvas, the dock) and step 1's
   own pieces (.cagent*): agent cards wide enough for their facts (5.14's big choice card at minmax(280px)), the
   language and need tags, how a file staged first fits, "Or start from your file" (a visually hidden file input
   behind a secondary button, its focus ring on the button), the kind of call and the name, and in the pane the
   opening's language chips and Hear the opening. Every name is new (verify_css_names.py).
   ===================================================================================== */
.cnew{display:flex;flex-direction:column;gap:24px;max-width:1280px;min-width:0}
.vchoice-grid.cagent-grid{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.cagent-tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:var(--card);
            font-size:13px;line-height:18px;font-weight:500;color:var(--ink);white-space:nowrap}
.vchoice.on .cagent-tag,.vchoice:has(>input:checked) .cagent-tag{border-color:var(--line-strong)}
.cagent-fit{display:inline-flex;align-items:flex-start;gap:6px;margin-top:6px;font-size:14px;line-height:20px;font-weight:600}
.cagent-fit.ok{color:var(--ok-ink)}
.cagent-fit.warn{color:var(--warn-ink)}
.cagent-fit .vic{margin-top:2px}
.cagent-wait{margin:0;font-size:14px;line-height:20px;color:var(--muted)}
.cagent-first{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px}
.cagent-first-b{flex:1 1 320px;min-width:0}
.cagent-first-t{margin:0 0 4px;font-size:16px;line-height:24px;font-weight:600;color:var(--heading)}
.cagent-first-b>.vhelp{margin:0}
.cagent-first-note{margin:8px 0 0;font-size:14px;line-height:20px;font-weight:600;color:var(--ink-2)}
.cagent-first-b>.verror{margin-top:8px}
.cagent-first-pick{flex:none}
.cagent-first input[type=file]:focus-visible+.cagent-first-pick{outline:2px solid transparent;border-color:var(--focus-border);box-shadow:var(--focus)}
.cagent-kind-b{display:flex;flex-direction:column;gap:20px}
.cagent-name>.vhelp,.cagent-name>.verror{margin:0}
.cagent-pv{display:flex;flex-direction:column;gap:14px}
.cagent-pv-lang{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.cagent-langs{display:flex;flex-wrap:wrap;gap:6px}
.cagent-lang{display:inline-flex;align-items:center;height:28px;padding:0 10px;border:1px solid #24467A;border-radius:999px;
             font-size:13px;line-height:18px;font-weight:500;color:var(--on-dark-2)}
.cagent-hear{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.cagent-audio{flex:1 1 220px;min-width:0;max-width:100%;height:44px}
.cagent-hear-why{flex:1 1 100%}
@media (max-width:767px){
  .cagent-first-pick{flex:1 1 100%}
}

/* =====================================================================================
   SCREEN 5, A NEW CAMPAIGN · STEP 4 WHEN TO CALL (design-r2 final.md 5.25 and section 8 screen 5; plan Task 8.7).
   StepWhen's own wrappers (.cwhen-*) around the scheduler's SlotEditor, RedialEditor and WeekPreview, whose own
   classes it never restyles outside .cwhen-week (the week on the pane's dark): the day chips with a real checkbox in
   each, the From / To pair, the try ladder read back, the editors behind a toggle (inside step 4 they keep the 44 px
   targets, 13 px type and no second filled button), More options, and the week
   set in the pane's colours at 13 px. Every name is new (verify_css_names.py).
   ===================================================================================== */
.cwhen-b{display:flex;flex-direction:column;gap:20px}
.cwhen-b .vhelp,.cwhen-b .verror{margin:0}
.cwhen-b .vhelp>.vic,.cwhen-b .verror>.vic{flex:none}
.cwhen-set{margin:0;padding:0;border:0;min-width:0;display:flex;flex-direction:column;gap:8px}
.cwhen-set>legend{padding:0;margin:0 0 8px}
.cwhen-days{display:flex;flex-wrap:wrap;gap:8px}
.cwhen-day{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--line-strong);border-radius:999px;
           background:var(--card);font-size:14px;line-height:20px;font-weight:500;color:var(--ink-2);cursor:pointer;box-sizing:border-box}
.cwhen-day>input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--accent);cursor:pointer}
.cwhen-day:has(>input:checked){border-color:var(--accent);background:var(--accent-soft);font-weight:600;color:var(--accent)}
.cwhen-day:has(>input:focus-visible){border-color:var(--focus-border);box-shadow:var(--focus)}
.cwhen-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}
.cwhen-ladder{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cwhen-rung{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card-2)}
.cwhen-rung-t{font-size:14px;line-height:20px;font-weight:600;color:var(--ink)}
.cwhen-rung-d{font-size:13px;line-height:18px;color:var(--muted)}
.cwhen-rung-to{display:inline-flex;color:var(--faint)}
.cwhen-detail{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}
.cwhen-detail>.vbtn{margin-left:-12px}
.cwhen-editor{align-self:stretch;min-width:0}
.cwhen-editor .sch-daychip{min-height:44px;padding:0 14px;font-size:13px}
.cwhen-editor .sch-daychip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.cwhen-editor .sch-span select,.cwhen-editor .sch-gap select,.cwhen-editor .sch-rung.add select{min-height:44px;font-size:13px}
.cwhen-editor .sch-rung-l input{min-height:44px}
.cwhen-editor button.quiet,.cwhen-editor button.ghost,.cwhen-editor button.danger-q,.cwhen-editor .sch-gap-x,.cwhen-editor .sch-rung-x{min-height:44px;min-width:44px;font-size:13px}
.cwhen-editor .help,.cwhen-editor .sch-track-k{font-size:13px}
.cwhen-more>summary{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;font-size:15px;line-height:22px;font-weight:600;
                    color:var(--heading);cursor:pointer;list-style:none}
.cwhen-more>summary::-webkit-details-marker{display:none}
.cwhen-more>summary>span{flex:1 1 auto;min-width:0}
.cwhen-more[open]>summary>.vic:last-child{transform:rotate(180deg)}
.cwhen-more-b{display:flex;flex-direction:column;gap:20px;padding:0 24px 24px}
.cwhen-more-b .vhelp,.cwhen-more-b .verror{margin:0}
.cwhen-lines{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.cwhen-lines>.vinput{width:120px}
.cwhen-pool{border:0;margin:0;padding:0;min-width:0}
.cwhen-pool-list{display:flex;flex-direction:column;gap:6px;margin:6px 0 12px}
.cwhen-pool-n{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.cwhen-pool-n>.vhelp{margin:0}
.cwhen-week{display:flex;flex-direction:column;gap:12px;min-width:0}
.cwhen-week .sch-day{font-size:13px;line-height:18px}
.cwhen-week .sch-day-h{font-size:13px;line-height:16px;white-space:normal;text-overflow:clip;color:var(--on-dark-4)}
.cwhen-week .sch-day-h.now{color:var(--on-dark)}
.cwhen-week .sch-day-f{font-size:13px;line-height:18px;overflow:hidden;text-overflow:ellipsis;color:var(--on-dark-2)}
.cwhen-week .sch-col{background:rgba(255,255,255,.04);border-color:#24467A}
.cwhen-week .sch-col.hol{background:rgba(255,255,255,.12)}
.cwhen-week .sch-hol{font-size:13px;color:var(--on-dark-2)}
.cwhen-week .sch-legend{gap:4px 12px;font-size:13px;line-height:18px;color:var(--on-dark-4)}
.cwhen-about{font-weight:600;color:var(--on-dark)}
@media (max-width:767px){
  .cwhen-more>summary,.cwhen-more-b{padding-left:16px;padding-right:16px}
}

/* =====================================================================================
   SCREEN 6, A NEW CAMPAIGN · STEP 5 REVIEW AND LAUNCH (design-r2 final.md section 8 screen 6; plan Task 8.8).
   StepReview's review cards (.vpanel with a Change link in the header), their label / value rows, the consent tick,
   and TestCall's "Try it first" (the call in progress, the verify flow in place). The checks are .vchecks rows and the
   pane's journey is .op-journey (5.27). Every name is new (verify_css_names.py).
   ===================================================================================== */
.creview-change{flex:none;margin:-4px -12px 0 0}
.creview-b{display:flex;flex-direction:column;gap:12px}
.creview-b .vhelp,.creview-b .vbanner{margin:0}
.creview-big{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:16px;line-height:24px;font-weight:600;color:var(--heading)}
.creview-tags{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.creview-list{list-style:none;margin:0;padding:0 24px 20px;display:flex;flex-direction:column}
.creview-list>li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding:10px 0;border-top:1px solid var(--hair);
                 font-size:14px;line-height:20px}
.creview-list-t{font-weight:600;color:var(--ink)}
.creview-list-d{min-width:0;text-align:right;color:var(--ink-2);overflow-wrap:anywhere}
.creview-consent{cursor:pointer}
.creview-consent>input{flex:none;width:18px;height:18px;margin:3px 0 0;accent-color:var(--accent);cursor:pointer}
.creview-again{align-self:flex-start}
.creview-card .vchecks>li>.vpill{flex:none;margin-left:auto}
.creview-test{display:flex;flex-direction:column;gap:12px;min-width:0}
.creview-test .vhelp,.creview-test .vbanner{margin:0}
.creview-test-to{margin:0;font-size:15px;line-height:22px;font-weight:600;color:var(--ink)}
.creview-test-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.creview-calling{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--ok-edge);border-radius:10px;background:var(--ok-soft)}
.creview-calling-b{min-width:0;display:flex;flex-direction:column;gap:2px}
.creview-calling-t{margin:0;font-size:15px;line-height:22px;font-weight:600;color:var(--ink)}
.creview-verify{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--card-2)}
.creview-verify-t{margin:0;font-size:15px;line-height:22px;font-weight:600;color:var(--heading)}
input.creview-code{max-width:200px;font-family:var(--mono);letter-spacing:.2em}
/* The launch dialog is the shared ConfirmModal: its own two buttons get the round-2 44 px target and 14 px type
   (composition laws L6 and L8) on the new-campaign page only, never in every other dialog of the console. */
.cnew .vlp-modal-row>button{min-height:44px;padding:0 18px;font-size:14px;line-height:20px}
@media (max-width:767px){
  .creview-list{padding:0 16px 16px}
  .creview-list-d{text-align:left}
}

/* =====================================================================================
   SCREEN 8, PLATFORM ADMIN TENANTS (design-r2 final.md section 8 screen 8, §5.31; plan Task 8.11). Orgs.razor draws the
   shared parts (.vphead, .live-strip, .vfilters, .vtbl.compact, .acc-tenant, .vtags, .acc-templates, .acc-ladder) and
   adds only these: the page column, the invitation-only note beside the primary, the Add tenant form card, the
   tenants calling inside the Live tile, the table's number cells and its ⋯ menu drawn as a row under its tenant (a
   popover inside the table's scroller would be clipped), the no-match state, and the audit list's place. Every name
   is new (verify_css_names.py).
   ===================================================================================== */
.acc-page{display:flex;flex-direction:column;gap:24px;max-width:1280px;min-width:0}
.acc-head-acts{align-items:center}
.acc-note{margin:0;display:inline-flex;align-items:center;gap:8px;font-size:14px;line-height:20px;color:var(--muted)}
.acc-note .vic{color:var(--muted)}
.acc-add-b{display:flex;flex-direction:column;gap:16px}
.acc-add-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px 20px}
.acc-add-b .vhelp{margin:0}
.acc-add-acts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 12px}
.acc-live{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.acc-live>li{display:flex;justify-content:space-between;gap:12px;font-size:14px;line-height:20px;color:var(--on-dark-2)}
.acc-live-n{font-variant-numeric:tabular-nums;color:var(--on-dark)}
.acc-filter{flex:0 1 200px}
.vtbl.compact .acc-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.acc-tbl .vtags{min-width:220px}
.acc-tbl tbody th .vpill,.acc-tbl td .vpill{white-space:nowrap}
.acc-more{width:68px;text-align:right}
.vtbl.compact tr.acc-menurow>td{padding:0 24px 12px;border-bottom:1px solid var(--hair)}
.vtbl.compact tbody tr.acc-menurow:hover>td{background:transparent}
.acc-menu-at{display:flex;justify-content:flex-end}
.acc-nomatch{display:flex;flex-direction:column;align-items:center;gap:8px;padding:32px 24px;border-top:1px solid var(--hair);text-align:center;
             font-size:15px;line-height:24px;color:var(--muted)}
.acc-nomatch p{margin:0}
.acc-new-sub{font-size:14px;line-height:20px;font-weight:400;color:var(--muted)}
.acc-ceiling-f{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.acc-ceiling-f>span{flex:1 1 280px}
.acc-audit-wrap{border-top:1px solid var(--line)}
.acc-audit-wrap>.vhelp,.acc-audit-wrap>.vbanner{margin:16px 24px}
/* The receipt of an invitation, a copy or a status change is the shared Flash, drawn here at the round-2 sizes
   (laws L6 and L8: 44 px close target, no text under 13 px) on this page only. */
.acc-page>.flash{margin:0;font-size:14px;line-height:20px}
.acc-page>.flash .flash-i{font-size:13px}
.acc-page>.flash .flash-x{align-self:center;min-width:44px;min-height:44px;margin:-11px -10px -11px 0;font-size:20px}
@media (max-width:767px){
  .acc-filter{flex:1 1 100%}
  .vtbl.compact tr.acc-menurow>td{padding-left:16px;padding-right:16px}
  .acc-audit-wrap>.vhelp,.acc-audit-wrap>.vbanner{margin:16px}
}

/* =====================================================================================
   SCREEN 9, PLATFORM ADMIN TENANT ACCESS (design-r2 final.md section 8 screen 9, §5.31; plan Task 8.12). TenantAccess.razor
   and Components/Access draw the shared parts (.vphead, .vchoice, .op-split/.op-work, .acc-modules, .acc-caps, .acc-cell,
   .vtbl.compact with .acc-mx-*, .acc-limits, .vswitch, .acc-audit, the pane's .acc-menu, .acc-hidden, .acc-rights) and
   add only these: the refusal and info lines inside a card, a capability cell's "not saved" word and the locked group's
   Turn on row, the menu preview's group items with their pages, the Preview as field on dark, the agent grid's warning
   row, and the calling-hours pair. Every name is new (verify_css_names.py).
   ===================================================================================== */
.acc-refusal{padding:0 24px 16px}
.acc-menus-f{display:flex;flex-direction:column;gap:4px}
.acc-menus-f>p{margin:0}
.acc-caps-b{display:flex;flex-direction:column;gap:16px}
.acc-cell-changed{font-size:13px;line-height:18px;font-weight:600;color:var(--accent)}
.acc-cap-f{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:12px 16px;background:var(--card-2);
           font-size:14px;line-height:20px;color:var(--muted)}
.acc-cap-f>p{margin:0;flex:1 1 240px}
.acc-agents-b{display:flex;flex-direction:column;gap:16px}
.acc-agents-b>.vhelp{margin:0;display:flex;align-items:flex-start;gap:6px}
.acc-agents-b>.vtbl.compact{margin:0 -24px}
.vtbl.compact tr.acc-agents-warn>td{padding:0 24px 12px}
.vtbl.compact tbody tr.acc-agents-warn:hover>td{background:transparent}
.acc-hours{margin:0;padding:0;border:0}
.acc-hours>legend{padding:0;margin-bottom:6px}
.acc-hours-row{display:flex;align-items:center;gap:8px;color:var(--muted)}
.acc-hours-row>.vselect{flex:1 1 0;min-width:0}
.acc-preview{display:flex;flex-direction:column;gap:12px}
.acc-preview .vlabel{color:var(--on-dark-2)}
.acc-menu-list>li.acc-menu-g{flex-wrap:wrap;padding-top:7px;padding-bottom:7px}
.acc-menu-gl{flex:1 1 auto;min-width:0}
.acc-menu-pages{flex:1 0 100%;list-style:none;margin:4px 0 0;padding:0 0 0 12px;display:flex;flex-direction:column;gap:2px;
                border-left:1px solid #24467A}
.acc-menu-pages>li{display:flex;align-items:center;gap:8px;font-size:13px;line-height:18px;font-weight:500;color:var(--on-dark-3)}
/* A page the draft removes (review of 8.12): under the menu, struck through and pilled, outside the rail's own items. */
.acc-menu-removed{list-style:none;margin:6px 0 0;padding:8px 0 0;display:flex;flex-direction:column;gap:2px;border-top:1px dashed #24467A}
.acc-menu-removed>li{display:flex;align-items:center;gap:8px;min-height:30px;padding:0 10px;font-size:13px;line-height:18px;font-weight:500;color:var(--on-dark-3)}
@media (max-width:767px){
  .acc-refusal{padding:0 16px 16px}
  .acc-agents-b>.vtbl.compact{margin:0 -16px}
  .vtbl.compact tr.acc-agents-warn>td{padding-left:16px;padding-right:16px}
}
/* Screen 9's dialogs (the save's diff, a template that replaces changes, a conflict): the shared ConfirmModal's buttons
   and its reason label at the round-2 sizes (laws L6 and L8) on this page only, as .cnew does for step 5's launch. */
.acc-dialog .vlp-modal-row>button{min-height:44px;padding:0 18px;font-size:14px;line-height:20px}
.acc-dialog .vlp-modal-label{font-size:14px;line-height:20px}
/* A limit field's input fills a 46 px suffix box, so the input itself is a 44 px target (law L6). */
.acc-limits .vsuffix{height:46px}

/* =====================================================================================
   SCREEN 10, THE TENANT ADMIN'S ROLES AND PEOPLE (design-r2 final.md section 8 screen 10, §5.31; plan Task 8.13). Roles.razor
   draws the shared parts (.vphead, .vbanner, .acc-roles/.acc-role and .acc-new, .vchip, .op-split, CapabilityMatrix in
   Roles mode on .vtbl.compact.wide with .acc-mx-*, .acc-legend, .vchoice, AgentGrid, the pane, .vperson, .acc-role-pick,
   the row menu as a row under its person, .acc-menurow/.acc-menu-at, as screen 8 draws it) and adds only these: the
   role cards' set with Other roles, the matrix column being edited, the legend closing its card, the new-role and
   invitation forms, and a person's role, agents and actions cells with the narrowing editor under the row. Every name
   is new (verify_css_names.py).
   ===================================================================================== */
.acc-roles-set{display:flex;flex-direction:column;gap:16px}
.acc-roles-other{display:flex;flex-direction:column;gap:8px}
.acc-roles-other>.acc-cap-t,.acc-roles-other>.vhelp{margin:0}
.acc-roles-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.acc-you{margin-left:6px;font-weight:400;color:var(--muted)}
.acc-new:disabled{cursor:not-allowed;color:var(--ink-2)}
.vtbl.compact th.acc-mx-col.on{color:var(--heading);box-shadow:inset 0 -3px 0 var(--accent)}
.acc-legend-end{padding-bottom:24px}
.acc-form{display:flex;flex-direction:column;gap:16px}
.acc-form>.acc-cap-t,.acc-form>.vhelp{margin:0}
.acc-form-grid{padding:0}
.acc-form-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.acc-person-role{font-weight:600;color:var(--ink)}
.acc-person-agents{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.acc-person-acts{display:inline-flex;align-items:center;justify-content:flex-end;gap:4px}
.acc-person-edit{display:flex;flex-direction:column;gap:16px;padding-top:4px}
@media (max-width:767px){
  .acc-legend-end{padding-left:16px;padding-right:16px}
}
.acc-role-del{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.acc-role-del>.vhelp{margin:0}

/* =====================================================================================
   SCREEN 7, THE RUNNING CAMPAIGN (design-r2 final.md section 8 screen 7, 5.5, 5.10, 5.30; plan Task 8.9). The shared
   parts above draw most of it (.vphead, .live-strip, .live-tile, .live-band, .live-outcomes, .vmini, .call-split,
   .vtbl.compact, .vperson, .call-detail); these are the page's own pieces (.clive*): the title with its state pill, the
   grid of the outcome and CRM cards (minmax 340 px), the page tabs (5.5: a navy underline, never flame), the people's
   cells, the Activity list, the Settings card, and ConfirmModal's Stop… at the round-2 sizes on this page only
   (a 44 px field, choices and buttons, no text under 13 px), as .cnew does for the launch dialog. Every name is new.
   ===================================================================================== */
.clive{display:flex;flex-direction:column;gap:24px;max-width:1280px;min-width:0}
.clive-h1{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.clive-h1>span:first-child{min-width:0;overflow-wrap:anywhere}
.clive-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:24px;align-items:start}
.clive-crm{display:flex;flex-direction:column;gap:12px}
.clive-minis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.clive-minis .vmini{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.clive-mini-s{font-size:13px;line-height:18px;color:var(--muted)}
.clive-crm-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.clive-tabs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 24px;border-bottom:1px solid var(--line)}
.clive-tab{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0 0 -1px;padding:0;border:0;border-bottom:2px solid transparent;
           border-radius:0;background:none;box-shadow:none;font-size:15px;line-height:22px;font-weight:500;color:var(--muted);cursor:pointer}
.clive-tab:hover{background:none;color:var(--heading);border-color:transparent;border-bottom-color:var(--line-strong)}
.clive-tab[aria-current="page"]{border-bottom-color:var(--accent);font-weight:600;color:var(--heading)}
.clive-collected{font-size:14px;line-height:20px;color:var(--ink-2)}
.clive-tbl td.num{text-align:right}
.clive-activity{list-style:none;margin:0;padding:0 24px 16px}
.clive-activity>li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--hair);font-size:14px;line-height:20px}
.clive-activity>li:first-child{border-top:0}
.clive-sentence{margin:0 0 8px;font-size:15px;line-height:22px;color:var(--ink)}
.clive-settings-acts,.clive-legacy-edit{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:12px}
.clive-detail-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.clive-detail-empty{padding:32px 20px}
.clive-stop-one{color:var(--bad)}
.clive .vempty{font-size:14px;line-height:20px}
.clive .vempty b{font-size:15px;line-height:22px}
.clive .vempty p{margin:0}
.clive .vlp-modal .sub{font-size:14px;line-height:20px}
.clive .vlp-modal-label{font-size:13px;line-height:18px}
.clive .vlp-modal-input{min-height:44px;font-size:15px}
.clive .vlp-choice{min-height:44px;align-items:center;font-size:14px;line-height:20px}
.clive .vlp-choice .help{font-size:13px;line-height:18px}
.clive .vlp-modal-row>button{min-height:44px;padding:0 18px;font-size:14px;line-height:20px}
@media (max-width:767px){
  .clive-tabs{gap:0 16px}
  .clive-activity{padding:0 16px 16px}
}

/* ---- Agent > Files it accepts (plan Task 8.10, spec 2026-10-09 4.4; final.md 5.8 card): one row per saved matching ---- */
.cformats{margin-top:16px}
.cformats-list{list-style:none;margin:0;padding:0}
.cformats-row{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px 16px}
.cformats-b{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:4px}
.cformats-t{margin:0;font-size:15px;line-height:22px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.cformats-cols{margin:0;overflow-wrap:anywhere}
.cformats-meta{margin:0;overflow-wrap:anywhere;display:flex;flex-wrap:wrap;gap:4px 8px}
.cformats-name{max-width:420px}
.cformats-acts{display:flex;flex-wrap:wrap;gap:8px;flex:none}
.cformats-empty .vhelp{margin:0}
.cformats-f{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}

/* ---- the Outbound page: the place-a-call card and its "Details for this call" (plan Task 8.10, spec 8.4; final.md 5.13) ---- */
.ob-b{display:flex;flex-direction:column;gap:20px}
/* Task 8.14's sweep: Outbound is a round-2 screen, so its stat band's small words meet the 13 px floor (final.md §11.2;
   round2_laws L8). The kit's .vstat keeps its own sizes on every other page. */
.ob-page .vstat .k,.ob-page .vstat .sub,.ob-page .vstat .v small,.ob-page .vempty{font-size:13px}
.ob-grid,.obd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px 20px}
.obd{display:flex;flex-direction:column;gap:16px;padding-top:20px;border-top:1px solid var(--hair)}
.obd-t{margin:0;font-size:16px;line-height:24px;font-weight:600;color:var(--heading)}
.obd-refs{margin:0;padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--card-2);display:flex;flex-direction:column;gap:12px;min-width:0}
.obd-legend{padding:0 6px;font-size:15px;line-height:22px;font-weight:600;color:var(--ink)}
.obd-refs .vlabel{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.obd-refs .vhelp{margin:0}
.obd-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px 16px}
.obd-why{margin:0;flex:1 1 260px;display:flex;align-items:flex-start;gap:6px}
.obd-why .vic{flex:none;margin-top:2px}

/* ---- Agent > Outcome rules (integration phase 0, Task 7): each rule is ONE sentence of fixed selects ---- */
.orule-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.orule{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-top:1px solid var(--hair)}
.orule:first-child{border-top:0}
.orule.off .orule-sentence{opacity:.55}
.orule-n{flex:none;width:22px;height:22px;border-radius:50%;background:var(--hair);color:var(--muted);font-size:13px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;margin-top:3px}
.orule-b{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.orule-sentence{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:14px;line-height:28px;color:var(--ink)}
.orule-w{color:var(--ink-2)}
.orule-sentence select.orule-sel{width:auto;max-width:100%;padding:4px 8px}
.orule-sentence input.orule-in{width:150px;padding:4px 8px}
.orule-sentence input.orule-in.orule-num{width:72px;text-align:right}
.orule-sentence input.orule-in.orule-wide{width:240px;max-width:100%}
.orule-chip{display:inline-flex;align-items:center;gap:4px;padding:1px 4px 1px 10px;border-radius:999px;background:var(--select);border:1px solid var(--line);font-size:13px;line-height:24px}
.orule-x{background:none;border:0;padding:0 6px;font-size:15px;line-height:22px;color:var(--muted);cursor:pointer}
.orule-x:hover{color:var(--bad)}
.orule-note{margin:0}
.orule-err{margin:0;font-size:13px;line-height:20px;font-weight:600;color:var(--bad)}
.orule-acts{flex:none;display:flex;align-items:center;gap:6px;margin-top:2px}
.orule-on{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin-right:6px}
@media (max-width:767px){.orule{flex-wrap:wrap}.orule-acts{width:100%;justify-content:flex-end}}

/* ---- a campaign's daily file card (integration phase 0, Task 8): the address row, the buttons, the drop zone sized to a card ---- */
.cintake-address{margin-bottom:8px}
.cintake-address-row{display:flex;flex-wrap:wrap;gap:8px}
.cintake-address-row input.vinput{flex:1 1 320px;min-width:0}
.cintake-last{margin:4px 0 12px}
.cintake-acts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.cintake .cfile-zone,.cintake .cfile-reading{margin:0}
.cintake .vdrop{min-height:160px;padding:24px}
.cintake-result{margin-top:16px}

/* telephony wizard (C1) */
/* ---- Phone lines (telephony onboarding, 24 Oct 2026): the line rows and the Connect-a-line wizard ----
   A row's small words wrap under its name; the two pills (status, pointing) sit together; the wizard is the
   rent-modal widened to the seven steps, whose step strip wraps on a phone. One flame button per screen. */
.vlp-modal.rent-modal.line-wizard{max-width:860px}
.line-row .conn-acts{max-width:48%}
.wiz-steps{flex-wrap:wrap}
.wiz-steps span.past{color:var(--muted)}
.wiz-paste{width:100%;box-sizing:border-box;min-height:110px;padding:9px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;background:var(--card);color:var(--ink)}
.wiz-scan{display:flex;flex-direction:column;gap:6px;margin-top:10px;max-height:240px;overflow-y:auto;padding:2px}
.wiz-scan .sw{display:flex;align-items:center;gap:8px;margin:0}
.wiz-agents{margin-top:12px}
.wiz-agents .chip.pick{font-size:12.5px;padding:6px 12px;border:1px solid var(--line)}
.wiz-url{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.wiz-url code{font-family:var(--mono);font-size:12px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card-2);overflow-wrap:anywhere;max-width:100%}
.wiz-recipe{margin:10px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card-2);font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere}
.wiz-foot{margin-top:14px;padding-top:10px;border-top:1px solid var(--hair)}
@media (max-width:767px){.line-row .conn-acts{max-width:none}.rent-steps.wiz-steps span{padding:8px 10px 8px 0}}
/* numbers bulk + inbound pointing (C2) */
/* ---- Phone numbers: the tick column, the bulk bar over the table, a refusal on its row, group chips in the Add and Paste boxes;
   Who answers: the pointing cell and the created-group list; campaign step 4: the group-or-numbers switch (design 2026-10-24 §4 C2) ---- */
.num-pick{width:28px;padding-right:0;vertical-align:top}
.num-pick input{margin:4px 0 0;cursor:pointer}
tr.picked td{background:var(--accent-soft)}
.num-bulk{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card-2)}
.num-bulk b{font-size:13px;color:var(--ink);margin-right:4px}
.num-bulk .grow{flex:1}
.num-refused{margin:2px 0 4px;font-size:12px;line-height:18px;font-weight:600;color:var(--bad);overflow-wrap:anywhere}
.num-groups{margin-top:4px}
.num-groups .chip.pick{font-size:12px;line-height:18px}
.inb-point .pill{margin-bottom:4px}
.inb-point .help{overflow-wrap:anywhere}
.inb-created{display:flex;flex-direction:column;gap:4px;max-height:240px;overflow:auto;margin-top:10px}
.inb-agents{gap:8px}
.inb-agents .chip.pick{font-size:12.5px;line-height:20px}
.cwhen-poolgroup-seg{margin:6px 0 10px}
.cwhen-poolgroup{display:flex;flex-direction:column;gap:6px;margin:0 0 12px}
.cwhen-poolgroup .vhelp{margin:0}
/* provider templates (C3) */
/* ---- Settings > Platform > Provider templates: the staff editor's rows (questions, headers, body fields), its request folds, the preview ---- */
.cat-editor .vcard-b{gap:12px}
.cat-sec{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:10px 0 0;padding-top:12px;border-top:1px solid var(--hair)}
.cat-sec:first-child{margin-top:0;padding-top:0;border-top:0}
.cat-rows{display:flex;flex-direction:column;gap:6px;min-width:0}
.cat-row{display:grid;grid-template-columns:1.1fr 1.4fr 1.4fr .9fr 1fr 1.6fr 36px 28px;gap:6px;align-items:center;min-width:0}
.cat-row>input,.cat-row>select{width:100%;min-width:0;box-sizing:border-box;padding:6px 8px;font-size:12.5px}
.cat-row-h{font-size:11px;font-weight:600;color:var(--muted)}
.cat-row-h span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-row-kv{grid-template-columns:1fr 2fr 28px}
.cat-row-note{margin:-2px 0 2px}
.cat-sw{justify-content:center}
.cat-sw input{margin:0}
.cat-req{border:1px solid var(--line);border-radius:10px;padding:10px 14px;display:flex;flex-direction:column;gap:8px;background:var(--card-2)}
.cat-req.on{background:var(--card)}
.cat-req>.sw{font-size:13px}
.cat-caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px 16px}
.cat-json{min-height:360px;font-size:12px;line-height:1.5;white-space:pre}
.cat-issues ul{margin:6px 0 0;padding-left:18px;font-size:12.5px;line-height:1.5}
.cat-issues code,.cat-refusal code{font-family:var(--mono);font-size:11.5px}
.cat-preview h3{font-size:12.5px;font-weight:600;margin:0 0 4px}
.cat-preview pre.code{margin-top:8px;white-space:pre-wrap;word-break:break-all}
.chip.cat-secret{background:var(--warn-soft);color:var(--warn-ink)}
@media (max-width:1023px){.cat-row{grid-template-columns:1fr 1fr 1fr 1fr}.cat-row-h{display:none}.cat-row-kv{grid-template-columns:1fr 2fr 28px}}
/* review: calls at once below the pool; shell: the server moved on (25 Oct 2026) */
.creview-list-warn{color:var(--warn-ink,#8A4B00)}.creview-list-warn .creview-list-d{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.vbuild{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:0 0 12px;padding:10px 14px;border-radius:10px;background:#E4EAF3;color:#1B4272;font-weight:500}
/* ---- The oem-* classes the real pages adopted from the OEM mock run (the mock itself retired in phase 5 Task 3): the access
   flow (Pages/TenantAccess.razor, Components/Access/), the platform catalogue, the role field levels (Roles.razor). The names keep
   their oem- prefix; only the selectors no remaining page names were deleted with the mock. ---- */
.oem-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.oem-fields{display:grid;gap:0;margin-bottom:12px}
.oem-field-row{display:grid;grid-template-columns:minmax(160px,1fr) auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.oem-field-name{display:grid}
.oem-field-name small{color:var(--muted);font-size:11px}
.oem-field-name .vpill{justify-self:start;margin-left:6px}
.oem-seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.oem-seg button{font:inherit;font-size:12px;padding:4px 10px;border:0;background:transparent;color:var(--ink);cursor:pointer}
.oem-seg button.on{background:var(--navy);color:#fff}
.oem-seg button.ceil{box-shadow:inset 0 -2px 0 var(--flame)}
.oem-seg button:disabled{opacity:.35;cursor:not-allowed}
.oem-swatch{display:inline-block;width:30px;height:30px;border-radius:6px;border:1px solid var(--line);flex:none}
.oem-span2{grid-column:1/-1}
.oem-brand{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,360px);gap:16px}
@media (max-width:900px){.oem-brand{grid-template-columns:1fr}}
.oem-brand-preview{display:grid;gap:10px;align-content:start}
.oem-login-brand{display:grid;gap:8px;place-content:center;justify-items:center;text-align:center;background:var(--oem-brand,var(--navy));color:#fff;padding:32px}
.oem-login-brand b{font-size:20px}
.oem-login-brand .vhelp{color:rgba(255,255,255,.8);max-width:36ch}
.oem-login-brand.mini{padding:16px;border-radius:8px;background:var(--bg);color:var(--ink)}
.oem-login-brand.mini .vhelp{color:var(--muted)}
.oem-email{border:1px solid var(--line);border-radius:6px;padding:10px;font-size:12px;display:grid;gap:4px}
.oem-email span:first-child{font-family:var(--mono,ui-monospace,monospace);color:var(--muted)}
.oem-leak{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:12px}
.oem-leak li{display:flex;align-items:center;gap:6px}
.oem-leak li.ok{color:var(--ok-ink,#1f7a4d)}
.oem-leak li.bad{color:var(--bad-ink,#b42318)}
.oem-kinds{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
/* ---- From the mock's round 4: the guided access flow and the catalogue page ---- */
.oem-flow{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:900px){.oem-flow{grid-template-columns:1fr}}
.oem-steps{display:grid;gap:2px;position:sticky;top:12px}
.oem-step-b{display:grid;gap:2px;text-align:left;font:inherit;border:0;background:transparent;color:var(--ink);padding:10px 12px;border-radius:8px;cursor:pointer;border-left:3px solid transparent}
.oem-step-b:hover{background:rgba(27,66,114,.06)}
.oem-step-b.on{background:var(--card);border-left-color:var(--flame);box-shadow:0 1px 2px rgba(12,33,63,.06)}
.oem-step-t{font-weight:600;font-size:13px}
.oem-step-s{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oem-stage{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px 24px;display:grid;gap:14px;min-width:0;animation:oemfade .18s ease-out}
@keyframes oemfade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.oem-stage{animation:none}}
.oem-q{margin:0;font-size:20px;font-weight:600;line-height:1.25;text-wrap:balance}
.oem-qd{margin:0;color:var(--muted);font-size:14px;max-width:70ch}
.oem-rows{display:grid;gap:6px}
.oem-rows.tight{gap:2px}
.oem-row{display:flex;align-items:center;gap:14px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);min-width:0}
.oem-row.muted{opacity:.75}
.oem-row.stack{flex-wrap:wrap}
.oem-row-b{display:grid;gap:2px;flex:1;min-width:0;cursor:pointer}
.oem-row-b strong{font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.oem-row-b small{color:var(--muted);font-size:12px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.oem-row-x{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.oem-warn{color:#b45309!important}
.oem-more{border-top:1px dashed var(--line);padding-top:10px;display:grid;gap:10px}
.oem-more summary{cursor:pointer;font-weight:600;color:var(--navy);font-size:13px;list-style:none;display:flex;align-items:center;gap:6px}
.oem-more summary::before{content:"\25B8";font-size:11px;transition:transform .15s}
.oem-more[open] summary::before{transform:rotate(90deg)}
.oem-kind{display:grid;gap:6px;align-content:start}
.oem-kind > .op-sub{color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:8px}
.cat-kind{color:var(--ink);margin:16px 0 6px;display:flex;align-items:center;gap:8px}
.cat-kind:first-child{margin-top:0}
.cat-label{justify-content:flex-end;font-size:13px}
.cat-label .vlabel{display:inline;color:var(--muted);font-weight:400}
.cat-edit{min-width:260px;display:grid;gap:4px}
.oem-chips{display:flex;flex-wrap:wrap;gap:6px}
.oem-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--line);border-radius:999px;font-size:12px;cursor:pointer;background:var(--card)}
.oem-chip.on{border-color:var(--navy);color:var(--navy)}
.oem-chip input{margin:0}
.oem-num{display:grid;gap:4px;font-size:12px;color:var(--muted)}
.oem-num input,.oem-num textarea{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:7px 9px;width:90px}
.oem-num.big input,.oem-num.big textarea{width:100%}
.oem-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.oem-stage-f{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);padding-top:12px}
.oem-stage-f .grow{flex:1}
.vlink{font:inherit;font-size:12px;border:0;background:transparent;color:var(--navy);cursor:pointer;padding:0;text-decoration:underline}
/* ---- Screen 9 as a guided flow (OEM phase 5 Task 2a, Pages/TenantAccess.razor + Components/Access/AccessStepper.razor): the mock's
   step list at the round-2 laws. The current step is marked in navy (the flame stays the save dock's dot, the one thing a screen marks),
   every step's words are 13 px at least (L8) and each step is a 44 px target (L6). Under 640 px the list is the labelled <select>. */
.acc-flow{grid-template-columns:232px minmax(0,1fr)}
.acc-flow .oem-step-b{min-height:44px;align-content:center}
.acc-flow .oem-step-b.on{border-left-color:var(--navy)}
.acc-flow .oem-step-b.done .oem-step-t{color:var(--navy)}
.acc-flow .oem-step-t{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:14px}
.acc-flow .oem-step-s{font-size:13px}
.acc-flow .oem-stage-f .vbtn{min-height:44px}
.acc-steps-pick{display:none}
@media (max-width:900px){.acc-flow{grid-template-columns:1fr}.acc-flow .oem-steps{position:static;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}}
@media (max-width:640px){.acc-flow .oem-steps{display:none}.acc-flow .acc-steps-pick{display:block}}
.acc-plan-name{font-weight:600}
/* Task 2b: the Visibility step's level segments at the laws (44 px targets, 13 px words; the picked level outlined in navy, never a
   second filled primary beside Save), and the Review step: one group per step that changed, a step both staff members changed marked
   warn, the reason, and the save row (the .vdock recipe: its dot is the screen's one flame, Save access its one primary). */
.acc-flow .oem-seg button{min-height:44px;min-width:44px;font-size:13px;padding:0 12px}
.acc-flow .oem-seg button.on{background:var(--accent-soft);color:var(--accent-ink);box-shadow:inset 0 0 0 2px var(--navy);font-weight:600}
.acc-review{display:grid;gap:14px}
.acc-review-group{display:grid;gap:8px}
.acc-review-group .acc-diff{margin:0}
.acc-review-group.conflict .acc-diff{border-color:var(--warn-ink,var(--line))}
.acc-review-gh{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.acc-review-gh .op-sub{margin:0;font-size:14px;line-height:20px;color:var(--heading)}
.acc-review-choose{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.acc-flow .vbanner .acc-review-choose .vbtn,.acc-flow .vbanner .acc-review-choose .vbtn.ter{margin:0}
.acc-reason{display:block;margin-top:4px;font-size:14px;line-height:20px;font-weight:600;color:var(--ink)}
.acc-review textarea#acc-reason{width:100%;box-sizing:border-box;font-size:14px}
.acc-review-dock{margin:0 16px 16px}
.acc-flow .vbanner .vbtn.ter{margin:8px 0 0}
@media (max-width:640px){.acc-review-dock{margin:0 0 12px}}
/* The Brand step in the flow: the stage is ~650 px beside the pane, too narrow for the mock's form + preview columns (they
   overlapped); stacked here, the preview under the form. The base .oem-brand keeps its two columns. */
.acc-flow .oem-brand{grid-template-columns:minmax(0,1fr)}

/* THE BRAND PACK (OEM phase 4, Task 4). A pack's logo is an <img> of a data: URI inside a FIXED box with overflow hidden: the box,
   never the drawing, decides the size, so a logo cannot spill over the rail, the sign-in page or the panel (and, drawn as an image,
   it runs no script and fetches nothing). */
.brand-logo{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex:none;background:none}
.brand-logo img{display:block;width:100%;height:100%;object-fit:contain}
.vrail .mk .dot.brand-logo{width:36px;height:30px;border-radius:0;background:none}
.vlogin .wordmark .mark.brand-logo{width:46px;height:46px}
.brand-logo.preview{width:120px;height:48px;border:1px solid var(--line);border-radius:8px;padding:6px}
.brand-logo.signin{width:56px;height:56px}
.brand-logo-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.brand-upload{position:relative;cursor:pointer}
.brand-colour input[type=color]{width:42px;height:34px;padding:2px;border:1px solid var(--line);border-radius:8px;background:var(--card);flex:none}
.brand-colour input[type=text]{width:110px}
.brand-host-domain{font-family:var(--mono,ui-monospace,monospace);font-size:12px;color:var(--muted)}
.brand-host .oem-row-x input{width:200px}
.brand-signin{padding:20px;border-radius:8px}
.brand-signin .brand-mark{height:44px;width:auto}
.brand-who .vbanner-b{display:grid;gap:4px}
.brand-who-by{font-size:12px;color:var(--muted)}
.brand-who-line{font-style:italic}
/* The fallback picker (Components/FallbackPicker.razor): the chain drawn as a numbered list, and the chain a call on
   the saved agent resolves to (GET /api/agents/{slug}/stack) in a box under it. */
.fb-list{margin:8px 0 6px;padding-left:22px;display:grid;gap:4px;font-size:13px}
.fb-list li .mono{color:var(--muted);margin-left:4px}
.fb-list li .pill{margin-left:6px}
.fb-resolved{margin-top:12px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.fb-resolved-h{display:flex;align-items:center;justify-content:space-between;gap:8px}