/* HEALTH area. Classes are prefixed health-. Uses tokens from tokens.css only. */

.print-only { display: none; }

.health-page { display: flex; flex-direction: column; gap: var(--space-3, 12px); }
.health-h { font-size: 1.05rem; margin: 0 0 var(--space-2, 8px); }

.health-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); align-items: center; }
.health-toolbar > * { min-height: 44px; }

.health-form { display: flex; flex-direction: column; gap: var(--space-3, 12px); }
.health-form input,
.health-form select,
.health-form textarea { min-height: 44px; max-width: 100%; box-sizing: border-box; }

.health-when { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); }
.health-when > * { flex: 1 1 140px; min-width: 0; }

.health-ref { display: flex; flex-direction: column; gap: var(--space-2, 8px); }
.health-ref .chip,
.health-ref button { min-height: 44px; }

.health-trend { display: flex; align-items: center; gap: var(--space-2, 8px); flex-wrap: wrap; }
.health-spark { display: block; max-width: 100%; height: auto; color: var(--accent, currentColor); }
.health-arrow { font-weight: 700; }

.health-link { min-height: 44px; display: inline-flex; align-items: center; }
.health-decor { margin-top: var(--space-2, 8px); }
.health-blind { display: flex; flex-direction: column; gap: var(--space-3, 12px); }
.health-print { width: 100%; border-collapse: collapse; }
.health-print th,
.health-print td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--border, #ccc); }

@media (max-width: 480px) {
  .health-toolbar { flex-direction: column; align-items: stretch; }
  .health-toolbar > * { width: 100%; }
}

@media print {
  .no-print { display: none !important; }
  .print-only { display: block !important; }
  .health-print { font-size: 12pt; }
}