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

   Accent is a dark ochre. With twenty-six labs already carrying one it was
   chosen by CIELAB distance to all of them: #a2760c sits ΔE2000 17.1 from
   its nearest neighbour, where the tightest existing pair in the academy is
   5.3 apart. The hue circle is full after twenty-six labs — the widest gap
   is 36° — so the separation here is LIGHTNESS: ShaftLab and BearingLab own
   the neighbouring hues and both are light (L 72 and 82) against this one
   at L 53.

   It is also, roughly, the colour of a belt: rubber and glass cord. The
   drawings use it for the belt, red for the tight span and for what fails,
   blue for the slack span, green for stiffness and for what passes.
   ========================================================================= */
:root {
  --bp-cyan: #a2760c;          /* primary accent */
  --bp-blue: #c99a30;          /* secondary */
  --bp-mark: #a2760c;
  --note-accent: #a2760c;
  --calc-col: 370px;
  --page-max: 1420px;
}

/* The tooth pitch of a belt, at an opacity where it is texture rather than
   decoration. */
body {
  background-image:
    repeating-linear-gradient(90deg,
      rgba(162, 118, 12, 0.05) 0 2px,
      transparent 2px 14px);
}

.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 and the page scrolls sideways. Same fix as every lab before. */
.results-col { min-width: 0; }
.results-col svg { max-width: 100%; }

/* ------------------------------ 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; }

/* ------------------------------ the verdict ------------------------------ */
/* Two ceilings can stop a belt drive and they want opposite fixes: a slack
   side that let go needs more pretension, exhausted teeth need a wider
   belt. Naming the wrong one sends a designer tightening until a bearing
   dies. So the verdict names WHICH, before any number. */
.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; }

/* The handover row — the number ServoLab takes — is the point of the lab,
   so it is allowed to look like it. */
.res-table tr.handover td {
  background: rgba(162, 118, 12, 0.12);
  border-top: 1px solid rgba(162, 118, 12, 0.35);
}

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