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

   Accent is a deep teal-cyan. With twenty-one labs already carrying one it
   was chosen by CIELAB distance to all of them: #1098ad sits ΔE 20.7 from
   its nearest neighbour, where the tightest existing pair is 11.6 apart.

   It is also the colour this lab gives the CAMERA in every drawing, with
   rays in blue and world points in yellow — so page and plots agree without
   anyone having to remember a legend.
   ========================================================================= */
:root {
  --bp-cyan: #1098ad;          /* primary accent */
  --bp-blue: #66d9e8;          /* secondary */
  --bp-mark: #1098ad;
  --note-accent: #1098ad;
  --calc-col: 350px;
  --page-max: 1420px;
}

/* The background is a pixel raster — this is the lab whose whole subject is
   what a pixel grid can and cannot tell you. */
body {
  background-image:
    linear-gradient(rgba(16, 152, 173, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 152, 173, 0.032) 1px, transparent 1px);
  background-size: 26px 26px, 26px 26px;
}

.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 the four labs
   before this one. */
.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 ------------------------------ */
/* This lab's verdict has one job the others do not: say whether the
   calibration is even SOLVABLE, before any number is shown. A rank-deficient
   configuration produces no answer at all, and that is information. */
.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); }
}