/* Parent layout reserves space with padding-bottom: var(--jewishhit-player-height, 0px). */
#player-root { --jhp-ink: #174b3c; --jhp-paper: #fcfaf4; --jhp-line: #cad7cd; color: var(--jhp-ink); font-family: inherit; font-size: 1rem; line-height: 1.5; }
#player-root *, #player-root *::before, #player-root *::after { box-sizing: border-box; }
#player-root [hidden] { display: none !important; }
#player-root button, #player-root input { font: inherit; }
#player-root button { min-height: 44px; padding: .5rem .8rem; border: 1px solid var(--jhp-line); border-radius: .55rem; background: #fffefb; color: var(--jhp-ink); cursor: pointer; line-height: 1.3; }
#player-root button:hover:not(:disabled) { background: #e7efe6; border-color: #174b3c; }
#player-root button:disabled { opacity: .48; cursor: default; }
#player-root :focus-visible { outline: 3px solid #8f650b; outline-offset: 3px; }
#player-root .jhp-primary { background: var(--jhp-ink); color: white; border-color: var(--jhp-ink); min-width: 76px; }
#player-root .jhp-primary:hover:not(:disabled) { background: #24614e; color: white; }
.jhp-dock { position: fixed; z-index: 80; inset: auto 0 0; display: grid; grid-template-columns: minmax(160px, 1fr) auto auto; gap: .5rem 1.25rem; align-items: center; max-height: 60dvh; overflow-y: auto; overscroll-behavior: contain; padding: .75rem max(1rem, env(safe-area-inset-right)) calc(.5rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); background: #fcfaf4; border-top: 1px solid var(--jhp-line); box-shadow: 0 -5px 24px #174b3c0a; }
.jhp-track { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.jhp-cover { flex: 0 0 52px; width: 52px; height: 52px; border-radius: .45rem; object-fit: cover; }
.jhp-track-copy { min-width: 0; }
.jhp-title, .jhp-status { display: block; overflow-wrap: anywhere; }
.jhp-title { font-size: 1rem; line-height: 1.3; }
.jhp-status { font-size: .875rem; line-height: 1.4; margin-top: .2rem; color: #405d50; }
.jhp-transport, .jhp-options { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
#player-root .jhp-previous, #player-root .jhp-next { min-width: 44px; font-size: 1.3rem; padding: .3rem; }
.jhp-progress { grid-column: 1 / -1; display: flex; gap: .6rem; align-items: center; min-width: 0; }
.jhp-time, .jhp-duration { font-size: .875rem; font-variant-numeric: tabular-nums; }
#jewishhit-seek { flex: 1; width: 0; min-width: 0; min-height: 44px; margin: 0; accent-color: #174b3c; cursor: pointer; }
.jhp-dialog { color: #174b3c; background: #fcfaf4; border: 1px solid #cad7cd; border-radius: 1rem; width: min(46rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); max-width: none; padding: 1.5rem; overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 12px 64px #174b3c24; }
.jhp-dialog::backdrop { background: #17382da3; }
.jhp-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.jhp-dialog h2 { font: inherit; font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 800; line-height: 1.2; margin: 0; overflow-wrap: anywhere; }
.jhp-dialog-heading button { flex-shrink: 0; }
.jhp-dialog p { font-size: 1rem; line-height: 1.6; }
.jhp-queue-settings { margin-block: 1rem; }
.jhp-queue-list { padding: 0; margin: 1rem 0 0; list-style-position: inside; }
.jhp-queue-list li { border-top: 1px solid #cad7cd; display: flex; }
#player-root .jhp-queue-list button { width: 100%; border: 0; border-radius: 0; text-align: left; padding: .85rem; display: flex; gap: .5rem; align-items: center; justify-content: space-between; flex-wrap: wrap; overflow-wrap: anywhere; }
#player-root .jhp-queue-list button[aria-current] { background: #e4edde; font-weight: 800; }
.jhp-queue-marker { font-size: .875rem; font-weight: 600; color: #466044; }
.jhp-video-dialog { width: min(62rem, calc(100% - 2rem)); }
.jhp-video-frame { width: 100%; aspect-ratio: 16 / 9; min-height: 200px; margin-block: 1rem; background: #e5ebe0; border-radius: .5rem; overflow: hidden; }
.jhp-video-frame iframe { display: block; width: 100%; height: 100%; min-height: 200px; border: 0; }
.jhp-video-fallback { display: inline-block; color: #174b3c; text-underline-offset: .2em; min-height: 44px; padding-block: .6rem; }
.jhp-lyrics-dialog { width: min(64rem, calc(100% - 2rem)); }
.jhp-lyrics-controls { display: flex; flex-wrap: wrap; gap: .5rem; padding-block: .75rem; border-block: 1px solid #cad7cd; }
#player-root .jhp-lyrics-lines .jhp-lyric-cue { font-size: 2.25rem; font-weight: 700; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; margin: 0; padding: 1rem .75rem; border-left: 4px solid transparent; }
#player-root .jhp-lyric-cue.is-current { background: #e3edde; color: #123d2f; border-left-color: #946800; }
.jhp-lyrics-lines { margin-top: 1rem; }
.jhp-queue-settings { display: flex; flex-wrap: wrap; gap: .5rem; }
.jhp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 900px) { .jhp-dock { grid-template-columns: minmax(140px, 1fr) auto; gap: .5rem .75rem; } .jhp-options { grid-column: 1 / -1; justify-content: flex-end; } }
@media (max-width: 540px) {
  .jhp-dock { grid-template-columns: minmax(0, 1fr); padding: .6rem max(.75rem, env(safe-area-inset-right)) calc(.4rem + env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left)); gap: .4rem; }
  .jhp-cover { width: 40px; height: 40px; flex-basis: 40px; }
  .jhp-track { gap: .6rem; }
  .jhp-transport, .jhp-options { justify-content: center; }
  .jhp-options { grid-column: auto; }
  #player-root .jhp-options button { min-height: 44px; padding-block: .4rem; }
  .jhp-dialog { width: calc(100% - 1rem); padding: 1rem; max-height: calc(100dvh - 1rem); }
  .jhp-dialog-heading { gap: .7rem; flex-wrap: wrap; }
  .jhp-video-frame { min-height: 200px; }
}
@media (prefers-reduced-motion: reduce) { #player-root *, #player-root *::before, #player-root *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }