/* #/case/{id}: the Case view. Only the three Eye strips, their captions, the notice and the way back.
 * Phone held upright: the strips stacked edge to edge, the page scrolls. Wider: the stage is a size container
 * and each strip takes the largest width at which all three fit it (case.js lays out each arrangement, measures it and keeps the widest).
 * The After strip is shown whole at its own ratio (--after-ratio), so it may be taller or shorter than the other two;
 * the strips align at the top. */
.case {
  --case-cap: 1.5rem; /* one caption line, fixed so the fit can count it */
  --case-chrome: calc(var(--case-cap) + var(--space-xs));
  --case-gap: var(--space-md);
  --case-margin: min(var(--gutter), var(--space-lg));
  --hb: calc(1 / var(--strip-ratio)); /* height per unit of width: Before and the Simulation, and the After */
  --ha: calc(1 / var(--after-ratio, var(--strip-ratio)));
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.case__top { display: flex; align-items: center; min-height: var(--bar-height); padding-inline: var(--case-margin); }
.case__back span { font-weight: 400; }
.case__stage { padding: 0 var(--case-margin) var(--space-lg); }
.case__strips { display: grid; gap: var(--case-gap); }
.case__after .strip__frame { aspect-ratio: var(--after-ratio, var(--strip-ratio)); }
.case__strip .strip__name { height: var(--case-cap); line-height: var(--case-cap); white-space: nowrap; overflow: hidden; }
.case__note { padding: 0 var(--case-margin) var(--space-lg); }

@media (max-width: 40rem) {
  .case__stage:has(.case__strips) { padding-inline: 0; }
  .case__strips { gap: var(--space-lg); }
  .case__strip .strip__name { padding-inline: var(--gutter); }
}

@media (min-width: 40rem) {
  .case[data-view="strips"] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100dvh; }
  .case[data-view="strips"] .case__stage { container: case-stage / size; min-height: 0; }
  .case__strips {
    --w: min(100cqw, (100cqh - 3 * var(--case-chrome) - 2 * var(--case-gap)) / (2 * var(--hb) + var(--ha)));
    grid-template-columns: var(--w); height: 100%; align-content: center; justify-content: center; align-items: start;
  }
  .case__stage[data-layout="side"] .case__strips {
    --case-gap: var(--space-lg);
    --w: min((100cqw - 2 * var(--case-gap)) / 3, (100cqh - var(--case-chrome)) / max(var(--hb), var(--ha)));
    grid-template-columns: repeat(3, var(--w));
  }
  /* Before above, the Simulation and the real After side by side under it, where they are compared */
  .case__stage[data-layout="pyramid"] .case__strips {
    --case-gap: var(--space-lg);
    --w: min((100cqw - var(--case-gap)) / 2, (100cqh - 2 * var(--case-chrome) - var(--case-gap)) / (var(--hb) + max(var(--hb), var(--ha))));
    grid-template-columns: repeat(2, var(--w));
  }
  .case__stage[data-layout="pyramid"] .case__before { grid-column: 1 / -1; justify-self: center; width: var(--w); }
}

/* Which Simulation was shown: the ready ones, each the whole target */
.case__pick { display: grid; gap: var(--space-md); max-width: var(--screen-max); padding-block: var(--space-sm) var(--space-xl); }
.case__pick h1 { font-size: var(--text-lg); }
.case__pick-hint { color: var(--color-ink-2); }
.case__choices { display: grid; gap: var(--space-lg); margin: var(--space-xs) 0 0; padding: 0; list-style: none; }
@media (max-width: 40rem) { .case__choice .strip__frame { margin-inline: calc(-1 * var(--case-margin)); } }
@media (min-width: 60rem) { .case__choices { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); } }

/* Not a Case, not found, no connection: one quiet block in the strips' place */
.case__missing { display: grid; gap: var(--space-md); justify-items: start; align-content: start; padding-block: var(--space-lg); }
.case__stage:has(.case__missing) { padding-inline: var(--gutter); }
.case__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }