/* ==========================================================================
   Atlas Open Academy & University - stylesheet
   Self-contained, no external fonts/CDNs (works offline via file://).
   ========================================================================== */

:root{
  --ink:#12203a;
  --ink-soft:#3c4a63;
  --muted:#6b7890;
  --line:#e3e8f0;
  --line-soft:#eef1f6;
  --paper:#ffffff;
  --bg:#f6f8fc;
  --bg-tint:#eef3fb;
  --brand:#1b4d8f;
  --brand-dark:#123a6f;
  --brand-light:#e7f0fb;
  --accent:#c9a227;      /* academic gold */
  --accent-dark:#a8851a;
  --green:#1f7a54;
  --green-light:#e3f4ec;
  --red:#b4353b;
  --red-light:#fbe9ea;
  --radius:14px;
  --radius-sm:9px;
  --shadow:0 1px 2px rgba(18,32,58,.06), 0 8px 24px rgba(18,32,58,.07);
  --shadow-lg:0 12px 40px rgba(18,32,58,.16);
  --maxw:1180px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);
  line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.22;color:var(--ink);margin:0 0 .5em}
h1{font-family:var(--serif);font-weight:700}
h2{font-family:var(--serif);font-weight:700}
p{margin:0 0 1em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.muted{color:var(--muted)}
.center{text-align:center}
.serif{font-family:var(--serif)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:22px;height:66px}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;color:var(--ink);font-size:1.06rem}
.brand:hover{text-decoration:none}
.brand .logo{width:38px;height:38px;flex:0 0 auto}
.brand small{display:block;font-weight:500;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-top:1px}
.nav-links{display:flex;gap:6px;margin-left:auto;align-items:center;flex-wrap:wrap}
.nav-links a{color:var(--ink-soft);font-weight:600;font-size:.93rem;padding:8px 12px;border-radius:8px}
.nav-links a:hover{background:var(--brand-light);color:var(--brand-dark);text-decoration:none}
.nav-links a.cta{background:var(--brand);color:#fff}
.nav-links a.cta:hover{background:var(--brand-dark)}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:8px;padding:8px 11px;font-size:1.1rem;cursor:pointer}

/* ---------- Hero ---------- */
.hero{background:
    radial-gradient(1200px 400px at 15% -10%, #23579c 0%, transparent 60%),
    radial-gradient(1000px 500px at 100% 0%, #17406f 0%, transparent 55%),
    linear-gradient(160deg,#123a6f,#0f2c54);
  color:#eaf1fb;padding:66px 0 74px;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.4px);
  background-size:22px 22px;pointer-events:none}
.hero .wrap{position:relative;z-index:1;text-align:center}
.hero h1{color:#fff;font-size:clamp(2rem,4.6vw,3.35rem);max-width:16ch;margin-bottom:.35em;margin-left:auto;margin-right:auto}
.hero p.lede{font-size:clamp(1.02rem,1.7vw,1.28rem);max-width:60ch;color:#cfe0f6;margin-bottom:1.6em;margin-left:auto;margin-right:auto}
.hero .pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);color:#dbe8fa;padding:6px 14px;border-radius:999px;
  font-size:.82rem;font-weight:600;letter-spacing:.02em;margin-bottom:22px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-stats{display:flex;gap:34px;flex-wrap:wrap;justify-content:center;margin-top:40px;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.16)}
.hero-stats div{min-width:90px}
.hero-stats b{display:block;font-family:var(--serif);font-size:1.9rem;color:#fff}
.hero-stats span{font-size:.82rem;color:#bcd0ec;letter-spacing:.03em}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;
  font-family:var(--font);font-weight:700;font-size:.96rem;padding:12px 22px;border-radius:10px;
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--accent);color:#2a2205;box-shadow:0 6px 18px rgba(201,162,39,.35)}
.btn-primary:hover{background:var(--accent-dark);color:#241d04}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.32)}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
.btn-outline{background:#fff;color:var(--brand);border:1.5px solid var(--brand)}
.btn-outline:hover{background:var(--brand-light)}
.btn-sm{padding:8px 15px;font-size:.86rem;border-radius:8px}
.btn-block{width:100%;justify-content:center}

/* ---------- Sections ---------- */
section{padding:56px 0}
.section-head{max-width:720px;margin-bottom:30px}
.section-head.center{margin-left:auto;margin-right:auto}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;font-weight:700;
  color:var(--brand);margin-bottom:10px}
.section-head h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:.3em}
.section-head p{color:var(--ink-soft);font-size:1.06rem}
.tint{background:var(--bg-tint)}
.paper-bg{background:var(--paper)}

/* ---------- Level ladder ---------- */
.ladder{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.rung{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px;
  transition:transform .12s ease, box-shadow .2s ease;position:relative;overflow:hidden}
.rung:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);text-decoration:none}
.rung .lvl-ico{font-size:1.7rem;line-height:1}
.rung b{color:var(--ink);font-size:1.02rem}
.rung span{font-size:.82rem;color:var(--muted)}
.rung .bar{position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--brand)}

/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .12s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.card .card-top{padding:18px 18px 0}
.card .card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.card h3{font-family:var(--font);font-size:1.12rem;margin:0}
.card .desc{font-size:.92rem;color:var(--ink-soft);margin:0;flex:1}
.card .card-foot{display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid var(--line-soft);padding:12px 18px;background:#fbfcfe}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;padding:4px 9px;border-radius:999px;
  background:var(--brand-light);color:var(--brand-dark)}
.tag.gold{background:#faf1cf;color:var(--accent-dark)}
.tag.green{background:var(--green-light);color:var(--green)}
.tag.gray{background:#eef1f6;color:var(--ink-soft)}
.subject-code{font-family:var(--serif);font-weight:700;color:var(--brand);letter-spacing:.02em}
.chip-row{display:flex;flex-wrap:wrap;gap:7px}

/* subject color accents on card tops */
.card .accent-line{height:5px;margin:-18px -18px 14px;background:var(--brand)}

/* ---------- Catalog page ---------- */
.catalog-layout{display:grid;grid-template-columns:250px 1fr;gap:30px;align-items:start}
.filters{position:sticky;top:86px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.filters h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);
  margin:16px 0 8px}
.filters h4:first-child{margin-top:0}
.filter-opt{display:flex;align-items:center;gap:9px;padding:5px 6px;border-radius:7px;cursor:pointer;
  font-size:.92rem;color:var(--ink-soft)}
.filter-opt:hover{background:var(--bg-tint)}
.filter-opt input{accent-color:var(--brand);width:15px;height:15px}
.search-bar{display:flex;gap:10px;margin-bottom:22px}
.search-bar input{flex:1;padding:13px 16px;border:1px solid var(--line);border-radius:10px;
  font-size:1rem;font-family:var(--font);background:var(--paper)}
.search-bar input:focus{outline:2px solid var(--brand-light);border-color:var(--brand)}
.catalog-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;
  flex-wrap:wrap;gap:10px}
.count-badge{font-weight:600;color:var(--ink-soft)}
.subject-block{margin-bottom:34px}
.subject-block > h3{display:flex;align-items:center;gap:10px;font-family:var(--serif);
  font-size:1.4rem;padding-bottom:8px;border-bottom:2px solid var(--line);margin-bottom:16px}
.subject-block > h3 .s-ico{font-size:1.3rem}
.empty{padding:60px 20px;text-align:center;color:var(--muted);background:var(--paper);
  border:1px dashed var(--line);border-radius:var(--radius)}

/* ---------- Course page ---------- */
.course-hero{background:linear-gradient(160deg,#123a6f,#0f2c54);color:#eaf1fb;padding:40px 0 46px}
.course-hero .crumbs{font-size:.85rem;color:#a9c2e4;margin-bottom:16px}
.course-hero .crumbs a{color:#cddcf3}
.course-hero h1{color:#fff;font-size:clamp(1.7rem,3.6vw,2.7rem);margin-bottom:.25em}
.course-hero .code{font-family:var(--serif);color:var(--accent);font-weight:700;font-size:1.05rem;
  letter-spacing:.04em}
.course-hero .lede{color:#cfe0f6;font-size:1.1rem;max-width:70ch}
.course-hero .meta-row{display:flex;flex-wrap:wrap;gap:22px;margin-top:22px;font-size:.9rem;color:#cbdcf3}
.course-hero .meta-row b{color:#fff}
.course-layout{display:grid;grid-template-columns:1fr 300px;gap:34px;align-items:start;
  padding:40px 0 70px}
.course-main{min-width:0}
.course-side{position:sticky;top:86px;display:flex;flex-direction:column;gap:18px}
.side-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow)}
.side-card h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:0 0 12px}
.progress-ring{display:flex;align-items:center;gap:14px}
.progress-num{font-family:var(--serif);font-size:1.9rem;font-weight:700;color:var(--brand)}
.pbar{height:9px;background:var(--line-soft);border-radius:999px;overflow:hidden;margin-top:6px}
.pbar > i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--accent));width:0}

.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden}
.panel > summary{list-style:none;cursor:pointer;padding:16px 20px;display:flex;align-items:center;
  gap:14px;font-weight:700;color:var(--ink);user-select:none}
.panel > summary::-webkit-details-marker{display:none}
.panel > summary:hover{background:var(--bg-tint)}
.panel .wk-num{flex:0 0 auto;width:42px;height:42px;border-radius:10px;background:var(--brand-light);
  color:var(--brand-dark);display:flex;align-items:center;justify-content:center;font-family:var(--serif);
  font-weight:700;font-size:1.05rem}
.panel[open] .wk-num{background:var(--brand);color:#fff}
.panel .wk-title{flex:1;min-width:0}
.panel .wk-title small{display:block;font-weight:500;color:var(--muted);font-size:.82rem;margin-top:2px}
.panel .wk-check{flex:0 0 auto;font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:6px}
.panel .chev{transition:transform .2s ease;color:var(--muted)}
.panel[open] .chev{transform:rotate(90deg)}
.panel .wk-body{padding:4px 22px 24px;border-top:1px solid var(--line-soft)}

.lesson{font-size:1.02rem;color:var(--ink-soft)}
.lesson h4{font-family:var(--serif);font-size:1.22rem;color:var(--ink);margin:22px 0 8px}
.lesson h5{font-size:1rem;color:var(--brand-dark);margin:18px 0 6px;text-transform:uppercase;
  letter-spacing:.05em;font-size:.82rem}
.lesson p{margin:0 0 .9em}
.lesson ul,.lesson ol{margin:0 0 1em;padding-left:1.3em}
.lesson li{margin-bottom:.35em}
.lesson code{background:#f2f4f8;border:1px solid var(--line);border-radius:5px;padding:1px 6px;
  font-family:"SF Mono",Consolas,Menlo,monospace;font-size:.88em;color:#123a6f}
.lesson pre{background:#0f2440;color:#e7eefb;border-radius:10px;padding:16px 18px;overflow-x:auto;
  font-family:"SF Mono",Consolas,Menlo,monospace;font-size:.86rem;line-height:1.5;margin:0 0 1.1em}
.lesson pre code{background:none;border:none;color:inherit;padding:0}
.lesson blockquote{border-left:4px solid var(--accent);background:#fdf9ec;margin:0 0 1.1em;
  padding:12px 18px;border-radius:0 8px 8px 0;color:var(--ink-soft)}
.lesson table{border-collapse:collapse;width:100%;margin:0 0 1.1em;font-size:.92rem}
.lesson th,.lesson td{border:1px solid var(--line);padding:8px 11px;text-align:left}
.lesson th{background:var(--bg-tint)}

.wk-block{margin:20px 0}
.wk-block > .lbl{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;color:var(--brand);margin-bottom:10px}
.objectives{background:var(--brand-light);border:1px solid #cfe0f6;border-radius:12px;padding:14px 18px}
.objectives ul{margin:0;padding-left:1.2em}
.objectives li{margin-bottom:.3em;color:var(--brand-dark)}

.video-embed{position:relative;padding-top:56.25%;border-radius:12px;overflow:hidden;
  background:#0b1a30;box-shadow:var(--shadow);margin-bottom:8px}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-note{font-size:.85rem;color:var(--muted);margin-bottom:14px}

.reading-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.reading-list li{display:flex;gap:12px;align-items:flex-start;background:#fbfcfe;border:1px solid var(--line);
  border-radius:10px;padding:12px 14px}
.reading-list .r-ico{font-size:1.15rem;flex:0 0 auto;margin-top:1px}
.reading-list b{font-size:.96rem}
.reading-list .r-src{font-size:.8rem;color:var(--muted)}

.term-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.term{background:#fbfcfe;border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:8px;padding:10px 13px}
.term b{color:var(--ink);font-size:.94rem}
.term span{display:block;font-size:.86rem;color:var(--ink-soft);margin-top:2px}

.callout{border-radius:12px;padding:15px 18px;margin:16px 0;border:1px solid}
.callout.info{background:var(--brand-light);border-color:#cfe0f6}
.callout.do{background:var(--green-light);border-color:#bfe6d3}
.callout.warn{background:#fdf6e3;border-color:#f0e2b0}
.callout b.callout-t{display:block;margin-bottom:4px}

.assignment-box{background:#fdf9ec;border:1px solid #f0e2b0;border-radius:12px;padding:16px 18px}
.assignment-box .lbl{color:var(--accent-dark)}

/* ---------- Quiz ---------- */
.quiz{background:#fbfcfe;border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-top:8px}
.quiz .q{margin-bottom:18px;padding-bottom:18px;border-bottom:1px dashed var(--line)}
.quiz .q:last-of-type{border-bottom:none;margin-bottom:8px}
.quiz .q > p{font-weight:600;color:var(--ink)}
.quiz .opt{display:block;border:1px solid var(--line);border-radius:9px;padding:11px 14px;margin:8px 0;
  cursor:pointer;background:#fff;transition:background .12s,border-color .12s;font-size:.96rem}
.quiz .opt:hover{background:var(--bg-tint)}
.quiz .opt.sel{border-color:var(--brand);background:var(--brand-light)}
.quiz .opt.correct{border-color:var(--green);background:var(--green-light)}
.quiz .opt.wrong{border-color:var(--red);background:var(--red-light)}
.quiz .opt input{margin-right:9px;accent-color:var(--brand)}
.quiz .explain{display:none;margin-top:8px;font-size:.9rem;color:var(--ink-soft);
  background:#fff;border:1px dashed var(--line);border-radius:8px;padding:10px 13px}
.quiz .explain.show{display:block}
.quiz-result{font-weight:700;margin-top:6px}

/* Flashcards */
.flashcard{perspective:1200px;height:180px;cursor:pointer}
.flashcard .fc-inner{position:relative;width:100%;height:100%;transition:transform .5s;
  transform-style:preserve-3d}
.flashcard.flipped .fc-inner{transform:rotateY(180deg)}
.flashcard .fc-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:12px;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;
  border:1px solid var(--line);box-shadow:var(--shadow)}
.flashcard .fc-front{background:var(--paper);font-weight:700;font-size:1.1rem;color:var(--ink)}
.flashcard .fc-back{background:var(--brand);color:#fff;transform:rotateY(180deg);font-size:.98rem}

/* live boxes */
.live-box{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--paper)}
.live-box .live-head{background:var(--bg-tint);padding:10px 15px;font-weight:700;font-size:.9rem;
  display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line)}
.live-box .live-head .dot{width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 3px var(--green-light);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.live-box .live-body{padding:14px 16px;font-size:.94rem;color:var(--ink-soft);max-height:280px;overflow:auto}
.live-box .live-body a{font-weight:600}

/* ---------- Footer ---------- */
.site-footer{background:#0f2c54;color:#c7d6ee;padding:48px 0 26px;margin-top:20px}
.site-footer a{color:#cddcf3}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:30px;margin-bottom:30px}
.foot-grid h5{color:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;margin:0 0 12px}
.foot-grid ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;font-size:.9rem}
.foot-brand{font-weight:700;color:#fff;display:flex;align-items:center;gap:10px;margin-bottom:12px}
.foot-brand .logo{width:34px;height:34px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.14);padding-top:20px;font-size:.83rem;
  color:#9fb6d6;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* ---------- Misc ---------- */
.notice{background:#fdf9ec;border:1px solid #f0e2b0;border-radius:12px;padding:14px 18px;
  font-size:.92rem;color:var(--ink-soft)}
.pill-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.pill-tab{padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:var(--paper);
  cursor:pointer;font-weight:600;font-size:.9rem;color:var(--ink-soft)}
.pill-tab.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.skip-link{position:absolute;left:-999px;top:0;background:#fff;padding:10px 16px;z-index:100}
.skip-link:focus{left:8px;top:8px}
.hide{display:none !important}
.spinner{width:22px;height:22px;border:3px solid var(--line);border-top-color:var(--brand);
  border-radius:50%;animation:spin .8s linear infinite;margin:8px auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Responsive ---------- */
@media(max-width:940px){
  .catalog-layout{grid-template-columns:1fr}
  .filters{position:static}
  .course-layout{grid-template-columns:1fr}
  .course-side{position:static;flex-direction:row;flex-wrap:wrap}
  .course-side .side-card{flex:1;min-width:220px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .menu-btn{display:block}
  .nav-links{display:none;position:absolute;top:66px;left:0;right:0;background:#fff;flex-direction:column;
    padding:12px;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
  .nav-links.open{display:flex}
  .nav-links a{width:100%}
  .hero-stats{gap:20px}
  .foot-grid{grid-template-columns:1fr}
  section{padding:42px 0}
}

/* ==========================================================================
   v2 - Simplified, task-first UI
   ========================================================================== */

/* Big friendly home search */
.home-search{position:relative;max-width:640px;margin:6px auto 14px}
.home-search form{display:flex;gap:10px}
.home-search input{flex:1;padding:16px 20px;font-size:1.08rem;border:none;border-radius:14px;
  font-family:var(--font);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.home-search input:focus{outline:3px solid var(--accent)}
.home-search .btn{border-radius:14px;padding:0 26px;font-size:1.05rem}
.suggest{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border-radius:14px;
  box-shadow:var(--shadow-lg);overflow:hidden;z-index:40;display:none;text-align:left}
.suggest.open{display:block}
.suggest a{display:flex;align-items:center;gap:12px;padding:12px 16px;color:var(--ink);
  border-bottom:1px solid var(--line-soft);font-size:.98rem}
.suggest a:last-child{border-bottom:none}
.suggest a:hover,.suggest a.hover{background:var(--brand-light);text-decoration:none}
.suggest .s-ico{font-size:1.2rem;flex:0 0 auto}
.suggest small{display:block;color:var(--muted);font-size:.78rem}
.suggest .s-all{background:#fbfcfe;font-weight:700;color:var(--brand);justify-content:center}
.quick-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;font-size:.9rem;color:#bcd0ec}
.quick-links a{color:#fff;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.25);
  padding:5px 13px;border-radius:999px;font-weight:600;font-size:.85rem}
.quick-links a:hover{background:rgba(255,255,255,.22);text-decoration:none}

/* Big level buttons */
.lvl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.lvl-btn{display:flex;align-items:center;gap:14px;background:var(--paper);border:2px solid var(--line);
  border-radius:16px;padding:18px;transition:all .12s ease;color:var(--ink)}
.lvl-btn:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow-lg);text-decoration:none}
.lvl-btn .ico{font-size:2rem;flex:0 0 auto}
.lvl-btn b{display:block;font-size:1.05rem}
.lvl-btn span{display:block;font-size:.83rem;color:var(--muted)}

/* Compact subject chips */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--paper);border:1.5px solid var(--line);
  border-radius:999px;padding:8px 16px;font-weight:600;font-size:.9rem;color:var(--ink-soft);cursor:pointer;
  transition:all .12s ease}
.chip:hover{border-color:var(--brand);color:var(--brand-dark);text-decoration:none;transform:translateY(-1px)}
.chip.active{background:var(--brand);border-color:var(--brand);color:#fff}
.chip.big{padding:10px 20px;font-size:.97rem}

/* Catalog toolbar (replaces sidebar filters) */
.toolbar{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px;margin-bottom:22px;display:flex;flex-direction:column;gap:14px}
.toolbar .lbl-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.toolbar .lbl{flex:0 0 auto;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);width:70px}
.toolbar .search-bar{margin:0}

/* Continue-learning cards */
.continue-card{display:flex;flex-direction:column;gap:10px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.continue-card b{font-size:1.05rem}
.continue-card .meta{font-size:.85rem;color:var(--muted)}

/* Week progress dots on course page */
.wk-dots{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 20px}
.wk-dot{width:38px;height:38px;border-radius:10px;border:2px solid var(--line);background:var(--paper);
  font-family:var(--serif);font-weight:700;font-size:.92rem;color:var(--ink-soft);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .12s ease;padding:0}
.wk-dot:hover{border-color:var(--brand);transform:translateY(-2px)}
.wk-dot.done{background:var(--green);border-color:var(--green);color:#fff}
.wk-dot.current{border-color:var(--accent);background:#fdf9ec;color:var(--accent-dark);
  box-shadow:0 0 0 3px #f5e9c2}

/* Back-to-top */
.to-top{position:fixed;right:22px;bottom:22px;z-index:60;width:46px;height:46px;border-radius:50%;
  border:none;background:var(--brand);color:#fff;font-size:1.25rem;cursor:pointer;box-shadow:var(--shadow-lg);
  opacity:0;pointer-events:none;transition:opacity .2s ease;display:flex;align-items:center;justify-content:center}
.to-top.show{opacity:1;pointer-events:auto}
.to-top:hover{background:var(--brand-dark)}

/* My Courses rows */
.mycourse{display:flex;align-items:center;gap:18px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;flex-wrap:wrap}
.mycourse .ico{font-size:1.9rem;flex:0 0 auto}
.mycourse .info{flex:1;min-width:220px}
.mycourse .info b{font-size:1.08rem}
.mycourse .info .meta{font-size:.85rem;color:var(--muted);margin:2px 0 8px}
.mycourse .actions{display:flex;gap:10px;align-items:center}
.mycourse .rm{font-size:.8rem;color:var(--muted);background:none;border:none;cursor:pointer;text-decoration:underline}
.mycourse .rm:hover{color:var(--red)}

/* Simple 3-step how-it-works */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;counter-reset:step}
.step{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:22px;position:relative}
.step .n{width:40px;height:40px;border-radius:50%;background:var(--brand);color:#fff;font-family:var(--serif);
  font-weight:700;font-size:1.15rem;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.step b{font-size:1.06rem;display:block;margin-bottom:6px}
.step p{margin:0;font-size:.93rem;color:var(--ink-soft)}

@media(max-width:720px){
  .home-search form{flex-direction:column}
  .home-search .btn{padding:14px}
  .toolbar .lbl{width:100%}
  .wk-dot{width:34px;height:34px}
}

/* ==========================================================================
   v3 - Modules, syllabus, lesson flow, final exam, beauty polish
   ========================================================================== */

/* Richer lesson typography */
.lesson{font-size:1.04rem;line-height:1.72;color:#2c3a52}
.lesson > p:first-child{margin-top:0}
.lesson h4{font-family:var(--serif);font-size:1.24rem;color:var(--ink);margin:26px 0 8px;
  padding-bottom:4px;border-bottom:2px solid var(--line-soft)}
.lesson svg{max-width:100%;height:auto;display:block;margin:16px auto;border-radius:10px}
.lesson table{box-shadow:var(--shadow);border-radius:8px;overflow:hidden}
.lesson th{background:var(--brand);color:#fff;font-weight:700;border-color:#2a5a9a}
.lesson tr:nth-child(even) td{background:#f7f9fc}
.lesson pre{box-shadow:0 8px 24px rgba(15,36,64,.28)}
.lesson strong{color:#16233c}

/* About card collapsible */
.about-card .about-more summary{cursor:pointer;font-weight:700;color:var(--brand);list-style:none;padding:6px 0}
.about-card .about-more summary::-webkit-details-marker{display:none}
.about-card .about-more summary::before{content:"▸ ";color:var(--muted)}
.about-card .about-more[open] summary::before{content:"▾ "}

/* Syllabus */
.syllabus{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px 24px;margin:22px 0 8px;
  background-image:linear-gradient(180deg,#fbfcff,#fff)}
.syl-top{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;
  border-bottom:2px solid var(--line);padding-bottom:12px;margin-bottom:8px}
.syl-top h2{margin:0}
.syl-module{padding:12px 0;border-bottom:1px solid var(--line-soft)}
.syl-module:last-of-type{border-bottom:none}
.syl-mod-head{font-weight:700;color:var(--brand-dark);margin-bottom:8px}
.syl-mod-head small{display:block;font-weight:500;color:var(--muted);font-size:.85rem;margin-top:1px}
.syl-lessons{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.syl-lesson{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:9px;color:var(--ink-soft);
  cursor:pointer;transition:background .12s}
.syl-lesson:hover{background:var(--brand-light);text-decoration:none;color:var(--brand-dark)}
.syl-check{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--bg-tint);color:var(--muted);
  display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:700;border:1.5px solid var(--line)}
.syl-check.done{background:var(--green);border-color:var(--green);color:#fff}
.syl-check.exam{background:var(--accent);border-color:var(--accent);color:#2a2205}
.syl-name{flex:1;min-width:0;font-weight:600;font-size:.96rem}
.syl-min{flex:0 0 auto;font-size:.78rem;color:var(--muted)}
.syl-exam{display:flex;align-items:center;gap:12px;padding:12px 10px;margin-top:8px;border-top:2px solid var(--line);
  color:var(--accent-dark);font-weight:700;cursor:pointer;border-radius:9px}
.syl-exam:hover{background:#fdf9ec;text-decoration:none}

/* Modules */
.module{margin:0 0 18px}
.module-head{display:flex;align-items:center;gap:14px;margin:22px 0 12px}
.module-num{flex:0 0 auto;width:34px;height:34px;border-radius:9px;
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700}
.module-head b{font-family:var(--serif);font-size:1.28rem;color:var(--ink)}
.module-head small{display:block;font-weight:500;color:var(--muted);font-size:.86rem}

/* Lesson nav footer */
.lesson-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px;
  padding-top:16px;border-top:1px solid var(--line-soft)}

/* Final exam */
.exam-section{margin:34px 0 10px;background:linear-gradient(160deg,#12325c,#0f2540);color:#eaf1fb;
  border-radius:var(--radius);padding:28px 26px;box-shadow:var(--shadow-lg)}
.exam-head h2{color:#fff;margin:6px 0 4px}
.exam-head .muted{color:#a9c2e4}
.exam-badge{display:inline-block;background:var(--accent);color:#2a2205;font-weight:800;font-size:.72rem;
  letter-spacing:.14em;padding:4px 12px;border-radius:999px}
.exam-prev{margin-top:12px;padding:8px 14px;border-radius:9px;font-size:.9rem;display:inline-block;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2)}
.exam-prev.pass{background:rgba(31,122,84,.3);border-color:#3ea87a}
.exam-section .quiz.exam{background:#fff;color:var(--ink);border:none;margin-top:18px;padding:22px}
.exam-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:6px}
.exam-result{margin-left:auto;text-align:right;font-weight:600}
.exam-result.pass .exam-score{color:var(--green)}
.exam-result.fail .exam-score{color:var(--red)}
.exam-score{font-family:var(--serif);font-size:2rem;font-weight:700;line-height:1}

/* nicer quiz options */
.quiz .opt{display:flex;align-items:center;gap:2px}
.quiz .opt input{margin-right:6px}
.quiz .opt span{flex:1}

/* module/lesson panel refinement */
.lesson-panel > summary{padding:16px 20px}
.lesson-panel .wk-num{background:linear-gradient(135deg,#eaf1fb,#dbe8fa);color:var(--brand-dark)}
.lesson-panel[open] .wk-num{background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff}

/* course hero refinement */
.course-hero{background:
    radial-gradient(900px 300px at 12% -20%, #24579c 0%, transparent 60%),
    linear-gradient(160deg,#123a6f,#0f2c54)}
.course-hero .btn-ghost{border-color:rgba(255,255,255,.4)}

@media(max-width:940px){
  .exam-result{margin-left:0;text-align:left;width:100%}
}

/* ---- v4: lesson depth (Go Deeper + misconceptions) ---- */
.deepdive{border:1px solid #cfe0f6;border-radius:12px;background:linear-gradient(180deg,#f4f8fe,#eef3fb);
  overflow:hidden}
.deepdive > summary{cursor:pointer;list-style:none;padding:12px 16px;font-weight:700;color:var(--brand-dark);
  display:flex;align-items:center;gap:8px;user-select:none}
.deepdive > summary::-webkit-details-marker{display:none}
.deepdive > summary::after{content:"▸";margin-left:auto;color:var(--muted);transition:transform .2s}
.deepdive[open] > summary::after{transform:rotate(90deg)}
.deepdive > summary:hover{background:#e7f0fb}
.deepdive > .lesson{padding:4px 18px 18px}
.callout.warn .lesson{color:#6b5410}
.callout.warn .lesson strong{color:#4a3a0a}

/* ---- v5: formal course syllabus ---- */
.syllabus-doc{border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  background:var(--paper);margin:22px 0;overflow:hidden}
.syllabus-doc > summary{cursor:pointer;list-style:none;padding:16px 20px;display:flex;align-items:center;gap:12px;
  background:linear-gradient(180deg,#fbfcff,#f2f6fd);border-bottom:1px solid var(--line);flex-wrap:wrap}
.syllabus-doc > summary::-webkit-details-marker{display:none}
.sd-badge{font-family:var(--serif);font-weight:700;font-size:1.15rem;color:var(--brand-dark)}
.sd-body{padding:8px 22px 24px}
.sd-h{font-family:var(--serif);font-size:1.12rem;color:var(--ink);margin:22px 0 8px;padding-top:14px;
  border-top:1px solid var(--line-soft)}
.sd-info{border-collapse:collapse;width:100%;font-size:.94rem;margin:0}
.sd-info th{text-align:left;width:210px;color:var(--muted);font-weight:600;padding:7px 12px 7px 0;
  vertical-align:top;border-bottom:1px solid var(--line-soft)}
.sd-info td{padding:7px 0;border-bottom:1px solid var(--line-soft);color:var(--ink)}
.slo-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.slo-list li{background:var(--brand-light);border:1px solid #cfe0f6;border-radius:9px;padding:9px 13px;
  font-size:.96rem;color:var(--ink)}
.slo-tag{display:inline-block;background:var(--brand);color:#fff;font-size:.7rem;font-weight:700;
  padding:2px 7px;border-radius:5px;margin-right:8px;letter-spacing:.03em}
.sd-work{border-collapse:collapse;width:100%;max-width:460px;font-size:.92rem;margin:4px 0}
.sd-work td{padding:6px 8px;border-bottom:1px solid var(--line-soft)}
.sd-work .sd-total td{border-top:2px solid var(--line);border-bottom:none;padding-top:9px}
.cm-wrap{display:flex;flex-direction:column;gap:14px}
.cm-mod{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.cm-mod-h{background:var(--bg-tint);padding:9px 13px;font-weight:700;color:var(--brand-dark);font-size:.95rem}
.cm-mod-h span{display:block;font-weight:500;color:var(--muted);font-size:.83rem;margin-top:1px}
.cm-table{border-collapse:collapse;width:100%;font-size:.86rem}
.cm-table th{background:#fbfcfe;text-align:left;padding:6px 10px;color:var(--muted);font-weight:600;
  border-bottom:1px solid var(--line);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
.cm-table td{padding:6px 10px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.cm-table .cm-n{color:var(--muted);width:26px}
.cm-table .cm-obj{color:var(--ink-soft);font-size:.82rem}
.cm-table .cm-a{white-space:nowrap;color:var(--brand);font-weight:600;width:52px}
.cm-table tr:last-child td{border-bottom:none}
@media(max-width:640px){ .cm-obj{display:none} .sd-info th{width:130px} }

/* ==========================================================================
   v6: Accessibility (ADA / WCAG 2.1 AA aligned)
   ========================================================================== */
/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible,
.opt:focus-within, [tabindex]:focus-visible{
  outline:3px solid #1558b0 !important; outline-offset:2px; border-radius:4px;
}
/* Respect OS reduced-motion by default */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important}
}

/* Accessibility toolbar */
.a11y-fab{position:fixed;left:20px;bottom:20px;z-index:70;width:50px;height:50px;border-radius:50%;
  border:2px solid #fff;background:var(--brand-dark);color:#fff;font-size:1.5rem;cursor:pointer;
  box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center}
.a11y-fab:hover{background:var(--brand)}
.a11y-panel{position:fixed;left:20px;bottom:80px;z-index:71;width:290px;background:var(--paper);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:16px}
.a11y-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.a11y-head b{font-size:1.05rem}
.a11y-x{background:none;border:none;font-size:1.1rem;cursor:pointer;color:var(--muted);padding:4px 8px}
.a11y-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:10px 0;font-size:.94rem}
.a11y-btns{display:flex;gap:6px}
.a11y-btns button{border:1px solid var(--line);background:var(--bg-tint);border-radius:8px;padding:6px 11px;
  cursor:pointer;font-weight:700;color:var(--ink);font-size:.9rem}
.a11y-btns button:hover{background:var(--brand-light);border-color:var(--brand)}
.a11y-toggle{display:flex;align-items:center;gap:10px;padding:7px 0;cursor:pointer;font-size:.94rem}
.a11y-toggle input{width:18px;height:18px;accent-color:var(--brand);flex:0 0 auto}
.a11y-note{font-size:.78rem;color:var(--muted);margin:10px 0 0}

/* --- High contrast mode --- */
body.a11y-contrast{--ink:#000;--ink-soft:#0a0a0a;--muted:#2b2b2b;--line:#5a5a5a;--line-soft:#7a7a7a;
  --bg:#fff;--bg-tint:#eef0f2;--brand:#003a8c;--brand-dark:#002a66;--paper:#fff}
body.a11y-contrast .muted{color:#2b2b2b}
body.a11y-contrast a{text-decoration:underline}
body.a11y-contrast .card,body.a11y-contrast .side-card,body.a11y-contrast .panel,
body.a11y-contrast .syllabus,body.a11y-contrast .syllabus-doc{border-width:2px;border-color:#000}
body.a11y-contrast .tag{border:1px solid #000}
body.a11y-contrast .lesson strong{color:#000}
body.a11y-contrast .btn-primary{background:var(--accent-dark);color:#000;border:2px solid #000}

/* --- Easy-reading font & spacing --- */
body.a11y-readable, body.a11y-readable .lesson, body.a11y-readable .card, body.a11y-readable p{
  font-family:Verdana,Tahoma,"Segoe UI",sans-serif !important;
  letter-spacing:.02em; word-spacing:.09em; line-height:1.95 !important}
body.a11y-readable .lesson p, body.a11y-readable .lesson li{max-width:62ch}
body.a11y-readable h1,body.a11y-readable h2,body.a11y-readable h3,body.a11y-readable h4{
  font-family:Verdana,Tahoma,sans-serif !important}

/* --- Underline all links --- */
body.a11y-links a{text-decoration:underline !important}

/* --- Reduce motion (manual toggle) --- */
body.a11y-reduce-motion *, body.a11y-reduce-motion *::before, body.a11y-reduce-motion *::after{
  animation:none !important; transition:none !important; scroll-behavior:auto !important}

/* Screen-reader-only helper */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- v8: explorable interactive diagram ---- */
.diagram{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;align-items:center;background:var(--paper);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:16px}
.dg-stage{background:radial-gradient(circle at 50% 45%,#fbfdff,#eef4fb);border-radius:12px;padding:8px}
.dg-stage svg{width:100%;height:auto;display:block}
.dg-part{cursor:pointer;transition:filter .12s,transform .12s;transform-origin:center}
.dg-part:hover{filter:brightness(1.06) drop-shadow(0 0 3px rgba(27,77,143,.5))}
.dg-part.dg-on{filter:drop-shadow(0 0 6px rgba(201,162,39,.9));stroke:#c9a227 !important;stroke-width:5}
.dg-info{background:var(--bg-tint);border:1px solid var(--line);border-radius:10px;padding:14px 16px;min-height:120px}
.dg-info b{color:var(--brand-dark);font-size:1.05rem}
.dg-info p{margin:6px 0 0;font-size:.94rem;color:var(--ink-soft)}
@media(max-width:640px){ .diagram{grid-template-columns:1fr} }

.lesson-cite .cite-list{margin:10px 0 0;padding-left:1.4em;font-size:.86rem;color:var(--ink-soft);display:flex;flex-direction:column;gap:5px}
.lesson-cite .cite-list li{padding-left:4px}

/* ---- v10: lesson illustrations + per-lesson video ---- */
.lesson-illus{margin:14px 0 18px;text-align:center}
.li-svg{max-width:360px;margin:0 auto;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow);background:#eef4fb}
.li-svg svg{width:100%;height:auto;display:block}
.lesson-illus figcaption{font-size:.82rem;color:var(--muted);margin-top:6px;font-style:italic}
.lvid{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fbfcfe}
.lvid > summary{cursor:pointer;list-style:none;padding:11px 15px;font-weight:700;color:var(--brand-dark);
  display:flex;align-items:center;gap:8px}
.lvid > summary::-webkit-details-marker{display:none}
.lvid > summary::after{content:"▸";margin-left:auto;color:var(--muted);transition:transform .2s}
.lvid[open] > summary::after{transform:rotate(90deg)}
.lvid > summary:hover{background:var(--brand-light)}
.lvid-body{padding:0 14px 14px}
body.a11y-reduce-motion .lvid > summary::after{transition:none}

/* ---- v11: pictures on key-term flashcards ---- */
.flashcard .fc-front{flex-direction:column;gap:8px;padding:14px}
.fc-sym{font-size:2.5rem;line-height:1;flex:0 0 auto;filter:drop-shadow(0 1px 1px rgba(0,0,0,.12))}
.fc-term{font-weight:700;font-size:1.02rem;line-height:1.2}


/* ==========================================================================
   v12: Course reader redesign (Canvas / McGraw-Hill inspired)
   Slim course topbar + sticky left module rail + focused single-lesson reader.
   ========================================================================== */
.btn-lg{padding:13px 26px;font-size:1.02rem;border-radius:11px}
.tag.light{background:rgba(255,255,255,.16);color:#fff}

/* --- Slim course topbar --- */
.course-topbar{background:linear-gradient(155deg,#16457f 0%,#0f2c54 100%);color:#eaf1fb;
  padding:20px 0 26px;position:relative}
.course-topbar .crumbs{font-size:.83rem;color:#a9c2e4;margin-bottom:14px}
.course-topbar .crumbs a{color:#cddcf3}
.course-topbar .crumbs a:hover{color:#fff}
.ctb-grid{display:flex;gap:26px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.ctb-info{min-width:0;flex:1}
.ctb-info .chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.ctb-info .code{font-family:var(--serif);color:var(--accent);font-weight:700;font-size:1rem;letter-spacing:.02em}
.ctb-info h1{color:#fff;font-size:clamp(1.55rem,3.2vw,2.3rem);margin:.1em 0 .35em;line-height:1.15}
.ctb-info .meta-row{display:flex;flex-wrap:wrap;gap:18px;font-size:.88rem;color:#c3d6ef}
.ctb-info .meta-row b{color:#fff}
.ctb-cta{display:flex;flex-direction:column;gap:9px;align-items:stretch}
.ctb-cta .btn-primary{box-shadow:0 6px 20px rgba(0,0,0,.22)}

/* --- Reader grid --- */
.reader-wrap{background:var(--bg);padding:26px 0 60px;min-height:60vh}
.reader{display:grid;grid-template-columns:280px 1fr;gap:28px;align-items:start}

/* --- Left module rail (course table of contents) --- */
.reader-rail{position:sticky;top:82px;align-self:start;max-height:calc(100vh - 100px);
  overflow-y:auto;overflow-x:hidden;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);scrollbar-width:thin}
.rail-inner{padding:14px 12px}
.rail-item{display:flex;align-items:center;gap:9px;padding:11px 12px;border-radius:9px;
  font-weight:700;font-size:.92rem;color:var(--ink);cursor:pointer}
.rail-item:hover{background:var(--bg-tint);text-decoration:none}
.rail-item.active{background:var(--brand-light);color:var(--brand-dark)}
.rail-overview{margin-bottom:6px}
.rail-exam{margin-top:8px;border-top:1px solid var(--line-soft);border-radius:0 0 9px 9px;color:var(--brand-dark)}
.rail-progress{padding:6px 12px 12px}
.rail-pbar{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.rail-pbar > i{display:block;height:100%;background:linear-gradient(90deg,var(--green),#3ba36f);
  border-radius:99px;transition:width .4s ease}
.rail-pct-lbl{display:block;font-size:.78rem;color:var(--muted);margin-top:6px}
.rail-pct-lbl b{color:var(--green)}
.rail-mods{border-top:1px solid var(--line-soft);padding-top:8px}
.rail-mod{margin-bottom:6px}
.rail-mod-head{display:flex;align-items:center;gap:9px;padding:9px 10px 6px}
.rail-mod-num{flex:0 0 auto;width:24px;height:24px;border-radius:7px;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.78rem}
.rail-mod-title{font-family:var(--serif);font-weight:700;font-size:.95rem;color:var(--ink);line-height:1.25}
.rail-mod-list{display:flex;flex-direction:column;gap:1px}
.rail-lesson{display:flex;align-items:center;gap:9px;padding:8px 10px 8px 12px;border-radius:8px;
  border-left:3px solid transparent;color:var(--ink-soft);font-size:.9rem;line-height:1.3;cursor:pointer}
.rail-lesson:hover{background:var(--bg-tint);text-decoration:none;color:var(--ink)}
.rail-lesson.active{background:var(--brand-light);border-left-color:var(--brand);color:var(--brand-dark);font-weight:700}
.rl-check{flex:0 0 auto;width:18px;height:18px;border-radius:50%;border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:.7rem;color:#fff;background:#fff}
.rl-check.done{background:var(--green);border-color:var(--green)}
.rl-title{flex:1;min-width:0}
.rl-min{flex:0 0 auto;font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* --- Reader main (one lesson at a time) --- */
.reader-main{min-width:0;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:34px 40px 40px}
.lesson-view{display:none;animation:lvfade .28s ease}
.lesson-view.active{display:block}
@keyframes lvfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.lesson-view{scroll-margin-top:80px}
.lv-head{border-bottom:2px solid var(--line-soft);padding-bottom:18px;margin-bottom:8px}
.lv-eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.03em;color:var(--brand);
  text-transform:uppercase;margin-bottom:8px}
.lv-title{font-size:clamp(1.5rem,2.6vw,2.05rem);margin:0 0 .2em;line-height:1.18}
.lv-summary{color:var(--ink-soft);font-size:1.06rem;margin:0}
.lv-time{margin-top:12px;font-size:.85rem;color:var(--brand-dark);font-weight:700;display:inline-flex;
  gap:5px;background:var(--brand-light);padding:5px 12px;border-radius:20px}
.lv-time span{font-weight:500;color:var(--ink-soft)}
.reader-main .wk-body{padding:0}
.reader-main .lesson{font-size:1.02rem}

/* Overview view specifics */
.ov-callout{background:var(--bg-tint);border:1px solid var(--line);border-radius:12px;padding:20px 22px;margin:18px 0 8px}
.ov-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}
.ov-hint{font-size:.84rem;color:var(--muted)}
.ov-sources{margin-top:22px}
.ov-tools{margin-top:20px;border-top:1px solid var(--line-soft);padding-top:16px}

/* Mobile rail toggle (hidden on desktop) */
.rail-toggle{display:none;width:100%;margin-bottom:16px;background:var(--brand);color:#fff;border:none;
  border-radius:10px;padding:12px 16px;font-weight:700;font-size:.95rem;cursor:pointer}

@media(max-width:900px){
  .reader{grid-template-columns:1fr;gap:16px}
  .reader-rail{position:fixed;top:0;left:0;bottom:0;width:min(320px,86vw);max-height:none;z-index:60;
    border-radius:0;transform:translateX(-102%);transition:transform .25s ease;box-shadow:var(--shadow-lg)}
  .reader-rail.open{transform:none}
  .rail-toggle{display:block;order:-1}
  .reader-main{padding:22px 20px 30px}
  .ctb-grid{align-items:flex-start}
  .ctb-cta{width:100%}
  .ctb-cta .btn{width:100%}
}

/* Print: show everything, hide navigation chrome */
@media print{
  .reader-rail,.rail-toggle,.ctb-cta,.lesson-nav,.a11y,.to-top{display:none !important}
  .reader{grid-template-columns:1fr}
  .lesson-view{display:block !important;page-break-after:always}
  .reader-main{border:none;box-shadow:none;padding:0}
}

/* ---- v13: written-response boxes (activity/practice) + focus breaks ---- */
.response{margin-top:16px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.resp-label{display:block;font-weight:700;font-size:.9rem;color:var(--ink);margin-bottom:8px}
.resp-input{width:100%;border:1px solid var(--line);border-radius:9px;padding:11px 13px;font-family:var(--font);
  font-size:.98rem;line-height:1.55;resize:vertical;min-height:110px;color:var(--ink);background:var(--bg)}
.resp-input:focus{outline:2px solid var(--brand-light);border-color:var(--brand);background:#fff}
.resp-bar{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.resp-count{color:var(--muted);font-size:.82rem;margin-left:auto;font-variant-numeric:tabular-nums}
.resp-feedback{margin-top:12px;background:var(--bg-tint);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:.94rem}
.resp-feedback p{margin:0 0 8px}
.resp-feedback p:last-child{margin-bottom:0}
.resp-good{color:var(--green);font-weight:600}
.resp-hint{color:var(--accent-dark)}
.resp-verdict{font-weight:700}
.resp-verdict.ok{color:var(--green)}
.resp-saved{color:var(--muted);font-size:.85rem}
.resp-model{margin-top:8px;border-top:1px solid var(--line);padding-top:8px}
.resp-model > summary{cursor:pointer;font-weight:700;color:var(--brand-dark);font-size:.9rem}
.resp-model > summary:hover{color:var(--brand)}
.resp-model .lesson{margin-top:8px}

.focus-break{display:flex;flex-direction:column;gap:3px;margin:24px 0;padding:12px 16px;
  background:linear-gradient(90deg,var(--brand-light),rgba(231,240,251,.15));border-left:4px solid var(--accent);
  border-radius:10px;font-size:.9rem;color:var(--ink-soft)}
.focus-break b{color:var(--brand-dark)}
@media print{ .response,.focus-break{break-inside:avoid} .resp-bar,.resp-feedback{display:none} }

/* ==========================================================================
   v14: Dark theme, dyslexia-friendly text, a11y active states
   ========================================================================== */
html[data-theme="dark"]{
  --ink:#e7edf7; --ink-soft:#c0cde0; --muted:#8b9ab4;
  --line:#2b3547; --line-soft:#222c3b;
  --paper:#161d29; --bg:#0f141d; --bg-tint:#1b2432;
  --brand:#5f95d9; --brand-dark:#9bc0ef; --brand-light:#1e2c42;
  --accent:#d9b24a; --accent-dark:#e6c34a;
  --green:#4bb07f; --green-light:#15321f; --red:#e2686e; --red-light:#3a1e20;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.4);
  --shadow-lg:0 12px 40px rgba(0,0,0,.6);
}
html[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
html[data-theme="dark"] .site-header{background:rgba(18,24,34,.92)}
html[data-theme="dark"] .btn-outline{background:transparent;color:var(--brand-dark)}
html[data-theme="dark"] .btn-outline:hover{background:var(--brand-light)}
html[data-theme="dark"] .card-foot{background:#141b27}
html[data-theme="dark"] .resp-input:focus{background:var(--paper)}
html[data-theme="dark"] .flashcard .fc-back{background:var(--brand-dark);color:#0f141d}
html[data-theme="dark"] .dg-stage{background:radial-gradient(circle at 50% 45%,#1b2432,#141b27)}
html[data-theme="dark"] .li-svg,html[data-theme="dark"] .dg-stage svg rect[fill="#eef4fb"]{filter:brightness(.9)}
html[data-theme="dark"] .foot-brand span,html[data-theme="dark"] .site-footer{color:var(--ink)}

/* Dyslexia-friendly reading (uses widely-available legible fonts, extra spacing) */
body.a11y-dyslexia, body.a11y-dyslexia .lesson, body.a11y-dyslexia p,
body.a11y-dyslexia li, body.a11y-dyslexia .lv-summary, body.a11y-dyslexia .card .desc,
body.a11y-dyslexia .resp-input, body.a11y-dyslexia .rail-lesson{
  font-family:"Comic Sans MS","Trebuchet MS",Verdana,Tahoma,sans-serif !important;
  letter-spacing:.03em; word-spacing:.16em; line-height:1.9;
}
body.a11y-dyslexia .lesson p{max-width:66ch}
body.a11y-dyslexia .lesson{text-align:left}

/* Accessibility toolbar: active theme/speed buttons */
.a11y-btns button.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.a11y-row select{border:1px solid var(--line);border-radius:7px;padding:5px 7px;background:var(--paper);color:var(--ink);font-size:.85rem}

/* ---- v14: download menu ---- */
.dl-wrap{position:relative}
.dl-btn{background:none;border:1px solid var(--line);color:var(--ink-soft);font-weight:600;font-size:.9rem;
  padding:8px 12px;border-radius:8px;cursor:pointer}
.dl-btn:hover{background:var(--brand-light);color:var(--brand-dark);border-color:var(--brand-light)}
.dl-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:60;background:var(--paper);border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--shadow-lg);padding:6px;min-width:220px}
.dl-menu button{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:10px 12px;border-radius:7px;font-size:.92rem;font-weight:600;color:var(--ink)}
.dl-menu button:hover{background:var(--bg-tint)}
.dl-note{margin:6px 8px 4px;font-size:.76rem;color:var(--muted);font-weight:400;line-height:1.4}
@media(max-width:760px){ .dl-menu{right:auto;left:0} }

/* ---- v15: locally-hosted lesson photos (Wikimedia Commons, free-licensed) ---- */
.lesson-photo{margin:16px 0 22px;text-align:center}
.lesson-photo img{max-width:min(560px,100%);height:auto;margin:0 auto;border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);background:#fff}
.lesson-photo figcaption{font-size:.85rem;color:var(--ink-soft);margin-top:9px;font-style:italic}
.lesson-photo .credit{display:block;font-size:.73rem;color:var(--muted);font-style:normal;margin-top:2px}
.lesson-photo .credit a{color:var(--muted);text-decoration:underline}
html[data-theme="dark"] .lesson-photo img{background:#0f141d}