/* ════════════════════════════════════════════════════════════
   lab-shell.css — the reader overlay + the token bridge.

   Two jobs:
   1. Modal chrome: a centred reading panel over /labs/, site still
      visible left and right. Click outside, Esc, or back to close.
   2. Token bridge: the 12 project pages were authored against the
      OLD system (styles.css, Geist, white). This maps every token
      they use onto the beta palette, so they inherit the new look
      without touching a single project file.
   ════════════════════════════════════════════════════════════ */

/* ── 0. self-hosted Geist Mono (SIL OFL 1.1) ──
   Served from our own origin so no visitor IP reaches Google. */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/geist-mono-v6-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/geist-mono-v6-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/geist-mono-v6-latin-700.woff2') format('woff2');
}

/* ── 1. overlay ── */
.lab-ov {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  padding: clamp(14px, 3.4vh, 42px) clamp(12px, 5vw, 60px);
  background: rgba(26, 23, 36, 0.42);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .34s cubic-bezier(.16,1,.3,1);
}
.lab-ov.is-mounted { display: block; }
.lab-ov.is-open { opacity: 1; }

.lab-panel {
  position: relative;
  width: min(940px, 100%);
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: #FEFEFE;
  border: 1px solid rgba(26, 23, 36, 0.10);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(16, 14, 24, 0.34), 0 8px 24px -12px rgba(16, 14, 24, 0.14);
  transform: translateY(16px) scale(.985);
  opacity: 0;
  transition: transform .40s cubic-bezier(.16,1,.3,1), opacity .30s ease;
}
.lab-ov.is-open .lab-panel { transform: none; opacity: 1; }

/* sticky masthead */
.lab-bar {
  flex: none;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px 13px 22px;
  border-bottom: 1px solid rgba(26, 23, 36, 0.09);
  background: rgba(254, 254, 254, 0.92);
  backdrop-filter: blur(10px);
}
.lab-bar__eyebrow {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8B869B;
}
.lab-bar__ttl {
  font-family: 'Satoshi', system-ui, sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #1A1724;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lab-bar__id { min-width: 0; flex: 1; }
.lab-bar__nav { display: flex; align-items: center; gap: 6px; flex: none; }
.lab-btn {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(26, 23, 36, 0.10);
  background: #FFFFFF;
  color: #5D5870;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.lab-btn:hover { color: #1A1724; border-color: rgba(26, 23, 36, 0.22); background: #F7F6FC; }
.lab-btn:disabled { opacity: .34; cursor: default; }
.lab-btn--x { margin-left: 4px; }
.lab-bar__open {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #5D5870;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(26, 23, 36, 0.10);
  white-space: nowrap;
  transition: color .18s ease, border-color .18s ease;
}
.lab-bar__open:hover { color: #6D4ECC; border-color: rgba(139, 124, 246, 0.42); }
@media (max-width: 640px) { .lab-bar__open { display: none; } }

/* read progress */
.lab-prog {
  flex: none;
  height: 2px;
  background: rgba(26, 23, 36, 0.07);
  position: relative;
  z-index: 3;
}
.lab-prog i {
  display: block;
  height: 100%;
  width: 0;
  background: #8B7CF6;
  transition: width .1s linear;
}

/* scroll body */
.lab-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(26,23,36,0.22) transparent;
}
.lab-scroll::-webkit-scrollbar { width: 10px; }
.lab-scroll::-webkit-scrollbar-thumb { background: rgba(26,23,36,0.18); border-radius: 99px; border: 3px solid #FEFEFE; }

.lab-loading {
  display: grid;
  place-items: center;
  min-height: 320px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8B869B;
}

/* next-project footer inside the reader */
.lab-next {
  border-top: 1px solid rgba(26, 23, 36, 0.09);
  padding: 30px clamp(20px, 4vw, 44px) 44px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}
.lab-next__side { max-width: 46%; }
.lab-next__side.is-r { text-align: right; margin-left: auto; }
.lab-next__k {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8B869B;
}
.lab-next__a {
  display: block;
  margin-top: 6px;
  font-family: 'Satoshi', system-ui, sans-serif;
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #1A1724;
  text-decoration: none;
  transition: color .18s ease;
}
.lab-next__a:hover { color: #6D4ECC; }

@media (max-width: 720px) {
  .lab-ov { padding: 0; }
  .lab-panel { border-radius: 0; border: 0; height: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .lab-ov, .lab-panel { transition: none; }
}

/* ── 2. token bridge ──────────────────────────────────────────
   Old-system names, beta-palette values. Applies to the doc
   inside the reader AND to a standalone project page that opts in
   by putting .lab-doc on <body>.
   Shadow Law: every glow token resolves to neutral or nothing.
   ─────────────────────────────────────────────────────────── */
.lab-doc {
  --bg: #FEFEFE;
  --bg-elev: #F7F6FC;
  --bg-elev-2: #EFEDF8;

  --fg: #1A1724;
  --fg-2: #423E52;
  --fg-3: #5D5870;
  --fg-4: #8B869B;

  --accent: #8B7CF6;
  --accent-2: #6D4ECC;
  --accent-soft: rgba(139, 124, 246, 0.07);
  --accent-glow: rgba(26, 23, 36, 0.10);
  --accent-glow-soft: transparent;

  --border-2: rgba(26, 23, 36, 0.10);
  --border-violet: rgba(139, 124, 246, 0.26);

  --teal: #1D9E75;
  --teal-glow: rgba(29, 158, 117, 0.20);
  --ok: #1D9E75;
  --ok-glow: rgba(29, 158, 117, 0.20);
  --warn: #BA7517;
  --warn-strong: #D85A30;
  --err: #D03B3B;

  --tint: var(--accent-2);
  --tint-soft: var(--accent-soft);
  --tint-border: var(--border-violet);
  --tint-glow: transparent;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  --font-sans: 'Satoshi', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;

  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.lab-doc h1, .lab-doc h2, .lab-doc h3 { font-family: var(--font-sans); }

/* Shadow Law — applies in BOTH contexts: the hero's ambient violet wash
   and every glow text-shadow the page's own CSS would otherwise keep. */
.lab-doc .hlw-hero::before { display: none; }
.lab-doc .hlw-kicker { text-shadow: none; }
.lab-doc [class*="hlw-"] { text-shadow: none; }

/* ── 3. reader-only ──────────────────────────────────────────
   Inside the overlay the hero shrinks to a masthead and the old
   page chrome is suppressed. A standalone page keeps its full
   hero and gets the real site header/footer instead.
   ─────────────────────────────────────────────────────────── */
.lab-scroll .lab-doc .hlw-hero { min-height: auto; padding: clamp(30px, 5vh, 62px) clamp(20px, 4vw, 44px) clamp(16px, 3vh, 32px); }
.lab-scroll .lab-doc .hlw-hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
.lab-scroll .lab-doc .hlw-hero .lede { font-size: clamp(1rem, 1.5vw, 1.12rem); }
.lab-scroll .lab-doc .hlw-top,
.lab-scroll .lab-doc .pv-top,
.lab-scroll .lab-doc .labs-dock,
.lab-scroll .lab-doc .deck-cue,
.lab-scroll .lab-doc .lb-foot,
.lab-scroll .lab-doc .hlw-foot { display: none !important; }
.lab-scroll .lab-doc section,
.lab-scroll .lab-doc .hlw-cap,
.lab-scroll .lab-doc .hlw-front,
.lab-scroll .lab-doc .hlw-bio { padding-top: clamp(2.4rem, 5vh, 4rem); padding-bottom: clamp(2.4rem, 5vh, 4rem); }

/* ── 4. site chrome for standalone project pages ─────────────
   Mirrors the header/footer in labs/index.html so a direct visit
   to /labs/<slug>/ sits inside the same site, not a bare page.
   ─────────────────────────────────────────────────────────── */
.pv-top { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(1.4) blur(14px);
  background: rgba(244,243,250,0.72); border-bottom: 1px solid rgba(26,23,36,0.08); }
.pv-top .wrap { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.pv-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 900; letter-spacing: -0.02em; font-size: 17px; color: var(--ink); }
.pv-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 4px rgba(139,124,246,0.18); }
.pv-nav { display: flex; align-items: center; gap: 26px; }
.pv-nav a { color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 500; transition: color 140ms ease-out; }
.pv-nav a:hover { color: var(--ink); }
.pv-nav a.on { color: var(--ink); font-weight: 700; }
.pv-nav .pv-cta { background: var(--ink); color: #FDFDFF; padding: 10px 18px; border-radius: var(--r-btn); font-size: 14px; font-weight: 700; }
@media (max-width: 780px) { .pv-nav a:not(.pv-cta) { display: none; } }

.lb-foot { margin-top: 96px; border-top: 1px solid rgba(26,23,36,0.08); }
.lb-foot .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 32px 0; flex-wrap: wrap; }
.lb-foot small { color: var(--faint); font-size: 13px; }
.lb-foot nav { display: flex; gap: 18px; }
.lb-foot nav a { color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 500; }
.lb-foot nav a:hover { color: var(--ink); }