/* Widgets shared by lessons 04–06: chips, fields, readout tiles, SVG captions and the end-of-lesson check. */
.prereq { font-size: .85rem; color: var(--muted); }
.prereq a, .bridge a { color: var(--u); }
.lead { color: var(--muted); max-width: 820px; margin-top: 0; }
.group { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.group legend { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 0; margin-bottom: 7px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chips button { min-height: 40px; padding: 6px 12px; font-size: .84rem; }
.chips.small button { min-height: 34px; padding: 4px 10px; font-size: .76rem; color: var(--muted); }
.chips button[aria-pressed=true] { border-color: var(--u); color: var(--u); background: #2a3a3e; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: .86rem; margin: 6px 0 14px; }
.field select, .field input, .kit-input { min-height: 42px; border-radius: 9px; border: 1px solid var(--line); background: #10202c; color: var(--text); padding: 6px 10px; font: inherit; }
.meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0 6px; }
.meters div { background: #10202c; border-radius: 10px; padding: 10px 12px; }
.meters span { display: block; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.meters strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.meters strong.hot, .hot { color: var(--hot); }
svg .cap { fill: var(--muted); font-size: 11px; font-family: system-ui, sans-serif; letter-spacing: .04em; }
svg .cap.mid { text-anchor: middle; } svg .cap.end { text-anchor: end; } svg .cap.strong { fill: var(--text); font-weight: 700; font-size: 12px; }
svg .track { fill: #203644; }
svg .limit { stroke: var(--u); stroke-width: 2; stroke-dasharray: 4 4; }
svg .limit.hot { stroke: var(--hot); }
svg .axis { stroke: var(--line); fill: none; }

.check-score { font-size: .85rem; color: var(--muted); margin-top: 0; }
.check-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.check { background: #10202c; border-radius: 14px; padding: 18px; border: 1px solid transparent; }
.check.ok { border-color: #7ed6a055; }
.check h3 { font-size: 1rem; }
.check-answers { display: flex; flex-direction: column; gap: 6px; }
.check-answers button { text-align: left; font-size: .86rem; }
.check-answers button[aria-pressed=true] { border-color: var(--u); color: var(--u); }
.check.ok .check-answers button[aria-pressed=true] { border-color: var(--ok); color: var(--ok); }
.check-feedback { font-size: .84rem; color: var(--muted); margin-bottom: 0; min-height: 1.4em; }

@media (max-width: 800px) {
  .meters { grid-template-columns: 1fr 1fr; }
  .check-list { grid-template-columns: 1fr; }
}