/* Cover Factory · next · components (D2, 2026-09-23). The board's inline CSS moved here and restyled per ui/DIRECTION.md.
   Every selector the scripts render against is kept; only the look changed. Desktop only: below 1200 px #narrow covers the app. */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);scrollbar-width:thin;scrollbar-color:rgb(var(--p-mist) / .18) transparent}
html,body{margin:0;color:var(--text);font:400 var(--fs-3)/21px var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{position:relative;min-height:100dvh;background:transparent}
/* one soft light from the top-left (ref-3); fixed, painted once, behind everything */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(1100px 620px at 8% -8%,rgba(140,158,255,.13),transparent 62%),radial-gradient(900px 520px at 104% 108%,rgba(118,104,255,.05),transparent 60%)}
/* light rays (owner, ref-3): three blurred shafts falling from the top edge; fixed, painted once, no motion */
body::after{content:"";position:fixed;inset:-20% -10% 0;z-index:-1;pointer-events:none;background:linear-gradient(112deg,transparent 30%,rgba(179,192,255,.075) 38%,rgba(179,192,255,.02) 46%,transparent 52%),linear-gradient(104deg,transparent 46%,rgba(179,192,255,.06) 54%,transparent 60%),linear-gradient(118deg,transparent 60%,rgba(255,143,208,.035) 66%,transparent 72%);filter:blur(28px);-webkit-mask-image:linear-gradient(#000 20%,rgba(0,0,0,.35) 60%,transparent 92%);mask-image:linear-gradient(#000 20%,rgba(0,0,0,.35) 60%,transparent 92%)}
html:has(dialog:modal){overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3{text-wrap:balance}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--accent-line)}
.num,.count{font-variant-numeric:tabular-nums}
.thin{letter-spacing:-.06em}
.mono{font-family:var(--mono)}
.muted{color:var(--text-2)}
.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.i{width:var(--icon-md);height:var(--icon-md);flex:none;vertical-align:-.2em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* buttons (DR-64): S 36 · M 44 · L 52, every button a pill, press to .97. Coloured solids share one depth (--btn-depth), no rim, no ring.
   Families differ only in colour; Paid and Generate add a tinted glow. Old names stay: .sm and .sm2 are S, .amber is .paid. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--ctl-s);padding:0 var(--s-4);border-radius:var(--pill);border:1px solid var(--line-strong);background:var(--raised);color:var(--text);font:500 var(--fs-2)/1 var(--font);white-space:nowrap;box-shadow:var(--hl-top);transition:background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-1) var(--ease)}
.btn .i{width:16px;height:16px;flex:none}
.btn:hover{background:var(--hover);border-color:var(--line-hover)}
.btn:active{transform:scale(var(--m-press))}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.btn.md{height:var(--ctl-m);gap:var(--s-2);padding:0 var(--s-5);font-size:var(--fs-3)}
.btn.md .i{width:18px;height:18px}
.btn.lg{height:var(--ctl-l);gap:var(--s-2);padding:0 var(--s-6);font:600 var(--fs-4)/1 var(--font)}
.btn.lg .i{width:20px;height:20px}
.btn.sm,.btn.sm2{height:var(--ctl-s);padding:0 var(--s-4);font-size:var(--fs-2)}
.btn.sm .i,.btn.sm2 .i{width:16px;height:16px}
.btn.wide{width:100%}
.btn.icon{width:var(--ctl-s);padding:0}.btn.md.icon{width:var(--ctl-m)}.btn.lg.icon{width:var(--ctl-l)}
.btn.primary{background:linear-gradient(180deg,var(--primary),var(--primary-2)) var(--primary-2);border-color:transparent;color:var(--on-primary);font-weight:600;box-shadow:var(--btn-depth)}
.btn.primary:hover{background:var(--primary-hover);border-color:transparent}
.btn.green{background:var(--green);border-color:transparent;color:var(--on-green);font-weight:600;box-shadow:var(--btn-depth)}
.btn.green:hover{background:var(--green-hover);border-color:transparent}
.btn.red{background:var(--red);border-color:transparent;color:var(--on-red);font-weight:600;box-shadow:var(--btn-depth)}
.btn.red:hover{background:var(--red-hover);border-color:transparent}
.btn.ghost{background:transparent;border-color:transparent;color:var(--text-2);box-shadow:none}
.btn.ghost:hover{background:var(--raised);border-color:transparent;color:var(--text)}
/* Paid (DR-55, DR-65 A): the orange primitives; hover darkens, the glow carries the change */
.btn.paid,.btn.amber{--pb:var(--paid-1);--pt:var(--paid-2);--pg:var(--paid-glow);border-color:transparent;background:linear-gradient(180deg,var(--pb),var(--pt));color:var(--white);font-weight:600;box-shadow:var(--btn-depth),0 4px 14px -4px var(--pg)}
.btn.paid:hover,.btn.amber:hover{--pb:var(--paid-hover-1);--pt:var(--paid-hover-2);--pg:var(--paid-glow-hover);border-color:transparent;background:linear-gradient(180deg,var(--pb),var(--pt))}
.btn.paid:active,.btn.amber:active{--pb:var(--paid-press-1);--pt:var(--paid-press-2);--pg:var(--paid-glow-press);background:linear-gradient(180deg,var(--pb),var(--pt))}
.btn.paid:focus-visible,.btn.amber:focus-visible{outline:2px solid var(--paid-1);outline-offset:2px}
/* outlines: the line is their shape */
.btn.green-o{background:transparent;border-color:var(--green-line-strong);color:var(--green);box-shadow:none}
.btn.green-o:hover{background:var(--green);border-color:transparent;color:var(--on-green)}
.btn.red-o,.btn.danger,.btn.rg-stop{background:var(--destr-bg);border-color:var(--destr-line);color:var(--destr-fg);box-shadow:none}
.btn.red-o:hover,.btn.danger:hover,.btn.rg-stop:hover{background:var(--destr-bg-hover);border-color:var(--destr-line-hover);color:var(--destr-fg-hover)}
.btn.red-o:active,.btn.danger:active,.btn.rg-stop:active{background:var(--destr-bg-press)}
/* Generate: the same component as Paid, in violet; the leading icon is a round chip 20 / 24 / 28 (DR-64 addition 2) */
.btn:is(.gen,.primary.gen){--gb:var(--gen-1);--gt:var(--gen-2);--gg:var(--gen-glow);border-color:transparent;background:linear-gradient(180deg,var(--gb),var(--gt));color:var(--gen-text);font-weight:600;box-shadow:var(--btn-depth),0 4px 14px -4px var(--gg)}
.btn:is(.gen,.primary.gen) .i{box-sizing:border-box;width:20px;height:20px;padding:var(--s-1);border-radius:50%;background:var(--gen-chip);color:var(--gen-chip-fg);stroke-width:2.4}
.btn.md:is(.gen,.primary.gen) .i{width:24px;height:24px;padding:5px}
.btn.lg:is(.gen,.primary.gen) .i{width:28px;height:28px;padding:6px}
.btn:is(.gen,.primary.gen):hover{--gb:var(--gen-hover-1);--gt:var(--gen-hover-2);--gg:var(--gen-hover-glow);border-color:transparent;background:linear-gradient(180deg,var(--gb),var(--gt))}
.btn:is(.gen,.primary.gen):active{--gb:var(--gen-press-1);--gt:var(--gen-press-2);--gg:var(--gen-press-glow);background:linear-gradient(180deg,var(--gb),var(--gt))}
/* disabled: one rule for :disabled, [aria-disabled], .dis, .im-off, .ir-off (page lanes drop their own). All five solids go neutral, never brown */
.btn:is(:disabled,[aria-disabled=true],.dis,.im-off,.ir-off){cursor:not-allowed;transform:none}
.btn.btn:not(.primary,.green,.red,.paid,.amber,.gen):is(:disabled,[aria-disabled=true],.dis,.im-off,.ir-off){opacity:1;filter:none;background:var(--raised);border-color:var(--line);color:var(--text-3);box-shadow:none}
.btn.btn:is(.primary,.green,.red,.paid,.amber,.gen):is(:disabled,[aria-disabled=true],.dis,.im-off,.ir-off){opacity:1;filter:none;background:var(--raised);border-color:transparent;color:var(--text-3);box-shadow:none}
.btn.btn:is(.gen,.primary.gen):is(:disabled,[aria-disabled=true],.dis,.im-off,.ir-off) .i{background:var(--line-hi);color:var(--text-3)}
.btn.btn.ghost:is(:disabled,[aria-disabled=true],.dis,.im-off,.ir-off){background:transparent;border-color:transparent}
/* loading: aria-busy replaces .busy; width and fill stay, no hover and no press */
.btn:is([aria-busy=true],.busy){cursor:progress;pointer-events:none}
.icon-btn{position:relative;display:inline-grid;place-items:center;width:var(--ctl-s);height:var(--ctl-s);border-radius:50%;color:var(--text-2);transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-1) var(--ease)}
.icon-btn:hover{background:var(--raised);color:var(--text)}
.icon-btn:active{transform:scale(var(--m-press))}
.icon-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.icon-btn .i{width:16px;height:16px}
.icon-btn.sm{width:var(--ctl-s);height:var(--ctl-s)}
.icon-btn.md{width:var(--ctl-m);height:var(--ctl-m)}.icon-btn.md .i{width:18px;height:18px}
.icon-btn.lg{width:var(--ctl-l);height:var(--ctl-l)}.icon-btn.lg .i{width:20px;height:20px}
.icon-btn.xs{width:var(--ctl-xs);height:var(--ctl-xs)}.icon-btn.xs .i{width:14px;height:14px}
.icon-btn.xs::after{content:"";position:absolute;inset:calc((var(--ctl-xs) - var(--hit-min)) / 2)}
.icon-btn.plate{background:var(--raised);box-shadow:var(--edge-strong);color:var(--text-2)}
.icon-btn.plate:hover{background:var(--hover);box-shadow:var(--edge-hover);color:var(--text)}
/* the close (DR-60): the plate circle with the cross; --x is its own size token, the hit area grows to --hit-min */
.x-btn{--x:var(--ctl-s);position:relative;display:inline-grid;place-items:center;flex:none;width:var(--x);height:var(--x);padding:0;border:0;border-radius:50%;background:var(--raised);box-shadow:var(--edge-strong);color:var(--text-2);cursor:pointer;transition:background-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),color var(--dur-2) var(--ease),transform var(--dur-1) var(--ease)}
.x-btn::after{content:"";position:absolute;inset:min(0px,calc((var(--x) - var(--hit-min)) / 2))}
.x-btn .i{width:16px;height:16px}
.x-btn.md{--x:var(--ctl-m)}.x-btn.md .i{width:18px;height:18px}
.x-btn.xs{--x:var(--ctl-xs)}.x-btn.xs .i{width:14px;height:14px}
.x-btn:hover{background:var(--hover);box-shadow:var(--edge-hover);color:var(--text)}
.x-btn:active{background:var(--active);transform:scale(var(--m-press))}
.x-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.x-btn.img{background:var(--on-image-2);box-shadow:inset 0 0 0 1px rgb(var(--p-white-rgb) / .16);color:var(--text);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.x-btn.img:hover{background:var(--on-image);box-shadow:inset 0 0 0 1px rgb(var(--p-white-rgb) / .33)}
/* the Magnific balance's refresh (0028): beside every balance, a spinner while the reading is on its way */
.bal-rf{flex:none;vertical-align:middle}
.bal-rf .i{color:inherit}
.bal-rf.busy .i{animation:spin var(--loop-spin) linear infinite}
@media (prefers-reduced-motion:reduce){.bal-rf.busy .i{animation:none;opacity:.55}}
.stat .bal-rf{margin:0 -8px 0 -4px}
.stat .bal-rf .i{width:var(--icon-sm);height:var(--icon-sm);color:inherit}
.qb-num .bal-rf{align-self:center;margin:0 -6px 0 -2px}
.icon-btn[aria-disabled=true],.icon-btn[aria-disabled=true]:hover,.icon-btn:disabled,.icon-btn:disabled:hover{background:transparent;box-shadow:none;color:var(--text-3);cursor:not-allowed}   /* :disabled: the editor's close and More while a write runs (review R3) */
.icon-btn:disabled:active{transform:none}
.link{padding:var(--s-1) 6px;border-radius:var(--r-1);color:var(--accent);font:500 var(--fs-2)/1 var(--font);text-decoration:none;transition:color var(--dur-2) var(--ease),scale var(--dur-1) var(--ease)}
.link:hover{color:var(--accent-hover)}
button.link:not(:disabled):active{scale:var(--m-press)}   /* MOTION-2: the text actions (Undo approval, Rebuild, Edit) answer the press too */
.chip{display:inline-flex;align-items:center;gap:6px;height:var(--ctl-s);padding:0 var(--s-4);border-radius:var(--pill);border:1px solid var(--line-strong);background:transparent;color:var(--text-2);font:500 var(--fs-2)/1 var(--font);white-space:nowrap;transition:background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),transform var(--dur-1) var(--ease)}
.chip:has(.count,.badge){padding-right:var(--s-2)}
.chip:hover{color:var(--text);border-color:var(--line-hover);background:var(--hover-wash)}
.chip:active{transform:scale(var(--m-press));background:var(--press-wash)}
.chip:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
:is(.tab,.subtab,.ptab,.seg button,button.state-pill):active{scale:var(--m-press)}
.chip[aria-pressed=true]{background:var(--primary);border-color:transparent;color:var(--ink)}
/* the count bubble inside a chip is the badge counter, S (DR-59); the old .count markup renders the same */
.chip .count{display:inline-grid;place-items:center;box-sizing:border-box;height:20px;min-width:20px;padding:0 6px;border-radius:var(--pill);background:var(--count-bg);color:var(--text-2);font:600 var(--fs-1)/1 var(--font);font-variant-numeric:tabular-nums}
.chip[aria-pressed=true] .count{background:rgb(var(--p-ink-rgb) / .14);color:var(--ink)}

/* @lane NAV begin: rail */
/* the left rail (owner's composition): a floating glass column, circular tabs, tooltips instead of labels */
.rail{position:fixed;left:16px;top:16px;bottom:16px;z-index:11;display:flex;flex-direction:column;align-items:center;gap:6px;width:64px;padding:var(--s-3) 0;border-radius:var(--r-6);background:linear-gradient(180deg,rgb(var(--p-mist) / .07),transparent 30%),var(--glass);-webkit-backdrop-filter:blur(var(--blur)) saturate(160%);backdrop-filter:blur(var(--blur)) saturate(160%);border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--line-hi),var(--shadow-2)}
.rail .brand{position:relative;width:40px;height:40px;margin:0 0 6px;border-radius:var(--r-2);display:grid;place-items:center;cursor:default;background:radial-gradient(90% 90% at 50% 60%,rgba(125,108,255,.34),transparent 70%),linear-gradient(180deg,#1c2140,var(--bg));border:1px solid rgb(var(--p-mist) / .22);box-shadow:var(--hl-top),0 8px 22px -10px rgba(95,190,255,.55)}   /* the c5 mark (owner) on a dark glass tile */
.rail .brand img{display:block;width:26px;height:26px}
.rail .tabs{display:flex;flex-direction:column;gap:6px;margin:0;padding:10px 0 0;border-top:1px solid var(--line);width:40px;align-items:center}
.rail .tab{position:relative;width:40px;height:40px;padding:0;justify-content:center;gap:0;border-radius:50%;color:var(--text-2)}
.rail .tab .i{width:var(--icon-xl);height:var(--icon-xl)}
.rail .tab:hover{background:var(--hover);color:var(--text)}
.rail .tab[aria-selected=true]{background:var(--accent-soft-2);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-line),var(--glow-accent)}
/* motion (SYSTEM.md §navigation): one lit plate slides to the chosen item, so the eye follows the move; the item keeps only its colour */
.rail .tabs{position:relative}
.rail .tab-ind{position:absolute;top:0;left:0;width:40px;height:40px;border-radius:50%;background:var(--accent-soft-2);box-shadow:inset 0 0 0 1px var(--accent-line),var(--glow-accent);pointer-events:none;transition:translate var(--dur-3) var(--ease)}
.rail .tabs.has-ind .tab[aria-selected=true]{background:transparent;box-shadow:none}
.rail .tab-sep{width:24px;height:1px;margin:2px auto;background:var(--line)}   /* Пользователи: a section of another kind */
/* @lane NAV end */

/* the header (owner's composition): stat chips, search pill, queue disc, Generate, the account */
.topbar{position:static;z-index:10;display:flex;align-items:center;gap:var(--s-3);height:76px;max-width:1600px;margin-left:max(96px,calc(50% - 800px));padding:var(--s-3) var(--s-6) 0;background:none}   /* owner: no band, no fill, scrolls with the page; the pills keep their own glass */
@media (max-width:1279px){.topbar{gap:var(--s-2)}.topbar .spacer{margin-left:-8px}}   /* B-26: the empty spacer costs one gap too; below 1280 there is no room for it (stats + search 200 + sync chip + account fit at 1200 with 8 px to spare) */   /* B6/M4: 12 px of room at 1200 so the search keeps 200 and the account 152 */
.stats{display:flex;gap:var(--s-2);min-width:0;overflow:hidden}
.stats{flex:none}   /* FIX-R1: the stat chips never give way; the search field, then the sync chips, shrink first */
.stats .stat{flex:none}   /* FIX-R1: a chip is whole or not there, never a sliver; the search field gives way first */
.stat{display:inline-flex;align-items:center;gap:var(--s-2);height:36px;padding:0 14px 0 var(--s-3);border-radius:var(--pill);border:1px solid var(--line);background:linear-gradient(135deg,rgb(var(--p-mist) / .1),transparent 55%),var(--surface);box-shadow:var(--hl-top);color:var(--text-2);font-size:var(--fs-2);white-space:nowrap;cursor:default}
.stat .i{width:var(--icon-md);height:var(--icon-md);color:var(--text-3)}
.stat b{color:var(--text);font:500 var(--fs-3)/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat .muted{color:var(--text-3)}
.stat .ex{padding-left:var(--s-2);border-left:1px solid var(--line)}   /* G2: one extra fact, divided from the number by a hairline (no « · » text) */
.stat.warn{border-color:var(--amber-line)}
.stat.warn b{color:var(--amber)}
.stat b.m-tick,.subtab .count.m-tick{animation:m-tint calc(var(--dur-5) * 2) var(--ease)}   /* motion: a live value that changed */
@keyframes m-tint{from{color:var(--accent)}}
.stat.stale b{color:var(--text-2)}   /* a balance older than an hour */
.topbar .search input{height:var(--ctl-s);border-radius:var(--pill);background:var(--surface);box-shadow:var(--hl-top)}
.topbar .search .i{top:10px}
/* @lane SRCH begin: search trigger */
/* the search trigger: a button that looks like a field (SPEC-global §1.2); a query set from the finder shows in it with a clear */
.search-wrap{position:relative;display:inline-flex;align-items:center;flex:0 20 auto;min-width:200px}   /* B6/M4: the search gives way first, down to 200; the account only after */
.search-trigger{display:inline-flex;align-items:center;gap:var(--s-2);width:240px;flex:0 20 240px;min-width:200px;height:var(--ctl-s);padding:0 14px 0 var(--s-3);border-radius:var(--pill);border:1px solid var(--line);background:linear-gradient(135deg,rgb(var(--p-mist) / .05),transparent 50%),var(--surface);box-shadow:var(--hl-top);color:var(--text-3);font:400 var(--fs-2)/1 var(--font);text-align:left;transition:border-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.search-trigger:hover{border-color:var(--line-hover);color:var(--text-2)}
.search-trigger .q{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-trigger.set{color:var(--text);border-color:var(--line-strong);padding-right:36px}
.search-clear{position:absolute;right:4px;top:4px}
/* @lane SRCH end */
.bar-actions{display:flex;align-items:center;gap:var(--s-2);min-width:0}
.qbtn{flex-shrink:0;position:relative;width:var(--ctl-s);height:var(--ctl-s);border-radius:50%;background:var(--raised);border:0;box-shadow:var(--edge-strong);color:var(--text-2);transition:background-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),color var(--dur-2) var(--ease),transform var(--dur-1) var(--ease)}
.qbtn:hover{background:var(--hover);box-shadow:var(--edge-hover);color:var(--text)}
.qbtn:active{transform:scale(var(--m-press))}
.qbtn .num{position:absolute;top:-6px;right:-6px;box-sizing:border-box;min-width:20px;height:20px;padding:0 6px;border-radius:var(--pill);background:var(--text-3);color:var(--ink);font:600 var(--fs-1)/20px var(--font);font-variant-numeric:tabular-nums;text-align:center;box-shadow:var(--ring-gap-bg)}
.qbtn.live .num{background:var(--green);animation:qpulse var(--loop-pulse) var(--ease) infinite}
.qbtn.stale .num{background:var(--amber)}
.topbar .btn.primary{height:var(--ctl-s);padding:0 var(--s-4) 0 var(--s-3)}
.topbar .vr{flex-shrink:0;width:1px;height:24px;margin:0 var(--s-1);background:var(--line-strong)}
@media (max-width:1279px){.topbar .vr{margin:0}}   /* m1 r4: the owner's full name stays whole at 1200 busy: 8 px from the divider's margin go to the account */
/* the account: avatar, name, role, chevron; its menu holds the account and the batch's decisions */
.account{flex-shrink:1;min-width:158px;display:inline-flex;align-items:center;gap:var(--s-2);height:var(--ctl-s);padding:0 var(--s-1);border-radius:var(--pill);text-align:left;transition:background-color var(--dur-2) var(--ease)}
@media (min-width:1280px){.account{min-width:0;flex-shrink:0}}   /* GATE-HERO R2 M2: the chevron ends on the content right line */
#more-btn[hidden]{display:inline-flex!important;visibility:hidden;pointer-events:none;min-width:112px;min-height:var(--ctl-s)}   /* V10: the account's slot is held from first paint: it arrives after the sign-in read, the bar's actions were 179 px wide, then 345 */
.account:hover{background:var(--raised)}
.account .av{flex:none;width:28px;height:28px;font-size:var(--fs-0);box-shadow:0 0 0 1px var(--line-strong)}
.account .who{display:grid;min-width:0;line-height:16px}
.account .name{max-width:160px;overflow:hidden;color:var(--text);font-size:var(--fs-2);font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.account .role{color:var(--text-2);font-size:var(--fs-1);white-space:nowrap}
.account .chev{width:14px;height:14px;color:var(--text-3)}
.tabs{display:flex;gap:var(--s-1);margin-left:var(--s-2)}
.tab{display:inline-flex;align-items:center;gap:var(--s-2);height:32px;padding:0 var(--s-2) 0 var(--s-3);border-radius:var(--pill);color:var(--text-2);font-weight:500;transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),scale var(--dur-1) var(--ease)}
.tab:hover{color:var(--text)}
.tab[aria-selected=true]{background:var(--raised);color:var(--text)}
.count{min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-2);background:var(--raised);color:var(--text-2);font:600 var(--fs-1)/20px var(--font);font-variant-numeric:tabular-nums;text-align:center}
.tab[aria-selected=true] .count{background:var(--active);color:var(--text)}
.spacer{flex:1}
.sfield{--h:var(--ctl-s);--px:12px;display:flex;align-items:center;gap:var(--s-2);width:240px;max-width:100%;height:var(--h);padding:0 var(--px);border-radius:var(--pill);border:1px solid var(--line);background:var(--surface);color:var(--text-3);font-size:var(--fs-2);transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.sfield.md{--h:var(--ctl-m);--px:16px;font-size:var(--fs-3)}
.sfield.lg{--h:var(--ctl-l);--px:20px;gap:var(--s-3);font-size:var(--fs-4)}
.sfield > .i{width:16px;height:16px;flex:none}
.sfield.md > .i{width:18px;height:18px}.sfield.lg > .i{width:20px;height:20px}
.sfield input{flex:1;min-width:0;height:100%;padding:0;border:0;background:none;color:var(--text);font-family:var(--font);font-size:inherit;font-weight:400;line-height:20px;outline:none}
.sfield input::placeholder{color:var(--text-3)}
.sfield input::-webkit-search-cancel-button{display:none}
.sfield:hover{border-color:var(--line-hover)}
.sfield:focus-within,.sfield.is-f{border-color:var(--accent);box-shadow:var(--ring-field);color:var(--text-2)}
.sfield.filled{padding-right:calc((var(--h) - 2px - var(--ctl-xs)) / 2);color:var(--text-2)}
.sfield .icon-btn.xs{color:var(--text-3)}
.sfield .icon-btn.xs:hover{color:var(--text)}
.sfield.dis{background:var(--raised);border-color:var(--line);cursor:not-allowed}.sfield.dis input{color:var(--text-3);cursor:not-allowed}
.sfield.on-surface{background:var(--bg)}
/* old label.search markup keeps rendering as the S field until its emitters switch (A8c) */
.search{position:relative;width:240px}
.search .i{position:absolute;left:12px;top:10px;color:var(--text-3);pointer-events:none}
.search input{width:100%;height:var(--ctl-s);padding:0 var(--s-3) 0 36px;border-radius:var(--pill);border:1px solid var(--line);background:var(--surface);font-size:var(--fs-2);outline:none;transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.search input:hover{border-color:var(--line-hover)}
.search input[readonly]{cursor:pointer}
.search input:focus-visible{border-color:var(--accent);box-shadow:var(--ring-field);outline:none}
.search input::-webkit-search-cancel-button{display:none}
input::placeholder,textarea::placeholder{color:var(--text-3)}
#gen-btn{margin:0 6px 0 var(--s-1)}
.qdot{width:8px;height:8px;margin-right:2px;border-radius:50%;background:var(--text-3)}
@keyframes qpulse{0%{box-shadow:0 0 0 0 var(--green-line-strong)}70%,100%{box-shadow:0 0 0 6px rgb(var(--p-green-rgb) / .08)}}
/* popover menus: glass, scale from the trigger's corner */
.menu{margin:0;inset:auto;width:280px;padding:6px;border:1px solid var(--line-strong);border-radius:var(--r-4);background:var(--glass-strong);-webkit-backdrop-filter:blur(var(--blur)) saturate(160%);backdrop-filter:blur(var(--blur)) saturate(160%);color:var(--text);box-shadow:inset 0 1px 0 var(--line-hi),var(--shadow-3);transform-origin:top left;
  opacity:1;transform:none;transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease),display var(--dur-3) allow-discrete,overlay var(--dur-3) allow-discrete}
.menu:not(:popover-open){opacity:0;transform:scale(var(--m-pop));transition-duration:var(--dur-2)}   /* exits faster than it came */
@starting-style{.menu:popover-open{opacity:0;transform:scale(var(--m-pop))}}
.me-menu{transform-origin:top right}
.menu-item{display:flex;align-items:center;gap:10px;width:100%;height:36px;padding:0 var(--s-3);border-radius:var(--r-2);font-weight:500;font-size:var(--fs-2);text-align:left;color:var(--text);text-decoration:none;transition:background-color var(--dur-2) var(--ease)}
.menu-item .i{width:var(--icon-md);height:var(--icon-md);color:var(--text-2)}
.menu-item.danger .i{color:var(--red)}
.menu-item:hover{background:var(--hover)}
.menu-item:active{background:var(--active);transition-duration:0s}   /* MOTION-2: a press lands at once; the menu closes on the click */
.menu-item.danger{color:var(--red)}
.menu-sep{height:1px;margin:6px 0;border:0;background:var(--line)}

/* layout */
main{max-width:1600px;margin:0 auto 0 max(96px,calc(50% - 800px));padding:var(--s-5) var(--page-gutter-r) 112px var(--s-7)}   /* B25: two toasts (96 px + the 24 px edge) cover nothing of the last row once scrolled to the end; 72 px left the middle card's Approve under them at 1200 x 800 */   /* owner 2026-09-27: centred on the screen on wide screens (the 1600 column), the rail's 96px below 1792 px */
/* the sliding plate of a segmented control (MOTION-2, motion.js): during its flight the segments' own fills step aside; it lands
   in the frame the chosen segment takes its fill back, with no fade (.m-land) */
.m-plate{position:absolute;z-index:0;pointer-events:none;transform-origin:50% 50%}
.m-fly > :not(.m-plate,.m-probe){position:relative;z-index:1;background-color:transparent!important;background-image:none!important;box-shadow:none!important}
.m-land > *{transition:none!important}
.m-probe{position:absolute!important;visibility:hidden!important;pointer-events:none!important}
/* segmented pill tabs (ref-3): one plate, the selected segment lifts */
.subtabs,.ptabs{display:flex;width:max-content;gap:2px;margin:-4px 0 var(--s-5);padding:var(--s-1);border-radius:var(--pill);background:var(--surface);border:0;box-shadow:var(--edge),var(--hl-top)}
.subtab,.ptab{display:inline-flex;align-items:center;gap:var(--s-2);height:var(--ctl-s);padding:0 var(--s-4);border-radius:var(--pill);border:0;color:var(--text-2);font-size:var(--fs-3);font-weight:500;transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),scale var(--dur-1) var(--ease)}
.subtab:has(.badge,.count),.ptab:has(.badge,.count){padding-right:var(--s-2)}
.subtabs.sm .subtab,.ptabs .ptab{height:var(--ctl-item-s);padding:0 var(--s-3);font-size:var(--fs-2)}
.subtabs.sm .subtab:has(.badge,.count),.ptabs .ptab:has(.badge,.count){padding-right:var(--s-1)}
.subtab:focus-visible,.ptab:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.subtab:hover,.ptab:hover{background:var(--hover-wash);color:var(--text)}
.subtab[aria-selected=true],.ptab[aria-selected=true]{background:var(--active);color:var(--text);box-shadow:var(--edge-strong),var(--shadow-0)}
.subtab .count,.ptab .count{background:var(--raised);color:var(--text-2)}
.subtab[aria-selected=true] .count,.ptab[aria-selected=true] .count{background:var(--accent);color:var(--ink)}
.pack-head,.view-head{display:flex;align-items:center;gap:var(--s-6);margin-bottom:var(--s-6);flex-wrap:wrap}
.pack-head h1,.view-head h1{margin:0;font:400 var(--fs-6)/32px var(--mono);letter-spacing:-.02em;font-variation-settings:"wdth" 100}
.view-head{align-items:flex-start}
.view-head > .btn,.view-head > .a-acts{margin-left:auto;align-self:center}
.a-acts{display:flex;align-items:center;gap:var(--s-2)}
.subrow{display:flex;align-items:center;gap:var(--s-6);margin:0 0 var(--s-5);flex-wrap:wrap}
.subrow .subtabs{margin:0}
.panel .ptabs{margin:var(--s-3) var(--s-4) var(--s-2);background:var(--bg)}
.subrow .pagesize,.filters .pagesize{display:flex;align-items:center;gap:var(--s-3);margin-left:auto;color:var(--text-2);font:500 var(--fs-2)/1 var(--font)}
.seg.psz button{min-width:44px;height:var(--ctl-item-s);font:500 var(--fs-2)/1 var(--font)}
.seg.psz button[aria-pressed=true]{background:var(--primary);color:var(--ink)}
.more{display:flex;justify-content:center;margin:var(--s-6) 0}
h1.h1x{margin:0;font:300 var(--fs-9)/40px var(--mono);letter-spacing:-.03em;font-variation-settings:"wdth" 100;text-wrap:balance}
.h1x .hl{color:var(--accent)}
@supports (-webkit-background-clip:text) or (background-clip:text){.h1x .hl{background:linear-gradient(100deg,var(--accent-hover) 0%,var(--text) 45%,var(--sheen-end) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}}
@media (forced-colors:active){.h1x .hl{background:none;color:CanvasText}}
.h1x.sm{font-size:var(--fs-7);line-height:38px}
/* the title row (SPEC-global §2, owner 2026-09-24, every page with a total): H1 · 16 · the total pill, centred on the capitals
   (the display face centres its capitals in a line-height:1 box, measured); page actions stay right-aligned on the same row */
.title-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-3) var(--s-4);min-width:0}
.title-row > h1,.title-row > h2{margin:0;line-height:1}   /* DS-3: every page title is one 40 px box at 96 (h1.h1x 40/40, DR-203 literal); a tab bar sits 16 under it (Covers, Catalogue, KB, AI, Users) */
.title-row > .totals{margin:0}
.view-head:has(> .title-row){align-items:center}
.bal{font-variant-numeric:tabular-nums;color:var(--text)}
.bal .muted{color:var(--text-2)}
.bal.low,.bal.low .muted{color:var(--amber)}
.bal.out,.bal.out .muted{color:var(--red)}
.bal.stale,.bal.stale .muted{color:var(--text-2)}   /* no Claude on the air: the balance as it was, with when */
.q-bal{display:grid;gap:2px;margin:6px 0 0;font-size:var(--fs-1);line-height:16px}
.sub{margin:var(--s-1) 0 0;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.progress{display:flex;align-items:center;gap:var(--s-3);margin-left:auto}
.segs{display:grid;grid-template-columns:repeat(5,28px);gap:var(--s-1)}
.segs i{height:6px;border-radius:var(--r-xs);background:var(--hatch),var(--raised);box-shadow:var(--edge);transition:background-color var(--dur-3) var(--ease),box-shadow var(--dur-3) var(--ease)}
.segs i[data-d]{background:none;box-shadow:none}
.segs i[data-d=approve]{background:var(--green)}
.segs i[data-d=regenerate],.segs i[data-d=reassemble]{background:var(--amber)}
.segs i[data-d=keep]{background:var(--text-2)}
.segs i[data-d=remove]{background:var(--text-3)}
.progress .num{font:500 var(--fs-2)/1 var(--font);color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap}

.done-panel{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-4) var(--s-4) var(--s-4) var(--s-5);margin-bottom:var(--s-6);border:1px solid var(--line);border-radius:var(--r-5);background:linear-gradient(135deg,rgb(var(--p-green-rgb) / .08),transparent 40%),var(--surface);box-shadow:var(--hl-top);animation:fade var(--dur-3) var(--ease)}
.done-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--green-soft);color:var(--green)}
@keyframes m-won{from{opacity:0;transform:translateY(var(--m-rise)) scale(var(--m-pop))}}
@keyframes m-draw{from{stroke-dashoffset:21}}
.done-text{flex:1;min-width:0}
.done-text h2{margin:0;font-size:var(--fs-4);line-height:20px;font-weight:600}
.done-text p{margin:2px 0 0;color:var(--text-2);font-size:var(--fs-2);line-height:18px}

/* cards: a plate in a tray (ref-1): 4 px bezel, the image set in at a concentric radius, the item's own glow under it on hover */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(256px,1fr));gap:var(--s-4)}
.card{position:relative;display:flex;flex-direction:column;padding:var(--s-1);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-4);box-shadow:var(--hl-top);container:card/inline-size;transition:border-color var(--dur-2) var(--ease),transform var(--dur-3) var(--ease),box-shadow var(--dur-3) var(--ease)}
.card:hover{border-color:var(--line-strong);transform:translateY(-2px);box-shadow:inset 0 1px 0 var(--line-hi),0 18px 40px -20px rgb(var(--p-shade) / .9),var(--shadow-1)}
.card:focus{outline:none}
.card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.media{position:relative;display:block;aspect-ratio:418/564;border-radius:var(--r-3);background:var(--raised);overflow:hidden}
.media::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line-hi);pointer-events:none}
.media:not([data-loaded]):not([data-error]){background:var(--hatch),var(--sk-base)}
.media img{position:absolute;inset:0;width:100%;height:100%;display:block;-webkit-user-drag:none;user-select:none}
.img-new{object-fit:cover;opacity:0;transition:opacity var(--dur-3) var(--ease)}
.media[data-loaded] .img-new{opacity:1}
.media.atom{aspect-ratio:3/4;background:var(--dots) 0 0/22px 22px,var(--bg-deep)}   /* the object on a canvas (ref-2) */
.media.atom .img-new{object-fit:contain}
.img-now{object-fit:contain;background:var(--stage);opacity:0;transition:opacity var(--dur-2) var(--ease)}
.media.peek .img-now,.media.pinned .img-now{opacity:1}
.media-err{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-2);color:var(--text-2);font-size:var(--fs-2)}
.media-err .i{width:var(--icon-xl);height:var(--icon-xl);color:var(--red)}
.media-hit{position:absolute;inset:0;z-index:1;cursor:zoom-in}
.media-hit:focus-visible{outline-offset:-4px}
.pills,.now-tag{position:absolute;top:8px;left:8px;z-index:3;display:flex;gap:var(--s-1);transition:opacity var(--dur-2) var(--ease)}
.now-tag{opacity:0;pointer-events:none}
.media.peek .now-tag,.media.pinned .now-tag{opacity:1}
.media.peek .pills,.media.pinned .pills{opacity:0;pointer-events:none}
.pill{display:inline-flex;align-items:center;height:22px;padding:0 var(--s-2);border-radius:var(--pill);background:var(--on-image);color:var(--text);box-shadow:0 0 0 1px var(--hl-2);font:500 var(--fs-0)/1 var(--mono);letter-spacing:.02em}
.pill.qa{background:var(--amber);color:var(--on-amber);box-shadow:none;cursor:help}
.cmp{position:absolute;top:8px;right:8px;z-index:3;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--on-image);color:var(--text);box-shadow:0 0 0 1px var(--hl-2);transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.cmp:hover{background:rgba(32,38,64,.96)}
.pills{align-items:center}
.rm{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--on-image);color:var(--text-2);box-shadow:0 0 0 1px var(--hl-2);transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.rm:hover,.rm:focus-visible{background:rgba(32,38,64,.96);color:var(--red)}
@media (hover:hover){
  .card .media :is(.rm,.cmp),.tile .media .cmp{opacity:0;transition:opacity var(--dur-2) var(--ease)}
  :is(.card,.tile):is(:hover,:focus-visible,:has(:focus)) .media :is(.rm,.cmp){opacity:1}   /* FX-8b (UI-COVER-14): focus in the card, or on the card by keyboard; not the focus a mouse Approve hands to the next card */
  .card .media .cmp[aria-pressed=true]{opacity:1}
}
.rm-ask{position:absolute;inset:0;z-index:5;display:grid;place-content:center;justify-items:center;padding:var(--s-4);background:var(--on-image);backdrop-filter:blur(3px);text-align:center;animation:fade var(--dur-2) var(--ease)}
.rm-ask .rm-q{margin:0 0 6px;font-size:var(--fs-4);font-weight:600;color:var(--text)}
.rm-ask .rm-t{margin:0 0 14px;max-width:240px;font-size:var(--fs-2);line-height:18px;color:var(--text-2)}
.rm-ask .row{display:flex;gap:var(--s-2)}
.cmp[aria-pressed=true]{background:var(--primary);color:var(--ink)}
.cmp[aria-disabled=true],.cmp[aria-disabled=true]:hover{color:var(--text-3);background:var(--on-image);cursor:not-allowed}
.body{display:flex;flex-direction:column;flex:1;padding:var(--s-3) 10px 10px}
.title{margin:0;font-size:var(--fs-3);line-height:20px;font-weight:600}
.meta{margin:2px 0 0;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.facts{display:flex;align-items:center;gap:var(--s-3);margin-top:10px;color:var(--text-3);font-size:var(--fs-1);line-height:16px}
.tries{color:var(--text-2);cursor:default}
.dots{display:inline-flex;gap:2px;padding:6px 0}
.dots i{width:10px;height:4px;border-radius:var(--r-hair);background:var(--line-strong)}
.dots i.on{background:var(--accent)}
.glow{display:inline-flex;align-items:center;gap:6px}
.swatch{width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgb(var(--p-white-rgb) / .16)}
.foot{margin-top:auto;padding-top:var(--s-3)}
.actions{display:flex;flex-wrap:nowrap;gap:var(--s-2)}
.actions .btn{flex:1 1 auto;padding:0 10px}
.status{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:34px;color:var(--text-2);font-size:var(--fs-2);font-weight:500;animation:fade var(--dur-3) var(--ease)}
.status > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-line{display:flex;align-items:center;gap:var(--s-2);min-width:0}
.st-line > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-job{color:var(--text-3);font-size:var(--fs-1);line-height:16px;font-weight:400}
.st-job.over{color:var(--amber)}
.st-job .st-why{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-acts{display:flex;gap:var(--s-3);min-width:0;white-space:nowrap}
.status .st-acts .link{margin-left:0}
.status .st-acts .link:first-child{margin-left:-6px}   /* m2 r3: the link text, not its padding, starts where the reason starts */
.foot:has(.st-job){min-height:var(--foot-job)}   /* B8 r2: a status with a job line holds one slot height, so the status rows of the cards in a row start on the same line */
.status:has(.st-job){justify-content:flex-start}
.status.build{flex-direction:row;align-items:center;gap:var(--s-2)}
.status.stuck{flex-direction:row;align-items:center;gap:var(--s-3);color:var(--amber)}   /* FIX-PIPE: an approved atom whose cover failed */
.status.stuck .link + .link{margin-left:0}
.foot .why{margin:0 0 var(--s-2);min-width:0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow-wrap:anywhere;color:var(--amber);font-size:var(--fs-2);font-weight:500}   /* NO-ATOMS: why an atom waits on the Covers tab */
@container card (max-width:300px){.foot .why{font-size:var(--fs-1)}}
.status.ok{color:var(--green)}
.status.send{color:var(--amber)}
.status.removed{color:var(--text-3)}
.status .link,.st-line .link{margin-left:auto;flex:none}
/* placeholder: the approved atom while its cover is being assembled, hatched (ref-1) */
.card.ph:hover{border-color:var(--line);transform:none;box-shadow:var(--hl-top)}
.ph .media{aspect-ratio:418/564}
.ph .media::before{content:"";position:absolute;inset:0;z-index:1;background:var(--hatch);pointer-events:none}
.ph .img-new{object-fit:cover;filter:brightness(.42) saturate(.6)}
.status.build{color:var(--text-2)}
.build-bar{position:relative;flex:1;min-width:24px;height:3px;border-radius:var(--r-hair);background:var(--line-strong);overflow:hidden;--m-glint:rgb(var(--p-mist) / .55)}
/* an indeterminate wait (MOTION-2): one light crosses the bar as a transform on the compositor (it was a background-position
   repaint every frame); reduced motion: the global rule stops it and the bar stays still */
.build-bar::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 15%,var(--m-glint) 50%,transparent 85%);translate:-100% 0;animation:m-glint 1.8s linear infinite}
@keyframes m-glint{to{translate:100% 0}}
@container card (max-width:247px){.actions .btn .i{display:none}}
@container card (max-width:300px){.status{font-size:var(--fs-1);gap:6px}.status .link{padding:var(--s-1)}.status .st-acts .link:first-child{margin-left:-4px}}
.no-results{margin:var(--s-7) 0;color:var(--text-2);text-align:center}

/* skeleton + states */
/* skeleton (MOTION-2, SYSTEM.md §5): a known shape waits. The block itself is still; one quiet sweep crosses it (a transform on the
   compositor, the same keyframes everywhere, never background-position). A .skel root shows only after --sk-delay, so a fast
   answer never flashes; CFMotion.fill() crossfades it into the content. Reduced motion: no sweep, the delay and the fades stay */
.sk{position:relative;overflow:hidden;border-radius:var(--r-1);background:var(--hatch),var(--sk-base)}
.sk::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,transparent 25%,var(--sk-hi) 50%,transparent 75%);transform:translateX(-100%);animation:sk-sweep var(--sk-dur) var(--ease-in-out) infinite;pointer-events:none}
.media:not([data-loaded]):not([data-error])::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,transparent 25%,var(--sk-hi) 50%,transparent 75%);transform:translateX(-100%);animation:none;pointer-events:none}   /* T1: sweeps only on screen (data-vis from CFMotion.watch) */
.media[data-vis]:not([data-loaded]):not([data-error])::before,.skel .media:not([data-loaded]):not([data-error])::before{animation:sk-sweep var(--sk-dur) var(--ease-in-out) var(--sk-delay) infinite}
@keyframes sk-sweep{62%,to{transform:translateX(100%)}}
.sk-ln{display:block;min-width:0}   /* CFMotion.bar(): a text line's box, its bar in the middle */
.sk-tx{display:inline-block;height:.72em;max-width:100%;vertical-align:middle}
.skel{pointer-events:none}
.skel,.sk:not(.skel .sk){animation:sk-in var(--dur-3) var(--ease) var(--sk-delay) both}   /* a page skeleton, or a lone block: shown only when the answer is slow */
.skel.sk-now,.sk.sk-now{animation:none}
.sk-btn{flex:1;height:34px;border-radius:var(--pill)}   /* a button that has not arrived (card actions) */
.sk-pill{display:inline-block;height:32px;border-radius:var(--pill)}   /* a filter or a select that has not arrived */
/* skeleton stand-ins for pieces the page's code finds by class (a skeleton never takes their names): same boxes */
.sk-seg{display:flex;width:max-content;gap:2px;padding:2px;border-radius:var(--pill);background:var(--surface);border:1px solid var(--line);box-shadow:var(--hl-top)}
.sk-seg > span{display:flex;align-items:center;height:32px;padding:0 14px}
.sk-sub{margin-top:6px;line-height:16px}
.read-note{margin-top:6px;line-height:16px}
.sk-end{margin-left:auto}
@keyframes sk-in{from{opacity:0}}
.sk-h1{width:180px;height:24px}
.sk-line{width:320px;height:14px;margin-top:var(--s-2)}
.sk-t{width:70%;height:16px}
.sk-m{width:45%;height:12px;margin-top:var(--s-2)}
.sk-b{height:34px;margin-top:var(--s-6);border-radius:var(--pill)}
.page-err{display:grid;place-items:center;padding:var(--s-6) 0 var(--s-9)}   /* GATE-HERO J3: the designed error, no plate */
.page-err-drawer{padding:var(--s-6) 0}
.page-err-panel{padding:var(--s-4) 0}
/* @lane C2 begin: empty states */
/* DR-93, DR-94: ONE page state. `.state` is the component; `.empty`, `.stv` (page size) and the `.p5-empty` wrapper are aliases until the pages rename.
   Placement: centred on both axes in the content area below the page head, filling it (--state-top = what sits above the area: topbar, main padding, page head).
   Look: art 200, title 18/24 600, text 13/18 --text-2 at 42ch, gap 6 then 16 before the one action, Primary L 52. `.state.sm`: the «no filter match» case, art 120, no fill, action S 36 (Q6 A). */
:root{--state-top:176px}
.state,.empty,main .p5-empty,#view-kb .p5-empty,.page-err-page{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100dvh - var(--state-top));padding:var(--s-4) 0;text-align:center;color:var(--text)}
.state[hidden],.empty[hidden],main .p5-empty[hidden],#view-kb .p5-empty[hidden],.page-err-page[hidden]{display:none}
/* the dots ride on a masked layer, so the page light still shows through around them; one layer per state */
.state::before,.empty::before,main .p5-empty::before,#view-kb .p5-empty::before,.page-err-page::before,#narrow::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--dots) 50% 50%/22px 22px;-webkit-mask-image:radial-gradient(ellipse 42% 52% at 50% 50%,#000 10%,transparent 100%);mask-image:radial-gradient(ellipse 42% 52% at 50% 50%,#000 10%,transparent 100%)}
.stv.state:not(.sm){min-height:calc(100dvh - var(--state-top));max-height:none;overflow:visible}   /* p1.css keeps a plain .stv inside its box (min-height 0, scrolls); p1-state.js pageStateFit sets --state-top from the layout */
main #view-kb .p5-empty{min-height:calc(100dvh - var(--state-top));padding:var(--s-4) 0}   /* p5-kb.css (id rule, loaded after) keeps its own 360-520 box */   /* p1.css keeps a plain .stv inside its box (min-height 0, scrolls) */
.stv.state.sm{max-height:none;overflow:visible}
#view-catalogue .cx-pstate{min-height:0;padding:0}   /* DR-93: the Catalogue's list-area state is the one component; catalogue-std.css:350-354 sized its own box, title and button gaps */
#view-catalogue .cx-pstate .stv h3{margin:0 0 6px}
#view-catalogue .cx-pstate .stv .btn{margin-top:0}
:is(.empty,.p5-empty,.page-err-page) > .state,:is(.empty,.p5-empty,.page-err-page) > .stv.state:not(.sm){min-height:0;padding:0}
:is(.empty,.p5-empty,.page-err-page) > .state::before,.state.sm::before{content:none}
.state > .art,.state .art-brand,.empty .art{display:block;width:200px;height:auto;margin:0 auto var(--s-1)}
.state .art-brand .art{width:100%;margin:0}
.state h2,.state h3,.empty h2{margin:0 0 6px;max-width:42ch;font-size:var(--fs-4b);line-height:24px;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
.state p,.empty p{margin:0;max-width:42ch;font-size:var(--fs-2);line-height:18px;color:var(--text-2);text-wrap:pretty}
.state .stv-acts,.empty .row{display:flex;justify-content:center;gap:var(--s-2);margin-top:var(--s-4)}
.state:not(.sm) .stv-acts .btn,.empty .row .btn{height:var(--ctl-l);padding:0 var(--s-6);font:600 var(--fs-4)/1 var(--font)}   /* FA-1003: the L 52 button of .btn.lg */
.state.sm{min-height:0;padding:var(--s-7) 0}
.state.sm > .art,.state.sm .art-brand{width:120px}
.state.sm .stv-acts .btn{height:var(--ctl-s);padding:0 14px;font-size:var(--fs-2)}
.q-empty{min-height:0;margin:var(--s-9) 0;padding:0;background:none}
.q-empty .art{width:180px}
/* @lane C2 end */
@keyframes shimmer{to{background-position:-300% 0}}
@keyframes fade{from{opacity:0}}

/* approved: filter pills with counts, pill selects, tiles */
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin-bottom:var(--s-4)}
.filters .chip{height:var(--ctl-s)}
.filters .sort{margin-left:auto}
.filters .pagesize{margin-left:var(--s-4)}   /* B9: Approved: the page-size control right after the sort */
.select{position:relative;display:inline-block}
.select select{appearance:none;height:var(--ctl-s);padding:0 var(--s-7) 0 14px;border-radius:var(--pill);border:1px solid var(--line-strong);background:var(--surface);font-size:var(--fs-2);font-weight:500;cursor:pointer;transition:border-color var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease)}
.select select:hover{border-color:var(--line-hover);background:var(--raised)}
.select select:focus-visible{border-color:var(--accent);outline:none;box-shadow:var(--ring-field)}
.select .i{position:absolute;right:12px;top:8px;color:var(--text-3);pointer-events:none}
/* Select trigger (DR-51): bordered, leading icon, label, chevron; S 36 · M 44 */
.sel-t{--h:var(--ctl-s);display:inline-flex;align-items:center;gap:var(--s-2);height:var(--h);padding:0 var(--s-3);border-radius:var(--pill);border:1px solid var(--line-strong);background:var(--surface);color:var(--text);font:500 var(--fs-2)/18px var(--font);cursor:pointer;white-space:nowrap;transition:background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.sel-t.md{--h:var(--ctl-m);padding:0 var(--s-4);font-size:var(--fs-3)}
.sel-t > .i{width:16px;height:16px;flex:none;color:var(--text-3)}
.sel-t.md > .i{width:18px;height:18px}
.sel-t > .i.chev{width:14px;height:14px;margin-left:-2px}
.sel-t.md > .i.chev{width:16px;height:16px}
.sel-t:hover{background:var(--raised);border-color:var(--line-hover)}
.sel-t[aria-expanded=true]{border-color:var(--accent-line);box-shadow:var(--ring-field)}
.sel-t:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.sel-t[aria-disabled=true]{border-color:var(--line);color:var(--text-3);cursor:not-allowed;background:var(--surface)}
.sel-t.on-surface{background:var(--bg)}
.select select{height:var(--ctl-s)}
.select .i{top:50%;translate:0 -50%}
/* sort-control (DR-51): the one sort component of Covers and Approved; the pill of the filter dropdowns with a leading icon (tokens: tokens.css, sort-control) */
.sortc{display:inline-flex;align-items:center;gap:var(--sortc-gap);height:var(--sortc-h);padding:0 var(--sortc-pad-r) 0 var(--sortc-pad-l);border-radius:var(--pill);border:1px solid var(--line-strong);background:var(--surface);color:var(--text);font:500 var(--fs-2)/1 var(--font);cursor:pointer;transition:border-color var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease)}
.sortc:hover:not(:disabled){border-color:var(--line-hover);background:var(--raised)}
.sortc:focus-visible,.sortc[aria-expanded=true]{border-color:var(--accent);outline:none;box-shadow:var(--ring-field)}
.sortc:disabled{cursor:default}
.sortc .i{width:var(--sortc-icon);height:var(--sortc-icon);flex:none}
.sortc .i:last-child{width:var(--sortc-chev);height:var(--sortc-chev);color:var(--text-3)}
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:var(--s-4)}
.tile{position:relative;display:flex;flex-direction:column;min-width:0;padding:4px 3px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-4);box-shadow:var(--hl-top);text-align:left;transition:border-color var(--dur-2) var(--ease),transform var(--dur-3) var(--ease)}
/* FA-1008 (UI-A «Motion»): the hover shadow fades on a pseudo-element, so no paint-bound box-shadow transition runs on 20 cards */
.tile::after{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 18px 40px -20px rgb(var(--p-shade) / .9),var(--shadow-1);opacity:0;pointer-events:none;transition:opacity var(--dur-3) var(--ease)}
.tile:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.tile:hover::after{opacity:1}
.tile-body{display:flex;flex-direction:column;gap:2px;padding:10px 0 var(--s-2)}
.tile .meta{margin:0}
/* one card text block (DR-53): Covers .p2-card and Approved .tile; tokens in tokens.css. Inset = --ct-inset from the card edge (minus border 1 + padding 3) */
.p2-card .body,.tile .tile-body{padding-inline:calc(var(--ct-inset) - 4px)}   /* FA-1005: border 1 + tile padding 3 = 4 on the grid, body 12, text 16 from the edge */
:is(.p2-card .body,.tile .tile-body) .title{font-size:var(--ct-title-fs);line-height:var(--ct-title-lh);font-weight:600}
:is(.p2-card .body,.tile .tile-body) .meta{font-size:var(--ct-meta-fs);line-height:var(--ct-meta-lh)}
.tile-flag{display:block;color:var(--amber);font-size:var(--fs-1);line-height:16px;font-weight:500}   /* R6-M1: the card's .foot .why, one line */
.d-flag{display:flex;gap:var(--s-2);align-items:flex-start;margin:var(--s-4) 0 0;padding:10px var(--s-3);border-radius:var(--r-2);background:var(--amber-soft);color:var(--text);font-size:var(--fs-2);line-height:18px}
#d-body > .d-flag:first-child{margin:0 0 var(--s-4)}   /* B5 r2: first in the body it sits at the body's own top padding and 16 above the picture */
.d-flag p{margin:0;overflow-wrap:anywhere}
.d-flag > .i{flex:none;margin-top:1px;color:var(--amber)}
.d-flag-txt{display:grid;gap:var(--s-2);min-width:0}
.d-flag-acts{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.tile .back{align-self:flex-start;margin-top:var(--s-2)}   /* Approved › Removed (FIX-UX) */

/* dialogs: glass plates over a blurred navy backdrop */
dialog{padding:0;border:0;color:var(--text);max-width:none;max-height:none}
dialog::backdrop{background:var(--scrim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background-color var(--dur-3) var(--ease),display var(--dur-3) allow-discrete,overlay var(--dur-3) allow-discrete}
dialog:not([open])::backdrop{background:rgba(6,8,18,0)}
@starting-style{dialog[open]::backdrop{background:rgba(6,8,18,0)}}
#editor{width:min(1440px,calc(100vw - 32px));height:min(1000px,calc(100dvh - 32px));border:1px solid var(--line-strong);border-radius:var(--r-5);background:var(--surface);overflow:hidden;box-shadow:inset 0 1px 0 var(--line-hi),var(--shadow-3);
  opacity:1;scale:none;transition:opacity var(--dur-3) var(--ease),scale var(--dur-3) var(--ease),display var(--dur-3) allow-discrete,overlay var(--dur-3) allow-discrete}
#editor:not([open]){opacity:0;scale:var(--m-dialog);transition-duration:var(--dur-2)}
@starting-style{#editor[open]{opacity:0;scale:var(--m-dialog)}}
#editor{grid-template-rows:auto minmax(0,1fr)}   /* V4: in the base rule, so the rows hold while the dialog closes (allow-discrete keeps display:grid) */
#editor[open]{display:grid}
.m-head{position:relative;display:flex;align-items:center;gap:var(--s-3);min-height:64px;padding:var(--s-3) var(--s-4) var(--s-3) var(--s-6);border-bottom:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(var(--blur)) saturate(140%);backdrop-filter:blur(var(--blur)) saturate(140%)}   /* owner #1: glass on overlay chrome, a gradient hairline on top */
.m-head::before,.d-head::before{content:"";position:absolute;left:24px;right:24px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgb(var(--p-accent-rgb) / .55) 30%,rgba(255,143,208,.5) 70%,transparent);pointer-events:none}
.m-titles{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
.attempts{flex:none;display:inline-flex;align-items:center;height:22px;padding:0 var(--s-2);border-radius:var(--pill);background:var(--raised);color:var(--text-2);font:500 var(--fs-0)/1 var(--mono);cursor:default}
.m-titles{display:grid;gap:1px;align-content:center}
.m-titles h2{margin:0;font-size:var(--fs-4);line-height:22px;font-weight:600}
.m-subline{margin:0;color:var(--text-2);font-size:var(--fs-2);line-height:18px;cursor:default}
.m-titles p{margin:2px 0 0;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
#m-sub{display:flex;align-items:center;gap:var(--s-2);height:20px;margin:0}
#m-sub > .muted{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.state-pill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:var(--pill);font-size:var(--fs-2);font-weight:500;white-space:nowrap}
button.state-pill{transition:scale var(--dur-1) var(--ease)}
.state-pill.ok{background:var(--green-soft);color:var(--green)}
.state-pill.send{background:var(--amber-soft);color:var(--amber)}
.state-pill.keep{background:var(--raised);color:var(--text-2)}
.state-pill.removed{background:var(--raised);color:var(--text-3)}
.m-head .vr{width:1px;height:24px;background:var(--line-strong);margin:0 var(--s-1)}
.m-body{display:grid;grid-template-columns:minmax(0,1fr) 400px;min-height:0}
.stage{position:relative;min-width:0;min-height:0;background:var(--dots) 0 0/22px 22px,var(--stage)}   /* the dotted canvas of an editor (ref-2) */
.scroller{position:absolute;inset:0;overflow:auto}
.canvas{display:flex;width:max-content;height:max-content;min-width:100%;min-height:100%;padding:var(--s-7) var(--s-6) 80px}
.pair{display:flex;align-items:flex-start;gap:var(--s-6);margin:auto}
.frame{position:relative;flex:none;margin:0}
.frame img{display:block;width:100%;height:100%;border-radius:var(--r-2);box-shadow:0 0 0 1px var(--line-hi),var(--shadow-2);-webkit-user-drag:none;user-select:none}
.frame.now img{object-fit:contain;background:#000}
.frame figcaption{position:absolute;bottom:100%;left:0;margin-bottom:var(--s-2);color:var(--text-2);font:500 var(--fs-1)/16px var(--font);white-space:nowrap}
.areas{position:absolute;inset:0;cursor:crosshair}
.areas.off{cursor:default}
.area{position:absolute;border:2px solid var(--white);border-radius:var(--r-hair);box-shadow:0 0 0 1px var(--art-shadow-2),inset 0 0 0 1px var(--art-shadow-1);pointer-events:auto;transition:background-color var(--dur-2) var(--ease)}
.area.draft{border-style:dashed}
.area.prev{opacity:.6}
.area.hot{background:rgb(var(--p-white-rgb) / .16);opacity:1}
.area-n{position:absolute;left:-2px;top:-2px;translate:-50% -50%;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-2);background:var(--white);color:var(--ink);font:500 var(--fs-2)/20px var(--mono);text-align:center;box-shadow:0 0 0 1px var(--art-shadow-2),0 1px 4px var(--art-shadow-1)}
/* the floating tool dock (ref-2) */
/* Move object (0026): the cover rebuilt on a canvas over the image, the object's box with four corner handles, the owner's reference
   ranges as quiet guides that turn green when the object sits in them; no numbers (owner rule) */
.mover{position:absolute;inset:0;touch-action:none}
.mover canvas{display:block;width:100%;height:100%;border-radius:var(--r-2);box-shadow:0 0 0 1px var(--line-hi),var(--shadow-2)}
.mover.before canvas,.mover.before .guide,.mover.before .obj{visibility:hidden}
.guide{position:absolute;pointer-events:none;border:0 dashed var(--accent-line);background:rgb(var(--p-accent-rgb) / .05);transition:background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
.guide.g-top{left:0;right:0;top:calc(26 / 564 * 100%);height:calc(60 / 564 * 100%);border-top-width:1px;border-bottom-width:1px}
.guide.g-mid{top:0;bottom:0;left:calc(208 / 418 * 100%);width:calc(12 / 418 * 100%);border-left-width:1px;border-right-width:1px}
.guide.g-cut{left:0;right:0;top:calc(440 / 564 * 100%);height:0;border-top-width:1px;background:none}
.guide.on{border-color:var(--green-line-strong);background:rgb(var(--p-green-rgb) / .08)}
.guide.g-cut.on{background:none}
.obj{position:absolute;cursor:move;outline:1px dashed rgb(var(--p-white-rgb) / .75);box-shadow:0 0 0 1px var(--art-shadow-1)}
.obj:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.hd{position:absolute;width:12px;height:12px;border-radius:var(--r-xs);background:var(--white);translate:-50% -50%;box-shadow:0 0 0 1px var(--art-shadow-2),0 1px 4px var(--art-shadow-1);transition:scale var(--dur-1) var(--ease)}
.hd:hover{scale:1.2}
.hd[data-c=nw]{left:0;top:0;cursor:nwse-resize}.hd[data-c=ne]{left:100%;top:0;cursor:nesw-resize}
.hd[data-c=sw]{left:0;top:100%;cursor:nesw-resize}.hd[data-c=se]{left:100%;top:100%;cursor:nwse-resize}
.tool.busy{cursor:progress;opacity:.7}
.toolbar{position:absolute;left:50%;bottom:16px;translate:-50% 0;display:flex;align-items:center;gap:var(--s-1);padding:var(--s-1);border-radius:var(--pill);background:linear-gradient(180deg,var(--sk-hi),transparent 60%),var(--glass-strong);-webkit-backdrop-filter:blur(var(--blur)) saturate(160%);backdrop-filter:blur(var(--blur)) saturate(160%);border:1px solid var(--line-strong);box-shadow:inset 0 1px 0 var(--line-hi),var(--shadow-2)}
.tool{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;min-width:36px;padding:0 10px;border-radius:var(--pill);color:var(--text-2);font:500 var(--fs-1)/1 var(--font);transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),transform var(--dur-1) var(--ease)}
.tool .i{width:var(--icon-lg);height:var(--icon-lg)}
.tool:hover{background:var(--hover);color:var(--text)}
.tool:active{transform:scale(var(--m-press))}   /* DS-7: one press depth */
.tool[aria-pressed=true]{background:var(--primary);color:var(--ink)}
.tool:disabled,.tool[aria-disabled=true]{opacity:.4;cursor:not-allowed}
.tool:disabled:hover,.tool[aria-disabled=true]:hover{background:transparent;color:var(--text-2)}
.toolbar .sep{width:1px;height:20px;margin:0 var(--s-1);background:var(--line-strong)}

.panel{display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--line)}
.msglist,.cmpanel{flex:1;margin:0;padding:0 var(--s-2) var(--s-2);list-style:none;overflow:auto;min-height:0}
.msg-empty{padding:var(--s-4) var(--s-4) var(--s-2);color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.comp-code{padding:2px var(--s-2);border-radius:var(--pill);background:var(--raised);color:var(--text-2);font:500 var(--fs-0)/16px var(--mono)}
.qa-call{display:flex;align-items:center;gap:var(--s-2);flex:none;width:calc(100% - 32px);margin:0 var(--s-4) var(--s-2);padding:var(--s-2) var(--s-3);border-radius:var(--r-2);background:var(--amber-soft);border:1px solid var(--amber-line);color:var(--text);font:var(--fs-2)/18px var(--font);text-align:left;cursor:pointer}
.qa-call:hover{border-color:rgb(var(--p-amber-rgb) / .55)}
.qa-call .i{flex:none;color:var(--amber)}
.qa-call p{flex:1;min-width:0;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qa-call .qa-more{flex:none;color:var(--amber);font-weight:600;font-size:var(--fs-1)}
.qa-call.calm{background:var(--raised);border-color:var(--line)}
.qa-call.calm .i,.qa-call.calm .qa-more{color:var(--text-2)}
/* 0046: a remark kept for the editor, over the fixes: the words, then the tools that make it */
.ed-todo{display:flex;align-items:flex-start;gap:var(--s-2);flex:none;margin:0 var(--s-4) var(--s-2);padding:var(--s-2) var(--s-3);border-radius:var(--r-2);background:var(--raised);border:1px solid var(--line);font:var(--fs-2)/18px var(--font)}
.ed-todo .i{flex:none;margin-top:1px;color:var(--text-2)}
.ed-todo p{margin:0}
.ed-todo .ed-todo-t{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:var(--text);overflow-wrap:anywhere}
.ed-todo .ed-todo-t b{font-weight:600}
.ed-todo .ed-todo-go{margin-top:var(--s-2)}
.ed-todo .ed-todo-h{margin-top:2px;color:var(--text-2);font-size:var(--fs-1);line-height:16px}
.ptab .count.warn{background:var(--amber);color:var(--on-amber)}
.qapanel{flex:1;min-height:0;overflow:auto;padding:var(--s-1) var(--s-4) var(--s-4);display:flex;flex-direction:column;gap:var(--s-3);font-size:var(--fs-2);line-height:18px}
.qa-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.qa-verdict{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--pill);background:var(--green-soft);color:var(--green);font-weight:600}
.qa-verdict[data-v=esc]{background:var(--amber-soft);color:var(--amber)}
.qa-verdict[data-v=fail]{background:var(--red-soft);color:var(--red)}
.qa-o6{margin-left:auto;padding:0 var(--s-2);height:22px;display:inline-flex;align-items:center;border-radius:var(--pill);background:var(--raised);font:600 var(--fs-1)/1 var(--mono);cursor:help}
.qa-row{display:flex;flex-wrap:wrap;gap:6px}
.qa-chk{display:inline-flex;align-items:center;gap:var(--s-1);height:24px;padding:0 var(--s-2);border-radius:var(--pill);border:1px solid var(--line);color:var(--text-2);font-size:var(--fs-1);cursor:help}
.qa-chk .i{width:var(--icon-sm);height:var(--icon-sm)}
.qa-chk[data-s=pass] .i{color:var(--green)}
.qa-chk[data-s=flag],.qa-chk[data-s=pad]{border-color:var(--amber-line);color:var(--text)}
.qa-chk[data-s=flag] .i,.qa-chk[data-s=pad] .i{color:var(--amber)}
.qa-chk[data-s=fail]{border-color:var(--red-line-strong);color:var(--text)}
.qa-chk[data-s=fail] .i{color:var(--red)}
.qa-pad{display:flex;gap:var(--s-2);margin:0;color:var(--text-2)}
.qa-pad .i{flex:none;margin-top:1px}
.qa-lead{margin:0}
.qa-look{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.qa-look li{padding:var(--s-2) 10px;border-radius:var(--r-2);background:var(--amber-soft)}
.qa-look li[data-s=fail]{background:var(--red-soft)}
.qa-look b{font-weight:600}
.qa-full summary{cursor:pointer;color:var(--text-2);font-weight:600}
.qa-full p{margin:var(--s-2) 0 0;color:var(--text-2)}
.fixlist{display:flex;flex-direction:column;flex:1;margin:0;padding:0 var(--s-2) var(--s-2);list-style:none;overflow:auto;min-height:0}
.fixlist > .fix{flex:none}
.fix{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:var(--s-3);padding:var(--s-3) var(--s-2) var(--s-3) var(--s-4);border-radius:var(--r-2);transition:background-color var(--dur-2) var(--ease)}
.fix:hover,.fix.hot{background:var(--raised)}
.marker{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--primary);color:var(--ink);font:500 var(--fs-2)/1 var(--mono)}
.marker.prev{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--text-2)}
.marker.draft{background:transparent;color:var(--text);border:1.5px dashed var(--text)}
.fix-top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);min-height:20px}
.tag{display:inline-flex;align-items:center;height:20px;padding:0 var(--s-2);border-radius:var(--pill);background:var(--raised);color:var(--text-2);font-size:var(--fs-1);font-weight:500;line-height:1}
.fix:hover .tag,.fix.hot .tag{background:var(--active);color:var(--text)}
.fix-areas{color:var(--text-3);font-size:var(--fs-1)}
.fix-text{margin:6px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.fix .icon-btn{margin:-4px -4px 0 0}
.res{margin:6px 0 0;font-size:var(--fs-1);font-weight:500}
.res.ok{color:var(--green)} .res.no{color:var(--red)}
/* segmented choices: one pill plate */
.seg{display:inline-flex;gap:2px;padding:var(--s-1);border:0;border-radius:var(--pill);background:var(--bg);box-shadow:var(--edge-strong),var(--hl-top)}
.seg button{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--ctl-item-s);padding:0 var(--s-3);border:0;border-radius:var(--pill);background:transparent;color:var(--text-2);font:500 var(--fs-2)/28px var(--font);transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),scale var(--dur-1) var(--ease)}
.seg.md button{height:var(--ctl-s);padding:0 var(--s-4);font-size:var(--fs-3);line-height:36px}
.seg.num button{min-width:40px;padding:0 10px;font-weight:600;font-variant-numeric:tabular-nums}
.seg button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.seg button:disabled{color:var(--text-3);background:transparent;cursor:not-allowed}
.seg button:hover{color:var(--text);background:var(--hover-wash)}
.seg button[aria-pressed=true],.seg button[aria-pressed=true]:hover{background:var(--active);color:var(--text);box-shadow:var(--edge-strong)}
.seg button[aria-pressed=true][data-v=yes]{background:var(--green-soft);color:var(--green)}
.seg button[aria-pressed=true][data-v=no]{background:var(--red-soft);color:var(--red)}
.empty-fixes{margin:auto;max-width:34ch;padding:var(--s-4);color:var(--text-2);font-size:var(--fs-2);line-height:18px;text-align:center}
.empty-fixes b{display:block;color:var(--text);font-weight:600;margin-bottom:2px}
.composer{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-4);border-top:1px solid var(--line);background:var(--surface)}
.comp-head{display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-2);font-weight:600}
.comp-head .muted{margin-left:auto;font-weight:500;font-size:var(--fs-1)}
.composer.hot .marker.draft{background:var(--accent-soft-2)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips .chip{height:var(--ctl-s);padding:0 10px;font-size:var(--fs-1)}
.sw{position:relative;width:24px;height:24px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgb(var(--p-white-rgb) / .22);transition:transform var(--dur-1) var(--ease)}
.sw:hover{transform:scale(1.08)}
.sw.cur::after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--art-shadow-2)}
.sw[aria-pressed=true]{outline:2px solid var(--text);outline-offset:2px}
.composer textarea{display:block;width:100%;min-height:76px;max-height:200px;padding:10px var(--s-3);resize:vertical;border-radius:var(--r-2);border:1px solid var(--line-strong);background:var(--bg);font-size:var(--fs-3);line-height:20px;outline:none;transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.composer textarea:focus-visible{border-color:var(--accent);box-shadow:var(--ring-field)}
.comp-row{display:flex;align-items:center;justify-content:space-between;margin-top:-4px}
.comp-row .btn{margin-left:-8px}

/* side drawers: slide from the right, rounded toward the board */
#drawer,#qdrawer{inset:0 0 0 auto;margin:0;width:min(440px,100vw);height:100dvh;border-left:1px solid var(--line-strong);border-radius:var(--r-5) 0 0 var(--r-5);background:var(--surface);box-shadow:var(--hl-top),var(--shadow-side);
  opacity:1;translate:none;transition:opacity var(--dur-3) var(--ease),translate var(--dur-4) var(--ease-drawer),display var(--dur-4) allow-discrete,overlay var(--dur-4) allow-discrete}
#drawer:not([open]),#qdrawer:not([open]){opacity:0;translate:var(--m-slide) 0;transition-duration:var(--dur-3)}
@starting-style{#drawer[open],#qdrawer[open]{opacity:0;translate:var(--m-slide) 0}}
#drawer{grid-template-rows:auto minmax(0,1fr) auto}   /* V4: in the base rule, so the rows hold while the dialog closes (allow-discrete keeps display:grid) */
#drawer[open]{display:grid}
#qdrawer{position:fixed;z-index:var(--z-float);top:0;height:100dvh}   /* non-modal (D4): docked at the right over the live board, full height (owner 2026-09-24) */
#qdrawer .d-head{min-height:76px;padding:var(--s-3) var(--s-4) var(--s-4) var(--s-6);align-items:center}   /* the head on the header's row: 76 px tall, its content centred where the header's controls are (y 44); owner 2026-09-26: 16 px under the counts pill, off the divider */
#qdrawer .d-head::before{left:32px;right:32px;height:1px;opacity:1}
#qdrawer{grid-template-rows:auto auto minmax(0,1fr)}   /* V4: in the base rule, so the rows hold while the dialog closes (allow-discrete keeps display:grid) */
#qdrawer[open]{display:grid}   /* W25: the head, the Queue | Credits tabs (none without accounts), one panel */
#qdrawer .d-head{grid-row:1}
#q-tabs{grid-row:2;margin:var(--s-4) var(--s-6) 0}
#qdrawer .d-body{grid-row:3}
.qspend-t{width:100%;border-collapse:collapse;color:var(--text-3);font-size:var(--fs-1);line-height:16px;font-variant-numeric:tabular-nums}
.qspend-t th,.qspend-t td{padding:10px 0;border-bottom:1px solid var(--line);text-align:left;font-weight:400;vertical-align:top}
.qspend-t thead th{padding-top:0;white-space:nowrap;color:var(--text-3);font-size:var(--fs-0);font-weight:600;letter-spacing:.04em;text-transform:uppercase;cursor:help}
.qspend-t tbody th{width:1%;padding-right:var(--s-5);white-space:nowrap;color:var(--text);font-size:var(--fs-2);line-height:18px;font-weight:500}
.qspend-t td,.qspend-t thead th{width:50%}
.qspend-t td+td,.qspend-t th+th{padding-left:var(--s-4)}
.qspend-c,.qspend-i{display:block;white-space:nowrap}
.qspend-c{color:var(--text-2);font-size:var(--fs-1);line-height:18px}
.qspend-c b{color:var(--text);font:500 var(--fs-3)/18px var(--mono);letter-spacing:-.02em}
.qspend-t tr.tot th,.qspend-t tr.tot td{border-bottom:0}
.qspend-t tr.tot th,.qspend-t tr.tot .qspend-c b{font-weight:600}
.qspend-st{margin:0;color:var(--text-3);font-size:var(--fs-1);line-height:16px}
.qspend-un{display:block;width:max-content;color:var(--amber);font-size:var(--fs-0);line-height:14px;cursor:help}
#q-body{display:flex;flex-direction:column}
.q-empty{flex:1;min-height:0;margin:0;padding:var(--s-6) 0;background:none}
/* credits: one card per connected Claude (owner #3) */
.qcred .d-h,.qgroup .d-h{display:flex;align-items:center;gap:var(--s-2);margin:0 0 var(--s-3);font:600 var(--fs-4)/20px var(--font);letter-spacing:-.005em}
.qbals{display:grid;gap:var(--s-2);margin:0;padding:0;list-style:none}
.qbal{display:grid;grid-template-columns:28px minmax(0,1fr) auto;grid-template-areas:"av who num" "av sub sub" "bar bar bar";align-items:center;gap:var(--s-1) var(--s-3);padding:var(--s-3) 14px;border-radius:var(--r-3);background:linear-gradient(135deg,rgb(var(--p-mist) / .1),transparent 55%),var(--surface);border:1px solid var(--line);box-shadow:var(--hl-top);cursor:default}
.qbal .av{grid-area:av;width:28px;height:28px;font-size:var(--fs-0)}
.qb-who{grid-area:who;display:flex;align-items:center;gap:var(--s-2);min-width:0;font-size:var(--fs-2);line-height:18px}
.qb-who b{font-weight:600;min-width:0}
.qb-svc{display:inline-flex;align-items:center;gap:6px;color:var(--text-2);font-size:var(--fs-1);white-space:nowrap}
.svc{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:var(--r-xs);font:700 9px/1 var(--font);color:var(--white)}
.svc-magnific{background:#d646b8}
.svc-higgsfield{background:#6b5cff}
.svc-other{background:var(--text-3)}
.qb-num{grid-area:num;display:flex;align-items:baseline;gap:6px;justify-self:end}
.qb-num b{font:600 var(--fs-5)/24px var(--font);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.qb-num span{color:var(--text-2);font-size:var(--fs-1)}
.qb-sub{grid-area:sub;display:flex;justify-content:space-between;gap:var(--s-2);color:var(--text-2);font-size:var(--fs-1);line-height:16px}
.qb-live{display:inline-flex;align-items:center;gap:6px;color:var(--text-3);white-space:nowrap}
.qb-live.on{color:var(--green)}
.qb-live.on::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.qb-bar{grid-area:bar;height:4px;margin-top:var(--s-1);border-radius:var(--r-hair);background:var(--hatch),var(--raised);overflow:hidden}
.qb-bar i{display:block;height:100%;border-radius:var(--r-hair);background:var(--accent)}
.qbal.stale{opacity:.72}
.qbal.stale .qb-num b{color:var(--text-2)}
.qbal.low .qb-num b{color:var(--amber)}
.qbal.out .qb-num b{color:var(--red)}
.sthumb.ph{background:var(--hatch),var(--raised);color:var(--text-3)}
.sthumb.ph .i{width:var(--icon-sm);height:var(--icon-sm)}
/* @lane SRCH begin: finder */
/* finder: full-screen search over everything on the board and in the queue */
#finder{inset:0;margin:0;width:100vw;height:100dvh;background:rgba(12,15,26,.96);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));
  opacity:1;transition:opacity var(--dur-2) var(--ease),display var(--dur-2) allow-discrete,overlay var(--dur-2) allow-discrete}
#finder:not([open]){opacity:0;transition-duration:var(--dur-1)}
@starting-style{#finder[open]{opacity:0}}
#finder{grid-template-rows:auto minmax(0,1fr)}   /* V4: in the base rule, so the rows hold while the dialog closes (allow-discrete keeps display:grid) */
#finder[open]{display:grid}
#finder::backdrop{background:transparent;backdrop-filter:none}
.f-head{display:flex;align-items:center;gap:14px;width:100%;max-width:960px;margin:0 auto;padding:var(--s-6) var(--s-6) var(--s-2)}
.f-head>.i{width:22px;height:22px;color:var(--text-3);flex:none}
#f-q{flex:1;min-width:0;height:52px;border:0;background:transparent;font:400 var(--fs-6)/32px var(--mono);letter-spacing:-.02em;color:var(--text);outline:none}
#f-q::placeholder{color:var(--text-3)}
#f-q::-webkit-search-cancel-button{display:none}
.f-body{overflow:auto;padding:0 var(--s-6) var(--s-9)}
.f-in{max-width:960px;margin:0 auto}
.f-group{margin-top:var(--s-5)}
.f-group .d-h{display:flex;align-items:center;gap:var(--s-2);margin:0 0 var(--s-1);padding:0 var(--s-3)}
.frow{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;padding:6px 10px;border-radius:var(--r-3);text-align:left;color:var(--text);transition:background-color var(--dur-1) var(--ease)}
.frow:hover,.frow[aria-selected=true]{background:var(--raised)}
.fthumb{display:block;width:40px;height:54px;margin:0 auto;border-radius:var(--r-xs);background:var(--surface);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line-hi)}
.fthumb.wide{width:64px;height:38px}
.fthumb img{display:block;width:100%;height:100%;object-fit:cover}
.ftext{display:grid;min-width:0}
.ftitle{font-size:var(--fs-3);font-weight:500;line-height:20px}
.fmeta{font-size:var(--fs-1);line-height:16px;color:var(--text-2)}
.fstate{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:var(--pill);font-size:var(--fs-1);color:var(--text-2);white-space:nowrap;background:var(--surface);box-shadow:var(--edge)}
.fstate.ok{color:var(--green);background:var(--green-soft);box-shadow:none}
.fstate.send{color:var(--amber);background:var(--amber-soft);box-shadow:none}
.fstate.act{color:var(--ink);background:var(--primary);box-shadow:none;font-weight:600}
.f-group .d-h{font:500 var(--fs-1)/16px var(--font);letter-spacing:.02em;text-transform:uppercase;color:var(--text-3)}
#f-peek{position:fixed;z-index:5;width:220px;padding:6px;border-radius:var(--r-3);background:var(--raised);border:1px solid var(--line-strong);box-shadow:var(--shadow-3);opacity:0;pointer-events:none;transition:opacity var(--dur-1) var(--ease)}
#f-peek.on{opacity:1}
#f-peek.wide{width:320px}
#f-peek img{display:block;width:100%;border-radius:var(--r-2);background:var(--surface)}
#f-peek .cap{padding:6px var(--s-1) 2px;font-size:var(--fs-1);line-height:16px;color:var(--text-2)}
.f-hint{max-width:440px;margin:56px auto 0;text-align:center;color:var(--text-2);font-size:var(--fs-3);line-height:20px}
.f-hint .btn{margin-top:var(--s-3)}
/* @lane SRCH end */
mark{background:none;color:var(--accent);font-weight:600}
.d-head{position:relative;display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-4) var(--s-4) var(--s-6);border-bottom:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(var(--blur)) saturate(140%);backdrop-filter:blur(var(--blur)) saturate(140%)}
.d-head > div{flex:1;min-width:0}
.d-head h2{margin:0;font-size:var(--fs-4);line-height:22px;font-weight:600}
.d-body{overflow:auto;padding:var(--s-6)}
.d-body .media{border-radius:var(--r-3)}
.props{display:grid;grid-template-columns:112px minmax(0,1fr);gap:var(--s-2) var(--s-4);margin:var(--s-6) 0;font-size:var(--fs-2);line-height:20px}
.props dt{color:var(--text-2)}
.props dd{margin:0;display:flex;align-items:center;gap:var(--s-2);overflow-wrap:anywhere}
.props .swatch{width:12px;height:12px;flex:none}
.props .fname{flex:1;min-width:0;font:500 var(--fs-1)/18px var(--mono);overflow-wrap:anywhere}
.props .icon-btn{margin:-4px 0}
.d-tech{margin:-8px 0 var(--s-6)}
.d-tech:last-child{margin-bottom:0}   /* FX-8b (UI-COVER-37): last in the body (no fix history), the body's own 24 px closes it */
.d-tech summary{display:flex;align-items:center;gap:6px;cursor:pointer;list-style:none;color:var(--text-2);font-size:var(--fs-2);font-weight:500}
.d-tech summary::-webkit-details-marker{display:none}
.d-tech summary .i{width:var(--icon-sm);height:var(--icon-sm);transition:rotate var(--dur-2) var(--ease)}
.d-tech[open] summary .i{rotate:180deg}
.d-tech .props{margin:var(--s-3) 0 0}
.d-h{margin:0 0 var(--s-1);font-size:var(--fs-3);line-height:20px;font-weight:600}
.d-body .fixlist{padding:0;margin:0 -8px;overflow:visible}
.d-body .fix{padding-left:var(--s-2)}
.d-att{display:flex;align-items:center;gap:var(--s-2);min-height:20px;margin:var(--s-3) 0 0;color:var(--text-2);font:500 var(--fs-1)/16px var(--font);text-transform:none}   /* the game's history: one line per attempt */
.d-att:first-of-type{margin-top:var(--s-1)}
.d-foot{display:flex;flex-wrap:wrap;gap:var(--s-2);padding:var(--s-4) var(--s-6);border-top:1px solid var(--line)}
.d-foot .btn{flex:1 1 40%}

/* toasts and tooltips */
.toasts{--toast-w:min(400px,100% - 32px);position:fixed;left:50%;bottom:24px;translate:-50% var(--toast-lift,0px);transition:translate var(--dur-4) cubic-bezier(.45,.05,.55,.95);z-index:var(--z-menu);display:grid;gap:var(--s-2);width:var(--toast-w);pointer-events:none}   /* N1 r3: one fixed width per stack, every toast stretches to it; the text wraps inside, so no width ever changes */   /* DS-7: the lift keeps its own gentle curve: --ease-in-out steps 18 px a frame, MOTION-1 allows 8 */
#editor > .toasts{position:absolute;top:84px;bottom:auto;left:calc((100% - 400px) / 2);right:auto;translate:-50% 0;--toast-w:min(360px,100% - 432px)}   /* UI-SYNTH 1.19: centred on the stage under the head, over neither the panel's buttons nor the cover's logo */
@media (prefers-reduced-motion:no-preference){#editor > .toasts{--m-toast:-12px}}   /* B4: the editor's box sits at the top: its toasts come from above and leave upward (reduced motion keeps the token 0) */
#editor:has(.m-imgerr:not([hidden])) > .toasts{top:128px}   /* B1 (review m-5) was: the foot of the side panel */   /* FIX-W12A (VERIFY-W10 F3): in the editor (its dialog is the box) above the stage's toolbar (16 + 46 px), centred on the stage */
.toast{display:flex;align-items:center;gap:var(--s-4);min-height:48px;padding:var(--s-1) var(--s-1) var(--s-1) var(--s-4);border-radius:var(--r-3);background:var(--glass-strong);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));border:1px solid var(--line-strong);box-shadow:inset 0 1px 0 var(--line-hi),var(--shadow-2);pointer-events:auto;position:relative;animation:toast-in var(--dur-3) var(--ease)}
.toast > span{min-width:0}
.toast.bad > span{display:flex;align-items:flex-start;gap:var(--s-2)}   /* UI-COVER-10: a failure toast: the red alert mark before the words, on the first line; the surface stays the calm glass */
.toast.bad > span > .toast-ic{flex:none;display:grid;place-items:center;width:var(--icon-md);height:20px;color:var(--red)}
.toast.bad > span > .toast-ic .i{width:var(--icon-md);height:var(--icon-md)}
.toast:not(:has(button)){padding-right:var(--s-4)}
@keyframes toast-in{from{opacity:0;translate:0 var(--m-toast)}}   /* leaves the same edge it came from: motion.js exit() */
/* the Undo window as a hairline that runs out (motion.js is not needed: index.html toast() drives it with WAAPI, paused on hover) */
.toast-time{position:absolute;left:14px;right:14px;bottom:-1px;height:2px;border-radius:var(--r-hair);background:linear-gradient(90deg,var(--accent-soft-2),var(--accent));transform-origin:left;pointer-events:none}
/* NF-B5 R10-R11: the page's stack rests folded, so it never grows over the first card row: its newest toast in full, the two before it as 8 px edges behind (at most 64 px tall); pointer or focus on it opens today's list */
.toasts.stk:not(.open) > .toast{grid-area:1/1;align-self:end;transition:translate var(--dur-3) var(--ease),scale var(--dur-3) var(--ease),opacity var(--dur-2) var(--ease)}
.toasts.stk:not(.open) > .toast.back{height:var(--front-h,48px);min-height:0;overflow:hidden;translate:0 calc(-8px * var(--i));clip-path:inset(0 calc(10px * var(--i)) round var(--r-3))}   /* the taper is a clip, not a scale: every toast keeps its box, one width and 48 px (final_b4, fr_toast_lift) */
.toasts.stk:not(.open) > .toast.back > *{opacity:0;pointer-events:none}
.toasts.stk:not(.open) > .toast.back.deep{opacity:0;pointer-events:none}
.toasts.stk:not(.open) > .toast[data-more]:not(.back)::after{content:attr(data-more);flex:none;margin-left:auto;padding-right:var(--s-3);color:var(--text-2);font:500 var(--fs-1)/16px var(--font);white-space:nowrap}
.toasts.stk:not(.open) > .toast[data-more]:not(.back):not(:has(button))::after{padding-right:0}
.toasts.stk.open{pointer-events:auto}   /* open: the 8 px gaps belong to the stack, so crossing one does not fold it */
.toasts.stk.open > .toast > span{flex:1 1 auto}   /* DR1-8: in the open list the words take the row, so every Undo ends on one right edge; the folded front and a lone toast keep their look */
@media (prefers-reduced-motion:reduce){.toasts.stk:not(.open) > .toast,.toasts.stk.open > .toast{transition:opacity var(--dur-2) var(--ease)}}
.toast.fold > span{color:var(--text-2)}   /* R9: the fold row of older Undos */
.tip{white-space:pre-line;position:fixed;z-index:var(--z-tip);max-width:280px;padding:6px var(--s-2);border-radius:var(--r-2);background:var(--raised);border:1px solid var(--line-strong);color:var(--text);box-shadow:var(--shadow-1);font-size:var(--fs-1);line-height:16px;font-weight:500;pointer-events:none;animation:fade var(--dur-1) var(--ease)}
.tip.warm{animation:none}   /* motion: sweeping along a toolbar, the next tip is already there */

/* generate: pick games, queue them */
input[type=radio]{width:16px;height:16px;margin:0;accent-color:var(--accent);cursor:inherit}
/* one checkbox everywhere (owner, refs/owner-109): the real <input>, drawn: a glassy square on the dark surface; checked = the accent
   gradient with the family's check (i-check), mixed = the family's dash (i-minus); hover, focus ring, disabled */
:root{--cb-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --cb-dash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E")}
input[type=checkbox]:not(.switch){appearance:none;-webkit-appearance:none;flex:none;display:inline-grid;place-content:center;width:18px;height:18px;margin:0;border-radius:var(--cb-r);border:1px solid var(--line-strong);background:linear-gradient(180deg,rgb(var(--p-mist) / .12),var(--line-faint)),var(--bg);box-shadow:var(--hl-top);cursor:pointer;vertical-align:middle;transition:background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
input[type=checkbox]:not(.switch)::before{content:"";width:14px;height:14px;background:var(--on-accent);-webkit-mask:var(--cb-check) center/14px 14px no-repeat;mask:var(--cb-check) center/14px 14px no-repeat;opacity:0;transform:scale(.5);transition:transform var(--dur-1) var(--ease),opacity var(--dur-1) var(--ease)}
input[type=checkbox]:not(.switch):hover{border-color:var(--line-hover);background-color:var(--hover)}
input[type=checkbox]:not(.switch):is(:checked,:indeterminate){border-color:transparent;background:linear-gradient(135deg,var(--check-1) 0%,var(--accent) 55%,var(--check-2) 100%);box-shadow:inset 0 1px 0 rgb(var(--p-white-rgb) / .5),0 4px 12px -4px rgb(var(--p-accent-rgb) / .55)}
input[type=checkbox]:not(.switch):checked::before{opacity:1;transform:none}
input[type=checkbox]:not(.switch):indeterminate::before{-webkit-mask-image:var(--cb-dash);mask-image:var(--cb-dash);opacity:1;transform:none}
input[type=checkbox]:not(.switch):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input[type=checkbox]:not(.switch):disabled{opacity:.4;cursor:not-allowed}
input[type=checkbox]:not(.switch):disabled:hover{border-color:var(--line-strong);background-color:transparent}
@media (forced-colors:active){input[type=checkbox]:not(.switch){appearance:auto}}
/* @lane GDL begin: gen dialog */
#gen{width:min(1180px,calc(100vw - 32px));height:min(860px,calc(100dvh - 32px));border:1px solid var(--line-strong);border-radius:var(--r-5);background:var(--surface);overflow:hidden;box-shadow:inset 0 1px 0 var(--line-hi),var(--shadow-3);
  opacity:1;scale:none;transition:opacity var(--dur-3) var(--ease),scale var(--dur-3) var(--ease),display var(--dur-3) allow-discrete,overlay var(--dur-3) allow-discrete}
#gen:not([open]){opacity:0;scale:var(--m-dialog);transition-duration:var(--dur-2)}
@starting-style{#gen[open]{opacity:0;scale:var(--m-dialog)}}
#gen{grid-template-rows:auto minmax(0,1fr) auto}   /* V4: in the base rule, so the rows hold while the dialog closes (allow-discrete keeps display:grid) */
#gen[open]{display:grid}
.g-body{display:grid;grid-template-columns:minmax(0,1fr) 360px;grid-template-rows:minmax(0,1fr);min-height:0}
.g-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.g-main .ptabs{margin:var(--s-3) var(--s-4) 0}
.g-pane,#fixlist,#cmpanel,#qapanel{animation:fade var(--dur-2) var(--ease)}
.g-pane{display:flex;flex-direction:column;gap:var(--s-3);flex:1;min-height:0;padding:var(--s-3) var(--s-6) var(--s-4)}
.g-tools{display:flex;align-items:center;gap:var(--s-2)}
.g-tools .search{order:0;flex:1;width:auto;min-width:0}
#g-prov{max-width:240px;padding:0 10px 0 14px}
#g-prov.set{border-color:var(--accent);color:var(--text)}
#g-prov .i{color:var(--text-3)}
.g-info{display:flex;align-items:center;gap:var(--s-3);min-height:28px;color:var(--text-2);font-size:var(--fs-2)}
.g-all{display:inline-flex;align-items:center;gap:var(--s-2);margin-left:auto;color:var(--text);font:500 var(--fs-2)/18px var(--font);cursor:pointer;white-space:nowrap}
.g-all.off{color:var(--text-3);cursor:not-allowed}
.g-hint{margin:0;color:var(--text-3);font-size:var(--fs-1);line-height:16px}
.clist,.glines{flex:1;min-height:0;margin:0 -8px;padding:0 0 var(--s-2);list-style:none;overflow:auto}
.crow label{display:grid;grid-template-columns:18px 60px minmax(0,1fr) auto;align-items:center;gap:var(--s-3);padding:var(--s-2);border-radius:var(--r-2);cursor:pointer;transition:background-color var(--dur-2) var(--ease)}
.crow label:hover{background:var(--raised)}
.crow.off label{cursor:default}
.crow.off label:hover{background:transparent}
.crow.off .cthumb,.crow.off .ctext{opacity:.45}
.cthumb,.sthumb{display:grid;place-items:center;width:60px;height:36px;border-radius:var(--r-1);background:var(--raised);overflow:hidden;color:var(--text-3);box-shadow:inset 0 0 0 1px var(--line-hi)}
.cthumb img,.sthumb img{display:block;width:100%;height:100%;object-fit:cover}
.ctext,.stext{display:flex;flex-direction:column;min-width:0}
.ctitle{font-size:var(--fs-3);line-height:20px;font-weight:500}
.cprov{color:var(--text-2);font-size:var(--fs-1);line-height:16px}
.tag.st-done{background:var(--green-soft);color:var(--green)}
.tag.st-in_work{background:var(--amber-soft);color:var(--amber)}
.tag[data-tip]{cursor:help}
.cmore{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-2) var(--s-1)}
.cempty{display:flex;flex-direction:column;align-items:center;gap:var(--s-3);padding:var(--s-7) var(--s-2);color:var(--text-2);text-align:center}
.cempty p{margin:0}
.sk-row{display:grid;grid-template-columns:18px 60px minmax(0,1fr) auto;align-items:center;gap:var(--s-3);padding:var(--s-2)}
.g-text{display:block;width:100%;min-height:136px;max-height:40vh;padding:10px var(--s-3);resize:vertical;border-radius:var(--r-2);border:1px solid var(--line-strong);background:var(--bg);font-size:var(--fs-3);line-height:20px;outline:none;transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.g-text:focus-visible,.num-in:focus-visible{border-color:var(--accent);box-shadow:var(--ring-field)}
.gline{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s-3);padding:var(--s-2);border-radius:var(--r-2)}
.gline > .i{width:var(--icon-md)}
.gline:hover{background:var(--raised)}
.gl-text{min-width:0}
.gl-main{margin:0;font-weight:500}
.gl-sub{margin:0;color:var(--text-2);font-size:var(--fs-1);line-height:16px}
.gline.off .gl-text{opacity:.5}
.gline .select select{max-width:260px;height:var(--ctl-s);padding-right:28px;font-size:var(--fs-1)}
.gline .select .i{top:6px;right:8px}
.i.ok{color:var(--green)} .i.warn{color:var(--amber)} .i.off{color:var(--text-3)}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-2);min-height:176px;padding:var(--s-6);border:1.5px dashed var(--line-strong);border-radius:var(--r-4);background:var(--hatch),var(--bg);color:var(--text-2);text-align:center;cursor:pointer;transition:border-color var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--hatch),var(--surface);color:var(--text)}
.drop .i{width:24px;height:24px}
.drop p{margin:0}
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));align-content:start;gap:var(--s-3);flex:1;min-height:0;margin:0;padding:0;list-style:none;overflow:auto}
.shot{position:relative;aspect-ratio:4/3;border-radius:var(--r-2);background:var(--raised);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line-hi)}
.shot img{display:block;width:100%;height:100%;object-fit:cover}
.shot-x{position:absolute;top:6px;right:6px;background:var(--on-image);color:var(--text)}
.shot-x:hover{background:rgba(32,38,64,.96)}
.shot-st{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:6px;min-height:32px;padding:var(--s-1) 6px var(--s-1) var(--s-2);background:var(--on-image);font-size:var(--fs-1);font-weight:500}
.shot[data-state=up] .shot-st::after{content:"";flex:1;height:3px;border-radius:var(--r-hair);background:linear-gradient(90deg,var(--line) 35%,rgb(var(--p-mist) / .55) 50%,var(--line) 65%) 0 0/300% 100%;animation:shimmer 1.4s linear infinite}
.shot[data-state=err] .shot-st{color:var(--red)}
.shot-st .btn{margin-left:auto;height:var(--ctl-xs);padding:0 var(--s-2)}
.g-side{display:flex;flex-direction:column;min-height:0;overflow-y:auto;overscroll-behavior:contain;border-left:1px solid var(--line)}   /* FIX-R1: on a short window the panel scrolls above the footer, Effort is never under it */
/* the request block (SPEC-new-generation §4): the hero number, the groups, the empty plate centred */
.req-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);padding:var(--s-4) var(--s-5) 0}
.req-head h3{margin:0;font-size:var(--fs-3);line-height:20px;font-weight:600}
.req-head .total{margin-left:auto}
.req-n{font:400 var(--fs-6)/32px var(--mono);letter-spacing:-.02em;white-space:nowrap}
/* the total pill (owner #12): glass, gradient hairline, the number in the display face, the word in the text face, a quiet meaning after a dot */
.totals{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:10px}
.total{position:relative;display:inline-flex;align-items:baseline;gap:var(--s-2);padding:var(--s-2) 14px var(--s-2) var(--s-3);border-radius:var(--pill);background:var(--glass-strong);border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--line-hi),var(--shadow-1);white-space:nowrap;isolation:isolate}
.total::before{content:"";position:absolute;left:14px;right:14px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgb(var(--p-accent-rgb) / .8) 30%,rgba(255,143,208,.7) 70%,transparent);pointer-events:none}
.total b{font:400 var(--fs-6)/24px var(--mono);letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums}
.total .w{font:500 var(--fs-2)/18px var(--font);color:var(--text)}
.total .q{font:400 var(--fs-1)/18px var(--font);color:var(--text-3)}
.total .q::before{content:"·";margin-right:6px;color:var(--text-3)}
.total.sm{padding:var(--s-1) var(--s-3) var(--s-1) 10px;gap:6px}
#g-found.totals{margin:0}
#g-found .total{padding:2px var(--s-3) 2px 10px;gap:6px}
#g-found .total b{font-size:var(--fs-4b);line-height:22px}
.total.sm b{font-size:var(--fs-4b);line-height:22px}
.req-sub{margin:0;padding:0 var(--s-5);color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.req-draft{margin:0;padding:var(--s-1) var(--s-5) 0;color:var(--text-3);font-size:var(--fs-1);line-height:16px}
.sel-empty{margin:auto;max-width:30ch;padding:var(--s-4);color:var(--text-2);font-size:var(--fs-2);line-height:18px;text-align:center}
.sel-empty b{display:block;margin-bottom:var(--s-1);color:var(--text);font-size:var(--fs-3)}
.cthumb.ph,.sthumb.ph{background:var(--hatch),var(--raised);color:var(--text-3)}
.cthumb.ph .i,.sthumb.ph .i{width:var(--icon-sm);height:var(--icon-sm)}
.crow.on label{background:var(--raised)}
.tag .i{width:var(--icon-xs);height:var(--icon-xs);margin-right:var(--s-1)}
.g-why-line{margin:-4px 0 0}
.mpick{height:auto;min-height:44px;padding:6px var(--s-3) 6px 14px}
.mpick .mtext{display:grid;flex:1;min-width:0;gap:1px;text-align:left}
.mpick .mlabel{font-size:var(--fs-3);line-height:20px;font-weight:600}
.mpick .mcost{font:400 var(--fs-1)/16px var(--font);color:var(--text-2)}
.mo-ok{display:inline-flex;align-items:center;gap:var(--s-1);color:var(--green);font-size:var(--fs-0);font-weight:500;white-space:nowrap}
.mo-ok .i{width:var(--icon-xs);height:var(--icon-xs)}
.mo .mcost{font:400 var(--fs-1)/16px var(--font)}
.g-hint.bad{color:var(--red)}
.g-opts > .g-usage{margin:-4px 0 0}
.g-cost{display:grid;gap:2px;flex:1;min-width:0;margin:0 var(--s-2) 0 0}
.g-cost b{font:400 var(--fs-4b)/24px var(--mono);letter-spacing:-.02em;font-weight:400}
.g-cost b:empty{display:none}
.g-cost span{color:var(--text-2);font-size:var(--fs-1);line-height:16px}
.g-cost .g-why{color:var(--amber)}
.btn .spin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(28,19,3,.3);border-top-color:var(--on-amber);animation:spin var(--loop-spin) linear infinite}
.btn.amber .spin{border-color:rgb(var(--p-white-rgb) / .33);border-top-color:var(--white)}
@keyframes spin{to{rotate:360deg}}
.g-sel-sub{margin:0;padding:0 var(--s-5) var(--s-2);color:var(--text-2);font-size:var(--fs-1);line-height:16px}
.sel{display:flex;flex-direction:column;flex:1;min-height:96px;margin:0;padding:0 var(--s-2) var(--s-2);list-style:none;overflow:auto}
.sel > li{flex:none}
.sel > .sel-empty{flex:none;margin:auto}
.srow{display:grid;grid-template-columns:60px minmax(0,1fr) auto;align-items:center;gap:var(--s-3);padding:6px var(--s-1) 6px var(--s-3);border-radius:var(--r-2);transition:background-color var(--dur-2) var(--ease)}
.srow:hover{background:var(--raised)}
.srow .sthumb,.srow .cthumb{width:60px;height:36px}
.stitle{margin:0;font-size:var(--fs-2);line-height:18px;font-weight:500}
.ssub{margin:0;color:var(--text-2);font-size:var(--fs-1);line-height:16px}
.srow.warn .ssub{color:var(--amber)}
.sel-empty{padding:var(--s-2) var(--s-3);color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.sel-sub{padding:var(--s-3) var(--s-3) var(--s-1);color:var(--text-3);font:500 var(--fs-1)/16px var(--font);letter-spacing:.02em;text-transform:uppercase}   /* «Не войдут»: lines that stay out of the request */
.srow.off .stitle{color:var(--text-2)}
.sel-empty b{display:block;margin-bottom:2px;color:var(--text);font-weight:600}
.g-opts{display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-4) var(--s-5);border-top:1px solid var(--line)}
.g-label{margin:0 0 var(--s-2);font-size:var(--fs-2);line-height:18px;font-weight:600}
/* owner 2026-09-26: the option helper lines live in a tooltip on the (i) by the label; a line that says what is wrong stays in view */
.g-label:has(.g-q){display:flex;align-items:center;gap:6px}
.g-q{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;color:var(--text-3);cursor:help;transition:color var(--dur-2) var(--ease)}
.g-q:hover,.g-q:focus-visible{color:var(--text)}
.g-q .i{width:var(--icon-sm);height:var(--icon-sm)}
.g-opts .g-hint:not(.bad){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mpick{width:100%;height:36px;justify-content:flex-start;gap:var(--s-2);padding:0 var(--s-3) 0 14px;background:var(--bg)}
.mpick .mlabel{flex:1;min-width:0;text-align:left}
.mpick .i{color:var(--text-3)}
.mp-note{display:grid;margin-top:6px;color:var(--text-2);font-size:var(--fs-1);line-height:16px}
.mlabel{font-size:var(--fs-2);line-height:18px;font-weight:600}
.mcost{color:var(--text-2);font:400 var(--fs-1)/18px var(--font);white-space:nowrap}
.mcost.muted{color:var(--text-3)}
.modelpop{width:min(380px,calc(100vw - 32px));max-height:min(480px,calc(100dvh - 96px));padding:var(--s-1);overflow:auto}
.modelpop:popover-open{display:grid;gap:2px}
.mo{display:grid;gap:2px;width:100%;padding:10px var(--s-3);border-radius:var(--r-2);text-align:left;transition:background-color var(--dur-2) var(--ease)}
.mo:hover{background:var(--hover)}
.mo[aria-pressed=true]{background:var(--hover);box-shadow:var(--edge-accent)}
.mo-top{display:flex;align-items:baseline;gap:var(--s-2)}
.mo-top .mlabel{flex:1}
.mo .mnote{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--text-2);font-size:var(--fs-1);line-height:16px}
/* FX-8c (UI-COVER-39): a model row is two lines, name · mark · price, then one line of note (the full note in its tooltip): seven rows fit in 480 px; the queue's service menu (ng.js) keeps its rows */
#g-modelpop .mo{padding:var(--s-2) var(--s-3)}
#g-modelpop .mo-top{align-items:center}
#g-modelpop .mo-top .mlabel{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#g-modelpop .mo-top .mcost,#g-modelpop .mo-top .tm-why{margin-left:auto;font-variant-numeric:tabular-nums}
#g-modelpop .mo .mnote{display:block;white-space:nowrap;text-overflow:ellipsis}
.seg.effort button{min-width:44px;height:var(--ctl-item-s);font:500 var(--fs-2)/1 var(--font)}
.seg.effort button[aria-pressed=true]{background:var(--primary);color:var(--ink)}
.num-in{width:88px;height:var(--ctl-s);padding:0 var(--s-3);border-radius:var(--r-2);border:1px solid var(--line-strong);background:var(--bg);font:500 var(--fs-2)/1 var(--font);outline:none;transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.num-in:hover:not(:focus){border-color:var(--line-hover)}
.num-in[aria-invalid=true]{border-color:var(--red)}
#g-effort-hint{margin-top:var(--s-2)}
.g-foot{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-4) var(--s-3) var(--s-6);border-top:1px solid var(--line)}
.g-cost{flex:1;min-width:0;margin:0 var(--s-2) 0 0;font-size:var(--fs-2);line-height:18px}
.g-cost b{font-weight:600}
.g-cost span{color:var(--text-2)}
.provpop{width:min(320px,calc(100vw - 32px));max-height:min(440px,calc(100dvh - 96px));padding:var(--s-2);flex-direction:column;gap:var(--s-2)}
.provpop:popover-open{display:flex}
.provpop .search{order:0;width:100%}
.plist{flex:1;min-height:0;margin:0 -4px;overflow:auto}
.prow{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:10px;height:34px;padding:0 var(--s-2);border-radius:var(--r-1);font-size:var(--fs-2);cursor:pointer}
.prow:hover{background:var(--hover)}
.prow.zero{color:var(--text-3)}
.pn{color:var(--text-3);font:500 var(--fs-0)/1 var(--mono)}
.pfoot{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);min-height:36px;padding:var(--s-2) var(--s-1) 0;border-top:1px solid var(--line-strong);color:var(--text-2);font-size:var(--fs-1)}
/* @lane GDL end */
.qgroup:not([hidden])+.qgroup{margin-top:var(--s-7)}   /* a hidden Credits section leaves no gap */
/* a job card (owner, refs/owner-111): one spacing grid (12 inside, 8 between cards), a glass surface with the state's light on its edge */
.qlist{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-2);margin:0;padding:0;list-style:none}   /* the track never grows past the drawer: a card's min-content does not size it */
.qcard{--tone:var(--line-strong);display:flex;flex-direction:column;gap:var(--s-3);min-width:0;padding:var(--s-3) 14px;border-radius:var(--r-3);border:1px solid var(--line);background:linear-gradient(135deg,rgb(var(--p-mist) / .07),transparent 55%),var(--surface);box-shadow:var(--hl-top)}
.qcard[data-tone=run]{--tone:rgb(var(--p-amber-rgb) / .55);border-color:rgb(var(--p-amber-rgb) / .22);box-shadow:var(--hl-top),var(--shadow-2)}
.qcard[data-tone=bad]{--tone:var(--red-line-strong);border-color:var(--red-line)}
.qcard[data-tone=ok]{--tone:var(--green-line-strong)}
.qcard.hl{border-color:var(--accent);box-shadow:var(--hl-top),0 0 0 1px var(--accent)}
.qhead{display:grid;grid-template-columns:60px minmax(0,1fr) auto;align-items:center;gap:var(--s-3);min-width:0}
.qid{display:flex;flex-direction:column;min-width:0}
.qtitle{margin:0;font:600 var(--fs-2)/18px var(--font);color:var(--text)}
.qcard .qtitle.two{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}   /* FV-5: a long game or style job name takes two lines (frame r6) */
.qsub{display:flex;align-items:center;gap:6px;min-width:0}
.qsub .tag{height:18px;padding:0 var(--s-2);font-size:var(--fs-1)}
.qclock.only::before{content:none}
.qprov{margin:0;color:var(--text-2);font-size:var(--fs-1);line-height:16px}
/* the state pill: word + icon + the timer in the text face */
.qpill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px 0 var(--s-2);border-radius:var(--pill);background:var(--raised);box-shadow:var(--edge);color:var(--text-2);font:500 var(--fs-1)/1 var(--font);white-space:nowrap}
.qpill .i{width:var(--icon-sm);height:var(--icon-sm)}
.qpill b{font-weight:600;color:inherit}
.qclock{color:var(--text-2);font-variant-numeric:tabular-nums}
.qclock::before{content:"·";margin-right:6px;color:var(--text-3)}
.qpill[data-tone=run]{background:var(--amber-soft);box-shadow:none;color:var(--amber)}
.qpill[data-tone=run] .i{animation:op-q-breathe var(--loop-pulse) var(--ease-in-out) infinite}
.qpill[data-tone=bad]{background:var(--red-soft);box-shadow:none;color:var(--red)}
.qpill[data-tone=stall]{background:var(--amber-soft);box-shadow:none;color:var(--amber)}   /* no breathing: nothing is happening */
.qcard[data-tone=stall]{border-color:var(--amber-line)}
.qcard[data-tone=stall] .qstepper li.cur i{box-shadow:none;background:transparent;box-shadow:inset 0 0 0 2px var(--amber)}
.qreason.stall > .i,.qreason.stall .qnote{color:var(--amber)}
#q-fresh{display:inline;color:var(--text-3);font-size:var(--fs-1);white-space:nowrap}   /* owner 2026-09-25: beside the pills, not a line of its own */
#q-fresh:empty{display:none}
.qpill[data-tone=ok]{background:var(--green-soft);box-shadow:none;color:var(--green)}
.qcard.over .qpill{background:rgb(var(--p-amber-rgb) / .22);color:#ffd08a}
@keyframes op-q-breathe{50%{opacity:.45}}
/* the stepper: dots joined by a line; done ✓ green, the current one lit amber, upcoming dim */
.qstepper{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;margin:0;padding:0;list-style:none}
.qstepper li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;color:var(--text-3);font-size:var(--fs-0);line-height:14px;text-align:center}
.qstepper li::before{content:"";position:absolute;top:7px;right:50%;left:-50%;height:2px;border-radius:var(--r-hair);background:var(--raised)}
.qstepper li:first-child::before{display:none}
.qstepper li.done::before,.qstepper li.cur::before{background:linear-gradient(90deg,var(--green),var(--green))}
.qstepper li.cur::before{background:linear-gradient(90deg,var(--green),var(--amber))}
.qstepper i{position:relative;z-index:1;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--raised);box-shadow:var(--edge-strong)}
.qstepper i .i{width:10px;height:10px}
.qstepper li.done{color:var(--text-2)}
.qstepper li.done i{background:var(--green);box-shadow:none;color:var(--on-green)}
.qstepper li.cur{color:var(--amber);font-weight:600}
.qstepper li.cur i{background:var(--amber);box-shadow:0 0 0 4px var(--amber-soft),0 0 14px rgb(var(--p-amber-rgb) / .55)}
.qstepper span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qcard[data-st=queued] .qstepper li:first-child i{box-shadow:inset 0 0 0 1px var(--amber)}
/* motion (SYSTEM.md §queue): a stage completes. The check pops in, the joint fills toward the next stage, then that stage lights up.
   Marked by qRow only when this browser saw the job one stage earlier, so opening the drawer never replays history. */
.qstepper li.m-done i{animation:q-pop var(--dur-5) var(--ease-pop) both}
.qstepper li.m-lit::before{transform-origin:left;animation:q-fill var(--dur-4) var(--ease) both}
.qstepper li.m-lit i{animation:q-pop var(--dur-5) var(--ease-pop) var(--dur-3) both}
@keyframes q-pop{from{opacity:.3;transform:scale(.9)}}
@keyframes q-fill{from{transform:scaleX(0)}}
/* the reason: an icon, one line, the one action */
.qreason{display:flex;align-items:center;gap:var(--s-2);min-width:0;color:var(--text-2)}
.qstepper{min-width:0}
.qreason > .i{flex:none;width:var(--icon-md);height:var(--icon-md);color:var(--text-3)}
.qreason .qnote{flex:1;min-width:0;margin:0;font-size:var(--fs-1);line-height:16px}
.qreason .btn{flex:none;margin:0 0 0 auto}
.qreason.bad > .i,.qreason.bad .qnote{color:var(--red)}
.qgroup-note{margin:0 0 var(--s-2)}
/* the footer: the requester as a chip, Claude, Cancel quiet at the right */
.qfoot{display:flex;align-items:center;gap:var(--s-2);min-width:0;min-height:28px;padding-top:10px;border-top:1px solid var(--line)}
.qfoot:has(.qbrand) > .qwho:first-child{flex:none;padding:0 2px}
.qfoot:has(.qbrand) > .qwho:first-child > :not(.av){display:none}
.qfoot .qbrand{min-width:0}
.qwho{display:inline-flex;flex:0 1 auto;align-items:center;gap:6px;min-width:0;height:24px;padding:0 10px 0 2px;border-radius:var(--pill);background:var(--raised);color:var(--text-2);font-size:var(--fs-1);line-height:16px}
.qwho .i{flex:none;width:var(--icon-sm);height:var(--icon-sm);margin-left:5px}
.qwho .av{flex:none}
.qwho > .truncate{min-width:0}   /* long names end with an ellipsis before Cancel */
.qcancel{flex:none;margin-left:auto}
#q-body.stale .qpill[data-tone=run] .i,#q-body.stale .qstepper li.cur i{animation:none}
.qnote{margin:2px 0 0;color:var(--text-2);font-size:var(--fs-1);line-height:16px}
.qgroup-note{margin:-2px 0 6px;font-size:var(--fs-2);line-height:18px}
.q-stale{margin:0 0 var(--s-4)}

/* ---------- team (spec v2 §3): people, sign-in, Пользователи; the board's own tokens, radii, chips and dialogs ---------- */
.av{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--c,var(--text-3));color:var(--ink);font:600 var(--fs-0)/1 var(--font);letter-spacing:.02em;user-select:none}
.av.xs{width:20px;height:20px;font-size:10px}
.av.lg{width:40px;height:40px;font-size:15px}
.av.off{filter:grayscale(1);opacity:.5}
.av.on{box-shadow:var(--ring-gap),0 0 0 3.5px var(--green)}
.av.pic{background:var(--raised);overflow:hidden}
.av img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.av-pick{display:flex;flex-wrap:wrap;gap:10px}
.av-pick label{position:relative;display:block;border-radius:50%;cursor:pointer}
.av-pick input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.av-pick img{display:block;width:48px;height:48px;border-radius:50%;box-shadow:0 0 0 1px var(--line-strong);transition:box-shadow var(--dur-2) var(--ease),transform var(--dur-1) var(--ease)}
.av-pick label:hover img{box-shadow:0 0 0 1px var(--line-hover);transform:scale(1.04)}
.av-pick input:checked + img{box-shadow:var(--ring-gap),0 0 0 4px var(--accent)}
.av-pick input:focus-visible + img{box-shadow:var(--ring-gap),0 0 0 4px var(--line-hover)}
.av-pick input:checked:focus-visible + img{box-shadow:var(--ring-gap),0 0 0 4px var(--accent),0 0 0 7px var(--accent-soft-2)}
.avs{display:inline-flex;align-items:center}
.avs .av{box-shadow:var(--ring-gap)}
.avs .av+.av{margin-left:-6px}
.avs .more{margin-left:6px;color:var(--text-2);font:500 var(--fs-0)/1 var(--mono)}
.card.seen{border-color:var(--ring);box-shadow:var(--hl-top),0 0 0 1px var(--ring)}
.seen-by{position:absolute;left:8px;bottom:8px;z-index:3;display:inline-flex;align-items:center;gap:6px;max-width:calc(100% - 16px);height:28px;padding:0 10px 0 var(--s-1);border-radius:var(--pill);background:var(--on-image);box-shadow:0 0 0 1px var(--hl-2);color:var(--text);font-size:var(--fs-1);font-weight:500;white-space:nowrap}
.seen-by .avs .av{box-shadow:0 0 0 2px #0f1222}
.seen-by > span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.m-brand{display:inline-flex;flex:0 1 auto;min-width:0}
.m-brand[hidden]{display:none}
.m-head .qbrand{max-width:200px}
.m-seen{display:inline-flex;align-items:center;gap:var(--s-2);flex:none;max-width:320px;height:28px;padding:0 var(--s-3) 0 var(--s-1);border-radius:var(--pill);background:var(--raised);color:var(--text-2);font-size:var(--fs-1);font-weight:500;white-space:nowrap}
.m-seen > span:last-child{overflow:hidden;text-overflow:ellipsis}
.ro-note{display:flex;align-items:flex-start;gap:10px;padding:var(--s-4) var(--s-5);border-top:1px solid var(--line);color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.ro-note .i{margin-top:1px;color:var(--text-3)}
.ro-note b{color:var(--text);font-weight:600}
.fix-by{display:inline-flex;align-items:center;gap:6px;min-width:0;color:var(--text-3);font-size:var(--fs-1);line-height:16px}
.c-cost{white-space:pre-line;margin:-4px 0 0;color:var(--text-2);font-size:var(--fs-1);line-height:16px;font-variant-numeric:tabular-nums}
.c-cost.out{color:var(--amber)}
.c-svc{display:flex;align-items:center;gap:var(--s-2);margin:-4px 0 0;color:var(--text-2);font-size:var(--fs-1);line-height:16px}
#c-svc-pick{margin:var(--s-1) 0 0}
.tab-sep{align-self:center;width:1px;height:20px;margin:0 6px;background:var(--line-strong)}
.sync-chip{flex:none;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 var(--s-2);border-radius:var(--pill);background:var(--amber-soft);color:var(--amber);font-size:var(--fs-1);font-weight:500;white-space:nowrap;cursor:default;animation:fade var(--dur-2) var(--ease)}
.sync-chip .qdot{background:var(--amber);margin:0}
/* B-26 r2: a sync chip is its whole word or one designed dot chip (#sync-dot, focusable, its tip and aria-label carry every active message), never a sliver. syncDot() (index.html) puts .sync-short on the bar when the words do not fit beside the stats, the search floor and the account */
.sync-dot{display:none;flex:none;width:20px;height:20px;padding:0;justify-content:center;border-radius:50%;outline-offset:2px}
.sync-dot[hidden]{display:none!important}
.bar-actions.sync-short .sync-chip:not(.sync-dot){display:none}
.bar-actions.sync-short .sync-dot:not([hidden]){display:inline-flex}
/* NF-B1: the one «Server unavailable» line. Red is the error that blocks every save (DR-12); a button, since a press checks again */
.sync-chip[data-tone=error]{border:0;font:inherit;font-size:var(--fs-1);font-weight:500;background:var(--red-soft);color:var(--red);cursor:pointer;transition:background var(--dur-2) var(--ease),scale var(--dur-1) var(--ease)}
.sync-chip[data-tone=error] .qdot{background:var(--red)}
.sync-chip[data-tone=error]:hover{background:var(--red-soft-2)}
.sync-chip[data-tone=error]:active{scale:.97}
.net-chip:not([hidden]){animation:net-in var(--dur-2) var(--ease)}   /* V4: opacity 0 → 1 in, back out through .out; the slot stays in the row */
.net-chip.out[hidden]{display:inline-flex!important;opacity:0;transition:opacity var(--dur-2) var(--ease);pointer-events:none}   /* painted for one --dur-2 after [hidden] */
@keyframes net-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.net-chip:not([hidden]){animation:none}}
.sync-chip.checking{cursor:default}
.sync-chip.net-chip{min-width:140px}   /* DR1-9 (DESIGN-REVIEW-1): «Checking…» is shorter than «Server unavailable»; the chip keeps the resting width, so the bar and the search field do not move for the press. fitBar() measures with this floor and pins it */
.sync-chip.checking .qdot{animation:net-pulse var(--loop-spin) var(--ease) infinite alternate}
@keyframes net-pulse{from{opacity:.4}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.sync-chip.checking .qdot{animation:none}}
.sync-dot.err{background:var(--red-soft);color:var(--red)}
/* the account menu (owner): 280 px, 8 px inside; who, the day's generations, then the items */
/* the account menu (owner, refs/owner-96): a centred profile head, your own numbers as tiles, Backups (owner), Sign out */
.me-menu{width:336px;padding:var(--s-2);border-radius:var(--r-5);background:linear-gradient(180deg,rgb(var(--p-mist) / .1),transparent 34%),var(--glass-strong)}
.me-menu::before{content:"";position:absolute;left:28px;right:28px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgb(var(--p-accent-rgb) / .8) 30%,rgba(79,230,255,.65) 70%,transparent);pointer-events:none}
.me-head{display:flex;flex-direction:column;align-items:center;gap:var(--s-1);padding:var(--s-4) var(--s-3) 14px;text-align:center}
.me-av{position:relative;display:grid;place-items:center;width:80px;height:80px;margin-bottom:var(--s-2)}
.me-ring{position:absolute;inset:0;width:80px;height:80px;pointer-events:none}
.me-ring-t{fill:none;stroke:var(--raised);stroke-width:4}
.me-ring-v{fill:none;stroke:url(#me-rg);stroke-width:4;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(95,190,255,.45))}
.me-ring.calm .me-ring-v{opacity:.55;filter:none}
.me-ring.over .me-ring-v{stroke:var(--amber)}
.av.xl{width:64px;height:64px;font-size:var(--fs-6)}
.me-av .av-edit{border-radius:50%}
.me-name{max-width:100%;font:600 var(--fs-4b)/22px var(--font);letter-spacing:-.01em;color:var(--text)}
.me-role{display:inline-flex;align-items:center;height:24px;margin-top:2px;padding:0 10px;border-radius:var(--pill);background:var(--accent-soft);color:var(--accent);font:500 var(--fs-1)/24px var(--font)}
.me-today{margin-top:6px;color:var(--text-2);font-size:var(--fs-1);line-height:16px;font-variant-numeric:tabular-nums}
.me-stats{padding:var(--s-1) 6px var(--s-2)}
.me-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);margin:0 2px var(--s-2)}
.me-top .seg{margin-top:var(--s-2)}
.me-lbl{color:var(--text-3);font:500 var(--fs-1)/16px var(--font)}
.me-scope{margin-left:var(--s-2);font-weight:400;opacity:.8}
.me-tiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.me-tiles.odd > :last-child{grid-column:1/-1}
.me-tile{display:flex;flex-direction:column;gap:2px;min-width:0;min-height:88px;padding:var(--s-3);border-radius:var(--r-4);border:1px solid var(--line);background:linear-gradient(135deg,var(--sk-hi),transparent 60%),var(--surface);box-shadow:var(--hl-top)}
.me-tile.sk{min-height:88px}
.me-tl{display:flex;align-items:center;gap:6px;color:var(--text-2);font:500 var(--fs-1)/16px var(--font);white-space:nowrap}
.me-tl .i{flex:none;width:var(--icon-sm);height:var(--icon-sm);color:var(--accent)}
.me-tvrow{display:flex;flex-wrap:wrap;align-items:center;gap:2px var(--s-2);margin-top:var(--s-1);min-width:0}   /* UI-SETUP-3: a pill that does not fit beside the number drops under it, never cut */
.me-tv{flex:none}
.me-tv{color:var(--text);font:600 var(--fs-7)/30px var(--font);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.me-tv small{margin-left:2px;color:var(--text-2);font:500 var(--fs-3)/18px var(--font)}
.me-ts{overflow:hidden;color:var(--text-3);font-size:var(--fs-1);line-height:16px;text-overflow:ellipsis;white-space:nowrap}
.me-pill{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 6px;border-radius:var(--pill);background:var(--raised);color:var(--text-2);font:600 var(--fs-0)/18px var(--font)}
.me-pill.warn{background:var(--amber-soft);color:var(--amber)}
.me-err{display:flex;align-items:center;gap:var(--s-2);margin:0;padding:var(--s-3);border-radius:var(--r-4);background:var(--surface);color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.me-err .i{flex:none;width:var(--icon-md);height:var(--icon-md);color:var(--amber)}
.me-err .link{margin-left:auto}
.av-edit{display:grid;flex:none;border-radius:50%;transition:box-shadow var(--dur-2) var(--ease)}
.av-edit:hover{box-shadow:0 0 0 3px var(--hover)}
.menu-note{margin:0;padding:0 var(--s-3) var(--s-2);color:var(--text-3);font-size:var(--fs-1);line-height:16px;font-variant-numeric:tabular-nums}
/* sign-in: one glass plate on the dotted canvas */
body.auth-on .topbar,body.auth-on main,body.auth-on .rail{display:none}
/* sign-in (owner, refs/owner-95): our own art behind (floating cover cards in violet→cyan light, assets/login), the logo top-left,
   one centred glass card with its icon tile, title and one line, fields with leading icons, one full-width primary */
#auth{position:relative;isolation:isolate;min-height:100dvh;display:grid;place-items:center;padding:96px var(--s-4) var(--s-9);background:
  radial-gradient(ellipse 46% 56% at 50% 50%,rgb(var(--p-navy-rgb) / .55),transparent 72%),linear-gradient(180deg,rgb(var(--p-navy-rgb) / .18),rgb(var(--p-navy-rgb) / .55)),
  image-set(url("assets/login/bg-1600.webp") 1x,url("assets/login/bg-2400.webp") 2x) center/cover no-repeat,var(--bg)}
.auth-top{position:absolute;left:40px;top:32px}
.auth-top .brand,.auth-panel .brand{display:flex;align-items:center;gap:10px;color:var(--text);font:600 var(--fs-4b)/1 var(--font);letter-spacing:-.01em;white-space:nowrap}
.brand-mark{display:block;width:28px;height:28px}
.auth-tile{display:grid;place-items:center;width:56px;height:56px;margin:0 auto var(--s-5);border-radius:var(--r-4);color:var(--text);background:linear-gradient(180deg,rgb(var(--p-mist) / .18),var(--line-soft)),var(--raised);border:1px solid var(--line-strong);box-shadow:inset 0 1px 0 rgb(var(--p-white-rgb) / .16),0 12px 30px -12px rgba(125,108,255,.6)}
.auth-tile .i{width:24px;height:24px}
.auth-panel{position:relative;width:min(440px,100%);padding:var(--s-8) var(--s-8) var(--s-7);text-align:center;border:1px solid var(--line-strong);border-radius:var(--r-6);background:linear-gradient(180deg,var(--line),transparent 38%),rgba(14,17,32,.78);-webkit-backdrop-filter:blur(var(--blur)) saturate(160%);backdrop-filter:blur(var(--blur)) saturate(160%);box-shadow:inset 0 1px 0 var(--line-hi),var(--shadow-3);animation:fade var(--dur-3) var(--ease)}
.auth-panel::before{content:"";position:absolute;left:36px;right:36px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgb(var(--p-accent-rgb) / .8) 30%,rgba(79,230,255,.7) 70%,transparent);pointer-events:none}
.auth-panel::after{content:"";position:absolute;left:12%;right:12%;bottom:-28px;z-index:-1;height:60px;border-radius:50%;background:radial-gradient(closest-side,rgba(125,108,255,.45),rgba(63,215,255,.18) 60%,transparent);filter:blur(18px);pointer-events:none}
.auth-panel h1{margin:0;font:300 var(--fs-7)/36px var(--mono);letter-spacing:-.03em;font-variation-settings:"wdth" 100}
@supports (-webkit-background-clip:text) or (background-clip:text){.auth-panel h1{background:linear-gradient(100deg,var(--accent-hover) 0%,var(--text) 45%,var(--sheen-end) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}}
.dlg h2{margin:0;font-size:var(--fs-4);line-height:22px;font-weight:600}
.auth-panel .sub{margin:var(--s-2) 0 28px;color:var(--text-2);font-size:var(--fs-3);line-height:20px}
/* the fields: a leading icon, the input, the eye; one height (48), one radius (14), the accent ring on focus, red when invalid */
.af-form{display:flex;flex-direction:column;gap:var(--s-3);text-align:left}
.af{position:relative;display:flex;align-items:center}
.af-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.af-ic{position:absolute;left:16px;width:18px;height:18px;color:var(--text-3);pointer-events:none;transition:color var(--dur-2) var(--ease)}
.af-in{width:100%;height:48px;padding:0 var(--s-4) 0 44px;border-radius:var(--r-3);border:1px solid var(--line-strong);background:rgb(var(--p-navy-rgb) / .55);color:var(--text);font:400 var(--fs-3)/1 var(--font);outline:none;box-shadow:inset 0 1px 0 rgb(var(--p-white-rgb) / .03);transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease)}
.af.has-eye .af-in{padding-right:var(--s-9)}
.af-in::placeholder{color:var(--text-3)}
.af-in:hover{border-color:var(--line-hover)}
.af-in:focus-visible{border-color:var(--accent);background:var(--on-image-2);box-shadow:var(--ring-field)}
.af:focus-within .af-ic{color:var(--accent)}
.af-in[aria-invalid=true]{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.af-in[aria-invalid=true] ~ .af-ic,.af:has(.af-in[aria-invalid=true]) .af-ic{color:var(--red)}
.af-eye{position:absolute;right:8px;display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-2);color:var(--text-3);transition:color var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease)}
.af-eye:hover{color:var(--text);background:var(--hover)}
.af-eye:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.af-eye .i{width:var(--icon-lg);height:var(--icon-lg)}
.af-row{display:flex;justify-content:flex-end;margin:-4px 0 0}
.af-forgot{padding:var(--s-1) 2px;text-decoration:none;color:var(--text-2)}
.af-forgot:hover,.af-forgot[aria-expanded=true]{color:var(--accent);text-decoration:underline}
.alert.af-help{margin:-4px 0 0}   /* DS-5: the forgot-password line is the shared .alert (info); only its place under the link row is its own */
.af-hint{margin:-6px 0 0 var(--s-1);color:var(--text-3);font-size:var(--fs-2);line-height:18px}
.af-err{display:flex;align-items:flex-start;gap:var(--s-2);margin:0;color:var(--red);font-size:var(--fs-2);line-height:18px}
.af-err:empty{display:none}
.af-err .i{flex:none;width:var(--icon-md);height:var(--icon-md);margin-top:1px}
.af-go{height:48px;margin-top:6px;font-size:var(--fs-3);box-shadow:inset 0 1px 0 rgb(var(--p-white-rgb) / .5),0 16px 36px -16px rgb(var(--p-accent-rgb) / .8)}
.af-go[aria-busy]{cursor:progress}
/* B-08: the «Session ended» sheet: the returning person in a soft plate, the password, «Not you? Sign out» left of Continue (P5 restyles) */
.si-who{display:flex;align-items:center;gap:var(--s-3);min-width:0;margin:0 0 var(--s-3);padding:var(--s-3);border-radius:var(--r-3);background:var(--accent-soft)}
.si-name{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.si-name b{max-width:100%;font-weight:600}
.si-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3);margin-top:var(--s-1)}
.si-foot .si-out{margin-left:-6px;white-space:nowrap}   /* one line at 320; its text starts where the field does */
.si-foot .si-go{height:40px;margin-top:0;padding:0 var(--s-5)}
.af-spin{width:14px;height:14px;border-radius:50%;border:2px solid rgb(var(--p-ink-rgb) / .25);border-top-color:var(--ink);animation:spin .8s linear infinite}
.field{display:grid;gap:6px;margin:0 0 14px}
.field > span{color:var(--text-2);font-size:var(--fs-2);line-height:18px;font-weight:500}
.field .hint{color:var(--text-3);font-size:var(--fs-1);line-height:16px}
.in{width:100%;height:var(--ctl-m);padding:0 var(--s-3);border-radius:var(--r-2);border:1px solid var(--line-strong);background:var(--bg);font-size:var(--fs-3);outline:none;transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
textarea.in{height:auto;min-height:64px;padding:10px var(--s-3);line-height:20px;resize:vertical}
.in:hover{border-color:var(--line-hover)}
textarea.in{height:auto}
.in:focus-visible{border-color:var(--accent);box-shadow:var(--ring-field);outline:none}
.in[aria-invalid=true]{border-color:var(--red)}
.in:disabled{color:var(--text-3);cursor:not-allowed}
select.in{appearance:none;padding-right:var(--s-7);cursor:pointer}
.form-err{margin:-4px 0 var(--s-3);color:var(--red);font-size:var(--fs-2);line-height:18px}
.form-err:empty{display:none}
.auth-foot{margin:var(--s-4) 0 0;color:var(--text-2);font-size:var(--fs-2);line-height:18px;text-align:center}
.dlg{width:min(var(--dlg-w-md),calc(100vw - 32px));max-height:min(780px,calc(100dvh - 32px));border:1px solid var(--line-strong);border-radius:var(--dlg-r);background:var(--surface);overflow:hidden;box-shadow:inset 0 1px 0 var(--line-hi),var(--shadow-3);
  opacity:1;scale:none;transition:opacity var(--dur-3) var(--ease),scale var(--dur-3) var(--ease),display var(--dur-3) allow-discrete,overlay var(--dur-3) allow-discrete}
.dlg:not([open]){opacity:0;scale:var(--m-dialog);transition-duration:var(--dur-2)}
@starting-style{.dlg[open]{opacity:0;scale:var(--m-dialog)}}
.dlg{grid-template-rows:auto minmax(0,1fr) auto}   /* V4: in the base rule, so the rows hold while the dialog closes (allow-discrete keeps display:grid) */
.dlg[open]{display:grid}
.dlg.sm{width:min(var(--dlg-w-sm),calc(100vw - 32px))}
.dlg.lg{width:min(var(--dlg-w-lg),calc(100vw - 32px))}
.dlg .m-head{min-height:64px;padding:0 14px 0 var(--s-6)}
.dlg-body{overflow:auto;padding:var(--s-5) var(--s-6) var(--s-2)}
.dlg-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--s-2);min-height:72px;padding:0 var(--s-6);border-top:1px solid var(--line)}
.dlg-foot .btn{height:var(--ctl-m);gap:var(--s-2);padding:0 var(--s-5);font-size:var(--fs-3)}
.dlg-foot .btn .i{width:18px;height:18px}
.dlg-foot .sum{color:var(--text-2);font:400 var(--fs-2)/18px var(--font)}
.dlg-foot .sum b{color:var(--text);font:600 var(--fs-2)/18px var(--font);font-variant-numeric:tabular-nums}
.dlg-foot .grow{flex:1;min-width:0}
.dlg-text{margin:0 0 var(--s-4);color:var(--text-2);font-size:var(--fs-3);line-height:20px}
.dlg-text b{color:var(--text);font-weight:600}
/* FX-8c (UI-COVER-18): the conflict dialog says what each button does, in the order of the buttons */
.cf-ways{display:grid;gap:var(--s-3);margin:0 0 var(--s-4);padding:var(--s-3) 0 0;border-top:1px solid var(--line)}   /* plain lines, not boxes: they explain the buttons, they are not choices */
.cf-ways > div{display:grid;gap:2px}
.cf-ways dt{color:var(--text);font:600 var(--fs-2)/18px var(--font)}
.cf-ways dd{margin:0;color:var(--text-2);font:400 var(--fs-2)/18px var(--font)}
.dlg-sec{display:grid;gap:var(--s-2)}
.dlg-sec + .dlg-sec{margin-top:var(--s-5)}
.dlg-sec h4{margin:0;color:var(--text);font:600 var(--fs-2)/18px var(--font)}
.dlg-sec .hint{margin:0;color:var(--text-3);font:400 var(--fs-1)/16px var(--font)}
.opt-rows{display:grid;gap:6px}
.opt-row{display:flex;align-items:center;gap:var(--s-3);min-height:44px;padding:0 var(--s-3);border-radius:var(--r-2);box-shadow:var(--edge);cursor:pointer;transition:background-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.opt-row:hover{background:var(--hover-wash)}
.opt-row:has(input:checked){background:var(--hover-wash);box-shadow:var(--edge-strong)}
.opt-row.two{min-height:56px}
.opt-row .l{flex:1;min-width:0;color:var(--text);font:500 var(--fs-3)/20px var(--font)}
.opt-row .l small{display:block;color:var(--text-3);font:400 var(--fs-1)/16px var(--font)}
.opt-row .m{color:var(--text-3);font:400 var(--fs-1)/16px var(--mono);font-variant-numeric:tabular-nums}
.opt-row[aria-disabled=true]{cursor:not-allowed}
.opt-row[aria-disabled=true]:hover{background:none}
.opt-row[aria-disabled=true] .l{color:var(--text-3)}
.rt-ask{margin:-4px 0 var(--s-4);padding:10px var(--s-3);max-height:180px;overflow:auto;border-radius:var(--r-2);background:var(--raised);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--red) 40%,transparent);
  color:var(--text);font-size:var(--fs-2);line-height:19px;white-space:pre-wrap;overflow-wrap:anywhere}   /* 0047: what a failed job's Claude asked */
.side{inset:0 0 0 auto;margin:0;width:min(480px,100vw);height:100dvh;border-left:1px solid var(--line-strong);border-radius:var(--r-5) 0 0 var(--r-5);background:var(--surface);box-shadow:var(--hl-top),var(--shadow-side);
  opacity:1;translate:none;transition:opacity var(--dur-3) var(--ease),translate var(--dur-4) var(--ease-drawer),display var(--dur-4) allow-discrete,overlay var(--dur-4) allow-discrete}
.side:not([open]){opacity:0;translate:var(--m-slide) 0;transition-duration:var(--dur-3)}
@starting-style{.side[open]{opacity:0;translate:var(--m-slide) 0}}
.side{grid-template-rows:auto minmax(0,1fr) auto}   /* V4: in the base rule, so the rows hold while the dialog closes (allow-discrete keeps display:grid) */
.side[open]{display:grid}
.side .d-head{align-items:center}
.side .d-head .who-head{display:flex;align-items:center;gap:var(--s-3);min-width:0}
.side .d-head .who-head > div{min-width:0}
.side .d-foot .btn{flex:0 1 auto}
.side .d-foot .grow{flex:1}
.sec{margin:0 0 var(--s-5);padding:0 0 var(--s-5);border-bottom:1px solid var(--line)}
.sec:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.sec > h3{display:flex;align-items:center;gap:var(--s-2);margin:0 0 var(--s-3);font-size:var(--fs-3);line-height:20px;font-weight:600}
.sec > h3 .link{margin-left:auto}
/* stat cards (ref-3): a mono number over its label */
.kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2)}
.kv div{padding:var(--s-3) 14px;border-radius:var(--r-3);background:linear-gradient(150deg,rgb(var(--p-mist) / .1),transparent 50%),var(--bg);border:1px solid var(--line);box-shadow:var(--hl-top)}
.kv b{display:block;font:300 var(--fs-6)/28px var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kv span{color:var(--text-2);font-size:var(--fs-1);line-height:16px}
.srow2{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-1) var(--s-3);align-items:center;padding:var(--s-2) 0;border-top:1px solid var(--line);font-size:var(--fs-2);line-height:18px}
.srow2:first-of-type{border-top:0}
.srow2 .muted{font-size:var(--fs-1);line-height:16px}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}
.secret{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-2) var(--s-2) var(--s-3);border-radius:var(--r-2);background:var(--bg);border:1px solid var(--line-strong)}
.secret code{flex:1;min-width:0;overflow-wrap:anywhere;color:var(--text);font:500 var(--fs-2)/20px var(--mono);letter-spacing:.02em;user-select:all}
.creds{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px var(--s-4);margin:0 0 var(--s-3);padding:14px var(--s-4);border-radius:var(--r-2);background:var(--bg);border:1px solid var(--line);font-size:var(--fs-2);line-height:18px}
.creds dt{color:var(--text-2)}
.creds dd{margin:0;overflow-wrap:anywhere}
.creds code{font:500 var(--fs-2)/18px var(--mono);letter-spacing:.02em;user-select:all}
.creds .cred{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2)}
.ok-head{display:flex;align-items:center;gap:var(--s-3);margin:0 0 var(--s-4)}
.ok-head .done-ic{flex:none}
.ok-head b{display:block;font-size:var(--fs-4);line-height:20px;font-weight:600}
.ok-head span{color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.steps{margin:var(--s-2) 0 0;padding-left:var(--s-5);color:var(--text-2);font-size:var(--fs-2);line-height:20px}
.steps li+li{margin-top:var(--s-1)}
.rcards{display:grid;gap:var(--s-2)}
.rcard{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:var(--s-3);align-items:start;padding:10px var(--s-3);border:1px solid var(--line-strong);border-radius:var(--r-3);cursor:pointer;transition:border-color var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease)}
.rcard:hover{border-color:var(--line-hover)}
.rcard:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.rcard:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.rcard input{margin-top:2px}
.rcard b{display:block;font-size:var(--fs-3);line-height:20px;font-weight:600}
.rcard span{display:block;color:var(--text-2);font-size:var(--fs-1);line-height:16px}
.rcard .lim{color:var(--text-2);font:500 var(--fs-1)/20px var(--mono);white-space:nowrap}
.limit-pick{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2)}
.limit-pick .num-in{width:80px}
.limit-pick .seg{margin-top:var(--s-2)}
#view-team .view-head{margin-bottom:var(--s-4)}
#view-team .ptabs{margin:0 0 var(--s-5)}
.thead{display:flex;align-items:flex-end;flex-wrap:wrap;gap:var(--s-3) var(--s-4);margin:0 0 var(--s-4)}
.thead h2{margin:0;font-size:var(--fs-4);line-height:22px;font-weight:600}
.thead .sub{margin:2px 0 0}
.thead > .btn{margin-left:auto}
.thead:has(> .title-row){align-items:center}
.meter{display:grid;gap:10px;margin:0 0 var(--s-5);padding:14px var(--s-4);border:1px solid var(--line);border-radius:var(--r-4);background:var(--surface);box-shadow:var(--hl-top)}
.meter-top{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s-1) var(--s-3);font-size:var(--fs-2);line-height:18px;font-variant-numeric:tabular-nums}
.meter-top b{font:500 var(--fs-3)/18px var(--mono)}
.meter-top .mlim{margin-left:auto;color:var(--text-3)}
.meter-top .mlim+.link{margin-left:0}
.meter-sub{display:flex;flex-wrap:wrap;gap:2px var(--s-4);color:var(--text-2);font-size:var(--fs-2);line-height:18px;font-variant-numeric:tabular-nums}   /* C: the team meter's second row (replaces team.js inline style) */
.trow.staff-cols{grid-template-columns:minmax(0,2.3fr) minmax(0,1.1fr) minmax(0,1.7fr)}   /* C4: the read-only Staff rows and their head */
.meter-top .link{margin-left:auto}
.mbar{display:flex;height:8px;border-radius:var(--r-xs);background:var(--hatch),var(--raised);overflow:hidden}
.mbar i{height:100%;background:var(--c)}
.mbar i+i{box-shadow:inset 2px 0 0 var(--surface)}
.mlegend{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-4);color:var(--text-2);font-size:var(--fs-1);line-height:16px;font-variant-numeric:tabular-nums}
.mlegend span{display:inline-flex;align-items:center;gap:6px}
.mlegend i{width:8px;height:8px;border-radius:var(--r-hair);background:var(--c)}
/* the quiet table (ref-3): small-caps mono header, hairlines between rows, badges in cells */
.tlist{margin:0;padding:0;list-style:none;border:1px solid var(--line);border-radius:var(--r-4);background:var(--surface);box-shadow:var(--hl-top);overflow:hidden}
.trow{display:grid;align-items:center;gap:var(--s-4);min-height:60px;padding:10px var(--s-3) 10px var(--s-4);border-top:1px solid var(--line);font-size:var(--fs-2);line-height:18px;transition:background-color var(--dur-2) var(--ease)}
.trow:not(.head):hover{background:var(--line-faint)}
.trow:first-child{border-top:0}
.trow.head{min-height:36px;padding-top:var(--s-2);padding-bottom:var(--s-2);color:var(--text-3);font:500 var(--fs-1)/16px var(--font);letter-spacing:.02em;text-transform:uppercase}
.trow > *{min-width:0}
.ulist .trow{grid-template-columns:minmax(0,2.3fr) minmax(0,1.1fr) minmax(0,1.7fr) minmax(0,1.1fr) 104px}
.rlist .trow{grid-template-columns:minmax(0,2.2fr) minmax(0,2fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,.9fr) 104px}
.wlist .trow{grid-template-columns:minmax(0,1.8fr) minmax(0,1fr) minmax(0,1.7fr) minmax(0,1.25fr) minmax(0,1.05fr) minmax(0,.75fr) minmax(0,.8fr) 40px}
/* a service chip in Users → Claude (SPEC-ai-services §7) */
.svchip{display:inline-flex;align-items:center;gap:6px;max-width:100%;height:24px;padding:0 10px;overflow:hidden;border-radius:var(--pill);background:var(--raised);box-shadow:var(--edge);color:var(--text-2);font:500 var(--fs-1)/24px var(--font);font-variant-numeric:tabular-nums;white-space:nowrap;text-overflow:ellipsis}
.svchip > i{flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}
.svchip[data-tone=ok]{background:var(--green-soft);box-shadow:none;color:var(--text)}
.svchip[data-tone=ok] > i{background:var(--green)}
.svchip[data-tone=warn]{background:var(--amber-soft);box-shadow:none;color:var(--amber)}
.svchip[data-tone=bad]{background:var(--red-soft);box-shadow:none;color:var(--red)}
.svchip[data-tone=run]{color:var(--amber)}
.svchip[data-tone=run] > i{animation:op-q-breathe var(--loop-pulse) var(--ease-in-out) infinite}
.svchip[data-tone=was],.svchip[data-tone=off]{color:var(--text-3)}
.svchip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cell-act{display:flex;justify-content:flex-end;gap:var(--s-1)}
.person{display:flex;align-items:center;gap:var(--s-3);min-width:0}
.person > div{min-width:0}
.person b{display:block;overflow:hidden;font-size:var(--fs-3);line-height:20px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.person .muted{display:block;overflow:hidden;font-size:var(--fs-1);line-height:16px;text-overflow:ellipsis;white-space:nowrap}
.wlist .person .muted{white-space:normal}   /* the Claude column wraps its second line instead of cutting it */
.av.sys{display:grid;place-items:center;background:var(--raised);color:var(--text-2)}
.av.sys .i{width:var(--icon-sm);height:var(--icon-sm)}
.rchip{display:inline-flex;align-items:center;max-width:100%;height:22px;padding:0 var(--s-2);border-radius:var(--pill);background:var(--raised);color:var(--text-2);font-size:var(--fs-1);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rchip.owner{background:var(--primary);color:var(--ink)}
.rchip.you{background:transparent;box-shadow:var(--edge-strong)}
.ustat{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ustat .i{width:var(--icon-sm);height:var(--icon-sm);flex:none}
.ustat .muted{color:var(--text-3)}
.ustat.off{color:var(--text-3)}
.ustat.wait{color:var(--amber)}
.ustat.run{color:var(--green)}
.today{display:grid;gap:6px;font-variant-numeric:tabular-nums}
.tbar{height:4px;border-radius:var(--r-hair);background:var(--hatch),var(--raised);overflow:hidden}
.tbar i{display:block;height:100%;background:var(--accent)}
.tbar i.hi{background:var(--amber)}
.tbar i.full{background:var(--red)}
.rsum{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-3);color:var(--text-2);font-size:var(--fs-1);line-height:18px}
.rsum > span{white-space:nowrap}
.rsum b{color:var(--text);font-weight:600}
.rdesc{display:block;overflow:hidden;color:var(--text-2);font-size:var(--fs-1);line-height:16px;text-overflow:ellipsis;white-space:nowrap}
.t-empty{display:grid;justify-items:center;gap:var(--s-2);padding:var(--s-9) var(--s-6);border:1px dashed var(--line-strong);border-radius:var(--r-5);background:var(--hatch);text-align:center}
.t-empty .jic{margin-bottom:var(--s-1)}
.t-empty h3{margin:0;font-size:var(--fs-4);line-height:20px;font-weight:600}
.t-empty p{max-width:52ch;margin:0;color:var(--text-2);font-size:var(--fs-3);line-height:20px}
.t-empty .btn{margin-top:var(--s-2)}
.rgroup{margin:0 0 var(--s-4)}
.rgroup-head{display:flex;align-items:center;gap:var(--s-2);margin:0 0 var(--s-1);padding:0 var(--s-2);font-size:var(--fs-2);line-height:20px;font-weight:600}
.rgroup-head .link{margin-left:auto}
.right{display:grid;grid-template-columns:16px minmax(0,1fr);gap:var(--s-3);padding:var(--s-2);border-radius:var(--r-2);cursor:pointer;transition:background-color var(--dur-2) var(--ease)}
.right:hover{background:var(--raised)}
.right.ro{cursor:default}
.right.ro:hover{background:transparent}
.right input{margin-top:2px}
.right b{font-size:var(--fs-3);line-height:20px;font-weight:500}
.right span{display:block;color:var(--text-2);font-size:var(--fs-1);line-height:16px}
.right .tag{margin-left:6px;height:18px;padding:0 6px;background:var(--amber-soft);color:var(--amber)}
.jfilters{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin:0 0 var(--s-2)}
.jfilters .chip{height:var(--ctl-s)}
.jfilters .jcount{margin-left:auto}
.jday{margin:var(--s-5) 0 var(--s-1);padding:0 var(--s-3);color:var(--text-3);font:500 var(--fs-1)/16px var(--font);letter-spacing:.02em;text-transform:uppercase}
.jlist{margin:0;padding:0;list-style:none}
.jrow{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:var(--s-3);align-items:start;padding:10px var(--s-3);border-radius:var(--r-3);transition:background-color var(--dur-2) var(--ease)}
.jrow:hover{background:var(--surface)}
.jic{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--raised);color:var(--text-2)}
.jrow.warn .jic{background:var(--amber-soft);color:var(--amber)}
.jtitle{margin:0;font-size:var(--fs-3);line-height:20px;overflow-wrap:anywhere}
.jtitle b{font-weight:600}
.jmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--s-2);margin-top:6px}
.jmeta .fix-by{color:var(--text-2)}
.jside{display:flex;align-items:center;gap:var(--s-1);color:var(--text-3);font:500 var(--fs-1)/20px var(--mono);white-space:nowrap}
.jmore{display:flex;justify-content:center;padding:var(--s-4) 0}
.qconfirm{grid-column:1 / -1;display:grid;gap:10px;margin:var(--s-1) 0 2px;padding:var(--s-3);border-radius:var(--r-3);background:var(--raised);font-size:var(--fs-2);line-height:18px}
.qconfirm p{margin:0}
.qconfirm .row{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.toast.peer{background:rgba(32,38,64,.92)}
.g-usage{margin:var(--s-2) 0 0;color:var(--text-2);font-size:var(--fs-1);line-height:16px;font-variant-numeric:tabular-nums}
.g-usage.out{color:var(--amber)}
/* ---------- components the redesign adds (ds.html shows them; kb.js / ai.js adopt them in phase 2) ---------- */
/* toggle: a native checkbox drawn as a pill (MOTION-2). The thumb travels with the signature ease over --dur-4: most of the way at
   once, then it settles (never a jump); the track and the thumb crossfade their colour over --dur-3; a press stretches the thumb
   toward where it will go (--m-stretch, its near edge stays put) and the release carries it over. Transitions retarget, so a
   second click mid-way turns it round from where it is; a switch the change re-rendered continues from the old one (motion.js).
   Keyboard (Space) and focus ring as native. Reduced motion: no stretch, the move and the colour are instant */
input[type=checkbox].switch{appearance:none;position:relative;flex:none;width:36px;height:20px;margin:0;border-radius:var(--pill);background:var(--raised);box-shadow:var(--edge-strong);cursor:pointer;transition:background-color var(--dur-3) var(--ease),box-shadow var(--dur-3) var(--ease)}
input[type=checkbox].switch::before{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:var(--pill);background:var(--text-2);box-shadow:var(--shadow-0);transition:translate var(--dur-4) var(--ease),scale var(--dur-3) var(--ease),background-color var(--dur-3) var(--ease)}
input[type=checkbox].switch:not(:disabled):hover{box-shadow:var(--edge-hover)}
input[type=checkbox].switch:checked{background:var(--accent);box-shadow:inset 0 0 0 1px transparent}
input[type=checkbox].switch:checked::before{translate:16px 0;background:var(--ink)}
input[type=checkbox].switch:not(:disabled):active::before,.switch-row:active input[type=checkbox].switch:not(:disabled)::before{scale:var(--m-stretch) 1;translate:calc((var(--m-stretch) - 1) * 7px) 0}
input[type=checkbox].switch:not(:disabled):checked:active::before,.switch-row:active input[type=checkbox].switch:not(:disabled):checked::before{translate:calc(16px - (var(--m-stretch) - 1) * 7px) 0}
input[type=checkbox].switch:disabled{opacity:.4;cursor:not-allowed}
.switch-row{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-2);font-weight:500;cursor:pointer}
/* flow-canvas node (ref-2): a card with coloured ports; the active one glows */
.canvas-dots{background:var(--dots) 0 0/22px 22px,var(--bg-deep)}
.node{position:relative;width:260px;padding:var(--s-3) 14px;border-radius:var(--r-3);background:var(--surface);border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--line-hi),var(--shadow-1)}
.node.on{border-color:var(--accent-line);box-shadow:var(--hl-top),0 0 0 1px var(--accent-soft-2),0 0 48px -8px rgb(var(--p-accent-rgb) / .55)}
.node-h{display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-2);font-weight:600}
.node-h .nk{margin-left:auto;color:var(--text-3);font:500 var(--fs-0)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.node-p{margin:var(--s-2) 0 0;color:var(--text-2);font-size:var(--fs-1);line-height:16px}
.port{position:absolute;top:50%;display:block;width:10px;height:10px;border-radius:50%;background:var(--c,var(--accent));box-shadow:var(--ring-gap),0 0 10px var(--c,var(--accent))}
.port-in{left:-5px;translate:0 -50%}
.port-out{right:-5px;translate:0 -50%}
/* knowledge-base article: a reading measure, mono title, quiet callouts */
.doc{max-width:68ch;font-size:var(--fs-4);line-height:24px}
.doc h1{margin:0 0 var(--s-2);font:400 var(--fs-7)/34px var(--mono);letter-spacing:-.02em}
.doc h2{margin:28px 0 var(--s-2);font-size:var(--fs-4b);line-height:24px;font-weight:600}
.doc p{margin:0 0 14px}
.doc .lede{color:var(--text-2)}
.doc code{padding:1px 6px;border-radius:var(--r-1);background:var(--raised);font:500 var(--fs-1)/1 var(--mono)}
.doc .callout{margin:var(--s-4) 0;padding:var(--s-3) 14px;border-radius:var(--r-2);background:var(--accent-soft);border:1px solid var(--accent-soft-2);font-size:var(--fs-3);line-height:20px}
.doc-meta{display:flex;flex-wrap:wrap;gap:var(--s-3);margin:0 0 var(--s-5);color:var(--text-3);font:500 var(--fs-0)/16px var(--mono);letter-spacing:.08em;text-transform:uppercase}
/* AI readiness (AI_CONNECT_SPEC): one honest line per Claude, the dot carries the state */
.status-block{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px var(--s-4);border-radius:var(--r-4);background:var(--surface);border:1px solid var(--line);box-shadow:var(--hl-top)}
.status-block .sdot{width:10px;height:10px;border-radius:50%;background:var(--c,var(--text-3));box-shadow:0 0 12px var(--c,transparent)}
.status-block.ready{--c:var(--green)} .status-block.busy{--c:var(--amber)} .status-block.lost{--c:var(--red)} .status-block.setup{--c:var(--text-3)}
.status-block b{display:block;font-size:var(--fs-3);line-height:20px;font-weight:600}
.status-block span{display:block;color:var(--text-2);font-size:var(--fs-1);line-height:16px}
.status-block .when{font:500 var(--fs-1)/1 var(--mono);color:var(--text-3);white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after,::backdrop{animation:none!important;transition-duration:0s!important}   /* V-MINOR1: nothing waits for a transitionend (grep of *.js and index.html is empty), so no 1 ms storm of transitions */
  /* motion SYSTEM.md §3: their travel and scale are tokens (zero here), so what is left is a 160ms fade */
  :is(#editor,#gen,.dlg,#drawer,#qdrawer,.side,#finder,.menu,#cat-drawer,.cat-dock,.us-drawer,.im-dlg,.ir-k-dlg,.k-drw,.im-pop,.ir-c-mn,.ir-c-dl),dialog::backdrop{transition-duration:var(--dur-2)!important}
  .toast{animation:toast-in var(--dur-2) var(--ease)!important}
  .btn .spin,.af-spin,.bal-rf.busy .i,.split .spin2,.fdlg .ff-end .spin,.tp-spin,.tt .spin,.sf-ind i{animation:q-breathe var(--loop-pulse) ease-in-out infinite!important}   /* a still spinner reads as stuck */
  :is(.skel,.sk:not(.skel .sk)):not(.sk-now){animation:sk-in var(--dur-2) var(--ease) var(--sk-delay) both!important}   /* no sweep, but still no flash: the delay is not motion */
}
@media (prefers-reduced-transparency:reduce){
  .rail,.topbar,.menu,.toolbar,.toast,.auth-panel,#finder{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--surface)}
}
/* 0031 (R2): the cover editor's own edits: Save / Approve, the glow families, the title and provider fields, a tool with a change */
.c-app{display:flex;gap:var(--s-2)}
.c-app .btn{flex:1}
.c-app .btn.busy{cursor:progress;opacity:.7}
#c-c1 .btn{padding:0 var(--s-3)}   /* FIX-ROUTES: C1's two longer labels fit the panel */
.glowpop{width:auto;padding:var(--s-3) 14px 14px}
.pop-h{margin:0 0 10px;color:var(--text-2);font-size:var(--fs-1);line-height:16px;font-weight:500}
.gp-grid{display:grid;grid-template-columns:repeat(4,28px);gap:var(--s-3)}
.gp-grid .sw{width:28px;height:28px}
/* 0034: the palette is editable (an added colour has a delete badge; the add tile opens the form under the grid). Neutral chrome only (BRIEF #14) */
.gp-grid .sw.add{display:grid;place-items:center;background:transparent;box-shadow:var(--edge-strong);color:var(--text-2)}
.gp-grid .sw.add .i{width:var(--icon-md);height:var(--icon-md)}
.gp-grid .sw.add:hover{color:var(--text);box-shadow:var(--edge-hover)}
.sw-wrap{position:relative;display:inline-grid}
.sw-del{position:absolute;top:-5px;right:-5px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1px solid var(--line-strong);background:var(--raised);color:var(--text-2);opacity:0;transition:opacity var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.sw-del .i{width:10px;height:10px}
.sw-wrap:hover .sw-del,.sw-wrap:focus-within .sw-del{opacity:1}
.sw-del:hover{color:var(--text)}
.gp-add{width:148px;margin-top:14px;padding-top:var(--s-3);border-top:1px solid var(--line)}
.gp-row{display:flex;align-items:center;gap:var(--s-2)}
.gp-well{flex:none;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.gp-well::-webkit-color-swatch-wrapper{padding:0}
.gp-well::-webkit-color-swatch{border:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgb(var(--p-white-rgb) / .22)}
.gp-well::-moz-color-swatch{border:0;border-radius:50%}
.gp-row .in.sm{min-width:0;height:var(--ctl-s);padding:0 10px;font-size:var(--fs-2)}
.gp-err{margin:var(--s-2) 0 0;color:var(--red);font-size:var(--fs-1);line-height:16px}
.gp-acts{display:flex;justify-content:flex-end;gap:6px;margin-top:10px}
.textpop{width:320px;padding:14px}
.textpop .field{margin:0 0 var(--s-3)}
.textpop .field:last-of-type{margin:0}
.textpop textarea.in{min-height:0;resize:none}
.tp-note{margin:10px 0 0;color:var(--amber);font-size:var(--fs-1);line-height:16px}
.tool.set{position:relative;color:var(--text)}
.tool.set::after{content:"";position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent)}
.frame.new.rendering img,.frame.new.rendering .mover canvas{opacity:.82;transition:opacity var(--dur-3) var(--ease)}
/* Atom colours (owner 2026-10-06, scratch/color-grade/UI.md): the tool, the dock in the stage's right gutter, the bipolar sliders,
   the history record's value chips */
/* the tool: open = Move's pressed look; an applied grade = a hollow ring where .tool.set has its dot, no glow (#14) */
#t-grade[aria-expanded=true]{background:var(--primary);color:var(--ink)}
.tool.graded{position:relative;color:var(--text)}
.tool.graded::after{content:"";position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%;border:1.5px solid var(--accent);box-sizing:border-box}
#t-grade[aria-expanded=true].graded::after{border-color:var(--ink)}

/* the dock: Atom versions' glass column, mirrored into the right gutter (atomhist.css .ah) */
.gr{position:absolute;right:16px;top:50%;z-index:3;display:none;flex-direction:column;width:200px;max-height:calc(100% - 128px);padding:6px;   /* 64 a side: the toolbar takes 62 (review D-L3) */
  border-radius:var(--r-4);background:var(--glass-strong);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(160%);backdrop-filter:blur(var(--blur)) saturate(160%);border:1px solid var(--line-strong);
  box-shadow:inset 0 1px 0 var(--line-hi),var(--shadow-2);
  opacity:0;translate:var(--m-rise) -50%;transition:opacity var(--dur-2) var(--ease),translate var(--dur-2) var(--ease),display var(--dur-2) allow-discrete}
.gr.open{display:flex;opacity:1;translate:0 -50%;transition-duration:var(--dur-3)}
@starting-style{.gr.open{opacity:0;translate:var(--m-rise) -50%}}
.gr-h{position:relative;flex:none;display:flex;align-items:center;gap:var(--s-2);height:40px;padding:0 var(--s-8) 0 var(--s-2)}
.gr-h h3{margin:0;color:var(--text-2);font:600 var(--fs-1)/16px var(--font)}
.gr-dot{width:6px;height:6px;margin-left:auto;border-radius:50%;background:var(--accent);visibility:hidden}
.gr[aria-busy=true] .gr-dot{visibility:visible;transition:visibility 0s var(--sk-delay);animation:q-breathe var(--loop-pulse) ease-in-out infinite}
.gr-x{position:absolute;right:4px;top:10px}
.gr-list{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--s-2);padding:0 var(--s-2) 10px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.gr-row{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(32px,auto);grid-template-rows:28px 20px;grid-template-areas:"l r v" "s s s";align-items:center;flex:none}
.gr-row label{grid-area:l;min-width:0;color:var(--text);font:500 var(--fs-2)/18px var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:default}
.gr-v{grid-area:v;color:var(--text);font:500 var(--fs-2)/18px var(--font);font-variant-numeric:tabular-nums;text-align:right}
.gr-v.z{color:var(--text-3)}
.gr-rs{grid-area:r;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:var(--text-2);visibility:hidden;opacity:0;
  transition:opacity var(--dur-2) var(--ease),visibility var(--dur-2),background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),transform var(--dur-1) var(--ease)}
.gr-rs .i{width:var(--icon-sm);height:var(--icon-sm)}
.gr-row.set .gr-rs{visibility:visible;opacity:1}
.gr-rs:hover{background:var(--hover);color:var(--text)}
.gr-rs:active{transform:scale(var(--m-press))}   /* DS-7: one press depth */
.gr-rs:disabled{opacity:.4;cursor:not-allowed;background:none}
/* the slider: .op-range's track and thumb; the fill runs from the centre tick to the thumb (--a, --b set per value) */
.gr-sl{grid-area:s;position:relative;height:20px;--a:50%;--b:50%;--track:rgb(var(--p-mist) / .16)}   /* --raised vanishes on the glass: a tinted track */
.gr-sl::before{content:"";position:absolute;left:0;right:0;top:8px;height:4px;border-radius:var(--r-hair);pointer-events:none;
  background:linear-gradient(90deg,var(--track) var(--a),var(--accent) var(--a) var(--b),var(--track) var(--b))}
.gr-sl[data-k=temperature]::before{background:linear-gradient(90deg,#5876b0,var(--track) 50%,#b8884c)}
.gr-sl[data-k=tint]::before{background:linear-gradient(90deg,#4f906a,var(--track) 50%,#a9649a)}
.gr-sl::after{content:"";position:absolute;left:calc(50% - 1px);top:5px;width:2px;height:10px;border-radius:var(--r-hair);background:var(--text-2);pointer-events:none}
.gr-sl input{position:relative;z-index:1;display:block;width:100%;height:20px;margin:0;padding:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;touch-action:none}
.gr-sl input::-webkit-slider-runnable-track{height:20px;background:transparent}
.gr-sl input::-moz-range-track{height:20px;background:transparent}
.gr-sl input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--primary);
  box-shadow:0 0 0 4px rgb(var(--p-accent-rgb) / .16),var(--shadow-1);transition:box-shadow var(--dur-1) var(--ease)}
.gr-sl input::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:var(--primary);box-shadow:0 0 0 4px rgb(var(--p-accent-rgb) / .16),var(--shadow-1)}
.gr-sl input:active::-webkit-slider-thumb,.gr-row.drag input::-webkit-slider-thumb{box-shadow:0 0 0 6px var(--accent-soft-2),var(--shadow-1)}
.gr-sl input:focus-visible{outline:none}
.gr-sl input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--accent),var(--shadow-1)}
.gr-sl input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--accent),var(--shadow-1)}
.gr-sl:has(input:disabled){opacity:.5}
.gr-sl input:disabled{cursor:not-allowed}
.gr-foot{flex:none;display:flex;flex-direction:column;gap:6px;padding:6px 0 0;border-top:1px solid var(--line)}
.gr-foot .btn{width:100%}
.gr-foot .btn.primary.busy{cursor:progress;opacity:.7}
.gr-foot .btn.primary .spin{border-color:rgb(var(--p-ink-rgb) / .25);border-top-color:var(--ink)}
.gr-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  .gr{transition-duration:var(--dur-2)!important}
  .gr[aria-busy=true] .gr-dot{animation:none!important;opacity:.55}
}
@media (prefers-reduced-transparency:reduce){.gr{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--surface)}}
/* the applied grade in the history: who, when, then one chip per changed slider */
.fix-top time{color:var(--text-3);font-size:var(--fs-1);line-height:16px;font-variant-numeric:tabular-nums}
.gr-vals{display:flex;flex-wrap:wrap;gap:var(--s-1);margin:var(--s-2) 0 0;padding:0;list-style:none}
.gr-vals .tag b{margin-left:var(--s-1);color:var(--text);font-weight:500;font-variant-numeric:tabular-nums}
/* the live drawing on the mover's canvas without the object's box and guides; the frame never dims while the exact render runs (a
   dimmed picture changes the very exposure being judged); a version preview hides the dock with the toolbar */
.mover.grading .obj,.mover.grading .guide{display:none}
#editor.gr-on .frame.new.rendering img,#editor.gr-on .frame.new.rendering .mover canvas{opacity:1}
#editor.ah-previewing .gr{visibility:hidden}
/* desktop only (owner, 2026-09-23): below 1200 px the interface gives way to one message */
#narrow{display:none;position:fixed;inset:0;z-index:var(--z-block);isolation:isolate;place-content:center;padding:var(--s-6);background:var(--bg);color:var(--text);text-align:center}
#narrow > div{padding:var(--s-8) var(--s-9);border:1px solid var(--line-strong);border-radius:var(--r-6);background:var(--surface);box-shadow:inset 0 1px 0 var(--line-hi),var(--shadow-3)}
#narrow h1{margin:0 0 var(--s-2);font:400 var(--fs-6)/28px var(--mono);letter-spacing:-.02em}
#narrow p{margin:0;font-size:var(--fs-3);line-height:20px;color:var(--text-2)}
@media (max-width:1199px){#narrow{display:grid;overflow:auto} html,body{overflow:hidden}}   /* FIX-V2: the page behind the gate never scrolls sideways */

/* queue head pills (owner 2026-09-25) */
#q-sub{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:6px}
#q-counts{display:flex;flex-wrap:wrap;gap:6px;margin:0}
#q-counts:empty{display:none}
.state-pill.bad{background:var(--red-soft);color:var(--red);border:0;font:inherit;font-size:var(--fs-2);font-weight:500;cursor:pointer}
.state-pill.bad:hover{background:var(--red-soft-2);color:var(--red-hover)}   /* FIX-V2: a soft red hover (--red-hover is the solid button's fill: 1.2:1), 5.4:1 */
.state-pill.bad .i{width:14px;height:14px}
.q-dot{width:6px;height:6px;border-radius:50%;background:currentColor;animation:q-breathe var(--loop-pulse) ease-in-out infinite}
@keyframes q-breathe{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.q-dot{animation:none}}

/* W24 (0078): team Magnific accounts. The header's pool chip (a dot when an account needs a manager), the AI page's «Magnific
   accounts», the Generate request's «Charged to», the queue's team cards and the account on a job card
   (scratch/team-accounts/DESIGN.md, frames f1 to f4) */
.stat.tm-pool{cursor:pointer}
.stat.tm-pool:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.stat .tm-need{display:inline-flex;align-items:center;gap:6px;margin-left:var(--s-1);padding-left:10px;border-left:1px solid var(--line);color:var(--amber);font-weight:500}
.stat .tm-need i{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 3px var(--amber-soft)}
.tm{margin:0 0 28px;padding:var(--s-4) var(--s-5) 6px;border-radius:var(--r-5);border:1px solid var(--line);background:var(--surface);box-shadow:inset 0 1px 0 var(--line-hi),var(--shadow-1);scroll-margin-top:24px}
.tm-floor{display:inline-flex;margin-left:auto;align-items:center;gap:var(--s-2);color:var(--text-2);font-size:var(--fs-2);white-space:nowrap}
.tm-floor input{width:78px;height:var(--ctl-s);padding:0 10px;border-radius:var(--r-2);border:1px solid var(--line-strong);background:var(--bg-deep);color:var(--text);font:500 var(--fs-2)/1 var(--mono);text-align:right}
.tm-list{margin:0;padding:0;list-style:none}
.tm-row{display:grid;grid-template-columns:minmax(0,1.3fr) 150px minmax(0,1.45fr) 92px 112px 150px;align-items:center;gap:var(--s-5);min-height:78px;padding:var(--s-3) 0;border-bottom:1px solid rgb(var(--p-mist) / .07)}
.tm-row:last-child{border-bottom:0}
.tm-ro .tm-row{grid-template-columns:minmax(0,1.1fr) 190px minmax(0,1.5fr) 92px 112px}
.tm-name{display:flex;align-items:center;gap:var(--s-3);min-width:0}
.tm-name > div{min-width:0}
.tm-name b{display:block;font:600 var(--fs-3)/20px var(--font)}
.tm-mail{display:block;overflow:hidden;color:var(--text-3);font-size:var(--fs-1);line-height:16px;text-overflow:ellipsis;white-space:nowrap}
.tm-row .ai-cp{max-width:none;justify-self:start}
.tm-cr p{display:flex;align-items:baseline;gap:6px;margin:0}
.tm-cr b{font:600 var(--fs-4b)/22px var(--font);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.tm-cr small{color:var(--text-3);font-size:var(--fs-1)}
.tm-cr .bal-rf{align-self:center;margin-left:auto}
.ai-meter.tm-meter{position:relative;margin:6px 0 var(--s-1);overflow:visible}
.tm-meter s,.qbal .qb-bar s{position:absolute;top:-3px;bottom:-3px;width:2px;border-radius:var(--r-hair);background:var(--amber);text-decoration:none}
.tm-sub{display:block;color:var(--text-3);font-size:var(--fs-1);line-height:16px}
.tm-sub.warn{color:var(--amber)}
.tm-sub.bad{color:var(--red)}
.tm-k{display:block;color:var(--text);font:500 var(--fs-3)/20px var(--font);font-variant-numeric:tabular-nums}
.tm-k small{color:var(--text-3);font-size:var(--fs-1);font-weight:400}
.tm-act{display:flex;align-items:center;justify-content:flex-end;gap:var(--s-1)}
.tm-act .tm-sub{text-align:right}
.tm-row.dim .tm-cr{opacity:.55}
.tm-empty{margin:0;padding:var(--s-4) 0 14px;color:var(--text-2);font-size:var(--fs-2)}
.menu.tm-menu{width:240px}
.menu-item .tm-v{margin-left:auto;color:var(--text-3);font-weight:400}
.mpick .tm-m{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:var(--r-1);background:#d646b8;color:var(--white);font:700 var(--fs-0)/1 var(--font)}
.mpick .tm-m.auto{background:var(--raised);color:var(--text-2);box-shadow:var(--edge-strong)}
.mpick .tm-m .i{width:var(--icon-sm);height:var(--icon-sm)}
.mo .tm-why{font-size:var(--fs-1);line-height:16px}
.mo .tm-why.warn{color:var(--amber)}
.mo .tm-why.bad{color:var(--red)}
.mo[aria-disabled=true]{cursor:default}
.mo[aria-disabled=true] .mlabel,.mo[aria-disabled=true] .mcost{color:var(--text-3)}
.mo[aria-disabled=true]:hover{background:transparent}
.mo-top .tm-st{display:inline-flex;align-items:center;gap:var(--s-1);color:var(--text-2);font-size:var(--fs-0);font-weight:500;white-space:nowrap}
.mo-top .tm-st i{width:6px;height:6px;border-radius:50%;background:var(--green)}
/* @lane GDL begin: gen dialog tail */
.modelpop .tm-sep{height:1px;margin:var(--s-1) var(--s-2);background:var(--line)}
.g-cost .tm-acc{color:var(--text)}
.g-cost .tm-warn{display:block;color:var(--amber)}
/* @lane GDL end */
.qcred .tm-qpool,.tm-qpool{display:flex;align-items:baseline;gap:6px;margin:-4px 0 10px;color:var(--text-2);font-size:var(--fs-1);line-height:16px}
.tm-qpool b{color:var(--text);font:500 var(--fs-2)/16px var(--mono);letter-spacing:-.02em}
.qbal.tm .ai-cmark{grid-area:av;width:28px;height:28px;font-size:var(--fs-1)}
.qbal .tm-lbl{font-weight:600}
.qbal.tm .qb-bar{position:relative;overflow:visible}
.qb-live.warn{color:var(--amber)}
.qb-live.bad{color:var(--red)}
.qb-live.run::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber)}
.qwho .svc{width:14px;height:14px;font-size:8px}

/* B1: the editor opens the next cover after a decision (SYNTHESIS B1) */
.m-head:has(.m-nav:not([hidden])){padding-left:var(--s-4)}
.m-nav{display:flex;align-items:center;gap:var(--s-1);flex:none}
.m-pos{min-width:64px;text-align:center;font-size:var(--fs-2);line-height:18px;color:var(--text-2);white-space:nowrap}
.m-pos b{font:500 var(--fs-2)/18px var(--mono);color:var(--text)}
.m-nav .icon-btn[aria-disabled=true],.m-nav .icon-btn[aria-disabled=true]:hover{opacity:.38;background:transparent;color:var(--text-2);cursor:default}
#m-title:focus{outline:none}
.frame.swapping > img{opacity:.6;transition:opacity var(--dur-2) var(--ease)}   /* only the dim eases in; every other opacity change of the picture stays as it was */
.m-imgerr{position:absolute;left:50%;top:16px;translate:-50% 0;z-index:3;margin:0;padding:var(--s-2) var(--s-4);border-radius:var(--r-3);background:var(--glass-strong);border:1px solid var(--line-strong);font-size:var(--fs-2);line-height:18px;color:var(--text)}
.m-imgerr[hidden]{display:none}
.m-body{position:relative}
.m-end{position:absolute;inset:0;z-index:5;display:grid;place-content:center;justify-items:center;gap:var(--s-4);background:var(--surface)}
.m-end[hidden]{display:none}
.m-end.empty{gap:0;min-height:0}
#editor.ended #m-nav,#editor.ended .m-head > .vr{display:none}
#editor.ended .m-titles{visibility:hidden}
#editor.ended :is(.m-brand,.m-seen,.state-pill,#m-keep,#m-approve,#m-more,#m-navvr){display:none}
.toast-th{flex:none;width:28px;height:38px;object-fit:cover;border-radius:var(--r-1);margin:-2px 0 -2px -8px}
@keyframes m-end-in{from{opacity:0}}
.m-end:not([hidden]){animation:m-end-in var(--dur-3) var(--ease)}