/*
 * Service: Mobile-first UX (views/pages/services/mobile-first-ux.php).
 *
 * 1. Phone-stepper states, ported from the prototype's JS-computed styles
 *    (html-design/Service Mobile.dc.html renderVals(): s.style, s.numStyle,
 *    s.titleStyle, s.bodyStyle, mScreen). Layout classes live on the markup;
 *    only the active/inactive state and its transitions are here, keyed off
 *    the .is-active class kept in sync with aria-pressed by
 *    assets/js/pages/service-mobile-first-ux.js.
 * 2. The desktop-vs-phone gap table's helmet media query (data-gaprow /
 *    data-gaphead), which the global stylesheet does not cover.
 *
 * Colour literals mirror the design tokens in assets/css/input.css.
 * The global prefers-reduced-motion kill switch in app.css removes every
 * transition declared below; the explicit block at the end keeps this file
 * self-sufficient if loaded on its own.
 */

/* ---- Stepper buttons ---- */
[data-mstep] {
  border-left: 2px solid #E7E4DF;
  background: transparent;
  transition: background .18s ease, border-color .18s ease;
}
[data-mstep].is-active {
  border-left-color: #FF6333;
  background: #F7F6F3;
}
[data-mstep] [data-mstep-num] {
  color: #71717A;
}
[data-mstep].is-active [data-mstep-num] {
  color: #FF6333;
}
[data-mstep] [data-mstep-title] {
  color: #52525B;
}
[data-mstep].is-active [data-mstep-title] {
  color: #0B0B0C;
}
[data-mstep] [data-mstep-body] {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .32s ease, opacity .24s ease;
}
[data-mstep].is-active [data-mstep-body] {
  max-height: 160px;
  opacity: 1;
}

/* ---- Phone wireframe screens: only the active step's screen shows ---- */
[data-mscreen] {
  display: none;
}
[data-mscreen].is-active {
  display: flex;
}

/* ---- Gap table collapses to one column below 700px (helmet rule) ---- */
@media (max-width: 700px) {
  [data-gaprow] {
    grid-template-columns: 1fr !important;
  }
  [data-gaphead] {
    display: none !important;
  }
}

/* ---- Reduced motion: no stepper/accordion transitions ---- */
@media (prefers-reduced-motion: reduce) {
  [data-mstep],
  [data-mstep] [data-mstep-body],
  [data-accordion-mark],
  [data-accordion-body] {
    transition: none !important;
  }
}