/* ============= Brand tokens (per-flyer via JS) ============= */
:root{
  --brand: #ff8a00;
  --accent: #ffc422;
  --text: #757575;
  --bg: #fff;
  --wa: #25d366;     /* WhatsApp brand green */
  --logo-height: 48px;
  --nudge-count: 5;   /* number of pulses */
  --nudge-dur: 1.1s;  /* pulse length */

  /* new sizes */
  --logo-height: 42px;   /* a bit smaller than before */
	--main-size: 184px;    /* big round play/pause */
	--side-size: 64px;     /* larger prev/next tap target */
	--side-icon: 56px;     /* larger prev/next glyph */
	--share-size: 72px;    /* larger share button */
  --share-pill: 68px;          /* button diameter */
  --share-icon: 32px;          /* inner glyph size */
}

/* ============= Layout ============= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:#111;
  font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

.flyer{
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 20px 40px;
  text-align: center;
}

/* ============= Brand header ============= */
.brand{ margin: 12px 0 32px; }
#brand-logo{
  height: var(--logo-height);
  width: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

/* ============= Timeline ============= */
.timeline{
  display:flex;
  align-items:center;
  gap:16px;
  justify-content:center;
  margin: 6px 0 28px;
}
.timeline .time{
  color: var(--text);
  font-size: 14px;
  width: 60px;
}

/* native <progress> colors */
progress.amplitude-song-played-progress{
  -webkit-appearance:none;
  appearance:none;
  height: 14px;
  border-radius: 9px;
  width: 100%;
  max-width: 380px;
  border:0;
  background:#f2f2f2;
  overflow:hidden;
}
progress[value]::-webkit-progress-bar{ background:#f3f3f3 }
progress[value]::-webkit-progress-value{ background:var(--accent) }
progress[value]::-moz-progress-bar{ background:var(--accent) }

/* ============= Controls ============= */
.controls{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap: 28px;
  margin: 10px 0 40px;
}

.ctrl{
  appearance:none;border:0;background:transparent;cursor:pointer;padding:0;
  color: var(--brand);
  width: var(--side-size);
  height: var(--side-size);
  display:grid;place-items:center;
}
.ctrl svg{ width: var(--side-icon); height: var(--side-icon); }

.ctrl--main{
  width: var(--main-size);
  height: var(--main-size);
  border-radius: 50%;
  display:grid; place-items:center; position:relative;
}
.ctrl--main .icon{ position:absolute; inset:0; width:100%; height:100%; display:none }
.ctrl--main .btn-bg{ fill: var(--brand) }

/* Toggle which icon shows (Amplitude adds these classes) */
.amplitude-paused  .icon--play  { display:block }
.amplitude-playing .icon--pause { display:block }

/* small phones: taper the main button a bit */
@media (max-width:360px){
  :root{ --main-size: 180px; --side-size: 44px; --side-icon: 36px; }
}

/* ============= Meta ============= */
.meta{ margin: 40px 0 6px }
#track-title{
  font-size: 16px; font-weight:600; margin:0; color:#333;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ============= Share ============= */
.share-row{
  display:flex; gap:14px; align-items:center; justify-content:center;
  margin-top: 12px;
}

.btn-wa{
  display:flex; align-items:center; gap:8px;
  border:0; cursor:pointer; padding:10px 14px; border-radius:999px;
  color:#fff; background:var(--wa);
  font-weight:600; font-size:16px;
  box-shadow: 0 4px 10px rgba(37,211,102,.25);
}
.btn-wa svg{ width:22px; height:22px }

/* reuse your existing share button but make it text+icon and a bit larger */
.share-btn{
  display:flex; align-items:center; gap:8px;
  color: var(--brand);
  border:2px solid currentColor; background:transparent; cursor:pointer;
  padding:10px 14px; border-radius:999px; font-weight:600; font-size:16px;
}
.share-btn svg{ width:22px; height:22px }

.share-row--icons{
  display:flex; gap:16px; justify-content:center; align-items:center;
  margin-top: 14px;
}

.pill{
  width: var(--share-pill);
  height: var(--share-pill);
  border-radius: 50%;
  position: relative; 
  display:grid; place-items:center;
  border:none; cursor:pointer; outline: none;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  transition: transform .08s ease, box-shadow .2s ease;
}
.pill:active{ transform: scale(.96); }
.pill svg{ width: var(--share-icon); height: var(--share-icon); }

.pill--wa{ background: var(--wa); }
.pill--more{
  background: #fff;
  border: 2px solid var(--brand);
  color: var(--brand);
}

/* show two subtle “ring” pulses + a tiny scale pop */
.pill--wa.nudge{
  animation: nudge-pop var(--nudge-dur) ease-in-out 0s var(--nudge-count);
  box-shadow: 0 8px 18px rgba(37,211,102,.28);
}

.pill--wa.nudge::after{
  content:'';
  position:absolute; inset:-8px;
  border:3px solid var(--wa); border-radius:50%;
  opacity:0; pointer-events:none;
  animation: nudge-ring var(--nudge-dur) ease-out 0s var(--nudge-count);
}

@keyframes nudge-pop{
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.07); }
}

@keyframes nudge-ring{
  0%   { transform: scale(.85); opacity:.50; }
  100% { transform: scale(1.25); opacity:0; }
}

/* accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .pill--wa.nudge,
  .pill--wa.nudge::after{
    animation: none !important;
  }
}

/* bigger on tablets */
@media (min-width:768px){
  :root{ --share-pill: 76px; --share-icon: 36px; }
}

/* small screens can stack if needed */
@media (max-width:360px){
  .share-row{ flex-direction:column; gap:10px }
}

/* Small screens */
@media (max-width:360px){
  .ctrl--main{ width:140px;height:140px }
  #track-title{ font-size:16px }
}

/* Large phone / small tablet */
@media (min-width:480px){
  .timeline{ gap:20px }
}

/* AUMA container */

/* hide via either [hidden] or .hidden */
#auma[hidden],
#auma.hidden { display: none; }

/* square container (responsive, cropped) */
#auma{
  position: relative;
  width: 100%;
  max-width: min(720px, 92vw);
  aspect-ratio: 1 / 1;
  margin: 12px auto 10px;
  border-radius: 10px;
  overflow: hidden;
  background: #f5f5f5;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  padding: 0;                /* ensure no stray padding affects sizing */
}

/* the image: always fill the square and crop */
#auma > img,
#auma #auma-image,
#auma #auma-img{
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  opacity: 0;                            /* fade-in on load */
  transition: opacity .35s ease;
}

/* when JS sets .ready after onload */
#auma > img.ready,
#auma #auma-image.ready,
#auma #auma-img.ready{ opacity: 1; }


/* Compact layout ONLY when an AUMA image is present */
@media (max-width: 480px) {

/* smaller logo ONLY when AUMA is visible */
.has-auma #brand-logo img,
.has-auma img#brand-logo {
  max-height: clamp(28px, 7svh, 36px);
  height: auto;
}

  /* thinner progress */
  .has-auma .amplitude-song-played-progress {
    height: 6px;
    margin: 6px 0 10px;
    border-radius: 6px;
  }

  /* smaller centered play, slightly larger prev/next for thumb accuracy */
  .has-auma .ctrl--main {
    width: clamp(96px, 22svw, 120px);
    height: clamp(96px, 22svw, 120px);
    margin-inline: auto;          /* center even if row wrapper varies */
  }
  .has-auma #prev,
  .has-auma #next { transform: scale(1.1); }

  /* AUMA square sized to fit above-the-fold with share buttons */
  .has-auma #auma {
    --box: min(88vw, 50svh);      /* square that fits the viewport */
    width: var(--box);
    height: var(--box);
    aspect-ratio: auto;           /* explicit h/w keeps it square */
    margin: 12px auto 8px;
  }

  /* share row a bit tighter */
  .has-auma .share-row {
    margin-top: 10px;
    gap: 14px;
  }

.has-auma #track-title { 
    display: none !important; 
  }
  
/* AUMA controls on small screens: force a stable 3-column layout */
  @media (max-width: 480px){
    /* the wrapper in your HTML is <section class="controls"> */
    .has-auma .controls{
      display: grid !important;
      grid-template-columns: 1fr auto 1fr;   /* previous | play | next */
      align-items: center;
      gap: 14px;
      width: 100%;
    }
  
    /* left button (your id is #previous) + safety nets */
    .has-auma #previous,
    .has-auma #prev,
    .has-auma .amplitude-prev{
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      min-width: 44px;
      min-height: 44px;
      justify-self: end;                     /* snap to left column edge */
    }
  
    /* right button */
    .has-auma #next,
    .has-auma .amplitude-next{
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      min-width: 44px;
      min-height: 44px;
      justify-self: start;                   /* snap to right column edge */
    }
  
    /* center play/pause */
    .has-auma #play-pause,
    .has-auma .ctrl--main{
      justify-self: center;
      width: clamp(96px, 22svw, 120px);
      height: clamp(96px, 22svw, 120px);
    }
  }
  
  /* Hide the side controls when a flyer has only one track */
  .single-track #previous,
  .single-track #next,
  .single-track .amplitude-prev,
  .single-track .amplitude-next {
    display: none !important;
  }
  
  /* Audio-only: make sure the play button stays centered */
  .single-track #play-pause,
  .single-track .ctrl--main {
    margin-left: auto;
    margin-right: auto;
  }
  
  /* AUMA on phones: collapse 3-col grid to a single centered column */
  @media (max-width: 480px){
    .has-auma.single-track .controls {
      display: grid !important;
      grid-template-columns: 1fr;     /* play only */
      justify-items: center;
      align-items: center;
      gap: 0;
    }
  }  

/* generic .hidden should not reserve space anywhere */
.hidden{ display: none; }

/* -----------------------------------------------------------
   COMPACT LAYOUT (applies when <html class="compact"> … )
   Matches your current HTML/IDs only — no .whats-btn/.nav-btn
   ----------------------------------------------------------- */

/* Make viewport calc more reliable on mobile browsers */
html, body { min-height: 100svh; }


/* ---------- Compact tweaks ---------- */
html.compact #brand-logo img {
  max-height: 28px;           /* smaller top logo */
}

html.compact .progress-wrap {
  margin-top: 8px;
}

html.compact .times {
  font-size: 12px;            /* smaller time labels */
}

html.compact .controls {
  gap: 12px;
  margin: 8px 0 0;
}

/* Audio-only keeps a generous play size; AUMA gets a smaller one */
html.compact:not(.has-auma) #playpause {
  width: 140px;
  height: 140px;
}
html.compact.has-auma #playpause {
  width: 120px;
  height: 120px;
}

/* Nudge prev/next down a notch on very small screens */
html.compact #prev,
html.compact #next {
  transform: scale(0.9);
}

/* AUMA image: keep room for the sticky share row */
html.compact #auma {
  margin-top: 8px;
}
html.compact #auma #auma-image,
html.compact #auma #auma-img,
html.compact #auma > img {
  /* Square or rectangular, but don’t let it push share off screen */
  max-height: min(48svh, 420px);
  border-radius: 12px;
}

/* Tighten general vertical rhythm a bit */
html.compact section,
html.compact .auma-card { margin-block: 8px; }

/* Optional: hide track title when space is tight and AUMA is present */
html.compact.has-auma #track-title { display: none; }

/* Share buttons (generic — works for either <button> or <a>) */
html.compact #share button,
html.compact #share a {
  /* If your round share buttons have fixed px sizes,
     this gives them a compact size without new classes */
  width: clamp(52px, 9.5vmin, 64px);
  height: clamp(52px, 9.5vmin, 64px);
  line-height: clamp(52px, 9.5vmin, 64px);
}