/* INFOC forms — the multi-step pager (CMS-D-084 P5, owner decision B-1).
 *
 * A SEPARATE, OWNED sheet. `infoc-cms.css` is sha256-pinned by
 * `scripts/v5-ui-gate.mjs` (P15-PUBLIC-BOUNDARY) and must not be hand-edited, and
 * appending to the GENERATED `infoc-site-overrides.css` would be overwritten on
 * the next build. B-1 chose option (c) — a dedicated sheet — and verified none of
 * the selectors below collide with the frozen one.
 *
 * It is deliberately SMALL. Every field, label, error and button inside a step is
 * already styled by the frozen sheet's generic selectors; this adds only what a
 * pager needs and nothing a single-step form pays for.
 *
 * Design rules (CMS-D-066): radius 0, 1px hairlines, house blue #0001ff, no
 * shadows-as-structure. The values are literal here rather than tokenised because
 * this sheet ships to the PUBLIC site, which does not load the admin token layer;
 * they are the same values `infoc-cms.css` uses.
 */

/* The step itself. A real <fieldset>, so the legend names the step for a screen
   reader and `hidden` on a later step is what the engine's own `visible()`
   already understands. */
.ioc-form .ioc-step {
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0; /* fieldset defaults to min-content; this lets the grid shrink */
}

.ioc-form .ioc-step > legend {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  padding: 0;
  margin: 0 0 10px;
}

/* Progress. One line, a hairline rule, and a bar that fills — no percentages
   shouted at the visitor, because the step count is already in the label. */
.ioc-form .ioc-form-progress {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #6f6f6f;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e0e0e0;
}

.ioc-form .ioc-form-progress__bar {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  background: #0001ff;
  transition: width 160ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .ioc-form .ioc-form-progress__bar {
    transition: none;
  }
}

/* Back / Continue. Sits above the action row so the submit stays the last thing
   before the reassurance line on the final step. */
.ioc-form .ioc-form-steps {
  display: flex;
  gap: 8px;
  margin: 4px 0 14px;
}

.ioc-form .ioc-form-steps [hidden] {
  display: none;
}

/* The step LIST marker classes B-1 reserved. Used by the builder's preview and by
   any future step-list affordance; declared here so the two never diverge. */
.ioc-form-step--current {
  font-weight: 600;
  color: #161616;
}

.ioc-form-step--complete {
  color: #0001ff;
}