/*
 * Persistent curriculum nav sidebar styles (nav-fix overhaul; supersedes
 * T181.1). Pairs with lesson-nav.js.
 *
 * The `.timeline` / `.timeline-group` / `.timeline-node` / `.node-*` /
 * `[data-progress]` / `[data-selected]` rules below MIRROR
 * dashboard/src/learn/learn.css so the lesson-page rail renders IDENTICALLY
 * to the React /learn index navigator. When learn.css's timeline rules
 * change, mirror them here (and vice-versa). The only lesson-page-specific
 * layer is the persistent left-rail layout + the mobile "Lessons" disclosure
 * toggle, which the index does not need (it lays the timeline out itself).
 *
 * Palette: lesson pages define their own tokens (--accent lime #d4ff3a,
 * --bg #0d0e0c, --ink, --ink-dim, --ink-faint, --rule, --mono) in each
 * lesson's <style>; we read those vars with safe fallbacks so the rail works
 * even on a page that has not defined one. No build step. Respects
 * prefers-reduced-motion.
 */

/* ---- rail chrome: home link (top) + book-a-call (bottom) --------------- */
[data-lesson-nav] .lnav-home,
[data-lesson-nav] .lnav-book {
  display: block;
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 12px;
  text-decoration: none;
  letter-spacing: 0.08em;
  width: fit-content;
}
[data-lesson-nav] .lnav-home {
  color: var(--ink-faint, #aeab9e);
  margin-bottom: 30px;
  transition: color 0.12s;
}
[data-lesson-nav] .lnav-home:hover {
  color: var(--ink, #e8e6df);
}
[data-lesson-nav] .lnav-book {
  margin-top: 34px;
  padding: 9px 14px;
  color: var(--accent, #d4ff3a);
  border: 1px solid var(--accent, #d4ff3a);
  border-radius: 3px;
  text-transform: uppercase;
  transition: background 0.12s;
}
[data-lesson-nav] .lnav-book:hover {
  background: var(--accent-wash, rgba(212, 255, 58, 0.1));
}

/* ---- bottom controls cluster (T204.3): theme toggle + account state -----
 * A Discord-style user area pinned to the bottom of the rail: the account row
 * (Sign in when logged out; email + Log out when logged in) above a circular
 * theme toggle. Uses ONLY the lesson theme tokens so it inverts automatically
 * in light/dark; no hard-coded colors. */
[data-lesson-nav] .lnav-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--rule, #2a2a26);
}
[data-lesson-nav] .lnav-account {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 12px;
}
[data-lesson-nav] .lnav-email {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-dim, #8a8a82);
}
[data-lesson-nav] .lnav-signin,
[data-lesson-nav] .lnav-logout {
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--ink-faint, #aeab9e);
  transition: color 0.12s;
}
[data-lesson-nav] .lnav-signin:hover,
[data-lesson-nav] .lnav-logout:hover {
  color: var(--accent, #d4ff3a);
}
/* Labeled pill (T208.2): a styled control, not a naked icon. The sun/moon
 * affordance sits in .lnav-theme-toggle__icon beside a .lnav-theme-toggle__label
 * naming the current mode. Themed entirely from the lesson tokens so it inverts
 * cream/violet (light) <-> lime (dark) automatically. */
[data-lesson-nav] .lnav-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  width: fit-content;
  padding: 8px 14px;
  border: 1px solid var(--rule, #2a2a26);
  border-radius: 999px;
  background: transparent;
  color: var(--ink, #e8e6df);
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
[data-lesson-nav] .lnav-theme-toggle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent, #d4ff3a);
}
[data-lesson-nav] .lnav-theme-toggle__label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
[data-lesson-nav] .lnav-theme-toggle:hover {
  color: var(--accent, #d4ff3a);
  border-color: var(--accent, #d4ff3a);
  background: var(--accent-wash, rgba(212, 255, 58, 0.1));
}

/* ---- scene-progress indicator (mirror of learn.css .screening-progress,
 * T199.5) — "X of N scenes in the can" + a progress bar, riding the existing
 * completed_lessons set. Keep in sync with the .screening-progress rules in
 * dashboard/src/learn/learn.css. ----------------------------------------- */
[data-lesson-nav] .screening-progress {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 30px;
}
[data-lesson-nav] .scene-progress {
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim, #8a8a82);
  margin: 0;
}
[data-lesson-nav] .scene-progress-track {
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--rule, #2a2a26);
  overflow: hidden;
}
[data-lesson-nav] .scene-progress-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--accent, #d4ff3a);
  transition: width 0.4s ease;
}
@media (prefers-reduced-motion: reduce) {
  [data-lesson-nav] .scene-progress-fill {
    transition: none;
  }
}

/* ---- shared timeline rules (mirror of learn.css) ----------------------- */
[data-lesson-nav] .timeline {
  display: flex;
  flex-direction: column;
  /* T205.2: tightened from 36px so Act I and Act II sit closer; the Act II
   * .timeline-group-label still marks the break, just with less dead air at
   * the L05 / L06 boundary. (Within-group node spacing is unchanged.) */
  gap: 22px;
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
}
[data-lesson-nav] .timeline-group-label {
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent, #d4ff3a);
  margin-bottom: 14px;
}
[data-lesson-nav] .timeline-nodes {
  list-style: none;
  position: relative;
  margin: 0;
  padding: 0;
}
[data-lesson-nav] .timeline-nodes::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--rule, #2a2a26);
}
[data-lesson-nav] .timeline-node {
  position: relative;
  display: grid;
  grid-template-columns: 16px auto 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 8px;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 2px;
  color: var(--ink-dim, #8a8a82);
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.12s;
}
[data-lesson-nav] a.timeline-node:hover {
  color: var(--ink, #e8e6df);
}
[data-lesson-nav] .timeline-node .node-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-faint, #4a4a44);
  background: var(--bg, #0d0e0c);
}
[data-lesson-nav] .timeline-node .node-token {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-faint, #4a4a44);
}
[data-lesson-nav] .timeline-node .node-title {
  font-size: 13px;
}

/* Per-student dot visuals off [data-progress] (mirror of learn.css):
 *   complete    = filled lime
 *   in-progress = outlined lime ring
 *   locked      = empty / dim */
[data-lesson-nav] .timeline-node[data-progress="complete"] .node-dot {
  background: var(--accent, #d4ff3a);
  border-color: var(--accent, #d4ff3a);
}
[data-lesson-nav] .timeline-node[data-progress="in-progress"] .node-dot {
  background: var(--bg, #0d0e0c);
  border-color: var(--accent, #d4ff3a);
  box-shadow: 0 0 0 3px var(--accent-glow, rgba(212, 255, 58, 0.25));
}
[data-lesson-nav] .timeline-node[data-progress="locked"] .node-dot {
  background: var(--bg, #0d0e0c);
  border-color: var(--ink-faint, #4a4a44);
  opacity: 0.6;
}
[data-lesson-nav] .timeline-node[data-progress="locked"] {
  cursor: default;
}
[data-lesson-nav] .timeline-node[data-progress="locked"] .node-title,
[data-lesson-nav] .timeline-node[data-progress="locked"] .node-token {
  opacity: 0.55;
}

/* selected (current lesson): the "you are here" row must be unmistakable, so
 * it gets a row wash + bold accent title + a thicker left bar. A bare accent
 * title lost the hierarchy fight to the full-ink Overview row above it (Carol
 * read the bar as pointing at the Overview). Mirrored in learn.css. */
[data-lesson-nav] .timeline-node[data-selected="true"] {
  color: var(--ink, #e8e6df);
  background: var(--accent-wash, rgba(212, 255, 58, 0.1));
  border-radius: 8px;
}
[data-lesson-nav] .timeline-node[data-selected="true"] .node-title {
  color: var(--accent, #d4ff3a);
  font-weight: 700;
}
[data-lesson-nav] .timeline-node[data-selected="true"] .node-token {
  color: var(--accent, #d4ff3a);
}
[data-lesson-nav] .timeline-node[data-selected="true"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 2px;
  background: var(--accent, #d4ff3a);
}

/* ---- lesson-page-only layer: persistent left rail ----------------------
 * The index lays the timeline out itself; the lesson page needs the rail to
 * be a fixed, scrollable left column with the reading column offset so it
 * never underlaps. The mobile overlay chrome (hamburger trigger + scrim,
 * T220.1) is hidden on wide viewports (the rail is always open there). */
.lnav-trigger,
.lnav-scrim {
  display: none;
}

@media (min-width: 960px) {
  /* Flex column rail (T205.2): home + progress pin to the TOP, the timeline
   * takes the remaining height and scrolls internally, and book + controls
   * pin to the BOTTOM edge. The rail itself no longer scrolls as a whole;
   * only the timeline does, so the bottom controls cluster is always
   * visible even on a short viewport. */
  [data-lesson-nav] {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 100vh;
    max-height: calc(100vh - 0px);
    display: flex;
    flex-direction: column;
    padding: 56px 22px 56px 30px;
    /* No border: the hard grey rule made the rail read as a heavy column.
     * The rail blends into the page; the reading column's left offset is
     * the only separation it needs. */
    z-index: 20;
  }
  /* The timeline is the single scrolling region. flex:1 1 auto lets it grow
   * to push book + controls to the bottom; min-height:0 is required so a
   * flex child is allowed to shrink below its content and actually scroll. */
  [data-lesson-nav] .timeline {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Thin, recessive scrollbar (Firefox). The wider rail keeps every
     * lesson title on one line, so the timeline fits without scrolling on
     * normal viewports; this only shows if the content truly overflows. */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  /* WebKit: invisible track + thumb that only appears on hover, so the
   * scrollbar never reads as chrome. */
  [data-lesson-nav] .timeline::-webkit-scrollbar {
    width: 8px;
  }
  [data-lesson-nav] .timeline::-webkit-scrollbar-track {
    background: transparent;
  }
  [data-lesson-nav] .timeline::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 4px;
  }
  [data-lesson-nav] .timeline:hover {
    scrollbar-color: var(--rule, #2a2a26) transparent;
  }
  [data-lesson-nav] .timeline:hover::-webkit-scrollbar-thumb {
    background: var(--rule, #2a2a26);
  }
  /* The overlay chrome is irrelevant when the rail is always visible. */
  .lnav-trigger,
  .lnav-scrim {
    display: none;
  }
  /* Offset the reading column so the fixed rail never underlaps it. The
   * lesson .wrap is centered (max-width 760px); a left body pad shifts the
   * whole flow right of the 300px rail. */
  body {
    padding-left: 300px;
  }
}

/* ---- mobile: fixed hamburger + overlay drawer (T220.1) -----------------
 * Under 960px the rail is unreachable mid-lesson if it sits inline at the top
 * of the page (Jeremy Hodges, 2026-06-12). Instead the rail becomes an
 * off-canvas overlay DRAWER: a fixed, full-height panel slid off the left edge
 * until a fixed corner hamburger (.lnav-trigger) opens it over a dimming scrim
 * (.lnav-scrim). The trigger stays visible while the body scrolls. */
@media (max-width: 959px) {
  [data-lesson-nav] {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 330px);
    max-width: 330px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    margin: 0;
    /* safe-area-inset aware so the drawer clears the notch / home indicator. */
    padding: calc(26px + env(safe-area-inset-top)) 22px
      calc(26px + env(safe-area-inset-bottom))
      calc(22px + env(safe-area-inset-left));
    background: var(--bg, #0d0e0c);
    border-right: 1px solid var(--rule, #2a2a26);
    z-index: 60;
    transform: translateX(-100%);
    transition: transform 0.28s ease;
  }
  [data-lesson-nav][data-drawer-open="true"] {
    transform: translateX(0);
  }
  /* Fixed corner hamburger: a 44px accent square pinned top-left, safe-area
   * aware, above the reading column. */
  .lnav-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: calc(12px + env(safe-area-inset-top));
    left: calc(12px + env(safe-area-inset-left));
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--accent, #d4ff3a);
    background: var(--bg, #0d0e0c);
    border: 1px solid var(--accent, #d4ff3a);
    border-radius: 6px;
    cursor: pointer;
    z-index: 50;
  }
  /* The dimming scrim sits between the reading column and the open drawer. */
  .lnav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    z-index: 55;
    transition: opacity 0.28s ease;
  }
  .lnav-scrim[data-open="true"] {
    opacity: 1;
    visibility: visible;
  }
  /* Inside the drawer the timeline is always shown (no inline disclosure). */
  [data-lesson-nav] .timeline {
    display: flex;
    margin-top: 16px;
    gap: 24px;
  }

  /* T213.1 — ≥44px tap targets for the drawer controls. The lesson links (the
   * grid rows already center their content vertically) get a 44px min-height;
   * the book-a-call and theme controls do too, centering their labels. */
  [data-lesson-nav] .timeline-node {
    min-height: 44px;
  }
  [data-lesson-nav] .lnav-book,
  [data-lesson-nav] .lnav-theme-toggle {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-lesson-nav] .timeline-node {
    transition: none;
  }
  /* The drawer slide + scrim fade collapse to an instant show/hide. */
  [data-lesson-nav],
  .lnav-scrim {
    transition: none;
  }
}