/**
 * css/grammar-lessons.css — page-specific styles for grammar-lessons.html
 * (M100, redesigned in M510: photo card grid, learn/practice steps, diagrams,
 * XP / combo / stars layer). Base layout classes (.page-header/.tool-body/
 * .pills/.pill) mirror css/sentence-combining.css's own copies, this app's
 * per-page convention, so one page's spacing never ripples into another's.
 * Colors come from shared.css tokens only, so every theme and admin brand works.
 */
.page-header h1{font-family:var(--font-display);font-size:1.6rem;display:flex;align-items:center;gap:.5rem}
.page-header p{color:var(--text-muted);font-size:.88rem;margin-top:.3rem}
.tool-body{max-width:1020px; }

.filter-label{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);margin-bottom:.5rem}
.empty-note{color:var(--text-muted);text-align:center;padding:2rem 0}

/* ── Player strip: rank, XP, daily goal, streak ───────────────────────── */
.gx-strip{display:grid;grid-template-columns:auto 1fr auto auto;gap:1rem;align-items:center;padding:1rem 1.2rem;margin-bottom:1.1rem;}
.gx-ring{--p:0;width:64px;height:64px;border-radius:50%;background:conic-gradient(var(--green) calc(var(--p)*1%),var(--surface-2) 0);display:grid;place-items:center;position:relative}
.gx-ring::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--surface)}
.gx-ring span{position:relative;font-size:.74rem;font-weight:700;color:var(--text);text-align:center;line-height:1.1}
.gx-rank{min-width:0}
.gx-rank-name{font-family:var(--font-display);font-size:1.15rem;color:var(--text)}
.gx-rank-sub{font-size:.76rem;color:var(--text-muted);margin:.1rem 0 .45rem}
.gx-bar{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.gx-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--purple),var(--teal));transition:width .5s}
.gx-stat{text-align:center;min-width:64px}
.gx-stat b{display:block;font-size:1.25rem;color:var(--text);font-variant-numeric:tabular-nums}
.gx-stat small{font-size:.68rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em}
.gx-strip[hidden],.gx-badges[hidden]{display:none}
.gx-badges{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.1rem}
.gx-badge.on{border-color:var(--accent);color:var(--accent-text);background:var(--accent-soft)}
.gx-badge:not(.on){border-style:dashed;filter:grayscale(1)} /* was opacity:.55 — locked badges read at 2.3:1 */

.filter-row{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin-bottom:1.1rem}
.filter-group{min-width:0}

/* ── Lesson card grid ─────────────────────────────────────────────────── */
.lesson-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}
.lesson-item{display:flex;flex-direction:column;text-align:left;padding:0;overflow:hidden;cursor:pointer;transition:border-color .15s,transform .15s;min-width:0;}
.lesson-item:hover{border-color:var(--purple);transform:translateY(-2px)}
.li-photo{position:relative;aspect-ratio:16/9;background:var(--surface-2);overflow:hidden}
.li-photo img{width:100%;height:100%;object-fit:cover;display:block}
.li-photo.ph{display:grid;place-items:center;font-family:var(--font-display);font-size:2.4rem;color:var(--text);background:linear-gradient(135deg,var(--lv,var(--purple-soft)),var(--surface-2))}
.li-level{position:absolute;top:.5rem;left:.5rem;font-size:.7rem;font-weight:800;letter-spacing:.04em;padding:.15rem .5rem;border-radius:99px;background:var(--surface);color:var(--text);border:1px solid var(--border)}
.lv-head{grid-column:1 / -1;margin:.6rem 0 0;font-family:var(--font-display);font-size:1.2rem;display:flex;align-items:baseline;gap:.6rem}
.lv-head small{font-family:var(--font-body);font-size:.75rem;font-weight:500;color:var(--text-muted)}
.li-body{display:flex;flex-direction:column;gap:.25rem;padding:.8rem 1rem 1rem;flex:1}
.lesson-item-topic{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--purple)}
.lesson-item-title{font-family:var(--font-display);font-size:1.02rem;color:var(--text);line-height:1.25}
.li-hook{font-size:.78rem;color:var(--text-muted);line-height:1.4}
.lesson-item-count{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:.5rem;font-size:.74rem;color:var(--text-dim)}
.stars{letter-spacing:.1em;color:var(--border)}
.stars .on{color:var(--accent-text)}

/* ── Lesson detail ────────────────────────────────────────────────────── */
.back-btn{background:none;border:none;color:var(--text-muted);font-size:.85rem;cursor:pointer;padding:.4rem 0;margin-bottom:.75rem}
.back-btn:hover{color:var(--text)}
.lesson-detail{max-width:760px;margin:0 auto}

.hero{position:relative;border-radius:var(--radius-lg);overflow:hidden;margin-bottom:1rem;background:var(--surface-2);min-height:120px}
.hero img{display:block;width:100%;max-height:260px;object-fit:cover}
.hero-credit{position:absolute;right:.5rem;bottom:.4rem;font-size:.66rem;padding:.1rem .45rem;border-radius:99px;background:var(--surface);color:var(--text-muted)}
.hero-credit a{color:inherit}

.lesson-card{padding:1.5rem;margin-bottom:1.25rem;}
.lesson-topic{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--purple)}
.lesson-title-row{display:flex;align-items:center;gap:.6rem;margin:.3rem 0 .8rem}
.lesson-card h2{font-family:var(--font-display);font-size:1.45rem;color:var(--text);margin:0}
.hook{background:var(--accent-soft);border-left:3px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;padding:.65rem .9rem;margin-bottom:1rem;font-size:.9rem;color:var(--text)}
.hook b{color:var(--accent-text)}

.lang-toggle{display:inline-flex;border:1px solid var(--border);border-radius:99px;overflow:hidden;margin-bottom:.9rem}
.lang-toggle button{background:none;border:none;color:var(--text-muted);font-size:.78rem;font-weight:600;padding:.3rem .9rem;cursor:pointer}
.lang-toggle button.active{background:var(--purple-soft);color:var(--purple)}

.lesson-explanation{color:var(--text);font-size:.95rem;line-height:1.7}
.lesson-explanation p{margin-bottom:.9rem;max-width:68ch}
.lesson-explanation p:last-child{margin-bottom:0}
.lesson-explanation strong{color:var(--purple)}
.lesson-explanation em{color:var(--teal-text);font-style:normal}

.sec-title{font-size:.78rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.7rem}
.sec{margin-top:1.2rem;border-top:1px solid var(--border);padding-top:1rem}

/* ── Diagrams: decision flow, timeline, columns (inline HTML) ─────────── */
.dg{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem}
.dg-title{font-family:var(--font-display);font-size:1rem;color:var(--text);margin-bottom:.8rem}
.dg-start,.dg-end{display:block;width:fit-content;max-width:100%;padding:.45rem .9rem;border-radius:99px;font-size:.85rem;font-weight:700}
.dg-start{background:var(--purple-soft);color:var(--purple)}
.dg-end{background:var(--green-soft);color:var(--green)}
.dg-arrow{width:2px;height:14px;background:var(--border);margin:0 0 0 1.4rem}
.dg-step{display:grid;grid-template-columns:1fr auto;gap:.6rem;align-items:center;padding:.6rem .8rem}
.dg-ask{font-size:.88rem;color:var(--text);min-width:0}
.dg-yes{font-size:.8rem;font-weight:700;color:var(--green);background:var(--green-soft);padding:.25rem .65rem;border-radius:99px;white-space:nowrap}
.dg-no{grid-column:1/-1;font-size:.74rem;color:var(--text-dim)}
.dg-no b{color:var(--red)}
.dg-tl{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem;padding-top:.6rem}
.dg-tl::before{content:"";position:absolute;left:0;right:0;top:1rem;height:2px;background:var(--border)}
.dg-pt{position:relative;padding-top:1.4rem;min-width:0}
.dg-pt::before{content:"";position:absolute;top:.3rem;left:.2rem;width:.9rem;height:.9rem;border-radius:50%;background:var(--purple);border:3px solid var(--surface-2)}
.dg-pt b{display:block;font-family:var(--font-display);color:var(--purple);font-size:1rem}
.dg-pt span{display:block;font-size:.78rem;color:var(--text-muted);margin:.15rem 0 .3rem}
.dg-pt em{display:block;font-style:normal;font-size:.8rem;color:var(--text);font-weight:600}
.dg-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.7rem}
.dg-col{border-top:3px solid var(--c,var(--purple));padding:.7rem .85rem;min-width:0}
.dg-col:nth-child(2){--c:var(--teal)}
.dg-col:nth-child(3){--c:var(--accent)}
.dg-col h4{font-family:var(--font-display);font-size:1.05rem;color:var(--text);margin:0}
.dg-col small{display:block;font-size:.72rem;color:var(--text-muted);margin:.1rem 0 .5rem}
.dg-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.3rem}
.dg-col li{font-size:.84rem;color:var(--text);border-bottom:1px dashed var(--border);padding-bottom:.25rem}
.dg-col li:last-child{border-bottom:0}

/* Comparison table */
.lesson-table-caption{font-size:.78rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.6rem}
.lesson-table-scroll{overflow-x:auto}
.lesson-table{width:100%;min-width:420px;border-collapse:collapse;font-size:.88rem}
.lesson-table th,.lesson-table td{padding:.55rem .7rem;text-align:left;border:1px solid var(--border)}
.lesson-table th{background:var(--surface-2);color:var(--text-dim);font-size:.75rem;text-transform:uppercase;letter-spacing:.04em}
.lesson-table td:first-child{color:var(--text-muted);font-weight:600}
.lesson-table td:not(:first-child){color:var(--purple);font-weight:700;font-family:var(--font-display)}

.lesson-examples{display:flex;flex-direction:column;gap:.5rem}
.example-row{display:flex;align-items:center;gap:.6rem;font-size:.85rem;flex-wrap:wrap}
.example-fr{color:var(--text);font-weight:600;min-width:0;flex:1 1 220px}
.example-en{color:var(--text-muted);flex:1 1 200px;text-align:right}

.pitfall-item{background:var(--surface-2);border-left:3px solid var(--red);border-radius:0 var(--radius) var(--radius) 0;padding:.75rem .9rem;margin-bottom:.6rem;font-size:.85rem}
.pitfall-item:last-child{margin-bottom:0}
.pitfall-mistake{color:var(--red);font-weight:600;margin-bottom:.3rem}
.pitfall-why{color:var(--text-muted);margin-bottom:.4rem;line-height:1.5}
.pitfall-fix{color:var(--green);font-weight:600}

.tts-icon-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--surface-2);color:var(--text-muted);font-size:.95rem;cursor:pointer;transition:all .15s}
.tts-icon-btn:hover{background:var(--accent-soft);color:var(--accent-text);border-color:var(--accent)}
.tts-icon-btn:active{transform:scale(.9)}
.tts-icon-btn.small{width:26px;height:26px;font-size:.8rem}

.listen-box{display:flex;align-items:center;gap:.7rem;padding:.6rem .8rem;margin-bottom:1rem;font-size:.84rem;color:var(--text-muted)}

.start-btn{display:block;width:100%;margin-top:1.2rem;padding:.9rem;border:none;border-radius:var(--radius-lg);background:linear-gradient(90deg,var(--purple),var(--teal));color:#1c1300;font-weight:800;font-size:1rem;cursor:pointer}
.start-btn:hover{opacity:.9}

/* ── Practice ─────────────────────────────────────────────────────────── */
.exercise-card{padding:1.5rem;text-align:center;}
.exercise-card.boss{border-color:var(--red);box-shadow:0 0 0 1px var(--red-soft),0 0 24px var(--red-soft)}
.ex-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;margin-bottom:.9rem}
.exercise-counter{font-size:.78rem;font-weight:600;color:var(--text-dim);background:var(--surface-2);border:1px solid var(--border);border-radius:99px;padding:.2rem .7rem}
.boss-tag{font-size:.74rem;font-weight:800;color:var(--red);background:var(--red-soft);border-radius:99px;padding:.2rem .7rem;letter-spacing:.04em}
.combo{font-size:.78rem;font-weight:800;color:var(--accent-text);background:var(--accent-soft);border-radius:99px;padding:.2rem .7rem;visibility:hidden}
.combo.on{visibility:visible}
.ex-prog{height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin-bottom:1.1rem}
.ex-prog i{display:block;height:100%;width:0;background:var(--green);transition:width .3s}
.exercise-prompt-row{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-bottom:1.1rem}
.exercise-prompt{font-size:1.15rem;color:var(--text);line-height:1.5;margin:0}
.exercise-options{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}
.exercise-input{width:100%;max-width:320px;padding:.7rem 1rem;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-size:1rem;text-align:center;margin-bottom:1rem}
.exercise-input:focus{outline:none;border-color:var(--purple)}
.check-btn,.next-btn{padding:.65rem 1.8rem;border-radius:var(--radius);border:none;background:var(--purple);color:#1c1300;font-weight:700;font-size:.92rem;cursor:pointer}
.check-btn:hover,.next-btn:hover{opacity:.88}
.result-box{display:none;margin-top:1.1rem;padding:1rem;border-radius:var(--radius);text-align:left}
.result-box.show{display:block}
.result-box.ok{background:var(--green-soft)}
.result-box.wrong{background:var(--red-soft)}
.verdict-ok{color:var(--green);font-weight:700}
.verdict-wrong{color:var(--red);font-weight:700}
.xp-gain{float:right;font-weight:800;color:var(--accent-text);font-variant-numeric:tabular-nums}
.result-explanation{font-size:.85rem;color:var(--text-muted);margin-top:.4rem}

.lesson-complete{text-align:center;padding:2rem 1rem;}
.lesson-complete-icon{font-size:2.5rem;margin-bottom:.5rem}
.lc-stars{font-size:2.2rem;letter-spacing:.2em;margin-bottom:.5rem}
.lesson-complete p{color:var(--text);font-size:1.02rem;margin-bottom:.6rem}
.lc-xp{font-weight:800;color:var(--accent-text);font-size:1.1rem;margin-bottom:1rem}
.lc-actions{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.lc-actions button{padding:.6rem 1.3rem;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-weight:600;cursor:pointer}
.lc-actions button.primary{background:var(--purple);border-color:var(--purple);color:#1c1300}

@media (max-width: 640px) {
  .gx-strip{grid-template-columns:auto 1fr;}
  .gx-stat{text-align:left}
  .example-en{text-align:left}
  .lesson-card,.exercise-card{padding:1.1rem}
}
@media (max-width: 768px) {
  .tts-icon-btn, .tts-icon-btn.small { min-height: 44px; min-width: 44px; }
}
.gap-blank { display: inline-block; width: 3.2em; border-bottom: 2px solid currentColor; margin: 0 .15em; vertical-align: baseline; }
.li-motive-pill { margin-left: .5rem; }

/* ── 90% Freemium Gating & Roadmap CTA (M532) ─────────────────────────── */
.roadmap-cta-banner {
  /* container recipe (always-dark, M620/M621): DS:HEROES .ds-hero--promo */
  margin-bottom: 1.4rem;
}
.roadmap-cta-badge { margin-bottom: 0.35rem; }
.roadmap-cta-body { flex: 1; min-width: 260px; }
.roadmap-cta-body > strong { display: block; font-size: 1rem; color: #ffffff; margin-bottom: 0.2rem; }
.roadmap-cta-body p { margin: 0; font-size: 0.84rem; color: #cbd5e1; line-height: 1.45; }
.roadmap-cta-body p strong { color: #ffffff; }

.lesson-item.is-locked { opacity: 0.92; border-color: rgba(124, 77, 255, 0.3); }

/* Upgrade Preview Modal */
.grammar-upgrade-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.grammar-upgrade-card {
  max-width: 500px;
  width: 100%;
  background: #0f172a;
  border: 1.5px solid #8b5cf6;
  border-radius: 20px;
  padding: 1.75rem;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  animation: gmFadeIn 0.2s ease-out;
}
@keyframes gmFadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.grammar-upgrade-badge { margin-bottom:0.8rem; }
.grammar-upgrade-title { font-family: var(--font-display, serif); font-size: 1.35rem; color: #ffffff; margin: 0 0 0.5rem; }
.grammar-upgrade-desc { font-size: 0.88rem; color: var(--text); line-height: 1.55; margin-bottom: 1.25rem; }
.grammar-upgrade-perks { list-style: none; padding: 0; margin: 0 0 1.4rem; text-align: left; display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.84rem; color: var(--text); }
.grammar-upgrade-actions { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }

/* M559: grammar voice picker — voices with rendered lesson audio stay colored
   and clickable; voices without are greyed out and not clickable. */
#voicePills .pill.voice-unavailable { opacity: .4; filter: grayscale(1); cursor: not-allowed; color: var(--text-muted, #8b949e); }
#voicePills .pill.voice-unavailable:hover { border-color: var(--border, #30363d); background: transparent; color: var(--text-muted, #8b949e); }
/* Available voices get an engine accent dot, like the nav voice swatches. */
#voicePills .pill.voice-piper::before,
#voicePills .pill.voice-supertonic::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; margin-right: .4rem; vertical-align: middle; }
#voicePills .pill.voice-piper::before { background: var(--gold, #f0a500); }
#voicePills .pill.voice-supertonic::before { background: #58a6ff; }
/* Selected chip is accent-coloured: ring the dot in the chip's ink so it stays visible (accent on accent). */
#voicePills .pill.active::before, #voicePills .pill[aria-pressed="true"]::before { box-shadow: 0 0 0 2px var(--accent-ink); }

/* Phone: the roadmap promo collapses to a headline + button (copy lives on /pricing) */
@media (max-width: 640px) {
  .roadmap-cta-banner { padding: .7rem .85rem; gap: .6rem; margin-bottom: .9rem; }
  .roadmap-cta-body p { display: none; }
  .roadmap-cta-body > strong { font-size: .92rem; }
  .roadmap-cta-badge { font-size: .75rem; padding: .15rem .55rem; }
  .roadmap-cta-btn { width: 100%; text-align: center; justify-content: center; }
}

/* M642: answer buttons keep their original centred text on this page */
.option-btn{justify-content:center;text-align:center}