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

   Accent is a grape magenta. It was not picked by eye: with nineteen labs
   already using an accent, the colour was chosen by computing CIELAB
   distance to all of them. #cc5de8 sits ΔE 25 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 ESTIMATE in every plot — the
   curve the whole subject turns on. Page and plots therefore agree without
   anyone having to remember a legend.
   ========================================================================= */
:root {
  --bp-cyan: #cc5de8;          /* primary accent */
  --bp-blue: #e0a8f5;          /* secondary */
  --bp-mark: #cc5de8;
  --note-accent: #cc5de8;
  --calc-col: 350px;
  --page-max: 1420px;
}

/* The background grid is drawn as a fine sample raster, because everything
   in this lab lives on a discrete time axis and the page may as well say
   so quietly. */
body {
  background-image:
    linear-gradient(rgba(204, 93, 232, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(204, 93, 232, 0.038) 1px, transparent 1px);
  background-size: 24px 88px, 24px 88px;
}

.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 and ServoLab. */
.results-col { min-width: 0; }
.results-col svg { max-width: 100%; }

/* --------------------------- segmented control --------------------------- */
.seg-row {
  display: flex; gap: 0.25rem; margin-bottom: 0.7rem;
  border: 1px solid var(--bp-line); border-radius: 8px; padding: 0.2rem;
  background: var(--bp-bg);
}
.seg-row button {
  flex: 1; font-family: var(--mono); font-size: 0.72rem; font-weight: 600;
  color: var(--bp-ink-dim); background: transparent; border: 0;
  border-radius: 6px; padding: 0.35rem 0.3rem; cursor: pointer; transition: 0.16s;
}
.seg-row button:hover { color: var(--bp-ink); }
.seg-row button.active { color: var(--bp-bg); background: var(--bp-cyan); }

/* ------------------------------ 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; }

.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; }

/* ------------------------------ the verdict ------------------------------ */
/* One line at the top of the results saying whether this filter is actually
   an improvement, before any plot has to be read. */
.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); }
}