/* LessonSky RC124: mobile-first listening attention cards and sourced visual journeys. */
.sk124-listening,.sk124-infographic{--sk124-bg:var(--sk196-panel,#f6faff);--sk124-surface:var(--sk196-card,#fff);--sk124-ink:var(--sk196-text,#132943);--sk124-muted:var(--sk196-muted,#435a77);--sk124-border:var(--sk196-line,#c7d9ef);--sk124-accent:var(--sk196-link,#205c9f);--sk124-good:var(--sk196-ok-ink,#0e633b);--sk124-bad:var(--sk196-wrong-ink,#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 var(--sk196-focus,#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:var(--sk196-inset,#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:var(--sk196-inset,#e9f4ff)}
.sk124-gap-options button.is-correct{background:var(--sk196-ok-bg,#d9f3e5)!important;border-color:var(--sk196-strong-line,#248853)!important;color:var(--sk124-good)!important;font-weight:800}
.sk124-gap-options button.is-wrong{background:var(--sk196-wrong-bg,#ffebe7)!important;border-color:var(--sk196-strong-line,#b76c51)!important;color:var(--sk124-bad)!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:var(--sk196-primary,#234e8e);color:var(--sk196-on-primary,#fff);border-color:var(--sk196-strong-line,#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:var(--sk196-primary,#215b9f);color:var(--sk196-on-primary,#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-gap-options button:hover:not(:disabled),html[data-theme=dark] .sk124-gap-options button:hover:not(:disabled){background:var(--sk196-inset,#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:var(--sk196-primary,#3265ad)}
html.lessonsky-dark .sk124-listening-nav>button:first-child,html[data-theme=dark] .sk124-listening-nav>button:first-child{background:var(--sk196-primary,#3766ae);border-color:var(--sk196-strong-line,#6e99d4);color:var(--sk196-on-primary,#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}}