/* P4 (HANDOFF /rework/P4): ported from the frames kit, see p4.css for the shared base. */
/* ---------- page head: title + one version chip (+ the trained page's one action) ---------- */
/* FX-10 DS-3: the app's one page head. Title box 40 at 96 (mid 116), tracking -.03em as h1.h1x; the first block stands at 160, 24 under the title
   (the stepper, or the page body when the stepper is hidden). Was a 48 box with -.04em: mid 120 and the body at 168. */
:where(#view-refs,.p4) .st-head{display:flex;align-items:center;gap:var(--s-4);height:40px}
:where(#view-refs,.p4) .st-head h1{margin:0;font:300 var(--fs-9)/40px var(--mono);letter-spacing:-.03em}
:where(#view-refs,.p4) .st-head + .stp,:where(#view-refs,.p4) .st-head + .gate[hidden] + .stp{margin-top:var(--s-6)}   /* the brand band (brand.js) stays in the page hidden once placed */
:where(#view-refs,.p4) .st-head + .gate{margin-top:var(--s-6)}   /* the archived notice is then the first block: also at 160, not glued under the title */
:where(#view-refs,.p4) .vchip{display:inline-flex;align-items:center;gap:var(--s-2);height:28px;padding:0 var(--s-3);border-radius:var(--pill);border:1px solid var(--line-strong);color:var(--text-2);font-size:var(--fs-2);line-height:18px;font-weight:500;cursor:help}
:where(#view-refs,.p4) .vchip .d{width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--text-3)}
:where(#view-refs,.p4) .vchip.live .d{background:var(--green);box-shadow:none}
:where(#view-refs,.p4) .vchip.live{color:var(--text)}
:where(#view-refs,.p4) .st-head .sp{flex:1}

/* ---------- ④ Test & approve ---------- */
:where(#view-refs,.p4) .phase{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-7);align-items:center;padding:var(--s-4) var(--s-6) var(--s-4) var(--s-4)}
:where(#view-refs,.p4) .phase h3{margin:0;font-size:var(--fs-4);line-height:22px;font-weight:600}
:where(#view-refs,.p4) .phase .ln{margin:var(--s-1) 0 0;color:var(--text-2);font-size:var(--fs-3);line-height:20px;font-variant-numeric:tabular-nums}
:where(#view-refs,.p4) .phase .ln b{color:var(--text);font-weight:500}
:where(#view-refs,.p4) .phase .acts{display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-4)}
:where(#view-refs,.p4) .flow{display:grid;gap:var(--s-1);margin:var(--s-4) 0 0;padding:0;list-style:none}
:where(#view-refs,.p4) .flow li{display:flex;align-items:flex-start;gap:var(--s-3);min-height:36px;color:var(--text);font-size:var(--fs-3);line-height:20px}
:where(#view-refs,.p4) .flow li .k{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--raised);box-shadow:var(--edge);color:var(--text-2);font-size:var(--fs-1);font-weight:600}
:where(#view-refs,.p4) .flow li small{display:block;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
:where(#view-refs,.p4) .flow{gap:var(--s-3)}
:where(#view-refs,.p4) .bar6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-1);width:min(360px,100%);margin-top:var(--s-3)}
:where(#view-refs,.p4) .bar6 i{height:6px;border-radius:var(--r-xs);background:var(--raised)}
:where(#view-refs,.p4) .bar6 i.d{background:var(--green)}
:where(#view-refs,.p4) .bar6 i.r{background:linear-gradient(90deg,var(--accent),color-mix(in oklab,var(--accent) 40%,transparent))}
:where(#view-refs,.p4) .bar6 i.x{background:var(--red)}
:where(#view-refs,.p4) .phase.slim{grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s-4);padding:var(--s-4) var(--s-5)}
:where(#view-refs,.p4) .phase.slim .art{width:120px}

/* N-04: the brand's references drift into the ring core; one new cover leaves in the brand tint */
:where(#view-refs,.p4) .n04{position:relative;flex:none;width:560px;height:240px;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)}
:where(#view-refs,.p4) .n04 .rf{position:absolute;width:54px;height:72px;border-radius:var(--r-1);object-fit:cover;box-shadow:0 0 0 1px rgba(214,222,255,.3),var(--shadow-2)}
:where(#view-refs,.p4) .n04 .out{position:absolute;right:56px;top:58px;width:94px;height:126px;border-radius:var(--r-2);object-fit:cover;box-shadow:0 0 0 2px var(--b,#62d2c4),0 0 28px 4px color-mix(in oklab,var(--b,#62d2c4) 55%,transparent),var(--shadow-2)}
:where(#view-refs,.p4) .n04.dim{filter:brightness(.6) saturate(.7)}
@keyframes n04-in{0%{translate:0 0;scale:1;opacity:1}80%{opacity:.9}100%{translate:150px 6px;scale:.35;opacity:0}}
@keyframes n04-out{0%{translate:-60px 0;scale:.6;opacity:0}30%{opacity:1}100%{translate:0 0;scale:1;opacity:1}}
:where(#view-refs,.p4) .n04.live .rf{animation:n04-in 4.2s var(--ease-in-out) infinite}
:where(#view-refs,.p4) .n04.live .rf:nth-of-type(2){animation-delay:-.84s}:where(#view-refs,.p4) .n04.live .rf:nth-of-type(3){animation-delay:-1.68s}:where(#view-refs,.p4) .n04.live .rf:nth-of-type(4){animation-delay:-2.52s}:where(#view-refs,.p4) .n04.live .rf:nth-of-type(5){animation-delay:-3.36s}
:where(#view-refs,.p4) .n04.live .out{animation:n04-out 4.2s var(--ease) infinite}
@media (prefers-reduced-motion:reduce){:where(#view-refs,.p4) .n04.live .rf, :where(#view-refs,.p4) .n04.live .out{animation:none}}

/* the 6 slots: fixed positions in every phase */
:where(#view-refs,.p4) .slots{--sw:max(120px,min(calc((100% - 80px) / 6),calc((100dvh - 603px) * .75)));display:grid;grid-template-columns:repeat(6,minmax(0,var(--sw)));justify-content:space-between;gap:var(--s-4);margin-top:var(--s-4);align-items:start}
/* P4 fix r1 J2: the slot row is capped by the window height too, so the marks end above the decision bar (marks end = slot top + width x 4/3 + 82; bar top - 23 at 900 tall, - 19 at 800) whatever the rail width is (P3 rail 64 px below 1408) */
@media (min-height:861px){:where(#view-refs,.p4) .slots{--sw:max(120px,min(calc((100% - 80px) / 6),calc((100dvh - 667px) * .75)))}}
:where(#view-refs,.p4) .sl{display:grid;grid-template-rows:auto 34px 32px;gap:var(--s-2);align-content:start;min-width:0}   /* M-01/M-02: picture, caption 34, marks area 32 in every phase */
:where(#view-refs,.p4) .sl .mka{display:grid;min-width:0}
:where(#view-refs,.p4) .sl .m{position:relative;aspect-ratio:3/4;border-radius:var(--r-3);overflow:hidden;background:#0b0f22;box-shadow:var(--edge)}
:where(#view-refs,.p4) .sl .m > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
:where(#view-refs,.p4) .sl .m .bl{filter:blur(14px) brightness(.55) saturate(1.1);scale:1.2}
:where(#view-refs,.p4) .sl .m .ct{object-fit:contain !important}
:where(#view-refs,.p4) .sl.pend .m .ct, :where(#view-refs,.p4) .sl.pend .m .bl{opacity:.5}
:where(#view-refs,.p4) .sl.fail .m .ct, :where(#view-refs,.p4) .sl.fail .m .bl{opacity:.4}
:where(#view-refs,.p4) .sl .lab{position:absolute;left:8px;right:8px;bottom:8px;display:flex;align-items:center;gap:6px;min-height:28px;padding:6px 10px;border-radius:var(--pill);background:var(--on-image);color:var(--text-2);font-size:var(--fs-1);line-height:16px;font-weight:500;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
:where(#view-refs,.p4) .sl .lab .si{flex:none}
:where(#view-refs,.p4) .sl.fail .lab{color:var(--text);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--red) 60%,transparent)}
:where(#view-refs,.p4) .sl .ring{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:conic-gradient(var(--accent) var(--p,40%),rgb(var(--p-accent-rgb) / .16) 0);-webkit-mask:radial-gradient(closest-side,transparent 82%,#000 84%);mask:radial-gradient(closest-side,transparent 82%,#000 84%)}
:where(#view-refs,.p4) .sl .nm{display:grid;min-width:0}
:where(#view-refs,.p4) .sl .nm b{font-size:var(--fs-2);line-height:18px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(#view-refs,.p4) .sl .nm small{color:var(--text-2);font-size:var(--fs-1);line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(#view-refs,.p4) .sl .mk2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-1)}
:where(#view-refs,.p4) .sl .mk2 > *{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;border-radius:var(--pill);border:1px solid var(--line-strong);color:var(--text-2);font-size:var(--fs-2);font-weight:500;cursor:pointer}
:where(#view-refs,.p4) .sl .mk2 > * .i{width:14px;height:14px}
:where(#view-refs,.p4) .sl{container-type:inline-size}
@container (max-width:139px){:where(#view-refs,.p4) .sl .mk2 > * .i{display:none}}   /* MINOR 1: narrow slots show the words only */
:where(#view-refs,.p4) .sl .mk2 > .good{background:color-mix(in oklab,var(--green) 16%,transparent);border-color:color-mix(in oklab,var(--green) 55%,transparent);color:var(--green)}
:where(#view-refs,.p4) .sl .mk2 > .off{background:color-mix(in oklab,var(--amber) 14%,transparent);border-color:color-mix(in oklab,var(--amber) 55%,transparent);color:var(--amber)}
:where(#view-refs,.p4) .sl.isgood .m{box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--green) 70%,transparent)}
:where(#view-refs,.p4) .sl.isoff .m{box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--amber) 70%,transparent)}
:where(#view-refs,.p4) .sl .redo{justify-self:start;height:32px}

/* «What's off?» popover: floats over the grid, never reflows it */
:where(#view-refs,.p4) .pop{position:absolute;z-index:var(--z-pop);width:300px;padding:var(--s-4);border-radius:var(--r-4);border:1px solid var(--line-strong);background:var(--glass-strong);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--shadow-3)}
:where(#view-refs,.p4) .pop h4{margin:0;font-size:var(--fs-3);line-height:20px;font-weight:600}
:where(#view-refs,.p4) .pop .chips{margin-top:var(--s-3);gap:var(--s-2)}
:where(#view-refs,.p4) .pop .chips .chip{height:var(--ctl-s);padding:0 var(--s-3);font-size:var(--fs-2)}
:where(#view-refs,.p4) .pop .chips .chip.on{border-color:var(--amber);color:var(--text);background:color-mix(in oklab,var(--amber) 12%,transparent)}
:where(#view-refs,.p4) .pop textarea{display:block;width:100%;height:60px;margin-top:var(--s-3);padding:var(--s-2) var(--s-3);border-radius:var(--r-2);border:1px solid var(--line-strong);background:var(--bg);color:var(--text);font:400 var(--fs-2)/18px var(--font);resize:none}
:where(#view-refs,.p4) .pop .foot{display:flex;justify-content:flex-end;gap:var(--s-2);margin-top:var(--s-3)}

/* the sticky decision bar: 64 high, Approve 44 high; the toast stack sits 16 above it */
:where(#view-refs,.p4) .dbar{position:absolute;left:280px;right:32px;bottom:16px;z-index:var(--z-sticky);display:flex;align-items:center;gap:var(--s-4);height:64px;padding:0 10px 0 var(--s-5);border-radius:var(--r-4);border:1px solid var(--line-strong);background:var(--glass-strong);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 var(--line-hi),var(--shadow-3)}
:where(#view-refs,.p4) .dbar .vd{display:flex;align-items:center;gap:10px;font-size:var(--fs-3);line-height:20px;font-weight:600}
:where(#view-refs,.p4) .dbar .vd small{color:var(--text-2);font-size:var(--fs-2);font-weight:400}
:where(#view-refs,.p4) .dbar .ck{display:inline-flex;align-items:center;gap:var(--s-2);margin-left:var(--s-2);color:var(--text-2);font-size:var(--fs-2);line-height:18px}
:where(#view-refs,.p4) .dbar .ck .bx{display:grid;place-items:center;width:18px;height:18px;border-radius:var(--r-xs);background:var(--accent);color:var(--on-primary)}
:where(#view-refs,.p4) .dbar .ck .bx .i{width:12px;height:12px;stroke-width:3}
:where(#view-refs,.p4) .dbar .sp{flex:1}
:where(#view-refs,.p4) .dbar .btn.lg{height:var(--ctl-m)}
:where(#view-refs,.p4) .toasts.raised{bottom:96px}
/* fix round 2 (R2-M1): a toast's message in the decision bar's left slot while it lasts; the bar's timer line is the toast's */
:where(#view-refs,.p4) .dbar .bmsg{display:flex;align-items:center;gap:var(--s-3);min-width:0}
:where(#view-refs,.p4) .dbar .bmsg>.i{flex:none;width:20px;height:20px;color:var(--accent)}
:where(#view-refs,.p4) .dbar .bmsg b{display:block;font-size:var(--fs-3);line-height:20px;font-weight:600}
:where(#view-refs,.p4) .dbar .bmsg small{display:block;color:var(--text-2);font-size:var(--fs-2);line-height:18px;font-weight:400}
:where(#view-refs,.p4) .dbar.msg .toast-time{left:20px;right:20px}
:where(#view-refs,.p4) .below-bar{padding-bottom:96px}

/* ---------- confirm dialogs (P1 .cf) with the version pair ---------- */
:where(#view-refs,.p4) .vpair{display:flex;align-items:center;gap:var(--s-3);margin:var(--s-4) 0 var(--s-1)}
:where(#view-refs,.p4) .vpair .v{display:grid;gap:var(--s-2);justify-items:center;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
:where(#view-refs,.p4) .vpair .v .cv{display:flex;gap:var(--s-1)}
:where(#view-refs,.p4) .vpair .v .cv img{width:48px;height:64px;border-radius:var(--r-1);object-fit:cover;box-shadow:0 0 0 1px var(--line)}
:where(#view-refs,.p4) .vpair .v b{color:var(--text);font-weight:600}
:where(#view-refs,.p4) .vpair .ar{color:var(--text-3)}

/* ---------- trained style ---------- */
:where(#view-refs,.p4) .made{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-4);margin-top:var(--s-3)}
:where(#view-refs,.p4) .made figure{display:grid;gap:var(--s-2);margin:0;min-width:0}
:where(#view-refs,.p4) .made img{display:block;width:100%;aspect-ratio:418/564;border-radius:var(--r-3);object-fit:cover;box-shadow:0 0 0 1px var(--line)}
:where(#view-refs,.p4) .made figcaption{font-size:var(--fs-2);line-height:18px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(#view-refs,.p4) .sech{display:flex;align-items:center;gap:var(--s-3)}
:where(#view-refs,.p4) .sech h3{margin:0;font-size:var(--fs-4);line-height:22px;font-weight:600}
:where(#view-refs,.p4) .sech small{color:var(--text-2);font-size:var(--fs-2);line-height:18px}
:where(#view-refs,.p4) .sech .sp{flex:1}
:where(#view-refs,.p4) .learn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-1) var(--s-6);margin:var(--s-3) 0 0;padding:0;list-style:none}
:where(#view-refs,.p4) .learn li{display:flex;gap:10px;padding:var(--s-2) 0;border-bottom:1px solid var(--line);color:var(--text);font-size:var(--fs-3);line-height:20px}
:where(#view-refs,.p4) .learn li .i{flex:none;width:16px;height:16px;margin-top:2px;color:var(--accent)}
:where(#view-refs,.p4) .vers{display:grid;gap:var(--s-1);margin:var(--s-3) 0 0;padding:0;list-style:none}
:where(#view-refs,.p4) .vers li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s-3);height:52px;padding:0 var(--s-1) 0 var(--s-3);border-radius:var(--r-2)}
:where(#view-refs,.p4) .vers li.live{background:var(--raised);box-shadow:var(--edge)}
:where(#view-refs,.p4) .vers li b{display:block;font-size:var(--fs-3);line-height:20px;font-weight:600}
:where(#view-refs,.p4) .vers li small{display:block;color:var(--text-2);font-size:var(--fs-1);line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(#view-refs,.p4) .vers .vmore{display:grid;place-items:center;width:32px;height:32px;margin:0;border-radius:50%;color:var(--text-2)}   /* was .more, which app.css gives margin 24px 0 (M-04) */
:where(#view-refs,.p4) .vers .vmore.on{background:var(--hover);color:var(--text)}
:where(#view-refs,.p4) .vers .vmore .i{width:16px;height:16px}
:where(#view-refs,.p4) .vers li > span:nth-child(2){display:grid;align-content:center;min-width:0}
:where(#view-refs,.p4) .vers li.all{cursor:pointer;color:var(--text)}
:where(#view-refs,.p4) .vers li.all:hover{background:var(--raised)}
:where(#view-refs,.p4) .vers li.all .ic{display:grid;place-items:center;width:16px;height:16px;color:var(--text-2)}
:where(#view-refs,.p4) .vers li.all .ic .i{width:16px;height:16px}
:where(#view-refs,.p4) .vers li.all > .i{width:16px;height:16px;margin-right:var(--s-2);color:var(--text-2);rotate:-90deg}
:where(#view-refs,.p4) .vers li.v-arch{background:var(--raised);box-shadow:var(--edge)}
:where(#view-refs,.p4) .vmenu{position:absolute;z-index:var(--z-pop);width:240px;padding:6px;border-radius:var(--r-3);border:1px solid var(--line-strong);background:var(--glass-strong);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--shadow-3)}
:where(#view-refs,.p4) .vmenu div{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:var(--r-2);color:var(--text);font-size:var(--fs-2);font-weight:500}
:where(#view-refs,.p4) .vmenu div.h{background:var(--raised)}
:where(#view-refs,.p4) .vmenu div .i{width:16px;height:16px;color:var(--text-2)}
:where(#view-refs,.p4) .cmpd{position:fixed;z-index:var(--z-dialog);left:50%;top:50%;translate:-50% -50%;width:min(1160px,100vw - 64px);border:1px solid var(--line-strong);border-radius:var(--r-5);background:var(--surface);box-shadow:inset 0 1px 0 var(--line-hi),var(--shadow-3)}
:where(#view-refs,.p4) .cmpd .chd{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-5) var(--s-5) 0 var(--s-6)}
:where(#view-refs,.p4) .cmpd .chd h2{margin:0;font-size:var(--fs-4);line-height:22px;font-weight:600}
:where(#view-refs,.p4) .cmpd .chd .sp{flex:1}
:where(#view-refs,.p4) .cmpd .cgr{display:grid;grid-template-columns:96px repeat(6,minmax(0,1fr));gap:var(--s-3);align-items:center;padding:var(--s-4) var(--s-6) 0}
:where(#view-refs,.p4) .cmpd .cgr .gh{color:var(--text-2);font-size:var(--fs-1);line-height:16px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(#view-refs,.p4) .cmpd .cgr .vl b{display:block;font-size:var(--fs-3);line-height:20px;font-weight:600}
:where(#view-refs,.p4) .cmpd .cgr .vl small{display:block;color:var(--text-2);font-size:var(--fs-1);line-height:16px}
:where(#view-refs,.p4) .cmpd .cgr img{display:block;width:100%;aspect-ratio:418/564;border-radius:var(--r-2);object-fit:cover;box-shadow:0 0 0 1px var(--line)}
:where(#view-refs,.p4) .cmpd .cgr .miss{display:grid;place-items:center;aspect-ratio:418/564;border-radius:var(--r-2);background:var(--bg);box-shadow:var(--edge);color:var(--text-3);font-size:var(--fs-1);text-align:center;padding:var(--s-2)}
:where(#view-refs,.p4) .cmpd .ft{display:flex;justify-content:flex-end;gap:var(--s-2);padding:var(--s-5) var(--s-6) var(--s-6)}

/* ---------- read-only values (viewer): no chevrons, no field chrome ---------- */
:where(#view-refs,.p4) .ro{display:flex;align-items:center;gap:var(--s-2);height:34px;color:var(--text);font-size:var(--fs-3)}
:where(#view-refs,.p4) .ro small{color:var(--text-2);font-size:var(--fs-2)}
:where(#view-refs,.p4) .lockbar{display:flex;align-items:center;gap:var(--s-3);height:56px;padding:0 var(--s-5);border-radius:var(--r-4);border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:var(--fs-3)}
:where(#view-refs,.p4) .lockbar .i{width:16px;height:16px;color:var(--text-3)}
:where(#view-refs,.p4) .lockbar small{color:var(--text-2);font-size:var(--fs-2)}
:where(#view-refs,.p4) .arch-tone{filter:saturate(.55)}

/* ---------- additions for the frames ---------- */
:where(#view-refs,.p4) .cols.r4{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
:where(#view-refs,.p4) .stages li .pd{flex:none;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-strong)}
:where(#view-refs,.p4) .stages.plain li{color:var(--text-3)}
:where(#view-refs,.p4) .pic .lay{position:absolute;inset:0;width:100%;height:100%}
:where(#view-refs,.p4) .tcmp .pic.frameline::after{content:"";position:absolute;inset:6px;border-radius:var(--r-sm);box-shadow:inset 0 0 0 1.5px rgba(238,240,251,.55);pointer-events:none}
:where(#view-refs,.p4) .lk-head{display:flex;align-items:center;gap:var(--s-3)}
:where(#view-refs,.p4) .lk-head h3{margin:0;font-size:var(--fs-4);line-height:22px;font-weight:600}
:where(#view-refs,.p4) .lk-head .sp{flex:1}
:where(#view-refs,.p4) .rgrid.mt{margin-top:var(--s-4)}
:where(#view-refs,.p4) .cd.wish{margin-top:var(--s-6)}
:where(#view-refs,.p4) .cd.wish h3 + p{margin:var(--s-1) 0 0}
:where(#view-refs,.p4) .fsel img{width:18px;height:24px;border-radius:var(--r-xs);margin-left:-6px}
:where(#view-refs,.p4) .hz{width:400px;height:300px;border-radius:var(--r-2);overflow:hidden;box-shadow:0 0 0 1px var(--line),var(--shadow-2)}
:where(#view-refs,.p4) .hz img{display:block;width:100%;height:100%;object-fit:cover}
:where(#view-refs,.p4) .made.arch-tone img{filter:saturate(.55)}
/* the state sheets (full page): one card per state, caption on top */
html:has(body.sheet){background:var(--bg-deep)}
body.sheet{height:auto;min-height:100dvh;overflow:visible;background:var(--bg-deep)}
:where(#view-refs,.p4) .sheet-main{padding:var(--s-8) var(--s-9) 64px}
:where(#view-refs,.p4) .sheet-main > h1{margin:0;font:300 var(--fs-7)/40px var(--mono);letter-spacing:-.04em}
:where(#view-refs,.p4) .sheet-main > p{margin:var(--s-2) 0 0;color:var(--text-2);font-size:var(--fs-3);line-height:20px}
:where(#view-refs,.p4) .sgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-7) var(--s-6);margin-top:var(--s-7)}
:where(#view-refs,.p4) .sgrid.one{grid-template-columns:minmax(0,1fr)}
:where(#view-refs,.p4) .sgrid h2{grid-column:1/-1;margin:var(--s-4) 0 -8px;font-size:var(--fs-4);line-height:22px;font-weight:600}
:where(#view-refs,.p4) .scap{display:flex;align-items:center;gap:var(--s-2);margin:0 0 var(--s-2);color:var(--text-2);font-size:var(--fs-2);line-height:18px;font-weight:500}
:where(#view-refs,.p4) .scap b{color:var(--text);font-weight:600}
:where(#view-refs,.p4) .mw{display:flex;flex-direction:column}:where(#view-refs,.p4) .mw.nr{grid-column-start:1}
:where(#view-refs,.p4) .mini{flex:1;justify-content:center;align-items:center;padding:var(--s-6) var(--s-5);text-align:center}
:where(#view-refs,.p4) .mini .wait1{display:grid;justify-items:center;gap:var(--s-3)}
:where(#view-refs,.p4) .mini .wait1 h3{margin:0;font-size:var(--fs-4);line-height:22px;font-weight:600}
:where(#view-refs,.p4) .mini .wait1 p{margin:0;max-width:36ch;color:var(--text-2);font-size:var(--fs-3);line-height:20px}
:where(#view-refs,.p4) .mini .st-acts .btn, :where(#view-refs,.p4) .mini .wait1 .btn{margin-top:var(--s-1)}
:where(#view-refs,.p4) .mc{container-type:inline-size}
:where(#view-refs,.p4) .fopt h3{margin:0;font-size:var(--fs-4);line-height:22px;font-weight:600}
:where(#view-refs,.p4) .fopt .meta{margin:var(--s-1) 0 0;color:var(--text-2);font-size:var(--fs-3);line-height:20px}
:where(#view-refs,.p4) .cd.stc .st, :where(#view-refs,.p4) .cd.center .st{margin:0 auto}
:where(#view-refs,.p4) .needs{display:grid;gap:var(--s-1);margin:var(--s-3) 0 0;padding:0;list-style:none}
:where(#view-refs,.p4) .needs li{display:flex;align-items:center;gap:10px;min-height:28px;color:var(--text);font-size:var(--fs-3);line-height:20px}
:where(#view-refs,.p4) .needs li .i{width:16px;height:16px;color:var(--green);flex:none}
:where(#view-refs,.p4) .lc-sec{margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--line)}
:where(#view-refs,.p4) .lc-sec h4{margin:0;font-size:var(--fs-3);line-height:20px;font-weight:600}
:where(#view-refs,.p4) .mc.wide{aspect-ratio:512/112}
:where(#view-refs,.p4) .mc.wide .tt{top:10%;bottom:10%;font-size:6cqw !important}
/* short windows (P1 r2: nothing clips at 1280x680): a stop panel starts at the top of its card instead of the centre */
@media (max-height:720px){:where(#view-refs,.p4) .cd.stc{justify-content:flex-start}}

/* ===================== fix round 1 (02.11) ===================== */
/* ---------- M-01: the phase band, fixed height in all nine test phases (replaces the step head on ④) ---------- */
:root{--band:156px}
@media (min-height:861px){:root{--band:216px}}
:where(#view-refs,.p4) .pband{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s-6);height:var(--band);padding:var(--s-3) var(--s-5) var(--s-3) var(--s-3);overflow:hidden}
:where(#view-refs,.p4) .pband .ba{position:relative;width:300px;height:130px;overflow:hidden;border-radius:var(--r-3)}   /* band 156: art box 300 x 130 */
:where(#view-refs,.p4) .pband .ba .n04{zoom:.5417;border-radius:0}   /* 560 x 240 drawn at 303 x 130, the box clips 3 px */
:where(#view-refs,.p4) .pband .ba.sa{display:grid;place-items:center;width:120px;background:none;border-radius:0}
:where(#view-refs,.p4) .pband .ba.sa .art{width:120px;margin:0}
@media (min-height:861px){:where(#view-refs,.p4) .pband .ba{width:440px;height:190px}:where(#view-refs,.p4) .pband .ba .n04{zoom:.7917}:where(#view-refs,.p4) .pband .ba.sa{width:160px}:where(#view-refs,.p4) .pband .ba.sa .art{width:160px}}   /* band 216: 440 x 190; state art 160 */
:where(#view-refs,.p4) .pband .bm{display:grid;align-content:center;gap:var(--s-1);min-width:0}
:where(#view-refs,.p4) .pband h3{display:flex;align-items:center;gap:var(--s-2);margin:0;font-size:var(--fs-4);line-height:22px;font-weight:600}
:where(#view-refs,.p4) .pband .ln{margin:0;color:var(--text-2);font-size:var(--fs-3);line-height:20px;font-variant-numeric:tabular-nums}
:where(#view-refs,.p4) .pband .ln b{color:var(--text);font-weight:500}
:where(#view-refs,.p4) .pband .bs{display:grid;justify-items:end;align-content:center;gap:var(--s-2)}
:where(#view-refs,.p4) .pband .bs .acts{display:flex;gap:var(--s-2)}
:where(#view-refs,.p4) .pband .txtbtn{margin:0 calc(-1 * var(--s-4)) 0 0}
:where(#view-refs,.p4) .pband .price{display:inline-flex;align-items:center;gap:var(--s-2);color:var(--text-2);font-size:var(--fs-2);line-height:18px;white-space:nowrap}
:where(#view-refs,.p4) .pband .price b{color:var(--text);font:500 var(--fs-3)/1 var(--mono);letter-spacing:-.02em}
:where(#view-refs,.p4) .pband .price .i{width:16px;height:16px;color:var(--amber)}
:where(#view-refs,.p4) .pband .bar6{margin-top:var(--s-2)}
:where(#view-refs,.p4) .bflow{display:grid;gap:var(--s-1);margin:var(--s-2) 0 0;padding:0;list-style:none}
:where(#view-refs,.p4) .bflow li{display:flex;align-items:center;gap:10px;height:24px;color:var(--text);font-size:var(--fs-3);line-height:20px;white-space:nowrap}
:where(#view-refs,.p4) .bflow li .k{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:var(--raised);box-shadow:var(--edge);color:var(--text-2);font-size:var(--fs-0);line-height:1;font-weight:600}
:where(#view-refs,.p4) .bflow li small{color:var(--text-3);font-size:var(--fs-2);line-height:18px}
/* results phases: no art box; the left says what to do, the right holds what the test learned (real content, never a gap) */
:where(#view-refs,.p4) .pband.res{grid-template-columns:288px minmax(0,1fr);gap:0;padding:var(--s-3) var(--s-5)}
:where(#view-refs,.p4) .pband.res .bm{padding-right:var(--s-6)}
:where(#view-refs,.p4) .pband.res .bs{justify-items:stretch;align-self:stretch;padding-left:var(--s-6);border-left:1px solid var(--line)}
:where(#view-refs,.p4) .bnh{display:flex;align-items:baseline;gap:var(--s-2);height:20px}
:where(#view-refs,.p4) .bnh b{font-size:var(--fs-3);line-height:20px;font-weight:600}
:where(#view-refs,.p4) .bnh small{color:var(--text-2);font-size:var(--fs-2);line-height:18px}
:where(#view-refs,.p4) .bnh .extl{margin:0 0 0 auto}
:where(#view-refs,.p4) .bnl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-1) var(--s-6);margin:var(--s-2) 0 0;padding:0;list-style:none}
:where(#view-refs,.p4) .bnl li{display:flex;align-items:center;gap:var(--s-2);min-width:0;height:24px;color:var(--text);font-size:var(--fs-2);line-height:18px;white-space:nowrap}
:where(#view-refs,.p4) .bnl li .i{flex:none;width:14px;height:14px;color:var(--accent)}
:where(#view-refs,.p4) .bnl li span{overflow:hidden;text-overflow:ellipsis}
:where(#view-refs,.p4) .test-sheet .pband{margin-top:0}

/* ---------- M-06: a game-style brand's covers are the games' own catalogue pictures ---------- */
:where(#view-refs,.p4) .gcov{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4);margin-top:var(--s-3)}
:where(#view-refs,.p4) .gcov figure{display:grid;gap:var(--s-2);margin:0;min-width:0}
:where(#view-refs,.p4) .gcov img{display:block;width:100%;aspect-ratio:4/3;border-radius:var(--r-3);object-fit:cover;box-shadow:0 0 0 1px var(--line)}
:where(#view-refs,.p4) .gcov figcaption{display:grid;min-width:0}
:where(#view-refs,.p4) .gcov figcaption b{font-size:var(--fs-2);line-height:18px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(#view-refs,.p4) .gcov figcaption small{color:var(--text-2);font-size:var(--fs-2);line-height:18px}   /* 13, not 12: the page stays under the 30 % small-text line (DESIGN §10) */

/* ---------- M-07: the success hero carries the 6 approved test covers ---------- */
:where(#view-refs,.p4) .hcov{display:flex;justify-content:center;gap:var(--s-2);margin:var(--s-4) 0 var(--s-1)}
:where(#view-refs,.p4) .hcov img{width:64px;height:86px;border-radius:var(--r-sm);object-fit:cover;box-shadow:0 0 0 1px var(--line),var(--shadow-1)}
:where(#view-refs,.p4) .cd.hero{min-height:480px;padding:var(--s-6)}   /* M-07: the hero ends above the toast at 1280x800 (state 274-709, toast from 732) */

/* ---------- M-09: versions dialog ---------- */
:where(#view-refs,.p4) .vdlg{position:fixed;z-index:var(--z-dialog);left:50%;top:50%;translate:-50% -50%;width:min(560px,100vw - 32px);border:1px solid var(--line-strong);border-radius:var(--r-5);background:var(--surface);box-shadow:inset 0 1px 0 var(--line-hi),var(--shadow-3)}
:where(#view-refs,.p4) .vdlg .chd{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-5) var(--s-5) 0 var(--s-6)}
:where(#view-refs,.p4) .vdlg .chd h2{margin:0;font-size:var(--fs-4);line-height:22px;font-weight:600}
:where(#view-refs,.p4) .vdlg .chd small{color:var(--text-2);font-size:var(--fs-2)}
:where(#view-refs,.p4) .vdlg .chd .sp{flex:1}
:where(#view-refs,.p4) .vdlg .vers{max-height:calc(100dvh - 240px);overflow:auto;margin:var(--s-3) 0 0;padding:0 var(--s-4)}
:where(#view-refs,.p4) .vdlg .ft{display:flex;justify-content:flex-end;gap:var(--s-2);padding:var(--s-4) var(--s-6) var(--s-5);border-top:1px solid var(--line);margin-top:var(--s-3)}


/* ---------- ④ in the app: sticky bar, real controls in the slots (build, fork C) ---------- */
:where(#view-refs,.p4) .apv.dbar{position:static;left:auto;right:auto;bottom:auto;margin:0;padding:0 10px 0 var(--s-5);display:flex;justify-items:normal}
:where(#view-refs,.p4) .apv.dbar.warn{background:var(--glass-strong);border-color:color-mix(in oklab,var(--amber) 45%,var(--line-strong))}
:where(#view-refs,.p4) .dbar .vd{flex-wrap:nowrap;min-width:0}
:where(#view-refs,.p4) .dbar .vd small{font-weight:400}
:where(#view-refs,.p4) .dbar .ck input{position:absolute;opacity:0;width:18px;height:18px;margin:0;cursor:pointer}
:where(#view-refs,.p4) .dbar .ck{position:relative;cursor:pointer}
:where(#view-refs,.p4) .dbar .ck .bx{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-strong);color:transparent}
:where(#view-refs,.p4) .dbar .ck input:checked + .bx{background:var(--accent);box-shadow:none;color:var(--on-primary)}
:where(#view-refs,.p4) .dbar .ck input:focus-visible + .bx{outline:2px solid var(--accent);outline-offset:2px}
:where(#view-refs,.p4) .dbar .btn[disabled]{opacity:.45}
:where(#view-refs,.p4) .sl{position:relative}
:where(#view-refs,.p4) .sl .mk2 > *{font:inherit}
:where(#view-refs,.p4) .sl .mk2 > span.ro{grid-column:1/-1;background:transparent;border-color:transparent;cursor:default}   /* FA-905 (DR-FIX M3): a viewer's read-only verdict is one plain tag; a tester's own selected Good keeps the pill of line 66 */
:where(#view-refs,.p4) .sl .mk2 > span.ro.none{color:var(--text-3)}
:where(#view-refs,.p4) .sl .mk2 button{background:transparent;cursor:pointer;appearance:none;-webkit-appearance:none;padding:0}
:where(#view-refs,.p4) .sl .mk2 button.tc-mark.open{color:var(--text);background:var(--hover)}
:where(#view-refs,.p4) .sl .tc-note.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:where(#view-refs,.p4) .sl .mk-pop{position:absolute;left:0;top:calc(100% - 40px);z-index:var(--z-pop)}
:where(#view-refs,.p4) .sl.tc .nm{padding:0}
:where(#view-refs,.p4) .tt-endhost{position:sticky;bottom:16px;z-index:5;margin-top:var(--s-4)}   /* the host sticks, so #approve stays a real box for scrollToApprove */
:where(#view-refs,.p4) .tt-endhost:empty{display:none}
:where(#view-refs,.p4) .vscrim{position:fixed;inset:0;z-index:var(--z-scrim-2);background:rgba(4,6,16,.62)}
:where(#view-refs,.p4) .vmenu{right:0}
:where(#view-refs,.p4) .vmenu .mi{display:flex;align-items:center;gap:10px;width:100%;height:36px;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}
:where(#view-refs,.p4) .vmenu .mi:hover, :where(#view-refs,.p4) .vmenu .mi:focus-visible{background:var(--raised)}
:where(#view-refs,.p4) .vmenu .mi .i{width:16px;height:16px;color:var(--text-2)}
:where(#view-refs,.p4) .vers button.vmore{border:0;background:none;padding:0;cursor:pointer}
:where(#view-refs,.p4) .ln-groups{margin-top:var(--s-3);display:grid;gap:var(--s-3)}
:where(#view-refs,.p4) .tt:has(.apv[data-state=done]) .tt-body{display:none}   /* the success hero replaces the band and the slots */
:where(#view-refs,.p4) .cf{position:fixed;z-index:var(--z-dialog);left:50%;top:50%;translate:-50% -50%;width:min(480px,100vw - 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)}
:where(#view-refs,.p4) .cf-body{padding:var(--s-5) var(--s-6) var(--s-1)}
:where(#view-refs,.p4) .cf-body h2{margin:0;font-size:var(--fs-4b);line-height:24px;font-weight:600}
:where(#view-refs,.p4) .cf-body .cons{margin:var(--s-3) 0 0;padding:0;list-style:none;display:grid;gap:var(--s-2)}
:where(#view-refs,.p4) .cf-note{margin:var(--s-3) 0 0;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
:where(#view-refs,.p4) .cf-foot{display:flex;justify-content:flex-end;gap:var(--s-2);padding:var(--s-5) var(--s-6) var(--s-6)}
:where(#view-refs,.p4) .vpair .ar .i{rotate:-90deg}
:where(#view-refs,.p4) .pband.tt-fail{display:grid;flex-direction:initial;align-items:center;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s-6);max-width:none;width:auto;margin:0;padding:var(--s-3) var(--s-5) var(--s-3) var(--s-3);text-align:left}
:where(#view-refs,.p4) .pband.tt-fail b{display:inline;margin:0;font:inherit}
:where(#view-refs,.p4) .tt-body{gap:0}   /* band to slots is the slots' own 16 */
:where(#view-refs,.p4) .tt .sl .swp{right:auto;width:260px;top:calc(100% - 36px)}
:where(#view-refs,.p4) .tt .sl:nth-child(n+4) .swp{left:auto;right:0}
:where(#view-refs,.p4) .tt .pband{margin:0}   /* a global .res rule gave the results band a 6 px top margin */
:where(#view-refs,.p4) .vers li.hl{outline:2px solid var(--accent);outline-offset:-2px}
:where(#view-refs,.p4) .ln-teach{margin:0 0 var(--s-2);font-size:var(--fs-2);line-height:18px;color:var(--text-3)}
:where(#view-refs,.p4) .cd .ln-teach{padding:0;text-indent:0}
:where(#view-refs,.p4) .ln-redraw:not(:empty){margin-bottom:var(--s-6)}   /* the redraw line after Approve vN sits above «Made with vN» */
:where(#view-refs,.p4) .ln-redraw .st-prog{padding:var(--s-4) var(--s-5);border-radius:var(--r-4);background:var(--surface)}
:where(#view-refs,.p4) .pband.res.ok{color:var(--text)}   /* app.css .res.ok paints the whole band green; only the ready icon is green (frame test-all-good) */
:where(#view-refs,.p4) .pband.res.ok .bm h3 .i{color:var(--green)}
@media (max-height:860px){:where(#view-refs,.p4) .bnl:not(.all) li:nth-child(n+7){display:none}}   /* HANDOFF ④ results: 6 notes and «See all N» in the 156 band, all 8 in the 216 band */
@media (min-height:861px){:where(#view-refs,.p4) .pband .link.m8{display:none}}
:where(#view-refs,.p4) .sl .mk2 button.mk-good:hover,:where(#view-refs,.p4) .sl .mk2 button.mk-good:focus-visible{border-color:color-mix(in oklab,var(--green) 55%,transparent);color:var(--green)}

/* ====== STY-A: the trained Style page (sty/frames/sty.css, ported; scope #view-refs .sty) ====== */
/* STY-1: the trained Style page (frames), round 1. Tokens from tokens.css only; geometry from CF-DS (card 20 24 24 / --r-5, card-h, badge, .btn.red-o, .x-btn, modal 3.12).
   Scope: #view-refs .sty. Shared parts reused as they are: .st-head, .h1x, .vchip, .btn, .stp/.st-step, .made, .gcov, .lockbar, .vers, .dlg, .learn, .fold,
   .ln-* (notes fold, redraw line), .st-prog, .rf-grid/.rf-card/.rf-ib (refs.js), .rf-fig-* / .rf-canvas / .rf-sq (Figma section), .alert (CFAlert), [data-tip] / .tip.
   DS-1 values copied here until DS-APPLY lands them in app.css: badge, card-h, .btn.red-o, .x-btn, modal md, scrim (STY-COMPONENTS «DS-1 and DS-APPLY»). */

/* ---------- badges per DR-66 (S 20 / M 24 / L 28; L is the head .vchip) and CF-DS 3.4 card header ---------- */
:where(#view-refs,.p4) .sty .badge{display:inline-flex;align-items:center;gap:6px;flex:none;height:24px;padding:0 var(--s-2);border-radius:var(--pill);background:var(--raised);box-shadow:var(--edge);color:var(--text-2);font:500 var(--fs-1)/24px var(--font);white-space:nowrap}   /* M 24: card headers */
:where(#view-refs,.p4) .sty .badge.sm{height:20px;min-width:20px;gap:var(--s-1);padding:0 6px;font:500 var(--fs-1)/20px var(--font)}   /* S 20: counters, row badges */
:where(#view-refs,.p4) .sty .badge.num{justify-content:center;font-weight:600;font-variant-numeric:tabular-nums}
:where(#view-refs,.p4) .sty .badge.green{background:var(--green-soft);box-shadow:none;color:var(--green)}
:where(#view-refs,.p4) .sty .badge.amber{background:var(--amber-soft);box-shadow:none;color:var(--amber)}
:where(#view-refs,.p4) .sty .badge.accent{background:var(--accent-soft);box-shadow:none;color:var(--accent)}
:where(#view-refs,.p4) .sty .badge .d{width:6px;height:6px;border-radius:50%;background:currentColor}
:where(#view-refs,.p4) .sty .card-h{display:flex;align-items:center;gap:10px;min-height:28px;margin:0 0 var(--s-4)}
:where(#view-refs,.p4) .sty .card-h h3{margin:0;font-size:var(--fs-4);line-height:24px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
:where(#view-refs,.p4) .sty .card-h .sp{flex:1}
:where(#view-refs,.p4) .sty .card-h .link{margin-right:-6px}
:where(#view-refs,.p4) .sty .info{color:var(--text-3)}
:where(#view-refs,.p4) .sty .info:hover{color:var(--text)}

/* ---------- CF-DS 2.1 destructive secondary (DR-59), scoped here until DS-1 lands it ---------- */
:where(#view-refs,.p4) .sty .btn.red-o{background:var(--destr-bg,var(--red-soft));border-color:transparent;color:var(--destr-fg);box-shadow:none}   /* DR-64: no visible rim; the fill carries the tone */
:where(#view-refs,.p4) .sty .btn.red-o:hover{background:var(--red-soft);border-color:transparent;color:#ff8d92}
:where(#view-refs,.p4) .sty .btn.red-o:active{background:var(--red-soft-2);transform:scale(var(--m-press))}

/* ---------- DR-64 (15:20) button scale: S 36 / M 44 / L 52, pills, no visible rim, links without underline.
   Frame stand-in until DS-1 maps the scale: every text button on this page is S 36 (today's md 34 -> S; DS-1's lg 44 would be M). ---------- */
:where(#view-refs,.p4) .sty .btn{height:var(--ctl-s);padding:0 var(--s-4);border-color:transparent;border-radius:var(--pill)}
:where(#view-refs,.p4) .sty .btn:hover{border-color:transparent}
:where(#view-refs,.p4) .sty .btn .i{width:16px;height:16px}
/* CFAlert's one action stays a text action (DR-35 addition, CF-DS .al-act): 14/20 500 in the tone colour, no underline, hover by colour; today's alert geometry (54) until DS-1's alert lands */
:where(#view-refs,.p4) .sty .alert .al-act{color:var(--fg);font-weight:500;text-decoration:none;transition:color var(--dur-2) var(--ease),scale var(--dur-1) var(--ease)}
:where(#view-refs,.p4) .sty .alert .al-act:hover{color:var(--text);text-decoration:none}
:where(#view-refs,.p4) .sty .link,:where(#view-refs,.p4) .sty .link:hover{text-decoration:none}
:where(#view-refs,.p4) .sty .ln-link:hover{text-decoration:none;color:var(--accent-hover)}

/* ---------- the page ---------- */
:where(#view-refs,.p4) .sty .cd{padding:var(--s-5) var(--s-6) var(--s-6);border-radius:var(--r-5)}
:where(#view-refs,.p4) .sty .stp.is-static{margin-top:var(--s-4)}
:where(#view-refs,.p4) .sty .stp.is-static .st-step{cursor:default}
:where(#view-refs,.p4) .sty .stp.is-static .st-step:hover{background:none}
:where(#view-refs,.p4) .sty .stp.is-static small{color:var(--text-2)}
:where(#view-refs,.p4) .sty .stp.is-static small:has(.rt){display:flex;min-width:0}   /* R2 minor 3: the name is cut, the ratio stays */
:where(#view-refs,.p4) .sty .stp.is-static small .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(#view-refs,.p4) .sty .stp.is-static small .rt{flex:none;white-space:nowrap}
:where(#view-refs,.p4) .sty > .ln-redraw{margin:var(--s-4) 0 0}
:where(#view-refs,.p4) .sty > .alert{margin-top:var(--s-4)}
:where(#view-refs,.p4) .sty > .ln-redraw + .alert{margin-top:var(--s-3)}

/* A. what the style looks like (today's .made) */
:where(#view-refs,.p4) .sty-look{margin-top:var(--s-7)}

/* B and C. trained on, learned / versions */
:where(#view-refs,.p4) .sty-grid{margin-top:var(--s-7);align-items:start}
:where(#view-refs,.p4) .sty-grid.cols.l8{grid-template-columns:minmax(0,1fr) 360px;gap:var(--s-6)}   /* DR-149 / DR-50: the head's content is 1112 at 1440: 728 + 360, gap 24 */
:where(#view-refs,.p4) .sty-col{display:grid;gap:var(--s-6);min-width:0}
:where(#view-refs,.p4) .sty-side{position:sticky;top:24px;display:grid;gap:var(--s-6);min-width:0}

/* References: refs.js .rf-card read-only, 6 across. In a card gap 12; at cover size (Q2-A) gap 16 like .made */
:where(#view-refs,.p4) .sty .rf-grid.c6{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-3)}
:where(#view-refs,.p4) .sty .rf-grid.c6.big{gap:var(--s-4);margin-top:var(--s-3)}
:where(#view-refs,.p4) .sty .rf-card .rf-noteb{top:8px;right:8px;bottom:auto}   /* read-only card: no ⋯ menu, so the note takes the top-right inset, off the art's title band */
:where(#view-refs,.p4) .sty .rf-card:hover:has(.rf-open:active){transform:translateY(-2px) scale(.98)}
:where(#view-refs,.p4) .sty-refs{position:relative}
:where(#view-refs,.p4) .sty-refs .fold{margin-top:var(--s-3)}
:where(#view-refs,.p4) .sty-wish{display:grid;gap:var(--s-1);margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--line)}
:where(#view-refs,.p4) .sty-wish .lbl{color:var(--text-3);font-size:var(--fs-1);line-height:16px;font-weight:600}
:where(#view-refs,.p4) .sty-wish p{margin:0;color:var(--text);font-size:var(--fs-3);line-height:20px;max-width:72ch}
:where(#view-refs,.p4) .sty-wish small{color:var(--text-3);font-size:var(--fs-1);line-height:16px}

/* Figma section (refs.js parts) inside a card */
:where(#view-refs,.p4) .sty-fig .rf-fig-head{margin:0 0 var(--s-4)}
:where(#view-refs,.p4) .sty-fig .rf-fig-t{align-items:center}
:where(#view-refs,.p4) .sty-fig .rf-canvas{height:400px}
/* What it learned */
:where(#view-refs,.p4) .sty-notes .learn{margin:0}
:where(#view-refs,.p4) .sty-notes .fold{margin-top:var(--s-3)}
:where(#view-refs,.p4) .sty-notes .ln-groups{margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--line)}
:where(#view-refs,.p4) .sty-notes .ln-filter{margin:0}
:where(#view-refs,.p4) .sty-notes .ln-find{width:100%;max-width:320px}

/* Versions, on the page and in All versions: three lines a row (name and state · when and how many · what changed) */
:where(#view-refs,.p4) .sty-vers .vers{margin:0}
:where(#view-refs,.p4) .sty-vers .vers li, :where(#view-refs,.p4).sty-vdlg .vers li{height:auto;min-height:52px;padding:10px var(--s-1) 10px var(--s-3);align-items:start}
:where(#view-refs,.p4) .sty-vers .vers li > .si, :where(#view-refs,.p4).sty-vdlg .vers li > .si{margin-top:2px}
:where(#view-refs,.p4) .sty-vers .vers li .nm, :where(#view-refs,.p4).sty-vdlg .vers li .nm{display:flex;align-items:center;gap:var(--s-2);min-width:0}
:where(#view-refs,.p4) .sty-vers .vers li .nm b, :where(#view-refs,.p4).sty-vdlg .vers li .nm b{display:inline}
:where(#view-refs,.p4) .sty-vers .vers li .chg, :where(#view-refs,.p4).sty-vdlg .vers li .chg{display:block;margin-top:2px;color:var(--text-3);font-size:var(--fs-1);line-height:16px;white-space:normal;text-wrap:balance;overflow-wrap:anywhere}   /* R2 minor 2: parts glued with nbsp, lines balanced, an overlong name still breaks */
:where(#view-refs,.p4) .sty-vers .vers li .vmore, :where(#view-refs,.p4).sty-vdlg .vers li .vmore{margin-top:-4px}
:where(#view-refs,.p4) .sty-vers .vers li .chg{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}   /* side card: at most 2 lines, full text in data-tip; the dialog shows all */
:where(#view-refs,.p4) .sty-vers .vers li.draft{cursor:pointer;box-shadow:inset 0 0 0 1px var(--accent-soft-2);background:var(--accent-soft);transition:box-shadow var(--dur-2) var(--ease),background-color var(--dur-1) var(--ease)}
:where(#view-refs,.p4) .sty-vers .vers li.draft:hover{box-shadow:var(--edge-accent)}
:where(#view-refs,.p4) .sty-vers .vers li.draft:active{background:var(--hover)}
:where(#view-refs,.p4) .sty-vers .vers li.draft small{white-space:normal;text-wrap:balance;overflow-wrap:anywhere}
:where(#view-refs,.p4) .sty-vers .vers li.draft .go{display:grid;place-items:center;width:32px;height:32px;color:var(--accent)}
:where(#view-refs,.p4) .sty-vers .vers li.draft .go .i{width:16px;height:16px;rotate:-90deg}
:where(#view-refs,.p4) .sty-vers .vers li.all{min-height:44px;align-items:center}
:where(#view-refs,.p4) .sty-vers .vers li.all > .ic{align-self:center}
:where(#view-refs,.p4) .sty-vers .vers li.all small{color:var(--text-3)}

/* All versions: a native dialog.dlg (CF-DS 3.12 md) */
:where(#view-refs,.p4).sty-vdlg .m-head h2{margin:0;font-size:var(--fs-4);line-height:22px;font-weight:600}
:where(#view-refs,.p4).sty-vdlg .m-head small{color:var(--text-2);font-size:var(--fs-2);line-height:18px}
:where(#view-refs,.p4).sty-vdlg .m-head .sp{flex:1}
:where(#view-refs,.p4).sty-vdlg .vers{max-height:none;overflow:visible;margin:0;padding:0}
:where(#view-refs,.p4).sty-vdlg{position:fixed;width:min(560px,calc(100vw - 32px));max-height:min(780px,calc(100dvh - 32px))}
:where(#view-refs,.p4).sty-vdlg[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
:where(#view-refs,.p4).sty-vdlg .dlg-body{overflow:auto;min-height:0}

/* 1280 break check: the side column keeps 320 px, the grids shrink */
@media (max-width:1359px){:where(#view-refs,.p4) .sty-grid.cols.l8{grid-template-columns:minmax(0,1fr) 320px}}

/* reduced motion: opacity only */
@media (prefers-reduced-motion:reduce){:where(#view-refs,.p4) .sty .rf-card,:where(#view-refs,.p4) .sty .rf-card:hover,:where(#view-refs,.p4) .sty .rf-card:hover:has(.rf-open:active),:where(#view-refs,.p4) .sty .btn.red-o:active,:where(#view-refs,.p4) .x-btn:active{transform:none}}

/* the head of the trained page: S 36 buttons (the head sits above .sty in the shell) */
:where(#view-refs,.p4)#view-refs .st:has(.sty) .st-head .btn{height:var(--ctl-s);padding:0 var(--s-4);border-color:transparent;border-radius:var(--pill)}
:where(#view-refs,.p4)#view-refs .st:has(.sty) .st-head .btn .i{width:16px;height:16px}
:where(#view-refs,.p4)#view-refs .st:has(.sty) .st-head .btn.red-o{background:var(--destr-bg,var(--red-soft));color:var(--destr-fg);box-shadow:none}
:where(#view-refs,.p4)#view-refs .st:has(.sty) .st-head .btn.red-o:hover{background:var(--red-soft);color:#ff8d92}
:where(#view-refs,.p4)#view-refs .st:has(.sty) .st-head .btn.red-o:active{background:var(--red-soft-2)}
/* read-only large view of a reference (dialog.rf-ro): refs.js's #rf-lb geometry without the editor */
:where(#view-refs,.p4).rf-ro{width:min(1280px,calc(100vw - 32px));height:min(900px,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)}
:where(#view-refs,.p4).rf-ro[open]{display:grid;grid-template-columns:minmax(0,1fr) 360px}
:where(#view-refs,.p4).rf-ro .rf-ta[readonly]{color:var(--text-2);border-color:var(--line);min-height:128px;max-height:50vh}