/* ============================================================================
   SOUNDS OF WESTPORT — music player (dock + drawer). Loaded only on pages that
   load js/music-player.js. Colors/shape come from the Coastal kit tokens
   (css/coastal.css); everything here is prefixed mp- so it can never collide
   with ce- primitives. Dark "theater chrome" language on purpose — it matches
   the webcams theater UI and reads as a player, not a page.
   z-order contract: dock 9990 (under the mobile bottom nav's 9999, but offset
   above it vertically), drawer 10020 (over the nav while open).
   ========================================================================== */

/* ---- Dock: floating glass pill, appears once a session exists ---- */
.mp-dock{position:fixed;right:18px;bottom:18px;z-index:9990;display:flex;align-items:center;gap:10px;
  width:min(420px,calc(100vw - 24px));padding:10px 12px;
  background:color-mix(in srgb, var(--ce-navy) 94%, transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid var(--ce-glass-dark-border);border-radius:999px;
  box-shadow:var(--ce-shadow-float);color:var(--ce-mist-soft);font-family:var(--ce-font-body);
  transform:translateY(140%);opacity:0;transition:transform .45s cubic-bezier(.22,.9,.3,1),opacity .35s;}
.mp-dock.is-in{transform:none;opacity:1;}
.mp-dock[hidden]{display:none;}
.mp-dock__art{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:1px solid color-mix(in srgb, var(--ce-peach) 35%, transparent);}
.mp-dock.is-playing .mp-dock__art{animation:mp-spin 14s linear infinite;}
@keyframes mp-spin{to{transform:rotate(360deg)}}
.mp-dock__meta{flex:1;min-width:0;text-align:left;background:none;border:0;padding:0;margin:0;
  color:inherit;font:inherit;cursor:pointer;}
.mp-dock__title{display:block;font-weight:600;font-size:13.5px;line-height:1.25;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.mp-dock__sub{display:flex;align-items:center;gap:7px;color:var(--ce-mist-2);font-size:11.5px;white-space:nowrap;
  overflow:hidden;}
.mp-dock__btn{display:grid;place-items:center;width:38px;height:38px;flex-shrink:0;border:0;cursor:pointer;
  border-radius:50%;background:color-mix(in srgb, var(--ce-mist-soft) 12%, transparent);color:var(--ce-mist-soft);transition:background .2s;}
.mp-dock__btn:hover,.mp-dock__btn:focus-visible{background:color-mix(in srgb, var(--ce-teal) 55%, transparent);}
.mp-dock__btn:focus-visible{outline:none;box-shadow:var(--ce-focus-ring);}
.mp-dock__btn--play{width:44px;height:44px;background:var(--ce-coral);color:#fff;
  box-shadow:0 6px 18px var(--ce-glow-coral);}
.mp-dock__btn--play:hover,.mp-dock__btn--play:focus-visible{background:var(--ce-coral-hot);}
.mp-dock__btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
.mp-dock__btn--play svg{width:19px;height:19px;fill:currentColor;stroke:none;}
/* hairline progress along the pill's top edge */
.mp-dock__progress{position:absolute;top:0;left:24px;right:24px;height:2px;border-radius:2px;
  background:color-mix(in srgb, var(--ce-mist-soft) 16%, transparent);overflow:hidden;}
.mp-dock__progress i{display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--ce-teal),var(--ce-teal-sky));}

/* dismiss badge — small × riding the pill's top-right edge. Ends the session. */
.mp-dock__x{position:absolute;top:-8px;right:6px;width:22px;height:22px;display:grid;
  place-items:center;padding:0;border:1px solid var(--ce-glass-dark-border);border-radius:50%;
  background:color-mix(in srgb, var(--ce-navy) 96%, transparent);color:var(--ce-mist-2);cursor:pointer;transition:background .2s,color .2s;}
.mp-dock__x:hover,.mp-dock__x:focus-visible{background:var(--ce-coral);color:#fff;}
.mp-dock__x:focus-visible{outline:none;box-shadow:var(--ce-focus-ring);}
.mp-dock__x svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2.5;
  stroke-linecap:round;}

/* ---- Mini state: the pill collapses into the spinning-art bubble ---- */
.mp-dock.is-mini{width:58px;height:58px;padding:0;gap:0;justify-content:center;}
.mp-dock.is-mini .mp-dock__meta,.mp-dock.is-mini .mp-dock__btn,
.mp-dock.is-mini .mp-dock__progress,.mp-dock.is-mini .mp-dock__x{display:none;}
.mp-dock.is-mini .mp-dock__art{width:48px;height:48px;}
.mp-dock__restore{display:none;position:absolute;inset:0;border:0;border-radius:999px;
  background:none;cursor:pointer;padding:0;}
.mp-dock.is-mini .mp-dock__restore{display:block;}
.mp-dock__restore:focus-visible{outline:none;box-shadow:var(--ce-focus-ring);}
/* paused bubble wears a tiny coral play badge so resume stays discoverable */
.mp-dock__minibadge{display:none;position:absolute;right:-3px;bottom:-3px;width:21px;height:21px;
  place-items:center;border-radius:50%;background:var(--ce-coral);color:#fff;
  box-shadow:0 4px 12px var(--ce-glow-coral);pointer-events:none;}
.mp-dock.is-mini:not(.is-playing) .mp-dock__minibadge{display:grid;}
.mp-dock__minibadge svg{width:9px;height:9px;fill:currentColor;stroke:none;margin-left:1px;}

/* live equalizer glyph (dock + active playlist row) */
.mp-eq{display:inline-flex;align-items:flex-end;gap:2px;height:11px;flex-shrink:0;}
.mp-eq i{width:2.5px;border-radius:2px;background:var(--ce-teal-sky);height:4px;}
.is-playing .mp-eq i{animation:mp-eq .9s ease-in-out infinite;}
.mp-eq i:nth-child(2){animation-delay:.2s;}
.mp-eq i:nth-child(3){animation-delay:.45s;}
.mp-eq i:nth-child(4){animation-delay:.65s;}
@keyframes mp-eq{0%,100%{height:4px}50%{height:11px}}

/* ---- Drawer: slide-in panel (right on desktop, bottom sheet on mobile) ---- */
.mp-drawer{position:fixed;top:0;right:0;bottom:0;z-index:10020;width:min(408px,100vw);
  display:flex;flex-direction:column;color:var(--ce-mist-soft);font-family:var(--ce-font-body);
  background:linear-gradient(180deg,color-mix(in srgb, var(--ce-navy) 97%, transparent),rgba(3,8,15,.98));
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border-left:1px solid var(--ce-glass-dark-border);box-shadow:-18px 0 48px rgba(3,8,15,.5);
  transform:translateX(105%);transition:transform .45s cubic-bezier(.22,.9,.3,1);
  visibility:hidden;}
.mp-drawer.is-open{transform:none;visibility:visible;}
.mp-drawer__scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:18px 22px 26px;
  scrollbar-width:thin;scrollbar-color:rgba(111,211,224,.35) transparent;}

.mp-drawer__head{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.mp-kicker{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ce-peach);}
.mp-drawer__close{margin-left:auto;display:grid;place-items:center;width:38px;height:38px;border:0;
  cursor:pointer;border-radius:50%;background:color-mix(in srgb, var(--ce-mist-soft) 12%, transparent);color:var(--ce-mist-soft);}
.mp-drawer__close:hover,.mp-drawer__close:focus-visible{background:color-mix(in srgb, var(--ce-teal) 55%, transparent);}
.mp-drawer__close:focus-visible{outline:none;box-shadow:var(--ce-focus-ring);}
.mp-drawer__close svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;}

.mp-now{display:flex;flex-direction:column;align-items:center;text-align:center;}
.mp-now__art{width:min(228px,58vw);aspect-ratio:1;border-radius:18px;object-fit:cover;
  border:1px solid color-mix(in srgb, var(--ce-peach) 28%, transparent);box-shadow:0 18px 44px rgba(3,8,15,.6),0 0 60px var(--ce-glow-teal);}
.mp-now__title{font-family:var(--ce-font-display);font-size:23px;line-height:1.2;margin:16px 0 4px;}
.mp-now__artist{color:var(--ce-mist-2);font-size:13.5px;}
.mp-now__mood{color:var(--ce-teal-sky);font-size:12px;margin-top:3px;letter-spacing:.02em;}

/* seek + times */
.mp-seek{width:100%;margin-top:16px;}
.mp-times{display:flex;justify-content:space-between;color:var(--ce-mist-2);font-size:11.5px;
  font-variant-numeric:tabular-nums;margin-top:2px;}
.mp-range{-webkit-appearance:none;appearance:none;width:100%;height:20px;background:none;cursor:pointer;}
.mp-range::-webkit-slider-runnable-track{height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--ce-teal) var(--mp-fill,0%),color-mix(in srgb, var(--ce-mist-soft) 18%, transparent) var(--mp-fill,0%));}
.mp-range::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;
  background:var(--ce-mist-soft);margin-top:-5px;box-shadow:0 0 0 4px color-mix(in srgb, var(--ce-teal) 35%, transparent);}
.mp-range::-moz-range-track{height:4px;border-radius:4px;background:color-mix(in srgb, var(--ce-mist-soft) 18%, transparent);}
.mp-range::-moz-range-progress{height:4px;border-radius:4px;background:var(--ce-teal);}
.mp-range::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--ce-mist-soft);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--ce-teal) 35%, transparent);}
.mp-range:focus-visible{outline:none;}
.mp-range:focus-visible::-webkit-slider-thumb{box-shadow:var(--ce-focus-ring);}

/* transport */
.mp-transport{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:10px;}
.mp-tbtn{display:grid;place-items:center;width:42px;height:42px;border:0;cursor:pointer;border-radius:50%;
  background:none;color:var(--ce-mist);transition:background .2s,color .2s;}
.mp-tbtn:hover,.mp-tbtn:focus-visible{background:color-mix(in srgb, var(--ce-mist-soft) 12%, transparent);color:#fff;}
.mp-tbtn:focus-visible{outline:none;box-shadow:var(--ce-focus-ring);}
.mp-tbtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
.mp-tbtn--mode{width:38px;height:38px;position:relative;}
.mp-tbtn--mode svg{width:16px;height:16px;}
.mp-tbtn--mode[aria-pressed="true"]{color:var(--ce-teal-sky);}
.mp-tbtn--mode[aria-pressed="true"]::after{content:"";position:absolute;bottom:5px;left:50%;
  transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:currentColor;}
.mp-tbtn--mode .mp-rep1{font-size:8px;font-weight:800;position:absolute;top:7px;right:7px;display:none;}
.mp-tbtn--mode.is-one .mp-rep1{display:block;}
.mp-tbtn--play{width:58px;height:58px;background:var(--ce-coral);color:#fff;
  box-shadow:0 10px 26px var(--ce-glow-coral);}
.mp-tbtn--play:hover,.mp-tbtn--play:focus-visible{background:var(--ce-coral-hot);}
.mp-tbtn--play svg{width:23px;height:23px;fill:currentColor;stroke:none;}

/* tabs: up next / lyrics */
.mp-tabs{display:flex;gap:8px;margin:20px 0 10px;}
.mp-tab{flex:1;padding:9px 0;border:0;cursor:pointer;border-radius:999px;font-family:inherit;
  font-size:12.5px;font-weight:600;letter-spacing:.03em;background:color-mix(in srgb, var(--ce-mist-soft) 10%, transparent);color:var(--ce-mist-2);}
.mp-tab[aria-selected="true"]{background:var(--ce-teal);color:#fff;}
.mp-tab:focus-visible{outline:none;box-shadow:var(--ce-focus-ring);}

.mp-list{list-style:none;margin:0;padding:0;}
.mp-list[hidden]{display:none;}
.mp-row{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;cursor:pointer;
  border-radius:12px;background:none;color:var(--ce-mist);text-align:left;font-family:inherit;transition:background .2s;}
.mp-row:hover,.mp-row:focus-visible{background:color-mix(in srgb, var(--ce-mist-soft) 8%, transparent);}
.mp-row:focus-visible{outline:none;box-shadow:var(--ce-focus-ring);}
.mp-row.is-current{background:color-mix(in srgb, var(--ce-teal) 18%, transparent);color:#fff;}
.mp-row__idx{width:18px;text-align:center;color:var(--ce-mist-2);font-size:12px;font-variant-numeric:tabular-nums;flex-shrink:0;}
.mp-row.is-current .mp-row__idx{display:none;}
.mp-row .mp-eq{display:none;width:18px;justify-content:center;}
.mp-row.is-current .mp-eq{display:inline-flex;}
.mp-row__body{flex:1;min-width:0;}
.mp-row__title{display:block;font-size:13.5px;font-weight:600;line-height:1.3;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.mp-row__mood{display:block;font-size:11.5px;color:var(--ce-mist-2);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;}
.mp-row__dur{color:var(--ce-mist-2);font-size:12px;font-variant-numeric:tabular-nums;flex-shrink:0;}

/* lyrics */
.mp-lyrics{padding:2px 6px 8px;font-size:13.5px;line-height:1.75;color:var(--ce-mist);}
.mp-lyrics[hidden]{display:none;}
.mp-lyrics p{margin:0 0 4px;}
.mp-lyrics .mp-lyr-sec{display:inline-block;margin:14px 0 6px;font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ce-peach);}
.mp-lyrics .mp-lyr-dir{color:var(--ce-mist-muted);font-style:italic;font-size:12.5px;}
.mp-lyrics .mp-lyr-none{color:var(--ce-mist-muted);font-style:italic;}

.mp-credit{margin-top:18px;padding-top:14px;border-top:1px solid color-mix(in srgb, var(--ce-mist-soft) 12%, transparent);
  color:var(--ce-mist-muted);font-size:11.5px;line-height:1.6;text-align:center;}

/* volume (pointer devices; phones use hardware volume) */
.mp-vol{display:flex;align-items:center;gap:10px;margin-top:14px;}
.mp-vol svg{width:16px;height:16px;fill:none;stroke:var(--ce-mist-2);stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round;flex-shrink:0;}
@media (hover:none) and (pointer:coarse){.mp-vol{display:none;}}

/* ---- Mobile: bottom sheet + dock riding above the 64px bottom nav ---- */
@media (max-width:760px){
  .mp-dock{right:10px;left:10px;width:auto;bottom:calc(74px + env(safe-area-inset-bottom,0px));}
  .mp-dock.is-mini{left:auto;right:12px;width:58px;}
  .mp-drawer{top:auto;left:0;width:100vw;height:min(88vh,720px);border-left:0;
    border-top:1px solid var(--ce-glass-dark-border);border-radius:22px 22px 0 0;
    transform:translateY(105%);}
  .mp-drawer.is-open{transform:none;}
  .mp-drawer__scroll{padding:14px 18px calc(22px + env(safe-area-inset-bottom,0px));}
  .mp-now__title{font-size:20px;}
}

@media (prefers-reduced-motion:reduce){
  .mp-dock,.mp-drawer{transition:none;}
  .mp-dock.is-playing .mp-dock__art{animation:none;}
  .is-playing .mp-eq i{animation:none;height:7px;}
}