/* Wedding ↔ Honeymoon app-shell preview */
.sidebar-mode-nav{display:flex;flex-direction:column;flex:0 0 auto}
.sidebar-honeymoon-nav{display:none}
.sidebar-bottom-zone{margin-top:auto;flex:0 0 auto}
.sidebar-bottom-zone .sidebar-profile-shell{margin-top:0}

.planner-mode-switch{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3px;
  width:100%;
  margin:8px 0 6px;
  padding:3px;
  border:1px solid color-mix(in srgb,var(--border) 88%,var(--ink) 12%);
  border-radius:999px;
  background:color-mix(in srgb,var(--surface) 70%,var(--surface-alt));
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 70%,transparent);
}
.planner-mode-switch::before{
  content:"";
  position:absolute;
  top:3px;left:3px;
  width:calc(50% - 4.5px);
  height:34px;
  border-radius:999px;
  background:var(--accent);
  box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 22%,transparent);
  transform:translateX(0);
  transition:transform .42s cubic-bezier(.22,1,.36,1),background-color .2s ease,box-shadow .2s ease;
}
.planner-mode-switch.is-honeymoon::before{transform:translateX(calc(100% + 3px))}
.planner-mode-option{
  position:relative;
  min-width:0;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 8px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--ink-muted);
  font:700 .62rem/1 var(--font-ui);
  letter-spacing:.025em;
  cursor:pointer;
  z-index:1;
  transition:color .18s ease,background-color .24s cubic-bezier(.22,1,.36,1),
    transform .24s cubic-bezier(.22,1,.36,1),box-shadow .24s ease;
}
.planner-mode-option svg{
  width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;
  transition:transform .34s cubic-bezier(.22,1,.36,1);
}
.planner-mode-icon-ring{stroke-width:1.7}
.planner-mode-icon-sun{stroke-width:1.7}
.planner-mode-option:not(.is-active):hover{color:var(--ink);background:color-mix(in srgb,var(--accent-soft) 62%,transparent)}
.planner-mode-option:hover svg{transform:rotate(-5deg) scale(1.08)}
.planner-mode-option:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.planner-mode-option.is-active{
  color:var(--accent-on);
  background:transparent;
  box-shadow:none;
}

body.honeymoon-preview .sidebar-wedding-nav{display:none}
body.honeymoon-preview .sidebar-honeymoon-nav{display:flex;animation:sidebarModeIn .38s cubic-bezier(.22,1,.36,1) both}
body.honeymoon-preview .sidebar-honeymoon-nav .nav-item{
  opacity:1;
  cursor:default;
  pointer-events:none;
}
body.honeymoon-preview .sidebar-honeymoon-nav .nav-item.active{
  opacity:1;background:color-mix(in srgb,var(--accent) 88%,#bd9b65 12%);
}
body.honeymoon-preview .sidebar-profile-shell{opacity:.42;pointer-events:none}

.honeymoon-coming-soon{
  position:fixed;
  inset:64px 0 0 240px;
  z-index:1600;
  display:grid;
  place-items:center;
  padding:32px;
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--surface) 88%,transparent),color-mix(in srgb,var(--surface-alt) 82%,transparent)),
    radial-gradient(circle at 75% 20%,color-mix(in srgb,#d2aa6d 16%,transparent),transparent 38%);
  backdrop-filter:blur(9px) saturate(.85);
  opacity:0;
  transition:opacity .28s ease;
}
.honeymoon-coming-soon[hidden]{display:none}
.honeymoon-coming-soon.is-visible{opacity:1}
.honeymoon-coming-soon.is-leaving{opacity:0;pointer-events:none}
.app.sidebar-collapsed~.honeymoon-coming-soon,
body.sidebar-collapsed .honeymoon-coming-soon{left:48px}
.honeymoon-preview-card{
  width:min(620px,calc(100vw - 64px));
  padding:clamp(30px,5vw,54px);
  text-align:center;
  color:var(--ink);
  border:1px solid color-mix(in srgb,var(--border) 84%,#cba66d 16%);
  border-radius:var(--radius-lg,18px);
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  box-shadow:0 26px 70px color-mix(in srgb,var(--ink) 18%,transparent);
  opacity:0;
  transform:translateY(14px) scale(.985);
  transition:opacity .38s ease,transform .48s cubic-bezier(.22,1,.36,1);
}
.honeymoon-coming-soon.is-visible .honeymoon-preview-card{opacity:1;transform:none}
.honeymoon-preview-mark{
  width:58px;height:58px;margin:0 auto 20px;display:grid;place-items:center;
  border:1px solid color-mix(in srgb,var(--accent) 20%,var(--border));
  border-radius:50%;color:var(--accent);
  background:color-mix(in srgb,var(--accent-soft) 55%,var(--surface));
}
.honeymoon-preview-mark svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.honeymoon-preview-eyebrow{
  margin:0 0 10px;color:var(--ink-muted);font:700 .69rem/1.2 var(--font-ui);
  letter-spacing:.2em;text-transform:uppercase;
}
.honeymoon-preview-card h2{
  margin:0 0 15px;font-family:var(--font-heading);font-size:clamp(2rem,4vw,3.25rem);
  font-weight:400;line-height:1.02;letter-spacing:.015em;
}
.honeymoon-preview-card>p:not(.honeymoon-preview-eyebrow):not(.honeymoon-preview-hint){
  max-width:500px;margin:0 auto;color:var(--ink-muted);font-size:1rem;line-height:1.7;
}
.honeymoon-preview-rule{width:56px;height:1px;margin:26px auto 20px;background:var(--border)}
.honeymoon-preview-hint{
  display:flex;align-items:center;justify-content:center;gap:7px;margin:0;
  color:var(--ink-muted);font-size:.84rem;
}
.honeymoon-preview-hint svg{width:16px;height:16px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.planner-mode-switch.needs-return{animation:plannerModeReturn 1.55s ease-in-out infinite}

.app.sidebar-collapsed .planner-mode-switch{
  width:100%;max-height:0;margin:0;padding:0;gap:0;overflow:hidden;
  border-width:0;box-shadow:none;opacity:0;transform:translateY(4px) scale(.96);
  pointer-events:none;
  transition:max-height .22s cubic-bezier(.22,1,.36,1),margin .22s cubic-bezier(.22,1,.36,1),
    padding .22s cubic-bezier(.22,1,.36,1),border-color .16s ease,box-shadow .16s ease,
    opacity .16s ease,transform .22s cubic-bezier(.22,1,.36,1);
}
.app.sidebar-collapsed .planner-mode-switch::before,
.app.sidebar-collapsed .planner-mode-option{visibility:hidden}

@keyframes sidebarModeIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
@keyframes plannerModeReturn{
  0%,68%,100%{box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 70%,transparent),0 0 0 0 color-mix(in srgb,#d3a654 0%,transparent)}
  78%{box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 70%,transparent),0 0 0 6px color-mix(in srgb,#d3a654 24%,transparent)}
}

@media(max-width:899px){
  .honeymoon-coming-soon{inset:64px 0 0;padding:18px}
  .honeymoon-preview-card{width:min(520px,calc(100vw - 36px));padding:30px 22px}
  .mob-sidebar-bottom-zone{margin-top:auto}
  .mob-sidebar-bottom-zone .mob-profile-shell{margin-top:0}
  .mob-planner-mode{width:auto;margin:10px 14px}
  body.honeymoon-preview .mob-drawer-item:not(.mob-drawer-signout){opacity:.42;pointer-events:none}
}
@media(prefers-reduced-motion:reduce){
  .planner-mode-switch::before,.planner-mode-option,.planner-mode-option svg,.honeymoon-coming-soon,.honeymoon-preview-card{transition:none}
  .honeymoon-coming-soon,.honeymoon-preview-card,.planner-mode-switch.needs-return,.sidebar-honeymoon-nav{animation:none}
}

/* Keep the real app chrome visible while unfinished planner content remains
   behind the preview veil. Floating dashboard tools and La Boda chat use
   z-index 1500/1501, so the veil at 1600 intentionally covers them. */
body.honeymoon-preview .header{position:relative;z-index:1602}
body.honeymoon-preview .sidebar-toggle{z-index:1602}