/* Winston V3 — global health banner.
 *
 * Three tones (critical / high / info) sharing the same visual frame.
 * Sits between top-bar and content; never inside the screen swap area
 * so it persists across tab changes. Designer C1 + H1 + H2 (2026-05-26).
 */

.health-banner-container {
  /* Empty by default; populated only when a health condition fires.
   * Sits in the document flow above .content so it pushes the screen
   * down rather than overlaying. */
  padding: 0 var(--space-4);
}

.health-banner {
  border: 1px solid;
  border-radius: var(--radius-lg);
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  color: var(--ink);
  font-size: var(--type-sm);
  line-height: var(--leading-snug);
}

/* Tone — critical: red border, used for venv_broken (engines silently
 * failing). Strong call-to-action wording. */
.health-banner--critical {
  background: var(--mode-live-soft, rgba(220, 38, 38, 0.06));
  border-color: var(--mode-live-line, rgba(220, 38, 38, 0.32));
}
.health-banner--critical strong { color: var(--mode-live, #b91c1c); }

/* Tone — high: amber, for broker auth/connectivity issues. Trading
 * blocked but the system itself is healthy. */
.health-banner--high {
  background: rgba(217, 119, 6, 0.08);
  border-color: rgba(217, 119, 6, 0.32);
}
.health-banner--high strong { color: #b45309; }
:root[data-theme="dark"] .health-banner--high { background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.30); }
:root[data-theme="dark"] .health-banner--high strong { color: #fbbf24; }

/* Tone — info: muted blue/gray, for intentional states like paused.
 * Operator sees it as "system status," not "something is wrong." */
.health-banner--info {
  background: rgba(59, 130, 246, 0.06);
  border-color: rgba(59, 130, 246, 0.22);
}
.health-banner--info strong { color: #1d4ed8; }
:root[data-theme="dark"] .health-banner--info { background: rgba(96, 165, 250, 0.10); border-color: rgba(96, 165, 250, 0.28); }
:root[data-theme="dark"] .health-banner--info strong { color: #93c5fd; }

.health-banner-inner {
  display: grid;
  grid-template-columns: 1fr auto auto;
  column-gap: var(--space-3);
  align-items: center;
}

/* #120 CTA — appears in casual-audience banners ("Set it up →" /
 * "Open Settings →") so the user has an in-product next step rather
 * than instructions to edit .env on the server. Inherits banner tone
 * via currentColor; links inherit the strong-tone color from the
 * containing banner. */
.health-banner-action {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.06);
  color: inherit;
  font-weight: 600;
  font-size: var(--type-sm);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid rgba(0, 0, 0, 0.10);
  cursor: pointer;
}
.health-banner-action:hover { background: rgba(0, 0, 0, 0.10); }
:root[data-theme="dark"] .health-banner-action { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.14); }
:root[data-theme="dark"] .health-banner-action:hover { background: rgba(255, 255, 255, 0.14); }

.health-banner-body {
  display: grid;
  row-gap: 2px;
}

.health-banner-body strong { display: block; }
.health-banner-body .muted { color: var(--ink-muted); }

.health-banner-dismiss {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  color: var(--ink-muted);
  font-size: 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  grid-row: 1;
}
.health-banner-dismiss:hover { background: var(--surface-2); color: var(--ink); }

@media (max-width: 480px) {
  .health-banner-container { padding: 0 var(--space-3); }
  .health-banner { padding: var(--space-3); font-size: 13px; }
}

/* #106: compact variant for the casual paused body. Collapses the
   two-line strong+body layout into a single inline run so the banner
   eats <40px instead of ~150px on phone. Operator (power mode on)
   keeps the full body and the original height. */
.health-banner--compact .health-banner-body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  row-gap: 2px;
}
.health-banner--compact .health-banner-body strong { display: inline; }
.health-banner--compact { padding: var(--space-2) var(--space-4); }
@media (max-width: 480px) {
  .health-banner--compact { padding: var(--space-2) var(--space-3); font-size: 12px; }
}