/*
 * Authoritative stability layer.
 * Keep structural/base visuals in styles.css; put cross-browser fixes and
 * final responsive overrides here so later changes do not rely on a long
 * chain of historical selector overrides.
 */

:root {
  --player-shade-top: .24;
  --player-shade-mid: .52;
  --player-shade-bottom: .82;
  --player-shade-base: .14;
  --player-backdrop-opacity: .68;
  --player-ink-rgb: 18 22 31;
}

/* One readable player contrast model for every artwork, including white covers. */
:root[data-theme] .now-playing-backdrop img {
  opacity: var(--player-backdrop-opacity);
}
:root[data-theme] .now-playing-shade {
  background:
    linear-gradient(
      180deg,
      rgb(var(--player-ink-rgb) / var(--player-shade-top)),
      rgb(var(--player-ink-rgb) / var(--player-shade-mid)) 48%,
      rgb(var(--player-ink-rgb) / var(--player-shade-bottom))
    ),
    rgb(var(--player-ink-rgb) / var(--player-shade-base));
}
.player-shell {
  background:
    linear-gradient(135deg, rgb(var(--art-mid-rgb) / .24), transparent 68%),
    rgb(var(--player-ink-rgb) / .96);
  border-color: rgb(255 255 255 / .13);
  box-shadow:
    0 20px 60px rgb(0 0 0 / .34),
    0 0 0 1px rgb(var(--art-warm-rgb) / .06);
}
.player-button,
.now-playing-play {
  color: rgb(var(--player-ink-rgb));
}

/* Safe-area protection for landscape iPhones and other cutout displays. */
main {
  width: min(
    1180px,
    calc(100% - 2.2rem - env(safe-area-inset-left) - env(safe-area-inset-right))
  );
}
.topbar {
  padding-left: max(clamp(1.25rem, 4vw, 4rem), calc(env(safe-area-inset-left) + .75rem));
  padding-right: max(clamp(1.25rem, 4vw, 4rem), calc(env(safe-area-inset-right) + .75rem));
}
footer {
  padding-left: max(1.2rem, calc(env(safe-area-inset-left) + .75rem));
  padding-right: max(1.2rem, calc(env(safe-area-inset-right) + .75rem));
}
.player-shell {
  width: min(
    760px,
    calc(100% - 1.25rem - env(safe-area-inset-left) - env(safe-area-inset-right))
  );
}

/* Stable editorial reading measure. */
.story > .section-kicker,
.story-address,
.story h2.story-address,
.story-copy,
.closing-note > .section-kicker,
.closing-note h2,
.closing-note-inner > p {
  width: min(49rem, 100%);
  max-width: 49rem;
  margin-left: auto;
  margin-right: auto;
}

/* Very narrow screens may wrap rather than silently crop the birthday line. */
@media (max-width: 359px) {
  main {
    width: calc(100% - 1.4rem - env(safe-area-inset-left) - env(safe-area-inset-right));
  }
  .hero h1 .accent {
    white-space: normal;
    text-wrap: balance;
    font-size: clamp(2.25rem, 13vw, 2.8rem);
    line-height: 1.04;
  }
}

/* Short desktop windows and modern phones in landscape: keep controls reachable. */
@media (min-width: 761px) and (max-height: 720px) {
  .now-playing-surface {
    min-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }
  .now-playing-header {
    position: sticky;
    top: 0;
    z-index: 6;
  }
  .now-playing-layout {
    min-height: auto;
    align-items: start;
    padding-top: .35rem;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    grid-template-columns: minmax(170px, 300px) minmax(260px, 1fr);
    gap: clamp(1.4rem, 5vw, 3.5rem);
  }
  .now-playing-artwork {
    width: min(42vh, 20rem);
    width: min(42dvh, 20rem);
  }
  .now-playing-meta {
    margin-top: .7rem;
  }
  .now-playing-progress {
    margin-top: .55rem;
  }
  .now-playing-controls {
    margin-top: .2rem;
  }
  .now-playing-play {
    width: 58px;
    height: 58px;
  }
  .now-playing-side {
    height: min(70vh, 31rem);
    height: min(70dvh, 31rem);
  }
}

/* Older/smaller landscape phones that still enter the <=760px mobile layout. */
@media (max-width: 760px) and (orientation: landscape) and (max-height: 620px) {
  .now-playing-surface {
    min-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }
  .now-playing-layout {
    height: auto;
    min-height: calc(100dvh - 56px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow: visible;
  }
  .now-playing-primary {
    --mobile-artwork-size: min(34dvh, 11rem);
    --mobile-stage-height: calc(var(--mobile-artwork-size) + 4.25rem);
    height: auto;
    min-height: calc(100dvh - 70px);
    align-content: start;
    padding-bottom: max(.75rem, env(safe-area-inset-bottom));
  }
  .now-playing:not(.message-mode):not(.lyrics-mode) .now-playing-stage {
    transform: none;
  }
  .mobile-player-modes,
  .now-playing-progress,
  .now-playing-controls {
    margin-top: .1rem;
  }
}

/* Keep the final mobile page width safe after the older <=560px rule. */
@media (max-width: 560px) {
  main {
    width: calc(100% - 2rem - env(safe-area-inset-left) - env(safe-area-inset-right));
  }
}


/* Editorial copy: semantic paragraphs with restrained spacing instead of blank-line height. */
.story-body-long {
  color: var(--muted);
  font-size: clamp(1rem, 1.35vw, 1.08rem);
  line-height: 2.02;
  letter-spacing: .012em;
}
.story-body-long > p,
.closing-body-long > p {
  margin: 0;
  text-wrap: pretty;
}
.story-body-long > p + p {
  margin-top: .9em;
}
.story-body-long > .editorial-coda {
  margin-top: 1.35em;
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
  font-weight: 560;
  line-height: 1.62;
  white-space: pre-line;
}

.closing-body-long {
  width: min(49rem, 100%);
  max-width: 49rem;
  margin: 2.25rem auto 0;
  color: var(--muted);
  font-size: clamp(1.02rem, 1.45vw, 1.12rem);
  line-height: 2.02;
  letter-spacing: .01em;
}
.closing-body-long > p + p {
  margin-top: .9em;
}

/* Keep the 2025 archive in the current document so music never has to unload.
   The archived page owns its own navbar; the parent only provides the modal shell. */
.memory-archive {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #fff;
  overflow: hidden;
}
.memory-archive[open] {
  display: block;
}
.memory-archive::backdrop {
  background: rgb(10 13 24 / .72);
}
.memory-archive-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

@media (max-width: 560px) {
  .story-body-long {
    font-size: .98rem;
    line-height: 1.94;
  }
  .story-body-long > p + p,
  .closing-body-long > p + p {
    margin-top: .78em;
  }
  .story-body-long > .editorial-coda {
    margin-top: 1.15em;
  }
  .closing-body-long {
    margin-top: 1.65rem;
    font-size: .98rem;
    line-height: 1.94;
  }

}

/* Touch devices can retain :hover after a tap. Keep idle cards visually stable. */
@media (hover: none) {
  .track-card:hover {
    transform: none;
    border-color: var(--line);
    background: linear-gradient(145deg, var(--panel), var(--surface));
  }

  .track-card.active,
  .track-card.active:hover {
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: inset 3px 0 var(--accent);
  }
}

/* 2026-10-06 · keep the original mobile mode row; use text instead of an icon for lyrics. */
@media (max-width: 760px) {
  .mobile-lyrics-button {
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
  }
}

/* 2026-10-06 · centered QQ Music handoff between the tracklist and closing note. */
.playlist-qqmusic-link {
  margin: 3.25rem auto 0;
  text-align: center;
}

.playlist-qqmusic-link a {
  display: inline-block;
  color: var(--accent);
  font-size: .88rem;
  font-weight: 650;
  line-height: 1.5;
  letter-spacing: .02em;
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .22em;
  transition: opacity .18s ease;
}

.playlist-qqmusic-link a:hover {
  opacity: .72;
}

/* Keep the section boundary in the same visual position after inserting the link. */
.playlist-section {
  padding-bottom: 3.25rem;
}

@media (hover: none) {
  .playlist-qqmusic-link a:active {
    opacity: .62;
  }
}

@media (max-width: 560px) {
  .playlist-section {
    padding-bottom: 1.45rem;
  }

  .playlist-qqmusic-link {
    margin-top: 1.55rem;
  }

  .playlist-qqmusic-link a {
    font-size: .84rem;
  }
}