/* P1 (Cover Factory rework, 2026-11-02): the shared state view (R1), status icons (R2), the Generate dialog, the queue drawer.
   Ported from the frames' kit (frames/kit/p1.css) onto the app's tokens; frame-only class names are renamed where app css already owns them. */

/* @lane C2 begin: R1 designed state, R2 status icons */
/* ---------- R1 designed state ---------- */
.stv .art,.art-brand .art{display:block;height:auto}
.art .fg{transform-box:fill-box}
.art.pulse .fg{animation:ae-pulse 1.8s ease-in-out infinite}
@keyframes ae-pulse{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.art.pulse .fg{animation:none}}
.stv .art-brand{position:relative;margin:0 auto var(--s-1)}
.stv .art-brand .art{margin:0;width:100%}
.stv .art-brand > .bt{position:absolute;left:50%;top:52%;translate:-50% -50%}
.stv-tight{padding-top:0!important;padding-bottom:0!important}
.stv{display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--text)}
.stv:not(.state) > .art{margin:0 auto var(--s-1)}
.stv:not(.state) h3{margin:0 0 6px;font-size:var(--fs-4b);line-height:24px;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
.stv:not(.state) p{margin:0;max-width:420px;color:var(--text-2);font-size:var(--fs-3);line-height:20px;text-wrap:pretty}
.stv:not(.state) .stv-acts{display:flex;justify-content:center;gap:var(--s-2);margin-top:var(--s-5)}
.stv details{margin-top:var(--s-3);max-width:48ch;color:var(--text-3);font-size:var(--fs-1);line-height:16px}
.stv details summary{cursor:pointer;list-style:none}
.stv details summary::-webkit-details-marker{display:none}
.stv details summary::after{content:" ›"}
.stv details code{display:block;margin-top:6px;padding:var(--s-2) 10px;border-radius:var(--r-2);background:var(--bg);font:400 var(--fs-1)/16px var(--mono);text-align:left;word-break:break-word}
.stv.s236 > .art{width:236px}.stv.s200 > .art{width:200px}.stv.s160 > .art{width:160px}.stv.s120 > .art{width:120px}
.stv.s160:not(.state) h3,.stv.s120:not(.state) h3{font-size:var(--fs-4);line-height:22px}
.stv.s160:not(.state) p{max-width:48ch}
.stv.s120:not(.state) p{max-width:36ch;font-size:var(--fs-2);line-height:18px}
.stv.s120:not(.state) .stv-acts .btn{height:var(--ctl-s);padding:0 var(--s-3);font-size:var(--fs-1)}
/* the host of a self-sizing state: the box the size rule measures */
.stv-host{min-height:0;overflow:auto}
/* brand tile sizes the board lacks: 16 in rows and cards */
.bt.s16{--s:16px;border-radius:var(--r-xs);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--b) 40%,transparent),inset 0 1px 0 var(--hl-2)}
.bt.s16 .cl{width:88%;height:88%}
.bt.lg,.bt.l40{box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--b) 40%,transparent),inset 0 1px 0 var(--hl-2),0 6px 16px -8px color-mix(in oklab,var(--b) 70%,transparent)}

/* ---------- R2 status icons: the word is in the tooltip and the label ---------- */
.si{display:inline-grid;place-items:center;flex:none;width:16px;height:16px;cursor:help}
.si .i{width:var(--icon-md);height:var(--icon-md)}
.si.s20,.si.s20 .i{width:20px;height:20px}
.si.done,.si.ready{color:var(--green)}
.si.run{color:var(--accent)}
.si.queued,.si.off,.si.archived,.si.locked{color:var(--text-3)}
.si.needs{color:var(--amber)}
.si.failed{color:var(--red)}

/* @lane C2 end */
/* @lane GDL begin: generate dialog 1.2 to Charged to */
/* ---- P1 §1.2 Generate dialog: the brand slider (cards 240 x 64, scroll-snap, fades and arrows only where there is more) ---- */
#gen[open]:has(> .gsl:not([hidden])){grid-template-rows:auto auto minmax(0,1fr) auto}
.gsl{position:relative;padding:var(--s-1) 0 var(--s-4);border-bottom:1px solid var(--line)}
.gsl[hidden]{display:none}
.gsl-track{display:flex;gap:var(--s-3);padding:var(--s-1) var(--s-6);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 24px;scrollbar-width:none}
.gsl-track::-webkit-scrollbar{display:none}
.gsl-card{position:relative;flex:0 0 240px;height:64px;box-sizing:border-box;scroll-snap-align:start;display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:var(--s-3);padding:0 var(--s-3);border:1px solid var(--line);border-radius:var(--r-3);background:var(--bg);color:var(--text);text-align:left;cursor:pointer;overflow:hidden}
.gsl-card:hover{border-color:var(--line-hover);background:var(--raised)}
.gsl-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gsl-t{display:grid;gap:2px;min-width:0}
.gsl-t b{font:600 var(--fs-3)/20px var(--font);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gsl-t small{display:flex;align-items:center;gap:var(--s-1);font:400 var(--fs-1)/16px var(--font);color:var(--text-2);white-space:nowrap;overflow:hidden}
.gsl-t small .i{width:var(--icon-xs);height:var(--icon-xs);flex:none}
.gsl-card[aria-checked=true]{background:radial-gradient(70% 90% at 50% 130%,color-mix(in oklab,var(--b) 45%,transparent),transparent 70%),var(--accent-soft-2);box-shadow:inset 0 0 0 2px var(--accent);border-color:transparent}
.gsl-ck{width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center}
.gsl-ck .i{width:var(--icon-sm);height:var(--icon-sm);stroke-width:2.4}
.gsl-card[aria-disabled=true]{opacity:.5;cursor:not-allowed;background:var(--bg);border-color:var(--line)}
.gsl-card[aria-disabled=true]:hover{border-color:var(--line);background:var(--bg)}
.gsl::before,.gsl::after{content:"";position:absolute;top:4px;bottom:16px;width:96px;pointer-events:none;opacity:0;transition:opacity var(--dur-2);z-index:1}
.gsl::after{right:0;background:linear-gradient(90deg,transparent,var(--surface) 70%)}
.gsl::before{left:0;background:linear-gradient(270deg,transparent,var(--surface) 70%)}
.gsl.more-r::after,.gsl.more-l::before{opacity:1}
.gsl-arr{position:absolute;top:20px;width:32px;height:32px;border-radius:50%;border:1px solid var(--line-strong);background:var(--raised);color:var(--text);display:grid;place-items:center;cursor:pointer;z-index:2;box-shadow:var(--shadow-1,0 1px 3px var(--art-shadow-1))}
.gsl-arr[hidden]{display:none}
.gsl-arr.r{right:20px}.gsl-arr.l{left:20px}.gsl-arr.l .i{transform:rotate(180deg)}
.gsl-arr .i{width:var(--icon-md);height:var(--icon-md);transform:rotate(-90deg)}.gsl-arr.l .i{transform:rotate(90deg)}
@media (max-height:760px){.gsl{padding-bottom:10px}}
#gen[open]{grid-template-columns:minmax(0,1fr)}
.gsl{min-width:0}

/* ---- P1 §1.1 / 1.3-1.7 Generate dialog: frame, catalogue rows, request column, order bar, Charged-to menu ---- */
#gen .m-head{min-height:56px;padding:0 var(--s-3) 0 var(--s-6)}
#gen .m-head h2{font:600 var(--fs-4)/22px var(--font)}
.g-body{grid-template-columns:minmax(0,1fr) 380px}
.g-body.merged{grid-template-columns:minmax(0,1fr)}
.g-body.merged .g-side{display:none}
.g-pane{padding:0 var(--s-6);gap:0}
.g-main .ptabs{margin:var(--s-4) var(--s-6) var(--s-4);gap:2px}
.g-main .ptab{height:var(--ctl-item-s);padding:0 var(--s-3);gap:var(--s-2);font-weight:600}
.g-main .ptab .i{width:var(--icon-md);height:var(--icon-md)}
.g-tools{gap:var(--s-2)}
.g-tools .search input,#g-prov{height:var(--ctl-s)}
.g-info{min-height:28px;margin:var(--s-3) 0 var(--s-2);font:400 var(--fs-2)/18px var(--font)}
.g-all{font-weight:500}
.g-pane.err .g-tools,.g-pane.err .g-info{opacity:.4;pointer-events:none}
.clist{margin:0 -8px;padding:0 0 var(--s-2);display:flex;flex-direction:column;gap:var(--s-1)}
.crow label{grid-template-columns:18px 60px minmax(0,1fr) 16px;height:48px;box-sizing:border-box;padding:0 var(--s-3) 0 var(--s-2);gap:var(--s-3)}
.crow .ctitle{font:500 var(--fs-3)/20px var(--font)}
.crow .cprov{font:400 var(--fs-1)/16px var(--font);color:var(--text-2)}
.crow.on label{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-soft-2)}
.crow.off label{pointer-events:auto}
.crow .si{width:16px;height:16px}
.crow .si .i{width:var(--icon-md);height:var(--icon-md)}
.sk-row{display:grid;grid-template-columns:18px 60px minmax(0,1fr);gap:var(--s-3);align-items:center;height:48px;padding:0 var(--s-3) 0 var(--s-2)}
.cstate{list-style:none;flex:1;display:grid;place-items:center;min-height:0;padding:0}
.clist:has(> .cstate){flex:1;min-height:0;overflow:auto}
.g-side{background:linear-gradient(180deg,rgb(var(--p-mist) / .03),transparent 40%)}
.req-head{padding:var(--s-3) var(--s-4) 0 var(--s-5);min-height:44px;align-items:center}
.req-head .total{margin:0 auto 0 var(--s-2);display:inline-flex;align-items:center;height:22px;padding:0 var(--s-2);border-radius:var(--pill);background:var(--raised);font:500 var(--fs-1)/22px var(--mono)}
.req-head .total .w{display:none}
.sel{padding:var(--s-1) var(--s-3) var(--s-4);gap:var(--s-1)}
.sel-sub{padding:0 var(--s-2);height:28px;display:flex;align-items:center;font:600 var(--fs-2)/18px var(--font);letter-spacing:0;text-transform:none;color:var(--text-3)}
.sel > .sel-sub:first-child{height:20px}
.srow{grid-template-columns:48px minmax(0,1fr) 28px;height:44px;box-sizing:border-box;padding:0 var(--s-1) 0 var(--s-2);gap:var(--s-3)}
.srow .sthumb,.srow .cthumb{width:48px;height:36px}
.srow .stitle{font:500 var(--fs-2)/18px var(--font)}
.srow .icon-btn{opacity:0;width:28px;height:var(--ctl-xs);transition:opacity var(--dur-2)}
.srow:hover .icon-btn,.srow:focus-within .icon-btn,.srow .icon-btn:focus-visible{opacity:1}
.srow .sthumb.ph{background:var(--raised);color:var(--text-3)}
.sel > .cstate{flex:1}
.g-opts{padding:0 var(--s-5) var(--s-3);display:grid;gap:var(--s-1)}
.g-opts:empty,.g-opts:not(:has(:not([hidden]))){display:none}
/* the order bar */
.g-foot{height:72px;box-sizing:border-box;padding:0 var(--s-4) 0 var(--s-6);gap:var(--s-2);border-top:1px solid var(--line);background:linear-gradient(180deg,rgb(var(--p-mist) / .03),transparent),var(--surface);display:flex;align-items:center}
.ob-sels{display:flex;align-items:center;gap:var(--s-2);min-width:0}
.ob-sels > div{position:relative}
.ob-pill{display:inline-flex;align-items:center;gap:var(--s-2);height:var(--ctl-m);padding:0 var(--s-4);border:1px solid var(--line-strong);border-radius:var(--pill);background:var(--bg);color:var(--text);font:500 var(--fs-3)/18px var(--font);cursor:pointer;max-width:200px}   /* C6: .sel-t.md.on-surface, footer M 44 */
.ob-pill:hover{border-color:var(--line-hover);background:var(--raised)}
.ob-pill .i{width:18px;height:18px;color:var(--text-3);flex:none}.ob-pill .i.ch{width:16px;height:16px}
.ob-pill[aria-expanded=true],.ob-pill:has(~ :popover-open){border-color:var(--accent);box-shadow:var(--ring-field)}
#g-acct-box.short .ob-pill{border-color:color-mix(in oklab,var(--amber) 55%,transparent)}
.ob-pop{padding:6px;border-radius:var(--r-4)}
.g-cost{display:grid;grid-template-rows:auto auto;gap:0;flex:1;min-width:0;margin:0 var(--s-2) 0 auto;justify-items:end;text-align:right}
.ob-hero{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.ob-hero b{font:400 var(--fs-6)/26px var(--mono);letter-spacing:-.02em;word-spacing:-.25em}
.ob-hero b:empty{display:none}
.ob-hero .ap{font:400 var(--fs-3)/26px var(--font);color:var(--text-2)}
.g-cost .ob-hero .cr{font:400 var(--fs-2)/18px var(--font);color:var(--text-2)}
.g-cost.none .ob-hero b{color:var(--text-3)}
.ob-sub{display:flex;align-items:center;gap:6px;min-width:0;max-width:100%}
.ob-sub > span:first-child{font:400 var(--fs-1)/16px var(--font);color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ob-sub > span.warn{color:var(--amber)}
.ob-info{display:inline-grid;place-items:center;color:var(--text-3)}.ob-info[hidden]{display:none}.ob-info .i{width:var(--icon-sm);height:var(--icon-sm)}
#g-start[aria-disabled=true]{background:var(--raised);border-color:var(--line);color:var(--text-3);box-shadow:none}
/* Charged to */
.acctpop{width:340px;padding:6px;border-radius:var(--r-4);background:var(--glass-strong,var(--raised));backdrop-filter:blur(16px);border:1px solid var(--line-strong);box-shadow:var(--shadow-2)}
.ch-head{padding:var(--s-2) 10px 6px;font:600 var(--fs-1)/16px var(--font);color:var(--text-3)}
.ch-row{display:grid;grid-template-columns:16px minmax(0,1fr) auto 16px;align-items:center;gap:10px;width:100%;height:40px;padding:0 10px;border:0;border-radius:var(--r-2);background:none;color:var(--text);font:500 var(--fs-2)/18px var(--font);text-align:left;cursor:pointer}
.ch-row:hover,.ch-row[aria-checked=true]{background:var(--hover)}
.ch-row[aria-disabled=true]{cursor:default;color:var(--text-3)}.ch-row[aria-disabled=true]:hover{background:none}
.ch-row .ch-v{color:var(--text-2);font-variant-numeric:tabular-nums;font-weight:400}.ch-row .ch-v.warn{color:var(--amber)}
.ch-row .ch-ck{color:var(--accent)}.ch-row .i{width:var(--icon-md);height:var(--icon-md)}
.ch-row.link{grid-template-columns:16px minmax(0,1fr) 0 0;height:36px}
.ch-short{margin:0;padding:var(--s-1) 10px;font:400 var(--fs-1)/16px var(--font);color:var(--amber)}
@media (max-width:1180px){.ob-pill{max-width:150px}}

/* @lane GDL end */
/* @lane A-html begin: queue, states, balance */
/* ---- P1 §3 / §4 queue: the disc, the 480 drawer, sticky sections, cards, waiting rows, inline confirm ---- */
.qbtn .num,.qbtn.stale .num{background:var(--green)}
.qbtn .badge{position:absolute;top:-6px;right:-6px;box-shadow:var(--ring-gap-bg)}   /* A14: the count is the one badge, on the disc */
.ql{position:absolute;bottom:-2px;right:-2px;width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:var(--ring-gap-bg)}   /* A15: the queue dot, a class and no inline style */
#p2-seg.seg{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin:var(--s-1) var(--s-4) var(--s-2)}   /* A32: «Who makes the change» is a full-width .seg of the panel */
#p2-seg.seg button{justify-content:center;gap:6px}
#p2-seg.seg [role=radio][aria-disabled=true]{opacity:.45;cursor:default}
.seg[role=radiogroup] button[aria-checked=true],.seg[role=radiogroup] button[aria-checked=true]:hover{background:var(--active);color:var(--text);box-shadow:var(--edge-strong)}   /* DS .seg: current = aria-checked in a radiogroup (CF-DS.md:529) */
#gradepanel .gr-x{position:static;margin-left:auto;flex:none}   /* D: the close sits in the head row, no absolute (2.4b) */
#gradepanel .gr-h{padding-right:var(--s-1)}
#gradepanel .gr-h .gr-dot{margin-left:auto}
#gradepanel .gr-h .gr-dot + .gr-x{margin-left:0}
.qbtn:hover{background:var(--raised);border-color:var(--line-hover)}
body:has(#qdrawer[open]) .qbtn{background:var(--raised);border-color:var(--line-strong);color:var(--text)}
#qdrawer{width:min(480px,100vw);border-radius:var(--r-5) 0 0 var(--r-5);background:var(--surface)}
#qdrawer .d-head{min-height:64px;padding:0 14px 0 var(--s-6);align-items:center}   /* A25: head 64, padding 0 14 0 24, the .x-btn S on the centre line */
#qdrawer .d-head::before{display:none}
#qdrawer .d-head{border-bottom:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}   /* r2 m1: app.css:659 blurs the head; the blur was the band */
#qdrawer .d-head > div{display:flex;align-items:baseline;gap:var(--s-3);min-width:0}
#qdrawer .d-head #q-sub{margin:0;font:400 var(--fs-1)/16px var(--font);color:var(--text-3)}
#qdrawer .ptabs{margin:var(--s-1) var(--s-6) var(--s-3);gap:2px}
#qdrawer .ptab{gap:var(--s-2);font-weight:600}
#qdrawer .ptab .i{width:var(--icon-md);height:var(--icon-md)}
#q-body{padding:0 var(--s-4) var(--s-6);scroll-padding-top:44px}
.qcred{padding:var(--s-2) var(--s-6) var(--s-6)}
#q-body .qbrands{position:sticky;top:0;z-index:3;flex-wrap:nowrap;overflow:hidden;gap:var(--s-2);margin:0 -16px;padding:0 var(--s-6) var(--s-3);background:var(--surface);border-bottom:1px solid var(--line)}
#q-body .qbrands .chip{flex:none;gap:6px}   /* A29: the chip is the DS S 36; pressed, disabled look come from .chip */
#q-body .qbrands .chip[disabled]{opacity:.6;pointer-events:none}
#q-body .qbrands .chip{position:relative}
#q-body .qbrands .chip[hidden]{display:none}
#q-body .qbrands .chip .fd{position:absolute;top:-2px;right:-2px;width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:var(--ring-gap)}
.qgrp{position:relative;margin:0}
.qgrp + .qgrp{margin-top:0}
.qgroup:not([hidden]) + .qgroup.qgrp{margin-top:0}
.qgrp > h3.d-h{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:var(--s-2);height:44px;box-sizing:border-box;margin:0 -16px;padding:var(--s-3) var(--s-6) 0;background:var(--surface);font:600 var(--fs-2)/18px var(--font)}
#q-body:has(.qbrands) .qgrp > h3.d-h{top:49px}   /* the S 36 chips row: 36 + 12 + 1 */
.qgrp > h3.d-h::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px;background:linear-gradient(var(--surface),transparent);pointer-events:none;opacity:0;transition:opacity var(--dur-2)}
.qgrp.stuck > h3.d-h::after{opacity:1}
.qsent{display:block;height:1px;margin-bottom:-1px;pointer-events:none;visibility:hidden}
.qgrp .qlist{margin-top:var(--s-1);gap:var(--s-2)}
.qgrp[data-g=Waiting] .qlist{gap:0}
/* cards: one picture slot of 64, one text column (§4.4-4.7) */
#qdrawer .qcard{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--s-3);padding:var(--s-3);border-radius:var(--r-3);border:1px solid var(--line);background:var(--bg);box-shadow:var(--hl-top)}
#qdrawer .qcard[data-tone=bad],#qdrawer .qcard[data-tone=stall]{border-color:var(--amber-line);background:var(--bg);box-shadow:none}
#qdrawer .qcard > .sthumb,#qdrawer .qcard > .thumb-plate,#qdrawer .qcard > .qsty{grid-column:1;align-self:start;justify-self:center;width:48px;height:64px;border-radius:var(--r-1);overflow:hidden}
#qdrawer .qcard > .sthumb.wide{width:64px;height:48px}
#qdrawer .qcard > .qsty{display:grid;place-items:center;background:var(--raised)}
#qdrawer .qtext{grid-column:2;display:flex;flex-direction:column;gap:var(--s-1);min-width:0}
#qdrawer .qr1{display:flex;align-items:center;gap:var(--s-2);min-width:0;min-height:20px}
#qdrawer .qr1 .i{flex:none;width:var(--icon-md);height:var(--icon-md)}.qr1 .i.red{color:var(--red)}.qr1 .i.amber{color:var(--amber)}
#qdrawer .qcard .qtitle{flex:1;min-width:0;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:600 var(--fs-3)/20px var(--font)}
#qdrawer .qstage{flex:none;font:400 var(--fs-2)/18px var(--font);color:var(--text-2)}
#qdrawer .qnote,#qdrawer .qsub{margin:0;display:flex;align-items:center;gap:6px;min-width:0;font:400 var(--fs-2)/18px var(--font)}
#qdrawer .qnote{color:var(--text);display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#qdrawer .qnote.qrun{display:flex}#qdrawer .qnote.qrun .i{flex:none;width:var(--icon-md);height:var(--icon-md);color:var(--text-2)}
#qdrawer .qsub{color:var(--text-2)}
#qdrawer .qsub .truncate{min-width:0}#qdrawer .qsub .qbname{flex:0 1 auto}
#qdrawer .qsub .bt{flex:none}#qdrawer .qsub .tag{flex:none;height:20px;font:500 var(--fs-2)/20px var(--font)}
#qdrawer .qacts{display:flex;align-items:center;gap:var(--s-2);min-height:36px;margin-top:var(--s-1)}
#qdrawer .qacts .qmenu{margin-left:auto}
#qdrawer .qr1 .qmenu{flex:none;margin:-4px -4px -4px 0;opacity:0;transition:opacity var(--dur-2)}
#qdrawer .qcard:hover .qr1 .qmenu,#qdrawer .qcard:focus-within .qr1 .qmenu,#qdrawer .qr1 .qmenu:focus-visible,#qdrawer .qr1 .qmenu[aria-expanded=true]{opacity:1}
#qdrawer .qcard.qlink{cursor:pointer}
#qdrawer .qcard.qlink:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#qdrawer .qstepper{display:flex;gap:var(--s-1);max-width:200px;width:100%;height:16px;align-items:center;margin:0;padding:0;list-style:none}
#qdrawer .qstepper li{flex:1;height:6px;border-radius:var(--r-xs);background:var(--raised);box-shadow:var(--edge)}
#qdrawer .qstepper li::before,#qdrawer .qstepper li i,#qdrawer .qstepper li span{display:none}
#qdrawer .qstepper li.done{background:var(--accent);box-shadow:none}
#qdrawer .qstepper li.cur{background:linear-gradient(90deg,var(--accent) 50%,var(--raised) 50%)}
#qdrawer .qstepper li.m-lit{transform-origin:left;animation:q-fill var(--dur-4) var(--ease) both}
/* waiting rows */
.qwait{display:grid;grid-template-columns:20px 32px minmax(0,1fr) 16px 24px;align-items:center;gap:var(--s-3);min-height:44px;box-sizing:border-box;padding:0 var(--s-1) 0 var(--s-2);border-radius:var(--r-2);list-style:none}
.qwait:hover{background:var(--raised)}
.qpos{text-align:right;font:400 var(--fs-2)/18px var(--font);color:var(--text-3);font-variant-numeric:tabular-nums}
.qth{display:block;width:24px;height:32px;margin:0 auto;border-radius:var(--r-xs);overflow:hidden;background:var(--raised)}
.qth.wide{width:32px;height:24px}
.qth img{display:block;width:100%;height:100%;object-fit:cover}
.qwait .qtitle{font:500 var(--fs-2)/18px var(--font);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qwait .qbt{display:grid;place-items:center}
.qwait .qbt.qstd{font:500 var(--fs-0)/16px var(--font);color:var(--text-3);white-space:nowrap}
.qx{opacity:0;transition:opacity var(--dur-2)}   /* .x-btn.xs: 24, hit 32; shows on hover as before */
.qwait:hover .qx,.qwait:focus-within .qx,.qx:focus-visible{opacity:1}
.qwait > .qconfirm{grid-column:1 / -1;margin:0 0 var(--s-2)}
.qmore{list-style:none;display:grid;place-items:center;height:36px}
.qmore .btn{font:500 var(--fs-2)/18px var(--font);color:var(--text-2)}
/* inline confirm */
.qconfirm{display:grid;gap:var(--s-3);grid-column:1 / -1;margin-top:var(--s-3);padding:var(--s-3);border-radius:var(--r-3);background:var(--raised);box-shadow:var(--edge-strong);border:0}
.qconfirm p{margin:0;font:400 var(--fs-2)/18px var(--font);color:var(--text)}
.qconfirm p.sub{color:var(--text-2)}
.qconfirm .row{display:flex;justify-content:flex-end;gap:var(--s-2);flex-wrap:wrap}
.qconfirm .btn .i{width:var(--icon-md);height:var(--icon-md)}
/* states */
.qstate{display:grid;place-items:center;padding:var(--s-6) var(--s-2)}
#q-body > .qstate,#q-cred > .qstate{flex:1 1 auto;min-height:0}
#q-cred:not([hidden]){display:flex;flex-direction:column}
/* Balance: Can the queue run */
.qb-verdict{display:grid;grid-template-columns:20px minmax(0,1fr);gap:var(--s-3);padding:var(--s-4);border-radius:var(--r-3)}
.qb-verdict.ok{background:var(--green-soft);box-shadow:inset 0 0 0 1px var(--green-line);color:var(--green)}
.qb-verdict.bad{background:var(--amber-soft);color:var(--amber)}
.qb-verdict .i{width:var(--icon-xl);height:var(--icon-xl)}
.qb-verdict b{display:block;font:600 var(--fs-4)/22px var(--font);color:var(--text)}
.qb-verdict p{margin:0;font:400 var(--fs-2)/18px var(--font);color:var(--text-2)}
.qb-h{margin:var(--s-6) 0 var(--s-1);font:600 var(--fs-2)/18px var(--font);color:var(--text-2)}
.qb-svcs,.qb-need{list-style:none;margin:0;padding:0}
.qb-svcs li{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:var(--s-3);height:56px;border-bottom:1px solid var(--line)}
.qb-m .i{width:var(--icon-md);height:var(--icon-md)}
.qb-m{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-2);background:var(--raised);font:600 var(--fs-2)/1 var(--font);font-style:normal}
.qb-svcs b{font:600 var(--fs-3)/20px var(--font)}
.qb-fig{font:500 var(--fs-3)/20px var(--font);text-align:right}.qb-fig em{font-style:normal;font-weight:400;color:var(--text-2)}
.qb-need li{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:var(--s-3);height:60px;border-bottom:1px solid var(--line)}
.qb-need .i{width:var(--icon-md);height:var(--icon-md);color:var(--amber)}
.qb-w{display:grid;min-width:0}.qb-w b{font:600 var(--fs-2)/18px var(--font)}.qb-w small{font:400 var(--fs-2)/18px var(--font);color:var(--text-2)}
.qb-links{display:flex;gap:var(--s-2);margin-top:var(--s-6)}

#ed-banner{margin:0 var(--s-4) var(--s-2)}   /* A26: the editor banner is the one .alert, inset like the panel body */
/* @lane A-html end */
/* @lane GDL begin: big-order confirm */
/* P1 §1.10 big-order confirm (C-01) */
.gconf{width:480px;max-width:calc(100vw - 32px);padding:0;border-radius:var(--r-5);overflow:hidden}
.gconf::backdrop{background:rgba(5,6,12,.6)}
.gc-head{position:relative;height:184px;border-bottom:1px solid var(--line);overflow:hidden}
.gc-head > picture,.gc-head img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gc-fan{position:absolute;left:50%;top:0;width:0;height:184px}
.gc-fan::before{content:"";position:absolute;left:-170px;top:104px;width:340px;height:160px;background:var(--b);opacity:.75;filter:blur(10px);border-radius:50%}
.gc-card{position:absolute;left:-42px;top:0;width:84px;height:112px;border-radius:var(--r-2);overflow:hidden;box-shadow:0 0 0 1px rgb(var(--p-white-rgb) / .16),0 10px 24px var(--art-shadow-1);background:var(--raised)}
.gc-card img{width:100%;height:100%;object-fit:cover;display:block}
.gc-card em{position:absolute;inset:0;display:grid;place-items:center;background:rgb(var(--p-navy-rgb) / .64);font:500 var(--fs-4b)/24px "Martian Mono",var(--font);font-style:normal;color:var(--white)}
.gc-card .gc-slot{display:grid;place-items:center;width:100%;height:100%;background:var(--hatch),var(--bg);color:var(--text-3)}
.gc-card .gc-slot .i{width:20px;height:20px;opacity:.8}
.gc-x{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgb(var(--p-navy-rgb) / .64);color:var(--text)}
.gc-body{padding:var(--s-5) var(--s-6) var(--s-1)}
.gc-body h2{margin:0;font:600 var(--fs-4)/22px var(--font)}
.gc-hero{display:flex;align-items:baseline;gap:var(--s-2);margin:var(--s-3) 0}
.gc-hero b{font:400 var(--fs-8)/40px "Martian Mono",var(--font);font-variant-numeric:tabular-nums;word-spacing:-.25em}
.gc-hero span{font:400 var(--fs-3)/20px var(--font);color:var(--text-2)}
.gc-kv{display:flex;justify-content:space-between;gap:var(--s-3);min-height:28px;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font:400 var(--fs-2)/18px var(--font);color:var(--text-2)}
.gc-kv b{font-weight:500;color:var(--text)}
.gc-kv .v{display:inline-flex;align-items:center;gap:var(--s-2)}   /* R2 r11: name and figure read as two things */
.gc-kv.short{color:var(--red)}.gc-kv.short .i{width:var(--icon-sm);height:var(--icon-sm);vertical-align:-2px;margin-right:var(--s-1)}
.gc-note{margin:var(--s-3) 0 0;font:400 var(--fs-2)/18px var(--font);color:var(--text-2)}.gc-note.strong{color:var(--text)}
.gc-foot{display:flex;justify-content:flex-end;align-items:center;gap:var(--s-2);min-height:72px;padding:0 var(--s-6);border-top:1px solid var(--line)}
.gc-foot .btn{height:var(--ctl-m);padding:0 var(--s-5);font-size:var(--fs-3)}

/* @lane GDL end */
/* @lane A-html begin: retry with a note, archived banner */
/* P1 §4.10 retry with a note */
.rt-dlg{width:600px;max-width:calc(100vw - 32px);border-radius:var(--r-5)}
.rt-body{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--s-5);padding:var(--s-5) var(--s-6) 0}
.rt-last{display:flex;flex-direction:column;align-items:center;gap:var(--s-2)}
.rt-last small{font:400 var(--fs-1)/16px var(--font);color:var(--text-3)}
.rt-pic{width:120px;height:160px;border-radius:var(--r-3);box-shadow:var(--edge-strong);overflow:hidden;background:var(--raised);display:block}
.rt-pic.wide{height:120px;margin-top:var(--s-5)}.rt-pic img{width:100%;height:100%;object-fit:cover;display:block}
.rt-main{min-width:0}.rt-h{margin:0 0 6px;font:600 var(--fs-2)/18px var(--font)}.rt-h b{font-weight:600}
.rt-ask{margin:0 0 var(--s-4);padding:10px var(--s-3);border-radius:var(--r-2);background:var(--raised);box-shadow:inset 0 0 0 1px rgba(255,184,76,.35);font:400 var(--fs-2)/19px var(--font)}
.rt-chips{margin-bottom:var(--s-4)}.rt-chips.seg{flex-wrap:wrap;border-radius:var(--r-3)}   /* A32: the retry choices are a .seg; wraps when Claude offers many */
.rt-main textarea{min-height:76px}

/* P1 §2 archived banner */
#brand-band.gate.arch{height:48px;min-height:0;margin-bottom:var(--s-5);padding:0 var(--s-2) 0 var(--s-3);gap:var(--s-3);background:var(--surface)}   /* P3 §6: one line */
#brand-band.gate.arch .gate-nm{flex:none;max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 var(--fs-3)/20px var(--font);cursor:help}
#brand-band.gate.arch .gate-sub{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2);font:400 var(--fs-2)/18px var(--font)}
#brand-band.gate.arch .btn{flex:none;margin-left:auto}

/* @lane A-html end */
/* @lane GDL begin: text tab */
/* P1 §1.8 text tab: editor with a gutter, decision rows */
.gedit{display:grid;grid-template-columns:36px minmax(0,1fr);border-radius:var(--r-3);background:var(--bg);box-shadow:var(--edge-strong);overflow:hidden;transition:box-shadow var(--dur-2) var(--ease)}
.gedit:focus-within{box-shadow:var(--edge-accent),var(--ring-field)}
.gedit-g{padding:10px 0;border-right:1px solid var(--line);overflow:hidden;min-height:0}
.gedit-g .gm{display:grid;place-items:center;height:24px}
.gedit-g .gm .i{width:var(--icon-md);height:var(--icon-md)}.gedit-g .gm .i.ok{color:var(--green)}.gedit-g .gm .i.warn{color:var(--amber)}.gedit-g .gm .i.off{color:var(--text-3)}
.gedit .g-text{border:0;box-shadow:none;border-radius:0;background:transparent;line-height:24px;font-size:var(--fs-3);padding:10px var(--s-3);white-space:pre;overflow-x:auto;min-height:144px}
.gedit .g-text:focus-visible{box-shadow:none}
.gl-head{margin:var(--s-5) 0 var(--s-2);font:600 var(--fs-2)/18px var(--font);list-style:none}.gl-head span{color:var(--text-3);font-weight:400}
.gline.dec{min-height:56px;padding:var(--s-2) var(--s-2) var(--s-2) var(--s-3);border-radius:var(--r-3);background:var(--bg);box-shadow:var(--edge);margin-bottom:var(--s-2)}
.gl-act{display:flex;align-items:center;gap:var(--s-2)}

/* @lane GDL end */
/* @lane C2 begin: review-3 tail */
/* REVIEW-3 MINOR: in a window under about 625 px high the state box scrolls itself, «Details ›» never clips */
.stv{min-height:0;max-height:100%;overflow-y:auto}

/* #q-body is a column flex box: its sections and the brand bar never shrink under a long list (the bar was squeezed to 13 px) */
#q-body > *{flex-shrink:0}

/* P1 visual fix r1, J4 (BUILD-VS-FRAME m7, m13, m14) */
.g-tools .search input{padding-right:36px}
.g-tools .search input::-webkit-search-cancel-button{display:none}
.g-tools .search .search-clear{top:4px;right:4px}
.toast .t-ok{flex:none;width:16px;height:16px;margin-right:-8px;color:var(--green)}

/* P1 visual fix r1, J5 (m11): only the value of a short account is red, the label keeps its colour */
.gc-kv.short{color:var(--text-2)}.gc-kv.short .v,.gc-kv.short .v b{color:var(--red)}
/* visual fix r1 J4: m3 hero pill is a quiet mono count, the picker strip is 8px tighter, lines list sits inside the pane padding */
.req-head .total{border:0;box-shadow:none;gap:0}.req-head .total::before{display:none}.req-head .total b{font:500 var(--fs-1)/22px var(--mono);letter-spacing:0}
.gsl{padding:0 0 var(--s-3)}
.g-pane .glines{margin:0}
.gl-head span{font:500 var(--fs-1)/18px var(--mono);margin-left:var(--s-1)}
.gc-hero b{letter-spacing:-.04em}
.req-head{padding-top:var(--s-4);min-height:56px}
.rt-dlg textarea{height:76px;min-height:76px;resize:none}
#qdrawer .qcard > .qconfirm{margin:0}
.gc-takes{display:contents}
/* @lane C2 end */