/* P4: the style journey (HANDOFF /rework/P4). Ported from the frames kit p4.css; sits on tokens.css, app.css and p1.css. Grid: paddings and gaps up to 16 even, above 16 multiples of 4. */
:where(#view-refs,.p4) .btn.dis{opacity:.4;pointer-events:none}
/* the state-art glyph is drawn by P1's art() inside the svg (P1 fix round 2); no P4 overlay rules remain */

/* ---------- stepper: 4 tabs, number + name + plain subline + one 16 px R2 icon ---------- */
:where(#view-refs,.p4) .stp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-1);margin:var(--s-4) 0 0;padding:var(--s-1);border-radius:var(--r-4);background:var(--bg);border:1px solid var(--line)}
:where(#view-refs,.p4) .stp .st-step{position:relative;display:flex;align-items:center;gap:var(--s-3);min-width:0;height:56px;padding:0 var(--s-4) 0 var(--s-3);border-radius:var(--r-3);color:var(--text-2);cursor:pointer;text-decoration:none}
:where(#view-refs,.p4) .stp .st-step:hover{background:var(--surface)}
:where(#view-refs,.p4) .stp .st-step.on{background:var(--raised);box-shadow:var(--edge-strong)}
:where(#view-refs,.p4) .stp .st-step.on::after{content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:2px;border-radius:var(--r-hair);background:var(--accent)}
:where(#view-refs,.p4) .stp .n{font-style:normal;display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-strong);color:var(--text-2);font-size:var(--fs-2);line-height:1;font-weight:600;font-variant-numeric:tabular-nums}
:where(#view-refs,.p4) .stp .st-step.on .n{background:var(--primary);border-color:transparent;color:var(--on-primary)}
:where(#view-refs,.p4) .stp .t{display:grid;min-width:0;flex:1}
:where(#view-refs,.p4) .stp b{font-size:var(--fs-3);line-height:20px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(#view-refs,.p4) .stp small{font-size:var(--fs-2);line-height:18px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(#view-refs,.p4) .stp .st-step.lock b{color:var(--text-3)}
:where(#view-refs,.p4) .stp .st-step.lock .n{color:var(--text-3);border-color:var(--line)}
:where(#view-refs,.p4) .pbody{margin-top:var(--s-6)}

/* ---------- step head: what the step does (the stepper names it), the step's one primary at the right ---------- */
:where(#view-refs,.p4) .sth{display:flex;align-items:center;gap:var(--s-4);min-height:44px;margin:0 0 var(--s-4)}
:where(#view-refs,.p4) .sth p{margin:0;flex:1;min-width:0;color:var(--text-2);font-size:var(--fs-3);line-height:20px}
:where(#view-refs,.p4) .sth p b{color:var(--text);font-weight:600}
:where(#view-refs,.p4) .sth .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) .sth .price b{color:var(--text);font:500 var(--fs-3)/1 var(--mono);letter-spacing:-.02em}
:where(#view-refs,.p4) .sth .price .i{width:16px;height:16px;color:var(--amber)}

/* ---------- cards ---------- */
:where(#view-refs,.p4) .cd{position:relative;display:flex;flex-direction:column;min-width:0;padding:var(--s-5);border-radius:var(--r-4);border:1px solid var(--line);background:linear-gradient(160deg,rgb(var(--p-mist) / .05),transparent 45%),var(--surface);box-shadow:var(--hl-top)}
:where(#view-refs,.p4) .cd > h3{margin:0;font-size:var(--fs-4);line-height:22px;font-weight:600;letter-spacing:-.01em}
:where(#view-refs,.p4) .cd > h3 + p{margin:var(--s-1) 0 0;color:var(--text-2);font-size:var(--fs-3);line-height:20px}
:where(#view-refs,.p4) .cd .foot{display:flex;align-items:center;gap:var(--s-2);margin-top:auto;padding-top:var(--s-4)}
:where(#view-refs,.p4) .cols{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--s-6);align-items:stretch}
:where(#view-refs,.p4) .cols.half{grid-template-columns:repeat(2,minmax(0,1fr))}
:where(#view-refs,.p4) .cols.l8{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
:where(#view-refs,.p4) .cd.center{align-items:center;justify-content:center}

:where(#view-refs,.p4) .stp .st-step{font:inherit;text-align:left;border:0;background:none;color:var(--text-2)}
:where(#view-refs,.p4) .stp .st-step.on{background:var(--raised)}
:where(#view-refs,.p4) .stp .st-step .n{font-style:normal}
:where(#view-refs,.p4) .stp .st-step .si{flex:none}
:where(#view-refs,.p4) .st-head .st-acts{margin-left:auto}

/* P4 shell: the strip (lock line, collab) sits 16 under the stepper, not pulled up under the old head (fork B note 1) */
:where(#view-refs,.p4) .st-strip{margin:var(--s-4) 0 0}
:where(#view-refs,.p4) .st-strip .lockbar{height:auto;min-height:48px}

/* P4 fix r1 S4 / J6: the pre-P4 wrapper gaps (.tp 20, .sf 32, .sr 20, .ln 36) no longer stack on the P4 margins: step head to first card 16, card to card 24 */
:where(#view-refs,.p4) .pbody > .tp, :where(#view-refs,.p4) .pbody > .sf, :where(#view-refs,.p4) .pbody > .sr, :where(#view-refs,.p4) .pbody > .ln{gap:0}
:where(#view-refs,.p4) .ln-redraw:empty{display:none}