/* Respiratory-specific visual language. Shared configurable-system UI lives in system_module.css. */

.respiratory-hero {
  background:
    linear-gradient(90deg, rgba(239, 247, 247, 0.97), rgba(246, 241, 235, 0.94)),
    var(--color-surface);
}

.respiratory-atlas-hero {
  padding-block: var(--space-6);
  background: var(--color-surface-soft);
}

.system-visual[data-site="nose_level_2"] .system-focus {
  transform: translate(-45%, -62%);
}

.system-visual[data-site="nose_level_3_nasopharynx"] .system-focus {
  transform: translate(30%, -55%);
}

.system-visual[data-site="larynx"] .system-focus {
  transform: translate(-80%, -5%);
}

.system-visual[data-site="trachea_carina"] .system-focus {
  transform: translate(-20%, 25%);
}

.system-visual[data-site="bronchus_bronchiole"] .system-focus {
  transform: translate(45%, 45%);
}

.system-visual[data-site="centriacinar_region"] .system-focus {
  transform: translate(100%, 90%);
}

.system-visual[data-site="peripheral_alveoli_pleura"] .system-focus {
  transform: translate(145%, 105%);
}