/* ─────────────────────────────────────────────────────────────────────────────
   NYMPH brand skin — app-only visual layer
   Scope: header/logo/menu/panel/footer polish, plus the shared brand tokens
   (accent color, logo geometry) referenced by css/nymph-landing.css so the
   landing screen and the app read as one consistent surface.
   Core module logic is intentionally untouched.

   Cleanup pass, 2026-06-30:
   - Removed a duplicated/overridden ".nurr-brand" rule pair and merged it
     into one rule using shared logo-geometry variables (no visual change to
     the app logo — same final left/top/width/opacity as before).
   - Replaced the global neon accent (#FF2D72) with a calm teal that matches
     the landing's existing aqua/mineral palette, plus three small overrides
     so badges/hover states that had the old pink hardcoded stay consistent.
   - Added a soft CSS-only reveal for the app chrome (logo/nav/panel/footer)
     when the landing screen is dismissed. No JS was changed — this rides on
     the existing body.nymph-landing-active class toggle already in app.js.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --nymph-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --nymph-nav-top: 24px;
  --nymph-nav-height: 44px;
  --nymph-panel-top: 90px;
  --nymph-panel-right: 22px;
  --nymph-panel-width: 392px;
  --nymph-panel-radius: 18px;
  --nymph-footer-height: var(--nurr-support-height, 34px);
  --nymph-white: rgba(255,255,255,.94);
  --nymph-white-soft: rgba(255,255,255,.68);
  --nymph-line: rgba(255,255,255,.18);
  --nymph-line-strong: rgba(255,255,255,.32);
  --nymph-glass: rgba(7, 9, 16, .20);
  --nymph-stripe: rgba(246,246,246,.82);

  /* Shared brand-mark geometry — read by the app logo below AND by
     css/nymph-landing.css, so the landing logo renders at the same size
     and screen position as the in-app logo. */
  --nymph-logo-width: clamp(230px, 22vw, 340px);
  --nymph-logo-left:  clamp(34px, 4.6vw, 76px);
  --nymph-logo-top:   clamp(54px, 8.5vh, 104px);

  /* Brand accent — replaces the legacy neon pink (#FF2D72) used across the
     module CSS via var(--accent)/var(--accent-soft). Redeclaring it here
     (later in the cascade than base.css) recolors every focus ring, active
     state and badge app-wide to a calm teal without editing module files. */
  --accent: #3FA7AF;
  --accent-soft: rgba(63, 167, 175, .16);
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--nymph-font) !important;
}

#root::before { display: none !important; }
.corner-mark { display: none !important; }

/* Header logo — single source of truth (left/top/width come from the
   shared variables above so this always matches the landing logo). */
@media (min-width: 821px) {
  .nurr-brand,
  .nurr-brand-button {
    position: fixed !important;
    left: var(--nymph-logo-left) !important;
    top: var(--nymph-logo-top) !important;
    width: var(--nymph-logo-width) !important;
    height: auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    z-index: 30 !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    filter: none !important;
    transform: translateZ(0) !important;
    transition: transform .34s cubic-bezier(.2,.9,.2,1) !important;
  }

  .nurr-brand:hover,
  .nurr-brand-button:hover {
    transform: translateY(-1px) scale(1.004) !important;
  }

  .nurr-brand::after,
  .nurr-brand-button::after { display: none !important; }

  .nurr-brand img,
  .nurr-brand-button img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    pointer-events: none !important;
    filter: brightness(0) invert(1) !important;
    opacity: .64 !important;
    mix-blend-mode: screen !important;
    transition: opacity .28s ease !important;
  }

  .nurr-brand:hover img,
  .nurr-brand-button:hover img {
    opacity: .82 !important;
  }
}

/* Top navigation pill */
@media (min-width: 821px) {
  .rail {
    position: fixed !important;
    top: var(--nymph-nav-top) !important;
    right: 24px !important;
    left: auto !important;
    bottom: auto !important;
    width: min(640px, calc(100vw - 560px)) !important;
    min-width: 420px !important;
    height: var(--nymph-nav-height) !important;
    padding: 0 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,.93) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 44px rgba(0,0,0,.16) !important;
    backdrop-filter: blur(24px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.12) !important;
    z-index: 60 !important;
  }

  .rail-group {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 4px !important;
    align-items: center !important;
  }

  .rail-item {
    position: relative !important;
    height: 40px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;
    color: rgba(255,255,255,.62) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: color .22s ease, opacity .22s ease !important;
  }

  .rail-item .num { display: none !important; }
  .rail-item:hover { color: rgba(255,255,255,.9) !important; }
  .rail-item.active { color: #fff !important; font-weight: 500 !important; }

  .rail-item::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 9px !important;
    width: 58px !important;
    max-width: calc(100% - 44px) !important;
    height: 1px !important;
    transform: translateX(-50%) scaleX(0) !important;
    transform-origin: center !important;
    background: var(--nymph-stripe) !important;
    opacity: .82 !important;
    box-shadow: 0 0 7px rgba(255,255,255,.13) !important;
    transition: transform .24s cubic-bezier(.2,.9,.2,1), opacity .24s ease !important;
  }

  .rail-item:hover::after { transform: translateX(-50%) scaleX(.42) !important; opacity: .45 !important; }
  .rail-item.active::after,
  .rail-item.active:hover::after { transform: translateX(-50%) scaleX(1) !important; opacity: .9 !important; }
}

/* Main side panel */
@media (min-width: 821px) {
  .panel:not(.collapsed) {
    position: fixed !important;
    top: var(--nymph-panel-top) !important;
    right: var(--nymph-panel-right) !important;
    left: auto !important;
    bottom: auto !important;
    width: min(var(--nymph-panel-width), calc(100vw - 44px)) !important;
    min-width: min(var(--nymph-panel-width), calc(100vw - 44px)) !important;
    height: calc(100svh - var(--nymph-panel-top) - var(--nymph-footer-height) - 18px) !important;
    max-height: calc(100svh - var(--nymph-panel-top) - var(--nymph-footer-height) - 18px) !important;
    border-radius: var(--nymph-panel-radius) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.045) 31%, rgba(0,0,0,.11)),
      var(--nymph-glass) !important;
    border: 1px solid rgba(255,255,255,.34) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 20px 58px rgba(0,0,0,.16) !important;
    backdrop-filter: blur(30px) saturate(1.25) brightness(.94) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.25) brightness(.94) !important;
    overflow: hidden !important;
    z-index: 42 !important;
  }

  .panel:not(.collapsed).is-dragged {
    top: var(--panel-y) !important;
    left: var(--panel-x) !important;
    right: auto !important;
  }

  .panel:not(.collapsed) .panel-header {
    height: 72px !important;
    min-height: 72px !important;
    padding: 0 22px !important;
    border-bottom-color: rgba(255,255,255,.12) !important;
  }

  .panel:not(.collapsed) .panel-body {
    padding-left: 22px !important;
    padding-right: 22px !important;
    overflow-x: hidden !important;
  }
}

.panel,
.panel input,
.panel select,
.panel textarea,
.panel button {
  font-family: var(--nymph-font) !important;
}

.panel-title-nymph {
  display: flex !important;
  align-items: center !important;
  min-height: 24px !important;
}

.panel-title-nymph img {
  display: block !important;
  width: 84px !important;
  height: auto !important;
  max-height: 28px !important;
  object-fit: contain !important;
  filter: invert(1) grayscale(1) brightness(1.14) contrast(.96) !important;
  opacity: .92 !important;
}

.panel .panel-title,
.panel .section-label,
.panel .section-label .value,
.panel .panel-tab,
.panel .surface-name {
  font-family: var(--nymph-font) !important;
  text-transform: uppercase !important;
}

.panel .section-label,
.panel .section-label .value { color: rgba(255,255,255,.68) !important; }
.panel .section { border-color: rgba(255,255,255,.095) !important; }

/* Header icons: no circular badges */
.panel .icon-btn,
.header-actions .icon-btn {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255,255,255,.72) !important;
  transition: color .18s ease, transform .18s ease, opacity .18s ease !important;
}

.panel .icon-btn svg,
.header-actions .icon-btn svg {
  width: 14px !important;
  height: 14px !important;
}

.panel .icon-btn:hover,
.header-actions .icon-btn:hover {
  color: #fff !important;
  background: transparent !important;
  transform: translateY(-1px) !important;
}

.panel .icon-btn:active,
.header-actions .icon-btn:active { transform: scale(.94) !important; }
.panel .icon-btn[disabled] { opacity: .28 !important; }

/* Controls: glass treatment without overriding swatch fills */
.panel .btn,
.panel .nurr-segment,
.panel .segment button,
.panel .material-toggle button,
.mode-gradient .surface-card,
.panel:not(.collapsed) .surface-card {
  background: rgba(255,255,255,.04) !important;
  color: rgba(255,255,255,.76) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: none !important;
}

.panel .btn:hover,
.panel .nurr-segment:hover,
.panel .segment button:hover,
.panel .material-toggle button:hover,
.mode-gradient .surface-card:hover,
.panel:not(.collapsed) .surface-card:hover {
  background: rgba(255,255,255,.075) !important;
  color: rgba(255,255,255,.94) !important;
}

.panel .nurr-segment.active,
.panel .segment button.active,
.panel .material-toggle button.active,
.mode-gradient .surface-card.active,
.panel:not(.collapsed) .surface-card.active,
.panel .panel-tab.active {
  background: rgba(255,255,255,.105) !important;
  color: rgba(255,255,255,.94) !important;
  border-color: rgba(255,255,255,.25) !important;
}

.panel:not(.collapsed) .surface-card {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
}

.panel .surface-name,
.mode-gradient .surface-card .label,
.mode-gradient .surface-card span {
  color: inherit !important;
  font: 700 8px/1 var(--nymph-font) !important;
  letter-spacing: .105em !important;
  text-transform: uppercase !important;
}

/* Palette swatches: preserve inline color styles */
.panel .swatches,
.panel .swatch-wrap { overflow: visible !important; }

.panel .swatch,
.panel button.swatch,
.panel .swatch button {
  border-color: rgba(255,255,255,.45) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 16px rgba(0,0,0,.08) !important;
}

.panel .swatch-remove,
.panel button.swatch-remove {
  background: rgba(255,255,255,.88) !important;
  color: rgba(0,0,0,.72) !important;
  border: 0 !important;
}

/* Collapsed panel */
@media (min-width: 821px) {
  .panel.collapsed {
    position: fixed !important;
    top: var(--nymph-panel-top) !important;
    right: 74px !important;
    left: auto !important;
    width: 276px !important;
    min-width: 276px !important;
    height: 76px !important;
    min-height: 76px !important;
    border-radius: var(--nymph-panel-radius) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.115), rgba(255,255,255,.035) 52%, rgba(0,0,0,.105)),
      rgba(4,7,11,.18) !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 18px 42px rgba(0,0,0,.12) !important;
    backdrop-filter: blur(28px) saturate(1.18) brightness(.94) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.18) brightness(.94) !important;
    color: rgba(255,255,255,.82) !important;
    z-index: 42 !important;
  }

  .panel.collapsed .panel-header {
    height: 76px !important;
    min-height: 76px !important;
    padding: 0 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .panel.collapsed .panel-title-nymph {
    width: 58px !important;
    min-width: 58px !important;
    justify-content: flex-start !important;
  }

  .panel.collapsed .panel-title-nymph img {
    content: url('../assets/logos/nymph-logomark.svg') !important;
    width: 50px !important;
    height: 50px !important;
    max-height: 50px !important;
    object-fit: contain !important;
    filter: invert(1) grayscale(1) brightness(1.14) contrast(.96) !important;
    opacity: .82 !important;
  }

  .panel.collapsed .header-actions { gap: 8px !important; }
}

/* Footer support strip */
.nurr-support-strip {
  z-index: 70 !important;
  background: rgba(0,0,0,.96) !important;
}

@media (max-width: 820px) {
  .nurr-brand img,
  .nurr-brand-button img {
    width: 128px !important;
    filter: invert(1) grayscale(1) !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Accent consistency — three hardcoded copies of the old pink (rgba(255,45,114,…))
   live inside module CSS (geometric material toggle, drop-zone hover, export
   error state) and don't read var(--accent), so the global token swap above
   doesn't reach them on its own. Restated here, scoped to the same selectors,
   so nothing in the app still shows the old neon pink. No module file edited.
   The export error state is kept a calm warning-red rather than teal, since
   recoloring an error message to the brand accent would read as not-an-error.
   ───────────────────────────────────────────────────────────────────────────── */
.mode-geometric .material-toggle button.active {
  background: rgba(63, 167, 175, .14) !important;
}

.panel .drop-zone:hover {
  background: rgba(63, 167, 175, .08) !important;
}

.vid-error {
  background: rgba(255, 122, 105, .08) !important;
  border-color: rgba(255, 122, 105, .28) !important;
  color: #ff9a85 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Soft opening — landing → app handoff.
   Pure CSS, no JS changed: js/app.js already toggles body.nymph-landing-active
   when the landing screen mounts/unmounts. This rule only fires the moment
   that class is removed (i.e. the instant the landing is dismissed), giving
   the header logo, nav, panel and footer a brief, calm rise-and-fade instead
   of snapping into view.
   ───────────────────────────────────────────────────────────────────────────── */
@keyframes nymphAppReveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

body:not(.nymph-landing-active) .nurr-brand,
body:not(.nymph-landing-active) .nurr-brand-button {
  animation: nymphAppReveal .7s cubic-bezier(.16,.9,.18,1) .04s both;
}

body:not(.nymph-landing-active) .rail {
  animation: nymphAppReveal .7s cubic-bezier(.16,.9,.18,1) .13s both;
}

body:not(.nymph-landing-active) .panel {
  animation: nymphAppReveal .7s cubic-bezier(.16,.9,.18,1) .21s both;
}

body:not(.nymph-landing-active) .nurr-support-strip {
  animation: nymphAppReveal .6s cubic-bezier(.16,.9,.18,1) .3s both;
}

@media (prefers-reduced-motion: reduce) {
  body:not(.nymph-landing-active) .nurr-brand,
  body:not(.nymph-landing-active) .nurr-brand-button,
  body:not(.nymph-landing-active) .rail,
  body:not(.nymph-landing-active) .panel,
  body:not(.nymph-landing-active) .nurr-support-strip {
    animation: none !important;
  }
}