/* agent-native-os/portal/workforce/wf-session.css
   A byte-for-byte copy of the Lab's lab-session.css (branch wade/lab-home-20260918,
   09-21-2026) so the Workforce session pages look exactly like the Lab's while that
   branch is unmerged. When it merges, point the Workforce pages at
   /agent-native-os/portal/lab/lab-session.css and delete this file. The one addition
   is at the very end: photo covers on the Recordings list cards. */
/* agent-native-os/portal/lab/lab-session.css
   One Lab session's own page (what a session tile opens). Loads after field-manual.css,
   _shell.css, _wf.css (the Workforce .rc-layout chassis: contents list, article, side
   column) and lab.css. Scoped under .lab-session. Design pass 09-18-2026.

   The shape Wade asked for: the video at the top, the Essentials lesson body (In plain
   English, What / Why / How / Your seat, a field note, question-shaped headings, the
   callout family), copy-and-paste prompts from the session, and the Agent-Native OS card's
   side column (cover, meta rows, actions, a starter prompt) in place of the app matrix.
   Body blocks are copied from essentials.css and cards/cards.css so the markup matches.

   Three states of the stage: is-upcoming (join from here), is-processing (recorded,
   video on its way), is-ready (the player). No em dashes. Placeholders say so in words.

   09-19 (Wade): the stage sits at the top of the article column, not across the page; the
   side panel (host, facts, actions, starter prompt) sits beside it, and the contents box sits
   under the panel and sticks, the Essentials shape. Two columns from 1180 up at every width;
   the chassis's three-column switch at 1660 is turned off here. */

.lab-session { --yellow: #FFE45C; --yellow-tint: #FFF6C7; --marker: var(--neon); }
.lab-session .a-neon  { --acc: var(--neon); }
.lab-session .a-blue  { --acc: var(--blue); }
.lab-session .a-coral { --acc: var(--coral); }
.lab-session .a-teal  { --acc: var(--teal); }
.lab-session .a-ink   { --acc: var(--ink); }
/* the back bar: the Sessions button and the plate share a top edge (Wade 09-19); the chassis centres
   them against the plate's 30px bottom margin, which sat the button low */
.lab-session .rc-backbar { align-items: flex-start; }
.lab-session .rc-plate { margin-bottom: 0; }
/* the title runs the page, like every other Learn page; balanced so a long one breaks evenly
   instead of leaving one word on the second line (the 22ch cap did that to "Git hell.") */
.lab-session .mk-marq h1 { max-width: none; text-wrap: balance; }
.lab-session .mk-marq h1 em { font-style: normal; background: var(--neon); color: var(--on-accent); padding: 0 10px 2px; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.lab-session .mk-sub { max-width: 900px; text-wrap: balance; }
.lab-session .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; }

/* ---------- the stage: the video, full width above the columns ---------- */
.ss-stage { border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; box-shadow: var(--fm-flat, 8px 8px 0 var(--ink)); background: var(--surface); overflow: hidden; margin: 0 0 34px; }
.ss-player { position: relative; aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; }
.ss-player img, .ss-player iframe, .ss-player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.ss-player img { filter: grayscale(100%); opacity: 0.42; }
.ss-player .over { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; color: var(--on-ink); gap: 14px; }
.ss-player .over .stamp { font-size: 13px; background: var(--surface); }
.ss-player .over h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.6vw, 34px); letter-spacing: -0.8px; line-height: 1.1; margin: 0; max-width: 22ch; }
.ss-player .over h2 em { font-style: normal; background: var(--neon); color: var(--on-accent); padding: 0 8px 2px; border-radius: 4px; }
.ss-player .over p { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; margin: 0; color: rgba(244,241,234,0.85); }
.ss-player .over .actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.ss-player .over .btn { padding: 10px 16px; font-size: 13.5px; }
.ss-player .over .btn-ghost { background: var(--cream); }
.ss-player .play { width: 78px; height: 78px; border-radius: 50%; border: var(--fm-border-w) solid var(--on-accent); background: var(--neon); display: grid; place-items: center; box-shadow: var(--fm-flat, 4px 4px 0 var(--ink)); }
.ss-player .play svg { width: 30px; height: 30px; fill: var(--ink); margin-left: 5px; }
/* the bar under the player: chapters on the left, the state on the right */
.ss-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 18px; border-top: var(--fm-border-w) solid var(--fm-border-c); background: var(--cream); }
.ss-chapters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ss-chapters .k { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-2); margin-right: 6px; }
.ss-chapters button, .ss-chapters span.ch { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1px; padding: 5px 9px; border: var(--fm-border-w-sm) solid var(--fm-border-c); border-radius: 2px; background: var(--surface); color: var(--ink); cursor: pointer; }
.ss-chapters span.ch { border-style: dashed; border-color: var(--ink-3); color: var(--ink-3); cursor: default; }
.ss-chapters button b { font-weight: 700; margin-right: 6px; }
.ss-state { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.ss-state .live-dot { margin-right: 2px; }

/* ---------- the columns: Workforce chassis (.rc-layout) with the Lab's tone ----------
   Article (stage, then the lesson body) on the left, about two thirds; the side panel on the
   right, 300 to 360px; the contents box under the panel. The article takes every pixel the
   wrapper gives it (Wade 09-19: a capped grid left a blank strip down the right), so the
   stage runs 723px at 1440 and 1160px at 1920, where .mk-wrap's own 1640px ceiling stops it. */
.lab-session .rc-layout { margin-top: 6px; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 34px 40px; }
.lab-session .rc-main { max-width: none; }
.lab-session .rc-toccol { margin-top: 22px; }   /* air between the panel and the contents box, as on Essentials */
@media (min-width: 1660px) {
  .lab-session .rc-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); grid-template-areas: none; justify-content: start; }
  .lab-session .rc-aside { display: flex; }
  .lab-session .rc-main, .lab-session .rc-toccol, .lab-session .rc-side { grid-area: auto; }
}
@media (max-width: 1179px) {
  .lab-session .rc-layout { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .lab-session .rc-main { max-width: 720px; }
  .lab-session .rc-toccol { margin-top: 0; }
}
.lab-session .rc-tocbox .rc-toch { color: var(--ink-2); margin-bottom: 8px; }
.lab-session .rc-toc a { text-decoration: none; color: var(--ink-2); border-left: 2px solid var(--cream-border); }
.lab-session .rc-toc a.on { border-left: 3px solid var(--neon); color: var(--ink); }
.lab-session .rc-out { margin-bottom: 14px; }

/* Essentials body blocks (copied from essentials.css; same class names) */
.lab-session .ess-plain { border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--neon-tint); box-shadow: var(--fm-shadow-sm); padding: 16px 18px; margin: 0 0 22px; }
.lab-session .ess-plain .k { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
.lab-session .ess-plain p { font-size: 17px; line-height: 1.6; color: var(--ink); margin: 0; }
.lab-session .ess-obj { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0 6px; }
.lab-session .ess-obj-tile { border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--surface); box-shadow: var(--fm-shadow-sm); padding: 13px 15px; }
.lab-session .ess-obj-tile .o { 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: 8px; }
.lab-session .ess-obj-tile p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.lab-session .ess-story { border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--surface); box-shadow: var(--fm-shadow-sm); padding: 14px 16px; margin: 0 0 22px; }
.lab-session .ess-story.draft { border-style: dashed; box-shadow: none; }
.lab-session .ess-story .head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.lab-session .ess-story .k { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.lab-session .ess-story .k::before { content: ""; width: 18px; height: 2px; background: var(--neon); outline: 1px solid var(--ink); }
.lab-session .ess-story.draft .k { color: #C22800; }
.lab-session .ess-story .by { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.lab-session .ess-story p { font-size: 16px; line-height: 1.6; color: var(--ink); margin: 0 0 8px; }
.lab-session .ess-story p:last-child { margin-bottom: 0; }
.lab-session .co[class*="co-"] { position: relative; border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; padding: 24px 22px 18px; margin: 26px 0 8px; box-shadow: var(--fm-shadow-sm); }
.lab-session .co-stamp { position: absolute; top: -14px; left: 18px; display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1.5px solid var(--acc, var(--ink)); color: var(--ink); border-radius: 3px; padding: 4px 10px 4px 5px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }
.lab-session .co-stamp .ico { width: 22px; height: 22px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--acc, var(--neon)); border: var(--fm-border-w-sm) solid var(--on-accent); border-radius: 2px; }
.lab-session .co-stamp svg { width: 14px; height: 14px; stroke: var(--ink); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lab-session .co-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.3px; color: var(--ink); margin-bottom: 6px; }
.lab-session .co p { font-size: 15px; color: var(--ink-2); line-height: 1.6; margin: 0; }
.lab-session .co p + p { margin-top: 8px; }
.lab-session .co p strong { color: var(--ink); }
.lab-session .co-note  { --acc: var(--blue);   background: var(--blue-tint); }
.lab-session .co-check { --acc: var(--neon);   background: var(--neon-tint); }
.lab-session .co-warn  { --acc: var(--coral);  background: var(--coral-tint); }
.lab-session .co-faq   { --acc: var(--yellow); background: var(--yellow-tint); }
/* the perk callout (Wade + Tyler 09-19): a tool the page assumes, with a deal in the perks library.
   The Lab's own tint, a rotated "Included" stamp for the fun, the Perks button. When the perks page
   grows a deep link per vendor, the button gets it; until then it opens the library. Lives here
   for now; belongs in the shared stylesheet once the dark-mode thread lands. */
.lab-session .co-perk  { --acc: var(--teal);   background: var(--teal-tint); padding-right: 120px; }
.lab-session .co-perk .perk-stamp { position: absolute; top: 18px; right: 18px; transform: rotate(6deg); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #0A7A4E; border: 2px solid #0A7A4E; border-radius: 3px; padding: 5px 9px; background: rgba(255,255,255,0.55); }
.lab-session .co-perk .co-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.lab-session .co-perk .co-actions .btn { padding: 9px 14px; font-size: 13px; }
.lab-session .co-perk .co-hint { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-2); }
@media (max-width: 640px) { .lab-session .co-perk { padding-right: 22px; } .lab-session .co-perk .perk-stamp { position: static; display: inline-block; margin-bottom: 8px; } }
/* a page whose title sits inside the article column (the blueprint pages) */
.lab-blueprint .rc-main .mk-marq { margin-top: 2px; }
.lab-blueprint .rc-main .mk-sub { margin-bottom: 26px; }
.lab-session .rc-sec ul { margin: 12px 0 16px 22px; }
.lab-session .rc-sec li { font-size: 16px; color: var(--ink-2); line-height: 1.6; margin-bottom: 7px; }
.lab-session .rc-sec li strong { color: var(--ink); }
.lab-session .rc-ph .t { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
.lab-session .rc-ph .d { font-size: 14.5px; color: var(--ink-2); max-width: 560px; margin: 0 auto; line-height: 1.55; }

/* prompts from the session: copy-prompt.js binds .prompt and injects .copy-btn */
.ss-prompts { display: grid; gap: 18px; margin: 14px 0 10px; }
.lab-session .prompt { position: relative; border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--surface); box-shadow: var(--fm-shadow-sm); padding: 16px 18px 16px; }
.lab-session .prompt.draft { border-style: dashed; box-shadow: none; background: var(--cream-2); }
.lab-session .prompt-label { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-2); margin: 0 0 10px; padding-right: 90px; }
.lab-session .prompt-label .when { color: var(--ink-3); font-weight: 500; }
.lab-session .prompt p { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.65; color: var(--ink); margin: 0 0 8px; }
.lab-session .prompt p:last-child { margin-bottom: 0; }
.lab-session .prompt .copy-btn { position: absolute; top: 12px; right: 12px; font-family: var(--font-body); font-weight: 700; font-size: 12px; background: var(--neon); color: var(--on-accent); border: var(--fm-border-w-sm) solid var(--on-accent); border-radius: 2px; padding: 5px 10px; cursor: pointer; box-shadow: var(--fm-shadow-xs); }
.lab-session .prompt .copy-btn:hover { top: 10px; box-shadow: var(--fm-hover-btn, 4px 4px 0 var(--ink)); }
.lab-session .prompt .copy-btn.copied { background: var(--blue); }
.lab-session .prompt.draft .copy-btn { background: var(--surface); }

/* the transcript: a disclosure, empty until the recording is in */
.ss-transcript { border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--surface); margin: 10px 0 0; }
.ss-transcript summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink); }
.ss-transcript summary::-webkit-details-marker { display: none; }
.ss-transcript summary::after { content: "+"; font-size: 16px; line-height: 1; }
.ss-transcript[open] summary::after { content: "\2013"; }
.ss-transcript .body { padding: 14px 16px 16px; border-top: var(--fm-border-w) solid var(--fm-border-c); font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.ss-transcript .body p { margin: 0; }
/* the fold, filled: the transcript scrolls inside it, grouped under the chapters, each paragraph stamped with its time */
.ss-transcript .body.is-filled { max-height: 70vh; overflow-y: auto; }
.ss-transcript .body.is-filled p + p, .ss-transcript .body.is-filled h3 + p { margin-top: 10px; }
.ss-transcript .body.is-filled .tx-note { font-size: 13px; color: var(--ink-3); }
.ss-transcript .body.is-filled h3 { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink); margin: 22px 0 0; padding-top: 12px; border-top: 1.5px dashed var(--ink-3); }
.ss-transcript .body.is-filled time { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-right: 8px; }
.ss-transcript .body.is-filled h3 time { color: var(--ink-2); }

/* resources: a list of rows with a kicker and a link (or "lands after the session") */
.ss-res { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px dashed var(--ink-3); }
.ss-res li { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 10px 0; border-bottom: 1px dashed var(--ink-3); font-size: 14.5px; color: var(--ink-2); }
.ss-res li .k { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-3); }
.ss-res li b { color: var(--ink); font-weight: 600; }
.ss-res li a { color: var(--ink); }
.ss-res li .soon { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }

/* the side column: the Agent-Native OS card's (copied from cards/cards.css) */
.lab-session .rc-side .host { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; }
.lab-session .rc-side .host .pola { width: 96px; }
.lab-session .rc-side .host .who b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.3px; color: var(--ink); }
.lab-session .rc-side .host .who .org { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-3); margin: 3px 0 8px; }
.lab-session .rc-side .host .who p { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); margin: 0; }
.lab-session .rc-side .badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.lab-session .rc-side .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-session .rc-side .badge.b-class  { background: var(--surface); color: var(--ink); }
.lab-session .rc-side .badge.b-live   { background: var(--neon); color: var(--on-accent); }
.lab-session .rc-side .badge.b-demo   { background: var(--coral); color: var(--on-accent); }
.lab-session .rc-side .badge.b-8d     { background: var(--ink); color: var(--on-ink); }
.lab-session .meta-block { background: var(--surface); border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; box-shadow: var(--fm-shadow); padding: 18px 20px; }
.lab-session .meta-row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--cream-border); gap: 16px; }
.lab-session .meta-row:first-child { padding-top: 0; }
.lab-session .meta-row:last-child { border-bottom: none; padding-bottom: 0; }
.lab-session .meta-row .label { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); letter-spacing: 1.5px; text-transform: uppercase; flex-shrink: 0; }
.lab-session .meta-row .value { font-size: 14px; color: var(--ink); font-weight: 500; text-align: right; }
.lab-session .meta-row .value .live-dot { margin-right: 6px; vertical-align: middle; }
.lab-session .side-actions { display: grid; gap: 10px; margin: 18px 0 0; }
.lab-session .side-actions .btn { width: 100%; text-align: center; justify-content: center; }
.lab-session .side-actions .btn[aria-disabled="true"] { opacity: 0.6; cursor: default; }
.lab-session .side-note { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.55; letter-spacing: 0.4px; color: var(--ink-3); margin: 10px 2px 0; }
.lab-session .starter { background: var(--cream); border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; box-shadow: var(--fm-shadow); padding: 18px 20px 20px; margin-top: 22px; text-align: left; }
.lab-session .starter-label { font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); letter-spacing: 2px; text-transform: uppercase; font-weight: 600; margin-bottom: 8px; display: block; }
.lab-session .starter h3 { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); letter-spacing: -0.2px; margin: 0 0 6px; }
.lab-session .starter > p { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin: 0 0 12px; }
.lab-session .starter .prompt { box-shadow: none; padding: 14px 14px 12px; }
.lab-session .starter .prompt p { font-size: 12px; }
.lab-session .stamp { display: inline-block; border: 1.5px solid #0A7A4E; color: #0A7A4E; padding: 3px 7px; font-family: var(--font-mono); font-size: 12px; transform: rotate(-4deg); text-transform: uppercase; letter-spacing: 0.08em; }
.lab-session .stamp.warn { border-color: #C22800; color: #C22800; }
.lab-session .live-dot { width: 9px; height: 9px; border-radius: 50%; background: #0A7A4E; box-shadow: 0 0 8px #0A7A4E; display: inline-block; animation: lab-live-blink 1.5s infinite; }
.lab-session .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; }
.lab-session .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; }
.lab-session .pola .ph { display: block; overflow: hidden; aspect-ratio: 1 / 1; background: var(--cream-2); }
.lab-session .pola img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(100%) contrast(1.05); }
.lab-session .pola.zoom-heads img { object-position: 50% 22%; transform: scale(2.4); transform-origin: 50% 24%; }
.lab-session .pola.zoom-circle img { transform: scale(1.5); }

/* Inline links in the session body: the Essentials house style (ink text, neon underline, neon pill on
   hover; lime in terminal). The resources list keeps its own plain links. */
.lab-session .rc-sec :is(p, li, dd, td) a:not([class]):not(.ss-res a) {
  color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--neon);
  text-underline-offset: 3px; border-radius: 2px; transition: background .12s var(--ease), color .12s var(--ease);
}
.lab-session .rc-sec :is(p, li, dd, td) a:not([class]):not(.ss-res a):hover { background: var(--neon); color: var(--on-accent); text-decoration-color: transparent; }
html[data-design="terminal"] .lab-session .rc-sec :is(p, li, dd, td) a:not([class]):not(.ss-res a) { color: var(--neon); text-decoration-color: var(--neon-glow); }
html[data-design="terminal"] .lab-session .rc-sec :is(p, li, dd, td) a:not([class]):not(.ss-res a):hover { color: var(--on-accent); text-decoration-color: transparent; }
.lab-session .pola.is-mark img { filter: none; object-position: 50% 50%; }   /* a brand mark (the team's square AI Build Lab logo), not a photo: keep its colour (Wade 09-28) */

@media (max-width: 860px) {
  .lab-session .ess-obj { grid-template-columns: minmax(0, 1fr); }
  .ss-bar { grid-template-columns: minmax(0, 1fr); }
  .ss-res li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { .lab-session .live-dot { animation: none; } }
html[data-design="terminal"] .lab-session .stamp { border-color: #00D084; color: #00D084; }
html[data-design="terminal"] .lab-session .live-dot { background: #00D084; box-shadow: 0 0 8px #00D084; }

/* ---- Workforce addition: photo covers on the Recordings list cards (.les cards from _wf.css) ---- */
.wf-rec .les-cov { position: relative; overflow: hidden; }
.wf-rec .les-cov img.is-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wf-rec .les-cov .cover-date { position: absolute; left: 12px; top: 12px; z-index: 1; display: inline-flex; flex-direction: column; align-items: center; background: var(--surface); border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 3px; padding: 4px 8px; box-shadow: var(--fm-shadow-xs); }
.wf-rec .les-cov .cover-date .d { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-2); }
.wf-rec .les-cov .cover-date .n { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1; color: var(--ink); }
.wf-rec .rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin: 18px 0 8px; }
.wf-rec .les-t { font-size: 17px; }
.wf-rec .rec-note { font-size: 14px; color: var(--ink-2); margin: 14px 0 0; }
/* Pale-yellow literal on .lab-session cannot flip: dark gets a dark yellow tint (FAQ callouts). */
html[data-design="terminal"] .lab-session { --yellow-tint: #2a2300; }
/* Callout stamp icons are stroke icons in the theme ink, drawn on the accent square (.ico): dark stroke in dark. */
html[data-design="terminal"] .lab-session .co-stamp .ico svg { stroke: var(--on-accent); }


/* 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"] .ss-player .play,
html[data-design="terminal"] .lab-session .ess-story .k::before,
html[data-design="terminal"] .lab-session .prompt .copy-btn.copied { 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"] .lab-session .co-stamp .ico:not(:is(.a-violet, .a-slate, .a-ink) *):not(:is(.a-violet, .a-slate, .a-ink)) { color: var(--on-accent); }
html[data-design="terminal"] .lab-session .co-stamp .ico:is(:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime, .co-note, .co-check, .co-warn, .co-faq, .co-perk) *) { color: var(--on-accent); }
html[data-design="terminal"] .lab-session .ess-obj-tile .o { color: var(--cream); }
html[data-design="terminal"] .lab-session .rc-side .badge.b-8d { color: var(--cream); }
/* end rule 8 pins */

/* 09-25-2026 (Wade): the player starts as the session's art with a play button; YouTube loads on the
   first press (session_media.player + PLAYER_SCRIPT). Full colour, unlike the processing state's image. */
.ss-player .ss-poster { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; background: var(--ink); cursor: pointer; }
.ss-player .ss-poster img { filter: none; opacity: 1; }
.ss-player .ss-poster .play { position: relative; z-index: 1; transition: transform .15s var(--ease); }
.ss-player .ss-poster:hover .play, .ss-player .ss-poster:focus-visible .play { transform: scale(1.06); }
.ss-player .ss-poster:focus-visible { outline: 3px solid var(--neon); outline-offset: -3px; }
.ss-player .ss-poster .play svg { fill: var(--on-accent); }