/* ============================================================
   AI BUILD LAB — Card Detail Page Shared Styles
   Used by every card under /agent-native-os/portal/cards/<slug>/
   Light "Field Manual" aesthetic. Tokens + shared primitives come from
   field-manual.css (linked first in the card shell); this file only styles
   the card-detail components. Card-specific overrides (e.g. Cairns pyramid
   SVG) stay inline in each card's own <style> block.
   ============================================================ */

/* Reset — the dark-era cards.css had this; the Field Manual conversion dropped it,
   which left the body's default 8px margin (a gap showing the page bg around the nav). */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* Anchor-scroll offset: clear the mobile top bar (0 on desktop rail mode) plus a little air. */
html { scroll-padding-top: calc(var(--topbar-h, 0px) + 24px); scroll-behavior: smooth; }
.section[id], h2[id], h3[id] { scroll-margin-top: calc(var(--topbar-h, 0px) + 24px); }

body {
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.65;
  overflow-x: hidden;
}

/* === Nav (pre-JS fallback; lib/nav.js owns the live bar via .nav.aibl-nav) === */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--neon);
  border-bottom: var(--fm-border-w) solid var(--on-accent);
  padding: 11px var(--inset);
  display: flex; justify-content: space-between; align-items: center;
}
.nav-left { display: flex; align-items: center; gap: 14px; }
.nav-logo {
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  color: var(--ink); text-decoration: none; letter-spacing: -0.5px;
}
.nav-logo span { color: var(--ink); }
.nav-badge {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink); letter-spacing: 2px; text-transform: uppercase;
  padding: 4px 10px; border: var(--fm-border-w) solid var(--fm-border-c); background: var(--cream);
}
.nav-right { display: flex; gap: 28px; align-items: center; }
.nav-right a { font-size: 13px; color: var(--ink-2); text-decoration: none; transition: color .2s var(--ease); }
.nav-right a:hover { color: var(--ink); }
.nav-right a.active { color: var(--ink); font-weight: 700; }

/* === Breadcrumb === */
.crumb {
  padding: 24px var(--inset) 0;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 2px; text-transform: uppercase;
  display: flex; gap: 12px; flex-wrap: wrap;
  position: relative; z-index: 1;
}
.crumb a { color: var(--ink-2); text-decoration: none; transition: color .2s var(--ease); }
.crumb a:hover { color: var(--ink); }
.crumb .sep { color: var(--ink-3); }
.crumb .current { color: var(--ink); }

/* === Back bar: prominent return to the Library === */
.card-backbar {
  padding: 22px var(--inset) 0;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  position: relative; z-index: 1;
}
.card-backbar .crumb { padding: 0; }
.back-btn {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink);
  text-decoration: none; background: var(--surface);
  border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; padding: 8px 14px;
  box-shadow: var(--fm-shadow-sm);
  position: relative; top: 0; left: 0;
  transition: top .12s var(--ease), left .12s var(--ease), box-shadow .12s var(--ease), background .12s var(--ease), color .12s var(--ease);
}
.back-btn:hover { top: -2px; left: -2px; box-shadow: var(--fm-hover-btn, 6px 6px 0 var(--ink)); background: var(--neon); color: var(--on-accent); }
.back-btn:active { top: 1px; left: 1px; box-shadow: var(--fm-shadow-active, 1px 1px 0 var(--ink)); }
.back-btn svg { width: 16px; height: 16px; }
.card-bottom-back { padding: 8px var(--inset) 44px; position: relative; z-index: 1; }

/* === Hero === */
.hero {
  padding: 32px var(--inset) 56px;
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr 380px;
  gap: 64px; align-items: start;
}
/* The blurred radial glow is a dark-era motif; the Field Manual is flat. */
.hero-glow { display: none; }

/* Wider than the shared reading column: the hero H1 (short titles, big type) can
   take more room than body prose before wrapping — this only affects the hero,
   not .body's own read-width-based measure (Wade 07-12, "What Is an Agent-Native
   OS?" wrapping early on ~1200-1300px desktop widths). */
.hero-main { position: relative; z-index: 1; max-width: calc(var(--read-width) + 140px); }
.hero-eyebrow {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-2); letter-spacing: 3px; text-transform: uppercase;
  margin-bottom: 18px; display: flex; align-items: center; gap: 14px;
}
.hero-eyebrow::before { content: ''; width: 32px; height: 2px; background: var(--ink); }
.hero h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(40px, 5.5vw, 64px);
  line-height: 1.24; letter-spacing: -1.6px; margin-bottom: 20px;
}
/* Accent word: a neon highlighter pill by default (neon text is illegible on
   cream). The accent classes recolor the pill; ink/coral/teal pills carry cream
   text so the word stays legible. */
.hero h1 em {
  font-style: normal; background: var(--neon); color: var(--ink);
  padding: 1px 10px 3px; border-radius: 4px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.hero h1.accent-neon   em { background: var(--neon);  color: var(--ink); }
.hero h1.accent-blue   em { background: var(--blue);  color: var(--ink); }
.hero h1.accent-teal   em { background: var(--teal);  color: var(--ink); }
.hero h1.accent-coral  em { background: var(--coral); color: var(--ink); }
.hero h1.accent-purple em,
.hero h1.accent-violet em { background: #A78BFA;      color: var(--on-accent); } /* violet family, ink text 6.94:1 (black pill retired with the black bands, Wade 07-12) */
.hero h1.accent-amber  em { background: var(--neon);  color: var(--ink); }
.hero h1.accent-rose   em { background: var(--coral); color: var(--ink); }
.hero h1.accent-clay   em { background: #D97757;     color: var(--ink); }
/* Brand accents (Wade 07-12): each brand card's hilite carries its BRAND color,
   text pinned per pair — ink where it clears 4.5 (yt 4.72, gws 5.30, zoom 5.67,
   n8n 5.16), cream on slack aubergine (12.41; ink is 1.35 there). */
.hero h1.accent-yt    em { background: #FF0000; color: var(--on-accent); }
.hero h1.accent-gws   em { background: #4285F4; color: var(--on-accent); }
.hero h1.accent-zoom  em { background: #2D8CFF; color: var(--on-accent); }
.hero h1.accent-slack em { background: #4A154B; color: #F4F1EA; }
.hero h1.accent-n8n   em { background: #EA4B71; color: var(--on-accent); }
.hero-lede { font-size: 19px; color: var(--ink-2); line-height: 1.55; max-width: 620px; }

/* "What you'll have" outcomes block (in hero-main) */
.unlocks {
  margin-top: 38px; padding-top: 30px;
  border-top: var(--fm-border-w) solid var(--fm-border-c);
  max-width: 620px;
}
.unlocks-label {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-2); letter-spacing: 2.5px; text-transform: uppercase;
  font-weight: 600; display: block; margin-bottom: 16px;
}
.unlocks ul { list-style: none; padding: 0; margin: 0; }
.unlocks li {
  font-size: 16px; color: var(--ink-2); line-height: 1.55;
  padding: 9px 0 9px 32px; position: relative;
}
.unlocks li::before {
  content: '\2192'; position: absolute; left: 0; top: 9px;
  color: var(--ink); font-weight: 700;
  font-family: var(--font-display);
}
.unlocks li strong { color: var(--ink); font-weight: 600; }

/* === Hero sidebar === */
.hero-side { position: relative; z-index: 1; }

/* Cover A — solid accent band (no gradient, no noise). Square card with an ink
   border + hard offset shadow. The glyph sits ink on light bands, cream on the
   ink band. */
.cover {
  height: 200px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative; margin-bottom: 24px;
  border: var(--fm-border-w) solid var(--fm-border-c);
  box-shadow: var(--fm-shadow);
  background: var(--cream);
}
.cover.c-neon   { background: var(--neon); }
.cover.c-blue   { background: var(--blue); }
.cover.c-teal   { background: var(--teal); }
.cover.c-coral  { background: var(--coral); }
/* Violet family (Wade 07-12): the c-purple/c-violet names used to render
   var(--ink) near-black — black is retired from ACTIVE card banners (reserved
   for locked states). Pinned literal #A78BFA (the terminal --purple token):
   ink glyphs hold 6.94:1 on it, so these bands carry the same ink glyphs as
   every other band (the round3 #7C3AED managed only 3.31:1 with ink — above
   the 3:1 icon floor but too thin a margin to ship). */
.cover.c-purple,
.cover.c-violet { background: #A78BFA; }
.cover.c-amber  { background: var(--neon); }
.cover.c-rose   { background: var(--coral); }
.cover.c-clay   { background: #D97757; }
/* Brand bands (Wade 07-12, round3 brand strip live) — flat official-color
   grounds picked per mark; same values on the library tiles and in
   cards.classic.css so tile and detail match exactly in both themes. */
.cover.b-yt    { background: #FF0000; }   /* the brand's own red under a white mark (Wade 09-19) */
.cover.b-gws   { background: #202124; }
.cover.b-zoom  { background: #2D8CFF; }
.cover.b-slack { background: #4A154B; }
.cover.b-n8n   { background: #EA4B71; }
.cover.b-claude{ background: #D97757; }
/* Full-color brand mark image inside a cover (yt / gws / slack) */
.cover .cover-brand { position: relative; z-index: 1; width: 88px; height: 88px; object-fit: contain; }   /* the glyph's own 88px box, not a percentage (Wade 09-19) */
/* One box for every hero mark: square 88px, wide (a wordmark, the n8n glyph) 132x66; the inline svg's viewBox
   is trimmed to its painted bounds in card.json so the mark fills the box. */
.cover-glyph svg { display: block; width: 88px; height: 88px; }
.cover-glyph.wide svg { width: 132px; height: 66px; }

/* Neutralize the dark-era cover overlays (gradient fade + film-grain noise). */
.cover::after { display: none; }
.cover-pattern { display: none; }

/* Field Manual: the banner is taped to the wall — two translucent scotch-tape
   strips over its top corners + a slight tilt that varies by accent so each
   card's banner has a different casual slant (left + right, just noticeable).
   Tape + tilt both live on .cover so they rotate together. Terminal stays clean.
   (Placed after the ::after neutralize above so the tape isn't display:none'd.) */
.cover { overflow: visible; }
.cover::before, .cover::after {
  content: ''; display: block; position: absolute; top: -11px; width: 84px; height: 27px; z-index: 6;
  background: rgba(255, 247, 185, 0.80);
  background-image: linear-gradient(90deg, rgba(255,255,255,0.35), rgba(255,255,255,0) 45%, rgba(255,255,255,0.28));
  border: 1px solid rgba(0,0,0,0.13); box-shadow: 0 1px 2px rgba(0,0,0,0.10); pointer-events: none;
}
.cover::before { left: 22px;  transform: rotate(-26deg); }
.cover::after  { right: 22px; transform: rotate(24deg); }
/* (The old dark-band tape-shadow exception for c-purple/c-violet is gone with
   the black bands themselves: the violet fill is lighter than coral, which
   carries tape shadows and passes the polarity audit.) The DARK brand grounds
   (yt / gws / slack) need it instead — pale tape over a dark fill flips the
   shadow polarity, same mechanic. */
.cover.b-yt::before,    .cover.b-yt::after,
.cover.b-gws::before,   .cover.b-gws::after,
.cover.b-slack::before, .cover.b-slack::after { box-shadow: none; }
.cover.c-neon,   .cover.c-amber  { transform: rotate(-0.8deg); }
.cover.c-blue                    { transform: rotate(0.7deg); }
.cover.c-teal                    { transform: rotate(-1deg); }
.cover.c-coral,  .cover.c-rose   { transform: rotate(0.9deg); }
.cover.c-purple, .cover.c-violet { transform: rotate(-0.6deg); }
.cover.c-clay                    { transform: rotate(0.8deg); }
.cover.b-yt,   .cover.b-zoom,  .cover.b-n8n    { transform: rotate(0.7deg); }
.cover.b-gws,  .cover.b-slack, .cover.b-claude { transform: rotate(-0.7deg); }
.cover-glyph {
  font-family: var(--font-display);
  font-size: 88px; font-weight: 700; line-height: 1;
  color: var(--ink);
  position: relative; z-index: 1;
  letter-spacing: -3px;
}
/* Every cover accent is a FIXED fill (never flips with theme); glyph/icon color
   must be pinned dark too, not the flipping --ink default above (rule 8 — this
   is what made the "MB" cover-glyph and similar go near-invisible under
   terminal). Purple/violet joined this group 07-12: their band is now the light
   #A78BFA, so they take the same pinned ink glyphs as everything else (the old
   cream-on-black pair went out with the black bands). */
.cover.c-neon .cover-glyph,
.cover.c-blue .cover-glyph,
.cover.c-teal .cover-glyph,
.cover.c-coral .cover-glyph,
.cover.c-purple .cover-glyph,
.cover.c-violet .cover-glyph,
.cover.c-amber .cover-glyph,
.cover.c-rose .cover-glyph,
.cover.c-clay .cover-glyph,
.cover.b-claude .cover-glyph { color: var(--on-accent); }
/* The two brand-color grounds carry WHITE mono marks (rule 8 pinned; the
   app-icon read Wade asked for on zoom — white is 3.33:1 on zoom blue where
   cream drops to 2.97; n8n white-on-raspberry 3.66:1 per the strip). */
.cover.b-zoom .cover-glyph,
.cover.b-n8n .cover-glyph,
.cover.b-yt .cover-glyph { color: #FFFFFF; }

/* Label covers (Workshop Day cards): step + track chip instead of a glyph
   (main's Cohort-5 content), restyled to spec - solid fill, no backdrop blur,
   no soft glow (rules 1/8). Light text on fixed dark chip = legible on every band. */
.cover.is-label .cover-glyph {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px; font-weight: 700; line-height: 1; letter-spacing: 4px;
  color: #F4F1EA; padding: 12px 26px; border-radius: 4px;
  background: rgba(10,10,12,0.80); border: 1.5px solid rgba(244,241,234,0.40);
}

/* === Badges === */
.badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.badge {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 3px 9px; border: var(--fm-border-w-sm) solid var(--fm-border-c); font-weight: 700;
}
.badge.b-4d   { background: var(--neon);  color: var(--ink); }
.badge.b-8d   { background: var(--ink);   color: var(--cream); }
.badge.b-live { background: var(--coral); color: var(--ink); }
.badge.b-tier { background: var(--cream); color: var(--ink-2); }

/* === Meta block === */
.meta-block {
  background: var(--surface);
  border: var(--fm-border-w) solid var(--fm-border-c);
  border-radius: 4px;
  box-shadow: var(--fm-shadow);
  padding: 22px 24px;
}
.meta-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--cream-border); gap: 16px;
}
.meta-row:last-child { border-bottom: none; }
.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;
}
.meta-row .value { font-size: 14px; color: var(--ink); font-weight: 500; text-align: right; }
.meta-row .value code {
  font-family: var(--font-mono); font-size: 12.5px;
  background: var(--cream-2); padding: 2px 6px; border-radius: 3px;
  border: 1px solid var(--cream-border); color: var(--ink);
}
/* Concept/reference links in the meta block: use the card link blue (not the
   browser-default blue/purple, which showed purple once visited). */
.meta-row .value a, .meta-row .value a:visited { color: var(--blue); text-decoration: underline; }
.meta-row .value a:hover { text-decoration: none; }

/* === Starter prompt (one-click handoff) === */
.starter {
  background: var(--cream);
  border: var(--fm-border-w) solid var(--fm-border-c);
  border-radius: 4px;
  box-shadow: var(--fm-shadow);
  padding: 18px 22px 20px;
  margin-top: 20px;
  text-align: left;
}
.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;
}
.starter h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px; color: var(--ink); letter-spacing: -0.2px;
  margin-bottom: 6px;
}
.starter p { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin-bottom: 14px; }
.starter-btn {
  font-family: var(--font-body); font-weight: 700; font-size: 13.5px;
  background: var(--neon); color: var(--ink);
  padding: 11px 20px; border: var(--fm-border-w) solid var(--on-accent); border-radius: 4px;
  cursor: pointer; letter-spacing: 0.2px; width: 100%;
  box-shadow: var(--fm-shadow-sm);
  position: relative; top: 0; left: 0;
  transition: top .15s var(--ease), left .15s var(--ease), box-shadow .15s var(--ease);
  /* Brief lime pulse on load so the copy button gets noticed during install sessions. */
  animation: starter-btn-pulse 1.5s var(--ease) 0.5s 3;
}
.starter-btn:hover  { top: -2px; left: -2px; box-shadow: var(--fm-hover-btn, 6px 6px 0 var(--ink)); }
.starter-btn:active { top: 2px; left: 2px;   box-shadow: var(--fm-shadow-active, 1px 1px 0 var(--ink)); }
.starter-btn.copied { background: var(--blue); }
/* Pulse rings out and settles; hover still owns the hard-shadow snap. */
@keyframes starter-btn-pulse {
  0%, 100% { box-shadow: var(--fm-shadow-sm); }
  50% { box-shadow: 3px 3px 0 var(--ink), 0 0 24px 2px rgba(200,255,0,0.55); }
}
/* No motion preference: drop the pulse; the hard offset shadow stays. */
@media (prefers-reduced-motion: reduce) {
  .starter-btn { animation: none; }
}
/* Shared alternate prompts under the primary setup button (explain / use-case).
   Ghost (cream) styling so the primary setup prompt stays the main CTA. */
.starter-alts { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.starter-btn-alt { background: var(--surface); color: var(--ink); }
.starter-btn-alt:hover { background: var(--cream); }
.starter-btn-alt.copied { background: var(--blue); color: var(--on-accent); }

/* === Body container === */
.body {
  padding: 32px var(--inset) 120px;
  position: relative; z-index: 1;
  max-width: calc(var(--read-width) + var(--inset) * 4);  /* wider reading column (Wade preference) */
  margin: 0 auto;
}

/* === Section === */
.section { margin-bottom: 56px; }
.section h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.8px;
  margin-bottom: 18px;
  display: flex; align-items: baseline; gap: 14px;
}
.section h2::before {
  content: ''; flex-shrink: 0;
  width: 6px; height: 22px; background: var(--neon);
  border: var(--fm-border-w-sm) solid var(--on-accent); align-self: center;
}
.section h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 19px; letter-spacing: -0.3px; color: var(--ink);
  margin-top: 26px; margin-bottom: 10px;
}
.section p { font-size: 17px; color: var(--ink-2); line-height: 1.7; margin-bottom: 14px; }
.section p strong { color: var(--ink); font-weight: 600; }
.section ul, .section ol { margin: 14px 0 18px 24px; }
.section li { color: var(--ink-2); margin-bottom: 8px; line-height: 1.65; font-size: 16px; }
.section li strong { color: var(--ink); font-weight: 600; }
.section code {
  font-family: var(--font-mono); font-size: 13.5px;
  background: var(--cream-2); border: 1px solid var(--cream-border);
  padding: 2px 7px; border-radius: 3px; color: var(--ink);
}

/* === Prereqs block (build cards) === */
.prereqs {
  background: var(--surface);
  border: var(--fm-border-w) solid var(--fm-border-c);
  border-left: 6px solid var(--blue);
  border-radius: 4px;
  padding: 22px 28px;
}
.prereqs h3 {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink); letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 14px;
}
.prereqs ul { margin: 0; list-style: none; }
.prereqs li { padding-left: 28px; position: relative; margin-bottom: 8px; font-size: 15px; color: var(--ink-2); }
.prereqs li::before {
  content: ''; position: absolute; left: 3px; top: 6px;
  width: 6px; height: 11px; border: solid var(--ink);
  border-width: 0 2.5px 2.5px 0; transform: rotate(40deg);
}

/* === Build steps === */
.step {
  background: var(--surface);
  border: var(--fm-border-w) solid var(--fm-border-c);
  border-radius: 4px;
  box-shadow: var(--fm-shadow);
  padding: 28px 32px;
  margin-bottom: 28px;
  position: relative;
}
.step-head {
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  margin-bottom: 18px;
  padding-bottom: 16px; border-bottom: 1px solid var(--cream-border);
}
.step-num {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--on-accent); letter-spacing: 2px; text-transform: uppercase;
  background: var(--neon); border: var(--fm-border-w-sm) solid var(--on-accent);
  padding: 4px 10px;
  flex-shrink: 0;
}
.step-head h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; letter-spacing: -0.4px; line-height: 1.2;
  color: var(--ink); flex: 1;
  margin: 0;
}
.step-duration {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 1.5px;
  flex-shrink: 0;
}
.step p { margin-bottom: 12px; font-size: 16px; color: var(--ink-2); }
.step ul { margin: 10px 0 16px 22px; }
.step li { font-size: 15px; margin-bottom: 6px; color: var(--ink-2); }

/* === Code block === */
pre {
  background: var(--surface);
  border: var(--fm-border-w) solid var(--fm-border-c);
  border-radius: 4px;
  padding: 16px 20px;
  margin: 14px 0;
  overflow-x: auto;
  font-family: var(--font-mono); font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
}

/* === Prompt block (paste into Claude Code) === */
.prompt {
  background: var(--surface);
  border: var(--fm-border-w) solid var(--fm-border-c);
  border-left: 6px solid var(--blue);
  border-radius: 4px;
  padding: 14px 90px 16px 20px;
  margin: 16px 0;
  position: relative;
}
.prompt-label {
  display: block;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-2); letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 10px; font-weight: 600;
}
.prompt code {
  display: block;
  font-family: var(--font-mono); font-size: 14px;
  background: transparent; border: none; padding: 0;
  color: var(--ink); font-weight: 500;
  white-space: pre-wrap;
  word-break: break-word;
}
.prompt p {
  font-family: var(--font-body); font-size: 14.5px;
  color: var(--ink); margin: 0; line-height: 1.65;
}
.prompt p code {
  display: inline;
  font-family: var(--font-mono); font-size: 13px;
  background: var(--cream-2); border: 1px solid var(--cream-border);
  padding: 1px 6px; border-radius: 3px;
  color: var(--ink); white-space: nowrap; word-break: normal;
}
.copy-btn {
  /* WCAG 2.5.5 — measured 25px before this. Absolutely positioned, so the
     taller target does not reflow the block it sits in. */
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  position: absolute; top: 12px; right: 12px;
  font-family: var(--font-mono); font-size: 10px;
  font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  background: var(--cream);
  border: var(--fm-border-w-sm) solid var(--fm-border-c);
  color: var(--ink);
  padding: 5px 10px; border-radius: 3px;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.copy-btn:hover  { background: var(--neon); color: var(--on-accent); }
.copy-btn.copied { background: var(--neon); color: var(--on-accent); }

/* === If-this-fails callout === */
.stuck {
  background: var(--coral-tint);
  border: var(--fm-border-w-sm) solid var(--on-accent);
  border-left: 6px solid var(--coral);
  border-radius: 4px;
  padding: 14px 20px;
  margin-top: 14px;
  font-size: 15px;
  color: var(--ink-2);
}
.stuck::before {
  content: 'If this fails';
  display: block;
  font-family: var(--font-mono); font-size: 10px;
  /* --coral as text on --coral-tint (the block's own background) is ~2.3:1, fails AA
     in both themes — same tint-too-close-to-accent issue as .aside-warn above. The
     coral left-border already carries the warn signal; the label stays ink. */
  color: var(--ink); letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 6px; font-weight: 700;
}
.stuck strong { color: var(--ink); font-weight: 600; }

/* === Win callout === */
.win {
  background: var(--neon-tint);
  border: var(--fm-border-w-sm) solid var(--fm-border-c);
  border-left: 6px solid var(--neon);
  border-radius: 4px;
  padding: 20px 24px;
  margin: 20px 0;
  font-size: 16px;
  color: var(--ink);
}
.win::before {
  content: 'You shipped it';
  display: block;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink); letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 8px; font-weight: 700;
}

/* === Before/after compare (primer cards) === */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 28px 0; }
.compare-card {
  background: var(--surface);
  border: var(--fm-border-w) solid var(--fm-border-c);
  border-radius: 4px;
  padding: 22px 24px;
}
.compare-card.before { border-left: 6px solid var(--ink-3); }
.compare-card.after  { border-left: 6px solid var(--neon); }
.compare-label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase; font-weight: 700;
  margin-bottom: 14px; display: block;
}
.compare-card.before .compare-label { color: var(--ink-3); }
.compare-card.after  .compare-label { color: var(--ink); }
.compare-card p { font-size: 14.5px; line-height: 1.6; margin-bottom: 10px; color: var(--ink-2); }
.compare-card p:last-child { margin-bottom: 0; }
.compare-card .you { color: var(--ink); font-weight: 500; }
.compare-card .claude {
  color: var(--ink-2); padding-left: 16px;
  border-left: 2px solid var(--cream-border); margin-left: 4px;
}
.compare-card.after .claude { border-left-color: var(--neon); }

/* === Sections-table (primer cards) === */
.sections-table {
  background: var(--surface);
  border: var(--fm-border-w) solid var(--fm-border-c);
  border-radius: 4px;
  overflow: hidden;
  margin: 20px 0 24px;
}
.sections-row {
  display: grid; grid-template-columns: 56px 200px 1fr;
  gap: 18px; padding: 16px 22px;
  border-bottom: 1px solid var(--cream-border);
  align-items: baseline;
}
.sections-row:last-child { border-bottom: none; }
.sections-row .num { font-family: var(--font-mono); font-size: 13px; color: var(--ink); font-weight: 700; }
.sections-row .name { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); }
.sections-row .what { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }

/* === Aside / pull-quote callout === */
.aside {
  background: var(--blue-tint);
  border: var(--fm-border-w-sm) solid var(--on-accent);
  border-left: 6px solid var(--blue);
  border-radius: 4px;
  padding: 20px 26px;
  margin: 24px 0;
  box-shadow: var(--fm-shadow);
}
.aside-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;
}
.aside p { font-size: 16px; color: var(--ink); line-height: 1.6; margin: 0; }
.aside p strong { font-weight: 600; }

/* Warning variant: coral instead of blue. Use for hard rules / "do not" callouts. */
.aside.aside-warn { border-left-color: var(--coral); background: var(--coral-tint); }
/* --coral as text on --coral-tint is ~2.3:1 (fails AA) in both themes — the tint is
   too close to the accent's own luminance. Warn-severity reads via the border/tint
   already; the label stays the safe flipping ink (rule 3), like every other aside. */
.aside.aside-warn .aside-label { color: var(--ink); }

/* Compact info / comparison table used by a few cards (mode surfaces, secrets examples). */
.surf { width: 100%; border-collapse: collapse; margin: 16px 0 10px; background: var(--surface); border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; overflow: hidden; font-size: 14px; }
.surf th, .surf td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--cream-border); color: var(--ink-2); vertical-align: top; line-height: 1.5; }
.surf th { font-family: var(--font-mono); font-size: 11px; color: var(--ink); letter-spacing: 1px; text-transform: uppercase; background: var(--cream-2); }
.surf tbody tr:last-child td { border-bottom: none; }
.surf td strong { color: var(--ink); }
.surf code { font-size: 12.5px; }

/* === Where-to-go-next cards === */
.next-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px; margin-top: 24px;
}
.next-card {
  background: var(--surface);
  border: var(--fm-border-w) solid var(--fm-border-c);
  border-radius: 4px;
  box-shadow: var(--fm-shadow);
  padding: 22px 24px;
  text-decoration: none; color: var(--ink);
  position: relative; top: 0; left: 0;
  transition: top 0.16s var(--ease), left 0.16s var(--ease), box-shadow 0.16s var(--ease);
  display: block;
}
.next-card:hover { top: -3px; left: -3px; box-shadow: var(--fm-hover-card, 9px 9px 0 var(--ink)); }
.next-card .stage {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-2); letter-spacing: 1.5px; text-transform: uppercase;
  margin-bottom: 8px; display: block;
}
.next-card h4 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 17px; letter-spacing: -0.3px; margin-bottom: 6px;
}
.next-card p { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; margin: 0; }

/* Internal cross-links in card prose - ink with an underline affordance (the
   bright blue accent is too pale on cream for body-size text). Scoped to .body
   so nav + breadcrumb stay untouched; excludes .next-card tiles and .deck-btn
   (deck buttons carry their own styling - from main 07-07). */
.body a:not(.next-card):not(.deck-btn):not(.recording-tool) {
  color: var(--ink) !important;
  font-weight: 600;
  text-decoration: none;
  background-image: linear-gradient(var(--neon), var(--neon));
  background-repeat: no-repeat;
  background-position: 0 90%;
  background-size: 100% 0.30em;
  padding: 0 1px;
  transition: background-size 0.15s var(--ease);
}
.body a:not(.next-card):not(.deck-btn):not(.recording-tool):hover { background-size: 100% 100%; }
.body a:not(.next-card):not(.deck-btn):not(.recording-tool) code { color: var(--ink) !important; }

/* Week 2 prototype: make explicitly tagged tool-guide links feel clickable.
   Keep this opt-in until the interaction is approved for site-wide use. */
@keyframes tool-guide-link-wiggle {
  0%, 100% { transform: translateY(-2px) rotate(0deg); }
  30% { transform: translateY(-4px) rotate(-0.7deg); }
  60% { transform: translateY(-3px) rotate(0.7deg); }
  82% { transform: translateY(-4px) rotate(-0.35deg); }
}
.body a.tool-guide-link {
  display: inline-block;
  transform-origin: 50% 80%;
  transition: background-size 0.15s var(--ease), transform 0.15s var(--ease);
}
.body a.tool-guide-link:hover {
  animation: tool-guide-link-wiggle 0.38s ease-out 1;
}
.body a.tool-guide-link:focus-visible {
  background-size: 100% 100%;
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .body a.tool-guide-link { transition: background-size 0.15s var(--ease); }
  .body a.tool-guide-link:hover { animation: none; }
}

/* Hero lede links live outside .body, so the rule above does not reach them. */
.hero-lede a, .hero-lede a:visited {
  color: var(--ink); font-weight: 600; text-decoration: none;
  background-image: linear-gradient(var(--neon), var(--neon));
  background-repeat: no-repeat; background-position: 0 92%; background-size: 100% 0.26em;
  padding: 0 1px; transition: background-size 0.15s var(--ease);
}
.hero-lede a:hover { background-size: 100% 100%; }

/* Meta-block links (the "Touches" row cross-links) also live outside .body and had
   NO rule at all, so they rendered UA-default blue (#0000EE) — passable on the white
   FM panel, 2:1 unreadable on the dark terminal panel. Same treatment, sans the
   underline strip (too heavy at meta size): flipping ink + a neon underline on hover. */
.meta-row .value a, .meta-row .value a:visited {
  color: var(--ink); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--neon); text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* === "How this fits in the OS" — orientation block right below the hero === */
.fit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 12px;
}
.fit-item {
  background: var(--surface);
  border: var(--fm-border-w) solid var(--fm-border-c);
  border-radius: 4px;
  padding: 15px 16px;
  box-shadow: var(--fm-shadow);
}
.fit-item span {
  display: block;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-2); letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 7px;
}
.fit-item p { color: var(--ink-2); font-size: 14px; line-height: 1.55; margin: 0; }
.fit-item strong { color: var(--ink); font-weight: 600; }

/* === Inline figures (screenshots, illustrations) === */
.card-figure {
  margin: 24px 0 28px;
  background: var(--surface);
  border: var(--fm-border-w) solid var(--fm-border-c);
  border-radius: 4px;
  padding: 14px;
  overflow: hidden;
}
.card-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  border: 1px solid var(--ink);
}
/* Source-bound lesson art (Week 5/6): pandoc renders each markdown image as a
   bare paragraph holding one img. The stagers emit that src root-relative
   (/agent-native-os/portal/cards/<slug>/assets/...), so match on the
   /assets/ segment, never on a leading "assets/" prefix. Hand-authored
   1600x900 diagrams should fill the reading column; the Week 6 badge stamps
   and the operator license carry a small intrinsic width of their own and must
   render at it instead of stretching. */
.body p > img[src*="/assets/"] {
  display: block;
  width: 100%;
  height: auto;
  margin: 24px auto 28px;
}
.body p > img[src*="/assets/"][src*="-stamp."],
.body p > img[src*="/assets/"][src*="-operator-license."] {
  width: auto;
  max-width: 100%;
}

.card-figure figcaption {
  margin-top: 12px;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
  font-style: italic;
}
.card-figure figcaption code {
  font-style: normal;
  background: var(--cream-2);
  border: 1px solid var(--cream-border);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
}

/* W5-06 ships full-size 1440px reference captures as linked previews. Keep the
   exact source images clickable while constraining them to the reading column. */
#preview-the-shipped-examples a:has(> img) { display: block; background: none; }
#preview-the-shipped-examples img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: var(--fm-border-w) solid var(--fm-border-c);
  border-radius: 4px;
}

/* === ASCII diagrams === */
pre.diagram {
  background: var(--surface);
  border: var(--fm-border-w) solid var(--fm-border-c);
  border-radius: 4px;
  padding: 22px 18px;
  margin: 22px 0;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  overflow-x: auto;
  white-space: pre;
  text-align: center;
}

/* === Engine diagram (three doors -> one engine -> personalization layer) === */
.engine-diagram {
  background: var(--surface);
  border: var(--fm-border-w) solid var(--fm-border-c);
  border-radius: 4px;
  padding: 28px 22px 26px;
  margin: 24px 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ed-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  width: 100%;
}
.ed-doors {
  align-items: stretch;
}
.ed-door {
  flex: 1 1 0;
  max-width: 180px;
  background: var(--cream);
  border: var(--fm-border-w-sm) solid var(--fm-border-c);
  border-radius: 4px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.5px;
  text-align: center;
}
.ed-door-icon {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--ink);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
}
.ed-door-icon-img img {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: block;
}
.ed-connector {
  width: 2px;
  height: 22px;
  background: var(--ink);
  margin: 0;
}
.ed-engine {
  background: var(--neon);
  border: var(--fm-border-w) solid var(--on-accent);
  border-radius: 4px;
  padding: 14px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 220px;
  box-shadow: var(--fm-shadow);
}
.ed-engine-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--on-accent);
}
.ed-engine-label {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--on-accent);
}
.ed-personalization {
  flex-wrap: wrap;
  gap: 8px;
  max-width: 560px;
}
.ed-pill {
  background: var(--cream);
  border: var(--fm-border-w-sm) solid var(--fm-border-c);
  border-radius: 999px;
  padding: 6px 12px;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
}
.ed-personalization-label {
  margin-top: 14px;
  color: var(--ink-3);
  font-size: 12px;
  font-style: italic;
  text-align: center;
}
@media (max-width: 600px) {
  .ed-doors { flex-direction: column; align-items: stretch; }
  .ed-door { max-width: none; }
}

/* === Mobile === */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 32px; }
  .hero-side { max-width: 480px; }
  .compare { grid-template-columns: 1fr; }
  .sections-row { grid-template-columns: 40px 1fr; }
  .sections-row .what { grid-column: 1 / -1; padding-top: 4px; }
  .fit-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .fit-grid { grid-template-columns: 1fr; }
}

/* The load pulse belongs to the primary copy button only; alt prompts stay quiet. */
.starter-btn-alt { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .starter-btn-alt { box-shadow: none; }
}

/* Deck CTA: a button linking a card to its visual walkthrough slide deck.
   Restyled to the approved callout family (V2 / "F9": opaque tinted fill,
   full 2px ink border, mono eyebrow) — kills the legacy gradient/12px-radius/
   soft-shadow/backdrop look (the retired side-tab-adjacent dark treatment). */
.deck-cta {
  display: flex; align-items: center; gap: 16px;
  margin: 24px 0; padding: 18px 20px;
  background: var(--neon-tint);
  border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px;
  /* Standard-card depth (6px). 3px is the chip/label step on the scale, and a
     deck-cta is a panel, not a chip. */
  box-shadow: var(--fm-shadow);
}
.deck-cta::before {
  content: ''; flex-shrink: 0; width: 40px; height: 40px; border-radius: 2px;
  border: var(--fm-border-w-sm) solid var(--on-accent);
  background: var(--neon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}
/* Selector carries two classes so it outranks `.deck-cta-text span` (color/size).
   Lime is a FIXED fill: text pinned via --on-accent, border pinned #111 (rule 8) —
   var(--ink) here flipped light under the in-place terminal recolor (audit catch). */
.deck-cta .deck-cta-eyebrow {
  display: block; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--on-accent);
  border: 1.5px solid #111111; background: var(--neon);
  padding: 3px 8px; margin-bottom: 6px; width: fit-content;
}
.deck-cta-text { flex: 1; min-width: 0; }
.deck-cta-text strong { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; letter-spacing: -0.1px; }
.deck-cta-text span { color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.deck-cta .deck-btn {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 700; letter-spacing: 0.3px;
  color: var(--on-accent); background: var(--neon); text-decoration: none;
  padding: 11px 18px; border: var(--fm-border-w) solid var(--on-accent); border-radius: 4px;
  box-shadow: var(--fm-shadow-sm);
  position: relative; top: 0; left: 0;
  transition: top .15s var(--ease), left .15s var(--ease), box-shadow .15s var(--ease);
}
.deck-cta .deck-btn:hover { top: -2px; left: -2px; box-shadow: var(--fm-hover-btn, 6px 6px 0 var(--ink)); }
.deck-cta .deck-btn:active { transform: translate(1px,1px); box-shadow: var(--fm-shadow-active, 1px 1px 0 var(--ink)); }
.deck-cta .deck-btn svg { display: none; }
.deck-cta .deck-btn::after { content: '\2192'; font-size: 14px; line-height: 1; }
@media (max-width: 600px) {
  .deck-cta { flex-direction: column; align-items: flex-start; gap: 12px; }
  .deck-cta::before { display: none; }
}

/* ============================================================
   On-accent text (placed last so it wins by source order).
   Text/icons on lime/coral/violet/clay fills stay dark in BOTH themes via
   --on-accent (never flips). Purple/violet em joined the group 07-12 when
   their pill went from ink/cream to the light violet #A78BFA (ink 6.94:1).
   Excludes .starter-btn-alt: its background is var(--surface) (a FLIPPING
   token, the ghost-button surface, not a fixed accent fill), so it needs its
   normal flipping --ink text (set at its own rule above), not a pinned
   dark literal — pinning it here made the alt starter buttons go
   dark-on-dark (invisible) under terminal (rule 8, found 07-11).
   ============================================================ */
.hero h1 em,
.hero h1.accent-neon em, .hero h1.accent-blue em, .hero h1.accent-teal em,
.hero h1.accent-coral em, .hero h1.accent-amber em, .hero h1.accent-rose em,
.hero h1.accent-purple em, .hero h1.accent-violet em,
.hero h1.accent-clay em,
.badge.b-4d, .badge.b-live, .starter-btn:not(.starter-btn-alt) { color: var(--on-accent); }
/* renderStarter() (scripts/build-cards.mjs) puts BOTH classes on an alt button
   (class="starter-btn starter-btn-alt"), so the plain .starter-btn selector
   above would still catch them too without the :not() exclusion — confirmed
   via computed-style inspection 07-11 (alt buttons rendered #111 text on
   #111 background under terminal until this was added). */

/* ============================================================
   Canonical Field Manual card design (reference: what-is-an-agent-native-os).
   Lives in the shared stylesheet so EVERY FM card is consistent — no per-card
   inline font/background tweaks. Only applies in Field Manual mode (this whole
   sheet is disabled under [data-design="terminal"], which loads cards.classic.css).
   ============================================================ */
body { background-image: none; }      /* no graph-paper grid on card pages (library landing keeps its grid) */
.hero-lede { font-size: 20px; }
.section p { font-size: 19px; }
.section li { font-size: 17px; }

/* ============================================================
   Terminal recolor guards (Wade 07-12). In REAL terminal use this sheet is
   disabled (cards.classic.css loads instead), but under the IN-PLACE recolor
   path (audit stamping data-design, or any state before design-toggle.js
   swaps the sheets) these rules still render — and every accent fill whose
   border is var(--ink) flips to a WHITE RING on the dark canvas. Pin them
   dark, same idiom as .deck-cta-eyebrow's existing literal-#111 pin above.
   ============================================================ */
html[data-design="terminal"] .badge.b-4d,
html[data-design="terminal"] .badge.b-live { border-color: #111111; }
html[data-design="terminal"] .starter-btn { border-color: #111111; box-shadow: none; }
html[data-design="terminal"] .step-num { border-color: #111111; }
html[data-design="terminal"] .deck-cta .deck-btn { border-color: #111111; box-shadow: none; }
html[data-design="terminal"] .deck-cta .deck-btn:hover { box-shadow: 0 0 22px var(--neon-glow); }
/* The .deck-cta PANEL had no terminal override, so it kept FM's 2px border and
   3px hard offset into dark, where --ink flips near-white and the offset renders
   as a white shadow. Terminal contract (the-studio field-manual.design.md,
   terminal section corrected 07-11): panels are hairline, rounded to 12px, and
   flat at rest. The lime ::before tile and its pinned #111 stroke stay as-is,
   lime is a fixed fill in both themes. */
html[data-design="terminal"] .deck-cta {
  border-width: 1px; border-color: var(--cream-border);
  box-shadow: none; 
  background: var(--surface-2, #161616);
}
html[data-design="terminal"] .back-btn:hover,
html[data-design="terminal"] .copy-btn:hover,
html[data-design="terminal"] .copy-btn.copied { border-color: #111111; }
html[data-design="terminal"] .nav { border-bottom-color: #111111; } /* pre-JS fallback bar */

/* ============================================================
   Summer Camp Week 1 — lesson-card components (camp LMS build,
   07-12-2026). Additive: used only by cards/w1-* and the camp
   home. Field Manual skin; terminal twin in cards.classic.css.
   ============================================================ */

/* Objective: the what / why / how / connection formula, one lane each */
.obj-lanes { background: var(--surface); border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; overflow: hidden; }
.obj-lane { display: grid; grid-template-columns: 156px 1fr; gap: 16px; padding: 15px 20px; border-bottom: 1px dashed var(--ink-3); }
.obj-lane:last-child { border-bottom: none; }
.obj-lane .o-tag {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink); padding-top: 3px;
}
.obj-lane p { font-size: 15.5px; color: var(--ink-2); line-height: 1.6; margin: 0; }
.obj-lane p strong { color: var(--ink); font-weight: 600; }
@media (max-width: 560px) { .obj-lane { grid-template-columns: 1fr; gap: 5px; } }

/* Objective tiles: the 2x2 grid variant (camp lesson vote V2, Wade 07-12) */
.obj-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.obj-tile { background: var(--surface); border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; padding: 16px 18px; }
.obj-tile .o-tag { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.obj-tile .o-tag::before { content: ''; width: 18px; height: 2px; background: var(--neon); }
.obj-tile p { font-size: 15px; color: var(--ink-2); line-height: 1.55; margin: 0; }
.obj-tile p strong { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) { .obj-tiles { grid-template-columns: 1fr; } }

/* === Stamped semantic callouts (round-1 V1 stamp + tinted fill; Wade 07-12:
   note=blue, checkpoint=neon, warning=coral) === */
/* Require a semantic co-* modifier: Pandoc also emits bare span.co tokens in
   syntax-highlighted Markdown, and those spans must never become callouts. */
.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; }
.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); padding: 4px 11px 4px 4px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; transform: rotate(-4deg); box-shadow: var(--fm-shadow-sm); }
.co-stamp .ico { width: 18px; height: 18px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--acc, var(--neon)); border: 1px solid #111111; }
.co-stamp svg { width: 11px; height: 11px; color: #111111; }
.co-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.3px; color: var(--ink); margin-bottom: 6px; }
.co p { font-size: 15px; color: var(--ink-2); line-height: 1.6; }
.co p strong { color: var(--ink); }
.co p + p, .co ol, .co ul { margin-top: 6px; }
.co ol, .co ul { margin-left: 20px; }
.co li { font-size: 15px; color: var(--ink-2); padding: 3px 0; }
.co li strong { color: var(--ink); }
.co-note { --acc: var(--blue); background: var(--blue-tint); }
.co-check { --acc: var(--neon); background: var(--neon-tint); }
.co-warn { --acc: var(--coral); background: var(--coral-tint); }

/* Human-only checkpoint step: coral wash on the shared .step block */
.step.is-hc { background: var(--coral-tint); }
.step.is-hc .step-num { background: var(--coral); color: #111111; border-color: #111111; }
.hc-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  padding: 3px 8px; margin-left: 10px;
  background: var(--coral); color: #111111; border: 1.5px solid #111111;
  border-radius: 2px; vertical-align: 3px; white-space: nowrap;
}

/* Hero badges: checkpoint pages + the camp program mark */
.badge.b-hc   { background: var(--coral); color: var(--on-accent); }
.badge.b-camp { background: #A78BFA; color: #111111; }

/* Definition of done: the lesson's own punch list + the unlock action.
   Checkbox pattern: real input (sr-only) + styled .dod-box, so it works
   keyboard-first and progress.js can persist the ticks. */
.dod { background: var(--surface); border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; box-shadow: var(--fm-shadow); overflow: hidden; }
.dod-head {
  padding: 16px 24px 12px; border-bottom: var(--fm-border-w) solid var(--fm-border-c);
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.dod-eyebrow { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ink); }
.dod-count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.dod-row {
  display: flex; align-items: flex-start; gap: 13px; padding: 12px 24px;
  border-bottom: 1px dashed var(--ink-3);
  font-size: 15.5px; color: var(--ink); cursor: pointer;
}
.dod-row:last-of-type { border-bottom: none; }
.dod-check { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dod-box {
  width: 18px; height: 18px; border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 2px;
  background: var(--surface); flex: none; margin-top: 2px; position: relative;
}
.dod-check:checked + .dod-box { background: var(--neon); border-color: #111111; }
.dod-check:checked + .dod-box::after {
  content: ''; position: absolute; inset: 2px 3px 4px 3px;
  border-left: 2.5px solid #111111; border-bottom: 2.5px solid #111111;
  transform: rotate(-48deg);
}
.dod-check:focus-visible + .dod-box { outline: 2px solid var(--ink); outline-offset: 2px; }
.dod-check:checked ~ .dod-text { color: var(--ink-3); text-decoration: line-through; }
.dod-foot {
  padding: 16px 24px 20px; border-top: var(--fm-border-w) solid var(--fm-border-c);
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.dod-hint { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.dod-btn {
  /* WCAG 2.5.5 — measured 42px before this */
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  background: var(--neon); color: var(--on-accent);
  border: 1.5px solid #111111; border-radius: 3px;
  padding: 12px 18px; cursor: pointer;
  position: relative; top: 0; left: 0;
  transition: top 0.15s var(--ease), left 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.dod-btn:hover { top: -2px; left: -2px; box-shadow: var(--fm-hover-btn, 3px 3px 0 var(--ink)); }
.dod-btn.is-done { background: var(--surface); color: var(--ink); }

/* Lesson pager: previous is a link, next stays visibly locked until done */
.lesson-pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 44px; flex-wrap: wrap; }
.pg-link {
  font-family: var(--font-body); font-size: 14.5px; font-weight: 700;
  letter-spacing: 0; color: var(--ink);
  border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--surface);
  padding: 15px 22px; text-decoration: none;
  min-height: 44px;                     /* WCAG 2.5.5 — measured 28px before */
  display: inline-flex; align-items: center; gap: 11px;
  box-shadow: var(--fm-shadow-sm);
  position: relative; top: 0; left: 0;
  transition: top .13s var(--ease), left .13s var(--ease), box-shadow .13s var(--ease);
}
.pg-link:hover { top: -2px; left: -2px; box-shadow: var(--fm-hover-card, 6px 6px 0 var(--ink)); }
.pg-link.pg-next { background: var(--neon); color: var(--on-accent); border-color: #111111; }
.pg-link svg { width: 16px; height: 16px; flex: none; }

/* Terminal recolor guards (in-place recolor path): pin fixed fills dark */
html[data-design="terminal"] .step.is-hc .step-num,
html[data-design="terminal"] .hc-chip,
html[data-design="terminal"] .badge.b-hc,
html[data-design="terminal"] .badge.b-camp,
html[data-design="terminal"] .dod-btn { border-color: #111111; }

/* === Mobile hardening (Week 1 field manual) ==============================
   Long unbroken literals (64-char SHA-256 hashes, secret-shaped strings, and
   UPPER_SNAKE receipt tokens like CAMP_MATTERMOST_CONFIG_OK) wrap instead of
   forcing the whole page to pan sideways on phones, and wide code blocks and
   tables scroll inside their own box. overflow-wrap is inherited, so setting it
   on the card body reaches inline <code>, <strong>, and DoD text; <pre> and
   .prompt code keep white-space:pre / nowrap, which wins over overflow-wrap, so
   formatted command blocks stay intact and still scroll via their existing
   overflow-x. min-width:0 lets these boxes shrink inside their flex parents (the
   DoD row is a flexbox). All additive: on desktop nothing is long enough to
   trigger a break, so layout is unchanged. */
.body { overflow-wrap: anywhere; }
/* ...except inside tables. `anywhere` counts its break opportunities when the
   browser computes min-content intrinsic size, so an auto-layout table decides a
   column can be one character wide and shatters ordinary words ("Captio ns",
   "Chapte r map"). `break-word` still wraps a genuinely oversized literal but is
   ignored for intrinsic sizing, so columns size off whole words again. */
.body th, .body td { overflow-wrap: break-word; }
.dod-text { min-width: 0; }
pre { max-width: 100%; min-width: 0; }
@media (max-width: 640px) {
  .body table { display: block; overflow-x: auto; }
}

/* === "Under the hood" expandable (details.hood) ==========================
   Canonical home for the collapsible technical-detail flap the Week 3 cards
   use to keep command/config detail off the main path. The W3 revision lanes
   each drafted a scoped per-card <style> block for this component; they are
   unified here so every card renders the same flap from one source. */
.hood { margin: 14px 0 6px; border: var(--fm-border-w) solid var(--fm-border-c); border-radius: 4px; background: var(--surface); }
.hood summary {
  cursor: pointer; list-style: none; padding: 12px 16px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ink-2); display: flex; align-items: center; gap: 10px;
}
.hood summary::-webkit-details-marker { display: none; }
.hood summary::before { content: '+'; font-size: 16px; color: var(--ink); }
.hood[open] summary::before { content: '-'; }
.hood summary:hover { color: var(--ink); }
.hood p, .hood li { font-size: 15px; color: var(--ink-2); line-height: 1.65; }
.hood p { padding: 0 16px 14px; margin: 0; }
.hood ul, .hood ol { padding: 0 16px 14px 38px; margin: 0; }
.hood li + li { margin-top: 4px; }
.hood pre { margin: 0 16px 14px; }

/* === Jump-cue target highlight (w3-00): in-page cues scroll up to the starter
   buttons, so make the landing UNMISSABLE: a wiggle that runs six times, a
   pulsing blue glow, a background flash that holds about 3s, then a persistent
   ring with a "this one" tag so even a late glance finds the button. The w3-00
   body script assigns #starter-btn-alt to the first alt button and re-fires
   .cue-flash on every cue click; the :target rules below are the no-JS base. = */
#starter-btn, #starter-btn-alt { scroll-margin-top: 96px; }
@keyframes cue-wiggle {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  20% { transform: translateX(-5px) rotate(-1.6deg); }
  40% { transform: translateX(5px) rotate(1.6deg); }
  60% { transform: translateX(-4px) rotate(-1deg); }
  80% { transform: translateX(4px) rotate(1deg); }
}
@keyframes cue-glow {
  0%, 100% { box-shadow: 3px 3px 0 var(--ink), 0 0 0 4px var(--blue), 0 0 18px 4px rgba(0,212,255,0.55); }
  50% { box-shadow: 3px 3px 0 var(--ink), 0 0 0 7px var(--blue), 0 0 34px 10px rgba(0,212,255,0.75); }
}
.starter-btn:target, .starter-btn.cue-flash {
  animation: cue-wiggle 0.45s var(--ease) 6, cue-glow 0.9s ease-in-out 3;
  background: var(--blue);
  outline: 4px solid var(--blue);
  outline-offset: 3px;
  position: relative;
  z-index: 2;
}
.starter-btn.cue-seen {
  outline: 4px solid var(--blue);
  outline-offset: 3px;
  box-shadow: 3px 3px 0 var(--ink), 0 0 20px 5px rgba(0,212,255,0.55);
}
.starter-btn:target::after, .starter-btn.cue-flash::after, .starter-btn.cue-seen::after {
  content: '  \1F448  this one';
  font-weight: 800;
}
@media (prefers-reduced-motion: reduce) {
  .starter-btn:target, .starter-btn.cue-flash { animation: none; }
}

/* Weeks 1 to 4 plain Markdown tables: the same styling Week 8 and later weeks use
   (padding, borders, dark header row, zebra rows). Classed tables (recording-table,
   w1-table, w4-table, loop-kinds, sections-table, surf) keep their own styles. */
:is([data-lesson^="w1-"],[data-lesson^="w2-"],[data-lesson^="w3-"],[data-lesson^="w4-"]) table:not([class]){border-collapse:collapse;width:100%;margin:20px 0 28px;border:1px solid var(--ink)}
:is([data-lesson^="w1-"],[data-lesson^="w2-"],[data-lesson^="w3-"],[data-lesson^="w4-"]) table:not([class]) :is(th,td){padding:14px 16px;vertical-align:top;text-align:left;border-bottom:1px solid var(--cream-border);font-size:15px;line-height:1.55}
:is([data-lesson^="w1-"],[data-lesson^="w2-"],[data-lesson^="w3-"],[data-lesson^="w4-"]) table:not([class]) th{background:var(--ink);color:var(--surface);font-weight:700}
:is([data-lesson^="w1-"],[data-lesson^="w2-"],[data-lesson^="w3-"],[data-lesson^="w4-"]) table:not([class]) tr:nth-child(even) td{background:var(--cream-2)}
@media (max-width: 640px) {
  :is([data-lesson^="w1-"],[data-lesson^="w2-"],[data-lesson^="w3-"],[data-lesson^="w4-"]) table:not([class]){display:block;overflow-x:auto;max-width:100%}
  :is([data-lesson^="w1-"],[data-lesson^="w2-"],[data-lesson^="w3-"],[data-lesson^="w4-"]) table:not([class]) :is(th,td){padding:10px 12px;font-size:14px}
}
/* terminal overrides: card-pages (fm-overrides.mjs, regenerate, do not hand-edit) */
/* 204 pages, 2358 inline rules read, 18 overrides. Source: each page's own <style>. */
html[data-design="terminal"] .tbl-scroll { border-color: var(--fm-border-c); border-width: var(--fm-border-w); }
html[data-design="terminal"] table.plans th { border-bottom-color: var(--fm-border-c); border-bottom-width: var(--fm-border-w); }
html[data-design="terminal"] .status-word { border-color: var(--on-accent); color: var(--on-accent); }
html[data-design="terminal"] .week10-file-tray { border-color: var(--fm-border-c); border-width: var(--fm-border-w); }
html[data-design="terminal"] .w1-table { border-color: var(--fm-border-c); border-width: var(--fm-border-w); }
html[data-design="terminal"] .w1-table th { border-bottom-color: var(--fm-border-c); border-bottom-width: var(--fm-border-w); }
html[data-design="terminal"] table.w4-table thead th { border-bottom-color: var(--fm-border-c); border-bottom-width: var(--fm-border-w); }
html[data-design="terminal"] .lane-card { border-color: var(--fm-border-c); border-width: var(--fm-border-w); }
html[data-design="terminal"] .lane-card .lane-tag { border-color: var(--fm-border-c); }
html[data-design="terminal"] .week6-file-tray { border-color: var(--fm-border-c); border-width: var(--fm-border-w); }
html[data-design="terminal"] .week7-file-tray { border-color: var(--fm-border-c); border-width: var(--fm-border-w); }
html[data-design="terminal"] .week8-file-tray { border-color: var(--fm-border-c); border-width: var(--fm-border-w); }
html[data-design="terminal"] .week8-diagram { border-color: var(--fm-border-c); border-width: var(--fm-border-w); box-shadow: none; }
html[data-design="terminal"] .week9-file-tray { border-color: var(--fm-border-c); border-width: var(--fm-border-w); }
html[data-design="terminal"] .next-cover { border-bottom-color: var(--fm-border-c); border-bottom-width: var(--fm-border-w); }
html[data-design="terminal"] .layered-brain .layer { border-color: var(--fm-border-c); border-width: var(--fm-border-w); box-shadow: none; }
html[data-design="terminal"] .next-cover.c-coral { color: var(--on-accent); border-color: var(--on-accent); }
html[data-design="terminal"] .next-cover.c-teal { color: var(--on-accent); border-color: var(--on-accent); }
/* end terminal overrides: card-pages */

/* Hand fixes, terminal only (09-25). Card pages now keep this sheet in dark (the classic swap is retired). */
/* Secondary starter buttons carry .starter-btn too, so the lime button's pin reached them: theme ink back. */
html[data-design="terminal"] .starter-btn.starter-btn-alt { color: var(--ink); border-color: var(--fm-border-c); }
html[data-design="terminal"] .starter-btn.starter-btn-alt.copied { color: var(--on-accent); }
/* ".body a:not(...) { color: var(--ink) }" outranks the lime Next button's own colour; dark needs it pinned. */
html[data-design="terminal"] .body a.pg-link.pg-next { color: var(--on-accent) !important; }
/* Card prose links carry a lime highlighter that fills the whole link on hover: dark text on it in dark. The
   base rule is !important, so the pin is too. */
html[data-design="terminal"] .body a:not(.next-card):not(.deck-btn):not(.recording-tool):hover,
html[data-design="terminal"] .body a:not(.next-card):not(.deck-btn):not(.recording-tool):hover code { color: var(--on-accent) !important; }
/* The starter jump link only had a colour in the retired classic sheet: the dark theme's link lime. */
html[data-design="terminal"] .starter-jump-link { color: var(--neon); }
/* The starter button pulses with a hard ink shadow written into its keyframes, which the tokens cannot reach.
   Dark gets a glow-only pulse, and only when motion is allowed (reduced motion keeps "animation: none"). */
@keyframes starter-btn-pulse-dark {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 24px 2px rgba(200,255,0,0.55); }
}
@media (prefers-reduced-motion: no-preference) {
  html[data-design="terminal"] .starter-btn:not(.starter-btn-alt) { animation-name: starter-btn-pulse-dark; }
}
/* The Slack headline highlight is aubergine with cream text by design; the lime-highlight pin darkened it. */
html[data-design="terminal"] .hero h1.accent-slack em { color: #F4F1EA; }
/* personalize-flow's question columns draw "border: 2px solid" with no colour, so it follows the text: hairline. */
html[data-design="terminal"] .qcol { border-color: var(--fm-border-c); border-width: var(--fm-border-w); }
/* Light-fill covers (neon, blue, teal, coral, violet, amber, rose): their icons draw in currentColor, which is
   ink (#111 in light, light grey in dark). Dark on the fill, as light shows. Purple and clay are darker and set
   their own icon colours. */
html[data-design="terminal"] .cover:is(.c-neon, .c-blue, .c-teal, .c-coral, .c-violet, .c-amber, .c-rose),
html[data-design="terminal"] .cover:is(.c-neon, .c-blue, .c-teal, .c-coral, .c-violet, .c-amber, .c-rose) .week8-cover-icon { color: var(--on-accent); }
/* Screenshots framed by a style attribute (border: 2px solid var(--ink)) keep a heavy light frame in dark;
   decision 4 is a hairline. An attribute can only be overridden with !important. */
html[data-design="terminal"] .body img[style*="solid var(--ink)"] { border-color: var(--fm-border-c) !important; border-width: var(--fm-border-w) !important; }
/* Prose links (Wade 09-25): the lime highlighter bar sits behind the lower third of the letters, which reads
   fine as ink-on-lime in light but clips the light text in dark. Dark draws a real underline below the text
   instead; hover still fills the link lime with dark text. Plain text links only: classed links keep their look. */
html[data-design="terminal"] .body a:not([class]):not(.next-card):not(.deck-btn):not(.recording-tool) {
  background-size: 100% 0;
  text-decoration: underline;
  text-decoration-color: var(--neon);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
html[data-design="terminal"] .body a:not([class]):not(.next-card):not(.deck-btn):not(.recording-tool):hover { background-size: 100% 100%; text-decoration-color: transparent; }


/* 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"] .nav,
html[data-design="terminal"] .hero h1 em,
html[data-design="terminal"] .hero h1.accent-neon   em,
html[data-design="terminal"] .hero h1.accent-blue   em,
html[data-design="terminal"] .hero h1.accent-teal   em,
html[data-design="terminal"] .hero h1.accent-coral  em,
html[data-design="terminal"] .hero h1.accent-amber  em,
html[data-design="terminal"] .hero h1.accent-rose   em,
html[data-design="terminal"] .cover.c-neon,
html[data-design="terminal"] .cover.c-blue,
html[data-design="terminal"] .cover.c-teal,
html[data-design="terminal"] .cover.c-coral,
html[data-design="terminal"] .cover.c-amber,
html[data-design="terminal"] .cover.c-rose,
html[data-design="terminal"] .badge.b-4d,
html[data-design="terminal"] .badge.b-live,
html[data-design="terminal"] .starter-btn,
html[data-design="terminal"] .starter-btn.copied,
html[data-design="terminal"] .section h2::before,
html[data-design="terminal"] .ed-engine,
html[data-design="terminal"] .deck-cta::before,
html[data-design="terminal"] .obj-tile .o-tag::before,
html[data-design="terminal"] .dod-check:checked + .dod-box,
html[data-design="terminal"] .starter-btn:target,
html[data-design="terminal"] .starter-btn.cue-flash { 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"] .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"] .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) *) { color: var(--on-accent); }
/* end rule 8 pins */