/* =========================================================
   SpinStream Visual Makeover (Edit-Mode Only)
   Scope: Premium cinematic UI polish without logic/layout rewrites
   ========================================================= */

body[data-mode="edit"] {
  --ss-bg-0: #090d14;
  --ss-bg-1: #101723;
  --ss-bg-2: #162235;
  --ss-surface-0: rgba(14, 21, 34, 0.9);
  --ss-surface-1: rgba(19, 29, 45, 0.84);
  --ss-surface-2: rgba(26, 38, 58, 0.78);
  --ss-border-soft: rgba(170, 205, 240, 0.22);
  --ss-border-strong: rgba(200, 226, 255, 0.4);
  --ss-text-strong: #eef5ff;
  --ss-text-med: #c7d7ea;
  --ss-text-soft: #9db1c9;
  --ss-accent: #89bfff;
  --ss-accent-strong: #b7d9ff;
  --ss-accent-cyan: #8cd6ff;
  --ss-shadow-deep: 0 24px 56px rgba(2, 0, 12, 0.62);
  --ss-shadow-soft: 0 14px 30px rgba(9, 5, 22, 0.4);
  --ss-radius-lg: 22px;
  --ss-radius-md: 16px;
  --ss-radius-sm: 12px;
  --ss-edit-rail-width: minmax(320px, 30%);
  --ss-edit-stage-width: minmax(0, 70%);
  --ss-edit-workspace-max-width: 1100px;
  --ss-edit-workspace-min-height: clamp(800px, calc(100vh - 110px), 1200px);
  --ss-edit-artifact-min-height: clamp(580px, 72vh, 920px);

  color: var(--ss-text-strong);
  background: var(--ss-bg-0);
}

body[data-mode="edit"] .container {
  grid-template-columns: var(--ss-edit-rail-width) var(--ss-edit-stage-width);
  align-items: start;
  gap: clamp(16px, 1.6vw, 28px);
  padding: clamp(14px, 1.6vw, 26px);
}

/* =========================================================
   Intermediate-width responsive settling (narrow desktop)
   Keeps desktop architecture while reducing collision pressure
   before true mobile behavior takes over.
   ========================================================= */
@media (min-width: 981px) and (max-width: 1280px) {
  body[data-mode="edit"] {
    --ss-edit-workspace-max-width: min(100%, 1040px);
    --ss-edit-workspace-min-height: clamp(720px, calc(100vh - 120px), 1040px);
    --ss-edit-artifact-min-height: clamp(520px, 64vh, 760px);
  }

  body[data-mode="edit"] .header.workspace-topbar {
    gap: clamp(10px, 1.15vw, 14px);
    padding-inline: clamp(10px, 1.25vw, 18px);
  }

  body[data-mode="edit"] .r2-experience-controls {
    gap: clamp(6px, 0.95vw, 10px);
    margin-left: clamp(8px, 1vw, 18px);
  }

  body[data-mode="edit"] .r2-control-group {
    gap: clamp(4px, 0.75vw, 6px);
    padding: clamp(4px, 0.6vw, 6px);
  }

  body[data-mode="edit"] .container {
    gap: clamp(12px, 1.35vw, 20px);
    padding-inline: clamp(10px, 1.3vw, 18px);
  }

  body[data-mode="edit"] .authoring-rail {
    padding: clamp(10px, 1.05vw, 16px);
  }

  body[data-mode="edit"] .workspace-shell {
    border-radius: calc(var(--ss-radius-lg) - 2px);
  }

  body[data-mode="edit"] .artifact-stage::before {
    inset: clamp(8px, 1vw, 12px);
  }

  body[data-mode="edit"] .orbit-r2-shell {
    --orbit-r2-shell-padding-inline: clamp(14px, 2.2vw, 24px);
    --orbit-r2-shell-gap: clamp(6px, 0.7vw, 8px);
    --orbit-r2-lane-inline-pad: clamp(20px, 2.4vw, 34px);
  }

  body[data-mode="edit"]:not(.preview-mode):not(.finalized):not([data-exported="true"]) .container {
    /* Keep Region 2 + rendering workspace pinned high near topbar toggles on
       medium desktop widths; avoid the large vertical gap that forced users
       to scroll back up to regain access to controls. */
    padding-top: 0;
  }
}

body[data-mode="edit"] .header.workspace-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  background: linear-gradient(135deg, rgba(11, 17, 28, 0.94), rgba(17, 27, 43, 0.74));
  border-bottom: 1px solid var(--ss-border-soft);
  box-shadow: none;
  padding: 14px clamp(16px, 2vw, 28px);
}

body[data-mode="edit"] .topbar-brand { gap: 14px; }
body[data-mode="edit"] .topbar-brand .tagline {
  letter-spacing: 0.02em;
  color: var(--ss-text-med);
  font-weight: 600;
}

body[data-mode="edit"] .toggle-controls.topbar-controls {
  display: none;
}

body[data-mode="edit"] .topbar-controls .switch .slider {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 8px 18px rgba(0, 0, 0, 0.35);
}

body[data-mode="edit"] .authoring-rail {
  background: transparent;
  border: 0;
  border-radius: var(--ss-radius-lg);
  box-shadow: none;
  padding: clamp(14px, 1.4vw, 20px);
}

body[data-mode="edit"] .region-label {
  color: var(--ss-text-med);
  border: 1px solid rgba(176, 206, 238, 0.3);
  background: linear-gradient(90deg, rgba(66, 102, 145, 0.24), rgba(33, 58, 90, 0.16));
}

body[data-mode="edit"] .editor-section {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--ss-radius-md);
  background: transparent;
  box-shadow: none;
  overflow: clip;
}

body[data-mode="edit"] .editor-section + .editor-section { margin-top: 12px; }

body[data-mode="edit"] .section-header {
  background: linear-gradient(90deg, rgba(61, 94, 136, 0.24), rgba(34, 56, 88, 0.14));
  color: var(--ss-text-strong);
  border-bottom: 1px solid rgba(169, 203, 238, 0.24);
  letter-spacing: 0.01em;
}

body[data-mode="edit"] .section-header .section-preview { color: var(--ss-text-soft); }

body[data-mode="edit"] .section-body {
  background: transparent;
}

body[data-mode="edit"] .authoring-rail input,
body[data-mode="edit"] .authoring-rail textarea,
body[data-mode="edit"] .authoring-rail select,
body[data-mode="edit"] .authoring-rail .file-input-wrap,
body[data-mode="edit"] .authoring-rail .drop-zone {
  border-radius: var(--ss-radius-sm);
  border-color: rgba(176, 144, 243, 0.32);
  background: rgba(8, 6, 17, 0.66);
  color: var(--ss-text-strong);
}

body[data-mode="edit"] .authoring-rail label,
body[data-mode="edit"] .authoring-rail .file-hint,
body[data-mode="edit"] .authoring-rail .section-preview { color: var(--ss-text-med); }

body[data-mode="edit"] .workspace-shell {
  max-width: var(--ss-edit-workspace-max-width);
  min-height: var(--ss-edit-workspace-min-height);
  background: rgba(12, 9, 25, 0.38);
  border: 1px solid rgba(192, 158, 255, 0.12);
  border-radius: calc(var(--ss-radius-lg) + 4px);
  box-shadow: 0 12px 24px rgba(2, 0, 12, 0.3);
}

body[data-mode="edit"] .artifact-stage {
  min-height: var(--ss-edit-artifact-min-height);
  position: relative;
  border-radius: var(--ss-radius-lg);
  background: transparent;
}

body[data-mode="edit"] .artifact-stage::before {
  content: none;
}

body[data-mode="edit"] .interface-rail {
  background: transparent;
  border-top: 1px solid transparent;
}

body[data-mode="edit"] #heroPreview {
  border-radius: var(--ss-radius-lg);
  border: 1px solid var(--ss-border-soft);
  background: transparent;
  box-shadow: none;
}

body[data-mode="edit"] #heroPreview .hero-content { gap: 12px; }
body[data-mode="edit"] #heroPreview h1 {
  letter-spacing: 0.02em;
  font-weight: 800;
  text-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}
body[data-mode="edit"] #heroPreview p { color: var(--ss-text-med); }

body[data-mode="edit"] .vinyl-record { filter: drop-shadow(0 28px 44px rgba(0, 0, 0, 0.58)); }
body[data-mode="edit"] .stage-composition .vinyl-record {
  width: 100%;
  display: flex;
  justify-content: center;
}

body[data-mode="edit"] .stage-composition .vinyl-record .frame {
  margin-left: auto;
  margin-right: auto;
}

body[data-mode="edit"] .frame {
  border-radius: 50%;
  background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 32%);
}
body[data-mode="edit"] .ring {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 0 44px rgba(0, 0, 0, 0.6),
    0 14px 30px rgba(0, 0, 0, 0.42);
}
body[data-mode="edit"] .label {
  border: 1px solid rgba(198, 170, 255, 0.28);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.45), 0 10px 22px rgba(0, 0, 0, 0.38);
}
body[data-mode="edit"] .label .title-line,
body[data-mode="edit"] .label .artist-line,
body[data-mode="edit"] .label .year-line { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); }

body[data-mode="edit"] .mode-controls {
  border: 1px solid rgba(189, 158, 255, 0.2);
  border-radius: 999px;
  background: rgba(20, 12, 40, 0.6);
  padding: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body[data-mode="edit"] #toggleModeBtn,
body[data-mode="edit"] #finalizeMainBtn,
body[data-mode="edit"] #actionButton,
body[data-mode="edit"] #nftButton {
  border-radius: 999px;
  border: 1px solid rgba(184, 211, 241, 0.35);
  color: var(--ss-text-strong);
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

body[data-mode="edit"] #toggleModeBtn {
  background: linear-gradient(145deg, rgba(28, 43, 69, 0.78), rgba(21, 33, 54, 0.82));
}

body[data-mode="edit"] #finalizeMainBtn {
  background: linear-gradient(145deg, #afd4ff, #76adef);
  border-color: rgba(221, 239, 255, 0.7);
  color: #0f2238;
  box-shadow: 0 12px 24px rgba(53, 106, 172, 0.42);
}

body[data-mode="edit"] #actionButton,
body[data-mode="edit"] #nftButton {
  background: linear-gradient(145deg, rgba(28, 43, 69, 0.82), rgba(20, 33, 54, 0.8));
  box-shadow: 0 10px 22px rgba(7, 14, 24, 0.45);
}

body[data-mode="edit"] #toggleModeBtn:hover,
body[data-mode="edit"] #finalizeMainBtn:hover,
body[data-mode="edit"] #actionButton:hover,
body[data-mode="edit"] #nftButton:hover {
  transform: translateY(-1px);
  border-color: var(--ss-border-strong);
}

body[data-mode="edit"] #finalizeMainBtn:hover { box-shadow: 0 16px 26px rgba(65, 125, 196, 0.52); }

body[data-mode="edit"] #actionButtonSection,
body[data-mode="edit"] #nftButtonSection,
body[data-mode="edit"] #bottomLinksSection { border-radius: var(--ss-radius-md); }

body[data-mode="edit"] #bottomLinksSection .link-pill {
  border-radius: 999px;
  border: 1px solid rgba(174, 206, 236, 0.28);
  background: rgba(27, 42, 65, 0.68);
  color: var(--ss-text-med);
}

@media (max-width: 980px) {
  body[data-mode="edit"] {
    --ss-edit-rail-width: 1fr;
    --ss-edit-stage-width: 1fr;
    --ss-edit-workspace-max-width: 100%;
    --ss-edit-workspace-min-height: auto;
    --ss-edit-artifact-min-height: clamp(420px, 58vh, 680px);
  }

  body[data-mode="edit"] .header.workspace-topbar { padding: 12px 14px; }

  body[data-mode="edit"] .toggle-controls.topbar-controls {
    width: 100%;
    justify-content: center;
    border-radius: var(--ss-radius-sm);
  }

  body[data-mode="edit"] .authoring-rail,
  body[data-mode="edit"] .workspace-shell,
  body[data-mode="edit"] .artifact-stage,
  body[data-mode="edit"] #heroPreview,
  body[data-mode="edit"] .mode-controls { border-radius: var(--ss-radius-md); }
}

/* =========================================================
   Region 2 "Mobile" view in Edit Mode
   Collapse the full artifact/stage wrapper to a phone-width composition.
   This is intentionally isolated from Preview mode and Minty positioning.
   ========================================================= */
body[data-mode="edit"][data-view="mobile"] {
  --ss-edit-workspace-max-width: 420px;
}


body[data-mode="edit"][data-view="mobile"] .header.workspace-topbar {
  flex-wrap: nowrap;
  align-items: center;
  row-gap: 0;
}

body[data-mode="edit"][data-view="mobile"] .r2-experience-controls {
  width: auto;
  margin-left: auto;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 8px;
}

body[data-mode="edit"][data-view="mobile"] .r2-control-group {
  flex-wrap: nowrap;
}

body[data-mode="edit"][data-view="mobile"] .container {
  grid-template-columns: 1fr;
  justify-items: center;
}

body[data-mode="edit"][data-view="mobile"]:not(.preview-mode):not(.finalized):not([data-exported="true"]) .workspace-shell {
  width: min(100%, var(--ss-edit-workspace-max-width));
  max-width: var(--ss-edit-workspace-max-width);
  margin-inline: auto;
}

body[data-mode="edit"][data-view="mobile"] .artifact-stage,
body[data-mode="edit"][data-view="mobile"] .artifact-surface-panel,
body[data-mode="edit"][data-view="mobile"] .stage-composition,
body[data-mode="edit"][data-view="mobile"] .interface-rail {
  width: 100%;
  max-width: 100%;
}

/* =========================================================
   PURPLE OVERLAY KILL SWITCH (requested visual force pass)
   Goal: remove purple/magenta panel chrome in edit mode.
   ========================================================= */
body[data-mode="edit"] {
  --ss-bg-0: #080b12;
  --ss-bg-1: #0d1420;
  --ss-bg-2: #121b2a;
  --ss-surface-0: rgba(12, 18, 28, 0.88);
  --ss-surface-1: rgba(16, 24, 36, 0.84);
  --ss-surface-2: rgba(20, 30, 46, 0.78);
  --ss-border-soft: rgba(146, 176, 214, 0.28);
  --ss-border-strong: rgba(180, 209, 244, 0.45);
  --ss-accent: #81c3ff;
  --ss-accent-strong: #b6dcff;
}

body[data-mode="edit"] .header.workspace-topbar,
body[data-mode="edit"] .region-label,
body[data-mode="edit"] .section-header,
body[data-mode="edit"] .workspace-shell,
body[data-mode="edit"] .artifact-stage,
body[data-mode="edit"] .interface-rail,
body[data-mode="edit"] .mode-controls,
body[data-mode="edit"] #heroPreview,
body[data-mode="edit"] #toggleModeBtn,
body[data-mode="edit"] #actionButton,
body[data-mode="edit"] #nftButton,
body[data-mode="edit"] #finalizeMainBtn,
body[data-mode="edit"] #bottomLinksSection .link-pill {
  background-image: none !important;
  background-color: rgba(14, 21, 33, 0.86) !important;
  border-color: rgba(148, 179, 218, 0.32) !important;
  box-shadow: 0 8px 22px rgba(3, 8, 16, 0.35) !important;
}

body[data-mode="edit"] .authoring-rail input,
body[data-mode="edit"] .authoring-rail textarea,
body[data-mode="edit"] .authoring-rail select,
body[data-mode="edit"] .authoring-rail .file-input-wrap,
body[data-mode="edit"] .authoring-rail .drop-zone,
body[data-mode="edit"] .editor-section,
body[data-mode="edit"] .section-body,
body[data-mode="edit"] .upload-field,
body[data-mode="edit"] .audio-remake-card,
body[data-mode="edit"] .form-block,
body[data-mode="edit"] .field-group {
  background-image: none !important;
  background-color: rgba(12, 18, 28, 0.84) !important;
  border-color: rgba(141, 172, 214, 0.28) !important;
  box-shadow: none !important;
}

body[data-mode="edit"] #heroPreview::before {
  background: linear-gradient(180deg, rgba(8, 12, 20, 0.2), rgba(8, 12, 20, 0.34)) !important;
}