/* SageAmp: a polished classic player, drawn in our own CSS (his call, session 4: the "classic modern"
   style; no borrowed skin art). Panels: main, equaliser (toggled by EQ), playlist, video.
   Themes swap the custom properties below; the visitor picks one with the SKIN button. */
.window--amp {
  --amp-face: #2b3048;
  --amp-face-lo: #1b1f31;
  --amp-inset: #10132a;
  --amp-edge: #090b16;
  --amp-line: #3d4466;
  --amp-cream: #ece2c4;
  --amp-cream-lo: #b9ad8a;
  --amp-text: #c9cde3;
  --amp-lcd: #0a0d1d;
  --amp-green: #a4e35c;
  --amp-green-dim: #4b6a2b;
  --amp-select: #26357f;
  --amp-vol: #e8c22c;
  --amp-bal: #3fae4a;
  --amp-digits: "VT323", ui-monospace, monospace;
  --amp-label: "Trebuchet MS", Tahoma, sans-serif;
  padding: 0 3px 3px;
  border: 1px solid var(--amp-edge);
  border-radius: 7px;
  background: linear-gradient(180deg, var(--amp-face), var(--amp-face-lo));
  box-shadow: inset 0 1px rgb(255 255 255 / 0.12), 2px 5px 16px rgb(0 0 0 / 0.55);
}
.window--amp:not(.is-active) { background: linear-gradient(180deg, var(--amp-face), var(--amp-face-lo)); box-shadow: 2px 5px 16px rgb(0 0 0 / 0.45); }
.window--amp[data-amp-theme="graphite"] { --amp-face: #3a3c42; --amp-face-lo: #232428; --amp-inset: #141518; --amp-line: #55585f; --amp-lcd: #0c0d0f; --amp-select: #3e4a63; }
.window--amp[data-amp-theme="forest"] { --amp-face: #25402f; --amp-face-lo: #15261b; --amp-inset: #0b1a10; --amp-line: #3c6247; --amp-lcd: #07130b; --amp-select: #2d5a38; --amp-cream: #e6e8c6; }
.window--amp[data-amp-theme="sage"] { --amp-face: #1f4a4c; --amp-face-lo: #122c2e; --amp-inset: #0a1d1f; --amp-line: #3a6f71; --amp-lcd: #061416; --amp-select: #1f6267; --amp-green: #8ff0c8; --amp-green-dim: #2f6a58; }
.window--amp[data-amp-theme="ruby"] { --amp-face: #4a1f2a; --amp-face-lo: #2b1118; --amp-inset: #1c0a10; --amp-line: #713a49; --amp-lcd: #14070b; --amp-select: #6a2236; --amp-green: #ffb35c; --amp-green-dim: #7a4a1c; }

/* Title bars: cream double stripes either side of a bold title, drawn by the title's own ::before/::after. */
.window--amp .window__titlebar,
.amp__bar {
  height: 22px;
  margin: 0 -3px;
  padding: 0 6px;
  border: 0;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.08), transparent);
  color: var(--amp-cream);
  text-shadow: none;
}
.window--amp:not(.is-active) .window__titlebar { opacity: 0.75; }
.amp__bar { display: flex; align-items: center; height: 20px; margin: 0; border-radius: 0; background: none; }
.window--amp .window__title,
.amp__bar span {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0 8px 0 2px;
  overflow: visible;
  font: 700 11px/22px var(--amp-label);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-shadow: 0 1px #000;
}
.window--amp .window__title::before, .window--amp .window__title::after,
.amp__bar span::before, .amp__bar span::after {
  content: "";
  flex: 1 1 0;
  height: 9px;
  background:
    linear-gradient(#fff6dc, var(--amp-cream-lo)) top / 100% 3px no-repeat,
    linear-gradient(#fff6dc, var(--amp-cream-lo)) bottom / 100% 3px no-repeat;
  filter: drop-shadow(0 1px rgb(0 0 0 / 0.6));
}
.window--amp .window__title .window__icon { display: none; }
.amp__bar { display: flex; align-items: center; height: 20px; }
.window--amp .window__buttons { gap: 4px; }
/* Each button is a small framed key, the same size at any tap-area size; glyphs are drawn from the centre (s7:
   on the Razr the bare glyphs read as broken). */
.window--amp .window__btn {
  width: 18px; height: 18px; border: 0; border-radius: 2px; opacity: 1; box-shadow: none;
  background:
    linear-gradient(180deg, #4a5175, var(--amp-face-lo)) center / 16px 16px no-repeat,
    linear-gradient(180deg, var(--amp-cream-lo), #000) center / 18px 18px no-repeat;
}
.window--amp .window__btn:hover { filter: brightness(1.25); }
.window--amp .window__btn::before, .window--amp .window__btn::after { background: var(--amp-cream); filter: drop-shadow(0 1px #000); }
.window--amp .window__btn--min::before { width: 8px; height: 2px; margin: 2px 0 0 -4px; }
.window--amp .window__btn--max::before { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: none; border: 1px solid var(--amp-cream); border-top-width: 2px; }
.window--amp .window__btn--close::before, .window--amp .window__btn--close::after { width: 2px; height: 11px; margin: -5.5px 0 0 -1px; }

.amp {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  background: transparent;
  color: var(--amp-text);
  font: 12px/1.25 var(--amp-label);
  overflow: hidden;
}

/* Shared pieces: inset boxes, glossy silver buttons, indicator lights. */
.amp__lcd, .amp__marquee, .amp__meta b, .amp__list, .amp__curve, .amp__bands, .amp__video, .amp__pl-time {
  border: 1px solid var(--amp-edge);
  border-radius: 4px;
  background: var(--amp-lcd);
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.7), 0 1px rgb(255 255 255 / 0.07);
}
.amp__transport button, .amp__eject, .amp__toggle, .amp__lit, .amp__mini, .amp__minis i {
  border: 1px solid #23273a;
  background: linear-gradient(180deg, #fbfcfe 0%, #dfe3ea 45%, #c3c8d4 55%, #d8dce5 100%);
  color: #2a2e40;
  box-shadow: inset 0 1px #fff, 0 1px 2px rgb(0 0 0 / 0.45);
  cursor: pointer;
}
.amp__transport button:active, .amp__eject:active, .amp__toggle:active, .amp__lit:active, .amp__mini:active {
  background: linear-gradient(180deg, #b8bdc9, #d9dde5); box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.35);
}
.amp__dot {
  display: inline-block; width: 9px; height: 6px; margin-right: 5px; border-radius: 2px;
  background: #7e8496; box-shadow: inset 0 1px rgb(0 0 0 / 0.35); vertical-align: 1px;
}
[aria-pressed="true"] > .amp__dot { background: #8cf03c; box-shadow: 0 0 4px #8cf03c, inset 0 -1px rgb(0 0 0 / 0.2); }

/* Main panel */
.amp__main {
  display: grid;
  grid-template-columns: 14px 140px 1fr;
  gap: 9px 8px;
  padding: 8px 7px 7px;
  border: 1px solid var(--amp-edge);
  border-radius: 0;
  background: linear-gradient(180deg, var(--amp-face), var(--amp-face-lo));
  box-shadow: inset 0 1px rgb(255 255 255 / 0.1), inset 0 -1px #000;
}
.amp__clutter { display: flex; flex-direction: column; justify-content: space-around; padding: 2px 0; border-radius: 3px; background: var(--amp-lcd); color: #6f7593; font: 700 8px var(--amp-label); text-align: center; }
.amp__lcd {
  display: grid;
  grid-template-columns: 16px 1fr;
  grid-template-rows: 34px 26px;
  align-items: center;
  column-gap: 2px;
  padding: 3px 6px;
}
.amp__state { width: 0; height: 0; border-left: 9px solid var(--amp-green-dim); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.amp.is-playing .amp__state { border-left-color: var(--amp-green); filter: drop-shadow(0 0 3px var(--amp-green)); }
.amp__time {
  display: flex; align-items: center; justify-self: end; gap: 3px; height: 30px;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--amp-green) 45%, transparent));
  cursor: pointer;
}
.amp__time svg { display: block; height: 30px; width: auto; }
.amp__colon { display: flex; flex-direction: column; gap: 8px; }
.amp__colon i { width: 3px; height: 3px; background: var(--amp-green); }
.amp__viz { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 2px; height: 24px; cursor: pointer; }
.amp__viz i {
  flex: 1;
  height: 100%;
  transform: scaleY(0.06);
  transform-origin: bottom;
  background: linear-gradient(0deg, #2fbf3a 0 45%, #e2df2c 72%, #ec5a24 100%) bottom / 100% 24px no-repeat;
  transition: transform 0.12s linear;
}
.amp__viz.is-off i { visibility: hidden; }

.amp__info { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.amp__marquee {
  overflow: hidden;
  padding: 4px 8px;
  color: var(--amp-green);
  white-space: pre;
  font: 700 12px/14px var(--amp-label);
  letter-spacing: 0.5px;
}
.amp__now { display: inline-block; }
/* The title scrolls only while music plays, and pauses under the pointer or keyboard focus (WCAG 2.2.2). */
.amp.is-playing .amp__now:not(.is-feedback) { padding-left: 100%; animation: amp-scroll 16s linear infinite; }
.amp:hover .amp__now, .amp:focus-within .amp__now { animation-play-state: paused; }
@keyframes amp-scroll { to { transform: translateX(-100%); } }
.amp__meta { display: flex; align-items: center; gap: 6px; font: 400 13px var(--amp-label); color: var(--amp-text); }
.amp__meta span { white-space: nowrap; }
.amp__meta b { padding: 1px 5px; color: var(--amp-green); font-weight: 400; font-size: 11px; }
.amp__led { margin-left: auto; color: #6a7090; font-size: 13px; }
.amp__led + .amp__led { margin-left: 0; }
.amp__led.is-on { color: var(--amp-green); text-shadow: 0 0 4px color-mix(in srgb, var(--amp-green) 50%, transparent); }

.amp__sliders { display: flex; align-items: center; gap: 7px; min-width: 0; }
.amp__sliders input { min-width: 0; width: 0; }
.amp__vol { flex: 1.5; --track: var(--amp-vol); }
.amp__bal { flex: 0.9; --track: var(--amp-bal); }
.amp__lit { flex: 0 0 auto; height: 20px; padding: 0 6px; border-radius: 4px; font: 700 11px/1 var(--amp-label); }

/* Range inputs: a coloured pill groove and a silver ribbed knob. */
.amp input[type="range"] { -webkit-appearance: none; appearance: none; height: 16px; margin: 0; background: transparent; cursor: pointer; }
.amp input[type="range"]::-webkit-slider-runnable-track { height: 7px; border: 1px solid var(--amp-edge); border-radius: 4px; background: linear-gradient(180deg, color-mix(in srgb, var(--track, #555) 70%, #fff), var(--track, #555)); }
.amp input[type="range"]::-moz-range-track { height: 7px; border: 1px solid var(--amp-edge); border-radius: 4px; background: linear-gradient(180deg, color-mix(in srgb, var(--track, #555) 70%, #fff), var(--track, #555)); }
.amp input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 14px; margin-top: -4px; border: 1px solid #23273a; border-radius: 3px;
  background: repeating-linear-gradient(90deg, transparent 0 6px, #7d8395 6px 7px, transparent 7px 8px) center / 10px 8px no-repeat,
    linear-gradient(180deg, #fbfcfe, #c3c8d4);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.5);
}
.amp input[type="range"]::-moz-range-thumb {
  width: 22px; height: 14px; border: 1px solid #23273a; border-radius: 3px;
  background: repeating-linear-gradient(90deg, transparent 0 6px, #7d8395 6px 7px, transparent 7px 8px) center / 10px 8px no-repeat,
    linear-gradient(180deg, #fbfcfe, #c3c8d4);
}
.amp__seek { grid-column: 1 / -1; width: 100%; height: 22px !important; --track: var(--amp-inset); }
.amp__seek::-webkit-slider-runnable-track { height: 12px !important; background: var(--amp-inset) !important; box-shadow: inset 0 1px 3px #000; }
.amp__seek::-moz-range-track { height: 12px; background: var(--amp-inset); }
.amp__seek::-webkit-slider-thumb { width: 46px !important; height: 20px !important; margin-top: -5px !important; border-radius: 5px !important;
  background: linear-gradient(var(--amp-cream-lo), var(--amp-cream-lo)) center / 22px 2px no-repeat, linear-gradient(180deg, #fbf3da, var(--amp-cream-lo)) !important; }
.amp__seek::-moz-range-thumb { width: 46px; height: 20px; border-radius: 5px; background: linear-gradient(180deg, #fbf3da, var(--amp-cream-lo)); }

.amp__buttons { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.amp__transport { display: flex; border-radius: 6px; box-shadow: 0 1px 2px rgb(0 0 0 / 0.5); }
.amp__transport button, .amp__eject { display: grid; place-items: center; width: 42px; height: 34px; padding: 0; box-shadow: inset 0 1px #fff; }
.amp__transport button + button { border-left: 0; }
.amp__transport button:first-child { border-radius: 6px 0 0 6px; }
.amp__transport button:last-child { border-radius: 0 6px 6px 0; }
.amp__transport svg, .amp__eject svg { width: 16px; height: 16px; fill: none; stroke: #2a2e40; stroke-width: 1.4; stroke-linejoin: round; }
.amp__eject { width: 38px; border-radius: 6px; }
.amp__eject:disabled { cursor: default; }
.amp__pair { display: flex; margin-left: auto; border-radius: 6px; }
.amp__toggle { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; font: 700 11px/1 var(--amp-label); letter-spacing: 0.5px; }
.amp__pair .amp__toggle:first-child { border-radius: 6px 0 0 6px; }
.amp__pair .amp__toggle:last-child { border-left: 0; border-radius: 0 6px 6px 0; }
.amp__pair .amp__toggle:only-child { border-radius: 6px; }
.amp__status { grid-column: 1 / -1; min-height: 14px; margin: 0; overflow: hidden; color: #ffd98a; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.amp :focus-visible { outline: 2px solid var(--amp-cream); outline-offset: 1px; }

/* Equaliser panel (cosmetic: the embed gives no access to the sound). */
.amp__eq { display: flex; flex-direction: column; gap: 6px; padding-bottom: 6px; border: 1px solid var(--amp-edge); border-radius: 0; background: linear-gradient(180deg, var(--amp-face), var(--amp-face-lo)); box-shadow: inset 0 1px rgb(255 255 255 / 0.1), inset 0 -1px #000; }
.amp__eq[hidden] { display: none; }
.amp__eq-top { display: flex; align-items: center; gap: 8px; padding: 0 7px; }
.amp__eq-top .amp__pair { margin-left: 0; }
.amp__eq-top > .amp__toggle { border-radius: 6px; }
.amp__curve { flex: 1; height: 26px; }
.amp__curve polyline { fill: none; stroke: var(--amp-vol); stroke-width: 1.2; }
.amp__bands { display: flex; align-items: stretch; justify-content: space-between; gap: 2px; margin: 0 7px; padding: 6px 6px 4px; }
.amp__band { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--amp-text); font: 700 9px var(--amp-label); }
.amp__band input[type="range"] { writing-mode: vertical-lr; direction: rtl; width: 16px; height: 86px; --track: hsl(var(--hue, 100) 70% 45%); }
.amp__band input[type="range"] { background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--amp-text) 35%, transparent) 0 1px, transparent 1px 17px) left / 3px 100% no-repeat,
  repeating-linear-gradient(180deg, color-mix(in srgb, var(--amp-text) 35%, transparent) 0 1px, transparent 1px 17px) right / 3px 100% no-repeat; }
.amp__band input[type="range"]::-webkit-slider-runnable-track { width: 4px; height: auto; }
.amp__band input[type="range"]::-webkit-slider-thumb { width: 12px; height: 20px; margin-top: 0; margin-left: -5px;
  background: repeating-linear-gradient(180deg, transparent 0 6px, #7d8395 6px 7px, transparent 7px 8px) center / 8px 10px no-repeat, linear-gradient(90deg, #fbfcfe, #c3c8d4); }
.amp__band input[type="range"]::-moz-range-track { width: 4px; }
.amp__band input[type="range"]::-moz-range-thumb { width: 12px; height: 20px; }
.amp__band--pre { margin-right: 2px; }
.amp__scale { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 14px; color: var(--amp-vol); font: 9px var(--amp-label); }
.amp__scale b { font-weight: 400; }

/* Playlist panel */
.amp__pl { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 90px; padding: 0 0 4px; border: 1px solid var(--amp-edge); border-radius: 0; background: linear-gradient(180deg, var(--amp-face), var(--amp-face-lo)); box-shadow: inset 0 1px rgb(255 255 255 / 0.1), inset 0 -1px #000; }
.amp.is-list-hidden .amp__pl { display: none; }
.amp__list {
  flex: 1;
  margin: 0 5px;
  padding: 3px 0;
  overflow-y: auto;
  list-style: none;
  scrollbar-color: var(--amp-cream-lo) var(--amp-inset);
}
.amp__list button {
  display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 3px 8px;
  border: 0; background: none; color: var(--amp-green); font: 13px/1.35 var(--amp-label); text-align: left; cursor: default;
}
.amp__list button span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amp__list button:focus-visible { outline: 1px dotted var(--amp-green); outline-offset: -1px; }
.amp__list button.is-selected { background: var(--amp-select); }
.amp__list button.is-current { color: #fff; }
.amp__list button.is-failed { color: #8a968a; text-decoration: line-through; }
.amp__pl-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 5px 0; }
.amp__pl-time { padding: 3px 8px; color: var(--amp-green); font: 11px var(--amp-label); }
.amp__minis { display: flex; }
.amp__minis i { padding: 4px 6px; font: 700 10px var(--amp-label); font-style: normal; cursor: default; }
.amp__minis i + i { border-left: 0; }
.amp__minis i:first-child { border-radius: 5px 0 0 5px; }
.amp__minis i:last-child { border-radius: 0 5px 5px 0; }
.amp__mini { padding: 4px 8px; border-radius: 5px; font: 700 10px var(--amp-label); }

/* Video panel: stays visible, as YouTube asks for a player of at least 200 x 200. */
.amp__vid { display: flex; flex-direction: column; flex: 0 0 auto; padding-bottom: 5px; border: 1px solid var(--amp-edge); border-radius: 0; background: linear-gradient(180deg, var(--amp-face), var(--amp-face-lo)); box-shadow: inset 0 1px rgb(255 255 255 / 0.1), inset 0 -1px #000; }
.amp__video { height: 212px; margin: 0 5px; overflow: hidden; background: #000; }
.amp__video iframe, .amp__mount { display: block; width: 100%; height: 100%; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .amp.is-playing .amp__now { animation: none; padding-left: 0; }
}

@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {
  .window--amp .window__btn { width: 34px; height: 30px; }
  .window--amp .window__titlebar { height: 34px; }
  .amp__transport button, .amp__eject { width: 44px; height: 36px; }
  .amp__buttons { flex-wrap: wrap; row-gap: 6px; } /* SHUFFLE and REPEAT drop to a second line, never cut off */
  .amp__pair { margin-left: 0; }
  .amp { overflow: visible; height: auto; }
  .amp__list { max-height: 220px; } /* the playlist, when shown, scrolls inside itself */
  .amp__main { grid-template-columns: 14px 128px minmax(0, 1fr); }
  .amp__toggle { height: 34px; }
  .amp__list button { padding: 8px 8px; font-size: 14px; }
  .amp button, .amp input { touch-action: manipulation; }
}