/* ============================================================================
   The three rooms behind the Cockpit — Settings, Dashboard, Help.

   The Cockpit is an instrument panel and reads like one. These are rooms you
   go into to decide something, so they get air: a wider measure, a real
   heading hierarchy, and forms that say what a number will actually do.

   The palette does not change. Same ink, same blue, same one warm gold. What
   changes is density.
   ========================================================================= */
.page{ flex:1 1 auto; min-height:0; overflow:auto; }
.page-in{ padding:var(--s5) var(--pad-x) var(--s9); }

.kick2{
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-4); margin:var(--s5) 0 10px;
}
.kick2 .dim{ font-weight:500; letter-spacing:0; text-transform:none; font-size:11.5px; }
.linkish{ color:var(--blue); }
.linkish:hover{ text-decoration:underline; }
.vtag{
  font-family:var(--mono); font-size:10px; font-weight:600; color:var(--ink-4);
  background:var(--surface-2); padding:1px 5px; border-radius:var(--r1); margin-left:6px;
}

/* =========================================================================
   SETTINGS
   ====================================================================== */
.settings{ display:flex; flex-direction:column; overflow:hidden; }

/* ---- the bar: what is saved, what is running, and the proof ----------- */
.sbar{
  flex:none; display:flex; align-items:center; gap:var(--s5); flex-wrap:wrap;
  padding:12px var(--pad-x); border-bottom:1px solid var(--line); background:var(--surface);
}
.sbar-state{ display:flex; align-items:flex-start; gap:9px; min-width:0; flex:1; }
.sbar-state svg{ width:17px; height:17px; flex:none; margin-top:1px; }
.sbar-state.ok svg{ color:var(--green); }
.sbar-state.pending svg{ color:var(--amber); }
.sbar-state b{ display:block; font-size:13px; font-weight:600; color:var(--ink); }
.sbar-state.pending b{ color:var(--amber-900); }
.sbar-state span{ display:block; font-size:11.5px; color:var(--ink-4); margin-top:1px; }
.sbar-state code{ font-family:var(--mono); font-size:11px; color:var(--ink-3); }
.sbar-state em{ font-style:normal; color:var(--violet); }
.sbar-acts{ display:flex; align-items:center; gap:7px; }
.sbar-acts .sep{ width:1px; height:20px; background:var(--line-2); margin:0 2px; }
.btn--go{ background:var(--blue); color:#fff; border-color:var(--blue); }
.btn--go:hover:not(:disabled){ background:var(--blue-900); border-color:var(--blue-900); }
.btn--gold{ background:var(--gold-bg); color:var(--gold-ink); border-color:var(--gold-line); }
.btn--gold:hover:not(:disabled){ background:var(--gold-bg); filter:brightness(.97); }

.sbody{ flex:1 1 auto; min-height:0; display:flex; }

/* ---- section rail ------------------------------------------------------ */
.snav{
  width:196px; flex:none; padding:12px 10px; border-right:1px solid var(--line);
  overflow:auto; background:var(--bg);
}
.snav-item{
  position:relative; display:block; width:100%; text-align:left; padding:8px 10px;
  border-radius:var(--r2); margin-bottom:1px;
}
.snav-item b{ display:block; font-size:12.5px; font-weight:500; color:var(--ink-2); }
.snav-item span{ display:block; font-size:10.5px; color:var(--ink-4); margin-top:1px; }
.snav-item:hover{ background:var(--surface-2); }
.snav-item.on{ background:var(--surface); box-shadow:var(--lift-1); }
.snav-item.on b{ color:var(--ink); font-weight:600; }
.snav-item.on::before{
  content:''; position:absolute; left:-10px; top:8px; bottom:8px; width:2px;
  background:var(--blue); border-radius:1px;
}
.ncount{
  position:absolute; right:9px; top:9px; font-style:normal; font-size:10.5px;
  color:var(--ink-4); font-weight:600;
}

/* ---- the second list: firms, accounts --------------------------------- */
.slist{
  width:236px; flex:none; padding:10px 8px; border-right:1px solid var(--line);
  overflow:auto;
}
.slist-kick{
  font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-4); padding:10px 8px 5px;
}
.slist-item{
  position:relative; display:block; width:100%; text-align:left; padding:7px 9px;
  border-radius:var(--r2); margin-bottom:1px;
}
.slist-item b{ display:block; font-size:12px; font-weight:500; color:var(--ink-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.slist-item b.mono{ font-family:var(--mono); font-size:11px; letter-spacing:-.02em; }
.slist-item span{ display:block; font-size:10.5px; color:var(--ink-4); margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.slist-item:hover{ background:var(--surface-2); }
.slist-item.on{ background:var(--ink); }
.slist-item.on b, .slist-item.on span{ color:var(--on-ink); }
.slist-item.on span{ opacity:.65; }
.slist-item .mode{ position:absolute; right:8px; top:8px; }
.dirtydot{
  position:absolute; right:8px; bottom:9px; width:6px; height:6px; border-radius:50%;
  background:var(--violet);
}
.ctag{
  position:absolute; right:8px; top:8px; font-style:normal; font-size:9.5px; font-weight:700;
  color:var(--violet); background:var(--violet-50); padding:1px 5px; border-radius:var(--r1);
}
.sfind{
  display:flex; align-items:center; gap:7px; padding:0 9px; margin-bottom:8px;
  border:1px solid var(--line-2); border-radius:var(--r2); background:var(--surface);
}
.sfind svg{ width:14px; height:14px; color:var(--ink-4); flex:none; }
.sfind input{ flex:1; min-width:0; height:32px; border:0; background:none; outline:none; font-size:12.5px; }

/* ---- the pane ---------------------------------------------------------- */
.spane{ flex:1 1 auto; min-width:0; overflow:auto; padding:var(--s5) var(--s6) var(--s9); }
.spane-head{ margin-bottom:var(--s5); max-width:76ch; }
.spane-head h2{ font-size:21px; font-weight:600; letter-spacing:-.03em; }
.spane-head p{ margin-top:5px; font-size:12.5px; color:var(--ink-3); line-height:1.55; }
.spane-title{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.schip{
  font-size:10.5px; font-weight:500; color:var(--ink-3); background:var(--surface-2);
  padding:2px 8px; border-radius:var(--r1); display:inline-flex; align-items:center; gap:4px;
}
.schip svg{ width:11px; height:11px; }
.schip.blue{ color:var(--blue-900); background:var(--blue-50); }
.schip.green{ color:var(--green-900); background:var(--green-50); }
.schip.red{ color:var(--red-900); background:var(--red-50); }
.schip.gold{ color:var(--gold-ink); background:var(--gold-bg); }

/* ---- fields ------------------------------------------------------------ */
.sgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); gap:14px 16px; }
.sgrid.two{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 14px; }
.ssrc-inline{ display:block; font-style:normal; font-size:10.5px; color:var(--ink-4); margin-top:2px; }
.scopecard .kick2{ margin-top:14px; }
.scopecard .saverow{ margin-top:14px; }
.seq{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.seq.on{ padding:12px 14px; border:1px solid var(--violet); border-radius:var(--r3); background:var(--violet-50); }
.seqtab{ width:100%; border-collapse:collapse; margin-top:10px; }
.seqtab th{ text-align:left; font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-4); padding:4px 6px 6px; }
.seqtab td{ padding:3px 6px; }
.seqtab td .inp{ height:30px; }
.seqtab td:first-child{ width:110px; font-size:12px; }
.seqtab td:last-child{ width:30px; }
.seq .qmoves{ margin-top:8px; }
.seqnote{ margin:0 0 12px; background:var(--violet-50); color:var(--ink-3); }
.seqnote svg{ color:var(--violet); }
.sfield{ min-width:0; }
.slbl{
  display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--ink-3);
  margin-bottom:5px;
}
.shelp svg{ width:12px; height:12px; color:var(--ink-5); }
.shelp:hover svg{ color:var(--ink-3); }
.sfield .inp{ width:100%; height:34px; }
.sfield.own .inp{ border-color:var(--violet); background:var(--violet-50); }
.ssrc{ display:flex; align-items:center; gap:6px; margin-top:4px; font-size:10.5px; flex-wrap:wrap; }
.ssrc .inherit{ color:var(--ink-4); }
.ssrc b{ color:var(--violet); font-weight:600; }
.ssrc .from{ color:var(--ink-4); }

.sadv{ margin-top:var(--s5); }
.sadv > summary{
  cursor:pointer; font-size:11.5px; font-weight:600; color:var(--ink-3);
  padding:7px 0; border-top:1px solid var(--line); list-style:none;
}
.sadv > summary::-webkit-details-marker{ display:none; }
.sadv > summary::before{ content:'▸ '; color:var(--ink-5); }
.sadv[open] > summary::before{ content:'▾ '; }
.sadv > summary:hover{ color:var(--ink); }
.sadv .sgrid, .sadv .deflist{ padding-top:10px; }

.snote{
  display:flex; align-items:flex-start; gap:9px; margin-top:var(--s4);
  padding:10px 12px; border-radius:var(--r3); background:var(--surface-2);
  font-size:12px; color:var(--ink-3); line-height:1.5; max-width:82ch;
}
.snote svg{ width:15px; height:15px; color:var(--ink-4); flex:none; margin-top:1px; }
.snote b{ color:var(--ink-2); }

/* ---- save row: one scope, one receipt ---------------------------------- */
.saverow{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:var(--s5);
  padding:10px 12px; border:1px solid var(--line); border-radius:var(--r3); background:var(--bg);
}
.saverow-tx{ flex:1; min-width:180px; }
.saverow-tx b{ display:flex; align-items:center; gap:5px; font-size:12px; font-weight:600; }
.saverow-tx svg{ width:13px; height:13px; }
.saverow-tx .dirty{ color:var(--violet); }
.saverow-tx .done{ color:var(--green-900); }
.saverow-tx .idle{ color:var(--ink-4); font-weight:500; }
.warnline{
  display:flex; align-items:center; gap:5px; margin-top:3px; font-size:11px; color:var(--amber-900);
}
.warnline svg{ width:12px; height:12px; color:var(--amber); }

/* ---- defaults ---------------------------------------------------------- */
.scope2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px; }
.scopecard{
  padding:16px 18px; border:1px solid var(--line); border-radius:var(--r4);
  background:var(--surface); border-top:3px solid var(--blue);
}
.scopecard.funded{ border-top-color:var(--green); }
.scopecard-h{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.scopecard-h b{ font-size:15px; font-weight:600; letter-spacing:-.02em; }
.scopecard-h span{ font-size:11px; color:var(--ink-4); }
.scopecard-n{ margin-top:5px; font-size:12px; color:var(--ink-3); line-height:1.5; }
.deflist{ margin-top:14px; display:grid; grid-template-columns:1fr; gap:0; }
.deflist > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:6px 0; border-bottom:1px solid var(--line);
}
.deflist dt{ font-size:11.5px; color:var(--ink-3); }
.deflist dd{ margin:0; font-size:12.5px; font-weight:600; color:var(--ink); }

/* ---- mode / routing choosers ------------------------------------------- */
.modes{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.modes.three{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.modeopt{
  text-align:left; padding:12px 14px; border:1px solid var(--line-2); border-radius:var(--r3);
  background:var(--surface);
}
.modeopt b{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--ink-2); }
.modeopt span{ display:block; margin-top:4px; font-size:11.5px; color:var(--ink-4); line-height:1.5; }
.modeopt:hover{ background:var(--surface-2); }
.modeopt.on{ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); background:var(--surface); }
.modeopt.on b{ color:var(--ink); }
.modeopt.copy.on{ border-color:var(--violet); box-shadow:inset 0 0 0 1px var(--violet); }
.modeopt.copy.on b{ color:var(--violet); }
.modeopt.r-copy.on{ border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue); }
.modeopt.r-dormant.on{ border-color:var(--ink-4); box-shadow:inset 0 0 0 1px var(--ink-4); }
.rdot{ width:9px; height:9px; border-radius:50%; background:var(--ink-4); flex:none; }
.rdot.copy{ background:var(--blue); box-shadow:0 0 0 3px var(--blue-100); }
.rdot.queue{ background:var(--ink-4); }
.rdot.dormant{ background:transparent; border:2px solid var(--ink-5); }

.stoggles{ display:flex; flex-direction:column; gap:9px; }
.stoggle{ display:flex; align-items:flex-start; gap:9px; font-size:12.5px; color:var(--ink-3);
  line-height:1.5; cursor:pointer; }
.stoggle input{ margin-top:2px; accent-color:var(--blue); width:15px; height:15px; flex:none; }
.stoggle b{ color:var(--ink-2); }

.qmoves{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* ---- the queue in Settings --------------------------------------------- */
.squeue{ border:1px solid var(--line); border-radius:var(--r3); overflow:hidden; }
.srow{
  display:flex; align-items:center; gap:9px; padding:7px 10px;
  border-bottom:1px solid var(--line); background:var(--surface);
}
.srow:last-child{ border-bottom:0; }
.srow:hover{ background:var(--surface-2); }
.srow-id{ font-size:11.5px; color:var(--ink-2); }
.srow-id:hover{ color:var(--blue); text-decoration:underline; }
.srow-st{ font-size:11px; color:var(--ink-4); margin-left:auto; }
.srow .starts{
  display:inline-flex; align-items:center; gap:3px; font-size:9.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--gold-ink);
  background:var(--gold-bg); padding:1px 5px; border-radius:var(--r1);
}
.srow .starts svg{ width:10px; height:10px; }
.srow-acts{ display:flex; align-items:center; gap:2px; }

/* ---- strategies -------------------------------------------------------- */
.stracards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.stracard{ padding:14px 16px; border:1px solid var(--line); border-radius:var(--r4); background:var(--surface); }
.stracard.live{ border-left:3px solid var(--green-400); }
.stracard-h{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.stracard-h b{ font-size:13.5px; font-weight:600; }
.stracard p{ margin-top:6px; font-size:11.5px; color:var(--ink-4); line-height:1.5; }
.strafirms{ display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; }
.strafirms span{
  font-size:10.5px; color:var(--ink-3); background:var(--surface-2);
  padding:2px 7px; border-radius:var(--r1);
}

/* ---- alerts ------------------------------------------------------------ */
.alerttest{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.testreply{
  display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:var(--r3);
  background:var(--green-50); font-size:12.5px; color:var(--green-900);
}
.alertcats{ display:flex; flex-direction:column; gap:9px; }
.quiet{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-3); }
.quiet svg{ width:15px; height:15px; color:var(--ink-4); }
.quiet .inp{ width:82px; height:32px; margin:0 4px; }

.achan{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--r3); background:var(--amber-50); }
.achan svg{ width:18px; height:18px; flex:none; color:var(--amber); }
.achan.ok{ background:var(--green-50); } .achan.ok svg{ color:var(--green); }
.achan-tx{ flex:1; min-width:0; }
.achan-tx b{ display:block; font-size:13px; font-weight:600; color:var(--ink); }
.achan.ok .achan-tx b{ color:var(--green-900); }
.achan-tx span{ display:block; font-size:11.5px; color:var(--ink-3); margin-top:2px; }

/* ---- system checks ----------------------------------------------------- */
.checks{ border:1px solid var(--line); border-radius:var(--r4); overflow:hidden; }
.check{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border-bottom:1px solid var(--line); background:var(--surface);
}
.check:last-child{ border-bottom:0; }
.check .sig{ width:8px; height:8px; flex:none; }
.check-tx{ flex:1; min-width:0; }
.check-tx b{ display:flex; align-items:baseline; gap:9px; font-size:12.5px; font-weight:600; color:var(--ink); }
.check-tx .state{ font-size:11.5px; font-weight:500; color:var(--ink-3); }
.check-tx span{ display:block; font-size:11.5px; color:var(--ink-4); margin-top:2px; line-height:1.5; }
.check-age{ font-size:11px; color:var(--ink-4); white-space:nowrap; flex:none; }
.check.warn{ background:var(--amber-50); }
.check.warn .state{ color:var(--amber-900); }
.check.crit{ background:var(--red-50); }
.check.crit .state{ color:var(--red); font-weight:600; }

/* ---- change history ---------------------------------------------------- */
.htabs{ display:flex; gap:6px; margin-bottom:14px; }
.htab{
  display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px;
  border-radius:var(--r2); font-size:12px; font-weight:500; color:var(--ink-3);
  border:1px solid var(--line-2);
}
.htab svg{ width:13px; height:13px; }
.htab b{ color:var(--ink-4); font-weight:600; }
.htab:hover{ background:var(--surface-2); }
.htab.on{ background:var(--ink); color:var(--on-ink); border-color:var(--ink); }
.htab.on b{ color:var(--on-ink); opacity:.7; }

.hlist{ border:1px solid var(--line); border-radius:var(--r4); overflow:hidden; }
.hrow{
  display:flex; align-items:center; gap:12px; padding:11px 14px;
  border-bottom:1px solid var(--line); background:var(--surface);
}
.hrow:last-child{ border-bottom:0; }
.hstar{ color:var(--ink-5); flex:none; }
.hstar svg{ width:16px; height:16px; }
.hstar:hover{ color:var(--gold); }
.hstar.on{ color:var(--gold); }
.hrow-tx{ flex:1; min-width:0; }
.hrow-tx b{ display:flex; align-items:center; gap:2px; font-size:12.5px; font-weight:600; }
.hrow-tx span{ display:block; font-size:11.5px; color:var(--ink-4); margin-top:1px; }
.favtag{
  font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold-ink); background:var(--gold-bg); padding:1px 6px; border-radius:var(--r1);
  margin-left:6px;
}
.hrow-meta{ font-size:10.5px; color:var(--ink-4); text-align:right; white-space:nowrap; flex:none; }
.hrow-meta code{ font-family:var(--mono); font-size:10px; }

/* ---- danger zone ------------------------------------------------------- */
.danger{ border:1px solid var(--red-400); border-radius:var(--r4); overflow:hidden; }
.dangerrow{
  display:flex; align-items:center; gap:16px; padding:13px 16px;
  border-bottom:1px solid var(--line); background:var(--surface);
}
.dangerrow:last-child{ border-bottom:0; }
.dangerrow > div{ flex:1; min-width:0; }
.dangerrow b{ display:block; font-size:12.5px; font-weight:600; color:var(--ink); }
.dangerrow span{ display:block; font-size:11.5px; color:var(--ink-4); margin-top:2px; line-height:1.5; }
.dangerrow.red b{ color:var(--red-900); }

/* =========================================================================
   DASHBOARD — the analytical room. It reads the same theme tokens as every
   other room: dark when the product is dark, light when it is light.
   ====================================================================== */
.dash{ display:flex; flex-direction:column; background:var(--bg); color:var(--ink); }
.dash .inp{ background-color:var(--surface); color:var(--ink); border-color:var(--line-2); }
.dash .btn--line{ background:var(--surface); color:var(--ink-2); }
.dash .btn--line:hover{ background:var(--surface-2); }
.dash .linkish{ color:var(--blue); }
.dash .sfind{ background:var(--surface); border-color:var(--line-2); }
.dash .sfind input{ color:var(--ink); }
.dash .sfind input::placeholder{ color:var(--ink-4); }
.dash ::-webkit-scrollbar{ width:8px; height:8px; }
.dash ::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:4px; }
.dash .page-in{ padding-bottom:var(--s9); max-width:1360px; }

.dhead{ flex:none; padding:14px var(--pad-x) 8px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.dhead h1{ font-size:20px; font-weight:600; letter-spacing:-.03em; }
.dhead p{ margin-top:2px; font-size:12px; color:var(--ink-3); }

.dbar{
  flex:none; display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  padding:0 var(--pad-x) 10px; border-bottom:1px solid var(--line);
}
.dranges{ display:flex; gap:2px; padding:2px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r2); }
.drange{ height:24px; padding:0 11px; border-radius:var(--r1); font-size:12px; font-weight:500; color:var(--ink-3); }
.drange:hover{ color:var(--ink); }
.drange.on{ background:var(--surface-3); color:var(--ink); font-weight:600; }
.dfirm{ height:28px; width:176px; font-size:12px; }
.dacct{ width:210px; }
.dres{ width:130px; }
.dstamp{ display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--ink-4); white-space:nowrap; }
.dstamp .pulse{ width:6px; height:6px; border-radius:50%; background:var(--green-400); }
.dstamp .pulse.stale{ background:var(--amber-400); }
.dviews{ margin-left:auto; display:flex; gap:2px; }
.dview{ height:28px; padding:0 12px; border-radius:var(--r2); font-size:12.5px; color:var(--ink-3); font-weight:500; }
.dview:hover{ background:var(--surface-2); color:var(--ink); }
.dview.on{ background:var(--ink); color:var(--bg); font-weight:600; }

/* ---- sections ---------------------------------------------------------- */
.dsec{ margin-top:22px; }
.dsec:first-child{ margin-top:0; }
.dsec-h{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.dsec-h h2{ font-size:11.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); }
.dsec-h .hint{ font-size:11.5px; color:var(--ink-4); }
.dsec-h .hint b{ font-weight:600; }
.dsec-h .dfirm{ margin-left:auto; }
.dempty{ padding:14px 16px; font-size:12px; }
.dnote{ margin-top:10px; font-size:11.5px; line-height:1.5; }

/* ---- KPI strip ---------------------------------------------------------- */
.kpis{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-bottom:18px; }
.kpi{
  display:flex; flex-direction:column; gap:3px; padding:11px 14px 10px; text-align:left;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r3);
  border-top:2px solid var(--k, var(--line-2)); min-width:0;
}
.kpi .k{ font-size:10px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-4); }
.kpi .v{ font-size:21px; font-weight:600; letter-spacing:-.03em; line-height:1.05; color:var(--ink); }
.kpi .m{ font-size:11px; color:var(--ink-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kpi.good{ --k:var(--green-400); } .kpi.good .v{ color:var(--green); }
.kpi.bad{ --k:var(--red-400); } .kpi.bad .v{ color:var(--red); }
.kpi.info{ --k:var(--blue-400); }
.kpi.warn{ --k:var(--amber-400); } .kpi.warn .v{ color:var(--amber); }
.kpi.quiet .v{ color:var(--ink-4); }
button.kpi{ cursor:pointer; }
button.kpi:hover{ background:var(--surface-2); }

/* ---- needs you ----------------------------------------------------------- */
.needs-card{ border-color:var(--amber-400); background:var(--surface); margin-bottom:22px; }
.needs-card .dcard-h h3{ display:flex; align-items:center; gap:7px; color:var(--amber-900); }
.needs-card .dcard-h h3 svg{ width:15px; height:15px; color:var(--amber); }
.needs-card.is-pointed{ box-shadow:0 0 0 3px rgba(224,172,78,.35); }
.newacct{
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(220px,1fr) auto; gap:16px; align-items:center;
  padding:12px 0; border-top:1px solid var(--line);
}
.newacct-id{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.newacct-id b.mono{ font-size:13px; color:var(--ink); }
.newacct-id > span{ font-size:12px; color:var(--ink-3); }
.newacct-id > span b{ color:var(--ink-2); }
.newacct-id > span em{ font-style:normal; color:var(--amber-900); }
.newacct-id .dim{ font-size:11px; }
.newacct-pick{ display:flex; flex-direction:column; gap:4px; }
.newacct-pick > span{ font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-4); }
.newacct-pick .inp{ height:32px; }
.newacct-acts{ display:flex; gap:8px; }
.newacct.idle-need{ grid-template-columns:minmax(0,1fr) auto; }

/* ---- the card and the progress rows ------------------------------------- */
.dcard{ padding:14px 16px; border:1px solid var(--line); border-radius:var(--r3); background:var(--surface); }
.dcard h3{ font-size:13px; font-weight:600; letter-spacing:-.01em; display:flex; align-items:baseline; gap:8px; }
.dcard h3 .dim{ font-size:11.5px; font-weight:400; }
.dcard-h{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:4px; }

.prows{ display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r3); overflow:hidden; }
.prow{
  background:var(--surface); padding:10px 14px; display:grid;
  grid-template-columns:150px minmax(0,1fr) 96px 150px; gap:16px; align-items:center;
}
.prow-id{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.prow-id .mono{ font-size:12.5px; font-weight:600; color:var(--ink); text-align:left; }
.prow-id .mono:hover{ text-decoration:underline; }
.prow-id > span{ font-size:11px; color:var(--ink-3); display:flex; align-items:center; gap:6px; }
.badge{ font-style:normal; font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:1px 5px; border-radius:var(--r1); }
.badge.rotate{ background:var(--green-50); color:var(--green-900); }
.badge.copy{ background:var(--violet-50); color:var(--violet); }

.ptrack{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.pbar{ position:relative; height:22px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r2); overflow:hidden; }
.pfill{ position:absolute; top:0; bottom:0; left:0; background:rgba(79,199,155,.22); }
.prow.next .pfill{ background:rgba(107,154,240,.22); }
.prow.warn .pfill{ background:rgba(224,172,78,.26); }
.prow.blown .pfill{ background:rgba(240,138,124,.26); }
.prow.pass .pfill{ background:rgba(79,199,155,.34); }
.prow.idle .pfill{ background:rgba(167,179,199,.16); }
.pstart{ position:absolute; top:3px; bottom:3px; width:1px; background:var(--ink-4); opacity:.6; }
.pmark{ position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--ink); margin-left:-1px; }
.prow.blown .pmark{ background:var(--red); }
.plab{ position:absolute; left:8px; top:50%; transform:translateY(-50%); font-size:11px; font-weight:600; color:var(--ink);
  text-shadow:0 1px 2px rgba(0,0,0,.6); white-space:nowrap; }
.pends{ display:flex; justify-content:space-between; font-size:10px; color:var(--ink-4); }
.spark{ width:96px; height:30px; display:block; color:var(--ink-4); }
.spark.up{ color:var(--green); } .spark.down{ color:var(--red); }
.pst{ display:flex; flex-direction:column; gap:2px; text-align:right; min-width:0; }
.pst .w{ font-size:12.5px; font-weight:700; }
.pst > span{ font-size:11px; color:var(--ink-4); }
.pst .elink{ color:var(--blue); font-size:11px; text-decoration:underline; }
.w.go, .w.pass{ color:var(--green); } .w.next{ color:var(--blue); } .w.warn{ color:var(--amber); }
.w.blown{ color:var(--red); } .w.idle{ color:var(--ink-3); }

/* ---- inactivity clocks --------------------------------------------------- */
.clocks{ display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r3); overflow:hidden; }
.clk{ background:var(--surface); padding:9px 14px; display:grid; grid-template-columns:150px minmax(0,1fr) 96px 90px; gap:16px; align-items:center; }
.clk.urgent{ background:linear-gradient(90deg,var(--red-50),var(--surface) 55%); }
.clk.soon{ background:linear-gradient(90deg,var(--amber-50),var(--surface) 60%); }
.cbar{ height:7px; background:var(--surface-2); border-radius:99px; overflow:hidden; border:1px solid var(--line); }
.cbar i{ display:block; height:100%; border-radius:99px; background:var(--green-400); }
.clk.soon .cbar i{ background:var(--amber-400); }
.clk.urgent .cbar i{ background:var(--red); }
.cd{ font-size:12px; text-align:right; color:var(--ink-2); }
.cw{ font-size:12px; font-weight:700; text-align:right; color:var(--ink-4); }
.clk.soon .cw{ color:var(--amber); }
.clk.urgent .cw{ color:var(--red); }

/* ---- lifecycle ------------------------------------------------------------ */
.life{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.lc{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r3); padding:12px 10px; text-align:center;
  border-bottom:2px solid var(--k, var(--line-2)); display:flex; flex-direction:column; gap:1px; }
.lc:hover{ background:var(--surface-2); }
.lc .n{ font-size:24px; font-weight:600; letter-spacing:-.03em; color:var(--ink); }
.lc .l{ font-size:11px; color:var(--ink-3); }
.lc.p{ --k:var(--green-400); } .lc.a{ --k:var(--blue-400); } .lc.b{ --k:var(--red-400); } .lc.r{ --k:var(--ink-5); }

/* ---- the calendar --------------------------------------------------------
   Sleek, dark, dense. The dollar figure is the hero of every cell and sits
   in the middle of it; the date is small and secondary. Green and red are
   restrained tints, not lights. Weekends are a different neutral. */
.cmonth{ margin-top:12px; }
.cmonth:first-of-type{ margin-top:0; }
.cmonth-h{ font-size:12px; font-weight:600; color:var(--ink-2); margin-bottom:8px; }
.cgridcal{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
.cdow{ font-size:9.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-4); text-align:center; padding-bottom:2px; }
.cblank{ }
.cday{
  position:relative; min-height:64px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:16px 6px 8px; border-radius:var(--r2); background:var(--surface-2); border:1px solid var(--line);
  color:var(--ink-3); text-align:center; transition:border-color var(--t-fast) var(--ease);
}
.cday .cd{ position:absolute; top:5px; left:7px; font-size:10px; color:var(--ink-4); font-weight:500; }
.cday .cp{ font-size:13px; font-weight:600; letter-spacing:-.02em; line-height:1.1; }
.cday .ct{ margin-top:2px; font-size:9.5px; color:var(--ink-4); }
.cday.up{ background:rgba(79,199,155,.13); border-color:rgba(79,199,155,.28); }
.cday.up .cp{ color:var(--green-900); }
.cday.up .cd{ color:rgba(159,230,199,.7); }
.cday.down{ background:rgba(240,138,124,.13); border-color:rgba(240,138,124,.28); }
.cday.down .cp{ color:var(--red-900); }
.cday.down .cd{ color:rgba(246,179,169,.7); }
.cday.flat .cp, .cday.even .cp{ color:var(--ink-4); }
.cday.closed{ background:transparent; border-style:dashed; border-color:var(--line); cursor:default; }
.cday.closed .ct{ color:var(--ink-4); }
.cday.today{ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.cday:not(:disabled):hover{ border-color:var(--line-3); }
.cday:focus-visible{ outline:2px solid var(--blue); outline-offset:1px; }
.callegend{ display:flex; gap:14px; align-items:center; font-size:11px; color:var(--ink-4); margin-top:10px; flex-wrap:wrap; }
.callegend .csw{ display:inline-block; width:11px; height:11px; border-radius:3px; vertical-align:-1px; margin-right:5px; border:1px solid var(--line); }
.callegend .csw.up{ background:rgba(79,199,155,.3); } .callegend .csw.down{ background:rgba(240,138,124,.3); }
.callegend .csw.flat{ background:var(--surface-2); } .callegend .csw.closed{ background:transparent; border-style:dashed; }
.callegend .grow{ margin-left:auto; }

.cons{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r3); padding:14px 16px; }
.cons-figs{ display:flex; gap:var(--s7); flex-wrap:wrap; }
.cons-figs > div{ display:flex; flex-direction:column; gap:2px; }
.cons-figs .k{ font-size:10px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-4); }
.cons-figs b{ font-size:18px; font-weight:600; letter-spacing:-.03em; color:var(--ink); }
.cons-track{ position:relative; height:7px; border-radius:99px; background:var(--surface-2); margin:14px 0 8px; overflow:visible; }
.cons-fill{ display:block; height:100%; border-radius:99px; background:var(--blue-400); max-width:100%; }
.cons-fill.over{ background:var(--red); }
.cons-lim{ position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--ink-3); margin-left:-1px; }
.cons p{ font-size:11.5px; }

/* ---- the journal --------------------------------------------------------- */
.jbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.jbar .sfind{ flex:1; min-width:220px; margin:0; }
.dtab-x{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r3); background:var(--surface); }
.dtab{ width:100%; border-collapse:collapse; }
.dtab th{
  text-align:left; padding:8px 10px; font-size:10px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-4); border-bottom:1px solid var(--line-2);
  white-space:nowrap;
}
.dtab td{ padding:7px 10px; font-size:12px; color:var(--ink-2); border-bottom:1px solid var(--line); white-space:nowrap; }
.dtab tr:last-child td{ border-bottom:0; }
.dtab .r{ text-align:right; }
.dtab tbody tr:hover{ background:var(--surface-2); }
.dtab .t{ font-size:11px; color:var(--ink-4); }
.exit{
  font-size:10.5px; font-weight:500; padding:1px 7px; border-radius:var(--r1);
  color:var(--ink-3); background:var(--surface-2); white-space:nowrap;
}
.exit.tp, .exit.target{ color:var(--green-900); background:var(--green-50); }
.exit.stop{ color:var(--red-900); background:var(--red-50); }
.exit.flattened{ color:var(--amber-900); background:var(--amber-50); }
.exit.open{ color:var(--blue-900); background:var(--blue-50); }
.exit.exit{ color:var(--ink-3); }

/* =========================================================================
   HELP
   ====================================================================== */
.help{ display:flex; flex-direction:column; }
.htabs2{
  flex:none; display:flex; gap:3px; padding:12px var(--pad-x) 0;
  border-bottom:1px solid var(--line);
}
.htab2{
  height:34px; padding:0 13px; font-size:12.5px; font-weight:500; color:var(--ink-3);
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.htab2:hover{ color:var(--ink); }
.htab2.on{ color:var(--ink); font-weight:600; border-bottom-color:var(--ink); }

.hero{ max-width:74ch; margin-bottom:var(--s6); }
.hero h2{ font-size:24px; font-weight:600; letter-spacing:-.035em; }
.hero p{ margin-top:6px; font-size:13px; color:var(--ink-3); line-height:1.6; }
/* a plain meter: the track is a block, or its width is silently ignored */
.track{ display:block; height:6px; border-radius:3px; background:var(--surface-3); overflow:hidden; }
.track .fill{ display:block; height:100%; background:var(--ink-5); border-radius:3px; }
.hero-bar{ display:flex; align-items:center; gap:12px; margin-top:14px; }
.hero-bar .track{ flex:1; height:7px; }
.hero-bar .fill{ background:var(--green-400); }
.hero-bar b{ font-size:12px; font-weight:600; color:var(--ink-2); white-space:nowrap; }
.hero .sfind{ margin-top:14px; max-width:420px; }

.steps{ max-width:74ch; border:1px solid var(--line); border-radius:var(--r4); overflow:hidden; }
.step{ border-bottom:1px solid var(--line); background:var(--surface); }
.step:last-child{ border-bottom:0; }
.step-h{ display:flex; align-items:center; gap:12px; width:100%; padding:13px 16px; text-align:left; }
.step-h:hover{ background:var(--surface-2); }
.step-h > svg:last-child{ width:14px; height:14px; color:var(--ink-5); flex:none;
  transition:transform var(--t-fast) var(--ease); }
.step.open .step-h > svg:last-child{ transform:rotate(180deg); }
.step-n{
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center; flex:none;
  font-size:11.5px; font-weight:600; color:var(--ink-3); background:var(--surface-2);
}
.step-n.small{ width:20px; height:20px; font-size:10.5px; margin-right:8px; display:inline-grid;
  vertical-align:-4px; }
.step-n svg{ width:13px; height:13px; }
.step.done .step-n{ background:var(--green-50); color:var(--green); }
.step-h b{ flex:1; font-size:13px; font-weight:600; color:var(--ink); }
.step-state{ font-size:11.5px; color:var(--ink-4); white-space:nowrap; }
.step-state.ok{ color:var(--green-900); }
.step-b{ padding:0 16px 16px 52px; }
.step-b p{ font-size:12.5px; color:var(--ink-3); line-height:1.6; max-width:64ch; }
.verify{
  display:flex; align-items:flex-start; gap:8px; margin:12px 0; padding:9px 11px;
  border-radius:var(--r3); background:var(--surface-2); font-size:12px; color:var(--ink-3); line-height:1.5;
}
.verify svg{ width:14px; height:14px; flex:none; margin-top:1px; color:var(--ink-4); }
.verify.ok{ background:var(--green-50); color:var(--green-900); }
.verify.ok svg{ color:var(--green); }
.verify.warn{ background:var(--amber-50); color:var(--amber-900); }
.verify.warn svg{ color:var(--amber); }
.verify b{ font-weight:600; }

.hsteps{ display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:14px; }
.hcard{ padding:16px 18px; border:1px solid var(--line); border-radius:var(--r4); background:var(--surface); }
.hcard h3{ font-size:13px; font-weight:600; margin-bottom:6px; }
.hcard p{ font-size:12.5px; color:var(--ink-3); line-height:1.6; }
.hcard .dtab{ margin-top:10px; }
.trouble-q{ color:var(--ink); }
.hnote{
  display:flex; align-items:flex-start; gap:9px; margin-top:var(--s5); padding:12px 14px;
  border-radius:var(--r3); background:var(--surface-2); font-size:12.5px; color:var(--ink-3);
  line-height:1.55; max-width:80ch;
}
.hnote svg{ width:15px; height:15px; color:var(--ink-4); flex:none; margin-top:1px; }

.wire{ display:flex; align-items:center; gap:16px; margin:14px 0; flex-wrap:wrap; }
.wire-side{ padding:10px 14px; border:1px solid var(--line-2); border-radius:var(--r3); background:var(--bg); }
.wire-side .k{ display:block; font-size:10px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-4); }
.wire-side b{ display:block; margin-top:3px; font-family:var(--mono); font-size:14px; color:var(--ink); }
.wire-arrow svg{ width:18px; height:18px; color:var(--ink-5); }

/* ---- the alert status banner --------------------------------------------- */
.hstatus{
  display:flex; align-items:flex-start; gap:10px; max-width:74ch; margin:-8px 0 20px; padding:11px 14px;
  border-radius:var(--r3); background:var(--surface-2); color:var(--ink-2);
}
.hstatus svg{ width:18px; height:18px; flex:none; margin-top:1px; color:var(--ink-4); }
.hstatus b{ display:block; font-size:13px; font-weight:600; color:var(--ink); }
.hstatus span{ display:block; font-size:12px; color:var(--ink-3); margin-top:2px; line-height:1.5; }
.hstatus.verified{ background:var(--green-50); } .hstatus.verified svg, .hstatus.verified b{ color:var(--green-900); }
.hstatus.failed{ background:var(--red-50); } .hstatus.failed svg{ color:var(--red); } .hstatus.failed b{ color:var(--red-900); }
.hstatus.sent{ background:var(--amber-50); } .hstatus.sent svg{ color:var(--amber); } .hstatus.sent b{ color:var(--amber-900); }
.hdot{ display:inline-block; width:6px; height:6px; border-radius:50%; margin-left:6px; vertical-align:2px; background:var(--amber-400); }
.hdot.ok{ background:var(--green-400); }

.hgrid3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:14px; }
.hgrid2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:14px; }
.hcard + .hcard, .hgrid2 + .hcard, .hgrid3 + .hcard, .hcard + .hgrid2{ margin-top:14px; }
.hcard h3{ display:flex; align-items:center; gap:0; }
.hcard h3 .dim{ font-weight:400; font-size:11.5px; margin-left:8px; }
.hcard h4{ font-size:12.5px; font-weight:600; margin:4px 0 6px; }
.hcard p + p{ margin-top:8px; }
.hcard .dim{ font-size:11.5px; line-height:1.55; }
.hcard code, .phoneurl code{ font-family:var(--mono); font-size:11.5px; background:var(--surface-2); padding:1px 5px; border-radius:var(--r1); }
.step-card p{ margin-bottom:10px; }
.storelinks{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.storelinks .btn:hover{ text-decoration:none; }

.qrbox{ display:flex; gap:14px; align-items:flex-start; margin:8px 0; }
.qrbox > svg{ width:132px; height:132px; flex:none; border:1px solid var(--line); border-radius:var(--r2); }
.qrmeta{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.qrmeta .k{ font-size:10px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-4); display:flex; align-items:center; gap:6px; }
.qrmeta b.mono{ font-size:13px; color:var(--ink); word-break:break-all; }
.qrurl{ font-size:10px; color:var(--ink-4); overflow-wrap:anywhere; }
.qrmeta .btn{ align-self:flex-start; margin-top:4px; }
.demo-tag{
  font-style:normal; font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-4); border:1px solid var(--line-2); border-radius:var(--r1); padding:0 4px; vertical-align:1px; cursor:help;
}

.testflow{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.buzz{ width:100%; padding:11px 12px; border-radius:var(--r3); background:var(--amber-50); }
.buzz b{ display:block; font-size:13px; color:var(--amber-900); margin-bottom:8px; }
.buzz-acts{ display:flex; gap:8px; flex-wrap:wrap; }
.fixlist{ border-color:var(--red-400); }
.fixlist h3{ color:var(--red-900); gap:7px; }
.fixlist h3 svg{ width:15px; height:15px; color:var(--red); }
.fixes{ counter-reset:fix; display:flex; flex-direction:column; gap:0; margin:8px 0 12px; }
.fixes li{ display:grid; grid-template-columns:22px 1fr; gap:4px 10px; padding:8px 0; border-top:1px solid var(--line); counter-increment:fix; }
.fixes li::before{ content:counter(fix); grid-row:1 / span 2; width:20px; height:20px; border-radius:50%; background:var(--surface-2);
  font-size:11px; font-weight:600; color:var(--ink-3); display:grid; place-items:center; }
.fixes li b{ font-size:12.5px; color:var(--ink); }
.fixes li span{ grid-column:2; font-size:12px; color:var(--ink-3); line-height:1.5; }
.alertkinds{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px 18px; margin:10px 0 12px; }
.alertkind b{ display:block; font-size:12px; font-weight:700; margin-bottom:2px; }
.alertkind b.crit{ color:var(--red); } .alertkind b.warn{ color:var(--amber-900); }
.alertkind span{ font-size:12px; color:var(--ink-3); line-height:1.5; }
.hcard .elink{ font-size:inherit; color:var(--blue); text-decoration:underline; padding:0; margin:0; }

/* ---- the wizard states --------------------------------------------------- */
.step-state.verified{ color:var(--green-900); }
.step-state.needs{ color:var(--amber-900); font-weight:600; }
.step-state.checking{ color:var(--ink-4); font-style:italic; }
.step.k-needs .step-n{ background:var(--amber-50); color:var(--amber-900); }

/* ---- install ------------------------------------------------------------- */
.zipgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:10px; }
.zip{ padding:12px 14px; border-radius:var(--r3); border:1px solid var(--line-2); background:var(--bg); }
.zip.engine{ border-top:3px solid var(--blue); }
.zip.strategy{ border-top:3px solid var(--violet); }
.ziptag{ display:inline-block; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:8px; }
.zip.engine .ziptag{ color:var(--blue-900); } .zip.strategy .ziptag{ color:var(--violet); }
.zip ol, ol.plain{ list-style:decimal; padding-left:20px; display:flex; flex-direction:column; gap:5px; font-size:12.5px; color:var(--ink-2); line-height:1.5; }
ol.plain{ margin:8px 0; }
.zip ol li::marker, ol.plain li::marker{ color:var(--ink-4); font-weight:600; }
.zip p{ margin-top:10px; }
.shotph{
  margin:10px 0 4px; padding:22px 12px; border:1px dashed var(--line-2); border-radius:var(--r2);
  font-size:11px; color:var(--ink-4); text-align:center; background:var(--bg);
}
.restart{ border-color:var(--amber-400); }
.connlist{ display:flex; flex-direction:column; margin-top:6px; }
.connrow{ display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--line); font-size:12.5px; }
.connrow b{ min-width:200px; }
.connrow span{ color:var(--ink-3); flex:1; }
.connrow.disconnected span{ color:var(--red-900); font-weight:500; }
.phoneurl{ display:flex; flex-direction:column; gap:4px; margin:12px 0; padding:12px 14px; border-radius:var(--r3); background:var(--bg); border:1px solid var(--line); }
.phoneurl .k{ font-size:10px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-4); }
.phoneurl b.mono{ font-size:14px; color:var(--ink); }

/* ---- the wiring chain ---------------------------------------------------- */
.chain{ display:flex; flex-direction:column; margin:10px 0; }
.link{ display:grid; grid-template-columns:26px 1fr; gap:12px; padding:10px 0; border-top:1px solid var(--line); position:relative; }
.link:first-child{ border-top:0; }
.link-n{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:11.5px; font-weight:600;
  background:var(--surface-2); color:var(--ink-3); }
.link-n svg{ width:13px; height:13px; }
.link.ok .link-n{ background:var(--green-50); color:var(--green); }
.link.fail .link-n{ background:var(--red-50); color:var(--red); }
.link.blocked .link-n{ opacity:.5; }
.link-tx b{ display:block; font-size:13px; font-weight:600; color:var(--ink); }
.link.fail .link-tx b{ color:var(--red-900); }
.link.blocked .link-tx{ opacity:.55; }
.link-tx > span{ display:block; margin-top:2px; font-size:12.5px; color:var(--ink-3); line-height:1.5; }
.link-fix{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.code{
  margin:10px 0 8px; padding:12px 14px; border-radius:var(--r3); background:var(--plate); color:var(--plate-tx);
  font-family:var(--mono); font-size:11.5px; line-height:1.6; overflow-x:auto; white-space:pre;
}
.code code{ font-family:inherit; font-size:inherit; background:none; padding:0; }
.codeacts{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.tips{ margin-top:12px; display:flex; flex-direction:column; gap:6px; }
.tips li{ position:relative; padding-left:14px; font-size:12.5px; color:var(--ink-3); line-height:1.5; }
.tips li::before{ content:''; position:absolute; left:2px; top:8px; width:5px; height:5px; border-radius:50%; background:var(--ink-4); }
.tips li b{ color:var(--ink-2); }
.dtab tr.bad td{ background:var(--red-50); }

/* ---- troubleshooting articles -------------------------------------------- */
.tdl{ margin:8px 0 10px; display:grid; grid-template-columns:auto 1fr; gap:6px 14px; }
.tdl > div{ display:contents; }
.tdl dt{ font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-4); padding-top:2px; white-space:nowrap; }
.tdl dd{ margin:0; font-size:12.5px; color:var(--ink-2); line-height:1.5; }
.hcard.trouble{ padding:14px 16px; }

/* ---- faq ----------------------------------------------------------------- */
.faq{ max-width:78ch; border:1px solid var(--line); border-radius:var(--r4); overflow:hidden; }
.faqi{ border-bottom:1px solid var(--line); background:var(--surface); }
.faqi:last-child{ border-bottom:0; }
.faqi summary{ cursor:pointer; padding:11px 16px; font-size:13px; font-weight:600; color:var(--ink); list-style:none; display:flex; align-items:center; gap:10px; }
.faqi summary::-webkit-details-marker{ display:none; }
.faqi summary::before{ content:'+'; width:18px; height:18px; border-radius:50%; background:var(--surface-2); color:var(--ink-3); display:grid; place-items:center; font-size:13px; flex:none; }
.faqi[open] summary::before{ content:'–'; }
.faqi p{ padding:0 16px 14px 44px; font-size:12.5px; color:var(--ink-3); line-height:1.6; }

.gloss{ max-width:78ch; }
.gloss > div{ display:grid; grid-template-columns:180px 1fr; gap:16px; padding:9px 0;
  border-bottom:1px solid var(--line); }
.gloss dt{ font-size:12.5px; font-weight:600; color:var(--ink); }
.gloss dd{ margin:0; font-size:12.5px; color:var(--ink-3); line-height:1.55; }

/* =========================================================================
   DIALOG PIECES USED BY THE NEW OVERLAYS
   ====================================================================== */
.routes{ display:flex; flex-direction:column; gap:8px; }
.route{
  display:grid; grid-template-columns:16px 1fr auto; gap:10px; align-items:center;
  padding:12px 14px; border:1px solid var(--line-2); border-radius:var(--r3);
  text-align:left; background:var(--surface);
}
.route:hover{ background:var(--surface-2); }
.route.on{ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.route b{ grid-column:2; font-size:13px; font-weight:600; color:var(--ink); }
.route span{ grid-column:2; font-size:11.5px; color:var(--ink-4); line-height:1.5; }
.route .rdot{ grid-row:1 / span 2; }
.route em{ grid-column:3; grid-row:1 / span 2; font-style:normal; font-size:10.5px;
  font-weight:600; color:var(--ink-4); }
.rtab{ width:100%; border-collapse:collapse; }
.rtab th{ text-align:left; padding:5px 8px; font-size:10px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-4); border-bottom:1px solid var(--line-2); }
.rtab td{ padding:6px 8px; font-size:12.5px; border-bottom:1px solid var(--line); }
.rtab .r{ text-align:right; }
.rtab .tot td{ font-weight:600; border-bottom:0; border-top:1px solid var(--line-2); }
.passed-head{ text-align:center; }
.passed-mark{ display:grid; place-items:center; margin:0 auto 10px; width:48px; height:48px;
  border-radius:50%; background:var(--green-50); animation:pop 460ms var(--ease-out); }
.passed-mark svg{ width:26px; height:26px; color:var(--green); }
@keyframes pop{ 0%{ transform:scale(.7); opacity:0 } 60%{ transform:scale(1.06) } 100%{ transform:scale(1); opacity:1 } }

/* =========================================================================
   NARROW — the phone is for checking, not configuring
   ====================================================================== */
@media (max-width:1080px){
  .hgrid3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sbody{ flex-direction:column; }
  .snav{ width:100%; display:flex; gap:4px; overflow-x:auto; padding:8px var(--pad-x);
    border-right:0; border-bottom:1px solid var(--line); }
  .snav-item{ flex:none; width:auto; }
  .snav-item span, .ncount{ display:none; }
  .snav-item.on::before{ display:none; }
  .slist{ width:100%; max-height:180px; border-right:0; border-bottom:1px solid var(--line); }
  .spane{ padding:var(--s5) var(--pad-x) var(--s9); }
  .kpis{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .life{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .prow{ grid-template-columns:130px minmax(0,1fr) 120px; }
  .prow .spark{ display:none; }
  .clk{ grid-template-columns:130px minmax(0,1fr) 84px 70px; }
}
@media (max-width:760px){
  .sbar-state{ flex-basis:100%; }
  .sbar-acts{ flex-wrap:wrap; }
  .dviews{ margin-left:0; width:100%; overflow-x:auto; }
  .dsum{ gap:var(--s5); }
  .dfig .v{ font-size:18px; }
  .kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .life{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .prow{ grid-template-columns:1fr; gap:8px; }
  .pst{ text-align:left; }
  .clk{ grid-template-columns:1fr 84px; }
  .clk .cbar{ grid-column:1 / -1; }
  .newacct{ grid-template-columns:1fr; gap:10px; }
  .cday{ min-height:52px; padding:14px 3px 6px; }
  .cday .cp{ font-size:11px; } .cday .ct{ display:none; }
  .gloss > div{ grid-template-columns:1fr; gap:2px; }
  .modes{ grid-template-columns:1fr; }
  .step-b{ padding-left:16px; }
  .hgrid3, .hgrid2, .zipgrid{ grid-template-columns:1fr; }
  .tdl{ grid-template-columns:1fr; gap:2px 0; }
  .tdl dd{ margin-bottom:6px; }
  .connrow b{ min-width:0; }
}

/* ---- the two-column "what happens / what does not" used by dialogs ----- */
.cols2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.cols2 h4{
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-4); margin-bottom:8px;
}
.ticks{ display:flex; flex-direction:column; gap:7px; }
.ticks li{ position:relative; padding-left:18px; font-size:12.5px; line-height:1.5; color:var(--ink-2); }
.ticks li::before{
  content:''; position:absolute; left:4px; top:7px; width:5px; height:5px; border-radius:50%;
  background:var(--ink-4);
}
.ticks.no li{ color:var(--ink-3); }
.ticks.no li::before{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--ink-5); }
@media (max-width:640px){ .cols2{ grid-template-columns:1fr; gap:14px; } }

/* ---- the attention drawer --------------------------------------------- */
.attlist{ border:1px solid var(--line); border-radius:var(--r3); overflow:hidden; }
.att{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-bottom:1px solid var(--line); font-size:12.5px; line-height:1.5;
}
.att:last-child{ border-bottom:0; }
.att svg{ width:15px; height:15px; flex:none; }
.att > span:first-of-type{ flex:1; min-width:0; }
.att.crit{ background:var(--red-50); color:var(--red-900); }
.att.crit svg{ color:var(--red); }
.att.warn{ background:var(--amber-50); color:var(--amber-900); }
.att.warn svg{ color:var(--amber); }
.att.done{ color:var(--ink-3); }
.att.done svg{ color:var(--ink-5); }
.att em{ font-style:normal; font-size:10.5px; color:var(--green); font-weight:600; }
.att-t{ font-size:11px; flex:none; }

.slist-row{ display:flex; align-items:center; gap:2px; }
.slist-row .slist-item{ flex:1; min-width:0; }
.slist-move{ display:flex; flex-direction:column; gap:0; opacity:0;
  transition:opacity var(--t-fast) var(--ease); }
.slist-row:hover .slist-move, .slist-row:focus-within .slist-move{ opacity:1; }
.slist-move .rbtn{ height:16px; padding:0 3px; }
.slist-kick .dim{ font-weight:400; letter-spacing:0; text-transform:none; font-size:10px; }

/* ---- the move menu, the keyboard path for a drag ---------------------- */
.pop-head{
  padding:8px 12px 6px; font-size:11.5px; font-weight:600; color:var(--ink);
  border-bottom:1px solid var(--line); display:flex; align-items:baseline; gap:7px;
}
.pop-head span{ font-size:10.5px; font-weight:400; color:var(--ink-4); }
.pop-item{
  display:block; width:100%; text-align:left; padding:7px 12px; font-size:12.5px;
  color:var(--ink-2);
}
.pop-item:hover:not(:disabled){ background:var(--surface-2); }
.pop-item:disabled{ color:var(--ink-5); }

/* =========================================================================
   PHONE ALERTS — Settings › Phone alerts, and the setup block Help shares

   The owner's mockup gave the structure; the room stays TradeSeq's: light
   ground, one family of switches, compact rows, the test as the hero, and
   a dark phone on the right because a lock screen is dark.
   ====================================================================== */
.alerts-page{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:26px; align-items:start; max-width:1180px; }
.acol-main{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.alerts-page .spane-head{ margin-bottom:2px; }
.crumb{ font-size:10px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-4); margin-bottom:4px; }

/* ---- the hero: the delivery test --------------------------------------- */
.atest{
  border:1px solid var(--blue-100); border-radius:var(--r4); padding:16px 18px 14px;
  background:linear-gradient(180deg,var(--blue-50),var(--surface) 70%);
}
.atest.ok{ border-color:rgba(53,169,127,.5); background:linear-gradient(180deg,var(--green-50),var(--surface) 70%); }
.atest.sim{ border-color:rgba(90,79,207,.35); background:linear-gradient(180deg,var(--violet-50),var(--surface) 70%); }
.atest.bad{ border-color:var(--red-400); background:linear-gradient(180deg,var(--red-50),var(--surface) 70%); }
.atest.wait{ border-color:var(--amber-400); background:linear-gradient(180deg,var(--amber-50),var(--surface) 70%); }
.atest-h{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.atest h2, .aquiet h2, .ahist h2, .amon h2{ font-size:14px; font-weight:700; letter-spacing:-.01em; }
.atest-src{ margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; padding:2px 8px; border-radius:var(--r1); cursor:help; }
.atest-src svg{ width:12px; height:12px; }
.atest-src.sim{ color:var(--violet); background:var(--violet-50); }
.atest-src.prod{ color:var(--green-900); background:var(--green-50); }
.atest > p{ margin-top:6px; font-size:12.5px; color:var(--ink-3); line-height:1.55; max-width:70ch; }
.atest > p b{ color:var(--ink-2); }

.asend{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; }
.asend .asel{ height:30px; width:170px; font-size:12px; }
.ateststate{ font-size:12px; color:var(--ink-3); }
.ateststate .elink{ font-size:11.5px; font-weight:400; margin-left:4px; }
.ateststate.ok{ color:var(--green-900); font-weight:600; }
.ateststate.sim{ color:var(--violet); font-weight:600; }
.ateststate.bad{ color:var(--red-900); font-weight:600; }
.ateststate.wait{ color:var(--amber-900); font-weight:600; }
.atest .buzz{ margin-top:12px; padding:10px 12px; }
.atest .buzz b{ font-size:12.5px; margin-bottom:7px; }
.aqr{ display:flex; gap:14px; align-items:flex-start; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.aqr > svg{ width:112px; height:112px; flex:none; border:1px solid var(--line); border-radius:var(--r2); background:#fff; }
.aqr-m{ display:flex; flex-direction:column; gap:5px; min-width:0; font-size:11.5px; }
.aqr-m > b{ font-size:12.5px; font-weight:600; color:var(--ink); }
.aqr-m .mono{ font-size:12px; color:var(--ink); word-break:break-all; }
.aqr-m .mono.topic{ font-size:14px; font-weight:600; letter-spacing:.01em; user-select:all; }
.aqr-m .dim{ font-size:11.5px; line-height:1.45; max-width:52ch; }
.aqr-m .storelinks{ margin:3px 0 0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.aqr-m .storelinks .elink{ font-size:11px; }

/* ---- the Web Push steps ---------------------------------------------------- */
.psteps{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:0; }
.pstep{ display:grid; grid-template-columns:24px minmax(0,1fr); gap:10px; padding:10px 0; border-top:1px solid var(--line); align-items:start; }
.pstep:first-child{ border-top:0; padding-top:4px; }
.pstep .pn{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:700; color:var(--ink-3); border:1px solid var(--line-2); background:var(--surface); margin-top:1px; }
.pstep .pn svg{ width:12px; height:12px; }
.pstep.done .pn{ background:var(--green); border-color:var(--green); color:#fff; }
.pstep.hero .pn{ border-color:var(--blue); color:var(--blue); }
.pstep > div{ min-width:0; display:flex; flex-direction:column; gap:5px; font-size:12.5px; color:var(--ink-3); line-height:1.5; }
.pstep > div > b{ font-size:13px; color:var(--ink); }
.pstep.done > div > b{ color:var(--ink-2); }
.pstep .bad{ color:var(--red-900); }
.pstep .asend{ margin-top:2px; }
.pstep .buzz{ margin-top:2px; }
.paircode{ font-size:11.5px; color:var(--ink-3); flex-basis:100%; }
.paircode b{ font-size:15px; letter-spacing:.12em; color:var(--ink); }

.arecord{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px 16px; margin:14px 0 0; padding-top:12px; border-top:1px solid var(--line); }
.arecord > div{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.arecord dt{ font-size:10px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-4); }
.arecord dd{ margin:0; font-size:12px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.arecord dd.v-ok{ color:var(--green-900); font-weight:600; } .arecord dd.v-sim{ color:var(--violet); font-weight:600; }
.arecord dd.v-bad{ color:var(--red-900); font-weight:600; } .arecord dd.v-wait, .arecord dd.v-warn{ color:var(--amber-900); font-weight:600; }
.arecord > div.bad{ grid-column:1 / -1; } .arecord > div.bad dd{ color:var(--red-900); }
.fixes.compact{ margin:12px 0 0; border-top:1px solid var(--line); }
.fixes.compact li{ padding:7px 0; }

.adevices{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.adevices > .k{ font-size:10px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-4); }
.adev{ display:inline-flex; align-items:center; gap:6px; padding:3px 4px 3px 8px; border:1px solid var(--line-2); border-radius:var(--r2); background:var(--surface); font-size:12px; }
.adev svg{ width:8px; height:8px; color:var(--ink-5); }
.adev.ok svg{ color:var(--green-400); }
.adev b{ font-weight:600; color:var(--ink); }
.adev > span{ color:var(--ink-4); font-size:11px; }
.adev.ok > span{ color:var(--green-900); }
.adev-add{ display:flex; gap:6px; align-items:center; }
.adev-add .inp{ height:28px; font-size:12px; }
.adev-add input.inp{ width:220px; } .adev-add select.inp{ width:100px; }
.adevices > .dim{ flex-basis:100%; font-size:11px; }
.adevices .qmoves{ flex-basis:100%; }
.adevices .qmoves .dim{ font-size:11px; }

/* ---- quiet hours ---------------------------------------------------------- */
.aquiet, .ahist, .amon{ border:1px solid var(--line); border-radius:var(--r4); padding:14px 18px; background:var(--surface); }
.aquiet-h{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.aquiet .qrow{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:10px; font-size:12.5px; color:var(--ink-3); }
.atime{ width:118px; height:30px; font-family:var(--mono); font-size:12.5px; }
.atz{ width:190px; height:30px; font-size:12px; }
.qnow{ margin-left:auto; font-size:11px; font-weight:600; color:var(--ink-4); padding:2px 8px; border-radius:var(--r1); background:var(--surface-2); }
.qnow.on{ color:var(--blue-900); background:var(--blue-50); }
.aquiet > p{ margin-top:10px; font-size:11.5px; line-height:1.55; max-width:80ch; }
.aquiet > p b{ color:var(--ink-2); }

/* ---- the switch --------------------------------------------------------- */
.asw{ position:relative; flex:none; width:38px; height:22px; cursor:pointer; }
.asw input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:1; }
.asw-track, .asw-knob{ pointer-events:none; }
.asw-track{ position:absolute; inset:0; border-radius:11px; background:var(--surface-3); box-shadow:var(--press); transition:background var(--t-fast) var(--ease); }
.asw-knob{ position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(11,21,39,.3); transition:transform var(--t-mid) var(--ease); }
.asw input:checked + .asw-track{ background:var(--green); box-shadow:none; }
:root[data-theme="dark"] .asw input:checked + .asw-track{ background:#1f8f66; }
.asw input:checked + .asw-track + .asw-knob{ transform:translateX(16px); }
.asw input:focus-visible + .asw-track{ outline:2px solid var(--blue); outline-offset:2px; }
.asw.locked{ cursor:not-allowed; }
.asw.locked input{ cursor:not-allowed; }
.asw.locked input:checked + .asw-track{ background:var(--red-fill); }
.asw.locked input:checked + .asw-track + .asw-knob{ background:#fff; }

/* ---- the groups --------------------------------------------------------- */
.agroup{ border:1px solid var(--line); border-radius:var(--r4); background:var(--surface); overflow:hidden; --k:var(--line-3); }
.agroup.critical{ --k:var(--red); } .agroup.good{ --k:var(--green); } .agroup.health{ --k:var(--amber-400); }
.agroup.needs{ --k:var(--amber-400); } .agroup.daily{ --k:var(--blue); } .agroup.advanced{ --k:var(--ink-4); }
.aghead{ display:flex; align-items:center; gap:10px; padding:11px 16px; border-bottom:1px solid var(--line); border-left:3px solid var(--k); }
.asev{ font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:2px 7px; border-radius:var(--r1); color:var(--k); border:1px solid var(--k); }
.agroup.health .asev, .agroup.needs .asev{ color:var(--amber-900); border-color:var(--amber-400); }
.agt{ font-size:13px; font-weight:700; color:var(--ink); }
.agd{ margin-left:auto; font-size:11px; color:var(--ink-4); text-align:right; }
.agex{ padding:9px 16px 9px 19px; font-size:11.5px; color:var(--ink-3); line-height:1.5; background:color-mix(in srgb, var(--red) 9%, var(--surface)); border-bottom:1px solid var(--line); }
.arows{ display:flex; flex-direction:column; }
.arow{ display:flex; align-items:center; gap:14px; padding:9px 16px 9px 19px; border-top:1px solid var(--line); }
.arow:first-child{ border-top:0; }
.atxt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.atxt .at{ font-size:12.5px; font-weight:600; color:var(--ink); }
.atxt .ad{ font-size:11.5px; color:var(--ink-3); }
.alwayson{ font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--red); flex:none; }
.asend-now{ font-size:11px; flex:none; }

/* ---- the phone ------------------------------------------------------------ */
.arail{ position:sticky; top:16px; display:flex; flex-direction:column; gap:10px; }
.arail h3{ font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-4); }
.phone{ background:#05070a; border:1px solid #2a3140; border-radius:22px; padding:14px 12px 16px; display:flex; flex-direction:column; gap:8px;
  box-shadow:var(--lift-2), inset 0 0 0 1px rgba(255,255,255,.04); }
.pclk{ text-align:center; font-family:var(--mono); font-size:11.5px; color:#8b929b; padding:2px 0 4px; }
.push{ background:rgba(30,34,40,.94); border:1px solid #333a43; border-radius:13px; padding:9px 11px; display:flex; flex-direction:column; gap:3px;
  border-left:3px solid var(--k,#333a43); color:#e8eaed; }
.push.critical{ --k:#f87171; } .push.good{ --k:#34d399; } .push.health{ --k:#fbbf24; } .push.needs{ --k:#fbbf24; } .push.daily{ --k:#60a5fa; } .push.advanced{ --k:#8b929b; }
.push .ph{ display:flex; align-items:center; gap:6px; font-size:10px; color:#8b929b; }
/* the app icon is the real one — the exact symbol on its white ground, as iOS shows it */
.push .ph .ic{ width:15px; height:15px; border-radius:4px; display:block; flex:none; background:#fff; }
.push .ph .appname{ font-weight:700; color:#c8cdd4; letter-spacing:.04em; }
.push .ph .ago{ margin-left:auto; }
.push .pt{ font-size:12px; font-weight:700; line-height:1.3; }
.push .pb{ font-size:11.5px; color:#a7adb6; line-height:1.4; }
.railnote{ font-size:11px; color:var(--ink-4); line-height:1.5; border-top:1px solid var(--line); padding-top:10px; }

/* ---- history and monitoring ---------------------------------------------- */
.ahist .dsec-h{ margin-bottom:8px; }
.ahist .dsec-h h2{ font-size:14px; font-weight:700; letter-spacing:-.01em; text-transform:none; color:var(--ink); }
.ahtab td b{ display:block; font-size:12px; color:var(--ink); }
.ahtab td .dim{ display:block; font-size:11px; }
.ahtab td.t{ white-space:nowrap; }
.dst{ font-size:10.5px; font-weight:600; padding:1px 7px; border-radius:var(--r1); color:var(--ink-3); background:var(--surface-2); white-space:nowrap; }
.dst.accepted{ color:var(--green-900); background:var(--green-50); }
.dst.failed{ color:var(--red-900); background:var(--red-50); }
.dst.held, .dst.queued, .dst.sending{ color:var(--amber-900); background:var(--amber-50); }
.dst.suppressed{ color:var(--ink-4); }
.amon > p{ margin-top:8px; font-size:12.5px; color:var(--ink-3); line-height:1.55; max-width:78ch; }
.amon > p.dim{ font-size:11px; }
.amon-st{ display:flex; gap:9px; align-items:flex-start; margin-top:10px; padding:10px 12px; border-radius:var(--r3); background:var(--surface-2); font-size:12px; color:var(--ink-3); line-height:1.5; }
.amon-st svg{ width:15px; height:15px; flex:none; color:var(--ink-4); margin-top:1px; }
.amon-st b{ color:var(--ink); }

@media (max-width:1240px){ .alerts-page{ grid-template-columns:1fr; } .arail{ position:static; } }
@media (max-width:640px){
  .arecord{ grid-template-columns:1fr 1fr; }
  .adev-add{ flex-basis:100%; flex-wrap:wrap; }
  .adev-add input.inp{ flex:1 1 140px; width:auto; min-width:0; }
  .atz{ width:150px; }
  .aghead{ flex-wrap:wrap; row-gap:4px; }
  .agd{ margin-left:0; flex-basis:100%; text-align:left; }
}