/* ==========================================================================
   URSY.FM — MOBILE. Phone-first reworking, not a reflow.
     - pill nav and desktop-only chrome hidden, hamburger shown
     - the FM-1 chassis stacks; the tuning dial centres
     - the docked player becomes a mini-player; the tab bar appears
     - backdrop-filter dropped, targets grow to 48px
   ========================================================================== */

.u-plHide { }

@media (min-width: 961px) { .u-top__burger { display: none; } }

@media (max-width: 960px) {
  .u-pill, .u-desk { display: none !important; }
  .u-top__burger { display: grid; }
  .u-brand { margin-inline-end: auto; }
}

@media (max-width: 860px) {
  .u-grid--3, .u-grid--2 { grid-template-columns: 1fr; }
  .u-split, .u-split--even { grid-template-columns: 1fr; }
  .u-info { grid-template-columns: 1fr; }
  .u-subnav { position: static; display: flex; flex-wrap: wrap; gap: 6px; }
  .u-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* the set stacks */
  .u-set__chassis { grid-template-columns: minmax(0, 1fr); }
  .u-set__right { justify-items: stretch; }
  .u-dial { justify-self: center; }
  .u-set__base { grid-template-columns: minmax(0, 1fr); }

  /* glass is expensive on phones */
  .u-top, .u-foot, .u-player, .u-set__chassis { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .u-top, .u-foot, .u-player { background: var(--sheet); }

  /* mini-player: hide the desk-only controls, keep art + meta + transport */
  .u-plHide { display: none !important; }
  .u-player__inner { gap: 10px; padding-inline: 12px; }

  /* the phone tab bar */
  .u-tabs {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 36;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: 72px;
    padding-block-end: max(8px, env(safe-area-inset-bottom));
    background: var(--sheet);
    box-shadow: inset 0 1px 0 var(--line2);
  }
  .u-tab {
    display: grid;
    gap: 3px;
    justify-items: center;
    align-content: center;
    min-height: 56px;
    color: var(--ink3);
    font-size: 9.5px;
    font-weight: 500;
  }
  .u-tab:hover { text-decoration: none; color: var(--ink2); }
  .u-tab.is-current { color: var(--neon); }
  .u-tab span { letter-spacing: -.005em; }

  /* lift the player above the tab bar, and the page above both */
  .u-player { inset-block-end: 72px; }
  .ursy-mount { padding-block-end: 200px; }

  /* touch targets grow */
  .u-iconbtn, .u-tbtn, .u-fav, .u-band, .u-timer { min-height: var(--tap-touch); }
  .u-btn { height: var(--tap-touch); }
}

@media (max-width: 600px) {
  .u-hero { padding-inline: 18px; }
  .u-hero__h1 { font-size: 2.6rem; }
  .u-foot__cols { grid-template-columns: 1fr; }
  .u-wrap { padding-inline: 16px; }
  .u-hero__chips .u-tag:nth-child(n+3) { display: none; }
  .u-hidesm { display: none !important; }
  .u-ad { grid-template-columns: 1fr; }
  .u-ad__slot { width: 100%; aspect-ratio: 320 / 100; }
}

/*
 * REVISED 2026-09-03: the fixed player bar and mobile tab bar were painted at
 * rgba(255,255,255,.92) with no backdrop filter, so page text scrolled visibly
 * through them — hero stat tiles ghosted across the transport controls on a
 * phone. The blur keeps the translucent look the design intends while making
 * the bars legible; where backdrop-filter is unsupported the bars go solid so
 * the text can never show through. Colours still come from the theme tokens,
 * so light and dark both follow.
 */
.u-player,
.u-tabs {
	-webkit-backdrop-filter: saturate(150%) blur(14px);
	backdrop-filter: saturate(150%) blur(14px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.u-player,
	.u-tabs {
		background: var(--u-bg, #fff);
	}
}