/* 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 javascript.css tokens (copied from courses/mobile/nav.css): 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. */

/* The menu: 256 to 304 px up to 1600 px, then it grows with the type (323 at 1920, 360 from about 2530). The menu and the page
   stay against the left edge up to 2880 px (the frame used to stop at 1680 px: 440 px of empty band each side at 2560). */
:root { --cn-w: clamp(256px, 20vw, 304px); --cn-x: max(0px, (100vw - 2880px) / 2); }
@media screen and (min-width: 1600px) { :root { --cn-w: clamp(304px, 304px + (100vw - 1600px) * .06, 360px); } }

/* ---------- The header's menu button (first in the bar, before the brand) ---------- */

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)); }

html[data-motion]:not([data-teaching]) body:has(> main.module-main[data-capsule]) .site-nav a[href="/courses/javascript/"] { 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; }   

/* ---------- 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);
  }
  
  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; }
  /* The footer's rule starts where the content does, not under the rail's titles. */
  html[data-motion]:not([data-nav="collapsed"]):not([data-teaching]) body:has(> main.module-main[data-capsule]) > .site-foot::before {
    left: calc(var(--cn-x) + var(--cn-w));
  }
  
  html[data-motion]:not([data-nav="collapsed"]):not([data-teaching]) body:has(> main.module-main[data-capsule]) .breakout {
    --bw: var(--w-full);   /* javascript.css, Large screens: a share of the room right of the menu */
  }
  html[data-motion]:not([data-nav="collapsed"]):not([data-teaching]) body:has(> main.module-main[data-capsule]) .breakout.breakout--mid {
    --bw: var(--fig-w, var(--w-fig));   /* --fig-w: the figures with little inside stop at 68rem (javascript.css) */
  }
  html[data-motion]:not([data-nav="collapsed"]):not([data-teaching]) body:has(> main.module-main[data-capsule]) .prose > .card--wide {
    --kw: var(--w-card);   /* 900 px until the card splits in two at 1600 px, then the figures' frame */
  }
}

/* ---------- 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; }

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

.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); }

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

[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); }

.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); }

.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); }

.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; gap: 6px 8px; 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; }   /* the flex gap above keeps it off the label, on one line or two */
}

/* ---------- 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; }
}

/* ---------- JavaScript, then Node.js: the two parts, and the labs (design spec 4.3) ---------- */
.course-nav__part { margin: 0 0 10px; padding: 0 6px; font: 600 .66rem/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.course-nav__group + .course-nav__part { margin-top: 26px; padding-top: 16px; border-top: 1px dashed var(--rule-strong); }
.course-nav__n--lab { font-size: .58rem; letter-spacing: .04em; }