/* Onboarding form. Uses the design system's tokens so it sits with the rest of
   the site rather than beside it, and falls back cleanly if one is missing. */

.ob {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 72px) clamp(16px, 5vw, 28px) 96px;
  box-sizing: border-box;
  font-family: var(--font-sans, system-ui, sans-serif);
  color: var(--text-primary, #fff);
}

.ob-head { margin: 0 0 clamp(28px, 5vw, 48px); }

.ob-title {
  margin: 0 0 10px;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-weight: var(--weight-medium, 500);
}
.ob-sub {
  margin: 0 0 4px;
  max-width: 56ch;
  font-size: clamp(14px, 2vw, 16px);
  line-height: 1.5;
  color: var(--text-secondary, rgba(255, 255, 255, 0.6));
}

.ob-section {
  margin: 0 0 clamp(28px, 5vw, 44px);
  padding: 0 0 clamp(24px, 4vw, 36px);
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
}
.ob-section:last-of-type { border-bottom: none; }
.ob-section[hidden] { display: none; }

.ob-heading {
  margin: 0 0 18px;
  font-size: clamp(18px, 2.6vw, 22px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: var(--weight-medium, 500);
}

.ob-field { margin: 0 0 18px; }
.ob-field[hidden] { display: none; }

.ob-label {
  display: block;
  margin: 0 0 7px;
  font-size: 14px;
  font-weight: var(--weight-medium, 500);
  color: var(--text-primary, #fff);
}
.ob-optional {
  margin-left: 6px;
  font-weight: 400;
  font-size: 12px;
  color: var(--text-tertiary, rgba(255, 255, 255, 0.45));
}

.ob-input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  border: none;
  border-radius: var(--radius-field, 10px);
  background: var(--bg-card, rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 0 0 1px var(--border-control, rgba(255, 255, 255, 0.14));
  color: var(--text-primary, #fff);
  font-family: inherit;
  font-size: 16px; /* 16px or iOS zooms the page on focus */
  line-height: 1.4;
}
.ob-input:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent, #4a9eff);
}
textarea.ob-input { resize: vertical; min-height: 92px; }
select.ob-input { appearance: none; cursor: pointer; }
.ob-file { padding: 9px 13px; }
.ob-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--text-tertiary, rgba(255, 255, 255, 0.45));
}

.ob-category { margin: 0 0 18px; padding: 0; border: none; }
.ob-legend {
  padding: 0;
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary, rgba(255, 255, 255, 0.45));
}

.ob-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--radius-pill, 999px);
  background: var(--bg-card, rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 0 0 1px var(--border-control, rgba(255, 255, 255, 0.14));
  font-size: 14px;
  cursor: pointer;
  /* Comfortably tappable without hunting for the box itself. */
  min-height: 40px;
}
.ob-choice:hover { background: var(--bg-card-hover, rgba(255, 255, 255, 0.07)); }
.ob-choice input { accent-color: var(--accent, #4a9eff); width: 16px; height: 16px; margin: 0; }
.ob-choice:has(input:checked) { box-shadow: inset 0 0 0 1px var(--text-primary, #fff); }
.ob-other { margin-top: 10px; }

.ob-error {
  margin: 6px 0 0;
  min-height: 0;
  font-size: 13px;
  color: #ff8a80;
}
.ob-error:empty { margin: 0; }

.ob-actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.ob-status {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary, rgba(255, 255, 255, 0.6));
}
.ob-done { padding: 12px 0 0; }

/* Step progress. Hidden until the script runs, because without it the form is
   one long page and a step counter would be a lie. */
.ob-progress { margin: 22px 0 0; }
.ob-progress[hidden] { display: none; }
.ob-progress-bar {
  height: 3px;
  border-radius: 999px;
  background: var(--border-subtle, rgba(255, 255, 255, 0.12));
  overflow: hidden;
}
.ob-progress-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--text-primary, #fff);
  transition: width var(--duration-normal, 260ms) var(--ease-out, cubic-bezier(.2,.7,.3,1));
}
.ob-progress-text {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--text-tertiary, rgba(255, 255, 255, 0.45));
}

/* One step at a time, so the last section keeps its rule off. */
.ob-section { border-bottom: none; padding-bottom: 0; }

.ob-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
.ob-status { flex-basis: 100%; }
.ob-heading:focus-visible { outline: none; }

/* The same pill the rest of the site uses — these are the home page's own
   declarations, and the token stylesheets they read are already linked here. */
.ob-submit, .ob-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  height: 34px;
  padding: 10px 14px;
  border: none;
  border-radius: var(--radius-control, 999px);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--text-label-md-size, 14px);
  line-height: var(--text-label-md-line, 1);
  font-weight: var(--weight-semibold, 600);
  letter-spacing: var(--text-label-md-track, 0);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition-hover, opacity 160ms ease, transform 160ms ease);
}
.ob-submit { background: var(--bg-solid, #fff); color: var(--text-inverse, #000); }
.ob-back {
  background: transparent;
  color: var(--text-primary, #fff);
  box-shadow: inset 0 0 0 1px var(--border-control, rgba(255, 255, 255, 0.18));
}
.ob-submit:hover, .ob-back:hover { opacity: 0.88; }
.ob-submit:disabled { opacity: 0.6; cursor: default; }
.ob-back[hidden], .ob-submit[hidden] { display: none; }