/* The guide lives in the product's own world: the graphite of the panel plate,
   the six lamp colours verbatim from StatusPalette.swift, Archivo for text and
   Fragment Mono for anything the app itself prints. One theme, on purpose: six
   lit colours on a dark ground is a board of lamps; six on a pale one is a
   spreadsheet. */
:root {
  --void:#0E0F12; --void-2:#121318; --plate:#191A1F; --plate-hi:#22242B; --well:#0A0B0E;
  --rule:rgba(233,236,242,.09); --rule-hi:rgba(233,236,242,.17);
  --ink:#E9ECF2; --ink-2:#A3A8B4; --ink-3:#737987; --ink-4:#4C515D;
  --awaiting:#FF731A; --ready:#33D96B; --working:#FABF29; --waiting:#6BA8FA; --red:#D93D3D; --rest:#9E9E9E;
  --claude:#D97857; --codex:#2ED4BF;
  --sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Fragment Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --side:270px;
  color-scheme:dark; scrollbar-color:#2C2F38 var(--void);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
::selection{background:rgba(255,115,26,.32);color:var(--ink)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#2C2F38;border-radius:6px;border:2px solid var(--void)}
::-webkit-scrollbar-track{background:var(--void)}
html{scroll-behavior:smooth;scroll-padding-top:2rem}
body{margin:0;background:var(--void);color:var(--ink);font-family:var(--sans);font-size:16px;
  line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--awaiting);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--void);padding:10px 14px;
  border-radius:0 0 6px 0;z-index:99}
.skip:focus{left:0}

/* ── the rail ─────────────────────────────────────────────────────────── */
.side{position:fixed;inset:0 auto 0 0;width:var(--side);padding:22px 18px 28px;overflow-y:auto;
  border-right:1px solid var(--rule);background:var(--void-2);display:flex;flex-direction:column;gap:14px}
.brand{display:flex;align-items:center;gap:9px;font-variation-settings:"wght" 700;letter-spacing:-.02em;
  font-size:15px;text-decoration:none}
.mark{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);gap:1.5px;
  width:15px;height:20px}
.mark i{border-radius:50%;width:100%;aspect-ratio:1;place-self:center}
.mark i.off{visibility:hidden}
.mark .m1{background:var(--awaiting)}.mark .m2{background:var(--ready)}.mark .m3{background:var(--working)}
.mark .m4{background:var(--waiting)}.mark .m5{background:var(--red);opacity:.6}.mark .m6{background:var(--red)}
.kicker{margin:0;font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-3);
  font-variation-settings:"wdth" 118,"wght" 600}
.find{width:100%;font:inherit;font-size:12.5px;color:var(--ink);background:var(--well);
  border:1px solid var(--rule-hi);border-radius:6px;padding:7px 10px}
.find::placeholder{color:var(--ink-4)}
.index{display:flex;flex-direction:column;gap:2px}
.grp{margin:14px 0 4px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);
  font-variation-settings:"wdth" 118,"wght" 600}
.index ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.index a{display:block;padding:5px 9px;border-radius:5px;font-size:13px;color:var(--ink-2);
  text-decoration:none;transition:color 120ms,background 120ms}
.index a:hover{color:var(--ink);background:rgba(233,236,242,.05)}
.index a[aria-current="page"]{color:var(--ink);background:rgba(255,115,26,.12);
  box-shadow:inset 2px 0 0 var(--awaiting)}
.back{margin:auto 0 0;font-size:12px}
.back a{color:var(--ink-4);text-decoration:none}
.back a:hover{color:var(--ink-2)}
.menubtn{display:none}

/* ── the page ─────────────────────────────────────────────────────────── */
.main{margin-left:var(--side);padding:clamp(2.4rem,5vw,4rem) clamp(1.2rem,4vw,3.4rem) 5rem}
.page{max-width:44rem;display:flex;flex-direction:column;gap:1.15rem}
.grp-tag{margin:0;font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-3);
  font-variation-settings:"wdth" 118,"wght" 600}
h1{margin:0;font-size:clamp(2rem,4vw,2.9rem);line-height:1.05;letter-spacing:-.025em;
  font-variation-settings:"wdth" 104,"wght" 700;text-wrap:balance}
h2{margin:1.6rem 0 0;font-size:1.32rem;line-height:1.25;letter-spacing:-.015em;
  font-variation-settings:"wght" 650;text-wrap:balance;scroll-margin-top:1.5rem}
h3{margin:.9rem 0 0;font-size:1.02rem;letter-spacing:-.01em;font-variation-settings:"wght" 650}
p{margin:0;color:var(--ink-2)}
.page > p, .page li{max-width:38rem}
.lede{font-size:1.12rem;line-height:1.5;color:var(--ink);text-wrap:pretty}
strong{color:var(--ink);font-variation-settings:"wght" 600}
em{font-style:italic}
code{font-family:var(--mono);font-size:.85em;color:var(--ink);background:rgba(233,236,242,.07);
  padding:.1em .36em;border-radius:3px}
a[href]{color:var(--ink);text-decoration-color:var(--ink-4);text-underline-offset:3px}
a[href]:hover{text-decoration-color:var(--awaiting)}
ul,ol{margin:0;padding-left:1.2rem;color:var(--ink-2);display:flex;flex-direction:column;gap:.45rem}
li::marker{color:var(--ink-4)}
pre{margin:0;font-family:var(--mono);font-size:12.5px;line-height:1.75;color:var(--ink);overflow-x:auto;
  padding:13px 15px;background:var(--well);border:1px solid var(--rule);border-radius:8px}
pre code{background:none;padding:0;font-size:inherit}
.note{border:1px solid var(--rule);border-left:2px solid rgba(255,115,26,.55);border-radius:0 8px 8px 0;
  padding:12px 15px;background:var(--void-2)}
.note p{font-size:14px;color:var(--ink-2)}
.tablewrap{overflow-x:auto;border:1px solid var(--rule);border-radius:9px;background:var(--void-2)}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{text-align:left;padding:9px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
thead th{font-size:11px;color:var(--ink-3);font-variation-settings:"wght" 600;white-space:nowrap;
  background:rgba(233,236,242,.02)}
tbody tr:last-child td{border-bottom:0}
td{color:var(--ink-2)}
td:first-child{color:var(--ink)}
.onthis{border:1px solid var(--rule);border-radius:9px;padding:12px 16px;background:var(--void-2)}
.onthis p{margin:0 0 6px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);
  font-variation-settings:"wdth" 118,"wght" 600}
.onthis ul{list-style:none;padding:0;gap:.3rem}
.onthis a{font-size:13.5px;color:var(--ink-2);text-decoration:none}
.onthis a:hover{color:var(--ink)}
.walk{display:flex;justify-content:space-between;gap:14px;margin-top:2.4rem;padding-top:1.4rem;
  border-top:1px solid var(--rule)}
.walk a{flex:1;max-width:19rem;text-decoration:none;border:1px solid var(--rule);border-radius:9px;
  padding:11px 14px;font-size:14px;color:var(--ink);transition:border-color 140ms,background 140ms}
.walk a:hover{border-color:var(--rule-hi);background:var(--void-2)}
.walk .next{text-align:right}
.walk span{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);
  font-variation-settings:"wdth" 118,"wght" 600;margin-bottom:2px}

/* ── the index ────────────────────────────────────────────────────────── */
.home .grpblock{display:flex;flex-direction:column;gap:.5rem;margin-top:1.6rem}
.home h2{margin:0}
.blurb{font-size:14px;color:var(--ink-3)}
.cards{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  gap:10px;margin-top:.5rem}
.cards a{display:flex;flex-direction:column;gap:3px;text-decoration:none;border:1px solid var(--rule);
  border-radius:9px;padding:13px 15px;background:var(--void-2);height:100%;
  transition:border-color 140ms,background 140ms}
.cards a:hover{border-color:var(--rule-hi);background:var(--plate)}
.cards b{font-size:14.5px;font-variation-settings:"wght" 650}
.cards span{font-size:12.5px;color:var(--ink-3);line-height:1.45}

/* ── the panel, drawn ─────────────────────────────────────────────────── */
.fig{margin:.6rem 0;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
figcaption{font-size:12.5px;color:var(--ink-3);line-height:1.5;max-width:34rem}
.panel{width:240px;flex:none;padding:8px;border-radius:12px;border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg,#25272E 0%,#1B1C22 40%,#15161B 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 24px 48px -18px rgba(0,0,0,.85),0 3px 10px rgba(0,0,0,.45)}
.panel.compact{width:35px}
.rows{display:flex;flex-direction:column;gap:2px}
.row{height:24px;display:grid;grid-template-columns:13px 16px minmax(0,1fr) auto 12px;align-items:center;
  gap:0 4px;padding:0 1px;border-radius:5px}
.row .name{grid-column:3;margin-left:3px;font-size:12.5px;font-variation-settings:"wght" 600;
  letter-spacing:-.008em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;gap:5px;min-width:0}
.row .name>span:first-child{overflow:hidden;text-overflow:ellipsis}
.row.dim .name{color:rgba(233,236,242,.62);font-variation-settings:"wght" 500}
.row .time{font-family:var(--mono);font-size:10.5px;color:rgba(233,236,242,.62);white-space:nowrap;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.row .badge{font-family:var(--mono);font-size:9px;line-height:1;padding:2px 4px;border-radius:3px;
  background:rgba(233,236,242,.14);color:rgba(233,236,242,.82);flex:none}
.panel.compact .row{grid-template-columns:13px;justify-content:center}
.panel.compact .row>:not(.lamp){display:none}
.lamp{display:inline-block;width:13px;height:13px;border-radius:50%;position:relative;justify-self:center;vertical-align:middle;background:var(--red)}
/* at rest: a grey ring, an empty place rather than a faint fault (1.1) */
.lamp[data-s="idle"]{background:transparent;box-shadow:inset 0 0 0 2px var(--rest);opacity:.75}
.lamp[data-s="failed"]{box-shadow:0 0 6px rgba(217,61,61,.8)}
.lamp[data-s="working"]{background:var(--working);box-shadow:0 0 3px rgba(250,191,41,.8)}
.lamp[data-s="waiting"]{background:var(--waiting);box-shadow:0 0 3px rgba(107,168,250,.8)}
.lamp[data-s="ready"]{background:var(--ready);box-shadow:0 0 6px rgba(51,217,107,.8)}
.lamp[data-s="awaiting"]{background:var(--awaiting);box-shadow:0 0 6px rgba(255,115,26,.85)}
.lamp[data-s="awaiting"]:not(.calm){animation:blink 1.05s ease-in-out infinite alternate}
.lamp.listening::after{content:"";position:absolute;inset:0;border-radius:50%;border:2.5px solid var(--waiting)}
@keyframes blink{from{opacity:1}to{opacity:.25}}
@media (prefers-reduced-motion:reduce){
  .lamp[data-s="awaiting"]:not(.calm){animation:none;box-shadow:0 0 0 3px rgba(255,115,26,.3),0 0 8px rgba(255,115,26,.9)}
  html{scroll-behavior:auto}
}
.ring{width:16px;height:16px;display:block;justify-self:center}
.ring text{font-family:var(--sans);font-variation-settings:"wght" 700}
.grip{display:flex;flex-direction:column;gap:2px;justify-self:center}
.grip i{display:block;width:9px;height:1.5px;border-radius:1px;background:rgba(233,236,242,.46)}
.grip[data-a="claude"] i{background:rgba(217,120,87,.85)}
.grip[data-a="codex"] i{background:var(--codex)}
.block{border-radius:7px;background:rgba(0,0,0,.39);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;
  padding:0 0 3px;position:relative;margin-top:1px}
.block::before{content:"";position:absolute;left:3px;top:26px;bottom:6px;width:1.5px;
  background:rgba(233,236,242,.18);border-radius:1px}
.row.sub{height:22px;padding-left:9px}
.row.sub .name{font-size:11px;font-variation-settings:"wght" 400;color:rgba(233,236,242,.85)}
.panel-foot{margin-top:6px;border-top:1px solid rgba(233,236,242,.10);height:24px;display:flex;
  align-items:center;justify-content:space-between;padding:0 3px}
.panel-foot .left,.panel-foot .right{display:flex;gap:8px;align-items:center}
/* the home control: a small bar with an arrow rising out of it, which is what
   the app draws with `menubar.arrow.up.rectangle` */
.ico-home{position:relative;width:12px;height:12px}
.ico-home::before{content:"";position:absolute;left:0;right:0;top:5px;height:6px;
  border:1px solid rgba(233,236,242,.55);border-radius:2px}
.ico-home::after{content:"";position:absolute;left:4.5px;top:0;width:3px;height:4px;
  background:rgba(233,236,242,.55);clip-path:polygon(50% 0,100% 100%,0 100%)}
.ico{font-size:12px;color:rgba(233,236,242,.55);line-height:1}
.ico-hub{font-size:9px;letter-spacing:.04em;text-transform:uppercase;font-family:'Fragment Mono',monospace;border:1px solid rgba(233,236,242,.22);border-radius:4px;padding:2px 4px;line-height:1}

/* card, menu, legend */
.card{width:272px;background:#14151A;border:1px solid var(--rule-hi);border-radius:9px;padding:11px 12px;
  box-shadow:0 18px 44px -14px rgba(0,0,0,.9);font-size:11.5px;line-height:1.45;color:var(--ink-2);
  display:flex;flex-direction:column;gap:7px}
.card .h{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.card .n{font-size:13px;font-variation-settings:"wght" 650;color:var(--ink);letter-spacing:-.01em}
.card .s{font-family:var(--mono);font-size:10px;letter-spacing:.08em}
.card dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 12px}
.card dt{font-size:10px;font-variation-settings:"wdth" 118,"wght" 600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-4);white-space:nowrap}
.card dd{margin:0;font-family:var(--mono);font-size:10.5px;color:var(--ink-2);overflow-wrap:anywhere}
.card .limit{font-style:italic;font-size:11.5px;color:var(--ink-3);border-top:1px solid var(--rule);
  padding-top:7px;margin:0}
.menu{width:250px;background:#14151A;border:1px solid var(--rule-hi);border-radius:9px;padding:5px;
  box-shadow:0 18px 44px -14px rgba(0,0,0,.9)}
.menu button{display:block;width:100%;text-align:left;padding:6px 9px;border-radius:5px;font:inherit;
  font-size:12px;color:var(--ink);background:none;border:0}
.menu hr{border:0;border-top:1px solid var(--rule);margin:4px 2px}
.legendpop{background:#14151A;border:1px solid var(--rule-hi);border-radius:9px;padding:10px 12px;
  box-shadow:0 18px 44px -14px rgba(0,0,0,.9);display:flex;flex-direction:column;gap:6px;min-width:220px}
.legendpop .lg{display:grid;grid-template-columns:12px 1fr auto;gap:10px;align-items:center}
.legendpop .k{font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.legendpop .v{font-family:var(--mono);font-size:10.5px;color:var(--ink);font-variant-numeric:tabular-nums}

/* figure variants */
.anatomy{flex-direction:row;flex-wrap:wrap;gap:22px;align-items:flex-start}
.cells{list-style:none;padding:0;counter-reset:c;font-size:13.5px;gap:.5rem;max-width:22rem}
.cells li{position:relative;padding-left:26px;color:var(--ink-2);line-height:1.5}
.cells li::before{counter-increment:c;content:counter(c);position:absolute;left:0;top:3px;
  font-family:var(--mono);font-size:10px;color:var(--ink-4);border:1px solid var(--rule-hi);
  border-radius:50%;width:17px;height:17px;display:grid;place-items:center}
.cells b{color:var(--ink);font-variation-settings:"wght" 600}
.lamps{border-collapse:collapse;font-size:14px;width:auto}
.lamps td{border:0;padding:5px 14px 5px 0}
.lamps td.c{width:22px;padding-right:4px}
.lamps .mono{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.rings{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:16px;max-width:38rem}
.rings li{display:flex;gap:12px;align-items:flex-start}
.rings .ringbig{flex:none;display:block;width:44px}
.rings .ringbig .ring{width:44px;height:44px}
.rings b{color:var(--ink);font-size:13.5px;font-variation-settings:"wght" 650}
.rings p{font-size:12.5px;line-height:1.45;margin-top:2px}

@media (max-width:900px){
  .menubtn{display:block;position:fixed;top:12px;left:12px;z-index:40;font:inherit;font-size:12px;
    color:var(--ink);background:var(--plate);border:1px solid var(--rule-hi);border-radius:6px;
    padding:7px 12px;cursor:pointer}
  .side{transform:translateX(-100%);transition:transform 200ms ease;z-index:30;width:min(86vw,300px)}
  .side.open{transform:none}
  .main{margin-left:0;padding-top:4.2rem}
  .anatomy{flex-direction:column}
}

/* the bar above the rows: what waits, counted, and LampMaster's star (1.1) */
.pbar{display:flex;align-items:center;gap:6px;height:24px;margin:0 0 6px;padding:0 7px;border-radius:6px;
  background:rgba(0,0,0,.28);box-shadow:0 0 0 1px rgba(255,255,255,.07) inset;font-size:10.5px;color:var(--ink-3)}
.pbar .q{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbar .k{font-family:var(--mono);font-size:9.5px;color:var(--ink-4)}
.pbar .star{font-size:11px;color:rgba(233,236,242,.35)}
/* a permission the panel holds, opened under its own row */
.ask{display:flex;align-items:center;gap:6px;height:22px;margin:0 0 2px 18px;font-size:10.5px;color:rgba(233,236,242,.75)}
.ask .t{flex:1;min-width:0;font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ask .h{color:var(--awaiting);font-size:9px}
.ask .w{color:var(--red);font-size:9px}
.ask b{font:inherit;font-size:10px;padding:1px 7px;border-radius:4px;background:rgba(233,236,242,.10);
  border:1px solid rgba(233,236,242,.14);color:var(--ink);font-weight:500}
.ask b.go{background:rgba(255,115,26,.32);border-color:rgba(255,115,26,.55)}
/* the line twelve hours at rest folds a row into */
.fold{display:flex;align-items:center;gap:8px;height:22px;padding:0 1px;font-size:11px;color:rgba(233,236,242,.55);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-top:1px solid rgba(233,236,242,.06);margin-top:3px}
.fold .lamp{width:11px;height:11px;flex:none}
.fold span{min-width:0;overflow:hidden;text-overflow:ellipsis}