/* LessonSky RC124: mobile-first listening attention cards and sourced visual journeys. */
.sk124-listening,.sk124-infographic{--sk124-bg:#f6faff;--sk124-surface:#fff;--sk124-ink:#132943;--sk124-muted:#435a77;--sk124-border:#c7d9ef;--sk124-accent:#205c9f;--sk124-good:#0e633b;--sk124-bad:#923c29;background:var(--sk124-bg)!important;border:1px solid var(--sk124-border)!important;border-radius:22px!important;box-shadow:0 16px 35px rgba(35,72,124,.07);color:var(--sk124-ink)!important;padding:clamp(16px,2.5vw,26px)!important;margin:20px 0;max-width:100%;min-width:0;line-height:1.55}
.sk124-listening *,.sk124-infographic *{box-sizing:border-box}
.sk124-listening-head>span,.sk124-info-head>span{display:inline-block;font-size:.72rem;font-weight:850;letter-spacing:.12em;color:var(--sk124-accent)!important}
.sk124-listening h3,.sk124-infographic h3{font-size:clamp(1.27rem,2.5vw,1.75rem);color:var(--sk124-ink)!important;line-height:1.25;margin:9px 0!important}
.sk124-listening p,.sk124-infographic p,.sk124-infographic small,.sk124-listening small{color:var(--sk124-muted)!important;line-height:1.65}
.sk124-listening-actions,.sk124-listening-nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:13px 0}
.sk124-listening button,.sk124-infographic button{min-height:44px;white-space:normal!important;line-height:1.42;font:inherit;cursor:pointer}
.sk124-listening button:disabled,.sk124-infographic button:disabled{opacity:.53;cursor:not-allowed}
.sk124-listening :focus-visible,.sk124-infographic :focus-visible{outline:3px solid #2184e4!important;outline-offset:3px}
.sk124-listening-progress,.sk124-info-meter{display:flex;align-items:center;gap:12px;justify-content:space-between;margin:18px 0 12px}
.sk124-listening-progress>span,.sk124-info-meter>span{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:850;color:var(--sk124-ink)!important}
.sk124-listening [role=progressbar],.sk124-infographic [role=progressbar]{flex:1;min-width:40px;height:12px;border-radius:30px;overflow:hidden;background:#d9e7fa;box-shadow:inset 0 0 0 1px var(--sk124-border)}
.sk124-listening [role=progressbar]>span,.sk124-infographic [role=progressbar]>span{display:block;width:0;height:100%;background:linear-gradient(90deg,#2369a7,#24a896);border-radius:inherit;transition:width .15s ease}
.sk124-gap-line{font-size:clamp(1.04rem,2vw,1.3rem);font-weight:780;color:var(--sk124-ink)!important;border:1px dashed var(--sk124-border);border-radius:15px;padding:17px;background:var(--sk124-surface);overflow-wrap:anywhere;min-width:0}
.sk124-gap-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}
.sk124-gap-options button{border-radius:13px;border:1px solid var(--sk124-border);background:var(--sk124-surface);color:var(--sk124-ink)!important;text-align:start;padding:12px 15px;overflow-wrap:anywhere;min-width:0}
.sk124-gap-options button:hover:not(:disabled){border-color:var(--sk124-accent);background:#e9f4ff}
.sk124-gap-options button.is-correct{background:#d9f3e5!important;border-color:#248853!important;color:#105637!important;font-weight:800}
.sk124-gap-options button.is-wrong{background:#ffebe7!important;border-color:#b76c51!important;color:#8d2a1c!important}
.sk124-gap-feedback{font-weight:780;min-height:1.6em}
.sk124-gap-source{border-inline-start:4px solid #24a896;padding:10px 16px;background:var(--sk124-surface);border-radius:8px;overflow-wrap:anywhere;color:var(--sk124-ink)!important}
.sk124-gap-source[hidden]{display:none!important}
.sk124-listening-nav>button,.sk124-info-footer button,.sk124-info-card>button{border:1px solid var(--sk124-border);background:var(--sk124-surface);color:var(--sk124-ink);border-radius:12px;padding:10px 16px;font-weight:750}
.sk124-listening-nav>button:first-child{background:#234e8e;color:#fff;border-color:#234e8e}
.sk124-listening .sk124-privacy,.sk124-infographic .sk124-info-footer>small{font-size:.81rem;margin-top:16px}
.sk124-info-head{display:flex;flex-direction:column;gap:4px}
.sk124-info-head p{font-size:1.1rem!important;font-weight:850;color:var(--sk124-ink)!important;margin:0}
.sk124-info-steps{list-style:none!important;margin:0!important;padding:12px 0 4px!important;display:grid;gap:13px;position:relative}
.sk124-info-steps:before{content:"";position:absolute;inset-block:36px 40px;inset-inline-start:21px;width:4px;background:linear-gradient(#286bb4,#64a6cf,#3eac96);border-radius:8px}
.sk124-info-steps>li{display:grid;grid-template-columns:46px minmax(0,1fr);gap:13px;align-items:start;position:relative;min-width:0}
.sk124-info-index{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#215b9f;color:#fff!important;border:3px solid var(--sk124-bg);font-weight:850;font-variant-numeric:tabular-nums;z-index:1}
.sk124-info-card{background:var(--sk124-surface);border:1px solid var(--sk124-border);border-radius:15px;padding:12px 15px;min-width:0}
.sk124-info-card summary{color:var(--sk124-ink)!important;cursor:pointer;font-size:1rem;font-weight:820;overflow-wrap:anywhere;padding:8px 0;min-height:32px}
.sk124-info-card details p{margin:8px 0;padding:12px;border-radius:11px;background:var(--sk124-bg);color:var(--sk124-muted)!important;overflow-wrap:anywhere}
.sk124-info-card>button{margin-top:9px;min-width:130px}
.sk124-info-steps>li.is-complete .sk124-info-index{background:#16805a}
.sk124-info-steps>li.is-complete .sk124-info-card{border-color:#5cae91}
.sk124-info-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:6px}
.sk124-info-footer>small{flex:1 1 310px}
html.lessonsky-dark .sk124-listening,html.lessonsky-dark .sk124-infographic,html[data-theme=dark] .sk124-listening,html[data-theme=dark] .sk124-infographic,body.lessonsky-dark .sk124-listening,body.lessonsky-dark .sk124-infographic{--sk124-bg:#112138;--sk124-surface:#203654;--sk124-ink:#f4f9ff;--sk124-muted:#c9d9ef;--sk124-border:#55759d;--sk124-accent:#9dc9ff;box-shadow:none}
html.lessonsky-dark .sk124-gap-options button:hover:not(:disabled),html[data-theme=dark] .sk124-gap-options button:hover:not(:disabled){background:#305278}
html.lessonsky-dark .sk124-info-steps:before,html[data-theme=dark] .sk124-info-steps:before{background:linear-gradient(#6fadd9,#539bc2,#5bcab2)}
html.lessonsky-dark .sk124-info-index,html[data-theme=dark] .sk124-info-index{background:#3265ad}
html.lessonsky-dark .sk124-listening-nav>button:first-child,html[data-theme=dark] .sk124-listening-nav>button:first-child{background:#3766ae;border-color:#6e99d4;color:#fff}
@media(max-width:600px){.sk124-listening,.sk124-infographic{border-radius:16px!important;padding:14px!important}.sk124-gap-options{grid-template-columns:1fr}.sk124-listening-actions button{flex:1 1 120px}.sk124-info-steps>li{grid-template-columns:38px minmax(0,1fr);gap:9px}.sk124-info-index{height:36px;width:36px}.sk124-info-steps:before{inset-inline-start:18px}}
@media(prefers-reduced-motion:reduce){.sk124-listening *,.sk124-infographic *{transition:none!important;animation:none!important}}
@media print{.sk124-listening-actions,.sk124-listening-nav,.sk124-info-footer button,.sk124-info-card>button{display:none!important}.sk124-info-card details>p{display:block!important}.sk124-listening,.sk124-infographic{box-shadow:none!important}}