/* LLTM-amp: a player in the manner of later Winamp, with the stations as its library. Its window
   (_includes/amp.njk) is on its own page, on the front page, on each station's page, on Albums
   and in the lab; a page that has it loads this sheet. The window keeps its own small, dense
   type and its own colours, the way a desktop program would.

   Skins. Every colour in the window is one of the variables below, and so is every edge: how
   square the corners are, and the shadows that make a thing look raised or sunk. A skin is a
   block that sets them again for .wa[data-skin="its-name"], plus a button for it in the Options
   menu (amp.njk). The script only switches the attribute. A skin's button can also ask for the
   dial in place of the shelf (data-picker), and a skin can bring rules of its own and a backdrop
   for the page behind the window, as Toronado does further down. */
.wa {
  --w-font: 13px/1.35 Tahoma, "Segoe UI", Verdana, sans-serif;
  --w-body-1: #353a40;   /* the window, top to bottom */
  --w-body-2: #2b2f34;
  --w-bar-1: #474d54;    /* title bar */
  --w-bar-2: #2a2e33;
  --w-deep: #08090a;     /* sunken panes: lists, table, tree */
  --w-well: #101113;     /* shallow wells: the Spotify strip, the editor */
  --w-line: #0d0e10;     /* borders */
  --w-edge: #555c65;     /* the line under the tabs */
  --w-text: #cdd4db;
  --w-bright: #eef1f4;
  --w-dim: #87909a;
  --w-pick: #3d4d65;     /* the selected row */
  --w-pick-text: #fff;
  --w-lcd: #d6ebff;      /* the display */
  --w-lcd-bg: #000;
  --w-lcd-glow: rgba(140, 200, 255, .55);
  --w-lamp: #46505b;
  --w-lamp-on: #9fb6cc;
  --w-hot: #f0a63a;      /* pressed, warned, the needle */
  --w-list: #8fd08f;     /* playlist text */
  --w-btn-1: #5b626b;    /* buttons */
  --w-btn-2: #3a3f45;
  --w-btn-text: #e6eaee;
  --w-head-1: #555b63;   /* column headers */
  --w-head-2: #33373c;
  --w-tab-1: #3a3f45;    /* tabs, and the one in front */
  --w-tab-2: #2a2e33;
  --w-tab-text: #aab3bc;
  --w-tab-on-1: #666e78;
  --w-tab-on-2: #3f454c;
  --w-knob-1: #cfd5db;   /* the seek handle */
  --w-knob-2: #7f8891;
  --w-rim: rgba(255, 255, 255, .13);   /* the line just inside the window's edge */
  --w-btn-on: var(--w-hot);            /* a pressed button's label */
  --w-btn-off: #7b838c;                /* a key that can't be pressed */
  --w-menu: #2f3338;     /* menus */
  --w-menu-text: #cdd4db;
  --w-menu-pick: #3d4d65;
  --w-scroll: #5a626b;   /* scrollbars */
  --w-scroll-track: #111;
  /* A skin may also set --w-viz-1, -2 and -3 (the analyzer, bottom to top) and --w-viz-peak, as
     #rrggbb. Without them the analyzer takes the station's colour. */
  --w-radius: 5px;         /* corners: the window, its panes, buttons, the tabs' tops */
  --w-pane-radius: 3px;
  --w-btn-radius: 2px;
  --w-tab-radius: 4px;
  --w-frame: inset 0 0 0 1px var(--w-rim);                 /* edges: the window */
  --w-pane-edge: 0 1px 0 rgba(255, 255, 255, .1);          /* the three panes at the top */
  --w-list-edge: none;                                     /* lists, the table, the wells */
  --w-lcd-edge: none;                                      /* the display */
  --w-btn-edge: inset 0 1px 0 rgba(255, 255, 255, .22);    /* a button */
  --w-btn-edge-on: inset 0 1px 2px #000;                   /* switched on */
  --w-btn-edge-down: none;                                 /* held down */
  --w-head-edge: inset 0 1px 0 rgba(255, 255, 255, .18);   /* a column header */
  --w-title-art: none;     /* a background drawn along the title bar, between the menus and the station's name */
  /* The cover's place with nothing loaded: a whole background, each skin's own emblem. Slate's
     is the site's own disc, the one in the browser's tab. */
  --w-cover-art: #121315 url("/favicon.svg") center / 80% no-repeat;
  margin-top: 1.5rem;
  border: 1px solid #000;
  border-radius: var(--w-radius);
  background: linear-gradient(180deg, var(--w-body-1), var(--w-body-2) 5rem);
  box-shadow: var(--w-frame), 0 30px 60px -30px #000;
  color: var(--w-text);
  font: var(--w-font);
  overflow: hidden;
}
/* Classic: the first Winamp. Charcoal blue with square corners, every edge raised or sunk a
   pixel at a time, a green display, and gold lines along the title bar. */
.wa[data-skin="classic"] {
  --w-font: 12px/1.35 Arial, Helvetica, sans-serif;
  --w-body-1: #3b3c58;
  --w-body-2: #23232f;
  --w-bar-1: #4f5175;
  --w-bar-2: #2c2d42;
  --w-deep: #000;
  --w-well: #0a0a12;
  --w-line: #000;
  --w-edge: #6b6d92;
  --w-text: #c8c8d8;
  --w-bright: #fff;
  --w-dim: #8a8aa6;
  --w-pick: #0000c6;
  --w-lcd: #00e400;
  --w-lcd-glow: rgba(0, 228, 0, .5);
  --w-lamp: #0a4a0a;
  --w-lamp-on: #00e400;
  --w-hot: #ffd800;
  --w-list: #00e400;
  --w-btn-1: #55577c;
  --w-btn-2: #2f3048;
  --w-btn-text: #e8e8f4;
  --w-head-1: #4b4d70;
  --w-head-2: #2b2c42;
  --w-tab-1: #34354e;
  --w-tab-2: #26273a;
  --w-tab-text: #a8a8c4;
  --w-tab-on-1: #6a6c98;
  --w-tab-on-2: #3e4060;
  --w-knob-1: #d8d8e8;
  --w-knob-2: #8486a8;
  --w-radius: 0;
  --w-pane-radius: 0;
  --w-btn-radius: 0;
  --w-tab-radius: 0;
  --w-frame: inset 1px 1px 0 #9093bf, inset -1px -1px 0 #14141c, inset 2px 2px 0 #55577c, inset -2px -2px 0 #23232f;
  --w-pane-edge: -1px -1px 0 #14141c, 1px 1px 0 #7d80a8;
  --w-list-edge: -1px -1px 0 #14141c, 1px 1px 0 #7d80a8;
  --w-lcd-edge: -1px -1px 0 #14141c, 1px 1px 0 #7d80a8;
  --w-btn-edge: inset 1px 1px 0 #a9acd3, inset -1px -1px 0 #1a1b27;
  --w-btn-edge-on: inset 1px 1px 0 #1a1b27, inset -1px -1px 0 #a9acd3;
  --w-btn-edge-down: inset 1px 1px 0 #1a1b27, inset -1px -1px 0 #a9acd3;
  --w-head-edge: inset 1px 1px 0 #a9acd3, inset -1px -1px 0 #1a1b27;
  --w-title-art: linear-gradient(#b99d5a 0 1px, #f1dea0 1px 2px, transparent 2px 5px, #b99d5a 5px 6px, #f1dea0 6px 7px, transparent 7px) center / 100% 7px no-repeat;
  --w-cover-art: #000 url("skins/llama.svg") center 60% / 86% no-repeat;   /* a llama, as Winamp had */
}
/* Toronado: a black 1979 Oldsmobile with a red interior, parked in a synthwave sunset. Lacquer
   you can nearly see through, neon at every edge, chrome keys, a display the colour of the sun,
   and the dial of a car radio where the other skins have a shelf. More of it is further down. */
.wa[data-skin="toronado"] {
  --w-body-1: rgba(44, 16, 76, .86);
  --w-body-2: rgba(10, 4, 24, .9);
  --w-bar-1: rgba(78, 22, 118, .92);
  --w-bar-2: rgba(22, 8, 44, .94);
  --w-deep: rgba(5, 2, 14, .82);
  --w-well: rgba(18, 8, 36, .8);
  --w-line: #000;
  --w-edge: #ff4fd8;
  --w-text: #e6dcf5;
  --w-bright: #fff;
  --w-dim: #a593c6;
  --w-pick: #a3157f;
  --w-lcd: #ff7a5c;
  --w-lcd-bg: #0a0318;
  --w-lcd-glow: rgba(255, 79, 216, .7);
  --w-lamp: #3d1a5c;
  --w-lamp-on: #5ff0ff;
  --w-hot: #ffd84a;
  --w-list: #8df4ff;
  --w-btn-1: #f6f4ff;
  --w-btn-2: #8f89bb;
  --w-btn-text: #1a0b33;
  --w-btn-on: #c0127f;
  --w-btn-off: #7b74a0;
  --w-head-1: #efeaff;
  --w-head-2: #8f89bb;
  --w-tab-1: #24103f;
  --w-tab-2: #120726;
  --w-tab-text: #b9a6dd;
  --w-tab-on-1: #ff3fd1;
  --w-tab-on-2: #7a1fb0;
  --w-knob-1: #fff;
  --w-knob-2: #9f98cc;
  --w-menu: #16072c;
  --w-menu-text: #e6dcf5;
  --w-menu-pick: #a3157f;
  --w-scroll: #ff4fd8;
  --w-scroll-track: #12062b;
  --w-viz-1: #ff3d81;
  --w-viz-2: #ff8a3c;
  --w-viz-3: #ffd84a;
  --w-viz-peak: #ffffff;
  --w-frame: inset 0 0 0 1px #ff4fd8, 0 0 22px rgba(255, 79, 216, .45), 0 0 70px rgba(124, 58, 237, .35);
  --w-pane-edge: 0 0 0 1px rgba(255, 79, 216, .3), 0 0 14px rgba(255, 79, 216, .12);
  --w-list-edge: 0 0 0 1px rgba(95, 240, 255, .16);
  --w-lcd-edge: inset 0 0 22px rgba(255, 47, 146, .22), 0 0 0 1px rgba(95, 240, 255, .3);
  --w-btn-edge: inset 0 1px 0 #fff, 0 0 7px rgba(255, 79, 216, .4);
  --w-head-edge: inset 0 1px 0 #fff;
  --w-title-art: linear-gradient(#ffd84a 0 1px, transparent 1px 3px, #ff8a3c 3px 4px, transparent 4px 6px, #ff2f92 6px 7px, transparent 7px) center / 100% 7px no-repeat;
  --w-cover-art:
    url("skins/toronado/car.svg") center 69% / 96% auto no-repeat,
    linear-gradient(180deg, transparent 70%, #ff5ad9 70% 71.5%, #0a0318 71.5%),
    url("skins/toronado/sun.svg") center / 78% auto no-repeat,
    linear-gradient(180deg, #05020e, #2a0a4a 45%, #6a1470 70%);   /* the car at sunset */
}
.wa [hidden] { display: none !important; }
.wa button, .wa input { font: inherit; }
.wa :focus-visible { outline: 1px dotted var(--w-lcd); outline-offset: 1px; border-radius: 0; }

/* Chrome shared by every small button in the window. */
.wa-btn, .wa-keys button, .wa__tabs button {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  border: 1px solid var(--w-line);
  border-radius: var(--w-btn-radius);
  background: linear-gradient(180deg, var(--w-btn-1), var(--w-btn-2));
  box-shadow: var(--w-btn-edge);
  color: var(--w-btn-text);
  text-align: center;
}
.wa-btn { padding: 2px 10px; white-space: nowrap; }
.wa-btn:hover, .wa-keys button:hover:not(:disabled) { filter: brightness(1.14); }
.wa-btn:active, .wa-keys button:active:not(:disabled) { background: linear-gradient(180deg, var(--w-btn-2), var(--w-btn-1)); box-shadow: var(--w-btn-edge-down); }
.wa-btn[aria-pressed="true"], .wa-btn[aria-checked="true"] { background: linear-gradient(180deg, var(--w-btn-2), var(--w-btn-1)); box-shadow: var(--w-btn-edge-on); color: var(--w-btn-on); }
.wa__label { color: var(--w-dim); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }

/* ------------------------------------------------------------------ title bar and menus */
.wa__title { display: flex; align-items: center; gap: 10px; padding: 4px 8px; background: linear-gradient(180deg, var(--w-bar-1), var(--w-bar-2)); border-bottom: 1px solid var(--w-line); }
.wa__logo { width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle, #000 0 22%, var(--w-hot) 24% 34%, #1a1c1f 36% 100%); box-shadow: 0 0 0 1px #000; }
.wa__name { color: var(--w-bright); font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.wa__menus { display: flex; gap: 2px; }
.wa__menu { all: unset; cursor: pointer; padding: 1px 7px; border-radius: 2px; color: var(--w-text); }
.wa__menu:hover { background: rgba(255, 255, 255, .12); color: #fff; }
/* The space between the menus and the station's name is a skin's to draw on. */
.wa__title::after { content: ""; order: 1; flex: 1 1 0; min-width: 0; align-self: stretch; background: var(--w-title-art); }
.wa__now { order: 2; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--w-dim); font-size: 11px; letter-spacing: .06em; }
/* A held window, which a button on the page opens, is shut from the end of its title bar. */
.wa__close { all: unset; order: 3; cursor: pointer; padding: 0 6px 1px; border-radius: 2px; color: var(--w-text); font-size: 16px; line-height: 1; }
.wa__close:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.wa-pop {
  position: absolute;
  inset: auto;
  top: anchor(bottom);
  left: anchor(left);
  margin: 2px 0 0;
  padding: 2px;
  border: 1px solid #000;
  background: var(--w-menu);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 12px 24px -8px #000;
  color: var(--w-menu-text);
  font: 13px/1.35 Tahoma, "Segoe UI", Verdana, sans-serif;
}
.wa-pop button { all: unset; display: block; box-sizing: border-box; width: 100%; padding: 3px 22px; cursor: pointer; white-space: nowrap; }
.wa-pop button:hover, .wa-pop button:focus-visible { background: var(--w-menu-pick); color: #fff; }
.wa-pop button:disabled { cursor: default; background: none; color: var(--w-btn-off); }
.wa-pop button[aria-checked="true"]::before { content: "\2713"; display: inline-block; width: 14px; margin-left: -14px; }
.wa-pop hr { margin: 2px 0; border: 0; border-top: 1px solid #1a1c1f; }

/* ------------------------------------------------------------------ top row: player, info, playlist */
.wa__top { display: grid; grid-template-columns: 17.5rem minmax(0, 1fr) minmax(0, 17rem); gap: 5px; padding: 5px; }
.wa-main, .wa-info, .wa-pl { border: 1px solid var(--w-line); border-radius: var(--w-pane-radius); background: var(--w-deep); box-shadow: var(--w-pane-edge); }
.wa-main { padding: 6px; }
.wa-lcd { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; padding: 5px 7px; border: 1px solid #000; border-radius: var(--w-btn-radius); background: var(--w-lcd-bg); box-shadow: var(--w-lcd-edge); }
.wa-time { color: var(--w-lcd); font: 400 30px/1 "Segoe UI", Tahoma, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .02em; text-shadow: 0 0 7px var(--w-lcd-glow); }
.wa-lcd__side { display: grid; gap: 2px; min-width: 0; }
.wa-ticker { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--w-lcd); font-size: 12px; font-weight: 700; }
.wa-lamps { display: flex; gap: 8px; color: var(--w-lamp); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.wa-lamps .is-lit { color: var(--w-lamp-on); }
.wa-lamps .is-warn { color: var(--w-hot); }
.wa-mini { display: block; width: 76px; height: 14px; image-rendering: pixelated; }

.wa-seek { all: unset; display: block; box-sizing: border-box; width: 100%; height: 12px; margin: 7px 0 6px; cursor: pointer; }
.wa-seek:disabled { cursor: default; opacity: .45; }
.wa-seek::-webkit-slider-runnable-track { height: 6px; border: 1px solid #000; border-radius: var(--w-btn-radius); background: linear-gradient(180deg, #15171a, #2a2e33); }
.wa-seek::-moz-range-track { height: 4px; border: 1px solid #000; border-radius: var(--w-btn-radius); background: linear-gradient(180deg, #15171a, #2a2e33); }
.wa-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 10px; margin-top: -3px; border: 1px solid #000; border-radius: var(--w-btn-radius); background: linear-gradient(180deg, var(--w-knob-1), var(--w-knob-2)); }
.wa-seek::-moz-range-thumb { width: 24px; height: 8px; border: 1px solid #000; border-radius: var(--w-btn-radius); background: linear-gradient(180deg, var(--w-knob-1), var(--w-knob-2)); }

.wa-keys { display: flex; align-items: center; gap: 1px; }
.wa-keys button { width: 27px; height: 20px; display: grid; place-items: center; border-radius: 0; }
.wa-keys button:first-child { border-radius: var(--w-pane-radius) 0 0 var(--w-pane-radius); }
.wa-keys svg { width: 12px; height: 12px; fill: currentColor; }
.wa-keys button:disabled { cursor: default; color: var(--w-btn-off); }
.wa-keys .wa-keys__word { width: auto; margin-left: 8px; padding: 0 8px; border-radius: var(--w-pane-radius); font-size: 11px; }
.wa-keys .wa-keys__word[aria-pressed="true"] { background: linear-gradient(180deg, var(--w-btn-2), var(--w-btn-1)); box-shadow: var(--w-btn-edge-on); color: var(--w-btn-on); }

.wa-info { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 6px; align-items: start; }
.wa-cover { position: relative; display: block; width: 6.4rem; aspect-ratio: 1; background: #121315 center / cover; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.wa-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wa-cover:empty { background: var(--w-cover-art); }
.wa-info dl { margin: 0; display: grid; gap: 1px; min-width: 0; }
.wa-info dl div { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 6px; }
.wa-info dt { color: var(--w-dim); }
.wa-info dd { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--w-bright); }

.wa-pl { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 8.3rem; }
.wa-pl__list { list-style: none; position: relative; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--w-scroll) var(--w-scroll-track); }
.wa-pl__list button { all: unset; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; width: 100%; padding: 0 6px; cursor: pointer; color: var(--w-list); }
.wa-pl__list button span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wa-pl__list button:hover { background: rgba(255, 255, 255, .07); }
.wa-pl__list .is-on button { background: var(--w-pick); color: var(--w-pick-text); }
.wa-pl__foot { padding: 2px 6px; border-top: 1px solid #1c1f23; color: var(--w-dim); font-size: 11px; }

/* ------------------------------------------------------------------ the sound source */
.wa__spotify { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: center; margin: 0 5px 5px; padding: 5px 8px; border: 1px solid var(--w-line); border-radius: var(--w-pane-radius); background: var(--w-well); box-shadow: var(--w-list-edge); }
.wa__engine { min-height: 20px; }
/* Spotify's page is a light one. Told so, the frame stays see-through at its rounded corners;
   otherwise the browser backs it with white. */
.wa__engine iframe { display: block; width: 100%; border: 0; border-radius: 12px; color-scheme: light; }
.wa__hint { grid-column: 1 / -1; color: var(--w-hot); }
.wa__window { grid-column: 1 / -1; justify-self: start; }

/* ------------------------------------------------------------------ tabs and panels */
.wa__tabs { display: flex; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--w-edge); }
.wa__tabs button { padding: 3px 12px; border-bottom: 0; border-radius: var(--w-tab-radius) var(--w-tab-radius) 0 0; background: linear-gradient(180deg, var(--w-tab-1), var(--w-tab-2)); color: var(--w-tab-text); font-size: 11px; font-weight: 700; }
.wa__tabs button[aria-selected="true"] { background: linear-gradient(180deg, var(--w-tab-on-1), var(--w-tab-on-2)); color: var(--w-bright); }
.wa__panel { padding: 5px; }

.wa-library { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: 5px; }
.wa-tree { display: flex; flex-direction: column; align-content: start; padding: 4px 0; border: 1px solid var(--w-line); background: var(--w-deep); box-shadow: var(--w-list-edge); }
.wa-tree button { all: unset; cursor: pointer; padding: 2px 8px 2px 26px; color: var(--w-text); }
.wa-tree > button:first-child { padding-left: 8px; }
.wa-tree button:hover { color: #fff; }
.wa-tree button[aria-pressed="true"] { background: var(--w-pick); color: var(--w-pick-text); }
/* A family opens onto its series. */
.wa-tree .wa-tree__group { padding-left: 8px; }
.wa-tree__group::before { content: ""; display: inline-block; margin: 0 6px 1px 1px; border: 4px solid transparent; border-top-color: var(--w-dim); border-bottom-width: 0; }
.wa-tree__group[aria-expanded="false"]::before { transform: rotate(-90deg); }
.wa-tree__kids { display: flex; flex-direction: column; }
.wa-tree__kids.is-shut { display: none; }
.wa-lib { display: grid; gap: 5px; min-width: 0; }
.wa-tools { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.wa-tools input { min-width: 0; padding: 2px 6px; border: 1px solid var(--w-line); border-radius: 0; background: #000; color: #eef1f4; }

.wa-table { max-height: 21rem; overflow: auto; border: 1px solid var(--w-line); background: var(--w-deep); box-shadow: var(--w-list-edge); scrollbar-width: thin; scrollbar-color: var(--w-scroll) var(--w-scroll-track); }
.wa-table table { width: 100%; border-collapse: collapse; }
.wa-table th { position: sticky; top: 0; z-index: 1; padding: 2px 6px; border-right: 1px solid #1a1c1f; background: linear-gradient(180deg, var(--w-head-1), var(--w-head-2)); box-shadow: var(--w-head-edge); color: var(--w-btn-text); font-weight: 400; text-align: left; white-space: nowrap; }
.wa-table td { padding: 1px 6px; max-width: 22rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wa-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.wa-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .025); }
.wa-table tbody tr { cursor: default; }
.wa-table tbody tr.is-quiet { color: var(--w-dim); }
.wa-table tbody tr.is-picked { background: var(--w-pick); color: var(--w-pick-text); }
.wa-table tbody tr.is-on td:nth-child(2) { color: var(--w-hot); }
.wa-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.wa-status a { color: var(--w-text); }
.wa-status span { margin-right: auto; }

/* ------------------------------------------------------------------ picking a station
   The readout names the station in hand. Under it is the shelf or the dial: a skin's button in
   the Options menu says which (data-picker="dial"), and the script copies that to the window. */
.wa-pick { display: grid; gap: 4px; min-width: 0; padding: 6px 8px 0; border: 1px solid var(--w-line); background: var(--w-deep); box-shadow: var(--w-list-edge); }
.wa-pick__readout { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.wa-pick__call { color: var(--w-lcd); font: 400 22px/1 "Segoe UI", Tahoma, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .04em; text-shadow: 0 0 7px var(--w-lcd-glow); }
.wa-pick__name { color: var(--w-text); }
.wa[data-picker="dial"] .wa-shelf, .wa:not([data-picker="dial"]) .tuner__dial { display: none; }

/* The shelf: the stations of the series picked in the tree, as covers. */
.wa-shelf { position: relative; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 2px; max-height: 13.4rem; margin: 0 -4px; padding-bottom: 6px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--w-scroll) var(--w-scroll-track); }
.wa-shelf__tile { all: unset; box-sizing: border-box; display: grid; justify-items: center; gap: 3px; width: 5.5rem; padding: 5px 0 3px; cursor: pointer; color: var(--w-dim); font-size: 11px; font-variant-numeric: tabular-nums; }
.wa-shelf__tile:hover { background: rgba(255, 255, 255, .07); color: var(--w-text); }
.wa-shelf__tile[aria-pressed="true"] { background: var(--w-pick); color: var(--w-pick-text); }
.wa-shelf__art, .tuner__art { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #121315 center / cover; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.wa-shelf__art { width: 4.6rem; }
.wa-shelf__art img, .tuner__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* A cover is brought in after the page has loaded (amp.js) and fades in over its placeholder. */
.wa-shelf__art img, .tuner__art img { opacity: 0; transition: opacity .35s; }
.wa-shelf__art img.is-in, .tuner__art img.is-in { opacity: 1; }
/* A station with no cover yet shows its years. */
.wa-shelf__art > span, .tuner__art > span { position: absolute; inset: 0; display: grid; place-items: center; color: var(--w-dim); font-size: 11px; text-align: center; }

/* The dial: every station on one band, series after series with a gap between. The band slides
   and the needle crosses the dial with it (amp.js), so stations run from one end to the other
   wherever it is tuned. Where they all fit, they spread to fill it. */
.tuner__dial { position: relative; overflow: hidden; }
.tuner__scale { --stop: 5.6rem; position: relative; list-style: none; display: flex; justify-content: space-between; overflow-x: auto; padding-top: 1.5rem; scrollbar-width: none; cursor: grab; }
.tuner__scale::-webkit-scrollbar { display: none; }
.tuner__stop { position: relative; flex: 0 0 var(--stop); padding-bottom: 1.2rem; }
.tuner__stop--lead:not(:first-child) { margin-left: calc(var(--stop) * .75); }
/* Each series is named where it begins. */
.tuner__band { position: absolute; left: .85rem; top: -1.25rem; white-space: nowrap; color: var(--w-dim); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
/* A series of one at the very end is named from the right, so its name doesn't lengthen the band. */
.tuner__stop--lead:last-child .tuner__band { left: auto; right: .5rem; }
/* The printed scale: five small ticks to a station, a long one at its centre. */
.tuner__stop::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .4rem; background: repeating-linear-gradient(90deg, rgba(205, 212, 219, .3) 0 1px, transparent 1px 20%); }
.tuner__stop::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: .8rem; background: var(--w-text); }
.tuner__stop button { all: unset; cursor: pointer; display: grid; justify-items: center; gap: .4rem; width: 100%; opacity: .4; transition: opacity .2s; }
.tuner__stop button:hover { opacity: .8; }
.tuner__stop.is-tuned button { opacity: 1; }
.tuner__art { width: 3.9rem; transition: transform .25s var(--ease); }
.tuner__stop.is-tuned .tuner__art { transform: scale(1.12); box-shadow: 0 0 0 2px var(--accent); }
.tuner__id { color: var(--w-dim); font-size: 11px; font-variant-numeric: tabular-nums; }
.tuner__stop.is-tuned .tuner__id { color: var(--w-bright); }
.tuner__needle { position: absolute; left: var(--needle, 50%); bottom: 0; width: 2px; height: 1.1rem; margin-left: -1px; background: var(--w-hot); pointer-events: none; }
.tuner__needle::before { content: ""; position: absolute; left: -4px; top: -6px; border: 5px solid transparent; border-top-color: var(--w-hot); border-bottom: 0; }

/* ------------------------------------------------------------------ visualization */
.wa-vis { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 5px; align-items: start; }
.wa-screen { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--w-line); background: #000; overflow: hidden; }
.wa-screen canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.wa-screen__name { position: absolute; left: 8px; bottom: 6px; right: 7rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #fff; font-size: 11px; text-shadow: 0 0 4px #000, 0 0 2px #000; pointer-events: none; }
.wa-screen .wa-btn { position: absolute; right: 6px; bottom: 6px; }
.wa-screen:fullscreen { border: 0; aspect-ratio: auto; }
.wa-presets { display: grid; gap: 5px; min-width: 0; }
.wa-presets__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.wa-presets__bar input[type="number"] { width: 3.6rem; padding: 1px 4px; border: 1px solid var(--w-line); background: #000; color: #eef1f4; }
.wa-presets__list { max-height: 17rem; overflow-y: auto; padding: 2px 0; border: 1px solid var(--w-line); background: var(--w-deep); box-shadow: var(--w-list-edge); scrollbar-width: thin; scrollbar-color: var(--w-scroll) var(--w-scroll-track); }
.wa-presets__list h3 { margin: 0; padding: 3px 6px 1px; color: var(--w-dim); font: inherit; }
.wa-presets__list ul { list-style: none; }
.wa-presets__list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px; align-items: center; padding: 0 4px; }
.wa-presets__list li.is-on { background: var(--w-pick); color: var(--w-pick-text); }
.wa-presets__list input { margin: 0; accent-color: var(--w-hot); }
.wa-presets__list button { all: unset; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 1px 0; }
.wa-presets__list button:hover { color: #fff; }
.wa-presets__list .x { padding: 0 5px; color: var(--w-dim); }
.wa-editor { display: grid; gap: 3px; padding: 6px; border: 1px solid var(--w-line); background: var(--w-well); }
.wa-editor label { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: 6px; align-items: center; }
.wa-editor input[type="text"] { padding: 1px 4px; border: 1px solid var(--w-line); background: #000; color: #eef1f4; }
.wa-editor input[type="range"] { accent-color: var(--w-hot); width: 100%; }
.wa-editor input[type="color"] { width: 3rem; height: 1.3rem; padding: 0; border: 1px solid var(--w-line); background: #000; }
.wa-editor p { color: var(--w-dim); }
.wa-editor .wa-presets__bar { margin-top: 3px; }

/* ------------------------------------------------------------------ Toronado: past the variables
   What the variables can't say: lettering in chrome and in neon, lines across the display, and
   the dial dressed as a car radio lit from behind. The wide face and the pen are the site's own
   (site.css). */
.wa[data-skin="toronado"] .wa__name,
.wa[data-skin="toronado"] .wa-pick__call {
  padding-right: .18em;   /* the slant would otherwise be cut off at the right */
  background: linear-gradient(180deg, #fff 8%, #9fe9ff 42%, #3b1a7a 51%, #ff7ad9 61%, #ffe9a8 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font: italic 900 14px/1 var(--wide);
  font-stretch: 150%;
  letter-spacing: .04em;
  text-shadow: none;
  filter: drop-shadow(0 0 5px rgba(255, 79, 216, .75));
}
.wa[data-skin="toronado"] .wa-time {
  background: linear-gradient(180deg, #fff27a 18%, #ffb347 45%, #ff5f6d 64%, #ff2fa0 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 6px rgba(255, 79, 216, .65));
}
.wa[data-skin="toronado"] .wa-lcd {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 3px),
    radial-gradient(120% 140% at 0 100%, rgba(255, 47, 146, .24), transparent 60%),
    var(--w-lcd-bg);
}
.wa[data-skin="toronado"] .wa-ticker { color: #8df4ff; text-shadow: 0 0 6px rgba(95, 240, 255, .7); }
.wa[data-skin="toronado"] .wa-lamps .is-lit,
.wa[data-skin="toronado"] .wa-lamps .is-warn { text-shadow: 0 0 6px currentColor; }
.wa[data-skin="toronado"] .wa-tree button[aria-pressed="true"],
.wa[data-skin="toronado"] .wa-pl__list .is-on button,
.wa[data-skin="toronado"] .wa-presets__list li.is-on { background: linear-gradient(90deg, #ff2f92, #7a1fb0); }
.wa[data-skin="toronado"] .wa-table tbody tr.is-on td:nth-child(2) { text-shadow: 0 0 6px rgba(255, 216, 74, .6); }

/* The radio. */
.wa[data-skin="toronado"] .wa-pick {
  padding: 10px 12px 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(8, 3, 22, .92), rgba(32, 8, 58, .9) 60%, rgba(122, 20, 112, .6));
  box-shadow: inset 0 0 0 1px rgba(255, 79, 216, .55), inset 0 -34px 40px -30px rgba(255, 138, 60, .4), 0 0 18px rgba(255, 79, 216, .25);
}
.wa[data-skin="toronado"] .wa-pick__readout { align-items: center; gap: 0 1rem; min-height: 2.7rem; }
.wa[data-skin="toronado"] .wa-pick__call { font-size: 2rem; filter: drop-shadow(0 0 8px rgba(255, 79, 216, .6)); }
/* The station's name, as it was written on the disc, in neon. */
.wa[data-skin="toronado"] .wa-pick__name {
  color: #ff7ae0;
  font: 400 1.75rem/1 var(--hand);
  text-shadow: 0 0 5px rgba(255, 79, 216, .95), 0 0 18px rgba(255, 47, 146, .7);
  transform: rotate(-4deg);
  transform-origin: left center;
}
.wa[data-skin="toronado"] .tuner__scale { --stop: 5.8rem; padding-top: 1.75rem; }
.wa[data-skin="toronado"] .tuner__stop { padding-bottom: 1.8rem; }   /* a taller scale, so the needle clears the numbers */
.wa[data-skin="toronado"] .tuner__band { color: #5ff0ff; font: italic 800 10px/1 var(--wide); font-stretch: 130%; letter-spacing: .14em; text-shadow: 0 0 6px rgba(95, 240, 255, .8); }
.wa[data-skin="toronado"] .tuner__stop::before { background: repeating-linear-gradient(90deg, rgba(255, 79, 216, .8) 0 1px, transparent 1px 20%); }
.wa[data-skin="toronado"] .tuner__stop::after { background: #ffd84a; box-shadow: 0 0 6px #ff8a3c; }
.wa[data-skin="toronado"] .tuner__stop button { opacity: .55; }
.wa[data-skin="toronado"] .tuner__art { box-shadow: 0 0 0 1px rgba(95, 240, 255, .45); }
.wa[data-skin="toronado"] .tuner__stop.is-tuned .tuner__art { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #ff2f92, 0 0 22px rgba(255, 47, 146, .9), 0 0 44px rgba(255, 138, 60, .45); }
.wa[data-skin="toronado"] .tuner__id { position: relative; color: #8df4ff; font: 700 11px/1 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .06em; }   /* positioned, to stand in front of the tuned cover's glow */
.wa[data-skin="toronado"] .tuner__stop.is-tuned .tuner__id { color: #fff6c4; text-shadow: 0 0 5px #ffd84a, 0 0 12px rgba(255, 138, 60, .9); }
/* The line the scale stands on, and the needle, lit like a tube. */
.wa[data-skin="toronado"] .tuner__dial::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: #ff5ad9; box-shadow: 0 0 10px 1px #ff2f92; pointer-events: none; }
.wa[data-skin="toronado"] .tuner__needle { z-index: 1; width: 3px; height: 1.3rem; margin-left: -1.5px; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, #fff, #ffd84a 45%, #ff2f92); box-shadow: 0 0 6px #ff2f92, 0 0 16px rgba(255, 138, 60, .95), 0 0 30px rgba(255, 47, 146, .6); }
.wa[data-skin="toronado"] .tuner__needle::before { left: -4.5px; top: -7px; border-width: 6px; border-top-color: #fff; filter: drop-shadow(0 0 4px #ff2f92); }

/* ------------------------------------------------------------------ Toronado: the backdrop
   The one skin that reaches past the window. While it is on, a scene sits behind the page above
   and around the window: a sky and a sun down to a horizon, a grid floor below it, and the car
   on the floor at the window's right. The scene is an element beside the window in its stage
   (amp.njk), measured from the window's top edge, so it stays lined up with the window at any
   width and goes wherever the window goes. */
.wa-stage { position: relative; }
.wa-scene { display: none; }
/* The page's own black would cover anything drawn behind it; the same black is on html. */
body:has(.wa[data-skin="toronado"]) { background: none; }
.wa[data-skin="toronado"] ~ .wa-scene {
  /* How far above the window the horizon sits, which is the room the page's lede takes: the one
     length that depends on the page. Then the sky's height, the width of the drawing (the car
     fills most of it), how far down the floor from the horizon the car stands (as a share of
     that width), and how far the floor runs past the window on the right. */
  --t-lift: 4.7rem;
  --t-sky: 16rem;
  --t-car: clamp(13.5rem, 33vw, 28rem);
  --t-drop: .03;
  --t-side: max(var(--gutter), (100vw - var(--page)) / 2 - 9px);
  display: block;
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 0;
  pointer-events: none;
}
/* Below this width the lab's lede runs to two lines. */
@media (max-width: 36.2rem) {
  .wa[data-skin="toronado"] ~ .wa-scene { --t-lift: 6.5rem; }
}
/* From this width the car is clear of the lede's end, and can come further down the floor. */
@media (min-width: 60rem) {
  .wa[data-skin="toronado"] ~ .wa-scene { --t-drop: .11; }
}
.wa-scene span { position: absolute; }
/* The sky fades up into the page's black and ends in the line of the horizon. It is painted as a
   border image so that it can run to both edges of the screen without widening the page. */
.wa-scene__sky {
  inset: auto 0 var(--t-lift);
  height: var(--t-sky);
  border-image: linear-gradient(0deg, #ff5ad9 0 1px, #6a1470 1px, #2a0a4a 26%, #0c0320 60%, transparent) fill 0 / 0 / 0 100vw;
}
/* The sun stands behind the hood, its lower part below the horizon. */
.wa-scene__sun {
  right: calc(var(--t-car) * .504);
  bottom: var(--t-lift);
  width: calc(var(--t-car) * .56);
  height: calc(var(--t-car) * .33);
  background: url("skins/toronado/sun.svg") center top / 100% auto no-repeat;
}
/* The floor: a flat grid laid back from the horizon, its lines meeting at a point under the car.
   The ground is the part of it that shows. On the right it stops 9px short of where the screen
   would end without a scrollbar (--t-side): a stylesheet cannot tell whether one is there, and
   running past the edge would let the page scroll sideways. */
.wa-scene__ground {
  top: calc(-1 * var(--t-lift));
  left: calc(50% - 50vw);
  right: calc(-1 * var(--t-side));
  height: 36rem;
  overflow: hidden;
}
.wa-scene__floor {
  inset: 0 0 auto;
  height: 22rem;
  transform-origin: calc(100% - var(--t-side) - var(--t-car) / 2) 0;
  transform: perspective(26rem) rotateX(68deg);
  background:
    linear-gradient(90deg, rgba(255, 79, 216, .5) 0 1.5px, transparent 1.5px) 0 0 / 3rem 100%,
    linear-gradient(180deg, rgba(255, 79, 216, .5) 0 1.5px, transparent 1.5px) 0 0 / 100% 3rem,
    #06030c;
  -webkit-mask: linear-gradient(180deg, transparent, #000 20%, #000 50%, transparent);
  mask: linear-gradient(180deg, transparent, #000 20%, #000 50%, transparent);
  animation: toronado-road .7s linear infinite paused;
}
/* The road moves while a song plays. */
.wa.is-playing[data-skin="toronado"] ~ .wa-scene .wa-scene__floor { animation-play-state: running; }
@keyframes toronado-road { to { background-position: 3rem 0, 0 0; } }
/* The car, and what moves around it, sit in a box that ends where the ground does, so that the
   smoke drifting off behind cannot widen the page. */
.wa-scene__air {
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(-1 * var(--t-side));
  height: calc(var(--t-lift) + var(--t-car) * .5);
  overflow: hidden;
}
/* The car's tail is at the window's right edge. It stands down the floor from the horizon by
   --t-drop, which leaves the sun showing over the hood. */
.wa-scene__car {
  right: var(--t-side);
  bottom: calc(var(--t-lift) - var(--t-car) * (var(--t-drop) + .0318));
  width: var(--t-car);
  aspect-ratio: 880 / 268;
  background: url("skins/toronado/car.svg") center / contain no-repeat;
}
/* Its wheels. Each cover is drawn again over the one on the car (the numbers are where the hubs
   are in car.svg), and turns, a little blurred, while a song plays. The car faces left, so
   they turn that way. */
.wa-scene__wheel { top: 57.761%; left: 19.091%; width: 7.2727%; aspect-ratio: 1; background: url("skins/toronado/wheel.svg") center / contain no-repeat; }
.wa-scene__wheel + .wa-scene__wheel { left: 70.909%; }
.wa.is-playing[data-skin="toronado"] ~ .wa-scene .wa-scene__wheel { filter: blur(calc(var(--t-car) * .0016)); animation: toronado-wheel .42s linear infinite; }
@keyframes toronado-wheel { to { transform: rotate(-360deg); } }
/* Its exhaust, from an engine that burnt oil like fuel: puffs, white going to purple, that leave
   the tailpipe one after another, swell, and thin out behind the bumper. Only while a song
   plays. */
.wa-scene__smoke { top: 73%; left: 96.4%; }
.wa-scene__smoke i {
  position: absolute;
  width: calc(var(--t-car) * .06);
  height: calc(var(--t-car) * .06);
  margin: calc(var(--t-car) * -.03);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(250, 236, 255, .92), rgba(205, 140, 255, .55) 45%, rgba(150, 70, 240, 0) 70%);
  opacity: 0;
}
.wa-scene__smoke i:nth-child(2) { animation-delay: -.55s; }
.wa-scene__smoke i:nth-child(3) { animation-delay: -1.1s; }
.wa-scene__smoke i:nth-child(4) { animation-delay: -1.65s; }
.wa-scene__smoke i:nth-child(5) { animation-delay: -2.2s; }
.wa.is-playing[data-skin="toronado"] ~ .wa-scene .wa-scene__smoke i { animation-name: toronado-smoke; animation-duration: 2.75s; animation-timing-function: ease-out; animation-iteration-count: infinite; }
@keyframes toronado-smoke {
  0% { transform: none; opacity: 0; }
  10% { opacity: .8; }
  100% { transform: translate(calc(var(--t-car) * .13), calc(var(--t-car) * -.14)) scale(3.4); opacity: 0; }
}

/* ------------------------------------------------------------------ layouts
   How much of the window shows, by data-layout on it (amp.js). "library" is all of it; "compact"
   is the player alone, the top row and Spotify's strip, as Winamp could be the player with or
   without its library. A window held to one station (data-locked, on that station's page) has
   no tree, no way to pick another station and no big screen; opened, its library is that
   station's songs. Each size below is behind its own width, so the narrow-screen rules at the
   foot of this sheet still decide how the top row stacks. */
.wa-stage { margin-bottom: clamp(3rem, 7vw, 5rem); scroll-margin: 1rem 0 7rem; }
.wa[data-layout="compact"] .wa__tabs,
.wa[data-layout="compact"] .wa__panel,
.wa[data-locked] .wa__tabs,
.wa[data-locked] .wa-tree,
.wa[data-locked] .wa-pick,
.wa[data-locked] .wa-vis,
.wa[data-locked] [data-page],
.wa[data-locked] [data-cmd="tab-viz"],
.wa[data-locked] [data-cmd="full"],
.wa[data-locked] .wa-pop [data-cmd="lock"],
.wa[data-layout="compact"] [data-cmd="compact"],
.wa[data-locked][data-layout="library"] [data-cmd="tab-library"] { display: none; }
.wa[data-locked] .wa-library { grid-template-columns: minmax(0, 1fr); }
/* A window of albums: an album's songs have no tier and no play count. */
.wa[data-kind="albums"] .wa-table th:nth-child(4), .wa[data-kind="albums"] .wa-table td:nth-child(4),
.wa[data-kind="albums"] .wa-table th:nth-child(5), .wa[data-kind="albums"] .wa-table td:nth-child(5) { display: none; }
@media (min-width: 641px) {
  .wa[data-layout="compact"] .wa-cover { width: 9.6rem; }
  .wa[data-layout="compact"] .wa-pl { height: 11.5rem; }
}
@media (min-width: 901px) {
  .wa[data-layout="compact"] .wa__top { grid-template-columns: 17.5rem minmax(0, 1fr) minmax(0, 1.25fr); }
}

/* On the front page the window follows the lead, whose buttons would stand where the lab has an
   empty stretch beside its lede; on the amp's own page it follows the big struck-out title. Under
   Toronado the window makes room above itself for the car and the sun, and the car parks 1rem
   above it at every width. The room is the window's own margin, which passes through the stage,
   so the scene is still measured from the window. */
.lead ~ .wa-stage .wa[data-skin="toronado"],
.page-head--amp ~ .wa-stage .wa[data-skin="toronado"] { margin-top: calc(clamp(13.5rem, 33vw, 28rem) * .4 + 1rem); }
.lead ~ .wa-stage .wa[data-skin="toronado"] ~ .wa-scene,
.page-head--amp ~ .wa-stage .wa[data-skin="toronado"] ~ .wa-scene { --t-lift: calc(var(--t-car) * (var(--t-drop) + .0318) + 1rem); }

/* ------------------------------------------------------------------ bench */
.bench { margin-top: clamp(3rem, 7vw, 5rem); padding-top: 2rem; border-top: 1px solid var(--rule); }
.bench__checks { margin: 1.2rem 0 0; max-width: 48rem; }
.bench__checks div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1.5rem; padding: .55rem 0; border-top: 1px solid var(--rule); }
.bench__checks dt { color: var(--paper); }
.bench__checks dd { margin: 0; color: var(--dim); }
.bench__checks dd[data-state="pass"] { color: #7bd693; }
.bench__checks dd[data-state="fail"] { color: #ff9783; }
.bench__log {
  margin: 1.2rem 0 0;
  max-height: 16rem;
  overflow: auto;
  padding: .8rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: #050506;
  color: var(--silver);
  font: .8125rem/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace;
  white-space: pre-wrap;
}

@media (max-width: 900px) {
  .wa__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wa-main { grid-column: 1 / -1; }
  .wa-vis { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .wa__top { grid-template-columns: 1fr; }
  .wa-library { grid-template-columns: 1fr; }
  /* The tree lies down as a row of its series. */
  .wa-tree { flex-direction: row; flex-wrap: wrap; gap: 0 4px; }
  .wa-tree button, .wa-tree button:first-child { padding: 2px 8px; }
  .wa-tree .wa-tree__group { display: none; }
  .wa-tree__kids, .wa-tree__kids.is-shut { display: contents; }
  .wa-cover { width: 4.6rem; }
  .tuner__scale, .wa[data-skin="toronado"] .tuner__scale { --stop: 4.8rem; }
  .tuner__art { width: 3.4rem; }
  .wa-shelf__tile { width: 4.7rem; }
  .wa-shelf__art { width: 4rem; }
  .wa[data-skin="toronado"] .wa-pick__call { font-size: 1.55rem; }
  .wa[data-skin="toronado"] .wa-pick__name { font-size: 1.4rem; }
  .wa-table th:nth-child(4), .wa-table td:nth-child(4), .wa-table th:nth-child(5), .wa-table td:nth-child(5) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tuner__stop button, .tuner__art, .wa-shelf__art img, .tuner__art img { transition: none; }
  .wa-scene__floor { animation: none; }
  .wa.is-playing[data-skin="toronado"] ~ .wa-scene .wa-scene__wheel { filter: none; animation: none; }
  .wa.is-playing[data-skin="toronado"] ~ .wa-scene .wa-scene__smoke i { animation-name: none; }
}