/* ===========================================================================
   DICEY RADIO — modernized-retro music player shell
   Themeable, draggable, vector UI. Plain CSS (no build step).
   ---------------------------------------------------------------------------
   THEME SYSTEM
   Every skin is just a set of custom properties applied via [data-skin="..."]
   on #dr-desktop. Add a skin by copying a block and changing the values.
   ===========================================================================*/

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Share+Tech+Mono&display=swap');

:root{
  --font-ui: 'Chakra Petch', system-ui, sans-serif;     /* chrome / wordmarks */
  --font-read: 'Share Tech Mono', ui-monospace, monospace; /* readouts / lists */

  /* geometry (shared across skins) */
  --radius: 7px;
  --screen-radius: 4px;
  --titlebar-h: 26px;
  --win-w: 432px;
}

/* ---- SKIN: Dicey Green (default — brand greens) ------------------------- */
[data-skin="dicey"]{
  --bg: #0e1a12;
  --bg-grad: linear-gradient(180deg,#15281b 0%,#0c1810 100%);
  --body-edge: #2a523a;
  --label: #9fe0b6;            /* labels printed on the window body */
  --label-dim: #5e9372;
  --titlebar: linear-gradient(180deg,#3dee8c 0%,#00ab4c 48%,#0a5c30 100%);
  --titlebar-text: #06140c;
  --screen: #050e08;
  --screen-edge: #1f5034;
  --accent: #00ab4c;          /* dicey-500 brand green */
  --accent-2: #3dee8c;        /* dicey-bright highlight */
  --accent-3: #c6ff5e;        /* tertiary / peaks */
  --read: #3dee8c;            /* readout text */
  --read-dim: #1d7747;
  --led-on: #c6ff5e;
  --led-off: #1f3a28;
  --btn: linear-gradient(180deg,#1c3a26 0%,#122418 100%);
  --btn-edge: #36684a;
  --btn-glyph: #c6ffd9;
  --thumb: var(--accent-2);
  --glow: 0 0 9px;
  --scan: rgba(0,0,0,.30);
  --desk: radial-gradient(125% 120% at 50% 0%, #11301c 0%, #07120b 60%, #030905 100%);
}

/* ---- SKIN: Aurora (cyan/green on deep blue) ---------------------------- */
[data-skin="aurora"]{
  --bg: #0c1a2b;
  --bg-grad: linear-gradient(180deg,#11263d 0%,#0a1626 100%);
  --body-edge: #1d4a63;
  --label: #8fd6e8;
  --label-dim: #4f8197;
  --titlebar: linear-gradient(180deg,#27d6ff 0%,#1c86c9 50%,#123a78 100%);
  --titlebar-text: #effbff;
  --screen: #04101a;
  --screen-edge: #15506a;
  --accent: #2ce8ff;
  --accent-2: #57ff9d;
  --accent-3: #ff5ccf;
  --read: #4dffd0;
  --read-dim: #1c7d75;
  --led-on: #57ff9d;
  --led-off: #16352f;
  --btn: linear-gradient(180deg,#16334a 0%,#0e2236 100%);
  --btn-edge: #2a607f;
  --btn-glyph: #b6ecff;
  --thumb: var(--accent);
  --glow: 0 0 9px;
  --scan: rgba(0,0,0,.28);
  --desk: radial-gradient(125% 120% at 50% 0%, #0f2a44 0%, #07131f 60%, #03080e 100%);
}

/* ---- SKIN: Amber CRT --------------------------------------------------- */
[data-skin="amber"]{
  --bg: #1c1407;
  --bg-grad: linear-gradient(180deg,#2a1f0c 0%,#171003 100%);
  --body-edge: #543c14;
  --label: #e7b969;
  --label-dim: #8a6a36;
  --titlebar: linear-gradient(180deg,#ffb03a 0%,#c5781a 50%,#7a4710 100%);
  --titlebar-text: #fff3df;
  --screen: #0f0a02;
  --screen-edge: #5a3f12;
  --accent: #ffb03a;
  --accent-2: #ff7a3a;
  --accent-3: #ffd97a;
  --read: #ffb43e;
  --read-dim: #8a5e1d;
  --led-on: #ffd97a;
  --led-off: #3a2a0e;
  --btn: linear-gradient(180deg,#33260f 0%,#221908 100%);
  --btn-edge: #6a4c1c;
  --btn-glyph: #ffd9a0;
  --thumb: var(--accent);
  --glow: 0 0 9px;
  --scan: rgba(0,0,0,.32);
  --desk: radial-gradient(125% 120% at 50% 0%, #2a1d09 0%, #140d03 60%, #080500 100%);
}

/* ---- SKIN: Chrome (brushed metal / green LCD) -------------------------- */
[data-skin="chrome"]{
  --bg: #c2c7cd;
  --bg-grad: linear-gradient(180deg,#e7eaed 0%,#b4bac1 52%,#9aa1a9 100%);
  --body-edge: #7c848d;
  --label: #2b3138;            /* dark labels on bright metal */
  --label-dim: #5d656e;
  --titlebar: linear-gradient(180deg,#5b636c 0%,#3c434b 50%,#2a3036 100%);
  --titlebar-text: #eef1f4;
  --screen: #08120a;
  --screen-edge: #586b59;
  --accent: #c4d62a;
  --accent-2: #74c92e;
  --accent-3: #b7e84a;
  --read: #b7e84a;
  --read-dim: #5a7a2e;
  --led-on: #b7e84a;
  --led-off: #2c3a28;
  --btn: linear-gradient(180deg,#eceff2 0%,#c0c6cd 50%,#a6adb5 100%);
  --btn-edge: #868d96;
  --btn-glyph: #2b3138;
  --thumb: #74c92e;
  --glow: 0 0 7px;
  --scan: rgba(0,0,0,.18);
  --desk: radial-gradient(125% 120% at 50% 0%, #4a5158 0%, #2b3036 60%, #1a1d21 100%);
}

/* ===========================================================================
   BASE / DESKTOP
   ===========================================================================*/
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  font-family:var(--font-read);
  background:#05060a;
  color:var(--label);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  user-select:none;
}

#dr-desktop{
  position:fixed; inset:0;
  background:var(--desk);
  overflow:hidden;
}
/* faint dotted grid like a CRT desktop */
#dr-desktop::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:22px 22px;
  mask:radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 100%);
}

/* ===========================================================================
   WINDOW CHROME
   ===========================================================================*/
.dr-window{
  position:absolute;
  width:var(--win-w);
  background:var(--bg-grad);
  border:1px solid var(--body-edge);
  border-radius:var(--radius);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 18px 40px -16px rgba(0,0,0,.8),
    0 0 0 1px rgba(0,0,0,.4);
  z-index:10;
}
.dr-window.is-active{ z-index:40; }
.dr-window.is-active .dr-titlebar{ filter:brightness(1.08) saturate(1.1); }

.dr-titlebar{
  height:var(--titlebar-h);
  display:flex; align-items:center; gap:8px;
  padding:0 6px 0 8px;
  background:var(--titlebar);
  color:var(--titlebar-text);
  border-radius:var(--radius) var(--radius) 0 0;
  cursor:grab;
  box-shadow:0 1px 0 rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.18) inset;
}
.dr-titlebar:active{ cursor:grabbing; }
.dr-title{
  font-family:var(--font-ui);
  font-weight:700; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; white-space:nowrap;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
}
.dr-title .sub{ opacity:.7; font-weight:500; letter-spacing:.14em; }
/* long titles (crate names, song titles) truncate instead of pushing the window buttons out */
.dr-title{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.dr-winbtns{ flex:0 0 auto; }
.dr-titlebar .spacer{ flex:1; }

/* dice logo */
.dr-logo{ width:17px; height:17px; flex:0 0 auto; display:block; filter:drop-shadow(0 1px 1px rgba(0,0,0,.5)); }

/* window buttons */
.dr-winbtns{ display:flex; gap:4px; }
.dr-winbtn{
  width:16px; height:14px; border:none; cursor:pointer;
  display:grid; place-items:center;
  background:rgba(0,0,0,.22);
  border-radius:3px;
  color:var(--titlebar-text);
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset;
  font-size:9px; line-height:1; padding:0;
}
.dr-winbtn:hover{ background:rgba(0,0,0,.42); }
.dr-winbtn svg{ width:9px; height:9px; display:block; }

.dr-body{ padding:8px; }

/* ===========================================================================
   SCREENS (inset dark readout panels)
   ===========================================================================*/
.dr-screen{
  position:relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 40%),
    var(--screen);
  border:1px solid var(--screen-edge);
  border-radius:var(--screen-radius);
  box-shadow:0 2px 6px rgba(0,0,0,.6) inset, 0 0 0 1px rgba(0,0,0,.5);
  overflow:hidden;
}
/* scanlines */
.dr-screen::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, transparent 0 2px, var(--scan) 2px 3px);
  opacity:.6;
}
.read{ color:var(--read); text-shadow:var(--glow) color-mix(in oklab, var(--read) 70%, transparent); }
.read-dim{ color:var(--read-dim); }

/* ===========================================================================
   MAIN WINDOW
   ===========================================================================*/
.main-top{
  display:grid;
  grid-template-columns:96px 1fr 92px;
  gap:8px;
}
/* mini oscilloscope */
.scope{ height:50px; }
.scope canvas{ width:100%; height:100%; display:block; }

/* center readout: time + title */
.readout{ padding:5px 8px; display:flex; flex-direction:column; gap:4px; min-width:0; }
.readout-row{ display:flex; align-items:baseline; gap:10px; min-width:0; }
.time-big{
  font-size:26px; line-height:1; letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
  color:var(--read);
  text-shadow:var(--glow) color-mix(in oklab, var(--read) 65%, transparent);
}
.time-big.paused{ animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:.25; } }
.statebadge{
  font-size:9px; letter-spacing:.12em; padding:2px 5px; border-radius:3px;
  border:1px solid var(--screen-edge); color:var(--read-dim);
  align-self:center;
}
/* fixed height: the track is absolutely positioned, so as a flex item the
   strip would otherwise only get the readout's leftover space and clip text */
.marquee{ position:relative; overflow:hidden; height:16px; flex:none; min-width:0; }
.marquee-track{
  position:absolute; white-space:nowrap; font-size:12px; letter-spacing:.04em;
  color:var(--read); will-change:transform;
}

/* right meta column */
.meta{ padding:5px 6px; display:flex; flex-direction:column; justify-content:space-between; gap:3px; }
.meta-line{ display:flex; justify-content:space-between; align-items:baseline; gap:6px; font-size:10px; }
.meta-line .v{ color:var(--read); font-size:12px; }
.meta-line .u{ color:var(--read-dim); font-size:8.5px; letter-spacing:.1em; }
.chan{ display:flex; gap:6px; justify-content:flex-end; }
.chan span{ font-size:8.5px; letter-spacing:.1em; color:var(--led-off); }
.chan span.on{ color:var(--led-on); text-shadow:var(--glow) color-mix(in oklab,var(--led-on) 60%,transparent); }

/* seek bar (full width range) */
.seek-wrap{ margin-top:8px; padding:0 2px; }

/* transport row — content is width-budget critical: it must fit --win-w
   minus body padding across browsers' font metrics, so keep gaps tight */
.transport{
  margin-top:8px;
  display:flex; align-items:center; gap:5px;
  min-width:0;
}
.tgroup{ display:flex; gap:4px; }
.transport .spacer{ flex:1; }

/* knob sliders cluster (vol / bal) */
.knobs{ display:flex; align-items:center; gap:9px; }
.knob{ display:flex; flex-direction:column; gap:3px; }
.knob label{ font-size:7.5px; letter-spacing:.16em; color:var(--label-dim); text-align:center; }

/* ===========================================================================
   BUTTONS
   ===========================================================================*/
.btn{
  -webkit-appearance:none; appearance:none;
  border:1px solid var(--btn-edge);
  background:var(--btn);
  color:var(--btn-glyph);
  border-radius:5px;
  width:34px; height:28px;
  display:grid; place-items:center;
  cursor:pointer; padding:0;
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 2px 4px rgba(0,0,0,.4);
  transition:transform .04s, filter .12s, box-shadow .12s;
}
.btn svg{ width:14px; height:14px; display:block; fill:currentColor; }
.btn:hover{ filter:brightness(1.18); }
.btn:active{ transform:translateY(1px); box-shadow:0 1px 2px rgba(0,0,0,.5) inset; }
.btn.sm{ width:28px; height:24px; }
.btn.sm svg{ width:12px; height:12px; }

/* primary (play) */
.btn.primary{
  color:var(--accent);
  border-color:color-mix(in oklab, var(--accent) 55%, var(--btn-edge));
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 0 12px -2px var(--accent), 0 2px 4px rgba(0,0,0,.4);
}

/* toggle buttons (shuffle/repeat/viz modes) */
.btn.toggle{ font-family:var(--font-ui); font-size:8.5px; letter-spacing:.08em; font-weight:600; width:auto; padding:0 7px; height:24px; color:var(--label-dim); white-space:nowrap; }
.btn.toggle.on{
  color:var(--accent);
  border-color:var(--accent);
  box-shadow:0 0 10px -1px var(--accent), 0 1px 0 rgba(255,255,255,.1) inset;
  text-shadow:0 0 8px color-mix(in oklab,var(--accent) 60%,transparent);
}

/* ===========================================================================
   RANGE SLIDERS  (seek / volume / balance)
   ===========================================================================*/
input[type=range].dr-range{
  -webkit-appearance:none; appearance:none;
  width:100%; height:18px; background:transparent; cursor:pointer; margin:0;
}
input[type=range].dr-range::-webkit-slider-runnable-track{
  height:6px; border-radius:3px;
  background:linear-gradient(90deg, var(--accent) 0 var(--fill,0%), var(--screen) var(--fill,0%) 100%);
  border:1px solid var(--screen-edge);
  box-shadow:0 1px 3px rgba(0,0,0,.6) inset;
}
input[type=range].dr-range::-moz-range-track{
  height:6px; border-radius:3px; background:var(--screen);
  border:1px solid var(--screen-edge);
}
input[type=range].dr-range::-moz-range-progress{ height:6px; border-radius:3px; background:var(--accent); }
input[type=range].dr-range::-webkit-slider-thumb{
  -webkit-appearance:none; width:11px; height:16px; margin-top:-6px;
  border-radius:3px; background:var(--thumb);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 0 9px -1px var(--thumb), 0 1px 2px rgba(0,0,0,.5);
}
input[type=range].dr-range::-moz-range-thumb{
  width:11px; height:16px; border-radius:3px; background:var(--thumb);
  border:1px solid rgba(255,255,255,.5); box-shadow:0 0 9px -1px var(--thumb);
}
input[type=range].dr-range.tiny{ width:54px; }
.seek-wrap input[type=range].dr-range::-webkit-slider-thumb{ height:18px; margin-top:-7px; }

/* ===========================================================================
   SPECTRUM VISUALIZER WINDOW
   ===========================================================================*/
#win-viz{ width:var(--win-w); }
.viz-screen{ height:168px; }
.viz-screen canvas{ width:100%; height:100%; display:block; }
.viz-foot{ margin-top:8px; display:flex; align-items:center; gap:6px; }
.viz-foot .spacer{ flex:1; }
.viz-meter{ font-size:9px; letter-spacing:.12em; color:var(--label-dim); }
.viz-meter b{ color:var(--accent); font-weight:600; }

/* ===========================================================================
   PLAYLIST WINDOW
   ===========================================================================*/
#win-playlist{
  width:var(--win-w);
  /* resizable: when JS sets an explicit height, the list flexes to fill it */
  display:flex; flex-direction:column;
}
#win-playlist .dr-body{ flex:1; display:flex; flex-direction:column; min-height:0; }
.pl-screen{ flex:1 1 206px; min-height:80px; display:flex; flex-direction:column; }

/* corner resize grip (playlist window) */
.dr-resize{
  position:absolute; right:2px; bottom:2px; width:16px; height:16px;
  cursor:nwse-resize; z-index:5; touch-action:none; opacity:.9;
  background:linear-gradient(135deg,
    transparent 0 40%, var(--accent-2) 40% 48%,
    transparent 48% 58%, var(--accent-2) 58% 66%,
    transparent 66% 76%, var(--accent-2) 76% 84%, transparent 84%);
  border-radius:0 0 var(--radius) 0;
  filter:drop-shadow(0 0 3px color-mix(in oklab, var(--accent-2) 50%, transparent));
}
.dr-resize:hover{ opacity:1; filter:drop-shadow(0 0 6px var(--accent-2)); }

/* keep the totals clear of the grip */
.pl-foot{ padding-right:14px; }
.pl-list{ flex:1; overflow-y:auto; overflow-x:hidden; padding:4px 0; scrollbar-width:thin; scrollbar-color:var(--screen-edge) transparent; }
.pl-list::-webkit-scrollbar{ width:9px; }
.pl-list::-webkit-scrollbar-thumb{ background:var(--screen-edge); border-radius:5px; }
.pl-row{
  display:grid; grid-template-columns:26px 1fr auto auto; gap:8px; align-items:baseline;
  padding:3px 10px; font-size:12px; color:var(--read-dim); cursor:default;
  white-space:nowrap;
}
.pl-row .lnk{ cursor:pointer; opacity:0; transition:opacity .12s; color:var(--read-dim); }
.pl-row:hover .lnk{ opacity:.85; }
.pl-row .lnk:hover{ color:var(--accent-2); text-shadow:var(--glow) color-mix(in oklab,var(--accent-2) 55%,transparent); }
.pl-row:hover{ background:rgba(255,255,255,.04); }
.pl-row .num{ text-align:right; color:var(--read-dim); }
.pl-row .ttl{ overflow:hidden; text-overflow:ellipsis; color:var(--read); }
.pl-row .ttl .art{ color:var(--read-dim); }
.pl-row .dur{ font-variant-numeric:tabular-nums; color:var(--read-dim); }
.pl-row.playing{ background:color-mix(in oklab, var(--accent) 22%, transparent); }
.pl-row.playing .num,.pl-row.playing .ttl,.pl-row.playing .ttl .art,.pl-row.playing .dur{
  color:var(--accent-3); text-shadow:var(--glow) color-mix(in oklab,var(--accent-3) 55%,transparent);
}
.pl-row.selected{ outline:1px solid var(--accent); outline-offset:-1px; }
.pl-row.fresh{ animation:plFresh 6s ease-out; }
@keyframes plFresh{
  0%,40%{ background:color-mix(in oklab, var(--accent-2) 30%, transparent); }
  100%{ background:transparent; }
}

.pl-foot{
  margin-top:8px; display:flex; align-items:center; gap:6px;
}
.pl-foot .spacer{ flex:1; }
.pl-totals{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.25; }
.pl-totals{ min-width:96px; }
.pl-totals .small{ font-size:9px; color:var(--label-dim); letter-spacing:.1em; white-space:nowrap; }
.pl-totals .big{ font-size:13px; color:var(--read); font-variant-numeric:tabular-nums; white-space:nowrap; }

.pl-search{
  flex:0 1 200px; min-width:0; background:var(--screen); color:var(--read);
  border:1px solid var(--screen-edge); border-radius:4px; padding:5px 8px;
  font:11px var(--font-read); letter-spacing:.08em; outline:none;
}
.pl-search::placeholder{ color:var(--read-dim); }
.pl-search:focus{ border-color:var(--accent); box-shadow:0 0 6px -1px var(--accent); }
.pl-row[hidden]{ display:none; }

/* ===========================================================================
   LYRICS WINDOW
   ===========================================================================*/
#win-lyrics{ width:var(--win-w); }
.lyr-screen{ height:260px; overflow-y:auto; padding:8px 12px; scrollbar-width:thin; scrollbar-color:var(--screen-edge) transparent; }
.lyr-text{ font-size:12px; line-height:1.55; color:var(--read); }
.lyr-text .sec{ margin-top:10px; color:var(--read-dim); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.lyr-text .sec:first-child{ margin-top:0; }
.lyr-text .gap{ height:.5em; }
.lyr-text .bv{ color:var(--read-dim); }
.lyr-text.empty{ color:var(--read-dim); }

/* ===========================================================================
   CRATES (rack + one window per open crate)
   ===========================================================================*/
#win-crates{ width:300px; }
.crate-rack{ padding:4px 0; }
.crate-row{ display:flex; align-items:center; gap:6px; padding:3px 6px 3px 10px; font-size:12px; color:var(--read); cursor:pointer; }
.crate-row:hover{ background:rgba(255,255,255,.04); }
.crate-row .cname{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crate-row .ccount{ color:var(--read-dim); font-variant-numeric:tabular-nums; min-width:22px; text-align:right; }
.crate-row .ctag{ font-size:9px; letter-spacing:.1em; color:var(--accent-3); }
.crate-row.open .cname{ color:var(--accent-2); }
.crate-row.lit{ background:color-mix(in oklab, var(--accent) 18%, transparent); }
.crate-row .btn.sm{ width:24px; height:20px; }
.crate-win{ width:var(--win-w); }
.crate-screen{ height:200px; display:flex; flex-direction:column; }
.crate-empty{ padding:10px; font-size:12px; color:var(--read-dim); }
.crate-foot{ margin-top:8px; display:flex; align-items:center; gap:6px; }
.crate-foot .spacer{ flex:1; }
.crate-foot .small{ font-size:9px; color:var(--label-dim); letter-spacing:.1em; white-space:nowrap; }
.btn.crate-play{ width:auto; height:26px; padding:0 12px; font-size:10px; letter-spacing:.08em; }

/* ===========================================================================
   MINI MODE
   ===========================================================================*/
#win-mini{ width:300px; display:none; }
.dr-desktop--mini #win-main{ display:none; }
.dr-desktop--mini #win-mini{ display:block; }
.mini-body{ padding:6px; display:flex; align-items:center; gap:8px; }
.mini-time{ font-size:14px; color:var(--read); font-variant-numeric:tabular-nums; text-shadow:var(--glow) color-mix(in oklab,var(--read) 60%,transparent); }
.mini-marquee{ flex:1; height:14px; overflow:hidden; position:relative; }
.mini-marquee .marquee-track{ font-size:11px; }
.mini-btns{ display:flex; gap:4px; }

/* ===========================================================================
   UTIL
   ===========================================================================*/
.hide{ display:none !important; }
.kbd{ font-family:var(--font-read); font-size:10px; }

/* ===========================================================================
   MOBILE (≤700px): windows become a scrollable stack. Drag/snap/resize are
   disabled (JS guards on the same breakpoint). Desktop is untouched — every
   rule here lives inside the media query.
   ===========================================================================*/
@media (max-width:700px){
  body{ overflow:auto; -webkit-overflow-scrolling:touch; }
  #dr-desktop{ position:static; inset:auto; overflow:visible; min-height:100vh; padding:8px 0 28px; }
  .dr-window{
    /* beat the inline left/top/width/height set by drag, resize, and saved
       positions — stacking ignores all of it */
    position:static !important;
    width:calc(100% - 16px) !important;
    height:auto !important;
    margin:8px auto 0;
  }
  .dr-resize{ display:none; }
  .dr-titlebar{ cursor:default; touch-action:pan-y; }

  /* the transport row is wider than a phone — let it wrap */
  .transport{ flex-wrap:wrap; row-gap:6px; }
  .transport .spacer{ flex:1 0 0; }

  /* roomier touch targets */
  .btn{ width:42px; height:34px; }
  .btn.sm{ width:36px; height:30px; }
  .btn.toggle{ height:30px; width:auto; }
  input[type=range].dr-range.tiny{ width:72px; }
  .pl-row{ padding:6px 10px; }
  .pl-row .lnk{ opacity:.6; }   /* no hover on touch — keep it visible */
  .pl-screen{ flex-basis:280px; }
}