Index: src/assets/css/audio.css
===================================================================
--- src/assets/css/audio.css	(revision 2165b6d3d57ceaa8b5d1f70491868482149470cf)
+++ src/assets/css/audio.css	(revision 7bc636b391c66ac399c33e54f7173a022c6a3cbd)
@@ -1,3 +1,3 @@
-/* Klonkt — Audio CSS
+/* PrutCMS v10 — Audio CSS
    Two pieces:
      1. .post-audio-track — the play-button block inserted by [[track:id]] shortcode
@@ -73,52 +73,4 @@
   text-overflow: ellipsis;
 }
-/* Eigenaar/credit · licentie — subtiele regel onder de track. */
-.post-audio-track .pat-credit {
-  font-size: 0.72rem;
-  color: var(--ink-faint, var(--ink-soft));
-  margin-top: 0.1rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* "Open in" Spotify/YouTube/SoundCloud — kleine brand-iconen per track. */
-.pat-links {
-  display: inline-flex; align-items: center; gap: 0.1rem;
-  flex: 0 0 auto;
-}
-/* Single + album-rij (.post-audio-track is flex) → duw de links naar rechts. */
-.post-audio-track .pat-links { margin-left: auto; padding-right: 0.5rem; }
-/* Playlist-rij: de li flex maken zodat de links naast de afspeel-rij passen. */
-.post-album-track-compact { display: flex; align-items: center; }
-.post-album-track-compact .pat-row { flex: 1 1 auto; min-width: 0; }
-.post-album-track-compact .pat-links { padding-right: 0.6rem; }
-.pat-link {
-  display: inline-flex; align-items: center; justify-content: center;
-  width: 26px; height: 26px;
-  opacity: 0.75;
-  transition: opacity 120ms, transform 120ms;
-}
-.pat-link svg { width: 17px; height: 17px; }
-.pat-link:hover { opacity: 1; transform: scale(1.12); }
-.pat-link--spotify    { color: #1DB954; }
-.pat-link--youtube    { color: #FF0000; }
-.pat-link--soundcloud { color: #FF5500; }
-
-/* Link-only tracks (geen audiobestand): plek van de afspeelknop = stil muziek-icoon. */
-.pat-noplay {
-  display: inline-flex; align-items: center; justify-content: center;
-  flex: 0 0 38px; width: 38px; align-self: center;
-  color: var(--ink-faint, #a8a29e);
-}
-.pat-noplay svg { width: 18px; height: 18px; }
-/* Cover-thumbnail op een link-only track (i.p.v. het muzieknootje). */
-.pat-noplay--cover {
-  width: 64px; height: 64px; flex: 0 0 64px;
-  border-radius: 8px;
-  background-size: cover; background-position: center;
-  margin: 0 .5rem 0 0;
-}
-.pat-row.pat-static { cursor: default; }
 
 /* ============================================================
@@ -151,13 +103,4 @@
   }
 }
-/* Het auth/login-focusscherm rendert GEEN bottom-tab (zie shell.ejs), maar de body
-   houdt wel de has-bottom-tab-class → zonder dit zou de mini-player 56px boven de
-   onderrand zweven boven een niet-bestaande tab. Reset naar bottom:0 (alle breedtes;
-   op desktop is 't sowieso al 0). Robuuste class-selector — geen :has() in deze
-   kritieke regel. */
-body.on-auth .audio-player {
-  bottom: 0;
-  padding-bottom: env(safe-area-inset-bottom, 0);
-}
 [data-theme="dark"] .audio-player {
   background: color-mix(in srgb, var(--paper, #1a1a1a) 92%, #fff);
@@ -168,18 +111,4 @@
   opacity: 0;
   pointer-events: none;
-}
-
-/* Browser-autoplay-policy heeft de auto-advance gestopt — typisch
-   na 3-4 tracks op iOS Safari. Visuele hint dat user op play moet
-   tappen om door te gaan (PCMS v10.1, audio-player.js). */
-.audio-player.audio-needs-tap .audio-btn-play {
-  animation: audio-pulse-tap 1.2s ease-in-out infinite;
-  background: rgba(255, 165, 0, 0.18);
-  border-color: orange;
-  color: orange;
-}
-@keyframes audio-pulse-tap {
-  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.5); }
-  50%      { box-shadow: 0 0 0 8px rgba(255, 165, 0, 0); }
 }
 .audio-player-inner {
@@ -205,10 +134,4 @@
 .audio-player-expand-trigger:hover {
   background: color-mix(in srgb, var(--ink, #000) 6%, transparent);
-}
-/* DESKTOP (≥1200px): geen full player — de expand-trigger opent niets (JS),
-   dus 'm niet als klikbaar laten ogen. */
-@media (min-width: 1200px) {
-  .audio-player-expand-trigger { cursor: default; }
-  .audio-player-expand-trigger:hover { background: none; }
 }
 
@@ -413,6 +336,6 @@
 body.audio-sheet-locked { overflow: hidden; }
 
-/* TELEFOON (<768px): full-width sheet, slide up from bottom */
-@media (max-width: 767.98px) {
+/* MOBILE (<720px): full-width sheet, slide up from bottom */
+@media (max-width: 719.98px) {
   .audio-sheet-panel {
     /* Real full-screen, edge-to-edge, no rounded corners or shadow */
@@ -434,6 +357,22 @@
 }
 
-/* (De grote tablet/auto-variant staat onderaan deze sectie — NÁ de basis cover/
-   info/controls-regels — anders overschrijft de basis die overrides.) */
+/* DESKTOP (≥720px): 480px wide, horizontally centered (v9 design intent).
+   We MUST set width here because v9's style.css sets width:480px and
+   we don't want left/right:0 stretching to override it.
+   The -50% horizontal centering is preserved during drag by composing
+   --pcms-drag-y into the existing translate(-50%, ...) transform. */
+@media (min-width: 720px) {
+  .audio-sheet-panel {
+    left: 50%;
+    right: auto;
+    width: 480px;
+    transform: translate(-50%, 100%);
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+  }
+  .audio-sheet.is-open .audio-sheet-panel {
+    transform: translate(-50%, var(--pcms-drag-y, 0px));
+  }
+}
 
 .audio-sheet-panel.is-dragging {
@@ -583,48 +522,4 @@
 }
 
-/* TABLET / AUTO (768–1199px): grote, landscape, knop-vriendelijke full-player
-   voor tablets + een tablet-in-de-auto. Bewust full-screen + grote touch-targets.
-   STAAT BEWUST NA de basis-sheet-regels hierboven, anders overschrijft de basis
-   deze overrides (cascade-volgorde). Desktop (≥1200px) opent de full player NIET
-   (afgehandeld in audio-player.js), dus daar is geen sheet-styling nodig. */
-@media (min-width: 768px) and (max-width: 1199.98px) {
-  .audio-sheet-panel {
-    inset: 0; left: 0; right: 0; width: auto;
-    max-height: none;
-    border-radius: 0;
-    box-shadow: none;
-    transform: translateY(100%);
-    padding: clamp(2rem, 5vh, 4rem) clamp(2rem, 6vw, 5rem);
-    gap: clamp(1.25rem, 3vh, 2.5rem);
-    /* 'safe center': verticaal centreren als alles past, maar bovenaan uitlijnen
-       (geen clip) zodra cover + queue hoger zijn dan het scherm — anders wordt de
-       cover boven de viewport geduwd en is 'ie niet te scrollen. */
-    justify-content: safe center;
-    align-items: center;
-  }
-  .audio-sheet.is-open .audio-sheet-panel { transform: translateY(var(--pcms-drag-y, 0px)); }
-
-  .audio-sheet-drag-zone { align-items: center; width: 100%; margin: 0; padding: 0; }
-  .audio-sheet-cover { width: min(48vh, 460px); max-width: none; border-radius: 20px; }
-  .audio-sheet-cover svg { width: 26%; height: 26%; }
-  .audio-sheet-info { width: 100%; max-width: 660px; }
-  .audio-sheet-title  { font-size: clamp(2rem, 4vw, 3rem); }
-  .audio-sheet-artist { font-size: clamp(1.1rem, 2vw, 1.5rem); margin-top: .5rem; }
-  .audio-sheet-album  { font-size: 1rem; margin-top: .25rem; }
-  .audio-sheet-progress { width: 100%; max-width: 660px; gap: 1.25rem; }
-  .audio-sheet-progress .audio-time { font-size: 1.05rem; min-width: 3.2em; }
-  .audio-sheet-controls { gap: clamp(1.5rem, 5vw, 3.5rem); }
-  .audio-sheet-btn { width: 76px; height: 76px; }
-  .audio-sheet-btn svg { width: 34px; height: 34px; }
-  .audio-sheet-play { width: 108px; height: 108px; }
-  .audio-sheet-play svg { width: 46px; height: 46px; }
-  /* Queue dezelfde breedte als info/progress (anders krimpt 'ie door
-     align-items:center tot z'n inhoud = smal), + grotere rijen voor touch. */
-  .audio-sheet-queue { width: 100%; max-width: 660px; }
-  .audio-sheet-queue-label { font-size: 0.95rem; }
-  .audio-sheet-queue-item { padding: 0.7rem 0.7rem; gap: 0.6rem; font-size: 1.05rem; }
-  .audio-sheet-queue-item .aqi-artist { font-size: 0.95rem; }
-}
-
 /* ============================================================
    External-link variant ([[link:url]])