/* The meme as it is; tilted photos are the picker, level captions sit to its left. */
.original { --labels: 170px; padding: 16px 0 0 var(--labels); }

.o-frame { position: relative; width: min(100%, 900px); }

/* Desktop: the whole meme fits the window height, no scrolling. The picture is 3:4, so its
   width is capped at 3/4 of the height left under the header (--chrome = header + paddings). */
@media (min-width: 701px) {
  .original { --chrome: 96px; padding-top: 4px; }
  .o-frame { width: min(100%, 900px, (100vh - var(--chrome)) * 0.75); }
  @supports (height: 1dvh) {
    .o-frame { width: min(100%, 900px, (100dvh - var(--chrome)) * 0.75); }
  }
}
.o-art { position: relative; }
.o-img { width: 100%; height: auto; user-select: none; }
.o-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* White veil over everything except the lit tiles (holes in its mask). */
.o-veil { fill: var(--paper); opacity: 0; pointer-events: none; transition: opacity var(--slow) var(--ease); }
.o-frame.is-veiled .o-veil { opacity: 0.72; }
.o-frame.is-searching .o-veil { opacity: 0.86; }
.o-hole { fill: #fff; transition: fill var(--mid) var(--ease); }
.o-hole.is-on { fill: #000; }

/* The hovered photo: a copy clipped to its tile that rises a little. */
.o-lift { pointer-events: none; transform-box: view-box; opacity: 0; }
.o-lift.is-up { animation: o-up var(--slow) var(--ease) forwards; }
.o-lift.is-down { animation: o-down var(--mid) var(--ease) forwards; }
@keyframes o-up { from { transform: scale(1); opacity: 1; } to { transform: scale(1.05); opacity: 1; } }
/* settles back and fades, so the copy never sits above the veil once the pointer has left */
@keyframes o-down { from { transform: scale(1.05); opacity: 1; } to { transform: scale(1); opacity: 0; } }

.o-hit { fill: transparent; pointer-events: all; cursor: pointer; outline: none; }

.o-ring {
  fill: none; stroke: var(--ink); stroke-width: 2.5;
  vector-effect: non-scaling-stroke; stroke-linejoin: round;
  opacity: 0; pointer-events: none;
  transition: opacity var(--mid) var(--ease);
}
.o-ring.is-on { opacity: 1; }

.o-cap {
  position: absolute; z-index: 2;
  transform: translate(-50%, 6px);
  padding: 1px 8px;
  background: var(--paper); border-radius: 6px;
  font-size: 12px; line-height: 1.6; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease);
}
.o-cap.is-on { opacity: 1; transform: translate(-50%, 12px); }

/* Level captions, the same pair as in the old scheme: tinted number and a muted title. */
.o-levels { list-style: none; margin: 0; padding: 0; }
.o-level {
  position: absolute; top: var(--y-mid); right: calc(100% + 24px);
  width: calc(var(--labels) - 24px);
  transform: translateY(-50%);
  text-align: right;
  cursor: default;
}
.o-level-num {
  display: block;
  font-size: 12px; font-weight: 500; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--tone);
}
.o-level-title {
  display: block; margin-top: 2px;
  font-size: 13px; line-height: 1.35; color: var(--muted);
  transition: color var(--mid) var(--ease);
}
.o-level:hover .o-level-title,
.o-level.is-pinned .o-level-title { color: var(--ink); }

/* Level pill for phones, created by src/original.js and fixed to the top of the screen. */
.o-now { display: none; }

@media (max-width: 700px) {
  /* Edge to edge: every pixel of width goes to the photos. */
  .original { --labels: 0px; margin: 0 calc(-1 * var(--gutter)); padding: 8px 0 0; }
  .o-frame { width: 100%; }
  /* Under the picture the captions become a legend; a tap pins a level on the picture. */
  .o-levels { padding: 8px var(--gutter) 0; }
  .o-level {
    position: static; transform: none; width: auto; text-align: left;
    display: flex; gap: 12px; align-items: baseline;
    padding: 13px 0;
    border-top: 1px solid var(--hairline);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .o-level:first-child { border-top: 0; }
  .o-level-num { width: 18px; flex: none; }
  .o-level-title { margin: 0; font-size: 15px; color: var(--ink-2); }
  .o-level.is-pinned .o-level-title { color: var(--ink); }
  .o-cap { display: none; }

  /* With a person open, the rest of the meme steps back so the chosen photo stands out. */
  .app.is-open .o-frame.has-selection .o-veil { opacity: 0.55; }
  .o-ring { stroke-width: 2; stroke: var(--paper); }

  /* Room to scroll the bottom rows above the sheet. */
  .app.is-open .stage { padding-bottom: 56vh; }

  .o-now {
    display: flex; gap: 8px; align-items: baseline;
    position: fixed; z-index: 5;
    top: calc(10px + env(safe-area-inset-top)); left: 50%;
    max-width: calc(100% - 32px);
    padding: 5px 12px;
    background: var(--paper); border-radius: 999px;
    font-size: 13px; color: var(--ink-2); white-space: nowrap;
    opacity: 0; transform: translate(-50%, -6px);
    pointer-events: none;
    transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease);
  }
  .o-now.is-on { opacity: 1; transform: translate(-50%, 0); }
  /* with the sheet open the dossier already names the level */
  .app.is-open ~ .o-now { opacity: 0; transform: translate(-50%, -6px); }
  .o-now b { font-weight: 500; font-size: 12px; color: var(--tone); font-variant-numeric: tabular-nums; }
}