/* ============================================================
   Guild OS — production stylesheet.
   Shell = D (command deck). Card page = A (receipt + steps).
   Live layer = C (island, in-place expand, five-state enum).
   Tokens copied verbatim from os/mock/home.src.html + v2 mocks.
   Self-hosted fonts, no external requests, strict CSP compatible.
   ============================================================ */

/* ---------- self-hosted fonts ---------- */
@font-face{
  font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;
}
@font-face{
  font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;
}
@font-face{
  font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;
}
@font-face{
  font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F;
}
@font-face{
  font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/ibm-plex-sans-arabic-latin-500-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F;
}
@font-face{
  font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F;
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2");
}
@font-face{
  font-family:"Alexandria Variable";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/fonts/alexandria-arabic-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;
}
@font-face{
  font-family:"Alexandria Variable";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/fonts/alexandria-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F;
}

/* ===== token block — copied verbatim from os/mock/home.src.html ===== */
:root{
  --canvas-1:251 249 244; --canvas-2:253 251 247; --canvas-3:245 241 232;
  --ink-1:15 23 42; --ink-2:71 85 105; --ink-3:96 110 132; --ink-4:203 213 225;
  --line-1:226 232 240; --line-2:241 245 249;
  --beacon:255 90 54; --compass:217 119 6; --horizon:8 145 178; --fathom:79 70 229; --tide:22 163 74;
  --card:255 255 255;

  --ataya:90 71 57; --ataya-paper:237 227 211; --ataya-brass:176 125 58;
  --bashra:19 122 107; --bashra-mint:221 242 236; --bashra-rose:214 104 131;
  --vps:79 70 229;

  --bg:var(--canvas-1); --surface:var(--card); --sunk:var(--canvas-3);
  --fg:var(--ink-1); --fg-2:var(--ink-2); --fg-3:var(--ink-3); --fg-4:var(--ink-4);
  --line:var(--line-1);
  --needs:var(--compass);    /* waits on Kariem */
  --ok:var(--tide);          /* observed good */
  --bad:var(--beacon);       /* observed bad, and the orchestrator's spend */
  --info:var(--horizon);     /* workers */
  --code:var(--fathom);

  --r-1:10px; --r-2:16px; --r-3:22px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:28px;
  --display:"Alexandria Variable","IBM Plex Sans Arabic",system-ui,sans-serif;
  --sans:"IBM Plex Sans Arabic",ui-sans-serif,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --lh-ar:1.7; --lh-lat:1.45;
  --ease:cubic-bezier(.2,.8,.2,1);
  --tap:44px;
  color-scheme:light;
}
.dark{
  --canvas-1:15 16 26; --canvas-2:19 21 33; --canvas-3:26 28 43;
  --ink-1:238 234 226; --ink-2:190 188 200; --ink-3:142 142 162; --ink-4:88 90 114;
  --line-1:44 47 68; --line-2:36 39 58;
  --beacon:255 128 98; --compass:242 196 96; --horizon:110 206 222; --fathom:160 164 250; --tide:120 214 156;
  --card:22 24 37;
  --ataya:205 191 170; --ataya-paper:42 31 24;
  --bashra:61 170 150; --bashra-mint:16 38 46;
  --vps:160 164 250;
  color-scheme:dark;
}
/* brand kits — verbatim triples from src/brands/<id>/tokens.css */
:root{
  --k-ataya:90 71 57; --k-ataya-accent:184 146 58; --k-ataya-bg:237 227 211;
  --k-bashra:19 122 107; --k-bashra-accent:214 104 131; --k-bashra-bg:221 242 236;
  --k-geolink:0 180 216; --k-geolink-accent:26 95 122; --k-geolink-bg:224 247 250;
  --k-hvar:212 53 51; --k-hvar-accent:255 107 82; --k-hvar-bg:247 242 236;
}
.dark{
  --k-ataya:205 191 170; --k-ataya-accent:196 150 90; --k-ataya-bg:42 31 24;
  --k-bashra:61 170 150; --k-bashra-accent:224 138 163; --k-bashra-bg:16 38 46;
  --k-geolink:45 212 191; --k-geolink-accent:110 206 222; --k-geolink-bg:11 33 41;
  --k-hvar:255 107 82; --k-hvar-accent:232 85 46; --k-hvar-bg:22 17 15;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{background:rgb(var(--bg));color:rgb(var(--fg));overflow-x:clip;max-width:100vw}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font:14px/var(--lh-ar) var(--sans);-webkit-font-smoothing:antialiased;min-height:100dvh;
  padding-bottom:calc(60px + env(safe-area-inset-bottom));-webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:contain}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
:focus-visible{outline:2px solid rgb(var(--info));outline-offset:2px;border-radius:4px}
.mono,bdi{font-family:var(--mono);font-feature-settings:"tnum";line-height:var(--lh-lat);unicode-bidi:isolate;direction:ltr}
.num{font-family:var(--mono);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:start}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;inset-inline-start:8px;top:-60px;z-index:99;background:rgb(var(--surface));padding:8px 12px;border-radius:8px;width:auto;height:auto;overflow:visible;clip:auto}
.skip:focus{top:8px}

/* ============================================================
   LOCK / SETUP — from v1 home.src.html, verbatim PIN pad
   ============================================================ */
.rose{display:block}
.rose .lit{fill:rgb(var(--beacon))}
.rose .shd{fill:rgb(var(--fg))}
.rose .hub{fill:rgb(var(--bg))}

#lock,#setup{position:fixed;inset:0;z-index:50;background:rgb(var(--bg));display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:var(--s-5);padding:env(safe-area-inset-top) 24px env(safe-area-inset-bottom)}
#lock h1,#setup h1{font:600 20px/1.3 var(--display)}
.locksub{color:rgb(var(--fg-3));font-size:13px;text-align:center}
.dots{display:flex;gap:14px;direction:ltr}
.dots i{width:13px;height:13px;border-radius:50%;border:1.5px solid rgb(var(--fg-3));transition:all .15s}
.dots i.on{background:rgb(var(--fg));border-color:rgb(var(--fg));transform:scale(1.1)}
.dots.err i{border-color:rgb(var(--bad))}
.dots.err i.on{background:rgb(var(--bad));border-color:rgb(var(--bad))}
.pad{display:grid;grid-template-columns:repeat(3,76px);gap:16px;direction:ltr}
.pad button,.pad span{height:76px;border-radius:50%;font:500 26px var(--display);background:rgb(var(--sunk));transition:transform .08s,background .15s;
  display:flex;align-items:center;justify-content:center;min-height:44px}
.pad button:active{transform:scale(.94);background:rgb(var(--line))}
.pad .ghost{background:none;font:500 13px var(--sans);color:rgb(var(--fg-2))}
.lockmeta{font-size:12px;color:rgb(var(--fg-3));display:flex;gap:6px;align-items:center;min-height:1.4em}
.lockmeta.err{color:rgb(var(--bad))}

/* ============================================================
   SHELL (D · command deck)
   ============================================================ */
.wrap{max-width:1280px;margin:0 auto;display:grid;overflow-x:clip}
.wrap > div{min-width:0}
@media(min-width:900px){.wrap{grid-template-columns:260px 1fr}}
@media(min-width:1440px){.wrap{max-width:1520px;grid-template-columns:280px 1fr}}

.side{display:none;border-inline-end:1px solid rgb(var(--line));padding:var(--s-4);position:sticky;top:0;height:100dvh;overflow:auto;flex-direction:column}
@media(min-width:900px){.side{display:flex;gap:var(--s-2)}}
.side .brand{font:700 16px var(--display);letter-spacing:-0.01em;padding:var(--s-2) var(--s-1) var(--s-4);display:flex;align-items:center;gap:8px}
.side .brand::before{content:"";width:8px;height:8px;border-radius:50%;background:rgb(var(--beacon));flex:none;box-shadow:0 0 0 3px rgb(var(--beacon)/.18)}
.side .brand-txt{display:block}
.side .brand small{display:block;font:400 11px var(--mono);color:rgb(var(--fg-3));margin-top:2px;letter-spacing:.02em}
.side nav button{display:flex;align-items:center;gap:10px;height:40px;padding:0 10px;border-radius:var(--r-1);width:100%;font-size:13px;color:rgb(var(--fg-2))}
.side nav button.active{background:rgb(var(--sunk));color:rgb(var(--fg))}
.side nav button .k{margin-inline-start:auto;font-family:var(--mono);font-size:11px;color:rgb(var(--fg-3));border:1px solid rgb(var(--line));border-radius:4px;padding:1px 5px}
.side .health{margin-top:auto;font-size:11px;color:rgb(var(--fg-3));padding:var(--s-2);border-top:1px solid rgb(var(--line))}
.side .health button{width:100%;color:rgb(var(--fg-3))}
.lockbtn{margin-top:var(--s-2);height:40px;border-radius:var(--r-1);font-size:12px;color:rgb(var(--bad));border:1px solid rgb(var(--line))}

.cmdbar{position:sticky;top:0;z-index:20;background:rgb(var(--bg)/.92);backdrop-filter:blur(10px);border-bottom:1px solid rgb(var(--line));padding:var(--s-3) var(--s-4)}
.cmdbar-inner{max-width:900px;margin-inline:auto;padding-inline:0}
.cmdrow{display:flex;align-items:center;gap:10px;height:44px;padding:0 12px;border-radius:var(--r-1);background:rgb(var(--sunk));border:1px solid rgb(var(--line));min-width:0}
.cmdrow svg{flex:none;color:rgb(var(--fg-3))}
.cmdrow input{min-width:0;flex:1;background:none;border:0;font:14px/1 var(--mono);color:rgb(var(--fg));direction:rtl;text-align:start}
.cmdrow input::placeholder{color:rgb(var(--fg-3));font-family:var(--sans)}
.cmdrow .kbd{font:500 11px var(--mono);color:rgb(var(--fg-3));border:1px solid rgb(var(--line));border-radius:5px;padding:2px 6px;flex:none}
.livepill{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:rgb(var(--fg-3));flex:none;padding-inline-start:6px}
.livepill .pulse{width:7px;height:7px;border-radius:50%;background:rgb(var(--ok));position:relative;flex:none}
.livepill .pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid rgb(var(--ok));animation:ping 2.2s var(--ease) infinite}
.livepill.stale .pulse{background:rgb(var(--fg-3))}
.livepill.stale .pulse::after{display:none}
@keyframes ping{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(1.8)}}
.results{margin-top:var(--s-2);border:1px solid rgb(var(--line));border-radius:var(--r-2);overflow:hidden;display:none;max-height:60vh;overflow-y:auto}
.results.show{display:block}
.rrow{display:flex;align-items:center;gap:10px;height:42px;padding:0 var(--s-3);border-bottom:1px solid rgb(var(--line));font-size:13px}
.rrow:last-child{border-bottom:0}
.rrow:hover,.rrow:focus-visible{background:rgb(var(--sunk))}
.rrow .tag{font:500 10px var(--mono);color:rgb(var(--fg-3));border:1px solid rgb(var(--line));border-radius:4px;padding:1px 5px;flex:none}
.rrow .t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rrow .a{flex:none;font:500 11px var(--mono);color:rgb(var(--fg-3))}
.empty-hint{padding:var(--s-3);font-size:12px;color:rgb(var(--fg-3));text-align:center}

main{padding:var(--s-4);max-width:900px;margin:0 auto;width:100%;min-width:0}
@media(min-width:1280px){main{max-width:1240px;padding:var(--s-5) var(--s-6)}}
.screen{display:none}
.screen.active{display:block;animation:fade .18s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.screen.active{animation:none}}
section{margin-top:var(--s-5)}
section:first-child{margin-top:var(--s-3)}
.h{display:flex;align-items:center;gap:8px;margin-bottom:var(--s-2)}
.h h2{font:600 13px var(--display);text-transform:uppercase;letter-spacing:.04em;color:rgb(var(--fg-2))}
.h .c{font:500 11px var(--mono);color:rgb(var(--fg-3))}
.h .acc{color:rgb(var(--needs))}

/* dense rows */
.stack{border:1px solid rgb(var(--line));border-radius:var(--r-2);overflow:hidden;background:rgb(var(--surface));min-width:0}
.home-row{display:block}
@media(min-width:900px){
  .home-row{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--s-4);align-items:start}
  .home-col-side .metrics{grid-template-columns:1fr}
  .home-col-side .h{margin-top:0}
}
.qrow{display:flex;align-items:center;gap:10px;min-height:42px;padding:8px var(--s-3);border-bottom:1px solid rgb(var(--line));min-width:0}
.qrow:last-child{border-bottom:0}
.qrow .dot{flex:none;width:7px;height:7px;border-radius:50%;background:rgb(var(--needs))}
.qrow .body{flex:1 1 0%;min-width:0}
.qrow .p{font:500 11px var(--mono);color:rgb(var(--needs));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qrow .txt{font-size:13px;color:rgb(var(--fg));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.qrow .t{font-size:10px;color:rgb(var(--fg-3));font-family:var(--mono)}
.badges{display:flex;gap:6px;flex:none}
.kbtn{font:500 11px var(--mono);border:1px solid rgb(var(--line));border-radius:6px;padding:5px 8px;display:inline-flex;align-items:center;gap:5px;min-height:32px;color:rgb(var(--fg-2))}
.kbtn:hover{background:rgb(var(--sunk));color:rgb(var(--fg))}
.kbtn.needs{border-color:rgb(var(--needs)/.5);color:rgb(var(--needs))}
.revrow .glyph{flex:none;width:14px;height:14px;color:rgb(var(--info));display:inline-block}

/* metric strip */
.metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2)}
@media(min-width:640px){.metrics{grid-template-columns:repeat(4,1fr)}}
.metric{border:1px solid rgb(var(--line));border-radius:var(--r-2);padding:10px 12px;background:rgb(var(--surface));min-width:0}
.metric .l{font-size:10.5px;color:rgb(var(--fg-3));text-transform:uppercase;letter-spacing:.03em}
.metric .v{font:600 20px/1.3 var(--mono);margin-top:3px;direction:ltr;text-align:start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.metric .v small{font-size:11px;font-weight:400;color:rgb(var(--fg-3))}
.metric .track{height:8px;border-radius:5px;overflow:hidden;display:flex;background:rgb(var(--sunk));margin-top:8px;direction:ltr}
.metric .o{background:rgb(var(--bad));background-image:repeating-linear-gradient(135deg,transparent 0 5px,rgb(0 0 0/.15) 5px 7px)}
.metric .w{background:rgb(var(--info))}
.metric .legend{display:flex;gap:10px;margin-top:6px;font-size:10px;color:rgb(var(--fg-3))}
.metric .legend b{display:inline-block;width:7px;height:7px;border-radius:2px;margin-inline-end:3px;vertical-align:middle}

/* ============================================================
   ISLAND (C · running-cards strip; shown only while something runs)
   ============================================================ */
.island-wrap{margin-bottom:var(--s-4)}
.island-scroll{display:flex;gap:var(--s-2);overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.island-scroll::-webkit-scrollbar{display:none}
.pill{flex:0 0 auto;display:flex;align-items:center;gap:var(--s-2);background:rgb(var(--surface));
  border:1px solid rgb(var(--line));border-radius:999px;padding:7px var(--s-3) 7px 7px;min-height:var(--tap);
  transition:transform .15s var(--ease);box-shadow:0 1px 3px rgb(0 0 0/.04)}
.pill:active{transform:scale(.97)}
.pill .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:600 12px var(--display);
  background:rgb(var(--sunk));color:rgb(var(--fg-2));flex:0 0 auto;position:relative}
.pill .av::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid rgb(var(--info));
  animation:pulse-ring 1.8s var(--ease) infinite}
@keyframes pulse-ring{0%{opacity:.9;transform:scale(.9)}70%{opacity:0;transform:scale(1.18)}100%{opacity:0}}
.pill .meta{display:flex;flex-direction:column;gap:1px;line-height:1.25}
.pill .p-title{font-size:12px;font-weight:600;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill .p-timer{font-family:var(--mono);font-size:11px;color:rgb(var(--info));direction:ltr;unicode-bidi:isolate}

/* status enum — five states, glyph + colour, never colour alone */
.stat{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;white-space:nowrap}
.stat .g{width:13px;height:13px;flex:0 0 auto;display:grid;place-items:center}
.stat.running .g{color:rgb(var(--info));animation:blink 1.6s ease-in-out infinite}
.stat.needs_input .g{color:rgb(var(--needs))}
.stat.needs_approval .g{color:rgb(var(--needs))}
.stat.done .g{color:rgb(var(--ok))}
.stat.failed .g{color:rgb(var(--bad))}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}

/* in-place expand rows (C) — used for project card-tree */
.plist{border:1px solid rgb(var(--line));border-radius:var(--r-2);overflow:hidden}
@media(min-width:1000px){
  .plist{display:grid;grid-template-columns:1fr 1fr;border:0;border-radius:0;gap:var(--s-3);background:none}
  .plist .prow{border:1px solid rgb(var(--line));border-radius:var(--r-2);background:rgb(var(--surface))}
}
.prow{border-bottom:1px solid rgb(var(--line))}
.prow:last-child{border-bottom:0}
.phead{display:flex;align-items:center;gap:10px;padding:10px var(--s-3);cursor:pointer;min-height:44px;min-width:0;flex-wrap:wrap}
.phead:hover{background:rgb(var(--sunk))}
.swatch{flex:none;width:22px;height:22px;border-radius:6px}
.swatch.default{display:grid;place-items:center;font-size:11px;font-weight:600;background:rgb(var(--sunk));color:rgb(var(--fg-3))}
.phead .name{font:600 13px var(--mono);flex:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.phead .at{color:rgb(var(--fg-3))}
.phead .path{flex:1 1 100%;order:5;font:12px var(--mono);color:rgb(var(--fg-3));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.phead .states{flex:1 1 auto;display:flex;gap:6px;font:11px var(--mono);flex-wrap:wrap;justify-content:flex-end;min-width:0}
@media(min-width:520px){.phead{flex-wrap:nowrap}.phead .path{flex:1 1 auto;order:0}.phead .states{flex:none}}
.st{padding:1px 6px;border-radius:4px;background:rgb(var(--sunk));color:rgb(var(--fg-2))}
.phead .chev{flex:none;transition:transform .18s var(--ease);color:rgb(var(--fg-3))}
.prow.open .chev{transform:rotate(90deg)}
.ctree{display:none;padding:0 var(--s-3) var(--s-3)}
.prow.open .ctree{display:block}

/* card row inside project tree — expands in place */
.crow{border-top:1px solid rgb(var(--line-2))}
.crow:first-child{border-top:0}
.crow-head{display:flex;align-items:center;gap:8px;padding:7px 0 7px 22px;font-size:12.5px;cursor:pointer;min-width:0;width:100%}
.crow-head:hover{color:rgb(var(--info))}
.crow-head .ct{flex:1 1 0%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.crow-head .cid{flex:none;font-family:var(--mono);color:rgb(var(--fg-3));font-size:11px}
.crow-head .cost{flex:none;font-family:var(--mono);color:rgb(var(--fg-2));font-size:11px}
.crow-head .chev{flex:none;width:12px;height:12px;transition:transform .18s var(--ease);color:rgb(var(--fg-3))}
.crow.open .crow-head .chev{transform:rotate(90deg)}
.crow-body{display:none;padding:0 var(--s-3) var(--s-3) 34px}
.crow.open .crow-body{display:block}

/* running row (home) */
.runrow{display:flex;align-items:center;gap:10px;padding:8px var(--s-3);border-bottom:1px solid rgb(var(--line));min-width:0}
.runrow>div{min-width:0}
.runrow:last-child{border-bottom:0}
.runrow .pulse{flex:none;width:7px;height:7px;border-radius:50%;background:rgb(var(--ok));position:relative}
.runrow .pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid rgb(var(--ok));animation:ping 2.2s var(--ease) infinite}

/* ============================================================
   CARD PAGE (A · receipt then six unfolding steps)
   ============================================================ */
.receiptcard{background:rgb(var(--surface));border:1px solid rgb(var(--line));border-radius:var(--r-2);padding:var(--s-4);margin-bottom:var(--s-5)}
.card-cols{display:block}
@media(min-width:1000px){
  .card-cols{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--s-4);align-items:start}
  .card-col-side .receiptcard{max-height:70vh;overflow:auto}
}
.rc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-3);margin-top:var(--s-3)}
@media (min-width:520px){.rc-grid{grid-template-columns:repeat(4,1fr)}}
.rc-grid .cell{background:rgb(var(--sunk));border-radius:10px;padding:10px 12px}
.rc-grid .cell b{display:block;font:600 16px var(--mono)}
.rc-grid .cell span{font-size:11px;color:rgb(var(--fg-3))}
.chip{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap}
.chip.needs{background:rgb(var(--needs)/.16);color:rgb(var(--needs))}
.chip.ok{background:rgb(var(--ok)/.16);color:rgb(var(--ok))}
.chip.bad{background:rgb(var(--bad)/.16);color:rgb(var(--bad))}
.chip.info{background:rgb(var(--info)/.16);color:rgb(var(--info))}
.chip.neutral{background:rgb(var(--sunk));color:rgb(var(--fg-2))}
.cmd{display:flex;align-items:center;gap:8px;background:rgb(var(--sunk));border-radius:10px;padding:0 4px 0 10px;height:36px;font:12px var(--mono);
  overflow:hidden;flex:1;min-width:0;margin-top:var(--s-3)}
.cmd span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.cmd button{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;flex:none}
.cmd .kbtn{width:auto;display:inline-flex;padding:0 8px;min-height:30px;height:30px;white-space:nowrap}
.cmd button:active{background:rgb(var(--line))}
.backrow{display:flex;align-items:center;gap:8px;margin-bottom:var(--s-3);font-size:12.5px;color:rgb(var(--fg-3))}

.steps{list-style:none}
.step{border:1px solid rgb(var(--line));border-radius:var(--r-2);margin-bottom:8px;overflow:hidden;background:rgb(var(--surface))}
.step .shead{display:flex;align-items:center;gap:10px;padding:12px var(--s-4);cursor:pointer;width:100%}
.stepicon{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none}
.stepicon.ok{background:rgb(var(--ok)/.18);color:rgb(var(--ok))}
.stepicon.bad{background:rgb(var(--bad)/.18);color:rgb(var(--bad))}
.stepicon.pending{background:rgb(var(--sunk));color:rgb(var(--fg-3));border:1.5px dashed rgb(var(--fg-4))}
.stepicon svg{width:13px;height:13px}
.step .stitle{flex:1;font-size:13.5px;font-weight:600}
.step .swhen{font-size:11.5px;color:rgb(var(--fg-3));font-family:var(--mono)}
.step .chev{width:16px;height:16px;transition:transform .15s var(--ease);color:rgb(var(--fg-3))}
.step.open .chev{transform:rotate(90deg)}
.step .sbody{max-height:0;overflow:hidden;transition:max-height .2s var(--ease)}
.step.open .sbody{max-height:600px}
.sbody-in{padding:0 var(--s-4) var(--s-4);border-top:1px dashed rgb(var(--line))}
.raw{display:flex;gap:10px;padding:7px 0;font-size:12.5px;align-items:flex-start}
.raw .k{width:8px;height:8px;border-radius:50%;margin-top:5px;flex:none}
.raw .k.claim{background:transparent;border:1.5px dashed rgb(var(--info))}
.raw .k.observation{background:rgb(var(--fg-2))}
.raw .k.decision{width:8px;height:8px;transform:rotate(45deg);border-radius:2px;background:rgb(var(--needs))}
.raw .tx{flex:1}
.raw .tx .w{font-weight:600}
.raw .tx .a{color:rgb(var(--fg-3));font-size:11.5px}
.raw .tm{font:11px var(--mono);color:rgb(var(--fg-3));flex:none}
.empty{padding:12px 0;text-align:center;color:rgb(var(--fg-3));font-size:12.5px}
.emptynote{padding:var(--s-4);text-align:center;color:rgb(var(--fg-3));font-size:12.5px}

/* ============================================================
   TODAY (A · 24h dial, one ring per project)
   ============================================================ */
.dialwrap{background:rgb(var(--surface));border:1px solid rgb(var(--line));border-radius:var(--r-3);padding:var(--s-4);margin-bottom:var(--s-5)}
.dial{width:100%;height:auto;display:block;max-width:420px;margin:0 auto}
.dial .face{fill:none;stroke:rgb(var(--line))}
.dial .gd{fill:none;stroke:rgb(var(--line-2))}
.dial .tk.maj{stroke:rgb(var(--fg-3));stroke-width:1.6}
.dial text.hl{font:10px var(--mono);fill:rgb(var(--fg-3));text-anchor:middle;dominant-baseline:middle}
.dial .mk{cursor:pointer}
.swatch.b-ataya,.pill .av.b-ataya{background:rgb(var(--k-ataya-bg));color:rgb(var(--k-ataya))}
.swatch.b-bashra,.pill .av.b-bashra{background:rgb(var(--k-bashra-bg));color:rgb(var(--k-bashra))}
.swatch.b-geolink,.pill .av.b-geolink{background:rgb(var(--k-geolink-bg));color:rgb(var(--k-geolink))}
.swatch.b-hvar,.pill .av.b-hvar{background:rgb(var(--k-hvar-bg));color:rgb(var(--k-hvar))}
.swatch.default{display:grid;place-items:center;font-size:11px;font-weight:600;background:rgb(var(--sunk));color:rgb(var(--fg-3))}

/* ring legend dot colours per brand (dial + legend) — static classes, matches swatch */
.rings2 button.b-ataya i,.dial .mk.b-ataya{color:rgb(var(--k-ataya))}
.rings2 button.b-bashra i,.dial .mk.b-bashra{color:rgb(var(--k-bashra))}
.rings2 button.b-geolink i,.dial .mk.b-geolink{color:rgb(var(--k-geolink))}
.rings2 button.b-hvar i,.dial .mk.b-hvar{color:rgb(var(--k-hvar))}
.rings2 button.b-default i,.dial .mk.b-default{color:rgb(var(--fg-3))}
.rings2{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;margin-top:var(--s-4)}
.rings2 button{display:flex;align-items:center;gap:8px;height:40px;padding:0 10px;border-radius:10px;border:1px solid rgb(var(--line));text-align:start}
.rings2 button i{width:10px;height:10px;border-radius:50%;flex:none;background:currentColor}
.rings2 button b{font-size:12.5px;font-weight:600}
.dial circle.mk{fill:rgb(var(--surface));stroke:currentColor;stroke-width:1.6}
.dial polygon.mk{fill:currentColor}
.dial .mk.dashed{fill:none;stroke:currentColor;stroke-width:1.4;stroke-dasharray:2 2}

/* legend swatches for orchestrator/worker split (static colour classes, no inline style) */
.sw-bad{background:rgb(var(--bad))}
.sw-info{background:rgb(var(--info))}
.v-bad{color:rgb(var(--bad))}
.v-info{color:rgb(var(--info))}

/* layout helper classes replacing inline style="" in generated markup */
.span2{grid-column:span 2}
.span-all{grid-column:1/-1}
.mt2{margin-bottom:8px}
.flexgap{display:flex;align-items:center;gap:8px}
.flexwrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mt8{margin-top:8px}
.trackrow{width:80px;height:8px}
.trackbig{height:14px;margin-top:6px}
.fg3{color:rgb(var(--fg-3))}
.small12{font-size:12px}
.cardh1{font:600 20px var(--display);margin-bottom:var(--s-3)}
.mt3{margin-top:var(--s-3)}
.mt5{margin-top:var(--s-5)}
.mb5{margin-bottom:var(--s-5)}
.mb4{margin-bottom:var(--s-4)}
.hide{display:none}
.badge.hide{display:none}
.dialread{margin-top:var(--s-3);padding:var(--s-3);border-radius:var(--r-1);background:rgb(var(--sunk));font-size:13px;display:none}
.dialread.on{display:block}
.dialread .w{font-weight:600}
.dialread .a{font-size:12px;color:rgb(var(--fg-3));margin-top:2px}
.dial-legend{font-size:12px;color:rgb(var(--fg-3));display:flex;gap:14px;flex-wrap:wrap;margin-top:var(--s-3)}
.dial-legend .diamond{border:1.4px solid rgb(var(--fg-3));border-radius:2px;width:9px;height:9px;display:inline-block;transform:rotate(45deg)}
.dial-legend .claimdot{border:1.4px dashed rgb(var(--fg-3));border-radius:50%;width:10px;height:10px;display:inline-block}

/* health / laws lists */
.hlist{border:1px solid rgb(var(--line));border-radius:var(--r-2);overflow:hidden}
.hrow{padding:8px var(--s-3);border-bottom:1px solid rgb(var(--line));font-size:12.5px;font-family:var(--mono)}
.hrow:last-child{border-bottom:0}
.hrow.warn{color:rgb(var(--needs))}
.hrow.bad{color:rgb(var(--bad))}
.hrow.ok{color:rgb(var(--fg-2))}
.devrow{display:flex;align-items:center;gap:10px;padding:8px var(--s-3);border-bottom:1px solid rgb(var(--line));font-size:12.5px}
.devrow:last-child{border-bottom:0}
.devrow .dn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.devrow .cur{color:rgb(var(--ok));font-size:10.5px}

/* bottom nav */
.botnav{position:fixed;inset-inline:0;bottom:0;z-index:30;display:flex;border-top:1px solid rgb(var(--line));background:rgb(var(--bg)/.95);backdrop-filter:blur(10px);padding-bottom:env(safe-area-inset-bottom)}
@media(min-width:900px){.botnav{display:none!important}}
.botnav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0;min-height:56px;color:rgb(var(--fg-3));font-size:10.5px;position:relative}
.botnav button.active{color:rgb(var(--fg))}
.botnav button svg{width:19px;height:19px}
.botnav .badge{position:absolute;top:2px;inset-inline-end:calc(50% - 22px);background:rgb(var(--needs));color:rgb(var(--bg));font:600 9px var(--mono);border-radius:8px;min-width:14px;height:14px;display:flex;align-items:center;justify-content:center;padding:0 3px}

/* palette overlay */
.overlay{position:fixed;inset:0;background:rgb(0 0 0/.5);z-index:50;display:none;align-items:flex-start;justify-content:center;padding:10vh var(--s-4)}
.overlay.show{display:flex}
.pal{width:100%;max-width:560px;background:rgb(var(--surface));border:1px solid rgb(var(--line));border-radius:var(--r-2);overflow:hidden;box-shadow:0 20px 60px rgb(0 0 0/.35)}
.pal input{width:100%;height:52px;padding:0 var(--s-4);font:15px var(--mono);background:none;border:0;border-bottom:1px solid rgb(var(--line));color:rgb(var(--fg))}
.pal .res{max-height:50vh;overflow-y:auto}

.toggles{position:fixed;top:var(--s-3);inset-inline-end:var(--s-3);z-index:40;display:flex;gap:6px}
.toggles button{width:36px;height:36px;border-radius:9px;background:rgb(var(--surface));border:1px solid rgb(var(--line));display:grid;place-items:center;color:rgb(var(--fg-2))}
.kbdtxt{font-size:11px}
@media(min-width:900px){.toggles{position:sticky;top:var(--s-3);justify-content:flex-end;margin-bottom:var(--s-3)}}

.copied{position:fixed;bottom:calc(90px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  background:rgb(var(--fg));color:rgb(var(--bg));padding:8px 16px;border-radius:999px;font-size:13px;z-index:60;
  opacity:0;pointer-events:none;transition:opacity .2s}
.copied.on{opacity:1}