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

   Accent is a burnt orange. With twenty labs already carrying an accent it
   was chosen by computing CIELAB distance to all of them: #e8590c sits
   ΔE 23.6 from its nearest neighbour, where the tightest existing pair
   (#fa5252 vs #ff6b6b) is 11.6 apart.

   It is also the colour this lab gives the SHAFT in every drawing, with
   the hole always blue — so page and plots agree without anyone having to
   remember a legend.
   ========================================================================= */
:root {
  --bp-cyan: #e8590c;          /* primary accent */
  --bp-blue: #f6a37a;          /* secondary */
  --bp-mark: #e8590c;
  --note-accent: #e8590c;
  --calc-col: 350px;
  --page-max: 1420px;
}

/* The background is a fine dimension grid — this is the one lab whose
   subject is the grid itself. */
body {
  background-image:
    linear-gradient(rgba(232, 89, 12, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 89, 12, 0.034) 1px, transparent 1px);
  background-size: 88px 22px, 88px 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 the column will not go under and the page scrolls sideways.
   Same fix as DynaLab, ServoLab and FilterLab. */
.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; }

/* --------------------------- recommended fits ---------------------------- */
/* The nine fits anybody actually specifies, one click each. A dropdown
   would hide them; the whole point is that the list is short. */
.chip-row { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.4rem; }
.chip-row button {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  color: var(--bp-ink-dim); background: var(--bp-bg);
  border: 1px solid var(--bp-line); border-radius: 6px;
  padding: 0.25rem 0.42rem; cursor: pointer; transition: 0.16s;
}
.chip-row button:hover { color: var(--bp-ink); border-color: var(--bp-cyan); }
.chip-row button.active { color: var(--bp-bg); background: var(--bp-cyan); border-color: var(--bp-cyan); }

.btn-add {
  width: 100%; display: inline-flex; align-items: center; justify-content: center;
  gap: 0.35rem; font-family: var(--mono); font-size: 0.75rem;
  background: var(--bp-bg); color: var(--bp-ink-dim);
  border: 1px dashed var(--bp-line); border-radius: 8px;
  padding: 0.42rem 0.5rem; cursor: pointer; transition: 0.16s;
}
.btn-add:hover { color: var(--bp-cyan); border-color: var(--bp-cyan); }
.btn-add .ico { font-size: 0.95rem; line-height: 1; }

/* ------------------------------ chain rows ------------------------------- */
.chain-row { display: grid; grid-template-columns: 1fr 1fr 46px 28px; gap: 0.25rem; margin-bottom: 0.28rem; }
.chain-row input, .chain-row select { width: 100%; }
.chain-row .del {
  background: transparent; border: 1px solid var(--bp-line); border-radius: 6px;
  color: var(--bp-ink-dim); cursor: pointer; font-size: 0.85rem; line-height: 1;
}
.chain-row .del:hover { color: #ff6b6b; border-color: #ff6b6b; }

/* ------------------------------ the verdict ------------------------------ */
.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); }
}