/* pd-core.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-shell {
  width: min(1500px, 100%);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 72px) clamp(20px, 4vw, 52px);
}
[hidden] {
  display: none !important;
}
.drop-label {
  margin: 0 0 12px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}
.drop-hero-copy > p:not(.drop-label),
.guest-card > p,
.drop-share-card > p {
  max-width: 62ch;
  color: #425756;
  font-family: var(--body);
  font-size: 19px;
  line-height: 1.6;
}
.drop-muted {
  color: var(--muted);
}
.drop-hero-actions .drop-primary,
.drop-hero-actions .drop-secondary {
  min-width: 190px;
}
.drop-checklist,
.drop-warning p {
  margin: 0;
}
.drop-checklist li,
.drop-warning,
.drop-trust-line,
.admin-status-list span {
  color: #425756;
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.55;
}
.drop-share-card h2 {
  margin: 0;
  color: #153234;
  font-size: 30px;
  line-height: 1.1;
}
.drop-form label,
.drop-share-card label {
  display: grid;
  gap: 8px;
  color: #173536;
  font-size: 14px;
  font-weight: 800;
}
.drop-form textarea,
.drop-form input,
.drop-form select,
.drop-share-card input {
  min-height: 50px;
  width: 100%;
  border: 1px solid #cfc6ba;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  padding: 11px 14px;
  font: inherit;
}
.drop-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.drop-primary,
.drop-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  border-radius: 8px;
  cursor: pointer;
  padding: 0 28px;
  font-size: 17px;
  font-weight: 850;
  text-align: center;
  text-decoration: none;
}
.drop-primary {
  border: 0;
  background: linear-gradient(180deg, var(--teal), var(--teal-dark));
  color: white;
  box-shadow: 0 14px 28px rgba(13, 82, 64, 0.22);
}
.drop-secondary {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.9);
  color: #193536;
}
.drop-primary[disabled],
.drop-secondary[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}
.drop-status {
  min-height: 24px;
  margin: 0;
  color: #0b695f;
  font-size: 14px;
  font-weight: 700;
}
.drop-choice-field legend {
  color: #173536;
  font-size: 14px;
  font-weight: 850;
  padding: 0 4px;
}
.drop-choice-grid.compact,
.drop-look-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.drop-choice-grid label,
.drop-look-grid label {
  position: relative;
  display: grid;
  min-height: 50px;
  align-items: center;
  border: 1px solid rgba(201, 189, 174, 0.9);
  border-radius: 10px;
  background: #fffefb;
  color: #173536;
  cursor: pointer;
  padding: 10px 12px;
}
.drop-choice-grid input,
.drop-look-grid input,
.drop-toggle-line input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.drop-choice-grid span,
.drop-look-grid span {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  color: #173536;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.2;
}
.drop-choice-grid em,
.drop-toggle-line em {
  display: block;
  color: #667372;
  font-size: 12px;
  font-style: normal;
  font-weight: 650;
  line-height: 1.35;
}
.drop-more-details summary {
  color: #173536;
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
  padding: 8px 0;
}
.drop-more-details[open] {
  display: grid;
  gap: 18px;
}
.drop-status.is-error {
  color: #a8341e;
}
.turnstile-slot:empty {
  display: none;
}
.drop-link-list input,
.drop-reminder textarea {
  overflow: hidden;
  text-overflow: ellipsis;
}
.drop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.drop-reminder textarea {
  min-height: 86px;
}
.drop-warning strong {
  color: #173536;
  font-size: 14px;
  line-height: 1.45;
}
.drop-warning span {
  color: #6b5b42;
  font-size: 13px;
  font-weight: 750;
}
.admin-status-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.admin-status-list span {
  min-height: 34px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(13, 82, 64, 0.14);
  border-radius: 8px;
  background: rgba(226, 232, 227, 0.52);
  padding: 10px 12px;
  font-weight: 750;
}
.drop-primary.is-disabled,
.drop-secondary.is-disabled,
.drop-primary[aria-disabled="true"],
.drop-secondary[aria-disabled="true"] {
  pointer-events: auto;
  cursor: not-allowed;
  opacity: 0.56;
}
.drop-sign span {
  color: #72807f;
  font-family: var(--logo-serif);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.drop-sign strong {
  max-width: 12ch;
  font-family: var(--display);
  font-size: 38px;
  line-height: 1.05;
  /* As typed, no uppercase: the print studio renders the event name
     as the host wrote it (kit-engine only uppercases the date), so
     the result-card preview must not shout what the printed sign
     says quietly (Mario's memorial test create, 2026-08-03). */
  text-transform: none;
}
.drop-qr svg {
  width: 100%;
  height: 100%;
}
.drop-sign em {
  max-width: 26ch;
  color: #2b4242;
  font-style: normal;
  font-weight: 800;
}
.drop-sign small {
  color: var(--muted);
  font-size: 12px;
}
.upload-success h2 {
  margin: 0;
  color: #153234;
  font-size: 26px;
  line-height: 1.1;
}
.drop-empty {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--muted);
  padding: 22px;
}
.upload-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.upload-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 5px;
  object-fit: cover;
  background: var(--warm);
}
.upload-card strong {
  color: #173536;
  font-size: 14px;
  line-height: 1.25;
}
.upload-card span {
  color: var(--muted);
  font-size: 12px;
}
.upload-card button {
  min-height: 38px;
  border: 1px solid rgba(168, 52, 30, 0.34);
  border-radius: 6px;
  background: #fff8f5;
  color: #8d2c1d;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}
.upload-card-actions a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 253, 248, 0.92);
  color: #173536;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

/* Mobile-first (2026-07-25, phase 4 stage 3): what was the <=680 phone
   block now lands unconditionally (base = phone), with each desktop value
   restored at min-width:681. Restore values are read from the SAME-selector
   rules above this point; `.drop-trust-grid` and `.guest-shared-grid` have
   none anywhere in the pd sheets, so their desktop side is the initial
   `none`, written explicitly.
   Dropped as already dead: `.drop-shell { padding: 24px 16px 44px }` — the
   base `.drop-shell` rule ~20 lines below re-declares `padding`
   unconditionally and wins on order at every width. */
.drop-share-card h2 {
  font-size: 26px;
}
.drop-sign strong {
  font-size: 32px;
}
.drop-two,
.upload-grid,
.drop-trust-grid,
.admin-status-list,
.drop-choice-grid.compact,
.drop-look-grid,
.guest-shared-grid {
  grid-template-columns: 1fr;
}
.drop-actions {
  display: grid;
}

@media (min-width: 681px) {
.drop-share-card h2 {
    font-size: 30px;
  }
.drop-sign strong {
    font-size: 38px;
  }
.drop-two {
    grid-template-columns: 1fr 1fr;
  }
.upload-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
.drop-trust-grid,
  .guest-shared-grid {
    grid-template-columns: none;
  }
.admin-status-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
.drop-choice-grid.compact,
  .drop-look-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
.drop-actions {
    display: flex;
  }
}
/* 2026-06-22 full renewal pass */
.drop-shell {
  width: min(1600px, 100%);
  padding: clamp(34px, 5vw, 82px) clamp(22px, 4.5vw, 70px);
}
.drop-label {
  color: var(--gold);
}
.drop-hero-copy > p:not(.drop-label),
.guest-card > p,
.drop-share-card > p {
  color: #3e5554;
  font-size: 20px;
  line-height: 1.62;
}
.drop-primary,
.drop-secondary {
  border-radius: 8px;
}
.drop-primary {
  background: linear-gradient(180deg, #0f5f49, #093d2e);
  box-shadow: 0 16px 34px rgba(13, 82, 64, 0.24);
}
.drop-share-card h2 {
  font-family: var(--display);
  font-weight: 800;
}
.drop-form input,
.drop-form select,
.drop-form textarea,
.guest-card input,
.guest-card textarea {
  border-radius: 8px;
  background: #fffefb;
}
.drop-scene-sign span,
.drop-scene-phone span {
  color: #738482;
  font-family: var(--logo-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.drop-scene-sign strong {
  max-width: 10ch;
  font-size: 24px;
  font-weight: 850;
  line-height: 1.08;
  text-transform: uppercase;
}
.drop-scene-sign i {
  display: block;
  width: 118px;
  height: 118px;
  border: 8px solid #fffdf8;
  background:
    linear-gradient(90deg, #0e2f32 10px, transparent 10px 18px, #0e2f32 18px 28px, transparent 28px 38px, #0e2f32 38px 48px, transparent 48px 58px, #0e2f32 58px 68px, transparent 68px 78px, #0e2f32 78px 88px, transparent 88px),
    linear-gradient(#0e2f32 10px, transparent 10px 18px, #0e2f32 18px 28px, transparent 28px 38px, #0e2f32 38px 48px, transparent 48px 58px, #0e2f32 58px 68px, transparent 68px 78px, #0e2f32 78px 88px, transparent 88px),
    #fff;
  box-shadow: 0 0 0 1px rgba(19, 37, 38, 0.12);
}
.drop-scene-sign em,
.drop-scene-phone em,
.drop-scene-phone small {
  color: #536766;
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}
.drop-scene-phone strong {
  max-width: 12ch;
  font-size: 18px;
  line-height: 1.12;
}
.drop-phone-thumbs img {
  display: block;
  width: 100%;
  min-width: 0;
  height: auto;
  aspect-ratio: 1;
  border-radius: 9px;
  object-fit: cover;
}
.drop-scene-phone button {
  min-height: 38px;
  width: 100%;
  border: 0;
  border-radius: 999px;
  background: #0b5458;
  color: #fffdf8;
  font-size: 12px;
  font-weight: 850;
}
.guest-prompt-card span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}
.guest-prompt-card strong {
  color: #173536;
  font-family: var(--display);
  font-size: clamp(24px, 5vw, 34px);
  line-height: 1.08;
}
.guest-shared-photos h2 {
  margin: 0;
  color: #153234;
  font-family: var(--display);
  font-size: clamp(28px, 5vw, 42px);
  line-height: 1.05;
}
.guest-shared-grid figure {
  display: grid;
  gap: 6px;
  margin: 0;
}
.guest-shared-grid img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  object-fit: cover;
  background: #efe8dc;
}
.guest-shared-grid figcaption {
  overflow: hidden;
  color: #63706f;
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-rule-list span {
  border: 1px solid rgba(194, 135, 45, 0.24);
  border-radius: 8px;
  background: rgba(255, 247, 231, 0.52);
  color: #425756;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
  padding: 10px 12px;
}
.drop-studio .drop-step:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.drop-studio .drop-step > input,
.drop-studio .drop-step > select,
.drop-studio .drop-step > textarea,
.drop-studio .drop-choice-grid,
.drop-studio .drop-look-grid {
  grid-column: 1;
}
.drop-studio .drop-form input,
.drop-studio .drop-form select,
.drop-studio .drop-form textarea {
  min-height: 48px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 650;
}
.drop-studio .drop-choice-grid.compact,
.drop-studio .drop-segment-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border: 1px solid #d8cbbc;
  border-radius: 10px;
  overflow: hidden;
}
.drop-studio .drop-choice-grid.compact label,
.drop-studio .drop-segment-grid label {
  min-height: 42px;
  border: 0;
  border-left: 1px solid #d8cbbc;
  border-radius: 0;
  padding: 0;
}
.drop-studio .drop-choice-grid.compact label:first-child,
.drop-studio .drop-segment-grid label:first-child {
  border-left: 0;
}
.drop-studio .drop-look-grid label {
  min-height: 112px;
  border-radius: 10px;
  padding: 8px;
}
body[data-event-look="warm-film"] .drop-studio .drop-phone-thumbs img {
  filter: sepia(0.25) saturate(1.18) contrast(0.96) brightness(1.03);
}
body[data-event-look="black-white"] .drop-studio .drop-phone-thumbs img {
  filter: grayscale(1) contrast(1.08);
}
body[data-event-look="party-flash"] .drop-studio .drop-phone-thumbs img {
  filter: saturate(1.35) contrast(1.08) brightness(1.08);
}
.drop-studio .drop-form > .drop-primary {
  margin-top: 18px;
}
.drop-studio .drop-phone-thumbs img {
  border-radius: clamp(7px, 2.8cqw, 11px);
}
.drop-studio .drop-scene-phone button {
  min-height: clamp(34px, 11.5cqw, 44px);
  width: 100%;
  border: 0;
  border-radius: clamp(7px, 2.8cqw, 11px);
  background: #0d5240;
  color: #fffdf8;
  font-size: clamp(11px, 3.7cqw, 14px);
  font-weight: 850;
}

/* Mobile-first (2026-07-25): the segmented control's cell dividers had two
   stacked phone tiers (<=700 added a top rule, <=460 also dropped the left
   rule). Flattened to base = the <=460 tier, then min-461 restores the
   vertical dividers, then min-701 removes the top rule entirely — which is
   the desktop `border: 0` of the base rule above.
   The old <=460 `:first-child { border-top: 0 }` is folded into the base
   `:nth-child(-n+2)` rule, which already covers the first cell (and won on
   specificity in the original stack). */
.drop-studio .drop-choice-grid.compact label,
.drop-studio .drop-segment-grid label {
  border-left: 0;
  border-top: 1px solid #d8cbbc;
}
.drop-studio .drop-choice-grid.compact label:nth-child(-n+2),
.drop-studio .drop-segment-grid label:nth-child(-n+2) {
  border-top: 0;
}

@media (min-width: 461px) {
.drop-studio .drop-choice-grid.compact label,
  .drop-studio .drop-segment-grid label {
    border-left: 1px solid #d8cbbc;
  }
.drop-studio .drop-choice-grid.compact label:first-child,
  .drop-studio .drop-segment-grid label:first-child {
    border-left: 0;
  }
}

@media (min-width: 701px) {
.drop-studio .drop-choice-grid.compact label,
  .drop-studio .drop-segment-grid label {
    border-top: 0;
  }
  /* The base `:nth-child(-n+2)` rule above is (0,4,1) and so outranks
     `.night-surface .drop-rules-section .drop-choice-grid label
     { border-color: #d8cbbc }` further down this sheet. In the original that
     nth-child rule lived inside the old 700px-and-below query and simply
     did not exist up here, so the night rule supplied the border-top COLOUR
     (the
     width is 0 either way at these widths — the colour is invisible, but
     getComputedStyle reports it and parity compares it).
     This restore is written at EXACTLY (0,4,1), the same specificity as the
     rule it neutralises: anything higher would also beat
     `…label:has(input:checked)` (0,4,2) and repaint the selected chip's
     border from teal to bone. `.drop-segment-grid` is deliberately NOT
     listed — the night rule never matched it, so its labels correctly keep
     `currentcolor`. */
.drop-studio .drop-choice-grid.compact label:nth-child(-n+2) {
    border-top-color: #d8cbbc;
  }
}
body.night-surface {
  background:
    radial-gradient(circle at 32% 20%, rgba(233, 186, 82, 0.16), transparent 32%),
    radial-gradient(circle at 78% 5%, rgba(232, 104, 74, 0.08), transparent 30%),
    linear-gradient(180deg, #06100b 0%, var(--night) 44%, #07130d 100%);
  color: var(--night-paper);
}
.night-surface .drop-site-header {
  border-bottom-color: rgba(233, 186, 82, 0.22);
  background: rgba(10, 24, 18, 0.94);
}
.night-surface .brand-name,
.night-surface .product-label,
.night-surface .header-link {
  color: rgba(247, 243, 234, 0.82);
}
.night-surface .language-switch {
  border-color: rgba(233, 186, 82, 0.28);
  background: rgba(16, 37, 27, 0.76);
}
.night-surface .language-switch span {
  background: var(--candle);
  color: #10140d;
}
.night-surface .language-switch a {
  color: rgba(247, 243, 234, 0.74);
}
.night-surface .header-action {
  min-height: 48px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #f5c765, var(--candle));
  color: #10140d;
  padding: 0 24px;
  font-size: 16px;
  box-shadow: 0 18px 42px rgba(233, 186, 82, 0.18);
}
.night-surface .drop-primary {
  min-height: 56px;
  border-radius: 8px;
  border: 0;
  background: linear-gradient(180deg, #f5c765, var(--candle));
  color: #10140d;
  padding: 0 28px;
  font-size: 17px;
  box-shadow: 0 18px 42px rgba(233, 186, 82, 0.18);
}
.night-surface .header-action:focus-visible,
.night-surface .drop-primary:focus-visible,
.night-surface .drop-secondary:focus-visible {
  outline: 3px solid rgba(233, 186, 82, 0.5);
  outline-offset: 3px;
}
.night-drop-shell {
  width: min(1600px, 100%);
  padding: clamp(28px, 4vw, 58px) clamp(18px, 3vw, 42px) clamp(48px, 7vw, 104px);
}
.living-drop-hero {
  display: grid;
  grid-template-columns: minmax(360px, 0.85fr) minmax(560px, 1.08fr);
  gap: clamp(24px, 4vw, 58px);
  align-items: center;
  min-height: calc(100vh - 132px);
  padding-bottom: clamp(28px, 5vw, 72px);
}
.living-copy h1 em,
.night-section-head h1 em,
.night-section-head h2 em {
  color: var(--candle);
  font-family: var(--serif-accent);
  font-style: italic;
  font-weight: 500;
}
.living-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.night-surface .drop-secondary {
  border: 1px solid rgba(247, 243, 234, 0.28);
  background: transparent;
  color: var(--night-paper);
  min-height: 56px;
  border-radius: 8px;
  padding: 0 28px;
  font-size: 17px;
  box-shadow: none;
}
.living-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.3vw, 16px);
}
.living-grid figure {
  position: relative;
  aspect-ratio: 1;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(233, 186, 82, 0.2);
  border-radius: 8px;
  background: rgba(247, 243, 234, 0.05);
  opacity: 0.18;
  transform: translateY(14px) scale(0.96);
  transition: opacity 520ms ease, transform 640ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 420ms ease, box-shadow 420ms ease;
}
.living-grid figure:not(.is-visible) {
  border-color: rgba(126, 154, 140, 0.28);
  background:
    linear-gradient(135deg, rgba(126, 154, 140, 0.08), rgba(247, 243, 234, 0.04)),
    rgba(10, 24, 18, 0.56);
  opacity: 1;
}
.living-grid figure:not(.is-visible) img {
  opacity: 0;
}
.living-grid figure.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.living-grid figure.is-newest {
  border-color: rgba(233, 186, 82, 0.94);
  box-shadow: 0 0 26px rgba(233, 186, 82, 0.25);
}
.living-grid img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.living-grid figcaption {
  position: absolute;
  top: 10px;
  right: 10px;
  border: 1px solid rgba(233, 186, 82, 0.5);
  border-radius: 999px;
  background: rgba(10, 24, 18, 0.82);
  color: var(--candle);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 850;
}
.living-grid figure:not(.is-newest) figcaption {
  display: none;
}
.night-section-head {
  display: grid;
  gap: 12px;
  margin-bottom: clamp(18px, 3vw, 32px);
}
.night-section-head h1,
.night-section-head h2 {
  margin: 0;
  color: var(--night-paper);
  font-family: var(--display);
  font-size: clamp(34px, 4.7vw, 68px);
  line-height: 1;
}
.night-section-head p {
  max-width: 720px;
  margin: 0;
  color: rgba(247, 243, 234, 0.72);
  font-size: 18px;
}
.night-steps,
.drop-rules-section,
.night-trust-section,
.drop-pricing,
.night-faq {
  border-top: 1px solid rgba(233, 186, 82, 0.2);
  padding: clamp(44px, 6vw, 82px) 0;
}
.night-step-grid,
.night-trust-grid,
.night-faq .faq-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.night-trust-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.night-steps > .night-section-head,
.night-step-grid,
.drop-rules-section > .night-section-head,
.drop-rules-layout,
.night-trust-section > .night-section-head,
.night-trust-grid,
.drop-pricing > .night-section-head,
.night-faq > .night-section-head,
.night-faq .faq-grid {
  width: min(1200px, 100%);
  margin-right: auto;
  margin-left: auto;
}
.night-step-grid article,
.night-trust-grid article,
.night-faq article {
  border: 1px solid rgba(126, 154, 140, 0.28);
  border-radius: 8px;
  background: transparent;
  padding: clamp(18px, 2.5vw, 28px);
}
.night-step-grid span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(233, 186, 82, 0.55);
  border-radius: 999px;
  color: var(--candle);
  font-weight: 850;
}
.night-step-grid h3,
.night-trust-grid h3,
.night-faq h3 {
  margin: 14px 0 8px;
  color: var(--night-paper);
  font-size: 22px;
  line-height: 1.1;
}
.night-step-grid p,
.night-trust-grid p,
.night-faq p {
  margin: 0;
  color: rgba(247, 243, 234, 0.72);
  font-size: 16px;
  line-height: 1.65;
}
.drop-rules-layout {
  display: grid;
  grid-template-columns: minmax(0, 740px) minmax(280px, 330px);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  justify-content: center;
}
.night-surface .drop-rules-section .drop-form {
  display: grid;
  gap: 0;
  border-color: rgba(205, 194, 179, 0.94);
  background: rgba(255, 253, 248, 0.94);
  color: #173536;
  box-shadow: 0 26px 72px rgba(0, 0, 0, 0.24);
}
.night-surface .drop-rules-section .drop-step {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.night-surface .drop-rules-section .drop-form h3 {
  color: #153234;
}
.night-surface .drop-rules-section .drop-form label,
.night-surface .drop-rules-section .drop-form legend,
.night-surface .drop-rules-section .drop-form label > span em,
.night-surface .drop-rules-section .drop-choice-grid em,
.night-surface .drop-rules-section .drop-toggle-line em {
  color: #667372;
}
.night-surface .drop-rules-section .drop-form strong,
.night-surface .drop-rules-section .drop-choice-grid span,
.night-surface .drop-rules-section .drop-look-grid span {
  color: #173536;
}
.night-surface .drop-share-card > p,
.night-surface .drop-share-card .drop-checklist li {
  color: rgba(247, 243, 234, 0.78);
}
.night-surface .drop-share-card .drop-checklist strong {
  color: var(--night-paper);
}
.night-surface .drop-rules-section .drop-choice-grid label,
.night-surface .drop-rules-section .drop-look-grid label,
.night-surface .drop-rules-section .drop-toggle-line {
  border-color: #d8cbbc;
  background: rgba(255, 255, 255, 0.78);
}
.night-surface .drop-form-note,
.night-surface .drop-status {
  color: var(--candle);
}
@media (prefers-reduced-motion: reduce) {
.living-grid figure {
    transition: none;
    transform: none;
  }
}

/* Mobile-first (2026-07-25): stacked single-column night layout is the
   base; the wide compositions return at min-width. */
.living-drop-hero,
.drop-rules-layout {
  grid-template-columns: 1fr;
}

@media (min-width: 1080px) {
.living-drop-hero {
    grid-template-columns: minmax(360px, 0.85fr) minmax(560px, 1.08fr);
  }
.drop-rules-layout {
    grid-template-columns: minmax(0, 740px) minmax(280px, 330px);
  }
}
.night-surface .site-header {
  position: static;
}
.living-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.night-step-grid,
.night-trust-grid,
.night-faq .faq-grid {
  grid-template-columns: 1fr;
}

@media (min-width: 761px) {
.night-surface .site-header {
    position: sticky;
  }
.living-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
.night-step-grid,
  .night-faq .faq-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
.night-trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* The phone header-link pill. Above 680 the night link has no border and no
   background of its own (core.css declares those only inside its own <=680
   block), so the desktop side is the initial `currentcolor` / `transparent`,
   with the colour handed back to `.night-surface .header-link`'s value. */
.night-surface .site-header .header-link {
  border-color: rgba(126, 154, 140, 0.35);
  background: rgba(16, 37, 27, 0.82);
  color: rgba(247, 243, 234, 0.85);
}

@media (min-width: 681px) {
.night-surface .site-header .header-link {
    border-color: currentcolor;
    background: transparent;
    color: rgba(247, 243, 234, 0.82);
  }
}
/* Panel content must not force the track wider than its max (protects the
   copy column's share of the row). */

/* --- Defect 2: "Three steps" heading sat on the step-grid hairline --------
   Give the steps band a designed rhythm: heading breathing room above the
   connected step row, balanced top/bottom band padding. */
.night-steps > .night-section-head {
  margin-bottom: clamp(24px, 3vw, 34px);
}
.night-steps {
  padding-top: clamp(48px, 6vw, 84px);
  padding-bottom: clamp(48px, 6vw, 84px);
}
/* --- Defect 5 sweep: cramped display type / zero-margin headings ----------
   Lift a few display line-heights off the < 1.05 danger zone and give
   section heads that carried no bottom margin a little rhythm. */
.night-section-head h1,
.night-section-head h2 {
  line-height: 1.04;
}
/* Rules + trust + pricing + faq section heads: ensure the H2 never crowds
   the grid/hairline directly beneath it. */
.drop-rules-section > .night-section-head,
.night-trust-section > .night-section-head,
.drop-pricing > .night-section-head,
.night-faq > .night-section-head {
  margin-bottom: clamp(20px, 3vw, 32px);
}
/* Cross-page collision fix: styles.css (root rail system) sets
   `.night-steps .night-step-grid { width:100% }` at (0,2,0), which beats the
   (0,1,0) rail rule above on photo-drop pages (they have no .night-steps-inner
   wrapper). Match specificity so the grid shares the heading's 1200px rail. */
.night-steps > .night-step-grid {
  width: min(1200px, 100%);
  margin-right: auto;
  margin-left: auto;
}
.admin-upgrade-card .drop-actions {
  margin-bottom: 10px;
}
.upload-card-locked strong {
  font-size: 13.5px;
}
.upload-card-locked span {
  font-size: 12px;
  color: var(--muted);
}
/* ============================================================
   2026-07-05 host dashboard (admin) — night stage
   Design: editorial hero (event name as the headline), one pulse
   number, phase-aware actions, photos on dark, quiet chrome.
   ============================================================ */

.admin-night {
  background:
    radial-gradient(circle at 85% -4%, rgba(233, 186, 82, 0.1), transparent 34%),
    linear-gradient(180deg, #06100b 0%, var(--night) 40%, #081310 100%);
  color: var(--night-paper);
}
.admin-night .admin-shell {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 52px) clamp(18px, 3vw, 32px) 90px;
}
.admin-hero {
  padding: clamp(8px, 2vw, 22px) 0 6px;
}
.admin-hero .drop-label {
  color: rgba(233, 186, 82, 0.85);
}
.admin-night h1 {
  margin: 6px 0 14px;
  font-family: var(--display);
  font-size: clamp(34px, 5.4vw, 56px);
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: var(--night-paper);
}
.admin-pulse strong {
  font-size: 17px;
  font-weight: 650;
  color: rgba(247, 243, 234, 0.92);
  font-variant-numeric: tabular-nums;
}
.admin-pulse span {
  font-size: 15.5px;
  color: rgba(247, 243, 234, 0.72);
}
.admin-test-card strong {
  display: block;
  margin-bottom: 3px;
  font-size: 15.5px;
}
.admin-test-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(247, 243, 234, 0.75);
}
.admin-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 10px 14px;
  border: 1px solid rgba(247, 243, 234, 0.24);
  border-radius: 14px;
  background: rgba(16, 37, 27, 0.42);
  color: var(--night-paper);
  font-size: 15px;
  font-weight: 650;
  text-align: center;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}
.admin-action:hover {
  border-color: rgba(233, 186, 82, 0.55);
  transform: translateY(-1px);
}
/* upgrade card restyled for night */
.admin-night .admin-upgrade-card {
  margin: 0 0 26px;
  border: 1px solid rgba(233, 186, 82, 0.3);
  background: rgba(233, 186, 82, 0.07);
}
.admin-night .drop-status {
  color: rgba(247, 243, 234, 0.75);
}
.admin-undo-toast button {
  border: 0;
  border-radius: 999px;
  background: rgba(233, 186, 82, 0.16);
  color: var(--candle);
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
/* night contrast for the detail chips + warning (they carried day styles) */
.admin-night .admin-rule-list span,
.admin-night .admin-status-list span {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(247, 243, 234, 0.16);
  border-radius: 9px;
  background: rgba(6, 16, 11, 0.45);
  color: rgba(247, 243, 234, 0.78);
  padding: 8px 12px;
  font-size: 12.5px;
  line-height: 1.4;
}
.admin-night .drop-warning strong,
.admin-night .drop-warning span {
  color: rgba(247, 243, 234, 0.88);
  background: transparent;
}
.admin-night .drop-warning span {
  display: block;
  margin-top: 6px;
  color: rgba(247, 243, 234, 0.65);
  font-weight: 500;
}
.guest-shell {
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(22px, 5vw, 40px) 20px 70px;
}
.guest-night h1 {
  margin: 8px 0 10px;
  font-family: var(--display);
  font-size: clamp(30px, 8vw, 42px);
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.06;
  color: var(--night-paper);
}
.guest-prompt-card strong.is-shuffling {
  animation: guest-prompt-in 320ms ease;
}
@keyframes guest-prompt-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}
.guest-prompt-shuffle {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(233, 186, 82, 0.5);
  border-radius: 50%;
  background: transparent;
  color: var(--candle);
  cursor: pointer;
  transition: transform 200ms ease, background 140ms ease;
}
.guest-prompt-shuffle:active {
  transform: rotate(180deg);
}
.guest-roll span {
  width: 18px;
  height: 24px;
  border: 1.5px solid rgba(247, 243, 234, 0.3);
  border-radius: 4px;
  background: transparent;
  transition: background 300ms ease, border-color 300ms ease;
}
.guest-roll span.is-used {
  border-color: var(--candle);
  background: linear-gradient(180deg, #f5c765, var(--candle));
}
.guest-picker-main strong {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  color: var(--night-paper);
}
.guest-picker small {
  font-size: 13px;
  color: rgba(247, 243, 234, 0.6);
}
.guest-send {
  min-height: 54px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #f5c765, var(--candle));
  color: #241b07;
  font-family: var(--body);
  font-size: 16.5px;
  font-weight: 750;
  cursor: pointer;
  transition: filter 140ms ease, transform 140ms ease;
}
.guest-send:active {
  transform: scale(0.99);
}
.guest-note-details summary {
  font-size: 14px;
  color: rgba(247, 243, 234, 0.7);
  cursor: pointer;
  list-style-position: inside;
  padding: 9px 0;
}
.guest-note-details label {
  display: grid;
  gap: 5px;
  margin-top: 12px;
  font-size: 13.5px;
  color: rgba(247, 243, 234, 0.75);
}
.guest-note-details input,
.guest-note-details textarea {
  border: 1px solid rgba(247, 243, 234, 0.22);
  border-radius: 10px;
  background: rgba(6, 16, 11, 0.55);
  color: var(--night-paper);
  padding: 10px 12px;
  font-size: 16px;
  font-family: var(--body);
}
@keyframes guest-pop {
  0% { opacity: 0; transform: scale(0.94); }
  100% { opacity: 1; transform: scale(1); }
}
.guest-night .guest-shared-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(247, 243, 234, 0.12);
  animation: guest-wall-in 420ms ease backwards;
}
@keyframes guest-wall-in {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: none; }
}
.guest-foot p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(247, 243, 234, 0.5);
}
/* event looks tint the accents, night base stays */
.guest-night[data-event-look="warm-film"] {
  background:
    radial-gradient(circle at 12% -6%, rgba(233, 186, 82, 0.2), transparent 34%),
    linear-gradient(180deg, #0a0e08 0%, #12160c 44%, #0a0e08 100%);
}
.guest-night[data-event-look="black-white"] .guest-prompt-card,
.guest-night[data-event-look="black-white"] .guest-picker {
  border-color: rgba(247, 243, 234, 0.4);
  background: rgba(247, 243, 234, 0.05);
}
.guest-night[data-event-look="black-white"] .guest-picker-main,
.guest-night[data-event-look="black-white"] .guest-prompt-card span {
  color: rgba(247, 243, 234, 0.85);
}
.guest-night[data-event-look="party-flash"] {
  background:
    radial-gradient(circle at 85% -6%, rgba(232, 104, 74, 0.16), transparent 32%),
    linear-gradient(180deg, #06100b 0%, var(--night) 44%, #081310 100%);
}
.guest-night[data-event-look="party-flash"] .guest-prompt-card {
  border-color: rgba(232, 104, 74, 0.5);
  background: rgba(232, 104, 74, 0.08);
}
.guest-credit a {
  color: rgba(247, 243, 234, 0.42);
  text-decoration: none;
  display: inline-block;
  padding: 12px 8px;
  margin: -12px -8px;
}
@keyframes pd-count-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
/* The one signature charm moment: a candle-glow ring when photos land. */
@keyframes pd-candle-pop {
  0% { box-shadow: 0 0 0 0 rgba(233, 186, 82, 0.55); }
  70% { box-shadow: 0 0 0 26px rgba(233, 186, 82, 0); }
  100% { box-shadow: 0 0 0 0 rgba(233, 186, 82, 0); }
}
.custom-prompts-fields input,
.event-date-row input {
  width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid rgba(247, 243, 234, 0.18);
  background: rgba(247, 243, 234, 0.05);
  color: var(--paper, #f7f3ea);
  font: inherit;
  font-size: 16px;
}
.handoff-ceremony h2 {
  margin: 10px 0 14px;
  font-size: clamp(30px, 4.5vw, 44px);
  letter-spacing: -0.02em;
  color: var(--paper, #f7f3ea);
}
.venue-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.venue-top h1 {
  margin: 6px 0 0;
  font-size: clamp(28px, 3.4vw, 52px);
  letter-spacing: -0.02em;
  color: var(--paper, #f7f3ea);
}
.venue-qr svg,
.venue-qr img,
.venue-qr canvas {
  display: block;
  width: 100%;
  height: auto;
}
#upgradeActions .upgrade-offer,
#heldSheetActions .upgrade-offer {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 12px;
  padding-bottom: 12px;
}
#upgradeActions .upgrade-benefit,
#heldSheetActions .upgrade-benefit {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0.74;
}
.device-drop-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 14px;
  min-height: 48px;
  padding: 11px 16px;
  border: 1px solid rgba(247, 243, 234, 0.16);
  border-radius: 12px;
  background: rgba(6, 16, 11, 0.45);
  color: var(--night-paper, #f7f3ea);
  text-decoration: none;
  transition: border-color 140ms ease, transform 140ms ease;
}
.device-drop-row:hover,
.device-drop-row:focus-visible {
  border-color: rgba(233, 186, 82, 0.55);
  transform: translateY(-1px);
}
.device-drop-row strong {
  font-size: 16px;
  font-weight: 750;
}
.device-drop-row span {
  font-size: 13px;
  color: rgba(247, 243, 234, 0.6);
}
/* ============================================================
   2026-07-10 conversion: held-card tap-to-upgrade sheet (Mario:
   "one tap on the hidden card should take our customer to the
   paid tiers"). Contextual paywall at the moment of intent; the
   sheet reuses appendUpgradeOffers so it can never disagree with
   the upgrade panel. Admin page is always .admin-night, so the
   sheet is styled for the night surface only.
   ============================================================ */

.upload-card-locked[role="button"] {
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.upload-card-locked[role="button"]:hover,
.upload-card-locked[role="button"]:focus-visible {
  border-color: rgba(233, 186, 82, 0.7);
  background: rgba(233, 186, 82, 0.12);
  transform: translateY(-1px);
}
.upload-card-locked[role="button"]:focus-visible {
  outline: 2px solid rgba(233, 186, 82, 0.8);
  outline-offset: 2px;
}
.held-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  background: rgba(4, 14, 10, 0.66);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.held-sheet {
  width: 100%;
  max-width: 430px;
  border: 1px solid rgba(233, 186, 82, 0.35);
  border-radius: 20px;
  background: #10241b;
  padding: 24px 20px calc(18px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  animation: heldSheetIn 0.26s ease;
}
.held-sheet:focus {
  outline: none;
}
.held-sheet h3 {
  margin: 0 0 16px;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #f7f3ea;
}
.held-sheet .drop-actions {
  margin-bottom: 12px;
}
.held-sheet small {
  display: block;
  color: rgba(247, 243, 234, 0.62);
}
.held-sheet-close {
  width: 100%;
  margin-top: 14px;
  padding: 12px;
  border: none;
  border-radius: 12px;
  background: transparent;
  font-size: 14px;
  color: rgba(247, 243, 234, 0.7);
  cursor: pointer;
}
.held-sheet-close:hover,
.held-sheet-close:focus-visible {
  color: #f7f3ea;
  background: rgba(247, 243, 234, 0.06);
}
body.held-sheet-open {
  overflow: hidden;
}
@keyframes heldSheetIn {
  from {
    transform: translateY(16px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (min-width: 720px) {
.held-sheet-backdrop {
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
.held-sheet {
    animation: none;
  }
}
.admin-simple .guide-card {
  margin: 0 0 22px;
  padding: 20px 18px 16px;
  border: 1px solid rgba(233, 186, 82, 0.4);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(233, 186, 82, 0.16), rgba(233, 186, 82, 0.05));
}
.admin-simple .guide-dots span.on {
  color: rgba(233, 186, 82, 0.95);
}
.admin-simple .guide-dots span.on i {
  background: #e9ba52;
}
.admin-simple .job-card {
  margin: 0 0 16px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(247, 243, 234, 0.13);
  border-radius: 18px;
  background: #10241b;
}
.admin-simple .admin-more {
  margin: 26px 0 30px;
  border: 1.5px dashed rgba(247, 243, 234, 0.28);
  border-radius: 16px;
}
.admin-simple .admin-more[open] summary > span::after {
  content: " ▴";
}

@media (min-width: 720px) {
.admin-simple .guide-card,
  .admin-simple .job-card,
  .admin-simple .admin-more,
  .admin-simple .admin-test-card,
  .admin-simple .admin-upgrade-card,
  /* Hero, handoff ceremony, and closing vow share the centered card
     rail — at 1440 they sat on the shell's left edge ~230px off the
     card column (brand audit 2026-07-23, DRIFT-1). */
  .admin-simple .admin-hero,
  .admin-simple .handoff-ceremony,
  .admin-simple #adminVow {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}
.drop-wizard .wiz-chips button.on {
  background: #e9ba52;
  border-color: #e9ba52;
  color: #241a05;
}
/* ============================================================
   2026-07-12 full-product audit fixes: keyboard focus on dark
   surfaces, and the 48px senior target floor on the remaining
   dashboard/wizard controls.
   ============================================================ */

.admin-simple .guide-held:focus-visible,
.admin-simple .admin-action:focus-visible,
.admin-undo-toast button:focus-visible,
.drop-wizard .wiz-back:focus-visible {
  outline: 2px solid rgba(233, 186, 82, 0.8);
  outline-offset: 2px;
}
.studio-chip.is-selected {
  background: #e9ba52;
  border-color: #e9ba52;
  color: #241a05;
}

/* 26px of edge padding is the phone base (18px read cramped). Above 680 the
   gutter goes back to whichever shell rule owned it, and there are THREE
   of them at equal specificity, decided by source order: `.drop-shell`
   (early), `.night-drop-shell` (mid), `.guest-shell` (late). Real pages
   carry two of those classes at once (`drop-shell night-drop-shell` on the
   night surfaces, `drop-shell guest-shell` on the guest upload), so all
   three must be restored here, IN THEIR ORIGINAL RELATIVE ORDER —
   restoring only `.drop-shell` widens every night and guest surface,
   because this block sits after both of the other two. */
.drop-shell {
  padding-right: 26px;
  padding-left: 26px;
}

@media (min-width: 681px) {
.drop-shell {
    padding-right: clamp(22px, 4.5vw, 70px);
    padding-left: clamp(22px, 4.5vw, 70px);
  }
.night-drop-shell {
    padding-right: clamp(18px, 3vw, 42px);
    padding-left: clamp(18px, 3vw, 42px);
  }
.guest-shell {
    padding-right: 20px;
    padding-left: 20px;
  }
}
.memorial-arrival .drop-pricing:not(.memorial-pricing),
.memorial-arrival .night-faq,
.memorial-arrival .drop-studio .drop-scene-phone {
  display: none;
}
.album-entry .drop-status.is-error {
  color: #f3a18d;
}
/* ============================================================
   mobile premium r1 — 2026-07-20 (mobile-first doctrine round 1)
   Base styles ARE the phone. Native-feel tap feedback, small
   viewport units, safe areas, overscroll containment, and photo
   load shimmer. Additive block; no selectors edited above.
   ============================================================ */

html {
  background: #0a1812;
  -webkit-text-size-adjust: 100%;
}
:where(a, button, input, select, textarea, summary, [role="button"]) {
  -webkit-tap-highlight-color: transparent;
}
:where(a, button, summary, [role="button"]) {
  touch-action: manipulation;
}
:where(button, summary, [role="button"]) {
  -webkit-user-select: none;
  user-select: none;
}
/* Pressed state: the sub-100ms scale is what native buttons do.
   :where() keeps specificity at zero so no existing rule loses. */
:where(button, [role="button"], .drop-primary, .drop-secondary, .admin-action, .header-action):not(:disabled) {
  transition:
    transform 90ms ease,
    border-color 140ms ease,
    background 140ms ease,
    opacity 140ms ease;
}
:where(button, [role="button"], .drop-primary, .drop-secondary, .admin-action, .header-action):not(:disabled):active {
  transform: scale(0.97);
}
/* Full-screen overlays must not chain scroll to the page behind
   them (rubber-band escape / accidental pull-to-refresh). */
.album-viewer,
.held-sheet-backdrop,
.venue-screen {
  overscroll-behavior: contain;
}
/* Photo load shimmer: JS marks tiles pd-wait on create and pd-done
   on load/error; without JS neither class exists and nothing hides. */
@keyframes pdTilePulse {
  0%,
  100% {
    opacity: 0.55;
  }

  50% {
    opacity: 1;
  }
}
.album-photo.pd-wait,
.upload-card.pd-wait img {
  animation: pdTilePulse 1.4s ease-in-out infinite;
}
.pd-wait .pd-fade,
img.pd-fade {
  opacity: 0;
}
.pd-fade {
  transition: opacity 280ms ease;
}
.pd-done .pd-fade {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
.album-photo.pd-wait,
  .upload-card.pd-wait img {
    animation: none;
  }
.pd-fade {
    transition: none;
  }
}
/* ============================================================
   one-row mobile header — 2026-07-20 (Mario's ruling after
   Luma/Partiful reference review). Base = phone: lockup left,
   one gold CTA right, nav links demoted to the page footer,
   language switch collapses to the other-language pill only.
   Guest and album headers (centered lockup, no actions) are
   excluded. min-width blocks restore the desktop composition.
   ============================================================ */

.drop-site-header:not(.guest-header):not(.album-header) {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
}
.drop-site-header:not(.guest-header):not(.album-header) .header-actions {
  display: flex;
  width: auto;
  align-items: center;
  gap: 10px;
  flex: none;
}
/* Pages whose header carries a CTA demote their nav links on the
   phone; the sign page (email link only, no CTA) keeps its link.
   No :has() support = links stay visible — graceful degradation. */
.drop-site-header:has(.header-action) .header-link {
  display: none;
}
/* Language pill shows only the language you can switch TO. */
.drop-site-header:not(.guest-header):not(.album-header) .language-switch span {
  display: none;
}
.drop-site-header:not(.guest-header):not(.album-header) .language-switch a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
}
/* Compact gold CTA on the phone row; (0,3,0) beats the 48px
   night rule at (0,2,0). */
.night-surface .drop-site-header .header-action {
  min-height: 42px;
  padding: 0 18px;
  font-size: 15px;
  box-shadow: 0 10px 26px rgba(233, 186, 82, 0.16);
}
/* Headers that carry a language switch (create, memorials) drop
   their CTA on the phone — lockup + language pill is the whole
   row, and the page's own hero/wizard holds the primary action.
   Admin keeps its short "New drop". */
.drop-site-header:has(.language-switch) .header-action {
  display: none;
}
/* Lockup anchors the row: glyph up from the old 27px, optically
   centered by the row's align-items. */
.drop-site-header:not(.guest-header):not(.album-header) .brand-photodrop .pd-glyph {
  width: 32px;
  height: 32px;
}
.drop-site-header:not(.guest-header):not(.album-header) .brand-photodrop .pd-word {
  font-size: 18px;
}

@media (min-width: 1080px) {
/* Desktop header restores at 1080px, NOT 720px — same reasoning as the
   root header (styles.css): the full row needs ~880px and the 720-1079
   band clipped the CTA (Mario's report, 2026-07-23). */
/* Explicit inline-flex, NOT `revert`: revert = UA inline, blockified
   as a flex item, so text rode the top of the box (2026-07-30, same
   fix as the root header). */
.drop-site-header:has(.header-action) .header-link {
    display: inline-flex;
  }
.drop-site-header:has(.language-switch) .header-action {
    display: inline-flex;
  }
.drop-site-header:not(.guest-header):not(.album-header) .language-switch span {
    display: inline-flex;
  }
.night-surface .drop-site-header .header-action {
    min-height: 48px;
    padding: 0 24px;
    font-size: 16px;
    box-shadow: 0 18px 42px rgba(233, 186, 82, 0.18);
  }
.drop-site-header:not(.guest-header):not(.album-header) .brand-photodrop .pd-glyph {
    width: 30px;
    height: 30px;
  }
.drop-site-header:not(.guest-header):not(.album-header) .brand-photodrop .pd-word {
    font-size: 19px;
  }
}

@media (min-width: 1200px) {
.drop-site-header:not(.guest-header):not(.album-header) .brand-photodrop .pd-glyph {
    width: 38px;
    height: 38px;
  }
.drop-site-header:not(.guest-header):not(.album-header) .brand-photodrop .pd-word {
    font-size: 23px;
  }
}
/* Quiet page footer that receives the demoted help link. */
.drop-page-foot {
  margin-top: clamp(38px, 7vw, 72px);
  border-top: 1px solid rgba(247, 243, 234, 0.13);
  padding: 22px 20px calc(26px + env(safe-area-inset-bottom, 0px));
  text-align: center;
}
/* Same shape as the root's quiet footer link (root.css `.site-footer-quiet
   a`): without the inline-flex box this measured 210x20 on /photo-drop/ and
   76x20 on /photo-drop/admin/, well under the 44px touch minimum
   (2026-08-05 audit, FIX 3). `.drop-page-foot` is text-align: center, so an
   inline-level box still centers. */
.drop-page-foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  color: rgba(247, 243, 234, 0.66);
  font-size: 15px;
  text-decoration: none;
}
.drop-page-foot a:hover,
.drop-page-foot a:focus-visible {
  color: rgba(247, 243, 234, 0.92);
  text-decoration: underline;
}