/* fx.css · sell/quiz-steps, a quiz that moves one question at a time · owner: Lizzy East · all rights reserved */

/* The questions sit side by side in one row, the stage one question wide. With no
   script the row scrolls sideways (snapping to each question) and every Next and
   Back is a plain link to the next question, so nothing is ever out of reach and
   the form still sends. fx.js turns it into steps: the stage clips, the row slides
   by its own width (translate) and the questions not on show fade and go inert.
   The page never changes height: both layouts are the same row. */
[data-fx~="sell/quiz-steps"] [data-fx-steps] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  padding: 0;
  list-style: none;
}
[data-fx~="sell/quiz-steps"] [data-fx-steps] a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--fx-quiz-line, #c7ccd8);
  border-radius: 999px;
  color: var(--fx-quiz-muted, #4a4f5e);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}
[data-fx~="sell/quiz-steps"] [data-fx-steps] a[aria-current="step"] {
  border-color: var(--fx-quiz-ink, #111117);
  background: var(--fx-quiz-ink, #111117);
  color: var(--fx-quiz-on-ink, #f4f5f7);
}

[data-fx~="sell/quiz-steps"] { min-width: 0; }
[data-fx~="sell/quiz-steps"] [data-fx-stage] {
  display: flex;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
[data-fx~="sell/quiz-steps"] [data-fx-stage]::-webkit-scrollbar { display: none; }
[data-fx~="sell/quiz-steps"] [data-fx-slide] {
  flex: 0 0 100%;
  display: grid;
  align-content: start;
  gap: 0.75rem;
  min-width: 0;
  margin: 0;
  padding: 0.25rem 0.25rem 0.5rem;
  border: 0;
  scroll-snap-align: start;
}
[data-fx~="sell/quiz-steps"] [data-fx-slide] > * { margin: 0; }
[data-fx~="sell/quiz-steps"] legend,
[data-fx~="sell/quiz-steps"] [data-fx-slide] h3 {
  float: left;
  width: 100%;
  margin: 0 0 0.5rem;
  padding: 0;
  font-family: var(--fx-quiz-serif, var(--demo-serif, Georgia, serif));
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  font-weight: 400;
  line-height: 1.1;
}
[data-fx~="sell/quiz-steps"] [data-fx-slide] label {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 52px;
  padding: 0.6rem 1rem;
  border: 1px solid var(--fx-quiz-line, #c7ccd8);
  border-radius: 14px;
  background: var(--fx-quiz-option, #f4f5f7);
  cursor: pointer;
}
[data-fx~="sell/quiz-steps"] [data-fx-slide] label:has(:checked) {
  border-color: var(--fx-quiz-accent, #2340ff);
  box-shadow: inset 0 0 0 1px var(--fx-quiz-accent, #2340ff);
}
[data-fx~="sell/quiz-steps"] legend small {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--fx-quiz-sans, var(--demo-sans, system-ui, sans-serif));
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fx-quiz-muted, #4a4f5e);
}
[data-fx~="sell/quiz-steps"] [data-fx-slide] input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--fx-quiz-accent, #2340ff);
}
[data-fx~="sell/quiz-steps"] [data-fx-answer] { max-width: 38rem; font-size: 1.1rem; }

/* Steps, once fx.js is running. */
[data-fx~="sell/quiz-steps"].fx-live [data-fx-stage] { overflow: clip; }
[data-fx~="sell/quiz-steps"].fx-live [data-fx-slide] { translate: calc(var(--fx-step, 0) * -100%) 0; }
[data-fx~="sell/quiz-steps"].fx-live [data-fx-slide][aria-hidden="true"] { opacity: 0; }
html.fx-armed [data-fx~="sell/quiz-steps"].fx-go [data-fx-slide] {
  transition: translate var(--fx-slide-dur, 560ms) var(--fx-ease), opacity var(--fx-slide-dur, 560ms) var(--fx-ease);
}