/* ============================================================================
   The shell. Chrome only: every page is blank on purpose. This is the chassis
   the six pages get built into.
   ========================================================================== */
:root{--bg:#ffffff;--card:#fafbfb;--line:#e8e9e9;--line2:#d7d8d6;--txt:#343434;--muted:#757575;
 --faint:#9b968c;--gold:#D19D13;--gold-dark:#a87e0e;--gold-light:#f6efdc;--goldtxt:#a87e0e;
 --today:#a83a2a;--ok-tx:#4a6b2a;--info:#185fa5;--exbg:#f5f6f7;--gridline:#f3f3f1;--ink:#ffffff;
 --sg-grey:color-mix(in srgb,var(--line2) 42%,var(--bg));
 --sg-gold:color-mix(in srgb,var(--gold) 20%,var(--bg));
 --sg-blue:color-mix(in srgb,var(--info) 15%,var(--bg));
 --sg-green:color-mix(in srgb,var(--ok-tx) 17%,var(--bg));
 --seg-txt:var(--txt);--seg-gold:var(--goldtxt);--seg-blue:var(--info);--seg-green:var(--ok-tx);
 --seg-lab:var(--muted)}
body.dark{--bg:#1d1c1a;--card:#262522;--line:#3a3833;--line2:#4a4742;--txt:#e8e6e0;--muted:#9b968c;
 --faint:#7d796f;--goldtxt:#dfb957;--today:#e89086;--ok-tx:#a5c982;--info:#7da6d8;--exbg:#2a2824;
 --gridline:#322f2a;--ink:#241210;
 /* dark: every soft surface sits ABOVE the page, never below it */
 --sg-grey:#413e39;--sg-gold:#5a4a22;--sg-blue:#2f4560;--sg-green:#3a4a2c;
 --seg-txt:#f2efe8;--seg-gold:#f0cd77;--seg-blue:#a9c8ea;--seg-green:#c2dd9c;--seg-lab:#c9c4b9}
*{box-sizing:border-box}
body{margin:0;font-family:"Aptos","Segoe UI Variable Text",-apple-system,BlinkMacSystemFont,"Segoe UI",
 Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--txt);font-size:13px;line-height:1.45;
 height:100vh;overflow:hidden;display:flex;flex-direction:column}
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-thumb{background:var(--line2);border-radius:6px;border:2px solid var(--bg)}
.appbar{flex:none}
.tabbar,#statebar,#subbar{flex:none}
#app{flex:1;min-height:0;overflow:auto;padding:16px 24px 30px}
/* the logo box and the rail share one width; the header rule sits on the seam */
/* --logoh is the rendered height of the wordmark at --logow: the supplied
   artwork is 560x100, so 230px wide renders 41px tall. The divider matches it. */
:root{--rail:276px;--logow:276px;--logoh:42px}
#below{flex:1;min-height:0;display:flex}
#main{flex:1;min-width:0;display:flex;flex-direction:column}

/* ---------------------------------------------------------- 1 · header --- */
/* min-height pins the header so collapsing the rail does not resize it */
.appbar{display:flex;justify-content:space-between;align-items:center;padding:8px 24px 8px 0;
 min-height:73px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.brand,.user{position:relative;z-index:1;display:flex;align-items:center}
/* the logo lives in a box exactly as wide as the rail, so the rule between the
   logo and the app name falls on the rail's own right edge */
.logobox{width:var(--logow);flex:none;padding-left:24px;display:flex;align-items:center}
.logomark{width:100%;max-width:calc(var(--logow) - 42px);height:auto}
.logosym{height:34px;width:auto}
#logoDark,#symLight,#symDark{display:none}
body.dark #logoLight{display:none}
body.dark #logoDark{display:block}
body.shut #logoLight,body.shut #logoDark{display:none}
body.shut #symLight{display:block}
body.shut.dark #symLight{display:none}
body.shut.dark #symDark{display:block}
body.shut .logobox{padding-left:0;justify-content:center}
body.shut .vrule{height:34px}
.vrule{width:1px;height:var(--logoh);background:var(--line2);flex:none}
.applbl{font-size:17.5px;font-weight:600;margin-left:18px;letter-spacing:-.005em}
.user{gap:11px}
.avatar{width:34px;height:34px;border-radius:50%;border:1.5px solid #23211e;display:flex;
 align-items:center;justify-content:center;font-size:12.5px;font-weight:700;color:#23211e;
 background:var(--bg);overflow:hidden}
.avstatic{display:flex;cursor:default}
body.dark .avatar{color:#e8e6e0;border-color:#9b968c}
.arc{position:absolute;right:0;top:0;height:100%;width:300px;pointer-events:none}
body.dark .arc path:nth-of-type(2){fill:#bdbdbd;opacity:.4}
body.dark .arc path:nth-of-type(3){fill:#f5f2ea;opacity:.9}

/* ------------------------------------------------------- 2 · page band --- */
/* the page names start at the page's own left edge, hard against the rail */
.tabbar{display:flex;align-items:center;padding:0 24px;border-bottom:1px solid var(--line);
 position:relative}
#tabs{flex:0 0 auto;display:flex;align-items:center}
#tabs .tab:last-child{margin-right:0}

/* ------------------------------------------------------------- the rail --- */
#rail{flex:none;width:var(--rail);border-right:1px solid var(--line);background:var(--exbg);
 display:flex;flex-direction:column;padding:8px 8px 10px;position:relative;overflow-y:auto}
.rdiv{height:1px;background:var(--line2);margin:8px 7px;flex:none}
.rdiv.thin{background:var(--line);margin:6px 10px}   /* shut: bands, no words */
.rlbl{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
 padding:6px 9px 4px;white-space:nowrap;flex:none}
.rdiv+.rlbl{padding-top:3px}
.rspace{flex:1;min-height:10px}
.rrow{display:flex;align-items:center;gap:11px;width:100%;padding:0 9px;height:32px;flex:none;
 border:1px solid transparent;border-radius:8px;background:none;font-family:inherit;cursor:pointer;
 color:var(--muted);text-align:left;overflow:hidden}
.rrow svg{flex:none;color:var(--faint)}
.rrow .rt{font-size:12px;color:var(--txt);min-width:0;white-space:nowrap;overflow:hidden;
 text-overflow:ellipsis}
.rrow{height:32px}
.rrow:hover{background:var(--bg)}
.rrow:hover svg{color:var(--gold)}
.rrow.on{background:var(--bg);border-color:var(--line2);box-shadow:0 1px 2px rgba(20,18,14,.07)}
.rrow.on svg{color:var(--goldtxt)}
.rrow.on .rt{color:var(--goldtxt);font-weight:600}
.rdot{width:17px;flex:none;display:flex;align-items:center;justify-content:center}
.rdot:after{content:"";width:5px;height:5px;border-radius:50%;background:transparent}
.rrow.on .rdot:after{background:var(--gold)}
.rrow.add{color:var(--faint);border-style:dashed;border-color:var(--line2);margin-top:5px}
.rrow.add .rt{color:var(--faint)}
/* the project code, collapsed: a tile, at 10px — never the body size */
.rcode{font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
/* a site that does not exist yet says so, quietly, and does not pretend to be live */
.rt .uc{font-style:normal;font-size:8.5px;letter-spacing:.02em;color:var(--faint);opacity:.8}
.rrow.wip .rt{color:var(--muted)}
.rrow.wip svg{opacity:.72}
/* the column itself is the handle — no arrow, so the ground answers the cursor */
#rail{cursor:pointer}
#rail:hover{background:color-mix(in srgb,var(--exbg) 72%,var(--bg))}
#rail .rrow{cursor:pointer}
body.shut .rrow.proj{height:36px;margin-bottom:2px;border-color:var(--line2);background:var(--bg)}
body.shut .rrow.proj.on{background:var(--bg);border-color:var(--line2)}
body.shut .rrow.proj.on .rcode{color:var(--goldtxt)}
.rfoot{border-top:1px solid var(--line2);margin:6px 7px 0;padding-top:6px;flex:none;align-self:stretch}
/* the foot: one row when open, a stack when shut */
.rfrow{display:flex;align-items:center;width:100%;flex:none;padding:0 1px}
.rfstack{display:flex;flex-direction:column;align-items:center;gap:2px;flex:none}
.rfgap{flex:1}
.ricon{background:none;border:1px solid transparent;color:var(--muted);width:36px;height:34px;
 display:flex;align-items:center;justify-content:center;border-radius:9px;cursor:pointer}
.ricon:hover{background:var(--bg);color:var(--gold)}
.ricon.on{background:var(--bg);border-color:var(--line2);color:var(--goldtxt)}
.rpsep{height:1px;background:var(--line);margin:7px 3px 5px}
.rpfoot{display:flex;align-items:center;padding:1px 2px 0}
.rpfoot .ricon{width:34px;height:32px}
.rpfoot .avsm{width:24px;height:24px;font-size:9px}
.mbtn.icon{padding:8px 10px}
.mbtn.danger{color:var(--muted)}
.mbtn.danger svg{color:var(--faint)}
.mbtn.danger:hover{border-color:var(--today);color:var(--today);background:var(--bg)}
.mbtn.danger:hover svg{color:var(--today)}

/* both panels float clear of the rail, so neither state clips them */
.rpanel{position:fixed;width:238px;background:var(--bg);
 border:1px solid var(--line2);border-radius:11px;padding:8px;z-index:60;display:none;
 box-shadow:0 14px 34px rgba(10,9,8,.20);cursor:default}
.rpanel.open{display:block}
#projPanel{width:302px}   /* the longest project name, unabbreviated */
.rplbl{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
 padding:5px 8px 5px}
.rseg{display:flex;gap:6px;padding:0 2px 4px}
.rseg.lang .rsb{font-size:11.5px;padding:7px 0}
.rsb{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:8px 0;
 border:1px solid var(--line2);border-radius:9px;background:var(--card);font-family:inherit;
 font-size:12px;color:var(--muted);cursor:pointer;white-space:nowrap}
.rsb svg{color:var(--faint)}
.rsb:hover{border-color:var(--gold)}
.rsb.on{background:color-mix(in srgb,var(--gold) 13%,transparent);border-color:var(--gold);
 color:var(--goldtxt);font-weight:600}
.rsb.on svg{color:var(--goldtxt)}
.rpitem{display:flex;align-items:baseline;gap:8px;padding:7px 9px;font-size:12px;color:var(--faint)}
.rpitem i{font-style:normal;font-size:9.5px;color:var(--faint);opacity:.75;margin-left:auto}
.rpmore{font-size:9.5px;color:var(--faint);opacity:.8;padding:7px 9px 3px;border-top:1px solid
 var(--line);margin:5px 3px 0}
/* the gap from label to glyph must match a rail row's 11px — the icon button
   carries ~9.5px of its own padding, so the margin makes up the rest */
.rflbl{font-size:12px;color:var(--faint);margin-right:2px;cursor:pointer}
.rfrow:hover .rflbl{color:var(--gold)}
/* who you are, at the left of the foot row, and the way into Personalise */
.rfme{display:flex;align-items:center;gap:9px;background:none;border:1px solid transparent;
 border-radius:9px;padding:3px 6px 3px 4px;font-family:inherit;cursor:pointer;min-width:0;
 max-width:158px}
.rfme:hover{background:var(--bg);border-color:var(--line2)}
/* the full name wraps rather than truncating — a name cut mid-word is worse
   than a two-line row */
.rfuser{text-align:left;line-height:1.2;font-size:11.5px;font-weight:600;color:var(--txt);
 min-width:0;overflow-wrap:anywhere}
.rfuser i{display:block;font-style:normal;font-weight:400;font-size:9px;color:var(--faint)}
.avsm{width:26px;height:26px;flex:none;border-radius:50%;border:1.5px solid #23211e;display:flex;
 align-items:center;justify-content:center;font-size:9.5px;font-weight:700;color:#23211e;
 background:var(--bg);overflow:hidden}
body.dark .avsm{color:#e8e6e0;border-color:#9b968c}
.avsm.hasimg,.avatar.hasimg,.avbig.hasimg{border-color:var(--line2)}
.avsm img,.avatar img,.avbig img{width:100%;height:100%;object-fit:cover;display:block}
.avbtn{background:none;border:none;padding:0;cursor:pointer;display:flex}
.pwrap{position:relative;flex:none;display:flex;flex-direction:column;align-items:center}

/* the picker rows shared by the project panel */
.rpick{display:flex;align-items:baseline;gap:9px;width:100%;padding:7px 9px;
 border:1px solid transparent;border-radius:8px;background:none;font-family:inherit;
 cursor:pointer;text-align:left}
.rpick:hover{background:var(--exbg)}
.rpick.on{background:color-mix(in srgb,var(--gold) 13%,transparent);border-color:var(--gold)}
.rpick .pcode{font-size:10px;font-weight:700;letter-spacing:.05em;color:var(--faint);width:28px;
 flex:none}
.rpick .pnm{font-size:12px;color:var(--txt);flex:1;min-width:0;overflow:hidden;
 text-overflow:ellipsis;white-space:nowrap}
.rpick .pn{font-size:9.5px;color:var(--faint)}
.rpick.on .pcode,.rpick.on .pnm{color:var(--goldtxt)}
.rpick.on .pnm{font-weight:600}
.rpick.add{justify-content:center;border-style:dashed;border-color:var(--line2);color:var(--faint);
 font-size:11px;margin-top:4px}

/* --------------------------------------------- the settings window (open) -- */
.modalwrap{position:fixed;inset:0;background:rgba(26,22,16,.34);z-index:200;display:none;
 align-items:center;justify-content:center;padding:30px}
.modalwrap.open{display:flex}
body.dark .modalwrap{background:rgba(0,0,0,.52)}
.modal{width:640px;max-width:100%;max-height:84vh;display:flex;flex-direction:column;
 background:var(--bg);border:1px solid var(--line2);border-radius:14px;overflow:hidden;
 box-shadow:0 26px 64px rgba(10,9,8,.30)}
.mhead{display:flex;align-items:flex-start;gap:16px;padding:16px 18px 14px;
 border-bottom:1px solid var(--line)}
.mhead b{display:block;font-size:15px;font-weight:600}
.mhead span{display:block;font-size:11.5px;color:var(--faint);margin-top:2px}
.mx{margin-left:auto;background:none;border:none;color:var(--faint);padding:6px;border-radius:8px;
 display:flex;cursor:pointer}
.mx:hover{background:var(--exbg);color:var(--today)}
.mbody{overflow:auto;padding:4px 18px 8px}
.mgrp{padding:12px 0 4px}
.mglbl{font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);
 padding-bottom:6px}
.mrow{display:flex;align-items:center;gap:20px;padding:11px 0;border-bottom:1px solid var(--gridline)}
.mgrp .mrow:last-child{border-bottom:none}
.mn{flex:1;min-width:0;font-size:12.5px;color:var(--txt)}
.mn i{display:block;font-style:normal;font-size:11px;color:var(--faint);margin-top:2px}
/* the who-block at the head of Settings: the same idea as the panel's, larger */
.mrow.me{width:100%;gap:12px;padding:0;border-bottom:1px solid var(--gridline)}
.mewho{flex:1;min-width:0;display:flex;align-items:center;gap:14px;text-align:left;background:none;
 border:none;font-family:inherit;cursor:pointer;padding:13px 8px 13px 0;border-radius:9px}
.mewho:hover{background:var(--exbg)}
.mewho .mtag{margin-left:auto}
.mewho:hover .mtag{border-color:var(--gold);color:var(--goldtxt)}
.mrow.me .mn{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--txt)}
.mrow.me .mn i.pre{display:block;font-style:normal;font-size:9.5px;font-weight:400;
 color:var(--faint);margin:0 0 1px}
.mrow.me .avbig{width:44px;height:44px;font-size:15px}
.mrow .rseg{padding:0;flex:none;width:250px}
.mrow .rseg.lang{width:250px}
.mtag{font-size:9.5px;color:var(--faint);border:1px solid var(--line2);border-radius:5px;
 padding:2px 7px;flex:none}
.mfoot{display:flex;align-items:center;gap:16px;padding:11px 14px 11px 18px;
 border-top:1px solid var(--line);font-size:11px;color:var(--faint);background:var(--exbg)}
.mfoot>span{flex:1;min-width:0}
.mfbtns{display:flex;gap:8px;flex:none}
.mbtn.primary{background:var(--gold);border-color:var(--gold);color:#241605;font-weight:600}
.mbtn.primary:hover{background:var(--gold-dark);border-color:var(--gold-dark);color:#fff}
.mtext.short{width:92px;text-align:center;letter-spacing:.08em;font-weight:700;text-transform:uppercase}
/* a notice is small and says one thing */
.modalwrap.sticky .modal{width:432px}
.mnote{margin:14px 4px 16px;font-size:12.5px;line-height:1.5;color:var(--muted)}
/* personalise */
.avbig{width:64px;height:64px;flex:none;border-radius:50%;border:1.5px solid #23211e;display:flex;
 align-items:center;justify-content:center;font-size:20px;font-weight:700;color:#23211e;
 background:var(--bg);overflow:hidden}
body.dark .avbig{color:#e8e6e0;border-color:#9b968c}
.mavwrap{flex:none}
.mav-actions{display:flex;flex-direction:column;gap:6px;flex:none;width:150px}
.mbtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:7px 13px;
 border:1px solid var(--line2);border-radius:9px;background:var(--card);font-family:inherit;
 font-size:12px;color:var(--txt);cursor:pointer;flex:none}
.mbtn:hover{border-color:var(--gold);color:var(--goldtxt)}
.mbtn.quiet{background:none;color:var(--faint)}
.mbtn.quiet:hover{color:var(--today);border-color:var(--today)}
.mtext{width:250px;flex:none;padding:8px 11px;border:1px solid var(--line2);border-radius:9px;
 background:var(--bg);font-family:inherit;font-size:12.5px;color:var(--txt)}
.mtext:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px
 color-mix(in srgb,var(--gold) 16%,transparent)}
.rtog{display:flex;align-items:center;gap:11px;width:100%;height:32px;padding:0 9px;flex:none;
 border:none;border-radius:8px;background:none;color:var(--faint);font-family:inherit;cursor:pointer}
.rtog .rt{font-size:11.5px;color:var(--faint);white-space:nowrap}
.rtog:hover{background:var(--bg);color:var(--gold)}
/* shut: the rail keeps its marks, the logo drops to the symbol alone, and both
   sit in the same 52 px. The app name and everything below shift with them. */
body.shut{--rail:52px;--logow:52px}
body.shut #rail{padding:8px 8px 10px;align-items:center}
body.shut .rrow,body.shut .rtog{justify-content:center;padding:0;width:36px}
body.shut .rrow.add{border-color:transparent}
body.shut .rt{display:none}
.tab{display:flex;align-items:center;gap:7px;padding:11px 2px;margin-right:22px;font-size:13px;
 color:var(--muted);border:none;border-bottom:2px solid transparent;background:none;font-family:inherit;
 cursor:pointer}
.tab:hover{color:var(--gold)}
.tab.on{color:var(--txt);font-weight:500;border-bottom-color:var(--gold)}
.tab.on svg{color:var(--gold)}
.tab svg{color:var(--faint)}
.tab:hover svg{color:var(--gold)}
.late{font-size:9.5px;font-weight:700;border-radius:999px;padding:1px 6px;background:var(--today);
 color:var(--ink)}
.tools{margin-left:auto;display:flex;align-items:center;gap:4px}
.iconbtn{background:none;border:none;color:var(--muted);padding:7px;display:flex;align-items:center;
 border-radius:8px;cursor:pointer;position:relative}
.iconbtn:hover{background:var(--exbg);color:var(--gold)}
.iconbtn.on{color:var(--gold);background:var(--exbg);box-shadow:inset 0 0 0 1px var(--gold)}
.idiv{width:1px;height:20px;background:var(--line2);margin:0 7px}
.projpill{display:flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--gold) 13%,transparent);
 border:1px solid var(--gold);color:var(--goldtxt);border-radius:999px;padding:5px 13px;font-size:12px;
 font-weight:700;letter-spacing:.03em;font-family:inherit;cursor:pointer;position:relative}
.projpill.on{background:var(--gold);color:#1a1205}
.projpill .cv{display:flex;align-items:center;opacity:.85;margin-right:-2px}

/* menus that hang off the cluster */
.pop{position:absolute;right:0;left:auto;top:calc(100% + 9px);background:var(--bg);
 border:1px solid var(--line2);border-radius:10px;padding:6px;
 box-shadow:0 12px 32px rgba(10,9,8,.18);z-index:40;width:288px;max-width:calc(100vw - 32px);
 display:none}
.pop.open{display:block}
.pop.lft{left:0;right:auto}
.pop .lbl{font-size:9px;letter-spacing:.7px;text-transform:uppercase;color:var(--faint);padding:4px 8px 6px}
.pitem{display:flex;align-items:baseline;gap:9px;padding:7px 9px;border-radius:8px;
 border:1px solid transparent;cursor:pointer}
.pitem:hover{background:var(--exbg)}
.pitem .code{font-size:12px;font-weight:700;letter-spacing:.03em}
.pitem .nm{font-size:11px;color:var(--muted);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pitem .n{font-size:9.5px;color:var(--faint)}
.pitem.on{background:color-mix(in srgb,var(--gold) 14%,transparent);border-color:var(--gold)}
.pitem.on .code{color:var(--goldtxt)}
.pitem.add{color:var(--faint);border-style:dashed;border-color:var(--line2);justify-content:center;
 font-size:11px;margin-top:4px}

/* ------------------------------------------------------- 3 · state bar --- */
#statebar{padding:12px 24px 13px;border-bottom:1px solid var(--line);display:none}
#statebar.on{display:block}
.tbhead{display:flex;align-items:baseline;margin-bottom:7px}
.tbhead b{font-size:12.5px;font-weight:600}
.tbhead .r{margin-left:auto;font-size:11px;color:var(--faint)}
.tbhead .r b{color:var(--txt)}
.tbar{display:flex;height:46px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
body.dark .tbar{border-color:var(--line2)}
.seg{display:flex;align-items:center;gap:8px;padding:0 12px;min-width:0;white-space:nowrap;
 border-right:1px solid var(--bg);container-type:inline-size;position:relative}
body.dark .seg{border-right-color:rgba(0,0,0,.3)}
.seg:last-child{border-right:none}
.seg b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1;color:var(--seg-txt)}
.labs{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.seg .lab{font-size:11px;color:var(--seg-lab);overflow:hidden;text-overflow:ellipsis}
.seg .disc{font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);
 overflow:hidden;text-overflow:ellipsis}
body.dark .seg .disc{color:#a8a298}
/* The degrade rule, enforced rather than described: a narrow segment drops the
   discipline, then the label, then the word "late" — and never clips a word.
   The red rule along the foot keeps saying "late" after the word has gone. */
/* thresholds are on the CONTENT box, so they are the segment width less its
   24px of padding — measured against the longest string in each rank */
@container (max-width:145px){ .seg .disc{display:none} }
@container (max-width:104px){ .seg .lab{display:none} }
@container (max-width:78px){ .seg .lt span.w{display:none} }
@container (max-width:104px){ .seg.haslate:after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:4px;background:var(--today)} }
.s-grey{background:var(--sg-grey)}
.s-gold{background:var(--sg-gold)} .s-gold b{color:var(--seg-gold)}
.s-blue{background:var(--sg-blue)} .s-blue b{color:var(--seg-blue)}
.s-green{background:var(--sg-green)} .s-green b{color:var(--seg-green)}
.lt{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--today)}
.lt i{width:7px;height:7px;border-radius:50%;background:var(--today);opacity:.9;flex:none}
.lt b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1;
 color:var(--today)}

/* ------------------------------------------------------ 4 · pill band ---- */
#subbar{display:flex;align-items:center;gap:7px;padding:7px 24px;border-bottom:1px solid var(--line);
 background:var(--card)}
.chip{font-size:11px;padding:5px 12px;border-radius:999px;border:1px solid var(--line);color:var(--muted);
 background:var(--bg);font-family:inherit;cursor:pointer}
body.dark .chip{background:var(--card);border-color:var(--line2)}
.chip:hover{border-color:var(--line2);color:var(--txt)}
.chip.on{background:var(--gold);color:#1a1205;border-color:var(--gold);font-weight:600}
body.dark .chip.on{background:var(--gold);border-color:var(--gold);color:#1a1205}
.sbright{margin-left:auto;display:flex;align-items:center;gap:7px}
.vsel{border:1px solid var(--line);background:var(--bg);color:var(--txt);border-radius:999px;
 padding:5px 11px;font-family:inherit;font-size:11.5px}
body.dark .vsel{background:var(--card);border-color:var(--line2)}
.srch{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--bg);
 border-radius:999px;padding:4px 11px}
body.dark .srch{background:var(--card);border-color:var(--line2)}
.srch input{border:none;background:none;outline:none;font-family:inherit;font-size:11.5px;
 color:var(--txt);width:200px}
.srch svg{color:var(--faint)}
.sbnote{font-size:11px;color:var(--faint)}
.ctx{font-size:11px;color:var(--faint);margin-right:4px}
.ctx b{color:var(--muted);font-weight:600}


/* ----------------------------------------------------------- the well ---- */
.blank{border:1px dashed var(--line2);border-radius:12px;min-height:320px;display:flex;
 flex-direction:column;align-items:center;justify-content:center;color:var(--faint);gap:6px}
.blank b{font-size:14px;color:var(--muted);font-weight:600}
.blank span{font-size:11.5px}
.blank code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;color:var(--goldtxt)}

/* ---- the pages that are already designed --------------------------------- */
/* the kind picker: the question the pill used to answer */
.kindpick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 18px}
.kb{display:flex;align-items:center;gap:10px;flex-wrap:wrap;text-align:left;padding:11px 14px;
 border:1px solid var(--line2);border-radius:11px;background:var(--card);font-family:inherit;
 font-size:13px;font-weight:600;color:var(--txt);cursor:pointer}
.kb svg{color:var(--faint);flex:none}
.kb i{flex-basis:100%;font-style:normal;font-size:11.5px;font-weight:400;color:var(--faint);
 padding-left:25px;margin-top:-2px}
.kb:hover{border-color:var(--gold)}
.kb.on{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 11%,transparent);
 color:var(--goldtxt);box-shadow:inset 0 0 0 1px var(--gold)}
.kb.on svg{color:var(--goldtxt)}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px 16px}
.mgrid .fld.w2{grid-column:span 2}
.fld label{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);
 margin-bottom:4px}
.fld input,.fld select,.fld textarea{width:100%;border:1px solid var(--line);background:var(--bg);
 color:var(--txt);border-radius:8px;padding:7px 10px;font-family:inherit;font-size:12.5px}
body.dark .fld input,body.dark .fld select,body.dark .fld textarea{background:var(--card);
 border-color:var(--line2)}
.fld textarea{line-height:1.5;resize:vertical}
.facts{margin-top:12px;font-size:11px;color:var(--faint);border-top:1px solid var(--line);padding-top:9px}
.bar{display:flex;align-items:center;gap:8px;margin:12px 0 0}
.bar .sp{margin-left:auto;font-size:11px;color:var(--faint)}
.bar .sp b{color:var(--muted);font-weight:600}
.btn{font-family:inherit;font-size:12px;border:1px solid var(--line2);background:var(--bg);
 color:var(--txt);border-radius:999px;padding:5px 13px;cursor:pointer;display:inline-flex;
 align-items:center;gap:6px}
body.dark .btn{background:var(--card)}
.btn.primary{background:var(--gold);border-color:var(--gold);color:#1a1205;font-weight:600}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);
 font-weight:600;padding:0 10px 7px;border-bottom:1px solid var(--line2);white-space:nowrap}
td{padding:8px 10px;border-bottom:1px solid var(--gridline);font-size:12.5px}
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums}
.tag{display:inline-block;font-size:10px;border-radius:999px;padding:1px 9px;border:1px solid var(--line2);
 color:var(--muted)}
.tag.bug{border-color:var(--today);color:var(--today)}
.tag.feat{border-color:var(--info);color:var(--info)}
.tag.fmt{color:var(--faint)}
.t-faint{color:var(--faint)}
/* the activity log — one bordered window, one ink, the height of the screen */
.logwrap{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;
 line-height:1.95;margin-top:4px;background:var(--exbg);border:1px solid var(--line);
 border-radius:12px;padding:12px 16px;height:var(--logh,calc(100vh - 296px));min-height:240px;
 overflow:auto}
.ln{display:flex;gap:16px;white-space:nowrap;color:var(--txt)}
.ln span{color:var(--txt);font-weight:400}
.ln .ts{flex:none;width:128px}
.ln .w{flex:none;width:112px;overflow:hidden;text-overflow:ellipsis}
.ln .pg{flex:none;width:52px}
.ln .act{flex:none;width:186px}
.ln .what{overflow:hidden;text-overflow:ellipsis}
/* The stage is 16:9 and the clips list takes its height from it — the clip column is
   absolutely filled, so it contributes nothing to the row and cannot drive it taller. */
.howwrap{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;align-items:stretch}
.player{display:flex;flex-direction:column;min-height:0}
.clipcol{position:relative;min-height:300px}
.phead{display:flex;align-items:center;gap:9px;padding:9px 13px;border-bottom:1px solid var(--line);
 background:var(--bg)}
.phead svg{color:var(--gold)}
.phead b{font-size:12.5px}
.pstep{margin-left:auto;font-size:10.5px;color:var(--faint)}
.pstage{position:relative;aspect-ratio:16/9;min-height:0;background:var(--exbg);display:flex;
 flex-direction:column;
 align-items:center;justify-content:center;gap:10px;
 background-image:linear-gradient(var(--gridline) 1px,transparent 1px),
   linear-gradient(90deg,var(--gridline) 1px,transparent 1px);background-size:26px 26px}
.pbig{width:62px;height:62px;border-radius:50%;border:1px solid var(--gold);background:var(--bg);
 color:var(--gold);display:flex;align-items:center;justify-content:center;cursor:pointer;
 box-shadow:0 6px 18px rgba(10,9,8,.10)}
.pbig:hover{background:var(--gold);color:#1a1205}
.pnote{font-size:11px;color:var(--faint)}
.pbar{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid var(--line);
 background:var(--bg)}
.pico{background:none;border:none;color:var(--muted);cursor:pointer;padding:4px;border-radius:6px;
 display:flex}
.pico:hover{color:var(--gold);background:var(--exbg)}
.ptime{font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.ptrack{flex:1;height:4px;border-radius:2px;background:var(--line);position:relative}
.ptrack i{position:absolute;left:0;top:0;bottom:0;width:18%;border-radius:2px;background:var(--gold)}
.pcap{font-size:11px;color:var(--muted);padding:9px 13px 11px;border-top:1px solid var(--line);
 background:var(--bg)}
.clips{position:absolute;inset:0;padding:10px;overflow:auto}
.clips .grp{margin:2px 6px 6px}
.cgrp{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding:9px 6px 4px}
.clip{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;
 border:1px solid transparent;border-radius:8px;padding:6px 8px;font-family:inherit;font-size:12px;
 color:var(--txt);cursor:pointer}
.clip svg{color:var(--faint);flex:none}
.clip:hover{background:var(--exbg)}
.clip:hover svg{color:var(--gold)}
.clip.on{background:color-mix(in srgb,var(--gold) 13%,transparent);border-color:var(--gold)}
body.dark .clip.on{background:var(--exbg);border-color:var(--gold)}
.clip.on svg{color:var(--gold)}
.cn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct{font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums}
@media (max-width:1180px){ .howwrap{grid-template-columns:1fr}
 .clipcol{position:static;min-height:0} .clips{position:static;max-height:420px} }
.step{display:flex;gap:14px;margin-bottom:11px}
.stepn{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--gold);
 color:var(--goldtxt);display:flex;align-items:center;justify-content:center;font-size:12px;
 font-weight:600}
.stepb{border:1px solid var(--line);border-radius:12px;padding:10px 13px;background:var(--card);flex:1}
.stepb b{font-size:12.5px}
.stepb .who2{font-size:10.5px;color:var(--faint);margin-left:8px}
.stepb p{margin:4px 0 0;font-size:11.5px;color:var(--muted)}
.grp{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);
 margin:18px 0 5px;padding-bottom:5px;border-bottom:1px solid var(--line2);display:flex}
.grp span{margin-left:auto;letter-spacing:0;text-transform:none;font-size:11px}
.whole{display:flex;align-items:center;gap:16px;border:1px solid var(--line2);border-radius:12px;
 padding:12px 15px;background:var(--card)}
.whole b{font-size:13px;display:block}
.whole span{font-size:11.5px;color:var(--muted)}
.whole button{margin-left:auto;flex:none}
.dl1{display:flex;align-items:baseline;gap:12px;padding:7px 2px;border-bottom:1px solid var(--gridline)}
.n1{font-size:12.5px;font-weight:600;width:210px;flex:none}
.d1{font-size:11.5px;color:var(--muted);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c1{font-size:11px;color:var(--faint);width:70px;text-align:right;font-variant-numeric:tabular-nums}
.f1{font-size:10px;color:var(--faint);width:82px;text-align:right;letter-spacing:.04em}
.lnk{background:none;border:none;font-family:inherit;font-size:11.5px;color:var(--goldtxt);cursor:pointer;
 display:inline-flex;align-items:center;gap:5px;padding:3px 6px;border-radius:6px;width:112px;
 justify-content:flex-end}
.lnk:hover{background:var(--exbg)}
.dgrp{margin-bottom:18px}
.dh{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);
 padding-bottom:7px;border-bottom:1px solid var(--line);margin-bottom:10px;display:flex}
.dh span{margin-left:auto;letter-spacing:0;text-transform:none;font-size:11px}
.dbig{display:flex;align-items:center;gap:18px;border:1px solid var(--line2);border-radius:12px;
 padding:12px 15px;background:var(--card)}
.dbig b{font-size:13px;display:block}
.dbig span{font-size:11.5px;color:var(--muted)}
.dbig button{margin-left:auto;flex:none}
.dchips{display:flex;flex-wrap:wrap;gap:8px}
.dchip{display:inline-flex;align-items:baseline;gap:7px;border:1px solid var(--line2);
 background:var(--bg);color:var(--txt);border-radius:999px;padding:6px 13px;font-family:inherit;
 font-size:12px;cursor:pointer}
body.dark .dchip{background:var(--card)}
.dchip:hover{border-color:var(--gold);color:var(--gold)}
.dchip svg{align-self:center;color:var(--faint)}
.dchip:hover svg{color:var(--gold)}
.dchip b{font-weight:500}
.dchip span{font-size:10px;color:var(--faint);font-variant-numeric:tabular-nums}
.restore{margin-top:16px;border:1px dashed var(--line2);border-radius:10px;padding:12px 14px;
 display:flex;align-items:center;gap:14px;font-size:11.5px;color:var(--muted)}
.restore b{color:var(--txt);font-weight:600;font-size:12.5px}
.restore button{margin-left:auto}

/* ---- Support: one grammar for all five pages ---------------------------- */
.swrap{max-width:1060px}
.shead{display:flex;align-items:flex-start;gap:11px;padding-bottom:12px;margin-bottom:14px;
 border-bottom:1px solid var(--line)}
.shead>svg{color:var(--gold);margin-top:1px;flex:none}
.st b{font-size:14px;font-weight:600;display:block}
.st span{font-size:11.5px;color:var(--muted)}
.sact{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.smeta{font-size:11px;color:var(--faint)}
.grp{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);
 margin:16px 0 7px;display:flex}
.grp span{margin-left:auto;letter-spacing:0;text-transform:none;font-size:11px}
.card{border:1px solid var(--line);border-radius:12px;background:var(--card);overflow:hidden}
.card.pad{padding:15px 17px}
.card.list{padding:4px 14px}
.cfoot{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);margin:14px -17px -15px;
 padding:11px 17px;background:var(--bg)}
.cfoot .sp{font-size:11px;color:var(--faint)}
.note1{display:flex;align-items:center;gap:14px;padding:12px 15px;margin-top:14px;
 border-style:dashed;border-color:var(--line2);background:none}
.note1 b{font-size:12.5px;flex:none}
.note1 span{font-size:11.5px;color:var(--muted)}
.note1 button{margin-left:auto;flex:none}
.dl1{border-bottom:1px solid var(--gridline)}
.card.list .dl1:last-child{border-bottom:none}

/* ------------------------------------------- Bill of material · Materials -- */
.mwrap{max-width:none}
.phead{display:flex;align-items:flex-start;gap:20px;padding:2px 0 14px;
 border-bottom:1px solid var(--line);margin-bottom:14px}
.pt b{display:block;font-size:15px;font-weight:600}
.pt span{display:block;font-size:11.5px;color:var(--faint);margin-top:3px;max-width:620px}
.pact{margin-left:auto;display:flex;align-items:center;gap:9px;flex:none}
.pdiv{width:1px;height:22px;background:var(--line2);margin:0 3px}
.card.tbl{padding:0;overflow:hidden}
.mtb{width:100%;border-collapse:collapse;font-size:12px}
.mtb th{text-align:left;font-size:9px;letter-spacing:.09em;text-transform:uppercase;
 color:var(--faint);font-weight:600;padding:7px 12px;border-bottom:1px solid var(--line2);
 background:var(--card)}
.mtb td{padding:4px 12px;line-height:1.5;border-bottom:1px solid var(--gridline);color:var(--txt)}
.mtb tr.clk{cursor:pointer}
.mtb tbody tr:last-child td{border-bottom:none}
.mtb tbody tr:hover{background:var(--exbg);box-shadow:inset 2px 0 0 var(--gold)}
.mtb .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;
 min-width:124px}
.mtb .desc{min-width:280px}
.mtb .u{min-width:70px;color:var(--muted)}
.mtb .n{min-width:96px;text-align:right;font-variant-numeric:tabular-nums}
.mtb .act{width:44px;text-align:right}
.use{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.use.zero{font-size:10.5px;color:var(--faint);opacity:.85}
.ico{display:inline-flex;color:var(--faint);opacity:.55;padding:3px;border-radius:6px}
.mtb tbody tr:hover .ico{opacity:1;color:var(--gold)}
.grp{display:flex;align-items:baseline;justify-content:space-between;font-size:9px;
 letter-spacing:.09em;text-transform:uppercase;color:var(--faint);padding:15px 2px 6px}
.grp:first-of-type{padding-top:0}

/* windows */
.modalwrap.matwin{align-items:flex-start;padding-top:56px}
.modal.wide{width:760px;max-width:calc(100vw - 60px)}
.modal.wide .mrow{gap:24px}
.modal.wide .mn{flex:1;min-width:230px}
.mtext.wide{width:380px;flex:none}
.lockfld{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:9px;
 background:var(--exbg);border:1px dashed var(--line2);color:var(--muted);font-size:12.5px}
.lockfld svg{color:var(--faint)}
.mini{width:100%;border-collapse:collapse;font-size:11.5px}
.mini td{padding:7px 0;border-bottom:1px solid var(--gridline);color:var(--muted)}
.mini td:first-child{color:var(--txt)}
.mini .mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;color:var(--faint)}
.mini .n{text-align:right;font-variant-numeric:tabular-nums;color:var(--txt)}

/* the two management windows: the row IS the form here */
.etb{width:100%;border-collapse:collapse;font-size:12px;margin-top:4px}
.etb th{text-align:left;font-size:9px;letter-spacing:.09em;text-transform:uppercase;
 color:var(--faint);font-weight:600;padding:0 8px 7px;border-bottom:1px solid var(--line)}
.etb td{padding:4px 8px;border-bottom:1px solid var(--gridline);vertical-align:middle}
.etb tbody tr:last-child td{border-bottom:none}
.etb .acr{width:120px}
.etb .ex{width:120px;color:var(--faint);font-size:11.5px}
.etb .n{width:92px;text-align:right;font-variant-numeric:tabular-nums;color:var(--muted);
 font-size:11.5px}
.etb .act{width:40px;text-align:right}
.etx{width:100%;font-family:inherit;font-size:12.5px;color:var(--txt);background:var(--bg);
 border:1px solid transparent;border-radius:8px;padding:6px 9px}
.etx:hover{border-color:var(--line2)}
.etx:focus{outline:none;border-color:var(--gold);
 box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 16%,transparent)}
.etx.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px}
.etx.up{text-transform:uppercase;letter-spacing:.04em}
.ico.del{background:none;border:none;cursor:pointer;opacity:.55}
.ico.del:hover{opacity:1;color:var(--today)}
.ico.off{opacity:.35}
.addrow{display:flex;align-items:center;gap:9px;width:100%;margin-top:10px;padding:9px 10px;
 border:1px dashed var(--line2);border-radius:9px;background:none;font-family:inherit;
 font-size:12px;color:var(--faint);cursor:pointer}
.addrow:hover{border-color:var(--gold);color:var(--goldtxt)}
.addrow svg{color:var(--faint)}
.addrow:hover svg{color:var(--gold)}
.note3{margin-top:14px;padding:11px 13px;border-radius:10px;background:var(--exbg);
 font-size:11px;color:var(--muted);line-height:1.5}
.note3 b{color:var(--txt);font-weight:600}

/* the derived part number */
.pnum{display:inline-flex;align-items:center;flex:none;border:1px solid var(--line2);
 border-radius:9px;overflow:hidden;background:var(--bg)}
.pnum .pre{padding:8px 2px 8px 12px;color:var(--faint);font-size:12.5px;
 font-family:ui-monospace,Menlo,Consolas,monospace}
.pnum .etx{width:132px;border:none;border-radius:0;padding-left:2px}
.pnum .etx:focus{box-shadow:none}
.pnum:focus-within{border-color:var(--gold);
 box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 16%,transparent)}

/* picker */
.upick{position:relative;flex:none}
.ubtn{display:flex;align-items:center;gap:10px;min-width:118px;padding:8px 11px;
 border:1px solid var(--line2);border-radius:9px;background:var(--bg);font-family:inherit;
 font-size:12.5px;color:var(--txt);cursor:pointer}
.ubtn.w{min-width:220px}
.ubtn svg{margin-left:auto;color:var(--faint)}
.ubtn:hover{border-color:var(--gold)}
.ubtn.on{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 16%,transparent)}
.umenu{position:absolute;top:calc(100% + 6px);left:0;width:196px;background:var(--bg);
 border:1px solid var(--line2);border-radius:11px;padding:6px;z-index:20;
 display:flex;flex-direction:column;max-height:290px;
 box-shadow:0 14px 34px rgba(10,9,8,.20)}
.umenu.w2{width:236px}
.ulist{overflow-y:auto;min-height:0}
.uitem{display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;border-radius:8px;
 border:1px solid transparent;background:none;font-family:inherit;font-size:12.5px;
 color:var(--txt);cursor:pointer;text-align:left}
.uitem:hover{background:var(--exbg)}
.uitem.on{background:color-mix(in srgb,var(--gold) 13%,transparent);border-color:var(--gold);
 color:var(--goldtxt);font-weight:600}
.uitem .tick{margin-left:auto;color:var(--goldtxt)}
.usep{height:1px;background:var(--line);margin:6px 4px}
.uitem.add{color:var(--muted);flex:none}
.uitem.add svg{color:var(--faint)}
.uitem.add:hover{color:var(--goldtxt)}
.uitem.add:hover svg{color:var(--gold)}


/* ---- the page head: a count, then the library, then what you make -------- */
.mwrap{margin-top:-11px}
.phead{display:flex;align-items:center;gap:14px;padding:0 0 6px;margin-bottom:0;border:none}
.pcount{font-size:11.5px;color:var(--faint)}
.pact{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.pdiv{width:1px;height:20px;background:var(--line2);margin:0 4px}
/* ---- one button, everywhere -------------------------------------------
   Gold marks where you are, not what to press. A page button is a page
   button; only a window's commit button (.mbtn.primary) stays gold, because
   there the choice is Save or Cancel and the two must not look alike.

   This also fixes a real fault in dark: `body.dark .btn` (0,2,1) outranked
   `.btn.primary` (0,2,0), so a primary button lost its gold fill but kept its
   near-black gold-button text — dark ink on a dark card. Every primary button
   in the app was reading like that: Download, The whole register, Log this bug. */
.btn.primary{background:var(--bg);border-color:var(--line2);color:var(--txt);font-weight:400}
.btn.primary svg{color:var(--muted)}
body.dark .btn.primary{background:var(--card);color:var(--txt)}
.btn:hover,.btn.primary:hover,body.dark .btn.primary:hover{border-color:var(--gold);
 color:var(--goldtxt)}
.btn:hover svg,.btn.primary:hover svg{color:var(--gold)}
.pact .btn{padding:5px 14px}

/* ---- one gold wash, mixed into the ground it sits on --------------------
   Mixing gold into `transparent` gives mud on a dark page. Mixed into the
   surface underneath it stays gold in both themes, and keeps the rule: a soft
   surface sits BELOW the page in light and ABOVE it in dark. */
:root{--goldwash:color-mix(in srgb,var(--gold) 11%,var(--bg));
      --goldwash2:color-mix(in srgb,var(--gold) 20%,var(--bg))}
body.dark{--goldwash:color-mix(in srgb,var(--gold) 15%,var(--card));
          --goldwash2:color-mix(in srgb,var(--gold) 26%,var(--card))}
.rsb.on,.rpick.on,.pitem.on,.kb.on,.uitem.on,.projpill,.akind,.crumb{
 background:var(--goldwash)}
body.dark .sgb.on,.sgb.on{background:var(--goldwash)}
.hit,body.dark .hit{background:var(--goldwash2)}

/* ---- the selected pill: the rail's band, exactly ------------------------
   The rail already answers "which one am I on" without a gold slab: the row
   steps off the surface it sits on, keeps a hairline edge, and says the rest
   in gold text. A gold wash mixed into `transparent` is what turned this to
   mud in dark. Same recipe here, and --bg carries both themes. */
.chip.on,.chip.on:hover{background:var(--bg);border-color:var(--line2);
 color:var(--goldtxt);font-weight:600;box-shadow:0 1px 2px rgba(20,18,14,.07)}
body.dark .chip.on,body.dark .chip.on:hover{background:var(--bg);
 border-color:var(--line2);color:var(--goldtxt);box-shadow:0 1px 2px rgba(0,0,0,.3)}
/* the same correction wherever else a gold wash is used on this page */
body.dark .akind{background:color-mix(in srgb,var(--gold) 15%,var(--card))}
body.dark .sgb.on{background:color-mix(in srgb,var(--gold) 18%,var(--card))}
body.dark .crumb{background:color-mix(in srgb,var(--gold) 12%,var(--card))}

/* ---- a plainer table: hairlines, no boxes ------------------------------- */
.tbl{overflow-x:auto}
.mtb{width:100%;border-collapse:collapse;font-size:12px}
.mtb th.mono{font-family:inherit;font-size:9px}
.mtb th{text-align:left;font-family:inherit;font-size:9px;letter-spacing:.09em;
 text-transform:uppercase;color:var(--faint);font-weight:600;padding:0 10px 6px;
 border-bottom:1px solid var(--line2);background:none}
.mtb td{padding:5px 10px;line-height:1.5;border-bottom:1px solid var(--gridline);
 color:var(--txt);background:none}
.mtb tbody tr:hover{background:var(--exbg);box-shadow:inset 2px 0 0 var(--gold)}
/* the description absorbs the slack, so nothing floats away from its own row */
.mtb .mono{min-width:132px;width:1px;white-space:nowrap}
.mtb .u{min-width:0;width:58px;color:var(--muted);white-space:nowrap}
.mtb .desc{width:100%;min-width:0}
/* the band tally is the only number left, so it rides the table's right edge
   with nothing under it to step out of line with */
.mtb tr.bnd .c{padding-right:2px}
/* the band is a row of this table, not a table of its own — one set of columns
   for the whole list, so nothing steps sideways from one band to the next */
.mtb tr.bnd td{padding:17px 10px 5px;font-size:10px;letter-spacing:.07em;
 text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--line2)}
.mtb tbody tr.bnd:first-child td{padding-top:3px}
.mtb tbody tr.bnd:hover{background:none;box-shadow:none}
.mtb tr.bnd .c{float:right;letter-spacing:0;text-transform:none;font-size:11px}
/* what you typed, where it was found */
.hit{background:color-mix(in srgb,var(--gold) 30%,var(--bg));color:inherit;
 border-radius:3px;padding:0 1px}
body.dark .hit{background:color-mix(in srgb,var(--gold) 34%,var(--card));color:var(--txt)}
.mtb tr.none td{padding:26px 10px;color:var(--faint);font-size:12px;border-bottom:none}
.mtb tr.none:hover{background:none;box-shadow:none}
.mtb tr.none b{color:var(--txt);font-weight:600}
.srch input{width:230px}
/* the column names stay put while the list runs under them */
.mtb thead th{position:sticky;top:0;z-index:2;background:var(--bg);padding-top:4px}
.grp{margin:16px 0 6px;padding:0}
.phead+.grp{margin-top:6px}       /* :first-of-type would match .phead, not this */
/* an assembly says so in a word, not in a colour */
.akind{display:inline-flex;align-items:center;gap:5px;margin-left:10px;padding:1px 8px 1px 6px;
 border-radius:999px;font-size:10.5px;text-transform:none;letter-spacing:0;
 color:var(--goldtxt);background:color-mix(in srgb,var(--gold) 12%,transparent);
 vertical-align:1px}
.akind svg{color:var(--goldtxt)}

/* ---- the manage lists scroll inside the window -------------------------- */
.escroll{max-height:296px;overflow-y:auto;margin-top:12px;border:1px solid var(--line);
 border-radius:10px}
.escroll .etb{margin-top:0}
.escroll .etb th{position:sticky;top:0;background:var(--card);padding:8px;z-index:2}
.escroll .etb td{padding:5px 8px}
.escroll .etb th:first-child,.escroll .etb td:first-child{padding-left:12px}
.escroll .etb th:last-child,.escroll .etb td:last-child{padding-right:12px}
.crumb{display:flex;align-items:center;gap:8px;margin:2px 0 12px;padding:8px 11px;border-radius:9px;
 background:color-mix(in srgb,var(--gold) 9%,transparent);font-size:11px;color:var(--goldtxt)}
.crumb svg{color:var(--goldtxt)}
.mhead .mx.bk{margin-left:0;margin-right:12px}

/* ---- assembly: the made-of table --------------------------------------- */
.ctb td{overflow:visible}
.ctb .q{width:110px}
.ctb .acr{width:64px;color:var(--muted)}
.etx.num{width:74px;text-align:right;font-variant-numeric:tabular-nums}
.ubtn .ubl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ubtn.ph .ubl{color:var(--faint)}
.ctb .upick{min-width:230px}
.ctb .umenu{min-width:360px}
.seg2{display:inline-flex;border:1px solid var(--line2);border-radius:999px;overflow:hidden;
 flex:none}
.sgb{font-family:inherit;font-size:11.5px;color:var(--muted);background:none;border:none;
 padding:6px 14px;cursor:pointer}
.sgb+.sgb{border-left:1px solid var(--line2)}
.sgb:hover{background:var(--exbg);color:var(--txt)}
.sgb.on{background:color-mix(in srgb,var(--gold) 15%,transparent);color:var(--goldtxt);
 font-weight:600}
body.dark .sgb.on{background:color-mix(in srgb,var(--gold) 22%,transparent)}
.mtext.num2{width:200px;flex:none;text-align:left}
/* ---- Groups & units: two lists, one sitting ---------------------------- */
.modal.w2col{width:880px;max-width:calc(100vw - 60px)}
.twocol{display:flex;gap:26px;align-items:flex-start}
.twocol .col{flex:1;min-width:0}
.twocol .col.narrow{flex:0 0 282px}
/* one panel, one border. The list name is the panel's header, the add row is
   the first row of the list, and both panels end on the same line. */
.lpan{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--card)}
.lhead{display:flex;align-items:baseline;padding:9px 13px 8px;font-size:11px;font-weight:600;
 letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
 border-bottom:1px solid var(--line)}
.lhead span{margin-left:auto;font-size:11px;font-weight:400;letter-spacing:0;
 text-transform:none;color:var(--faint)}
/* the wheel belongs to the panel under the pointer, and stops there */
.twocol .escroll{height:296px;margin-top:0;border:none;border-radius:0;
 overscroll-behavior:contain}
.escroll{overscroll-behavior:contain}
#app{scrollbar-gutter:stable}
/* The rail scrolls up and down and never sideways. Shut, its content rounds to
   one pixel wider than the column (52 against 51) and Chrome answers with a
   horizontal scrollbar for a pixel nothing lives in. Nothing is clipped by
   refusing it: measured, no child reaches past the rail's right edge. */
#rail{overflow-x:hidden}
.twocol .etb .acr{width:104px}
.twocol .etb .n{width:62px}
/* .etb .n sets 11.5px for the figures; a column NAME is 9px like its siblings */
.twocol .etb th.n{font-size:9px;letter-spacing:.09em}
.twocol .etb th{background:var(--card)}
/* the add row is a row: same width, same rhythm, no floating bar above the box */
.etb tr.addr td{padding:0;border-bottom:1px solid var(--line)}
.etb tr.addr:hover{background:none}
.addin{display:flex;align-items:center;gap:8px;width:100%;padding:9px 12px;
 font-family:inherit;font-size:12px;color:var(--goldtxt);background:none;border:none;
 cursor:pointer;text-align:left}
.addin svg{color:var(--gold)}
.addin:hover{background:var(--exbg)}
/* a field you can type in looks like one, even before you touch it */
.twocol .etx{border-color:var(--line2);background:var(--bg)}
/* two marks per row, so the column earns a little more width */
.twocol .etb .act{width:66px;white-space:nowrap}
.twocol .etb td{height:38px}
.twocol .etb .act .ico{padding:4px;border-radius:6px;background:none;border:none;cursor:pointer}
.twocol .etb tr:hover .ico{opacity:1}
.twocol .etb .ico:hover{color:var(--gold);background:var(--exbg)}
.twocol .etb .ico.del:hover{color:var(--today)}
.twocol .etb .ico.ok{color:var(--goldtxt);opacity:1}
.twocol .etb .ico.ok:hover{background:color-mix(in srgb,var(--gold) 16%,var(--bg))}
/* the row being edited is the only one holding fields, and it says so */
.etb tr.editing{background:var(--exbg);box-shadow:inset 2px 0 0 var(--gold)}
.etb tr.editing td{padding-top:5px;padding-bottom:5px}
.twocol .note3{margin-top:10px}
.twocol .addrow{margin-bottom:0}
.mfoot>span .mbtn.danger{float:none}


/* ---- Bill of Material --------------------------------------------------- */
.btb .qn{width:96px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.btb .u{width:52px;color:var(--muted)}
.btb .ac{width:76px;color:var(--muted)}
.btb .dt{width:96px;white-space:nowrap;font-variant-numeric:tabular-nums}
.btb .rl{width:150px;white-space:nowrap}
.btb .desc{width:100%;min-width:0}
.rel{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.rel.ok{color:var(--faint)}
.rel.od{color:var(--today);font-weight:600}
.rel.od i{display:block;font-style:normal;font-size:10px;font-weight:400;
 color:var(--today);opacity:.85}
.rel i{white-space:nowrap}
.lt{color:var(--today);font-weight:600}
/* the bills down the side, banded by project */
.bsplit{display:flex;gap:22px;align-items:flex-start}
.bside{flex:0 0 246px;min-width:0}
.bgrp{display:flex;flex-direction:column}
.bsg{display:flex;align-items:baseline;gap:8px;font-size:9.5px;letter-spacing:.08em;
 text-transform:uppercase;color:var(--faint);padding:14px 10px 5px;
 border-bottom:1px solid var(--line);margin-bottom:4px}
.bgrp:first-child .bsg{padding-top:2px}
.bsgc{letter-spacing:0;color:var(--muted);font-size:10px}
.bsgn{margin-left:auto;letter-spacing:0;text-transform:none;font-size:10.5px}
.bsi{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font-family:inherit;
 background:none;border:1px solid transparent;border-radius:9px;padding:7px 10px;cursor:pointer;
 color:var(--txt);margin-bottom:1px}
.bsi:hover{background:var(--exbg)}
.bsi.on{background:var(--bg);border-color:var(--line2);box-shadow:0 1px 2px rgba(20,18,14,.07)}
body.dark .bsi.on{box-shadow:0 1px 2px rgba(0,0,0,.3)}
.bsi.on .bsn{color:var(--goldtxt);font-weight:600}
.bsc{font-size:11px;color:var(--faint);flex:none}
.bsn{font-size:12px;min-width:0}
.bsn i{display:block;font-style:normal;font-size:10.5px;color:var(--faint);font-weight:400;
 margin-top:1px}
.bsl{margin-left:auto;font-size:10.5px;color:var(--today);font-weight:600;flex:none}
.bmain{flex:1;min-width:0}
.bmh{display:flex;align-items:center;gap:14px;flex-wrap:nowrap;padding:0 0 9px;
 border-bottom:1px solid var(--line);margin-bottom:2px}
.bmh .bt{flex:1;min-width:0}
.bmh .pact{margin-left:auto}
.bt>b{display:block;font-size:14px;font-weight:600;white-space:nowrap}
.bt>b .mono{color:var(--muted);margin-right:6px}
.bt>span{display:block;font-size:11.5px;color:var(--faint);margin-top:2px;white-space:nowrap;
 overflow:hidden;text-overflow:ellipsis}
/* the project this bill belongs to, said once above its lines */
.bpj{font-weight:400;color:var(--faint);font-size:12px;margin-right:9px;
 padding-right:10px;border-right:1px solid var(--line2)}