/* ==================================================================
   Rental application: light theme
   ================================================================== */

:root {
  color-scheme: light;

  --bg: #eff6f2;
  --surface: #ffffff;
  --surface-2: #fafaf7;
  --sunken: #f1f0ea;
  --text: #17201d;
  --muted: #59645f;
  --placeholder: #747d79;
  --line: #e5e3dc;
  --line-strong: #d3d6cf;
  --field-border: #868f8a;
  --field-hover: #5d6762;

  --brand: #1e5b4d;
  --brand-hover: #164638;
  --brand-ink: #123a30;
  --brand-50: #eff6f3;
  --brand-100: #dbeae4;
  --ring: rgb(30 91 77 / 0.18);

  --danger: #b42318;
  --danger-50: #fef3f2;
  --danger-ring: rgb(180 35 24 / 0.14);

  --shadow-sm: 0 1px 2px rgb(23 32 29 / 0.05);
  --shadow: 0 1px 2px rgb(23 32 29 / 0.04), 0 10px 30px -14px rgb(23 32 29 / 0.16);

  --radius: 1.25rem;
  --radius-md: 0.75rem;
  --target: 2.75rem;
  --gutter: 1rem;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-sign: "Segoe Script", "Snell Roundhand", "Bradley Hand", "Brush Script MT", "Apple Chancery", cursive;

  /* icons (masks, so they take the text colour) */
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --i-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E");
  --i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23596460' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
  --i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
  --i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  --i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  --i-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 1.5a8.5 8.5 0 1 1 0 17 8.5 8.5 0 0 1 0-17Zm-1 4.5v5.5h2V6H9Zm0 7.5v2h2v-2H9Z'/%3E%3C/svg%3E");

  accent-color: var(--brand);
}

@media (pointer: coarse) {
  :root { --target: 3rem; }
}

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  /* Always keep room for the scrollbar, so the page doesn't shift sideways
     when a short step is swapped for a long one and the scrollbar appears. */
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-block: 6rem 2rem;
}

body {
  margin: 0;
  min-block-size: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.2; text-wrap: balance; margin: 0; }
p, li, dd { text-wrap: pretty; }
p { margin: 0; }
a { color: var(--brand); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: var(--brand-100); color: var(--brand-ink); }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.visually-hidden:where(:not(:focus-within, :active)) {
  position: absolute !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.icon {
  display: inline-block;
  flex: none;
  inline-size: 1.05em;
  block-size: 1.05em;
  background: currentColor;
  mask: var(--icon) center / contain no-repeat;
}
.icon-phone { --icon: var(--i-phone); }
.icon-mail { --icon: var(--i-mail); }
.icon-lock { --icon: var(--i-lock); }
.icon-pin { --icon: var(--i-pin); }

.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: -10rem;
  z-index: 10;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
  &:focus { inset-block-start: max(1rem, env(safe-area-inset-top, 0px)); }
}

/* ------------------------------------------------------------------ page layout
   Phones: introduction, form, contact, one under the other.
   Wide screens: a sidebar (introduction + steps + contact) beside the form.
   The sidebar is one element, so its parts can never slide over each other. */

.shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "intro" "main" "contact";
  gap: 1.25rem;
  max-inline-size: 76rem;
  margin-inline: auto;
  padding-block: max(1.5rem, env(safe-area-inset-top, 0px)) max(2rem, env(safe-area-inset-bottom, 0px));
  padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px));
}

.sidebar { display: contents; }
.intro { grid-area: intro; }
main { grid-area: main; min-inline-size: 0; }
.contact { grid-area: contact; }

@media (width >= 40rem) {
  :root { --gutter: 1.5rem; }
}

@media (width >= 60rem) {
  .shell {
    grid-template-columns: 17.5rem minmax(0, 1fr);
    grid-template-areas: "side main";
    align-items: start;
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    padding-block-start: 3rem;
  }
  .sidebar {
    grid-area: side;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
}

/* Keep the sidebar in view while scrolling, but only when the whole of it fits. */
@media (width >= 60rem) and (height >= 50rem) {
  .sidebar { position: sticky; top: 3rem; }
}

/* A dual-screen or foldable device spanning both screens side by side:
   the sidebar fills the first screen, the form scrolls on the second. */
@media (horizontal-viewport-segments: 2) {
  .shell {
    max-inline-size: none;
    block-size: 100dvh;
    padding: 0;
    grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width 1 0);
    grid-template-areas: "side main";
    column-gap: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));
  }
  .sidebar {
    grid-area: side;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2rem 1.5rem 1.5rem;
    overflow-y: auto;
  }
  main { padding: 1rem; block-size: 100dvh; overflow-y: auto; }
  .steps { display: grid !important; }
  .mobile-progress { display: none !important; }
}

/* ------------------------------------------------------------------ introduction */

.eyebrow {
  display: inline-flex;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--brand-100);
  color: var(--brand-ink);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}

h1 {
  margin-block: 0.85rem 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.city {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--muted);
  font-weight: 500;
}

.lede {
  margin-block-start: 1rem;
  color: var(--muted);
  font-size: 0.9375rem;
  max-inline-size: 34rem;
}

/* Step list (wide screens) */

.steps {
  display: none;
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
}

@media (width >= 60rem) {
  .steps { display: grid; }
}

.nav-step { position: relative; }

/* the line joining one step's circle to the next */
.nav-step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: calc(0.75rem + 0.875rem - 1px);
  inset-block-start: calc(50% + 0.875rem + 4px);
  inline-size: 2px;
  block-size: calc(100% - 1.75rem - 8px);
  border-radius: 2px;
  background: var(--line-strong);
}
.nav-step.is-done::after { background: var(--brand); }

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  inline-size: 100%;
  min-block-size: 3rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  text-align: start;
  transition: background-color 0.15s, color 0.15s;
}

button.nav-link { cursor: pointer; }
button.nav-link:hover { background: rgb(255 255 255 / 0.7); color: var(--text); }

.bubble {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--bg);
  font-size: 0.8125rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.is-current .nav-link {
  color: var(--text);
  font-weight: 650;
  background: var(--surface);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--line);
}
.is-current .bubble {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 0 0 4px var(--brand-100);
}
.is-done .nav-link { color: var(--text); }
.is-done .bubble {
  border-color: var(--brand);
  background: var(--brand);
  &::before {
    content: "";
    inline-size: 0.85rem;
    block-size: 0.85rem;
    background: #fff;
    mask: var(--i-check) center / contain no-repeat;
  }
}

/* Contact */

.contact {
  padding: 1.1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgb(255 255 255 / 0.55);
}

.contact-card {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  h2 {
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

.avatar {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  background: var(--brand-100);
  color: var(--brand-ink);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.contact-name { font-weight: 650; }

.contact-links {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
  a {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-block-size: var(--target);
    padding-inline: 0.6rem;
    margin-inline: -0.6rem;
    border-radius: 0.6rem;
    color: var(--text);
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;
    .icon { color: var(--brand); }
    &:hover { background: var(--brand-50); color: var(--brand-ink); }
  }
}

.privacy-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-block-start: 0.75rem;
  padding-block-start: 0.75rem;
  border-block-start: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--muted);
  .icon { margin-block-start: 0.15rem; }
}

@media (width >= 40rem) and (width < 60rem) {
  /* tablets: phone and email side by side */
  .contact-links { grid-template-columns: repeat(2, max-content); column-gap: 2rem; }
}

/* Small screens: a compact progress bar instead of the step list */

.mobile-progress {
  position: sticky;
  top: 0;
  z-index: 2;
  margin-inline: calc(-1 * var(--gutter));
  margin-block-end: 0.75rem;
  padding: max(0.7rem, env(safe-area-inset-top, 0px)) var(--gutter) 0.8rem;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(12px);
}

.progress-label {
  margin-block-end: 0.45rem;
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--text);
}

progress {
  appearance: none;
  display: block;
  inline-size: 100%;
  block-size: 0.375rem;
  border: 0;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
progress::-webkit-progress-bar { background: var(--line); border-radius: 999px; }
progress::-webkit-progress-value { background: var(--brand); border-radius: 999px; transition: inline-size 0.35s var(--ease); }
progress::-moz-progress-bar { background: var(--brand); border-radius: 999px; }

@media (width >= 60rem) {
  .mobile-progress { display: none; }
  html { scroll-padding-block-start: 2rem; }
}

/* ------------------------------------------------------------------ card & steps */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.15rem, 0.6rem + 3vw, 2.75rem);
}

@media (width < 22rem) {
  /* very narrow screens (folded phones' cover screens) */
  :root { --gutter: 0.5rem; }
  .card { padding: 1rem 0.85rem; border-radius: 0.9rem; }
}

.steps-host { view-transition-name: step; }

.step {
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.step-legend { display: contents; }

.step-kicker {
  display: none; /* the progress bar above says this on small screens */
  margin-block-end: 0.6rem;
  font-size: 0.8125rem;
  font-weight: 650;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  @media (width >= 60rem), (horizontal-viewport-segments: 2) { display: block; }
}

.step-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  &:focus { outline: none; }
  &:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 4px; }
}

.step-blurb { margin-block-start: 0.4rem; color: var(--muted); }

.required-note {
  margin-block-start: 0.85rem;
  font-size: 0.8125rem;
  color: var(--muted);
  .req { margin: 0; }
}

.group {
  container: group / inline-size;
  margin: 2rem 0 0;
  padding: 2rem 0 0;
  border: 0;
  border-block-start: 1px solid var(--line);
  min-inline-size: 0;
}

.step > .group:first-of-type { border-block-start: 0; padding-block-start: 0; margin-block-start: 1.75rem; }

.group-title {
  /* floated so it sits inside the fieldset instead of cutting through its top border */
  float: inline-start;
  inline-size: 100%;
  padding: 0;
  margin-block-end: 1.1rem;
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.005em;
}

.group-title + * { clear: both; }

.group-intro {
  margin-block: -0.6rem 1.25rem;
  color: var(--muted);
  font-size: 0.875rem;
}

.consent {
  margin: 0 0 1.5rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius-md);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  color: var(--brand-ink);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* ------------------------------------------------------------------ field grid
   Each field spans four rows of the group's grid (label, hint, control, error)
   and takes them as a subgrid, so controls side by side always line up. */

.grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 1rem;
}

.field {
  grid-column: 1 / -1;
  grid-row: span 4;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  min-inline-size: 0;
  margin: 0;
  padding: 0 0 1.35rem;
  border: 0;
}

.field > .label { grid-row: 1; }
.field > .hint { grid-row: 2; }
.field > :is(input, select, textarea, .affix, .date-parts) { grid-row: 3; align-self: start; }
.field > .error { grid-row: 4; }

/* fieldsets (radio groups) can't be subgrids; they're always full width anyway */
.radio-group, .check { display: flex; flex-direction: column; }

@container group (inline-size > 26rem) {
  .w-half, .w-third { grid-column: span 3; }
}
@container group (inline-size > 40rem) {
  .w-third { grid-column: span 2; }
}

.label {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.15rem 0.45rem;
  padding: 0;
  margin-block-end: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
}

.req {
  margin-inline-start: -0.3rem;
  color: var(--danger);
  font-weight: 600;
}

.opt {
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: var(--sunken);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
}

.hint {
  margin-block: -0.2rem 0.55rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* ------------------------------------------------------------------ text inputs & selects */

input:where(:not([type="radio"], [type="checkbox"])),
select,
textarea {
  inline-size: 100%;
  min-block-size: 3rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-md);
  background-color: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: max(1rem, 1em);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}

textarea { resize: vertical; min-block-size: 6rem; line-height: 1.5; }

:is(input:where(:not([type="radio"], [type="checkbox"])), select, textarea):hover { border-color: var(--field-hover); }

:is(input:where(:not([type="radio"], [type="checkbox"])), select, textarea):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -1px;
  border-color: var(--brand);
  box-shadow: 0 0 0 5px var(--ring);
}

input::placeholder, textarea::placeholder { color: var(--placeholder); opacity: 1; }

/* Autofilled fields keep the browser's tint, plus a ring so it isn't colour alone. */
:is(input, select, textarea):autofill { box-shadow: inset 0 0 0 1.5px #6f8fc9; }
:is(input, select, textarea):autofill:focus-visible { box-shadow: inset 0 0 0 1.5px #6f8fc9, 0 0 0 5px var(--ring); }

select {
  appearance: none;
  padding-inline-end: 2.6rem;
  background-image: var(--i-chevron);
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1.1rem;
  cursor: pointer;
}
select:has(option[value=""]:checked) { color: var(--placeholder); }
select option { color: var(--text); }

/* $ … / year, … years */
.affix { position: relative; display: flex; align-items: center; }
.affix-text {
  position: absolute;
  color: var(--muted);
  font-size: 0.9375rem;
  pointer-events: none;
}
.prefix { inset-inline-start: 0.95rem; font-weight: 500; }
.suffix { inset-inline-end: 0.95rem; }
.has-prefix input { padding-inline-start: 1.85rem; }
.has-suffix input { padding-inline-end: 4.6rem; }

/* Date of birth: month, day, year */
.date-parts {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 0.5rem;
}
.part { min-inline-size: 0; }
.part :is(input, select) { padding-inline: 0.75rem; }
.part select { padding-inline-end: 2rem; background-position: right 0.6rem center; }

/* very narrow: month on its own row, day and year beneath */
@container group (inline-size < 17rem) {
  .date-parts { grid-template-columns: 1fr 1fr; }
  .part-m { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ radios & checkboxes */

input:is([type="radio"], [type="checkbox"]) {
  appearance: none;
  flex: none;
  display: inline-grid;
  place-content: center;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin: 0;
  border: 1.5px solid var(--field-border);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;

  &::before {
    content: "";
    scale: 0;
    @media (prefers-reduced-motion: no-preference) { transition: scale 0.15s var(--ease); }
  }
  &:checked { border-color: var(--brand); }
  &:checked::before { scale: 1; }
  &:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
}

input[type="radio"] {
  border-radius: 50%;
  &::before { inline-size: 0.6rem; block-size: 0.6rem; border-radius: 50%; background: var(--brand); }
}

input[type="checkbox"] {
  border-radius: 0.35rem;
  &::before { inline-size: 0.8rem; block-size: 0.8rem; background: #fff; mask: var(--i-check) center / contain no-repeat; }
  &:checked { background: var(--brand); }
}

@media (forced-colors: active) {
  input:is([type="radio"], [type="checkbox"])::before { background: CanvasText; }
}

.radio-group > legend { margin-block-end: 0.5rem; }

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  > .choice { flex: 1 1 30%; }
  &.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-inline-size: 22rem; }
}

.choice {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-block-size: 3rem;
  padding: 0.65rem 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;

  &:hover { border-color: var(--field-hover); }
  &:has(:checked) {
    border-color: var(--brand);
    background: var(--brand-50);
    box-shadow: inset 0 0 0 1px var(--brand);
    color: var(--brand-ink);
  }
  &:has(:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
  input:focus-visible { outline: none; }
}

/* Number chips (dependents) */
.chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2.75rem, 1fr));
  gap: 0.5rem;
  max-inline-size: 26rem;
}

.chip {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-inline-size: 0;
  min-block-size: 3rem;
  padding: 0 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;

  input {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
    border-radius: inherit;
    background: transparent;
    opacity: 0;
    &::before { display: none; }
  }
  &:hover { border-color: var(--field-hover); }
  &:has(:checked) { background: var(--brand); border-color: var(--brand); color: #fff; }
  &:has(:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
}

/* Checkboxes */
.check-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-block-size: var(--target);
  font-weight: 500;
  cursor: pointer;
}

.check-card {
  align-items: flex-start;
  padding: 1rem 1.1rem;
  font-weight: 600;
  input { margin-block-start: 0.1rem; }
}

/* Signature */
.signature input {
  min-block-size: 3.75rem;
  padding: 0.6rem 0.85rem 0.35rem;
  border: 0;
  border-block-end: 2px solid var(--text);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--surface-2);
  box-shadow: none;
  font-family: var(--font-sign);
  font-size: 1.6rem;
  line-height: 1.2;
  &::placeholder { font-family: var(--font); font-size: 0.9375rem; }
  &:hover { border-color: var(--text); background: var(--sunken); }
  &:focus-visible { outline-offset: 2px; border-color: var(--brand); box-shadow: none; background: var(--brand-50); }
}

/* ------------------------------------------------------------------ errors
   Shown only after the applicant has changed a field and left it, or tried to
   continue past it. app.js tracks that per field (.is-invalid / .has-error)
   rather than using :user-invalid: in a one-form wizard, pressing Continue counts
   as a submit attempt for every later step too, so their empty fields would
   show as errors before the applicant even reached them.
   The message always has an icon and text, never colour alone. */

.error {
  display: none;
  align-items: flex-start;
  gap: 0.4rem;
  margin-block-start: 0.5rem;
  color: var(--danger);
  font-size: 0.8125rem;
  font-weight: 500;
}

.error-icon {
  flex: none;
  display: inline-block;
  inline-size: 1rem;
  block-size: 1rem;
  margin-block-start: 0.1rem;
  background: currentColor;
  mask: var(--i-error) center / contain no-repeat;
}

.field.has-error .error { display: flex; }

:is(input:where(:not([type="radio"], [type="checkbox"])), select, textarea).is-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 4px var(--danger-ring);
  &:focus-visible { outline-color: var(--danger); }
}
.signature input.is-invalid { box-shadow: none; background: var(--danger-50); }

.has-error :is(.choice, .chip) { border-color: var(--danger); }
.has-error input[type="checkbox"] { border-color: var(--danger); }

.form-status {
  display: flex;
  gap: 0.5rem;
  margin-block-start: 1.5rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgb(180 35 24 / 0.25);
  border-radius: var(--radius-md);
  background: var(--danger-50);
  color: var(--danger);
  font-weight: 500;
  &[hidden] { display: none; }
}

/* ------------------------------------------------------------------ buttons */

.actions {
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: space-between;
  gap: 0.75rem;
  margin-block-start: 2.25rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--line);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-block-size: 3rem;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s, scale 0.1s;
  &:active:not(:disabled) { scale: 0.98; }
  &:disabled { cursor: progress; opacity: 0.75; }
  &[hidden] { display: none; }
}

.button.primary {
  margin-inline-start: auto;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 1px 2px rgb(18 58 48 / 0.2), 0 6px 16px -8px rgb(18 58 48 / 0.5);
  &:hover:not(:disabled) { background: var(--brand-hover); }
  &::after {
    content: "";
    inline-size: 1.1rem;
    block-size: 1.1rem;
    background: currentColor;
    mask: var(--i-arrow) center / contain no-repeat;
    transition: translate 0.15s var(--ease);
  }
  &:hover::after { translate: 2px 0; }
  &.is-submit::after { mask-image: var(--i-check); }
}

.button.secondary {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--text);
  &:hover:not(:disabled) { border-color: var(--field-hover); background: var(--surface-2); }
}

#back::before {
  content: "";
  inline-size: 1.1rem;
  block-size: 1.1rem;
  background: currentColor;
  mask: var(--i-back) center / contain no-repeat;
}

@media (width < 30rem) {
  .actions .button { flex: 1 1 100%; }
}

.link-button {
  min-block-size: 2.25rem;
  padding: 0.25rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
  &:hover { border-color: var(--brand); background: var(--brand-50); }
}

/* ------------------------------------------------------------------ review */

.review { margin-block-start: 1.75rem; container: review / inline-size; }
.review-intro { color: var(--muted); margin-block-end: 1rem; font-size: 0.9375rem; }

.review-step {
  margin-block-end: 0.75rem;
  padding: 1rem 1.15rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 0.35rem;
  h3 { font-size: 1rem; font-weight: 650; }
}

.review-section + .review-section { margin-block-start: 0.75rem; }
.review-section h4 {
  margin-block: 0.35rem 0.15rem;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

dl { margin: 0; }
dl .row {
  display: grid;
  gap: 0 1rem;
  padding-block: 0.45rem;
  border-block-end: 1px solid var(--line);
  &:last-child { border-block-end: 0; }
}
dt { color: var(--muted); font-size: 0.875rem; }
dd { margin: 0; font-weight: 550; }
.row.is-empty dd { color: var(--placeholder); font-weight: 400; }

@container review (inline-size > 30rem) {
  dl .row { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

/* ------------------------------------------------------------------ done */

.done { text-align: center; padding-block: 3.5rem; }
.done h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); letter-spacing: -0.02em; margin-block: 1.25rem 0.75rem; }
.done h2:focus { outline: none; }
.done p { max-inline-size: 34rem; margin-inline: auto; color: var(--muted); }
.done p + p { margin-block-start: 0.75rem; }
.done .ref strong { color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }
.done-actions { margin-block-start: 1.75rem; }
.dev-note { margin-block-start: 1.5rem; padding: 0.75rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); }

.done-mark {
  display: grid;
  place-items: center;
  inline-size: 4.5rem;
  block-size: 4.5rem;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 8px var(--brand-100);
  &::before {
    content: "";
    inline-size: 2rem;
    block-size: 2rem;
    background: #fff;
    mask: var(--i-check) center / contain no-repeat;
  }
  @media (prefers-reduced-motion: no-preference) {
    animation: pop 0.5s var(--ease) both;
  }
}
@keyframes pop { from { scale: 0.6; opacity: 0; } }

.copy { display: none; }

/* Honeypot: off-screen for people, still in the form for bots. */
.hp {
  position: absolute;
  inset-inline-start: -10000px;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------------ step transitions */

@keyframes step-out-left { to { opacity: 0; transform: translateX(-2rem); } }
@keyframes step-in-right { from { opacity: 0; transform: translateX(2rem); } }
@keyframes step-out-right { to { opacity: 0; transform: translateX(2rem); } }
@keyframes step-in-left { from { opacity: 0; transform: translateX(-2rem); } }

::view-transition-group(step),
::view-transition-old(step),
::view-transition-new(step) { animation-duration: 0.3s; animation-timing-function: var(--ease); }
::view-transition-old(step) { animation-name: step-out-left; }
::view-transition-new(step) { animation-name: step-in-right; }

html:active-view-transition-type(forward) {
  &::view-transition-old(step) { animation-name: step-out-left; }
  &::view-transition-new(step) { animation-name: step-in-right; }
}
html:active-view-transition-type(backward) {
  &::view-transition-old(step) { animation-name: step-out-right; }
  &::view-transition-new(step) { animation-name: step-in-left; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  * { transition: none !important; }
}

/* ------------------------------------------------------------------ print (the applicant's copy) */

@media print {
  body { background: #fff; color: #000; }
  .sidebar, .mobile-progress, .skip-link, #application, .done-mark, .done-actions, .dev-note { display: none !important; }
  .shell { display: block; padding: 0; }
  .card { border: 0; box-shadow: none; padding: 0; }
  .done { text-align: start; padding: 0; }
  .done p { margin-inline: 0; color: #000; }
  .copy { display: block; margin-block-start: 1.5rem; }
  .copy h3 { margin-block: 1.25rem 0.25rem; font-size: 1.1rem; }
  .copy h4 { margin-block: 0.75rem 0.25rem; font-size: 0.95rem; }
  .copy dl .row { display: grid; grid-template-columns: 14rem 1fr; border-block-end: 1px solid #ddd; break-inside: avoid; }
  .copy dt { color: #444; }
}