#dre-lesson-shell-01{
  --dre-blue:#18a5dd;
  --dre-text:#4F535D;
  --dre-shell-bg:#fbfdff;
  --dre-card-border:#dbe4ea;
  --dre-card-radius:18px;
  --dre-section-max:920px;
  color:var(--dre-text);
  box-sizing:border-box;
  padding:0 12px;
  margin:0 0 40px 0;
}

#dre-lesson-shell-01,
#dre-lesson-shell-01 *{
  box-sizing:border-box;
}

/* =========================================
   TOP BAR
========================================= */
#dre-lesson-shell-01 .dre-lesson-topbar{
  display:flex;
  margin:8px 0 12px 0;
}

/* =========================================
   GRID
========================================= */
#dre-lesson-shell-01 .dre-lesson-grid{
  display:grid;
  grid-template-columns:280px minmax(0,920px);
  gap:24px;
  align-items:start;
  justify-content:start;
}

#dre-lesson-shell-01 .dre-lesson-nav,
#dre-lesson-shell-01 .dre-lesson-content,
#dre-lesson-shell-01 .dre-section,
#dre-lesson-shell-01 .dre-section-card,
#dre-lesson-shell-01 .dre-engine-slot{
  min-width:0;
}

/* =========================================
   LEFT NAV
========================================= */
#dre-lesson-shell-01 .dre-lesson-nav{
  position:sticky;
  top:18px;
  align-self:start;
  width:100%;
  max-width:280px;
  max-height:calc(100vh - 36px);
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:4px;
}

#dre-lesson-shell-01 .dre-lesson-nav-card{
  position:relative;
  width:100%;
  background:transparent;
  border:none;
  border-radius:0;
  overflow:visible;
  box-shadow:none;
}

/* =========================================
   SESSION TOP CARD
========================================= */
#dre-lesson-shell-01 .dre-lesson-nav-title{
  display:block;
  width:100%;
  margin:0;
  padding:18px 20px;
  background:var(--dre-blue);
  color:#ffffff;
  font-weight:800;
  font-size:1.15rem; /* match section titles */
  line-height:1.2;
  border-top:2px solid var(--dre-blue);
  border-left:2px solid var(--dre-blue);
  border-right:2px solid var(--dre-blue);
  border-bottom:none;
  border-top-left-radius:var(--dre-card-radius);
  border-top-right-radius:var(--dre-card-radius);
}

#dre-lesson-shell-01 .dre-lesson-session-bar{
  display:block;
  margin:0 0 14px 0;
  padding:14px 16px 16px 16px;
  background:var(--dre-shell-bg);
  border-left:2px solid var(--dre-blue);
  border-right:2px solid var(--dre-blue);
  border-bottom:2px solid var(--dre-blue);
  border-top:none;
  border-bottom-left-radius:var(--dre-card-radius);
  border-bottom-right-radius:var(--dre-card-radius);
}

#dre-lesson-shell-01 .dre-lesson-session-meta{
  display:flex;
  flex-direction:column;
  gap:6px;
}

#dre-lesson-shell-01 .dre-lesson-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:0;
  margin:0 0 2px 0;
  border-bottom:none;
}

#dre-lesson-shell-01 .dre-lesson-meta-row:last-child{
  margin-bottom:0;
}

#dre-lesson-shell-01 .dre-meta-label{
  display:block;
  margin:0;
  font-size:.72rem;
  line-height:1.2;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--dre-blue);
  width:100%;
}

#dre-lesson-shell-01 .dre-meta-value{
  display:block;
  width:100%;
  margin:0 0 1px 0;
  padding:10px 16px;
  font-size:1.16rem;
  line-height:1.25;
  font-weight:800;
  color:#5e6670;
  background:#ffffff;
  border-radius:0;
}

#dre-lesson-shell-01 .dre-lesson-thumb{
  margin:2px 0 4px 0;
}

#dre-lesson-shell-01 .dre-lesson-thumb-placeholder{
  width:100%;
  aspect-ratio:16 / 9;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #dde7ed;
  border-radius:14px;
  background:linear-gradient(135deg,#f3f8fb 0%,#e7eff4 100%);
  color:#7a8794;
  font-size:.95rem;
  font-weight:700;
}

#dre-lesson-shell-01 .dre-lesson-session-summary{
  margin:6px 0 8px 0;
  padding:12px 14px;
  background:#ffffff;
  border:1px solid #dfe7ed;
  border-radius:14px;
}

#dre-lesson-shell-01 .dre-lesson-session-summary p{
  margin:0;
  font-size:.92rem;
  line-height:1.7;
  color:var(--dre-text);
}

/* =========================================
   META PILLS
========================================= */
#dre-lesson-shell-01 .dre-meta-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  max-width:100%;
  padding:7px 14px;
  border-radius:999px;
  background:#eef8fd;
  border:1px solid #b7def0;
  color:var(--dre-blue);
  font-size:.95rem;
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease;
}

#dre-lesson-shell-01 .dre-meta-pill:hover{
  background:var(--dre-blue);
  border-color:var(--dre-blue);
  color:#ffffff;
}

/* =========================================
   COMPACT META TAG GROUP
========================================= */
#dre-lesson-shell-01 .dre-lesson-meta-tags{
 display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
}

#dre-lesson-shell-01 .dre-lesson-meta-pills{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:8px;
  margin-top:6px;
}

#dre-lesson-shell-01 .dre-lesson-meta-pills .dre-meta-pill{
  min-height:34px;
  white-space:nowrap;
}
/* =========================================
   PAGE LINK AREA
========================================= */
#dre-lesson-shell-01 .dre-lesson-link{
  display:block;
  padding:14px 18px;
  margin-bottom:6px;
  background:#ffffff;
  border:1px solid #e7eef3;
  border-radius:12px;
  text-decoration:none;
  color:var(--dre-text);
  font-weight:700;
  font-size:.96rem;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .12s ease,
    box-shadow .18s ease;
}

#dre-lesson-shell-01 .dre-lesson-link:hover{
  background:#f2f9fd;
  border-color:#cfe7f3;
  color:var(--dre-blue);
  transform:translateY(-1px);
}

#dre-lesson-shell-01 .dre-lesson-link.is-active{
  background:#eef8fd;
  border-color:#b7def0;
  color:var(--dre-blue);
}

/* =========================================
   RIGHT CONTENT AREA
========================================= */
#dre-lesson-shell-01 .dre-lesson-content{
  background:var(--dre-shell-bg);
  border:2px solid #dfe7ed;
  border-radius:22px;
  padding:12px;
}

#dre-lesson-shell-01 .dre-section{
  margin:0 0 12px 0;
}

#dre-lesson-shell-01 .dre-section:last-child{
  margin-bottom:0;
}

#dre-lesson-shell-01 .dre-slot-label{
  display:none;
}

/* =========================================
   SHARED SECTION CARD
========================================= */
#dre-lesson-shell-01 .dre-section-card{
  width:100%;
  max-width:none;
  margin:0;
  background:#ffffff;
  border:1px solid var(--dre-card-border);
  border-radius:var(--dre-card-radius);
  padding:0 16px 16px 16px;
  box-shadow:0 1px 3px rgba(0,0,0,.03);
}

/* =========================================
   SECTION HEADERS INSIDE CARDS
========================================= */
#dre-lesson-shell-01 .dre-section-head{
  margin:0 -16px 16px -16px;
  background:rgb(248,248,249);
  border-top-left-radius:var(--dre-card-radius);
  border-top-right-radius:var(--dre-card-radius);
}

#dre-lesson-shell-01 .dre-section-title{
  margin:0;
  padding:16px 20px 16px 20px;
  font-size:1.15rem;
  line-height:1.2;
  font-weight:800;
  color:var(--dre-blue);
}

#dre-lesson-shell-01 .dre-section-text{
  margin:0;
  padding:14px 20px;
  font-size:.98rem;
  line-height:1.6;
  color:var(--dre-text);
  background:#ffffff;
  border-top:1px solid #e3e6ea;
  border-bottom:1px solid #e3e6ea;
}

#dre-lesson-shell-01 .dre-engine-slot{
  width:100%;
  min-width:0;
}

/* direct engine roots should fill the shared card */
#dre-lesson-shell-01 .dre-engine-slot > .dre-sw1-quiz,
#dre-lesson-shell-01 .dre-engine-slot > .dre-swipe-gaps1,
#dre-lesson-shell-01 .dre-engine-slot > .dre-tabbed-mcq,
#dre-lesson-shell-01 .dre-engine-slot > .dre-video-placeholder{
  width:100%;
  min-width:0;
  max-width:none;
  margin:0;
}

/* =========================================
   CTA SLOT
========================================= */
#dre-lesson-shell-01 .dre-section-cta{
  margin:0 0 12px 0;
}

#dre-lesson-shell-01 .dre-cta-card{
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  border:2px solid #ed4db4;
  border-radius:var(--dre-card-radius);
  padding:20px;
  box-shadow:0 1px 3px rgba(0,0,0,.03);
}

#dre-lesson-shell-01 .dre-cta-inner{
  display:flex;
  flex-direction:column;
  gap:12px;
}

#dre-lesson-shell-01 .dre-cta-kicker{
  font-size:.76rem;
  line-height:1.2;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--dre-blue);
}

#dre-lesson-shell-01 .dre-cta-title{
  margin:0;
  font-size:1.25rem;
  line-height:1.2;
  font-weight:800;
  color:var(--dre-text);
}

#dre-lesson-shell-01 .dre-cta-text{
  margin:0;
  font-size:.98rem;
  line-height:1.65;
  color:var(--dre-text);
  max-width:52ch;
}

#dre-lesson-shell-01 .dre-cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  padding-top:4px;
}

#dre-lesson-shell-01 .dre-cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 16px;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  font-size:.95rem;
  line-height:1.2;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    transform .12s ease;
}

#dre-lesson-shell-01 .dre-cta-btn-primary{
  background:#ed4db4;
  border:1px solid #ed4db4;
  color:#ffffff;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}

#dre-lesson-shell-01 .dre-cta-btn-primary:hover{
  background:#d63aa0;
  border-color:#d63aa0;
}

#dre-lesson-shell-01 .dre-cta-btn-secondary{
  background:#eef8fd;
  border:1px solid #b7def0;
  color:var(--dre-blue);
}

#dre-lesson-shell-01 .dre-cta-btn-secondary:hover{
  background:#e4f4fb;
  border-color:#9ed3eb;
}

#dre-lesson-shell-01 .dre-cta-text-link{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:0 4px;
  color:var(--dre-blue);
  font-weight:700;
  text-decoration:none;
}

#dre-lesson-shell-01 .dre-cta-text-link:hover{
  text-decoration:underline;
}

/* =========================================
   TOGGLE BUTTON
========================================= */
#dre-lesson-shell-01 .dre-lesson-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:#ffffff;
  border:1px solid #dfe7ed;
  color:var(--dre-blue);
  font-weight:700;
  font-size:.9rem;
  cursor:pointer;
  text-decoration:none;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .12s ease;
}

#dre-lesson-shell-01 .dre-lesson-toggle:hover{
  background:#f2f9fd;
  border-color:var(--dre-blue);
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}

#dre-lesson-shell-01 .dre-lesson-toggle:active{
  transform:translateY(1px);
}

#dre-lesson-shell-01 .dre-lesson-toggle-icon{
  font-size:0.95rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
}

#dre-lesson-shell-01 .dre-lesson-toggle-text{
  line-height:1;
}

/* =========================================
   VIDEO PLACEHOLDER
========================================= */
#dre-lesson-shell-01 .dre-video-placeholder{
  width:100%;
}

#dre-lesson-shell-01 .dre-video-placeholder-screen{
  width:100%;
  aspect-ratio:16 / 9;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  border-radius:16px;
  border:1px solid #d7e2e9;
  background:linear-gradient(135deg,#eef5f9 0%,#e2ebf1 100%);
}

#dre-lesson-shell-01 .dre-video-play{
  width:70px;
  height:70px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#fff;
  color:var(--dre-blue);
  font-size:30px;
  font-weight:700;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}

#dre-lesson-shell-01 .dre-video-label{
  font-weight:700;
  color:var(--dre-text);
  font-size:1rem;
  text-align:center;
}



/* =========================================
   NAV CLOSED — DESKTOP ONLY
========================================= */
@media (min-width:901px){

  #dre-lesson-shell-01.dre-nav-closed .dre-lesson-grid{
    grid-template-columns:280px minmax(0,var(--dre-section-max));
    justify-content:start;
  }

  #dre-lesson-shell-01.dre-nav-closed .dre-lesson-nav{
    visibility:hidden;
    pointer-events:none;
  }

}

/* =========================================
   ASTRA / PAGE WRAPPERS
========================================= */
.single-lesson .site-content .ast-container{
  max-width:none;
  width:100%;
  padding-left:0;
  padding-right:0;
  display:block;
}

.single-lesson #primary{
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
}

.single-lesson #secondary{
  display:none;
}

.single-lesson article,
.single-lesson .post-entry,
.single-lesson .entry-content{
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
}

.single-lesson .inside-article{
  padding:0;
}




/* =========================================
   RESPONSIVE
========================================= */
@media (max-width:900px){

  #dre-lesson-shell-01 .dre-lesson-grid,
  #dre-lesson-shell-01.dre-nav-open .dre-lesson-grid,
  #dre-lesson-shell-01.dre-nav-closed .dre-lesson-grid{
    grid-template-columns:1fr;
    gap:16px;
    justify-content:stretch;
  }

  #dre-lesson-shell-01 .dre-lesson-nav{
    position:static;
    top:auto;
    width:100%;
    max-width:none;
    max-height:none;
    overflow:visible;
    padding-right:0;
  }

  #dre-lesson-shell-01.dre-nav-closed .dre-lesson-nav{
    display:none;
    visibility:visible;
    pointer-events:auto;
  }

  #dre-lesson-shell-01.dre-nav-open .dre-lesson-nav{
    display:block;
    visibility:visible;
    pointer-events:auto;
  }

  #dre-lesson-shell-01 .dre-lesson-content{
    width:100%;
    max-width:none;
  }

}