/* The film's order, arranged by the customer (app-review-order.js, app-review-order-strip.js). */

/* The grip at the top of each tile: the other corners hold the tick, the motion chip or video badge, and the number. */
.review-tile .review-grip { position: absolute; top: 8px; left: 50%; z-index: 2; width: 40px; height: 26px; padding: 0;
  transform: translateX(-50%); display: grid; place-items: center; cursor: grab; touch-action: pan-y;   /* a swipe from it scrolls (app-review-order.js: a hold drags) */
  color: #fff; background: rgba(10, 10, 14, .72); border: 1px solid var(--line-strong); border-radius: var(--r-pill); }
.review-tile .review-grip svg { width: 18px; height: 18px; fill: currentColor; }
.review-tile .review-grip:hover, .review-tile .review-grip:focus-visible { color: var(--gold); border-color: var(--gold); }   /* over the photo: fixed */
.review-tile.reorder-lifted, .order-thumb.reorder-lifted { opacity: .35; }
.review-tile.reorder-before { box-shadow: inset 4px 0 0 var(--accent), -4px 0 0 var(--accent); }
.review-tile.reorder-after { box-shadow: inset -4px 0 0 var(--accent), 4px 0 0 var(--accent); }
.reorder-ghost { position: fixed; z-index: 200; width: 76px; height: 76px; margin: -38px 0 0 -38px; pointer-events: none;
  border: 2px solid var(--accent); border-radius: 12px; overflow: hidden; background: var(--surface-2);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .55); }
.reorder-ghost img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A day none of whose photos is left in it (all moved to other days) has no marker. */
.review-day[hidden] { display: none; }

/* The Film order strip. */
.order-dialog { width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); display: flex; flex-direction: column;
  padding: 20px 18px 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-lg); }
.order-dialog:not([open]) { display: none; }
.order-dialog::backdrop { background: rgba(0, 0, 0, .7); }
.order-dialog h3 { margin: 0 0 4px; }
.order-dialog .legend { margin: 0 0 10px; }
.order-strip { flex: 1; min-height: 0; overflow-y: auto; padding: 2px; }
.order-day { margin: 12px 0 6px; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.order-row { display: flex; flex-wrap: wrap; gap: 6px; }
.order-thumb { position: relative; width: 64px; height: 64px; padding: 0; cursor: pointer; overflow: hidden;
  border: 2px solid transparent; border-radius: 10px; background: var(--surface-2); }
.order-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.order-thumb .order-number { position: absolute; right: 3px; bottom: 3px; padding: 1px 5px; font-size: 10px; font-weight: 700;
  color: #fff; background: rgba(10, 10, 14, .78); border-radius: var(--r-pill); }
.order-thumb.video::after { content: "▶"; position: absolute; left: 4px; top: 3px; font-size: 11px; color: #fff; }
.order-thumb.lifted { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0, 0, 0, .5); }
.order-strip.placing .order-thumb:not(.lifted) { border-color: var(--line-strong); }
.order-thumb.reorder-before { box-shadow: -4px 0 0 var(--accent); }
.order-thumb.reorder-after { box-shadow: 4px 0 0 var(--accent); }
.order-slot { height: 64px; padding: 0 12px; cursor: pointer; font-size: .8rem; font-weight: 700; color: var(--accent);
  background: none; border: 2px dashed var(--accent); border-radius: 10px; }
.order-actions { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; }
.order-actions .back:disabled { opacity: .45; cursor: default; }
@media (max-width: 700px) { .order-thumb, .order-slot { width: 56px; height: 56px; } .order-slot { width: auto; } }