/* PC health in Build (build-health.mjs; owner, 9 Oct 2026): the selected desk's PC on every Build tab, top right. One
   cream pixel card: title and status, SPEED with what takes it, the Paste / Fans / Parts meters with their −% chips
   (MY PCS' look), CPU and GPU °C, Care (gold when a fix is due, "All good" when nothing is) and Overclock (the flame).
   Full on a desktop, inside the Build panel's top (at the panel's place on Whole setup); a one-line strip that opens on
   a tap on a phone (under the tabs; the View part bar and the panel move down by its height) or a short window. */
.workshop-ui[data-mode=build] .build-health {
  box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"head head" "badge badge" "speed speed" "meters meters" "temps temps" "care oc";
  gap:6px 8px;padding:8px 10px 10px;background:#fff8e2;border:2px solid #d9c29b;box-shadow:inset 0 2px #fffcf1,0 2px 0 #c9b28a;
  color:#3b2418;font:400 12px/1.3 Pixeloid,monospace;font-synthesis:none;letter-spacing:0;pointer-events:auto;text-align:left;
}
.workshop-ui[data-mode=build] .build-health[hidden] {display:none!important}
.workshop-ui[data-mode=build] .build-health :is(p,ul,small,strong,b,span,button) {font-family:Pixeloid,monospace;letter-spacing:0}
.workshop-ui[data-mode=build] .build-health[data-oc=false] .build-health-care {grid-column:1 / -1}
/* Title and status. */
.build-health-head {grid-area:head;display:flex;align-items:center;gap:8px;min-width:0}
.build-health-title {flex:1;display:flex;align-items:baseline;gap:6px;min-width:0}
.workshop-ui[data-mode=build] .build-health-title strong {font:700 15px/1.15 Pixeloid,monospace;white-space:nowrap}
.workshop-ui[data-mode=build] .build-health-name {font-size:12px;color:#7a6a5c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.workshop-ui[data-mode=build] .build-health-status {flex:none;padding:3px 6px;border:2px solid;font:700 12px/1 Pixeloid,monospace;white-space:nowrap}
.build-health-status[data-tone=good] {color:#2f6a2b;background:#e5f3d4;border-color:#a8cf8b}
.build-health-status[data-tone=care] {color:#8a3c12;background:#ffe6d2;border-color:#f0a777}
.build-health-status[data-tone=wait] {color:#7a4a12;background:#fff0c9;border-color:#e2b866}
.build-health-status[data-tone=bad] {color:#873023;background:#ffe1d6;border-color:#e39a83}
.build-health-status[data-tone=off] {color:#6b5d4f;background:#efe9de;border-color:#cdbfa6}
.workshop-ui[data-mode=build] .build-health-badge {grid-area:badge;margin:0}
/* SPEED, and what takes it. */
.build-health-speed {grid-area:speed;display:flex;align-items:center;gap:12px;min-width:0}
.build-health-speed-value {flex:none;display:flex;align-items:baseline;gap:6px}
.workshop-ui[data-mode=build] .build-health-speed-value strong {font:700 24px/1 Pixeloid,monospace;font-variant-numeric:tabular-nums}
.workshop-ui[data-mode=build] .build-health-speed-value small {font-size:12px;text-transform:uppercase;color:#7a6a5c}
.workshop-ui[data-mode=build] .build-health-losses {display:grid;gap:1px;margin:0;padding:0;list-style:none;font-size:12px;line-height:1.25;color:#9c3a2b;min-width:0}
/* Paste, Fans, Parts: MY PCS' meters. */
.workshop-ui[data-mode=build] .build-health-meters {grid-area:meters;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.build-health-meter {display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"label label" "value bar";align-items:center;gap:2px 5px;min-width:0}
.build-health-meter[data-loss=true] {grid-template-areas:"label label" "value bar" "loss loss"}
.workshop-ui[data-mode=build] .build-health-meter-label {grid-area:label;font-size:12px;text-transform:uppercase;color:#7a6a5c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.workshop-ui[data-mode=build] .build-health-meter-value {grid-area:value;font:700 12px/1.1 Pixeloid,monospace;font-variant-numeric:tabular-nums}
.build-health-bar {grid-area:bar;display:block;min-width:16px;height:7px;border:2px solid #6b4a33;background:#f1e4c3;overflow:hidden}
.build-health-bar i {display:block;height:100%;background:#7cc35b}
.build-health-meter[data-tone=warn] .build-health-bar i {background:#e9b33a}
.build-health-meter[data-tone=bad] .build-health-bar i {background:#e0603a}
.build-health-meter[data-tone=bad] .build-health-meter-value {color:#b23a1f}
.workshop-ui[data-mode=build] .build-health-loss {grid-area:loss;justify-self:start;padding:0 3px;font:700 12px/1.25 Pixeloid,monospace;color:#7a4a12;background:#f6e3b8;white-space:nowrap;cursor:help}
.build-health-loss[data-tone=bad] {color:#fff6ec;background:#c6502a}
.workshop-ui[data-mode=build] .build-health-temps {grid-area:temps;margin:0;font-size:12px;color:#5d4c3f}
.build-health-temps [data-state=cool] {color:#2c6d86}
.build-health-temps [data-state=warm] {color:#a86a10}
.build-health-temps [data-state=throttling] {color:#b33a20}
/* Care (MY PCS' card Care) and Overclock. */
.workshop-ui[data-mode=build] :is(.build-health-care,.build-health-oc,.build-health-buy) {
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-sizing:border-box;width:100%;min-width:0;min-height:44px;
  margin:0;padding:2px 6px;border:7px solid transparent;border-image:url('../ui/frames/cream.svg') 12 fill stretch;background:none;border-radius:0;box-shadow:none;
  color:#3b2418;font:700 13px/1.1 Pixeloid,monospace;text-align:center;cursor:pointer;
}
.workshop-ui[data-mode=build] :is(.build-health-care[data-urgent=true],.build-health-buy) {border-image-source:url('../ui/frames/power-gold.svg');color:#3a1c08}
.workshop-ui[data-mode=build] :is(.build-health-care,.build-health-oc):disabled {border-image-source:url('../ui/frames/tile.svg');border-image-slice:8 fill;color:#8b7964;cursor:not-allowed}
.build-health-care {grid-area:care}
.build-health-oc {grid-area:oc}
.workshop-ui[data-mode=build] :is(.build-health-care-cost,.build-health-oc-sub) {font-size:12px;font-weight:400;color:#6a3a16;white-space:nowrap}
.build-health-care:disabled .build-health-care-cost {color:#a8987f}
.build-health-oc-head {display:flex;align-items:center;gap:5px}
.build-health-oc-icon {flex:none;display:inline-grid;width:12px;height:16px;image-rendering:pixelated}
/* The workshop's own svg rule (23 px, stroked) must not reach the flame. */
.workshop-ui[data-mode=build] .build-health-oc-icon svg {display:block;width:12px;height:16px;stroke:none}
.workshop-ui[data-mode=build] .build-health-chevron svg {stroke:none}
/* A running overclock and "All good" wait, but read as calm states, not greyed-out buttons. */
/* (The workshop fades every disabled button to 40%; these two keep full strength.) */
.workshop-ui[data-mode=build] .build-health :is(.build-health-oc[data-running=true],.build-health-care[data-good=true]):disabled {opacity:1}
.workshop-ui[data-mode=build] .build-health-oc[data-running=true]:disabled {border-image-source:url('../ui/frames/cream.svg');border-image-slice:12 fill;color:#7a4a26;cursor:default}
.workshop-ui[data-mode=build] .build-health-oc[data-running=true]:disabled .build-health-oc-sub {color:#7a4a26}
.workshop-ui[data-mode=build] .build-health-care[data-good=true]:disabled {border-image-source:url('../ui/frames/cream.svg');border-image-slice:12 fill;color:#2f6a2b;cursor:default}
/* The badge's flame keeps its own size (the workshop's svg rule is 23 px). */
.workshop-ui[data-mode=build] .build-health-badge .oc-badge-icon {width:12px;height:16px}
.workshop-ui[data-mode=build] .build-health-badge .oc-badge-icon svg {display:block;width:12px;height:16px;stroke:none}
.build-health-oc:disabled .oc-flame-ink {fill:#c9a27a}
.build-health-oc[data-running=true] .oc-flame-ink {fill:#e0603a}
.workshop-ui[data-mode=build] .build-health :is(button):focus-visible {outline:3px solid #2c6d86;outline-offset:1px}
.workshop-ui[data-mode=build] .build-health-empty {grid-area:speed;margin:0;font-size:13px;color:#5d4c3f}
.build-health-buy {grid-area:care;grid-column:1 / -1}

/* The strip: one line (title, status, speed, Care) that opens on a tap. */
.workshop-ui[data-mode=build] .build-health[data-form=strip] {grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head care";gap:4px;padding:4px 6px}
.workshop-ui[data-mode=build] .build-health[data-form=strip][data-expanded=true] {grid-template-areas:"head care" "badge badge" "speed speed" "meters meters" "temps temps" "oc oc"}
.workshop-ui[data-mode=build] .build-health[data-form=strip][data-expanded=false]>:not(.build-health-head,.build-health-care,.build-health-buy) {display:none}
.workshop-ui[data-mode=build] .build-health[data-form=strip][data-kind=empty] {grid-template-areas:"head care" "speed speed"}
.workshop-ui[data-mode=build] .build-health[data-form=strip][data-kind=empty] .build-health-buy {grid-area:care;grid-column:auto}
.workshop-ui[data-mode=build] .build-health[data-form=strip] .build-health-head {
  min-height:40px;margin:0;padding:0;border:0;background:none;box-shadow:none;color:inherit;font:inherit;text-align:left;cursor:pointer;width:100%;
}
/* Care waiting for the island's maintenance reset ("Care opens at 21:45"): its words at full strength, in two short lines
   on the strip so the status keeps its words. */
.workshop-ui[data-mode=build] .build-health .build-health-care[data-wait=true]:disabled {opacity:1;font-size:12px;cursor:default}
.workshop-ui[data-mode=build] .build-health[data-form=strip] .build-health-care[data-wait=true] {max-width:8.5em}
/* The strip's Care keeps its price under the word, as on the card: narrow, so the status keeps its words beside it. */
.workshop-ui[data-mode=build] .build-health[data-form=strip] :is(.build-health-care,.build-health-buy) {gap:1px;min-height:40px;width:auto;max-width:52vw;padding:0 4px;line-height:1}
.workshop-ui[data-mode=build] .build-health[data-form=strip] .build-health-care-cost {font-size:11px}
.workshop-ui[data-mode=build] .build-health-mini {flex:none;font:700 13px/1 Pixeloid,monospace;font-variant-numeric:tabular-nums}
.build-health-chevron {flex:none;display:grid;place-items:center;width:10px;color:#7a6a5c}
.build-health-chevron svg {display:block;width:10px;height:6px}
.build-health[data-expanded=true] .build-health-chevron svg {transform:rotate(180deg)}
.workshop-ui[data-mode=build] .build-health[data-form=strip] .build-health-name {display:none}
/* On the strip the status is coloured words with a small square, not a framed pill: the line keeps title, speed and Care. */
.workshop-ui[data-mode=build] .build-health[data-form=strip] .build-health-head {gap:4px}
.workshop-ui[data-mode=build] .build-health[data-form=strip] .build-health-title {flex:none}
.workshop-ui[data-mode=build] .build-health[data-form=strip] .build-health-title strong {font-size:13px}
.workshop-ui[data-mode=build] .build-health[data-form=strip] .build-health-status {flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;padding:0;border:0;background:none;font-size:12px}
.workshop-ui[data-mode=build] .build-health[data-form=strip] .build-health-status::before {content:'';display:inline-block;width:7px;height:7px;margin-right:4px;background:currentColor;vertical-align:1px}
.workshop-ui[data-mode=build] .build-health[data-form=strip] .build-health-mini {margin-left:auto}

/* Places: the Build panel's top, the panel's place (Whole setup), a phone's strip under the tabs. */
.workshop-ui[data-mode=build] .build-health[data-place=panel] {flex:none;margin:0 0 8px}
/* On its own (Whole setup, a phone) it wears the Build panels' frame. */
.workshop-ui[data-mode=build] .build-health:is([data-place=float],[data-place=top]) {border:10px solid transparent;border-image:url('../ui/frames/build-panel.svg') 16 fill stretch;background:none;box-shadow:none;padding:4px 6px 6px}
.workshop-ui[data-mode=build] .build-health[data-place=top][data-form=strip] {padding:0 2px}
.workshop-ui[data-mode=build] .build-health[data-place=float] {position:absolute;z-index:20;top:calc(188 * var(--bs));right:calc(31 * var(--bs));width:calc(428 * var(--bs))}
@media(min-width:621px) and (max-width:1250px) {
  .workshop-ui[data-mode=build] .build-health[data-place=float] {top:210px}
}
@media(min-width:621px) and (max-height:500px) {
  html .workshop-ui[data-mode=build] .build-health[data-place=float] {top:122px}
}
@media(max-width:620px) {
  html .workshop-ui[data-mode=build] .build-health[data-place=top] {position:fixed;z-index:23;left:8px;right:8px;top:max(264px,36dvh);
    max-height:calc(100dvh - max(264px,36dvh) - 104px);overflow-y:auto;overscroll-behavior:contain}
  html .workshop-ui[data-mode=build][data-health=top]:not([data-sheet=collapsed]) .build-sheet-toggle {top:calc(max(264px,36dvh) + 64px)}
  html .workshop-ui[data-mode=build][data-health=top] .pc-panel.build-inspector[data-picker=true] {top:calc(max(298px,calc(36dvh + 34px)) + 64px)}
}
@media(prefers-reduced-motion:reduce){.build-health[data-expanded=true] .build-health-chevron svg{transform:rotate(180deg)}}