/* The learning unit is a quiet card table, with one decision at a time. */
.learn-home-hero{display:grid;grid-template-columns:1.5fr 1fr;gap:35px;align-items:center;padding:26px 0 34px}

.learn-home-copy h1{font-size:42px;line-height:1.35;margin:14px 0 19px;font-family:var(--font-display);font-weight:500}

.learn-home-copy p{color:var(--muted);font-size:14px;line-height:1.9}

.learn-home-copy .tags{margin-top:22px}

.learn-home-card{text-align:center}

.learn-home-card button{display:block;background:none;border:0;padding:0;margin:auto;transform:rotate(5deg)}

.learn-home-card img{display:block;width:153px;border-radius:9px;box-shadow:var(--shadow-card);border:5px solid var(--paper)}

.learn-home-card>span{display:block;font-size:11px;letter-spacing:1px;color:var(--muted);margin:22px 0 0}

.learn-home-strip{display:flex;justify-content:space-between;gap:10px;padding:18px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:11px}

.learn-review-entry{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:64px;margin-top:13px;padding:14px 17px;background:transparent;border:1px solid var(--line);border-radius:14px;text-align:left;font-size:13px}

.learn-review-entry span{display:flex;gap:9px;align-items:center}
.learn-review-entry span:last-child{font-size:11px;color:var(--muted)}

.learn-shell{max-width:1020px;margin:auto;padding:0 36px 60px;min-height:100dvh}

.learn-header-title{flex:1;min-width:0}
.learn-header-title strong{font-size:14px;font-weight:500;display:block}
.learn-header-title small{display:block;font-size:11px;color:var(--muted)}

.learn-progress{height:3px;background:var(--line);border-radius:9px;overflow:hidden}
.learn-progress span{display:block;background:var(--accent);height:100%;transition:width .2s}

.learn-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:52px;padding-top:39px}

.learn-visual{align-self:start;position:sticky;top:25px;text-align:center}

.learn-pictures{display:flex;justify-content:center;gap:12px}
.learn-pictures figure{margin:0;min-width:0;flex:0 1 195px}
.learn-pictures button{display:block;width:100%;padding:0;border:0;background:none;border-radius:8px}
.learn-pictures img{display:block;width:100%;border-radius:7px;box-shadow:var(--shadow-card)}

.learn-pictures figcaption{display:flex;flex-direction:column;gap:4px;font-size:12px;margin-top:10px}
.learn-pictures.multiple{flex-wrap:wrap}
.learn-pictures.multiple figure{flex:0 1 115px}

.learn-slot{font-size:11px;color:var(--accent);font-weight:600}
.learn-position{display:flex;align-items:center;justify-content:center;gap:15px;margin:20px auto 0;font-size:12px;color:var(--muted)}
.learn-position strong{border:1px solid var(--accent);color:var(--accent);border-radius:8px;padding:5px 17px}

.learn-unit-caption{font-size:11px;color:var(--muted);margin:17px auto;max-width:240px}

.hotspot-card{width:245px;max-width:100%;margin:auto;position:relative}
.hotspot-card img{display:block;width:100%;border-radius:8px}
.hotspot{position:absolute;transform:translate(-50%,-50%);min-width:44px;min-height:44px;border:2px solid white;border-radius:50%;background:var(--accent);color:white;box-shadow:0 2px 7px #17251b40;font-weight:600}
.hotspot.selected{background:var(--ink);outline:3px solid var(--paper)}
.hotspot:active{transform:translate(-50%,-50%) scale(.96)}
.learn-observe>p{margin-top:12px}

.learn-main{min-width:0}
.learn-main h1{font-size:26px;line-height:1.5;letter-spacing:0;margin:10px 0 13px}
.learn-main h1:focus{outline:none}
.learn-prompt{font-size:17px;line-height:1.9;color:var(--ink);margin-bottom:21px}
.learn-body{font-size:20px;line-height:1.8;margin:23px 0;color:var(--accent)}

.learn-points{padding-left:20px;margin:17px 0 25px}
.learn-points li{margin:12px 0;font-size:14px;line-height:1.9}

.learn-options .option{font-size:16px;padding:15px;gap:12px}
.learn-options .option.chosen{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:var(--soft)}
.learn-options .option.chosen .letter{color:white;background:var(--accent);border-color:var(--accent)}

.learn-confidence{border-top:1px solid var(--line);padding-top:17px;margin-top:24px}
.learn-confidence>span{font-size:12px;color:var(--muted)}
.learn-confidence .chips{margin:10px 0 17px}
.learn-shell .chip{min-height:44px}
.learn-shell .primary{margin-top:15px}
.learn-shell .primary:disabled{opacity:1;background:var(--soft);border-color:var(--line);color:var(--muted)}

.learn-step-footer{display:flex;justify-content:space-between;gap:14px;border-top:1px solid var(--line);margin-top:28px;padding-top:10px}
.learn-step-footer .linkbtn{font-size:12px}

.learn-feedback{background:var(--soft);border:1px solid var(--line);border-radius:15px;padding:21px;margin:20px 0 13px}
.learn-feedback.revisit{background:#f0eade;border-color:#e2d5bc}
.learn-feedback h3{margin:8px 0 14px;font-size:19px}
.learn-feedback p{font-size:14px;margin:10px 0;line-height:1.9}
.learn-feedback small{font-size:11px;color:var(--muted)}
.learn-feedback .learn-takeaway{padding-top:13px;border-top:1px solid var(--line);margin-top:17px}
.learn-feedback .learn-points{margin-bottom:12px}

.learn-other{border-top:1px solid var(--line);margin:20px 0;padding-top:8px;font-size:13px}
.learn-other summary,.learn-case-context summary{cursor:pointer;min-height:44px;padding:10px 0;color:var(--accent)}
.learn-other p{margin:13px 0;line-height:1.9;color:var(--muted)}
.learn-other strong{font-weight:500;color:var(--ink)}

.learn-locked{border:1px solid var(--line);border-radius:13px;padding:15px 18px;background:var(--paper);margin:10px 0 22px}
.learn-locked small{color:var(--muted);font-size:11px}
.learn-locked p{font-size:14px;margin-top:7px}
.learn-locked .linkbtn{min-height:44px;font-size:12px;padding-bottom:0}
.learn-question-label{font-size:15px;font-weight:500;margin:20px 0 13px}

.recall-wait{text-align:center;background:var(--soft);border:1px dashed var(--control-line);border-radius:17px;padding:24px 17px;margin:20px 0}
.recall-wait>span{font:46px Georgia;color:var(--accent)}
.recall-wait p{font-size:15px;margin:10px 0}
.recall-wait small{color:var(--muted);font-size:12px}
.recall-ratings{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:13px 0}
.recall-ratings button{font-size:12px;padding:12px 6px}
.recall-ratings .chosen{border-color:var(--accent);background:var(--soft);box-shadow:0 0 0 1px var(--accent)}

.arrange-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:20px 0}
.arrange-slot{min-width:0;border:1px dashed var(--accent);background:var(--paper);border-radius:12px;padding:17px 5px;min-height:95px}
.arrange-slot:disabled{opacity:1;border-color:var(--line);background:var(--soft)}
.arrange-slot small{font-size:11px;color:var(--muted);display:block}
.arrange-slot strong{display:block;margin-top:10px;font-size:13px;font-weight:500}

.learn-case-context{text-align:left;font-size:12px;margin:16px 0;border-top:1px solid var(--line);color:var(--muted)}
.learn-case-context p{padding:2px 0 12px;line-height:1.9}

.learn-summary{max-width:620px;margin:40px auto}
.learn-summary h1{font-size:28px;margin:15px 0}
.learn-summary>.muted{font-size:14px}
.learn-result-metrics{display:grid;grid-template-columns:1.3fr 1fr;gap:15px;border-bottom:1px solid var(--line);padding:22px 0}
.learn-result-metrics strong{display:block;font-size:32px;font-weight:500}
.learn-result-metrics strong small{font-size:16px;color:var(--muted)}
.learn-result-metrics span{font-size:12px;color:var(--muted);display:block;line-height:1.8}

.built-reading{padding:0;list-style:none;counter-reset:reading}
.built-reading li{padding:20px 0;border-bottom:1px solid var(--line);counter-increment:reading}
.built-reading li:before{content:counter(reading,decimal-leading-zero);display:inline-block;color:var(--accent);font-family:Georgia;font-size:20px;margin-right:10px}
.built-reading p{font-size:15px;margin:9px 0}
.built-reading small{display:block;font-size:12px;line-height:1.8}
.supported{color:var(--accent)}
.needs-work{color:var(--error)}

.learn-concepts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:20px 0}
.learn-concepts>div{border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:14px}
.learn-concepts strong{font-size:14px;font-weight:500;display:block}
.learn-concepts span,.learn-concepts small{display:block;font-size:12px;color:var(--muted);margin-top:5px}

@media(max-width:700px){.learn-shell{padding:0 20px 34px}
.learn-grid{display:block;padding-top:21px}
.learn-visual{position:static}
.learn-pictures figure{flex-basis:145px}
.learn-pictures.multiple{flex-wrap:nowrap;gap:13px;max-width:390px;margin:auto}
.learn-pictures.multiple figure{flex:0 1 105px}
.learn-main{margin-top:23px}
.learn-main h1{font-size:23px}
.learn-main .eyebrow{font-size:10px}
.learn-prompt{font-size:16px}
.learn-unit-caption{margin:10px auto 0;max-width:none}
.learn-position{margin-top:13px}
.hotspot-card{width:215px}
.learn-home-hero{gap:20px;padding:16px 0;grid-template-columns:1fr}
.learn-home-copy h1{font-size:36px;line-height:1.25;margin:12px 0}
.learn-home-copy p{font-size:16px;line-height:1.65}
.learn-home-copy p br{display:none}
.learn-home-copy .tags{display:none}
.learn-home-copy .tag{font-size:10px}
.learn-home-card img{width:132px;max-width:100%;border-width:3px}
.learn-home-card>span{font-size:12px;letter-spacing:0;margin-top:16px}
.learn-home-strip{font-size:10px;display:block;padding:15px 0}
.learn-home-strip span{display:block;margin:3px 0}
.learn-review-entry{font-size:12px;display:block}
.learn-review-entry span:last-child{margin-top:8px;margin-left:30px}
.learn-review-entry span:last-child .icon{display:none}
.learn-home-strip+.section .sectionhead{flex-wrap:wrap;gap:5px}
.learn-home-strip+.section .feature>.icon{display:none}
.learn-summary{margin:30px auto}
.learn-summary h1{font-size:26px}
.learn-feedback{padding:18px}
.learn-case-context{max-width:390px;margin:10px auto -7px}
.learn-case-context summary{padding:10px 0}
.learn-shell .study-top{gap:9px}
.learn-header-title small{font-size:10px}
.learn-header-title strong{font-size:13px}
.learn-options .option{font-size:16px;padding:14px 12px}
.learn-body{font-size:19px}
}

@media(max-width:360px){.learn-shell{padding-left:16px;padding-right:16px}
.learn-home-copy h1{font-size:32px}
.learn-home-card img{width:132px}
.learn-home-copy .tag:last-child{display:none}
.learn-header-title small{font-size:9px}
.learn-main h1{font-size:22px}
.learn-pictures.multiple{gap:9px}
.learn-home-hero+.studycall{display:block}
.learn-home-hero+.studycall .primary{width:100%;margin-top:14px}
.learn-home-hero+.studycall p{max-width:none}
}


.learn-home-card{position:relative;isolation:isolate}
.learn-home-card:before{content:"";position:absolute;width:144px;aspect-ratio:3/5;left:50%;top:4px;transform:translateX(-56%) rotate(-8deg);background:var(--accent) var(--card-back) center/100% 100%;border-radius:var(--radius-card);box-shadow:var(--shadow-card);z-index:-1}
.learn-home-card button{transform:rotate(3deg)}
.learn-home-copy p{font-size:16px;line-height:1.65}
.learn-home-copy .tag{background:transparent;padding-left:0;margin-right:12px;color:var(--accent);font-size:12px}
.learn-home-strip{font-size:12px}
.learn-main h1{font-family:var(--font-body);font-weight:500}
.learn-feedback p,.learn-points li,.learn-locked p,.built-reading p{font-size:16px}
.learn-header-title small,.learn-unit-caption,.learn-confidence>span{font-size:12px}
@media(max-width:360px){.learn-home-card:before{width:132px}.learn-home-hero+.studycall .primary{margin-top:0}}

@media(max-width:700px){.learn-home-card:before{width:132px}.learn-home-card>span{margin-top:12px}.studycall{padding-top:20px}}