/* Global overrides — apply after Tailwind. */
html { scroll-behavior: smooth; }
body {
  background-color: #0e141a;
  color: #dde3eb;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: #4f46e5; color: #fff; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0e141a; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #4b5563; }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

.editorial-grid {
  background-image:
    linear-gradient(to right, rgba(199, 196, 216, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(199, 196, 216, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Reader typography — used in chapter pages */
.prose-vs > p {
  color: #cbd5e1;
  font-size: 17px;
  line-height: 1.75;
  margin: 0 0 1.25rem 0;
}
.prose-vs > p strong { color: #f1f5f9; font-weight: 600; }
.prose-vs > h2 {
  font-family: "Source Serif 4", serif;
  font-weight: 600;
  color: #f1f5f9;
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 3.5rem 0 1.25rem 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(55, 65, 81, 0.7);
}
.prose-vs > h3 {
  font-family: "Source Serif 4", serif;
  font-weight: 600;
  color: #f1f5f9;
  font-size: 22px;
  margin: 2rem 0 0.75rem 0;
}
.prose-vs > ul, .prose-vs > ol { color: #cbd5e1; margin: 0 0 1.25rem 1.25rem; }
.prose-vs > ul > li { list-style: disc; margin-bottom: 0.5rem; }
.prose-vs > ol > li { list-style: decimal; margin-bottom: 0.5rem; }
.prose-vs a { color: #c3c0ff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(195, 192, 255, 0.35); }
.prose-vs a:hover { text-decoration-color: #c3c0ff; }

/* Chapter tables */
.prose-vs table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0 2rem;
  font-size: 14px;
  border: 1px solid #374151;
  border-radius: 8px;
  overflow: hidden;
}
.prose-vs thead { background: #1a2026; }
.prose-vs th {
  text-align: left;
  padding: 12px 14px;
  color: #c3c0ff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  font-weight: 600;
  border-bottom: 1px solid #374151;
}
.prose-vs td {
  padding: 12px 14px;
  color: #cbd5e1;
  border-top: 1px solid #1e293b;
  vertical-align: top;
  line-height: 1.55;
}
.prose-vs tbody tr:nth-child(odd) { background: rgba(26, 32, 38, 0.4); }
.prose-vs td strong { color: #e2e8f0; }

/* Footnotes list */
.footnote-list,
ol.footnote-list {
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.6;
  counter-reset: fn;
  list-style: none !important;
  padding: 0 !important;
  margin: 0;
}
.footnote-list > li {
  position: relative;
  padding: 12px 14px 12px 44px;
  margin: 0;
  border-top: 1px solid rgba(55, 65, 81, 0.55);
  counter-increment: fn;
}
.footnote-list > li:last-child { border-bottom: 1px solid rgba(55, 65, 81, 0.55); }
.footnote-list > li::before {
  content: counter(fn);
  position: absolute;
  left: 12px;
  top: 12px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(79, 70, 229, 0.15);
  border: 1px solid rgba(79, 70, 229, 0.35);
  color: #c3c0ff;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 600;
}
.footnote-list > li > p { margin: 0; }
.footnote-list a { color: #c3c0ff; word-break: break-word; }
.footnote-list a:not(.footnote-backref) {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(195, 192, 255, 0.35);
}
.footnote-list a:not(.footnote-backref):hover { text-decoration-color: #c3c0ff; }

/* Footnote references (sup)  */
.prose-vs sup { font-size: 10px; line-height: 1; margin-left: 1px; }
.prose-vs sup a.footnote-ref,
.prose-vs a.footnote-ref {
  color: #c3c0ff;
  text-decoration: none;
  padding: 1px 3px;
  border-radius: 3px;
  background: rgba(79, 70, 229, 0.15);
  border: 1px solid rgba(79, 70, 229, 0.35);
  font-weight: 600;
}
.prose-vs sup a.footnote-ref:hover { background: rgba(79, 70, 229, 0.3); }
.prose-vs a.footnote-backref,
.footnote-list a.footnote-backref {
  display: inline-block;
  color: #c3c0ff;
  text-decoration: none;
  margin-left: 0.35rem;
  padding: 0 6px;
  min-width: 20px;
  line-height: 18px;
  border-radius: 999px;
  background: rgba(79, 70, 229, 0.12);
  border: 1px solid rgba(79, 70, 229, 0.35);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  vertical-align: baseline;
  transition: background 160ms, color 160ms, transform 120ms;
}
.prose-vs a.footnote-backref:hover,
.footnote-list a.footnote-backref:hover {
  background: rgba(79, 70, 229, 0.28);
  color: #e2dfff;
  text-decoration: none;
}
.prose-vs a.footnote-backref:active,
.footnote-list a.footnote-backref:active { transform: translateY(1px); }

/* Big Idea callout inner content — resets prose-vs paragraph spacing inside the box */
.prose-callout > p { color: #cbd5e1; font-size: 17px; line-height: 1.65; margin: 0 0 0.75rem 0; }
.prose-callout > p:last-child { margin-bottom: 0; }
.prose-callout > p strong { color: #f1f5f9; }
.prose-callout a { color: #c3c0ff; }

/* Intro paragraph (right below chapter H1) */
.prose-intro > p { font-size: 19px; line-height: 1.7; color: #dde3eb; margin: 0 0 1.25rem 0; }
.prose-intro > p:last-child { margin-bottom: 0; }
.prose-intro > p strong { color: #f1f5f9; font-weight: 600; }

/* Code (inline + block) */
.prose-vs code {
  background: #1a2026; border: 1px solid #374151; padding: 1px 6px;
  border-radius: 4px; font-family: "JetBrains Mono", monospace; font-size: 13px;
  color: #c3c0ff;
}
.prose-vs pre {
  background: #0b1015; border: 1px solid #374151; border-radius: 8px;
  padding: 1rem 1.25rem; margin: 1.25rem 0; overflow-x: auto;
  font-size: 13px; line-height: 1.6; color: #cbd5e1;
}
.prose-vs pre code {
  background: transparent; border: none; padding: 0; color: inherit;
}

/* Scroll-progress rail */
.progress-rail { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: rgba(51, 65, 85, 0.6); z-index: 60; }
.progress-fill { height: 100%; background: #4f46e5; width: 0%; transition: width 120ms linear; box-shadow: 0 0 12px rgba(79, 70, 229, 0.7); }

/* TOC active state (legacy — used until dotted-outline rollout) */
[data-toc-link].is-active {
  color: #e2dfff;
  border-left-color: #4f46e5 !important;
  background: rgba(79, 70, 229, 0.08);
}

/* Dotted outline sidebar — refined pattern from Stitch design.
   Guide-line runs behind the dot column at a fixed x; every dot is absolutely
   centered on that same x so the line never crosses a circle, even when the
   active dot grows. */
.sidebar-toc {
  position: relative;
  padding-left: 0;
  list-style: none;
  margin: 0;
  --toc-line-x: 16px;
}
.sidebar-toc::before {
  content: "";
  position: absolute;
  left: calc(var(--toc-line-x) - 1px);
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: rgba(199, 196, 216, 0.22);
  pointer-events: none;
  z-index: 0;
}
.sidebar-toc > li { margin: 0; padding: 0; position: relative; }
.toc-item {
  display: block;
  padding: 8px 12px 8px 32px;
  border-radius: 8px;
  color: #94a3b8;
  font-size: 13px;
  line-height: 18px;
  transition: color 160ms, background 160ms;
  position: relative;
  isolation: isolate;
}
.toc-item .toc-dot {
  position: absolute;
  left: var(--toc-line-x);
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1a2026;
  border: 1px solid rgba(199, 196, 216, 0.5);
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
  z-index: 2;
}
.toc-item .toc-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.toc-item:hover { color: #e2e8f0; }
.toc-item:hover .toc-dot { border-color: #c3c0ff; }
.toc-item.is-active {
  background: rgba(79, 70, 229, 0.14);
  color: #c3c0ff;
}
.toc-item.is-active .toc-dot {
  background: #4f46e5;
  border-color: #4f46e5;
  box-shadow: 0 0 8px rgba(79, 70, 229, 0.55);
}
.toc-item.is-active .toc-label { font-weight: 600; }
.toc-item.is-complete .toc-dot {
  background: rgba(79, 70, 229, 0.35);
  border-color: rgba(79, 70, 229, 0.6);
}

/* ---------- Sprint page ---------- */
.sprint-timeline-wrap {
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(199, 196, 216, 0.25) transparent;
  margin-inline: -8px;
  padding-inline: 8px;
}
.sprint-timeline-wrap::-webkit-scrollbar { height: 6px; }
.sprint-timeline-wrap::-webkit-scrollbar-track { background: transparent; }
.sprint-timeline-wrap::-webkit-scrollbar-thumb {
  background: rgba(199, 196, 216, 0.25);
  border-radius: 999px;
}
.sprint-timeline {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 24px 8px 12px;
  min-width: 100%;
  width: max-content;
}
.sprint-timeline-line-track,
.sprint-timeline-line-fill {
  position: absolute;
  top: 57px;
  left: 60px;
  right: 60px;
  height: 2px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 0;
}
.sprint-timeline-line-track { background: rgba(199, 196, 216, 0.2); }
.sprint-timeline-line-fill {
  background: #4f46e5;
  width: 0%;
  transition: width 260ms ease;
  box-shadow: 0 0 8px rgba(79, 70, 229, 0.5);
  right: auto;
}
.sprint-node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 0 4px;
  cursor: pointer;
  color: #94a3b8;
  transition: color 160ms;
  font: inherit;
  width: 96px;
  flex-shrink: 0;
}
.sprint-node-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  height: 14px;
  display: flex;
  align-items: center;
}
.sprint-node-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0e141a;
  border: 2px solid rgba(199, 196, 216, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 220ms ease;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 0 4px #0e141a;
}
.sprint-node-title {
  font-size: 12px;
  line-height: 15px;
  text-align: center;
  color: #94a3b8;
  padding: 0 2px;
  max-width: 96px;
}
.sprint-node:hover .sprint-node-dot { border-color: #c3c0ff; }
.sprint-node:hover .sprint-node-title { color: #e2e8f0; }
.sprint-node.is-complete .sprint-node-dot {
  background: #1a2026;
  border-color: #4f46e5;
  box-shadow: 0 0 8px rgba(79, 70, 229, 0.4);
}
.sprint-node.is-complete .sprint-node-dot::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4f46e5;
}
.sprint-node.is-current .sprint-node-dot {
  background: #4f46e5;
  border-color: rgba(79, 70, 229, 0.4);
  box-shadow: 0 0 14px rgba(79, 70, 229, 0.7);
  width: 24px;
  height: 24px;
}
.sprint-node.is-current .sprint-node-dot::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}
.sprint-node.is-current .sprint-node-label {
  color: #c3c0ff;
  font-weight: 700;
}
.sprint-node.is-current .sprint-node-title {
  color: #e2dfff;
  font-weight: 600;
}
.sprint-node.is-locked .sprint-node-label,
.sprint-node.is-locked .sprint-node-title { opacity: 0.55; }
.sprint-node.is-locked .sprint-node-dot { border-color: rgba(199, 196, 216, 0.25); }

/* Right-panel day cards */
.sprint-day-panel {
  display: none;
  flex-direction: column;
  gap: 0;
}
.sprint-day-panel.is-visible { display: flex; }
.sprint-day-chip {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(79, 70, 229, 0.15);
  border: 1px solid rgba(79, 70, 229, 0.35);
  color: #c3c0ff;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 20px;
}
.sprint-day-heading {
  font-family: "Source Serif 4", serif;
  font-size: 26px;
  line-height: 32px;
  font-weight: 600;
  color: #f1f5f9;
  margin: 0;
}
.sprint-day-rule {
  display: block;
  width: 48px;
  height: 3px;
  background: #4f46e5;
  border-radius: 2px;
  margin: 14px 0 28px;
}
.sprint-day-section { margin: 0 0 28px; }
.sprint-day-section h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
  margin: 0 0 14px;
  font-weight: 600;
}
.sprint-todo-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sprint-todo {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
}
.sprint-todo-check {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid rgba(199, 196, 216, 0.5);
  border-radius: 4px;
  background: transparent;
  flex-shrink: 0;
  margin-top: 3px;
  cursor: pointer;
  transition: background 160ms, border-color 160ms, box-shadow 160ms;
  position: relative;
}
.sprint-todo-check:hover { border-color: #c3c0ff; }
.sprint-todo-check:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.28);
}
.sprint-todo-check:checked {
  background: #4f46e5;
  border-color: #4f46e5;
  box-shadow: 0 0 8px rgba(79, 70, 229, 0.5);
}
.sprint-todo-check:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.sprint-todo-label {
  font-size: 15px;
  line-height: 22px;
  color: #dde3eb;
}
.sprint-todo-check:checked + .sprint-todo-label {
  color: #94a3b8;
  text-decoration: line-through;
}
.sprint-done-quote {
  background: rgba(26, 32, 38, 0.6);
  border: 1px solid rgba(55, 65, 81, 0.7);
  border-left: 3px solid #c3c0ff;
  padding: 14px 16px;
  border-radius: 8px;
  font-style: italic;
  color: #cbd5e1;
  font-size: 14px;
  line-height: 20px;
  margin: 0;
}
.sprint-day-footer {
  margin-top: auto;
  padding-top: 28px;
  border-top: 1px solid rgba(55, 65, 81, 0.6);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sprint-stuck-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: #1a2026;
  border: 1px solid rgba(55, 65, 81, 0.7);
  border-radius: 10px;
  color: #cbd5e1;
  text-decoration: none;
  transition: all 160ms;
}
.sprint-stuck-card:hover {
  border-color: rgba(79, 70, 229, 0.5);
  background: rgba(79, 70, 229, 0.08);
}
.sprint-stuck-caption {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 2px;
}
.sprint-stuck-label {
  font-family: "Source Serif 4", serif;
  font-size: 15px;
  color: #e2e8f0;
}
.sprint-stuck-card:hover .sprint-stuck-label { color: #c3c0ff; }
.sprint-complete-btn {
  width: 100%;
  padding: 14px 20px;
  border: 0;
  border-radius: 10px;
  background: #4f46e5;
  color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: all 180ms;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
}
.sprint-complete-btn:hover { filter: brightness(1.1); box-shadow: 0 0 22px rgba(79, 70, 229, 0.55); }
.sprint-complete-btn:active { transform: translateY(1px); }

/* Unified top-nav item — shared by every page's sidebar */
.side-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #94a3b8;
  font-size: 14px;
  transition: all 160ms;
}
.side-nav-item .material-symbols-outlined {
  font-size: 20px;
  transition: color 160ms;
}
.side-nav-item:hover {
  background: #242b31;
  color: #e2e8f0;
}
.side-nav-item.is-active,
[data-current-page="library"] .side-nav-item[data-nav="library"],
[data-current-page="scorecard"] .side-nav-item[data-nav="scorecard"],
[data-current-page="companion-kit"] .side-nav-item[data-nav="companion-kit"],
[data-current-page="sprint"] .side-nav-item[data-nav="sprint"] {
  background: #4f46e5;
  color: #fff;
  font-weight: 600;
  border-left: 4px solid #e2dfff;
  padding-left: 8px;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.25);
}
.side-nav-item.is-active .material-symbols-outlined,
[data-current-page="library"] .side-nav-item[data-nav="library"] .material-symbols-outlined,
[data-current-page="scorecard"] .side-nav-item[data-nav="scorecard"] .material-symbols-outlined,
[data-current-page="companion-kit"] .side-nav-item[data-nav="companion-kit"] .material-symbols-outlined,
[data-current-page="sprint"] .side-nav-item[data-nav="sprint"] .material-symbols-outlined { color: #fff; }

/* Sprint sidebar item variant — indicate completion + tighter label */
.sprint-side-item.is-complete .toc-dot {
  background: rgba(79, 70, 229, 0.35);
  border-color: #4f46e5;
}
.sprint-side-item .toc-label {
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sprint day list — 14 sequential "Day N." cards inside prose-vs */
.prose-vs ol.sprint-day-list {
  counter-reset: sprintday;
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 2rem;
}
.prose-vs ol.sprint-day-list > li {
  list-style: none;
  padding: 14px 16px 14px 16px;
  margin: 0;
  border-top: 1px solid rgba(55, 65, 81, 0.55);
  font-size: 16px;
  line-height: 1.6;
  color: #cbd5e1;
}
.prose-vs ol.sprint-day-list > li:last-child {
  border-bottom: 1px solid rgba(55, 65, 81, 0.55);
}
.prose-vs ol.sprint-day-list > li strong:first-child {
  color: #c3c0ff;
  font-weight: 600;
}
.prose-vs ol.sprint-day-list > li strong {
  color: #e2dfff;
}

/* Beat-break — thin divider between two paragraphs at a scope shift */
.prose-vs hr.beat-break {
  width: 60px;
  border: 0;
  border-top: 1px solid rgba(199, 196, 216, 0.35);
  margin: 2rem auto;
}

/* ---------- Collapsible sections (chapter reader) ---------- */
.collapsible-section {
  scroll-margin-top: 24px;
  margin: 0;
}
.collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 1rem 0 1rem 0;
  margin: 3rem 0 1rem 0;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(55, 65, 81, 0.7);
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  transition: border-color 160ms;
}
.collapsible-section:first-of-type .collapsible-header { margin-top: 0.5rem; }
.collapsible-header:hover { border-top-color: rgba(79, 70, 229, 0.6); }
.collapsible-header:hover .collapsible-chevron { color: #c3c0ff; }
.collapsible-header:focus-visible {
  outline: 2px solid rgba(79, 70, 229, 0.6);
  outline-offset: 4px;
  border-radius: 4px;
}
.prose-vs .collapsible-header > h2 {
  font-family: "Source Serif 4", serif;
  font-weight: 600;
  color: #f1f5f9;
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
  padding: 0;
  border: 0;
  flex: 1;
}
.collapsible-chevron {
  color: #94a3b8;
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1), color 160ms;
  transform: rotate(0deg);
}
.collapsible-section.is-open .collapsible-chevron {
  transform: rotate(90deg);
  color: #c3c0ff;
}
.collapsible-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.collapsible-body > .collapsible-body-inner {
  overflow: hidden;
  min-height: 0;
}
.collapsible-section:not(.is-open) .collapsible-body {
  grid-template-rows: 0fr;
}
.collapsible-section:not(.is-open) + .collapsible-section .collapsible-header {
  margin-top: 1rem;
}

/* ---------- Component gallery patterns (from Stitch showcase) ---------- */

/* Primary button */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  background: #4f46e5; color: #fff;
  padding: 12px 24px; border-radius: 0.5rem;
  font-family: Inter, sans-serif; font-weight: 600; font-size: 15px;
  letter-spacing: 0.02em;
  transition: box-shadow 200ms, transform 120ms, filter 200ms;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
}
.btn-primary:hover { box-shadow: 0 0 20px rgba(79, 70, 229, 0.55); filter: brightness(1.08); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary[disabled], .btn-primary.is-disabled {
  background: #242b31; color: #94a3b8;
  box-shadow: none; cursor: not-allowed; filter: none;
}

.btn-primary-lg { padding: 16px 32px; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; }

/* Ghost / secondary button */
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: #e2e8f0;
  border: 1px solid #e2e8f0;
  padding: 12px 24px; border-radius: 0.5rem;
  font-family: Inter, sans-serif; font-weight: 600; font-size: 15px;
  transition: background 200ms, color 200ms;
}
.btn-ghost:hover { background: #242b31; }

/* Checklist — Stitch showcase pattern */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-item {
  display: flex; align-items: flex-start; gap: 16px;
  cursor: pointer;
  transition: opacity 200ms;
}
.check-item + .check-item { margin-top: 24px; }
.check-item .check-box {
  position: relative; flex-shrink: 0;
  width: 24px; height: 24px; margin-top: 4px;
  display: flex; align-items: center; justify-content: center;
}
.check-item input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 24px; height: 24px;
  border: 2px solid #464555;
  border-radius: 4px;
  background: transparent;
  transition: background 180ms, border-color 180ms, box-shadow 240ms;
  cursor: pointer;
}
.check-item input[type="checkbox"]:hover { border-color: #6b6a7c; }
.check-item input[type="checkbox"]:checked {
  background: #4f46e5;
  border-color: #4f46e5;
  box-shadow: 0 0 12px rgba(79, 70, 229, 0.55);
}
.check-item .check-mark {
  position: absolute;
  color: #fff; font-size: 18px;
  opacity: 0; transition: opacity 180ms;
  pointer-events: none;
}
.check-item input[type="checkbox"]:checked + .check-mark { opacity: 1; }
.check-item .check-title {
  font-family: Inter, sans-serif;
  color: #dde3eb; font-size: 17px; line-height: 1.55; font-weight: 500;
  transition: color 200ms;
}
.check-item .check-desc {
  margin-top: 4px;
  font-size: 14px; line-height: 1.55; color: #94a3b8;
}
.check-item.is-checked .check-title {
  color: #94a3b8; text-decoration: line-through;
}
.check-item.is-disabled {
  opacity: 0.5; cursor: not-allowed;
}
.check-item.is-disabled input[type="checkbox"] {
  background: #242b31; cursor: not-allowed;
}

/* Banners */
.banner {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px; border-radius: 0.5rem;
}
.banner-announcement {
  background: #4f46e5; color: #fff;
  justify-content: space-between;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.banner-companion {
  background: #1e293b; border: 1px solid #374151;
  padding: 24px; align-items: flex-start;
  position: relative; overflow: hidden;
}
.banner-success {
  background: #1e293b; border: 1px solid #334155;
  border-left: 4px solid #c3c0ff;
  padding: 16px 20px;
}
.banner .banner-icon-badge {
  background: #1a2026; padding: 8px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.banner-companion-glyph {
  position: absolute; right: -8px; top: -16px;
  opacity: 0.08; pointer-events: none;
  font-size: 140px !important;
  color: #c3c0ff;
}
.banner-button-white {
  background: #fff; color: #4f46e5;
  padding: 8px 16px; border-radius: 0.25rem;
  font-family: Inter, sans-serif; font-weight: 600; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase;
  transition: background 200ms;
  flex-shrink: 0;
}
.banner-button-white:hover { background: #e2e8f0; }

/* ---------- Language switcher ---------- */
/*
 * Injected by /assets/lang.js. Renders in one of three variants:
 *   .lang-switch[data-variant="sidebar"]   → chapter/dashboard pages
 *   .lang-switch[data-variant="nav"]       → landing-style top nav
 *   .lang-switch--floating                 → fallback when neither exists
 * Same visual language across all three — two tap-targets, current is inert.
 */
.lang-switch {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid rgba(199, 196, 216, 0.3);
  border-radius: 8px;
  overflow: hidden;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  line-height: 1;
  background: rgba(26, 32, 38, 0.6);
}
.lang-switch__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  min-width: 34px;
  color: #94a3b8;
  text-transform: uppercase;
  font-weight: 600;
  transition: background 160ms, color 160ms;
  cursor: pointer;
  user-select: none;
}
.lang-switch__item + .lang-switch__item {
  border-inline-start: 1px solid rgba(199, 196, 216, 0.25);
}
.lang-switch__item:hover:not(.is-current) {
  background: rgba(79, 70, 229, 0.14);
  color: #e2e8f0;
}
.lang-switch__item.is-current {
  background: #4f46e5;
  color: #fff;
  cursor: default;
}
/* Second glyph is Arabic — bump size a bit so ع reads as tall as EN. */
.lang-switch__item[aria-label*="التونسية"] { font-size: 15px; line-height: 1; }
/* Sidebar variant sits under the logo — give it a top margin + full block. */
.lang-switch[data-variant="sidebar"] {
  display: flex;
  margin: 0 8px 20px 8px;
  width: max-content;
}
/* Nav variant sits inline with the top-nav links — a bit tighter. */
.lang-switch[data-variant="nav"] {
  margin-right: 4px;
}
/* Floating fallback — pinned top-right. */
.lang-switch--floating {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 60;
  background: rgba(14, 20, 26, 0.95);
  backdrop-filter: blur(8px);
}

/* ---------- RTL overrides ---------- */
/*
 * Everything here activates when <html dir="rtl"> is set (see lang.js).
 * Approach:
 *   1. Prefer logical properties (margin-inline, border-inline-start) in new CSS above,
 *      so most spacing flips automatically without an override.
 *   2. This block handles the cases the source CSS wrote in physical form
 *      (left/right, translateX, chevrons), which cannot flip themselves.
 *   3. Latin-in-Arabic runs are handled with `unicode-bidi: isolate` on the
 *      containers where code, URLs, or English artifacts appear inline.
 */
html[dir="rtl"] {
  text-align: right;
}
html[dir="rtl"] body {
  /* Improve Arabic rendering. Uses Google's Noto Naskh where available, and falls
     back to system Arabic fonts, then to the site's Latin stack for any Latin
     runs. Serif for prose, sans for UI labels — see .prose-vs override below. */
  font-family:
    "Noto Naskh Arabic",
    "Amiri",
    "Segoe UI",
    "Tahoma",
    Inter,
    system-ui,
    sans-serif;
}
/* Sidebar sits on the LEFT in LTR (fixed left-0); in RTL it must sit on the RIGHT. */
html[dir="rtl"] aside.hidden.md\:flex.fixed.left-0 {
  left: auto;
  right: 0;
  border-right: 0;
  border-left: 1px solid #374151;
}
/* Chapter main content is offset by md:ml-64 to clear the sidebar. Flip in RTL. */
html[dir="rtl"] main.md\:ml-64,
html[dir="rtl"] .md\:ml-64 {
  margin-left: 0;
  margin-right: 16rem; /* mirrors ml-64 (16rem) */
}
/* Top progress rail is anchored by md:left-64 to sit past the sidebar. Flip. */
html[dir="rtl"] .progress-rail.md\:left-64 {
  left: 0;
  right: 16rem;
}
/* Border-left utility used on left-accented cards / callouts — flip. */
html[dir="rtl"] .border-l,
html[dir="rtl"] .border-l-2,
html[dir="rtl"] .border-l-4 {
  border-left: 0;
  border-right-width: var(--vs-flip-border, 2px);
  border-right-style: solid;
}
html[dir="rtl"] .border-l-2 { --vs-flip-border: 2px; }
html[dir="rtl"] .border-l-4 { --vs-flip-border: 4px; }
html[dir="rtl"] .border-l-\[6px\] {
  border-left: 0;
  border-right: 6px solid;
}
/* Padding-left utility used to clear a left border — flip. */
html[dir="rtl"] .pl-6 { padding-left: 0; padding-right: 1.5rem; }
html[dir="rtl"] .pl-4 { padding-left: 0; padding-right: 1rem; }
/* Chevrons / arrow icons in "Next / Previous" clusters — flip horizontally
   so the arrow still points in the direction of reading. */
html[dir="rtl"] .chapter-footer-nav .material-symbols-outlined,
html[dir="rtl"] .chapter-nav .material-symbols-outlined,
html[dir="rtl"] a[href*="chapters/"] .material-symbols-outlined.material-symbols-outlined,
html[dir="rtl"] .group-hover\:translate-x-1,
html[dir="rtl"] .group-hover\:-translate-x-1 {
  /* Only flip specific "arrow_forward/back" glyphs — the class match is broad,
     so we scope tighter via a data hook where possible. */
}
html[dir="rtl"] [data-arrow="forward"] .material-symbols-outlined,
html[dir="rtl"] [data-arrow="back"] .material-symbols-outlined,
html[dir="rtl"] .arrow-icon {
  transform: scaleX(-1);
}
/* Prose typography — Arabic renders more comfortably a hair larger and with
   more line-height. Latin runs inside (English artifacts, URLs) inherit fine. */
html[dir="rtl"] .prose-vs > p,
html[dir="rtl"] .prose-intro > p {
  font-size: 18px;
  line-height: 1.85;
  font-family: "Noto Naskh Arabic", "Amiri", "Georgia", serif;
}
html[dir="rtl"] .prose-vs > h2,
html[dir="rtl"] .prose-vs > h3,
html[dir="rtl"] .collapsible-header > h2 {
  font-family: "Noto Naskh Arabic", "Amiri", "Source Serif 4", serif;
  letter-spacing: 0;
}
/* Sidebar TOC guide-line hugs the LEFT edge of the item; flip in RTL. */
html[dir="rtl"] .sidebar-toc::before {
  left: auto;
  right: calc(var(--toc-line-x) - 1px);
}
html[dir="rtl"] .toc-item {
  padding-left: 12px;
  padding-right: 32px;
}
html[dir="rtl"] .toc-item .toc-dot {
  left: auto;
  right: var(--toc-line-x);
  transform: translate(50%, -50%);
}
/* Big Idea callout has a left accent stripe — flip. */
html[dir="rtl"] .prose-vs .callout-big-idea,
html[dir="rtl"] .callout-accent-left {
  border-left: 0;
  border-right: 2px solid #4f46e5;
  padding-left: 0;
  padding-right: 1.25rem;
}
/* Footnote list counter chip is absolutely positioned on the left. Flip. */
html[dir="rtl"] .footnote-list > li {
  padding: 12px 44px 12px 14px;
}
html[dir="rtl"] .footnote-list > li::before {
  left: auto;
  right: 12px;
}
/* Latin runs inside Arabic text (URLs, code snippets, English artifacts) —
   isolate so their internal LTR direction doesn't mangle the surrounding line. */
html[dir="rtl"] .prose-vs code,
html[dir="rtl"] .prose-vs a[href^="http"] {
  unicode-bidi: isolate;
  direction: ltr;
}
/* Numbers and English words drop into paragraphs frequently; keep them isolated. */
html[dir="rtl"] .prose-vs .en {
  unicode-bidi: isolate;
  direction: ltr;
}
/* Progress-fill grows from the reading-start edge. In LTR that's left; in RTL,
   it needs to sit against the right edge of its track. */
html[dir="rtl"] .progress-rail { direction: rtl; }
html[dir="rtl"] .progress-fill { margin-right: 0; margin-left: auto; }

/* Prose tables — right-align in RTL. */
html[dir="rtl"] .prose-vs th,
html[dir="rtl"] .prose-vs td { text-align: right; }

/* ============================================================
   Lightbox — in-page image zoom for figure anchors.
   Trigger: click any <a class="js-lightbox" href="[img]">…</a>.
   Renders full-viewport dimmed backdrop + centered image + close btn.
   ESC closes; click outside closes; body scroll locked while open.
   ============================================================ */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(6, 8, 20, 0.86);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  opacity: 0;
  transition: opacity 180ms ease-out;
  cursor: zoom-out;
}
.lightbox-overlay.is-open {
  display: flex;
  opacity: 1;
}
.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  transform: scale(0.98);
  transition: transform 180ms ease-out;
  cursor: default;
}
.lightbox-overlay.is-open .lightbox-img {
  transform: scale(1);
}
.lightbox-close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.20);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  transition: background 120ms ease-out;
}
.lightbox-close:hover,
.lightbox-close:focus-visible {
  background: rgba(255, 255, 255, 0.20);
  outline: none;
}
body.lightbox-open {
  overflow: hidden;
}