/*
 * Try-It Onboarding v2
 * Design system: Brutally Minimal + Editorial Warmth
 * Mobile-first, max-width 560px centered
 */

/* ─── Custom properties ────────────────────────────────────────────────────── */
.tryit-onboarding {
    --tob-bg:         #FAFAF8;
    --tob-text:       #1A1A1A;
    --tob-accent:     #7D92FF;
    --tob-capture:    #7DFFA9;
    --tob-purple:     #A97DFF;
    --tob-muted:      #9A9A9A;
    --tob-border:     #E8E8E4;
    --tob-dot-off:    #D4D4D0;
    --tob-font-disp:  'Fraunces', Georgia, serif;
    --tob-font-ui:    'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --tob-radius-sm:  4px;
    --tob-radius-md:  12px;
    --tob-radius-lg:  16px;
    --tob-radius-pill:100px;
    --tob-ease-in:    ease-in;
    --tob-ease-out:   ease-out;
    --tob-dur-short:  200ms;
    --tob-dur-med:    300ms;
    --tob-dur-long:   400ms;
}

/* ─── Container ────────────────────────────────────────────────────────────── */
.tryit-onboarding {
    background:  var(--tob-bg);
    color:       var(--tob-text);
    font-family: var(--tob-font-ui);
    max-width:   560px;
    margin:      0 auto;
    padding:     0 24px 64px;
    position:    relative;
    min-height:  520px;
}

/* Suppress existing completion card while onboarding is active */
body.tryit-onboarding-active .tryit-completion {
    display: none !important;
}

/* Suppress "Track your progress: Log in or Become a member" prompt —
   onboarding tracks everything automatically; this prompt adds friction. */
body.tryit-onboarding-active #sir-login-prompt {
    display: none !important;
}

/* ─── Progress dots ────────────────────────────────────────────────────────── */
.tob-progress {
    display:         flex;
    gap:             8px;
    justify-content: center;
    padding:         32px 0 0;
    margin-bottom:   32px;
}

.tob-dot {
    width:            6px;
    height:           6px;
    border-radius:    50%;
    background:       var(--tob-dot-off);
    transition:       width var(--tob-dur-med) var(--tob-ease-out),
                      background var(--tob-dur-short) var(--tob-ease-out),
                      border-radius var(--tob-dur-med) var(--tob-ease-out);
}

.tob-dot--active {
    width:         20px;
    border-radius: 3px;
    background:    var(--tob-accent);
}

.tob-dot--done {
    background:    var(--tob-capture);
}

/* ─── Steps ────────────────────────────────────────────────────────────────── */
.tob-step {
    display:    none;
    animation:  tob-fade-in var(--tob-dur-med) var(--tob-ease-out);
}

.tob-step--active {
    display: block;
}

@keyframes tob-fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Step header ──────────────────────────────────────────────────────────── */
.tob-step-header {
    margin-bottom: 24px;
    text-align:    center;
}

.tob-step-label {
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--tob-muted);
    margin:         0 0 8px;
}

.tob-step-headline {
    font-family: var(--tob-font-ui);
    font-size:   17px;
    font-weight: 400;
    line-height: 1.5;
    color:       var(--tob-text);
    margin:      0;
}


/* ─── Quiz slot — zero chrome, the quiz floats in whitespace ──────────────── */
.tob-quiz-slot {
    /* No box, no border, no background chrome — the quiz owns this space */
    margin-bottom: 24px;
}

/*
 * Override irl-quiz-ui's card styling within onboarding slots.
 * The existing quiz has a card wrapper; we strip it inside onboarding.
 */
.tob-quiz-slot .quiz-card,
.tob-quiz-slot .sir-quiz-wrapper,
.tob-quiz-slot .quizWrapper {
    background:    transparent !important;
    border:        none !important;
    box-shadow:    none !important;
    border-radius: 0 !important;
    padding:       0 !important;
}

/* Blank inputs — underline only, no box */
.tob-quiz-slot input.single_input {
    border:           none;
    border-bottom:    2px solid var(--tob-accent);
    border-radius:    var(--tob-radius-sm) var(--tob-radius-sm) 0 0;
    background:       rgba(125, 146, 255, 0.05);
    outline:          none;
    font-family:      var(--tob-font-ui);
    font-size:        inherit;
    color:            var(--tob-accent);
    font-weight:      500;
    padding:          2px 6px;
    transition:       border-color var(--tob-dur-short), background var(--tob-dur-short),
                      box-shadow var(--tob-dur-short);
}

.tob-quiz-slot input.single_input:focus {
    border-bottom-color: var(--tob-accent);
    background:          rgba(125, 146, 255, 0.10);
    box-shadow:          0 0 0 3px rgba(125, 146, 255, 0.15);
}

.tob-quiz-slot input.single_input.is_correct {
    border-bottom-color: var(--tob-capture);
    background:          rgba(125, 255, 169, 0.08);
    color:               #0A4A2A;
}

.tob-quiz-slot input.single_input.is_hint {
    border-bottom-color: var(--tob-purple);
    background:          rgba(169, 125, 255, 0.08);
    color:               var(--tob-purple);
}

/* Transcript text size */
.tob-quiz-slot .transcript-word,
.tob-quiz-slot .single_word_container {
    font-size:   17px;
    line-height: 2.4;
}

/* ─── Hint / leveler area ──────────────────────────────────────────────────── */
.tob-hint-area {
    text-align:    center;
    margin-top:    16px;
    margin-bottom: 8px;
    animation:     tob-fade-in var(--tob-dur-med) var(--tob-ease-out);
}

.tob-hint-btn,
.tob-leveler-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    background:      transparent;
    color:           var(--tob-purple);
    border:          1px solid rgba(169, 125, 255, 0.35);
    border-radius:   var(--tob-radius-pill);
    padding:         10px 20px;
    font-family:     var(--tob-font-ui);
    font-size:       14px;
    cursor:          pointer;
    transition:      background var(--tob-dur-short), border-color var(--tob-dur-short);
    line-height:     1.4;
    text-align:      center;
}

.tob-hint-btn:hover,
.tob-leveler-btn:hover {
    background:    rgba(169, 125, 255, 0.08);
    border-color:  var(--tob-purple);
}

/* ─── Ear Profile card ─────────────────────────────────────────────────────── */
.tob-ear-profile {
    padding:    48px 0 32px;
    text-align: center;
    animation:  tob-ear-reveal var(--tob-dur-long) var(--tob-ease-out);
}

@keyframes tob-ear-reveal {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.tob-ear-inner {
    max-width: 380px;
    margin:    0 auto;
}

.tob-ear-badge {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           80px;
    height:          80px;
    border-radius:   50%;
    border:          3px solid var(--tob-capture);
    font-family:     var(--tob-font-disp);
    font-size:       12px;
    font-weight:     500;
    color:           #0A4A2A;
    background:      rgba(125, 255, 169, 0.12);
    margin:          0 auto 20px;
    line-height:     1.2;
    padding:         8px;
}

.tob-ear-zone-label {
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--tob-muted);
    margin:         0 0 8px;
}

.tob-ear-zone-name {
    font-family: var(--tob-font-disp);
    font-size:   28px;
    font-weight: 400;
    line-height: 1.25;
    margin:      0 0 8px;
    color:       var(--tob-text);
}

.tob-ear-zone-sub {
    font-size:   15px;
    color:       var(--tob-muted);
    line-height: 1.5;
    margin:      0 0 6px;
}

.tob-ear-word-count {
    font-size:   15px;
    color:       var(--tob-text);
    margin:      0 0 28px;
}

.tob-ear-word-count strong {
    color:       var(--tob-accent);
    font-weight: 600;
}

/* ─── Ear Profile recommendation (UP NEXT) ─────────────────────────────── */
.tob-ear-next {
    margin:     0 auto 24px;
    padding:    14px 0;
    border-top: 1px solid var(--tob-border);
    text-align: left;
    max-width:  320px;
}

.tob-ear-next-label {
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--tob-accent);
    margin:         0 0 4px;
}

.tob-ear-next-title {
    font-size:   15px;
    font-weight: 500;
    color:       var(--tob-text);
    margin:      0 0 4px;
    line-height: 1.4;
}

.tob-ear-next-why {
    font-size:   13px;
    color:       var(--tob-muted);
    margin:      0;
    line-height: 1.4;
}

.tob-ear-cta {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    background:      var(--tob-capture);
    color:           #0A2A1A;
    border:          none;
    border-radius:   var(--tob-radius-pill);
    padding:         16px 32px;
    font-family:     var(--tob-font-ui);
    font-size:       16px;
    font-weight:     600;
    text-decoration: none;
    cursor:          pointer;
    transition:      opacity var(--tob-dur-short);
    margin-bottom:   12px;
    width:           100%;
    box-sizing:      border-box;
    text-align:      center;
}

.tob-ear-cta:hover {
    opacity: 0.88;
    color:   #0A2A1A;
}

.tob-ear-no-cc {
    font-size:  13px;
    color:      var(--tob-muted);
    margin:     0;
    text-align: center;
}

/* ─── Suppress quiz chrome within onboarding ───────────────────────────────── */

/* Level dropdown + CEFR slider — all clips */
.tryit-onboarding .irl-level-selector,
.tryit-onboarding .irl-difficulty-madlib,
.tryit-onboarding .irl-dropdown-overlay,
.tryit-onboarding .irl-dropdown-btn,
.tryit-onboarding .irl-dropdown-options,
.tryit-onboarding .slider-container,
.tryit-onboarding #cefr-slider,
.tryit-onboarding #slider-value,
.tryit-onboarding .slider-tooltip { display: none !important; }

/* Audio player — Clip 1: player visible immediately (greyed/locked via irl-quiz-ui.css
   locked overlay) — matching retail look. Scrubber + time hidden until Listen starts. */
#tob-step-1 .sir-audio-progress,
#tob-step-1 .sir-audio-time { opacity: 0; pointer-events: none; transition: opacity 0.3s; }
#tob-step-1 .sir-audio-player-wrap.is-unlocked .sir-audio-progress,
#tob-step-1 .sir-audio-player-wrap.is-unlocked .sir-audio-time { opacity: 1; pointer-events: auto; }

/* Button tray — all clips (catches dynamically-added slow/settings buttons too) */
.tryit-onboarding .quiz-action-buttons,
.tryit-onboarding .sir-clip-meta { display: none !important; }

/* Completion modal — blocked by JS MutationObserver too (belt + suspenders) */
body.tryit-onboarding-active #sir-completion-modal { display: none !important; }

/* Guest instruction text (redundant in onboarding context) */
.tryit-onboarding .sir-guest-instruction { display: none !important; }

/* Accent tooltip — ensure not clipped by container overflow */
.tryit-onboarding .tooltip-box { z-index: 999; }

/* ─── Clip 3 level selector pills ──────────────────────────────────────────── */
.tob-level-pills {
    display:         flex;
    gap:             8px;
    justify-content: center;
    flex-wrap:       wrap;
    margin:          0 auto 28px;
    max-width:       400px;
}

.tob-level-pill {
    display:        inline-flex;
    flex-direction: column;
    align-items:    center;
    gap:            2px;
    background:     transparent;
    color:          var(--tob-muted);
    border:         1px solid var(--tob-border);
    border-radius:  var(--tob-radius-pill);
    padding:        10px 20px;
    font-family:    var(--tob-font-ui);
    font-size:      14px;
    cursor:         pointer;
    transition:     background var(--tob-dur-short), border-color var(--tob-dur-short),
                    color var(--tob-dur-short);
    line-height:    1.3;
    text-align:     center;
}

.tob-level-pill__label {
    font-weight: 500;
    font-size:   14px;
}

.tob-level-pill__hint {
    font-size: 11px;
    opacity:   0.7;
}

.tob-level-pill--active,
.tob-level-pill[aria-pressed="true"] {
    background:   var(--tob-accent);
    color:        #fff;
    border-color: var(--tob-accent);
}

.tob-level-pill:hover:not(.tob-level-pill--active):not([aria-pressed="true"]) {
    border-color: var(--tob-accent);
    color:        var(--tob-accent);
}

/* Auto-recommended Clip 3 variant — "picked for you" indicator */
.tob-level-pill--auto-rec .tob-level-pill__hint { display: none; }
.tob-level-pill--auto-rec::after {
    content:        'picked for you';
    display:        block;
    font-size:      9px;
    font-family:    var(--tob-font-ui);
    color:          inherit;
    opacity:        0.8;
    margin-top:     1px;
    letter-spacing: 0.03em;
}

/* Locked state — pills disabled once practice starts on step 3 */
.tob-level-pill--locked {
    opacity:        0.45;
    cursor:         not-allowed;
    pointer-events: none;
}

/* ─── Level intro text (above clip-3 pills) ────────────────────────────────── */
.tob-level-intro {
    font-size:   13px;
    color:       var(--tob-muted);
    text-align:  center;
    margin:      0 0 12px;
    line-height: 1.4;
}

/* ─── Post-lock level readout (replaces intro text after practice starts) ── */
.tob-level-readout {
    font-size:     13px;
    color:         var(--tob-muted);
    text-align:    center;
    margin-top:    -12px;
    margin-bottom: 20px;
}

/* ─── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .tryit-onboarding {
        padding: 0 16px 48px;
    }
    .tob-step-headline {
        font-size: 16px;
    }
    .tob-ear-zone-name {
        font-size: 24px;
    }
    .tob-ear-cta {
        padding: 14px 24px;
        font-size: 15px;
    }
}

/* ─── Dark mode ────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    .tryit-onboarding {
        --tob-bg:      #141412;
        --tob-text:    #F0EFE8;
        --tob-muted:   #6A6A6A;
        --tob-border:  #2A2A26;
        --tob-dot-off: #3A3A36;
        --tob-accent:  #8FA3FF;
        --tob-capture: #7DFFA9;
    }

    .tob-quiz-slot input.single_input {
        background: rgba(143, 163, 255, 0.08);
    }

    .tob-quiz-slot input.single_input.is_correct {
        color: #7DFFA9;
    }
}