.admin{color:var(--admin,#1f7a8c)!important}.admin-box{border-color:var(--admin,#1f7a8c)!important;background:var(--admin-bg,#e3f2f5)!important}   /* only the project's admins see it (Design 37, P-271); god's, after it, wins */
@keyframes d2setfl{from{box-shadow:0 0 0 3px var(--attn,#7a7fc9);background-color:var(--sun-bg,#fff6e0)}to{box-shadow:0 0 0 3px transparent}}.setflash{animation:d2setfl 1.5s ease-out}
.god{color:var(--god,#7b3fb8)!important}.god-box{border-color:var(--god,#7b3fb8)!important;background:var(--god-bg,#f2eafb)!important}td.god-cell,th.god{background:var(--god-bg,#f2eafb)}   /* only god sees it (UiSpec 2.1, 2026-09-27) */
td.god-cell input::placeholder{color:var(--soft,#777);opacity:.6}   /* an empty override reads empty, not as a value (P-700) */
.d2wrap{max-width:1080px;margin:0 auto;padding:0 clamp(16px,4vw,32px);box-sizing:border-box;width:100%}
.d2top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0;flex-wrap:wrap}
.d2top .mark{display:flex;align-items:center;gap:10px;font:800 calc(22px*var(--fz,1)) var(--display);text-decoration:none;letter-spacing:-.01em;color:var(--ink)}.d2top .mark svg{width:30px;height:30px}
.d2top nav{display:flex;gap:4px;flex-wrap:wrap}.d2top nav a{text-decoration:none;color:var(--soft);padding:6px 10px;border-radius:999px;font:calc(15px*var(--fz,1)) var(--body)}
.d2top nav a:hover,.d2top nav a[aria-current]{color:var(--ink);background:var(--card)}
/* Pipeline in the bar (^menu-2): the admin colour comes from .god; on a narrow screen it is the first label to go, and
   its icon takes over, so the other four keep their words. The label stays in the markup for a screen reader. */
.d2top nav a.pipe i{display:none;font-style:normal;line-height:1}
@media (max-width:620px){.d2top nav a.pipe i{display:inline}.d2top nav a.pipe span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}


.d2top .right{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap;margin-left:auto}.d2top .left{display:flex;align-items:center;gap:6px;min-width:0}
.d2srch{display:flex;align-items:center;margin:0;border-radius:999px;transition:background .15s,box-shadow .15s}
.d2srch .sbtn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:none;color:var(--soft);cursor:pointer;opacity:.75}
.d2srch .sbtn:hover{opacity:1;background:var(--card)}.d2srch .sbtn svg{width:17px;height:17px}
.d2srch input{width:0;padding:0;border:0;outline:0;background:none;color:var(--ink);font:calc(15px*var(--fz,1)) var(--body);transition:width .2s,padding .2s}
.d2srch.open{background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}.d2srch.open .sbtn{opacity:1}.d2srch.open input{width:min(46vw,220px);padding:6px 12px 6px 0}
.d2top button.dsync{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;min-width:34px;padding:0;margin:0;border-radius:50%;border:0;cursor:pointer;background:none;color:var(--soft);box-shadow:inset 0 0 0 1px var(--line);font:inherit}.d2top button.dsync svg{flex-shrink:0;display:block}
.d2top button.dsync:hover{color:var(--ink)}.d2top button.dsync.on{color:var(--paper,#fff);background:var(--indigo);box-shadow:none}.d2top button.dsync.on svg{animation:d2spin 3s linear infinite}
@keyframes d2spin{to{transform:rotate(360deg)}}
/* The blocked flag (Design 40, P-420): next to the sync indicator, the Architect's only. It pulses so it is caught out
   of the corner of an eye, and is steady — the same colour, at full strength — under prefers-reduced-motion. */
.d2top .bflag{display:inline-flex;align-items:center;gap:4px;justify-content:center;min-width:34px;height:34px;padding:0 8px;border-radius:17px;text-decoration:none;color:var(--rose,#c0304f);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rose,#c0304f) 45%,transparent);font:700 calc(13px*var(--fz,1)) var(--body);animation:d2bflag 1.6s ease-in-out infinite}
.d2top .bflag svg{flex-shrink:0;display:block}.d2top .bflag:hover{color:var(--paper,#fff);background:var(--rose,#c0304f);box-shadow:none;animation:none}
@keyframes d2bflag{0%,100%{opacity:1}50%{opacity:.4}}
@media (prefers-reduced-motion:reduce){.d2top .bflag{animation:none;opacity:1}}
.umenu>summary{position:relative}.umenu>summary .wdot{position:absolute;top:-2px;right:-2px;width:12px;height:12px;border-radius:50%;background:var(--rose,#c0304f);box-shadow:0 0 0 2px var(--paper,#fff)}
.umenu a .wn{display:inline-block;min-width:20px;margin-left:6px;padding:0 6px;border-radius:999px;background:var(--rose,#c0304f);color:#fff;font:700 calc(13px*var(--fz,1))/20px var(--body);text-align:center}
.dpill{text-decoration:none;font:600 calc(14px*var(--fz,1)) var(--body);color:var(--soft);padding:6px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line)}
.dpill.on{color:#1d1d1b;background:var(--sun,#f2b84b);box-shadow:none}.dpill b{font-weight:800}.dpill.bad{color:#fff;background:var(--rose,#c0304f)}.dpill.others{color:#5c4400;background:#fff3b0;box-shadow:inset 0 0 0 1px #f2d25b}
.umenu{position:relative}.umenu>summary{list-style:none;cursor:pointer;width:34px;height:34px;border-radius:50%;background:var(--indigo);color:var(--paper,#fff);font:800 calc(16px*var(--fz,1))/34px var(--display);text-align:center;user-select:none}
.umenu>summary::-webkit-details-marker{display:none}.umenu[open]>summary{box-shadow:0 0 0 3px var(--indigo-bg,var(--line))}
.umenu .pop{position:fixed;right:8px;top:60px;z-index:50;min-width:210px;max-width:calc(100vw - 16px);max-height:calc(100vh - 76px);overflow:auto;box-sizing:border-box;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.umenu .who{padding:8px 10px 6px;font-size:calc(14px*var(--fz,1));color:var(--soft);overflow-wrap:anywhere}.umenu .who b{color:var(--ink)}
.umenu a,.umenu button{display:block;width:100%;text-align:left;text-decoration:none;color:var(--ink);background:none;border:0;border-radius:9px;padding:8px 10px;font:calc(16px*var(--fz,1)) var(--body);cursor:pointer}
.umenu a:hover,.umenu button:hover{background:var(--paper)}.umenu hr{border:0;border-top:1px solid var(--line);margin:5px 4px}.umenu form{margin:0}


.d2top nav a.btn{margin-left:6px}
.umenu>summary .wdot.prio,.umenu a .wn.prio{background:var(--indigo,#5550d8)}
/* ESP (^esp-ui-1..4, Design#esp): the toggle right of Dev-sync, the same round kind; a link while its help is unseen */
.d2top .dsync.esp{position:relative}.d2top a.dsync{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;min-width:34px;border-radius:50%;color:var(--soft);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none}.d2top a.dsync:hover{color:var(--ink)}
.d2top button.dsync.esp.on svg{animation:none}.d2top .dsync.esp .dot{display:none;position:absolute;top:3px;right:3px;width:7px;height:7px;border-radius:50%;background:#639922}.d2top .dsync.esp.on.tgt .dot{display:block}
.espHl{outline:2px solid var(--indigo,#378add);outline-offset:4px;border-radius:6px;transition:outline-color .4s}
.esptoast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:10px;max-width:min(560px,calc(100vw - 24px));padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card,#242422);color:var(--ink);box-shadow:0 6px 24px rgba(0,0,0,.25);font-size:calc(14px*var(--fz,1));transition:opacity .4s}
.esptoast.fade{opacity:0}.esptoast .eg{color:var(--indigo,#85b7eb);flex:none}.esptoast .et{flex:1;min-width:0}.esptoast .ew{font-size:calc(12px*var(--fz,1));color:var(--soft);margin-top:2px}
.turnon{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;padding:12px 14px}.turnon p{margin:0}
/* ESP asked to turn on (^esp-ui-6): a slim bar under the top bar, 60 s; and the 1.5 s flash by the toggle on each tap (^esp-ui-5) */
.espbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 12px;border-bottom:1px solid var(--line);background:var(--card,#242422);color:var(--ink);font-size:calc(14px*var(--fz,1))}
.espbar .eg{color:var(--indigo,#85b7eb);flex:none}.espbar .et{flex:1;min-width:0}.espbar a{color:var(--soft);font-size:calc(13px*var(--fz,1))}
.espflash{position:fixed;transform:translateX(-50%);z-index:61;padding:4px 10px;border-radius:8px;border:1px solid var(--line);background:var(--card,#242422);color:var(--ink);font-size:calc(13px*var(--fz,1));white-space:nowrap;pointer-events:none;opacity:0;animation:espflash 1.5s ease forwards}
@keyframes espflash{0%{opacity:0}20%{opacity:1}70%{opacity:1}100%{opacity:0}}.mark svg.wm{width:auto;height:30px}@keyframes d2blink{50%{opacity:0}}.d2cur{animation:d2blink 1.1s steps(1) infinite}
@media (prefers-reduced-motion:reduce){.d2cur{animation:none}}/* The one confirm dialog (SpecUi ^ui-confirm-1, src/shell/ui/confirm.ts): a box over a dimmed page; action first */
.d2cf{position:fixed;inset:0;z-index:2000;background:rgba(10,12,20,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.d2cfb{background:var(--paper,#fff);color:var(--ink,#111);border:1px solid var(--line,#ddd);border-radius:16px;padding:20px 22px;width:100%;max-width:440px;box-shadow:0 12px 40px rgba(0,0,0,.28)}
.d2cfb h2{margin:0 0 8px;font:800 calc(18px*var(--fz,1)) var(--display,inherit);line-height:1.3}
.d2cfb .cft{margin:0 0 6px}.d2cfb .cfl{margin:0 0 6px;color:var(--soft,#666);font-size:calc(14px*var(--fz,1))}
.d2cfb .cfr{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}/* The one error pop-up (SpecUi #ui-errors, src/shell/ui/errpop.ts): red, near the top, over the page; fades in and out */
.d2err{position:fixed;top:14px;left:50%;transform:translate(-50%,-8px);z-index:2100;max-width:min(560px,calc(100vw - 24px));display:flex;gap:12px;align-items:flex-start;background:var(--rose,#c0304f);color:var(--card,#fff);border-radius:12px;padding:10px 12px 10px 16px;box-shadow:0 8px 28px rgba(0,0,0,.25);font-size:calc(14px*var(--fz,1));line-height:1.4;opacity:0;transition:opacity .3s,transform .3s}
.d2err.on{opacity:1;transform:translate(-50%,0)}
.d2err-m{flex:1;overflow-wrap:anywhere}
.d2err-x{background:transparent;border:0;color:inherit;font-size:calc(15px*var(--fz,1));line-height:1;padding:2px 4px;cursor:pointer;opacity:.85}.d2err-x:hover{opacity:1}

/* Role chips (Design 31.2, UiSpec 2.9.1): the role an AI's token carries, beside the agent's name wherever a record
   says who wrote it. Colour marks the role, never the person: coder teal, designer purple, every other role grey. The
   tokens live here, not in a page stylesheet, so every stylesheet and dark mode get the same three. */
:root{--role-coder:#1f7a8c;--role-coder-bg:#e3f2f5;--role-designer:#7b3fb8;--role-designer-bg:#f2eafb;--role-other:#6b6a66;--role-other-bg:#eeedea}
@media (prefers-color-scheme:dark){:root{--role-coder:#6cc3d5;--role-coder-bg:#17292d;--role-designer:#c5a0f5;--role-designer-bg:#2a2038;--role-other:#9c9a93;--role-other-bg:#26251f}}
.rch{display:inline-block;font:600 calc(11px*var(--fz,1)) var(--body);padding:1px 7px;border-radius:999px;white-space:nowrap;line-height:1.5;background:var(--role-other-bg);color:var(--role-other)}
.rch-coder{background:var(--role-coder-bg);color:var(--role-coder)}.rch-designer{background:var(--role-designer-bg);color:var(--role-designer)}
/* the who-line (UiSpec 2.9.1): <handle> via <agent> <role chip>, or <handle> · in person. The handle in --attn like a
   person's name anywhere else (P-443), the agent's name in mono, *via* and *in person* quiet. */
.wl-by{color:var(--attn)}.wl-via,.wl-ip{color:var(--soft)}
.wl-ag{text-decoration:none;color:inherit}.wl-ag code{font:400 calc(12px*var(--fz,1)) var(--mono)}.wl-ag:hover code{text-decoration:underline}
.wl-ag+.rch{margin-left:5px}

/* status chips, one palette on every page (P-121; UiSpec 2.9): from the style tokens, so every stylesheet and dark mode get them */
.ps{display:inline-block;font:600 calc(12px*var(--fz,1)) var(--body);padding:2px 9px;border-radius:999px;white-space:nowrap;border:1px solid transparent;line-height:1.4}
.ps-new{background:var(--soft);color:var(--card)}.ps-pending{background:var(--soft);color:var(--card);border:1px dashed var(--ink)}
.ps-in-progress{background:var(--leaf);color:var(--card)}.ps-waiting,.ps-waiting-input{background:var(--sun);color:#2b1d00}
.ps-waiting-error{background:var(--rose);color:var(--card)}.ps-review{background:transparent;color:var(--review,#7a7fc9);border:1px solid var(--review,#7a7fc9)}
.ps-done{background:transparent;color:var(--leaf);border-color:var(--leaf)}.ps-done::before{content:"✓ "}
/* To look at (P-524): a done item still waiting for the viewer's look. The done colour family, softly filled so it
   reads as something to do rather than something finished, and no ✓ — the ✓ is what Seen gives it. */
.ps-look{background:color-mix(in srgb,var(--leaf) 15%,transparent);color:color-mix(in srgb,var(--leaf) 85%,var(--ink));border-color:color-mix(in srgb,var(--leaf) 45%,transparent)}
/* Paused (^pipe-57) takes the pause glyph and the warning colour: it is a hold a person means to lift. Parked keeps the
   grey and takes a P in a circle, because two grey chips both reading "⏸" told the two apart by nothing. */
.ps-self{background:transparent;color:color-mix(in srgb,var(--sun) 55%,#000);border:1px solid color-mix(in srgb,var(--sun) 55%,#000)}li:has(.ps-self) .tt,.bcard:has(.ps-self) b{color:var(--soft)}
.alm{display:inline-block;font-size:.72em;font-weight:700;letter-spacing:.02em;padding:0 6px;margin:0 4px;border-radius:9px;border:1px solid currentColor;color:var(--ink);vertical-align:middle}
/* the Rush chip (^pipe-68, UiSpec ^ui-rush; P-576): the alone chip's shape in the attention colour, filled, so one
   glance tells a rushed row from the quiet chips around it — it is the one chip on a row that a person put there. */
.rsh{display:inline-block;font-size:.72em;font-weight:700;letter-spacing:.02em;padding:0 6px;margin:0 4px;border-radius:9px;border:1px solid var(--attn,#7a7fc9);background:var(--attn,#7a7fc9);color:var(--card,#fff);vertical-align:middle;white-space:nowrap}
.ps-paused{background:transparent;color:var(--sun);border:1px solid var(--sun)}.ps-paused::before{content:"⏸ "}
.ps-parked{background:var(--line);color:var(--soft)}.ps-parked::before{content:"Ⓟ "}
.ps-dropped{background:var(--line);color:var(--soft);text-decoration:line-through}.ps-moved,.ps-todo{background:var(--line);color:var(--soft);font-style:italic}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:calc(17px*var(--fz,1))/1.55 var(--body);padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
a{color:inherit}.wrap{max-width:1080px;margin:0 auto;padding:0 clamp(16px,4vw,32px) 48px}
:focus-visible{outline:3px solid var(--indigo);outline-offset:3px;border-radius:6px}
h1{font:800 calc(clamp(30px,4.2vw,44px)*var(--fz,1))/1.05 var(--display);letter-spacing:-.025em;margin:12px 0 8px}
h1 small{font:600 calc(16px*var(--fz,1)) var(--mono);color:var(--soft);letter-spacing:0;vertical-align:middle;margin-left:6px}
.lede{color:var(--soft);margin:0 0 14px;max-width:40em}
code{font:400 calc(14px*var(--fz,1)) var(--mono)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Appearance (P-294, Design 37 #appearance): text size on html[data-fs] (small · normal · medium · large), screen width on
   html[data-w=wide]. Every font size is calc(Npx*var(--fz,1)), so the text itself grows and the layout reflows around it (a zoom didn't reach the text on the iPad); the intro help text at the top of the pipeline and similar pages
   stays its normal size (read once). Wide lifts the page width; prose stays readable (~90ch). */
html[data-fs=small]{--fz:.9}html[data-fs=medium]{--fz:1.1}html[data-fs=large]{--fz:1.25}
/* The intro help text reads once, so it keeps its normal size whatever the text-size setting is. The pin is on
   .lede alone: it used to be on .pm-text as well, which pinned everything beside the lede in the pipeline page's
   intro column — including the quick legend, which is why the legend could not be made to scale (P-529). */
html[data-fs] .lede{--fz:1}
html[data-w=wide] :is(.wrap,.d2wrap,.narrow,.narrow:has(.tocw)){max-width:none}html[data-w=wide] .md{max-width:960px}
html[data-w=wide] .tocw{grid-template-columns:minmax(0,960px) 260px}
html[data-w=wide] .narrow>.meta{max-width:960px}html[data-w=wide] .narrow:has(.tocw)>.meta{max-width:1244px}html[data-w=wide] body:has(.tocw) .narrow>.meta{max-width:1244px}html[data-w=wide][data-toc=off] .narrow>.meta{max-width:960px}

/* one-off layout helpers that were inline style= attributes (P-324): classes, so their font sizes follow the text size
   (Design 37 #appearance, APPEAR-3); !important keeps the precedence the inline style had. Colours from data stay inline. */
.u-mw0{max-width:none!important}.u-w100{width:100%!important}.u-inl{display:inline!important}.u-if{display:inline-flex!important}.u-ci{color:inherit!important}.u-nd{text-decoration:none!important}
.u-ox{overflow-x:auto!important}.u-pre{white-space:pre-wrap!important;overflow-wrap:anywhere!important}.u-vm{vertical-align:middle!important}
.u-m0{margin:0!important}.u-m8{margin:8px 0!important}.u-ml8{margin:0 0 0 8px!important}.u-mt12{margin-top:12px!important}.u-mt18{margin-top:18px!important}.u-mt22{margin-top:22px!important}.u-p0{padding:0!important}
.u-l70{left:70%!important}.u-l85{left:85%!important}.u-g10{gap:10px!important;align-items:center!important}.u-g14{gap:14px!important;align-items:center!important;flex-wrap:wrap!important}
.u-amber{color:#8a5a00!important}.u-amberbg{background:#8a5a00!important}.u-fw4{font-weight:400!important}
.u-mono13{font:calc(13px*var(--fz,1)) var(--mono)!important}.u-mono13l{font:calc(13px*var(--fz,1))/1.45 var(--mono)!important}.u-mono15{font:calc(15px*var(--fz,1)) var(--mono)!important}
.u-f13p{font-size:calc(13px*var(--fz,1))!important;padding:2px 10px!important}
.u-linkbtn{font:inherit!important;color:inherit!important;background:none!important;border:0!important;padding:0!important;text-decoration:underline!important;cursor:pointer!important}
.u-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}

/* Tile and card grids pull left and cap at 4-5 per row (UiSpec ^tile-1): one rule for every one of them — the toolbox's
   and the Settings page's tiles, Raz Admin's cards, the wiki's welcome cards, the topics list, the two Components lists,
   the CDN's files, the guardians, the status metrics and System status's five counts. auto-fill fills the row at --tile a tile and the max-width stops
   it at five; min(…,100%) keeps the grid inside its container, so no tile is ever cut off at the right edge, and
   margin-left:0 starts it at the page's left content edge, where the text above it starts. Narrow screens are untouched:
   a max-width only ever bites above itself. A page that wants a wider tile or a tighter gap sets --tile and --tileg;
   page stylesheets set the look of a tile, never this grid. The object browser (/dom) is its own document and can't reach
   this rule: it carries the same numbers in src/ui/browser.html. */
.tiles,.rcards,.wcards,.tps,.lgrid,.pgrid,.gcs,.mets,.stats,ul.files{--tile:210px;--tileg:12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--tile),1fr));gap:var(--tileg);max-width:min(calc(5*var(--tile) + 4*var(--tileg)),100%);margin-left:0;margin-right:0}
/* One action-button style on every page (P-445, P-457): every <button> and every .btn looks the same unless it is one of
   the other kinds below (switch, icon button, tab, segmented toggle) or a page's own named kind listed in
   test/ui/controls.test.ts. Sizes: .sm (or a .sm row), .lg. States: .primary, .danger, .on (pressed). */
.btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
button,.btn{font:600 calc(14px*var(--fz,1)) var(--body);color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:4px 11px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
button:hover,.btn:hover{border-color:var(--indigo)}button.primary,.btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
button.danger,.btn.danger{color:var(--rose);border-color:color-mix(in srgb,var(--rose) 45%,transparent)}button[disabled],.btn[disabled]{opacity:.5;cursor:default}
button.sm,.btn.sm,.sm button,.sm .btn{font-size:calc(12px*var(--fz,1));padding:1px 7px;min-height:22px;border-radius:6px}
/* one segmented toggle (P-457): a choice of one out of a few within a page — joined segments, the chosen one tinted;
   chosen = <b>, .on, [aria-selected=true], [aria-current] or a checked radio inside a label. A page sets only where it
   sits (margins, when it shows). Tabs that move between pages or panes are .tabbar, below. */
.tabs{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:999px;overflow:hidden;vertical-align:middle;font:600 calc(14px*var(--fz,1)) var(--body)}
.tabs>a,.tabs>b,.tabs>button,.tabs>label{padding:4px 14px;text-decoration:none;color:var(--ink);font:inherit;line-height:1.4;background:none;border:0;border-left:1px solid var(--line);border-radius:0;cursor:pointer;display:inline-flex;align-items:center}
.tabs>:first-child{border-left:0}.tabs>a:hover,.tabs>button:hover,.tabs>label:hover{background:var(--card)}
.tabs>b,.tabs>.on,.tabs>[aria-selected=true],.tabs>[aria-current],.tabs>label:has(input:checked){background:var(--indigo-bg,#eef0ff);color:var(--indigo,#3b3fb6);cursor:default}
.tabs input{position:absolute;opacity:0;pointer-events:none}.tabs>label:has(input:focus-visible){outline:2px solid var(--indigo);outline-offset:-2px}
.tabs>label:has(input:disabled){cursor:default;opacity:.55}.tabs>label:has(input:checked:disabled){opacity:1}
.tabs.sm{font-size:calc(13px*var(--fz,1))}.tabs.sm>*{padding:2px 10px}
button.primary:hover,.btn.primary:hover{border-color:var(--ink);filter:brightness(1.15)}
/* one dropdown style on every page (P-445): the button's height, border, corners and font, the page's own colours, a ▾
   chevron in place of the browser's arrow; a page's own select rules still come after and win where it needs a change */
select{font:600 calc(14px*var(--fz,1)) var(--body);color:var(--ink);background-color:var(--card);border:1px solid var(--line);border-radius:8px;padding:4px 28px 4px 10px;min-height:30px;cursor:pointer;-webkit-appearance:none;appearance:none;max-width:100%;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239c9a93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
select:hover{border-color:var(--indigo)}select:focus-visible{outline:2px solid var(--attn,#7a7fc9);outline-offset:1px}
select[multiple]{background-image:none;padding-right:10px}
select:disabled{opacity:.5;cursor:default}
select.sm,.sm select{font-size:calc(13px*var(--fz,1));padding:2px 24px 2px 8px;min-height:26px;background-position:right 8px center}
button.lg,.btn.lg{font-size:calc(16px*var(--fz,1));padding:9px 18px}
button.on,.btn.on{background:var(--indigo-bg,#eef0ff);color:var(--indigo,#3b3fb6);border-color:var(--indigo,#3b3fb6)}
/* tabs (P-457): a row that moves between pages or panes — pills, the current one filled. Put `tabbar` on the row; the
   current tab is .on, [aria-current], [aria-selected=true] or a label whose radio is checked. */
.tabbar{display:flex;gap:6px;flex-wrap:wrap}
.tabbar>a,.tabbar>button,.tabbar>label{font:600 calc(14px*var(--fz,1)) var(--body);color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:999px;padding:5px 14px;min-height:0;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.tabbar>a:hover,.tabbar>button:hover,.tabbar>label:hover{border-color:var(--indigo)}
.tabbar>.on,.tabbar>[aria-current],.tabbar>[aria-selected=true],.tabbar>[aria-selected="true"]{background:var(--ink);color:var(--paper,#fff);border-color:var(--ink)}
/* switch (P-457): a button that turns something on or off (aria-pressed) — a small track and knob before its label, no
   box, so it never reads as an action. Automatic for every aria-pressed button but a segment of a toggle. */
button:where([aria-pressed]:not(.tabs>button):not(.dsync)){background:none;border:0;padding:2px 4px;min-height:0;color:var(--soft);display:inline-flex;align-items:center;gap:6px;border-radius:6px}
button:where([aria-pressed]:not(.tabs>button):not(.dsync))::before{content:"";flex:none;width:24px;height:14px;border-radius:999px;background:var(--line) radial-gradient(circle at 7px 7px,var(--card) 4.5px,transparent 5px);transition:background .15s}
button:where([aria-pressed=true]:not(.tabs>button):not(.dsync)){color:var(--ink)}
button:where([aria-pressed=true]:not(.tabs>button):not(.dsync))::before{background:var(--indigo,#3b3fb6) radial-gradient(circle at 17px 7px,#fff 4.5px,transparent 5px)}
button:where([aria-pressed]:not(.tabs>button):not(.dsync)):hover{background:none;color:var(--ink)}
/* icon button (P-457): a bare glyph, no box — the ×, a fold, a copy icon */
.ibtn{background:none;border:0;color:var(--soft);padding:2px 6px;border-radius:6px;font:inherit;min-height:0;cursor:pointer}.ibtn:hover{color:var(--ink);background:var(--line)}