/*!
 * Phase 213 extraction — layer: p212-contract-hardening
 * -----------------------------------------------------
 * Owner        : MTLE Phase 212 (UI contract hardening: mutually
 *                exclusive Water Topology card visuals)
 * Scope attr   : html[data-p212="v1"] (set by /web/mtle/js/p212-contract-hardening.js)
 * Public hook  : window._p212
 * Cascade      : loads LAST so these rules win over p210's selected-card
 *                border/shadow when a relief option is the active
 *                Water Topology choice.
 * Contract     : Display-only.  All wiring of canonical state goes through
 *                window._p212ApplyWaterTopologyChoice().  No CSS rule here
 *                ever changes pointer-events, so clicks still reach the
 *                p210 handlers.
 */

/* Phase 212 — when a relief option is the active Water Topology
 * pick, waterLook is auto-canonicalized to 'plain'. The Plain pill
 * therefore still carries `.active` / `aria-pressed="true"` for
 * internal state fidelity, but the 6-card grid must read as
 * mutually exclusive — suppress the water-look check badge and the
 * selected border/shadow while `.p210-topology-dim` is present so
 * only the active relief card shows as selected. Clicks still work
 * through `_p212ApplyWaterTopologyChoice` because pointer-events
 * stay enabled. */
html[data-p212="v1"] #waterLookPills .water-look-pill[data-water-look].p210-topology-dim .mtle-style-card-check {
  display: none !important;
}
html[data-p212="v1"] #waterLookPills .water-look-pill[data-water-look].p210-topology-dim.active,
html[data-p212="v1"] #waterLookPills .water-look-pill[data-water-look].p210-topology-dim[aria-pressed="true"] {
  border-color: var(--p210-card-border) !important;
  box-shadow: var(--p210-card-shadow) !important;
}
html[data-p212="v1"] #waterLookPills .water-look-pill[data-water-look].p210-topology-dim.active .mtle-style-card-body,
html[data-p212="v1"] #waterLookPills .water-look-pill[data-water-look].p210-topology-dim[aria-pressed="true"] .mtle-style-card-body {
  background: linear-gradient(180deg, var(--p210-card-body-bg), #0e1321) !important;
}