/* Build — the arrival-day screen.
 *
 * Tokens only (05_CONVENTIONS.md guardrail 10). The back link, the hero, the
 * identity capture and the save bar are `components/territory-page.css` now —
 * an audit on 2026-08-04 found this file and `strike.css` were the same
 * design with a different prefix. What is left below is what is genuinely
 * Build's own: the arrival-day options and the contact-details grid.
 *
 * The territory colour still appears in two positions with two different
 * values: `--t-build` as a fill with `--t-build-fg` on it, and `--t-build-deep`
 * when the colour itself is the text on its own tint. The design uses the
 * primary for both, which measures 2.96:1 — see 04_DESIGN_HANDOFF.md §
 * Contrast.
 */

/* The question the screen exists to ask, so it is set as a title and not as
 * body copy: display face, the h2 step of the scale, same treatment as
 * `.panel-title` and the territory-page hero name. */
.build-lede {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-size: var(--size-h2);
  font-weight: var(--weight-normal);
  line-height: 1.2;
  color: var(--ink);
}

.build-hint {
  margin: 0 0 var(--space-3);
  max-width: 52em;
  font-size: var(--size-small);
  color: var(--soft);
}

/* --- the arrival options -------------------------------------------------- */

/* The design asks for minmax(210px, 1fr), which lands five across on a desktop.
 * At that width the date and the credit fight for the same line and "Wed · Aug
 * 26, before 1pm" breaks after "Aug" — the one thing on the card that has to be
 * read at a glance. Widened to three across, which also divides the nine
 * options evenly instead of leaving an orphan. */
.build-opts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.build-opt {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  min-height: 56px;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}

.build-opt.is-on { background: var(--t-build-t); border-color: var(--t-build); }

/* Was `:focus-within`, which puts the ring on a mouse click — exactly what
 * `:focus-visible` exists to prevent, and the same bug `strike.css` had.
 * `:focus-within` matches whenever the radio inside has focus at all;
 * `:has(:focus-visible)` matches only when that focus is the keyboard kind. */
.build-opt:has(:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }

/* The radio is the dot: styling the real control keeps arrow-key navigation
 * between the options, which a div with role=radio would have to re-implement.
 * At 20x20 it is below the 48px tap floor on its own, but it is never tapped
 * on its own — it sits inside a `<label>` that is the full 56px row, so the
 * whole row is the real target (verified against the rendered DOM, not
 * assumed from the CSS). */
.build-dot {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
}

.build-dot:checked { border-color: var(--t-build); box-shadow: inset 0 0 0 4px var(--t-build); }

.build-opt-body { flex: 1; min-width: 0; }

.build-opt-title {
  display: block;
  font-size: 15px;
  font-weight: var(--weight-semibold);
}

.build-opt-sub {
  display: block;
  font-size: var(--size-micro);
  color: var(--soft);
  font-variant-numeric: tabular-nums;
}

.build-opt-credit {
  flex: none;
  font-size: var(--size-small);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--soft);
  white-space: nowrap;
}

.build-opt.is-on .build-opt-credit { color: var(--t-build-deep); }

/* --- contact details -------------------------------------------------------
 *
 * The grid and the single-field column are `.tpg-fields`/`.tpg-field`
 * (territory-page.css); this class adds only the bottom margin this block
 * needs and the identity panel does not. */
.build-fields { margin-bottom: var(--space-4); }

/* "on file · s••••@example.com" is not an aside like the hint it replaces — it
 * is the answer to "where did my email go", so it runs at the full weight of
 * `--soft` rather than the 0.75 a generic hint gets. Not bold: it sits beside
 * the label and would otherwise outshout it. */
.build-on-file { opacity: 1; }

.build-note {
  margin: var(--space-4) 0 0;
  font-size: var(--size-small);
  color: var(--soft);
}

.build-note a { color: inherit; }

@media (max-width: 767px) {
  .build-opts { grid-template-columns: 1fr; }
}