/* bold.css — the Stage-5 "Bold instrument" vitals skin (an OVERRIDE layer, loaded only on ?skin=bold,
   ALTERNATIVE to refined.css — never both). A louder take on the refined direction: the NUMBERS take
   their organ's colour and grow, each card carries a wider bar + a faint colour wash + a coloured
   title, and the group headings are bigger so the themed zones read at a glance. Still an HONEST
   instrument, NOT art (Constitution Art. 9): colour = identity + legibility, never decoration that
   could be mistaken for the painting. Markup is UNCHANGED — colour keys off the `data-source` already
   on each `.vital`. Drop the query (or this <link>) to fall back; git tag v1-vitals-original is the
   deep restore point. The hero painting + the honesty footer are untouched. */

/* ── per-organ colour identity — a brighter, more saturated family than refined ──────────────── */
:root {
  --organ-air:     #2fd6c0;  /* teal       — the air you breathe (roadside + the outlook) */
  --organ-pollen:  #95e05f;  /* green      — the pollen load */
  --organ-rad:     #c0a3ff;  /* violet     — the gamma background */
  --organ-river:   #4fb6ff;  /* Rhine blue — the river (level + ships) */
  --organ-sky:     #7fd0ff;  /* pale sky   — aircraft overhead */
  --organ-grid:    #ffc24d;  /* amber      — the energy grid */
  --organ-weather: #f2cf8a;  /* warm sand  — weather / the river-and-sky baseline */
}

/* Each card declares ONE organ colour via --organ, then the shared rules below paint with it (bar,
   title, number, wash) — so the look is driven from this single mapping. Unlisted sources → sand. */
.vital                                      { --organ: var(--organ-weather); }
.vital[data-source="air-uba"],
.vital[data-source="air-quality"],
.vital[data-source="air-quality-forecast"]  { --organ: var(--organ-air); }
.vital[data-source="pollen-dwd"]            { --organ: var(--organ-pollen); }
.vital[data-source="radiation"]             { --organ: var(--organ-rad); }
.vital[data-source="rhine-level"],
.vital[data-source="ships"]                 { --organ: var(--organ-river); }
.vital[data-source="aircraft"]              { --organ: var(--organ-sky); }
.vital[data-source="power-price"]           { --organ: var(--organ-grid); }
.vital[data-source="weather"],
.vital[data-source="weather-forecast"]      { --organ: var(--organ-weather); }

/* ── the card: a wider bar, a faint organ-tinted wash, a glow on the coloured edge ───────────── */
.vital {
  border: 1px solid var(--line);
  border-left: 5px solid var(--organ);
  border-radius: 14px;
  padding: 1.05rem 1.15rem 0.9rem 1.25rem;
  background: var(--bg-soft);                                      /* fallback for old engines */
  background: color-mix(in srgb, var(--organ) 9%, var(--bg-soft));/* a faint wash of the organ hue */
}

/* the title becomes a confident coloured label */
.vital-title {
  color: var(--organ);
  font-weight: 700;
  opacity: 0.95;
}
.vital[data-source="ships"] .reading-subhead { color: var(--organ); opacity: 0.95; }

/* ── the heroes: the numbers take the organ colour and grow ──────────────────────────────────── */
.reading-value {
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--organ);
  line-height: 1.15;
}
.reading-label { color: var(--ink-dim); }
.reading-unit  { color: var(--ink-faint); font-size: 0.82rem; }

/* the list-style panels (ships/aircraft) carry COMPOUND text in the value — keep those rows compact,
   table-like and bright (not giant or fully tinted), so the long lines stay legible. */
.vital[data-source="ships"] .reading-value,
.vital[data-source="aircraft"] .reading-value {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
}

/* the honesty footer stays ALWAYS present (Art. 4/9) — quiet, so the reading leads */
.measure-meta { opacity: 0.8; }
.as-of-rel { font-weight: 400; }
.readings { gap: 0.5rem; }

/* ── the themed zones read as zones: bigger, brighter group headings with a gold hairline ──────── */
.vitals-head h2 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.vitals-head {
  border-bottom: 1px solid var(--line);
  margin-top: 2rem;
}
.vitals-head h2::after {                       /* a short warm accent under each zone title */
  content: "";
  display: block;
  width: 2.2rem;
  height: 2px;
  margin-top: 0.5rem;
  background: var(--gold);
  border-radius: 2px;
  opacity: 0.85;
}
.vitals-live { border-bottom: 0; margin-top: 0; }   /* the top "live · time" strip stays minimal */
.vitals-live h2::after { content: none; }