/* Onboarding. One column, left aligned, big type, nothing centred for its own sake. */

body.onboarding { background: var(--paper); }

.ob-bar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
  display: flex; align-items: center; gap: 14px;
  padding: 11px max(16px, env(safe-area-inset-right, 0px)) 11px max(16px, env(safe-area-inset-left, 0px));
  background: var(--paper); border-bottom: 1px solid var(--rule);
}
.ob-rail { flex: 1 1 auto; display: flex; gap: 4px; min-width: 0; }
.ob-rail span { flex: 1 1 0; height: 5px; border-radius: 999px; background: var(--rule); }
.ob-rail span[data-done="true"] { background: var(--pine); }
.ob-rail span[data-current="true"] { background: var(--ball); }
.ob-step { font: 400 12px/1 var(--mono); color: var(--ink-soft); white-space: nowrap; }

.ob-main {
  display: block;
  max-width: 660px; margin: 0 auto;
  padding: 34px max(16px, env(safe-area-inset-right, 0px)) 70px max(16px, env(safe-area-inset-left, 0px));
}
.ob-eyebrow { font: 400 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 14px; }
.ob-main h1 { font: 800 clamp(30px, 6vw, 46px)/1.02 var(--display); letter-spacing: -0.03em; margin: 0 0 14px; text-wrap: balance; }
.ob-main h2 { font: 800 clamp(24px, 4.6vw, 33px)/1.1 var(--display); letter-spacing: -0.02em; margin: 0 0 18px; text-wrap: balance; }
.ob-main p.sub { font-size: 18px; line-height: 1.5; margin: 0 0 24px; max-width: 46ch; }
.ob-main p.note { font-size: 14px; color: var(--ink-soft); margin: 0 0 20px; max-width: 54ch; }

.ob-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.btn {
  border: none; border-radius: 999px; padding: 14px 28px;
  font: 600 16px/1 var(--body); cursor: pointer;
  background: var(--pine); color: var(--on-pine);
}
.btn.accent { background: var(--ball); color: var(--on-ball); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn.quiet { background: transparent; color: var(--ink-soft); text-decoration: underline; padding: 14px 6px; font-weight: 500; }

/* option cards */
.ob-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .ob-options { grid-template-columns: 1fr; } }
.ob-option {
  display: flex; align-items: center; gap: 14px; text-align: left;
  background: var(--card); border: 1.5px solid var(--rule); border-radius: 20px;
  padding: 16px 18px; cursor: pointer; font-size: 16px; line-height: 1.3;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.ob-option:hover { transform: translateY(-2px); border-color: var(--pine); }
.ob-option[aria-pressed="true"] { border-color: var(--pine); background: color-mix(in srgb, var(--ball) 16%, var(--card)); }
.ob-option svg { width: 30px; height: 30px; flex: none; stroke: var(--pine); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* forms */
.ob-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .ob-grid { grid-template-columns: 1fr; } }
.ob-field label { display: block; font: 500 13px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin-bottom: 6px; }
.ob-field input, .ob-field select, .ob-field textarea {
  width: 100%; background: var(--card); border: 1.5px solid var(--rule); border-radius: 15px; padding: 13px 15px; font-size: 16px;
}
.ob-field textarea { min-height: 120px; line-height: 1.5; border-radius: 18px; resize: vertical; }
.ob-field input:focus, .ob-field select:focus, .ob-field textarea:focus { outline: none; border-color: var(--ball); }
.ob-field { margin-bottom: 14px; }
/* A fixed label height keeps a field with a unit switch level with the one
   beside it. */
.ob-field label { display: flex; align-items: center; gap: 10px; justify-content: space-between; min-height: 28px; }


/* collar pairing */
.pairing { background: var(--card); border: 1.5px solid var(--rule); border-radius: 24px; padding: 22px; display: flex; align-items: center; gap: 18px; }
.collar-dot { width: 54px; height: 54px; border-radius: 50%; background: var(--sunk); flex: none; display: grid; place-items: center; }
.collar-dot i { width: 16px; height: 16px; border-radius: 50%; background: var(--ink-soft); display: block; }
.pairing[data-state="found"] .collar-dot i { background: var(--ok); }
.pairing[data-state="searching"] .collar-dot i { background: var(--watch); animation: ping 1.1s ease-in-out infinite; }
@keyframes ping { 0%, 100% { transform: scale(0.7); opacity: 0.5; } 50% { transform: scale(1.15); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pairing[data-state="searching"] .collar-dot i { animation: none; } }
.pairing strong { display: block; font: 600 17px/1.2 var(--display); }
.pairing span { font: 400 13px/1.4 var(--mono); color: var(--ink-soft); }
.meter { height: 8px; border-radius: 999px; background: var(--sunk); overflow: hidden; margin-top: 10px; }
.meter i { display: block; height: 100%; width: 0; background: var(--ok); transition: width 1.1s ease; }

/* photo picker */
.ob-photo { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.ob-photo .pick {
  width: 96px; height: 96px; border-radius: 50%; flex: none; cursor: pointer;
  border: 2px dashed var(--rule); background: var(--card); overflow: hidden;
  display: grid; place-items: center; font: 400 12px/1.3 var(--mono); color: var(--ink-soft); text-align: center;
}
.ob-photo .pick:hover, .ob-photo .pick[data-drop="true"] { border-color: var(--ball); color: var(--ink); }
.ob-photo .pick[data-busy="true"] { opacity: 0.5; }
.ob-photo .pick img { width: 100%; height: 100%; object-fit: cover; }
.ob-photo .pick.has-photo { border-style: solid; border-color: var(--ok); }
.ob-photo p { margin: 0; font-size: 14px; color: var(--ink-soft); max-width: 34ch; }
.personacard .face { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; float: right; margin: 0 0 10px 14px; box-shadow: 0 0 0 2.5px var(--ok); }
.contact .face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* samples and persona card */
.samples { display: flex; flex-direction: column; gap: 12px; margin: 0 0 8px; }
.sample { display: flex; flex-direction: column; gap: 5px; }
.sample .ask { align-self: flex-end; background: var(--bubble-you); color: var(--bubble-you-ink); border-radius: 20px; border-bottom-right-radius: 7px; padding: 10px 15px; max-width: 80%; }
.sample .say { align-self: flex-start; background: var(--bubble-dog); border-radius: 20px; border-bottom-left-radius: 7px; padding: 10px 15px; max-width: 85%; white-space: pre-wrap; }
.personacard { background: var(--card); border: 1.5px solid var(--rule); border-radius: 24px; padding: 20px 22px; }
.personacard h3 { font: 800 21px/1.1 var(--display); margin: 0 0 3px; }
.personacard .meta { font: 400 12.5px/1.4 var(--mono); color: var(--ink-soft); margin: 0 0 12px; }
.personacard textarea { width: 100%; border: none; background: transparent; font: inherit; font-size: 16.5px; line-height: 1.5; resize: vertical; min-height: 120px; padding: 0; }
.personacard textarea:focus { outline: none; }
.voicerow { font: 400 13px/1.4 var(--mono); color: var(--ink-soft); border-top: 1px solid var(--rule); margin-top: 14px; padding-top: 12px; }

/* contact card mock */
.contact { background: var(--card); border: 1.5px solid var(--rule); border-radius: 24px; padding: 22px; display: flex; align-items: center; gap: 16px; }
.contact .face { width: 62px; height: 62px; border-radius: 50%; background: var(--bubble-dog); color: var(--pine); display: grid; place-items: center; font: 800 25px/1 var(--display); flex: none; box-shadow: 0 0 0 2.5px var(--ok); }
.contact strong { font: 600 20px/1.2 var(--display); display: block; }
.contact span { font: 400 13px/1.5 var(--mono); color: var(--ink-soft); }
.statusline { font: 400 13px/1.5 var(--mono); border-radius: 14px; padding: 11px 14px; margin-top: 14px; }
.statusline.on { background: color-mix(in srgb, var(--ok) 15%, var(--card)); color: var(--ok); }
.statusline.off { background: var(--sunk); color: var(--ink-soft); }
.chips-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-pick button { border: 1.5px solid var(--rule); background: var(--card); border-radius: 999px; padding: 9px 16px; cursor: pointer; font-size: 15px; }
.chips-pick button[aria-pressed="true"] { border-color: var(--pine); background: color-mix(in srgb, var(--ball) 18%, var(--card)); font-weight: 600; }
.spinner { font: 400 13px/1.5 var(--mono); color: var(--ink-soft); }