/* Chapter 02, page-specific: the hero art and its caption, the film slot, the figures' static versions, the share
   fold's table, Try it's setup fold, the recap's glyphs and its table. Loaded after mobile.css, figures/fx.css and
   figures/android.css. Tokens only. The shared components (beat conclusions, checks, Try-it steps, widths, and With
   knowledge, .kn-flow) live in mobile.css (docs/mobile/council/r2-shared-canon.md). */

/* The hero art (the old capsule 02's fork, without the kill: chapter 03 owns it) and its one-line caption, in the band
   under the art's dashed boundary, inside the night stage. One ambient loop: the fork to your app flows, its dot
   answers (mobile.css's art-flow and art-beat). */
.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;
}
@media (max-width: 600px) { .stage__cap { margin-inline: 8%; font-size: .78rem; line-height: 1.4; } .stage--sandbox .art-beat { display: none; } }
@media (min-width: 601px) { .art--sandbox .art-mono { font-size: 18px; } .art--sandbox .art-mono--sm { font-size: 17.5px; } }

/* The film slot. */
.film-slot[hidden] { display: none !important; }
.film-slot__k { margin: 0 0 14px !important; }
.film-slot .figure-film__status { left: auto; bottom: auto; top: 12px; right: 12px; }

/* A figure's own slide (figures 1 and 2, as chapter 03's): its kicker, close under the beat it belongs to. */
.prose > .slide + .slide.slide--fig { margin-top: clamp(26px, 3vw, 40px); }
.fig-k { margin: 0 0 4px !important; }
.slide--fig > .fx { margin-top: 14px; }

/* 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 ul { margin: 0 0 10px; }
.fx-fallback > .table-wrap { margin: 0 0 12px; box-shadow: none; }

/* Tables that fit their column, even on a phone (no sideways scroll). */
.table-wrap--fit .data-table { min-width: 0; }
.deeper > .table-wrap--fit { margin-block: 12px 16px; }
@media (max-width: 760px) {
  .table-wrap--fit { background: var(--surface) !important; }
  .table-wrap--fit .data-table tbody th, .table-wrap--fit .data-table thead th:first-child { position: static; box-shadow: none; min-width: 0; }
}
/* Figure 2's static version: the four names, the values in the figure's colours (amber: you; sky: Android). */
.table-wrap--names .data-table thead th { font: 600 .9rem/1.3 var(--font-body); }
.table-wrap--names .data-table tbody tr:first-child td:nth-child(2) code { color: var(--you); }
.table-wrap--names .data-table tbody tr:not(:first-child) td:nth-child(2) :is(code), .table-wrap--names .data-table tbody tr:last-child td:nth-child(2) { color: var(--os); font-weight: 600; }
.table-wrap--names td code { overflow-wrap: anywhere; }

/* "Back to your messages app" (a kicker, then the back-line), then the rule: the shared .verdict of mobile.css. */

/* The share fold (R3): seven ways, two columns; on a phone, one block per way. */
.table-wrap--ways .data-table :is(tbody th, thead th:first-child) { width: 58%; font-weight: 500; color: var(--ink-2); }
.table-wrap--ways .data-table tbody th b { color: var(--ink); }
.table-wrap--ways .data-table thead th { font: 600 .9rem/1.3 var(--font-body); color: var(--ink); }
@media (max-width: 600px) {
  .table-wrap--ways .data-table, .table-wrap--ways tbody, .table-wrap--ways tr, .table-wrap--ways td { display: block; }
  .table-wrap--ways thead { display: none; }
  .table-wrap--ways .data-table tbody th { display: block; width: auto !important; padding: 11px 12px 4px !important; border-bottom: 0; background: var(--surface-2); }
  .table-wrap--ways .data-table td { width: auto !important; padding: 6px 12px 8px !important; border-bottom: 0; }
  .table-wrap--ways tr:not(:last-child) > td:last-child { border-bottom: 1px solid var(--rule); }
  .table-wrap--ways td::before { content: attr(data-col); display: block; margin-bottom: 2px; font: 600 .62rem/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
}

/* Try it: the setup fold sits first (chapter 01's "Before class" link lands here); what to read in steps 1 and 2 is
   an instruction, a little stronger than a note. */
#check > .ck-setup { margin-top: 10px; }
#check .try__more { color: var(--ink-2); }
pre.expect mark { background: rgba(255, 255, 255, .14); color: #fff; border-radius: 3px; padding: 0 2px; margin: 0 -2px; }
/* On a phone, a real output wraps instead of scrolling, so step 3's proof word, "Permission denied", is never cut. */
@media (max-width: 560px) { #check .try > li:nth-child(3) pre.expect { white-space: pre-wrap; overflow-wrap: anywhere; } }   /* steps 1-2 fit on one line */

/* Recap: one glyph per card, the film's recap cards: the manifest's tag, a refused request, a lock, a new number. */
.recap li { padding-right: 40px; }
.recap li::after { content: ""; position: absolute; top: 16px; right: 14px; width: 18px; height: 18px; background: var(--ink-3);
  -webkit-mask: var(--g) center / contain no-repeat; mask: var(--g) center / contain no-repeat; }
.recap li:nth-child(1) { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7l-5 5 5 5M16 7l5 5-5 5M14 4l-4 16'/%3E%3C/svg%3E"); }
.recap li:nth-child(2) { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E"); }
.recap li:nth-child(3) { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9.5' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
.recap li:nth-child(4) { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.6M20 4v4h-4'/%3E%3C/svg%3E"); }
/* Recap item 4: the film's card 4, a mini table with words. Three rows "same", the PID row "new", outlined in sky:
   Android gives a new number at each start. */
/* Items 3 and 4 take a row each (item 4 holds the table): no card stretched empty beside the table. Item 4's title
   sits above its table, so the eye goes title, then evidence. */
.recap li:nth-child(3), .recap li.recap__pid { grid-column: 1 / -1; }
.recap li.recap__pid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 8px 20px; }
.recap-pid { width: 100%; max-width: 340px; border-collapse: separate; border-spacing: 0; font-size: .86rem; line-height: 1.3; }
.recap-pid th, .recap-pid td { padding: 5px 8px; text-align: left; vertical-align: middle; border: 0; }
.recap-pid thead th { font: 600 .74rem/1.25 var(--font-body); color: var(--ink-2); }
.recap-pid tbody th { font: 600 .84rem/1.3 var(--font-body); color: var(--ink); white-space: nowrap; }
.rp-chip { display: inline-block; padding: 1px 10px; border-radius: 999px; font: 700 .72rem/1.5 var(--font-body); color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--rule-strong); white-space: nowrap; }
.rp-chip--new { color: var(--os); background: color-mix(in srgb, var(--os) 10%, var(--surface)); border-color: color-mix(in srgb, var(--os) 55%, transparent); }
.recap-pid tr.is-diff > * { --rp-line: color-mix(in srgb, var(--os) 60%, transparent); background: color-mix(in srgb, var(--os) 7%, var(--surface));
  box-shadow: inset 0 1.5px 0 var(--rp-line), inset 0 -1.5px 0 var(--rp-line); }
.recap-pid tr.is-diff > :first-child { border-radius: 9px 0 0 9px; box-shadow: inset 1.5px 0 0 var(--rp-line), inset 0 1.5px 0 var(--rp-line), inset 0 -1.5px 0 var(--rp-line); }
.recap-pid tr.is-diff > :last-child { border-radius: 0 9px 9px 0; box-shadow: inset -1.5px 0 0 var(--rp-line), inset 0 1.5px 0 var(--rp-line), inset 0 -1.5px 0 var(--rp-line); }
/* Its first view (capsule.js): the three "same" chips pop top to bottom, then the "new" row glows once. Nothing is
   hidden without JavaScript, with motion off or reduced, in print, while presenting. */
.recap-pid.is-pre .rp-chip { opacity: 0; transform: scale(.6); }
.recap-pid.is-in .rp-chip { transition: opacity var(--fx-t-short) var(--fx-ease-pop), transform var(--fx-t-short) var(--fx-ease-pop); }
.recap-pid.is-in tr:nth-child(2) .rp-chip { transition-delay: 110ms; }
.recap-pid.is-in tr:nth-child(3) .rp-chip { transition-delay: 220ms; }
.recap-pid.is-in tr:nth-child(4) .rp-chip { transition-delay: 480ms; }
.recap-pid.is-in tr.is-diff > * { animation: rp-glow 1.2s ease .7s; }
@keyframes rp-glow { 40% { background: color-mix(in srgb, var(--os) 24%, var(--surface)); } }

/* Presentation mode. */
[data-teaching="true"] .fx { margin-block: 12px 8px; }
[data-teaching="true"] .prose > #share { padding-block: 12px; }

@media print {
  /* A4: the film, figure 1's code and each figure's static version stay whole; Try it, taller than a page, may split
     between its blocks instead of leaving a page two-thirds empty (design review S5). With knowledge: mobile.css. */
  #film, .mf, .fx-fallback { break-inside: avoid; }
  #check { break-inside: auto; }
  #check .ck-setup { break-inside: avoid; }
  .recap li::after, .recap-pid tr.is-diff > *, .rp-chip { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .recap-pid.is-pre .rp-chip { opacity: 1 !important; transform: none !important; }
  .recap li.recap__pid, .table-wrap--ways tr { break-inside: avoid; }
  .fx + .fig__caption { break-before: avoid; }
  pre.expect mark { background: #e8e5dc; color: #16161f; }
}