/* ======================================================================
   HEALTH REPORT · namespace .hr-*

   The section after Ask, Detect and Explain. Those three are a reader
   asking a question; this one says the same answer is also sitting there
   as a document, without anybody having to ask.

   The panel is the platform demo shell — .pd / .pd__frame / .pd__app /
   .pd-app__side / .pd-app__topbar / .pd-app__body / .pd-app__status are
   all from demo-system.css and unchanged. Only the report body is new,
   and it reads the .pd token set so it belongs to the same screen.

   ONLY THE ANOMALIES ARE LISTED. Five values were measured and three
   were fine, and a row that says a thing is normal is a row the reader
   has to read in order to learn nothing. The count in the heading
   carries the other three, so nothing is hidden.

   The learned range stays on the anomalies that ARE listed: 41.0 ms is
   not a finding on its own, 41.0 ms against a normal of 9.6-12.4 ms is.

   Mockup: dev/rca-health-report.html
   ====================================================================== */

/* Text left, view right. Centred on each other rather than top-aligned:
   the copy is four lines and the panel is a screen, and a short column
   pinned to the top of a tall one reads as something that fell off. */
.hr-two {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(24px, 3.5vw, 48px);
  align-items: center;
}
@media (max-width: 960px) { .hr-two { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* ---------- 1 · METADATA ----------------------------------------------
   Four pairs, two columns, no sub-notes: each value carries its own
   qualifier inline. A learned range whose provenance is off screen is a
   number the reader has to take on trust, so all of this comes first. */
.hr-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px 22px;
  padding: 14px 16px;
  border: 1px solid var(--pd-line);
  border-radius: 8px;
  background: var(--pd-raised);
}
.hr-meta__k {
  margin: 0 0 3px;
  font-family: var(--pd-mono); font-size: .56rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--pd-text-dim);
}
.hr-meta__v { margin: 0; font-size: .8rem; line-height: 1.35; color: var(--pd-text); }
.hr-meta__v b { font-weight: 600; }
.hr-meta__v em { font-style: normal; font-weight: 600; color: var(--pd-data); }
.hr-meta__v span { color: var(--pd-text-dim); }
.hr-meta__fn { grid-column: 1 / -1; }
.hr-meta__fn-list { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.hr-meta__fn-list li {
  padding: 2px 9px;
  border: 1px solid var(--pd-line-strong); border-radius: 999px;
  font-size: .7rem; color: var(--pd-text-soft);
}

/* ---------- 2 · SECTION HEADING --------------------------------------- */
.hr-head {
  display: flex; flex-wrap: wrap; gap: 3px 14px; align-items: baseline;
  margin: 18px 0 0; padding-bottom: 9px;
  border-bottom: 1px solid var(--pd-line-strong);
}
.hr-head__t { margin: 0; font-size: .95rem; font-weight: 700; letter-spacing: -.01em; color: var(--pd-text); }
.hr-head__n { margin: 0 0 0 auto; font-family: var(--pd-mono); font-size: .64rem; color: var(--pd-text-dim); }
.hr-head__n b { color: var(--pd-action); font-weight: 600; }

/* ---------- 3 · GROUPS AND ROWS ---------------------------------------
   Two lines a row, not three: the learned range sits on the track's own
   line, right-aligned, which is where it belonged anyway. */
.hr-group { margin: 14px 0 1px; font-size: .74rem; font-weight: 600; color: var(--pd-data); }
.hr-group:first-of-type { margin-top: 12px; }

.hr-row { padding: 8px 0; border-top: 1px solid var(--pd-line); }
.hr-row__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px; }
.hr-row__name { margin: 0; font-size: .82rem; color: var(--pd-text); min-width: 0; }
.hr-row__val {
  margin: 0 0 0 auto; font-family: var(--pd-mono); font-size: .78rem;
  font-weight: 600; color: var(--pd-text-soft); white-space: nowrap;
}
.hr-row.is-out .hr-row__val { color: var(--pd-action); }
.hr-row__flag {
  padding: 1px 7px; border: 1px solid rgba(239, 131, 84, .45); border-radius: 999px;
  font-family: var(--pd-mono); font-size: .54rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--pd-action);
}

.hr-line { display: flex; align-items: center; gap: 12px; margin-top: 7px; }
.hr-track {
  position: relative; flex: 1 1 auto; height: 6px;
  border-radius: 999px; background: rgba(141, 153, 174, .16);
}
.hr-track__band {
  position: absolute; top: 0; bottom: 0; left: var(--lo); width: calc(var(--hi) - var(--lo));
  border-radius: 999px; background: var(--pd-data); opacity: .5;
}
.hr-track__dot {
  position: absolute; top: 50%; left: var(--v); width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--pd-data);
}
.hr-row.is-out .hr-track__dot {
  background: var(--pd-action); box-shadow: 0 0 0 3px rgba(239, 131, 84, .2);
}
.hr-norm {
  flex: none; margin: 0;
  font-family: var(--pd-mono); font-size: .62rem; color: var(--pd-text-dim); white-space: nowrap;
}
/* Below this the range cannot share a line with the track without one of
   them becoming unreadable, so it takes its own. */
@media (max-width: 460px) {
  .hr-line { flex-wrap: wrap; }
  .hr-track { flex-basis: 100%; }
  .hr-norm { margin-top: 5px; }
}

.hr-app .pd-app__body { overflow: visible; padding: 16px 18px 18px; }
.hr-app .pd__app { min-height: 0; }
.hr-app .pd__frame { padding: clamp(12px, 1.6vw, 20px); }