/* =========================================================================
   ServoLab — page identity on top of kit.css.

   Accent is green, the one hue nothing in the other eighteen labs uses, and
   it is also the colour this lab gives the motor-side response — the curve
   the whole subject turns on. Page and plots therefore agree without anyone
   having to remember a legend.
   ========================================================================= */
:root {
  --bp-cyan: #51cf66;          /* primary accent */
  --bp-blue: #8ce99a;          /* secondary */
  --bp-mark: #51cf66;
  --note-accent: #51cf66;
  --calc-col: 350px;
  --page-max: 1420px;
}

/* The background grid is drawn as decades: wide columns, so the page reads
   like the logarithmic axes every plot in this lab uses. */
body {
  background-image:
    linear-gradient(rgba(81, 207, 102, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(81, 207, 102, 0.04) 1px, transparent 1px);
  background-size: 92px 92px, 92px 92px;
}

.hint { font-size: 0.76rem; color: var(--bp-ink-dim); line-height: 1.55; margin-top: 0.5rem; }
.hint b { color: var(--bp-cyan); }

/* A grid column is min-width:auto by default, so the widest plot inside it
   sets a floor the column will not go under and the page ends up scrolling
   sideways. Same fix as DynaLab. */
.results-col { min-width: 0; }
.results-col svg { max-width: 100%; }

/* --------------------------- segmented control --------------------------- */
.seg-row {
  display: flex; gap: 0.25rem; margin-bottom: 0.7rem;
  border: 1px solid var(--bp-line); border-radius: 8px; padding: 0.2rem;
  background: var(--bp-bg);
}
.seg-row button {
  flex: 1; font-family: var(--mono); font-size: 0.74rem; font-weight: 600;
  color: var(--bp-ink-dim); background: transparent; border: 0;
  border-radius: 6px; padding: 0.35rem 0.4rem; cursor: pointer; transition: 0.16s;
}
.seg-row button:hover { color: var(--bp-ink); }
.seg-row button.active { color: var(--bp-bg); background: var(--bp-cyan); }

/* ------------------------------ field groups ----------------------------- */
.grp-label {
  font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--bp-ink-dim);
  margin: 0.55rem 0 0.25rem;
}
.grp-label:first-child { margin-top: 0.1rem; }
.f3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; }
.f2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.3rem; }
.f3 .mini-field label, .f2 .mini-field label { font-size: 0.63rem; }

.btn-add {
  width: 100%; display: inline-flex; align-items: center; justify-content: center;
  gap: 0.35rem; font-family: var(--mono); font-size: 0.75rem;
  background: var(--bp-bg); color: var(--bp-ink-dim);
  border: 1px dashed var(--bp-line); border-radius: 8px;
  padding: 0.42rem 0.5rem; cursor: pointer; transition: 0.16s;
}
.btn-add:hover { color: var(--bp-cyan); border-color: var(--bp-cyan); }
.btn-add .ico { font-size: 0.95rem; line-height: 1; }

/* ------------------------------ the verdict ------------------------------ */
/* One line at the top of the results that says whether this axis is going to
   be a problem, before any plot is read. */
.verdict {
  display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap;
  border: 1px solid var(--bp-line); border-left-width: 4px; border-radius: 10px;
  padding: 0.6rem 0.8rem; margin-bottom: 0.9rem; background: var(--bp-panel);
}
.verdict.good { border-left-color: #51cf66; }
.verdict.fair { border-left-color: #ffd43b; }
.verdict.bad { border-left-color: #ff6b6b; }
.verdict .vhead { font-family: var(--mono); font-size: 0.9rem; font-weight: 700; }
.verdict.good .vhead { color: #51cf66; }
.verdict.fair .vhead { color: #ffd43b; }
.verdict.bad .vhead { color: #ff6b6b; }
.verdict .vbody { font-size: 0.78rem; color: var(--bp-ink-dim); line-height: 1.5; }

.res-sub { font-size: 0.68rem; color: var(--bp-ink-dim); margin-top: 0.1rem; }

@media (max-width: 720px) {
  .f3 { grid-template-columns: repeat(2, 1fr); }
}