/* P4 (HANDOFF /rework/P4): ported from the frames kit, see p4.css for the shared base. */
/* ---------- ③ References ---------- */
:where(#view-refs,.p4) .rgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-4)}
:where(#view-refs,.p4) .rft{position:relative;aspect-ratio:3/4;border-radius:var(--r-3);overflow:hidden;background:var(--raised);box-shadow:var(--edge)}
:where(#view-refs,.p4) .rft img{display:block;width:100%;height:100%;object-fit:cover}
:where(#view-refs,.p4) .rft.add{display:grid;place-items:center;align-content:center;gap:var(--s-2);background:var(--hatch);box-shadow:var(--edge-strong);color:var(--text-2);font-size:var(--fs-2);font-weight:500}
:where(#view-refs,.p4) .rft.add .i{width:20px;height:20px;color:var(--text-2)}
:where(#view-refs,.p4) .rft .up{position:absolute;left:8px;right:8px;bottom:8px;height:4px;border-radius:var(--r-hair);background:rgb(var(--p-navy-rgb) / .64)}
:where(#view-refs,.p4) .rft .up i{display:block;height:100%;border-radius:var(--r-hair);background:var(--accent)}
:where(#view-refs,.p4) .exs{display:flex;align-items:center;gap:var(--s-6)}
:where(#view-refs,.p4) .exs .row{display:flex;gap:var(--s-3)}
:where(#view-refs,.p4) .exs .row img{width:96px;height:128px;border-radius:var(--r-2);object-fit:cover;box-shadow:0 0 0 1px var(--line),var(--shadow-1)}
:where(#view-refs,.p4) .exs ul{display:grid;gap:var(--s-2);margin:0;padding:0;list-style:none;color:var(--text-2);font-size:var(--fs-3);line-height:20px}
:where(#view-refs,.p4) .exs li{display:flex;align-items:center;gap:var(--s-2)}
:where(#view-refs,.p4) .exs li .i{width:16px;height:16px;color:var(--green);flex:none}
:where(#view-refs,.p4) .drop{display:grid;place-items:center;align-content:center;gap:var(--s-2);min-height:180px;border-radius:var(--r-4);background:var(--hatch);box-shadow:var(--edge-strong);color:var(--text-2);font-size:var(--fs-3);line-height:20px;text-align:center}
:where(#view-refs,.p4) .drop .i{width:24px;height:24px;color:var(--accent)}
:where(#view-refs,.p4) .wish textarea{display:block;width:100%;height:96px;margin-top:var(--s-3);padding:var(--s-3) 14px;border-radius:var(--r-3);border:1px solid var(--line-strong);background:var(--bg);color:var(--text);font:400 var(--fs-3)/20px var(--font);resize:none}
:where(#view-refs,.p4) .wish .saved{display:flex;align-items:center;gap:6px;margin-top:var(--s-2);color:var(--text-3);font-size:var(--fs-1);line-height:16px}
:where(#view-refs,.p4) .wish .saved .i{width:14px;height:14px;color:var(--green)}

/* ---------- M-11: reference tiles: remove ✕, upload progress, upload failed, full, locked, drop ---------- */
:where(#view-refs,.p4) .rft .rm{position:absolute;top:6px;right:6px;opacity:0}
/* ✕ shows on tile hover and on keyboard focus; opacity, not visibility, so Tab reaches it (P1 rule) */
:where(#view-refs,.p4) .rft:hover .rm, :where(#view-refs,.p4) .rft.hov .rm, :where(#view-refs,.p4) .rft:focus-within .rm, :where(#view-refs,.p4) .rft .rm:focus-visible, :where(#view-refs,.p4) .rft .rm.fv, :where(#view-refs,.p4) .rft.bad .rm{opacity:1}
:where(#view-refs,.p4) .rft .rm.fv, :where(#view-refs,.p4) .rft .rm:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
:where(#view-refs,.p4) .rft.hov{box-shadow:var(--edge-hover)}
:where(#view-refs,.p4) .rft.upl img{opacity:.45}
:where(#view-refs,.p4) .rft .upt{position:absolute;left:8px;right:8px;bottom:18px;color:var(--text);font-size:var(--fs-1);line-height:16px;font-weight:500;font-variant-numeric:tabular-nums}
:where(#view-refs,.p4) .rft.bad{box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--red) 65%,transparent)}
:where(#view-refs,.p4) .rft.bad img{opacity:.25}
:where(#view-refs,.p4) .rft .rf-err{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:var(--s-1);padding:var(--s-3);text-align:center}
:where(#view-refs,.p4) .rft .rf-err .i{width:20px;height:20px;color:var(--red)}
:where(#view-refs,.p4) .rft .rf-err b{font-size:var(--fs-2);line-height:18px;font-weight:600}
:where(#view-refs,.p4) .rft .rf-err small{color:var(--text-2);font-size:var(--fs-1);line-height:16px}
:where(#view-refs,.p4) .rft .rf-err .btn{margin-top:var(--s-1)}
:where(#view-refs,.p4) .rgrid.locked .rft img{filter:saturate(.8)}
:where(#view-refs,.p4) .dropov{position:absolute;inset:-8px;z-index:var(--z-float);display:grid;place-items:center;align-content:center;gap:var(--s-2);border-radius:var(--r-4);background:color-mix(in oklab,var(--bg) 70%,transparent);box-shadow:inset 0 0 0 2px var(--accent);color:var(--text);font-size:var(--fs-4);line-height:22px;font-weight:600;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
:where(#view-refs,.p4) .dropov .i{width:28px;height:28px;color:var(--accent)}
:where(#view-refs,.p4) .dropov small{color:var(--text-2);font-size:var(--fs-2);font-weight:400}
:where(#view-refs,.p4) .rwrap{position:relative}
:where(#view-refs,.p4) .tipon{position:absolute;z-index:var(--z-pop);padding:var(--s-2) var(--s-3);border-radius:var(--r-2);background:var(--glass-strong);border:1px solid var(--line-strong);color:var(--text);font-size:var(--fs-2);line-height:18px;white-space:nowrap;box-shadow:var(--shadow-2)}
/* wishes: another editor and the save conflict */
:where(#view-refs,.p4) .presence{display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-2);color:var(--text-2);font-size:var(--fs-1);line-height:16px}
:where(#view-refs,.p4) .presence .av{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#ffc58f;color:#1a1206;font-size:9px;font-weight:700}
:where(#view-refs,.p4) .conflict{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-3);padding:var(--s-3) var(--s-3) var(--s-3) var(--s-4);border-radius:var(--r-3);border:1px solid color-mix(in oklab,var(--amber) 40%,transparent);background:color-mix(in oklab,var(--amber) 8%,transparent)}
:where(#view-refs,.p4) .conflict .si{flex:none}
:where(#view-refs,.p4) .conflict p{flex:1;margin:0;color:var(--text);font-size:var(--fs-2);line-height:18px}
:where(#view-refs,.p4) .conflict p small{display:block;color:var(--text-2)}
:where(#view-refs,.p4) .wish textarea.theirs{color:var(--text-2)}
/* font upload row */
:where(#view-refs,.p4) .uprow{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:var(--s-3);margin-top:var(--s-4);padding:var(--s-3) var(--s-3) var(--s-3) var(--s-4);border-radius:var(--r-3);border:1px solid var(--line);background:var(--bg)}
:where(#view-refs,.p4) .uprow > .i{width:16px;height:16px;color:var(--text-2)}
:where(#view-refs,.p4) .uprow b{display:block;font-size:var(--fs-3);line-height:20px;font-weight:500}
:where(#view-refs,.p4) .uprow small{display:block;color:var(--text-2);font-size:var(--fs-2);line-height:18px;font-variant-numeric:tabular-nums}
:where(#view-refs,.p4) .uprow .bar{display:block;height:4px;margin-top:var(--s-2);border-radius:var(--r-hair);background:var(--raised)}
:where(#view-refs,.p4) .uprow .bar i{display:block;height:100%;border-radius:var(--r-hair);background:var(--accent)}
:where(#view-refs,.p4) .uprow.err{border-color:color-mix(in oklab,var(--red) 55%,transparent);background:color-mix(in oklab,var(--red) 6%,transparent)}
:where(#view-refs,.p4) .uprow.err > .i{color:var(--red)}
/* compare: a game the older version never drew */
:where(#view-refs,.p4) .cmpd .cgr .miss{display:grid;place-items:center;align-content:center;gap:6px;background:var(--raised);box-shadow:var(--edge);color:var(--text-2);font-size:var(--fs-1);line-height:16px}
:where(#view-refs,.p4) .cmpd .cgr .miss .i{width:16px;height:16px;color:var(--text-3)}
:where(#view-refs,.p4) .cmpd .chd small{color:var(--text-2);font-size:var(--fs-2);line-height:18px}

:where(#view-refs,.p4) .sth p .i{width:16px;height:16px;margin-right:var(--s-1);vertical-align:-3px;color:var(--text-3)}
:where(#view-refs,.p4) .rft .rf-open{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
:where(#view-refs,.p4) .rgrid.mt{margin-top:var(--s-4)}
:where(#view-refs,.p4) .rf-p4{display:grid;gap:var(--s-4)}
:where(#view-refs,.p4) .rf-p4 .rgrid.mt{margin-top:0}
:where(#view-refs,.p4) .rf{position:relative}
:where(#view-refs,.p4) .sth .btn.dis{pointer-events:auto;cursor:not-allowed}   /* the reason is its tooltip, so it still takes the hover */
:where(#view-refs,.p4) .sr > :empty{display:none}
:where(#view-refs,.p4) .cd.wish .sr-wish{min-height:0;max-height:none}   /* the step's own 96px box, not the old column's */
:where(#view-refs,.p4) .lockbar.gs-lock{margin:0}   /* game style: the frame's bar, not the old strip's -16px pull-up */
:where(#view-refs,.p4) .lockbar.gs-lock > span{flex:none}
:where(#view-refs,.p4) .sr[data-m="edit"]:not(.sr-main){gap:0}   /* P4 ③: the frame's own spacing (head 16 below, wishes 24 above), not the old page's 20 px rows */
:where(#view-refs,.p4) .sr-lock:not(.sr-main) .sr-host .rf-main{opacity:1}   /* P4 L: locked tiles stay at full strength (.rgrid.locked tones them), only the head says why */