/* extend.css — design-test/ delta on top of style.css.
 * Phase I sandbox: loaded ONLY by the 4 redesigned pages
 * (index, learn, orange-pages, building-in-public).
 *
 * Strip rationale: anything already in style.css (typography, .btn family,
 * .section, .card base, .card__title/__text, .site-header, .container)
 * stays as-is. extend.css is purely additive — new tokens, new layout
 * primitives, new components, plus the Round-3 green-aliveness + motion
 * delta.
 *
 * Spec: design-test/_inbox/round3/youbuycrypto/project/explore/DESIGN.md
 * Voice: AAA contrast default, italic-not-muted, BTC orange = structure,
 *        green = aliveness signal, CSP-clean (no inline scripts).
 */

/* ===========================================================
 * TOKENS — additions only (style.css owns the base set)
 * =========================================================== */
:root {
  /* paper-dark surfaces — reserved for "reading" cards on /learn detail */
  --bg-paper:        #14110d;
  --bg-paper-card:   #1a1612;
  --bg-paper-border: #2c241c;

  /* tier label colors — semantic per education tier */
  --label-fund:    var(--accent-green);   /* Fundamentals (1-7) */
  --label-inter:   var(--accent-blue);    /* Intermediate (8-14) */
  --label-adv:     var(--btc-orange);     /* Advanced (15-21) */
  --label-supp:    var(--btc-gold);       /* Supplementary (22-29) */

  /* layout primitives */
  --col-rail:    14rem;   /* width of the sticky spine rail */
  --row-tick:    2.4rem;  /* line-height tick for ledger rows */

  /* Existing site-header rendered height — pin position MUST match the rail's
     natural top, otherwise sticky clips the FIVE PILLARS box top on scroll.
     6rem covers the header's content row (logo + buttons) + padding + ::after. */
  --site-header-h: 6rem;
}

/* ===========================================================
 * LAYOUT — split (rail + content), row, read-col
 * =========================================================== */

.split {
  display: grid;
  grid-template-columns: var(--col-rail) minmax(0, 1fr);
  gap: 2.4rem;
  align-items: start;
  /* Keep section taller than viewport so the sticky rail stays sticky. */
  min-height: calc(100vh - var(--site-header-h));
  /* No top padding — rail's natural top must equal sticky pin position
     (`top: var(--site-header-h)`) so sticky engages with zero jump on scroll.
     Bottom padding is 0 because <footer> is nested as the last grid child. */
  padding-block: 0;
}

/* Site-footer is nested INSIDE .split (S190 fix) so the sticky-rail's
 * containing block extends through the full page — rail stays pinned all
 * the way to the bottom regardless of viewport size. Footer spans both
 * grid columns and breaks out to full viewport width visually. */
.split > .site-footer {
  grid-column: 1 / -1;
  margin-top: 4rem;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Rail pins right under the existing site-header from page-load.
 * Footer is INSIDE .split so the sticky containing block extends to body
 * bottom — sticky NEVER pushes the rail up, FIVE PILLARS always visible.
 * No max-height, no overflow-y, no internal scrollbar. Rail is its
 * natural content height; if content > corridor at extreme zoom, it
 * coexists visually with footer's full-width band. */
/* Three-zone sticky rail (S190 update — supersedes "3 lines only" rule):
   TOP anchor (THE FIVE PILLARS + Home) and BOTTOM anchor (rail-foot) never
   compress — both flex-shrink: 0. MIDDLE zone scrolls when content overflows
   available rail height. Pure CSS, no JS, always-visible by construction.
   Locked rule: memory/feedback_sidebar_architecture.md */
.split__rail {
  position: sticky;
  top: var(--site-header-h);
  align-self: start;
  max-height: calc(100vh - var(--site-header-h));
  display: flex;
  flex-direction: column;
  /* Small breathing room at rail-bottom — visual whitespace before .split ends.
     The earlier "rail/footer overlap" issue (2026-04-29) was solved architecturally
     by moving z2 outside <main>, per feedback_page_box_model.md. Sticky now releases
     naturally at .split's end; z2 renders below without containing-block conflict. */
  padding-bottom: clamp(0.5rem, 2vh, 1.5rem);
}
.split__rail-top,
.split__rail-bottom {
  flex-shrink: 0;
}
.split__rail-mid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Auto-hide ultra-thin orange scrollbar (Firefox + webkit).
     Track stays transparent; thumb fades from invisible → orange on hover. */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.3s ease;
}
.split__rail-mid:hover {
  scrollbar-color: var(--btc-orange) transparent;
}
.split__rail-mid::-webkit-scrollbar {
  width: 4px;
}
.split__rail-mid::-webkit-scrollbar-track {
  background: transparent;
}
.split__rail-mid::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 2px;
  transition: background 0.3s ease;
}
.split__rail-mid:hover::-webkit-scrollbar-thumb {
  background: var(--btc-orange);
}

@media (max-width: 760px) {
  .split { grid-template-columns: 1fr; gap: 1rem; min-height: 0; }
  .split__rail { display: none; }   /* mobile uses .mobile-spine instead */
}

.read-col { max-width: 720px; margin-inline: auto; }

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4rem;
  padding-block: 2rem;
  border-top: 1px solid var(--bg-border-light);
  align-items: start;
}
.row:last-of-type { border-bottom: 1px solid var(--bg-border-light); }
.row--flip > :first-child { order: 2; }
@media (max-width: 720px) {
  .row { grid-template-columns: 1fr; gap: 0.8rem; padding-block: 1.4rem; }
  .row--flip > :first-child { order: 0; }
}

/* ===========================================================
 * MOBILE SPINE — sticky <details> summary, ≤760px only
 * Native HTML/CSS, CSP-clean (no JS for the toggle itself).
 * =========================================================== */
.mobile-spine { display: none; }

@media (max-width: 760px) {
  .mobile-spine {
    display: block;
    position: sticky;
    top: var(--site-header-h);
    z-index: 50;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--bg-border-light);
    padding: 0.6rem 0.8rem;
    margin: 0 -1rem 0.8rem;   /* break out of container padding */
  }
  .mobile-spine summary {
    cursor: pointer;
    list-style: none;
    color: var(--btc-orange);
    font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
    font-size: 0.85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
  }
  .mobile-spine summary::-webkit-details-marker { display: none; }
  .mobile-spine summary::after {
    content: "≡";
    color: var(--btc-orange);
    font-size: 1rem;
    flex-shrink: 0;
  }
  .mobile-spine[open] summary::after { content: "▼"; }
  .mobile-spine .spine {
    margin-top: 0.8rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--bg-border-light);
    max-height: 70vh;
    overflow-y: auto;
  }
}

/* ===========================================================
 * TYPE — additions only (style.css owns .heading-*, .subtitle, .btn)
 * =========================================================== */

.prompt {
  font-size: clamp(0.85rem, 1.6vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  display: inline-flex;
  gap: 0.6rem;
  align-items: baseline;
}
.prompt::before {
  content: '$';
  color: var(--btc-orange);
  font-weight: 700;
}
/* Heading-prompt — terminal-style "$ /" prefix for section h2 headings.
   Scaled smaller than the heading itself so it reads as a CLI section
   marker, not equal billing with the title. Used on every BIP section
   h2 (and forward-portable to other pages adopting the spine pattern). */
.heading-prompt {
  color: var(--btc-orange);
  font-weight: 700;
  font-size: 0.6em;
  letter-spacing: 0.05em;
  margin-right: 0.45em;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  vertical-align: 0.18em;
  white-space: nowrap;
}
/* Section-divider prompt — adds breathing room between the previous block
   (e.g. .pipe-flow) and the next data block (e.g. worker .ledger). */
.prompt--break { margin-top: clamp(1.2rem, 2.5vw, 1.8rem); }
/* Mobile safety: allow prompt + italic suffix to wrap onto multiple lines
   instead of overflowing horizontally (.prompt is inline-flex by default). */
@media (max-width: 600px) {
  .prompt { flex-wrap: wrap; }
}

/* ===========================================================
 * AAA-DEFAULT TEXT DISCIPLINE — single white, no nuances.
 *
 * Marius S190 design rule: every redesigned page uses ONE white
 * (--text-primary, #e8e8e8, AAA contrast) for default text. Color
 * (orange / green / blue / red) carries meaning; nuances of white
 * (--text-secondary / --text-muted / --text-dim) do NOT.
 *
 * Differentiation comes from italic + size + label + colored highlight,
 * never from "almost-white" gradients. Site-wide body inherits
 * --text-secondary by default (style.css:152) — this overrides on every
 * page that loads extend.css.
 *
 * Legacy utility classes (u-color-secondary / -muted / -dim) get lifted
 * to text-primary too, so any existing markup that used them as
 * de-emphasis automatically reads at AAA contrast.
 * =========================================================== */
body,
.subtitle,
.u-color-secondary,
.u-color-muted,
.u-color-dim { color: var(--text-primary); }

/* ===========================================================
 * MOBILE OVERFLOW SAFETY — site-wide systemic guard.
 *
 * Problem: by default, CSS Grid/Flex items have `min-width: auto`
 * which resolves to `min-content` (widest unbreakable word). If ANY
 * descendant has wide content, the column refuses to shrink — content
 * cascades wider than viewport. Visible as truncation past the
 * iPhone 12 Pro 390px edge across multiple sections.
 *
 * Two-layer fix (S190, applied 2026-04-29):
 *   Layer 1 — Explicit `min-width: 0` on layout primitives so grid/flex
 *             children CAN shrink below content size.
 *   Layer 2 — `overflow-x: hidden` on body as final safety net for any
 *             residual rogue overflow we miss in per-brick polish.
 *
 * Word-wrap defenses on text containers prevent unbreakable strings
 * (long URLs, code paths) from forcing parent widening.
 * =========================================================== */
body { overflow-x: hidden; }
.split,
.split > article,
.split > aside,
main > section,
.bip-section,
.worker-grid,
.worker-card,
.ledger,
.ledger__row,
.pipe-flow,
.pipe,
.pipe--step,
.bip-callout { min-width: 0; }
.subtitle,
.note,
.status-note,
.workflow-note,
.worker-card__brief,
.ledger__name,
.ledger__desc,
.bip-stat-desc,
.pipe__brief,
.bip-callout p,
.ledger--security .ledger__name,
.ledger--security .ledger__desc {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--btc-orange);
}
.label--fund  { color: var(--label-fund); }
.label--inter { color: var(--label-inter); }
.label--adv   { color: var(--label-adv); }
.label--supp  { color: var(--label-supp); }

/* italic-not-muted — AAA-default replacement for .subtitle in new pages */
.note { font-style: italic; color: var(--text-primary); }

/* Orphan-avoidance — additive on top of style.css .subtitle rule.
   text-wrap: balance evens line lengths so the last line isn't a single word.
   Applies to every .subtitle / .hero__lede across redesigned pages. */
.subtitle { text-wrap: balance; }
.hero__lede { text-wrap: balance; }

/* Heading modifiers — small composition primitives reused across all 4 phases.
   Use `.heading-lg--neutral` for marquee H1s where the highlighted word inside is
   the orange accent (preserves AAA-default tone outside the highlight).
   Use `.heading-lg--detail` for the detail-panel H2 (just spacing tighter to label). */
.heading-lg--neutral { color: var(--text-primary); margin-top: 0.4rem; }
/* Detail-panel H2: smaller fluid clamp than base .heading-lg (which maxes at 2.5rem
   and overflows the article column). text-wrap: balance avoids single-word orphans
   when narrow viewports cause the heading to wrap. Supported: Chrome 114+, Firefox
   121+, Safari 17.5+ — all evergreen browsers in 2026. */
.heading-lg--detail {
  margin-block: 0.4rem 0.4rem;
  font-size: clamp(1.15rem, 2.4vw, 1.85rem);
  text-wrap: balance;
}

/* Hero sub-line — italic note under marquee H1. */
.hero__lede {
  margin-top: 0.6rem;
  max-width: 60ch;
  font-size: clamp(0.92rem, 1.6vw, 1rem);
  font-style: italic;
  color: var(--text-primary);
}

/* Hero band — full-width "hi" zone above the split (BIP pattern, S190).
   Hero scrolls AWAY with the page; the rail in .split below sits in flow at
   the top, then sticky pins under the header once the hero scrolls past.
   No background; just rem-based padding for breathing room above and below. */
.hero-band {
  padding-block: clamp(1.4rem, 2.5vw, 2rem) clamp(1rem, 2vw, 1.6rem);
}

/* Side-by-side wrapper for two .hero__lede paragraphs. Stacks on mobile. */
.hero__ledes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4rem;
  margin-top: 0.6rem;
}
.hero__ledes > .hero__lede { margin-top: 0; }
@media (max-width: 760px) {
  .hero__ledes { grid-template-columns: 1fr; gap: 0.6rem; }
}

/* Hero CTA — newcomer-first invitation block (S192 Option C).
   Replaces two-column .hero__ledes for index. 2-col grid with explicit
   .hero__cta-col children (not flat-grid auto-flow):
     LEFT col = 3 stacked rows (welcome → curiosity hook → action)
     RIGHT col = single status row, vertically centered against the left
   Stacks to single column on mobile (≤760px). Plain text (not italic) so
   it reads as direct welcome, not philosophical aside. Coloring restrained
   vs BIP §0 — homepage is the front door, not the playground. */
.hero__cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2.4rem;
  margin-top: 0.8rem;
}
.hero__cta-col {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.hero__cta-col:last-child { justify-content: center; }
.hero__cta-line {
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  line-height: 1.55;
  margin: 0;
  text-wrap: balance;
}
@media (max-width: 760px) {
  .hero__cta { grid-template-columns: 1fr; gap: 0.4rem; }
  .hero__cta-col:last-child { justify-content: flex-start; }
}

/* Detail-panel note — italic paragraph under detail H2. Slightly larger.
   max-width 70ch tuned to fit ~3 lines at typical desktop article-column width;
   wraps to 4 only at heavy zoom or narrow viewport.
   text-wrap: balance avoids single-word orphans on the last line. */
.detail__note {
  max-width: 70ch;
  font-size: clamp(0.95rem, 1.8vw, 1.05rem);
  font-style: italic;
  color: var(--text-primary);
  text-wrap: balance;
}

/* Catchy front-door statement — direct visitor address that opens the
   article column. Voice rule: memory/feedback_catchy_statements_voice.md.
   Mono terminal voice, NON-italic (distinct from .detail__note), tight
   line-stack with hook-word emphasis. */
.catch {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: clamp(1rem, 2.2cqw, 1.15rem);
  line-height: 1.7;
  color: var(--text-primary);
  margin: 0 0 2rem;
  letter-spacing: 0.005em;
}
.catch strong { font-weight: 700; }
.catch em { font-style: italic; }

/* ===========================================================
 * CARD MODIFIERS — additive on existing .card (style.css owns base)
 * =========================================================== */

.card--plain   { border-left-color: transparent; padding-left: 1rem; }
.card--current { border-left-color: var(--btc-orange-light); background: var(--bg-card-hover); }

/* anchor variant — link cards keep --text-primary on label, not orange */
a.card { color: var(--text-primary); text-decoration: none; }
a.card:hover { color: var(--text-primary); }

/* card meta line (NEW — style.css has no .card__meta) */
.card__meta { color: var(--text-primary); font-size: 0.74rem; font-style: italic; margin-top: 0.6rem; }

/* ===========================================================
 * SPINE — sticky rail navigation
 * =========================================================== */

.spine {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  /* Fluid font: compresses at high zoom / small viewports so more spine items
     fit before the auto-hide scrollbar engages. Per feedback_fluid_layout_pattern.md. */
  font-size: clamp(0.72rem, 1.1vw, 0.85rem);
}
.spine a {
  display: grid;
  grid-template-columns: 1.6rem 1fr auto;
  gap: clamp(0.4rem, 0.8vw, 0.6rem);
  padding: clamp(0.3rem, 0.6vw, 0.45rem) clamp(0.45rem, 0.8vw, 0.6rem);
  color: var(--text-primary);
  border-left: 2px solid transparent;
  align-items: center;
  text-decoration: none;
}
.spine a:hover {
  background: var(--bg-card-hover);
  border-left-color: var(--bg-border-light);
  color: var(--btc-orange);
}
.spine a[aria-current="true"] {
  border-left-color: var(--btc-orange);
  color: var(--btc-orange);
  background: var(--bg-card-hover);
}
.spine__num   { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.spine__count { color: var(--text-primary); font-style: italic; font-size: clamp(0.65rem, 1vw, 0.78rem); }

/* Boxed section banner for the rail — anchors the eye, distinct from spine items.
 * `.spine__title` (orange tinted/bordered) for the primary section.
 * `.spine__title--quiet` (border only, neutral) for the secondary section.
 *
 * Dual-element pattern (S190 rule, feedback_sidebar_home_hero_pattern.md):
 *   - On the home page: <p class="spine__title">The Five Pillars</p>
 *   - On all subpages:  <a class="spine__title" href="index.html">▸ Home</a>
 * Same visual treatment; on subpages the box becomes the clickable "Home" anchor.
 */
.spine__title {
  display: block;
  padding: 0.55rem 0.7rem;
  background: rgba(247, 147, 26, 0.06);
  border: 1px solid var(--btc-orange);
  border-radius: 2px;
  color: var(--btc-orange);
  text-decoration: none;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 0.6rem;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
a.spine__title:hover {
  background: rgba(247, 147, 26, 0.14);
  border-color: var(--btc-orange-light);
  color: var(--btc-orange-light);
}
a.spine__title[aria-current="page"] {
  background: rgba(247, 147, 26, 0.18);
  border-color: var(--btc-orange-light);
}

/* Row-content variant of .spine__title — used on subpages where the boxed
   banner IS the clickable "back to home" anchor with spine-row layout inside.
   Variant γ (S190 BIP fix, 2026-04-29). Used by: BIP rail Home anchor.
   Future: same pattern on /orange-pages, /learn, all subpages with sidebar. */
.spine__title--row {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr) auto;
  gap: 0.4rem;
  align-items: center;
  text-align: left;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: clamp(0.82rem, 1.6vw, 0.9rem);
  font-weight: 600;
}
.spine__title--row .spine__num,
.spine__title--row .spine__count {
  color: var(--btc-orange);
  font-weight: 600;
}
.spine__title--row .spine__count {
  font-size: 0.95em;
  text-align: right;
}
.spine__title--quiet {
  background: transparent;
  border-color: var(--bg-border-light);
  color: var(--text-primary);
  margin-top: 1.2rem;   /* default breathing room; overrides the base 0 margin-top */
}
a.spine__title--quiet:hover {
  background: var(--bg-card-hover);
  border-color: var(--bg-border-light);
  color: var(--btc-orange);
}
.spine__title + a { margin-top: 0; }

/* Rail footer note — terse 4-line block at the bottom of every sidebar
   ($ held since 2017 / $ no funding · no ads · no VC / $ no cookies / CC BY-SA 4.0).
   Inherits .note (italic + text-primary); this class adds rail-specific spacing/size. */
.rail-foot {
  margin-top: 1.4rem;
  font-size: clamp(0.72rem, 1.4vw, 0.78rem);
  padding-inline: 0.6rem;
  font-style: italic;
  color: var(--text-primary);
  text-wrap: balance;
}
.mobile-spine .rail-foot { margin-top: 1rem; }

/* Legacy quiet group label (kept for any existing markup not yet upgraded). */
.spine__group {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--btc-orange);
  padding: 0.9rem 0.6rem 0.3rem;
  border-bottom: 1px solid var(--bg-border-light);
  margin-bottom: 0.3rem;
}
.spine__group:first-child { padding-top: 0; }

/* tier-collapsed rail (used by /learn, desktop AND mobile).
 * Each tier is a <details data-tier="fund|inter|adv|supp"> with the
 * tier color carried onto the summary via the [data-tier] attribute. */
.spine__tier { border-bottom: 1px solid var(--bg-border-light); }
.spine__tier > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--btc-orange);
}
.spine__tier > summary::-webkit-details-marker { display: none; }
.spine__tier > summary::after {
  content: '▶';
  color: var(--text-primary);
  font-size: 0.7rem;
  margin-left: 0.5rem;
  flex-shrink: 0;
}
.spine__tier[open] > summary::after { content: '▼'; }
.spine__tier > summary:hover { background: var(--bg-card-hover); }
.spine__tier[data-tier="fund"]  > summary { color: var(--label-fund); }
.spine__tier[data-tier="inter"] > summary { color: var(--label-inter); }
.spine__tier[data-tier="adv"]   > summary { color: var(--label-adv); }
.spine__tier[data-tier="supp"]  > summary { color: var(--label-supp); }

/* manual-collapse toggle at top of rail (desktop /learn).
 * No JS persistence — fresh page load = always expanded. */
.spine__toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--bg-border-light);
}
.spine__toggle:hover { color: var(--btc-orange); }
.spine__toggle::after { content: '▾'; color: var(--btc-orange); }
.spine[data-collapsed="true"] .spine__toggle::after { content: '▸'; }
.spine[data-collapsed="true"] > a,
.spine[data-collapsed="true"] > .spine__group,
.spine[data-collapsed="true"] > .spine__tier { display: none; }

/* ===========================================================
 * LEDGER — activity row table
 * =========================================================== */

.ledger {
  font-size: 0.82rem;
  line-height: var(--row-tick);
  border-top: 1px solid var(--bg-border-light);
}
.ledger__row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  gap: 1.2rem;
  padding-inline: 0.4rem;
  border-bottom: 1px solid var(--bg-border-light);
  color: var(--text-primary);
  align-items: center;
  text-decoration: none;
}
.ledger__row:hover { background: var(--bg-card-hover); }
.ledger__row:hover .ledger__name { color: var(--btc-orange); }
.ledger__time { color: var(--btc-orange); font-variant-numeric: tabular-nums; }
.ledger__name { color: var(--text-primary); font-weight: 500; }
.ledger__stat { color: var(--text-primary); font-style: italic; font-size: 0.78rem; }
@media (max-width: 600px) {
  .ledger__row { grid-template-columns: 4.5rem 1fr; }
  .ledger__stat { grid-column: 1 / -1; padding-left: 0; padding-bottom: 0.5rem; }
}

/* ===========================================================
 * STATBAR — for op-alt-2/5 thematic; ship for futurity
 * =========================================================== */

.statbar {
  font-size: 0.82rem;
  display: grid;
  grid-template-columns: 9rem 1fr 4.5rem;
  gap: 0.8rem;
  align-items: center;
  padding-block: 0.55rem;
  border-bottom: 1px dashed var(--bg-border-light);
  color: var(--text-primary);
  text-decoration: none;
}
.statbar:hover { color: var(--btc-orange); }
.statbar:hover .statbar__name { color: var(--btc-orange); }
.statbar__name  { color: var(--text-primary); }
.statbar__track {
  color: var(--btc-orange);
  letter-spacing: 0;
  line-height: 1;
  white-space: pre;
  overflow: hidden;
  font-size: 0.78rem;
}
.statbar__track .dim { color: var(--bg-border-light); }
.statbar__count { color: var(--text-primary); font-style: italic; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .statbar { grid-template-columns: 1fr 4rem; }
  .statbar__track { grid-column: 1 / -1; }
}

/* ===========================================================
 * ASCII MAP — for op-alt-2 thematic; ship for futurity
 * =========================================================== */

.ascii-map {
  font-size: 0.78rem;
  line-height: 1.55;
  white-space: pre;
  overflow-x: auto;
  color: var(--text-primary);
  border: 1px solid var(--bg-border-light);
  padding: 1.2rem 1rem;
  background: var(--terminal-bg);
}
.ascii-map a {
  color: var(--btc-orange);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.ascii-map a:hover { color: var(--btc-orange-light); }
.ascii-map__bar { color: var(--btc-orange); }
.ascii-map__bar .dim { color: var(--bg-border-light); }

/* ===========================================================
 * BRIDGE — sits between two ledgers on /index (post-Phase-1).
 * Persona fork (3 rows × 3 cols) + scale + rhythm one-liners.
 * Designed to NOT echo sidebar counts or detail-note above.
 * Each row is its own grid — sidesteps any auto-placement
 * specificity issues with ancestor `<article>` styles.
 * =========================================================== */

.bridge-fork {
  margin-top: 0.7rem;
  padding-left: 0.4rem;
  font-size: clamp(0.85rem, 1.5vw, 0.95rem);
  line-height: 1.6;
}
.bridge-fork__row {
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  column-gap: 1.2rem;
  align-items: baseline;
  padding-block: 0.25rem;
  color: var(--text-primary);
}
.bridge-fork__row > a {
  color: var(--btc-orange);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.bridge-fork__row > a:hover { color: var(--btc-orange-light); }
.bridge-fork__row > em { color: var(--text-primary); font-style: italic; }
@media (max-width: 600px) {
  .bridge-fork__row {
    grid-template-columns: 1fr;
    gap: 0.1rem;
    padding-block: 0.4rem;
  }
}

.bridge-line {
  margin-block: 0.6rem 0.3rem;
  font-size: clamp(0.82rem, 1.5vw, 0.9rem);
  color: var(--text-primary);
}
.bridge-line__tag {
  color: var(--btc-orange);
  font-weight: 700;
  margin-right: 0.5rem;
}
.bridge-line__sep::before { content: '  ·  '; color: var(--text-primary); }

/* Auto-spacing between bridge blocks — drop any need for inline margin-top. */
.bridge-fork + .bridge-line { margin-top: 1.4rem; }

/* ===========================================================
 * UTILITY: divider, section-foot, see-more
 * Small, repeatable patterns — class-driven, no inline-spaghetti.
 * =========================================================== */

/* Subtle horizontal divider used between content blocks. */
.divider {
  border: 0;
  border-top: 1px solid var(--bg-border-light);
  margin-block: 2rem;
}
.divider--tight { margin-block: 1.8rem; }

/* "↳ See the full X →" trailing link under a ledger. */
.see-more {
  margin-top: 1rem;
  font-size: clamp(0.82rem, 1.5vw, 0.9rem);
}

/* Section-bottom italic note (e.g. "$ updated weekly · CC BY-SA · built by hand"). */
.section-foot {
  margin-top: 2rem;
  font-size: clamp(0.78rem, 1.4vw, 0.85rem);
  font-style: italic;
  color: var(--text-primary);
}

/* Auto-spacing: any ledger directly preceded by a label gets the same margin-top.
   Drops the per-instance inline `style="margin-top: 0.8rem;"` repetition. */
.label + .ledger { margin-top: 0.8rem; }

/* When a detail__note is used as a transition lead-in directly above a .label,
   give it room below — avoids per-instance inline margin-bottom. */
.detail__note + .label { margin-top: 1.4rem; }

/* ===========================================================
 * MARQUEE — used by Ledger thematic (parked /recent subpage)
 * =========================================================== */

.marquee { padding-block: 4.5rem 2.5rem; }
.marquee__line {
  font-size: clamp(1.7rem, 4.5vw, 2.8rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--text-primary);
  max-width: 22ch;
}
.marquee__line em {
  color: var(--btc-orange);
  font-style: normal;
  font-weight: 700;
}
.marquee__under {
  margin-top: 1.4rem;
  font-size: 0.95rem;
  color: var(--text-primary);
  font-style: italic;
  max-width: 56ch;
}
.marquee__caret::after {
  content: '_';
  color: var(--btc-orange);
  margin-left: 0.2em;
}

/* ===========================================================
 * ROUND 3 DELTA — green-aliveness + motion budget
 * --accent-green (#00c853) on --bg-primary (#0d0d0d) ≈ 9.4:1 (AAA).
 * Orange remains structure; green reserved for recency / live signals.
 * =========================================================== */

/* tinted ledger row — top-of-feed recent activity (last 7 days) */
.ledger__row--fresh {
  background: rgba(0, 200, 83, 0.045);
  box-shadow: inset 2px 0 0 var(--accent-green);
}
.ledger__row--fresh .ledger__time { color: var(--accent-green); }
.ledger__row--fresh:hover { background: rgba(0, 200, 83, 0.085); }

/* Ship-log category — editorial moved to style.css 2026-04-29 (Phase 2 BIP prep).
   Single source of truth for all ship-log__cat--* rules now lives in style.css. */

/* dot prefixes for ledger / spine items */
.dot {
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  margin-right: 0.55em;
  vertical-align: 0.08em;
  flex-shrink: 0;
}
.dot--orange { background: var(--btc-orange); }
.dot--green  { background: var(--accent-green); }
.dot--red    { background: #ef5350; }
.spine a .dot { margin-right: 0.4em; }

/* live-tail / status-strip pill */
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid rgba(0, 200, 83, 0.35);
  background: rgba(0, 200, 83, 0.06);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  border-radius: 2px;
}
.live-pill__dot {
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 0 0 rgba(0, 200, 83, 0.6);
  animation: ybb-pulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.live-pill__label { color: var(--accent-green); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; }
.live-pill__meta  { color: var(--text-primary); font-style: italic; }

/* status strip — heartbeat row under hero (Phase 4 /bip) */
.status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  align-items: center;
  padding: 0.7rem 1rem;
  border: 1px solid var(--bg-border-light);
  border-left: 2px solid var(--accent-green);
  background: var(--terminal-bg);
  font-size: 0.82rem;
  color: var(--text-primary);
}
.status-strip__pulse {
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--accent-green);
  animation: ybb-pulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  flex-shrink: 0;
}
.status-strip__label { color: var(--accent-green); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.status-strip em { color: var(--text-primary); }

/* worker-card status dot — top-right corner (Phase 4 /bip) */
.worker-card { position: relative; }
.worker-card__status {
  position: absolute;
  top: 0.8rem;
  right: 0.9rem;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--accent-green);
}
.worker-card__status--pulse { animation: ybb-pulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite; }

/* roadmap status accents — green left-edge for "in progress" */
.phase--progress { border-left-color: var(--accent-green); }
.phase--progress h3 { color: var(--accent-green); }
.phase--progress li::before { color: var(--accent-green); }

/* ===========================================================
 * MOTION — mount-only, ≤280ms, prefers-reduced-motion gated
 * If a designer reaches for a third motion they're outside the system.
 * =========================================================== */

@keyframes ybb-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ybb-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ybb-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 200, 83, 0.55); opacity: 1; }
  50%      { box-shadow: 0 0 0 6px rgba(0, 200, 83, 0); opacity: 0.75; }
}

/* Bootloader stagger — direct children animate in sequence, single play */
.boot-stagger > * {
  opacity: 0;
  animation: ybb-fade-up 220ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
.boot-stagger > *:nth-child(1) { animation-delay:   0ms; }
.boot-stagger > *:nth-child(2) { animation-delay:  40ms; }
.boot-stagger > *:nth-child(3) { animation-delay:  80ms; }
.boot-stagger > *:nth-child(4) { animation-delay: 120ms; }
.boot-stagger > *:nth-child(5) { animation-delay: 160ms; }
.boot-stagger > *:nth-child(6) { animation-delay: 200ms; }
.boot-stagger > *:nth-child(7) { animation-delay: 240ms; }
.boot-stagger > *:nth-child(8) { animation-delay: 280ms; }

/* tight 30ms-per-child stagger for 8-item spine (240ms total) */
.boot-stagger--tight > * { animation-duration: 200ms; }
.boot-stagger--tight > *:nth-child(1)  { animation-delay:   0ms; }
.boot-stagger--tight > *:nth-child(2)  { animation-delay:  30ms; }
.boot-stagger--tight > *:nth-child(3)  { animation-delay:  60ms; }
.boot-stagger--tight > *:nth-child(4)  { animation-delay:  90ms; }
.boot-stagger--tight > *:nth-child(5)  { animation-delay: 120ms; }
.boot-stagger--tight > *:nth-child(6)  { animation-delay: 150ms; }
.boot-stagger--tight > *:nth-child(7)  { animation-delay: 180ms; }
.boot-stagger--tight > *:nth-child(8)  { animation-delay: 210ms; }
.boot-stagger--tight > *:nth-child(9)  { animation-delay: 240ms; }
.boot-stagger--tight > *:nth-child(10) { animation-delay: 270ms; }

/* one-shot fade for body content after spine staggers */
.boot-fade {
  opacity: 0;
  animation: ybb-fade 200ms ease-out 240ms both;
}

/* small static label above marquee */
.boot-label {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text-primary);
}
.boot-label::before { content: '$ '; color: var(--btc-orange); font-weight: 700; }
.boot-label .ok { color: var(--accent-green); font-weight: 700; }

/* Reduced motion — disable all entrance + pulse animation */
@media (prefers-reduced-motion: reduce) {
  .boot-stagger > *,
  .boot-stagger--tight > *,
  .boot-fade {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .live-pill__dot,
  .status-strip__pulse,
  .worker-card__status--pulse {
    animation: none !important;
  }
}

/* ============================================================
   BIP page primitives  —  Heartbeat layout (Phase 2, 2026-04-29)
   Used by: design-test/building-in-public.html
   Sister files: feedback_sidebar_architecture.md (rail rules),
                 feedback_fluid_layout_pattern.md (fluid by default).
   ============================================================ */
.bip-section {
  padding-block: clamp(1.6rem, 3vw, 2.4rem) clamp(0.6rem, 1.5vw, 1rem);
}
.bip-section:not(.bip-whoami) {
  /* Subtle-blue top rails on §1-§8 (S192). 2px solid rgba(68, 138, 255, 0.5)
     — half-contrast cool blue separates structurally without competing with
     heavy brand-orange in headings/numbers/paths/structural anchors. §0
     (whoami) excluded — its expanded-letter treatment is its own visual
     frame; an extra rail above would compete with that semantic.
     Click-pulse flash (.scroll-highlight, style.css) stays ORANGE so
     warm-flash on cool-rest amplifies the activation signal via hue +
     intensity contrast.
     SCOPING: only via .bip-section, not .section--border (no side-effect
     on swap/orange-pages). §4-§8 also carry legacy .section section--
     border classes for back-compat — cosmetic ballast now, .bip-section
     wins via cascade order; clean up at Phase II port.
     !important is a safety net (an earlier non-!important blue didn't
     render reliably — root cause unconfirmed, possibly browser cache;
     revisit at Phase II cleanup). */
  border-top: 2px solid rgba(247, 147, 26, 0.5) !important;
}
.bip-section:first-child { padding-top: 0.4rem; }

/* Sub-block bridge spacing (S192) — for transitional sentences between
   sub-blocks inside a .bip-section. Pushes the bridge text DOWN with extra
   top margin so it floats visually between the prior block and the next,
   acting as a quiet transition rather than a closer attached to either.
   No border — just breathing room. Used in §5 for "If we don't sell
   data..." between "what we DO collect" and "security headers". */
.bip-bridge {
  margin-top: clamp(1.2rem, 2.5vw, 2.4rem);
}
.bip-section h2 {
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0.4rem 0 0.6rem;
  text-wrap: balance;
}
.bip-section p { color: var(--text-primary); }

/* Stat-card grid — 3-col big-number cards, stacks 1-col below 760px.
   Used in §3 Content & Community for live engagement counters. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  margin-top: 1rem;
}
@media (max-width: 760px) {
  .stat-grid { grid-template-columns: 1fr; }
}
/* Self-contained primitive (no .card base) — matches .snapshot__cell aesthetic.
   1px border + terminal-bg + hover-orange. Drops the .card orange-left-bar. */
.stat-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: clamp(1rem, 2vw, 1.4rem);
  border: 1px solid var(--bg-border-light);
  background: var(--terminal-bg);
  transition: border-color 0.2s;
}
.stat-card:hover { border-color: var(--btc-orange); }
.stat-card__value {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  color: var(--btc-orange);
  line-height: 1.1;
  margin-bottom: 0.4rem;
  font-variant-numeric: tabular-nums;
}
.stat-card__label {
  font-size: clamp(0.85rem, 1.6vw, 0.95rem);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
}
.stat-card__desc {
  font-size: clamp(0.78rem, 1.5vw, 0.85rem);
  color: var(--text-primary);
  line-height: 1.5;
  margin: 0;
  font-style: italic;
}

/* Snapshot — 4-cell metric grid, ledger-styled.
   Used in §3 for live Bitcoin metrics (price/height/hashrate/difficulty).
   Mobile: 2x2 below 760px, 1-col below 400px. */
.snapshot {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-top: 1rem;
}
.snapshot__cell {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: clamp(0.7rem, 1.5vw, 1rem);
  border: 1px solid var(--bg-border-light);
  background: var(--terminal-bg);
  transition: border-color 0.2s;
}
.snapshot__cell:hover { border-color: var(--btc-orange); }
.snapshot__icon {
  color: var(--btc-orange);
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-weight: 700;
  line-height: 1;
}
.snapshot__value {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.snapshot__label {
  font-size: 0.72rem;
  font-style: italic;
  color: var(--text-primary);
  letter-spacing: 0.04em;
}
@media (max-width: 760px) {
  .snapshot { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .snapshot { grid-template-columns: 1fr; }
}
/* Suppress site-wide LIVE pill inside .snapshot cells.
   The §3 prompt already says "live Bitcoin · auto-refresh every 10s" —
   per-cell pills would be redundant + visually busy. */
.snapshot .live-tag { display: none; }

/* Inventory ledger modifier — wider time-col for big numbers (21, 299, etc.) */
.ledger--inventory .ledger__row { grid-template-columns: 4rem minmax(0, 1fr); gap: 1rem; }
.ledger--inventory .ledger__time { color: var(--btc-orange); font-weight: 600; font-size: clamp(0.95rem, 2vw, 1.1rem); text-align: right; }
.ledger--inventory .ledger__name { color: var(--text-primary); font-style: normal; font-weight: 400; line-height: 1.5; padding-block: 0.3rem; }
.ledger--inventory .ledger__name a { color: var(--btc-orange); text-decoration: none; }
.ledger--inventory .ledger__name a:hover { text-decoration: underline; }

/* Worker grid — 2-col card layout, stacks below 760px */
.worker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 0.7rem;
}
@media (max-width: 760px) {
  .worker-grid { grid-template-columns: 1fr; }
}
/* Orphan-handling — when card count is odd in 2-col layout, push the last
   card into the right column so it sits opposite the gap rather than under
   the leftmost card. Auto-disengages when count becomes even (e.g. when
   ybb-NAME #8 lands). Mobile stays 1-col so rule doesn't fire there. */
@media (min-width: 761px) {
  .worker-grid > :last-child:nth-child(odd) {
    grid-column: 2;
  }
}

/* Worker card primitives — used inside .worker-grid.
   Self-contained primitive (no .card base) — matches .snapshot__cell aesthetic
   for visual consistency across §1, §2, §3 grid primitives.
   __head: dot + name row · __name: monospace label · __brief: plain-language one-liner · __hint: tap-affordance footer.
   Compression S190 (Apr 30): tightened padding/gaps/margins ~17% per Marius space-reduction request. */
.worker-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: clamp(0.65rem, 1.4vw, 0.95rem);
  border: 1px solid var(--bg-border-light);
  background: var(--terminal-bg);
  cursor: pointer;
  transition: border-color 0.2s;
}
.worker-card:hover { border-color: var(--btc-orange); }
.worker-card:focus-visible { outline: 2px solid var(--btc-orange); outline-offset: 2px; }

/* Popup tooltip — adapt to new system aesthetic.
   Original `.bip-popup` (style.css) used orange-tinted border + 4px radius;
   the redesigned grid primitives (.worker-card, .stat-card, .snapshot__cell)
   all use 1px border-light + terminal-bg + square corners. Mirror that here
   so the popup feels like the same family, just elevated above the card. */
.bip-popup {
  background: var(--terminal-bg);
  border: 1px solid var(--bg-border-light);
  border-radius: 0;
  padding: clamp(0.7rem, 1.5vw, 1rem);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text-primary);
}
.worker-card__head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.35rem;
}
.worker-card__name {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: clamp(0.85rem, 1.6vw, 0.95rem);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.worker-card__brief {
  font-size: clamp(0.78rem, 1.5vw, 0.85rem);
  color: var(--text-primary);
  line-height: 1.45;
  margin: 0 0 0.45rem;
}
.worker-card__hint {
  font-size: 0.72rem;
  color: var(--accent-green);
  display: block;
}

/* Pulse modifier on bip-health__dot — reuse R3 ybb-pulse keyframe.
   Applied dynamically by pingWorker JS when status === 'ok' (live + healthy). */
.bip-health__dot--pulse {
  animation: ybb-pulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.dot--pulse {
  animation: ybb-pulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Pipe — flow diagram primitive (steps separated by orange arrows).
   Used in: architecture (data-flow), workflow (build-deploy steps). */
.pipe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.7rem;
  align-items: center;
  padding: clamp(0.7rem, 1.5vw, 0.95rem) clamp(0.8rem, 1.8vw, 1.1rem);
  border: 1px solid var(--bg-border-light);
  background: var(--terminal-bg);
  font-size: clamp(0.78rem, 1.6vw, 0.9rem);
}
.pipe span.step { color: var(--text-primary); }
.pipe span.arrow { color: var(--btc-orange); }
@media (max-width: 600px) {
  /* Tighten so flex items fit + wrap at narrow viewports
     (≤600px: gap+padding+font shrink so flex-wrap engages naturally) */
  .pipe {
    font-size: 0.7rem;
    gap: 0.25rem 0.4rem;
    padding: 0.6rem 0.7rem;
  }
  .pipe span.step,
  .pipe span.arrow { min-width: 0; }
}

/* Pipe-flow — vertical stack of .pipe rows joined by an orange ↓ glyph.
   Used in: §1 architecture (3-layer flow), §4 build-deploy. */
.pipe-flow { display: flex; flex-direction: column; gap: 0.4rem; }
.pipe-flow__down {
  align-self: center;
  color: var(--btc-orange);
  font-size: 1rem;
  line-height: 1;
  padding-block: 0.15rem;
  -webkit-user-select: none;
  user-select: none;
}

/* Pipe-step — clickable variant of .pipe (§4 build-deploy steps).
   Each step is a self-contained box with name + brief, opens a popup
   on click/Enter/Space (data-popup handler in building-in-public.js). */
.pipe--step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  cursor: pointer;
  transition: border-color 0.15s ease;
  position: relative;
}
.pipe--step:hover,
.pipe--step:focus-visible {
  border-color: var(--btc-orange);
  outline: none;
}
.pipe__name {
  color: var(--btc-orange);
  font-weight: 600;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: clamp(0.88rem, 1.7vw, 0.95rem);
}
.pipe__brief {
  color: var(--text-primary);
  font-style: italic;
  font-size: clamp(0.78rem, 1.5vw, 0.85rem);
}

/* Pipe-step popup positioning — absolute overlay (no longer expands the step
   vertically into a tall narrow column). Width is ~2x step width via clamp(),
   anchor side flips by step position so the popup never escapes the workflow
   section's horizontal bounds. Mobile (≤600px) falls back to full-column width.
   Anchor logic: steps 1-3 anchor LEFT (popup grows right), steps 4+ anchor RIGHT
   (popup grows left). Both directions stay inside .pipe-flow--horizontal.
   Notes: must explicitly reset `bottom: auto` and `right: auto` because the base
   .bip-popup rule in style.css positions the popup ABOVE the trigger via
   `bottom: calc(100% + 0.35rem)` + `left: 0; right: 0` (full-stretch). */
.pipe--step .bip-popup {
  position: absolute;
  top: calc(100% + 0.4rem);
  bottom: auto;
  left: 0;
  right: auto;
  width: clamp(15rem, 32vw, 26rem);
  max-width: calc(100vw - 2rem);
  z-index: 60;
}
@media (min-width: 601px) {
  .pipe-flow--horizontal > .pipe--step:nth-of-type(n+3) .bip-popup {
    left: auto;
    right: 0;
  }
}
@media (max-width: 600px) {
  .pipe--step .bip-popup {
    width: 100%;
    max-width: 100%;
    left: 0;
    right: 0;
  }
}

/* Pipe-flow horizontal — desktop = → row with flex-wrap (steps share space
   equally, fluid widths via flex:1 + min-width). Narrow viewports fall back
   to column with ↓ glyphs (using same .pipe-flow__arrow span, swapped via
   ::before pseudo-element). Used in: §4 build-deploy. */
.pipe-flow--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: clamp(0.4rem, 1vw, 0.7rem);
  align-items: stretch;
}
.pipe-flow--horizontal .pipe--step {
  flex: 1 1 0;
  min-width: clamp(6rem, 14vw, 8rem);
}
.pipe-flow__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--btc-orange);
  font-size: 1rem;
  line-height: 1;
  -webkit-user-select: none;
  user-select: none;
}
.pipe-flow--horizontal .pipe-flow__arrow::before {
  content: '\2192'; /* → */
}
@media (max-width: 600px) {
  .pipe-flow--horizontal {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.4rem;
  }
  .pipe-flow--horizontal .pipe--step {
    flex: 0 0 auto;
    min-width: 0;
    width: 100%;
  }
  .pipe-flow--horizontal .pipe-flow__arrow {
    align-self: center;
    padding-block: 0.15rem;
  }
  .pipe-flow--horizontal .pipe-flow__arrow::before {
    content: '\2193'; /* ↓ */
  }
}

/* Workflow-note — italic centered callout under the §4 .pipe-flow.
   Sits between the pipeline and the tools paragraph. */
.workflow-note {
  margin-block: clamp(1rem, 2.5vw, 1.4rem);
  text-align: center;
  font-size: clamp(0.85rem, 1.7vw, 0.95rem);
  color: var(--text-primary);
  line-height: 1.55;
}

/* BIP-callout — adapted to new system box family (1px gray border on
   top/right/bottom, terminal-bg, no border-radius, AAA text — matches
   .worker-card / .stat-card / .snapshot__cell aesthetic). The 3px orange
   left edge stays always-visible (it's the visual anchor of a callout).
   Hover lights the 3 gray sides to orange — same affordance as worker
   cards and pipe steps. Used in §4 + §5 quotes. */
.bip-callout {
  background: var(--terminal-bg);
  border: 1px solid var(--bg-border-light);
  border-left: 3px solid var(--btc-orange);
  border-radius: 0;
  padding: clamp(0.9rem, 2vw, 1.2rem) clamp(1rem, 2.2vw, 1.4rem);
  transition: border-color 0.2s ease;
}
.bip-callout:hover {
  border-color: var(--btc-orange);
}
.bip-callout p {
  color: var(--text-primary);
  font-size: clamp(0.85rem, 1.7vw, 0.95rem);
  line-height: 1.6;
  margin: 0;
}
/* Multi-paragraph callout spacing — when a .bip-callout has stacked
   paragraphs (label · body · aphorism pattern), give them breathing room. */
.bip-callout p + p { margin-top: clamp(0.6rem, 1.2vw, 0.9rem); }

/* External-link arrow rule — moved to design-test/css/style.css for
   site-wide coverage (extend.css only loads on Phase 1 redesigned pages).
   See style.css "SITE-WIDE EXTERNAL-LINK INDICATOR" section. */

/* Security ledger — 3-col modifier (dot · key · description).
   Used in §5 Security & Privacy (4 ledgers: don't-collect, headers,
   code, disclosure). Mobile collapses to 2-col stack. */
.ledger--security .ledger__row {
  grid-template-columns: 0.8rem minmax(7rem, 10rem) minmax(0, 1fr);
  gap: 0.5rem 0.9rem;
  padding-block: 0.45rem;
  align-items: baseline;
}
.ledger--security .ledger__name {
  color: var(--btc-orange);
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: clamp(0.78rem, 1.5vw, 0.85rem);
}
.ledger--security .ledger__desc {
  color: var(--text-primary);
  font-size: clamp(0.78rem, 1.5vw, 0.85rem);
  font-style: normal;
}
@media (max-width: 600px) {
  .ledger--security .ledger__row {
    grid-template-columns: 0.8rem minmax(0, 1fr);
    grid-auto-flow: row;
    row-gap: 0.15rem;
  }
  .ledger--security .ledger__desc { grid-column: 2; }
}

/* Worker-status ledger — 4-col modifier (dot · name · desc · ms).
   Defaults to .ledger primitive but with worker-specific layout. */
.ledger--workers .ledger__row {
  grid-template-columns: 0.8rem minmax(7.5rem, 11rem) minmax(0, 1fr) auto;
  gap: 0.5rem 0.9rem;
  padding-block: 0.45rem;
}
.ledger--workers .ledger__name {
  color: var(--text-primary);
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: 0.82rem;
}
.ledger--workers .ledger__desc {
  color: var(--text-primary);
  font-style: italic;
  font-size: 0.78rem;
}
.ledger--workers .ledger__stat {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
}
@media (max-width: 600px) {
  .ledger--workers .ledger__row {
    grid-template-columns: 0.8rem minmax(0, 1fr) auto;
    gap: 0.4rem 0.6rem;
  }
  .ledger--workers .ledger__desc {
    grid-column: 1 / -1;
    padding-left: 1.3rem;
    padding-bottom: 0.35rem;
  }
}
/* AAA-default override: pending state on worker dots is orange (warming up),
   not muted grey. Per feedback_no_muted_text_aaa_default.md (S189 HARD). */
.ledger--workers .bip-health__dot--pending { background: var(--btc-orange); }

/* Status legend lines under the system-status prompt — italic explainer
   describing the auto-refresh differentiator + dot-color semantics. */
.status-note {
  font-size: 0.78rem;
  color: var(--text-primary);
  margin: 0.15rem 0;
  padding-left: 0.95rem;  /* aligns under the $ glyph of the prompt above */
}
.status-note em { font-style: italic; }
.status-note .dot { margin-right: 0.2em; vertical-align: 0.05em; }

/* Verify-now button row — sits below the worker ledger.
   Don't-trust-verify Bitcoin-culture button + italic hint. */
.bip-verify {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: clamp(0.8rem, 1.6vw, 1.2rem);
}
.bip-verify__hint {
  font-size: 0.78rem;
  color: var(--text-primary);
}
/* Cooldown state — disabled until rate-limit cools off */
#verifyNow:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  border-color: var(--bg-border-light);
  color: var(--text-primary);
}
#verifyNow:disabled:hover {
  background: transparent;
  color: var(--text-primary);
}

/* Month-density mini-bar — used in ship-log section to show
   monthly ship counts as ASCII-style bars. Width of bar derives from
   the largest month's count (longest = max). renderMonthlyOverview()
   computes the █/░ split per row at page-load. AAA-default text. */
.month-mini-list {
  margin: 0.4rem 0 1.4rem;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
}
.month-mini {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) 4rem;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--bg-border-light);
  font-size: 0.85rem;
  color: var(--text-primary);
}
.month-mini:last-child { border-bottom: none; }
.month-mini .m { color: var(--btc-orange); font-weight: 600; }
.month-mini .bar {
  color: var(--btc-orange);
  letter-spacing: -1px;
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  min-width: 0;
}
.month-mini .n {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
@media (max-width: 540px) {
  .month-mini { grid-template-columns: 5.4rem minmax(0, 1fr) 3rem; gap: 0.5rem; font-size: 0.78rem; }
}

/* Roadmap — 2-col phase grid, stacks below 760px */
.roadmap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}
@media (max-width: 760px) {
  .roadmap { grid-template-columns: 1fr; }
}
.phase {
  padding: clamp(0.9rem, 1.8vw, 1.1rem) clamp(1rem, 2vw, 1.3rem);
  background: var(--terminal-bg);
  border-left: 3px solid var(--btc-orange);
}
.phase h3 {
  font-size: 0.95rem;
  margin: 0;
  color: var(--btc-orange);
  font-weight: 600;
}
.phase ul {
  list-style: none;
  padding: 0;
  margin: 0.7rem 0 0;
  font-size: 0.88rem;
}
.phase li {
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--bg-border-light);
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: 0.3rem;
}
.phase li:last-child { border-bottom: 0; }
.phase li::before { content: "·"; color: var(--btc-orange); }

/* ============================================================
   FAQ ledger  —  HTML5 exclusive accordion (no JS, CSP-clean)
   `<details name="home-faq">` shared name → opening one
   auto-closes siblings (Chrome 120+ / FF 119+ / Safari 17+).
   Older browsers degrade to multi-open — still functional.
   Visual rhythm matches the .ledger / .ledger__row above it.
   ============================================================ */
.faq-ledger {
  margin-top: 0.6rem;
  border-top: 1px solid var(--bg-border-light);
}
.faq-row {
  border-bottom: 1px solid var(--bg-border-light);
}
.faq-row > summary {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) 2rem;
  align-items: baseline;
  gap: 1rem;
  padding: 0.9rem 0.6rem;
  cursor: pointer;
  list-style: none;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
}
.faq-row > summary::-webkit-details-marker { display: none; }
.faq-row > summary:hover {
  background: rgba(247, 147, 26, 0.06);
}
.faq-row__num {
  color: var(--text-primary);
  font-weight: 600;
}
.faq-row__num-suffix {
  color: var(--btc-orange);
  font-weight: 600;
}
.faq-row__q {
  color: var(--text-primary);
}
.faq-row__toggle {
  color: var(--btc-orange);
  font-size: 1.1rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.faq-row__toggle::before { content: "+"; }
.faq-row[open] .faq-row__toggle::before { content: "−"; }
.faq-row__a {
  padding: 0.2rem 0.6rem 1.2rem 5rem;
  color: var(--text-primary); /* AAA-default — HARD per feedback_no_muted_text_aaa_default.md */
  line-height: 1.7;
}
.faq-row__a > p:first-child { margin-top: 0; }
.faq-row__a p + p,
.faq-row__a ul + p,
.faq-row__a ol + p,
.faq-row__a p + ul,
.faq-row__a p + ol {
  margin-top: 0.7rem;
}
.faq-row__a a { color: var(--btc-orange); }
.faq-row__a a:hover { color: var(--btc-orange-light); }
.faq-row__a code {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: 0.92em;
  background: var(--bg-paper, rgba(247, 147, 26, 0.06));
  padding: 0.05em 0.35em;
  border-radius: 3px;
}

/* Bullet/numbered lists inside FAQ answers — AAA primary text, modest indent. */
.faq-row__list {
  margin: 0;
  padding-left: 1.4rem;
  list-style-position: outside;
}
.faq-row__list > li {
  margin-bottom: 0.45rem;
}
.faq-row__list > li:last-child {
  margin-bottom: 0;
}

/* Second-level nested list (e.g. Q.06's "two surfaces" affiliate split). */
.faq-row__sublist {
  margin: 0.4rem 0 0.4rem 0;
  padding-left: 1.2rem;
  list-style: none;
}
.faq-row__sublist > li {
  position: relative;
  padding-left: 0.9rem;
  margin-bottom: 0.35rem;
}
.faq-row__sublist > li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--btc-orange);
  font-size: 0.85em;
  top: 0.15em;
}
.faq-row__sublist > li:last-child {
  margin-bottom: 0;
}

@media (max-width: 760px) {
  .faq-row > summary {
    grid-template-columns: 3rem minmax(0, 1fr) 1.4rem;
    gap: 0.6rem;
  }
  .faq-row__a {
    padding-left: 3.6rem;
    font-size: 0.95rem;
  }
  .faq-row__list { padding-left: 1.1rem; }
  .faq-row__sublist { padding-left: 0.9rem; }
}

/* ============================================================
   HAMBURGER NAV ZONE  —  slide-in panel at ALL viewports (S192)

   Established S190 (2026-04-28) as mobile-only (≤768px).
   Extended S192 (2026-05-03) to all viewports — desktop also
   uses the hamburger pattern. The inline <a> children of <nav>
   stay hidden at all widths; navigation lives in the spine
   sidebar (z3, primary nav, always visible on desktop) and in
   this slide-in panel (secondary, opens via ☰).

   Class names retain "mobile" prefix for back-compat
   (`.nav__mobile-spine`, `.mobile-toggle`, `.nav__backdrop`).
   Rename to neutral names is a Phase II cleanup candidate.

   Indexed in: memory/feedback_mobile_only_zones.md
   (zone is no longer mobile-only; kept registered for
   re-render-both-viewports discipline).

   Architecture: hamburger button (#menuToggle) toggles .open
   on <nav class="nav" id="mainNav">. Open state = right slide-
   in panel (80%/360px mobile, 22rem desktop). Backdrop covers
   the rest of viewport, tap-to-close. Existing JS in main.js
   (unchanged) handles toggle + ARIA + body-scroll-lock.
   ============================================================ */

/* Hamburger button visible at all widths — overrides style.css
   default `.mobile-toggle { display: none }`. */
.mobile-toggle { display: block; }

/* Hide the inline <a> children of .nav at all widths.
   Navigation lives in z3 spine (always-visible on desktop) and
   in the .nav__mobile-spine panel (opens via ☰). */
.nav > a { display: none; }

/* The .nav itself becomes the right slide-in panel when .open */
.nav.open {
  position: fixed;
  top: var(--site-header-h);
  right: 0;
  bottom: 0;
  left: auto;
  width: 80%;
  max-width: 360px;
  height: calc(100vh - var(--site-header-h));
  background: var(--bg-primary);
  border-left: 1px solid var(--bg-border);
  padding: 1.4rem 1rem 2rem;
  overflow-y: auto;
  z-index: 100;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  animation: ybb-panel-in 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 769px) {
  /* Desktop panel — slightly larger, fixed width for readability */
  .nav.open {
    width: 22rem;
    max-width: 22rem;
  }
}
@keyframes ybb-panel-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* Panel content wrapper — visible only when .nav.open */
.nav__mobile-spine {
  display: none;
}
.nav.open .nav__mobile-spine {
  display: block;
}
.nav.open .nav__mobile-spine .spine {
  display: flex;
  flex-direction: column;
}
.nav.open .nav__mobile-spine .rail-foot {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bg-border-light);
}

/* Backdrop — covers full viewport behind the panel, tap-to-close.
   Panel z-index (100) > backdrop z-index (99), so the panel renders
   on top and only clicks OUTSIDE the panel area register on backdrop. */
.nav__backdrop {
  display: none;
  position: fixed;
  top: var(--site-header-h);
  left: 0;
  right: 0;
  height: calc(100vh - var(--site-header-h));
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  z-index: 99;
}
.nav.open ~ .nav__backdrop,
body:has(.nav.open) .nav__backdrop {
  display: block;
  animation: ybb-backdrop-in 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes ybb-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* DEPRECATED: <details class="mobile-spine"> — replaced by
   the panel. Element removed from index.html; rule kept
   defensive in case stale instances appear in other pages. */
.mobile-spine {
  display: none !important;
}

/* prefers-reduced-motion safety — kill panel + backdrop animations */
@media (prefers-reduced-motion: reduce) {
  .nav.open,
  .nav.open ~ .nav__backdrop,
  body:has(.nav.open) .nav__backdrop {
    animation: none !important;
  }
}

/* Affiliate transparency footer note (S190) — used at the end of /swap and
   /orange-pages to surface the actual affiliate-link counts. AAA-default
   color (no muting); centered + italicized; small subtle font scale. Cross-
   links to /building-in-public §6 Q.06 for the deeper funding-model answer. */
.affiliate-note {
  margin: clamp(1rem, 3vh, 2rem) auto 0;
  max-width: 60ch;
  text-align: center;
  font-style: italic;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-primary);
}
.affiliate-note strong { font-style: normal; }
.affiliate-note a { color: var(--btc-orange); }
.affiliate-note a:hover { color: var(--btc-orange-light); }

/* Ship Log — boxed-ledger variant (S190 §7 redesign). Wraps the existing
   <ul class="ship-log"> in a subtle border + radius so the entries read as
   a framed data block (visual rhythm matches §1's worker ledger + §5's
   security ledger blocks). All existing .ship-log__entry styling in
   style.css remains load-bearing — this is purely an outer frame.
   No background tint — Marius S190: the 1.5%-alpha orange wash read as a
   faint reddish tint under all rows. Border alone defines the frame. */
.ship-log--boxed {
  border: 1px solid var(--bg-border-light);
  border-radius: 4px;
  margin: 0.4rem 0 1rem;
  padding: 0.3rem 0.6rem;
}

/* Fresh-window tint (S190 refinement: scope to message-only).
   Marius S190: only the short description (the .ship-log__msg span) gets
   the green background — NOT the entire row. This reads as a "highlight pen"
   on the meaningful content rather than a full-row paint that would compete
   with the per-cat date color. The date keeps its category color (Q.04 cyan
   for infra, gold for content, etc.), and the green-tint signals "this is
   from the last 3 days" specifically on the description text. */
.ship-log__entry--fresh .ship-log__msg {
  background: rgba(0, 200, 83, 0.10);
  padding: 0.15em 0.45em;
  border-radius: 3px;
  margin-left: -0.45em; /* hug the column edge so the highlight aligns flush */
}
.ship-log__entry--fresh:hover .ship-log__msg {
  background: rgba(0, 200, 83, 0.15);
}

/* Pager ellipsis spacers (S190): visual-only, non-interactive. Match the
   .ship-log-pager__btn frame so the pager rhythm stays consistent — but
   no border, no hover state, no click handler. Used between first-5 and
   last-5 page numbers when total > 10. */
.ship-log-pager__ellipsis {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  padding: 0.4rem 0.7rem;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  -webkit-user-select: none;
  user-select: none;
  letter-spacing: 0.1em;
}

/* Month-mini bars — clickable filter (S190): when shipLogMonthFilter is set,
   the active month gets the orange box-shadow + brightened bar + cursor pointer
   on all rows. Click toggles per-month filter (combined with category filter
   via getFilteredData()'s AND logic). */
.month-mini {
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.month-mini:hover {
  background-color: rgba(247, 147, 26, 0.06);
}
.month-mini--active {
  background-color: rgba(247, 147, 26, 0.12);
  box-shadow: inset 2px 0 0 var(--btc-orange);
}
.month-mini--active .m {
  color: var(--btc-orange-light);
}
.month-mini:focus-visible {
  outline: 2px solid var(--btc-orange);
  outline-offset: -2px;
}

/* Fresh-window summary block (S190) — bottom of §7. Matches the data-profile
   visualization: per-day breakdown for last FRESH_WINDOW_DAYS days from today,
   plus a total + last-ship-age footer line. Always visible — zero-row days
   show "0 entries" so the rhythm is honest (no recent activity is itself a
   useful signal). Mono terminal feel matches month-mini. */
.fresh-window {
  margin: 0.4rem 0 1rem;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
}
.fresh-window__row {
  display: grid;
  grid-template-columns: 7rem 1.5rem auto;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--bg-border-light);
  font-size: 0.85rem;
  color: var(--text-primary);
}
.fresh-window__row:last-of-type { border-bottom: none; }
.fresh-window__date {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.fresh-window__arrow {
  color: var(--btc-orange);
  text-align: center;
}
.fresh-window__count {
  font-variant-numeric: tabular-nums;
}
/* S190 (Marius granular color spec): row-level --has class no longer needed.
   Inline spans inside renderFreshWindow() handle per-token colors:
     "last" + "days" + parens + "Last ship:" + "ago"   = default white
     numbers (window N, count N, days-ago N, full date) = u-color-orange
     "entries" word                                     = u-color-green when count > 0
   This gives precise control without cascade fights. */
.fresh-window__footer {
  margin-top: 0.7rem;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--text-primary);
}
@media (max-width: 540px) {
  .fresh-window__row {
    grid-template-columns: 6.4rem 1.2rem auto;
    gap: 0.5rem;
    font-size: 0.78rem;
  }
}

/* =============================================================
   Roadmap §8 — flat ship-log aesthetic (S190 May 1)
   Override the .bip-roadmap__phase boxed look so each tier reads
   like a ship-log section: tier summary = section divider header,
   items below sit flat against the page background. Same click-
   popup pattern as ship-log entries. Hover/focus turns the row
   orange (Marius S190 May 1).
   ============================================================= */

/* Tier wrapper: drop the card box. */
.bip-roadmap__phase {
  border: none;
  background: transparent;
  margin-bottom: 0.4rem;
  padding: 0;
}
.bip-roadmap__phase[open] {
  border: none;
  margin-bottom: 1.2rem;
}

/* Summary: section-divider treatment, not a card header. */
.bip-roadmap__phase > summary {
  background: transparent;
  border-bottom: 1px solid var(--bg-border-light);
  padding: 0.7rem 0.5rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.bip-roadmap__phase > summary:hover {
  background: rgba(247, 147, 26, 0.04);
  color: var(--btc-orange);
}
.bip-roadmap__phase[open] > summary {
  border-bottom-color: var(--bg-border);
}

/* Items list: flat, no extra padding, no list bullets. */
.bip-roadmap__entries {
  list-style: none;
  margin: 0;
  padding: 0.4rem 0 0 0;
}

/* Roadmap entry rows: single-column (no date/cat). Hover/focus = orange. */
.bip-roadmap__entry {
  display: block;
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.bip-roadmap__entry:hover,
.bip-roadmap__entry:focus-visible {
  background: rgba(247, 147, 26, 0.04);
  color: var(--btc-orange);
  outline: none;
}
.bip-roadmap__entry .ship-log__msg {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: 0.9rem;
  color: inherit;
  display: block;
}

/* Shipped tier: green checkmark prefix. AAA contrast preserved. */
.bip-roadmap__entry--shipped .ship-log__msg::before {
  content: '\2713  ';
  color: var(--accent-green);
}

/* Pinned items: perpetual entries anchored at the bottom of their tier.
   Visible separator above the first pinned (only); subsequent pinned
   items group together with no double-border. Each pinType gets its own
   prefix symbol + color — visually distinct but related. */
.bip-roadmap__entry--pinned {
  margin-top: 0.7rem;
  border-top: 1px dashed var(--bg-border);
  padding-top: 0.85rem;
}
.bip-roadmap__entry--pinned + .bip-roadmap__entry--pinned {
  margin-top: 0;
  border-top: none;
  padding-top: 0.45rem;
}
/* Anchor: deep, constant — used for the foundational perpetual item. */
.bip-roadmap__entry--pinned-anchor .ship-log__msg::before {
  content: '\2693  ';
  color: var(--btc-orange);
}
/* Chain: bounded, linked — used for items roped to the anchor. */
.bip-roadmap__entry--pinned-chain .ship-log__msg::before {
  content: '\26D3  ';
  color: var(--btc-gold);
}

/* Roadmap foreword note (S190 May 1):
   Sits under the §8 subtitle and above the tier blocks. Three-line
   philosophy anchor:
     line 1 — legal disclaimer + change-clause (quiet, secondary tier)
     line 2 — italicized core principle (primary tier, the manifesto)
     line 3 — long-run framing (quiet again)
   Generous margin-bottom creates breathing room before the tier <details>. */
.roadmap-foreword {
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 60ch;
  margin: 1rem auto 2.4rem;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
}
.roadmap-foreword em {
  font-style: italic;
  color: var(--text-primary);
}
@media (max-width: 540px) {
  .roadmap-foreword {
    font-size: 0.82rem;
    padding: 0 0.5rem;
    margin-bottom: 1.8rem;
  }
}

/* ==============================================================
   Roadmap tier colors (S190 May 1 — Marius "feels muted" feedback)
   Each tier gets its own --tier-color CSS variable, which cascades
   to label + dot + count + toggle indicator + subtitle tint. Reads
   as 5 visually distinct sections instead of 5 identical greys.
   Color semantics:
     shipped = green   (alive, completed, verified)
     wip     = orange  (active, current focus, structural)
     short   = gold    (imminent, next-up)
     mid     = blue    (upcoming, planned, intermediate horizon)
     long    = purple  (vision, distant, aspirational)
   All five colors are AAA-verified on --bg-primary (#0d0d0d).
   ============================================================== */
.bip-roadmap__phase[data-tier="shipped"] { --tier-color: var(--accent-green); }
.bip-roadmap__phase[data-tier="wip"]     { --tier-color: var(--btc-orange); }
.bip-roadmap__phase[data-tier="short"]   { --tier-color: var(--btc-gold); }
.bip-roadmap__phase[data-tier="mid"]     { --tier-color: var(--accent-blue); }
.bip-roadmap__phase[data-tier="long"]    { --tier-color: var(--accent-purple); }

/* Tier label (e.g. "SHIPPED", "WORK IN PROGRESS") — full tier color */
.bip-roadmap__phase[data-tier] .bip-roadmap__phase-label {
  color: var(--tier-color);
}

/* Tier dot — filled with the tier color */
.bip-roadmap__phase[data-tier] .bip-roadmap__phase-dot {
  background: var(--tier-color);
}

/* Count badge (e.g. "13") — tier color */
.bip-roadmap__phase[data-tier] .bip-roadmap__phase-count {
  color: var(--tier-color);
}

/* Toggle indicator (+/-) — tier color */
.bip-roadmap__phase[data-tier] > summary::after {
  color: var(--tier-color);
}

/* Subtitle ("· what's already built and live", etc.) — primary tier
   text instead of secondary. Cleaner reads, AAA preserved (the spans
   already inherit color from the parent unless overridden). */
.bip-roadmap__phase[data-tier] > summary .u-color-secondary {
  color: var(--text-primary);
}

/* Hover summary: subtle tier-color background tint instead of generic
   orange (matches the tier identity on interaction). */
.bip-roadmap__phase[data-tier] > summary:hover {
  background: color-mix(in srgb, var(--tier-color) 6%, transparent);
}

/* When open: bottom border picks up the tier color */
.bip-roadmap__phase[data-tier][open] > summary {
  border-bottom-color: color-mix(in srgb, var(--tier-color) 30%, var(--bg-border));
}

/* ==============================================================
   Ship-log hover — per-cat color tint (S190 May 1)
   Each ship-log entry gets a --cat-color CSS variable matching its
   category. On hover/focus, background tints to 6% of that color
   instead of the generic white-2% wash. Same gesture as roadmap
   entries — visitors learn one hover language across the page.
   Existing per-cat date-bracket colors (style.css ~3613) preserved.
   ============================================================== */
.ship-log__entry--cat-education  { --cat-color: var(--accent-green); }
.ship-log__entry--cat-listings   { --cat-color: var(--btc-orange); }
.ship-log__entry--cat-dashboard  { --cat-color: #a78bfa; }
.ship-log__entry--cat-content    { --cat-color: var(--btc-gold); }
.ship-log__entry--cat-data       { --cat-color: var(--accent-green); }
.ship-log__entry--cat-infra      { --cat-color: var(--accent-cyan); }
.ship-log__entry--cat-editorial  { --cat-color: var(--accent-blue); }
.ship-log__entry--cat-milestone  { --cat-color: var(--btc-orange); }

/* Override the generic white hover tint with per-cat color tint */
.ship-log__entry[class*="--cat-"]:hover,
.ship-log__entry[class*="--cat-"]:focus-visible {
  background: color-mix(in srgb, var(--cat-color, var(--btc-orange)) 6%, transparent);
  outline: none;
}

/* =============================================================
   §0 whoami — founder letter (Marius S190+ 2026-05-01)
   Default-collapsed long-form letter. Native <details>; no JS for
   open/close. Auto-collapse on other spine clicks lives in JS.
   Sister files: feedback_no_muted_text_aaa_default.md (AAA on all
   text), feedback_redesign_color_pattern.md (semantic colors).
   ============================================================= */
.bip-whoami {
  border: none;
  background: transparent;
}

/* Summary = clickable trigger. Hide native marker, custom hover. */
.bip-whoami__summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: 0;
}
.bip-whoami__summary::-webkit-details-marker { display: none; }
.bip-whoami__summary::marker { display: none; }
.bip-whoami__summary:hover .bip-whoami__more--collapsed,
.bip-whoami__summary:focus-visible .bip-whoami__more--collapsed {
  color: var(--btc-orange);
}

/* Teaser — first 3 paragraphs always visible. */
.bip-whoami__teaser { margin-top: 0.6rem; }
.bip-whoami__teaser p {
  color: var(--text-primary);
  margin: 0 0 0.7rem;
  line-height: 1.65;
}
.bip-whoami__teaser p:last-child { margin-bottom: 0.6rem; }

/* Affordances — terminal-bracketed, italic, AAA-default text.
   Italic + size + alignment carry de-emphasis without dimming. */
.bip-whoami__more {
  display: block;
  text-align: right;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-style: italic;
  font-size: clamp(0.78rem, 1.4vw, 0.9rem);
  color: var(--text-primary);
  margin-top: 0.8rem;
  -webkit-user-select: none;
  user-select: none;
  transition: color 0.15s ease;
}
.bip-whoami__more--bottom { cursor: pointer; padding-top: 0.6rem; }
.bip-whoami__more--bottom:hover { color: var(--btc-orange); }

/* Affordance visibility by [open] state. */
.bip-whoami:not([open]) .bip-whoami__more--top    { display: none; }
.bip-whoami:not([open]) .bip-whoami__more--bottom { display: none; }
.bip-whoami[open] .bip-whoami__more--collapsed    { display: none; }
.bip-whoami[open] .bip-whoami__more--top          { display: block; }
.bip-whoami[open] .bip-whoami__more--bottom       { display: block; }

/* Body — full letter, native <details> renders only when [open]. */
.bip-whoami__body {
  margin-top: clamp(1rem, 2vw, 1.6rem);
  padding-top: clamp(1rem, 2vw, 1.6rem);
  border-top: 1px dashed var(--bg-border-light);
}
.bip-whoami__body > p {
  color: var(--text-primary);
  margin: 0 0 0.9rem;
  line-height: 1.7;
  max-width: 64ch;
}

/* Sub-headers — $ the mission, $ what this is, etc. */
.bip-whoami__h {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 700;
  color: var(--text-primary);
  margin: clamp(1.6rem, 3vw, 2.2rem) 0 0.7rem;
}
.bip-whoami__h .heading-prompt {
  color: var(--btc-orange);
  margin-right: 0.4rem;
}

/* Lists — rules / help / map. */
.bip-whoami__rules,
.bip-whoami__help,
.bip-whoami__map {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  max-width: 64ch;
}
.bip-whoami__rules li,
.bip-whoami__help li,
.bip-whoami__map li {
  color: var(--text-primary);
  padding: 0.4rem 0;
  line-height: 1.6;
}
.bip-whoami__rules li {
  padding-left: 1.4rem;
  position: relative;
}
.bip-whoami__rules li::before {
  content: "$";
  color: var(--btc-orange);
  position: absolute;
  left: 0;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-weight: 700;
}

/* Motto block — italic, orange left-rule, AAA text. */
.bip-whoami__motto {
  font-style: italic;
  color: var(--text-primary);
  margin: 1rem 0 1.4rem;
  padding: 0.4rem 0 0.4rem 1rem;
  border-left: 2px solid var(--btc-orange);
  line-height: 1.6;
}

/* Geyser CTA — orange link, dotted underline gains solid on hover. */
.bip-whoami__cta {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  margin: 1rem 0 1.4rem;
  font-size: clamp(0.9rem, 1.6vw, 1rem);
}
.bip-whoami__cta a {
  color: var(--btc-orange);
  text-decoration: none;
  border-bottom: 1px dotted var(--btc-orange);
  transition: border-bottom-style 0.15s ease;
}
.bip-whoami__cta a:hover { border-bottom-style: solid; }

/* Closing beats. */
.bip-whoami__close {
  margin-top: 1.6rem;
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--text-primary);
}
.bip-whoami__sign {
  margin-top: 0.4rem;
  color: var(--text-primary);
  font-style: italic;
}

/* Aside lines (mantra + meanwhile sign-off) — set apart visually:
   80% font size + 5% left indent. Italic carries softer voice. */
.bip-whoami__body > p.bip-whoami__aside {
  font-size: 0.8em;
  margin-left: 5%;
}

/* Email + page-link defaults inside the body. */
.bip-whoami__body a:not(.bip-whoami__cta a) {
  color: var(--btc-orange);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: border-bottom-color 0.15s ease;
}
.bip-whoami__body a:not(.bip-whoami__cta a):hover {
  border-bottom-color: var(--btc-orange);
}

/* Mobile — center the affordance and tighten max-width. */
@media (max-width: 760px) {
  .bip-whoami__more { text-align: center; }
  .bip-whoami__body > p,
  .bip-whoami__rules,
  .bip-whoami__help,
  .bip-whoami__map { max-width: 100%; }
}

/* ===========================================================
 * CHAPTER STRIP (S193, BIP-mobile-only)
 *
 * Sticky horizontal chapter-nav strip below site-header. Inspired by
 * the lessons UI on thebitcoinoptic.com — adapted to YBB's terminal aesthetic.
 *
 * Behavior:
 *   - Mobile only (≤760px). Hidden on desktop where z3 spine-rail takes over.
 *   - position: sticky; top: <site-header height>; → stays visible on scroll.
 *   - Horizontal-scrollable tab list; right-edge fade gradient hints overflow.
 *   - Tap a tab → smooth-scroll to section (#id). scroll-margin-top on each
 *     section keeps it clear of the sticky strip.
 *   - Active tab tracks scroll-spy state (aria-current="true" set by
 *     spine-scroll-spy.js — extended in S193 to cover .chapter-strip).
 *
 * Sister patterns: feedback_mobile_only_zones.md, feedback_section_rail_pattern.md
 * =========================================================== */
.chapter-strip { display: none; }

@media (max-width: 760px) {
  .chapter-strip {
    display: block;
    position: sticky;
    top: var(--header-h);
    z-index: 80;
    background: var(--terminal-bg);
    border-bottom: 1px solid var(--bg-border);
    /* Subtle shadow for separation when stuck. */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  }
  .chapter-strip__shell {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    padding: 0.55rem 1rem;
    gap: 0.4rem;
    /* Hide scrollbar but keep scrollability. */
    scrollbar-width: none;
  }
  .chapter-strip__shell::-webkit-scrollbar { display: none; }
  .chapter-strip__tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--bg-border);
    border-radius: 999px;
    text-decoration: none;
    color: var(--text-secondary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    line-height: 1;
    white-space: nowrap;
    scroll-snap-align: start;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  }
  .chapter-strip__tab:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
  }
  .chapter-strip__num {
    display: inline-block;
    min-width: 1.4em;
    padding: 0.15em 0.35em;
    background: var(--bg-elevated);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 0.7em;
    text-align: center;
  }
  .chapter-strip__title {
    color: inherit;
  }
  /* Active tab — outer pill border + number text turn orange. Title stays
     white/default. Number bubble keeps no border. Marius S193 spec. */
  .chapter-strip__tab[aria-current="true"] {
    border-color: var(--btc-orange);
  }
  .chapter-strip__tab[aria-current="true"] .chapter-strip__num {
    color: var(--btc-orange);
    font-weight: 600;
  }
  /* Right-edge fade gradient — hints horizontal overflow. */
  .chapter-strip__fade {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 32px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--terminal-bg) 90%);
  }
}

/* Section scroll-margin + clean tap-to-scroll landing.
 * S193: when chapter-strip is sticky and user taps a tab, the section's
 * orange top-border should land just below the strip with a small empty
 * gap. Real margin between adjacent sections ensures the gap is empty
 * space (transparent), not previous-section trailing content. */
@media (max-width: 760px) {
  .bip-section + .bip-section {
    margin-top: 12px;
  }
  .bip-section.anchor-offset {
    scroll-margin-top: calc(var(--header-h) + 50px + 12px); /* header + strip + gap */
  }
}

/* ===========================================================
 * HEADER — FLUID HEIGHT (S193)
 *
 * Header padding + stats sizing all use clamp() for viewport-aware
 * fluidity — tighter on small viewports, more breathing room on large.
 * Per feedback_fluid_layout_pattern.md (HARD).
 * =========================================================== */
.site-header {
  padding: clamp(0.3rem, 0.8vh, 0.6rem) 0;
}

.site-header .header-stats {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.5vw, 1.25rem);
  margin-left: auto;
  margin-right: auto;
}
.site-header .header-stat {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: clamp(0.68rem, 0.6rem + 0.3vw, 0.82rem);
  color: var(--text-secondary);
  white-space: nowrap;
  text-decoration: none;
  letter-spacing: 0.02em;
  line-height: 1;
}
.site-header .header-stat.header-btc-price {
  color: var(--btc-orange);
  font-weight: 600;
}
.site-header .header-stat--block,
.site-header .header-stat--sats {
  color: var(--text-secondary);
}
/* sats/$ split styling: number neutral, "sats" orange, "/$" neutral. */
.site-header .header-stat--sats__num {
  color: var(--text-secondary);
}
.site-header .header-stat--sats__unit {
  color: var(--btc-orange);
  font-weight: 600;
}
.site-header .header-stat--sats__div {
  color: var(--text-secondary);
}
/* Block-height is now the dashboard link — keep neutral color but signal
   interactivity via hover affordance (no underline by default). */
.site-header a.header-stat--block:hover {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ===========================================================
 * MOBILE 2-ROW HEADER (S193, mobile-only)
 *
 * Marius S193: brand + search + hamburger on row 1; live stats
 * (price + future block-height + sats/$) on row 2.
 *
 * Implementation: flex-wrap on container, flex-basis: 100% on the
 * stats-row container forces it to a new line. Order: 99 keeps it
 * after row-1 controls regardless of DOM order.
 *
 * Today: only .header-btc-price exists on row 2 (injected by feedback.js).
 * Phase II.5+: block-height + sats/$ will join the same row.
 * =========================================================== */
@media (max-width: 760px) {
  /* Mobile 2-row layout — height fluids slightly higher than desktop to
     accommodate brand-row + stats-row, but still tightly compact. Override
     S143 44px touch-target floor on .header-btc-price inside .header-stats
     since it's now part of a 3-stat cluster, not an isolated target. */
  :root { --header-h: clamp(58px, 8vh, 72px); }
  .site-header { padding: clamp(0.25rem, 0.6vh, 0.45rem) 0; }
  .site-header .container {
    flex-wrap: wrap;
    row-gap: 0;
  }
  .site-header .logo {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
  }
  /* Row 2: live-stats wrapper holds block-height + price + sats/$ tight. */
  .site-header .header-stats {
    flex-basis: 100%;
    order: 99;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0;
    min-height: 0;
  }
  .site-header .header-stats > .header-btc-price {
    min-height: 0;
    padding: 0;
  }
  .site-header .header-stat {
    font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    color: var(--text-secondary);
    white-space: nowrap;
    text-decoration: none;
    letter-spacing: 0.02em;
    line-height: 1;
  }
  .site-header .header-stat.header-btc-price {
    color: var(--btc-orange);
    font-weight: 600;
  }
  .site-header .header-stat--block,
  .site-header .header-stat--sats {
    color: var(--text-secondary);
  }
  /* Fallback when feedback.js injects price standalone (no wrapper) — keep
     it wrapping to its own row 2. Scoped to direct child of .container so
     this rule does NOT apply to the price inside .header-stats. */
  .site-header .container > .header-btc-price {
    flex-basis: 100%;
    order: 99;
    margin-left: 0;
    text-align: left;
  }
}