/* =========================
   Headings & labels (form context)
   ========================= */

h3{
  margin: 14px 0 6px 0;
  font-size: 0.92rem;
  color: var(--brand-600);
  letter-spacing: 0.02em;
}

label{
  display:block;
  margin-top: 10px;
  font-weight: 650;
  color: var(--brand-600);
  font-size: 0.92rem;
}

.muted{
  color: var(--muted);
  font-size: 0.9rem;
}

.field-note{
  display:block;
  margin-top: 8px;
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.25;
}

/* =========================
   Inputs / selects / textarea
   ========================= */

input,
select,
textarea{
  width:100%;
  margin-top: 6px;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.03),
    rgba(255,255,255,0.01)
  );
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  font-size: 0.96rem;
  min-height: var(--tap);
  outline: none;
}

input[readonly],
input[disabled],
textarea[readonly],
textarea[disabled]{
  opacity: 0.92;
  background: rgba(255,255,255,0.02);
}

input:focus,
select:focus,
textarea:focus{
  border-color: var(--focus);
  box-shadow:
    0 0 0 3px var(--shadow),
    inset 0 1px 0 rgba(255,255,255,0.03);
}

textarea#output{
  min-height: 180px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
  font-size: 0.90rem;
}

/* =========================
   Remove numeric steppers
   ========================= */

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

input[type="number"]{
  -moz-appearance:textfield;
}

/* =========================
   Form rows (mobile‑first)
   ========================= */

.form-row{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-top: 6px;
}

.form-row .col{
  flex:1;
  min-width:0;
}

@media (min-width: 640px){
  .form-row{
    flex-direction:row;
    gap:12px;
  }
}

/* Prevent overflow from selects/inputs */
.form-row select,
.form-row input{
  min-width: 0;
}

/* =========================
   Controls block
   ========================= */

.controls{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-top: 10px;
  align-items:stretch;
}

.controls .inline{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.check{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 650;
  color: var(--brand-600);
  font-size: 0.92rem;
}

.check input{
  width:20px;
  height:20px;
  min-height:unset;
  margin:0;
  accent-color: var(--brand);
}

@media (min-width: 760px){
  .controls{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }
  .controls .inline{
    flex:1;
  }
}

/* =========================
   Select readability (dark UI)
   ========================= */

select{
  background: rgba(255,255,255,0.04);
  color: var(--ink);
}

select option{
  background: #000000;
  color: #e8ecf7;
  padding: 10px;
}

select:focus{
  outline:none;
  background-color: var(--focus);
  border-color: var(--focus);
}

/* =========================
   Search inputs (equipment / tags)
   ========================= */

#tagSearch,
#inputEquipSearch,
#outputEquipSearch{
  background: linear-gradient(
    180deg,
    var(--focus),
    var(--shadow)
  );
  border: 1px dashed rgba(255,255,255,0.14);
}

#tagSearch:focus,
#inputEquipSearch:focus,
#outputEquipSearch:focus{
  border-color: var(--brand);
  box-shadow:
    0 0 0 1px var(--focus),
    0 0 12px var(--shadow),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

/* =========================
   Equipment selects
   ========================= */

#inputEquipSelect,
#outputEquipSelect{
  border-color: var(--card-border);
}

#inputEquipSearch,
#inputEquipSelect,
#outputEquipSearch,
#outputEquipSelect{
  margin-bottom: 6px;
}

/* =========================
   Output Characteristic layout fixes
   ========================= */

#outputCharacteristic{
  width: 100%;
  max-width: 100%;
}

#outputCharacteristic + .field-note{
  margin-top: 6px;
}

#instrumentSetup .form-row > .col:has(#outputCharacteristic){
  flex: 1;
}