/* ============================================================
   OnPath Document Template — Canonical CSS
   v1.0 — locked 2026-04-26
   Source of truth: ~/Projects/onpath-org/operations/templates/canonical/onpath-doc.css
   Used by: every OnPath-authored HTML doc across every project
   Wiki: ~/Projects/onpath-org-wiki/operations/wiki/components/onpath-doc-template.md
   ============================================================ */

:root {
    --cardinal: #BE2A2A; --cardinal-soft: #c4524a; --terracotta: #c67b5c;
    --sand: #e8dcc8; --cream: #faf6f0; --parchment: #f5efe6;
    --bark: #3d3229; --warm-grey: #7a6e62;
    --sage: #7a9c6d; --river: #5e8b9c; --ochre: #c9a84c;
    --risk-high: #b83a3a; --risk-med: #c9a84c; --risk-low: #7a9c6d;
    --font-display: 'Outfit', sans-serif;
    --font-body: 'Lexend', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --sp-xs: 4px; --sp-sm: 8px; --sp-md: 16px; --sp-lg: 24px; --sp-xl: 32px; --sp-2xl: 48px; --sp-3xl: 64px;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { overflow-y: scroll; scroll-behavior: smooth; }
  body { font-family: var(--font-body); font-weight: 400; font-size: 0.95rem; line-height: 1.7; color: var(--warm-grey); background: var(--cream); padding: var(--sp-2xl) var(--sp-xl); max-width: 1020px; margin: 0 auto; }
  h1 { font-family: var(--font-display); font-weight: 500; font-size: 1.9rem; color: var(--bark); margin-bottom: var(--sp-xs); letter-spacing: -0.01em; line-height: 1.25; }
  h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; margin: var(--sp-3xl) 0 var(--sp-lg); color: var(--bark); padding-bottom: var(--sp-sm); border-bottom: 1px solid var(--sand); }
  h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; margin: var(--sp-lg) 0 var(--sp-sm); color: var(--bark); }
  h4 { font-family: var(--font-display); font-weight: 500; font-size: 1rem; margin: var(--sp-md) 0 var(--sp-sm); color: var(--bark); }
  p { margin-bottom: var(--sp-md); color: var(--warm-grey); line-height: 1.7; }
  strong { color: var(--bark); font-weight: 600; }
  em { color: var(--warm-grey); }
  code { font-family: var(--font-mono); font-size: 0.8rem; background: rgba(61,50,41,0.06); padding: 2px 6px; border-radius: 4px; color: var(--bark); }
  pre { font-family: var(--font-mono); font-size: 0.76rem; background: rgba(61,50,41,0.04); border: 1px solid rgba(61,50,41,0.08); border-radius: 8px; padding: var(--sp-md); margin: var(--sp-sm) 0 var(--sp-lg); overflow-x: auto; line-height: 1.55; color: var(--bark); }
  ul, ol { margin: var(--sp-sm) 0 var(--sp-md) var(--sp-lg); }
  li { margin-bottom: var(--sp-sm); color: var(--warm-grey); }
  a { color: var(--cardinal); text-decoration: none; border-bottom: 1px dotted var(--cardinal-soft); }
  a:hover { border-bottom-style: solid; }

  .subtitle { font-family: var(--font-body); font-weight: 400; color: var(--warm-grey); font-size: 0.9rem; margin-bottom: var(--sp-xl); }
  .accent-line { height: 2px; background: linear-gradient(90deg, var(--cardinal) 0%, var(--terracotta) 40%, var(--ochre) 70%, var(--sage) 100%); margin: var(--sp-sm) 0 var(--sp-xl); border-radius: 1px; opacity: 0.7; }

  table { width: 100%; border-collapse: collapse; margin: var(--sp-sm) 0 var(--sp-lg); font-size: 0.85rem; }
  th { font-family: var(--font-display); font-weight: 500; text-align: left; padding: var(--sp-sm) var(--sp-md); background: var(--parchment); color: var(--bark); border-bottom: 2px solid var(--sand); }
  td { padding: var(--sp-sm) var(--sp-md); border-bottom: 1px solid rgba(61,50,41,0.06); color: var(--warm-grey); vertical-align: top; }
  tr:hover td { background: rgba(61,50,41,0.02); }

  .callout { border: 1px solid var(--sand); border-left: 3px solid var(--sage); border-radius: 0 10px 10px 0; padding: var(--sp-md) var(--sp-lg); margin: var(--sp-md) 0 var(--sp-lg); background: rgba(122,156,109,0.05); }
  .callout-warning { border-left-color: var(--cardinal-soft); background: rgba(190,42,42,0.04); }
  .callout-scope { border-left-color: var(--ochre); background: rgba(201,168,76,0.06); }
  .callout-panel { border-left-color: var(--river); background: rgba(94,139,156,0.05); }
  .callout p:last-child { margin-bottom: 0; }
  .callout-label { font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; color: var(--bark); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--sp-xs); }

  .summary-box { background: var(--parchment); border: 1px solid var(--sand); border-radius: 10px; padding: var(--sp-lg); margin-bottom: var(--sp-xl); }

  .risk-pill, .status-pill, .sequence-pill { display: inline-block; font-family: var(--font-display); font-size: 0.68rem; font-weight: 600; padding: 3px 10px; border-radius: 20px; letter-spacing: 0.05em; text-transform: uppercase; vertical-align: middle; margin-left: var(--sp-xs); }
  .risk-high { background: rgba(184,58,58,0.12); color: var(--risk-high); border: 1px solid rgba(184,58,58,0.25); }
  .risk-med  { background: rgba(201,168,76,0.14); color: #8a6c1c; border: 1px solid rgba(201,168,76,0.3); }
  .risk-low  { background: rgba(122,156,109,0.14); color: #4a6e3d; border: 1px solid rgba(122,156,109,0.3); }
  .status-live { background: rgba(122,156,109,0.14); color: #4a6e3d; border: 1px solid rgba(122,156,109,0.3); }
  .status-partial { background: rgba(201,168,76,0.14); color: #8a6c1c; border: 1px solid rgba(201,168,76,0.3); }
  .status-new { background: rgba(94,139,156,0.14); color: #3d6b7a; border: 1px solid rgba(94,139,156,0.3); }
  .status-untested { background: rgba(198,123,92,0.18); color: #8a5a2a; border: 1px solid rgba(198,123,92,0.35); }
  .sequence-pill { background: rgba(61,50,41,0.08); color: var(--bark); border: 1px solid rgba(61,50,41,0.12); }

  .metric-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-md); margin: var(--sp-md) 0 var(--sp-xl); }
  @media (max-width: 700px) { .metric-row { grid-template-columns: repeat(2, 1fr); } }
  .metric { background: var(--parchment); border: 1px solid var(--sand); border-radius: 10px; padding: var(--sp-md); text-align: center; }
  .metric .value { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--bark); line-height: 1; margin-bottom: 4px; }
  .metric .label { font-family: var(--font-body); font-size: 0.7rem; color: var(--warm-grey); text-transform: uppercase; letter-spacing: 0.06em; }

  .toc { background: var(--parchment); border: 1px solid var(--sand); border-radius: 10px; padding: var(--sp-md) var(--sp-lg); margin-bottom: var(--sp-xl); }
  .toc h3 { margin-top: 0; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--warm-grey); font-weight: 600; }
  .toc ol { margin: 0; padding-left: var(--sp-md); columns: 2; column-gap: var(--sp-xl); }
  .toc li { margin-bottom: 4px; font-size: 0.85rem; }
  @media (max-width: 700px) { .toc ol { columns: 1; } }

  /* Roadmap timeline */
  .roadmap { margin: var(--sp-md) 0 var(--sp-xl); }
  .roadmap-item { display: grid; grid-template-columns: 180px 1fr; gap: var(--sp-md); padding: var(--sp-md) 0; border-bottom: 1px solid var(--sand); }
  .roadmap-item:last-child { border-bottom: none; }
  @media (max-width: 700px) { .roadmap-item { grid-template-columns: 1fr; gap: var(--sp-xs); } }
  .roadmap-when { font-family: var(--font-display); font-weight: 600; color: var(--cardinal); font-size: 0.85rem; }
  .roadmap-when .sub { display: block; font-family: var(--font-mono); font-weight: 400; font-size: 0.7rem; color: var(--warm-grey); margin-top: 2px; letter-spacing: 0; }
  .roadmap-what h4 { margin: 0 0 var(--sp-xs); font-size: 1rem; }
  .roadmap-what ul { margin: 0 0 var(--sp-xs) var(--sp-md); font-size: 0.85rem; }
  .roadmap-what li { margin-bottom: 2px; line-height: 1.55; }
  .roadmap-gate { display: inline-block; font-family: var(--font-mono); font-size: 0.72rem; color: #4a6e3d; background: rgba(122,156,109,0.1); padding: 3px 8px; border-radius: 4px; margin-top: var(--sp-xs); border: 1px solid rgba(122,156,109,0.2); }

  /* Core summary cards */
  .core-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); margin: var(--sp-md) 0 var(--sp-xl); }
  @media (max-width: 700px) { .core-grid { grid-template-columns: 1fr; } }
  .core-card { background: #fff; border: 1px solid var(--sand); border-top: 3px solid var(--cardinal-soft); border-radius: 10px; padding: var(--sp-lg); }
  .core-card h3 { margin-top: 0; margin-bottom: var(--sp-xs); }
  .core-card h3 a { color: var(--bark); border-bottom: none; }
  .core-card h3 a:hover { color: var(--cardinal); }
  .core-card .pills { margin-bottom: var(--sp-sm); }
  .core-card .pills .risk-pill, .core-card .pills .status-pill, .core-card .pills .sequence-pill { margin-left: 0; margin-right: 6px; }
  .core-card .lead { font-size: 0.88rem; margin-bottom: var(--sp-sm); color: var(--warm-grey); }
  .core-card .deep-link { display: inline-block; font-family: var(--font-display); font-size: 0.8rem; font-weight: 500; color: var(--cardinal); border-bottom: 1px dotted var(--cardinal-soft); margin-top: var(--sp-xs); }
  .core-card .deep-link:hover { border-bottom-style: solid; }

  .scope-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-lg); margin: var(--sp-md) 0 var(--sp-lg); }
  @media (max-width: 700px) { .scope-grid { grid-template-columns: 1fr; } }
  .scope-in  { background: rgba(122,156,109,0.05); border: 1px solid rgba(122,156,109,0.25); border-radius: 10px; padding: var(--sp-lg); }
  .scope-out { background: rgba(184,58,58,0.04); border: 1px solid rgba(184,58,58,0.18); border-radius: 10px; padding: var(--sp-lg); }
  .scope-in h3, .scope-out h3 { margin-top: 0; }
  .scope-in h3 { color: #4a6e3d; }
  .scope-out h3 { color: var(--risk-high); }

  .lesson-card { background: var(--parchment); border: 1px solid var(--sand); border-left: 3px solid var(--river); border-radius: 0 8px 8px 0; padding: var(--sp-md) var(--sp-lg); margin-bottom: var(--sp-sm); }
  .lesson-card .lesson-num { font-family: var(--font-display); font-weight: 700; color: var(--river); margin-right: var(--sp-sm); }
  .lesson-card .lesson-source { display: block; font-family: var(--font-mono); font-size: 0.72rem; color: var(--warm-grey); margin-top: var(--sp-xs); opacity: 0.7; }

  .partnership-card { background: #fff; border: 1px solid var(--sand); border-radius: 10px; padding: var(--sp-md) var(--sp-lg); margin-bottom: var(--sp-sm); display: grid; grid-template-columns: auto 1fr; gap: var(--sp-md); align-items: start; }
  .partnership-card .rule-num { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--cardinal-soft); line-height: 1.2; }
  .mech-pill { font-family: var(--font-display); font-size: 0.65rem; font-weight: 600; padding: 2px 8px; border-radius: 12px; letter-spacing: 0.06em; text-transform: uppercase; margin-left: 8px; }
  .mech-live { background: rgba(122,156,109,0.18); color: #4a6e3d; }
  .mech-todo { background: rgba(198,123,92,0.18); color: #8a5a2a; }

  .decision-tree { background: #fff; border: 1px solid var(--sand); border-radius: 10px; padding: var(--sp-md) var(--sp-lg); margin: var(--sp-md) 0 var(--sp-lg); }
  .decision-tree h4 { margin-top: 0; }
  .decision-tree pre { background: var(--parchment); font-size: 0.75rem; }

  footer { margin-top: var(--sp-3xl); padding-top: var(--sp-lg); border-top: 1px solid var(--sand); font-size: 0.8rem; color: var(--warm-grey); }
  footer a { color: var(--cardinal); }

  .doc-tag { display: inline-block; font-family: var(--font-display); font-size: 0.7rem; font-weight: 600; padding: 3px 10px; border-radius: 4px; background: var(--bark); color: var(--cream); letter-spacing: 0.08em; margin-left: var(--sp-sm); }

  /* Quick-jump nav bar */
  .quick-nav { background: #fff; border: 1px solid var(--sand); border-radius: 10px; padding: var(--sp-md) var(--sp-lg); margin-bottom: var(--sp-xl); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-sm); }
  .quick-nav-label { font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; color: var(--warm-grey); text-transform: uppercase; letter-spacing: 0.08em; margin-right: var(--sp-xs); }
  .quick-nav a { display: inline-block; font-family: var(--font-display); font-size: 0.82rem; font-weight: 500; padding: 5px 12px; border-radius: 20px; background: var(--parchment); color: var(--bark); border: 1px solid var(--sand); border-bottom-style: solid; text-decoration: none; transition: all 0.15s ease; }
  .quick-nav a:hover { background: var(--cardinal); color: var(--cream); border-color: var(--cardinal); }
  .quick-nav a.nav-spec { background: rgba(94,139,156,0.1); border-color: rgba(94,139,156,0.25); color: #3d6b7a; }
  .quick-nav a.nav-spec:hover { background: var(--river); color: var(--cream); border-color: var(--river); }
  .quick-nav-divider { width: 1px; height: 20px; background: var(--sand); margin: 0 var(--sp-xs); }

  /* ============================================================
     v2 ADDITIONS — 2026-04-26 — sandbox iteration
     Source: Tech Writer + UX Architect briefs at
     ~/Projects/onpath-org/operations/templates/research/
     ============================================================ */

  /* --- Header logo + tagline --- */
  .header-logo { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-lg); margin: 0 0 var(--sp-md); padding-bottom: var(--sp-md); border-bottom: 1px solid var(--sand); }
  .header-logo a.logo-link { border-bottom: none; display: block; }
  .header-logo img { height: 88px; width: auto; display: block; }
  .header-logo .header-meta { font-family: var(--font-display); font-size: 0.7rem; color: #5d544a; text-transform: uppercase; letter-spacing: 0.08em; text-align: right; line-height: 1.5; }
  .header-logo .header-meta a { color: var(--cardinal); border-bottom: 1px dotted var(--cardinal-soft); }
  @media (max-width: 700px) { .header-logo { flex-direction: column; align-items: flex-start; gap: var(--sp-sm); } .header-logo img { height: 64px; } .header-logo .header-meta { text-align: left; } }

  /* --- Metadata strip --- */
  .metadata-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-md); margin: var(--sp-md) 0 var(--sp-lg); padding: var(--sp-sm) var(--sp-md); background: var(--parchment); border: 1px solid var(--sand); border-radius: 8px; font-size: 0.8rem; }
  .metadata-strip .meta-item { display: inline-flex; align-items: center; gap: 6px; }
  .metadata-strip .meta-label { font-family: var(--font-display); font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #5d544a; }
  .metadata-strip .meta-value { color: var(--bark); font-weight: 500; }
  .metadata-strip .meta-divider { color: var(--sand); user-select: none; }

  /* --- Freshness pill (auto-rendered) --- */
  .freshness-pill { display: inline-block; font-family: var(--font-display); font-size: 0.65rem; font-weight: 600; padding: 2px 9px; border-radius: 20px; letter-spacing: 0.05em; text-transform: uppercase; vertical-align: middle; }
  .freshness-fresh { background: rgba(122,156,109,0.18); color: #4a6e3d; border: 1px solid rgba(122,156,109,0.35); }
  .freshness-recent { background: rgba(201,168,76,0.14); color: #8a6c1c; border: 1px solid rgba(201,168,76,0.3); }
  .freshness-stale { background: rgba(184,58,58,0.12); color: var(--cardinal); border: 1px solid rgba(184,58,58,0.3); }

  /* --- Diátaxis doc-type pill --- */
  .doctype-pill { display: inline-block; font-family: var(--font-display); font-size: 0.65rem; font-weight: 600; padding: 2px 9px; border-radius: 20px; letter-spacing: 0.05em; text-transform: uppercase; background: rgba(94,139,156,0.14); color: #3d6b7a; border: 1px solid rgba(94,139,156,0.3); }

  /* --- Lifecycle banners (stale / archived / deprecated / superseded) --- */
  .banner-stale, .banner-archived, .banner-deprecated, .banner-superseded { display: flex; align-items: center; gap: var(--sp-md); padding: var(--sp-md) var(--sp-lg); margin: 0 0 var(--sp-lg); border-radius: 8px; font-size: 0.9rem; }
  .banner-stale { background: rgba(201,168,76,0.08); border: 1px solid rgba(201,168,76,0.3); border-left: 3px solid var(--ochre); }
  .banner-archived { background: rgba(61,50,41,0.06); border: 1px solid rgba(61,50,41,0.15); border-left: 3px solid var(--bark); }
  .banner-deprecated { background: rgba(184,58,58,0.06); border: 1px solid rgba(184,58,58,0.2); border-left: 3px solid var(--cardinal); }
  .banner-superseded { background: rgba(94,139,156,0.06); border: 1px solid rgba(94,139,156,0.2); border-left: 3px solid var(--river); }
  .banner-stale .banner-label, .banner-archived .banner-label, .banner-deprecated .banner-label, .banner-superseded .banner-label { font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; flex-shrink: 0; padding: 3px 10px; border-radius: 12px; }
  .banner-stale .banner-label { background: rgba(201,168,76,0.2); color: #7a6622; }
  .banner-archived .banner-label { background: rgba(61,50,41,0.12); color: var(--bark); }
  .banner-deprecated .banner-label { background: rgba(184,58,58,0.15); color: var(--cardinal); }
  .banner-superseded .banner-label { background: rgba(94,139,156,0.18); color: #3d6b7a; }

  /* --- Callout-plain (formalized "In plain English") --- */
  .callout-plain { border: 1px solid var(--sand); border-left: 3px solid var(--sage); border-radius: 0 10px 10px 0; padding: var(--sp-md) var(--sp-lg); margin: var(--sp-sm) 0 var(--sp-lg); background: rgba(122,156,109,0.05); }
  .callout-plain::before { content: 'In plain English'; display: block; font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; color: #4a6e3d; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--sp-xs); }
  .callout-plain p:last-child { margin-bottom: 0; }

  /* --- Tag-list (alternative to card-grid for dense tagged items) --- */
  .tag-list { list-style: none; margin: var(--sp-md) 0 var(--sp-lg) 0; padding: 0; }
  .tag-list li { padding: var(--sp-sm) 0; border-bottom: 1px solid rgba(61,50,41,0.06); display: grid; grid-template-columns: 90px 1fr; gap: var(--sp-md); align-items: baseline; font-size: 0.88rem; }
  .tag-list li:last-child { border-bottom: none; }
  .tag-list .tag-list-pill { font-family: var(--font-display); font-size: 0.65rem; font-weight: 600; padding: 2px 9px; border-radius: 20px; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; text-align: center; }
  .tag-list .tag-list-pill.sev-critical { background: rgba(184,58,58,0.12); color: #8a3333; border: 1px solid rgba(184,58,58,0.25); }
  .tag-list .tag-list-pill.sev-high { background: rgba(196,122,58,0.12); color: #8a5a2a; border: 1px solid rgba(196,122,58,0.25); }
  .tag-list .tag-list-pill.sev-medium { background: rgba(184,152,58,0.14); color: #7a6622; border: 1px solid rgba(201,168,76,0.3); }
  .tag-list .tag-list-pill.sev-low { background: rgba(122,156,109,0.16); color: #4a6e3d; border: 1px solid rgba(122,156,109,0.3); }
  .tag-list .tag-list-lead { font-weight: 600; color: var(--bark); }

  /* --- Sticky right-rail TOC (desktop only, ≥1280px) --- */
  @media (min-width: 1280px) {
    .toc-sticky { position: fixed; top: var(--sp-2xl); right: var(--sp-md); width: 200px; max-height: calc(100vh - 96px); overflow-y: auto; background: rgba(245,239,230,0.92); backdrop-filter: blur(6px); border: 1px solid var(--sand); border-radius: 8px; padding: var(--sp-sm) var(--sp-md); font-size: 0.78rem; z-index: 50; }
    .toc-sticky h4 { font-family: var(--font-display); font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #5d544a; margin: 0 0 var(--sp-xs); }
    .toc-sticky ol { list-style: none; margin: 0; padding: 0; }
    .toc-sticky li { margin: 2px 0; }
    .toc-sticky a { color: #5d544a; border-bottom: none; display: block; padding: 2px 0 2px 8px; border-left: 2px solid transparent; line-height: 1.35; }
    .toc-sticky a:hover, .toc-sticky a.active { color: var(--cardinal); border-left-color: var(--cardinal); }
  }
  @media (max-width: 1279px) { .toc-sticky { display: none; } }

  /* --- Compare table (option A vs B) --- */
  .compare-table { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: var(--sp-md) 0 var(--sp-lg); border: 1px solid var(--sand); border-radius: 10px; overflow: hidden; background: #fff; }
  @media (max-width: 700px) { .compare-table { grid-template-columns: 1fr; } }
  .compare-col { padding: var(--sp-md) var(--sp-lg); }
  .compare-col + .compare-col { border-left: 1px solid var(--sand); }
  @media (max-width: 700px) { .compare-col + .compare-col { border-left: none; border-top: 1px solid var(--sand); } }
  .compare-col.compare-recommended { background: rgba(122,156,109,0.06); }
  .compare-col h4 { display: flex; align-items: center; gap: var(--sp-sm); margin: 0 0 var(--sp-sm); flex-wrap: wrap; }
  .compare-col .compare-pill { font-family: var(--font-display); font-size: 0.62rem; font-weight: 600; padding: 2px 8px; border-radius: 12px; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(122,156,109,0.18); color: #4a6e3d; }
  .compare-col ul { margin-bottom: 0; }
  .compare-col li { font-size: 0.88rem; }

  /* --- Evidence block --- */
  .evidence-block { padding: var(--sp-sm) var(--sp-md); margin: var(--sp-sm) 0 var(--sp-lg); background: rgba(61,50,41,0.04); border: 1px solid rgba(61,50,41,0.08); border-left: 3px solid var(--warm-grey); border-radius: 0 6px 6px 0; }
  .evidence-block .evidence-label { font-family: var(--font-display); font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #5d544a; margin-bottom: 6px; display: block; }
  .evidence-block .evidence-content { font-family: var(--font-mono); font-size: 0.78rem; color: var(--bark); line-height: 1.6; white-space: pre-wrap; }
  .evidence-block .evidence-source { font-family: var(--font-body); font-size: 0.75rem; color: #5d544a; margin-top: var(--sp-xs); font-style: italic; }

  /* --- Change-log --- */
  .change-log { background: var(--parchment); border: 1px solid var(--sand); border-radius: 10px; padding: var(--sp-md) var(--sp-lg); margin: var(--sp-md) 0 var(--sp-lg); }
  .change-log h4 { margin: 0 0 var(--sp-sm); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: #5d544a; font-weight: 600; }
  .change-log dl { margin: 0; }
  .change-log dt { font-family: var(--font-mono); font-size: 0.78rem; color: var(--bark); font-weight: 500; margin-top: var(--sp-sm); }
  .change-log dt:first-child { margin-top: 0; }
  .change-log dd { margin: 2px 0 var(--sp-xs) 0; font-size: 0.88rem; color: var(--warm-grey); }

  /* --- Hero stat (single big number) --- */
  .hero-stat { text-align: center; padding: var(--sp-2xl) var(--sp-lg); margin: var(--sp-md) 0 var(--sp-xl); background: var(--parchment); border: 1px solid var(--sand); border-radius: 10px; }
  .hero-stat .hero-value { font-family: var(--font-display); font-weight: 700; font-size: 3rem; line-height: 1; color: var(--cardinal); margin-bottom: var(--sp-sm); letter-spacing: -0.02em; }
  .hero-stat .hero-label { font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; color: var(--bark); text-transform: uppercase; letter-spacing: 0.06em; }
  .hero-stat .hero-context { font-size: 0.88rem; color: var(--warm-grey); margin-top: var(--sp-sm); }

  /* --- Pull quote --- */
  .pull-quote { font-family: var(--font-display); font-size: 1.2rem; font-weight: 400; line-height: 1.5; color: var(--bark); padding: var(--sp-lg) var(--sp-2xl); margin: var(--sp-lg) 0; border-left: 3px solid var(--cardinal); position: relative; background: rgba(190,42,42,0.02); border-radius: 0 10px 10px 0; }
  .pull-quote::before { content: '\201C'; position: absolute; left: var(--sp-md); top: 6px; font-size: 3rem; color: var(--cardinal-soft); font-family: serif; opacity: 0.4; line-height: 1; }
  .pull-quote .quote-attribution { display: block; font-family: var(--font-body); font-size: 0.85rem; font-weight: 400; color: var(--warm-grey); margin-top: var(--sp-md); font-style: normal; }
  .pull-quote .quote-attribution::before { content: '— '; }

  /* --- Glossary list (term + plain English pair) --- */
  .glossary-list { display: grid; grid-template-columns: 220px 1fr; gap: 0 var(--sp-lg); margin: var(--sp-md) 0 var(--sp-lg); }
  @media (max-width: 700px) { .glossary-list { grid-template-columns: 1fr; gap: var(--sp-xs) 0; } }
  .glossary-list dt { font-family: var(--font-display); font-weight: 500; color: var(--bark); padding: var(--sp-sm) 0; border-top: 1px solid var(--sand); }
  .glossary-list dd { padding: var(--sp-sm) 0; margin: 0; color: var(--warm-grey); font-size: 0.9rem; border-top: 1px solid var(--sand); }
  .glossary-list dt:first-of-type, .glossary-list dt:first-of-type + dd { border-top: none; padding-top: 0; }
  @media (max-width: 700px) { .glossary-list dd { border-top: none; padding-top: 0; padding-bottom: var(--sp-md); } .glossary-list dt { padding-bottom: 0; } }

  /* --- Back-to-gateway pill --- */
  .back-to-gateway { display: inline-block; font-family: var(--font-display); font-size: 0.85rem; font-weight: 500; padding: var(--sp-sm) var(--sp-lg); border-radius: 20px; background: var(--parchment); border: 1px solid var(--sand); color: var(--cardinal); margin: var(--sp-lg) 0; transition: all 0.15s ease; text-decoration: none; }
  .back-to-gateway:hover { background: var(--cardinal); color: var(--cream); border-color: var(--cardinal); }

  /* --- Internal footer --- */
  .footer-internal { margin-top: var(--sp-3xl); padding: var(--sp-lg) 0 0; border-top: 1px solid var(--sand); font-size: 0.82rem; color: var(--warm-grey); }
  .footer-internal .footer-row { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-md); align-items: start; margin-bottom: var(--sp-md); }
  @media (max-width: 700px) { .footer-internal .footer-row { grid-template-columns: 1fr; } }
  .footer-internal .footer-brand { font-family: var(--font-display); font-weight: 500; color: var(--bark); }
  .footer-internal .footer-brand a { color: var(--cardinal); border-bottom: 1px dotted var(--cardinal-soft); }
  .footer-internal .footer-meta { font-family: var(--font-mono); font-size: 0.72rem; text-align: right; color: #5d544a; line-height: 1.7; }
  @media (max-width: 700px) { .footer-internal .footer-meta { text-align: left; } }
  .footer-internal .footer-resources { padding: var(--sp-md) 0; border-top: 1px solid rgba(61,50,41,0.05); border-bottom: 1px solid rgba(61,50,41,0.05); margin: var(--sp-md) 0; font-size: 0.85rem; }
  .footer-internal .footer-resources strong { color: var(--bark); margin-right: var(--sp-sm); }
  .footer-internal .footer-resources a { color: var(--cardinal); border-bottom: 1px dotted var(--cardinal-soft); }
  .footer-internal .footer-copyright { font-size: 0.75rem; color: #5d544a; padding-top: var(--sp-sm); }

  /* --- Client footer (template — not used on this internal doc) --- */
  .footer-client { margin-top: var(--sp-3xl); padding-top: var(--sp-lg); border-top: 1px solid var(--sand); font-size: 0.85rem; color: var(--warm-grey); }
  .footer-client .footer-contact { font-family: var(--font-display); color: var(--bark); }
  .footer-client .footer-contact strong { color: var(--bark); font-weight: 600; }
  .footer-client .footer-confidential { font-size: 0.75rem; color: #5d544a; margin-top: var(--sp-sm); }

  /* --- Context-bar (used on subpages only — see Core1_SDLC.html for the live render) --- */
  .context-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-md); background: #fff; border: 1px solid var(--sand); border-radius: 8px; padding: var(--sp-xs) var(--sp-md); margin: var(--sp-md) 0 var(--sp-lg); font-size: 0.85rem; }
  .context-bar .context-label { font-family: var(--font-display); font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #5d544a; margin-right: var(--sp-xs); }
  .context-bar .context-parent a, .context-bar .context-siblings a { color: var(--cardinal-soft); border-bottom: 1px dotted var(--cardinal-soft); font-family: var(--font-display); font-weight: 500; }
  .context-bar .context-parent a:hover, .context-bar .context-siblings a:hover { border-bottom-style: solid; }
  .context-bar .context-current { font-family: var(--font-display); font-weight: 600; color: var(--bark); text-align: center; }
  .context-bar .context-siblings { text-align: right; display: flex; gap: var(--sp-md); justify-content: flex-end; }
  .context-bar .context-prev { margin-right: auto; }
  @media (max-width: 700px) { .context-bar { grid-template-columns: 1fr; gap: var(--sp-xs); padding: var(--sp-sm) var(--sp-md); } .context-bar .context-current { text-align: left; } .context-bar .context-siblings { justify-content: space-between; } }

  /* --- Preview block wrapper (sandbox-only; remove for production canonical) --- */
  .preview-block { background: rgba(94,139,156,0.04); border: 2px dashed var(--river); border-radius: 10px; padding: var(--sp-lg); margin: var(--sp-xl) 0; }
  .preview-block .preview-label { font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #3d6b7a; margin-bottom: var(--sp-xs); }
  .preview-block > h2:first-of-type { margin-top: var(--sp-md); }
  .preview-block .preview-note { font-size: 0.85rem; color: var(--warm-grey); margin-bottom: var(--sp-lg); font-style: italic; }
  .preview-component { margin-bottom: var(--sp-lg); padding-bottom: var(--sp-md); border-bottom: 1px solid rgba(94,139,156,0.18); }
  .preview-component:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
  .preview-component-name { font-family: var(--font-mono); font-size: 0.78rem; color: #3d6b7a; padding: 2px 8px; background: rgba(94,139,156,0.1); border-radius: 4px; display: inline-block; margin-bottom: var(--sp-xs); }
  .preview-component-desc { font-size: 0.88rem; color: var(--warm-grey); margin: var(--sp-xs) 0 var(--sp-sm); }

  /* --- Caption / small-text contrast bump (AAA on warm palette) --- */
  caption, .gauge-name, .gauge-desc, .roadmap-when .sub, figcaption { color: #5d544a; }

  /* --- Focus states (keyboard a11y) --- */
  a:focus-visible, button:focus-visible, summary:focus-visible, details:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--river); outline-offset: 2px; border-radius: 2px; }

  /* --- Print stylesheet --- */
  @media print {
    body { background: #fff; color: #000; max-width: none; padding: var(--sp-lg); }
    .header-logo { border-bottom: 1px solid #999; page-break-after: avoid; }
    .header-logo .header-meta a { color: #000; }
    .quick-nav, .toc-sticky, .context-bar .context-siblings, .back-to-gateway, .preview-block { display: none; }
    .toc, .summary-box, .callout, .callout-plain, .core-card, .week-card, .mech-card, .lesson-card, .partnership-card, .roadmap-item, .compare-table, .evidence-block, .change-log, .hero-stat, .pull-quote, .metadata-strip { background: #fff; page-break-inside: avoid; border-color: #ccc; }
    h1, h2, h3, h4 { page-break-after: avoid; }
    pre, table, tr { page-break-inside: avoid; }
    .risk-pill, .status-pill, .sequence-pill, .freshness-pill, .doctype-pill, .tag-list-pill, .compare-pill, .banner-stale .banner-label, .banner-archived .banner-label, .banner-deprecated .banner-label, .banner-superseded .banner-label { background: #fff !important; border: 1px solid currentColor; }
    a { color: #000; text-decoration: underline; }
    .accent-line { opacity: 0.5; height: 1px; }
    @page { margin: 0.6in 0.6in 0.7in 0.6in; }
  }

  /* ============================================================
     v1.1 ADDITIONS — 2026-05-15
     9 new widgets promoted from incident + status showcases plus the
     Thariq-inspired sandbox preview. Widget 7 (.glossary-list) is not
     repeated here — it already shipped in the v2 additions block at
     line ~244 above. The 4 new showcase template types
     (slide-deck, incident-timeline, weekly-status, module-map)
     retain their inline v1.0 canonical CSS for now; future migration
     sweep should re-sync them with v1.1.
     ============================================================ */

  /* --- Widget 1: .timeline (incident showcase source) ---
     Vertical event timeline anchored on a left rail. Each .timeline-event
     gets a colored dot whose color is driven by its .type-* class. Time +
     title + event-type pill render inline; an optional <details> panel
     expands per-event prose. Stack semantically: the parent .timeline is
     just a frame; each event positions its own dot via ::before. */
  .timeline { position: relative; margin: var(--sp-md) 0 var(--sp-xl); padding: var(--sp-sm) 0 var(--sp-sm) 0; }
  .timeline::before { content: ''; position: absolute; left: 18px; top: 0; bottom: 0; width: 2px; background: var(--cardinal-soft); opacity: 0.4; border-radius: 1px; }
  .timeline-event { position: relative; padding: 0 0 var(--sp-md) var(--sp-2xl); }
  .timeline-event:last-child { padding-bottom: 0; }
  .timeline-event::before { content: ''; position: absolute; left: 11px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--warm-grey); border: 3px solid var(--cream); box-shadow: 0 0 0 1px rgba(61,50,41,0.15); transition: transform 0.15s ease, box-shadow 0.15s ease; }
  .timeline-event:hover::before { transform: scale(1.15); box-shadow: 0 0 0 1px rgba(61,50,41,0.25), 0 0 0 6px rgba(190,42,42,0.08); }
  .timeline-event.type-detection::before { background: var(--river); }
  .timeline-event.type-triage::before { background: var(--ochre); }
  .timeline-event.type-mitigation::before { background: var(--cardinal-soft); }
  .timeline-event.type-fix::before { background: var(--cardinal); }
  .timeline-event.type-monitoring::before { background: var(--sage); }
  .timeline-event.type-resolution::before { background: var(--sage); box-shadow: 0 0 0 1px rgba(122,156,109,0.5); }
  .timeline-event.type-postmortem::before { background: var(--warm-grey); }
  .timeline-event .event-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-sm); margin-bottom: var(--sp-xs); }
  .timeline-event .event-time { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; color: #5d544a; letter-spacing: 0.02em; flex-shrink: 0; min-width: 88px; }
  .timeline-event .event-title { font-family: var(--font-display); font-weight: 500; font-size: 1rem; color: var(--bark); line-height: 1.35; flex: 1; min-width: 220px; }
  .timeline-event details { margin-top: var(--sp-xs); }
  .timeline-event details > summary { font-family: var(--font-display); font-size: 0.78rem; color: var(--cardinal); cursor: pointer; padding: 4px 0; list-style: none; display: inline-flex; align-items: center; gap: var(--sp-xs); border-bottom: 1px dotted var(--cardinal-soft); }
  .timeline-event details > summary::-webkit-details-marker { display: none; }
  .timeline-event details > summary::before { content: ''; display: inline-block; width: 0; height: 0; border-left: 5px solid var(--cardinal); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform 0.2s ease; }
  .timeline-event details[open] > summary::before { transform: rotate(90deg); }
  .timeline-event details > summary:hover { border-bottom-style: solid; }
  .timeline-event details .event-detail-body { margin-top: var(--sp-sm); padding: var(--sp-sm) var(--sp-md); background: var(--parchment); border: 1px solid var(--sand); border-radius: 6px; font-size: 0.85rem; }
  .timeline-event details .event-detail-body p { font-size: 0.85rem; margin-bottom: var(--sp-sm); }
  .timeline-event details .event-detail-body p:last-child { margin-bottom: 0; }
  .timeline-event details .event-detail-body .actor { font-family: var(--font-mono); font-size: 0.76rem; color: #5d544a; }
  .timeline-event details .event-detail-body .screenshot-placeholder { display: block; background: repeating-linear-gradient(45deg, rgba(94,139,156,0.06), rgba(94,139,156,0.06) 10px, rgba(94,139,156,0.12) 10px, rgba(94,139,156,0.12) 20px); border: 1px dashed var(--river); border-radius: 4px; padding: var(--sp-md); text-align: center; font-family: var(--font-mono); font-size: 0.72rem; color: #3d6b7a; margin: var(--sp-sm) 0; }
  @media (max-width: 700px) {
    .timeline-event .event-time { min-width: 0; width: 100%; }
    .timeline-event .event-title { min-width: 0; width: 100%; flex: 1 1 100%; }
  }

  /* --- Widget 2: SVG sparkline (.sparkline-card) ---
     Frame for inline SVG line charts. The SVG itself is hand-edited;
     this class just provides the card chrome (border, title, subtitle,
     legend dots). Children can use the .sp-* class names for legend
     items; SVG <text>/<line> style classes (.sp-axis, .sp-grid,
     .sp-tick-label, .sp-day-label, .sp-line-opened, .sp-line-closed,
     .sp-dot-opened, .sp-dot-closed) are scoped inside the embedded
     <style> of each SVG instance — keep them there so authors can
     re-color a specific chart without leaking palette changes globally. */
  .sparkline-card { background: #fff; border: 1px solid var(--sand); border-radius: 10px; padding: var(--sp-md) var(--sp-lg); margin: var(--sp-md) 0 var(--sp-xl); }
  .sparkline-card .sp-title { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--bark); margin-bottom: var(--sp-xs); }
  .sparkline-card .sp-subtitle { font-size: 0.82rem; color: var(--warm-grey); margin-bottom: var(--sp-sm); }
  .sparkline-card .sp-legend { display: flex; gap: var(--sp-lg); margin-bottom: var(--sp-sm); font-size: 0.8rem; flex-wrap: wrap; }
  .sparkline-card .sp-legend-item { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); }
  .sparkline-card .sp-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
  .sparkline-card .sp-legend-dot.sp-opened { background: var(--cardinal-soft); }
  .sparkline-card .sp-legend-dot.sp-closed { background: var(--sage); }
  .sparkline-card svg { display: block; max-width: 100%; height: auto; }

  /* --- Widget 3: .status-header card (weekly status header) ---
     Two-column metadata card sitting at the very top of a weekly status
     report. Left column: client + engagement + lead/recipient meta.
     Right column: week dates + report date + next-report date. Stacks
     to a single column under 700px. */
  .status-header { background: #fff; border: 1px solid var(--sand); border-top: 3px solid var(--cardinal); border-radius: 10px; padding: var(--sp-lg) var(--sp-xl); margin: var(--sp-md) 0 var(--sp-xl); display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-xl); align-items: center; }
  @media (max-width: 700px) { .status-header { grid-template-columns: 1fr; gap: var(--sp-md); padding: var(--sp-lg); } }
  .status-header .sh-client { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--bark); line-height: 1.2; margin-bottom: var(--sp-xs); }
  .status-header .sh-engagement { font-family: var(--font-display); font-size: 0.85rem; color: var(--warm-grey); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--sp-md); }
  .status-header .sh-week { font-family: var(--font-display); font-weight: 500; color: var(--cardinal); font-size: 1.05rem; margin-bottom: var(--sp-xs); }
  .status-header .sh-meta { font-size: 0.82rem; color: var(--warm-grey); line-height: 1.7; }
  .status-header .sh-meta strong { color: var(--bark); font-weight: 600; }
  .status-header .sh-meta-row { display: flex; flex-wrap: wrap; gap: var(--sp-xs) var(--sp-md); margin-top: var(--sp-xs); }

  /* --- Widget 4: Event-type pills (.event-type-pill) ---
     Taxonomy pills used inside .timeline-event headers (and standalone
     in tables / inline prose where an event type needs labeling).
     Color variants follow the same .type-* class names as the timeline
     dot palette, so a single .type-fix span gets consistent treatment
     whether it lives on the dot or the pill. */
  .event-type-pill { display: inline-block; font-family: var(--font-display); font-size: 0.62rem; font-weight: 600; padding: 2px 8px; border-radius: 12px; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle; flex-shrink: 0; }
  .event-type-pill.type-detection { background: rgba(94,139,156,0.16); color: #3d6b7a; border: 1px solid rgba(94,139,156,0.35); }
  .event-type-pill.type-triage { background: rgba(201,168,76,0.18); color: #7a6622; border: 1px solid rgba(201,168,76,0.4); }
  .event-type-pill.type-mitigation { background: rgba(196,122,58,0.16); color: #8a5a2a; border: 1px solid rgba(198,123,92,0.35); }
  .event-type-pill.type-fix { background: rgba(184,58,58,0.14); color: var(--cardinal); border: 1px solid rgba(184,58,58,0.3); }
  .event-type-pill.type-monitoring { background: rgba(122,156,109,0.16); color: #4a6e3d; border: 1px solid rgba(122,156,109,0.35); }
  .event-type-pill.type-resolution { background: rgba(122,156,109,0.22); color: #3a5a30; border: 1px solid rgba(122,156,109,0.5); }
  .event-type-pill.type-postmortem { background: rgba(61,50,41,0.08); color: var(--bark); border: 1px solid rgba(61,50,41,0.18); }

  /* --- Widget 5: .hg-pill (health pill, simplified for v1.1) ---
     Larger, bolder traffic-light pill (green / amber / red) for overall
     status callouts — sized for "first thing the reader sees" duty.
     v1.1 simplification: the original sandbox required a .hg-pill-row
     wrapper; the canonical version stands alone via inline-flex on the
     pill itself. To group multiple pills horizontally, wrap them in any
     generic flex container (e.g. <div style="display: flex; gap:
     var(--sp-md); flex-wrap: wrap;">) — no dedicated wrapper class
     required. The .health-gauge container in status-showcase still
     scopes these via descendant selectors; canonical .hg-pill works
     anywhere. */
  .hg-pill { display: inline-flex; align-items: center; font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; padding: 4px 14px; border-radius: 20px; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; }
  .hg-pill.hg-green { background: rgba(122,156,109,0.18); color: #4a6e3d; border: 1px solid rgba(122,156,109,0.4); }
  .hg-pill.hg-amber { background: rgba(201,168,76,0.18); color: #8a6c1c; border: 1px solid rgba(201,168,76,0.4); }
  .hg-pill.hg-red { background: rgba(184,58,58,0.14); color: var(--cardinal); border: 1px solid rgba(184,58,58,0.35); }

  /* --- Widget 6: Tabbed code blocks (.code-tabs) ---
     Pure-CSS tab switcher driven by hidden radio inputs. Zero JS.
     Each instance needs unique input ids (e.g. tabs-py-1, tabs-js-1)
     when more than one tabbed block lives on the same page, because
     the :checked ~ sibling selector relies on id+name uniqueness.
     Inactive tabs render in warm-grey on parchment; the active tab
     paints cardinal on cream so it reads at a glance. */
  .code-tabs { background: #fff; border: 1px solid var(--sand); border-radius: 10px; overflow: hidden; margin: var(--sp-md) 0 var(--sp-xl); position: relative; }
  .code-tabs input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
  .code-tabs .tab-row { display: flex; flex-wrap: wrap; background: var(--parchment); border-bottom: 1px solid var(--sand); }
  .code-tabs .tab-row label { font-family: var(--font-display); font-size: 0.82rem; font-weight: 500; color: var(--warm-grey); padding: var(--sp-sm) var(--sp-lg); cursor: pointer; border-right: 1px solid var(--sand); border-bottom: 2px solid transparent; transition: color 0.15s ease, background 0.15s ease; user-select: none; }
  .code-tabs .tab-row label:last-of-type { border-right: none; }
  .code-tabs .tab-row label:hover { color: var(--bark); background: rgba(190,42,42,0.04); }
  .code-tabs .tab-row label:focus-within, .code-tabs input[type="radio"]:focus-visible + label { outline: 2px solid var(--river); outline-offset: -2px; }
  .code-tabs .tab-panel { display: none; padding: 0; }
  .code-tabs .tab-panel pre { margin: 0; border: none; border-radius: 0; background: rgba(61,50,41,0.04); font-size: 0.8rem; padding: var(--sp-lg); }
  .code-tabs input[type="radio"]:checked + .tab-row label,
  .code-tabs input[type="radio"]:checked ~ .tab-row label[for] { /* default-off; per-id overrides win */ }
  .code-tabs #tabs-py:checked ~ .tab-row label[for="tabs-py"],
  .code-tabs #tabs-js:checked ~ .tab-row label[for="tabs-js"],
  .code-tabs #tabs-rb:checked ~ .tab-row label[for="tabs-rb"] {
    background: var(--cardinal); color: var(--cream); border-bottom-color: var(--cardinal);
  }
  .code-tabs #tabs-py:checked ~ .tab-panels .tab-panel-py,
  .code-tabs #tabs-js:checked ~ .tab-panels .tab-panel-js,
  .code-tabs #tabs-rb:checked ~ .tab-panels .tab-panel-rb {
    display: block;
  }

  /* --- Widget 8: Editable SVG figure sheet (.figure-sheet) ---
     Host frame for inline SVG diagrams. The SVG lives in HTML so it
     never goes stale, scales perfectly at any zoom, and updates with
     a text edit — distinct from a screenshot-of-a-diagram. The class
     names .box-fill / .box-label / .annotation-note are shared
     primitives authors can reach for when sketching new diagrams,
     so the palette stays consistent across diagrams in a doc. */
  .figure-sheet { background: var(--parchment); border: 1px solid var(--sand); border-radius: 10px; padding: var(--sp-lg); margin: var(--sp-md) 0 var(--sp-xl); }
  .figure-sheet svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
  .figure-sheet figcaption { font-size: 0.82rem; color: #5d544a; text-align: center; margin-top: var(--sp-sm); font-style: italic; }
  .figure-sheet .annotation-note { font-family: var(--font-mono); font-size: 0.78rem; fill: var(--warm-grey); }
  .figure-sheet .box-fill { fill: var(--parchment); stroke: var(--sand); stroke-width: 2; }
  .figure-sheet .box-label { font-family: var(--font-display); font-size: 14px; font-weight: 500; fill: var(--bark); }

  /* --- Widget 9: Annotated flowchart (.flowchart-figure) ---
     Process-flow diagram with rounded-rectangle steps, warm-grey arrows
     for the happy path, and dashed cardinal-soft arrows for failure
     paths (back-edges). Each step carries small annotations for average
     duration and failure rate so readers see at a glance which steps
     are slow or risky. .flowchart-details below the SVG is the spot to
     expand a single step into sub-step prose. Caveat: back-edge curves
     require manual path d="M..." tuning; authors should not expect
     them to auto-route. */
  .flowchart-figure { background: #fff; border: 1px solid var(--sand); border-radius: 10px; padding: var(--sp-lg); margin: var(--sp-md) 0 var(--sp-lg); }
  .flowchart-figure svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
  .flowchart-figure .fc-step-fill { fill: #fff; stroke: var(--sand); stroke-width: 2; }
  .flowchart-figure .fc-step-label { font-family: var(--font-display); font-size: 13px; font-weight: 600; fill: var(--bark); }
  .flowchart-figure .fc-annotation { font-family: var(--font-mono); font-size: 10px; fill: #5d544a; }
  .flowchart-figure .fc-annotation-fail { font-family: var(--font-mono); font-size: 10px; fill: var(--cardinal-soft); }
  .flowchart-figure .fc-arrow { stroke: var(--warm-grey); stroke-width: 1.5; fill: none; }
  .flowchart-figure .fc-arrow-fail { stroke: var(--cardinal-soft); stroke-width: 1.5; fill: none; stroke-dasharray: 5,3; }
  .flowchart-figure figcaption { font-size: 0.82rem; color: #5d544a; text-align: center; margin-top: var(--sp-sm); font-style: italic; }
  .flowchart-details { background: var(--parchment); border: 1px solid var(--sand); border-radius: 8px; padding: var(--sp-md) var(--sp-lg); margin: 0 0 var(--sp-lg); }
  .flowchart-details summary { font-family: var(--font-display); font-size: 0.9rem; font-weight: 500; color: var(--cardinal); cursor: pointer; padding: 4px 0; border-bottom: 1px dotted var(--cardinal-soft); display: inline-block; }
  .flowchart-details summary:hover { border-bottom-style: solid; }
  .flowchart-details ol { margin-top: var(--sp-sm); }
  .flowchart-details ol li { font-size: 0.88rem; }

  /* --- Widget 10: Sticky margin notes (.margin-notes-block) ---
     Code block on the left, audit observations floating to the right —
     each note pointing to a specific line, tagged with a severity pill.
     Collapses to a single column under 900px so notes land below the
     code on mobile.

     Two host variants for the code column:
     1. .code-with-numbers — wraps a stack of <span class="code-line">
        elements. A CSS counter on .code-line auto-numbers each line.
        Best for code that authors hand-paste line-by-line.
     2. .code-with-numbers-pre — wraps a single <pre> block (v1.1
        extension). No auto line numbering because CSS counters do not
        fire inside <pre> text content. Notes self-reference the line
        via .note-line text ("Line 4"). Best for code copy-pasted from
        another file as a single block. */
  .margin-notes-block { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--sp-lg); margin: var(--sp-md) 0 var(--sp-xl); align-items: start; }
  @media (max-width: 900px) { .margin-notes-block { grid-template-columns: 1fr; gap: var(--sp-md); } }
  .margin-notes-block .code-with-numbers,
  .margin-notes-block .code-with-numbers-pre { background: rgba(61,50,41,0.04); border: 1px solid rgba(61,50,41,0.08); border-radius: 8px; padding: var(--sp-md); font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.65; color: var(--bark); overflow-x: auto; }
  .margin-notes-block .code-with-numbers { counter-reset: lineno; }
  .margin-notes-block .code-with-numbers .code-line { display: block; padding-left: 32px; position: relative; white-space: pre; }
  .margin-notes-block .code-with-numbers .code-line::before { counter-increment: lineno; content: counter(lineno); position: absolute; left: 0; width: 24px; color: rgba(61,50,41,0.35); text-align: right; padding-right: var(--sp-sm); font-family: var(--font-mono); font-size: 0.72rem; user-select: none; }
  .margin-notes-block .code-with-numbers .code-line.highlight { background: rgba(196,82,74,0.08); }
  .margin-notes-block .code-with-numbers-pre pre { margin: 0; padding: 0; background: transparent; border: none; font-size: 0.78rem; line-height: 1.65; color: var(--bark); white-space: pre; }
  .margin-notes-block .margin-note-stack { display: flex; flex-direction: column; gap: var(--sp-md); }
  .margin-notes-block .margin-note { background: var(--parchment); border: 1px solid var(--sand); border-left: 3px solid var(--warm-grey); border-radius: 0 8px 8px 0; padding: var(--sp-sm) var(--sp-md); font-size: 0.84rem; }
  .margin-notes-block .margin-note.note-high { border-left-color: var(--cardinal); background: rgba(190,42,42,0.04); }
  .margin-notes-block .margin-note.note-medium { border-left-color: var(--ochre); background: rgba(201,168,76,0.06); }
  .margin-notes-block .margin-note.note-low { border-left-color: var(--sage); background: rgba(122,156,109,0.05); }
  .margin-notes-block .margin-note .note-head { display: flex; align-items: center; gap: var(--sp-sm); margin-bottom: var(--sp-xs); flex-wrap: wrap; }
  .margin-notes-block .margin-note .note-line { font-family: var(--font-mono); font-size: 0.72rem; color: #5d544a; }
  .margin-notes-block .margin-note .note-sev-pill { font-family: var(--font-display); font-size: 0.62rem; font-weight: 600; padding: 2px 8px; border-radius: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
  .margin-notes-block .margin-note .note-sev-pill.sev-high { background: rgba(184,58,58,0.14); color: #8a3333; border: 1px solid rgba(184,58,58,0.3); }
  .margin-notes-block .margin-note .note-sev-pill.sev-medium { background: rgba(201,168,76,0.18); color: #7a6622; border: 1px solid rgba(201,168,76,0.4); }
  .margin-notes-block .margin-note .note-sev-pill.sev-low { background: rgba(122,156,109,0.18); color: #4a6e3d; border: 1px solid rgba(122,156,109,0.4); }
  .margin-notes-block .margin-note p { font-size: 0.84rem; margin: 0; }

  /* --- v1.1 print-stylesheet extensions ---
     Mirror the v1.0 print rules for the new v1.1 widgets: white card
     backgrounds, page-break-inside avoid on big SVG figures, single-
     column collapse for the margin-notes grid, and outlined pills. */
  @media print {
    .timeline, .sparkline-card, .status-header, .figure-sheet, .flowchart-figure, .margin-notes-block, .code-tabs, .flowchart-details { background: #fff; page-break-inside: avoid; border-color: #ccc; }
    .timeline-event, .timeline-event details .event-detail-body, .figure-sheet svg, .flowchart-figure svg { page-break-inside: avoid; }
    .margin-notes-block { grid-template-columns: 1fr; }
    .event-type-pill, .hg-pill, .note-sev-pill { background: #fff !important; border: 1px solid currentColor; }
    .code-tabs .tab-row { display: none; }
    .code-tabs .tab-panel { display: block !important; }
  }

  /* ============================================================
     v1.2 ADDITIONS — 2026-05-15
     Widget selection guidance system. The .use-when class is a
     lightweight annotation that sits under each widget's heading
     (or under its .callout-plain) to trigger the widget reflex.
     One short italic line, leading "Use when:" label in display
     font small caps. Distinct from .callout-plain (which is the
     formal plain-English pairing block); .use-when is a single-line
     selection hint, not a paragraph of prose.
     ============================================================ */

  /* --- .use-when — single-line widget selection hint --- */
  .use-when { font-size: 0.8rem; font-style: italic; color: var(--warm-grey); margin: 0 0 var(--sp-md); padding-left: var(--sp-sm); border-left: 2px solid var(--sand); line-height: 1.5; }
  .use-when::before { content: 'Use when:'; font-family: var(--font-display); font-style: normal; font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: #5d544a; margin-right: var(--sp-sm); }

  /* --- v1.2 print-stylesheet extension --- */
  @media print {
    .use-when { color: #333; border-left-color: #999; }
  }