/* The desktop app fetches these from Google Fonts. The demo serves its own copies. */
@font-face { font-family: 'Inter'; font-weight: 100 900; font-display: swap; src: url('inter-latin-wght-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 100 800; font-display: swap; src: url('jetbrains-mono-latin-wght-normal.woff2') format('woff2'); }

/* Vertical faders. The app draws them with WebKit's own `slider-vertical`,
   which other browsers lay flat. Here they are drawn by hand to match what
   the desktop app shows: grey round thumb, track filled up to it in the
   strip's colour. mock.js keeps --fill at the fader's position. */
.fader-col input[type="range"], .master-col input[type="range"] {
  -webkit-appearance: none; appearance: none; writing-mode: vertical-lr; direction: rtl;
  width: 22px; margin: 0; background: none; cursor: pointer; --fc: var(--accent); --fill: 50%;
}
.fader-col.fgroup input[type="range"], .fader-col.grouped input[type="range"] { --fc: var(--fg-color); }
.fader-col input[type="range"]::-webkit-slider-runnable-track, .master-col input[type="range"]::-webkit-slider-runnable-track {
  width: 7px; border-radius: 4px; background: linear-gradient(to top, var(--fc) var(--fill), #33333b var(--fill));
}
.fader-col input[type="range"]::-moz-range-track, .master-col input[type="range"]::-moz-range-track {
  width: 7px; height: 100%; border-radius: 4px; background: linear-gradient(to top, var(--fc) var(--fill), #33333b var(--fill));
}
.fader-col input[type="range"]::-webkit-slider-thumb, .master-col input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; margin-right: -7.5px; border-radius: 50%;
  background: #d4d4d8; box-shadow: 0 1px 4px rgb(0 0 0 / 0.6);
}
.fader-col input[type="range"]::-moz-range-thumb, .master-col input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border: 0; border-radius: 50%; background: #d4d4d8; box-shadow: 0 1px 4px rgb(0 0 0 / 0.6);
}

/* Phones. The desktop app is laid out for a wide window; inside the site's
   frame on a phone it gets about 350px. These rules restack it: tabs scroll
   sideways, side-by-side panels go one above the other, and the two graphs
   that need width keep it and scroll. Demo only; the app itself is untouched. */
@media (max-width: 700px) {
  nav { justify-content: flex-start; overflow-x: auto; padding: 8px 8px 6px; scrollbar-width: none; }
  nav button { flex-shrink: 0; }
  nav kbd, small.hint { display: none; } /* keyboard help, no use on a touch screen */
  main { padding: 12px 10px 16px; }

  .row { flex-wrap: wrap; }
  .row > * { flex: 1 1 100%; min-width: 0; max-width: 100%; }
  .row-item { flex-wrap: wrap; row-gap: 6px; }
  .card { padding: 12px; }
  #settings .card { width: auto; }

  /* Home: meter and master share a line, spectrum above, tiles below. */
  #home .level-meter, #home .master-col { flex: 1 1 40%; height: 240px; width: auto; }
  #home .spectrum { order: -1; height: 180px; }
  #home .row > .col { order: 1; }
  .mtx-toolbar { flex-wrap: wrap; }

  /* Faders: the strips scroll sideways with the master pinned beside them. */
  #faders .row { flex-wrap: nowrap; }
  #faders .fader-rack { flex: 1 1 0; padding: 12px; gap: 10px; }
  #faders .master-col { flex: 0 0 84px; }

  /* The EQ graph has to fit the screen: it takes drags itself, so it cannot also scroll sideways. */
  #eq-graph { height: 300px; }
  /* The signal-flow graph is only looked at, so it keeps its width and scrolls. */
  :is(div, section):has(> #signal-graph) { overflow-x: auto; }
  #signal-graph { min-width: 620px; }
}


/* The live-input strip the demo adds along the bottom of the app. */
#live-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: var(--panel); border-top: 1px solid var(--accent); color: var(--text); font-size: 12px;
}
#live-bar strong { color: var(--accent); white-space: nowrap; }
#live-bar .live-btn {
  font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; padding: 6px 12px;
}
#live-bar .live-btn:hover, #live-bar .live-btn:focus-within { border-color: var(--accent); }
#live-bar .live-btn.on { background: var(--accent); border-color: var(--accent); color: #06272c; }
#live-status { color: var(--text-dim); }
body.has-songs { padding-bottom: 52px; }
body.has-songs #conn-status { bottom: 66px; } /* the app's help button, lifted clear of the strip */

@media (max-width: 700px) {
  #live-bar { flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
  #live-status { flex: 1 1 100%; }
  body.has-songs { padding-bottom: 132px; }
  body.has-songs #conn-status { bottom: 144px; right: 10px; }
}