/*
  BUILD MODE — the Builder Phone
  ================================
  "Taking out a Workshop device," not opening a separate editor. The room
  keeps rendering behind it at all times; entering Build Mode only freezes
  the camera in place (see BuildModeSystem.js), it doesn't hide or dim the
  world the way the computer's vignette does. The Phone itself slides up
  from the lower-right corner and back down when closed — everything else
  about the Workshop stays exactly as visible as it was a moment ago.
*/

#buildmode-root {
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  font-family: var(--font-body);
}
#buildmode-root.hidden { display: none; }

.builder-phone {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 300px;
  height: 500px;
  max-height: 82vh;
  background: var(--wood-dark);
  border: 7px solid var(--wood-mid);
  border-radius: 30px;
  box-shadow: var(--shadow-float), inset 0 0 0 2px var(--brass);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(140%);
  /* Version 3, Phase 12 — was a hardcoded 0.38s; the real Phone's own
     identical slide (`.workshop-phone` in phone.css) already used
     `var(--duration-slow)` for this exact transition — an inconsistency
     the token duration-zeroing under reduced motion also silently
     missed, since this value never referenced the token at all. */
  transition: transform var(--duration-slow) cubic-bezier(0.2, 0.8, 0.3, 1);
}
.builder-phone.open {
  transform: translateY(0);
}

.builder-phone-header {
  flex-shrink: 0;
  text-align: center;
  padding: 10px 0 8px;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--brass-bright);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.builder-phone-screen {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden; /* belt-and-braces alongside the real min-width:0 fixes above — this screen was never meant to scroll sideways at all */
  background: var(--paper);
  color: var(--ink);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
}

/* ---------- Library screen ---------- */
/* Workshop Reliability phase (v3.0.3b) — "the tab buttons don't wrap into
   a new line and just keep pushing themselves off to the right." Five
   buttons (labels from "Terrain" to "Construction Library") at `flex: 1`
   with no `flex-wrap` meant each button's own default `min-width: auto`
   (a flex item never shrinks below its own content's intrinsic width
   unless told to — the same class of bug `.panel-row input[type="range"]`
   was fixed for, see overlays.css's own comment on that one) held the row
   to its full unshrunk width regardless of the 300px-wide phone panel,
   pushing the later buttons off-screen instead. `flex-wrap: wrap` lets
   the row genuinely break; `flex-basis: calc(50% - 2px)` (half the row,
   minus half the 4px gap) targets two buttons per row rather than one
   giant button per row or an uneven wrap driven purely by each label's
   own length. */
.builder-phone-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: var(--space-3);
  flex-shrink: 0;
}
.builder-phone-tabs button {
  flex: 1 1 calc(50% - 2px);
  min-width: 0;
  background: none;
  border: 1px solid var(--paper-dark);
  color: var(--ink-soft);
  border-radius: var(--radius-sm);
  padding: 6px 4px;
  font-size: 11px;
  font-family: var(--font-mono);
  cursor: pointer;
}
.builder-phone-tabs button.active {
  background: var(--wood-mid);
  border-color: var(--wood-mid);
  color: var(--paper);
  font-weight: 600;
}

.builder-phone-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow-y: auto;
}
.builder-phone-group-heading {
  margin: 0 0 6px;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--paper-dark);
}
.builder-phone-group-grid,
.builder-phone-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}
.builder-phone-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--paper-dark);
  border-radius: var(--radius-md);
  padding: 8px;
  cursor: pointer;
  text-align: left;
}
.builder-phone-card:hover { border-color: var(--wood-mid); }
.builder-phone-card-swatch {
  width: 100%;
  aspect-ratio: 1.4;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.builder-phone-card-name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}
.builder-phone-card-category {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}
/* Version 3, Phase 7 — a Blueprint card is the one library card with a
   second inline action (Export), so it can't be a single clickable
   <button> the way every other card is — see BuilderPhoneUI.js's own
   _buildBlueprintCard() comment. Same visual footprint as every other
   card, split into an inner arm-button (identical layout to a plain
   card's own swatch/name/category) plus a small Export button below it. */
.builder-phone-card-arm-area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.builder-phone-card-export {
  align-self: flex-end;
  margin-top: 4px;
  font-size: 9px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: none;
  border: 1px solid var(--paper-dark);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  cursor: pointer;
  color: var(--ink-soft);
}
.builder-phone-card-export:hover { border-color: var(--wood-mid); color: var(--ink); }
.builder-phone-empty {
  grid-column: 1 / -1;
  color: var(--ink-soft);
  font-size: var(--text-sm);
  font-style: italic;
  padding: var(--space-3) 0;
  text-align: center;
}

/* Version 3, Phase 9 ("Creative Flow") — a live text filter for the
   Saved Objects/Imported Models/Blueprints tabs, shown whenever a tab has
   more than one item. No flex siblings here (unlike
   `.builder-phone-row input[type="number"]`'s own case) — just an
   ordinary `width: 100%` with `box-sizing: border-box` so the input's own
   padding/border don't push it past this narrow ~268px screen's width. */
.builder-phone-search-row {
  margin-bottom: var(--space-2);
}
.builder-phone-search-row input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--paper-dark);
  border-radius: var(--radius-sm);
  color: var(--ink);
  padding: 5px 8px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
}
.builder-phone-search-row input:focus { outline: none; border-color: var(--wood-mid); }

/* ---------- Ghost screen (placing / moving) ---------- */
.builder-phone-hint {
  font-size: var(--text-xs);
  color: var(--ink-soft);
  line-height: 1.4;
  margin: 0 0 var(--space-3);
}

/* ---------- Selection screen ---------- */
.builder-phone-back {
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  cursor: pointer;
  padding: 0 0 var(--space-2);
}
.builder-phone-back:hover { color: var(--ink); }

.builder-phone-screen h3 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--wood-mid);
  margin: 0 0 var(--space-3);
  font-size: var(--text-md);
}

.builder-phone-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.builder-phone-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-soft);
}
.builder-phone-row > span { width: 52px; flex-shrink: 0; }
.builder-phone-row input[type="number"] {
  width: 0;
  flex: 1;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--paper-dark);
  border-radius: var(--radius-sm);
  color: var(--ink);
  padding: 3px 4px;
  font-family: var(--font-mono);
  font-size: 10px;
}
.builder-phone-row input[type="range"] { flex: 1; min-width: 0; }
.builder-phone-row input[type="color"] {
  width: 30px;
  height: 22px;
  border: 1px solid var(--paper-dark);
  border-radius: var(--radius-sm);
  background: none;
  padding: 0;
}

.builder-phone-small-button {
  font-family: var(--font-mono);
  font-size: 9px;
  background: none;
  color: var(--ink-soft);
  border: 1px solid var(--paper-dark);
  border-radius: var(--radius-sm);
  padding: 3px 6px;
  cursor: pointer;
}
.builder-phone-small-button:hover { border-color: var(--wood-mid); color: var(--ink); }
.builder-phone-small-button:disabled,
.builder-phone-button:disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* ---------- Builder Evolution: history bar, multi-select alignment ---------- */
.builder-phone-history-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.builder-phone-history-bar .builder-phone-small-button { flex: 1; text-align: center; }
.builder-phone-align-buttons {
  display: flex;
  gap: 4px;
  flex: 1;
}
.builder-phone-align-buttons button { flex: 1; }

/* ---------- Shared action buttons (ghost + selection screens) ---------- */
.builder-phone-ghost-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--space-2);
}
.builder-phone-snap-row {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--paper-dark);
  margin: 4px 0;
}
.builder-phone-snap-row label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.builder-phone-button {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 9px;
  cursor: pointer;
  border: 1px solid var(--wood-mid);
  background: rgba(0, 0, 0, 0.03);
  color: var(--ink);
}
.builder-phone-button:hover { background: rgba(0, 0, 0, 0.06); }
.builder-phone-button-primary {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--wood-dark);
}
.builder-phone-button-primary:hover { background: var(--brass-bright); }
.builder-phone-button-danger {
  border-color: #a24b3f;
  color: #a24b3f;
  background: none;
}
.builder-phone-button-danger:hover { background: rgba(162, 75, 63, 0.1); }

@media (max-width: 700px) {
  .builder-phone {
    width: min(280px, 78vw);
    right: 10px;
    bottom: 10px;
    height: min(460px, 78vh);
  }
}