/* =====================================================================================
   Tripsbadge camera (public/js/camera/shutter.js) and the gallery "Choose a filter" sheet
   (public/js/camera/lookSheet.js).
   The camera is always dark, whatever the app theme: it sets the dark tokens on itself, so
   shared pieces inside it (buttons, the compass loader) come out dark too.
   ===================================================================================== */

html.cam-open {
  overflow: hidden;
}

dialog.cam {
  /* The dark theme's tokens, for everything drawn inside the camera. */
  --bg: #090506;
  --surface: #151011;
  --surface-2: #262021;
  --surface-3: #332b2d;
  --line: rgb(255 240 244 / 0.09);
  --line-2: rgb(255 240 244 / 0.15);
  --text: #f9f8f8;
  --text-2: #b6b3b4;
  --text-3: #8f8f8f;
  --accent: #d671ed;
  --brand-text: linear-gradient(100deg, #fb72c6, #e474ec 45%, #ba7afb);

  /* Room above and below the viewfinder (see .cam__view). */
  --cam-top: calc(var(--safe-t) + 60px);
  --cam-bottom: calc(var(--safe-b) + 164px);
  --cam-glass: rgb(0 0 0 / 0.34);
  --cam-glass-hover: rgb(0 0 0 / 0.5);
  --cam-glass-line: rgb(255 255 255 / 0.2);

  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  background: #000;
  color: #fff;
  color-scheme: dark;
  font-family: var(--font-ui);
  -webkit-tap-highlight-color: transparent;
}
dialog.cam[open] {
  display: flex;
  flex-direction: column;
  animation: cam-in 320ms var(--ease) both;
}
dialog.cam::backdrop {
  background: #000;
}
@keyframes cam-in {
  from {
    opacity: 0;
    transform: scale(1.03);
  }
}

.cam :focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.cam button {
  font: inherit;
  color: inherit;
  -webkit-user-select: none;
  user-select: none;
}

/* The frosted glass used by every control over the picture. */
.cam__btn,
.cam__look,
.cam__chip,
.cam__hint,
.cam__status,
.cam__stampchip,
.cam__next {
  border: 1px solid var(--cam-glass-line);
  background: var(--cam-glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

/* ---------- Top bar: close, filter pill, flip ---------- */
.cam__top {
  position: relative;
  z-index: 2; /* the filter dots hang below the bar, over the picture's edge */
  flex: none;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 8px;
  height: calc(60px + var(--safe-t));
  padding: calc(var(--safe-t) + 8px) calc(12px + var(--safe-r)) 0 calc(12px + var(--safe-l));
}
.cam__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition:
    transform var(--dur-1) var(--ease),
    background-color var(--dur-2) var(--ease),
    opacity var(--dur-2) var(--ease);
}
.cam__btn:hover {
  background: var(--cam-glass-hover);
}
.cam__btn:active {
  transform: scale(0.9);
}
.cam__flip {
  grid-column: 3;
}

.cam__look {
  position: relative;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: 40px;
  padding: 0 2px;
  border-radius: 999px;
}
.cam__lookname {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media (min-width: 340px) {
  .cam__lookname {
    min-width: 112px;
  }
}
.cam__lookname.is-fresh {
  animation: cam-fade 200ms var(--ease);
}
@keyframes cam-fade {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
}
.cam__chev {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin: -2px 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.cam__chev:hover {
  background: rgb(255 255 255 / 0.08);
}
.cam__dots {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  display: flex;
  align-items: center;
  gap: 3px;
  transform: translateX(-50%);
  pointer-events: none;
}
.cam__dots i {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.45);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.35);
  transition:
    width var(--dur-2) var(--ease),
    background-color var(--dur-2) var(--ease);
}
.cam__dots i.is-on {
  width: 12px;
  background: #fff;
}
/* No filters on this phone (or they were switched off): no arrows, dots or swipe hint. */
.cam.is-nofilters .cam__chev,
.cam.is-nofilters .cam__dots,
.cam.is-nofilters .cam__hint {
  display: none;
}
.cam.is-nofilters .cam__lookname {
  padding: 0 14px;
}

/* ---------- Viewfinder ---------- */
.cam__stage {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.cam__view {
  position: relative;
  width: min(100vw, calc((100vh - var(--cam-top) - var(--cam-bottom)) * 0.8));
  width: min(100vw, calc((100dvh - var(--cam-top) - var(--cam-bottom)) * 0.8));
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #0b0909;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* Where size-container units work, fit the stage exactly (no guessing at the bars' heights). */
@supports (width: 1cqh) {
  .cam__stage {
    container-type: size;
    padding-top: 12px; /* room for the filter dots */
  }
  .cam__view {
    width: min(100cqw, 100cqh * 0.8);
  }
}
@media (min-width: 600px) {
  .cam__view {
    border-radius: var(--radius-xl);
  }
}
.cam__video,
.cam__gl,
.cam__stamp {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.cam__video {
  object-fit: cover;
  background: #000;
  transform-origin: 50% 50%;
}

/* Place chip, top left: "Finding your place…", then the town. */
.cam__chip {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 24px);
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  pointer-events: none;
}
.cam__chiptext {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cam__chip .icon {
  flex: none;
}
.cam__chip.is-pending .icon {
  animation: cam-spin 2.4s linear infinite;
}
@keyframes cam-spin {
  to {
    transform: rotate(360deg);
  }
}

/* The big filter name, for a moment after each change. */
.cam__bigname {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 16px;
  font-family: var(--font-display);
  font-size: 34px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.1;
  text-align: center;
  text-shadow: 0 2px 18px rgb(0 0 0 / 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms var(--ease);
}
.cam__bigname.is-shown {
  opacity: 1;
  transition-duration: 150ms;
}

.cam__hint {
  position: absolute;
  bottom: 16px;
  left: 50%;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
  animation: cam-sway 2.4s ease-in-out infinite;
  transition: opacity 300ms var(--ease);
}
.cam__hint.is-gone {
  opacity: 0;
}
.cam:not([data-state='live']) .cam__hint {
  display: none;
}
@keyframes cam-sway {
  0%,
  100% {
    transform: translateX(-50%);
  }
  25% {
    transform: translateX(calc(-50% - 6px));
  }
  75% {
    transform: translateX(calc(-50% + 6px));
  }
}

.cam__flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.cam__flash.is-on {
  animation: cam-flash 160ms ease-out;
}
/* Reduced motion: a short dim instead of a white flash (timed by the script). */
.cam__flash.is-dim {
  background: #000;
  opacity: 0.5;
}
@keyframes cam-flash {
  from {
    opacity: 0.85;
  }
  to {
    opacity: 0;
  }
}

/* The panel over the viewfinder: "Starting camera…", or why the camera can't run. */
.cam__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% - 32px);
  max-width: 300px;
  max-height: calc(100% - 24px);
  overflow-y: auto;
  padding: 20px;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--radius-l);
  background: rgb(14 14 18 / 0.72);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 24px 60px -24px rgb(0 0 0 / 0.7);
  color: #fff;
  text-align: center;
  transform: translate(-50%, -50%);
}
.cam__panel.is-loading {
  padding: 16px 20px;
}
.cam__panel .loading {
  padding: 4px 0;
  color: rgb(255 255 255 / 0.86);
}
.cam__ptitle {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
}
.cam__pbody {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: rgb(255 255 255 / 0.82);
}
.cam__pbtns {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}
.cam__native {
  cursor: pointer;
}
.cam__native:focus-within {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.cam__file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  pointer-events: none;
}

/* ---------- Bottom: status line, stamps, shutter row ---------- */
.cam__bottom {
  flex: none;
  display: grid;
  justify-items: center;
  padding: 0 var(--safe-r) calc(var(--safe-b) + 18px) var(--safe-l);
}
.cam__status {
  max-width: calc(100% - 32px);
  min-height: 28px;
  margin: 6px 0 0;
  padding: 5px 14px;
  border-radius: 16px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}
.cam__status.is-shown {
  opacity: 1;
}

.cam__stamps {
  display: flex;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  justify-content: flex-start;
  justify-content: safe center;
}
.cam__stamps::-webkit-scrollbar {
  display: none;
}
.cam__stampchip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  scroll-snap-align: center;
  transition:
    background-color var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease),
    transform var(--dur-1) var(--ease);
}
.cam__stampchip:hover {
  background: var(--cam-glass-hover);
}
.cam__stampchip:active {
  transform: scale(0.96);
}
.cam__stampchip[aria-checked='true'] {
  border-color: #fff;
  background: #fff;
  color: #090506;
}

.cam__controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: min(100%, 420px);
  height: 84px;
  padding: 0 12px;
}

/* Fixed columns, so the shutter stays centred while Next or zoom are hidden. */
.cam__next {
  grid-column: 1;
}
.cam__shutter {
  grid-column: 2;
}
.cam__zoom {
  grid-column: 3;
}

/* Next: the newest photo, "Next" and how many photos so far. */
.cam__next {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  height: 48px;
  padding: 0 10px 0 7px;
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background-color var(--dur-2) var(--ease),
    transform var(--dur-1) var(--ease);
}
.cam__next:hover {
  background: var(--cam-glass-hover);
}
.cam__next:active {
  transform: scale(0.96);
}
.cam__next img {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  object-fit: cover;
  background: rgb(255 255 255 / 0.12);
}
.cam__count {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cam__next.is-pop {
  animation: cam-pop 200ms var(--ease);
}
@keyframes cam-pop {
  50% {
    transform: scale(1.08);
  }
}

.cam__shutter {
  justify-self: center;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  padding: 0;
  border: 4px solid #fff;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition:
    transform var(--dur-1) var(--ease),
    opacity var(--dur-2) var(--ease);
}
.cam__shutter:focus-visible {
  outline-offset: 4px;
}
.cam__disc {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #fff;
  transition:
    width 160ms var(--ease),
    height 160ms var(--ease);
}
.cam__shutter:active:not(:disabled):not([aria-disabled='true']) {
  transform: scale(0.92);
}
.cam.is-capturing .cam__disc {
  width: 54px;
  height: 54px;
}
.cam__shutter[aria-disabled='true'] {
  cursor: progress;
}
.cam__shutter:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* Not ready yet, or the camera can't run: the shutter dims. */
.cam:not([data-state='live']) .cam__shutter {
  opacity: 0.4;
}

.cam__zoom {
  justify-self: end;
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.cam__zoom[aria-pressed='true'] {
  border-color: #fff;
  background: #fff;
  color: #090506;
}

/* ---------- Other sizes ---------- */
/* Short screens: smaller stamps and shutter, so the picture stays big. */
@media (max-height: 700px) {
  dialog.cam {
    --cam-bottom: calc(var(--safe-b) + 140px);
  }
  .cam__stampchip {
    height: 40px;
  }
  .cam__controls {
    height: 76px;
  }
  .cam__shutter {
    width: 68px;
    height: 68px;
  }
  .cam__disc {
    width: 56px;
    height: 56px;
  }
  .cam.is-capturing .cam__disc {
    width: 48px;
    height: 48px;
  }
}
/* Computers: the picture is capped so the controls sit under it. */
@media (min-width: 1024px) {
  .cam__view {
    width: min(100vw, calc((100vh - 260px) * 0.8));
    width: min(100vw, calc((100dvh - 260px) * 0.8));
    border-radius: 28px;
  }
  @supports (width: 1cqh) {
    .cam__view {
      width: min(100cqw, 100cqh * 0.8, (100dvh - 260px) * 0.8);
    }
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  dialog.cam[open],
  .cam__lookname.is-fresh,
  .cam__next.is-pop,
  .cam__chip.is-pending .icon,
  .cam__hint,
  .cam__flash.is-on {
    animation: none;
  }
  .cam__bigname,
  .cam__bigname.is-shown,
  .cam__hint,
  .cam__dots i {
    transition: none;
  }
}

/* =====================================================================================
   "Choose a filter" sheet (gallery and phone-camera photos). Follows the app theme.
   ===================================================================================== */
.cam-looks__frame {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  border-radius: var(--radius-l);
  background: var(--surface-2);
}
.cam-looks__canvas {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 55vh;
  border-radius: var(--radius-l);
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.cam-looks__chips {
  display: flex;
  gap: 8px;
  margin: 0 -4px;
  padding: 14px 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.cam-looks__chips::-webkit-scrollbar {
  display: none;
}
.cam-looks__chip {
  flex: none;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  scroll-snap-align: center;
  transition:
    background-color var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease),
    transform var(--dur-1) var(--ease);
}
.cam-looks__chip:hover {
  background: var(--surface-3);
}
.cam-looks__chip:active {
  transform: scale(0.96);
}
.cam-looks__chip[aria-checked='true'] {
  border-color: var(--text);
  background: var(--text);
  color: var(--bg);
}
.cam-looks__actions {
  display: grid;
  gap: 8px;
}