/* bone-part-editor.css — scoped styles for the shared BonePartEditor core.
   Uses the shared CSS variables where available, with safe fallbacks so the
   editor also renders if a page omits a variable. All classes are `bpe-`/`bpe-afp-`. */

.bpe-root {
  display: flex;
  gap: 12px;
  align-items: stretch;
  min-height: 460px;
}
.bpe-preview {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 300px;
  background: var(--color-bg-panel, #131c2b);
  border-radius: 10px;
  padding: 10px;
}
.bpe-canvas {
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  align-self: center;
  background: #0a111d;
  border-radius: 8px;
  image-rendering: pixelated;
}
.bpe-preview-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.bpe-hint { font-size: 10.5px; color: var(--color-text-secondary, #6f7e98); margin-left: auto; }
.bpe-side {
  flex: 0 0 340px;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  max-height: calc(100vh - 140px);
  padding-right: 4px;
}

/* generic bits */
.bpe-mini {
  font: inherit;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--color-border, #2c3a50);
  background: var(--color-bg-elevated, #1b2740);
  color: var(--color-text, #dfe7f2);
  cursor: pointer;
}
.bpe-mini:hover { border-color: var(--color-accent, #4d8dff); }
.bpe-mini.sel { background: var(--color-accent, #3b6fd1); border-color: var(--color-accent, #4d8dff); color: #fff; }
.bpe-mini.bpe-danger { border-color: #6e2b35; color: #ff9aa6; }
.bpe-mini.bpe-danger:hover { background: #3a1820; }
.bpe-check { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--color-text-secondary, #9fb0c8); }
.bpe-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  font-size: 10px; font-weight: 700; cursor: help;
  background: var(--color-bg-elevated, #243149); color: var(--color-text-secondary, #9fb0c8);
  border: 1px solid var(--color-border, #2c3a50);
}
.bpe-field { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--color-text-secondary, #9fb0c8); }
.bpe-field input, .bpe-field select {
  font: inherit; font-size: 12px; padding: 4px 6px; border-radius: 6px;
  border: 1px solid var(--color-border, #2c3a50);
  background: var(--color-bg-input, #0f1726); color: var(--color-text, #dfe7f2);
}
.bpe-inline { display: flex; gap: 4px; align-items: center; }
.bpe-inline input { flex: 1 1 auto; min-width: 0; }
.bpe-action-hint { font-size: 11px; color: var(--color-text-secondary, #8595ad); line-height: 1.4; }

/* slot nav */
.bpe-slotnav { display: flex; flex-wrap: wrap; gap: 5px; }
.bpe-slotchip {
  font: inherit; font-size: 12px; padding: 4px 9px; border-radius: 14px;
  border: 1px solid var(--color-border, #2c3a50);
  background: var(--color-bg-elevated, #1b2740); color: var(--color-text, #dfe7f2);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.bpe-slotchip.sel { background: var(--color-accent, #3b6fd1); border-color: var(--color-accent, #4d8dff); color: #fff; }
.bpe-dot { width: 7px; height: 7px; border-radius: 50%; background: #44506a; }
.bpe-dot.on { background: #4cd07d; }

/* pieces list — grouped by Center / Front layer / Back layer */
.bpe-slotgroup { display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px; }
.bpe-slotgroup-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-secondary, #7f8ea6); }
.bpe-slotgroup-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.bpe-slotchip.bpe-addpiece {
  border-style: dashed; color: var(--color-text-secondary, #9fb0c8);
  background: transparent; margin-top: 2px;
}
.bpe-slotchip.bpe-addpiece:hover { border-color: var(--color-accent, #4d8dff); color: var(--color-text, #dfe7f2); }

/* focus control (clothes) — Off / Ghost / Solo */
.bpe-focusctl { display: inline-flex; align-items: center; gap: 4px; }
.bpe-focus-label { font-size: 11px; color: var(--color-text-secondary, #9fb0c8); margin-right: 2px; }
.bpe-focusbtn { padding: 2px 7px; }

/* gender switch */
.bpe-gtabs { display: flex; gap: 4px; }
.bpe-gtab {
  flex: 1 1 0; font: inherit; font-size: 12px; padding: 5px; cursor: pointer;
  border: 1px solid var(--color-border, #2c3a50); background: var(--color-bg-elevated, #1b2740);
  color: var(--color-text-secondary, #9fb0c8); border-radius: 6px;
}
.bpe-gtab.sel { background: var(--color-accent, #3b6fd1); color: #fff; border-color: var(--color-accent, #4d8dff); }
.bpe-ghidden { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.bpe-gender-toggle { font-size: 11px; color: var(--color-text-secondary, #9fb0c8); display: inline-flex; gap: 4px; align-items: center; }

/* art panel */
.bpe-artpanel { display: flex; flex-direction: column; gap: 8px; background: var(--color-bg-panel, #131c2b); border-radius: 8px; padding: 8px; }
.bpe-artpanel.bpe-hidden-variant { opacity: 0.5; pointer-events: none; }
.bpe-art-asset { display: flex; gap: 8px; }
.bpe-thumb {
  width: 64px; height: 64px; flex: 0 0 64px; border-radius: 6px;
  background: #0a111d url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><rect width="8" height="8" fill="%23172238"/><rect x="8" y="8" width="8" height="8" fill="%23172238"/></svg>') repeat;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  cursor: pointer; border: 1px solid transparent; transition: border-color 0.12s, box-shadow 0.12s;
}
.bpe-thumb:hover { border-color: var(--color-accent, #4d8dff); }
.bpe-thumb.bpe-thumb-drop { border-color: #4cd07d; box-shadow: 0 0 0 2px rgba(76,208,125,0.35) inset; }
.bpe-thumb img { max-width: 100%; max-height: 100%; image-rendering: pixelated; pointer-events: none; }
.bpe-thumb-empty { font-size: 10px; color: #5b6a85; }
.bpe-art-asset-fields { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bpe-art-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bpe-num input { width: 100%; }
/* scale row + transform actions */
.bpe-scale-row { display: flex; align-items: center; gap: 6px; }
.bpe-scale-cap { font-size: 11px; color: var(--color-text-secondary, #9fb0c8); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.bpe-scale-range { flex: 1 1 auto; min-width: 0; accent-color: var(--color-accent, #4d8dff); }
.bpe-scale-num { width: 56px; font: inherit; font-size: 12px; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--color-border, #2c3a50); background: var(--color-bg-input, #0f1726); color: var(--color-text, #dfe7f2); }
.bpe-scale-dn, .bpe-scale-up { padding: 2px 8px; line-height: 1; }
.bpe-xform-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.bpe-nudge-pad { display: inline-grid; grid-template-columns: repeat(3, auto); grid-template-rows: auto auto; gap: 2px; align-items: center; justify-items: center; }
.bpe-nudge-pad [data-nudge="up"] { grid-column: 2; }
.bpe-nudge-pad .bpe-nudge-mid { grid-column: 1 / span 3; display: inline-flex; gap: 2px; }
.bpe-nudge-pad [data-nudge="down"] { grid-column: 2; }
.bpe-nudge-pad .bpe-mini { padding: 2px 7px; line-height: 1; }
.bpe-art-toggles { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bpe-tintsel select { margin-left: 4px; }
.bpe-adv { margin-top: 4px; border-top: 1px solid var(--color-border, #243149); padding-top: 6px; }
.bpe-adv > summary { font-size: 11px; color: var(--color-text-secondary, #8595ad); cursor: pointer; user-select: none; }
.bpe-adv-slot { margin-top: 8px; }
.bpe-adv-jsonhead { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 4px; font-size: 11px; color: var(--color-text-secondary, #8595ad); }
.bpe-json { margin: 0; max-height: 160px; overflow: auto; font-size: 10.5px; line-height: 1.35; background: var(--color-bg-input, #0f1726); border: 1px solid var(--color-border, #2c3a50); border-radius: 6px; padding: 6px 8px; color: var(--color-text-secondary, #aab8cf); white-space: pre; }

/* direction sub-editor */
.bpe-dirs { background: var(--color-bg-panel, #131c2b); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.bpe-dirs-top { display: flex; gap: 8px; align-items: flex-end; }
.bpe-dirs-top .bpe-field { flex: 1 1 auto; }
.bpe-dir-summary { font-size: 12px; color: var(--color-text-secondary, #9fb0c8); }
.bpe-ok { color: #5fd58a; }
.bpe-warn { color: #ffb454; }
.bpe-compass { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.bpe-compass-row { display: flex; gap: 4px; }
.bpe-compass-cell, .bpe-compass-center {
  width: 40px; height: 34px; border-radius: 6px; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border, #2c3a50); background: var(--color-bg-elevated, #1b2740);
  color: var(--color-text-secondary, #9fb0c8); cursor: pointer;
}
.bpe-compass-center { cursor: default; opacity: 0.3; }
.bpe-compass-cell.st-has { border-color: #2f7d4d; background: #133021; color: #7ee0a3; }
.bpe-compass-cell.st-missing { border-style: dashed; border-color: #b3801f; color: #ffc874; background: #2a2210; }
.bpe-compass-cell.st-inherited { opacity: 0.6; }
.bpe-compass-cell.sel { outline: 2px solid var(--color-accent, #4d8dff); outline-offset: 1px; }
.bpe-dir-actions { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.bpe-chip {
  font: inherit; font-size: 12px; padding: 4px 9px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--color-border, #2c3a50); background: var(--color-bg-elevated, #1b2740);
  color: var(--color-text, #dfe7f2);
}
.bpe-chip.sel { background: var(--color-accent, #3b6fd1); color: #fff; }
.bpe-copy-from { font: inherit; font-size: 12px; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--color-border, #2c3a50); background: var(--color-bg-input, #0f1726); color: var(--color-text, #dfe7f2); }

/* guidance panel */
.bpe-guide { background: var(--color-bg-panel, #131c2b); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--color-border, #243149); }
.bpe-guide-head { font-size: 13px; }
.bpe-guide-emptytag { color: #ffb454; font-size: 11px; font-weight: 400; }
.bpe-guide-strip, .bpe-guide-compare { display: flex; gap: 6px; }
.bpe-ref-fig, .bpe-cmp { flex: 1 1 0; margin: 0; text-align: center; }
.bpe-ref-img {
  height: 58px; border-radius: 6px; background: #0a111d; display: flex; align-items: center; justify-content: center; overflow: hidden;
  border: 1px solid transparent;
}
.bpe-ref-img img { max-width: 100%; max-height: 100%; image-rendering: pixelated; }
.bpe-ref-fig.active .bpe-ref-img { border-color: var(--color-accent, #4d8dff); }
.bpe-ref-missing { color: #4b5a76; font-size: 11px; }
.bpe-ref-fig figcaption, .bpe-cmp figcaption { font-size: 10px; color: var(--color-text-secondary, #8595ad); margin-top: 2px; }
.bpe-cmp.mine .bpe-ref-img { border-color: #2f7d4d; }
.bpe-guide-why { font-size: 11.5px; color: var(--color-text-secondary, #aab8cf); }
.bpe-why-list { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 3px; line-height: 1.4; }
.bpe-why-list code { background: var(--color-bg-input, #0f1726); padding: 0 3px; border-radius: 3px; }

/* asset file picker */
.bpe-afp-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.bpe-afp-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.bpe-afp { position: relative; width: 520px; max-width: 92vw; max-height: 80vh; display: flex; flex-direction: column; background: var(--color-bg-panel, #131c2b); border: 1px solid var(--color-border, #2c3a50); border-radius: 10px; overflow: hidden; }
.bpe-afp-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--color-border, #2c3a50); }
.bpe-afp-head h3 { margin: 0; font-size: 14px; flex: 1 1 auto; }
.bpe-afp-close { background: none; border: none; color: var(--color-text-secondary, #9fb0c8); font-size: 20px; cursor: pointer; }
.bpe-afp-upload { font: inherit; font-size: 12px; padding: 4px 9px; border-radius: 6px; border: 1px solid var(--color-accent, #4d8dff); background: var(--color-accent, #3b6fd1); color: #fff; cursor: pointer; }
.bpe-afp-body { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; overflow: hidden; }
.bpe-afp-search { font: inherit; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--color-border, #2c3a50); background: var(--color-bg-input, #0f1726); color: var(--color-text, #dfe7f2); }
.bpe-afp-list { overflow-y: auto; max-height: 48vh; display: flex; flex-direction: column; gap: 2px; }
.bpe-afp-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; border: none; background: transparent; color: var(--color-text, #dfe7f2); cursor: pointer; text-align: left; font: inherit; font-size: 12px; }
.bpe-afp-item:hover { background: var(--color-bg-elevated, #1b2740); }
.bpe-afp-ic { width: 18px; text-align: center; opacity: 0.8; }
.bpe-afp-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bpe-afp-msg { padding: 16px; text-align: center; color: var(--color-text-secondary, #8595ad); }
.bpe-afp-status { font-size: 12px; color: #ffb454; min-height: 14px; }