/* The trade calculators in the Standard Suite: AREA, TILE, GRAVEL, STAIR,
   BTU, OHM and BANDS.

   Four of them take a list of rows (the parts of a floor, the areas to be
   covered, the walls a room loses heat through), each row a handful of
   labelled boxes and a button. The row is one grid that fits as many
   columns as the panel has room for, so it needs no breakpoint of its own:
   seven across on a desk, two on a phone. Every box keeps its own label
   above it, so a screen reader and a phone both know which column it is. */

.tr-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
  align-items: end;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 6px;
}
.tr-wide { grid-column: span 2; }
.tr-dim {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  font: 600 var(--text-2xs) var(--font-sans);
  color: var(--ink-soft);
}
.tr-dim input, .tr-dim select {
  width: 100%;
  min-height: 44px;
  font: var(--text-sm) var(--font-sans);
  padding: 8px 9px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--paper-raised);
  color: var(--ink);
}
.tr-dim input[type=number] { text-align: right; font-family: var(--font-mono); }
.tr-row .btn-secondary { min-height: 44px; }
.tr-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font: var(--text-sm) var(--font-sans);
  color: var(--ink);
}
.tr-check input { width: 20px; height: 20px; }
tr.tr-total td, tr.tr-total th { border-top: 2px solid var(--rule); font-weight: 700; }
.tr-yes { color: var(--accent-strong); }
.tr-no { color: var(--danger); }
.tr-narrow { max-width: 360px; }
.tr-scroll { overflow-x: auto; }

/* BANDS draws the resistor it has read. The body and the lead take the
   page's colours; the bands are the resistor's own, which is the point. */
.tr-resistor { max-width: 420px; margin: 14px 0 4px; }
.tr-resistor svg { display: block; width: 100%; height: auto; }
.tr-lead { fill: var(--ink-faint); }
.tr-body { fill: var(--paper-inset); stroke: var(--rule-strong); stroke-width: var(--icon-stroke); }