/* Cover Factory: Style page card 8.6 (BRANDS P8.6): the Test step. Everything is scoped under .tt (frames s5*, s3c, s3d). */
.tt{display:grid;gap:var(--s-5);min-width:0}
.tt-payhost:empty,.tt-body:empty,.tt-end-mine:empty{display:none}
.tt-body{display:grid;gap:var(--s-5);min-width:0}
.tt .err{display:flex;gap:var(--s-2);padding:10px var(--s-3);border-radius:var(--r-2);background:var(--red-soft);color:var(--text);font-size:var(--fs-2);line-height:18px}
.tt .err>.i{flex:none;width:var(--icon-md);height:var(--icon-md);margin-top:1px;color:var(--red)}
.tt .err b{display:block;font-weight:600}
.tt .err span{color:var(--text-2)}
.tt .err.amber{background:var(--amber-soft)}
.tt .err.amber>.i{color:var(--amber)}
.tt .err>div{flex:1;min-width:0}
.tt .err .acts{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-2)}
.tt .err .acts:empty{display:none}
.tt .st-warn{display:flex;align-items:flex-start;gap:var(--s-2);padding:10px var(--s-3);border-radius:var(--r-2);background:var(--amber-soft);color:var(--text);font-size:var(--fs-2);line-height:18px}
.tt .st-warn>.i{flex:none;width:var(--icon-md);height:var(--icon-md);margin-top:1px;color:var(--amber)}
.tt .st-warn b{display:block;font-size:var(--fs-2);line-height:18px;font-weight:600}
.tt .st-warn span.s{color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.tt .spin{display:inline-block;flex:none;width:14px;height:14px;border-radius:50%;border:2px solid rgb(var(--p-white-rgb) / .22);border-top-color:currentColor;animation:spin var(--loop-spin) linear infinite}
.tt .btn .spin{border-color:rgba(28,19,3,.3);border-top-color:var(--on-amber)}
.tt .sk{display:block;background:var(--hatch),var(--raised)}
.tt .sk-s{width:90px;height:18px;border-radius:var(--r-xs)}
/* empty, failed, cancelled */
.tt-fail{display:flex;gap:var(--s-2);width:100%;border:1px solid var(--line);border-radius:var(--r-5);background:var(--surface);box-shadow:var(--hl-top);color:var(--text)}
.tt-fail>.i{flex:none;width:24px;height:24px;color:var(--red)}
.tt-fail>div{min-width:0}
.tt-fail>.btn{margin-top:var(--s-2)}
.tt-fail b{display:block;margin-bottom:var(--s-1);font:600 var(--fs-4)/22px var(--font)}
.tt-fail div>span{display:block}
.tt-fail span{color:var(--text-2);font-size:var(--fs-3);line-height:20px}
.tt-cancelled{background:var(--surface);box-shadow:var(--edge)}
.tt-cancelled>.i{color:var(--text-3)}
/* the paid panel */
.tt .pay{display:grid;gap:var(--s-3);padding:var(--s-5) var(--s-6) 0;border-radius:var(--r-3);background:var(--surface);box-shadow:var(--edge-hover);overflow:hidden}
.tt .pay-h{display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap}
.tt .pay-h h2{margin:0;font-size:var(--fs-4);line-height:20px;font-weight:600}
.tt .pay-h span{color:var(--text-3);font-size:var(--fs-1);line-height:16px}
.tt .pay-games,.tt-run .pay-games{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px var(--s-4);margin:0;padding:0;list-style:none}
.tt .pay-games li{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:var(--s-3);min-height:52px;padding:0 var(--s-1) 0 var(--s-2);border-radius:var(--r-2)}
.tt .pay-games li:hover{background:var(--hover)}
.tt .th{display:block;width:40px;height:30px;border-radius:var(--r-1);object-fit:cover}
.tt .pay-games b{display:block;overflow:hidden;font-size:var(--fs-2);line-height:18px;font-weight:600;white-space:nowrap;text-overflow:ellipsis}
.tt .pay-games span{display:block;overflow:hidden;color:var(--text-3);font-size:var(--fs-1);line-height:16px;white-space:nowrap;text-overflow:ellipsis}
.tt .pay-games .swap{height:28px;padding:0 10px;gap:var(--s-1);font-size:var(--fs-1)}
.tt .pay-games .swap .i{width:var(--icon-sm);height:var(--icon-sm)}
.tt .uinote{margin:0;color:var(--text-3);font-size:var(--fs-1);line-height:16px}
.tt .pay-foot{display:flex;align-items:center;gap:var(--s-2);margin:0 -24px;padding:14px var(--s-5) 14px var(--s-6);border-top:1px solid var(--line);flex-wrap:wrap}
.tt .g-cost{display:grid;gap:2px;flex:1;min-width:200px;margin:0 var(--s-2) 0 0}
.tt .g-cost b{font:400 var(--fs-4b)/24px var(--mono);letter-spacing:-.02em}
.tt .g-cost span{color:var(--text-2);font-size:var(--fs-1);line-height:16px}
.tt .g-cost .left{color:var(--text-3)}
.tt .pay-foot .btn.amber .i{width:var(--icon-md);height:var(--icon-md)}
.tt .swp{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:9;padding:var(--s-2);border-radius:var(--r-2);background:var(--raised);border:1px solid var(--line-strong);box-shadow:var(--shadow-3)}
.tt .swp label{position:relative;display:block;margin:0 0 6px}
.tt .swp label .i{position:absolute;left:11px;top:10px;width:var(--icon-md);height:var(--icon-md);color:var(--text-3)}
.tt .swp .in{width:100%;height:var(--ctl-s);padding-left:var(--s-7);font-size:var(--fs-2)}
.tt .swp ul{display:grid;margin:0;padding:0;list-style:none}
.tt .swp li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:10px;height:44px;padding:0 var(--s-2);border-radius:var(--r-2);font-size:var(--fs-2);cursor:pointer}
.tt .swp li:hover,.tt .swp li:focus-visible{background:var(--hover)}
.tt .swp li.in-test{opacity:.45;cursor:default}
.tt .swp li.none{display:block;height:auto;padding:var(--s-3) var(--s-2);color:var(--text-3);cursor:default}
.tt .swp li b{display:block;font-weight:600;line-height:18px}
.tt .swp li span{display:block;color:var(--text-3);font-size:var(--fs-0);line-height:14px}
.tt .swp li small{color:var(--text-3);font-size:var(--fs-0)}
/* run card: queued, learning, drawing */
.tt-run{display:grid;gap:14px;padding:var(--s-4) var(--s-5);border-radius:var(--r-3);background:var(--surface);box-shadow:var(--edge)}
.tt-runh,.tt-runbar{display:flex;align-items:center;gap:var(--s-3)}
.tt-runbar{display:flex}
.tt-runbar>div,.tt-runh>div{flex:1;min-width:0}
.tt-run b{display:block;font-size:var(--fs-3);line-height:20px;font-weight:600}
.tt-run span{color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.tt-runa{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.tt-runa .muted{margin-left:auto;font-size:var(--fs-1)}
.tt .icfm{display:grid;gap:var(--s-3)}
.tt .icfm h3{margin:0;font-size:var(--fs-3);line-height:20px;font-weight:600}
.tt .icfm p{margin:0;color:var(--text-2);font-size:var(--fs-2);line-height:20px}
.tt .icfm .row{display:flex;align-items:center;gap:var(--s-2);justify-content:flex-end}
/* progress */
.tt-prog{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tt-prog .st-h{margin:0;font-size:var(--fs-4b);line-height:24px}
.tt-segs{display:inline-flex;gap:2px}
.tt-segs i{width:22px;height:6px;border-radius:var(--r-xs);background:var(--raised);box-shadow:var(--edge-strong)}
.tt-segs .g{background:var(--green);box-shadow:none}
.tt-segs .o{background:var(--amber);box-shadow:none}
.tt-segs .r{background:var(--hatch),var(--amber-soft);box-shadow:inset 0 0 0 1px rgb(var(--p-amber-rgb) / .55)}
.tt-segs .x{background:var(--red);box-shadow:none}
.tt-count{font-size:var(--fs-3);line-height:20px;font-weight:600}
.tt-tx{color:var(--text-3);font-size:var(--fs-2)}
.tt-meta{margin-left:auto;display:inline-flex;align-items:center;flex-wrap:wrap;gap:var(--s-1) var(--s-2);color:var(--text-3);font-size:var(--fs-1)}
.tt-meta b{font-weight:500;color:var(--text-2)}
.tt-ts b{display:block;font-weight:600}
.tt-ts span{display:block;color:var(--text-2)}
.tt-learn{display:flex;align-items:center;gap:10px;margin:0;padding:10px 10px 10px 14px;border-radius:var(--r-2);background:var(--surface);border:1px solid var(--line);color:var(--text-2);font-size:var(--fs-2);line-height:20px}
.tt-learn>.i{flex:none;width:var(--icon-md);height:var(--icon-md);color:var(--accent)}
.tt-learn>span{flex:1;min-width:0}
.tt-learn b{color:var(--text);font-weight:600}
.tt-learn .link{flex:none;font-size:var(--fs-1)}
.tt-learn .nu{color:var(--amber);font-weight:500}
.tt-notes{display:grid;gap:6px;margin:var(--s-2) 0 0;padding:0 14px;list-style:none;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.tt-notes li{display:flex;gap:var(--s-2);align-items:baseline}
.tt-notes li small{color:var(--amber);font-size:var(--fs-0)}
.tt-notes li.none{color:var(--text-3)}
/* covers */
.tt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px var(--s-5)}
.tt-grid[data-fmt="3:4"] .tc{width:100%;max-width:280px;justify-self:center}
.tc{position:relative;min-width:0}
.tc-m{position:relative;border-radius:var(--r-2);overflow:hidden;transition:box-shadow var(--dur-2) var(--ease)}
.tc-img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-2);transition:opacity var(--dur-3) var(--ease),filter var(--dur-3) var(--ease)}
.tc-img.tc-new{opacity:0}
.tc-m:has(>.tc-new){background:var(--hatch),var(--raised)}   /* MOTION fix R1b: a fresh cover fades in over the hatch, not the dark page */
.tt-grid[data-fmt="3:4"] .tc-img,.tt-grid[data-fmt="3:4"] .tc-sk,.tt-grid[data-fmt="3:4"] .tc-bad{aspect-ratio:418/564}
.tc-sk{display:block;aspect-ratio:4/3;border-radius:var(--r-2);background:var(--hatch),var(--raised);box-shadow:var(--edge)}
.tc-bad{display:grid;place-items:center;aspect-ratio:4/3;border-radius:var(--r-2);background:var(--red-soft);color:var(--red)}
.tc-bad .i{width:22px;height:22px}
.tc-b{display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-3) 2px 0}
.tc-t{flex:1;min-width:0;display:grid;gap:2px}
.tc-t b{font-size:var(--fs-3);line-height:20px;font-weight:600}
.tc-t span{color:var(--text-3);font-size:var(--fs-1);line-height:18px}
.tc-mark{flex:none}
.tc-mark.open{background:var(--hover);color:var(--text)}
.tc.off .tc-m,.tc.pop .tc-m{box-shadow:0 0 0 2px var(--amber)}
.tc.bad .tc-m{box-shadow:0 0 0 1px var(--red-line)}
.tc.rt .tc-img{opacity:.4;filter:blur(2px)}
.tc.exc .tc-img{opacity:.28;filter:saturate(.2)}
.tc-pill{position:absolute;left:50%;top:50%;translate:-50% -50%;display:inline-flex;align-items:center;gap:var(--s-2);height:30px;padding:0 var(--s-3);border-radius:var(--pill);background:var(--on-image);backdrop-filter:blur(6px);box-shadow:0 0 0 1px var(--line-strong);color:var(--text);font-size:var(--fs-1);font-weight:500;white-space:nowrap;max-width:calc(100% - 16px)}
.tc-flag{position:absolute;left:10px;top:10px;display:inline-flex;align-items:center;gap:var(--s-1);height:24px;padding:0 var(--s-2);border-radius:var(--pill);background:var(--on-image-2);backdrop-filter:blur(6px);color:var(--green);font-size:var(--fs-1);font-weight:500}
.tc-flag .i{width:var(--icon-xs);height:var(--icon-xs)}
.tc-note{display:flex;align-items:flex-start;gap:var(--s-2);margin:10px 0 0;padding:10px var(--s-3);border-radius:var(--r-2);background:var(--amber-soft);color:var(--text);font-size:var(--fs-2);line-height:18px}
.tc-note img,.tc-note .av{flex:none;width:18px;height:18px;border-radius:50%}
.tc-note>.i{flex:none;width:var(--icon-md);height:var(--icon-md);margin-top:1px}
.tc-note.was{background:var(--green-soft)}
.tc-note.was>.i{color:var(--green)}
.tc-note.saved{background:var(--accent-soft)}
.tc-q{flex:none;color:var(--amber);font-size:var(--fs-1);line-height:28px;white-space:nowrap}
.tc>.err{margin:10px 0 0}
/* the mark popover */
.mk-pop{position:absolute;right:0;top:calc(100% - 4px);z-index:8;width:min(344px,100%);padding:var(--s-4);border-radius:var(--r-3);background:var(--raised);border:1px solid var(--line-strong);box-shadow:var(--shadow-3);animation:mk-in var(--dur-3) var(--ease)}
.mk-pop.still{animation:none}
@keyframes mk-in{from{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}
.mk-h{margin:0 0 10px;font-size:var(--fs-3);line-height:20px;font-weight:600}
.mk-chips{display:flex;flex-wrap:wrap;gap:6px}
.mk-chips .chip{height:var(--ctl-s);padding:0 10px;font-size:var(--fs-1)}
.mk-chips .chip[aria-pressed=true]{background:var(--amber);border-color:transparent;color:var(--on-amber)}
.mk-ta{width:100%;min-height:60px;margin:10px 0 0;padding:var(--s-2) 10px;border-radius:var(--r-2);background:var(--bg);border:1px solid var(--line-hover);color:var(--text);font:inherit;font-size:var(--fs-2);line-height:20px;resize:vertical;box-sizing:border-box}
.mk-learn,.mk-cost,.mk-tries,.mk-info{display:flex;align-items:flex-start;gap:6px;margin:10px 0 0;color:var(--text-3);font-size:var(--fs-1);line-height:16px}
.mk-learn .i{flex:none;width:var(--icon-sm);height:var(--icon-sm);color:var(--accent)}
.mk-cost .i{flex:none;width:var(--icon-sm);height:var(--icon-sm);color:var(--text-3)}
.mk-cost.amber,.mk-cost.amber .i{color:var(--amber)}
.mk-info .i{flex:none;width:var(--icon-sm);height:var(--icon-sm);margin-top:1.5px;color:var(--text-3)}
.mk-foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--s-2);margin:14px 0 0;flex-wrap:wrap}   /* FINAL2 m1: a wrap keeps both buttons on the right */
/* the end block */
.tt-end{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-5) var(--s-6);border-radius:var(--r-3);background:var(--surface);box-shadow:var(--edge)}
.tt-end.amber{background:linear-gradient(180deg,var(--amber-soft),transparent 70%),var(--surface);box-shadow:inset 0 0 0 1px var(--amber-line)}
.tt-end-l{flex:1;min-width:0;display:flex;align-items:flex-start;gap:14px}
.tt-end-l>.i{flex:none;width:var(--icon-xl);height:var(--icon-xl);color:var(--amber)}
.tt-end h2{margin:0;font-size:var(--fs-5);line-height:26px;font-weight:600}
.tt-end p{margin:var(--s-1) 0 0;color:var(--text-2);font-size:var(--fs-3);line-height:20px}
@media (max-width:1359px){
  .tt-grid{gap:var(--s-5) 14px}
  .tt .pay-games,.tt-run .pay-games{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.mk-pop{animation:none}.tc-img,.tc-m{transition:none}}

/* P4 fix r1 J2: the Test page does not scroll at 1440x900 or 1280x800 (HANDOFF Shared layout); the sticky decision bar is the last row, the toasts stack above it, so the shell's 112 px B25 tail is not needed under it */
main:has(#view-refs:not([hidden]) .tt){padding-bottom:0}
#view-refs .tt-endhost{margin-top:var(--s-3)}   /* flow end 797 at 800 tall; the bar still sticks 16 above the window edge */

/* ---------- STY-B (DR-145): the draft's status block on the Test step (sty2/STY2.md). Stage | message | the one action, one family for every stage;
   height = --band (156, or 216 over 860 px tall), so the six slots never move between stages. Frame CSS: sty2/frames/sty2.css, scope dropped, DS-1 classes used. ---------- */
.tt .sb .btn{flex:none;height:var(--ctl-m);gap:var(--s-2);padding:0 var(--s-5);border:1px solid var(--line-strong);border-radius:var(--pill);font:500 var(--fs-3)/1 var(--font)}   /* M 44 (DR-64): the block's buttons; neutral keeps DS-1's 1 px line */
.tt .sb .btn .i{width:18px;height:18px}
.tt .sb .btn .bn{min-width:0;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tt .sb .btn:is(.primary,.green,.amber){border-color:transparent;font-weight:600}
.tt .sb .btn.paid-o{background:transparent;border-color:var(--paid-1);color:var(--paid-1);box-shadow:none;font-weight:600}   /* FA-913: ghost paid, no fill */
.tt .sb .btn.paid-o:hover{background:color-mix(in oklab,var(--paid-1) 12%,transparent);border-color:var(--paid-1);color:var(--paid-1)}
.tt .sb .btn:is(:disabled,[aria-disabled=true]):not([aria-busy=true]){opacity:1;filter:none;background:var(--raised);border-color:var(--line);color:var(--text-3);box-shadow:none;cursor:not-allowed;transform:none}   /* DS-1 disabled: one look for every solid */
.tt .sb .btn:is(.primary,.green,.amber):is(:disabled,[aria-disabled=true]):not([aria-busy=true]){border-color:transparent}
.tt .sb .btn[aria-busy=true]{cursor:progress}
.tt .sb .btn .spin{border-color:rgb(var(--p-ink-rgb) / .25);border-top-color:currentColor}
.tt .sb .badge{height:24px;padding:0 var(--s-2);gap:6px;font:500 var(--fs-1)/24px var(--font)}
/* ---------- the block ---------- */
.tt .sb{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:var(--s-7);height:var(--band);margin:0;padding:var(--s-3) var(--s-6) var(--s-3) var(--s-3);overflow:hidden}
.tt .sb.noact{grid-template-columns:auto minmax(0,1fr)}   /* Q1-B only: the action stays in today's bottom bar */

/* stage: today's test art (n04 backdrop, its art box size), calmed by a scrim; two cover cards on it */
.tt .sb-stage{--cw:66px;--ch:88px;--lbh:20px;--lbg:6px;--off:8px;--ar:28px;--x3:78px;--x4:240px;--xa:160px;--ct:calc((100% - var(--ch) - var(--lbh) - var(--lbg)) / 2);position:relative;flex:none;width:300px;height:130px;overflow:hidden;border-radius:var(--r-3);
  background:#070b1e center/cover no-repeat image-set(url(assets/n04-bg-560.webp) 1x,url(assets/n04-bg-1120.webp) 2x);box-shadow:var(--edge)}
.tt .sb-stage::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,11,30,.62),rgba(7,11,30,.28) 70%,rgba(7,11,30,.4))}   /* the rings stay behind the v4 card; the v3 side is quieter */
.tt .sb-stage.dim{filter:saturate(.7)}
.tt .sb-stage.dim::before{background:rgba(7,11,30,.6)}
@media (max-height:860px){.tt .sb-stage{--x3:94px;--x4:276px;--xa:186px;width:360px}}   /* fix r1: the 156 stage is 360 wide (was 300), so a short message does not leave a strip over 240 px */
@media (min-height:861px){.tt .sb-stage{--cw:96px;--ch:128px;--lbh:24px;--off:12px;--ar:32px;--x3:114px;--x4:352px;--xa:232px;width:440px;height:190px}}
/* M3: a 4:3 brand keeps its own card ratio (the brand's template ratio, as its covers) */
.tt .sb[data-fmt="4:3"] .sb-stage{--cw:96px;--ch:72px;--off:10px}
@media (min-height:861px){.tt .sb[data-fmt="4:3"] .sb-stage{--cw:128px;--ch:96px;--off:14px}}

.tt .sb-v{position:absolute;top:var(--ct);width:var(--cw);height:var(--ch)}
.tt .sb-v.v3{left:calc(var(--x3) - var(--cw) / 2)}
.tt .sb-v.v4{left:calc(var(--x4) - var(--cw) / 2)}
.tt .sb-c{position:absolute;inset:0;overflow:hidden;border-radius:var(--r-2);background:linear-gradient(180deg,#232a48,#11142a)}
.tt .sb-c > img{display:block;width:100%;height:100%;object-fit:cover}
.tt .sb-c.fr{z-index:2}
.tt .sb-c.g1{z-index:1;transform:translateX(calc(var(--off) * -1)) scale(.9);filter:brightness(.42)}
.tt .sb-c.g2{z-index:0;transform:translateX(calc(var(--off) * -1.9)) scale(.8);filter:brightness(.26)}
.tt .sb-v.v4 .sb-c.g1{transform:translateX(var(--off)) scale(.9)}
.tt .sb-v.v4 .sb-c.g2{transform:translateX(calc(var(--off) * 1.9)) scale(.8)}
.tt .sb-v.v3 .sb-c.fr{box-shadow:0 0 0 1px rgba(214,222,255,.26),var(--shadow-2)}
.tt .sb-v.v4 .sb-c.fr{box-shadow:0 0 0 2px var(--t),0 0 28px 4px color-mix(in oklab,var(--t) 48%,transparent),var(--shadow-2)}
.tt .sb-v.v4.quiet .sb-c.fr{box-shadow:0 0 0 1px rgba(214,222,255,.22),var(--shadow-2)}

/* the empty card: artEmpty's card (gradient, suits, the glow in the stage's tone) */
.tt .sb-c.mt{box-shadow:inset 0 0 0 1px rgb(var(--p-white-rgb) / .16)}
.tt .sb-c.mt::after{content:"";position:absolute;inset:0;background:radial-gradient(72% 50% at 50% 100%,color-mix(in oklab,var(--t) 70%,transparent),transparent)}
.tt .sb-c.mt.dash{background:rgb(var(--p-navy-rgb) / .55);box-shadow:none;outline:1.5px dashed rgba(214,222,255,.34);outline-offset:-1.5px}
.tt .sb-c.mt.dash::after{opacity:.5}
.tt .sb-c .suits{position:absolute;inset:0;width:100%;height:100%}
.tt .sb-c.sk{border-radius:var(--r-2);box-shadow:inset 0 0 0 1px rgb(var(--p-white-rgb) / .16)}   /* v3's card while liveGames loads: the app skeleton (.sk, its sweep, shown only when slow) at card size, label stays */
/* N1: covers that did come back behind the empty red front stay at the standard offset and take the glyph dim, so no cut title reads beside the alert; the line and label tell 4 failed from 6 */
.tt .sb-v.v4:has(> .sb-c.fr.mt) .sb-c.g1:has(> img){filter:grayscale(.75) brightness(.48)}
.tt .sb-v.v4:has(> .sb-c.fr.mt) .sb-c.g2:has(> img){filter:grayscale(.75) brightness(.32)}
/* M2: no live version: the brand's empty card, its icon in the calm centre, a quiet glow */
.tt .sb .sb-v.v3.none{--t:var(--text-3)}
.tt .sb-c .bico{position:absolute;z-index:1;left:50%;top:50%;width:28px;height:28px;translate:-50% -50%;border-radius:var(--r-sm);opacity:.92}
@media (min-height:861px){.tt .sb-c .bico{width:40px;height:40px;border-radius:var(--r-2)}}
.tt .sb-c.old > img{filter:grayscale(.75) brightness(.48)}

/* one glyph on the v4 card, only on a calm card (empty or dimmed), never on a full-colour cover (M1) */
.tt .sb-gl{position:absolute;z-index:3;left:50%;top:50%;display:grid;place-items:center;width:calc(var(--ar) + 8px);height:calc(var(--ar) + 8px);translate:-50% -50%;border-radius:50%;
  background:var(--on-image);box-shadow:inset 0 0 0 1px var(--hl-2);color:var(--t)}
.tt .sb-gl .i{width:calc(var(--ar) * .56);height:calc(var(--ar) * .56)}

/* the version label under each card: a badge with its own plate (text never sits on the art itself) */
.tt .sb-lb{position:absolute;z-index:4;left:50%;top:calc(100% + var(--lbg));translate:-50% 0;display:inline-flex;align-items:center;gap:var(--s-1);height:20px;padding:0 6px;border-radius:var(--pill);
  background:var(--on-image);box-shadow:inset 0 0 0 1px var(--hl-2);color:var(--text-2);font:500 var(--fs-1)/20px var(--font);white-space:nowrap;font-variant-numeric:tabular-nums}
.tt .sb-lb b{color:var(--text);font-weight:600}
.tt .sb-lb .d{width:6px;height:6px;border-radius:50%;background:var(--t,var(--green))}
.tt .sb-lb .d{margin-right:2px}
@media (max-height:860px){.tt .sb-lb.long .w{display:none}}   /* «First style» (style.js:674, v1's name) fills the 300 px stage at 156: the state word stays in the message line */
@media (min-height:861px){.tt .sb-lb{gap:6px;height:24px;padding:0 var(--s-2);line-height:24px}.tt .sb-lb .d{margin-right:0}}   /* MINOR 1: S20 at 156, M24 at 216 (DR-66) */

/* v3 -> v4 */
.tt .sb-ar{position:absolute;z-index:2;left:var(--xa);top:calc(var(--ct) + var(--ch) / 2);display:grid;place-items:center;width:var(--ar);height:var(--ar);translate:-50% -50%;border-radius:50%;
  background:var(--on-image);box-shadow:inset 0 0 0 1px var(--hl-2);color:var(--text-2)}
.tt .sb-ar .i{width:calc(var(--ar) * .5);height:calc(var(--ar) * .5)}
/* learning: the references fly from the arrow's place into the v4 card (today's n04 motion, 4.2 s loop; reduced motion: still) */
.tt .sb-rf{position:absolute;z-index:2;top:calc(var(--ct) + var(--ch) / 2);width:calc(var(--cw) * .42);height:calc(var(--cw) * .56);translate:-50% -50%;border-radius:var(--r-xs);object-fit:cover;box-shadow:0 0 0 1px rgba(214,222,255,.3),var(--shadow-1)}

/* tones: one per stage, on the v4 card and the stage's one dot */
.tt .sb[data-tone=accent]{--t:var(--accent)}
.tt .sb[data-tone=quiet]{--t:var(--text-3)}
.tt .sb[data-tone=amber]{--t:var(--amber)}
.tt .sb[data-tone=red]{--t:var(--red)}
.tt .sb[data-tone=green]{--t:var(--green)}
.tt .sb .sb-v.v3{--t:var(--green)}

/* ---------- message: what happened, what it means for v3 ---------- */
.tt .sb-msg{display:grid;align-content:center;justify-items:start;gap:6px;min-width:0}
.tt .sb-msg h3{display:flex;align-items:center;gap:10px;margin:0;font-size:var(--fs-4);line-height:22px;font-weight:600;letter-spacing:-.01em}
.tt .sb-ln{margin:0;color:var(--text-2);font-size:var(--fs-3);line-height:20px;font-variant-numeric:tabular-nums;text-wrap:pretty}
.tt .sb-ln b{color:var(--text);font-weight:500}
.tt .sb-ln .icon-btn{display:inline-grid;vertical-align:-7px;margin:-2px 0 0 var(--s-1)}
.tt .sb-chg{display:grid;gap:6px;width:100%;min-width:0;margin-top:6px}
.tt .sb-chg .k{color:var(--text-3);font-size:var(--fs-1);line-height:16px}
.tt .sb-chg .chips{display:flex;flex-wrap:nowrap;gap:6px;min-width:0}
.tt .sb-chg .badge{display:block;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tt .sb-chg .badge.plus{flex:none}
.tt .sb-msg .bar6{width:min(360px,100%);margin-top:6px}   /* today's bar6 width */
.tt .sb-msg .bar6 i.o{background:var(--amber)}   /* an Off cover; good = .d, unmarked = the empty track */
.tt .sb-err{color:var(--red)}
@media (min-height:861px){.tt .sb-msg{gap:var(--s-2)}.tt .sb-msg h3{font-size:var(--fs-4b);line-height:24px}.tt .sb-chg{margin-top:var(--s-2)}.tt .sb-msg .bar6{margin-top:var(--s-2)}}

/* ---------- the one action ---------- */
.tt .sb-do{display:grid;justify-items:end;align-content:center;gap:10px;min-width:184px}
.tt .sb-do .row{display:flex;align-items:center;gap:var(--s-2)}
.tt .sb-meta{display:inline-flex;align-items:center;gap:6px;color:var(--text-2);font-size:var(--fs-2);line-height:18px;white-space:nowrap;font-variant-numeric:tabular-nums}
.tt .sb-meta .i{width:16px;height:16px;flex:none}
.tt .sb-meta .i.cr{color:var(--amber)}
.tt .sb-meta b{color:var(--text);font-weight:500}
.tt .sb-keep{position:relative;display:inline-flex;align-items:center;gap:var(--s-2);color:var(--text-2);font-size:var(--fs-2);line-height:18px;cursor:pointer;white-space:nowrap}
.tt .sb-keep input{position:absolute;opacity:0;width:18px;height:18px;margin:0}
.tt .sb-keep .bx{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--r-xs);background:var(--accent);color:var(--on-primary)}
.tt .sb-keep .bx .i{width:12px;height:12px;stroke-width:3}
.tt .sb-who{display:flex;align-items:center;gap:var(--s-2);color:var(--text-2);font-size:var(--fs-2);line-height:18px;white-space:nowrap}
.tt .sb-who .avs{display:flex}
.tt .sb-who .av{width:24px;height:24px;margin-left:-6px;border-radius:50%;display:grid;place-items:center;background:var(--c,#7cc4ff);color:var(--ink);font:600 var(--fs-0)/1 var(--font);box-shadow:var(--ring-gap)}
.tt .sb-who .av:first-child{margin-left:0}

/* ---------- what v4 learned: the notes leave the band (they were its empty right half) for a card under the slots ---------- */


/* learning: the references fly from the arrow's place into the v4 card (today's n04 motion, 4.2 s loop); reduced motion: still */
.tt .sb-rf{animation:sb-in 4.2s var(--ease-in-out) var(--d,0s) infinite;--sbw:360px}
@media (min-height:861px){.tt .sb-rf{--sbw:440px}}
@keyframes sb-in{0%{transform:none;opacity:1}80%{opacity:.9}100%{transform:translateX(calc(var(--x4) - var(--sbw) * var(--p)));opacity:0}}
@media (prefers-reduced-motion:reduce){.tt .sb-rf{animation:none}}
/* stage change: the v4 card's ring and glow take the new tone over 300 ms */
.tt .sb-v.v4 .sb-c.fr{transition:box-shadow var(--dur-3,var(--dur-4)) ease}
.tt .sb-msg .bar6 i{transition:background-color var(--dur-3) ease-out}
.tt .sb-msg .bar6 i.o{background:var(--amber)}
.tt .sb-do .btn:active{scale:.97}
.tt .sb-do .btn{transition:scale var(--dur-1) ease-out,background-color var(--dur-2) ease}
.tt .sb-do .sb-sk{display:block;width:184px;height:44px;border-radius:var(--pill)}
.tt .sb-do .ck{position:relative;display:inline-flex;align-items:center;gap:var(--s-2);color:var(--text-2);font-size:var(--fs-2);line-height:18px;cursor:pointer;white-space:nowrap}
.tt .sb-do .ck input{position:absolute;opacity:0;width:18px;height:18px;margin:0;cursor:pointer}
.tt .sb-do .ck .bx{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--r-xs);background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-strong);color:transparent}
.tt .sb-do .ck input:checked + .bx{background:var(--accent);box-shadow:none;color:var(--on-primary)}
.tt .sb-do .ck input:focus-visible + .bx{outline:2px solid var(--accent);outline-offset:2px}
.tt .sb-do .ck input:disabled + .bx{opacity:.5}
.tt .sb-do .ck .bx .i{width:12px;height:12px;stroke-width:3}
.tt .sb-who .av{width:24px;height:24px;margin-left:-6px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--on-primary);font:600 var(--fs-0)/1 var(--font);box-shadow:var(--ring-gap)}
.tt .sb-who .avs > *:first-child{margin-left:0}
.tt .sb-who .avs .av.xs{width:24px;height:24px}
.tt .sb-do .spin{margin-right:0}
.tt .sb-meta .spin{width:14px;height:14px}
.tt-endhost:not(:has(.apv)){display:none}   /* the decision bar is gone from this step (its action is in the status block); the success hero and the dialog still use the host */
/* «What v4 learned»: a card under the slots, only with notes */
.tt .sb-notes .card-h{margin-bottom:var(--s-3)}
.tt .sb-notes .learn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2) var(--s-7);margin:0;padding:0;list-style:none}
.tt .sb-notes .learn li{display:flex;gap:var(--s-2);align-items:flex-start;color:var(--text-2);font-size:var(--fs-3);line-height:20px}
.tt .sb-notes .learn li .i{flex:none;width:16px;height:16px;margin-top:2px;color:var(--accent)}
.tt .sb-notes .fold{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s-3);color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.tt .sb-notes .fold:hover{color:var(--text)}
.tt .sb-notes .fold .i{width:14px;height:14px;transition:rotate var(--dur-3) ease-out}
.tt .sb-notes .fold[aria-expanded=true] .i{rotate:180deg}
/* DR-149 DA4-3: the live card is a link to the Learned page (wash on hover, chevron, tooltip) */
.tt .sb-v.v3.lnk{display:block;color:inherit;text-decoration:none;cursor:pointer}
.tt .sb-v.v3.lnk::before{content:"";position:absolute;inset:-6px -6px 14px;border-radius:var(--r-3);background:rgba(214,222,255,0);transition:background-color var(--dur-2) ease-out;z-index:0}
.tt .sb-v.v3.lnk:hover::before,.tt .sb-v.v3.lnk:focus-visible::before{background:rgba(214,222,255,.1)}
.tt .sb-v.v3.lnk:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--r-2)}
.tt .sb-v.v3 .sb-chev{position:absolute;z-index:4;right:-6px;top:6px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--on-image);box-shadow:inset 0 0 0 1px var(--hl-2);color:var(--text-2)}
.tt .sb-v.v3 .sb-chev .i{width:12px;height:12px}