/* ════════════════════════════════════════════════════════════════
   Autocomple.io — Public Education Modules stylesheet (education deep dives)
   Shared by every /education/<module>/ page. Linked (same-origin) at
   /education/assets/site.css. Dark-first, MOBILE-FIRST, three tiers:
   base (≤759px, iPhone-first) → 760px (reading column) → 1080px (wide
   shell + sidebar unit nav). Every value composes from the design tokens
   below, copied verbatim from
   style-guide-autocomple/style-guide-master/colors_and_type.css.
   NO @font-face and NO external font @import: the site ships no font files,
   and the /education/ CSP (default-src 'self') blocks cross-origin fonts.
   --font-sans / --font-mono are pure system stacks (see the Type token note) --
   consistent on every visitor machine. Do not add @import or @font-face here.
   NO JavaScript on these pages (CSP script-src 'none'): the figure lightbox
   is a pure :target overlay, the mobile unit nav is native <details>.
   Companion markup: ac-customer-inquiry scripts/_extract_html.py.
   Design spec: docs/superpowers/specs/2026-07-02-education-series-redesign-design.md
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Surfaces */
  --app-background: #131314;
  --app-surface-container-lowest: #0e0e0e;
  --app-surface-container-low: #1b1b1b;
  --app-surface-container: #1e1f20;
  --app-surface-container-high: #282a2c;

  /* Text */
  --app-text-primary: #e3e3e3;
  --app-text-secondary: #c4c7c5;
  --app-text-tertiary: #9aa3af;

  /* Primary blue */
  --app-primary-400: #8ab4f8;
  --app-primary-900: #0842a0;
  --app-primary: var(--app-primary-400);
  --app-on-primary: #1a1b1e;
  --app-link: var(--app-primary-400);
  --ring: rgba(138, 180, 248, 0.2);

  /* Boundaries */
  --app-outline: #8e918f;
  --app-outline-variant: #444746;
  --app-divider: #5e5e5e;

  /* Type — SYSTEM STACKS ONLY. Never name a font the site doesn't ship
     ('Inter', 'JetBrains Mono'): visitors who happen to have it installed get
     a different (sometimes faux-bold, fontconfig-mangled) rendering than
     everyone else. system-ui is the consistent, intended face. */
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
  --fs-body: 16px; --lh-body: 1.65;
  --fs-caption: 14px; --lh-caption: 1.5;
  --fs-small: 12px; --lh-small: 1.4;

  /* Fluid display scale (mobile → desktop with no breakpoint jumps) */
  --fs-hero: clamp(2.05rem, 4.2vw + 0.9rem, 3.3rem);
  --fs-unit-h1: clamp(1.8rem, 2.4vw + 1rem, 2.4rem);
  --fs-prose-h2: clamp(1.3rem, 1vw + 1.05rem, 1.55rem);
  --fs-prose-h3: clamp(1.1rem, 0.5vw + 1rem, 1.2rem);

  /* Spacing */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 48px; --s-9: 64px;

  /* Radii */
  --r-input: 8px; --r-btn: 10px; --r-card: 12px; --r-modal: 16px; --r-pill: 999px;

  /* Focus */
  --focus-width-mobile: 3px; --focus-offset-mobile: 3px;

  /* Shadows */
  --shadow-card: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-elevated: 0 4px 12px rgba(0,0,0,0.3);
  --shadow-pop: 0 18px 50px rgba(0,0,0,0.55);

  /* Layout system */
  --ke-shell: 1200px;        /* header/footer/unit-grid outer width */
  --ke-index-width: 880px;   /* index hero + curriculum column */
  --ke-article-width: 800px; /* unit article column (desktop) */
  --ke-sidebar-w: 256px;     /* desktop unit nav */
  --ke-header-h: 60px;

  --ke-accent-soft: rgba(138, 180, 248, 0.45);
  --ke-accent-faint: rgba(138, 180, 248, 0.14);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--app-text-primary);
  background: var(--app-background);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4 { margin: 0; color: var(--app-text-primary); font-family: var(--font-sans); }

a { color: var(--app-link); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

::selection { background: rgba(138, 180, 248, 0.28); color: #fff; }

*:focus-visible {
  outline: var(--focus-width-mobile) solid var(--app-primary);
  outline-offset: var(--focus-offset-mobile);
  border-radius: 2px;
}

/* ── Layout container (safe-area aware for notched iPhones) ── */
.ke-container {
  width: 100%;
  max-width: var(--ke-shell);
  margin: 0 auto;
  padding-left: max(var(--s-5), env(safe-area-inset-left));
  padding-right: max(var(--s-5), env(safe-area-inset-right));
}

/* ── Skip link ── */
.ke-skip-link {
  position: absolute; left: var(--s-4); top: -100px;
  background: var(--app-surface-container-high); color: var(--app-text-primary);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-btn); z-index: 300;
  transition: top 0.15s ease;
}
.ke-skip-link:focus { top: var(--s-4); text-decoration: none; }

/* ── Site header (sticky, translucent) ── */
.ke-site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--app-outline-variant);
  background: rgba(19, 19, 20, 0.86);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  padding-top: env(safe-area-inset-top);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ke-site-header { background: var(--app-surface-container-lowest); }
}
.ke-site-header .ke-container {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); min-height: var(--ke-header-h); flex-wrap: wrap;
}
.ke-brand { font-weight: 700; font-size: 1.0625rem; line-height: 1; letter-spacing: 0.2px; color: var(--app-text-primary); }
.ke-brand:hover { text-decoration: none; }
.ke-brand-io { color: var(--app-primary); }
.ke-site-nav { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.ke-site-nav a {
  color: var(--app-text-secondary); font-size: 0.8438rem;
  padding: var(--s-2) 0; letter-spacing: 0.01em;
}
.ke-site-nav a:hover { color: var(--app-text-primary); text-decoration: none; }
.ke-site-nav a[aria-current="page"] {
  color: var(--app-text-primary);
  text-decoration: underline; text-decoration-color: var(--app-primary);
  text-underline-offset: 6px; text-decoration-thickness: 2px;
}

/* ── Main column ── */
.ke-main { flex: 1 0 auto; padding: var(--s-7) 0 calc(var(--s-9) + env(safe-area-inset-bottom)); position: relative; }
.ke-main--index .ke-container { max-width: var(--ke-index-width); }

/* Hero atmosphere: one restrained radial accent glow, index pages only. */
.ke-main--index::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 420px;
  background: radial-gradient(640px 300px at 18% -8%, rgba(138, 180, 248, 0.09), transparent 72%);
  pointer-events: none;
}

/* ── Chips (hero meta + unit meta) ── */
.ke-chip {
  display: inline-flex; align-items: center;
  font-size: 0.8125rem; line-height: 1; letter-spacing: 0.01em;
  color: var(--app-text-secondary);
  background: var(--app-surface-container-low);
  border: 1px solid var(--app-outline-variant);
  border-radius: var(--r-pill);
  padding: 7px var(--s-3);
  white-space: nowrap;
}

/* ══ INDEX PAGE ══ */

.ke-module-hero { margin: var(--s-4) 0 var(--s-8); position: relative; }
.ke-hero-eyebrow {
  display: flex; align-items: center; gap: var(--s-3);
  margin: 0 0 var(--s-4);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--app-primary);
}
.ke-hero-eyebrow::before {
  content: ""; width: 28px; height: 1px; background: var(--app-primary); opacity: 0.7;
}
.ke-module-hero h1 {
  font-size: var(--fs-hero); line-height: 1.06; letter-spacing: -0.028em;
  font-weight: 700; max-width: 18ch;
}
.ke-hero-sub {
  color: var(--app-text-secondary); max-width: 62ch;
  margin: var(--s-5) 0 0; font-size: 1.0313rem; line-height: 1.65;
}
.ke-hero-meta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-6) 0 0; }

/* Curriculum list — numbered cards on a hairline spine */
.ke-unit-list {
  list-style: none; padding: 0; margin: 0;
  position: relative;
}
.ke-unit-list::before {
  content: ""; position: absolute; left: 34px; top: 18px; bottom: 18px;
  width: 1px; background: linear-gradient(to bottom, transparent, var(--app-outline-variant) 8%, var(--app-outline-variant) 92%, transparent);
}
.ke-unit-list li { margin: 0 0 var(--s-3); position: relative; }
.ke-unit-list a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s-4); align-items: center;
  background: var(--app-surface-container-low);
  border: 1px solid var(--app-outline-variant);
  border-radius: 14px;
  padding: var(--s-4) var(--s-5);
  color: var(--app-text-primary);
  transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.ke-unit-list a:hover, .ke-unit-list a:focus-visible {
  text-decoration: none;
  border-color: var(--ke-accent-soft);
  background: var(--app-surface-container);
  transform: translateY(-1px);
  box-shadow: var(--shadow-elevated);
}
.ke-unit-num {
  font: 600 0.875rem/1 var(--font-mono);
  color: var(--app-primary);
  background: var(--app-surface-container);
  border: 1px solid var(--app-outline-variant);
  border-radius: var(--r-btn);
  padding: 9px 8px;
  min-width: 38px; text-align: center;
  align-self: start;
}
.ke-unit-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ke-unit-title { font-weight: 600; font-size: 1rem; line-height: 1.4; letter-spacing: -0.008em; }
.ke-unit-summary { color: var(--app-text-tertiary); font-size: 0.875rem; line-height: 1.55; }
.ke-unit-side { display: flex; align-items: center; gap: var(--s-3); color: var(--app-text-tertiary); align-self: center; }
.ke-unit-min { font-size: 0.7813rem; white-space: nowrap; font-family: var(--font-mono); }
.ke-unit-side svg { display: none; transition: transform 0.16s ease; color: var(--app-primary); }
.ke-unit-list a:hover .ke-unit-side svg { transform: translateX(4px); }

.ke-index-sources-link { display: inline-block; margin-top: var(--s-6); font-size: var(--fs-caption); }

/* Staggered load reveal for the curriculum (index only, ≤10 items) */
.ke-unit-list li { animation: ke-rise 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.ke-unit-list li:nth-child(1) { animation-delay: 0.03s; }
.ke-unit-list li:nth-child(2) { animation-delay: 0.07s; }
.ke-unit-list li:nth-child(3) { animation-delay: 0.11s; }
.ke-unit-list li:nth-child(4) { animation-delay: 0.15s; }
.ke-unit-list li:nth-child(5) { animation-delay: 0.19s; }
.ke-unit-list li:nth-child(6) { animation-delay: 0.23s; }
.ke-unit-list li:nth-child(7) { animation-delay: 0.27s; }
.ke-unit-list li:nth-child(8) { animation-delay: 0.31s; }
.ke-unit-list li:nth-child(9) { animation-delay: 0.35s; }
.ke-unit-list li:nth-child(n+10) { animation-delay: 0.39s; }

/* ══ UNIT PAGES ══ */

/* Breadcrumb + reading progress */
.ke-unit-topbar { margin-bottom: var(--s-6); }
.ke-eyebrow {
  font: 500 var(--fs-small)/1.5 var(--font-mono);
  color: var(--app-text-tertiary); text-transform: uppercase; letter-spacing: 0.07em;
  display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: baseline;
  margin-bottom: var(--s-3);
}
.ke-eyebrow a { color: var(--app-primary); }
.ke-eyebrow .ke-eyebrow-sep { color: var(--app-outline-variant); }
.ke-progress {
  height: 2px; border-radius: var(--r-pill);
  background: var(--ke-accent-faint);
  overflow: hidden;
}
.ke-progress-fill {
  display: block; height: 100%;
  background: var(--app-primary); border-radius: var(--r-pill);
}

/* Layout grid: single column by default; sidebar joins at 1080px */
.ke-unit-layout { display: block; }
.ke-unit-main { min-width: 0; }

/* Desktop unit nav (aside) — hidden until 1080px */
.ke-unitnav { display: none; }

/* Mobile/tablet unit nav — native <details>, zero JS */
.ke-unitnav-m {
  border: 1px solid var(--app-outline-variant);
  border-radius: var(--r-card);
  background: var(--app-surface-container-low);
  margin-bottom: var(--s-6);
}
.ke-unitnav-m summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 14px var(--s-4);
  font-weight: 600; font-size: 0.9375rem; color: var(--app-text-primary);
  min-height: 48px;
}
.ke-unitnav-m summary::-webkit-details-marker { display: none; }
.ke-unitnav-m-pos { color: var(--app-text-tertiary); font-weight: 500; font-size: 0.8125rem; }
.ke-unitnav-m summary::after {
  content: ""; flex: 0 0 auto; width: 9px; height: 9px;
  border-right: 2px solid var(--app-text-tertiary); border-bottom: 2px solid var(--app-text-tertiary);
  transform: rotate(45deg); margin-left: auto; transition: transform 0.16s ease;
}
.ke-unitnav-m summary .ke-unitnav-m-pos { margin-left: 0; margin-right: var(--s-2); }
.ke-unitnav-m[open] summary::after { transform: rotate(-135deg); }
.ke-unitnav-m[open] summary { border-bottom: 1px solid var(--app-outline-variant); }
.ke-unitnav-m nav { padding: var(--s-2) var(--s-2) var(--s-3); }

/* Shared unit-nav list (both disclosure modes) */
.ke-unitnav-head {
  font-size: 0.7188rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--app-text-tertiary); margin: 0 0 var(--s-3); padding-left: var(--s-2);
}
.ke-unitnav-list { list-style: none; margin: 0; padding: 0; }
.ke-unitnav-list a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-3); align-items: start;
  padding: 9px var(--s-2); border-radius: var(--r-input);
  color: var(--app-text-secondary); font-size: 0.875rem; line-height: 1.45;
  border-left: 2px solid transparent;
  transition: background-color 0.14s ease, color 0.14s ease;
}
.ke-unitnav-list a:hover { background: var(--app-surface-container); color: var(--app-text-primary); text-decoration: none; }
.ke-unitnav-num { font: 500 0.75rem/1.6 var(--font-mono); color: var(--app-text-tertiary); }
.ke-unitnav-current a {
  background: var(--app-surface-container);
  border-left-color: var(--app-primary);
  color: var(--app-text-primary); font-weight: 600;
}
.ke-unitnav-current .ke-unitnav-num { color: var(--app-primary); }

/* Discreet "includes an interactive tool" marker (units with a live widget) + its legend */
.ke-unitnav-widget {
  align-self: center; justify-self: end;
  font-size: 0.5rem; line-height: 1; color: var(--app-primary); opacity: 0.9;
}
.ke-unitnav-legend {
  display: flex; align-items: center; gap: 7px;
  margin: var(--s-3) 0 0; padding-left: var(--s-2);
  font-size: 0.75rem; line-height: 1.4; color: var(--app-text-tertiary);
}
.ke-unitnav-legend .ke-unitnav-widget { justify-self: start; }

/* ── Unit prose ── */
.ke-public-unit { max-width: var(--ke-article-width); }
.ke-public-unit > * + * { margin-top: var(--s-5); }
.ke-public-unit h1 {
  font-size: var(--fs-unit-h1); line-height: 1.12; letter-spacing: -0.022em;
  font-weight: 700; margin-top: 0; max-width: 24ch;
}
.ke-public-unit h2 {
  font-size: var(--fs-prose-h2); line-height: 1.3; font-weight: 600; letter-spacing: -0.012em;
  margin-top: var(--s-8); padding-top: var(--s-6);
  border-top: 1px solid var(--app-outline-variant);
}
.ke-public-unit h3 { font-size: var(--fs-prose-h3); line-height: 1.35; font-weight: 600; margin-top: var(--s-7); }
.ke-public-unit p, .ke-public-unit ul, .ke-public-unit ol, .ke-public-unit blockquote { max-width: 70ch; }
.ke-public-unit p { color: var(--app-text-primary); }
.ke-public-unit ul, .ke-public-unit ol { padding-left: var(--s-6); }
.ke-public-unit li + li { margin-top: var(--s-2); }
.ke-public-unit li::marker { color: var(--app-text-tertiary); }
.ke-public-unit hr { border: 0; border-top: 1px solid var(--app-outline-variant); margin: var(--s-7) 0; }
/* A section h2 draws its own top rule — drop a source hr that would double it. */
.ke-public-unit hr:has(+ h2) { display: none; }
.ke-public-unit strong { color: var(--app-text-primary); font-weight: 600; }
.ke-public-unit em { color: inherit; }
.ke-public-unit a { text-underline-offset: 3px; text-decoration: underline; text-decoration-color: rgba(138, 180, 248, 0.45); }
.ke-public-unit a:hover { text-decoration-color: var(--app-primary); }
.ke-public-unit blockquote {
  margin: var(--s-6) 0; padding: var(--s-2) 0 var(--s-2) var(--s-5);
  border-left: 3px solid var(--app-outline-variant); color: var(--app-text-secondary);
}

/* Unit meta chips (Audience / read time), emitted by the extractor */
.ke-unit-meta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.ke-unit-meta + hr { display: none; }

/* Inline + block code */
.ke-public-unit code {
  font-family: var(--font-mono); font-size: 0.875em;
  background: var(--app-surface-container); color: var(--app-text-primary);
  padding: 2px 7px; border-radius: 6px;
  border: 1px solid rgba(68, 71, 70, 0.7);
}
.ke-public-unit pre {
  background: var(--app-surface-container-lowest); border: 1px solid var(--app-outline-variant);
  border-radius: var(--r-card); padding: var(--s-4) var(--s-5); overflow-x: auto;
  max-width: 100%;
}
.ke-public-unit pre code { background: none; padding: 0; border: 0; font-size: 0.8438rem; line-height: 1.6; }

/* Tables (rare, but future modules may use them) */
.ke-public-unit table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; margin: var(--s-6) 0; display: block; overflow-x: auto; }
.ke-public-unit th, .ke-public-unit td { border: 1px solid var(--app-outline-variant); padding: var(--s-2) var(--s-3); text-align: left; }
.ke-public-unit th { background: var(--app-surface-container-low); color: var(--app-text-secondary); }

/* Quick-summary callout ("What you'll take away") */
.ke-summary {
  background: var(--app-surface-container-low);
  border: 1px solid var(--app-outline-variant);
  border-left: 3px solid var(--app-primary);
  border-radius: var(--r-card);
  padding: var(--s-5) var(--s-6);
}
.ke-summary > h2 {
  margin: 0; padding: 0; border: 0;
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.13em; color: var(--app-text-tertiary);
}
.ke-summary ul { margin: var(--s-3) 0 0; }
.ke-summary li { color: var(--app-text-secondary); }
.ke-summary li strong { color: var(--app-text-primary); }
/* Action link at the foot of the take-away callout → jumps to the interactive widget */
.ke-summary-trylink { margin: var(--s-4) 0 0; }
.ke-summary-trylink a {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  font-weight: 600; color: var(--app-primary);
}
.ke-summary-trylink a::after { content: "\2192"; transition: transform 0.16s ease; }
.ke-summary-trylink a:hover::after { transform: translateX(3px); }

/* Foreword / author's note ("Before you begin — a note from …").
   Open accent-bordered note (not a filled box like .ke-summary) so it reads as
   a personal foreword that stands out without adding visual clutter. */
.ke-foreword {
  margin: var(--s-7) 0;
}
.ke-foreword-label {
  margin: 0 0 var(--s-3);
  font-size: 0.8rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--app-primary);
}
.ke-foreword p:not(.ke-foreword-label) {
  margin: 0; color: var(--app-text-secondary);
  font-size: 1.05rem; line-height: 1.7; font-style: italic;
}
.ke-foreword em { font-style: normal; font-weight: 600; color: var(--app-text-primary); }

/* ── Figures (framed, enlargeable) ── */
.ke-figure { margin: var(--s-7) 0; max-width: 100%; }
.ke-figure-open {
  display: block; position: relative;
  /* Hug the image so small source assets (e.g. a 340px UI panel) are never
     upscaled to the full column width — that made them blurry + oversized.
     Large screenshots still fill the column (capped at max-width:100%). */
  width: fit-content; max-width: 100%; margin-inline: auto;
  border: 1px solid var(--app-outline-variant); border-radius: var(--r-card);
  background: var(--app-surface-container-lowest);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  cursor: zoom-in;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.ke-figure-open:hover, .ke-figure-open:focus-visible {
  border-color: var(--ke-accent-soft); box-shadow: var(--shadow-elevated);
}
.ke-figure-open img { display: block; width: auto; max-width: 100%; height: auto; border: 0; margin: 0; }
.ke-figure-zoom {
  position: absolute; right: var(--s-3); bottom: var(--s-3);
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--app-text-primary);
  background: rgba(14, 14, 14, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-pill);
  padding: 6px 12px;
  opacity: 0.92;
  transition: opacity 0.16s ease, background-color 0.16s ease;
}
.ke-figure-open:hover .ke-figure-zoom { opacity: 1; background: rgba(14, 14, 14, 0.95); }
.ke-figure figcaption {
  font-size: var(--fs-caption); line-height: var(--lh-caption);
  color: var(--app-text-secondary);
  padding: var(--s-3) var(--s-1) 0;
  max-width: 70ch;
}

/* ── Lightbox: CSS-only :target overlay (CSP forbids scripts) ── */
.ke-lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  flex-direction: column;
  padding: max(var(--s-6), env(safe-area-inset-top)) max(var(--s-5), env(safe-area-inset-right)) max(var(--s-6), env(safe-area-inset-bottom)) max(var(--s-5), env(safe-area-inset-left));
  background: rgba(9, 9, 10, 0.95);
}
.ke-lightbox:target { display: flex; animation: ke-fade 0.18s ease both; }
html:has(.ke-lightbox:target) { overflow: hidden; }
/* The animated container caps the lightbox's stacking context, so the sticky
   header would float above the scrim — drop it while a lightbox is open. */
html:has(.ke-lightbox:target) .ke-site-header { visibility: hidden; }
.ke-lightbox-close { position: absolute; inset: 0; cursor: zoom-out; }
.ke-lightbox figure {
  margin: 0; position: relative; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-4);
  max-width: min(1440px, 96vw);
}
.ke-lightbox img {
  max-width: 100%; max-height: min(82vh, 82svh);
  width: auto; height: auto;
  border-radius: var(--r-btn);
  box-shadow: var(--shadow-pop);
  pointer-events: auto;
}
.ke-lightbox figcaption {
  color: var(--app-text-secondary); font-size: var(--fs-caption); line-height: var(--lh-caption);
  text-align: center; max-width: 74ch; pointer-events: auto;
}
.ke-lightbox-x {
  position: absolute;
  top: max(var(--s-4), env(safe-area-inset-top));
  right: max(var(--s-4), env(safe-area-inset-right));
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; line-height: 1; color: var(--app-text-primary);
  background: var(--app-surface-container);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  transition: background-color 0.14s ease;
}
.ke-lightbox-x:hover { background: var(--app-surface-container-high); text-decoration: none; }

/* ── Cross-unit pager (cards) ── */
.ke-pager {
  display: grid; grid-template-columns: 1fr; gap: var(--s-3);
  margin-top: var(--s-8); padding-top: var(--s-6);
  border-top: 1px solid var(--app-outline-variant);
  max-width: var(--ke-article-width);
}
.ke-pager-card {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  background: var(--app-surface-container-low);
  border: 1px solid var(--app-outline-variant);
  border-radius: 14px;
  padding: var(--s-4) var(--s-5);
  transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}
.ke-pager-card:hover, .ke-pager-card:focus-visible {
  text-decoration: none; border-color: var(--ke-accent-soft);
  background: var(--app-surface-container); transform: translateY(-1px);
}
.ke-pager-label {
  font-size: 0.7188rem; font-weight: 600; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--app-text-tertiary);
}
.ke-pager-title { color: var(--app-text-primary); font-weight: 600; font-size: 0.9375rem; line-height: 1.4; }
.ke-pager-next { text-align: right; align-items: flex-end; }
.ke-pager-next .ke-pager-label::after { content: " →"; letter-spacing: 0; }
.ke-pager-prev .ke-pager-label::before { content: "← "; letter-spacing: 0; }
.ke-pager-card:hover .ke-pager-label { color: var(--app-primary); }

/* Widget placeholder (should not ship — overrides cover public cuts) */
.ke-widget-placeholder {
  border: 1px dashed var(--app-outline-variant); border-radius: var(--r-card);
  padding: var(--s-4) var(--s-5); color: var(--app-text-tertiary); font-size: var(--fs-caption);
}

/* Redacted LIVE values in public preview */
.ke-redacted { color: var(--app-text-tertiary); font-style: italic; }

/* ── Sources page ── */
.ke-public-sources { max-width: 760px; }
.ke-public-sources h1 { font-size: var(--fs-unit-h1); letter-spacing: -0.02em; }
.ke-public-sources ul { list-style: none; padding: 0; margin-top: var(--s-6); }
.ke-public-sources li {
  padding: var(--s-4) var(--s-2); border-bottom: 1px solid var(--app-outline-variant);
  word-break: break-word; border-radius: var(--r-input);
}
.ke-public-sources li:target { background: var(--app-surface-container-low); box-shadow: inset 2px 0 0 var(--app-primary); }
.ke-public-sources cite { color: var(--app-text-primary); font-style: normal; font-weight: 500; }
.ke-public-sources li a { font-size: 0.875rem; }
.ke-back-index { display: inline-block; margin-top: var(--s-6); font-size: var(--fs-caption); }

/* ── Site footer ── */
.ke-site-footer {
  flex-shrink: 0; border-top: 1px solid var(--app-outline-variant);
  background: var(--app-surface-container-lowest);
  padding: var(--s-7) 0 calc(var(--s-7) + env(safe-area-inset-bottom));
  margin-top: var(--s-9);
}
.ke-site-footer .ke-container {
  display: flex; flex-direction: column; gap: var(--s-3);
}
.ke-site-footer p { margin: 0; color: var(--app-text-tertiary); font-size: var(--fs-caption); }
.ke-footer-links { display: flex; gap: var(--s-5); flex-wrap: wrap; }
.ke-footer-links a { color: var(--app-text-secondary); font-size: var(--fs-caption); }

/* ── Page-load motion (one restrained reveal) ──
   The main container gets an OPACITY-ONLY fade: any transform (even a finished
   identity matrix under fill-mode both) would become the containing block for
   the position:fixed lightboxes inside it and break their viewport centering.
   Never animate transform on an ancestor of .ke-lightbox. */
.ke-main > .ke-container { animation: ke-fade 0.4s ease both; }
@keyframes ke-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ke-fade { from { opacity: 0; } to { opacity: 1; } }

/* ════════ TIER 2: reading column (≥760px) ════════ */
@media (min-width: 760px) {
  :root { --fs-body: 17px; --lh-body: 1.7; }
  *:focus-visible { outline-width: 2px; outline-offset: 2px; }
  .ke-container {
    padding-left: max(var(--s-7), env(safe-area-inset-left));
    padding-right: max(var(--s-7), env(safe-area-inset-right));
  }
  .ke-main { padding-top: var(--s-8); }
  .ke-site-nav { gap: var(--s-5); }
  .ke-site-nav a { font-size: 0.875rem; }
  .ke-unit-side svg { display: block; }
  .ke-unit-list a { padding: var(--s-5) var(--s-6); }
  .ke-unit-list::before { left: 42px; }
  .ke-pager { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
  .ke-site-footer .ke-container { flex-direction: row; justify-content: space-between; align-items: center; }
  .ke-lightbox figure { max-width: min(1440px, 92vw); }
}

/* ════════ TIER 3: wide shell + sidebar unit nav (≥1080px) ════════ */
@media (min-width: 1080px) {
  .ke-main--unit .ke-container { max-width: var(--ke-shell); }
  .ke-unit-layout {
    display: grid;
    grid-template-columns: var(--ke-sidebar-w) minmax(0, 1fr);
    gap: var(--s-9);
    align-items: start;
  }
  .ke-unitnav {
    display: block;
    position: sticky; top: calc(var(--ke-header-h) + var(--s-6));
    max-height: calc(100vh - var(--ke-header-h) - var(--s-8));
    overflow-y: auto; overscroll-behavior: contain;
    padding: var(--s-2) var(--s-2) var(--s-4) 0;
  }
  .ke-unitnav-m { display: none; }
  .ke-unit-topbar { max-width: var(--ke-shell); }
  .ke-public-unit h2 { margin-top: 56px; }
  .ke-figure { margin: var(--s-8) 0; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  .ke-main > .ke-container, .ke-unit-list li { animation: none; }
}