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

   Sky blue, the eighth and last stop on the Mathematics track. It is the
   colour the figures across every lab use for measured data as opposed to
   an exact curve, which is what this lab is about.
   ========================================================================= */
:root {
  --bp-cyan: #4dabf7;
  --bp-blue: #a5d8ff;
  --bp-mark: #4dabf7;
  --note-accent: #4dabf7;
  --calc-col: 370px;
  --page-max: 1440px;
}

body {
  background-image:
    linear-gradient(rgba(77, 171, 247, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 171, 247, 0.022) 1px, transparent 1px);
  background-size: 34px 34px, 34px 34px;
}

.hint { font-size: 0.76rem; color: var(--bp-ink-dim); line-height: 1.55; margin-top: 0.5rem; }
.hint b { color: var(--bp-cyan); }
.results-col { min-width: 0; }
.results-col svg { max-width: 100%; }

/* ------------------------------ result cards ----------------------------- */
.vres {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.5rem; margin-bottom: 0.9rem;
}
.vres .card {
  border: 1px solid var(--bp-line); border-radius: 9px;
  background: var(--bp-panel); padding: 0.55rem 0.7rem;
}
.vres .card .k {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--bp-ink-dim);
}
.vres .card .v {
  font-family: var(--mono); font-size: 1.1rem; font-weight: 700;
  color: var(--bp-cyan); margin-top: 0.15rem; overflow-wrap: anywhere;
}
.vres .card .x {
  font-family: var(--mono); font-size: 0.68rem; color: var(--bp-ink-dim);
  margin-top: 0.15rem; overflow-wrap: anywhere;
}

.vnote {
  border: 1px solid var(--bp-line); border-left-width: 4px;
  border-left-color: #ffd43b; border-radius: 9px;
  background: var(--bp-panel); padding: 0.5rem 0.8rem; margin-bottom: 0.8rem;
  font-size: 0.8rem; line-height: 1.55; color: var(--bp-ink-dim);
}
.vnote b { color: #ffd43b; }
.vnote.ok { border-left-color: #5fe3a1; }
.vnote.ok b { color: #5fe3a1; }

/* ------------------------------ result tables ---------------------------- */
/* A complex number is two numbers, so every value column is wider than in
   the other labs and has to be allowed to wrap rather than push the table
   sideways. */
.res-table td.num { text-align: right; font-family: var(--mono); }
.res-table td.cx { text-align: right; font-family: var(--mono); color: #4dabf7; overflow-wrap: anywhere; }
.res-table tr.best td { background: rgba(95, 227, 161, 0.07); }
.res-table td.err-good { color: #51cf66; }
.res-table td.err-bad { color: #ff6b6b; }

.seg { display: inline-flex; border: 1px solid var(--bp-line); border-radius: 7px; overflow: hidden; }
.seg button {
  font-family: var(--mono); font-size: 0.72rem; cursor: pointer;
  background: transparent; color: var(--bp-ink-dim);
  border: none; padding: 0.3rem 0.65rem; transition: 0.16s;
}
.seg button.active { background: var(--bp-cyan); color: var(--bp-bg); font-weight: 700; }
.seg button:not(.active):hover { color: var(--bp-ink); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }

@media (max-width: 720px) {
  .vres { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
}

/* A complex value in a card: two numbers that must stay on one line if they
   possibly can, because "3 + 2i" broken across a line reads as two values. */
.vres .card .v { white-space: nowrap; overflow-x: auto; }
@media (max-width: 720px) { .vres .card .v { white-space: normal; } }