/* Health and tasks of one board (health.js): linked by the RPS portal, inlined into the
   board's page by its build (S30). Uses the Line Level tokens both define: --bg --card
   --raise --line --fg --strong --muted --dim --chip --accent --ok --warn --err, --sans
   --narrow --mono, --r --r2; and each one's .seg (the range buttons), .small .muted .dim
   .mono, and its table styles. */
.hx-verdict { display:flex; gap:16px; align-items:center; padding:18px 20px; border:1px solid var(--line); border-left:3px solid var(--ok); border-radius:var(--r2); background:var(--card); }
.hx-verdict.warn, .hx-verdict.watch { border-left-color:var(--warn); } .hx-verdict.err { border-left-color:var(--err); }
.hx-verdict h2 { margin:0; font-size:20px; line-height:1.25; letter-spacing:-.01em; }
.hx-verdict p { margin:4px 0 0; color:var(--muted); font-size:13px; }
.hx-dot { width:8px; height:8px; border-radius:50%; flex:none; background:var(--ok); }
.hx-verdict > .hx-dot { width:12px; height:12px; }
.hx-dot.warn, .hx-dot.watch { background:var(--warn); } .hx-dot.err { background:var(--err); }
.hx-checks { display:flex; flex-wrap:wrap; gap:6px 18px; padding:12px 4px 4px; }
.hx-check { display:flex; gap:8px; align-items:center; font-size:12.5px; color:var(--muted); max-width:100%; }
.hx-check b { color:var(--fg); font-weight:500; white-space:nowrap; }
.hx-check > span:last-child { display:none; }
.hx-check.warn > span:last-child, .hx-check.watch > span:last-child, .hx-check.err > span:last-child { display:inline; }

/* readouts: label (and a tag when not ok), figure, trend, the range or detail */
.hx-ros { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); margin:16px 0; border:1px solid var(--line); border-radius:var(--r2); background:var(--card); }
.hx-ro { padding:14px 16px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); min-width:0; }
.hx-ro:nth-child(4n) { border-right:0; }
.hx-l { display:flex; justify-content:space-between; gap:8px; font-size:12.5px; color:var(--muted); }
.hx-v { font:600 26px/1.25 var(--narrow); color:var(--strong); font-variant-numeric:tabular-nums; margin:4px 0; }
.hx-v small { font:500 13px var(--sans); color:var(--muted); margin-left:4px; }
.hx-s { font-size:11.5px; color:var(--dim); margin-top:4px; line-height:1.4; }
.hx-tag { font:500 11px/18px var(--sans); padding:0 7px; border-radius:99px; background:color-mix(in srgb, var(--warn) 18%, transparent); color:var(--warn); }
.hx-tag.err { background:color-mix(in srgb, var(--err) 18%, transparent); color:var(--err); }
.hx-spark { display:block; width:100%; height:28px; }
.hx-spark polyline { fill:none; stroke:var(--accent); stroke-width:1.4; vector-effect:non-scaling-stroke; }

/* the large chart */
.hx-card { background:var(--card); border:1px solid var(--line); border-radius:var(--r2); padding:14px 16px 10px; position:relative; }
.hx-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.hx-tabs { display:flex; gap:2px; flex-wrap:wrap; }
.hx-tabs button { height:30px; padding:0 12px; background:transparent; border:0; border-bottom:2px solid transparent; border-radius:0; color:var(--muted); font-weight:500; }
.hx-tabs button:hover { background:transparent; color:var(--fg); }
.hx-tabs button.on { color:var(--strong); border-bottom-color:var(--accent); }
.hx-legend { display:flex; flex-wrap:wrap; gap:16px; font-size:12px; color:var(--muted); margin:10px 0 2px; }
.hx-legend i, .hx-tip i { display:inline-block; width:10px; height:2px; vertical-align:middle; margin-right:6px; }
.hx-plot { position:relative; }
.hx-chart { display:block; width:100%; height:260px; }
.hx-chart text { font:11px var(--mono); fill:var(--dim); }
.hx-grid { stroke:var(--line); stroke-width:1; vector-effect:non-scaling-stroke; }
.hx-band { fill:var(--warn); opacity:.06; }
.hx-line { fill:none; stroke-width:1.6; vector-effect:non-scaling-stroke; stroke-linejoin:round; }
.hx-area { opacity:.12; }
.hx-cross { stroke:var(--fg); stroke-width:1; opacity:.4; vector-effect:non-scaling-stroke; }
.hx-tip[hidden] { display:none; }
.hx-tip { position:absolute; top:8px; display:grid; gap:2px; min-width:200px; padding:8px 10px; font-size:12px; background:var(--raise); border:1px solid var(--line); border-radius:var(--r); box-shadow:0 8px 24px rgba(0,0,0,.3); pointer-events:none; }
.hx-note { margin:6px 0 0; } .hx-note:empty { display:none; }
.hx-empty { text-align:center; padding:36px 16px; color:var(--muted); }
.hx-empty b { display:block; color:var(--fg); font-size:15px; margin-bottom:4px; }

/* sections: voice processing, flash, tasks */
.hx-sec { margin-top:28px; }
.hx-sec h3 { font-size:15px; margin:0 0 10px; color:var(--strong); }
.hx-sec h3 span { font:400 12.5px var(--sans); color:var(--muted); margin-left:10px; }
.hx-sec .hx-ros { margin-top:0; }
.hx-voice .hx-ros { grid-template-columns:repeat(5, minmax(0,1fr)); }   /* the five stages in one row */
.hx-voice .hx-ro:nth-child(4n) { border-right:1px solid var(--line); } .hx-voice .hx-ro:last-child { border-right:0; }
.hx-sec .hx-head h3 { margin:0; }
.hx-sec .hx-head { margin-bottom:10px; }
.hx-filter { max-width:220px; }
.hx-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r2); background:var(--card); margin-bottom:10px; }
.hx-tasks { width:100%; font-size:13px; }
.hx-tasks th { cursor:pointer; user-select:none; white-space:nowrap; } .hx-tasks td { white-space:nowrap; }
.hx-tasks .n { text-align:right; font-variant-numeric:tabular-nums; }
.hx-tasks tr.dim td { color:var(--dim); }
.hx-meter { display:inline-block; position:relative; width:64px; height:5px; border-radius:3px; background:var(--chip); vertical-align:middle; }
.hx-meter i { position:absolute; left:0; top:0; bottom:0; border-radius:3px; background:var(--accent); }
.hx-meter.quiet i { background:var(--dim); } .hx-meter.warn i { background:var(--warn); } .hx-meter.err i { background:var(--err); }
.hx-meter b { position:absolute; top:-3px; bottom:-3px; width:1px; background:var(--muted); }

/* flash map (partitionBar): to scale, apps filled by their image, the running one underlined */
.hparts { display:flex; height:40px; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin:6px 0 10px; }
.hparts div { position:relative; border-right:1px solid var(--line); overflow:hidden; font:11px/1 var(--mono); padding:6px; white-space:nowrap; color:var(--muted); min-width:2px; }
.hparts div:last-child { border-right:0; }
.hparts div span { position:relative; z-index:1; }
.hparts div i { position:absolute; left:0; top:0; bottom:0; background:var(--chip); }
.hparts .happ { color:var(--fg); }
.hparts .happ i { background:color-mix(in srgb, var(--accent) 22%, transparent); }
.hparts .hrun { box-shadow:inset 0 -2px var(--accent); }
.hparts .hgap { background:repeating-linear-gradient(45deg, transparent, transparent 4px, var(--chip) 4px, var(--chip) 6px); }
.hparts .hboot { background:var(--chip); }

@media (max-width:1100px) { .hx-ros, .hx-voice .hx-ros { grid-template-columns:repeat(2, minmax(0,1fr)); } .hx-ro:nth-child(2n), .hx-voice .hx-ro:nth-child(2n) { border-right:0; } }
@media (max-width:560px) { .hx-ros, .hx-voice .hx-ros { grid-template-columns:minmax(0,1fr); } .hx-ro, .hx-voice .hx-ro:nth-child(n) { border-right:0; } }