/* ---------------------------------------------------------------------------
   Audioguide -- Klanglicht "A01_1920W_AUDIOGUIDE_START" design.
   Desktop values are taken 1:1 from the 1920px frame; below that the type
   scale and gutters shrink with the viewport. At 640px and below the layout
   switches to the 390px "A02-A05" mobile screens (see the end of the file).
   --------------------------------------------------------------------------- */

/* Self-hosted so the shell renders correctly offline. Figtree stands in for
   TT Norms Pro (commercial); if TT Norms Pro is installed locally it wins. */
@font-face {
  font-family: "Raleway";
  src: url("./assets/fonts/raleway-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("./assets/fonts/figtree-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("./assets/fonts/figtree-latin-italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --violet: #16022c;       /* page background, dark text */
  --yellow: #fffb90;       /* brand accent, play buttons */
  --cream: #fffdc7;        /* open row */
  --cream-deep: #f4f0a6;   /* artwork placeholder on cream */
  --lilac: #b9b3bf;        /* muted text, footer */
  --line: #5b4d6b;         /* row dividers, progress border */
  --white: #ffffff;
  --shade: rgba(0, 0, 0, 0.5);

  --font-text: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "TT Norms Pro", "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --content: 1080px;
  --gutter: clamp(16px, 4vw, 24px);   /* inner padding of a row */

  /* Row type scale: 34 / 26px at 1920. */
  --fs-title: clamp(1.25rem, 0.9rem + 1.4vw, 2.125rem);
  --fs-duration: clamp(1rem, 0.75rem + 0.9vw, 1.625rem);
  --icon: clamp(36px, 28px + 1.2vw, 48px);
  --label-col: clamp(36px, 24px + 2vw, 56px);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-text);
  background: var(--violet);
  color: var(--white);
  line-height: 1.3;
  /* Respect notches and home indicators when running standalone. */
  padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
  -webkit-tap-highlight-color: transparent;
}

img { display: block; max-width: 100%; }

:where(button, input, a):focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}
.row--active :where(button, input, a):focus-visible { outline-color: var(--violet); }

/* --- Buttons -------------------------------------------------------------- */

.btn {
  font: inherit;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  border-radius: 0;
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, opacity 0.15s;
  white-space: nowrap;
}
.btn:disabled { opacity: 0.45; cursor: default; }
.btn--outline { background: transparent; color: var(--white); border-color: var(--white); }
.btn--outline:hover:not(:disabled) { background: var(--white); color: var(--violet); }
.btn--dark { background: var(--violet); color: var(--yellow); }
.btn--dark:hover:not(:disabled) { background: #2a0f47; }
.btn--icon {
  background: transparent; color: var(--violet); border-color: var(--violet);
  font-size: 1.2rem; line-height: 1; padding: 0.4rem 0.7rem;
}
.btn--block { width: 100%; }
.btn--sm { padding: 0.35rem 0.7rem; font-size: 0.75rem; }

/* --- Install CTA ---------------------------------------------------------- */

.install-cta {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: calc(0.9rem + env(safe-area-inset-top)) var(--gutter) 0.9rem;
  background: var(--yellow);
  color: var(--violet);
}
.install-cta[hidden] { display: none; }
.install-cta__text { display: flex; flex-direction: column; font-size: 0.9rem; }
.install-cta__text strong { font-family: var(--font-display); font-size: 1rem; }
.install-cta__actions { display: flex; align-items: center; gap: 0.5rem; }

/* --- iOS instruction sheet ------------------------------------------------ */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(22, 2, 44, 0.75);
  padding: 1rem;
}
.sheet[hidden] { display: none; }
.sheet__panel {
  background: var(--cream);
  color: var(--violet);
  padding: 1.5rem;
  width: min(440px, 100%);
  margin-bottom: env(safe-area-inset-bottom);
}
.sheet__panel h2 { margin: 0 0 0.75rem; font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; }
.sheet__steps { margin: 0 0 0.75rem; padding-left: 1.2rem; font-size: 0.95rem; }
.sheet__steps li { margin-bottom: 0.4rem; }
.sheet__note { margin: 0 0 1rem; font-size: 0.82rem; color: var(--line); }

/* --- Header --------------------------------------------------------------- */

.site-header {
  /* The 50% black-to-transparent wash from the design. */
  background: linear-gradient(180deg, var(--shade) 0%, rgba(0, 0, 0, 0) 100%);
  padding: calc(clamp(24px, 3vw, 48px) + env(safe-area-inset-top)) var(--gutter) 0;
}
.site-header__inner {
  max-width: var(--content);
  min-height: 168px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
}

.brand { flex: none; }
.brand__claim { width: clamp(180px, 140px + 8vw, 291px); height: auto; }
.brand__title {
  margin: 0.05em 0 0 9%;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.73rem);
  line-height: 1.1;
  color: var(--yellow);
}
.brand__status {
  margin: 0.4rem 0 0 9%;
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lilac);
}
.brand__status:empty { display: none; }

.lang {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 240px));
  gap: 24px;
}
.lang__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  height: 48px;
  padding: 0 0.75rem;
  background: transparent;
  color: var(--white);
  border: 1.5px solid var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.06em;
  line-height: 1.15;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s;
}
.lang__btn:hover { background: rgba(255, 255, 255, 0.08); }
.lang__btn em {
  font-style: italic;
  font-stretch: condensed;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--yellow);
}
.lang__btn[aria-pressed="true"]::before {
  content: "";
  width: 19px;
  height: 14px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("./assets/icon-check.svg") center / contain no-repeat;
          mask: url("./assets/icon-check.svg") center / contain no-repeat;
}

/* --- Main column ---------------------------------------------------------- */

.guide {
  flex: 1 0 auto;
  width: 100%;
  max-width: calc(var(--content) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(24px, 3vw, 48px) var(--gutter) clamp(64px, 6vw, 120px);
}

/* --- Offline section ------------------------------------------------------ */

.offline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  padding: 0 var(--gutter) 1.25rem;
}
.offline__sub { margin: 0; font-size: 0.95rem; color: var(--lilac); }
.offline__actions { display: flex; gap: 0.75rem; }

.bulk { flex-basis: 100%; }
.bulk[hidden] { display: none; }
.bulk__bar {
  height: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.bulk__fill {
  height: 100%;
  width: 0%;
  background: var(--yellow);
  transition: width 0.2s linear;
}
.bulk__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
}
.bulk__label { font-size: 0.85rem; color: var(--lilac); }

/* --- Track list ----------------------------------------------------------- */

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.row {
  border-bottom: 2px solid var(--line);
  padding: 18px var(--gutter);
}
.row--active { background: var(--cream); color: var(--violet); }

.row__head {
  display: grid;
  grid-template-columns: var(--label-col) minmax(0, 1fr) auto var(--icon);
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.row__label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-title);
  color: var(--lilac);
  font-variant-numeric: tabular-nums;
}
.row__title {
  font-weight: 500;
  font-size: var(--fs-title);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row__meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 clamp(16px, 4vw, 67px) 0 1rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-duration);
  line-height: 1;
  color: var(--lilac);
  font-variant-numeric: tabular-nums;
}
.row__offline {
  font-size: 0.7em;
  line-height: 1;
}
.row__offline svg { display: block; width: 0.85em; height: 0.85em; }

.row__icon {
  display: grid;
  place-items: center;
  width: var(--icon);
  height: var(--icon);
  color: var(--yellow);
}
.row__icon svg { width: 100%; height: 100%; }
.row__head:hover .row__icon .icon-row-play { transform: scale(1.06); }
.icon-row-play { transition: transform 0.15s; }

.icon-eq, .icon-row-pause { display: none; }
.row--active .icon-row-play { display: none; }
.row--active .icon-eq { display: block; width: 66%; height: 66%; align-self: start; margin-top: 2px; }

.row--active .row__label,
.row--active .row__meta { color: var(--violet); }
.row--active .icon-eq { color: var(--line); }

/* Equalizer bars bounce while audio is playing. */
.icon-eq rect { transform-box: fill-box; transform-origin: bottom; }
.is-playing .icon-eq rect { animation: eq 0.9s ease-in-out infinite alternate; }
.is-playing .icon-eq rect:nth-child(2) { animation-delay: -0.3s; }
.is-playing .icon-eq rect:nth-child(3) { animation-delay: -0.6s; }
@keyframes eq {
  0%   { transform: scaleY(0.3); }
  100% { transform: scaleY(1); }
}

/* --- Player (lives inside the open row) ----------------------------------- */

.player {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) minmax(0, 526px);
  gap: 1.5rem;
  margin-top: 20px;
  padding: 0 calc(var(--icon) + clamp(16px, 4vw, 67px)) 12px var(--label-col);
}
.player[hidden] { display: none; }

/* Mobile-only parts: the sheet header, the mini bar and the back arrow. */
.player__head, .mini, .site-header__back { display: none; }

.player__media { grid-column: 1; display: flex; flex-direction: column; gap: 11px; }
.player__art {
  width: 160px;
  aspect-ratio: 1;
  background: var(--cream-deep) url("./assets/logo-tree.svg") center / 45% no-repeat;
  overflow: hidden;
}
.player__art--image { background: var(--cream-deep); }
.player__art img { width: 100%; height: 100%; object-fit: cover; }
.player__art img[hidden] { display: none; }

.player__transcript {
  font-weight: 500;
  font-size: 1rem;
  color: var(--violet);
  text-underline-offset: 2px;
}
.player__transcript[hidden] { display: none; }

.player__main {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  padding-top: 24px;
}

.player__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.ctl {
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  color: var(--violet);
  padding: 0;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
}
.ctl:hover:not(:disabled) { transform: scale(1.06); }
.ctl:disabled { opacity: 0.35; cursor: default; }
/* `hidden` on an SVG child isn't reliably honoured; be explicit so the play and
   pause glyphs never render on top of each other. */
.ctl svg[hidden] { display: none; }
.ctl--seek { width: 40px; height: 40px; }
.ctl--seek svg { width: 40px; height: 25px; }
.ctl--play, .ctl--play svg { width: 64px; height: 64px; }

.player__times {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Range input styled as the design's progress bar: white track with a violet
   border, violet fill. The fill is driven by a --progress custom property. */
.scrubber {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 20px;
  margin: 2px 0 0;
  background: transparent;
  cursor: pointer;
}
.scrubber:disabled { cursor: default; opacity: 0.6; }

.scrubber::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line);
  background: linear-gradient(
    to right,
    var(--violet) 0%,
    var(--violet) calc(var(--progress, 0) * 100%),
    var(--white) calc(var(--progress, 0) * 100%),
    var(--white) 100%
  );
}
.scrubber::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  box-sizing: border-box;
}
.scrubber::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--violet);
}
/* The design shows no knob; keep a small one for touch and keyboard users. */
.scrubber::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--violet);
  border: 2px solid var(--cream);
  opacity: 0;
  transition: opacity 0.15s;
}
.scrubber::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--violet);
  border: 2px solid var(--cream);
  opacity: 0;
  transition: opacity 0.15s;
}
.scrubber:is(:hover, :focus-visible, :active)::-webkit-slider-thumb { opacity: 1; }
.scrubber:is(:hover, :focus-visible, :active)::-moz-range-thumb { opacity: 1; }

.player__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.5rem;
}
.player__download {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--line);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.player__download:disabled { cursor: default; text-decoration: none; }
.player__download svg { width: 1em; height: 1em; }
.player__speaker {
  margin: 0 0 0 auto;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--line);
  text-align: right;
}
.player__speaker:empty { display: none; }

/* --- Footer --------------------------------------------------------------- */

.site-footer {
  background: var(--lilac);
  color: var(--violet);
  padding: 64px var(--gutter) calc(58px + env(safe-area-inset-bottom));
}
.site-footer__inner {
  max-width: var(--content);
  margin: 0 auto;
}
.site-footer__logo { width: 145px; height: auto; margin: 0 auto 40px; }
.site-footer__nav {
  display: flex;
  justify-content: center;
  gap: 32px;
  padding-top: 35px;
  border-top: 2px solid rgba(91, 77, 107, 0.5);
}
.site-footer__nav a {
  font-weight: 800;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
}
.site-footer__nav a:hover { text-decoration: underline; }
.site-footer :focus-visible { outline-color: var(--violet); }

/* --- Toast ---------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: var(--cream);
  color: var(--violet);
  padding: 0.7rem 1.1rem;
  font-size: 0.9rem;
  z-index: 60;
  width: max-content;
  max-width: calc(100vw - 2rem);
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.toast[hidden] { display: none; }

/* --- Smaller screens ------------------------------------------------------ */

@media (max-width: 900px) {
  .player { grid-template-columns: 120px minmax(0, 1fr); padding-right: 0; }
  .player__art { width: 120px; }
  .player__main { grid-column: 2; padding-top: 0; }
}

/* --- Mobile: A02-A05 390px frames ---------------------------------------------
   Two screens, switched by body[data-view] (see app.js): "start" is the
   language picker, "list" the stations. The player docks as a mini bar and
   opens into a full-height sheet (body.sheet-open). */

@media (max-width: 640px) {
  :root {
    --m-gutter: 24px;   /* station list */
    --m-wide: 40px;     /* start screen, footer, player sheet */
    --m-column: 310px;  /* 390 - 2 x 40 */
    --mini-h: 80px;
    --mini-gap: 8px;
    --divider: rgba(91, 77, 107, 0.5);
    --cream-glow: linear-gradient(180deg, rgba(255, 251, 144, 0.6), rgba(255, 251, 144, 0));
  }

  body[data-view="start"] .guide,
  body[data-view="start"] .mini,
  body[data-view="list"] .lang { display: none; }

  /* --- Header: start screen (A02) --- */

  .site-header {
    position: relative;
    padding: calc(48px + env(safe-area-inset-top)) var(--m-wide) 64px;
    background-size: 100% calc(216px + env(safe-area-inset-top));
    background-repeat: no-repeat;
  }
  .site-header__inner {
    max-width: var(--m-column);
    min-height: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
  }
  .brand__claim { width: 100%; }
  .brand__title { margin: 0.02em 0 0 9%; font-size: min(2.9rem, 11.9vw); }

  .lang {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 80px;
  }
  /* The mobile frame lists English first. */
  .lang__btn:nth-child(1) { order: 2; }
  .lang__btn:nth-child(2) { order: 1; }
  .lang__btn:nth-child(3) { order: 4; }
  .lang__btn:nth-child(4) { order: 3; }
  .lang__btn { height: 48px; font-size: 1.125rem; }
  .lang__btn[aria-pressed="true"] { border-color: var(--yellow); color: var(--yellow); }
  .lang__btn[aria-pressed="true"]::before { width: 22px; height: 16px; }

  /* --- Header: station list (A03) --- */

  body[data-view="list"] .site-header {
    padding: calc(24px + env(safe-area-inset-top)) var(--m-gutter) 9px;
    background-size: 100% calc(96px + env(safe-area-inset-top));
  }
  body[data-view="list"] .site-header__inner { max-width: none; align-items: center; }
  body[data-view="list"] .brand { width: 146px; }
  body[data-view="list"] .brand__title { margin: 0 0 0 14px; font-size: 1.3125rem; }
  body[data-view="list"] .brand__status {
    position: absolute;
    top: calc(28px + env(safe-area-inset-top));
    right: var(--m-gutter);
    margin: 0;
  }

  body[data-view="list"] .site-header__back {
    position: absolute;
    top: calc(11px + env(safe-area-inset-top));
    left: 11px;
    display: grid;
    place-items: center;
    width: 44px;   /* 18px glyph at 24/24, padded to a touch target */
    height: 44px;
    padding: 0;
    background: none;
    border: none;
    color: var(--yellow);
    cursor: pointer;
  }
  .site-header__back svg { width: 18px; height: 18px; }

  /* --- Footer (A02): dark, inverted logo, plain links --- */

  .site-footer {
    margin-top: auto;
    background: none;
    color: var(--white);
    padding: 0 var(--m-wide) calc(32px + env(safe-area-inset-bottom));
  }
  body[data-view="list"]:has(.mini:not([hidden])) .site-footer {
    padding-bottom: calc(32px + var(--mini-h) + var(--mini-gap) + env(safe-area-inset-bottom));
  }
  .site-footer__inner {
    max-width: var(--m-column);
    padding-top: 32px;
    border-top: 1px solid rgba(185, 179, 191, 0.5);
  }
  .site-footer__logo { width: 58px; margin-bottom: 32px; filter: brightness(0) invert(1); }
  .site-footer__nav { gap: 32px; padding-top: 0; border-top: none; }
  .site-footer__nav a {
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0;
    text-transform: none;
  }
  .site-footer :focus-visible { outline-color: var(--yellow); }

  /* --- Station list (A03) --- */

  .guide {
    display: flex;
    flex-direction: column;
    padding: 40px var(--m-gutter) 48px;
  }
  /* Download tools aren't in the frame; keep them, but after the stations. */
  .offline { order: 1; padding: 24px 0 0; }
  .offline__sub { font-size: 0.875rem; }

  .row {
    padding: 0 0 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--line);
  }
  .row__head {
    grid-template-columns: 31px minmax(0, 1fr) auto 32px;
    min-height: 32px;
  }
  .row__label { font-size: 1rem; line-height: 1; color: var(--yellow); }
  .row__title { font-size: 1rem; line-height: 1.2; }
  .row__meta {
    gap: 0.4rem;
    padding: 0 24px 0 12px;
    font-size: 1rem;
    font-weight: 400;
  }
  .row__icon { width: 32px; height: 32px; }

  /* Rows stay dark; the player lives in the mini bar instead. The active row
     only swaps its icon to pause while playing, since tapping it pauses. */
  .row--active { background: none; color: inherit; }
  .row--active .row__label { color: var(--yellow); }
  .row--active .row__meta { color: var(--lilac); }
  .row--active .icon-eq { display: none; }
  .row--active .icon-row-play { display: block; }
  .row.is-playing .icon-row-play { display: none; }
  .row.is-playing .icon-row-pause { display: block; }
  .row--active :where(button, input, a):focus-visible { outline-color: var(--yellow); }

  /* --- Mini player (A04) --- */

  .mini {
    display: block;
    position: fixed;
    z-index: 30;
    left: 0;
    right: 0;
    bottom: calc(var(--mini-gap) + env(safe-area-inset-bottom));
    height: var(--mini-h);
    border-radius: 16px;
    background: var(--cream-glow) 0 0 / 100% 48px no-repeat, var(--cream);
    color: var(--violet);
    box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.3);
  }
  .mini[hidden] { display: none; }
  .mini :focus-visible { outline-color: var(--violet); }

  .mini__expand {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    /* Content row is centred 48px down; the transport buttons own the right. */
    padding: 32px 126px 16px 16px;
    background: none;
    border: none;
    border-radius: inherit;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .mini__expand:focus-visible { outline-offset: -4px; }
  .mini__chevron {
    position: absolute;
    top: 12px;
    left: 50%;
    width: 13px;
    height: 8px;
    transform: translateX(-50%);
  }
  .mini__art {
    flex: none;
    width: 24px;
    height: 24px;
    overflow: hidden;
    background: var(--cream-deep) url("./assets/logo-tree.svg") center / 70% no-repeat;
  }
  .mini__art--image { background: var(--cream-deep); }
  .mini__art img { width: 100%; height: 100%; object-fit: cover; }
  .mini__art img[hidden] { display: none; }
  .mini__label {
    flex: none;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1rem;
    line-height: 1;
  }
  .mini__title {
    min-width: 0;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mini__controls {
    position: absolute;
    top: 32px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .ctl--mini-seek { width: 35px; height: 32px; }
  .ctl--mini-seek svg { width: 19px; height: 12px; }
  .ctl--mini-play, .ctl--mini-play svg { width: 32px; height: 32px; }

  /* The pause/play glyphs are cut-outs; the design fills them white. */
  .ctl--mini-play,
  .player .ctl--play {
    border-radius: 50%;
    background: radial-gradient(circle closest-side, var(--white) 80%, transparent 81%);
  }

  /* --- Player sheet (A05) --- */

  body.sheet-open { overflow: hidden; }

  .player {
    position: fixed;
    z-index: 40;
    inset: calc(24px + env(safe-area-inset-top)) 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0 var(--m-wide) calc(48px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 16px 16px 0 0;
    background: var(--cream-glow) 0 0 / 100% 160px no-repeat, var(--cream);
    color: var(--violet);
    box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.3);
    transform: translateY(calc(100% + 40px));
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
  }
  body.sheet-open .player {
    transform: none;
    visibility: visible;
    transition: transform 0.3s ease, visibility 0s;
  }
  .player :focus-visible { outline-color: var(--violet); }

  /* Flatten the desktop grid so the sheet can order everything in one column. */
  .player__media, .player__main { display: contents; }
  .player__head, .player__art, .player__transcript, .player__foot,
  .player__times, .scrubber, .player__controls { flex: none; }
  .player__art, .player__foot, .player__times, .scrubber { width: 100%; max-width: var(--m-column); }

  .player__head {
    order: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    margin: 0 calc(-1 * var(--m-wide));
    padding-top: 12px;
    touch-action: none;   /* drag down to dismiss, see wireSheetSwipe() */
  }
  .player__handle {
    width: 48px;
    height: 3px;
    border-radius: 2px;
    background: var(--lilac);
  }
  .player__collapse {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-top: 24px;
    padding: 0;
    border: none;
    background: var(--violet);
    color: var(--white);
    cursor: pointer;
  }
  .player__collapse svg { width: 16px; height: 10px; }
  .player__title {
    margin: 37px 0 0;
    padding: 0 var(--m-wide);
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.1;
    text-align: center;
  }
  .player__label { margin-right: 10px; font-family: var(--font-display); }

  .player__art { order: 1; margin-top: 24px; }
  /* On short screens the artwork gives way so the transport stays in view. */
  .player__art { max-width: min(var(--m-column), max(160px, 100dvh - 500px)); }

  .player__transcript {
    order: 2;
    display: grid;
    place-items: center;
    width: 160px;
    height: 32px;
    margin-top: 16px;
    background: var(--violet);
    color: var(--white);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    text-decoration: none;
  }

  /* Not in the frame, but offline saving is per track; it sits above the divider. */
  .player__foot { order: 3; margin: 0; padding: 20px 0 24px; }

  /* Divider + transport hug the bottom of the sheet on tall screens. */
  .player__times {
    order: 5;
    margin-top: auto;
    padding-top: 46px;
    border-top: 1px solid var(--divider);
  }
  .scrubber { order: 6; }
  .player__controls { order: 7; margin-top: 42px; gap: 40px; }

  /* Keep toasts clear of the mini bar. */
  body[data-view="list"]:has(.mini:not([hidden])) .toast {
    bottom: calc(var(--mini-h) + var(--mini-gap) + 16px + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .is-playing .icon-eq rect { animation: none; }
}