/* Studio Mynz · Video Guestbook
   Night-time viewfinder: dark for dim reception halls, champagne frame lines,
   and one red dot reserved for the record button. */

:root {
  --night: #1c1720;
  --night-2: #251f2a;
  --night-3: #2f2835;
  --line: #3d3443;
  --pearl: #f4efe9;
  --mist: #aba1b2;
  --champagne: #d4b57d;
  --rec: #ff4b3e;
  --alert: #ff9b8c;

  --display: 'Bodoni Moda', Didot, 'Bodoni 72', Georgia, serif;
  --body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--night);
  color: var(--pearl);
  font: 400 16px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

button, input, textarea { font: inherit; color: inherit; }

button { cursor: pointer; }

:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }

a { color: var(--champagne); }

.mono { font-family: var(--mono); font-feature-settings: 'tnum' 1; }

.amp { color: var(--champagne); }

/* ─── Viewfinder frame: four corner marks, drawn with backgrounds ─────────── */

.frame {
  --c: var(--champagne);
  --l: 22px;
  --t: 1.5px;
  position: relative;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) top left / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) top right / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) bottom left / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) bottom right / var(--t) var(--l);
  background-repeat: no-repeat;
}

/* Camera-style status readout in the frame's top-left corner */
.osd {
  position: absolute;
  top: 12px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mist);
}
.osd .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rec); }
.osd.live .dot { animation: blink 1.2s steps(2, jump-none) infinite; }
.osd.saved { color: var(--champagne); }

@keyframes blink { 50% { opacity: 0; } }

/* ─── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  color: var(--pearl);
  transition: background-color .15s, border-color .15s, transform .1s;
}
.btn:hover { border-color: var(--mist); }
.btn:active { transform: scale(0.98); }
.btn-solid { background: var(--pearl); border-color: var(--pearl); color: var(--night); }
.btn-solid:hover { background: #fff; border-color: #fff; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: default; }

.link-btn {
  border: 0;
  background: none;
  padding: 8px;
  color: var(--mist);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 15px;
}

/* ═══ Guest page ═════════════════════════════════════════════════════════════ */

.guest .shell {
  max-width: 440px;
  min-height: 100svh;
  margin: 0 auto;
  padding: 18px 20px calc(20px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}

.masthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
}
.masthead .studio { color: var(--pearl); }

.guest main { flex: 1; display: flex; flex-direction: column; }

.guest .frame {
  margin: 26px 0 30px;
  padding: 52px 24px 40px;
  text-align: center;
}

.lede { margin: 0 0 10px; color: var(--mist); font-size: 15px; }

.event-name {
  margin: 0;
  font: italic 500 clamp(40px, 12.5vw, 58px)/1.02 var(--display);
  letter-spacing: -0.01em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.event-date {
  margin: 14px 0 0;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--champagne);
}

.welcome {
  margin: 18px auto 0;
  max-width: 30ch;
  color: rgba(244, 239, 233, .82);
  font-size: 16px;
  text-wrap: pretty;
}

.loading-line { margin: 0; color: var(--mist); font-size: 15px; }

/* Start panel */
.field label { display: block; margin: 0 0 8px; font-size: 14px; color: var(--mist); }
.field input {
  width: 100%;
  height: 54px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--night-2);
  font-size: 17px;  /* ≥16px stops iOS from zooming in */
}
.field input::placeholder { color: #7c7283; }
.field input:focus { outline: none; border-color: var(--champagne); box-shadow: 0 0 0 3px rgba(212, 181, 125, .18); }

.record {
  margin: 30px auto 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border: 0;
  background: none;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 17px;
  font-weight: 500;
}
.record-ring {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 3px solid var(--pearl);
  display: grid;
  place-items: center;
  transition: transform .12s;
}
.record-dot {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--rec);
  animation: breathe 2.6s ease-out infinite;
}
.record:active .record-ring { transform: scale(0.94); }

@keyframes breathe {
  0% { box-shadow: 0 0 0 0 rgba(255, 75, 62, .45); }
  70%, 100% { box-shadow: 0 0 0 16px rgba(255, 75, 62, 0); }
}

.start-note { margin: 16px 0 0; text-align: center; font-size: 13px; color: var(--mist); }

/* Upload panel */
.big-percent {
  margin: 0;
  font: 400 64px/1 var(--mono);
  letter-spacing: -0.02em;
}
.big-percent small { font-size: 28px; color: var(--mist); margin-left: 2px; }
.upload-summary { margin: 14px 0 0; color: var(--mist); font-size: 15px; }
.upload-summary strong { color: var(--pearl); font-weight: 500; }

.files { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.file {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 14px 10px;
  border-radius: 14px;
  background: var(--night-2);
  position: relative;
  overflow: hidden;
}
.thumb {
  width: 56px;
  height: 56px;
  border-radius: 9px;
  background: var(--night-3);
  object-fit: cover;
  display: block;
}
.file-name { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-meta { font: 400 12px/1.4 var(--mono); color: var(--mist); }
.file-state { font: 400 13px/1 var(--mono); color: var(--mist); text-align: right; }
.file.done .file-state { color: var(--champagne); }
.file.failed .file-state { color: var(--alert); }
.file-error { grid-column: 2 / -1; margin: -4px 0 0; font-size: 13px; color: var(--alert); }
.bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--night-3); }
.bar span { display: block; height: 100%; width: 0; background: var(--champagne); transition: width .25s linear; }
.file.failed .bar span { background: var(--alert); }

.keep-open { margin: 18px 0 4px; text-align: center; font-size: 14px; color: var(--mist); }
.upload-actions { display: grid; gap: 10px; margin-top: 18px; }
.center { text-align: center; }

/* Done / closed panels */
.thanks {
  margin: 0;
  font: italic 500 clamp(36px, 11vw, 50px)/1.05 var(--display);
  text-wrap: balance;
}
.thanks-sub { margin: 14px auto 0; max-width: 28ch; color: rgba(244, 239, 233, .82); }

.guest footer {
  margin-top: 28px;
  text-align: center;
  font-size: 12px;
  color: var(--mist);
}

/* ═══ Studio dashboard ═══════════════════════════════════════════════════════ */

.admin .topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
}
.brand { font: 500 12px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mist); }
.brand strong { color: var(--pearl); font-weight: 500; }
.topbar nav { display: flex; align-items: center; gap: 16px; font-size: 14px; }
.topbar nav .link-btn { padding: 0; font-size: 14px; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 32px 24px 80px; }

.admin h1, .admin h2 { font-weight: 500; margin: 0; }
.admin h1 { font: italic 500 40px/1.1 var(--display); }
.admin h2 { font-size: 15px; letter-spacing: 0.02em; }

.panel {
  background: var(--night-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
}

.signin { max-width: 420px; margin: 8vh auto 0; }
.signin p { color: var(--mist); margin: 10px 0 22px; }
.signin form { display: grid; gap: 12px; }

.input, .textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--night);
  padding: 12px 14px;
  font-size: 16px;
}
.input { height: 48px; }
.textarea { min-height: 48px; resize: vertical; }
.input:focus, .textarea:focus { outline: none; border-color: var(--champagne); }
.input[type="date"] { color-scheme: dark; }

.form-label { display: block; font-size: 13px; color: var(--mist); margin-bottom: 6px; }
.error { color: var(--alert); font-size: 14px; margin: 0; min-height: 1.4em; }

.create { margin-bottom: 40px; }
.create-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 14px;
  margin: 18px 0;
}
.create-grid .wide { grid-column: 1 / -1; }
.create-foot { display: flex; align-items: center; gap: 16px; }
.create-foot .btn { min-height: 46px; }

.list-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.list-head .mono { font-size: 12px; color: var(--mist); letter-spacing: 0.08em; text-transform: uppercase; }

.events { display: grid; gap: 14px; }

.event {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 24px;
  padding: 20px;
  background: var(--night-2);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.event.closed { opacity: .72; }

.qr-tile {
  padding: 10px;
  margin: 0;
  background: var(--pearl);
  border-radius: 12px;
  align-self: start;
}
.qr-tile svg { display: block; width: 100%; height: auto; }

.event-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.event-title { font: italic 500 30px/1.1 var(--display); margin: 0; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--champagne);
}
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.event.closed .pill { color: var(--mist); }

.event-meta { margin: 8px 0 0; font: 400 13px/1.5 var(--mono); color: var(--mist); }
.event-link {
  margin: 12px 0 0;
  font: 400 13px/1.4 var(--mono);
  color: var(--pearl);
  word-break: break-all;
}
.event-message { margin: 10px 0 0; color: rgba(244, 239, 233, .8); font-size: 15px; max-width: 60ch; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.actions .btn { min-height: 40px; padding: 0 16px; font-size: 14px; }
.actions .spacer { flex: 1; }

.empty { color: var(--mist); text-align: center; padding: 48px 0; }

.notice {
  max-width: 560px;
  margin: 10vh auto 0;
  text-align: center;
  color: var(--mist);
}
.notice code { font-family: var(--mono); color: var(--pearl); }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translate(-50%, 20px);
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--pearl);
  color: var(--night);
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

#print-card { display: none; }

@media (max-width: 640px) {
  .admin .topbar { padding: 14px 16px; }
  .wrap { padding: 24px 16px 64px; }
  .create-grid { grid-template-columns: 1fr; }
  .event { grid-template-columns: 1fr; gap: 16px; }
  .qr-tile { width: 148px; }
  .actions .spacer { display: none; }
}

/* ─── Printable table card (A6) ──────────────────────────────────────────── */

@media print {
  @page { size: A6 portrait; margin: 0; }
  html, body { background: #fff !important; }
  body > *:not(#print-card) { display: none !important; }
  #print-card {
    display: flex !important;
    width: 105mm;
    height: 148mm;
    padding: 9mm;
    color: #1c1720;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .card-frame {
    --c: #a8874e;
    --l: 8mm;
    --t: 0.5mm;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6mm;
  }
  .card-lede { margin: 0 0 2mm; font: 400 10pt/1.3 var(--body); color: #5d5463; }
  .card-name { margin: 0; font: italic 500 24pt/1.05 var(--display); text-wrap: balance; }
  .card-name .amp { color: #a8874e; }
  .card-date { margin: 2.5mm 0 0; font: 500 7.5pt/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #a8874e; }
  .card-qr { width: 46mm; margin: 7mm 0 5mm; }
  .card-qr svg { display: block; width: 100%; height: auto; }
  .card-cta { margin: 0; font: 500 11pt/1.3 var(--body); }
  .card-hint { margin: 1mm 0 0; font: 400 8.5pt/1.3 var(--body); color: #5d5463; }
  .card-studio { margin: 7mm 0 0; font: 500 7pt/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: #5d5463; }
}

@media (prefers-reduced-motion: reduce) {
  .record-dot, .osd.live .dot { animation: none; }
  .btn, .toast, .bar span, .record-ring { transition: none; }
}

/* ─── Studio dashboard (admin.html) additions ────────────────────────────── */

/* `.signin p` would otherwise grey out and space the sign-in error */
.signin .error { margin: 0; color: var(--alert); }

/* Long names and error toasts stay inside narrow screens */
.event > div { min-width: 0; }
.event-title { overflow-wrap: anywhere; }
.admin .toast { width: max-content; max-width: calc(100vw - 32px); text-align: center; }

/* `.admin h1` outranks `.card-name`; restore the card's size */
@media print {
  .admin .card-name { font: italic 500 24pt/1.05 var(--display); }
}

/* ─── Guest page (index.html) additions ──────────────────────────────────── */

/* "Take a photo" + "Choose from gallery": one equal column per visible button */
.start-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 22px;
}
.start-actions .btn { padding: 6px 14px; line-height: 1.2; text-align: center; }

/* Long file names ellipsize instead of widening the row */
.file-info { min-width: 0; }

.upload-actions .link-btn { justify-self: center; }
.view-action { margin-top: 26px; }
/* The thank-you line takes focus so screen readers announce it; it is not a control */
.thanks[tabindex]:focus { outline: none; }

/* ─── Studio dashboard (admin.html) phone fixes ──────────────────────────── */

/* "Upload log" / "Sign out" keep their words together; the brand wraps instead */
.topbar nav a, .topbar nav .link-btn { white-space: nowrap; }
/* Card buttons reach a 44px tap target on touch screens */
@media (pointer: coarse) {
  .actions .btn { min-height: 44px; }
}

/* ─── Guest page (index.html) tap target fix ─────────────────────────────── */

/* Cancel stays a quiet text link but gets a full 44px tap area */
.upload-actions .link-btn { min-height: 44px; padding: 8px 16px; }

/* ─── Guest page (index.html) label fit ──────────────────────────────────── */

/* "Choose from gallery" stays on one line beside "Take a photo" on a 375px phone */
.start-actions .btn { padding: 6px 10px; font-size: 15px; }

/* ─── Studio dashboard (admin.html) top-bar tap targets ──────────────────── */

/* "Upload log" / "Sign out" get a thumb-sized tap area without moving the layout */
@media (pointer: coarse) {
  .topbar nav a, .topbar nav .link-btn { padding: 12px 0; margin: -12px 0; }
}