/* Capsule 01 only: "Who draws the pixels of a mobile app?". Loaded after mobile.css, fx.css and pixels.css.
   Tokens only (course colours keep their one meaning: the OS sky, a browser engine violet, a framework rose,
   your code amber, the layer that draws mint). Android's own layout-bounds drawing stays red and blue.
   The shared components (beat-end, label.check, the Try-it steps, try__shot, pre.expect) live in mobile.css
   (docs/mobile/council/r2-shared-canon.md): no page copy here. */

/* ---------- Hero art: the switch is Android's "Show layout bounds", lit in the bounds' own red (as in the explorer) ---------- */
.stage--bounds .c1-switch__track { fill: #ff6b6b; }
@media (prefers-reduced-motion: no-preference) { .stage--bounds .c1-switch__track { animation-name: c01-track; } }
@keyframes c01-track { 0%, 33% { fill: #2f3448; } 36%, 88% { fill: #ff6b6b; } 91%, 100% { fill: #2f3448; } }

/* ---------- The film: hidden until it is online (index.html says how to publish it). A title card, then a fold with
   the film's words and their real names. ---------- */
.film-slot[hidden] { display: none !important; }
.film-slot__k { margin: 0 0 14px !important; }
.film-poster { position: absolute; inset: 0; display: grid; align-content: center; justify-items: start; gap: clamp(8px, 2.4cqi, 18px); padding: 0 clamp(20px, 8cqi, 64px); color: #fff; }
.film-poster > * { margin: 0 !important; }
.film-poster__k { display: flex; align-items: center; gap: 10px; font: 600 clamp(.6rem, 1.6cqi, .74rem)/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--night-ink-3); }
.film-poster__k::before { content: ""; width: clamp(18px, 5cqi, 34px); height: 2px; border-radius: 2px; background: var(--wire); }
.film-poster__t { max-width: 16ch; font: 600 clamp(1.25rem, 5.4cqi, 3.4rem)/1.08 var(--font-display); letter-spacing: -.015em; text-wrap: balance; }
.film-poster__t em { font-style: italic; font-weight: 500; padding-right: .06em; background: linear-gradient(95deg, #ff6aa9 0%, #a08bff 52%, #6ea8ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.film-poster__words { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.film-poster__words li { --c: #c3c3d1; display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 5px 10px; border-radius: 999px; font: 500 clamp(.58rem, 1.5cqi, .9rem)/1.2 var(--font-mono); color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 42%, transparent); background: color-mix(in srgb, var(--c) 9%, transparent); white-space: nowrap; }
.film-poster__words li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); flex: none; }
.fw--os { --c: #7dd3fc !important; } .fw--fw { --c: #ff6aa9 !important; } .fw--web { --c: #c084fc !important; }
/* The "coming soon" label sits top right at every width here, clear of the title card. */
.film-slot .figure-film__status { left: auto; bottom: auto; top: 12px; right: 12px; }
@container (max-width: 520px) { .film-poster { padding-top: 34px; } .film-poster__words li:nth-child(n+4) { display: none; } }

.film-key__table { width: calc(100% - 36px); border-collapse: collapse; }
.film-key__table th { padding: 2px 0 9px; text-align: left; font: 600 .66rem/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--rule); }
.film-key__table td { padding: 9px 0; vertical-align: top; font-size: .92rem; line-height: 1.45; color: var(--ink-2); border-bottom: 1px dashed var(--rule); }
.film-key__table tr:last-child td { border-bottom: 0; }
.film-key__table td:first-child { width: 44%; padding-right: 16px; }
.film-key__table td:first-child i { --c: var(--ink-3); display: inline-flex; align-items: baseline; gap: 9px; font: 500 .84rem/1.4 var(--font-mono); font-style: normal; color: var(--ink); }
.film-key__table td:first-child i::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; transform: translateY(-1px); }
.fk--os td:first-child i { --c: var(--os); } .fk--fw td:first-child i { --c: var(--fw); } .fk--web td:first-child i { --c: var(--web); } .fk--screen td:first-child i { --c: var(--screen); }
@media (max-width: 520px) {
  .film-key__table thead { display: none; }
  .film-key__table td { display: block; width: auto !important; padding: 0; border: 0; }
  .film-key__table td:first-child { padding: 10px 0 2px; }
  .film-key__table tr { display: block; border-bottom: 1px dashed var(--rule); padding-bottom: 9px; }
  .film-key__table tr:last-child { border-bottom: 0; }
  .film-key__table td:last-child { padding-left: 16px; }
}

/* ---------- The static figure of the explorer (no JS, print): five families, one line each ---------- */
.fam-list { list-style: none; margin: 0; padding: clamp(16px, 3vw, 26px) !important; display: grid; gap: 12px; border-radius: 22px; border: 1px solid var(--rule); background: var(--surface); }
.fam-list li { margin: 0; padding-left: 14px; border-left: 3px solid var(--rule-strong); font-size: .95rem; line-height: 1.5; color: var(--ink-2); }
.fam-list b { color: var(--ink); }
.fam-list[hidden] { display: none; }

/* ---------- Same screen, three apps: real captures under a "Show layout bounds" switch ---------- */
.trio { margin-block: 26px 22px; }
.trio__switch { margin: 0 auto 18px; display: flex; width: fit-content; }
.trio__shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 3.4vw, 44px); max-width: 820px; margin: 0 auto; }
.trio__shot { margin: 0; min-width: 0; }
.trio__frame {
  position: relative; overflow: hidden; aspect-ratio: 480 / 1039; border-radius: 22px; border: 5px solid #0b0d15; background: #0b0d15;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 0 0 1.5px rgba(22, 22, 31, .18), var(--shadow-lift);
}
.trio__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.trio__bounds { position: absolute; inset: 0; opacity: 0; transition: opacity .32s ease; }
.trio:has(.trio__toggle:checked) .trio__bounds { opacity: 1; }
/* One box: real, but a hairline at this size. The red ring is OUR mark of where Android drew it, and the caption says
   so (Flutter: the whole screen, edge to edge; the WebView demo: between the status bar and the bottom). */
.trio__shot--one .trio__frame::after { content: ""; position: absolute; inset: 0; z-index: 1; border: 2px solid var(--fx-bounds); border-radius: 2px; opacity: 0; transition: opacity .32s ease; pointer-events: none; }
.trio__shot--bars .trio__frame::after { top: 5.82%; }
.trio:has(.trio__toggle:checked) .trio__shot--one .trio__frame::after { opacity: 1; }
@supports not selector(:has(*)) { .trio__bounds { opacity: 1; } .trio__switch { display: none; } }
.trio__shot figcaption { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 2.9em; margin-top: 12px; text-align: center; font-size: .9rem; line-height: 1.3; }
/* The family's name in ink; the count line in the colour of who paints: the OS sky, Flutter rose, a browser engine violet. */
.trio__shot figcaption b { font-weight: 600; color: var(--ink); }
.trio__n { display: none; font: 600 .78rem/1.3 var(--font-mono); color: var(--ink-3); }
.trio__n--os { color: var(--os); } .trio__n--fw { color: var(--fw); } .trio__n--web { color: var(--web); }
.trio:has(.trio__toggle:checked) .trio__n { display: block; }
.trio__cap { max-width: 640px; margin: 16px auto 0; text-align: center; font-size: .88rem; line-height: 1.5; color: var(--ink-3); text-wrap: balance; }
.trio__cap > span:first-child { color: var(--ink-2); }
.trio__src { display: block; margin-top: 4px; font-size: .8rem; }
.trio .fx-switch input:checked { background: var(--fx-bounds); }
@media (max-width: 600px) {
  .trio__frame { border-width: 3px; border-radius: 14px; }
  .trio__shot figcaption { font-size: .82rem; }
  .trio__n { font-size: .68rem; }
}

/* In a real view tree, the view where the drawing happens is lit in mint (the layer that draws). */
pre.expect b { font-weight: 700; color: #5fd3a0; }

/* ---------- Two answers decide the rest: one row at a time ---------- */
.rowpick { margin-block: 22px 20px; }
.rowpick .table-wrap { margin: 0; }
.rowpick__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.rowpick__tabs > button {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--control); background: var(--surface); color: var(--ink-2); font: 600 .92rem/1.2 var(--font-body); white-space: nowrap;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.rowpick__tabs > button:hover { border-color: var(--ink-3); color: var(--ink); }
.rowpick__tabs > [aria-selected="true"], .rowpick__tabs > [aria-selected="true"]:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.rowpick.js-ready .data-table tbody th, .rowpick.js-ready .data-table thead th:first-child { display: none; }
.rowpick.js-ready .data-table td { font-size: 1rem; line-height: 1.5; color: var(--ink); padding-block: 16px 18px; }
.rowpick.js-ready .data-table tbody tr:hover > * { background: transparent; }
@media (max-width: 760px) {
  .rowpick.js-ready .table-wrap { overflow: visible; background: var(--surface); }
  .rowpick.js-ready .data-table { min-width: 0; }
  .rowpick.js-ready .data-table, .rowpick.js-ready .data-table tbody, .rowpick.js-ready .data-table tr, .rowpick.js-ready .data-table td { display: block; }
  .rowpick.js-ready .data-table tr[hidden] { display: none; }
  .rowpick.js-ready .data-table thead { display: none; }
  .rowpick.js-ready .data-table td { padding: 12px 16px 13px; position: static; border-bottom: 1px solid var(--rule); }
  .rowpick.js-ready .data-table tr > td:last-child { border-bottom: 0; }
  .rowpick.js-ready .data-table td::before { content: attr(data-fam); display: block; margin-bottom: 3px; font: 600 .66rem/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
  .rowpick__tabs > button { padding: 8px 13px; font-size: .88rem; }
}

/* ---------- With knowledge: the sentence to paste first, then one prompt and its checks per family ---------- */
.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; }
.kn-label { margin: 18px 0 6px !important; font: 600 .7rem/1.3 var(--font-mono) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.family-tabs__panel > .kn-label:first-of-type { margin-top: 2px !important; }
.family-tabs__panel > p:has(> .prompt) { margin: 0 !important; }
.family-tabs__panel .kn-grid { margin-top: 0; }
.kn-hint { margin: 6px 0 0 !important; font-size: .9rem !important; line-height: 1.5; color: var(--ink-3); }
.kn-col > .kn-hint { margin: -2px 0 10px !important; }
/* A code name and the full stop after it stay on one line. */
.nb { white-space: nowrap; }

/* ---------- Try it on your phone (the steps are the shared .try; only what is this page's own) ---------- */
#check > .deeper:first-of-type { margin-block: 6px 6px; }
.try__sort { margin-bottom: 0 !important; padding-left: 1.1em !important; }
.try__sort li { margin: .3em 0 !important; font-size: .98rem !important; }
/* A real output inside a fold keeps the fold's side margins (pre.expect's own margin-inline: 0 would win). */
.deeper > pre.expect { margin-inline: 18px; }

/* Jetpack Compose in the fold: a real capture (bounds on) beside its real view tree. */
.dp-proof { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; align-items: start; margin-block: 14px 22px; }
.dp-proof__shot { margin: 0; }
.dp-proof__shot img { display: block; width: 100%; height: auto; border-radius: 16px; border: 4px solid #0b0d15; background: #0b0d15; box-shadow: var(--shadow-sm); }
.dp-proof__shot figcaption { margin-top: 8px; font-size: .78rem; line-height: 1.4; color: var(--ink-3); }
.dp-proof pre.expect { margin: 0; }
@media (max-width: 600px) { .dp-proof { grid-template-columns: minmax(0, 1fr); } .dp-proof__shot { max-width: 150px; } }

/* ---------- Presentation mode ---------- */
[data-teaching="true"] .film-slot .figure-film { --fw: min(1040px, calc(100vw - 64px), calc((100vh - 230px) * 16 / 9)); width: var(--fw); margin-left: calc(50% - var(--fw) / 2); }
[data-teaching="true"] .fx.breakout { margin-block: 14px 10px; }
[data-teaching="true"] .trio { margin-block: 12px 8px; }
[data-teaching="true"] .trio__shots { max-width: calc(52vh + 60px); }
[data-teaching="true"] .trio__switch { margin-bottom: 10px; }
[data-teaching="true"] .trio__cap { margin-top: 10px; max-width: 860px; }
[data-teaching="true"] .rowpick { margin-block: 14px 10px; }

/* ---------- Print: the bounds on, every row, every proof ---------- */
@media print {
  .trio__bounds { opacity: 1 !important; }
  .trio__switch, .rowpick__tabs { display: none !important; }
  .trio__n { display: block !important; }
  .trio__shot--one .trio__frame::after { opacity: 1 !important; }
  .rowpick .data-table tr[hidden] { display: table-row !important; }
  .rowpick.js-ready .data-table tbody th, .rowpick.js-ready .data-table thead th:first-child { display: table-cell !important; }
  pre.expect b { color: #17784f; }
  .trio__frame, .dp-proof__shot img { box-shadow: none; }
}