/* Photobooth. On the picture while a session runs: one small box per slot along the bottom, clear of the small
   picture in the left corner, and "xong" in the right corner. On the result sheet: the roll of shots, the row of what
   one session makes, a short note, and buttons laid over the strip's slots. */

.booth-stage[hidden] { display: none; }
.booth-stage__slots {
  position: absolute; inset-inline: 68px; bottom: var(--space-4); /* 68px each side: clear of the small picture and "xong" */
  display: flex; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; pointer-events: none;
}
.booth-stage__slot {
  flex: 0 1 22px; min-width: 12px; aspect-ratio: 22 / 29; border-radius: 6px; overflow: hidden; /* narrows on a narrow picture */
  border: 1.5px solid oklch(100% 0 0 / 0.65); background: oklch(14% 0.016 var(--hue) / 0.45);
}
.booth-stage__slot[aria-current] { border-color: var(--lamp); box-shadow: 0 0 0 2px oklch(86% 0.13 88 / 0.35); }
.booth-stage__slot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.booth-stage__end {
  position: absolute; right: var(--space-3); bottom: var(--space-3); min-width: 56px; min-height: 44px; padding: 0 var(--space-4);
  border: 0; border-radius: 999px; background: oklch(14% 0.016 var(--hue) / 0.78); color: var(--ink);
  font-weight: 700; font-size: var(--step--1);
}

.booth-out { flex: none; display: grid; gap: var(--space-2); }
.booth-out[hidden], .booth-roll[hidden] { display: none; }
.sheet.is-editing .booth-out, .sheet.is-editing .booth-slots { display: none; }
.booth-out .booth-outs { margin-inline: 0; padding-inline: 0; justify-content: safe center; } /* inside the sheet: no bleed past its edge */
.sheet__media.is-booth :is(img, canvas, video) { border-radius: 10px; }
/* While a photobooth session runs, the count and the pose line own the bottom of the picture; the slider waits. */
.app[data-mode="booth"][data-busy="1"] #panel { visibility: hidden; }
/* The count sits in the top third of the picture, same size, so it does not cover the nose and mouth while people pose. */
.app[data-mode="booth"] .stage__count { grid-template-rows: 1fr 2fr; }
.app[data-mode="booth"] .stage__count b {
  grid-row: 1; /* a tighter shadow first, so the cream number still reads against a bright wall or a window by day */
  text-shadow: 0 2px 12px oklch(8% 0.02 var(--hue) / 0.35), 0 2px 24px oklch(8% 0.02 var(--hue) / 0.7);
}
/* From the first count until the session ends, the flip button steps aside ("10" on a narrow phone reaches it) and
   cannot be pressed: the camera was chosen before the start. The light stays, for a dark corner of the café. With
   reduced motion --dur-state is 0, so it goes at once. */
.app[data-mode="booth"] [data-action="flip"] {
  transition: background var(--dur-state) var(--ease-out), color var(--dur-state) var(--ease-out), opacity var(--dur-state) var(--ease-out), visibility 0s;
}
.app[data-mode="booth"][data-busy="1"] [data-action="flip"] {
  opacity: 0; visibility: hidden; transition: opacity var(--dur-state) var(--ease-out), visibility 0s var(--dur-state);
}
.booth-outs .chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.booth-out__note { margin: 0; font-size: var(--step--1); color: var(--ink-3); text-align: center; text-wrap: balance; }
.booth-out__note:empty { display: none; }

.booth-roll { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 var(--space-3); }
.booth-roll .linkbtn { margin: 0; }
.booth-roll__hint { flex: 1 1 100%; margin: 0; font-size: var(--step--1); color: var(--ink-2); text-align: center; text-wrap: balance; }
.booth-roll__shots {
  flex: 1 1 100%; display: flex; justify-content: safe center; gap: 6px; padding: 4px 2px;
  overflow-x: auto; scrollbar-width: none;
}
.booth-roll__shots::-webkit-scrollbar { display: none; }
.booth-roll__shot {
  flex: none; width: 44px; height: 58px; padding: 0; border: 0; border-radius: 10px; overflow: hidden;
  background: var(--surface-2); opacity: 0.72; transition: opacity var(--dur-state) var(--ease-out);
}
.booth-roll__shot[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--lamp); }
.booth-roll__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Laid over the strip exactly (booth-result.js sizes it to the picture); each slot is a button. */
.booth-slots { position: absolute; pointer-events: none; }
.booth-slot {
  position: absolute; padding: 0; border: 0; border-radius: 6px; background: transparent; pointer-events: auto; cursor: pointer;
}
.booth-slot[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--lamp); background: oklch(86% 0.13 88 / 0.12); }
.booth-slot:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }