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

   Accent is a muted terracotta. With twenty-three labs already carrying one
   it was chosen by CIELAB distance to all of them: #c37d6e sits ΔE 32.6
   from its nearest neighbour, where the tightest existing pair is 11.6
   apart. Two paler candidates scored higher but read as washed-out copies
   of DynaLab's coral — exactly the confusion the metric is meant to avoid
   and does not catch.

   It is also, roughly, the colour of phosphor bronze, which is a real
   spring material. The drawings use it for the spring itself, blue for
   load and deflection, red for limits.
   ========================================================================= */
:root {
  --bp-cyan: #c37d6e;          /* primary accent */
  --bp-blue: #e0a08f;          /* secondary */
  --bp-mark: #c37d6e;
  --note-accent: #c37d6e;
  --calc-col: 360px;
  --page-max: 1420px;
}

/* A faint coil: repeating soft arcs, at an opacity that reads as paper
   texture rather than as decoration. */
body {
  background-image:
    repeating-linear-gradient(105deg,
      rgba(195, 125, 110, 0.030) 0 2px,
      transparent 2px 22px);
}

.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 ------------------------------ */
/* Five conditions have to hold at once, and the useful answer is not "it is
   fine" but WHICH of them is closest to failing. The verdict names it. */
.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); }
}