/* agent-native-os/portal/workforce/wf-sessions.css
   The Lab's lab.css and lab-pages.css, concatenated byte for byte (branch
   wade/lab-home-20260918, 09-21-2026), so the Workforce Recordings page carries the
   Lab's Sessions console, calendar aside and card grid while that branch is unmerged.
   The page's <main> wears the lab class the rules are scoped to. When lab-home
   merges, load the Lab's two files instead and delete this one. */

/* 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; display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); aspect-ratio: 1000 / 326.25; }
.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(--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(--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 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 { 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 { 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 { 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: 160px; 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; }
.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 are 16:9 so a thumbnail (cover.art, class is-art, no photo filter) shows whole, as on the Lab (lab.css, Wade 09-21) */
.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 .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 img.is-mark { border-radius: 3px; filter: none; }   /* the square AI Build Lab mark, whole and in colour (Wade 09-28) */
.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; }

/* ---------- 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 { 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) {
  .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 { 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; }


/* ===== lab-pages.css ===== */

/* agent-native-os/portal/lab/lab-pages.css
   The Lab's inner tabs: Sessions, Drops & Vault, Recordings, Members. Loads after
   field-manual.css, _shell.css and lab.css (the shared shelf/card idiom, empty-state,
   stamp, live-dot). Everything here is scoped under .lab. Design pass 09-18-2026.
   No em dashes in visible copy. Placeholders say so in words; nothing is invented. */

/* ---------- page-level bits shared by the tabs ---------- */
.lab .mk-marq h1 { max-width: 24ch; }
.lab .page-note { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-2); border: 1.5px dashed var(--ink-3); border-radius: 2px; padding: 6px 10px; margin: 0 0 26px; }
.lab .page-note .needs { 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; }

/* the taped card: what the session feed says is on YOUR calendar (Option B's card, kept) */
.lab-cal { position: relative; border: var(--lab-bw) solid var(--fm-border-c); border-radius: var(--lab-r); background: var(--surface); box-shadow: var(--lab-shadow); padding: 22px 22px 18px; }
.lab-cal::before { content: ''; position: absolute; top: -13px; left: 50%; width: 110px; height: 24px; transform: translateX(-50%) rotate(-2deg); background: rgba(255,228,92,0.72); border: 1px solid rgba(17,17,17,0.22); z-index: 2; }
.lab-cal .nn-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; display: flex; align-items: center; gap: 10px; }
.lab-cal h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.5px; margin: 0 0 14px; }
.lab-cal h3 em { font-style: normal; background: var(--neon); padding: 0 6px 2px; border-radius: var(--lab-r); }
.nn-list { list-style: none; margin: 0; padding: 0; }
.nn-row { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px dashed var(--ink-3); align-items: start; }
.nn-row:first-child { border-top: none; padding-top: 0; }
.nn-date { text-align: center; border: var(--fm-border-w-sm) solid var(--fm-border-c); border-radius: 2px; background: var(--cream); padding: 4px 0 5px; }
.nn-date .d { display: block; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-2); }
.nn-date .n { display: block; font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.05; color: var(--ink); }
.nn-t { font-family: var(--font-display); font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--ink); margin: 0 0 3px; }
.nn-m { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-2); margin: 0; }
.nn-m .live-dot { margin-right: 6px; vertical-align: middle; }
.nn-act { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.nn-act .btn { padding: 7px 12px; font-size: 12.5px; }
.nn-act .ln-when { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-3); align-self: center; }
.nn-foot { margin-top: 14px; padding-top: 12px; border-top: var(--lab-bw) solid var(--fm-border-c); font-size: 13.5px; color: var(--ink-2); }
.nn-foot strong { color: var(--ink); }

/* two-column page top: the intro or list on the left, the taped card on the right */
.lab-top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 400px); gap: 28px; align-items: start; margin: 0 0 40px; }

/* info tiles: three or four bordered cells with a mono kicker (house rules, what may change) */
.lab-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin: 0 0 12px; }
.lab-info .cell { border: var(--lab-bw) solid var(--fm-border-c); border-radius: var(--lab-r); background: var(--surface); box-shadow: var(--lab-shadow-sm); padding: 16px 18px 18px; }
.lab-info .cell.tint { background: var(--neon-tint); }
.lab-info .cell.warn { background: var(--coral-tint); }
.lab-info .cell.note { background: var(--blue-tint); }
.lab-info .k { display: inline-block; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; background: var(--ink); color: var(--on-ink); padding: 3px 8px; border-radius: 2px; margin-bottom: 10px; }
.lab-info h3 { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.3px; margin: 0 0 6px; color: var(--ink); }
.lab-info p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.lab-info p + p { margin-top: 8px; }
.lab-info p strong { color: var(--ink); }

/* the numbered ladder (stuck? four rungs), reused on Members */
.lab-ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.lab-ladder .rung { border: var(--lab-bw) solid var(--fm-border-c); border-radius: var(--lab-r); background: var(--surface); box-shadow: var(--lab-shadow-sm); padding: 0 0 16px; overflow: hidden; }
.lab-ladder .rung .n { display: block; background: var(--neon); border-bottom: var(--lab-bw) solid var(--on-accent); font-family: var(--font-display); font-weight: 700; font-size: 28px; letter-spacing: -1px; padding: 10px 16px; color: var(--ink); }
.lab-ladder .rung h3 { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.3px; margin: 14px 16px 6px; }
.lab-ladder .rung p { font-size: 14px; line-height: 1.5; color: var(--ink-2); margin: 0 16px; }

/* stat row: real counts, including zero (never a percentage bar) */
.lab-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin: 0 0 34px; }
.lab-stats .stat { border: var(--lab-bw) solid var(--fm-border-c); border-radius: var(--lab-r); background: var(--surface); box-shadow: var(--lab-shadow-sm); padding: 14px 16px 12px; }
.lab-stats .stat b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 34px; letter-spacing: -1.4px; line-height: 1; color: var(--ink); }
.lab-stats .stat span { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-2); }
.lab-stats .stat.tint { background: var(--neon-tint); }

/* the polaroid, generic (the slider's .ls-host has its own sizes) */
.pola { position: relative; display: block; width: 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; }
.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; }
.pola .ph { display: block; overflow: hidden; aspect-ratio: 1 / 1; background: var(--cream-2); }
.pola img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(100%) contrast(1.05); }
.pola.zoom-heads img { object-position: 50% 22%; transform: scale(2.4); transform-origin: 50% 24%; }
.pola.zoom-circle img { transform: scale(1.5); }
.pola .ph .initials { display: grid; place-items: center; width: 100%; height: 100%; font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--ink); background: var(--neon-tint); }
.pola:nth-child(even) { transform: rotate(3deg); }

/* ---------- Sessions ---------- */
/* The season as a grid (Wade 09-19: no slider, rows that fill whatever the screen gives; the home's
   cards reused). The hero is the search console beside the live calendar card; the grid runs under. */
.lab .shelf.is-grid .grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); padding-top: 4px; }
/* past sessions stay full colour: a recording is the thing to watch, not an expired card (Wade 09-28) */

/* ---- the search console: the calendar card's language (taped card, mono kickers, the date block) as controls ---- */
.sx-console { position: relative; min-width: 0; border: var(--lab-bw) solid var(--fm-border-c); border-radius: var(--lab-r); background: var(--surface); box-shadow: var(--lab-shadow); padding: 22px 24px 20px; display: flex; flex-direction: column; gap: 16px; }
/* two strips: a card this wide taped at one corner would swing (Wade 09-19) */
.sx-console::before, .sx-console::after { content: ''; position: absolute; top: -13px; width: 110px; height: 24px; background: rgba(255,228,92,0.78); border: 1px solid rgba(17,17,17,0.22); z-index: 2; }
.sx-console::before { left: 34px; transform: rotate(-2deg); }
.sx-console::after { right: 34px; transform: rotate(2deg); }
.sx-kick { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.sx-kick .nn-k { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink-2); }
.sx-kick .nn-k.dim { color: var(--ink-3); font-weight: 500; }
.sx-bar { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.sx-search { flex: 1 1 260px; display: flex; align-items: center; gap: 12px; border: var(--lab-bw) solid var(--fm-border-c); border-radius: var(--lab-r); background: var(--cream); box-shadow: var(--fm-shadow-sm); padding: 0 14px 0 16px; }
.sx-search svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.sx-search input { flex: 1; min-width: 0; border: 0; background: transparent; font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.2px; color: var(--ink); padding: 13px 0; outline: none; }
.sx-search input::placeholder { color: var(--ink-3); font-weight: 500; }
.sx-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; cursor: pointer; background: var(--ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat; }
.sx-search:focus-within { background: var(--surface); box-shadow: 3px 3px 0 var(--neon), 3px 3px 0 1.5px var(--ink); }
.sx-sort { display: inline-flex; border: var(--lab-bw) solid var(--fm-border-c); border-radius: var(--lab-r); overflow: hidden; box-shadow: var(--fm-shadow-sm); background: var(--surface); }
.sx-sort button { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; padding: 0 16px; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.sx-sort button + button { border-left: var(--fm-border-w-sm) solid var(--fm-border-c); }
.sx-sort button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.sx-sort button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -3px; }
.sx-rows { display: grid; gap: 10px; }
.sx-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: start; }
.sx-lbl { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink-3); padding-top: 9px; }
.sx-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.sx-filters button { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; padding: 7px 11px; border: var(--fm-border-w-sm) solid var(--fm-border-c); border-radius: 2px; background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: var(--fm-shadow-xs); position: relative; top: 0; left: 0; }
.sx-filters button:hover { top: -1px; left: -1px; box-shadow: var(--fm-hover-btn, 3px 3px 0 var(--ink)); }
.sx-filters button[aria-pressed="true"] { background: var(--neon); color: var(--on-accent); }
.sx-filters button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.sx-filters button .st { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }
.sx-filters button[aria-pressed="true"] .st { fill: currentColor; }
.sx-status { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px dashed var(--ink-3); margin-top: 2px; }
.sx-status .nn-date { flex: none; min-width: 54px; text-align: center; border: var(--fm-border-w-sm) solid var(--fm-border-c); border-radius: 2px; background: var(--cream); padding: 4px 8px 5px; }
.sx-status .nn-date .d { display: block; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-2); }
.sx-status .nn-date .n { display: block; font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.05; color: var(--ink); }
.sx-status .nn-m { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-2); margin: 0; }
.sx-foot { padding: 14px 4px 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-3); }
.sx-empty { padding: 26px 20px; text-align: center; font-size: 14.5px; color: var(--ink-2); border: var(--lab-bw) dashed var(--fm-border-c); border-radius: var(--lab-r); background: var(--cream-2); }
/* the star: per browser, the library's pattern (lib/saved.js); sits on a wrapper so a link card stays a clean link */
.lab .slot { position: relative; min-width: 0; display: flex; }
.lab .slot > .card { flex: 1 1 auto; }
.lab-fav { position: absolute; top: 10px; right: 10px; z-index: 4; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: var(--surface); color: var(--ink-2); border: var(--fm-border-w-sm) solid var(--fm-border-c); border-radius: 2px; box-shadow: var(--fm-shadow-xs); cursor: pointer; padding: 0; }
.lab-fav:hover { color: var(--ink); top: 9px; right: 11px; box-shadow: var(--fm-hover-card, 3px 3px 0 var(--ink)); }
.lab-fav.on { background: var(--neon); color: var(--on-accent); }
.lab-fav.on svg { fill: var(--on-accent); }
.lab-fav svg { width: 16px; height: 16px; pointer-events: none; }
.lab-fav:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- Requests (MVP, 09-19): the form as a taped card, the board as the season's cards without covers ---------- */
.rq-form { position: relative; min-width: 0; border: var(--lab-bw) solid var(--fm-border-c); border-radius: var(--lab-r); background: var(--surface); box-shadow: var(--lab-shadow); padding: 22px 24px 20px; display: flex; flex-direction: column; gap: 16px; }
.rq-form::before, .rq-form::after { content: ''; position: absolute; top: -13px; width: 110px; height: 24px; background: rgba(255,228,92,0.78); border: 1px solid rgba(17,17,17,0.22); z-index: 2; }
.rq-form::before { left: 34px; transform: rotate(-2deg); }
.rq-form::after { right: 34px; transform: rotate(2deg); }
.rq-kind { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rq-opt { display: grid; gap: 4px; border: var(--lab-bw) solid var(--fm-border-c); border-radius: var(--lab-r); background: var(--cream); padding: 14px 16px 14px 44px; position: relative; cursor: pointer; box-shadow: var(--fm-shadow-sm); }
.rq-opt input { position: absolute; left: 16px; top: 17px; width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }
.rq-opt .t { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.2px; color: var(--ink); }
.rq-opt .s { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.rq-opt.is-on { background: var(--neon-tint); }
.rq-opt:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.rq-field { display: grid; gap: 6px; }
.rq-field .sx-lbl { padding-top: 0; }
.rq-field .sx-lbl em { font-style: normal; text-transform: none; letter-spacing: 0.4px; color: var(--ink-3); }
.rq-field input, .rq-field textarea { width: 100%; box-sizing: border-box; border: var(--lab-bw) solid var(--fm-border-c); border-radius: var(--lab-r); background: var(--cream); box-shadow: var(--fm-shadow-sm); font-family: var(--font-body); font-size: 15px; color: var(--ink); padding: 11px 14px; outline: none; resize: vertical; }
.rq-field input { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.2px; }
.rq-field input::placeholder, .rq-field textarea::placeholder { color: var(--ink-3); font-weight: 500; }
.rq-field input:focus, .rq-field textarea:focus { background: var(--surface); box-shadow: 3px 3px 0 var(--neon), 3px 3px 0 1.5px var(--ink); }
.rq-as { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rq-as .sx-lbl { padding: 0 6px 0 0; }
.rq-chip { position: relative; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; padding: 7px 11px; border: var(--fm-border-w-sm) solid var(--fm-border-c); border-radius: 2px; background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: var(--fm-shadow-xs); }
.rq-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rq-chip.is-on { background: var(--neon); color: var(--on-accent); }
.rq-chip:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.rq-hint { flex-basis: 100%; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin-top: 2px; }
.rq-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 14px; border-top: 1px dashed var(--ink-3); }
.rq-actions .btn[disabled] { opacity: 0.6; cursor: default; }
.rq-interim { font-size: 13.5px; color: var(--ink-2); margin: -4px 0 0; line-height: 1.5; }
.rq-interim strong { color: var(--ink); }
.rq-interim a { color: var(--ink); }
.rq-how { list-style: none; margin: 0; padding: 0; counter-reset: rq; }
.rq-how li { counter-increment: rq; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px dashed var(--ink-3); font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.rq-how li:first-child { border-top: none; padding-top: 0; }
.rq-how li::before { content: counter(rq, decimal-leading-zero); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--ink); padding-top: 2px; }
.rq-how b { color: var(--ink); }
/* the board's cards: no cover, the vote sits where the meta goes */
.lab .rq-card .card-body { padding-top: 18px; }
.lab .rq-card h3 { font-size: 17px; }
.lab .rq-card.is-example { border-style: dashed; box-shadow: none; background: var(--cream-2); }
.rq-by { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: auto 0 12px; padding-top: 4px; font-size: 13px; color: var(--ink); }
.rq-by .who { display: inline-flex; align-items: center; gap: 8px; }
.rq-by .who img, .rq-by .who .av { width: 26px; height: 26px; border-radius: 50%; border: var(--fm-border-w-sm) solid var(--fm-border-c); object-fit: cover; filter: grayscale(100%); }
.rq-by .who .av { display: inline-grid; place-items: center; background: var(--cream); font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.5px; }
.rq-by .when { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-3); }
.rq-vote { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.5px; padding: 5px 10px 5px 8px; border: var(--fm-border-w-sm) solid var(--fm-border-c); border-radius: 2px; background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: var(--fm-shadow-xs); text-transform: none; }
.rq-vote svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rq-vote.on { background: var(--neon); color: var(--on-accent); }
.rq-vote[disabled] { cursor: default; }
.lab .grid > .empty-state { grid-column: 1 / -1; }
#board .sx-bar { justify-content: space-between; margin-bottom: 14px; }
.rq-example { margin-top: 26px; padding-top: 18px; border-top: 1px dashed var(--ink-3); }
.rq-example .sx-kick { margin-bottom: 4px; }
.rq-example .grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
@media (max-width: 640px) { .rq-kind { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Drops & Vault ---------- */
.vault-how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: start; margin: 0 0 40px; }
.vault-how .copy p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 12px; }
.vault-how .copy p strong { color: var(--ink); }
.hub { border: var(--lab-bw) solid var(--fm-border-c); border-radius: var(--lab-r); background: var(--surface); box-shadow: var(--lab-shadow); padding: 20px 22px; }
.hub .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: 12px; }
.hub .tree { font-family: var(--font-mono); font-size: 13px; line-height: 1.7; color: var(--ink); margin: 0; overflow-x: auto; max-width: 100%; }
.hub { min-width: 0; }
.hub .tree .dir { font-weight: 700; }
.hub .tree .dim { color: var(--ink-3); }
.hub .tree .new { background: var(--neon); color: var(--on-accent); padding: 0 6px; border-radius: 2px; }
.hub .tree .soon { border: 1px dashed var(--ink-3); color: var(--ink-3); padding: 0 6px; border-radius: 2px; }
.hub .foot { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--ink-3); font-size: 13px; color: var(--ink-2); }
.drop-anatomy { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 0 0 8px; }
.drop-anatomy .part { border: var(--lab-bw) solid var(--fm-border-c); border-radius: var(--lab-r); background: var(--surface); box-shadow: var(--lab-shadow-sm); padding: 14px 16px; }
.drop-anatomy .part .ic { width: 28px; height: 28px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 8px; }
.drop-anatomy h3 { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; margin: 0 0 4px; }
.drop-anatomy p { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); margin: 0; }
.lab .card.drop .cover { height: auto; aspect-ratio: 16 / 9; }
#blueprints .grid, #agents .grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
/* the Vault picker: the Essentials route picker's tile, two across, pressed = the filter in force */
.vault-pick { border: var(--lab-bw) solid var(--fm-border-c); border-radius: var(--lab-r); background: var(--surface); box-shadow: var(--lab-shadow); padding: 14px 16px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 14px; }
.vault-pick .k { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink); }
.vault-pick .k .sub { font-weight: 500; letter-spacing: 1.2px; color: var(--ink-2); }
.vault-pick button { display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 8px; align-items: center; align-content: start; text-align: left; width: 100%; background: var(--surface); border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; padding: 14px 16px 16px; cursor: pointer; box-shadow: var(--fm-shadow-sm); position: relative; top: 0; left: 0; font-family: var(--font-body); color: var(--ink); }
.vault-pick button:hover { top: -1px; left: -1px; box-shadow: var(--fm-hover-btn, 4px 4px 0 var(--ink)); }
.vault-pick button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.vault-pick button .ic { width: 52px; height: 52px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vault-pick button .w { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.15; letter-spacing: -0.4px; }
.vault-pick button .w .pick { display: none; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; background: var(--ink); color: var(--on-ink); padding: 2px 7px; border-radius: 2px; }
.vault-pick button .d { grid-column: 1 / -1; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.vault-pick button .d b { color: var(--ink); }
.vault-pick button .d .n { display: inline-block; margin-left: 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--ink); border-radius: 2px; padding: 2px 7px; background: var(--cream); }
.vault-pick button[aria-pressed="true"] { background: var(--neon); }
.vault-pick button[aria-pressed="true"] .d { color: var(--on-accent); }
.vault-pick button[aria-pressed="true"] .w .pick { display: inline-block; }
.vault-note { margin: 0 0 22px; }
.vault-pick.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vault-pick.three button { grid-template-columns: 44px 1fr; }
.vault-pick.three button .ic { width: 44px; height: 44px; }
.vault-pick.three button .w { font-size: 20px; }
.vault-pick.three button .d { font-size: 14px; }
#skills .grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
@media (max-width: 900px) { .vault-pick.three { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .vault-pick { grid-template-columns: 1fr; } }
.lab .card.drop .cover .ic { width: 64px; height: 64px; }
.drop-locked { border: 1.5px dashed var(--ink-3); border-radius: 2px; padding: 10px 12px; font-family: var(--font-mono); font-size: 11px; line-height: 1.6; color: var(--ink-3); margin: 0 0 12px; }
.drop-locked b { color: var(--ink-2); }

/* ---------- Recordings ---------- */
.rec-feature { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); border: var(--lab-bw) solid var(--fm-border-c); border-radius: var(--lab-r); background: var(--surface); box-shadow: var(--fm-flat, 8px 8px 0 var(--ink)); overflow: hidden; margin: 0 0 40px; }
.rec-feature .stage { position: relative; aspect-ratio: 16 / 9; background: var(--ink); border-right: var(--lab-bw) solid var(--fm-border-c); overflow: hidden; }
.rec-feature .stage img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.55; }
.rec-feature .stage .over { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--on-ink); padding: 20px; }
.rec-feature .stage .over .stamp { font-size: 13px; background: var(--surface); }
.rec-feature .stage .over p { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; margin: 14px 0 0; color: rgba(244,241,234,0.85); }
.rec-feature .side { padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.rec-feature .side .k { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink-2); }
.rec-feature .side h2 { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -0.6px; margin: 0; }
.rec-feature .side p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.rec-feature .side .chapters { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px dashed var(--ink-3); }
.rec-feature .side .chapters li { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--ink-3); font-size: 13.5px; color: var(--ink-2); }
.rec-feature .side .chapters li .t { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); flex: none; width: 44px; }
.rec-feature .side .actions { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; padding-top: 12px; }
.rec-feature .side .actions .btn { padding: 9px 14px; font-size: 13px; }
.lab .card.rec .cover { height: auto; aspect-ratio: 16 / 9; }
.lab .card.rec .cover .dur { position: absolute; right: 10px; bottom: 10px; z-index: 2; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.2px; background: var(--ink); color: var(--on-ink); padding: 3px 7px; border-radius: 2px; }
.lab .card.rec .cover .play { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; }
.lab .card.rec .cover .play span { width: 52px; height: 52px; border-radius: 50%; border: var(--lab-bw) solid var(--fm-border-c); background: var(--surface); display: grid; place-items: center; box-shadow: var(--fm-shadow-sm); }
.lab .card.rec .cover .play svg { width: 20px; height: 20px; fill: var(--ink); margin-left: 3px; }
.lab .card.rec.is-proc .cover img { opacity: 0.45; }

/* ---------- Members ---------- */
.team-row { display: flex; gap: 30px 26px; flex-wrap: wrap; align-items: flex-start; padding: 18px 6px 6px; }
.team-row .who { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 120px; text-align: center; }
.team-row .who b { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.team-row .who .role { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-3); margin-top: 2px; display: block; }
.channel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 380px); gap: 24px; align-items: start; }
.channel .box { border: var(--lab-bw) solid var(--fm-border-c); border-radius: var(--lab-r); background: var(--surface); box-shadow: var(--lab-shadow); padding: 22px 24px; }
.channel .box.tint { background: var(--neon-tint); }
.channel .box .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; }
.channel .box h2 { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -0.6px; margin: 0 0 10px; }
.channel .box h2 em { font-style: normal; background: var(--neon); padding: 0 6px 2px; border-radius: var(--lab-r); }
.channel .box p { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0 0 12px; }
.channel .box p strong { color: var(--ink); }
.channel .box .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.channel .steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.channel .steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px dashed var(--ink-3); font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.channel .steps li:first-child { border-top: none; padding-top: 0; }
.channel .steps li::before { counter-increment: s; content: counter(s, decimal-leading-zero); font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); line-height: 1.2; }
.channel .steps li strong { color: var(--ink); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .lab-top, .vault-how, .rec-feature, .channel { grid-template-columns: minmax(0, 1fr); }
  .rec-feature .stage { border-right: none; border-bottom: var(--lab-bw) solid var(--fm-border-c); }
}
@media (max-width: 860px) {
  .sx-bar { flex-direction: column; }
  .sx-sort button { padding: 10px 14px; flex: 1; }
  .sx-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .sx-lbl { padding-top: 0; }
  .lab .mk-marq h1 { max-width: none; }
}
/* Same pale-yellow literal as the Lab: dark gets a dark yellow tint; Friday cells take dark text on the ink fill. */
html[data-design="terminal"] .lab { --yellow-tint: #2a2300; }
html[data-design="terminal"] .lab .glance .k-fri,
html[data-design="terminal"] .lab .sw.k-fri { color: var(--cream); }


/* 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"] .ls-eye::before,
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 .empty-state .ghost:hover,
html[data-design="terminal"] .lab-cal h3 em,
html[data-design="terminal"] .lab-ladder .rung .n,
html[data-design="terminal"] .vault-pick button[aria-pressed="true"],
html[data-design="terminal"] .channel .box h2 em { 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-info .k { color: var(--cream); }
html[data-design="terminal"] .sx-sort button[aria-pressed="true"] { color: var(--cream); }
html[data-design="terminal"] .vault-pick button .w .pick { color: var(--cream); }
html[data-design="terminal"] .lab .card.rec .cover .dur { color: var(--cream); }
html[data-design="terminal"] .vault-pick button[aria-pressed="true"] .d { color: var(--on-accent-2); }
html[data-design="terminal"] .vault-pick button[aria-pressed="true"] .d b { color: var(--on-accent); }
/* end rule 8 pins */

/* 09-25-2026 (Wade): the sessions grid groups Recorded (newest first), then Coming up (soonest first),
   instead of a Latest/Oldest toggle. A group heading spans the grid's full width. */
.sx-group { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; margin: 18px 0 2px; padding-bottom: 8px; border-bottom: var(--fm-border-w-sm) solid var(--fm-border-c); font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink); }
.sx-group:first-child { margin-top: 0; }
.sx-group i { font-style: normal; color: var(--ink-3); }