/* Osmora Academy — Article Modernization Layer
   Purpose: turn long lesson articles into a clearer, progressive, card-based reading experience
   without changing the underlying educational content. Scoped to body[data-academy-article]. */

body[data-academy-article]{
  --am-card:#fbf8f2;
  --am-card-strong:#fffdfa;
  --am-border:rgba(30,50,41,.11);
  --am-shadow:0 14px 34px rgba(30,50,41,.055);
  --am-gold:#c9a86a;
  --am-forest:#234c40;
  --am-muted:#66716b;
}

body[data-academy-article] .article-shell{
  gap:36px;
  align-items:start;
}

/* slim reading-progress line under the Academy subnav */
.am-reading-progress{
  position:fixed;
  left:0;
  top:0;
  height:3px;
  width:0;
  background:linear-gradient(90deg,var(--am-gold),var(--forest,#2C5F4F));
  z-index:9999;
  pointer-events:none;
  transition:width .08s linear;
}

/* top-of-lesson orientation block */
.am-lesson-tools{
  margin:18px 0 26px;
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:1px solid var(--am-border);
  border-radius:14px;
  background:rgba(255,253,250,.74);
  box-shadow:0 8px 24px rgba(30,50,41,.035);
}
.am-lesson-tools__label{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  color:var(--forest-ink,#1E3229);
  font-size:.8rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.am-lesson-tools__label::before{
  content:"";
  width:24px;
  height:1px;
  background:var(--am-gold);
  flex:none;
}
.am-lesson-tools__actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.am-lesson-tools button{
  appearance:none;
  border:1px solid rgba(30,50,41,.14);
  background:#fff;
  color:var(--am-forest);
  border-radius:999px;
  padding:8px 12px;
  font:inherit;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.am-lesson-tools button:hover{background:#f6f1e8;border-color:rgba(44,95,79,.28);transform:translateY(-1px)}

/* existing Explore this lesson becomes a refined roadmap */
body[data-academy-article] .lx-scan{
  padding:20px!important;
  border:1px solid var(--am-border);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(250,247,242,.92));
  box-shadow:var(--am-shadow);
}
body[data-academy-article] .lx-scan__ey{
  margin:0 0 14px!important;
  color:var(--am-muted)!important;
  font-size:.68rem!important;
  letter-spacing:.18em!important;
}
body[data-academy-article] .lx-scan__grid{gap:10px!important}
body[data-academy-article] .lx-scan__item{
  min-height:92px;
  padding:15px 16px!important;
  border:1px solid rgba(30,50,41,.09)!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:none!important;
  align-items:flex-start!important;
}
body[data-academy-article] .lx-scan__item:hover{border-color:rgba(201,168,106,.55)!important;transform:translateY(-1px)}
body[data-academy-article] .lx-scan__n{
  display:inline-grid!important;
  place-items:center;
  width:30px;height:30px;
  border-radius:50%;
  background:#edf2ee;
  color:var(--am-forest)!important;
  font-weight:700;
  font-size:.68rem!important;
}
body[data-academy-article] .lx-scan__t{font-family:var(--font-display,Georgia,serif);font-size:1rem!important;line-height:1.24!important;color:var(--forest-ink,#1E3229)!important}

/* Main content: turn each lesson section into a distinct, scannable card */
body[data-academy-article] .article-main > section.am-section{
  position:relative;
  margin:18px 0!important;
  padding:0!important;
  border:1px solid var(--am-border)!important;
  border-radius:16px!important;
  background:var(--am-card)!important;
  box-shadow:var(--am-shadow)!important;
  overflow:hidden;
}
.am-section__head{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px;
  align-items:start;
  padding:22px 22px 18px;
}
.am-section__index{
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:none;
  background:#edf2ee;
  border:1px solid rgba(44,95,79,.1);
  color:var(--am-forest);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.08em;
}
.am-section__titles{min-width:0}
.am-section__tag{
  display:block;
  margin:0 0 6px;
  font-size:.62rem;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#a88748;
  font-weight:700;
}
body[data-academy-article] .am-section__head h2{
  margin:0!important;
  font-size:1.45rem!important;
  line-height:1.16!important;
  max-width:26ch;
}
.am-section__toggle{
  appearance:none;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid rgba(30,50,41,.12);
  border-radius:50%;
  background:#fff;
  color:var(--am-forest);
  cursor:pointer;
  font-size:1.1rem;
  line-height:1;
  transition:transform .2s ease,background .2s ease;
}
.am-section__toggle:hover{background:#f3eee5}
.am-section[data-open="true"] .am-section__toggle{transform:rotate(45deg)}
.am-section__preview{
  display:none;
  grid-column:2 / 4;
  color:var(--am-muted);
  font-size:.92rem;
  line-height:1.55;
  margin-top:2px;
  max-width:64ch;
}
.am-section[data-open="false"] .am-section__preview{display:block}
.am-section__body{
  padding:0 24px 24px 74px;
  color:#333b36;
}
.am-section[data-open="false"] .am-section__body{display:none}
.am-section__body > :last-child{margin-bottom:0!important}
.am-section__body p{font-size:1rem;line-height:1.68;margin-bottom:16px!important}
.am-section__body ul,.am-section__body ol{line-height:1.62}

/* special section types */
.am-section--why{border-left:3px solid var(--forest,#2C5F4F)!important}
.am-section--compare{background:linear-gradient(180deg,#fffdfa,#f8f3e9)!important;border-color:rgba(201,168,106,.32)!important}
.am-section--myth{border-top:3px solid var(--am-gold)!important}
.am-section--limits{background:#f7f2e8!important}
.am-section--references{box-shadow:none!important;background:transparent!important}
.am-section--references .am-section__head{padding-bottom:16px}
.am-section--references .am-section__body{font-size:.92rem}
.am-section--utility{box-shadow:none!important;background:rgba(255,255,255,.48)!important}

/* comparison content becomes visibly different from prose */
body[data-academy-article] .boundary-grid{gap:14px!important;margin:6px 0 18px!important}
body[data-academy-article] .boundary{
  padding:20px!important;
  border-radius:12px!important;
  box-shadow:none!important;
}
body[data-academy-article] .boundary h3{letter-spacing:.13em!important}
body[data-academy-article] .boundary li{line-height:1.5;margin-bottom:9px!important}

/* misconception gets a simple myth/reality treatment */
.am-myth-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 10px;
  padding:6px 10px;
  border-radius:999px;
  background:#f5ead3;
  color:#80632d;
  font-size:.66rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
}
.am-section--myth .am-section__body > p:first-of-type{
  font-family:var(--font-display,Georgia,serif);
  font-size:1.12rem!important;
  color:var(--forest-ink,#1E3229);
}

/* terms and lesson references */
body[data-academy-article] .terms{gap:8px!important}
body[data-academy-article] .terms a{
  border-radius:999px!important;
  background:#fff!important;
  padding:8px 13px!important;
  text-decoration:none!important;
}
body[data-academy-article] .lessons li{
  padding:13px 0!important;
  border-bottom:1px solid rgba(30,50,41,.08)!important;
}
body[data-academy-article] .lessons a{text-decoration:none;font-family:var(--font-display,Georgia,serif);font-size:1rem}
body[data-academy-article] .lessons .why{margin-top:3px;line-height:1.45}

/* references look like references, not another essay */
body[data-academy-article] ol.refs{
  padding-left:1.2rem!important;
  margin-top:4px!important;
}
body[data-academy-article] ol.refs li{
  margin-bottom:12px!important;
  color:#59635d;
  line-height:1.55!important;
}

/* TOC gets a cleaner 'lesson map' treatment */
body[data-academy-article] .acr-toc{
  border:1px solid var(--am-border)!important;
  border-radius:14px!important;
  background:rgba(255,253,250,.86)!important;
  box-shadow:0 10px 26px rgba(30,50,41,.035)!important;
  padding:16px!important;
}
body[data-academy-article] .acr-toc__title::before{content:"Lesson map · ";color:#a88748}
body[data-academy-article] .acr-toc__list a{border-radius:8px;padding:7px 9px!important;text-decoration:none!important}
body[data-academy-article] .acr-toc__list a:hover{background:#f3eee6}

/* desktop reading width */
@media (min-width:980px){
  body[data-academy-article] main.wrap{max-width:1100px!important}
  body[data-academy-article] .article-main{min-width:0}
}

@media (max-width:760px){
  .am-reading-progress{height:2px}
  .am-lesson-tools{margin:12px 0 18px;padding:13px 14px;align-items:flex-start;flex-direction:column}
  .am-lesson-tools__actions{width:100%;justify-content:flex-start}
  .am-lesson-tools button{font-size:.66rem;padding:7px 10px}
  body[data-academy-article] .article-main > section.am-section{margin:12px 0!important;border-radius:14px!important}
  .am-section__head{grid-template-columns:auto 1fr auto;gap:10px;padding:17px 16px 14px}
  .am-section__index{width:32px;height:32px;font-size:.64rem}
  body[data-academy-article] .am-section__head h2{font-size:1.22rem!important;max-width:none}
  .am-section__toggle{width:32px;height:32px}
  .am-section__preview{grid-column:2 / 4;font-size:.88rem;line-height:1.48}
  .am-section__body{padding:0 16px 18px 58px}
  .am-section__body p{font-size:.96rem;line-height:1.62}
  body[data-academy-article] .boundary-grid{grid-template-columns:1fr!important}
  body[data-academy-article] .lx-scan{padding:15px!important}
  body[data-academy-article] .lx-scan__grid{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
  body[data-academy-article] .lx-scan__item{min-width:230px;scroll-snap-align:start}
}

@media (prefers-reduced-motion:reduce){
  .am-reading-progress,.am-section__toggle{transition:none!important}
}