/* Limiter Calculator — Console layer on top of styles.css.
   Class names are load-bearing: limiter-calculator.js builds the multi-way
   section markup from a template, so .limiter-section and .section-* must keep
   their names. */

/* ── Threshold rail ──────────────────────────────────────────────────────
   Three parallel thresholds, so three windows rather than one promoted value.
   They are recessed into the readout, not raised on top of it. */
.rail {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 520px) { .rail { grid-template-columns: 1fr; } }

.meter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 13px 14px 12px;
  background: #0b0e11;
  border: 1px solid #070909;
  border-radius: var(--radius-md);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.6);
  min-width: 0;
}
.meter > .silk { color: var(--faint); margin-bottom: 3px; }
.meter-val {
  font-family: var(--font-mono);
  font-stretch: 87.5%;
  font-weight: 500;
  font-size: clamp(1.25rem, 4.5vw, 1.5rem);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--led);
  overflow-wrap: anywhere;
}
.meter-sub {
  font-family: var(--font-mono);
  font-stretch: 87.5%;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.meter-sub + .meter-sub { color: var(--faint); }
/* Which failure mode each threshold guards against. Set neutral, on purpose:
   these are a taxonomy, and running them green, amber, red made them read as
   a severity ramp. On this site amber means caution and red means over, and
   those meanings are worth more than a colour-coded label. */
.meter-tag {
  margin-top: 7px;
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

/* A threshold resting on the 2 x RMS default is not a measured figure, so it
   does not get the LED. Dimmed, and it says so. */
.meter.is-assumed .meter-val { color: var(--muted); }
.meter.is-assumed .meter-tag::after {
  content: " · assumed";
  color: var(--faint);
}

/* Only shown once a margin is actually applied; JS toggles display. */
.safety-note {
  display: none;
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid #1b1f23;
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--amber);
}

.clip-warning { margin: -14px 0 26px; padding-left: 12px; border-left: 2px solid rgba(228, 87, 61, .45); }

/* ── Amplifier panel ─────────────────────────────────────────────────── */
.gain-hint-side { align-self: end; padding-bottom: 4px; }
.sensitivity-rule {
  grid-column: 1 / -1;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--rule-2);
}
.amp-results { margin-top: var(--spacing-md); }

/* ── Manual attack/release ───────────────────────────────────────────── */
.overrides-toggle { margin-top: var(--spacing-md); }
.overrides-toggle button {
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  min-height: 44px;
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.overrides-toggle button:hover { border-color: var(--led); color: var(--led); }
.overrides-content { display: none; margin-top: var(--spacing-md); }
.overrides-content.open { display: block; }

/* ── Multi-way sections ──────────────────────────────────────────────── */
.limiter-section {
  background: var(--well);
  border: 1px solid #0b0e10;
  border-radius: var(--radius-md);
  box-shadow: var(--inset);
  padding: var(--spacing-md) 14px;
  margin-bottom: 12px;
}
.limiter-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--rule-2);
}
.limiter-section .section-header h4 {
  margin: 0;
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--silk);
}
.btn-remove-section {
  background: none;
  border: 1px solid var(--rule);
  color: var(--muted);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition), color var(--transition);
}
.btn-remove-section:hover { border-color: var(--red); color: var(--red); }

.section-result { margin-top: var(--spacing-md); padding-top: var(--spacing-sm); border-top: 1px solid var(--rule-2); }
.section-result-header {
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 6px 0 2px;
}
.section-result-header:first-child { padding-top: 0; }
.section-result-amp { border-left: 2px solid var(--led-dim); margin: 2px 0 2px 2px; padding-left: 10px; }
/* Same leader-line device as .ro-line, at section scale. */
.section-result-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; padding: 3px 0; }
.section-result-row .result-label {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-narrow);
  font-weight: 600;
  font-size: 0.625rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.section-result-row .result-label::after {
  content: "";
  flex: 1 1 auto;
  min-width: 12px;
  align-self: center;
  border-bottom: 1px dotted #363d44;
  transform: translateY(-2px);
}
.section-result-row .result-value {
  flex: 0 1 auto;
  margin-left: auto;
  font-family: var(--font-mono);
  font-stretch: 87.5%;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--led);
  text-align: right;
}
.section-divider { border: none; border-top: 1px solid var(--rule-2); margin: var(--spacing-sm) 0; }
.section-result-placeholder { font-size: 0.8125rem; color: var(--faint); padding: var(--spacing-sm) 0; }

/* ── Disclaimer ──────────────────────────────────────────────────────────
   Amber left rule rather than a tinted panel: it has to be read, not decorated. */
.disclaimer-box {
  margin-bottom: var(--spacing-lg);
  /* 17 + the 2px rule puts the text 19px in, flush with .panel's 18 + 1. */
  padding-left: 17px;
  border-left: 2px solid rgba(240, 169, 60, .5);
  font-size: 0.8125rem;
  color: var(--muted);
}
.disclaimer-box strong { color: var(--amber); }
.disclaimer-box p { margin-bottom: var(--spacing-sm); }
.disclaimer-box p:last-child { margin-bottom: 0; }

.help-text { font-size: 0.75rem; color: var(--faint); }