/* 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; }
/* The chosen kind is a solid lime tile with fixed dark text, like the Vault picker (Wade 09-26). */
.rq-opt.is-on { background: var(--neon); border-color: var(--on-accent); }
.rq-opt.is-on .t { color: var(--on-accent); }
.rq-opt.is-on .s { color: var(--on-accent-2); }
.rq-opt.is-on input { accent-color: var(--on-accent); }
.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: 12px 0 14px; } /* clear of the plate's shadow (Wade 09-21) */
.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)); }
/* the live board (09-25): status lines, the staff-only status picker and team-only name, closed posts */
.rq-note { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.rq-note:empty { display: none; }
.rq-note.is-bad { color: var(--ink); font-weight: 600; }
.rq-board-note { margin: 0 0 12px; }
.lab .rq-card p.rq-team { margin: -8px 0 12px; line-height: 1.5; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.6px; color: var(--ink-3); overflow-wrap: anywhere; }
.rq-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: -4px 0 10px; }
.rq-textbtn { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-2); background: none; border: none; padding: 4px 2px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.rq-textbtn:hover { color: var(--ink); }
.rq-textbtn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.rq-textbtn.is-danger { color: var(--ink); background: var(--coral-tint); border: 1.5px solid var(--ink); border-radius: 2px; padding: 4px 8px; text-decoration: none; }
.rq-confirm { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ink); }
.rq-confirm > span { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.rq-teamnote { margin: 0 0 12px; padding: 8px 10px; border-left: 3px solid var(--neon); background: var(--cream); font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.rq-teamnote-k { display: block; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
.rq-teamnote a { color: var(--ink); font-weight: 600; }
.rq-noteform { display: grid; gap: 10px; margin: 0 0 12px; padding: 12px; border: 1.5px dashed var(--ink-3); border-radius: var(--lab-r); }
.rq-noteform .rq-field input { font-family: var(--font-body); font-weight: 500; font-size: 14px; padding: 8px 10px; }
.rq-noteform-actions { display: flex; align-items: center; gap: 12px; }
.rq-status { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink); background: var(--cream); border: 1.5px solid var(--ink); border-radius: 2px; padding: 4px 6px; cursor: pointer; }
.rq-status:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.lab .rq-card.is-closed { opacity: 0.6; box-shadow: none; }
@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, 1fr); max-width: 880px; gap: 24px; align-items: start; margin: 0 0 54px; }
.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; }
}
/* Hand fix, terminal only (09-25): the vault picker's "Showing" chip is black on the lime tile in light; the
   ink-chip fix made it light grey in dark, which washes out on lime. On the lime tile it stays black. */
html[data-design="terminal"] .vault-pick button[aria-pressed="true"] .w .pick { background: var(--on-accent); color: var(--on-ink); }


/* rule 8 pins: fm-sweep.mjs */
/* Text, border and icon stroke on an accent fill stay dark in the terminal theme (decision 6). */
html[data-design="terminal"] .lab-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"] .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); }