/* My Learning refresh · 2026-10-30 · learner progress first.
   Scoped to .ml26; does not change other course pages or Teacher Studio. */
.ml26{--ml-navy:#143c70;--ml-slate:#64809c;--ml-line:#e1ebf7;color:var(--ml-navy);max-width:1220px;margin:0 auto;padding:0 0 30px}
.ml26 *, .ml26 *::before,.ml26 *::after{box-sizing:border-box}
.ml26-header{position:relative;padding:31px 26px 25px;border-radius:24px;overflow:hidden;background:linear-gradient(113deg,#eef9ff 0%,#f6fbff 62%,#e6f6ff 100%);margin:0 0 17px}
.ml26-header:before,.ml26-header:after{content:"";position:absolute;border-radius:100px;background:#fff;opacity:.75;box-shadow:20px 5px 0 3px #fff;pointer-events:none}
.ml26-header:before{width:76px;height:22px;right:16%;top:26px}
.ml26-header:after{width:47px;height:17px;right:4%;top:70px;opacity:.56}
.ml26-header .eyebrow{color:#4c88c9;letter-spacing:.18em;font-size:.7rem;font-weight:800;margin-bottom:7px}
.ml26-header h1{font-size:clamp(1.85rem,3vw,2.55rem);letter-spacing:-.035em;line-height:1.2;margin:0 0 10px;color:#113b72}
.ml26-header .lead{margin:0;color:#5b7998;max-width:760px;font-size:1rem;line-height:1.58}
.ml26>.help-tip{margin:9px 0}
.ml26-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin:16px 0}
.ml26-stat{background:#fff;border:1px solid var(--ml-line);border-radius:19px;box-shadow:0 8px 25px #3573a70a;min-width:0;min-height:162px;text-decoration:none;color:#21476e;display:flex;flex-direction:column;padding:20px 19px;gap:9px;transition:transform .15s,border-color .15s}
.ml26-stat:hover,.ml26-tool:hover,.ml26-lesson:hover{border-color:#a5ccec;transform:translateY(-2px)}
.ml26-stat-top{display:flex;gap:14px;align-items:center}
.ml26-stat-icon{flex:none;display:grid;place-items:center;width:53px;height:53px;border-radius:16px;background:#e9f3ff;font-size:26px}
.ml26-stat:nth-child(2) .ml26-stat-icon{background:#fff4dd}
.ml26-stat:nth-child(3) .ml26-stat-icon{background:#e4f8ef}
.ml26-stat-text{display:grid;gap:2px;min-width:0}
.ml26-stat-label{font-size:.85rem;font-weight:750;color:#47718e}
.ml26-stat strong{font-size:clamp(1.5rem,2.4vw,1.85rem);font-weight:860;color:#123c72;line-height:1.23}
.ml26-stat small{color:#647e99;font-size:.82rem;line-height:1.45}
.ml26-stat .journey-bar{height:9px;background:#eaf0f7;border-radius:99px;margin:6px 0 0;overflow:hidden;width:100%}
.ml26-stat .journey-bar>span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#ffda7c,#ffb747)}
.ml26-stat-notice{color:#4381b4!important;font-weight:650}
.ml26-drop-row{display:flex;gap:9px;margin:0 0 2px;font-size:18px;letter-spacing:0}
.ml26-drop-row .is-future{filter:grayscale(1);opacity:.26}
.ml26-garden{position:relative;border:1px solid #f0e3b0;background:linear-gradient(103deg,#fffaf0 4%,#fffbea 51%,#f2fbf5 100%);border-radius:23px;padding:25px 30px 20px;margin:17px 0 18px;overflow:hidden;isolation:isolate;box-shadow:0 8px 29px #8d86200c}
.ml26-garden:before{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:-3px;height:114px;background:url("./assets/sky-garden.svg") center bottom/cover no-repeat;opacity:.7}
.ml26-garden:after{content:"";position:absolute;z-index:-1;width:80px;height:24px;background:white;opacity:.7;border-radius:100px;right:26%;top:34px;box-shadow:27px 5px 0 3px white}
.ml26-garden-inner{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(250px,.72fr);gap:7px;align-items:center;min-height:240px}
.ml26-garden-copy{z-index:2;min-width:0}
.ml26-garden .eyebrow{font-size:.7rem;font-weight:850;color:#799146;letter-spacing:.14em;margin-bottom:10px}
.ml26-garden h2{font-size:clamp(1.25rem,2.05vw,1.64rem);letter-spacing:-.012em;color:#244a67;margin:0 0 9px;line-height:1.33}
.ml26-garden-description{font-size:.92rem;line-height:1.6;color:#61807c;max-width:550px;margin:0 0 15px}
.ml26-garden-rail{background:#ffffffdd;border:1px solid #f2e3c1;box-shadow:0 4px 15px #bbad5514;border-radius:14px;padding:12px 14px;max-width:610px}
.ml26-garden-rail-head{display:flex;gap:11px;align-items:center;flex-wrap:wrap;justify-content:space-between;margin-bottom:8px}
.ml26-garden-rail-head strong{color:#1558a1;font-size:1.06rem;white-space:nowrap}
.ml26-garden-rail-head small{font-size:.77rem;color:#617c8c}
.ml26-meter{height:10px;background:#e9eef6;border-radius:99px;overflow:hidden}
.ml26-meter span{height:100%;display:block;background:linear-gradient(90deg,#7fcaf8,#308ee8);border-radius:99px}
.ml26-garden-status{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.ml26-status-pill{display:inline-flex;gap:6px;align-items:center;border-radius:99px;border:1px solid #cde5cc;background:#f6fff5;color:#447a4c;font-size:.79rem;font-weight:750;padding:6px 9px}
.ml26-garden-status>small{color:#60766b;font-size:.78rem}
.ml26-garden-visual{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:245px}
.ml26-garden-visual>.ml26-main-plant{width:80%;max-width:280px;min-width:185px;position:absolute;left:0;bottom:-2px;filter:drop-shadow(0 7px 6px #719b7440)}
.ml26-garden-visual .ef-sunflower-art{width:100%;display:block;height:auto}
.ml26-garden-visual>.ml26-watering-can{width:45%;max-width:140px;min-width:95px;position:absolute;bottom:-3px;right:-9px;filter:drop-shadow(0 4px 6px #448ec81a)}
.ml26-garden-details{margin:9px 0 0;max-width:700px;position:relative;z-index:2}
.ml26-garden-details>summary{cursor:pointer;color:#2b729b;font-size:.83rem;font-weight:730;display:list-item;width:fit-content;padding:5px 0}
.ml26-garden-details p{margin:8px 0 0;font-size:.81rem;line-height:1.65;color:#4d6b70;background:#fffcf3e6;border-radius:9px;padding:8px 10px}
.ml26-mlstones{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:10px 0;padding:0}
.ml26-mlstones li{font-size:.76rem;color:#618075;background:#fff;border:1px solid #e4e9da;border-radius:999px;padding:5px 9px}
.ml26-mlstones li.done{background:#e8f8e8;color:#24684a;border-color:#c8e8bf}
.ml26-twin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch}
.ml26-section{min-width:0;border:1px solid var(--ml-line);border-radius:19px;background:#fff;padding:20px;box-shadow:0 7px 27px #4270a708}
.ml26-section-header{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap;margin:0 0 12px}
.ml26-section-header h2{font-size:1.14rem;color:#194a7a;margin:0;font-weight:800}
.ml26-section-header h2>span{display:inline-block;margin-right:6px}
.ml26-section-header a{font-size:.8rem;text-decoration:none;color:#4283be;font-weight:720}
.ml26-list{display:grid;gap:10px}
.ml26-lesson{display:flex;gap:13px;align-items:center;min-width:0;text-decoration:none;color:#23496e;border:1px solid #e6edf6;background:#f9fcff;border-radius:14px;padding:12px;transition:transform .15s,border-color .15s}
.ml26-lesson-icon{display:grid;place-items:center;flex:0 0 51px;width:51px;height:51px;border-radius:13px;background:#fff0d8;font-size:26px}
.ml26-lesson:nth-child(2) .ml26-lesson-icon{background:#e6f6ff}
.ml26-lesson:nth-child(3) .ml26-lesson-icon{background:#f0e7ff}
.ml26-lesson-copy{display:grid;gap:4px;flex:1;min-width:0}
.ml26-lesson-copy strong{font-size:.92rem;line-height:1.35}
.ml26-lesson-copy small{font-size:.79rem;color:#647f98;line-height:1.5}
.ml26-round-arrow{display:grid;place-items:center;flex:0 0 27px;width:27px;height:27px;border-radius:50%;background:#eef6ff;border:1px solid #d6e7f8;color:#3a7fb8;font-weight:850}
.ml26-course-list{display:grid;gap:10px}
.ml26-course{background:#fbfdff;border:1px solid #e7edf7;border-radius:14px;padding:14px}
.ml26-course-top{display:flex;gap:10px;align-items:center}
.ml26-course-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:13px;background:#fff2db;font-size:24px}
.ml26-course:nth-child(2) .ml26-course-icon{background:#eaf6ff}
.ml26-course:nth-child(3) .ml26-course-icon{background:#f1e9ff}
.ml26-course-name{flex:1;min-width:0;font-size:.9rem;font-weight:790;color:#1b4d79}
.ml26-course-name a{color:inherit;text-decoration:none}
.ml26-course-number{font-size:.8rem;color:#5a7996;white-space:nowrap}
.ml26-course-bar{height:8px;margin:12px 0 5px;border-radius:99px;background:#e9f0f8;overflow:hidden}
.ml26-course-bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#7dccfc,#278bea)}
.ml26-course:nth-child(2) .ml26-course-bar span{background:linear-gradient(90deg,#a0dda8,#40bd8b)}
.ml26-course:nth-child(3) .ml26-course-bar span{background:linear-gradient(90deg,#c7b7ff,#8a71f6)}
.ml26-course-meta{display:flex;align-items:center;justify-content:space-between;color:#758aa1;font-size:.77rem;gap:10px}
.ml26-course-meta>span:last-child{font-weight:750}
.ml26-tools-title{font-size:1.1rem;font-weight:830;color:#1b4c77;margin:21px 0 11px}
.ml26-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.ml26-tool{display:flex;gap:12px;align-items:center;text-decoration:none;color:#234b78;min-width:0;background:#fff;border:1px solid var(--ml-line);border-radius:16px;padding:14px 13px;min-height:115px;transition:transform .15s,border-color .15s}
.ml26-tool-icon{flex:0 0 49px;display:grid;place-items:center;width:49px;height:49px;border-radius:15px;background:#e5f6eb;font-size:24px}
.ml26-tool:nth-child(2) .ml26-tool-icon{background:#ffedef}
.ml26-tool:nth-child(3) .ml26-tool-icon{background:#fff2d9}
.ml26-tool-copy{display:grid;gap:5px;min-width:0;flex:1}
.ml26-tool-copy strong{font-size:.88rem;line-height:1.4}
.ml26-tool-copy small{font-size:.77rem;color:#688198;line-height:1.5}
.ml26-tool-copy em{font-style:normal;font-size:.77rem;font-weight:740;color:#976e1b;border-radius:999px;background:#fff6df;width:fit-content;padding:4px 8px}
.ml26-tool .ml26-round-arrow{width:23px;height:23px;flex-basis:23px;font-size:.86rem}
.ml26 a:focus-visible,.ml26 summary:focus-visible{outline:3px solid #328cda;outline-offset:3px}
.ml26-my-commitment{max-width:1100px;margin:0 auto}
.ml26-breadcrumb{display:inline-flex;align-items:center;gap:6px;color:#3e7da9;font-weight:720;text-decoration:none;margin:3px 0 17px}
@media(max-width:1040px){.ml26-tools{grid-template-columns:1fr 1fr}.ml26-tool:last-child{grid-column:1/-1}.ml26-garden-inner{grid-template-columns:minmax(0,1fr) minmax(230px,.75fr)}}
@media(max-width:760px){.ml26{padding-bottom:66px}.ml26-header{padding:22px 18px}.ml26-stats{gap:10px}.ml26-stat{padding:14px;min-height:142px}.ml26-stat-icon{width:42px;height:42px;font-size:22px}.ml26-stat-top{gap:8px}.ml26-stat strong{font-size:1.35rem}.ml26-stat-label{font-size:.77rem}.ml26-stat small{font-size:.76rem}.ml26-garden{padding:18px 17px 12px}.ml26-garden-inner{grid-template-columns:minmax(0,1fr) 185px}.ml26-garden-visual{height:203px}.ml26-garden-visual>.ml26-main-plant{min-width:175px;width:96%}.ml26-garden-visual>.ml26-watering-can{min-width:70px;width:49%;right:-8px}.ml26-twin{grid-template-columns:1fr}.ml26-section{padding:17px}.ml26-tools{grid-template-columns:1fr;gap:10px}.ml26-tool:last-child{grid-column:auto}}
@media(max-width:550px){.ml26-header{border-radius:17px}.ml26-stats{grid-template-columns:1fr 1fr}.ml26-stat{min-height:129px}.ml26-stat:first-child{grid-column:1/-1;min-height:135px}.ml26-garden-inner{grid-template-columns:1fr}.ml26-garden-visual{order:-1;height:162px;max-width:340px;margin:-10px auto 4px}.ml26-garden-visual>.ml26-main-plant{width:60%;min-width:155px;left:20px;bottom:-24px}.ml26-garden-visual>.ml26-watering-can{width:37%;right:15px;bottom:-12px;min-width:95px}.ml26-garden-rail{padding:12px}.ml26-garden-status{align-items:flex-start}.ml26-garden-rail-head{align-items:flex-start}.ml26-stat-top{flex-direction:column;align-items:flex-start}.ml26-stat:first-child .ml26-stat-top{flex-direction:row;align-items:center}.ml26-drop-row{gap:4px;font-size:16px}}
@media(max-width:370px){.ml26-stat-top{gap:6px}.ml26-stat{padding:12px}.ml26-stat strong{font-size:1.15rem}.ml26-lesson{gap:8px;padding:10px}.ml26-lesson-icon{width:41px;height:41px;flex-basis:41px;font-size:23px}.ml26-course{padding:11px}}
@media(prefers-reduced-motion:reduce){.ml26-stat,.ml26-lesson,.ml26-tool{transition:none}}


/* 2026-10-31: My Learning is a tool hub; course highlights and sunflower garden live on Home. */
.ml26.ml26-tools-only{padding-top:0;max-width:1080px}
.ml26-tools-only .ml26-tools-header{
 display:flex;align-items:center;justify-content:space-between;gap:16px;
 padding:19px 23px;border:1px solid #d9eaf6;border-radius:20px;
 background:linear-gradient(115deg,#edf8ff 0%,#f9fcff 75%,#fff9e9 100%);
 margin:0 0 19px;min-width:0;
}
.ml26-tools-only .ml26-tools-header>div{min-width:0}
.ml26-tools-only .ml26-tools-header .eyebrow{margin:0 0 4px;color:#487ba9;font-size:.72rem;letter-spacing:.08em}
.ml26-tools-only .ml26-tools-header h1{
 margin:0 0 5px;font:800 clamp(1.5rem,2.5vw,2rem)/1.2 "Baloo 2","Nunito",sans-serif;
 color:#173f74;overflow-wrap:anywhere;
}
.ml26-tools-only .ml26-tools-header p{margin:0;color:#496a81;line-height:1.5;font-size:.93rem}
.ml26-tools-only .ml26-home-shortcut{
 flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
 min-height:44px;padding:9px 14px;background:#fff;border:1px solid #c8dfed;
 border-radius:999px;color:#1765a6;font-size:.84rem;font-weight:850;text-decoration:none;text-align:center;
}
.ml26-tools-only .ml26-tools-title{font:800 clamp(1.15rem,2vw,1.4rem)/1.3 "Baloo 2","Nunito",sans-serif;margin:17px 0 12px;color:#1d4c7b}
.ml26-tools-only .ml26-tool{min-height:130px;border-radius:19px;padding:17px;align-items:flex-start;gap:11px}
.ml26-tools-only .ml26-tool-copy{gap:7px}
.ml26-tools-only .ml26-tool-copy strong{font-size:1rem;line-height:1.35;color:#1b4a7d;overflow-wrap:anywhere}
.ml26-tools-only .ml26-tool-copy small{font-size:.86rem;color:#4c6c84;line-height:1.45}
.ml26-tools-only .ml26-tool-copy em{font-size:.78rem;line-height:1.5;white-space:normal;overflow-wrap:anywhere;border-radius:12px}
.ml26-tools-only .ml26-personal-activities{margin-top:18px}
.ml26-tools-only .ml26-personal-activities .ef-made-section{border-radius:19px}
@media(max-width:760px){
 .ml26-tools-only .ml26-tools-header{padding:17px;align-items:flex-start;flex-direction:column;gap:9px}
 .ml26-tools-only .ml26-home-shortcut{align-self:flex-start}
 .ml26-tools-only .ml26-tool{min-height:104px;align-items:center}
}
@media(max-width:480px){
 .ml26-tools-only .ml26-tools-header h1{font-size:1.62rem}
 .ml26-tools-only .ml26-tools-header p{font-size:.88rem}
 .ml26-tools-only .ml26-tool{padding:12px 11px;gap:10px}
 .ml26-tools-only .ml26-tool-icon{flex-basis:43px;width:43px;height:43px;font-size:21px}
 .ml26-tools-only .ml26-tool-copy strong{font-size:.96rem}
 .ml26-tools-only .ml26-tool-copy small{font-size:.83rem}
}