/* SPDX-License-Identifier: MIT */
/* The browser demo's additions to tuner.css: the input bar (Start, the input picker and the
   privacy line) as the first row of the stage. Colours come from the same tokens. */
.home-links { justify-self: start; display: flex; flex-wrap: wrap; gap: 0 18px; }
.home[hidden] { display: none; }
.stage { grid-template-areas: "source source" "note readout" "scale scale" "strobe strobe" "controls controls"; }
.source {
  grid-area: source; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  padding: 10px 0 14px; margin-bottom: 4px; border-bottom: 1px solid var(--sq-sys-color-line-rule);
}
.start {
  font: italic 700 18px/1 var(--serif); color: var(--tuned-ink); background: var(--tuned);
  border: 0; border-radius: 999px; padding: 11px 22px; cursor: pointer; min-height: 44px;
}
.start.on { background: none; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.start:hover, .start:focus-visible { filter: brightness(1.08); }
.start:focus-visible, .pick select:focus-visible { outline: 2px solid var(--sq-sys-color-focus); outline-offset: 2px; }
.pick { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); min-width: 0; }
.pick select {
  font: 14px var(--sans); color: var(--ink); background: var(--paper-2); min-width: 0; max-width: 18em;
  border: 1px solid var(--ink-3); border-radius: 6px; padding: 7px 8px; min-height: 36px;
}
.pick[hidden] { display: none; }
.privacy { margin: 0; flex: 1 1 16em; font: italic 15px var(--serif); color: var(--ink-2); }
.privacy.warn { color: var(--ink); font-style: normal; font-weight: 600; }

@media (max-width: 720px) {
  .stage { grid-template-areas: "source" "note" "readout" "scale" "strobe" "controls"; }
  .source { gap: 10px 12px; }
  .pick:not(#channel-pick) { flex: 1 1 12em; }
  .pick:not(#channel-pick) select { flex: 1; max-width: none; }
  .privacy { flex-basis: 100%; font-size: 14px; }
}