/*
 * Customer onboarding web form. Borrows the sign-in page's brand (steel bar with the hazard stripe,
 * hi-vis green, paper) and nothing of the portal: no sidebar, no nav, no widgets.
 */
.onb {
    min-height: 100vh;
    background: var(--bs-ink);
    color: var(--bs-text);
}

.onb__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px clamp(16px, 4vw, 40px);
    background: linear-gradient(180deg, var(--bs-steel-2), var(--bs-steel) 60%, var(--bs-ink-2));
    border-bottom: 6px solid transparent;
    border-image: repeating-linear-gradient(-45deg, var(--bs-hi-vis) 0 12px, var(--bs-ink-2) 12px 24px) 1;
}

.onb__logo { display: block; height: 34px; width: auto; }

.onb__for {
    color: #fff;
    font-family: var(--bs-font-ui);
    font-weight: 600;
    text-align: right;
}

.onb__main {
    max-width: 880px;
    margin: 0 auto;
    padding: 28px clamp(16px, 4vw, 40px) 120px;
}

.onb__intro { color: #fff; margin-bottom: 20px; }
.onb__intro .onb__muted { color: rgba(255, 255, 255, 0.7); }

.onb__title {
    font-family: var(--bs-font-ui);
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 700;
    margin: 0 0 8px;
}

.onb__lead { max-width: 62ch; margin: 0 0 8px; }
.onb__muted { color: var(--bs-muted); margin: 0 0 12px; max-width: 62ch; }

.onb__card {
    background: var(--bs-paper);
    border-radius: 10px;
    padding: 22px clamp(16px, 3vw, 28px);
    margin-bottom: 18px;
}

.onb__card--narrow { max-width: 460px; margin: 40px auto; }

.onb__section {
    font-family: var(--bs-font-ui);
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 4px;
}

.onb__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px 18px;
    margin: 14px 0;
}

.onb__row {
    border: 1.5px solid var(--bs-line);
    border-radius: 8px;
    padding: 6px 16px 14px;
    margin: 12px 0;
}

.onb__row legend {
    float: none;
    width: auto;
    padding: 0 6px;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.onb .field label { display: block; }
.onb .field input,
.onb .field select,
.onb .field textarea {
    width: 100%;
    font-family: var(--bs-font-ui);
    font-size: 1rem;
    padding: 10px 12px;
    border: 1.5px solid var(--bs-line);
    border-radius: 6px;
    background: #fff;
    color: var(--bs-text);
}

/* Dark theme: the white above would sit under the theme's light text (unreadable). The portal's own
   dark rule for .field inputs ties on specificity and loads before this file, so it never reached here. */
[data-bs-theme="dark"] .onb .field input,
[data-bs-theme="dark"] .onb .field select,
[data-bs-theme="dark"] .onb .field textarea {
    background: var(--surface-3);
    color: var(--bs-text);
}

.onb .field input:focus,
.onb .field select:focus,
.onb .field textarea:focus {
    outline: none;
    border-color: var(--bs-hi-vis);
    box-shadow: 0 0 0 3px rgba(0, 222, 145, 0.3);
}

.onb .field--error input,
.onb .field--error select,
.onb .field--error textarea { border-color: #c0392b; }

.onb__req { color: #c0392b; }
.onb .field__hint { display: block; color: var(--bs-muted); font-size: 0.85rem; margin-top: 4px; }
.onb-issue { display: block; color: #c0392b; font-size: 0.88rem; margin-top: 4px; }

.onb__checks { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.onb__check { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
.onb__check input { width: auto; }

.onb__error {
    background: #fdecea;
    border: 1px solid #f1b5ae;
    color: #8a1f14;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 18px;
}

.onb__fields { display: grid; gap: 14px; margin-top: 16px; }

.onb__actions {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--bs-paper);
    border-top: 3px solid var(--bs-hi-vis);
    border-radius: 10px 10px 0 0;
    padding: 14px clamp(16px, 3vw, 28px);
}

.onb__buttons { display: flex; gap: 10px; }

.onb__btn {
    font-family: var(--bs-font-ui);
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    padding: 11px 20px;
    border: 1.5px solid transparent;
    cursor: pointer;
}

.onb__btn--primary { background: var(--bs-hi-vis); color: var(--bs-ink-2); }
.onb__btn--primary:hover:not(:disabled) { background: var(--bs-hi-vis-press); }
.onb__btn--primary:disabled { opacity: 0.45; cursor: not-allowed; }
.onb__btn--secondary { background: #fff; border-color: var(--bs-ink-2); color: var(--bs-ink-2); }
.onb__btn--ghost { background: transparent; color: var(--bs-muted); padding-left: 0; }
.onb__btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(0, 222, 145, 0.35), 0 0 0 1.5px var(--bs-ink-2); }

/* The sign-in page's field labels are small mono caps; a checkbox label is a plain sentence. */
.onb .field .onb__check {
    font-family: var(--bs-font-ui);
    font-size: 0.95rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--bs-text);
}

.onb__checks { margin-top: 4px; }

.onb .field .onb__check input[type='checkbox'],
.onb .onb__check input[type='checkbox'] {
    width: auto;
    padding: 0;
    flex: 0 0 auto;
}