/*
 * The step bar, and the three states a field can be in.
 *
 * The bar is fixed to the bottom of the viewport, the way Taukeburger's chapter pager is,
 * because moving between steps is the one action taken on every step and it should never
 * be below the fold. Out of flow, so the page carries bottom padding to clear it.
 *
 * `min-height: 44px` on both links because a thumb is not a mouse. `shrink-0` and
 * `white-space: nowrap` because at 320px a squeezed label wraps, which makes the bar
 * taller and reads as broken.
 */
.stepper {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 20;
  border-top: 1px solid var(--line, #e6e0d8);
  background: color-mix(in srgb, var(--ground, #fffdf8) 95%, transparent);
  backdrop-filter: blur(8px);
}

.stepper-inner {
  max-width: 34rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
}

.step-link {
  min-height: 44px;
  flex-shrink: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  padding: 0 0.25rem;
  font: inherit;
  font-weight: 700;
  color: var(--accent, #d8145d);
  cursor: pointer;
}

.step-link:hover:not(:disabled) { text-decoration: underline; }
.step-link:disabled { color: var(--muted, #8a8178); cursor: default; }

.counter {
  flex-shrink: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--muted, #8a8178);
}

/* The page needs room, or the last field hides behind the bar. */
.page { padding-bottom: 5.5rem; }

.step-head h2 { margin: 0 0 0.25rem; }
.step-blurb { margin: 0 0 1.25rem; color: var(--muted, #8a8178); }

.opt {
  margin-left: 0.4rem;
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--muted, #8a8178);
}

.with-prefix { display: flex; align-items: center; gap: 0.35rem; }
.with-prefix .prefix { color: var(--muted, #8a8178); font-weight: 700; }
.with-prefix input { flex: 1; }

/* A field the server says is taken, and one it says is free. Both are quiet, because
   neither is an error until the person tries to move on. */
.check-line { display: block; margin-top: 0.25rem; font-size: 0.8125rem; }
.check-line .good { color: #1f7a3d; }
.check-line .taken { color: var(--bad, #a3242b); }

.err { display: block; margin-top: 0.25rem; font-size: 0.8125rem; color: var(--bad, #a3242b); }

.check { display: flex; gap: 0.6rem; align-items: flex-start; }
.check input { margin-top: 0.2rem; }

.said { margin-top: 1rem; font-weight: 700; }
.said.ok { color: #1f7a3d; }
.said.bad { color: var(--bad, #a3242b); }

/* Off screen rather than display:none, because some bots skip what is not rendered. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* The "work it out for me" button, which is a sentence-long action rather than a step
   change, so it sits under the field rather than in the bar. */
.step-link.suggest { margin-top: 0.4rem; padding: 0; font-size: 0.875rem; font-weight: 700; color: var(--accent, #d8145d); }
.step-link.suggest:disabled { color: var(--muted, #8a8178); }

/* The searchable picker. An input with a panel under it, which is the whole component: a
   filtered array and a keyboard handler, so it is written here rather than installed. */
.picker { position: relative; }
.picker-field { display: flex; align-items: center; gap: 0.35rem; }
.picker-field input { flex: 1; }

/* The chevron, the same two gradients the bank dropdown draws, so a searchable field and a
   plain one read as the same kind of control. Two 5px squares rotated by the gradients, which
   is one glyph's worth of CSS rather than an icon and a request for it. */
/* Two classes deep on purpose: `input[type="text"]` in ui.css is (0,1,1) and a bare class is
   (0,1,0), so the design system's `background` shorthand won and wiped the gradient. */
.picker .picker-input {
  padding-right: 3.4rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-70, rgba(16, 18, 17, 0.7)) 50%),
                    linear-gradient(135deg, var(--ink-70, rgba(16, 18, 17, 0.7)) 50%, transparent 50%);
  background-position: right 18px center, right 13px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* A chevron describes a closed control. While the list is open the arrow has nothing to say. */
/* The same two classes, or the design system's `input:focus` puts a background back. */
.picker .picker-input:focus { background-image: none; }

/* Two fields on one line, for a short one that belongs with a long one. The country is three
   characters and was taking a whole row to itself. */
.field-row { display: flex; gap: 0.6rem; align-items: flex-start; }
/* A row of one is not a row. It is every other field on the form, and it must take the width
   it took before any of this existed. */
.field-row.alone { display: block; }
/* Keeps a row in line. Every label is the same height, so a field that has none still needs the
   space, and an empty element is a smaller lie than a box that does not line up. */
.label-gap { display: block; visibility: hidden; }
.field-row > .field { flex: 1; min-width: 0; }
/* The design system stacks fields, so it spaces them with `.field + .field`. Inside a row they
   sit side by side and that 16px of vertical breathing room becomes a box riding low beside its
   neighbour, which is exactly what it did. */
.field-row > .field + .field { margin-top: 0; }
/* Wide enough for the longest label it can hold, which is a flag, a country name and a dial
   code: "🇲🇾 Malaysia +60". At 11rem it truncated the code, so the one part of the control a
   person needs to check was the part that got cut off. */
/* A flag and a dial code and nothing else. It was 12.5rem because it spelled out the country
   name, which took the room the phone number wanted to say something everybody already knew. */
/* What the closed control holds is a flag and a code: "🇲🇾 +60", about 55px at 16px. What it
   carries on its right is a cross and a chevron. At 6.5rem with 3.6rem reserved, the text had
   about 46px and the code was the part that got clipped, so the box was wide enough for
   everything except the thing it exists to show. */
.field-row > .field.row-narrow { flex: 0 0 8.25rem; }
/* Inside the box, left of the chevron. It was a flex sibling of the input, which was fine while
   the input was plain and wrong once the input reserved room for its own arrow: the cross took a
   column of its own and appeared to belong to neither field. */
.picker-clear {
  position: absolute;
  right: 2.35rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--muted, #8a8178);
  padding: 0 0.35rem;
}
.picker-panel {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 0.25rem);
  max-height: 18rem; overflow-y: auto;
  background: var(--ground, #fffdf8);
  border: 1px solid var(--line, #e6e0d8);
  border-radius: 0.6rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  padding: 0.35rem;
}
.picker-note { margin: 0.35rem 0.5rem; font-size: 0.8125rem; color: var(--muted, #8a8178); }
.picker-group {
  margin: 0.5rem 0.5rem 0.15rem; font-size: 0.75rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted, #8a8178);
}
.picker-option {
  display: block; width: 100%; text-align: left;
  border: 0; background: none; cursor: pointer;
  padding: 0.5rem; border-radius: 0.4rem; font: inherit;
}
.picker-option.active { background: color-mix(in srgb, var(--accent, #d8145d) 10%, transparent); }
.picker-option.on { font-weight: 700; }

/* The line that says what finishing the step does. Not an error, so not red; not a hint, so
   not the same grey. Somewhere in between, because it is the one thing on this page a
   creator cannot undo by themselves. */
.warn-line { display: block; margin-top: 0.35rem; color: var(--ink, #2a2119); }
.warn-line strong { font-weight: 700; }

/* The flag, in the list and on the chosen value. Not in the searchable text, so typing
   "malaysia" still finds it and typing the emoji is not required. */
.picker-flag { font-size: 1.05em; }

/* The finished number, shown rather than asked for. Quieter than a real field because it is not
   one, and still the same box so it reads as part of the form rather than a note beside it. */
.derived { background: var(--surface-2, #f2f1ed); color: var(--ink-70, rgba(16, 18, 17, 0.7)); }
.derived:focus { border-color: inherit; }