/* vNext prototype (legacy, to be reduced page by page). Not a source of truth for core. */
/* ===== Lab page ===== */
.phero .photo { aspect-ratio: 4 / 3; overflow: hidden; }
.phero .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.act code, .tile-bar code { font: 12px var(--font-mono); text-transform: none; letter-spacing: 0; }
.tl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tl-b { display: grid; gap: 22px; padding: 20px 18px; min-height: 170px; align-content: space-between; }
.tl-b p { font-size: 1.05rem; }
.tl-b .mono { color: var(--muted); }
.tile-bar .st { margin-inline-start: auto; }
@media (max-width: 900px) { .tl-grid { grid-template-columns: minmax(0, 1fr); } }
.sk-lab { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 12px; }
.sk-lab > div { border: 1px solid var(--line); background: var(--surface); padding: 14px; display: grid; gap: 8px; align-content: start; }
.sk-src { min-height: 260px; color: var(--muted); text-transform: none; }
.sk-src b, .sk-pv b, .sk-tm b { color: var(--fg); text-transform: uppercase; }
.sk-pv { min-height: 260px; }
.sk-pv i { display: block; height: 100%; min-height: 190px; background: repeating-linear-gradient(var(--axis), var(--line) 0 var(--hair), transparent calc(var(--hair) + .7px) var(--pitch)); border: 1px dashed var(--line); }
.sk-tm { grid-column: 1 / -1; }
.sk-tm span { display: block; height: 14px; background: var(--line); position: relative; }
.sk-tm span i { position: absolute; inset-block: 0; left: var(--a); width: var(--b); background: var(--accent); }
@media (max-width: 700px) { .sk-lab { grid-template-columns: minmax(0, 1fr); } }
.rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rules li { display: grid; gap: 8px; padding: 18px; border: 1px solid var(--line); background: var(--surface); }
.rules b { font: 800 1.4rem/1 var(--font-display); letter-spacing: -.02em; }
.rules span { color: var(--muted); }
@media (max-width: 700px) { .rules { grid-template-columns: minmax(0, 1fr); } }
.vd { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 14px; align-items: start; }
.vd .code { margin: 0; }
.vd-side { display: grid; gap: 8px; padding: 18px; border: 1px solid var(--line); background: var(--surface); }
.vd-side p:not(.mono) { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.vd-side code { padding: 2px 6px; border: 1px solid var(--line); }
.code { padding: 18px; overflow-x: auto; background: var(--fg); color: var(--bg); font: 13px/1.6 var(--font-mono); }
@media (max-width: 800px) { .vd { grid-template-columns: minmax(0, 1fr); } }
.rules a { justify-self: start; color: var(--fg); text-underline-offset: 4px; font-size: 12px; }
.rules a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.act .src a { color: var(--fg); }
.lb-all { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 18px; font-size: 12px; text-transform: none; letter-spacing: 0; }
.lb-all span { color: var(--muted); }
.lb-all a { color: var(--fg); text-underline-offset: 4px; }
/* Lab: jobs, real compiler run, catalog bars, editor capture */
.lb-jobs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.lb-jobs li { display: grid; gap: 12px; align-content: start; padding: 18px; }
.lb-jobs b { color: var(--muted); font-weight: 400; }
.lb-jobs h3 { font: 800 1.25rem/1.1 var(--font-display); letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.lb-jobs p { color: var(--muted); margin: 0; }
.lb-jobs a { color: var(--fg); text-underline-offset: 4px; font-size: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lb-jobs a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 1000px) { .lb-jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .lb-jobs { grid-template-columns: minmax(0, 1fr); } }
.lb-run { display: grid; gap: 14px; }
.lb-term { border: 1px solid var(--line); background: var(--surface); }
.lb-term-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--muted); }
.lb-issues { list-style: none; margin: 0; padding: 0; text-transform: none; letter-spacing: 0; }
.lb-issues li { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 6px 16px; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.5; }
.lb-issues li:last-child { border-bottom: 0; }
.lb-issues em { font-style: normal; color: var(--accent); }
.lb-issues span { overflow-wrap: anywhere; }
@media (max-width: 600px) { .lb-issues li { grid-template-columns: minmax(0, 1fr); } }
.lb-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; text-transform: none; letter-spacing: 0; font-size: 12px; }
.lb-bars li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 2.5rem; gap: 12px; align-items: center; }
.lb-bars span { color: var(--muted); overflow-wrap: anywhere; }
.lb-bars i { display: block; height: 14px; width: calc(var(--v) / 46 * 100%); min-width: 6px; background: var(--accent); }
.lb-bars b { font-weight: 400; text-align: end; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .lb-bars li { grid-template-columns: 6.5rem minmax(0, 1fr) 2rem; gap: 8px; } }
.lb-shot { margin: 0; border: 1px solid var(--line); background: var(--surface); }
.lb-shot img { display: block; width: 100%; height: auto; max-width: 100%; }
.lb-shot figcaption { padding: 12px 16px; border-top: 1px solid var(--line); color: var(--muted); }
.lb-shot a { color: var(--fg); text-underline-offset: 4px; }
.sk-lab + .rules { margin-top: 14px; }
/* Lab hero: self-contained session card (no photo behind it) */
.phero--stage .ph-media:has(.lb-hero) { min-height: 0; display: grid; align-items: center; }
.lb-hero { position: relative; left: auto; bottom: auto; width: 100%; max-width: 480px; justify-self: end; }
.lb-hero .ph-card-in { aspect-ratio: auto; display: grid; gap: 14px; padding: 22px; }
.lb-hero-q { font: 700 1.15rem/1.3 var(--font-display); letter-spacing: -.01em; text-wrap: balance; }
.lb-code { display: block; padding: 8px 10px; border: 1px solid var(--line); font-size: 12px; text-transform: none; letter-spacing: 0; min-width: 0; overflow: hidden; }
.lb-type { display: inline-block; vertical-align: top; max-width: 100%; }
.lb-hero-t { display: grid; gap: 6px; }
.lb-hero-t i { display: block; height: 10px; background: var(--line); position: relative; }
.lb-hero-t i::after { content: ""; position: absolute; inset-block: 0; left: var(--a); width: var(--b); background: var(--accent); }
@media (max-width: 820px) { .lb-hero { justify-self: stretch; max-width: none; } }
.lb-hero, .lb-hero .ph-card-in, .lb-hero .ph-card-in > * { min-width: 0; max-width: 100%; }
.lb-hero-q { overflow-wrap: anywhere; }