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

   Accent is a light peach. After twenty-eight labs the hue circle is full,
   so this one was chosen on the two axes that were still free: it sits at
   ΔE2000 15.8 from its nearest neighbour (SpringLab's darker terracotta,
   L 59 against this one at L 80) with a contrast ratio of 10.8 against the
   page — the highest of any accent in the academy.

   A warm colour also happens to be right for the subject: this lab is
   mostly about energy that ends up as heat.

   The drawings use it for power and energy, red for what is lost, blue for
   what is stored, green for what does useful work — a scheme that maps
   directly onto the energy balance the whole lab rests on.
   ========================================================================= */
:root {
  --bp-cyan: #ffb3a0;          /* primary accent */
  --bp-blue: #ffcbbd;          /* secondary */
  --bp-mark: #ffb3a0;
  --note-accent: #ffb3a0;
  --calc-col: 380px;
  --page-max: 1420px;
}

/* A gentle warmth from the corner, at an opacity where it is texture. */
body {
  background-image:
    radial-gradient(ellipse 70% 50% at 85% 0%, rgba(255, 179, 160, 0.055), transparent 70%);
}

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

/* ------------------------------ 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 load list is editable, so it needs to look like a table of inputs
   rather than a table of results. */
.load-row { display: grid; grid-template-columns: 1fr 62px 62px 54px 26px; gap: 0.25rem; margin-bottom: 0.25rem; }
.load-row input { width: 100%; }
.load-head { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--bp-ink-dim); }
.load-del { background: none; border: 1px solid var(--bp-line); border-radius: 5px;
  color: var(--bp-ink-dim); cursor: pointer; font-size: 0.8rem; line-height: 1; padding: 0; }
.load-del:hover { color: #ff6b6b; border-color: #ff6b6b; }
.load-add { margin-top: 0.35rem; font-size: 0.72rem; }

/* ------------------------------ the verdict ------------------------------ */
/* The headline is the supply to order, because that is the one number a
   reader came for — but the body names what actually binds, since a design
   fails on the cable, the resistor or the heat far more often than on the
   supply itself. */
.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; }

/* Rows that are catalogue data rather than computed, marked as such —
   the distinction is a theme of this lab. */
.res-table tr.cat td { border-left: 2px solid rgba(255, 179, 160, 0.4); }

@media (max-width: 720px) {
  .f3 { grid-template-columns: repeat(2, 1fr); }
  .load-row { grid-template-columns: 1fr 54px 54px 46px 24px; }
}