/* The instrument-panel look shared by every controller: dark ground, system
   monospace, lowercase labels. Deliberately single-theme -- the instrument is
   dark. #1a1a1a exactly: the Sixty Works badge uses it for its knockouts. */

:root {
  --ground: #1a1a1a;
  --panel: #232323;
  --outline: #3a3a3a;
  --label: #8a8a8a;
  --value: #e6e6e6;
  --dim: #5a5a5a;
  --track-off: #2e2e2e;
  --live: #4cc27a;
  --ca: #f472b6;
  --cb: #4ade80;
  --cc: #60a5fa;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { background: var(--ground); color: var(--label); }
body { margin: 0; font: 13px/1.45 var(--mono); }
[hidden] { display: none !important; }

/* An instrument, not a document. On iOS Safari a finger held still over the
   triangle started a text selection, and dragging to the right stretched it over
   the labels in the right column. Nothing on the page needs selecting or copying,
   so nothing is selectable; there is no long-press callout and no tap flash. */
* { -webkit-tap-highlight-color: transparent; }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* ?selectable on the address switches those off for one visit: an experiment for
   a device, to tell whether they are what a problem is about. */
html.selectable body { -webkit-user-select: auto; user-select: auto; -webkit-touch-callout: default; }
html.selectable * { -webkit-tap-highlight-color: initial; }

.app {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 230px;
  height: 100vh;
  height: 100dvh;
}
.gutter {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  overflow-y: auto;
  min-height: 0;
}
.stage { position: relative; min-width: 0; min-height: 0; }
canvas.surface { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; }

.app.hidden { grid-template-columns: minmax(0, 1fr); }
.app.hidden .gutter { display: none; }

/* ---- left gutter: set and forget ---- */
.title { text-align: center; user-select: none; -webkit-user-select: none; }
.title .name { color: var(--value); font-size: 15px; letter-spacing: 0.01em; }
.logo {
  display: block; width: 102px; height: 120px; margin: 0;
  cursor: pointer; border-radius: 8px; touch-action: manipulation;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
}
.logo svg { display: block; width: 100%; height: 100%; }
/* The badge is drawn in a mid grey (#757575) with #1a1a1a knockouts. Lift the
   grey to the same white as the product name, here in the page so the artwork
   file is untouched; the knockouts stay #1a1a1a. */
.logo [style*="fill:#757575"] { fill: var(--value) !important; }
.logo [style*="stroke:#757575"] { stroke: var(--value) !important; }
.maker { color: inherit; text-decoration: none; }
.maker:hover { color: var(--value); text-decoration: underline; }
.brand { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hint { text-align: center; color: var(--label); font-size: 12px; }
/* one quiet line: the parent page's support section, and the 60works updates signup */
.support-link { display: block; text-align: center; color: var(--label); font-size: 12px; margin: 0 0 14px; }
.support-link a { color: inherit; text-decoration: none; }
.support-link a:hover { color: var(--value); text-decoration: underline; }
.support-link .sep { margin: 0 6px; }

/* A section that folds: a header that is a button, and a body. */
.fold-head {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  margin: 0; padding: 0 2px 8px; border: 0; border-bottom: 1px solid var(--outline); border-radius: 0;
  background: none; color: var(--value); font: inherit; cursor: pointer;
  -webkit-appearance: none; appearance: none; touch-action: manipulation;
}
.fold-head:disabled { cursor: default; }
.fold-head:disabled .chev { display: none; }
.chev {
  width: 6px; height: 6px; margin-right: 3px; flex: none;
  border-right: 1.5px solid var(--label); border-bottom: 1.5px solid var(--label);
  transform: translateY(-2px) rotate(45deg); transition: transform 0.15s;
}
.fold-head[aria-expanded="false"] .chev { transform: translateX(-2px) rotate(-45deg); }
.fold-body { display: flex; flex-direction: column; gap: 16px; padding-top: 16px; }

.group { display: flex; flex-direction: column; gap: 8px; }
.label { text-align: center; }
.note { margin: 0; color: var(--dim); font-size: 11.5px; line-height: 1.5; text-align: center; text-wrap: pretty; }
.note.left { text-align: left; }

.seg { display: grid; grid-template-columns: repeat(var(--seg-columns, 3), 1fr); background: var(--panel); border: 1px solid var(--outline); border-radius: 10px; padding: 3px; gap: 3px; }
.seg button {
  font: inherit; font-size: 14px; color: var(--label); background: transparent; border: 0;
  border-radius: 7px; height: 34px; cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--outline); color: var(--value); }

/* Menu pickers, not steppers: tapping anywhere opens the list. */
.picker { position: relative; display: block; }
.picker select {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 42px;
  font: inherit; font-size: 14px; color: var(--value);
  background: var(--panel); border: 1px solid var(--outline); border-radius: 10px;
  padding: 0; text-align: center; text-align-last: center; cursor: pointer;
}
/* No side padding: Chrome indents the open list by the left padding only, which
   pushed its centred options off centre. Keep labels short enough to clear the
   arrow (about 34px each side). */
.picker select:disabled { color: var(--dim); cursor: default; }
.picker::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 10px; height: 16px; margin-top: -8px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M1.5 6 5 2.5 8.5 6M1.5 10 5 13.5 8.5 10' fill='none' stroke='%238a8a8a' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain;
}
.picker select option { background: var(--panel); color: var(--value); }

/* On/off, drawn as an LED: a filled dot when on, a hollow ring when off. The dot
   is small, so the button has an invisible finger-sized target around it. */
.led {
  position: relative; flex: none; width: 14px; height: 14px; margin: 0; padding: 0;
  border: 1.5px solid var(--dim); border-radius: 50%; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none; touch-action: manipulation;
}
.led::before { content: ""; position: absolute; inset: -8px; }
.led[aria-checked="true"] { background: var(--value); border-color: var(--value); }
/* An LED beside its label, the pair centred in the column. */
.switch-row { display: flex; align-items: center; justify-content: center; gap: 10px; }
.switch-row label { cursor: pointer; }
.center { display: flex; justify-content: center; }

/* ---- right gutter: live state ---- */
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); flex: none; }
.dot.live, .status.live .dot { background: var(--live); }
.dest { display: flex; align-items: center; gap: 10px; }
.dest .picker { flex: 1; min-width: 0; }
/* The destination is left-aligned and can be a long port name, so it needs room
   on the right for the arrow (about 34px): without it the text ran under it. */
.dest select { padding-left: 12px; padding-right: 34px; text-align: left; text-align-last: left; text-overflow: ellipsis; }

/* The CC number of each value, in the midi section: one picker each, no legend. */
.cc-rows { display: flex; flex-direction: column; gap: 8px; }

.status { display: flex; align-items: center; gap: 10px; min-height: 28px; color: var(--value); }
.status.idle { color: var(--label); }

.channels { display: flex; flex-direction: column; gap: 14px; }
.channel { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 10px; }
.channel .led { justify-self: center; }

.readout { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.readout .line { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
/* The corner's name in a pill of its colour is also the colour picker: dimmed when
   the corner is switched off. Every pill is as wide as the longest name any sound
   gives a corner (seven letters: "strings", "kalimba"), so the three line up. The
   toggle beside it stays neutral, like the touch dot's, so the colour lives in one
   place. */
.chip {
  position: relative; flex: none; align-self: center; width: calc(7ch + 16px); height: 28px; margin: 0; padding: 0;
  border: 0; border-radius: 14px; background: var(--tint); color: var(--ground);
  font: inherit; font-size: 12px; font-weight: bold; line-height: 28px; text-align: center; cursor: pointer;
  white-space: nowrap; overflow: hidden;
}
.chip::before { content: ""; position: absolute; inset: -6px; }  /* a finger-sized target */
/* A hover ring tells a mouse the pill is a button; a finger has the "color" label above the pills. Not
   on touch, where a tap would leave the ring stuck on. */
@media (hover: hover) { .chip:hover { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6); } }
.channel.off .chip { background: var(--track-off); color: var(--dim); }
.readout .val { color: var(--label); font-size: 18px; font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; margin-left: auto; }
.meter { height: 3px; border-radius: 2px; background: var(--track-off); overflow: hidden; }
.meter span { display: block; height: 100%; width: 0; background: var(--tint); }

input[type="range"] { width: 100%; accent-color: #c8c8c8; margin: 6px 0 0; }

/* ---- response scope (filter morph) ---- */
.scope { background: var(--panel); border: 1px solid var(--outline); border-radius: 8px; overflow: hidden; }
.scope canvas { display: block; width: 100%; height: 120px; }

/* ---- callout (hue picker) ---- */
.callout-backdrop { position: fixed; inset: 0; z-index: 10; }
.callout {
  position: fixed; z-index: 11;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 20px; background: var(--ground); border: 1px solid var(--outline); border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}
/* Short screens (a phone held sideways): the ring on the left, the title and the done
   button stacked on the right, so nothing hangs out of the bottom. */
.callout.compact { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; gap: 12px 16px; align-items: stretch; }
.callout.compact .hue-wheel { grid-column: 1; grid-row: 1 / 3; align-self: center; }
.callout.compact .callout-title { grid-column: 2; grid-row: 1; text-align: center; }
.callout.compact .callout-done { grid-column: 2; grid-row: 2; align-self: end; margin: 0; width: 100%; max-width: 140px; justify-self: center; }
.callout-title { color: rgba(255, 255, 255, 0.5); font-size: 13px; line-height: 20px; }
.hue-wheel { flex: none; touch-action: none; cursor: pointer; border-radius: 50%; }
.callout-done {
  flex: none; margin-top: auto; width: 120px; height: 42px;
  font: inherit; font-size: 16px; font-weight: 700; color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.12); border: 0; border-radius: 21px; cursor: pointer;
}
.callout-arrow {
  position: absolute; width: 14px; height: 14px;
  background: var(--ground); border: 0 solid var(--outline);
  transform: translate(-50%, -50%) rotate(45deg);
}
.callout-arrow[data-side="left"] { left: -1px; border-left-width: 1px; border-bottom-width: 1px; }
.callout-arrow[data-side="right"] { left: calc(100% + 1px); border-top-width: 1px; border-right-width: 1px; }
.callout-arrow[data-side="top"] { top: -1px; border-top-width: 1px; border-left-width: 1px; }
.callout-arrow[data-side="bottom"] { top: calc(100% + 1px); border-bottom-width: 1px; border-right-width: 1px; }

.btn {
  font: inherit; font-size: 14px; height: 42px; width: 100%;
  color: var(--value); background: var(--panel); border: 1px solid var(--outline); border-radius: 10px; cursor: pointer;
}
.btn:disabled { color: var(--dim); cursor: default; }

/* Never put :focus-visible in a selector list with anything else: Safari
   before 15.4 doesn't know it, and an unknown selector voids the whole list. */
button:focus-visible, select:focus-visible, .logo:focus-visible, .hue-wheel:focus-visible {
  outline: 2px solid var(--value); outline-offset: 2px;
}

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; height: auto; }
  .stage { grid-column: 1 / -1; order: -1; height: min(96vw, 72vh); }
  .app.hidden { grid-template-columns: 1fr; }
  .app.hidden .stage { height: 100vh; height: 100dvh; }
}
@media (orientation: landscape) and (min-width: 640px) and (max-width: 899px) {
  .app {
    grid-template-columns: 150px minmax(0, 1fr) 176px;
    grid-template-rows: 1fr;
    height: 100vh;
    height: 100dvh;
  }
  .gutter {
    padding: 16px 12px;
    overflow-y: auto;
  }
  .stage {
    grid-column: auto;
    order: 0;
    min-height: 0;
    height: auto;
  }
  .app.hidden { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .app { grid-template-columns: 1fr; }
  .stage { height: min(108vw, 70vh); }
}
@media (prefers-reduced-motion: reduce) {
  .chev { transition: none; }
}