@import url("/vendor/inter/inter.css");

/* Nothing of the wizard until the session probe in onboarding.js answers. See the note there:
   signed out, every answer was being saved into a 401. */
body:not([data-authed]) .ob-body,
body:not([data-authed]) .ob-progress { visibility: hidden; }


:root {
  --fg: #0a0a0a;
  --primary: #286bfe;
  --muted: #666666;
  --faint: rgba(10, 10, 10, 0.45);
  --input: #cccccc;
  --hair: rgba(10, 10, 10, 0.08);
  --hair-2: rgba(10, 10, 10, 0.14);
  --surface: rgba(10, 10, 10, 0.03);
  --surface-2: rgba(10, 10, 10, 0.05);
  --settle: cubic-bezier(0.32, 0.72, 0, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  color: var(--fg);
  background: #fff;
  min-height: 100vh;
}
a { color: inherit; }
strong, b { font-weight: 500; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }

.ob-header {
  height: 64px; border-bottom: 1px solid var(--hair);
  display: flex; align-items: center; padding: 0 32px;
}
.ob-header a { display: inline-flex; }
.ob-header img { height: 20px; width: auto; }
.ob-header .spacer { flex: 1; }
.ob-step-count { font-size: 0.8125rem; color: var(--faint); }

.ob-progress { height: 3px; background: var(--surface-2); }
.ob-progress .fill { height: 100%; width: 0; background: var(--primary); transition: width 360ms var(--settle); }

.ob-body { max-width: 520px; margin: 0 auto; padding: 72px 24px 96px; }
.ob-title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 500; letter-spacing: -0.04em; margin: 0 0 28px; }

.ob-input {
  width: 100%; height: 58px; padding: 0 18px; border: 1px solid var(--input);
  border-radius: 14px; font-family: inherit; font-size: 16px; outline: 0; background: #fff;
  transition: border-color 160ms ease;
}
.ob-input:focus { border-color: var(--fg); }
.ob-textarea {
  width: 100%; min-height: 150px; padding: 16px 18px; border: 1px solid var(--input);
  border-radius: 14px; font-family: inherit; font-size: 16px; line-height: 1.55; outline: 0;
  resize: vertical; transition: border-color 160ms ease;
}
.ob-textarea:focus { border-color: var(--fg); }
.input-prefixed { display: flex; align-items: center; height: 58px; border: 1px solid var(--input); border-radius: 14px; background: #fff; transition: border-color 160ms ease; }
.input-prefixed:focus-within { border-color: var(--fg); }
.input-prefixed .prefix { padding: 0 2px 0 18px; color: var(--muted); font-size: 16px; }
.input-prefixed input { flex: 1; min-width: 0; border: 0; height: 100%; padding: 0 18px 0 2px; background: transparent; font-family: inherit; font-size: 16px; outline: 0; }
.ob-help { font-size: 0.8125rem; color: var(--faint); margin: 10px 2px 0; }

.ob-choices { display: flex; flex-direction: column; gap: 12px; }
.ob-choice {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 18px 20px; border: 1px solid var(--hair-2); border-radius: 14px;
  background: #fff; cursor: pointer; font-size: 1rem; font-weight: 500; color: var(--fg);
  transition: border-color 160ms ease, background-color 160ms ease;
}
.ob-choice:hover { background: var(--surface); }
.ob-choice[aria-pressed="true"] { border-color: var(--primary); background: rgba(40, 107, 254, 0.06); }
.ob-radio { width: 20px; height: 20px; border-radius: 9999px; border: 1.5px solid var(--hair-2); flex: none; display: grid; place-items: center; }
.ob-choice[aria-pressed="true"] .ob-radio { border-color: var(--primary); }
.ob-choice[aria-pressed="true"] .ob-radio::after { content: ""; width: 10px; height: 10px; border-radius: 9999px; background: var(--primary); }

.ob-actions { display: flex; align-items: center; gap: 12px; margin-top: 36px; }
.ob-actions .spacer { flex: 1; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 26px; border-radius: 9999px; border: 0; cursor: pointer;
  font-family: inherit; font-size: 0.9375rem; font-weight: 400; text-decoration: none;
  transition: background-color 220ms ease, color 220ms ease, opacity 220ms ease;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-secondary { background: var(--surface-2); color: var(--fg); }
.btn-primary:hover:not(:disabled), .btn-secondary:hover:not(:disabled) { background: #000; color: #fff; }
.btn-primary:disabled { opacity: 0.4; cursor: default; }

@media (max-width: 640px) { .ob-header { padding: 0 20px; } .ob-body { padding-top: 48px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }