/*
  BUILDER APP
  ===========
  Lives inside the computer's workstation panel (see css/computer.css for
  the screen material it inherits).
*/

/* An even split: a large, always-visible live preview on the left, every
   editing control on the right — its own layout, not
   .builder-root/.builder-preview/.builder-form (which Wardrobe also
   uses), so widening this couldn't narrow the Wardrobe's own preview as
   a side effect. */
.builder-workspace {
  display: flex;
  height: 100%;
  gap: var(--space-3);
}
.builder-workspace-preview {
  flex: 1;
  min-width: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(127, 216, 196, 0.25);
  position: relative;
}
.builder-workspace-form {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: none; /* Firefox — scrolling still works via wheel/touchpad/touch, only the visible track disappears */
  -ms-overflow-style: none; /* legacy Edge/IE */
}
.builder-workspace-form::-webkit-scrollbar {
  display: none; /* Chrome/Safari/modern Edge */
}

.builder-root {
  display: flex;
  height: 100%;
  gap: var(--space-3);
}

.builder-preview {
  width: 220px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(127, 216, 196, 0.25);
  position: relative;
}
.builder-preview-canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
}
.builder-preview-canvas:active { cursor: grabbing; }

/* Wardrobe app — reuses .builder-root/.builder-preview/.builder-form/
   .builder-section/.builder-library* as-is; these are the parts that
   genuinely differ. */
.wardrobe-preview {
  min-height: 340px; /* a standing figure needs a taller frame than a typical Builder object */
}
.wardrobe-part-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: var(--space-3);
}
.wardrobe-part-tabs button {
  background: none;
  border: 1px solid rgba(127, 216, 196, 0.2);
  color: rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  cursor: pointer;
}
.wardrobe-part-tabs button:hover { border-color: var(--screen-glow); color: var(--screen-glow); }
.wardrobe-part-tabs button.active {
  background: rgba(127, 216, 196, 0.15);
  border-color: var(--screen-glow);
  color: var(--screen-glow);
}
.wardrobe-texture-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--space-2) 0;
}
.wardrobe-import-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.wardrobe-paint-canvas {
  width: 192px;
  height: 192px;
  image-rendering: pixelated;
  border: 1px solid rgba(127, 216, 196, 0.3);
  border-radius: 6px;
  cursor: crosshair;
  touch-action: none;
  display: block;
  margin-bottom: var(--space-2);
}
.wardrobe-paint-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wardrobe-paint-controls input[type="color"] {
  width: 36px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(127, 216, 196, 0.3);
  border-radius: 4px;
  background: none;
}

.builder-form {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: none; /* Firefox — scrolling still works via wheel/touchpad/touch, only the visible track disappears */
  -ms-overflow-style: none; /* legacy Edge/IE */
}
.builder-form::-webkit-scrollbar {
  display: none; /* Chrome/Safari/modern Edge */
}

/* Version 3, Phase 14 ("Further Environmental Polish") — the Wardrobe's
   own form used to be one long vertical stack of sections regardless of
   how wide the panel around it actually was, the real cause behind "way
   too small... needed a better layout scheme" (the panel itself had
   already been widened — see .overlay--wardrobe .overlay-panel — but a
   wider panel alone did nothing for content that never used the extra
   width). A two-column grid, with each section spanning both columns by
   default (`.builder-section` below) — only the short, tab/slider-only
   sections marked `.builder-section-compact` (Body, Alternate Models,
   Proportions, Appearance) opt into sharing a row, so Paint and Outfits
   still get the panel's full width. Scoped to `.wardrobe-form`
   specifically (a class only WardrobeApp.js's own form carries), never
   touching the Builder app's own unrelated use of `.builder-form`. */
.wardrobe-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-4);
  align-content: start;
}
.wardrobe-form .builder-section {
  grid-column: 1 / -1;
}
.wardrobe-form .builder-section-compact {
  grid-column: auto;
}
/* buildPartTabs() returns a bare, unwrapped strip (no .builder-section —
   see WardrobeApp.js's own render()), so it needs the same full-span
   treatment named explicitly. The direct-child combinator matters here:
   the Body section's own body-model tabs reuse this identical class
   name one level deeper (nested inside a .builder-section that's already
   correctly full-width), and must NOT also match this rule. */
.wardrobe-form > .wardrobe-part-tabs {
  grid-column: 1 / -1;
}

.builder-section {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(127, 216, 196, 0.12);
}
.builder-section:last-child { border-bottom: none; }
.builder-section h2 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--screen-glow);
  font-size: var(--text-md);
  margin: 0 0 var(--space-2);
}

.builder-hint {
  font-size: var(--text-xs);
  color: var(--paper-dark);
  margin: 0 0 var(--space-2);
}

.builder-empty {
  font-size: var(--text-sm);
  color: var(--paper-dark);
  font-style: italic;
  padding: var(--space-2) 0;
}

.builder-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: var(--text-xs);
  color: var(--paper-dark);
  margin-bottom: var(--space-2);
}
.builder-field input[type="text"],
.builder-field textarea,
.builder-field select {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  color: var(--paper);
  padding: 6px 8px;
}
/* Same fix, same reason as .builder-shape-select's own option rule below it in this file. */
.builder-field select option {
  color: var(--ink);
  background: var(--paper);
}
.builder-field-narrow { flex: 1; min-width: 0; }

/* Interface & Design Refinement phase — "additional options push the
   interface wider than its container." This row's own field count isn't
   always fixed — buildPartEditor()'s own `miscRow` starts with two
   fields and conditionally appends a third ("Segments") only for
   cylinder/sphere/cone-type parts — and nothing here previously let the
   row respond to that by wrapping, only by overflowing. `flex-wrap`
   plus a real minimum basis per field (rather than `flex: 1` alone,
   which happily shrinks a field to an unusable sliver before ever
   wrapping) is "wrapping should almost always be preferred over layouts
   expanding horizontally," concretely: two fields comfortably share a
   row at typical panel widths; a third wraps onto its own line instead
   of squeezing in or spilling out. */
.builder-inline-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.builder-inline-row .builder-field { margin-bottom: 0; flex: 1 1 80px; min-width: 0; }
.builder-inline-row input[type="number"] {
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  color: var(--paper);
  padding: 5px 6px;
}
.builder-inline-row input[type="color"] {
  width: 100%;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  background: transparent;
  padding: 2px;
}

/* Being Creator — three-axis sliders (position/rotation/scale) for a
   single body part, one row per vector field. */
.being-vector-axes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.being-vector-axis {
  display: flex;
  align-items: center;
  gap: 8px;
}
.being-vector-axis span:first-child {
  width: 14px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--paper-dark);
  text-align: center;
}
.being-vector-axis input[type="range"] { flex: 1; min-width: 0; }
.being-vector-axis .settings-range-value { flex-shrink: 0; width: 52px; text-align: right; }

/* Version 3, Phase 10c ("Being Creator, Beyond the Prototype, Wave 2")
   — a real number input beside each axis slider, and the small unit
   suffix ("°" for Rotation) beside that. */
.being-vector-number {
  flex-shrink: 0;
  width: 52px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--paper);
  border-radius: var(--radius-sm);
  padding: 2px 4px;
}
.being-vector-unit {
  flex-shrink: 0;
  width: 12px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--paper-dark);
}

/* Being Creator — hierarchy list additions, Wave 2: a collapse toggle
   before any part row with children, and a drop-target highlight while
   dragging one row over another for re-parenting. */
.builder-collapse-toggle {
  flex-shrink: 0;
  width: 16px;
  background: none;
  border: none;
  color: var(--paper-dark);
  font-size: var(--text-xs);
  cursor: pointer;
  padding: 0;
}
.builder-collapse-toggle:hover { color: var(--paper); }
.builder-library-list li.drag-over {
  background: rgba(127, 216, 196, 0.18);
  border: 1px dashed var(--screen-glow);
}
.builder-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--paper-dark);
  cursor: pointer;
}

.builder-toolbar {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.builder-toolbar button {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background: rgba(127, 216, 196, 0.1);
  border: 1px solid rgba(127, 216, 196, 0.35);
  color: var(--screen-glow);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  cursor: pointer;
}
.builder-toolbar button:hover { background: rgba(127, 216, 196, 0.2); }

.builder-parts-list {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.builder-parts-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-sm);
}
.builder-parts-list li:hover { background: rgba(255, 255, 255, 0.05); }
.builder-parts-list li.selected {
  background: rgba(184, 134, 59, 0.22);
  border-left: 2px solid var(--brass-bright);
  padding-left: 6px;
  font-weight: 600;
}
.builder-library-list li.selected { background: rgba(127, 216, 196, 0.12); border-left: 2px solid var(--screen-glow); padding-left: 6px; }
.builder-parts-list-controls { display: flex; gap: 2px; }

.builder-shape-select {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--wood-mid);
  border-radius: var(--radius-sm);
  color: var(--paper);
  padding: 6px 8px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
}
/* Workshop Reliability phase — "the Builder Parts dropdown text colour
   should remain readable across browsers that force native dropdown
   styling (particularly Firefox)." Root cause: Firefox renders an open
   <select>'s own option list with its own native (light) popup
   background regardless of the `background` set on the <select> itself
   — only styling actually applied to each <option> is respected there.
   With no explicit <option> colour, the select's own light `color:
   var(--paper)` was inherited straight onto that native light
   background: light text on a light popup, unreadable. Explicit dark
   text (`--ink`) plus an explicit light background (`--paper`, matching
   what Firefox already shows) fixes it everywhere, not just Firefox —
   this is the exact `--ink`-on-`--paper` pairing already used for every
   other light surface in the Workshop (see tokens.css). */
.builder-shape-select option {
  color: var(--ink);
  background: var(--paper);
}

.builder-icon-button {
  background: transparent;
  border: none;
  color: var(--paper-dark);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 5px;
  border-radius: 3px;
}
.builder-icon-button:hover { color: var(--paper); background: rgba(255, 255, 255, 0.08); }
/* Workshop Personality phase — the Expression Creator's own Pencil/Eraser
   toggle is the first place two builder-icon-buttons represent mutually
   exclusive tool state rather than one-shot actions; every other user of
   this class (Rename, Duplicate, Export...) is unaffected, since none of
   them ever carry this class. */
.builder-icon-button.active { color: #7fd8c4; background: rgba(127, 216, 196, 0.16); }

.builder-part-editor {
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
}

.builder-behaviour-row {
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}
.builder-behaviour-row > label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.builder-behaviour-props {
  margin: var(--space-2) 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.builder-behaviour-props .builder-field { margin-bottom: 0; }

.builder-actions {
  display: flex;
  gap: var(--space-2);
  border-bottom: none;
}
.builder-actions button {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: var(--paper);
}
.builder-actions .builder-primary {
  background: var(--brass);
  color: var(--wood-dark);
  border-color: var(--brass);
}

.builder-library-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.builder-library-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
}
.builder-library-meta {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--paper-dark);
  margin-top: 2px;
}
.builder-library-controls { display: flex; gap: 4px; }
.builder-small-button {
  font-family: var(--font-mono);
  font-size: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--paper);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  cursor: pointer;
}
.builder-small-button:hover { border-color: var(--brass); color: var(--brass-bright); }
.builder-small-button.active { border-color: var(--screen-glow); color: var(--screen-glow); background: rgba(127, 216, 196, 0.12); }

/* ---------- Animation Editor ---------- */
.anim-playback-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 8px;
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(to top, rgba(20, 24, 26, 0.85), rgba(20, 24, 26, 0));
  backdrop-filter: blur(2px);
}
.anim-readonly-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--text-sm);
  color: var(--paper-dark);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: var(--space-3);
}
.anim-duration-input {
  width: 56px;
  font-family: var(--font-mono);
  font-size: 11px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--paper);
  border-radius: var(--radius-sm);
  padding: 2px 4px;
  margin: 0 6px;
}

/* ---------- Being Spawner ---------- */
.being-spawner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.being-spawner-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.being-spawner-tile:hover { background: rgba(127, 216, 196, 0.1); border-color: var(--screen-glow); }
.being-spawner-tile-title { font-weight: 600; color: var(--paper); }
.being-spawner-tile-meta { font-size: var(--text-xs); color: var(--paper-dark); }

/* ---------- Being Manager ---------- */
.being-manager-row.despawned { opacity: 0.6; }
.being-manager-row h3 { margin-top: 0; display: flex; align-items: center; gap: 8px; }

/* ---------- Responsive: the shared preview/form workspace split ---------- */
/* "Large screens may continue using multiple editing panels. Smaller
   devices should intelligently reorganise the workspace without
   sacrificing functionality. The model preview should remain the
   primary focus." Below this width, the same two panes that sit side by
   side on a spacious desktop screen stack vertically instead — the
   preview first (already first in DOM order, so column stacking puts it
   on top with no other change needed) and given a firm minimum height so
   it stays the clear visual anchor, the form below it, scrollable, never
   shrunk to the point of being unusable. */
@media (max-width: 700px) {
  .builder-workspace {
    flex-direction: column;
    overflow-y: auto;
  }
  .builder-workspace-preview {
    flex: none;
    min-height: 260px;
    height: 42vh;
  }
  .builder-workspace-form {
    flex: none;
    min-height: 0;
  }
}

/* Version 4, Phase 2 ("Playtesting Notes, Continued") — Wardrobe's own
   `.builder-root`/`.builder-preview`/`.builder-form` family (deliberately
   kept separate from `.builder-workspace` above, precisely so widening
   one couldn't narrow the other as a side effect — see this file's own
   top comment) never inherited that class's own narrow-viewport stacking
   as a result. `.builder-root` is the *only* consumer of this class
   family today (Builder/Being Creator/Animation Editor all moved to
   `.builder-workspace` already), so this is safe to scope here without
   risking any of those three. Same 700px breakpoint, same stack-the-
   preview-above-the-form technique, reused rather than reinvented —
   `docs/RESPONSIVE.md`'s own point about a shared convention "a future
   app... gets the same responsive behaviour automatically" applies just
   as well retroactively. `.wardrobe-form`'s own two-column grid also
   collapses to one column here, since a 700px-narrow stacked panel has
   no real width to split into two columns of anyway. */
@media (max-width: 700px) {
  .builder-root {
    flex-direction: column;
    overflow-y: auto;
  }
  .builder-preview {
    width: auto;
    flex: none;
    min-height: 260px;
    height: 42vh;
  }
  .builder-form {
    flex: none;
    min-height: 0;
  }
  .wardrobe-form {
    grid-template-columns: 1fr;
  }
}