/* pd-create.css — split from photo-drop.css on 2026-07-24 (Phase 4 Stage 2).
   Rules are verbatim, in original source order. Do not hand-merge sheets;
   the page -> stylesheet mapping lives in tools/build-site.js. */
.drop-hero,
.drop-result {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.drop-card {
  border: 1px solid rgba(201, 189, 174, 0.9);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.82);
  box-shadow: var(--soft-shadow);
}
.drop-checklist {
  display: grid;
  gap: 9px;
  padding-left: 20px;
}
.drop-caution {
  border-left: 3px solid var(--gold);
  color: #5b4a32 !important;
  padding-left: 12px;
}
.drop-form,
.drop-share-card,
.guest-card {
  display: grid;
  gap: 18px;
  padding: clamp(22px, 3vw, 34px);
}
.drop-form label > span em {
  color: var(--muted);
  font-style: normal;
  font-weight: 600;
}
.drop-form label small,
.drop-share-card label small {
  color: #63706f;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
}
.drop-form textarea {
  resize: vertical;
}
.drop-form-note {
  margin: -4px 0 0;
  color: #5b4a32;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}
.drop-choice-field {
  display: grid;
  gap: 10px;
  margin: 0;
  border: 1px solid rgba(201, 189, 174, 0.72);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.46);
  padding: 14px;
}
.drop-choice-grid,
.drop-look-grid {
  display: grid;
  gap: 8px;
}
.drop-choice-grid label:has(input:checked),
.drop-look-grid label:has(input:checked) {
  border-color: rgba(13, 82, 64, 0.58);
  box-shadow: inset 0 0 0 1px rgba(13, 82, 64, 0.18);
}
.look-swatch {
  display: block;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border: 1px solid rgba(19, 37, 38, 0.14);
  border-radius: 8px;
}
.look-swatch.clean {
  background: linear-gradient(135deg, #fffefb, #e7f0ec);
}
.look-swatch.warm-film {
  background: linear-gradient(135deg, #fff3dd, #c2872d);
}
.look-swatch.black-white {
  background: linear-gradient(135deg, #f7f7f5, #202b2c);
}
.look-swatch.party-flash {
  background: linear-gradient(135deg, #f8f4ff, #0a5c62 45%, #d54f2e);
}
.drop-toggle-line {
  position: relative;
  display: flex !important;
  gap: 12px !important;
  align-items: start;
  border: 1px solid rgba(13, 82, 64, 0.16);
  border-radius: 12px;
  background: rgba(226, 232, 227, 0.5);
  cursor: pointer;
  padding: 14px;
}
.drop-toggle-line::before {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border: 2px solid rgba(13, 82, 64, 0.36);
  border-radius: 6px;
  background: #fffefb;
  content: "";
}
.drop-toggle-line:has(input:checked)::before {
  border-color: #0f5f49;
  background:
    linear-gradient(135deg, transparent 0 48%, #fffefb 48% 56%, transparent 56%),
    #0f5f49;
}
.drop-more-details {
  border-top: 1px solid rgba(201, 189, 174, 0.72);
  padding-top: 6px;
}
.drop-result {
  margin-top: clamp(30px, 5vw, 70px);
}
.drop-link-list {
  display: grid;
  gap: 12px;
}
.drop-print-preview {
  display: grid;
  place-items: center;
  min-height: auto;
  padding: 30px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(247, 242, 234, 0.5)),
    var(--warm);
}
.drop-sign {
  display: grid;
  width: min(390px, 100%);
  /* Was aspect-ratio 8/10 — the sign's content always exceeds that
     height, and WebKit centers the grid content against the RATIO
     height instead of the grown box, shoving PHOTODROP 80px above the
     sign's top edge (Mario's iPhone, 2026-08-03; Chromium was fine).
     Content + padding set the height now; min-height keeps the paper
     look for short signs. Both engines verified identical (44px/44px). */
  min-height: 420px;
  justify-items: center;
  align-content: center;
  gap: 18px;
  border: 2px solid var(--gold);
  background: #fffefb;
  color: var(--ink);
  padding: 42px;
  text-align: center;
  box-shadow: 0 18px 40px rgba(58, 43, 25, 0.18);
}
.drop-qr {
  display: grid;
  width: 180px;
  height: 180px;
  place-items: center;
  border: 1px solid var(--line);
  background: white;
  padding: 12px;
}

/* Mobile-first (2026-07-25): single column is the base; the two-column
   composition returns at >=981. `.drop-trust-section` has no other author
   declaration for grid-template-columns, so the desktop side is the initial
   `none` written explicitly. */
.drop-trust-section {
  grid-template-columns: 1fr;
}

@media (min-width: 981px) {
.drop-hero,
.drop-result {
    grid-template-columns: minmax(0, 0.95fr) minmax(380px, 0.62fr);
  }
.drop-trust-section {
    grid-template-columns: none;
  }
}

@media (min-width: 681px) {
.drop-print-preview {
    min-height: 620px;
  }
}
/* R3 create funnel (2026-07-26): once the drop exists, the created card
   IS the page. The old selectors here (.drop-hero/.drop-trust-section)
   named a retired page generation and matched nothing. The wizard and
   the pitch step aside; the header CTA goes too — its #createDropForm
   target is hidden in this state. */
.drop-created .drop-rules-section,
.drop-created .night-steps,
.drop-created .night-trust-section,
.drop-created .drop-pricing,
.drop-created .night-faq,
.drop-created .drop-site-header .header-action {
  display: none;
}
.drop-created .drop-result {
  margin-top: 0;
}
.drop-card {
  border-radius: 14px;
  background: rgba(255, 253, 248, 0.92);
  box-shadow: 0 28px 78px rgba(19, 37, 38, 0.11);
}
.drop-form {
  padding: clamp(22px, 2.4vw, 32px);
}
.drop-scene-sign,
.drop-scene-phone {
  display: grid;
  justify-items: center;
  text-align: center;
  background: #fffdf8;
  color: #173235;
}
.drop-scene-sign {
  position: relative;
  width: min(280px, 54vw);
  min-height: 382px;
  align-content: start;
  gap: 14px;
  border: 1px solid rgba(194, 135, 45, 0.58);
  border-radius: 4px;
  box-shadow:
    0 22px 44px rgba(19, 37, 38, 0.14),
    0 14px 0 -8px rgba(142, 94, 43, 0.62);
  padding: 34px 28px 28px;
}
.drop-scene-sign::after {
  position: absolute;
  right: -22px;
  bottom: -18px;
  left: 22px;
  height: 18px;
  border-radius: 999px;
  background: rgba(137, 99, 58, 0.22);
  content: "";
  filter: blur(5px);
}
.drop-scene-phone {
  width: 176px;
  min-height: 318px;
  align-content: start;
  gap: 12px;
  border: 8px solid #101719;
  border-radius: 28px;
  box-shadow: 0 22px 50px rgba(19, 37, 38, 0.22);
  padding: 28px 16px 18px;
  transform: none;
}
.drop-phone-prompt {
  width: 100%;
  border: 1px solid rgba(194, 135, 45, 0.34);
  border-radius: 12px;
  background: rgba(255, 247, 231, 0.72);
  color: #173235;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
  padding: 10px;
}
.drop-phone-thumbs {
  display: grid;
  width: 100%;
  /* minmax(0, 1fr): iOS Safari otherwise floors 1fr columns at the
     images' intrinsic 640px and the grid explodes out of the phone
     screen (Mario's iPhone, 2026-07-13). Same rendering in Chrome. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

/* Mobile-first (2026-07-25): the 620px form cap is the base; it lifts at
   >=1181 (no other author rule sets .drop-form max-width, so the desktop
   side is the initial `none`, written explicitly). */
.drop-form {
  max-width: 620px;
}

@media (min-width: 1181px) {
.drop-form {
    max-width: none;
  }
}

@media (min-width: 761px) {
.drop-scene-phone {
    transform: translateY(18px) rotate(-2deg);
  }
}
/* 2026-07-02 studio card scope: form and phone preview only */
.drop-studio .drop-form {
  gap: 0;
  align-self: start;
  border-radius: 16px;
  padding: clamp(22px, 2.8vw, 36px);
}
.drop-studio .drop-form h3 {
  margin: 0 0 20px;
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1.05;
}
.drop-studio .drop-step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start;
  margin: 0;
  border: 0;
  border-top: 1px solid rgba(205, 194, 179, 0.72);
  border-radius: 0;
  background: transparent;
  padding: 18px 0;
}
.drop-studio label.drop-step {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}
.drop-studio .drop-step legend {
  display: block;
  width: 100%;
  padding: 0;
}
.drop-studio .drop-step-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.drop-studio .drop-step-copy strong {
  font-size: 15px;
  font-weight: 850;
  line-height: 1.15;
}
.drop-studio .drop-step-copy em {
  font-size: 12px;
  font-style: normal;
  font-weight: 650;
  line-height: 1.35;
}
.drop-studio .drop-form input:focus-visible,
.drop-studio .drop-form select:focus-visible,
.drop-studio .drop-form textarea:focus-visible,
.drop-studio .drop-choice-grid label:focus-within,
.drop-studio .drop-look-grid label:focus-within,
.drop-studio .drop-toggle-line:focus-within {
  outline: 3px solid rgba(13, 82, 64, 0.18);
  outline-offset: 2px;
}
.drop-studio .drop-segment-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.drop-studio .drop-choice-grid.compact span,
.drop-studio .drop-segment-grid span {
  justify-content: center;
  min-height: 42px;
  width: 100%;
  font-size: 13px;
}
.drop-studio .drop-look-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.drop-studio .drop-look-grid label:has(input:checked)::after {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: #0d5240;
  color: white;
  content: "✓";
  font-size: 12px;
  font-weight: 900;
}
.drop-studio .drop-look-grid span {
  display: grid;
  gap: 8px;
  justify-items: center;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}
.drop-studio .look-swatch {
  width: 100%;
  height: auto;
  aspect-ratio: 1.3 / 1;
  overflow: hidden;
  border-radius: 7px;
}
.drop-studio .drop-toggle-line {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: center;
  cursor: pointer;
}
.drop-studio .drop-toggle-line::before,
.drop-studio .drop-toggle-line::after {
  content: none;
  display: none;
}
.drop-studio .drop-toggle-line .drop-step-copy {
  grid-column: 1;
}
.drop-studio .drop-toggle-switch {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  width: 46px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: #d8cbbc;
}
.drop-studio .drop-toggle-switch::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: white;
  box-shadow: 0 2px 6px rgba(19, 37, 38, 0.2);
  content: "";
  transition: transform 160ms ease;
}
.drop-studio .drop-toggle-line:has(input:checked) .drop-toggle-switch {
  background: #0d5240;
}
.drop-studio .drop-toggle-line:has(input:checked) .drop-toggle-switch::after {
  transform: translateX(20px);
}
.drop-studio .drop-toggle-line input {
  grid-column: 2;
}
.drop-studio .drop-more-details {
  margin-top: 4px;
  border-top: 1px solid rgba(205, 194, 179, 0.72);
  padding-top: 16px;
}
.drop-studio .drop-more-details summary {
  font-size: 13px;
  font-weight: 850;
}
.drop-studio .drop-form-note {
  justify-self: center;
  max-width: 42ch;
  margin: 10px 0 0;
  text-align: center;
}
.drop-studio .drop-status {
  margin-top: 8px;
}
.drop-studio .drop-scene-phone {
  position: relative;
  z-index: 2;
  display: block;
  width: min(330px, 100%);
  aspect-ratio: 720 / 1411;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: #0a1812;
  box-shadow: none;
  color: var(--night-paper);
  container-type: inline-size;
  padding: 0;
  text-align: center;
  transform: rotate(-0.75deg);
}
.drop-studio .drop-scene-phone::before {
  position: absolute;
  /* Full symmetric halo — correct for the two-column layout (>=1080px)
     where the phone sits BESIDE the form. The stacked band (681-1079px)
     clips the top via the media override at the end of this file: there
     the paper card sits ~31px above the phone and the blurred halo
     smeared over it (brand audit 2026-07-23 + desktop regression fix
     same day). <=680px removes the halo entirely (content: none). */
  inset: -14% -20%;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(10, 24, 18, 0.98) 0 62%, rgba(10, 24, 18, 0.5) 78%, transparent 92%);
  /* Base = phone: no halo at all (<=680 reads it as a smudged shadow). The
     min-width:681 block near the end of this file brings it back. */
  content: none;
  filter: blur(14px);
}
.drop-phone-shell {
  display: block;
  width: 100%;
  height: auto;
}
.drop-phone-screen {
  position: absolute;
  top: 3.6%;
  right: 6.4%;
  bottom: 3.6%;
  left: 7%;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: clamp(7px, 2.9cqw, 11px);
  overflow: hidden;
  border-radius: 9% / 4.2%;
  background:
    radial-gradient(circle at 22% 10%, rgba(247, 243, 234, 0.06), transparent 26%),
    linear-gradient(180deg, rgba(12, 18, 18, 0.78), rgba(6, 11, 11, 0.94));
  padding: clamp(22px, 8.8cqw, 34px) clamp(16px, 5.9cqw, 23px) clamp(18px, 6.8cqw, 26px);
}
.drop-studio .drop-phone-screen span {
  margin-top: 0;
  font-size: clamp(9px, 3.1cqw, 12px);
  letter-spacing: 0.28em;
}
.drop-studio .drop-phone-screen strong {
  max-width: 13ch;
  color: var(--night-paper);
  font-size: clamp(16px, 5.4cqw, 21px);
  font-weight: 850;
  line-height: 1.08;
  text-transform: none;
}
.drop-studio .drop-phone-screen p {
  margin: 0;
  color: var(--night-paper);
  font-size: clamp(22px, 7.4cqw, 30px);
  font-weight: 850;
  line-height: 1;
}
.drop-studio .drop-phone-prompt {
  max-width: 20ch;
  margin: 0;
  font-size: clamp(11px, 3.8cqw, 14px);
  font-weight: 700;
  line-height: 1.35;
}
.drop-studio .drop-phone-thumbs {
  gap: clamp(4px, 1.7cqw, 7px);
  margin-top: 4px;
}
.drop-studio .drop-scene-phone small {
  width: 100%;
  font-size: clamp(10px, 3.2cqw, 12px);
  font-weight: 750;
}

/* Mobile-first (2026-07-25): the three studio grids flatten to one column at
   the base, gain the two-up band at >=461, and each returns to its own
   desktop track count at >=701. The old <=460 `.drop-studio .drop-step`
   rule was a no-op — the base rule above already declares 1fr and nothing
   else re-declares it — so band flattening drops it.
   The phone mock's tilt inside the studio has TWO bands, not three: the
   `.drop-studio .drop-scene-phone` base rule above already sets
   rotate(-0.75deg) at (0,2,0), which outranks the (0,1,0)
   `.drop-scene-phone` tiers — so <=700 is flat (rotate(0deg)) and >=701
   is rotate(-0.75deg), full stop. */
.drop-studio .drop-scene-phone {
  transform: rotate(0deg);
}
.drop-studio .drop-choice-grid.compact,
.drop-studio .drop-segment-grid,
.drop-studio .drop-look-grid {
  grid-template-columns: 1fr;
}

@media (min-width: 461px) {
.drop-studio .drop-choice-grid.compact,
  .drop-studio .drop-segment-grid,
  .drop-studio .drop-look-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 701px) {
.drop-studio .drop-scene-phone {
    transform: rotate(-0.75deg);
  }
.drop-studio .drop-choice-grid.compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
.drop-studio .drop-segment-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
.drop-studio .drop-look-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.night-surface .drop-card,
.night-surface .drop-form,
.night-surface .drop-choice-field {
  border-color: rgba(233, 186, 82, 0.24);
  background: rgba(16, 37, 27, 0.72);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.24);
}
.night-surface .drop-rules-section .drop-choice-field {
  border-color: rgba(201, 189, 174, 0.72);
  background: rgba(255, 255, 255, 0.5);
  box-shadow: none;
}
.night-surface .drop-rules-section .drop-step legend {
  display: block;
  width: 100%;
}
.night-surface .drop-rules-section .drop-step > input,
.night-surface .drop-rules-section .drop-step > select,
.night-surface .drop-rules-section .drop-step > textarea,
.night-surface .drop-rules-section .drop-choice-grid,
.night-surface .drop-rules-section .drop-look-grid {
  grid-column: 1;
}
.night-surface .drop-rules-section .drop-toggle-line {
  grid-template-columns: minmax(0, 1fr) auto;
}
.night-surface .drop-rules-section .drop-toggle-line .drop-step-copy {
  grid-column: 1;
}
.night-surface .drop-rules-section .drop-toggle-switch {
  grid-column: 2;
}
.night-surface .drop-form h3 {
  margin: 0;
  color: var(--night-paper);
  font-size: 28px;
}
.night-surface .drop-form label,
.night-surface .drop-form legend,
.night-surface .drop-form label > span em,
.night-surface .drop-choice-grid em,
.night-surface .drop-toggle-line em {
  color: rgba(247, 243, 234, 0.72);
}
.night-surface .drop-form strong,
.night-surface .drop-choice-grid span,
.night-surface .drop-look-grid span {
  color: var(--night-paper);
}
.night-surface .drop-form input,
.night-surface .drop-form select,
.night-surface .drop-form textarea,
.night-surface .drop-share-card input,
.night-surface .drop-share-card textarea {
  border-color: rgba(233, 186, 82, 0.24);
  background: rgba(247, 243, 234, 0.95);
  color: #132622;
}
/* Day-surface share card (admin result context): the 12px/800 label takes
   --gold-ink for 4.5:1 on cream (gold ruling 2026-08-06). The night
   override below wins on specificity and keeps bright gold on dark. */
.drop-share-card > .drop-label {
  color: var(--gold-ink);
}
/* The share card sits on the night create page; without these it keeps
   the admin day-surface inks and turns unreadable on the dark card. */
.night-surface .drop-share-card h2 {
  color: var(--night-paper);
}
.night-surface .drop-share-card > .drop-label {
  color: var(--gold);
}
.night-surface .drop-share-card label,
.night-surface .drop-share-card label > span {
  color: rgba(247, 243, 234, 0.72);
}
.night-surface .drop-share-card label small {
  color: rgba(247, 243, 234, 0.56);
}
.night-surface .drop-share-card .drop-caution {
  color: rgba(240, 226, 197, 0.88) !important;
}
.night-surface .drop-choice-grid label,
.night-surface .drop-look-grid label,
.night-surface .drop-toggle-line {
  border-color: rgba(233, 186, 82, 0.22);
  background: rgba(10, 24, 18, 0.62);
}
.night-surface .drop-choice-grid label:has(input:checked),
.night-surface .drop-look-grid label:has(input:checked) {
  border-color: rgba(233, 186, 82, 0.76);
  box-shadow: inset 0 0 0 1px rgba(233, 186, 82, 0.28);
}
.night-surface .drop-rules-section .drop-choice-grid label:has(input:checked),
.night-surface .drop-rules-section .drop-look-grid label:has(input:checked) {
  border-color: #0d5240;
  box-shadow: inset 0 0 0 1px rgba(13, 82, 64, 0.28);
}
.night-surface .drop-rules-section .drop-choice-grid label:has(input:checked) {
  background: #0d5240;
}
.night-surface .drop-rules-section .drop-choice-grid label:has(input:checked) span {
  color: #fffdf8;
}
.night-surface .drop-rules-section .look-swatch {
  border: 1px solid rgba(19, 37, 38, 0.14);
  background: #fffdf8;
}
.night-surface .drop-rules-section .look-swatch.clean {
  background:
    linear-gradient(135deg, rgba(19, 37, 38, 0.08) 0 1px, transparent 1px 100%),
    linear-gradient(135deg, #fffefb, #eef3ef);
}
.night-surface .drop-rules-section .look-swatch.warm-film {
  background:
    radial-gradient(circle at 72% 24%, rgba(255, 253, 248, 0.7), transparent 18%),
    linear-gradient(135deg, #fff3dd 0%, #e9ba52 48%, #a9662b 100%);
}
.night-surface .drop-rules-section .look-swatch.black-white {
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.82), transparent 18%),
    linear-gradient(135deg, #f7f7f5 0%, #8b918d 46%, #202b2c 100%);
}
.night-surface .drop-rules-section .look-swatch.party-flash {
  background:
    radial-gradient(circle at 78% 22%, rgba(255, 255, 255, 0.95) 0 10%, transparent 11%),
    linear-gradient(135deg, #f8f4ff 0%, #0a5c62 42%, #d54f2e 72%, #f2c75f 100%);
}
.night-surface .drop-rules-section .drop-form-note {
  color: #5b4a32;
}
.night-surface .drop-rules-section .drop-status {
  color: #0b695f;
}
.night-surface .drop-scene-phone {
  align-self: center;
  width: min(330px, 100%);
  min-height: 620px;
  border: 1px solid rgba(233, 186, 82, 0.28);
  background:
    linear-gradient(180deg, rgba(16, 37, 27, 0.95), rgba(8, 19, 13, 0.95)),
    var(--night-raised);
  color: var(--night-paper);
  padding: 26px 22px;
}
.night-surface .drop-studio .drop-scene-phone {
  width: min(330px, 100%);
  min-height: 0;
  border: 0;
  background: #0a1812;
  box-shadow: none;
  padding: 0;
}
.night-surface .drop-phone-screen strong,
.night-surface .drop-phone-screen p {
  color: var(--night-paper);
}
.night-surface .drop-phone-prompt {
  border-color: rgba(233, 186, 82, 0.28);
  background: rgba(233, 186, 82, 0.12);
  color: var(--candle);
}
.night-surface .drop-phone-thumbs img {
  border: 1px solid rgba(233, 186, 82, 0.24);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
}
.night-surface .drop-result {
  border-top: 1px solid rgba(233, 186, 82, 0.22);
  padding-top: 44px;
}

@media (min-width: 1280px) {
.night-trust-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.drop-studio .drop-scene-phone {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.drop-rules-section {
  overflow-x: clip;
}
/* --- Defect 4: phone-mockup vignette bled over the create-form card -------
   The blurred radial glow (::before) extended -20% horizontally = ~66px past
   the 330px phone column, wider than the ~56px column gap, so its blurred
   edge smeared across the form card's lower-right. Pull the horizontal bleed
   inside the phone column (glow stays under the phone, never crosses the
   gap), and clip the section on both axes as a hard guarantee. */
.drop-rules-section {
  overflow: clip;
}
.drop-studio .drop-scene-phone::before {
  inset: -12% -8%;
}

/* ============================================================
   2026-07-05 polish: creator form breathing room (Mario:
   "text looks a bit cramped on the photo drop creator")
   ============================================================ */

.drop-studio .drop-form > h3 {
  margin: 0 0 20px;
}
.drop-studio .drop-step {
  gap: 12px;
  padding: 22px 0;
}
.drop-studio .drop-step-copy {
  gap: 5px;
}
.drop-studio .drop-step-copy strong {
  font-size: 15.5px;
  font-weight: 750;
  line-height: 1.3;
}
.drop-studio .drop-step-copy em {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(17, 40, 43, 0.66);
}
.drop-studio .drop-step legend {
  margin-bottom: 2px;
}
/* Lost-link safety net: drops remembered on this device (2026-07-07) */

.device-drops-card {
  max-width: 860px;
  margin: 0 auto 26px;
  padding: 20px 22px;
  border: 1px solid rgba(233, 186, 82, 0.28);
  border-radius: 16px;
  background: rgba(16, 37, 27, 0.5);
}
.device-drops-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
/* ============================================================
   2026-07-11 UX simplification: two-question create wizard.
   Same form element and fields as before; the wizard only stages
   what is visible. Chips replace the date picker for the common
   cases (pickers are the hardest control for older hands).
   ============================================================ */

.drop-wizard .wiz-progress {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  opacity: 0.6;
}
.drop-wizard .wiz-question .drop-step-copy strong {
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.drop-wizard .wiz-question input[name="eventName"] {
  font-size: 17px;
  min-height: 52px;
}
.drop-wizard .wiz-next,
.drop-wizard button[type="submit"] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 52px;
  font-size: 16.5px;
}
.drop-wizard .wiz-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.drop-wizard .wiz-chips button {
  min-height: 48px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1.5px solid rgba(247, 243, 234, 0.4);
  background: transparent;
  color: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.drop-wizard .wiz-chips button:focus-visible {
  outline: 2px solid rgba(233, 186, 82, 0.8);
  outline-offset: 2px;
}
.drop-wizard .wiz-date-other {
  display: block;
  margin-top: 12px;
}
.drop-wizard .wiz-back {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  min-height: 48px;
  border: none;
  border-radius: 12px;
  background: transparent;
  font-size: 14.5px;
  font-weight: 600;
  color: inherit;
  opacity: 0.65;
  cursor: pointer;
}
.drop-wizard .wiz-back:hover,
.drop-wizard .wiz-back:focus-visible {
  opacity: 1;
}
.drop-wizard .wiz-custom {
  margin: 18px 0;
}
.drop-wizard .wiz-custom > summary {
  min-height: 48px;
  display: flex;
  align-items: center;
}
/* The phone-preview aside is decoration (aria-hidden); its glow
   pseudo-element extends past its box and was swallowing taps on the
   wizard's Continue button once the form got short. Decoration never
   takes pointer events. */
.drop-studio .drop-scene-phone,
.drop-studio .drop-scene-phone::before {
  pointer-events: none;
}
.drop-wizard .drop-choice-grid label,
.drop-wizard .drop-look-grid label,
.drop-wizard .drop-segment-grid label {
  min-height: 48px;
}
.drop-wizard .drop-choice-grid label span,
.drop-wizard .drop-segment-grid label span {
  font-size: 14px;
}
/* --- 2026-07-13 mobile polish (Mario's phone review) ----------------------
   The phone-preview aside painted a flat #0a1812 box over the page's
   radial-gradient body, which read as a wrong-shade frame; decoration
   floats on the ambient background, always. */
.night-surface .drop-studio .drop-scene-phone {
  background: transparent;
}

@media (min-width: 681px) {
/* The grounding glow reads as a smudged shadow on small screens, so it
   exists only from 681px up. */
  .drop-studio .drop-scene-phone::before {
    content: "";
  }
}
/* Memorial arrival (?occasion=memorial on the create page): the party
   surfaces step aside and the quiet memorial offer takes their place.
   The phone mock's festive thumbs have no place next to a memorial
   form, so the form stands alone, centered. JS adds the body class
   and swaps the register strings (applyMemorialArrival). */
#memorialOffer {
  display: none;
}
.memorial-arrival #memorialOffer {
  display: block;
}
.memorial-arrival .drop-rules-layout {
  grid-template-columns: minmax(0, 640px);
}
#memorialOffer {
  scroll-margin-top: 132px;
}
/* iOS zooms the page when a focused input computes under 16px. */
.drop-form input,
.drop-form select,
.drop-form textarea,
.drop-share-card input {
  font-size: max(16px, 1em);
}
/* 2026-07-20: .night-steps was the only create-page section painting
   a flat var(--night) rectangle inside the padded shell — it read as
   an accidental card with the text flush at its left edge (Mario's
   iPhone report). Rule of record (2026-07-13): decoration on night
   surfaces is background transparent, never a re-declared green. */
body[data-photo-drop-mode="create"] .night-steps {
  background: transparent;
}

/* ============================================================
   Phone-halo stacked-band clip — 2026-07-23 desktop regression fix.
   Only between 681px (halo exists) and 1079px (layout stacks, the
   paper create card sits directly above the phone) does the halo's
   upward bleed smear the card. Desktop (>=1080px, phone beside the
   form) keeps the full symmetric halo; <=680px has no halo at all.
   Converted 2026-07-25 from a single 681-to-1079 banded query into two
   stacked min-width tiers: the clipped inset from 681, the full
   symmetric inset restored at 1080. Same three bands, no max-width.
   ============================================================ */
@media (min-width: 681px) {
.drop-studio .drop-scene-phone::before {
    inset: 0 -8% -12%;
  }
}

@media (min-width: 1080px) {
.drop-studio .drop-scene-phone::before {
    inset: -12% -8%;
  }
}

/* ============================================================
   R3 create funnel — 2026-07-26 (research A2/A6, mobile-first).
   Base styles are the phone; no width queries needed here.

   1. Wizard chips live on the CREAM day-card, but their hairline was
      night-palette cream (rgba(247,243,234,.4)) — invisible on cream,
      so unselected options read as bare text (audit A2). Chips take
      the card's ink instead; the selected .on state stays gold via
      the higher-specificity core rule.
   ============================================================ */
.drop-wizard .wiz-chips button {
  border-color: rgba(23, 53, 54, 0.36);
  background: rgba(255, 255, 255, 0.55);
}
.drop-wizard .wiz-chips button:hover {
  border-color: rgba(23, 53, 54, 0.62);
}

/* 2. "Customize your event (optional)" had no disclosure affordance —
   it read as a heading, not a control (audit A2). The summary becomes
   a full-width row with a chevron that flips when open. display:flex
   on the summary already suppresses the native marker. */
.drop-wizard .wiz-custom > summary {
  justify-content: space-between;
  gap: 12px;
}
.drop-wizard .wiz-custom > summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: -4px;
  border-right: 2px solid rgba(23, 53, 54, 0.58);
  border-bottom: 2px solid rgba(23, 53, 54, 0.58);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}
.drop-wizard .wiz-custom[open] > summary::after {
  margin-top: 4px;
  transform: rotate(225deg);
}

/* 3. Celebrated success (audit A6): the share card leads with a gold
   check badge, and the result rises in as a ceremony, print preview a
   beat behind. Motion is additive only — reduced-motion users get the
   same final state with no animation. */
.night-surface .drop-result .drop-share-card::before {
  content: "\2713";
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--candle, #e9ba52);
  color: #241a05;
  font-size: 23px;
  font-weight: 900;
  line-height: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .drop-created .drop-result .drop-share-card {
    animation: pd-result-rise 0.55s cubic-bezier(0.22, 0.9, 0.3, 1) both;
  }
  .drop-created .drop-result .drop-print-preview {
    animation: pd-result-rise 0.55s cubic-bezier(0.22, 0.9, 0.3, 1) 0.12s both;
  }
  .drop-created .drop-result .drop-share-card::before {
    animation: pd-check-pop 0.5s cubic-bezier(0.34, 1.4, 0.44, 1) 0.22s both;
  }
}
@keyframes pd-result-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes pd-check-pop {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  60% {
    opacity: 1;
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* 2026-08-03 (Mario-flagged cramp, rounds 4+5 review): the Customize
   tail had no vertical rhythm — the photo-ideas band sat flush against
   its own top edge (padding-top 0) and the language/email pair and the
   message field stacked at 0px below it. The fieldset bands set the
   rhythm at 22px; the tail now matches it. Root cause of the flush
   band: `.drop-step:first-of-type { padding-top: 0 }` matches per TAG,
   and the ideas toggle is the first <label> among its siblings — the
   three-class selector here outweighs that trap. */
.drop-wizard .drop-two {
  margin: 22px 0;
}
/* 2026-08-03 follow-up (Mario's phone screenshots): the ideas toggle
   drew a bordered, tinted card, but `.drop-studio .drop-step` zeroes
   horizontal padding — so the text sat flush on its own border. The
   other wizard rows are flush full-width bands, so the box goes
   entirely: same 22px row rhythm, the switch is the affordance. */
.drop-studio .drop-wizard .drop-toggle-line {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 22px 0;
}
/* Same screenshots: `.drop-studio .look-swatch { width: 100% }` rides
   an IMPLICIT grid column, which sizes to the label's text — so each
   swatch inherited its caption's width (Limpio 39px, Cálido tipo
   película 114px). One fixed chip size for every look, all widths;
   the content-sized column centers in the card instead of hugging
   its left edge. */
.drop-studio .look-swatch {
  width: 84px;
}
.drop-studio .drop-look-grid label {
  justify-content: center;
}
/* Mario's phone passes 2+3: the band headings looked cramped, then
   BISECTED — the band's background started mid-heading. Root cause is
   fieldset magic: browsers anchor a legend so the fieldset's top
   border line runs through the legend's vertical middle, and the
   background starts at that line. `float: left` unmagics it in
   Chromium but NOT WebKit (Mario's Safari), so the fix is structural:
   the legend is visually hidden (a11y group name survives) and the
   visible heading lives in a plain span that the band fully contains.
   Utility mirrors pd-admin.css. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* Mario's memorial test create (2026-08-03), two result-card bugs:
   (1) The QR SVG renders at its natural size (~205px for a prod
   upload URL) inside the 180px .drop-qr box and overflowed its own
   quiet zone. The SVG carries a viewBox, so sizing it to the box
   scales the vector crisply. */
.drop-qr svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* (2) After a memorial create, the pricing band stayed above the
   result card: `.memorial-arrival #memorialOffer { display: block }`
   carries ID specificity (1,1,0) and beat the R3 collapse list's
   `.drop-created .drop-pricing` (0,2,0). Match the ID and come later
   in the cascade — the ceremony owns the page again. */
.drop-created #memorialOffer {
  display: none;
}