/* Onboarding wizard chrome. Form fields + the reveal card live in auth.css.
   Mobile-first: the form is the page; the brand panel returns as a left column ≥768px.
   Glass on .ob__topbar comes from theme.css. */
.ob { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--surface-sunken); }

/* brand panel — desktop only (kept orange in both themes; it's brand) */
.ob__brand { display: none; }

/* sticky glass top bar (mobile): logo + progress */
.ob__topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px; padding: max(10px, env(safe-area-inset-top)) clamp(16px, 5vw, 24px) 10px; border-bottom: 1px solid var(--glass-border); }
.ob__logo img { height: 24px; display: block; }
.ob__progress { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ob__stepcount { font-size: 12px; color: var(--text-faint); font-family: var(--font-mono); }
.ob__stepcount b { color: var(--text); }
.ob-progress { display: flex; gap: 5px; width: clamp(72px, 28vw, 120px); }
.ob-progress span { flex: 1; height: 5px; border-radius: 3px; background: var(--border-strong); transition: background var(--dur-base) var(--ease-warm); }
.ob-progress span.done { background: var(--accent); }

.ob__main { flex: 1; display: flex; flex-direction: column; }
.ob__card { max-width: 480px; margin: 0 auto; width: 100%; padding: clamp(20px, 6vw, 32px) clamp(16px, 5vw, 24px) calc(env(safe-area-inset-bottom) + 32px); }
.ob__card .eyebrow { margin-bottom: 8px; }
.ob__card h2 { font-size: clamp(var(--text-xl), 6.5vw, 30px); margin: 0 0 8px; }
.ob__card .lead { margin-bottom: 28px; font-size: 16px; }
.row2 { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 600px) { .row2 { grid-template-columns: 1fr 1fr; } }

.species-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 420px) { .species-grid { grid-template-columns: repeat(3, 1fr); } }
.sp { position: relative; min-height: 88px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-lg); padding: 14px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; background: var(--surface-raised); transition: border-color var(--dur-fast) var(--ease-warm), background var(--dur-fast) var(--ease-warm), transform var(--dur-fast) var(--ease-warm); }
.sp i { font-size: 30px; color: var(--text-dim); }
.sp span { font-size: 14px; font-weight: 600; color: var(--text-dim); }
.sp:hover { border-color: var(--ovdje-orange-200); }
.sp input { position: absolute; opacity: 0; pointer-events: none; }
.sp.sel, .sp:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.sp.sel i, .sp.sel span, .sp:has(input:checked) i, .sp:has(input:checked) span { color: var(--accent-text); }
.sp:active { transform: scale(0.98); }
.sp:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

.ob-nav { display: flex; gap: 10px; margin-top: 28px; }
.ob-nav .btn { min-height: 48px; }

/* desktop: two-column with brand panel */
@media (min-width: 768px) {
  .ob { display: grid; grid-template-columns: clamp(360px, 36vw, 460px) 1fr; }
  .ob__topbar { display: none; }
  .ob__brand { display: flex; background: var(--ovdje-orange); color: var(--ovdje-ink); padding: 40px 44px; flex-direction: column; position: relative; overflow: hidden; }
  .ob__brand img { height: 30px; filter: brightness(0); }
  .ob__brand .ghost { position: absolute; right: -40px; bottom: -30px; font-size: 320px; color: rgba(15,27,36,0.06); transform: rotate(-8deg); }
  .ob__brand h1 { font-size: 40px; margin: auto 0 16px; max-width: 12ch; position: relative; }
  .ob__brand p { font-size: 17px; color: var(--ovdje-ink-700); max-width: 32ch; margin: 0 0 28px; position: relative; }
  .ob__why { position: relative; display: flex; flex-direction: column; gap: 14px; }
  .ob__why div { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; }
  .ob__why i { font-size: 22px; margin-top: 1px; }
  .ob__why b { font-weight: 700; }
  .ob__main { overflow-y: auto; }
}

/* no-JS: stack every step, hide wizard nav + progress (single submit at the end) */
:root:not(.has-js) .ob__card[hidden] { display: block !important; }
:root:not(.has-js) .ob-next, :root:not(.has-js) .ob-back, :root:not(.has-js) .ob__progress { display: none; }