/* health.css — Tarkov's HEALTH screen in the Tab inventory (healthui.js).
   Same dark panel language as inv.css (.tk): muted segment tints carry the
   state, amber is "this will work", red is "this will not". Scoped to .hu,
   .hu-tabs and .hu-armed so nothing else moves. */

/* ---------- GEAR | HEALTH tabs in the first column's header ---------- */
.hu-tabs{gap:2px;padding:0 6px}
.hu-tabs button{font-family:var(--disp);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone-dim);background:none;border:none;border-bottom:2px solid transparent;padding:7px 10px 5px;cursor:pointer}
.hu-tabs button:hover{color:var(--bone)}
.hu-tabs button.sel{color:var(--bone);border-bottom-color:var(--amber)}
/* something on the body wants treating */
.hu-tabs button.warn::after{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--red);margin-left:7px;vertical-align:2px;animation:huPulse 1.2s ease-in-out infinite}
@keyframes huPulse{50%{opacity:.35}}

/* ---------- the health block ---------- */
.hu{display:flex;flex-direction:column;gap:8px;padding:10px 10px 12px}
.hu-fig{position:relative;background:radial-gradient(ellipse at 50% 45%,rgba(70,76,74,.28),rgba(10,12,13,0) 70%)}
.hu-svg{display:block;width:100%;max-width:300px;height:auto;margin:0 auto;user-select:none;-webkit-user-select:none}

.hu-seg{stroke:rgba(0,0,0,.6);stroke-width:1.2;stroke-linejoin:round;cursor:pointer;transition:fill .3s,stroke .12s}
.hu-seg:hover{stroke:rgba(232,228,216,.75);stroke-width:1.6}
.hu-seg.blk{stroke:var(--red);stroke-width:1.6}
/* the drop preview while a med is dragged or armed */
.hu-seg.hu-drop-ok{stroke:var(--amber);stroke-width:3;filter:brightness(1.3)}
.hu-seg.hu-drop-no{stroke:var(--red);stroke-width:3;stroke-dasharray:5 3}
/* what happened on release */
.hu-seg.hu-flash-ok{animation:huOk .6s ease-out}
.hu-seg.hu-flash-no{animation:huNo .45s ease-out}
@keyframes huOk{0%{filter:brightness(2.2)}100%{filter:none}}
@keyframes huNo{0%,50%{stroke:var(--red);stroke-width:4}100%{stroke-width:1.2}}

/* part labels: NAME, HP, a thin bar */
.hu-lab{pointer-events:none}
.hu-zn{font-family:var(--disp);font-size:9px;letter-spacing:.16em;fill:var(--bone-dim)}
.hu-hp{font-family:var(--mono);font-size:13px;font-weight:600;fill:var(--bone)}
.hu-hp .hu-max{font-size:10px;font-weight:400;fill:var(--bone-dim)}
.hu-lab.blk .hu-hp{fill:var(--red);font-size:11px;letter-spacing:.12em}
.hu-bar0{fill:rgba(255,255,255,.08)}

/* wound marks, sitting on the part */
.hu-marks{pointer-events:none}
.hu-mk path,.hu-mk circle{stroke:rgba(0,0,0,.8);stroke-width:1}
.hu-mk-light path{fill:var(--amber)}
.hu-mk-heavy path{fill:var(--red)}
.hu-mk-heavy{animation:huPulse 1s ease-in-out infinite}
.hu-mk-blk circle{fill:#0b0b0b;stroke:var(--red);stroke-width:1.4}
.hu-mk-blk path{stroke:#f0e6e2;stroke-width:1.8;stroke-linecap:round;fill:none}
.hu-mk text{font-family:var(--mono);font-size:8px;font-weight:600;fill:#fff;stroke:rgba(0,0,0,.85);stroke-width:2;paint-order:stroke}

/* ---------- readouts under the body ---------- */
.hu-total{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:4px 10px;
  padding:8px 10px;border:1px solid rgba(200,196,184,.12);background:rgba(255,255,255,.025)}
.hu-total b{justify-self:end;font-size:17px;font-weight:600;color:var(--bone)}
.hu-total b i{font-style:normal;font-size:11px;color:var(--bone-dim);font-weight:400}
.hu-tbar{grid-column:span 2;height:4px;background:rgba(255,255,255,.07)}
.hu-tbar u{display:block;height:100%;transition:width .3s}

.hu-chips{display:flex;flex-wrap:wrap;gap:5px;min-height:0}
.hu-chip{font-family:var(--disp);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:2px 7px;border:1px solid var(--fog-2,#384347);color:var(--bone-dim)}
.hu-chip.on{border-color:var(--cold);color:#cfeaf1}
.hu-chip.bad{border-color:var(--red);color:#ffb9b3}

.hu-rows{display:flex;flex-direction:column}
.hu-row{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.hu-row span{font-family:var(--disp);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim)}
.hu-row b{justify-self:end;font-family:var(--mono);font-weight:500;font-size:11px;color:var(--bone);text-align:right}
.hu-row.bad b{color:#ffb9b3}

.hu-hint{font-family:var(--mono);font-size:10px;line-height:1.5;color:var(--bone-dim);min-height:30px;
  padding:6px 8px;border-left:2px solid rgba(224,165,30,.5);background:rgba(224,165,30,.05)}
.hu-hint b{color:var(--bone);font-weight:500}

/* a med tile armed by a click, waiting for a part */
.gitem.hu-armed{outline:2px solid var(--amber);outline-offset:-2px;box-shadow:0 0 0 1px rgba(224,165,30,.35),0 0 14px rgba(224,165,30,.35)}

/* ---------- optional: Health as a third column instead of a tab ---------- */
.tk-raid.tk-three{grid-template-columns:minmax(290px,320px) minmax(250px,290px) minmax(300px,1fr)}
#invPanel.tkp.hu-wide{width:min(1180px,97vw)}
@media (max-width:1100px){ .tk-raid.tk-three{grid-template-columns:1fr 1fr} }