/*! Edureify Onboarding v2.0.0 styles. Full-screen focus mode, one question per screen.
    Uses the site tokens from token.css; every value has a fallback. */
html.eo-lock, html.eo-lock body { overflow: hidden; }
.eo {
    --eo-bg: var(--bg, #07090f); --eo-surface: rgba(255,255,255,.028); --eo-surface-h: rgba(255,255,255,.05);
    --eo-line: var(--border, rgba(255,255,255,.09)); --eo-line-h: rgba(255,255,255,.22);
    --eo-ink: var(--text, #f0f2f7); --eo-mute: var(--text2, #a3abbe); --eo-faint: var(--text3, #6b7389);
    --eo-acc: var(--accent, #4f8dff); --eo-acc-soft: rgba(79,141,255,.12); --eo-bad: var(--red, #ff4757);
    position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column; height: 100vh; height: 100dvh;
    background: var(--eo-bg); color: var(--eo-ink); font-family: var(--font-body, system-ui, sans-serif); -webkit-font-smoothing: antialiased;
}
.eo *, .eo *::before, .eo *::after { box-sizing: border-box; }
.eo :focus-visible { outline: 2px solid var(--eo-acc); outline-offset: 3px; }

/* progress + top bar */
.eo-top, .eo-main, .eo-foot { position: static; width: auto; max-width: none; margin: 0; box-shadow: none; transform: none; }
.eo-progress { height: 3px; background: var(--eo-line); flex: none; }
.eo-progress i { display: block; height: 100%; width: 0; background: var(--eo-acc); transition: width .35s cubic-bezier(.4,0,.2,1); }
.eo-top { flex: none; display: grid; grid-template-columns: 2.75rem 1fr auto 2.75rem; align-items: center; gap: .5rem; padding: calc(.5rem + env(safe-area-inset-top, 0px)) .75rem .5rem; }
.eo-title { font-size: .86rem; color: var(--eo-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eo-count { font-size: .86rem; color: var(--eo-faint); font-variant-numeric: tabular-nums; }
.eo-ib { width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--eo-mute); cursor: pointer; }
.eo-ib:hover { background: var(--eo-surface-h); color: var(--eo-ink); }
.eo-ib svg { width: 1.25rem; height: 1.25rem; }
.eo-back.is-hidden { visibility: hidden; }

/* question area */
.eo-main { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.eo-in { max-width: 41rem; margin: 0 auto; padding: clamp(1.75rem, 8vh, 6rem) 1.5rem 3rem; }
.eo-step { animation: eoIn .24s ease-out both; }
@keyframes eoIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.eo-h:focus, .eo-h:focus-visible { outline: none; }
.eo-h { font-family: var(--font-display, inherit); font-weight: 700; font-size: clamp(1.6rem, 1.15rem + 1.8vw, 2.45rem); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 .75rem; outline: none; text-wrap: balance; }
.eo-sub { margin: 0 0 2rem; max-width: 50ch; font-size: 1.02rem; line-height: 1.6; color: var(--eo-mute); }

/* options */
.eo-opts { display: grid; gap: .625rem; }
.eo-opt { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; width: 100%; min-height: 4rem; padding: .875rem 1.1rem; text-align: left;
    border: 1px solid var(--eo-line); border-radius: 14px; background: var(--eo-surface); color: var(--eo-ink); font: inherit; cursor: pointer;
    transition: border-color .15s, background-color .15s, transform .1s; -webkit-tap-highlight-color: transparent; }
.eo-opt:hover { border-color: var(--eo-line-h); background: var(--eo-surface-h); }
.eo-opt:active { transform: scale(.995); }
.eo-opt.sel { border-color: var(--eo-acc); background: var(--eo-acc-soft); box-shadow: inset 0 0 0 1px var(--eo-acc); }
.eo-key { width: 1.75rem; height: 1.75rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--eo-line); border-radius: 7px;
    font: 600 .78rem var(--font-body, inherit); color: var(--eo-faint); background: transparent; }
.eo-opt.sel .eo-key { background: var(--eo-acc); border-color: var(--eo-acc); color: #fff; }
.eo-ol { display: grid; gap: .15rem; min-width: 0; }
.eo-ot { font-weight: 600; font-size: 1rem; line-height: 1.35; }
.eo-os { font-size: .86rem; color: var(--eo-faint); }
.eo-opt.sel .eo-os { color: var(--eo-mute); }
.eo-tick { width: 1.5rem; height: 1.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; }
.eo-tick svg { width: .95rem; height: .95rem; }
.eo-opt.sel .eo-tick { opacity: 1; transform: none; background: var(--eo-acc); }
.eo-opt[role="checkbox"] .eo-tick { opacity: 1; transform: none; border-radius: 6px; border: 1.5px solid var(--eo-line-h); }
.eo-opt[role="checkbox"] .eo-tick svg { opacity: 0; }
.eo-opt[role="checkbox"].sel .eo-tick { border-color: var(--eo-acc); }
.eo-opt[role="checkbox"].sel .eo-tick svg { opacity: 1; }

@media (min-width: 900px) and (min-height: 600px) {
    .eo-in:has(.eo-opts.many) { max-width: 52rem; }
    .eo-opts.many { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* multi-select at its limit: unpicked options dim, and a tap on one nudges instead of unticking another */
.eo-opts.is-full .eo-opt:not(.sel) { opacity: .55; }
.eo-opts.is-full .eo-opt:not(.sel):hover { opacity: .8; }
.eo-help.is-warn { color: var(--gold, #f5c842); }
.eo-nudge { animation: eoNudge .3s ease; }
@keyframes eoNudge { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }

/* text fields */
.eo-field { position: relative; }
.eo-input { width: 100%; min-height: 3.75rem; padding: .875rem 1.1rem; border: 1px solid var(--eo-line); border-radius: 14px; background: var(--eo-surface);
    color: var(--eo-ink); font: 500 clamp(1.15rem, 1rem + .6vw, 1.4rem) var(--font-body, inherit); transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none; }
.eo-input::placeholder { color: var(--eo-faint); font-weight: 400; }
.eo-input:focus { outline: none; border-color: var(--eo-acc); box-shadow: 0 0 0 4px rgba(79,141,255,.18); }
.eo-input[aria-invalid="true"] { border-color: var(--eo-bad); box-shadow: 0 0 0 4px rgba(255,71,87,.14); }
.eo-field-msg { min-height: 1.5rem; margin: .6rem 0 0; font-size: .92rem; color: var(--eo-bad); }
.eo-field-msg.is-hint { color: var(--eo-mute); }
.eo-note { display: flex; gap: .55rem; align-items: flex-start; margin: 1.25rem 0 0; font-size: .88rem; line-height: 1.5; color: var(--eo-faint); max-width: 52ch; }
.eo-note svg { flex: none; width: 1rem; height: 1rem; margin-top: .15rem; }
.eo-link { padding: 0; border: 0; background: none; color: var(--eo-acc); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.eo-search { margin-bottom: 1rem; font-size: 1.05rem; min-height: 3.25rem; }
.eo-list { display: grid; gap: .4rem; }
.eo-li { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; border: 1px solid var(--eo-line); border-radius: 12px; background: var(--eo-surface); color: var(--eo-ink); font: inherit; text-align: left; cursor: pointer; }
.eo-li small { color: var(--eo-faint); }
.eo-li.sel { border-color: var(--eo-acc); background: var(--eo-acc-soft); }
.eo-empty { color: var(--eo-mute); }

/* briefing */
.eo-summary { margin: -1rem 0 1.75rem; font-size: .95rem; color: var(--eo-mute); }
.eo-rules { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--eo-line); }
.eo-rules li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; padding: 1.05rem 0; border-bottom: 1px solid var(--eo-line); }
.eo-ri { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--eo-acc-soft); color: var(--eo-acc); }
.eo-ri svg { width: 1.15rem; height: 1.15rem; }
.eo-rules b { display: block; font-weight: 600; margin-bottom: .15rem; }
.eo-rules p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--eo-mute); }
.eo-err { min-height: 1.4rem; margin-top: 1rem; color: var(--eo-bad); font-size: .92rem; }

/* footer */
.eo-foot { flex: none; border-top: 1px solid var(--eo-line); background: color-mix(in srgb, var(--eo-bg) 92%, transparent); padding: .875rem 1.5rem calc(.875rem + env(safe-area-inset-bottom, 0px)); }
.eo-foot.is-hidden { display: none; }
.eo-foot-in { max-width: 52rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.eo-help { font-size: .88rem; color: var(--eo-faint); }
.eo-btn { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; min-height: 3.1rem; padding: 0 1.4rem; border: 0; border-radius: 12px;
    background: var(--eo-acc); color: #fff; font: 600 1rem var(--font-body, inherit); cursor: pointer; transition: filter .15s, opacity .15s; }
.eo-btn:hover { filter: brightness(1.08); }
.eo-btn:disabled { opacity: .4; cursor: not-allowed; filter: none; }
.eo-btn kbd { font: 500 .72rem var(--font-body, inherit); padding: .15rem .4rem; border-radius: 5px; background: rgba(255,255,255,.18); }

@media (hover: none), (pointer: coarse) { .eo-key, .eo-btn kbd { display: none; } .eo-opt { grid-template-columns: 1fr auto; } }
@media (max-width: 560px) {
    .eo-top { grid-template-columns: 2.75rem 1fr auto 2.75rem; }
    .eo-in { padding-top: 1.5rem; }
    .eo-foot-in { flex-direction: column-reverse; align-items: stretch; gap: .5rem; }
    .eo-help { text-align: center; }
    .eo-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .eo-nudge { animation: none; } .eo-step { animation: none; } .eo-progress i, .eo-opt, .eo-tick { transition: none; } }