/* WORN / ARMOR – same size, directly below Cybernetics */
.endurance-cost-display {
  position: absolute;
  top: 406px;
  left: 180px;
  width: 86px;
  height: 8px;  
  pointer-events: auto;
  background: transparent;
  border: none;
}

.endurance-cost-display:hover {
  background: rgba(0, 255, 255, 0.25);
  box-shadow: 0 0 8px #0ff;
}

.worn-area {
  position: absolute;
  top: 418px;
  left: 127px;
  width: 193px;
  height: 51px;  
  pointer-events: auto;
  background: transparent; 
  outline: 2px solid rgba(0, 153, 255, 1);
}


.worn-list {
  position: relative;
  width: 193px;
  height: 52px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* "+" button for Worn/Armor (same style as cybernetics-add) */
.worn-add {
  position: absolute;
  top: 1px;       /* base position, JS will slide it down like cybernetics */
  left: 85px;
  width: 14px;
  height: 14px;
  padding: 0;
  border-radius: 8px;
  border: transparent;
  background: transparent;
  color: #0ff;
  font-size: 14px;
  font-weight: bold;
  line-height: 10px;
  cursor: pointer;
  z-index: 600;
}

.worn-add:hover {
  background: rgba(0, 255, 255, 0.25);
  box-shadow: 0 0 8px #0ff;
}

/* --- Buttons on right side of row (Cybernetics + Worn/Armor) --- */
.worn-buttons {
  position: absolute;
  top: -1px;   /* aligned just above the row */
  left: 192px;
  height: 16px;
  display: flex;
  align-items: center;
  padding-left: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s linear;
  z-index: 700; /* keep it clickable above the sheet art */
}

.worn-buttons button {
  width: auto;
  height: 16px;
  margin: 0 2px;
  padding: 0 4px;
  border: 1px solid #0ff;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.9);
  color: #0ff;
  font-size: 7px;
  white-space: nowrap;
  cursor: pointer;
}

.worn-buttons button:hover {
  background: rgba(0, 255, 255, 0.2);
  box-shadow: 0 0 6px #0ff;
}

.worn-row {
  position: relative;
  height: 16px;
  font-size: 11px;
  line-height: 16px;
  color: #0ff;
  padding: 0px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(28, 130, 214, 0.0);
  background: transparent;
}

/* Column visuals re-used so they stay aligned to printed grid */
.worn-item,
.worn-endurance,
.worn-body,
.worn-info {
  border: 1px solid rgb(76, 151, 221);
  background: transparent;
  height: 16px;
  line-height: 16px;
  overflow: hidden;
  white-space: nowrap;
}

/* Inline edit inputs for Worn rows */
.worn-edit-input {
  width: 100%;
  height: 100%;
  background: transparent;
  border: 1px solid #0ff;
  color: #0ff;
  font-size: 9px;
  padding: 0 2px;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}

/* Positions identical to Cyber so it sits on the printed grid */
.worn-item {
  position: absolute;
  left: -1px;
  top: 0px;
  width: 84px;
  height: 16px;
}

/* Indent installed mod names under their parent armor row */
/* Indent installed mod names under their parent armor row */
.worn-mod-row .worn-item {
  padding-left: 0;      /* no padding, keep column edges exact */
  text-indent: 12px;     /* indent the text itself instead */
}


.worn-endurance {
  position: absolute;
  left: 85px;
  top: 0px;
  width: 12px;
  height: 16px;
  text-align: center;
}

.worn-body {
  position: absolute;
  left: 99px;
  top: 0px;
  width: 30px;
  height: 16px;
  text-align: center;
}

.worn-info {
  position: absolute;
  left: 131px;
  top: 0px;
  width: 61px;
  height: 16px;
  font-size: 10px;
}

/* --- Hover tooltip for Cybernetics + Worn/Armor --- */
.worn-tooltip {
  position: absolute;
  top: 16px;     /* JS overrides this with row-based top */
  left: 194px;

  /* shrink-to-fit width, but keep your cap */
  display: inline-block;
  width: auto;
  max-width: 180px;
  padding: 6px;

  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;

  /* scroll when content is tall, like Movement/Actions/etc. */
  max-height: 120px;
  overflow-y: auto;
  overflow-x: hidden;

  font-size: 14px;
  line-height: 1.1;
  color: #0ff;

  background: rgba(0, 0, 0, 0.95);
  border: 1px solid #0ff;
  border-radius: 3px;
  box-shadow: 0 0 6px rgba(0, 255, 255, 0.7);

  /* hidden tooltips should NOT block mouse input */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s linear;
  z-index: 650;
}

/* keep the shared opacity rule */
.cyber-tooltip.visible,
.worn-tooltip.visible {
  opacity: 1;
}

/* but only Worn gets pointer events on visible */
.worn-tooltip.visible {
  pointer-events: auto;
}

.worn-tooltip-line {
  white-space: nowrap;   /* keep “Endurance Cost: 3” on one line */
}

.worn-tooltip-info {
  margin-top: 2px;       /* small spacing before Info block, optional */
}

.worn-tooltip-label {
  white-space: nowrap;   /* keep “Info:” glued together */
}

.worn-hover-buffer {
  position: absolute;
  width: 100%;      /* JS overrides left/width to match the button bar */
  height: 18px;     /* same “magic number” as the other boxes */
  background: transparent;
  pointer-events: auto;
  z-index: 645;     /* between buttons (700) and tooltip (650) */
}

/* Tiny disclosure arrow shown when a worn row has installed mods */
.worn-mod-caret {
  display: inline-block;
  width: 8px;
  margin-right: 0px;
  font-size: 9px;
  text-align: center;
  cursor: pointer;
}