/* Chapter 2, "How do variables work in JavaScript?", page-specific (docs/js-series/ch2/content-v2.md; design spec,
   tokens and components). Loaded after javascript.css, nav.css, present.css and the figures' sheets. Tokens only
   (light, dark, print). Copied from chapter 1's capsule.css where the parts are the same (the hero caption, the film
   slot, the playground cards and their side-by-side outputs, large screens, presentation, print, phones); new here:
   the three keywords and the "Careful" line (section 01), the numbered steps under the scope simulation (section 02;
   off screen once the figure is mounted), the console comments of the snippet (section 03), the assistant box (section
   04), the code in two quiz questions. The figure styles itself (figures/variables-scope.css); this file never styles
   its inside. */

/* ---------- The hero: the art box keeps the core-and-shell art's 640 x 470, the caption sits under it ---------- */
.stage--hero.stage--core { aspect-ratio: auto; display: flex; flex-direction: column; }
.stage--core > .fx-art { position: relative; inset: auto; width: 100%; aspect-ratio: 640 / 470; flex: none; }
.stage__cap {
  position: relative; z-index: 3; margin: -2% 9% 0; padding-bottom: 5%;
  font: 500 .86rem/1.45 var(--font-body); color: var(--night-ink-2); text-wrap: pretty;
}
@media (max-width: 600px) { .stage__cap { margin-inline: 7%; font-size: .8rem; line-height: 1.42; } }

/* ---------- The film (hidden until the episode is online; index.html says how to publish it) ---------- */
.film-slot[hidden] { display: none !important; }
.film-slot__k { margin: 0 0 14px !important; }

/* ---------- 01 · const, let, var: three keywords as mono chips (var the old way, in --ink-3), then "Careful" ---------- */
ul.kw-list { list-style: none; padding: 0 !important; margin: 16px 0 6px !important; display: grid; gap: 10px; }
ul.kw-list > li { margin: 0 !important; padding-left: 4.6em; position: relative; line-height: 1.55; }
code.kw-chip {
  position: absolute; left: 0; top: .05em; min-width: 3.9em; text-align: center; padding: .12em .5em !important;
  border-radius: 8px !important; border: 1.5px solid var(--rule-strong) !important; background: var(--surface) !important;
  font: 700 .86em/1.45 var(--font-mono) !important; color: var(--ink) !important;
}
code.kw-chip--old { color: var(--ink-3) !important; border-style: dashed !important; background: transparent !important; }
.careful {
  position: relative; margin: 18px 0 0 !important; padding: 12px 16px 12px 18px; border-radius: var(--r);
  background: var(--you-soft); border: 1px solid color-mix(in srgb, var(--you) 30%, transparent); color: var(--ink); line-height: 1.55;
}
.careful__k {
  display: inline-block; margin-right: 8px; font: 700 .68rem/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--you); vertical-align: .1em;
}
@media (max-width: 420px) { ul.kw-list > li { padding-left: 4.3em; } }

/* ---------- 02 · The steps under the scope simulation: numbers 1 to 5, as on the figure ---------- */
.sc-legend { margin: 20px 0 6px; }
ol.sc-legend__steps { list-style: none; padding: 0 !important; margin: 0 !important; counter-reset: sl; }
ol.sc-legend__steps > li {
  counter-increment: sl; position: relative; margin: 0 0 10px !important; padding: 2px 0 2px 44px; line-height: 1.6;
}
ol.sc-legend__steps > li::before {
  content: counter(sl); position: absolute; left: 0; top: 1px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font: 600 .82rem/1 var(--font-mono);
  color: var(--engine); background: var(--engine-soft); border: 1px solid color-mix(in srgb, var(--engine) 40%, transparent);
}
ol.sc-legend__steps > li b { color: var(--ink); }
ol.sc-legend__steps > li.is-on::before { background: var(--engine); color: var(--surface); border-color: var(--engine); }
.sc-legend__var { margin: 4px 0 0 44px !important; color: var(--ink-2); }
/* Once F1 is mounted, its text panel says each step in view: the list leaves the screen but stays for screen readers
   (the visually-hidden pattern), for print and for a page without JavaScript (no .fx--ready). */
@media screen {
  [data-fx="variables-scope"].fx--ready + .sc-legend {
    position: absolute !important; width: 1px; height: 1px; margin: 0 !important; padding: 0 !important;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}

/* ---------- 03 · Before its line: the comments read as a console (undefined dim, the error in the night error colour);
   on a phone the long line wraps under itself instead of hiding behind the fade ---------- */
.code__pre .out-undef { color: var(--code-dim); }
.code__pre .out-err { color: #ff8a80; }
@media (max-width: 640px) {
  .code--wrap .code__pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  .code--wrap .ln { display: block; padding-left: 4ch; text-indent: -4ch; }
  /* a panel with a Copy button: inline-block lines (a block line would add a second newline to the copied text),
     the wrapped part of a "// 3. …" comment under its words */
  .code--wrap .ln--hang { display: inline-block; width: 100%; box-sizing: border-box; vertical-align: top; padding-left: 6ch; text-indent: -6ch; }
}

/* ---------- 04 · Try it: four cards (the course rule above them), chapter 1's ---------- */
.try-card {
  margin: 22px 0 0; padding: clamp(18px, 2.6vw, 26px); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow-sm);
}
.try-card + .try-card { margin-top: 18px; }
.slide .try-card__h { margin: 0 0 4px !important; font: 600 clamp(1.2rem, 1.05rem + .5vw, 1.4rem)/1.25 var(--font-display) !important; }
.slide .try-card__h code { font-size: .86em; }
.try-card .code { margin-block: 14px 12px; }
.try-card details.check { margin-bottom: 0; }
ol.try-steps { list-style: none; padding: 0 !important; margin: 16px 0 14px !important; counter-reset: ts; }
ol.try-steps > li { counter-increment: ts; position: relative; margin: 0 0 8px !important; padding-left: 2.4em; line-height: 1.55; }
ol.try-steps > li::before { content: counter(ts, decimal-leading-zero); position: absolute; left: 0; top: .15em; font: 600 .78rem/1.6 var(--font-mono); color: var(--ink-3); }
.expect-pair { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 6px; }
.expect-pair pre.expect { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.check__body .expect-pair { margin-bottom: 14px; }
.check__body > p + .expect-pair { margin-top: 8px; }
.check__body .code { margin-block: 8px 12px; }
.check__small { font-size: .88rem !important; line-height: 1.5; color: var(--ink-3); }
@media (max-width: 640px) { .expect-pair { grid-template-columns: minmax(0, 1fr); } }
/* Outputs sit on night glass in both themes: chrome lines dimmed, the error line in the night error colour */
pre.expect .out-dim { color: var(--code-dim); }
pre.expect .out-no { color: #ff8a80; }

/* The assistant box: framed, its kicker, three numbered checks */
.ai-review {
  position: relative; margin: 26px 0 0; padding: 18px 20px 14px; border-radius: var(--r-lg);
  background: radial-gradient(80% 140% at 100% 0%, color-mix(in srgb, var(--host) 8%, transparent), transparent 60%), var(--surface);
  border: 1.5px solid color-mix(in srgb, var(--host) 40%, var(--rule)); box-shadow: var(--shadow-sm);
}
.ai-review__k { margin: 0 0 10px !important; font: 600 .68rem/1.3 var(--font-mono) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--host); }
ol.ai-review__list { list-style: none; padding: 0 !important; margin: 0 !important; counter-reset: ar; }
ol.ai-review__list > li { counter-increment: ar; position: relative; margin: 0 0 10px !important; padding-left: 38px; line-height: 1.55; }
ol.ai-review__list > li::before {
  content: counter(ar); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font: 600 .78rem/1 var(--font-mono); color: var(--host);
  border: 1.5px solid color-mix(in srgb, var(--host) 55%, transparent); background: var(--surface);
}
ol.ai-review__list b { color: var(--ink); }

/* The code of two quiz questions */
.quiz__code { margin: 0 0 14px !important; }

/* ---------- Large screens (2026-10-25): the four Try it cards sit two by two in the figures' frame (javascript.css,
   Large screens) once a card can be about 620 px, so its playground buttons stay on one row: from 1600 px with the menu
   closed (or no menu), from 1880 px with the menu open. The two cards of a row end on the same line; the heading, the
   course rule and the assistant box stay on the reading column ---- */
@media screen and (min-width: 1600px) {
  :root:not(.is-presenting):is(:not([data-motion]), [data-nav="collapsed"]) .prose > #try {
    width: var(--w-fig); margin-left: calc(50% - var(--w-fig) / 2);
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; align-items: stretch;
  }
  :root:not(.is-presenting):is(:not([data-motion]), [data-nav="collapsed"]) .prose > #try > :not(.try-card) { grid-column: 1 / -1; justify-self: center; width: min(100%, var(--prose-w)); }
  :root:not(.is-presenting):is(:not([data-motion]), [data-nav="collapsed"]) .prose > #try > .try-card { margin-top: 18px; }
}
@media screen and (min-width: 1880px) {
  :root:not(.is-presenting) .prose > #try {
    width: var(--w-fig); margin-left: calc(50% - var(--w-fig) / 2);
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; align-items: stretch;
  }
  :root:not(.is-presenting) .prose > #try > :not(.try-card) { grid-column: 1 / -1; justify-self: center; width: min(100%, var(--prose-w)); }
  :root:not(.is-presenting) .prose > #try > .try-card { margin-top: 18px; }
}

/* ---------- Presentation mode ---------- */
:root.is-presenting .prose > #try .try-card { box-shadow: none; }
/* The figure slide is the heading, one sentence and the figure at full size: the steps the figure already says leave
   the slide, and the figure takes the slide's whole width. */
:root.is-presenting #scope .sc-legend { display: none !important; }
:root.is-presenting .prose > .slide--read > .fx.breakout--mid { --bw: 1216px; }

/* ---------- Print ---------- */
@media print {
  .stage__cap { color: #16161f; }
  .try-card, .ai-review { box-shadow: none; break-inside: avoid; }
  pre.expect .out-dim { color: #5c5c6a; }
  pre.expect .out-no, .code__pre .out-err { color: #b3261e; }
  .code__pre .out-undef { color: #5c5c6a; }
}

/* ---------- Phones ---------- */
@media (max-width: 480px) {
  .stage__cap { padding-bottom: 4%; }
  .hero:has(> .stage) { gap: 16px; }
  .hero { padding-bottom: 12px; }
  .hero h1 { margin-bottom: 14px; }
  .hero .lede { margin-bottom: 14px; }
  .stage--core > .fx-art { width: 88%; margin-inline: auto; }
  .wire { margin-bottom: 20px; }
  .try-card { padding: 16px 14px; margin-inline: -4px; }
  .ai-review { padding: 16px 14px 10px; margin-inline: -4px; }
  ol.sc-legend__steps > li { padding-left: 40px; }
}