/**
 * Clinical Intelligence UI — clinical_intelligence.css
 * ======================================================
 * Sprint 6C: Sister Aastha AI Companion — Clinical Intelligence Components
 *
 * Components:
 *   1. SymptomDetectionCard   (.clinical-card)
 *   2. FollowUpEngine         (.clinical-question-card)
 *   3. TriagePanel            (.clinical-triage-panel)
 *   4. RedFlagBanner          (.clinical-red-flag)
 *   5. DepartmentCard         (.clinical-dept-card)
 *   6. DoctorCard             (.clinical-doctor-card)
 *   7. DebugPanel             (.clinical-debug)
 *
 * Design tokens are inherited from companion.css (:root).
 * Bootstrap 4/5 compatible — no overrides to Bootstrap base classes.
 * All components start hidden; JS controls visibility via [hidden] attribute.
 * Mobile-first responsive.
 */

/* ════════════════════════════════════════════════════════════════════════
   LOCAL TOKENS (clinical-specific)
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --ci-radius:          0.875rem;
  --ci-radius-sm:       0.5rem;
  --ci-radius-pill:     9999px;
  --ci-shadow:          0 2px 10px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.05);
  --ci-shadow-elevated: 0 6px 24px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);

  --ci-chip-bg:         #F0F9F8;
  --ci-chip-border:     rgba(15, 157, 148, 0.25);
  --ci-chip-text:       #065f5a;

  --ci-red-bg:          #FEF2F2;
  --ci-red-border:      #FECACA;
  --ci-red-text:        #991B1B;
  --ci-red-icon-bg:     #FEE2E2;

  --ci-debug-bg:        #0F172A;
  --ci-debug-surface:   #1E293B;
  --ci-debug-border:    #334155;
  --ci-debug-text:      #E2E8F0;
  --ci-debug-muted:     #94A3B8;
  --ci-debug-font:      'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;

  --ci-transition:      0.2s ease;
  --ci-transition-fast: 0.12s ease;
}

/* ════════════════════════════════════════════════════════════════════════
   VISIBILITY UTILITY
   All clinical components use the native [hidden] attribute.
   This rule ensures display:none takes effect even when other rules
   attempt to override it.
   ════════════════════════════════════════════════════════════════════════ */
[hidden] {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   1. SYMPTOM DETECTION CARD  (.clinical-card)
   ════════════════════════════════════════════════════════════════════════ */
.clinical-card {
  background:    #FFFFFF;
  border:        1.5px solid var(--c-border, #E8EEF4);
  border-radius: var(--ci-radius);
  padding:       1.1rem 1.25rem;
  margin-top:    0.875rem;
  box-shadow:    var(--ci-shadow);
  animation:     ci-fade-in 0.22s ease both;
}

.clinical-card__header {
  font-size:      0.8rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color:          var(--c-primary, #0F9D94);
  margin-bottom:  0.75rem;
  display:        flex;
  align-items:    center;
  gap:            0.4rem;
}

.clinical-card__header::before {
  content:         '';
  display:         inline-block;
  width:           8px;
  height:          8px;
  border-radius:   50%;
  background:      var(--c-primary, #0F9D94);
  animation:       ci-pulse-dot 2s ease-in-out infinite;
  flex-shrink:     0;
}

/* ── Chip Container ────────────────────────────────────────────────────── */
.clinical-chips {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.5rem;
}

/* ── Individual Symptom Chip ───────────────────────────────────────────── */
.clinical-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           0.35rem;
  background:    var(--ci-chip-bg);
  border:        1.5px solid var(--ci-chip-border);
  border-radius: var(--ci-radius-pill);
  padding:       0.35rem 0.75rem 0.35rem 0.5rem;
  font-size:     0.83rem;
  font-weight:   600;
  color:         var(--ci-chip-text);
  transition:    background var(--ci-transition-fast), transform var(--ci-transition-fast);
  cursor:        default;
  user-select:   none;
}

.clinical-chip:hover {
  background:  rgba(15, 157, 148, 0.12);
  transform:   translateY(-1px);
}

.clinical-chip__check {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           18px;
  height:          18px;
  border-radius:   50%;
  background:      var(--c-primary, #0F9D94);
  color:           #FFFFFF;
  font-size:       0.65rem;
  font-weight:     900;
  flex-shrink:     0;
  line-height:     1;
}

.clinical-chip__name {
  font-weight: 700;
  color:       var(--ci-chip-text);
}

.clinical-chip__sub {
  font-size:  0.73rem;
  font-weight: 500;
  color:       var(--c-muted, #64748B);
  white-space: nowrap;
}

/* ── Empty / Error States ─────────────────────────────────────────────── */
.clinical-empty {
  font-size:   0.85rem;
  color:       var(--c-muted, #64748B);
  font-style:  italic;
  padding:     0.5rem 0;
  text-align:  center;
}

.clinical-error {
  display:       flex;
  align-items:   center;
  gap:           0.5rem;
  background:    #FFFBEB;
  border:        1px solid #FDE68A;
  border-radius: var(--ci-radius-sm);
  padding:       0.6rem 0.875rem;
  font-size:     0.83rem;
  color:         #92400E;
  font-weight:   500;
}

.clinical-error::before {
  content:     '⚠';
  font-size:   1rem;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   2. FOLLOW-UP ENGINE  (.clinical-question-card)
   ════════════════════════════════════════════════════════════════════════ */
.clinical-question-card {
  background:    #FFFFFF;
  border:        1.5px solid var(--c-border, #E8EEF4);
  border-radius: var(--ci-radius);
  padding:       1.1rem 1.25rem;
  margin-top:    0.75rem;
  box-shadow:    var(--ci-shadow);
  animation:     ci-slide-up 0.2s ease both;
  position:      relative;
}

.clinical-question-card[data-required="1"] {
  border-left: 3px solid var(--c-warning, #F59E0B);
}

.clinical-question__text {
  font-size:   0.95rem;
  font-weight: 700;
  color:       var(--c-text, #0F172A);
  line-height: 1.45;
  margin-bottom: 0.875rem;
}

.clinical-question__options {
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
}

/* ── Option Chips (single-select chip group) ──────────────────────────── */
.clinical-option-chips {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.5rem;
}

.clinical-option-chips .clinical-chip {
  cursor:     pointer;
  transition: all var(--ci-transition);
}

.clinical-option-chips .clinical-chip:hover {
  background:   rgba(15, 157, 148, 0.15);
  border-color: var(--c-primary, #0F9D94);
  transform:    translateY(-1px);
}

.clinical-option-chips .clinical-chip.selected,
.clinical-option-chips .clinical-chip[aria-selected="true"],
#clinical-followup-engine .clinical-chip.selected,
#clinical-followup-engine .clinical-chip[aria-selected="true"] {
  background:   var(--c-primary, #0F9D94) !important;
  border-color: var(--c-primary, #0F9D94) !important;
  color:        #FFFFFF !important;
}

.clinical-option-chips .clinical-chip.selected .clinical-chip__name,
.clinical-option-chips .clinical-chip[aria-selected="true"] .clinical-chip__name,
#clinical-followup-engine .clinical-chip.selected .clinical-chip__name,
#clinical-followup-engine .clinical-chip[aria-selected="true"] .clinical-chip__name {
  color: #FFFFFF !important;
}

.clinical-option-chips .clinical-chip.selected .clinical-chip__sub,
.clinical-option-chips .clinical-chip[aria-selected="true"] .clinical-chip__sub,
#clinical-followup-engine .clinical-chip.selected .clinical-chip__sub,
#clinical-followup-engine .clinical-chip[aria-selected="true"] .clinical-chip__sub {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* ── Required Indicator ────────────────────────────────────────────────── */
.clinical-required-indicator {
  font-size:   0.75rem;
  font-weight: 600;
  color:       var(--c-warning, #F59E0B);
  margin-top:  0.5rem;
  display:     flex;
  align-items: center;
  gap:         0.3rem;
}

.clinical-required-indicator::before {
  content: '* ';
  font-weight: 900;
}

/* ════════════════════════════════════════════════════════════════════════
   3. TRIAGE PANEL  (.clinical-triage-panel)
   The border-left color is set dynamically inline via JS (color_hex from DB).
   ════════════════════════════════════════════════════════════════════════ */
.clinical-triage-panel {
  background:    #FFFFFF;
  border:        1.5px solid var(--c-border, #E8EEF4);
  border-left:   4px solid var(--c-primary, #0F9D94); /* overridden by JS */
  border-radius: var(--ci-radius);
  padding:       1.1rem 1.25rem;
  margin-top:    0.875rem;
  box-shadow:    var(--ci-shadow);
  animation:     ci-fade-in 0.25s ease both;
}

.clinical-triage__header {
  display:     flex;
  align-items: center;
  gap:         0.6rem;
  margin-bottom: 0.75rem;
}

.clinical-triage__emoji {
  font-size:   1.75rem;
  line-height: 1;
  flex-shrink: 0;
}

.clinical-triage__name {
  font-size:   1.05rem;
  font-weight: 800;
  color:       var(--c-text, #0F172A);
  flex:        1;
  line-height: 1.2;
}

.clinical-triage__score {
  font-size:      1.4rem;
  font-weight:    900;
  color:          var(--c-primary, #0F9D94);
  letter-spacing: -0.5px;
  background:     var(--c-primary-light, rgba(15,157,148,0.10));
  padding:        0.2rem 0.6rem;
  border-radius:  var(--ci-radius-sm);
  min-width:      3rem;
  text-align:     center;
}

.clinical-triage__urgency {
  font-size:   0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color:       var(--c-muted, #64748B);
  margin-bottom: 0.25rem;
}

.clinical-triage__sla {
  font-size:   0.83rem;
  font-weight: 600;
  color:       var(--c-text, #0F172A);
  margin-bottom: 0.5rem;
}

.clinical-triage__message {
  font-size:     0.88rem;
  color:         var(--c-text-2, #1E293B);
  line-height:   1.55;
  padding:       0.65rem 0.875rem;
  background:    var(--c-surface-2, #F8FAFC);
  border-radius: var(--ci-radius-sm);
  border-left:   3px solid var(--c-primary, #0F9D94);
}

/* ════════════════════════════════════════════════════════════════════════
   4. RED FLAG BANNER  (.clinical-red-flag)
   Highly visible — red/orange, large padding, bold text.
   Prepended to #step1 content to appear above all other components.
   ════════════════════════════════════════════════════════════════════════ */
.clinical-red-flag {
  background:    linear-gradient(135deg, #FEF2F2 0%, #FFF1F0 100%);
  border:        2px solid #FCA5A5;
  border-left:   6px solid #DC2626;
  border-radius: var(--ci-radius);
  padding:       1.35rem 1.25rem;
  margin-bottom: 1rem;
  box-shadow:    0 4px 20px rgba(220, 38, 38, 0.15), 0 1px 4px rgba(220, 38, 38, 0.1);
  animation:     ci-red-flag-enter 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  position:      relative;
  overflow:      hidden;
}

/* Subtle pulse ring effect on the left border */
.clinical-red-flag::before {
  content:    '';
  position:   absolute;
  left:       0;
  top:        0;
  bottom:     0;
  width:      6px;
  background: linear-gradient(180deg, #DC2626 0%, #EF4444 50%, #DC2626 100%);
  animation:  ci-red-pulse 2s ease-in-out infinite;
}

.clinical-red-flag__icon {
  font-size:     2rem;
  text-align:    center;
  margin-bottom: 0.5rem;
  animation:     ci-shake 0.5s ease 0.3s;
}

.clinical-red-flag__heading {
  font-size:   1.05rem;
  font-weight: 800;
  color:       #991B1B;
  margin-bottom: 0.4rem;
  line-height: 1.3;
}

.clinical-red-flag__body {
  font-size:   0.9rem;
  font-weight: 600;
  color:       #7F1D1D;
  line-height: 1.5;
  margin-bottom: 0.6rem;
}

.clinical-red-flag__pathway-msg {
  font-size:     0.85rem;
  color:         #991B1B;
  background:    rgba(220, 38, 38, 0.08);
  border-radius: var(--ci-radius-sm);
  padding:       0.5rem 0.75rem;
  font-weight:   600;
  line-height:   1.45;
  margin-bottom: 1rem;
}

/* Emergency button lives inside red-flag — ensure it fills full width on mobile */
.clinical-red-flag .btn-danger {
  width:      100%;
  font-size:  1rem;
  font-weight: 800;
  min-height: 52px;
  border-radius: var(--ci-radius-sm);
  letter-spacing: 0.2px;
}

/* ════════════════════════════════════════════════════════════════════════
   5. DEPARTMENT CARD  (.clinical-dept-card)
   ════════════════════════════════════════════════════════════════════════ */
.clinical-dept-card {
  background:    #FFFFFF;
  border:        1.5px solid var(--c-border, #E8EEF4);
  border-radius: var(--ci-radius);
  padding:       1.25rem;
  box-shadow:    var(--ci-shadow-elevated);
  animation:     ci-slide-up 0.22s ease both;
}

.clinical-dept-card__header {
  display:       flex;
  align-items:   flex-start;
  gap:           0.6rem;
  margin-bottom: 1rem;
  flex-wrap:     wrap;
}

.clinical-dept-card__name {
  font-size:   1.15rem;
  font-weight: 800;
  color:       var(--c-text, #0F172A);
  flex:        1;
  min-width:   0;
  line-height: 1.25;
}

.clinical-dept-card__confidence {
  margin-bottom: 0.875rem;
}

.clinical-dept-card__confidence > span {
  font-size:   0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color:       var(--c-muted, #64748B);
  display:     block;
  margin-bottom: 0.35rem;
}

.clinical-dept-card__confidence .progress {
  height:        10px;
  border-radius: var(--ci-radius-pill);
  background:    var(--c-border, #E8EEF4);
  overflow:      hidden;
}

.clinical-dept-card__confidence .progress-bar {
  background:    linear-gradient(90deg, var(--c-primary, #0F9D94) 0%, #0D8A82 100%);
  border-radius: var(--ci-radius-pill);
  font-size:     0.7rem;
  font-weight:   700;
  line-height:   10px;
  color:         #fff;
  transition:    width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  min-width:     2.5rem;
  text-align:    center;
}

.clinical-dept-card__category {
  font-size:     0.82rem;
  font-weight:   600;
  color:         var(--c-muted, #64748B);
  margin-bottom: 0.75rem;
  display:       flex;
  align-items:   center;
  gap:           0.35rem;
}

.clinical-dept-card__category::before {
  content:       '🏷';
  font-size:     0.9rem;
}

.clinical-dept-card__drivers {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.4rem;
}

/* ════════════════════════════════════════════════════════════════════════
   6. DOCTOR CARD  (.clinical-doctor-card)
   ════════════════════════════════════════════════════════════════════════ */
.clinical-doctor-card {
  background:    #FFFFFF;
  border:        1.5px solid var(--c-border, #E8EEF4);
  border-radius: var(--ci-radius);
  padding:       1.25rem;
  margin-top:    0.875rem;
  box-shadow:    var(--ci-shadow-elevated);
  animation:     ci-slide-up 0.24s ease both;
}

.clinical-doctor-card__name {
  font-size:   1.05rem;
  font-weight: 800;
  color:       var(--c-text, #0F172A);
  margin-bottom: 0.2rem;
  line-height:   1.25;
}

.clinical-doctor-card__dept {
  font-size:   0.83rem;
  font-weight: 600;
  color:       var(--c-primary, #0F9D94);
  margin-bottom: 0.15rem;
}

.clinical-doctor-card__spec {
  font-size:   0.8rem;
  color:       var(--c-muted, #64748B);
  font-weight: 500;
  margin-bottom: 0.75rem;
}

.clinical-doctor-card__availability {
  display:       flex;
  align-items:   center;
  gap:           0.4rem;
  font-size:     0.82rem;
  font-weight:   600;
  color:         var(--c-success, #22C55E);
  margin-bottom: 0.4rem;
  background:    rgba(34, 197, 94, 0.08);
  border-radius: var(--ci-radius-sm);
  padding:       0.35rem 0.6rem;
  display:       inline-flex;
}

.clinical-doctor-card__next-slot {
  font-size:   0.83rem;
  color:       var(--c-muted, #64748B);
  font-weight: 500;
  margin-bottom: 0.35rem;
}

.clinical-doctor-card__fee {
  font-size:   1.05rem;
  font-weight: 800;
  color:       var(--c-text, #0F172A);
  margin-bottom: 1rem;
  letter-spacing: -0.3px;
}

.clinical-doctor-card .btn-primary {
  width:        100%;
  min-height:   48px;
  font-size:    0.95rem;
  font-weight:  700;
  border-radius: var(--ci-radius-sm);
}

/* ════════════════════════════════════════════════════════════════════════
   7. DEBUG PANEL  (.clinical-debug)
   Dark monospace theme — developer-facing.
   Only added to DOM when debug mode is active.
   ════════════════════════════════════════════════════════════════════════ */
.clinical-debug {
  background:    var(--ci-debug-bg);
  border:        1px solid var(--ci-debug-border);
  border-radius: var(--ci-radius);
  margin-top:    1.25rem;
  overflow:      hidden;
  font-family:   var(--ci-debug-font);
  font-size:     0.78rem;
  color:         var(--ci-debug-text);
  box-shadow:    0 4px 20px rgba(0, 0, 0, 0.3);
}

.clinical-debug__toggle {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  padding:     0.65rem 1rem;
  background:  var(--ci-debug-surface);
  color:       var(--ci-debug-text);
  font-family: var(--ci-debug-font);
  font-size:   0.78rem;
  font-weight: 600;
  cursor:      pointer;
  user-select: none;
  border-bottom: 1px solid var(--ci-debug-border);
  transition:  background var(--ci-transition-fast);
}

.clinical-debug__toggle:hover {
  background: #2D3B50;
}

.clinical-debug__toggle code {
  background:    rgba(255, 255, 255, 0.08);
  padding:       0.1rem 0.45rem;
  border-radius: 3px;
  font-size:     0.75rem;
  color:         #7DD3FC; /* sky-300 — session ID highlight */
  letter-spacing: 0.3px;
}

/* Collapse chevron indicator */
.clinical-debug__toggle::after {
  content:     '▼';
  margin-left: auto;
  font-size:   0.65rem;
  color:       var(--ci-debug-muted);
  transition:  transform var(--ci-transition);
}

.clinical-debug.collapsed .clinical-debug__toggle::after {
  transform: rotate(-90deg);
}

/* ── Body (hidden when .collapsed) ────────────────────────────────────── */
.clinical-debug__body {
  padding:     0.875rem 1rem;
  display:     flex;
  flex-direction: column;
  gap:         0.6rem;
  max-height:  420px;
  overflow-y:  auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ci-debug-border) transparent;
}

.clinical-debug.collapsed .clinical-debug__body {
  display: none;
}

/* Scrollbar (WebKit) */
.clinical-debug__body::-webkit-scrollbar {
  width: 5px;
}
.clinical-debug__body::-webkit-scrollbar-track {
  background: transparent;
}
.clinical-debug__body::-webkit-scrollbar-thumb {
  background:    var(--ci-debug-border);
  border-radius: 3px;
}

/* Debug section headings (data-debug-section attribute) */
.clinical-debug__body [data-debug-section] {
  background:    var(--ci-debug-surface);
  border:        1px solid var(--ci-debug-border);
  border-radius: 4px;
  padding:       0.5rem 0.75rem;
  color:         var(--ci-debug-text);
  white-space:   pre-wrap;
  word-break:    break-word;
  line-height:   1.6;
}

.clinical-debug__body [data-debug-section]::before {
  content:        attr(data-debug-section) ': ';
  color:          #A78BFA; /* violet-400 */
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  display:        block;
  font-size:      0.7rem;
  margin-bottom:  0.2rem;
}

.clinical-debug__error {
  background:    rgba(239, 68, 68, 0.12);
  border:        1px solid rgba(239, 68, 68, 0.3);
  border-radius: 4px;
  padding:       0.5rem 0.75rem;
  color:         #FCA5A5; /* red-300 */
  white-space:   pre-wrap;
  word-break:    break-all;
  line-height:   1.55;
}

/* Debug action buttons */
.clinical-debug__body button {
  background:    var(--ci-debug-surface);
  border:        1px solid var(--ci-debug-border);
  border-radius: 4px;
  color:         var(--ci-debug-text);
  font-family:   var(--ci-debug-font);
  font-size:     0.75rem;
  font-weight:   600;
  padding:       0.4rem 0.75rem;
  cursor:        pointer;
  transition:    background var(--ci-transition-fast);
  align-self:    flex-start;
}

.clinical-debug__body button:hover {
  background: #2D3B50;
  border-color: #475569;
}

.clinical-debug__body button:active {
  transform: scale(0.96);
}

/* ════════════════════════════════════════════════════════════════════════
   SHARED UTILITIES
   ════════════════════════════════════════════════════════════════════════ */

/* Skeleton loading state for async content */
.clinical-skeleton {
  background:    linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%);
  background-size: 200% 100%;
  animation:     ci-skeleton 1.4s infinite;
  border-radius: var(--ci-radius-sm);
  min-height:    1rem;
}

/* Urgency badge (Step 2, high/critical triage) */
#clinical-urgency-badge {
  display:       inline-flex;
  align-items:   center;
  padding:       0.25rem 0.65rem;
  border-radius: var(--ci-radius-pill);
  font-size:     0.72rem;
  font-weight:   800;
  color:         #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Alternative departments list */
#clinical-dept-alternatives {
  margin-top:    0.75rem;
  border-top:    1px solid var(--c-border, #E8EEF4);
  padding-top:   0.75rem;
}

/* No doctor found state */
#clinical-no-doctor {
  font-size:   0.875rem;
  color:       var(--c-muted, #64748B);
  text-align:  center;
  padding:     1rem 0;
  font-style:  italic;
}

/* ════════════════════════════════════════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════════════════════════════════════════ */
@keyframes ci-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ci-slide-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

@keyframes ci-red-flag-enter {
  from { opacity: 0; transform: scale(0.97) translateY(-4px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

@keyframes ci-pulse-dot {
  0%,  100% { opacity: 1;   transform: scale(1);    }
  50%       { opacity: 0.5; transform: scale(0.75); }
}

@keyframes ci-red-pulse {
  0%,  100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

@keyframes ci-shake {
  0%,  100% { transform: translateX(0);   }
  20%       { transform: translateX(-4px); }
  40%       { transform: translateX(4px);  }
  60%       { transform: translateX(-3px); }
  80%       { transform: translateX(3px);  }
}

@keyframes ci-skeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE FIRST
   ════════════════════════════════════════════════════════════════════════ */

/* Small phones — max 360px */
@media (max-width: 360px) {
  .clinical-card,
  .clinical-question-card,
  .clinical-triage-panel,
  .clinical-red-flag,
  .clinical-dept-card,
  .clinical-doctor-card {
    padding: 0.875rem 1rem;
  }

  .clinical-chip {
    font-size: 0.78rem;
    padding:   0.3rem 0.6rem 0.3rem 0.4rem;
  }

  .clinical-triage__score {
    font-size: 1.2rem;
  }

  .clinical-dept-card__name,
  .clinical-doctor-card__name {
    font-size: 1rem;
  }

  .clinical-red-flag__heading {
    font-size: 0.95rem;
  }
}

/* Tablets and up — 768px+ */
@media (min-width: 768px) {
  .clinical-card,
  .clinical-question-card,
  .clinical-triage-panel,
  .clinical-dept-card,
  .clinical-doctor-card {
    padding: 1.35rem 1.5rem;
  }

  .clinical-chips {
    gap: 0.6rem;
  }

  .clinical-triage__header {
    gap: 0.75rem;
  }

  .clinical-triage__emoji {
    font-size: 2rem;
  }

  .clinical-triage__score {
    font-size: 1.6rem;
    padding:   0.25rem 0.75rem;
  }

  .clinical-dept-card__name {
    font-size: 1.25rem;
  }

  .clinical-doctor-card__name {
    font-size: 1.1rem;
  }

  .clinical-red-flag {
    padding: 1.5rem;
  }

  .clinical-red-flag__icon {
    font-size: 2.5rem;
  }

  .clinical-red-flag__heading {
    font-size: 1.15rem;
  }

  .clinical-red-flag .btn-danger {
    max-width: 360px;
  }

  .clinical-debug__body {
    max-height: 560px;
  }
}

/* Desktops — 1024px+ */
@media (min-width: 1024px) {
  .clinical-dept-card,
  .clinical-doctor-card {
    max-width: 640px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY
   ════════════════════════════════════════════════════════════════════════ */

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .clinical-card,
  .clinical-question-card,
  .clinical-triage-panel,
  .clinical-red-flag,
  .clinical-dept-card,
  .clinical-doctor-card,
  .clinical-chip,
  #clinical-urgency-badge {
    animation: none !important;
    transition: none !important;
  }

  .clinical-card__header::before,
  .clinical-red-flag::before,
  .clinical-red-flag__icon {
    animation: none !important;
  }
}

/* Focus-visible for keyboard navigation */
.clinical-chip:focus-visible,
.clinical-option-chips .clinical-chip:focus-visible,
.clinical-debug__toggle:focus-visible,
.clinical-debug__body button:focus-visible {
  outline:        2px solid var(--c-primary, #0F9D94);
  outline-offset: 2px;
}

/* High-contrast mode support */
@media (forced-colors: active) {
  .clinical-card,
  .clinical-question-card,
  .clinical-triage-panel,
  .clinical-dept-card,
  .clinical-doctor-card {
    border: 2px solid ButtonText;
  }

  .clinical-red-flag {
    border: 3px solid Mark;
    background: Mark;
    color: MarkText;
  }

  .clinical-chip {
    border: 2px solid ButtonText;
  }

  .clinical-debug {
    border: 2px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }
}