/* ═══════════════════════════════════════════════════════════════════
   shared.css — Teaching That Lands
   Tokens · Reset · Nav · Mobile menu · Footer
   Shared across all pages; link before any page-specific <style>
   ═══════════════════════════════════════════════════════════════════ */

/* ── Catppuccin tokens ──────────────────────────────────────────── */
[data-theme="dark"] {
  --base:      #1e1e2e;
  --mantle:    #181825;
  --crust:     #11111b;
  --surface0:  #313244;
  --surface1:  #45475a;
  --overlay0:  #9399b2; /* was #6c7086 (3.4:1); now ~6:1 */
  --overlay1:  #7f849c;
  --text:      #cdd6f4;
  --subtext1:  #bac2de;
  --subtext0:  #a6adc8;
  --peach:     #fab387;
  --sky:       #89dceb;
  --teal:      #94e2d5;
  --lavender:  #b4befe;
  --green:     #a6e3a1;
  --shadow:    rgba(0,0,0,0.45);
  --shadow-sm: rgba(0,0,0,0.20);
}
[data-theme="light"] {
  --base:      #eff1f5;
  --mantle:    #e6e9ef;
  --crust:     #dce0e8;
  --surface0:  #ccd0da;
  --surface1:  #bcc0cc;
  --overlay0:  #6c6f85; /* was #9ca0b0 (2.4:1); now 4.7:1 for small grey labels */
  --overlay1:  #8c8fa1;
  --text:      #4c4f69;
  --subtext1:  #5c5f77;
  --subtext0:  #6c6f85;
  /* Catppuccin Latte accents are too pale for text on --base (2.2–3.3:1).
     These are the same hues darkened to >= 5:1, matching the slide decks. */
  --peach:     #b24101;
  --sky:       #036d97;
  --teal:      #0f6e73;
  --lavender:  #314ffc;
  --green:     #2e741f;
  --shadow:    rgba(0,0,0,0.10);
  --shadow-sm: rgba(0,0,0,0.05);
}

/* Cards inside [data-animate] fade in on scroll, but are hidden first ONLY when
   animation is actually available (html.anim, set in Base.astro). If the
   anime.js CDN is blocked (common on NHS networks) or the reader prefers
   reduced motion, content is simply visible. */
html.anim [data-animate] > * { opacity: 0; }
@media print { html.anim [data-animate] > * { opacity: 1 !important; transform: none !important; } }

/* ── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--base);
  color: var(--text);
  transition: background 0.3s, color 0.3s;
  /* sticky footer: flex column keeps footer at bottom on short pages */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
/* page-content grows to fill space above footer */
.page-content { flex: 1; }
/* session pages: match mantle background so no light strip shows above footer */
.session-page .page-content { background: var(--mantle); }
a { text-decoration: none; }
.inner { max-width: 1100px; margin: 0 auto; padding: 0 2.5rem; }

/* ── Nav ────────────────────────────────────────────────────────── */
nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.5rem;
  background: color-mix(in srgb, var(--base) 82%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid color-mix(in srgb, var(--surface0) 55%, transparent);
}

/* Brand — two-line mark */
.brand {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  line-height: 1;
}
.brand-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.brand-role {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--peach);
}

/* Right-side nav cluster */
.nav-right {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-links a {
  font-size: 0.78rem;
  color: var(--subtext1);
  transition: color 0.15s;
}
.nav-links a:hover { color: var(--text); }
.nav-facilitator {
  font-size: 0.72rem;
  color: var(--overlay1);
  transition: color 0.15s;
}
.nav-facilitator:hover { color: var(--sky); }

/* Controls: theme btn + hamburger */
.nav-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.theme-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--subtext0);
  font-size: 1rem;
  padding: 0.25rem;
  line-height: 1;
  transition: color 0.15s;
}
.theme-btn:hover { color: var(--text); }

/* Hamburger — hidden on desktop */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.2rem;
}
.ham-line {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--subtext1);
  border-radius: 1px;
  transition: background 0.15s, transform 0.25s, opacity 0.25s;
}
.hamburger:hover .ham-line { background: var(--text); }
/* Open state — X shape */
.hamburger.is-open .ham-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.is-open .ham-line:nth-child(2) { opacity: 0; }
.hamburger.is-open .ham-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Mobile menu ────────────────────────────────────────────────── */
.mobile-menu {
  display: none; /* shown by JS */
  position: fixed;
  top: 3.25rem;
  left: 0;
  right: 0;
  z-index: 49;
  background: color-mix(in srgb, var(--mantle) 97%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--surface0);
  flex-direction: column;
  padding: 0.25rem 2.5rem 1.25rem;
}
.mobile-menu a {
  font-size: 0.88rem;
  color: var(--subtext1);
  padding: 0.7rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--surface0) 50%, transparent);
  transition: color 0.15s;
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a:hover { color: var(--text); }

/* ── Footer ─────────────────────────────────────────────────────── */
.site-footer {
  position: relative;
  overflow: visible;
  background: var(--crust);
  border-top: 1px solid var(--surface0);
  padding: 0.6rem 2.5rem;
}
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.7rem;
  color: var(--overlay0);
}
.footer-copy { color: var(--overlay0); padding-left: 6rem; }
.footer-inner a { color: var(--overlay1); transition: color 0.15s; }
.footer-inner a:hover { color: var(--text); }
.footer-sep { opacity: 0.3; margin: 0 0.5rem; }
.footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }

/* ── Responsive: nav ────────────────────────────────────────────── */
@media (max-width: 860px) {
  .nav-links  { display: none; }
  .hamburger  { display: flex; }
}


/* ═══════════════════════════════════════════════════════════════════
   Session page components
   Breadcrumb · Hero · Card stack · Concepts · Facilitator card
   All session-N.html pages share these; index.html is unaffected.
   ═══════════════════════════════════════════════════════════════════ */

/* Body offset for fixed nav (session pages don’t use a full-bleed hero) */
.session-page { padding-top: 3.25rem; }

/* ── Breadcrumb overline ──────────────────────────────────────────── */
.session-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.breadcrumb-parent {
  color: color-mix(in srgb, var(--peach) 60%, var(--overlay0));
  transition: color 0.15s;
}
.breadcrumb-parent:hover  { color: var(--peach); }
.breadcrumb-sep           { color: color-mix(in srgb, var(--peach) 35%, var(--overlay0)); }
.breadcrumb-current       { color: var(--peach); }

/* ── Session hero ───────────────────────────────────────────────── */
.session-section {
  background: var(--mantle);
  padding: 3.5rem 2.5rem 4rem;
}
.session-hero-inner {
  max-width: 1100px;
  margin: 0 auto 3rem;
  display: flex;
  align-items: center;
  gap: 3rem;
}
.session-hero-text { flex: 1; min-width: 0; }
.session-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.75rem, 3.5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 0.65rem;
}
.session-subtitle {
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--subtext1);
  line-height: 1.75;
}

/* ── Session overline (top-level pages without breadcrumb) ────────── */
.session-overline {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--peach);
  margin-bottom: 0.6rem;
}

/* ── Theory page: "Used in" session pills ────────────────────────── */
/* Lives in the hero, above the card stack. One pill per session.    */
.theory-used-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.1rem;
}
.theory-used-label {
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--subtext1);
}
.theory-used-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--peach);
  padding: 0.28rem 0.8rem;
  border: 1.5px solid color-mix(in srgb, var(--peach) 40%, transparent);
  border-radius: 100px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.theory-used-pill:visited { color: var(--peach); }
.theory-used-pill:hover {
  background: color-mix(in srgb, var(--peach) 10%, transparent);
  border-color: var(--peach);
}

.session-fox {
  width: 120px;
  flex-shrink: 0;
  pointer-events: none;
  user-select: none;
}

/* ── Card stack ─────────────────────────────────────────────────── */
.session-stack {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Shared card base — border colours set per card type below */
.session-card,
.concepts-card {
  background: var(--base);
  border-radius: 10px;
  padding: 2rem 2.5rem;
  box-shadow: 0 2px 4px var(--shadow-sm), 0 8px 22px var(--shadow);
}
.session-card    { border-left: 3px solid var(--peach); }
.concepts-card   { border-left: 3px solid var(--green); }

/* Prep card internals */
.section-overline {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--overlay0);
  margin-bottom: 1.1rem;
}
.priming-question {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.3rem, 2.8vw, 1.75rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text);
  margin: 0 0 1.35rem;
}
.prep-section {
  padding-top: 1.25rem;
  border-top: 1px solid var(--surface0);
}
.prep-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--overlay0);
  margin-bottom: 0.4rem;
}
.prep-section-text {
  font-size: 0.98rem;
  color: var(--subtext1);
  line-height: 1.65;
}

/* "What we'll do" text and prep fallback in the Before-you-come card */
.session-body p {
  font-size: 0.98rem;
  color: var(--subtext1);
  line-height: 1.7;
  margin-bottom: 0.75rem;
}
.session-body { margin-bottom: 0.6rem; }
.prep-fallback { margin-top: 0.35rem; font-style: italic; }

.session-body a,
.session-body a:visited { color: var(--peach); text-decoration: underline; text-underline-offset: 2px; }

/* Phrase-aware wrapping: "|" in the content marks phrase breaks (see
   pages/sessions/[slug].astro). Each phrase wraps as a unit where it fits;
   lines are balanced. A phrase too long for the line still wraps inside. */
.phrased { text-wrap: balance; }
.phrased .phrase { display: inline-block; }

/* Foldable cards (task: open by default; key ideas: closed, so the session
   isn't spoiled). The whole header is the button, with a Show/Hide pill. */
.card-summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 1rem;
}
.card-summary::-webkit-details-marker { display: none; }
.card-summary > .section-overline,
.card-summary > .concepts-card-overline { grid-column: 1; margin-bottom: 0.15rem; }
.card-summary-title {
  grid-column: 1;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.2rem, 2.4vw, 1.45rem);
  font-weight: 700;
  color: var(--text);
}
.card-toggle {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.card-toggle::after { content: ' ▾'; }
details[open] > .card-summary .card-toggle::after { content: ' ▴'; }
details[open] > .card-summary .when-closed,
details:not([open]) > .card-summary .when-open { display: none; }
details[open] > .card-summary { margin-bottom: 1.25rem; }
.card-summary:focus-visible { outline: 2px solid var(--peach); outline-offset: 4px; border-radius: 4px; }

/* The ask card */
.task-card { border-left-color: var(--green); }
.task-card .section-overline { color: var(--green); }
.task-ask { font-size: clamp(1.15rem, 2.4vw, 1.45rem); margin-bottom: 1.25rem; }
.task-steps {
  margin: 0 0 1.25rem;
  padding-left: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.task-steps li {
  font-size: 0.98rem;
  color: var(--subtext1);
  line-height: 1.6;
  padding-left: 0.25rem;
}
.task-steps li::marker { font-weight: 700; color: var(--green); }
.task-help {
  padding: 1rem 1.15rem;
  background: var(--mantle);
  border-radius: 8px;
}
.task-help p {
  font-size: 0.92rem;
  color: var(--subtext1);
  line-height: 1.6;
  margin: 0 0 0.35rem;
}

.task-help .btn { margin-top: 0.4rem; }
.task-links { margin: 0 0 1.25rem; }
.task-links:last-child { margin-bottom: 0; }
.task-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  font-size: 0.92rem;
  color: var(--subtext1);
  line-height: 1.6;
  margin: 0 0 0.5rem;
}
.card-summary-sub {
  grid-column: 1;
  font-size: 0.88rem;
  color: var(--subtext0);
  line-height: 1.5;
  margin-top: 0.2rem;
}

.recap-section { margin-top: 1.25rem; }

/* One line instead of a card: the blueprint is for facilitators */
.facilitator-line {
  font-size: 0.85rem;
  color: var(--overlay1);
  text-align: center;
  margin: 0.5rem 0 0;
}
.facilitator-line a,
.facilitator-line a:visited { color: var(--sky); font-weight: 600; white-space: nowrap; }

/* Concepts card internals */
.concepts-card-overline {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 1.1rem;
}
/* ── Theory row — unified list-item for concepts + evidence ─────── */
/* Concept chips and evidence papers share the same component.        */
/* No arrow = static (citation). Arrow present = clickable link.      */
.concept-chips {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.theory-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--green) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 18%, transparent);
  text-decoration: none;
  color: inherit;
}
a.theory-row {
  transition: background 0.15s, border-color 0.15s;
}
a.theory-row:hover {
  background: color-mix(in srgb, var(--green) 13%, transparent);
  border-color: color-mix(in srgb, var(--green) 32%, transparent);
}
a.theory-row:visited { color: inherit; }
.theory-row-text { flex: 1; min-width: 0; }
.theory-row-name {
  display: block;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--green);
  margin-bottom: 0.15rem;
}
.theory-row-summary {
  display: block;
  font-size: 0.9rem;
  color: var(--subtext1);
  line-height: 1.55;
}
.theory-row-cite {
  display: block;
  font-size: 0.9rem;
  color: var(--subtext1);
  line-height: 1.65;
  font-style: italic;
}
.theory-row-arrow {
  color: var(--green);
  font-size: 0.9rem;
  font-weight: 600;
  flex-shrink: 0;
  transition: transform 0.15s;
}
a.theory-row:hover .theory-row-arrow {
  transform: translateX(4px);
}

/* ── Footer fox (used on all pages) ──────────────────────────────── */
#footer-fox {
  position: absolute;
  bottom: 0.25rem;
  left: 2.5rem;
  height: 50px;
  width: auto;
  opacity: 0;
  pointer-events: none;
  user-select: none;
}

/* ── Responsive: session pages ────────────────────────────────────── */
@media (max-width: 860px) {
  .session-fox      { display: none; }
  .blueprint-candidate-card { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .session-section    { padding: 2.5rem 1.25rem 2.5rem; }
  .session-card,
  .concepts-card      { padding: 1.75rem 1.25rem; }
  /* .concept-chips already flex column — no override needed */
}


/* =================================================================
   THEORY LIBRARY
   ================================================================= */

/* ── Breadcrumb visited fix (applies to all pages) ────────────────── */
.breadcrumb-parent:visited { color: var(--peach); }

/* ── Brand role variant ──────────────────────────────────────────── */
.brand-role--green   { color: var(--green); }
.brand-role--sky     { color: var(--sky); }
.brand-role--peach   { color: var(--peach); }
.brand-role--lavender { color: var(--lavender); }

/* ── Library landing section ─────────────────────────────────────── */
/* Outer section: full-width background (matches session-section).   */
/* Inner content constrained via .library-inner, same as .session-stack max-width. */
.library-section {
  background: var(--mantle);
  padding: 3.5rem 2.5rem 4rem;
}
.library-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.library-hero-inner {
  display: flex;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 3.5rem;
}
.library-hero-text { flex: 1; }
.library-overline {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.75rem;
}
.library-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
  margin-bottom: 0.75rem;
}
.library-lede {
  font-size: 0.95rem;
  color: var(--subtext0);
  line-height: 1.7;
  max-width: 52ch;
}
.library-lede a {
  color: var(--green);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--green) 40%, transparent);
  transition: border-color 0.15s;
}
.library-lede a:hover { border-bottom-color: var(--green); }
.library-fox {
  width: 110px;
  flex-shrink: 0;
}
#facilitator-hub-fox {
  width: 180px;
}

/* ── Theory groups ───────────────────────────────────────────────── */
.theory-group { margin-bottom: 3rem; }
.theory-group-session {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.35rem;
}
.theory-group-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1.1rem;
}
.theory-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

/* ── Theory card (row layout, green accent) ──────────────────────── */
.theory-card {
  background: color-mix(in srgb, var(--green) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 16%, transparent);
  border-left: 3px solid var(--green);
  border-radius: 10px;
  padding: 1.1rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.theory-card-main { flex: 1; }
.theory-card-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.25rem;
}
.theory-card-summary {
  font-size: 0.8rem;
  color: var(--subtext0);
  line-height: 1.5;
}
.theory-card-action { display: flex; align-items: center; flex-shrink: 0; }

/* ── Individual theory page — override session colours to green ───── */
.theory-page .session-card      { border-left-color: var(--green); }
.theory-page .section-overline  { color: var(--green); }
.theory-page .prep-section-label { color: var(--green); }

/* Paper pages inherit Theory Library green theme */
.paper-page .session-card      { border-left-color: var(--green); }
.paper-page .section-overline  { color: var(--green); }
.paper-page .breadcrumb-parent { color: var(--green); text-decoration: none; transition: color 0.15s; }
.paper-page .breadcrumb-parent:hover   { color: var(--green); opacity: 0.75; }
.paper-page .breadcrumb-parent:visited { color: var(--green); }
.paper-page .breadcrumb-sep    { color: color-mix(in srgb, var(--green) 35%, var(--overlay0)); }
.paper-page .breadcrumb-current { color: var(--green); }

.theory-page .breadcrumb-parent {
  color: color-mix(in srgb, var(--green) 60%, var(--overlay0));
}
.theory-page .breadcrumb-parent:hover   { color: var(--green); }
.theory-page .breadcrumb-parent:visited { color: var(--green); }
.theory-page .breadcrumb-sep    { color: color-mix(in srgb, var(--green) 35%, var(--overlay0)); }
.theory-page .breadcrumb-current { color: var(--green); }

/* ── Evidence list ───────────────────────────────────────────────── */
.evidence-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.25rem;
}
/* .evidence-item now uses .theory-row in HTML — no separate CSS needed */

/* ── Slide comparison (theory pages) ────────────────────────────── */
/* Side-by-side bad/good slide examples. Collapses to single column  */
/* on narrow screens.                                                 */
.slide-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 0.25rem;
}
.slide-figure {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.slide-figure img {
  width: 100%;
  border-radius: 6px;
  border: 1px solid var(--surface0);
  box-shadow: 0 2px 8px var(--shadow);
  display: block;
}
.slide-label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
}
.slide-label--bad {
  color: #d20f39;
  background: rgba(210, 15, 57, 0.08);
}
.slide-label--good {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 10%, transparent);
}
.slide-caption {
  font-size: 0.76rem;
  color: var(--subtext1);
  line-height: 1.6;
}
@media (max-width: 620px) {
  .slide-compare { grid-template-columns: 1fr; }
}

/* ── "Used in sessions" card (peach accent) ──────────────────────── */
.sessions-used-card {
  background: color-mix(in srgb, var(--peach) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--peach) 18%, transparent);
  border-left: 3px solid var(--peach);
  border-radius: 10px;
  padding: 1.4rem 1.6rem;
}
.sessions-used-overline {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--peach);
  margin-bottom: 0.75rem;
}
.sessions-used-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sessions-used-link {
  font-size: 0.85rem;
  color: var(--peach);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: gap 0.15s;
}
.sessions-used-link:visited { color: var(--peach); }
.sessions-used-link:hover   { gap: 0.6rem; }

/* ═══════════════════════════════════════════════════════════════════
   Programme navigation cards  (sessions.html)
   These are the three-session overview cards — different from the
   content .session-card blocks used inside individual session pages.
   ═══════════════════════════════════════════════════════════════════ */
.prog-card {
  background: var(--base);
  border-radius: 10px;
  border-left: 3px solid var(--peach);
  padding: 2rem 2.5rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem 3rem;
  align-items: center;
  box-shadow: 0 2px 4px var(--shadow-sm), 0 8px 22px var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.prog-card:hover {
  transform: translateX(3px);
  box-shadow: 0 2px 6px var(--shadow-sm), 0 12px 32px var(--shadow);
}
.prog-card-main { display: flex; flex-direction: column; gap: 0.55rem; }
.prog-card-overline {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--peach);
}
.prog-card-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.prog-card-body {
  font-size: 0.85rem;
  color: var(--subtext0);
  line-height: 1.7;
  max-width: 62ch;
}
.prog-card-meta {
  font-size: 0.72rem;
  color: var(--overlay0);
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 0.65rem;
  border-top: 1px solid var(--surface0);
  letter-spacing: 0.01em;
}
.prog-card-action { display: flex; align-items: center; }

/* ── Responsive: library pages ───────────────────────────────────── */
@media (max-width: 860px) {
  .library-fox  { display: none; }
  .theory-card  { flex-direction: column; align-items: flex-start; }
  .prog-card    { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 640px) {
  .library-section { padding: 2.5rem 1.25rem 3rem; }
}

/* =================================================================
   THEORY PROSE
   Styles for rendered markdown inside individual theory pages.
   Scoped styles can't reach <Content /> output — these must be global.
   ================================================================= */
.theory-prose p {
  font-size: 0.9rem;
  color: var(--subtext1);
  line-height: 1.75;
  margin-bottom: 0.75rem;
}
.theory-prose p:last-child { margin-bottom: 0; }
.theory-prose h2 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin: 1.5rem 0 0.75rem;
  font-family: 'Inter', system-ui, sans-serif;
}
.theory-prose ul {
  font-size: 0.9rem;
  color: var(--subtext1);
  line-height: 1.9;
  padding-left: 1.25rem;
  margin: 0 0 0.75rem;
}
.theory-prose li { margin-bottom: 0.25rem; }
.theory-prose li:last-child { margin-bottom: 0; }
.theory-prose strong { color: var(--text); font-weight: 600; }
.theory-prose em { font-style: italic; }
.theory-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  color: var(--subtext1);
  line-height: 1.6;
  margin: 0.75rem 0;
  font-family: 'Inter', system-ui, sans-serif;
}
.theory-prose th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid var(--surface0);
}
.theory-prose td {
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--surface0) 55%, transparent);
  vertical-align: top;
}
.theory-prose tr:last-child td { border-bottom: none; }

/* =================================================================
   Paper prose — rendered markdown inside paper summary pages.
   Papers have prominent ## section headings (not micro-overlines).
   ================================================================= */
.paper-prose p {
  font-size: 0.9rem;
  color: var(--subtext1);
  line-height: 1.75;
  margin-bottom: 0.75rem;
}
.paper-prose p:last-child { margin-bottom: 0; }
.paper-prose h2 {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green);
  margin: 2rem 0 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--surface0);
  font-family: 'Inter', system-ui, sans-serif;
}
.paper-prose h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.paper-prose ul, .paper-prose ol {
  font-size: 0.9rem;
  color: var(--subtext1);
  line-height: 1.9;
  padding-left: 1.25rem;
  margin: 0 0 0.75rem;
}
.paper-prose li { margin-bottom: 0.25rem; }
.paper-prose li:last-child { margin-bottom: 0; }
.paper-prose strong { color: var(--text); font-weight: 600; }
.paper-prose em { font-style: italic; }
.paper-prose blockquote {
  border-left: 3px solid var(--peach);
  margin: 1rem 0;
  padding: 0.5rem 0 0.5rem 1rem;
  color: var(--subtext0);
  font-style: italic;
}

/* Paper verdict badge */
.paper-verdict {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: 'Inter', system-ui, sans-serif;
}
.paper-verdict--landmark { background: var(--peach); color: #fff; }
.paper-verdict--strong   { background: var(--green);  color: #fff; }
.paper-verdict--moderate { background: var(--sky);    color: #fff; }
.paper-verdict--limited  { background: var(--surface0); color: var(--subtext1); }

/* Paper meta row (authors · journal · year · open access) */
.paper-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  margin: 0.75rem 0 1.25rem;
  font-size: 0.78rem;
  color: var(--subtext0);
}
.paper-meta-sep { color: var(--overlay0); }
.paper-oa-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--green);
  color: #fff;
}

/* Paper citation card (last card in stack) */
.paper-cite-card {
  background: var(--base);
  border: 1px solid var(--surface0);
  border-radius: 1.25rem;
  padding: 1.5rem 1.75rem;
}
.paper-cite-card .cite-overline {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.6rem;
  font-family: 'Inter', system-ui, sans-serif;
}
.paper-cite-card .cite-text {
  font-size: 0.85rem;
  color: var(--subtext1);
  line-height: 1.65;
  font-style: italic;
}
.paper-cite-card .cite-doi {
  margin-top: 0.75rem;
  font-size: 0.8rem;
}
.paper-cite-card .cite-doi a {
  color: var(--green);
  text-decoration: none;
  border-bottom: 1px solid var(--green);
  padding-bottom: 1px;
}

/* =================================================================
   Facilitator Hub — sky theme overrides
   ================================================================= */

/* Hub page: sky tint for library-overline and lede links */
.facilitator-hub-page .library-overline { color: var(--sky); }
.facilitator-hub-page .library-lede a {
  color: var(--sky);
  border-bottom-color: color-mix(in srgb, var(--sky) 40%, transparent);
}
.facilitator-hub-page .library-lede a:hover { border-bottom-color: var(--sky); }

/* Hub section headers */
.fac-hub-section { margin-bottom: 3rem; }
.fac-section-header {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 1.25rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--surface0);
}

/* Hub card grid */
.fac-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1rem;
}

/* Hub cards — active */
.fac-card {
  background: var(--base);
  border: 1px solid var(--surface0);
  border-left: 3px solid var(--sky);
  border-radius: 10px;
  padding: 1.5rem 1.75rem;
  text-decoration: none;
  display: block;
  transition: box-shadow 0.15s, border-left-color 0.15s;
}
.fac-card:hover {
  box-shadow: 0 4px 18px rgba(4, 165, 229, 0.13);
  border-left-color: color-mix(in srgb, var(--sky) 70%, var(--text));
}
.fac-card-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 0.35rem;
}
.fac-card-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 0.4rem;
  line-height: 1.3;
}
.fac-card-tagline {
  font-size: 0.82rem;
  color: var(--subtext0);
  line-height: 1.55;
}
.fac-card-meta {
  margin-top: 0.75rem;
  font-size: 0.72rem;
  color: var(--overlay0);
}

/* Hub cards — stub (coming soon) */
.fac-stub-card {
  background: var(--mantle);
  border: 1px dashed var(--surface0);
  border-radius: 10px;
  padding: 1.5rem 1.75rem;
  opacity: 0.72;
}
.fac-stub-card .fac-card-eyebrow { color: var(--overlay0); }
.fac-stub-card .fac-card-title   { color: var(--subtext0); }

/* =================================================================
   Blueprint pages — sky theme for individual /facilitator/[slug]
   ================================================================= */

/* Breadcrumb — sky */
.blueprint-page .breadcrumb-parent {
  color: var(--sky);
  text-decoration: none;
  transition: color 0.15s;
}
.blueprint-page .breadcrumb-parent:hover   { color: var(--sky); opacity: 0.75; }
.blueprint-page .breadcrumb-parent:visited { color: var(--sky); }
.blueprint-page .breadcrumb-sep    { color: color-mix(in srgb, var(--sky) 35%, var(--overlay0)); }
.blueprint-page .breadcrumb-current { color: var(--sky); }

/* Card border and overlines */
.blueprint-page .session-card    { border-left-color: var(--sky); }
/* Candidate card keeps its peach/orange border regardless */
.blueprint-page .blueprint-candidate-card { border-left-color: var(--peach); }
/* Blueprint page: skip opacity-0 animation — all cards show immediately,
   including candidate card and theory chips which are server-side rendered */
.blueprint-page .session-card,
.blueprint-page .concepts-card,
.blueprint-page .blueprint-card  { opacity: 1 !important; }
.blueprint-page .section-overline { color: var(--sky); }

/* =================================================================
   Blueprint prose — full facilitator markdown content
   ================================================================= */
.blueprint-prose p {
  font-size: 0.9rem;
  color: var(--subtext1);
  line-height: 1.75;
  margin-bottom: 0.75rem;
}
.blueprint-prose p:last-child { margin-bottom: 0; }

.blueprint-prose h2 {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sky);
  margin: 2.5rem 0 0.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--surface0);
  font-family: 'Inter', system-ui, sans-serif;
}
.blueprint-prose h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.blueprint-prose h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin: 1.75rem 0 0.5rem;
  line-height: 1.3;
}
.blueprint-prose h4 {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--subtext0);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 1.25rem 0 0.4rem;
  font-family: 'Inter', system-ui, sans-serif;
}

.blueprint-prose ul, .blueprint-prose ol {
  font-size: 0.9rem;
  color: var(--subtext1);
  line-height: 1.9;
  padding-left: 1.25rem;
  margin: 0 0 0.75rem;
}
.blueprint-prose li { margin-bottom: 0.3rem; }
.blueprint-prose li:last-child { margin-bottom: 0; }

.blueprint-prose strong { color: var(--text); font-weight: 600; }
.blueprint-prose em { font-style: italic; }
.blueprint-prose a { color: var(--sky); }
.blueprint-prose a:visited { color: var(--teal); }
.blueprint-prose a:hover { text-decoration: underline; }

/* Facilitator notes — sky-tinted blockquotes */
.blueprint-prose blockquote {
  border-left: 3px solid var(--sky);
  background: color-mix(in srgb, var(--sky) 5%, var(--mantle));
  margin: 1rem 0;
  padding: 0.65rem 1rem;
  border-radius: 0 6px 6px 0;
  color: var(--subtext0);
  font-style: italic;
}
.blueprint-prose blockquote p { margin-bottom: 0.4rem; }
.blueprint-prose blockquote p:last-child { margin-bottom: 0; }

/* Tables */
.blueprint-prose table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0 1.5rem;
  font-size: 0.85rem;
}
.blueprint-prose th {
  text-align: left;
  font-weight: 700;
  color: var(--text);
  border-bottom: 2px solid var(--surface0);
  padding: 0.5rem 0.75rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: 'Inter', system-ui, sans-serif;
}
.blueprint-prose td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--surface0);
  color: var(--subtext1);
  vertical-align: top;
  line-height: 1.55;
}
.blueprint-prose tr:last-child td { border-bottom: none; }

/* Horizontal rules */
.blueprint-prose hr {
  border: none;
  border-top: 1px solid var(--surface0);
  margin: 2.5rem 0;
}

/* Download cards — built from <a class="file-download"> by plugins/rehype-file-download.mjs.
   [icon] [label + meta] [Preview] [Download]; consecutive cards stack as a list. */
.file-download {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.75rem;
  width: 100%;
  padding: 0.55rem 0.65rem;
  margin: 0.25rem 0 0.6rem;
  background: var(--mantle);
  border: 1px solid var(--surface1);
  border-radius: 8px;
  box-shadow: 0 1px 3px var(--shadow-sm);
}
.file-download-icon {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}
.file-download-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1 1 14rem;
  min-width: 0;
}
.file-download-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  font-style: normal;
}
.file-download-meta {
  font-size: 0.72rem;
  color: var(--overlay1);
  font-family: monospace;
  font-style: normal;
  overflow-wrap: anywhere;
}
.file-download-buttons {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
  flex-shrink: 0;
}
.file-preview-chevron { display: inline-block; transition: transform 0.3s ease; }
.file-preview-toggle[aria-expanded="true"] .file-preview-chevron { transform: rotate(90deg); }

/* Preview panel (src/scripts/file-preview.ts). Closed: zero height.
   Opening slides the content below down, then fades the preview in. */
.file-preview {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.file-preview.is-open { grid-template-rows: 1fr; }
.file-preview-clip { min-height: 0; overflow: hidden; }
.file-preview-panel {
  margin: 0 0 1.25rem;
  border: 1px solid var(--surface1);
  border-radius: 10px;
  overflow: hidden;
  background: var(--mantle);
  box-shadow: 0 1px 3px var(--shadow-sm);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.file-preview.is-open .file-preview-panel {
  opacity: 1;
  transform: none;
  transition-delay: 0.15s;
}
.file-preview-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #1e1e1e;
}
/* PDFs open at their first page's shape, up to most of the window's height.
   The explicit width stops a portrait page's height cap from narrowing the panel. */
.file-preview-panel--pdf .file-preview-stage {
  width: 100%;
  aspect-ratio: var(--preview-ratio, 595 / 842);
  max-height: min(80vh, 60rem);
  background: #525659;
}
.file-preview-panel--image .file-preview-stage {
  aspect-ratio: auto;
  min-height: 12rem;
  display: grid;
  place-items: center;
  padding: 0.75rem;
  background: var(--crust);
}
.file-preview-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #999;
  font-size: 0.85rem;
}
.file-preview-stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.file-preview-stage img {
  position: relative;
  display: block;
  max-width: 100%;
  max-height: min(80vh, 60rem);
}
.file-preview-stage iframe,
.file-preview-stage img {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.file-preview-panel.is-loaded iframe,
.file-preview-panel.is-loaded img { opacity: 1; }
/* Focus ring on decks: shows when the arrow keys will work (the frame has focus) */
.file-preview-panel--office .file-preview-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 3px transparent;
  transition: box-shadow 0.2s ease;
}
.file-preview-panel--office.has-focus .file-preview-stage::after { box-shadow: inset 0 0 0 3px var(--sky); }
.file-preview-panel--office .file-preview-bar { cursor: pointer; }
.file-preview-bar a, .file-preview-bar button { cursor: pointer; }
.file-preview-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.55rem 0.75rem;
  border-top: 1px solid var(--surface1);
}
.file-preview-hint {
  font-size: 0.78rem;
  color: var(--subtext0);
}
.file-preview-actions {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

/* Expanded: real fullscreen, or a window-filling overlay where that's unavailable */
.file-preview-panel.is-expanded {
  position: fixed;
  inset: 0;
  z-index: 1000;
  margin: 0;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  background: #000;
  transform: none;
}
.file-preview-panel.is-expanded .file-preview-stage { flex: 1; aspect-ratio: auto; max-height: none; }
.file-preview-panel.is-expanded .file-preview-stage img { max-height: 100%; }
.file-preview-panel.is-expanded .file-preview-bar { background: #111; border-top-color: #333; }
.file-preview-panel.is-expanded .file-preview-hint { color: #aaa; }
html.file-preview-fullscreen { overflow: hidden; }
/* Transformed ancestors would trap position: fixed inside the card */
html.file-preview-fullscreen .session-card,
html.file-preview-fullscreen .file-preview-panel { transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .file-preview, .file-preview-panel, .file-preview-stage iframe, .file-preview-stage img,
  .file-preview-chevron { transition: none !important; }
  .file-preview-panel { transform: none; }
}

/* Inline code */
.blueprint-prose code {
  background: var(--mantle);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.85em;
  color: var(--sky);
}

/* Checklist items (GFM task list) */
.blueprint-prose li:has(> input[type="checkbox"]) {
  list-style: none;
  margin-left: -0.5rem;
  padding-left: 0;
}
.blueprint-prose input[type="checkbox"] {
  margin-right: 0.5rem;
  accent-color: var(--sky);
}

/* =================================================================
   Blueprint: candidate instructions card — orange, flex layout
   ================================================================= */
.blueprint-candidate-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.blueprint-candidate-body { flex: 1; }
.blueprint-candidate-overline {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--peach);
  margin-bottom: 0.5rem;
}
.blueprint-candidate-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.45rem;
}
.blueprint-candidate-text {
  font-size: 0.82rem;
  color: var(--subtext0);
  line-height: 1.6;
  max-width: 60ch;
}

/* =================================================================
   Blueprint resource pages — H2 collapsible accordion
   (used by technical-brief, theory-guide — NOT session blueprints)
   ================================================================= */

.blueprint-prose details {
  border-top: 1px solid var(--surface0);
  margin-top: 0;
}
.blueprint-prose details:first-child { border-top: none; }
/* H2 collapsibles (resource pages): pad open sections so content
   doesn't crowd the next section's border — replaces the hr margin */
.blueprint-prose details:not(.flow-block)[open] { padding-bottom: 1.5rem; }

.blueprint-prose summary.blueprint-summary {
  cursor: pointer;
  list-style: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sky);
  padding: 1.25rem 0 1rem;
  user-select: none;
  outline: none;
  transition: color 0.15s;
}
.blueprint-prose summary.blueprint-summary:hover {
  color: color-mix(in srgb, var(--sky) 80%, var(--text));
}
.blueprint-prose summary.blueprint-summary::-webkit-details-marker { display: none; }
.blueprint-prose summary.blueprint-summary::marker { display: none; }
.blueprint-prose summary.blueprint-summary::before {
  content: '';
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.blueprint-prose details[open] > summary.blueprint-summary::before {
  transform: rotate(45deg);
  margin-top: -0.1rem;
}
.blueprint-prose details[open] > *:not(summary) {
  animation: bp-open 0.18s ease-out;
}
@keyframes bp-open {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.blueprint-prose details:not([open]) > summary.blueprint-summary {
  padding-bottom: 1.25rem;
}

/* =================================================================
   Blueprint session flow — H3 collapsibles (time blocks)
   ================================================================= */

.blueprint-prose details.flow-block,
.blueprint-prose summary.blueprint-flow-summary {
  /* inherits from details/summary base above where needed */
}

.blueprint-prose summary.blueprint-flow-summary {
  cursor: pointer;
  list-style: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  padding: 0.9rem 0 0.7rem;
  border-top: 1px solid var(--surface0);
  user-select: none;
  outline: none;
  transition: color 0.15s;
}
.blueprint-prose summary.blueprint-flow-summary:first-child,
.blueprint-prose details:first-child > summary.blueprint-flow-summary {
  border-top: none;
  padding-top: 0;
}
.blueprint-prose summary.blueprint-flow-summary:hover { color: var(--sky); }
.blueprint-prose summary.blueprint-flow-summary::-webkit-details-marker { display: none; }
.blueprint-prose summary.blueprint-flow-summary::marker { display: none; }

/* Chevron for flow blocks — always sky, centred on text */
.blueprint-prose summary.blueprint-flow-summary::before {
  content: '';
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--sky);
  border-bottom: 2px solid var(--sky);
  transform: rotate(-45deg);
  transform-origin: center;
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
.blueprint-prose details[open] > summary.blueprint-flow-summary::before {
  transform: rotate(45deg);
}
.blueprint-prose details:not([open]) > summary.blueprint-flow-summary {
  padding-bottom: 0.9rem;
}
.blueprint-prose details[open] > summary.blueprint-flow-summary {
  color: var(--sky);
}
/* flow-block details must not add their own top border — the summary handles it */
.blueprint-prose details.flow-block {
  border-top: none;
  margin-top: 0;
}
/* Add breathing room after open block content before the next separator */
.blueprint-prose details.flow-block[open] > *:not(summary):last-child {
  margin-bottom: 0.9rem;
}

/* =================================================================
   Buttons — one component for every action on the site
     .btn           outline in the accent colour (default: peach)
     .btn--primary  filled: the main action
     .btn--quiet    neutral: secondary actions (Preview, Hide, New tab…)
     .btn--green / .btn--sky   accent for theory / facilitator pages
     .btn--lg       larger, for the home page
   Every rule is wrapped in :is(…, :root a.btn:visited), which lifts it to
   0,3,1: page link colours (e.g. .blueprint-prose a:visited, 0,2,1) can't
   reach buttons that are links, wherever they sit in the cascade.
   ================================================================= */
:is(.btn, a.btn:link, a.btn:visited, :root a.btn:visited) {
  --btn-accent: var(--peach);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--btn-accent);
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--btn-accent) 45%, transparent);
  border-radius: 6px;
  text-decoration: none;
  text-align: center;
  /* One line where it fits; never wider than its container, so long
     labels wrap on a phone instead of pushing the page sideways */
  max-width: 100%;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, gap 0.15s, filter 0.15s;
}
:is(.btn, a.btn:link, a.btn:visited, :root a.btn:visited):hover {
  background: color-mix(in srgb, var(--btn-accent) 10%, transparent);
  border-color: var(--btn-accent);
  gap: 0.55rem;
  text-decoration: none;
}
.btn:focus-visible { outline: 2px solid var(--btn-accent); outline-offset: 2px; }
.btn[hidden] { display: none; }

:is(.btn--green, a.btn--green:link, a.btn--green:visited, :root a.btn--green:visited) { --btn-accent: var(--green); }
:is(.btn--sky, a.btn--sky:link, a.btn--sky:visited, :root a.btn--sky:visited)       { --btn-accent: var(--sky); }

:is(.btn--primary, a.btn--primary:link, a.btn--primary:visited, :root a.btn--primary:visited) {
  color: var(--base);
  background: var(--btn-accent);
  border-color: var(--btn-accent);
}
:is(.btn--primary, a.btn--primary:link, a.btn--primary:visited, :root a.btn--primary:visited):hover { background: var(--btn-accent); filter: brightness(1.1); }

:is(.btn--quiet, a.btn--quiet:link, a.btn--quiet:visited, :root a.btn--quiet:visited) {
  color: var(--text);
  background: var(--base);
  border-color: var(--surface1);
}
:is(.btn--quiet, a.btn--quiet:link, a.btn--quiet:visited, :root a.btn--quiet:visited):hover { background: var(--surface0); border-color: var(--overlay1); }

:is(.btn--lg, a.btn--lg:link, a.btn--lg:visited, :root a.btn--lg:visited) {
  font-size: 0.9rem;
  padding: 0.65rem 1.4rem;
  border-width: 2px;
  border-radius: 8px;
}