/* ===========================================================
   MOZA FFB PROFILE WIZARD — page-specific styles
   Built entirely on the colour/type tokens already declared in
   style.css (:root) — no new palette introduced. This file
   only adds the wizard's own layout and components.
=========================================================== */

/* ---------------------------------------------------------
   Overall layout: step rail | panels | live summary
--------------------------------------------------------- */
.ffb-wizard__layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 280px;
  gap: 1.75rem;
  align-items: start;
}

/* ---------------------------------------------------------
   Step rail (mirrors the site's vertically-stacked nav
   language — same indicator-bar idea as .site-nav__link)
--------------------------------------------------------- */
.ffb-wizard__steps {
  position: sticky;
  top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1rem 0;
  border-right: 1px solid var(--navy-800);
}

.ffb-wizard__step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 1rem 0.65rem 1.1rem;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  color: var(--ink-300);
  transition: color 0.16s ease;
}

.ffb-wizard__step::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8%;
  bottom: 8%;
  width: 3px;
  border-radius: 2px;
  background: transparent;
  transition: background 0.16s ease;
}

.ffb-wizard__step:hover { color: var(--ink-100); }

.ffb-wizard__step.is-active {
  color: var(--ink-100);
}

.ffb-wizard__step.is-active::before {
  background: linear-gradient(180deg, var(--blue-500), var(--blue-800));
  box-shadow: 0 0 8px rgba(19, 135, 243, 0.5);
}

.ffb-wizard__step-index {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--navy-800);
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-display);
}

.ffb-wizard__step.is-active .ffb-wizard__step-index {
  border-color: var(--blue-500);
  color: var(--blue-300);
}

.ffb-wizard__step-label {
  font-size: 0.88rem;
  font-weight: 600;
}

/* step rail becomes a horizontal scroller once things get tight */
@media (max-width: 900px) {
  .ffb-wizard__steps {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--navy-800);
    padding: 0 0 0.75rem;
  }
  .ffb-wizard__step { padding: 0.5rem 0.85rem; flex-shrink: 0; }
  .ffb-wizard__step::before { left: 8%; right: 8%; top: auto; bottom: 0; width: auto; height: 3px; }
}

/* ---------------------------------------------------------
   Panels
--------------------------------------------------------- */
.ffb-wizard__panels {
  min-width: 0;
  background: var(--navy-900);
  border: 1px solid var(--navy-800);
  border-radius: 12px;
  padding: 1.75rem;
}

.ffb-wizard__panel { display: none; }
.ffb-wizard__panel.is-active { display: block; }

.ffb-wizard__panel-title {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue-300);
}

.ffb-wizard__panel-desc {
  margin: 0 0 1.5rem;
  font-size: 0.92rem;
  color: var(--ink-300);
}

.ffb-wizard__nav-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--navy-800);
}

/* ---------------------------------------------------------
   Form fields (select / text input / hints)
--------------------------------------------------------- */
.ffb-field {
  margin-bottom: 1.5rem;
}

.ffb-field__label {
  display: block;
  margin-bottom: 0.45rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-100);
}

.ffb-field__select,
.ffb-field__input {
  width: 100%;
  max-width: 420px;
  padding: 0.6rem 0.75rem;
  background: var(--navy-950);
  border: 1px solid var(--navy-800);
  border-radius: 7px;
  color: var(--ink-100);
  font-family: var(--font-body);
  font-size: 0.92rem;
  transition: border-color 0.16s ease;
}

.ffb-field__select:focus,
.ffb-field__input:focus {
  outline: none;
  border-color: var(--blue-500);
}

.ffb-field__hint {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-300);
  opacity: 0.85;
}

/* ---------------------------------------------------------
   Field + explanatory note row (used for Simulator/Platform —
   two related fields on the left, a short "why we ask" box
   on the right)
--------------------------------------------------------- */
.ffb-field-note-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 1.5rem;
}

.ffb-field-note-row__fields .ffb-field { margin-bottom: 1rem; }
.ffb-field-note-row__fields .ffb-field:last-child { margin-bottom: 0; }

.ffb-field-note-row__note {
  padding: 0.9rem 1rem;
  background: var(--navy-950);
  border: 1px dashed var(--navy-800);
  border-radius: 8px;
}

.ffb-field-note-row__note strong {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-300);
}

.ffb-field-note-row__note p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-300);
}

@media (max-width: 700px) {
  .ffb-field-note-row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   Pill-style radio groups (Simulator / Platform)
--------------------------------------------------------- */
.ffb-pillgroup {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.ffb-pill {
  padding: 0.5rem 1rem;
  background: var(--navy-950);
  border: 1px solid var(--navy-800);
  border-radius: 999px;
  color: var(--ink-300);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}

.ffb-pill:hover { color: var(--ink-100); }

.ffb-pill.is-active {
  background: linear-gradient(180deg, var(--blue-500), var(--blue-800));
  border-color: var(--blue-500);
  color: white;
}

/* ---------------------------------------------------------
   Sliders
--------------------------------------------------------- */
.ffb-slider {
  margin-bottom: 1.5rem;
}

.ffb-slider--nested {
  margin: -0.75rem 0 1.5rem 2.9rem;
  padding-left: 1rem;
  border-left: 2px solid var(--navy-800);
}

.ffb-slider__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.ffb-slider__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--blue-300);
  min-width: 2.2rem;
  text-align: right;
}

.ffb-slider__input {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 4px;
  background: var(--navy-800);
  outline: none;
}

.ffb-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--blue-500);
  border: 2px solid var(--ink-100);
  cursor: pointer;
  transition: transform 0.14s ease;
}

.ffb-slider__input::-webkit-slider-thumb:hover { transform: scale(1.12); }

.ffb-slider__input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--blue-500);
  border: 2px solid var(--ink-100);
  cursor: pointer;
}

/* ---------------------------------------------------------
   Toggle switches
--------------------------------------------------------- */
.ffb-toggle-row {
  margin-bottom: 0.5rem;
}

.ffb-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
}

.ffb-toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.ffb-toggle__track {
  flex-shrink: 0;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--navy-800);
  border: 1px solid var(--navy-800);
  position: relative;
  transition: background 0.16s ease;
}

.ffb-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ink-300);
  transition: transform 0.16s ease, background 0.16s ease;
}

.ffb-toggle input:checked + .ffb-toggle__track {
  background: var(--blue-800);
  border-color: var(--blue-500);
}

.ffb-toggle input:checked + .ffb-toggle__track .ffb-toggle__thumb {
  transform: translateX(16px);
  background: var(--blue-300);
}

.ffb-toggle input:focus-visible + .ffb-toggle__track {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
}

.ffb-toggle__label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-100);
}

/* ---------------------------------------------------------
   Buttons
--------------------------------------------------------- */
.ffb-button {
  padding: 0.65rem 1.4rem;
  border-radius: 7px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: transform 0.14s ease, filter 0.14s ease, opacity 0.14s ease;
}

.ffb-button--primary {
  background: linear-gradient(180deg, var(--blue-500), var(--blue-800));
  border: 1px solid var(--blue-500);
  color: white;
}

.ffb-button--primary:hover { filter: brightness(1.12); transform: translateY(-1px); }

.ffb-button--primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

.ffb-button--ghost {
  background: transparent;
  border: 1px solid var(--navy-800);
  color: var(--ink-300);
}

.ffb-button--ghost:hover { color: var(--ink-100); border-color: var(--blue-600); }

.ffb-wizard__export-row {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* ---------------------------------------------------------
   Review step
--------------------------------------------------------- */
.ffb-review-list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 1.5rem;
}

.ffb-review-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--navy-800);
  font-size: 0.85rem;
}

.ffb-review-list .k { color: var(--ink-300); }
.ffb-review-list .v { color: var(--ink-100); font-weight: 600; }

@media (max-width: 560px) {
  .ffb-review-list { grid-template-columns: 1fr; }
}

.ffb-json-preview {
  margin-bottom: 1.5rem;
  border: 1px solid var(--navy-800);
  border-radius: 8px;
  padding: 0.75rem 1rem;
}

.ffb-json-preview summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--blue-300);
}

.ffb-json-preview pre {
  margin: 0.85rem 0 0;
  padding: 0.85rem;
  background: var(--navy-950);
  border-radius: 6px;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--ink-300);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------------------------------------------------------
   Live summary / gauge sidebar
--------------------------------------------------------- */
.ffb-wizard__summary {
  position: sticky;
  top: 1.5rem;
  background: var(--navy-900);
  border: 1px solid var(--navy-800);
  border-radius: 12px;
  padding: 1.5rem;
}

.ffb-gauge {
  text-align: center;
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--navy-800);
}

.ffb-gauge__svg {
  width: 100%;
  height: auto;
}

#gaugeNeedle {
  /* Pivot point is defined entirely by the SVG rotate(angle cx cy)
     transform attribute set in JS — do NOT also set a CSS
     transform-origin here. The two pivot systems fight each other
     (CSS transform-origin gets applied as an extra offset before
     the attribute's own rotation matrix), which is what caused the
     needle to shift sideways and appear to scale instead of
     rotating cleanly around its base. */
  transition: transform 0.2s ease;
}

.ffb-gauge__label {
  margin: 0.5rem 0 0.15rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-300);
}

.ffb-gauge__value {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink-100);
}

.ffb-wizard__summary-title {
  margin: 0 0 0.85rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-300);
}

.ffb-summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.ffb-summary-list li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8rem;
}

.ffb-summary-list .k { color: var(--ink-300); }
.ffb-summary-list .v { color: var(--ink-100); font-weight: 600; text-align: right; }

/* ---------------------------------------------------------
   Cruise speed gauge — a near-full-circle drag dial (min at
   ~7 o'clock, max at ~5 o'clock, gap at the bottom). The value
   readout sits in a small box "hanging" off that bottom gap.
--------------------------------------------------------- */
.ffb-speedgauge-field {
  /* dragging the gauge shouldn't select the label/hint text above
     it — scoped to this field only, same fix as .ffb-knobrow */
  user-select: none;
  -webkit-user-select: none;
}

.ffb-speedgauge {
  position: relative;
  max-width: 220px;
  margin: 0 auto;
}

.ffb-speedgauge__svg {
  width: 100%;
  height: auto;
  display: block;
}

.ffb-speedgauge__endlabel {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  fill: var(--ink-300);
}

#speedNeedle {
  /* pivot is defined by the JS-driven rotate(angle cx cy) attribute
     only — see the note on #gaugeNeedle above, same rule applies */
  transition: transform 0.05s linear;
}

#speedGaugeHitArea:active { cursor: grabbing; }

.ffb-speedgauge__readout-wrap {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
}

/* The connector is a diamond (rotated square) sitting BEHIND the
   box in paint order (it comes first in the DOM, within the same
   stacking context, so the box paints over it). Its lower half is
   hidden under the box's own background — only the top-left/
   top-right edges peek out above, giving a clean "tail" with no
   seam. A clip-path triangle was tried first and left a visible
   gap where its clipped edges didn't perfectly meet the box's own
   border line — this two-layer approach avoids that entirely. */
.ffb-speedgauge__connector {
  position: absolute;
  top: 3px;
  left: 50%;
  width: 14px;
  height: 14px;
  background: var(--navy-950);
  border-left: 1px solid var(--blue-600);
  border-top: 1px solid var(--blue-600);
  transform: translateX(-50%) rotate(45deg);
}

.ffb-speedgauge__readout {
  position: relative;
  margin-top: 9px;
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
  padding: 0.3rem 0.9rem;
  background: var(--navy-950);
  border: 1px solid var(--blue-600);
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(19, 135, 243, 0.25);
}

.ffb-speedgauge__value-input {
  width: 3.2ch;
  padding: 0;
  background: transparent;
  border: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--ink-100);
  text-align: right;
  -moz-appearance: textfield;
}

.ffb-speedgauge__value-input:focus {
  outline: none;
  color: var(--blue-300);
}

.ffb-speedgauge__value-input::-webkit-outer-spin-button,
.ffb-speedgauge__value-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ffb-speedgauge__unit {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-300);
}

/* ---------------------------------------------------------
   Knob-row example — one human-framed question driving a
   small row of related radial knobs, instead of a stack of
   near-identical sliders
--------------------------------------------------------- */
.ffb-knobrow {
  padding: 1.1rem 1.25rem;
  background: var(--navy-950);
  border: 1px solid var(--blue-800);
  border-radius: 10px;
  /* dragging the knobs shouldn't select the heading/description/
     labels around them — scoped to this row only, not site-wide */
  user-select: none;
  -webkit-user-select: none;
}

.ffb-knobrow__eyebrow {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--blue-300);
}

.ffb-knobrow__question {
  margin: 0 0 1.1rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-100);
}

.ffb-knobrow__knobs {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.ffb-knob {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.ffb-knob__dialwrap {
  position: relative;
  width: 60px;
  height: 60px;
}

.ffb-knob__svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ffb-knob__needle {
  /* pivot is defined by the JS-driven rotate(angle cx cy) attribute
     only — same rule as the other two gauges, do not add a CSS
     transform-origin here or it fights the attribute-based pivot */
  transition: transform 0.05s linear;
}

.ffb-knob__hitarea {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
}

.ffb-knob__hitarea:hover { background: rgba(19, 135, 243, 0.06); }
.ffb-knob__hitarea:active { cursor: grabbing; }

.ffb-knob__hitarea:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
}

.ffb-knob__label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-300);
}

.ffb-knob__value-row {
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
}

.ffb-knob__value-input {
  width: 2.6ch;
  padding: 0;
  background: transparent;
  border: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--blue-300);
  text-align: right;
  -moz-appearance: textfield;
}

.ffb-knob__value-input:focus {
  outline: none;
  color: var(--ink-100);
}

.ffb-knob__value-input::-webkit-outer-spin-button,
.ffb-knob__value-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ffb-knob__unit {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--ink-300);
}

@media (max-width: 1150px) {
  .ffb-wizard__layout { grid-template-columns: 170px minmax(0, 1fr); }
  .ffb-wizard__summary {
    position: static;
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .ffb-wizard__layout { grid-template-columns: 1fr; }
  .ffb-wizard__panels { padding: 1.25rem; }
  .ffb-slider--nested { margin-left: 1.25rem; }
}