/* ========================================================================
   ExamStudyAid note sidebar
   Screenshot-targeted, sidebar-scoped override loaded after noteviewer.css.
   ======================================================================== */

:root {
  --nv-rail-w: 300px;
  --nv-topbar-h: 72px;
  --nv-rail-bg: #fbfaf7;
  --nv-card-bg: rgba(255, 255, 255, 0.94);
  --nv-card-border: #ece5dc;
  --nv-card-border-strong: #dfd6ca;
  --nv-sidebar-text: #101a33;
  --nv-sidebar-muted: #5f6a80;
  --nv-sidebar-faint: #9aa2b2;
  --nv-purple: var(--accent, #5a3ff2);
  --nv-purple-soft: var(--accent-soft, #f0eafe);
  --nv-purple-soft-2: var(--accent-border, #ded3fb);
  --nv-teal: var(--teal, #0f8f83);
}

.nv-canvas {
  max-width: none;
  overflow-x: clip;
}

.noteviewer-main-inner {
  padding-left: 52px;
}

.nv-canvas--no-rail .noteviewer-main-inner {
  padding-left: 44px;
}

/* Keep the sidebar visually independent from the darker legacy note styles. */
.nv-rail,
.nv-rail-drawer {
  color: var(--nv-sidebar-text);
  font-family: Inter, Satoshi, Geist, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.nv-rail * {
  box-sizing: border-box;
}

.nv-rail {
  width: var(--nv-rail-w);
  min-width: var(--nv-rail-w);
  position: sticky;
  top: var(--nv-topbar-h);
  height: calc(100vh - var(--nv-topbar-h));
  max-height: calc(100vh - var(--nv-topbar-h));
  align-self: flex-start;
  flex-shrink: 0;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-right: 1px solid #e9e1d6;
  border-radius: 0;
  background:
    radial-gradient(440px 260px at 18% 0%, rgba(91, 61, 245, 0.055), transparent 65%),
    linear-gradient(180deg, #fffdf9 0%, var(--nv-rail-bg) 100%);
  box-shadow: none;
  isolation: isolate;
}

.nv-rail::before,
.nv-rail::after {
  display: none;
}

.nv-rail-shell,
.nv-rail-drawer-scroll {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 16px 12px;
}

.nv-rail-shell {
  padding-top: 12px;
}

.nv-rail-card {
  flex-shrink: 0;
  border: 1px solid var(--nv-card-border);
  border-radius: 14px;
  background: var(--nv-card-bg);
  box-shadow:
    0 1px 1px rgba(25, 20, 12, 0.018),
    0 8px 22px rgba(25, 20, 12, 0.025),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.nv-rail-card-label {
  margin: 0 0 9px;
  color: #4f5b72;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.1;
  text-transform: uppercase;
}

/* Progress card */
.nv-progress-card {
  display: grid;
  grid-template-columns: 47px minmax(0, 1fr);
  gap: 15px;
  min-height: 104px;
  padding: 20px 18px 17px;
}

.nv-progress-icon {
  width: 47px;
  height: 47px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dfd7ef;
  border-radius: 999px;
  background: #f5f0ff;
  color: var(--nv-purple);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.nv-progress-body {
  min-width: 0;
}

.nv-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.nv-progress-row .nv-rail-card-label {
  margin-bottom: 0;
}

.nv-rail-progress-pct {
  color: var(--nv-purple);
  font-size: 0.9375rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.nv-rail-progress-track {
  width: 100%;
  height: 7px;
  margin-top: 11px;
  overflow: hidden;
  border-radius: 999px;
  background: #d9d7d9;
  box-shadow: none;
}

.nv-rail-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3b5bdb 0%, #4f6ff2 100%);
  box-shadow: none;
  transition: width 0.35s ease;
}

.nv-progress-note {
  margin: 11px 0 0;
  color: #6f788b;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
}

/* Current chapter card */
.nv-current-card {
  min-height: 74px;
  padding: 17px 18px 16px;
}

.nv-current-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.nv-current-title {
  margin: 0;
  min-width: 0;
  color: var(--nv-sidebar-text);
  font-size: 1.0625rem;
  font-weight: 850;
  letter-spacing: -0.025em;
  line-height: 1.18;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nv-rail-exam-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 23px;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  background: #f0e8ff;
  color: var(--nv-purple);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* This chapter card */
.nv-this-card {
  padding: 17px 18px 13px;
}

.nv-rail-sections {
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  max-height: 146px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(96, 84, 128, 0.18) transparent;
}

.nv-rail-sections::-webkit-scrollbar {
  width: 4px;
}

.nv-rail-sections::-webkit-scrollbar-thumb {
  background: rgba(96, 84, 128, 0.16);
  border-radius: 999px;
}

.nv-rail-sections-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nv-rail-sections-list li {
  margin: 0;
  padding: 0;
}

.nv-rail-sections-list a {
  min-height: 28px;
  display: flex;
  align-items: center;
  padding: 5px 0;
  color: var(--nv-sidebar-text);
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: 0.875rem;
  font-weight: 760;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nv-rail-sections-list a:hover,
.nv-rail-sections-list a.is-active {
  color: var(--nv-purple);
  background: transparent;
}

.nv-section-item--level-3 a {
  min-height: 24px;
  padding-left: 13px;
  color: #667086;
  font-size: 0.8125rem;
  font-weight: 650;
}

.nv-section-item--level-4 a {
  min-height: 23px;
  padding-left: 24px;
  color: #7b8495;
  font-size: 0.78125rem;
  font-weight: 600;
}

.nv-section-item--level-3 a::before,
.nv-section-item--level-4 a::before {
  content: '';
  width: 4px;
  height: 4px;
  margin-right: 7px;
  border-radius: 999px;
  background: #c5cbd6;
  flex-shrink: 0;
}

.nv-section-item--level-3 a:hover::before,
.nv-section-item--level-4 a:hover::before,
.nv-section-item--level-3 a.is-active::before,
.nv-section-item--level-4 a.is-active::before {
  background: var(--nv-purple);
}

/* Chapter navigator card */
.nv-nav-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 16px 10px 10px;
}

.nv-nav-card > .nv-rail-card-label {
  padding: 0 8px;
  margin-bottom: 10px;
}

.nv-rail-nav,
.nv-rail-drawer-nav {
  min-height: 0;
  overflow-y: auto;
  padding: 0 2px 0 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(96, 84, 128, 0.22) transparent;
}

.nv-rail-nav {
  flex: 1 1 auto;
}

.nv-rail-nav::-webkit-scrollbar,
.nv-rail-drawer-nav::-webkit-scrollbar {
  width: 4px;
}

.nv-rail-nav::-webkit-scrollbar-track,
.nv-rail-drawer-nav::-webkit-scrollbar-track {
  background: transparent;
}

.nv-rail-nav::-webkit-scrollbar-thumb,
.nv-rail-drawer-nav::-webkit-scrollbar-thumb {
  background: rgba(96, 84, 128, 0.18);
  border-radius: 999px;
}

.sidebar-tree {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-node {
  margin: 0;
}

.sidebar-node:has(.sidebar-toggle) {
  margin: 0;
}

.sidebar-toggle,
.sidebar-link {
  width: 100%;
  outline-offset: 2px;
}

.sidebar-toggle:focus-visible,
.sidebar-link:focus-visible,
.nv-action-item:focus-visible,
.nv-rail-trigger:focus-visible,
.nv-rail-drawer-close:focus-visible {
  outline: 2px solid rgba(91, 61, 245, 0.35);
}

.sidebar-toggle {
  min-height: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 10px 7px 11px;
  border: 1px solid #eae2d8;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--nv-sidebar-text);
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 850;
  letter-spacing: -0.02em;
  line-height: 1.18;
  text-align: left;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}

.sidebar-toggle.open {
  border-color: #ddd0fb;
  background: linear-gradient(180deg, #f5f0ff 0%, #f0eafa 100%);
  color: var(--nv-sidebar-text);
}

.sidebar-toggle:hover {
  border-color: #ddd0fb;
  background: #f8f4ff;
}

.sidebar-node-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-toggle .sidebar-node-title {
  display: block;
  white-space: normal;
}

.sidebar-toggle-icon {
  display: inline-flex;
  grid-column: 3;
  justify-self: end;
  color: var(--nv-purple);
  transition: transform 0.18s ease;
}

.sidebar-toggle.open .sidebar-toggle-icon {
  transform: rotate(-90deg);
}

.sidebar-premium-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 9px;
  border-radius: 999px;
  background: #f0eaff;
  color: var(--nv-purple);
  font-size: 0.59375rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.sidebar-toggle.is-paid {
  color: #1f2b44;
}

.sidebar-toggle.is-paid .sidebar-node-title,
.sidebar-link.is-paid .sidebar-node-title {
  color: #1f2b44;
}

.sidebar-children {
  position: relative;
  margin: 6px 0 8px 14px;
  padding: 0 0 0 16px;
  border-left: 1.5px solid #dddce5;
  background: transparent;
}

.sidebar-children .sidebar-children {
  margin: 4px 0 5px 10px;
  padding-left: 13px;
  border-left-color: #e2e3ea;
}

.sidebar-children.collapsed {
  display: none;
}

.sidebar-link {
  min-height: 30px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  margin: 0 0 1px;
  padding: 6px 8px 6px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #25304a;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}

.sidebar-link::before {
  content: '';
  position: absolute;
  left: -20.5px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #cfd2dc;
  transform: translate(-50%, -50%);
}

.sidebar-link:hover {
  background: #faf7ff;
  color: var(--nv-purple);
}

.sidebar-link.is-active {
  border-color: #dacffc;
  background: linear-gradient(180deg, #e9ddff 0%, #dcd0fb 100%);
  color: var(--nv-purple);
  font-weight: 850;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.sidebar-link.is-active::before {
  width: 14px;
  height: 14px;
  background: var(--nv-purple);
  box-shadow: 0 0 0 4px #ede7ff;
}

.sidebar-link.is-paid {
  color: #7f8898;
}

.sidebar-link.is-paid:hover {
  color: var(--nv-purple);
}

.lock-icon {
  display: none !important;
}

/* Also practice card */
.nv-practice-card {
  padding: 12px 10px 10px;
}

.nv-practice-card .nv-rail-card-label {
  padding: 0 8px;
  margin-bottom: 8px;
}

.nv-rail-actions-list {
  display: grid;
  gap: 8px;
}

.nv-action-item {
  min-height: 38px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border: 1px solid #e8dfd3;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--nv-purple);
  font-size: 0.9375rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  transition: background 0.14s, border-color 0.14s, transform 0.14s;
}

.nv-action-item:hover {
  border-color: #d9ccfb;
  background: #fbf8ff;
  transform: translateY(-1px);
}

.nv-action-item::after {
  content: '';
  width: 8px;
  height: 8px;
  justify-self: center;
  border-top: 1.7px solid currentColor;
  border-right: 1.7px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.62;
}

.nv-action-icon {
  width: 18px;
  height: 18px;
  color: currentColor;
}

.nv-action-item--questions {
  color: var(--nv-teal);
}

/* Theme toggle card in sidebar */
.nv-theme-card {
  padding: 8px 10px;
  flex-shrink: 0;
}

.nv-rail .nv-practice-card {
  padding: 9px 10px;
}

.nv-rail .nv-practice-card .nv-rail-card-label {
  display: none;
}

.nv-rail .nv-rail-actions-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.nv-rail .nv-theme-card {
  display: none;
}

.nv-theme-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--nv-sidebar-muted);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}

.nv-theme-toggle:hover {
  background: rgba(91, 63, 242, 0.065);
  border-color: rgba(91, 63, 242, 0.12);
  color: var(--nv-purple);
}

.nv-theme-icon {
  flex-shrink: 0;
  opacity: 0.62;
  transition: opacity 0.14s;
}

.nv-theme-toggle:hover .nv-theme-icon {
  opacity: 0.90;
}

.nv-theme-label {
  line-height: 1;
}

/* Show/hide sun/moon based on theme */
html.theme-dark .nv-theme-icon--sun { display: none; }
html.theme-light .nv-theme-icon--moon { display: none; }

/* Flashcard mastery card */
.nv-mastery-card {
  padding: 14px 16px;
}

.nv-rail-mastery-text {
  margin: 0 0 10px;
  color: var(--nv-sidebar-muted);
  font-size: 0.8125rem;
  line-height: 1.35;
}

.nv-rail-mastery-pct {
  color: var(--nv-purple);
  font-weight: 900;
}

.nv-rail-mastery-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #dedce3;
}

.nv-rail-mastery-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--nv-purple);
}

/* Drawer */
.nv-rail-trigger {
  display: none;
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 90;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid #ded4c8;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--nv-purple);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 850;
  box-shadow: 0 10px 26px rgba(17, 20, 30, 0.12);
  cursor: pointer;
}

.nv-rail-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(16, 22, 40, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.22s;
}

.nv-rail-backdrop.is-open {
  display: block;
  opacity: 1;
}

.nv-rail-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 101;
  width: min(352px, 94vw);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-right: 1px solid #e8dfd3;
  border-radius: 0;
  background: var(--nv-rail-bg);
  box-shadow: 18px 0 50px rgba(17, 20, 30, 0.18);
  transform: translateX(-100%);
  transition: transform 0.26s ease;
}

.nv-rail-drawer.is-open {
  transform: translateX(0);
}

@media (min-width: 861px) {
  .nv-rail-trigger,
  .nv-rail-backdrop,
  .nv-rail-drawer {
    display: none !important;
  }

  .nv-rail-backdrop {
    opacity: 0 !important;
  }

  .nv-rail-drawer {
    transform: translateX(-100%) !important;
  }
}

.nv-rail-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 16px 14px;
  border-bottom: 1px solid #eee6dc;
  background: #fffdf9;
}

.nv-rail-drawer-close {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e8dfd3;
  border-radius: 10px;
  background: #fff;
  color: #1c2540;
  cursor: pointer;
}

.nv-rail-drawer-scroll {
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 12px;
}

.nv-rail-drawer .nv-nav-card {
  flex: 0 0 auto;
  max-height: none;
}

.nv-rail-drawer .nv-rail-drawer-nav {
  max-height: none;
}

/* Responsive */
@media (max-width: 1240px) {
  :root {
    --nv-rail-w: 296px;
  }

  .noteviewer-main-inner {
    padding-left: 42px;
  }
}

@media (max-width: 1080px) {
  :root {
    --nv-rail-w: 286px;
  }

  .noteviewer-main-inner {
    padding-left: 34px;
  }
}

@media (max-width: 860px) {
  .layout,
  .noteviewer-layout {
    grid-template-columns: 1fr;
  }

  .nv-canvas {
    flex-direction: column;
    align-items: stretch;
  }

  .nv-rail {
    display: none;
  }

  .nv-rail-trigger {
    display: flex;
  }

  .noteviewer-main-inner {
    padding: 30px 24px 58px;
  }
}

@media (max-width: 520px) {
  .noteviewer-main-inner {
    padding: 22px 16px 44px;
  }

  .nv-rail-drawer {
    width: 100vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nv-rail,
  .nv-rail-progress-fill,
  .sidebar-toggle,
  .sidebar-link,
  .nv-action-item,
  .nv-rail-drawer,
  .nv-rail-backdrop {
    transition: none;
  }
}

/* ========================================================================
   Final fidelity polish: softer cards, cleaner type, light/dark support.
   ======================================================================== */

.nv-rail-shell,
.nv-rail-drawer-scroll {
  gap: 5px;
  padding: 6px 16px 8px;
}

.nv-rail-card {
  border-color: rgba(111, 121, 143, 0.16);
  box-shadow:
    0 1px 1px rgba(20, 24, 38, 0.012),
    0 8px 18px rgba(20, 24, 38, 0.022),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.nv-rail-card-label {
  color: #4d5870;
  font-size: 0.65625rem;
  font-weight: 760;
  letter-spacing: 0.145em;
}

.nv-progress-card {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  min-height: 78px;
  padding: 13px 14px 12px;
}

.nv-progress-icon {
  width: 38px;
  height: 38px;
}

.nv-rail-progress-track {
  height: 6px;
  margin-top: 9px;
}

.nv-progress-note {
  display: none;
}

.nv-current-card {
  min-height: 56px;
  padding: 11px 14px 12px;
}

.nv-current-title {
  color: #14203a;
  font-weight: 780;
}

.nv-this-card {
  padding: 11px 12px 9px;
}

.nv-this-card .nv-rail-card-label {
  margin-bottom: 6px;
}

.nv-rail-sections {
  max-height: 94px;
}

.nv-nav-card {
  flex: 1 1 340px;
  padding: 14px 9px 8px;
}

.nv-nav-card > .nv-rail-card-label {
  margin-bottom: 8px;
}

.nv-rail-exam-badge,
.sidebar-premium-pill {
  background: #f2edff;
  color: #5d42e8;
  font-weight: 760;
}

.sidebar-toggle {
  min-height: 34px;
  border-color: rgba(111, 121, 143, 0.14);
  background: rgba(255, 255, 255, 0.74);
  color: #17233d;
  font-weight: 780;
}

.sidebar-toggle.open {
  border-color: rgba(91, 63, 242, 0.13);
  background: #f4f0ff;
}

.sidebar-toggle.is-paid,
.sidebar-toggle.is-paid .sidebar-node-title,
.sidebar-link.is-paid .sidebar-node-title {
  color: #566177;
}

.sidebar-toggle.is-paid {
  background: rgba(255, 255, 255, 0.66);
}

.sidebar-children {
  border-left-color: rgba(117, 126, 146, 0.20);
}

.sidebar-link {
  min-height: 29px;
  color: #26314a;
  font-size: 0.796875rem;
  font-weight: 620;
}

.sidebar-link::before {
  background: #d4d7df;
}

.sidebar-link:hover {
  background: rgba(91, 63, 242, 0.045);
}

.sidebar-link.is-active {
  border-color: transparent;
  background: #e6dcff;
  color: #5137df;
  font-weight: 760;
  box-shadow: none;
}

.sidebar-link.is-active::before {
  width: 12px;
  height: 12px;
  background: #6346f2;
  box-shadow: 0 0 0 4px #f0ebff;
}

.sidebar-link.is-paid {
  color: #7c8492;
}

.sidebar-node--paid .sidebar-premium-pill {
  background: #f5f1ff;
  color: #6b51e8;
  opacity: 0.86;
}

.nv-action-item {
  min-height: 34px;
  border-color: rgba(111, 121, 143, 0.16);
  color: #5b3df5;
  font-size: 0.90625rem;
  font-weight: 760;
  padding-top: 6px;
  padding-bottom: 6px;
}

.nv-action-item:hover {
  border-color: rgba(91, 63, 242, 0.18);
  background: #fbf9ff;
}

.nv-action-item--questions {
  color: #11887e;
}

/* Premium reader rail structure.
   This intentionally sits after the legacy fidelity layer above because those
   earlier duplicate rules are the active source for the rail geometry.
   The .nv-rail-header element was retired with the sidebar back-action
   experiment — the rail now starts directly with the Progress card. */
.nv-rail-shell,
.nv-rail-drawer-scroll {
  gap: 8px;
  padding: 14px 12px 12px;
}

.nv-rail-card {
  border-radius: 12px;
  box-shadow: none;
}

.nv-progress-card {
  display: block;
  min-height: 0;
  padding: 10px 10px 11px;
  border-radius: 10px;
}

.nv-progress-icon,
.nv-progress-note {
  display: none;
}

.nv-progress-body {
  width: 100%;
}

.nv-progress-row {
  gap: 10px;
}

.nv-rail-progress-pct {
  font-size: 0.75rem;
  font-weight: 720;
}

.nv-rail-progress-track {
  height: 3px;
  margin-top: 8px;
}

.nv-nav-card {
  flex: 1 1 320px;
  padding: 10px 6px 8px;
}

.nv-nav-card > .nv-rail-card-label {
  padding: 0 8px;
  margin-bottom: 7px;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
}

.nv-rail-nav,
.nv-rail-drawer-nav {
  padding-right: 1px;
}

.sidebar-tree {
  gap: 4px;
}

.sidebar-toggle {
  min-height: 38px;
  padding: 8px 8px 8px 10px;
  border-radius: 10px;
  font-size: 0.8125rem;
  font-weight: 740;
  line-height: 1.30;
}

.sidebar-toggle-icon {
  color: currentColor;
  opacity: 0.36;
}

.sidebar-premium-pill {
  height: 17px;
  padding: 0 6px;
  font-size: 0.53125rem;
  font-weight: 720;
}

.sidebar-children,
.sidebar-children .sidebar-children {
  margin: 5px 0 7px 4px;
  padding-left: 7px;
  border-left-color: transparent;
  border-left-width: 1px;
}

.sidebar-link {
  min-height: 32px;
  padding: 7px 8px 7px 11px;
  border-radius: 9px;
  font-size: 0.78125rem;
  font-weight: 580;
  line-height: 1.35;
}

.sidebar-link::before {
  left: 4px;
  width: 4px;
  height: 4px;
  opacity: 0;
  top: 50%;
  transform: translateY(-50%);
}

.sidebar-link.is-active::before {
  width: 5px;
  height: 5px;
  opacity: 1;
}

.sidebar-node-title {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.nv-practice-card {
  padding: 8px;
  border-radius: 12px;
}

.nv-rail .nv-practice-card {
  padding: 8px;
}

.nv-rail-actions-list,
.nv-rail .nv-rail-actions-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.nv-action-item {
  min-height: 32px;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 7px;
  padding: 6px 8px;
  border-radius: 9px;
  font-size: 0.78125rem;
  font-weight: 690;
}

.nv-action-item::after {
  content: none;
}

.nv-action-icon {
  width: 15px;
  height: 15px;
}

.nv-rail-drawer {
  width: min(320px, 94vw);
}

.nv-rail-drawer-head {
  align-items: center;
  padding: 14px 14px 12px;
}

.nv-rail-drawer-scroll {
  padding: 8px 10px 12px;
}

.nv-rail-drawer .nv-nav-card {
  flex: 1 1 auto;
}

.noteviewer-main-inner {
  padding-left: clamp(28px, 3vw, 42px);
}

@media (max-width: 860px) {
  .noteviewer-main-inner {
    padding-left: 24px;
  }
}

@media (max-width: 520px) {
  .noteviewer-main-inner {
    padding-left: 16px;
  }
}

/* ========================================================================
   Desktop content-anchored study layout
   ──────────────────────────────────────────────────────────────────────
   The note/resource column is the visual anchor — it is centred in the
   viewport, and the rail docks immediately to its left with a controlled
   gap. When there is not enough room for the rail to fit beside a
   centred column, the rail clamps to a safe left margin and the content
   shifts only as much as necessary to make room.

   Visual order on a wide screen:
     viewport-edge | rail-left | rail | gap | content (centred) | edge

   Below the activation breakpoint, the prior edge-rail responsive system
   takes over so smaller screens don't sacrifice note space.
   ======================================================================== */
:root {
  --nv-shell-gap: clamp(24px, 2vw, 32px);
  --nv-page-pad: 20px;
  /* The resource STAGE width — header, body, and stage background all live
     inside this column. The reading text inside .note-body is further
     constrained by --nv-reader-width so paragraphs stay readable. */
  --nv-content-max: 1020px;
}

/* Resource-specific stage widths. Card-based resources (flashcards, MCQ,
   topic questions) want slightly more horizontal room; notes / summaries /
   videos stay at the default 1020px. Detection is :has()-based so no
   template changes are required. */
.nv-canvas:has(.flashcard-viewer),
.nv-canvas:has(.fc-card-system),
.nv-canvas:has(.mcq-list),
.nv-canvas:has(.question-list) {
  --nv-content-max: 1080px;
}

@media (min-width: 1280px) {
  .nv-canvas {
    /* The rail width that the layout reserves. Switches to the collapsed
       width when the rail is collapsed so content recentres gracefully. */
    --nv-shell-rail: var(--nv-rail-w);

    /* Where a perfectly centred content column would start. */
    --nv-content-ideal-left: calc((100vw - var(--nv-content-max)) / 2);

    /* Rail docks just left of the ideal content column, but clamps to the
       page padding when the viewport is too narrow for that to fit. */
    --nv-rail-left: max(
      var(--nv-page-pad),
      calc(var(--nv-content-ideal-left) - var(--nv-shell-gap) - var(--nv-shell-rail))
    );

    /* Content stays centred unless the rail (clamped to the left) forces
       it to shift right. */
    --nv-content-left: max(
      var(--nv-content-ideal-left),
      calc(var(--nv-rail-left) + var(--nv-shell-rail) + var(--nv-shell-gap))
    );

    padding-left: var(--nv-rail-left);
    padding-right: var(--nv-page-pad);
    column-gap: var(--nv-shell-gap);
    max-width: none;
  }

  /* Pages without a rail (topic landing, resource index) — centre content
     on its own without reserving phantom rail space. */
  .nv-canvas--no-rail,
  .nv-canvas:not(:has(.nv-rail)) {
    --nv-shell-rail: 0px;
    --nv-shell-gap: 0px;
    padding-left: max(var(--nv-page-pad), calc((100vw - var(--nv-content-max)) / 2));
    padding-right: max(var(--nv-page-pad), calc((100vw - var(--nv-content-max)) / 2));
  }

  /* The inner column anchors against the gap — flex flow puts main right
     after the rail+column-gap, and main-inner is left-aligned with a
     resource-specific max-width. The content body (note-body, header,
     etc.) is then centred inside this column, naturally matching the
     viewport-centred ideal because the column itself is centred. */
  .noteviewer-main-inner {
    padding-left: 0;
    padding-right: 0;
    max-width: var(--nv-content-max);
    margin-left: 0;
    margin-right: auto;
    width: 100%;
  }
}

/* This Chapter: selected-card hierarchy, no decorative icon system. */
.nv-this-card .nv-rail-sections-list {
  gap: 3px;
}

.nv-this-card .nv-section-item--level-2 > a {
  min-height: 32px;
  padding: 8px 10px;
  border-radius: 10px;
  color: #16213b;
  font-size: 0.84375rem;
  font-weight: 720;
}

.nv-this-card .nv-section-item--level-2:first-child > a,
.nv-this-card .nv-section-item--level-2 > a.is-active {
  background: linear-gradient(180deg, #f0ebff 0%, #ebe4ff 100%);
  color: #5638e8;
  box-shadow: 0 5px 16px rgba(91, 63, 242, 0.055);
}

.nv-this-card .nv-section-item--level-3 > a {
  min-height: 27px;
  margin-left: 13px;
  padding: 5px 9px 5px 17px;
  border-radius: 9px;
  color: #5e697d;
  font-size: 0.78125rem;
  font-weight: 560;
  position: relative;
}

.nv-this-card .nv-section-item--level-3 > a::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: 0;
  border-radius: 999px;
  background: rgba(99, 70, 242, 0.54);
  transform: translateY(-50%);
}

.nv-this-card .nv-section-item--level-3 > a.is-active,
.nv-this-card .nv-section-item--level-3:first-of-type > a {
  background: rgba(91, 63, 242, 0.065);
  color: #5638e8;
}

.nv-this-card .nv-section-item--level-3 > a.is-active::before,
.nv-this-card .nv-section-item--level-3:first-of-type > a::before {
  background: #6346f2;
}

/* Keep bold text from becoming visually darker than the surrounding copy. */
.note-body strong,
.noteviewer-body strong {
  color: inherit;
}

/* ========================================================================
   NOTE READER SIDEBAR — single-source polish layer
   --------------------------------------------------------------------------
   Refactored from previously stacked override layers into one unified
   navy/periwinkle system. Matches the Claude Design mockup:
     – Sidebar = dark navy (not black), softly layered panels.
     – Chapter rows = calm outline, not boxy mini-cards.
     – Open chapter = periwinkle selected state.
     – Active topic = clear, mature, professional.
     – Premium = small cool violet/platinum pill (only place violet appears).
     – No amber/brown/champagne/gold in the dark sidebar.

   theme-dark.css loads AFTER this file. The final lift block at the bottom
   of that file is the source of truth for dark-mode rail material; this
   block stays aligned for cascade safety. Typography & spacing apply
   globally; colour rules are html.theme-dark-scoped to keep light mode
   untouched.
   ======================================================================== */

/* ── Typography & spacing (both themes) ────────────────────────────── */

/* Chapter row — structured outline layout.
   Free row:    [number] [title]                  [chevron]
   Paid row:    [number] [title]                  [chevron]
                [.....]  [Premium pill]           [.......]
   Areas-based grid keeps the chevron centred and gives the Premium pill
   its own row so long titles never get crowded. Vertical alignment
   anchors the number to the first line of the title. */
.sidebar-toggle {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 16px;
  grid-template-areas:
    "num title chevron"
    ".   meta  chevron";
  align-items: start;
  column-gap: 8px;
  row-gap: 4px;
  font-size: 0.875rem;        /* 14px — readable chapter label */
  font-weight: 720;
  line-height: 1.34;
  letter-spacing: -0.012em;
  min-height: 38px;
  padding: 10px 10px;
  border-radius: 10px;
}

.sidebar-chapter-number {
  grid-area: num;
  justify-self: start;
  align-self: start;
  padding-top: 1px;           /* aligns with the first line of the title */
  font-size: 0.78125rem;      /* ~12.5px */
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.34;
  color: #8fa0bb;
  letter-spacing: 0;
}

.sidebar-toggle .sidebar-node-title {
  grid-area: title;
  align-self: start;
  font-size: 0.875rem;        /* 14px */
  font-weight: 760;
  line-height: 1.34;
  color: #d9e4f6;
  min-width: 0;
}

.sidebar-toggle .sidebar-node-title--no-number {
  grid-column: 1 / 3;
  grid-row: 1;
}

/* Premium pill drops onto its own row, aligned under the title text with
   a clean breathing gap. Starts under the title column, never under the
   chapter number. */
.sidebar-toggle .sidebar-premium-pill {
  grid-area: meta;
  justify-self: start;
  align-self: start;
  margin-top: 5px;
}

.sidebar-toggle .sidebar-toggle-icon {
  grid-area: chevron;
  justify-self: end;
  align-self: center;
}

/* Topic row — same outline grid, no premium-pill column needed. */
.sidebar-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 7px;
  font-size: 0.875rem;        /* 14px — readable topic label */
  font-weight: 620;
  line-height: 1.42;
  min-height: 34px;
  /* Padding-left widened from 14 → 22 so the active ::before bullet
     (at left: 6px + 6px wide, plus a 3px glow ring) has ~9px of clear
     breathing room before the title text. Applied to .sidebar-link
     itself so inactive items align with active ones on the same x —
     no horizontal jump when a topic becomes active. */
  padding: 8px 10px 8px 22px;
  border-radius: 9px;
}

.sidebar-link .sidebar-node-title {
  grid-column: 1;
  min-width: 0;
}

.sidebar-link .sidebar-premium-pill {
  grid-column: 2;
  align-self: center;
}

.sidebar-children,
.sidebar-children .sidebar-children {
  margin: 6px 0 10px 6px;
  padding-left: 10px;
}

.nv-rail-card-label {
  font-size: 0.6875rem;       /* 11px — uppercase rail label */
  letter-spacing: 0.14em;
  font-weight: 760;
}

.nv-rail-progress-pct {
  font-size: 0.875rem;        /* 14px — clear percentage */
  font-weight: 800;
}

.sidebar-premium-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: auto;
  padding: 3px 7px;
  font-size: 0.65625rem;      /* ~10.5px */
  font-weight: 800;
  border-radius: 999px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.sidebar-premium-pill::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: #a5b4fc;
  flex-shrink: 0;
}

.nv-action-item {
  min-height: 38px;
  font-size: 0.875rem;        /* 14px */
  font-weight: 720;
  padding: 8px 10px;
  letter-spacing: -0.005em;
  border-radius: 10px;
}

.nv-action-icon {
  width: 17px;
  height: 17px;
}

/* Progress card — small premium module */
.nv-progress-card {
  padding: 14px 16px;
  border-radius: 14px;
}

.nv-rail-progress-track {
  height: 4px;
  margin-top: 10px;
  border-radius: 999px;
}

/* ── Dark-mode tokens — unified navy/periwinkle system ─────────────── */
html.theme-dark {
  /* Rail material — midnight navy aligned with the homepage/MCQ atmosphere. */
  --rail-bg-top: #0b1020;
  --rail-bg-mid: #080d19;
  --rail-bg-bottom: #050812;

  /* Panel surfaces. */
  --rail-panel-top: rgba(13, 20, 38, 0.92);
  --rail-panel-bot: rgba(7, 12, 24, 0.96);
  --rail-panel-border: rgba(148, 163, 184, 0.13);

  /* Chapter row states. */
  --rail-row-hover-bg: rgba(129, 169, 255, 0.06);
  --rail-row-hover-border: rgba(129, 169, 255, 0.18);
  --rail-row-open-top: rgba(25, 38, 68, 0.76);
  --rail-row-open-bot: rgba(17, 27, 50, 0.82);
  --rail-row-open-border: rgba(129, 169, 255, 0.28);

  /* Topic active state. */
  --rail-topic-active-border: rgba(129, 169, 255, 0.36);

  /* Text. */
  --rail-text: #f2f6ff;
  --rail-text-soft: #c8d2e3;
  --rail-muted: #9aa8bd;
  --rail-faint: #7a8499;

  /* Accents. */
  --rail-accent: #60a5fa;
  --rail-teal: #5eead4;

  /* Premium pill — cool platinum/periwinkle, badge only. Quiet and deliberate. */
  --rail-premium-bg-top: rgba(226, 232, 240, 0.12);
  --rail-premium-bg-bot: rgba(129, 140, 248, 0.10);
  --rail-premium-border: rgba(199, 210, 254, 0.26);
  --rail-premium-border-hover: rgba(199, 210, 254, 0.42);
  --rail-premium-text: #dbeafe;
  --rail-premium-dot: #a5b4fc;
  --rail-premium-icon: rgba(199, 210, 254, 0.86);

  /* Legacy aliases used by older shared rules. */
  --nv-purple: var(--rail-muted);
  --nv-purple-soft: rgba(129, 140, 248, 0.10);
  --nv-purple-soft-2: rgba(129, 140, 248, 0.22);
  --nv-teal: var(--rail-teal);
}

/* ── Rail surface — midnight navy with a very restrained blue crown.
   Editorial, homepage-aligned. */
html.theme-dark .nv-rail,
html.theme-dark .nv-rail-drawer {
  background:
    radial-gradient(520px 220px at 50% -12%, rgba(59, 130, 246, 0.055), transparent 58%),
    linear-gradient(180deg, #0b1020 0%, #080d19 52%, #050812 100%);
  border-right-color: rgba(148, 163, 184, 0.10);
  color: var(--rail-text);
  box-shadow: none;
}

html.theme-dark .nv-theme-toggle:hover {
  background: rgba(129, 169, 255, 0.07);
  border-color: rgba(129, 169, 255, 0.18);
  color: var(--rail-text);
}

/* ── Cards — soft layered navy panels (editorial, not stacked cards).
   Slightly darker to align with the homepage / MCQ card DNA. */
html.theme-dark .nv-rail-card,
html.theme-dark .nv-progress-card,
html.theme-dark .nv-nav-card {
  border-color: rgba(148, 163, 184, 0.13);
  background: linear-gradient(180deg, rgba(13, 20, 38, 0.92) 0%, rgba(7, 12, 24, 0.96) 100%);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.030);
  border-radius: 14px;
}

html.theme-dark .nv-progress-card {
  padding: 14px 16px;
}

html.theme-dark .nv-rail-card-label {
  color: #aebbd4;
}

html.theme-dark .nv-progress-row .nv-rail-card-label {
  color: #aebbd4;
}

html.theme-dark .nv-rail-progress-pct,
html.theme-dark .nv-rail-mastery-pct {
  color: #edf4ff;
  font-weight: 800;
}

html.theme-dark .nv-rail-progress-track,
html.theme-dark .nv-rail-mastery-track {
  height: 4px;
  background: rgba(148, 163, 184, 0.18);
  box-shadow: none;
  border-radius: 999px;
}

html.theme-dark .nv-rail-progress-fill,
html.theme-dark .nv-rail-mastery-fill {
  background: linear-gradient(90deg, #60a5fa 0%, #2dd4bf 100%);
  box-shadow: 0 0 6px rgba(45, 212, 191, 0.18);
  border-radius: 999px;
}

html.theme-dark .nv-progress-icon {
  background: rgba(129, 140, 248, 0.10);
  border-color: rgba(129, 140, 248, 0.22);
  color: #c7d2fe;
}

html.theme-dark .nv-progress-note,
html.theme-dark .nv-rail-mastery-text {
  color: var(--rail-muted);
}

/* ── Premium pill — cool platinum/periwinkle access chip ──────────────
   The only place violet-tinted colour appears. Calm, low saturation,
   "premium" through restraint rather than tagging. */
html.theme-dark .sidebar-premium-pill {
  background: linear-gradient(180deg, var(--rail-premium-bg-top) 0%, var(--rail-premium-bg-bot) 100%);
  border: 1px solid var(--rail-premium-border);
  color: var(--rail-premium-text);
  box-shadow: none;
}

html.theme-dark .sidebar-premium-pill::before {
  background: var(--rail-premium-dot);
  box-shadow: none;
}

html.theme-dark .sidebar-toggle.is-paid:hover .sidebar-premium-pill,
html.theme-dark .sidebar-link.is-paid:hover .sidebar-premium-pill {
  border-color: var(--rail-premium-border-hover);
}

/* Exam badge — periwinkle subject tag (not a paid pill). */
html.theme-dark .nv-rail-exam-badge {
  background: rgba(129, 140, 248, 0.14);
  border: 1px solid rgba(129, 140, 248, 0.26);
  color: #c7d2fe;
  font-weight: 720;
}

/* ── Chapter rows — clean study outline, not boxy mini-cards ─────────
   Closed row stays calm and almost transparent. The container panel does
   the "card" job; rows are structured items inside it. */
html.theme-dark .sidebar-toggle {
  border: 1px solid rgba(148, 163, 184, 0.08);
  background: rgba(10, 16, 31, 0.44);
  color: var(--rail-text-soft);
  font-weight: 720;
  box-shadow: none;
}

html.theme-dark .sidebar-toggle .sidebar-node-title {
  color: var(--rail-text-soft);
}

html.theme-dark .sidebar-toggle .sidebar-chapter-number {
  color: rgba(143, 160, 187, 0.86);
}

html.theme-dark .sidebar-toggle:hover {
  border-color: rgba(129, 169, 255, 0.20);
  background: rgba(129, 169, 255, 0.075);
  color: var(--rail-text);
}

html.theme-dark .sidebar-toggle:hover .sidebar-node-title {
  color: var(--rail-text);
}

html.theme-dark .sidebar-toggle:hover .sidebar-chapter-number {
  color: rgba(199, 210, 254, 0.92);
}

/* Open/current chapter — strongest chapter-level state.
   Applies to any chapter (free or paid) when it is open. */
html.theme-dark .sidebar-toggle.open {
  border-color: rgba(129, 169, 255, 0.28);
  background: linear-gradient(180deg, rgba(25, 38, 68, 0.76) 0%, rgba(17, 27, 50, 0.82) 100%);
  color: #f3f7ff;
  font-weight: 800;
  box-shadow:
    inset 2px 0 0 rgba(96, 165, 250, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html.theme-dark .sidebar-toggle.open .sidebar-node-title {
  color: #f3f7ff;
  font-weight: 800;
}

html.theme-dark .sidebar-toggle.open .sidebar-chapter-number {
  color: rgba(199, 215, 255, 0.96);
}

/* Paid chapter — same navy outline material as a free chapter.
   Premium is signalled by the pill + chevron tint only, never by
   recolouring the row. */
html.theme-dark .sidebar-toggle.is-paid {
  border-color: rgba(148, 163, 184, 0.08);
  background: rgba(10, 16, 31, 0.44);
  color: var(--rail-text-soft);
}

html.theme-dark .sidebar-toggle.is-paid:hover {
  border-color: rgba(129, 169, 255, 0.20);
  background: rgba(129, 169, 255, 0.075);
  color: var(--rail-text);
}

html.theme-dark .sidebar-toggle.is-paid.open {
  border-color: rgba(129, 169, 255, 0.28);
  background: linear-gradient(180deg, rgba(25, 38, 68, 0.76) 0%, rgba(17, 27, 50, 0.82) 100%);
  color: #f3f7ff;
  font-weight: 800;
  box-shadow:
    inset 2px 0 0 rgba(96, 165, 250, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html.theme-dark .sidebar-toggle.is-paid .sidebar-node-title,
html.theme-dark .sidebar-link.is-paid .sidebar-node-title {
  color: inherit;
}

/* Chevron — low contrast unless hover/open. */
html.theme-dark .sidebar-toggle-icon {
  color: rgba(165, 180, 252, 0.46);
  opacity: 1;
  transition: color 0.14s, transform 0.18s ease;
}

html.theme-dark .sidebar-toggle:hover .sidebar-toggle-icon,
html.theme-dark .sidebar-toggle.open .sidebar-toggle-icon {
  color: rgba(199, 210, 254, 0.94);
}

html.theme-dark .sidebar-toggle.is-paid .sidebar-toggle-icon {
  color: var(--rail-premium-icon);
}

/* ── Topic rows ────────────────────────────────────────────────────── */
html.theme-dark .sidebar-link {
  border-color: transparent;
  background: transparent;
  color: #b7c3d6;
  font-weight: 600;
}

html.theme-dark .sidebar-link:hover {
  border-color: rgba(129, 169, 255, 0.18);
  background: rgba(129, 169, 255, 0.07);
  color: #eef3ff;
}

html.theme-dark .sidebar-link.is-paid {
  color: #aab5c9;
}

html.theme-dark .sidebar-link.is-paid:hover {
  border-color: rgba(129, 169, 255, 0.18);
  background: rgba(129, 169, 255, 0.07);
  color: #eef3ff;
}

html.theme-dark .sidebar-link::before {
  background: rgba(148, 163, 184, 0.30);
}

/* Active topic — strongest local state. Calm gradient + thin accent rule.
   Slightly quieter wash so the row reads as accented, not coloured. */
html.theme-dark .sidebar-link.is-active {
  border-color: rgba(125, 156, 255, 0.28);
  background: linear-gradient(
    90deg,
    rgba(59, 130, 246, 0.14) 0%,
    rgba(45, 212, 191, 0.045) 100%
  );
  color: #f3f7ff;
  font-weight: 800;
  box-shadow:
    inset 2px 0 0 #60a5fa;
}

html.theme-dark .sidebar-link.is-active .sidebar-node-title {
  color: #f3f7ff;
  font-weight: 800;
}

html.theme-dark .sidebar-link.is-active::before {
  width: 6px;
  height: 6px;
  left: 6px;
  background: #5eead4;
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.13);
}

/* ── This-Chapter sub-tree actives ─────────────────────────────────── */
html.theme-dark .nv-this-card .nv-section-item--level-2:first-child > a,
html.theme-dark .nv-this-card .nv-section-item--level-2 > a.is-active {
  background: linear-gradient(180deg, var(--rail-row-open-top), var(--rail-row-open-bot));
  color: var(--rail-text);
  box-shadow: inset 3px 0 0 rgba(129, 169, 255, 0.85);
}

html.theme-dark .nv-this-card .nv-section-item--level-3 > a.is-active,
html.theme-dark .nv-this-card .nv-section-item--level-3:first-of-type > a {
  background: rgba(26, 39, 68, 0.78);
  color: rgba(231, 238, 250, 0.96);
}

html.theme-dark .nv-this-card .nv-section-item--level-3 > a.is-active::before,
html.theme-dark .nv-this-card .nv-section-item--level-3:first-of-type > a::before {
  background: rgba(129, 169, 255, 0.88);
}

/* ── Child indent guide ────────────────────────────────────────────── */
html.theme-dark .sidebar-children {
  border-left-color: rgba(148, 163, 184, 0.12);
}

/* ── Scrollbar — restrained periwinkle, low contrast ───────────────── */
html.theme-dark .nv-rail-nav,
html.theme-dark .nv-rail-drawer-nav,
html.theme-dark .nv-rail-sections {
  scrollbar-width: thin;
  scrollbar-color: rgba(165, 180, 252, 0.22) transparent;
}

html.theme-dark .nv-rail-nav::-webkit-scrollbar,
html.theme-dark .nv-rail-drawer-nav::-webkit-scrollbar,
html.theme-dark .nv-rail-sections::-webkit-scrollbar {
  width: 8px;
}

html.theme-dark .nv-rail-nav::-webkit-scrollbar-track,
html.theme-dark .nv-rail-drawer-nav::-webkit-scrollbar-track,
html.theme-dark .nv-rail-sections::-webkit-scrollbar-track {
  background: transparent;
}

html.theme-dark .nv-rail-nav::-webkit-scrollbar-thumb,
html.theme-dark .nv-rail-drawer-nav::-webkit-scrollbar-thumb,
html.theme-dark .nv-rail-sections::-webkit-scrollbar-thumb {
  background-color: rgba(165, 180, 252, 0.22);
  background-clip: padding-box;
  border: 2px solid transparent;
  border-radius: 999px;
}

html.theme-dark .nv-rail-nav::-webkit-scrollbar-thumb:hover,
html.theme-dark .nv-rail-drawer-nav::-webkit-scrollbar-thumb:hover,
html.theme-dark .nv-rail-sections::-webkit-scrollbar-thumb:hover {
  background-color: rgba(165, 180, 252, 0.40);
}

/* ── Bottom practice dock — clean lifted navy panel ────────────────── */
html.theme-dark .nv-practice-card {
  background: linear-gradient(180deg, rgba(18, 27, 49, 0.94) 0%, rgba(13, 19, 38, 0.96) 100%);
  border-color: rgba(148, 163, 184, 0.15);
  border-radius: 14px;
  padding: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 22px rgba(0, 0, 0, 0.20);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

html.theme-dark .nv-action-item {
  border-color: rgba(148, 163, 184, 0.14);
  background: rgba(22, 31, 56, 0.78);
  color: #cdd5e6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

html.theme-dark .nv-action-item:hover {
  border-color: rgba(129, 169, 255, 0.26);
  background: rgba(28, 41, 72, 0.92);
  color: var(--rail-text);
  transform: translateY(-1px);
}

/* ── Resource shortcut accent identity ──
   Kept in sync with the final lift in theme-dark.css. Each "Also Practice"
   shortcut carries a distinct premium resource colour so Notes and
   Flashcards read as different identities, not the same neutral button. */

/* Flashcards = soft periwinkle / blue-violet. */
html.theme-dark .nv-action-item--flashcards {
  border-color: rgba(129, 140, 248, 0.24);
  background:
    linear-gradient(180deg, rgba(129, 140, 248, 0.10) 0%, rgba(129, 140, 248, 0.05) 100%),
    rgba(22, 31, 56, 0.78);
}

html.theme-dark .nv-action-item--flashcards,
html.theme-dark .nv-action-item--flashcards .nv-action-icon {
  color: rgba(165, 180, 252, 0.95);
}

html.theme-dark .nv-action-item--flashcards:hover {
  border-color: rgba(129, 140, 248, 0.42);
  background:
    linear-gradient(180deg, rgba(129, 140, 248, 0.16) 0%, rgba(129, 140, 248, 0.08) 100%),
    rgba(28, 41, 72, 0.92);
}

html.theme-dark .nv-action-item--flashcards:hover,
html.theme-dark .nv-action-item--flashcards:hover .nv-action-icon {
  color: #e0e6ff;
}

/* Questions = refined teal / cyan. */
html.theme-dark .nv-action-item--questions {
  border-color: rgba(45, 212, 191, 0.24);
  background:
    linear-gradient(180deg, rgba(45, 212, 191, 0.10) 0%, rgba(45, 212, 191, 0.04) 100%),
    rgba(22, 31, 56, 0.78);
}

html.theme-dark .nv-action-item--questions,
html.theme-dark .nv-action-item--questions .nv-action-icon {
  color: rgba(94, 234, 212, 0.95);
}

html.theme-dark .nv-action-item--questions:hover {
  border-color: rgba(45, 212, 191, 0.42);
  background:
    linear-gradient(180deg, rgba(45, 212, 191, 0.16) 0%, rgba(45, 212, 191, 0.06) 100%),
    rgba(28, 41, 72, 0.92);
}

html.theme-dark .nv-action-item--questions:hover,
html.theme-dark .nv-action-item--questions:hover .nv-action-icon {
  color: #c8fff2;
}

/* Notes = refined warm amber / bronze. */
html.theme-dark .nv-action-item--notes {
  border-color: rgba(245, 158, 11, 0.26);
  background:
    linear-gradient(180deg, rgba(245, 158, 11, 0.10) 0%, rgba(245, 158, 11, 0.04) 100%),
    rgba(22, 31, 56, 0.78);
}

html.theme-dark .nv-action-item--notes,
html.theme-dark .nv-action-item--notes .nv-action-icon {
  color: rgba(252, 191, 73, 0.95);
}

html.theme-dark .nv-action-item--notes:hover {
  border-color: rgba(245, 158, 11, 0.44);
  background:
    linear-gradient(180deg, rgba(245, 158, 11, 0.16) 0%, rgba(245, 158, 11, 0.06) 100%),
    rgba(28, 41, 72, 0.92);
}

html.theme-dark .nv-action-item--notes:hover,
html.theme-dark .nv-action-item--notes:hover .nv-action-icon {
  color: #fde7b3;
}

/* ── Focus ─────────────────────────────────────────────────────────── */
html.theme-dark .sidebar-toggle:focus-visible,
html.theme-dark .sidebar-link:focus-visible,
html.theme-dark .nv-action-item:focus-visible,
html.theme-dark .nv-rail-trigger:focus-visible,
html.theme-dark .nv-rail-drawer-close:focus-visible {
  outline: 2px solid rgba(129, 169, 255, 0.55);
  outline-offset: 2px;
}

/* ── Mobile drawer trigger / head ──────────────────────────────────── */
html.theme-dark .nv-rail-trigger {
  background: linear-gradient(180deg, rgba(22, 33, 60, 0.96) 0%, rgba(16, 25, 48, 0.97) 100%);
  border-color: rgba(148, 163, 184, 0.22);
  color: rgba(199, 210, 254, 0.94);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html.theme-dark .nv-rail-drawer-head {
  background: linear-gradient(180deg, rgba(22, 33, 60, 0.97) 0%, rgba(14, 22, 42, 0.98) 100%);
  border-bottom-color: var(--rail-panel-border);
}

html.theme-dark .nv-rail-drawer-close {
  background: rgba(255, 255, 255, 0.045);
  border-color: var(--rail-panel-border);
  color: rgba(199, 210, 254, 0.86);
}

/* ── Strong text inherits in note body ─────────────────────────────── */
html.theme-dark .note-body strong,
html.theme-dark .noteviewer-body strong {
  color: inherit;
}