/* 3D builder page. Dark navy panel with barn-red selections; the 3D view stays in sight while the options scroll. */

/* Glass navbar, like the top of the home page, so the builder shows through it. */
.page-builder .nav-bar, .page-builder .nav.is-scrolled .nav-bar { background: rgb(22 29 39 / .42); }

.bld-head { padding: calc(var(--nav-h) + 2rem) var(--page-pad) 1.5rem; background: var(--cool); }
.bld-head-inner { max-width: var(--container); margin-inline: auto; display: flex; flex-direction: column; gap: .5rem; }
.bld-head p { max-width: 46rem; }

.builder {
  --panel-bg: #172334;
  --panel-line: rgb(255 255 255 / .1);
  --panel-text: #e9edf2;
  --panel-muted: rgb(233 237 242 / .66);
  --stage-top: calc(var(--nav-h) + .25rem);
  display: grid;
  grid-template-columns: 24rem 1fr;
  grid-template-areas: "panel stage";
  align-items: start;
  background: var(--panel-bg);
  border-top: 1px solid var(--panel-line);
  scroll-margin-top: var(--nav-h);
}

/* ---------- Stage ---------- */
.bld-stage {
  grid-area: stage;
  position: sticky;
  top: var(--stage-top);
  height: calc(100svh - var(--stage-top));
  min-height: 26rem;
  overflow: hidden;
  background: #dcd6c8;
}
.bld-gl, .bld-plan { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
.bld-gl[hidden], .bld-plan[hidden] { display: none; }
.bld-loading, .bld-fallback { position: absolute; inset: 0; display: grid; place-content: center; gap: 1rem; text-align: center; padding: 2rem; color: var(--ink); }
.bld-fallback { background: var(--cool); justify-items: center; }
.bld-loading[hidden], .bld-fallback[hidden], .bld-toolbar[hidden], .bld-toast[hidden] { display: none; }
.bld-spinner { width: 2rem; height: 2rem; margin: 0 auto .5rem; border: 3px solid rgb(30 53 80 / .2); border-top-color: var(--navy); border-radius: 50%; animation: bld-spin 1s linear infinite; }
@keyframes bld-spin { to { transform: rotate(360deg); } }

.bld-toolbar { position: absolute; inset: .75rem .75rem auto; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; pointer-events: none; }
.bld-toolbar > * { pointer-events: auto; }
.bld-toolbar [hidden] { display: none; }
.bld-spacer { flex: 1; pointer-events: none; }
.bld-group { display: flex; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgb(0 0 0 / .18); }
.bld-tool {
  display: inline-flex; align-items: center; gap: .375rem;
  min-height: 2.5rem; min-width: 2.5rem; padding: .375rem .75rem; justify-content: center;
  border: 0; background: rgb(23 35 52 / .92); color: var(--white);
  font-size: .875rem; font-weight: 600; cursor: pointer;
}
.bld-group .bld-tool + .bld-tool { border-left: 1px solid rgb(255 255 255 / .1); }
.bld-toolbar > .bld-tool { border-radius: 10px; box-shadow: 0 2px 10px rgb(0 0 0 / .18); }
.bld-tool:hover { background: var(--navy-700); }
.bld-tool[aria-pressed="true"] { background: var(--red); }
.bld-tool .icon { font-size: 1.25rem; }
.bld-delete { background: var(--white); color: var(--red); }
.bld-delete:hover { background: #fbf1ef; }

.bld-chip { position: absolute; right: .75rem; bottom: 3.25rem; padding: .5rem .875rem; border-radius: 10px; background: rgb(23 35 52 / .92); color: var(--white); font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.bld-toast { position: absolute; left: 50%; top: 4.25rem; transform: translateX(-50%); max-width: min(30rem, calc(100% - 2rem)); padding: .75rem 1rem; border-radius: 10px; background: var(--white); color: var(--ink); font-size: .9375rem; font-weight: 500; box-shadow: var(--shadow-card); text-align: center; }
.bld-hint { position: absolute; inset: auto 0 0; padding: .625rem .875rem; background: rgb(23 35 52 / .88); color: rgb(255 255 255 / .85); font-size: .8125rem; line-height: 1.4; }
.bld-hint strong { color: var(--white); font-weight: 600; }

/* ---------- Panel ---------- */
.bld-panel { grid-area: panel; color: var(--panel-text); min-width: 0; }
.bld-sec { padding: 1.5rem 1.5rem 1.75rem; border-bottom: 1px solid var(--panel-line); display: flex; flex-direction: column; gap: .875rem; }
.bld-sec[hidden] { display: none; }
.bld-h { font-size: 1.0625rem; font-weight: 700; letter-spacing: .02em; color: var(--white); }
.bld-note { font-size: .875rem; line-height: 1.45; color: var(--panel-muted); }
.bld-note a { color: inherit; }
.bld-label, .bld-row > label { font-size: .875rem; color: var(--panel-muted); }
.bld-row { display: grid; grid-template-columns: 6.5rem 1fr auto; align-items: center; gap: .75rem; }
.bld-row[hidden] { display: none; }
.bld-row > .bld-seg, .bld-row > .bld-toggle { grid-column: 2 / -1; }
.bld-row output { min-width: 3.5rem; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.bld-row input[type="range"] { width: 100%; accent-color: var(--red); }

.bld-presets { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.bld-presets button, .bld-optypes button {
  display: flex; align-items: center; gap: .625rem; min-height: 3rem; padding: .5rem .75rem;
  border: 1.5px solid var(--panel-line); border-radius: 10px; background: rgb(255 255 255 / .04);
  color: var(--white); font-size: .8125rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; text-align: left; cursor: pointer;
}
.bld-presets svg { width: 1.375rem; height: 1.375rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.bld-presets button:hover, .bld-optypes button:hover { border-color: rgb(255 255 255 / .35); }
.bld-presets button[aria-pressed="true"], .bld-optypes button[aria-pressed="true"] { border-color: var(--red); background: rgb(166 58 43 / .22); }
.bld-optypes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.bld-optypes button { flex-direction: column; justify-content: center; text-align: center; gap: .25rem; min-height: 4.25rem; font-size: .75rem; }
.bld-optypes .icon { font-size: 1.5rem; }

.bld-seg { display: flex; border: 1.5px solid var(--panel-line); border-radius: 10px; overflow: hidden; }
.bld-seg-wrap { flex-wrap: wrap; }
.bld-seg button, .bld-chips button, .bld-tabs button {
  flex: 1; min-height: 2.5rem; padding: .375rem .625rem; border: 0; background: transparent; color: var(--panel-text);
  font-size: .875rem; font-weight: 500; cursor: pointer;
}
.bld-seg button + button { border-left: 1px solid var(--panel-line); }
.bld-seg button[aria-pressed="true"], .bld-chips button[aria-pressed="true"] { background: var(--red); color: var(--white); font-weight: 700; }
.bld-chips { display: flex; flex-wrap: wrap; gap: .375rem; }
.bld-chips button { flex: 0 0 auto; border: 1.5px solid var(--panel-line); border-radius: 999px; }
.bld-chips button:disabled { opacity: .35; cursor: not-allowed; }
.bld-sizes { display: flex; flex-direction: column; gap: .5rem; }
.bld-sizes[hidden], .bld-tip[hidden] { display: none; }
.bld-tip { padding: .625rem .75rem; border-radius: 10px; background: rgb(166 58 43 / .22); border: 1px solid rgb(166 58 43 / .6); font-size: .875rem; font-weight: 600; }

.bld-toggle {
  display: inline-flex; align-items: center; gap: .625rem; justify-self: start; min-height: 2.5rem; padding: .375rem .875rem .375rem .5rem;
  border: 1.5px solid var(--panel-line); border-radius: 999px; background: transparent; color: var(--panel-text); font-size: .875rem; font-weight: 600; cursor: pointer;
}
.bld-toggle::before { content: ""; width: 1.75rem; height: 1rem; border-radius: 999px; background: rgb(255 255 255 / .2); box-shadow: inset -.75rem 0 0 2px var(--panel-bg); transition: .2s; }
.bld-toggle[aria-pressed="true"] { border-color: var(--red); }
.bld-toggle[aria-pressed="true"]::before { background: var(--red); box-shadow: inset .75rem 0 0 2px var(--panel-bg); }
.bld-toggle:disabled { opacity: .4; cursor: not-allowed; }

.bld-oplist { display: flex; flex-direction: column; gap: .375rem; }
.bld-oplist li { display: flex; align-items: center; border: 1px solid var(--panel-line); border-radius: 10px; }
.bld-oplist li.is-selected { border-color: var(--red); background: rgb(166 58 43 / .15); }
.bld-oplink { flex: 1; display: flex; justify-content: space-between; gap: .5rem; padding: .5rem .75rem; border: 0; background: none; color: var(--panel-text); font-size: .875rem; font-weight: 600; text-align: left; cursor: pointer; }
.bld-oplink span { color: var(--panel-muted); font-weight: 500; }
.bld-x { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 0; background: none; color: var(--panel-muted); cursor: pointer; }
.bld-x:hover { color: var(--white); }

.bld-tabs { display: flex; border-bottom: 1px solid var(--panel-line); }
.bld-tabs button { border-bottom: 2px solid transparent; border-radius: 0; }
.bld-tabs button[aria-selected="true"] { border-bottom-color: var(--red); color: var(--white); font-weight: 700; }
.bld-tabs button[hidden] { display: none; }
.bld-swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: .375rem; }
.bld-swatches button { aspect-ratio: 1; border-radius: 8px; border: 2px solid rgb(255 255 255 / .15); background: var(--sw); cursor: pointer; }
.bld-swatches button[aria-pressed="true"] { border-color: var(--white); box-shadow: 0 0 0 2px var(--red); }

/* ---------- Send ---------- */
.bld-recap { display: grid; gap: .375rem; padding: .875rem 1rem; border-radius: 10px; background: rgb(255 255 255 / .05); font-size: .875rem; }
.bld-recap div { display: grid; grid-template-columns: 7rem 1fr; gap: .5rem; }
.bld-recap dt { color: var(--panel-muted); }
.bld-recap dd { margin: 0; font-weight: 600; }
.bld-form { display: flex; flex-direction: column; gap: .875rem; }
.bld-form .field label, .bld-owner .field label { color: var(--panel-text); }
.bld-form .field small { color: var(--panel-muted); }
.bld-owner { display: flex; flex-direction: column; gap: .625rem; padding-top: 1rem; border-top: 1px dashed var(--panel-line); }
.bld-owner[hidden] { display: none; }
.bld-owner .btn-outline { color: var(--white); border-color: rgb(255 255 255 / .4); }
.bld-sent { align-items: flex-start; }
.bld-sent:focus { outline: none; }
.bld-check { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: #2f7a4f; color: var(--white); }
.bld-draft { padding: 1rem; border-radius: 10px; background: rgb(255 255 255 / .08); border-left: 4px solid var(--red); font-size: .9375rem; line-height: 1.5; }
.bld-draft strong { display: block; color: var(--white); }
.bld-sent .btn-link { color: var(--panel-muted); }

@media (max-width: 991px) {
  .builder { grid-template-columns: 1fr; grid-template-areas: "stage" "panel"; --stage-top: 4.5rem; }
  .bld-stage { height: min(55svh, 32rem); min-height: 18rem; z-index: 5; }
  .bld-hint { font-size: .75rem; padding: .5rem .75rem; }
  .bld-hint span { display: none; }
  .bld-chip { bottom: 2.75rem; font-size: .75rem; padding: .375rem .625rem; }
  .bld-panel { max-width: 40rem; width: 100%; margin-inline: auto; }
}
@media (max-width: 599px) {
  .bld-hide-sm { display: none; }
  .bld-tool { min-height: 2.25rem; min-width: 2.25rem; padding: .25rem .5rem; }
  .bld-toolbar { inset: .5rem .5rem auto; gap: .375rem; }
  .bld-sec { padding: 1.25rem 1rem 1.5rem; }
  .bld-row { grid-template-columns: 5.5rem 1fr auto; }
}

/* Go Inside stands out from the other toolbar buttons. */
.bld-toolbar .bld-inside { background: var(--white); color: var(--navy); }
.bld-toolbar .bld-inside:hover { background: var(--cool); }
.bld-toolbar .bld-inside[aria-pressed="true"] { background: var(--red); color: var(--white); }
.bld-inside-panel { display: inline-flex; align-items: center; gap: .5rem; }
.bld-inside-panel .icon { font-size: 1.2rem; }

/* Sizes too big for the current building: still clickable, to explain why. */
.bld-chips [aria-disabled="true"] { opacity: .4; cursor: help; }

/* Covers & add-ons */
.bld-addtypes svg { width: 2.25rem; height: 1.75rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bld-addtypes .bld-acc { stroke: #e08a7d; }
.bld-addlist { display: flex; flex-direction: column; gap: .625rem; }
.bld-addcard { display: flex; flex-direction: column; gap: .625rem; padding: .25rem .75rem .875rem; border: 1.5px solid var(--panel-line); border-radius: 12px; }
.bld-addcard.is-selected { border-color: var(--red); background: rgb(166 58 43 / .12); }
.bld-addhead { display: flex; align-items: center; margin-right: -.5rem; }
.bld-addhead .bld-oplink { padding-inline: 0; }
.bld-addcard .bld-row { grid-template-columns: 5.5rem 1fr auto; }

/* The rough-draft note that pops up on "Send my design" (send.js) */
.bld-confirm { width: min(28rem, calc(100% - 2rem)); padding: 1.5rem; border: 0; border-radius: var(--radius-lg); background: var(--white); color: var(--ink); box-shadow: 0 20px 50px rgb(22 29 39 / .3); }
.bld-confirm::backdrop { background: rgb(22 29 39 / .55); }
.bld-confirm .bld-h { color: var(--ink); }
.bld-confirm p { margin: .5rem 0 1.25rem; }