/* QuestShift FM (fm-player.js): a full-monitor player in the QuestShift
   palette — deep void navy, glass panels, teal into periwinkle. Shared by
   Justin's desk monitor and the public office's monitor, which the build
   copies it into. */
.fm{
  --fm-void:#0A0E1A; --fm-ink:#E9ECF2; --fm-dim:#8590A6; --fm-faint:#4A556A;
  --fm-teal:#5EC8B8; --fm-peri:#9AA6FF; --fm-glass:rgba(20,27,43,.55); --fm-line:rgba(154,166,255,.12);
  --fm-grad:linear-gradient(135deg, var(--fm-teal), var(--fm-peri));
  --beat:0;
  position:relative; isolation:isolate; overflow:hidden;
  flex:1; min-width:0; min-height:0; display:flex; container-type:size;
  color:var(--fm-ink); background:var(--fm-void);
  font:14px/1.4 "Sora", system-ui, sans-serif; -webkit-font-smoothing:antialiased;
}
.fm:fullscreen{ width:100vw; height:100vh; }
.fm-shell{ flex:1; min-width:0; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,340px); }
.fm button{ font:inherit; color:inherit; cursor:var(--cur-pointer); }
.fm :is(h2,h3,p){ margin:0; }
.fm .sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Slow drifting colour behind everything, brighter on the beat. */
.fm-aura{ position:absolute; inset:-20%; z-index:-1; filter:blur(70px); opacity:calc(.55 + var(--beat) * .35); pointer-events:none; }
.fm-aura i{ position:absolute; width:46%; aspect-ratio:1; border-radius:50%; animation:fm-drift 22s ease-in-out infinite alternate; }
.fm-aura i:nth-child(1){ left:8%; top:10%; background:rgba(94,200,184,.32); }
.fm-aura i:nth-child(2){ right:10%; top:30%; background:rgba(154,166,255,.30); animation-duration:28s; animation-delay:-6s; }
.fm-aura i:nth-child(3){ left:30%; bottom:4%; background:rgba(62,75,140,.45); animation-duration:34s; animation-delay:-12s; }
.fm[data-state="stop"] .fm-aura{ opacity:.35; }

.fm-stage{
  min-width:0; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:safe center;
  gap:clamp(10px, 2.2cqh, 22px); padding:clamp(16px, 3cqh, 32px) clamp(16px, 4cqw, 48px); overflow:auto;
}
.fm-stage > *{ max-width:100%; }
.fm-top{ align-self:stretch; display:flex; align-items:center; gap:12px; }
.fm-brand{ display:flex; align-items:center; gap:9px; font-weight:600; font-size:15px; letter-spacing:.2px; }
.fm-brand b{ font-weight:600; background:var(--fm-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.fm-brand em{ font-style:normal; font-size:10px; font-weight:700; letter-spacing:1.5px; padding:2px 6px; border-radius:999px; color:var(--fm-void); background:var(--fm-grad); }
.fm-mark{ display:grid; place-items:center; width:28px; height:28px; border-radius:9px; font-weight:700; color:var(--fm-void); background:var(--fm-ink); box-shadow:inset -4px 0 0 var(--fm-teal); }
.fm-onair{ margin-left:auto; display:flex; align-items:center; gap:7px; font-size:11px; font-weight:500; letter-spacing:1.2px; text-transform:uppercase; color:var(--fm-dim); }
.fm-onair i{ width:7px; height:7px; border-radius:50%; background:var(--fm-faint); }
.fm[data-state="play"] .fm-onair{ color:var(--fm-teal); }
.fm[data-state="play"] .fm-onair i{ background:var(--fm-teal); box-shadow:0 0 0 0 rgba(94,200,184,.6); animation:fm-ping 1.6s ease-out infinite; }

.fm-art{ position:relative; width:min(40cqh, 100%, 380px); aspect-ratio:1; flex:none; display:grid; place-items:center; }
.fm-vis{ position:absolute; inset:0; width:100%; height:100%; }
.fm-disc{
  position:relative; width:64%; aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
  background:
    radial-gradient(circle at 50% 50%, #0A0E1A 0 15%, transparent 15.5%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.035) 0 1px, transparent 1px 4px),
    conic-gradient(from 210deg, #1B2540, #2B3D6B, #1E4F58, #1B2540 60%, #2B2F5E, #1B2540);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(154,166,255,.18), 0 0 calc(30px + var(--beat) * 60px) rgba(94,200,184,calc(.15 + var(--beat) * .35));
  scale:calc(1 + var(--beat) * .03);
  transition:scale .08s linear;
  animation:fm-spin 18s linear infinite; animation-play-state:paused;
}
.fm[data-state="play"] .fm-disc{ animation-play-state:running; }
.fm-disc::after{ content:""; position:absolute; inset:0; border-radius:50%; background:linear-gradient(135deg, rgba(255,255,255,.14), transparent 45%); }
.fm-disc-q{ font-weight:700; font-size:clamp(18px, 4cqh, 34px); background:var(--fm-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

.fm-meta{ text-align:center; max-width:100%; min-width:0; }
.fm-meta small{ font-size:11px; letter-spacing:1.4px; text-transform:uppercase; color:var(--fm-teal); }
.fm-meta h2{ margin-top:6px; font-size:clamp(18px, 3.2cqh, 28px); font-weight:600; line-height:1.2; letter-spacing:-.3px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.fm-meta p{ margin-top:4px; font-size:13px; color:var(--fm-dim); }

.fm input[type="range"]{
  --fill:0%;
  -webkit-appearance:none; appearance:none; display:block; width:100%; height:18px; margin:0; background:transparent; cursor:var(--cur-pointer);
}
.fm input[type="range"]::-webkit-slider-runnable-track{
  height:5px; border-radius:999px;
  background:linear-gradient(90deg, var(--fm-teal), var(--fm-peri)) 0 0 / var(--fill) 100% no-repeat, rgba(233,236,242,.12);
}
.fm input[type="range"]::-moz-range-track{ height:5px; border-radius:999px; background:rgba(233,236,242,.12); }
.fm input[type="range"]::-moz-range-progress{ height:5px; border-radius:999px; background:var(--fm-grad); }
.fm input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:14px; margin-top:-4.5px; border-radius:50%; border:0;
  background:var(--fm-ink); box-shadow:0 2px 8px rgba(0,0,0,.5); transform:scale(0); transition:transform .15s;
}
.fm input[type="range"]::-moz-range-thumb{ width:14px; height:14px; border:0; border-radius:50%; background:var(--fm-ink); }
.fm input[type="range"]:is(:hover,:focus-visible,:active)::-webkit-slider-thumb{ transform:scale(1); }
.fm input[type="range"]:focus-visible{ outline:none; }

.fm-progress{ width:min(100%, 520px); display:grid; grid-template-columns:44px 1fr 44px; align-items:center; gap:10px; font:500 11px/1 "JetBrains Mono", monospace; color:var(--fm-dim); font-variant-numeric:tabular-nums; }
.fm-progress > span:last-child{ text-align:right; }

.fm-controls{ display:flex; align-items:center; gap:clamp(10px, 2cqw, 22px); }
.fm-icon{
  display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:50%;
  background:transparent; color:var(--fm-dim); transition:color .15s, background .15s, transform .1s;
}
.fm-icon svg{ width:20px; height:20px; }
.fm-icon svg:not([fill]){ fill:currentColor; }
.fm-icon:hover, .fm-icon:focus-visible{ color:var(--fm-ink); background:rgba(233,236,242,.08); outline:none; }
.fm-icon:active{ transform:scale(.92); }
.fm-skip{ width:46px; height:46px; color:var(--fm-ink); }
.fm-skip svg{ width:26px; height:26px; }
.fm-mode[aria-pressed="true"]{ color:var(--fm-teal); }
.fm-mode{ position:relative; }
.fm-mode[aria-pressed="true"]::after{ content:""; position:absolute; left:50%; bottom:1px; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:var(--fm-teal); }
.fm-play{
  display:grid; place-items:center; width:68px; height:68px; padding:0; border:0; border-radius:50%;
  background:var(--fm-ink);
  box-shadow:0 10px 30px -6px rgba(94,200,184,.55), 0 0 0 calc(var(--beat) * 10px) rgba(94,200,184,.12);
  transition:transform .12s, box-shadow .08s linear;
}
.fm .fm-play{ color:var(--fm-void); }
.fm-play svg{ width:30px; height:30px; fill:currentColor; }
.fm-play[data-playing="false"] svg{ margin-left:3px; }
.fm-play:hover{ transform:scale(1.05); }
.fm-play:active{ transform:scale(.96); }
.fm-play:focus-visible{ outline:2px solid var(--fm-teal); outline-offset:4px; }
.fm-volume{ display:flex; align-items:center; gap:6px; width:min(100%, 220px); }
.fm-volume label{ flex:1; }

.fm-queue{
  min-width:0; min-height:0; display:flex; flex-direction:column;
  background:var(--fm-glass); border-left:1px solid var(--fm-line);
  -webkit-backdrop-filter:blur(24px) saturate(1.3); backdrop-filter:blur(24px) saturate(1.3);
}
.fm-queue-head{ display:flex; align-items:center; gap:10px; padding:20px 18px 12px; }
.fm-queue-head div{ flex:1; min-width:0; }
.fm-queue-head h3{ font-size:15px; font-weight:600; }
.fm-queue-head small{ font-size:11px; color:var(--fm-dim); }
.fm.is-loading [data-fm-act="reload"] svg{ animation:fm-spin .8s linear infinite; }
.fm-tracks{ list-style:none; margin:0; padding:0 8px 16px; flex:1; min-height:0; overflow:auto; }
.fm-tracks li{
  display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:10px;
  padding:10px; border-radius:10px; cursor:var(--cur-pointer); transition:background .15s;
}
.fm-tracks li:hover{ background:rgba(233,236,242,.05); }
.fm-tracks li[aria-selected="true"]{ background:rgba(154,166,255,.1); }
.fm-tracks li:focus-visible{ outline:1px solid var(--fm-peri); outline-offset:-1px; }
.fm-row-num{ display:grid; place-items:center; font:500 12px/1 "JetBrains Mono", monospace; color:var(--fm-dim); }
.fm-row-num > *{ grid-area:1 / 1; }
.fm-row-title{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.fm-row-time{ font:12px/1 "JetBrains Mono", monospace; color:var(--fm-dim); font-variant-numeric:tabular-nums; }
.fm-tracks li.is-current .fm-row-title{ color:var(--fm-teal); font-weight:600; }
.fm-eq-mini{ display:none; align-items:flex-end; gap:2px; height:12px; }
.fm-eq-mini i{ width:3px; height:100%; border-radius:1px; background:var(--fm-teal); transform-origin:bottom; animation:fm-bar .9s ease-in-out infinite alternate; }
.fm-eq-mini i:nth-child(2){ animation-delay:-.3s; }
.fm-eq-mini i:nth-child(3){ animation-delay:-.6s; }
.fm[data-state="play"] .fm-tracks li.is-current .fm-eq-mini{ display:flex; }
.fm[data-state="play"] .fm-tracks li.is-current .fm-row-num > span:first-child{ visibility:hidden; }
.fm-tracks .fm-empty{ display:block; padding:16px 10px; color:var(--fm-dim); font-size:13px; cursor:default; }

@keyframes fm-drift{ to{ transform:translate(12%, -10%) scale(1.15); } }
@keyframes fm-spin{ to{ transform:rotate(360deg); } }
@keyframes fm-ping{ to{ box-shadow:0 0 0 8px rgba(94,200,184,0); } }
@keyframes fm-bar{ from{ transform:scaleY(.25); } to{ transform:scaleY(1); } }
@container (max-width:720px){
  .fm-shell{ grid-template-columns:minmax(0,1fr); grid-template-rows:max-content max-content; overflow:auto; }
  .fm-stage{ overflow:visible; }
  .fm-queue{ border-left:0; border-top:1px solid var(--fm-line); }
  .fm-art{ width:min(70cqw, 300px); }
}
@container (max-height:560px){
  .fm-stage{ gap:8px; padding-block:14px; }
  .fm-meta h2{ -webkit-line-clamp:1; }
  .fm-play{ width:56px; height:56px; }
}
@media (prefers-reduced-motion:reduce){ .fm-aura i, .fm-disc, .fm-eq-mini i, .fm-onair i{ animation:none !important; } }