:root {
  --app-player-height: 0px;
  --queue-panel-height: min(60dvh, 720px);
  --queue-panel-width: clamp(340px, 29vw, 460px);
  --queue-panel-shift: clamp(124px, 10vw, 196px);
}

[hidden] { display: none !important; }

.library-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 10px 16px;
}
.library-search-row .song-search { flex: 1 1 auto; min-width: 0; margin: 0; }
.shuffle-visible {
  appearance: none;
  width: 41px;
  height: 41px;
  flex: 0 0 41px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease, transform 120ms ease;
}
.shuffle-visible:hover,
.shuffle-visible:focus-visible {
  color: var(--ink);
  border-color: rgba(244, 234, 208, 0.58);
  background: rgba(244, 234, 208, 0.10);
  outline: none;
}
.shuffle-visible:active { transform: scale(0.94); }
.shuffle-visible:disabled { opacity: 0.34; cursor: default; transform: none; }

.app-view-icon { display: block; }
[data-app-view="library"] .app-view-icon-home,
[data-app-view="song"] .app-view-icon-song { display: none; }

.session-player-visible .library-page,
.session-player-visible .library-view {
  padding-bottom: calc(164px + var(--app-player-height) + 24px);
}

.audio-player { z-index: 80; bottom: 0; }
.app-stage,
.audio-player { transition: transform 200ms cubic-bezier(.2,.8,.2,1), bottom 200ms cubic-bezier(.2,.8,.2,1); }
body.queue-open { overflow: hidden; }
body.queue-open .app-stage { transform: none; }
body.queue-open .audio-player { bottom: 0; }

.app-stage {
  position: relative;
  min-height: 100dvh;
}
.app-stage.is-view-transitioning { overflow: hidden; }
.app-stage.is-view-transitioning > main { will-change: transform; }
.app-view-in-left,
.app-view-in-right {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}
.app-view-in-left { animation: app-view-in-left 220ms cubic-bezier(.22,1,.36,1) both; }
.app-view-out-right { animation: app-view-out-right 220ms cubic-bezier(.22,1,.36,1) both; }
.app-view-in-right { animation: app-view-in-right 220ms cubic-bezier(.22,1,.36,1) both; }
.app-view-out-left { animation: app-view-out-left 220ms cubic-bezier(.22,1,.36,1) both; }
@keyframes app-view-in-left { from { transform: translateX(-100vw); } to { transform: translateX(0); } }
@keyframes app-view-out-right { from { transform: translateX(0); } to { transform: translateX(100vw); } }
@keyframes app-view-in-right { from { transform: translateX(100vw); } to { transform: translateX(0); } }
@keyframes app-view-out-left { from { transform: translateX(0); } to { transform: translateX(-100vw); } }
@keyframes lyric-source-in { from { transform: translateX(10px); } to { transform: translateX(0); } }
@keyframes lyric-roman-in { from { transform: translateX(18px); } to { transform: translateX(0); } }
@keyframes lyric-english-in { from { transform: translateX(6px); } to { transform: translateX(0); } }
@keyframes lyric-source-out { from { transform: translateX(0); } to { transform: translateX(10px); } }
@keyframes lyric-roman-out { from { transform: translateX(0); } to { transform: translateX(18px); } }
@keyframes lyric-english-out { from { transform: translateX(0); } to { transform: translateX(6px); } }
.app-view-in-right .line-source { animation: lyric-source-in 210ms cubic-bezier(.22,1,.36,1) both; }
.app-view-in-right .line-roman { animation: lyric-roman-in 180ms cubic-bezier(.22,1,.36,1) both; }
.app-view-in-right .line-english { animation: lyric-english-in 220ms cubic-bezier(.22,1,.36,1) both; }
.app-view-out-right .line-source { animation: lyric-source-out 210ms cubic-bezier(.22,1,.36,1) both; }
.app-view-out-right .line-roman { animation: lyric-roman-out 180ms cubic-bezier(.22,1,.36,1) both; }
.app-view-out-right .line-english { animation: lyric-english-out 220ms cubic-bezier(.22,1,.36,1) both; }

/* #songSync and #songShare are position: fixed, and they live inside <main>. A
   transform on an ancestor becomes the containing block for fixed descendants,
   so the instant the swipe starts these two stop being measured from the
   viewport and are measured from <main>: they jump up by exactly the scroll
   offset, ride the slide from the wrong place, and snap back when the transform
   is removed. app.js records the scroll position for the length of the
   transition; adding it back holds them where the reader already sees them, so
   they travel with the page instead of leaving it. */
.app-stage.is-view-transitioning #songSync,
.app-stage.is-view-transitioning #songShare {
  /* Corrected through `top`, not `transform`: these buttons carry
     `transition: transform 120ms` for their press feedback, so a transform
     correction would ease in over 120ms and ease back out again when the class
     is removed — the same jump twice, just slower. `top` is not in their
     transition list, so it lands on the first frame and leaves on the last. */
  top: calc(var(--song-control-top) + var(--app-swipe-scroll, 0px));
}
/* The same switch moves them sideways too: their left/right are measured from
   <main>'s padding box, which is inset from the viewport by the page margin, so
   they hop by that margin before the slide even starts. app.js measures the
   inset rather than restating the margin here. */
.app-stage.is-view-transitioning #songSync {
  left: calc(var(--song-control-left) - var(--app-swipe-inset-left, 0px));
}
.app-stage.is-view-transitioning #songShare {
  right: calc(var(--song-control-right) - var(--app-swipe-inset-right, 0px));
}
.queue-pill {
  appearance: none;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(244, 234, 208, 0.34);
  border-radius: 50%;
  background: transparent;
  color: rgba(244, 234, 208, 0.78);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease, transform 120ms ease;
}
.queue-pill::before,
.queue-action::before,
.queue-row-action::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(244, 234, 208, 0.10);
  opacity: 0;
  transform: scale(0.25);
  transition: opacity 140ms ease, transform 160ms cubic-bezier(.2,.8,.2,1);
}
.queue-pill:hover::before,
.queue-pill:focus-visible::before,
.queue-pill[aria-expanded="true"]::before,
.queue-action:hover::before,
.queue-action:focus-visible::before,
.queue-row-action:hover::before,
.queue-row-action:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}
.queue-pill > svg,
.queue-action > svg,
.queue-row-action > svg { position: relative; z-index: 1; }
.queue-pill:hover,
.queue-pill:focus-visible,
.queue-pill[aria-expanded="true"] {
  color: #f4ead0;
  border-color: rgba(244, 234, 208, 0.62);
  background: transparent;
  outline: none;
}
.queue-pill:active { transform: scale(0.94); }

.queue-sheet {
  position: fixed;
  z-index: 78;
  left: 0;
  right: 0;
  bottom: var(--app-player-height);
  width: 100%;
  height: var(--queue-panel-height);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--kh-bg, #6b0e16);
  color: #f4ead0;
  overflow: hidden;
  font-family: Inter, sans-serif;
  animation: queue-sheet-in 200ms cubic-bezier(.2,.8,.2,1);
}
@keyframes queue-sheet-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.queue-sheet.is-closing {
  pointer-events: none;
  animation: queue-sheet-out 180ms cubic-bezier(.4,0,1,1) both;
}
@keyframes queue-sheet-out {
  from { transform: translateY(0); }
  to { transform: translateY(100%); }
}
.queue-sheet-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 48px;
  padding: 8px 14px 2px;
}
.queue-action {
  appearance: none;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(244, 234, 208, 0.24);
  border-radius: 50%;
  background: transparent;
  color: rgba(244, 234, 208, 0.58);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease, opacity 120ms ease, transform 120ms ease;
}
.queue-tools { display: flex; align-items: center; gap: 4px; }
.queue-action:hover,
.queue-action:focus-visible {
  color: #f4ead0;
  border-color: rgba(244, 234, 208, 0.48);
  background: transparent;
  outline: none;
}
.queue-action:disabled { opacity: 0.24; cursor: default; }
.queue-action:active:not(:disabled) { transform: scale(0.92); }
.queue-action svg { width: 16px; height: 16px; }
.queue-list {
  width: min(760px, 100%);
  margin: 0 auto;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(244,234,208,.32) transparent;
  padding: clamp(12px, 2.5vh, 26px) 16px calc(16px + env(safe-area-inset-bottom));
}
.queue-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  margin: 0 auto 4px;
  padding: 8px 12px;
  border-radius: 6px;
  touch-action: pan-y;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1), background-color 140ms ease, opacity 140ms ease;
}
.queue-row:not(.is-current) { cursor: grab; user-select: none; -webkit-user-select: none; }
.queue-row.is-pressing { background: rgba(244, 234, 208, 0.07); transform: scale(0.992); }
.queue-row.is-dragging {
  cursor: grabbing;
  z-index: 1;
  opacity: 0.88;
  background: rgba(244, 234, 208, 0.14);
  pointer-events: none;
  transform: translateY(var(--queue-drag-y, 0));
  transition: background-color 140ms ease, opacity 140ms ease;
  will-change: transform;
}
.queue-row.is-current { background: rgba(244, 234, 208, 0.055); }
.queue-current-dot { color: rgba(244, 234, 208, 0.54); font-size: 8px; text-align: center; }
.queue-copy { min-width: 0; }
.queue-song-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 400 28px/1.14 "EB Garamond", Georgia, serif;
}
.queue-credit { margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(244, 234, 208, 0.58); font: 400 13px/1.25 Inter, sans-serif; }
.queue-drag-handle {
  appearance: none;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(244, 234, 208, 0.42);
}
.queue-drag-handle { cursor: grab; touch-action: pan-y; font: 500 18px/1 Inter, sans-serif; letter-spacing: -4px; transition: color 140ms ease, opacity 120ms ease; }
.queue-drag-handle:active { cursor: grabbing; }
.queue-drag-handle:hover,
.queue-drag-handle:focus-visible { color: #f4ead0; outline: none; }
.queue-row-actions { display: flex; align-items: center; gap: 6px; }
.queue-row-action {
  appearance: none;
  width: 42px;
  height: 42px;
  aspect-ratio: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(244, 234, 208, 0.22);
  border-radius: 50%;
  background: transparent;
  color: rgba(244, 234, 208, 0.58);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease, opacity 120ms ease, transform 120ms ease;
}
.queue-row-action:hover,
.queue-row-action:focus-visible { color: #f4ead0; border-color: rgba(244, 234, 208, 0.52); background: transparent; outline: none; }
.queue-row-action:active { transform: scale(0.92); }
.queue-empty { padding: 36px 22px; color: rgba(244, 234, 208, 0.68); text-align: center; font: 400 17px/1.4 "Cormorant Garamond", Georgia, serif; }

.app-status {
  position: fixed;
  z-index: 120;
  left: 50%;
  bottom: calc(var(--app-player-height) + 44px);
  max-width: min(420px, calc(100vw - 32px));
  transform: translateX(-50%);
  padding: 7px 11px;
  border: 1px solid rgba(244, 234, 208, 0.28);
  border-radius: 999px;
  background: var(--kh-bg, #6b0e16);
  color: #f4ead0;
  font: 500 10px/1.3 Inter, sans-serif;
  pointer-events: none;
}

@media (max-width: 600px) {
  :root { --queue-panel-height: min(60dvh, 560px); }
  .queue-sheet {
    width: 100%;
    height: var(--queue-panel-height);
  }
  .queue-list { padding: 10px 8px calc(14px + env(safe-area-inset-bottom)); }
  .queue-pill { width: 36px; height: 36px; flex-basis: 36px; }
  .queue-row { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 4px; min-height: 72px; padding: 7px 2px; }
  .queue-song-title { font-size: 25px; }
  .queue-credit { font-size: 13px; }
  .queue-drag-handle { width: 38px; height: 44px; font-size: 18px; }
  .queue-row-action { width: 44px; height: 44px; }
  .queue-sheet-tools { min-height: 48px; padding: 6px 10px 0; }
  .queue-action { width: 36px; height: 36px; font-size: 12px; }
}

@media (min-width: 601px) and (max-width: 1100px) {
  .queue-pill { width: 42px; height: 42px; flex-basis: 42px; }
  .queue-row { grid-template-columns: 48px minmax(0, 1fr) auto; min-height: 98px; padding: 13px 16px; }
  .queue-song-title { font-size: 31px; }
  .queue-credit { font-size: 14px; }
  .queue-drag-handle { width: 46px; height: 46px; font-size: 21px; }
  .queue-row-action { width: 46px; height: 46px; }
  .queue-action { width: 38px; height: 38px; font-size: 13px; }
}

@media (min-width: 1101px) and (max-width: 1799px) {
  .queue-pill { width: 42px; height: 42px; flex-basis: 42px; }
  .queue-row { grid-template-columns: 48px minmax(0, 1fr) auto; min-height: 100px; padding: 14px 18px; }
  .queue-song-title { font-size: 32px; }
  .queue-credit { font-size: 14px; }
  .queue-drag-handle { width: 46px; height: 46px; font-size: 21px; }
  .queue-row-action { width: 46px; height: 46px; }
  .queue-action { width: 38px; height: 38px; font-size: 13px; }
}

@media (min-width: 1101px) {
  body.queue-open { overflow: visible; }
  body.queue-open .app-stage {
    transform: translateX(calc(-1 * var(--queue-panel-shift)));
  }
  body.queue-open .audio-player { transform: none; }
  .line-source { transition: transform 200ms cubic-bezier(.2,.8,.2,1); }
  .line-roman { transition: transform 170ms cubic-bezier(.2,.8,.2,1); }
  .line-english { transition: transform 215ms cubic-bezier(.2,.8,.2,1); }
  body.queue-open .line-source { transform: translateX(-7px); }
  body.queue-open .line-roman { transform: translateX(-13px); }
  body.queue-open .line-english { transform: translateX(-4px); }
  .queue-sheet {
    top: 0;
    right: 0;
    bottom: var(--app-player-height);
    left: auto;
    width: var(--queue-panel-width);
    height: auto;
    border-left: 1px solid rgba(244, 234, 208, 0.16);
    animation: queue-sheet-in-right 200ms cubic-bezier(.2,.8,.2,1);
  }
  .queue-sheet.is-closing {
    animation: queue-sheet-out-right 180ms cubic-bezier(.4,0,1,1) both;
  }
  .queue-list { width: 100%; }
  @keyframes queue-sheet-in-right {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
  }
  @keyframes queue-sheet-out-right {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
  }
}

@media (min-width: 1800px) {
  :root { --queue-panel-height: min(60dvh, 1000px); }
  .queue-pill { width: 52px; height: 52px; flex-basis: 52px; }
  .queue-list { width: min(980px, 100%); }
  .queue-sheet-tools { padding: 22px 26px; }
  .queue-credit { font-size: 18px; }
  .queue-row { min-height: 124px; padding: 18px 26px; grid-template-columns: 60px minmax(0, 1fr) auto; }
  .queue-song-title { font-size: 40px; }
  .queue-drag-handle { width: 54px; height: 54px; font-size: 25px; }
  .queue-row-action { width: 54px; height: 54px; }
  .queue-action { width: 44px; height: 44px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .queue-sheet,
  .queue-sheet.is-closing,
  .app-view-in-left,
  .app-view-out-right,
  .app-view-in-right,
  .app-view-out-left { animation: none; }
  .app-stage,
  .audio-player { transition: none; }
  .line-source,
  .line-roman,
  .line-english,
  .app-view-in-right .line-source,
  .app-view-in-right .line-roman,
  .app-view-in-right .line-english,
  .app-view-out-right .line-source,
  .app-view-out-right .line-roman,
  .app-view-out-right .line-english {
    animation: none;
    transition: none;
    transform: none;
  }
  .queue-row { transition: none; }
  .queue-pill,
  .queue-action,
  .queue-row-action,
  .queue-drag-handle,
  .queue-pill::before,
  .queue-action::before,
  .queue-row-action::before { transition: none; }
}