/* ListenRise — additive website polish overrides.
   Targets only existing selectors from public/style.css and public/ui.js.
   Purple (#783edb) / white identity preserved. No new markup.
*/

/* ===== 1. Search: magnifier + input alignment ===== */
/* #search already reserves left padding (32px) for an icon, but the live icon
   is a static flex sibling (.search-icon), not an absolutely positioned .search-wrap svg.
   Make the icon the flex box and neutralize the phantom padding + old absolute rule. */
.sidebar .search-wrap {
  align-items: center;
  gap: 0;
  min-height: 38px;
}

.sidebar .search-icon {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  align-self: stretch;
  color: #8e8e93;
  pointer-events: none;
}

.sidebar .search-icon svg {
  position: static;
  left: auto;
  width: 15px;
  height: 15px;
  margin: 0;
}

.sidebar #search.search-input,
.sidebar #search {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 2px;
  padding-right: 10px;
  line-height: 1.35;
  min-height: 34px;
}

.sidebar .search-wrap:focus-within .search-icon {
  color: #783edb;
}

/* native clear button on type=search keeps text clear of the edge */
#search::-webkit-search-cancel-button {
  margin-right: 2px;
}

/* ===== 2. Connection status: internal only, never visible ===== */
#connection,
#connection.is-offline,
#connection.is-loading,
#connection.connection {
  display: none !important;
  visibility: hidden !important;
}

/* ===== 3. Focus visibility (keyboard) ===== */
.nav-btn:focus-visible,
.card:focus-visible,
.hero:focus-visible,
#refresh:focus-visible,
#search:focus-visible,
.episode-row:focus-visible,
.pf-cue:focus-visible,
.pf-btn:focus-visible,
.pf-toggle:focus-visible,
.pf-option:focus-visible,
.pf-immersive:focus-visible,
.membership-entry:focus-visible,
.account-button:focus-visible,
.mini-controls button:focus-visible,
#notice button:focus-visible,
#notice .auth-input:focus-visible {
  outline: 2px solid #783edb;
  outline-offset: 2px;
}

#content:focus {
  outline: none;
}

#search:focus-visible {
  border-color: #783edb;
  box-shadow: 0 0 0 3px rgba(120, 62, 219, 0.15);
}

/* ===== 4. Touch targets ===== */
#refresh {
  min-width: 40px;
  min-height: 40px;
}

.nav-btn {
  min-height: 44px;
}

.episode-row .ep-play,
.episode-play {
  min-width: 40px;
  min-height: 40px;
}

.pf-btn,
.pf-toggle,
.pf-option,
.pf-cycle,
.pf-cue-save,
.pf-explain-button,
.pf-expl-close,
.notice-close,
.mini-controls button {
  min-height: 40px;
}

.pf-btn svg,
.pf-toggle svg,
.mini-controls button svg {
  width: 18px;
  height: 18px;
}

.mini-controls button {
  min-width: 40px;
  min-height: 40px;
}

/* ===== 5. Responsive nav ===== */
@media (max-width: 850px) and (min-width: 701px) {
  .nav-btn {
    min-height: 44px;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .sidebar .search-wrap {
    min-height: 36px;
  }
}

@media (max-width: 700px) {
  .sidebar {
    overflow-x: hidden;
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }

  .sidebar nav button {
    min-height: 48px;
    min-width: 64px;
    padding: 6px 10px;
  }

  .sidebar nav .nav-label {
    line-height: 1.2;
  }

  #toolbar {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  #refresh {
    min-width: 44px;
    min-height: 44px;
  }

  .main {
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
  }
}

/* ===== 6. Small-screen dialog ===== */
#notice {
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 480px) {
  #notice,
  #notice:has(.checkout) {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    padding: 22px 18px;
    border-radius: 18px;
  }

  #notice .notice-content,
  #notice .checkout {
    max-height: none;
    overflow: visible;
  }

  #notice .auth-form,
  #notice input.auth-input,
  #notice .auth-submit.primary,
  #notice .checkout-start,
  #notice .auth-code-button {
    min-height: 44px;
  }

  .notice-close,
  #notice .notice-close {
    min-width: 40px;
    min-height: 40px;
  }
}

/* ===== 7. Small-screen player: keep split layout, protect subtitles ===== */
@media (max-width: 700px) {
  .player-right .pf-list-scroll {
    max-height: min(42vh, 340px);
  }

  .pf-list-head {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fdfcfe;
  }

  .pf-expl-body .teaching-section:last-child {
    padding-bottom: 8px;
  }
}

/* Docked mini player never covers transcript text on phones */
@media (max-width: 700px) {
  #mini:not([hidden]) {
    padding-bottom: max(9px, env(safe-area-inset-bottom));
  }

  .mini-media,
  .mini-controls {
    min-width: 0;
  }

  .mini-title,
  .mini-sub {
    max-width: 100%;
  }

  #content {
    padding-bottom: calc(140px + env(safe-area-inset-bottom));
  }
}

/* ===== 8. Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .hero,
  .card,
  .cards > button,
  .pf-cycle,
  .payment-link,
  .sidebar nav button,
  #refresh svg {
    transition: none !important;
    transform: none !important;
  }

  .hero:hover,
  .card:hover,
  .cards > button:hover {
    transform: none !important;
  }

  #refresh.is-spinning svg,
  .preparing-dot {
    animation: none !important;
  }
}