/* Course navigation (menu, next capsule). Owned by the navigation engineer, round 3 (docs/mobile/council/r3-nav.md).
   The course menu (.course-nav, built by nav.js): a rail on the left at ≥ 1200 px, a drawer below; the header's
   menu button (.course-nav__open); the end of a capsule (nav.capsule-end, in the page's HTML).
   Only mobile.css tokens: light, dark and system-dark follow by themselves. The brand wire = the course (the rail's
   line, the current capsule's number, the next-capsule card); indigo = interactive and "you are here"; mint = done.
   Reserved before the first paint: html[data-motion] is set by the head guard, i.e. only when JS runs, so the space
   of the button and of the rail is there before nav.js fills it, and nothing moves. Without JS, nothing changes. */

:root { --cn-w: clamp(256px, 20vw, 304px); --cn-x: max(0px, (100vw - 1680px) / 2); }

/* ---------- The header's menu button (first in the bar, before the brand) ---------- */
/* Its place is held by an empty 38 px flex item until nav.js puts the button there (same width, same gap). */
html[data-motion]:not([data-teaching]) body:has(> main.module-main[data-capsule]) .site-head__bar:not(:has(> .course-nav__open))::before {
  content: ""; flex: none; width: 38px; height: 38px;
}
.course-nav__open { width: 38px; padding: 0; }
.course-nav__open svg { width: 19px; height: 19px; }
.course-nav__open[aria-expanded="true"] { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 50%, var(--control)); }
/* The menu's first item is "All capsules" (and the brand leads there too): the header's text link gives way, before the
   first paint (so the header does not move when nav.js runs). Without JS it stays. */
html[data-motion]:not([data-teaching]) body:has(> main.module-main[data-capsule]) .site-nav a[href="/courses/mobile/"] { display: none; }

/* ---------- Drawer (below 1200 px) ---------- */
.course-nav {
  position: fixed; z-index: 60; top: 0; bottom: 0; left: 0; width: min(360px, 88vw);
  display: flex; flex-direction: column; color: var(--ink); background: var(--bg);
  border-right: 1px solid var(--rule); box-shadow: 0 30px 80px -20px rgba(8, 9, 20, .5);
  transform: translateX(-104%); visibility: hidden;
  transition: transform .26s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .26s;
}
html[data-nav-open] .course-nav { transform: none; visibility: visible; transition: transform .26s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
.course-nav__scrim {
  position: fixed; inset: 0; z-index: 55; background: rgba(9, 10, 20, .46);
  opacity: 0; visibility: hidden; transition: opacity .26s ease, visibility 0s linear .26s;
}
html[data-nav-open] .course-nav__scrim { opacity: 1; visibility: visible; transition: opacity .26s ease, visibility 0s; }
html.cn-lock { overflow: hidden; }   /* nav.js pads the scrollbar's width back, when there is one */

/* ---------- Rail (1200 px and wider): fixed under the header; the content column moves right by its width ---------- */
@media screen and (min-width: 1200px) {
  .course-nav {
    z-index: 15; top: calc(var(--head-h) + 1px); left: var(--cn-x); width: var(--cn-w);
    background: transparent; border-right: 1px solid color-mix(in srgb, var(--rule) 80%, transparent); box-shadow: none;
    transform: none; visibility: visible; transition: none;
  }
  html[data-nav="collapsed"] .course-nav { display: none; }
  .course-nav__scrim, .course-nav__close, .course-nav__kicker { display: none !important; }

  html[data-motion]:not([data-nav="collapsed"]):not([data-teaching]) body:has(> main.module-main[data-capsule]) {
    --cn-pad: calc(var(--cn-w) + 2 * var(--cn-x));
  }
  html[data-motion]:not([data-nav="collapsed"]):not([data-teaching]) body:has(> main.module-main[data-capsule]) > :is(.module-main, .site-foot) {
    padding-left: calc(var(--cn-x) + var(--cn-w)); padding-right: var(--cn-x);
  }
  /* One frame: the header's menu button and brand above the rail, its buttons on the content's right edge; the
     content's wrap fills its column. Collapsed, everything is today's layout again. */
  html[data-motion]:not([data-nav="collapsed"]):not([data-teaching]) body:has(> main.module-main[data-capsule]) > .site-head > .wrap {
    max-width: none; padding-left: calc(var(--cn-x) + 18px); padding-right: calc(var(--cn-x) + var(--gutter));
  }
  html[data-motion]:not([data-nav="collapsed"]):not([data-teaching]) body:has(> main.module-main[data-capsule]) > :is(.module-main, .site-foot) > .wrap { max-width: none; }
  /* mobile.css measures the two wide widths (1040, 900) against the viewport; here, against the content column. */
  html[data-motion]:not([data-nav="collapsed"]):not([data-teaching]) body:has(> main.module-main[data-capsule]) .breakout {
    --bw: min(1040px, 100vw - var(--cn-pad) - 2 * var(--gutter));
  }
  html[data-motion]:not([data-nav="collapsed"]):not([data-teaching]) body:has(> main.module-main[data-capsule]) .breakout.breakout--mid {
    --bw: min(900px, 100vw - var(--cn-pad) - 2 * var(--gutter));
  }
  html[data-motion]:not([data-nav="collapsed"]):not([data-teaching]) body:has(> main.module-main[data-capsule]) .prose > :is(.knowledge, #check, .card--wide) {
    --kw: min(900px, 100vw - var(--cn-pad) - 2 * var(--gutter));
  }
}

/* ---------- The panel ---------- */
.course-nav__panel { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.course-nav__head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 8px;
  padding: 14px 14px 12px 22px; border-bottom: 1px solid var(--rule);
}
.course-nav__kicker {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font: 500 .68rem/1.3 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.course-nav__kicker::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--wire); flex: none; }
.course-nav__close {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--control); background: var(--surface-glass); color: var(--ink);
}
.course-nav__close:hover { border-color: var(--ink-3); background: var(--surface); }
.course-nav__close svg { width: 18px; height: 18px; }
.course-nav__all {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 0 -8px; padding: 9px 10px;
  border-radius: 12px; color: var(--ink); font-weight: 600; font-size: .92rem; line-height: 1.3; text-decoration: none;
}
.course-nav__all svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.course-nav__all:hover { color: var(--ink); background: var(--accent-soft); }

.course-nav__scroll {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 14px 48px 18px;
  scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent);
}
.course-nav :focus-visible { outline-offset: 1px; }
.course-nav__groups, .course-nav__caps, .course-nav__secs { list-style: none; margin: 0; padding: 0; }
.course-nav__group + .course-nav__group { margin-top: 20px; }
.course-nav__gh {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 4px; padding: 0 4px 0 6px;
  font-size: .76rem; font-weight: 600; line-height: 1.35; letter-spacing: .01em; color: var(--ink-3); text-wrap: balance;
}
.course-nav__gr { flex: none; font: 500 .64rem/1.35 var(--font-mono); letter-spacing: .06em; white-space: nowrap; }

/* A capsule: number, question, state. */
.course-nav__c {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px;
  padding: 8px 8px 8px 6px; border-radius: 10px; color: var(--ink-2); font-size: .9rem; line-height: 1.38; text-decoration: none;
}
a.course-nav__c:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.course-nav__n {
  display: inline-grid; place-items: center; min-width: 30px; height: 21px; margin-top: 1px; padding: 0 5px;
  border-radius: 6px; border: 1px solid var(--rule-strong); background: var(--surface);
  font: 600 .68rem/1 var(--font-mono); letter-spacing: .02em; color: var(--ink-2);
}
.course-nav__q { min-width: 0; text-wrap: pretty; }
.course-nav__cap.is-current > .course-nav__c { color: var(--ink); font-weight: 600; }
.course-nav__cap.is-current > .course-nav__c .course-nav__n { border-color: transparent; background: var(--wire-deep); color: #fff; }
.course-nav__st { display: grid; place-items: center; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; color: var(--ink-3); }
.course-nav__st svg { width: 14px; height: 14px; }
.course-nav__st--done { background: var(--ok); color: var(--bg); }
.course-nav__st--done svg { width: 12px; height: 12px; }
/* Coming: visible, quiet, not a link. */
.course-nav__cap.is-soon .course-nav__c { padding-block: 6px; font-size: .84rem; color: var(--ink-3); }
.course-nav__cap.is-soon .course-nav__n { border-style: dashed; background: transparent; color: var(--ink-3); }

/* The current capsule's sections, on the brand wire: passed nodes filled, the current one ringed. */
.course-nav__secs { position: relative; margin: 2px 0 10px 21px; padding: 2px 0; }
.course-nav__secs::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: var(--wire-v); opacity: .55; }
.course-nav__s {
  position: relative; display: flex; align-items: baseline; gap: 8px; padding: 5px 8px 5px 20px; border-radius: 8px;
  color: var(--ink-2); font-size: .84rem; line-height: 1.38; text-decoration: none;
}
.course-nav__s::before {
  content: ""; position: absolute; left: -3px; top: 10px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--rule-strong);
}
.course-nav__s:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.course-nav__s.is-past::before { background: var(--ink-3); box-shadow: none; }
.course-nav__s.is-here { color: var(--accent); font-weight: 600; background: var(--accent-soft); }
.course-nav__s.is-here::before { left: -5px; top: 8px; width: 12px; height: 12px; background: var(--bg); box-shadow: inset 0 0 0 3px var(--accent), 0 0 0 3px var(--accent-soft); }
.course-nav__sn { flex: none; min-width: 1.6em; font: 600 .66rem/1 var(--font-mono); letter-spacing: .04em; color: var(--ink-3); }
.course-nav__s.is-here .course-nav__sn { color: inherit; }
.course-nav__sl { min-width: 0; }
.course-nav__try {
  flex: none; margin-left: auto; padding: 3px 7px; border-radius: 999px; border: 1px solid var(--rule-strong);
  font: 600 .66rem/1 var(--font-mono); color: var(--ink-3);
}
.course-nav__try.is-done { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, transparent); }

@media screen and (min-width: 1200px) {
  .course-nav__head { padding: 16px 14px 4px 16px; border-bottom: 0; }
  .course-nav__scroll { padding: 8px 14px 48px 14px; }
}

/* A section reached from the menu takes the focus (so Tab goes on from there), without a ring round the section. */
[data-cn-target]:focus { outline: none; }

/* ---------- The end of a capsule: one big "Next capsule", then "Previous" ---------- */
.prose > .slide + .capsule-end { margin-top: clamp(64px, 7vw, 104px); }
.capsule-end { display: grid; gap: 12px; margin: 0 0 8px; }
.capsule-end__next {
  position: relative; isolation: isolate; padding: 26px 104px 28px 28px; border-radius: var(--r-xl);
  background:
    radial-gradient(70% 130% at 100% 0%, var(--glow-2), transparent 62%),
    radial-gradient(55% 120% at 0% 115%, var(--glow-1), transparent 60%),
    var(--surface);
  box-shadow: var(--shadow); transition: box-shadow .3s ease, transform .3s var(--ease-out);
}
.capsule-end__next::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: var(--wire);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.capsule-end__k {
  display: block; margin: 0 0 12px !important; font: 500 .68rem/1.4 var(--font-mono) !important;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.capsule-end__link {
  display: flex; align-items: baseline; gap: 14px; margin: 0 !important; color: var(--ink); text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.45rem, 1.15rem + 1.1vw, 1.9rem) !important;
  line-height: 1.16; letter-spacing: -.01em; text-wrap: balance;
}
a.capsule-end__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
a.capsule-end__link:hover { color: var(--ink); }
a.capsule-end__link:focus-visible { outline: none; }
.capsule-end__next:has(> a.capsule-end__link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; }
.capsule-end__n {
  flex: none; display: inline-grid; place-items: center; min-width: 42px; height: 30px; padding: 0 8px; border-radius: 9px;
  font: 600 .82rem/1 var(--font-mono); letter-spacing: .02em; color: #fff; background: var(--wire-deep); transform: translateY(-.16em);
}
.capsule-end__p { margin: 12px 0 0 !important; max-width: 46ch; color: var(--ink-2); font-size: .98rem !important; line-height: 1.55; text-wrap: pretty; }
.capsule-end__p code { font-size: .86em; }
.capsule-end__go {
  position: absolute; right: 26px; top: 50%; width: 54px; height: 54px; margin-top: -27px; display: grid; place-items: center;
  border-radius: 50%; color: #fff; background: var(--wire-deep); box-shadow: 0 12px 26px -12px rgba(106, 76, 240, .75);
  transition: transform .3s var(--ease-out);
}
.capsule-end__go svg { width: 22px; height: 22px; }
.capsule-end__next:has(> a.capsule-end__link):hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.capsule-end__next:hover .capsule-end__go { transform: translateX(4px); }

/* The next capsule is not published yet (03 → 04): said plainly, and the action that exists. */
.capsule-end__next--soon { padding-right: 28px; background: var(--surface); box-shadow: none; border: 1px dashed var(--rule-strong); }
.capsule-end__next--soon::before { display: none; }
.capsule-end__next--soon .capsule-end__link { color: var(--ink-2); }
.capsule-end__next--soon .capsule-end__n { color: var(--ink-2); background: transparent; border: 1px dashed var(--control); }
.capsule-end__soon {
  display: inline-block; margin-left: 8px; padding: 3px 8px; border-radius: 999px; background: var(--surface-2);
  color: var(--ink-2); letter-spacing: .08em;
}
.capsule-end__map {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 11px 18px; border-radius: 999px;
  color: #fff; background: var(--wire-deep); font-weight: 600; font-size: .94rem; text-decoration: none;
  box-shadow: 0 12px 26px -14px rgba(106, 76, 240, .8); transition: box-shadow .3s ease, transform .3s var(--ease-out);
}
.capsule-end__map:hover { color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-lift); }

/* Previous: a quiet row under the card. */
.capsule-end__prev {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 15px 20px; border-radius: var(--r-lg);
  border: 1px solid var(--rule); background: var(--surface); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none;
  transition: box-shadow .3s ease, border-color .3s ease;
}
.capsule-end__prev:hover { color: var(--ink); border-color: var(--rule-strong); box-shadow: var(--shadow); }
.capsule-end__prev .capsule-end__k { margin: 0 !important; }
.capsule-end__back { display: inline-block; margin-right: 4px; color: var(--accent); letter-spacing: 0; transition: transform .3s var(--ease-out); }
.capsule-end__prev:hover .capsule-end__back { transform: translateX(-3px); }
.capsule-end__pq { display: flex; align-items: baseline; gap: 10px; min-width: 0; font-weight: 600; font-size: .98rem; line-height: 1.4; }
.capsule-end__pq .capsule-end__n { min-width: 32px; height: 22px; padding: 0 6px; border-radius: 6px; font-size: .7rem; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--rule-strong); transform: translateY(-.1em); }

/* 01: the films pointer, kept, quieter than "next". */
.capsule-end__also { margin: 4px 0 0 !important; padding: 0 6px; font-size: .94rem !important; line-height: 1.6; color: var(--ink-2); }
.capsule-end__also .capsule-end__k { display: inline; margin: 0 10px 0 0 !important; }

@media (max-width: 560px) {
  .capsule-end__next { padding: 20px 20px 24px; border-radius: var(--r-lg); }
  .capsule-end__next .capsule-end__k { min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; padding-right: 56px; margin-bottom: 8px !important; }
  .capsule-end__next--soon .capsule-end__k { padding-right: 0; }
  .capsule-end__go { top: 18px; right: 18px; margin-top: 0; width: 44px; height: 44px; }
  .capsule-end__go svg { width: 19px; height: 19px; }
  .capsule-end__link { gap: 12px; }
  .capsule-end__n { min-width: 38px; height: 27px; }
  .capsule-end__soon { margin-left: 0; }
}

/* ---------- Presentation mode, print ---------- */
:is([data-teaching], .is-presenting) :is(.course-nav, .course-nav__scrim, .course-nav__open, .capsule-end) { display: none !important; }
@media print {
  .course-nav, .course-nav__scrim, .course-nav__open { display: none !important; }
  .capsule-end__next { box-shadow: none !important; background: none !important; border: 1px solid #ccc; transform: none !important; break-inside: avoid; }
  .capsule-end__next::before, .capsule-end__go, .capsule-end__map { display: none !important; }
  .capsule-end__n { color: #16161f !important; background: none !important; border: 1px solid #bbb; }
  .capsule-end__prev { box-shadow: none !important; }
}