/* machine-console.css — extra controls for the operator console.
 * Sits on top of machine.css. Only styles elements the console adds
 * (sliders, ancillary selects, driver labels, synchroscope dial). */

/* ---- Driver / setpoint sliders ---- */
.drv { display: flex; flex-direction: column; gap: .35rem; }
.drv label {
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: #7f8fb3;
  display: flex; align-items: baseline; gap: .35rem;
}
.drv label .dv {
  font-family: "JetBrains Mono", monospace; font-size: .85rem; font-weight: 700;
  color: #fff; text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums;
}

.mslider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 999px;
  background: rgba(255,255,255,0.12); outline: none; cursor: pointer;
}
.mslider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: #C8102E; border: 2px solid #fff2; box-shadow: 0 0 8px 1px rgba(200,16,46,.5); cursor: pointer;
}
.mslider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: #C8102E;
  border: 2px solid #fff2; box-shadow: 0 0 8px 1px rgba(200,16,46,.5); cursor: pointer;
}

/* ---- Ancillary / mode select rows ---- */
.anc {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  font-size: .74rem; color: #c3cee4; padding: .15rem 0;
}
.anc > span:first-child { color: #93a2c4; }
.msel {
  background: rgba(255,255,255,0.05); color: #dbe4f5; border: 1px solid rgba(255,255,255,0.14);
  border-radius: .4rem; padding: .25rem .5rem; font-size: .72rem; font-weight: 600;
  font-family: "JetBrains Mono", monospace; cursor: pointer; min-width: 5.4rem;
}
.msel:focus { outline: none; border-color: rgba(200,16,46,.6); }
.msel option { background: #111827; color: #dbe4f5; }

.ml-2 { margin-left: .75rem; }

/* ---- Synchroscope dial ---- */
.synchro { width: 100%; max-width: 150px; display: block; }
.synchro .dial-face { fill: #0f172a; stroke: #334155; stroke-width: 2; }
.synchro .tick { stroke: #475569; stroke-width: 1.5; }
.synchro .tick-12 { stroke: #4ade80; stroke-width: 2.5; }
.synchro .dial-lab { fill: #7f8fb3; font-size: 8px; font-family: "JetBrains Mono", monospace; }
.synchro .needle { stroke: #f87171; stroke-width: 3; stroke-linecap: round; transition: transform .12s linear; transform-origin: 60px 60px; }
.synchro.locked .needle { stroke: #4ade80; }
.synchro .hub { fill: #94a3b8; }
.synchro.locked .hub { fill: #4ade80; }

/* breaker pills are interactive here */
.machine-room .brk:hover { filter: brightness(1.15); }