/**
 * Structural styles for the wizard (T11, substantially expanded in a post-launch GUI pass): the
 * progress bar, the camera schematic, the step card shell, and every component's own BEM classes
 * (T12-T18 shipped a lot of class names with no matching CSS at all -- this file is the pass that
 * finally styles all of them). Built on assets/css/tokens.css's custom properties. `.wizard` itself
 * assumes it's mounted inside the site's normal header/nav/footer chrome (base.css) -- it does not
 * redefine page-level layout.
 */

.wizard {
  /* Matches base.css's .container/.site-header/.site-footer__inner content width -- the wizard
     used to feel cramped at a narrower 760px while sitting inside the site's full-width chrome.
     Same "white content card on the textured page body" treatment as .container (base.css) --
     the wizard has its own top-level wrapper rather than using .container itself, so it needs the
     same background/shadow applied directly here. */
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-9);
  background: var(--color-paper);
  box-shadow: var(--shadow-panel);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  font-family: var(--font-body);
  color: var(--color-ink);
}

/* ---------- Progress bar: numbered marker + short label per step ---------- */

.wizard-progress {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  position: relative;
}

.wizard-progress::before {
  content: '';
  position: absolute;
  top: 1.1rem;
  /* Half of one step's column, so the line starts/ends at the first/last marker's center for any
     step count -- ProgressBar.js sets --wizard-progress-inset from the active flow's length (D-062). */
  left: var(--wizard-progress-inset, 5%);
  right: var(--wizard-progress-inset, 5%);
  height: 2px;
  background: var(--color-line);
  z-index: 0;
}

.wizard-progress__step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}

.wizard-progress__marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  background: var(--color-paper);
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-small);
  flex-shrink: 0;
  cursor: pointer;
  padding: 0;
}

.wizard-progress__marker:disabled {
  cursor: default;
}

.wizard-progress__marker:not(:disabled):hover,
.wizard-progress__marker:not(:disabled):focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
  outline: none;
}

.wizard-progress__label {
  font-size: var(--text-eyebrow);
  color: var(--color-ink-muted);
  line-height: 1.2;
  max-width: 6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wizard-progress__step.is-active .wizard-progress__marker {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: 700;
}

.wizard-progress__step.is-active .wizard-progress__label {
  color: var(--color-ink);
  font-weight: 700;
}

.wizard-progress__step.is-done .wizard-progress__marker {
  border-color: var(--color-ink-muted);
  background: var(--color-paper-dim);
  color: var(--color-ink);
}

@media (max-width: 640px) {
  .wizard-progress__label {
    display: none;
  }
}

/* ---------- Dynamic system block diagram ---------- */

.camera-diagram {
  padding-bottom: var(--space-2);
  overflow-x: auto;
}

.camera-diagram__svg {
  /* Matches .wizard's own width -- was capped at 720px, which read as a narrow island once the
     wizard itself was widened to match the page (see the layout-width fix earlier). */
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  min-width: 360px;
}

.camera-diagram__svg * {
  transition: stroke 0.25s ease, fill 0.25s ease;
}

.camera-diagram__enclosure {
  fill: none;
  stroke: var(--color-line);
  stroke-width: 2;
  stroke-dasharray: 6 5;
}

.camera-diagram__enclosure.is-active {
  stroke: var(--color-accent);
  fill: #fdece9;
}

.camera-diagram__block,
.camera-diagram__processing,
.camera-diagram__output {
  fill: var(--color-paper);
  stroke: var(--color-ink-muted);
  stroke-width: 2.5;
}

.camera-diagram__optics circle {
  fill: none;
  stroke: var(--color-ink-muted);
  stroke-width: 3;
}

.camera-diagram__illumination rect {
  fill: var(--color-ink-muted);
  stroke: none;
}

.camera-diagram__illumination circle {
  fill: none;
  stroke: var(--color-ink-muted);
  stroke-width: 2;
  stroke-dasharray: 2 3;
}

.camera-diagram__wire {
  stroke: var(--color-ink-muted);
  stroke-width: 2;
  fill: none;
}

.camera-diagram__label {
  font-family: var(--font-body);
  font-size: 11px;
  fill: var(--color-ink);
  stroke: none;
}

.camera-diagram__link-label {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: var(--color-ink-muted);
  stroke: none;
}

/* Background pill behind each 2-line link label -- rendered in the same final SVG pass as the text
   itself (General item c: "it should be in the front"), so a label is legible even where a wire
   happens to cross behind it, rather than the bare text competing visually with whatever's under it. */
.camera-diagram__link-label-bg {
  fill: var(--color-paper);
  fill-opacity: 0.92;
  stroke: var(--color-line);
  stroke-width: 1;
}

/* Active state: every part flips to the brand accent regardless of which shape it is. */
.camera-diagram__part.is-active,
.camera-diagram__part.is-active circle,
.camera-diagram__part.is-active rect {
  stroke: var(--color-accent);
}

.camera-diagram__part.is-active.camera-diagram__illumination rect {
  fill: var(--color-accent);
}

/* Small solid-filled marker circles (per-sensor and global light/audio badges) -- deliberately
   distinct from .camera-diagram__illumination's dashed sun-ray circle above, which would make a
   solid marker invisible if the two shared a selector. */
.camera-diagram__mini-badge circle {
  fill: var(--color-paper);
  stroke: var(--color-ink-muted);
  stroke-width: 1.5;
}

.camera-diagram__part.is-active.camera-diagram__mini-badge circle {
  fill: var(--color-accent);
  stroke: var(--color-accent);
}

.camera-diagram__badge-text {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  fill: var(--color-ink-muted);
  stroke: none;
}

.camera-diagram__part.is-active .camera-diagram__badge-text {
  fill: var(--color-accent-ink);
}

/* ---------- Step container: the card each step's own fields render inside ---------- */

.wizard-step {
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  min-height: 12rem;
}

.wizard-step h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  margin: 0 0 var(--space-2);
}

.wizard-step > p:first-of-type {
  color: var(--color-ink-muted);
  margin-bottom: var(--space-5);
}

.wizard-step__empty-hint {
  color: var(--color-ink-muted);
  font-size: var(--text-small);
  margin-top: var(--space-3);
}

.wizard-step__hint {
  background: var(--color-paper-dim);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  color: var(--color-ink-muted);
  font-size: var(--text-small);
  margin-bottom: var(--space-4);
}

/* ---------- Step nav: Back / Next|Submit ---------- */

.wizard-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.wizard-nav__right {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Rows of buttons and chips wrap instead of widening the page (base.css makes .btn nowrap, so a
   row of them has no other way to fit a narrow window), and a single long button label may wrap
   inside its button rather than overflow it. */
.wizard .btn {
  max-width: 100%;
  white-space: normal;
}

/* Step heading + an inline action button, e.g. Processing's "Auto-build a minimal pipeline"
   button sitting right next to the "Processing chain" heading (item "Processing" a). */
.wizard-step__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.wizard-step__title-row h2,
.wizard-step__title-row h3 {
  margin: 0;
}

.documentation-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.documentation-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-paper-dim);
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
}

.btn {
  border-radius: var(--radius-sm);
}

.btn--small {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-small);
}

.btn--danger {
  background: #fff;
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.btn--danger:hover,
.btn--danger:focus-visible {
  background: var(--color-danger);
  color: #fff;
}

.btn--text {
  background: none;
  color: var(--color-ink-muted);
  text-decoration: underline;
  text-decoration-color: var(--color-line);
  padding-inline: var(--space-2);
}

.btn--text:hover,
.btn--text:focus-visible {
  color: var(--color-ink);
}

.btn--chip {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: #fff;
  color: var(--color-ink);
  font-size: var(--text-small);
}

.btn--chip:hover,
.btn--chip:focus-visible {
  border-color: var(--color-ink-muted);
}

.btn--chip.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}

/* ---------- Form controls: consistent base styling for every native control in the wizard ---------- */

.wizard-step input[type="text"],
.wizard-step input[type="number"],
.wizard-step input[type="email"],
.wizard-step input[type="password"],
.wizard-step select,
.wizard-step textarea {
  display: block;
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-body);
  color: var(--color-ink);
  background: #fff;
}

.wizard-step input[type="range"] {
  width: 100%;
}

.wizard-step textarea {
  min-height: 5rem;
  resize: vertical;
}

.wizard-step input:focus-visible,
.wizard-step select:focus-visible,
.wizard-step textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}

.wizard-step input::placeholder,
.wizard-step textarea::placeholder {
  color: var(--color-ink-muted);
}

/* ---------- Grouped fieldset sections (Step 3, ImageSourceCard) ---------- */

.wizard-step__section,
.image-source-card__section {
  /* A <fieldset> defaults to min-width: min-content, so one long, unbreakable child (a select
     with a long option, a nowrap row) widened the whole step past the page. */
  min-width: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-4) var(--space-4);
  margin-bottom: var(--space-5);
}

.wizard-step__section:last-child,
.image-source-card__section:last-child {
  margin-bottom: 0;
}

.wizard-step__section legend,
.image-source-card__section legend {
  padding: 0 var(--space-2);
  margin-left: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  font-weight: 700;
}

/* ---------- Label + control rows: the two conventions used across the wizard ---------- */

.wizard-field,
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.wizard-field:last-child,
.field:last-child {
  margin-bottom: 0;
}

.wizard-field label,
.field > span:first-child {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-weight: 700;
  font-size: var(--text-small);
  color: var(--color-ink);
}

.wizard-field--checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-3);
  font-weight: 400;
}

.wizard-field--checkbox input[type="checkbox"] {
  width: auto;
  margin-top: 3px;
  flex-shrink: 0;
}

.field__hint,
.field__help,
.wizard-field .field__hint {
  font-size: var(--text-small);
  color: var(--color-ink-muted);
  font-weight: 400;
}

.field__error {
  color: var(--color-danger);
  font-size: var(--text-small);
}

.wizard-toggle {
  display: flex;
  gap: var(--space-5);
  margin-bottom: var(--space-4);
}

.wizard-toggle label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  cursor: pointer;
}

.wizard-toggle input[type="radio"] {
  width: auto;
}

/* ---------- Optics form: a tidy 2-column grid instead of a long single column ---------- */

.optics-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--space-5);
}

@media (min-width: 640px) {
  .optics-form {
    grid-template-columns: 1fr 1fr;
  }

  .wizard-field--wide {
    grid-column: 1 / -1;
  }
}

/* Compact "these belong on one line" field groups (e.g. Image Source type/resolution/frame rate,
   Output data-type/sub-format/compression) -- stacks to one column on narrow viewports. */
.wizard-field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--space-4);
}

@media (min-width: 780px) {
  .wizard-field-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Resolution/frame-rate fields (Step 3 output, Step 1 per-source operating point) ---------- */

.resolution-framerate-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--space-5);
}

@media (min-width: 640px) {
  .resolution-framerate-fields {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Shared card shell (light sources, config-summary rows) ---------- */

.wizard-card {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}

.wizard-card:last-child {
  margin-bottom: 0;
}

.wizard-card h3,
.wizard-card h4 {
  margin-bottom: var(--space-2);
}

/* ---------- Image source card (Step 1) ---------- */

.image-source-card,
.optics-source-card {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  overflow: hidden;
}

.image-source-card__header,
.optics-source-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-paper-dim);
}

.image-source-card__toggle,
.optics-source-card__toggle {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
  text-align: left;
}

.image-source-card__toggle h3,
.optics-source-card__toggle h3 {
  margin-bottom: 0;
  font-size: 1.05rem;
  white-space: nowrap;
}

.image-source-card__toggle::after,
.optics-source-card__toggle::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-ink-muted);
  border-bottom: 2px solid var(--color-ink-muted);
  transform: rotate(45deg);
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.image-source-card__toggle[aria-expanded="true"]::after,
.optics-source-card__toggle[aria-expanded="true"]::after {
  transform: rotate(-135deg);
}

.image-source-card__summary,
.optics-source-card__summary {
  color: var(--color-ink-muted);
  font-size: var(--text-small);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-source-card__header-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.image-source-card__body,
.optics-source-card__body {
  padding: var(--space-5);
}

.wizard-field-group-label {
  display: block;
  font-weight: 700;
  font-size: var(--text-small);
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}

/* Aligned label:value spec output (item 7) -- see components/SpecList.js. Both columns size to
   their content (not label/1fr) so the value column right-aligns against itself, ledger-style, per
   the fifth feature wave's own general note ("left align the text and right align the values"),
   instead of stretching to the panel's full width. fit-content(50%) rather than max-content: a
   long value (e.g. the "does not fit" bandwidth message) wraps at half the panel instead of
   pushing the panel, and the whole step, wider than the page. */
.spec-list {
  display: grid;
  grid-template-columns: fit-content(50%) fit-content(50%);
  column-gap: var(--space-5);
  row-gap: var(--space-1);
  margin: 0;
}

.spec-list__group {
  grid-column: 1 / -1;
  margin: var(--space-3) 0 0;
  font-weight: 700;
  font-size: var(--text-small);
  color: var(--color-ink);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.spec-list__group:first-child {
  margin-top: 0;
}

.spec-list__label {
  color: var(--color-ink-muted);
  font-weight: 400;
  text-align: left;
}

.spec-list__value {
  margin: 0;
  min-width: 0;
  overflow-wrap: break-word;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  justify-self: end;
}

/* Phones: label above value, both full width -- two half-width columns are too narrow there. */
@media (max-width: 560px) {
  .spec-list {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  .spec-list__value {
    justify-self: start;
    text-align: left;
    margin-bottom: var(--space-2);
  }
}

.spec-list__value--muted {
  font-weight: 400;
  color: var(--color-ink-muted);
}

.spec-list__value--ok {
  color: var(--color-success);
}

.spec-list__value--warning {
  color: var(--color-warning);
}

.spec-list__value--danger {
  color: var(--color-danger);
}

.spec-list__unit {
  color: var(--color-ink-muted);
  font-weight: 400;
}

/* Boxed panel wrapper for a spec-list used as a standalone bandwidth/spec summary block. */
.spec-panel {
  background: var(--color-paper-dim);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-4);
}

/* ---------- Selected sensor summary ---------- */

.selected-sensor-summary {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-paper-dim);
}

.selected-sensor-summary__name {
  margin-bottom: var(--space-2);
}

.selected-sensor-summary p {
  font-size: var(--text-small);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-2);
}

.selected-sensor-summary .btn {
  margin-top: var(--space-2);
}

/* ---------- Sensor picker (manual sensor search) ---------- */

.sensor-picker__search {
  margin-bottom: var(--space-3);
}

.sensor-picker__filters {
  display: grid;
  /* minmax(0, ...) so a select's longest option can't force its track (and the page) wider. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

@media (min-width: 640px) {
  .sensor-picker__filters {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

.sensor-picker__filters .sensor-picker__filter--invalid {
  border-color: var(--color-danger);
}

.sensor-picker__status {
  color: var(--color-ink-muted);
  font-size: var(--text-small);
}

.sensor-picker__results {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.sensor-picker__results > li {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.sensor-picker__result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.sensor-picker__result-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sensor-picker__result-name {
  font-weight: 700;
}

.sensor-picker__result-specs {
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.sensor-picker__result-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.sensor-picker__detail {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-paper-dim);
  border-radius: var(--radius-sm);
}

.sensor-picker__detail-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-small);
  margin: 0 0 var(--space-3);
}

.sensor-picker__detail-grid dt {
  color: var(--color-ink-muted);
}

.sensor-picker__detail-grid dd {
  margin: 0;
}

.sensor-picker__detail p {
  font-size: var(--text-small);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-2);
}

.sensor-picker__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

/* ---------- Lens picker (catalog optics mode) ---------- */

.selected-sensor-summary__image {
  display: block;
  max-width: 160px;
  max-height: 120px;
  object-fit: contain;
  margin-bottom: var(--space-3);
  background: var(--color-paper);
  border-radius: var(--radius-sm);
}

.lens-picker__thumb {
  /* Enlarged from an original 56px -- the catalog list read as cramped/small at that size,
     especially now that .wizard itself is much wider. */
  width: 88px;
  height: 88px;
  object-fit: contain;
  background: var(--color-paper);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.lens-picker__match-toggle {
  align-items: center;
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.lens-picker .sensor-picker__result-name {
  font-size: var(--text-body);
}

.lens-picker__detail-image {
  display: block;
  max-width: 220px;
  max-height: 160px;
  object-fit: contain;
  margin-bottom: var(--space-3);
  background: var(--color-paper);
  border-radius: var(--radius-sm);
}

/* D-080: field-of-view search, compatibility badge, full spec sheet and lens simulation. */
.lens-picker__fov {
  margin: var(--space-3) 0;
  padding: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  min-width: 0;
}

.lens-picker__fov legend {
  padding: 0 var(--space-1);
  font-weight: 700;
  font-size: var(--text-small);
}

.lens-picker__fov-grid {
  display: grid;
  grid-template-columns: max-content minmax(0, 8rem) minmax(0, 8rem);
  gap: var(--space-2) var(--space-3);
  align-items: center;
}

.lens-picker__fov-grid input { width: 100%; min-width: 0; }

.lens-picker__fov-axis { font-size: var(--text-small); color: var(--color-ink-muted); }

.lens-picker__fov-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.lens-picker__fov-value {
  display: block;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.lens-badge {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0.05em 0.55em;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 0.75rem;
  font-weight: 700;
  vertical-align: middle;
  white-space: nowrap;
  cursor: help;
}

.lens-badge.is-ok { color: var(--color-success); }
.lens-badge.is-bad { color: var(--color-danger); }

.lens-picker__detail-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-start;
}

.lens-picker__detail-head .spec-list { flex: 1 1 320px; min-width: 0; }

.lens-picker__sim-title,
.lens-sim-section__title {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--text-body);
}

.lens-picker__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.lens-sim__graphics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.lens-sim__figure {
  margin: 0;
  padding: var(--space-2);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
}

.lens-sim__figure svg { display: block; width: 100%; height: auto; }

.lens-sim__figure figcaption {
  margin-top: var(--space-1);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
  text-align: center;
}

.lens-sim__notes {
  margin: var(--space-2) 0 0;
  padding-left: 1.1em;
}

@media (max-width: 560px) {
  .lens-picker__fov-grid { grid-template-columns: max-content minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------- Sensor recommend form (auto-select mode) ---------- */

.sensor-recommend-form__status {
  color: var(--color-ink-muted);
  font-size: var(--text-small);
}

.sensor-recommend-form__results {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.sensor-recommend-form__results > li {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.sensor-recommend-form__results p {
  margin-bottom: var(--space-2);
}

.sensor-recommend-form__results p:last-of-type {
  margin-bottom: var(--space-3);
  color: var(--color-ink-muted);
  font-size: var(--text-small);
}

/* ---------- Light source card (Step 2) ---------- */

.light-source-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.light-source-card.is-expanded .light-source-card__header {
  margin-bottom: var(--space-4);
}

.light-source-card__header h3 {
  margin-bottom: 0;
  font-size: 1.05rem;
  white-space: nowrap;
}

.light-source-card__toggle {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
  text-align: left;
}

.light-source-card__summary {
  color: var(--color-ink-muted);
  font-size: var(--text-small);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.light-source-card__toggle::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-ink-muted);
  border-bottom: 2px solid var(--color-ink-muted);
  transform: rotate(45deg);
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.light-source-card__toggle[aria-expanded="true"]::after {
  transform: rotate(-135deg);
}

/* ---------- Processing stage card (Step 4) ---------- */

.processing-stage-card {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}

.processing-stage-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.processing-stage-card__header h3 {
  margin-bottom: 0;
}

/* Collapsible stages (item "Processing" c: "it should be possible to collapse all stages" --
   a configured multi-stage chain otherwise pushes every later stage's picker far down the page).
   Mirrors .image-source-card__toggle's own chevron-in-header pattern. */
.processing-stage-card__toggle {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
  text-align: left;
}

.processing-stage-card__toggle h3 {
  margin-bottom: 0;
  white-space: nowrap;
}

.processing-stage-card__toggle::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-ink-muted);
  border-bottom: 2px solid var(--color-ink-muted);
  transform: rotate(45deg);
  margin-left: var(--space-2);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.processing-stage-card__toggle[aria-expanded="true"]::after {
  transform: rotate(-135deg);
}

.processing-stage-card__summary {
  color: var(--color-ink-muted);
  font-size: var(--text-small);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.processing-stage-card__body {
  margin-top: var(--space-4);
}

.processing-stage-card__reorder {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.processing-stage-card__type {
  margin-bottom: var(--space-4);
}

.processing-stage-card__type label {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-weight: 700;
  font-size: var(--text-small);
}

/* ---------- Compatible platform picker ---------- */

.compatible-platform-picker__status {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-paper-dim);
  color: var(--color-ink-muted);
  font-size: var(--text-small);
}

.compatible-platform-picker__status--error {
  background: #fbecea;
  color: var(--color-danger);
}

.compatible-platform-picker__status p {
  margin-bottom: var(--space-3);
}

.compatible-platform-picker__exact h4,
.compatible-platform-picker__near h4 {
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-3);
}

.compatible-platform-picker__near > p {
  font-size: var(--text-small);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-3);
}

.compatible-platform-picker__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.compatible-platform-picker__option {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  cursor: pointer;
  background: #fff;
}

.compatible-platform-picker__option input[type="radio"] {
  width: auto;
  flex-shrink: 0;
}

.compatible-platform-picker__option.is-selected {
  border-color: var(--color-accent);
  background: #fdf1ef;
}

.compatible-platform-picker__part {
  font-weight: 700;
}

.compatible-platform-picker__why,
.compatible-platform-picker__accepts,
.compatible-platform-picker__cpu,
.compatible-platform-picker__codecs {
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.processing-stage-card__modules {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--space-5);
  margin-bottom: var(--space-4);
}

@media (min-width: 640px) {
  .processing-stage-card__modules {
    grid-template-columns: 1fr 1fr;
  }
}

.compatible-platform-picker__option--near {
  display: block;
  cursor: default;
  border-left: 4px solid var(--color-warning);
}

.compatible-platform-picker__option--near .compatible-platform-picker__part {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.compatible-platform-picker__badge {
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  background: var(--color-warning);
  color: #fff;
  padding: 2px var(--space-2);
  border-radius: 999px;
}

.compatible-platform-picker__unmet {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-4);
}

.compatible-platform-picker__unmet li {
  font-size: var(--text-small);
  color: var(--color-danger);
  list-style: disc;
}

.compatible-platform-picker__remedy {
  font-size: var(--text-small);
  color: var(--color-ink);
  background: #fbf1de;
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}

.compatible-platform-picker__near-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ---------- Chain validation (Step 4 footer) ---------- */

.wizard-step__chain-check {
  margin-top: var(--space-2);
}

.wizard-step__chain-valid {
  color: var(--color-success);
  font-weight: 700;
  background: #e3efe9;
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
}

.wizard-step__chain-invalid {
  background: #fbecea;
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.wizard-step__chain-invalid h4 {
  color: var(--color-danger);
  margin-bottom: var(--space-2);
}

.wizard-step__chain-invalid h5 {
  margin-top: var(--space-3);
}

.wizard-step__chain-invalid ul {
  padding-left: var(--space-4);
  margin-bottom: var(--space-3);
}

.wizard-step__chain-invalid li {
  list-style: disc;
  font-size: var(--text-small);
}

/* ---------- Config summary (Step 6 review) ---------- */

.config-summary__section {
  margin-bottom: var(--space-6);
}

.config-summary__section:last-child {
  margin-bottom: 0;
}

/* Item 8: "use the same typography to get a unified look (currently not the case)" -- every real
   step's own section heading is the small-caps "eyebrow" legend style
   (.wizard-step__section legend above), but the summary's section headings were a plain bold h3 at
   a one-off 1.1rem size found nowhere else in the wizard. Matched to the same eyebrow treatment
   here (still an h3 element -- only the visual style changes) so navigating from a real step into
   the final review reads as the same design system, not a different one. */
.config-summary__section > h3 {
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-3);
}

.summary-card__rows {
  padding-left: var(--space-4);
  margin: var(--space-2) 0;
}

.summary-card__rows li {
  list-style: disc;
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

/* The Output step's transparent, step-by-step bandwidth calculation (item 2a) -- numbered, since
   each line builds on the previous one's result, unlike the plain bullet lists elsewhere. */
.bandwidth-trace {
  list-style: decimal;
  padding-left: var(--space-5);
  margin: var(--space-2) 0 var(--space-3);
}

.bandwidth-trace li {
  font-size: var(--text-small);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-1);
}

.summary-card__comment {
  font-size: var(--text-small);
  font-style: italic;
  color: var(--color-ink-muted);
  margin-top: var(--space-2);
}

.summary-color-swatch {
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  vertical-align: middle;
}

/* ---------- Step 5: toggle fields + volume presets ---------- */

.toggle-field {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-3);
  align-items: start;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  cursor: pointer;
}

.toggle-field:hover {
  border-color: var(--color-ink-muted);
}

.toggle-field input[type="checkbox"] {
  grid-row: 1 / span 2;
  width: auto;
  margin-top: 2px;
}

.toggle-field__title {
  font-weight: 700;
}

.toggle-field__hint {
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.volume-presets {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

/* ---------- Step 6: actions + success screen ---------- */

.wizard-step__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-5);
}

/* ---------- Step 3: processing chain collapse controls + inter-stage I/O line ---------- */

/* ---------- Step 9: export actions + print/PDF scoping ---------- */

.wizard-step__export-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

/* Item 8: "export as PDF" is a plain browser print (no PDF-rendering library, D-002) -- this rule
   hides everything on the page except the embedded ConfigSummary (including its own CameraDiagram)
   when the visitor prints or "Save as PDF"s from Step 9, so the output is just the review content. */
@media print {
  body * {
    visibility: hidden;
  }
  .config-summary,
  .config-summary * {
    visibility: visible;
  }
  .config-summary {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
}

.wizard-step__import-config {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}

.wizard-step__collapse-controls {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.processing-stage-card__io {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: 0;
  margin-bottom: var(--space-4);
}

.wizard-step h3 {
  margin-top: var(--space-2);
}

/* D-070: opt-in for the server-side draft autosave (DraftConsent.js). */
.draft-consent {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  font-size: var(--text-small);
  color: var(--color-ink);
}

.draft-consent__title {
  margin: 0 0 var(--space-2);
  font-weight: 700;
}

.draft-consent__text {
  margin: 0 0 var(--space-3);
}

.draft-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.draft-consent--compact {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink-muted);
}

.draft-consent__toggle {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

@media print {
  .draft-consent { display: none; }
}