/* Capsule 03 only: the comparison table, the Mac table, the line to paste first, the quiz tag, the no-JS figures.
   Built on the course tokens (mobile.css); loaded after mobile.css, fx.css and ios.css. The shared components (the
   beat's conclusion, the checks, the Try-it steps, the widths) are mobile.css's (docs/mobile/council/r2-shared-canon.md). */

.prose > .slide > .fig__caption { margin: -2px 0 0 !important; }

/* ---------- Side by side: Android and iOS (beat 1, .breakout--mid), and the families (the Mac card) ---------- */
.vs { margin-block: 22px 8px; }
.vs__bar { display: flex; justify-content: flex-end; margin: 0 0 6px; }
.vs__bar[hidden] { display: none; }
.vs__switch { font-size: .9rem; }
.vs__table {
  width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; overflow: hidden;
  border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow-sm);
}
.vs__table :is(th, td) { padding: 12px 16px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; font-size: .96rem; line-height: 1.42; }
.vs__table tbody tr:last-child > * { border-bottom: 0; }
.vs__table thead :is(th, td) { background: var(--surface-2); border-bottom-color: var(--rule-strong); }
.vs__table thead th { font: 600 1.06rem/1.25 var(--font-display); color: var(--ink); }
.vs__ref { margin-left: 6px; font: 500 .66rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.vs__table thead tr > :first-child { width: 28%; }
.vs__table tbody th { font-weight: 600; color: var(--ink); }
.vs__table td { color: var(--ink-2); }
.vs__table td + td, .vs__table th + th { border-left: 1px solid var(--rule); }
.vs__table code { font-size: .84em; white-space: nowrap; }
.vs__key { display: inline-block; width: 15px; height: 15px; margin: 0 7px 0 0; vertical-align: -2px; color: var(--os); }
.vs--compare tr > * { transition: opacity .35s ease, background-color .35s ease, color .35s ease; }
.vs--compare.is-diff tr.is-same > * { opacity: .3; }
.vs--compare.is-diff tr.is-key > td:last-child { color: var(--ink); background: color-mix(in srgb, var(--os) 8%, var(--surface)); }
.vs--compare.is-diff tr.is-key > th { color: var(--os); }

/* The Mac card (.card--wide): the student's family row is lit (capsule.js). Not a breakout: no inline margin. */
.vs--mac { margin-top: 18px; margin-inline: 0; }
.vs--mac thead tr > :first-child { width: 22%; }
.vs--mac tr.is-mine > * { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.vs--mac tr.is-mine > th { box-shadow: inset 3px 0 0 var(--accent); }
.vs--mac thead th { font: 600 .7rem/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }

/* Phones: no sideways table. Each row is a name above two cells, under the two column heads. */
@media (max-width: 560px) {
  .vs__table, .vs__table thead, .vs__table tbody { display: block; }
  .vs__table thead tr > :first-child { width: auto; }
  .vs__table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vs__table thead tr > :first-child { display: none; }
  .vs__table :is(th, td) { padding: 10px 12px; font-size: .92rem; }
  .vs__table tbody th { grid-column: 1 / -1; width: auto; padding-bottom: 2px; border-bottom: 0; }
  .vs__table tbody td { padding-top: 4px; }
  .vs__table tbody th + td { border-left: 0; }
  .vs__table thead th { font-size: .98rem; }
  .vs--mac thead th { font-size: .62rem; letter-spacing: .06em; }
  .vs__ref { display: block; margin: 4px 0 0; }
  .vs__table code { font-size: .74rem; white-space: nowrap; padding-inline: 4px; }
}

/* ---------- With knowledge: the line to paste first ---------- */
.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; }
.knowledge .family-tabs { margin-top: 22px; }
.kn-col > p { margin: 0; }

/* The Mac card's icon (a laptop). */
#mac { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a5cff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='11' rx='1.5'/%3E%3Cpath d='M2 19h20'/%3E%3C/svg%3E"); }
/* Try it: the source link closes the "You should see" line without breaking inside. */
.try__see a { white-space: nowrap; font-size: .88em; }

/* ---------- Quick check: the question that comes back from capsule 02 ---------- */

/* ---------- The no-JS versions of the figures ---------- */
.fx-fallback > ul, .fx-fallback > ol { margin-bottom: .6em; }
.fx-fallback > .fig { margin-block: 0; }
.fx-fallback:not(:has(.fig)) { max-width: 680px; margin-inline: auto; }

/* ---------- Presentation mode ---------- */
[data-teaching="true"] .vs__table :is(th, td) { padding-block: 8px; }
[data-teaching="true"] .prose > .slide > .fx { margin-block: 10px 4px; }
[data-teaching="true"] .prose > .slide > p:not(.beat-end):not(.fig__caption) { margin-bottom: .6em; }