/* Flip-card engine */
      .lesson-container .vocab-card{
        position:relative; transform-style:preserve-3d; transition:transform .5s ease;
        min-height:120px; border-radius:.5rem; box-shadow:0 1px 3px rgba(0,0,0,.06); background:#fff;
      }
      .lesson-container .vocab-card.is-flipped{ transform:rotateY(180deg); }
      .lesson-container .vocab-card .front,
      .lesson-container .vocab-card .back{
        position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
        padding:1rem; text-align:left; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:.5rem;
      }
      .lesson-container .vocab-card .back{ transform:rotateY(180deg); background:#faf6ee; }

      /* Vocab grid */
      .lesson-container .vocab-container{
        display:grid; gap:1rem; padding:1rem; grid-template-columns:repeat(1, minmax(0,1fr));
      }
      @media (min-width:640px){
        .lesson-container .vocab-container{ grid-template-columns:repeat(2, minmax(0,1fr)); }
      }

      /* Matching game items */
      .lesson-container .game-item{
        box-shadow:0 1px 3px rgba(0,0,0,.06); padding:.75rem 1rem; border-radius:.5rem; background:#fff;
        border:2px solid transparent;
      }

      /* Beige content boxes: comfortable inner padding */
      .lesson-container #part2 .article-container,
      .lesson-container .viewpoint-display,
      .lesson-container #part5 > div{
        padding:1.25rem 1.5rem !important;
      }

      /* Part headings: faint divider */
      .lesson-container .lesson-card h2.brand-heading,
      .lesson-container .lesson-card h3.brand-heading{
        border-bottom:1px solid #e5e5e5; padding-bottom:.5rem; margin-bottom:1rem;
      }

      /* Viewpoint pill buttons layout */
      .lesson-container .viewpoint-buttons{
        display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr));
        gap:.75rem; margin-bottom:1.25rem; padding-bottom:.5rem;
      }
      .lesson-container .viewpoint-buttons .viewpoint-btn{
        padding:.6rem 1rem; border-radius:9999px; border:1px solid #27537a; color:#27537a; font-weight:500; cursor:pointer;
        transition:background-color .2s,color .2s,border-color .2s;
      }
      .lesson-container .viewpoint-buttons .viewpoint-btn.active{
        background:#27537a; color:#fff; border-color:#27537a;
      }

/* Part 4 — opinion area sizing + polish */
.lesson-container .viewpoint-display-interactive .opinion-row{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-top:.75rem;
}
.lesson-container .viewpoint-display-interactive textarea,
.lesson-container .viewpoint-display-interactive .opinion-textarea{
  width:100% !important;
  min-height:140px;           /* bump if you want it taller */
  padding:.75rem;
  border:1.5px solid #d1d5db;
  border-radius:.5rem;
  box-sizing:border-box;
  background:#fff;
  resize:vertical;            /* let them drag taller */
  line-height:1.45;
}


/* === Part 4 spacing & comfort === */
.lesson-container #part4 .viewpoint-buttons{
  gap: .75rem 1rem;          /* space between the name pills */
  margin: .5rem 0 1rem;      /* space above/below the row */
}

.lesson-container #part4 .viewpoint-display-interactive{
  padding: 1rem 1.25rem 1.25rem;   /* inner padding for the opinion card */
  border-radius: .5rem;
}

.lesson-container #part4 .viewpoint-display-interactive h4{
  margin: 0 0 .35rem;
}

.lesson-container #part4 .viewpoint-display-interactive p{
  margin: 0 0 .85rem;        /* space after subhead + body */
  line-height: 1.6;
}

.lesson-container #part4 .opinion-row{
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: .5rem;
}

.lesson-container #part4 .agree-btn,
.lesson-container #part4 .disagree-btn{
  padding: .5rem 1rem;       /* slightly bigger hit area */
}

.lesson-container #part4 textarea.note{
  width: 100% !important;
  min-height: 160px;
  margin-top: .5rem;         /* space above the box */
  padding: .75rem 1rem;      /* comfy typing padding */
  border: 1.5px solid #d1d5db;
  border-radius: .6rem;
  box-sizing: border-box;
  resize: vertical;
}

/* add a tad more breathing room inside the Part 4 card itself */
.lesson-container #part4.lesson-card,
.lesson-container #part4.lesson-card > *{
  /* if your markup sets .lesson-card at section level, this bumps inner padding a touch */
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

@media (min-width: 900px){
  .lesson-container #part4 .viewpoint-display-interactive{
    padding: 1.25rem 1.5rem 1.5rem; /* a bit more space on desktop */
  }
}

.lesson-card button {
  margin: 0.5rem 0.25rem;
  padding: 0.6rem 1.25rem;
  border-radius: 0.5rem;
  font-weight: 600;
  color: #fff;
  border: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.lesson-card button:hover {
  filter: brightness(1.1);
}

.lesson-card .check-story-btn,
.lesson-card .reset-story-btn {
  background-color: #27537a;
}

.lesson-card .reset-story-btn {
  background-color: #596c10;
}


      /* ---------- FCE polish ---------- */
      .lesson-container .fce-text-container{
        padding:1rem 1.25rem !important; border-radius:.5rem;
      }
      .lesson-container .fce-check-btn{
        background:#27537a !important; color:#fff !important; border:none !important;
        padding:.5rem 1rem !important; border-radius:.375rem !important; font-weight:600;
      }
      .lesson-container .fce-check-btn:hover{ opacity:.9; }
      .lesson-container .fce-hint{
        display:inline-block; margin-left:.5rem; font-size:.85rem; color:#374151;
        background:#F9FAFB; border:1px dashed #CBD5E1; border-radius:.375rem; padding:.15rem .4rem;
      }

.report-writing-lesson .mcq-q{background:#fff;border:1px solid #e5e7eb;border-radius:.6rem;padding:.8rem 1rem;margin:.6rem 0}
.report-writing-lesson .mcq-opt{display:flex;align-items:center;gap:.5rem;padding:.25rem 0}
.report-writing-lesson .mcq-letter{font-weight:700; color:#1f3b57}
.report-writing-lesson .mcq-tick{margin-left:auto}

/* ===== Universal styling for final-mission cards ===== */
.lesson-container .topic-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:1.1rem;
  align-items:stretch;
}

.lesson-container .topic-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:.75rem;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  padding:1rem 1.1rem;
  display:flex;
  flex-direction:column;
  gap:.4rem;
  transition:box-shadow .18s, transform .08s, border-color .18s;
}

.lesson-container .topic-card:hover,
.lesson-container .topic-card:focus-within{
  border-color:#dbe4ea;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  transform:translateY(-1px);
}

.lesson-container .topic-card small{
  display:block;
  font-weight:700;
  font-size:.875rem;
  line-height:1.25;
  color:#596c10;
  letter-spacing:.01em;
  margin:0 0 .15rem 0;
  text-transform:none;  /* keep author-specified case */
}

.lesson-container .topic-card h3{
  margin:0;
  font-weight:700;
  color:#172830;
  font-size:clamp(1rem, .9vw + .85rem, 1.15rem);
  line-height:1.45;
}

/* ===== Hook types → raised concept tiles (Article / universal) ===== */
.article-writing-lesson #hook-matcher .hook-about{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:1rem;
  box-shadow:0 6px 24px rgba(0,0,0,.06);
  padding:1.25rem 1.5rem;
}

/* grid: auto-fit by default; force 2x2 when class .cols-2 is present */
.article-writing-lesson #hook-matcher .about-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1rem 1.25rem;
}
.article-writing-lesson #hook-matcher .about-grid.cols-2{
  grid-template-columns:repeat(2,minmax(320px,1fr));
}
@media (max-width: 820px){
  .article-writing-lesson #hook-matcher .about-grid.cols-2{ grid-template-columns:1fr; }
}

/* individual tile */
.article-writing-lesson #hook-matcher .about-item{
  position:relative;
  background:#fff;
  border-radius:1rem;
  padding:1.1rem 1.35rem;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  border:1px solid #e5e7eb;
}

/* big heading + body copy like the screenshot */
.article-writing-lesson #hook-matcher .about-item h4{
  margin:.1rem 0 .35rem;
  font-weight:900;
  color:#1f3b57;
  font-size: clamp(1.15rem, 1.4vw + .8rem, 1.6rem);
}
.article-writing-lesson #hook-matcher .about-item p{
  margin:0;
  color:#0f2636;
  line-height:1.65;
  font-size: clamp(1rem, .55vw + .9rem, 1.25rem);
}

/* numbered circle */
.article-writing-lesson #hook-matcher .about-item .badge{
  --sz: 3rem;
  position:absolute; right:1rem; top:1rem;
  width:var(--sz); height:var(--sz);
  border-radius:999px;
  background:#27537a;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
  font-size:1.15rem;
  box-shadow:0 3px 10px rgba(39,83,122,.25);
}

/* =========================================================
   Thesis / Process Builder (shared across writing lessons)
   ========================================================= */
.lesson-container #ps-thesis {
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.55;
  text-align: left;                /* left align by default */
  margin-top: 2rem;
}

.lesson-container #ps-thesis h2 {
  color: var(--c2);                 /* use your brand green accent */
  font-weight: 800;
  margin: 0 0 1rem 0;
}

.lesson-container #ps-thesis .content-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  padding: 1.25rem;
}

.lesson-container #ps-thesis .grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .lesson-container #ps-thesis .grid {
    grid-template-columns: 1fr 1fr;
  }
  .lesson-container #ps-thesis .grid > label:first-child {
    grid-column: 1 / -1;   /* Problem selector spans full width */
  }
}

.lesson-container #ps-thesis label {
  font-weight: 600;
  color: var(--ink);
  display: block;
  text-align: left;
  margin-bottom: .35rem;
}

.lesson-container #ps-thesis .input,
.lesson-container #ps-thesis select {
  width: 100%;
  margin-top: .25rem;
  padding: .6rem .75rem;
  border: 1px solid #e5e7eb;
  border-radius: .6rem;
  background: #fff;
  font: inherit;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.lesson-container #ps-thesis .input:focus,
.lesson-container #ps-thesis select:focus {
  outline: none;
  border-color: #9bb7ca;
  box-shadow: 0 0 0 3px rgba(39,83,122,.18);
}

.lesson-container #ps-thesis .btn {
  background: var(--c1);
  color: #fff;
  border: none;
  border-radius: .6rem;
  font-weight: 600;
  padding: .7rem 1.2rem;
  margin: .5rem .5rem .5rem 0;
  cursor: pointer;
  transition: background .2s ease;
}
.lesson-container #ps-thesis .btn:hover {
  background: #1d3d5a;
}

.lesson-container #ps-thesis #tb-preview {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  background: #f9fafb;
  border-left: 4px solid var(--c2);
  border-radius: .5rem;
  color: #0f2636;
  min-height: 44px;
  white-space: pre-line;
}


/* Gallery shell */
.media-gallery{ margin: .25rem 0 1rem; }

/* HERO */
.media-hero{
  border: 1px solid #e5e7eb; border-radius: .75rem;
  overflow: hidden; background: #111; /* looks nice while loading */
}
.media-hero img{
  display:block; width:100%; height:auto; object-fit:cover;
}

/* THUMBS */
.media-strip{
  display:flex; gap:.5rem; overflow-x:auto; padding:.5rem 0 .25rem;
  scrollbar-gutter: stable;
}
.media-strip .thumb{
  border:1px solid #e5e7eb; border-radius:.5rem; padding:0; background:#fff; cursor:pointer;
  flex:0 0 auto; width:112px; height:72px; overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.media-strip .thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.media-strip .thumb.is-active{
  outline:3px solid #27537a; border-color:#27537a;
}


/* ==== Problem–Solution: Concept Cards (pillarsIntro) ==== */
.problem-solution-lesson #story-pillars-intro { margin-top: 1.5rem; }
.problem-solution-lesson #story-pillars-intro .concept-strip{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.problem-solution-lesson #story-pillars-intro .concept-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:.75rem;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  padding:1rem 1.1rem;
  display:flex;
  gap:.8rem;
  align-items:flex-start;
}
.problem-solution-lesson #story-pillars-intro .concept-num{
  flex:0 0 32px; width:32px; height:32px;
  border-radius:50%;
  background:var(--c1);                /* brand blue */
  color:#fff; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.problem-solution-lesson #story-pillars-intro .concept-heading{
  color:var(--c2);                      /* brand green */
  font-weight:800;
  margin:.05rem 0 .2rem;
}
.problem-solution-lesson #story-pillars-intro .concept-text{
  color:var(--ink);
  font-size:.96rem; line-height:1.45;
}


/* ===== Global highlight colours for all writing lessons ===== */
/* Fallback stays as-is */
[data-hl].on {
  background:#fff7cc;
  box-shadow: inset 0 0 0 2px #fde047;
  border-radius:4px;
  padding:0 2px;
  transition: background .12s ease;
}

/* Text variants (stronger + important) */
.b2-writing-lesson [data-hl].hl-sal.on   { background:#e0f2fe !important; box-shadow: inset 0 0 0 2px #38bdf8 !important; }
.b2-writing-lesson [data-hl].hl-open.on  { background:#dcfce7 !important; box-shadow: inset 0 0 0 2px #22c55e !important; }
.b2-writing-lesson [data-hl].hl-body.on  { background:#fef9c3 !important; box-shadow: inset 0 0 0 2px #facc15 !important; }
.b2-writing-lesson [data-hl].hl-act.on   { background:#fee2e2 !important; box-shadow: inset 0 0 0 2px #ef4444 !important; }
.b2-writing-lesson [data-hl].hl-close.on { background:#ede9fe !important; box-shadow: inset 0 0 0 2px #8b5cf6 !important; }
.b2-writing-lesson [data-hl].hl-rating.on{ background:#d1fae5 !important; box-shadow: inset 0 0 0 2px #10b981 !important; }
.b2-writing-lesson [data-hl].hl-hook.on  { background:#fef3c7 !important; box-shadow: inset 0 0 0 2px #f59e0b !important; }
.b2-writing-lesson [data-hl].hl-setup.on { background:#f3e8ff !important; box-shadow: inset 0 0 0 2px #a855f7 !important; }
.b2-writing-lesson [data-hl].hl-goal.on  { background:#cffafe !important; box-shadow: inset 0 0 0 2px #06b6d4 !important; }
.b2-writing-lesson [data-hl].hl-sum.on   { background:#fbcfe8 !important; box-shadow: inset 0 0 0 2px #db2777 !important; }
.b2-writing-lesson [data-hl].hl-rec.on   { background:#d9f99d !important; box-shadow: inset 0 0 0 2px #84cc16 !important; }

/* Button base stays neutral */
.highlight-btn {
  background:#fff;
  color:#172830;
  border:1px solid #cbd5e1;
  border-radius:.45rem;
  padding:.4rem .65rem;
  margin-right:.35rem;
  font-weight:600;
  cursor:pointer;
  transition: background .12s ease, border-color .12s ease;
}

/* Button fallback yellow (may appear in older lessons) */
.highlight-btn.active {
  background:#fef9c3;
  border-color:#facc15;
  color:#92400e;
}

/* Button variants (stronger + important) */
.b2-writing-lesson .highlight-btn.active.hl-sal   { background:#e0f2fe !important; border-color:#38bdf8 !important; color:#075985 !important; }
.b2-writing-lesson .highlight-btn.active.hl-open  { background:#dcfce7 !important; border-color:#22c55e !important; color:#166534 !important; }
.b2-writing-lesson .highlight-btn.active.hl-body  { background:#fef9c3 !important; border-color:#facc15 !important; color:#854d0e !important; }
.b2-writing-lesson .highlight-btn.active.hl-act   { background:#fee2e2 !important; border-color:#ef4444 !important; color:#991b1b !important; }
.b2-writing-lesson .highlight-btn.active.hl-close { background:#ede9fe !important; border-color:#8b5cf6 !important; color:#4c1d95 !important; }
.b2-writing-lesson .highlight-btn.active.hl-rating{ background:#d1fae5 !important; border-color:#10b981 !important; color:#064e3b !important; }
.b2-writing-lesson .highlight-btn.active.hl-hook  { background:#fef3c7 !important; border-color:#f59e0b !important; color:#92400e !important; }
.b2-writing-lesson .highlight-btn.active.hl-setup { background:#f3e8ff !important; border-color:#a855f7 !important; color:#6b21a8 !important; }
.b2-writing-lesson .highlight-btn.active.hl-goal  { background:#cffafe !important; border-color:#06b6d4 !important; color:#0e7490 !important; }
.b2-writing-lesson .highlight-btn.active.hl-sum   { background:#fbcfe8 !important; border-color:#db2777 !important; color:#831843 !important; }
.b2-writing-lesson .highlight-btn.active.hl-rec   { background:#d9f99d !important; border-color:#84cc16 !important; color:#365314 !important; }

/* New keys for reports (works across all lessons too) */
.b2-writing-lesson [data-hl].hl-heading.on  { background:#e0e7ff !important; box-shadow: inset 0 0 0 2px #6366f1 !important; } /* indigo for headings */
.b2-writing-lesson .highlight-btn.active.hl-heading { background:#e0e7ff !important; border-color:#6366f1 !important; color:#3730a3 !important; }

.b2-writing-lesson [data-hl].hl-aim.on      { background:#cffafe !important; box-shadow: inset 0 0 0 2px #06b6d4 !important; } /* cyan (aligns with "goal"-ish) */
.b2-writing-lesson .highlight-btn.active.hl-aim { background:#cffafe !important; border-color:#06b6d4 !important; color:#0e7490 !important; }

/* group both problems under a single 'issue' colour */
.b2-writing-lesson [data-hl].hl-issue.on    { background:#fee2e2 !important; box-shadow: inset 0 0 0 2px #ef4444 !important; } /* red */
.b2-writing-lesson .highlight-btn.active.hl-issue { background:#fee2e2 !important; border-color:#ef4444 !important; color:#991b1b !important; }

/* evidence/data gets teal */
.b2-writing-lesson [data-hl].hl-evidence.on { background:#d1fae5 !important; box-shadow: inset 0 0 0 2px #10b981 !important; } /* teal */
.b2-writing-lesson .highlight-btn.active.hl-evidence { background:#d1fae5 !important; border-color:#10b981 !important; color:#064e3b !important; }

/* proposals share a purple look */
.b2-writing-lesson [data-hl].hl-proposal.on { background:#ede9fe !important; box-shadow: inset 0 0 0 2px #8b5cf6 !important; } /* purple */
.b2-writing-lesson .highlight-btn.active.hl-proposal { background:#ede9fe !important; border-color:#8b5cf6 !important; color:#4c1d95 !important; }


.b2-writing-lesson [data-hl].hl-setting.on    { background:#e0f2fe !important; box-shadow: inset 0 0 0 2px #38bdf8 !important; }
.b2-writing-lesson .highlight-btn.active.hl-setting { background:#e0f2fe !important; border-color:#38bdf8 !important; color:#075985 !important; }

.b2-writing-lesson [data-hl].hl-problem.on    { background:#fee2e2 !important; box-shadow: inset 0 0 0 2px #ef4444 !important; }
.b2-writing-lesson .highlight-btn.active.hl-problem { background:#fee2e2 !important; border-color:#ef4444 !important; color:#991b1b !important; }

.b2-writing-lesson [data-hl].hl-action.on     { background:#dcfce7 !important; box-shadow: inset 0 0 0 2px #22c55e !important; }
.b2-writing-lesson .highlight-btn.active.hl-action { background:#dcfce7 !important; border-color:#22c55e !important; color:#166534 !important; }

.b2-writing-lesson [data-hl].hl-resolution.on { background:#fde68a !important; box-shadow: inset 0 0 0 2px #f59e0b !important; }
.b2-writing-lesson .highlight-btn.active.hl-resolution { background:#fde68a !important; border-color:#f59e0b !important; color:#92400e !important; }

.b2-writing-lesson [data-hl].hl-reflection.on { background:#ede9fe !important; box-shadow: inset 0 0 0 2px #8b5cf6 !important; }
.b2-writing-lesson .highlight-btn.active.hl-reflection { background:#ede9fe !important; border-color:#8b5cf6 !important; color:#4c1d95 !important; }


.b2-writing-lesson .ms-wrap{ padding:1rem 1.25rem; }
.b2-writing-lesson .ms-grid{ display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:780px){ .b2-writing-lesson .ms-grid{ grid-template-columns:repeat(3,1fr); } }
.b2-writing-lesson .ms-card{ background:#fff; border:1px solid #e5e7eb; border-radius:.75rem; padding:1rem; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.b2-writing-lesson .ms-title{ font-weight:800; color:#0f2636; margin-bottom:.5rem; }
.b2-writing-lesson .ms-display{ background:#eef2f7; border:1px solid #cdd8e6; border-radius:.6rem; padding:.6rem .75rem; min-height:44px; display:flex; align-items:center; }
.b2-writing-lesson .ms-display.ms-hit{ outline:3px solid rgba(39,83,122,.25); transition: outline .2s; }
.b2-writing-lesson .ms-controls{ display:flex; gap:.5rem; margin-top:.6rem; }

/* ===== Signal Word Practice — inner padding + tidy spacing ===== */
/* Works whether the wrapper is .signal-practice or just a .content-card */
.lesson-container .signal-practice,
.lesson-container #signal-practice-container.content-card {
  padding: clamp(14px, 1.6vw, 20px);
}

/* Fallback if your markup doesn’t include .signal-practice */
@supports(selector(:has(*))) {
  .lesson-container .content-card:has(.signal-input) {
    padding: clamp(14px, 1.6vw, 20px);
  }
}

/* Chips row and sentence block spacing */
.lesson-container .signal-bank { 
  display: flex; flex-wrap: wrap; gap: .5rem; 
  margin-bottom: .75rem;
}
.lesson-container .signal-questions { line-height: 1.6; }

/* Inputs feel nicer with a touch of padding and rounded corners */
.lesson-container .signal-input{
  padding: .45rem .7rem; 
  border-radius: .5rem;
}

/* === Universal: breathing room above later activity headings (A2–A6) === */

/* More space between activities + a bit of inner padding so badges don't
   sit on top of the H2. Works across all lessons. */
.lesson-container section:not(:first-of-type){
  margin-top: clamp(2rem, 3vw, 3rem);     /* external gap between sections */
  padding-top: clamp(.5rem, .9vw, 1rem);  /* internal gap before the first content */
  position: relative;                     /* prevents margin-collapsing with H2 */
}

/* Ensure the first H2 in each section still has a top gap even if there’s
   a small label/chip above it. */
.lesson-container section h2:first-of-type{
  margin-top: clamp(.5rem, .8vw, 1rem);
}

/* Optional: a tiny bump on very small screens */
@media (max-width: 640px){
  .lesson-container section:not(:first-of-type){
    margin-top: 2.25rem;
    padding-top: .75rem;
  }
}


/* ================= Universal Matching Game (all lessons) ================= */
/* Targets: #hook-matcher, #dlg-matching, #rw-matching inside any .lesson-container */

/* 1) Columns container = 2-col grid with safe sizing */
.lesson-container #hook-matcher .columns,
.lesson-container #dlg-matching .columns,
.lesson-container #rw-matching  .columns{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items: start;
  gap: 1rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
  padding: 1rem;
}
.lesson-container #hook-matcher .columns > *,
.lesson-container #dlg-matching .columns > *,
.lesson-container #rw-matching  .columns > *{ min-width: 0; }

/* 2) Headings above their lists (supports either <h4> or .col-h) */
.lesson-container #hook-matcher .columns h4,
.lesson-container #dlg-matching .columns h4,
.lesson-container #rw-matching  .columns h4,
.lesson-container #hook-matcher .columns .col-h,
.lesson-container #dlg-matching .columns .col-h,
.lesson-container #rw-matching  .columns .col-h{
  margin: 0 0 .55rem;
  font-weight: 700;
  color: #1f3b57;
  padding-left: .1rem;
}
.lesson-container #hook-matcher .columns h4:nth-of-type(1),
.lesson-container #hook-matcher .columns .col-h:nth-of-type(1),
.lesson-container #dlg-matching .columns h4:nth-of-type(1),
.lesson-container #dlg-matching .columns .col-h:nth-of-type(1),
.lesson-container #rw-matching  .columns h4:nth-of-type(1),
.lesson-container #rw-matching  .columns .col-h:nth-of-type(1){ grid-column:1; grid-row:1; }
.lesson-container #hook-matcher .columns h4:nth-of-type(2),
.lesson-container #hook-matcher .columns .col-h:nth-of-type(2),
.lesson-container #dlg-matching .columns h4:nth-of-type(2),
.lesson-container #dlg-matching .columns .col-h:nth-of-type(2),
.lesson-container #rw-matching  .columns h4:nth-of-type(2),
.lesson-container #rw-matching  .columns .col-h:nth-of-type(2){ grid-column:2; grid-row:1; }

/* 3) Lists live beneath headings */
.lesson-container #hook-matcher .game-terms,
.lesson-container #dlg-matching .game-terms,
.lesson-container #rw-matching  .game-terms{
  grid-column:1; grid-row:2;
  display:flex; flex-direction:column; gap:.55rem;
  width:100%; margin:0; padding:0;
}
.lesson-container #hook-matcher .game-definitions,
.lesson-container #dlg-matching .game-definitions,
.lesson-container #rw-matching  .game-definitions{
  grid-column:2; grid-row:2;
  display:flex; flex-direction:column; gap:.55rem;
  width:100%; margin:0; padding:0;
}

/* 4) Cards: consistent pill style, no overlaps or floats */
.lesson-container #hook-matcher .game-item,
.lesson-container #dlg-matching .game-item,
.lesson-container #rw-matching  .game-item,
.lesson-container #hook-matcher .game-item.btn-reset,
.lesson-container #dlg-matching .game-item.btn-reset,
.lesson-container #rw-matching  .game-item.btn-reset{
  display:block !important;
  width:100% !important;
  box-sizing:border-box !important;
  padding:.7rem .9rem !important;
  line-height:1.38 !important;
  background:#fff !important;
  border:2px solid #e5e7eb !important;
  border-radius:.6rem !important;
  box-shadow:0 1px 2px rgba(0,0,0,.05) !important;
  cursor:pointer !important;
  transition:background .15s, border-color .15s, box-shadow .12s !important;
  white-space:normal !important;
  margin:0 !important;
  float:none !important; position:static !important;
}
.lesson-container #hook-matcher .game-item:hover,
.lesson-container #dlg-matching .game-item:hover,
.lesson-container #rw-matching  .game-item:hover{ background:#f9fafb !important; }
.lesson-container #hook-matcher .game-item.selected,
.lesson-container #dlg-matching .game-item.selected,
.lesson-container #rw-matching  .game-item.selected{
  outline:3px solid rgba(39,83,122,.25) !important;
  background:#f3f6fb !important; border-color:#cbd5e1 !important;
}
.lesson-container #hook-matcher .game-item.matched,
.lesson-container #dlg-matching .game-item.matched,
.lesson-container #rw-matching  .game-item.matched{
  background:#eef7e9 !important; border-color:#5cb85c !important; color:#0f5132 !important;
}
.lesson-container #hook-matcher .game-item.matched::after,
.lesson-container #dlg-matching .game-item.matched::after,
.lesson-container #rw-matching  .game-item.matched::after{ content:none !important; } /* avoid duplicate ✓ */

/* 5) Feedback line */
.lesson-container #hook-matcher .game-feedback,
.lesson-container #dlg-matching .game-feedback,
.lesson-container #rw-matching  .game-feedback{
  margin-top:.8rem; font-weight:700; text-align:center;
}

/* 6) Mobile: stack cleanly in one column, keep natural order */
@media (max-width:700px){
  .lesson-container #hook-matcher .columns,
  .lesson-container #dlg-matching .columns,
  .lesson-container #rw-matching  .columns{ grid-template-columns:1fr; }
  .lesson-container #hook-matcher .columns h4,
  .lesson-container #dlg-matching .columns h4,
  .lesson-container #rw-matching  .columns h4,
  .lesson-container #hook-matcher .columns .col-h,
  .lesson-container #dlg-matching .columns .col-h,
  .lesson-container #rw-matching  .columns .col-h,
  .lesson-container #hook-matcher .game-terms,
  .lesson-container #dlg-matching .game-terms,
  .lesson-container #rw-matching  .game-terms,
  .lesson-container #hook-matcher .game-definitions,
  .lesson-container #dlg-matching .game-definitions,
  .lesson-container #rw-matching  .game-definitions{
    grid-column:1 !important; grid-row:auto !important;
  }
}



/* Register Detective look & feel */
.rd-hot,
.rd-decoy {
  background: transparent;
  border: none;
  padding: 0 2px;
  border-radius: 4px;
  cursor: pointer;
  font: inherit;                 /* keep inline look */
}

/* Subtle affordance only on hover/focus */
.rd-hot:hover, .rd-hot:focus-visible,
.rd-decoy:hover, .rd-decoy:focus-visible {
  background: #fff7cc;           /* pale highlight */
  box-shadow: inset 0 0 0 2px #fde047;
}

/* Correctly clicked */
.rd-fixed {
  background: #ecfdf5;
  box-shadow: inset 0 0 0 2px #16a34a;
  color: #065f46;
}

/* Wrongly clicked (decoy) */
.rd-decoy-wrong {
  background: #fef2f2;
  box-shadow: inset 0 0 0 2px #ef4444;
  color: #991b1b;
}

/* MCQ slider: force 1-up view */
.b2-writing-lesson #rw-quiz .content-card { overflow: hidden; }       /* mask */
.b2-writing-lesson #rw-quiz-slider{
  display:flex;
  gap:0;                           /* no gaps between slides */
  will-change:transform;
}
.b2-writing-lesson #rw-quiz-slider .quiz-question{
  flex:0 0 100%;                   /* exactly one slide per viewport */
  max-width:100%;
  box-sizing:border-box;
  margin:0;                        /* prevent width creep */
}



/* Safe fallbacks for common utilities used by the essay app */
.hidden{display:none !important;}
.essay-tab{padding:.5rem .75rem;border:1px solid #e5e5e5;border-bottom:none;background:#fafafa;border-radius:.5rem .5rem 0 0;cursor:pointer;}
.essay-tab.tab-active{background:#fff;color:#172830;font-weight:700;border-color:#e5e5e5;}
.mission-card-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;}
.mission-card{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:1rem;border:1px solid #e5e5e5;border-radius:.75rem;box-shadow:0 1px 3px rgba(0,0,0,.06);cursor:pointer;transition:transform .08s ease;}
.mission-card:hover{transform:translateY(-1px);}
.mission-card .icon{font-size:1.75rem;}

// --- Global matching game polyfill (used by Article Writing too) ---
window.initMatchingGame = window.initMatchingGame || function (root, pairs) {
  if (!root || !Array.isArray(pairs)) return;
  const termsWrap = root.querySelector('.game-terms');
  const defsWrap  = root.querySelector('.game-definitions');
  const feedback  = root.querySelector('.game-feedback');
  if (!termsWrap || !defsWrap) return;

  const shuffle = (a)=>{ a=a.slice(); for(let i=a.length-1;i>0;i--){const j=(Math.random()*(i+1))|0; [a[i],a[j]]=[a[j],a[i]];} return a; };

  termsWrap.innerHTML = ''; defsWrap.innerHTML = ''; if (feedback) feedback.textContent='';
  const t = shuffle(pairs), d = shuffle(pairs);

  t.forEach(p=>{
    const b=document.createElement('button');
    b.type='button'; b.className='game-item term'; b.dataset.key=p.term; b.textContent=p.term;
    termsWrap.appendChild(b);
  });
  d.forEach(p=>{
    const b=document.createElement('button');
    b.type='button'; b.className='game-item def'; b.dataset.key=p.term; b.textContent=p.definition;
    defsWrap.appendChild(b);
  });

  let pickT=null, pickD=null;
  root.addEventListener('click', (e)=>{
    const term=e.target.closest('.term'), def=e.target.closest('.def');
    if (term && !term.classList.contains('matched')) {
      termsWrap.querySelectorAll('.term').forEach(x=>x.style.borderColor='transparent');
      term.style.borderColor='#3b82f6'; pickT=term;
    }
    if (def && !def.classList.contains('matched')) {
      defsWrap.querySelectorAll('.def').forEach(x=>x.style.borderColor='transparent');
      def.style.borderColor='#3b82f6'; pickD=def;
    }
    if (pickT && pickD) {
      const ok = pickT.dataset.key === pickD.dataset.key;
      if (ok){
        [pickT,pickD].forEach(x=>{ x.classList.add('matched'); x.style.borderColor='#596c10'; x.style.background='#c7c79d40'; });
        if (feedback){ feedback.textContent='Correct!'; feedback.style.color='#596c10'; }
      } else {
        if (feedback){ feedback.textContent='Try again!'; feedback.style.color='#b91c1c'; }
        setTimeout(()=>{ if(pickT) pickT.style.borderColor='transparent'; if(pickD) pickD.style.borderColor='transparent'; }, 650);
      }
      pickT=pickD=null;
      const done = root.querySelectorAll('.game-item.matched').length/2;
      if (feedback && done === pairs.length) feedback.textContent='You matched them all!';
    }
  });
};
/* ===========================================================
   Florentis MCQ Slider — Overlay / Fade Mode (2025)
   Replaces old translateX track model
   =========================================================== */

/* --- Frame: keep horizontal mask, allow vertical growth --- */
.lesson-container .quiz-frame {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  position: relative !important;
  display: block !important;
  height: auto !important;
  min-height: unset !important;
  isolation: isolate !important;
}

/* --- Slider: disable flex track (use overlay stacking) --- */
.lesson-container .quiz-slider {
  display: block !important;
  position: relative !important;
  overflow: visible !important;
  transform: none !important;
  transition: none !important;
}

/* Make sure the frame is a positioning context */
.lesson-container .quiz-frame{
  position: relative !important;
}

/* DEFAULT: visible (so you never end up with a blank quiz) */
.lesson-container .quiz-question{
  position: relative !important;
  width: 100% !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 1 !important;
  background: #fff !important;
  border-radius: 0.5rem !important;
}

/* If JS is hiding slides with opacity:0, THEN we overlay-hide them */
.lesson-container .quiz-question[style*="opacity: 0"],
.lesson-container .quiz-question[style*="opacity:0"]{
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  transition: opacity .25s ease !important;
}

/* If JS is explicitly showing opacity:1, keep it on top */
.lesson-container .quiz-question[style*="opacity: 1"],
.lesson-container .quiz-question[style*="opacity:1"]{
  position: relative !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 10 !important;
  transition: opacity .25s ease !important;
}

/* Options layout */
.lesson-container .quiz-question .options{
  display: flex !important;
  flex-direction: column !important;
  gap: 0.35rem !important;
  max-height: none !important;
  overflow-y: visible !important;
}

/* --- Option buttons --- */
/* Make each option look like a simple row */
.lesson-container .quiz-option{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  /* tighter, less "buttony" */
  padding: 0.55rem 0.75rem 0.55rem 2.1rem !important; /* left space for radio */
  background: transparent !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 0.5rem !important;
  box-shadow: none !important;
}

/* --- Feedback area --- */
.lesson-container .feedback {
  font-size: 1rem !important;
  margin-top: 0.6rem !important;
  color: #172830 !important;
}

/* --- Navigation buttons --- */
.lesson-container .quiz-prev,
.lesson-container .quiz-next {
  cursor: pointer !important;
  transition: opacity .2s ease;
}
.lesson-container .quiz-prev:disabled,
.lesson-container .quiz-next:disabled {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}

/* --- Hint button auto-hide --- */
.lesson-container .hint-btn:empty,
.lesson-container .hint-btn[style*="display:none"],
.lesson-container .hint-btn:where([data-has-hint="0"]) {
  display: none !important;
}

/* ===========================================================
   Temporary auto-height fix for fade-mode MCQ
   =========================================================== */
.lesson-container .quiz-frame {
  min-height: 220px !important;      /* ensures something to show */
}

/* Make the current visible question determine frame height */
.lesson-container .quiz-frame .quiz-question[style*="opacity: 1"] {
  position: relative !important;     /* take it out of absolute stacking */
}

/* Hide non-active slides again so they don’t stack vertically */
.lesson-container .quiz-frame .quiz-question[style*="opacity: 0"] {
  position: absolute !important;
}

/* ===========================================================
   Smooth Height Transition for Feedback Reveal
   =========================================================== */
.lesson-container .quiz-frame {
  transition: min-height 0.25s ease, height 0.25s ease;
}

/* Let the visible question animate its height when feedback expands */
.lesson-container .quiz-question[style*="opacity: 1"] {
  transition: opacity 0.25s ease, height 0.25s ease, margin 0.25s ease;
}

/* Optional: animate the feedback itself (fade-in) */
.lesson-container .feedback {
  transition: opacity 0.25s ease;
}
.lesson-container .feedback:not(:empty) {
  opacity: 1;
}
.lesson-container .feedback:empty {
  opacity: 0;
}

/* ===========================================================
   Florentis Hint Card — Matches FCE Activity Tip Styling
   =========================================================== */
.lesson-container .hint-text {
  display: none;
  background: #fffef9; /* soft cream background */
  border-left: 4px solid #f4d488; /* golden accent */
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 0.9rem 1rem;
  margin-top: 0.6rem;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
  font-size: 1rem;
  color: #172830;
  line-height: 1.6;
}

/* Hint title inside (optional icon) */
.lesson-container .hint-text::before {
  content: "💡 Hint";
  display: block;
  font-weight: 700;
  color: #596c10;
  margin-bottom: 0.25rem;
}

/* Hint button – cleaner look to match branding */
.lesson-container .hint-btn {
  background: #fff;
  border: 1px solid #dcdcdc;
  color: #27537a;
  border-radius: 6px;
  padding: 0.25rem 0.75rem;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lesson-container .hint-btn:hover {
  background: #f4f7fa;
  border-color: #cfd8e3;
}

.option-feedback {
  color: #172830;
  line-height: 1.4;
  background: #f9fafb;
  border-left: 3px solid #f4d488;
  padding: .35rem .6rem;
  border-radius: .4rem;
}


/* ===== Universal: brand tokens on any writing lesson ===== */
.lesson-container{ --c1:#27537a; --c2:#596c10; --ink:#172830; --muted:#6b7280 }

/* ===== Universal button polish (match Article v3.1) ===== */
.lesson-container .btn{
  background:var(--c1); color:#fff; border:0;
  padding:.6rem 1rem; border-radius:.75rem; font-weight:700;
  box-shadow:0 1px 2px rgba(0,0,0,.06); transition:filter .15s, opacity .15s;
  cursor:pointer;
}
.lesson-container .btn:hover{ filter:brightness(1.05) }
.lesson-container .btn[disabled]{ background:#9bb7ca; color:#fff; opacity:.7; cursor:not-allowed }

/* ===== Universal matching game polish (Article-quality) ===== */
/* target all three lesson types safely */
.article-writing-lesson #hook-matcher .columns,
.dialogue-writing-lesson #dlg-matching .columns,
.b2-writing-lesson   #rw-matching    .columns{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:1rem; background:#fff; border:1px solid #e5e7eb;
  border-radius:.75rem; padding:1rem; box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.article-writing-lesson #hook-matcher .columns>*,
.dialogue-writing-lesson #dlg-matching .columns>*,
.b2-writing-lesson   #rw-matching    .columns>*{ min-width:0 }

.article-writing-lesson #hook-matcher .columns h4,
.dialogue-writing-lesson #dlg-matching .columns h4,
.b2-writing-lesson   #rw-matching    .columns h4{
  text-align:center; color:var(--muted); font-weight:800; margin:0 0 .5rem;
}

/* pill-style items unified */
.article-writing-lesson #hook-matcher .game-item,
.dialogue-writing-lesson #dlg-matching .game-item,
.b2-writing-lesson   #rw-matching    .game-item{
  display:block; width:100%; box-sizing:border-box;
  padding:.7rem .9rem; border-radius:.6rem; line-height:1.4;
  background:#fff; border:2px solid #e5e7eb; cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:background .15s, border-color .15s, box-shadow .12s, transform .08s;
  white-space:normal; margin:0;
}
.article-writing-lesson #hook-matcher .game-item:hover,
.dialogue-writing-lesson #dlg-matching .game-item:hover,
.b2-writing-lesson   #rw-matching    .game-item:hover{
  background:#f9fafb; box-shadow:0 3px 10px rgba(0,0,0,.10); transform:translateY(-1px);
}
.article-writing-lesson #hook-matcher .game-item.selected,
.dialogue-writing-lesson #dlg-matching .game-item.selected,
.b2-writing-lesson   #rw-matching    .game-item.selected{
  outline:3px solid rgba(39,83,122,.25); background:#f3f6fb; border-color:#cbd5e1;
}
.article-writing-lesson #hook-matcher .game-item.matched,
.dialogue-writing-lesson #dlg-matching .game-item.matched,
.b2-writing-lesson   #rw-matching    .game-item.matched{
  background:#eef7e9; border-color:#5cb85c; color:#0f5132; position:relative;
}
.article-writing-lesson #hook-matcher .game-item.matched::after,
.dialogue-writing-lesson #dlg-matching .game-item.matched::after,
.b2-writing-lesson   #rw-matching    .game-item.matched::after{
  content:"✓"; position:absolute; right:.6rem; top:.45rem; color:#596c10; font-weight:900;
}

/* feedback line */
.article-writing-lesson #hook-matcher .game-feedback,
.dialogue-writing-lesson #dlg-matching .game-feedback,
.b2-writing-lesson   #rw-matching    .game-feedback{
  margin-top:.75rem; font-weight:800; text-align:center; color:#596c10;
}

/* Venn layout */
.lesson-container .venn-wrap{ padding:1rem; }
.lesson-container .venn-diagram{
  position:relative; max-width:760px; height:360px; margin:0 auto 12px;
}

/* topic badges */
.lesson-container .venn-topic{
  position:absolute; top:-18px; font-weight:800; color:#0f2636; white-space:nowrap;
}
.lesson-container .venn-topic-left{  left:6%;  }
.lesson-container .venn-topic-right{ right:6%; text-align:right; }

/* zones */
.lesson-container .venn-zone{
  position:absolute; top:8%; height:78%;
  border:2px dashed #cbd5e1; border-radius:50%;
  background:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:12px; gap:8px;
}
.lesson-container .venn-left { left:2%;  width:54%; background:rgba(147,197,253,.12); }
.lesson-container .venn-right{ right:2%; width:54%; background:rgba(134,239,172,.12); }
.lesson-container .venn-both {
  left:26%; width:48%; z-index:3; border-style:solid; background:rgba(253,224,71,.12);
}
.lesson-container .venn-zone.over{ box-shadow:0 0 0 3px rgba(39,83,122,.18) inset; }

.lesson-container .venn-list{
  display:flex; flex-wrap:wrap; gap:.5rem; align-content:flex-start; justify-content:center; width:100%;
}
.lesson-container .venn-caption{
  margin-top:auto; text-align:center; line-height:1.1;
}
.lesson-container .venn-caption span{ font-weight:800; color:#0f2636; display:block; }
.lesson-container .venn-caption small{ color:#334155; opacity:.8; }

/* Pool + chips */
.lesson-container .venn-pool{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem; }
.lesson-container .venn-pool::before{
  content:"Drag these into the diagram:"; width:100%; font-weight:700; color:#374151; margin-bottom:.25rem;
}
.lesson-container .drag-item{
  display:block; padding:.55rem .8rem; border-radius:.6rem;
  background:#fff; border:2px solid #e5e7eb; cursor:grab;
  box-shadow:0 1px 2px rgba(0,0,0,.05); white-space:normal;
  transition:background .15s, border-color .15s, transform .06s;
}
.lesson-container .drag-item.dragging{ opacity:.6; }
.lesson-container .drag-item.selected{ outline:3px solid rgba(39,83,122,.25); }
.lesson-container .drag-item.correct{ background:#eef7e9; border-color:#16a34a; color:#166534; }
.lesson-container .drag-item.wrong{   background:#fef2f2; border-color:#ef4444; color:#991b1b; }

.lesson-container .venn-actions{ display:flex; align-items:center; gap:.5rem; margin-top:.75rem; }

/* Mobile */
@media (max-width:700px){
  .lesson-container .venn-diagram{ height:auto; }
  .lesson-container .venn-topic{ position:static; display:inline-block; margin:0 8px 6px 8px; }
  .lesson-container .venn-zone{ position:static; width:100%; height:auto; border-radius:.75rem; }
  .lesson-container .venn-both{ order:2; }
  .lesson-container .venn-left{ order:1; }
  .lesson-container .venn-right{ order:3; }
}



/* ================= Florentis – Quiz/MCQ Slider (Consolidated) ================= */
:root{
  --fl-ink:#172830;          /* brand dark */
  --fl-accent:#f4d488;       /* brand yellow */
  --fl-soft:#fbf6e6;         /* quiet cream for prompts */
  --fl-border:#ececec;       /* light border */
}

/* Frame & slider layout (strict 1-up; no “edge” peek) */
.lesson-container .quiz-frame{
  overflow:hidden;
  border-radius:.875rem;
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.lesson-container #aw-quiz-slider,
.lesson-container #rw-quiz-slider,
.lesson-container .quiz-slider{
  display:flex;
  gap:0;
  transition:transform .32s ease-in-out;
  will-change:transform;
  overflow:hidden !important;               /* belt + suspenders */
}
.lesson-container #aw-quiz-slider .quiz-question,
.lesson-container #rw-quiz-slider .quiz-question,
.lesson-container .quiz-slider .quiz-question{
  flex:0 0 100% !important;
  max-width:100% !important;
  min-width:100% !important;
  box-sizing:border-box;
  margin:0 !important;
  padding:clamp(12px,1.2vw,16px);          /* compact universal padding */
}
@media (min-width:768px){
  .lesson-container #aw-quiz-slider .quiz-question,
  .lesson-container #rw-quiz-slider .quiz-question,
  .lesson-container .quiz-slider .quiz-question{
    padding:clamp(14px,1.2vw,18px);
  }
}

/* Prompt (soft hierarchy by default) */
.lesson-container .quiz-question .prompt{
  font-weight:700;                          /* calm, not shouty */
  font-size:clamp(1rem,0.9vw + 0.9rem,1.25rem);
  line-height:1.25;
  color:var(--fl-ink);
  background:var(--fl-soft);
  border-left:4px solid var(--fl-accent);
  padding:8px 12px;
  border-radius:8px;
  margin:2px 0 10px 0;
  box-shadow:none;
}

/* Optional prompt variants */
.lesson-container .quiz-question .prompt--tag{   /* ultra-subtle chip */
  background:transparent; border-left:0; padding:0;
}
.lesson-container .quiz-question .prompt--tag::before{
  content:attr(data-label);
  display:inline-block;
  background:var(--fl-soft);
  border-radius:12px;
  padding:6px 10px;
  box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--fl-accent) 25%, transparent);
}
.lesson-container .quiz-question .prompt--loud{   /* use only when needed */
  font-weight:800;
  font-size:clamp(1.05rem,1.1vw + .85rem,1.4rem);
  border-left-width:6px;
  border-radius:10px;
  padding:10px 12px 10px 14px;
}

/* Options grid + buttons */
.lesson-container .quiz-question .space-y-2{
  display:grid;
  gap:4px;              /* was 10px */
  margin:4px 0 0 0;     /* was 8px */
}

.lesson-container .quiz-option,
.lesson-container .mcq-opt{
  position: relative;
  display: flex;
  align-items: center;

  padding: .35rem .6rem .35rem 1.8rem !important;   /* left space for radio */
  font-size: 1rem;
  line-height: 1.2;

  border-radius: 10px;
  border: 1px solid var(--fl-border);             /* was 2px */
  background: transparent;                          /* removes button-fill look */
  text-align: left;

  box-shadow: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.lesson-container .quiz-option::before,
.lesson-container .mcq-opt::before{
  content:"";
  position:absolute;
  left:.75rem;
  top:50%;
  transform:translateY(-50%);
  width:14px;
  height:14px;
  border-radius:999px;
  border:2px solid #9ca3af;
  background:#fff;
}


.lesson-container .quiz-option:hover{ border-color:#d8d8d8; }
.lesson-container .quiz-option.picked[data-correct="true"],
.lesson-container .quiz-option.bg-green-100{ box-shadow:0 0 0 3px rgba(34,197,94,.18); }
.lesson-container .quiz-option.bg-red-100{  box-shadow:0 0 0 3px rgba(239,68,68,.16); }
.lesson-container .quiz-option.picked::before,
.lesson-container .mcq-opt.picked::before{
  border-color:#27537a;
  background: radial-gradient(circle, #27537a 0 45%, #fff 46% 100%);
}
.lesson-container .quiz-option.picked[data-correct="true"]::before,
.lesson-container .quiz-option.bg-green-100::before{ border-color: rgb(34,197,94); }

.lesson-container .quiz-option.bg-red-100::before{ border-color: rgb(239,68,68); }



/* Nav buttons + counter */
.lesson-container .btn{
  padding:.5rem .9rem !important;
  font-size:.95rem;
  border-radius:12px;
}
.lesson-container .quiz-counter{ color:#374151; font-weight:700; }

/* Mobile micro-tweaks */
@media (max-width:640px){
  .lesson-container .quiz-question .prompt{ padding:9px 10px 9px 12px; }
  .lesson-container #aw-quiz-slider .quiz-question,
  .lesson-container #rw-quiz-slider .quiz-question,
  .lesson-container .quiz-slider .quiz-question{ padding:12px !important; }
}

/* Ensure slides never become grid/inline by accident */
.lesson-container .quiz-slider .quiz-question { display:block; }

/* The track is the strip we translate; frame hides overflow */
.lesson-container .quiz-slider .quiz-question { display:block; } /* guard against hidden/grid */

/* The TRACK is the strip we translate; slides are full-width cells */
.lesson-container .quiz-track { display:flex; gap:0; }
.lesson-container .quiz-track .quiz-question{
  display:block; flex:0 0 100%; max-width:100%; min-width:100%; margin:0;
}


/* Universal cloze / fill-blanks polish */
.fb-bank{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.5rem; }
.fb-chip{
  background:#fff; border:1px solid #cbd5e1; border-radius:.45rem;
  padding:.35rem .6rem; cursor:pointer; font-weight:600;
}
.fb-chip:hover{ background:#f9fafb; }
.signal-input{
  display:inline-block; min-width:10ch; padding:.35rem .5rem; margin:0 .25rem;
  border:1px solid #e5e7eb; border-radius:.5rem; outline:none;
}
.signal-input:focus{ box-shadow:0 0 0 3px rgba(39,83,122,.18); border-color:#9bb7ca; }



/* ===== Spinner Wheel UI ===== */
.b2-writing-lesson .sd-wrap{ padding:1rem 1.25rem; }
.b2-writing-lesson .sd-wheel-area{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  margin: .5rem 0 1rem;
}
.b2-writing-lesson .sd-wheel{
  width:min(320px, 90vw);
  height:min(320px, 90vw);
  border-radius:50%;
  display:grid; place-items:center;
  transform:rotate(0deg);
}
.b2-writing-lesson .sd-wheel-svg{ width:100%; height:100%; }

.b2-writing-lesson .sd-pointer{
  position:absolute; top:-10px; /* above the wheel */
  width:0; height:0;
  border-left:12px solid transparent;
  border-right:12px solid transparent;
  border-bottom:18px solid #27537a;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.2));
}

/* labels inside the wheel */
.b2-writing-lesson .sd-label{
  font-size:12px; font-weight:700; fill:#0f2636;
  pointer-events:none; user-select:none;
}

/* active slice emphasis */
.b2-writing-lesson .sd-slice.active{
  stroke:#27537a; stroke-width:3;
  filter:brightness(0.98);
}

/* Controls + chips + inputs re-use your button styles */
.b2-writing-lesson .spin-btn,
.b2-writing-lesson .add-ideas{
  background:#27537a; color:#fff; border:none; border-radius:.6rem;
  padding:.55rem .9rem; font-weight:700; cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  transition:filter .15s ease, transform .05s ease-in-out;
}
.b2-writing-lesson .spin-btn:hover,
.b2-writing-lesson .add-ideas:hover{ filter:brightness(0.95); }
.b2-writing-lesson .spin-btn:active,
.b2-writing-lesson .add-ideas:active{ transform:translateY(1px); }

.b2-writing-lesson .sd-controls{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
}
.b2-writing-lesson .spin-readout{
  background:#e6eef7; border:1px solid #cdd8e6; color:#0f2636;
  padding:.35rem .7rem; border-radius:9999px; font-weight:700;
}

.b2-writing-lesson .spin-form .grid{ display:grid; gap:.5rem; grid-template-columns:1fr; }
@media (min-width:700px){
  .b2-writing-lesson .spin-form .grid{ grid-template-columns:repeat(3,1fr); }
}
.b2-writing-lesson .sd-in{
  padding:.55rem .6rem; border:1.5px solid #d1d5db; border-radius:.5rem; background:#fff;
}
.b2-writing-lesson .sd-in:focus{
  outline:none; border-color:#27537a; box-shadow:0 0 0 2px rgba(39,83,122,.15);
}
.b2-writing-lesson .sd-results{ display:flex; flex-wrap:wrap; gap:.5rem; }
.b2-writing-lesson .sd-results .inline-block{
  background:#fff; border:1px solid #e5e7eb; border-radius:9999px; padding:.25rem .6rem;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

/* Motion preference: no spin animation */
@media (prefers-reduced-motion: reduce){
  .b2-writing-lesson .sd-wheel{ transition:none !important; }
}

/* === Florentis MCQ visibility override for Compare-Contrast === */
.compare-contrast-lesson .quiz-frame {
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

.compare-contrast-lesson .quiz-question {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
}

.compare-contrast-lesson .quiz-question[style*="opacity: 1"] {
  z-index: 999 !important; /* make the visible slide sit on top */
}

/* ===========================================================================
   Writing Lesson Slide Layout
   Strategy: custom layout class fl-writing-slide-active applied by JS.
   No dependency on fl-kids-full-card — we own the layout entirely.
=========================================================================== */

/* The window becomes a full-width classroom: bg image fills it entirely */
.fl-placement-demo[class*="fl-writing-"].fl-writing-activity .fl-placement-window {
  display: block;
  position: relative;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Scene is hidden on activity slides — bg on the window IS the scene */
.fl-placement-demo[class*="fl-writing-"].fl-writing-activity .fl-placement-scene {
  display: none;
}

/* Sidebar becomes a full-width overlay centred on the window */
.fl-placement-demo[class*="fl-writing-"].fl-writing-activity .fl-placement-sidebar {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  box-sizing: border-box;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* The activity card: white, centred, max-width, no scrollbar by default */
.fl-placement-demo[class*="fl-writing-"].fl-writing-activity .fl-kids-question {
  width: 100%;
  max-width: 760px;
  background: #fff;
  border-radius: 1.25rem;
  box-shadow: 0 6px 32px rgba(0,0,0,.18);
  overflow: visible;
  max-height: none;
  flex: none;
}

/* Cover slide: keep split layout, just centre the card vertically */
.fl-placement-demo[class*="fl-writing-"]:not(.fl-writing-activity) .fl-placement-sidebar {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.fl-placement-demo[class*="fl-writing-"]:not(.fl-writing-activity) .fl-kids-question {
  background: rgba(255,255,255,.96);
  border-radius: 1.25rem;
  box-shadow: 0 6px 32px rgba(0,0,0,.14);
}

/* ===========================================================================
   Writing Lesson Split-Panel Layout  (fl-writing-split)
   2/3 image on left (scene), 1/3 activity card on right (sidebar).
   No classroom bg. Works like the kids/speaking lesson cover layout
   but the scene bg is set inline by the renderer (not a WordPress bg image).
=========================================================================== */

/* Window: normal flex row (scene left | sidebar right) */
.fl-placement-demo[class*="fl-writing-"].fl-writing-split .fl-placement-window {
  display: flex;
  align-items: stretch;
  background: none !important;
}

/* Scene: takes 62% of width, shows the image/video */
.fl-placement-demo[class*="fl-writing-"].fl-writing-split .fl-placement-scene {
  display: block !important;
  flex: 0 0 62%;
  max-width: 62%;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Video wrapper inside scene */
.fl-ws-scene-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.fl-ws-scene-video iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Thumbnail strip at the bottom of the scene */
.fl-ws-scene-thumbs {
  position: absolute;
  bottom: .6rem;
  left: .6rem;
  right: .6rem;
  display: flex;
  gap: .4rem;
  z-index: 2;
}
.fl-ws-scene-thumb {
  width: 64px;
  height: 48px;
  border-radius: .4rem;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: .75;
  transition: opacity .15s, border-color .15s;
}
.fl-ws-scene-thumb:hover,
.fl-ws-scene-thumb.active { opacity: 1; border-color: #fff; }

/* Sidebar: takes the remaining 38%, scrollable content */
.fl-placement-demo[class*="fl-writing-"].fl-writing-split .fl-placement-sidebar {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(248,246,243,.96) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 1.25rem 1.1rem;
  box-sizing: border-box;
  overflow-y: auto;
  max-height: 100%;
}

/* Activity card inside sidebar: no extra boxing — sidebar IS the card */
.fl-placement-demo[class*="fl-writing-"].fl-writing-split .fl-kids-question {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Text in split panel: no full-justify */
.fl-placement-demo[class*="fl-writing-"].fl-writing-split .fl-ws h2,
.fl-placement-demo[class*="fl-writing-"].fl-writing-split .fl-ws p,
.fl-placement-demo[class*="fl-writing-"].fl-writing-split .fl-ws label,
.fl-placement-demo[class*="fl-writing-"].fl-writing-activity .fl-ws label {
  text-align: left !important;
}

/* Prevent full-justify on form labels and input captions in all writing slides */
.fl-placement-demo[class*="fl-writing-"] .fl-ws label,
.fl-placement-demo[class*="fl-writing-"] .fl-ws th,
.fl-placement-demo[class*="fl-writing-"] .fl-ws td,
.fl-placement-demo[class*="fl-writing-"] .fl-ws select,
.fl-placement-demo[class*="fl-writing-"] .fl-ws option {
  text-align: left !important;
}

/* ===========================================================================
   Writing Lesson Cover Slide  (fl-writing-cover-active)
   Dark branded card on the right 1/3, cover image fills the left 2/3.
=========================================================================== */
.fl-placement-demo[class*="fl-writing-"].fl-writing-cover-active .fl-placement-sidebar {
  background: linear-gradient(160deg, #0f2636 0%, #172830 60%, #1a3a2a 100%) !important;
  justify-content: center !important;
  padding: 2rem 1.75rem !important;
  box-shadow: none !important;
  border: none !important;
}

.fl-placement-demo[class*="fl-writing-"].fl-writing-cover-active .fl-kids-question {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ===========================================================================
   Split-panel rounded corners
   Outer corners of the window are rounded; the internal join (image-right /
   sidebar-left edges) is square so there's no gap or overlap.
=========================================================================== */

/* The window wrapper gets the overall rounding */
.fl-placement-demo[class*="fl-writing-"].fl-writing-split .fl-placement-window {
  border-radius: .85rem;
  overflow: hidden;
}

/* Scene (left panel): round top-left and bottom-left only */
.fl-placement-demo[class*="fl-writing-"].fl-writing-split .fl-placement-scene {
  border-radius: .85rem 0 0 .85rem;
  overflow: hidden;
}

/* Sidebar (right panel): round top-right and bottom-right only */
.fl-placement-demo[class*="fl-writing-"].fl-writing-split .fl-placement-sidebar {
  border-radius: 0 .85rem .85rem 0 !important;
  overflow: hidden;
}

/* Same treatment for the cover slide */
.fl-placement-demo[class*="fl-writing-"].fl-writing-cover-active .fl-placement-window {
  border-radius: .85rem;
  overflow: hidden;
}

.fl-placement-demo[class*="fl-writing-"].fl-writing-cover-active .fl-placement-scene {
  border-radius: .85rem 0 0 .85rem;
  overflow: hidden;
}

.fl-placement-demo[class*="fl-writing-"].fl-writing-cover-active .fl-placement-sidebar {
  border-radius: 0 .85rem .85rem 0 !important;
}

/* ===========================================================================
   Writing Lesson — Rounded outer corners
   Applied to fl-placement-window so both children (scene + sidebar) are
   clipped together. The shared inner edge stays sharp automatically.
   Works for split-panel slides, classroom-bg slides, and the cover.
=========================================================================== */
.fl-placement-demo[class*="fl-writing-"] .fl-placement-window {
  border-radius: 1rem;
  overflow: hidden;
}

/* ===========================================================================
   Global text-align fix for writing lesson activity cards
   Prevents theme/LMS text-align:justify from bleeding into activity UI.
   Applies to all writing lessons regardless of layout mode.
=========================================================================== */
.fl-placement-demo[class*="fl-writing-"] .fl-ws,
.fl-placement-demo[class*="fl-writing-"] .fl-ws *,
.fl-placement-demo[class*="fl-writing-"] .fl-kids-question,
.fl-placement-demo[class*="fl-writing-"] .fl-kids-question * {
  text-align: left;
}

/* Re-allow centred elements that should remain centred */
.fl-placement-demo[class*="fl-writing-"] .fl-ws h2,
.fl-placement-demo[class*="fl-writing-"] .fl-ws-cover-title,
.fl-placement-demo[class*="fl-writing-"] .fl-ws-concept-title {
  text-align: left;
}

/* ===========================================================================
   Write + Check slide layout  (fl-write-check-active)
   Full-width card: overrides fl-writing-activity max-width so the
   two-column write/checklist grid fills the available space.
=========================================================================== */
.fl-placement-demo[class*="fl-writing-"].fl-write-check-active .fl-kids-question {
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box;
}

.fl-placement-demo[class*="fl-writing-"].fl-write-check-active .fl-placement-sidebar {
  align-items: stretch;
  padding: 1rem 1.25rem;
}

/* The two-column grid inside the card */
.fl-wc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 380px;
  max-height: 520px;
  width: 100%;
}

.fl-wc-left {
  padding: 1rem 1rem 1rem 1.1rem;
  overflow-y: auto;
  background: rgba(255,255,255,.95);
  border-right: 1px solid rgba(0,0,0,.1);
  border-radius: .6rem 0 0 .6rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.fl-wc-right {
  padding: 1rem 1.1rem 1rem 1rem;
  overflow-y: auto;
  background: rgba(249,250,251,.95);
  border-radius: 0 .6rem .6rem 0;
  display: flex;
  flex-direction: column;
}

.fl-wc-textarea {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid #e5e7eb;
  border-radius: .45rem;
  font-size: .87rem;
  font-family: inherit;
  padding: .5rem .65rem;
  resize: none;
  background: #fff;
  min-height: 180px;
  line-height: 1.55;
}
.fl-wc-textarea:focus { outline: none; border-color: #27537a; box-shadow: 0 0 0 3px rgba(39,83,122,.12); }

.fl-wc-toggle {
  padding: .42rem .9rem;
  background: #596c10;
  color: #fff;
  border: none;
  border-radius: .45rem;
  font-weight: 700;
  font-size: .85rem;
  cursor: pointer;
  margin-bottom: .6rem;
  align-self: flex-start;
}
.fl-wc-toggle:hover { background: #4a5c0d; }

.fl-wc-bar {
  height: 6px;
  border-radius: 3px;
  background: #e5e7eb;
  overflow: hidden;
  margin-top: .4rem;
}
.fl-wc-fill {
  height: 100%;
  background: #596c10;
  border-radius: 3px;
  width: 0;
  transition: width .3s;
}
.fl-wc-count {
  font-size: .78rem;
  color: #6b7280;
  margin-top: .2rem;
}
.fl-wc-win {
  margin-top: .45rem;
  padding: .5rem .75rem;
  background: #d1fae5;
  border: 1px solid #6ee7b7;
  border-radius: .45rem;
  font-weight: 700;
  color: #065f46;
  font-size: .84rem;
}