/* =========================================================================
   Lesson-menu + one-lesson-at-a-time view — shared across all 4 IELTS modules
   (reading / writing / listening / speaking). Data-driven: reads each page's
   existing .lchapter sections, so it needs NO per-page markup. Reuses each
   page's own CSS variables, so it is automatically theme-aware in light/dark.
   ========================================================================= */

/* ---- the lesson menu (grid of cards) ---- */
.lesson-menu{ max-width:1080px; margin:0 auto 44px; padding:0 28px; }
.lesson-menu .lm-head{ margin:6px 0 22px; }
.lesson-menu .lm-head h2{ font-size:1.5rem; color:var(--brand-strong); margin:0 0 7px; letter-spacing:-.01em; }
.lesson-menu .lm-head p{ color:var(--text-soft); font-size:1rem; margin:0; line-height:1.6; }
.lesson-menu .lm-head .bn{ display:block; margin-top:5px; font-family:"Hind Siliguri","Lexend",sans-serif; }
.lm-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:16px; }
.lm-card{
  text-align:left; cursor:pointer; font-family:inherit; text-decoration:none;
  background:var(--card-bg); border:1.5px solid var(--card-line); border-radius:16px;
  padding:20px; box-shadow:0 4px 16px rgba(55,48,163,.05);
  transition:border-color .15s, transform .15s, box-shadow .15s;
  display:flex; flex-direction:column; gap:9px; min-width:0;
}
/* slim orientation pointer in the menu head (one app-level orientation lives on the
   landing — this replaces the repeated per-module "Chapter 1" card) */
.lesson-menu .lm-orient{
  display:flex; align-items:center; gap:13px; margin-top:16px;
  background:var(--bg-alt); border:1.5px solid var(--card-line); border-radius:14px;
  padding:13px 17px; text-decoration:none; color:var(--brand-strong);
  transition:border-color .15s, transform .12s, box-shadow .15s;
}
.lesson-menu .lm-orient:hover{ border-color:var(--brand); transform:translateY(-1px); box-shadow:0 8px 20px rgba(79,70,229,.12); }
.lesson-menu .lm-orient-ic{ font-size:1.35rem; flex:none; line-height:1; }
.lesson-menu .lm-orient-tx{ font-size:.95rem; line-height:1.5; color:var(--text-soft); }
.lesson-menu .lm-orient-tx b{ color:var(--brand-strong); }
.lesson-menu .lm-orient-bn{ display:block; color:var(--muted); font-size:.84rem; font-family:"Hind Siliguri","Lexend",sans-serif; }
.lesson-menu .lm-orient-go{ margin-left:auto; flex:none; font-weight:700; color:var(--brand); font-size:.9rem; white-space:nowrap; }

/* book-chapter reference tag on each lesson card + nav */
.lm-card .lm-badge .lm-book{
  text-transform:none; letter-spacing:0; font-size:.67rem; font-weight:700;
  color:var(--muted); background:var(--bg-alt); border:1px solid var(--card-line);
  padding:2px 8px; border-radius:999px; margin-left:3px;
}
/* tiny "Book NN" line inside the compact chapter badge (in-lesson heading) */
.lbadge .lb-book{ font-size:.5rem; line-height:1; letter-spacing:.02em; text-transform:none; opacity:.82; margin-top:3px; white-space:nowrap; }

/* locked (Full-access) menu cards for free users */
.lm-card.lm-locked{ position:relative; }
.lm-card.lm-locked::after{ content:"🔒 Full"; position:absolute; top:12px; right:12px; font-size:.66rem; font-weight:800; color:var(--muted); background:var(--bg-alt); border:1px solid var(--card-line); padding:3px 9px; border-radius:999px; }
.lm-lock-wrap{ margin:6px 0 10px; }
.lm-card:hover{ border-color:var(--accent); transform:translateY(-3px); box-shadow:0 12px 28px rgba(55,48,163,.12); }
.lm-card .lm-badge{ display:inline-flex; align-items:baseline; gap:6px; font-weight:700; color:var(--accent-strong); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; }
.lm-card .lm-badge .num{ font-size:1.02rem; letter-spacing:0; }
.lm-card .lm-title{ font-weight:700; color:var(--brand-strong); font-size:1.1rem; line-height:1.32; }
.lm-card .lm-bn{ color:var(--text-soft); font-size:.9rem; line-height:1.6; font-family:"Hind Siliguri","Lexend",sans-serif; }
.lm-card .lm-go{ margin-top:auto; font-weight:700; color:var(--brand); font-size:.9rem; }
.lm-card.is-tests{ border-color:var(--accent); }
.lm-card.is-tests .lm-badge{ color:var(--accent-strong); }

/* ---- lesson navigation bar (Menu / Prev / Next) ---- */
.lesson-nav{ max-width:1080px; margin:0 auto; padding:14px 28px 6px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.lesson-nav.bottom{ margin-top:6px; margin-bottom:38px; border-top:1px solid var(--card-line); padding-top:18px; }
.ln-btn{
  font-family:inherit; cursor:pointer; font-weight:700; font-size:.9rem; border-radius:10px;
  padding:9px 16px; border:1.5px solid var(--card-line); background:var(--card-bg); color:var(--brand-strong);
  transition:border-color .15s, background .15s, color .15s;
}
.ln-btn:hover:not(:disabled){ border-color:var(--accent); }
.ln-btn:disabled{ opacity:.38; cursor:default; }
.ln-menu{ background:var(--brand); color:#fff; border-color:var(--brand); }
.ln-menu:hover{ background:var(--brand-strong); border-color:var(--brand-strong); }
.ln-spacer{ margin-left:auto; }
.ln-count{ color:var(--muted); font-size:.86rem; font-weight:600; white-space:nowrap; }

/* ---- view states (lesson groups are shown/hidden by JS via inline display) ---- */
body.view-menu .lesson-nav{ display:none; }
body.view-lesson .lesson-menu{ display:none; }

/* current lesson highlighted in the sticky pill switcher */
.lchapnav a.is-current{ background:var(--brand); color:#fff; border-color:var(--brand); }

@media (max-width:560px){
  .lesson-menu{ padding-left:16px; padding-right:16px; }
  .lesson-nav{ padding-left:16px; padding-right:16px; }
  .lm-grid{ grid-template-columns:minmax(0,1fr); }
  .ln-count{ display:none; }
}

/* ---- polished "Home" button in the module header (overrides the page's .btn-ghost) ---- */
header .btn-home{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 17px; border-radius:11px; font-weight:600; font-size:.92rem;
  color:var(--brand-strong); background:var(--card-bg);
  border:1.5px solid var(--card-line); box-shadow:0 1px 3px rgba(32,34,58,.05);
  transition:border-color .15s, background .15s, box-shadow .15s, transform .12s;
}
header .btn-home svg{ width:16px; height:16px; flex:none; }
header .btn-home:hover{
  border-color:var(--brand); background:var(--bg-alt);
  box-shadow:0 6px 16px rgba(79,70,229,.16); transform:translateY(-1px);
}