/* P3-010A: one quiet player in paper and fullscreen contexts. */
.music-player {
  --music-ink: var(--aper-ui-ink, #221d16);
  --music-muted: var(--aper-ui-muted, #756d61);
  --music-paper: var(--aper-ui-paper, #f4efe7);
  --music-red: var(--aper-ui-accent, #b0482e);
  --music-gutter: var(--aper-ui-gutter, var(--aper-page-gutter, 120px));
  --music-scale: 1;
  position: fixed;
  z-index: 70;
  right: var(--music-gutter);
  /* The measured footer height already includes its bottom safe-area padding. */
  bottom: calc(var(--aper-ui-footer-height, 39px) + 26px);
  display: flex;
  align-items: center;
  gap: calc(7px * var(--music-scale));
  min-height: calc(30px * var(--music-scale));
  max-width: calc(100vw - 2 * var(--music-gutter));
  padding: 3px 0;
  color: var(--music-ink);
  background: var(--music-paper);
  white-space: nowrap;
  user-select: none;
  font-family: var(--aper-font-ui, "Helvetica Neue", Arial, sans-serif);
}
.music-player[hidden] { display: none; }
/* A player dragged to the top edge must stay reachable above the sticky header. */
.music-player[data-context="paper"][data-draggable="true"] { z-index: 1031; }
.music-player button {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: calc(24px * var(--music-scale));
  min-height: calc(24px * var(--music-scale));
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: 300 calc(11px * var(--music-scale))/1 var(--aper-font-ui, "Helvetica Neue", Arial, sans-serif);
  opacity: .62;
  cursor: pointer;
}
.music-player button:hover, .music-player button:focus-visible { opacity: 1; }
.music-player button:disabled { cursor: default; opacity: .3; }
.music-player button[aria-pressed="true"] { color: var(--music-red); }
.music-player__sound-off, .music-player[data-muted="true"] .music-player__sound-waves { display: none; }
.music-player[data-muted="true"] .music-player__sound-off { display: initial; }
.music-player :focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.music-player__metadata {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 26px;
}
.music-player__title {
  display: block;
  min-width: 0;
  max-width: 118px;
  overflow: hidden;
  color: inherit;
  font-size: calc(9px * var(--music-scale));
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: .5px;
  text-overflow: ellipsis;
  opacity: .55;
}
.music-player[data-draggable="true"] .music-player__title { cursor: grab; touch-action: none; }
.music-player.is-dragging .music-player__title { cursor: grabbing; }
.music-player input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  min-width: 12px;
  width: 52px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}
.music-player input[type="range"]:disabled { cursor: default; }
.music-player input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(to right, var(--music-red) 0 var(--music-progress, 0%), color-mix(in srgb, var(--music-ink) 20%, transparent) var(--music-progress, 0%) 100%);
}
.music-player input[type="range"]::-moz-range-track { height: 2px; background: color-mix(in srgb, var(--music-ink) 20%, transparent); }
.music-player input[type="range"]::-moz-range-progress { height: 2px; background: var(--music-red); }
.music-player input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 6px;
  height: 6px;
  margin-top: -2px;
  border: 0;
  border-radius: 50%;
  background: var(--music-red);
  opacity: 0;
}
.music-player input[type="range"]::-moz-range-thumb { width: 6px; height: 6px; border: 0; border-radius: 50%; background: var(--music-red); opacity: 0; }
.music-player input[type="range"]:not(:disabled):is(:hover, :focus-visible)::-webkit-slider-thumb { opacity: 1; }
.music-player input[type="range"]:not(:disabled):is(:hover, :focus-visible)::-moz-range-thumb { opacity: 1; }
.music-player__time { color: var(--music-muted); font-size: 8.5px; font-weight: 300; line-height: 1; letter-spacing: .5px; }
.music-player__volume-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 7px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  color: var(--music-ink);
  background: var(--music-paper);
  border: 1px solid color-mix(in srgb, var(--music-ink) 18%, transparent);
}
.music-player__volume-panel[hidden] { display: none; }
.music-player[data-volume-below="true"] .music-player__volume-panel { top: calc(100% + 7px); bottom: auto; }
.music-player__volume-panel input[type="range"] { width: 80px; }
.music-player__status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.music-player[data-context="viewer"], .music-player[data-context="fullscreen"] { bottom: var(--aper-ui-chrome-bottom, calc(env(safe-area-inset-bottom, 0px) + 24px)); }
.music-player[data-context="fullscreen"] { --music-ink: #f4efe7; --music-muted: rgba(244, 239, 231, .68); background: transparent; }
.music-player[data-context="fullscreen"] .music-player__volume-panel { --music-paper: #221d16; }
.music-player[data-controls-visible="false"] { visibility: hidden; opacity: 0; pointer-events: none; }
@media (min-width: 701px) and (max-width: 1200px) {
  .music-player { --music-scale: 1.12; --music-gutter: var(--aper-ui-gutter, var(--aper-page-gutter, 44px)); }
}
@media (max-width: 700px) {
  .music-player {
    --music-gutter: var(--aper-ui-gutter, var(--aper-page-gutter, 18px));
    left: var(--music-gutter);
    right: var(--music-gutter);
    bottom: calc(var(--aper-ui-footer-height, 44px) + 26px);
    gap: 6px;
  }
  .music-player__metadata { flex: 1; gap: 6px; }
  .music-player__title { max-width: 90px; flex: 0 1 auto; }
  .music-player__progress { flex: 1 1 30px; }
  .music-player[data-context="viewer"], .music-player[data-context="fullscreen"] {
    display: grid;
    grid-template-columns: repeat(4, 24px) minmax(0, 1fr) 24px;
    gap: 2px 2px;
    left: auto;
    width: min(50vw, 180px);
    max-width: 50vw;
    min-height: 0;
    bottom: var(--aper-ui-chrome-bottom, calc(env(safe-area-inset-bottom, 0px) + 12px));
  }
  .music-player[data-context="viewer"] .music-player__metadata, .music-player[data-context="fullscreen"] .music-player__metadata { grid-row: 2; grid-column: 1/-1; min-height: 16px; width: 100%; }
  .music-player[data-context="viewer"] .music-player__time, .music-player[data-context="fullscreen"] .music-player__time { grid-row: 1; grid-column: 5; justify-self: end; font-size: 8px; }
  .music-player[data-context="viewer"] .music-player__volume-toggle, .music-player[data-context="fullscreen"] .music-player__volume-toggle { grid-row: 1; grid-column: 6; }
  .music-player[data-context="viewer"] .music-player__title, .music-player[data-context="fullscreen"] .music-player__title { max-width: 110px; }
}
@media (max-width: 940px) and (orientation: landscape) and (max-height: 520px) {
  .music-player { --music-scale: 1; --music-gutter: var(--aper-ui-gutter, var(--aper-page-gutter, 22px)); left: auto; bottom: var(--aper-ui-chrome-bottom, calc(env(safe-area-inset-bottom, 0px) + 8px)); gap: 4px; }
  .music-player__title { max-width: 72px; }
  .music-player input.music-player__progress { width: 30px; }
}