/* ============================================================
   OFF-LEDGER: styles for the wall and the experiment pages.
   Loads after assets/site.css; only what the room adds.
   ============================================================ */

/* ---------- bare modes (thumb / embed): the stage is the page ---------- */
html.x-thumb,html.x-embed{background:var(--bg-0)}
html.x-thumb body,html.x-embed body{margin:0;overflow:hidden;background:var(--bg-0)}
html.x-thumb #stage,html.x-embed #stage{position:fixed;inset:0;width:100%;height:100%}
html.x-thumb *{cursor:default!important}

/* ---------- experiment page ---------- */
.x-frame{min-height:100vh}
.x-title{padding:44px var(--pad-x) 26px;border-bottom:1px solid var(--rule-row)}
.x-kicker{font-size:11px;letter-spacing:.12em;color:var(--ink-45);text-transform:uppercase}
.x-status .dot{margin-right:3px}
.x-h1{margin-top:14px;font-size:clamp(34px,4.6vw,56px);line-height:1.02;letter-spacing:-.03em;font-weight:600;text-wrap:balance}
.x-hyp{margin-top:16px;font-size:18px;line-height:1.55;color:var(--ink-60);max-width:720px;text-wrap:pretty}
.x-controls{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:12px var(--pad-x);border-bottom:1px solid var(--rule-section)}
.x-controls-l,.x-controls-r{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.x-btn{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60);border:1px solid var(--rule-section);padding:6px 10px;text-decoration:none;white-space:nowrap;background:none}
.x-btn:hover{color:var(--ink-100);border-color:var(--ink-45)}
.x-btn[aria-pressed="true"]{color:var(--accent);border-color:var(--accent)}
#x-play{min-width:64px;text-align:center}
.x-stagewrap{position:relative;background:var(--bg-0);border-bottom:1px solid var(--rule-section)}
.x-stagewrap[data-aspect="16:9"]{aspect-ratio:16/9;max-height:78vh}
.x-stagewrap[data-aspect="4:3"]{aspect-ratio:4/3;max-height:78vh}
.x-stagewrap[data-aspect="1:1"]{aspect-ratio:1;max-height:78vh}
.x-stagewrap[data-aspect="fill"]{min-height:520px}
/* viewport: the piece assumes it owns the window (fixed positioning, 100vh
   internals), so it gets the full height and is embedded rather than inlined */
.x-stagewrap[data-aspect="viewport"]{aspect-ratio:auto;max-height:none;height:100vh;height:100svh}
.x-stagewrap[data-aspect="viewport"] #stage{position:absolute;inset:0}
.x-embedframe{display:block;width:100%;height:100%;border:0;background:var(--bg-0)}
html.x-thumb .x-embedframe,html.x-embed .x-embedframe{position:absolute;inset:0}
.x-stagewrap #stage{position:absolute;inset:0;overflow:hidden}
.x-stagewrap[data-aspect="fill"] #stage{position:relative;min-height:520px}
.x-overlay{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(11,12,10,.72);cursor:pointer;text-align:center;padding:24px}
.x-overlay[hidden]{display:none}
.x-overlay .x-btn{color:var(--accent);border-color:var(--accent);font-size:11px;padding:10px 16px}
.x-overlay .micro{max-width:360px;line-height:1.6}
.x-legend{padding:10px var(--pad-x);font-size:10px;letter-spacing:.1em;color:var(--ink-55);border-bottom:1px solid var(--rule-section);text-transform:uppercase}
.x-lab .content{padding:var(--pad-section-y) var(--pad-x) 56px;display:grid;grid-template-columns:1fr 1fr;gap:30px 48px;max-width:1000px}
.x-note-block h3{margin-bottom:10px;color:var(--accent)}
.x-note-block p{font-size:16px;line-height:1.6;color:var(--ink-75);text-wrap:pretty}
.x-meta{margin-top:18px;border-top:1px solid var(--rule-row);font-family:var(--font-mono);text-transform:uppercase;font-size:10px;letter-spacing:.1em}
.x-meta div{display:grid;grid-template-columns:72px 1fr;gap:12px;padding:7px 0;border-bottom:1px solid var(--rule-row)}
.x-meta dt{color:var(--ink-45)}
.x-meta dd{color:var(--ink-75);line-height:1.5}

/* ---------- generic in-stage widgets pieces can use ---------- */
.x-stage{position:relative;width:100%;height:100%;background:var(--bg-0);color:var(--ink-100);font-family:var(--font-sans)}
.x-stage canvas{display:block;width:100%;height:100%}
.x-panel{font-family:var(--font-mono);text-transform:uppercase;font-size:10px;letter-spacing:.1em;color:var(--ink-55)}
.x-seg{display:inline-flex;border:1px solid var(--rule-section);font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.x-seg button{padding:5px 9px;color:var(--ink-55);border-right:1px solid var(--rule-section);background:none}
.x-seg button:last-child{border-right:0}
.x-seg button:hover{color:var(--ink-100)}
.x-seg button[aria-pressed="true"]{color:var(--bg-0);background:var(--accent)}

/* ---------- the wall ---------- */
.wall-head{padding:clamp(48px,7vw,84px) var(--pad-x) 40px;border-bottom:1px solid var(--rule-section)}
.wall-head .kicker{font-family:var(--font-mono);text-transform:uppercase;font-size:11px;letter-spacing:.14em;color:var(--ink-55)}
.wall-h1{margin-top:14px;font-size:clamp(48px,9vw,120px);line-height:.95;letter-spacing:-.045em;font-weight:700}
.wall-def{margin-top:22px;font-size:20px;line-height:1.5;color:var(--ink-60);max-width:720px;text-wrap:pretty}
.wall-def em{color:var(--ink-100);font-style:normal}
.wall-count{margin-top:26px;font-family:var(--font-mono);text-transform:uppercase;font-size:11px;letter-spacing:.12em;color:var(--ink-75);font-variant-numeric:tabular-nums}
.wall-rules{margin-top:26px;font-size:14px;line-height:1.6;color:var(--ink-55);max-width:720px;border-top:1px solid var(--rule-row);padding-top:18px}
.wall-tools{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;padding:14px var(--pad-x);border-bottom:1px solid var(--rule-section)}
.wall-tools .chips{padding:0;border:0}
.mon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--rule-row);border-bottom:1px solid var(--rule-section)}
.mon{display:flex;flex-direction:column;gap:0;background:var(--bg-0);text-decoration:none;color:inherit;padding:22px 22px 24px;min-width:0}
.mon:hover .mon-screen{border-color:var(--ink-45)}
.mon:hover .mon-sig{color:var(--ink-75)}
.mon:focus-visible{outline:1px solid var(--accent);outline-offset:-2px}
.mon-screen{position:relative;aspect-ratio:16/9;border:1px solid var(--rule-diagram);background:var(--bg-0);overflow:hidden}
.mon-screen img,.mon-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.mon-screen img{object-fit:cover;filter:grayscale(.15)}
.mon-screen iframe{opacity:0;transition:opacity .4s;pointer-events:none}
.mon-screen iframe.on{opacity:1}
.mon-screen .mon-enter{position:absolute;right:10px;bottom:8px;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);opacity:0;transition:opacity .15s;background:var(--bg-0);padding:3px 6px;border:1px solid var(--accent)}
.mon:hover .mon-enter,.mon:focus-visible .mon-enter{opacity:1}
.mon-bezel{position:relative}
.mon-sig{position:absolute;left:12px;top:-7px;padding:0 6px;background:var(--bg-0);font-family:var(--font-mono);font-size:9px;line-height:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45);display:inline-flex;align-items:center;gap:6px}
.mon-meta{margin-top:14px;font-family:var(--font-mono);text-transform:uppercase;font-size:10px;letter-spacing:.1em;color:var(--ink-45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mon-meta b{font-weight:400;color:var(--accent)}
.mon-title{margin-top:8px;font-size:21px;font-weight:500;letter-spacing:-.01em;line-height:1.25}
.mon-hyp{margin-top:8px;font-size:14px;line-height:1.5;color:var(--ink-55)}
.wall-empty{padding:40px var(--pad-x);font-family:var(--font-mono);text-transform:uppercase;font-size:11px;letter-spacing:.12em;color:var(--ink-45)}

/* main-page teaser row uses the same monitors; as many across as fit, no empty slots */
.teaser-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--rule-row)}
.teaser-grid .mon{padding:22px 24px 26px}
.teaser-more{padding:16px var(--pad-x);border-top:1px solid var(--rule-row)}

@media (max-width:1100px){
  .mon-grid,.teaser-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .x-lab .content{grid-template-columns:1fr}
  .x-controls{padding:10px var(--pad-x)}
}
@media (max-width:760px){
  .mon-grid,.teaser-grid{grid-template-columns:1fr}
  .mon{padding:18px var(--pad-x) 22px}
  .x-stagewrap[data-aspect="16:9"]{max-height:none}
  .x-stagewrap[data-aspect="fill"]{min-height:420px}
  .x-stagewrap[data-aspect="fill"] #stage{min-height:420px}
}

/* ---------- scroll pieces (aspect:'scroll') ----------
   The stage stops being a fixed box: the piece supplies its own scroll length,
   a sticky graphic stays in view, and the script column scrolls over it. */
.x-stagewrap[data-aspect="scroll"]{aspect-ratio:auto;max-height:none;overflow:visible}
.x-stagewrap[data-aspect="scroll"] #stage{position:relative;inset:auto;height:auto;overflow:visible}
.x-scrollsticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;z-index:1}
.x-scrollsticky canvas{display:block;width:100%;height:100%}
.x-scrolltrack{position:relative;z-index:2;margin-top:-100vh;margin-top:-100svh}
.x-beat{min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;padding:0 var(--pad-x) clamp(36px,8vh,90px)}
/* bare modes: nothing but the sticky graphic survives, whatever else a scroll
   piece puts in its stage (script column, methods panel, screen-reader copy) */
html.x-thumb .x-scrollsticky~*,html.x-embed .x-scrollsticky~*{display:none}
html.x-thumb .x-scrollsticky,html.x-embed .x-scrollsticky{position:absolute;inset:0;height:100%}

/* ---------- viewport pieces: the film owns the window ----------
   Set by shell.js for aspect:'viewport'. The page never scrolls; a strip sits above the stage;
   the lab note is a panel that slides over the film. */
:root{--vstrip-h:44px}
html.x-viewport{height:100%;overflow:hidden;overscroll-behavior:none}
html.x-viewport body{position:fixed;inset:0;overflow:hidden;overscroll-behavior:none}
html.x-viewport #stage{position:absolute;top:var(--vstrip-h);left:0;right:0;bottom:0;width:auto;height:auto}
html.x-viewport .x-embedframe{position:absolute;inset:0;width:100%;height:100%}
.x-vstrip{position:absolute;top:0;left:0;right:0;height:var(--vstrip-h);z-index:5;display:flex;align-items:center;gap:22px;padding:0 20px;background:var(--bg-0);border-bottom:1px solid var(--rule-section);white-space:nowrap}
.x-vstrip .wordmark{font-size:15px}
.x-vstrip-r{margin-left:auto;display:flex;align-items:center;gap:20px}
.x-vbtn{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-55);white-space:nowrap}
.x-vbtn:hover{color:var(--accent)}
.x-vbtn[aria-pressed="true"]{color:var(--accent)}
.x-notes{position:absolute;top:var(--vstrip-h);right:0;bottom:0;z-index:6;width:min(520px,100%);overflow:auto;padding:26px 32px 44px;background:var(--bg-0);border-left:1px solid var(--rule-section);transform:translateX(100%);visibility:hidden;transition:transform .28s var(--ease-settle),visibility 0s linear .28s;-webkit-overflow-scrolling:touch}
.x-notes.open{transform:none;visibility:visible;transition:transform .28s var(--ease-settle),visibility 0s}
@media (prefers-reduced-motion:reduce){.x-notes,.x-notes.open{transition:none}}
.x-notes-close{position:absolute;top:16px;right:20px}
.x-notes .x-kicker{padding-right:80px}
.x-notes-title{margin-top:10px;font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.x-notes-hyp{margin-top:12px;font-size:16px;line-height:1.55;color:var(--ink-60);text-wrap:pretty}
.x-notes .x-legend{padding:12px 0 0;border-bottom:0;line-height:1.6;white-space:normal}
.x-notes .x-note-block{margin-top:24px}
.x-notes .x-note-block p{font-size:15px}
.x-notes .x-meta{margin-top:28px}
.x-notes-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.x-notes-all{display:inline-block;margin-top:22px}
.x-vnotice{display:none}
@media (max-width:900px) and (orientation:portrait){
  :root{--vnotice-h:30px}
  .x-vnotice{display:flex;align-items:center;position:absolute;top:var(--vstrip-h);left:0;right:0;height:var(--vnotice-h);z-index:5;padding:0 14px;font-size:9px;letter-spacing:.1em;color:var(--ink-55);background:var(--bg-0);border-bottom:1px solid var(--rule-row);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.x-viewport #stage,.x-notes{top:calc(var(--vstrip-h) + var(--vnotice-h))}
}
html.x-mobile{--vnotice-h:0px}
html.x-mobile .x-vnotice{display:none}
@media (max-width:640px){
  .x-vstrip{gap:14px;padding:0 14px}
  .x-vstrip .x-vhide,.x-vstrip-r .x-vhide{display:none}
  .x-notes{padding:22px 20px 40px}
}

/* v4: the console strip (clocks, countdown, theme switches) is retired on experiment pages */
.x-frame .console .strip{display:none}