/* BRANDS 7.5 (DESIGN-FINAL §11, §13; frames r13, r13b, r13c, r6, r6b): the generation target band, the «All brands» menu, the queue's brand
   filter and chip, the cross-brand toasts. The popover family is .gpk (catalogue.css owns .pk). Tokens only, tile sizes from brands.css. */
.gt-band{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-4) var(--s-6) var(--s-4);border-bottom:1px solid var(--line)}
@media (max-height:760px){.gt-band{padding:10px var(--s-6) var(--s-3)}.gt-card,.gt-all{height:52px}}   /* FIX-R1: a short window gives the request panel the room */
.gt-band[hidden]{display:none}
#gen[open]:has(> .gt-band:not([hidden])){grid-template-rows:auto auto minmax(0,1fr) auto}
.gt-l{flex:none;color:var(--text-2);font:500 var(--fs-2)/18px var(--font)}
.gt-cards{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s-3);min-width:0}
.gt-cards.gt-more{grid-template-columns:repeat(3,minmax(0,1fr)) 176px}
.gt-card{position:relative;display:flex;align-items:center;gap:var(--s-3);min-width:0;height:64px;padding:0 14px;border-radius:var(--r-3);background:radial-gradient(120% 120% at 0% 0%,color-mix(in oklab,var(--b) 14%,transparent),transparent 70%),var(--bg);box-shadow:var(--edge-strong);text-align:left;color:var(--text);transition:box-shadow var(--dur-2) var(--ease)}
.gt-card:hover{box-shadow:var(--edge-hover)}
.gt-card[aria-checked=true]{background:radial-gradient(120% 120% at 0% 0%,color-mix(in oklab,var(--b) 14%,transparent),transparent 70%),linear-gradient(160deg,var(--accent-soft),transparent 60%),var(--bg);box-shadow:inset 0 0 0 1.5px var(--accent)}
.gt-card[aria-disabled=true]{opacity:.55;cursor:not-allowed}
.gt-card[aria-disabled=true]:hover{box-shadow:var(--edge-strong)}
.gt-t{flex:1;display:grid;gap:2px;min-width:0;text-align:left}
.gt-t b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font:600 var(--fs-3)/18px var(--font)}
.gt-t small{display:flex;align-items:center;gap:var(--s-1);overflow:hidden;white-space:nowrap;color:var(--text-2);font-size:var(--fs-1);line-height:16px}
.gt-t small .i{flex:none;width:var(--icon-sm);height:var(--icon-sm)}
.gt-ck{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-hover)}
.gt-card[aria-checked=true] .gt-ck,.gpk-r[aria-selected=true] .gt-ck{background:var(--accent);color:var(--ink);box-shadow:none}
.gt-ck .i{width:var(--icon-xs);height:var(--icon-xs);stroke-width:2.6}
.gt-card:not([aria-checked=true]) .gt-ck .i,.gpk-r:not([aria-selected=true]) .gt-ck .i{visibility:hidden}   /* FIX-R1: an empty ring until the brand is picked; the glyph keeps its place */
.gt-tag{flex:none}
.gt-all{display:flex;align-items:center;gap:var(--s-3);min-width:0;height:64px;padding:0 var(--s-3) 0 14px;border-radius:var(--r-3);background:var(--bg);box-shadow:var(--edge-strong);text-align:left;color:var(--text);transition:box-shadow var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease)}
.gt-all:hover{box-shadow:var(--edge-hover)}
.gt-all[aria-expanded=true]{background:var(--hover);box-shadow:var(--edge-hover)}
.gt-all .gt-t b{font-size:var(--fs-3)}
.gt-all > .i{flex:none;width:var(--icon-md);height:var(--icon-md);margin-left:auto;color:var(--text-3);transition:rotate var(--dur-2) var(--ease)}
.gt-all[aria-expanded=true] > .i{rotate:180deg;color:var(--text)}
.gt-band .bt.sm,.gpk .bt.sm{--s:24px}
/* the popover: «All brands» under the card, the queue's brand list under .qsel */
.gpk{position:fixed;inset:auto;margin:0;z-index:var(--z-menu);display:none;flex-direction:column;width:328px;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%);box-shadow:inset 0 1px 0 var(--line-hi),var(--shadow-3);color:var(--text);overflow:hidden}
.gpk:popover-open{display:flex}
.gpk.qpk{width:300px}
.gpk > *{flex:none}
.gpk-h{display:flex;align-items:center;justify-content:space-between;padding:var(--s-2) 10px 6px;color:var(--text-3);font:500 var(--fs-1)/16px var(--font)}
.gpk-h b{color:var(--text-2);font:400 var(--fs-1)/16px var(--mono)}
.gpk-list{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-1);flex:0 1 auto;min-height:0;margin:0;padding:0;list-style:none;overflow-y:auto;overscroll-behavior:contain;outline:0}
.gpk-r{display:flex;align-items:center;gap:var(--s-3);width:100%;height:44px;padding:0 10px 0 var(--s-2);border-radius:var(--r-3);color:var(--text);text-align:left;cursor:pointer;transition:background-color var(--dur-2) var(--ease)}
.qpk .gpk-r{height:40px}
.gpk-r:hover,.gpk-r.hov{background:var(--hover)}
.gpk-r[aria-selected=true]{background:var(--active);box-shadow:var(--edge-strong)}
.gpk-r.kfr{outline:2px solid var(--accent);outline-offset:-2px}
.gpk-r[aria-disabled=true]{cursor:not-allowed}
.gpk-r[aria-disabled=true] > *{opacity:.55}
.gpk-r[aria-disabled=true]:hover{background:none}
.gpk-r .gt-t b{font-weight:500}
.gpk-r[aria-selected=true] .gt-t b{font-weight:600}
.gpk-ok{flex:none;width:16px;height:16px;color:var(--accent)}
.gpk-bts{flex:none;display:flex;width:28px}
.gpk-bts .bt + .bt{margin-left:-14px}
.gt-all .gpk-bts{width:40px}
.gt-all .gpk-bts .bt + .bt{margin-left:-16px}
.gpk-none{margin:var(--s-3) var(--s-2);color:var(--text-2);font-size:var(--fs-2)}
.gpk-tip{position:fixed;inset:auto;margin:0;max-width:280px;pointer-events:none}
.gpk-tip:popover-open{display:block}
/* the queue's brand filter (§13) */
.qbrands{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 var(--s-4)}
.qbrands .chip{height:var(--ctl-s);padding:0 10px 0 6px}
.qbrands .chip:first-child{padding-left:var(--s-3)}
.qbrands .chip .n{margin-left:6px;color:var(--text-3);font-variant-numeric:tabular-nums}
.qbrands .qb-n{display:inline-flex;align-items:center;gap:var(--s-1);margin-left:10px;font-size:var(--fs-1);color:var(--text-3)}
.qbrands .qb-n .bt:last-of-type{margin-right:var(--s-1)}
.qbrands .qb-n .bt + .bt{margin-left:-5px}
.qsel{display:inline-flex;align-items:center;gap:var(--s-2);height:var(--ctl-s);padding:0 var(--s-3) 0 14px;border-radius:var(--pill);border:1px solid var(--line-strong);background:var(--surface);color:var(--text);font:500 var(--fs-2)/1 var(--font)}
.qsel .i{width:var(--icon-sm);height:var(--icon-sm);color:var(--text-3);transition:rotate var(--dur-2) var(--ease)}
.qsel[aria-expanded=true]{border-color:var(--line-hover);background:var(--raised)}
.qsel[aria-expanded=true] .i{rotate:180deg;color:var(--text)}
.qbrand{display:inline-flex;align-items:center;gap:6px;flex:0 1 auto;min-width:0;max-width:160px;height:24px;padding:0 10px 0 3px;border-radius:var(--pill);background:var(--raised);box-shadow:var(--edge);color:var(--text);font:500 var(--fs-1)/1 var(--font)}
.qbrand .bt{--s:18px;border-radius:50%}   /* DR-104: the chip's tile is a circle; the icon sits in the circle's inscribed square with air around it */
.qbrand .bt .cl,.qbrand .bt.xs .cl{width:60%;height:60%}
.bt.all .g{width:16px;height:16px;stroke-width:2}
.bt.all{--b:#c8cee6}
.bt.all .i{width:var(--icon-md);height:var(--icon-md)}
/* toasts about another brand (§13) */
.toast.bt-t .bt{--s:18px;border-radius:var(--r-xs);margin-right:-8px}
.toast.bt-t .nm{min-width:0;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
/* FU-3: a mention in another brand (CROSS-BRAND-COMMENTS §4): two rows and Open */
.toast.cmt{gap:var(--s-4);min-width:360px;max-width:520px;padding:var(--s-2) var(--s-2) var(--s-2) var(--s-3)}
.toast.cmt > .cmt-m{display:grid;gap:var(--s-1);min-width:0;flex:1}
.cmt-h{display:flex;align-items:center;gap:var(--s-2);min-width:0;height:24px}
.cmt-h .qbrand .bt{--s:18px;border-radius:50%;margin-right:0}
.cmt-h .qbrand .nm{display:block;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmt-h .av{flex:none}
.cmt-t{min-width:0;display:flex;align-items:baseline;gap:var(--s-1);font-size:var(--fs-2);line-height:18px;color:var(--text-2);white-space:nowrap}
.cmt-t b{min-width:0;max-width:160px;overflow:hidden;text-overflow:ellipsis;color:var(--text);font-weight:600}
.cmt-t .vb{flex:none}
.cmt-x{max-width:400px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-2);line-height:18px;color:var(--text-2)}
.cmt-x .mn{color:var(--accent);font-weight:500}
.toast.cmt > .btn{flex:none}
@media (prefers-reduced-motion:reduce){.gt-all > .i,.qsel .i{transition:none}}
/* Covers: a brand's first and «all reviewed» screens (frames r3, r7): the brand's tile sits on the front card of the stack */
.art-brand{position:relative;width:236px;margin:0 auto var(--s-1)}
.art-brand .art{margin:0}
.art-brand > .bt{position:absolute;left:50%;top:52%;translate:-50% -50%}