/* gmp-player.css : persistent bottom-docked player (collapsed pill -> drawer). Dark glass, accent follows the current track.
   Reactive glow reads :root --gmp-beat (0 when the site is not reacting). Nothing here moves under prefers-reduced-motion. */
.gmp-p, .gmp-p * { box-sizing: border-box; }
.gmp-p {
  --acc: var(--gmp-accent, #00ffff);
  --acc-rgb: var(--gmp-accent-rgb, 0, 255, 255);
  --bg: rgba(5, 6, 9, .9);
  --line: rgba(255, 255, 255, .16);
  --ink: #f4f4f4;
  --dim: #b8b3c7;
  --mute: #8f8ba3;
  --ease: cubic-bezier(.16, 1, .3, 1);
  position: fixed; z-index: 2147481000;
  right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  font: 600 12px/1.25 var(--sw-font-body, "Familjen Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
  letter-spacing: .02em; color: var(--ink);
  -webkit-font-smoothing: antialiased; text-align: left;
}
.gmp-p[hidden] { display: none; }
.gmp-p :where(button, input, a) { font: inherit; color: inherit; letter-spacing: inherit; }
.gmp-p :where(button) { cursor: pointer; border: 0; background: none; padding: 0; -webkit-tap-highlight-color: transparent; }
.gmp-p :focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.gmp-p__sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.gmp-i { width: 1em; height: 1em; display: block; fill: currentColor; flex: none; }
svg.gmp-i--s { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- collapsed pill ---------- */
.gmp-p__pill {
  display: flex; align-items: center; gap: 4px; height: 48px; padding: 3px 6px 3px 3px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--line); cursor: pointer;
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .55), 0 0 calc(var(--gmp-groove, 0) * 26px) rgba(var(--acc-rgb), calc(var(--gmp-groove, 0) * .55));
  transition: border-color .25s, opacity .22s var(--ease), transform .22s var(--ease), visibility 0s;
}
.gmp-p__pill:hover { border-color: rgba(var(--acc-rgb), .6); }
.gmp-p[data-open="true"] .gmp-p__pill { opacity: 0; visibility: hidden; transform: translateY(6px) scale(.97); pointer-events: none; transition: opacity .18s, transform .18s, visibility 0s .18s; }
.gmp-p__play {
  position: relative; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--acc); color: #03070a; font-size: 18px; transition: transform .18s var(--ease), box-shadow .25s;
  box-shadow: 0 0 0 0 rgba(var(--acc-rgb), .5);
}
.gmp-p__play:hover { transform: scale(1.06); }
.gmp-p__play:active { transform: scale(.96); }
.gmp-p[data-state="idle"] .gmp-p__play, .gmp-p[data-state="blocked"] .gmp-p__play { animation: gmp-ring 2.4s ease-out infinite; }
@keyframes gmp-ring { 0% { box-shadow: 0 0 0 0 rgba(var(--acc-rgb), .55); } 70%, 100% { box-shadow: 0 0 0 12px rgba(var(--acc-rgb), 0); } }
.gmp-p__info { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 0 4px 0 8px; }
.gmp-p__eq { display: flex; align-items: flex-end; gap: 2px; width: 18px; height: 18px; flex: none; }
.gmp-p__eq i { display: block; width: 3px; border-radius: 1px; background: var(--acc); height: 16%; transform-origin: bottom; transition: height .06s linear; }
.gmp-p[data-state="idle"] .gmp-p__eq, .gmp-p[data-state="blocked"] .gmp-p__eq { display: none; }
.gmp-p__label { display: block; max-width: 152px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; }
.gmp-p__label small { display: block; font-size: 11px; font-weight: 600; color: var(--mute); letter-spacing: .06em; margin-top: 1px; text-transform: none; }
.gmp-p__open { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; color: var(--dim); flex: none; transition: color .2s, background .2s; }
.gmp-p__open:hover { color: var(--acc); background: rgba(255, 255, 255, .08); }
.gmp-p__nudge { font-size: 11px; color: var(--acc); }

/* ---------- drawer ---------- */
.gmp-p__drawer {
  position: absolute; right: 0; bottom: 0; width: min(408px, calc(100vw - 32px)); max-height: min(80dvh, 660px);
  display: flex; flex-direction: column; overflow: hidden; border-radius: 18px;
  background: var(--bg); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .65), 0 0 calc(var(--gmp-groove, 0) * 34px) rgba(var(--acc-rgb), calc(var(--gmp-groove, 0) * .4));
  /* opacity + pointer-events only (no visibility): a transition started while the element
     flips from visibility:hidden in the same style recalc can fail to start in some engines.
     Interactivity/focus of the closed drawer are already blocked by the JS-set inert + aria-hidden. */
  opacity: 0; pointer-events: none; transform: translateY(14px) scale(.98); transform-origin: 100% 100%;
  transition: opacity .2s var(--ease), transform .26s var(--ease);
}
.gmp-p[data-open="true"] .gmp-p__drawer { opacity: 1; pointer-events: auto; transform: none; transition: opacity .2s var(--ease), transform .26s var(--ease); }
.gmp-p__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 0 18px; }
.gmp-p__kick { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--acc); }
.gmp-p__close { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; color: var(--dim); border: 1px solid var(--line); }
.gmp-p__close:hover { color: #fff; border-color: rgba(255, 255, 255, .5); }
.gmp-p__now { padding: 6px 18px 0; }
.gmp-p__title { margin: 0; font: 800 clamp(22px, 5.2vw, 27px)/1 var(--sw-font-display, "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif); letter-spacing: -.02em; text-transform: uppercase; overflow-wrap: anywhere; }
.gmp-p__meta { margin: 7px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.gmp-p__meta b { color: var(--ink); font-weight: 700; }
.gmp-p__scope { display: block; width: calc(100% - 36px); height: 54px; margin: 12px 18px 0; border-radius: 8px; background: rgba(255, 255, 255, .035); }
.gmp-p__seekrow { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; gap: 8px; padding: 8px 18px 0; font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums; }
.gmp-p__seekrow span:last-child { text-align: right; }
.gmp-p input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; --p: 0%; }
.gmp-p input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--acc) var(--p), rgba(255, 255, 255, .18) var(--p)); }
.gmp-p input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .18); }
.gmp-p input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--acc); }
.gmp-p input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #fff; border: 2px solid var(--acc); box-shadow: 0 0 10px rgba(var(--acc-rgb), .6); }
.gmp-p input[type="range"]::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--acc); }
.gmp-p__xport { display: flex; align-items: center; gap: 6px; padding: 8px 12px 0 14px; }
.gmp-p__ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; color: var(--ink); flex: none; transition: background .2s, color .2s; }
.gmp-p__ic:hover { background: rgba(255, 255, 255, .1); }
.gmp-p__ic[aria-pressed="true"] { color: var(--acc); background: rgba(var(--acc-rgb), .14); }
.gmp-p__big { width: 52px; height: 52px; font-size: 23px; background: var(--acc); color: #03070a; }
.gmp-p__big:hover { background: var(--acc); transform: scale(1.05); }
.gmp-p__vol { display: flex; align-items: center; gap: 2px; margin-left: auto; min-width: 0; flex: 0 1 132px; }
.gmp-p__vol input { min-width: 56px; }
.gmp-p__toggles { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px 18px 2px; }
.gmp-p__sw { display: inline-flex; align-items: center; gap: 9px; min-height: 32px; cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.gmp-p__sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gmp-p__sw i { position: relative; width: 34px; height: 20px; border-radius: 10px; background: rgba(255, 255, 255, .16); transition: background .2s; flex: none; }
.gmp-p__sw i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); }
.gmp-p__sw input:checked + i { background: var(--acc); }
.gmp-p__sw input:checked + i::after { transform: translateX(14px); background: #03070a; }
.gmp-p__sw input:focus-visible + i { outline: 2px solid var(--acc); outline-offset: 3px; }
.gmp-p__sw input:checked ~ span { color: var(--ink); }
.gmp-p__note { margin: 6px 18px 0; padding: 7px 10px; border-radius: 8px; font-size: 12px; line-height: 1.35; color: var(--ink); background: rgba(var(--acc-rgb), .12); border: 1px solid rgba(var(--acc-rgb), .35); }
.gmp-p__note[hidden] { display: none; }
.gmp-p__lh { display: flex; align-items: baseline; justify-content: space-between; margin: 12px 18px 4px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.gmp-p__list { list-style: none; margin: 0; padding: 0 8px 4px; flex: 1 1 auto; min-height: 96px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; }
.gmp-p__list li { margin: 0; }
.gmp-p__trk { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 4px 8px; width: 100%; padding: 8px 10px; border-radius: 10px; text-align: left; border: 1px solid transparent; transition: background .15s, border-color .15s; }
.gmp-p__trk:hover { background: rgba(255, 255, 255, .07); }
.gmp-p__trk[aria-current="true"] { background: rgba(var(--t-rgb, var(--acc-rgb)), .13); border-color: rgba(var(--t-rgb, var(--acc-rgb)), .55); }
.gmp-p__trk .n { font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums; }
.gmp-p__trk[aria-current="true"] .n { color: rgb(var(--t-rgb, var(--acc-rgb))); }
.gmp-p__trk .t { font-size: 13px; font-weight: 700; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gmp-p__trk .g { grid-column: 2; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gmp-p__trk .d { grid-row: 1 / span 2; grid-column: 3; display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums; }
.gmp-p__trk .d::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--t-rgb, var(--acc-rgb))); box-shadow: 0 0 8px rgba(var(--t-rgb, var(--acc-rgb)), .8); }
.gmp-p__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 14px 14px; border-top: 1px solid var(--line); }
.gmp-p__link { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); text-decoration: none; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; text-align: center; transition: border-color .2s, background .2s, color .2s; }
.gmp-p__link:hover { border-color: var(--acc); color: var(--acc); }
.gmp-p__link--sb { background: #e11d2e; border-color: #e11d2e; color: #fff; }
.gmp-p__link--sb:hover { background: #ff2a3d; border-color: #ff2a3d; color: #fff; }
.gmp-p__link .gmp-i { font-size: 14px; }

/* ---------- small screens: icon pill, bottom-sheet drawer, never wider than it needs ---------- */
@media (max-width: 560px) {
  .gmp-p { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
  .gmp-p__pill { height: 52px; padding: 4px 4px 4px 4px; }
  .gmp-p__play { width: 44px; height: 44px; }
  .gmp-p[data-state="playing"] .gmp-p__label, .gmp-p[data-state="paused"] .gmp-p__label { display: none; }
  .gmp-p[data-state="playing"] .gmp-p__info, .gmp-p[data-state="paused"] .gmp-p__info { padding: 0 2px 0 6px; }
  .gmp-p[data-state="idle"] .gmp-p__open, .gmp-p[data-state="blocked"] .gmp-p__open { display: none; }
  .gmp-p[data-state="idle"] .gmp-p__info, .gmp-p[data-state="blocked"] .gmp-p__info { padding: 0 14px 0 8px; }
  .gmp-p[data-open="true"] { left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); }
  .gmp-p__drawer { width: 100%; max-height: min(86dvh, 640px); border-radius: 20px; }
  .gmp-p__foot { grid-template-columns: 1fr; }
}
@media (max-width: 380px) { .gmp-p__vol { flex-basis: 96px; } .gmp-p__xport { gap: 2px; } }

/* ---------- Lab shell: the pill is docked into the shell's bottom bar instead of floating over the chapter ---------- */
html.gmp-stage-open .gmp-p { bottom: max(6px, env(safe-area-inset-bottom)); }
html.gmp-stage-open .gmp-p[data-open="true"] { bottom: max(6px, env(safe-area-inset-bottom)); }
@media (max-width: 560px) { html.gmp-stage-open .gmp-p { bottom: max(4px, env(safe-area-inset-bottom)); } }

/* the home page already owns an on-page soundtrack button; the player adopts that same <audio>, so one control remains */
html.gmp-player-on #sw-audio-toggle { display: none !important; }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .gmp-p__pill, .gmp-p__drawer, .gmp-p__play, .gmp-p__trk, .gmp-p__sw i, .gmp-p__sw i::after { transition: none !important; }
  .gmp-p[data-state="idle"] .gmp-p__play, .gmp-p[data-state="blocked"] .gmp-p__play { animation: none; }
  .gmp-p__eq i { transition: none; }
}
@media (forced-colors: active) {
  .gmp-p__pill, .gmp-p__drawer { border: 1px solid CanvasText; background: Canvas; }
  .gmp-p__play { background: ButtonText; color: ButtonFace; }
}
@media print { .gmp-p { display: none !important; } }

/* 44px tap targets for the player controls (2026-10-15 critic pass) */
.gmp-p__ic, .gmp-p__close { min-width: 44px !important; min-height: 44px !important; width: 44px !important; height: 44px !important; }
.gmp-p__link { min-height: 44px !important; height: auto !important; display: inline-flex; align-items: center; }

/* ---------- 2026-10-16 tap targets (bounty G5): 44px hit areas, same look ----------
   The seek and volume sliders were 22px tall. Padding grows the hit box to 44px while the track and thumb stay centred
   (the track sits in the content box), so nothing moves on screen. */
.gmp-p input[type="range"] { box-sizing: border-box; height: 44px; padding: 11px 0; }
.gmp-p__open { width: 44px; height: 44px; }
.gmp-p__play { width: 44px; height: 44px; }
.gmp-p__sw { min-height: 44px; }
.gmp-p__close, .gmp-p__ic { min-width: 44px; min-height: 44px; }