/* /onboarding — first-run brand setup */

.ob-page {
    min-height: calc(100vh - 64px - 200px);
    display: flex;
    align-items: center;
    padding: 48px 32px;
}
@media (max-width: 720px) { .ob-page { padding: 32px 18px; } }

.ob-shell {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}

.ob-card {
    background: var(--bg-1);
    border: 1px solid var(--line-2);
    border-radius: 14px;
    padding: 36px 36px 28px;
}
@media (max-width: 720px) { .ob-card { padding: 28px 22px 22px; } }

.ob-card h1 {
    font: 600 clamp(22px, 2.6vw, 28px)/1.2 var(--sans);
    color: var(--ink);
    letter-spacing: -0.02em;
    margin: 8px 0 12px;
}
.ob-card .eyebrow { display: block; }

.ob-sub {
    color: var(--ink-2);
    font-size: 14.5px;
    line-height: 1.55;
    margin: 0 0 22px;
}

.ob-loading {
    text-align: center;
    color: var(--ink-3);
    padding: 64px 0;
    font-size: 13px;
}

.ob-form { display: flex; flex-direction: column; gap: 18px; }

.ob-field { display: flex; flex-direction: column; gap: 6px; }
.ob-label {
    font: 500 12px/1.3 var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-3);
}
.ob-optional { color: var(--ink-4); text-transform: none; letter-spacing: 0; font-style: italic; }

.ob-form input,
.ob-form select {
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: 8px;
    padding: 11px 14px;
    color: var(--ink);
    font: 500 15px/1.3 var(--sans);
    letter-spacing: -0.005em;
    outline: none;
    transition: border-color 120ms;
    width: 100%;
}
.ob-form input::placeholder { color: var(--ink-3); }
.ob-form input:focus,
.ob-form select:focus { border-color: var(--accent); }

.ob-hint {
    font-size: 12.5px;
    color: var(--ink-3);
    line-height: 1.45;
}

.ob-error {
    margin: -4px 0 4px;
    padding: 10px 14px;
    background: rgba(239,68,68,0.10);
    border: 1px solid rgba(239,68,68,0.30);
    border-radius: 8px;
    color: #ef4444;
    font: 500 13px/1.4 var(--sans);
}

.ob-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 6px;
    flex-wrap: wrap;
}

/* Claim refusals are actionable, not just red text: the user can sign in with
   a work email, track the domain as a vendor, or ask us to verify ownership.
   Neutral rather than alarm-coloured because none of these are errors on the
   user's part. */
.ob-refusal {
    margin: -4px 0 4px;
    padding: 16px 18px;
    background: var(--surface-2, rgba(148,163,184,0.08));
    border: 1px solid var(--border, rgba(148,163,184,0.28));
    border-radius: 10px;
}

.ob-refusal-title {
    margin: 0 0 6px;
    font: 600 15px/1.3 var(--sans);
    letter-spacing: -0.01em;
    color: var(--ink-1, #0f172a);
}

.ob-refusal-body {
    margin: 0 0 14px;
    font: 400 13px/1.55 var(--sans);
    color: var(--ink-2, #475569);
}

.ob-refusal-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ob-refusal-note {
    margin: 12px 0 0;
    font: 400 12px/1.5 var(--sans);
    color: var(--ink-3, #64748b);
}