/* self-hosted fonts */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/dm-sans-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dm-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');
}

* { margin: 0; padding: 0; box-sizing: border-box; }

  :root {
    --bg-idle: #F5EDE3;
    --bg-listening: #F7EFE4;
    --text-ghost: rgba(140, 120, 95, 0.35);
    --text-dim: rgba(140, 120, 95, 0.55);
    --text-soft: rgba(120, 95, 65, 0.7);
    --accent-warm: rgba(210, 150, 100, 0.5);
    --accent-solid: rgba(210, 150, 100, 0.6);
    --accent-glow: rgba(220, 170, 120, 0.25);
    --hairline: rgba(140, 120, 95, 0.08);
    --hover-wash: rgba(140, 120, 95, 0.06);
    --wave: rgba(190, 155, 115, 0.25);
    --wave-hover: rgba(190, 155, 115, 0.4);
    --track: rgba(140, 120, 95, 0.12);
    --veil: rgba(245, 237, 227, 0.97);
    --danger-soft: rgba(180, 110, 80, 0.7);
  }

  :root.h-dawn {
    --bg-idle: #ECEAEA;
    --bg-listening: #EEECEC;
    --text-ghost: rgba(130, 122, 120, 0.38);
    --text-dim: rgba(130, 122, 120, 0.58);
    --text-soft: rgba(112, 100, 96, 0.72);
    --accent-warm: rgba(184, 146, 140, 0.42);
    --accent-solid: rgba(184, 146, 140, 0.55);
    --accent-glow: rgba(195, 165, 158, 0.16);
    --hairline: rgba(130, 122, 120, 0.1);
    --hover-wash: rgba(130, 122, 120, 0.06);
    --wave: rgba(165, 148, 142, 0.3);
    --wave-hover: rgba(165, 148, 142, 0.44);
    --track: rgba(130, 122, 120, 0.13);
    --veil: rgba(236, 234, 234, 0.97);
    --danger-soft: rgba(172, 108, 88, 0.7);
  }

    :root.h-dusk {
    --bg-idle: #F3D5B6;
    --bg-listening: #F5D8BA;
    --text-ghost: rgba(135, 88, 58, 0.42);
    --text-dim: rgba(135, 88, 58, 0.62);
    --text-soft: rgba(115, 70, 42, 0.78);
    --accent-warm: rgba(222, 115, 70, 0.65);
    --accent-solid: rgba(222, 115, 70, 0.78);
    --accent-glow: rgba(230, 138, 88, 0.32);
    --hairline: rgba(135, 88, 58, 0.11);
    --hover-wash: rgba(135, 88, 58, 0.07);
    --wave: rgba(198, 122, 80, 0.34);
    --wave-hover: rgba(198, 122, 80, 0.5);
    --track: rgba(135, 88, 58, 0.15);
    --veil: rgba(243, 213, 182, 0.97);
    --danger-soft: rgba(190, 90, 62, 0.75);
  }

  :root.h-dark {
    --bg-idle: #2B211A;
    --bg-listening: #2E241C;
    --text-ghost: rgba(214, 190, 160, 0.35);
    --text-dim: rgba(214, 190, 160, 0.55);
    --text-soft: rgba(224, 202, 174, 0.72);
    --accent-warm: rgba(224, 150, 96, 0.55);
    --accent-solid: rgba(224, 150, 96, 0.68);
    --accent-glow: rgba(224, 160, 110, 0.12);
    --hairline: rgba(214, 190, 160, 0.1);
    --hover-wash: rgba(214, 190, 160, 0.06);
    --wave: rgba(214, 175, 135, 0.28);
    --wave-hover: rgba(214, 175, 135, 0.44);
    --track: rgba(214, 190, 160, 0.14);
    --veil: rgba(43, 33, 26, 0.97);
    --danger-soft: rgba(224, 130, 95, 0.7);
  }

  html, body { height: 100%; }

  body {
    background: var(--bg-idle);
    font-family: 'DM Sans', sans-serif;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    cursor: default;
    transition: background 2s ease;
  }

  body.listening { background: var(--bg-listening); }

  .space {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: opacity 0.8s ease;
  }

  .space.hidden { opacity: 0; pointer-events: none; }

  /* ---------- Thinking space ---------- */
  .thinking-space { z-index: 2; }

  .hint {
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--text-ghost);
    position: absolute;
    bottom: 48px;
    text-align: center;
    padding: 0 24px;
    transition: opacity 1.5s ease;
  }

  .hint.fade { opacity: 0; }

  .orb-container {
    position: relative;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .orb {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-warm);
    position: relative;
    transition: width 1.2s cubic-bezier(0.4,0,0.2,1),
                height 1.2s cubic-bezier(0.4,0,0.2,1),
                background 1.2s ease;
    will-change: transform;
  }

  .orb::after {
    content: '';
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    background: var(--accent-glow);
    opacity: 0;
    transition: opacity 1.2s ease;
  }

  body.listening .orb {
    width: 26px;
    height: 26px;
    background: var(--accent-solid);
  }

  body.listening .orb::after { opacity: 1; }

  .duration {
    position: absolute;
    bottom: -46px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 300;
    font-size: 13px;
    color: var(--text-ghost);
    letter-spacing: 2px;
    opacity: 0;
    transition: opacity 1s ease;
    white-space: nowrap;
  }

  body.listening .duration { opacity: 1; }

  /* ear line — names the input device */
  .ear-line {
    position: absolute;
    top: 100%;
    margin-top: 64px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 300;
    font-size: 12px;
    color: var(--text-ghost);
    letter-spacing: 0.5px;
    opacity: 0;
    transition: opacity 1.5s ease;
    white-space: nowrap;
    pointer-events: none;
  }

  .ear-line.show { opacity: 1; }
  .ear-line.notice { color: var(--text-dim); }

  /* saved whisper */
  .saved-note {
    position: absolute;
    bottom: -46px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 300;
    font-size: 12px;
    color: var(--text-ghost);
    letter-spacing: 1px;
    opacity: 0;
    transition: opacity 1.2s ease;
    white-space: nowrap;
    pointer-events: none;
  }

  .saved-note.show { opacity: 1; }

  /* ---------- Library ---------- */
  .library-space {
    z-index: 1;
    padding: 60px 40px 140px;
    align-items: flex-start;
    justify-content: flex-start;
    overflow-y: auto;
  }

  .library-header {
    width: 100%;
    max-width: 560px;
    margin: 0 auto 40px;
  }

  .library-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: 28px;
    color: var(--text-soft);
    margin-bottom: 8px;
  }

  .library-count {
    font-size: 12px;
    font-weight: 300;
    color: var(--text-ghost);
    letter-spacing: 0.5px;
  }

  .entries {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
  }

  .entry-block {
    border-bottom: 1px solid var(--hairline);
    animation: fadeUp 0.6s ease both;
  }

  .entry {
    display: flex;
    align-items: center;
    padding: 18px 0;
    cursor: pointer;
    gap: 18px;
  }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .entry-date {
    font-weight: 300;
    font-size: 12px;
    color: var(--text-dim);
    letter-spacing: 0.3px;
    min-width: 96px;
  }

  .entry-wave {
    flex: 1;
    height: 24px;
    display: flex;
    align-items: center;
    gap: 1.5px;
    overflow: hidden;
  }

  .entry-wave .bar {
    width: 2px;
    min-height: 2px;
    border-radius: 1px;
    background: var(--wave);
    transition: background 0.3s ease;
    flex-shrink: 0;
  }

  .entry:hover .bar { background: var(--wave-hover); }

  .entry.playing .bar {
    background: var(--accent-warm);
    animation: entryPulse 1.5s ease-in-out infinite alternate;
  }

  @keyframes entryPulse {
    from { opacity: 0.55; }
    to { opacity: 1; }
  }

  .entry-duration {
    font-weight: 300;
    font-size: 11px;
    color: var(--text-ghost);
    letter-spacing: 1px;
    min-width: 40px;
    text-align: right;
  }

  .entry-remove {
    font-weight: 300;
    font-size: 11px;
    color: var(--text-ghost);
    letter-spacing: 0.5px;
    opacity: 0;
    transition: opacity 0.4s ease, color 0.3s ease;
    padding: 4px 0 4px 8px;
    white-space: nowrap;
  }

  .entry-take {
    font-weight: 300;
    font-size: 11px;
    color: var(--text-ghost);
    letter-spacing: 0.5px;
    opacity: 0;
    transition: opacity 0.4s ease, color 0.3s ease;
    padding: 4px 0 4px 8px;
    white-space: nowrap;
  }

  .entry:hover .entry-take { opacity: 1; }
  .entry-take:hover { color: var(--text-dim); }

  .entry:hover .entry-remove { opacity: 1; }

  .entry-remove:hover { color: var(--text-dim); }

  .entry-remove.confirm { color: var(--danger-soft); opacity: 1; }

  @media (hover: none) {
    .entry-remove, .entry-take { opacity: 0.5; }
  }

  .empty-note {
    width: 100%;
    max-width: 560px;
    margin: 40px auto 0;
    font-weight: 300;
    font-size: 13px;
    color: var(--text-ghost);
    letter-spacing: 0.5px;
  }

  .random-btn {
    margin: 36px auto 0;
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    font-size: 12px;
    color: var(--text-ghost);
    letter-spacing: 1px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 12px 24px;
    border-radius: 24px;
    transition: all 0.5s ease;
  }

  .random-btn:hover {
    color: var(--text-dim);
    background: var(--hover-wash);
  }

  .back-hint {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 300;
    font-size: 12px;
    color: var(--text-ghost);
    letter-spacing: 0.5px;
    pointer-events: none;
  }

  /* ---------- Hours (theme picker) ---------- */
  .hours {
    position: fixed;
    top: 24px;
    right: 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    z-index: 6;
  }

  .hour-dabs {
    display: flex;
    gap: 12px;
  }

  .hour-dab {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--hairline);
    cursor: pointer;
    position: relative;
    padding: 0;
    background: none;
    transition: transform 0.4s ease;
  }

  .hour-dab::after {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 50%;
  }

  .hour-dab:hover { transform: scale(1.15); }

  .hour-dab.current { border-color: var(--text-dim); }

  .hour-name {
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--text-ghost);
  }

  @media (max-width: 600px) {
    .hours { top: 18px; right: 20px; }
  }

  /* ---------- Playback bar ---------- */
  .playback-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 40px 48px;
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(transparent, var(--veil) 40%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
    z-index: 5;
  }

  .playback-bar.visible { opacity: 1; pointer-events: all; }

  .playback-date {
    font-size: 12px;
    font-weight: 300;
    color: var(--text-dim);
    min-width: 96px;
    transition: opacity 1.5s ease;
  }

  .playback-date.veiled { opacity: 0; }

  .playback-progress {
    flex: 1;
    height: 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  .playback-track {
    width: 100%;
    height: 2px;
    background: var(--track);
    border-radius: 1px;
    overflow: hidden;
  }

  .playback-fill {
    height: 100%;
    width: 0%;
    background: var(--accent-warm);
    border-radius: 1px;
    transition: none;
  }

  .playback-time {
    font-size: 11px;
    font-weight: 300;
    color: var(--text-ghost);
    letter-spacing: 1px;
    min-width: 84px;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  @media (max-width: 600px) {
    .library-space { padding: 48px 24px 140px; }
    .playback-bar { padding: 20px 24px 40px; }
    .entry-date { min-width: 72px; font-size: 11px; }
  }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition-duration: 0.01s !important; }
  }

/* ---------- leave (sign out) ---------- */
.leave-word {
  position: fixed;
  bottom: 20px;
  right: 28px;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--text-ghost);
  cursor: pointer;
  transition: color 0.4s ease;
  z-index: 6;
}
.leave-word:hover { color: var(--text-dim); }

/* ---------- read (the words) ---------- */
.entry-read {
  font-weight: 300;
  font-size: 11px;
  color: var(--text-ghost);
  letter-spacing: 0.5px;
  opacity: 0;
  transition: opacity 0.4s ease, color 0.3s ease;
  padding: 4px 0 4px 8px;
  white-space: nowrap;
}
.entry:hover .entry-read { opacity: 1; }
.entry-read:hover { color: var(--text-dim); }
@media (hover: none) { .entry-read { opacity: 0.5; } }

.entry-body {
  display: none;
  padding: 0 0 22px;
}
.entry-body.open { display: block; }

.entry-body .words {
  font-weight: 300;
  font-size: 13.5px;
  line-height: 1.9;
  letter-spacing: 0.2px;
  color: var(--text-dim);
  max-width: 480px;
  white-space: pre-wrap;
}

.entry-body .body-line {
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--text-ghost);
}

.whisper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.whisper input {
  background: none;
  border: none;
  border-bottom: 1px solid var(--hairline);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.3px;
  color: var(--text-dim);
  padding: 6px 2px;
  width: 220px;
  outline: none;
}
.whisper input::placeholder { color: var(--text-ghost); }
.whisper input:focus { border-bottom-color: var(--text-ghost); }
.whisper button {
  background: none;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  font-size: 13px;
  color: var(--text-ghost);
  cursor: pointer;
  padding: 6px 8px;
  transition: color 0.3s ease;
}
.whisper button:hover { color: var(--text-dim); }

/* ---------- the reading room ---------- */
.reading-room {
  position: fixed;
  inset: 0;
  background: var(--bg-idle);
  z-index: 20;
  overflow-y: auto;
  padding: 72px 32px 96px;
  animation: roomFade 0.5s ease both;
  cursor: default;
}
@keyframes roomFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.reading-room .rr-column {
  max-width: 560px;
  margin: 0 auto;
}
.reading-room .rr-date {
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--text-ghost);
  margin-bottom: 28px;
}
.reading-room .rr-words {
  font-weight: 300;
  font-size: 15px;
  line-height: 2;
  letter-spacing: 0.2px;
  color: var(--text-dim);
  white-space: pre-wrap;
  user-select: text;
  -webkit-user-select: text;
}
.reading-room .rr-hint {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--text-ghost);
  pointer-events: none;
}

.entry-body .words {
  user-select: text;
  -webkit-user-select: text;
}

/* ---------- playback pause/quit ---------- */
.playback-quit {
  font-weight: 300;
  font-size: 15px;
  color: var(--text-ghost);
  cursor: pointer;
  padding: 4px 2px 4px 10px;
  transition: color 0.3s ease;
  line-height: 1;
}
.playback-quit:hover { color: var(--text-dim); }

.entry.playing.paused .bar {
  animation: none;
  opacity: 0.7;
}