/* rose-invitation editor styles: control chips, popovers, and the edit-mode
   layout overrides that flatten the scroll-staged animations so every editable
   field is visible and reachable. Everything is scoped under body.is-editing /
   body.is-previewing / .edit-* so the guest view is untouched.

   The toolbar itself — the bar, its buttons, the finalize/share and buy modals
   — and the design tokens it defines (--edit-accent, --ds-*) live in the shared
   platform chrome at /templates/_platform/toolbar.css, which loads before this
   file. The rules below consume those tokens. */

/* ---------- Inline editable fields ---------- */
/* Every editable box carries a dashed purple outline at all times, so the
   template clearly reads as "editable draft", never as the final invitation. */
[data-edit] {
  cursor: text;
  border-radius: 6px;
  outline: 2.5px dashed var(--edit-accent-faint);
  outline-offset: 3px;
  transition: outline-color 0.15s ease, background 0.15s ease;
  min-width: 1em;
}

[data-edit]:hover {
  background: var(--edit-accent-tint);
  outline-color: var(--edit-accent);
}

[data-edit]:focus {
  background: rgba(255, 255, 255, 0.75);
  outline: 3px solid var(--edit-accent);
  outline-offset: 3px;
}

[data-edit]:empty::before {
  content: attr(data-edit-placeholder);
  color: var(--edit-accent);
  opacity: 0.45;
  font-style: italic;
}

/* ---- Trial (pre-purchase "try editing") ----------------------------------
   The shopper edits the opening card for real; everything beyond the couple's
   names is locked. Locked fields carry data-locked instead of data-edit (see
   render.js), so they are genuinely not editable — this styling only makes that
   legible: a muted dashed outline and a padlock on hover. */
[data-locked] {
  cursor: not-allowed;
  border-radius: 6px;
  outline: 2px dashed rgba(120, 120, 130, 0.35);
  outline-offset: 3px;
  position: relative;
}

[data-locked]:hover {
  outline-color: rgba(120, 120, 130, 0.6);
  background: rgba(120, 120, 130, 0.06);
}

[data-locked]:hover::after {
  content: '🔒 Buy to edit';
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, -6px);
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 999px;
  background: #2b2340;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  pointer-events: none;
  z-index: 20;
}

/* Structural controls add, remove, reorder or upload CONTENT. None of that
   belongs in a trial — it's not "showing how editing feels", it's giving away
   the product. Hidden outright rather than disabled, so the trial reads as a
   clean invitation instead of a wall of dead buttons. */
body.is-trial [data-edit-input],
body.is-trial [data-edit-toggle],
body.is-trial .edit-add-card,
body.is-trial .edit-add-line,
body.is-trial .edit-add-pol,
body.is-trial .edit-line-x,
body.is-trial .edit-gal-nav,
body.is-trial .edit-restore,
body.is-trial .edit-ig-restore,
body.is-trial [data-action='gallery-photo'],
body.is-trial [data-action='gallery-add'],
body.is-trial [data-action='gallery-remove'],
body.is-trial [data-action='gallery-move'],
body.is-trial [data-action='gallery-scroll'],
body.is-trial [data-action='section-remove'],
body.is-trial [data-action='section-restore'],
body.is-trial [data-action='parent-card-add'],
body.is-trial [data-action='parent-card-remove'],
body.is-trial [data-action='ceremony-time-add'],
body.is-trial [data-action='ceremony-time-remove'],
body.is-trial [data-action='compliment-line-add'],
body.is-trial [data-action='compliment-line-remove'] {
  display: none !important;
}

/* Guest-name spots: locked, filled per guest from the share link */
.edit-guest {
  border-bottom: 2.5px dashed var(--edit-accent-soft);
  cursor: help;
  opacity: 0.85;
}

/* Shared hint text */
.edit-note {
  position: relative;
  z-index: 20;
  text-align: center;
  font: var(--font-italic) var(--font-regular) 14px var(--font-primary);
  color: var(--edit-accent);
  opacity: 0.85;
  margin: 10px auto;
  max-width: 520px;
}

/* ---------- Control chips ---------- */
.edit-chip {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 30;
  padding: 6px 12px;
  border: 1.5px solid var(--edit-accent);
  border-radius: 999px;
  background: #ffffff;
  color: var(--edit-accent);
  font: var(--font-regular) 12px var(--font-secondary);
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(95, 15, 255, 0.18);
  transition: background 0.2s ease, color 0.2s ease;
}

.edit-chip:hover {
  background: var(--edit-accent);
  color: #ffffff;
}

.edit-chip--card {
  top: -14px;
  right: 16px;
}

/* Removed-section strip with a restore button */
.edit-restore {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 26px auto;
  padding: 22px 26px;
  width: min(92vw, 640px);
  border: 3px dashed var(--edit-accent-soft);
  border-radius: 14px;
  background: var(--edit-bg);
  color: var(--edit-accent);
  font: var(--font-italic) var(--font-regular) 16px var(--font-primary);
}

.edit-restore button,
.edit-add-card button,
.edit-add-pol__box button,
.edit-ig-restore,
.edit-add-line {
  padding: 8px 16px;
  border: 1.5px solid var(--edit-accent);
  border-radius: 999px;
  background: #ffffff;
  color: var(--edit-accent);
  font: var(--font-regular) 13px var(--font-secondary);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.edit-restore button:hover,
.edit-add-card button:hover,
.edit-add-pol__box button:hover,
.edit-ig-restore:hover,
.edit-add-line:hover {
  background: var(--edit-accent);
  color: #ffffff;
}

/* Sections switched off (still shown, dimmed, in edit mode) */
.scene.edit-off > *:not(.edit-restore):not(.edit-chip) {
  display: none;
}

.scene.edit-off {
  min-height: 0 !important;
  height: auto !important;
  padding: 30px 20px !important;
  background: #fff !important;
}

/* ---------- Welcome scene, flattened ---------- */
body.is-editing .scene--welcome {
  height: auto;
}

body.is-editing .screen--welcome {
  position: relative;
  height: auto;
  flex-direction: column;
  gap: 30px;
  padding: 60px 0 70px;
}

body.is-editing .screen--welcome .invite {
  width: min(92vw, 520px);
  height: auto;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

body.is-editing .screen--welcome .invite__inner {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding: 10% 12%;
}

body.is-editing .invite__screen {
  position: static;
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.is-editing .reveal {
  position: static;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  padding: 10px 6%;
}

body.is-editing .scroll-cue {
  display: none;
}

body.is-editing .screen__gradient {
  display: none;
}

/* Florals go behind the card while editing so they never cover the
   symbol button or editable fields */
body.is-editing .screen__floral {
  z-index: 1;
}

.edit-symbol-btn {
  align-self: center;
  margin-bottom: 14px;
  padding: 6px 14px;
  border: 2.5px dashed var(--edit-accent);
  border-radius: 999px;
  background: #ffffff;
  color: var(--edit-accent);
  font: var(--font-regular) 12px var(--font-secondary);
  cursor: pointer;
}

.edit-symbol-btn:hover {
  border-style: solid;
  background: var(--edit-accent-tint);
}

/* ---------- Family cards ---------- */
body.is-editing .invite--detail,
body.is-editing .invite--detail .invite__inner > * {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

body.is-editing .invite--detail {
  overflow: visible;
}

.edit-add-card {
  width: min(92vw, 660px);
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 3px dashed var(--edit-accent-soft);
  border-radius: 28px;
  background: var(--edit-bg);
  color: var(--edit-accent);
  font: var(--font-italic) var(--font-regular) 17px var(--font-primary);
}

/* Both cards removed → dim the decorative layers so the couple sees the effect */
body.is-editing .scene--details.edit-empty .details__wash,
body.is-editing .scene--details.edit-empty .details__vine,
body.is-editing .scene--details.edit-empty .details__fountain,
body.is-editing .scene--details.edit-empty .fountain__fade {
  opacity: 0.22;
  filter: grayscale(0.6);
}

/* ---------- Date reveal ---------- */
body.is-editing .date__hint,
body.is-editing .petal-layer {
  display: none;
}

body.is-editing .scene--date {
  min-height: 0;
}

body.is-editing .petal-stage {
  height: auto;
  min-height: 300px;
  touch-action: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.is-editing .date-card {
  position: static;
  transform: none;
  gap: 18px;
}

.edit-date-field {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: var(--font-regular) 14px var(--font-secondary);
  color: var(--edit-accent);
}

.edit-date-field input,
.cere-card input[type="date"],
.cere-card input[type="time"] {
  padding: 6px 10px;
  border: 2.5px dashed var(--edit-accent-soft);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--brown);
  font: var(--font-regular) 14px var(--font-secondary);
  cursor: pointer;
}

.edit-date-field input:hover,
.cere-card input[type="date"]:hover,
.cere-card input[type="time"]:hover {
  border-color: var(--edit-accent);
}

/* ---------- Gallery ---------- */
body.is-editing .gallery__hint {
  display: none;
}

body.is-editing .polaroid {
  cursor: default;
}

/* Plain left/right scrolling while editing: visible scrollbar + drag to scroll
   (the pendulum swing physics stay exclusive to the final invitation) */
body.is-editing .gallery__scroll {
  cursor: grab;
  scrollbar-width: thin;
  scrollbar-color: var(--edit-accent-soft) transparent;
}

body.is-editing .gallery__scroll.is-dragging {
  cursor: grabbing;
  user-select: none;
}

body.is-editing .gallery__scroll::-webkit-scrollbar {
  display: block;
  height: 8px;
}

body.is-editing .gallery__scroll::-webkit-scrollbar-thumb {
  background: var(--edit-accent-faint);
  border-radius: 4px;
}

body.is-editing .gallery__scroll::-webkit-scrollbar-track {
  background: transparent;
}

.edit-gal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--edit-accent);
  border-radius: 50%;
  background: #ffffff;
  color: var(--edit-accent);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(95, 15, 255, 0.22);
  transition: background 0.2s ease, color 0.2s ease;
}

.edit-gal-nav:hover {
  background: var(--edit-accent);
  color: #ffffff;
}

.edit-gal-nav--left {
  left: 16px;
}

.edit-gal-nav--right {
  right: 16px;
}

.pol-controls {
  position: absolute;
  top: -44px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  gap: 6px;
}

.pol-controls button {
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--edit-accent);
  border-radius: 50%;
  background: #ffffff;
  color: var(--edit-accent);
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(95, 15, 255, 0.2);
  transition: background 0.2s ease, color 0.2s ease;
}

.pol-controls button:hover {
  background: var(--edit-accent);
  color: #ffffff;
}

.pol-photo-btn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(95, 15, 255, 0);
  color: #ffffff;
  font: var(--font-regular) 15px var(--font-secondary);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.polaroid__photo {
  position: relative;
}

.polaroid__photo:hover .pol-photo-btn,
.pol-photo-btn:focus-visible {
  opacity: 1;
  background: rgba(95, 15, 255, 0.3);
}

/* Empty photo slot: label always visible */
.polaroid__photo:not([style*="background-image"]) .pol-photo-btn {
  opacity: 1;
  color: var(--edit-accent);
  text-shadow: none;
}

.edit-add-pol__box {
  width: 300px;
  min-height: 425px;
  margin-top: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 3px dashed var(--edit-accent-soft);
  border-radius: 6px;
  background: var(--edit-bg);
  color: var(--edit-accent);
  font: var(--font-italic) var(--font-regular) 16px var(--font-primary);
}

@media (max-width: 700px) {
  body.is-editing .polaroid {
    padding-top: calc(var(--rope-y) + 50px);
  }
}

/* Editing shouldn't require scrolling through full-viewport empty stretches:
   sections hug their content instead of filling the screen. */
body.is-editing .scene--ceremonies,
body.is-editing .scene--end,
body.is-editing .scene--rsvp {
  min-height: 0;
}

body.is-editing .scene--end {
  padding: 40px 0;
}

/* ---------- Ceremonies: deck becomes an editable grid ---------- */
body.is-editing .deck-wrap {
  width: 100%;
}

body.is-editing .deck__splash,
body.is-editing .ceremonies__hint {
  display: none;
}

body.is-editing .deck {
  width: min(96vw, 1000px);
  height: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(88vw, 440px), 1fr));
  gap: 30px;
}

body.is-editing .cere-card {
  position: relative;
  inset: auto;
  height: 360px;
  cursor: default;
  touch-action: auto;
  user-select: text;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

body.is-editing .cere-card.is-off .cere-card__body,
body.is-editing .cere-card.is-off .cere-card__art {
  opacity: 0.35;
  filter: grayscale(0.8);
}

.cere-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1.5px solid var(--edit-accent);
  border-radius: 999px;
  background: #ffffff;
  color: var(--edit-accent);
  font: var(--font-regular) 12px var(--font-secondary);
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(95, 15, 255, 0.18);
}

.cere-toggle input {
  accent-color: var(--edit-accent);
  cursor: pointer;
}

/* Optional time: input paired with a remove (✕) button, or an add button */
.cere-card__time--edit {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cere-time-x {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border: 1px solid var(--edit-accent-soft);
  border-radius: 50%;
  background: #ffffff;
  color: var(--edit-accent);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.cere-time-x:hover {
  background: var(--edit-accent);
  color: #ffffff;
}

.cere-time-add {
  padding: 6px 14px;
  border: 2.5px dashed var(--edit-accent-soft);
  border-radius: 999px;
  background: #ffffff;
  color: var(--edit-accent);
  font: var(--font-regular) 13px var(--font-secondary);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cere-time-add:hover {
  background: var(--edit-accent);
  color: #ffffff;
  border-style: solid;
}

/* Map-link field: paste a Google / Apple Maps share link for the venue */
.cere-card__maplink {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 12px;
  max-width: 82%;
}

.cere-card__maplink > span {
  font: var(--font-semi-bold) 12px var(--font-secondary);
  color: var(--edit-accent);
}

.cere-card__maplink input {
  width: 100%;
  padding: 7px 10px;
  border: 2.5px dashed var(--edit-accent-soft);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--brown);
  font: var(--font-regular) 13px var(--font-secondary);
}

.cere-card__maplink input:hover {
  border-color: var(--edit-accent);
}

.cere-card__maplink input:focus {
  outline: none;
  border-style: solid;
  border-color: var(--edit-accent);
}

/* ---------- Compliment card ---------- */
.compliment-card {
  position: relative;
}

.compliment__line {
  position: relative;
  display: block;
}

.edit-line-x {
  margin-left: 10px;
  width: 26px;
  height: 26px;
  border: 1px solid var(--edit-accent-soft);
  border-radius: 50%;
  background: #ffffff;
  color: var(--edit-accent);
  font-size: 12px;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.compliment__line:hover .edit-line-x {
  opacity: 1;
}

.edit-line-x:hover {
  background: var(--edit-accent);
  color: #ffffff;
}

.edit-add-line {
  margin-top: 18px;
}

/* ---------- Social section ---------- */
/* Stack the icon row and its helper note vertically so the note never sits
   beside the icons and pushes the layout sideways. */
body.is-editing .scene--social {
  flex-direction: column;
  gap: 16px;
}

.edit-ig-wrap {
  position: relative;
  display: inline-flex;
}

.edit-chip--ig {
  top: -10px;
  right: -10px;
  padding: 4px 9px;
}

.edit-ig-restore {
  align-self: center;
}

body.is-editing #locBtn,
body.is-editing #calBtn {
  cursor: help;
}

/* ---------- RSVP: guests only ---------- */
body.is-editing .scene--rsvp {
  flex-direction: column;
  gap: 8px;
}

body.is-editing .rsvp {
  pointer-events: none;
  opacity: 0.6;
  filter: grayscale(0.25);
}

/* ---------- Popover (symbol picker, Instagram URL) ---------- */
.edit-pop {
  position: absolute;
  z-index: 400;
  min-width: 230px;
  max-width: min(92vw, 340px);
  padding: 16px;
  border: 1.5px solid var(--edit-accent);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(95, 15, 255, 0.25);
  color: var(--brown);
  font: var(--font-regular) 13px var(--font-secondary);
}

.edit-pop h4 {
  font: var(--font-semi-bold) 14px var(--font-secondary);
  color: var(--edit-accent);
  margin-bottom: 12px;
}

.edit-pop__symbols {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.edit-pop__symbols button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 92px;
  padding: 10px 6px;
  border: 1.5px solid var(--edit-accent-faint);
  border-radius: 10px;
  background: #fff;
  color: var(--brown);
  font: var(--font-regular) 12px var(--font-secondary);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.edit-pop__symbols button:hover {
  border-color: var(--edit-accent);
}

.edit-pop__symbols button.is-current {
  border-color: var(--edit-accent);
  background: var(--edit-accent-tint);
}

.edit-pop__symbols img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.edit-pop__symbols .edit-pop__none {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed var(--edit-accent-soft);
  border-radius: 8px;
  font-size: 20px;
  color: var(--edit-accent);
  opacity: 0.6;
}

.edit-pop input[type="url"],
.edit-pop input[type="text"] {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--edit-accent-soft);
  border-radius: 8px;
  background: #fff;
  color: var(--brown);
  font: var(--font-regular) 13px var(--font-secondary);
  margin-bottom: 10px;
}

.edit-pop input[type="url"]:focus,
.edit-pop input[type="text"]:focus {
  outline: none;
  border-color: var(--edit-accent);
}

.edit-pop__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ---------- Toast (storage errors, validation nudges) ---------- */
.edit-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(8px);
  z-index: 600;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--edit-accent);
  color: #ffffff;
  font: var(--font-regular) 13px var(--font-secondary);
  box-shadow: 0 10px 26px rgba(95, 15, 255, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.edit-toast.is-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- Phone: edit-mode layout fits a narrow screen ---------- */
@media (max-width: 560px) {
  /* Nothing the editor adds should push the page sideways */
  body.is-editing {
    overflow-x: hidden;
  }

  /* Editable outlines sit tighter so they don't cross card edges */
  body.is-editing [data-edit] {
    outline-offset: 2px;
  }

  /* Chips stay clear of the viewport edge */
  body.is-editing .edit-chip {
    right: 10px;
  }

  /* Ceremonies: one full-width card per row (was overflowing the viewport) */
  body.is-editing .scene--ceremonies {
    padding: 30px 12px;
  }

  body.is-editing .deck {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  body.is-editing .cere-card {
    height: auto;
    min-height: 320px;
  }

  /* Date reveal fits without clipping */
  body.is-editing .date__main {
    font-size: 30px;
  }

  body.is-editing .edit-date-field {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Symbol picker / popovers never wider than the screen */
  .edit-pop {
    max-width: calc(100vw - 20px);
  }
}