/* The colour of the climate cards.
 *
 * ── Why this file exists ────────────────────────────────────────────────────
 *
 * The advice cards are light surfaces — #eff6ff, #fffbeb, #fef2f2 — living on a
 * dark page. shared-styles.css sets `body { color: var(--text-primary) }` and
 * theme-get2grow.css makes that #f3f0e7, cream. So every element inside a card
 * that did not name its own colour inherited cream onto near-white:
 *
 *     .climate-incident-val   #f3f0e7 on #fef2f2  =  1.04 : 1   every sensor number
 *     .climate-advice-text    #93a48d on #fef2f2  =  2.42 : 1   the finding itself
 *     .climate-incident-key   #6b7280 on #fef2f2  =  4.42 : 1   just under AA
 *
 * The labels read and the numbers did not, which is backwards, and it is the
 * single biggest reason the cards were hard to follow: a grower was being asked
 * to weigh evidence they could not see.
 *
 * The trap underneath it: every `--color-*` custom property the inline card CSS
 * reads — --color-surface, --color-text-secondary, --color-border, --color-text,
 * --color-accent — is declared NOWHERE in this repo. Those rules have only ever
 * worked through their hardcoded fallbacks. A light palette pasted into a dark
 * page, holding together by accident. tests/frontend/climate_contrast_test.ts
 * fails on both halves of that now: unreadable pairs, and undefined variables.
 *
 * ── Why only colour lives here ──────────────────────────────────────────────
 *
 * The rest of the card CSS is still the inline <style> in html/climate.html.
 * That block interleaves card rules with rules for elements that sit on the
 * PAGE background and correctly use the dark theme's own variables —
 * .climate-advice-theme, .climate-attention, .climate-cult-bar. Moving it
 * wholesale is a layout change nobody can eyeball in CI, so this file takes the
 * part that was actually broken and can be checked arithmetically. Colour
 * decisions for the light islands belong here; spacing stays there.
 *
 * ── Order independence ──────────────────────────────────────────────────────
 *
 * Every rule below is scoped under .climate-advice-card or .climate-incident,
 * which makes it (0,2,0) against the (0,1,0) rules inline. It wins on
 * specificity, so it does not matter where this <link> sits relative to the
 * <style>, and no !important is needed anywhere.
 */

/* ── The palette, declared on the two light islands ─────────────────────────
 *
 * Named for their job rather than their shade, so a future tint change moves
 * one line. Measured against all five card backgrounds: 13:1 / 9:1 / 7:1.
 * The old --color-text-secondary fallback (#6b7280) failed AA on three of the
 * five, which is why the faint tone is a step darker than it was.
 */
.climate-advice-card,
.climate-incident {
  --ink: #1f2937; /* numbers, and anything that must be read first */
  --ink-soft: #374151; /* prose */
  --ink-faint: #4b5563; /* labels and headings */
  --hairline: #e5e7eb;
  color: var(--ink);
}

/* Prose. `.climate-advice-card p` is (0,1,1) against shared-styles.css's
   `p, .body` at (0,0,1), so this wins without touching the global rule. */
.climate-advice-card p,
.climate-incident p {
  color: var(--ink-soft);
}

/* The finding itself, and every note in the evidence panel. */
.climate-advice-card .climate-advice-text,
.climate-advice-card .climate-incident-note,
.climate-incident .climate-incident-note {
  color: var(--ink-soft);
}

/* ── The numbers ────────────────────────────────────────────────────────────
 * This is the 1.04:1 rule. A value carries more weight than its label, so it
 * gets the strongest ink on the card rather than none at all.
 */
.climate-advice-card .climate-incident-val,
.climate-incident .climate-incident-val {
  color: var(--ink);
}

.climate-advice-card .climate-incident-key,
.climate-incident .climate-incident-key,
.climate-advice-card .climate-incident-heading,
.climate-incident .climate-incident-heading {
  color: var(--ink-faint);
}

/* Summary line of a history entry: the description had no colour of its own and
   inherited cream onto #fafafa. */
.climate-incident .climate-incident-summary,
.climate-incident .climate-incident-what {
  color: var(--ink);
}

/* Actuator-path chips: a light chip that never set a text colour. */
.climate-advice-card .climate-incident-step,
.climate-incident .climate-incident-step {
  background: var(--hairline);
  color: var(--ink-soft);
}

/* Block separators, replacing reads of the undefined --color-border. */
.climate-advice-card .climate-incident-block,
.climate-incident .climate-incident-block {
  border-top-color: var(--hairline);
}

/* ── The evidence panel ─────────────────────────────────────────────────────
 *
 * Rows rather than a grid, because these are ranked: the first one is the
 * reading the verdict rested on and the last is background. A grid says "these
 * are peers", which is the claim the old 24-cell dump was making and getting
 * wrong.
 */
.climate-evidence-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.82rem;
  padding: 0.18rem 0;
}

/* The label takes the slack so the numbers line up down the column, which is
   the only way a reader compares them. */
.climate-evidence-row .climate-incident-key {
  flex: 1;
  min-width: 0;
}

/* "dicht", "uit", "droger dan binnen" — the plain read of the number to its
   left. Quieter than the value: it explains, it is not the measurement. */
.climate-evidence-read {
  font-size: 0.78rem;
  color: var(--ink-faint);
  font-style: italic;
}

/* How much of that lever was still available. */
.climate-evidence-note {
  font-size: 0.78rem;
  color: var(--ink-faint);
}

/* The row the verdict turned on carries a marker, so the eye lands on it before
   it reads anything. Nothing else on the panel is coloured. */
.climate-evidence-row--lever,
.climate-evidence-row--precondition {
  border-left: 3px solid #1a7a4a;
  padding-left: 0.5rem;
  margin-left: -0.5rem;
}

.climate-evidence-row--driver {
  border-left: 3px solid #6b9fd4;
  padding-left: 0.5rem;
  margin-left: -0.5rem;
}

/* Everything the panel did not lead with. Deliberately plain — it is the
   working, not the answer. */
.climate-incident-all {
  margin-top: 0.2rem;
}

.climate-incident-all-summary {
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--ink-faint);
  padding: 0.2rem 0;
}

.climate-incident-all[open] .climate-incident-all-summary {
  margin-bottom: 0.3rem;
}

/* ── Phones ─────────────────────────────────────────────────────────────────
 *
 * The evidence row is one line on a desktop — label, value, its plain read and
 * the headroom note. At 390 px those four fight for the width and the value,
 * the thing the row exists for, is what gets squeezed. Stacked instead: the
 * label on its own line, the measurement and its read under it. The rest of
 * the card is prose and already wraps. (responsive_css_test.ts)
 */
@media (max-width: 768px) {
  .climate-evidence-row {
    flex-wrap: wrap;
    row-gap: 0.1rem;
  }
  .climate-evidence-row .climate-incident-key {
    flex: 1 0 100%;
  }
  .climate-evidence-note {
    flex-basis: 100%;
  }
}