/* ============================================================
   THE SCOPE : on-site guide templates
   SEN Help, free guide ("SEND Code of Practice Expert")
   ------------------------------------------------------------
   Built ONLY on the real :root tokens in
   CDD/Playbooks/sen-help-tokens.md. No invented tokens.

   Class prefix: .sen-scope-* (and .sen-callout-*) so nothing
   collides with the live theme. Buttons reuse the canonical
   .sen-btn family (already in the theme).

   IN PRODUCTION:
   - The :root token block below is ALREADY defined site-wide in
     sen-help-theme/style.css. Do NOT re-ship it. It is included
     here only so this standalone demo renders. Delete the block
     marked "DEMO ONLY" when wiring into the theme.
   - The .sen-btn family is also already in the theme; the block

/* ============================================================
   BASE
   ============================================================ */
/* Scoped to scope content ONLY (was a global * reset that leaked box-sizing into the shared navbar/footer and shifted their layout). */
.sen-scope-landing, .sen-scope-landing *, .sen-scope-landing *::before, .sen-scope-landing *::after,
.sen-scope-modpage, .sen-scope-modpage *, .sen-scope-modpage *::before, .sen-scope-modpage *::after,
.sen-scope-lessongrid, .sen-scope-lessongrid *, .sen-scope-lessongrid *::before, .sen-scope-lessongrid *::after {
  box-sizing: border-box;
}
body.sen-scope {
  margin: 0;
  font-family: var(--sen-font-body);
  font-weight: var(--sen-weight-light);
  color: var(--sen-body);
  background: var(--sen-white);
  line-height: var(--sen-lh-body); /* universal default text line spacing (1.2), matches the site */
  -webkit-font-smoothing: antialiased;
}
.sen-scope-landing :is(h1, h2, h3, h4),
.sen-scope-modpage :is(h1, h2, h3, h4),
.sen-scope-lessongrid :is(h1, h2, h3, h4) {
  font-family: var(--sen-font-display);
  font-weight: var(--sen-weight-display);
  color: var(--sen-ink);
  letter-spacing: var(--sen-tracking-tight);
  line-height: var(--sen-lh-display);
  margin: 0;
}
.sen-scope-landing a, .sen-scope-modpage a, .sen-scope-lessongrid a { color: var(--sen-blue); }
.sen-scope :focus-visible {
  outline: 2px solid var(--sen-blue);
  outline-offset: 3px;
  border-radius: 4px;
}
.sen-scope-wrap { max-width: var(--sen-container); margin: 0 auto; padding: 0 var(--sen-gutter); }
.sen-scope-eyebrow {
  font-family: var(--sen-font-body);
  font-weight: var(--sen-weight-medium);
  font-size: var(--sen-size-meta);
  letter-spacing: var(--sen-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--sen-blue);
  margin: 0 0 0.75rem;
}

/* ============================================================

/* SCOPE buttons use the display face (Cal Sans). Scoped to .sen-scope so it does
   NOT change buttons site-wide; promote into the canonical .sen-btn if you want
   every button on the site to match. Cal Sans is a single 400 master, so weight
   stays 400 to avoid the browser synth-bolding it. */
.sen-scope .sen-btn { font-family: var(--sen-font-display); font-weight: var(--sen-weight-display); letter-spacing: var(--sen-tracking-tight); }

/* ============================================================
   READABLE PROSE (the body of a lesson)
   Scoped tighter than `.article-content p` so it wins the trap.
   Generous measure + loose line-height for tired eyes.
   NOTE: line spacing matched to the site / UI-kit default text
   (--sen-lh-body, 1.2) for brand consistency.
   ============================================================ */
.sen-scope-prose { max-width: 42rem; }
.sen-scope-prose p,
.sen-scope-prose li {
  font-family: var(--sen-font-body);
  font-weight: var(--sen-weight-light);
  font-size: clamp(1.08rem, 0.6vw + 1rem, 1.2rem);
  line-height: 1.2;
  color: var(--sen-body);
}
.sen-scope-prose p { margin: 0 0 1.4rem; }
.sen-scope-prose h2.sen-scope-h {
  font-size: var(--sen-size-h3-lg);
  margin: 2.6rem 0 1rem;
}
.sen-scope-prose h3.sen-scope-h {
  font-size: var(--sen-size-h3-sm);
  margin: 2rem 0 0.75rem;
}
.sen-scope-prose ul, .sen-scope-prose ol { margin: 0 0 1.4rem; padding-left: 1.3rem; }
.sen-scope-prose li { margin-bottom: 0.6rem; }
.sen-scope-prose strong { font-weight: var(--sen-weight-medium); color: var(--sen-ink); }
.sen-scope-prose a { color: var(--sen-blue); text-underline-offset: 3px; }
.sen-scope-prose a:hover { color: var(--sen-blue-bright); }

/* Inline "correct as of" volatility marker */
.sen-scope-asof {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--sen-size-meta); font-weight: var(--sen-weight-medium);
  color: var(--sen-amber-warn); background: var(--sen-tint-amber);
  padding: 0.15rem 0.6rem; border-radius: var(--sen-r-pill);
  white-space: nowrap;
}
.sen-scope-asof::before { content: "↻"; font-weight: 700; }

/* ============================================================
   CALLOUT BOXES (the set of six + guests)
   icon + bold label + text. Distinct but quiet. Accessible:
   every box carries an icon AND a text label, never colour alone.
   ============================================================ */
.sen-callout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1rem;
  margin: 2rem 0;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--sen-border-soft);
  border-left: 4px solid var(--sen-border);
  border-radius: var(--sen-r-lg);
  background: var(--sen-white);
}
.sen-callout__icon {
  grid-row: 1 / span 2;
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  font-size: 1.35rem; line-height: 1;
  border-radius: var(--sen-r-circle);
  background: var(--sen-surface);
}
.sen-callout__label {
  align-self: center;
  font-family: var(--sen-font-body);
  font-weight: 600;
  font-size: var(--sen-size-body-sm);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--sen-ink);
}
.sen-callout__body {
  grid-column: 2;
  font-size: var(--sen-size-body);
  font-weight: var(--sen-weight-regular);
  line-height: 1.2;
  color: var(--sen-body);
}
.sen-callout__body :where(p) { margin: 0 0 0.7rem; }
.sen-callout__body :where(p):last-child { margin-bottom: 0; }
.sen-callout__body strong { font-weight: var(--sen-weight-medium); color: var(--sen-ink); }

/* 💡 Did you know : soft info blue */
.sen-callout--didyouknow { background: var(--sen-tint-blue); border-left-color: var(--sen-blue-bright); }
.sen-callout--didyouknow .sen-callout__icon { background: var(--sen-tint-blue-2); }
.sen-callout--didyouknow .sen-callout__label { color: var(--sen-blue); }

/* ⚖️ Your legal right : authoritative blue (deeper than info) */
.sen-callout--legal { background: var(--sen-tint-blue); border-left-color: var(--sen-blue); border-left-width: 5px; }
.sen-callout--legal .sen-callout__icon { background: var(--sen-tint-blue-2); }
.sen-callout--legal .sen-callout__label { color: var(--sen-blue-hover); }

/* ✅ Top tip : green, do this */
.sen-callout--tip { background: #e2fbef; border-left-color: var(--sen-green); }
.sen-callout--tip .sen-callout__icon { background: #d6f7e6; }
.sen-callout--tip .sen-callout__label { color: var(--sen-green-ink); }

/* ⭐ Fun fact : lighter green, a smile (icon+label differentiate) */
.sen-callout--funfact { background: var(--sen-surface); border-left-color: var(--sen-green-deep); }
.sen-callout--funfact .sen-callout__icon { background: var(--sen-tint-green); }
.sen-callout--funfact .sen-callout__label { color: var(--sen-green-ink); }

/* ⚠️ Watch out : amber caution (never red: warm guide) */
.sen-callout--watchout { background: #fff0d1; border-left-color: var(--sen-amber); }
.sen-callout--watchout .sen-callout__icon { background: #ffeccb; }
.sen-callout--watchout .sen-callout__label { color: var(--sen-amber-warn); }

/* 🧠 Why this happens : calm neutral slate (the psychology) */
.sen-callout--why { background: var(--sen-surface); border-left-color: var(--sen-meta); }
.sen-callout--why .sen-callout__icon { background: var(--sen-white); }
.sen-callout--why .sen-callout__label { color: var(--sen-muted); }

/* ============================================================
   VIDEO SLOT (responsive 16:9, ad-free youtube-nocookie embed)
   ============================================================ */
.sen-scope-video {
  margin: 2.25rem 0;
  border-radius: var(--sen-r-xl);
  overflow: hidden;
  background: var(--sen-ink);
  box-shadow: var(--sen-shadow-card);
}
.sen-scope-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(58,123,212,0.35), transparent 60%),
    linear-gradient(160deg, #16335c, #0f172a);
  display: grid; place-items: center;
}
.sen-scope-video__frame iframe,
.sen-scope-video__frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.sen-scope-video__play {
  width: 5rem; height: 5rem; border-radius: var(--sen-r-circle);
  background: rgba(255,255,255,0.95); color: var(--sen-blue);
  display: grid; place-items: center; font-size: 1.6rem; padding-left: 0.3rem;
  box-shadow: var(--sen-shadow-cta);
}
.sen-scope-video__cap {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between;
  padding: 0.85rem 1.1rem; background: var(--sen-white);
  font-size: var(--sen-size-meta); color: var(--sen-meta);
}
.sen-scope-video__cap strong { color: var(--sen-body); font-weight: var(--sen-weight-medium); }

/* ============================================================
   INTERACTIVE FLOWCHART SLOT (Module 4)
   ============================================================ */
.sen-scope-flow {
  margin: 2.25rem 0; padding: 1.5rem;
  border: 1px dashed var(--sen-border); border-radius: var(--sen-r-xl);
  background: var(--sen-tint-blue-4);
}
.sen-scope-flow__title {
  font-size: var(--sen-size-meta); font-weight: var(--sen-weight-medium);
  letter-spacing: var(--sen-tracking-eyebrow); text-transform: uppercase;
  color: var(--sen-meta); margin: 0 0 1rem;
}
.sen-scope-flow__row { display: flex; align-items: stretch; gap: 0.6rem; flex-wrap: wrap; }
.sen-scope-flow__step {
  flex: 1 1 0; min-width: 8rem;
  background: var(--sen-white); border: 1px solid var(--sen-border-soft);
  border-radius: var(--sen-r-lg); padding: 0.9rem 1rem;
}
.sen-scope-flow__step b { display: block; font-family: var(--sen-font-body); font-weight: var(--sen-weight-medium); color: var(--sen-ink); font-size: var(--sen-size-body-sm); }
.sen-scope-flow__step span { font-size: var(--sen-size-meta); color: var(--sen-meta); }
.sen-scope-flow__arrow { align-self: center; color: var(--sen-faint); font-size: 1.2rem; }

/* ============================================================
   RESOURCES & NEXT STEP BLOCK (modular, scales empty -> full)
   ============================================================ */
.sen-scope-resources {
  margin: 2.75rem 0 0;
  padding: 1.75rem;
  border: 1px solid var(--sen-border-soft);
  border-radius: var(--sen-r-xl);
  background: var(--sen-white);
}
.sen-scope-resources__h {
  font-size: var(--sen-size-h4); margin: 0 0 1.25rem;
}
.sen-scope-rgroup { margin-bottom: 1.5rem; }
.sen-scope-rgroup:last-child { margin-bottom: 0; }
.sen-scope-rgroup__label {
  font-size: var(--sen-size-meta); font-weight: var(--sen-weight-medium);
  letter-spacing: var(--sen-tracking-eyebrow); text-transform: uppercase;
  color: var(--sen-meta); margin: 0 0 0.75rem;
}
.sen-scope-rlinks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.sen-scope-rlink {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.85rem 1rem; border: 1px solid var(--sen-border-soft);
  border-radius: var(--sen-r-lg); background: var(--sen-surface-2);
  text-decoration: none; color: var(--sen-ink);
  transition: border-color var(--sen-tx-base), background var(--sen-tx-base);
}
.sen-scope-rlink:hover { border-color: var(--sen-blue-bright); background: var(--sen-white); }
.sen-scope-rlink__ic {
  flex: 0 0 2.25rem; height: 2.25rem; border-radius: var(--sen-r-sm);
  display: grid; place-items: center; background: var(--sen-tint-blue); color: var(--sen-blue);
  font-size: 1.1rem;
}
.sen-scope-rlink__ic--dl { background: var(--sen-tint-green); color: var(--sen-green-ink); }
.sen-scope-rlink__t { display: flex; flex-direction: column; gap: 0.1rem; }
.sen-scope-rlink__t b { font-weight: var(--sen-weight-medium); font-size: var(--sen-size-body-md); }
.sen-scope-rlink__t span { font-size: var(--sen-size-meta); color: var(--sen-meta); }
.sen-scope-rlink__ext { margin-left: auto; color: var(--sen-faint); font-size: 0.9rem; }

/* Tasteful product CTA (never in front of safety-critical content) */
.sen-scope-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem;
  padding: 1.25rem 1.4rem; border-radius: var(--sen-r-lg);
  background: linear-gradient(135deg, var(--sen-tint-blue), var(--sen-tint-blue-4));
  border: 1px solid var(--sen-tint-blue-2);
}
.sen-scope-cta__t { flex: 1 1 16rem; }
.sen-scope-cta__t b { display: block; font-family: var(--sen-font-display); font-weight: var(--sen-weight-display); color: var(--sen-ink); font-size: var(--sen-size-h4); }
.sen-scope-cta__t span { font-size: var(--sen-size-body-sm); color: var(--sen-muted); }

/* Next step row */
.sen-scope-next {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 1.3rem; border-radius: var(--sen-r-lg);
  background: var(--sen-tint-green); border: 1px solid #c9efda;
}
.sen-scope-next__t { flex: 1; }
.sen-scope-next__t b { display: block; font-weight: var(--sen-weight-medium); color: var(--sen-green-ink); font-size: var(--sen-size-body-md); }
.sen-scope-next__t span { font-size: var(--sen-size-meta); color: var(--sen-muted); }

/* ============================================================
   LESSON LAYOUT (the workhorse): side menu + main
   ============================================================ */
.sen-scope-lessongrid {
  max-width: var(--sen-container); margin: 0 auto; padding: 2rem var(--sen-gutter) 4rem;
  display: grid; grid-template-columns: 19rem 1fr; gap: 2.5rem; align-items: start;
}
.sen-scope-main { min-width: 0; }

/* Side menu */
.sen-scope-side {
  position: sticky; top: 1.5rem;
  background: var(--sen-white); border: 1px solid var(--sen-border-soft);
  border-radius: var(--sen-r-xl); box-shadow: var(--sen-shadow-nav);
  overflow: hidden;
}
.sen-scope-side__head { padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--sen-line); }
.sen-scope-side__kicker {
  font-size: var(--sen-size-meta); font-weight: 700;
  letter-spacing: var(--sen-tracking-eyebrow); text-transform: uppercase; color: var(--sen-blue);
}
.sen-scope-side__title { font-family: var(--sen-font-display); font-weight: var(--sen-weight-display); font-size: var(--sen-size-h4); margin-top: 0.15rem; }

/* progress */
.sen-scope-progress { padding: 1rem 1.25rem; border-bottom: 1px solid var(--sen-line); background: var(--sen-surface-2); }
.sen-scope-progress__row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.5rem; }
.sen-scope-progress__label { font-size: var(--sen-size-meta); color: var(--sen-muted); font-weight: var(--sen-weight-medium); }
.sen-scope-progress__pct { font-size: var(--sen-size-meta); color: var(--sen-meta); }
.sen-scope-progress__track { height: 8px; border-radius: var(--sen-r-pill); background: var(--sen-line); overflow: hidden; }
.sen-scope-progress__fill { height: 100%; border-radius: var(--sen-r-pill); background: var(--sen-green); width: 0; transition: width 0.8s ease-out; }

/* menu list */
.sen-scope-menu { max-height: 60vh; overflow-y: auto; padding: 0.5rem 0; }
.sen-scope-mod { border: 0; }
.sen-scope-mod__btn {
  width: 100%; display: flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 1.25rem; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--sen-font-body); font-weight: var(--sen-weight-medium);
  font-size: var(--sen-size-body-sm); color: var(--sen-ink);
}
.sen-scope-mod__num {
  flex: 0 0 1.5rem; height: 1.5rem; border-radius: var(--sen-r-sm);
  display: grid; place-items: center; font-size: 0.75rem;
  background: var(--sen-tint-blue); color: var(--sen-blue);
}
.sen-scope-mod__name { flex: 1; font-family: var(--sen-font-display); font-weight: var(--sen-weight-display); font-size: var(--sen-size-body-lg); }
.sen-scope-mod__chev { color: var(--sen-faint); transition: transform var(--sen-tx-base); }
.sen-scope-mod[aria-expanded="true"] .sen-scope-mod__chev { transform: rotate(90deg); }
.sen-scope-mod__lessons { list-style: none; margin: 0; padding: 0 0 0.3rem; }
.sen-scope-mod[aria-expanded="false"] .sen-scope-mod__lessons { display: none; }
.sen-scope-mod__lessons a {
  display: flex; gap: 0.6rem; align-items: center;
  padding: 0.5rem 1.25rem 0.5rem 3.3rem;
  font-size: var(--sen-size-body-sm); color: var(--sen-muted); text-decoration: none;
  border-left: 3px solid transparent;
}
.sen-scope-mod__lessons a:hover { color: var(--sen-blue); background: var(--sen-surface-2); }
.sen-scope-mod__lessons a[aria-current="page"] {
  color: var(--sen-blue); font-weight: var(--sen-weight-medium);
  background: var(--sen-tint-blue-faint); border-left-color: var(--sen-blue);
}
.sen-scope-mod__lessons a .tick { color: var(--sen-green); font-size: 0.8rem; visibility: hidden; }
.sen-scope-mod__lessons a.is-done .tick { visibility: visible; }

/* Mobile side-menu toggle (hidden on desktop) */
.sen-scope-side-toggle { display: none; }

/* Lesson header */
.sen-scope-lhead { margin-bottom: 1.75rem; }
.sen-scope-lhead__crumb { font-size: var(--sen-size-body-sm); color: var(--sen-meta); margin-bottom: 1rem; }
.sen-scope-lhead__crumb a { color: var(--sen-blue); text-decoration: none; }
.sen-scope-lhead h1 { font-size: clamp(2rem, 3.5vw, var(--sen-size-h2-mid)); margin: 0.35rem 0 1rem; }
.sen-scope-lmeta { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; }
.sen-scope-stamp {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: var(--sen-size-meta); color: var(--sen-green-ink);
  background: var(--sen-tint-green); padding: 0.3rem 0.75rem; border-radius: var(--sen-r-pill);
  font-weight: var(--sen-weight-medium);
}
.sen-scope-stamp::before { content: "✓"; font-weight: 700; }
.sen-scope-readtime { font-size: var(--sen-size-meta); color: var(--sen-meta); }

/* top + bottom prev/next */
.sen-scope-pager { display: flex; gap: 1rem; flex-wrap: wrap; }
.sen-scope-pager--top { justify-content: space-between; margin-bottom: 1.5rem; }
.sen-scope-pager--foot { margin-top: 2.5rem; }
.sen-scope-pagerlink {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 1rem 1.25rem; border: 1px solid var(--sen-tint-blue-2);
  border-radius: var(--sen-r-lg); background: var(--sen-tint-blue); text-decoration: none;
  transition: border-color var(--sen-tx-base), box-shadow var(--sen-tx-base), transform var(--sen-tx-base);
}
.sen-scope-pagerlink:hover { transform: translateY(-3px); box-shadow: var(--sen-shadow-card); border-color: var(--sen-blue-bright); }
.sen-scope-pagerlink--next { text-align: right; }
.sen-scope-pagerlink__dir { font-size: var(--sen-size-meta); color: var(--sen-meta); font-weight: var(--sen-weight-medium); }
.sen-scope-pagerlink--next .sen-scope-pagerlink__dir { color: var(--sen-blue); }
.sen-scope-pagerlink__t { font-family: var(--sen-font-display); color: var(--sen-ink); font-size: var(--sen-size-body); }
.sen-scope-pager--top .sen-scope-pagerlink { flex: 0 1 auto; padding: 0.6rem 1.1rem; }
.sen-scope-pager--top .sen-scope-pagerlink__t { font-size: var(--sen-size-body-sm); }

/* ============================================================
   SITE-ish CHROME for the demo (simple header)
   ============================================================ */
.sen-scope-topbar {
  background: var(--sen-white); border-bottom: 1px solid var(--sen-border-soft);
  position: sticky; top: 0; z-index: 30;
}
.sen-scope-topbar__in {
  max-width: var(--sen-container); margin: 0 auto; padding: 0.9rem var(--sen-gutter);
  display: flex; align-items: center; gap: 1rem;
}
.sen-scope-brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.sen-scope-crest {
  width: 2rem; height: 2rem; border-radius: var(--sen-r-sm);
  background: var(--sen-blue); color: var(--sen-white);
  display: grid; place-items: center; font-family: var(--sen-font-display); font-size: 1rem;
}
.sen-scope-word { font-family: var(--sen-font-display); color: var(--sen-ink); font-size: 1.2rem; letter-spacing: 0.02em; }
.sen-scope-word b { color: var(--sen-blue); font-weight: var(--sen-weight-display); }
.sen-scope-topbar__tag { font-size: var(--sen-size-meta); color: var(--sen-meta); margin-left: auto; }

/* ============================================================
   LANDING PAGE (/scope)
   ============================================================ */
.sen-scope-hero {
  background: var(--sen-white);
}
.sen-scope-hero__in { max-width: 52rem; margin: 0 auto; padding: 4.5rem var(--sen-gutter) 3.5rem; text-align: center; }
.sen-scope-hero__pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.95rem; font-weight: var(--sen-weight-medium); color: var(--sen-green-ink);
  background: var(--sen-tint-green); padding: 0.35rem 1rem; border-radius: var(--sen-r-pill); margin-bottom: 1.5rem;
}
.sen-scope-hero h1 { font-size: clamp(2.3rem, 6vw, var(--sen-size-hero-2)); line-height: 1.05; }
.sen-scope-hero__lead {
  font-size: var(--sen-size-lead); line-height: 1.2; color: var(--sen-muted);
  max-width: 34rem; margin: 1.5rem auto 2rem;
}
/* equal-width hero buttons: both take the wider label width (Start here = See what is inside) */
.sen-scope-hero__actions { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.85rem; }
@media (max-width: 520px) { .sen-scope-hero__actions { grid-auto-flow: row; } }
.sen-scope-hero__note { margin-top: 1.5rem; font-size: var(--sen-size-meta); color: var(--sen-meta); }

.sen-scope-section { padding: var(--sen-section-y) 0; }
.sen-scope-hero + .sen-scope-section { padding-top: 1rem; }  /* hero already adds bottom space; avoid a double gap before the first section */
.sen-scope-section__head { max-width: 40rem; margin: 0 auto 2.5rem; text-align: center; }
.sen-scope-section__head h2 { font-size: clamp(1.8rem, 4vw, var(--sen-size-h2-mid)); }
.sen-scope-section__head p { font-size: var(--sen-size-body-lg); color: var(--sen-muted); line-height: 1.2; margin: 0.85rem 0 0; }

.sen-scope-modgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1.25rem;
}
.sen-scope-modcard {
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: 1.5rem; background: var(--sen-tint-blue);
  border: 1px solid var(--sen-border-soft); border-radius: var(--sen-r-xl);
  text-decoration: none; color: inherit;
  transition: transform var(--sen-tx-base), box-shadow var(--sen-tx-base), border-color var(--sen-tx-base);
}
.sen-scope-modcard:hover { transform: translateY(-3px); box-shadow: var(--sen-shadow-card); border-color: var(--sen-blue-bright); }
.sen-scope-modcard__top { display: flex; align-items: center; gap: 0.75rem; }
.sen-scope-modcard__num {
  flex: 0 0 2.25rem; height: 2.25rem; border-radius: var(--sen-r-lg);
  display: grid; place-items: center; font-family: var(--sen-font-display);
  background: #d5e5ff; color: var(--sen-blue); font-size: 1.05rem; border: 1px solid #d5e5ff;
}
.sen-scope-modcard__lessons { font-size: var(--sen-size-meta); color: var(--sen-meta); margin-left: auto; }
.sen-scope-modcard h3 { font-size: var(--sen-size-h4); }
.sen-scope-modcard p { margin: 0; font-size: var(--sen-size-body-sm); color: var(--sen-muted); line-height: 1.2; }
.sen-scope-modcard__go { margin-top: auto; font-size: var(--sen-size-body-sm); font-weight: var(--sen-weight-medium); color: var(--sen-blue); }

/* reassurance band */
.sen-scope-reassure { background: var(--sen-tint-blue-faint); border-top: 1px solid var(--sen-line); border-bottom: 1px solid var(--sen-line); }
.sen-scope-reassure__in {
  max-width: 48rem; margin: 0 auto; padding: var(--sen-section-y-sm) var(--sen-gutter); text-align: center;
}
.sen-scope-reassure h2 { font-size: clamp(1.6rem, 4vw, var(--sen-size-h3-lg)); }
.sen-scope-reassure p { font-size: var(--sen-size-body-lg); color: var(--sen-muted); line-height: 1.2; margin: 1rem 0 0; }
.sen-scope-reassure__pills { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.75rem; }
.sen-scope-chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: var(--sen-size-body-sm); font-weight: var(--sen-weight-medium); color: var(--sen-blue);
  background: var(--sen-white); border: 1px solid var(--sen-tint-blue-2);
  padding: 0.5rem 1rem; border-radius: var(--sen-r-pill);
}

/* ============================================================
   MODULE OVERVIEW PAGE
   ============================================================ */
.sen-scope-modpage { max-width: 46rem; margin: 0 auto; padding: 3rem var(--sen-gutter) 4rem; }
.sen-scope-modpage__crumb { font-size: var(--sen-size-body-sm); color: var(--sen-meta); margin-bottom: 1rem; }
.sen-scope-modpage__crumb a { color: var(--sen-blue); text-decoration: none; }
.sen-scope-modpage h1 { font-size: clamp(2rem, 5vw, var(--sen-size-h2)); margin: 0.5rem 0 1.25rem; }
.sen-scope-modpage__intro { font-size: var(--sen-size-body-lg); line-height: 1.2; color: var(--sen-body); }
.sen-scope-modpage__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  margin: 1.75rem 0 2.5rem; padding: 1.1rem 1.3rem;
  background: var(--sen-surface-2); border: 1px solid var(--sen-border-soft); border-radius: var(--sen-r-lg);
}
.sen-scope-modpage__bar .sen-scope-progress__track { flex: 1 1 12rem; }
.sen-scope-modpage__count { font-size: var(--sen-size-body-sm); color: var(--sen-muted); font-weight: var(--sen-weight-medium); }

.sen-scope-checklist { list-style: none; margin: 0 0 2.5rem; padding: 0; display: grid; gap: 0.75rem; }
.sen-scope-check {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem; background: var(--sen-tint-blue-faint);
  border: 1px solid var(--sen-border-soft); border-radius: var(--sen-r-lg);
  text-decoration: none; color: inherit;
  transition: border-color var(--sen-tx-base), background var(--sen-tx-base);
}
.sen-scope-check:hover { border-color: var(--sen-blue-bright); }
.sen-scope-check__box {
  flex: 0 0 1.6rem; height: 1.6rem; border-radius: var(--sen-r-circle);
  border: 2px solid var(--sen-border); display: grid; place-items: center;
  color: var(--sen-white); font-size: 0.85rem;
}
.sen-scope-check.is-done .sen-scope-check__box { background: var(--sen-green); border-color: var(--sen-green); }
.sen-scope-check.is-done .sen-scope-check__box::before { content: "✓"; }
.sen-scope-check__t { flex: 1; }
.sen-scope-check__t b { display: block; font-weight: var(--sen-weight-medium); color: var(--sen-ink); font-size: var(--sen-size-body-md); }
.sen-scope-check__t span { font-size: var(--sen-size-meta); color: var(--sen-meta); }
.sen-scope-check__n { font-size: var(--sen-size-meta); color: var(--sen-faint); }
.sen-scope-check.is-current { border-color: var(--sen-blue); box-shadow: var(--sen-focus-ring); }

/* ============================================================
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .sen-scope-lessongrid { grid-template-columns: 1fr; gap: 1.25rem; }
  .sen-scope-side { position: static; }
  .sen-scope-side-toggle {
    display: flex; width: 100%; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem; background: none; border: 0; cursor: pointer;
    font-family: var(--sen-font-body); font-weight: var(--sen-weight-medium); font-size: var(--sen-size-body-md); color: var(--sen-ink);
  }
  .sen-scope-side-toggle__chev { color: var(--sen-faint); transition: transform var(--sen-tx-base); }
  .sen-scope-side[data-open="false"] .sen-scope-side-toggle__chev { transform: rotate(-90deg); }
  .sen-scope-side[data-open="false"] .sen-scope-side__body { display: none; }
}
@media (min-width: 901px) {
  .sen-scope-side__body { display: block !important; }
}
@media (max-width: 560px) {
  .sen-scope-pager { flex-direction: column; }
  .sen-scope-pager--top { flex-direction: row; }
  .sen-callout { grid-template-columns: 1fr; }
  .sen-callout__icon { grid-row: auto; }
}

/* ============================================================
   REDUCED MOTION (audience is motion-sensitive; global lock)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .sen-scope *, .sen-scope *::before, .sen-scope *::after {
    transition: none !important; animation: none !important; scroll-behavior: auto !important;
  }
  .sen-scope-progress__fill { transition: none !important; }
}

/* Fix: primary button as a link keeps its white label at rest (0,2,0 beats .sen-scope a 0,1,1) */
.sen-scope .sen-btn--primary { color: #fff; }

/* Module overview: widen the Start this module CTA */
.sen-scope-modpage__bar .sen-btn { min-width: 18rem; }

/* ---- Integration fix: scope pages render inside the site flex body (body.sen-saas-app, a flex column with a margin-top:auto sticky footer). These top-level containers are built for normal block flow, so let them fill the cross axis (then their own max-width + margin:0 auto centers the content) and grow on the main axis so the shared footer sits at the bottom on every page. ---- */
body.sen-scope > .sen-scope-landing,
body.sen-scope > .sen-scope-modpage,
body.sen-scope > .sen-scope-lessongrid {
  width: 100%;
  box-sizing: border-box;
  flex: 1 0 auto;
}

/* Keep the shared footer identical on scope pages: undo scope.css body-level a/heading rules leaking into the dark footer (links were turning blue, headings dark). */
body.sen-scope .sen-app-footer .sen-footer-nav a { color: #94a3b8; }
body.sen-scope .sen-app-footer .sen-footer-nav a:hover { color: #ffffff; }
body.sen-scope .sen-app-footer .sen-footer-heading { color: #ffffff; font-weight: 500; letter-spacing: normal; line-height: 1.2; }


/* Mirror the site navbar on scope pages: restore the dropdown link colour that .sen-scope a was turning blue. */
body.sen-scope .sen-app-navbar .sen-dropdown-menu a { color: #334155; }


/* ---- Explicit lesson completion: the "Mark as done" button (above the foot pager). Neutral/outline when not done, green tint when done. ---- */
.sen-scope-donerow { margin-top: 2.5rem; }
.sen-scope-done {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-family: var(--sen-font-display);
  font-weight: var(--sen-weight-display);
  letter-spacing: var(--sen-tracking-tight);
  font-size: var(--sen-size-body);
  color: var(--sen-green-ink);
  background: var(--sen-tint-green);
  border: 1px solid var(--sen-green);
  border-radius: var(--sen-r-pill);
  padding: 0.55rem 1.15rem;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.sen-scope-done:hover { background: #d6f7e6; border-color: var(--sen-green); }
.sen-scope-done:focus-visible { outline: 2px solid var(--sen-blue); outline-offset: 2px; }
.sen-scope-done__check { display: none; line-height: 1; }
.sen-scope-done.is-done {
  color: #ffffff;
  background: var(--sen-green);
  border-color: var(--sen-green);
}
.sen-scope-done.is-done .sen-scope-done__check { display: inline; }

/* Landing resume link: a quiet text link under the reassurance note (no button chrome). */
.sen-scope-hero__resume { margin: 0.9rem 0 0; }
.sen-scope-landing a.sen-scope-resume-link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--sen-font-display); font-weight: var(--sen-weight-medium);
  font-size: var(--sen-size-body-sm); color: var(--sen-green-ink);
  text-decoration: none; border: 0; background: none; padding: 0;
}
.sen-scope-resume-link__arrow { display: inline-block; transition: transform var(--sen-tx-base); }
.sen-scope-resume-link:hover { color: var(--sen-green-deep); }
.sen-scope-resume-link:hover .sen-scope-resume-link__arrow { transform: translateX(4px); }

/* Resources heading: restore + widen the gap above the first group (the scoped heading reset had zeroed its margin). */
.sen-scope .sen-scope-resources__h { margin: 0 0 1rem; }