/* =========================================================
   Neumorphic Sleep Noise — design tokens + base
   ========================================================= */

:root {
  /* Surface tint — overridden by JS */
  --hue: 240;               /* 0=warm, 240=cool, 120=green */
  --sat: 0.008;             /* low saturation */
  --lightness: 0.93;        /* surface base */

  /* Neumorphic base surface */
  --bg: oklch(var(--lightness) var(--sat) var(--hue));
  --bg-2: oklch(calc(var(--lightness) - 0.02) var(--sat) var(--hue));

  /* Text */
  --ink-1: oklch(0.28 var(--sat) var(--hue));
  --ink-2: oklch(0.48 var(--sat) var(--hue));
  --ink-3: oklch(0.62 var(--sat) var(--hue));

  /* Shadow intensity (controlled via tweak 0..1) */
  --shadow-strength: 1;
  --hl: rgba(255,255,255, calc(0.95 * var(--shadow-strength)));
  --sh: rgba(163,177,198, calc(0.55 * var(--shadow-strength)));

  /* Accent */
  --accent-h: 260;
  --accent: oklch(0.68 0.09 var(--accent-h));
  --accent-soft: oklch(0.86 0.04 var(--accent-h));

  /* Shadow offsets */
  --neu-sm: 2px;
  --neu-md: 6px;
  --neu-lg: 12px;
  --neu-xl: 20px;

  /* Radii */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-full: 999px;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);

  color-scheme: light;
}

:root[data-theme="dark"] {
  --lightness: 0.22;
  --sat: 0.006;
  --bg: oklch(var(--lightness) var(--sat) var(--hue));
  --bg-2: oklch(calc(var(--lightness) - 0.03) var(--sat) var(--hue));
  --ink-1: oklch(0.92 var(--sat) var(--hue));
  --ink-2: oklch(0.72 var(--sat) var(--hue));
  --ink-3: oklch(0.55 var(--sat) var(--hue));
  --hl: rgba(255,255,255, calc(0.06 * var(--shadow-strength)));
  --sh: rgba(0,0,0, calc(0.65 * var(--shadow-strength)));
  color-scheme: dark;
}

:root[data-theme="dark"][data-contrast="deep"] {
  --lightness: 0.12;
  --ink-1: oklch(0.82 var(--sat) var(--hue));
  --ink-2: oklch(0.58 var(--sat) var(--hue));
  --ink-3: oklch(0.42 var(--sat) var(--hue));
  --hl: rgba(255,255,255, calc(0.035 * var(--shadow-strength)));
  --sh: rgba(0,0,0, calc(0.85 * var(--shadow-strength)));
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink-1);
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-feature-settings: 'cv11', 'ss01', 'tnum';
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  touch-action: manipulation;
}
body { min-height: 100vh; min-height: 100dvh; }

/* =========================================================
   Neumorphic primitives
   ========================================================= */

.neu {
  background: var(--bg);
  border-radius: var(--r-lg);
  box-shadow:
    calc(var(--neu-md) * -1) calc(var(--neu-md) * -1) calc(var(--neu-md) * 2) var(--hl),
    var(--neu-md) var(--neu-md) calc(var(--neu-md) * 2) var(--sh);
}
.neu-sm {
  background: var(--bg);
  border-radius: var(--r-md);
  box-shadow:
    calc(var(--neu-sm) * -1) calc(var(--neu-sm) * -1) calc(var(--neu-sm) * 2) var(--hl),
    var(--neu-sm) var(--neu-sm) calc(var(--neu-sm) * 2) var(--sh);
}
.neu-lg {
  background: var(--bg);
  border-radius: var(--r-xl);
  box-shadow:
    calc(var(--neu-lg) * -1) calc(var(--neu-lg) * -1) calc(var(--neu-lg) * 1.5) var(--hl),
    var(--neu-lg) var(--neu-lg) calc(var(--neu-lg) * 1.5) var(--sh);
}

.neu-inset {
  background: var(--bg);
  border-radius: var(--r-md);
  box-shadow:
    inset calc(var(--neu-sm) * -1) calc(var(--neu-sm) * -1) calc(var(--neu-sm) * 2) var(--hl),
    inset var(--neu-sm) var(--neu-sm) calc(var(--neu-sm) * 2) var(--sh);
}
.neu-inset-lg {
  background: var(--bg);
  border-radius: var(--r-lg);
  box-shadow:
    inset calc(var(--neu-md) * -1) calc(var(--neu-md) * -1) calc(var(--neu-md) * 1.5) var(--hl),
    inset var(--neu-md) var(--neu-md) calc(var(--neu-md) * 1.5) var(--sh);
}

.btn {
  appearance: none; border: none; background: var(--bg);
  color: var(--ink-1);
  font: inherit;
  cursor: pointer;
  border-radius: var(--r-full);
  transition: box-shadow 180ms var(--ease), transform 180ms var(--ease), color 180ms var(--ease);
}
.btn:active, .btn.is-pressed {
  box-shadow:
    inset calc(var(--neu-sm) * -1) calc(var(--neu-sm) * -1) calc(var(--neu-sm) * 2) var(--hl),
    inset var(--neu-sm) var(--neu-sm) calc(var(--neu-sm) * 2) var(--sh);
}

.btn:focus-visible, .pebble:focus-visible {
  outline: none;
  box-shadow:
    -2px -2px 4px var(--hl),
    2px 2px 4px var(--sh),
    0 0 0 2px oklch(0.72 0.12 var(--accent-h) / 0.55);
}

.accent-glow { position: relative; }
.accent-glow::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at 30% 30%, oklch(0.72 0.09 var(--accent-h) / 0.18), transparent 65%);
}

.has-noise::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
  opacity: 0.04;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* =========================================================
   App frame (mobile-first, scales up)
   ========================================================= */

.app {
  width: 100vw;
  max-width: 480px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding:
    calc(24px + env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    calc(100px + env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 760px) {
  body { padding: 24px 0; }
  .app {
    max-width: 520px;
    min-height: 844px;
    border-radius: 44px;
    box-shadow:
      -24px -24px 60px var(--hl),
      24px 24px 60px var(--sh);
    margin: 24px auto;
    padding: 24px 20px 100px;
  }
}

.app-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 4px 4px 0;
}
.app-head h1 {
  font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0;
  color: var(--ink-1);
}
.app-head .sub {
  font-size: 12px; color: var(--ink-3); margin-top: 2px; font-weight: 500;
}

.icon-btn {
  width: 44px; height: 44px; border-radius: var(--r-full);
  display: grid; place-items: center;
  color: var(--ink-2);
  flex-shrink: 0;
}
.icon-btn svg { width: 20px; height: 20px; }

/* =========================================================
   Orbital mixer scaling (320px–360px safety)
   ========================================================= */
.orbit-wrap {
  width: 360px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  position: relative;
  touch-action: none;
}

/* =========================================================
   Typography utils
   ========================================================= */

.t-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.t-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-1); }
.t-body { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.t-num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

/* =========================================================
   Chips / range
   ========================================================= */
.chip {
  padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--ink-2); cursor: pointer; border: none;
  background: var(--bg);
  box-shadow:
    -2px -2px 4px var(--hl),
    2px 2px 4px var(--sh);
}
.chip.is-active {
  color: var(--ink-1);
  box-shadow:
    inset -2px -2px 4px var(--hl),
    inset 2px 2px 4px var(--sh);
}

input[type="range"].neu-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 14px; border-radius: 999px;
  background: var(--bg);
  box-shadow:
    inset -2px -2px 4px var(--hl),
    inset 2px 2px 4px var(--sh);
  outline: none;
}
input[type="range"].neu-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg);
  cursor: grab;
  box-shadow:
    -2px -2px 4px var(--hl),
    2px 2px 4px var(--sh),
    inset 0 0 0 4px oklch(0.72 0.08 var(--accent-h));
}
input[type="range"].neu-range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg); border: none; cursor: grab;
  box-shadow:
    -2px -2px 4px var(--hl),
    2px 2px 4px var(--sh),
    inset 0 0 0 4px oklch(0.72 0.08 var(--accent-h));
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* =========================================================
   Scene drawer: edge fade + scroll indicator
   "Content dissolves into the surface" — neumorphic affordance
   ========================================================= */
.scene-row {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4px, #000 calc(100% - 4px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 4px, #000 calc(100% - 4px), transparent 100%);
  transition: -webkit-mask-image 200ms var(--ease), mask-image 200ms var(--ease);
  user-select: none;
}
.scene-row.fade-left:not(.fade-right) {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 36px, #000 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 36px, #000 100%);
}
.scene-row.fade-right:not(.fade-left) {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 36px), transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 36px), transparent 100%);
}
.scene-row.fade-left.fade-right {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
}
.scene-row:active { cursor: grabbing !important; }

.scroll-thumb {
  position: relative;
  height: 4px;
  margin: -4px 16px 8px;
  border-radius: 999px;
  background: var(--bg);
  box-shadow:
    inset -1px -1px 2px var(--hl),
    inset 1px 1px 2px var(--sh);
  overflow: hidden;
}
.scroll-thumb-bar {
  position: absolute; top: 0; bottom: 0;
  border-radius: 999px;
  background: linear-gradient(to right, oklch(0.82 0.06 var(--accent-h)), oklch(0.72 0.1 var(--accent-h)));
  transition: left 120ms linear, width 200ms var(--ease);
}

/* =========================================================
   Modal (replaces window.prompt for scene naming)
   ========================================================= */
.modal-scrim {
  position: fixed; inset: 0; z-index: 100;
  background: oklch(var(--lightness) var(--sat) var(--hue) / 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid; place-items: center;
  padding: 24px;
  animation: scrim-in 200ms var(--ease);
}
@keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  width: 100%; max-width: 360px;
  padding: 22px;
  display: flex; flex-direction: column; gap: 16px;
  animation: card-in 280ms var(--ease);
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-input {
  width: 100%;
  appearance: none; border: none; outline: none;
  background: var(--bg);
  color: var(--ink-1);
  font: inherit; font-size: 15px; font-weight: 500;
  padding: 12px 14px;
  border-radius: var(--r-md);
  box-shadow:
    inset -2px -2px 4px var(--hl),
    inset 2px 2px 4px var(--sh);
}
.modal-input:focus-visible {
  box-shadow:
    inset -2px -2px 4px var(--hl),
    inset 2px 2px 4px var(--sh),
    0 0 0 2px oklch(0.72 0.12 var(--accent-h) / 0.55);
}
.modal-row { display: flex; gap: 10px; justify-content: flex-end; }
.modal-row .btn {
  padding: 9px 16px; font-size: 12.5px; font-weight: 600;
  color: var(--ink-2);
  box-shadow: -2px -2px 4px var(--hl), 2px 2px 4px var(--sh);
}
.modal-row .btn.primary {
  color: oklch(0.55 0.13 var(--accent-h));
}

/* =========================================================
   Audio unlock affordance
   ========================================================= */
.audio-unlock {
  margin: -4px 4px 0;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 500;
  color: var(--ink-2);
  border-radius: var(--r-md);
  cursor: pointer;
  background: var(--bg);
  border: none;
  text-align: left;
  box-shadow:
    -2px -2px 4px var(--hl),
    2px 2px 4px var(--sh);
}
.audio-unlock .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: oklch(0.72 0.12 var(--accent-h));
  box-shadow: 0 0 0 4px oklch(0.72 0.12 var(--accent-h) / 0.18);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.7); opacity: 0.6; }
}