/* =====================================================================
   web-mobile.css — the mobile compositions
   =====================================================================

   Every rule is scoped to a MOBILE mode. `[data-layout="desktop"]` can
   never match, so nothing here can regress the desktop player. Bare
   `[data-layout]` DOES match desktop -- 37 rules once leaked through it and
   pushed #repeat-btn off the edge at 1280x720 -- so anything shared uses
   `:not([data-layout="desktop"])`.

   THE GOVERNING CONSTRAINT — same player, same state, same engine,
   different presentation.

   No second <audio>, no second set of transport ids. `.player-bar` is
   reflowed into the Now Playing composition and every button in it is the
   SAME node the desktop drives. Nothing here builds a control and nothing
   here listens to playback events, so a mode change cannot restart ffmpeg,
   discard MSE state, reset currentTime, or rebind a handler.

   THE VISUAL LANGUAGE is ambient and art-led: the artwork is the background
   of the app, blurred and darkened, so the screen belongs to the record
   rather than to a panel; text sits on small translucent chips so it stays
   legible over arbitrary artwork; the transport is a row of dark glass
   discs with one unmistakably dominant play control.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. tokens
   ------------------------------------------------------------------ */

:root {
  /* 44px is the iOS HIG minimum and the Material accessibility floor. */
  --m-tap: 44px;
  --m-gap: 10px;
  --m-pad: 18px;
  --m-radius: 18px;
  --m-radius-lg: 26px;

  --m-safe-t: env(safe-area-inset-top, 0px);
  --m-safe-b: env(safe-area-inset-bottom, 0px);
  /* 100dvh is not supported in Android 10's older Chromium WebViews.
     If this variable resolves to an unknown unit, the entire height of
     the flex app shell is invalid and <main> collapses to zero pixels. */
  --m-vh: 100vh;

  --m-nav-h: 58px;
  --m-glass: rgba(20, 20, 24, 0.78);
  --m-line: rgba(255, 255, 255, 0.13);
  --m-ink: #ffffff;
  --m-ink-dim: rgba(255, 255, 255, 0.68);
  --m-accent: #ff8a3d;

  /* Set from the live artwork by web-nowplaying.js. */
  --m-art: none;
}

/* Modern WebViews resize along with the visible viewport. */
@supports (height: 100dvh) {
  :root { --m-vh: 100dvh; }
}

/* ---------------------------------------------------------------------
   2. ambient background — the artwork IS the app
   ---------------------------------------------------------------------
   A heavy blur and a darkening scrim, because the artwork underneath is
   arbitrary: a white sleeve would otherwise turn a dark UI into an
   unreadable one. The scrim is what makes the chips and discs above it
   legible, so its strength is load-bearing rather than decorative.
   ------------------------------------------------------------------ */

[data-layout="portrait"] body,
[data-layout="landscape"] body,
[data-layout="square"] body {
  background: #0b0b0d;
}

[data-layout="portrait"] body::before,
[data-layout="landscape"] body::before,
[data-layout="square"] body::before {
  content: "";
  position: fixed;
  inset: -12%;
  z-index: 0;
  background-image: var(--m-art);
  background-size: cover;
  background-position: center 30%;
  filter: blur(64px) saturate(190%) brightness(0.5);
  transform: scale(1.25);
  opacity: 0.85;
  pointer-events: none;
}

[data-layout="portrait"] body::after,
[data-layout="landscape"] body::after,
[data-layout="square"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(8, 8, 10, 0.55) 0%, rgba(8, 8, 10, 0.30) 35%, rgba(8, 8, 10, 0.72) 100%);
}

@media (prefers-reduced-motion: reduce) {
  [data-layout="portrait"] body::before,
  [data-layout="landscape"] body::before,
  [data-layout="square"] body::before {
    transition: none;
  }
}

/* ---------------------------------------------------------------------
   3. shell
   ------------------------------------------------------------------ */

[data-layout="portrait"],
[data-layout="landscape"],
[data-layout="square"] {
  height: var(--m-vh);
  overflow: hidden;
  overscroll-behavior: none;
}

[data-layout="portrait"] .app,
[data-layout="landscape"] .app,
[data-layout="square"] .app {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: var(--m-vh);
  overflow: hidden;
  padding-bottom: 0;
  background: transparent;
}

[data-layout="portrait"] main,
[data-layout="landscape"] main,
[data-layout="square"] main {
  order: 1;
  height: 0;
  flex: 1 1 0;
  /* In a COLUMN flex container a flex item's `min-height: auto` resolves to
     its min-content height, not 0, so the browse area refuses to collapse. */
  min-height: 0 !important;
  /* Desktop reserves room for the FIXED player bar here. `height: 0` zeroes
     the content box but the padding still occupies space, and 90px of
     padding is the entire overflow on a 640px screen. The player is a real
     flex item now, so the reservation is both wrong and fatal. */
  padding-bottom: 0 !important;
  overflow: hidden auto;
  -webkit-overflow-scrolling: touch;
}

/* ---- navigation: a floating pill, and the shell that positions it ------ */

/* The sidebar is NOT just a nav: it also carries playlists, action buttons
   and a "No playlists yet" placeholder. Turning the whole element into the
   pill dragged all of that in. So the sidebar became a positioning shell and
   only `.nav` became the pill; the rest is relocated into the Library sheet,
   not deleted.
   The pill is a flex item AFTER the player, not a fixed overlay: a fixed
   overlay can always collide with in-flow player content, and padding cannot
   prevent it because that content overflows its own padding box. */
[data-layout="portrait"] .sidebar,
[data-layout="landscape"] .sidebar,
[data-layout="square"] .sidebar {
  position: relative;
  order: 3;
  flex: 0 0 auto;
  align-self: stretch;
  z-index: 55;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding: 6px 16px calc(var(--m-safe-b) + 8px);
  width: auto;
  height: auto;
  margin: 0;
  background: var(--m-glass);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  backdrop-filter: blur(26px) saturate(160%);
  border: none;
  overflow: visible;
  pointer-events: auto;
}

[data-layout="portrait"].m-player-open .sidebar,
[data-layout="landscape"].m-player-open .sidebar,
[data-layout="square"].m-player-open .sidebar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
}

[data-layout="portrait"] .sidebar > *:not(.nav),
[data-layout="landscape"] .sidebar > *:not(.nav),
[data-layout="square"] .sidebar > *:not(.nav),
[data-layout="portrait"] .sidebar .logo,
[data-layout="landscape"] .sidebar .logo,
[data-layout="square"] .sidebar .logo,
[data-layout="portrait"] .sidebar .nav-label,
[data-layout="landscape"] .sidebar .nav-label,
[data-layout="square"] .sidebar .nav-label {
  display: none !important;
}

[data-layout="portrait"] .sidebar .nav,
[data-layout="landscape"] .sidebar .nav,
[data-layout="square"] .sidebar .nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  gap: 0;
  width: 100%;
  max-width: 440px;
  height: var(--m-nav-h);
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

[data-layout="portrait"] .sidebar .nav-item,
[data-layout="landscape"] .sidebar .nav-item,
[data-layout="square"] .sidebar .nav-item {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  border-radius: 999px;
  color: var(--m-ink-dim);
  background: none;
  padding: 0;
  /* Zeroing the font collapses stray text nodes inside the item; the icon
     restores its own size. */
  font-size: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

[data-layout="portrait"] .sidebar .nav-item .icon,
[data-layout="landscape"] .sidebar .nav-item .icon,
[data-layout="square"] .sidebar .nav-item .icon {
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-layout="portrait"] .sidebar .nav-item.active,
[data-layout="landscape"] .sidebar .nav-item.active,
[data-layout="square"] .sidebar .nav-item.active {
  color: var(--m-accent);
  background: rgba(255, 255, 255, 0.10);
}

/* ---- desktop panels become full-screen sheets ------------------------- */

[data-layout="portrait"] .music-panel,
[data-layout="landscape"] .music-panel,
[data-layout="square"] .music-panel,
[data-layout="portrait"] .album-detail-panel,
[data-layout="landscape"] .album-detail-panel,
[data-layout="square"] .album-detail-panel {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  z-index: 70;
  transform: translateY(100%);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  padding: calc(var(--m-safe-t) + var(--m-pad)) var(--m-pad) calc(var(--m-safe-b) + var(--m-pad));
  background: rgba(11, 11, 13, 0.97);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

[data-layout="portrait"] .music-panel.open,
[data-layout="landscape"] .music-panel.open,
[data-layout="square"] .music-panel.open,
[data-layout="portrait"] .album-detail-panel.open,
[data-layout="landscape"] .album-detail-panel.open,
[data-layout="square"] .album-detail-panel.open {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-layout]:not([data-layout="desktop"]) .music-panel,
  [data-layout]:not([data-layout="desktop"]) .album-detail-panel {
    transition: none !important;
  }
}

/* These two were bare `[data-layout]`, which matches desktop too -- so the
   desktop panel lost its resize handle. Mobile-only from here. */
[data-layout="portrait"] .music-panel-resize-handle,
[data-layout="landscape"] .music-panel-resize-handle,
[data-layout="square"] .music-panel-resize-handle,
[data-layout="portrait"] .panel-resize-handle,
[data-layout="landscape"] .panel-resize-handle,
[data-layout="square"] .panel-resize-handle {
  display: none !important;
}

/* =====================================================================
   4. the player surface
   ===================================================================== */

[data-layout="portrait"] .player-bar,
[data-layout="landscape"] .player-bar,
[data-layout="square"] .player-bar {
  order: 2;
  /* Desktop is `position: fixed; left: 240px; right: 0`, offset to clear the
     nav column. Merely switching to relative does NOT clear it -- a relative
     box still honours `left`, so the whole player sat 240px off the right
     edge of every portrait viewport. Every inset must be reset.
     The inline left that also fought this is cleared in albumDetail.js: an
     inline style beats every rule at any specificity. */
  position: relative;
  left: 0;
  right: 0;
  bottom: auto;
  width: auto;
  max-width: none;
  height: auto;
  min-height: 0;
  display: grid;
  gap: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
  background: transparent;
  border-top: none;
  z-index: 50;
}

[data-layout="portrait"] .now-playing,
[data-layout="portrait"] .player-controls,
[data-layout="portrait"] .volume-controls,
[data-layout="landscape"] .now-playing,
[data-layout="landscape"] .player-controls,
[data-layout="landscape"] .volume-controls,
[data-layout="square"] .now-playing,
[data-layout="square"] .player-controls,
[data-layout="square"] .volume-controls {
  width: auto;
  max-width: none;
  min-width: 0;
  height: auto;
  min-height: 0;
}

[data-layout="portrait"] .np-info,
[data-layout="landscape"] .np-info,
[data-layout="square"] .np-info {
  width: auto;
  min-width: 0;
}

/* ---- the artwork ------------------------------------------------------
   A card floating over the ambient background, with real corners and a real
   shadow so it reads as a physical object rather than as a hole where the
   album should be. */

[data-layout="portrait"] .np-cover,
[data-layout="landscape"] .np-cover,
[data-layout="square"] .np-cover {
  position: relative;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    #1c1c20;
  border-radius: var(--m-radius-lg);
  box-shadow:
    0 22px 50px rgba(0, 0, 0, 0.6),
    0 4px 12px rgba(0, 0, 0, 0.45);
  object-fit: cover;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y;
}

/* A centred note so a missing cover is a designed state, not a hole. */
[data-layout="portrait"] .np-cover:empty::after,
[data-layout="landscape"] .np-cover:empty::after,
[data-layout="square"] .np-cover:empty::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28% 28%;
  opacity: 0.2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 3v10.55A4 4 0 1 0 14 17V7h4V3h-6z'/%3E%3C/svg%3E");
}

[data-layout="portrait"] .np-cover.snapping,
[data-layout="landscape"] .np-cover.snapping,
[data-layout="square"] .np-cover.snapping {
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- chips ------------------------------------------------------------
   Title and artist sit on small translucent pills rather than bare text.
   Over arbitrary artwork, bare text is a legibility gamble; the chip carries
   its own background and stays readable on a white sleeve as well as a black
   one. */

[data-layout="portrait"] .np-info,
[data-layout="landscape"] .np-info,
[data-layout="square"] .np-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}

[data-layout="portrait"] .np-info h4,
[data-layout="landscape"] .np-info h4,
[data-layout="square"] .np-info h4 {
  display: inline-block;
  max-width: 100%;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--m-ink);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-layout="portrait"] .np-info p,
[data-layout="landscape"] .np-info p,
[data-layout="square"] .np-info p {
  display: inline-block;
  max-width: 100%;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--m-ink-dim);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =====================================================================
   5. PORTRAIT — art-led stack over the ambient background
   ===================================================================== */

[data-layout="portrait"] .player-bar {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  padding: calc(var(--m-safe-t) + var(--m-gap)) 0 0;
}

[data-layout="portrait"] .now-playing {
  position: relative;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 0 var(--m-pad);
  margin: 0;
}

[data-layout="portrait"] .np-cover {
  /* Square, sized by the SHORTER of the two dimensions. Capping only the
     height while the width stays 100% overruns short screens: art + chips +
     waveform + transport + the nav pill together overflowed 360x640 and
     pushed the pill below the fold, which on a phone means no navigation. */
  width: min(100%, 42vh);
  aspect-ratio: 1 / 1;
  height: auto;
  margin: 0 auto;
}

/* The like control as translucent chrome on the artwork's bottom-left, where
   it belongs to the cover rather than floating in the layout. */
[data-layout="portrait"] .np-like {
  position: absolute;
  /* `.np-like` is a SIBLING of `.np-cover` inside `.now-playing`, which also
     contains the chips. `bottom` therefore resolved against the whole block
     and parked the heart on the title chip. The artwork is the FIRST child,
     so `top` is the only edge that reliably lands on the cover. */
  top: 12px;
  right: 12px;
  width: var(--m-tap);
  height: var(--m-tap);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  cursor: pointer;
  z-index: 3;
  -webkit-tap-highlight-color: transparent;
}

[data-layout="portrait"] .player-controls {
  padding: 16px var(--m-pad) 0;
  gap: 12px;
}

/* The two waveform canvases layer inside the stack: grey peaks behind,
   accent-coloured peaks on top clipped to the played width. Without
   this the accent canvas simply covered the grey one at full width and
   the "played" tint never appeared. */
[data-layout="portrait"] .m-wave-stack,
[data-layout="landscape"] .m-wave-stack,
[data-layout="square"] .m-wave-stack {
  position: relative;
}

[data-layout="portrait"] .m-wave-stack canvas,
[data-layout="landscape"] .m-wave-stack canvas,
[data-layout="square"] .m-wave-stack canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

[data-layout="portrait"] .m-wave-stack .m-wave-accent,
[data-layout="landscape"] .m-wave-stack .m-wave-accent,
[data-layout="square"] .m-wave-stack .m-wave-accent {
  clip-path: inset(0 calc(100% - var(--m-progress, 0%)) 0 0);
}

/* Short portrait (360x640 and similar): same trade, waveform first. */
@media (max-height: 760px) {
  [data-layout="portrait"] .m-wave-stack { height: 46px; }
  [data-layout="portrait"] .np-cover { width: min(100%, 32vh); }
  [data-layout="portrait"] .player-bar .ctrl-btn { width: 46px; height: 46px; }
  [data-layout="portrait"] .player-bar .ctrl-btn.play-pause {
    width: 62px; height: 62px; min-width: 62px; min-height: 62px;
  }
  [data-layout="portrait"] .now-playing { gap: 10px; }
  [data-layout="portrait"] .player-controls { padding-top: 10px; gap: 8px; }
  [data-layout="portrait"] .volume-controls { padding-top: 4px; }
}

/* =====================================================================
   6. LANDSCAPE — a genuine two-column composition
   ===================================================================== */

[data-layout="landscape"] .player-bar {
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  grid-template-rows: auto minmax(0, 1fr);
  align-items: stretch;
  padding: calc(var(--m-safe-t) + var(--m-gap) + 4px) var(--m-pad) var(--m-gap);
  column-gap: var(--m-pad);
  min-height: 58vh;
  padding-bottom: 6px;
}

/* Landscape is the tightest width, not the tightest height, but it has the
   least slack of the three: art, chips, waveform, times and transport all
   share one 360px-tall band. */
/* The format chip is ~28px and only exists once a real track is set -- which
   is exactly when a verifier that does not fake a track will not see the
   overflow. It stays: it is real information. The waveform gives up the room
   instead, because the waveform is the one element whose height is purely a
   choice. */
/* Qualified through .player-bar: the shared 72px rule in section 9 has the
   same specificity and appears LATER in the file, so an unqualified override
   here silently loses. */
[data-layout="landscape"] .player-bar .m-wave-stack { height: 36px; }

/* The waveform may be drawn short, but the SEEK TARGET may not: 36px is
   below the 44px tap floor and this is the control people use most.
   #progress-track is absolutely positioned, so a taller hit box than the
   drawing costs no layout height at all -- which is the whole reason the
   decoration is stacked rather than in flow. */
[data-layout="landscape"] .player-bar .progress-track { min-height: 44px; }

[data-layout="portrait"] .player-bar .progress-track { min-height: 44px; }

[data-layout="square"] .player-bar .progress-track { min-height: 44px; }

[data-layout="landscape"] .player-bar .ctrl-btn { width: 46px; height: 46px; }

[data-layout="landscape"] .player-bar .ctrl-btn.play-pause {
  width: 62px; height: 62px; min-width: 62px; min-height: 62px;
}

[data-layout="landscape"] .player-controls { gap: 8px; }

/* `display: contents` promotes .np-cover, .np-info and .np-like to direct
   grid items of .player-bar. They were absolutely positioned against the bar
   at `width: calc(53% - pad)`, a percentage of whatever the bar's width
   happened to be mid-relayout -- a 679px title block on a 640px screen.
   Placed by the grid, column 2 IS the metadata column. */
[data-layout="landscape"] .now-playing {
  display: contents;
}

[data-layout="landscape"] .np-cover {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: center;
  /* Fill the column's HEIGHT: a landscape window is short, so a
     width-derived square would not fit. */
  aspect-ratio: 1 / 1;
  width: auto;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  margin: 0;
}

[data-layout="landscape"] .np-info {
  position: static;
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  justify-self: start;
  width: auto;
  max-width: 100%;
  padding: 0;
  pointer-events: none;
}

[data-layout="landscape"] .np-like {
  position: static;
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  width: var(--m-tap);
  height: var(--m-tap);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-radius: 999px;
  cursor: pointer;
  z-index: 3;
}

[data-layout="landscape"] .player-controls {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  min-width: 0;
  padding: 0;
}

[data-layout="landscape"] .volume-controls,
[data-layout="square"] .volume-controls {
  display: none;
}

/* =====================================================================
   7. SQUARE — first class, not an accident of a breakpoint
   ===================================================================== */

[data-layout="square"] .player-bar {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  padding: calc(var(--m-safe-t) + var(--m-gap)) 0 0;
}

[data-layout="square"] .now-playing {
  flex-direction: row;
  align-items: center;
  gap: var(--m-pad);
  padding: 0 var(--m-pad);
  margin: 0;
  flex: 0 1 auto;
  min-height: 0;
}

[data-layout="square"] .np-cover {
  width: min(30%, 128px);
  aspect-ratio: 1 / 1;
  height: auto;
  margin: 0;
}

[data-layout="square"] .np-info {
  padding: 0;
  flex: 1 1 auto;
}

[data-layout="square"] .np-like {
  position: static;
  width: var(--m-tap);
  height: var(--m-tap);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--m-ink);
  flex: 0 0 auto;
  cursor: pointer;
}

[data-layout="square"] .player-controls {
  padding: 12px var(--m-pad) 0;
  gap: 8px;
}

/* Square is the tightest composition there is: a 360x360 window has to hold
   art, both chips, a 72px waveform, the time row, a 78px play button and the
   nav pill inside 360px. The waveform and the art are what give way, because
   they are the two elements whose size is a choice rather than a floor. */
[data-layout="square"] .m-wave-stack { height: 34px; }

[data-layout="square"] .np-cover { width: min(26%, 104px); }

/* 360x360 is the smallest window worth supporting, and it is genuinely
   tight: art + two chips + waveform + time row + transport + nav pill. The
   discs shrink (never below the 44px tap floor) rather than the pill being
   allowed to sit on top of the times. */
/* Qualified through .player-bar so these win the specificity tie with the
   shared transport rules in section 8, which appear LATER in the file. */
[data-layout="square"] .player-bar .ctrl-btn { width: 46px; height: 46px; }

[data-layout="square"] .player-bar .ctrl-btn.play-pause {
  width: 54px;
  height: 54px;
  min-width: 54px;
  min-height: 54px;
}

[data-layout="square"] .player-controls { gap: 1px; padding-top: 6px; }

/* The format chip is ~28px and a 360x360 window has no room for it. Spec 13
   says secondary detail moves out at short heights rather than pushing the
   seek bar or the nav below the fold, and spec 22 says the same about
   volume in square. It stays in portrait and landscape, where it fits. */
[data-layout="square"] .m-format-chip { display: none; }

[data-layout="square"] .player-bar .m-wave-stack { height: 26px; }

/* Square was budgeted to land EXACTLY on the fold, which is why every
   1px difference anywhere -- a font metric, a chip, the verifier driving a
   real track -- turned into a clip failure. It needs genuine slack, not
   another shave: ~14px of margin so ordinary variation cannot push the
   transport under the nav. */
[data-layout="square"] .player-bar .np-cover { width: min(19%, 76px); }

[data-layout="square"] .now-playing { gap: 8px; }

[data-layout="square"] .player-controls { padding-top: 4px; }

[data-layout="square"] .m-topbar { padding: 0 var(--m-pad) 4px; }

/* =====================================================================
   8. transport — dark glass discs, one dominant play control
   ---------------------------------------------------------------------
   shuffle and repeat are pulled OUT of the transport row and onto their own
   utility row. They are options, not navigation, and mixing the two makes
   play stop being obviously primary. They are the same buttons: only their
   box changed.
   ===================================================================== */

/* SPEC 7 -- FIVE COLUMNS, EVERYWHERE.
   Portrait previously lifted shuffle and repeat into an absolutely
   positioned utility row above the transport. That is exactly what the spec
   forbids: "Do not absolutely position shuffle/repeat against screen edges."
   It also broke on short screens, where the row pushed the times under the
   nav pill. The options are back in the row, where the 1fr outer columns
   hold them symmetrically at the edges and keep the transport centred. */
[data-layout="portrait"] .control-buttons,
[data-layout="landscape"] .control-buttons,
[data-layout="square"] .control-buttons {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto auto auto 1fr;
  align-items: center;
  justify-items: center;
  gap: 14px;
  width: 100%;
  padding-top: 0;
}

[data-layout="portrait"] .ctrl-btn,
[data-layout="landscape"] .ctrl-btn,
[data-layout="square"] .ctrl-btn {
  width: 54px;
  height: 54px;
  min-width: var(--m-tap);
  min-height: var(--m-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(10, 10, 12, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  color: var(--m-ink);
  cursor: pointer;
  transition: transform 120ms ease, background-color 120ms ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

[data-layout="portrait"] .ctrl-btn.prev,
[data-layout="landscape"] .ctrl-btn.prev,
[data-layout="square"] .ctrl-btn.prev { grid-column: 1; grid-row: 1; }

[data-layout="portrait"] .ctrl-btn.play-pause,
[data-layout="landscape"] .ctrl-btn.play-pause,
[data-layout="square"] .ctrl-btn.play-pause {
  grid-column: 2;
  grid-row: 1;
  width: 78px;
  height: 78px;
  min-width: 78px;
  min-height: 78px;
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
}

[data-layout="portrait"] .ctrl-btn.next,
[data-layout="landscape"] .ctrl-btn.next,
[data-layout="square"] .ctrl-btn.next { grid-column: 3; grid-row: 1; }

/* The option pair on their own row: repeat and shuffle, right-aligned,
   above the transport. Same nodes, moved out of the navigation row. */
[data-layout="portrait"] .ctrl-btn.shuffle,
[data-layout="landscape"] .ctrl-btn.shuffle,
[data-layout="square"] .ctrl-btn.shuffle,
[data-layout="portrait"] .ctrl-btn.repeat,
[data-layout="landscape"] .ctrl-btn.repeat,
[data-layout="square"] .ctrl-btn.repeat {
  position: static;
  width: 44px;
  height: 42px;
  min-width: var(--m-tap);
  min-height: var(--m-tap);
  background: rgba(255, 255, 255, 0.10);
  box-shadow: none;
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--m-ink-dim);
}

[data-layout="portrait"] .ctrl-btn.prev,
[data-layout="landscape"] .ctrl-btn.prev,
[data-layout="square"] .ctrl-btn.prev { grid-column: 2; grid-row: 1; }

[data-layout="portrait"] .ctrl-btn.play-pause,
[data-layout="landscape"] .ctrl-btn.play-pause,
[data-layout="square"] .ctrl-btn.play-pause { grid-column: 3; grid-row: 1; }

[data-layout="portrait"] .ctrl-btn.next,
[data-layout="landscape"] .ctrl-btn.next,
[data-layout="square"] .ctrl-btn.next { grid-column: 4; grid-row: 1; }

[data-layout="portrait"] .ctrl-btn.shuffle,
[data-layout="landscape"] .ctrl-btn.shuffle,
[data-layout="square"] .ctrl-btn.shuffle {
  grid-column: 1; grid-row: 1; justify-self: start;
}

[data-layout="portrait"] .ctrl-btn.repeat,
[data-layout="landscape"] .ctrl-btn.repeat,
[data-layout="square"] .ctrl-btn.repeat {
  grid-column: 5; grid-row: 1; justify-self: end;
}



/* LANDSCAPE is the exception. Its window is short, so the 52px utility row
   above the transport is a luxury it cannot pay for -- the option discs pushed
   the time row under the nav pill. A landscape window is WIDE though, so
   there the options sit at the edges of the transport row instead, which is
   where they were before and costs no vertical space. */
/* An active option reads as accent-coloured, not as a hover artefact. */
[data-layout="portrait"] .ctrl-btn.shuffle.active,
[data-layout="landscape"] .ctrl-btn.shuffle.active,
[data-layout="square"] .ctrl-btn.shuffle.active,
[data-layout="portrait"] .ctrl-btn.repeat.active,
[data-layout="landscape"] .ctrl-btn.repeat.active,
[data-layout="square"] .ctrl-btn.repeat.active {
  color: var(--m-accent);
  background: rgba(255, 255, 255, 0.16);
}

[data-layout="portrait"] .ctrl-btn:active,
[data-layout="landscape"] .ctrl-btn:active,
[data-layout="square"] .ctrl-btn:active { transform: scale(0.93); }

[data-layout="portrait"] .ctrl-btn.play-pause:active,
[data-layout="landscape"] .ctrl-btn.play-pause:active,
[data-layout="square"] .ctrl-btn.play-pause:active { transform: scale(0.96); }

/* The equaliser and tiny-player toggles are 30x30 on the desktop bar. They
   are NOT hidden on a phone -- that would remove functionality -- so the hit
   area grows to the floor while the glyph stays visually compact. */
[data-layout="portrait"] .eq-toggle-btn,
[data-layout="landscape"] .eq-toggle-btn,
[data-layout="square"] .eq-toggle-btn {
  min-width: var(--m-tap);
  min-height: var(--m-tap);
  width: var(--m-tap);
  height: var(--m-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--m-ink-dim);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* =====================================================================
   9. seek — a waveform behind a real, draggable progress track
   ---------------------------------------------------------------------
   Two canvases, stacked: the peaks in full, and the played portion clipped
   by a CSS var. Beneath them sits the real `#progress-track`, so seeking is
   UNCHANGED -- this is decoration laid over a control that already works,
   not a second seek implementation.
   ===================================================================== */

[data-layout="portrait"] .progress-bar,
[data-layout="landscape"] .progress-bar,
[data-layout="square"] .progress-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  padding: 0;
  touch-action: pan-y;
}

[data-layout="portrait"] .m-wave-stack,
[data-layout="landscape"] .m-wave-stack,
[data-layout="square"] .m-wave-stack {
  position: relative;
  width: 100%;
  height: 72px;
}

[data-layout="portrait"] .m-wave-stack canvas,
[data-layout="landscape"] .m-wave-stack canvas,
[data-layout="square"] .m-wave-stack canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

[data-layout="portrait"] .progress-track,
[data-layout="landscape"] .progress-track,
[data-layout="square"] .progress-track {
  position: absolute;
  inset: 0;
  z-index: 2;
  height: 100%;
  display: block;
  cursor: pointer;
  background: transparent;
  border: 0;
  box-shadow: none;
  touch-action: none;
}

/* Waveform is the ONLY progress indication on mobile. Keep the transparent
   native seek hitbox over the wave but do not draw a second line. */
[data-layout="portrait"] .progress-track::before,
[data-layout="landscape"] .progress-track::before,
[data-layout="square"] .progress-track::before {
  content: none !important;
}

[data-layout="portrait"] .progress-track .progress-buffered,
[data-layout="landscape"] .progress-track .progress-buffered,
[data-layout="square"] .progress-track .progress-buffered,
[data-layout="portrait"] .progress-fill,
[data-layout="landscape"] .progress-fill,
[data-layout="square"] .progress-fill {
  display: none;
}

[data-layout="portrait"] .m-time-row,
[data-layout="landscape"] .m-time-row,
[data-layout="square"] .m-time-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

[data-layout="portrait"] .time-current,
[data-layout="landscape"] .time-current,
[data-layout="square"] .time-current,
[data-layout="portrait"] .time-total,
[data-layout="landscape"] .time-total,
[data-layout="square"] .time-total {
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  color: var(--m-ink-dim);
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.32);
}

[data-layout="portrait"] .time-total,
[data-layout="landscape"] .time-total,
[data-layout="square"] .time-total { text-align: right; }

/* The audio-format chip: sample rate / bitrate / container, real values from
   the current track. */
[data-layout="portrait"] .m-format-chip,
[data-layout="landscape"] .m-format-chip,
[data-layout="square"] .m-format-chip {
  align-self: center;
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--m-ink-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

[data-layout="portrait"] .m-format-chip:empty,
[data-layout="landscape"] .m-format-chip:empty,
[data-layout="square"] .m-format-chip:empty { display: none; }

/* =====================================================================
   10. volume — portrait only
   ---------------------------------------------------------------------
   Scoped to portrait deliberately: scoped to all modes it out-specified the
   landscape and square `display: none` and volume stayed visible in both
   compositions that have no room for it.
   ===================================================================== */

[data-layout="portrait"] .volume-controls {
  display: flex;
  align-items: center;
  gap: var(--m-gap);
  width: 100%;
  padding: 10px var(--m-pad) 0;
  min-width: 0;
}

[data-layout="portrait"] .volume-controls .volume-slider {
  flex: 1 1 auto;
  min-width: 0;
}

[data-layout="portrait"] .volume-percent {
  font-size: 0.72rem;
  color: var(--m-ink-dim);
  font-variant-numeric: tabular-nums;
  min-width: 3em;
  text-align: right;
}

/* =====================================================================
   11. long-press affordance
   ---------------------------------------------------------------------
   Context menus hang off the native `contextmenu` event, which a phone never
   fires. web-touch.js synthesises it; this only makes the affordance visible.
   ===================================================================== */

[data-layout="portrait"] [data-longpress-armed],
[data-layout="landscape"] [data-longpress-armed],
[data-layout="square"] [data-longpress-armed] {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

[data-layout="portrait"] .np-cover.swiping,
[data-layout="landscape"] .np-cover.swiping,
[data-layout="square"] .np-cover.swiping {
  transition: none;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  [data-layout="portrait"] .ctrl-btn,
  [data-layout="landscape"] .ctrl-btn,
  [data-layout="square"] .ctrl-btn {
    transition: none;
  }
}

/* =====================================================================
   12. mobile navigation surface
   ---------------------------------------------------------------------
   The desktop sidebar's destinations cannot simply disappear, and they are
   not reimplemented here: web-navigation.js builds the Library sheet FROM
   the real sidebar items and clicks them. So the list cannot drift from the
   app's own, and anything desktop-only has nothing to show.
   ===================================================================== */

/* ---- top bar ---- */

[data-layout="portrait"] .m-topbar,
[data-layout="landscape"] .m-topbar,
[data-layout="square"] .m-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 var(--m-pad) 8px;
}

[data-layout="portrait"] .m-topbar-label,
[data-layout="landscape"] .m-topbar-label,
[data-layout="square"] .m-topbar-label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m-ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-layout="portrait"] .m-topbar-btn,
[data-layout="landscape"] .m-topbar-btn,
[data-layout="square"] .m-topbar-btn {
  flex: 0 0 auto;
  width: var(--m-tap);
  height: var(--m-tap);
  min-width: var(--m-tap);
  min-height: var(--m-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  color: var(--m-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ---- mini-player ---- */

[data-layout="portrait"] .m-miniplayer,
[data-layout="landscape"] .m-miniplayer,
[data-layout="square"] .m-miniplayer {
  order: 2;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin-bottom: 6px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  position: relative;
  overflow: hidden;
}

/* Shown only while something is actually playing -- an empty mini-player is
   just a grey bar. */
[data-layout="portrait"] .m-miniplayer.is-live,
[data-layout="landscape"] .m-miniplayer.is-live,
[data-layout="square"] .m-miniplayer.is-live { display: flex; }

/* And hidden when the full player is open, because it would be a second
   copy of the same information two inches apart. */
[data-layout="portrait"].m-player-open .m-miniplayer,
[data-layout="landscape"].m-player-open .m-miniplayer,
[data-layout="square"].m-player-open .m-miniplayer { display: none; }

[data-layout="portrait"] .m-mini-open,
[data-layout="landscape"] .m-mini-open,
[data-layout="square"] .m-mini-open {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

[data-layout="portrait"] .m-mini-art,
[data-layout="landscape"] .m-mini-art,
[data-layout="square"] .m-mini-art {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08) center/cover no-repeat;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

[data-layout="portrait"] .m-mini-meta,
[data-layout="landscape"] .m-mini-meta,
[data-layout="square"] .m-mini-meta { min-width: 0; flex: 1 1 auto; }

[data-layout="portrait"] .m-mini-title,
[data-layout="landscape"] .m-mini-title,
[data-layout="square"] .m-mini-title {
  font-size: 0.84rem;
  color: var(--m-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-layout="portrait"] .m-mini-artist,
[data-layout="landscape"] .m-mini-artist,
[data-layout="square"] .m-mini-artist {
  font-size: 0.74rem;
  color: var(--m-ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-layout="portrait"] .m-mini-btn,
[data-layout="landscape"] .m-mini-btn,
[data-layout="square"] .m-mini-btn {
  flex: 0 0 auto;
  width: var(--m-tap);
  height: var(--m-tap);
  min-width: var(--m-tap);
  min-height: var(--m-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  color: var(--m-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* A hairline, not a bar. The seek control is right above it in the full
   player; this only has to say "there is progress". */
[data-layout="portrait"] .m-mini-progress,
[data-layout="landscape"] .m-mini-progress,
[data-layout="square"] .m-mini-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--m-accent);
  border-radius: 999px;
  pointer-events: none;
}

/* ---- bottom nav: four destinations, not a row of tiny icons ---- */

[data-layout="portrait"] .m-tabbar,
[data-layout="landscape"] .m-tabbar,
[data-layout="square"] .m-tabbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  width: 100%;
  height: 100%;
}

[data-layout="portrait"] .sidebar .nav-item,
[data-layout="landscape"] .sidebar .nav-item,
[data-layout="square"] .sidebar .nav-item { display: none; }

[data-layout="portrait"] .m-tab,
[data-layout="landscape"] .m-tab,
[data-layout="square"] .m-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 100%;
  min-height: var(--m-tap);
  padding: 0;
  border: none;
  border-radius: 14px;
  background: none;
  color: var(--m-ink-dim);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

[data-layout="portrait"] .m-tab .icon,
[data-layout="landscape"] .m-tab .icon,
[data-layout="square"] .m-tab .icon { font-size: 1.3rem; line-height: 1; }

[data-layout="portrait"] .m-tab-label,
[data-layout="landscape"] .m-tab-label,
[data-layout="square"] .m-tab-label {
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  color: inherit;
}

/* Selected state is a colour change AND a pill, so it does not rely on
   colour alone (spec 7). */
[data-layout="portrait"] .m-tab.is-active,
[data-layout="landscape"] .m-tab.is-active,
[data-layout="square"] .m-tab.is-active {
  color: var(--m-accent);
  background: rgba(255, 255, 255, 0.08);
}

/* ---- sheets ---- */

[data-layout="portrait"] .m-scrim,
[data-layout="landscape"] .m-scrim,
[data-layout="square"] .m-scrim {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

[data-layout="portrait"] .m-scrim.is-open,
[data-layout="landscape"] .m-scrim.is-open,
[data-layout="square"] .m-scrim.is-open { opacity: 1; pointer-events: auto; }

[data-layout="portrait"] .m-sheet,
[data-layout="landscape"] .m-sheet,
[data-layout="square"] .m-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  max-height: 86dvh;
  display: flex;
  flex-direction: column;
  padding: 18px var(--m-pad) calc(var(--m-safe-b) + 18px);
  border-radius: 26px 26px 0 0;
  background: rgba(18, 18, 22, 0.97);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  transform: translateY(102%);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
  overscroll-behavior: contain;
}

[data-layout="portrait"] .m-sheet.is-open,
[data-layout="landscape"] .m-sheet.is-open,
[data-layout="square"] .m-sheet.is-open { transform: translateY(0); }

[data-layout="portrait"] .m-sheet-head,
[data-layout="landscape"] .m-sheet-head,
[data-layout="square"] .m-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

[data-layout="portrait"] .m-sheet-title,
[data-layout="landscape"] .m-sheet-title,
[data-layout="square"] .m-sheet-title { font-size: 1.05rem; font-weight: 600; color: var(--m-ink); }

[data-layout="portrait"] .m-lib-grid,
[data-layout="landscape"] .m-lib-grid,
[data-layout="square"] .m-lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
}

[data-layout="portrait"] .m-lib-item,
[data-layout="landscape"] .m-lib-item,
[data-layout="square"] .m-lib-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  min-height: 84px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
  color: var(--m-ink);
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

[data-layout="portrait"] .m-lib-icon,
[data-layout="landscape"] .m-lib-icon,
[data-layout="square"] .m-lib-icon { font-size: 1.3rem; line-height: 1; color: var(--m-accent); }

[data-layout="portrait"] .m-lib-label,
[data-layout="landscape"] .m-lib-label,
[data-layout="square"] .m-lib-label { font-size: 0.84rem; font-weight: 500; }

[data-layout="portrait"] .m-action-item,
[data-layout="landscape"] .m-action-item,
[data-layout="square"] .m-action-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 52px;
  margin-bottom: 8px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
  color: var(--m-ink);
  font-size: 0.92rem;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

/* While a sheet is open the player behind it must not eat taps. */
[data-layout="portrait"].m-lib-open .player-bar,
[data-layout="landscape"].m-lib-open .player-bar,
[data-layout="square"].m-lib-open .player-bar { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  [data-layout="portrait"] .m-sheet,
  [data-layout="landscape"] .m-sheet,
  [data-layout="square"] .m-sheet,
  [data-layout="portrait"] .m-scrim,
  [data-layout="landscape"] .m-scrim,
  [data-layout="square"] .m-scrim {
    transition: none !important;
  }
}

/* ---- three metadata levels -------------------------------------------
   TITLE strongest, ARTIST secondary, ALBUM tertiary. The album line exists
   only in mobile modes (web-nowplaying.js creates it and removes it again on
   leaving a mobile mode), so the desktop "artist - album" line is unchanged. */

[data-layout="portrait"] .np-info .m-album,
[data-layout="landscape"] .np-info .m-album,
[data-layout="square"] .np-info .m-album {
  display: block;
  max-width: 100%;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.74rem;
  line-height: 1.3;
  color: var(--m-ink-dim);
  opacity: 0.82;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-layout="portrait"] .np-info .m-album:empty,
[data-layout="landscape"] .np-info .m-album:empty,
[data-layout="square"] .np-info .m-album:empty { display: none; }

/* Artist may wrap to a second line when the ensemble name is long. The
   album truncates after one line, per spec 5. */
[data-layout="portrait"] .np-info p:not(.m-album),
[data-layout="landscape"] .np-info p:not(.m-album),
[data-layout="square"] .np-info p:not(.m-album) {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

[data-layout="portrait"] .np-info h4,
[data-layout="landscape"] .np-info h4,
[data-layout="square"] .np-info h4 { white-space: normal; }

/* Square carries art + title + artist + album + waveform + times + transport
   + nav inside 360px. Spec 5 allows compact layouts to tighten spacing and
   type but requires the hierarchy to survive, so the album line stays and
   becomes a hairline instead of a chip -- tertiary is tertiary. */
[data-layout="square"] .np-info .m-album {
  padding: 0 10px;
  font-size: 0.68rem;
  background: none;
  opacity: 0.75;
}

[data-layout="square"] .np-info { gap: 4px; }

[data-layout="square"] .player-bar .np-cover { width: min(16%, 64px); }

[data-layout="square"] .player-bar .m-wave-stack { height: 22px; }

/* The discs go to the 44px tap floor -- which is the accessibility minimum,
   not a compromise -- and the tab bar drops its vertical padding. Neither
   removes a control; both reclaim height that 360x360 genuinely lacks. */
[data-layout="square"] .player-bar .ctrl-btn { width: 44px; height: 44px; }

[data-layout="square"] .player-bar .ctrl-btn.play-pause {
  width: 54px;
  height: 54px;
  min-width: 54px;
  min-height: 54px;
}

[data-layout="square"] .sidebar { padding: 2px 12px calc(var(--m-safe-b) + 4px); }

[data-layout="square"] .player-bar { --m-nav-h: 52px; }

[data-layout="square"] .sidebar .nav { height: 52px; }

/* Spec 5 allows the artist two lines, and portrait and landscape use that.
   A 360x360 window does not have the height for it -- the second line cost
   exactly the slack the transport needed -- so square keeps one line with an
   ellipsis. The hierarchy is unchanged; only the wrap count differs. */
[data-layout="square"] .np-info p:not(.m-album) {
  -webkit-line-clamp: 1;
  white-space: nowrap;
}

/* 360x360 is genuinely 12px short, not order-dependent -- the order diagnostic
   returned NO DIFFERENCE between an isolated run and a run after all 20 other
   viewports. The earlier "272/272, passes" reading came from a different
   harness that captured geometry BEFORE establishing a current track, so the
   album line and format chip did not yet exist. Square has to find the 12px
   for real. The waveform goes to a minimum, and the vertical rhythm tightens. */
[data-layout="square"] .player-bar .m-wave-stack { height: 16px; }

[data-layout="square"] .np-info { gap: 2px; }

[data-layout="square"] .m-topbar { padding: 0 var(--m-pad) 2px; }

[data-layout="square"] .m-topbar-btn { width: var(--m-tap); height: 36px; min-height: 36px; }

[data-layout="square"] .player-controls { gap: 0; padding-top: 2px; }

[data-layout="square"] .time-current,
[data-layout="square"] .time-total { padding: 1px 8px; font-size: 0.68rem; }

/* =====================================================================
   buffered progress
   =====================================================================
   Three concepts, three layers, in z-order from back to front:

     .progress-track     the geometry -- implicitly the TOTAL DURATION
     .progress-buffered  media already fetched (audio.buffered, real ranges)
     .progress-fill      playback position

   The buffered bar must never be mistakable for the fill, and must never
   imply the track is that long. So it is a desaturated, lower-opacity bar
   that sits UNDER the fill and stops short of nothing -- it spans exactly the
   buffered range, which for a fully cached track legitimately reaches 100%.
*/

[data-layout] .progress-buffered {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  pointer-events: none;
  border-radius: inherit;
  background: var(--m-buffered, rgba(255, 255, 255, 0.22));
  transition: width 0.25s linear;
}

/* The fill stays fully opaque on top so the two never merge visually. */
[data-layout] .progress-fill { position: relative; z-index: 1; }

/* On a light or bright artwork the ambient scrim keeps the track dark, but
   guard anyway: a white buffered bar on a white bar is invisible. */
[data-layout="portrait"] .progress-buffered,
[data-layout="landscape"] .progress-buffered,
[data-layout="square"] .progress-buffered {
  --m-buffered: rgba(255, 255, 255, 0.26);
}

/* Short viewports: a 2px bar is unreadable at a glance, so give the buffered
   layer a hair more presence without changing the track geometry. */
[data-layout="square"] .progress-buffered { --m-buffered: rgba(255, 255, 255, 0.32); }

/* Reduced motion: the width transition is decorative, not informational.
   The value still updates, just without animating. */
@media (prefers-reduced-motion: reduce) {
  [data-layout] .progress-buffered { transition: none; }
}

/* =====================================================================
   the per-track More menu on a phone
   =====================================================================
   The MENU ITSELF is the desktop's: createContextMenu builds it, with the
   real actions bound by getTrackContextMenu. None of that is reimplemented
   here. This is presentation only -- the same DOM the desktop right-click
   menu produces, turned into a bottom sheet by layout.

   On a phone a floating menu anchored to a button in a corner is a bad
   target: it is small, its items sit under the thumb-free top of the screen,
   and its submenus (Sync to device) open sideways off-screen. So the ROOT
   level becomes a sheet from the bottom. Submenus stay anchored to their
   parent item, because a sheet-in-a-sheet for one submenu is worse than a
   row that expands.
*/

[data-layout="portrait"] .context-menu.show,
[data-layout="landscape"] .context-menu.show,
[data-layout="square"] .context-menu.show {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100%;
  max-width: none;
  max-height: 72vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 20px 20px 0 0;
  padding: 10px 8px calc(14px + env(safe-area-inset-bottom, 0px));
  background: rgba(18, 18, 22, 0.97);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow: 0 -18px 46px rgba(0, 0, 0, 0.55);
  z-index: 100000;
  animation: m-sheet-up 0.18s ease-out;
}

/* A grab handle, so the sheet reads as dismissable rather than as a panel
   that happens to be at the bottom. */
[data-layout="portrait"] .context-menu.show::before,
[data-layout="landscape"] .context-menu.show::before,
[data-layout="square"] .context-menu.show::before {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  margin: 2px auto 10px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.28);
}

/* 48px rows: the same minimum the transport controls use. */
[data-layout="portrait"] .context-menu.show .context-menu-item,
[data-layout="landscape"] .context-menu.show .context-menu-item,
[data-layout="square"] .context-menu.show .context-menu-item {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 0.95rem;
}

[data-layout="portrait"] .context-menu.show .context-menu-item:active,
[data-layout="landscape"] .context-menu.show .context-menu-item:active,
[data-layout="square"] .context-menu.show .context-menu-item:active {
  background: rgba(255, 255, 255, 0.10);
}

@keyframes m-sheet-up {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Submenus keep the desktop behaviour. Forcing them into the sheet would
   stack a second sheet above the first and hide the parent row you are
   reading, which is worse than a sideways row on a wide-enough landscape. */
[data-layout="portrait"] .context-menu-sub,
[data-layout="landscape"] .context-menu-sub,
[data-layout="square"] .context-menu-sub {
  position: fixed;
  z-index: 100001;
}

@media (prefers-reduced-motion: reduce) {
  [data-layout="portrait"] .context-menu.show,
  [data-layout="landscape"] .context-menu.show,
  [data-layout="square"] .context-menu.show { animation: none; }
}

/* =====================================================================
   12. browse is the screen; the full player is not a tab
   =====================================================================
   m-player-closed: library / search / queue fill the column. The full
   Now Playing bar does not consume layout.
   m-player-open:   Now Playing fills the column. Browse does not.
   Search is a screen (m-search-open), not a 400px bar sitting in the header.
   ===================================================================== */

[data-layout="portrait"].m-player-closed .player-bar,
[data-layout="landscape"].m-player-closed .player-bar,
[data-layout="square"].m-player-closed .player-bar {
  display: none !important;
}

[data-layout="portrait"].m-player-open main,
[data-layout="landscape"].m-player-open main,
[data-layout="square"].m-player-open main {
  display: none !important;
}

[data-layout="portrait"].m-player-open .player-bar,
[data-layout="landscape"].m-player-open .player-bar,
[data-layout="square"].m-player-open .player-bar {
  flex: 0 1 auto;
  max-height: 58vh;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* The real sidebar items stay in the DOM so the Library sheet can click
   them. The phone shows only the tab bar built on top of that nav. */
[data-layout="portrait"] .sidebar .nav > :not(.m-tabbar),
[data-layout="landscape"] .sidebar .nav > :not(.m-tabbar),
[data-layout="square"] .sidebar .nav > :not(.m-tabbar) {
  display: none !important;
}

[data-layout="portrait"] .m-tabbar,
[data-layout="landscape"] .m-tabbar,
[data-layout="square"] .m-tabbar {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  justify-content: space-around;
  width: 100%;
  height: 100%;
  min-height: var(--m-tap);
}

[data-layout="portrait"] .m-tab,
[data-layout="landscape"] .m-tab,
[data-layout="square"] .m-tab {
  flex: 1 1 0;
  min-width: var(--m-tap);
  min-height: var(--m-tap);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: none;
  background: none;
  color: var(--m-ink-dim);
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

[data-layout="portrait"] .m-tab.is-active,
[data-layout="landscape"] .m-tab.is-active,
[data-layout="square"] .m-tab.is-active {
  color: var(--m-accent);
}

[data-layout="portrait"] .m-tab-label,
[data-layout="landscape"] .m-tab-label,
[data-layout="square"] .m-tab-label {
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  line-height: 1;
}

[data-layout="portrait"] .ctrl-btn.play-pause .icon-svg,
[data-layout="landscape"] .ctrl-btn.play-pause .icon-svg,
[data-layout="square"] .ctrl-btn.play-pause .icon-svg {
  color: #fff;
}

[data-layout="portrait"] .m-tab .icon,
[data-layout="landscape"] .m-tab .icon,
[data-layout="square"] .m-tab .icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  color: inherit;
}
[data-layout="portrait"] .m-topbar-btn[aria-label="Back to library"] .icon-svg,
[data-layout="landscape"] .m-topbar-btn[aria-label="Back to library"] .icon-svg,
[data-layout="square"] .m-topbar-btn[aria-label="Back to library"] .icon-svg {
  transform: scaleX(-1);
}

/* ---- library chips: wrap, never a row wider than the screen ---- */

[data-layout="portrait"] .m-chips,
[data-layout="landscape"] .m-chips,
[data-layout="square"] .m-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 8px 12px 4px;
}

[data-layout="portrait"] .m-chip,
[data-layout="landscape"] .m-chip,
[data-layout="square"] .m-chip {
  flex: 0 1 auto;
  max-width: 100%;
  min-height: var(--m-tap);
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: var(--m-ink);
  font-size: 0.84rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

[data-layout="portrait"] .m-chip.is-active,
[data-layout="landscape"] .m-chip.is-active,
[data-layout="square"] .m-chip.is-active {
  color: var(--m-accent);
  border-color: var(--m-accent);
}

[data-layout="portrait"].m-search-open .m-chips,
[data-layout="landscape"].m-search-open .m-chips,
[data-layout="square"].m-search-open .m-chips,
[data-layout="portrait"].m-player-open .m-chips,
[data-layout="landscape"].m-player-open .m-chips,
[data-layout="square"].m-player-open .m-chips {
  display: none;
}

/* ---- header: the 400px search bar is the search SCREEN, not chrome ---- */

[data-layout="portrait"] .header,
[data-layout="landscape"] .header,
[data-layout="square"] .header {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--m-tap);
  padding: 8px 12px 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

[data-layout="portrait"] .search-bar,
[data-layout="landscape"] .search-bar,
[data-layout="square"] .search-bar,
[data-layout="portrait"] #view-tabs,
[data-layout="landscape"] #view-tabs,
[data-layout="square"] #view-tabs,
[data-layout="portrait"] .header .user-area,
[data-layout="landscape"] .header .user-area,
[data-layout="square"] .header .user-area,
[data-layout="portrait"] .scope-pill,
[data-layout="landscape"] .scope-pill,
[data-layout="square"] .scope-pill {
  display: none !important;
}

[data-layout="portrait"].m-search-open .search-bar,
[data-layout="landscape"].m-search-open .search-bar,
[data-layout="square"].m-search-open .search-bar {
  display: flex !important;
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  flex: 1 1 auto;
}

[data-layout="portrait"] .m-search-clear,
[data-layout="landscape"] .m-search-clear,
[data-layout="square"] .m-search-clear {
  flex: 0 0 auto;
  min-width: var(--m-tap);
  min-height: var(--m-tap);
  border: none;
  background: none;
  color: var(--m-accent);
  font-size: 0.84rem;
  cursor: pointer;
}

[data-layout="portrait"] .hero::before,
[data-layout="landscape"] .hero::before,
[data-layout="square"] .hero::before,
[data-layout="portrait"] .home-hero::before,
[data-layout="landscape"] .home-hero::before,
[data-layout="square"] .home-hero::before {
  display: none !important;
}

[data-layout="portrait"] .hsc,
[data-layout="landscape"] .hsc,
[data-layout="square"] .hsc {
  min-width: 0 !important;
  flex: 1 1 100%;
  max-width: 100%;
  box-sizing: border-box;
}

[data-layout="portrait"].m-search-open .home-hero,
[data-layout="landscape"].m-search-open .home-hero,
[data-layout="square"].m-search-open .home-hero,
[data-layout="portrait"].m-search-open .home-section:not(.home-search),
[data-layout="landscape"].m-search-open .home-section:not(.home-search),
[data-layout="square"].m-search-open .home-section:not(.home-search) {
  display: none !important;
}

/* ---- phone library grids ---- */

[data-layout="portrait"] .albums-grid,
[data-layout="square"] .albums-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding: 8px 12px 28px !important;
}

[data-layout="landscape"] .albums-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 8px 12px 20px !important;
}

[data-layout="portrait"] .entity-tiles-grid,
[data-layout="square"] .entity-tiles-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 8px 12px 28px !important;
}

[data-layout="landscape"] .entity-tiles-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

[data-layout="portrait"] .composer-cards-grid,
[data-layout="landscape"] .composer-cards-grid,
[data-layout="square"] .composer-cards-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  padding: 8px 12px 28px !important;
  gap: 8px !important;
}

/* ---- queue: the list is the screen; the hero is the full player ---- */

[data-layout="portrait"] .queue-now-playing-hero-col,
[data-layout="landscape"] .queue-now-playing-hero-col,
[data-layout="square"] .queue-now-playing-hero-col {
  display: none !important;
}

[data-layout="portrait"] .queue-now-playing,
[data-layout="landscape"] .queue-now-playing,
[data-layout="square"] .queue-now-playing {
  display: block !important;
  width: 100%;
  max-width: 100%;
}

[data-layout="portrait"] .rpq-tab,
[data-layout="landscape"] .rpq-tab,
[data-layout="square"] .rpq-tab,
[data-layout="portrait"] .queue-clear-btn,
[data-layout="landscape"] .queue-clear-btn,
[data-layout="square"] .queue-clear-btn {
  min-height: var(--m-tap);
  min-width: var(--m-tap);
}

/* ---- album detail: full screen, work headers stay text ---- */

[data-layout="portrait"] .album-detail-panel.open,
[data-layout="landscape"] .album-detail-panel.open,
[data-layout="square"] .album-detail-panel.open {
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  border: none;
}

[data-layout="portrait"] .detail-close,
[data-layout="landscape"] .detail-close,
[data-layout="square"] .detail-close,
[data-layout="portrait"] .detail-play-btn,
[data-layout="landscape"] .detail-play-btn,
[data-layout="square"] .detail-play-btn,
[data-layout="portrait"] .detail-booklet-btn,
[data-layout="landscape"] .detail-booklet-btn,
[data-layout="square"] .detail-booklet-btn,
[data-layout="portrait"] .detail-iconbtn,
[data-layout="landscape"] .detail-iconbtn,
[data-layout="square"] .detail-iconbtn {
  min-width: var(--m-tap);
  min-height: var(--m-tap);
}

[data-layout="portrait"] .detail-work-header,
[data-layout="landscape"] .detail-work-header,
[data-layout="square"] .detail-work-header {
  min-height: var(--m-tap);
  padding: 8px 12px;
  background: none;
  border-radius: 0;
}

/* ---- classical lines: text, not pills ---- */

[data-layout="portrait"] .np-info .m-work,
[data-layout="landscape"] .np-info .m-work,
[data-layout="square"] .np-info .m-work,
[data-layout="portrait"] .np-info .m-movement,
[data-layout="landscape"] .np-info .m-movement,
[data-layout="square"] .np-info .m-movement,
[data-layout="portrait"] .np-info .m-composer,
[data-layout="landscape"] .np-info .m-composer,
[data-layout="square"] .np-info .m-composer {
  margin: 0;
  padding: 0 8px;
  background: none;
  border-radius: 0;
  text-align: center;
  max-width: 100%;
  box-sizing: border-box;
}

[data-layout="portrait"] .np-info .m-composer,
[data-layout="landscape"] .np-info .m-composer,
[data-layout="square"] .np-info .m-composer {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--m-ink-dim);
}

[data-layout="portrait"] .np-info .m-work,
[data-layout="landscape"] .np-info .m-work,
[data-layout="square"] .np-info .m-work {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--m-ink);
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

[data-layout="portrait"] .np-info .m-movement,
[data-layout="landscape"] .np-info .m-movement,
[data-layout="square"] .np-info .m-movement {
  font-size: 0.84rem;
  color: var(--m-ink-dim);
}

[data-layout="portrait"] .np-info .m-work[hidden],
[data-layout="landscape"] .np-info .m-work[hidden],
[data-layout="square"] .np-info .m-work[hidden],
[data-layout="portrait"] .np-info .m-movement[hidden],
[data-layout="landscape"] .np-info .m-movement[hidden],
[data-layout="square"] .np-info .m-movement[hidden],
[data-layout="portrait"] .np-info .m-composer[hidden],
[data-layout="landscape"] .np-info .m-composer[hidden],
[data-layout="square"] .np-info .m-composer[hidden] {
  display: none !important;
}

/* Booklet and info live in the top bar so they do not grow the transport. */
[data-layout="portrait"] .m-topbar .m-info-btn,
[data-layout="landscape"] .m-topbar .m-info-btn,
[data-layout="square"] .m-topbar .m-info-btn,
[data-layout="portrait"] .m-topbar .m-booklet-btn:not([hidden]),
[data-layout="landscape"] .m-topbar .m-booklet-btn:not([hidden]),
[data-layout="square"] .m-topbar .m-booklet-btn:not([hidden]) {
  flex: 0 0 auto;
  min-width: var(--m-tap);
  min-height: var(--m-tap);
  height: var(--m-tap);
  padding: 0 10px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  color: var(--m-ink);
  font-size: 0.75rem;
  cursor: pointer;
}

[data-layout="portrait"] .m-info-row,
[data-layout="landscape"] .m-info-row,
[data-layout="square"] .m-info-row {
  display: flex;
  gap: 12px;
  min-height: var(--m-tap);
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-layout="portrait"] .m-info-k,
[data-layout="landscape"] .m-info-k,
[data-layout="square"] .m-info-k {
  flex: 0 0 38%;
  color: var(--m-ink-dim);
  font-size: 0.78rem;
}

[data-layout="portrait"] .m-info-v,
[data-layout="landscape"] .m-info-v,
[data-layout="square"] .m-info-v {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--m-ink);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

[data-layout="portrait"] .m-miniplayer,
[data-layout="landscape"] .m-miniplayer,
[data-layout="square"] .m-miniplayer {
  align-self: stretch;
  margin: 0 10px 6px;
  max-width: 100%;
  box-sizing: border-box;
  touch-action: pan-y;
}

/* ---- in-app booklet reader. One page or one spread. Playback is untouched. ---- */

.booklet-modal.booklet-mobile {
  position: fixed;
  inset: 0;
  z-index: 7000;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #0b0b0d;
  color: #fff;
  user-select: none;
  -webkit-user-select: none;
}

.booklet-modal.booklet-mobile .booklet-phone-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  max-height: 52px;
  padding: 2px 8px;
  flex: 0 0 auto;
}

.booklet-modal.booklet-mobile .booklet-phone-bar .booklet-close {
  min-width: 44px;
  min-height: 44px;
  width: auto;
  height: 44px;
  padding: 0 8px;
  border: none;
  border-radius: 8px;
  background: none;
  color: #fff;
  font-size: 0.95rem;
  cursor: pointer;
  touch-action: manipulation;
}

.booklet-modal.booklet-mobile .booklet-phone-bar .booklet-title {
  flex: 1 1 auto;
  min-width: 0;
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.booklet-modal.booklet-mobile .booklet-phone-bar .booklet-page-label {
  flex: 0 1 auto;
  min-width: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.booklet-modal.booklet-mobile .booklet-mode-toggle {
  display: flex;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  overflow: hidden;
}

.booklet-modal.booklet-mobile .booklet-mode-opt {
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

.booklet-modal.booklet-mobile .booklet-mode-opt.is-active {
  background: rgba(var(--accent-primary-rgb), 0.22);
  color: var(--accent-primary);
}

.booklet-modal.booklet-mobile .booklet-phone-stage {
  position: relative;
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  background: #0b0b0d;
}

.booklet-modal.booklet-mobile .booklet-phone-viewport {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}

.booklet-modal.booklet-mobile .booklet-phone-spread {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  max-height: 100%;
  transform-origin: center center;
}

.booklet-modal.booklet-mobile .booklet-phone-leaf {
  flex: 0 0 auto;
  background: #fff;
  line-height: 0;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.booklet-modal.booklet-mobile .booklet-phone-leaf canvas {
  display: block;
  max-width: none;
  max-height: none;
}

.booklet-modal.booklet-mobile .booklet-nav {
  width: 44px;
  min-width: 44px;
  height: 64px;
  min-height: 44px;
  top: 50%;
  touch-action: manipulation;
}

.booklet-modal.booklet-mobile .booklet-nav-prev { left: 4px; }
.booklet-modal.booklet-mobile .booklet-nav-next { right: 4px; }

@media (prefers-reduced-motion: reduce) {
  [data-layout="portrait"] .m-miniplayer,
  [data-layout="landscape"] .m-miniplayer,
  [data-layout="square"] .m-miniplayer,
  .booklet-modal.booklet-mobile,
  .booklet-modal.booklet-mobile .booklet-phone-spread {
    transition: none;
  }
}

/* =====================================================================
   Second design pass — match the phone references.
   Home is a landing. Library is covers. Now Playing holds the queue.
   Desktop rules below are web-only because this file is not linked
   into the Tauri window.
   ===================================================================== */

[data-layout="portrait"] .m-chips,
[data-layout="landscape"] .m-chips,
[data-layout="square"] .m-chips,
[data-layout="portrait"] .m-chip,
[data-layout="landscape"] .m-chip,
[data-layout="square"] .m-chip {
  display: none !important;
}

/* ---- Home landing ---- */

[data-layout="portrait"] .m-home,
[data-layout="landscape"] .m-home,
[data-layout="square"] .m-home {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  overflow: hidden;
  background: #0c0c10;
}

[data-layout="portrait"].m-home-open .m-home,
[data-layout="landscape"].m-home-open .m-home,
[data-layout="square"].m-home-open .m-home {
  display: block;
}

[data-layout="portrait"].m-player-open .m-home,
[data-layout="landscape"].m-player-open .m-home,
[data-layout="square"].m-player-open .m-home {
  display: none !important;
}

.m-home-mosaic {
  position: absolute;
  inset: -8%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  filter: blur(1px) saturate(0.85);
  opacity: 0.55;
}

.m-home-tile {
  aspect-ratio: 1;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
}

.m-home-copy {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 18%;
  z-index: 1;
}

.m-home-title {
  margin: 0;
  font-size: 2.4rem;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.m-home-sub {
  margin: 10px 0 0;
  max-width: 16rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1rem;
}

[data-layout="portrait"].m-home-open .header,
[data-layout="landscape"].m-home-open .header,
[data-layout="square"].m-home-open .header,
[data-layout="portrait"].m-home-open .view-section,
[data-layout="landscape"].m-home-open .view-section,
[data-layout="square"].m-home-open .view-section {
  visibility: hidden;
}

/* ---- compact library header: title, search, sort, menu ---- */

[data-layout="portrait"] main .header,
[data-layout="landscape"] main .header,
[data-layout="square"] main .header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title menu"
    "search sort";
  align-items: center;
  gap: 8px;
  padding: 8px 12px 4px !important;
  min-height: 0 !important;
}

[data-layout="portrait"] .current-view-label,
[data-layout="landscape"] .current-view-label,
[data-layout="square"] .current-view-label {
  grid-area: title;
  font-size: 1.35rem;
  font-weight: 700;
}

[data-layout="portrait"] .m-menu-btn,
[data-layout="landscape"] .m-menu-btn,
[data-layout="square"] .m-menu-btn {
  grid-area: menu;
  width: 44px;
  height: 44px;
  /* The reference shows a bare glyph — no chip, no border. */
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--m-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

[data-layout="portrait"] main .header .search-bar,
[data-layout="landscape"] main .header .search-bar,
[data-layout="square"] main .header .search-bar {
  grid-area: search;
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 40px;
  margin: 0;
}

[data-layout="portrait"] .library-sort-pill,
[data-layout="landscape"] .library-sort-pill,
[data-layout="square"] .library-sort-pill {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  margin: 0 12px 4px auto;
  max-width: 42%;
}

[data-layout="portrait"] .library-sort-select,
[data-layout="landscape"] .library-sort-select,
[data-layout="square"] .library-sort-select {
  min-height: 36px;
  max-width: 100%;
}

/* ---- cover is the card ---- */

[data-layout="portrait"] .albums-grid,
[data-layout="square"] .albums-grid {
  grid-template-columns: repeat(var(--m-album-cols, 2), minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 4px 12px 24px !important;
}

[data-layout="landscape"] .albums-grid {
  grid-template-columns: repeat(var(--m-album-cols, 3), minmax(0, 1fr)) !important;
}

[data-layout="portrait"] .album-card,
[data-layout="landscape"] .album-card,
[data-layout="square"] .album-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  aspect-ratio: 1;
}

[data-layout="portrait"] .album-card .album-cover,
[data-layout="landscape"] .album-card .album-cover,
[data-layout="square"] .album-card .album-cover {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 0;
}

[data-layout="portrait"] .album-card .album-cover img,
[data-layout="landscape"] .album-card .album-cover img,
[data-layout="square"] .album-card .album-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-layout="portrait"] .album-card .album-info,
[data-layout="landscape"] .album-card .album-info,
[data-layout="square"] .album-card .album-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 36px 10px 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0));
}

[data-layout="portrait"] .album-card .album-info h3,
[data-layout="landscape"] .album-card .album-info h3,
[data-layout="square"] .album-card .album-info h3 {
  font-size: 0.85rem;
  line-height: 1.15;
  margin: 0;
}

[data-layout="portrait"] .album-card .album-info p,
[data-layout="landscape"] .album-card .album-info p,
[data-layout="square"] .album-card .album-info p {
  margin: 2px 0 0;
  font-size: 0.70rem;
  opacity: 0.85;
}

[data-layout="portrait"] .album-quality-badge,
[data-layout="landscape"] .album-quality-badge,
[data-layout="square"] .album-quality-badge {
  top: 8px !important;
  left: 8px !important;
  bottom: auto !important;
  right: auto !important;
}

/* ---- Mobile album-grid density rules (2 / 3 / 4 columns) ---- */

/* 3 columns: tighter typography, same overlay */
[data-layout="portrait"][data-m-album-cols="3"] .album-card .album-info h3,
[data-layout="landscape"][data-m-album-cols="3"] .album-card .album-info h3,
[data-layout="square"][data-m-album-cols="3"] .album-card .album-info h3 {
  font-size: 0.78rem;
  line-height: 1.1;
}

[data-layout="portrait"][data-m-album-cols="3"] .album-card .album-info p,
[data-layout="landscape"][data-m-album-cols="3"] .album-card .album-info p,
[data-layout="square"][data-m-album-cols="3"] .album-card .album-info p {
  font-size: 0.64rem;
  margin: 1px 0 0;
  opacity: 0.85;
}

/* 4 columns: no text overlay, no gradient, clean tile */
[data-layout="portrait"][data-m-album-cols="4"] .album-card .album-info,
[data-layout="landscape"][data-m-album-cols="4"] .album-card .album-info,
[data-layout="square"][data-m-album-cols="4"] .album-card .album-info {
  display: none !important;
}

/* 3 columns: smaller quality badge */
[data-layout="portrait"][data-m-album-cols="3"] .album-quality-badge .audio-badge,
[data-layout="landscape"][data-m-album-cols="3"] .album-quality-badge .audio-badge,
[data-layout="square"][data-m-album-cols="3"] .album-quality-badge .audio-badge {
  font-size: 8px;
  letter-spacing: 0.03em;
}
[data-layout="portrait"][data-m-album-cols="3"] .album-quality-badge .audio-badge .ab-format,
[data-layout="landscape"][data-m-album-cols="3"] .album-quality-badge .audio-badge .ab-format,
[data-layout="square"][data-m-album-cols="3"] .album-quality-badge .audio-badge .ab-format,
[data-layout="portrait"][data-m-album-cols="3"] .album-quality-badge .audio-badge .ab-quality,
[data-layout="landscape"][data-m-album-cols="3"] .album-quality-badge .audio-badge .ab-quality,
[data-layout="square"][data-m-album-cols="3"] .album-quality-badge .audio-badge .ab-quality {
  padding: 2px 5px;
}

/* 4 columns: very small/minimal quality badge */
[data-layout="portrait"][data-m-album-cols="4"] .album-quality-badge,
[data-layout="landscape"][data-m-album-cols="4"] .album-quality-badge,
[data-layout="square"][data-m-album-cols="4"] .album-quality-badge {
  top: 4px !important;
  left: 4px !important;
}
[data-layout="portrait"][data-m-album-cols="4"] .album-quality-badge .audio-badge,
[data-layout="landscape"][data-m-album-cols="4"] .album-quality-badge .audio-badge,
[data-layout="square"][data-m-album-cols="4"] .album-quality-badge .audio-badge {
  font-size: 6.5px;
  letter-spacing: 0.02em;
  border-radius: 3px;
}
[data-layout="portrait"][data-m-album-cols="4"] .album-quality-badge .audio-badge .ab-format,
[data-layout="landscape"][data-m-album-cols="4"] .album-quality-badge .audio-badge .ab-format,
[data-layout="square"][data-m-album-cols="4"] .album-quality-badge .audio-badge .ab-format,
[data-layout="portrait"][data-m-album-cols="4"] .album-quality-badge .audio-badge .ab-quality,
[data-layout="landscape"][data-m-album-cols="4"] .album-quality-badge .audio-badge .ab-quality,
[data-layout="square"][data-m-album-cols="4"] .album-quality-badge .audio-badge .ab-quality {
  padding: 1px 3px;
}

[data-layout="portrait"] .web-download-btn,
[data-layout="landscape"] .web-download-btn,
[data-layout="square"] .web-download-btn {
  display: none !important;
}

/* ---- entity / subview: use the phone width ---- */

[data-layout="portrait"] .entity-detail,
[data-layout="landscape"] .entity-detail,
[data-layout="square"] .entity-detail {
  padding: 0 12px 24px !important;
  max-width: none !important;
}

/* The portrait is real information — initials avatars included — so the
   no-photo case renders the gradient tile instead of hiding the slot
   (the reference keeps a visible portrait). */
[data-layout="portrait"] .entity-detail-avatar:not(:has(img)),
[data-layout="landscape"] .entity-detail-avatar:not(:has(img)),
[data-layout="square"] .entity-detail-avatar:not(:has(img)) {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

[data-layout="portrait"] .entity-detail-avatar,
[data-layout="landscape"] .entity-detail-avatar,
[data-layout="square"] .entity-detail-avatar {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  font-size: 1.05rem !important;
  font-weight: 700;
  border-radius: 14px;
  overflow: hidden;
  flex: 0 0 64px;
}

[data-layout="portrait"] .entity-detail-avatar img,
[data-layout="landscape"] .entity-detail-avatar img,
[data-layout="square"] .entity-detail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-layout="portrait"] .entity-detail-header,
[data-layout="landscape"] .entity-detail-header,
[data-layout="square"] .entity-detail-header {
  padding: 8px 0 !important;
  margin: 0 !important;
  gap: 12px;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

[data-layout="portrait"] .entity-detail-title h2,
[data-layout="landscape"] .entity-detail-title h2,
[data-layout="square"] .entity-detail-title h2 {
  font-size: 1.25rem !important;
  margin: 0;
}

[data-layout="portrait"] .composer-card-switcher,
[data-layout="landscape"] .composer-card-switcher,
[data-layout="square"] .composer-card-switcher {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  gap: 16px;
  scrollbar-width: none;
}

[data-layout="portrait"] .entity-page-search,
[data-layout="landscape"] .entity-page-search,
[data-layout="square"] .entity-page-search {
  width: 44px;
  height: 44px;
  overflow: hidden;
  margin-left: auto;
}

[data-layout="portrait"] .entity-page-search:focus-within,
[data-layout="landscape"] .entity-page-search:focus-within,
[data-layout="square"] .entity-page-search:focus-within {
  width: 100%;
}

/* ---- album detail ---- */

[data-layout="portrait"] .detail-close,
[data-layout="landscape"] .detail-close,
[data-layout="square"] .detail-close {
  left: 8px !important;
  right: auto !important;
  top: 8px !important;
  width: 44px;
  height: 44px;
  font-size: 0 !important;
  /* The reference shows a bare chevron over the hero — no disc. */
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

[data-layout="portrait"] .detail-close::before,
[data-layout="landscape"] .detail-close::before,
[data-layout="square"] .detail-close::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  margin: 16px auto;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

[data-layout="portrait"] .detail-play-btn,
[data-layout="landscape"] .detail-play-btn,
[data-layout="square"] .detail-play-btn {
  min-height: 48px;
  border-radius: 999px;
  width: 100%;
}

[data-layout="portrait"] .detail-track-item,
[data-layout="landscape"] .detail-track-item,
[data-layout="square"] .detail-track-item {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) auto auto;
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 2px;
  align-items: center;
  padding: 8px 4px !important;
  width: 100%;
  box-sizing: border-box;
}

[data-layout="portrait"] .detail-track-num,
[data-layout="landscape"] .detail-track-num,
[data-layout="square"] .detail-track-num {
  grid-row: 1 / span 2;
  grid-column: 1;
}

[data-layout="portrait"] .detail-track-title,
[data-layout="landscape"] .detail-track-title,
[data-layout="square"] .detail-track-title {
  grid-column: 2;
  grid-row: 1;
  white-space: normal !important;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

[data-layout="portrait"] .detail-track-like,
[data-layout="landscape"] .detail-track-like,
[data-layout="square"] .detail-track-like {
  grid-column: 3;
  grid-row: 1;
  min-width: 44px;
  min-height: 44px;
}

[data-layout="portrait"] .detail-track-duration,
[data-layout="landscape"] .detail-track-duration,
[data-layout="square"] .detail-track-duration {
  grid-column: 4;
  grid-row: 1;
}

[data-layout="portrait"] .detail-track-item > .audio-badge,
[data-layout="landscape"] .detail-track-item > .audio-badge,
[data-layout="square"] .detail-track-item > .audio-badge {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
}

[data-layout="portrait"] .detail-rating,
[data-layout="landscape"] .detail-rating,
[data-layout="square"] .detail-rating {
  grid-column: 3 / span 2;
  grid-row: 2;
  justify-self: end;
}

/* ---- Now Playing holds the real queue ---- */

/* Now Playing screen: the page scrolls naturally so the queue continues
   below the player. The nav pill stays fixed at the bottom. */
[data-layout="portrait"].m-player-open .app,
[data-layout="landscape"].m-player-open .app,
[data-layout="square"].m-player-open .app {
  overflow-y: auto;
  overflow-x: hidden;
}

[data-layout="portrait"].m-player-open main,
[data-layout="landscape"].m-player-open main,
[data-layout="square"].m-player-open main {
  display: flex !important;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  flex-direction: column;
}

[data-layout="portrait"].m-player-open main > .header,
[data-layout="landscape"].m-player-open main > .header,
[data-layout="square"].m-player-open main > .header,
[data-layout="portrait"].m-player-open .view-section,
[data-layout="landscape"].m-player-open .view-section,
[data-layout="square"].m-player-open .view-section {
  display: none !important;
}

[data-layout="portrait"].m-player-open .view-section[data-view="queue-albums"],
[data-layout="landscape"].m-player-open .view-section[data-view="queue-albums"],
[data-layout="square"].m-player-open .view-section[data-view="queue-albums"] {
  display: flex !important;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

[data-layout="portrait"].m-player-open .player-bar {
  flex: 0 0 auto;
  height: 58vh;
  max-height: 58vh;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

[data-layout="landscape"].m-player-open .player-bar,
[data-layout="square"].m-player-open .player-bar {
  flex: 0 1 auto;
  max-height: 55vh;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

[data-layout="portrait"] .rpq-tabs,
[data-layout="landscape"] .rpq-tabs,
[data-layout="square"] .rpq-tabs {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
}

[data-layout="portrait"] .rpq-tab,
[data-layout="landscape"] .rpq-tab,
[data-layout="square"] .rpq-tab {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: transparent;
  min-height: 36px;
  padding: 0 16px;
}

[data-layout="portrait"] .rpq-tab.active,
[data-layout="landscape"] .rpq-tab.active,
[data-layout="square"] .rpq-tab.active,
[data-layout="portrait"] .rpq-tab[aria-selected="true"],
[data-layout="landscape"] .rpq-tab[aria-selected="true"],
[data-layout="square"] .rpq-tab[aria-selected="true"] {
  background: #e4572e;
  border-color: #e4572e;
  color: #fff;
}

.m-density {
  padding: 12px 16px 4px;
}

.m-density-label {
  font-size: 0.78rem;
  opacity: 0.7;
  margin-bottom: 6px;
}

.m-density-row {
  display: flex;
  gap: 8px;
}

.m-density-btn {
  min-width: 44px;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: transparent;
  color: inherit;
}

.m-density-btn.is-active {
  background: #e4572e;
  border-color: #e4572e;
  color: #fff;
}

html[data-layout="desktop"][data-web-grid="set"] .albums-grid {
  grid-template-columns: repeat(var(--web-desktop-cols), minmax(0, 1fr));
}

/* Landscape/square: the same full Now Playing + scrollable queue,
   but the shorter viewport means the artwork gets a smaller cap so the
   player and at least a few queue rows stay visible without excessive
   scroll. */
[data-layout="landscape"].m-player-open main,
[data-layout="square"].m-player-open main {
  display: flex !important;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* =====================================================================
   THIRD PASS — Now Playing is one page: player, then queue
   ---------------------------------------------------------------------
   The phone reference (Image 1) is a single vertical page:
     header → artwork → metadata → waveform+seek → transport
     → Albums|Songs|Works → IN QUEUE → rows
   with the nav pill fixed at the bottom and everything else flowing
   under it in ONE page scroll. The queue is a continuation BELOW the
   player, never a panel above it.

   Why the previous composition failed: the player was capped at 58vh
   with its own internal scroll, while the queue section lived in
   `main` ABOVE it (order 1 < 2) — so the screen opened on the queue,
   the player grid rows overflowed their capped box and painted over
   each other, and the transport ended up under the nav. This pass
   removes the cap (natural height), swaps the two flex orders, and
   lets .app own the single scroll.
   ===================================================================== */

/* ---- the page shell: one scroll, nav fixed ------------------------- */

[data-layout="portrait"].m-player-open .app,
[data-layout="landscape"].m-player-open .app,
[data-layout="square"].m-player-open .app {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

/* The player rides FIRST at natural height. No cap, no inner scroll:
   its grid/flex children lay out at content size on the page. */
[data-layout="portrait"].m-player-open .player-bar,
[data-layout="landscape"].m-player-open .player-bar,
[data-layout="square"].m-player-open .player-bar {
  order: 1 !important;
  flex: 0 0 auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* The queue follows the player. `main` also pays the nav's height so
   the last queue row scrolls clear of the fixed pill. */
[data-layout="portrait"].m-player-open main,
[data-layout="landscape"].m-player-open main,
[data-layout="square"].m-player-open main {
  order: 2 !important;
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding-bottom: calc(112px + var(--m-safe-b)) !important;
}

/* The queue section flows at natural height — no nested scrollbox. */
[data-layout="portrait"].m-player-open .view-section[data-view="queue-albums"],
[data-layout="landscape"].m-player-open .view-section[data-view="queue-albums"],
[data-layout="square"].m-player-open .view-section[data-view="queue-albums"] {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

/* ---- queue internals: tabs → IN QUEUE → rows ----------------------- */

.m-player-open .view-section[data-view="queue-albums"] .right-panel-queue {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 12px;
  border-top: none;
}

/* Reference order: the segmented control first, then the IN QUEUE row,
   then the list. Same nodes, flex order only. */
.m-player-open .view-section[data-view="queue-albums"] .rpq-tabs { order: 1; }
.m-player-open .view-section[data-view="queue-albums"] .np-queue-header { order: 2; }
.m-player-open .view-section[data-view="queue-albums"] .rpq-list {
  order: 3;
  max-height: none;
  overflow: visible;
}

/* Segmented control: one dark track, three equal segments, the active
   one a lighter pill. */
.m-player-open .view-section[data-view="queue-albums"] .rpq-tabs {
  gap: 4px;
  padding: 4px;
  margin: 4px 6px 0;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 12px;
}

.m-player-open .view-section[data-view="queue-albums"] .rpq-tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: 40px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--m-ink-dim);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.m-player-open .view-section[data-view="queue-albums"] .rpq-tab.active {
  background: rgba(255, 255, 255, 0.15);
  color: var(--m-ink);
}

/* IN QUEUE header: quiet uppercase label left, quiet text button right. */
.m-player-open .view-section[data-view="queue-albums"] .np-queue-header {
  padding: 6px 6px 0;
}

.m-player-open .view-section[data-view="queue-albums"] .queue-clear-btn {
  background: none;
  border: none;
  padding: 4px 10px;
  min-height: var(--m-tap);
  border-radius: 999px;
  color: var(--m-ink-dim);
  font-size: 0.84rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Queue rows: compact, transparent, hairline-separated. The remove
   button must be visible without hover (touch has no hover). */
.m-player-open .view-section[data-view="queue-albums"] .queue-song-item {
  background: none;
  border-radius: 10px;
  padding: 8px 10px;
  min-height: 60px;
  align-items: center;
}

.m-player-open .view-section[data-view="queue-albums"] .queue-song-item .qs-cover {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  margin-right: 12px;
}

.m-player-open .view-section[data-view="queue-albums"] .queue-song-item .qs-title {
  font-size: 0.9rem;
  line-height: 1.25;
}

.m-player-open .view-section[data-view="queue-albums"] .queue-song-item .qs-artist {
  font-size: 0.78rem;
}

.m-player-open .view-section[data-view="queue-albums"] .queue-song-item .qs-duration {
  font-size: 0.8rem;
  margin-right: 6px;
}

.m-player-open .view-section[data-view="queue-albums"] .queue-song-item .qs-remove {
  opacity: 0.65;
  font-size: 20px;
  padding: 10px 8px;
}

.m-player-open .view-section[data-view="queue-albums"] .empty-queue {
  padding: 28px 20px;
}

/* ---- portrait internals: the reference proportions ------------------ */

/* Flex column in DOM order (topbar, now-playing, controls, volume) —
   plain stacking with no grid row placement to fight. */
[data-layout="portrait"].m-player-open .player-bar {
  display: flex;
  flex-direction: column;
  padding-bottom: 6px;
}

/* Artwork: ~half the screen width, centred — the reference proportion. */
[data-layout="portrait"].m-player-open .np-cover {
  width: min(50vw, 40vh);
}

/* Metadata: plain centred text, no chips. */
[data-layout="portrait"].m-player-open .now-playing {
  gap: 12px;
  padding: 0 22px;
}

[data-layout="portrait"].m-player-open .np-info {
  align-items: center;
  text-align: center;
  gap: 3px;
}

[data-layout="portrait"].m-player-open .np-info h4 {
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.25;
}

[data-layout="portrait"].m-player-open .np-info p {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: 0.9rem;
}

[data-layout="portrait"].m-player-open .np-info .m-album {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: 0.78rem;
  opacity: 0.72;
}

/* Waveform + seek ABOVE the transport (reference order): the progress
   block is reordered inside the controls column. */
[data-layout="portrait"].m-player-open .player-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 22px 0;
}

[data-layout="portrait"].m-player-open .player-controls .progress-bar {
  order: -1;
}

[data-layout="portrait"].m-player-open .player-bar .m-wave-stack {
  height: 48px;
}

/* Times: plain text, no pill background. */
[data-layout="portrait"].m-player-open .time-current,
[data-layout="portrait"].m-player-open .time-total {
  background: none;
  padding: 0;
  font-size: 0.76rem;
}

/* Transport: reference proportions with the tap floor respected. */
[data-layout="portrait"].m-player-open .player-bar .ctrl-btn {
  width: 46px;
  height: 46px;
}

[data-layout="portrait"].m-player-open .player-bar .ctrl-btn.play-pause {
  width: 58px;
  height: 58px;
  min-width: 58px;
  min-height: 58px;
}

/* The reference page has no volume row and no format chip between the
   transport and the tabs. The controls still exist for desktop and for
   the other mobile compositions; here they are off the page. */
[data-layout="portrait"].m-player-open .volume-controls,
[data-layout="portrait"].m-player-open .m-format-chip {
  display: none;
}

/* Header: readable title, not a tiny uppercase stamp. */
[data-layout="portrait"].m-player-open .m-topbar-label {
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--m-ink);
}

/* The close control reads as "collapse the player" — a down chevron, the
   reference's affordance — rather than a mirrored right arrow. */
[data-layout="portrait"].m-player-open .m-topbar-btn[aria-label="Back to library"] .icon-svg,
[data-layout="landscape"].m-player-open .m-topbar-btn[aria-label="Back to library"] .icon-svg,
[data-layout="square"].m-player-open .m-topbar-btn[aria-label="Back to library"] .icon-svg {
  transform: rotate(90deg);
}

/* The like control hugs the ARTWORK's top-right corner. The cover is
   centred at min(50vw, 40vh), so its right edge sits (100% - W)/2 from
   the container edge; 8px inside that is on the sleeve. */
[data-layout="portrait"].m-player-open .np-like {
  top: 8px;
  right: calc((100% - min(50vw, 40vh)) / 2 + 8px);
}

/* ---- landscape/square artwork under natural height ------------------
   Their grid rows are content-sized now, so `height: 100%` on the
   artwork resolves against an indefinite row and collapses. Both get
   explicit viewport-based sizes instead. */
[data-layout="landscape"].m-player-open .player-bar .np-cover {
  width: min(30vw, 36vh);
  height: auto;
  max-height: none;
}

[data-layout="square"].m-player-open .player-bar .np-cover {
  width: min(24vw, 20vh);
}

/* ---- landscape: explicit 3-row grid ----------------------------------
   Four children share the two-column grid. The topbar auto-placed into
   row 1 / col 1 — the cell the cover's explicit `grid-row: 1 / 3`
   already owns — so auto-placement pushed the topbar into an implicit
   row BELOW the fold, behind the fixed nav. Every child now has an
   explicit cell: topbar spans the top, the artwork owns rows 2-3 of
   column 1, metadata and controls stack in column 2. */
[data-layout="landscape"].m-player-open .player-bar {
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  grid-template-rows: auto auto minmax(0, 1fr);
}

[data-layout="landscape"].m-player-open .player-bar .m-topbar {
  grid-column: 1 / -1;
  grid-row: 1;
}

[data-layout="landscape"].m-player-open .player-bar .np-cover {
  grid-column: 1;
  grid-row: 2 / 4;
}

[data-layout="landscape"].m-player-open .player-bar .np-info {
  grid-column: 2;
  grid-row: 2;
}

[data-layout="landscape"].m-player-open .player-bar .np-like {
  grid-column: 2;
  grid-row: 2;
}

[data-layout="landscape"].m-player-open .player-bar .player-controls {
  grid-column: 2;
  grid-row: 3;
}

/* A short wide band cannot pay for two-line chips — and it does not need
   them: the artwork sits BESIDE the text here, not behind it, so the
   legibility chips buy nothing. Plain left-aligned text, one line each. */
[data-layout="landscape"].m-player-open .np-info {
  align-items: flex-start;
  gap: 4px;
  padding: 0 46px 0 0; /* keep text clear of the floating like control */
}

[data-layout="landscape"].m-player-open .np-info h4,
[data-layout="landscape"].m-player-open .np-info p,
[data-layout="landscape"].m-player-open .np-info .m-album {
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  white-space: nowrap;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-layout="landscape"].m-player-open .np-info h4 {
  font-size: 1.02rem;
  font-weight: 700;
}

[data-layout="landscape"].m-player-open .np-info p {
  font-size: 0.86rem;
}

[data-layout="landscape"].m-player-open .np-info .m-album {
  font-size: 0.76rem;
  opacity: 0.75;
}

[data-layout="landscape"].m-player-open .player-bar .m-wave-stack {
  height: 32px;
}

[data-layout="landscape"].m-player-open .player-bar .ctrl-btn {
  width: 46px;
  height: 46px;
}

[data-layout="landscape"].m-player-open .player-bar .ctrl-btn.play-pause {
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
}

/* =====================================================================
   FOURTH PASS — album detail as the reference hero page
   ---------------------------------------------------------------------
   The reference opens an album on a full-bleed artwork hero that fades
   into the page, with the metadata overlaid on the fade, then the
   action row, the Grouped/Flat toggle, the filter field and a flat
   track list. Portrait only; landscape/square keep their sheet
   compositions.
   ===================================================================== */

/* Full-bleed page: the panel gives up its frame padding so the hero
   reaches the screen edge; every following block carries its own side
   padding. */
[data-layout="portrait"] .album-detail-panel.open {
  padding: 0 !important;
}

[data-layout="portrait"] .album-detail-panel.open .detail-panel-content {
  padding: 0;
}

[data-layout="portrait"] .detail-header {
  padding: 0;
}

/* The cover becomes the hero: full width, over half the viewport tall,
   square corners. The fade is painted on the cover itself so it can
   never drift out from under the artwork. */
[data-layout="portrait"] .detail-cover {
  width: 100%;
  height: 56vh;
  max-height: 64vh;
  aspect-ratio: auto;
  border-radius: 0;
  position: relative;
}

[data-layout="portrait"] .detail-cover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46%;
  background: linear-gradient(
    180deg,
    rgba(11, 11, 13, 0) 0%,
    rgba(11, 11, 13, 0.72) 55%,
    #0b0b0d 96%
  );
  pointer-events: none;
}

/* The quality badge lives on the fade, just above the overlaid title —
   NOT top-left, where it collided with the floating back button. The
   !important matches the legacy top-left placement rule it overrides. */
[data-layout="portrait"] .album-quality-badge {
  top: auto !important;
  right: auto !important;
  bottom: 112px !important;
  left: 20px !important;
}

/* The text block rides up over the fade. The rows keep their flow
   order — one negative margin lifts the title onto the artwork; the
   rest follow in normal flow, so long titles can never collide. */
[data-layout="portrait"] .detail-title {
  margin: -104px 0 0;
  padding: 0 20px;
  position: relative;
  z-index: 2;
  font-size: 1.42rem;
  line-height: 1.2;
  font-weight: 700;
}

[data-layout="portrait"] .detail-artist {
  margin: 4px 0 0;
  padding: 0 20px;
  position: relative;
  z-index: 2;
  font-size: 0.98rem;
  color: var(--m-ink-dim, rgba(235, 235, 245, 0.72));
}

/* The metadata chips become the reference's single muted fact line:
   labels hidden, values inline. */
[data-layout="portrait"] .detail-meta-items,
[data-layout="portrait"] .detail-meta {
  position: relative;
  z-index: 2;
  padding: 0 20px;
  margin: 3px 0 0;
  font-size: 0.78rem;
  color: var(--m-ink-dim, rgba(235, 235, 245, 0.6));
}

[data-layout="portrait"] .detail-meta-items {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

[data-layout="portrait"] .detail-meta-items .meta-item {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.78rem;
}

[data-layout="portrait"] .detail-meta-items .meta-item strong {
  display: none;
}

[data-layout="portrait"] .detail-meta-items .meta-chip-link {
  color: inherit;
  text-decoration: none;
}

/* Actions: the same row, breathing under the hero. */
[data-layout="portrait"] .detail-actions {
  margin: 16px 20px 4px;
  gap: 10px;
}

/* Grouped / Flat: a wide segmented control (shows only for albums with
   work tags — visibility stays data-driven). */
[data-layout="portrait"] .detail-view-toggle {
  margin: 10px 20px 6px;
  padding: 3px;
  gap: 3px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
}

[data-layout="portrait"] .detail-view-toggle-btn {
  min-height: 40px;
  border-radius: 9px;
  border-left: none !important;
  font-size: 0.88rem;
}

[data-layout="portrait"] .detail-view-toggle-btn.active {
  background: rgba(255, 255, 255, 0.14);
  color: var(--m-ink, #fff);
}

/* Filter field: compact rounded bar. */
[data-layout="portrait"] .detail-search {
  margin: 4px 20px 6px;
}

[data-layout="portrait"] .detail-search-input {
  min-height: 42px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

/* Work headers: compact accent label over a hairline. No text-transform:
   the header text is data (tests and other code read it back), casing
   stays whatever the renderer emitted. */
[data-layout="portrait"] .detail-work-header {
  padding: 12px 20px 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent-primary, #ff8a3c);
}

/* Track rows: a flat list with hairline dividers — no cards. The
   existing grid placement (num / title / like / duration, badge under
   the title) is kept; only the skin changes. */
[data-layout="portrait"] .detail-track-list {
  padding: 0 0 calc(var(--m-safe-b) + 24px);
}

[data-layout="portrait"] .detail-track-item {
  background: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding: 10px 20px !important;
  min-height: 64px;
}

[data-layout="portrait"] .detail-track-title {
  font-size: 0.92rem;
  font-weight: 600;
}

/* Stars, heart and duration share the title line (reference layout);
   the format badge keeps row two. Five columns: num, title, stars,
   heart, time. */
[data-layout="portrait"] .detail-track-item {
  grid-template-columns: 28px minmax(0, 1fr) auto auto auto !important;
}

[data-layout="portrait"] .detail-rating {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  opacity: 0.55;
}

[data-layout="portrait"] .detail-rating .detail-rating-star {
  font-size: 0.72rem;
}

[data-layout="portrait"] .detail-track-like {
  grid-column: 4;
  grid-row: 1;
  min-width: 40px;
  min-height: 40px;
}

[data-layout="portrait"] .detail-track-duration {
  grid-column: 5;
  grid-row: 1;
}

/* =====================================================================
   FIFTH PASS — entity pages + shared rhythm
   ===================================================================== */

/* One page rhythm on the phone: the desktop section padding (20px 30px)
   eats a 390pt screen. 16px side margins match the reference and the
   album grid. */
[data-layout="portrait"] main .view-section,
[data-layout="landscape"] main .view-section,
[data-layout="square"] main .view-section {
  padding: 12px 16px 28px;
}

/* Drill breadcrumb: quiet metadata, not a framed box. */
[data-layout="portrait"] .entity-detail .entity-nav-bar,
[data-layout="landscape"] .entity-detail .entity-nav-bar,
[data-layout="square"] .entity-detail .entity-nav-bar {
  background: none;
  border: none;
  border-radius: 0;
  padding: 2px 0 0;
  min-height: 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--m-ink-dim, rgba(235, 235, 245, 0.6));
}

/* The drill search is a real field, not a 44px mystery circle — the
   collapsed icon both overflowed the viewport and hid the affordance. */
[data-layout="portrait"] .entity-page-search,
[data-layout="landscape"] .entity-page-search,
[data-layout="square"] .entity-page-search {
  width: 100%;
  height: auto;
  overflow: visible;
  margin: 10px 0 0;
  padding: 0;
}

[data-layout="portrait"] .entity-page-search .eps-wrap,
[data-layout="landscape"] .entity-page-search .eps-wrap,
[data-layout="square"] .entity-page-search .eps-wrap {
  flex: 1 1 auto;
  max-width: none;
}

[data-layout="portrait"] .entity-page-search .entity-page-search-input,
[data-layout="landscape"] .entity-page-search .entity-page-search-input,
[data-layout="square"] .entity-page-search .entity-page-search-input {
  display: block;
  min-height: 42px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

/* Mode tabs: real tap targets (the 30px buttons were below the floor). */
[data-layout="portrait"] .entity-detail-switcher,
[data-layout="landscape"] .entity-detail-switcher,
[data-layout="square"] .entity-detail-switcher {
  gap: 8px;
  margin-top: 12px;
}

[data-layout="portrait"] .entity-detail-switcher .ccsw-btn,
[data-layout="landscape"] .entity-detail-switcher .ccsw-btn,
[data-layout="square"] .entity-detail-switcher .ccsw-btn {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 0.85rem;
}

/* The library sort pill: compact on the phone (the select keeps its
   native picker, so the pill itself is the tap target). */
[data-layout="portrait"] .library-sort-pill,
[data-layout="landscape"] .library-sort-pill,
[data-layout="square"] .library-sort-pill {
  min-height: 40px;
  padding: 3px 4px 3px 10px;
  font-size: 12px;
  border-radius: 10px;
}

[data-layout="portrait"] .library-sort-select,
[data-layout="landscape"] .library-sort-select,
[data-layout="square"] .library-sort-select {
  font-size: 12px;
}

/* Works / songs rows inside the entity body: dense list style —
   small artwork, two text lines, trailing count, hairline dividers. */
[data-layout="portrait"] .entity-detail-body .composer-card-works > div,
[data-layout="landscape"] .entity-detail-body .composer-card-works > div,
[data-layout="square"] .entity-detail-body .composer-card-works > div {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: none;
}

[data-layout="portrait"] .entity-detail-body .work-person-grid,
[data-layout="landscape"] .entity-detail-body .work-person-grid,
[data-layout="square"] .entity-detail-body .work-person-grid {
  gap: 10px;
}

/* ---- header de-duplication ------------------------------------------
   The compact mobile header pill already names the view; the albums
   section repeating "All Albums" beneath it reads as a mistake. The
   count and the sort control stay — they carry real information. */
[data-layout="portrait"] .albums-view-header h2,
[data-layout="landscape"] .albums-view-header h2,
[data-layout="square"] .albums-view-header h2 {
  display: none;
}

[data-layout="portrait"] .albums-view-header,
[data-layout="landscape"] .albums-view-header,
[data-layout="square"] .albums-view-header {
  align-items: center;
  margin-bottom: 12px;
}

/* The search row's Clear affordance is noise while the field is empty:
   placeholder-shown only matches an empty value, so it appears the
   moment there is something to clear. */
#global-search-input:placeholder-shown ~ .m-search-clear {
  display: none;
}

/* =====================================================================
   SIXTH PASS — the header follows the phone reference
   ---------------------------------------------------------------------
   Reference: a plain bold title (no pill, no border), a bare menu
   glyph, and the view's sort control sharing the search row. The
   accent stays with the controls that own it — the title itself is
   plain white like the mockups.
   ===================================================================== */

/* The desktop pill (bg-card + 25px radius + gradient text) reads as a
   button; the reference title is a heading. */
[data-layout="portrait"] .current-view-label,
[data-layout="landscape"] .current-view-label,
[data-layout="square"] .current-view-label {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}

[data-layout="portrait"] #view-label,
[data-layout="landscape"] #view-label,
[data-layout="square"] #view-label {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--m-ink);
  font-size: 1.3rem;
  font-weight: 700;
}

/* The relocated sort control sits in the header grid's sort column —
   a compact chip beside the search field, as in the reference. */
[data-layout="portrait"] main .header .library-sort-pill,
[data-layout="landscape"] main .header .library-sort-pill,
[data-layout="square"] main .header .library-sort-pill {
  grid-area: sort;
  position: static;
  z-index: auto;
  display: inline-flex;
  justify-content: flex-end;
  margin: 0;
  max-width: 152px;
  min-height: 40px;
  border-radius: 12px;
  padding: 4px 4px 4px 10px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 13px;
}

[data-layout="portrait"] main .header .library-sort-pill .library-sort-select,
[data-layout="landscape"] main .header .library-sort-pill .library-sort-select,
[data-layout="square"] main .header .library-sort-pill .library-sort-select {
  max-width: 100%;
  font-size: 13px;
}

/* The chip is too narrow for "Sort" + the mode name; the select alone
   reads as the sort control, so the label stays out of the header. */
[data-layout="portrait"] main .header .library-sort-pill .library-sort-label,
[data-layout="landscape"] main .header .library-sort-pill .library-sort-label,
[data-layout="square"] main .header .library-sort-pill .library-sort-label {
  display: none;
}


/* =====================================================================
   SEVENTH PASS — amber, PowerAmp-like phone layout (2026-10 mockups)
   ---------------------------------------------------------------------
   One accent (#F5B83D amber), near-black page (#0b0b0f), cards #15151b,
   hairline dividers. Few pills: section switches are plain text tabs with
   an amber underline. Everything here is scoped to the phone layouts
   (portrait / landscape / square); `html:is(...)` keeps the scope in one
   place and out-ranks the earlier passes' single attribute selectors.
   The desktop layout (Tauri + web desktop) is untouched.
   ===================================================================== */

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) {
  /* Retain the existing mobile tokens but source them from the user's
     selected accent rather than overriding it with a fixed yellow. */
  --m-amber: var(--accent-primary, #F5B83D);
  --m-amber-rgb: var(--accent-primary-rgb, 245, 184, 61);
  --m-amber-ink: var(--text-on-accent, #17120a);
  --m-bg: #0b0b0f;
  --m-card: #15151b;
  --m-card-2: #1b1b22;
  --m-divider: rgba(255, 255, 255, 0.07);
  --m-dim: rgba(235, 235, 245, 0.62);
  --m-accent: var(--m-amber);
  /* IMPORTANT: no --accent-primary !important override here. It defeats
     both the theme and the user-selected mobile accent colour. */
}

/* Dark surfaces for the dark themes only; light/sepia keep their palette. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]):not([data-theme="light"]):not([data-theme="sepia"]) {
  --surface-app: #0b0b0f;
  --surface-card: #15151b;
  --surface-sidebar: #0f0f14;
  --surface-player: #0b0b0f;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]):not([data-theme="light"]):not([data-theme="sepia"]) body,
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]):not([data-theme="light"]):not([data-theme="sepia"]) main {
  background: var(--m-bg);
}

/* Browse screens are flat (the blurred-artwork ambience stays for Now
   Playing, where the artwork is the subject). */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]):not(.m-player-open) body::before {
  opacity: 0 !important;
}

/* Leftover hard-coded oranges from earlier passes. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-density-btn.is-active {
  background: var(--m-amber);
  border-color: var(--m-amber);
  color: var(--m-amber-ink);
}

/* ---- header: big title left, bare menu glyph right, then search | sort -- */

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) main .header {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  grid-template-areas:
    "back title menu"
    "search search sort" !important;
  column-gap: 10px !important;
  row-gap: 8px !important;
  padding: 10px 16px 8px !important;
  background: var(--m-bg) !important;
  border-bottom: none !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .current-view-label {
  grid-area: title;
  min-width: 0;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) #view-label {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-menu-btn {
  grid-area: menu;
  justify-self: end;
  margin-right: -10px;
  color: var(--m-ink);
}

.m-back-btn { display: none; }

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) main .header .search-bar {
  height: 44px !important;
  border-radius: 10px !important;
  background: var(--m-card) !important;
  border: 1px solid var(--m-divider) !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) main .header .library-sort-pill {
  min-width: 132px;
  max-width: 160px;
  height: 44px;
  min-height: 44px;
  border-radius: 10px;
  background: var(--m-card);
  border: 1px solid var(--m-divider);
  padding: 0 6px 0 12px;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) main .header .library-sort-pill .library-sort-select {
  font-size: 14px;
  color: var(--m-ink);
  background-color: transparent;
}

/* Entity drill pages: "‹ By Composer ≡"; the page has its own search. */
html.m-entity-open:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-back-btn {
  grid-area: back;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 44px;
  margin-left: -10px;
  border: none;
  background: none;
  color: var(--m-ink);
}

html.m-entity-open:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) main .header .search-bar,
html.m-entity-open:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) main .header .library-sort-pill {
  display: none !important;
}

html.m-entity-open:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) #view-label {
  font-size: 1.12rem;
  font-weight: 600;
}

/* ---- album grid: edge-aligned 2-up covers, info over a dark gradient ---- */

/* The count line ("21 albums") is not part of the reference header. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) #albums-view-count {
  display: none;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .albums-view-header:not(:has(> :not(h2):not(#albums-view-count))) {
  display: none;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) main .view-section {
  padding: 4px 16px 28px;
}

html:is([data-layout="portrait"], [data-layout="square"]) .albums-grid {
  gap: 12px !important;
  padding: 4px 0 24px !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-card {
  border-radius: 8px !important;
  background: var(--m-card) !important;
  overflow: hidden;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-card .album-cover {
  border-radius: 8px;
  overflow: hidden;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-card .album-info {
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: auto !important;
  min-height: 0 !important;
  padding: 34px 10px 9px !important;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.62) 42%, rgba(0, 0, 0, 0.9) 100%) !important;
  border-radius: 0 0 8px 8px;
  pointer-events: none;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-card .album-info h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-card .album-info p {
  margin: 2px 0 0;
  font-size: 0.78rem;
  line-height: 1.25;
  color: rgba(235, 235, 245, 0.66);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Format badge pinned top-left of the cover: "FLAC" filled + "16/44.1". */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-card .album-quality-badge {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  z-index: 2;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-card .audio-badge {
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  font-size: 11px;
  font-weight: 700;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-card .audio-badge-lossless .ab-format,
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-card .audio-badge-hires .ab-format {
  background: #1f9d4a;
  color: #fff;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-card .audio-badge-lossless .ab-quality,
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-card .audio-badge-hires .ab-quality {
  background: rgba(10, 40, 20, 0.82);
  color: #7ee2a0;
}

/* ---- bottom navigation: icon over label, amber active + soft highlight --- */

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-tabbar {
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  margin: 0 !important;
  border-radius: 0 !important;
  padding: 6px 10px calc(6px + var(--m-safe-b)) !important;
  background: rgba(13, 13, 18, 0.97) !important;
  border: none !important;
  border-top: 1px solid var(--m-divider) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-tab {
  position: relative;
  color: rgba(235, 235, 245, 0.6) !important;
  background: none !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-tab-label {
  font-size: 11.5px !important;
  font-weight: 500;
  letter-spacing: 0.01em;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-tab.is-active {
  color: var(--m-amber) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-tab.is-active::after {
  content: "";
  position: absolute;
  left: 28%;
  right: 28%;
  bottom: -6px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--m-amber);
}

/* ---- entity page: portrait hero, text tabs, list rows ------------------- */

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-detail .entity-nav-bar {
  display: none !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-detail-header {
  display: grid !important;
  grid-template-columns: 128px minmax(0, 1fr);
  align-items: start;
  gap: 14px !important;
  padding: 6px 0 4px !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-detail-avatar {
  width: 128px !important;
  height: 128px !important;
  min-width: 0 !important;
  border-radius: 8px !important;
  overflow: hidden;
  font-size: 2.4rem !important;
  box-shadow: none !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-detail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-detail-title {
  min-width: 0;
  padding-top: 6px;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-detail-title h2 {
  margin: 0 !important;
  font-size: 1.65rem !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  overflow-wrap: anywhere;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-detail-title p {
  margin: 6px 0 0 !important;
  font-size: 0.9rem !important;
  color: var(--m-dim) !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-detail-title .edt-role {
  display: none;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-detail-title p.entity-detail-desc {
  margin-top: 8px !important;
  font-size: 0.85rem !important;
  line-height: 1.4;
  color: rgba(235, 235, 245, 0.72) !important;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Text tabs with an amber underline (Works | Albums | Songs | Playlists). */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-detail-switcher {
  display: flex !important;
  gap: 0 !important;
  margin: 14px -16px 0 !important;
  padding: 0 4px !important;
  background: none !important;
  border: none !important;
  border-bottom: 1px solid var(--m-divider) !important;
  border-radius: 0 !important;
  overflow-x: auto;
  scrollbar-width: none;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-detail-switcher .ccsw-btn {
  flex: 1 0 auto;
  position: relative;
  min-height: 46px !important;
  padding: 0 12px !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: rgba(235, 235, 245, 0.66) !important;
  font-size: 0.98rem !important;
  font-weight: 500 !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-detail-switcher .ccsw-btn.active {
  color: var(--m-amber) !important;
  font-weight: 700 !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-detail-switcher .ccsw-btn.active::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--m-amber);
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-page-search {
  margin: 12px 0 6px !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-page-search .entity-page-search-input {
  min-height: 42px;
  border-radius: 10px !important;
  background: var(--m-card) !important;
  border: 1px solid var(--m-divider) !important;
}

/* Works: one list row per work — thumb, bold title, grey stats, chevron. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-detail-body .cwr-hint {
  display: none;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-detail-body .cwr-toolbar {
  justify-content: flex-end;
  padding: 0;
  min-height: 0;
  margin: 0 0 2px;
  background: none;
  border: none;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-detail-body .cwr-collapse-all {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(var(--m-amber-rgb), 0.7);
  background: none;
  color: var(--m-amber);
  font-weight: 600;
  font-size: 0.82rem;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-detail-body .composer-card-works,
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-detail-body .cwr-col {
  display: block !important;
  gap: 0 !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-detail-body .composer-work-row {
  display: block !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--m-divider) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-detail-body .cwr-head {
  display: flex !important;
  align-items: center;
  gap: 14px;
  min-height: 84px;
  padding: 8px 0 !important;
  background: none !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-detail-body .cwr-thumb {
  display: block;
  flex: 0 0 68px;
  width: 68px;
  height: 68px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--m-card);
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-detail-body .cwr-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-detail-body .cwr-head-text {
  flex: 1 1 auto;
  min-width: 0;
  order: 1;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-detail-body .cwr-title {
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-detail-body .cwr-meta {
  margin-top: 4px;
  font-size: 0.82rem !important;
  color: var(--m-dim) !important;
}

/* The expand chevron moves to the row end and reads as the reference's ">"
   (pointing down while the movements are shown). */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-detail-body .cwr-chevron,
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-detail-body .cwr-chevron-placeholder {
  order: 2;
  flex: 0 0 36px;
  width: 36px;
  height: 44px;
  font-size: 1.1rem;
  color: rgba(235, 235, 245, 0.55);
  background: none;
  border: none;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-detail-body .cwr-body {
  padding: 0 0 10px 82px !important;
  background: none !important;
  border: none !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-detail-body .cwr-movement-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  align-items: center;
  padding: 0 !important;
  border-top: 1px solid var(--m-divider);
  background: none !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-detail-body .cwr-movement-title {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.86);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-detail-body .cwr-movement-meta {
  font-size: 0.75rem;
  color: var(--m-dim);
  white-space: nowrap;
}

/* Entity album tabs reuse the album grid look. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-detail-body .albums-grid {
  padding: 6px 0 24px !important;
}

/* ---- album detail ------------------------------------------------------ */

/* Now Playing owns the screen: the album sheet waits underneath (closing
   the player shows it again) instead of covering the player. */
html.m-player-open:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel {
  display: none !important;
}

html.m-player-open:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) main .header {
  display: none !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]):not([data-theme="light"]):not([data-theme="sepia"]) .album-detail-panel,
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]):not([data-theme="light"]):not([data-theme="sepia"]) .album-detail-panel .detail-panel-content {
  background: var(--m-bg) !important;
}

/* Full-width square hero that fades into the page. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-header {
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-cover {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
  background: var(--m-card);
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 0 !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(11, 11, 15, 0.45) 0%, rgba(11, 11, 15, 0) 18%),
    linear-gradient(to bottom, rgba(11, 11, 15, 0) 55%, rgba(11, 11, 15, 0.75) 82%, var(--m-bg, #0b0b0f) 100%);
}

/* Back arrow + kebab over the hero. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-close,
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-more-btn {
  position: absolute !important;
  top: calc(6px + var(--m-safe-t)) !important;
  z-index: 5 !important;
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: none !important;
  border-radius: 999px !important;
  background: none !important;
  color: #fff !important;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-close { left: 6px !important; right: auto !important; }
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-more-btn { right: 6px !important; left: auto !important; }

/* Amber outlined format badge on the hero's lower edge: "FLAC | 24/96". */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-quality-badge {
  position: absolute !important;
  left: 18px !important;
  bottom: 10px !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  z-index: 2;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-quality-badge .audio-badge {
  border: 1.5px solid var(--m-amber) !important;
  border-radius: 6px !important;
  background: rgba(11, 11, 15, 0.55) !important;
  box-shadow: none !important;
  overflow: hidden;
  font-size: 13px;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-quality-badge .ab-format {
  background: var(--m-amber) !important;
  color: var(--m-amber-ink) !important;
  font-weight: 800;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-quality-badge .ab-quality {
  background: transparent !important;
  color: var(--m-amber) !important;
  font-weight: 700;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-title {
  margin: 4px 18px 0 !important;
  padding: 0 !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: #fff !important;
  text-align: left !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-artist {
  margin: 4px 18px 0 !important;
  font-size: 1.05rem !important;
  color: var(--m-dim) !important;
  text-align: left !important;
}

/* Meta: one quiet line of names (roles hidden, repeats removed). */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-meta-items {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start !important;
  gap: 2px 14px !important;
  margin: 8px 18px 0 !important;
  padding: 0 !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-meta-items .meta-item {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: none !important;
  font-size: 0.88rem !important;
  color: rgba(255, 255, 255, 0.86) !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-meta-items .meta-item.m-meta-dup {
  display: none !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-meta-items .meta-chip-link {
  color: inherit !important;
  background: none !important;
  padding: 0 !important;
  border: none !important;
  text-decoration: none;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-meta {
  margin: 6px 18px 0 !important;
  font-size: 0.88rem !important;
  color: var(--m-dim) !important;
  text-align: left !important;
}

/* Actions: big amber Play + three square outlined amber icon buttons. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-actions {
  display: flex !important;
  align-items: stretch;
  gap: 10px !important;
  margin: 16px 18px 0 !important;
  padding: 0 !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-play-btn {
  flex: 1 1 auto;
  min-height: 48px !important;
  height: 48px;
  border: none !important;
  border-radius: 10px !important;
  background: var(--m-amber) !important;
  color: var(--m-amber-ink) !important;
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-play-btn svg {
  fill: currentColor;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-booklet-btn,
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-addplaylist-btn {
  display: none !important;     /* both live in the hero kebab */
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-iconbtn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 10px !important;
  border: 1.5px solid var(--m-amber) !important;
  background: transparent !important;
  color: var(--m-amber) !important;
  box-shadow: none !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-iconbtn.liked svg {
  fill: currentColor;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-addplaylist-btn.detail-iconbtn {
  display: none !important;
}

/* Grouped | Flat segmented control. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-view-toggle {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  width: auto !important;
  margin: 16px 18px 0 !important;
  padding: 4px !important;
  border-radius: 10px !important;
  border: 1px solid var(--m-divider) !important;
  background: var(--m-card) !important;
  box-sizing: border-box;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-view-toggle-btn {
  width: auto !important;
  min-height: 38px !important;
  border: none !important;
  border-radius: 8px !important;
  background: none !important;
  color: rgba(235, 235, 245, 0.55) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-view-toggle-btn.active {
  background: rgba(var(--m-amber-rgb), 0.2) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(var(--m-amber-rgb), 0.35) !important;
}

/* Filter field + separate outlined "Expand all". */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-search {
  display: flex !important;
  align-items: center;
  gap: 10px !important;
  margin: 12px 18px 6px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  position: relative;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-search-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  color: var(--m-dim);
  pointer-events: none;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 12px 0 38px !important;
  border-radius: 10px !important;
  border: 1px solid var(--m-divider) !important;
  background: var(--m-card) !important;
  color: #fff !important;
  font-size: 0.95rem !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-collapse-all {
  flex: 0 0 auto;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  border: 1.5px solid var(--m-amber) !important;
  background: none !important;
  color: var(--m-amber) !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-collapse-all[hidden] {
  display: none !important;
}

/* Grouped list: COMPOSER (amber caps) > WORK > numbered movements. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-track-list {
  padding: 0 18px 120px !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-work-header {
  display: grid !important;
  grid-template-columns: 26px minmax(0, 1fr);
  grid-template-areas: "chev label" "chev title";
  align-items: center;
  column-gap: 6px;
  padding: 10px 0 !important;
  margin: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--m-divider) !important;
  background: none !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-work-header--nochip {
  grid-template-areas: "chev title";
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-work-header--tier-1 {
  padding-left: 18px !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-work-chevron {
  grid-area: chev;
  width: 26px !important;
  height: 26px !important;
  border: none !important;
  background: none !important;
  color: var(--m-amber) !important;
  font-size: 0.8rem !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-work-label {
  grid-area: label;
  color: var(--m-amber) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-work-header--tier-1 .detail-work-label {
  color: rgba(235, 235, 245, 0.55) !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-work-title {
  grid-area: title;
  min-width: 0;
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.3;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-work-header--tier-1 .detail-work-title {
  font-size: 0.93rem !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-work-meta {
  color: var(--m-dim) !important;
  font-weight: 400 !important;
  font-size: 0.82rem !important;
  margin-left: 6px;
}

/* Track rows: number, title, right-aligned duration — nothing else on the
   phone (rating/like/format stay available from the row's menu). */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-track-item {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) auto !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  column-gap: 10px !important;
  min-height: 44px !important;
  padding: 8px 0 !important;
  margin: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--m-divider) !important;
  border-radius: 0 !important;
  background: none !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-track-num {
  grid-column: 1 !important;
  grid-row: 1 !important;
  color: rgba(235, 235, 245, 0.5) !important;
  font-size: 0.85rem !important;
  text-align: left !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-track-title {
  grid-column: 2 !important;
  grid-row: 1 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 0.95rem !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-track-duration {
  grid-column: 3 !important;
  grid-row: 1 !important;
  color: rgba(235, 235, 245, 0.55) !important;
  font-size: 0.85rem !important;
  font-variant-numeric: tabular-nums;
  text-align: right !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-track-item .audio-badge,
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-track-item .detail-rating,
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-track-item .detail-track-like {
  display: none !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-track-item.playing .detail-track-title,
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-track-item.playing .detail-track-num {
  color: var(--m-amber) !important;
}

/* Flat view: a clean numbered list — no composer/disc headers. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-track-list[data-view="flat"] .detail-work-header,
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-track-list[data-view="flat"] .detail-disc-header {
  display: none !important;
}

/* ---- Now Playing: artwork always square and never cropped -------------- */

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .np-cover {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  border-radius: 12px !important;
  overflow: hidden;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .np-cover img,
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .np-cover .cover-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}

html[data-layout="portrait"] .player-bar .np-cover {
  width: min(calc(100vw - 48px), 44vh) !important;
}

@media (max-height: 760px) {
  html[data-layout="portrait"] .player-bar .np-cover { width: min(calc(100vw - 48px), 34vh) !important; }
}

/* Sub-sections (Albums | Songs | Works in the queue) as text tabs. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .rpq-tabs {
  gap: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--m-divider);
  background: none !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .rpq-tab {
  flex: 1 1 0;
  position: relative;
  min-height: 44px !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  color: rgba(235, 235, 245, 0.62) !important;
  font-weight: 500;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) :is(.rpq-tab.active, .rpq-tab[aria-selected="true"]) {
  background: none !important;
  color: var(--m-amber) !important;
  font-weight: 700;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) :is(.rpq-tab.active, .rpq-tab[aria-selected="true"])::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--m-amber);
}

/* Album detail kebab menu on the phone: amber hover, dark card. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .detail-more-menu {
  background: var(--m-card-2);
  border-color: var(--m-divider);
}

/* ---- seventh pass, fixes found in the 412x915 render ------------------- */

/* Bottom nav spans the full width; no leftover sidebar band beneath it. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .sidebar {
  padding: 0 !important;
  background: rgba(13, 13, 18, 0.97) !important;
  border-top: 1px solid var(--m-divider) !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .sidebar .nav {
  width: 100% !important;
  margin: 0 !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-tabbar {
  flex: 1 1 auto;
  border-top: none !important;
  background: transparent !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel :is(.detail-artist, .detail-meta, .detail-title) {
  padding: 0 !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-cover::after {
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-work-title {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  direction: ltr !important;
}

/* Queue under Now Playing: the column needs the full width for its tabs. */
html.m-player-open:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .view-section[data-view="queue-albums"] :is(.queue-now-playing-col, .right-panel-queue) {
  width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  box-sizing: border-box;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .rpq-tabs {
  width: 100% !important;
  margin: 4px 0 0 !important;
}

/* Now Playing header: bare glyphs, no pills. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-topbar :is(.m-topbar-btn, .m-info-btn, .m-booklet-btn) {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-topbar {
  width: 100% !important;
  justify-content: space-between !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html.m-player-open:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) main,
html.m-player-open:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .view-section[data-view="queue-albums"],
html.m-player-open:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .view-section[data-view="queue-albums"] .queue-now-playing {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box;
}

/* =====================================================================
   EIGHTH PASS — phase B fixes (mobile web only)
   ===================================================================== */

/* 14. Sort: in-theme button + anchored popover; the native select stays as
   the (hidden) source of truth. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) main .header .library-sort-pill .library-sort-select,
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) main .header .library-sort-pill .library-sort-label {
  display: none !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-sort-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 38px;
  min-width: 132px;
  max-width: 46vw;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--m-divider);
  background: var(--m-card);
  color: #fff;
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-sort-btn-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-sort-btn svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--m-dim);
}

.m-sort-pop {
  position: fixed;
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #1b1b22;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}

.m-sort-opt {
  display: block;
  width: 100%;
  padding: 12px 12px;
  border: none;
  border-radius: 8px;
  background: none;
  color: rgba(235, 235, 245, 0.85);
  font: inherit;
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
}

.m-sort-opt.is-active {
  color: var(--m-amber);
  font-weight: 600;
}

.m-sort-opt:active {
  background: rgba(255, 255, 255, 0.06);
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) main .header .library-sort-pill.m-header-sort {
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  min-width: 0 !important;
}

/* 19. Scroll performance. Every surface below is already (near-)opaque, so
   the backdrop blur was invisible — but each one made the compositor
   re-blur the scrolling grid under it on every frame (header and bottom
   bar are always on screen). Solid fills look the same and cost nothing. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .sidebar,
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) main .header,
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel,
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .music-panel,
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-sheet {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .sidebar {
  background: #0d0d12 !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .music-panel {
  background: #0b0b0d !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-sheet {
  background: #121216 !important;
}

/* Per-card quality badges: a shadow on ~1500 tiles is 1500 extra blur
   passes per raster; the badge already has a solid fill. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-card .audio-badge {
  box-shadow: none !important;
}

/* 9. Mini player, in the app's theme: a dark card with the cover, title /
   artist, and prev | play-pause | next. Play/pause is the amber disc; the
   progress hairline runs along the bottom edge. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-miniplayer {
  gap: 10px;
  padding: 8px 8px 8px 8px;
  border-radius: 14px;
  background: #15151b !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-mini-art {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background-color: #1f1f27;
  background-position: center;
  background-size: cover;
  box-shadow: none;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-mini-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: #fff;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-mini-artist {
  margin-top: 2px;
  font-size: 0.76rem;
  color: rgba(235, 235, 245, 0.6);
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-mini-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  background: none;
  color: #fff;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-mini-btn svg {
  width: 20px;
  height: 20px;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-mini-btn.m-mini-prev svg,
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-mini-btn.m-mini-next svg {
  fill: currentColor;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-mini-btn.m-mini-play {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  background: var(--m-amber);
  color: var(--m-amber-ink);
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-mini-btn.m-mini-play svg {
  fill: currentColor;
  stroke: currentColor;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-mini-btn:active {
  opacity: 0.7;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-mini-progress {
  left: 10px;
  right: auto;
  max-width: calc(100% - 20px);
  background: var(--m-amber);
}

/* 10. Now Playing: title and artist are plain text at every size — no
   translucent pills — and the artwork carries the quality badge. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .np-info h4,
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .np-info p {
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .np-info h4 {
  color: #fff;
  font-weight: 700;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .np-info p:not(.m-album):not(.m-work):not(.m-movement):not(.m-composer) {
  color: rgba(235, 235, 245, 0.72);
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) #np-cover {
  position: relative;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) #np-cover > .m-np-quality {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  display: inline-flex;
  pointer-events: none;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) #np-cover > .m-np-quality[hidden] {
  display: none;
}

/* Small covers (landscape / square rows) get a smaller badge. */
html:is([data-layout="landscape"], [data-layout="square"]) #np-cover > .m-np-quality {
  top: 5px;
  left: 5px;
  transform: scale(0.85);
  transform-origin: top left;
}

/* 11 + 6. The library header (title, menu, search, sort) is a sticky
   z-index:100 bar; the album sheet is a z-index:70 fixed layer, so from
   ~480 px up the header painted over the hero as a dark box top-left with
   the search/sort floating over the cover. While an album is open the
   header has nothing to offer — hide it outright. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]):has(.album-detail-panel.open) main .top-chrome,
html.m-detail-open:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) main .top-chrome {
  visibility: hidden !important;
}

/* The sticky wrapper itself (z-index 100, translucent + blurred) is what
   painted the dark box; on phones it is opaque and unblurred (item 19). */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) main .top-chrome {
  background: var(--m-bg, #0b0b0f);
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* One narrow composition at every phone/tablet width: wider windows get a
   centred column instead of a 880 px square hero and a stretched list. */
@media (min-width: 640px) {
  html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel.open .detail-panel-content {
    max-width: 600px;
    margin: 0 auto !important;
  }
}

/* 8. Meta: the role labels ('ALBUM ARTIST', 'COMPOSER', …) are hidden in
   every phone layout, not only portrait — square / landscape showed them
   inline and the long ones broke mid-word ('COMPO SER'). */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-meta-items .meta-item strong {
  display: none !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-meta-items .meta-item,
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-meta-items .meta-item-value {
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-collapse-all {
  white-space: nowrap;
}

/* 7. Grouped / Flat: text tabs with the accent underline, like the Now
   Playing Albums / Songs / Works tabs — no filled segments. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-view-toggle {
  display: flex !important;
  gap: 0 !important;
  margin: 14px 18px 4px !important;
  padding: 0 !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0 !important;
  background: none !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-view-toggle[hidden] {
  display: none !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-view-toggle-btn {
  flex: 1 1 0 !important;
  position: relative;
  height: 42px !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: rgba(235, 235, 245, 0.55) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-view-toggle-btn.active {
  background: none !important;
  box-shadow: none !important;
  color: var(--m-amber) !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-view-toggle-btn.active::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--m-amber);
}

/* 13. Bottom bar: the active destination is the accent colour and the
   accent underline only — no rounded box behind it. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-tab.is-active {
  background: none !important;
  box-shadow: none !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-tab {
  border-radius: 0 !important;
}

/* 15. Library view menu: a plain list, icon + text. The active view is
   the accent colour with its label underlined. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-library .m-lib-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  grid-template-columns: none !important;
  padding: 4px 6px 12px !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-library .m-lib-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  width: 100%;
  min-height: 48px !important;
  height: auto !important;
  padding: 0 12px !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: rgba(235, 235, 245, 0.88) !important;
  text-align: left !important;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-library .m-lib-item:active {
  background: rgba(255, 255, 255, 0.05) !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-library .m-lib-icon {
  flex: 0 0 auto;
  display: inline-flex;
  width: 22px;
  height: 22px;
  color: rgba(235, 235, 245, 0.6) !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-library .m-lib-icon svg {
  width: 22px;
  height: 22px;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-library .m-lib-label {
  font-size: 1rem !important;
  font-weight: 500 !important;
  text-align: left !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-library .m-lib-item.is-active,
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-library .m-lib-item.is-active .m-lib-icon {
  color: var(--m-amber) !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-library .m-lib-item.is-active .m-lib-label {
  font-weight: 600 !important;
  text-decoration: underline;
  text-decoration-color: var(--m-amber);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-library .m-lib-divider {
  height: 1px;
  margin: 6px 12px;
  background: rgba(255, 255, 255, 0.10);
}

/* 17. Entity tiles (composers, conductors, …) look like album tiles: no
   card frame; the image (or the initials placeholder) fills the tile; the
   name and counts sit on it at the bottom over a dark gradient. The
   rolling album strip stays underneath. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-tile {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "art" "strip";
  grid-template-rows: auto auto;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-tile .entity-tile-avatar {
  grid-area: art;
  width: 100% !important;
  aspect-ratio: 1;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: none !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-tile .entity-tile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-tile .entity-tile-info {
  grid-area: art;
  align-self: end;
  z-index: 1;
  min-width: 0;
  padding: 28px 12px 10px !important;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-tile .entity-tile-name {
  color: #fff !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-tile .entity-tile-meta {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.72rem !important;
  margin-top: 2px !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-tile .entity-tile-teaser {
  grid-area: strip;
  margin-top: 6px;
  height: 40px;
  border: none !important;
  border-radius: 8px;
  background: none !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-tile .entity-tile-heart {
  z-index: 2;
}

/* 12. Home: a wall of album covers drifting slowly in columns, alternate
   columns in opposite directions. Pure transform animation on one layer
   per column; stopped when Home is not shown (display:none), when the page
   is hidden, and entirely under prefers-reduced-motion. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-home-wall {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--wall-cols, 3), minmax(0, 1fr));
  gap: 8px;
  padding: 0 8px;
  overflow: hidden;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-wall-col {
  position: relative;
  overflow: hidden;
  min-width: 0;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-wall-track {
  display: flex;
  flex-direction: column;
  gap: 8px;
  will-change: transform;
  animation: m-wall-drift var(--wall-dur, 80s) linear infinite;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-wall-col.is-down .m-wall-track {
  animation-direction: reverse;
}

@keyframes m-wall-drift {
  from { transform: translate3d(0, 0, 0); }
  /* -50% of the doubled strip, plus half a gap, lands exactly on the copy. */
  to   { transform: translate3d(0, calc(-50% - 4px), 0); }
}

html.m-doc-hidden .m-wall-track,
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-home[hidden] .m-wall-track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-wall-track {
    animation: none !important;
  }
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-wall-tile {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: none;
  border-radius: 10px;
  overflow: hidden;
  background: #15151b;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-wall-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-wall-tile:active {
  opacity: 0.8;
}

/* The wordmark sits on a short top fade; it never takes taps. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-home .m-home-copy {
  top: 0;
  bottom: auto;
  left: 0;
  right: 0;
  padding: calc(var(--m-safe-t, 0px) + 18px) 20px 36px;
  background: linear-gradient(to bottom, rgba(11, 11, 15, 0.92) 0%, rgba(11, 11, 15, 0.6) 55%, rgba(11, 11, 15, 0) 100%);
  pointer-events: none;
  z-index: 2;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-home .m-home-title {
  font-size: 1.6rem;
}

/* The (now opaque) sticky library chrome must also step aside for Home
   and for the full-screen player, as the header inside it already did. */
html.m-home-open:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) main .top-chrome,
html.m-player-open:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) main .top-chrome {
  visibility: hidden !important;
}

/* =====================================================================
   PHASE C
   ===================================================================== */

/* ---- C1. Library menu = side drawer from the right -------------------
   Same sheet stack and scrim as before (tap scrim / close button / Back
   all work unchanged); only the geometry differs. Full height, ~84% wide,
   the scrim stays visible on the left. Swipe-right is in web-navigation.js
   (installDrawerSwipe); `touch-action: pan-y` hands it horizontal drags
   while the list keeps native vertical scrolling. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-sheet.m-drawer {
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: min(84vw, 380px);
  height: 100%;
  max-height: none;
  border-radius: 22px 0 0 22px;
  border-top: none;
  border-left: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: -18px 0 48px rgba(0, 0, 0, 0.5);
  padding: calc(var(--m-safe-t) + 16px) 14px calc(var(--m-safe-b) + 18px);
  transform: translateX(102%);
  visibility: hidden;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 280ms;
  touch-action: pan-y;
  will-change: transform;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-sheet.m-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

/* Finger-tracking: no easing while the panel follows the drag. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-sheet.m-drawer.is-dragging {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-sheet.m-drawer,
  html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-sheet.m-drawer.is-open {
    transition: none !important;
  }
}

/* ---- C2. Now Playing background from the cover -----------------------
   One fixed layer pair (see installAmbientArt): pre-blurred 96px data URL
   scaled up, no CSS filter, no backdrop-filter. A shade fades it into the
   theme colour toward the bottom and keeps the text readable. Shown only
   while the player is open; the old full-screen blur(64px) wallpaper
   (body::before) is retired, and body::after would double-darken it. */
.m-np-ambient {
  display: none;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) body::before {
  content: none !important;
  display: none !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]).m-player-open body::after {
  display: none;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]).m-player-open .m-np-ambient {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #0b0b0f;
  contain: strict;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-amb-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 650ms ease;
  will-change: opacity;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-amb-layer.is-on {
  opacity: 1;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-amb-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(11, 11, 15, 0.28) 0%,
    rgba(11, 11, 15, 0.42) 32%,
    rgba(11, 11, 15, 0.74) 58%,
    #0b0b0f 86%);
}

@media (prefers-reduced-motion: reduce) {
  html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-amb-layer {
    transition: none !important;
  }
}

/* ---- C3. Heart in the title row, not on the artwork -------------------
   Portrait: the block becomes a 3-column grid -- [spacer | title+artist |
   heart] -- under the full-width artwork, so the centred metadata stays
   centred and the heart sits right-aligned beside the title like
   PowerAmp/Spotify. The quality badge stays top-left on the cover. */
html[data-layout="portrait"] .now-playing,
html[data-layout="portrait"].m-player-open .now-playing {
  display: grid;
  grid-template-columns: var(--m-tap) minmax(0, 1fr) var(--m-tap);
  column-gap: 6px;
  align-items: start;
}

html[data-layout="portrait"] .now-playing > * {
  grid-column: 1 / -1;
}

html[data-layout="portrait"] .now-playing > .np-cover {
  justify-self: center;
}

html[data-layout="portrait"] .now-playing > .np-info {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .np-like {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-layout="portrait"] .now-playing > .np-like,
html[data-layout="portrait"].m-player-open .now-playing > .np-like {
  position: static;
  grid-column: 3;
  grid-row: 2;
  align-self: start;
  justify-self: end;
  top: auto;
  right: auto;
  width: var(--m-tap);
  height: var(--m-tap);
  margin-top: -6px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.86);
  font-size: 1.5rem;
}

/* Landscape: heart already shares the metadata cell; give the title room
   so long names never run under it, and drop the glass circle. */
html[data-layout="landscape"] .player-bar .np-info {
  padding-right: calc(var(--m-tap) + 8px);
}

html[data-layout="landscape"] .player-bar .np-like {
  background: transparent;
  border: none;
  font-size: 1.5rem;
}

/* Folded groups and filtered-out rows really disappear. The phone layout
   gives rows and headers `display: grid !important` at a higher specificity
   than the generic `.collapsed-hidden` / `.search-hidden` rules, so folding
   a group (or Collapse all, or the in-album filter) changed the arrow and
   the button label but every row stayed on screen. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-track-list .detail-track-item.collapsed-hidden,
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-track-list .detail-work-header.collapsed-hidden,
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-track-list .detail-track-item.search-hidden,
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-track-list .detail-work-header.search-hidden {
  display: none !important;
}

/* Taps on group headers and their arrow act at once: no double-tap-zoom
   wait, so a quick second tap is never turned into a delayed ghost action. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-work-header,
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-work-chevron,
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-collapse-all {
  touch-action: manipulation;
}

/* =====================================================================
   PHASE D
   ===================================================================== */

/* ---- D1/E1. Home: welcome + library stats over the cover wall ----
   A full-bleed dark layer over the whole wall (the wall fills .m-home,
   which ends above the bottom navigation). ~78% black: the covers stay
   faintly visible drifting behind. No backdrop-filter (a blur over a layer
   that animates underneath re-renders every frame). The layer itself is
   pointer-events:none, so a tap anywhere outside a stat still reaches the
   cover behind it and opens that album; only the stat texts are buttons.
   Stats are plain text, no boxes: amber number, label below with a thin
   amber underline (the text-tab accent style), centred on the screen. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-home .m-home-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 24px 16px;
  margin: 0;
  border: none;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.78);
  box-shadow: none;
  color: #fff;
  pointer-events: none;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-home .m-home-overlay[hidden] {
  display: none !important;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-home .m-home-overlay-title {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-home .m-home-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 18px 26px;
  max-width: 560px;
  pointer-events: none;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-home .m-home-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 76px;
  padding: 2px 2px 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  text-align: center;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-home button.m-home-stat {
  cursor: pointer;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-home .m-home-stat-value {
  font-size: 1.45rem;
  line-height: 1.1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--m-amber, #f5b83d);
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-home .m-home-stat-label {
  position: relative;
  margin-top: 3px;
  padding-bottom: 5px;
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(235, 235, 245, 0.88);
  white-space: nowrap;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-home .m-home-stat-label::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--m-amber, #f5b83d);
  opacity: 0.85;
}

html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-home button.m-home-stat:active .m-home-stat-value,
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-home button.m-home-stat:focus-visible .m-home-stat-value {
  color: #fff;
}

/* The old top-left wordmark (with its light fade) is gone; make sure a
   stale node from an older build never paints. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-home .m-home-copy {
  display: none !important;
}

/* =====================================================================
   PHASE E
   ===================================================================== */

/* E2. Double tap plays, so the browser must never spend a double tap on
   zooming: touch-action is intersected down the tree, so this covers every
   row and header (pinch-zoom and panning stay available). */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]),
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) body {
  touch-action: manipulation;
}

/* E3. The cover wall is the only Home on a phone. The desktop hero page
   ("Welcome to Auditura" banner, stat cards, recent / favourites strips)
   is never shown in a phone layout, not even for the instant before the
   cover wall opens on first load, reload or after sign-in. Search results
   (.home-search) still live in that view and stay visible. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .view-section[data-view="home"] > .home-hero,
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .view-section[data-view="home"] > #stats-section,
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .view-section[data-view="home"] > .home-section:not(.home-search) {
  display: none !important;
}

/* Phase 2: keep rich descriptions visible and expandable on mobile. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-description-slot .entity-desc-preview { display: block; -webkit-line-clamp: unset; overflow: visible; max-width: 100%; }
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-description-slot .entity-desc-preview[hidden] { display: none !important; }


/* ANDROID / MOBILE SHELL FIX 2026-10-27 ---------------------------------
   Only the mobile web renderer; desktop layout remains unchanged. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .music-panel,
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .music-panel.open {
  display: none !important; /* desktop-only slide-in Now Playing panel */
}

/* One real search bar at the top: the entity's own input still exists for
   persistence / virtualised filtering but isn't rendered a second time. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .entity-page-search {
  display: none !important;
}

/* The album sheet must fully cover the underlying album grid (including
   near the bottom). The navigation sits ABOVE it; inset content padding
   leaves the final track scrollable instead of showing grid thumbnails in
   a gap between the sheet and the navigation. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel.open {
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  padding-bottom: calc(var(--m-nav-h) + var(--m-safe-b) + 16px) !important;
  background: var(--m-bg, #0b0b0f) !important;
}
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]):has(.album-detail-panel.open) .sidebar {
  z-index: 95 !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-track-list[data-view="flat"] ~ .detail-collapse-all,
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .album-detail-panel .detail-collapse-all[hidden] {
  display: none !important;
}

/* Full-cover viewer with real track actions (not the desktop music panel). */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .m-art-details {
  position: fixed; inset: 0; z-index: 150;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--m-safe-t) + 18px) 20px calc(var(--m-safe-b) + 24px);
  background: #0b0b10; color: #f6f5f8;
  overflow-y: auto; overscroll-behavior: contain;
}
.m-art-details[hidden] { display: none !important; }
.m-art-details .m-art-close {
  align-self: flex-end; width: 44px; height: 44px;
  border: 1px solid #434049; border-radius: 50%;
  background: #18171e; color: #fff; font-size: 28px;
}
.m-art-details .m-art-img {
  display: block; width: min(100%, 55vh); max-width: 540px;
  aspect-ratio: 1; object-fit: contain;
  margin: 12px auto 16px; border-radius: 10px;
}
.m-art-details .m-art-title {font-size: 22px; font-weight: 700; text-align: center;}
.m-art-details .m-art-subtitle {font-size: 14px; color: #a2a1ad; margin: 5px 0 14px; text-align: center;}
.m-art-details .m-art-actions {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px;}
.m-art-details .m-art-actions button {min-height: 44px; padding: 9px 15px; border-radius: 10px; border: 1px solid #45404a; background: #1e1c24; color: #fff;}
.m-art-details .m-art-actions .is-on {color: #ffbc42;}
.m-art-details .m-art-stars {display: flex; gap: 4px; margin: 14px 0 4px;}
.m-art-details .m-art-stars button {font-size: 27px; padding: 5px; color: #77727e; background: transparent; border: none; min-width: 37px; min-height: 44px;}
.m-art-details .m-art-stars button.is-on {color: #ffbc42;}

/* Mobile playing row: do not overlay the speaker glyph or accent stripe
   on queue cover art. The selected track remains visibly highlighted. */
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .queue-song-item.playing::before,
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .queue-song-item.playing.accent-bar-host::after {
  content: none !important;
  display: none !important;
}
html:is([data-layout="portrait"], [data-layout="landscape"], [data-layout="square"]) .queue-song-item.playing {
  padding-left: 14px !important;
}

/* Auditura desktop-only floating phone view. No rules apply in desktop layout. */
html[data-mini-desktop="true"] { --titlebar-height: 0px !important; --m-vh: calc(100dvh - 24px); }
html[data-mini-desktop="true"] body { padding-top: 24px !important; }
html[data-mini-desktop="true"] .custom-titlebar,
html[data-mini-desktop="true"] #custom-titlebar,
html[data-mini-desktop="true"] #tiny-player-overlay { display:none !important; }
html[data-mini-desktop="true"] .m-tab[data-tab="full"] { color:var(--m-accent,var(--accent-primary,#ff8a3d)); }
html[data-mini-desktop="true"] .m-tab[data-tab="full"] .m-tab-label { white-space:nowrap; font-size:10px; }
#mini-mobile-drag-handle { position:fixed; z-index:2147482000; top:0; left:0; right:0;
  height:24px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,rgba(15,15,20,.93),rgba(15,15,20,.65));
  color:rgba(255,255,255,.68); font-size:9px; font-weight:600; letter-spacing:.16em;
  cursor:grab; user-select:none; touch-action:none; -webkit-app-region:no-drag; }
#mini-mobile-drag-handle:active { cursor:grabbing; }

/* AUDITURA_MINI_FLEX_V2 — floating desktop player ONLY. */
html[data-mini-desktop="true"] #mini-flex-settings-button {
  position:fixed; top:1px; right:12px; z-index:2147482200;
  width:30px; height:22px; display:flex; align-items:center; justify-content:center;
  border:0; border-radius:5px; background:rgba(25,25,34,.7); color:#ddd;
  cursor:pointer; -webkit-app-region:no-drag;
}
html[data-mini-desktop="true"] #mini-flex-settings-button:hover,
html[data-mini-desktop="true"] #mini-flex-settings-button[aria-expanded="true"] {
  color:var(--m-accent,var(--accent-primary,#f5b83d));
}
html[data-mini-desktop="true"] #mini-flex-settings {
  position:fixed; top:29px; right:12px; z-index:2147482100;
  box-sizing:border-box; width:min(290px,calc(100vw - 24px));
  max-height:calc(100dvh - 95px); overflow:auto;
  padding:17px 16px 14px; background:rgba(22,22,30,.98);
  color:#eee; border:1px solid rgba(255,255,255,.13);
  border-radius:12px; box-shadow:0 20px 55px rgba(0,0,0,.55);
}
html[data-mini-desktop="true"] #mini-flex-settings[hidden] { display:none !important; }
html[data-mini-desktop="true"] .mini-flex-settings-heading {
  font-size:16px; font-weight:650; margin:0 0 20px;
}
html[data-mini-desktop="true"] .mini-flex-settings-label {
  color:#b9bac5; font-size:12px; margin-bottom:9px;
}
html[data-mini-desktop="true"] .mini-flex-settings-choices { display:flex; gap:8px; }
html[data-mini-desktop="true"] .mini-flex-settings-choices button,
html[data-mini-desktop="true"] .mini-flex-square {
  flex:1; min-height:38px; border:1px solid rgba(255,255,255,.15);
  border-radius:8px; background:rgba(255,255,255,.06); color:#eee; cursor:pointer;
}
html[data-mini-desktop="true"] .mini-flex-settings-choices button.is-active {
  border-color:var(--m-accent,var(--accent-primary,#f5b83d));
  color:var(--m-accent,var(--accent-primary,#f5b83d));
}
html[data-mini-desktop="true"] .mini-flex-square { width:100%; margin-top:15px; }
html[data-mini-desktop="true"] .mini-flex-settings-note {
  color:#8e8d99; font-size:11px; line-height:1.4; margin-top:11px;
}
html[data-mini-desktop="true"] .mini-flex-grip {
  display:block; position:fixed; z-index:2147482500; touch-action:none;
}
html[data-mini-desktop="true"] .mini-flex-grip-n  {top:0;left:10px;right:46px;height:5px;cursor:n-resize;}
html[data-mini-desktop="true"] .mini-flex-grip-s  {bottom:0;left:10px;right:10px;height:7px;cursor:s-resize;}
html[data-mini-desktop="true"] .mini-flex-grip-e  {right:0;top:12px;bottom:12px;width:7px;cursor:e-resize;}
html[data-mini-desktop="true"] .mini-flex-grip-w  {left:0;top:12px;bottom:12px;width:7px;cursor:w-resize;}
html[data-mini-desktop="true"] .mini-flex-grip-ne {top:0;right:0;width:12px;height:12px;cursor:ne-resize;}
html[data-mini-desktop="true"] .mini-flex-grip-nw {top:0;left:0;width:12px;height:12px;cursor:nw-resize;}
html[data-mini-desktop="true"] .mini-flex-grip-se {bottom:0;right:0;width:15px;height:15px;cursor:se-resize;}
html[data-mini-desktop="true"] .mini-flex-grip-sw {bottom:0;left:0;width:12px;height:12px;cursor:sw-resize;}
@media (max-height:480px) {
  html[data-mini-desktop="true"] #mini-flex-settings {max-height:calc(100dvh - 58px);}
}