/* Configurator entry */

.lc-config {
  display: grid;
  gap: var(--lc-space-10);
  padding-block: var(--lc-space-10) var(--lc-section-y-compact);
  align-items: start;
}

@media (min-width: 1024px) {
  .lc-config { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--lc-space-12); }
  .lc-config__aside { position: sticky; top: calc(var(--lc-header-h) + var(--lc-space-6)); }
}

.lc-config__form {
  display: grid;
  gap: var(--lc-space-10);
  padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-lg);
  background: var(--lc-surface-raised);
  box-shadow: var(--lc-shadow-sm);
}

.lc-config__step {
  display: grid;
  gap: var(--lc-space-4);
}

.lc-config__step-head {
  display: flex;
  align-items: baseline;
  gap: var(--lc-space-3);
}

.lc-config__step-head legend,
.lc-config__step-head h2 {
  padding: 0;
  margin: 0;
  font-size: var(--lc-text-lg);
  font-weight: var(--lc-weight-semibold);
}

.lc-config__options {
  display: grid;
  gap: var(--lc-space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
}

.lc-config__options--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.lc-config__options .lc-option { padding: var(--lc-space-4); align-content: start; }
.lc-config__options .lc-option .lc-icon { color: var(--lc-text-muted); }
.lc-config__options .lc-option:has(input:checked) .lc-icon { color: var(--lc-accent-text); }

.lc-config__dims {
  display: grid;
  gap: var(--lc-space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lc-config__submit {
  display: grid;
  gap: var(--lc-space-4);
  padding-top: var(--lc-space-6);
  border-top: 1px solid var(--lc-border);
}

/* Journey timeline */
.lc-journey {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lc-journey li {
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: var(--lc-space-3);
  align-items: start;
  padding: var(--lc-space-4) 0;
}

.lc-journey li + li { border-top: 1px solid var(--lc-border); }

.lc-journey__num {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--lc-border-strong);
  border-radius: var(--lc-radius-xs);
  font-family: var(--lc-font-mono);
  font-size: var(--lc-text-xs);
  color: var(--lc-text-muted);
}

.lc-journey li.is-here .lc-journey__num {
  border-color: var(--lc-accent);
  background: var(--lc-accent);
  color: var(--lc-on-accent);
}

.lc-journey strong { display: block; font-size: var(--lc-text-sm); }
.lc-journey span.lc-journey__text { display: block; font-size: var(--lc-text-xs); color: var(--lc-text-subtle); margin-top: 0.15rem; }

/* Outputs grid */
.lc-outputs {
  display: grid;
  gap: 1px;
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-md);
  overflow: hidden;
  background: var(--lc-border);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.lc-outputs > div {
  display: grid;
  gap: var(--lc-space-2);
  align-content: start;
  padding: var(--lc-space-6);
  background: var(--lc-surface-raised);
}

.lc-outputs .lc-icon { color: var(--lc-accent-text); margin-bottom: var(--lc-space-2); }
.lc-outputs strong { font-size: var(--lc-text-md); }
.lc-outputs p { margin: 0; color: var(--lc-text-muted); font-size: var(--lc-text-sm); }

/* Pixel pitch explainer */
.lc-pitch-demo {
  display: grid;
  gap: var(--lc-space-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 479px) {
  .lc-pitch-demo { gap: var(--lc-space-3); }
  .lc-pitch-demo figcaption { font-size: var(--lc-text-xs); }
}

.lc-pitch-demo figure {
  margin: 0;
  display: grid;
  gap: var(--lc-space-3);
}

.lc-pitch-demo__swatch {
  aspect-ratio: 4 / 3;
  border-radius: var(--lc-radius-sm);
  border: 1px solid var(--lc-border);
  background-color: #0b0c0e;
  background-image: radial-gradient(circle at center, var(--lc-signal-400) var(--dot), transparent calc(var(--dot) + 0.6px));
  background-size: var(--gap) var(--gap);
}

.lc-pitch-demo figcaption { font-size: var(--lc-text-sm); color: var(--lc-text-muted); }
.lc-pitch-demo figcaption strong { display: block; color: var(--lc-text); }

.lc-pitch-note { margin-top: var(--lc-space-5); }

/* ---------- Stepper ---------- */
.lc-stepper { gap: var(--lc-space-8); }

.lc-stepper__progress {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: lc-progress;
}

.lc-stepper.is-enhanced .lc-stepper__progress {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--lc-space-2);
}

.lc-stepper__progress li {
  position: relative;
  display: grid;
  gap: var(--lc-space-2);
  padding-top: var(--lc-space-3);
  border-top: 2px solid var(--lc-border-strong);
  color: var(--lc-text-subtle);
  font-size: var(--lc-text-xs);
  transition: border-color var(--lc-dur-slow) var(--lc-ease), color var(--lc-dur) var(--lc-ease);
}

.lc-stepper__progress li.is-done { border-top-color: color-mix(in srgb, var(--lc-accent) 55%, transparent); color: var(--lc-text-muted); }
.lc-stepper__progress li[aria-current="step"] { border-top-color: var(--lc-accent); color: var(--lc-text); }
.lc-stepper__dot { font-family: var(--lc-font-mono); font-size: var(--lc-text-2xs); letter-spacing: 0.08em; }

@media (max-width: 639px) {
  .lc-stepper__label { display: none; }
  .lc-stepper__progress li[aria-current="step"] .lc-stepper__label { display: block; position: absolute; left: 0; top: calc(100% + 0.2rem); white-space: nowrap; }
  .lc-stepper.is-enhanced .lc-stepper__progress { margin-bottom: var(--lc-space-4); }
}

.lc-stepper__panel { display: grid; gap: var(--lc-space-5); margin: 0; padding: 0; border: 0; min-width: 0; }
.lc-stepper__panel[hidden] { display: none; }
.lc-stepper.is-enhanced .lc-stepper__panel.is-current { animation: lc-rise 0.5s var(--lc-ease-out) both; }

.lc-stepper .lc-stepper__legend {
  display: flex;
  align-items: baseline;
  gap: var(--lc-space-3);
  padding: 0;
  margin: 0;
  font-size: var(--lc-text-xl);
  font-weight: var(--lc-weight-semibold);
  letter-spacing: var(--lc-tracking-tight);
}

.lc-stepper__legend:focus-visible { box-shadow: none; outline: none; }

/* Without JS: navigation is hidden, every step and the submit button stay visible. */
.lc-stepper__nav { display: none; }
.lc-stepper.is-enhanced .lc-stepper__nav { display: flex; justify-content: space-between; gap: var(--lc-space-3); padding-top: var(--lc-space-6); border-top: 1px solid var(--lc-border); }
.lc-stepper.is-enhanced .lc-stepper__nav [hidden] { display: none; }
.lc-stepper__nav .lc-btn:disabled { opacity: 0.35; cursor: default; }
.lc-stepper.is-enhanced .lc-stepper__summary:not([hidden]) ~ .lc-stepper__nav { border-top: 0; padding-top: 0; }
.lc-config__submit[hidden] { display: none; }

.lc-config__dims-layout { display: grid; gap: var(--lc-space-6); align-items: end; }

@media (min-width: 768px) {
  .lc-config__dims-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.lc-config__dims .lc-hint { grid-column: 1 / -1; }

/* Journey sync */
.lc-journey li.is-here .lc-journey__num { border-color: var(--lc-accent); background: var(--lc-accent); color: var(--lc-on-accent); }
.lc-journey li.is-done .lc-journey__num { border-color: var(--lc-accent); color: var(--lc-accent-text); }
.lc-journey li { transition: opacity var(--lc-dur) var(--lc-ease); }