/* PROJECT SETTINGS WINDOW v1 — ported from DH #685 (card #7144).
   Board bytes: /root/spotsheet-docs/dh/runs/685/psw/psw.css (sha256 abc74c17625ad941).
   Founder ruling (history #9904): "full page blocking popup window not little
   inline drawer cover. drawer cover is not noticible enough." — so the scrim is
   fixed to the viewport, blocks pointer events, and does NOT close on click.

   ── TOKEN ALIASES (DH #684's port lost motion+hover to exactly this trap) ──
   The board authors --lime/--lime-line/--lime-deep, which exist in NO served
   stylesheet; and --ms/--bg-row-h, which exist only inside
   .nsd-drawer.rail.sv3-hero (sv3v2.css) — a scope this window renders OUTSIDE.
   Aliased once here so the rest of the file stays diffable against board bytes.
   Values read from tokens.css / sv3v2.css, not invented. */
.pw-scrim, .pw-win {
  --lime: var(--ss-accent);
  --lime-rgb: var(--ss-accent-rgb);
  --lime-line: var(--ss-accent-line);
  --lime-deep: var(--ss-accent-deep);
  --ms: var(--ndt-ms, 170ms);
  --bg-row-h: var(--bg-row-hover, #3A3B43);
}
@media (prefers-reduced-motion: reduce) { .pw-scrim, .pw-win { --ms: 0ms } }

/* ── the blocking layer ─────────────────────────────────────────────────── */
/* PORT DEVIATION (deliberate, board §the blocking layer): the board mocks the
   scrim as position:absolute inside a framed artboard. Live it must cover the
   whole app, so it is position:fixed. Everything else is the board's. */
.pw-scrim{position:fixed;inset:0;z-index:60;background:rgba(9,10,13,.74);-webkit-backdrop-filter:blur(3px) saturate(.6);backdrop-filter:blur(3px) saturate(.6);display:flex;align-items:center;justify-content:center;padding:30px}
.pw-scrim.pad-sm{padding:14px}
.pw-win{position:relative;width:100%;max-width:1000px;height:100%;min-height:0;background:var(--bg-panel);border:1px solid var(--line-strong);border-radius:10px;box-shadow:0 40px 110px rgba(0,0,0,.62),0 0 0 1px rgba(0,0,0,.5);display:flex;flex-direction:column;overflow:hidden;font-family:var(--ui);color:var(--fg);font-size:12px}
.pw-win *{box-sizing:border-box}
/* board §F: a click on the scrim pulses the window border rather than closing —
   a silently-closing backdrop would undo the "noticeable" the founder asked for */
@keyframes pw-pulse{0%{box-shadow:0 40px 110px rgba(0,0,0,.62),0 0 0 1px rgba(0,0,0,.5)}
  35%{box-shadow:0 40px 110px rgba(0,0,0,.62),0 0 0 3px var(--lime-line)}
  100%{box-shadow:0 40px 110px rgba(0,0,0,.62),0 0 0 1px rgba(0,0,0,.5)}}
.pw-win.pulse{animation:pw-pulse 320ms ease-out}
@media (prefers-reduced-motion:reduce){.pw-win.pulse{animation:none;border-color:var(--lime-line)}}

/* ── title bar ──────────────────────────────────────────────────────────── */
.pw-bar{flex-shrink:0;height:46px;display:flex;align-items:center;gap:11px;padding:0 10px 0 16px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#3C3D45,#33343B)}
.pw-bar .ttl{font-size:13.5px;color:var(--fg-strong);letter-spacing:-.005em}
.pw-bar .sep{width:1px;height:15px;background:var(--line-strong)}
.pw-bar .prj{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--fg-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pw-bar .role{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim);border:1px solid var(--line);border-radius:2px;padding:2px 6px;white-space:nowrap}
.pw-bar .sp{flex:1;min-width:8px}
.pw-esc{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;color:var(--fg-dim);border:1px solid var(--line);border-bottom-width:2px;border-radius:2px;padding:2px 6px;white-space:nowrap}
.pw-x{width:28px;height:28px;flex-shrink:0;border:1px solid transparent;border-radius:3px;background:transparent;color:var(--fg-mute);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.pw-x:hover{background:var(--bg-sub);border-color:var(--line);color:var(--fg-strong)}
.pw-x:focus-visible,.pw-jump:focus-visible,.pw-b:focus-visible{outline:2px solid var(--lime);outline-offset:1px}

/* ── body: index rail + scroll ──────────────────────────────────────────── */
.pw-body{flex:1;min-height:0;display:flex}
.pw-rail{flex:0 0 178px;border-right:1px solid var(--line);background:var(--bg-app);padding:12px 9px;display:flex;flex-direction:column;gap:1px;overflow:hidden}
.pw-rail .cap{font-family:var(--mono);font-size:8px;letter-spacing:.19em;text-transform:uppercase;color:var(--fg-faint);padding:0 7px 8px}
.pw-jump{display:flex;align-items:center;gap:8px;height:26px;padding:0 8px;border:1px solid transparent;border-radius:3px;background:transparent;color:var(--fg-mute);font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;text-align:left;width:100%;white-space:nowrap}
.pw-jump:hover{background:var(--bg-row-h);color:var(--fg-strong)}
.pw-jump.on{background:var(--bg-sub);border-color:var(--line);color:var(--fg-strong)}
.pw-jump .n{margin-left:auto;font-size:9px;color:var(--fg-faint);letter-spacing:.02em}
.pw-jump.danger{color:#A57A7A}.pw-jump.danger:hover{color:var(--st-danger)}
.pw-rail .foot{margin-top:auto;padding:10px 7px 0;font-size:10.5px;line-height:1.5;color:var(--fg-faint);border-top:1px solid var(--line-soft)}
.pw-scroll{flex:1;min-width:0;overflow:auto;background:var(--bg-panel)}
.pw-scroll::-webkit-scrollbar{width:9px}
.pw-scroll::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:5px;border:2px solid var(--bg-panel)}
.pw-scroll::-webkit-scrollbar-track{background:transparent}

/* ── sections ───────────────────────────────────────────────────────────── */
.pw-sec{padding:19px 24px 22px;border-bottom:1px solid var(--line)}
.pw-sec:last-child{border-bottom:0}
.pw-sh{display:flex;align-items:baseline;gap:10px;margin-bottom:3px}
.pw-sh h3{margin:0;font-size:14px;font-weight:500;color:var(--fg-strong);letter-spacing:-.01em}
.pw-sh .no{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;color:var(--fg-faint)}
.pw-sub{font-size:11.5px;line-height:1.55;color:var(--fg-mute);margin:0 0 15px;text-wrap:pretty;max-width:64ch}
.pw-blk{margin-top:16px}
.pw-blk:first-of-type{margin-top:0}
.pw-blab{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-dim);display:flex;align-items:center;gap:9px;margin-bottom:9px}
.pw-blab::after{content:'';flex:1;height:1px;background:var(--line-soft)}

/* ── fields ─────────────────────────────────────────────────────────────── */
.pw-grid{display:grid;gap:12px}
.pw-grid.c2{grid-template-columns:1fr 1fr}
.pw-grid.c3{grid-template-columns:1fr 1fr 1fr}
.pw-grid.c4{grid-template-columns:repeat(4,1fr)}
.pw-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.pw-f .lb{font-family:var(--mono);font-size:8.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--fg-dim);display:flex;align-items:center;gap:7px}
.pw-tag{font-family:var(--mono);font-size:7.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);border:1px solid var(--line);border-radius:2px;padding:1px 4px;white-space:nowrap}
.pw-in{height:30px;width:100%;background:var(--bg-deep);border:1px solid var(--line);border-radius:3px;padding:0 9px;color:var(--fg-strong);font-family:var(--ui);font-size:12.5px;outline:none;box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.pw-in::placeholder{color:var(--fg-faint)}
.pw-in:focus{border-color:var(--lime-line);box-shadow:inset 0 1px 2px rgba(0,0,0,.4),0 0 0 3px rgba(var(--lime-rgb),.10)}
.pw-in.mono{font-family:var(--mono);font-size:12px;font-feature-settings:"tnum" 1;letter-spacing:.02em}
.pw-sel{height:30px;width:100%;background:var(--bg-deep);border:1px solid var(--line);border-radius:3px;padding:0 8px 0 9px;color:var(--fg-strong);font-size:12.5px;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.pw-sel:hover{border-color:var(--line-strong)}
.pw-sel .cv{color:var(--fg-dim);font-size:9px}
.pw-fact{font-size:12.5px;color:var(--fg-strong);padding:5px 0 6px;border-bottom:1px solid var(--line-soft);min-height:30px;display:flex;align-items:center}
.pw-fact.mono{font-family:var(--mono);font-size:12px;font-feature-settings:"tnum" 1}
.pw-hint{font-size:10.5px;line-height:1.5;color:var(--fg-dim);text-wrap:pretty}

/* ── switch row ─────────────────────────────────────────────────────────── */
.pw-swrow{display:flex;align-items:flex-start;gap:12px;padding:11px 12px;background:var(--bg-app);border:1px solid var(--line-soft);border-radius:4px}
.pw-swrow .bd{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pw-swrow .nm{font-size:12.5px;color:var(--fg-strong)}
.pw-swrow .ds{font-size:10.5px;line-height:1.5;color:var(--fg-mute);text-wrap:pretty}
.pw-sw{flex-shrink:0;width:32px;height:17px;border-radius:999px;background:var(--bg-deep);border:1px solid var(--line-strong);position:relative;cursor:pointer;padding:0;margin-top:2px}
.pw-sw i{position:absolute;top:1px;left:1px;width:13px;height:13px;border-radius:50%;background:var(--fg-dim);transition:left var(--ms) ease,background var(--ms)}
.pw-sw.on{background:rgba(var(--lime-rgb),.16);border-color:var(--lime-line)}
.pw-sw.on i{left:16px;background:var(--lime)}
.pw-swst{font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint);flex-shrink:0;margin-top:6px;width:52px;text-align:right}

/* ── list rows (versions, members, reels) ───────────────────────────────── */
.pw-list{border:1px solid var(--line-soft);border-radius:4px;overflow:hidden;background:var(--bg-app)}
.pw-r{display:flex;align-items:center;gap:10px;min-height:34px;padding:6px 11px;border-bottom:1px solid var(--line-soft)}
.pw-r:last-child{border-bottom:0}
.pw-r:hover{background:var(--bg-row-h)}
.pw-r .pip{width:6px;height:6px;border-radius:50%;background:var(--fg-faint);flex-shrink:0}
.pw-r .pip.active{background:var(--lime);box-shadow:0 0 0 3px rgba(var(--lime-rgb),.14)}
.pw-r .pip.draft{background:transparent;border:1px dashed var(--line-strong)}
.pw-r .pip.queued{background:var(--fg-dim)}
.pw-r .pip.rendering{background:var(--st-flagged)}
.pw-r .nm{font-family:var(--mono);font-size:11px;color:var(--fg-strong);letter-spacing:.03em;flex-shrink:0}
.pw-r .st{font-family:var(--mono);font-size:8px;letter-spacing:.17em;text-transform:uppercase;color:var(--fg-dim);flex-shrink:0}
.pw-r .st.active{color:var(--lime-deep)}
.pw-r .st.rendering{color:var(--st-flagged)}
.pw-r .cl{font-size:11px;color:var(--fg-mute);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pw-r .rg{font-family:var(--mono);font-size:9.5px;font-feature-settings:"tnum" 1;color:var(--tc-green,#8aae93);flex-shrink:0}
.pw-r .rl{font-size:11px;color:var(--fg-mute);flex-shrink:0}
.pw-r .av{width:20px;height:20px;border-radius:50%;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-size:8.5px;font-weight:600;color:rgba(0,0,0,.62)}
.pw-r .who{font-size:12px;color:var(--fg-strong);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pw-r .role{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim);margin-left:auto;flex-shrink:0}
.pw-r.you{box-shadow:inset 2px 0 0 var(--lime)}
.pw-lhead{display:flex;align-items:center;gap:10px;height:24px;padding:0 11px;background:var(--bg-deep);border-bottom:1px solid var(--line-soft);font-family:var(--mono);font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-faint)}
.pw-lhead .sp{margin-left:auto}

/* ── buttons ────────────────────────────────────────────────────────────── */
.pw-b{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:27px;padding:0 11px;border:1px solid var(--line);border-radius:3px;background:var(--bg-sub);color:var(--fg);font-family:var(--ui);font-size:11.5px;cursor:pointer;white-space:nowrap}
.pw-b:hover{border-color:var(--line-strong);color:var(--fg-strong);background:var(--bg-row-h)}
.pw-b.q{background:transparent;border-color:transparent;color:var(--fg-mute)}
.pw-b.q:hover{background:var(--bg-sub);border-color:var(--line)}
.pw-b.sm{height:22px;padding:0 8px;font-size:11px}
.pw-b.lime{border-color:var(--lime-line);color:var(--lime);background:rgba(var(--lime-rgb),.07)}
.pw-b.lime:hover{background:rgba(var(--lime-rgb),.13);color:var(--lime)}
.pw-b.dgr{border-color:rgba(180,104,104,.42);color:var(--st-danger);background:transparent}
.pw-b.dgr:hover{background:rgba(180,104,104,.10)}
.pw-b .k{font-family:var(--mono);font-size:8.5px;color:var(--fg-dim)}
.pw-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.pw-acts .sp{flex:1}

/* ── token chips (naming convention) ────────────────────────────────────── */
.pw-toks{display:flex;flex-wrap:wrap;gap:5px}
.pw-tok{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:var(--fg-mute);background:var(--bg-row);border:1px solid var(--line);border-radius:2px;padding:3px 7px;cursor:pointer}
.pw-tok:hover{color:var(--fg-strong);border-color:var(--line-strong);background:var(--bg-sub)}
.pw-preview{background:var(--bg-deep);border:1px solid var(--line-soft);border-radius:3px;padding:9px 11px;display:flex;flex-direction:column;gap:5px}
.pw-preview .l{font-family:var(--mono);font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-faint)}
.pw-preview .v{font-family:var(--mono);font-size:11px;color:var(--fg);letter-spacing:.02em;word-break:break-all}

/* ── the Elsewhere block — no controls, ever ────────────────────────────── */
.pw-else{background:var(--bg-app);border:1px solid var(--line-soft);border-left:2px solid var(--line-strong);border-radius:0 4px 4px 0;padding:13px 16px;display:flex;flex-direction:column;gap:9px}
.pw-else p{margin:0;font-size:11.5px;line-height:1.6;color:var(--fg-mute);text-wrap:pretty;max-width:70ch}
.pw-else p b{color:var(--fg);font-weight:500}
.pw-else .w{font-family:var(--mono);font-size:8px;letter-spacing:.19em;text-transform:uppercase;color:var(--fg-faint)}

/* ── danger row ─────────────────────────────────────────────────────────── */
.pw-danger{display:flex;align-items:center;gap:14px;padding:13px 16px;border:1px solid rgba(180,104,104,.26);border-radius:4px;background:rgba(180,104,104,.045)}
.pw-danger .bd{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pw-danger .nm{font-size:12.5px;color:var(--fg-strong)}
.pw-danger .ds{font-size:10.5px;line-height:1.5;color:var(--fg-mute)}

/* ── ready strip (new project) ──────────────────────────────────────────── */
.pw-ready{margin:0;padding:14px 24px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(var(--lime-rgb),.055),transparent)}
.pw-ready .top{display:flex;align-items:baseline;gap:11px}
.pw-ready h4{margin:0;font-size:13px;font-weight:500;color:var(--fg-strong)}
.pw-ready .st{font-family:var(--mono);font-size:8.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--lime)}
.pw-ready p{margin:5px 0 0;font-size:11.5px;line-height:1.55;color:var(--fg-mute);max-width:70ch;text-wrap:pretty}
.pw-steps{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.pw-step{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 9px 0 8px;border:1px solid var(--line);border-radius:3px;background:var(--bg-app);font-size:11px;color:var(--fg-mute)}
.pw-step .m{width:11px;height:11px;border-radius:50%;border:1px solid var(--line-strong);flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:7px;color:var(--fg-faint)}
.pw-step.done{color:var(--fg-strong);border-color:var(--lime-line)}
.pw-step.done .m{border-color:var(--lime);background:rgba(var(--lime-rgb),.16);color:var(--lime)}
.pw-step .op{font-family:var(--mono);font-size:7.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint)}

/* ── footer ─────────────────────────────────────────────────────────────── */
.pw-foot{flex-shrink:0;min-height:52px;display:flex;align-items:center;gap:14px;padding:10px 16px;border-top:1px solid var(--line);background:var(--bg-app)}
.pw-foot .msg{font-size:11px;line-height:1.5;color:var(--fg-dim);flex:1;min-width:0;text-wrap:pretty}
.pw-foot .msg b{color:var(--fg-mute);font-weight:500}
.pw-foot .btns{display:flex;align-items:center;gap:8px}

/* ── covers (sub-states inside the window) ──────────────────────────────── */
.pw-cover{position:absolute;left:0;right:0;top:46px;bottom:0;background:var(--bg-panel);display:flex;flex-direction:column;z-index:5;box-shadow:0 -14px 34px rgba(0,0,0,.4)}
.pw-cbar{flex-shrink:0;height:36px;display:flex;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid var(--line);background:var(--bg-sub)}
.pw-cbar .t{font-size:12.5px;color:var(--fg-strong)}
.pw-cbar .crumb{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint)}
.pw-cbody{flex:1;min-height:0;overflow:auto;padding:20px 24px}
.pw-confirm{border:1px solid rgba(180,104,104,.3);border-radius:4px;background:rgba(180,104,104,.05);padding:15px 17px;display:flex;flex-direction:column;gap:11px}
.pw-confirm h5{margin:0;font-size:13px;font-weight:500;color:var(--fg-strong)}
.pw-confirm p{margin:0;font-size:11.5px;line-height:1.6;color:var(--fg-mute);text-wrap:pretty;max-width:68ch}
.pw-loss{display:flex;flex-direction:column;gap:6px;padding:11px 13px;background:var(--bg-deep);border:1px solid var(--line-soft);border-radius:3px}
.pw-loss div{font-size:11px;line-height:1.45;color:var(--fg-mute);display:flex;gap:8px}
.pw-loss div span:first-child{font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);width:66px;flex-shrink:0;padding-top:2px}
.pw-hold{position:relative;overflow:hidden;height:31px;padding:0 15px;border:1px solid rgba(180,104,104,.5);border-radius:3px;background:transparent;color:var(--st-danger);font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:9px}
.pw-hold .fill{position:absolute;left:0;top:0;bottom:0;width:38%;background:rgba(180,104,104,.22)}
.pw-hold .lb{position:relative}
.pw-hold .k{position:relative;font-family:var(--mono);font-size:8px;letter-spacing:.14em;color:rgba(180,104,104,.75)}

/* ── loading + failure ──────────────────────────────────────────────────── */
.pw-center{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;padding:40px 28px;text-align:center}
.pw-center h4{margin:0;font-size:14px;font-weight:500;color:var(--fg-strong)}
.pw-center p{margin:0;font-size:11.5px;line-height:1.6;color:var(--fg-mute);max-width:52ch;text-wrap:pretty}
.pw-skel{width:100%;max-width:440px;display:flex;flex-direction:column;gap:9px}
.pw-skel i{display:block;height:9px;border-radius:2px;background:linear-gradient(90deg,var(--bg-sub),var(--bg-row-h),var(--bg-sub));background-size:220% 100%;animation:pw-sh 1.4s linear infinite}
@keyframes pw-sh{from{background-position:120% 0}to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){.pw-skel i{animation:none}}

/* ── NARROW — same anatomy, one column, nothing dropped ─────────────────── */
.pw-win.narrow .pw-body{flex-direction:column}
.pw-win.narrow .pw-rail{flex:0 0 auto;width:100%;border-right:0;border-bottom:1px solid var(--line);flex-direction:row;flex-wrap:wrap;gap:5px;padding:9px 10px;overflow:visible}
.pw-win.narrow .pw-rail .cap,.pw-win.narrow .pw-rail .foot{display:none}
.pw-win.narrow .pw-jump{width:auto;height:22px;padding:0 8px;font-size:8px;border-color:var(--line-soft)}
.pw-win.narrow .pw-jump .n{margin-left:6px}
.pw-win.narrow .pw-sec{padding:16px 15px 18px}
.pw-win.narrow .pw-ready{padding:13px 15px}
.pw-win.narrow .pw-grid.c2,.pw-win.narrow .pw-grid.c3,.pw-win.narrow .pw-grid.c4{grid-template-columns:1fr 1fr}
.pw-win.narrow .pw-grid.one{grid-template-columns:1fr}
.pw-win.narrow .pw-cbody{padding:15px}
.pw-win.narrow .pw-foot{flex-wrap:wrap;padding:10px 14px}
.pw-win.narrow .pw-foot .msg{flex:1 1 100%;order:2}
.pw-win.narrow .pw-foot .btns{flex:1 1 100%;order:1;display:flex;gap:8px}
.pw-win.narrow .pw-foot .btns .pw-b{flex:1}
.pw-win.narrow .pw-r{flex-wrap:wrap;row-gap:3px}
.pw-win.narrow .pw-r .cl{flex:1 1 100%;order:9;white-space:normal;overflow:visible}
.pw-win.narrow .pw-swst{display:none}

/* ══ BRIDGE — the live content, wearing the board's clothes ═══════════════
   Plan §3 step 3: "Re-house the existing content components — MAP, DO NOT
   REWRITE." SettingsSurface (app.jsx:3898) already carries the board's exact
   section anatomy and copy (the brief was written from it):
     .ss-settings-project  → board §Project   ("Timecode, title and the people…")
     .ss-settings-media    → board §Assets    ("Picture, session and stems…")
     .ss-set-elsewhere     → board §Elsewhere (#6839, no controls)
   So the sections are mapped, not rebuilt — every capability inside
   ProjectTimecodeSettings / AdminPage / NonOwnerProjectFacts / MediaOnePage
   survives untouched, and only its frame changes. */
.pw-scroll .ss-settings-surface{height:auto;overflow:visible;background:transparent;padding:0}
.pw-scroll .ss-set-sec{padding:19px 24px 22px;border-bottom:1px solid var(--line);margin:0}
.pw-scroll .ss-set-sec:last-of-type{border-bottom:0}
.pw-scroll .ss-set-h{display:flex;flex-direction:column;gap:3px;margin:0 0 15px}
.pw-scroll .ss-set-h h2{margin:0;font-size:14px;font-weight:500;color:var(--fg-strong);letter-spacing:-.01em}
.pw-scroll .ss-set-h p{margin:0;font-size:11.5px;line-height:1.55;color:var(--fg-mute);max-width:64ch;text-wrap:pretty}
/* the #6839 Elsewhere block, given the board's pw-else treatment verbatim */
.pw-scroll .ss-set-elsewhere{margin:0 24px 22px;background:var(--bg-app);border:1px solid var(--line-soft);
  border-left:2px solid var(--line-strong);border-radius:0 4px 4px 0;padding:13px 16px;
  display:flex;flex-direction:column;gap:9px}
.pw-scroll .ss-set-elsewhere::before{content:'No controls here — on purpose';font-family:var(--mono);
  font-size:8px;letter-spacing:.19em;text-transform:uppercase;color:var(--fg-faint)}
.pw-scroll .ss-set-elsewhere p{margin:0;font-size:11.5px;line-height:1.6;color:var(--fg-mute);max-width:70ch;text-wrap:pretty}
.pw-scroll .ss-set-elsewhere p b{color:var(--fg);font-weight:500}
.pw-win.narrow .pw-scroll .ss-set-sec{padding:16px 15px 18px}
.pw-win.narrow .pw-scroll .ss-set-elsewhere{margin:0 15px 18px}