/* P4 (HANDOFF /rework/P4): ported from the frames kit, see p4.css for the shared base. */
/* ---------- ② Font ---------- */
:where(#view-refs,.p4) .spec{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s-6)}
:where(#view-refs,.p4) .spec .aa{display:grid;place-items:center;width:120px;height:120px;border-radius:var(--r-4);background:var(--bg);box-shadow:var(--edge);font-size:64px;line-height:1;color:var(--text)}
:where(#view-refs,.p4) .spec h3{margin:0;font-size:var(--fs-4);line-height:22px;font-weight:600}
:where(#view-refs,.p4) .spec .meta{margin:var(--s-1) 0 0;color:var(--text-2);font-size:var(--fs-3);line-height:20px}
:where(#view-refs,.p4) .spec .meta + .meta{margin-top:0}
:where(#view-refs,.p4) .spec .acts{display:flex;gap:var(--s-2)}
:where(#view-refs,.p4) .alt{display:flex;align-items:center;gap:var(--s-4);margin-top:var(--s-4);color:var(--text-2);font-size:var(--fs-2);line-height:18px}
:where(#view-refs,.p4) .alt .search{position:relative;width:280px;height:var(--ctl-s);padding:0;flex:none}
:where(#view-refs,.p4) .alt .search .i{position:absolute;left:12px;top:10px;width:16px;height:16px;pointer-events:none}
:where(#view-refs,.p4) .alt .search input{width:100%;height:100%;padding:0 var(--s-3) 0 36px;border:0;border-radius:inherit;background:transparent;color:var(--text);font:400 var(--fs-3)/20px var(--font);outline:none}
:where(#view-refs,.p4) .alt .search input::placeholder{color:var(--text-3)}
:where(#view-refs,.p4) .alt .search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 22%,transparent)}
:where(#view-refs,.p4) .alt .txtbtn.dis{opacity:.4;pointer-events:none}
:where(#view-refs,.p4) .letters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2);margin-top:var(--s-4)}
:where(#view-refs,.p4) .letters span{display:flex;align-items:center;gap:var(--s-2);height:44px;padding:0 var(--s-3);border-radius:var(--r-2);background:var(--bg);color:var(--text-2);font-size:var(--fs-2)}
:where(#view-refs,.p4) .letters span em{font-style:normal;color:var(--text);font-size:var(--fs-4);letter-spacing:.02em}
:where(#view-refs,.p4) .tcov{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-4);margin-top:var(--s-3)}
:where(#view-refs,.p4) .mc{position:relative;aspect-ratio:418/192;border-radius:var(--r-2);overflow:hidden;background:#000e17 url(assets/n03-layer-bg-836.webp) center bottom/100% auto no-repeat;box-shadow:var(--edge)}
:where(#view-refs,.p4) .mc .tt{position:absolute;left:8%;right:8%;top:6%;bottom:22%;display:grid;place-items:center;text-align:center;color:#99a2ff;text-transform:uppercase;line-height:.98;letter-spacing:.01em;text-wrap:balance}
:where(#view-refs,.p4) .fq{margin:0 0 var(--s-4)}
:where(#view-refs,.p4) .fq h3{margin:0;font-size:var(--fs-4);line-height:22px;font-weight:600}
:where(#view-refs,.p4) .fq p{margin:var(--s-1) 0 0;color:var(--text-2);font-size:var(--fs-3);line-height:20px}
:where(#view-refs,.p4) .fopt{display:grid;grid-template-rows:auto auto auto;align-content:start;gap:var(--s-4)}
:where(#view-refs,.p4) .fopt .row{display:flex;align-items:center;gap:var(--s-4)}
:where(#view-refs,.p4) .fopt .aa{display:grid;place-items:center;width:88px;height:88px;border-radius:var(--r-3);background:var(--bg);box-shadow:var(--edge);font-size:var(--fs-10);line-height:1}
:where(#view-refs,.p4) .fopt .sample{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
:where(#view-refs,.p4) .fopt .btn{justify-self:start}
:where(#view-refs,.p4) .lockln{display:flex;align-items:center;gap:var(--s-2);color:var(--text-2);font-size:var(--fs-2);line-height:18px}
:where(#view-refs,.p4) .lockln .i{width:16px;height:16px;color:var(--text-3)}


/* ---------- P4 fork A additions ---------- */
:where(#view-refs,.p4) .cols.half{grid-template-columns:repeat(2,minmax(0,1fr))}
:where(#view-refs,.p4) .fsel.plain{margin-top:var(--s-2);color:var(--text);font-size:var(--fs-3);cursor:default;pointer-events:none}   /* read-only: .sel-t look, no hover */
:where(#view-refs,.p4) .sf-sel.fsel{margin-top:var(--s-2)}
:where(#view-refs,.p4) .uprow .bar{display:block;height:4px;margin-top:var(--s-2);border-radius:var(--r-hair);background:var(--line);overflow:hidden}
:where(#view-refs,.p4) .uprow .bar i{display:block;height:100%;background:var(--primary);animation:uprow-ind 1.4s var(--ease) infinite;transform-origin:left}
@keyframes uprow-ind{0%{transform:scaleX(.1)}60%{transform:scaleX(.8)}100%{transform:scaleX(1);opacity:.4}}
@media (prefers-reduced-motion:reduce){:where(#view-refs,.p4) .uprow .bar i{animation:none;transform:scaleX(.6)}}
:where(#view-refs,.p4) .fopt .sample .mc{aspect-ratio:auto;height:110px}
:where(#view-refs,.p4) .fopt .sample .mc .tt{top:0;bottom:0}
:where(#view-refs,.p4) .cd .sf-back .lnk{color:var(--accent);font-weight:500;cursor:pointer}
:where(#view-refs,.p4) .cd .sf-back .lnk:disabled{opacity:.5;cursor:not-allowed}