/**
 * onboarding-step1.css
 * --------------------
 * Page-specific styles for the onboarding step 1 template selector.
 * Scoped under .onboarding-step1 to avoid leaking into other pages.
 */

/* Container + header */
.onboarding-step1 {
    padding: var(--space-8, 2rem) 0;
}
.onboarding-step1__header {
    text-align: center;
    margin-bottom: var(--space-6, 1.5rem);
}
.onboarding-step1__title {
    font-size: var(--font-size-2xl, 1.75rem);
    font-weight: 700;
    margin-bottom: var(--space-2, 0.5rem);
}
.onboarding-step1__subtitle {
    color: var(--color-text-secondary, #6b7280);
    max-width: 36rem;
    margin: 0 auto;
    line-height: 1.5;
}

/* Alert messages */
.onboarding-step1__alert {
    max-width: 36rem;
    margin: 0 auto var(--space-6, 1.5rem);
}
.onboarding-step1__error-list {
    margin: 0;
    padding-left: 1.25rem;
    list-style: disc;
}

/* Card grid */
.onboarding-step1__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--space-4, 1rem);
    max-width: 54rem;
    margin: 0 auto var(--space-6, 1.5rem);
}

/* Individual card (label wrapping a radio) */
.onboarding-step1__card {
    display: block;
    position: relative;
    border: 2px solid var(--color-border, #d1d5db);
    border-radius: var(--radius-md, 0.5rem);
    padding: var(--space-4, 1rem);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    background: var(--color-surface, #fff);
}
.onboarding-step1__card:hover {
    border-color: var(--color-primary, #2563eb);
    box-shadow: 0 0 0 1px var(--color-primary, #2563eb);
}

/* Selected state */
.onboarding-step1__card--selected,
.onboarding-step1__card:has(input:checked) {
    border-color: var(--color-primary, #2563eb);
    box-shadow: 0 0 0 2px var(--color-primary, #2563eb);
    background: var(--color-primary-light, #eff6ff);
}

/* Accessible focus outline when radio is focused via keyboard */
.onboarding-step1__card:focus-within {
    outline: 2px solid var(--color-focus, #2563eb);
    outline-offset: 2px;
}

/* Hide the native radio visually but keep it accessible */
.onboarding-step1__radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Card inner content */
.onboarding-step1__card-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 0.25rem);
}
.onboarding-step1__card-title {
    font-weight: 600;
    font-size: var(--font-size-base, 1rem);
}
.onboarding-step1__card-desc {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-secondary, #6b7280);
    line-height: 1.4;
}

/* Actions row */
.onboarding-step1__actions {
    text-align: center;
    margin-top: var(--space-4, 1rem);
}
.onboarding-step1__actions .btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Start-here fork: import from QuickBooks or set up from scratch */
.onboarding-step1__fork {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-4, 1rem);
    max-width: 48rem;
    margin: 0 auto var(--space-6, 1.5rem);
}
.onboarding-step1__fork-card {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: 1.1rem 1.25rem;
    border: 2px solid var(--color-border, #d1d5db);
    border-radius: 12px;
    background: var(--color-surface, #fff);
    color: var(--color-text, #111827);
    text-decoration: none;
}
.onboarding-step1__fork-card:hover,
.onboarding-step1__fork-card:focus-visible { border-color: var(--color-primary, #1d4ed8); }
.onboarding-step1__fork-card--qbo { background: var(--color-primary-bg, #eff6ff); border-color: var(--color-primary-light, #93c5fd); }
.onboarding-step1__fork-card span { color: var(--color-text-secondary, #4b5563); font-size: .95rem; }
.onboarding-step1__fork-tag {
    align-self: flex-start;
    background: var(--color-success-bg, #dcfce7);
    color: var(--color-success-text, #166534) !important;
    border-radius: 999px;
    padding: .05rem .6rem;
    font-size: .75rem !important;
    font-weight: 600;
}
.onboarding-step1__switch { margin-top: var(--space-3, .75rem); font-size: .95rem; }