/* =================================================================
   Cielito Lindo v2 — inline owner editor stub (Phase 1).
   The full owner-edit surface (contenteditable fields + floating
   toolbar) arrives in Phase 2, mirroring the Hundred Acre Wood
   pattern. For now this carries the editable affordance + toolbar
   styling so the markup hooks have somewhere to land. Guests never
   see any of it — the body.is-owner-editor class is only added for
   the signed-in owner.
   Mobile-first; touch targets >= 44px.
   ================================================================= */

body.has-uv-toolbar { padding-top: 56px; }

.uv-toolbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  min-height: 56px;
  box-sizing: border-box;
  background: rgba(28, 34, 42, 0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #f4f8fc;
  font-family: 'Inter', system-ui, sans-serif;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}
.uv-toolbar__brand { font-weight: 600; font-size: 13px; letter-spacing: 0.02em; white-space: nowrap; }
.uv-toolbar__status {
  font-size: 12px; color: #9fb2c4; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 40vw;
}
.uv-toolbar__status.is-dirty { color: #f4c66a; }
.uv-toolbar__spacer { flex: 1 1 auto; }

.uv-btn {
  -webkit-appearance: none; appearance: none;
  border: 0; border-radius: 999px;
  padding: 0 16px; min-height: 40px; min-width: 44px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; line-height: 1;
  white-space: nowrap; flex-shrink: 0;
}
.uv-btn--save { background: var(--accent); color: #14202b; }
.uv-btn--save:disabled { background: #44515d; color: #8a98a6; cursor: default; }
.uv-btn--publish { background: #3f9d6a; color: #fff; }
.uv-btn--ghost { background: transparent; color: #cdd9e4; border: 1px solid rgba(205, 217, 228, 0.4); }

/* ---------------- Editable text affordance ---------------- */
/* Persistent "edit me" cue: editable text gets a subtle hover/focus tint +
   ring, and a pencil badge in the corner on hover so owners can tell at a
   glance what they can change. Only active in owner-editor mode. */
body.is-owner-editor .uv-editable {
  position: relative;
  cursor: text;
  border-radius: 4px;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}
body.is-owner-editor .uv-editable:hover,
body.is-owner-editor .uv-editable:focus {
  background-color: rgba(255, 220, 100, 0.12);
  box-shadow: 0 0 0 2px rgba(196, 145, 43, 0.35);
  outline: none;
}
body.is-owner-editor .uv-editable::after {
  content: '\270E';
  position: absolute;
  top: -10px;
  right: -14px;
  font-size: 11px;
  color: currentColor;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.6;
  transition: opacity 150ms ease;
  pointer-events: none;
}
body.is-owner-editor .uv-editable:hover::after,
body.is-owner-editor .uv-editable:focus::after { opacity: 1; }

/* Draft mode (anonymous, instant-edit): mobile-first affordance.
   Always show a soft ring + persistent pencil cue so first-time visitors
   immediately see what's tappable. No hover dependency. */
body.uv-mode-draft .uv-editable {
  box-shadow: 0 0 0 1px rgba(196, 145, 43, 0.28);
  background-color: rgba(255, 220, 100, 0.06);
}
body.uv-mode-draft .uv-editable::after { opacity: 1; }
body.uv-mode-draft .uv-editable:hover,
body.uv-mode-draft .uv-editable:focus {
  background-color: rgba(255, 220, 100, 0.18);
  box-shadow: 0 0 0 2px rgba(196, 145, 43, 0.55);
}

/* In owner mode, reveal every section immediately so the owner can reach all
   editable fields without scrolling through the cinematic intro. */
body.is-owner-editor .section { opacity: 1; transform: none; }
body.is-owner-editor .envelope-intro { display: none; }
/* Draft mode: also suppress the envelope intro so anonymous visitors drop
   straight into the editable content without the cinematic gating. */
body.uv-mode-draft .envelope-intro { display: none; }
body.uv-mode-draft .section { opacity: 1; transform: none; }

/* ---------------- Palette chip (boy/girl segmented toggle) ---------------- */
.uv-palette {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  padding: 2px;
  gap: 2px;
  flex-shrink: 0;
}
.uv-palette__seg {
  -webkit-appearance: none; appearance: none;
  border: 0; background: transparent;
  color: #cdd9e4;
  font-family: inherit; font-size: 12px; font-weight: 600;
  padding: 0 10px; min-height: 30px;
  border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.uv-palette__seg.is-active { background: var(--accent); color: #14202b; }

/* ---------------- Sticky bottom save bar (mobile) ---------------- */
.uv-floatbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 100000;
  display: none;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(28, 34, 42, 0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
}
.uv-floatbar .uv-btn--lg { width: 100%; min-height: 48px; font-size: 16px; }
.uv-btn--lg { min-height: 48px; }
/* Secondary row under the primary floatbar CTA. Quiet "Save for later" /
   "Start over" links keep the big button loud. */
.uv-floatbar__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}
.uv-floatbar__quiet {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  color: rgba(217, 203, 178, 0.75);
  font: inherit;
  font-size: 13px;
  padding: 6px 8px;
  min-height: 32px;
  cursor: pointer;
}
.uv-floatbar__quiet:hover,
.uv-floatbar__quiet:focus { color: #fff; outline: none; }
.uv-floatbar__quiet:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.uv-floatbar__sep { color: rgba(217, 203, 178, 0.4); font-size: 13px; }
.uv-btn--sm { min-height: 36px; padding: 0 12px; font-size: 13px; }
/* Show only on phones, only when dirty, only while editing. */
@media (max-width: 640px) {
  body.is-owner-editor.uv-dirty .uv-floatbar { display: block; }
  /* In draft mode the "Get it live" CTA is the primary call to action —
     show the floatbar immediately, even before any edits. */
  body.uv-mode-draft .uv-floatbar { display: block; }
  /* Sprint 15 (Bug 4): the fixed floatbar overlays the bottom ~108px of the
     page and intercepted taps on inline-editable hero text. Reserve space below
     all content so nothing editable ever sits under the floatbar. */
  body.uv-mode-draft,
  body.is-owner-editor.uv-dirty {
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------------- First-time tour overlay ---------------- */
.uv-tour {
  position: fixed; inset: 0;
  z-index: 100001;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(12, 16, 22, 0.6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.uv-tour__card {
  background: #fff;
  color: #1c222a;
  width: 100%; max-width: 320px;
  border-radius: 16px;
  padding: 22px 22px 20px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
  font-family: 'Inter', system-ui, sans-serif;
}
.uv-tour__title {
  margin: 0 0 14px;
  font-size: 20px; line-height: 1.25; font-weight: 700;
}
.uv-tour__list {
  list-style: none; margin: 0 0 18px; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.uv-tour__list li {
  position: relative;
  padding-left: 28px;
  font-size: 14px; line-height: 1.45; color: #3a444f;
}
.uv-tour__list li::before {
  content: '\2713';
  position: absolute; left: 0; top: 0;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(196, 145, 43, 0.18);
  color: #b07f1f; font-size: 12px; font-weight: 700;
}
.uv-tour__go { width: 100%; min-height: 46px; font-size: 15px; }

/* ---------------- Save success toast ---------------- */
.uv-toast {
  position: fixed;
  left: 50%; top: 64px;
  transform: translateX(-50%);
  z-index: 100002;
  width: calc(100% - 24px); max-width: 420px;
  box-sizing: border-box;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #1f2a22;
  color: #eef6f0;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.4);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
}
.uv-toast__msg { flex: 1 1 100%; font-weight: 600; }
.uv-toast__btn {
  -webkit-appearance: none; appearance: none;
  border: 0; border-radius: 999px;
  padding: 0 14px; min-height: 36px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.uv-toast__btn--primary { background: #4fae7a; color: #0c160f; }
.uv-toast__btn--ghost { background: transparent; color: #cfe6d8; border: 1px solid rgba(207, 230, 216, 0.4); }
.uv-toast__close {
  margin-left: auto;
  -webkit-appearance: none; appearance: none;
  background: transparent; border: 0; color: #9fb6a7;
  font-size: 18px; line-height: 1; cursor: pointer;
  width: 28px; height: 28px; border-radius: 50%;
}

@media (max-width: 420px) {
  .uv-toolbar { gap: 6px; padding: 6px 8px; }
  .uv-toolbar__brand { display: none; }
  .uv-btn { padding: 0 12px; font-size: 13px; min-height: 36px; }
  .uv-toolbar__status { display: none; }
  .uv-palette__seg { font-size: 11px; padding: 0 8px; min-height: 28px; }
}
@media (max-width: 380px) {
  .uv-palette__seg { padding: 0 6px; }
  .uv-btn { padding: 0 10px; }
}

/* ---------------- Countdown empty-state draft prompt ----------------
   In owner/draft mode the empty-state card gets a slightly more prominent
   ring so it reads as an action item rather than passive content.
   The "Set event date" button always opens the details drawer, so this
   extra affordance helps the owner discover the feature at a glance.    */
body.is-owner-editor .countdown-empty,
body.uv-mode-draft .countdown-empty {
  border-color: #c89a4a;
  border-width: 2px;
  border-style: solid;
  box-shadow:
    0 0 0 3px rgba(200, 154, 74, 0.18),
    0 6px 20px rgba(44, 74, 107, 0.12);
}
/* In draft mode: always show the empty state immediately (skip reveal delay)
   so the owner sees the prompt without having to scroll to it first. */
body.uv-mode-draft .countdown-empty {
  animation: none;
  opacity: 1;
  transform: none;
}

/* ---------------- Drawer field → canvas highlight pulse (T2) ---------------- */
@keyframes uvHighlightPulse {
  0%   { box-shadow: 0 0 0 0   rgba(44, 111, 184, 0.5); }
  50%  { box-shadow: 0 0 0 12px rgba(44, 111, 184, 0.0); }
  100% { box-shadow: 0 0 0 0   rgba(44, 111, 184, 0.0); }
}
.uv-highlight-pulse {
  animation: uvHighlightPulse 1.4s ease-out;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .uv-highlight-pulse { animation: none; outline: 2px solid currentColor; outline-offset: 4px; }
}

/* ============================================================
   CLV2 Hero Photo Slot (Sprint 9.1)
   Circular 220px portrait, centered between the sky-field and
   Section 1's talavera arch. Floats above the sky background
   with a cream border that matches the --bg-cream palette token.
   ============================================================ */
.clv2-hero-photo {
  /* Positioning: centered horizontally, sits in the scroll-stage flow
     between the sky-field and section-1. */
  width: 220px;
  height: 220px;
  border-radius: 50%;              /* perfect circle */
  margin: 0 auto 32px;
  /* Cream border echoing the envelope/letter-card palette */
  border: 4px solid var(--bg-cream, #FBF6EC);
  box-shadow:
    0 4px 18px rgba(44, 74, 107, 0.18),
    0 0 0 2px var(--accent-soft, #BBDDF2);
  background: var(--bg-cream-warm, #F4E6CF);
  color: var(--ink-soft, #5A7A9B);  /* drives dashed border + icon tint */
  /* Reveal on scroll — same class used by other sections */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  position: relative;
  overflow: hidden;
}

/* Revealed state (toggled by reveal-on-scroll.js or immediate for owner) */
.clv2-hero-photo.is-visible,
body.is-owner-editor .clv2-hero-photo {
  opacity: 1;
  transform: translateY(0);
}

/* Empty state text adapts to circle dimensions */
.clv2-hero-photo .uv-hero-photo__empty {
  border-radius: 50%;
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
}

/* Filled image is clipped to circle */
.clv2-hero-photo .uv-hero-photo__img {
  border-radius: 50%;
}

/* Menu sits centered in the circle */
.clv2-hero-photo .uv-hero-photo__menu {
  border-radius: 50%;
}

/* Edit button also circular */
.clv2-hero-photo .uv-hero-photo__edit-btn {
  border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
  .clv2-hero-photo {
    transition: none;
    opacity: 1;
    transform: none;
  }
}