/* ── Design Tokens ────────────────────────────────────────────────────────── */
:root {
  /* Base backgrounds */
  --color-bg-main: #f8fafc;
  --color-bg-surface: #ffffff;
  --color-bg-muted: #f1f5f9;
  --color-bg-soft-blue: #eef4ff;
  --color-bg-soft-red: #fff1f2;

  /* Text colors */
  --color-text-primary: #172033;
  --color-text-secondary: #475569;
  --color-text-muted: #64748b;
  --color-text-subtle: #94a3b8;
  --color-text-inverse: #ffffff;

  /* Slovak-inspired brand colors */
  --color-primary: #173b7a;
  --color-primary-dark: #102a56;
  --color-primary-light: #dbeafe;

  --color-accent-red: #b91c2b;
  --color-accent-red-dark: #8f1420;
  --color-accent-red-light: #fee2e2;

  /* UI interaction colors */
  --color-link: #1d4ed8;
  --color-link-hover: #1e40af;
  --color-active: #173b7a;
  --color-hover-bg: #f1f5f9;

  /* Borders */
  --color-border-subtle: #e2e8f0;
  --color-border-default: #cbd5e1;
  --color-border-strong: #94a3b8;

  /* Semantic colors */
  --color-success: #15803d;
  --color-warning: #b45309;
  --color-error: #b91c1c;
  --color-info: #2563eb;

  /* Typography */
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-ui: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* Font sizes */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.0625rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: 1.75rem;
  --font-size-3xl: 2.25rem;

  /* Line heights */
  --line-height-tight: 1.25;
  --line-height-snug: 1.4;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.75;
  --line-height-legal: 1.85;

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Borders & radius */
  --border-subtle: 1px solid #e2e8f0;
  --border-default: 1px solid #cbd5e1;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);

  /* Transitions */
  --transition-fast: 120ms ease;
  --transition-default: 180ms ease;
  --transition-slow: 260ms ease;

  /* Z-index */
  --z-header: 100;
  --z-sidebar: 90;
  --z-dropdown: 200;
  --z-modal: 500;
  --z-toast: 700;

  /* Legal document */
  --legal-content-width: 48rem;
  --legal-body-font-size: var(--font-size-md);
  --legal-body-line-height: var(--line-height-legal);
  --legal-title-size: var(--font-size-3xl);
  --legal-section-title-size: var(--font-size-xl);
}

/* ── Base / Reset ─────────────────────────────────────────────────────────── */
html {
  height: 100%;
  font-feature-settings: "cv11", "ss01", "ss03";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

html.dark { scrollbar-color: #475569 transparent; }

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

body {
  min-height: 100%;
  margin: 0;
  font-family: var(--font-ui);
  background: var(--color-bg-main);
  color: var(--color-text-primary);
}

html.dark body {
  background: #0f172a;
  color: #e2e8f0;
}

li { 
  list-style-type: none;
}

a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }

@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
  html.dark ::-webkit-scrollbar-thumb { background: #475569; }
  html.dark ::-webkit-scrollbar-thumb:hover { background: #64748b; }
}

/* ── Site Header ──────────────────────────────────────────────────────────── */
.site-header {
  height: 3.5rem;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e2e8f0;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}

.site-header-inner {
  max-width: 90rem;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 0 1rem;
}

html.dark .site-header {
  border-color: #334155;
  background: rgba(30, 41, 59, .9);
}

.site-header-main,
.site-nav,
.brand,
.search-result,
.tm-picker,
.tm-banner-inner,
.toolbar,
.row-flex,
.inline-flex,
.flex { display: flex; }

.site-header-main { align-items: center; gap: .75rem; min-width: 0; flex: 1; }
.site-nav { align-items: center; gap: .375rem; flex-shrink: 0; margin-left: .75rem; }
.brand { align-items: center; gap: .625rem; flex-shrink: 0; }
.brand-mark {
  width: 2rem;
  height: 2rem;
  border-radius: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font: 700 14px/1 var(--font-body);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
}
.brand-text {
  color: var(--color-text-primary);
  font-size: 1.125rem;
  font-weight: var(--font-weight-bold);
}
html.dark .brand-text { color: #f8fafc; }
.brand-dot { color: #2563eb; }

.global-search {
  position: relative;
  flex: 1;
  display: none;
}
@media (min-width: 768px) { .global-search { display: block; } }
.search-icon {
  position: absolute;
  left: .75rem;
  top: 50%;
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}
.search-clear {
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #94a3b8;
  font-size: 1.25rem;
  line-height: 1;
  display: none;
}
.search-clear.is-visible { display: block; }
.search-box {
  width: 100%;
  padding: .45rem 2.5rem .45rem 2.75rem;
  border: 1px solid #cbd5e1;
  border-radius: .5rem;
  background: #fff;
  color: #0f172a;
  outline: 0;
  font-size: .875rem;
  transition: border-color .15s, box-shadow .15s;
}
.search-box::placeholder { color: #94a3b8; }
.search-box:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(23, 59, 122, .12); }
html.dark .search-box { background: #1e293b; border-color: #475569; color: #f1f5f9; }
html.dark .search-box:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, .2); }

.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: .5rem;
  max-height: 24rem;
  overflow-y: auto;
  border: 1px solid #e2e8f0;
  border-radius: .75rem;
  background: #fff;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, .25);
  z-index: 50;
  display: none;
}
.search-results.is-open { display: block; animation: fadeIn .25s cubic-bezier(.4,0,.2,1); }
html.dark .search-results { background: #1e293b; border-color: #475569; }
.search-result {
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid #f1f5f9;
}
.search-result:last-child { border-bottom: 0; }
.search-result:hover,
.search-result.is-selected { background: #eff6ff; }
html.dark .search-result { border-color: #334155; }
html.dark .search-result:hover,
html.dark .search-result.is-selected { background: rgba(30, 58, 138, .4); }
.status-dot { width: .5rem; height: .5rem; border-radius: 9999px; flex-shrink: 0; }
.status-dot.active { background: #10b981; }
.status-dot.expired { background: #94a3b8; }
.status-dot.future { background: #f59e0b; }

.tm-picker {
  display: none;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
  border: 1px solid #e2e8f0;
  border-radius: .5rem;
  padding: .375rem .625rem;
  transition: all .2s;
}
@media (min-width: 768px) { .tm-picker { display: flex; } }
.tm-picker.is-active {
  border-color: #f97316;
  background: linear-gradient(90deg, #fff7ed, #fffbeb);
  animation: tmPulse 2.4s cubic-bezier(.4,0,.6,1) infinite;
}
html.dark .tm-picker { border-color: #475569; }
html.dark .tm-picker.is-active {
  border-color: #ea580c;
  background: linear-gradient(90deg, rgba(124,45,18,.4), rgba(120,53,15,.3));
}
.tm-picker svg { width: 1rem; height: 1rem; color: #94a3b8; }
.tm-picker.is-active svg { color: #ea580c; }
.tm-date {
  width: 7.75rem;
  border: 0;
  background: transparent;
  color: #94a3b8;
  outline: 0;
  font: 500 .75rem var(--font-mono);
}
.tm-picker.is-active .tm-date { color: #c2410c; font-weight: 700; }
html.dark .tm-picker.is-active .tm-date { color: #fdba74; }
.tm-clear {
  display: none;
  width: 1.25rem;
  height: 1.25rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: #ea580c;
  font-weight: 700;
}
.tm-picker.is-active .tm-clear { display: flex; }

.dark-toggle {
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: .5rem;
  background: transparent;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dark-toggle:hover { background: #f1f5f9; }
html.dark .dark-toggle:hover { background: #334155; }
.dark-toggle svg { width: 1rem; height: 1rem; }
.dark-toggle .sun-icon { display: none; color: #fbbf24; }
html.dark .dark-toggle .moon-icon { display: none; }
html.dark .dark-toggle .sun-icon { display: block; }

/* ── Time Machine Banner (orange strip below header when as_of is active) ─── */
.tm-banner {
  position: sticky;
  top: 3.5rem;
  z-index: 30;
  display: none;
  color: #1a0f06;
  background: linear-gradient(90deg, #fb923c 0%, #f97316 50%, #ea580c 100%);
  box-shadow: 0 4px 6px -1px rgba(15, 23, 42, .1);
}
.tm-banner.is-active { display: block; }
html.dark .tm-banner {
  color: #fff7ed;
  background: linear-gradient(90deg, #7c2d12 0%, #9a3412 50%, #c2410c 100%);
}
.page-wrap {
  max-width: 90rem;
  margin: 0 auto;
  width: 100%;
  padding: 0 1rem;
}

.tm-banner-inner {
  max-width: 90rem;
  margin: 0 auto;
  padding: .625rem 1rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.tm-banner-main { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.tm-banner-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: rgba(255,255,255,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.06);
}
.tm-banner-icon svg { width: 1.25rem; height: 1.25rem; }
.tm-banner-label { display: block; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; opacity: .8; }
.tm-banner-date { display: block; font-size: 1.125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-banner-help {
  display: none;
  max-width: 28rem;
  border-left: 1px solid rgba(0,0,0,.2);
  padding-left: .75rem;
  margin-left: .5rem;
  font-size: .75rem;
  opacity: .8;
}
@media (min-width: 1024px) { .tm-banner-help { display: inline-block; } }
.tm-banner-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.tm-banner-actions input,
.tm-banner-actions button {
  border: 0;
  border-radius: .375rem;
  background: rgba(255,255,255,.6);
  color: inherit;
  padding: .25rem .625rem;
  font-weight: 700;
}
html.dark .tm-banner-actions input,
html.dark .tm-banner-actions button { background: rgba(0,0,0,.3); }

/* ── Law Reference Hover Preview (floating card) ─────────────────────────── */
.ref-preview {
  position: fixed;
  z-index: 9999;
  max-width: 360px;
  display: none;
  pointer-events: none;
  padding: 1rem 1.15rem;
  border: 1px solid #e2e8f0;
  border-radius: .85rem;
  background: #fff;
  box-shadow: 0 20px 60px -15px rgba(15,23,42,.25), 0 4px 12px rgba(15,23,42,.08);
  font-size: .8125rem;
  line-height: 1.55;
}
html.dark .ref-preview { background:#1e293b; border-color:#475569; box-shadow:0 20px 60px -15px rgba(0,0,0,.5); }

.toast {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 50;
  padding: .625rem 1rem;
  border-radius: .75rem;
  background: #0f172a;
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
  box-shadow: 0 20px 25px -5px rgba(15,23,42,.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.toast.is-visible { opacity: 1; }
html.dark .toast { background: #f1f5f9; color: #0f172a; }

/* ── Typography ───────────────────────────────────────────────────────────── */
.display-serif {
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  letter-spacing: -.02em;
}

/* ── Law Document Content ─────────────────────────────────────────────────── */
/* Classes below are emitted by the Python v2 renderer in main.py */
.law-content {
  font-family: var(--font-body);
  font-size: var(--legal-body-font-size);
  line-height: var(--line-height-legal);
  color: var(--color-text-primary);
  font-feature-settings: "onum", "kern";
}
html.dark .law-content { color:#e2e8f0; }
.law-content table {
  width: 100%;
  margin: 1rem 0 1.25rem;
  border-collapse: collapse;
  border: 1px solid #94a3b8;
  font-size: .95rem;
  line-height: 1.45;
}
.law-content th,
.law-content td {
  border: 1px solid #94a3b8;
  padding: .45rem .55rem;
  vertical-align: top;
}
.law-content th { background: #f1f5f9; font-weight: 700; color: #0f172a; }
html.dark .law-content table,
html.dark .law-content th,
html.dark .law-content td { border-color: #64748b; }
html.dark .law-content th { background: #1e293b; color: #f8fafc; }
.law-content a.debug-added-link { color: #dc2626 !important; text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
html.dark .law-content a.debug-added-link { color: #f87171 !important; }

/* signatories applied via Python renderer: _v2_render_block role="sig" */
.signatories { font-size:.9375rem; color:#94a3b8; font-style:italic; margin-top:1rem; }

/* version-history list items — scroll-margin keeps them below sticky toolbar */
[id^="vh-"] { scroll-margin-top: 7.5rem; }

@keyframes anchorFlash {
  0% { background: rgba(250, 204, 21, 0); }
  20% { background: rgba(250, 204, 21, .45); }
  100% { background: rgba(250, 204, 21, 0); }
}
.anchor-flash { animation: anchorFlash 1.6s ease-out; border-radius: .4rem; }
.paragraf { margin: 2.5rem 0 0; scroll-margin-top: 7.5rem; }
.para-header { display:flex; align-items:baseline; gap:.6rem; padding-bottom:.5rem; margin-bottom:.85rem; border-bottom: 2px solid var(--color-primary); }
html.dark .para-header { border-bottom-color:#60a5fa; }
.para-label { font-family: var(--font-body); font-size: 1.5rem; font-weight: var(--font-weight-bold); color: var(--color-primary); letter-spacing: -.015em; min-width: 3rem; font-variant-numeric: oldstyle-nums; }
html.dark .para-label { color:#93c5fd; }
.anchor-btn { opacity:0; font-size:1rem; color:#94a3b8; padding:0 .35rem; text-decoration:none; transition:opacity .15s; cursor:pointer; font-family: var(--font-ui); }
.para-header:hover .anchor-btn { opacity:1; }
.para-title { font-family: var(--font-body); font-weight: var(--font-weight-semibold); font-size: 1.15rem; color: var(--color-text-primary); margin-bottom:.65rem; letter-spacing: -.005em; }
html.dark .para-title { color:#f1f5f9; }
.para-text { margin-bottom:.5rem; }
.odsek { margin:.65rem 0; text-align:justify; hyphens:auto; }
.ods-num { font-family: var(--font-ui); font-weight: var(--font-weight-semibold); font-size:.8125rem; color:#6366f1; margin-right:.4rem; font-variant-numeric: tabular-nums; }
html.dark .ods-num { color:#a5b4fc; }
.pismeno { margin:.4rem 0 .4rem 1.75rem; text-align:justify; }
.pism-lbl, .bod-lbl { font-family: var(--font-ui); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
.pism-lbl { font-size:.9rem; }
.bod { margin:.3rem 0 .3rem 3.25rem; }
.bod-lbl { font-size:.85rem; }
html.dark .pism-lbl, html.dark .bod-lbl { color:#94a3b8; }
.sec-cast, .sec-hlava, .sec-diel, .sec-oddiel, .sec-clanok, .sec-priloha { margin: 3rem 0 1.25rem; padding: 1rem 0 .5rem 1.25rem; border-left: 3px solid #94a3b8; scroll-margin-top: 7.5rem; }
html.dark .sec-cast, html.dark .sec-hlava, html.dark .sec-diel, html.dark .sec-oddiel, html.dark .sec-clanok, html.dark .sec-priloha { border-color:#64748b; }
.sec-title { font-family: var(--font-body); font-weight: var(--font-weight-bold); font-size: 1.35rem; margin-bottom: .85rem; color: var(--color-text-primary); letter-spacing: -.015em; }
html.dark .sec-title { color:#f8fafc; }
.law-ref { color:#1d4ed8; text-decoration:none; border-bottom: 1px dotted #60a5fa; position:relative; cursor:pointer; transition: all .15s; }
.law-ref:hover { color: var(--color-primary); border-bottom-style: solid; background: #eff6ff; }
html.dark .law-ref { color:#93c5fd; border-bottom-color:#3b82f6; }
html.dark .law-ref:hover { color:#bfdbfe; background: var(--color-primary-dark); }
.self-ref { color:#7c3aed; text-decoration:none; border-bottom:1px dotted #c4b5fd; }
.self-ref:hover { background:#f5f3ff; border-bottom-style:solid; }
html.dark .self-ref { color:#c4b5fd; }
html.dark .self-ref:hover { background:#2e1065; }

.type-badge {
  display:inline-flex;
  align-items:center;
  font-size:.7rem;
  font-weight:600;
  padding:.15rem .55rem;
  border-radius:.4rem;
  white-space:nowrap;
  letter-spacing:.02em;
  max-width:9rem;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* ── Shared UI Components ─────────────────────────────────────────────────── */
/* badge-* colors match the law type conditional branches in index.html and law.html */
.badge-zakon { background:#dbeafe; color: var(--color-primary); }
.badge-vyhlaska { background:#d1fae5; color:#065f46; }
.badge-nariadenie { background:#ede9fe; color:#5b21b6; }
.badge-dekret { background:#fef3c7; color:#92400e; }
.badge-zmluva { background:#cffafe; color:#0e7490; }
.badge-other { background:#f1f5f9; color:#475569; }
html.dark .badge-zakon { background: var(--color-primary); color:#bfdbfe; }
html.dark .badge-vyhlaska { background:#064e3b; color:#6ee7b7; }
html.dark .badge-nariadenie { background:#2e1065; color:#c4b5fd; }
html.dark .badge-dekret { background:#451a03; color:#fcd34d; }
html.dark .badge-zmluva { background:#0c4a6e; color:#67e8f9; }
html.dark .badge-other { background:#334155; color:#cbd5e1; }

.law-pill {
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: .8125rem;
  font-weight: var(--font-weight-semibold);
  padding: .2rem .65rem;
  border-radius: var(--radius-sm);
  background: var(--color-bg-muted);
  color: var(--color-primary);
  white-space: nowrap;
  letter-spacing: -.01em;
  border: var(--border-subtle);
}
html.dark .law-pill { background: var(--color-primary); color: #dbeafe; border-color: #173b7a; }

.tab {
  padding: .45rem 1rem;
  border-radius: .5rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: #64748b;
  transition: all .15s;
}
.tab:hover { background:#f1f5f9; color:#1e293b; }
.tab.active { background: var(--color-primary); color: white; box-shadow: 0 1px 3px rgba(23,59,122,.3); }
html.dark .tab { color:#94a3b8; }
html.dark .tab:hover { background:#1e293b; color:#e2e8f0; }
html.dark .tab.active { background:#2563eb; color:white; }

.btn, .btn-sm {
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  border-radius:.5rem;
  font-weight:600;
  cursor:pointer;
  transition:all .15s;
  border: 0;
  text-decoration:none;
}
.btn { padding:.55rem 1.1rem; font-size:.875rem; }
.btn-primary { background: var(--color-primary); color: white; }
.btn-primary:hover { background: var(--color-primary-dark); transform:translateY(-1px); box-shadow: 0 4px 10px rgba(23,59,122,.3); }
.btn-ghost { background:transparent; color:#475569; border:1px solid #cbd5e1; }
.btn-ghost:hover { background:#f8fafc; color:#0f172a; border-color:#94a3b8; }
html.dark .btn-ghost { border-color:#475569; color:#cbd5e1; }
html.dark .btn-ghost:hover { background:#1e293b; color:#f1f5f9; }
.btn-sm {
  font-size: .75rem;
  padding: .3rem .7rem;
  border-radius: .375rem;
  background: #f1f5f9;
  color: #334155;
  white-space: nowrap;
  border: 1px solid #e2e8f0;
}
.btn-sm:hover { background:#e2e8f0; color:#0f172a; border-color:#cbd5e1; }
html.dark .btn-sm { background:#1e293b; color:#cbd5e1; border-color:#475569; }
html.dark .btn-sm:hover { background:#334155; color:#f8fafc; border-color:#64748b; }
.btn-sm.is-bookmarked { color:#d97706; background:#fffbeb; border-color:#fde68a; }
html.dark .btn-sm.is-bookmarked { color:#fbbf24; background:rgba(120,53,15,.3); border-color:#78350f; }

.toc-link {
  display:flex;
  align-items:flex-start;
  gap:.4rem;
  padding:.4rem .6rem;
  border-radius:.4rem;
  font-size:.8125rem;
  color:#475569;
  transition:all .15s;
  line-height:1.45;
}
.toc-link:hover { background:#f1f5f9; color:#0f172a; }
.toc-link.active { background: var(--color-primary-light); color: var(--color-primary); font-weight: var(--font-weight-semibold); }
html.dark .toc-link { color:#94a3b8; }
html.dark .toc-link:hover { background:#1e293b; color:#f1f5f9; }
html.dark .toc-link.active { background: var(--color-primary); color: #bfdbfe; }
.split-panel { display:flex; flex-direction:column; height:100%; overflow:hidden; }
.split-content { flex:1; overflow-y:auto; }

/* ── Utilities / Animations ───────────────────────────────────────────────── */
.is-hidden { display: none !important; }
.fade-in { animation: fadeIn .25s cubic-bezier(.4,0,.2,1); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tmPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(249,115,22,.5); } 50% { box-shadow: 0 0 0 6px rgba(249,115,22,0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
.animate-spin { animation: spin 1s linear infinite; }
.animate-ping { animation: ping 1s cubic-bezier(0,0,.2,1) infinite; }

/* ── Inline utility layer (Tailwind-compatible class names) ───────────────── */
/* Used directly in Jinja templates instead of a build step */
.h-full { height: 100%; }
.w-full { width: 100%; }
.h-14 { height: 3.5rem; }
.w-64 { width: 16rem; }
.w-80 { width: 20rem; }
.w-12 { width: 3rem; }
.h-12 { height: 3rem; }
.w-16 { width: 4rem; }
.h-16 { height: 4rem; }
.w-8 { width: 2rem; }
.h-8 { height: 2rem; }
.w-6 { width: 1.5rem; }
.h-6 { height: 1.5rem; }
.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }
.w-4 { width: 1rem; }
.h-4 { height: 1rem; }
.w-3 { width: .75rem; }
.h-3 { height: .75rem; }
.w-3\.5 { width: .875rem; }
.h-3\.5 { height: .875rem; }
.w-2 { width: .5rem; }
.h-2 { height: .5rem; }
.w-2\.5 { width: .625rem; }
.h-2\.5 { height: .625rem; }
.w-1 { width: .25rem; }
.w-px { width: 1px; }
.h-0\.5 { height: .125rem; }
.h-1 { height: .25rem; }
.h-1\.5 { height: .375rem; }
.flex-1 { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: .25rem; }
.gap-1\.5 { gap: .375rem; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.gap-x-4 { column-gap: 1rem; }
.gap-y-1 { row-gap: .25rem; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.grid { display: grid; }
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.inset-0 { inset: 0; }
.top-0 { top: 0; }
.top-1 { top: .25rem; }
.top-1\.5 { top: .375rem; }
.top-2 { top: .5rem; }
.top-3 { top: .75rem; }
.top-full { top: 100%; }
.right-3 { right: .75rem; }
.right-5 { right: 1.25rem; }
.bottom-2 { bottom: .5rem; }
.bottom-5 { bottom: 1.25rem; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.left-1\.5 { left: .375rem; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-auto { overflow-x: auto; }
.min-w-0 { min-width: 0; }
.max-w-xs { max-width: 20rem; }
.max-w-md { max-width: 28rem; }
.max-w-prose { max-width: 65ch; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-7xl { max-width: 80rem; }
.max-h-56 { max-height: 14rem; }
.max-h-60 { max-height: 15rem; }
.max-h-96 { max-height: 24rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.ml-auto { margin-left: auto; }
.mt-0 { margin-top: 0; }
.mt-0\.5 { margin-top: .125rem; }
.mt-1 { margin-top: .25rem; }
.mt-1\.5 { margin-top: .375rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-12 { margin-top: 3rem; }
.mb-1 { margin-bottom: .25rem; }
.mb-1\.5 { margin-bottom: .375rem; }
.mb-2 { margin-bottom: .5rem; margin-top: 0;}
.mb-2\.5 { margin-bottom: .625rem; }
.mb-3 { margin-bottom: .75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.ml-1 { margin-left: .25rem; }
.ml-3 { margin-left: .75rem; }
.mr-1 { margin-right: .25rem; }
.p-2\.5 { padding: .625rem; }
.p-3 { padding: .75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; padding-bottom: 0; }
.px-1\.5 { padding-left: .375rem; padding-right: .375rem; }
.px-2 { padding-left: .5rem; padding-right: .5rem; }
.px-2\.5 { padding-left: .625rem; padding-right: .625rem; }
.px-3 { padding-left: .75rem; padding-right: .75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.py-0\.5 { padding-top: .125rem; padding-bottom: .125rem; }
.py-1 { padding-top: .25rem; padding-bottom: .25rem; }
.py-1\.5 { padding-top: .375rem; padding-bottom: .375rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.py-2\.5 { padding-top: .625rem; padding-bottom: .625rem; }
.py-3 { padding-top: .75rem; padding-bottom: .75rem; }
.py-3\.5 { padding-top: .875rem; padding-bottom: .875rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.pt-1 { padding-top: .25rem; }
.pt-4 { padding-top: 1rem; }
.pt-5 { padding-top: 1.25rem; }
.pt-8 { padding-top: 2rem; }
.pt-10 { padding-top: 2.5rem; }
.pb-0\.5 { padding-bottom: .125rem; }
.pb-3 { padding-bottom: .75rem; }
.pb-4 { padding-bottom: 1rem; }
.pb-6 { padding-bottom: 1.5rem; }
.pb-24 { padding-bottom: 6rem; }
.pl-5 { padding-left: 1.25rem; }
.pl-8 { padding-left: 2rem; }
.pr-1 { padding-right: .25rem; }
.border { border: 1px solid #e2e8f0; }
.border-0 { border: 0; }
.border-2 { border-width: 2px; border-style: solid; border-color: #e2e8f0; }
.border-b { border-bottom: 1px solid #e2e8f0; }
.border-t { border-top: 1px solid #e2e8f0; }
.border-l { border-left: 1px solid #e2e8f0; }
.border-r { border-right: 1px solid #e2e8f0; }
.border-l-2 { border-left: 2px solid #e2e8f0; }
.border-l-4 { border-left: 4px solid #f59e0b; }
.border-b-2 { border-bottom: 2px solid #e2e8f0; }
.border-dashed { border-top: 2px dashed #f59e0b; }
.rounded { border-radius: .25rem; }
.rounded-md { border-radius: .375rem; }
.rounded-lg { border-radius: .5rem; }
.rounded-xl { border-radius: .75rem; }
.rounded-full { border-radius: 9999px; }
.rounded-r-lg { border-top-right-radius: .5rem; border-bottom-right-radius: .5rem; }
.rounded-r-xl { border-top-right-radius: .75rem; border-bottom-right-radius: .75rem; }
.shadow-sm { box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(15,23,42,.1); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(15,23,42,.16); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(15,23,42,.25); }
.backdrop-blur-md {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.opacity-0 { opacity: 0; }
.opacity-30 { opacity: .3; }
.opacity-40 { opacity: .4; }
.opacity-60 { opacity: .6; }
.opacity-80 { opacity: .8; }
.pointer-events-none { pointer-events: none; }
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-help { cursor: help; }
.select-none { user-select: none; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-nowrap { white-space: nowrap; }
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-relaxed { line-height: 1.625; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.uppercase { text-transform: uppercase; }
.normal-case { text-transform: none; }
.italic { font-style: italic; }
.line-through { text-decoration: line-through; }
.font-serif { font-family: var(--font-body); }
.font-display { font-family: var(--font-body); }
.font-sans { font-family: var(--font-ui); }
.font-mono { font-family: var(--font-mono); }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.text-\[\.65rem\] { font-size: .65rem; }
.text-\[\.68rem\] { font-size: .68rem; }
.text-\[\.7rem\] { font-size: .7rem; }
.text-\[\.93rem\] { font-size: .93rem; }
.text-\[\.95rem\] { font-size: .95rem; }
.text-\[\.98rem\] { font-size: .98rem; }
.text-xs { font-size: .75rem; }
.text-sm { font-size: .875rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.tracking-tight { letter-spacing: -.015em; }
.tracking-wide { letter-spacing: .025em; }
.tracking-wider { letter-spacing: .05em; }
.tracking-widest { letter-spacing: .1em; }
.tracking-\[\.12em\] { letter-spacing: .12em; }
.tracking-\[\.15em\] { letter-spacing: .15em; }
.tabular-nums { font-variant-numeric: tabular-nums; }
.transition-all { transition: all .15s; }
.transition-colors { transition: color .15s, background-color .15s, border-color .15s; }
.transition-opacity { transition: opacity .15s; }
.duration-300 { transition-duration: .3s; }
.duration-500 { transition-duration: .5s; }

.bg-white { background: #fff; }
.bg-white\/30 { background: rgba(255,255,255,.3); }
.bg-white\/60 { background: rgba(255,255,255,.6); }
.bg-white\/95 { background: rgba(255,255,255,.95); }
.bg-transparent { background: transparent; }
.bg-ink-50 { background: #f8fafc; }
.bg-ink-50\/50 { background: rgba(248,250,252,.5); }
.bg-ink-100 { background: #f1f5f9; }
.bg-ink-200 { background: #e2e8f0; }
.bg-ink-300 { background: #cbd5e1; }
.bg-ink-800 { background: #1e293b; }
.bg-ink-900 { background: #0f172a; }
.bg-brand-50 { background: #eff6ff; }
.bg-brand-100 { background: #dbeafe; }
.bg-brand-700 { background: #1d4ed8; }
.bg-blue-500 { background: #3b82f6; }
.bg-emerald-50 { background: #ecfdf5; }
.bg-emerald-50\/60 { background: rgba(236,253,245,.6); }
.bg-emerald-100 { background: #d1fae5; }
.bg-emerald-400 { background: #34d399; }
.bg-emerald-500 { background: #10b981; }
.bg-amber-50 { background: #fffbeb; }
.bg-amber-50\/50 { background: rgba(255,251,235,.5); }
.bg-amber-100 { background: #fef3c7; }
.bg-amber-400 { background: #fbbf24; }
.bg-amber-500 { background: #f59e0b; }
.bg-red-50 { background: #fef2f2; }
.bg-red-50\/50 { background: rgba(254,242,242,.5); }
.bg-red-50\/60 { background: rgba(254,242,242,.6); }
.bg-red-100 { background: #fee2e2; }
.bg-red-500 { background: #ef4444; }
.bg-tm-50 { background: #fff7ed; }
.bg-slate-50 { background: #f8fafc; }
.bg-slate-200 { background: #e2e8f0; }
.bg-slate-300 { background: #cbd5e1; }
.bg-slate-400 { background: #94a3b8; }
.bg-slate-700 { background: #334155; }
.bg-slate-800 { background: #1e293b; }
.bg-slate-900 { background: #0f172a; }
.bg-gradient-to-r { background-image: linear-gradient(90deg, var(--gradient-from, #eff6ff), var(--gradient-to, #dbeafe)); }
.bg-gradient-to-b { background-image: linear-gradient(180deg, var(--gradient-from, #fff), var(--gradient-to, rgba(248,250,252,.3))); }
.bg-gradient-to-br { background-image: linear-gradient(135deg, var(--gradient-from, #1e40af), var(--gradient-to, #172554)); }
.from-brand-800 { --gradient-from: #1e40af; }
.to-brand-950 { --gradient-to: #172554; }
.from-brand-500 { --gradient-from: #3b82f6; }
.to-brand-700 { --gradient-to: #1d4ed8; }
.from-white { --gradient-from: #fff; }
.to-ink-50\/30 { --gradient-to: rgba(248,250,252,.3); }
.from-amber-50 { --gradient-from: #fffbeb; }
.to-amber-100\/40 { --gradient-to: rgba(254,243,199,.4); }

.text-white { color: #fff; }
.text-ink-50 { color: #f8fafc; }
.text-ink-100 { color: #f1f5f9; }
.text-ink-200 { color: #e2e8f0; }
.text-ink-300 { color: #cbd5e1; }
.text-ink-400 { color: #94a3b8; }
.text-ink-500 { color: #64748b; }
.text-ink-600 { color: #475569; }
.text-ink-700 { color: #334155; }
.text-ink-800 { color: #1e293b; }
.text-ink-900 { color: #0f172a; }
.text-brand-300 { color: #93c5fd; }
.text-brand-400 { color: #60a5fa; }
.text-brand-500 { color: #3b82f6; }
.text-brand-600 { color: #2563eb; }
.text-brand-700 { color: #1d4ed8; }
.text-brand-800 { color: #1e40af; }
.text-blue-400 { color: #60a5fa; }
.text-blue-500 { color: #3b82f6; }
.text-blue-700 { color: #1d4ed8; }
.text-emerald-400 { color: #34d399; }
.text-emerald-500 { color: #10b981; }
.text-emerald-600 { color: #059669; }
.text-emerald-700 { color: #047857; }
.text-amber-300 { color: #fcd34d; }
.text-amber-400 { color: #fbbf24; }
.text-amber-600 { color: #d97706; }
.text-amber-700 { color: #b45309; }
.text-amber-800 { color: #92400e; }
.text-amber-900 { color: #78350f; }
.text-red-300 { color: #fca5a5; }
.text-red-400 { color: #f87171; }
.text-red-500 { color: #ef4444; }
.text-red-600 { color: #dc2626; }
.text-red-700 { color: #b91c1c; }
.text-red-800 { color: #991b1b; }
.text-slate-200 { color: #e2e8f0; }
.text-slate-300 { color: #cbd5e1; }
.text-slate-400 { color: #94a3b8; }
.text-slate-500 { color: #64748b; }
.text-slate-600 { color: #475569; }
.text-slate-700 { color: #334155; }
.text-tm-100 { color: #fff7ed; }
.text-tm-300 { color: #fdba74; }
.text-tm-400 { color: #fb923c; }
.text-tm-600 { color: #ea580c; }
.text-tm-700 { color: #c2410c; }
.text-tm-900 { color: #7c2d12; }
.border-ink-100 { border-color: #f1f5f9; }
.border-ink-200 { border-color: #e2e8f0; }
.border-ink-300 { border-color: #cbd5e1; }
.border-ink-600 { border-color: #475569; }
.border-ink-700 { border-color: #334155; }
.border-ink-800 { border-color: #1e293b; }
.border-white { border-color: #fff; }
.border-slate-100 { border-color: #f1f5f9; }
.border-slate-200 { border-color: #e2e8f0; }
.border-slate-300 { border-color: #cbd5e1; }
.border-slate-600 { border-color: #475569; }
.border-slate-700 { border-color: #334155; }
.border-brand-100 { border-color: #dbeafe; }
.border-emerald-200 { border-color: #a7f3d0; }
.border-emerald-400 { border-color: #34d399; }
.border-red-200 { border-color: #fecaca; }
.border-red-400 { border-color: #f87171; }
.border-red-800 { border-color: #991b1b; }
.border-amber-200 { border-color: #fde68a; }
.border-amber-400 { border-color: #fbbf24; }
.border-amber-500 { border-color: #f59e0b; }
.border-amber-800 { border-color: #92400e; }
.border-tm-300 { border-color: #fed7aa; }
.border-tm-500 { border-color: #f97316; }
.border-tm-700 { border-color: #c2410c; }

.hover\:underline:hover { text-decoration: underline; }
.hover\:bg-ink-100:hover { background: #f1f5f9; }
.hover\:bg-brand-50\/50:hover { background: rgba(239,246,255,.5); }
.hover\:bg-slate-50:hover { background: #f8fafc; }
.hover\:bg-blue-50:hover { background: #eff6ff; }
.hover\:bg-emerald-50:hover { background: #ecfdf5; }
.hover\:text-brand-700:hover { color: #1d4ed8; }
.hover\:text-brand-800:hover { color: #1e40af; }
.hover\:text-ink-800:hover { color: #1e293b; }
.hover\:text-red-700:hover { color: #b91c1c; }
.hover\:text-blue-700:hover { color: #1d4ed8; }
.hover\:text-emerald-700:hover { color: #047857; }
.hover\:text-amber-900:hover { color: #78350f; }
.hover\:text-slate-600:hover { color: #475569; }
.group:hover .group-hover\:opacity-100 { opacity: 1; }
.group:hover .group-hover\:shadow-md { box-shadow: 0 4px 6px -1px rgba(15,23,42,.1); }
.group:hover .group-hover\:text-brand-700,
.group\/row:hover .group-hover\:text-brand-700 { color: #1d4ed8; }
.group:hover .group-hover\:text-brand-800 { color: #1e40af; }
.last\:border-0:last-child { border-width: 0; }
.last\:mb-0:last-child { margin-bottom: 0; }

.h-\[calc\(100vh-3\.5rem\)\] { height: calc(100vh - 3.5rem); }
.grid-cols-\[1\.5rem_8rem_7rem_1fr_9rem_3\.5rem\] { grid-template-columns: 1.5rem 8rem 7rem 1fr 9rem 3.5rem; }
.-translate-y-1\/2 { transform: translateY(-50%); }
.-left-\[\.55rem\] { left: -.55rem; }
.-left-\[3\.05rem\] { left: -3.05rem; }
.-left-3\.5 { left: -.875rem; }
.-left-1\.15 { left: -1.15rem; }
.scroll-mt-32 { scroll-margin-top: 8rem; }
.line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.space-y-0\.5 > * + * { margin-top: .125rem; }
.space-y-1 > * + * { margin-top: .25rem; }
.space-y-2 > * + * { margin-top: .5rem; }
.space-y-2\.5 > * + * { margin-top: .625rem; }
.space-y-3 > * + * { margin-top: .75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-10 > * + * { margin-top: 2.5rem; }
.decoration-red-400\/60 { text-decoration-color: rgba(248,113,113,.6); }
.ring-4 { box-shadow: 0 0 0 4px var(--ring-color, #fff); }
.ring-white { --ring-color: #fff; }
.ring-brand-100 { --ring-color: #dbeafe; }
.accent-brand-700 { accent-color: #1d4ed8; }
.outline-none { outline: 0; }
.focus\:outline-none:focus { outline: 0; }
.focus\:border-brand-500:focus { border-color: #3b82f6; }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px rgba(59,130,246,.3); }
.focus\:ring-brand-500\/30:focus { box-shadow: 0 0 0 3px rgba(59,130,246,.3); }

@media (min-width: 640px) {
  .sm\:block { display: block; }
  .sm\:inline-flex { display: inline-flex; }
}
@media (min-width: 768px) {
  .md\:text-xl { font-size: 1.25rem; }
  .md\:text-3xl { font-size: 1.875rem; }
  .md\:text-4xl { font-size: 2.25rem; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .lg\:grid { display: grid; }
  .lg\:flex { display: flex; }
  .lg\:inline-block { display: inline-block; }
  .lg\:grid-cols-\[1\.5rem_8rem_7rem_1fr_9rem_3\.5rem\] { grid-template-columns: 1.5rem 8rem 7rem 1fr 9rem 3.5rem; }
}
@media (min-width: 1280px) {
  .xl\:flex { display: flex; }
}

html.dark .dark\:bg-ink-700 { background: #334155; }
html.dark .dark\:bg-ink-600 { background: #475569; }
html.dark .dark\:bg-ink-800 { background: #1e293b; }
html.dark .dark\:bg-ink-900 { background: #0f172a; }
html.dark .dark\:bg-ink-800\/30 { background: rgba(30,41,59,.3); }
html.dark .dark\:bg-ink-800\/50 { background: rgba(30,41,59,.5); }
html.dark .dark\:bg-ink-800\/60 { background: rgba(30,41,59,.6); }
html.dark .dark\:bg-ink-800\/70 { background: rgba(30,41,59,.7); }
html.dark .dark\:bg-ink-800\/80 { background: rgba(30,41,59,.8); }
html.dark .dark\:bg-ink-800\/95 { background: rgba(30,41,59,.95); }
html.dark .dark\:bg-brand-900\/30 { background: rgba(30,58,138,.3); }
html.dark .dark\:bg-brand-900\/40 { background: rgba(30,58,138,.4); }
html.dark .dark\:bg-brand-900\/50 { background: rgba(30,58,138,.5); }
html.dark .dark\:bg-emerald-900\/10 { background: rgba(6,78,59,.1); }
html.dark .dark\:bg-emerald-900\/30 { background: rgba(6,78,59,.3); }
html.dark .dark\:bg-emerald-900\/40 { background: rgba(6,78,59,.4); }
html.dark .dark\:bg-red-900\/10 { background: rgba(127,29,29,.1); }
html.dark .dark\:bg-red-900\/20 { background: rgba(127,29,29,.2); }
html.dark .dark\:bg-red-900\/30 { background: rgba(127,29,29,.3); }
html.dark .dark\:bg-red-900\/40 { background: rgba(127,29,29,.4); }
html.dark .dark\:bg-tm-900\/30 { background: rgba(124,45,18,.3); }
html.dark .dark\:bg-amber-900\/10 { background: rgba(120,53,15,.1); }
html.dark .dark\:bg-amber-900\/30 { background: rgba(120,53,15,.3); }
html.dark .dark\:bg-amber-900\/40 { background: rgba(120,53,15,.4); }
html.dark .dark\:bg-amber-950\/40 { background: rgba(69,26,3,.4); }
html.dark .dark\:bg-red-950\/20 { background: rgba(69,10,10,.2); }
html.dark .dark\:bg-emerald-950\/20 { background: rgba(2,44,34,.2); }
html.dark .dark\:bg-slate-700 { background: #334155; }
html.dark .dark\:bg-slate-800 { background: #1e293b; }
html.dark .dark\:bg-slate-900 { background: #0f172a; }
html.dark .dark\:bg-slate-800\/50 { background: rgba(30,41,59,.5); }
html.dark .dark\:from-ink-900 { --gradient-from: #0f172a; }
html.dark .dark\:to-ink-900\/90 { --gradient-to: rgba(15,23,42,.9); }
html.dark .dark\:from-amber-900\/30 { --gradient-from: rgba(120,53,15,.3); }
html.dark .dark\:to-amber-900\/10 { --gradient-to: rgba(120,53,15,.1); }
html.dark .dark\:text-ink-50 { color: #f8fafc; }
html.dark .dark\:text-ink-100 { color: #f1f5f9; }
html.dark .dark\:text-ink-200 { color: #e2e8f0; }
html.dark .dark\:text-ink-300 { color: #cbd5e1; }
html.dark .dark\:text-ink-400 { color: #94a3b8; }
html.dark .dark\:text-ink-500 { color: #64748b; }
html.dark .dark\:text-brand-300 { color: #93c5fd; }
html.dark .dark\:text-brand-400 { color: #60a5fa; }
html.dark .dark\:text-red-300 { color: #fca5a5; }
html.dark .dark\:text-red-400 { color: #f87171; }
html.dark .dark\:text-red-500 { color: #ef4444; }
html.dark .dark\:text-emerald-300 { color: #6ee7b7; }
html.dark .dark\:text-emerald-400 { color: #34d399; }
html.dark .dark\:text-amber-200 { color: #fde68a; }
html.dark .dark\:text-amber-300 { color: #fcd34d; }
html.dark .dark\:text-amber-400 { color: #fbbf24; }
html.dark .dark\:text-blue-400 { color: #60a5fa; }
html.dark .dark\:text-slate-200 { color: #e2e8f0; }
html.dark .dark\:text-slate-300 { color: #cbd5e1; }
html.dark .dark\:text-slate-400 { color: #94a3b8; }
html.dark .dark\:text-tm-100 { color: #fff7ed; }
html.dark .dark\:text-tm-300 { color: #fdba74; }
html.dark .dark\:text-tm-400 { color: #fb923c; }
html.dark .dark\:border-ink-600 { border-color: #475569; }
html.dark .dark\:border-ink-700 { border-color: #334155; }
html.dark .dark\:border-ink-700\/60 { border-color: rgba(51,65,85,.6); }
html.dark .dark\:border-ink-800 { border-color: #1e293b; }
html.dark .dark\:border-ink-800\/70 { border-color: rgba(30,41,59,.7); }
html.dark .dark\:border-slate-600 { border-color: #475569; }
html.dark .dark\:border-slate-700 { border-color: #334155; }
html.dark .dark\:border-red-800 { border-color: #991b1b; }
html.dark .dark\:border-red-900 { border-color: #7f1d1d; }
html.dark .dark\:border-emerald-900 { border-color: #064e3b; }
html.dark .dark\:border-amber-800 { border-color: #92400e; }
html.dark .dark\:border-tm-700 { border-color: #c2410c; }
html.dark .dark\:ring-ink-900 { --ring-color: #0f172a; }
html.dark .dark\:ring-brand-900 { --ring-color: var(--color-primary); }
html.dark .dark\:hover\:bg-ink-700\/50:hover { background: rgba(51,65,85,.5); }
html.dark .dark\:hover\:bg-ink-800\/70:hover { background: rgba(30,41,59,.7); }
html.dark .dark\:hover\:bg-slate-700:hover { background: #334155; }
html.dark .dark\:hover\:bg-blue-900\/30:hover { background: rgba(30,58,138,.3); }
html.dark .dark\:hover\:bg-emerald-900\/30:hover { background: rgba(6,78,59,.3); }
html.dark .dark\:hover\:text-brand-300:hover { color: #93c5fd; }
html.dark .dark\:hover\:text-brand-400:hover { color: #60a5fa; }
html.dark .dark\:hover\:text-ink-200:hover { color: #e2e8f0; }
html.dark .dark\:hover\:text-red-400:hover { color: #f87171; }
html.dark .dark\:hover\:text-amber-200:hover { color: #fde68a; }
html.dark .group:hover .dark\:group-hover\:text-brand-300 { color: #93c5fd; }
html.dark .group:hover .dark\:group-hover\:text-brand-400 { color: #60a5fa; }

/* ── Slide-in drawer panels ──────────────────────────────────────────────── */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  z-index: 34;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* Left panels — below lg (1024px) */
@media (max-width: 1023px) {
  [data-panel="left"],
  [data-panel="toc"] {
    position: fixed !important;
    top: 3.5rem;
    left: 0;
    bottom: 0;
    z-index: 35;
    width: 16rem;
    display: flex !important;
    flex-direction: column;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: none;
  }
  [data-panel="left"].is-open,
  [data-panel="toc"].is-open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(15, 23, 42, 0.18);
  }
}

/* Right panel — always 1rem breathing room from the right edge */
[data-panel="meta"] { padding-right: 1rem; }

/* Right panel — below xl (1280px) */
@media (max-width: 1279px) {
  [data-panel="meta"] {
    position: fixed !important;
    top: 3.5rem;
    right: 0;
    bottom: 0;
    z-index: 35;
    width: 20rem;
    display: flex !important;
    flex-direction: column;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    box-shadow: none;
  }
  [data-panel="meta"].is-open {
    transform: translateX(0);
    box-shadow: -4px 0 24px rgba(15, 23, 42, 0.18);
  }
}

/* Toggle buttons — hidden by default, appear only when panel is off-screen */
.drawer-toggle {
  display: none;
  align-items: center;
  gap: .375rem;
}
@media (max-width: 1023px) {
  .drawer-toggle[data-toggle-panel="left"],
  .drawer-toggle[data-toggle-panel="toc"] { display: inline-flex; }
}
@media (max-width: 1279px) {
  .drawer-toggle[data-toggle-panel="meta"] { display: inline-flex; }
}