/* ==========================================================================
   FORMULA SPEED — configurator
   Controls on the left, a live preview pinned on the right. The preview is
   real today (base + finish render) with a labelled slot where the 3D viewer
   will mount. Loads after fs-form.css.
   ========================================================================== */

.cfg { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: stretch; }
@media (min-width: 1060px) {
  .cfg { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

/* ---------- LEFT: the control panel ---------- */
.cfg-panel { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); min-width: 0; }

.cfg-step {
  display: grid;
  gap: clamp(.8rem, 1.6vw, 1.1rem);
  padding-bottom: clamp(1.4rem, 3vw, 2.2rem);
  border-bottom: 1px solid var(--rule);
}
.cfg-step:last-of-type { border-bottom: 0; }

.cfg-head { display: flex; align-items: baseline; gap: .85rem; flex-wrap: wrap; }
.cfg-head b {
  font-family: var(--ff-display);
  font-variation-settings: 'wdth' 118, 'wght' 860;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  letter-spacing: -.05em;
  line-height: .85;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--accent, var(--p3));
  flex-shrink: 0;
}
.cfg-head span {
  font-family: var(--ff-display);
  font-variation-settings: 'wdth' 108, 'wght' 780;
  font-size: clamp(1.25rem, 2.3vw, 1.75rem);
  letter-spacing: -.035em; line-height: 1.18;
}
.cfg-hint { font-size: .85rem; color: var(--vapour); }

/* Option tiles */
.cfg-opts { display: grid; gap: .55rem; }
@media (min-width: 560px) {
  .cfg-opts.c2 { grid-template-columns: repeat(2, 1fr); }
  .cfg-opts.c3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 560px) and (max-width: 1059px) { .cfg-opts.c4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1300px) { .cfg-opts.c4 { grid-template-columns: repeat(2, 1fr); } }

.cfg-opt {
  position: relative;
  display: grid; gap: .25rem; align-content: start;
  padding: .95rem 1.1rem .95rem 2.6rem;
  background: var(--tunnel);
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: background var(--t-quick) var(--e-out), border-color var(--t-quick) var(--e-out);
}
.cfg-opt:hover { background: var(--plenum); border-color: var(--rule-2); }
.cfg-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.cfg-opt::before {
  content: '';
  position: absolute; left: 1rem; top: 1.15rem;
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid var(--rule-2);
  transition: border-color var(--t-base) var(--e-out);
}
.cfg-opt::after {
  content: '';
  position: absolute; left: calc(1rem + 4px); top: calc(1.15rem + 4px);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent, var(--p7));
  transform: scale(0);
  transition: transform var(--t-base) var(--e-out);
}
.cfg-opt:has(input:checked) { background: var(--panel); border-color: var(--accent, var(--p7)); }
.cfg-opt:has(input:checked)::before { border-color: var(--accent, var(--p7)); }
.cfg-opt:has(input:checked)::after { transform: scale(1); }
.cfg-opt:has(input:focus-visible) { outline: 2px solid var(--p3); outline-offset: 2px; }

.cfg-opt .t {
  font-family: var(--ff-display);
  font-variation-settings: 'wdth' 108, 'wght' 760;
  font-size: 1rem; letter-spacing: -.025em; color: var(--chalk);
}
.cfg-opt .d { font-size: .82rem; color: var(--mist); line-height: 1.45; }

/* Finish chips inside the panel */
.cfg-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.cfg-chip {
  position: relative;
  width: 34px; height: 34px;
  border: 1px solid var(--rule-2);
  background: var(--sw, #888);
  cursor: pointer; padding: 0;
  transition: transform var(--t-quick) var(--e-out);
}
.cfg-chip:hover { transform: translateY(-2px); }
.cfg-chip[aria-pressed="true"]::after {
  content: ''; position: absolute; inset: -5px; border: 1px solid var(--p7);
}
.cfg-chip:focus-visible { outline: 2px solid var(--p3); outline-offset: 3px; }

/* ---------- RIGHT: the pinned preview ---------- */
.cfg-stage { display: grid; align-content: start; }

/* The column fills the row; the inner wrapper is what pins, so the preview
   travels with the visitor through every step instead of scrolling away. */
.cfg-stage { align-self: stretch; }
.cfg-pin { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 1060px) {
  .cfg-pin { position: sticky; top: calc(var(--nav-h) + 1.4rem); }
}

/* The compact pinned variant below the split is defined at the end of this
   file, after .cfg-sum, so its overrides actually win on source order. */

.cfg-view {
  position: relative;
  aspect-ratio: 16 / 10;
  background: radial-gradient(70% 60% at 50% 45%, #141B24 0%, var(--void) 100%);
  overflow: hidden;
}
.cfg-view img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 380ms var(--e-out);
}
.cfg-view img.live { opacity: 1; }

/* The slot where the real-time 3D viewer will mount */
.cfg-3d {
  position: absolute; left: 0; bottom: 0;
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem .75rem;
  background: rgba(4, 6, 10, .78);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  font-size: .78rem;
  color: var(--p5);
}
.cfg-3d i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--p5); flex-shrink: 0;
  animation: pulse 2.2s var(--e-soft) infinite;
}
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* Screen rig drawn over the preview, reflecting the chosen count */
.cfg-screens {
  position: absolute; left: 50%; top: 13%;
  transform: translateX(-50%);
  display: flex; gap: 5px; align-items: flex-end;
  pointer-events: none;
}
.cfg-screens i {
  display: block;
  width: clamp(34px, 7vw, 62px);
  height: clamp(22px, 4.4vw, 40px);
  border: 1px solid var(--p3);
  background: rgba(0, 187, 198, .10);
  opacity: 0;
  transform: translateY(-6px) scale(.94);
  transition: opacity 320ms var(--e-out), transform 380ms var(--e-out);
}
.cfg-screens i.on { opacity: 1; transform: none; }
.cfg-screens i:first-child { transform-origin: right; }
.cfg-screens i:last-child  { transform-origin: left; }
.cfg-screens i.side { width: clamp(22px, 4.6vw, 40px); }

/* Motion badge */
.cfg-badge {
  position: absolute; right: 0; top: 0;
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .8rem;
  background: rgba(4, 6, 10, .8);
  backdrop-filter: blur(8px);
  border-left: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: .8rem;
  color: var(--mist);
}
.cfg-badge b { color: var(--chalk); font-variation-settings: 'wght' 700; }
.cfg-badge.dyn { color: var(--p7); }
.cfg-badge.dyn b { color: var(--p7); }

/* Live summary under the preview */
.cfg-sum { background: var(--tunnel); padding: clamp(1.1rem, 2.2vw, 1.6rem); display: grid; gap: .7rem; }
.cfg-row { display: grid; grid-template-columns: 12ch 1fr; gap: .8rem; align-items: baseline; }
.cfg-row dt { font-size: .85rem; color: var(--vapour); }
.cfg-row dd {
  margin: 0; font-size: .92rem; color: var(--chalk);
  font-variation-settings: 'wght' 600;
}
.cfg-row dd.empty { color: var(--vapour); font-variation-settings: 'wght' 400; font-style: italic; }

.cfg-total {
  background: var(--plenum);
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.cfg-total p { font-size: .88rem; color: var(--vapour); margin: 0; }
.cfg-total .done {
  font-family: var(--ff-display);
  font-variation-settings: 'wdth' 114, 'wght' 820;
  font-size: clamp(1.1rem, 2vw, 1.5rem); letter-spacing: -.035em;
  color: var(--chalk); font-feature-settings: 'tnum' 1;
}
.cfg-total .done.full { color: var(--p7); }

/* Progress rail across the top of the panel */
.cfg-prog { display: flex; gap: 4px; margin-bottom: .4rem; }
.cfg-prog i {
  flex: 1; height: 3px; background: rgba(150, 180, 214, .16);
  position: relative; overflow: hidden;
}
.cfg-prog i::after {
  content: ''; position: absolute; inset: 0;
  background: var(--p7);
  transform: scaleX(0); transform-origin: left;
  transition: transform 420ms var(--e-out);
}
.cfg-prog i.done::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .cfg-view img, .cfg-screens i, .cfg-prog i::after { transition: none; }
  .cfg-3d i { animation: none; opacity: 1; }
}

/* ==========================================================================
   Below the split: the preview pins to the TOP and comes first. Configuring
   with the result off-screen defeats the point of a live preview. Declared
   last so these overrides beat the base rules on source order.
   ========================================================================== */
@media (max-width: 1059px) {
  .cfg-stage { order: -1; }
  .cfg-pin {
    position: sticky;
    top: var(--nav-h);
    z-index: 6;
    box-shadow: 0 20px 34px -24px rgba(0, 0, 0, .95);
  }
  .cfg-view { aspect-ratio: 16 / 7; }
  /* The full summary lives at the foot of the panel instead, so the pinned
     block stays short enough to leave the controls usable. */
  .cfg-sum { display: none; }
  .cfg-total { padding: .6rem .9rem; }
  .cfg-total p { font-size: .8rem; }
  .cfg-total .done { font-size: 1rem; }
  .cfg-3d { font-size: .7rem; padding: .4rem .6rem; }
  .cfg-badge { font-size: .72rem; padding: .4rem .6rem; }
}