/* VH-1 — slate desktop case, gold lettering, a backlit yellow-green LCD with
   its softkeys, round mode buttons and five faders (Vocalist Workstation EX spirit). */

.vh {
  --ink: #e8e6df;
  --ink-dim: #9a9c9f;
  --line: rgba(232, 230, 223, 0.35);
  --accent: #e2b13c;
  --lcd-bg: #a8c464;
  --lcd-ink: #1c2610;
  width: max-content;
  padding: 10px 14px 12px;
  border-radius: 8px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #43474d 0%, #33363b 45%, #2a2c30 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.18),
    inset 0 -3px 0 rgba(0, 0, 0, 0.35),
    0 26px 34px rgba(0, 0, 0, 0.55),
    0 5px 10px rgba(0, 0, 0, 0.45);
  color: var(--ink);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* -------------------------------------------------------------- strip (jacks on top) */

.vh-strip {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: -10px -14px 12px;
  padding: 10px 16px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #232528, #1a1c1f);
  border-bottom: 1px solid #50545a;
}
.vh-logo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; width: 240px; }
.vh-wordmark { font: 700 22px/1 var(--logo-font); color: #e6e4dc; }
.vh-model { font: 900 22px/1 var(--font); letter-spacing: 0.08em; color: var(--accent); }
.vh-sub { flex-basis: 100%; font: 700 7px var(--font); letter-spacing: 0.26em; color: #8c8f93; }
.vh .preset-bar { margin-left: auto; }
.vh .vfd { width: 300px; }
.vh-jacks { display: flex; align-items: flex-end; gap: 4px; }

/* -------------------------------------------------------------- face */

.vh-face { display: flex; align-items: stretch; gap: 18px; }
.vh-small { font: 700 7px var(--font); letter-spacing: 0.22em; color: var(--accent); }

.vh-lcd-block { display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: 6px; background: #1d1f22; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7); }
.vh-lcd {
  box-sizing: content-box;
  width: 40ch;
  padding: 8px 10px;
  border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 30%, #c3dc80, var(--lcd-bg) 70%, #8faa4c);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55), 0 0 0 2px #0f1012;
  color: var(--lcd-ink);
  font: 700 13px/1.35 var(--mono);
  overflow: hidden;
}
.vh-lcd-line { height: 1.35em; white-space: pre; }
.vh-softkeys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px 12px; padding: 0 6px; }
.vh-softkey {
  height: 18px;
  border: 0;
  border-radius: 3px;
  background: linear-gradient(180deg, #4a4e54, #2c2f33);
  box-shadow: 0 2px 0 #0b0c0d, inset 0 1px 0 rgba(255, 255, 255, 0.12);
  cursor: pointer;
}
.vh-softkey:hover { background: linear-gradient(180deg, #565a61, #33363b); }
.vh-softkey:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.vh-softkey.on { background: linear-gradient(180deg, #6f5f2c, #4a3e18); box-shadow: 0 2px 0 #0b0c0d, 0 0 6px rgba(226, 177, 60, 0.45); }
.vh-softkey:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.vh-middle { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.vh-leds { display: flex; gap: 14px; }
.vh-led { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.vh-led-label { font: 700 7px var(--font); letter-spacing: 0.14em; color: var(--ink-dim); }
.vh .led.on { --level: 1; }
.vh .js-led-input, .vh .js-led-lock, .vh .js-led-midi {
  background: radial-gradient(circle at 35% 30%, #d4ffb8, #46d424 45%, #0f4a04);
  box-shadow: 0 0 0 1.5px #3b3e41, 0 0 calc(var(--level) * 9px) calc(var(--level) * 2px) rgba(80, 230, 40, 0.65);
}
.vh-modes { display: flex; gap: 6px; }
.vh-mode {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #4a4e54, #2c2f33);
  box-shadow: 0 2px 0 #0b0c0d, inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: var(--ink);
  font: 700 8px var(--font);
  letter-spacing: 0.12em;
  cursor: pointer;
}
.vh-mode .led { width: 7px; height: 7px; }
.vh-mode.on .led { --level: 1; }
.vh-mode:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.vh-mode:focus-visible, .vh-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.vh-keys-row { display: flex; align-items: flex-end; gap: 16px; }
.vh-minikeys { display: flex; flex-direction: column; gap: 4px; }
.vh-minikeys ws-keyboard { flex: none; width: 250px; height: 70px; border-top: 3px solid #5a4a1e; }
.vh-editgroup { display: flex; gap: 6px; }
.vh-btn {
  height: 24px;
  padding: 0 10px;
  border: 0;
  border-radius: 3px;
  background: linear-gradient(180deg, #4a4e54, #2c2f33);
  box-shadow: 0 2px 0 #0b0c0d, inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: var(--ink);
  font: 700 8.5px var(--font);
  letter-spacing: 0.12em;
  cursor: pointer;
}
.vh-btn:hover { background: linear-gradient(180deg, #565a61, #33363b); }
.vh-btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }

.vh-wheel-block { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.vh-wheel {
  --turn: 0deg;
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from var(--turn), rgba(255, 255, 255, 0.07) 0 4deg, transparent 4deg 10deg),
    radial-gradient(circle at 40% 35%, #5a5e64, #25272a 70%);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.2), 0 0 0 3px #1b1c1f;
  cursor: ns-resize;
  touch-action: none;
}
.vh-wheel-dimple {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #1a1b1d, #3a3d41);
  transform: rotate(var(--turn)) translateY(-24px);
}
.vh-wheel:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.vh-arrows { display: flex; gap: 6px; }

.vh-faders { display: flex; gap: 2px; padding: 6px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.18); }
.vh ws-fader .fader { height: 112px; }
.vh ws-fader { width: 40px; }
.vh ws-fader .ctl-label { font-size: 7px; }

/* -------------------------------------------------------------- edit pages */

.vh-edit { margin-top: 12px; padding-top: 10px; border-top: 1px solid #50545a; }
.vh-edit[hidden] { display: none; }
.vh-tabs { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 10px; }
.vh-tab {
  padding: 5px 9px;
  border: 0;
  border-radius: 3px 3px 0 0;
  background: #24262a;
  color: var(--ink-dim);
  font: 700 8px var(--font);
  letter-spacing: 0.16em;
  cursor: pointer;
}
.vh-tab.active { background: #4a3e18; color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.vh-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.vh-page { min-height: 150px; max-width: 1100px; }
.vh-page[hidden] { display: none; }
.vh-page-head, .vh-var-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.vh-page-title { font: 800 9px var(--font); letter-spacing: 0.24em; color: var(--accent); }
.vh-page-sub { font: 600 9px var(--font); letter-spacing: 0.06em; color: var(--ink-dim); }
.vh-var-name { font: 700 11px var(--mono); color: var(--ink); opacity: 0.85; }
.vh-sub-title { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font: 800 8px var(--font); letter-spacing: 0.22em; color: var(--accent); }
.vh-hint { max-width: 900px; margin: 8px 0 0; font: 500 10px/1.4 var(--font); color: var(--ink-dim); }
.vh-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.vh-col { display: flex; flex-direction: column; gap: 4px; }
.vh-style { height: 20px; }

.vh ws-knob.size-s { --k: 46px; width: 56px; }
.vh ws-knob.size-m { --k: 56px; width: 68px; }
.vh ws-knob .ctl-label { font-size: 7px; min-height: 12px; }
.vh ws-knob .knob-body .cap { fill: url(#ws-knob-cap-grey); }
.vh ws-switch .ctl-label { font-size: 7px; }

.vh-var[hidden], .vh-custom-head[hidden] { display: none; }
.vh-var-body { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.vh-group { display: flex; align-items: flex-end; gap: 4px; padding: 4px 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.15); }
/* Only what the softkey's harmony type uses. */
.vh-var .t-scale, .vh-var .t-chord, .vh-var .t-voicing, .vh-var .t-bass, .vh-var .t-motion,
.vh-var .t-bend, .vh-var .t-vmode, .vh-var .t-trans { display: none; }
.vh-var[data-type="0"] :is(.t-voicing, .t-bend),
.vh-var[data-type="1"] :is(.t-scale, .t-voicing, .t-bend),
.vh-var[data-type="2"] :is(.t-chord, .t-voicing, .t-bass, .t-motion),
.vh-var[data-type="3"] :is(.t-vmode, .t-trans),
.vh-var[data-type="4"] .t-trans { display: flex; }

.vh-voices { display: grid; width: max-content; grid-template-columns: auto repeat(4, auto); align-items: center; gap: 0 14px; }
.vh-vhead { font: 700 7.5px var(--font); letter-spacing: 0.18em; color: var(--ink-dim); text-align: center; }
.vh-vrow { font: 700 7.5px var(--font); letter-spacing: 0.16em; color: var(--accent); text-align: right; }

/* custom harmony */
.vh-custom { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.vh-custom-head { display: flex; align-items: flex-end; gap: 10px; }
.vh-custom-grid { display: grid; grid-template-columns: auto repeat(4, 76px); gap: 2px; outline: none; }
.vh-cell-head { font: 700 7.5px var(--font); letter-spacing: 0.16em; color: var(--ink-dim); text-align: center; padding: 2px 0; }
.vh-cell-head.off { opacity: 0.4; }
.vh-cell-row { font: 700 10px var(--mono); color: var(--accent); text-align: right; padding-right: 6px; align-self: center; }
.vh-cell {
  height: 18px;
  border: 0;
  border-radius: 2px;
  background: #1e2023;
  color: var(--ink);
  font: 600 10px var(--mono);
  cursor: ns-resize;
}
.vh-cell.nc { color: var(--ink-dim); font-style: italic; }
.vh-cell.selected { background: #4a3e18; box-shadow: inset 0 0 0 1px var(--accent); }
.vh-cell:focus-visible { outline: 2px solid var(--focus); }
.vh-custom-tools { display: flex; flex-direction: column; gap: 6px; }

/* songs */
.vh-song-bar .preset-bar { margin: 0 0 10px; }
.vh-song-top { margin-bottom: 10px; }
.vh-arrangement { display: flex; flex-direction: column; gap: 4px; min-width: 420px; }
.vh-arr, .vh-steps { display: flex; flex-wrap: wrap; gap: 3px; min-height: 22px; padding: 4px; border-radius: 4px; background: rgba(0, 0, 0, 0.2); max-width: 900px; }
.vh-chip {
  padding: 3px 7px;
  border: 0;
  border-radius: 3px;
  background: #2b2e32;
  color: var(--ink);
  font: 700 10px var(--mono);
  cursor: pointer;
}
.vh-chip.selected { background: #4a3e18; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.vh-empty { font: 500 10px var(--font); color: var(--ink-dim); padding: 2px 4px; }
.vh-tools { display: flex; gap: 6px; margin-top: 4px; }
.vh-sec-letters { display: inline-flex; gap: 2px; }
.vh-letter {
  width: 20px;
  height: 18px;
  border: 0;
  border-radius: 2px;
  background: #24262a;
  color: var(--ink-dim);
  font: 700 9px var(--mono);
  cursor: pointer;
}
.vh-letter.used { color: var(--ink); }
.vh-letter.active { background: #4a3e18; color: var(--accent); }
.vh-select {
  height: 20px;
  border: 1px solid #50545a;
  border-radius: 3px;
  background: #1e2023;
  color: var(--ink);
  font: 600 10px var(--font);
}

/* utilities */
.vh-util { display: flex; flex-wrap: wrap; gap: 18px; }
.vh-util-group { padding: 6px 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.15); }