/* ============================================================================
   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:#fbecc4; }

.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:#fff; }
.slist-item.on span{ color:rgba(255,255,255,.62); }
.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:#faf9ff; }
.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:#faf9ff; }
.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:#fff; border-color:var(--ink); }
.htab.on b{ color:rgba(255,255,255,.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 one dark room

   The Cockpit is the operating surface and stays light. The Dashboard is
   where you read the record, so it takes a dark analytical canvas: the same
   navy as the wordmark, the same blue, the same semantic colours, remapped
   through the tokens so every shared component simply works on it.
   ====================================================================== */
.dash{
  display:flex; flex-direction:column;
  --bg:#0b1120; --surface:#111a2c; --surface-2:#172338; --surface-3:#1f2d47;
  --ink:#eef2f8; --ink-2:#d6dde9; --ink-3:#a7b3c7; --ink-4:#8593ab; --ink-5:#34435d;
  --line:rgba(190,213,242,.10); --line-2:rgba(190,213,242,.18); --line-3:rgba(190,213,242,.32);
  --blue:#6b9af0; --blue-400:#5b8cea; --blue-100:#294578; --blue-50:#182a4d; --blue-900:#cfe0ff;
  --green:#4fc79b; --green-400:#3fb88b; --green-50:#0f2e23; --green-900:#9fe6c7;
  --amber:#e0ac4e; --amber-400:#d09a2c; --amber-50:#3a2c0e; --amber-900:#f2d08a;
  --red:#f08a7c; --red-400:#e0685a; --red-50:#3d1815; --red-900:#f6b3a9;
  --violet:#a49bf0; --violet-50:#262452;
  --gold:#d9a521; --gold-ink:#f0cc6a; --gold-bg:#3a2f0c; --gold-line:rgba(217,165,33,.45);
  --lift-1:0 1px 2px rgba(0,0,0,.35);
  --lift-2:0 1px 2px rgba(0,0,0,.3), 0 12px 26px -18px rgba(0,0,0,.8);
  --ring:0 0 0 2px rgba(107,154,240,.45);
  background:var(--bg); color:var(--ink);
}
.dash select.inp{
  background-color:var(--surface);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a7b3c7' stroke-width='1.5' stroke-linecap='round'><path d='m4 6.5 4 4 4-4'/></svg>");
}
.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 .btn:not(.btn--line):not(.btn--red):not(.btn--ink){ background:var(--ink); color:var(--bg); border-color:var(--ink); font-weight:600; }
.dash .btn:not(.btn--line):not(.btn--red):not(.btn--ink):hover{ background:#fff; color:var(--bg); }
.dash .btn--ink{ background:#fff; color:#0b1120; border-color:#fff; }
.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){
  .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); }