/* Capsule 02, page-specific: the hero art's caption, the strip of three later capsules, the With knowledge panels,
   the sub-steps of "Try it on your phone". Loaded after mobile.css, figures/fx.css and figures/android.css. Tokens
   only. The shared components (beat conclusions, checks, Try-it steps, widths) live in mobile.css
   (docs/mobile/council/r2-shared-canon.md); no page copies here. */

/* The hero art and its one-line caption (pedagogy review S11): the picture says what the labels mean. The art sits
   in the flow, the caption in the band under the art's dashed boundary, inside the night stage. */
.stage--hero.stage--sandbox { aspect-ratio: auto; display: flex; flex-direction: column; }
.stage--sandbox .art { position: relative; inset: auto; width: 94%; height: auto; margin: 2.6% 3% 0; aspect-ratio: 640 / 470; }
.stage__cap {
  position: relative; z-index: 3; margin: -7.4% 11.8% 0; padding-bottom: 5.4%;
  font: 500 .84rem/1.45 var(--font-body); color: var(--night-ink-2); text-wrap: pretty;
}
/* At the phone size the labels grow (mobile.css) and the beat dot would touch u0_a231: the amber cell says it alone. */
@media (max-width: 600px) { .stage__cap { margin-inline: 8%; font-size: .78rem; line-height: 1.4; } .stage--sandbox .art-beat { display: none; } }

/* The static version of a figure (no JavaScript, print). */
.fx-fallback { padding: 16px 20px 6px; border-radius: 22px; border: 1px solid var(--rule); background: var(--surface); }
.fx-fallback > .fig { margin: 0; }
.fx-fallback:has(> .fig) { padding: 0; border: 0; background: none; }
.fx-fallback ul { margin: 0 0 10px; }

/* Three more rules, three later capsules. */
.strip { list-style: none; margin: 20px 0 0 !important; padding: 0 !important; display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.strip__card {
  position: relative; margin: 0 !important; padding: 18px 18px 16px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow-sm);
}
.strip__n {
  display: inline-grid; place-items: center; min-width: 34px; height: 26px; padding: 0 8px; margin-bottom: 12px; border-radius: 8px;
  font: 600 .74rem/1 var(--font-mono); letter-spacing: .04em; color: #fff; background: var(--wire-deep);
}
.strip__t { margin: 0 0 6px !important; font-family: var(--font-display); font-weight: 600; font-size: 1.18rem !important; line-height: 1.2; color: var(--ink); }
.strip__card p:not(.strip__t) { margin: 0 !important; font-size: .95rem !important; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 760px) {
  .strip { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .strip__card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 14px 16px; }
  .strip__n { margin: 0; grid-row: 1; }
  .strip__t { margin: 0 !important; }
  .strip__card p:not(.strip__t) { grid-column: 1 / -1; margin-top: 8px !important; }
}

/* With knowledge: the line to paste first (above the tabs, as in capsule 03), the "All" panel. */
.kn-first { margin: 16px 0 6px; }
.kn-first__k { margin: 0 0 2px !important; font: 600 .7rem/1.3 var(--font-mono) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.kn-first > p:last-child { margin: 0 !important; }
.knowledge .kn-sub { margin: 4px 0 10px !important; font: 600 .7rem/1.3 var(--font-mono) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.kn-where { list-style: none; padding: 0 !important; margin: 0 0 6px !important; display: grid; gap: 8px; }
.kn-where li { margin: 0 !important; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--rule); font-size: .96rem !important; }
.kn-col li > .prompt + * { margin-top: 0; }

/* Try it on your phone: a step whose moves need a command each (steps 3 and 4), as numbered sub-steps. */
.try__sub { list-style: none; margin: 0 !important; padding: 0 !important; counter-reset: sub; display: grid; gap: 8px; }
.try__sub > li { counter-increment: sub; position: relative; margin: 0 !important; padding-left: 30px; }
.try__sub > li::before {
  content: counter(sub, lower-alpha); position: absolute; left: 0; top: .15em; width: 20px; height: 20px; border-radius: 6px;
  display: grid; place-items: center; font: 600 .7rem/1 var(--font-mono); color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--rule-strong);
}
.try__sub > li { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 4px; }
.try__sub > li > p { margin: 0 !important; font-size: .97rem !important; }
.try__sub code.cmd { margin: 0; }
@media (max-width: 600px) { .try__sub > li { padding-left: 28px; } .try__sub code.cmd { margin-left: -28px; max-width: calc(100% + 28px); } }
pre.expect mark { background: rgba(255, 255, 255, .14); color: #fff; border-radius: 3px; padding: 0 2px; margin: 0 -2px; }
#check > .deeper { margin-top: 6px; }

/* Quick check: the question that comes from an earlier capsule. */

/* Presentation mode: a beat's fold stays closed; the simulators stay compact. */
[data-teaching="true"] .fx { margin-block: 12px 8px; }
[data-teaching="true"] .prose > #kill, [data-teaching="true"] .prose > #rotation { padding-block: 12px; }

@media print {
  .strip__card { box-shadow: none; break-inside: avoid; }
  pre.expect mark { background: #e8e5dc; color: #16161f; }
}