/* PURE EQ · E12.3 FADER HARDWARE DETAIL · SILVER RECESSED SLOT
 * Focused component pass only. No shell/header/display selectors here.
 * Keeps compact 3D faders while making the travel slot part of the brushed panel.
 * No DSP or input logic changes.
 */

/* Compact engraved scale field around the slot. */
.peq-fader{
  width:92px!important;
  height:208px!important;
  margin-top:12px!important;
  background:
    linear-gradient(90deg,
      transparent 0 14%,
      rgba(72,79,74,.12) 14% 15%,
      transparent 15% 24%,
      rgba(255,255,255,.18) 24% 25%,
      transparent 25% 75%,
      rgba(72,79,74,.10) 75% 76%,
      transparent 76% 85%,
      rgba(255,255,255,.20) 85% 86%,
      transparent 86%),
    repeating-linear-gradient(to bottom,
      transparent 0 13px,
      rgba(67,74,69,.13) 13px 14px,
      rgba(255,255,255,.08) 14px 15px,
      transparent 15px 27px)!important;
}

/* Travel slot is the same alloy as the front plate, only machined inward. */
.peq-fader::before{
  top:9px!important;
  bottom:9px!important;
  width:8px!important;
  border:1px solid rgba(76,83,78,.28)!important;
  border-radius:5px!important;
  background:
    linear-gradient(90deg,
      #a1a7a3 0%,
      #c3c7c4 18%,
      #8e9590 47%,
      #b7bcb8 72%,
      #9ca29e 100%)!important;
  box-shadow:
    inset 1px 0 2px rgba(255,255,255,.32),
    inset -2px 0 3px rgba(55,62,57,.20),
    inset 0 4px 6px rgba(54,61,56,.22),
    inset 0 -2px 3px rgba(255,255,255,.15),
    0 1px 0 rgba(255,255,255,.34),
    0 -1px 0 rgba(53,60,55,.08)!important;
}

/* Engraved zero mark remains printed on the alloy. */
.peq-fader::after{
  right:0!important;
  color:#202622!important;
  font-size:7px!important;
  font-weight:800!important;
  text-shadow:0 1px rgba(255,255,255,.76),0 -1px rgba(0,0,0,.10)!important;
}

/* Same satin aluminium cap, reduced to commercial-console proportions. */
.peq-fader__cap{
  width:68px!important;
  height:30px!important;
  bottom:clamp(0px,calc(var(--position) - 15px),178px)!important;
  border:1px solid #4e5550!important;
  border-top-color:#969d97!important;
  border-bottom-color:#313733!important;
  border-radius:5px!important;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.96) 0 5%,
      rgba(255,255,255,.42) 6% 14%,
      rgba(93,100,94,.05) 15% 28%,
      rgba(48,54,50,.24) 43% 50%,
      rgba(21,25,22,.14) 51% 56%,
      rgba(255,255,255,.07) 57% 70%,
      rgba(255,255,255,.66) 88% 95%,
      rgba(82,89,83,.15) 96% 100%),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.16) 0 1px,
      rgba(62,69,64,.09) 1px 2px,
      rgba(255,255,255,.035) 2px 3px,
      transparent 3px 5px),
    linear-gradient(90deg,
      #8f9690 0%,
      #c8ccc8 11%,
      #eef0ed 27%,
      #a5aba6 45%,
      #737a74 52%,
      #b8bdb8 66%,
      #e4e7e3 84%,
      #8d948e 100%)!important;
  background-blend-mode:screen,normal,normal!important;
  box-shadow:
    0 10px 12px rgba(0,0,0,.32),
    0 4px 4px rgba(0,0,0,.26),
    0 1px rgba(255,255,255,.78),
    inset 0 2px rgba(255,255,255,.92),
    inset 0 -3px rgba(31,36,32,.32),
    inset 3px 0 rgba(255,255,255,.18),
    inset -3px 0 rgba(43,49,44,.16)!important;
  transition:filter 80ms ease,box-shadow 80ms ease!important;
}

/* Compact knurled side grips. */
.peq-fader__cap::before,
.peq-fader__cap::after{
  top:4px!important;
  bottom:4px!important;
  width:6px!important;
  opacity:.90!important;
  border-radius:2px!important;
  background:
    repeating-linear-gradient(90deg,
      #4b524c 0 1px,
      #d8dcd8 1px 2px,
      #727973 2px 3px,
      #eef0ed 3px 4px)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.44),inset 0 -1px rgba(0,0,0,.25)!important;
}
.peq-fader__cap::before{left:3px!important}
.peq-fader__cap::after{right:3px!important}

/* Thin luminous position line remains embedded in the face. */
.peq-fader__cap i{
  left:11px!important;
  right:11px!important;
  top:13px!important;
  height:3px!important;
  border-radius:1px!important;
  background:linear-gradient(180deg,#eaff9e 0%,#b8ff3d 42%,#7fa51d 100%)!important;
  box-shadow:
    0 0 4px rgba(184,255,61,.34),
    0 1px rgba(255,255,255,.65),
    0 -1px rgba(58,79,17,.38)!important;
}

/* Grab/focus lift retained but scaled with the smaller cap. */
.peq-fader.is-dragging .peq-fader__cap,
.peq-control:focus-within .peq-fader__cap{
  filter:brightness(1.035)!important;
  box-shadow:
    0 12px 14px rgba(0,0,0,.36),
    0 5px 5px rgba(0,0,0,.28),
    inset 0 2px rgba(255,255,255,.96),
    inset 0 -3px rgba(31,36,32,.30),
    0 0 0 1px rgba(184,255,61,.12)!important;
}

@media(max-width:680px){
  .peq-fader{width:86px!important;height:190px!important}
  .peq-fader__cap{width:64px!important;height:28px!important;bottom:clamp(0px,calc(var(--position) - 14px),162px)!important}
  .peq-fader__cap i{top:12px!important}
}