/* Raised key: a graphite key that sinks and darkens when pressed. */
.key {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border: none;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--widget-hover), var(--widget));
  box-shadow: 0 2px 0 0 #05080A, var(--card-shadow);
  color: var(--text-strong);
  font-family: var(--font-num);
  font-size: 13px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms, transform 90ms, box-shadow 90ms;
}
.key:hover { background: linear-gradient(180deg, #2F3429, var(--widget-hover)); }
.key:active, .key[aria-pressed="true"] {
  background: var(--widget-pressed);
  transform: translateY(2px);
  box-shadow: 0 0 0 0 #05080A, inset 0 1px 6px rgba(0,0,0,0.7);
  color: var(--accent-glow);
}
.key--hot { box-shadow: 0 2px 0 0 #05080A, 0 0 0 1px var(--hot) inset, var(--card-shadow); color: var(--hot); }

/* LED: one painted falloff, never a border. */
.led {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--led-green);
  box-shadow: 0 0 7px 1px color-mix(in srgb, var(--led-green) 65%, transparent);
}
.led--idle { background: #2A3128; box-shadow: none; }
.led--hot { background: var(--hot); box-shadow: 0 0 7px 1px color-mix(in srgb, var(--hot) 65%, transparent); }
.led--mod { background: var(--mod); box-shadow: 0 0 7px 1px color-mix(in srgb, var(--mod) 65%, transparent); }

/* Fader: 3px rail, trailing fill, rectangular cap. Draggable via js in later tasks. */
.fader { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; margin: 10px 0; }
.fader__name { font-size: 13px; letter-spacing: 0.06em; color: var(--text-dim); text-transform: uppercase; font-family: var(--font-num); }
.fader__value { font-family: var(--font-num); color: var(--text-strong); font-variant-numeric: tabular-nums; font-size: 13px; }
.fader__track {
  grid-column: 1 / -1;
  position: relative; height: 22px; cursor: ew-resize; touch-action: none;
  background: var(--chassis); border-radius: var(--radius-capsule);
}
.fader__track::before {
  content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: var(--rail);
  transform: translateY(-50%); background: var(--seam); border-radius: 2px;
}
/* The fill, the cap and the live marker are readouts, never hit targets. The
   track has to stay the target of every pointer event, because the value is
   read from `offsetX` and that is measured against whatever element the event
   hit. Without this a press landing on the cap (exactly where a user reaching
   for a fader aims) reports its offset inside the 10px cap rather than along
   the rail, and the value jumps to one end. */
.fader__fill { position: absolute; left: 8px; top: 50%; height: var(--rail); transform: translateY(-50%); background: var(--accent); border-radius: 2px; pointer-events: none; }
.fader__cap {
  position: absolute; top: 3px; width: 10px; height: 16px; margin-left: -5px;
  background: linear-gradient(180deg, #C2CBB4, #8A9080);
  border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,0.8);
  pointer-events: none;
}
.fader--mod .fader__fill { background: var(--mod); }
/* Live modulated position marker rides on top of the authored cap. */
.fader__live { position: absolute; top: 1px; width: 2px; height: 20px; margin-left: -1px; background: var(--mod); opacity: 0.9; pointer-events: none; }
/* Scope gutter: 3px bar in the noun's colour on the left edge of a scoped row. */
.scoped { border-left: var(--rail) solid var(--scope-color, var(--accent)); padding-left: 10px; }

/* Recessed content well. */
.well {
  background: var(--canvas);
  border-radius: var(--radius);
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.65);
  padding: 18px;
}

/* Group heading inside a well: the app's own panels break a long control list
   into named groups (Shape, Mix, Morph, Form) rather than running twelve faders
   together, and a panel with that many controls is unreadable without it. Cut
   into the chassis like .engraved, with a hairline above so the groups read as
   separated bays. The first one carries no rule and no top gap: nothing sits
   above it to be separated from. */
.group-label {
  font-family: var(--font-num); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: #6E7566;
  text-shadow: 0 1px 0 rgba(255,255,255,0.05);
  margin: 18px 0 10px; padding-top: 14px;
  border-top: 1px solid var(--seam);
}
.group-label:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* Chip / cartridge, used for formats and effect names. */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: var(--radius);
  background: var(--widget); color: var(--text);
  font-family: var(--font-num); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  /* A rim, so an UNSELECTED chip still reads as something you can press. With
     only a fill, an unpressed chip against the panel's own dark well looked like
     a run of plain labels, and a control nobody recognises as a control may as
     well not be there. */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
  cursor: pointer;
}
.chip[aria-pressed="false"] { color: var(--text-dim); }
.chip--preset { color: var(--preset); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--preset) 45%, transparent); }

/* Engraved caption: text cut into the chassis. */
.engraved {
  font-family: var(--font-num); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: #6E7566; text-shadow: 0 1px 0 rgba(255,255,255,0.05);
}

/* Section header band. */
.band {
  background: var(--header-band); border-radius: var(--radius) var(--radius) 0 0;
  padding: 9px 14px; display: flex; align-items: center; gap: 10px;
  font-family: var(--font-num); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text);
}

#hud {
  position: fixed; right: 18px; top: 50%; transform: translateY(-50%);
  z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 14px 10px; border-radius: var(--radius-capsule);
  background: color-mix(in srgb, var(--chassis) 88%, transparent);
  box-shadow: var(--card-shadow);
}
#hud-position { font-size: 19px; color: var(--hot); }
#hud-lap { font-size: 12px; color: var(--text-dim); }
#hud-rail { display: flex; flex-direction: column; gap: 7px; margin: 4px 0; }
#hud-rail .led { cursor: pointer; }
@media (max-width: 720px) { #hud { display: none; } }

#trail {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 4; mix-blend-mode: screen;
}

/* THE LIVE MARKER. A modulated parameter's cap does NOT move: modulation here is
   non-destructive, so the authored value stays exactly where it was set and the
   driver is an offset on top of it. The marker is that offset made visible, and
   keeping the two separate is the whole point. Deliberately a different shape
   and colour from the cap so nobody mistakes it for something they can drag. */
.fader__marker {
  position: absolute;
  top: 50%;
  width: 3px;
  height: 15px;
  margin-left: -1.5px;
  transform: translateY(-50%);
  background: var(--mod);
  border-radius: 1px;
  box-shadow: 0 0 6px 1px color-mix(in srgb, var(--mod) 70%, transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}

/* A visible focus ring on the fader, because a keyboard user has to be able to
   see which control they are about to move. */
.fader__track:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}