/* ============================================================
   CaseStudyWriting.com — Design System "Paper & Ink" (2026)
   Light warm theme. No frameworks, pure CSS. Mobile-first.
   ============================================================ */

/* ---------- Fonts ---------- */
/* Space Grotesk 500 */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/SpaceGrotesk-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Space Grotesk 600 */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/SpaceGrotesk-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Space Grotesk 700 */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/SpaceGrotesk-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Inter 400 */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/Inter-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Inter 500 */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/Inter-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Inter 600 */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/Inter-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Inter 700 */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/Inter-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Tokens ---------- */
:root {
  --paper: #FBF7F0;
  --paper-deep: #F5EEE2;
  --surface: #FFFFFF;
  --ink: #221B14;
  --ink-soft: #5E5344;
  --ink-faint: #8A7D6C;
  --line: #EAE0CF;
  --line-strong: #D9CCB4;

  --coral: #E85D3D;
  --coral-deep: #C9452A;
  --coral-tint: #FDEDE6;
  --teal: #12967D;
  --teal-deep: #0C7461;
  --teal-tint: #E4F4EF;
  --amber: #E9A319;
  --amber-tint: #FCF3DD;
  --plum: #8D4E85;
  --plum-tint: #F5E8F3;

  --grad-accent: linear-gradient(120deg, #E85D3D 0%, #E9A319 100%);
  --grad-cool: linear-gradient(120deg, #12967D 0%, #E9A319 100%);
  --grad-ink: linear-gradient(120deg, #221B14 20%, #6B4B2E 100%);

  --font-display: 'Space Grotesk', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --shadow-sm: 0 1px 2px rgba(60, 42, 24, .06), 0 2px 8px rgba(60, 42, 24, .05);
  --shadow-md: 0 2px 6px rgba(60, 42, 24, .07), 0 12px 28px rgba(60, 42, 24, .10);
  --shadow-lg: 0 4px 10px rgba(60, 42, 24, .08), 0 24px 60px rgba(60, 42, 24, .14);
  --shadow-glow: 0 8px 30px rgba(232, 93, 61, .28);

  --container: 1180px;
  --header-h: 68px;
  --ease-spring: cubic-bezier(.22, 1.2, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; }
main { flex: 1 0 auto; }
.site-footer { margin-top: auto; }
h1, h2, h3, h4, h5 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 .6em; font-weight: 700; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); }
h2 { font-size: clamp(1.55rem, 3vw, 2.3rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
h4 { font-size: 1.1rem; }
p { margin: 0 0 1.1em; }
a { color: var(--teal-deep); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
ul, ol { padding-left: 1.35em; }
li { margin-bottom: .45em; }
strong { font-weight: 600; }
hr { border: none; border-top: 1px solid var(--line); margin: 2rem 0; }
blockquote {
  margin: 1.5rem 0; padding: 1rem 1.4rem;
  background: var(--amber-tint); border-left: 4px solid var(--amber);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--ink-soft);
  font-style: italic;
}
code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: .88em; background: var(--paper-deep);
  padding: .15em .45em; border-radius: 6px;
}
::selection { background: rgba(232, 93, 61, .25); }

/* Scrollbar */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--paper-deep); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; border: 3px solid var(--paper-deep); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

/* ---------- Accessibility ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--ink); color: #fff; padding: .7rem 1.2rem;
  border-radius: 0 0 var(--radius-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; border-radius: 4px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Scroll progress ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform-origin: 0 50%; transform: scaleX(0);
  background: var(--grad-accent); z-index: 210; pointer-events: none;
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 1.75rem); }
.section { padding-block: clamp(2.4rem, 6vw, 4.5rem); }
.section-tight { padding-block: clamp(1.6rem, 4vw, 2.6rem); }
.section-alt { background: var(--surface); border-block: 1px solid var(--line); }
.section-deep { background: var(--paper-deep); border-block: 1px solid var(--line); }
.grid-2 { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.grid-3 { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.grid-4 { display: grid; gap: 1.25rem; grid-template-columns: 1fr 1fr; }
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Article + TOC layout */
.with-toc { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1080px) {
  .with-toc { grid-template-columns: minmax(0, 1fr) 260px; }
  .with-toc > .toc-rail { position: sticky; top: calc(var(--header-h) + 20px); }
}
.prose { max-width: 76ch; }
.prose h2 { margin-top: 2.2em; scroll-margin-top: calc(var(--header-h) + 18px); }
.prose h3 { margin-top: 1.7em; scroll-margin-top: calc(var(--header-h) + 18px); }
.prose ul li::marker { color: var(--coral); }
.prose ol li::marker { color: var(--coral); font-weight: 600; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(251, 247, 240, .88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; color: var(--ink); letter-spacing: -.02em; }
.brand:hover { text-decoration: none; }
.brand svg { width: 34px; height: 34px; flex: none; }
.brand .brand-sub { color: var(--coral); }
.main-nav { display: none; margin-left: auto; }
@media (min-width: 1024px) { .main-nav { display: flex; align-items: center; gap: .35rem; } }
.nav-link {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .5rem .85rem; border-radius: 999px;
  color: var(--ink-soft); font-weight: 500; font-size: .96rem;
  transition: background .2s, color .2s;
}
.nav-link:hover, .nav-link[aria-current="page"] { background: var(--paper-deep); color: var(--ink); text-decoration: none; }
.nav-cta { margin-left: .5rem; }
.nav-item { position: relative; }
.nav-dropdown {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  min-width: 265px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: .55rem;
  opacity: 0; visibility: hidden; translate: 0 6px;
  transition: opacity .22s var(--ease-out), translate .22s var(--ease-out), visibility .22s;
  z-index: 50;
}
.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown { opacity: 1; visibility: visible; translate: 0 0; }
.nav-dropdown a {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .8rem; border-radius: var(--radius-sm);
  color: var(--ink-soft); font-size: .94rem; font-weight: 500;
}
.nav-dropdown a:hover { background: var(--coral-tint); color: var(--coral-deep); text-decoration: none; }
.nav-dropdown a svg { width: 17px; height: 17px; color: var(--coral); flex: none; }
/* v34 fix — iOS Safari: пустые flex-дети внутри <button> схлопываются в ноль
   (bars невидимы). Бургер больше не зависит от flex: полоски абсолютом,
   native appearance сброшен. */
.burger {
  position: relative;
  display: inline-block;
  margin-left: auto;
  width: 46px; height: 46px;
  padding: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
@media (min-width: 1024px) { .burger { display: none; } }
/* v34: на мобиле один auto-margin (у theme-toggle) — theme+burger сгруппированы справа */
@media (max-width: 1023.98px) { .burger { margin-left: .55rem; } }
.burger span {
  position: absolute; left: 11px; width: 24px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform .3s var(--ease-spring), opacity .2s;
}
.burger span:nth-child(1) { top: 14px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 28px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav {
  /* v34: max-height вместо grid 0fr→1fr — фракционные grid-переходы
     поддержаны не всеми Safari, max-height работает универсально */
  overflow: hidden; max-height: 0;
  transition: max-height .35s var(--ease-out);
  border-top: 1px solid transparent; background: var(--paper);
}
.mobile-nav.open { max-height: 82vh; overflow-y: auto; border-top-color: var(--line); }
.mobile-nav > div { overflow: hidden; }
.mobile-nav a { display: block; padding: .8rem 0; border-bottom: 1px solid var(--line); font-weight: 500; color: var(--ink); }
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav .mnav-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); padding-top: 1.2rem; border-bottom: none; font-weight: 700; }
@media (min-width: 1024px) { .mobile-nav { display: none; } }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink); color: #CDC2B3;
  padding: clamp(2.5rem, 6vw, 4rem) 0 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr 1fr; padding-bottom: 2.5rem; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-brand .brand { color: #fff; margin-bottom: .8rem; }
.footer-brand p { font-size: .93rem; color: #A79A88; max-width: 34ch; }
.footer-col h4 { color: #fff; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 1rem; }
.footer-col a { display: block; color: #CDC2B3; padding: .28rem 0; font-size: .94rem; }
.footer-col a:hover { color: #fff; text-decoration: none; translate: 2px 0; transition: translate .2s; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); padding: 1.2rem 0;
  display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; align-items: center; justify-content: space-between;
  font-size: .85rem; color: #A79A88;
}
.footer-bottom a { color: #CDC2B3; }
.footer-bottom nav { display: flex; gap: 1.3rem; flex-wrap: wrap; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .78rem 1.5rem; border-radius: 999px;
  font-family: var(--font-body); font-weight: 600; font-size: .98rem; line-height: 1.2;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  position: relative; overflow: hidden;
  transition: transform .2s var(--ease-spring), box-shadow .25s, background .2s, color .2s, border-color .2s;
  touch-action: manipulation;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-accent { background: var(--coral); color: #fff; box-shadow: var(--shadow-glow); }
.btn-accent:hover { background: var(--coral-deep); box-shadow: 0 12px 38px rgba(232, 93, 61, .38); }
.btn-teal { background: var(--teal); color: #fff; }
.btn-teal:hover { background: var(--teal-deep); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #3A2E20; }
.btn-lg { padding: 1rem 2.1rem; font-size: 1.06rem; }
.btn-sm { padding: .5rem 1rem; font-size: .88rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
/* Ripple (core.js) */
.ripple-ink { position: absolute; border-radius: 50%; background: rgba(255,255,255,.45); transform: scale(0); animation: ripple .65s ease-out forwards; pointer-events: none; }
.btn-ghost .ripple-ink, .btn:not([class*="btn-"]) .ripple-ink { background: rgba(34, 27, 20, .15); }
@keyframes ripple { to { transform: scale(3.2); opacity: 0; } }

/* ---------- Chips / badges ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .34rem .9rem; border-radius: 999px;
  font-size: .82rem; font-weight: 600;
  background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink-soft);
}
.chip-coral { background: var(--coral-tint); border-color: transparent; color: var(--coral-deep); }
.chip-teal { background: var(--teal-tint); border-color: transparent; color: var(--teal-deep); }
.chip-amber { background: var(--amber-tint); border-color: transparent; color: #9A6A0B; }
.chip-plum { background: var(--plum-tint); border-color: transparent; color: var(--plum); }
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.chip-btn { cursor: pointer; transition: transform .18s var(--ease-spring), background .2s, color .2s; }
.chip-btn:hover { transform: translateY(-2px); }
.chip-btn[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.6rem;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease-out), box-shadow .3s, border-color .3s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.card h3 { font-size: 1.18rem; }
.card h3 a { color: var(--ink); }
.card p { color: var(--ink-soft); font-size: .96rem; margin-bottom: .6em; }
.card .card-icon {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  margin-bottom: 1rem; background: var(--coral-tint); color: var(--coral-deep);
}
.card .card-icon svg { width: 22px; height: 22px; }
.card-teal .card-icon { background: var(--teal-tint); color: var(--teal-deep); }
.card-amber .card-icon { background: var(--amber-tint); color: #9A6A0B; }
.card-plum .card-icon { background: var(--plum-tint); color: var(--plum); }
.card-link { font-weight: 600; font-size: .92rem; display: inline-flex; align-items: center; gap: .35rem; }
.card-link::after { content: '→'; transition: translate .2s; }
.card:hover .card-link::after { translate: 4px 0; }

/* Spotlight hover card */
.card-spot { position: relative; overflow: hidden; }
.card-spot::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(232, 93, 61, .10), transparent 45%);
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.card-spot:hover::before { opacity: 1; }

/* Tilt card (core.js subtle tilt) */
.tilt { transform-style: preserve-3d; will-change: transform; }

/* Bento grid */
.bento { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(150px, auto); } .bento > .span-2 { grid-column: span 2; } .bento > .span-2r { grid-row: span 2; } }
.bento > .card { display: flex; flex-direction: column; justify-content: space-between; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(2.5rem, 6vw, 4rem);
}
.hero-glow { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; pointer-events: none; animation: blobFloat 14s ease-in-out infinite alternate; }
.hero-glow.g1 { width: 480px; height: 480px; background: radial-gradient(circle, rgba(232,93,61,.35), transparent 65%); top: -160px; right: -120px; }
.hero-glow.g2 { width: 420px; height: 420px; background: radial-gradient(circle, rgba(18,150,125,.28), transparent 65%); bottom: -180px; left: -140px; animation-delay: -6s; }
.hero-glow.g3 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(233,163,25,.30), transparent 65%); top: 30%; left: 42%; animation-delay: -3s; }
@keyframes blobFloat {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-28px, 24px) scale(1.06); }
  100% { transform: translate(20px, -16px) scale(.97); }
}
.hero-inner { position: relative; z-index: 1; }
.kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--coral-deep); background: var(--coral-tint);
  padding: .4rem 1rem; border-radius: 999px; margin-bottom: 1.2rem;
}
.kicker::before { content: '✦'; font-size: .85rem; }
.grad-text {
  background: var(--grad-accent);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero h1 { max-width: 21ch; }
.hero .lede { font-size: clamp(1.05rem, 1.8vw, 1.28rem); color: var(--ink-soft); max-width: 58ch; margin-bottom: 1.8rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2rem; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 1.6rem 2.6rem; margin-top: 1.2rem; }
.hero-stat b { display: block; font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--ink); }
.hero-stat b .count-target { font-variant-numeric: tabular-nums; }
.hero-stat span { font-size: .87rem; color: var(--ink-faint); }

/* Page hero (inner pages) */
.page-hero { padding: clamp(2.2rem, 5vw, 3.6rem) 0 clamp(1.4rem, 3vw, 2rem); position: relative; overflow: hidden; }
.page-hero h1 { max-width: 24ch; }
.page-hero .lede { font-size: 1.1rem; color: var(--ink-soft); max-width: 62ch; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { padding-top: 1.1rem; font-size: .86rem; color: var(--ink-faint); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; }
.breadcrumbs li { display: flex; align-items: center; gap: .3rem; margin: 0; }
.breadcrumbs li + li::before { content: '›'; color: var(--line-strong); }
.breadcrumbs a { color: var(--ink-faint); }
.breadcrumbs a:hover { color: var(--coral-deep); }
.breadcrumbs [aria-current="page"] { color: var(--ink-soft); font-weight: 500; }

/* ---------- TOC ---------- */
.toc-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.2rem 1.3rem; box-shadow: var(--shadow-sm);
  font-size: .92rem;
}
.toc-card h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); margin-bottom: .8rem; }
.toc-card ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc-card li { margin: 0; counter-increment: toc; }
.toc-card a {
  display: flex; gap: .55rem; padding: .38rem .5rem; border-radius: 8px;
  color: var(--ink-soft); border-left: 2px solid transparent;
}
.toc-card a::before { content: counter(toc, decimal-leading-zero); color: var(--line-strong); font-weight: 600; font-variant-numeric: tabular-nums; }
.toc-card a:hover { background: var(--paper-deep); text-decoration: none; color: var(--ink); }
.toc-card a.active { color: var(--coral-deep); border-left-color: var(--coral); background: var(--coral-tint); }
.toc-card a.active::before { color: var(--coral); }

/* ---------- Forms ---------- */
.field { margin-bottom: 1.05rem; }
.field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .4rem; }
.field .hint { font-size: .82rem; color: var(--ink-faint); margin-top: .3rem; }
.input, .select, .textarea {
  width: 100%; padding: .78rem 1rem;
  font-family: var(--font-body); font-size: .98rem; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  transition: border-color .2s, box-shadow .2s;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--coral);
  box-shadow: 0 0 0 4px rgba(232, 93, 61, .14);
}
.textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235E5344' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem; }
.input-group { display: grid; gap: .9rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .input-group.c2 { grid-template-columns: 1fr 1fr; } .input-group.c3 { grid-template-columns: repeat(3, 1fr); } }
input[type="range"] { accent-color: var(--coral); width: 100%; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--teal); width: 1.05rem; height: 1.05rem; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; margin: 0 0 1.1rem; }
legend { font-weight: 700; font-family: var(--font-display); font-size: .95rem; padding: 0 .5rem; }

/* ---------- Tool components ---------- */
.tool-shell {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-md);
  overflow: hidden; margin: 1.5rem 0 2.2rem;
}
.tool-head {
  padding: 1.2rem 1.6rem; border-bottom: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem;
  background: linear-gradient(180deg, var(--surface), var(--paper));
}
.tool-head h2 { font-size: 1.15rem; margin: 0; }
.tool-head .tool-badge { margin-left: auto; }
.tool-body { padding: 1.6rem; }
.tool-body > :last-child { margin-bottom: 0; }

.stat-tiles { display: grid; gap: .9rem; grid-template-columns: repeat(2, 1fr); margin: 1.2rem 0; }
@media (min-width: 700px) { .stat-tiles { grid-template-columns: repeat(4, 1fr); } }
.stat-tile {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .95rem 1.05rem; text-align: center;
  transition: transform .2s var(--ease-spring);
}
.stat-tile:hover { transform: translateY(-3px); }
.stat-tile b { display: block; font-family: var(--font-display); font-size: clamp(1.35rem, 2.6vw, 1.8rem); font-variant-numeric: tabular-nums; color: var(--ink); }
.stat-tile span { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); font-weight: 600; }

.result-card {
  border-radius: var(--radius-lg); padding: 1.4rem 1.5rem; margin: 1.2rem 0;
  background: var(--teal-tint); border: 1px solid rgba(18, 150, 125, .25);
  animation: popIn .45s var(--ease-spring);
}
.result-card.warm { background: var(--coral-tint); border-color: rgba(232, 93, 61, .25); }
.result-card.amber { background: var(--amber-tint); border-color: rgba(233, 163, 25, .3); }
@keyframes popIn { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } }

.meter { height: 10px; background: var(--paper-deep); border-radius: 999px; overflow: hidden; margin: .5rem 0 .3rem; }
.meter > i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--grad-accent); transition: width .7s var(--ease-out); }
.meter > i.ok { background: var(--teal); }
.meter > i.warn { background: var(--amber); }
.meter > i.bad { background: var(--coral); }
.meter-label { display: flex; justify-content: space-between; font-size: .84rem; color: var(--ink-soft); margin-bottom: .2rem; }

/* SWOT-style matrix */
.matrix { display: grid; gap: .9rem; grid-template-columns: 1fr; }
@media (min-width: 680px) { .matrix { grid-template-columns: 1fr 1fr; } }
.matrix-cell { border-radius: var(--radius); padding: 1.1rem; border: 1.5px solid; min-height: 150px; }
.matrix-cell h3 { font-size: 1rem; margin-bottom: .7rem; display: flex; align-items: center; gap: .5rem; }
.matrix-cell[data-cell="S"] { background: var(--teal-tint); border-color: var(--teal); }
.matrix-cell[data-cell="S"] h3 { color: var(--teal-deep); }
.matrix-cell[data-cell="W"] { background: var(--coral-tint); border-color: var(--coral); }
.matrix-cell[data-cell="W"] h3 { color: var(--coral-deep); }
.matrix-cell[data-cell="O"] { background: var(--amber-tint); border-color: var(--amber); }
.matrix-cell[data-cell="O"] h3 { color: #9A6A0B; }
.matrix-cell[data-cell="T"] { background: var(--plum-tint); border-color: var(--plum); }
.matrix-cell[data-cell="T"] h3 { color: var(--plum); }
.matrix-cell ul { list-style: none; margin: 0; padding: 0; }
.matrix-cell li {
  display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem;
  background: rgba(255,255,255,.75); border-radius: 8px; padding: .38rem .6rem; margin-bottom: .4rem;
  font-size: .9rem; animation: popIn .3s var(--ease-spring);
}
.matrix-cell li button { flex: none; border: none; background: none; cursor: pointer; color: var(--ink-faint); font-size: 1rem; line-height: 1; padding: 2px; }
.matrix-cell li button:hover { color: var(--coral-deep); }

/* Dynamic row editors (citations, GPA, etc.) */
.row-list { display: grid; gap: .7rem; margin: 1rem 0; }
.row-item {
  display: grid; gap: .6rem; grid-template-columns: 1fr;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .85rem; align-items: end;
  animation: slideUp .35s var(--ease-out);
}
@media (min-width: 700px) { .row-item { grid-template-columns: 2.2fr 1fr 1fr auto; } }
.row-item .btn-remove {
  border: none; background: none; cursor: pointer; color: var(--ink-faint);
  width: 40px; height: 40px; border-radius: 10px; font-size: 1.1rem;
  transition: background .2s, color .2s;
}
.row-item .btn-remove:hover { background: var(--coral-tint); color: var(--coral-deep); }
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.citation-block {
  background: var(--paper); border: 1px dashed var(--line-strong);
  border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: .8rem;
  font-size: .95rem; line-height: 1.65; position: relative;
  animation: popIn .35s var(--ease-spring);
}
.citation-block .cb-meta { font-size: .78rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .07em; margin-bottom: .3rem; font-weight: 700; }
.citation-block i { font-style: italic; }

/* Highlighted text layers */
.text-highlight { background: var(--amber-tint); border-bottom: 2px solid var(--amber); padding: 0 1px; border-radius: 3px; }
.text-highlight.long-sentence { background: var(--coral-tint); border-bottom-color: var(--coral); }
.text-highlight.passive { background: var(--plum-tint); border-bottom-color: var(--plum); }
.text-highlight.adverb { background: var(--teal-tint); border-bottom-color: var(--teal); }
.highlight-legend { display: flex; flex-wrap: wrap; gap: .8rem; font-size: .83rem; color: var(--ink-soft); margin: .8rem 0; }
.highlight-legend span::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: .4rem; vertical-align: -1px; }
.highlight-legend .lg-amber::before { background: var(--amber); }
.highlight-legend .lg-coral::before { background: var(--coral); }
.highlight-legend .lg-plum::before { background: var(--plum); }
.highlight-legend .lg-teal::before { background: var(--teal); }

/* Keyword density bars */
.kd-row { display: grid; grid-template-columns: minmax(90px, 1.2fr) 2fr auto; gap: .8rem; align-items: center; font-size: .9rem; margin-bottom: .55rem; animation: slideUp .3s var(--ease-out); }
.kd-row .kw { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-row .pct { color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* ---------- Accordion (details/summary) ---------- */
.accordion { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.accordion + .accordion { margin-top: .8rem; }
.accordion summary {
  display: flex; align-items: center; gap: .8rem; cursor: pointer;
  padding: 1.05rem 1.3rem; font-weight: 600; font-family: var(--font-display);
  list-style: none; transition: background .2s;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { background: var(--paper); }
.accordion summary .acc-icon {
  margin-left: auto; flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--paper-deep);
  transition: transform .3s var(--ease-spring), background .2s;
  font-size: .9rem; color: var(--ink-soft);
}
.accordion[open] summary .acc-icon { transform: rotate(45deg); background: var(--coral); color: #fff; }
.accordion .acc-body { padding: 0 1.3rem 1.2rem; color: var(--ink-soft); animation: accIn .35s var(--ease-out); }
@keyframes accIn { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }

/* ---------- Tabs ---------- */
.tabs { margin: 1.4rem 0; }
.tab-list { display: flex; flex-wrap: wrap; gap: .45rem; border-bottom: 2px solid var(--line); padding-bottom: .55rem; }
.tab-btn {
  padding: .5rem 1.05rem; border-radius: 999px; border: 1px solid transparent;
  background: none; font: inherit; font-weight: 600; font-size: .92rem;
  color: var(--ink-soft); cursor: pointer; transition: all .2s;
}
.tab-btn:hover { background: var(--paper-deep); }
.tab-btn[aria-selected="true"] { background: var(--ink); color: #fff; }
.tab-panel { display: none; padding-top: 1rem; animation: accIn .3s var(--ease-out); }
.tab-panel.active { display: block; }

/* ---------- Checklist ---------- */
.checklist { list-style: none; padding: 0; margin: 1rem 0; counter-reset: chk; }
.checklist li {
  display: flex; align-items: flex-start; gap: .75rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: .55rem;
  cursor: pointer; transition: border-color .2s, background .2s, opacity .2s;
  counter-increment: chk;
}
.checklist li:hover { border-color: var(--teal); }
.checklist li::before {
  content: '✓'; flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; font-size: .8rem; font-weight: 700;
  background: var(--paper-deep); color: transparent; transition: all .25s var(--ease-spring);
}
.checklist li.done { background: var(--teal-tint); border-color: rgba(18,150,125,.35); }
.checklist li.done::before { background: var(--teal); color: #fff; transform: scale(1.08); }
.checklist li.done .chk-text { text-decoration: line-through; text-decoration-color: rgba(18,150,125,.5); color: var(--ink-faint); }
.check-progress { display: flex; align-items: center; gap: .9rem; margin: 1rem 0; font-size: .9rem; color: var(--ink-soft); }

/* ---------- Quiz ---------- */
.quiz-q { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.3rem 1.4rem; margin-bottom: .9rem; }
.quiz-q .q-title { font-weight: 700; font-family: var(--font-display); margin-bottom: .8rem; }
.quiz-opt {
  display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
  padding: .68rem .95rem; border-radius: var(--radius-sm);
  border: 1.5px solid var(--line); background: var(--paper);
  font: inherit; font-size: .95rem; cursor: pointer; margin-bottom: .45rem;
  transition: all .2s;
}
.quiz-opt:hover { border-color: var(--teal); }
.quiz-opt.correct { border-color: var(--teal); background: var(--teal-tint); }
.quiz-opt.wrong { border-color: var(--coral); background: var(--coral-tint); }
.quiz-opt .q-letter { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--paper-deep); display: grid; place-items: center; font-size: .75rem; font-weight: 700; color: var(--ink-soft); }
.quiz-result { text-align: center; padding: 1.4rem; }
.quiz-result .score-ring { --p: 0; width: 130px; height: 130px; margin: 0 auto 1rem; border-radius: 50%; background: conic-gradient(var(--teal) calc(var(--p) * 1%), var(--paper-deep) 0); display: grid; place-items: center; transition: --p 1s; }
.quiz-result .score-ring > div { width: 104px; height: 104px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; }

/* ---------- Flip cards ---------- */
.flip-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .flip-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .flip-grid { grid-template-columns: repeat(3, 1fr); } }
.flip-card { perspective: 1100px; min-height: 190px; cursor: pointer; }
.flip-inner { position: relative; width: 100%; height: 100%; min-height: 190px; transform-style: preserve-3d; transition: transform .65s var(--ease-spring); }
.flip-card.flipped .flip-inner, .flip-card:hover .flip-inner { transform: rotateY(180deg); }
.flip-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: var(--radius-lg); padding: 1.3rem; display: flex; flex-direction: column; justify-content: center;
  border: 1px solid var(--line);
}
.flip-front { background: var(--surface); align-items: flex-start; }
.flip-front .q-mark { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--coral); margin-bottom: .4rem; }
.flip-back { background: var(--ink); color: #EDE5D8; transform: rotateY(180deg); font-size: .93rem; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); margin: 1.4rem 0; box-shadow: var(--shadow-sm); }
table.tbl { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 560px; }
.tbl th { text-align: left; font-family: var(--font-display); font-size: .85rem; letter-spacing: .03em; background: var(--paper-deep); padding: .85rem 1.1rem; border-bottom: 1px solid var(--line-strong); }
.tbl td { padding: .8rem 1.1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr { transition: background .15s; }
.tbl tbody tr:hover { background: var(--amber-tint); }

/* ---------- FAQ section ---------- */
.faq-section h2 { text-align: center; }
.faq-wrap { max-width: 780px; margin: 1.6rem auto 0; }

/* ---------- CTA / affiliate / banners ---------- */
.help-cta {
  background: linear-gradient(120deg, #2A2119, #4A3620 55%, #7A5226);
  color: #F4EBDD; border-radius: var(--radius-xl);
  padding: clamp(1.6rem, 4vw, 2.6rem); margin: 2.4rem 0;
  position: relative; overflow: hidden;
}
.help-cta::before {
  content: ''; position: absolute; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,93,61,.4), transparent 70%);
  top: -140px; right: -80px; filter: blur(30px); animation: blobFloat 12s ease-in-out infinite alternate;
}
.help-cta h2 { color: #fff; position: relative; }
.help-cta p { color: #D8CBBA; max-width: 60ch; position: relative; }
.help-cta .btn { position: relative; }
.affiliate-slot { margin-top: 1.2rem; min-height: 10px; }
.affiliate-slot[data-status="loading"] { min-height: 420px; display: grid; place-items: center; }
.affiliate-slot[data-status="loading"]::after {
  content: 'Loading secure quote form…'; font-size: .9rem; color: #D8CBBA;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .45; } }

.ad-slot { margin: 1.4rem 0; text-align: center; }
.ad-slot:empty { display: none; }

/* ---------- Toast ---------- */
.toast-zone { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 260; display: grid; gap: .5rem; width: min(92vw, 420px); }
.toast {
  background: var(--ink); color: #fff; padding: .85rem 1.2rem;
  border-radius: var(--radius); font-size: .93rem; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: .6rem;
  animation: toastIn .4s var(--ease-spring);
}
.toast.teal { background: var(--teal-deep); }
.toast.coral { background: var(--coral-deep); }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.toast.hide { opacity: 0; transform: translateY(10px); transition: all .3s; }

/* ---------- Back to top ---------- */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 180;
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); cursor: pointer;
  box-shadow: var(--shadow-md); display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: all .3s var(--ease-out);
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--ink); color: #fff; transform: translateY(-3px); }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; border-block: 1px solid var(--line); background: var(--surface); padding: .85rem 0; }
.marquee-track { display: flex; gap: 2.4rem; width: max-content; animation: marquee 30s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--ink-soft); white-space: nowrap; }
.marquee-track span::before { content: '✳'; color: var(--coral); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Reveal on scroll ---------- */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: var(--d, 0s); will-change: opacity, transform; }
[data-reveal].revealed { opacity: 1; transform: none; }
[data-reveal="left"] { transform: translateX(-30px); }
[data-reveal="right"] { transform: translateX(30px); }
[data-reveal="zoom"] { transform: scale(.94); }

/* ---------- Typing effect ---------- */
.type-cursor { display: inline-block; width: 2px; height: 1em; background: var(--coral); margin-left: 2px; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Copy code block ---------- */
.copy-wrap { position: relative; }
.copy-btn {
  position: absolute; top: .6rem; right: .6rem;
  border: 1px solid var(--line-strong); background: var(--surface);
  border-radius: 8px; padding: .35rem .7rem; font-size: .78rem; font-weight: 600;
  color: var(--ink-soft); cursor: pointer; transition: all .2s;
}
.copy-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.copy-btn.copied { background: var(--teal); border-color: var(--teal); color: #fff; }

/* ---------- Misc ---------- */
.tag-date { font-size: .8rem; color: var(--ink-faint); }
.author-note { display: flex; align-items: center; gap: .8rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; margin: 1.4rem 0; font-size: .88rem; color: var(--ink-soft); }
.author-note .an-avatar { width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--grad-accent); display: grid; place-items: center; color: #fff; font-weight: 700; font-family: var(--font-display); }
.num-badge { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--ink); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: .95rem; flex: none; }
.step-card { display: flex; gap: 1rem; align-items: flex-start; }
.divider-label { display: flex; align-items: center; gap: 1rem; color: var(--ink-faint); font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 2rem 0 1rem; }
.divider-label::before, .divider-label::after { content: ''; height: 1px; flex: 1; background: var(--line); }
.empty-hint { border: 1.5px dashed var(--line-strong); border-radius: var(--radius); padding: 1.4rem; text-align: center; color: var(--ink-faint); font-size: .93rem; }
.note-box { background: var(--teal-tint); border: 1px solid rgba(18,150,125,.25); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1.3rem 0; font-size: .94rem; }
.note-box.warn { background: var(--amber-tint); border-color: rgba(233,163,25,.35); }
.note-box b:first-child { display: inline-flex; align-items: center; gap: .4rem; }

/* Print */
@media print {
  .site-header, .site-footer, .to-top, .scroll-progress, .help-cta, .ad-slot, .toc-rail, .toast-zone { display: none !important; }
  body { background: #fff; }
  .card, .tool-shell { box-shadow: none; border-color: #ddd; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- v2 additions (wave 2): quick answer, timeline, badges, glossary ---------- */
.quick-answer {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 5px solid var(--teal);
  border-radius: var(--radius);
  padding: 1.15rem 1.35rem;
  margin: 1.3rem 0;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.quick-answer::before {
  content: 'QUICK ANSWER';
  position: absolute; top: -10px; left: 1.1rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  background: var(--teal); color: #fff;
  padding: .18rem .6rem; border-radius: 999px;
}
.quick-answer p { margin: 0; font-size: 1.02rem; }
.quick-answer p + p { margin-top: .6em; }

.timeline { list-style: none; margin: 1.6rem 0; padding: 0; position: relative; }
.timeline::before {
  content: ''; position: absolute; left: 18px; top: 8px; bottom: 8px;
  width: 2px; background: linear-gradient(180deg, var(--coral), var(--amber), var(--teal));
  border-radius: 2px;
}
.timeline li {
  position: relative; padding: 0 0 1.4rem 3.2rem; margin: 0;
}
.timeline li::before {
  content: attr(data-step);
  position: absolute; left: 0; top: 0;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--coral);
  color: var(--coral-deep); font-family: var(--font-display);
  font-weight: 700; font-size: .95rem;
  display: grid; place-items: center;
  transition: transform .25s var(--ease-spring), background .2s, color .2s;
}
.timeline li:hover::before { transform: scale(1.12); background: var(--coral); color: #fff; }
.timeline li h3 { margin: .2rem 0 .4rem; font-size: 1.1rem; }
.timeline li p { margin: 0; color: var(--ink-soft); font-size: .96rem; }

.badge-new {
  display: inline-flex; align-items: center;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  background: var(--teal); color: #fff;
  padding: .16rem .55rem; border-radius: 999px;
  vertical-align: middle; margin-left: .45rem;
  text-transform: uppercase;
}

.glossary-grid { display: grid; gap: .8rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .glossary-grid { grid-template-columns: 1fr 1fr; } }
.term-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 0; overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.term-card:hover { border-color: var(--teal); box-shadow: var(--shadow-sm); }
.term-card summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .85rem 1.1rem; font-weight: 600; font-family: var(--font-display);
  font-size: .98rem;
}
.term-card summary::-webkit-details-marker { display: none; }
.term-card summary::after { content: '+'; color: var(--coral); font-size: 1.15rem; transition: transform .25s var(--ease-spring); }
.term-card[open] summary::after { transform: rotate(45deg); }
.term-card .term-body { padding: 0 1.1rem 1rem; color: var(--ink-soft); font-size: .93rem; animation: accIn .3s var(--ease-out); }

.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1.2rem 0; }
.filter-bar .input { max-width: 260px; }

.result-score-ring { --p: 0; }
@media print {
  .filter-bar, .badge-new { display: none !important; }
}

/* ---------- v3 polish (cron R11): print depth, autofill, zebra, smooth details ---------- */
/* Zebra rows on long comparison tables - easier skimming, matches hover tint */
.tbl tbody tr:nth-child(even) { background: rgba(217, 204, 180, .12); }
.tbl tbody tr:hover { background: var(--amber-tint); position: relative; }

/* Autofill keeps the warm palette instead of browser blue */
.input:-webkit-autofill, .textarea:-webkit-autofill, .select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 40px #fff inset;
  -webkit-text-fill-color: var(--ink);
  transition: background-color 9999s ease-out;
}
.input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 40px #fff inset, 0 0 0 2px var(--teal); }

/* Print: expand every accordion + show link targets, keep the page useful on paper */
@media print {
  details:not([open]) > *:not(summary) { display: block !important; }
  details > summary { list-style: none; }
  details > summary::after { content: none !important; }
  .tool-shell, .copy-wrap, .chip-row, .quiz-q, .flip-grid, .data-poll, [data-poll], .btn { display: none !important; }
  .prose a::after { content: " (" attr(href) ")"; font-size: .8em; color: #666; word-break: break-all; }
  .prose a[href^="#"]::after { content: none; }
  h1, h2, h3 { page-break-after: avoid; }
  table, .note-box, .stat-tiles, .result-card { page-break-inside: avoid; }
}

/* Subtle internal-anchor transition so jump-to-section lands softly */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-padding-top: calc(var(--header-h, 64px) + 14px); }
}

/* ---------- v4 polish (cron R12): motion details, tocs, link affordances ---------- */
/* Card icon micro-motion: icons lean forward as the card lifts */
.card:hover .card-icon { transform: rotate(-6deg) scale(1.08); }
.card-icon { transition: transform .35s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)); }

/* Prose links: softer underline with brand tint on hover, keeps body text calm */
.prose a { text-underline-offset: 3px; text-decoration-thickness: 1.5px; transition: color .18s, text-decoration-color .18s; }
.prose a:hover { text-decoration-color: var(--coral); }

/* Marquee edges fade out instead of hard-clipping */
.marquee { --fade: 48px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent); }

/* TOC card active entry: warm accent bar, matches scrollspy state */
.toc-card a[aria-current="true"], .toc-card a.active { border-left: 3px solid var(--coral); padding-left: .55rem; transition: padding .2s, border-color .2s; }

/* Summary rows invite taps: gentle chevron shift on hover (details accordions) */
details:not(.term-card):not(.flip-card) > summary:hover { color: var(--ink); }
details:not(.term-card):not(.flip-card) > summary .acc-icon { transition: translate .25s var(--ease-out); }
details:not(.term-card):not(.flip-card)[open] > summary .acc-icon { translate: 0 2px; }

/* Stat tiles: count-up numerals never jitter (tabular figures everywhere) */
.stat-tile b, .result-card b, .hero-stat b { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- v5 polish (cron R13): press states, focus-within tools, textures ---------- */
/* Chip buttons get a tactile press, matching .btn behavior */
.chip-btn:active { transform: translateY(0) scale(.95); }

/* Tool shells lift gently when the user is working inside them */
.tool-shell { transition: border-color .25s, box-shadow .25s; }
.tool-shell:focus-within { border-color: rgba(232, 93, 61, .45); box-shadow: 0 6px 22px rgba(232, 93, 61, .09); }

/* Text and choice inputs inside tools: warm border on focus (mouse focus included) */
.tool-shell textarea:focus, .tool-shell input:focus, .tool-shell select:focus { border-color: var(--coral); outline: none; box-shadow: 0 0 0 3px rgba(232, 93, 61, .12); }
.tool-shell textarea { scrollbar-width: thin; }

/* Flip-card backs: faint diagonal weave so the dark face reads as a material, not a void */
.flip-back { background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .045) 0 10px, transparent 10px 20px); background-clip: padding-box; }

/* Accordions: open question header gets a warm tint so the state is visible at a glance */
details:not(.term-card):not(.flip-card)[open] > summary { background: var(--amber-tint); border-radius: 10px; transition: background .25s; }

/* Empty-state hints pulse once when they appear (guards read as intentional, not broken) */
@keyframes hint-pulse { 0%, 100% { border-color: var(--line-strong); } 45% { border-color: rgba(232, 93, 61, .55); } }
.empty-hint { animation: hint-pulse .7s ease 1 both; }

/* Micro-typography: hero numerals tighten up at display sizes */
.hero-stat b { letter-spacing: -.015em; }

/* Print extras: marquees and glows never belong on paper */
@media print {
  .marquee, .hero-glow { display: none !important; }
  .tool-shell, .quiz-opt, .flip-card { break-inside: avoid; }
}

/* ---------- v6 (cron R14): reading time, recent strip, anchor links, tactile details ---------- */
/* Reading-time chip sits quietly beside the date stamp */
.tag-read { font-size: .8rem; color: var(--ink-faint); opacity: .85; }

/* Recently viewed strip: warm shelf that rises in above the filter row */
.recent-strip { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .9rem; padding: .8rem 2.2rem .8rem 1rem; margin: 0 0 1.1rem; background: var(--amber-tint); border: 1px solid var(--line); border-radius: 12px; animation: popIn .45s var(--ease-out, ease-out) both; }
.recent-title { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--coral); margin: 0; }
.recent-row { display: flex; flex-wrap: wrap; gap: .35rem .55rem; min-width: 0; }
.recent-link { display: inline-flex; align-items: center; gap: .45rem; max-width: 260px; font-size: .86rem; font-weight: 600; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .3rem .85rem; text-decoration: none; transition: transform .18s var(--ease-out, ease-out), border-color .18s, box-shadow .18s; }
.recent-link span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-link:hover { transform: translateY(-2px); border-color: var(--coral); box-shadow: 0 4px 14px rgba(232, 93, 61, .14); }
.recent-dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--coral), var(--amber)); flex: none; }
.recent-hide { position: absolute; top: .4rem; right: .4rem; width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-faint); font-size: 1rem; line-height: 1; cursor: pointer; transition: background .18s, color .18s; }
.recent-hide:hover { background: rgba(232, 93, 61, .12); color: var(--coral); }
.recent-hide:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

/* GitHub-style section anchors: hidden until the heading is hovered or focused */
.h-anchor { margin-left: .5rem; font-size: .72em; font-weight: 600; color: var(--coral); text-decoration: none; opacity: 0; transition: opacity .18s, transform .18s; display: inline-block; transform: translateY(-1px); }
article.prose h2:hover .h-anchor, article.prose h3:hover .h-anchor, .h-anchor:focus-visible { opacity: 1; }
.h-anchor:hover { transform: translateY(-1px) scale(1.15); }
.h-anchor:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; border-radius: 4px; }

/* Guide cards: thumbnail images get a soft zoom on hover for tactile depth */
.guide-card .card-icon { transition: transform .35s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)); }

/* Result cards: warm left rule echoes the brand without shouting */
.result-card { border-left: 3px solid var(--coral); }

/* Term tables: even rows get a whisper of warm tint for scanability */
table.tbl tbody tr:nth-child(even) { background: rgba(233, 163, 25, .05); }

@media print {
  .recent-strip, .h-anchor, .tag-read { display: none !important; }
}

/* ---------- v7 (cron R15): print-guide button, meta-row rhythm, result-card entrance ---------- */
/* The hero meta row now carries date · read time · print; keep it calm and wrappable */
.print-guide { display: inline-flex; align-items: center; gap: .35rem; margin-left: .75rem; padding: .18rem .7rem; font-size: .74rem; font-weight: 600; color: var(--ink-faint); background: #fff; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; transition: color .18s, border-color .18s, transform .18s, box-shadow .18s; }
.print-guide::before { content: ""; width: 9px; height: 9px; border-radius: 2px; border: 1.5px solid currentColor; box-shadow: inset 0 -3px 0 currentColor; opacity: .75; }
.print-guide:hover { color: var(--coral); border-color: var(--coral); transform: translateY(-1px); box-shadow: 0 3px 10px rgba(232, 93, 61, .12); }
.print-guide:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.print-guide:active { transform: translateY(0) scale(.97); }

/* Reading chip nudges down to share the baseline with the date stamp */
.tag-read { vertical-align: middle; }

/* Result cards slide in softly wherever a tool renders one (JS-appended nodes re-run it — reads as feedback) */
.result-card { animation: popIn .35s var(--ease-out, ease-out) both; }
@media (prefers-reduced-motion: reduce) { .result-card { animation: none; } }

/* Recent pills: keyboard ring to match mouse hover */
.recent-link:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; border-color: var(--coral); }

/* Flip-card front: faint index dot so the count of sins/flips reads at a glance */
.flip-card .flip-face:first-child::after { content: ""; position: absolute; left: 14px; bottom: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); opacity: .35; }

/* Table caption row (if authors add one) gets the warm label treatment */
table.tbl caption { caption-side: top; text-align: left; font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); padding-bottom: .5rem; }

@media print {
  .print-guide { display: none !important; }
}

/* ---------- v8 (cron R16): copy-outline button, hub read-badges, meta-row rhythm ---------- */
/* Copy-outline shares the print pill's shape so the meta row reads as one control group */
.copy-outline { display: inline-flex; align-items: center; gap: .35rem; margin-left: .5rem; padding: .18rem .7rem; font-size: .74rem; font-weight: 600; color: var(--ink-faint); background: #fff; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; transition: color .18s, border-color .18s, transform .18s, box-shadow .18s; }
.copy-outline::before { content: ""; width: 9px; height: 9px; border-radius: 2px; border: 1.5px solid currentColor; border-top-width: 3px; opacity: .75; }
.copy-outline:hover { color: var(--teal); border-color: var(--teal); transform: translateY(-1px); box-shadow: 0 3px 10px rgba(18, 150, 125, .12); }
.copy-outline:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.copy-outline:active { transform: translateY(0) scale(.97); }
.copy-outline.copied { color: var(--teal); border-color: var(--teal); }

/* Hub: cards the reader already opened get a quiet teal "Read" chip */
.visited-chip { display: inline-block; margin-left: .45rem; padding: .1rem .5rem; font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--teal); border-radius: 999px; vertical-align: middle; }
.guide-card.is-visited { border-color: rgba(18, 150, 125, .28); }
.guide-card.is-visited .card-icon { opacity: .82; }

/* Guide-card titles never push the Read chip to a lonely second line */
.guide-card h3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

@media print {
  .copy-outline { display: none !important; }
}

/* ============================================================
   v9 — CRON-R17 (2026-10-10): "Midnight Ink" dark theme +
   theme toggle + per-section reading times + text-size controls
   + component polish. Append-only.
   ============================================================ */

/* ---------- dark theme tokens (warm charcoal, never blue) ---------- */
[data-theme="dark"] {
  --paper: #191410;
  --paper-deep: #120E0B;
  --surface: #211A15;
  --ink: #F1E8DB;
  --ink-soft: #C7B7A3;
  --ink-faint: #9A8B78;
  --line: #352B21;
  --line-strong: #4E4030;

  --coral: #F27B57;
  --coral-deep: #FF9273;
  --coral-tint: rgba(232, 93, 61, .16);
  --teal: #3BBFA0;
  --teal-deep: #66D6BC;
  --teal-tint: rgba(18, 150, 125, .18);
  --amber: #F0B24A;
  --amber-tint: rgba(233, 163, 25, .16);
  --plum: #C77FBE;
  --plum-tint: rgba(141, 78, 133, .24);

  --grad-accent: linear-gradient(120deg, #F27B57 0%, #F0B24A 100%);
  --grad-cool: linear-gradient(120deg, #3BBFA0 0%, #F0B24A 100%);
  --grad-ink: linear-gradient(120deg, #F1E8DB 15%, #D9A05B 100%);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40), 0 2px 8px rgba(0, 0, 0, .35);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, .45), 0 12px 28px rgba(0, 0, 0, .45);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, .50), 0 24px 60px rgba(0, 0, 0, .55);
  --shadow-glow: 0 8px 30px rgba(242, 123, 87, .32);
  color-scheme: dark;
}

/* warm selection tint in dark too (base rule is a light rgba) */
[data-theme="dark"] ::selection { background: rgba(242, 123, 87, .32); }

/* ink-faced components keep their contrast when --ink flips light */
[data-theme="dark"] .skip-link,
[data-theme="dark"] .toast,
[data-theme="dark"] .btn-ink,
[data-theme="dark"] .chip-btn[aria-pressed="true"],
[data-theme="dark"] .tab-btn[aria-selected="true"],
[data-theme="dark"] .num-badge,
[data-theme="dark"] .flip-back,
[data-theme="dark"] .to-top:hover,
[data-theme="dark"] .copy-btn:hover,
[data-theme="dark"] .font-controls button[aria-pressed="true"] { color: #191410; }
[data-theme="dark"] .btn-ink:hover { background: #FBF7F0; }
[data-theme="dark"] .site-footer { background: #0F0C09; }

/* amber deep-text becomes light amber on dark tints */
[data-theme="dark"] .chip-amber,
[data-theme="dark"] .card-amber .card-icon,
[data-theme="dark"] .matrix-cell[data-cell="O"] h3 { color: #F0B24A; }

/* printing always prints the light theme */
@media print {
  html[data-theme="dark"] { background: #fff; }
  html[data-theme="dark"] body { background: #fff; color: #000; }
}

/* ---------- theme toggle (header) ---------- */
.theme-toggle {
  position: relative; width: 42px; height: 42px; flex: none;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink); cursor: pointer;
  display: grid; place-items: center; margin-left: auto;
  transition: border-color .25s var(--ease-out), transform .25s var(--ease-out), background .25s;
}
.theme-toggle svg { width: 19px; height: 19px; grid-area: 1 / 1; transition: opacity .3s var(--ease-out), transform .45s var(--ease-spring); }
.theme-toggle .icon-moon { opacity: 0; transform: rotate(-60deg) scale(.6); }
.theme-toggle:hover { border-color: var(--coral); color: var(--coral-deep); transform: translateY(-1px); }
.theme-toggle:active { transform: scale(.94); }
[data-theme="dark"] .theme-toggle { background: var(--paper-deep); }
[data-theme="dark"] .theme-toggle .icon-moon { opacity: 1; transform: none; }
[data-theme="dark"] .theme-toggle .icon-sun { opacity: 0; transform: rotate(60deg) scale(.6); }
@media (min-width: 1024px) { .theme-toggle { margin-left: .4rem; } }

/* ---------- per-section reading times in the TOC ---------- */
.toc-time {
  margin-left: auto; flex: none; padding-left: .5rem;
  font-size: .72rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--ink-faint); letter-spacing: .01em;
  transition: color .2s;
}
.toc-card a:hover .toc-time, .toc-card a.active .toc-time { color: var(--coral-deep); }

/* ---------- text-size controls (article chip row) ---------- */
.font-controls {
  display: inline-flex; align-items: center; overflow: hidden;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
}
.font-controls button {
  border: 0; background: transparent; cursor: pointer; min-width: 36px;
  padding: .34rem .55rem; font-family: var(--font-display); font-weight: 600;
  font-size: .78rem; color: var(--ink-soft); transition: background .2s, color .2s;
}
.font-controls button + button { border-left: 1px solid var(--line); }
.font-controls button:hover { background: var(--paper-deep); color: var(--ink); }
.font-controls button:active { transform: scale(.95); }
.font-controls button[aria-pressed="true"] { background: var(--ink); color: #fff; }
html[data-font="sm"] article.prose { font-size: .98rem; }
html[data-font="lg"] article.prose { font-size: 1.16rem; }

/* ---------- polish details ---------- */
/* TOC links get a nudge on hover, matching the card language */
.toc-card a { transition: background .2s, color .2s, border-color .2s, translate .2s var(--ease-out); }
.toc-card a:hover { translate: 2px 0; }

/* guide-card icons breathe on hover (hub shelves) */
.guide-card .card-icon { transition: transform .35s var(--ease-spring); }
.guide-card:hover .card-icon { transform: scale(1.08) rotate(-4deg); }

/* flip-card fronts lift on focus for keyboard users */
.flip-card:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }

/* quiz options get a press state to match chip-btn */
.quiz-opt { transition: border-color .2s, background .2s, transform .15s; }
.quiz-opt:active { transform: scale(.985); }

/* dark-mode table hover reads calmer */
[data-theme="dark"] .tbl tbody tr:hover { background: rgba(233, 163, 25, .10); }
@media (prefers-reduced-motion: reduce) {
  .theme-toggle svg { transition: none; }
  .toc-card a { transition: none; }
}

/* ============================================================
   v10 — save-for-later (star button + hub saved strip) and
   editorial typography details (drop cap, markers, hr, quotes)
   ============================================================ */

/* ---------- article star button (chip row) ---------- */
.save-guide {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .85rem; font-size: .78rem; font-weight: 700; font-family: inherit;
  color: var(--ink-soft); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  transition: color .18s, border-color .18s, background .18s, transform .18s, box-shadow .18s;
}
.save-guide svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; flex: none; }
.save-guide:hover { color: #9A6A0B; border-color: var(--amber); background: var(--amber-tint); transform: translateY(-1px); box-shadow: 0 3px 10px rgba(233, 163, 25, .16); }
.save-guide:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.save-guide.saved { color: #6B4A04; background: var(--amber); border-color: var(--amber); }
.save-guide.saved svg { fill: #fff; stroke: #fff; animation: star-pop .5s var(--ease-spring) both; }
.save-guide.saved:hover { color: #4A3302; }
html[data-theme="dark"] .save-guide:hover { color: #F0B24A; }
html[data-theme="dark"] .save-guide.saved { color: #221B14; }
html[data-theme="dark"] .save-guide.saved:hover { color: #000; }
@keyframes star-pop {
  0% { transform: scale(.3) rotate(-25deg); }
  55% { transform: scale(1.3) rotate(10deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ---------- hub saved strip ---------- */
.saved-strip {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .9rem;
  padding: .8rem 2.2rem .8rem 1rem; margin: 0 0 1.1rem;
  background: linear-gradient(120deg, var(--amber-tint), rgba(252, 243, 221, .45));
  border: 1px dashed rgba(233, 163, 25, .55); border-radius: 12px;
  animation: popIn .45s var(--ease-out) both;
}
.saved-title { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9A6A0B; margin: 0; }
.saved-row { display: flex; flex-wrap: wrap; gap: .35rem .55rem; min-width: 0; }
.saved-link {
  display: inline-flex; align-items: center; gap: .45rem; max-width: 280px;
  font-size: .86rem; font-weight: 600; color: var(--ink); background: #fff;
  border: 1px solid rgba(233, 163, 25, .5); border-radius: 999px; padding: .3rem .5rem .3rem .8rem;
  text-decoration: none; transition: transform .18s var(--ease-out), border-color .18s, box-shadow .18s;
}
.saved-link:hover { transform: translateY(-2px); border-color: var(--amber); box-shadow: 0 4px 14px rgba(233, 163, 25, .2); }
.saved-link:focus-visible { outline: 2px solid #9A6A0B; outline-offset: 2px; }
.saved-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-star { display: inline-flex; flex: none; }
.saved-star svg { width: 13px; height: 13px; fill: var(--amber); stroke: #9A6A0B; stroke-width: 1; }
.saved-link:hover .saved-star svg { animation: star-pop .5s var(--ease-spring) both; }
.saved-remove {
  flex: none; width: 22px; height: 22px; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-faint); font-size: .95rem; line-height: 1;
  cursor: pointer; transition: background .15s, color .15s;
}
.saved-remove:hover { background: rgba(233, 163, 25, .18); color: #9A6A0B; }
.saved-remove:focus-visible { outline: 2px solid #9A6A0B; outline-offset: 1px; }
html[data-theme="dark"] .saved-strip { background: rgba(233, 163, 25, .08); border-color: rgba(240, 178, 74, .4); }
html[data-theme="dark"] .saved-title { color: #F0B24A; }
html[data-theme="dark"] .saved-link { background: #0F0C09; color: var(--ink); }
html[data-theme="dark"] .saved-star svg { fill: #F0B24A; stroke: #191410; }

/* ---------- hub card saved chip ---------- */
.saved-chip {
  display: inline-block; margin-left: .45rem; padding: .1rem .5rem;
  font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #6B4A04; background: var(--amber); border-radius: 999px; vertical-align: middle;
}
html[data-theme="dark"] .saved-chip { color: #221B14; }
.guide-card.is-saved { border-color: rgba(233, 163, 25, .5); }

/* ---------- editorial typography details ---------- */
/* drop cap on long opening paragraphs (class applied by core.js) */
.has-dropcap > p:first-of-type::first-letter {
  float: left; font-size: 3.1em; line-height: .8; font-weight: 700;
  color: var(--coral); padding: .07em .14em 0 0;
}
html[data-theme="dark"] .has-dropcap > p:first-of-type::first-letter { color: #F07A5A; }

/* ordered lists read as steps — teal numbers separate them from coral bullets */
.prose ol li::marker { color: var(--teal); }

/* horizontal rules become fading accent lines */
.prose hr {
  border: none; height: 2px; margin: 2.4rem 0;
  background: linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--coral) 50%, var(--line-strong) 82%, transparent);
}
html[data-theme="dark"] .prose hr { background: linear-gradient(90deg, transparent, #3A3128 18%, #E85D3D 50%, #3A3128 82%, transparent); }

/* blockquotes get a soft oversized quote glyph */
.prose blockquote { position: relative; padding-left: 2.9rem; }
.prose blockquote::before {
  content: '\201C'; position: absolute; top: -.1rem; left: .7rem;
  font-family: Georgia, 'Times New Roman', serif; font-style: normal;
  font-size: 2.8rem; line-height: 1; color: rgba(233, 163, 25, .45);
  pointer-events: none; user-select: none;
}
html[data-theme="dark"] .prose blockquote::before { color: rgba(240, 178, 74, .5); }

/* ---------- print: hide the new UI ---------- */
@media print {
  .save-guide, .saved-strip { display: none !important; }
  .has-dropcap > p:first-of-type::first-letter { float: none; font-size: inherit; color: inherit; padding: 0; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .save-guide.saved svg, .saved-link:hover .saved-star svg { animation: none; }
  .saved-strip { animation: none; }
}

/* touch targets: chip-row controls grow to 44px on coarse pointers */
@media (pointer: coarse) {
  .save-guide, .print-guide, .copy-outline, .font-controls button { min-height: 44px; }
}

/* ============================================================
   v11 — glossary tooltips + reading-position resume pill
   ============================================================ */

/* ---------- inline glossary term + popup ---------- */
.gloss-tip {
  position: relative;
  background: none; border: 0; margin: 0; padding: 0 0 1px;
  font: inherit; color: inherit; letter-spacing: inherit;
  border-bottom: 2px dotted var(--amber); cursor: help;
  transition: background .15s, border-color .15s;
}
.gloss-tip:hover, .gloss-tip.open { background: var(--amber-tint); border-bottom-color: var(--coral); }
.gloss-tip:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 3px; }
.gloss-pop {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: min(272px, 78vw); z-index: 400;
  background: #221B14; color: #F6EDDD;
  border: 1px solid rgba(233, 163, 25, .4); border-radius: 10px;
  padding: .6rem .75rem; font-size: .8rem; font-weight: 500; line-height: 1.5;
  text-align: left; text-transform: none; letter-spacing: 0;
  box-shadow: 0 10px 28px rgba(34, 27, 20, .3);
  display: none; pointer-events: none;
}
@keyframes glossIn {
  from { opacity: 0; translate: 0 5px; }
  to { opacity: 1; translate: 0 0; }
}
.gloss-pop::after {
  content: ''; position: absolute; top: 100%; left: 50%; margin-left: -6px;
  border: 6px solid transparent; border-top-color: #221B14;
}
.gloss-tip.open .gloss-pop { display: block; pointer-events: auto; animation: glossIn .18s var(--ease-out) both; }
html[data-theme="dark"] .gloss-pop { background: #2E261D; color: #F1E8DB; border-color: rgba(240, 178, 74, .45); box-shadow: 0 10px 28px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .gloss-pop::after { border-top-color: #2E261D; }
html[data-theme="dark"] .gloss-tip:hover, html[data-theme="dark"] .gloss-tip.open { background: rgba(233, 163, 25, .14); }

/* ---------- resume-reading pill (chip row) ---------- */
.resume-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .85rem; font-size: .78rem; font-weight: 700; font-family: inherit;
  color: var(--teal-deep); background: var(--teal-tint);
  border: 1px solid rgba(18, 150, 125, .45); border-radius: 999px; cursor: pointer;
  transition: color .18s, background .18s, transform .18s, box-shadow .18s;
  animation: popIn .45s var(--ease-out) both;
}
.resume-pill svg { width: 14px; height: 14px; flex: none; }
.resume-pill:hover { background: var(--teal); color: #fff; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(18, 150, 125, .22); }
.resume-pill:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
html[data-theme="dark"] .resume-pill { color: #4CC7AC; background: rgba(18, 150, 125, .14); border-color: rgba(18, 150, 125, .5); }
html[data-theme="dark"] .resume-pill:hover { background: var(--teal); color: #04241D; }

/* ---------- print + reduced motion ---------- */
@media print {
  .gloss-tip { border: 0; padding: 0; }
  .gloss-pop, .resume-pill { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .gloss-pop, .resume-pill { transition: none; animation: none; }
  .gloss-tip.open .gloss-pop { animation: none; }
}

/* ============================================================
   v12 — header quick search (injected button + "/" shortcut)
   and the header saved-guides counter chip
   ============================================================ */
.hdr-search, .hdr-saved {
  position: relative; width: 42px; height: 42px; flex: none;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
  text-decoration: none;
  transition: border-color .25s var(--ease-out), transform .25s var(--ease-out), background .25s, box-shadow .25s;
}
.hdr-search svg, .hdr-saved svg { width: 19px; height: 19px; display: block; }
.hdr-search svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.hdr-saved svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.hdr-search:hover, .hdr-saved:hover { border-color: var(--coral); color: var(--coral-deep); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(232, 93, 61, .12); }
.hdr-search:active, .hdr-saved:active { transform: scale(.94); }
.hdr-search:focus-visible, .hdr-saved:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.hdr-search kbd {
  position: absolute; right: 3px; bottom: 3px;
  font-family: inherit; font-size: .58rem; font-weight: 700; line-height: 1;
  padding: 2px 4px; border-radius: 5px;
  background: var(--paper-deep); color: var(--ink-soft);
  border: 1px solid var(--line);
}
.hdr-saved { display: none; }
.hdr-saved.has-items { display: grid; }
.hdr-saved .sc-count {
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center;
  font-size: .64rem; font-weight: 700; line-height: 1;
  color: #4A3302; background: var(--amber);
  border: 2px solid var(--surface); border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.hdr-saved:hover .sc-count { animation: sc-pop .45s var(--ease-spring); }
@keyframes sc-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
[data-theme="dark"] .hdr-search, [data-theme="dark"] .hdr-saved { background: var(--paper-deep); }
[data-theme="dark"] .hdr-saved .sc-count { color: #221B14; border-color: var(--paper-deep); }
@media (max-width: 419px) { .hdr-saved.has-items { display: none; } }
@media print { .hdr-search, .hdr-saved { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .hdr-search, .hdr-saved, .hdr-saved:hover .sc-count { transition: none; animation: none; }
}
/* v12 fix — mobile header fit: icon-only brand below 520px so the
   search + theme + burger trio never pushes past the viewport edge */
@media (max-width: 519px) {
  .header-inner { gap: .6rem; }
  .brand > span { display: none; }
  .brand svg { width: 32px; height: 32px; }
}

/* ============================================================
   v13 — saved strip live-sync polish: anchor offset under the
   sticky header + a soft entrance when the strip appears
   ============================================================ */
#saved-strip { scroll-margin-top: calc(var(--header-h) + 12px); }
.saved-strip { animation: saved-strip-in .5s var(--ease-out) both; }
@keyframes saved-strip-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .saved-strip { animation: none; } }

/* ============================================================
   v14 — share bar on article heroes + glossary/detail polish.
   Share row is injected by core.js into .page-hero on pages
   that carry an article. Hidden in print, reduced-motion safe.
   ============================================================ */
.share-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-top: 1.1rem; padding-top: 1rem;
  border-top: 1px dashed var(--line);
  animation: share-row-in .55s var(--ease-out) both;
}
@keyframes share-row-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.share-btn {
  display: inline-flex; align-items: center; gap: .42rem;
  padding: .4rem .8rem; font-size: .78rem; font-weight: 700; font-family: inherit;
  color: var(--ink-soft); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  text-decoration: none; line-height: 1;
  transition: color .18s, border-color .18s, background .18s, transform .18s, box-shadow .18s;
}
.share-btn svg { width: 14px; height: 14px; fill: currentColor; flex: none; }
.share-btn:hover { color: var(--coral-deep); border-color: var(--coral); background: var(--coral-tint, rgba(232, 93, 61, .08)); transform: translateY(-1px); box-shadow: 0 3px 10px rgba(232, 93, 61, .14); }
.share-btn:active { transform: scale(.95); }
.share-btn:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.share-btn.copied { color: var(--teal-deep); border-color: var(--teal); background: var(--teal-tint); }
.share-native { color: var(--teal-deep); border-color: rgba(18, 150, 125, .45); background: var(--teal-tint); }
.share-native:hover { color: #fff; background: var(--teal); border-color: var(--teal); box-shadow: 0 3px 10px rgba(18, 150, 125, .22); }
[data-theme="dark"] .share-btn { background: var(--paper-deep); }
[data-theme="dark"] .share-native { color: #4CC7AC; }
[data-theme="dark"] .share-native:hover { color: #04241D; background: var(--teal); }
@media print { .share-row { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .share-row, .share-btn { animation: none; transition: none; } }

/* ============================================================
   v15 — hero quick search (home), search length-filter chips,
   back-to-top accessibility polish. Reduced-motion safe.
   ============================================================ */

/* ---- home hero search form ---- */
.hero-search {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .55rem;
  max-width: 640px;
  margin-top: 1.15rem;
  padding: .8rem .9rem .75rem;
  animation: hero-search-in .6s var(--ease-out) both;
}
@keyframes hero-search-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hero-search-icon {
  position: absolute; left: 1.05rem; top: .92rem;
  width: 17px; height: 17px; color: var(--ink-faint); pointer-events: none;
}
.hero-search input[type="search"] {
  grid-column: 1; width: 100%;
  padding: .72rem .9rem .72rem 2.5rem;
  font-family: var(--font-body); font-size: .95rem; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--line-strong); border-radius: 10px;
  transition: border-color .2s, box-shadow .2s;
}
.hero-search input[type="search"]:focus {
  outline: none; border-color: var(--coral);
  box-shadow: 0 0 0 4px rgba(232, 93, 61, .14);
}
.hero-search input[type="search"]::placeholder { color: var(--ink-faint); }
.hero-search-btn { padding: .72rem 1.15rem; font-size: .9rem; white-space: nowrap; }
.hero-search-chips {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  font-size: .78rem; color: var(--ink-faint);
}
.hero-search-chips a {
  color: var(--teal-deep); text-decoration: none;
  border: 1px solid rgba(18, 150, 125, .35); background: var(--teal-tint);
  border-radius: 999px; padding: .16rem .6rem; font-weight: 600;
  transition: color .16s, background .16s, transform .16s, box-shadow .16s;
}
.hero-search-chips a:hover {
  color: #fff; background: var(--teal); border-color: var(--teal);
  transform: translateY(-1px); box-shadow: 0 3px 9px rgba(18, 150, 125, .2);
}
.hero-search-chips a:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
[data-theme="dark"] .hero-search input[type="search"] { background: var(--paper-deep); }
[data-theme="dark"] .hero-search-chips a { color: #4CC7AC; }
[data-theme="dark"] .hero-search-chips a:hover { color: #04241D; background: var(--teal); }
@media (max-width: 560px) {
  .hero-search { grid-template-columns: 1fr; }
  .hero-search-btn { width: 100%; }
}

/* ---- search page length-filter row: distinct quiet treatment ---- */
.filter-len { gap: .35rem; }
.filter-len .chip-btn {
  border-style: dashed;
  font-size: .78rem;
  color: var(--ink-soft);
}
.filter-len .chip-btn[aria-pressed="true"] {
  border-style: solid;
  color: var(--coral-deep);
  border-color: var(--coral);
  background: var(--coral-tint, rgba(232, 93, 61, .08));
}

/* ---- back-to-top polish: a11y + safe-area + print ---- */
.to-top:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
@supports (padding: max(0px)) {
  .to-top { right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); }
}
@media print { .to-top { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; }
  .hero-search, .hero-search-chips a { animation: none; transition: none; }
}

/* ============================================================
   v16 — reading progress bar, footer surprise button,
         saved-chip pop, selection + focus polish
   ============================================================ */
.read-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 80;
  pointer-events: none;
}
.read-progress::before {
  content: "";
  display: block;
  height: 100%;
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--teal), var(--coral));
  transition: transform .12s linear;
}

.surprise-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 1px solid var(--coral);
  color: var(--coral-deep);
  background: var(--coral-tint);
  border-radius: 999px;
  padding: .4rem .9rem;
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.surprise-btn svg { width: 15px; height: 15px; display: block; }
.surprise-btn:hover { transform: translateY(-1px) rotate(-2deg); box-shadow: 0 6px 16px rgba(232, 93, 61, .22); }
.surprise-btn:active { transform: translateY(0) rotate(0deg); }
.surprise-btn:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
[data-theme="dark"] .surprise-btn { color: var(--coral); }

/* saved-count bump when the star first gains an item */
.hdr-saved.has-items .sc-count { animation: csw-pop .32s ease; }
@keyframes csw-pop {
  0% { transform: scale(.4); }
  70% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.hdr-saved .sc-count { display: inline-block; }

/* quieter focus ring on chips + share buttons (keyboard users) */
.chip-btn:focus-visible, .share-btn:focus-visible, .filter-len .chip-btn:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}

/* footer-bottom keeps the pill vertically centered next to the legal nav */
.footer-bottom { align-items: center; }

@media print { .read-progress, .surprise-btn { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .read-progress::before { transition: none; }
  .surprise-btn, .hdr-saved.has-items .sc-count { transition: none; animation: none; }
  .surprise-btn:hover { transform: none; }
}

/* ============================================================
   v17 — heading anchor links + "next up" related strip
   ============================================================ */

/* --- hover # anchor on section headings (copied to clipboard on click) --- */
article.prose h2, article.prose h3 { position: relative; }
.h-anchor {
  position: absolute;
  left: -1.15rem;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  font-size: .82em;
  line-height: 1;
  padding: .28rem .42rem;
  border-radius: .45rem;
  color: var(--coral, #E2725B);
  text-decoration: none;
  opacity: 0;
  transition: opacity .15s ease, transform .15s ease;
}
article.prose h2:hover .h-anchor,
article.prose h3:hover .h-anchor,
.h-anchor:focus-visible,
.h-anchor:focus {
  opacity: 1;
}
.h-anchor:hover { transform: translateY(-50%) scale(1.18); }
.h-anchor:focus-visible {
  outline: 2px solid var(--coral, #E2725B);
  outline-offset: 2px;
}
@media (max-width: 720px) {
  .h-anchor { left: auto; right: 0; opacity: .38; } /* keep reachable on touch */
}

/* --- "next up" related guides strip (injected before footer on articles) --- */
.next-up {
  max-width: 72rem;
  margin: 2.2rem auto 0;
  padding: 0 1.25rem;
}
.next-up h2 {
  font-size: 1.22rem;
  margin: 0 0 .8rem;
  display: flex;
  align-items: center;
  gap: .55rem;
}
.next-up h2::after {
  content: "";
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, rgba(226,114,91,.45), transparent);
  border-radius: 2px;
}
.next-up-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .9rem;
}
.next-up-card {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .95rem 1rem;
  border: 1px solid rgba(31,41,51,.1);
  border-radius: .9rem;
  background: var(--card, #fff);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.next-up-card b {
  font-size: .96rem;
  line-height: 1.32;
  color: var(--ink, #1F2933);
}
.next-up-card span {
  font-size: .84rem;
  line-height: 1.45;
  color: rgba(31,41,51,.72);
}
.next-up-card:hover {
  transform: translateY(-3px);
  border-color: rgba(226,114,91,.5);
  box-shadow: 0 10px 24px -14px rgba(31,41,51,.35);
}
.next-up-card:focus-visible {
  outline: 2px solid var(--coral, #E2725B);
  outline-offset: 2px;
}
[data-theme="dark"] .next-up-card {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
}
[data-theme="dark"] .next-up-card b { color: var(--ink, #F3EFE7); }
[data-theme="dark"] .next-up-card span { color: rgba(243,239,231,.72); }
@media (max-width: 900px) {
  .next-up-grid { grid-template-columns: 1fr; }
}
@media print {
  .next-up, .h-anchor { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .h-anchor, .next-up-card { transition: none; }
  .next-up-card:hover { transform: none; }
  .h-anchor:hover { transform: translateY(-50%); }
}

/* ============================================================
   v18 — quick search overlay (header "/" palette)
   ============================================================ */
.qsearch-wrap {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  padding: 9vh 1rem 1rem;
  background: rgba(23, 28, 36, .55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.qsearch-wrap.open { display: block; }
.qsearch {
  max-width: 34rem;
  margin: 0 auto;
  background: var(--paper, #fff);
  border-radius: 1rem;
  box-shadow: 0 24px 64px -24px rgba(15, 20, 30, .55);
  border: 1px solid rgba(31,41,51,.1);
  overflow: hidden;
  animation: qsearchIn .18s ease both;
}
@keyframes qsearchIn {
  from { opacity: 0; transform: translateY(-10px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.qsearch-input {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  outline: none;
  background: transparent;
  padding: 1rem 1.1rem;
  font: inherit;
  font-size: 1.05rem;
  color: var(--ink, #1F2933);
  border-bottom: 1px solid rgba(31,41,51,.1);
}
.qsearch-list {
  list-style: none;
  margin: 0;
  padding: .35rem;
  max-height: 46vh;
  overflow-y: auto;
}
.qsearch-item {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .55rem .7rem;
  border-radius: .6rem;
  cursor: pointer;
}
.qsearch-item b {
  font-size: .92rem;
  line-height: 1.3;
  color: var(--ink, #1F2933);
}
.qsearch-item span {
  font-size: .78rem;
  color: rgba(31,41,51,.6);
}
.qsearch-item.active {
  background: rgba(226, 114, 91, .12);
}
.qsearch-item.active b { color: var(--coral, #E2725B); }
.qsearch-none {
  padding: .8rem .7rem;
  font-size: .88rem;
  color: rgba(31,41,51,.6);
}
.qsearch-hint {
  margin: 0;
  padding: .55rem .9rem;
  font-size: .74rem;
  color: rgba(31,41,51,.55);
  border-top: 1px solid rgba(31,41,51,.08);
}
[data-theme="dark"] .qsearch {
  background: var(--paper, #1c2027);
  border-color: rgba(255,255,255,.12);
}
[data-theme="dark"] .qsearch-item.active { background: rgba(226,114,91,.18); }
@media (max-width: 560px) {
  .qsearch-wrap { padding-top: 5vh; }
}
@media print {
  .qsearch-wrap { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .qsearch { animation: none; }
}

/* ============================================================
   v19 — visible breadcrumbs + misc polish
   ============================================================ */
.crumbs {
  max-width: 72rem;
  margin: 0 auto;
  padding: .85rem 1.25rem 0;
}
.crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .55rem;
  margin: 0;
  padding: 0;
  font-size: .8rem;
}
.crumbs li {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: rgba(31,41,51,.62);
}
.crumbs li + li::before {
  content: "›";
  color: rgba(226,114,91,.75);
  font-weight: 700;
}
.crumbs a {
  color: rgba(31,41,51,.72);
  text-decoration: none;
  border-bottom: 1px solid rgba(31,41,51,.18);
  transition: color .15s ease, border-color .15s ease;
}
.crumbs a:hover {
  color: var(--coral, #E2725B);
  border-color: var(--coral, #E2725B);
}
.crumbs a:focus-visible {
  outline: 2px solid var(--coral, #E2725B);
  outline-offset: 2px;
}
.crumbs li[aria-current="page"] {
  color: var(--ink, #1F2933);
  font-weight: 600;
}
[data-theme="dark"] .crumbs li { color: rgba(243,239,231,.62); }
[data-theme="dark"] .crumbs a { color: rgba(243,239,231,.72); border-color: rgba(243,239,231,.25); }
[data-theme="dark"] .crumbs li[aria-current="page"] { color: var(--ink, #F3EFE7); }
@media (max-width: 720px) {
  /* compact: show only parent › current */
  .crumbs li { display: none; }
  .crumbs li:nth-last-child(2) { display: flex; }
  .crumbs li:nth-last-child(2)::before { content: "›"; color: rgba(226,114,91,.75); font-weight: 700; }
  .crumbs li[aria-current="page"] { display: flex; }
  .crumbs ol { gap: .3rem; }
}
@media print {
  .crumbs { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .crumbs a { transition: none; }
}

/* ============================================================
   v20 — FAQ question anchors, to-top injection, crumbs grid fix
   ============================================================ */

/* fix (v19 regression): breadcrumbs injected into .with-toc must span
   the full grid row — previously the article was squeezed into the
   260px TOC column on every page that uses the toc layout */
.with-toc > .crumbs { grid-column: 1 / -1; }

/* --- FAQ per-question anchor (Feature 28) — static inside the summary row,
       reuses .h-anchor print/base rules where safe --- */
.accordion summary .faq-anchor {
  position: static;            /* override .h-anchor absolute placement */
  top: auto; left: auto; right: auto;
  transform: none;
  flex: none;
  margin-left: .2rem;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1;
  padding: .3rem .45rem;
  border-radius: .45rem;
  color: var(--coral, #E2725B);
  text-decoration: none;
  opacity: 0;
  transition: opacity .15s ease, transform .15s ease;
}
.accordion summary .faq-anchor + .acc-icon { margin-left: 0; } /* keep # and + snug at the right edge */
.accordion summary:hover .faq-anchor,
.accordion summary:focus-within .faq-anchor,
.accordion summary .faq-anchor:focus-visible,
.accordion summary .faq-anchor:focus { opacity: 1; }
.accordion summary .faq-anchor:hover { transform: scale(1.18); }
.accordion summary .faq-anchor:focus-visible {
  outline: 2px solid var(--coral, #E2725B);
  outline-offset: 2px;
}
@media (hover: none) {
  .accordion summary .faq-anchor { opacity: .38; } /* touch: keep reachable without hover */
}
[data-theme="dark"] .accordion summary .faq-anchor { color: #EC8B74; }

/* --- back-to-top (Feature 29): polish for the shared .to-top used by
       initScrollUi + initToTopInject across all article pages --- */
.to-top {
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  font-size: 1.15rem;
  font-weight: 700;
  font-family: var(--font-display);
}
.to-top:focus-visible {
  outline: 3px solid var(--coral, #E2725B);
  outline-offset: 3px;
}
.to-top.show:hover {
  background: var(--coral, #E2725B);
  border-color: var(--coral, #E2725B);
  color: #fff;
}
[data-theme="dark"] .to-top { border-color: rgba(243, 239, 231, .22); }
[data-theme="dark"] .to-top.show:hover { background: var(--coral, #E2725B); border-color: var(--coral, #E2725B); color: #1F2933; }
@media (max-width: 720px) {
  .to-top { right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}
@media print {
  .to-top, .faq-anchor { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; }
  .accordion summary .faq-anchor { transition: none; }
}

/* ============================================================
   v21 — hash-target highlight, line-spacing comfort toggle,
   reading-chip row unification + focus/hover detail polish
   ============================================================ */

/* --- Feature 30: hash-target highlight ------------------------------ */
/* soft amber pulse on the element a #hash deep link lands on;
   background-only so layout never shifts mid-scroll */
@keyframes hashFlash {
  0%   { background-color: rgba(240, 166, 96, .38); }
  60%  { background-color: rgba(240, 166, 96, .22); }
  100% { background-color: transparent; }
}
.hash-flash {
  animation: hashFlash 1.8s ease-out 1 both;
  border-radius: 6px;
  box-shadow: 0 0 0 6px rgba(240, 166, 96, .14);
}
[data-theme="dark"] .hash-flash {
  animation-name: hashFlashDark;
}
@keyframes hashFlashDark {
  0%   { background-color: rgba(240, 166, 96, .30); }
  60%  { background-color: rgba(240, 166, 96, .16); }
  100% { background-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .hash-flash { animation: none; background-color: rgba(240, 166, 96, .20); box-shadow: 0 0 0 6px rgba(240, 166, 96, .12); }
  [data-theme="dark"] .hash-flash { background-color: rgba(240, 166, 96, .16); }
}

/* --- Feature 31: line-spacing comfort toggle ------------------------ */
/* sits in the same pill row as the A−/A/A+ text-size controls */
.line-controls {
  display: inline-flex; align-items: center; overflow: hidden;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
}
.line-controls button {
  border: 0; background: transparent; cursor: pointer;
  padding: .34rem .7rem; font-family: var(--font-display); font-weight: 600;
  font-size: .78rem; color: var(--ink-soft); transition: background .2s, color .2s;
}
.line-controls button:hover { background: var(--paper-deep); color: var(--ink); }
.line-controls button:active { transform: scale(.95); }
.line-controls button[aria-pressed="true"] { background: var(--ink); color: #fff; }
article.prose.line-comfy p,
article.prose.line-comfy li,
article.prose.line-comfy dd { line-height: 1.95; letter-spacing: .004em; }
article.prose.line-comfy td { line-height: 1.7; }
[data-theme="dark"] .line-controls button[aria-pressed="true"] { color: #191410; }
@media (max-width: 640px) {
  .line-controls button { padding: .3rem .55rem; }
}

/* --- reading chip row breathing room -------------------------------- */
/* the font pill + spacing pill + copy-outline can wrap on narrow screens */
.copy-outline ~ .font-controls, .font-controls + .line-controls { margin-left: .45rem; }
.chip-row-tools { row-gap: .5rem; }

/* --- detail polish --------------------------------------------------- */
/* table rows get a warmer hover tint (matches card spotlight language) */
.tbl tbody tr { transition: background .18s ease; }
.tbl tbody tr:hover { background: rgba(240, 166, 96, .07); }
[data-theme="dark"] .tbl tbody tr:hover { background: rgba(240, 166, 96, .10); }

/* keyboard focus rings: consistent coral, slightly inset on pills */
.chip-btn:focus-visible,
.font-controls button:focus-visible,
.line-controls button:focus-visible { outline-offset: -3px; }

/* accordion summaries keep their hover lift but gain an active press state */
.accordion summary:active .acc-icon { transform: scale(.9); }

/* dark theme: spacing pill inherits the same pressed tint as font pill */
[data-theme="dark"] .line-controls { background: var(--surface-2, #262019); }

/* ======================================================================
   v22 — Feature 32: keyboard-shortcut help dialog ("?" key)
   ---------------------------------------------------------------------- */
.kbd-help-backdrop {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  background: rgba(43, 33, 24, .42);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: kbdFade .18s ease both;
}
.kbd-help-backdrop[hidden] { display: none; }
.kbd-help-card {
  width: min(360px, 100%);
  background: var(--paper, #FFFDF9);
  border: 1px solid rgba(43, 33, 24, .10);
  border-radius: 18px;
  box-shadow: 0 24px 64px -24px rgba(43, 33, 24, .45);
  padding: 1.1rem 1.15rem .9rem;
  animation: kbdPop .22s cubic-bezier(.2, .9, .3, 1.2) both;
}
.kbd-help-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .7rem;
}
.kbd-help-head strong { font-size: 1.02rem; color: var(--ink, #2B2118); }
.kbd-help-x {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(43, 33, 24, .14);
  background: transparent; color: var(--ink-soft, #6B5D4F);
  font-size: 1.15rem; line-height: 1; cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.kbd-help-x:hover { background: rgba(240, 166, 96, .16); transform: scale(1.06); }
.kbd-help-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .48rem .15rem;
  border-bottom: 1px dashed rgba(43, 33, 24, .10);
}
.kbd-help-row:last-of-type { border-bottom: 0; }
.kbd-help-row span { color: var(--ink-soft, #6B5D4F); font-size: .93rem; }
.kbd-help-card kbd {
  display: inline-block; min-width: 1.7rem; text-align: center;
  padding: .18rem .5rem;
  border: 1px solid rgba(43, 33, 24, .18);
  border-bottom-width: 2px;
  border-radius: 7px;
  background: var(--surface-2, #F6EFE3);
  color: var(--ink, #2B2118);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .85rem;
}
.kbd-help-note {
  margin: .55rem 0 0;
  font-size: .8rem; color: var(--ink-soft, #6B5D4F);
  border-top: 1px solid rgba(43, 33, 24, .08);
  padding-top: .55rem;
}
@keyframes kbdFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kbdPop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
[data-theme="dark"] .kbd-help-backdrop { background: rgba(10, 8, 6, .6); }
[data-theme="dark"] .kbd-help-card {
  background: var(--surface, #241D16);
  border-color: rgba(255, 251, 240, .12);
  box-shadow: 0 24px 64px -20px rgba(0, 0, 0, .8);
}
[data-theme="dark"] .kbd-help-head strong { color: var(--ink, #FFF6EA); }
[data-theme="dark"] .kbd-help-x { color: var(--ink-soft, #C9BBA9); border-color: rgba(255, 251, 240, .18); }
[data-theme="dark"] .kbd-help-row { border-bottom-color: rgba(255, 251, 240, .09); }
[data-theme="dark"] .kbd-help-row span { color: var(--ink-soft, #C9BBA9); }
[data-theme="dark"] .kbd-help-card kbd {
  background: var(--surface-2, #2E251C); color: var(--ink, #FFF6EA);
  border-color: rgba(255, 251, 240, .2);
}
[data-theme="dark"] .kbd-help-note { color: var(--ink-soft, #C9BBA9); border-top-color: rgba(255, 251, 240, .09); }
@media (prefers-reduced-motion: reduce) {
  .kbd-help-backdrop, .kbd-help-card { animation: none; }
}

/* ======================================================================
   v23 — Feature 33: selection quick-search pill + detail polish
   ---------------------------------------------------------------------- */
.sel-pop {
  position: fixed; z-index: 900;
  display: inline-flex; align-items: center; gap: .4rem;
  max-width: min(300px, 80vw);
  padding: .42rem .7rem;
  border: 1px solid rgba(43, 33, 24, .16);
  border-radius: 999px;
  background: var(--paper, #FFFDF9);
  color: var(--ink, #2B2118);
  font-size: .82rem; font-weight: 500; white-space: nowrap;
  box-shadow: 0 10px 28px -12px rgba(43, 33, 24, .4);
  cursor: pointer; opacity: 0; transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease, background .15s ease;
}
.sel-pop-in { opacity: 1; transform: none; }
.sel-pop:hover { background: var(--surface-2, #F6EFE3); }
.sel-pop-ic { display: inline-flex; color: var(--coral, #E85D3D); }
.sel-pop span:last-child { overflow: hidden; text-overflow: ellipsis; }
[data-theme="dark"] .sel-pop {
  background: var(--surface, #241D16);
  border-color: rgba(255, 251, 240, .16);
  color: var(--ink, #FFF6EA);
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .7);
}
[data-theme="dark"] .sel-pop:hover { background: var(--surface-2, #2E251C); }
@media (prefers-reduced-motion: reduce) {
  .sel-pop { transition: none; opacity: 1; transform: none; }
}

/* --- detail polish ----------------------------------------------------- */
/* header search pill gets a matching focus ring when tabbed to */
.hdr-search:focus-visible { outline: 2px solid var(--coral, #E85D3D); outline-offset: 2px; }
/* quick-search panel: input keeps its ring inside the overlay */
.qsearch-input:focus-visible { outline-offset: 0; }
/* guide-card "New" badges keep their pop but respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .badge-new { animation: none !important; }
}
/* long quiz option text wraps instead of clipping on narrow phones */
.quiz-opt { white-space: normal; overflow-wrap: anywhere; }
/* empty-hint blocks get a touch more breathing room inside tool shells */
.tool-shell .empty-hint { margin: .35rem 0 .15rem; }

/* grid children inside .with-toc must be allowed to shrink — this prevents
   horizontal page overflow at 390px on pages that predate the per-page fix */
.with-toc > .prose, .with-toc > aside { min-width: 0; }

/* ======================================================================
   v24 — Feature 34: reading-streak chip + popover, detail polish
   ---------------------------------------------------------------------- */
.streak-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  height: 34px; padding: 0 .6rem;
  border: 1px solid rgba(43, 33, 24, .14);
  border-radius: 999px;
  background: transparent; color: var(--ink-soft, #6B5D4F);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.streak-chip svg { width: 15px; height: 15px; fill: var(--amber, #E9A319); }
.streak-chip .streak-n { font-size: .82rem; font-weight: 600; }
.streak-chip:hover { background: rgba(233, 163, 25, .12); color: var(--ink, #2B2118); transform: translateY(-1px); }
.streak-chip:focus-visible { outline: 2px solid var(--amber, #E9A319); outline-offset: 2px; }
.streak-pop {
  position: fixed; z-index: 950;
  width: max-content; max-width: min(280px, 82vw);
  padding: .8rem .95rem .7rem;
  background: var(--paper, #FFFDF9);
  border: 1px solid rgba(43, 33, 24, .12);
  border-radius: 14px;
  box-shadow: 0 18px 44px -18px rgba(43, 33, 24, .45);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease;
}
.streak-pop-in { opacity: 1; transform: none; }
.streak-pop strong { display: block; font-size: .95rem; color: var(--ink, #2B2118); margin-bottom: .45rem; }
.streak-dots { display: flex; gap: .3rem; margin-bottom: .5rem; }
.streak-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface-2, #F6EFE3);
  border: 1px solid rgba(43, 33, 24, .12);
  transition: background .2s ease, transform .2s ease;
}
.streak-dot.on {
  background: var(--amber, #E9A319);
  border-color: var(--amber, #E9A319);
  transform: scale(1.08);
}
.streak-pop p { margin: 0; font-size: .84rem; color: var(--ink-soft, #6B5D4F); line-height: 1.5; }
.streak-note { display: block; margin-top: .45rem; font-size: .74rem; color: var(--ink-faint, #9A8B79); }
[data-theme="dark"] .streak-chip { border-color: rgba(255, 251, 240, .14); color: var(--ink-soft, #C9BBA9); }
[data-theme="dark"] .streak-chip:hover { background: rgba(233, 163, 25, .16); color: var(--ink, #FFF6EA); }
[data-theme="dark"] .streak-pop {
  background: var(--surface, #241D16);
  border-color: rgba(255, 251, 240, .12);
  box-shadow: 0 18px 44px -16px rgba(0, 0, 0, .8);
}
[data-theme="dark"] .streak-pop strong { color: var(--ink, #FFF6EA); }
[data-theme="dark"] .streak-dot { background: var(--surface-2, #2E251C); border-color: rgba(255, 251, 240, .14); }
[data-theme="dark"] .streak-pop p { color: var(--ink-soft, #C9BBA9); }
[data-theme="dark"] .streak-note { color: var(--ink-faint, #8A7C6B); }
@media (prefers-reduced-motion: reduce) {
  .streak-chip, .streak-pop, .streak-dot { transition: none; }
  .streak-pop { opacity: 1; transform: none; }
}

/* --- detail polish ----------------------------------------------------- */
/* saved-chip and streak-chip align their counters vertically */
.hdr-saved .sc-count, .streak-chip .streak-n { line-height: 1; }
/* popover text stays readable when the tab strip is narrow */
@media (max-width: 480px) {
  .streak-pop { left: 10px !important; right: 10px; width: auto; }
}

/* ============================================================
   v25 — Feature 35: print-friendly auto-reflow + detail polish
   ============================================================ */

/* --- print reflow (additive to the v2 print block) --------------------- */
/* Fix v2 typo: the malformed anchor-exception selector never applied, so
   in-page anchors printed as "(#anchor)" noise. Re-declared correctly. */
@media print {
  .prose a[href^="#"]::after, .prose a[href^="/"]::after { content: none; }

  @page { margin: 16mm 14mm; }

  /* Force the light palette even when dark theme is active: tokens are
     re-pointed at print-safe values for :root and the dark override. */
  :root, html[data-theme="dark"] {
    --paper: #ffffff;
    --paper-deep: #f6f4ef;
    --surface: #ffffff;
    --ink: #17110b;
    --ink-soft: #3c342a;
    --ink-faint: #6b6152;
    --line: #d8d2c6;
    --line-strong: #c0b8a5;
    --coral: #c9452a;
    --coral-deep: #a33820;
    --coral-tint: #fdeee8;
    --teal: #0c7461;
    --teal-deep: #0a5d4e;
    --teal-tint: #e9f5f1;
    --amber: #a87510;
    --amber-tint: #faf0d9;
  }
  html[data-theme="dark"] body, html[data-theme="dark"] .card,
  html[data-theme="dark"] .tool-shell, html[data-theme="dark"] .accordion,
  html[data-theme="dark"] .quick-answer, html[data-theme="dark"] .tbl {
    background: #ffffff !important;
    color: #17110b !important;
  }
  html[data-theme="dark"] .prose, html[data-theme="dark"] .prose p,
  html[data-theme="dark"] .prose li, html[data-theme="dark"] .prose td,
  html[data-theme="dark"] .prose th { color: #17110b !important; }

  /* Single-column article: the TOC rail is already hidden by v4 print rules */
  .with-toc { grid-template-columns: 1fr !important; gap: 0; }
  .prose { max-width: 100%; }

  /* Interactive-only chrome that post-dates the v2/v4 print blocks */
  .streak-chip, .streak-pop, .font-controls, .line-controls, .sel-pop,
  .qsearch-wrap, .kbd-help-backdrop, .print-guide, .outline-guide,
  .quiz-actions, .badge-new, .save-btn, .empty-hint, .hash-flash { display: none !important; }

  /* Cleaner page breaks */
  .guide-card, .term-card, .flip-card, .tbl tr, .result-card,
  .stat-tiles, .quick-answer, .accordion, .quiz-q { break-inside: avoid; }
  h2, h3 { break-after: avoid; }

  /* Provenance line at the very end of the printed page */
  body::after {
    content: "Printed from casestudywriting.com — free study guides and tools";
    display: block;
    margin-top: 16pt;
    padding-top: 6pt;
    border-top: 1px solid #c4bca9;
    font-size: 8.5pt;
    color: #6b6152;
  }
}

/* --- screen detail polish ---------------------------------------------- */
/* Sticky table header inside scrollable .table-wrap keeps columns labelled
   while scrolling tall comparison tables (guide pages use these heavily). */
.table-wrap { overflow: auto; }
.table-wrap .tbl th {
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0 1px 0 var(--line-strong);
}
html[data-theme="dark"] .table-wrap .tbl th { box-shadow: 0 1px 0 rgba(255,255,255,.14); }

/* List markers pick up the brand teal in prose bullets */
.prose ul li::marker { color: var(--teal); }
.prose ol li::marker { color: var(--coral); font-variant-numeric: tabular-nums; }

/* Quiz options: gentle lift + accent bar on hover, pressed state sinks */
.quiz-opt { transition: border-color .2s ease, background-color .2s ease, transform .15s ease, box-shadow .2s ease; }
.quiz-opt:not(.correct):not(.wrong):not([disabled]):hover {
  border-color: var(--teal);
  box-shadow: 0 3px 12px rgba(18, 150, 125, .12);
  transform: translateY(-1px);
}
.quiz-opt:not(.correct):not(.wrong):not([disabled]):active { transform: translateY(0); }

/* Guide cards get a visible keyboard ring (matches .btn focus style) */
a.guide-card:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: var(--radius, 14px);
}

/* Flip-card grid: pressed summary cursor + aria hint alignment */
.flip-card { cursor: pointer; }
.flip-card:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* Dark-theme variants for the new polish bits */
html[data-theme="dark"] .quiz-opt:not(.correct):not(.wrong):not([disabled]):hover {
  box-shadow: 0 3px 12px rgba(0, 0, 0, .45);
}

/* Reduced motion: no lift on quiz hover */
@media (prefers-reduced-motion: reduce) {
  .quiz-opt:hover { transform: none; }
}

/* ============================================================
   v26 — Feature 36: TOC read-% rings + "read x/y" counter chip.
   Scroll-driven rings fill with brand teal as each section is
   read; >=85% marks the section done with a check. Session-only,
   nothing persisted. Opt-out hook: <body data-toc-noread>.
   ============================================================ */
.toc-card h2 {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.toc-read-count {
  margin-left: auto;
  flex: none;
  padding: .1rem .45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-deep);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  transition: color .25s, background-color .25s, border-color .25s;
}
.toc-read-count.all-done {
  background: var(--teal-tint, rgba(18, 150, 125, .12));
  border-color: var(--teal);
  color: var(--teal-deep, var(--teal));
}
html[data-theme="dark"] .toc-read-count {
  background: rgba(255, 255, 255, .06);
  color: var(--ink-faint);
}
html[data-theme="dark"] .toc-read-count.all-done {
  background: rgba(18, 150, 125, .22);
  color: #7fd6c2;
}
.toc-read {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  position: relative;
  background: conic-gradient(var(--teal) calc(var(--p, 0) * 1%), var(--line) 0);
  transition: background-color .2s;
}
.toc-read-push { margin-left: auto; }
.toc-read::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--surface);
}
.toc-read.done { background: var(--teal); }
.toc-read.done::after {
  inset: 0;
  background: none;
  content: "\2713";
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1;
}
/* Active section keeps its coral identity; ring shifts slightly darker */
.toc-card a.active .toc-read { box-shadow: 0 0 0 2px var(--coral-tint, rgba(242, 123, 87, .25)); }
/* TOC time chip sits beside the ring without losing its auto margin */
.toc-card a .toc-time { margin-left: auto; }
.toc-card a .toc-read + .toc-time { margin-left: 0; }
.toc-card a .toc-time + .toc-read { margin-left: .1rem; }
html[data-theme="dark"] .toc-read { background: conic-gradient(var(--teal) calc(var(--p, 0) * 1%), rgba(255, 255, 255, .14) 0); }
html[data-theme="dark"] .toc-read::after { background: var(--surface, #241d15); }
html[data-theme="dark"] .toc-read.done::after { background: none; }

/* --- v26 extra screen polish ------------------------------------------- */
/* Details/summary keyboard focus ring (FAQ accordions are tab stops) */
summary:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 6px;
}
/* Table rows get a subtle hover wash on pointer devices (no touch jank) */
@media (hover: hover) {
  .tbl tbody tr { transition: background-color .15s ease; }
  .tbl tbody tr:hover { background: var(--paper-deep); }
  html[data-theme="dark"] .tbl tbody tr:hover { background: rgba(255, 255, 255, .04); }
}
/* Pagination-style "next up" card: sharper affordance on hover */
.next-up-card, a.next-up {
  transition: transform .2s var(--ease-out, ease), box-shadow .2s ease;
}
a.next-up:hover { transform: translateY(-2px); box-shadow: var(--shadow-md, 0 8px 24px rgba(34, 27, 20, .1)); }

/* Feature 36 never prints */
@media print {
  .toc-read, .toc-read-count { display: none !important; }
  .tbl tbody tr:hover { background: none; }
}

/* ============================================================
   v27 — Feature 37: saved-drafts chip + popover.
   Read-only header chip that surfaces pages with in-progress
   tool work (localStorage csw-<abbrev>-v1 keys mapped through
   assets/js/tools-registry.js). Never writes to storage.
   ============================================================ */
.drafts-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: .35rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .2s, color .2s, transform .2s var(--ease-out, ease);
}
.drafts-chip:hover { border-color: var(--teal); color: var(--ink); transform: translateY(-1px); }
.drafts-chip svg { width: 17px; height: 17px; }
.drafts-n {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--coral);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.drafts-pop {
  position: absolute;
  z-index: 90;
  width: 280px;
  max-width: calc(100vw - 20px);
  padding: .9rem 1rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md, 0 10px 30px rgba(34, 27, 20, .14));
  font-size: .88rem;
  opacity: 0;
  transform: translateY(-4px);
}
.drafts-pop-in { opacity: 1; transform: none; transition: opacity .18s ease, transform .18s var(--ease-out, ease); }
.drafts-pop strong { display: block; margin-bottom: .5rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }
.drafts-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem 0;
  border-top: 1px dashed var(--line);
}
.drafts-row:first-of-type { border-top: 0; }
.drafts-row a {
  flex: 1;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drafts-row a:hover { color: var(--coral-deep); text-decoration: underline; }
.drafts-row.is-here a { color: var(--teal-deep, var(--teal)); font-weight: 600; }
.drafts-jump {
  flex: none;
  padding: .18rem .5rem;
  border: 1px solid var(--teal);
  border-radius: 999px;
  background: var(--teal-tint, rgba(18, 150, 125, .1));
  color: var(--teal-deep, var(--teal));
  font-size: .7rem;
  font-weight: 700;
  cursor: pointer;
}
.drafts-jump:hover { background: var(--teal); color: #fff; }
.drafts-note { display: block; margin-top: .55rem; font-size: .72rem; color: var(--ink-faint); }
html[data-theme="dark"] .drafts-chip { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .16); }
html[data-theme="dark"] .drafts-pop { background: #241d15; border-color: rgba(255, 255, 255, .14); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .drafts-row { border-top-color: rgba(255, 255, 255, .1); }
html[data-theme="dark"] .drafts-jump { background: rgba(18, 150, 125, .2); }
@media (prefers-reduced-motion: reduce) {
  .drafts-chip, .drafts-chip:hover { transform: none; transition: none; }
}
@media print { .drafts-chip, .drafts-pop { display: none !important; } }

/* ==========================================================================
   v28 — Feature 38: TOC read-mark persistence (resume line) + polish details
   - .toc-resume: "pick up where you left off" line under the TOC heading
   - one-shot restore animation for rings on returning visits
   - h-anchor touch fallback, selection polish, print/motion guards
   ========================================================================== */

.toc-resume {
  font-size: .86rem;
  line-height: 1.5;
  margin: -.35rem 0 .85rem;
  padding: .5rem .7rem;
  background: rgba(18, 150, 125, .08);
  border-left: 3px solid var(--teal, #12967d);
  border-radius: .45rem;
  color: var(--ink-soft, #4a5568);
  animation: tocResumeIn .45s var(--ease-out, ease-out) both;
}
.toc-resume b { color: var(--teal, #12967d); font-weight: 700; }
.toc-resume a { color: var(--teal, #12967d); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.toc-resume a:hover { text-decoration-thickness: 2px; }
@keyframes tocResumeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Returning visit: rings fade from stub to restored state (one-shot) */
html[data-toc-restored="1"] .toc-read { animation: ringRestore .5s var(--ease-out, ease-out) both; }
@keyframes ringRestore { from { opacity: .25; transform: scale(.65); } to { opacity: 1; transform: none; } }

/* Heading anchors: keep reachable on touch + always visible once used */
@media (hover: none) {
  article.prose h2 .h-anchor, article.prose h3 .h-anchor { opacity: .55; }
}
.h-anchor.copied { opacity: 1; color: var(--teal, #12967d); transform: translateY(-1px) scale(1.1); }

/* Result/cards focus ring harmonization */
.toc-card a:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: .4rem; }

html[data-theme="dark"] .toc-resume {
  background: rgba(38, 186, 156, .1);
  border-left-color: var(--teal-bright, #26ba9c);
  color: var(--ink-soft-dark, #a8b3bf);
}
html[data-theme="dark"] .toc-resume b,
html[data-theme="dark"] .toc-resume a { color: var(--teal-bright, #26ba9c); }

@media (prefers-reduced-motion: reduce) {
  .toc-resume, html[data-toc-restored="1"] .toc-read { animation: none; }
}
@media print {
  .toc-resume { display: none !important; }
  html[data-toc-restored="1"] .toc-read { animation: none; }
}

/* v28 fix: resume-line link must not inherit the TOC row counter prefix */
.toc-resume a::before { content: none; }

/* ============================================================
   v29 — Wave 41: Feature 39 (now-reading header pill) +
   Feature 40 (drafts recency chips) + print source footer +
   polish details.
   ============================================================ */

/* ---------- Feature 39: now-reading header indicator ----------
   Desktop-only pill in the sticky header naming the section
   currently under the reading line. Purely decorative. */
.now-reading {
  display: none;
}
@media (min-width: 1100px) {
  .now-reading {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    max-width: 300px;
    padding: .32rem .8rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--paper-deep) 72%, transparent);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--ink-soft);
    white-space: nowrap;
    user-select: none;
  }
  .now-reading svg {
    flex: none;
    width: 15px;
    height: 15px;
    color: var(--coral);
    transition: color .25s;
  }
  .now-reading-label {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .now-reading.swap .now-reading-label { animation: nowReadSwap .28s ease-out; }
  .now-reading.swap svg { color: var(--teal); }
}
@keyframes nowReadSwap {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
html[data-theme="dark"] .now-reading {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  color: var(--ink-soft);
}
@media (max-width: 1099.98px) { .now-reading { display: none !important; } }
@media print { .now-reading { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .now-reading.swap .now-reading-label { animation: none; }
}

/* ---------- Feature 40: draft recency chips in the drafts popover ---------- */
.drafts-when {
  flex: none;
  padding: .06rem .45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-deep);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  white-space: nowrap;
  cursor: help;
}
.drafts-row.is-here .drafts-when {
  background: var(--teal-tint);
  border-color: var(--teal);
  color: var(--teal-deep, var(--teal));
}
html[data-theme="dark"] .drafts-when {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .12);
  color: var(--ink-faint);
}
html[data-theme="dark"] .drafts-row.is-here .drafts-when {
  background: rgba(18, 150, 125, .2);
  border-color: rgba(18, 150, 125, .55);
  color: #7fd6c2;
}

/* ---------- print: source footer on every printed page ---------- */
@media print {
  body::after {
    content: "Printed from casestudywriting.com" attr(data-path) " \2014 casestudywriting.com study guides";
    display: block;
    margin-top: 1.2rem;
    padding-top: .5rem;
    border-top: 1px solid #bbb;
    font-size: .72rem;
    color: #666;
    font-family: inherit;
  }
}

/* ---------- v29 polish details ---------- */
/* drafts rows get a subtle hover wash + focus ring for keyboard users */
.drafts-row a { border-radius: 6px; transition: color .2s; }
.drafts-row a:focus-visible,
.drafts-jump:focus-visible,
.drafts-chip:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 6px;
}
.drafts-jump { transition: background-color .2s, color .2s; }
/* now-reading sits next to the drafts chip — keep the drafts chip visually distinct */
.drafts-chip { flex: none; }

/* ============================================================
   v30 — Wave 42: Feature 41 (drafts fill meter) +
   Feature 42 (now-reading overall read-% tooltip) + hub polish
   ============================================================ */

/* ---------- Feature 41: drafts fill meter ---------- */
.drafts-fill { display: inline-flex; align-items: center; gap: 2.5px; flex: none; }
.drafts-fill i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--line);
  transition: background-color .25s;
}
.drafts-fill i.on { background: var(--teal); }
.drafts-fill b { font-size: .66rem; font-weight: 700; color: var(--ink-soft); margin-left: 3px; letter-spacing: .02em; }
.drafts-row.is-here .drafts-fill b { color: var(--teal-deep, var(--teal)); }
html[data-theme="dark"] .drafts-fill i { background: rgba(255, 255, 255, .14); }
html[data-theme="dark"] .drafts-fill i.on { background: var(--teal); }
@media print { .drafts-fill { display: none !important; } }

/* ---------- Feature 42: overall read-% tooltip on now-reading ---------- */
.now-reading { position: relative; }
@media (min-width: 1100px) { .now-reading { cursor: help; } }
.now-reading::after {
  content: attr(data-pct);
  position: absolute; top: calc(100% + 9px); right: 0;
  padding: .3rem .62rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
  font-size: .7rem; font-weight: 700; letter-spacing: .02em;
  color: var(--teal-deep, var(--teal));
  white-space: nowrap;
  opacity: 0; transform: translateY(-3px);
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 60;
}
.now-reading::before {
  content: ''; position: absolute; top: calc(100% + 4px); right: 16px;
  border: 5px solid transparent; border-bottom-color: var(--line);
  opacity: 0; transition: opacity .2s;
  pointer-events: none; z-index: 61;
}
.now-reading:hover::after,
.now-reading:focus-visible::after,
.now-reading:hover::before,
.now-reading:focus-visible::before { opacity: 1; transform: translateY(0); }
.now-reading[data-pct=""]::after,
.now-reading[data-pct=""]::before { display: none; }
html[data-theme="dark"] .now-reading::after {
  background: #1c1f26; border-color: rgba(255, 255, 255, .14);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45); color: var(--teal);
}
html[data-theme="dark"] .now-reading::before { border-bottom-color: rgba(255, 255, 255, .14); }
@media print { .now-reading::after, .now-reading::before { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .now-reading::after, .now-reading::before { transition: none; }
}

/* ---------- v30 polish: hub guide cards ---------- */
/* teal→coral underline sweep on hover (complements .card-spot spotlight) */
.guide-card::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--coral));
  transform: scaleX(0); transform-origin: left;
  transition: transform .32s var(--ease-out, ease-out);
  pointer-events: none;
}
.guide-card:hover::after { transform: scaleX(1); }
.guide-card h3 { transition: color .25s; }
.guide-card:hover h3 { color: var(--coral-deep); }
html[data-theme="dark"] .guide-card:hover h3 { color: var(--coral); }
@media (prefers-reduced-motion: reduce) {
  .guide-card::after { transition: none; }
  .guide-card:hover h3 { color: inherit; }
}
@media print { .guide-card::after { display: none !important; } }

/* ---------- v30 fix: header chip crowding at 1024-1366px ----------
   When streak chip, drafts chip and the now-reading pill are visible
   together the header-inner row exceeds its container and pushes the
   theme toggle past the viewport edge. Let the pill compress (its label
   already ellipsizes), tighten the row gap on narrower desktops, and
   park the streak chip on the narrowest desktop band. */
.now-reading { min-width: 0; flex-shrink: 1; }
@media (max-width: 1359.98px) {
  .header-inner { gap: .7rem; }
  .now-reading { max-width: 220px; }
}
@media (max-width: 1199.98px) {
  .streak-chip { display: none; }
  .now-reading { max-width: 170px; }
}
@media (prefers-reduced-motion: reduce) {
  .now-reading { transition: none; }
}

/* ============================================================
   v31 — Wave 43: Feature 43 (drafts export button) +
   Feature 44 (now-reading pill click-to-TOC jump)
   ============================================================ */
/* Feature 43: export-all button inside the drafts popover */
.drafts-export {
  display: block;
  width: 100%;
  margin: .6rem 0 .15rem;
  padding: .5rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.drafts-export:hover,
.drafts-export:focus-visible {
  border-color: var(--teal);
  background: var(--teal-tint);
  color: var(--teal-deep);
}
[data-theme="dark"] .drafts-export:hover,
[data-theme="dark"] .drafts-export:focus-visible { color: var(--ink); }
.drafts-export:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.drafts-export:active { transform: translateY(1px); }

/* Feature 44: the now-reading pill becomes a jump affordance */
.now-reading.is-jump { cursor: pointer; }
.now-reading.is-jump .now-reading-label { transition: opacity .18s ease; }
.now-reading.is-jump:hover .now-reading-label,
.now-reading.is-jump:focus-visible .now-reading-label { text-decoration: underline; text-underline-offset: 3px; }
.now-reading.is-jump:hover { transform: translateY(-1px); }
.now-reading.is-jump:active { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .drafts-export { transition: none; }
  .now-reading.is-jump, .now-reading.is-jump .now-reading-label { transition: none; }
  .now-reading.is-jump:hover { transform: none; }
}
@media print {
  .drafts-export, .now-reading.is-jump { display: none !important; }
}

/* ============================================================
   v32 — Wave 45: Feature 45 (drafts per-row delete) +
   Feature 46 (hub card draft dots)
   ============================================================ */
/* Feature 45: per-row delete button inside the drafts popover */
.drafts-del {
  flex: 0 0 auto;
  margin-left: .4rem;
  padding: .1rem .42rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-faint);
  font: inherit;
  font-size: 1rem;
  line-height: 1.2;
  cursor: pointer;
}
.drafts-del:hover { color: var(--coral-deep, var(--coral, #b3543e)); background: rgba(179, 84, 62, .08); }
.drafts-del:focus-visible { outline: 2px solid var(--teal, #2a9d8f); outline-offset: 2px; }
/* Feature 46: draft-in-progress dot on hub cards */
.guide-card { position: relative; }
.card-draft-dot {
  position: absolute;
  top: .6rem;
  right: .6rem;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--teal, #2a9d8f);
  box-shadow: 0 0 0 3px rgba(42, 157, 143, .16);
}
@media (prefers-reduced-motion: reduce) {
  .drafts-del, .card-draft-dot { transition: none; }
}
@media print {
  .drafts-del, .card-draft-dot { display: none !important; }
}

/* ============================================================
   v33 — Wave 46: Feature 47 (draft dots live refresh — dots reuse
   the v32 styles, no new card css) +
   Feature 48 (print-only page-title header)
   ============================================================ */
@media print {
  body[data-print-title]::before {
    content: attr(data-print-title) " \2014 printed from casestudywriting.com";
    display: block;
    font-size: 10.5pt;
    font-weight: 600;
    color: #444;
    border-bottom: 1px solid #ddd;
    padding-bottom: 6pt;
    margin-bottom: 12pt;
  }
  .toc-card, .tldr-card { break-inside: avoid; }
}