/* Onboarding flow: Welcome, Onboarding Choice, Needs Analysis. */

.lc-onboarding-page {
    padding: var(--lc-space-xl) 0 64px;
}

/* Welcome page */

.lc-welcome {
    max-width: 1040px;
    margin: 0 auto;
}

.lc-welcome__hero {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--lc-space-xl);
    align-items: center;
    margin-bottom: var(--lc-space-xl);
}

.lc-welcome__emoji {
    font-size: 2.2rem;
    display: block;
    margin-bottom: var(--lc-space-sm);
}

.lc-welcome__copy h1 {
    margin: 0 0 var(--lc-space-sm);
    color: var(--lc-navy);
}

.lc-welcome__lead {
    font-weight: 700;
    color: var(--lc-navy);
    margin: 0 0 var(--lc-space-sm);
}

.lc-welcome__copy > p {
    color: var(--lc-text-secondary);
}

.lc-welcome__art {
    max-width: 260px;
    margin: 0 auto;
}

.lc-info-banner--success {
    gap: var(--lc-space-sm);
    background: rgba(46, 133, 64, 0.08);
    border-color: rgba(46, 133, 64, 0.25);
    color: var(--lc-navy);
    font-size: 0.85rem;
    padding: var(--lc-space-sm) var(--lc-space-md);
    margin-top: var(--lc-space-md);
}

.lc-info-banner--success .lc-info-banner__icon {
    color: var(--lc-green);
    font-size: 1.1rem;
}

.lc-welcome__next-title {
    text-align: center;
    color: var(--lc-navy);
    font-size: 1.2rem;
    margin: 0 0 var(--lc-space-md);
}

.lc-welcome__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--lc-space-md);
    margin-bottom: var(--lc-space-xl);
}

.lc-welcome__card {
    background: #fff;
    border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius-lg);
    padding: var(--lc-space-lg) var(--lc-space-md);
    text-align: center;
}

.lc-welcome__card .lc-feature__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--lc-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lc-welcome__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--lc-space-sm);
}

/* Onboarding choice page */

.lc-onboarding-choice {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.lc-onboarding-choice__eyebrow {
    text-align: center;
}

.lc-onboarding-choice h1 {
    color: var(--lc-navy);
    margin: 0 0 var(--lc-space-sm);
}

.lc-onboarding-choice__lead {
    color: var(--lc-text-secondary);
    margin: 0 0 var(--lc-space-xl);
}

.lc-onboarding-choice__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--lc-space-sm);
    margin-bottom: var(--lc-space-lg);
}

.lc-onboarding-choice__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--lc-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lc-onboarding-choice__card h2 {
    margin: 0;
    color: var(--lc-navy);
}

.lc-onboarding-choice__card p {
    color: var(--lc-text-secondary);
    margin: 0 0 var(--lc-space-sm);
}

/* Start Learning confirmation page */

.lc-start-learning {
    max-width: 480px;
    margin: 0 auto;
    text-align: center;
    background: #fff;
    border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius-lg);
    box-shadow: var(--lc-shadow-card);
    padding: var(--lc-space-xl) var(--lc-space-lg);
}

.lc-start-learning__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(46, 133, 64, 0.16);
    font-size: 2rem;
    margin-bottom: var(--lc-space-md);
}

.lc-start-learning h1 {
    color: var(--lc-navy);
    margin: 0 0 var(--lc-space-sm);
}

.lc-start-learning p {
    color: var(--lc-text-secondary);
    margin: 0 0 var(--lc-space-lg);
}

/* Needs Analysis form page */

.lc-needs-analysis {
    max-width: 1040px;
    margin: 0 auto;
}

.lc-needs-analysis__back {
    display: inline-block;
    color: var(--lc-text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: var(--lc-space-lg);
}

.lc-needs-analysis__back:hover {
    color: var(--lc-navy);
}

.lc-needs-analysis__layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--lc-space-lg);
    align-items: start;
}

.lc-onboarding-stepper {
    background: #fff;
    border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius-lg);
    box-shadow: var(--lc-shadow-card);
    padding: var(--lc-space-lg);
}

.lc-onboarding-stepper__step {
    display: flex;
    align-items: center;
    gap: var(--lc-space-sm);
    padding: var(--lc-space-sm) 0;
    color: var(--lc-text-muted);
    font-size: 0.9rem;
}

.lc-onboarding-stepper__step--active {
    color: var(--lc-navy);
    font-weight: 700;
}

.lc-onboarding-stepper__number {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--lc-bg-subtle);
    color: var(--lc-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

.lc-onboarding-stepper__step--active .lc-onboarding-stepper__number {
    background: var(--lc-blue);
    color: #fff;
}

.lc-needs-analysis__intro {
    display: flex;
    align-items: center;
    gap: var(--lc-space-md);
    background: #fff;
    border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius-lg);
    box-shadow: var(--lc-shadow-card);
    padding: var(--lc-space-lg);
    margin-bottom: var(--lc-space-lg);
}

.lc-needs-analysis__intro-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--lc-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lc-needs-analysis__intro h1 {
    margin: 0 0 4px;
    color: var(--lc-navy);
    font-size: 1.4rem;
}

.lc-needs-analysis__intro-lead {
    margin: 0 0 2px;
    color: var(--lc-navy);
    font-weight: 600;
}

.lc-needs-analysis__intro p:last-child {
    margin: 0;
    color: var(--lc-text-muted);
    font-size: 0.85rem;
}

.lc-needs-analysis__form-col form > .lc-field,
.lc-needs-analysis__form-col form > .lc-field-row {
    margin-top: var(--lc-space-lg);
}

.lc-needs-analysis__form-col form > .lc-field:first-child,
.lc-needs-analysis__form-col form > .lc-field-row:first-child {
    margin-top: 0;
}

/* Section headers ("Section 1: Personal Information", ...) between groups
   of Pre-Course Survey fields — same eyebrow-style treatment as the rest
   of the app's small uppercase section labels. */
.lc-needs-analysis__section-title {
    margin: var(--lc-space-xl) 0 var(--lc-space-sm);
    padding-bottom: var(--lc-space-xs);
    border-bottom: 1px solid var(--lc-border);
    color: var(--lc-navy);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.lc-needs-analysis__form-col form > .lc-needs-analysis__section-title:first-child {
    margin-top: 0;
}

/* The free-text field paired with a "Other" select option or checkbox
   (e.g. native language, biggest concern) — always present, not just
   toggled visible, so nothing shifts around when a student picks "Other"
   (see lc-needs-analysis.js, which focuses/clears it instead). */
.lc-field__other {
    margin-top: var(--lc-space-xs);
}

/* Both fields of a row must share the same top offset, or their inputs
   won't line up — margin belongs on the row as a whole, not on each field. */
.lc-needs-analysis__form-col .lc-field-row .lc-field {
    margin-top: 0;
}

.lc-needs-analysis__form-col > form > .lc-info-banner {
    display: flex;
    margin: var(--lc-space-lg) 0;
}

.lc-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-xs);
}

.lc-scale {
    display: flex;
    gap: var(--lc-space-sm);
    margin-top: var(--lc-space-xs);
}

.lc-scale__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.lc-scale__input + label {
    width: 40px;
    height: 40px;
    border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--lc-navy);
    cursor: pointer;
}

.lc-scale__input:checked + label {
    background: var(--lc-blue);
    border-color: var(--lc-blue);
    color: #fff;
}

.lc-scale__input:focus-visible + label {
    outline: 2px solid var(--lc-blue);
    outline-offset: 1px;
}

.lc-scale__labels {
    display: flex;
    justify-content: space-between;
    max-width: 240px;
    font-size: 0.75rem;
    color: var(--lc-text-muted);
    margin-top: 4px;
}

.lc-challenges-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px var(--lc-space-md);
}

/* My Profile — Needs Analysis section (reuses the fields above) */

.lc-profile__needs-analysis {
    margin-top: var(--lc-space-lg);
}

.lc-profile__needs-analysis summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    list-style: none;
    color: var(--lc-navy);
    font-weight: 700;
    font-size: 1.1rem;
}

.lc-profile__needs-analysis summary::-webkit-details-marker {
    display: none;
}

.lc-profile__needs-analysis-chevron {
    color: var(--lc-text-muted);
    transition: transform 0.15s ease;
}

.lc-profile__needs-analysis[open] .lc-profile__needs-analysis-chevron {
    transform: rotate(180deg);
}

.lc-profile__needs-analysis-body {
    margin-top: var(--lc-space-md);
}

/* My Profile — redesigned page (Personal Profile / Learning Profile /
   Course Summary / Account Settings cards), 2026-08-07. The full editable
   Pre-Course Survey form and the Full Name/Email edit form still reuse
   .lc-profile__needs-analysis (the <details> accordion above) — these
   rules only cover the new summary cards sitting above them. */

.lc-profile2 {
    max-width: 760px;
    margin: 0 auto;
}

.lc-profile2__header {
    margin-bottom: var(--lc-space-lg);
}

.lc-profile2__header h1 {
    margin: 0 0 4px;
    color: var(--lc-navy);
}

.lc-profile2__header p {
    margin: 0;
    color: var(--lc-text-secondary);
}

.lc-profile-card {
    margin-bottom: var(--lc-space-lg);
}

/* Bleeds to the card's own padded edges (negative margin equal to
   .lc-card's padding) so the tint reads as a full-width header band
   rather than an inset chip, then re-adds that same space as padding. */
.lc-profile-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lc-space-md);
    margin: calc(-1 * var(--lc-space-lg)) calc(-1 * var(--lc-space-lg)) var(--lc-space-md);
    padding: var(--lc-space-md) var(--lc-space-lg);
    background: color-mix(in srgb, var(--lc-profile-card-color, var(--lc-navy)) 10%, transparent);
    border-radius: var(--lc-radius-lg) var(--lc-radius-lg) 0 0;
}

.lc-profile-card h2,
.lc-profile-card__header h2 {
    display: flex;
    align-items: center;
    gap: var(--lc-space-xs);
    margin: 0 0 4px;
    color: var(--lc-navy);
    font-size: 1.1rem;
}

.lc-profile-card h2 svg,
.lc-profile-card__header h2 svg {
    width: 20px;
    height: 20px;
    color: var(--lc-profile-card-color, var(--lc-blue));
}

/* Each card's own accent color, same 4-color set as the My Course category
   cards (civics/writing/reading/n400) — carries through to that card's own
   h2 icon (above) and every row icon inside it (below). */
.lc-profile-card--blue { --lc-profile-card-color: var(--lc-blue); }
.lc-profile-card--green { --lc-profile-card-color: var(--lc-green); }
.lc-profile-card--purple { --lc-profile-card-color: var(--lc-purple); }
.lc-profile-card--orange { --lc-profile-card-color: var(--lc-orange); }

.lc-profile-card__subtitle-block {
    margin: 0 0 var(--lc-space-md);
    color: var(--lc-text-muted);
    font-size: 0.85rem;
}

/* Course Summary / Account Settings have no toggle button, just a title +
   subtitle wrapped in .lc-profile-card__header for the colored band — the
   subtitle's own bottom margin would otherwise pad out the band itself,
   since the header's own padding already provides that spacing below it. */
.lc-profile-card__header .lc-profile-card__subtitle-block {
    margin-bottom: 0;
}

.lc-profile-card__toggle-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    /* .lc-btn--outline defaults to navy — override with this card's own
       accent color (set by .lc-profile-card--blue/--green/--purple/--orange). */
    border-color: var(--lc-profile-card-color, var(--lc-navy));
    color: var(--lc-profile-card-color, var(--lc-navy));
}

.lc-profile-card__toggle-btn:hover {
    background: color-mix(in srgb, var(--lc-profile-card-color, var(--lc-navy)) 8%, transparent);
}

.lc-profile-card__toggle-btn svg {
    width: 14px;
    height: 14px;
}

/* The "saved" confirmation banner sits between the card header and its
   content (avatar row / rows list) — needs its own breathing room below,
   not just the .lc-info-banner--success default's margin-top above. */
.lc-profile-card > .lc-info-banner--success {
    margin-bottom: var(--lc-space-lg);
}

.lc-profile-card__avatar-row {
    display: flex;
    align-items: flex-start;
    gap: var(--lc-space-lg);
}

.lc-profile-card__avatar {
    border-radius: 50%;
    flex-shrink: 0;
}

.lc-profile-card__avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.lc-profile-card__avatar-form {
    display: contents;
}

.lc-profile-card__avatar-edit {
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--lc-profile-card-color, var(--lc-blue));
    color: #fff;
    border: 2px solid #fff;
    cursor: pointer;
}

.lc-profile-card__avatar-edit svg {
    width: 16px;
    height: 16px;
}

.lc-profile-card__avatar-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.lc-profile-card__rows {
    flex: 1;
    min-width: 0;
}

.lc-profile-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lc-space-md);
    padding: 10px 0;
    border-bottom: 1px solid var(--lc-border);
    font-size: 0.88rem;
}

.lc-profile-card__row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Sub-headers grouping Learning Profile's ~20 rows into the survey's own
   sections (Language & English Level, Citizenship Test, ...) — lighter
   weight than .lc-needs-analysis__section-title since these sit inside an
   already-titled card, not the top of a whole page/form. */
.lc-profile-card__group-label {
    margin: var(--lc-space-md) 0 6px;
    padding-bottom: 4px;
    border-bottom: 2px solid color-mix(in srgb, var(--lc-profile-card-color, var(--lc-text-muted)) 25%, transparent);
    color: var(--lc-profile-card-color, var(--lc-text-muted));
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.lc-profile-card__rows > .lc-profile-card__group-label:first-child {
    margin-top: 0;
}

/* Learning Profile has no avatar column, so its rows would otherwise start
   flush with the card edge — this indents just the rows (not the group
   labels above them) by the same width Personal Profile's avatar+gap
   already pushes its own rows over, so both cards' fields line up. */
.lc-profile-card--green .lc-profile-card__row {
    padding-left: 120px;
}

.lc-profile-card__row-label {
    display: flex;
    align-items: center;
    gap: var(--lc-space-xs);
    color: var(--lc-text-muted);
}

.lc-profile-card__row-icon {
    display: flex;
    flex-shrink: 0;
    color: var(--lc-profile-card-color, var(--lc-text-muted));
}

.lc-profile-card__row-icon svg {
    width: 16px;
    height: 16px;
}

.lc-profile-card__row strong {
    color: var(--lc-navy);
    text-align: right;
}

.lc-profile-card__edit-form {
    margin-top: var(--lc-space-md);
}

.lc-profile-card__edit-form[open] {
    padding-top: var(--lc-space-md);
    border-top: 1px solid var(--lc-border);
}

/* No visible "Edit Profile ▾" bar of its own — the card header's own Edit
   button (data-toggle-target) is the only way in, and toggles this same
   <details> open/closed via lc-needs-analysis.js. Native <summary> is kept
   in the markup (not removed) so the details element stays keyboard/
   screen-reader operable, just visually hidden. */
.lc-profile-card__edit-form > summary {
    display: none;
}

.lc-profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--lc-space-md);
}

.lc-profile-stats__tile {
    padding: var(--lc-space-md);
    border-radius: var(--lc-radius-lg);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.lc-profile-stats__tile strong {
    font-size: 1.4rem;
    color: var(--lc-navy);
}

.lc-profile-stats__tile > span:last-child {
    font-size: 0.78rem;
    color: var(--lc-text-secondary);
}

.lc-profile-stats__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.lc-profile-stats__icon svg {
    width: 20px;
    height: 20px;
}

.lc-profile-stats__tile--blue { background: rgba(0, 107, 182, 0.08); }
.lc-profile-stats__tile--blue .lc-profile-stats__icon { background: rgba(0, 107, 182, 0.16); color: var(--lc-blue); }

.lc-profile-stats__tile--green { background: rgba(46, 133, 64, 0.08); }
.lc-profile-stats__tile--green .lc-profile-stats__icon { background: rgba(46, 133, 64, 0.16); color: var(--lc-green); }

.lc-profile-stats__tile--purple { background: rgba(124, 79, 224, 0.08); }
.lc-profile-stats__tile--purple .lc-profile-stats__icon { background: rgba(124, 79, 224, 0.16); color: var(--lc-purple); }

.lc-profile-settings-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lc-profile-settings-list li,
.lc-profile-settings-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lc-space-md);
    padding: 12px 0;
    border-bottom: 1px solid var(--lc-border);
    font-size: 0.88rem;
    color: var(--lc-navy);
}

.lc-profile-settings-list a {
    text-decoration: none;
}

.lc-profile-settings-list a:hover {
    color: var(--lc-blue);
}

.lc-profile-settings-list li:last-child,
.lc-profile-settings-list a:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.lc-profile-settings-list__badge {
    font-size: 0.72rem;
    color: var(--lc-text-muted);
    background: var(--lc-bg-subtle);
    border-radius: 999px;
    padding: 3px 10px;
}

.lc-profile-settings-list__hint {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--lc-text-muted);
}

@media (max-width: 860px) {
    /* The "Edit Profile"/"Edit Learning Profile" button was flex-shrink:0
       next to a title that can wrap to 2-3 lines on narrow screens (e.g.
       "Learning Profile (from pre-course survey)") — same row had no
       room left and the button overflowed past the card's edge. Stack
       title above button instead, button full-width. */
    .lc-profile-card__header {
        flex-direction: column;
        align-items: stretch;
    }

    .lc-profile-card__toggle-btn {
        width: 100%;
        justify-content: center;
    }

    .lc-profile-card__avatar-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* Side-by-side label/value wraps badly once either one needs 2 lines
       (long survey question labels + long answers) — text-align:right on
       the whole row also dragged the label's own wrapped second line
       rightward, away from its icon. Stack label above value instead,
       both left-aligned, a standard mobile detail-list pattern. */
    .lc-profile-card__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    /* The desktop-only alignment indent (see .lc-profile-card--green
       .lc-profile-card__row above) just eats into already-tight mobile
       width once rows stack full-width — drop it below the breakpoint. */
    .lc-profile-card--green .lc-profile-card__row {
        padding-left: 0;
    }

    .lc-profile-card__row strong {
        text-align: left;
    }

    .lc-profile-stats {
        grid-template-columns: 1fr;
    }

    .lc-welcome__hero {
        grid-template-columns: 1fr;
    }

    .lc-welcome__cards {
        grid-template-columns: 1fr;
    }

    .lc-needs-analysis__layout {
        grid-template-columns: 1fr;
    }

    .lc-challenges-grid {
        grid-template-columns: 1fr;
    }
}