:root{
  --bg:#f6f7f9; --panel:#fff; --ink:#12161c; --muted:#5d6773; --line:#e3e7ec;
  --brand:#1f6feb; --accent:#d97706; --ok:#137333; --warn:#b26a00; --bad:#b3261e;
  --radius:12px; --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif}
a{color:var(--brand)}
button{font:inherit}
.hidden{display:none !important}

header.top{display:flex;align-items:center;gap:1rem;padding:.85rem 1.25rem;
  background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.brandmark{font-weight:650;letter-spacing:-.01em}
.brandmark small{display:block;font-weight:400;color:var(--muted);font-size:.72rem;letter-spacing:.02em}
header.top select,header.top input{padding:.45rem .6rem;border:1px solid var(--line);
  border-radius:8px;background:#fff;color:inherit}
.spacer{flex:1}
.pill{font-size:.72rem;padding:.2rem .55rem;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.pill.live{background:#e7f5ec;border-color:#bde5c8;color:var(--ok)}
.pill.draft{background:#fff4e5;border-color:#ffd9a8;color:var(--warn)}
.pill.testing{background:#eef2ff;border-color:#c7d2fe;color:#3730a3}
.pill.suspended{background:#fdecea;border-color:#f5c2c0;color:var(--bad)}

nav.tabs{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:.75rem;
  padding:0 1.25rem;background:var(--panel);border-bottom:1px solid var(--line);
  position:sticky;top:57px;z-index:19}
.sideBrand{display:none;align-items:center;gap:.55rem;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.sideBrand small{display:block;color:var(--muted);font-size:.68rem;font-weight:500;letter-spacing:.02em}
.brandIcon{display:inline-grid;place-items:center;width:1.8rem;height:1.8rem;border-radius:999px;background:var(--brand);color:#fff;font-size:.72rem}
.tabMenuButton{display:none;align-items:center;gap:.45rem;border:1px solid var(--line);border-radius:8px;
  background:#fff;color:var(--ink);padding:.48rem .7rem;cursor:pointer}
.hamburger,.hamburger::before,.hamburger::after{display:block;width:1rem;height:2px;border-radius:999px;background:currentColor;content:""}
.hamburger{position:relative}.hamburger::before{position:absolute;top:-5px}.hamburger::after{position:absolute;top:5px}
.activeSection{display:none;color:var(--muted);font-size:.82rem;font-weight:650}
.tabMenu{display:flex;gap:.15rem;min-width:0;overflow-x:auto}
.navGroup{display:none}
nav.tabs button[data-tab]{background:none;border:0;border-bottom:2px solid transparent;
  padding:.7rem .85rem;color:var(--muted);cursor:pointer;white-space:nowrap}
nav.tabs button[data-tab].on{color:var(--ink);border-bottom-color:var(--brand);font-weight:550}
@media(max-width:1180px){
  nav.tabs{grid-template-columns:auto auto 1fr;padding:.65rem 1rem}
  .sideBrand,.tabMenuButton,.activeSection{display:flex}
  .tabMenu{display:none;position:absolute;left:1rem;right:1rem;top:calc(100% + .35rem);
    max-height:min(72vh,42rem);overflow:auto;padding:.75rem;background:var(--panel);
    border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px rgba(16,24,40,.16);
    grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem;z-index:30}
  nav.tabs.menuOpen .tabMenu{display:grid}
  .navGroup{display:block;grid-column:1/-1;margin:.35rem 0 .15rem;color:var(--muted);
    font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700}
  nav.tabs button[data-tab]{border:1px solid var(--line);border-radius:8px;background:#fff;text-align:left;padding:.65rem .75rem}
  nav.tabs button[data-tab].on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,#fff);color:var(--ink)}
}
@media(max-width:720px){
  header.top{position:static;flex-wrap:wrap;align-items:flex-start;gap:.5rem}
  header.top .brandmark{flex:1 1 100%}
  header.top .spacer{display:none}
  header.top select{max-width:100%;min-width:0}
  nav.tabs{top:0;grid-template-columns:auto 1fr;gap:.5rem}
  .sideBrand{display:none}
  .activeSection{justify-content:flex-end}
  .tabMenu{left:.75rem;right:.75rem;grid-template-columns:1fr}
}

main{padding:1.25rem;max-width:1240px;margin:0 auto}
h2{margin:0 0 .25rem;font-size:1.1rem}
.sub{color:var(--muted);font-size:.85rem;margin:0 0 1rem}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.75rem;margin-bottom:1.25rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:.9rem 1rem;box-shadow:var(--shadow)}
.card .n{font-size:1.65rem;font-weight:600;letter-spacing:-.02em}
.card .k{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
.card.accent .n{color:var(--accent)}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;margin-bottom:1.25rem}
.panel h3{margin:0;padding:.8rem 1rem;border-bottom:1px solid var(--line);font-size:.9rem}
.panel .body{padding:1rem}

table{width:100%;border-collapse:collapse;font-size:.88rem}
th{text-align:left;color:var(--muted);font-weight:550;font-size:.75rem;
  text-transform:uppercase;letter-spacing:.04em;padding:.6rem 1rem;border-bottom:1px solid var(--line)}
td{padding:.65rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
tr.clickable{cursor:pointer} tr.clickable:hover{background:#fafbfc}
.empty{padding:2rem 1rem;text-align:center;color:var(--muted)}

.feed{list-style:none;margin:0;padding:0}
.feed li{display:flex;gap:.75rem;padding:.6rem 1rem;border-bottom:1px solid var(--line);font-size:.88rem}
.feed li:last-child{border-bottom:0}
.feed .when{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.8rem}
.tag{font-size:.68rem;padding:.1rem .4rem;border-radius:5px;background:#eef1f5;color:var(--muted);white-space:nowrap}
.tag.esc{background:#fdecea;color:var(--bad)} .tag.lead{background:#e7f5ec;color:var(--ok)}
.tag.route{background:#eef2ff;color:#3730a3}

.btn{background:var(--brand);color:#fff;border:0;border-radius:8px;padding:.5rem .9rem;cursor:pointer}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.warn{background:var(--bad)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}

label{display:block;font-size:.8rem;color:var(--muted);margin:.7rem 0 .25rem}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;padding:.55rem .65rem;border:1px solid var(--line);border-radius:8px;
  font:inherit;background:#fff;color:inherit}
input[type=color]{width:3rem;height:2.35rem;padding:.15rem;border:1px solid var(--line);border-radius:8px;background:#fff}
textarea{min-height:5rem;resize:vertical}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 1rem}
@media(max-width:720px){.grid2,.grid3{grid-template-columns:1fr}}
fieldset{border:1px solid var(--line);border-radius:10px;padding:.5rem 1rem 1rem;margin:1rem 0}
legend{font-size:.8rem;color:var(--muted);padding:0 .4rem}
.check{display:flex;align-items:center;gap:.45rem;margin:.4rem 0;font-size:.88rem;color:var(--ink)}
.check input{width:auto;margin:0}
.color-config-row{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:.5rem;align-items:center}
.color-presets{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:.5rem;margin-top:1rem}
.color-preset{display:flex;align-items:center;gap:.55rem;border:1px solid var(--line);border-radius:8px;background:#fff;
  color:var(--ink);padding:.55rem .65rem;cursor:pointer;text-align:left}
.color-preset:hover,.color-preset.on{border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 14%,transparent)}
.swatches{display:flex;gap:.18rem}
.swatches span{width:1.1rem;height:1.1rem;border-radius:999px;border:1px solid rgba(0,0,0,.12)}
.color-preset strong{font-size:.82rem}
.brand-preview{margin-top:1rem;border:1px solid var(--line);border-radius:10px;padding:1rem;
  display:flex;gap:.75rem;align-items:center;justify-content:space-between;background:#fafbfc}
.brand-preview span{font-weight:650}
.brand-preview strong{color:var(--accent)}
@media(max-width:720px){.brand-preview{align-items:flex-start;flex-direction:column}}
.rep-chip-grid{display:flex;flex-wrap:wrap;gap:.45rem;margin:.4rem 0 1rem}
.rep-chip{display:inline-flex;align-items:center;margin:0;color:var(--ink);cursor:pointer}
.rep-chip input{position:absolute;opacity:0;pointer-events:none}
.rep-chip span{
  border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--muted);
  padding:.42rem .7rem;font-size:.8rem;font-weight:650;transition:border-color .15s,background .15s,color .15s,transform .15s
}
.rep-chip input:checked + span{
  border-color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,#fff);color:var(--ink)
}
.rep-chip:hover span{transform:translateY(-1px);border-color:var(--brand)}
.rep-studio-preview{
  display:grid;grid-template-columns:minmax(180px,.55fr) minmax(0,1fr);gap:1rem;align-items:start;
  margin-top:1rem;border:1px solid var(--line);border-radius:10px;padding:1rem;background:#fafbfc
}
.rep-studio-preview strong{display:block;margin-bottom:.25rem}
.rep-studio-preview pre{max-height:18rem}
@media(max-width:820px){.rep-studio-preview{grid-template-columns:1fr}}

.chat{display:flex;flex-direction:column;height:min(62vh,560px)}
.log{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.6rem;background:#fafbfc}
.msg{max-width:78%;padding:.55rem .8rem;border-radius:12px;font-size:.9rem;white-space:pre-wrap}
.msg.a{background:#fff;border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px}
.msg.u{background:var(--brand);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.msg.sys{align-self:center;background:#eef1f5;color:var(--muted);font-size:.75rem;max-width:92%}
.composer{display:flex;gap:.5rem;padding:.75rem;border-top:1px solid var(--line);background:#fff}
.composer input{flex:1}
.trace{font-size:.74rem;color:var(--muted);align-self:flex-start;padding-left:.3rem}

pre.json{background:#0f1419;color:#d7dde5;padding:1rem;border-radius:10px;overflow:auto;
  font-size:.78rem;max-height:60vh;margin:0}
.notice{padding:.7rem .9rem;border-radius:8px;font-size:.85rem;margin-bottom:.75rem}
.notice.ok{background:#e7f5ec;color:#0b5c28} .notice.bad{background:#fdecea;color:#8c1d18}
.notice.warn{background:#fff4e5;color:#8a5300}
.steps{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:1rem;font-size:.75rem;color:var(--muted)}
.steps span{padding:.25rem .5rem;border-radius:6px;background:#eef1f5}
.steps span.on{background:var(--brand);color:#fff}

/* ---- Authentication gate ---- */
#authGate{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1.5rem}
.authbox{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 8px 30px rgba(16,24,40,.08);padding:2rem;width:min(26rem,100%)}
.authbox h1{margin:0 0 .25rem;font-size:1.3rem;letter-spacing:-.02em}
.authbox .sub{margin:0 0 1rem}
#whoami{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.google-auth-section{margin-top:1rem;margin-bottom:.5rem}
.google-btn-wrapper{display:flex;justify-content:center;width:100%;min-height:40px}
.google-btn-wrapper > div{width:100% !important}
.google-custom-btn{display:flex;align-items:center;justify-content:center;gap:.65rem;
  width:100%;padding:.65rem 1rem;background:#fff;color:#3c4043;border:1px solid #dadce0;
  border-radius:8px;font-size:.9rem;font-weight:500;cursor:pointer;
  box-shadow:0 1px 2px rgba(60,64,67,.08);transition:background-color .15s,box-shadow .15s,border-color .15s}
.google-custom-btn:hover{background:#f8f9fa;border-color:#d2e3fc;box-shadow:0 1px 3px rgba(60,64,67,.15)}
.google-custom-btn:active{background:#f1f3f4}
.auth-divider{display:flex;align-items:center;text-align:center;margin:1.1rem 0;color:var(--muted);font-size:.75rem;letter-spacing:.05em}
.auth-divider::before,.auth-divider::after{content:'';flex:1;border-bottom:1px solid var(--line)}
.auth-divider span{padding:0 .6rem}


/* ---- workflow builder ----
   A workflow is a linear list of steps, so it is drawn as one. A node-graph
   canvas photographs better and is markedly worse for the office manager who
   actually writes these: it turns "text them, wait, then call Dana" into a
   layout exercise. The numbered rail carries real order, which is the one
   thing about a workflow the reader must not have to infer. */
.wf-sentence{background:#f1f5fb;border:1px solid #d8e3f3;border-radius:8px;
  padding:.7rem .9rem;margin-bottom:1rem;font-size:.92rem;line-height:1.6;color:var(--ink)}
.wf-sentence b{font-weight:600}

/* ---- Paces-inspired operations dashboard ---- */
:root{
  --bg:#0b1020; --panel:#171d2d; --panel-2:#20283a; --ink:#e8eef8; --muted:#98a6ba; --line:#2b354a;
  --brand:#6675ff; --accent:#35e0c2; --ok:#35e0c2; --warn:#f4b84a; --bad:#fb7185;
  --radius:8px; --shadow:0 18px 48px rgba(0,0,0,.28);
}
body{
  background:
    radial-gradient(circle at 58% 22%, rgba(53,224,194,.12), transparent 24rem),
    radial-gradient(circle at 78% 0%, rgba(102,117,255,.16), transparent 28rem),
    linear-gradient(180deg,#0b1020 0%,#101827 100%);
  color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;z-index:-1;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.55) 1px,transparent 1px),
    radial-gradient(circle,rgba(53,224,194,.45) 1px,transparent 1px);
  background-size:74px 74px,137px 137px;background-position:0 0,32px 21px;
}
#app{min-height:100vh}
header.top{
  position:sticky;top:0;left:240px;z-index:21;margin-left:240px;min-height:56px;
  background:rgba(31,39,56,.92);border-bottom:1px solid rgba(255,255,255,.07);
  box-shadow:0 8px 24px rgba(0,0,0,.16);backdrop-filter:blur(16px);
}
.brandmark{display:none}
header.top select,header.top input,input[type=text],input[type=email],input[type=tel],select,textarea{
  background:#111827;color:var(--ink);border-color:var(--line);
}
header.top select{max-width:18rem}
.pill{background:rgba(255,255,255,.04);border-color:var(--line);color:var(--muted)}
.pill.live{background:rgba(53,224,194,.12);border-color:rgba(53,224,194,.35);color:var(--ok)}
.pill.draft,.pill.testing{background:rgba(102,117,255,.12);border-color:rgba(102,117,255,.32);color:#c7d2fe}
.pill.suspended{background:rgba(251,113,133,.12);border-color:rgba(251,113,133,.35);color:var(--bad)}
.btn{box-shadow:0 10px 20px rgba(102,117,255,.18)}
.btn.ghost{background:rgba(255,255,255,.05);color:var(--ink);border-color:var(--line);box-shadow:none}
.btn.ghost:hover,.btn:hover{transform:translateY(-1px)}

nav.tabs{
  position:fixed;left:0;top:0;bottom:0;width:240px;z-index:30;display:flex;flex-direction:column;
  align-items:stretch;gap:.35rem;padding:1rem .75rem;background:#171b2b;border:0;border-right:1px solid rgba(255,255,255,.08);
  box-shadow:12px 0 32px rgba(0,0,0,.16);overflow:auto;
}
.sideBrand{display:flex;margin:.1rem .25rem 1.4rem;color:#fff;font-size:1.05rem}
.sideBrand small{color:#8f9bb0}
.brandIcon{background:linear-gradient(135deg,var(--brand),var(--accent));color:#fff}
.tabMenuButton,.activeSection{display:none}
.tabMenu{display:flex;flex-direction:column;gap:.18rem;overflow:visible}
.navGroup{
  display:block;margin:1rem .4rem .35rem;color:#8794aa;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.14em;font-weight:800;
}
nav.tabs button[data-tab]{
  width:100%;display:flex;align-items:center;justify-content:flex-start;text-align:left;
  border:0;border-radius:7px;padding:.56rem .65rem;background:transparent;color:#a9b5c8;font-weight:600;
}
nav.tabs button[data-tab]:hover{background:rgba(255,255,255,.05);color:#fff}
nav.tabs button[data-tab].on{
  background:rgba(255,255,255,.08);border:0;color:#fff;box-shadow:inset 3px 0 0 var(--brand);
}
main{max-width:none;margin:0 0 0 240px;padding:1.35rem 1.6rem 2rem}
h2{font-size:1.08rem;letter-spacing:0}
.sub{color:var(--muted)}
.eyebrow{margin:0 0 .25rem;color:#a8b3c5;font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;font-weight:800}

.dashboardTitle{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin:.4rem 0 1rem}
.dashActions{display:flex;gap:.5rem;flex-wrap:wrap}
.dash-metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-bottom:1.25rem}
.action-summary{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.knowledge-summary{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.event-summary,.integration-summary{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.integration-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-bottom:1rem}
.integration-card{background:#111827;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:1rem}
.integration-card h3{margin:0;font-size:.95rem;color:#e2e8f0}
.integration-card p{min-height:4.2rem;margin:.75rem 0;color:#aebbd0;font-size:.86rem}
.event-flow{display:grid;grid-template-columns:1fr 1.8rem 1fr 1.8rem 1fr 1.8rem 1fr;gap:.5rem;align-items:center}
.event-flow span{display:grid;place-items:center;min-height:3.3rem;border:1px solid var(--line);border-radius:8px;background:#111827;text-align:center;color:#dbeafe;font-weight:700;font-size:.82rem}
.event-flow b{height:2px;background:linear-gradient(90deg,var(--brand),var(--accent));border-radius:999px}
.event-reference{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.75rem}
.event-reference article{border:1px solid rgba(255,255,255,.08);border-radius:8px;background:#111827;padding:.8rem}
.event-reference strong{display:block;margin:.5rem 0 .25rem;color:#e2e8f0;font-size:.84rem}
.event-reference p{margin:0;color:#aebbd0;font-size:.78rem;line-height:1.45}
.knowledge-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:1rem;margin-bottom:1rem}
.toolbar{display:flex;gap:.7rem;align-items:center;margin-bottom:1rem}
.toolbar input[type=search]{flex:1;min-width:15rem;padding:.62rem .75rem;border:1px solid var(--line);border-radius:8px;background:#111827;color:var(--ink);font:inherit}
.toolbar select{width:auto;min-width:12rem}
.dropzone{
  position:relative;display:grid;place-items:center;gap:.35rem;min-height:11rem;padding:1.25rem;
  border:1px dashed rgba(152,166,186,.7);border-radius:10px;background:rgba(17,24,39,.78);
  text-align:center;color:#dce6f6;transition:border-color .15s,background .15s,transform .15s;
}
.dropzone span{color:var(--muted);font-size:.86rem;max-width:32rem}
.dropzone input{position:absolute;inset:0;opacity:0;cursor:pointer}
.dropzone.dragging{border-color:var(--accent);background:rgba(53,224,194,.08);transform:translateY(-1px)}
.instructionChips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.75rem}
.instructionChips button{
  border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.05);
  color:#cbd5e1;padding:.38rem .65rem;cursor:pointer;font:inherit;font-size:.78rem;
}
.instructionChips button:hover{border-color:var(--accent);color:#fff}
.source-lanes,.number-sequence,.assistant-simple-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.75rem
}
.source-lanes article,.number-sequence article,.assistant-simple-grid article{
  border:1px solid rgba(255,255,255,.08);border-radius:8px;background:#111827;padding:.85rem
}
.source-lanes strong,.assistant-simple-grid strong{display:block;color:#e2e8f0;font-size:.86rem;margin-bottom:.35rem}
.source-lanes span,.assistant-simple-grid span{display:block;color:var(--muted);font-size:.8rem;line-height:1.45}
.number-sequence article{position:relative;padding-left:3.1rem;min-height:6.4rem}
.number-sequence article.on{border-color:rgba(102,117,255,.45);box-shadow:0 0 0 1px rgba(102,117,255,.18)}
.number-sequence article.done{border-color:rgba(53,224,194,.35);background:rgba(53,224,194,.08)}
.number-sequence article span{
  position:absolute;left:.85rem;top:.85rem;display:grid;place-items:center;width:1.65rem;height:1.65rem;
  border-radius:999px;background:linear-gradient(135deg,var(--brand),var(--accent));color:#fff;font-weight:800;font-size:.78rem
}
.number-sequence strong{display:block;color:#e2e8f0;font-size:.86rem;margin-bottom:.25rem}
.number-sequence p{margin:0;color:var(--muted);font-size:.8rem;line-height:1.45}
.phone-buy-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.7rem;align-items:end;margin-top:1rem}
.phone-buy-grid label{margin:0 0 .25rem}
.phone-purchase-review{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:.75rem;align-items:center;
  margin-top:1rem;border:1px solid rgba(102,117,255,.35);border-radius:8px;background:rgba(102,117,255,.08);padding:.85rem
}
.phone-purchase-review strong{display:block;margin:.35rem 0 .2rem;color:#fff;font-size:.95rem}
.phone-purchase-review .sub{margin:0}
#searchResults [data-select-number].on{border-color:var(--accent);color:#fff}
@media(max-width:1180px){.phone-buy-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.phone-purchase-review{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.phone-buy-grid,.phone-purchase-review{grid-template-columns:1fr}}
.channel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem}
.channel-card{border:1px solid rgba(255,255,255,.08);border-radius:8px;background:#111827;padding:.9rem}
.channel-card strong{color:#e2e8f0;font-size:.88rem}
.channel-card p{min-height:4.8rem;margin:.7rem 0;color:#aebbd0;font-size:.82rem;line-height:1.45}
.channel-card small{display:block;margin:-.25rem 0 .75rem;color:#8f9bb0;font-size:.74rem;line-height:1.4}
.channel-card .row:last-child{gap:.4rem}
.assistant-mode-toggle{margin:.75rem 0 1rem}
.assistant-simple{display:grid;gap:.85rem;margin-bottom:.8rem}
.knowledge-results{display:grid;gap:.65rem;margin-top:1rem}
.knowledge-results article{border:1px solid rgba(255,255,255,.08);border-radius:8px;background:#111827;padding:.8rem}
.knowledge-results p{margin:.55rem 0 0;color:#cbd5e1;white-space:pre-wrap}
.lead-actions{display:flex;flex-wrap:wrap;gap:.45rem;margin:1rem 0}
.lead-convert-form{border:1px solid rgba(255,255,255,.08);border-radius:8px;background:#111827;padding:.9rem;margin-top:.75rem}
.warn-text{color:#fb9aaa !important}
.panel code{background:rgba(255,255,255,.08);border-radius:4px;padding:.05rem .28rem;color:#dbeafe}
.card,.panel{
  background:linear-gradient(180deg,rgba(34,42,61,.94),rgba(25,32,48,.94));
  border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow);
}
.card{min-height:118px;display:flex;justify-content:space-between;gap:.75rem;position:relative;overflow:hidden}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(130deg,rgba(255,255,255,.045),transparent 45%);pointer-events:none}
.clickable-card{cursor:pointer;transition:transform .15s ease,border-color .15s ease}
.clickable-card:hover{transform:translateY(-2px);border-color:rgba(102,117,255,.45)}
.card .k{color:#9aa8bd;font-size:.72rem;font-weight:800}
.card .n{font-size:1.45rem;color:#dce6f6}
.card.accent .n,.card.metric.accent .n{color:var(--accent)}
.card.metric.danger .n{color:var(--bad)}
.trend{color:#8fa1ba;font-size:.8rem;margin-top:.45rem}
.spark{display:flex;align-items:flex-end;gap:.22rem;min-width:5.5rem;height:3.8rem;margin-top:auto}
.spark i{display:block;width:.34rem;border-radius:999px;background:linear-gradient(180deg,var(--brand),rgba(102,117,255,.35))}
.panel{margin-bottom:1rem}
.panel h3{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.07);color:#d7e0ee}
.dash-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,.9fr);gap:1rem}
.dash-grid.bottom{grid-template-columns:minmax(0,1.45fr) minmax(320px,.75fr)}
.overview-chart{min-height:292px}
.overview-chart svg{width:100%;height:292px;display:block}
.gridlines line{stroke:rgba(255,255,255,.08);stroke-width:1}
.bars rect{fill:rgba(209,190,146,.76)}
.lead-line{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 4px 9px rgba(244,184,74,.25))}
.labels text{fill:#8f9bb0;font-size:12px;text-anchor:middle}
.chartLegend{display:flex;justify-content:center;gap:1.4rem;color:var(--muted);font-size:.78rem}
.chartLegend span{display:flex;align-items:center;gap:.4rem}
.legendBar,.legendLine{display:inline-block;width:1.2rem;height:.45rem;border-radius:999px;background:rgba(209,190,146,.76)}
.legendLine{height:.18rem;background:var(--accent)}
.donutWrap{display:grid;place-items:center;gap:1rem;min-height:292px}
.donut{width:min(220px,70vw);aspect-ratio:1;border-radius:999px;display:grid;place-items:center;position:relative}
.donut::after{content:"";position:absolute;inset:24%;border-radius:999px;background:#1b2334}
.donut span{position:relative;z-index:1;color:var(--muted);text-align:center;font-weight:700}
.donut strong{display:block;color:#cbd5e1;font-size:1.4rem;margin-top:.2rem}
.sourceLegend{display:grid;grid-template-columns:1fr 1fr;gap:.65rem 1rem;width:100%;font-size:.8rem;color:#b7c2d2}
.sourceLegend span{display:flex;align-items:center;gap:.42rem;white-space:nowrap}
.sourceLegend i{width:.6rem;height:.6rem;border-radius:999px}
.sourceLegend b{margin-left:auto;color:var(--muted)}
th{color:#8f9bb0;border-bottom-color:rgba(255,255,255,.07)}
td{border-bottom-color:rgba(255,255,255,.06);color:#d0d9e8}
tr.clickable:hover{background:rgba(255,255,255,.04)}
.btn.compact{padding:.32rem .6rem;font-size:.78rem}
.mutedDash{color:var(--muted)}
.call-detail-row td{padding:0;background:rgba(255,255,255,.025)}
.call-detail{padding:1rem;border-top:1px solid rgba(255,255,255,.06)}
.call-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.85rem}
.call-detail-head .sub{margin:.2rem 0 0}
.call-audio{display:flex;align-items:center;justify-content:flex-end;min-width:min(21rem,45vw)}
.call-audio audio{width:min(21rem,100%)}
.call-summary{margin:.25rem 0 1rem;color:var(--ink)}
.call-route-editor{display:grid;grid-template-columns:minmax(160px,1fr) minmax(180px,1fr) auto minmax(120px,.7fr);
  align-items:end;gap:.7rem;margin:0 0 1rem;padding:.85rem;border:1px solid rgba(255,255,255,.08);
  border-radius:8px;background:rgba(0,0,0,.12)}
.call-route-editor label{display:block;margin:0 0 .25rem;color:var(--muted);font-size:.76rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em}
.call-route-editor select{width:100%;border:1px solid var(--line);border-radius:8px;background:#0b1020;color:var(--ink);
  padding:.45rem .6rem}
.call-route-editor .sub{margin:0}
.call-transcript{display:grid;gap:.6rem}
.call-message{border:1px solid rgba(255,255,255,.08);border-radius:8px;background:rgba(0,0,0,.12);padding:.7rem .8rem}
.call-message span{display:block;margin-bottom:.25rem;color:var(--muted);font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.call-message p{margin:0;white-space:pre-wrap}
.call-message.caller{border-left:3px solid var(--brand)}
.call-message.agent{border-left:3px solid var(--accent)}
.appointment-summary{grid-template-columns:repeat(5,minmax(0,1fr))}
.appointment-detail-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:.75rem;margin-top:1rem}
.appointment-detail-grid article{
  border:1px solid rgba(255,255,255,.08);border-radius:8px;background:#111827;padding:.85rem
}
.appointment-detail-grid h4{margin:.55rem 0 .35rem;color:#e2e8f0}
.appointment-detail-grid p{margin:.35rem 0;color:#cbd5e1}
.appointment-detail-grid label{margin:.65rem 0 .25rem}
.appointment-detail-grid select{margin-bottom:.55rem}
.appointment-detail-grid .sub{color:var(--muted)}
.launch-summary{grid-template-columns:repeat(4,minmax(0,1fr))}
.launch-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.75rem}
.launch-step{
  display:grid;gap:.35rem;text-align:left;border:1px solid rgba(255,255,255,.08);
  border-radius:8px;background:#111827;color:var(--ink);padding:.9rem;cursor:pointer
}
.launch-step span{width:max-content;border-radius:999px;padding:.12rem .45rem;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;background:rgba(255,255,255,.08);color:var(--muted)}
.launch-step strong{font-size:.92rem;color:#e2e8f0}
.launch-step p{margin:0;color:#aebbd0;font-size:.82rem;line-height:1.45}
.launch-step.passed{border-color:rgba(53,224,194,.35)}
.launch-step.passed span{background:rgba(53,224,194,.12);color:var(--ok)}
.launch-step.failed{border-color:rgba(251,113,133,.35)}
.launch-step.failed span{background:rgba(251,113,133,.13);color:#fb9aaa}
.launch-step.review{border-color:rgba(244,184,74,.25)}
.launch-step.review span{background:rgba(244,184,74,.12);color:#f6c768}
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.role-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.35rem;margin-top:.4rem}
#apiKeySecret code{display:block;margin-top:.45rem;white-space:normal;overflow-wrap:anywhere;color:inherit}
.tag{background:rgba(255,255,255,.08);color:#aebbd0}
.tag.esc{background:rgba(251,113,133,.13);color:#fb9aaa}
.tag.lead{background:rgba(53,224,194,.12);color:#5eead4}
.tag.route{background:rgba(102,117,255,.16);color:#c7d2fe}
.live-monitor{
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin:0 0 1rem;
  padding:.7rem .9rem;border:1px solid rgba(255,255,255,.08);border-radius:8px;
  background:linear-gradient(90deg,rgba(102,117,255,.14),rgba(53,224,194,.08));
  color:#dbeafe;box-shadow:var(--shadow)
}
.live-monitor strong{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:#fff}
.live-monitor span{color:#cbd5e1;font-size:.86rem}
.live-monitor.active-call{border-color:rgba(53,224,194,.45);box-shadow:0 0 0 1px rgba(53,224,194,.15),var(--shadow)}
.front-flow{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.45rem;margin:.85rem 0 1rem
}
.flow-step{
  display:grid;gap:.3rem;min-height:4.2rem;text-align:left;border:1px solid rgba(255,255,255,.08);
  border-radius:8px;background:#111827;color:var(--ink);padding:.6rem .65rem;cursor:pointer
}
.flow-step span{color:#8f9bb0;font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.flow-step strong{font-size:.8rem;line-height:1.35;overflow-wrap:anywhere}
.flow-step.done{border-color:rgba(53,224,194,.35);background:rgba(53,224,194,.08)}
.flow-step.warn{border-color:rgba(244,184,74,.35);background:rgba(244,184,74,.08)}
.flow-step.pending{opacity:.78}
.route-map{display:grid;gap:.85rem;margin-bottom:1rem}
.route-chain{display:grid;grid-template-columns:1fr 1.5rem 1fr 1.5rem 1fr 1.5rem 1fr 1.5rem 1fr;gap:.35rem;align-items:center}
.route-chain span{display:grid;place-items:center;min-height:3rem;border:1px solid var(--line);border-radius:8px;background:#111827;color:#dbeafe;text-align:center;font-weight:800;font-size:.78rem}
.route-chain b{height:2px;background:linear-gradient(90deg,var(--brand),var(--accent));border-radius:999px}
.route-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.55rem}
.route-check{border:1px solid var(--line);border-radius:8px;background:#111827;padding:.65rem}
.route-check strong{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;margin-bottom:.2rem}
.route-check span{display:block;color:#aebbd0;font-size:.8rem}
.route-check.ok{border-color:rgba(53,224,194,.35)}
.route-check.ok strong{color:var(--ok)}
.route-check.warn{border-color:rgba(244,184,74,.35)}
.route-check.warn strong{color:#f6c768}
.embed-preview{margin-top:1rem;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:#0b1020;padding:.8rem}
.embed-preview-page{position:relative;min-height:14rem;border:1px solid var(--line);border-radius:8px;background:#e4e7e6;color:#101619;overflow:hidden;padding:1rem}
.embed-preview-page header{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid #c2c9c8;padding-bottom:.6rem;font-size:.82rem}
.embed-preview-page header span{color:#54605f}
.embed-preview-page main{max-width:24rem;padding:1.6rem 0}
.embed-preview-page aside{position:absolute;right:1rem;bottom:1rem;width:min(16rem,calc(100% - 2rem));background:#fff;border:1px solid #c2c9c8;border-radius:8px;box-shadow:0 12px 32px rgba(16,22,25,.18);padding:.9rem}
.embed-preview-page aside p{margin:.35rem 0 .7rem;color:#54605f;font-size:.86rem}
.feed li{border-bottom-color:rgba(255,255,255,.06)}
.empty.compact{padding:1rem;text-align:center;color:var(--muted)}
.brand-preview,.log,.composer,.wf-sentence{background:#111827;border-color:var(--line)}
.msg.a{background:#1f2937;border-color:rgba(255,255,255,.1);color:#e8eef8}
.msg.sys{background:#273244;color:#cbd5e1}
.trace{color:#aebbd0}
.color-preset,.tabMenuButton{background:#111827;color:var(--ink);border-color:var(--line)}
.rep-chip span{background:#111827;color:#cbd5e1;border-color:var(--line)}
.rep-chip input:checked + span{background:rgba(102,117,255,.18);border-color:var(--brand);color:#fff}
.rep-studio-preview{background:#111827;border-color:var(--line)}
.wf-step{background:#111827;border-color:var(--line)}
.wf-step .controls button,.wf-cond .drop{background:#0b1020;border-color:var(--line);color:var(--muted)}
.wf-step .kind,.check{color:var(--ink)}
.wf-tokens code{background:rgba(255,255,255,.08);color:#dbeafe}
.steps span{background:rgba(255,255,255,.08)}
fieldset{border-color:var(--line)}
pre.json{background:#080c14}

@media(max-width:720px){
  .front-flow{grid-template-columns:1fr 1fr}
  .route-chain{grid-template-columns:1fr}
  .route-chain b{height:1rem;width:2px;justify-self:center;background:linear-gradient(180deg,var(--brand),var(--accent))}
  .call-detail-head{display:grid}
  .call-audio{justify-content:flex-start;min-width:0}
  .call-audio audio{width:100%}
  .call-route-editor{grid-template-columns:1fr}
}

@media(max-width:1180px){
  header.top{margin-left:0;left:0}
  .brandmark{display:block}
  nav.tabs{
    position:sticky;top:56px;width:auto;bottom:auto;display:grid;grid-template-columns:auto auto 1fr;
    padding:.65rem 1rem;background:rgba(23,27,43,.96);border-right:0;border-bottom:1px solid rgba(255,255,255,.08);
    overflow:visible;
  }
  .sideBrand,.tabMenuButton,.activeSection{display:flex}
  .sideBrand{margin:0;font-size:1rem}
  .tabMenu{
    display:none;position:absolute;left:1rem;right:1rem;top:calc(100% + .35rem);max-height:min(72vh,42rem);
    overflow:auto;padding:.75rem;background:#171b2b;border:1px solid var(--line);border-radius:12px;
    box-shadow:0 18px 40px rgba(0,0,0,.28);grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem;z-index:30;
  }
  nav.tabs.menuOpen .tabMenu{display:grid}
  nav.tabs button[data-tab]{border:1px solid var(--line);background:#111827;box-shadow:none}
  nav.tabs button[data-tab].on{border-color:var(--brand);background:rgba(102,117,255,.18);box-shadow:none}
  .navGroup{grid-column:1/-1;margin:.35rem 0 .15rem}
  main{margin-left:0}
  .dash-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .action-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .knowledge-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .event-summary,.integration-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .appointment-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .launch-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .team-grid{grid-template-columns:1fr}
  .integration-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .event-reference{grid-template-columns:repeat(2,minmax(0,1fr))}
  .event-flow{grid-template-columns:1fr}
  .event-flow b{height:1.1rem;width:2px;justify-self:center;background:linear-gradient(180deg,var(--brand),var(--accent))}
}
@media(max-width:900px){
  .dash-grid,.dash-grid.bottom{grid-template-columns:1fr}
  .knowledge-layout{grid-template-columns:1fr}
  .integration-grid{grid-template-columns:1fr}
}
@media(max-width:720px){
  header.top{position:static}
  nav.tabs{top:0;grid-template-columns:auto 1fr}
  .sideBrand{display:none}
  .tabMenu{left:.75rem;right:.75rem;grid-template-columns:1fr}
  .dash-metrics{grid-template-columns:1fr}
  .action-summary{grid-template-columns:1fr}
  .knowledge-summary{grid-template-columns:1fr}
  .event-summary,.integration-summary,.event-reference{grid-template-columns:1fr}
  .appointment-summary,.appointment-detail-grid{grid-template-columns:1fr}
  .launch-summary{grid-template-columns:1fr}
  .toolbar{align-items:stretch;flex-direction:column}
  .toolbar input[type=search],.toolbar select{width:100%;min-width:0}
  .dashboardTitle{flex-direction:column}
  .dashActions{width:100%}
  .dashActions .btn{flex:1}
  .sourceLegend{grid-template-columns:1fr}
  main{padding:1rem}
}
.wf-sentence .none{color:var(--muted);font-style:italic}
.workflow-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.65rem;margin:.25rem 0 1rem}
.workflow-template-card{
  display:grid;gap:.35rem;text-align:left;border:1px solid rgba(255,255,255,.08);border-radius:8px;
  background:#111827;color:var(--ink);padding:.85rem;cursor:pointer
}
.workflow-template-card:hover{border-color:var(--brand);transform:translateY(-1px)}
.workflow-template-card strong{font-size:.9rem}
.workflow-template-card span{color:var(--muted);font-size:.8rem;line-height:1.45}

.wf-step{display:flex;gap:.75rem;align-items:flex-start;padding:.75rem;margin:.5rem 0;
  background:#fafbfc;border:1px solid var(--line);border-radius:8px}
.wf-step .n{flex:0 0 1.6rem;height:1.6rem;border-radius:999px;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.78rem;font-variant-numeric:tabular-nums}
.wf-step .fields{flex:1;min-width:0;display:flex;flex-direction:column;gap:.4rem}
.wf-step .fields label{margin:0;font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.wf-step .fields input,.wf-step .fields select,.wf-step .fields textarea{margin:0}
.wf-step .kind{font-size:.8rem;font-weight:600;color:var(--ink)}
.wf-step .controls{display:flex;flex-direction:column;gap:.25rem}
.wf-step .controls button{background:#fff;border:1px solid var(--line);border-radius:6px;
  width:1.7rem;height:1.5rem;cursor:pointer;color:var(--muted);line-height:1}
.wf-step .controls button:hover:not(:disabled){color:var(--ink);border-color:var(--muted)}
.wf-step .controls button:disabled{opacity:.3;cursor:not-allowed}

.wf-cond{display:flex;gap:.5rem;align-items:center;margin:.4rem 0}
.wf-cond select,.wf-cond input{margin:0}
.wf-cond .drop{background:#fff;border:1px solid var(--line);border-radius:6px;
  width:1.9rem;height:2.1rem;cursor:pointer;color:var(--muted)}

.wf-tokens{font-size:.78rem;color:var(--muted);margin-top:.15rem}
.wf-tokens code{background:#eef1f5;border-radius:4px;padding:.05rem .3rem;cursor:pointer;font-size:.95em}
.wf-tokens code:hover{background:#dfe5ec;color:var(--ink)}

.wf-steplog{margin-top:.75rem;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.wf-steplog div{display:flex;gap:.6rem;padding:.45rem .75rem;font-size:.85rem;
  border-bottom:1px solid var(--line);align-items:baseline}
.wf-steplog div:last-child{border-bottom:0}
.wf-steplog .i{color:var(--muted);font-variant-numeric:tabular-nums;flex:0 0 1.5rem}
.wf-steplog .t{font-weight:600;flex:0 0 8rem}
.wf-steplog .d{color:var(--muted);flex:1;min-width:0;overflow-wrap:anywhere}

/* ---- wizard: departments and hours ---- */
.dept-row{display:grid;grid-template-columns:1fr 1.4fr 1fr .7fr;gap:.5rem;align-items:end;
  padding:.5rem 0;border-bottom:1px solid var(--line)}
.dept-row:last-child{border-bottom:0}
.dept-row .name{font-size:.85rem;font-weight:600;padding-bottom:.5rem;text-transform:capitalize}
.dept-row label{margin:0;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.dept-row input{margin:0}
@media (max-width:820px){.dept-row{grid-template-columns:1fr 1fr}}

.hours-row{display:grid;grid-template-columns:7rem 1fr 1fr 7rem;gap:.5rem;align-items:center;
  padding:.35rem 0;border-bottom:1px solid var(--line)}
.hours-row:last-child{border-bottom:0}
.hours-row .day{font-size:.85rem;text-transform:capitalize}
.hours-row input[type=time]{margin:0}
.hours-row .check{margin:0}
.hours-row.closed input[type=time]{opacity:.35;pointer-events:none}
@media (max-width:820px){.hours-row{grid-template-columns:5.5rem 1fr 1fr;row-gap:.35rem}}

.loc-row{display:grid;grid-template-columns:1.2fr 1fr .6fr 1fr;gap:.5rem;align-items:end;
  padding:.6rem 0;border-bottom:1px solid var(--line)}
.loc-row:last-child{border-bottom:0}
.loc-row label{margin:0;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.loc-row input{margin:0}
.loc-row .wide{grid-column:1/-1}
.loc-row .sub{grid-column:span 2;margin:0;align-self:end;padding-bottom:.35rem}
@media (max-width:820px){.loc-row{grid-template-columns:1fr 1fr}.loc-row .sub{grid-column:1/-1}}

/* ---- porting ----
   The one thing a reader must not have to work out for themselves is whether
   their calls are arriving here yet, so it is a coloured strip and a sentence
   rather than a status word in a table cell. Amber, not red: a port that is
   still with the old carrier is working correctly, and a red row would have
   people phoning support about a healthy port. */
.checklist{list-style:none;margin:.5rem 0 0;padding:0}
.checklist li{position:relative;padding:.4rem 0 .4rem 1.6rem;border-bottom:1px solid var(--line);font-size:.88rem}
.checklist li:last-child{border-bottom:0}
.checklist li::before{content:"";position:absolute;left:0;top:.72rem;width:.85rem;height:.85rem;
  border:1.5px solid var(--muted);border-radius:3px}
.checklist li.dont{color:#8c1d18;font-weight:550}
.checklist li.dont::before{content:"!";border:0;color:var(--bad);font-weight:700;top:.3rem;left:.15rem;
  width:auto;height:auto;font-size:1rem}

.port-card{border:1px solid var(--line);border-left:4px solid var(--warn);border-radius:8px;
  padding:.75rem .9rem;margin-bottom:.75rem;cursor:pointer;background:#fff}
.port-card:hover{border-color:var(--muted);border-left-color:var(--warn)}
.port-card.live{border-left-color:var(--ok)}
.port-card.live:hover{border-left-color:var(--ok)}
.port-card.over{border-left-color:var(--muted)}
.port-card .head{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.port-card .head strong{font-size:1rem;font-variant-numeric:tabular-nums}
.port-card .impact{margin:.5rem 0 .25rem;font-size:.92rem;line-height:1.5}
.port-card .rings{font-size:.72rem;padding:.2rem .55rem;border-radius:999px;white-space:nowrap;
  background:#fff4e5;border:1px solid #ffd9a8;color:var(--warn)}
.port-card .rings.here{background:#e7f5ec;border-color:#bde5c8;color:var(--ok)}
.port-card .sub{margin:0}

.port-problems{background:#fff4e5;border:1px solid #ffd9a8;border-radius:8px;padding:.7rem .9rem;margin-top:.75rem}
.port-problems h4{margin:0 0 .35rem;font-size:.85rem;color:#8a5300}
.port-problems ul{margin:0;padding-left:1.1rem;font-size:.85rem;color:#8a5300}
.port-problems li{margin:.2rem 0}

.port-history{border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:.75rem}
.port-history div{display:flex;gap:.7rem;padding:.45rem .75rem;font-size:.85rem;
  border-bottom:1px solid var(--line);align-items:baseline}
.port-history div:last-child{border-bottom:0}
.port-history .when{color:var(--muted);font-variant-numeric:tabular-nums;flex:0 0 8.5rem;font-size:.8rem}
.port-history .d{flex:1;min-width:0;overflow-wrap:anywhere}

/* ---- event feeds ----
   The secret banner is loud on purpose. It is the only moment the value exists
   outside our database, and a tidy grey box is one an operator closes without
   reading. */
.secret-once{background:#fff4e5;border:1px solid #ffd9a8;border-radius:var(--radius);
  padding:1rem 1.1rem;margin-bottom:1.25rem;box-shadow:var(--shadow)}
.secret-once h4{margin:0 0 .35rem;font-size:.95rem;color:#8a5300}
.secret-once p{margin:.35rem 0;font-size:.86rem;color:#8a5300;line-height:1.5}
.secret-once input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;flex:1;min-width:14rem}
.secret-once code{background:#ffe9c9;border-radius:4px;padding:.05rem .3rem}
.secret-once .sub{color:#8a5300;opacity:.85}

/* ---- results: counted versus estimated ----
   The whole point of this page is that the reader can tell the two apart at a
   glance and without reading a legend, so the difference is carried by the
   panel itself — colour, rule, and a badge — not by wording alone. */
.badge{font-size:.66rem;padding:.15rem .45rem;border-radius:999px;text-transform:uppercase;
  letter-spacing:.04em;font-weight:600;vertical-align:middle;margin-left:.4rem}
.badge.measured{background:#e7f5ec;color:#0b5c28;border:1px solid #bde5c8}
.badge.modelled{background:#fff4e5;color:#8a5300;border:1px solid #ffd9a8}
.badge.default{background:#fff4e5;color:#8a5300;border:1px solid #ffd9a8}
.badge.override{background:#eef2ff;color:#3730a3;border:1px solid #c7d2fe}

.panel.measured{border-left:4px solid var(--ok)}
.panel.modelled{border-left:4px solid var(--warn);
  background:repeating-linear-gradient(135deg,#fff,#fff 9px,#fffaf2 9px,#fffaf2 18px)}
.panel.modelled h3,.panel.modelled .body{background:transparent}

.figure{display:grid;grid-template-columns:11rem 1fr;gap:.2rem .9rem;align-items:baseline;
  padding:.7rem 0;border-bottom:1px solid var(--line)}
.figure:last-child{border-bottom:0}
.figure .v{font-size:1.35rem;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.figure .l{font-size:.9rem}
.figure .basis{grid-column:2;color:var(--muted);font-size:.78rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere}
.figure .note{grid-column:2;color:var(--muted);font-size:.8rem}
@media (max-width:720px){.figure{grid-template-columns:1fr}.figure .basis,.figure .note{grid-column:1}}

.none{color:var(--muted);font-style:italic;font-size:.85rem;font-weight:400;letter-spacing:0}

.bars{margin:.5rem 0 0}
.bars .b{display:grid;grid-template-columns:10rem 1fr 4.5rem;gap:.6rem;align-items:center;
  padding:.25rem 0;font-size:.85rem}
.bars .b .track{background:#eef1f5;border-radius:4px;height:.6rem;overflow:hidden}
.bars .b .fill{background:var(--brand);height:100%;border-radius:4px}
.bars .b .v{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;font-size:.8rem}
@media (max-width:600px){.bars .b{grid-template-columns:7rem 1fr 4rem}}

svg.chart{width:100%;height:auto;display:block}
svg.chart .bar{fill:var(--brand)}
svg.chart .zero{fill:#dfe5ec}
svg.chart .axis{fill:var(--muted);font-size:11px}

.an-assumption{display:grid;grid-template-columns:1fr 12rem;gap:.3rem .9rem;align-items:start;
  padding:.7rem 0;border-bottom:1px solid var(--line)}
.an-assumption:last-child{border-bottom:0}
.an-assumption label{margin:0}
.an-assumption .hint{grid-column:1;color:var(--muted);font-size:.8rem}
.an-assumption input{margin:0}
.an-assumption .now{grid-column:2;font-size:.78rem;color:var(--muted)}
@media (max-width:720px){.an-assumption{grid-template-columns:1fr}
  .an-assumption .hint,.an-assumption .now{grid-column:1}}

/* The step rail tracks the fieldset actually in view, rather than always
   claiming step one. A progress indicator that lies is worse than none. */
.steps{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1rem}
.steps span{font-size:.72rem;padding:.25rem .6rem;border-radius:999px;border:1px solid var(--line);
  color:var(--muted);background:var(--panel);white-space:nowrap;transition:background .15s,color .15s}
.steps span.on{background:var(--brand);border-color:var(--brand);color:#fff}
.steps span.done{border-color:#bde5c8;background:#e7f5ec;color:var(--ok)}

/* Final dark-theme pass for older page modules that are defined after the
   dashboard rules above. */
.wf-step,.port-card,.port-history,.secret-once,.panel.modelled,.steps span{
  background:#111827;border-color:var(--line);color:var(--ink);
}
.wf-step .controls button,.wf-cond .drop{background:#0b1020;border-color:var(--line);color:var(--muted)}
.wf-step .kind,.check{color:var(--ink)}
.wf-tokens code,.secret-once code{background:rgba(255,255,255,.08);color:#dbeafe}
.port-card:hover{border-color:#475569}
.port-problems{background:rgba(244,184,74,.12);border-color:rgba(244,184,74,.35)}
.port-problems h4,.port-problems ul,.secret-once h4,.secret-once p,.secret-once .sub{color:#f6c768}
.port-card .rings{background:rgba(244,184,74,.12);border-color:rgba(244,184,74,.35);color:#f6c768}
.port-card .rings.here{background:rgba(53,224,194,.12);border-color:rgba(53,224,194,.35);color:var(--ok)}
.badge.measured{background:rgba(53,224,194,.12);color:var(--ok);border-color:rgba(53,224,194,.35)}
.badge.modelled,.badge.default{background:rgba(244,184,74,.12);color:#f6c768;border-color:rgba(244,184,74,.35)}
.badge.override{background:rgba(102,117,255,.16);color:#c7d2fe;border-color:rgba(102,117,255,.35)}
.panel.modelled{background:linear-gradient(180deg,rgba(34,42,61,.94),rgba(25,32,48,.94));border-left-color:var(--warn)}
.bars .b .track{background:#0b1020}
.steps span.done{border-color:rgba(53,224,194,.35);background:rgba(53,224,194,.12);color:var(--ok)}

.go-live-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-top:1rem}
.go-live-group{background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow-sm);overflow:hidden}
.go-live-group h3{margin:0;padding:1rem;border-bottom:1px solid var(--line);font-size:.95rem}
.go-live-checks{display:grid}
.go-live-check{display:grid;grid-template-columns:2rem 1fr;gap:.65rem;padding:.85rem 1rem;border-bottom:1px solid var(--line)}
.go-live-check:last-child{border-bottom:0}
.go-live-check .checkIcon{width:1.6rem;height:1.6rem;border-radius:999px;display:grid;place-items:center;font-weight:700;border:1px solid var(--line)}
.go-live-check.passed .checkIcon{background:rgba(53,224,194,.14);border-color:rgba(53,224,194,.35);color:var(--ok)}
.go-live-check.failed .checkIcon{background:rgba(248,113,113,.14);border-color:rgba(248,113,113,.35);color:var(--bad)}
.go-live-check.review .checkIcon{background:rgba(244,184,74,.14);border-color:rgba(244,184,74,.35);color:var(--warn)}
.go-live-check p{margin:.25rem 0;color:var(--muted);font-size:.86rem;line-height:1.4}
.go-live-check small{display:block;color:var(--muted);font-size:.74rem}
.go-live-check .row{gap:.5rem;align-items:center}
.go-live-summary .metric .n{font-variant-numeric:tabular-nums}
button:disabled{opacity:.55;cursor:not-allowed}
.number-results{display:grid;gap:.5rem;margin:1rem 0}
.number-result{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;border:1px solid var(--line);border-radius:8px;padding:.75rem;background:rgba(255,255,255,.03)}
.number-result strong{display:block;font-size:1rem}
.number-result span,.number-result small{display:block;color:var(--muted);font-size:.82rem;margin-top:.15rem}
@media (max-width:640px){.number-result{grid-template-columns:1fr}.number-result .btn{width:100%}}