/* #/c/{id}/{option}: the large view. Only the pair of Eye strips, their captions, the notice and the way back.
 * The stage is a size container; each strip takes the largest width at which the pair fits it without scrolling. */
.large {
  --large-cap: 1.5rem; /* one caption line, fixed so the fit below can count it */
  --large-chrome: calc(var(--large-cap) + var(--space-xs)); /* a caption and the strip's own gap */
  --large-gap: var(--space-md);
  --large-margin: min(var(--gutter), var(--space-lg)); /* a narrower margin than other screens: the photos come first */
  display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  -webkit-user-select: none; user-select: none;
}
.large__top { display: flex; align-items: center; min-height: var(--bar-height); padding-inline: var(--large-margin); }
.large__back span { font-weight: 400; }

.large__stage { container: large-stage / size; min-height: 0; padding: 0 var(--large-margin) var(--space-lg); }
.large__pair {
  --w: min(100cqw, (100cqh - 2 * var(--large-chrome) - var(--large-gap)) / 2 * var(--strip-ratio));
  display: grid; grid-template-columns: var(--w); gap: var(--large-gap);
  height: 100%; align-content: center; justify-content: center;
}
.large__stage[data-layout="side"] .large__pair {
  --large-gap: var(--space-lg);
  --w: min((100cqw - var(--large-gap)) / 2, (100cqh - var(--large-chrome)) * var(--strip-ratio));
  grid-template-columns: var(--w) var(--w);
}
.large__strip .strip__name { height: var(--large-cap); line-height: var(--large-cap); white-space: nowrap; overflow: hidden; }

/* A phone held upright: both strips edge to edge, the captions keep the screen's margin */
@media (max-width: 40rem) {
  .large__stage[data-layout="stacked"] { padding-inline: 0; padding-block-end: 0; }
  .large__stage[data-layout="stacked"] .strip__name { padding-inline: var(--gutter); }
}

/* Press and hold: the Before photo lies under the Simulation's place and comes up while held, without its notice */
.large__hold {
  position: absolute; inset: 0; cursor: pointer;
  touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.large__hold > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-touch-callout: none; pointer-events: none; }
.large__hold > .large__under { opacity: 0; }
.large__hold[data-held] > .large__under { opacity: 1; }
.large__hold[data-held] > .strip__notice { visibility: hidden; }
.large__hold:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }

/* Not shown: why, and the way back to the four */
.large__sim[data-state="failed"] .strip__frame { outline-color: var(--color-rule-2); }
.large__sim .strip__fail p:first-child { font-weight: 500; }
.large__sim .strip__fail .btn { margin-top: var(--space-xs); }
.large__missing { display: grid; gap: var(--space-md); justify-items: start; align-content: start; padding-block: var(--space-lg); }
.large__stage:has(.large__missing) { padding-inline: var(--gutter); }
.large__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }