/* SCRAPLINE chip editor -- the CHIPS + SCRIPT panels chipui.js builds.
 *
 * Its own stylesheet because the component is its own thing: the test pit and
 * the garage both link it, and neither owns the look of the other's page. Every
 * selector here is a CLASS -- the component uses no ids, so a page can hold two
 * editors (the garage opens one per mech) without them colliding.
 */

.chip-script {
  width: 100%;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  background: #0a0d11;
  color: var(--fg);
  border: 1px solid var(--line-hot);
  border-radius: 2px;
  padding: 8px;
  resize: vertical;
}

.cap-value { float: right; letter-spacing: 0.05em; }

/* ------------------------------------------------- panel 1: CHIPS */

.cap-bar {
  height: 6px;
  background: #0a0d11;
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 10px;
}
.cap-fill {
  height: 100%;
  width: 0;
  background: var(--good);
  transition: width 0.12s linear;
}
.cap-fill.over { background: var(--bad); }

.chip-list { max-height: 300px; overflow: auto; }

.chip-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 4px;
  border-top: 1px solid var(--line);
  cursor: pointer;
}
.chip-row:first-child { border-top: 0; }
.chip-row input[type="checkbox"] { margin-top: 2px; accent-color: var(--accent); }
.chip-row.on { background: rgba(255, 255, 255, 0.03); }
.chip-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chip-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
}
.chip-row.on .chip-head b { color: var(--accent); }
.chip-cost {
  font-size: 10px;
  color: var(--fg-dim);
  border: 1px solid var(--line-hot);
  border-radius: 2px;
  padding: 0 4px;
}
.chip-tag { font-size: 9.5px; color: var(--fg-faint); letter-spacing: 0.06em; }
.chip-cmds { font-family: var(--mono); font-size: 10px; color: var(--fg-dim); word-break: break-word; }
.chip-desc { font-size: 10.5px; color: var(--fg-faint); line-height: 1.4; }

/* ------------------------------------------ panel 2: SCRIPT + palette */

.palette-tag { margin-top: 10px; }
.palette { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow: auto; }
.palette-group { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.palette-chip {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--fg-faint);
  width: 100%;
}
.palette-empty { font-size: 11px; color: var(--fg-faint); margin: 0; }
.pal-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--mono);
  font-size: 10.5px;
  background: var(--bg-raise);
  color: var(--fg);
  border: 1px solid var(--line-hot);
  border-radius: 2px;
  padding: 3px 6px;
  cursor: pointer;
}
.pal-btn:hover { border-color: var(--accent); color: var(--accent); }
.pal-btn.condition b { color: #7fb8ff; }
.pal-btn.action b { color: #ffc46b; }
.pal-btn:hover b { color: inherit; }
.pal-hint { color: var(--fg-faint); font-size: 9.5px; }

.prob-list { margin: 8px 0 0; display: flex; flex-direction: column; gap: 3px; }
.prob {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.4;
  flex-wrap: wrap;
}
.prob.good { color: var(--good); }
.prob-line { color: var(--fg-faint); min-width: 2ch; text-align: right; }
.prob-kind {
  font-size: 9px;
  letter-spacing: 0.08em;
  border: 1px solid var(--line-hot);
  border-radius: 2px;
  padding: 0 4px;
  color: var(--fg-dim);
}
.prob-kind.k-capacity, .prob-kind.k-notInstalled { color: var(--bad); border-color: var(--bad); }
.prob-msg { color: var(--bad); }
.prob-src { color: var(--fg-faint); }
.cap-value.good { color: var(--good); }
.cap-value.bad { color: var(--bad); }

/* A salvage chip you have not found yet: shown, and refused. Knowing the chip
   exists is the point; hiding it would make the catalog a surprise. */
.chip-row.locked { opacity: 0.45; cursor: default; }
.chip-row.locked input[type="checkbox"] { cursor: default; }