/* ───── Project Thirty: photo wall behind a frosted card, mobile first ─────
 * The card is clear glass (60 % tint, 20px blur) so the photos shine through. Contrast is checked against the worst
 * case behind it (a black photo patch in light mode, white in dark mode): ink 7.5:1 / 8.3:1, muted 5.1:1 / 5.3:1,
 * white on accent 4.7:1. Errors sit on a solid chip (6.5:1 / 6.0:1). Camera and review are full screen and black.
 * Steps and orientation come from app.js as <html data-step data-orient> (window size, not the orientation media
 * query, which did not switch on a real iPhone).
 */
:root {
  color-scheme: light dark;
  --bg: #f5f5f7; --ink: #1d1d1f; --muted: #3a3a3c; --line: #86868b; --link: #0066cc;
  --glass: rgba(255, 255, 255, .6); --solid: #fff; --edge: rgba(0, 0, 0, .06); --veil: rgba(245, 245, 247, .2);
  --fill: rgba(118, 118, 128, .14); --fill-hover: rgba(118, 118, 128, .24); --field: #fff;
  --accent: #0071e3; --accent-hover: #0064c8; --on-accent: #fff; --ok: #248a3d;
  --rec: #ff3b30; --rec-strong: #d70015; --error: #c00011; --focus: #0071e3;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000; --ink: #f5f5f7; --muted: #c7c7cc; --link: #2997ff;
    --glass: rgba(28, 28, 30, .6); --solid: #1c1c1e; --edge: rgba(255, 255, 255, .12); --veil: rgba(0, 0, 0, .45);
    --fill: rgba(118, 118, 128, .3); --fill-hover: rgba(118, 118, 128, .42); --field: #1c1c1e; --ok: #30d158;
    --error: #ff6961; --focus: #2997ff;
  }
}

* { box-sizing: border-box; }
/* Author display rules (buttons are inline-flex) would otherwise beat the browser's own [hidden] rule. */
[hidden] { display: none !important; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh; display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  color: var(--ink); letter-spacing: -.022em; -webkit-font-smoothing: antialiased;
  font: 17px/1.47 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', Roboto, system-ui, sans-serif;
}

/* ───── Photo wall: 3 columns on phones, 4 on tablets, 6 on desktops; every other column sits half a tile higher ───── */
/* 100lvh reaches behind the browser's own toolbars; where lvh is unknown, inset: 0 still covers the screen. */
.wall { --cols: 3; position: fixed; inset: 0; height: 100lvh; display: flex; gap: 8px; padding: 0 8px; overflow: hidden; pointer-events: none; }
.wall::after { content: ''; position: absolute; inset: 0; background: var(--veil); }
.col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.col:nth-child(even) { margin-top: calc((100vw - 8px * (var(--cols) + 1)) / var(--cols) * -2 / 3); }
.col:nth-child(n + 4) { display: none; }
@media (min-width: 640px) { .wall { --cols: 4; } .col:nth-child(4) { display: flex; } }
@media (min-width: 1024px) { .wall { --cols: 6; } .col:nth-child(n + 5) { display: flex; } }
.wall img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px;
  opacity: 0; transition: opacity .8s ease;
}
.wall img.in { opacity: 1; }

/* ───── Card ───── */
.card {
  position: relative; width: min(100%, 440px); padding: 32px 24px 24px; border-radius: 28px;
  background: var(--glass); border: 1px solid var(--edge); box-shadow: 0 24px 64px rgba(0, 0, 0, .18);
  -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8);
  animation: rise .6s cubic-bezier(.2, .8, .2, 1) both;
}
.card.wide { width: min(100%, 760px); }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .card { background: var(--solid); } }
:root:not([data-step="s-start"]) .card > header { display: none; }

.eyebrow { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: -.01em; }
h1 { margin: 0 0 12px; font-size: clamp(34px, 10.5vw, 56px); line-height: 1.05; font-weight: 700; letter-spacing: -.035em; text-wrap: balance; }
.prompt { margin: 0 0 24px; white-space: pre-line; text-wrap: pretty; }

section { display: flex; flex-direction: column; gap: 12px; }
#s-rotate, #s-upload, #s-done { text-align: center; }
label { font-size: 15px; font-weight: 600; }
input[type=text] {
  font: inherit; letter-spacing: inherit; min-height: 52px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--field); color: var(--ink); width: 100%;
}
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
input[type=text]:focus-visible { outline-offset: 1px; }
/* The file input is visually hidden; show its focus on the visible label instead. */
#pick-wrap:has(+ #file:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ───── Buttons ───── */
button, .primary, .secondary {
  font: inherit; letter-spacing: inherit; font-weight: 600; min-height: 52px; padding: 12px 24px; border: 0; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-align: center; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color .2s ease, transform .1s ease;
}
button:active, .primary:active, .secondary:active { transform: scale(.98); }
.primary { background: var(--accent); color: var(--on-accent); }
.secondary { background: var(--fill); color: var(--ink); }
.link { min-height: 44px; background: none; color: var(--muted); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) {
  .primary:hover { background: var(--accent-hover); }
  .secondary:hover { background: var(--fill-hover); }
  .link:hover { color: var(--ink); }
}
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--rec); box-shadow: 0 0 0 2px var(--on-accent); }

/* ───── Rotate step: upright shows a phone turning sideways (played twice, under 5 s); sideways shows "ready" ───── */
.turn, .ready { display: flex; flex-direction: column; gap: 12px; }
:root[data-orient="landscape"] .turn, :root[data-orient="portrait"] .ready { display: none; }
.rotate { display: flex; justify-content: center; padding: 8px 0 4px; color: var(--ink); }
.rotate svg { width: 120px; height: 120px; overflow: visible; }
.device { transform-box: fill-box; transform-origin: center; animation: turn 2.4s cubic-bezier(.6, 0, .2, 1) 2 both; }
@keyframes turn { 0%, 20% { transform: rotate(0deg); } 60%, 100% { transform: rotate(90deg); } }

/* ───── Camera and review: full screen and black like the iOS camera ─────
 * Upright: video on top, controls underneath. Sideways: video left, controls in a column on the right. */
:root[data-step="s-camera"], :root[data-step="s-review"] { background: #000; }
:root[data-step="s-camera"] .wall, :root[data-step="s-review"] .wall { display: none; }
:root[data-step="s-camera"] .card, :root[data-step="s-review"] .card {
  position: fixed; inset: 0; width: auto; display: flex; color: #fff; background: #000;
  border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; animation: none;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
#s-camera, #s-review { flex: 1; min-width: 0; min-height: 0; gap: 16px; }
.stage { position: relative; flex: 1; min-width: 0; min-height: 0; }
/* Contain on black: the whole recorded frame is visible and the letterbox blends into the background. */
.stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.mirror { transform: scaleX(-1); }
.timer {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 999px;
  background: rgba(0, 0, 0, .55); color: #fff; font-weight: 600; font-variant-numeric: tabular-nums;
}
#s-camera:has(.shutter.on) .timer { background: var(--rec-strong); }
.controls { display: grid; gap: 12px; align-items: center; }
.controls .link { color: rgba(255, 255, 255, .85); }
.controls .fine { color: rgba(255, 255, 255, .7); text-align: center; }
.controls .secondary { background: rgba(255, 255, 255, .16); color: #fff; }
@media (hover: hover) { .controls .secondary:hover { background: rgba(255, 255, 255, .24); } .controls .link:hover { color: #fff; } }
/* Upright camera: Back on the left, shutter centred. Upright review: size, then Record again | Send. */
#s-camera .controls { grid-template-columns: 1fr auto 1fr; }
#btn-cancel-cam { grid-column: 1; grid-row: 1; justify-self: start; }
#btn-rec { grid-column: 2; grid-row: 1; }
#s-review .controls { grid-template-columns: 1fr 1fr; }
#review-info { grid-column: 1 / -1; }
#btn-redo { grid-column: 1; grid-row: 2; }
#btn-send { grid-column: 2; grid-row: 2; }
:root[data-orient="landscape"] #s-camera, :root[data-orient="landscape"] #s-review { flex-direction: row; }
:root[data-orient="landscape"] #s-camera .controls { grid-template-columns: auto; grid-template-rows: 1fr auto 1fr; width: 96px; justify-items: center; }
:root[data-orient="landscape"] #btn-cancel-cam { grid-column: 1; grid-row: 1; align-self: start; justify-self: center; }
:root[data-orient="landscape"] #btn-rec { grid-column: 1; grid-row: 2; }
:root[data-orient="landscape"] #s-review .controls { grid-template-columns: auto; width: min(240px, 34%); align-content: center; }
:root[data-orient="landscape"] #btn-send { grid-column: 1; grid-row: 2; }
:root[data-orient="landscape"] #btn-redo { grid-column: 1; grid-row: 3; }
/* iOS-style shutter: red circle, becomes a rounded square while recording. The label stays for screen readers. */
.shutter { width: 76px; height: 76px; min-height: 0; padding: 0; border-radius: 50%; background: none; border: 4px solid #fff; }
.shutter::before {
  content: ''; width: 58px; height: 58px; border-radius: 50%; background: var(--rec);
  transition: transform .25s ease, border-radius .25s ease;
}
.shutter.on::before { transform: scale(.48); border-radius: 14px; }
.shutter:active { transform: none; }

/* ───── Upload: percentage while sending, then "almost done" while the server stores it; the bar shimmers throughout ───── */
.bar { position: relative; overflow: hidden; border-radius: 999px; }
progress { display: block; width: 100%; height: 8px; border: 0; border-radius: 999px; overflow: hidden; background: var(--fill); -webkit-appearance: none; appearance: none; }
progress::-webkit-progress-bar { background: var(--fill); border-radius: 999px; }
progress::-webkit-progress-value { background: var(--accent); border-radius: 999px; transition: width .3s ease; }
progress::-moz-progress-bar { background: var(--accent); border-radius: 999px; }
.bar.busy::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent); animation: shimmer 1.6s ease-in-out infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

/* ───── Done ───── */
.check { display: flex; justify-content: center; color: var(--ok); }
.check svg { width: 64px; height: 64px; animation: pop .5s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes pop { from { opacity: 0; transform: scale(.6); } }

/* ───── Text ───── */
.big { margin: 0; font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; text-wrap: balance; overflow-wrap: anywhere; }
.fine { margin: 0; font-size: 14px; color: var(--muted); }
.error { margin: 0; padding: 8px 12px; border-radius: 12px; font-size: 15px; color: var(--error); background: var(--solid); }
.error:empty { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .card, .check svg, .bar.busy::after { animation: none; }
  .bar.busy::after { display: none; }
  .device { animation: none; transform: rotate(90deg); }
  .wall img, button, .shutter::before, progress::-webkit-progress-value { transition: none; }
}

/* ───── Admin table ───── */
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--fill); vertical-align: middle; }
td:nth-child(3) { font-variant-numeric: tabular-nums; white-space: nowrap; }
td a { color: var(--link); font-weight: 600; display: inline-block; min-height: 44px; line-height: 44px; }