/* Hi-Fi components shared by the popup and the welcome page: readout, LED meter, knob, push keys. */

/* Readout */
.lcd {
  background: var(--lcd);
  border-radius: 10px;
  padding: 9px 12px 10px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6), 0 1px 0 var(--key-highlight);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
}

.lcd-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.where {
  color: var(--lcd-text);
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.where.idle { color: var(--lcd-dim); opacity: 1; }

.limtag {
  flex: none;
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--lcd-dim);
  border: 1px solid var(--lcd-dim);
}

.limtag.active {
  color: var(--lcd);
  background: var(--lcd-text);
  border-color: var(--lcd-text);
  box-shadow: 0 0 8px var(--lcd-glow);
}

.lcd-main {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.num {
  font-weight: 600;
  font-size: 40px;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--lcd-text);
  text-shadow: 0 0 12px var(--lcd-glow);
  font-variant-numeric: tabular-nums;
}

.num small { font-size: 18px; margin-left: 2px; }

.db {
  font-size: 12px;
  color: var(--lcd-text);
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}

.vu {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 2px;
  height: 6px;
}

.vu i { display: block; height: 6px; border-radius: 1px; background: var(--vu-off); }
.vu i.on { background: var(--vu-low); box-shadow: 0 0 4px rgba(73, 209, 125, 0.6); }
.vu i.on.mid { background: var(--lcd-text); box-shadow: 0 0 4px var(--lcd-glow); }
.vu i.on.top { background: var(--hot); box-shadow: 0 0 4px rgba(242, 61, 46, 0.7); }

/* Knob */
.knobwrap {
  position: relative;
  width: 220px;
  height: 196px;
  align-self: center;
  margin-top: -4px;
}

.knobwrap svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 220px;
  height: 220px;
}

.seg { fill: var(--led-off); }
.seg.lit { fill: var(--led); }
.seg.lit.hot { fill: var(--hot); }

.ringlbl {
  font: 600 9px var(--font-mono);
  fill: var(--silk);
  cursor: pointer;
}

.ringlbl.home { fill: var(--ink); }
.ringlbl:hover { fill: var(--led); }

.knob {
  position: absolute;
  left: 50%;
  top: 110px;
  width: 124px;
  height: 124px;
  margin: -62px 0 0 -62px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--knob-hi) 0%, var(--knob-mid) 55%, var(--knob-lo) 100%);
  box-shadow: 0 10px 18px var(--knob-shadow), 0 2px 3px var(--knob-shadow), inset 0 1px 0 var(--key-highlight), inset 0 -2px 3px rgba(0, 0, 0, 0.08);
  cursor: grab;
  touch-action: none;
}

.knob:active { cursor: grabbing; }
.knob:focus-visible { outline: 2px solid var(--led); outline-offset: 6px; }
.knob[aria-disabled="true"] { cursor: default; opacity: 0.55; }

.grip {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(0, 0, 0, 0.035) 0 4deg, rgba(255, 255, 255, 0.12) 4deg 8deg);
  transform: rotate(var(--a, -90deg));
}

.grip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  width: 4px;
  height: 22px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--led);
  box-shadow: 0 0 6px var(--led-glow);
}

/* Push keys */
.keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.key {
  position: relative;
  height: 38px;
  border-radius: 7px;
  border: 1px solid var(--key-edge);
  background: linear-gradient(var(--key-top), var(--key-bottom));
  box-shadow: 0 2px 0 var(--key-shadow), inset 0 1px 0 var(--key-highlight);
  font-weight: 700;
  font-size: 9.5px;
  font-stretch: 112%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  padding-top: 8px;
}

.key::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 10px;
  height: 3px;
  margin-left: -5px;
  border-radius: 2px;
  background: var(--led-off);
}

.key[aria-checked="true"],
.key[aria-pressed="true"],
.key:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 1px 0 var(--key-shadow), inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

.key[aria-checked="true"]::before,
.key[aria-pressed="true"]::before {
  background: var(--led);
  box-shadow: 0 0 6px var(--led);
}

.key:focus-visible { outline: 2px solid var(--led); outline-offset: 2px; }
.key:disabled { cursor: default; opacity: 0.55; }

.key.plain { padding-top: 0; }
.key.plain::before { display: none; }