/* --gf-*: the glass of text fields; --g-tick: the tick in a round checkbox (fusion.css and portal.css). */
/* Glass player (kit). Self-contained: the --g-* tokens and the .lg glass are here, so it works on pages
   without fusion.css (the client portal). fusion.css's glass pills read the same tokens.
   Light unless the page or the system says dark; the portal leaves data-theme off until someone picks. */
html:not([data-theme="dark"]){--g-top:rgba(255,255,255,.62);--g-mid:rgba(255,255,255,.34);--g-bot:rgba(255,255,255,.46);
  --g-rim:rgba(255,255,255,.95);--g-edge:rgba(0,0,0,.09);--g-bounce:rgba(255,255,255,.7);--g-spec:#fff;--g-spec2:rgba(255,255,255,.75);
  --g-drop:0 12px 32px -16px rgba(60,40,30,.32),0 2px 6px -3px rgba(60,40,30,.14);
  --g-ink-top:rgba(38,38,38,.86);--g-ink-bot:rgba(38,38,38,.96);--on-ink:#f4f3f1;--glow-o:.42;
  --gf-top:rgba(255,255,255,.86);--gf-bot:rgba(255,255,255,.6);--g-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23f4f3f1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
html[data-theme="dark"]{--g-top:rgba(255,255,255,.14);--g-mid:rgba(255,255,255,.05);--g-bot:rgba(255,255,255,.09);
  --g-rim:rgba(255,255,255,.42);--g-edge:rgba(255,255,255,.07);--g-bounce:rgba(255,255,255,.16);--g-spec:rgba(255,255,255,.75);--g-spec2:rgba(255,255,255,.32);
  --g-drop:0 14px 34px -14px rgba(0,0,0,.7),0 2px 6px -2px rgba(0,0,0,.5);
  --g-ink-top:rgba(233,232,228,.9);--g-ink-bot:rgba(233,232,228,.78);--on-ink:#0e0e0d;--glow-o:.5;
  --gf-top:rgba(255,255,255,.09);--gf-bot:rgba(255,255,255,.035);--g-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230e0e0d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]){--g-top:rgba(255,255,255,.14);--g-mid:rgba(255,255,255,.05);--g-bot:rgba(255,255,255,.09);
  --g-rim:rgba(255,255,255,.42);--g-edge:rgba(255,255,255,.07);--g-bounce:rgba(255,255,255,.16);--g-spec:rgba(255,255,255,.75);--g-spec2:rgba(255,255,255,.32);
  --g-drop:0 14px 34px -14px rgba(0,0,0,.7),0 2px 6px -2px rgba(0,0,0,.5);
  --g-ink-top:rgba(233,232,228,.9);--g-ink-bot:rgba(233,232,228,.78);--on-ink:#0e0e0d;--glow-o:.5;
  --gf-top:rgba(255,255,255,.09);--gf-bot:rgba(255,255,255,.035);--g-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230e0e0d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}}
.lg{position:relative;isolation:isolate;border:0;overflow:hidden;
  background:linear-gradient(180deg,var(--g-top),var(--g-mid) 52%,var(--g-bot));
  box-shadow:inset 0 1px .5px var(--g-rim),inset 0 -1px .5px var(--g-bounce),inset 0 0 0 .5px var(--g-edge),inset 0 -14px 18px -16px var(--g-bounce),var(--g-drop);
  -webkit-backdrop-filter:blur(12px) saturate(180%);backdrop-filter:blur(12px) saturate(180%)}
.lg::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.25px;pointer-events:none;z-index:2;
  background:linear-gradient(135deg,var(--g-spec) 0%,transparent 30%,transparent 66%,var(--g-spec2) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.lg::after{content:"";position:absolute;left:1px;right:1px;top:1px;height:min(46%,30px);border-radius:inherit;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0));opacity:.8}
.music-in{display:grid;gap:40px;align-items:center}
.music-copy{display:grid;gap:12px;max-width:42ch;min-width:0}
.music-copy .body{color:var(--ink-3)}
@media (min-width:900px){.music-in{grid-template-columns:1fr 1.1fr;gap:64px}}

.gp{position:relative;display:grid;justify-items:center;align-content:start;gap:4px;padding:48px 0;min-width:0;
  --gw:min(420px,100%);--gh:130px}
.gp [hidden]{display:none!important}
.gp:has([data-full]:not([hidden])){--gw:min(360px,100%);--gh:480px}
.gp:has([data-full]:not([hidden])) > [data-under]{display:none}

/* the cover's colour, kept close behind the player so it never spills into other sections */
.gp-glow{position:absolute;inset:0;pointer-events:none;z-index:0}
.gp-glow img{position:absolute;left:50%;top:50%;width:var(--gw);height:var(--gh);max-width:none;translate:-50% -50%;object-fit:cover;
  border-radius:50%;filter:blur(34px) saturate(1.8);opacity:0;transition:opacity 1.2s ease}
.gp-glow img.on{opacity:var(--glow-o)}
.gp-lens{position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:0;pointer-events:none}
.gp-lens img{position:absolute;inset:-40%;width:180%;height:180%;max-width:none;object-fit:cover;filter:blur(22px) saturate(1.6);opacity:.28}

.gp-mini,.gp-full{position:relative;z-index:1}
/* the player's glass is a little more solid than the buttons', so small grey text stays AA over a bright cover glow */
/* Santi: "it should be more see through on the edges, because it looks like overlapped text". The glass itself is
   light (clear at the rim); a soft solid core (.gp-lens::before, ~92%) sits in the middle and fades out toward
   the edges, so page text never reads through behind the song, the controls or the lyrics. */
html:not([data-theme="dark"]) :is(.gp-mini,.gp-full){--g-top:rgba(255,255,255,.5);--g-mid:rgba(255,255,255,.38);--g-bot:rgba(255,255,255,.46);--g-core:rgba(250,250,248,.92)}
html[data-theme="dark"] :is(.gp-mini,.gp-full){--ink-2:#c9c8c3;--g-top:rgba(34,34,32,.46);--g-mid:rgba(20,20,19,.5);--g-bot:rgba(28,28,26,.48);--g-core:rgba(22,22,21,.92)}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) :is(.gp-mini,.gp-full){--ink-2:#c9c8c3;--g-top:rgba(34,34,32,.46);--g-mid:rgba(20,20,19,.5);--g-bot:rgba(28,28,26,.48);--g-core:rgba(22,22,21,.92)}}
.gp-float :is(.gp-mini,.gp-full){-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%)}
.gp-lens::before{content:"";position:absolute;inset:14px;border-radius:18px;background:var(--g-core);box-shadow:0 0 12px 8px var(--g-core)}
.gp-mini > :not(.gp-lens),.gp-full > :not(.gp-lens){position:relative;z-index:3}
.gp-cover{display:block;object-fit:cover;background:var(--panel)}
.gp-meta{min-width:0}
.gp-t{display:block;font-size:16px;line-height:1.3;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gp-a{display:block;font-size:14px;line-height:1.35;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.gp-ctl{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer;
  transition:opacity .35s ease,transform .5s cubic-bezier(.34,1.45,.64,1),background-color .25s ease}
/* Pressing, as on iOS: what you press dims at once and comes back as you let go. Computers also give a small
   squeeze that springs back. Phones: opacity only (Santi's rule). */
.gp-ctl:active,.gp-sign button:active,.gp-lyrics:active,.gp-open:active{opacity:.45;transition-duration:0s}
@media (hover:hover) and (pointer:fine){.gp-ctl:active{transform:scale(.86)}.gp-sign button:active,.gp-lyrics:active{transform:scale(.96)}}
.gp button,.gp a{touch-action:manipulation;-webkit-tap-highlight-color:transparent;scroll-margin-block:96px}
.gp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (hover:hover){.gp-ctl:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}}
.gp-ctl svg{width:22px;height:22px;fill:currentColor}
/* Play and pause trade places: one fades out as the other fades in (computers: they also grow and shrink). */
.gp-ctl > svg{grid-area:1/1}
.gp-i-play,.gp-i-pause{transition:opacity .2s ease,transform .45s cubic-bezier(.34,1.45,.64,1)}
.gp-i-pause,[data-playing] .gp-i-play{opacity:0}
[data-playing] .gp-i-pause{opacity:1}
@media (hover:hover) and (pointer:fine){.gp-i-pause,[data-playing] .gp-i-play{transform:scale(.55)}[data-playing] .gp-i-pause{transform:none}}

/* mini pill */
.gp-mini{display:flex;align-items:center;gap:4px;max-width:100%;padding:6px 8px 6px 6px;border-radius:999px}
.gp-open{display:flex;align-items:center;gap:12px;min-height:48px;min-width:0;padding:0 6px 0 0;border:0;border-radius:999px;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.gp-mini .gp-cover{width:44px;height:44px;border-radius:50%;flex:none}
.gp-mini .gp-meta{max-width:190px}
.gp-mini .gp-ctl{width:48px;height:48px}
.gp-mini .gp-ctl svg{width:26px;height:26px}

/* the card: Apple Music's Now Playing layout */
.gp-full{display:grid;gap:14px;width:min(340px,100%);padding:16px 16px 10px;border-radius:32px}
.gp-full .gp-cover{width:100%;height:auto;aspect-ratio:1;border-radius:12px}
.gp-full > .gp-close{position:absolute;top:24px;right:24px;z-index:4;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;cursor:pointer;
  color:var(--on-ink);background:linear-gradient(180deg,var(--g-ink-top),var(--g-ink-bot));box-shadow:var(--g-drop)}
.gp-close svg{width:18px;height:18px;fill:currentColor}
.gp-full .gp-meta{padding:6px 2px 0}
.gp-full .gp-t{font-size:19px;font-weight:600;letter-spacing:-.01em}
.gp-full .gp-a{font-size:16px}
.gp-prog{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:0 2px}
.gp-prog span{min-width:3.2ch;font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.gp-prog span:last-child{text-align:right}
.gp-track{height:6px;border-radius:6px;background:color-mix(in srgb,var(--ink) 14%,transparent);overflow:hidden}
.gp-fill{height:100%;background:var(--ink);transform-origin:left;transform:scaleX(0)}
/* sizes follow Apple's: big play, medium skips, small quiet side icons */
.gp-row{display:grid;grid-template-columns:44px 1fr 1fr 1fr 44px;align-items:center;justify-items:center;padding:0 2px}
.gp-row .gp-skip{width:60px;height:56px;border-radius:28px}
.gp-row .gp-skip svg{width:40px;height:40px}
.gp-row .gp-big{width:68px;height:68px}
.gp-row .gp-big svg{width:50px;height:50px}
.gp-row .gp-side{color:var(--ink-2);text-decoration:none}
.gp-row .gp-side svg{width:26px;height:26px}

.gp-listen{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 5px;margin:0;font-size:13px;color:var(--ink-3)}
.gp-listen a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--ink) 30%,transparent)}
.gp-listen a svg{width:16px;height:16px;margin-right:5px;fill:currentColor}
@media (hover:hover){.gp-listen a:hover,.gp-row .gp-side:hover{color:var(--ink)}}

@media (prefers-reduced-motion:reduce){.gp *,.gp-full{transition:none!important}}

/* ---------- Floating on every page (Santi: "lets place the player to stay on the screen") ----------
   A small pill in the bottom corner (bottom centre on phones). It opens into the card just above itself.
   Under the nav and its menu. Hidden until it has a song, so it never shows empty. */
.gp[hidden]{display:none!important}
.gp-float{position:fixed;z-index:9;right:max(24px,env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));
  display:grid;justify-items:end;padding:0;pointer-events:none;transition:opacity .6s ease}
.gp-float > *{pointer-events:auto}
.gp-float:not([data-ready]){opacity:0;visibility:hidden}
.gp-float .gp-mini{box-shadow:inset 0 1px .5px var(--g-rim),inset 0 -1px .5px var(--g-bounce),inset 0 0 0 .5px var(--g-edge),0 18px 40px -18px rgba(0,0,0,.45),0 3px 10px -4px rgba(0,0,0,.2)}
.gp-float .gp-full{width:min(340px,calc(100vw - 24px));max-height:calc(100dvh - 100px);overflow:auto;overscroll-behavior:contain;scrollbar-width:none}
/* short screens (a phone on its side): the cover shrinks so the controls stay on screen */
/* too short for any cover: drop it so the play controls stay in view (the glow still shows the art) */
@media (max-width:600px){
  .gp-float{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));justify-items:center}
}
/* Phones scroll under it, so no live blur there: the glass is drawn without it and stays smooth in Low Power Mode. */
@media (hover:none),(max-width:767px){
  .gp-float :is(.gp-mini,.gp-full){-webkit-backdrop-filter:none;backdrop-filter:none}
  /* No blur here (smooth in Low Power Mode), so the rim is only a little clearer, the clear band is thin
     (sharp page text in a wide band read as overlapped text), and the core nearly solid. */
  .gp-lens::before{inset:6px;border-radius:24px;box-shadow:0 0 5px 4px var(--g-core)}
  html:not([data-theme="dark"]) .gp-float :is(.gp-mini,.gp-full){--g-top:rgba(255,255,255,.86);--g-mid:rgba(250,249,247,.82);--g-bot:rgba(255,255,255,.85);--g-core:rgb(251,251,249)}
  html[data-theme="dark"] .gp-float :is(.gp-mini,.gp-full){--g-top:rgba(40,40,38,.86);--g-mid:rgba(24,24,23,.88);--g-bot:rgba(32,32,30,.86);--g-core:rgb(24,24,23)}
}
@media ((hover:none) or (max-width:767px)) and (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .gp-float :is(.gp-mini,.gp-full){--g-top:rgba(40,40,38,.86);--g-mid:rgba(24,24,23,.88);--g-bot:rgba(32,32,30,.86);--g-core:rgb(24,24,23)}
}
/* the footer's last line stays clear of the pill */
html:has(.gp-float) .footer-base{padding-bottom:88px}
.gp-sign{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:0;padding:0 0 4px;text-align:center;font-size:12.5px;line-height:1.35;color:var(--ink-2)}
.gp-sign button,.gp-lyrics{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:color-mix(in srgb,var(--ink) 7%,transparent);
  font:inherit;letter-spacing:.01em;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:opacity .35s ease,transform .5s cubic-bezier(.34,1.45,.64,1),background-color .25s ease,color .25s ease}
@media (hover:hover){.gp-sign button:hover,.gp-lyrics:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 11%,transparent)}}
.gp-sign button:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:8px}

/* The small invitation above the footer, for anyone who missed the pill. */
.music-invite{display:grid;justify-items:center;gap:12px;text-align:center}
.music-invite .d2{font-size:clamp(26px,4vw,40px);max-width:20ch}
.music-invite .body{color:var(--ink-3);max-width:36ch}
.music-invite .pill{min-height:44px}

/* ---------- The card, compact (Santi picked draft B, 2026-11-04): small cover beside the title, like Control Center. ---------- */
.gp-full{grid-template-columns:64px 1fr 44px;column-gap:14px;row-gap:12px;align-items:center;padding:14px 14px 6px}
.gp-full .gp-cover,.gp-float .gp-full .gp-cover{grid-column:1;grid-row:1;width:64px;height:64px;border-radius:10px}
.gp-full .gp-meta{grid-column:2;grid-row:1;padding:0}
.gp-full > .gp-close{position:static;grid-column:3;grid-row:1;width:36px;height:36px;justify-self:end;align-self:start}
.gp-full .gp-t{font-size:17px}
.gp-full .gp-a{font-size:14px}
.gp-full .gp-prog,.gp-full .gp-row{grid-column:1/-1}
.gp-prog span{font-size:11.5px}
.gp-track{height:4px}
/* Apple's Now Playing proportions: play and pause the biggest, skips wide and a little smaller, brand icons smallest. */
.gp-row{grid-template-columns:44px 1fr auto 1fr 44px}
.gp-row .gp-big{width:64px;height:64px}.gp-row .gp-big svg{width:48px;height:48px}
.gp-row .gp-skip{width:64px;height:52px}.gp-row .gp-skip svg{width:36px;height:36px}
.gp-lyrics{text-decoration:none}
.gp-lyrics:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* Long song names and artists glide across and back (glass-player.mjs fitText). Position only, so it stays smooth on phones. */
.gp-run{text-overflow:clip;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6px,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(90deg,transparent,#000 6px,#000 calc(100% - 14px),transparent);padding-left:4px;margin-left:-4px}
.gp-run span{display:inline-block;animation:gp-glide var(--gp-dur,6s) ease-in-out infinite alternate}
@keyframes gp-glide{0%,22%{transform:translateX(0)}78%,100%{transform:translateX(var(--gp-shift,0))}}
@media (prefers-reduced-motion:reduce){.gp-run{text-overflow:ellipsis;-webkit-mask-image:none;mask-image:none}.gp-run span{display:inline;animation:none}}

/* Lyrics (Genius's embed, lyrics/index.html) in a panel under the chips; it fades in once loaded (opacity only). */
.gp-lyr{grid-column:1/-1;margin:-2px -4px 4px;border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent);padding-top:10px}
.gp-lyr iframe{display:block;width:100%;height:min(44dvh,360px);border:0;background:transparent;color-scheme:normal;opacity:0;transition:opacity .3s ease}
.gp-lyr iframe.in{opacity:1}
.gp-lyrics[aria-expanded="true"]{color:var(--ink);background:color-mix(in srgb,var(--ink) 13%,transparent)}
.gp-lyrics[hidden]{display:none}