/* ========================================================================
   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, #3b52d0);
  --nv-purple-soft: var(--accent-soft, #ebf0ff);
  --nv-purple-soft-2: var(--accent-border, #c4cfee);
  --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 * {
  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));
  height: calc(100dvh - var(--nv-topbar-h));
  max-height: calc(100vh - var(--nv-topbar-h));
  max-height: calc(100dvh - var(--nv-topbar-h));
  align-self: flex-start;
  flex-shrink: 0;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  isolation: isolate;
}

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


/* Progress card */


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


.sidebar-children.collapsed {
  /* hidden via the animated grid-template-rows collapse in chapter-navigator.css */
}


/* Calmer active state — flat soft lavender wash, no heavy gradient, lighter
   border, much smaller dot. Reads as "active" without screaming. */


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

/* Also practice card */

/* Drawer */
.nv-rail-trigger {
  display: none;
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 90;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.nv-rail-backdrop {
  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;
  visibility: hidden;
  pointer-events: none;
  /* fade both ways; defer hiding past the fade-out so CLOSE animates, not snaps */
  transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}

.nv-rail-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.22s ease, visibility 0s linear 0s;
}

.nv-rail-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 101;
  width: min(352px, 100%);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  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;
  }
}


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

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

@media (min-width: 861px) and (max-width: 1080px) {
  :root {
    --nv-rail-w: 260px;
  }

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

@media (max-width: 860px) {
  body:has(.nv-canvas) {
    overflow-x: clip;
  }

  .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 96px;
  }

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

@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.
   ======================================================================== */


/* Active topic — calmer wash, lighter weight, smaller dot.
   Previous version used a 12px dot with a 4px halo (~13px visible) plus
   font-weight 760. This pass softens the row to a quieter accent — still
   clearly active, but no longer the loudest thing in the rail. */


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


.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 reflows gracefully. */
    --nv-shell-rail: var(--nv-rail-w);

    /* The rail hugs the left wall at a constant page gutter, no matter how
       wide the viewport is. Content docks immediately to its right (rail +
       gap) and stays left-anchored, so the rail never drifts inward on a
       maximised window the way a viewport-centred column used to pull it. */
    --nv-rail-left: var(--nv-page-pad);

    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. */

/* 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. */


/* Topic row — same outline grid, no premium-pill column needed. */


/* Progress card — small premium module */


/* ── 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(91, 140, 255, 0.10);
  --rail-premium-border: rgba(190, 205, 255, 0.26);
  --rail-premium-border-hover: rgba(190, 205, 255, 0.42);
  --rail-premium-text: #dbeafe;
  --rail-premium-dot: #a9beff;
  --rail-premium-icon: rgba(190, 205, 255, 0.86);

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

/* ── Rail surface — midnight navy with a very restrained blue crown.
   Editorial, homepage-aligned. */


/* ── Cards — fully stripped in dark mode.
   The previous "soft navy panel with a hairline border" reading was the last
   thing making the rail feel like four stacked cards. Drop the border, drop
   the background, drop the radius — the .nv-rail container itself is the
   one premium surface; .nv-rail-card becomes an invisible logical wrapper.
   Section dividers are added by the adjacent-sibling rule below. */

/* Section dividers — a single hairline above every card after the first.
   Creates clear "this is the next section" rhythm without re-boxing the
   sections. The first card (progress) has no top rule because it abuts the
   rail's own top edge. The 8px gap on .nv-rail-shell already provides
   inter-section spacing; this rule adds the 14px breath after the hairline. */


/* ── Chapter rows — transparent navigation rows, not boxed buttons.
   Previous pass left a 0.08-alpha border + 0.44-alpha navy fill on every
   collapsed row. With 10+ chapters in the navigator, that read as a stack
   of stacked rectangles — the real cause of the "card-heavy" feel users
   were still seeing in screenshots. This pass strips the closed row to
   transparent so chapters read as clean rail navigation. Hover gets a
   calm 6% wash; no border. */


/* Open/current chapter — strongest chapter-level state.
   No border. Single calm wash + thin inset accent rail. The accent rail is
   the section anchor; the wash just confirms "this is the open chapter."
   Reads as the active section, never as a thick selected button. */


/* ── Topic rows ────────────────────────────────────────────────────── */


/* Active topic — clean active row, no border, soft cyan-tinted wash, cyan
   dot leads. The simplest premium active state on the rail: nothing reads
   as a framed pill, the dot anchors location, the wash confirms it. */


/* ── This-Chapter sub-tree actives — same softening as the chapter open
   state so the nested levels feel consistent. */

/* ── Child indent guide ────────────────────────────────────────────── */

/* ── Scrollbar — restrained periwinkle, low contrast ───────────────── */

/* ── Focus ─────────────────────────────────────────────────────────── */

/* ── Mobile drawer trigger / head ──────────────────────────────────── */


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


/* Mobile chapter navigation belongs in document flow above the study canvas. */
@media (max-width: 860px) {
  .nv-rail-trigger {
    position: static;
    align-self: flex-start;
    margin: 20px 24px 0;
    min-block-size: 44px;
    max-width: calc(100% - 48px);
  }
}

@media (max-width: 360px) {
  .nv-rail-trigger {
    margin-inline: 12px;
    padding-inline: 12px;
  }
}

/* ========================================================================
   NOTEVIEWER SIDEBAR REVAMP — premium two-theme dashboard rail
   ------------------------------------------------------------------------
   Final sidebar-only layer.  It intentionally scopes all structural rules
   under .nv-rail / .nv-rail-drawer and beats the later theme files by adding
   the sidebar root to each selector instead of editing broad light/dark CSS.
   ======================================================================== */



html.theme-light body .nv-rail-backdrop,
html.theme-dark body .nv-rail-backdrop {
  z-index: 4990;
}

/* Drawer slide + backdrop fade must out-specify the global theme-transition
   rule (html.theme-transitions-enabled * { transition: background-color,
   border-color } in styles.css, 0,1,1) which otherwise clobbers transform/
   opacity. Same sidebar-root idiom as the z-index rule above; theme colours
   are re-included so dark/light switching stays smooth. */
html.theme-light body .nv-rail-drawer,
html.theme-dark body .nv-rail-drawer {
  transition: transform 0.26s ease, background-color 0.2s ease, border-color 0.2s ease;
}
html.theme-light body .nv-rail-backdrop,
html.theme-dark body .nv-rail-backdrop {
  transition: opacity 0.22s ease, visibility 0s linear 0.22s, background-color 0.2s ease;
}
html.theme-light body .nv-rail-backdrop.is-open,
html.theme-dark body .nv-rail-backdrop.is-open {
  transition: opacity 0.22s ease, visibility 0s linear 0s, background-color 0.2s ease;
}
/* Progress ring: restore the intended smooth stroke-dashoffset transition the
   global theme rule also clobbers. It is scroll-driven via --note-scroll-progress;
   this only smooths the steps, it does NOT add a load animation that fights the
   live binding. */
html.theme-light body .cn-ring-arc,
html.theme-dark body .cn-ring-arc {
  transition: stroke-dashoffset 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  html.theme-light body .cn-ring-arc,
  html.theme-dark body .cn-ring-arc {
    transition: none;
  }
  html.theme-light body .nv-rail-drawer,
  html.theme-dark body .nv-rail-drawer,
  html.theme-light body .nv-rail-backdrop,
  html.theme-dark body .nv-rail-backdrop,
  html.theme-light body .nv-rail-backdrop.is-open,
  html.theme-dark body .nv-rail-backdrop.is-open {
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }
}


/* Progress card */


/* Chapter rows */


/* Keep each chapter badge subtly distinct without changing the DOM. */

/* Expanded chapter lesson timeline */


html.theme-light body .nv-rail .sidebar-children.collapsed,
html.theme-dark body .nv-rail .sidebar-children.collapsed,
html.theme-light body .nv-rail-drawer .sidebar-children.collapsed,
html.theme-dark body .nv-rail-drawer .sidebar-children.collapsed {
  /* collapse animated via grid-template-rows (chapter-navigator.css); was display:none */
}


/* Premium / locked states */

/* Focus and responsive safeguards */


@media (max-width: 860px) {


  html.theme-light body .nv-rail-drawer .sidebar-toggle,
  html.theme-dark body .nv-rail-drawer .sidebar-toggle,
  html.theme-light body .nv-rail-drawer .sidebar-link,
  html.theme-dark body .nv-rail-drawer .sidebar-link {
    min-height: 44px;
  }
}

@media (max-width: 380px) {


}

@media (max-height: 480px) and (orientation: landscape) {
  html.theme-light body .nv-rail .nv-progress-card,
  html.theme-dark body .nv-rail .nv-progress-card {
    min-height: 76px;
    padding-block: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.theme-light body .nv-rail *,
  html.theme-light body .nv-rail-drawer *,
  html.theme-dark body .nv-rail *,
  html.theme-dark body .nv-rail-drawer * {
    transition: none;
  }
}