/* The classic player-window layout.
 *
 * A skin opts into this arrangement with `layout: winamp` in config/skins.yml;
 * today only llama does. It lives in system/ rather than in a skin file because
 * it is a *layout*, not a palette -- every colour below still comes from a
 * token, so a different skin adopting this layout gets its own paint, and the
 * no-literal-colour test covers this file like any other.
 *
 * Geometry is the original 275x116 main window doubled, taken from Webamp's
 * *-window.css (MIT), which encodes the bitmap layout exactly:
 *
 *   title bar 275x14      clutterbar 8x43 at (10,22)   time 63x13 at (36,26)
 *   visualiser 76x16 at (24,43)                        marquee 154x14 at (111,24)
 *   kbps/kHz boxes at y43  mono/stereo at (212,41)
 *   volume 68x13 at (107,57)   balance 38x13 at (177,57)
 *   EQ/PL 23x12 at (219,58)    posbar 248x10 at (16,72)
 *   cbuttons 23x18 from (16,88)   eject 22x16 at (136,89)
 *   shuffle 47x15 / repeat 28x15 at y89
 *   equalizer bands 14x63 on an 18px pitch from x78
 *
 * Type is scaled past 2x for legibility, which is the one place this departs
 * from the original on purpose.
 */

.wa-desktop {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-5);
}

.wa-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  /* The basis is the width the player window actually needs, so two columns
     sit side by side only when both can hold a whole window; below that the
     desktop stacks them rather than folding the player in half. */
  flex: 1 1 540px;
  min-width: 0;
  max-width: 560px;
}

/* ---------------------------------------------------------------- window */

/* Winamp's window edge is not a bevel. It is a dark rim with a light ridge
   running just inside it, on all four sides -- so the border carries the
   ridge and the rim is a spread shadow outside it, where no child can cover
   it the way an inset shadow would be covered by the title bar. */
.wa-window {
  width: 100%;
  min-width: 0;
  background: var(--surface-panel);
  border: var(--edge-width) solid var(--edge-top);
  border-radius: var(--edge-radius);
  box-shadow: 0 0 0 var(--edge-width) var(--edge-bottom), var(--edge-shadow-float);
  -webkit-backdrop-filter: var(--surface-blur);
  backdrop-filter: var(--surface-blur);
  display: flex;
  flex-direction: column;
}

/* Inside the window frame the original draws a second, lighter ridge around
   the content area -- the reason a Winamp window reads as a moulded panel
   rather than a rectangle with a border. */
.wa-window__body {
  margin: var(--space-1);
  padding: var(--space-2);
  border: var(--edge-width) solid var(--edge-top);
  display: flex;
  flex-direction: column;
}

.wa-titlebar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--chrome-height);
  padding: 0 4px;
  background: var(--chrome-bg);
  color: var(--chrome-ink);
}

/* The option button at the far left -- the llama glyph in the original. */
.wa-titlebar__menu {
  flex: 0 0 auto;
  width: var(--chrome-button-size);
  height: var(--chrome-button-size);
  color: var(--chrome-close-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wa-titlebar__menu svg { width: 100%; height: 100%; }

/* The groove. A stack of cream-to-gold lines filling the bar either side of
   the title -- the single most recognisable thing about this heading, and the
   piece every earlier attempt was missing. Skins without one set
   --chrome-rail: none and the element collapses to nothing visible. */
.wa-titlebar__rail {
  flex: 1 1 auto;
  min-width: 24px;
  height: 12px;
  background-image: var(--chrome-rail);
}

.wa-titlebar__title {
  flex: 0 1 auto;
  min-width: 0;
  padding: 0 var(--space-2);
  text-align: var(--chrome-text-align);
  font-family: var(--chrome-font);
  font-size: var(--chrome-size);
  font-weight: 700;
  letter-spacing: var(--chrome-tracking);
  text-transform: var(--chrome-transform);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wa-titlebar__buttons { flex: 0 0 auto; display: var(--chrome-buttons); gap: 3px; }

/* Winamp's window buttons are not raised: they are small olive-gold plates
   carrying one light bar, sat directly on the title bar's black. */
.wa-titlebar__button {
  width: var(--chrome-button-size);
  height: var(--chrome-button-size);
  position: relative;
  background: var(--chrome-button-bg);
}

.wa-titlebar__button::after {
  content: "";
  position: absolute;
  background: var(--chrome-ink);
}

.wa-titlebar__button--min::after   { left: 3px; right: 3px; bottom: 2px; height: 3px; }
.wa-titlebar__button--shade::after { left: 3px; right: 3px; top: 2px; height: 3px; }

/* Close is the odd one out: a gold cross on the bar itself, no plate. */
.wa-titlebar__button--close {
  display: var(--chrome-close-display);
  background: transparent;
}

.wa-titlebar__button--close::after {
  inset: 4px;
  background: var(--chrome-close-bg);
  clip-path: polygon(
    0 20%, 20% 0, 50% 30%, 80% 0, 100% 20%, 70% 50%, 100% 80%, 80% 100%,
    50% 70%, 20% 100%, 0 80%, 30% 50%);
}

/* ------------------------------------------------------------------ main */

.wa-main { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }

.wa-main__upper { display: flex; flex-wrap: wrap; gap: var(--space-1); min-width: 0; }

/* An explicit basis, not `auto`: the marquee inside is one long nowrap line,
   so an auto basis asks for its full max-content width and the row wraps at
   every size. 320px is the width the knobs row actually needs. */
.wa-main__stack {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-2);
}

/* Every black area in this window is the same recess: dark on the top and
   left, light on the bottom and right, cut into the slate. */
.wa-recess {
  background-color: var(--readout-bg);
  border-style: solid;
  border-width: var(--edge-width);
  border-top-color: var(--edge-inset-top);
  border-left-color: var(--edge-inset-left);
  border-right-color: var(--edge-inset-right);
  border-bottom-color: var(--edge-inset-bottom);
  min-width: 0;
}

/* the display recess -- clutterbar, time and analyser, nothing else */
.wa-display {
  flex: 0 0 auto;
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2);
  background-image: var(--readout-texture);
}

/* clutterbar -- on the display's black, full height, down the left edge */
.wa-clutter {
  flex: 0 0 auto;
  align-self: stretch;
  width: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1px 0;
}

.wa-clutter__key {
  font-family: var(--font-label);
  font-size: var(--label-size);
  line-height: 1;
  text-align: center;
  color: var(--ink-muted);
}

.wa-display__gauges {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
}

.wa-display__time { display: flex; align-items: center; gap: var(--space-2); }

.wa-playstate { flex: 0 0 auto; color: var(--readout-ink); display: flex; }
.wa-playstate svg { width: 16px; height: 16px; }

.wa-time {
  flex: 0 0 auto;
  font-family: var(--font-readout);
  font-size: 46px;
  line-height: 0.72;
  font-variant-numeric: tabular-nums;
  color: var(--readout-ink);
  text-shadow: var(--readout-glow);
}

.wa-vis {
  flex: 0 0 auto;
  width: 152px;
  height: 32px;
  padding: 0;
}

/* the song-title recess, its own box to the right of the display */
.wa-marquee {
  flex: 0 0 auto;
  padding: 2px var(--space-2);
  min-width: 0;
}

.wa-marquee .rk-marquee__item {
  font-family: var(--font-readout);
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--readout-ink);
  text-transform: uppercase;
}

/* kbps / kHz / mono / stereo, on the slate rather than on the black */
.wa-infobar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.wa-stat {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: var(--label-tracking);
  color: var(--ink-secondary);
}

/* The original boxes the numbers and leaves the units plain. */
.wa-stat b {
  font-family: var(--font-readout);
  font-size: 20px;
  line-height: 1;
  font-weight: 400;
  padding: 1px 5px;
  color: var(--readout-ink);
}

.wa-channels { display: flex; gap: var(--space-3); margin-inline-start: auto; flex: 0 0 auto; }

.wa-channels__item {
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: var(--label-tracking);
  color: var(--ink-muted);
}

.wa-channels__item--on { color: var(--accent); }

/* volume / balance / EQ / PL */
/* The original packs this row tight -- volume ends at x175 and balance starts
   at x177; EQ and PL abut. --space-2 here was four times the original's gap,
   and was what pushed the row onto a second line. */
.wa-knobs { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }

/* Winamp's sliders are not filled bars. They are a thin coloured grill sunk
   into the window, the same height at every value, with the thumb carrying
   the value -- which is why loud reads orange before you have touched it. */
.wa-slider { flex: 0 0 auto; height: 26px; }
.wa-slider--volume  { width: 136px; }
.wa-slider--balance { width: 76px; }

.wa-slider .rk-meter__fill,
.wa-posbar .rk-meter__fill { display: none; }

.wa-slider .rk-meter__track {
  height: var(--meter-height);
  border-style: solid;
  border-width: var(--edge-width) 0;
  border-top-color: var(--edge-inset-top);
  border-bottom-color: var(--edge-inset-bottom);
}

.wa-slider--volume  .rk-meter__track { background: var(--meter-fill); }
.wa-slider--balance .rk-meter__track { background: var(--positive); }

/* The grip: a control-faced block ruled with three lines, as on the original. */
.wa-slider .rk-meter__thumb {
  width: 28px;
  height: 22px;
  background-color: var(--control-face);
  background-image: linear-gradient(90deg,
    transparent 0 32%, var(--control-ink) 32% 39%,
    transparent 39% 46%, var(--control-ink) 46% 53%,
    transparent 53% 60%, var(--control-ink) 60% 67%, transparent 67%);
  border-top-color: var(--control-light);
  border-left-color: var(--control-light);
  border-right-color: var(--control-dark);
  border-bottom-color: var(--control-dark);
}

.wa-grow { flex: 1 1 auto; }

/* EQ / PL / SHUFFLE / REPEAT. Light faces, dark labels, and a lamp at the
   left that lights when the toggle is on. */
.wa-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: 46px;
  height: 24px;
  padding: 0 var(--space-1);
  background-color: var(--control-face);
  background-image: var(--control-texture);
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
  color: var(--control-ink);
  font-family: var(--control-font);
  font-size: var(--control-size);
  letter-spacing: var(--control-tracking);
  text-transform: uppercase;
  border-style: solid;
  border-width: var(--control-border-width);
  border-top-color: var(--control-light);
  border-left-color: var(--control-light);
  border-right-color: var(--control-dark);
  border-bottom-color: var(--control-dark);
  border-radius: var(--control-radius);
  border-image-source: var(--control-frame-image);
  border-image-slice: var(--control-frame-slice);
  border-image-width: var(--control-frame-width);
  border-image-outset: var(--control-frame-outset);
  border-image-repeat: stretch;
  box-shadow: var(--control-shadow);
  text-shadow: var(--control-content-shadow);
}

.wa-toggle::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  background: var(--control-dark);
}

.wa-toggle--on::before { background: var(--accent); }

/* Toggles with no lamp on the original: PRESETS, and the playlist's rail. */
.wa-toggle--plain::before { content: none; }

/* shuffle 47x15, repeat 28x15, EQ/PL 23x12 -- all at 2x. */
.wa-toggle--wide { min-width: 94px; }

.wa-toggle:active {
  background-color: var(--control-face-active);
  border-top-color: var(--control-dark);
  border-left-color: var(--control-dark);
  border-right-color: var(--control-light);
  border-bottom-color: var(--control-light);
  border-image-source: var(--control-frame-image-active);
  box-shadow: var(--control-shadow-active);
  text-shadow: var(--control-content-shadow-active);
}

/* position bar -- a plain trough with a wide thumb, 248x10 doubled */
.wa-posbar { width: calc(100% - var(--space-2)); height: 24px; margin: 0 var(--space-1); }

.wa-posbar .rk-meter__track {
  height: 20px;
  background: var(--meter-track);
  border-style: solid;
  border-width: var(--edge-width);
  border-top-color: var(--edge-inset-top);
  border-left-color: var(--edge-inset-left);
  border-right-color: var(--edge-inset-right);
  border-bottom-color: var(--edge-inset-bottom);
}

.wa-posbar .rk-meter__thumb {
  background-image: linear-gradient(180deg,
    transparent 0 34%, var(--accent-secondary) 34% 44%,
    transparent 44% 58%, var(--accent-secondary) 58% 68%, transparent 68%);
  border-top-color: var(--control-light);
  border-left-color: var(--control-light);
  border-right-color: var(--accent-secondary);
  border-bottom-color: var(--accent-secondary);
}

/* transport */
.wa-transport { display: flex; align-items: center; gap: 0; min-width: 0; margin: 0 var(--space-1); }

/* Winamp's cbutton glyphs are outlines, not solids: a dark rule around a face
   lighter than the button. Drawing them as fill + stroke keeps that, and keeps
   both colours on tokens so another skin's cbuttons follow its controls.
   Geometry follows Webamp: cbuttons 23x18, eject 22x16, at 2x. */
.wa-cbutton {
  flex: 0 0 auto;
  width: 46px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--control-face);
  background-image: var(--control-texture);
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
  color: var(--control-ink);
  border-style: solid;
  border-width: var(--control-icon-border-width);
  border-top-color: var(--control-light);
  border-left-color: var(--control-light);
  border-right-color: var(--control-dark);
  border-bottom-color: var(--control-dark);
  border-radius: var(--control-radius);
  border-image-source: var(--control-frame-image);
  border-image-slice: var(--control-frame-slice);
  border-image-width: var(--control-frame-width);
  border-image-outset: var(--control-frame-outset);
  border-image-repeat: stretch;
  box-shadow: var(--control-icon-shadow);
}

.wa-cbutton svg {
  fill: var(--control-face-active);
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linejoin: miter;
  filter: drop-shadow(var(--control-content-shadow));
}

.wa-cbutton--eject { width: 44px; height: 32px; margin-inline-start: var(--space-2); }

.wa-cbutton:active {
  background-color: var(--control-face-active);
  border-top-color: var(--control-dark);
  border-left-color: var(--control-dark);
  border-right-color: var(--control-light);
  border-bottom-color: var(--control-light);
  border-image-source: var(--control-frame-image-active);
  box-shadow: var(--control-icon-shadow-active);
}

.wa-cbutton:active svg { filter: drop-shadow(var(--control-content-shadow-active)); }

/* -------------------------------------------------------------- playlist */

.wa-pl { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }

.wa-pl__list {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  background: var(--surface-row);
  padding: 3px 0;
}

.wa-pl__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 3px var(--space-2);
  font-family: var(--font-readout);
  font-size: 22px;
  line-height: 1.15;
  color: var(--ink-on-row);
  min-width: 0;
}

/* pledit.txt distinguishes these: Current is white text, SelectedBG is the
   blue bar. Earlier versions collapsed them into one. */
.wa-pl__row--current  { color: var(--ink-on-active-row); }
.wa-pl__row--selected { background: var(--surface-row-active); color: var(--ink-on-active-row); }

.wa-pl__index { flex: 0 0 auto; min-width: 30px; text-align: right; }

.wa-pl__title {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wa-pl__by {
  flex: 0 0 auto;
  font-family: var(--font-label);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--ink-on-row-dim);
}

.wa-pl__row--current .wa-pl__by,
.wa-pl__row--selected .wa-pl__by { color: var(--ink-on-active-row); }

.wa-pl__time { flex: 0 0 auto; font-variant-numeric: tabular-nums; text-align: right; }

.wa-pl__pane { display: flex; min-width: 0; }
.wa-pl__pane .wa-pl__list { flex: 1 1 auto; min-width: 0; }

.wa-pl__scroll {
  flex: 0 0 auto;
  width: 20px;
  background: var(--meter-track);
  padding: 2px;
}

.wa-pl__scroll-thumb {
  display: block;
  width: 100%;
  height: 40px;
  background: var(--control-face);
  border-style: solid;
  border-width: var(--edge-width);
  border-top-color: var(--control-light);
  border-left-color: var(--control-light);
  border-right-color: var(--control-dark);
  border-bottom-color: var(--control-dark);
}

.wa-pl__rail { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-width: 0; }
.wa-pl__rail .wa-toggle { height: 36px; min-width: 48px; }

.wa-pl__total {
  flex: 0 0 auto;
  font-family: var(--font-readout);
  font-size: 22px;
  line-height: 1;
  color: var(--readout-ink);
  padding: 4px var(--space-2);
  margin-inline-end: var(--space-1);
}

/* ------------------------------------------------------------- equalizer */

.wa-eq { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }

.wa-eq__head { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }

.wa-eq__curve {
  flex: 1 1 auto;
  min-width: 0;
  height: 34px;
  display: block;
  padding: var(--space-1);
  color: var(--accent-secondary);
  background-image: repeating-linear-gradient(90deg,
    var(--edge-hairline) 0 1px, transparent 1px 10%);
}

.wa-eq__curve svg { width: 100%; height: 100%; }

.wa-eq__scale {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  height: 126px;
  font-family: var(--font-label);
  font-size: var(--label-size);
  letter-spacing: 0;
  color: var(--accent-secondary);
}

/* flex-start so the +12db/0db/-12db scale lines up with the columns rather
   than with the frequency labels underneath them. */
.wa-eq__bands { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; }

.wa-eq__band {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

/* A band is not a bar that fills. It is a fixed gold column sunk into the
   window -- 4px wide at 1x, doubled here -- with the grip riding on it. */
.wa-eq__slider {
  position: relative;
  width: 100%;
  max-width: 28px;
  height: 126px;
  display: flex;
  justify-content: center;
}

/* The scale marks: a short rule either side of every column at +12db, 0db and
   -12db. Small, and most of why the original's equalizer reads as ruled. */
.wa-eq__slider::before,
.wa-eq__slider::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 7px;
  background-repeat: no-repeat;
  background-size: 7px 2px;
  background-position: left top, left 50%, left bottom;
  background-image:
    linear-gradient(var(--ink-muted), var(--ink-muted)),
    linear-gradient(var(--ink-muted), var(--ink-muted)),
    linear-gradient(var(--ink-muted), var(--ink-muted));
}

.wa-eq__slider::before { left: 0; }
.wa-eq__slider::after  { right: 0; }

.wa-eq__column {
  width: 12px;
  height: 100%;
  background: var(--accent-secondary);
  border-style: solid;
  border-width: 0 var(--edge-width);
  border-left-color: var(--edge-inset-left);
  border-right-color: var(--edge-inset-right);
}

.wa-eq__thumb {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  width: 22px;
  height: 22px;
  bottom: calc(var(--rk-eq-value, 50%) - 11px);
  background-color: var(--control-face);
  background-image: linear-gradient(180deg,
    transparent 0 32%, var(--control-ink) 32% 39%,
    transparent 39% 46%, var(--control-ink) 46% 53%,
    transparent 53% 60%, var(--control-ink) 60% 67%, transparent 67%);
  border-style: solid;
  border-width: var(--edge-width);
  border-top-color: var(--control-light);
  border-left-color: var(--control-light);
  border-right-color: var(--control-dark);
  border-bottom-color: var(--control-dark);
}

.wa-eq__label {
  font-family: var(--font-label);
  font-size: var(--label-size);
  letter-spacing: 0;
  color: var(--ink-secondary);
}