/* ============================================================
   Evidence grammar components — one vocabulary on every surface.
   Class word is ALWAYS rendered in text; color and border structure
   are reinforcement, never the sole carrier.
   observed = ink + solid · modeled = violet + dotted ·
   derived = ink + solid, violet label word (computed from observed inputs) ·
   input = amber + dashed · unknown = grey + double (hollow).
   Canonical source: pheme-backend/site/evidence.css (build:site emits /evidence.css).
   ============================================================ */

.prov {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  display: flex;
  gap: var(--s2);
  align-items: baseline;
  flex-wrap: wrap;
  padding: var(--s1) 0 var(--s1) var(--s3);
}
.prov b { font-weight: 500; color: var(--ink); text-transform: uppercase; }
.prov.observed { border-left: 3px solid var(--ev-observed); }
.prov.modeled { border-left: 3px dotted var(--ev-modeled); }
.prov.modeled b { color: var(--ev-modeled); }
/* derived = computed FROM observed inputs (e.g. atlas density), never a
   separate observation of its own — the rule stays observed's solid ink
   (grammar: this is arithmetic on real data, not a hypothetical), but the
   class word prints in the modeled violet so a reader can still tell "this
   number was computed, not sourced verbatim" at a glance. */
.prov.derived { border-left: 3px solid var(--ev-observed); }
.prov.derived b { color: var(--ev-modeled); }
.prov.input { border-left: 3px dashed var(--ev-input); }
.prov.input b { color: var(--ev-input); }
.prov.unknown { border-left: 3px double var(--ev-unknown); }
.prov.unknown b { color: var(--ev-unknown); }

.ev-block { padding: var(--s4); border: 1px solid var(--rule); }
.ev-block.observed { border-left: 3px solid var(--ev-observed); }
.ev-block.modeled { border-left: 3px dotted var(--ev-modeled); }
.ev-block.input { border-left: 3px dashed var(--ev-input); }
.ev-block.unknown { border-left: 3px double var(--ev-unknown); }

.legend-bar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--s2) 0;
}
.legend-bar .lname { color: var(--ink); font-weight: 500; }
.legend-ramp { display: inline-flex; height: 12px; }
/* forced-color-adjust: none only here — the swatch's fill IS the key that
   explains the map's colors; under forced-colors mode every inline
   background collapses to white, so the reader loses the one place that
   decodes what a map color means (the map's own SVG fill survives, since
   forced-colors doesn't touch presentation-attribute fill). Everything else
   in .legend-bar (text, borders, .prov) still respects forced colors. */
.legend-ramp i { width: 22px; height: 12px; display: inline-block; forced-color-adjust: none; }

/* night-surface variants */
.night .prov, body[data-surface="night"] .prov { color: var(--bone-soft); }
.night .prov b, body[data-surface="night"] .prov b { color: var(--bone); }
.night .prov.modeled, body[data-surface="night"] .prov.modeled { border-left-color: var(--ev-modeled-night); }
.night .prov.modeled b, body[data-surface="night"] .prov.modeled b { color: var(--ev-modeled-night); }
.night .prov.derived b, body[data-surface="night"] .prov.derived b { color: var(--ev-modeled-night); }
.night .legend-bar, body[data-surface="night"] .legend-bar { border-color: var(--night-rule); color: var(--bone-soft); }
.night .legend-bar .lname, body[data-surface="night"] .legend-bar .lname { color: var(--bone); }