/* agent-native-os/portal/lab/lab.css
   The Lab: Program Home ("This Month"). Field Manual chrome. Ported from the
   09-18-2026 mockup Wade chose (mockups-lab/a/, "Option A: Featured"); the
   alternative and the item-page exemplar stay in mockups-lab/ as the record.
   Loads AFTER field-manual.css and _shell.css, so tokens, .mk/.mk-wrap/
   .mk-marq/.mk-foot, .btn, .eyebrow and .cover-flag are already on the page.

   Vocabulary is the LMS shelf/card idiom (Camp home, Agent-Native OS library):
   .shelf .shelf-plate .stage-num .shelf-head .shelf-meta .shelf-sub .row
   .card .cover .card-body .badges .badge .card-meta. Every rule is scoped
   under .lab so it never leaks into the rail or the shared chassis.

   Parts copied from the design-elite bin (copy-not-import; registry names in
   the comments): empty-state, stamp, live-dot. Token names mapped to the
   portal (--paper-2 -> --cream-2, --lime -> --neon, --on-lime -> --on-accent).

   No em dashes in visible copy. No hyperlinks on tiles: a tile is the click
   only when the thing it opens is released and live (a.card); everything
   else is a div.card. */

.lab {
  --lab-bw: var(--fm-border-w);            /* 2px light, hairline dark */
  --lab-r: 4px;
  --lab-shadow: var(--fm-shadow);           /* 6px ink light, none dark */
  --lab-shadow-sm: var(--fm-shadow-sm);     /* 3px ink light, none dark */
  --success: #0A7A4E;            /* design-elite --success, AA-darkened for light surfaces */
  --yellow: #FFE45C;             /* Essentials co-faq highlighter (Wade 09-14) */
  --yellow-tint: #FFF6C7;
  --marker: var(--neon);
}
.lab .a-neon { --acc: var(--neon); }
.lab .a-blue { --acc: var(--blue); }
.lab .a-coral{ --acc: var(--coral); }
.lab .a-teal { --acc: var(--teal); }
.lab .a-ink { --acc: var(--ink); }
.lab .a-cream{ --acc: var(--cream-2); }

/* ---------- marquee: the page head, same shape as every program home ---------- */
.lab .mk-marq { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 8px; }
.lab .mk-marq h1 { margin-bottom: 0; line-height: 1.2; }
.lab .mk-marq h1 em { font-style: normal; background: var(--neon); color: var(--on-accent); padding: 0 10px 2px; border-radius: var(--lab-r); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.lab .mk-season { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink); border: var(--lab-bw) solid var(--fm-border-c); background: var(--surface); padding: 7px 12px; border-radius: var(--lab-r); box-shadow: var(--lab-shadow-sm); white-space: nowrap; }
.lab .mk-sub { margin-bottom: 26px; }

/* ---------- featured: the curated slider ----------
   The art column IS the thumbnail (Wade 09-18): a 16:9 image edge to edge, no field around it,
   no frame, nothing laid over it. The columns are 42 / 58, so the slide's own ratio is
   100 : (58 * 9 / 16) = 1000 : 326.25, which makes the art column exactly 16:9 and gives the
   text column that height to fit inside. Type is sized in cqw (1% of the block's width) so the
   text wraps the same way at every desktop width and never outgrows the thumbnail; the
   measured floor is 1280px wide with the rail open, and below that the slide stacks (art on
   top, text under it). Slider chrome (dots, arrows, pause) sits in the text column's foot. */
.lab-feat { position: relative; container-type: inline-size; border: var(--lab-bw) solid var(--fm-border-c); border-radius: var(--lab-r); box-shadow: var(--fm-flat, 8px 8px 0 var(--ink)); background: var(--surface); overflow: hidden; margin: 0 0 22px; }
.lab-feat-track { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.lab-feat-track::-webkit-scrollbar { display: none; }
.lab-feat-track:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
.lab-slide { flex: 0 0 100%; scroll-snap-align: start; }
.lab-slide-link { height: 100%; display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); aspect-ratio: 1000 / 326.25; color: inherit; text-decoration: none; }
.lab-slide-link:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
.ls-body { padding: 2cqw 3cqw 2.2cqw; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.ls-eye { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-2); margin-bottom: 1.1cqw; }
.ls-eye::before { content: ''; width: 22px; height: 2px; background: var(--sl-acc, var(--neon)); outline: 1px solid var(--ink); flex: none; }
.ls-eye .badge { margin-left: 2px; }
.ls-body h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.85cqw, 40px); line-height: 1.2; /* 1.08 let a second-line highlight paint over the first line's descenders (Wade 09-19) */ letter-spacing: -0.03em; color: var(--ink); margin: 0 0 1.1cqw; }
.ls-body h2 em { font-style: normal; background: var(--sl-acc, var(--neon)); color: var(--on-accent); padding: 0 0.3em 0.06em; border-radius: var(--lab-r); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ls-body > p { font-size: clamp(13.5px, 1.35cqw, 16.5px); line-height: 1.45; color: var(--ink-2); margin: 0 0 1.4cqw; }
.ls-body > p strong { color: var(--ink); font-weight: 600; }
.ls-actions { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.ls-actions .btn { padding: 10px 16px; font-size: 13.5px; }
/* the slide's own marks (highlight, kicker rule, button) take the accent the studio painted into its thumbnail: lab-art.mjs
   writes data-accent on the art box from the picture's palette accent; a slide without one stays neon (Wade 09-22) */
.lab-slide:has(.ls-art[data-accent="neon"]) { --sl-acc: var(--neon); }
.lab-slide:has(.ls-art[data-accent="neon-soft"]) { --sl-acc: var(--neon-soft); }
.lab-slide:has(.ls-art[data-accent="blue"]) { --sl-acc: var(--blue); }
.lab-slide:has(.ls-art[data-accent="coral"]) { --sl-acc: var(--coral); }
.lab-slide:has(.ls-art[data-accent="teal"]) { --sl-acc: var(--teal); }
.lab-slide:has(.ls-art[data-accent="purple"]) { --sl-acc: var(--purple); }
.lab-slide:has(.ls-art[data-accent="violet"]) { --sl-acc: var(--violet); }
.lab-slide:has(.ls-art[data-accent="amber"]) { --sl-acc: var(--amber); }
.lab-slide:has(.ls-art[data-accent="rose"]) { --sl-acc: var(--rose); }
.lab-slide .ls-actions .btn-primary { background: var(--sl-acc, var(--neon)); }
.lab-slide:has(.ls-art[data-accent="violet"]) .ls-actions .btn-primary { background: var(--neon); }   /* ink on violet is too faint at button size */
/* The host, when a slide is somebody's live session: a small taped polaroid and the name and
   org, the same host line the session cards carry. Sits beside the button so it costs the
   text column almost no height (the 1280 budget is tight). A photo may tilt; prose may not. */
.ls-host { display: inline-flex; align-items: center; gap: 14px; }
.ls-pola { position: relative; display: block; width: clamp(60px, 6.4cqw, 88px); padding: 4px 4px 11px; background: var(--surface); border: var(--fm-border-w-sm) solid var(--fm-border-c); box-shadow: var(--fm-shadow-sm); transform: rotate(-4deg); flex: none; }
.ls-pola::before { content: ''; position: absolute; top: -7px; left: 50%; width: 38px; height: 12px; transform: translateX(-50%) rotate(-6deg); background: rgba(255,228,92,0.78); border: 1px solid rgba(17,17,17,0.22); z-index: 2; }
.ls-pola .ph { display: block; overflow: hidden; aspect-ratio: 1 / 1; }
.ls-pola img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(100%) contrast(1.05); }
/* two crops the source photos need: a two-shot pulled in to the heads, and a circle-on-white avatar pushed past its corners */
.ls-pola.zoom-heads img { object-position: 50% 22%; transform: scale(2.4); transform-origin: 50% 24%; }
.ls-pola.zoom-circle img { transform: scale(1.5); }
.ls-host-txt { display: flex; flex-direction: column; line-height: 1.2; max-width: clamp(108px, 11cqw, 150px); }   /* two names break onto two lines; sized so button + host fit one row at 1280 */
.ls-host-txt b { font-size: clamp(13px, 1.25cqw, 15px); font-weight: 600; color: var(--ink); }
.ls-host-txt .org { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-3); margin-top: 2px; }
.ls-art { position: relative; min-width: 0; border-left: var(--lab-bw) solid var(--on-accent); background: var(--acc, var(--cream-2)); overflow: hidden; }
.ls-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ls-art img.is-photo { filter: grayscale(100%) contrast(1.05); object-position: 50% 30%; }
/* a screenshot that must stay readable (two rows of cards) shows whole on the cream field */
.ls-art img.is-contain { object-fit: contain; }
/* the thumbnail placeholder for an app lesson: the two marks on the stage, said in words */
.ls-art.is-marks { display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; background: var(--cream); background-image: linear-gradient(var(--grid-whisper) 1px, transparent 1px), linear-gradient(90deg, var(--grid-whisper) 1px, transparent 1px); background-size: 28px 28px; }
.ls-art.is-marks .marks { display: flex; align-items: center; gap: clamp(12px, 1.6cqw, 22px); }
.ls-art.is-marks .marks img { width: clamp(52px, 7cqw, 96px); height: auto; aspect-ratio: 1 / 1; padding: clamp(9px, 1.1cqw, 16px); background: var(--surface); border: var(--lab-bw) solid var(--fm-border-c); border-radius: 12px; box-shadow: var(--lab-shadow-sm); }
.ls-art.is-marks .marks b { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.6cqw, 36px); color: var(--ink); }
.ls-art.is-marks .cap { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-2); }
.ls-art.is-marks .ph { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-3); border: 1px dashed var(--ink-3); border-radius: 2px; padding: 4px 9px; }
/* the one slide without an image yet: the number, drawn as its own 16:9 card */
.ls-art.is-stat { display: grid; place-items: center; text-align: center; background: var(--cream); background-image: linear-gradient(var(--grid-whisper) 1px, transparent 1px), linear-gradient(90deg, var(--grid-whisper) 1px, transparent 1px); background-size: 28px 28px; }
.ls-art.is-stat b { font-family: var(--font-display); font-weight: 700; font-size: clamp(56px, 9cqw, 132px); letter-spacing: -0.04em; line-height: 1; color: var(--ink); background: var(--neon); padding: 0 0.15em 0.05em; border-radius: var(--lab-r); }
.ls-art.is-stat span { display: block; margin-top: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-2); }

/* slider chrome: a strip under the slides, outside the 16:9 constraint, so it costs the text
   column nothing and never sits on the image. Dots and count left, arrows and pause right. */
.lab-feat-ui { display: flex; align-items: center; gap: 12px; padding: 9px 3cqw; border-top: var(--lab-bw) solid var(--fm-border-c); background: var(--cream); }
.lab-dots { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lab-dot { width: 14px; height: 14px; padding: 0; border-radius: 50%; border: var(--fm-border-w) solid var(--fm-border-c); background: var(--surface); cursor: pointer; transition: background .12s var(--ease), transform .12s var(--ease); }
.lab-dot:hover { transform: scale(1.12); }
.lab-dot:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.lab-dot[aria-current="true"] { background: var(--neon); }
.lab-feat-count { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-2); }
.lab-feat-nav { display: flex; gap: 6px; margin-left: auto; }
.lab-feat-nav .scroll-arrow { position: static; transform: none; opacity: 1; width: 34px; height: 34px; }
.lab-feat-nav .scroll-arrow:hover { transform: translate(-1px, -1px); }
.lab-feat-nav .scroll-arrow:active { transform: translate(1px, 1px); }
.lab-feat-nav .scroll-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.lab-feat-pause { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-2); background: var(--surface); border: var(--fm-border-w-sm) solid var(--fm-border-c); border-radius: 2px; padding: 6px 9px; cursor: pointer; }
.lab-feat-pause:hover { background: var(--neon); color: var(--on-accent); }

/* ---------- next up: the one live-data strip, bound to the session feed ---------- */
.lab-next { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px 22px; border: var(--lab-bw) solid var(--fm-border-c); border-radius: var(--lab-r); background: var(--neon-tint); box-shadow: var(--fm-flat, 4px 4px 0 var(--ink)); padding: 16px 20px; margin: 0 0 46px; }
.lab-next.is-empty, .lab-next.is-loading, .lab-next.is-unavailable, .lab-next.is-signed-out { background: var(--cream-2); border-style: dashed; box-shadow: none; }
.ln-k { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.ln-main { min-width: 0; }
.ln-t { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.3px; color: var(--ink); margin: 0 0 2px; }
.ln-when { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-2); }
.ln-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.lab-next .btn { padding: 10px 16px; font-size: 13.5px; }
.ln-note { font-size: 14.5px; color: var(--ink-2); margin: 0; }
.ln-note strong { color: var(--ink); }

/* ---------- shelves ---------- */
.lab .shelf { position: relative; margin: 0 0 54px; scroll-margin-top: 120px; }
/* field-manual.css gives .shelf-plate margin: 0 var(--inset), for pages whose rows are inset by
   the same amount. Here .mk-wrap already owns the gutter, so the plate sits flush with the rows. */
.lab .shelf-plate { margin: 0 0 4px; }
/* the plate with a module beside it (the home's Next-up shelf carries the live calendar there,
   Wade 09-19: the plate is fit-content and the space to its right sat empty) */
.lab .shelf-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 22px; align-items: stretch; margin: 0 0 4px; }
.lab .shelf-top .shelf-plate { width: auto; max-width: none; margin: 0; }
.lab .shelf-top .lab-next { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 10px; margin: 0; padding: 18px 22px; }
.lab .shelf-top .ln-actions { justify-content: flex-start; }
.lab .shelf-top .ln-t { font-size: 20px; }
@media (max-width: 1100px) { .lab .shelf-top, .lab .shelf.is-drop .shelf-top, .lab .shelf.is-friday .shelf-top { grid-template-columns: minmax(0, 1fr); } .lab .shelf-top .shelf-plate { width: fit-content; max-width: 880px; } }
.lab .stage-num { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--ink); letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 8px; }
.lab .stage-num::before { content: ''; width: 28px; height: 2px; background: var(--neon); outline: 1px solid var(--ink); display: inline-block; }
.lab .shelf.is-friday .stage-num::before { background: var(--ink); }
.lab .shelf.is-drop .stage-num::before { background: var(--coral); }
.lab .shelf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 6px; }
.lab .shelf-head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.8px; margin: 0; }
.lab .shelf-head .shelf-meta, .lab .band-head .shelf-meta { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; color: var(--ink-2); letter-spacing: 1.5px; text-transform: uppercase; border: 1px solid var(--ink); background: var(--surface); padding: 4px 9px; white-space: nowrap; }
/* field-manual.css pins the chip to the plate's top-right corner; on a short plate that lands it over the
   kicker. Here it sits at the end of the headline row instead. */
.lab .shelf-plate .shelf-head .shelf-meta, .lab .band-head .shelf-meta { position: static; }
.lab .shelf-sub { color: var(--ink-2); font-size: 15px; line-height: 1.55; max-width: 760px; margin: 0 0 18px; }
.lab .shelf-sub strong { color: var(--ink); }
/* a placeholder that names its owner, in words (the session pages and .page-note carry the same chip) */
.lab .needs { display: inline-block; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #C22800; border: 1.5px dashed #C22800; padding: 2px 7px; border-radius: 2px; vertical-align: middle; margin-left: 6px; }
.lab .shelf-sub .src { display: inline-block; margin-left: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px dashed var(--ink-3); }

/* the 4px of side padding is breathing room for the hover lift inside the overflow box; the
   negative margin puts the first card on the same left edge as every other block */
.lab .row { display: flex; gap: 22px; margin: 0 -6px 0 -4px; padding: 10px 6px 30px 4px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-padding-left: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.lab .row::-webkit-scrollbar { display: none; }
.lab .row.dragging { scroll-snap-type: none; cursor: grabbing; }
.lab .shelf .scroll-arrow { position: absolute; top: 55%; transform: translateY(-50%); opacity: 0; z-index: 12; }
.lab .shelf .scroll-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.lab .shelf:hover .scroll-arrow:not(.disabled), .lab .shelf:focus-within .scroll-arrow:not(.disabled) { opacity: 1; }
.lab .shelf .scroll-arrow:hover { transform: translateY(-50%) translate(-1px, -1px); }
.lab .shelf .scroll-arrow:active { transform: translateY(-50%) translate(1px, 1px); }
.lab .shelf .scroll-arrow.left { left: -18px; }
.lab .shelf .scroll-arrow.right { right: -18px; }
.lab .shelf .scroll-arrow.disabled { opacity: 0 !important; pointer-events: none; }
.lab .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; padding: 10px 0 8px; }

/* ---------- cards ---------- */
.lab .card { flex: 0 0 312px; scroll-snap-align: start; background: var(--surface); border: var(--lab-bw) solid var(--fm-border-c); border-radius: var(--lab-r); box-shadow: var(--lab-shadow); overflow: hidden; display: flex; flex-direction: column; color: inherit; text-decoration: none; position: relative; top: 0; left: 0; margin: 0; padding: 0; transition: top .16s var(--ease), left .16s var(--ease), box-shadow .16s var(--ease); }
.lab .grid .card { flex: initial; }
.lab a.card { cursor: pointer; }
.lab a.card:hover, .lab a.card:focus-visible { top: -3px; left: -3px; box-shadow: var(--fm-hover-card, 9px 9px 0 var(--ink)); z-index: 2; }
.lab a.card:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.lab .card .cover { height: auto; aspect-ratio: 16 / 9; position: relative; display: grid; place-items: center; overflow: hidden; border-bottom: var(--lab-bw) solid var(--on-accent); background: var(--acc, var(--cream-2)); background-image: linear-gradient(var(--grid-whisper) 1px, transparent 1px), linear-gradient(90deg, var(--grid-whisper) 1px, transparent 1px); background-size: 28px 28px; }
.lab .card .cover.band { height: 64px; aspect-ratio: auto; }
.lab .card .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lab .card .cover img.is-photo { filter: grayscale(100%) contrast(1.05); object-position: 50% 30%; }
/* session cards (home row, Sessions grid) are 16:9 so a row mixing studio thumbnails (cover.art, class is-art, no photo
   filter) and host photos stays even (Wade 09-21-2026). Other covers keep the 160px band. */
.lab .card[data-session-id] .cover { height: auto; aspect-ratio: 16 / 9; }
.lab .card .cover .ic { width: 52px; height: 52px; color: var(--on-accent); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lab .card .cover.a-ink .ic { color: var(--on-ink); }
.lab .card .cover.a-ink .mark { color: var(--on-ink); }   /* a brand mark on the ink cover, e.g. the Build Ledger skill card (09-22) */
.lab .card .cover .num { font-family: var(--font-display); font-weight: 700; font-size: 58px; letter-spacing: -3px; color: var(--on-accent); }
.lab .card .cover.a-ink .num { color: var(--on-ink); }
/* Brand covers on the drop cards (Wade 09-19: the library tiles' banners, but one size). Grounds are
   each brand's own colour (n8n raspberry, Slack aubergine, Zoom blue, YouTube red; the pipeline rides
   the library's violet). Every mark sits in the SAME box: square marks 64px, wide marks (a wordmark, the
   n8n glyph) 96x48, each inline svg's viewBox trimmed to its painted bounds so it fills the box. The
   library's per-brand sizes and its dark-green YouTube ground are not carried over (Wade 09-19). */
.lab .card .cover.is-brand { background-image: none; }
.lab .card .cover.b-n8n    { --acc: #EA4B71; }
.lab .card .cover.b-slack  { --acc: #4A154B; }
.lab .card .cover.b-zoom   { --acc: #2D8CFF; }
.lab .card .cover.b-yt     { --acc: #FF0000; }
.lab .card .cover.b-gws    { --acc: #202124; }
.lab .card .cover.a-violet { --acc: #A78BFA; }
.lab .card .cover .mark { position: relative; z-index: 1; place-self: center; width: 64px; height: 64px; object-fit: contain; fill: currentColor; color: var(--on-accent); }
.lab .card .cover .mark.wide { width: 96px; height: 48px; }
.lab .card .cover.b-zoom .mark, .lab .card .cover.b-n8n .mark, .lab .card .cover.b-yt .mark { color: #FFFFFF; }   /* white mono marks on the brand-colour grounds */
.lab .card .cover img.mark { filter: none; }
.lab .card.drop .cover .mark { width: 76px; height: 76px; }
.lab .card.drop .cover .mark.wide { width: 116px; height: 56px; }
/* the date block, top-left on a session cover */
.lab .cover-date { position: absolute; top: 10px; left: 10px; z-index: 2; display: grid; text-align: center; background: var(--surface); border: var(--fm-border-w-sm) solid var(--fm-border-c); border-radius: 2px; padding: 4px 8px 5px; box-shadow: var(--fm-shadow-xs); }
.lab .cover-date .d { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-2); }
.lab .cover-date .n { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1; letter-spacing: -0.8px; color: var(--ink); }
/* cover-flag comes from field-manual.css (design-elite status-flag); position it here */
.lab .cover .cover-flag { position: absolute; top: 10px; right: 10px; z-index: 2; }
.lab .cover .cover-flag.live { color: var(--on-accent); background: var(--neon); border-color: var(--on-accent); }
.lab .card-body { padding: 16px 18px 15px; flex: 1; display: flex; flex-direction: column; }
.lab .badges { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.lab .badge { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; padding: 3px 7px; border: var(--fm-border-w-sm) solid var(--fm-border-c); border-radius: 2px; background: var(--cream); color: var(--ink-2); }
.lab .badge.b-demo   { background: var(--coral); color: var(--on-accent); }
.lab .badge.b-drop   { background: var(--neon); color: var(--on-accent); }
.lab .badge.b-expert { background: var(--blue); color: var(--on-accent); }
.lab .badge.b-alumni { background: var(--teal); color: var(--on-accent); }
.lab .badge.b-class  { background: var(--surface); color: var(--ink); }
.lab .badge.b-8d     { background: var(--ink); color: var(--on-ink); }
.lab .badge.b-live   { background: var(--neon); color: var(--on-accent); }
.lab .card h3 { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; line-height: 1.22; margin: 0 0 7px; letter-spacing: -0.3px; color: var(--ink); }
.lab .card p { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; margin: 0 0 12px; }
/* the host line sinks to the foot of the card, directly above the meta bar, so hosts line up
   across a row whatever the description length (Wade 09-18) */
.lab .card-host { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); margin: auto 0 12px; padding-top: 4px; }
.lab .card-host + .card-meta { margin-top: 0; }
.lab .card-host img { width: 26px; height: 26px; border-radius: 50%; border: var(--fm-border-w-sm) solid var(--fm-border-c); object-fit: cover; filter: grayscale(100%); }
.lab .card-host .org { color: var(--ink-3); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; }
.lab .card-meta { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); letter-spacing: 1.2px; text-transform: uppercase; padding-top: 11px; border-top: 1px solid var(--cream-border); }
.lab .card-meta .arrow { color: var(--ink); font-weight: 700; transition: transform .25s var(--ease); }
.lab a.card:hover .card-meta .arrow { transform: translateX(4px); }
.lab .card-meta .soon { color: var(--ink-3); }
.lab .card.ghost { border-style: dashed; box-shadow: none; background: var(--cream-2); justify-content: center; align-items: center; text-align: center; padding: 26px 22px; min-height: 260px; }
.lab .card.ghost .k { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink-2); margin-bottom: 10px; }
.lab .card.ghost p { margin: 0; color: var(--ink-2); }
.lab .card.ghost p strong { color: var(--ink); }
.lab .card.wide { flex-basis: 480px; }

/* ---------- clips (09-21): the same card; a play mark and the length sit on the 16:9 cover ---------- */
.lab .shelf.is-clip .stage-num::before { background: var(--blue); }
.lab .row-note { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 -4px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-3); }
.lab .card.clip .cover .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: 48px; height: 48px; display: grid; place-items: center; background: var(--surface); border: var(--lab-bw) solid var(--fm-border-c); border-radius: 50%; box-shadow: var(--lab-shadow-sm); color: var(--ink); }
.lab .card.clip .cover .play svg { width: 20px; height: 20px; fill: currentColor; margin-left: 3px; }
.lab .card.clip .cover .clip-len { position: absolute; right: 10px; bottom: 10px; z-index: 2; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--on-ink); background: var(--ink); padding: 3px 7px; border-radius: 2px; }
.lab .badge.b-clip { background: var(--blue); color: var(--on-accent); }
.lab .card.clip.is-example { border-style: dashed; box-shadow: none; background: var(--cream-2); }
.lab .card.clip.is-example .cover { border-bottom-style: dashed; }
.lab .card.clip.is-example .cover .play { box-shadow: none; }

/* ---------- bands (09-21): slimmer than a shelf, no plate; they break the run of card rows ---------- */
.lab .shelf.is-band { margin-bottom: 46px; }
.lab .band-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 6px; }
.lab .band-head .stage-num { margin-bottom: 0; }
.lab .band-sub { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; max-width: 760px; margin: 0 0 14px; }
.lab .shelf.is-words .stage-num::before { background: var(--teal); }

/* tool of the week: one band under the slider, mark | text | button (Wade 09-21) */
.lab .tool { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 22px; align-items: center; background: var(--surface); border: var(--lab-bw) solid var(--fm-border-c); border-radius: var(--lab-r); box-shadow: var(--lab-shadow); padding: 18px 22px; }
.lab .tool-mark { width: 84px; height: 84px; display: grid; place-items: center; background: var(--ink); color: var(--on-ink); border: var(--fm-border-w-sm) solid var(--fm-border-c); border-radius: var(--lab-r); font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -1px; }
.lab .tool-mark img { width: 68px; height: 68px; object-fit: contain; display: block; }
.lab .tool-text { min-width: 0; }
.lab .tool-k { display: block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.lab .tool h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.5px; margin: 0 0 4px; color: var(--ink); }
.lab .tool p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); max-width: 820px; }
.lab .tool-act { display: grid; justify-items: end; gap: 8px; }
.lab .tool-hint { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--ink-3); text-align: right; }
@media (max-width: 760px) { .lab .tool { grid-template-columns: 64px minmax(0, 1fr); } .lab .tool-mark { width: 64px; height: 64px; font-size: 20px; } .lab .tool-act { grid-column: 1 / -1; justify-items: start; } .lab .tool-hint { text-align: left; } }

/* the perks tape: the box beside the Drops header; a slow loop of the favorites, stopped by hover, the button or reduced-motion */
.lab .shelf.is-friday .shelf-top { grid-template-columns: minmax(0, 1fr) minmax(380px, 44%); }   /* the tape takes a share, never more than the plate (1280 check, 09-22) */
.lab .ticker { display: grid; align-content: space-between; gap: 14px; background: var(--surface); border: var(--lab-bw) solid var(--fm-border-c); border-radius: var(--lab-r); box-shadow: var(--lab-shadow); padding: 16px 0 14px; overflow: hidden; margin: 0; }
.lab .ticker.is-static, .lab .ticker.is-loading { padding: 18px 22px; justify-items: start; }
.lab .tk-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 18px; }
.lab .tk-k { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink-2); }
.lab .tk-pause { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink); background: var(--surface); border: var(--fm-border-w-sm) solid var(--fm-border-c); border-radius: 2px; padding: 3px 8px; cursor: pointer; box-shadow: var(--fm-shadow-xs); }
.lab .tk-pause:hover { background: var(--neon); }
.lab .tk-note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.lab .tk-note strong { color: var(--ink); }
.lab .tk-viewport { overflow: hidden; }
.lab .tk-track { display: flex; width: max-content; animation: tk-roll var(--tk-dur, 60s) linear infinite; }
.lab .tk-set { display: flex; gap: 30px; padding-right: 30px; padding-left: 18px; }
.lab .ticker:hover .tk-track, .lab .ticker.is-paused .tk-track { animation-play-state: paused; }
@keyframes tk-roll { to { transform: translateX(-50%); } }
.lab .tk-item { display: grid; grid-template-columns: 44px auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-decoration: none; color: var(--ink); white-space: nowrap; position: relative; }
.lab .tk-item img { grid-row: 1 / 3; width: 44px; height: 44px; border: var(--fm-border-w-sm) solid var(--fm-border-c); border-radius: 2px; object-fit: contain; background: #fff; }
.lab .tk-item b { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; letter-spacing: -0.2px; line-height: 1.15; }
.lab .tk-item span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-2); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.lab .tk-item:hover b { text-decoration: underline; }
.lab .tk-tag { display: inline-block; vertical-align: 2px; margin-right: 7px; font-family: var(--font-mono); font-style: normal; font-size: 8px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; background: var(--neon); border: var(--fm-border-w-sm) solid var(--on-accent); border-radius: 2px; padding: 1px 5px; }
.lab .tk-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 18px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-3); }
.lab .tk-foot span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lab .tk-foot a { color: var(--ink); font-weight: 700; text-decoration: none; white-space: nowrap; }
.lab .tk-foot a:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .lab .tk-track { animation: none; } .lab .tk-viewport { overflow-x: auto; } .lab .tk-set[aria-hidden="true"] { display: none; } .lab .tk-pause { display: none; } }

/* season at a glance: the punch card. One column per week, Tuesdays row and Fridays row, on a white plate */
.lab .gc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 12px; }
.lab .gc-k { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink-2); }
.lab .gc-meta { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.lab .glance-card { background: var(--surface); border: var(--lab-bw) solid var(--fm-border-c); border-radius: var(--lab-r); box-shadow: var(--lab-shadow); padding: 16px 18px 14px; overflow-x: auto; }
.lab .glance { display: grid; grid-template-columns: 96px repeat(var(--g-n, 14), minmax(0, 1fr)); gap: 7px 6px; align-items: stretch; min-width: 760px; }

.lab .glance .g-rl { align-self: center; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-2); padding-right: 6px; }
.lab .glance .g-m { position: relative; height: 26px; }
.lab .glance .g-ml { position: absolute; left: 0; bottom: 2px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink-2); }
.lab .glance .g-m.is-now .g-ml { display: none; }
.lab .glance .g-now { position: absolute; left: -2px; right: -2px; bottom: 0; text-align: center; font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); background: var(--neon); border: var(--fm-border-w-sm) solid var(--on-accent); border-radius: 2px; padding: 3px 0 2px; box-shadow: var(--fm-shadow-xs); white-space: nowrap; }
.lab .glance .g-cell { position: relative; display: grid; place-items: center; height: 46px; font: inherit; padding: 0; margin: 0; cursor: default; border: var(--lab-bw) solid var(--fm-border-c); border-radius: var(--lab-r); background: var(--cell, var(--surface)); color: var(--ink); text-decoration: none; }
.lab .glance .g-cell b { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.5px; line-height: 1; }
.lab .glance a.g-cell, .lab .glance button.g-cell { cursor: pointer; box-shadow: var(--fm-shadow-sm); transition: transform .14s var(--ease), box-shadow .14s var(--ease); }
.lab .glance a.g-cell:hover, .lab .glance a.g-cell:focus-visible, .lab .glance button.g-cell:hover, .lab .glance button.g-cell:focus-visible { transform: translate(-1px, -1px); box-shadow: var(--fm-hover-btn, 4px 4px 0 var(--ink)); z-index: 2; }
.lab .card.is-flash { animation: card-flash 1.5s var(--ease); }
@keyframes card-flash { 0%, 100% { outline: 0 solid transparent; outline-offset: 0; } 15%, 70% { outline: 4px solid var(--neon); outline-offset: 3px; } }
.lab .fri-next { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: -6px 0 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-2); }
.lab .fri-next .fn-k { font-weight: 700; color: var(--ink); background: var(--neon); border: var(--fm-border-w-sm) solid var(--on-accent); border-radius: 2px; padding: 2px 7px; }
.lab .fri-next .fn-t { color: var(--ink); font-weight: 700; }
.lab .fri-next .fn-in { color: var(--ink-3); }
.lab .glance .g-cell:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.lab .glance .k-class, .lab .sw.k-class { --cell: var(--purple); }   /* masterclasses purple (Wade 09-21) */
.lab .glance .k-demo, .lab .sw.k-demo { --cell: var(--coral); }
.lab .glance .k-drop, .lab .sw.k-drop { --cell: var(--neon); }
.lab .glance .k-expert, .lab .sw.k-expert { --cell: var(--blue); }
.lab .glance .k-alumni, .lab .sw.k-alumni { --cell: var(--teal); }
.lab .glance .k-orientation { --cell: var(--cream-2); }
.lab .glance .k-fri, .lab .sw.k-fri { --cell: var(--ink); color: var(--on-ink); }
.lab .glance .g-cell.is-past, .lab .sw.is-past { --cell: var(--surface); color: var(--ink-2); border-style: dashed; box-shadow: none; }
.lab .glance .g-cell.is-tba, .lab .sw.is-tba { --cell: transparent; color: var(--ink-3); border: 1.5px dashed var(--ink-3); }
.lab .glance .g-cell.is-off { border-color: transparent; background: transparent; }
.lab .glance .g-cell::after { content: attr(data-t); display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; background: var(--ink); color: var(--on-ink); padding: 5px 9px; border-radius: 2px; z-index: 6; }
.lab .glance .g-cell:hover::after, .lab .glance .g-cell:focus-visible::after { display: block; }
.lab .glance .g-cell:nth-child(-n+3)::after { left: 0; transform: none; }
.lab .g-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 14px 0 0; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-2); }
.lab .g-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lab .g-legend .g-hint { margin-left: auto; color: var(--ink-3); }
.lab .sw { display: inline-block; width: 12px; height: 12px; border: var(--fm-border-w-sm) solid var(--fm-border-c); border-radius: 2px; background: var(--cell, var(--surface)); }
@media (max-width: 760px) { .lab .glance-card { padding: 12px 12px 10px; } .lab .g-legend .g-hint { display: none; } }
/* the side boxes (perks tape, punch card) stack under their plates once the shelf-top goes one-column; this sits after both
   width rules so it wins */
@media (max-width: 1100px) { .lab .shelf.is-friday .shelf-top { grid-template-columns: minmax(0, 1fr); } .lab .ticker { width: auto; max-width: 100%; } }

/* words we say: ten tiles, five across in two full rows (Wade 09-21), the Lab's own boxes and shadows, each one
   set a little off true like a pinned note; a tape strip on every other tile; hover sets it straight. All tiles
   white; the highlights run through both programs' accents in no particular order (Wade 09-21). Accent hexes are
   the studio PALETTE (Thumbnail-System/studio/briefs.mjs): field-manual + agent-native-os-classic. */
.lab { --purple: #A78BFA; --violet: #8B5CF6; --amber: #FFB347; --rose: #F472B6; }
.lab .words { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px 18px; padding: 14px 6px 12px; }
.lab .word { position: relative; background: var(--surface); border: var(--lab-bw) solid var(--fm-border-c); border-radius: var(--lab-r); box-shadow: var(--lab-shadow); padding: 18px 16px 16px; transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.lab .word:nth-child(5n+1) { transform: rotate(-1.6deg); }
.lab .word:nth-child(5n+2) { transform: rotate(1.2deg) translateY(5px); }
.lab .word:nth-child(5n+3) { transform: rotate(-0.8deg) translateY(-4px); }
.lab .word:nth-child(5n+4) { transform: rotate(1.9deg) translateY(3px); }
.lab .word:nth-child(5n+5) { transform: rotate(-1.3deg) translateY(1px); }
.lab .word .tape { display: none; position: absolute; top: -10px; left: 50%; width: 58px; height: 18px; transform: translateX(-50%) rotate(-4deg); background: rgba(255, 224, 102, .82); border: 1px solid rgba(0, 0, 0, .14); }
.lab .word:nth-child(even) .tape { display: block; }
.lab .word:nth-child(5n+4) .tape { left: 26%; transform: rotate(6deg); }
.lab .word b { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.3px; line-height: 1.2; color: var(--ink); background: var(--neon); padding: 1px 8px 2px; border-radius: 2px; margin: 0 0 9px; }
.lab .word:nth-child(1) b { background: var(--neon); }
.lab .word:nth-child(2) b { background: var(--rose); }
.lab .word:nth-child(3) b { background: var(--blue); }
.lab .word:nth-child(4) b { background: var(--amber); }
.lab .word:nth-child(5) b { background: var(--purple); }
.lab .word:nth-child(6) b { background: var(--coral); }
.lab .word:nth-child(7) b { background: var(--teal); }
.lab .word:nth-child(8) b { background: var(--violet); }
.lab .word:nth-child(9) b { background: var(--neon-soft); }
.lab .word:nth-child(10) b { background: var(--rose); }
.lab .word span { display: block; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.lab .word:hover { transform: rotate(0) translateY(-3px); box-shadow: var(--fm-hover-card, 8px 8px 0 var(--ink)); z-index: 2; }
@media (max-width: 1180px) { .lab .words { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .lab .words { grid-template-columns: 1fr; gap: 18px 0; } .lab .word:nth-child(n) { transform: none; } }

/* ---------- design-elite: empty-state (round-2 winner od-opus-b), adapted token names ---------- */
.lab .empty-state { border: var(--lab-bw) dashed var(--fm-border-c); border-radius: var(--lab-r); background: var(--cream-2); padding: 44px 32px 40px; display: flex; flex-direction: column; align-items: center; text-align: center; flex: 0 0 auto; width: 100%; }
.lab .row .empty-state { flex: 0 0 min(100%, 640px); scroll-snap-align: start; }
.lab .empty-state .eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); margin: 0 0 22px; }
.lab .empty-state .eyebrow::before { display: none; }
.lab .empty-state h2 { margin: 0; max-width: 20ch; text-wrap: balance; font-family: var(--font-display); font-weight: 700; font-size: 28px; letter-spacing: -0.04em; line-height: 1.15; }
.lab .empty-state h2 mark { background: var(--neon); color: var(--on-accent); padding: 2px 10px; border-radius: var(--lab-r); }
.lab .empty-state .explainer { margin: 16px 0 0; max-width: 46ch; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.lab .empty-state .ghost { margin-top: 22px; font-family: var(--font-body); font-weight: 700; font-size: 13.5px; color: var(--ink); background: var(--surface); border: var(--lab-bw) solid var(--fm-border-c); border-radius: var(--lab-r); padding: 10px 18px; box-shadow: var(--lab-shadow-sm); cursor: pointer; text-decoration: none; }
.lab .empty-state .ghost:hover { background: var(--neon); }
.lab .empty-state .meta { margin: 22px 0 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }

/* ---------- design-elite: stamp (FM v1.1 conversion) ---------- */
.lab .stamp { display: inline-block; border: 1.5px solid var(--success); color: var(--success); padding: 3px 7px; font-family: var(--font-mono); font-size: 12px; transform: rotate(-4deg); text-transform: uppercase; letter-spacing: 0.08em; }
.lab .stamp.warn { border-color: #C22800; color: #C22800; }

/* ---------- design-elite: live-dot (FM v1.1 conversion) ---------- */
.lab .live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); display: inline-block; animation: lab-live-blink 1.5s infinite; }
@keyframes lab-live-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
}
/* 1280 to 1365 with the rail open: the button row is a pixel wider than the column, so the
   button, the host gap and the name column each give up a few pixels. */
@media (max-width: 1365px) {
  .ls-actions .btn { padding: 10px 13px; }
  .ls-host { gap: 12px; }
  .ls-host-txt { max-width: 104px; }
}
/* Below 1280 (rail open) the text column can no longer fit beside a 16:9 thumbnail, so the
   slide stacks: the thumbnail on top at full width, still 16:9, the text under it. */
@media (max-width: 1279px) {
  .lab-slide-link { grid-template-columns: minmax(0, 1fr); aspect-ratio: auto; }
  .ls-art { order: -1; border-left: none; border-bottom: var(--lab-bw) solid var(--fm-border-c); aspect-ratio: 16 / 9; }
  .ls-body { padding: 24px 24px 26px; }
  .ls-body h2 { font-size: clamp(24px, 3.4cqw, 36px); margin-bottom: 10px; }
  .ls-body > p { font-size: 15.5px; margin-bottom: 16px; }
  .ls-eye { margin-bottom: 12px; }
}
@media (max-width: 860px) {
  .lab-next { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ln-actions { justify-content: flex-start; }
  .lab .shelf .scroll-arrow { display: none; }
  .lab .card { flex-basis: 272px; }
}
@media (max-width: 520px) {
  /* the meta chip is nowrap, and a shelf plate sizes to fit-content: a long chip would push the plate past the
     viewport and scroll the page sideways (caught by the audit 09-22). On a phone it wraps instead. */
  .lab .shelf-head .shelf-meta { white-space: normal; }
  .lab .mk-marq .mk-season { display: none; }
  .ls-body h2 { font-size: 28px; letter-spacing: -1px; }
}
@media (prefers-reduced-motion: reduce) {
  .lab-feat-track { scroll-behavior: auto; }
  .lab .card, .lab .live-dot, .lab-dot, .lab .word, .lab .glance a.g-cell, .lab .glance button.g-cell { transition: none; animation: none; }
}

/* ---------- terminal theme (design-toggle.js flips html[data-design]) ---------- */
html[data-design="terminal"] .lab .stamp { border-color: #00D084; color: #00D084; }
html[data-design="terminal"] .lab .live-dot { background: #00D084; box-shadow: 0 0 8px #00D084; }
/* Hand fix, terminal only (09-25): the legend's light-accent cells (coral, lime, blue, teal) take the fill from
   --cell, which the rule-8 sweep cannot see, so their numbers and borders are pinned dark here. Purple (class)
   and ink (Friday) cells already set their own light text. */
html[data-design="terminal"] .lab .glance .g-cell.is-on:not(.is-past):is(.k-demo, .k-drop, .k-expert, .k-alumni),
html[data-design="terminal"] .lab .sw:is(.k-demo, .k-drop, .k-expert, .k-alumni):not(.is-past):not(.is-tba) { color: var(--on-accent); border-color: var(--on-accent); }
/* The FAQ callouts use a pale yellow set as a literal on .lab, which cannot flip: dark gets a dark yellow tint
   (the same value Essentials' kit uses). Friday cells are ink-filled with fixed light text; ink goes light grey
   in dark, so the number turns dark like the other filled cells. */
html[data-design="terminal"] .lab { --yellow-tint: #2a2300; }
html[data-design="terminal"] .lab .glance .k-fri:not(.is-past),
html[data-design="terminal"] .lab .sw.k-fri { color: var(--cream); }
/* Recorded cells drop their fill for the plate colour, so the dark pins above skip them (10-08): in dark the
   number stays readable grey on the dark plate, like the masterclass and orientation cells already were. */


/* rule 8 pins: fm-sweep.mjs */
/* Text, border and icon stroke on an accent fill stay dark in the terminal theme (decision 6). */
html[data-design="terminal"] .lab-slide:has(.ls-art[data-accent="violet"]) .ls-actions .btn-primary,
html[data-design="terminal"] .ls-art.is-stat b,
html[data-design="terminal"] .lab-dot[aria-current="true"],
html[data-design="terminal"] .lab .stage-num::before,
html[data-design="terminal"] .lab .shelf.is-drop .stage-num::before,
html[data-design="terminal"] .lab .shelf.is-clip .stage-num::before,
html[data-design="terminal"] .lab .shelf.is-words .stage-num::before,
html[data-design="terminal"] .lab .tk-pause:hover,
html[data-design="terminal"] .lab .tk-tag,
html[data-design="terminal"] .lab .glance .g-now,
html[data-design="terminal"] .lab .fri-next .fn-k,
html[data-design="terminal"] .lab .word b,
html[data-design="terminal"] .lab .word:nth-child(1) b,
html[data-design="terminal"] .lab .word:nth-child(3) b,
html[data-design="terminal"] .lab .word:nth-child(6) b,
html[data-design="terminal"] .lab .word:nth-child(7) b,
html[data-design="terminal"] .lab .word:nth-child(9) b,
html[data-design="terminal"] .lab .empty-state .ghost:hover { color: var(--on-accent); border-color: var(--on-accent); }
/* Light-accent wrappers, ink-filled chips and hard-coded light fills (fm-terminal-fixes.mjs). */
html[data-design="terminal"] .ls-art:is(:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime) *) { color: var(--on-accent); }
html[data-design="terminal"] .ls-art:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime) { color: var(--on-accent); }
html[data-design="terminal"] .lab .card .cover:is(:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime) *) { color: var(--on-accent); }
html[data-design="terminal"] .lab .card .cover:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime) { color: var(--on-accent); }
html[data-design="terminal"] .lab .badge.b-8d { color: var(--cream); }
html[data-design="terminal"] .lab .card.clip .cover .clip-len { color: var(--cream); }
html[data-design="terminal"] .lab .tool-mark { color: var(--cream); }
html[data-design="terminal"] .lab .glance .g-cell::after { color: var(--cream); }
html[data-design="terminal"] .lab .tk-item img { background: var(--surface); }
/* end rule 8 pins */