/* keys.css — Live Controller module: computer-keyboard / Web MIDI input. */

.keys {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 560px;
}

.keys-head {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.keys-track { min-width: 130px; }
.keys-midi { min-width: 110px; height: 22px; font-size: 10px; }

.keys-oct { display: flex; align-items: center; gap: 6px; }
.keys-oct-btn {
  width: 28px;
  min-width: 0;
  padding: 0;
}
.keys-oct-val {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid rgba(70, 72, 88, 0.85);
  background: linear-gradient(180deg, #050B10 0%, #0A1218 100%);
  color: #F0D9C8;
  font-size: 12px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7);
}

/* --- Keyboard strip (flat layout: blacks shorter, aligned to the top) --- */
.keys-kbd {
  display: flex;
  gap: 2px;
  padding: 8px;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.08)),
    var(--panel-3);
  border: 1px solid #050B10;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
}
.keys-key {
  position: relative;
  flex: 1 1 0;
  height: 72px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.55);
  background: linear-gradient(180deg, #EFE9E1 0%, #CFC6BB 90%, #B4AAA0 100%);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 2px 3px rgba(0, 0, 0, 0.45);
  transition: transform 40ms ease, filter 60ms ease;
}
.keys-key:hover { filter: brightness(1.05); }
.keys-key.black {
  height: 46px;
  background: linear-gradient(180deg, #2C303C 0%, #171A22 80%, #0D1017 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 2px 4px rgba(0, 0, 0, 0.6);
}
.keys-key.active {
  background: linear-gradient(180deg, var(--accent-bright) 0%, var(--accent) 70%, #7A4E42 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 0 10px rgba(217, 155, 127, 0.65);
  transform: translateY(1px);
}
.keys-key.black.active {
  background: linear-gradient(180deg, var(--accent-bright) 0%, var(--accent) 70%, #7A4E42 100%);
}

.keys-key-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  font-size: 8px;
  text-align: center;
  color: #5A5148;
  pointer-events: none;
}
.keys-key.black .keys-key-label { color: rgba(235, 228, 220, 0.55); }

.keys-hint {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--text-faint);
}