/* Capsule 01, "How does JavaScript run?", page-specific (docs/js-series/ch1/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). Here: the hero caption, the film slot, the three traits (section 01), the numbered legend under the engine
   pipeline (section 02; off screen once the figure is mounted), the two playground cards and their side-by-side
   outputs (section 05), the figure slides in presentation mode. The figures style themselves (figures/*.css); this
   file never styles a figure's 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 · Three traits: one card each, the words on the left, the language's own code on the right ---------- */
ul.traits { list-style: none; padding: 0 !important; margin-block: 18px 8px !important; display: grid; gap: 12px; }
.trait {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 14px 22px;
  margin: 0 !important; padding: 16px 16px 16px 20px; border-radius: var(--r-lg);
  background: radial-gradient(90% 140% at 0% 0%, color-mix(in srgb, var(--engine) 6%, transparent), transparent 62%), var(--surface);
  border: 1px solid var(--rule); box-shadow: var(--shadow-sm);
}
.trait__text { min-width: 0; }
.trait__text p { margin: 0 !important; font-size: .98rem !important; line-height: 1.55; color: var(--ink-2); }
.trait .trait__t { margin: 0 0 4px !important; font: 600 1.18rem/1.3 var(--font-display) !important; color: var(--ink); }
.trait__code { margin: 0 !important; }
.trait__code .code__bar { min-height: 30px; padding: 4px 12px; }
.trait__code .code__file { font-weight: 500; letter-spacing: .06em; }
@media (max-width: 760px) {
  .trait { grid-template-columns: minmax(0, 1fr); padding: 14px; }
}
/* On a phone the comment is the value: the snippet wraps at its spaces instead of hiding it behind the fade */
@media (max-width: 560px) {
  .trait__code .code__pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .74rem; }
  /* one span.ln per source line: a wrapped line continues indented, so it never reads as a new line of code */
  .trait__code .ln { display: block; padding-left: 4ch; text-indent: -4ch; }
}
/* A product name never breaks with a hyphen (French text is hyphenated on phones) */
.nohy { hyphens: manual; -webkit-hyphens: manual; }

/* ---------- 02 · The legend under the engine pipeline: numbers 1 to 5, as on the figure ---------- */
ol.pipe-legend { list-style: none; padding: 0 !important; margin: 20px 0 6px !important; counter-reset: pl; }
ol.pipe-legend > li {
  counter-increment: pl; position: relative; margin: 0 0 10px !important; padding: 2px 0 2px 44px; line-height: 1.6;
  transition: color .3s ease;
}
ol.pipe-legend > li::before {
  content: counter(pl); 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);
  transition: background-color .3s ease, color .3s ease;
}
ol.pipe-legend > li b { color: var(--ink); }
/* capsule.js lights the step the figure is showing (when the figure reports one) */
ol.pipe-legend > li.is-on::before { background: var(--engine); color: var(--surface); border-color: var(--engine); }
/* Once F1 is mounted, its text panel says each step in view: the legend 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="engine-pipeline"].fx--ready + ol.pipe-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;
  }
}

/* ---------- 05 · Try it: two cards (the course rule above them) ---------- */
.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; }
.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-k { margin: 14px 0 8px !important; font: 600 .68rem/1.3 var(--font-mono) !important; letter-spacing: .14em; text-transform: uppercase; 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; }
@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; }

/* ---------- Large screens (2026-10-25): the two Try it cards sit side by side in the figures' frame (javascript.css,
   Large screens) once a card can be about 620 px, so its two playground buttons stay on one row: from 1600 px with the
   menu closed (or no menu), from 1880 px with the menu open (at 1600 a card would be 505 px, at 1720 558 px, and the
   buttons would stack). Both cards end on the same line; the heading and the course rule stay on the reading column's edge ---------- */
@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: 8px; }
}
@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: 8px; }
}

/* ---------- Presentation mode ---------- */
:root.is-presenting .prose > #try .try-card { box-shadow: none; }
/* A figure slide is the heading, one sentence and the figure at full size: the lists the figures already say leave
   the slide (the legend under F1, the lists before F2 and F3), and the figures take the slide's whole width. */
:root.is-presenting #engine ol.pipe-legend,
:root.is-presenting #engines .env-list,
:root.is-presenting #same-core .env-list,
:root.is-presenting #same-core [data-i18n="s4-p2"] { display: none !important; }
:root.is-presenting .prose > .slide--read > .fx.breakout--mid { --bw: 1216px; }

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

/* ---------- 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; }
  ol.pipe-legend > li { padding-left: 40px; }
}