/* AIAGES student-course UI alignment pilot
   Scope: visual-only alignment with the original AIAGES course UI.
   Do not change content, links, data attributes, or export behavior. */
:root{
  --bg:#f6efe2;
  --paper:#fffaf3;
  --paper2:#fff7e8;
  --ink:#241b14;
  --muted:#74675b;
  --line:#ded0bd;
  --green:#2f8f6b;
  --orange:#ee9b21;
  --blue:#4867aa;
  --red:#c95b52;
  --shadow:0 22px 70px rgba(58,42,24,.10);
  --radius:26px;
}
html{scroll-behavior:smooth;scroll-padding-top:92px;}
body{
  background:radial-gradient(circle at 15% 0%,#fff7e7 0,#f6efe2 34%,#efe0ca 100%);
  color:var(--ink);
}
.top{
  background:rgba(255,250,243,.88);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(222,208,189,.78);
}
.top-inner{max-width:1220px;}
.brand{letter-spacing:-.02em;}
.brand span{color:var(--green);}
.nav .pill,.pill{
  background:rgba(255,250,243,.75);
  border-color:var(--line);
  color:var(--muted);
}
.nav .pill:hover,.pill:hover{
  color:var(--ink);
  border-color:var(--orange);
  background:#fffaf3;
}
.shell{max-width:1220px;padding-top:24px;}
.hero{gap:22px;align-items:stretch;}
.panel,.railbox,.card,.caseBox,.pathcard,.sectionContract,.studentProgressMap,.qualityBoundary,.exemplarBox{
  border-color:var(--line);
  box-shadow:var(--shadow);
}
.panel,.railbox{
  background:rgba(255,250,243,.90);
  border-radius:var(--radius);
}
.hero-main{padding:44px;}
.eyebrow{color:var(--green);font-weight:900;letter-spacing:.14em;}
h1{letter-spacing:-.055em;}
.lead{color:var(--muted);}
.contract div,.card,.caseBox,.pathcard{
  background:#fffdf8;
  border-color:var(--line);
  border-radius:20px;
  box-shadow:0 8px 24px rgba(73,55,33,.05);
}
.btn{
  background:var(--ink);
  color:#fff;
  border-radius:999px;
  font-weight:850;
}
.btn.secondary{
  background:#fff;
  color:var(--ink);
  border:1px solid var(--line);
}
.btn.green{background:var(--green);}
.btn.orange{background:var(--orange);color:#241b14;}
.content{
  background:rgba(255,250,243,.90);
  border-color:var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.content h2{
  border-top-color:var(--line);
  scroll-margin-top:98px;
}
.content table{
  border-color:var(--line);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
}
.content th{background:#fff4df;color:var(--ink);}
.content td,.content th{border-color:var(--line);}
.content pre,.source{
  border-color:var(--line);
  border-radius:16px;
}
.source{background:#fff;}
.fieldGrid select,.fieldGrid textarea,select,textarea,input[type="text"]{
  border:1px solid var(--line);
  border-radius:12px;
  background:#fffdf8;
  color:var(--ink);
}
.fieldGrid select:focus,.fieldGrid textarea:focus,select:focus,textarea:focus,input[type="text"]:focus{
  outline:2px solid rgba(47,143,107,.22);
  border-color:rgba(47,143,107,.55);
}
.studentProgressMap{
  background:rgba(255,250,243,.90)!important;
  border:1px solid var(--line)!important;
  border-radius:20px!important;
  padding:14px!important;
  margin:14px 0 20px!important;
}
.studentProgressMap .mini{color:var(--muted)!important;}
.studentProgressMap .studentDay{
  border-color:var(--line)!important;
  background:#fff!important;
  color:var(--muted)!important;
  border-radius:999px!important;
}
.studentProgressMap .studentDay.current{
  background:var(--ink)!important;
  color:#fff!important;
  border-color:var(--ink)!important;
}
.qualityBoundary{
  background:#fff8f7!important;
  border-left:5px solid var(--red)!important;
  border-radius:18px!important;
}
.exemplarBox{
  background:#f7f7ff!important;
  border-left:5px solid var(--blue)!important;
  border-radius:18px!important;
}
.beginnerGuide{
  background:#eaf7f0;
  border-left:5px solid var(--green);
  border-radius:14px;
  color:#1f2a1f;
}
.beginnerGuide b{color:#166534;}
.reveal,.feedback{
  background:#eaf7f0;
  border-color:#b9dfcf;
  border-radius:16px;
}
.warnbox{
  background:#fff1d6;
  border-color:#edcf9e;
  border-radius:16px;
}
.side{top:86px;}
.railbox a{
  color:var(--muted);
  border-radius:12px;
  padding:6px 8px;
}
.railbox a:hover{background:#fff;color:var(--ink);}
#export,.builder,#render-report{scroll-margin-top:98px;}
@media(max-width:980px){
  .hero,.layout{grid-template-columns:1fr;}
  .side{position:static;}
  .hero-main{padding:28px;}
}
@media(max-width:560px){
  html{scroll-padding-top:0;}
  .top{position:static;}
  .shell{padding-left:14px;padding-right:14px;}
  .hero-main{padding:22px;}
  .content{padding:22px;}
  .top-inner{align-items:stretch;}
  .nav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;width:100%;}
  .nav .pill{text-align:center;justify-content:center;}
  .studentProgressMap .days{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;width:100%;}
  .studentProgressMap .studentDay{display:block;text-align:center;font-size:11px;padding-left:3px!important;padding-right:3px!important;}
  .shell,.hero,.layout,.panel,.content,.section,.card,.caseBox,.pathcard,.practiceGrid,.practiceGrid > *, .fieldGrid,.fieldGrid > *, .contract,.contract > *, .railbox,.studentProgressMap{min-width:0!important;max-width:100%!important;}
  .card,.caseBox,.pathcard,.railbox,.sectionContract,.source,.beginnerGuide{overflow-wrap:anywhere;word-break:break-word;}
  select,textarea,input,button,.btn{max-width:100%!important;min-width:0!important;}
  .fieldGrid select,.fieldGrid textarea{max-width:100%!important;min-width:0!important;}
  #export,.builder,#render-report,.content h2{scroll-margin-top:0;}
  .btn[href^="#"]{scroll-margin-top:0;}
}
@media(max-width:560px) and (prefers-reduced-motion:no-preference){
  html{scroll-behavior:auto;}
}

/* D1 sample-alignment refinement 2026-05-27
   Visual-only: preserve DOM text, links, ids, data attributes, JS and export behavior. */
.shell{max-width:1280px;padding:26px 22px 86px;}
.top-inner{max-width:1280px;}
.top .brand{text-transform:none;font-weight:900;letter-spacing:-.03em;}
.top .nav{gap:8px;}
.top .pill{padding:7px 12px;font-size:13px;}

/* Keep the required student map, but make it feel like the sample's compact paper controls instead of a blue system block. */
.studentProgressMap{
  margin:0 0 22px!important;
  padding:16px 18px!important;
  background:rgba(255,250,243,.86)!important;
  border:1px solid rgba(222,208,189,.86)!important;
  border-radius:22px!important;
  box-shadow:0 14px 42px rgba(58,42,24,.07)!important;
}
.studentProgressMap b{letter-spacing:-.02em;}
.studentProgressMap .days{gap:6px!important;margin-top:10px;}
.studentProgressMap .studentDay{
  padding:5px 8px!important;
  background:#fffdf8!important;
  border:1px solid var(--line)!important;
  color:var(--muted)!important;
  box-shadow:none!important;
}
.studentProgressMap .studentDay.current{
  background:var(--ink)!important;
  color:white!important;
  border-color:var(--ink)!important;
}

/* Match sample hero rhythm: large left story + smaller artifact card. */
.hero{grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:22px;margin-bottom:24px;align-items:stretch;}
.hero .panel{background:rgba(255,250,243,.9);}
.hero-main{padding:46px;}
.hero aside.hero-main{padding:26px;display:grid;align-content:space-between;gap:22px;}
.hero h1{font-size:clamp(42px,6vw,78px);line-height:.98;margin:0 0 18px;letter-spacing:-.06em;}
.hero .lead{font-size:20px;line-height:1.58;max-width:780px;}
.contract{margin-top:26px;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.contract div{border-radius:20px;padding:16px;background:#fff;border:1px solid var(--line);}

/* Restore the target's clean main-content + right-rail structure inside the existing DOM. */
.layout{grid-template-columns:minmax(0,1fr) 310px;gap:22px;margin-top:24px;align-items:start;}
.layout>.qualityBoundary{grid-column:1;grid-row:1;}
.layout>.exemplarBox{grid-column:1;grid-row:2;}
.layout>.content{grid-column:1;grid-row:3;}
.layout>.side{grid-column:2;grid-row:auto;}
.side{top:78px;gap:14px;}
.railbox{padding:18px;border-radius:22px;background:rgba(255,250,243,.9);box-shadow:0 10px 35px rgba(58,42,24,.06);}
.railbox h3{margin-top:0;letter-spacing:-.02em;}
.railbox a{padding:8px 10px;margin:2px 0;}

/* Make warning/example blocks look like sample cards, with accents softened rather than saturated. */
.qualityBoundary,.exemplarBox{
  padding:24px!important;
  margin:0!important;
  box-shadow:0 10px 35px rgba(58,42,24,.06)!important;
}
.qualityBoundary{background:#fff8f7!important;border:1px solid rgba(201,91,82,.30)!important;border-left:5px solid var(--red)!important;}
.exemplarBox{background:#f9fbff!important;border:1px solid rgba(72,103,170,.30)!important;border-left:5px solid var(--blue)!important;}
.qualityBoundary h2,.exemplarBox h2{font-size:24px;margin:0 0 10px;letter-spacing:-.03em;}

/* Normalize section cards and interaction blocks to the sample's paper-card system. */
.content{padding:30px;background:rgba(255,250,243,.9);}
.content h2{font-size:31px;line-height:1.15;margin-top:34px;padding-top:24px;letter-spacing:-.035em;}
.content h2:first-child{margin-top:0;border-top:0;padding-top:0;}
.grid2,.grid3,.practiceGrid{gap:14px;}
.card,.caseBox,.pathcard{
  padding:18px;
  border-radius:20px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:none;
}
.pathcard,.card:not(.good):not(.bad){background:#fffdf8;}
.card.good,.caseBox.good{background:#fbfffc;border-color:rgba(47,143,107,.35);}
.card.bad,.caseBox.bad{background:#fff8f7;border-color:rgba(201,91,82,.35);}
.choice{border-radius:14px;background:#fffdf8;padding:10px 12px;}
.sectionContract,.source{border-radius:18px;}
.sectionContract{background:#fff7e8;border:1px solid var(--line);padding:16px;}
.source{background:#fff;border:1px solid var(--line);padding:14px;}
.beginnerGuide{background:#eaf7f0;border-color:#b9dfcf;border-radius:16px;}
.content table{border-radius:18px;background:#fff;}
.content th{background:#fff4df;}

/* Floating action parity with the sample; uses an existing link, no new text. */
main.shell>p:last-of-type .btn:not(.secondary){
  position:fixed;right:18px;bottom:18px;z-index:30;box-shadow:var(--shadow);
}

@media(max-width:980px){
  .hero,.layout{grid-template-columns:1fr;}
  .layout>.qualityBoundary,.layout>.exemplarBox,.layout>.content,.layout>.side{grid-column:1;grid-row:auto;}
  .side{position:static;}
  .hero-main{padding:28px;}
  main.shell>p:last-of-type .btn:not(.secondary){position:static;margin-top:10px;}
}
@media(max-width:560px){
  .shell{padding:14px 14px 72px;}
  .studentProgressMap{padding:10px!important;margin-bottom:14px!important;}
  .studentProgressMap .mini{font-size:12px!important;line-height:1.45;}
  .hero{gap:12px;margin-bottom:14px;}
  .hero-main,.hero aside.hero-main{padding:22px;}
  .hero h1{font-size:clamp(32px,10vw,42px);line-height:1.04;}
  .hero .lead{font-size:15px;}
  .contract{grid-template-columns:1fr!important;margin-top:16px;}
  .content{padding:22px;}
  .content h2{font-size:22px;line-height:1.2;margin-top:26px;padding-top:18px;}
  .qualityBoundary,.exemplarBox{padding:18px!important;}
  main.shell>p:last-of-type .btn:not(.secondary){position:static;}
}

/* Refinement after visual compare: let the hero be the first major block like the sample. */
main.shell{display:flex;flex-direction:column;}
main.shell>.hero{order:1;}
main.shell>#student-progress-map{order:2;margin-top:0!important;}
main.shell>.layout{order:3;}
main.shell>p{order:4;}
main.shell>#standard-filename{order:5;}
.hero aside.hero-main h2{font-size:clamp(26px,3vw,36px);line-height:1.06;letter-spacing:-.04em;margin:0 0 12px;}
.hero aside.hero-main .small{font-size:14px;line-height:1.55;color:var(--muted);}
.hero aside.hero-main .btn{margin-top:auto;width:max-content;}
.railbox:first-child{background:#fffaf3;}
@media(max-width:560px){main.shell{display:block}.hero aside.hero-main .btn{width:100%;}}

/* Artifact card local rhythm: no artificial vertical gaps without adding/changing content. */
.hero aside.hero-main{align-content:start;}
.hero aside.hero-main .btn{margin-top:18px;width:max-content;}

/* Keep the sample-like hero-first hierarchy on mobile too; prior mobile containment remains intact. */
@media(max-width:560px){main.shell{display:flex;flex-direction:column;}}

/* Standard rollout fix: contain late-sequence/source blocks when they appear inside hero artifact cards. */
.hero aside.hero-main > *, .box, .lateSequenceRecap, .sourceRepairPacket, .trackOptionPacket{min-width:0;max-width:100%;}
.hero aside.hero-main pre, .box pre{max-width:100%;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;}
@media(max-width:560px){.hero aside.hero-main > *, .box, .lateSequenceRecap, .sourceRepairPacket, .trackOptionPacket{min-width:0!important;max-width:100%!important;}}

/* Sidebar repair 2026-05-27: D2+ pages use <aside class="rail">, not D1's .side.
   Prevent direct callout blocks from auto-placing into the rail column. */
.layout:has(> .rail){grid-template-columns:minmax(0,1fr) 310px;gap:22px;align-items:start;}
.layout:not(:has(> .rail)):not(:has(> .side)){grid-template-columns:1fr;}
.layout > .carryBox,
.layout > .qualityBoundary,
.layout > .exemplarBox,
.layout > .passBox,
.layout > .w4DayDifference,
.layout > article.content,
.layout > section.content,
.layout > .panel.content{
  grid-column:1!important;
  grid-row:auto!important;
}
.layout > .rail{
  grid-column:2!important;
  grid-row:auto!important;
  position:sticky;
  top:78px;
  height:max-content;
  display:grid;
  gap:14px;
  align-self:start;
}
.layout > .rail .railbox{background:rgba(255,250,243,.9);border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:0 10px 35px rgba(58,42,24,.06);}
@media(max-width:980px){
  .layout:has(> .rail){grid-template-columns:1fr;}
  .layout > .rail{grid-column:1!important;grid-row:auto!important;position:static;}
}

/* Sidebar repair follow-up: floating next button belongs to D1-like pages only;
   on D2+ rail pages it overlaps the right sidebar, so keep it in normal flow. */
main.shell:has(.layout > .rail) > p:last-of-type .btn:not(.secondary){position:static;right:auto;bottom:auto;box-shadow:none;}

/* Redesign round 2026-05-27: align D1-D90 student pages to the original intent.
   1) hero title smaller; 2) 30-day progress map belongs to the right sidebar;
   3) D2+ rail/page-map uses the same vertical paper rail language as D1. */
.hero h1{
  font-size:clamp(30px,3.2vw,46px)!important;
  line-height:1.08!important;
  letter-spacing:-.04em!important;
  margin:0 0 14px!important;
}
.hero-main{padding:34px!important;}
.hero .lead{font-size:17px!important;line-height:1.6!important;}
.hero aside.hero-main h2{font-size:clamp(22px,2.2vw,30px)!important;line-height:1.12!important;}

@media(min-width:981px){
  main.shell:has(> #student-progress-map){
    display:grid;
    grid-template-columns:minmax(0,1fr) 310px;
    gap:22px;
    align-items:start;
  }
  main.shell:has(> #student-progress-map) > .hero{
    grid-column:1/-1;
    grid-row:1;
    order:initial;
  }
  main.shell:has(> #student-progress-map) > #student-progress-map{
    grid-column:2;
    grid-row:2;
    margin:0!important;
    align-self:start;
    max-height:none;
    overflow:visible;
  }
  main.shell:has(> #student-progress-map) > .layout{display:contents;}
  main.shell:has(> #student-progress-map) > .layout > .carryBox,
  main.shell:has(> #student-progress-map) > .layout > .qualityBoundary,
  main.shell:has(> #student-progress-map) > .layout > .exemplarBox,
  main.shell:has(> #student-progress-map) > .layout > .passBox,
  main.shell:has(> #student-progress-map) > .layout > .w4DayDifference,
  main.shell:has(> #student-progress-map) > .layout > article.content,
  main.shell:has(> #student-progress-map) > .layout > section.content,
  main.shell:has(> #student-progress-map) > .layout > .panel.content{
    grid-column:1!important;
    grid-row:auto!important;
    width:100%;
  }
  main.shell:has(> #student-progress-map) > .layout > .carryBox{grid-row:2!important;}
  main.shell:has(> #student-progress-map) > .layout > .rail,
  main.shell:has(> #student-progress-map) > .layout > .side{
    grid-column:2!important;
    grid-row:auto!important;
    position:sticky;
    top:78px;
    align-self:start;
    height:max-content;
    display:grid;
    gap:14px;
    min-width:0;
  }
  main.shell:has(> #student-progress-map) > p,
  main.shell:has(> #student-progress-map) > #standard-filename{
    grid-column:1/-1;
  }
}

/* Right-side 30-day map compact rail treatment. */
#student-progress-map.studentProgressMap{
  background:rgba(255,250,243,.92)!important;
  border:1px solid var(--line)!important;
  border-radius:22px!important;
  padding:18px!important;
  box-shadow:0 10px 35px rgba(58,42,24,.06)!important;
}
#student-progress-map.studentProgressMap b{display:block;margin-bottom:6px;letter-spacing:-.02em;}
#student-progress-map.studentProgressMap .days{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px!important;margin-top:10px;}
#student-progress-map.studentProgressMap .studentDay{display:block;text-align:center;font-size:11px!important;padding:5px 3px!important;line-height:1.15;}

/* D2+ Page Map: force vertical, calm, D1-like rail list. */
.railbox:has(a[href="#export"]) a,
.layout > .rail .railbox a,
.layout > .side .railbox a{
  display:block!important;
  width:100%;
  margin:3px 0!important;
  padding:8px 10px!important;
  border-radius:12px;
  color:var(--muted)!important;
  text-decoration:none!important;
  line-height:1.35;
  white-space:normal;
}
.layout > .rail .railbox a:hover,
.layout > .side .railbox a:hover{background:#fff;color:var(--ink)!important;}
.layout > .rail .railbox h3,
.layout > .side .railbox h3{margin:0 0 10px;}

@media(max-width:980px){
  main.shell:has(> #student-progress-map){display:flex;flex-direction:column;}
  main.shell:has(> #student-progress-map) > .hero{order:1;}
  main.shell:has(> #student-progress-map) > #student-progress-map{order:2;max-height:none;overflow:visible;}
  main.shell:has(> #student-progress-map) > .layout{order:3;display:grid;grid-template-columns:1fr;}
  .hero h1{font-size:clamp(26px,7vw,34px)!important;line-height:1.12!important;}
  .hero-main{padding:22px!important;}
  .hero .lead{font-size:15px!important;}
}

/* Redesign polish 2026-05-27: fix remaining visual blockers from multimodal check. */
.hero h1{
  font-size:clamp(26px,2.45vw,38px)!important;
  line-height:1.12!important;
  letter-spacing:-.035em!important;
}
.carryBox textarea,
.qualityBoundary textarea,
.exemplarBox textarea,
.passBox textarea,
.w4DayDifference textarea{
  display:block;
  width:100%!important;
  min-height:110px;
  box-sizing:border-box;
  margin-top:10px;
}
/* No floating nav buttons on student pages with right-side progress/rail; keep sidebar unobstructed. */
main.shell:has(> #student-progress-map) > p:last-of-type .btn:not(.secondary){
  position:static!important;right:auto!important;bottom:auto!important;box-shadow:none!important;
}
/* Hide repeated identical top-nav links visually without changing the underlying document text/links. */
.top .nav a[href="d30-w1d7-student-practice-v1.html"] ~ a[href="d30-w1d7-student-practice-v1.html"],
.top .nav a[href="d30-d29-student-practice-v1.html"] ~ a[href="d30-d29-student-practice-v1.html"],
.top .nav a[href="d30-d30-student-practice-v1.html"] ~ a[href="d30-d30-student-practice-v1.html"]{
  display:none!important;
}
@media(max-width:980px){.hero h1{font-size:clamp(24px,6vw,32px)!important;}}

/* Strict Page Map repair 2026-05-27: full h2 coverage can be long; keep it usable in rail. */
.railbox.page-map{max-height:none;overflow:visible;scrollbar-width:auto;}
.railbox.page-map a{font-size:13px;}

/* Final sidebar containment 2026-05-27:
   The right rail must be the only content in the right column. Some D1-D30 pages
   have carryBox/qualityBoundary/passBox/exemplarBox as direct .layout children;
   force every non-aside child to the main column, and the single aside to rail. */
.layout{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 310px!important;
  gap:22px!important;
  align-items:start!important;
}
.layout > :not(aside){
  grid-column:1!important;
  grid-row:auto!important;
  min-width:0!important;
  max-width:100%!important;
}
.layout > aside.rail,
.layout > aside.side{
  grid-column:2!important;
  grid-row:auto!important;
  position:sticky!important;
  top:78px!important;
  align-self:start!important;
  height:max-content!important;
  min-width:0!important;
  display:block!important;
}
.layout > aside.rail > .railbox.page-map,
.layout > aside.side > .railbox.page-map{
  display:block!important;
  margin:0!important;
}
@media(max-width:980px){
  .layout{grid-template-columns:1fr!important;}
  .layout > aside.rail,
  .layout > aside.side{
    grid-column:1!important;
    grid-row:auto!important;
    position:static!important;
  }
}

/* Final shell reset: after removing the visible 30-day progress module, D1-D30 pages
   must not keep the old shell-level two-column grid that was built for that module. */
main.shell:has(> #student-progress-map[hidden]){
  display:block!important;
}
main.shell:has(> #student-progress-map[hidden]) > .hero{
  display:grid!important;
}
main.shell:has(> #student-progress-map[hidden]) > .layout{
  display:grid!important;
  width:100%!important;
}

/* Correction 2026-05-27: progress map is learning content, not removable chrome.
   Keep it visible as a distinct right-rail module above the page map. */
main.shell:has(> #student-progress-map:not([hidden])){
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 310px!important;
  gap:22px!important;
  align-items:start!important;
}
main.shell:has(> #student-progress-map:not([hidden])) > .hero{
  grid-column:1 / -1!important;
  grid-row:1!important;
}
main.shell:has(> #student-progress-map:not([hidden])) > #student-progress-map{
  grid-column:2!important;
  grid-row:2!important;
  margin:0!important;
  align-self:start!important;
  max-height:none!important;
  overflow:visible!important;
}
main.shell:has(> #student-progress-map:not([hidden])) > .layout{
  display:contents!important;
}
main.shell:has(> #student-progress-map:not([hidden])) > .layout > :not(aside){
  grid-column:1!important;
  grid-row:auto!important;
  min-width:0!important;
}
main.shell:has(> #student-progress-map:not([hidden])) > .layout > aside.rail,
main.shell:has(> #student-progress-map:not([hidden])) > .layout > aside.side{
  grid-column:2!important;
  grid-row:auto!important;
  position:sticky!important;
  top:78px!important;
  align-self:start!important;
}
#student-progress-map.studentProgressMap:not([hidden]){
  background:rgba(255,250,243,.92)!important;
  border:1px solid var(--line)!important;
  border-radius:22px!important;
  padding:18px!important;
  box-shadow:0 10px 35px rgba(58,42,24,.06)!important;
}
#student-progress-map.studentProgressMap:not([hidden]) b{font-size:18px;letter-spacing:-.02em;}
#student-progress-map.studentProgressMap:not([hidden]) .days{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px!important;margin-top:10px;}
#student-progress-map.studentProgressMap:not([hidden]) .studentDay{display:block;text-align:center;font-size:11px!important;padding:5px 3px!important;line-height:1.15;}
@media(max-width:980px){
  main.shell:has(> #student-progress-map:not([hidden])){display:flex!important;flex-direction:column!important;}
  main.shell:has(> #student-progress-map:not([hidden])) > .hero{order:1!important;}
  main.shell:has(> #student-progress-map:not([hidden])) > #student-progress-map{order:2!important;max-height:none!important;overflow:visible!important;}
  main.shell:has(> #student-progress-map:not([hidden])) > .layout{order:3!important;display:grid!important;grid-template-columns:1fr!important;}
}

/* D1-D90 UI baseline pass 2026-05-27:
   Mobile tables and long select controls must never widen the page body.
   Visual-only CSS containment; no content, IDs, links, fields, or JS behavior changed. */
@media(max-width:560px){
  .content,
  .panel.content,
  article.content,
  section.content{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
  }
  .content table,
  article.content table,
  section.content table{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
  }
  .content thead,
  .content tbody,
  .content tr{
    max-width:100%!important;
  }
  .content th,
  .content td{
    min-width:0!important;
    max-width:min(260px,72vw)!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
  }
  .content table select,
  .content table input,
  .content table textarea{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
}

/* Page Map sticky-center repair 2026-05-28:
   Keep the fixed right-rail Page Map visible during reading instead of letting
   CSS grid auto-placement push it to the bottom after long article content. */
@media(min-width:981px){
  main.shell:has(> #student-progress-map:not([hidden])) > .layout > aside.rail,
  main.shell:has(> #student-progress-map:not([hidden])) > .layout > aside.side{
    grid-column:2!important;
    grid-row:3!important;
    position:sticky!important;
    top:50vh!important;
    transform:translateY(-50%)!important;
    align-self:start!important;
    z-index:5!important;
    height:max-content!important;
    max-height:calc(100vh - 120px)!important;
    overflow:auto!important;
  }
  .layout > aside.rail,
  .layout > aside.side{
    position:sticky!important;
    top:50vh!important;
    transform:translateY(-50%)!important;
    z-index:5!important;
    max-height:calc(100vh - 120px)!important;
    overflow:auto!important;
  }
  .layout > aside.rail > .railbox.page-map,
  .layout > aside.side > .railbox.page-map{
    max-height:calc(100vh - 140px)!important;
    overflow:auto!important;
  }
}
@media(max-width:980px){
  .layout > aside.rail,
  .layout > aside.side{
    transform:none!important;
    max-height:none!important;
    overflow:visible!important;
  }
}

/* Page Map final behavior 2026-05-28:
   The Page Map is navigation chrome, not document-flow content. On desktop,
   pin the rail that contains .page-map to the viewport center-right so it is
   visible throughout reading, independent of long article height or grid row. */
@media(min-width:981px){
  .layout > aside.rail:has(.page-map),
  .layout > aside.side:has(.page-map),
  main.shell:has(> #student-progress-map:not([hidden])) > .layout > aside.rail:has(.page-map),
  main.shell:has(> #student-progress-map:not([hidden])) > .layout > aside.side:has(.page-map){
    position:fixed!important;
    top:50%!important;
    right:max(22px, calc((100vw - 1280px) / 2 + 22px))!important;
    left:auto!important;
    width:310px!important;
    max-width:310px!important;
    transform:translateY(-50%)!important;
    z-index:40!important;
    max-height:calc(100vh - 96px)!important;
    overflow:auto!important;
  }
  .layout > aside.rail:has(.page-map) > .railbox.page-map,
  .layout > aside.side:has(.page-map) > .railbox.page-map{
    max-height:calc(100vh - 112px)!important;
    overflow:auto!important;
  }
}
@media(max-width:980px){
  .layout > aside.rail:has(.page-map),
  .layout > aside.side:has(.page-map){
    position:static!important;
    transform:none!important;
    width:auto!important;
    max-width:100%!important;
    max-height:none!important;
    overflow:visible!important;
  }
}

/* Page Map start-point correction 2026-05-28:
   Do not float the Page Map during the hero / Learning Progress area. It should
   enter from the teaching body (around 1. Role / Context), then remain centered
   while scrolling through the lesson. */
@media(min-width:981px){
  .layout > aside.rail:has(.page-map),
  .layout > aside.side:has(.page-map),
  main.shell:has(> #student-progress-map:not([hidden])) > .layout > aside.rail:has(.page-map),
  main.shell:has(> #student-progress-map:not([hidden])) > .layout > aside.side:has(.page-map){
    position:sticky!important;
    top:50vh!important;
    right:auto!important;
    left:auto!important;
    width:auto!important;
    max-width:310px!important;
    transform:translateY(-50%)!important;
    z-index:5!important;
    max-height:calc(100vh - 112px)!important;
    overflow:auto!important;
  }
  main.shell:has(> #student-progress-map:not([hidden])) > .layout > aside.rail:has(.page-map),
  main.shell:has(> #student-progress-map:not([hidden])) > .layout > aside.side:has(.page-map){
    grid-column:2!important;
    grid-row:3!important;
  }
}

/* Page Map layout-row correction 2026-05-28:
   The previous display:contents layout let the rail auto-place after all content.
   Restore .layout as a real two-column grid below the hero/progress area so the
   Page Map starts beside the teaching body, not after the article. */
@media(min-width:981px){
  main.shell:has(> #student-progress-map:not([hidden])) > .layout{
    grid-column:1 / -1!important;
    grid-row:3!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 310px!important;
    gap:22px!important;
    align-items:start!important;
    width:100%!important;
  }
  main.shell:has(> #student-progress-map:not([hidden])) > .layout > :not(aside){
    grid-column:1!important;
    grid-row:auto!important;
  }
  main.shell:has(> #student-progress-map:not([hidden])) > .layout > aside.rail:has(.page-map),
  main.shell:has(> #student-progress-map:not([hidden])) > .layout > aside.side:has(.page-map){
    grid-column:2!important;
    grid-row:1!important;
    position:sticky!important;
    top:50vh!important;
    transform:translateY(-50%)!important;
    width:auto!important;
    max-width:310px!important;
    max-height:calc(100vh - 112px)!important;
    overflow:auto!important;
  }
}

/* In-article day navigation 2026-05-28:
   This is lesson-body navigation, not a global footer bar. */
.content-day-nav{
  margin:28px 0 0!important;
  padding:16px!important;
  border:1px solid var(--line)!important;
  border-radius:20px!important;
  background:rgba(255,250,243,.92)!important;
  box-shadow:0 10px 35px rgba(58,42,24,.06)!important;
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
}
.content-day-nav .pill.disabled,
.content-day-nav span.pill[aria-disabled="true"]{
  opacity:.55!important;
  pointer-events:none!important;
}
@media(max-width:560px){
  .content-day-nav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .content-day-nav .pill{text-align:center!important;justify-content:center!important;}
}

/* AI Ages global top navigation standard 2026-05-28 */
.aiages-global-nav{
  position:sticky;
  top:0;
  z-index:80;
  background:rgba(255,250,243,.9);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(222,208,189,.78);
}
.aiages-nav-inner{
  max-width:1280px;
  margin:0 auto;
  padding:12px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.aiages-nav-brand{
  color:var(--ink);
  text-decoration:none;
  font-weight:950;
  font-size:22px;
  letter-spacing:-.04em;
  white-space:nowrap;
}
.aiages-nav-brand .ai{color:var(--ink);}
.aiages-nav-brand .ages{color:var(--green);}
.aiages-nav-links{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.aiages-nav-links a{
  color:var(--muted);
  text-decoration:none;
  border:1px solid var(--line);
  background:rgba(255,250,243,.75);
  border-radius:999px;
  padding:7px 12px;
  font-size:13px;
  font-weight:800;
}
.aiages-nav-links a:hover{color:var(--ink);border-color:var(--orange);background:#fffaf3;}
@media(max-width:560px){
  .aiages-nav-inner{align-items:stretch;flex-direction:column;padding:10px 14px;}
  .aiages-nav-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;width:100%;}
  .aiages-nav-links a{text-align:center;}
}

/* AI Ages global nav exact visual parity with home/secondary pages 2026-05-28.
   Override earlier pill-style student-course nav rules. */
.aiages-global-nav{
  position:sticky!important;
  top:0!important;
  z-index:50!important;
  background:rgba(250,244,235,.96)!important;
  border-bottom:1px solid rgba(134,103,63,.20)!important;
  backdrop-filter:blur(14px)!important;
  padding:0!important;
  margin:0!important;
  box-shadow:none!important;
  border-radius:0!important;
}
.aiages-nav-inner{
  max-width:1220px!important;
  margin:0 auto!important;
  padding:14px 22px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:20px!important;
  box-sizing:border-box!important;
  min-height:58px!important;
}
.aiages-nav-brand{
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:23px!important;
  line-height:1!important;
  font-weight:700!important;
  letter-spacing:-.04em!important;
  text-decoration:none!important;
  color:#2f2418!important;
  white-space:nowrap!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.aiages-nav-brand .ai{font-style:italic!important;color:#2f2418!important;}
.aiages-nav-brand .ages{color:#2f2418!important;}
.aiages-nav-links{
  display:flex!important;
  align-items:center!important;
  gap:18px!important;
  flex-wrap:wrap!important;
  justify-content:flex-end!important;
  padding:0!important;
  margin:0!important;
}
.aiages-nav-links a{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif!important;
  font-size:14px!important;
  line-height:1.2!important;
  font-weight:400!important;
  letter-spacing:normal!important;
  text-decoration:none!important;
  color:#5f5143!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0!important;
}
.aiages-nav-links a:hover{color:#1f1913!important;background:transparent!important;border:0!important;}
@media(max-width:760px){
  .aiages-nav-inner{align-items:flex-start!important;flex-direction:column!important;gap:10px!important;}
  .aiages-nav-links{justify-content:flex-start!important;gap:12px 16px!important;}
}

/* Visual anchor safety repair 2026-05-28:
   Real screenshot audit showed section anchors sometimes land visually under the
   sticky global nav / pale top band. Keep Page Map centered behavior unchanged;
   only give all lesson anchors a larger safe landing offset. */
html{
  scroll-padding-top:132px!important;
}
main.shell [id],
.content h2,
article.content h2,
section.content h2,
#export,
.builder,
#section-1,
#manual-first-gate{
  scroll-margin-top:132px!important;
}
/* Prevent anchor target cards from visually kissing the sticky nav after hash navigation. */
article.content,
.panel.content,
section.content{
  overflow:visible!important;
}
/* Keep in-article navigation visually attached to content, never under a sticky header. */
.content-day-nav{
  scroll-margin-top:132px!important;
}
@media(max-width:560px){
  html{scroll-padding-top:96px!important;}
  main.shell [id],
  .content h2,
  article.content h2,
  section.content h2,
  #export,
  .builder,
  #section-1,
  #manual-first-gate,
  .content-day-nav{scroll-margin-top:96px!important;}
}

/* Hash target visual guard 2026-05-28:
   Some lesson anchors still land under the sticky global nav in real browser
   screenshots. This only affects active hash targets (Page Map / direct links),
   adding a temporary safe landing cushion without changing normal reading flow. */
main.shell h2[id]:target,
main.shell section[id]:target,
main.shell div[id]:target{
  padding-top:112px!important;
  margin-top:-92px!important;
}
main.shell h2[id]:target{
  display:block!important;
}
@media(max-width:560px){
  main.shell h2[id]:target,
  main.shell section[id]:target,
  main.shell div[id]:target{
    padding-top:88px!important;
    margin-top:-72px!important;
  }
}

/* Anchor fix handoff 2026-05-28:
   JS now performs hash landing offset. Remove the earlier visual padding guard
   so it does not create a white blank band above targeted headings/cards. */
main.shell h2[id]:target,
main.shell section[id]:target,
main.shell div[id]:target{
  padding-top:0!important;
  margin-top:0!important;
}

/* Global nav viewport lock 2026-05-28:
   Student pages had sticky nav visually scrolling away on deep hash landings,
   leaving a blank top band that looked like a white overlay/crop. Keep the same
   home-page visual nav, but lock it to the viewport and compensate document flow. */
body{
  padding-top:59px!important;
}
.aiages-global-nav{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:100%!important;
}

/* D2-D90 right rail Scheme C repair 2026-05-29:
   Correct model: left lesson-main controls document height; right-rail stretches to
   lesson height; Learning Progress and Page Map stack naturally; Page Map uses an
   internal sticky wrapper. Avoid grid-row span hacks, display:contents, 50vh center,
   internal Page Map scrolling, and floating next-page overlap. */
@media (min-width:981px){
  html,body{overflow-x:clip!important;overflow-y:visible!important;}
  body main.shell:has(> .layout > .lesson-main) {
    display:block!important;
  }
  body main.shell:has(> .layout > .lesson-main) > .hero{
    display:grid!important;
    grid-template-columns:minmax(0,1.2fr) 350px!important;
    gap:20px!important;
    margin-bottom:22px!important;
  }
  body main.shell:has(> .layout > .lesson-main) > .layout{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 310px!important;
    gap:22px!important;
    align-items:stretch!important;
    width:100%!important;
  }
  body main.shell:has(> .layout > .lesson-main) > .layout > .lesson-main{
    grid-column:1!important;
    grid-row:1!important;
    min-width:0!important;
    max-width:100%!important;
  }
  body main.shell:has(> .layout > .lesson-main) > .layout > .lesson-main > *{
    min-width:0!important;
    max-width:100%!important;
  }
  body main.shell:has(> .layout > .lesson-main) > .layout > aside.right-rail{
    grid-column:2!important;
    grid-row:1!important;
    position:relative!important;
    top:auto!important;
    right:auto!important;
    left:auto!important;
    transform:none!important;
    width:auto!important;
    max-width:310px!important;
    min-width:0!important;
    height:auto!important;
    min-height:100%!important;
    max-height:none!important;
    overflow:visible!important;
    z-index:5!important;
    align-self:stretch!important;
    display:block!important;
    margin:0!important;
  }
  body main.shell:has(> .layout > .lesson-main) > .layout > aside.right-rail > #student-progress-map.studentProgressMap{
    width:auto!important;
    max-width:310px!important;
    max-height:none!important;
    overflow:visible!important;
    margin:0 0 18px!important;
    position:static!important;
    top:auto!important;
    transform:none!important;
  }
  body main.shell:has(> .layout > .lesson-main) > .layout > aside.right-rail > .page-map-sticky{
    position:sticky!important;
    top:88px!important;
    transform:none!important;
    max-height:none!important;
    overflow:visible!important;
    margin:0!important;
  }
  body main.shell:has(> .layout > .lesson-main) > .layout > aside.right-rail > .page-map-sticky > .railbox.page-map{
    position:static!important;
    transform:none!important;
    max-height:none!important;
    overflow:visible!important;
    margin:0!important;
  }
  body main.shell:has(> .layout > .lesson-main)>p:last-of-type .btn:not(.secondary){
    position:static!important;right:auto!important;bottom:auto!important;box-shadow:none!important;
  }
}
@media (max-width:980px){
  body main.shell:has(> .layout > .lesson-main){display:block!important;}
  body main.shell:has(> .layout > .lesson-main) > .layout{display:grid!important;grid-template-columns:1fr!important;}
  body main.shell:has(> .layout > .lesson-main) > .layout > .lesson-main{grid-column:1!important;}
  body main.shell:has(> .layout > .lesson-main) > .layout > aside.right-rail{position:static!important;transform:none!important;max-height:none!important;margin-top:0!important;}
  body main.shell:has(> .layout > .lesson-main) > .layout > aside.right-rail > .page-map-sticky{position:static!important;}
}