/* Camera: an icon bar on top, a full-width 3:4 viewfinder, and the camera dial around the shutter.
   Every photo is 3:4. Controls sit below the card and slide over its lower edge on short screens. */
.camera-app {
  --cam-text: #f5f5f7;
  --cam-secondary: rgb(235 235 245 / .6);
  --cam-fill: rgb(255 255 255 / .12);
  --accent: #ffd60a;
  --fx: clamp(44px, 12vw, 50px);
  --shutter: calc(var(--fx) * 1.74);
  --glyph: clamp(22px, 6.2vw, 26px);
  /* One gutter for the whole camera: icon glyphs, viewfinder edges and the dock line up on it */
  --gutter: 16px;
  position: relative; width: 100%; max-width: 600px; height: 100svh; margin: auto;
  display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); overflow: hidden;
  background: #000; color: var(--cam-text); isolation: isolate; user-select: none; -webkit-user-select: none;
}
.camera-app .icon { width: var(--glyph); height: var(--glyph); }

/* Top bar: close and settings in glass circles, the four quick tools in one glass pill */
.camera-top { flex: none; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; min-height: 60px; padding: 8px var(--gutter); }
.cam-icon, .top-tool { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; transition: transform var(--dur-1) var(--ease-out), color var(--dur-2) var(--ease-out); }
.cam-icon { background: var(--lg); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur); box-shadow: var(--lg-rim); }
.camera-top > .cam-icon { width: 44px; border-radius: 50%; }
.cam-icon:active, .top-tool:active { transform: scale(.97); }
.top-tools { justify-self: center; isolation: isolate; display: flex; height: 44px; padding: 0; border-radius: var(--pill); background: var(--lg); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur); box-shadow: var(--lg-rim); }
.top-tool { width: 44px; isolation: isolate; border-radius: 50%; }
.top-tool::before { content: ''; position: absolute; z-index: -1; inset: 4px; border-radius: var(--pill); background: var(--lg-drop); box-shadow: var(--lg-rim); opacity: 0; transition: opacity var(--dur-2) var(--ease-out); }
.top-tool[aria-pressed=true]::before { opacity: 1; }
.top-tool:disabled, .cam-icon:disabled { opacity: .35; }
.camera-app .cam-icon .icon, .tool-icon { width: 22px; height: 22px; fill: currentColor; pointer-events: none; }
.top-tool > .tool-icon { grid-area: 1 / 1; }
#timer > .tool-icon:last-of-type { opacity: 0; }
#timer[aria-pressed=true] > .tool-icon:first-of-type { opacity: 0; }
#timer[aria-pressed=true] > .tool-icon:last-of-type { opacity: 1; }
/* The Material timer dial is centred 1 px below its cap. The number replaces its hand, not a badge. */
.tool-value { position: absolute; top: calc(50% + 1px); left: 50%; width: 13px; height: 12px; padding: 0; transform: translate(-50%, -50%); background: none; color: #fff; font-size: 9px; font-weight: 500; line-height: 12px; text-align: center; font-variant-numeric: tabular-nums; pointer-events: none; }

/* Viewfinder: as wide as the gutters allow, centred in the room left above the controls */
.camera-stage { position: relative; flex: 1; min-height: 0; container-type: size; --controls: calc(var(--shutter) + 82px + env(safe-area-inset-bottom)); }
.viewfinder { position: relative; width: calc(100% - var(--gutter) * 2); margin: max(0px, (100cqh - (100cqw - var(--gutter) * 2) * 4 / 3 - var(--controls)) / 2) var(--gutter) 0; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; background: #1c1c1e; touch-action: none; transform: translateZ(0); }
#preview { display: block; width: 100%; height: 100%; }
/* Rule-of-thirds grid: 1.5 px lines with a faint dark edge so they stay visible on bright and dark scenes */
.composition-grid { position: absolute; inset: 0; pointer-events: none; opacity: .6; background:
  linear-gradient(to right, transparent calc(33.333% - 1.25px), rgb(0 0 0 / .25) calc(33.333% - 1.25px), #fff calc(33.333% - .75px), #fff calc(33.333% + .75px), transparent calc(33.333% + .75px), transparent calc(66.666% - 1.25px), rgb(0 0 0 / .25) calc(66.666% - 1.25px), #fff calc(66.666% - .75px), #fff calc(66.666% + .75px), transparent calc(66.666% + .75px)),
  linear-gradient(to bottom, transparent calc(33.333% - 1.25px), rgb(0 0 0 / .25) calc(33.333% - 1.25px), #fff calc(33.333% - .75px), #fff calc(33.333% + .75px), transparent calc(33.333% + .75px), transparent calc(66.666% - 1.25px), rgb(0 0 0 / .25) calc(66.666% - 1.25px), #fff calc(66.666% - .75px), #fff calc(66.666% + .75px), transparent calc(66.666% + .75px)); }
.frame-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Status text is for screen readers only; loading shows as a plain spinner, no words. */
.source-tag { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.camera-spinner { position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; margin: -13px; border: 2.5px solid rgb(255 255 255 / .22); border-top-color: #fff; border-radius: 50%; opacity: 0; pointer-events: none; animation: spin 800ms linear infinite; transition: opacity var(--dur-3) var(--ease-out); }
.camera-app.loading .camera-spinner { opacity: 1; }
.camera-app.loading .start-camera { visibility: hidden; }
.compare-labels { position: absolute; top: 64px; left: 0; right: 0; display: flex; justify-content: space-around; font-size: 12px; font-weight: 600; text-shadow: 0 1px 6px #000; pointer-events: none; }
.capture-feedback { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.capture-feedback.captured { animation: shutter-blink 180ms ease-out; }
@keyframes shutter-blink { 0% { opacity: .85; } 100% { opacity: 0; } }
.camera-flash-name { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%) scale(.96); font-size: 17px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; text-shadow: 0 1px 10px rgb(0 0 0 / .6); opacity: 0; pointer-events: none; }
.camera-flash-name.show { animation: name-flash 900ms ease-out; }
@keyframes name-flash { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.96); } 15%, 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
.countdown { position: absolute; inset: 0; display: grid; place-items: center; font-size: 104px; font-weight: 200; font-variant-numeric: tabular-nums; text-shadow: 0 2px 16px rgb(0 0 0 / .5); pointer-events: none; }
.start-camera { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: var(--pill); background: var(--lg); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur); box-shadow: var(--lg-rim); font-size: 15px; font-weight: 600; white-space: nowrap; }
.camera-error { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; background: #1c1c1e; }
.camera-app .camera-error > .icon { width: 32px; height: 32px; color: var(--cam-secondary); }
.camera-error p { margin: 6px 0; font-size: 15px; line-height: 1.45; color: var(--cam-secondary); }
.camera-error button { min-height: 44px; padding: 0 20px; border-radius: var(--pill); background: var(--lg); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur); box-shadow: var(--lg-rim); font-size: 15px; font-weight: 600; }
body.screen-flash::after { content: ''; position: fixed; inset: 0; z-index: 100; background: #fff; pointer-events: none; }

/* Zoom and shots left: two matching 44 px glass pills in the top corners of the card.
   One 36 px thumb sits 4 px inside the zoom pill on every side and slides to the active lens. */
.zoom-controls, .shots-left { position: absolute; top: 12px; display: flex; align-items: center; height: 44px; border-radius: var(--pill); background: var(--lg); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur); box-shadow: var(--lg-rim); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.zoom-controls { left: 12px; isolation: isolate; }
.zoom-thumb { position: absolute; z-index: -1; top: 4px; left: 4px; width: 36px; height: 36px; border-radius: 50%; background: var(--lg-drop); box-shadow: var(--lg-rim); transition: transform 280ms var(--ease-out); }
.zoom-controls button { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; color: #fff; font-size: 13px; font-weight: 500; letter-spacing: -.02em; transition: color var(--dur-2) var(--ease-out); }
.zoom-controls button > span { font-size: 11px; }
.zoom-controls button[aria-pressed=true] { color: #fff; font-weight: 600; }
.zoom-controls button:active { transform: scale(.97); }
.shots-left { right: 12px; gap: 6px; padding: 0 16px 0 14px; pointer-events: none; }
.camera-app .shots-left .icon { width: 16px; height: 16px; color: var(--cam-secondary); }
.camera-stage.panel-open .zoom-controls, .camera-stage.panel-open .start-camera { visibility: hidden; }

/* Photobooth: the slot's shape is lit, the rest of the view dimmed; a miniature of the sheet fills in as poses land */
.booth-guide { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 4px; box-shadow: 0 0 0 9999px rgb(0 0 0 / .45), inset 0 0 0 1.5px rgb(255 255 255 / .7); pointer-events: none; transition: width var(--dur-3) var(--ease-out), height var(--dur-3) var(--ease-out); }
.booth-preview { position: absolute; left: 12px; bottom: 12px; width: 64px; height: auto; border-radius: 6px; box-shadow: 0 0 0 1.5px rgb(255 255 255 / .85), 0 6px 16px rgb(0 0 0 / .45); pointer-events: none; }

/* Controls: camera bodies turn under a thick shutter ring; below it album, camera name, flip.
   Bodies are small dimmed discs; the chosen one fills the ring, so the ring stays the dominant shape. */
.camera-controls { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 0 calc(env(safe-area-inset-bottom) + 8px); }
.effect-dial { position: relative; height: calc(var(--shutter) + 8px); }
.effect-track { position: relative; display: flex; align-items: center; gap: calc(var(--fx) * .5); height: 100%; padding: 0 50%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.effect-track::-webkit-scrollbar { display: none; }
.effect { position: relative; flex-shrink: 0; width: var(--fx); height: var(--fx); padding: 0; background: none; scroll-snap-align: center; }
/* Size, tilt and opacity come from the scroll position every frame (paintKnob), so no transitions here */
.effect-disc { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #e9e7e3; opacity: .55; will-change: transform; }
.effect img { width: 80%; height: 80%; object-fit: contain; pointer-events: none; }
.shutter { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: var(--shutter); height: var(--shutter); padding: 0; border-radius: 50%; background: none; box-shadow: inset 0 0 0 5px #fff; transform: translate(-50%, -50%); transition: transform var(--dur-1) var(--ease-out); }
.shutter:active { transform: translate(-50%, -50%) scale(.92); }
.shutter > span { display: none; width: 70%; height: 70%; border-radius: 50%; background: rgb(255 255 255 / .55); transition: transform var(--dur-3) var(--ease-out), border-radius var(--dur-3) var(--ease-out), background-color var(--dur-3) var(--ease-out); }
.shutter[aria-busy=true] > span { display: block; }
.shutter.counting > span { display: block; transform: scale(.5); border-radius: 12px; background: #ff453a; }
.shutter.done { background: #fff; }
.shutter.done > span { display: none; }
/* A finished sheet shows whole: the corner pills step aside until it is saved or discarded */
.viewfinder.sheet-ready :is(.zoom-controls, .shots-left) { opacity: 0; pointer-events: none; }
.camera-app .shutter .shutter-check { display: none; position: absolute; inset: 0; margin: auto; width: 40%; height: 40%; color: #000; }
.shutter.done .shutter-check { display: block; }
.shutter:disabled:not([aria-busy=true]) { opacity: .45; }
/* While a capture runs, taps are ignored but nothing dims or blinks */
.camera-app.busy :is(.top-tool, .cam-icon, .zoom-controls button, .roll-thumb, .camera-name, .effect-track) { pointer-events: none; }
.camera-dock { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; justify-items: center; padding: 8px var(--gutter) 0; }
/* The name is a quiet pill; the button around it keeps a 44 px target */
.camera-name { display: grid; place-items: center; min-height: 44px; max-width: 100%; padding: 0; }
.camera-name #film-tag { max-width: 100%; height: 32px; padding: 0 14px; border-radius: var(--pill); background: var(--lg); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur); box-shadow: var(--lg-rim); font-size: 13px; font-weight: 500; line-height: 32px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
.camera-name:active #film-tag { transform: scale(.95); }
.camera-name-icon { display: none; }
/* Album: a round thumbnail of the latest photo, matching the round controls beside it */
.roll-thumb { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; transition: transform var(--dur-1) var(--ease-out); }
.roll-thumb:active { transform: scale(.9); }
.roll-thumb img, .roll-empty { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .9); }
.roll-thumb img { box-shadow: 0 0 0 1.5px rgb(255 255 255 / .9); }
.roll-empty { display: grid; place-items: center; background: var(--lg); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur); box-shadow: var(--lg-rim); }
.camera-app .roll-empty .icon { width: 20px; height: 20px; color: var(--cam-secondary); }
.roll-thumb.pop #roll-image { animation: roll-pop 320ms cubic-bezier(.2, .9, .3, 1.2); }
@keyframes roll-pop { 0% { transform: scale(.6); opacity: .3; } 100% { transform: scale(1); opacity: 1; } }
/* Upload in progress: a thin ring turns around the thumbnail, no words */
.roll-thumb.sending::after { content: ''; position: absolute; inset: -4px; border: 2px solid transparent; border-top-color: #fff; border-radius: 50%; animation: spin 900ms linear infinite; }
.switch-camera { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--lg); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur); box-shadow: var(--lg-rim); transition: transform var(--dur-1) var(--ease-out); }
.camera-app .switch-camera .icon { width: 22px; height: 22px; }
.switch-camera:active { transform: scale(.9); }
.switch-camera.turning .icon { animation: flip-turn 360ms ease-in-out; }
@keyframes flip-turn { to { transform: rotate(180deg); } }
.storage-note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Landscape phones: tools on the left, viewfinder at full height, dial and dock on the right */
@media (orientation: landscape) and (max-height: 600px) {
  .camera-app { flex-direction: row; max-width: none; padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left); --fx: 44px; }
  .camera-top { grid-template-columns: 44px; grid-template-rows: 44px minmax(0, 1fr) 44px; justify-items: center; padding: 8px; }
  .top-tools { flex-direction: column; justify-self: center; align-self: center; width: 44px; height: auto; padding: 0; }
  .camera-stage { display: grid; place-items: center; padding: 8px 0; }
  .viewfinder { width: auto; height: 100%; margin: 0; border-radius: 16px; }
  .camera-controls { position: static; display: flex; padding: 8px 8px 8px 0; background: none; }
  .effect-dial { width: calc(var(--shutter) + 8px); height: 100%; }
  .effect-track { flex-direction: column; padding: 0; overflow-x: hidden; overflow-y: auto; scroll-snap-type: y mandatory; -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
  /* Spacers let the first and last camera reach the ring in a vertical dial */
  .effect-track::before, .effect-track::after { content: ''; flex: 0 0 calc(50% - var(--fx) / 2); }
  .camera-dock { grid-template-columns: 44px; grid-template-rows: auto 1fr auto; padding: 0; }
  .camera-name { align-self: center; width: 44px; height: 44px; border-radius: 50%; background: var(--lg); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur); box-shadow: var(--lg-rim); }
  .camera-name #film-tag { display: none; }
  .camera-app .camera-name-icon { display: block; width: 22px; height: 22px; }
}

/* Camera settings: the same drawer as the camera picker */
.camera-tools-sheet { width: min(100%, 560px); max-height: calc(100svh - env(safe-area-inset-top) - 24px); margin: auto auto 0; padding: 28px 16px calc(env(safe-area-inset-bottom) + 16px); border: 0; border-radius: 28px 28px 0 0; background: var(--lg-panel); backdrop-filter: var(--lg-panel-blur); -webkit-backdrop-filter: var(--lg-panel-blur); box-shadow: var(--lg-panel-rim); color: var(--cam-text, #f5f5f7); overflow: auto; --accent: #ffd60a; }
.camera-tools-sheet::backdrop { background: rgb(0 0 0 / .35); }
.sheet-handle { position: absolute; z-index: 2; top: 0; left: 30%; display: grid; place-items: start center; width: 40%; height: 28px; min-height: 44px; padding-top: 8px; touch-action: none; }
.sheet-handle > span { width: 36px; height: 5px; border-radius: 3px; background: rgb(255 255 255 / .3); }
.tools-heading { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; min-height: 44px; margin-bottom: 12px; }
.tools-heading h2 { margin: 0; font-size: 24px; font-weight: 400; line-height: 1.2; text-align: center; }
.tools-heading button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--lg); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur); box-shadow: var(--lg-rim); color: #fff; }
.tools-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.tool-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 80px; padding: 2px; color: var(--cam-text, #f5f5f7); }
.tool-tile > span:last-child { font-size: 11px; font-weight: 400; color: rgb(235 235 245 / .6); }
.tool-tile:disabled { opacity: .3; cursor: default; }
.tool-disc { display: grid; place-items: center; width: calc(100% - 4px); max-width: 64px; height: 40px; border-radius: 16px; background: var(--lg); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur); box-shadow: var(--lg-rim); transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.tool-tile:active .tool-disc { transform: scale(.92); }
.tool-tile[aria-pressed=true] .tool-disc { background: var(--lg-drop); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur); box-shadow: var(--lg-rim); color: #fff; font-weight: 600; }
.tool-adjustment { display: grid; gap: 12px; padding: 0 4px; }
.tool-adjustment output { font-size: 28px; font-weight: 300; text-align: center; font-variant-numeric: tabular-nums; }
.tool-adjustment input { width: 100%; height: 44px; accent-color: #fff; }
.tool-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tool-actions button { min-height: 44px; border-radius: var(--pill); background: var(--lg); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur); box-shadow: var(--lg-rim); font-size: 14px; font-weight: 500; }
@media (orientation: landscape) and (max-height: 600px) {
  .tool-tile { min-height: 72px; }
}

.capture-recovery p { margin: 0 0 12px; }
.capture-recovery a { display: block; min-height: 44px; padding: 12px; border-radius: var(--pill); background: var(--lg-drop); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur); box-shadow: var(--lg-rim); color: #fff; text-align: center; font-weight: 600; text-decoration: none; }

/* Motion: the camera arrives, the check mark pops, the counter rolls */
.camera-app:not([hidden]) { animation: camera-in var(--dur-4) var(--ease-out); }
@keyframes camera-in { from { opacity: 0; transform: scale(.98); } }
.shutter.done > span { animation: done-pop var(--dur-4) var(--ease-out); }
@keyframes done-pop { 0% { transform: scale(.8); } 60% { transform: scale(1.06); } 100% { transform: none; } }
#quota-pill.tick { animation: tick var(--dur-4) var(--ease-out); }
@keyframes tick { from { opacity: 0; transform: translateY(-6px); } }

@media (prefers-reduced-motion: reduce) {
  .capture-feedback.captured, .camera-flash-name.show, .roll-thumbnail.pop img, .switch-camera.turning .icon { animation: none; }
  .camera-flash-name.show { opacity: 1; }
}
@media (prefers-reduced-transparency: reduce) {
  .camera-tools-sheet, .camera-flash-name, .start-camera, .shots-left, .zoom-controls, .source-tag { background: #1c1c1e; backdrop-filter: none; -webkit-backdrop-filter: none; }
}