/* Michele & Des — guest photo uploader
 *
 * Design system from the design-director generator:
 *   Style      Soft UI Evolution — soft depth, clear contrast, 200-300ms motion
 *   Colours    #171717 / #404040 / #D4AF37 / #FFFFFF  (exact hex)
 *   Type       Playfair Display + Inter ("Classic Elegant")
 *
 * Champagne, cream and white, at Michele's request. The cream ground is the one
 * addition to the generator's set — it had no cream, and a warm ground is both
 * closer to the brief and kinder than pure white on a phone at full brightness
 * in a dim room. Everything else is the palette's exact hex.
 */

:root {
  --ink: #171717; /* primary — text */
  --ink-soft: #404040; /* secondary — muted text, progress */
  --champagne: #d4af37; /* CTA and accents */
  --white: #ffffff; /* background — card surfaces */

  /* The cream ground, and tints derived from the palette rather than invented. */
  --cream: #faf6ef;
  --line: color-mix(in srgb, var(--champagne) 32%, var(--cream));
  --line-soft: color-mix(in srgb, var(--champagne) 18%, var(--cream));
  /* These two are as light as they can go and still clear 4.5:1 on cream and on
   * white. The obvious prettier values (42%, 62%) land around 3:1, which is a
   * fail for anything under 24px — and every one of these is 13px. */
  --ink-dim: color-mix(in srgb, var(--ink) 78%, transparent);
  --ink-faint: color-mix(in srgb, var(--ink) 64%, transparent);
  --champagne-soft: color-mix(in srgb, var(--champagne) 14%, transparent);

  --radius: 16px;
  --radius-lg: 22px;

  /* Soft UI Evolution: layered and low-opacity, never a hard drop shadow.
   * Warmed with the ink rather than pure black so it sits on cream. */
  --lift: 0 1px 2px rgb(23 23 23 / 0.04), 0 10px 30px -14px rgb(23 23 23 / 0.16);
  --lift-cta: 0 1px 2px rgb(23 23 23 / 0.08),
    0 12px 26px -14px color-mix(in srgb, var(--champagne) 85%, transparent);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fast: 180ms;
  --slow: 280ms;

  --shell: min(34rem, 100% - 2rem);
}

* {
  box-sizing: border-box;
}

/* The cards below set `display: flex`, and an author rule beats the user-agent
 * `[hidden] { display: none }` no matter how specific. Without this, every
 * panel meant to start hidden renders immediately. */
[hidden] {
  display: none !important;
}

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

body {
  margin: 0;
  min-height: 100svh;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Pampas grass behind the masthead. Generated by scripts/make-pampas.mjs and
 * held well back — it is a note, not a hedge. Faded out at the bottom so the
 * stems dissolve rather than stopping on a hard edge. */
.pampas {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  /* Never wider than the viewport. This element is positioned against the
   * initial containing block, so body's overflow-x: hidden does not clip it and
   * anything over 100% becomes a horizontal scrollbar. */
  width: min(30rem, 100%);
  height: 17rem;
  pointer-events: none;
  background: url('./pampas.svg') no-repeat center top / contain;
  opacity: 0.42;
  -webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 52%, transparent 92%);
}

.stage {
  position: relative;
  width: var(--shell);
  /* Full height so the colophon sits on the bottom edge rather than floating
   * halfway up an otherwise empty screen. */
  min-height: 100svh;
  margin-inline: auto;
  padding-block: clamp(2.25rem, 9vh, 4rem) 2.5rem;
  padding-bottom: max(2.5rem, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ---------------------------------------------------------------- masthead */

.masthead {
  position: relative;
  text-align: center;
}

.couple {
  margin: 0;
  font-family: 'Playfair Display', ui-serif, Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.6rem, 13vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.amp {
  display: inline-block;
  padding-inline: 0.1em;
  /* Darkened against the cream: the raw champagne is only 2:1 here, which is
   * fine for a button fill and not fine for a glyph. */
  color: color-mix(in srgb, var(--champagne) 72%, var(--ink));
  font-style: italic;
}

.lede {
  margin: 0.7rem auto 0;
  max-width: 22ch;
  color: var(--ink-dim);
  font-size: 1rem;
  text-wrap: balance;
}

/* ------------------------------------------------------------------- cards */

.card {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--lift);
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.card--quiet,
.card--done {
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  padding-block: 2rem;
}

.card h2 {
  margin: 0;
  font-family: 'Playfair Display', ui-serif, Georgia, serif;
  font-weight: 600;
  font-size: 1.5rem;
}

.card--quiet p,
.card--done p {
  margin: 0;
  color: var(--ink-dim);
  max-width: 26ch;
  text-wrap: balance;
}

.state-icon {
  width: 40px;
  height: 40px;
  color: var(--ink-soft);
}

.state-icon--good {
  color: var(--ink);
  background: var(--champagne);
  border-radius: 50%;
  padding: 8px;
}

/* ------------------------------------------------------------- name  field */

.field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.field__label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.field__label em {
  font-style: normal;
  font-weight: 400;
  color: var(--ink-faint);
}

#guest-name {
  width: 100%;
  padding: 0.85rem 0.95rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--cream);
  color: var(--ink);
  font: inherit;
  /* 16px minimum or iOS zooms the whole page on focus. */
  font-size: 1rem;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}

#guest-name::placeholder {
  color: var(--ink-faint);
}

#guest-name:focus {
  outline: none;
  border-color: var(--ink-soft);
  background: var(--white);
}

/* ------------------------------------------------------------------ button */

.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  /* Comfortably past the 44px touch minimum — this is the whole interface. */
  min-height: 62px;
  padding: 1rem 1.25rem;
  border: none;
  border-radius: var(--radius);
  background: var(--champagne);
  color: var(--ink);
  font-family: inherit;
  font-size: 1.075rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: var(--lift-cta);
  transition: transform var(--fast) var(--ease), filter var(--fast) var(--ease);
}

.cta svg {
  width: 22px;
  height: 22px;
  flex: none;
}

.cta:hover {
  filter: brightness(1.04);
}

.cta:active {
  transform: scale(0.985);
}

.cta--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: none;
  min-height: 52px;
  font-size: 1rem;
  margin-top: 0.4rem;
}

.cta--ghost:hover {
  background: var(--champagne-soft);
  filter: none;
}

.hint {
  margin: 0;
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.85rem;
}

/* --------------------------------------------------------------- the queue */

.summary {
  margin: 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--ink-dim);
}

.rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  grid-template-areas:
    'icon name status'
    'icon bar  bar';
  align-items: center;
  gap: 0.15rem 0.7rem;
  padding: 0.8rem 0.9rem;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  animation: settle var(--slow) var(--ease) both;
}

@keyframes settle {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.row__icon {
  grid-area: icon;
  width: 22px;
  height: 22px;
  color: var(--ink-faint);
  transition: color var(--slow) var(--ease);
}

.row__name {
  grid-area: name;
  min-width: 0;
  font-size: 0.9rem;
  /* Long IMG_ names must not push the status off the edge. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row__status {
  grid-area: status;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* Reason a file was rejected outright — no Retry, so the text explains itself. */
.row__status--why {
  color: var(--ink-soft);
  white-space: normal;
  text-align: right;
}

.row__bar {
  grid-area: bar;
  height: 4px;
  margin-top: 0.45rem;
  border-radius: 99px;
  background: var(--line-soft);
  overflow: hidden;
}

.row__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  /* Ink rather than champagne: gold on a pale track is barely 1.5:1, and a
   * progress bar you cannot see is not a progress bar. */
  background: var(--ink-soft);
  transition: width var(--slow) var(--ease);
}

.row.is-done .row__icon {
  color: color-mix(in srgb, var(--champagne) 72%, var(--ink));
}

.row.is-done .row__status {
  color: var(--ink-dim);
}

.row.is-done .row__bar {
  /* The bar has said what it needed to; the tick carries it from here. Collapse
   * it rather than just hiding it, or forty finished rows waste a screenful. */
  height: 0;
  margin-top: 0;
  opacity: 0;
  transition: height var(--slow) var(--ease), margin-top var(--slow) var(--ease),
    opacity var(--fast) var(--ease);
}

.row.is-failed {
  border-color: var(--line);
  background: color-mix(in srgb, var(--champagne) 6%, var(--white));
}

.row.is-failed .row__icon {
  color: var(--ink-soft);
}

.row__retry {
  grid-area: status;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 34px;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background var(--fast) var(--ease);
}

.row__retry svg {
  width: 14px;
  height: 14px;
}

.row__retry:hover {
  background: var(--champagne-soft);
}

/* ---------------------------------------------------------------- footer */

.colophon {
  margin-top: auto;
  padding-top: 1rem;
  text-align: center;
}

.colophon p {
  margin: 0;
  color: var(--ink-faint);
  font-size: 0.78rem;
}

/* ------------------------------------------------------------------ focus */

:focus-visible {
  /* Ink, not champagne — the gold is only 2:1 on cream and would fail as an
   * indicator even though it works as a button fill. */
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Wider phones and tablets get breathing room, not a redesign — this is a
 * one-screen page and it should stay that way. */
@media (min-width: 40rem) {
  .card {
    padding: 1.75rem;
  }

  .pampas {
    height: 20rem;
  }
}

/* Readable privacy page using the site's existing type and colours. */
.page { width: min(42rem, calc(100% - 3rem)); margin: 3rem auto; line-height: 1.75; }
.page h1 { font-family: 'Playfair Display', Georgia, serif; line-height: 1.2; }
.page p { margin-block: 1.25rem; }
.page a { color: var(--ink); text-decoration: underline; }