/* ---------- look-alikes: the marker, stacks, the train, side by side ---------- */
/* How like the photo before it (app-review-groups.js): a marker on the tile's left edge, halfway up -- the corners are taken. Gold when the film takes the two for look-alikes. */
.review-tile .alike-chip {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%); z-index: 2; min-height: 24px; padding: 0 7px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: rgba(10, 10, 14, .72); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; opacity: .85;
}
.review-tile .alike-chip.look-alike { border-color: var(--gold); color: var(--gold); opacity: 1; }
.review-tile .alike-chip.unlike { opacity: .55; font-weight: 500; }   /* shown with ?alike=all only */
/* Stacks of look-alikes (app-review-stacks.js): the top photo with two prints' edges fanned behind it, and a pill.
   A folded photo is not shown; the pill says what the top photo's marker would. */
#review-grid .review-tile.in-stack { display: none; }
#review-grid .stack-train[hidden] { display: none; }   /* its stack is not in this view of the funnel */
.review-tile.stack-top { isolation: isolate; }
.review-tile.stack-top .alike-chip { display: none; }
.review-tile.stack-top::before, .review-tile.stack-top::after {
  content: ""; position: absolute; inset: 4px; z-index: -1; border-radius: var(--r-md); border: 2px solid var(--gold);
  background: linear-gradient(160deg, #4a4556, #2b2833); box-shadow: 0 6px 16px rgba(0, 0, 0, .6); }
.review-tile.stack-top::before { transform: translate(14px, -12px) rotate(7deg); }
.review-tile.stack-top::after { transform: translate(-11px, -9px) rotate(-6deg); }
.review-tile .stack-pill {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 2; min-height: 30px; padding: 0 14px;
  border-radius: var(--r-pill); border: 0; background: linear-gradient(100deg, var(--gold), var(--violet)); color: #0b0b0f;
  font: inherit; font-size: .85rem; font-weight: 800; white-space: nowrap; cursor: pointer; box-shadow: 0 3px 10px rgba(0, 0, 0, .55); }
.review-tile .stack-pill[hidden] { display: none; }
/* An open stack: a train of its photos standing in depth under the top photo, the whole grid's width (Flip 3D). */
#review-grid { position: relative; }   /* the floating train of an open stack is placed within it */
#review-grid .stack-train { position: absolute; left: -6px; right: -6px; z-index: 6; border-radius: var(--r-lg);
  border: 1px solid rgba(240, 177, 85, .55); box-shadow: 0 18px 50px rgba(0, 0, 0, .75);
  background: radial-gradient(ellipse at 50% 30%, rgb(60, 50, 96), rgb(14, 13, 20) 70%); padding: 14px 8px 10px;
  --train-ink: rgba(244, 241, 234, .82); }   /* dark in both themes: its words are light in both (--ink-dim is dark in light) */
.review-tile.stack-top { touch-action: pan-y; }   /* a swipe across a stack opens it; up and down still scroll */
.train-stage { position: relative; height: 390px; perspective: 900px; overflow: hidden; touch-action: pan-y; }
/* Each card its photo's shape, moved, turned and scaled into its place (app-review-train.js placeTrainCards). */
.train-card { position: absolute; left: 0; top: 0; width: 42%; height: 360px; padding: 0; border: 3px solid transparent;
  border-radius: var(--r-md); background: #000; overflow: hidden; cursor: pointer; transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.3, 1.2, .5, 1), opacity .35s ease;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .6); }
.train-card img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.train-card.ticked { border-color: var(--gold); }
.train-card.front { box-shadow: 0 0 0 2px rgba(240, 177, 85, .55), 0 16px 36px rgba(0, 0, 0, .7); }
.train-bar { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; }
.train-bar button { min-width: 40px; min-height: 36px; border-radius: var(--r-pill); border: 1px solid var(--line-strong);
  background: var(--surface-2); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.train-bar button:disabled { opacity: .35; cursor: default; }
.train-bar .train-fold { padding: 0 16px; border: 0; background: linear-gradient(100deg, var(--gold), var(--violet)); color: #0b0b0f; }
.train-where { color: var(--train-ink); font-size: .9rem; min-width: 64px; text-align: center; }
.train-tick { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 6px; border: 2px solid rgba(255, 255, 255, .8);
  background: rgba(10, 10, 14, .55); }
.train-card.ticked .train-tick { background: var(--gold); border-color: var(--gold); }
.train-card.ticked .train-tick::after { content: ""; position: absolute; left: 7px; top: 2px; width: 7px; height: 13px;
  border: solid #0b0b0f; border-width: 0 3px 3px 0; transform: rotate(45deg); }
/* Its number in the grid, etched into the photo's corner: which photos the train shows. */
.train-number { position: absolute; left: 10px; bottom: 6px; z-index: 2; pointer-events: none;
  font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: rgba(255, 255, 255, .5);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .35), 0 0 10px rgba(0, 0, 0, .45); }
.train-card:not(.front) .train-number { font-size: 1.6rem; }
/* The cards travel, never jump (the full animation, not a frame on the left, then the centre):
   under a finger every card stands where the finger puts it, at once; a fling's steps each glide. */
.stack-train.dragging .train-card { transition: none; }
.stack-train.flinging .train-card { transition-duration: .22s; }
/* The two photos the train shows side by side carry their green/red grid (app-review-compare.js); their pictures are shown
   whole, so the squares fall where they were measured. Under the stage: why the one in front is like the one before it. */
.train-card.gridded img { object-fit: contain; }
.train-card svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.train-why { display: block; width: 100%; margin: 4px 0 0; padding: 6px 8px; min-height: 32px; border: 0; background: none;
  color: var(--train-ink); font: inherit; font-size: .82rem; line-height: 1.3; text-align: center; cursor: pointer; }
.train-why[hidden] { display: none; }
.review-dice { display: inline-grid; place-items: center; min-width: 56px; min-height: 48px; padding: 0 10px; }   /* the owner: larger */
.review-dice svg { width: 30px; height: 30px; }
/* Two look-alike photos side by side (app-review-compare.js) */
.compare-dialog { width: min(720px, 96vw); }
/* One photo large (app-review-view.js): the whole photo, as tall as the screen leaves room for, and its one button. */
.photo-view { width: min(720px, 96vw); }
.photo-view .look-header { margin-bottom: 10px; }
/* A column within the dialog's 96dvh in which only the picture gives way: on a phone held sideways (360-390 px tall)
   68dvh of picture and the header, state line, tools and button pass the screen, so the picture shrinks to what they
   leave and the button stays on the screen. Held upright, 68dvh is the smaller and the photo is as large as ever.
   On [open] only, so a closed dialog stays hidden. */
#photo-view[open] { display: flex; flex-direction: column; }
.photo-view-picture { display: flex; flex: 0 1 auto; min-height: 0; }
.photo-view-picture img { display: block; width: 100%; min-height: 0; max-height: 68vh; max-height: 68dvh; object-fit: contain; border-radius: 10px; background: var(--surface-2); }
.photo-view-state { margin: 10px 0; text-align: center; }
.photo-view-tick { width: 100%; }
.photo-view-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.photo-view-tools[hidden] { display: none; }
.photo-view-tools button { flex: 1 1 calc(50% - 4px); min-width: 0; min-height: 44px; overflow-wrap: anywhere; }
.compare-dialog .look-header { margin-bottom: 10px; }   /* the title, and a small round × in the corner (no Close bar) */
.compare-no-grid { margin: 12px 0 0; font-size: .85rem; color: var(--ink-dim); }
.compare-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.compare-photo { margin: 0; min-width: 0; }
.compare-photos.stacked { grid-template-columns: minmax(0, 1fr); }
.compare-photos.stacked .compare-frame { width: fit-content; max-width: 100%; margin: 0 auto; }   /* the overlay's box is the picture's */
.compare-photos.stacked .compare-frame img { width: auto; max-width: 100%; max-height: 50vh; max-height: 50dvh; }
.compare-frame { position: relative; line-height: 0; }
.compare-frame img { display: block; width: 100%; height: auto; border-radius: 8px; }
.compare-frame svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.compare-square { fill: none; stroke-width: 1.6; stroke-opacity: .63; vector-effect: non-scaling-stroke; }
.compare-square.outside { stroke: rgb(200, 200, 210); stroke-opacity: .25; }
.compare-photo figcaption { margin-top: 6px; font-size: .85rem; color: var(--ink-dim); text-align: center; line-height: 1.3; }
.compare-scale { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 12px; font-size: .8rem; color: var(--ink-dim); }
.compare-scale[hidden] { display: none; }
.compare-bar { width: 96px; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, rgb(70, 215, 120), rgb(170, 230, 160), rgb(240, 215, 130), rgb(245, 160, 110), rgb(240, 110, 110)); }
.compare-outside { flex-basis: 100%; }
.compare-likeness { margin-top: 12px; }
.compare-likeness[hidden] { display: none; }
.compare-likeness-scale { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--ink-dim); }
.compare-likeness-track { position: relative; flex: 1; min-width: 0; height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden;
  border: 1px solid var(--line); }
.compare-likeness-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 5px;
  background: linear-gradient(90deg, rgb(240, 110, 110), rgb(240, 215, 130), rgb(70, 215, 120)); }
.compare-likeness-text { margin: 8px 0 0; }