/* Shared phone layout, loaded after the page-specific styles. */
@media (max-width: 650px) {
  body .topbar,
  body:is(.listener-home, .listener-station, .listener-collection, .listener-bible) .topbar {
    position: sticky;
    top: 0;
    z-index: 45;
    display: flex;
    height: 62px;
    padding: 0 14px 0 66px;
    gap: 10px;
    background: #fff;
    box-shadow: 0 1px 8px #14282014;
  }
  body .topbar .brand { display: flex; align-items: center; margin: 0 auto 0 0; }
  body .topbar .header-note { display: none; }
  body .topbar .avatar { flex: none; color: #087252; background: #e7f7ef; }
  body .topbar .listener-menu-toggle {
    position: absolute !important;
    top: 9px !important;
    left: 12px !important;
    width: 44px;
    height: 44px;
  }
  body .discover-rail,
  body:is(.listener-home, .listener-station, .listener-collection, .listener-bible) .discover-rail {
    top: 62px;
    bottom: 0;
    height: calc(100vh - 62px);
    height: calc(100dvh - 62px);
    overscroll-behavior: contain;
    padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important;
  }
  body .listener-rail-backdrop { inset: 62px 0 0; }
  body .page { padding-bottom: calc(180px + env(safe-area-inset-bottom)); }
  body:is(.listener-home, .listener-collection) .discover-layout {
    padding-inline: 14px;
    padding-bottom: calc(180px + env(safe-area-inset-bottom));
  }
  body.listener-station .station-page-layout { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .discover-content, .podcast-detail-content, .station-summary { min-width: 0; }
  .section-head { flex-wrap: wrap; align-items: center; }
  .detail-actions, .podcast-actions { flex-wrap: wrap; }
  .about, .podcast-description, .episode-copy, .bible-heading { overflow-wrap: anywhere; }
  body .search-box input, body .general-search input, body select, body textarea { font-size: 16px; }
  body .station-shelf .card-play { width: 44px; height: 44px; }
  body .station-shelf .station-card h3, body .station-shelf .station-card p { margin-right: 44px; }
  body .shelf-controls button { min-width: 44px; min-height: 44px; }
  body .mini-player,
  body:is(.listener-home, .listener-station, .listener-collection) .mini-player {
    left: 0;
    width: 100%;
    bottom: calc(76px + env(safe-area-inset-bottom));
    height: 72px;
    padding: 8px 10px;
    gap: 8px;
  }
  body.listener-bible .mini-player {
    bottom: 0;
    height: calc(72px + env(safe-area-inset-bottom));
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
  body:is(.listener-home, .listener-station) .mini-player {
    bottom: 0;
    height: calc(72px + env(safe-area-inset-bottom));
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
  body .mini-player img { width: 36px; height: 36px; flex: none; }
  body .mini-player .mini-copy { flex: 1; min-width: 0; }
  body .mini-player .mini-copy strong { max-width: none; font-size: 12px; }
  body .mini-player #player-toggle { position: static; transform: none; order: 3; width: 44px; height: 44px; }
  body .mini-player .player-volume { order: 4; flex: 0 0 70px; width: 70px; padding: 10px 6px; gap: 4px; }
  body .mini-player .player-volume svg { width: 16px; height: 16px; }
  body .mini-player .player-volume input { min-width: 0; }
  body .mini-player .player-volume input::-webkit-slider-thumb { width: 18px; height: 18px; }
  body .mini-player .player-volume input::-moz-range-thumb { width: 18px; height: 18px; }
  body .mini-player #player-report { order: 5; width: 44px; height: 44px; }
  body .bottom-nav a { min-width: 0; flex: 1; }
}

@media(max-width:650px){
  .listener-home .topbar .brand{position:absolute;left:50%;transform:translateX(-50%);margin:0!important}
  .listener-home .topbar .brand img{width:52px!important;height:52px!important}
  .listener-home .discover-content{padding-top:10px}
  .listener-home .discover-heading h1{font-size:27px;font-weight:800}
  .listener-home .discover-heading .search-box{border-radius:28px;background:#fff;min-height:54px}
  .listener-home .station-shelf .section-head p{display:none}
  .listener-home .station-shelf .section-head h2{font-size:20px}
  .listener-home .station-shelf .station-card{background:#f7f7f7;border-radius:12px}
}