/* Generated from the studio prototype's pages.css by tools/import-studio.mjs; every selector is scoped to this page's body class (tools/css-scope.mjs). */
/* ===== LabOS ===== */
body.page-labos.labos { font-family: 'Hanken Grotesk', var(--body); }
/* Release 007 · LabOS · the app's own world inside the rail. Tokens read from the app's studio-dark theme
   (2026-09-28): ground hsl(240 6% 6%), text #ececec, accent hsl(17 66% 55%), Hanken Grotesk. State colours keep
   their meaning inside the screens; the page itself uses the accent for one thing: the demo mark. */
body.page-labos.labos h1, body.page-labos.labos h2, body.page-labos.labos h3 { font-family: 'Hanken Grotesk', var(--body); font-weight: 600; letter-spacing: -.02em; }
body.page-labos.labos .p-top h1 { font-size: clamp(56px, 9vw, 132px); letter-spacing: -.04em; line-height: .88; }
body.page-labos.labos .kicker .live { color: var(--w-accent); }
body.page-labos.labos .sec .head { border-bottom-color: var(--w-line); }
body.page-labos.labos .sec .head .no { color: var(--w-accent); }
body.page-labos.labos .need, body.page-labos.labos .gap { border-color: var(--w-line); }
body.page-labos.labos .ask { border-left-color: var(--w-accent); }
body.page-labos.labos .wbtn[aria-pressed="true"], body.page-labos.labos .wbtn.fill { background: var(--w-ink); color: var(--w-bg); border-color: var(--w-ink); }
body.page-labos.labos .spec th, body.page-labos.labos .spec td { border-bottom-color: var(--w-line); }
body.page-labos.labos .figs li { border-color: var(--w-line); background: var(--w-panel); color: var(--w-ink); }
body.page-labos.labos .figs figcaption { color: var(--w-muted); }
body.page-labos.labos .stripes { flex: 1; height: 8px; background: repeating-linear-gradient(90deg, var(--w-line) 0 1px, transparent 1px 4px); min-width: 20px; }
body.page-labos .demo-note { border: 1px solid var(--w-line); padding: 12px 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
body.page-labos .demo-note p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--w-muted); }
body.page-labos .switches { display: flex; flex-direction: column; gap: 6px; }

/* ---------- recordings ---------- */
body.page-labos .clipgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
body.page-labos .clip { position: relative; border: 1px solid var(--w-line); background: var(--w-media); }
body.page-labos .clip .box { position: relative; aspect-ratio: 16 / 9; background: #000; }
body.page-labos .clip video, body.page-labos .clip img.poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
body.page-labos .clip .rec { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; font: 10px var(--meta); letter-spacing: .08em; text-transform: uppercase; background: rgba(14,14,16,.85); color: var(--w-ink); border: 1px solid var(--w-line); padding: 5px 8px; }
body.page-labos .clip .rec i { width: 8px; height: 8px; background: var(--w-accent); display: inline-block; }
body.page-labos .clip .cf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-top: 1px solid var(--w-line); font-size: 13.5px; }
body.page-labos .clip .cf .dur { font: 11px var(--meta); letter-spacing: .05em; color: var(--w-muted); }
body.page-labos .clip .cf .wbtn { margin-left: auto; font-size: 11px; padding: 7px 10px; }
body.page-labos.structure-clips .clipgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.page-labos.structure-clips .clip:first-child { grid-column: 1 / -1; }

/* ---------- the paper demo (marked) ---------- */
body.page-labos .demo-card { border: 1px solid var(--w-ink); background: var(--w-panel); }
body.page-labos .demo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; border-bottom: 1px solid var(--w-ink); font: 11px var(--meta); letter-spacing: .06em; text-transform: uppercase; color: var(--w-muted); }
body.page-labos .demo-title { color: var(--w-ink); }
body.page-labos .demo-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--w-line); }
body.page-labos .demo-steps li { border-right: 1px solid var(--w-line); }
body.page-labos .demo-steps li:last-child { border-right: 0; }
body.page-labos .demo-steps button { width: 100%; text-align: left; background: transparent; color: var(--w-muted); border: 0; padding: 12px 12px; font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
body.page-labos .demo-steps button b { font: 10px var(--meta); letter-spacing: .06em; }
body.page-labos .demo-steps button span { font-size: 14px; font-weight: 600; }
body.page-labos .demo-steps button[aria-current="step"] { color: var(--w-ink); box-shadow: inset 0 -3px 0 var(--w-accent); }
body.page-labos .demo-steps button.done { color: var(--w-ink); }
body.page-labos .demo-steps button:focus-visible { outline: 2px solid var(--w-accent); outline-offset: -3px; }
body.page-labos .demo-body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px 32px; padding: 18px 16px 20px; }
body.page-labos .demo-figs { margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
body.page-labos .demo-figs div { border: 1px solid var(--w-line); padding: 10px 12px; min-height: 84px; }
body.page-labos .demo-figs dt { font: 10px var(--meta); letter-spacing: .06em; text-transform: uppercase; color: var(--w-muted); }
body.page-labos .demo-figs dd { margin: 6px 0 0; font-size: 22px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
body.page-labos .demo-figs dd small { font-size: 12px; font-weight: 400; color: var(--w-muted); margin-left: 3px; }
body.page-labos .demo-figs dd.empty { color: var(--w-muted); font-weight: 400; font-size: 14px; }
body.page-labos .demo-line { font-size: 16px; line-height: 1.45; margin: 0 0 12px; }
body.page-labos .demo-ctl { display: flex; gap: 8px; margin-bottom: 12px; }

/* ---------- the tour: console split or large screens ---------- */
body.page-labos .console { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px; align-items: start; }
body.page-labos .briefing { display: flex; flex-direction: column; }
body.page-labos .step { border-top: 1px solid var(--w-line); padding: 18px 0 22px; min-height: 40vh; scroll-margin-top: 20px; }
body.page-labos .step:first-child { border-top: 0; }
body.page-labos .step .st-no { font: 11px var(--meta); letter-spacing: .07em; text-transform: uppercase; color: var(--w-accent); }
body.page-labos .step h3 { font-size: 22px; margin: 6px 0 8px; }
body.page-labos .step p { font-size: 14.5px; line-height: 1.5; margin: 0 0 8px; color: var(--w-ink); }
body.page-labos .step .st-act { font: 11px/1.5 var(--meta); letter-spacing: .04em; color: var(--w-muted); }
body.page-labos .step .st-act b { color: var(--w-ink); font-weight: 400; }
body.page-labos .step[aria-current="true"] h3 { color: var(--w-ink); }
body.page-labos .step:not([aria-current="true"]) { opacity: .62; }
body.page-labos .step .step-fig { display: none; }
body.page-labos .monitor-col { position: sticky; top: calc(var(--nav-h) + 16px); display: flex; flex-direction: column; gap: 14px; }
body.page-labos .monitor { margin: 0; border: 1px solid var(--w-ink); background: var(--w-media); }
body.page-labos .mon-bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--w-ink); background: var(--w-panel); font: 11px var(--meta); letter-spacing: .06em; text-transform: uppercase; }
body.page-labos .mon-screen { position: relative; aspect-ratio: 16 / 9; background: #000; }
body.page-labos .mon-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 220ms ease; }
body.page-labos .mon-screen img.out { opacity: 0; }
@media (prefers-reduced-motion: reduce) { body.page-labos .mon-screen img { transition: none; } }
body.page-labos .mon-cap { margin: 0; padding: 8px 12px; border-top: 1px solid var(--w-line); font: 11px/1.5 var(--meta); letter-spacing: .04em; color: var(--w-muted); }
body.page-labos .plate { border: 1px solid var(--w-line); background: var(--w-panel); padding: 12px 14px 12px; }
body.page-labos .plate-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font: 11px var(--meta); letter-spacing: .07em; text-transform: uppercase; color: var(--w-muted); margin-bottom: 8px; }
body.page-labos .plate dl { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; }
body.page-labos .plate dt { font: 10px var(--meta); letter-spacing: .06em; text-transform: uppercase; color: var(--w-muted); }
body.page-labos .plate dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; min-height: 20px; }
body.page-labos .plate dd.empty { font-weight: 400; color: var(--w-muted); border-bottom: 1px dotted var(--w-line); width: 60%; }
body.page-labos .plate dd.empty::before { content: "\00a0"; }
body.page-labos .plate-foot { margin: 10px 0 0; font: 10px/1.5 var(--meta); letter-spacing: .04em; color: var(--w-muted); }

/* screens layout: every step carries its own large screen, no sticky monitor */
body.page-labos.layout-screens .console { grid-template-columns: minmax(0, 1fr); }
body.page-labos.layout-screens .monitor-col { display: none; }
body.page-labos.layout-screens .step { min-height: 0; opacity: 1; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; padding: 28px 0; }
body.page-labos.layout-screens .step .step-fig { display: block; margin: 0; border: 1px solid var(--w-ink); background: var(--w-media); position: relative; }
body.page-labos.layout-screens .step .step-fig img { display: block; width: 100%; height: auto; }
body.page-labos.layout-screens .step .step-fig figcaption { padding: 8px 12px; border-top: 1px solid var(--w-line); font: 11px/1.5 var(--meta); letter-spacing: .04em; color: var(--w-muted); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
body.page-labos.layout-screens .plate-inline { display: block; }
body.page-labos .plate-inline { display: none; }

/* ---------- outputs ---------- */
body.page-labos .outputs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
body.page-labos .outputs figure { margin: 0; border: 1px solid var(--w-line); background: var(--w-panel); }
body.page-labos .outputs .paper { background: #fff; padding: 6%; }
body.page-labos .outputs .paper img { width: 100%; height: auto; display: block; }
body.page-labos .outputs figcaption { padding: 8px 12px; font: 11px/1.5 var(--meta); letter-spacing: .04em; color: var(--w-muted); border-top: 1px solid var(--w-line); }

/* ---------- the frames strip ---------- */
body.page-labos .strip { list-style: none; margin: 0; padding: 0 0 8px; display: grid; grid-auto-flow: column; grid-auto-columns: 220px; gap: 10px; overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x proximity; }
body.page-labos .strip li { scroll-snap-align: start; border: 1px solid var(--w-line); background: var(--w-panel); }
body.page-labos .strip .pv { width: 100%; aspect-ratio: 4 / 5; border: 0; border-bottom: 1px solid var(--w-line); }
body.page-labos .strip figure { margin: 0; }
body.page-labos .strip figcaption { padding: 8px 10px; font: 10px/1.5 var(--meta); letter-spacing: .05em; text-transform: uppercase; color: var(--w-muted); }

/* ---------- the lab ---------- */
body.page-labos .never { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
body.page-labos .never li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; font-size: 14.5px; border-bottom: 1px dotted var(--w-line); padding-bottom: 8px; }

@media (max-width: 1100px) {
  body.page-labos .console { grid-template-columns: 280px minmax(0, 1fr); }
  body.page-labos .demo-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.page-labos .plate dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  body.page-labos.labos .p-top h1 { font-size: clamp(56px, 20vw, 88px); }
  body.page-labos .clipgrid, body.page-labos.structure-clips .clipgrid { grid-template-columns: 1fr; }
  body.page-labos.structure-clips .clip:first-child { grid-column: auto; }
  body.page-labos .demo-title { flex-basis: 100%; order: 3; }
  body.page-labos .demo-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.page-labos .demo-steps li:nth-child(4n) { border-right: 0; }
  body.page-labos .demo-steps li { border-bottom: 1px solid var(--w-line); }
  body.page-labos .demo-body { grid-template-columns: 1fr; }
  body.page-labos .demo-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.page-labos .console { grid-template-columns: 1fr; }
  body.page-labos .monitor-col { position: sticky; top: 56px; order: -1; z-index: 3; background: var(--w-bg); padding-bottom: 8px; }
  body.page-labos .plate { display: none; }
  body.page-labos .plate-inline { display: block; }
  body.page-labos .step { min-height: 0; padding: 16px 0 18px; }
  body.page-labos .step:not([aria-current="true"]) { opacity: 1; }
  body.page-labos.layout-screens .step { grid-template-columns: 1fr; }
  body.page-labos .outputs { grid-template-columns: 1fr; }
  body.page-labos .strip { grid-auto-columns: 180px; }
}