/* What's New - the shared pieces: the lean release beat, the entry link + dot,
 * and permanent App Store discovery. The /whats-new page's own layout is inline
 * in templates/whats_new.html (page-specific CSS stays with its page).
 *
 * PRODUCT-CHANGELOG-1 replaced the MULTIPLICITY EVOLVED near-full-screen scrim
 * with ONE bounded card. No scrim, no scroll lock: the page behind it stays
 * readable and operable. Every colour, radius, shadow and easing resolves to a
 * foundation token, so the card moves with the design system.
 *
 * Desktop: a floating card, bottom-right. Mobile (under 720px): a bottom card
 * inset from the edges and above the safe area, never a takeover.
 */

/* ---- The beat ----------------------------------------------------------- */

.mxwn-beat {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 10080;                     /* above the album lens (10050) and dock */
  box-sizing: border-box;
  width: min(400px, calc(var(--mx-shell-vw, 100vw) - 48px));   /* shell contract: effective viewport */
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  display: flex;
}
.mxwn-beat[hidden] { display: none !important; }

.mxwn-beat-card {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 22px 20px;
  border: 1px solid var(--mx-line-strong, rgba(255,255,255,0.14));
  border-radius: var(--mx-r-lg, 20px);
  background:
    radial-gradient(120% 80% at 100% -10%, rgba(149,214,232,0.10), transparent 60%),
    linear-gradient(157deg, #16181c, #0d0e10);   /* opaque: the page must not read through */
  box-shadow: var(--mx-glass-shadow-flagship, 0 24px 64px rgba(0,0,0,0.52));
  color: var(--mx-text, #e7e9ea);
  animation: mxwn-rise var(--mx-dur-3, 420ms) var(--mx-ease-out, ease) both;
}
/* The card is a focus TARGET (so keyboard and screen-reader users meet it), not a
   control: its own border carries the state, the controls inside keep the ring. */
.mxwn-beat-card:focus, .mxwn-beat-card:focus-visible { outline: none; border-color: var(--mx-line-strong, rgba(255,255,255,0.22)); }

.mxwn-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;                        /* touch-safe, never a 24px hit area */
  height: 44px;
  border: 1px solid transparent;
  border-radius: var(--mx-r-pill, 999px);
  background: transparent;
  color: var(--mx-dim, #9aa3ad);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--mx-dur-1, 160ms) var(--mx-ease, ease),
              border-color var(--mx-dur-1, 160ms) var(--mx-ease, ease),
              background var(--mx-dur-1, 160ms) var(--mx-ease, ease);
}
.mxwn-close:hover { color: var(--mx-ink, #f4f2ee); border-color: var(--mx-line-strong, rgba(255,255,255,0.14)); background: rgba(255,255,255,0.05); }
.mxwn-close svg { width: 16px; height: 16px; display: block; }

.mxwn-eyebrow {
  margin: 0 44px 8px 0;
  font-family: var(--mx-font-display);
  font-size: var(--mx-eyebrow-size, 11px);
  letter-spacing: var(--mx-eyebrow-track, 0.22em);
  text-transform: uppercase;
  font-weight: 800;
  color: color-mix(in srgb, var(--mx-canon, #95d6e8) 74%, #fff);
}
.mxwn-beat-title {
  margin: 0 36px 8px 0;
  font-family: var(--mx-font-display);
  font-size: clamp(20px, calc(var(--mx-shell-vw, 100vw) * 0.022), 24px);
  font-weight: 800;
  letter-spacing: -0.012em;
  line-height: 1.12;
  color: var(--mx-ink, #f4f2ee);
  text-wrap: balance;
}
.mxwn-beat-deck {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mx-dim, #9aa3ad);
}
.mxwn-beat-also {
  margin: 14px 0 0;
  padding: 12px 0 0;
  list-style: none;
  border-top: 1px solid var(--mx-line-soft, rgba(255,255,255,0.06));
  display: grid;
  gap: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--mx-dim, #9aa3ad);
}
.mxwn-beat-also a { display: inline-flex; align-items: center; gap: 9px; color: var(--mx-text, #e7e9ea); text-decoration: none; }
.mxwn-beat-also a:hover { color: color-mix(in srgb, var(--mx-accent, var(--mx-canon)) 86%, #fff); }
/* The final destination mark, bare, in the destination's canonical accent. */
.mxwn-glyph { display: block; flex: none; width: 15px; height: 15px;
  color: var(--mx-accent, var(--mx-canon)); }
.mxwn-cta { display: inline-flex; align-items: center; gap: 8px; }
/* A compact card earns compact buttons: still a 44px touch target. */
.mxwn-actions .mx-btn { min-height: 44px; padding: 0 18px; font-size: 14px; }
.mxwn-cta .mxwn-glyph { width: 14px; height: 14px; }
.mx-btn--primary.mxwn-cta .mxwn-glyph { color: currentColor; }

.mxwn-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 16px;
}
/* Android is deliberately not a link and is styled so it never reads as one:
   there is no Play listing to point at. */
.mxwn-android {
  font-family: var(--mx-font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mx-faint, rgba(244,242,238,0.46));
}

/* ---- The entry link + one dot (never a number) --------------------------- */

.mxwn-entry {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  color: inherit;
  text-decoration: none;
}
.mxwn-entry:hover { color: var(--mx-canon, #95d6e8); }
.mxwn-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--mx-canon, #95d6e8);
  box-shadow: 0 0 0 3px rgba(149,214,232,0.14);
}
.mxwn-dot[hidden], .mxwn-sr[hidden] { display: none !important; }
.mxwn-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Permanent app discovery ------------------------------------------- */

.mxwn-panel { --mx-accent: var(--mx-canon, #95d6e8); }
.mxwn-panel-title {
  margin: 0 0 6px;
  font-family: var(--mx-font-display);
  font-size: 15px;
  font-weight: 750;
  color: var(--mx-ink, #f4f2ee);
}
.mxwn-panel-copy {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--mx-dim, #9aa3ad);
}
.mxwn-panel .mxwn-actions { margin-top: 13px; }

.mxwn-footlink {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}
.mxwn-footlink-app {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  font-family: var(--mx-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--mx-dim, #9aa3ad);
  text-decoration: none;
  transition: color var(--mx-dur-1, 160ms) var(--mx-ease, ease);
}
.mxwn-footlink-app:hover { color: var(--mx-canon, #95d6e8); }
.mxwn-footlink-app svg { width: 15px; height: 15px; flex: 0 0 auto; }
.mxwn-footlink-soon {
  font-family: var(--mx-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mx-faint, rgba(244,242,238,0.46));
}

.mxwn-replay {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}
/* Only before the permanent surface exists: rendered where a beat may exist and
   hidden until the script has confirmed one, so it is never a dead control. */
.mxwn-replay[hidden] { display: none !important; }

/* ---- Mobile: a bounded bottom card, never a takeover --------------------- */

@media (max-width: 719px) {
  .mxwn-beat {
    left: 12px;
    right: 12px;
    /* Clear the signed-in mobile dock (bottom 24px + 68px tall, shell.css) so
       the card never hides navigation while it is open. */
    bottom: calc(104px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: 440px;
    margin: 0 auto;
    max-height: calc(100vh - 128px);
    max-height: calc(100dvh - 128px);
  }
  .mxwn-beat-card { padding: 20px 18px 18px; animation-name: mxwn-slide; }
  .mxwn-actions .mx-btn--primary { flex: 1 1 auto; justify-content: center; }
}

@keyframes mxwn-rise {
  from { opacity: 0; transform: translateY(var(--motion-distance-product, 10px)); }
  to { opacity: 1; transform: none; }
}
@keyframes mxwn-slide {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mxwn-beat-card { animation: none; }
  .mxwn-close, .mxwn-footlink-app { transition: none; }
}