/* Upload page (Figma "upload"): title, clothesline of polaroids, and a centred form card. */
.upload { padding-bottom: 0; }
.upload-title { text-align: center; padding: 58px 16px 0; }
.upload-title .display { margin: 0; }
.kicker { margin: 12px 0 0; font-weight: 500; font-size: 0.875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }

/* full-bleed band; the clothesline runs behind the card */
.line-stage { position: relative; overflow-x: clip; max-width: 2200px; margin: 5px auto 0; aspect-ratio: 1440 / 506; padding-bottom: 40px; }
.lines { position: absolute; top: 0; left: -5.88%; width: 120.09%; height: auto; max-width: none; pointer-events: none; }
.panels { position: relative; z-index: 1; width: min(450px, calc(100% - 32px)); margin: 32px auto 0; }
.panel {
  background: #222b24; border: 1px solid rgba(255, 236, 138, .5); border-radius: 10px; padding: 40px;   /* Figma: .5px gold; on 1x screens a hairline can't be drawn, so it is softened instead */
  box-shadow: 0 4px 52.3px -2px rgba(0, 0, 0, .2); display: flex; flex-direction: column; gap: 34px;
}
.panel[hidden] { display: none; }
.panel.wide { width: min(560px, 100%); margin: 0 auto; }
.panels:has(.panel.wide:not([hidden])) { width: min(560px, calc(100% - 32px)); }
.intro { margin: 0; text-align: center; line-height: 1.35; font-weight: 400; }
.form { display: flex; flex-direction: column; gap: 20px; }
.field { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.field > span { margin: 0; font-size: 0.875rem; color: #fff; }
.panel input[type=text], .panel input[type=email], .panel input[type=tel] {
  min-height: 0; padding: 12px; font-size: 1rem; color: #fff; background: #2c332e;
  border: 0; border-bottom: 1px solid rgba(255, 236, 138, .6); border-radius: 3px;
}
.panel input::placeholder { color: #5d5b53; }
/* focus: one clean underline (no outline ring around the field, which looked like a second bottom border) */
.panel input[type=text]:focus, .panel input[type=email]:focus, .panel input[type=tel]:focus { outline: none; background: #343c36; border-bottom-color: var(--gold); }
.panel .btn { font-weight: 500; }
.panel .btn.block { margin-top: 0; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.8125rem; line-height: 1.4; cursor: pointer; margin-top: 14px; }
.consent span { flex: 1; }
.consent input {
  appearance: none; -webkit-appearance: none; flex: none; width: 17.6px; height: 17.6px; margin: 0; cursor: pointer;
  border: 1px solid var(--gold); background: transparent; display: grid; place-content: center;
}
.consent input:checked { background: var(--gold); }
.consent input:checked::after { content: ""; width: 5px; height: 9px; margin-top: -2px; border: solid #222b24; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.consent input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.panel .error { margin: -4px 0 0; text-align: center; }
.panel .drop { border-color: var(--line); background: rgba(255, 255, 255, .03); }
.panel .drop span { display: block; color: var(--muted); font-size: .9rem; }
.panel .queue { margin: 0; }
.thanks { margin: 0; text-align: center; color: var(--gold); }

/* phones: logo header is shared; the clothesline becomes a band above the card */
@media (max-width: 899px) {
  .upload-title { padding-top: 40px; }
  .upload-title .display { font-size: 2rem; }
  /* the line always spans edge to edge: at least the full screen, never narrower than 649px (keeps the polaroids a readable size) */
  .line-stage { aspect-ratio: auto; min-height: 0; margin-top: 18px; padding-top: calc(max(100vw, 649px) * .2928 - 70px); padding-bottom: 8px; }
  .lines { top: 0; left: 50%; width: max(100%, 649px); height: auto; transform: translateX(-50%); }
  .panels, .panels:has(.panel.wide:not([hidden])) { margin-top: 0; width: calc(100% - 50px); max-width: 450px; }   /* 25px of breathing room each side */
  .panels:has(.panel.wide:not([hidden])) { max-width: 560px; }
  .panel { padding: 43px 22px 28px; gap: 26px; }
}

/* sharp screens (2x and up) can draw the true half-pixel hairlines from the design */
@media (min-resolution: 2dppx) {
  .panel { border: .5px solid var(--gold); }
  .panel input[type=text], .panel input[type=email], .panel input[type=tel] { border-bottom: .5px solid var(--gold); }
}

/* v2 */
.panel input::placeholder { color: #9aa39b; }