/* assets/css/app.css
   ClickBaton application shell.
   Token system taken directly from the approved dashboard template - light mode
   default, dark via [data-theme="dark"]. Feather icons only, no emoji anywhere. */

:root{
  --ink:#F7F8FA;
  --surface:#FFFFFF;
  --surface-raised:#FFFFFF;
  --surface-hover:#F1F2F5;
  --hairline:#E1E4EA;
  --hairline-soft:#EBEEF3;
  --text-primary:#0B0E14;
  --text-secondary:#4E5666;
  --text-muted:#8A92A1;
  --amber:#7C3AED;
  --amber-dim:rgba(124,58,237,0.14);
  --teal:#1B9D63;
  --teal-dim:rgba(27,157,99,0.14);
  --coral:#D6394B;
  --coral-dim:rgba(214,57,75,0.14);
  --slate:#5C6675;
  --slate-dim:rgba(92,102,117,0.14);
  --gold:#B7791F;
  --gold-dim:rgba(183,121,31,0.14);
  --topbar-bg:rgba(247,248,250,0.9);
  --overlay-bg:rgba(0,0,0,0.5);
  --radius-lg:16px;
  --radius-md:10px;
  --radius-sm:7px;
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}

[data-theme="dark"]{
  --ink:#0B0E14;
  --surface:#12161F;
  --surface-raised:#171C27;
  --surface-hover:#1D2330;
  --hairline:#242B38;
  --hairline-soft:#1B212C;
  --text-primary:#EDEFF3;
  --text-secondary:#AEB6C4;
  --text-muted:#6E7686;
  --amber:#A78BFA;
  --amber-dim:rgba(167,139,250,0.14);
  --teal:#3ADC97;
  --teal-dim:rgba(58,220,151,0.14);
  --coral:#FF5C6C;
  --coral-dim:rgba(255,92,108,0.14);
  --slate:#8891A1;
  --slate-dim:rgba(136,145,161,0.14);
  --gold:#E3B341;
  --gold-dim:rgba(227,179,65,0.14);
  --topbar-bg:rgba(11,14,20,0.9);
  --overlay-bg:rgba(5,7,11,0.72);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{background:var(--ink);color:var(--text-primary);font-family:var(--font-body);min-height:100vh;}
body{-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
::selection{background:var(--amber-dim);color:var(--text-primary);}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:4px;}
::-webkit-scrollbar{height:6px;width:6px;}
::-webkit-scrollbar-thumb{background:var(--hairline);border-radius:10px;}
svg.i{width:16px;height:16px;stroke-width:1.75;}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

/* ---------- shell ---------- */
.shell{display:flex;min-height:100vh;}

.sidebar{
  width:224px;flex:0 0 224px;background:var(--surface);
  border-right:1px solid var(--hairline-soft);padding:22px 16px;
  display:flex;flex-direction:column;justify-content:space-between;
  position:fixed;top:0;bottom:0;left:0;transform:translateX(-100%);
  transition:transform .22s ease;z-index:60;overflow-y:auto;
}
.sidebar.open{transform:translateX(0);}
.sidebar-brand{display:flex;align-items:center;gap:9px;padding:0 6px 28px;}
.brand-mark{
  width:28px;height:28px;border-radius:8px;
  background:linear-gradient(155deg,var(--surface-hover),var(--surface));
  border:1px solid var(--hairline);display:flex;align-items:center;justify-content:center;
}
.brand-mark svg{width:15px;height:15px;stroke:var(--amber);}
.brand-name{font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:-.01em;}

.sb-group{font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--text-muted);padding:14px 11px 6px;}
.sidebar-nav{display:flex;flex-direction:column;gap:2px;}
.sb-link{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:9px;
  color:var(--text-secondary);font-size:13.5px;font-weight:500;cursor:pointer;}
.sb-link svg{flex:0 0 auto;}
.sb-link:hover{background:var(--surface-hover);color:var(--text-primary);}
.sb-link.active{background:var(--amber-dim);color:var(--amber);}

.sidebar-foot{border-top:1px solid var(--hairline-soft);padding-top:14px;
  display:flex;align-items:center;gap:10px;}
.sf-avatar{width:30px;height:30px;border-radius:50%;background:var(--surface-hover);
  border:1px solid var(--hairline);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:11px;color:var(--text-secondary);flex:0 0 auto;}
.sf-name{font-size:12.5px;font-weight:500;}
.sf-role{font-size:11px;color:var(--text-muted);}
.sidebar-overlay{display:none;position:fixed;inset:0;background:var(--overlay-bg);z-index:55;}
.sidebar-overlay.open{display:block;}

.main{flex:1;min-width:0;}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:04px 20px;
  border-bottom:1px solid var(--hairline-soft);position:sticky;top:0;z-index:30;
  background:var(--topbar-bg);backdrop-filter:blur(14px);gap:12px;}
.topbar-left{display:flex;align-items:center;gap:12px;min-width:0;}
.topbar-right{display:flex;align-items:center;gap:8px;}
.hamburger,.icon-btn{width:34px;height:34px;border-radius:9px;background:var(--surface-raised);
  border:1px solid var(--hairline);display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text-secondary);position:relative;flex:0 0 auto;}
.topbar-title{font-family:var(--font-display);font-size:17px;font-weight:600;letter-spacing:-.01em;}
.topbar-sub{font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted);margin-top:1px;}
.icon-sun{display:none;}
.icon-moon{display:block;}
[data-theme="dark"] .icon-sun{display:block;}
[data-theme="dark"] .icon-moon{display:none;}
.dot-badge{position:absolute;top:6px;right:7px;width:7px;height:7px;border-radius:50%;
  background:var(--coral);border:2px solid var(--surface-raised);}

/* Onboarding meter in the topbar.
   The old ring rules lived here and left an orphaned declaration behind when
   the selector was edited away: a closing brace with nothing opening it, which
   silently broke every rule after it until the next brace resynced the parser.
   The current rules are further down, under "setup progress". */
.onb-track{width:52px;height:5px;border-radius:100px;background:var(--hairline);overflow:hidden;}
.onb-fill{height:100%;background:var(--amber);border-radius:100px;transition:width .4s ease;}
.onb-label{font-family:var(--font-mono);font-size:10.5px;color:var(--text-secondary);white-space:nowrap;}

.btn{display:inline-flex;align-items:center;gap:6px;border-radius:9px;padding:9px 14px;
  font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;border:1px solid transparent;}
.btn-primary{background:var(--amber);color:#fff;border:none;}
.btn-ghost{background:var(--surface-raised);border-color:var(--hairline);color:var(--text-secondary);}
.btn:disabled{opacity:.5;cursor:not-allowed;}

.content{padding:20px;max-width:1180px;}

/* ---------- stat cards ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:22px;}
.stat-card{background:var(--surface-raised);border:1px solid var(--hairline);
  border-radius:var(--radius-lg);padding:16px;}
.stat-label{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--text-muted);margin-bottom:9px;display:flex;
  align-items:center;gap:6px;}
.stat-value{font-family:var(--font-display);font-size:23px;font-weight:600;letter-spacing:-.01em;}
.stat-value .unit{font-size:14px;color:var(--text-muted);font-weight:500;margin-left:2px;}
.stat-delta{font-family:var(--font-mono);font-size:11px;margin-top:6px;display:flex;
  align-items:center;gap:4px;}
.stat-delta.up{color:var(--teal);}
.stat-delta.down{color:var(--coral);}
.stat-delta.flat{color:var(--text-muted);}

/* ---------- panels ---------- */
.panel{background:var(--surface-raised);border:1px solid var(--hairline);
  border-radius:var(--radius-lg);padding:18px;margin-bottom:22px;}
.panel-head{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;flex-wrap:wrap;gap:10px;}
.panel-title{font-family:var(--font-display);font-size:15px;font-weight:600;}
.panel-title span{color:var(--text-muted);font-weight:500;font-size:12px;
  margin-left:8px;font-family:var(--font-body);}

.legend{display:flex;gap:12px;flex-wrap:wrap;}
.legend-item{display:flex;align-items:center;gap:6px;font-size:12px;
  color:var(--text-secondary);font-family:var(--font-mono);cursor:pointer;}
.legend-item.off{opacity:.35;}
.legend-dot{width:8px;height:8px;border-radius:50%;}

/* ---------- tier bar ---------- */
.tierbar{display:flex;height:34px;border-radius:var(--radius-sm);overflow:hidden;
  border:1px solid var(--hairline);margin-bottom:14px;}
.tierbar-seg{display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:10.5px;color:#fff;min-width:0;
  transition:flex-grow .3s ease;}
.tier-rows{display:flex;flex-direction:column;gap:2px;}
.tier-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;
  cursor:pointer;}
.tier-row:hover{background:var(--surface-hover);}
.tier-swatch{width:9px;height:9px;border-radius:2px;flex:0 0 auto;}
.tier-name{font-size:13px;font-weight:500;flex:1;min-width:0;}
.tier-note{font-size:11.5px;color:var(--text-muted);font-weight:400;display:block;margin-top:1px;}
.tier-num{font-family:var(--font-mono);font-size:12.5px;color:var(--text-secondary);}
.tier-pct{font-family:var(--font-mono);font-size:11.5px;color:var(--text-muted);
  min-width:44px;text-align:right;}

/* ---------- chart ---------- */
.chart-wrap{position:relative;width:100%;height:260px;}
.chart-svg{width:100%;height:100%;overflow:visible;}
.chart-grid-line{stroke:var(--hairline-soft);stroke-width:1;stroke-dasharray:4 4;}
.chart-line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;transition:opacity .2s ease;}
.chart-hover-guide{position:absolute;top:0;bottom:20px;width:1px;
  background:var(--hairline);pointer-events:none;display:none;}
.chart-tooltip{position:absolute;background:var(--surface);border:1px solid var(--hairline);
  box-shadow:0 4px 12px rgba(0,0,0,.08);padding:10px 12px;border-radius:8px;
  pointer-events:none;transform:translate(-50%,-100%);margin-top:-10px;z-index:10;
  min-width:150px;display:none;}
.tt-time{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);margin-bottom:6px;}
.tt-row{display:flex;justify-content:space-between;gap:12px;font-size:11.5px;margin-bottom:3px;}
.tt-label{display:flex;align-items:center;gap:6px;color:var(--text-secondary);}
.tt-label .dot{width:6px;height:6px;border-radius:50%;}
.tt-val{font-family:var(--font-mono);font-weight:600;}
.chart-x-axis{display:flex;justify-content:space-between;padding-top:8px;}
.x-label{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);}

/* ---------- tables ---------- */
.ledger-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;gap:10px;}
.ledger-title{font-family:var(--font-display);font-size:16px;font-weight:600;}
.ledger-meta{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);}
.table-wrap{background:var(--surface-raised);border:1px solid var(--hairline);
  border-radius:var(--radius-lg);overflow:hidden;margin-bottom:22px;}
table{width:100%;border-collapse:collapse;}
thead th{text-align:left;font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--text-muted);font-weight:500;padding:13px 16px;
  border-bottom:1px solid var(--hairline-soft);}
tbody tr{border-bottom:1px solid var(--hairline-soft);transition:background .15s ease;}
tbody tr:last-child{border-bottom:none;}
tbody tr:hover{background:var(--surface-hover);}
td{padding:13px 16px;font-size:13px;vertical-align:middle;}
.entity-cell{display:flex;align-items:center;gap:10px;}
.entity-avatar{width:32px;height:32px;border-radius:50%;background:var(--surface);
  border:1px solid var(--hairline);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:10.5px;color:var(--text-secondary);flex:0 0 auto;}
.entity-name{font-weight:600;font-size:13px;}
.entity-meta{font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted);margin-top:1px;}
.mono{font-family:var(--font-mono);}
.num-cell{font-family:var(--font-mono);font-size:12.5px;color:var(--text-secondary);}

.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);
  font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:100px;}
.tag.human{color:var(--teal);background:var(--teal-dim);}
.tag.privacy{color:var(--amber);background:var(--amber-dim);}
.tag.utility{color:var(--slate);background:var(--slate-dim);}
.tag.zombie{color:var(--gold);background:var(--gold-dim);}
.tag.rogue{color:var(--coral);background:var(--coral-dim);}
.tag.unknown{color:var(--text-muted);background:var(--surface-hover);}

.verified{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);
  font-size:10.5px;color:var(--teal);}
.verified svg{width:12px;height:12px;}

/* ---------- evidence panel ----------
   The signature element. Any verdict expands into the named signals that
   produced it - the direct answer to "if they flag it, I want to know which
   signal did it". */
.evidence{border-top:1px solid var(--hairline-soft);}
.ev-row{display:flex;align-items:flex-start;gap:11px;padding:11px 16px;
  border-bottom:1px solid var(--hairline-soft);}
.ev-row:last-child{border-bottom:none;}
.ev-mark{width:20px;height:20px;border-radius:5px;display:flex;align-items:center;
  justify-content:center;flex:0 0 auto;margin-top:1px;}
.ev-mark svg{width:12px;height:12px;}
.ev-mark.against{background:var(--coral-dim);color:var(--coral);}
.ev-mark.support{background:var(--teal-dim);color:var(--teal);}
.ev-mark.neutral{background:var(--surface-hover);color:var(--text-muted);}
.ev-text{font-size:12.5px;color:var(--text-secondary);line-height:1.5;}
.ev-name{font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted);
  display:block;margin-top:3px;}

.empty{padding:44px 24px;text-align:center;}
.empty-icon{width:38px;height:38px;border-radius:11px;background:var(--surface-hover);
  border:1px solid var(--hairline);display:inline-flex;align-items:center;
  justify-content:center;color:var(--text-muted);margin-bottom:14px;}
.empty h3{font-family:var(--font-display);font-size:15px;font-weight:600;margin-bottom:6px;}
.empty p{font-size:13px;color:var(--text-secondary);max-width:400px;margin:0 auto 16px;line-height:1.6;}

.notice{display:flex;gap:11px;padding:13px 15px;border-radius:var(--radius-md);
  background:var(--amber-dim);border:1px solid rgba(124,58,237,.2);margin-bottom:22px;}
.notice svg{flex:0 0 auto;color:var(--amber);margin-top:1px;}
.notice-text{font-size:12.5px;color:var(--text-secondary);line-height:1.55;}
.notice-text strong{color:var(--text-primary);font-weight:600;}

.range{display:flex;gap:2px;background:var(--surface-raised);border:1px solid var(--hairline);
  border-radius:9px;padding:3px;}
.range button{background:none;border:none;padding:5px 11px;border-radius:6px;
  font-family:var(--font-mono);font-size:11.5px;color:var(--text-secondary);cursor:pointer;}
.range button.active{background:var(--amber-dim);color:var(--amber);}

.ledger-cards{display:none;flex-direction:column;gap:10px;}
.l-card{background:var(--surface-raised);border:1px solid var(--hairline);
  border-radius:var(--radius-lg);padding:15px 16px;}
.l-card-top{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;gap:10px;}
.l-card-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.lc-label{font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--text-muted);margin-bottom:3px;}
.lc-value{font-family:var(--font-mono);font-size:13px;}

@media (min-width:760px){
  .stat-grid{grid-template-columns:repeat(4,1fr);}
  .sidebar{transform:translateX(0);position:sticky;height:100vh;}
  .hamburger{display:none;}
  .sidebar-overlay{display:none !important;}
  .content{padding:26px 30px;}
  .onb-meter{display:flex;}
}
@media (max-width:759px){
  table{display:none;}
  .ledger-cards{display:flex;}
  .chart-wrap{height:220px;}
  .topbar-sub{display:none;}
}

/* ---------- classification explainer ----------
   Slide-out reference. Documentation inside the product, at the moment someone
   is looking at a number they do not recognise - not in a help centre they would
   have to go find. */

.cbx-overlay{
  position:fixed;inset:0;z-index:110;display:none;
  background:var(--overlay-bg);backdrop-filter:blur(2px);
}
.cbx-overlay.open{display:block;}

.cbx-panel{
  position:fixed;top:0;right:0;bottom:0;z-index:120;
  width:100%;max-width:440px;
  background:var(--surface-raised);
  border-left:1px solid var(--hairline);
  transform:translateX(100%);
  transition:transform .24s cubic-bezier(.2,.8,.3,1);
  display:flex;flex-direction:column;
  box-shadow:-16px 0 44px -14px rgba(0,0,0,.4);
}
.cbx-panel.open{transform:translateX(0);}

.cbx-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:20px;border-bottom:1px solid var(--hairline-soft);flex:0 0 auto;
}
.cbx-eyebrow{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:5px;
}
.cbx-title{font-family:var(--font-display);font-size:17px;font-weight:600;letter-spacing:-.01em;}
#cbxClose svg{transform:rotate(45deg);}   /* plus becomes a close cross */

.cbx-body{flex:1;overflow-y:auto;padding:18px 20px 28px;}
.cbx-intro{font-size:13px;color:var(--text-secondary);line-height:1.6;margin-bottom:18px;}
.cbx-intro a{color:var(--amber);}

.cbx-tier{border:1px solid var(--hairline-soft);border-radius:var(--radius-md);margin-bottom:9px;}
.cbx-tier summary{
  display:flex;align-items:flex-start;gap:11px;padding:13px 14px;
  cursor:pointer;list-style:none;
}
.cbx-tier summary::-webkit-details-marker{display:none;}
.cbx-tier summary:hover{background:var(--surface-hover);}
.cbx-tier[open] summary{border-bottom:1px solid var(--hairline-soft);}
.cbx-tier[open] summary svg:last-child{transform:rotate(180deg);}
.cbx-tier summary svg:last-child{
  transition:transform .18s ease;color:var(--text-muted);flex:0 0 auto;margin-top:2px;
}
.cbx-swatch{width:9px;height:9px;border-radius:2px;flex:0 0 auto;margin-top:5px;}
.cbx-tier-name{flex:1;min-width:0;font-size:13.5px;font-weight:600;}
.cbx-tier-name span{
  display:block;font-weight:400;font-size:12px;color:var(--text-secondary);
  margin-top:3px;line-height:1.5;
}

.cbx-detail{padding:14px;}
.cbx-sub{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:10px;
}
.cbx-signal{
  display:flex;gap:10px;align-items:flex-start;
  font-size:12.5px;color:var(--text-secondary);line-height:1.55;margin-bottom:9px;
}
.cbx-signal .ev-mark{width:18px;height:18px;flex:0 0 auto;margin-top:1px;}
.cbx-signal .ev-mark svg{width:11px;height:11px;}
.cbx-note{
  margin-top:13px;padding:11px 12px;border-radius:var(--radius-sm);
  background:var(--surface-hover);font-size:12px;color:var(--text-secondary);line-height:1.6;
}

.cbx-foot{margin-top:22px;padding-top:18px;border-top:1px solid var(--hairline-soft);}
.cbx-foot p{font-size:12.5px;color:var(--text-secondary);line-height:1.6;margin-bottom:11px;}
.cbx-foot strong{color:var(--text-primary);font-weight:600;}

@media (prefers-reduced-motion:reduce){
  .cbx-panel{transition:none;}
}


/* ---------- annotation markers ----------
   A note on a chart, which is the only place a note is worth anything. Muted
   until hovered: the line is the subject and the marker is a footnote, so it
   must never compete with the data it explains. */
.chart-marker-line{stroke:var(--text-muted);stroke-width:1;stroke-dasharray:3 4;opacity:.32;}
.chart-marker-dot{cursor:pointer;stroke:var(--surface-raised);stroke-width:2;
  fill:var(--text-muted);transition:r .12s ease,fill .12s ease;}
.chart-marker-dot:hover,.chart-marker-dot:focus{r:7;outline:none;}
.chart-marker-dot.cat-campaign{fill:var(--amber);}
.chart-marker-dot.cat-deploy{fill:var(--slate);}
.chart-marker-dot.cat-pricing{fill:var(--teal);}
.chart-marker-dot.cat-incident{fill:var(--coral);}
.chart-marker-dot.cat-content{fill:var(--gold);}
.chart-marker-dot.cat-external{fill:var(--text-muted);}


/* ---------- collapsible sidebar sections ----------
   The sidebar reached twenty-two items, which is a list nobody scans. Grouping
   alone did not fix it because every group was always open; collapsing does,
   provided the section containing the current page opens itself. A menu that
   hides the page you are on is worse than one that never collapsed. */
.sb-section{margin-bottom:2px;}

.sb-group{display:flex;align-items:center;justify-content:space-between;
  gap:8px;width:100%;background:none;border:0;cursor:pointer;
  padding:10px 12px 8px;font-family:var(--font-mono);font-size:9.5px;
  text-transform:uppercase;letter-spacing:.09em;color:var(--text-muted);
  text-align:left;border-radius:var(--radius-sm);}
.sb-group:hover{color:var(--text-secondary);background:var(--surface-hover);}
.sb-group:focus-visible{outline:2px solid var(--amber);outline-offset:-2px;}

/* Explicit size rather than relying on the shared icon rule, because this one
   sits in a 9.5px row and the default 16px reads as oversized next to it. */
svg.sb-caret{width:12px;height:12px;flex:0 0 auto;opacity:.55;
  transition:transform .18s ease;transform:rotate(-90deg);}
.sb-section.open > .sb-group svg.sb-caret{transform:rotate(0);}
.sb-group:hover svg.sb-caret{opacity:.9;}

/* grid-template-rows animates from nothing to content height without anybody
   guessing a maximum. max-height needs a number large enough for the biggest
   group, which makes the small ones snap open and then wait. */
.sb-items > div{min-height:0;}

/* Collapsed ONLY when the script is running.
   Without the .js mark every section stays open, so a blocked or failed script
   leaves a plain visible menu rather than an empty sidebar. */
.sidebar-nav.js .sb-items{display:grid;grid-template-rows:0fr;overflow:hidden;
  transition:grid-template-rows .18s ease;}
.sidebar-nav.js .sb-items > div{overflow:hidden;}
.sidebar-nav.js .sb-section.open .sb-items{grid-template-rows:1fr;}

/* Equally, the caret only rotates where it means something. */
.sidebar-nav:not(.js) svg.sb-caret{display:none;}

@media (prefers-reduced-motion:reduce){
  .sb-items,svg.sb-caret{transition:none;}
}

/* Older engines without grid-template-rows animation still need to open. */
@supports not (grid-template-rows: 0fr){
  .sidebar-nav.js .sb-items{display:block;max-height:0;overflow:hidden;
    transition:max-height .18s ease;}
  .sidebar-nav.js .sb-section.open .sb-items{max-height:520px;}
}

svg.dr-caret{width:13px;height:13px;}


/* ---------- setup progress ----------
   One straight line in the topbar: word, number, bar, next action. The row
   already has controls in boxes; a meter in its own box beside them read as
   another control competing for the same glance rather than as a sentence
   about the account.
   Still a bar, not a ring: length is the thing that says there is more to do. */
.onb-meter{display:none;align-items:center;gap:8px;text-decoration:none;min-width:0;}
.onb-label{font-size:12.5px;font-weight:600;color:var(--text-secondary);white-space:nowrap;}
.onb-pct{font-family:var(--font-mono);font-size:11.5px;font-weight:600;
  color:var(--amber);white-space:nowrap;}
.onb-track{flex:0 0 auto;width:60px;height:4px;border-radius:100px;
  overflow:hidden;background:var(--hairline);}
.onb-fill{display:block;height:100%;background:var(--amber);border-radius:100px;
  transition:width .4s ease;min-width:3px;}
.onb-next{font-size:11.5px;color:var(--text-muted);min-width:0;max-width:200px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* No box means no border to colour on hover, so the words signal instead. */
.onb-meter:hover .onb-label,
.onb-meter:hover .onb-next{color:var(--text-primary);}
.onb-meter:hover .onb-label{text-decoration:underline;text-underline-offset:4px;}

/* The row fits the full line from here up; below that the strip under the
   header takes over. */
@media (min-width:1000px){ .onb-meter{display:flex;} }

/* ---------- the same thing on a phone ----------
   Hiding this on mobile means the people most likely to abandon setup are the
   ones never reminded of it. A full width bar, and closable. */
.onb-strip{display:none;align-items:center;gap:11px;padding:9px 14px;
  background:var(--amber-dim);border-bottom:1px solid rgba(184,124,42,.24);}
.onb-strip-body{display:flex;align-items:center;gap:11px;flex:1;min-width:0;
  text-decoration:none;}
/* Takes the room it needs. A 54px stub next to a sentence was the same mistake
   as the ring: too short to read as a measurement. */
.onb-strip-bar{flex:1 1 auto;min-width:80px;max-width:210px;height:6px;
  border-radius:100px;background:rgba(128,128,128,.26);overflow:hidden;}
.onb-strip-bar span{display:block;height:100%;background:var(--amber);
  border-radius:100px;transition:width .4s ease;min-width:3px;}
.onb-strip-text{font-size:11.5px;color:var(--text-secondary);flex:0 0 auto;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%;}
.onb-strip-text strong{color:var(--text-primary);}
.onb-strip-close{background:none;border:0;cursor:pointer;padding:4px;
  color:var(--text-muted);flex:0 0 auto;line-height:0;}
.onb-strip-close:hover{color:var(--text-primary);}

@media (max-width:999px){ .onb-strip{display:flex;} }
.onb-strip.dismissed{display:none !important;}

/* ---------- wallet in the top bar ----------
   The balance is the reason to look. An icon on its own is a link somebody has
   to click to learn anything. */
.wallet-btn{display:inline-flex;align-items:center;gap:7px;height:34px;
  padding:0 12px;border-radius:9px;background:var(--surface-raised);
  border:1px solid var(--hairline);color:var(--text-secondary);
  text-decoration:none;transition:border-color .14s ease,color .14s ease;}
.wallet-btn:hover{border-color:var(--teal);color:var(--text-primary);}
.wallet-btn svg{width:15px;height:15px;flex:0 0 auto;}
.wallet-amount{font-family:var(--font-mono);font-size:12px;font-weight:600;}
@media (max-width:520px){ .wallet-amount{display:none;} .wallet-btn{padding:0 9px;} }
.onb-strip.dismissed{display:none !important;}


/* ---------- feature request voting ----------
   Two arrows and the net score between them. Showing which one you pressed is
   the difference between a voting control and a pair of buttons that appear to
   do nothing the second time. */
.rq-vote{display:flex;flex-direction:column;align-items:center;gap:2px;
  flex:0 0 auto;}
.rq-vote-btn{background:var(--surface);border:1px solid var(--hairline);
  border-radius:6px;padding:4px 8px;cursor:pointer;line-height:0;
  color:var(--text-muted);transition:all .12s ease;}
.rq-vote-btn:hover:not(:disabled){border-color:var(--text-muted);color:var(--text-primary);}
.rq-vote-btn:disabled{opacity:.35;cursor:default;}
.rq-vote-btn.up.on{background:var(--teal-dim);border-color:var(--teal);color:var(--teal);}
.rq-vote-btn.down.on{background:var(--coral-dim);border-color:var(--coral);color:var(--coral);}
.rq-vote-btn svg{width:13px;height:13px;}
.rq-score{font-family:var(--font-mono);font-size:12px;font-weight:600;
  color:var(--text-secondary);min-width:24px;text-align:center;}
.rq-score.pos{color:var(--teal);}
.rq-score.neg{color:var(--coral);}


/* Checkbox with an explanation beside it, for consent choices where the
   consequence needs saying before somebody ticks it. */
.set-check{display:flex;gap:10px;align-items:flex-start;cursor:pointer;
  padding:12px 14px;border:1px solid var(--hairline);border-radius:var(--radius-md);
  background:var(--surface);}
.set-check:has(input:checked){border-color:var(--amber);background:var(--amber-dim);}
.set-check input{margin-top:3px;flex:0 0 auto;width:auto;}
.set-check strong{display:block;font-size:13px;margin-bottom:3px;}
.set-check > span > span{display:block;font-size:11.5px;color:var(--text-muted);
  line-height:1.55;}


/* ---------- star rating ----------
   Reversed in the DOM so a plain CSS sibling selector can light up the stars to
   the left of the hovered one, which is the direction people read them. No
   JavaScript, so it works for anybody who blocks scripts. */
.stars{display:inline-flex;flex-direction:row-reverse;gap:3px;}
.star input{position:absolute;opacity:0;width:0;height:0;}
.star span{display:block;cursor:pointer;color:var(--hairline);padding:2px;
  transition:color .1s ease,transform .1s ease;line-height:0;}
.star span svg{width:22px;height:22px;}
.star:hover span,
.star:hover ~ .star span,
.star input:checked ~ span,
.star input:checked + span{color:var(--gold);}
.star input:checked ~ span,
.star:has(input:checked) ~ .star span{color:var(--gold);}
.star span:hover{transform:scale(1.12);}
.star input:focus-visible + span{outline:2px solid var(--amber);outline-offset:2px;
  border-radius:3px;}

/* Read-only display, in a queue. */
.stars-static{display:inline-flex;gap:1px;}
.stars-static svg{width:13px;height:13px;color:var(--hairline);}
.stars-static svg.on{color:var(--gold);}


/* ---------- site picker ----------
   This page edits one site and never said which, so an account with two showed
   whichever the boot code picked. The panel exists to make the scope obvious
   before anybody fills in a form below it.

   The glow is slow and low contrast on purpose: it should register as the page
   being alive rather than as something asking for attention. */
.site-switch{position:relative;overflow:hidden;border-radius:var(--radius-lg);
  border:1px solid var(--hairline);background:var(--surface-raised);
  margin-bottom:18px;}
.site-switch-glow{position:absolute;inset:-60%;pointer-events:none;opacity:.5;
  background:
    radial-gradient(circle at 20% 30%, var(--amber-dim) 0, transparent 42%),
    radial-gradient(circle at 78% 68%, var(--teal-dim) 0, transparent 45%);
  animation:siteDrift 22s ease-in-out infinite alternate;}
@keyframes siteDrift{
  0%   {transform:translate3d(0,0,0) scale(1);}
  50%  {transform:translate3d(3%,-2%,0) scale(1.06);}
  100% {transform:translate3d(-2%,3%,0) scale(1.02);}
}
.site-switch-body{position:relative;z-index:1;padding:18px 20px;}
.site-switch-head{display:flex;justify-content:space-between;align-items:flex-start;
  gap:14px;flex-wrap:wrap;}
.site-switch-eyebrow{font-family:var(--font-mono);font-size:9.5px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);}
.site-switch-name{font-size:19px;font-weight:600;letter-spacing:-.01em;
  margin-top:3px;}
.site-switch-list{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px;}
.site-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;
  border-radius:100px;border:1px solid var(--hairline);background:var(--surface);
  font-size:12.5px;color:var(--text-secondary);text-decoration:none;
  transition:all .14s ease;}
.site-pill:hover{border-color:var(--text-muted);color:var(--text-primary);}
.site-pill.on{background:var(--amber-dim);border-color:var(--amber);
  color:var(--amber);}
.site-pill-dot{width:6px;height:6px;border-radius:50%;background:currentColor;
  opacity:.55;flex:0 0 auto;}
.site-pill.on .site-pill-dot{opacity:1;}
.site-pill-tag{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;
  letter-spacing:.05em;opacity:.6;}
.site-switch-note{font-size:11.5px;color:var(--text-muted);margin-top:10px;
  line-height:1.55;}

@media (prefers-reduced-motion:reduce){
  .site-switch-glow{animation:none;}
}


/* ---------- beacon download and flow ----------
   Telling somebody to download something and then not linking it is the kind of
   small failure that makes a whole page feel untrustworthy. */
.dl-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;padding:14px 16px;background:var(--surface);
  border:1px solid var(--hairline);border-radius:var(--radius-md);
  margin-bottom:14px;}
.dl-text strong{display:block;font-size:13px;margin-bottom:3px;}
.dl-text span{display:block;font-size:11.5px;color:var(--text-muted);
  line-height:1.55;max-width:380px;}
.dl-actions{display:flex;gap:8px;flex-wrap:wrap;}

.dl-flow{padding:16px 18px;background:var(--surface);
  border:1px solid var(--hairline);border-radius:var(--radius-md);
  margin-bottom:14px;}
.dl-flow-title{font-family:var(--font-mono);font-size:9.5px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);
  margin-bottom:11px;}
.dl-flow ol{margin:0;padding-left:19px;}
.dl-flow li{font-size:12.5px;line-height:1.65;color:var(--text-secondary);
  margin-bottom:9px;}
.dl-flow li strong{color:var(--text-primary);}
.dl-flow p{font-size:11.5px;color:var(--text-muted);line-height:1.6;
  margin:12px 0 0;padding-top:11px;border-top:1px solid var(--hairline-soft);}
.dl-step2{font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--text-muted);margin-bottom:8px;}


/* ---------- beacon stack picker ----------
   Nine complete sets of instructions rather than one snippet containing three
   languages. The colour is doing work here: somebody arriving at a setup page
   is deciding whether this is going to be difficult, and a wall of monospace
   answers yes before they have read a word. */
.stack-pick{display:grid;gap:8px;margin-bottom:16px;
  grid-template-columns:repeat(auto-fill,minmax(196px,1fr));}
.stack-chip{position:relative;display:flex;align-items:center;gap:10px;
  padding:11px 13px;border-radius:var(--radius-md);text-decoration:none;
  border:1px solid var(--hairline);background:var(--surface);
  transition:border-color .14s ease,background .14s ease,transform .14s ease;}
.stack-chip:hover{border-color:var(--text-muted);transform:translateY(-1px);}
.stack-chip.on{border-color:var(--amber);background:var(--amber-dim);}
.stack-chip svg{width:16px;height:16px;flex:0 0 auto;color:var(--text-muted);}
.stack-chip.on svg{color:var(--amber);}
.stack-chip-body{flex:1;min-width:0;}
.stack-chip-name{display:block;font-size:13px;font-weight:600;
  color:var(--text-primary);}
.stack-chip-sub{display:block;font-size:10.5px;color:var(--text-muted);
  margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.stack-flag{position:absolute;top:-7px;right:9px;font-family:var(--font-mono);
  font-size:8.5px;text-transform:uppercase;letter-spacing:.06em;
  padding:2px 7px;border-radius:100px;color:#fff;}
.stack-flag.best{background:var(--teal);}
.stack-flag.care{background:var(--gold);}
.stack-flag.weak{background:var(--text-muted);}

.stack-panel{border:1px solid var(--hairline);border-radius:var(--radius-lg);
  padding:18px 20px;background:var(--surface-raised);}
.stack-head{display:flex;justify-content:space-between;align-items:flex-start;
  gap:14px;flex-wrap:wrap;margin-bottom:14px;
  padding-bottom:14px;border-bottom:1px solid var(--hairline-soft);}
.stack-title{font-size:16px;font-weight:650;}
.stack-title span{font-weight:400;font-size:12.5px;color:var(--text-muted);
  margin-left:6px;}
.stack-needs{font-size:12px;color:var(--text-secondary);margin-top:5px;
  line-height:1.55;max-width:520px;}
.stack-time{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--teal);background:var(--teal-dim);
  padding:5px 10px;border-radius:100px;flex:0 0 auto;}

.stack-steps{list-style:none;margin:0 0 4px;padding:0;display:grid;gap:11px;}
.stack-steps li{display:flex;gap:11px;align-items:flex-start;}
.stack-num{flex:0 0 auto;width:21px;height:21px;border-radius:50%;
  background:var(--amber);color:#fff;font-family:var(--font-mono);font-size:10.5px;
  font-weight:700;display:grid;place-items:center;margin-top:1px;}
.stack-steps strong{display:block;font-size:13px;margin-bottom:2px;}
.stack-steps li > span > span{display:block;font-size:12px;color:var(--text-muted);
  line-height:1.6;}
.stack-steps code{font-family:var(--font-mono);font-size:11px;
  background:var(--surface);padding:1px 5px;border-radius:4px;
  border:1px solid var(--hairline);}

.stack-code-head{font-size:11.5px;color:var(--text-muted);margin:16px 0 8px;
  padding-top:14px;border-top:1px solid var(--hairline-soft);}
.stack-after{display:flex;gap:9px;align-items:flex-start;margin-top:13px;
  padding:11px 13px;background:var(--teal-dim);border-radius:var(--radius-sm);
  font-size:12px;color:var(--text-secondary);line-height:1.6;}
.stack-after svg{width:14px;height:14px;flex:0 0 auto;margin-top:1px;
  color:var(--teal);}

@media (max-width:520px){
  .stack-pick{grid-template-columns:1fr 1fr;}
  .stack-chip-sub{display:none;}
}


/* Visible only to staff, and marked so nobody mistakes it for customer copy
   in a screenshot. */
.adm-only{margin-top:12px;padding:11px 13px;border-radius:var(--radius-sm);
  background:rgba(124,107,214,.1);border:1px dashed rgba(124,107,214,.4);
  font-size:12px;color:var(--text-secondary);line-height:1.65;}
.adm-only strong{display:inline-block;font-family:var(--font-mono);font-size:9px;
  text-transform:uppercase;letter-spacing:.08em;color:#7C6BD6;
  background:rgba(124,107,214,.16);padding:2px 7px;border-radius:100px;
  margin-right:7px;}
.adm-only .mono{font-family:var(--font-mono);font-size:11px;
  background:var(--surface);padding:2px 6px;border-radius:4px;
  border:1px solid var(--hairline);}


/* Session duration. Highlighted when it is implausibly short for the number of
   requests made, which is the shape of a script rather than a reader. */
.ev-held{display:inline-block;padding:1px 6px;border-radius:4px;
  background:var(--surface);border:1px solid var(--hairline);
  font-size:10.5px;margin:0 3px;}
.ev-held.odd{background:var(--coral-dim);border-color:var(--coral);
  color:var(--coral);}


/* ---------- session timing row ----------
   Given its own treatment because it is the line people go to when they are
   deciding whether a verdict is believable. A soft amber wash separates it from
   the signal list above without shouting. */
.ev-when{position:relative;border-top:1px solid var(--hairline);
  background:linear-gradient(180deg,
    rgba(184,124,42,.14) 0%,
    rgba(184,124,42,.07) 60%,
    transparent 100%);
  border-radius:0 0 var(--radius-md) var(--radius-md);
  padding-top:11px;padding-bottom:11px;}

/* The blur sits behind the text rather than on it, so nothing becomes hard to
   read in the name of an effect. */
.ev-when::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 140% at 18% 0%,
    rgba(201,162,39,.22), transparent 62%);
  filter:blur(14px);border-radius:inherit;}
.ev-when > *{position:relative;z-index:1;}
.ev-when .ev-text{font-family:var(--font-mono);font-size:11px;
  color:var(--text-secondary);}
.ev-when .ev-name{color:var(--text-muted);}


/* Why the chart drew nothing. Present only when something went wrong, and
   worth the space because an empty box and a broken box look the same. */
.chart-empty{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;text-align:center;padding:20px;
  font-size:12.5px;color:var(--text-muted);line-height:1.6;
  font-family:var(--font-mono);}


/* Engagement, in words first. A bare "intent 22" reads like an error code. */
.eng{display:inline-flex;align-items:center;gap:6px;font-size:12px;
  color:var(--text-secondary);}
.eng-n{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);
  background:var(--surface);border:1px solid var(--hairline);
  padding:1px 5px;border-radius:4px;}


/* A single day has no line, so the point is the whole series. */
.chart-dot{stroke:var(--surface);stroke-width:2;}
.chart-note{position:absolute;left:0;right:0;bottom:6px;text-align:center;
  font-size:11.5px;color:var(--text-muted);pointer-events:none;}

/* ---------- telemetry status, connect page ----------
   Three states, because a quiet site and a site that was never set up are
   different situations needing different sentences. */
.tel-panel{border-radius:var(--radius-lg);margin-bottom:18px;padding:16px 18px;
  border:1px solid var(--hairline);background:var(--surface);}
.tel-panel.tel-live{border-color:rgba(15,123,108,.3);
  background:linear-gradient(135deg,var(--teal-dim),transparent 72%);}
.tel-panel.tel-silent{border-color:var(--hairline);}
.tel-live-top{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;}

/* Slow, because it is a heartbeat and not an alert. */
.tel-pulse{position:relative;width:9px;height:9px;border-radius:50%;
  background:var(--teal);flex:0 0 auto;margin-top:5px;}
.tel-pulse::after{content:'';position:absolute;inset:-5px;border-radius:50%;
  border:1.5px solid var(--teal);opacity:0;animation:telPulse 2.6s ease-out infinite;}
@keyframes telPulse{0%{transform:scale(.6);opacity:.75;}100%{transform:scale(1.5);opacity:0;}}

.tel-dot{width:9px;height:9px;border-radius:50%;background:var(--text-muted);
  opacity:.5;flex:0 0 auto;margin-top:5px;}
.tel-dot.warn{background:var(--gold);opacity:1;}

.tel-head{font-size:14px;font-weight:650;color:var(--text-primary);}
.tel-sub{font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted);
  margin-top:2px;}
.tel-route{margin-left:auto;text-align:right;flex:0 0 auto;}
.tel-route-label{display:block;font-family:var(--font-mono);font-size:9px;
  text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);}
.tel-route-value{display:block;font-size:12px;font-weight:600;color:var(--teal);
  margin-top:2px;}

/* Which numbers these are. A single session and a site average look identical
   on screen and lead to opposite conclusions. */
.tel-scope,.to-scope{display:flex;gap:7px;align-items:center;flex-wrap:wrap;
  font-size:11.5px;color:var(--text-muted);margin-top:12px;}
.tel-scope svg,.to-scope svg{width:12px;height:12px;flex:0 0 auto;}

.tel-figs{display:grid;gap:11px;margin-top:12px;
  grid-template-columns:repeat(auto-fit,minmax(110px,1fr));}
.tel-figs div{background:rgba(128,128,128,.07);border-radius:var(--radius-sm);
  padding:9px 11px;}
.tel-figs strong{display:block;font-family:var(--font-mono);font-size:17px;
  font-weight:700;color:var(--teal);line-height:1.1;}
.tel-figs span{display:block;font-size:10.5px;color:var(--text-muted);margin-top:3px;}

.tel-checks{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px;padding-top:12px;
  border-top:1px solid var(--hairline-soft);}
.tel-check{display:inline-flex;align-items:center;gap:5px;font-size:11px;
  padding:3px 9px;border-radius:100px;background:var(--surface);
  border:1px solid var(--hairline);color:var(--text-muted);}
.tel-check svg{width:11px;height:11px;}
.tel-check.ok{color:var(--teal);border-color:rgba(15,123,108,.4);}
.tel-check.warn{color:var(--gold);border-color:rgba(183,121,31,.4);}

.tel-quiet{font-size:12.5px;line-height:1.65;color:var(--text-secondary);
  margin-top:12px;}
.tel-quiet strong{color:var(--text-primary);}

/* ---------- choosing a delivery method ---------- */
.tel-choose-head{font-family:var(--font-mono);font-size:9.5px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);
  margin-bottom:10px;}
.tel-opts{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));}
.tel-opt{position:relative;display:block;padding:17px 16px 15px;
  border-radius:var(--radius-lg);border:1px solid var(--hairline);
  background:var(--surface);text-decoration:none;
  transition:border-color .15s ease,transform .15s ease;}
.tel-opt:hover{border-color:var(--text-muted);transform:translateY(-2px);}
.tel-opt.on{border-color:var(--amber);background:var(--amber-dim);}
.tel-opt-flag{position:absolute;top:-8px;left:14px;font-family:var(--font-mono);
  font-size:8.5px;text-transform:uppercase;letter-spacing:.07em;color:#fff;
  padding:3px 9px;border-radius:100px;}
.tel-opt-flag.best{background:var(--teal);}
.tel-opt-flag.easy{background:var(--slate);}
.tel-opt-flag.upgrade{background:linear-gradient(135deg,var(--amber),#C4682A);}
.tel-opt-name{display:block;font-size:15px;font-weight:650;
  color:var(--text-primary);margin-bottom:6px;}
.tel-opt-desc{display:block;font-size:12.5px;line-height:1.6;
  color:var(--text-secondary);}
.tel-opt-cost{display:block;font-family:var(--font-mono);font-size:10px;
  color:var(--text-muted);margin-top:10px;}

/* The proxy sits below and indented, connected by a line, because it stacks on
   top of whichever method was chosen rather than replacing it. */
.tel-upgrade{position:relative;margin:22px 0 4px 0;padding-left:26px;}
.tel-upgrade-line{position:absolute;left:9px;top:-14px;bottom:14px;width:2px;
  border-radius:2px;background:linear-gradient(180deg,var(--hairline),var(--amber));}
.tel-upgrade-line::after{content:'';position:absolute;left:-3px;bottom:0;
  width:8px;height:8px;border-radius:50%;background:var(--amber);}
.tel-upgrade-body{position:relative;padding:17px 16px 15px;
  border-radius:var(--radius-lg);border:1px dashed var(--hairline);
  background:var(--surface);}
.tel-upgrade.open .tel-upgrade-body{border-style:solid;border-color:var(--amber);
  background:var(--amber-dim);}
.tel-upgrade-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin-bottom:8px;}
.tel-upgrade-head .tel-opt-flag{position:static;}
.tel-upgrade-head .tel-opt-name{margin:0;}
.tel-upgrade-desc{font-size:12.5px;line-height:1.65;color:var(--text-secondary);
  margin:0 0 13px;}

/* ---------- telemetry on the overview ----------
   A trend rather than a status light. Different question, different shape. */
.to-state{display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--text-muted);}
.to-state.live{color:var(--teal);}
.to-figs{display:grid;gap:12px;margin-bottom:4px;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));}
.to-fig{background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--radius-md);padding:13px 14px;}
.to-fig-n{display:block;font-family:var(--font-display);font-size:22px;
  font-weight:700;line-height:1;}
.to-fig-l{display:block;font-size:11px;color:var(--text-muted);margin-top:5px;}
.to-chart{margin-top:14px;}
.to-svg{width:100%;height:180px;overflow:visible;}
.to-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;
  font-size:11px;color:var(--text-muted);}
.to-legend i{display:inline-block;width:9px;height:2px;border-radius:2px;
  margin-right:6px;vertical-align:middle;}

@media (prefers-reduced-motion:reduce){
  .tel-pulse::after{animation:none;}
  .tel-opt:hover{transform:none;}
}
@media (max-width:560px){
  .tel-route{margin-left:0;text-align:left;width:100%;margin-top:8px;}
  .tel-upgrade{padding-left:18px;}
}

/* ---------- connect page split layout ---------- */
.cx-split { display: flex; gap: 24px; align-items: flex-start; }
.cx-main-panel { flex: 1; min-width: 0; }
.cx-rail {
  width: 380px;
  flex: 0 0 340px;
  position: sticky;
  top: 85px; /* height of topbar + spacing */
  max-height: calc(1000vh - 100px);
  overflow-y: auto;
}
@media (max-width: 980px) {
  .cx-split { flex-direction: column; }
  .cx-rail { width: 100%; flex: 1 1 auto; position: static; max-height: none; }
}