/* ---------------- release popup ---------------- */

.popup {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  border: 0;
  background: transparent;
  overscroll-behavior: contain;
}

.popup::backdrop { background: rgba(28, 8, 30, .55); backdrop-filter: blur(3px); }
.popup:not([open]) { display: none; }
.popup[hidden] { display: none; }

.popup__panel {
  position: relative;
  width: clamp(300px, 26vw, 520px);
  max-height: min(88vh, 780px);
  overflow: visible;
  padding: 14px 14px 22px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(168deg, rgba(196, 108, 205, .93), rgba(148, 56, 156, .95));
  box-shadow: var(--shadow-float);
  transform-origin: center;
  animation: popup-in 280ms cubic-bezier(.2, .9, .3, 1.15);
}

/* whisper-level grain so the large flat panel keeps some depth */
.popup__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* On a phone, `vh` counts the space behind the browser's own address bar, so
   88vh can be taller than what the reader can actually see. `dvh` tracks the
   visible height; browsers without it keep the vh cap. */
@supports (height: 1dvh) {
  .popup__panel { max-height: min(88dvh, 780px); }
}

@keyframes popup-in {
  from { opacity: 0; transform: translateY(10px) scale(.965); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .popup__panel { animation-duration: 1ms; }
}

.popup__banner {
  display: block;
  width: 100%;
  aspect-ratio: 2.85 / 1;
  object-fit: cover;
  object-position: center 16%;
  border-radius: 6px;
  background: var(--violet-800);
}

.popup__close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: var(--radius-pill);
  background: rgba(88, 84, 92, .88);
  color: #fff;
  font-size: 22px; line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-cover);
  transition: transform 180ms cubic-bezier(.2, .9, .3, 1.2), background-color 180ms ease;
}
.popup__close:hover  { background: rgba(120, 114, 126, .95); transform: scale(1.06); }
.popup__close:active { transform: scale(.94); }
.popup__close:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--petal-200); }

.popup__title {
  margin: var(--sp-4) 0 0;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 400;
  text-align: center;
  letter-spacing: -0.01em;
}
.popup__date {
  margin: 2px 0 0;
  text-align: center;
  font-size: 14px;
  opacity: .85;
}

.popup__section-label {
  margin: var(--sp-4) 0 var(--sp-2);
  text-align: center;
  font-size: 15px;
  opacity: .95;
}

/* The release panel is a flex column, and the expanded "about" text is the
   ONE child allowed to give way. The panel is capped at 88vh but stays
   `overflow: visible` (the close button overhangs its corner - hard-won rule
   2), so anything taller than the cap simply painted past the bottom edge.
   That is exactly what happened on a phone (2026-09-11): the expanded text
   used to be a fixed 34vh, and banner + title + 34vh + two rows of buttons
   came to more than the panel, so the buttons sat outside it - 24px past the
   edge at 375x812, 82px at 412x730. Measured, not eyeballed.

   Now nothing has a viewport-relative height. Every child is `flex: none`
   and keeps its natural size; the expanded text is `flex: 1 1 auto` with
   `min-height: 0`, so it takes whatever the cap leaves over and scrolls
   inside itself. The buttons can never leave the panel because they are
   sized first and the text gets the remainder. When everything fits, the
   panel just shrinks to its content as before.

   Scoped to the release popup (the --release modifier): the editor and the
   home "show more" popup reuse .popup__panel with their own layout. */
.popup__panel--release {
  display: flex;
  flex-direction: column;
}
.popup__panel--release > * { flex: none; }

/* "about" text - clamped to three lines until expanded */
.popup__about {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .95);
  white-space: pre-wrap;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
/* Expanded (desktop): the box grows from three lines to EXACTLY six, takes a
   4px light-pink border so it visibly became a box, and scrolls inside that
   border - the site scrollbar and its track sit inside the border because a
   scrollbar lives at the edge of the padding box. The owner's design,
   2026-09-11, after the first fix left a box that scrolled with nothing to
   say so. `content-box` makes the 5.1em / 10.2em the LINES, with the border
   and padding added outside; the negative inline margin puts the border out
   into the panel's padding so the text does not move when it appears
   (-10px + 4px border + 6px padding = 0). Under 760px the box never expands
   in place - popup.js opens the description in its own dialog instead. */
.popup__about.is-expanded {
  -webkit-line-clamp: unset;
  display: block;
  flex: 1 1 auto;
  box-sizing: content-box;
  min-height: 5.1em;      /* 3 lines - never smaller than it was collapsed */
  max-height: 10.2em;     /* 6 lines */
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 -10px;
  padding: 0 8px 0 6px;   /* no vertical padding: it would show the top of a 7th line (rule 12) */
  border: 4px solid var(--petal-200);
  border-radius: 10px;
}
.popup__about:empty::after {
  content: 'No description yet.';
  opacity: .6;
  font-style: italic;
}

.popup__more {
  display: block;
  margin: var(--sp-2) auto 0;
  padding: 4px 10px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: rgba(255, 255, 255, .95);
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
  transition: background-color 180ms ease, transform 180ms ease;
}
.popup__more:hover  { background: rgba(255, 255, 255, .14); }
.popup__more:active { transform: scale(.97); }
.popup__more:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--petal-200); }
.popup__more[hidden] { display: none; }

/* platform buttons: four per row, centred, wrapping.
   The .platform button itself now lives in site.css - the home panel uses the
   same control, and only the music page loads this file. */
.popup__platforms {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 320px;
  margin: var(--sp-6) auto 0;
}

/* The description on its own - the phone's "show more...", 2026-09-11.
   Same shell the home page's announcement popup uses (a second <dialog> in
   the top layer, over the release popup), in the release popup's own colours
   so it reads as part of the thing that was tapped. Flex column: the text is
   the one child that gives way and scrolls, behind the same 4px pink border
   the desktop box grows. Closing it (X, Esc, backdrop) lands back on the
   release popup with the buttons. */
.popup__panel--about {
  width: min(92vw, 720px);
  max-height: min(86vh, 760px);
  display: flex;
  flex-direction: column;
  padding: 14px 14px 16px;
}
.popup__panel--about > * { flex: none; }
.popup__title--about {
  margin: 4px 30px 0;     /* clear the overhanging close button */
  font-size: 19px;
}
.popup__section-label--about { margin: var(--sp-3) 0 var(--sp-2); }
.popup__aboutFull {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 12px;
  border: 4px solid var(--petal-200);
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.7;
  white-space: pre-wrap;
  color: rgba(255, 255, 255, .95);
}
@supports (height: 1dvh) {
  .popup__panel--about { max-height: min(86dvh, 760px); }
}
/* The UA sheet caps a <dialog> at calc(100% - 38px), so on a phone a 92vw
   panel is wider than the dialog holding it and runs off the right edge.
   100% of the dialog's content box instead - the same rule the home popup
   needed (.popup__panel--say in home.css). */
@media (max-width: 760px) {
  .popup__panel--about { width: 100%; padding: 12px 12px 14px; }
  .popup__aboutFull { font-size: 14px; padding: 10px 11px; }
}

.popup__no-links {
  margin: var(--sp-5) 0 0;
  text-align: center;
  font-size: 13px;
  opacity: .72;
  font-style: italic;
}