/* /custom/ — the builder's page styles. Tokens and panels from wp.css; the
   .wrap sheet, .head/.eyebrow/.title/.lede from shop.css. Only what the
   builder itself needs lives here. */

.cb__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
}
@media (max-width: 56rem) { .cb__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- stage */
.cb__stage { position: sticky; top: calc(var(--wp-chrome-h) + 1rem); display: flex; flex-direction: column; gap: 0.8rem; }
@media (max-width: 56rem) { .cb__stage { position: static; } }

.cb__view { position: relative; padding: 0.6rem; }
.cb__viewbar, .cb__3dbar { display: flex; align-items: center; gap: 0.4rem; }
.cb__3dbar { position: absolute; left: 0.9rem; bottom: 0.9rem; z-index: 2; }
.cb__vbtn, .cb__tbtn {
  font-family: var(--wp-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.4rem 0.7rem; border: 1px solid var(--wp-rule); background: transparent; color: var(--wp-bone-dim); cursor: pointer;
}
.cb__vbtn[aria-selected="true"], .cb__tbtn[aria-pressed="true"] { color: var(--wp-void); background: var(--wp-brass); border-color: var(--wp-brass); }
.cb__dims { margin-left: auto; font-family: var(--wp-mono); font-size: 0.66rem; letter-spacing: 0.1em; color: var(--wp-brass); }

.cb__pane[hidden] { display: none; }
.cb__pane { position: relative; margin-top: 0.6rem; aspect-ratio: 4 / 3; }
.cb__svg { width: 100%; height: 100%; display: block; }
.cb__svg .cb__outer { stroke: var(--wp-bone); stroke-width: 0.03; }
.cb__svg .cb__inner { fill: rgba(4, 7, 10, 0.55); stroke: var(--wp-brass); stroke-width: 0.02; stroke-dasharray: 0.08 0.06; }
.cb__svg .cb__eng { fill: rgba(10, 6, 4, 0.85); font-family: var(--wp-display); font-weight: 700; letter-spacing: 0.04em; }
.cb__svg .cb__label { fill: var(--wp-bone-faint); font-family: var(--wp-mono); letter-spacing: 0.02em; }
.cb__svg .cb__layer { stroke: rgba(0, 0, 0, 0.55); stroke-width: 0.015; }
.cb__svg .cb__layer--top, .cb__svg .cb__layer--base { stroke: var(--wp-bone); }
.cb__svg .cb__void { fill: rgba(4, 7, 10, 0.6); }

.cb__canvas { width: 100%; height: 100%; display: block; outline: none; touch-action: none; }
.cb__no3d[hidden] { display: none; }
.cb__no3d { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 1rem; text-align: center; color: var(--wp-bone-dim); font-family: var(--wp-body); }

.cb__facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.5rem 1rem; font-family: var(--wp-body); }
.cb__facts div { border-top: 1px solid var(--wp-rule); padding-top: 0.4rem; }
.cb__facts dt { font-family: var(--wp-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp-bone-faint); }
.cb__facts dd { margin: 0.15rem 0 0; color: var(--wp-bone); font-size: 0.92rem; }

/* ----------------------------------------------------------- console */
.cb__console { display: flex; flex-direction: column; gap: 0.9rem; }
.cb__step { margin: 0; padding: 1rem 1.1rem 1.1rem; border-radius: 0; min-width: 0; }
.cb__legend { font-family: var(--wp-mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wp-brass); padding: 0 0.4rem; }
.cb__legend span { display: inline-block; min-width: 1.4em; text-align: center; border: 1px solid var(--wp-brass-dim); margin-right: 0.3em; }
.cb__mini { margin: 0.6rem 0 0; font-family: var(--wp-body); font-size: 0.82rem; line-height: 1.5; color: var(--wp-bone-dim); }
.cb__mini.is-bad { color: #e08a78; }

.cb__radios { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cb__radio { flex: 1 1 14rem; display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.7rem 0.8rem; border: 1px solid var(--wp-rule); cursor: pointer; font-family: var(--wp-body); color: var(--wp-bone-dim); }
.cb__radio:has(input:checked) { border-color: var(--wp-brass); color: var(--wp-bone); }
.cb__radio input { margin: 0.25rem 0 0; accent-color: var(--wp-brass); }
.cb__radio b { display: block; font-weight: 600; }
.cb__radio small { display: block; font-size: 0.76rem; line-height: 1.4; color: var(--wp-bone-faint); }

.cb__shapes { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); gap: 0.5rem; }
.cb__shape { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.6rem 0.3rem; border: 1px solid var(--wp-rule); background: transparent; color: var(--wp-bone-dim); cursor: pointer; font-family: var(--wp-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; }
.cb__shape svg { width: 2.6rem; height: 2.6rem; fill: rgba(168, 207, 214, 0.12); stroke: currentColor; stroke-width: 1.2; }
.cb__shape[aria-pressed="true"] { border-color: var(--wp-brass); color: var(--wp-brass-bright); }
.cb__shape[aria-pressed="true"] svg { fill: rgba(168, 207, 214, 0.28); }

.cb__sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.5rem; margin-bottom: 0.7rem; }
.cb__size { text-align: left; padding: 0.55rem 0.7rem; border: 1px solid var(--wp-rule); background: transparent; color: var(--wp-bone-dim); cursor: pointer; font-family: var(--wp-body); }
.cb__size b { display: block; color: var(--wp-bone); font-weight: 600; }
.cb__size small { display: block; font-size: 0.72rem; line-height: 1.35; color: var(--wp-bone-faint); }
.cb__size[aria-pressed="true"] { border-color: var(--wp-brass); }

.cb__dimrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.6rem; margin-bottom: 0.7rem; }
.cb__field { display: flex; flex-direction: column; gap: 0.3rem; font-family: var(--wp-body); color: var(--wp-bone-dim); font-size: 0.85rem; min-width: 0; }
.cb__field small { color: var(--wp-bone-faint); font-size: 0.72rem; }
.cb__field input, .cb__field textarea {
  width: 100%; box-sizing: border-box; padding: 0.55rem 0.65rem; border: 1px solid var(--wp-rule); background: rgba(4, 7, 10, 0.6);
  color: var(--wp-bone); font-family: var(--wp-body); font-size: 0.95rem;
}
.cb__field input:focus, .cb__field textarea:focus { outline: 2px solid var(--wp-brass); outline-offset: 1px; border-color: transparent; }
.cb__field textarea { resize: vertical; }

.cb__woods { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.5rem; margin-bottom: 0.8rem; }
.cb__wood { display: flex; align-items: center; gap: 0.6rem; text-align: left; padding: 0.5rem 0.6rem; border: 1px solid var(--wp-rule); background: transparent; color: var(--wp-bone-dim); cursor: pointer; font-family: var(--wp-body); }
.cb__wood i { flex: none; width: 1.8rem; height: 1.8rem; border: 1px solid rgba(255, 255, 255, 0.15); background-image: repeating-linear-gradient(100deg, rgba(0,0,0,0.12) 0 2px, transparent 2px 5px); }
.cb__wood b { display: block; color: var(--wp-bone); font-weight: 600; font-size: 0.88rem; }
.cb__wood small { display: block; font-size: 0.7rem; line-height: 1.3; color: var(--wp-bone-faint); }
.cb__wood[aria-pressed="true"] { border-color: var(--wp-brass); }

.cb__finishes { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0.5rem; }
.cb__finish { text-align: left; padding: 0.5rem 0.65rem; border: 1px solid var(--wp-rule); background: transparent; color: var(--wp-bone-dim); cursor: pointer; font-family: var(--wp-body); }
.cb__finish b { display: block; color: var(--wp-bone); font-weight: 600; font-size: 0.88rem; }
.cb__finish small { display: block; font-size: 0.7rem; color: var(--wp-bone-faint); }
.cb__finish[aria-pressed="true"] { border-color: var(--wp-brass); }

.cb__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cb__send { width: 100%; margin-top: 0.4rem; }
.cb__flash { margin: 0; padding: 0.7rem 1rem; border: 1px solid var(--wp-brass-dim); font-family: var(--wp-body); color: var(--wp-bone); }
.cb__flash.is-bad { border-color: #a24a3a; color: #f0b3a4; }
.cb__closed { padding: 1rem 1.2rem; font-family: var(--wp-body); }
.cb__closed a { color: var(--wp-brass); }