/* 1999.LOC — the audio tool's face.
 *
 * WINAMP 2. There is no other candidate: for anyone who had MP3s in 1999,
 * the player IS the look. Charcoal metal, a black display with the time in
 * green LCD digits, a real spectrum analyser, a scrolling title, kbps and
 * khz readouts, a gold-thumbed seek bar, and a playlist in green monospace
 * on black with the selection in that unmistakable blue.
 *
 * What is taken is the identity, not the skin file: the proportions and
 * colours are drawn from memory of the thing rather than traced, in this
 * site's own materials (system fonts, CSS bevels, one inline canvas). The
 * llama is not mentioned. Except just then.
 *
 * The rest of the window follows the deck into darkness, because a light
 * grey form under that display would read as two programs stacked. That
 * makes this the one dark face on the site, and every colour pair below was
 * measured rather than eyeballed: ink #e2e6ec on chrome #1d2025 is 13.0:1,
 * the note grey #a8aeb8 is 7.3:1, the LCD green #00e800 on black is 12.5:1,
 * the playlist green #00d400 is 10.4:1, and both lamp states clear 4.5:1
 * against the display (the unlit one measures 6.0:1).
 *
 * Scoped entirely under [data-app="audio"] like every other app face here.
 */

/* ---- the menu bar, pinned to the window --------------------------- */
[data-app="audio"] .app-window > .wa-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 2px 4px;
  background: #2b2f35;
  border-bottom: 1px solid #101215;
  /* Stated rather than inherited: outside the panels, so it would otherwise
     come out in the page's serif. */
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  line-height: 1.3;
  color: #e2e6ec;
}
[data-app="audio"] .app-window > .wa-menu .menu-title {
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  color: #e2e6ec;
  /* A thumb needs a target. */
  min-height: 26px;
}
[data-app="audio"] .app-window > .wa-menu .menu-title:hover,
[data-app="audio"] .app-window > .wa-menu .menu.is-open .menu-title {
  background: #3d434b;
  color: #ffffff;
}

/* The title bar: Winamp's brushed dark strip with the name in pale gold. */
[data-app="audio"] .client-title {
  background: linear-gradient(180deg, #3a4048 0%, #23272c 55%, #191c20 100%);
  color: #d8c690;
}
[data-app="audio"] .client-title h2 { color: #d8c690; letter-spacing: 0.12em; }

/* ---- the body ------------------------------------------------------ */
[data-app="audio"] .app-body {
  background: #1d2025;
  border-color: #101215;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  color: #e2e6ec;
}
/* The gutter. The shell sets `padding: 0` on an application's body, for the
   programs that lay themselves out in bands and bring their own spacing; this
   one is content, and with no gutter every line starts hard against the tube.
   A plain `[data-app] .app-body` loses to that shell rule, which carries an
   element plus two classes, which is why the padding this asked for never
   arrived. Naming the desk the window sits on wins on class count without
   reaching outside the app. */
[data-app="audio"] .desk-shell .app-window > .app-body { padding: 9px 14px; }

[data-app="audio"] .app-body h3 {
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 12px;
  color: #d8c690;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid #3a4048;
  padding-bottom: 3px;
  margin: 14px 0 8px 0;
}
[data-app="audio"] .app-body p,
[data-app="audio"] .app-body label,
[data-app="audio"] .app-body li {
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  color: #e2e6ec;
}
[data-app="audio"] .app-body .note { color: #a8aeb8; }
[data-app="audio"] .app-body > p,
[data-app="audio"] .app-body > div > p { max-width: 680px; }
[data-app="audio"] hr { border-color: #3a4048; }

/* What to do on this screen. The strip stays the same yellow every program
   here uses, past the dark ink rules above, both ends stated. */
[data-app="audio"] .app-body .wa-hint {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0 0 10px 0;
  padding: 6px 9px;
  background: #ffffe1;
  border: 1px solid #808080;
  font-size: 11.5px;
  line-height: 1.45;
  max-width: 820px;
}
[data-app="audio"] .app-body .wa-hint,
[data-app="audio"] .app-body .wa-hint * { color: #000000; }
[data-app="audio"] .app-body .wa-hint > .wa-hint-mark {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #23527c;
  color: #ffffff;
  font-weight: bold;
  font-style: italic;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
}

/* ---- THE DECK -------------------------------------------------------
   The main window. A raised charcoal case around a black display. */
[data-app="audio"] .wa-main {
  max-width: 680px;
  padding: 8px;
  background: linear-gradient(180deg, #33383f 0%, #23272c 100%);
  border: 2px outset #454b54;
}
[data-app="audio"] .wa-display {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: #000000;
  border: 2px inset #16181c;
}

/* The time, in the green that lit a million bedrooms. A button, because
   the original toggled to time-remaining when you clicked it, and so does
   this. */
[data-app="audio"] .wa-time {
  border: none;
  background: none;
  padding: 0 4px;
  cursor: pointer;
  font-family: "Courier New", Courier, monospace;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #00e800;
  text-shadow: 0 0 6px rgba(0, 232, 0, 0.55);
}
[data-app="audio"] .wa-time:focus-visible { outline: 1px dotted #00e800; }

[data-app="audio"] .wa-vis {
  background: #000000;
  border: 1px solid #16341a;
  flex: 0 0 auto;
}

[data-app="audio"] .wa-read {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  color: #00e800;
}
[data-app="audio"] .wa-lamps { display: flex; gap: 8px; }
[data-app="audio"] .wa-lamp {
  /* Off is legible, lit is unmistakable: the original greyed the unused
     one out, it did not hide it. #4f9955 on black measures 6.0:1. */
  color: #4f9955;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.08em;
}
[data-app="audio"] .wa-lamp.is-lit {
  color: #00e800;
  text-shadow: 0 0 5px rgba(0, 232, 0, 0.5);
}

/* The scrolling title. Winamp scrolled it whether it fitted or not; here
   it scrolls, and with animations reduced in the system settings it holds
   still and shows the plain name instead. */
[data-app="audio"] .wa-titlebox {
  margin: 6px 0;
  padding: 3px 6px;
  background: #000000;
  border: 2px inset #16181c;
  overflow: hidden;
  white-space: nowrap;
}
[data-app="audio"] .wa-titletext {
  display: inline-block;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  color: #00e800;
  animation: wa-marquee 14s linear infinite;
}
@keyframes wa-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  [data-app="audio"] .wa-titletext { animation: none; }
}

/* The transport: five little metal keys and the gold seek thumb. */
[data-app="audio"] .wa-transport {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  flex-wrap: wrap;
}
[data-app="audio"] .wa-btn {
  width: 34px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px outset #454b54;
  background: linear-gradient(180deg, #3a4048 0%, #262a2f 100%);
  color: #e2e6ec;
  cursor: pointer;
  touch-action: manipulation;
}
[data-app="audio"] .wa-btn:active {
  border-style: inset;
  background: linear-gradient(180deg, #1b1e22 0%, #23272c 100%);
}
[data-app="audio"] .wa-btn:focus-visible { outline: 1px dotted #e2e6ec; outline-offset: -3px; }

[data-app="audio"] .wa-seek {
  flex: 1 1 120px;
  min-width: 90px;
  height: 10px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(180deg, #101215 0%, #23272c 100%);
  border: 1px solid #454b54;
  border-radius: 2px;
}
[data-app="audio"] .wa-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid #6b5a23;
  background: linear-gradient(180deg, #e8d28a 0%, #c9a250 45%, #8a6f2f 100%);
  cursor: pointer;
}
[data-app="audio"] .wa-seek::-moz-range-thumb {
  width: 28px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid #6b5a23;
  background: linear-gradient(180deg, #e8d28a 0%, #c9a250 45%, #8a6f2f 100%);
  cursor: pointer;
}
[data-app="audio"] .wa-vol-label { color: #a8aeb8; font-size: 10px; text-transform: uppercase; }
[data-app="audio"] .wa-volume {
  flex: 0 1 90px;
  min-width: 60px;
  height: 8px;
  -webkit-appearance: none;
  appearance: none;
  /* The green-to-red ramp Winamp painted under its volume slider. */
  background: linear-gradient(90deg, #1c8a1c 0%, #b0b020 60%, #b02020 100%);
  border: 1px solid #454b54;
  border-radius: 2px;
}
[data-app="audio"] .wa-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 14px;
  border-radius: 2px;
  border: 1px solid #16181c;
  background: linear-gradient(180deg, #4a515a 0%, #2b2f35 100%);
  cursor: pointer;
}
[data-app="audio"] .wa-volume::-moz-range-thumb {
  width: 12px;
  height: 14px;
  border-radius: 2px;
  border: 1px solid #16181c;
  background: linear-gradient(180deg, #4a515a 0%, #2b2f35 100%);
  cursor: pointer;
}

/* ---- the edit controls ---------------------------------------------- */
[data-app="audio"] .trim-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 7px 0;
  max-width: 680px;
}
[data-app="audio"] .trim-row label { flex: 0 0 34px; color: #a8aeb8; }
[data-app="audio"] .trim-row input[type="range"] { flex: 1 1 auto; min-width: 80px; }
[data-app="audio"] .wa-field {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  max-width: 680px;
  margin: 0 0 7px 0;
}
[data-app="audio"] .wa-lcd-small {
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  color: #00e800;
  background: #000000;
  border: 1px inset #16181c;
  padding: 1px 6px;
  min-width: 52px;
  text-align: right;
}

/* The working sliders (trim, gain) in the deck's materials rather than the
   platform's blue, or the middle of the window reads as somebody else's
   program. Same dark groove as the seek, a plainer steel thumb. */
[data-app="audio"] .trim-row input[type="range"],
[data-app="audio"] .wa-field input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  background: linear-gradient(180deg, #101215 0%, #23272c 100%);
  border: 1px solid #454b54;
  border-radius: 2px;
}
[data-app="audio"] .trim-row input[type="range"]::-webkit-slider-thumb,
[data-app="audio"] .wa-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 16px;
  border-radius: 2px;
  border: 1px solid #16181c;
  background: linear-gradient(180deg, #5a626c 0%, #33383f 100%);
  cursor: pointer;
}
[data-app="audio"] .trim-row input[type="range"]::-moz-range-thumb,
[data-app="audio"] .wa-field input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 16px;
  border-radius: 2px;
  border: 1px solid #16181c;
  background: linear-gradient(180deg, #5a626c 0%, #33383f 100%);
  cursor: pointer;
}
[data-app="audio"] .wa-field input[type="range"] { flex: 0 1 160px; min-width: 100px; }

/* ---- controls -------------------------------------------------------- */
[data-app="audio"] button:not(.notice-x):not(.menu-title):not(.win-min):not(.wa-btn):not(.wa-time) {
  border: 2px outset #454b54;
  background: #33383f;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  padding: 3px 12px;
  color: #e2e6ec;
  cursor: pointer;
}
[data-app="audio"] button:not(.notice-x):not(.wa-btn):active { border-style: inset; }
[data-app="audio"] button:disabled { color: #9aa0aa; cursor: default; }
[data-app="audio"] select,
[data-app="audio"] input[type="text"],
[data-app="audio"] input[type="number"] {
  border: 2px inset #16181c;
  background: #000000;
  color: #00e800;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
}
[data-app="audio"] .dropzone {
  background: #000000;
  border: 2px inset #16181c;
  color: #e2e6ec;
  max-width: 680px;
}
[data-app="audio"] .dropzone strong { color: #00e800; }
[data-app="audio"] .dropzone span { color: #a8aeb8; }
[data-app="audio"] .dropzone.is-over { background: #0a1a0a; }

/* ---- THE PLAYLIST -----------------------------------------------------
   The other window everyone remembers: green monospace on black, the
   current entry in that blue. */
[data-app="audio"] .wa-playlist {
  max-width: 680px;
  background: #000000;
  border: 2px inset #16181c;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  max-height: 220px;
  overflow: auto;
}
[data-app="audio"] .wa-pl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  color: #00d400;
  cursor: pointer;
}
[data-app="audio"] .wa-pl-row:hover { background: #101a10; }
[data-app="audio"] .wa-pl-row.is-current { background: #0000c6; color: #ffffff; }
[data-app="audio"] .wa-pl-row:focus-visible { outline: 1px dotted #ffffff; outline-offset: -2px; }
[data-app="audio"] .wa-pl-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-app="audio"] .wa-pl-time { flex: 0 0 auto; }
[data-app="audio"] .wa-pl-acts { flex: 0 0 auto; display: flex; gap: 3px; }
[data-app="audio"] .wa-pl-acts button { padding: 1px 6px; font-size: 10px; }
[data-app="audio"] .wa-pl-empty { margin: 0; padding: 10px; color: #4f9955; font-style: italic; }

/* The boxes the site draws stay in daylight even on the dark face: a
   warning is a warning, not part of the theme. */
[data-app="audio"] .notice-box,
[data-app="audio"] .app-body details {
  background: #ffffe1;
  border: 1px solid #808080;
  max-width: 820px;
}
[data-app="audio"] .notice-box,
[data-app="audio"] .notice-box *,
[data-app="audio"] .app-body details,
[data-app="audio"] .app-body details * { color: #000000; }

/* ---- the recorder --------------------------------------------------
   A red dot on the button, solid at rest and blinking while the machine is
   actually taking sound in, which is the one state a recorder must never be
   ambiguous about. With animations reduced it stays solid red instead. */
[data-app="audio"] .wa-rec-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 3px;
  border-radius: 50%;
  background: #c40000;
  vertical-align: -1px;
}
[data-app="audio"] #rec-row.is-recording #rec-note { color: #ff6a6a; }
/* The Record button is hidden while recording, so the live dot sits on the
   note line, in front of the running clock. */
[data-app="audio"] #rec-row.is-recording #rec-note::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border-radius: 50%;
  background: #c40000;
  vertical-align: -1px;
  animation: wa-rec-blink 1s steps(1) infinite;
}
@keyframes wa-rec-blink {
  50% { background: #4a0000; }
}
@media (prefers-reduced-motion: reduce) {
  [data-app="audio"] #rec-row.is-recording #rec-note::before { animation: none; }
}

/* Legible on the dark ground, measured: 7.4:1 and 5.7:1. */
[data-app="audio"] .status { color: #7de37d; }
[data-app="audio"] .error { color: #ff9c9c; }
[data-app="audio"] .app-body a { color: #8ec7ff; }
[data-app="audio"] .app-body a:visited { color: #c0a8e8; }

/* ---- responsive ---------------------------------------------------- */
@media (max-width: 700px) {
  [data-app="audio"] .desk-shell .app-window > .app-body { padding: 9px 10px; }
  [data-app="audio"] .wa-time { font-size: 24px; }
  [data-app="audio"] .wa-display { gap: 8px; padding: 6px 8px; }
  [data-app="audio"] .wa-btn { width: 38px; height: 30px; }
  [data-app="audio"] .app-window > .wa-menu span { padding: 2px 5px; }
  [data-app="audio"] .trim-row { flex-wrap: wrap; }
  [data-app="audio"] .trim-row input[type="range"] { flex: 1 1 100%; order: 3; }
}