/**
 * Madison Equity Data — Provenance Tier System (CSS)
 * ------------------------------------------------------------------
 * Wave 2 S1 (PIP-79). The reusable T1–T5 confidence encoding —
 * design/tokens.css §"T1–T5 provenance tiers" made into consumable
 * classes. This is the beat-the-reference move (research/2026-07-03_
 * excellence-bar-brief.md: Eviction Lab flags measured-vs-modeled
 * per tract; ours reads ON the map fill, not just on click).
 *
 * CONSUMPTION CONTRACT: see shared/components.md §"Tier system".
 * Two independent pieces, use whichever a surface needs:
 *   1. .tier-chip.t1..t5   — the small pill for legends/cards/inline
 *      claims (shape/position from shared/shell.css .tier-chip; this
 *      file adds the per-tier color treatment).
 *   2. .tier-swatch.t1..t5 — a larger rectangular swatch for legend
 *      keys (matches design/style-tile.html .swatch exactly).
 * For ON-MAP tier encoding (choropleth fills in canvas/SVG/Leaflet/
 * MapLibre, not HTML DOM), use shared/tier.js's getTierPaint() /
 * TIER_HATCH_PATTERN_SVG — CSS classes below only style HTML chrome.
 *
 * Guardrail (DESIGN-NOTES.md §3, enforced here): T4/T5 chip/swatch
 * TEXT always sits on -tint background in --ink (AAA) — only the
 * swatch FILL carries the sub-AA "uncertain" color, and it always
 * carries a second, non-color channel (hatch + reduced opacity) so
 * the signal survives grayscale print and color-blindness.
 * ------------------------------------------------------------------ */

/* ==================================================================
   TIER CHIP — color layer (shape/base class .tier-chip in shell.css)
   ================================================================== */
.tier-chip {
  color: var(--ink); /* chip TEXT is always AAA ink-on-tint */
}
.tier-chip.t1 { background: var(--tier-1-tint); border-left: 3px solid var(--tier-1); }
.tier-chip.t2 { background: var(--tier-2-tint); border-left: 3px solid var(--tier-2); }
.tier-chip.t3 { background: var(--tier-3-tint); border-left: 3px solid var(--tier-3); }
.tier-chip.t4 { background: var(--tier-4-tint); border-left: 3px dashed var(--tier-4); }
.tier-chip.t5 { background: var(--tier-5-tint); border-left: 3px dotted var(--tier-5); }

/* Compact variant — inline in prose/captions, no left border block */
.tier-chip--inline {
  border-left: none;
  padding: 1px var(--sp-1);
}

/* ==================================================================
   TIER SWATCH — legend-key rectangle. T4/T5 carry the hatch overlay
   + reduced opacity (the "visually uncertain" treatment) so a
   grayscale printer or color-blind reader still gets the signal.
   ================================================================== */
.tier-swatch {
  width: 44px;
  height: 26px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(28, 25, 21, 0.25);
  flex-shrink: 0;
}
.tier-swatch.t1 { background: var(--tier-1); }
.tier-swatch.t2 { background: var(--tier-2); }
.tier-swatch.t3 { background: var(--tier-3); }
.tier-swatch.t4 {
  background-color: var(--tier-4);
  background-image: repeating-linear-gradient(
    45deg,
    var(--hatch-stroke) 0 1.5px,
    transparent 1.5px var(--hatch-gap-px)
  );
  opacity: calc(1 - var(--hatch-opacity) + 0.35);
  border-style: dashed;
}
.tier-swatch.t5 {
  background-color: var(--tier-5);
  background-image: repeating-linear-gradient(
    45deg,
    var(--hatch-stroke) 0 1.5px,
    transparent 1.5px var(--hatch-gap-px)
  );
  opacity: calc(1 - var(--hatch-opacity-t5) - 0.15);
  border-style: dotted;
}

/* Small swatch variant — tract-card / inline-legend density */
.tier-swatch--sm { width: 28px; height: 18px; }

/* ==================================================================
   TIER LEGEND ROW — the full grid row (swatch + chip + description),
   matching design/style-tile.html .legend-row exactly, so S2/S3 can
   build a legend by repeating this row 1–5 times without re-deriving
   the grid math.
   ================================================================== */
.tier-legend {
  background: var(--paper-raised);
  border: 1px solid var(--rule-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-6);
}
.tier-legend-title {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-1);
}
.tier-legend-subtitle {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--slate);
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-4);
}
.tier-legend-row {
  display: grid;
  grid-template-columns: 44px auto 1fr;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--rule-light);
}
.tier-legend-row:last-of-type { border-bottom: none; }
.tier-legend-row .desc {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  line-height: var(--lh-data);
  color: var(--ink-mid);
}
.tier-legend-source {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule-light);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--slate);
  line-height: 1.6;
}

@media (max-width: 480px) {
  .tier-legend-row { grid-template-columns: 36px auto; }
  .tier-legend-row .desc { grid-column: 1 / -1; padding-top: var(--sp-1); }
}

/* ==================================================================
   PRINT — hatch/opacity must survive grayscale (the whole point).
   ================================================================== */
@media print {
  .tier-swatch, .tier-chip {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .tier-legend { box-shadow: none; border: 1px solid var(--rule); break-inside: avoid; }
}