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

   Accent is a muted plum. With twenty-four labs already carrying one it was
   chosen by CIELAB distance to all of them: #a06a9e sits ΔE 30.2 from its
   nearest neighbour (RotLab's lighter orchid), where the tightest existing
   pair is 11.6 apart. The sweep's own top hits were an olive that collides
   with SafetyLab's hue and a pale pink that reads as a washed-out DynaLab —
   exactly the confusion the metric is meant to avoid and does not catch.

   It is also, roughly, the colour of an arc. The drawings use it for the
   weld metal, blue for the load and its components, red for limits, and a
   neutral grey for the parent plate.
   ========================================================================= */
:root {
  --bp-cyan: #a06a9e;          /* primary accent */
  --bp-blue: #c795c4;          /* secondary */
  --bp-mark: #a06a9e;
  --note-accent: #a06a9e;
  --calc-col: 360px;
  --page-max: 1420px;
}

/* A weld bead seen from above is a row of overlapping ripples. At this
   opacity it is texture, not decoration. */
body {
  background-image:
    repeating-radial-gradient(circle at 50% 0,
      rgba(160, 106, 158, 0.040) 0 1px,
      transparent 1px 13px);
  background-size: 26px 13px;
}

.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 criteria have to hold at once and they do not always agree about
   which grade or which direction is worse. The verdict names the binding
   one, because a reader who does not know that reads the wrong row. */
.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); }
}