/* 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:rgba(173,186,255,.18) transparent}
html,body{margin:0;color:var(--text);font:400 14px/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:rgba(179,192,255,.32)}
.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:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* buttons: pills, press to .97 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 14px;border-radius:var(--pill);border:1px solid var(--line-strong);background:var(--raised);color:var(--text);font:500 13px/1 var(--font);white-space:nowrap;box-shadow:inset 0 1px 0 var(--line-hi);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)}
.btn:hover{background:var(--hover);border-color:var(--line-hover)}
.btn:active{transform:scale(var(--m-press))}
.btn.green{background:var(--green);border-color:transparent;color:var(--on-green);box-shadow:none}
.btn.green:hover{background:var(--green-hover)}
.btn.amber{background:var(--amber);border-color:transparent;color:var(--on-amber);box-shadow:none}
.btn.amber:hover{background:var(--amber-hover)}
.btn.red{background:var(--red);border-color:transparent;color:var(--on-red);box-shadow:none}
.btn.red:hover{background:var(--red-hover)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--text-2);box-shadow:none}
.btn.ghost:hover{background:var(--raised);color:var(--text)}
.btn.primary{background:linear-gradient(180deg,var(--primary),var(--primary-2));border-color:transparent;color:var(--on-primary);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),var(--shadow-1)}
.btn.primary:hover{background:var(--primary-hover)}
.btn.sm{height:28px;padding:0 12px;font-size:12px}
.btn.lg{height:44px;padding:0 20px;font-size:14px;font-weight:600}
.btn.wide{width:100%}
.btn:disabled,.btn[aria-disabled=true]{cursor:not-allowed}
.btn:disabled{opacity:.4;transform:none}
.btn:disabled:hover{background:var(--raised);border-color:var(--line-strong)}
.btn.ghost:disabled:hover{background:transparent;border-color:transparent;color:var(--text-2)}
.btn.amber:disabled,.btn[aria-disabled=true]{opacity:1;background:var(--raised);border-color:var(--line);color:var(--text-3)}
.icon-btn{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;color:var(--text-2);transition:background-color var(--dur-2) var(--ease),color 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(.94)}
.icon-btn .i{width:18px;height:18px}
.icon-btn.sm{width:28px;height:28px}
.icon-btn.sm .i{width:16px;height:16px}
.icon-btn.xs{width:24px;height:24px}
.icon-btn.xs .i{width:14px;height:14px}
/* 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 .9s 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:14px;height:14px;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{background:transparent;color:var(--text-3);cursor:not-allowed}
.link{padding:4px 6px;border-radius:var(--r-1);color:var(--accent);font:500 13px/1 var(--font);text-decoration:underline;text-decoration-color:rgba(179,192,255,.35);text-underline-offset:3px;transition:color var(--dur-2) var(--ease),text-decoration-color var(--dur-2) var(--ease),scale var(--dur-1) var(--ease)}
.link:hover{color:var(--accent-hover);text-decoration-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:30px;padding:0 12px;border-radius:var(--pill);border:1px solid var(--line-strong);background:transparent;color:var(--text-2);font:500 13px/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:hover{color:var(--text);border-color:var(--line-hover)}
.chip:active{transform:scale(var(--m-press))}
:is(.tab,.subtab,.ptab,.seg button,.qchip,button.state-pill):active{scale:var(--m-press)}
.chip[aria-pressed=true]{background:var(--primary);border-color:transparent;color:var(--ink)}
.chip .count{height:18px;min-width:18px;padding:0 5px;border-radius:9px;background:var(--raised);color:var(--text-2);font:600 11px/18px var(--font)}
.chip[aria-pressed=true] .count{background:rgba(11,14,26,.14);color:var(--ink)}

/* 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:12px 0;border-radius:var(--r-6);background:linear-gradient(180deg,rgba(173,186,255,.08),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:12px;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,#0c0f1a);border:1px solid rgba(173,186,255,.22);box-shadow:inset 0 1px 0 var(--line-hi),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:20px;height:20px}
.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 rgba(179,192,255,.35),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 rgba(179,192,255,.35),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 .count{position:absolute;top:-4px;right:-7px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;font:600 11px/18px var(--font);font-variant-numeric:tabular-nums;background:var(--raised);color:var(--text);box-shadow:0 0 0 2px var(--surface)}
.rail .tab[aria-selected=true] .count{background:var(--accent);color:var(--ink)}
.rail .tab-sep{width:24px;height:1px;margin:2px auto;background:var(--line)}   /* Пользователи: a section of another kind */
.rail .rail-bottom{display:flex;flex-direction:column;align-items:center;gap:6px;width:40px;margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
.rail .rail-bottom .icon-btn{width:40px;height:40px}

/* 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:12px;height:76px;max-width:1600px;margin-left:max(96px,calc(50% - 800px));padding:12px 24px 0;background:none}   /* owner: no band, no fill, scrolls with the page; the pills keep their own glass */
.stats{display:flex;gap:8px;min-width:0;overflow:hidden}
.stat{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 12px;border-radius:var(--pill);border:1px solid var(--line);background:linear-gradient(135deg,rgba(173,186,255,.1),transparent 55%),var(--surface);box-shadow:inset 0 1px 0 var(--line-hi);color:var(--text-2);font-size:13px;white-space:nowrap;cursor:default}
.stat .i{width:15px;height:15px;color:var(--text-3)}
.stat b{color:var(--text);font:500 14px/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat .muted{color:var(--text-3)}
.stat.warn{border-color:rgba(242,181,74,.45)}
.stat.warn b{color:var(--amber)}
.stat b.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:36px;border-radius:var(--pill);background:var(--surface);box-shadow:inset 0 1px 0 var(--line-hi)}
.topbar .search .i{top:10px}
/* 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}
.search-trigger{display:inline-flex;align-items:center;gap:8px;width:240px;height:36px;padding:0 14px 0 12px;border-radius:var(--pill);border:1px solid var(--line);background:linear-gradient(135deg,rgba(173,186,255,.06),transparent 50%),var(--surface);box-shadow:inset 0 1px 0 var(--line-hi);color:var(--text-3);font:400 13px/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}
.bar-actions{display:flex;align-items:center;gap:8px}
.qbtn{position:relative;width:36px;height:36px;border-radius:50%;background:var(--surface);border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--line-hi)}
.qbtn .num{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--text-3);color:var(--ink);font:600 11px/18px var(--font);text-align:center;box-shadow:0 0 0 2px var(--bg)}
.qbtn.live .num{background:var(--green);animation:qpulse 1.6s var(--ease) infinite}
.qbtn.stale .num{background:var(--amber)}
.topbar .btn.primary{height:36px;padding:0 16px 0 12px}
.topbar .vr{width:1px;height:24px;margin:0 4px;background:var(--line-strong)}
/* the account: avatar, name, role, chevron; its menu holds the account and the batch's decisions */
.account{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 8px 0 4px;border-radius:var(--pill);text-align:left;transition:background-color var(--dur-2) var(--ease)}
.account:hover{background:var(--raised)}
.account .av{width:36px;height:36px;font-size:12px;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:13px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.account .role{color:var(--text-2);font-size:12px;white-space:nowrap}
.account .chev{width:14px;height:14px;color:var(--text-3)}
.tabs{display:flex;gap:4px;margin-left:8px}
.tab{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 8px 0 12px;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:10px;background:var(--raised);color:var(--text-2);font:600 11px/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}
.search{position:relative;width:240px}
.search .i{position:absolute;left:12px;top:8px;color:var(--text-3);pointer-events:none}
.search input{width:100%;height:32px;padding:0 12px 0 36px;border-radius:var(--pill);border:1px solid var(--line);background:var(--surface);font-size:13px;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:0 0 0 3px var(--accent-soft-2);outline:none}
.search input::-webkit-search-cancel-button{display:none}
input::placeholder,textarea::placeholder{color:var(--text-3)}
#gen-btn{margin:0 6px 0 4px}
.qchip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 10px;border-radius:var(--pill);border:1px solid var(--line-strong);color:var(--text-2);font:500 13px/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),scale var(--dur-1) var(--ease)}
.qchip:hover{background:var(--raised);border-color:var(--line-hover);color:var(--text)}
.qchip .num{display:none}
.qdot{width:8px;height:8px;margin-right:2px;border-radius:50%;background:var(--text-3)}
.qchip.live .qdot{background:var(--green);animation:qpulse 1.6s var(--ease) infinite}
.qchip.stale .qdot{background:var(--amber)}
@keyframes qpulse{0%{box-shadow:0 0 0 0 rgba(95,211,154,.5)}70%,100%{box-shadow:0 0 0 6px rgba(95,211,154,0)}}
/* 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 12px;border-radius:var(--r-2);font-weight:500;font-size:13px;text-align:left;color:var(--text);text-decoration:none;transition:background-color var(--dur-2) var(--ease)}
.menu-item .i{width:16px;height:16px;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)}
.menu-confirm p{margin:8px 12px 12px;font-size:13px;line-height:18px;color:var(--text-2)}
.menu-confirm .row{display:flex;justify-content:flex-end;gap:8px;padding:0 8px 8px}

/* layout */
main{max-width:1600px;margin:0 auto 0 max(96px,calc(50% - 800px));padding:20px 32px 64px}   /* 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{display:flex;width:max-content;gap:2px;margin:-4px 0 20px;padding:3px;border-radius:var(--pill);background:var(--surface);border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--line-hi)}
.subtab{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 8px 0 14px;border-radius:var(--pill);border:0;color:var(--text-2);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:hover{color:var(--text)}
.subtab[aria-selected=true]{background:var(--active);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong),0 1px 2px rgba(3,6,20,.4)}
.subtab .count{background:var(--raised);color:var(--text-2)}
.subtab[aria-selected=true] .count{background:var(--accent);color:var(--ink)}
.pack-head,.view-head{display:flex;align-items:center;gap:24px;margin-bottom:24px;flex-wrap:wrap}
.pack-head h1,.view-head h1{margin:0;font:400 24px/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:8px}
.subrow{display:flex;align-items:center;gap:24px;margin:0 0 20px;flex-wrap:wrap}
.subrow .subtabs{margin:0}
.subrow .progress{margin-left:auto}
h1.h1x{margin:0;font:300 40px/46px 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,#c7d0ff 0%,#eef0fb 45%,#9fb0ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}}
@media (forced-colors:active){.h1x .hl{background:none;color:CanvasText}}
.h1x.sm{font-size:32px;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:12px 16px;min-width:0}
.title-row > h1,.title-row > h2{margin:0;line-height:1}
.title-row > .totals{margin:0}
.view-head:has(> .title-row){align-items:center}
.p-sub{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px}
.p-sub .model{color:var(--text)}
.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:12px;line-height:16px}
.p-sub .sep{color:var(--text-3)}
.sub{margin:4px 0 0;color:var(--text-2);font-size:13px;line-height:18px}
.progress{display:flex;align-items:center;gap:12px;margin-left:auto}
.segs{display:grid;grid-template-columns:repeat(5,28px);gap:4px}
.segs i{height:6px;border-radius:3px;background:var(--hatch),var(--raised);box-shadow:inset 0 0 0 1px var(--line);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 13px/1 var(--font);color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap}

.done-panel{display:flex;align-items:center;gap:16px;padding:16px 16px 16px 20px;margin-bottom:24px;border:1px solid var(--line);border-radius:var(--r-5);background:linear-gradient(135deg,rgba(95,211,154,.08),transparent 40%),var(--surface);box-shadow:inset 0 1px 0 var(--line-hi);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)}
.done-panel.m-won{animation:m-won var(--dur-5) var(--ease-pop) both}   /* motion: the pack just closed, not a reload */
.done-panel.m-won-past{animation:none}
.done-panel.m-won .done-ic{animation:q-pop var(--dur-5) var(--ease-pop) var(--dur-2) both}
.done-panel.m-won .done-ic .i{stroke-dasharray:21;animation:m-draw var(--dur-4) var(--ease) var(--dur-3) both}
@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:15px;line-height:20px;font-weight:600}
.done-text p{margin:2px 0 0;color:var(--text-2);font-size:13px;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:16px}
.card{position:relative;display:flex;flex-direction:column;padding:4px;background:linear-gradient(160deg,rgba(173,186,255,.06),transparent 45%),var(--surface);border:1px solid var(--line);border-radius:var(--r-4);box-shadow:inset 0 1px 0 var(--line-hi);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 rgba(3,6,20,.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 rgba(255,255,255,.06);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:8px;color:var(--text-2);font-size:13px}
.media-err .i{width:20px;height:20px;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:4px;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 8px;border-radius:var(--pill);background:rgba(9,11,20,.84);color:var(--text);box-shadow:0 0 0 1px rgba(255,255,255,.12);font:500 11px/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:rgba(9,11,20,.84);color:var(--text);box-shadow:0 0 0 1px rgba(255,255,255,.12);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:rgba(9,11,20,.84);color:var(--text-2);box-shadow:0 0 0 1px rgba(255,255,255,.12);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)}
.rm-ask{position:absolute;inset:0;z-index:5;display:grid;place-content:center;justify-items:center;padding:16px;background:rgba(9,11,20,.82);backdrop-filter:blur(3px);text-align:center;animation:fade var(--dur-2) var(--ease)}
.rm-ask .rm-q{margin:0 0 6px;font-size:15px;font-weight:600;color:var(--text)}
.rm-ask .rm-t{margin:0 0 14px;max-width:240px;font-size:13px;line-height:18px;color:var(--text-2)}
.rm-ask .row{display:flex;gap:8px}
.cmp[aria-pressed=true]{background:var(--primary);color:var(--ink)}
.cmp[aria-disabled=true],.cmp[aria-disabled=true]:hover{color:var(--text-3);background:rgba(9,11,20,.84);cursor:not-allowed}
.body{display:flex;flex-direction:column;flex:1;padding:12px 10px 10px}
.title{margin:0;font-size:14px;line-height:20px;font-weight:600}
.meta{margin:2px 0 0;color:var(--text-2);font-size:12px;line-height:16px}
.facts{display:flex;align-items:center;gap:12px;margin-top:10px;color:var(--text-3);font-size:12px;line-height:16px}
.tries{color:var(--text-2);cursor:default}
.dots{display:inline-flex;gap:3px;padding:6px 0}
.dots i{width:10px;height:4px;border-radius:2px;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 rgba(255,255,255,.18)}
.foot{margin-top:auto;padding-top:12px}
.actions{display:flex;flex-wrap:nowrap;gap:8px}
.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:13px;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:8px;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:12px;line-height:16px;font-weight:400}
.st-job.over{color:var(--amber)}
.status.build{flex-direction:row;align-items:center;gap:8px}
.status.stuck{flex-direction:row;align-items:center;gap:12px;color:var(--amber)}   /* FIX-PIPE: an approved atom whose cover failed */
.status.stuck .link + .link{margin-left:0}
.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:inset 0 1px 0 var(--line-hi)}
.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:2px;background:var(--line-strong);overflow:hidden;--m-glint:rgba(173,186,255,.5)}
/* 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,.qtrack i.cur::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:255px){.actions .btn .i{display:none}}
@container card (max-width:300px){.status{font-size:12px;gap:6px}.status .link{padding:4px}}
.no-results{margin:32px 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,.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:sk-sweep var(--sk-dur) var(--ease-in-out) infinite;pointer-events:none}
@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:3px;border-radius:var(--pill);background:var(--surface);border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--line-hi)}
.sk-seg > span{display:flex;align-items:center;height:32px;padding:0 14px}
.sk-sub{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:8px}
.sk-t{width:70%;height:16px}
.sk-m{width:45%;height:12px;margin-top:8px}
.sk-b{height:34px;margin-top:24px;border-radius:var(--pill)}
.state-panel{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:560px;margin:48px auto;padding:48px 24px;border:1px solid var(--line);border-radius:var(--r-5);background:var(--surface);box-shadow:inset 0 1px 0 var(--line-hi);text-align:center}
.state-panel .i{width:24px;height:24px;color:var(--red)}
.state-panel h2{margin:8px 0 0;font-size:16px;line-height:22px;font-weight:600}
.state-panel p{max-width:48ch;margin:0 0 8px;color:var(--text-2)}
/* empty states sit in the middle of the free space (owner) on a dotted canvas that fades out; the art is the product itself */
.empty{position:relative;isolation:isolate;display:grid;place-content:center;justify-items:center;min-height:calc(100dvh - 176px);padding:16px 0;text-align:center;color:var(--text)}
/* the dots ride on a masked layer, so the page light still shows through around them */
.empty::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%)}
#a-empty{min-height:calc(100dvh - 344px)}
.empty .art{display:block;width:236px;height:auto;margin:0 auto 4px}
.empty h2,.empty p{max-width:420px}
.empty h2{margin:0 0 6px;font-size:18px;line-height:24px;font-weight:600;letter-spacing:-.01em}
.empty p{margin:0;font-size:14px;line-height:20px;color:var(--text-2)}
.empty .row{display:flex;justify-content:center;gap:8px;margin-top:20px}
.q-empty{min-height:0;margin:48px 0;padding:0;background:none}
.q-empty .art{width:180px}
@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:8px;margin-bottom:16px}
.filters .chip{height:32px}
.filters .sort{margin-left:auto}
.select{position:relative;display:inline-block}
.select select{appearance:none;height:32px;padding:0 34px 0 14px;border-radius:var(--pill);border:1px solid var(--line-strong);background:var(--surface);font-size:13px;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:0 0 0 3px var(--accent-soft-2)}
.select .i{position:absolute;right:12px;top:8px;color:var(--text-3);pointer-events:none}
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:16px}
.tile{position:relative;display:flex;flex-direction:column;min-width:0;padding:4px;background:linear-gradient(160deg,rgba(173,186,255,.06),transparent 45%),var(--surface);border:1px solid var(--line);border-radius:var(--r-4);box-shadow:inset 0 1px 0 var(--line-hi);text-align:left;transition:border-color var(--dur-2) var(--ease),transform var(--dur-3) var(--ease),box-shadow var(--dur-3) var(--ease)}
.tile:hover{border-color:var(--line-strong);transform:translateY(-2px);box-shadow:inset 0 1px 0 var(--line-hi),0 18px 40px -20px rgba(3,6,20,.9),var(--shadow-1)}
.tile-body{display:flex;flex-direction:column;gap:2px;padding:10px 8px 8px}
.tile .title{font-size:13px}
.tile .meta{margin:0;font-size:12px;line-height:16px}
.tile .back{align-self:flex-start;margin-top:8px}   /* 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:rgba(6,8,18,.6);-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[open]{display:grid;grid-template-rows:auto minmax(0,1fr)}
.m-head{position:relative;display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 16px 12px 24px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(173,186,255,.05),transparent),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,rgba(179,192,255,.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 8px;border-radius:var(--pill);background:var(--raised);color:var(--text-2);font:500 11px/1 var(--mono);cursor:default}
.m-titles{display:grid;gap:1px;align-content:center}
.m-titles h2{margin:0;font-size:16px;line-height:22px;font-weight:600}
.m-subline{margin:0;color:var(--text-2);font-size:13px;line-height:18px;cursor:default}
.m-titles p{margin:2px 0 0;color:var(--text-2);font-size:13px;line-height:18px}
.state-pill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:var(--pill);font-size:13px;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 4px}
.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:32px 24px 80px}
.pair{display:flex;align-items:flex-start;gap:24px;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 rgba(255,255,255,.08),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:8px;color:var(--text-2);font:500 12px/16px var(--font);white-space:nowrap}
.areas{position:absolute;inset:0;cursor:crosshair}
.areas.off{cursor:default}
.area{position:absolute;border:2px solid #fff;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.35);pointer-events:auto;transition:background-color var(--dur-2) var(--ease)}
.area.draft{border-style:dashed}
.area.prev{opacity:.6}
.area.hot{background:rgba(255,255,255,.16);opacity:1}
.area-n{position:absolute;left:-2px;top:-2px;translate:-50% -50%;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#fff;color:var(--ink);font:500 11px/20px var(--mono);text-align:center;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 1px 4px rgba(0,0,0,.4)}
/* 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 rgba(255,255,255,.08),var(--shadow-2)}
.mover.before canvas,.mover.before .guide,.mover.before .obj{visibility:hidden}
.guide{position:absolute;pointer-events:none;border:0 dashed rgba(179,192,255,.3);background:rgba(179,192,255,.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:rgba(95,211,154,.6);background:rgba(95,211,154,.1)}
.guide.g-cut.on{background:none}
.obj{position:absolute;cursor:move;outline:1px dashed rgba(255,255,255,.75);box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.obj:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.hd{position:absolute;width:12px;height:12px;border-radius:3px;background:#fff;translate:-50% -50%;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 1px 4px rgba(0,0,0,.4);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:4px;padding:4px;border-radius:var(--pill);background:linear-gradient(180deg,rgba(173,186,255,.08),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 12px/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:18px;height:18px}
.tool:hover{background:var(--hover);color:var(--text)}
.tool:active{transform:scale(.96)}
.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 4px;background:var(--line-strong)}

.panel{display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--line)}
.panel-head{padding:16px 24px 8px}
.panel-head h3{margin:0;font-size:15px;line-height:20px;font-weight:600}
.ptabs{display:flex;width:max-content;gap:2px;margin:12px 16px 8px;padding:3px;border-radius:var(--pill);background:var(--bg);border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--line-hi)}
.ptab{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 10px 0 12px;border-radius:var(--pill);color:var(--text-2);font-size:13px;font-weight:600;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)}
.ptab:hover{color:var(--text)}
.ptab[aria-selected=true]{background:var(--active);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong)}
.ptab .count{background:var(--raised);color:var(--text-2)}
.ptab[aria-selected=true] .count{background:var(--accent);color:var(--ink)}
.msglist{flex:1;margin:0;padding:0 8px 8px;list-style:none;overflow:auto;min-height:0}
.msglist .qa-note{margin:4px 8px 8px}
.msg-empty{padding:16px 16px 8px;color:var(--text-2);font-size:13px;line-height:18px}
.comp-toggle{display:inline-grid;place-items:center;width:28px;height:28px;margin:-4px -6px -4px auto;border-radius:50%;color:var(--text-2);transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.comp-toggle:hover{background:var(--raised);color:var(--text)}
.comp-toggle .i{transition:rotate var(--dur-2) var(--ease)}
.comp-toggle[aria-expanded=true] .i{rotate:180deg}
.comp-code{padding:2px 8px;border-radius:var(--pill);background:var(--raised);color:var(--text-2);font:500 11px/16px var(--mono)}
.qa-call{display:flex;align-items:center;gap:8px;flex:none;width:calc(100% - 32px);margin:0 16px 8px;padding:8px 12px;border-radius:var(--r-2);background:var(--amber-soft);border:1px solid rgba(242,181,74,.3);color:var(--text);font:13px/18px var(--font);text-align:left;cursor:pointer}
.qa-call:hover{border-color:rgba(242,181,74,.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:12px}
.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:8px;flex:none;margin:0 16px 8px;padding:8px 12px;border-radius:var(--r-2);background:var(--raised);border:1px solid var(--line);font:13px/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-h{margin-top:2px;color:var(--text-2);font-size:12px;line-height:16px}
.ptab .count.warn{background:var(--amber);color:var(--on-amber)}
.qapanel{flex:1;min-height:0;overflow:auto;padding:4px 16px 16px;display:flex;flex-direction:column;gap:12px;font-size:13px;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 8px;height:22px;display:inline-flex;align-items:center;border-radius:var(--pill);background:var(--raised);font:600 12px/1 var(--mono);cursor:help}
.qa-row{display:flex;flex-wrap:wrap;gap:6px}
.qa-chk{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border-radius:var(--pill);border:1px solid var(--line);color:var(--text-2);font-size:12px;cursor:help}
.qa-chk .i{width:14px;height:14px}
.qa-chk[data-s=pass] .i{color:var(--green)}
.qa-chk[data-s=flag],.qa-chk[data-s=pad]{border-color:rgba(242,181,74,.45);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:rgba(243,108,114,.5);color:var(--text)}
.qa-chk[data-s=fail] .i{color:var(--red)}
.qa-pad{display:flex;gap:8px;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:8px 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:8px 0 0;color:var(--text-2)}
.qa-note{display:flex;gap:8px;margin:4px 16px 8px;padding:10px 12px;border-radius:var(--r-2);background:var(--amber-soft);font-size:13px;line-height:18px}
.qa-note .i{margin-top:1px;color:var(--amber)}
.qa-note p{margin:0}
.qa-note b{color:var(--amber);font-weight:600}
.qa-note.calm{background:var(--raised)}
.qa-note.calm .i,.qa-note.calm b{color:var(--text-2)}
.fixlist{display:flex;flex-direction:column;flex:1;margin:0;padding:0 8px 8px;list-style:none;overflow:auto;min-height:0}
.fixlist > .fix,.fixlist > .note{flex:none}
.fix{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:12px;padding:12px 8px 12px 16px;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 11px/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:8px;min-height:20px}
.tag{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--pill);background:var(--raised);color:var(--text-2);font-size:12px;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:12px}
.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:12px;font-weight:500}
.res.ok{color:var(--green)} .res.no{color:var(--red)}
/* segmented choices: one pill plate */
.seg{display:inline-flex;gap:2px;margin-top:8px;padding:2px;border:1px solid var(--line-strong);border-radius:var(--pill);background:var(--bg)}
.seg button{height:26px;padding:0 10px;border-radius:var(--pill);color:var(--text-2);font-size:12px;font-weight:500;transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),scale var(--dur-1) var(--ease)}
.seg button:hover{color:var(--text);background:var(--hover)}
.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)}
.note{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;padding:12px 8px 12px 16px;color:var(--text-2);font-size:13px;line-height:18px}
.note .i{margin:1px 2px;color:var(--amber)}
.note p{margin:0}
.note b{color:var(--text);font-weight:600}
.note time{display:block;margin-top:4px;color:var(--text-3);font-size:12px}
.empty-fixes{margin:auto;max-width:34ch;padding:16px;color:var(--text-2);font-size:13px;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:12px;padding:16px;border-top:1px solid var(--line);background:var(--surface)}
.comp-head{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.comp-head .muted{margin-left:auto;font-weight:500;font-size:12px}
.composer.hot .marker.draft{background:var(--accent-soft-2)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips .chip{height:28px;padding:0 10px;font-size:12px}
.swatches{display:flex;flex-wrap:wrap;gap:8px;padding:2px 0}
.sw{position:relative;width:24px;height:24px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);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:rgba(0,0,0,.6)}
.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 12px;resize:vertical;border-radius:var(--r-2);border:1px solid var(--line-strong);background:var(--bg);font-size:14px;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:0 0 0 3px var(--accent-soft-2)}
.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:inset 0 1px 0 var(--line-hi),-16px 0 48px rgba(3,6,20,.5);
  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[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
#qdrawer{position:fixed;z-index:20;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:12px 16px 16px 24px;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[open]{display:grid;grid-template-rows:auto minmax(0,1fr)}
#q-body{display:flex;flex-direction:column}
.q-empty{flex:1;min-height:0;margin:0;padding:24px 0;background:none}
/* credits: one card per connected Claude (owner #3) */
.qcred .d-h,.qgroup .d-h{display:flex;align-items:center;gap:8px;margin:0 0 12px;font:600 15px/20px var(--font);letter-spacing:-.005em}
.qbals{display:grid;gap:8px;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:4px 12px;padding:12px 14px;border-radius:var(--r-3);background:linear-gradient(135deg,rgba(173,186,255,.09),transparent 55%),var(--surface);border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--line-hi);cursor:default}
.qbal .av{grid-area:av;width:28px;height:28px;font-size:11px}
.qb-who{grid-area:who;display:flex;align-items:center;gap:8px;min-width:0;font-size:13px;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:12px;white-space:nowrap}
.svc{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:4px;font:700 9px/1 var(--font);color:#fff}
.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 20px/24px var(--font);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.qb-num span{color:var(--text-2);font-size:12px}
.qb-sub{grid-area:sub;display:flex;justify-content:space-between;gap:8px;color:var(--text-2);font-size:12px;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:4px;border-radius:2px;background:var(--hatch),var(--raised);overflow:hidden}
.qb-bar i{display:block;height:100%;border-radius:2px;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:14px;height:14px}
/* 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[open]{display:grid;grid-template-rows:auto minmax(0,1fr)}
#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:24px 24px 8px}
.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 24px/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 24px 48px}
.f-in{max-width:960px;margin:0 auto}
.f-group{margin-top:20px}
.f-group .d-h{display:flex;align-items:center;gap:8px;margin:0 0 4px;padding:0 12px}
.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:5px;background:var(--surface);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.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:14px;font-weight:500;line-height:20px}
.fmeta{font-size:12px;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:12px;color:var(--text-2);white-space:nowrap;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.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 12px/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 4px 2px;font-size:12px;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:14px;line-height:20px}
.f-hint .btn{margin-top:12px}
mark{background:none;color:var(--accent);font-weight:600}
.d-head{position:relative;display:flex;align-items:flex-start;gap:12px;padding:16px 16px 16px 24px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(173,186,255,.05),transparent),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:16px;line-height:22px;font-weight:600}
.d-body{overflow:auto;padding:24px}
.d-body .media{border-radius:var(--r-3)}
.props{display:grid;grid-template-columns:112px minmax(0,1fr);gap:8px 16px;margin:24px 0;font-size:13px;line-height:20px}
.props dt{color:var(--text-2)}
.props dd{margin:0;display:flex;align-items:center;gap:8px;overflow-wrap:anywhere}
.props .swatch{width:12px;height:12px;flex:none}
.props .fname{flex:1;min-width:0;font:500 12px/18px var(--mono);overflow-wrap:anywhere}
.props .icon-btn{margin:-4px 0}
.d-tech{margin:-8px 0 24px}
.d-tech summary{display:flex;align-items:center;gap:6px;cursor:pointer;list-style:none;color:var(--text-2);font-size:13px;font-weight:500}
.d-tech summary::-webkit-details-marker{display:none}
.d-tech summary .i{width:14px;height:14px;transition:rotate var(--dur-2) var(--ease)}
.d-tech[open] summary .i{rotate:180deg}
.d-tech .props{margin:12px 0 0}
.d-h{margin:0 0 4px;font-size:14px;line-height:20px;font-weight:600}
.d-body .fixlist{padding:0;margin:0 -8px;overflow:visible}
.d-body .fix,.d-body .note{padding-left:8px}
.d-att{margin:12px 0 0;color:var(--text-2);font:500 12px/16px var(--font);text-transform:none}   /* the game's history: one line per attempt */
.d-att:first-of-type{margin-top:4px}
.d-foot{display:flex;flex-wrap:wrap;gap:8px;padding:16px 24px;border-top:1px solid var(--line)}
.d-foot .btn{flex:1 1 40%}

/* toasts and tooltips */
.toasts{position:fixed;left:50%;bottom:24px;translate:-50% 0;z-index:60;display:grid;gap:8px;width:max-content;max-width:calc(100vw - 32px);pointer-events:none}
.toast{display:flex;align-items:center;gap:16px;min-height:44px;padding:6px 6px 6px 16px;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:not(:has(button)){padding-right:16px}
@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:1px;background:linear-gradient(90deg,var(--accent-soft-2),var(--accent));transform-origin:left;pointer-events:none}
.tip{position:fixed;z-index:70;max-width:280px;padding:6px 9px;border-radius:var(--r-2);background:var(--raised);border:1px solid var(--line-strong);color:var(--text);box-shadow:var(--shadow-1);font-size:12px;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:5px;border:1px solid var(--line-strong);background:linear-gradient(180deg,rgba(173,186,255,.12),rgba(173,186,255,.03)),var(--bg);box-shadow:inset 0 1px 0 var(--line-hi);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,#d3dbff 0%,var(--accent) 55%,#98a9ff 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 12px -4px rgba(179,192,255,.65)}
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}}
#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[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.g-body{display:grid;grid-template-columns:minmax(0,1fr) 360px;min-height:0}
.g-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.g-main .ptabs{margin:12px 16px 0}
.g-pane,#fixlist,#msglist,#qapanel{animation:fade var(--dur-2) var(--ease)}
.g-pane{display:flex;flex-direction:column;gap:12px;flex:1;min-height:0;padding:12px 24px 16px}
.g-tools{display:flex;align-items:center;gap:8px}
.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:12px;min-height:28px;color:var(--text-2);font-size:13px}
.g-all{display:inline-flex;align-items:center;gap:8px;margin-left:auto;color:var(--text);font:500 13px/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:12px;line-height:16px}
.clist,.glines{flex:1;min-height:0;margin:0 -8px;padding:0 0 8px;list-style:none;overflow:auto}
.crow label{display:grid;grid-template-columns:18px 60px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px;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 rgba(255,255,255,.06)}
.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:14px;line-height:20px;font-weight:500}
.cprov{color:var(--text-2);font-size:12px;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:12px;padding:12px 8px 4px}
.cempty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:32px 8px;color:var(--text-2);text-align:center}
.cempty p{margin:0}
.sk-row{display:grid;grid-template-columns:16px 60px minmax(0,1fr);align-items:center;gap:12px;padding:8px}
.g-text{display:block;width:100%;min-height:136px;max-height:40vh;padding:10px 12px;resize:vertical;border-radius:var(--r-2);border:1px solid var(--line-strong);background:var(--bg);font-size:14px;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:0 0 0 3px var(--accent-soft-2)}
.gline{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px;border-radius:var(--r-2)}
.gline > .i{width:16px}
.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:12px;line-height:16px}
.gline.off .gl-text{opacity:.5}
.gline .select select{max-width:260px;height:28px;padding-right:28px;font-size:12px}
.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:8px;min-height:176px;padding:24px;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:12px;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 rgba(255,255,255,.06)}
.shot img{display:block;width:100%;height:100%;object-fit:cover}
.shot-x{position:absolute;top:6px;right:6px;background:rgba(9,11,20,.84);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:4px 6px 4px 8px;background:rgba(9,11,20,.86);font-size:12px;font-weight:500}
.shot[data-state=up] .shot-st::after{content:"";flex:1;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--line) 35%,rgba(173,186,255,.5) 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:24px;padding:0 8px}
.g-side{display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--line)}
/* 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:12px;padding:16px 20px 0}
.req-head h3{margin:0;font-size:14px;line-height:20px;font-weight:600}
.req-n{font:400 24px/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:8px;margin-top:10px}
.total{position:relative;display:inline-flex;align-items:baseline;gap:7px;padding:7px 14px 7px 13px;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,rgba(179,192,255,.75) 30%,rgba(255,143,208,.7) 70%,transparent);pointer-events:none}
.total b{font:400 22px/24px var(--mono);letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums}
.total .w{font:500 13px/18px var(--font);color:var(--text)}
.total .q{font:400 12px/18px var(--font);color:var(--text-3)}
.total .q::before{content:"·";margin-right:7px;color:var(--text-3)}
.total.sm{padding:4px 12px 4px 11px;gap:6px}
#g-found.totals{margin:0}
#g-found .total{padding:3px 12px 3px 11px;gap:6px}
#g-found .total b{font-size:17px;line-height:22px}
.total.sm b{font-size:18px;line-height:22px}
.req-sub{margin:0;padding:0 20px;color:var(--text-2);font-size:13px;line-height:18px}
.req-draft{margin:0;padding:4px 20px 0;color:var(--text-3);font-size:12px;line-height:16px}
.sel-empty{margin:auto;max-width:30ch;padding:16px;color:var(--text-2);font-size:13px;line-height:18px;text-align:center}
.sel-empty b{display:block;margin-bottom:4px;color:var(--text);font-size:14px}
.cthumb.ph,.sthumb.ph{background:var(--hatch),var(--raised);color:var(--text-3)}
.cthumb.ph .i,.sthumb.ph .i{width:14px;height:14px}
.crow.on label{background:var(--raised)}
.tag .i{width:12px;height:12px;margin-right:4px}
.g-why-line{margin:-4px 0 0}
.mpick{height:auto;min-height:44px;padding:6px 12px 6px 14px}
.mpick .mtext{display:grid;flex:1;min-width:0;gap:1px;text-align:left}
.mpick .mlabel{font-size:14px;line-height:20px;font-weight:600}
.mpick .mcost{font:400 12px/16px var(--font);color:var(--text-2)}
.mo-ok{display:inline-flex;align-items:center;gap:4px;color:var(--green);font-size:11px;font-weight:500;white-space:nowrap}
.mo-ok .i{width:12px;height:12px}
.mo .mcost{font:400 12px/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 8px 0 0}
.g-cost b{font:400 18px/24px var(--mono);letter-spacing:-.02em;font-weight:400}
.g-cost b:empty{display:none}
.g-cost span{color:var(--text-2);font-size:12px;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 .9s linear infinite}
@keyframes spin{to{rotate:360deg}}
.g-sel-head{display:flex;align-items:center;gap:8px;padding:16px 20px 2px}
.g-sel-head h3{margin:0;font-size:15px;line-height:20px;font-weight:600}
.g-sel-sub{margin:0;padding:0 20px 8px;color:var(--text-2);font-size:12px;line-height:16px}
.sel{display:flex;flex-direction:column;flex:1;min-height:96px;margin:0;padding:0 8px 8px;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:12px;padding:6px 4px 6px 12px;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:13px;line-height:18px;font-weight:500}
.ssub{margin:0;color:var(--text-2);font-size:12px;line-height:16px}
.srow.warn .ssub{color:var(--amber)}
.sel-empty{padding:8px 12px;color:var(--text-2);font-size:13px;line-height:18px}
.sel-sub{padding:12px 12px 4px;color:var(--text-3);font:500 12px/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:16px;padding:16px 20px;border-top:1px solid var(--line)}
.g-label{margin:0 0 8px;font-size:13px;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:14px;height:14px}
.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:8px;padding:0 12px 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:12px;line-height:16px}
.mlabel{font-size:13px;line-height:18px;font-weight:600}
.mcost{color:var(--text-2);font:400 12px/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:4px;overflow:auto}
.modelpop:popover-open{display:grid;gap:2px}
.mo{display:grid;gap:2px;width:100%;padding:10px 12px;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:inset 0 0 0 1px var(--accent)}
.mo-top{display:flex;align-items:baseline;gap:8px}
.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:12px;line-height:16px}
.gseg{display:flex;align-items:center;gap:8px}
.seg.pack,.seg.effort,.seg.qa{margin:0}
.seg.pack button,.seg.effort button,.seg.qa button{min-width:44px;height:28px;font:500 13px/1 var(--font)}
.seg.pack button[aria-pressed=true],.seg.effort button[aria-pressed=true],.seg.qa button[aria-pressed=true]{background:var(--primary);color:var(--ink)}
.num-in{width:88px;height:32px;padding:0 12px;border-radius:var(--r-2);border:1px solid var(--line-strong);background:var(--bg);font:500 13px/1 var(--font);outline:none;transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.num-in[aria-invalid=true]{border-color:var(--red)}
#g-pack-hint,#g-effort-hint,#g-qa-hint{margin-top:8px}
.g-foot{display:flex;align-items:center;gap:8px;padding:12px 16px 12px 24px;border-top:1px solid var(--line)}
.g-cost{flex:1;min-width:0;margin:0 8px 0 0;font-size:13px;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:8px;flex-direction:column;gap:8px}
.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 8px;border-radius:var(--r-1);font-size:13px;cursor:pointer}
.prow:hover{background:var(--hover)}
.prow.zero{color:var(--text-3)}
.pn{color:var(--text-3);font:500 11px/1 var(--mono)}
.pfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px;padding:8px 4px 0;border-top:1px solid var(--line-strong);color:var(--text-2);font-size:12px}
.qgroup:not([hidden])+.qgroup{margin-top:32px}   /* 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:8px;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:12px;min-width:0;padding:12px 14px;border-radius:var(--r-3);border:1px solid var(--line);background:linear-gradient(135deg,rgba(173,186,255,.07),transparent 55%),var(--surface);box-shadow:inset 0 1px 0 var(--line-hi)}
.qcard[data-tone=run]{--tone:rgba(242,181,74,.55);border-color:rgba(242,181,74,.22);box-shadow:inset 0 1px 0 var(--line-hi),0 14px 32px -24px rgba(3,6,20,.9)}
.qcard[data-tone=bad]{--tone:rgba(243,108,114,.6);border-color:rgba(243,108,114,.3)}
.qcard[data-tone=ok]{--tone:rgba(95,211,154,.6)}
.qcard.hl{border-color:var(--accent);box-shadow:inset 0 1px 0 var(--line-hi),0 0 0 1px var(--accent)}
.qhead{display:grid;grid-template-columns:60px minmax(0,1fr) auto;align-items:center;gap:12px;min-width:0}
.qid{display:flex;flex-direction:column;min-width:0}
.qtitle{margin:0;font:600 13px/18px var(--font);color:var(--text)}
.qprov{margin:0;color:var(--text-2);font-size:12px;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 8px;border-radius:var(--pill);background:var(--raised);box-shadow:inset 0 0 0 1px var(--line);color:var(--text-2);font:500 12px/1 var(--font);white-space:nowrap}
.qpill .i{width:13px;height:13px}
.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 1.6s 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:rgba(242,181,74,.3)}
.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:12px;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:rgba(242,181,74,.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:11px;line-height:14px;text-align:center}
.qstepper li::before{content:"";position:absolute;top:7px;right:50%;left:-50%;height:2px;border-radius:1px;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:inset 0 0 0 1px var(--line-strong)}
.qstepper i .i{width:10px;height:10px;stroke-width:3}
.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 rgba(242,181,74,.18),0 0 14px rgba(242,181,74,.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(.5)}}
@keyframes q-fill{from{transform:scaleX(0)}}
/* the reason: an icon, one line, the one action */
.qreason{display:flex;align-items:center;gap:8px;min-width:0;color:var(--text-2)}
.qstepper{min-width:0}
.qreason > .i{flex:none;width:15px;height:15px;color:var(--text-3)}
.qreason .qnote{flex:1;min-width:0;margin:0;font-size:12px;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 8px}
/* the footer: the requester as a chip, Claude, Cancel quiet at the right */
.qfoot{display:flex;align-items:center;gap:8px;min-width:0;min-height:28px;padding-top:10px;border-top:1px solid var(--line)}
.qwho{display:inline-flex;flex:0 1 auto;align-items:center;gap:6px;min-width:0;height:24px;padding:0 10px 0 3px;border-radius:var(--pill);background:var(--raised);color:var(--text-2);font-size:12px;line-height:16px}
.qwho .i{flex:none;width:13px;height:13px;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}
.qhint{color:var(--text-3)}
.qlabel{color:var(--text);font-weight:500}
.qlabel.qfail{color:var(--red)}
.qtrack{display:inline-grid;grid-template-columns:repeat(8,9px);gap:3px;margin-right:8px;vertical-align:middle}
.qtrack i{height:4px;border-radius:2px;background:var(--hatch),var(--raised)}
.qtrack i.done{background:var(--green)}
.qtrack i.cur{position:relative;overflow:hidden;background:var(--amber);--m-glint:#ffd592}
#q-body.stale .qtrack i.cur::after{content:none}   /* nothing moves, so nothing animates */
.qnote{margin:2px 0 0;color:var(--text-2);font-size:12px;line-height:16px}
.qgroup-note{margin:-2px 0 6px;font-size:13px;line-height:18px}
.q-stale{margin:0 0 16px}

/* ---------- 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,#858ca8);color:var(--ink);font:600 11px/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:0 0 0 2px var(--surface),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:44px;height:44px;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:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
.av-pick input:focus-visible + img{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--line-hover)}
.av-pick input:checked:focus-visible + img{box-shadow:0 0 0 2px var(--surface),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:0 0 0 2px var(--surface)}
.avs .av+.av{margin-left:-6px}
.avs .more{margin-left:6px;color:var(--text-2);font:500 11px/1 var(--mono)}
.card.seen{border-color:var(--ring);box-shadow:inset 0 1px 0 var(--line-hi),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 4px;border-radius:var(--pill);background:rgba(9,11,20,.86);box-shadow:0 0 0 1px rgba(255,255,255,.12);color:var(--text);font-size:12px;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-seen{display:inline-flex;align-items:center;gap:8px;flex:none;max-width:320px;height:28px;padding:0 12px 0 4px;border-radius:var(--pill);background:var(--raised);color:var(--text-2);font-size:12px;font-weight:500;white-space:nowrap}
.m-seen > span:last-child{overflow:hidden;text-overflow:ellipsis}
.ed-banner{display:flex;align-items:center;gap:10px;margin:0 16px 8px;padding:8px 8px 8px 12px;border-radius:var(--r-2);background:var(--amber-soft);font-size:13px;line-height:18px;animation:fade var(--dur-2) var(--ease)}
.ed-banner .i{color:var(--amber)}
.ed-banner p{flex:1;min-width:0;margin:0}
.ro-note{display:flex;align-items:flex-start;gap:10px;padding:16px 20px;border-top:1px solid var(--line);color:var(--text-2);font-size:13px;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:12px;line-height:16px}
.note .fix-by{margin-top:4px}
.c-cost{margin:-4px 0 0;color:var(--text-2);font-size:12px;line-height:16px;font-variant-numeric:tabular-nums}
.c-cost.out{color:var(--amber)}
.tab-sep{align-self:center;width:1px;height:20px;margin:0 6px;background:var(--line-strong)}
.sync-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 8px;border-radius:var(--pill);background:var(--amber-soft);color:var(--amber);font-size:12px;font-weight:500;white-space:nowrap;cursor:default;animation:fade var(--dur-2) var(--ease)}
.sync-chip .qdot{background:var(--amber);margin:0}
/* 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:8px;border-radius:24px;background:linear-gradient(180deg,rgba(173,186,255,.09),transparent 34%),var(--glass-strong)}
.me-menu::before{content:"";position:absolute;left:28px;right:28px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(179,192,255,.75) 30%,rgba(79,230,255,.65) 70%,transparent);pointer-events:none}
.me-head{display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 12px 14px;text-align:center}
.me-av{position:relative;display:grid;place-items:center;width:80px;height:80px;margin-bottom:8px}
.me-ring{position:absolute;inset:0;width:80px;height:80px}
.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:22px}
.me-av .av-edit{border-radius:50%}
.me-name{max-width:100%;font:600 17px/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 12px/24px var(--font)}
.me-today{margin-top:6px;color:var(--text-2);font-size:12px;line-height:16px;font-variant-numeric:tabular-nums}
.me-stats{padding:4px 6px 8px}
.me-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 2px 8px}
.me-lbl{color:var(--text-3);font:500 12px/16px var(--font)}
.me-seg{display:flex;gap:2px;padding:2px;border-radius:var(--pill);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.me-seg button{height:24px;padding:0 10px;border-radius:var(--pill);color:var(--text-2);font:500 12px/24px var(--font)}
.me-seg button[aria-checked=true]{background:var(--active);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong)}
.me-seg button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.me-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.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:12px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(135deg,rgba(173,186,255,.08),transparent 60%),var(--surface);box-shadow:inset 0 1px 0 var(--line-hi)}
.me-tile.sk{min-height:88px}
.me-tl{display:flex;align-items:center;gap:6px;color:var(--text-2);font:500 12px/16px var(--font);white-space:nowrap}
.me-tl .i{flex:none;width:14px;height:14px;color:var(--accent)}
.me-tvrow{display:flex;align-items:center;gap:8px;margin-top:4px;min-width:0}
.me-tv{color:var(--text);font:600 26px/30px var(--font);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.me-tv small{margin-left:2px;color:var(--text-2);font:500 14px/18px var(--font)}
.me-ts{overflow:hidden;color:var(--text-3);font-size:12px;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 11px/18px var(--font)}
.me-pill.warn{background:var(--amber-soft);color:var(--amber)}
.me-err{display:flex;align-items:center;gap:8px;margin:0;padding:12px;border-radius:16px;background:var(--surface);color:var(--text-2);font-size:13px;line-height:18px}
.me-err .i{flex:none;width:16px;height:16px;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 12px 8px;color:var(--text-3);font-size:12px;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 16px 48px;background:
  radial-gradient(ellipse 46% 56% at 50% 50%,rgba(9,11,20,.55),transparent 72%),linear-gradient(180deg,rgba(9,11,20,.15),rgba(9,11,20,.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 17px/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 20px;border-radius:16px;color:var(--text);background:linear-gradient(180deg,rgba(173,186,255,.18),rgba(173,186,255,.05)),var(--raised);border:1px solid var(--line-strong);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),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:40px 40px 32px;text-align:center;border:1px solid var(--line-strong);border-radius:28px;background:linear-gradient(180deg,rgba(173,186,255,.10),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,rgba(179,192,255,.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 30px/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,#c7d0ff 0%,#eef0fb 45%,#9fb0ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}}
.dlg h2{margin:0;font-size:16px;line-height:22px;font-weight:600}
.auth-panel .sub{margin:8px 0 28px;color:var(--text-2);font-size:14px;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:12px;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 16px 0 46px;border-radius:14px;border:1px solid var(--line-strong);background:rgba(9,11,20,.55);color:var(--text);font:400 15px/1 var(--font);outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.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:48px}
.af-in::placeholder{color:var(--text-3)}
.af-in:hover{border-color:var(--line-hover)}
.af-in:focus-visible{border-color:var(--accent);background:rgba(9,11,20,.7);box-shadow:0 0 0 3px var(--accent-soft-2)}
.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:10px;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:18px;height:18px}
.af-row{display:flex;justify-content:flex-end;margin:-4px 0 0}
.af-forgot{padding:4px 2px;text-decoration:none;color:var(--text-2)}
.af-forgot:hover,.af-forgot[aria-expanded=true]{color:var(--accent);text-decoration:underline}
.af-help{display:flex;align-items:flex-start;gap:8px;margin:-4px 0 0;padding:10px 12px;border-radius:12px;background:var(--accent-soft);color:var(--text);font-size:13px;line-height:18px}
.af-help[hidden]{display:none}
.af-help .i{flex:none;width:16px;height:16px;margin-top:1px;color:var(--accent)}
.af-hint{margin:-6px 0 0 4px;color:var(--text-3);font-size:13px;line-height:18px}
.af-err{display:flex;align-items:flex-start;gap:8px;margin:0;color:var(--red);font-size:13px;line-height:18px}
.af-err:empty{display:none}
.af-err .i{flex:none;width:16px;height:16px;margin-top:1px}
.af-go{height:48px;margin-top:6px;font-size:15px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 16px 36px -16px rgba(179,192,255,.9)}
.af-go[aria-busy]{cursor:progress}
.af-spin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(11,14,26,.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:13px;line-height:18px;font-weight:500}
.field .hint{color:var(--text-3);font-size:12px;line-height:16px}
.in{width:100%;height:40px;padding:0 12px;border-radius:var(--r-2);border:1px solid var(--line-strong);background:var(--bg);font-size:14px;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 12px;line-height:20px;resize:vertical}
.in:hover{border-color:var(--line-hover)}
.in:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft-2)}
.in[aria-invalid=true]{border-color:var(--red)}
.in:disabled{color:var(--text-3);cursor:not-allowed}
select.in{appearance:none;padding-right:32px;cursor:pointer}
.form-err{margin:-4px 0 12px;color:var(--red);font-size:13px;line-height:18px}
.form-err:empty{display:none}
.auth-foot{margin:18px 0 0;color:var(--text-2);font-size:13px;line-height:18px;text-align:center}
.dlg{width:min(560px,calc(100vw - 32px));max-height:min(780px,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}
.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[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.dlg.sm{width:min(440px,calc(100vw - 32px))}
.dlg .m-head{padding:16px 16px 16px 24px}
.dlg-body{overflow:auto;padding:20px 24px 8px}
.dlg-foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;padding:12px 16px 16px 24px;border-top:1px solid var(--line)}
.dlg-foot .grow{flex:1;min-width:0}
.dlg-text{margin:0 0 16px;color:var(--text-2);font-size:14px;line-height:20px}
.dlg-text b{color:var(--text);font-weight:600}
.rt-ask{margin:-4px 0 16px;padding:10px 12px;max-height:180px;overflow:auto;border-left:2px solid var(--red);border-radius:var(--r-2);background:var(--raised);
  color:var(--text);font-size:13px;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:inset 0 1px 0 var(--line-hi),-16px 0 48px rgba(3,6,20,.5);
  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[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.side .d-head{align-items:center}
.side .d-head .who-head{display:flex;align-items:center;gap:12px;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 20px;padding:0 0 20px;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:8px;margin:0 0 12px;font-size:14px;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:8px}
.kv div{padding:12px 14px;border-radius:var(--r-3);background:linear-gradient(150deg,rgba(173,186,255,.1),transparent 50%),var(--bg);border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--line-hi)}
.kv b{display:block;font:300 24px/28px var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kv span{color:var(--text-2);font-size:12px;line-height:16px}
.srow2{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:8px 0;border-top:1px solid var(--line);font-size:13px;line-height:18px}
.srow2:first-of-type{border-top:0}
.srow2 .muted{font-size:12px;line-height:16px}
.btn-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.secret{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 12px;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 13px/20px var(--mono);letter-spacing:.02em;user-select:all}
.creds{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 16px;margin:0 0 12px;padding:14px 16px;border-radius:var(--r-2);background:var(--bg);border:1px solid var(--line);font-size:13px;line-height:18px}
.creds dt{color:var(--text-2)}
.creds dd{margin:0;overflow-wrap:anywhere}
.creds code{font:500 13px/18px var(--mono);letter-spacing:.02em;user-select:all}
.creds .cred{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ok-head{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.ok-head .done-ic{flex:none}
.ok-head b{display:block;font-size:15px;line-height:20px;font-weight:600}
.ok-head span{color:var(--text-2);font-size:13px;line-height:18px}
.steps{margin:8px 0 0;padding-left:20px;color:var(--text-2);font-size:13px;line-height:20px}
.steps li+li{margin-top:4px}
.rcards{display:grid;gap:8px}
.rcard{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:12px;align-items:start;padding:10px 12px;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:14px;line-height:20px;font-weight:600}
.rcard span{display:block;color:var(--text-2);font-size:12px;line-height:16px}
.rcard .lim{color:var(--text-2);font:500 12px/20px var(--mono);white-space:nowrap}
.limit-pick{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.limit-pick .num-in{width:80px}
#view-team .view-head{margin-bottom:16px}
#view-team .ptabs{margin:0 0 20px}
.thead{display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px 16px;margin:0 0 16px}
.thead h2{margin:0;font-size:16px;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 20px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-4);background:var(--surface);box-shadow:inset 0 1px 0 var(--line-hi)}
.meter-top{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;font-size:13px;line-height:18px;font-variant-numeric:tabular-nums}
.meter-top b{font:500 15px/18px var(--mono)}
.meter-top .mlim{margin-left:auto;color:var(--text-3)}
.meter-top .mlim+.link{margin-left:0}
.meter-top .link{margin-left:auto}
.mbar{display:flex;height:8px;border-radius:4px;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:4px 16px;color:var(--text-2);font-size:12px;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:2px;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:inset 0 1px 0 var(--line-hi);overflow:hidden}
.trow{display:grid;align-items:center;gap:16px;min-height:60px;padding:10px 12px 10px 16px;border-top:1px solid var(--line);font-size:13px;line-height:18px;transition:background-color var(--dur-2) var(--ease)}
.trow:not(.head):hover{background:rgba(173,186,255,.04)}
.trow:first-child{border-top:0}
.trow.head{min-height:36px;padding-top:8px;padding-bottom:8px;color:var(--text-3);font:500 12px/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:inset 0 0 0 1px var(--line);color:var(--text-2);font:500 12px/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 1.6s 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:4px}
.person{display:flex;align-items:center;gap:12px;min-width:0}
.person > div{min-width:0}
.person b{display:block;overflow:hidden;font-size:14px;line-height:20px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.person .muted{display:block;overflow:hidden;font-size:12px;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:14px;height:14px}
.rchip{display:inline-flex;align-items:center;max-width:100%;height:22px;padding:0 8px;border-radius:var(--pill);background:var(--raised);color:var(--text-2);font-size:12px;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:inset 0 0 0 1px var(--line-strong)}
.ustat{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ustat .i{width:14px;height:14px;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:2px;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{color:var(--text-2);font-size:12px;line-height:18px}
.rsum b{color:var(--text);font-weight:600}
.rdesc{display:block;overflow:hidden;color:var(--text-2);font-size:12px;line-height:16px;text-overflow:ellipsis;white-space:nowrap}
.t-empty{display:grid;justify-items:center;gap:8px;padding:48px 24px;border:1px dashed var(--line-strong);border-radius:var(--r-5);background:var(--hatch);text-align:center}
.t-empty .jic{margin-bottom:4px}
.t-empty h3{margin:0;font-size:15px;line-height:20px;font-weight:600}
.t-empty p{max-width:52ch;margin:0;color:var(--text-2);font-size:14px;line-height:20px}
.t-empty .btn{margin-top:8px}
.rgroup{margin:0 0 16px}
.rgroup-head{display:flex;align-items:center;gap:8px;margin:0 0 4px;padding:0 8px;font-size:13px;line-height:20px;font-weight:600}
.rgroup-head .link{margin-left:auto}
.right{display:grid;grid-template-columns:16px minmax(0,1fr);gap:12px;padding:8px;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:14px;line-height:20px;font-weight:500}
.right span{display:block;color:var(--text-2);font-size:12px;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:8px;margin:0 0 8px}
.jfilters .chip{height:32px}
.jfilters .jcount{margin-left:auto}
.jday{margin:20px 0 4px;padding:0 12px;color:var(--text-3);font:500 12px/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:12px;align-items:start;padding:10px 12px;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:14px;line-height:20px;overflow-wrap:anywhere}
.jtitle b{font-weight:600}
.jmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:6px}
.jmeta .fix-by{color:var(--text-2)}
.jside{display:flex;align-items:center;gap:4px;color:var(--text-3);font:500 12px/20px var(--mono);white-space:nowrap}
.jmore{display:flex;justify-content:center;padding:16px 0}
.qconfirm{grid-column:1 / -1;display:grid;gap:10px;margin:4px 0 2px;padding:12px;border-radius:var(--r-3);background:var(--raised);font-size:13px;line-height:18px}
.qconfirm p{margin:0}
.qconfirm .row{display:flex;flex-wrap:wrap;gap:8px}
.toast.peer{background:rgba(32,38,64,.92)}
.g-usage{margin:8px 0 0;color:var(--text-2);font-size:12px;line-height:16px;font-variant-numeric:tabular-nums}
.g-usage.out{color:var(--amber)}
/* ---------- components the redesign adds (styleguide.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:inset 0 0 0 1px var(--line-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:0 1px 2px rgba(3,6,20,.5);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:inset 0 0 0 1px var(--line-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:13px;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:12px 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:rgba(179,192,255,.4);box-shadow:inset 0 1px 0 var(--line-hi),0 0 0 1px rgba(179,192,255,.2),0 0 48px -8px rgba(179,192,255,.5)}
.node-h{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.node-h .nk{margin-left:auto;color:var(--text-3);font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.node-p{margin:8px 0 0;color:var(--text-2);font-size:12px;line-height:16px}
.port{position:absolute;top:50%;display:block;width:10px;height:10px;border-radius:50%;background:var(--c,var(--accent));box-shadow:0 0 0 2px var(--surface),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:15px;line-height:24px}
.doc h1{margin:0 0 8px;font:400 28px/34px var(--mono);letter-spacing:-.02em}
.doc h2{margin:28px 0 8px;font-size:18px;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 12.5px/1 var(--mono)}
.doc .callout{margin:16px 0;padding:12px 14px;border-radius:var(--r-2);background:var(--accent-soft);border:1px solid rgba(179,192,255,.25);font-size:14px;line-height:20px}
.doc-meta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 20px;color:var(--text-3);font:500 11px/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 16px;border-radius:var(--r-4);background:var(--surface);border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--line-hi)}
.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:14px;line-height:20px;font-weight:600}
.status-block span{display:block;color:var(--text-2);font-size:12px;line-height:16px}
.status-block .when{font:500 12px/1 var(--mono);color:var(--text-3);white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after,::backdrop{animation:none!important;transition-duration:1ms!important}
  /* 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),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{animation:q-breathe 1.6s 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:8px}
.c-app .btn{flex:1}
.c-app .btn.busy{cursor:progress;opacity:.7}
#c-c1 .btn{padding:0 12px}   /* FIX-ROUTES: C1's two longer labels fit the panel */
.glowpop{width:auto;padding:12px 14px 14px}
.pop-h{margin:0 0 10px;color:var(--text-2);font-size:12px;line-height:16px;font-weight:500}
.gp-grid{display:grid;grid-template-columns:repeat(4,28px);gap:12px}
.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:inset 0 0 0 1px var(--line-strong);color:var(--text-2)}
.gp-grid .sw.add .i{width:16px;height:16px}
.gp-grid .sw.add:hover{color:var(--text);box-shadow:inset 0 0 0 1px var(--line-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:12px;border-top:1px solid var(--line)}
.gp-row{display:flex;align-items:center;gap:8px}
.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 rgba(255,255,255,.2)}
.gp-well::-moz-color-swatch{border:0;border-radius:50%}
.gp-row .in.sm{min-width:0;height:32px;padding:0 10px;font-size:13px}
.gp-err{margin:8px 0 0;color:var(--red);font-size:12px;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 12px}
.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:12px;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)}
/* 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:1000;isolation:isolate;place-content:center;padding:24px;background:var(--bg);color:var(--text);text-align:center}
#narrow > div{padding:40px 48px;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 8px;font:400 22px/28px var(--mono);letter-spacing:-.02em}
#narrow p{margin:0;font-size:14px;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:13px;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 1.6s ease-in-out infinite}
@keyframes q-breathe{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.q-dot{animation:none}}