/* Sanctuary SaaS cohesion · maps every surface to brand-system v18.3
   Mobile-first device frame + desktop room. Load after demo-v2 / harbor-saas. */

:root {
  --sv2-night: var(--evening);
  --sv2-night-2: var(--evening-2);
  --sv2-panel: var(--evening-3);
  --sv2-panel-hi: #2c3426;
  --sv2-cream: var(--dawn);
  --sv2-sage: var(--fern);
  --sv2-sage-deep: var(--fern-deep);
  --sv2-gold: var(--gold-warm);
  --sv2-clay: var(--clay);
  --sv2-line: rgba(237, 231, 214, 0.1);
  --sv2-line-hi: rgba(237, 231, 214, 0.18);
  --sv2-muted: rgba(237, 231, 214, 0.72);
  --sv2-faint: rgba(237, 231, 214, 0.58);
  --sv2-shadow: 0 30px 80px rgba(3, 7, 3, 0.48);
  --sv2-ease: var(--ease-premium);

  --ha-ink: var(--deep-water);
  --ha-mist: var(--mist);
  --ha-sage: var(--fern);
  --ha-clay: var(--clay);
  --ha-gold: var(--gold-warm);
  --ha-paper: var(--dawn);
  --ha-night: var(--evening);
  --ha-ease: var(--ease-premium);

  --hc-ink: var(--deep-water);
  --hc-paper: rgba(247, 243, 235, 0.96);
  --hc-line: rgba(44, 62, 80, 0.12);
  --hc-sage: var(--fern);
  --hc-gold: var(--gold-warm);
  --hc-ease: var(--ease-premium);
}

/* Continuum ribbon · brand radii */
.hc-ribbon {
  border-radius: var(--r-md) !important;
}
.hc-primary,
.hc-dismiss,
.hc-secondary {
  border-radius: var(--r-pill) !important;
}

/* Demo device · keep overlays inside the frame */
#device[data-ui="sanctuary-v2"] > #ovl .ovl > .x,
#device[data-ui="sanctuary-v2"] .exp-ovl-host .ovl > .x,
#device[data-ui="sanctuary-v2"] #ex2-x,
#device[data-ui="sanctuary-v2"] #ex-x,
#device[data-ui="sanctuary-v2"] #ap-x {
  position: absolute !important;
}

#device[data-ui="sanctuary-v2"].exp-active > .nav,
#device[data-ui="sanctuary-v2"].overlay-open > .nav {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
}

/* Expedition rings · fern canon */
.ex2-ring .glow {
  background: radial-gradient(circle, rgba(126, 145, 105, 0.34), rgba(126, 145, 105, 0) 68%) !important;
}
.ex2-ring .core {
  background: radial-gradient(circle at 50% 38%, rgba(180, 200, 188, 0.32), rgba(126, 145, 105, 0.16)) !important;
  box-shadow: 0 0 40px -8px rgba(126, 145, 105, 0.4) !important;
}

.ex2-stage-title {
  max-width: 26ch !important;
}

#ex2-ui.ex2-ui-peak .ap-panel {
  max-width: min(360px, calc(100% - 28px));
  margin: 0 auto;
}

/* Resonant breath ring */
[data-breath] {
  transition: transform 0.35s var(--ease-premium), opacity 0.35s var(--ease-premium);
  will-change: transform, opacity;
}
[data-breath="inhale"] {
  filter: saturate(1.05);
}
[data-breath="hold"] {
  filter: saturate(1.12);
}
[data-breath="exhale"] {
  filter: saturate(0.96);
}

/* Desktop room · wider frame, more breathing room.
   The dark room belongs ONLY to pages hosting the device frame (/demo):
   unscoped html,body here painted every marketing page evening-on-evening. */
@media (min-width: 900px) {
  html:has(#device[data-ui="sanctuary-v2"]),
  body:has(#device[data-ui="sanctuary-v2"]) {
    background:
      radial-gradient(ellipse 70% 50% at 50% 0%, rgba(126, 145, 105, 0.12), transparent 55%),
      radial-gradient(ellipse 50% 40% at 80% 100%, rgba(195, 183, 154, 0.08), transparent 50%),
      var(--evening) !important;
  }

  #device[data-ui="sanctuary-v2"] {
    width: min(460px, calc(100vw - 64px)) !important;
    height: min(900px, calc(100dvh - 48px)) !important;
    border-radius: 36px !important;
    box-shadow:
      0 0 0 1px rgba(237, 231, 214, 0.08),
      0 40px 100px rgba(0, 0, 0, 0.55),
      0 0 120px rgba(126, 145, 105, 0.08) !important;
  }

  #device[data-ui="sanctuary-v2"] > .nav button .nl {
    font-size: 10px;
  }

  #device[data-ui="sanctuary-v2"] .surface-hero-copy h1 {
    font-size: clamp(1.75rem, 3.2vw, 2.15rem);
  }

  #device[data-ui="sanctuary-v2"] .dove-conversation {
    height: min(540px, calc(100% - 240px)) !important;
  }
}

@media (min-width: 1200px) {
  body::before {
    content: "sanctuary";
    position: fixed;
    left: max(24px, calc(50% - 460px - 120px));
    top: 42%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: center;
    font-family: var(--font-brand, "Hanken Grotesk", system-ui, sans-serif);
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: lowercase;
    color: rgba(237, 231, 214, 0.22);
    pointer-events: none;
    z-index: 0;
  }
}

/* Mobile full-bleed stays crisp */
@media (max-width: 600px) {
  #device[data-ui="sanctuary-v2"] {
    width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
}

/* Dove letter · sovereign stationary */
.dove-letter-sheet {
  position: relative;
  padding: 22px 20px 26px;
  border-radius: var(--r-lg);
  background:
    linear-gradient(165deg, rgba(245, 240, 228, 0.97), rgba(237, 231, 214, 0.94)),
    var(--dawn);
  color: var(--evening);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 24px 60px rgba(8, 12, 8, 0.28);
  border: 1px solid rgba(195, 183, 154, 0.35);
}
.dove-letter-sheet::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-warm), transparent);
  opacity: 0.7;
}
.dove-letter-k {
  font-family: var(--font-brand, "Hanken Grotesk", system-ui, sans-serif);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: var(--fern-deep);
  margin: 0 0 10px;
}
.dove-letter-body {
  font-size: 1.02rem;
  line-height: 1.65;
  white-space: pre-wrap;
  color: #1c2218;
}
.dove-letter-sign {
  margin-top: 18px;
  font-style: italic;
  color: rgba(18, 22, 15, 0.55);
  font-size: 0.92rem;
}
.dove-letter-actions {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

/* Sovereign memory map depth */
.sr-map-wrap {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid rgba(195, 183, 154, 0.22);
  background:
    radial-gradient(circle at 50% 45%, rgba(195, 183, 154, 0.16), transparent 55%),
    linear-gradient(165deg, rgba(26, 31, 22, 0.95), rgba(18, 22, 15, 0.98));
}
.sr-map-hint {
  position: absolute;
  left: 14px;
  bottom: 10px;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: rgba(237, 231, 214, 0.45);
  pointer-events: none;
}