tokenbiryani 0.2.0__py3-none-any.whl

tokenbiryani/dashboard/console.css

@@ -0,0 +1,610 @@
+/* ============================================================================
+   tokenbiryani console — design system
+
+   Minimal by construction: one accent, hairline borders, no shadows doing work
+   a border can do, and a single 4px spacing scale. Colour is reserved for
+   state, and state colour is validated for colour-vision deficiency — the
+   accent is deliberately off that ramp so it can mean "interactive".
+   ========================================================================= */
+
+:root{
+  /* neutrals, very slightly cool so the warm accent reads as chosen */
+  --bg:#0A0C10; --surface:#111419; --surface-2:#171B22; --surface-3:#1D222B;
+  --border:#1E242D; --border-strong:#2C3540;
+  --text:#E9ECF1; --text-2:#99A2AE; --text-3:#616B79;
+
+  --accent:#E9A94A; --accent-ink:#1A1204; --accent-soft:#241C0F;
+  --ready:#2FA47A; --ready-t:#4FD09B; --ready-w:#0E2620;
+  --cool:#4A85DE;  --cool-t:#7FADEE;  --cool-w:#101B2B;
+  --crit:#DA6355;  --crit-t:#F08878;  --crit-w:#2A1614;
+  --cache:#9068DE; --cache-t:#B18CF0; --cache-w:#1C1630;
+
+  --r-xs:5px; --r-sm:8px; --r:11px; --r-lg:16px;
+  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
+  --row:14px;
+  --sans:"Inter var",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
+         "Helvetica Neue",Arial,sans-serif;
+  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
+  --ease:cubic-bezier(.4,0,.2,1);
+}
+:root[data-theme="light"]{
+  --bg:#FAFAFB; --surface:#FFFFFF; --surface-2:#F4F5F7; --surface-3:#ECEEF1;
+  --border:#E6E8EC; --border-strong:#D0D5DC;
+  --text:#14181F; --text-2:#5A6472; --text-3:#8892A0;
+  --accent:#A8670F; --accent-ink:#FFFFFF; --accent-soft:#FBF2E3;
+  --ready:#12795B; --ready-t:#0D5B44; --ready-w:#E6F3EE;
+  --cool:#1F63C4;  --cool-t:#17509F;  --cool-w:#E7EEFB;
+  --crit:#A93125;  --crit-t:#8A2318;  --crit-w:#FAE9E6;
+  --cache:#7A4FD0; --cache-t:#5C39A4; --cache-w:#F1EBFC;
+}
+
+*,*::before,*::after{box-sizing:border-box}
+html,body{height:100%}
+body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
+  font-size:13.5px;line-height:1.5;-webkit-font-smoothing:antialiased;
+  text-rendering:optimizeLegibility}
+.mono,code,kbd{font-family:var(--mono);font-variant-numeric:tabular-nums}
+h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.018em}
+p{margin:0}
+button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
+input,select,textarea{font:inherit}
+a{color:var(--accent);text-underline-offset:2px}
+:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs)}
+::selection{background:var(--accent-soft);color:var(--text)}
+.hidden{display:none!important}
+.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
+
+/* ---------- shell ---------- */
+.shell{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh}
+@media(max-width:900px){.shell{grid-template-columns:1fr}}
+
+.side{background:var(--surface);border-right:1px solid var(--border);
+  display:flex;flex-direction:column;gap:var(--s5);padding:var(--s5) var(--s4);
+  position:sticky;top:0;height:100vh;overflow-y:auto}
+@media(max-width:900px){.side{position:static;height:auto;border-right:0;
+  border-bottom:1px solid var(--border)}}
+.brand{display:flex;align-items:center;gap:var(--s2);padding:0 var(--s2)}
+.brand .dot{width:22px;height:22px;border-radius:7px;background:var(--accent);
+  display:grid;place-items:center;font-size:12px;flex:none}
+.brand b{font-size:14px;font-weight:650;letter-spacing:-.02em}
+.brand span{font-size:10.5px;color:var(--text-3);display:block;letter-spacing:.02em}
+
+.nav{display:flex;flex-direction:column;gap:2px;flex:1}
+.nav button{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);
+  color:var(--text-2);font-size:13px;font-weight:500;text-align:left;width:100%;
+  transition:background .14s var(--ease),color .14s var(--ease)}
+.nav button svg{width:16px;height:16px;flex:none;opacity:.8}
+.nav button:hover{background:var(--surface-2);color:var(--text)}
+.nav button.on{background:var(--surface-2);color:var(--text)}
+.nav button.on svg{opacity:1;color:var(--accent)}
+.nav .sep{margin:var(--s3) 10px var(--s1);font-size:9.5px;letter-spacing:.12em;
+  text-transform:uppercase;color:var(--text-3);font-weight:600}
+
+.side-foot{display:flex;flex-direction:column;gap:var(--s2);
+  border-top:1px solid var(--border);padding-top:var(--s3)}
+.side-foot .row{display:flex;gap:6px}
+.chip{flex:1;border:1px solid var(--border);border-radius:var(--r-sm);padding:5px 8px;
+  font-size:11px;color:var(--text-2);text-align:center;
+  transition:border-color .14s var(--ease),color .14s var(--ease)}
+.chip:hover{border-color:var(--border-strong);color:var(--text)}
+.status{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--text-3);padding:0 2px}
+.status i{width:6px;height:6px;border-radius:50%;background:var(--text-3);flex:none}
+.status.on i{background:var(--ready);box-shadow:0 0 0 3px var(--ready-w)}
+.status.off i{background:var(--crit);box-shadow:0 0 0 3px var(--crit-w)}
+
+.main{min-width:0;display:flex;flex-direction:column}
+.topbar{display:flex;align-items:baseline;gap:var(--s3);padding:var(--s5) var(--s6) var(--s4);
+  flex-wrap:wrap}
+.topbar h1{font-size:22px}
+.topbar .sub{color:var(--text-3);font-size:12.5px}
+.topbar .spacer{flex:1}
+.view{padding:0 var(--s6) var(--s7);max-width:1320px;width:100%}
+@media(max-width:640px){.topbar,.view{padding-left:var(--s4);padding-right:var(--s4)}}
+.view[hidden]{display:none}
+@media (prefers-reduced-motion:no-preference){
+  .view{animation:rise .22s var(--ease)}
+  @keyframes rise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
+}
+
+/* ---------- primitives ---------- */
+.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
+  overflow:hidden}
+.card>header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
+  padding:var(--s3) var(--s4);border-bottom:1px solid var(--border);flex-wrap:wrap}
+.card>header h3{font-size:12.5px}
+.card>header .note{font-size:11px;color:var(--text-3);font-weight:400}
+.card .pad{padding:var(--s4)}
+.grid{display:grid;gap:var(--s3)}
+.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
+.g3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
+.stack{display:flex;flex-direction:column;gap:var(--s3)}
+.row{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
+
+.btn{border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:7px 13px;
+  font-size:12.5px;font-weight:500;color:var(--text-2);
+  transition:border-color .14s var(--ease),color .14s var(--ease),background .14s var(--ease)}
+.btn:hover{color:var(--text);border-color:var(--text-3)}
+.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
+.btn.primary:hover{filter:brightness(1.07)}
+.btn.ghost{border-color:transparent;color:var(--text-3)}
+.btn.ghost:hover{background:var(--surface-2);color:var(--text)}
+.btn.danger{border-color:var(--crit);color:var(--crit-t)}
+.btn.danger:hover{background:var(--crit-w)}
+.btn:disabled{opacity:.45;cursor:default;filter:none}
+.btn.sm{padding:4px 9px;font-size:11.5px}
+
+label.f,.f{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:600;
+  letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);min-width:0}
+label.f input,label.f select,label.f textarea{background:var(--surface-2);
+  border:1px solid var(--border);border-radius:var(--r-sm);padding:9px 11px;color:var(--text);
+  font-size:13px;font-weight:400;letter-spacing:normal;text-transform:none;width:100%;
+  transition:border-color .14s var(--ease),background .14s var(--ease)}
+label.f input:focus,label.f select:focus{border-color:var(--accent);outline:none;
+  background:var(--surface)}
+label.f .hint,.f .hint{font-size:10.5px;font-weight:400;letter-spacing:normal;text-transform:none;
+  color:var(--text-3)}
+
+.pill{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:650;
+  letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:99px;white-space:nowrap}
+.pill i{width:5px;height:5px;border-radius:50%;flex:none}
+.pill.ready{background:var(--ready-w);color:var(--ready-t)}   .pill.ready i{background:var(--ready)}
+.pill.cooling{background:var(--cool-w);color:var(--cool-t)}   .pill.cooling i{background:var(--cool)}
+.pill.disabled{background:var(--crit-w);color:var(--crit-t)}  .pill.disabled i{background:var(--crit)}
+.pill.muted{background:var(--surface-2);color:var(--text-3)}  .pill.muted i{background:var(--text-3)}
+.pill.accent{background:var(--accent-soft);color:var(--accent)} .pill.accent i{background:var(--accent)}
+
+/* Bare .note is the quiet caption beside a heading. Give it a tier and it becomes
+   a callout — same word, because it is the same thing said louder. */
+.note{font-size:11px;color:var(--text-3);font-weight:400}
+.note.err,.note.ok,.note.info,.note.warn{padding:11px 14px;border-radius:var(--r-sm);
+  font-size:12.5px;border:1px solid;display:flex;gap:10px;align-items:flex-start}
+.note.err{background:var(--crit-w);border-color:var(--crit);color:var(--crit-t)}
+.note.ok{background:var(--ready-w);border-color:var(--ready);color:var(--ready-t)}
+.note.info{background:var(--cool-w);border-color:var(--cool);color:var(--cool-t)}
+.note.warn{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
+
+.empty{padding:var(--s7) var(--s4);text-align:center;color:var(--text-3);font-size:12.5px;
+  line-height:1.8}
+.empty b{color:var(--text-2);font-weight:550;display:block;font-size:14px;margin-bottom:4px}
+
+table{width:100%;border-collapse:collapse}
+th{text-align:left;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
+  color:var(--text-3);font-weight:650;padding:0 var(--s3) var(--s2);white-space:nowrap}
+th.r{text-align:right}
+td{border-top:1px solid var(--border);padding:var(--row) var(--s3);color:var(--text-2);
+  vertical-align:middle}
+td.r{text-align:right;white-space:nowrap;color:var(--text)}
+tbody tr{transition:background .12s var(--ease)}
+tbody tr:hover td{background:var(--surface-2)}
+tr.click{cursor:pointer}
+tr.click:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
+.scroll{overflow-x:auto}
+
+/* ---------- stat tiles ---------- */
+.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:var(--s3)}
+.tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
+  padding:var(--s4);display:flex;flex-direction:column;gap:6px}
+.tile .lb{font-size:10.5px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;
+  color:var(--text-3)}
+.tile .vl{font-size:26px;font-weight:600;letter-spacing:-.03em;line-height:1.05}
+.tile .vl small{font-size:13px;font-weight:500;color:var(--text-3);letter-spacing:0}
+.tile .sub{font-size:11.5px;color:var(--text-3)}
+.tile.good .vl{color:var(--ready-t)} .tile.cache .vl{color:var(--cache-t)}
+.tile.bad .vl{color:var(--crit-t)}
+
+/* Chart chrome lives with the series palette at the end of this file. */
+
+.meter{display:flex;flex-direction:column;gap:5px;min-width:150px}
+.meter .bar{display:flex;align-items:center;gap:8px}
+.meter .k{font-size:9.5px;color:var(--text-3);width:20px;font-family:var(--mono)}
+.meter .track{flex:1;height:5px;background:var(--surface-3);border-radius:99px;overflow:hidden}
+.meter .track i{display:block;height:100%;border-radius:99px;transition:width .3s var(--ease)}
+.meter .v{font-size:10.5px;color:var(--text-2);width:70px;text-align:right;font-family:var(--mono)}
+
+/* ---------- request stream ---------- */
+.stream{display:flex;flex-direction:column}
+.stream .r{display:grid;grid-template-columns:70px 108px minmax(0,1fr) 72px 64px 62px;
+  gap:var(--s3);padding:var(--row) var(--s4);border-top:1px solid var(--border);
+  font-size:11.5px;color:var(--text-2);align-items:center;cursor:pointer;
+  font-family:var(--mono);transition:background .12s var(--ease)}
+.stream .r:hover{background:var(--surface-2)}
+.stream .r:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
+.stream .r.head{cursor:default;font-family:var(--sans);font-size:10px;letter-spacing:.1em;
+  text-transform:uppercase;color:var(--text-3);font-weight:650;border-top:0;padding-bottom:var(--s2)}
+.stream .r.head:hover{background:none}
+.stream .r .m{color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.stream .r.brk{background:var(--cache-w)}
+.ok{color:var(--ready-t)} .er{color:var(--crit-t)} .ca{color:var(--cache-t)} .dm{color:var(--text-3)}
+@media(max-width:760px){.stream .r{grid-template-columns:1fr 1fr;gap:2px var(--s3)}}
+
+/* ---------- inspector ---------- */
+.chain{display:flex;align-items:stretch;flex-wrap:wrap;gap:0}
+.node{background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--r-sm);
+  padding:9px 13px;display:flex;flex-direction:column;gap:3px}
+.node .n{font-size:12px;color:var(--text);font-family:var(--mono)}
+.node .s{font-size:10.5px;font-family:var(--mono)}
+.node.fail{border-color:var(--crit)} .node.fail .s{color:var(--crit-t)}
+.node.win{border-color:var(--ready)} .node.win .s{color:var(--ready-t)}
+.arrow{padding:0 12px;font-size:10.5px;color:var(--text-3);align-self:center;font-family:var(--mono)}
+.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:1px;
+  background:var(--border);border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden}
+.kv>div{background:var(--surface);padding:10px 13px;display:flex;flex-direction:column;gap:3px}
+.kv .lb{font-size:9.5px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3)}
+.kv .vl{font-size:14px;color:var(--text);font-family:var(--mono)}
+.kv .vl.ca{color:var(--cache-t)}
+tr.won td{background:var(--ready-w)} tr.won td:first-child{color:var(--ready-t)}
+
+/* ---------- modal ---------- */
+.scrim{position:fixed;inset:0;background:rgba(6,8,11,.62);backdrop-filter:blur(3px);
+  display:grid;place-items:center;padding:var(--s4);z-index:50}
+:root[data-theme="light"] .scrim{background:rgba(20,24,31,.34)}
+.modal{background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-lg);
+  width:min(520px,100%);max-height:88vh;overflow:auto}
+.modal>header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
+  padding:var(--s5) var(--s5) var(--s3)}
+.modal>header h3{font-size:16px}
+.modal .pad{padding:0 var(--s5) var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
+.modal footer{display:flex;gap:var(--s2);justify-content:flex-end;padding:var(--s3) var(--s5) var(--s5)}
+@media (prefers-reduced-motion:no-preference){
+  .scrim{animation:fade .16s var(--ease)}
+  .modal{animation:pop .2s var(--ease)}
+  @keyframes fade{from{opacity:0}to{opacity:1}}
+  @keyframes pop{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
+}
+
+/* ---------- onboarding ----------
+   A full page, not a dialog. The rail states the whole shape of the setup up
+   front — four steps, where you are, what is left — because the thing being
+   asked for is a credential, and a wizard that reveals its length one screen at
+   a time earns none of the trust that asking for one requires. */
+.onboard{min-height:100vh;display:grid;grid-template-columns:296px minmax(0,1fr)}
+
+.wiz-rail{background:var(--surface);border-right:1px solid var(--border);
+  padding:var(--s5) var(--s4);display:flex;flex-direction:column;gap:var(--s5)}
+.wiz-rail .brand{padding:0}
+
+.wiz-steps{display:flex;flex-direction:column;gap:2px;flex:1}
+.wiz-step{display:flex;gap:var(--s3);align-items:flex-start;padding:10px var(--s2);
+  border-radius:var(--r-sm);text-align:left;width:100%}
+.wiz-step .n{width:22px;height:22px;flex:none;border-radius:50%;display:grid;
+  place-items:center;font-size:11px;font-weight:650;font-family:var(--mono);
+  background:var(--surface-3);color:var(--text-3);border:1px solid transparent;
+  transition:background .2s var(--ease),color .2s var(--ease)}
+.wiz-step .t{min-width:0}
+.wiz-step .t b{display:block;font-size:12.5px;font-weight:550;color:var(--text-3)}
+.wiz-step .t span{display:block;font-size:11px;color:var(--text-3);line-height:1.5;
+  margin-top:2px}
+.wiz-step.on{background:var(--surface-2)}
+.wiz-step.on .n{background:var(--accent);color:var(--accent-ink)}
+.wiz-step.on .t b{color:var(--text)}
+.wiz-step.done .n{background:var(--ready-w);color:var(--ready-t);
+  border-color:var(--ready)}
+.wiz-step.done .t b{color:var(--text-2)}
+
+.wiz-foot{display:flex;flex-direction:column;gap:var(--s2);
+  border-top:1px solid var(--border);padding-top:var(--s4)}
+.wiz-foot .row{display:flex;gap:6px}
+.wiz-foot .chip{flex:1;white-space:nowrap}
+.wiz-foot .addr{font-size:10.5px;color:var(--text-3);font-family:var(--mono);
+  word-break:break-all}
+
+.wiz-body .card>footer{display:flex;gap:var(--s2);justify-content:flex-end;
+  padding:0 var(--s4) var(--s4);flex-wrap:wrap}
+.wiz-main{padding:var(--s6);overflow-y:auto;min-width:0}
+/* The pane is the content. An inner cap left a wizard's worth of empty gutter on
+   any real monitor; the prose keeps its own measure below, which is the only part
+   that actually wants to be narrow. */
+.wiz-body{width:100%;max-width:1320px;display:flex;flex-direction:column;gap:var(--s4)}
+.onboard h2{font-size:22px}
+.onboard .lede{color:var(--text-3);font-size:13px;line-height:1.65;max-width:70ch}
+
+/* Step 1: the routes in, one card each. A radio dressed as a card — the label
+   is the hit target, so the whole card is clickable without any script. */
+.routes{display:flex;flex-direction:column;gap:var(--s2)}
+.route{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s4);
+  border:1px solid var(--border);border-radius:var(--r);background:var(--surface);
+  cursor:pointer;transition:border-color .14s var(--ease),background .14s var(--ease)}
+.route:hover{border-color:var(--border-strong);background:var(--surface-2)}
+.route:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
+.route:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
+.route input{margin-top:2px;accent-color:var(--accent);flex:none;width:auto}
+.route .rb{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
+.route .rt{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
+  font-size:13.5px;font-weight:600;color:var(--text)}
+.route .rs{font-size:11.5px;color:var(--text-3);line-height:1.6}
+
+/* Step 3's verdict, one line per thing checked. */
+.checks{display:flex;flex-direction:column;gap:var(--s2)}
+.check{display:flex;gap:var(--s2);align-items:flex-start;font-size:12.5px;
+  color:var(--text-2)}
+.check i{width:16px;height:16px;flex:none;border-radius:50%;margin-top:1px;
+  display:grid;place-items:center;font-size:10px;font-style:normal;font-weight:700}
+.check.ok i{background:var(--ready-w);color:var(--ready-t)}
+.check.no i{background:var(--crit-w);color:var(--crit-t)}
+.check.na i{background:var(--surface-3);color:var(--text-3)}
+
+@media(max-width:900px){
+  .onboard{grid-template-columns:1fr}
+  .wiz-rail{flex-direction:row;align-items:center;gap:var(--s4);flex-wrap:wrap;
+    border-right:0;border-bottom:1px solid var(--border);padding:var(--s4)}
+  .wiz-steps{flex-direction:row;gap:var(--s2);flex:1 1 100%;overflow-x:auto}
+  .wiz-step{padding:8px;flex:none;width:auto}
+  .wiz-step .t{display:none}
+  .wiz-step.on .t{display:block}
+  .wiz-step.on .t span{display:none}
+  .wiz-foot{border-top:0;padding-top:0;flex-direction:row;align-items:center;
+    flex:1 1 100%}
+  .wiz-main{padding:var(--s5) var(--s4)}
+}
+
+pre.code{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);
+  padding:13px 15px;font-family:var(--mono);font-size:11.5px;color:var(--text-2);
+  overflow-x:auto;margin:0;line-height:1.85;white-space:pre-wrap;word-break:break-all}
+pre.code b{color:var(--ready-t);font-weight:400}
+pre.code .c{color:var(--text-3)}
+.copyrow{display:flex;gap:var(--s2);align-items:center}
+
+.guide{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5);max-width:820px}
+.guide section{display:flex;flex-direction:column;gap:var(--s3)}
+.guide h2{font-size:17px;display:flex;align-items:center;gap:10px}
+.guide h2 .num{width:22px;height:22px;border-radius:7px;background:var(--surface-2);
+  color:var(--accent);display:grid;place-items:center;font-size:11px;font-family:var(--mono);flex:none}
+.guide p{color:var(--text-2);font-size:13px;line-height:1.72}
+.guide ul{margin:0;padding-left:18px;color:var(--text-2);font-size:13px;line-height:1.8}
+.guide .card .pad{display:flex;flex-direction:column;gap:var(--s3)}
+
+.skel{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);
+  background-size:400% 100%;border-radius:var(--r-xs);height:11px}
+@media (prefers-reduced-motion:no-preference){
+  .skel{animation:shimmer 1.4s ease infinite}
+  @keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
+}
+
+/* ---------- capacity horizon ----------
+   Not a .chart: it is a burn-down of *future* windows, so each bar is a bucket and
+   the interesting mark is the step where a window resets, not the trend line. */
+.hz{display:flex;align-items:flex-end;gap:3px;height:118px}
+.hz div{flex:1;background:var(--cool);border-radius:3px 3px 0 0;min-height:4px;
+  opacity:.62;transition:opacity .14s var(--ease),height .3s var(--ease)}
+.hz div:hover{opacity:1}
+.hz div.step{background:var(--ready);opacity:.85}
+.hzx{display:flex;gap:3px;margin-top:6px}
+.hzx span{flex:1;text-align:center;font-size:9.5px;color:var(--text-3)}
+.hznote{display:flex;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s3);
+  font-size:11.5px;color:var(--text-3)}
+.hznote b{color:var(--text);font-weight:500}
+
+/* ---------- table cell helpers ---------- */
+.spark{display:inline-block;vertical-align:middle}
+.aid{display:flex;flex-direction:column;gap:2px;min-width:0}
+.aid .nm{color:var(--text);font-weight:550;display:flex;align-items:center;gap:6px}
+.aid .sub{font-size:10.5px;color:var(--text-3);font-family:var(--mono)}
+.acts{display:flex;gap:5px;justify-content:flex-end;flex-wrap:nowrap}
+.addr{font-size:11.5px;color:var(--text-3)}
+.tog{width:34px;height:19px;border-radius:99px;background:var(--surface-3);
+  border:1px solid var(--border-strong);position:relative;flex:none;padding:0;
+  transition:background .16s var(--ease),border-color .16s var(--ease)}
+.tog i{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;
+  background:var(--text-3);transition:transform .16s var(--ease),background .16s var(--ease)}
+.tog.on{background:var(--ready-w);border-color:var(--ready)}
+.tog.on i{transform:translateX(15px);background:var(--ready)}
+
+/* ---------- form details ----------
+   label.f stacks, so anything inline becomes its own row. The caption line needs
+   to be one element or the "optional" tag lands under the label. */
+label.f .t,.f .t{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
+label.f .t em{font-style:normal;text-transform:none;letter-spacing:normal;
+  font-weight:400;color:var(--text-3);font-size:10.5px}
+.tog:disabled{opacity:.38;cursor:default}
+/* A disabled control dispatches no pointer events, so its tooltip has to hang
+   on a wrapper with a box of its own. */
+.held{display:inline-block;cursor:help}
+
+/* A modal is narrower than a view, so its grids need their own breakpoints or
+   every field stacks and the dialog turns into a scroll. */
+/* ---------- Advanced disclosure ----------
+   The add-account form is essentials above, admin fields folded away below. The
+   summary has to look like a control rather than a heading, or nobody opens it. */
+.adv{border-top:1px solid var(--border);padding-top:var(--s3)}
+.adv>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;
+  font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
+  color:var(--text-3);user-select:none}
+.adv>summary::-webkit-details-marker{display:none}
+.adv>summary::before{content:"+";font-family:var(--mono);font-size:13px;color:var(--accent)}
+.adv[open]>summary::before{content:"\2212"}
+.adv>summary:hover{color:var(--text)}
+.adv>summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
+.adv[open]>summary{margin-bottom:var(--s3)}
+
+.modal{width:min(580px,100%)}
+.modal .grid.g2{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
+.modal .grid.g3{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
+
+/* ============================================================================
+   Categorical series palette
+   ---------------------------------------------------------------------------
+   The four state colours above are RESERVED: ready/cooling/critical mean health
+   and cache means the cache, so none of them may stand in for "account number 4".
+   Series identity therefore needs its own ramp, and this is it — eight fixed
+   slots, assigned in order and never cycled.
+
+   Validated with the data-viz validator against THIS console's surfaces, not a
+   generic white/black:
+     dark  (#111419): lightness, chroma, CVD, normal-vision and 3:1 contrast all pass
+                      (worst adjacent ΔE 8.4 protan, 19.3 normal)
+     light (#FFFFFF): passes, with three slots under 3:1 — which is why every chart
+                      on the Usage screen ships a totals table beside it. That table
+                      is the relief the contrast warning obliges, not a nicety.
+   Do not re-step these by eye. Re-run the validator.
+   ========================================================================= */
+:root{
+  --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70; --series-4:#c98500;
+  --series-5:#d55181; --series-6:#008300; --series-7:#9085e9; --series-8:#e66767;
+  --series-other:#616B79;
+}
+:root[data-theme="light"]{
+  --series-1:#2a78d6; --series-2:#eb6834; --series-3:#1baf7a; --series-4:#eda100;
+  --series-5:#e87ba4; --series-6:#008300; --series-7:#4a3aa7; --series-8:#e34948;
+  --series-other:#8892A0;
+}
+
+/* ---------- chart chrome ---------- */
+.plot{position:relative}
+.chart{width:100%;height:auto;display:block;overflow:visible}
+.chart text{fill:var(--text-3);font-family:var(--mono);font-size:9px}
+.chart .grid-line{stroke:var(--border);stroke-width:1;shape-rendering:crispEdges}
+.chart .axis{stroke:var(--border-strong);stroke-width:1;shape-rendering:crispEdges}
+/* The gap between stacked segments is surface-coloured space, never a stroke. */
+.chart .seg{stroke:var(--surface);stroke-width:2;stroke-linejoin:miter}
+.chart .ln{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
+.chart .dot{stroke:var(--surface);stroke-width:2}
+.chart .hit{fill:transparent;cursor:crosshair}
+.chart .cross{stroke:var(--border-strong);stroke-width:1;pointer-events:none}
+
+.legend{display:flex;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s3);font-size:11px;
+  color:var(--text-2)}
+.legend span{display:flex;align-items:center;gap:6px}
+.legend i{width:9px;height:9px;border-radius:3px;flex:none}
+
+/* Tooltips enhance; they never gate a value — the totals table carries them all. */
+.tip{position:absolute;pointer-events:none;z-index:20;background:var(--surface-2);
+  border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:8px 10px;
+  font-size:11px;color:var(--text-2);white-space:nowrap;
+  box-shadow:0 6px 20px rgba(0,0,0,.28)}
+.tip b{color:var(--text);font-weight:600;display:block;margin-bottom:4px;font-size:11.5px}
+.tip .tr{display:flex;align-items:center;gap:7px;justify-content:space-between;gap:14px}
+.tip .tr i{width:8px;height:8px;border-radius:2px;flex:none}
+.tip .tr .nm{display:flex;align-items:center;gap:6px}
+.tip .tr .v{font-family:var(--mono);color:var(--text)}
+
+.filters{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;
+  padding-bottom:var(--s4)}
+.seg-ctl{display:inline-flex;border:1px solid var(--border);border-radius:var(--r-sm);
+  overflow:hidden;background:var(--surface)}
+.seg-ctl button{padding:6px 12px;font-size:12px;color:var(--text-3);
+  border-right:1px solid var(--border);transition:background .14s var(--ease),color .14s var(--ease)}
+.seg-ctl button:last-child{border-right:0}
+.seg-ctl button:hover{background:var(--surface-2);color:var(--text)}
+.seg-ctl button.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
+/* Refetch holds the previous render rather than flashing a skeleton. */
+.stale{opacity:.45;transition:opacity .18s var(--ease)}
+
+/* ============================================================================
+   The mark
+   ---------------------------------------------------------------------------
+   A sealed, layered pot: dum biryani, and a pool of accounts, in one shape. The
+   vessel takes currentColor so it sits on any surface; the lid and the layers
+   are the accent. Drawn in strokes at a 32 viewBox because it has to survive a
+   16px favicon — an emoji did not, and neither did anything with more detail.
+   ========================================================================= */
+.mark{width:26px;height:26px;flex:none;color:var(--text-2)}
+.brand .mark{color:var(--text-2)}
+.mark-lockup{display:flex;align-items:center;gap:9px}
+.mark-lockup b{font-size:15px;font-weight:650;letter-spacing:-.02em}
+.mark-lockup .mark{width:28px;height:28px}
+
+/* ============================================================================
+   Landing page
+   ---------------------------------------------------------------------------
+   The only thing an unauthenticated visitor sees, so it has to say what this is
+   before it asks for anything. Two columns on a desktop — the pitch, and the one
+   field that gets you in — stacking on a phone with the sign-in card first,
+   because someone on a phone already knows what they came for.
+   ========================================================================= */
+.lp{min-height:100vh;display:flex;flex-direction:column;
+  background:
+    radial-gradient(900px 420px at 82% -8%, var(--accent-soft), transparent 62%),
+    radial-gradient(700px 380px at 8% 108%, var(--surface-2), transparent 60%),
+    var(--bg)}
+.lp-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
+  padding:var(--s5) var(--s6);flex-wrap:wrap}
+.lp-addr{font-size:11.5px;color:var(--text-3)}
+.lp-addr:empty{display:none}
+
+.lp-main{flex:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);
+  gap:var(--s7);align-items:center;
+  padding:var(--s5) var(--s6) var(--s7);max-width:1180px;width:100%;margin:0 auto}
+@media(max-width:940px){
+  .lp-main{grid-template-columns:minmax(0,1fr);gap:var(--s6);align-items:start}
+  .lp-auth{order:-1}
+}
+
+.lp-eyebrow{display:inline-block;font-size:11px;font-weight:650;letter-spacing:.1em;
+  text-transform:uppercase;color:var(--accent);
+  background:var(--accent-soft);border-radius:99px;padding:5px 11px;margin-bottom:var(--s4)}
+.lp-hero h1{font-size:clamp(28px,4.4vw,42px);line-height:1.12;letter-spacing:-.03em;
+  margin-bottom:var(--s4)}
+.lp-lede{color:var(--text-2);font-size:15px;line-height:1.65;max-width:52ch}
+
+.lp-points{list-style:none;margin:var(--s6) 0 0;padding:0;
+  display:flex;flex-direction:column;gap:var(--s4)}
+.lp-points li{display:flex;gap:13px;align-items:flex-start}
+.lp-points svg{width:19px;height:19px;flex:none;color:var(--accent);margin-top:2px}
+.lp-points b{display:block;font-size:13.5px;font-weight:600;margin-bottom:3px}
+.lp-points span{color:var(--text-3);font-size:12.5px;line-height:1.6;display:block}
+
+.lp-auth .card{background:var(--surface)}
+.lp-auth h2{font-size:17px}
+.lp-sub{color:var(--text-3);font-size:12.5px;margin-top:5px;line-height:1.55}
+.lp-go{width:100%;justify-content:center;padding:10px}
+
+.lp-help{border-top:1px solid var(--border);padding-top:var(--s3);margin-top:var(--s1)}
+.lp-help summary{cursor:pointer;font-size:12px;color:var(--text-3);
+  list-style:none;display:flex;align-items:center;gap:6px}
+.lp-help summary::-webkit-details-marker{display:none}
+.lp-help summary::before{content:"+";font-family:var(--mono);color:var(--accent)}
+.lp-help[open] summary::before{content:"−"}
+.lp-help summary:hover{color:var(--text)}
+.lp-help p{color:var(--text-3);font-size:12px;line-height:1.65;margin:var(--s3) 0}
+
+.lp-foot{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
+  padding:var(--s4) var(--s6) var(--s5);border-top:1px solid var(--border);
+  font-size:11.5px;color:var(--text-3)}
+.lp-dot{opacity:.5}
+@media(max-width:640px){.lp-top,.lp-main,.lp-foot{padding-left:var(--s4);padding-right:var(--s4)}}
+.lp-endpoint{margin-top:var(--s6);max-width:52ch}
+.lp-endpoint-label{display:block;font-size:10.5px;font-weight:650;letter-spacing:.09em;
+  text-transform:uppercase;color:var(--text-3);margin-bottom:var(--s2)}
+.lp-endpoint .code{background:var(--surface);font-size:11.5px;line-height:1.9}
+
+/* ---- token source picker ---------------------------------------------------
+   Three ways a subscription account gets its token. A segmented control rather
+   than a dropdown because the choice carries a trade-off per option, and a
+   trade-off you have to open a menu to read is one nobody reads. */
+.seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s2)}
+.segb{text-align:left;border:1px solid var(--border);border-radius:var(--r-sm);
+  background:var(--surface-2);color:var(--text-2);padding:9px 11px;cursor:pointer;
+  font:inherit;font-size:12px;font-weight:600;transition:border-color .12s var(--ease)}
+.segb:hover{border-color:var(--border-strong);color:var(--text)}
+.segb.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
+.segt{display:block;font-weight:400;font-size:10.5px;color:var(--text-3);margin-top:3px}
+.segb.on .segt{color:var(--accent)}
+
+/* One found credentials file. The path is the point — picking the wrong profile
+   is the failure this whole panel exists to prevent — so it leads, in mono. */
+.pick{display:flex;gap:var(--s2);align-items:flex-start;padding:9px 11px;cursor:pointer;
+  border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2)}
+.pick:hover{border-color:var(--border-strong)}
+/* Never full width: these sit inside form blocks whose inputs stretch, and a
+   checkbox stretched to the row pushes its own label off the end. */
+.pick input{margin-top:3px;accent-color:var(--accent);width:auto;flex:none}
+.pickb{display:flex;flex-direction:column;gap:3px;min-width:0}
+.pickt{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-family:var(--mono);
+  font-size:11.5px;color:var(--text);word-break:break-all}
+.picks{font-size:11px;color:var(--text-3);line-height:1.5}
+
+/* ---- Efficiency ----------------------------------------------------------- */
+/* A verdict that needs acting on. Colour only, never colour alone: every one of
+   these sits beside the sentence saying what is wrong. */
+.warn{color:var(--crit-t)}
+
+/* The pace track carries a second mark — where spending *should* be by now — so
+   unlike the headroom meters it has to position a child and must not clip it.
+   Scope names are account ids rather than "req"/"in"/"out", so the label column
+   is wider than the 20px those get. */
+.pace .track{position:relative;overflow:visible}
+.pace .k{width:auto;min-width:72px;font-size:10.5px}
+.pace .v{width:48px}
+/* The target mark. Taller than the track so it reads as a threshold rather than
+   as part of the fill. */
+.pace .track b{position:absolute;top:-3px;bottom:-3px;border-radius:1px}