/* Shared reading and navigation layout for Learn AI and Learn ML.
   Load after each programme's stylesheet. Interactive labs keep their own styles. */
:root{
  --learning-ink:#102033;
  --learning-muted:#586371;
  --learning-coral:#b64e45;
  --learning-cream:#fffaf3;
  --learning-border:#e4dbd0;
}
.lesson-top,.ml-lesson-hero{
  max-width:1220px;margin:0 auto;padding:35px 48px 32px;
  background:var(--learning-cream);color:var(--learning-ink);
  border-bottom:1px solid var(--learning-border);
}
.lesson-top h1,.ml-lesson-hero h1{
  max-width:840px;margin:10px 0 14px;font-size:44px;line-height:1.12;letter-spacing:-1.5px;
  color:var(--learning-ink);
}
.lesson-top .eyebrow,.ml-lesson-hero .ml-eyebrow{color:var(--learning-coral)}
.lesson-top .crumbs,.ml-lesson-hero .ml-breadcrumb{
  margin:0 0 22px;font-size:13px;color:var(--learning-muted);
}
.lesson-top .crumbs a{color:var(--learning-ink)}
.lesson-top>p:not(.eyebrow):not(.crumbs),
.ml-lesson-hero>p:not(.ml-eyebrow):not(.ml-breadcrumb){
  max-width:760px;font-size:17px;line-height:1.65;color:var(--learning-muted);
}
.lesson-top .lesson-stats,.ml-lesson-hero .ml-lesson-meta{
  display:flex;flex-wrap:wrap;gap:12px 22px;margin:22px 0 0;padding:0;
  color:var(--learning-muted);font-size:13px;list-style:none;
}
.lesson-stats li{padding:0;border:0;border-radius:0;color:var(--learning-muted)}
.lesson-shell,.ml-lesson-shell{
  max-width:1220px;margin:0 auto;padding:34px 48px 55px;display:grid;
  grid-template-columns:205px minmax(0,1fr);align-items:start;gap:38px;
  background:var(--learning-cream);
}
.lesson-content,.ml-lesson-content{min-width:0}
.lesson-content>.panel{
  padding:0;margin:0 0 30px;border:0;border-radius:0;box-shadow:none;background:transparent;
}
.lesson-content h2,.ml-lesson-content h2{
  margin:0 0 12px;font-size:27px;line-height:1.25;color:var(--learning-ink);
}
.lesson-content h3,.ml-lesson-content h3{font-size:18px;line-height:1.35;color:var(--learning-ink)}
.lesson-content>.panel>p:not([class]),.ml-lesson-content>.ml-prose>p:not([class]){font-size:16px;line-height:1.7}
.learning-objectives{
  display:flex;gap:20px;margin:0 0 30px;padding:18px 22px;border-radius:12px;
  background:#efe8dc;color:var(--learning-ink);
}
.learning-objectives>b{min-width:90px;padding-top:2px;font-size:13px}
.learning-objectives ul{margin:0;padding-left:17px;font-size:14px;line-height:1.6;color:#445061}
.learning-lesson-nav{display:flex;justify-content:space-between;align-items:stretch;gap:16px;margin-top:25px}
.learning-lesson-nav a{
  flex:1;padding:16px 18px;border:1px solid var(--learning-border);border-radius:12px;
  background:#fff;color:var(--learning-ink);font-size:14px;line-height:1.5;
}
.learning-lesson-nav a:last-child{text-align:right}
.learning-lesson-nav a:hover{border-color:var(--learning-coral);color:var(--learning-coral)}
.learning-lesson-nav .ml-next{margin:0;border:1px solid var(--learning-border);padding:16px 18px}
.lesson-content>.panel.lab,.lesson-content>.panel#quiz{
  padding:23px;margin:32px 0;border:1px solid var(--learning-border);
  border-radius:14px;background:#fff;
}
.lesson-content>.panel.lab>h2,.lesson-content>.panel#quiz>h2{font-size:23px}
.lesson-content>.panel#deeper{
  padding:0;margin:30px 0;border-top:1px solid var(--learning-border);
  border-bottom:1px solid var(--learning-border);overflow:visible;
}
.lesson-content .deeper summary{padding:20px 44px 20px 0}
.lesson-content .deeper summary:after{right:0;width:28px;height:28px;font-size:19px}
.lesson-content .deeper-title{font-size:17px}
.lesson-content .deeper-sub{padding-right:0;font-size:13px;color:var(--learning-muted)}
.lesson-content .deeper-body{padding:0 0 20px;border-top:0}
.lesson-content .lesson-nav a{
  border:1px solid var(--learning-border);background:#fff;color:var(--learning-ink);
  box-shadow:none;
}
.lesson-content .lesson-nav a:hover{border-color:var(--learning-coral);color:var(--learning-coral)}
.lesson-content .lesson-nav .next{background:#fff}
.lesson-content .lesson-nav span{font-size:12px;color:var(--learning-muted);opacity:1}
.lesson-content .lesson-nav b{font-size:15px;line-height:1.4}
.lesson-shell>.toc,.ml-lesson-shell>.ml-sidebar{
  position:sticky;top:25px;display:block;order:0;min-width:0;
  max-height:calc(100vh - 50px);overflow-y:auto;
  margin:0;padding:0 4px 0 0;border:0;border-radius:0;box-shadow:none;background:transparent;
  color:var(--learning-ink);font-size:13px;
}
.learning-nav-details{padding:0 0 16px;margin:0 0 16px;border-bottom:1px solid var(--learning-border)}
.learning-nav-summary{
  cursor:pointer;font-size:14px;line-height:1.5;font-weight:800;color:var(--learning-ink);
}
.learning-nav-summary::marker{color:var(--learning-coral)}
.learning-nav-links{margin:10px 0 0}
.toc .learning-nav-links a,.ml-sidebar .learning-nav-links a,
.toc .learning-nav-resources a,.ml-sidebar .learning-nav-resources a{
  display:block;padding:7px 0;font-size:13px;line-height:1.5;color:var(--learning-muted);
}
.toc .learning-nav-links a:hover,.ml-sidebar .learning-nav-links a:hover,
.toc .learning-nav-resources a:hover,.ml-sidebar .learning-nav-resources a:hover{
  color:var(--learning-coral);text-decoration:underline;text-underline-offset:3px;
}
.learning-nav-resources{display:block;padding:0;margin:0;border:0}
.ml-sidebar .ml-in-page.learning-nav-links,
.ml-sidebar .ml-in-page.learning-nav-resources{display:block;gap:0;padding-top:0;border:0}
.toc .toc-progress{width:auto;margin-top:16px;padding-top:14px;border-top:1px solid var(--learning-border)}
.toc .toc-progress .hint{font-size:12px;line-height:1.5}
.ml-sidebar .learning-nav-course ol{display:block;margin:12px 0 0;padding:0;border-left:1px solid var(--learning-border)}
.ml-sidebar .learning-nav-course li{width:auto}
.ml-sidebar .learning-nav-course li a{
  padding:8px 0 8px 12px;border:0;border-radius:0;font-size:12px;line-height:1.45;
}
.ml-sidebar .learning-nav-course li a[aria-current]{
  margin-left:-1px;border:0;border-left:2px solid var(--learning-coral);color:var(--learning-coral);
}
.ml-sidebar .ml-progress-box{
  min-width:0;width:100%;margin:16px 0 0;padding:12px;
  border-radius:10px;border-color:var(--learning-border);
}
.ml-sidebar .ml-progress-box .ml-eyebrow{font-size:11px}
.ml-sidebar .ml-progress-box ul{font-size:12px}
.ml-sidebar .ml-progress-state{font-size:12px!important;line-height:1.5}
.lesson-content [id],.ml-lesson-content [id]{scroll-margin-top:24px}
.learning-nav-summary:focus-visible{
  outline:3px solid var(--learning-ink);outline-offset:4px;border-radius:2px;
}
@media(max-width:1050px){
  .lesson-top,.ml-lesson-hero{padding-inline:30px}
  .lesson-shell,.ml-lesson-shell{padding-inline:30px;grid-template-columns:180px minmax(0,1fr);gap:28px}
}
@media(max-width:900px){
  .lesson-top,.ml-lesson-hero{padding:28px 24px}
  .lesson-top h1,.ml-lesson-hero h1{font-size:36px;letter-spacing:-1px}
  .lesson-shell,.ml-lesson-shell{grid-template-columns:minmax(0,1fr);padding:24px;gap:28px}
  .lesson-shell>.toc,.ml-lesson-shell>.ml-sidebar{
    position:static;max-height:none;overflow:visible;padding:16px;
    border:1px solid var(--learning-border);border-radius:12px;background:#fff;
  }
  .learning-nav-details{margin-bottom:12px;padding-bottom:12px}
  .learning-nav-summary{padding:3px 0}
  .learning-nav-resources{display:flex;flex-wrap:wrap;gap:4px 18px}
  .ml-sidebar .ml-in-page.learning-nav-resources{display:flex}
  .toc .learning-nav-resources a,.ml-sidebar .learning-nav-resources a{padding:4px 0;font-size:12px}
  .lesson-content>.panel.lab,.lesson-content>.panel#quiz{padding:20px}
}
@media(max-width:600px){
  .learning-lesson-nav{flex-direction:column}
  .learning-lesson-nav a:last-child{text-align:left}
}
@media(max-width:440px){
  .lesson-top h1,.ml-lesson-hero h1{font-size:33px}
  .lesson-content>.panel.lab,.lesson-content>.panel#quiz{padding:16px}
  .lesson-content h2,.ml-lesson-content h2{font-size:25px}
  .lesson-content>.panel.lab>h2,.lesson-content>.panel#quiz>h2{font-size:22px}
  .learning-objectives{display:block;padding:16px}
  .learning-objectives ul{margin-top:9px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Learn AI sidebar: same progress box and course list as Learn ML (Claude_12) */
.toc .ai-progress-box{background:#fff;border:1px solid var(--learning-border);border-radius:14px;padding:14px 16px}
.toc .ai-progress-box .ml-eyebrow{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin:0 0 8px}
.toc .ai-progress-box ul{list-style:none;padding:0;margin:0 0 8px;font-size:13px}
.toc .ai-progress-box li{padding:3px 0 3px 26px;position:relative;color:var(--learning-muted);line-height:1.45}
.toc .ai-progress-box li:before{content:'';position:absolute;left:0;top:5px;width:14px;height:14px;border:2px solid #c9bfb2;border-radius:50%}
.toc .ai-progress-box li.done{color:var(--learning-ink);font-weight:700}
.toc .ai-progress-box li.done:before{background:#2f7a5c;border-color:#2f7a5c}
.toc .ai-progress-box .ml-progress-state{display:block;font-size:13px;font-weight:800;color:var(--learning-ink);margin:0}
.toc .toc-progress{border-top:0;padding-top:0}
.toc .learning-nav-course ol{list-style:none;display:block;margin:12px 0 0;padding:0;border-left:1px solid var(--learning-border)}
.toc .learning-nav-course li{margin:0}
.toc .learning-nav-course li a{display:block;padding:8px 0 8px 12px;font-size:12px;line-height:1.45;color:var(--learning-ink)}
.toc .learning-nav-course li a[aria-current]{margin-left:-1px;border-left:2px solid var(--learning-coral);color:var(--learning-coral);font-weight:750}