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

   Accent is a dark emerald. With twenty-five labs already carrying one it
   was chosen by CIELAB distance to all of them: #148e68 sits ΔE2000 21.4
   from its nearest neighbour, where the tightest existing pair in the whole
   academy is 5.3 apart.

   Two things the metric alone got wrong and had to be overruled. Left to
   itself it maximised distance by going GREY — technically far from every
   colourful accent, useless as an accent, indistinguishable from the body
   text. And after a chroma floor was imposed it still had to be checked by
   eye against the hue circle, which after twenty-five labs has no gap wider
   than 36°. So the separation here comes from LIGHTNESS: every existing
   green sits at L 74–84 and this one at L 52.

   It is also the colour of a contour map, which is what the whole textbook
   is drawn on. The figures use it for the descent and the answer, blue for
   the iterates, purple for the local model a method believes, and red for
   what fails.
   ========================================================================= */
:root {
  --bp-cyan: #148e68;          /* primary accent */
  --bp-blue: #3fb98d;          /* secondary */
  --bp-mark: #148e68;
  --note-accent: #148e68;
  --calc-col: 370px;
  --page-max: 1420px;
}

/* Contour lines, at an opacity where they are texture rather than
   decoration — the same idea the figures draw explicitly. */
body {
  background-image:
    repeating-radial-gradient(ellipse at 30% 40%,
      transparent 0 22px,
      rgba(20, 142, 104, 0.045) 22px 23px);
}

.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 ------------------------------ */
/* A method returning is not evidence that it found anything. The verdict
   states the INDEPENDENT check first — stationary, positive definite,
   nothing lower nearby — because a reader who takes "converged" at face
   value is the reader this lab is written for. */
.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 method comparison table wants the winner to be findable at a glance. */
.res-table tr.win td { background: rgba(20, 142, 104, 0.10); }
.res-table tr.lose td { color: var(--bp-ink-dim); }

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