/* ============================================================
   Kai client dashboard — System Health (SH1)

   Client-owned styles, scoped to .sh-* so the shared foundation is
   untouched. Deliberately no status dot and no pill badges: state is a
   short uppercase word and a left rule, matching the Requests page.
   ============================================================ */

.sh-banner{
  margin:0 0 20px; padding:14px 18px;
  border-left:3px solid var(--cobalt);
  background:var(--surface); border-radius:0 10px 10px 0;
  font-size:15.5px; color:var(--ink); max-width:74ch;
}
.sh-banner.ok{   border-left-color:var(--ok, #047857) }
.sh-banner.warn{ border-left-color:var(--warn, #B45309) }
.sh-banner.bad{  border-left-color:var(--bad, #B91C1C); font-weight:600 }

.sh-card{ padding:20px 22px; margin:0 0 16px }
.sh-card-head{
  display:flex; gap:14px; align-items:baseline; justify-content:space-between;
  flex-wrap:wrap; margin:0 0 10px;
}
.sh-card-head h2{
  margin:0; font-size:17px; font-weight:660; color:var(--navy); letter-spacing:-.005em;
}
.sh-state{
  font-size:11px; font-weight:680; letter-spacing:.055em; text-transform:uppercase;
  white-space:nowrap; flex:none;
}
.sh-state.ok{   color:var(--ok, #047857) }
.sh-state.warn{ color:var(--warn, #B45309) }
.sh-state.bad{  color:var(--bad, #B91C1C) }

.sh-p{ margin:0 0 8px; font-size:14.5px; color:var(--ink-soft); max-width:70ch; line-height:1.55 }
.sh-p:last-of-type{ margin-bottom:0 }
.sh-rel{ color:var(--ink-faint); font-size:12.5px }

/* The "not connected since" line. Not .kv: that is a drawer grid and renders
   with no gap between label and value when used inline in a card. */
.sh-since{
  display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline;
  margin-top:12px; padding-top:12px; border-top:1px solid var(--line-soft);
  font-size:14px;
}
.sh-since-k{ color:var(--ink-faint) }
.sh-since-v{ color:var(--ink); font-weight:600 }

.sh-fresh{ display:flex; flex-direction:column; gap:0; margin-top:4px }
.sh-fresh-row{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:baseline;
  padding:11px 0; border-bottom:1px solid var(--line-soft);
}
.sh-fresh-row:last-child{ border-bottom:none }
.sh-fresh-main{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.sh-fresh-label{ font-size:14.5px; font-weight:600; color:var(--ink) }
.sh-fresh-hint{ font-size:12.5px; color:var(--ink-faint) }
.sh-fresh-when{
  display:flex; flex-direction:column; gap:1px; align-items:flex-end;
  text-align:right; font-size:13.5px; color:var(--ink-soft); white-space:nowrap;
}

@media (max-width:520px){
  .sh-card{ padding:16px 15px }
  .sh-fresh-row{ grid-template-columns:minmax(0,1fr); gap:4px }
  .sh-fresh-when{ align-items:flex-start; text-align:left }
}

/* ---- Connection history (SH2) ------------------------------------------ */
.sh-hist{ display:flex; flex-direction:column; margin-top:4px }
.sh-hist-row{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:baseline;
  padding:11px 0; border-bottom:1px solid var(--line-soft);
}
.sh-hist-row:last-child{ border-bottom:none }
.sh-hist-row.active .sh-hist-title{ font-weight:660; color:var(--ink) }
.sh-hist-main{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.sh-hist-title{ font-size:14.5px; color:var(--ink) }
.sh-hist-sub{ font-size:12.5px; color:var(--ink-faint) }
.sh-hist-when{
  display:flex; flex-direction:column; gap:1px; align-items:flex-end;
  text-align:right; white-space:nowrap;
}
.sh-hist-state{ font-size:11px; font-weight:680; letter-spacing:.05em; text-transform:uppercase }
.sh-hist-state.ok{  color:var(--ok, #047857) }
.sh-hist-state.bad{ color:var(--bad, #B91C1C) }

@media (max-width:520px){
  .sh-hist-row{ grid-template-columns:minmax(0,1fr); gap:4px }
  .sh-hist-when{ align-items:flex-start; text-align:left }
}