.vitality-cost-display {
  position: absolute;
  top: 313px;
  left: 188px;
  width: 68px;
  height: 8px;  
  pointer-events: auto;
  background: transparent;
  border: none;
}

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

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


.cybernetics-list {
  position: relative;   /* stays the anchor for the rows and + button */
  width: 193px;
  height: 52px;
  overflow-y: auto;     /* vertical scroll when > 3 rows */
  overflow-x: hidden;   /* 🚫 never show a horizontal scrollbar */
}

/* CYBERNETICS "+" BUTTON (near the CYBERNETICS text, outside list area) */
.cybernetics-add {
  position: absolute;
  /* These coordinates are relative to .full-sheet-container */
  top: 1px;       /* tuned to sit just right of the CYBERNETICS label */
  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;
}

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

/* each row = 1/3 of the empty area */
.cyber-row {
  position: relative;
  height: 16px;          /* fixed row height */
  font-size: 11px;
  line-height: 16px;     /* lock text to row height */
  color: #0ff;
  padding: 0px;        /* no vertical padding so height is exact */
  box-sizing: border-box;

  /* DEBUG: show row boundaries */
  border-bottom: 1px solid rgba(28, 130, 214, 0.0);
  background: transparent;
}

/* --- COLUMN POSITIONING (inside each row) --- */

/* All columns outlined for debug so you can visually align to printed grid */
.cyber-item,
.cyber-vitality,
.cyber-body,
.cyber-info {
  border: 1px solid rgb(76, 151, 221);  /* MAGENTA = column areas */
  background: transparent;

  height: 16px;          /* match .cyber-row */
  line-height: 16px;     /* vertically center text */
  overflow: hidden;      /* clip instead of stretching */
  white-space: nowrap;   /* never wrap to a 2nd line */
}

/* Inline edit inputs inside each cybernetic cell */
.cyber-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;
}

.cyber-item {
  position: absolute;
  left: -1px;
  top: 0px;
  width: 84px;
  height: 16px;
}

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

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

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

/* --- Buttons on right side of row (Cybernetics) --- */
.cyber-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 */
}

.cyber-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;
}

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

/* --- Hover tooltip for Cybernetics --- */
.cyber-tooltip {
  position: absolute;
  top: 16px;      /* JS will override top per-row */
  left: 194px;

  /* shrink-to-fit width, but keep 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 */
  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 tooltip should NOT block mouse input */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s linear;
  z-index: 650;
}

.cyber-tooltip.visible {
  opacity: 1;
  /* allow scroll + hover only when visible */
  pointer-events: auto;
}

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

.cyber-tooltip-line {
  white-space: nowrap;   /* keep label + value on one line */
}

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

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

/* ===== CYBERNETICS DELETE CONFIRM POPUP ===== */
.cyber-confirm-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  z-index: 2000;
}

.cyber-confirm-dialog {
  background: #000;
  border: 1px solid #0ff;
  padding: 8px 12px;
  color: #0ff;
  font-size: 12px;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
  min-width: 180px;
  text-align: center;
}

.cyber-confirm-message {
  margin-bottom: 8px;
}

.cyber-confirm-buttons {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.cyber-confirm-buttons button {
  padding: 2px 10px;
  border: 1px solid #0ff;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.9);
  color: #0ff;
  cursor: pointer;
}

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

/* Indent mod rows under their parent items */
.cyber-mod-row .cyber-item {
  padding-left: 0;
  text-indent: 15px;
}