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

   Accent is a dark gold-olive. With twenty-two labs already carrying one it
   was chosen by CIELAB distance to all of them: #9b9b0f sits ΔE 34.1 from
   its nearest neighbour — the largest margin any lab in the academy has,
   where the tightest existing pair is 11.6 apart. The hole in the palette
   turned out to be hue ≈ 100°, which is also the colour of a warning sign.

   It is the colour this lab gives LIMITS in every drawing, with the person
   in blue and the robot in neutral grey — so page and plots agree without
   anyone having to remember a legend.
   ========================================================================= */
:root {
  --bp-cyan: #9b9b0f;          /* primary accent */
  --bp-blue: #d4d21a;          /* secondary */
  --bp-mark: #9b9b0f;
  --note-accent: #9b9b0f;
  --calc-col: 360px;
  --page-max: 1420px;
}

/* Diagonal hazard stripes, at an opacity that reads as texture rather than
   as tape. The one lab where the background is allowed to mean something. */
body {
  background-image:
    repeating-linear-gradient(45deg,
      rgba(155, 155, 15, 0.030) 0 10px,
      transparent 10px 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 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 CCF scorecard: eight tick boxes that have to reach 65 of 100 points.
   A grid rather than a list, because the point of it is the total. */
.chk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.2rem 0.5rem; margin-top: 0.2rem; }
.chk-grid label {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.66rem; color: var(--bp-ink-dim); cursor: pointer; line-height: 1.3;
}
.chk-grid input { accent-color: var(--bp-cyan); margin: 0; flex: none; }
.chk-grid .pts { font-family: var(--mono); color: var(--bp-cyan); font-size: 0.6rem; }

/* ------------------------------ the verdict ------------------------------ */
/* This lab's verdict says which of two limits binds — force or pressure —
   before any number is shown, because a reader who does not know that reads
   the wrong row of the table. */
.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); }
  .chk-grid { grid-template-columns: 1fr; }
}