/* =========================================================================
   BUSINESS HEALTH
   =========================================================================
   Extracted from index.html. Every colour is one of the four status tokens
   defined in the main stylesheet (--ok / --warn / --bad / --idle), so this
   reads the same as every other health surface in the app and inherits all
   six themes for free.
   ========================================================================= */

.bh-card { cursor: pointer; }
.bh-more { font-size: 11px; color: var(--text-muted); }
.bh-card:hover .bh-more { color: var(--gold); }

/* ---- the score ring ---------------------------------------------------- */
.bh-score {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  width: 88px; height: 88px; flex: 0 0 88px;
}
.bh-score.big { width: 130px; height: 130px; flex: 0 0 130px; }
.bh-ring { position: absolute; inset: 0; }
.bh-score b {
  font-family: 'JetBrains Mono', monospace; font-size: 25px; font-weight: 700;
  line-height: 1; color: var(--text); z-index: 1;
}
.bh-score.big b { font-size: 37px; }
.bh-score span {
  font-size: 8.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted); z-index: 1; white-space: nowrap;
}
.bh-score.big span { font-size: 10px; }
.bh-score.ok b { color: var(--ok); }
.bh-score.warn b { color: var(--warn); }
.bh-score.bad b { color: var(--bad); }
.bh-score.idle b { color: var(--idle); }

/* ---- the dashboard card: a glance, never a report ---------------------- */
.bh-top { display: flex; align-items: center; gap: var(--sp-5); }
.bh-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.bh-thin { margin: 0; font-size: 12px; color: var(--text-muted); line-height: 1.55; }
.bh-alert {
  font-size: 12.5px; color: var(--text); line-height: 1.5;
  border-left: 2px solid var(--warn); padding-left: 10px;
}

/* ---- bars -------------------------------------------------------------- */
.bh-row { display: flex; align-items: center; gap: var(--sp-3); }
.bh-lbl { flex: 0 0 118px; font-size: 12px; color: var(--text-muted); }
.bh-bar {
  flex: 1; min-width: 60px; height: 6px; border-radius: var(--r-pill);
  background: var(--surface-2); overflow: hidden;
}
.bh-bar i { display: block; height: 100%; border-radius: var(--r-pill); transition: width .5s ease; }
.bh-bar i.ok { background: var(--ok); }
.bh-bar i.warn { background: var(--warn); }
.bh-bar i.bad { background: var(--bad); }
.bh-pct {
  flex: 0 0 34px; text-align: right; font-family: 'JetBrains Mono', monospace;
  font-size: 12px; color: var(--text);
}
.bh-na {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--idle); border: 1px dashed var(--border);
  border-radius: var(--r-pill); padding: 2px 9px;
}

/* ---- detail screen ----------------------------------------------------- */
.bh-hero { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; }
.bh-hero-note { flex: 1; min-width: 220px; }
.bh-hero-note b { display: block; font-size: 14px; color: var(--text); margin-bottom: 5px; }
.bh-hero-note p { margin: 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }

/* Recommendations. A dot, a sentence a person can act on, and the screen it
   belongs to -- not a bar. */
.bh-rec {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 11px 0; border-bottom: 1px solid var(--border);
}
.bh-rec:last-child { border-bottom: none; }
.bh-rec-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; background: var(--idle); }
.bh-rec-dot.warn { background: var(--warn); }
.bh-rec-dot.bad { background: var(--bad); }
.bh-rec-dot.ok { background: var(--ok); }
.bh-rec-txt { flex: 1; font-size: 13.5px; color: var(--text); line-height: 1.45; }

.bh-item { padding: 14px 0; border-bottom: 1px solid var(--border); }
.bh-item:last-child { border-bottom: none; }
.bh-item.na { opacity: .72; }
.bh-item-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.bh-item-head b { font-size: 13.5px; color: var(--text); }
.bh-weight {
  font-size: 10px; font-weight: 700; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: var(--r-pill); padding: 1px 7px;
}
.bh-item-sub { margin-top: 5px; font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.bh-item-formula { margin-top: 7px; display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: baseline; }
.bh-item-formula code {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 3px 7px;
}
.bh-item-formula span { font-size: 10.5px; color: var(--text-muted); }

@media (max-width: 859.98px) {
  .bh-lbl { flex: 0 0 96px; }
  .bh-item-formula code { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) { .bh-bar i { transition: none; } }

/* ---- trend + the collapsed maths --------------------------------------- */
/* A trend is context, not a headline: it rides on the same line as the note
   and never competes with the number it qualifies. */
.bh-trend { font-size: 11px; font-weight: 600; white-space: nowrap; }
.bh-trend.up { color: var(--ok); }
.bh-trend.down { color: var(--bad); }
.bh-trend.flat { color: var(--text-muted); }

.bh-how summary h3 { display: inline; }
.bh-how-body { padding-top: var(--sp-2); }
.bh-how-body > p {
  margin: 0 0 var(--sp-4); font-size: 12.5px; color: var(--text-muted); line-height: 1.65;
}
.bh-how-h {
  margin: var(--sp-5) 0 var(--sp-2) !important; font-size: 12px !important;
  font-weight: 700 !important; color: var(--text) !important; text-transform: uppercase;
  letter-spacing: .08em;
}
.bh-math { padding: 11px 0; border-top: 1px solid var(--border); }
.bh-math-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 6px; }
.bh-math-head b { font-size: 12.5px; color: var(--text); }
.bh-math code {
  display: block; font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 6px 8px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
}
.bh-math-src { display: block; margin-top: 4px; font-size: 10.5px; color: var(--text-muted); }
.bh-sevs { display: flex; flex-direction: column; gap: var(--sp-2); }
.bh-sev { display: flex; align-items: center; gap: var(--sp-3); font-size: 12px; }
.bh-sev b { color: var(--text); flex: 0 0 74px; }
.bh-sev span:last-child { color: var(--text-muted); }