/* ============================================================================
   EZ Live — the RTSS-style overlay.

   Every selector is prefixed `ez-` and the stage is id-scoped. The layout this
   reproduces uses names like .row, .panel, .s and .spacer, all of which already
   mean something else in the shared stylesheet; prefixing is what keeps the two
   from fighting rather than a pile of !important.

   Colours are the overlay's own, not the dashboard's, and stay fixed in light
   mode: this is a reproduction of a specific on-screen artefact, and a beige
   version of it in daylight would not be that artefact.
   ============================================================================ */
#ezView {
  --ez-cyan: #39c2f5;         /* current value */
  --ez-yellow: #f5e13a;       /* session maximum */
  --ez-pink: #f0a0c8;         /* session minimum */
  --ez-orange: #f5821f;       /* component names */
  --ez-green: #08cd08;        /* drive names */
  --ez-lime: #aeea00;         /* graphics API */
  --ez-white: #f2f2f2;
  --ez-label: #e8e8e8;
  --ez-gauge-color: #00f0ff;
  --ez-gauge-track: #123f4e;
  --ez-gpu-power-gauge: #468dfa;
  --ez-temp-limit: #0080c0;
  --ez-none: #5a5a68;         /* an unbound slot */

  font-family: 'Chakra Petch', 'DIN Alternate', 'Bahnschrift', system-ui, sans-serif;
  color: var(--ez-white);
  padding: 0.7rem 1rem 1rem;
}

.ez-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.4rem;
  font-size: 0.75rem; color: #c8c8d2;
  border: 1px solid #26262f; border-radius: 6px; background: #101018;
  padding: 0.45rem 0.75rem; margin-bottom: 0.6rem;
}
.ez-legend b { font-weight: 700; }
.ez-sw { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.ez-sw.ez-c { background: var(--ez-cyan); }
.ez-sw.ez-y { background: var(--ez-yellow); }
.ez-sw.ez-p { background: var(--ez-pink); }
.ez-sw.ez-o { background: var(--ez-orange); }
.ez-legend-note { color: #7a7a88; font-style: italic; }
.ez-spacer { flex: 1; }
.ez-status { color: #9a9aa8; }
.ez-status[data-state="stale"] { color: var(--ez-yellow); }
.ez-status[data-state="offline"] { color: #f06a6a; }

/* ------------------------------------------------------------------ health
   A beginner-facing dashboard above the overlay: one card per component the
   owner can actually act on. It is EZ's own dark chrome (like the legend), not
   the scaled stage, so it uses rem units off the page's base and green/amber/red
   state colours rather than the overlay's semantic palette. */
/* Overlay column (left) and health summary (right) share a row; either can be toggled away. The
   health markup comes first in the DOM, so `order` puts the overlay on the left visually. */
.ez-body { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: flex-start; }
.ez-body > #ezStageCol { order: 1; flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.ez-body > .ez-health { order: 2; flex: 1 1 300px; max-width: 400px; }
/* When the overlay is hidden, the health panel becomes a full-width dashboard: the cards spread into
   up to four columns. Capped and centred, so on a 4K panel the big cards fill a comfortable width
   rather than stretching edge to edge. */
.ez-body.no-stage > .ez-health { max-width: 3000px; margin-inline: auto; }
/* At most four columns: each track floors at 250px but is otherwise a quarter of the row (minus the
   three 0.8rem gaps), so a wide screen holds at four big cards and a narrow one drops to 3 / 2 / 1. */
.ez-body.no-stage .ez-health-items {
  gap: 0.8rem;
  grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 2.4rem) / 4)), 1fr));
}
@media (max-width: 820px) {
  .ez-body > .ez-health { max-width: none; }
}
/* Big screens: the cards scale up — text, icons, value readouts, and the Health Findings card — so a
   4K panel is a wall of legible cards, not small ones adrift in gutter. The steps are deliberately
   generous: a high-resolution panel at a lower OS scale renders rem units physically small, and this is
   where that is bought back. Scoped to .no-stage so the narrow sidebar the panel becomes beside the
   overlay keeps its compact size. The column count is already capped above. */
@media (min-width: 1600px) {
  .ez-body.no-stage .ez-health-summary { padding: 1rem 1.2rem; gap: 0.7rem; }
  .ez-body.no-stage .ez-health-name { font-size: 1.3rem; }
  .ez-body.no-stage .ez-health-value { font-size: 2.5rem; }
  .ez-body.no-stage .ez-health-ico svg { width: 1.85rem; height: 1.85rem; }
  .ez-body.no-stage .ez-health-note { font-size: 1rem; }
  .ez-body.no-stage .ez-health-badge { font-size: 0.82rem; }
  .ez-body.no-stage .ez-face-row,
  .ez-body.no-stage .ez-srow { font-size: 0.98rem; }
  .ez-body.no-stage .ez-finding-title { font-size: 1rem; }
  .ez-body.no-stage .ez-finding-hw { font-size: 0.95rem; }
  .ez-body.no-stage .ez-finding-advice { font-size: 0.92rem; }
  .ez-body.no-stage .ez-finding-ico svg { width: 1.3rem; height: 1.3rem; }
}
@media (min-width: 2200px) {
  .ez-body.no-stage .ez-health-name { font-size: 1.5rem; }
  .ez-body.no-stage .ez-health-value { font-size: 3rem; }
  .ez-body.no-stage .ez-health-ico svg { width: 2.1rem; height: 2.1rem; }
  .ez-body.no-stage .ez-health-note { font-size: 1.1rem; }
  .ez-body.no-stage .ez-health-badge { font-size: 0.9rem; }
  .ez-body.no-stage .ez-face-row,
  .ez-body.no-stage .ez-srow { font-size: 1.06rem; }
  .ez-body.no-stage .ez-finding-title { font-size: 1.08rem; }
  .ez-body.no-stage .ez-finding-advice { font-size: 1rem; }
}
@media (min-width: 2560px) {
  .ez-body.no-stage .ez-health-name { font-size: 1.65rem; }
  .ez-body.no-stage .ez-health-value { font-size: 3.4rem; }
  .ez-body.no-stage .ez-health-summary { padding: 1.2rem 1.45rem; }
}

/* The overlay's colour key — same look the legend bar had, now living with the overlay it explains. */
.ez-overlay-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.4rem;
  font-size: 0.75rem; color: #c8c8d2;
  border: 1px solid #26262f; border-radius: 6px; background: #101018; padding: 0.45rem 0.75rem;
}

.ez-health {
  border: 1px solid #26262f; border-radius: 8px; background: #101018;
  padding: 0.7rem 0.85rem;
}
.ez-health-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.ez-health-title {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #c8c8d2;
}
.ez-health-overall { font-size: 0.78rem; font-weight: 700; padding: 0.12rem 0.6rem; border-radius: 999px; }
.ez-health-overall[data-state="normal"]   { color: #3fb950; background: rgba(63, 185, 80, 0.15); }
.ez-health-overall[data-state="warning"]  { color: var(--ez-yellow); background: rgba(245, 225, 58, 0.14); }
.ez-health-overall[data-state="critical"] { color: #ff6b6b; background: rgba(248, 81, 73, 0.18); }
.ez-health-overall[data-state="unknown"]  { color: #9a9aa8; background: rgba(90, 90, 104, 0.2); }

/* A findings row — shared by the Details block, the Tech bar, and the expanded Active/History views. */
.ez-finding {
  display: flex; align-items: flex-start; gap: 0.6rem;
  border-radius: 6px; padding: 0.5rem 0.65rem;
  border: 1px solid #2a2a34; border-left: 4px solid #5a5a68; background: #14141c;
  transition: opacity 0.6s ease;
}
.ez-finding-ico { display: inline-flex; flex: none; margin-top: 0.05rem; color: #c8c8d2; }
.ez-finding-ico svg { width: 1.05rem; height: 1.05rem; display: block; }
.ez-finding-title { font-size: 0.82rem; font-weight: 700; color: var(--ez-white); }
.ez-finding-advice { font-size: 0.76rem; color: #b0b0bc; margin-top: 0.1rem; }
.ez-finding[data-severity="warning"]  { border-left-color: var(--ez-orange); }
.ez-finding[data-severity="warning"]  .ez-finding-ico { color: var(--ez-yellow); }
.ez-finding[data-severity="critical"] { border-left-color: #f85149; }
.ez-finding[data-severity="critical"] .ez-finding-ico { color: #ff6b6b; }
/* The hardware line leads each row — the physical part the sensor belongs to — with the episode count
   and, on a recovered row, a small flag. Recovered rows keep their severity colour: history is flagged,
   never dimmed, so a red spike from an hour ago still reads as red. */
.ez-finding-hw { font-size: 0.8rem; font-weight: 700; color: var(--ez-white); }
.ez-finding-count {
  font-size: 0.68rem; font-weight: 600; color: #b0b0bc;
  border: 1px solid #33333f; border-radius: 999px; padding: 0 0.3rem; vertical-align: 0.05rem;
}
.ez-finding-flag {
  font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: #8a8a98; border: 1px solid #33333f; border-radius: 999px; padding: 0.02rem 0.35rem;
  vertical-align: 0.08rem;
}
.ez-finding[data-recovered] .ez-finding-title { font-weight: 600; }

/* The per-row remove control (History rows), pushed to the right of the reused .ez-finding row. */
.ez-finding-remove {
  flex: none; margin-left: auto; align-self: flex-start;
  font: inherit; font-size: 0.85rem; line-height: 1; cursor: pointer;
  color: #8a8a98; background: transparent; border: 0; padding: 0.1rem 0.25rem; border-radius: 4px;
}
.ez-finding-remove:hover { color: #ff6b6b; background: rgba(248, 81, 73, 0.12); }

/* ------------------------------------------------------------- findings panel
   The bump-and-count findings queue, a direct child of #ezBody so it can place against the whole
   layout rather than inside the health column:
     - EZ Details: a full-width block on its own row below the overlay + cards (order 3 wraps it).
     - Tech collapsed: a full-height left rail before both columns (order 0), no internal scrolling —
       bump & count bounds it to distinct active problems.
     - Tech expanded: back to the full-width row, with the Active/History tabs and a scrolling list.
   Hidden in Off and EZ Health (the verdict's chips carry the findings there). */
.ez-findings-panel {
  order: 3; flex: 1 1 100%;
  border: 1px solid #26262f; border-radius: 8px; background: #101018; padding: 0.6rem 0.75rem;
}
.ez-findings-panel[hidden] { display: none; }
.ez-findings-panel[data-mode="tech"][data-expanded="false"] {
  order: 0; flex: 0 1 270px; align-self: stretch; min-width: 220px;
}
.ez-findings-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ez-findings-badge {
  font-size: 0.8rem; font-weight: 700; min-width: 1.4rem; text-align: center;
  border-radius: 6px; padding: 0.05rem 0.4rem; color: #101018; background: #3fb950;
}
.ez-findings-badge[data-state="warning"]  { background: var(--ez-orange); }
.ez-findings-badge[data-state="critical"] { background: #f85149; }
.ez-findings-heading { font-size: 0.9rem; font-weight: 700; color: var(--ez-white); }
.ez-findings-counts { font-size: 0.72rem; color: #8a8a98; }
.ez-findings-actions { margin-left: auto; display: flex; gap: 0.4rem; }
.ez-findings-btn {
  font: inherit; font-size: 0.72rem; font-weight: 600; cursor: pointer;
  color: #c8c8d2; background: transparent; border: 1px solid #33333f; border-radius: 5px; padding: 0.2rem 0.55rem;
}
.ez-findings-btn:hover { border-color: #4a4a5a; color: var(--ez-white); }
.ez-findings-btn[hidden] { display: none; }
.ez-findings-tabs { display: flex; gap: 0.2rem; margin-top: 0.5rem; border-bottom: 1px solid #26262f; }
.ez-findings-tabs[hidden] { display: none; }
.ez-findings-tabs button {
  font: inherit; font-size: 0.76rem; font-weight: 600; cursor: pointer;
  color: #8a8a98; background: transparent; border: 0; padding: 0.35rem 0.7rem;
}
.ez-findings-tabs button[aria-selected="true"] {
  color: var(--ez-white); box-shadow: inset 0 -2px 0 var(--ez-cyan);
}
.ez-findings-tab-count {
  font-size: 0.66rem; font-weight: 600; color: #b0b0bc;
  border: 1px solid #33333f; border-radius: 999px; padding: 0 0.3rem; margin-left: 0.2rem;
}
.ez-findings-list { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.55rem; }
/* Only the expanded section scrolls; the Details block and the Tech rail grow with their content
   (the rail is bounded by bump & count, not by a scrollbar). */
.ez-findings-panel[data-expanded="true"] .ez-findings-list { max-height: 340px; overflow-y: auto; }
/* Compact rows in the Tech rail: the advice line is dropped by the renderer; tighten the padding. */
.ez-findings-panel[data-mode="tech"][data-expanded="false"] .ez-finding { padding: 0.4rem 0.5rem; }
.ez-findings-empty { font-size: 0.78rem; color: #8a8a98; margin: 0.4rem 0 0; }

/* Cards flow into as many columns as fit and grow to share the row. Each is a <details>: the summary
   is the always-visible card, and opening it reveals the sensor breakdown. */
/* auto-fit (not auto-fill) so a handful of cards spread to fill the width instead of clumping small on
   the left of a wide screen; stretch so every card in a row is the same height — symmetric, not ragged. */
.ez-health-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.6rem; align-items: stretch; }
/* `display: grid` above overrides the plain [hidden] attribute, so hiding the grid (EZ Health mode) needs this. */
.ez-health-items[hidden] { display: none; }
.ez-health-card {
  min-width: 0;
  border: 1px solid #26262f; border-left: 4px solid #5a5a68; border-radius: 7px;
  background: #16161f;
  /* State changes (good → warm → hot, idle → working) fade over a slow ~2s ease rather than snapping,
     so a card shifting colour reads as a gradual change, not a flicker. */
  transition: border-color 2s ease, background-color 2s ease;
}
.ez-health-summary {
  display: flex; flex-direction: column; gap: 0.45rem;
  padding: 0.6rem 0.75rem; cursor: pointer; list-style: none; position: relative;
}
.ez-health-summary::-webkit-details-marker { display: none; }
/* A rotating chevron in the corner tells the card it opens. */
.ez-health-summary::after {
  content: ""; position: absolute; top: 0.7rem; right: 0.7rem;
  width: 0.5rem; height: 0.5rem; border-right: 2px solid #6a6a7a; border-bottom: 2px solid #6a6a7a;
  transform: rotate(45deg); transition: transform 0.2s ease; opacity: 0.8;
}
.ez-health-card[open] .ez-health-summary::after { transform: rotate(-135deg); }
.ez-health-summary:focus-visible { outline: 2px solid var(--ez-cyan); outline-offset: -2px; border-radius: 6px; }

.ez-health-card-top { display: flex; align-items: center; gap: 0.45rem; padding-right: 1rem; }
.ez-health-ico { display: inline-flex; color: #c8c8d2; flex: none; }
.ez-health-ico svg { width: 1.2rem; height: 1.2rem; display: block; }
.ez-health-name { flex: 0 1 auto; min-width: 0; font-weight: 700; letter-spacing: 0.03em; color: var(--ez-white); font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A neutral "kind" tag beside the name (e.g. GPU) — a blue chip, distinct from the status badge. */
.ez-health-tag {
  flex: none; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.08rem 0.4rem; border-radius: 4px;
  color: #9db7ff; background: rgba(47, 129, 247, 0.14); border: 1px solid rgba(47, 129, 247, 0.32);
}
.ez-health-badge {
  margin-left: auto; flex: none; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 0.12rem 0.5rem; border-radius: 999px;
  color: #c8c8d2; background: rgba(255, 255, 255, 0.06);
  transition: color 2s ease, background-color 2s ease;
}

.ez-health-read { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.ez-health-value { font-size: 1.55rem; font-weight: 700; line-height: 1; color: var(--ez-white); font-variant-numeric: tabular-nums; transition: color 2s ease; }
.ez-health-value sup { font-size: 0.42em; font-weight: 600; margin-left: 1px; }
.ez-health-sub { font-size: 0.72rem; color: #9a9aa8; }
.ez-health-sub[hidden] { display: none; }

.ez-health-bar { height: 5px; border-radius: 3px; background: #0b0b12; overflow: hidden; }
.ez-health-bar[hidden] { display: none; }
/* Width tracks the live reading (a shorter ease so it stays in step with the number); the colour fades
   slowly with the state. */
.ez-health-bar i { display: block; height: 100%; border-radius: 3px; background: #2ea043; width: 0; transition: width 0.9s ease, background-color 2s ease; }

.ez-health-note { font-size: 0.76rem; line-height: 1.35; color: #b0b0bc; }

/* Key readings shown on the card face without opening it: RAM stick temps, a live load meter. */
.ez-health-face { display: flex; flex-direction: column; gap: 0.22rem; margin-top: 0.1rem; }
.ez-health-face[hidden] { display: none; }
.ez-face-row { display: flex; align-items: center; gap: 0.45rem; font-size: 0.72rem; }
.ez-face-row[title] { cursor: help; }
/* Label then its gauge on the left; the value is pushed to the right edge. No stretched bar between. */
.ez-face-label { color: #9a9aa8; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ez-face-gauge { flex: none; display: inline-flex; }
.ez-face-gauge .ez-g-ico { width: 2.1em; height: 2.1em; }
.ez-face-val { flex: none; margin-left: auto; color: var(--ez-white); font-weight: 600; font-variant-numeric: tabular-nums; transition: color 2s ease; }
.ez-face-val sup { font-size: 0.6em; margin-left: 1px; }
.ez-face-row[data-state="warning"]  .ez-face-val { color: var(--ez-yellow); }
.ez-face-row[data-state="critical"] .ez-face-val { color: #ff6b6b; }

/* The revealed sensor breakdown. */
.ez-health-sensors { border-top: 1px solid #23232d; padding: 0.4rem 0.75rem 0.55rem; display: flex; flex-direction: column; gap: 0.15rem; }
.ez-srow { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.73rem; }
.ez-srow-name { color: #b8b8c4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ez-srow-val { margin-left: auto; flex: none; color: var(--ez-white); font-weight: 600; font-variant-numeric: tabular-nums; }
.ez-srow-val sup { font-size: 0.55em; margin-left: 1px; }
.ez-srow-limit { flex: none; color: #7a7a88; font-size: 0.9em; min-width: 0; }
.ez-srow[data-state="warning"]  .ez-srow-val { color: var(--ez-yellow); }
.ez-srow[data-state="critical"] .ez-srow-val { color: #ff6b6b; }

/* Colour is keyed on "heat", not health status: a card warms green → amber → red as its reading nears
   the limit, crossing to amber (warm) before it is an actual warning. A working card keeps its heat
   colour — calm green when cool, red when hot — with the "Working" badge word carrying the activity, so
   there is no separate blue "working" state any more. */
.ez-health-card[data-heat="good"]    { border-left-color: #2ea043; }
.ez-health-card[data-heat="good"]    .ez-health-badge { color: #3fb950; background: rgba(63, 185, 80, 0.14); }

/* On load — orange. A part warming toward its own limit under load: normal for something working, but
   distinct from the calm green of idle. Temperature cards use this where they once used warm/good. */
.ez-health-card[data-heat="onload"]  { border-left-color: var(--ez-orange); }
.ez-health-card[data-heat="onload"]  .ez-health-badge { color: var(--ez-orange); background: rgba(245, 130, 31, 0.16); }
.ez-health-card[data-heat="onload"]  .ez-health-value { color: var(--ez-orange); }
.ez-health-card[data-heat="onload"]  .ez-health-bar i { background: var(--ez-orange); }

.ez-health-card[data-heat="warm"]    { border-left-color: var(--ez-orange); }
.ez-health-card[data-heat="warm"]    .ez-health-badge { color: var(--ez-yellow); background: rgba(245, 225, 58, 0.14); }
.ez-health-card[data-heat="warm"]    .ez-health-value { color: var(--ez-yellow); }
.ez-health-card[data-heat="warm"]    .ez-health-bar i { background: var(--ez-orange); }

.ez-health-card[data-heat="hot"]     { border-left-color: #f85149; }
.ez-health-card[data-heat="hot"]     .ez-health-badge { color: #ff6b6b; background: rgba(248, 81, 73, 0.18); }
.ez-health-card[data-heat="hot"]     .ez-health-value { color: #ff6b6b; }
.ez-health-card[data-heat="hot"]     .ez-health-bar i { background: #f85149; }

.ez-health-card[data-heat="unknown"] { opacity: 0.62; }
.ez-health-card[data-heat="unknown"] .ez-health-bar { display: none; }

/* "Working" while cool — a distinct blue accent so a hard-working part at good temperatures reads as its
   own state, not the same calm green as an idle one. Only for good heat: a warm or hot working card
   keeps its amber/red, because the temperature matters more than the fact that it is busy. */
.ez-health-card[data-heat="good"][data-active] { border-left-color: #2f81f7; }
.ez-health-card[data-heat="good"][data-active] .ez-health-badge { color: #6cb6ff; background: rgba(47, 129, 247, 0.18); }

@media (prefers-reduced-motion: reduce) {
  .ez-health-card, .ez-health-badge, .ez-health-value, .ez-health-bar i,
  .ez-face-val, .ez-finding, .ez-health-summary::after { transition: none; }
}

.ez-health-toggle {
  font: inherit; font-size: 0.72rem; cursor: pointer;
  background: transparent; color: #c8c8d2;
  border: 1px solid #33333f; border-radius: 5px; padding: 0.2rem 0.55rem;
}
.ez-health-toggle:hover { border-color: #4a4a5a; }
.ez-health-toggle.is-on { color: var(--ez-cyan); border-color: var(--ez-cyan); }

/* ------------------------------------------------------------------ detail mode
   Off / EZ Health / EZ Details / Tech — a segmented radiogroup in the legend row,
   and the per-mode presentation of the same #ezHealth panel. */
.ez-mode {
  display: inline-flex; background: #0c0c13; border: 1px solid #26262f;
  border-radius: 7px; padding: 2px; gap: 2px;
}
.ez-mode button {
  font: inherit; font-size: 0.72rem; font-weight: 600; white-space: nowrap; cursor: pointer;
  color: #9a9aa8; background: transparent; border: 0; border-radius: 5px; padding: 0.24rem 0.6rem;
  transition: color 0.15s ease, background 0.15s ease;
}
.ez-mode button:hover { color: var(--ez-white); }
.ez-mode button[aria-checked="true"] { color: #06202b; background: var(--ez-cyan); }
.ez-mode button:focus-visible { outline: 2px solid var(--ez-cyan); outline-offset: 1px; }
@media (max-width: 620px) { .ez-mode { flex-wrap: wrap; } }

/* EZ Health — the one-glance verdict. */
.ez-health-verdict[hidden] { display: none; }
.ez-verdict { display: flex; gap: 0.9rem; align-items: flex-start; padding: 0.4rem 0.2rem 0.5rem; }
.ez-verdict-mark { flex: none; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; }
.ez-verdict-mark svg { width: 24px; height: 24px; display: block; }
.ez-verdict[data-state="good"]     .ez-verdict-mark { background: rgba(46, 160, 67, 0.16); color: #3fb950; }
.ez-verdict[data-state="warning"]  .ez-verdict-mark { background: rgba(245, 130, 31, 0.16); color: var(--ez-yellow); }
.ez-verdict[data-state="critical"] .ez-verdict-mark { background: rgba(248, 81, 73, 0.18); color: #ff6b6b; }
.ez-verdict[data-state="unknown"]  .ez-verdict-mark { background: rgba(154, 154, 168, 0.14); color: #9a9aa8; }
.ez-verdict-body { min-width: 0; }
.ez-verdict-headline { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
.ez-verdict[data-state="good"]     .ez-verdict-headline { color: #3fb950; }
.ez-verdict[data-state="warning"]  .ez-verdict-headline { color: var(--ez-yellow); }
.ez-verdict[data-state="critical"] .ez-verdict-headline { color: #ff6b6b; }
.ez-verdict[data-state="unknown"]  .ez-verdict-headline { color: #c8c8d2; }
.ez-verdict-sub { color: #9a9aa8; margin: 0.4rem 0 0.7rem; font-size: 0.92rem; }
.ez-verdict-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ez-attn-chip {
  display: inline-flex; align-items: center; gap: 0.45rem; border-radius: 8px;
  padding: 0.36rem 0.65rem; font-weight: 650; font-size: 0.88rem; border: 1px solid #26262f;
}
.ez-attn-ico { display: inline-flex; flex: none; }
.ez-attn-ico svg { width: 17px; height: 17px; display: block; }
.ez-attn-chip[data-state="warning"]  { color: var(--ez-yellow); border-color: rgba(245, 130, 31, 0.4); background: rgba(245, 130, 31, 0.08); }
.ez-attn-chip[data-state="critical"] { color: #ff6b6b; border-color: rgba(248, 81, 73, 0.4); background: rgba(248, 81, 73, 0.1); }
/* The episode count on a sticky chip — how many times this component's findings have fired. */
.ez-attn-count {
  font-size: 0.66rem; font-weight: 600; opacity: 0.85;
  border: 1px solid currentColor; border-radius: 999px; padding: 0 0.28rem; margin-left: 0.1rem;
}
/* The verdict's manual reset — the chips are sticky, so this is how they leave. */
.ez-verdict-clear {
  flex: none; margin-left: auto; align-self: flex-start;
  font: inherit; font-size: 0.72rem; font-weight: 600; cursor: pointer;
  color: #c8c8d2; background: transparent; border: 1px solid #33333f; border-radius: 5px; padding: 0.2rem 0.55rem;
}
.ez-verdict-clear:hover { border-color: #4a4a5a; color: var(--ez-white); }

/* Word-status chips — populated always, shown only in EZ Details (rules below). */
.ez-health-words { display: none; flex-wrap: wrap; gap: 0.4rem; }
.ez-word {
  font-size: 0.74rem; font-weight: 600; padding: 0.22rem 0.55rem; border-radius: 6px;
  border: 1px solid #2c2c36; color: #c8c8d2; background: rgba(255, 255, 255, 0.03);
}
.ez-word[data-tone="onload"]   { color: var(--ez-orange); border-color: rgba(245, 130, 31, 0.45); background: rgba(245, 130, 31, 0.12); }
.ez-word[data-tone="warm"]     { color: var(--ez-yellow); border-color: rgba(245, 130, 31, 0.35); background: rgba(245, 130, 31, 0.08); }
.ez-word[data-tone="hot"]      { color: #ff6b6b; border-color: rgba(248, 81, 73, 0.4); background: rgba(248, 81, 73, 0.1); }
.ez-word[data-tone="work"]     { color: #6cb6ff; border-color: rgba(47, 129, 247, 0.35); background: rgba(47, 129, 247, 0.1); }
.ez-word[data-tone="moderate"] { color: var(--ez-cyan); border-color: rgba(57, 194, 245, 0.3); background: rgba(57, 194, 245, 0.08); }

/* EZ Details strips every number: cards become colour + name + word-status, and don't expand. */
.ez-health[data-mode="details"] .ez-health-words { display: flex; }
.ez-health[data-mode="details"] .ez-health-read,
.ez-health[data-mode="details"] .ez-health-bar,
.ez-health[data-mode="details"] .ez-health-note,
.ez-health[data-mode="details"] .ez-health-face,
.ez-health[data-mode="details"] .ez-health-sensors { display: none; }
.ez-health[data-mode="details"] .ez-health-summary { cursor: default; pointer-events: none; gap: 0.4rem; }
.ez-health[data-mode="details"] .ez-health-summary::after { display: none; }

/* The stage is a fixed 1200px design scaled as a whole, exactly like the overlay
   it reproduces. Nothing inside ever reflows — position is what makes an overlay
   readable at a glance. */
#ezStageWrap { position: relative; width: 100%; }
#ezStage {
  position: absolute; top: 0; left: 0;
  width: 1200px;
  font-size: 22px;            /* the design's base; everything below is in em */
  transform-origin: top left;
  display: grid; gap: 4px;
  grid-template-columns: 360px 380px 460px;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "gpu gpu cpu"
    "ram store store"
    "fps store store";
}

.ez-panel { padding: 14px 18px; border-radius: 4px; min-width: 0; }
.ez-panel h2 {
  color: var(--ez-orange); font-size: 1.3em; letter-spacing: 0.05em; margin: 0 0 8px;
  display: flex; align-items: center; gap: 12px; font-weight: 700;
}
.ez-gpu { grid-area: gpu; background: #3a2e05; }
.ez-cpu { grid-area: cpu; background: #0b2838; }
.ez-ram { grid-area: ram; background: #1e0f33; }
.ez-store { grid-area: store; background: #1e0e03; }
.ez-fps { grid-area: fps; background: #0d0d0d; display: flex; flex-direction: column; }

.ez-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; margin: 8px 0; font-size: 1.05em; }
.ez-lbl { color: var(--ez-label); font-weight: 600; }
.ez-disk { color: var(--ez-green); font-size: 1.05em; font-weight: 700; letter-spacing: 0.04em; }
.ez-cores { display: grid; grid-template-columns: repeat(3, max-content); gap: 2px 14px; font-size: 0.85em; }
.ez-sm { font-size: 0.8em; }

.ez-ssds { display: flex; gap: 14px; align-items: flex-start; margin: 8px 0; }
.ez-ssd { flex: 0 0 auto; min-width: 0; }

.ez-g-ico { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -0.2em; flex: none; }
.ez-wr { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; }
.ez-wr small { font-size: 0.5em; font-weight: 600; color: var(--ez-cyan); margin-top: 2px; }
.ez-bolt { width: 1.1em; height: 1.1em; display: inline-block; vertical-align: -0.2em; flex: none; }

.ez-s {
  position: relative; font-weight: 700;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.45);
}
.ez-s[title] { cursor: help; }
.ez-s.ez-nb { border-bottom: none; }
.ez-s sup { font-size: 0.55em; font-weight: 600; margin-left: 1px; }
.ez-c { color: var(--ez-cyan); }
.ez-y { color: var(--ez-yellow); }
.ez-p { color: var(--ez-pink); }
.ez-g { color: var(--ez-lime); }
.ez-o { color: var(--ez-orange); }
.ez-limit { color: var(--ez-temp-limit); }
.ez-s:hover { filter: brightness(1.25); border-bottom-color: #fff; }

/* An unresolved slot. Dimmed and dotted rather than absent, so the layout keeps
   its shape and the gap is legible as "no sensor" instead of "no reading". */
.ez-s[data-ez-none] { color: var(--ez-none); border-bottom-style: dashed; font-weight: 600; }
.ez-s[data-ez-none] sup { display: none; }

.ez-fps .ez-big { font-size: 2.4em; letter-spacing: 0.03em; margin: auto 0 2px; justify-content: center; }
.ez-hz { font-size: 1.05em; justify-content: center; }
.ez-clock { color: var(--ez-cyan); font-size: 1.35em; font-weight: 700; margin-top: 6px; }

/* Rail sparkline — the recent history of that rail, drawn by views/ez.js. */
.ez-volt-graph { flex: 0 0 auto; width: 44px; height: 16px; display: inline-flex; align-items: center; margin: 0 6px; }
.ez-volt-graph svg { width: 100%; height: 100%; overflow: visible; }

/* Below this width, scaling alone would make the overlay illegible, so it is the
   one case where blocks are allowed to move. */
#ezStage.ez-stack {
  position: static; width: 100%; transform: none !important;
  font-size: 18px;
  grid-template-columns: 1fr; grid-template-rows: none;
  grid-template-areas: "gpu" "cpu" "ram" "store" "fps";
}
#ezStage.ez-stack .ez-ssds { flex-direction: column; gap: 8px; }