/* P4 (HANDOFF /rework/P4): ported from the frames kit, see p4.css for the shared base. */
/* ---------- ① Template: the link card ---------- */
:where(#view-refs,.p4) .tlink{display:flex;gap:var(--s-2);margin-top:var(--s-5)}
:where(#view-refs,.p4) .inp{display:flex;align-items:center;gap:var(--s-2);flex:1;min-width:0;height:44px;padding:0 14px;border-radius:var(--r-3);border:1px solid var(--line-strong);background:var(--bg);color:var(--text-3);font-size:var(--fs-3);line-height:20px}
:where(#view-refs,.p4) .inp .i{width:16px;height:16px;flex:none;color:var(--text-3)}
:where(#view-refs,.p4) .inp.set{color:var(--text)}
:where(#view-refs,.p4) .inp.err{border-color:color-mix(in oklab,var(--red) 70%,transparent)}
:where(#view-refs,.p4) .inp .v{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
:where(#view-refs,.p4) .tlink .btn{height:var(--ctl-m);padding:0 var(--s-5);font-size:var(--fs-3)}
:where(#view-refs,.p4) .ferr{display:flex;align-items:center;gap:6px;margin:var(--s-2) 0 0;color:var(--red);font-size:var(--fs-2);line-height:18px}
:where(#view-refs,.p4) .ferr .i{width:16px;height:16px}
:where(#view-refs,.p4) .orrow{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-4);color:var(--text-2);font-size:var(--fs-2);line-height:18px}
:where(#view-refs,.p4) .howl{display:grid;gap:var(--s-2);margin:var(--s-6) 0 0;padding:var(--s-4) 0 0;border-top:1px solid var(--line);list-style:none;counter-reset:hl}
:where(#view-refs,.p4) .howl h4{margin:0 0 var(--s-1);font-size:var(--fs-3);line-height:20px;font-weight:600}
:where(#view-refs,.p4) .howl li{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:var(--s-3);min-height:44px;color:var(--text);font-size:var(--fs-3);line-height:20px}
:where(#view-refs,.p4) .howl li small{display:block;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
:where(#view-refs,.p4) .howl .k{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-2);background:var(--raised);box-shadow:var(--edge);color:var(--accent)}
:where(#view-refs,.p4) .howl .k .i{width:16px;height:16px}

/* ---------- N-03: the real template exploded into 4 floating layers over its generated floor ---------- */
:where(#view-refs,.p4) .n03{--w:300px;--h:400px;--lw:150px;--g:46px;--top:47%;--left:50%;position:relative;flex:none;width:var(--w);height:var(--h);overflow:hidden;border-radius:var(--r-3);background:#060a1c center/cover no-repeat;box-shadow:var(--edge)}
:where(#view-refs,.p4) .n03.c34{background-image:image-set(url(assets/n03-bg-34-300.webp) 1x,url(assets/n03-bg-34-600.webp) 2x)}
:where(#view-refs,.p4) .n03.c43{--w:400px;--h:300px;--lw:128px;--g:38px;--top:50%;background-image:image-set(url(assets/n03-bg-43-400.webp) 1x,url(assets/n03-bg-43-800.webp) 2x)}
:where(#view-refs,.p4) .n03.tags{--left:36%}
:where(#view-refs,.p4) .n03 .stack{position:absolute;left:var(--left);top:var(--top);width:0;height:0;perspective:1200px}
:where(#view-refs,.p4) .n03 .ly{position:absolute;width:var(--lw);height:calc(var(--lw) * 564 / 418);margin:calc(var(--lw) * -282 / 418) 0 0 calc(var(--lw) * -.5);border-radius:var(--r-2);
  transform:translateY(calc(var(--k) * var(--g))) rotateX(56deg) rotateZ(-38deg);transform-style:preserve-3d;transition:opacity var(--dur-4) var(--ease),filter var(--dur-4);
  background:center/100% 100% no-repeat;box-shadow:inset 0 0 0 1px rgba(214,222,255,.28),var(--shadow-2)}
:where(#view-refs,.p4) .n03 .ly.glass{background-color:rgba(20,26,58,.28)}
:where(#view-refs,.p4) .n03 .ly.off{opacity:.35}
:where(#view-refs,.p4) .n03 .ly.hi{box-shadow:inset 0 0 0 2px var(--accent),0 0 0 1px var(--accent-soft-2),0 0 28px 2px var(--accent-line)}
:where(#view-refs,.p4) .n03 .tag{position:absolute;left:calc(var(--left) + var(--lw) * .86);top:calc(var(--top) + var(--k) * var(--g) - 12px);display:inline-flex;align-items:center;gap:6px;height:var(--ctl-xs);padding:0 10px;border-radius:var(--pill);background:var(--on-image-2);border:1px solid var(--line-strong);color:var(--text-2);font-size:var(--fs-1);line-height:16px;font-weight:500;white-space:nowrap;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
:where(#view-refs,.p4) .n03 .tag.hi{color:var(--text);border-color:var(--accent)}
:where(#view-refs,.p4) .n03.dim{filter:brightness(.6) saturate(.7)}
:where(#view-refs,.p4) .n03.dim .tag{opacity:.7}
@keyframes n03-up{0%,100%{translate:0 0}50%{translate:0 -4px}}
:where(#view-refs,.p4) .n03.float .ly{animation:n03-up 4.8s ease-in-out infinite}
:where(#view-refs,.p4) .n03.float .ly:nth-child(2){animation-delay:-1.2s}:where(#view-refs,.p4) .n03.float .ly:nth-child(3){animation-delay:-2.4s}:where(#view-refs,.p4) .n03.float .ly:nth-child(4){animation-delay:-3.6s}
@media (prefers-reduced-motion:reduce){:where(#view-refs,.p4) .n03.float .ly{animation:none}}
@media (max-width:1360px){:where(#view-refs,.p4) .expl .n03.c34{--h:308px;--lw:136px;--g:41px}}

/* the explainer card: N-03 3:4 + the parts as chips that light the layer (hover or the cycle) */
:where(#view-refs,.p4) .expl{align-items:stretch}
:where(#view-refs,.p4) .expl .n03{margin:var(--s-4) 0 0;flex:1 0 auto;width:100%;height:auto;min-height:300px}   /* fix 1b: the stage fills the card's free height, so the explainer ends level with the link card */
:where(#view-refs,.p4) .parts4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2);margin-top:var(--s-4)}
:where(#view-refs,.p4) .parts4 span{display:flex;align-items:center;gap:var(--s-2);height:36px;padding:0 10px 0 6px;border-radius:var(--r-2);border:1px solid var(--line);color:var(--text-2);font-size:var(--fs-2);line-height:18px;font-weight:500;cursor:pointer}
:where(#view-refs,.p4) .parts4 span img{width:18px;height:24px;border-radius:var(--r-xs);box-shadow:var(--edge)}
:where(#view-refs,.p4) .parts4 span.hi{border-color:var(--accent);background:color-mix(in oklab,var(--accent) 10%,transparent);color:var(--text)}
:where(#view-refs,.p4) .extl{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s-3);color:var(--accent);font-size:var(--fs-2);line-height:18px;font-weight:500;text-decoration:none}
:where(#view-refs,.p4) .extl .i{width:14px;height:14px}

/* ---------- ① Template: the wait panel (full width, N-03 4:3 + stages) ---------- */
:where(#view-refs,.p4) .wait{display:grid;grid-template-columns:400px minmax(0,1fr);gap:var(--s-7);align-items:center;padding:var(--s-5)}
:where(#view-refs,.p4) .wait h3{margin:0;font-size:var(--fs-4);line-height:22px;font-weight:600}
:where(#view-refs,.p4) .wait .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) .stages{display:grid;gap:var(--s-1);margin:var(--s-4) 0 0;padding:0;list-style:none}
:where(#view-refs,.p4) .stages li{display:flex;align-items:center;gap:var(--s-3);height:36px;padding:0 var(--s-3);border-radius:var(--r-2);color:var(--text-2);font-size:var(--fs-3);line-height:20px}
:where(#view-refs,.p4) .stages li.now{background:var(--raised);color:var(--text);box-shadow:var(--edge)}
:where(#view-refs,.p4) .stages li.done{color:var(--text)}
:where(#view-refs,.p4) .stages li .si{flex:none}
:where(#view-refs,.p4) .stages li .w{margin-left:auto;color:var(--text-3);font-size:var(--fs-2)}
:where(#view-refs,.p4) .txtbtn{margin-top:var(--s-4);margin-left:calc(-1 * var(--s-4))}   /* D4-4: .btn.ghost S; the optical pull-left now matches its 16 padding */

/* the panel for blocked and failed (R1 state inside the left card), and their extras */
:where(#view-refs,.p4) .cd.stc{justify-content:center;padding:var(--s-6)}
:where(#view-refs,.p4) .cd.stc.full{padding:var(--s-7)}
:where(#view-refs,.p4) .pick{display:grid;gap:var(--s-1);width:100%;max-width:400px;margin:var(--s-4) auto 0;padding:0;list-style:none;text-align:left}
:where(#view-refs,.p4) .pick li{display:flex;align-items:center;gap:var(--s-3);height:44px;padding:0 var(--s-3);border-radius:var(--r-2);border:1px solid var(--line);color:var(--text);font-size:var(--fs-3);line-height:20px}
:where(#view-refs,.p4) .pick li.on{border-color:var(--accent);background:color-mix(in oklab,var(--accent) 8%,transparent)}
:where(#view-refs,.p4) .pick li .rd{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-hover)}
:where(#view-refs,.p4) .pick li.on .rd{box-shadow:inset 0 0 0 5px var(--accent)}
:where(#view-refs,.p4) .pick li img{width:24px;height:32px;border-radius:var(--r-xs)}
:where(#view-refs,.p4) .pick li small{margin-left:auto;color:var(--text-3);font-size:var(--fs-2)}
:where(#view-refs,.p4) .valchip{display:inline-flex;align-items:center;gap:var(--s-2);height:var(--ctl-s);margin-top:var(--s-4);padding:0 6px 0 14px;border-radius:var(--pill);background:var(--bg);border:1px solid var(--line-strong);color:var(--text);font-size:var(--fs-3)}
:where(#view-refs,.p4) .valchip .ib{display:grid;place-items:center;width:28px;height:var(--ctl-xs);border-radius:50%;color:var(--text-2)}
:where(#view-refs,.p4) .valchip .ib .i{width:16px;height:16px}
:where(#view-refs,.p4) .shapes{display:flex;align-items:flex-end;justify-content:center;gap:var(--s-6);margin:var(--s-4) 0 0}
:where(#view-refs,.p4) .shapes figure{display:grid;justify-items:center;gap:var(--s-2);margin:0;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
:where(#view-refs,.p4) .shapes .sh{border-radius:var(--r-sm);border:2px solid var(--line-hover);background:rgb(var(--p-mist) / .03)}
:where(#view-refs,.p4) .shapes .sh.v{width:60px;height:80px}
:where(#view-refs,.p4) .shapes .sh.h{width:96px;height:72px}
:where(#view-refs,.p4) .shapes .bad .sh{border-color:var(--red);background:color-mix(in oklab,var(--red) 8%,transparent)}
:where(#view-refs,.p4) .shapes .bad{color:var(--red)}
:where(#view-refs,.p4) .shapes .ok .sh{border-color:var(--green)}

/* ---------- ① Template: render differs ---------- */
:where(#view-refs,.p4) .dec{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-4) var(--s-4) var(--s-4) var(--s-5);border-radius:var(--r-4);border:1px solid color-mix(in oklab,var(--amber) 40%,transparent);background:linear-gradient(90deg,color-mix(in oklab,var(--amber) 10%,transparent),transparent 60%),var(--surface)}
:where(#view-refs,.p4) .dec .si{flex:none}
:where(#view-refs,.p4) .dec .tx{flex:1;min-width:0}
:where(#view-refs,.p4) .dec h3{margin:0;font-size:var(--fs-4);line-height:22px;font-weight:600}
:where(#view-refs,.p4) .dec p{margin:2px 0 0;color:var(--text-2);font-size:var(--fs-3);line-height:20px}
:where(#view-refs,.p4) .tcmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4);margin-top:var(--s-4)}
:where(#view-refs,.p4) .tcmp.one{grid-template-columns:minmax(0,1fr)}
:where(#view-refs,.p4) .tcmp figure{display:grid;justify-items:center;gap:var(--s-3);margin:0;padding:var(--s-4);border-radius:var(--r-4);border:1px solid var(--line);background:var(--surface)}
:where(#view-refs,.p4) .tcmp figcaption{color:var(--text-2);font-size:var(--fs-2);line-height:18px}
:where(#view-refs,.p4) .tcmp .pic{position:relative;width:300px;height:400px;border-radius:var(--r-2);overflow:hidden;box-shadow:var(--edge)}
:where(#view-refs,.p4) .tcmp .pic img{display:block;width:100%;height:100%}
:where(#view-refs,.p4) .mk{position:absolute;border:2px solid var(--amber);border-radius:var(--r-sm)}
:where(#view-refs,.p4) .mk i{position:absolute;left:6px;top:6px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--amber);color:var(--on-amber);font-style:normal;font-size:var(--fs-1);font-weight:700;line-height:1}
:where(#view-refs,.p4) .tcmp .nopic{display:flex;align-items:center;gap:var(--s-2);color:var(--text-2);font-size:var(--fs-2)}

/* ---------- ① Template: ready ---------- */
:where(#view-refs,.p4) .rnd{display:flex;align-items:center;justify-content:center}
:where(#view-refs,.p4) .rnd .pic{position:relative;width:300px;height:400px;border-radius:var(--r-2);overflow:hidden;box-shadow:0 0 0 1px var(--line),var(--shadow-2)}
:where(#view-refs,.p4) .rnd .pic img{display:block;width:100%;height:100%}
:where(#view-refs,.p4) .prt{display:grid;gap:var(--s-1);margin:var(--s-3) 0 0;padding:0;list-style:none}
:where(#view-refs,.p4) .prt li{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:var(--s-3);height:44px;padding:0 var(--s-3) 0 var(--s-2);border-radius:var(--r-2)}
:where(#view-refs,.p4) .prt li:hover{background:var(--raised)}
:where(#view-refs,.p4) .prt li img{width:24px;height:32px;border-radius:var(--r-xs);box-shadow:var(--edge)}
:where(#view-refs,.p4) .prt li b{display:block;font-size:var(--fs-3);line-height:20px;font-weight:500}
:where(#view-refs,.p4) .prt li small{display:block;color:var(--text-2);font-size:var(--fs-2);line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(#view-refs,.p4) .prt + h4, :where(#view-refs,.p4) .cd h4{margin:var(--s-5) 0 0;font-size:var(--fs-3);line-height:20px;font-weight:600}
:where(#view-refs,.p4) .cd h4:first-of-type{margin-top:var(--s-4)}
:where(#view-refs,.p4) .cd .lc-sec h4, :where(#view-refs,.p4) .cd .howl h4{margin-top:0}   /* fix round 2 (R2-M4): the section heading sits 16 under its hairline (the section's padding), not 32 */
:where(#view-refs,.p4) .fold{display:flex;align-items:center;gap:var(--s-2);height:36px;margin-top:var(--s-2);padding:0 var(--s-2);border-radius:var(--r-2);color:var(--text-2);font-size:var(--fs-2);font-weight:500}
:where(#view-refs,.p4) .fold .i{width:14px;height:14px;rotate:-90deg}
:where(#view-refs,.p4) .note{display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-3);padding:10px var(--s-3);border-radius:var(--r-2);background:color-mix(in oklab,var(--amber) 10%,transparent);color:var(--text);font-size:var(--fs-2);line-height:18px}
:where(#view-refs,.p4) .note .i{width:16px;height:16px;color:var(--amber);flex:none}
:where(#view-refs,.p4) .note.q{background:var(--bg);color:var(--text-2)}
:where(#view-refs,.p4) .note.q .i{color:var(--text-3)}

/* ---------- M-05: template parts in two open groups; the viewer's meta line ---------- */
:where(#view-refs,.p4) .prt.r40 li{height:40px}
@media (max-height:860px){:where(#view-refs,.p4) .prt.r40{gap:2px}}   /* 1280x800: the two open groups fit without a 2 px page scroll */
:where(#view-refs,.p4) .metaln{display:flex;align-items:center;gap:var(--s-2);margin:var(--s-4) 0 0;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
:where(#view-refs,.p4) .metaln .i{width:16px;height:16px;color:var(--text-3)}


/* ---------- P4 fork A additions ---------- */
/* the two-column layout of the frames (.split) clashes with figma-file.css's .split Figma button (loaded lazily, wins on .btn): own name here */
:where(#view-refs,.p4) .cols{display:grid;gap:var(--s-6);align-items:stretch}
:where(#view-refs,.p4) .cols.l8{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
:where(#view-refs,.p4) .cols.r4{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
/* the real input inside the frame's .inp box */
:where(#view-refs,.p4) .inp input{all:unset;text-decoration:none;flex:1;min-width:0;height:100%;color:var(--text);font:inherit;text-overflow:ellipsis;cursor:text}
:where(#view-refs,.p4) .inp input::placeholder{color:var(--text-3)}
:where(#view-refs,.p4) .inp:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(120,140,255,.18)}
:where(#view-refs,.p4) .inp input:disabled{opacity:.6;cursor:not-allowed}
:where(#view-refs,.p4) .tp-lf{display:block}
:where(#view-refs,.p4) .tp-msg:empty{display:none}
:where(#view-refs,.p4) .tp-part{cursor:pointer}
:where(#view-refs,.p4) .tp-part[aria-pressed=true]{background:var(--raised);box-shadow:var(--edge-strong)}
:where(#view-refs,.p4) .tp-part:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
:where(#view-refs,.p4) .tp-part .wd{width:8px;height:8px;border-radius:50%;background:var(--amber)}
:where(#view-refs,.p4) .tp-part span{min-width:0}
:where(#view-refs,.p4) .tp-acc{display:flex;flex-direction:column;align-items:center;gap:var(--s-2)}
:where(#view-refs,.p4) .tp-acc .acts{display:flex;align-items:center;gap:var(--s-2)}
:where(#view-refs,.p4) .tp-acc .txtbtn{margin:0}