/**
 * css/listening-pilot.css — page-specific styles for listening-pilot.html
 * (M103, Track C). Base layout classes mirror css/grammar-lessons.css's
 * own copies (same established per-page convention).
 */
.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:680px; }

.empty-note{color:var(--text-muted);text-align:center;padding:2rem 0}

/* ── Training / Assessment toggle (M206, relabeled M216) — same pill-switch
   recipe as css/drill.css's .user-toggle, renamed to this page's own class
   so the two files stay independent (page-scoped CSS, same established
   convention as every other per-page style sheet here). ── */
.listening-mode-bar{display:flex;align-items:center;justify-content:center;gap:.7rem;margin-bottom:1.1rem;padding:.55rem .9rem;flex-wrap:wrap;}
.mode-side{font-size:.8rem;font-weight:600;color:var(--text-dim);transition:color .15s}
.mode-side-active{color:var(--text)}
.training-toggle{position:relative;width:36px;height:20px;border-radius:10px;background:#475569;cursor:pointer;transition:background .2s;flex-shrink:0}
.training-toggle.on{background:var(--accent)}
.training-toggle::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s}
.training-toggle.on::after{transform:translateX(16px)}
/* Slow playback (M216) — kept visually separate from the mode toggle via a
   divider, since it's an independent preference, not a third mode. */
.mode-bar-divider{width:1px;align-self:stretch;background:var(--border);flex-shrink:0}
.speed-toggle-label{display:flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:600;color:var(--text-dim);cursor:pointer}
.speed-toggle-label input{accent-color:var(--accent);cursor:pointer}

/* ── Dialogue list ────────────────────────────────────────────────────── */
.dialogue-list{display:flex;flex-direction:column;gap:.6rem}
.dialogue-item{display:flex;flex-direction:column;gap:.2rem;text-align:left;padding:1rem 1.2rem;cursor:pointer;transition:border-color .15s;}
.dialogue-item:hover{border-color:var(--accent)}
.dialogue-item-level{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-text)}
.dialogue-item-title{font-family:var(--font-display);font-size:1.05rem;color:var(--text)}
.dialogue-item-meta{font-size:.78rem;color:var(--text-muted)}

/* ── Dialogue player ──────────────────────────────────────────────────── */
.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)}

.player-card{padding:2rem 1.5rem;text-align:center;margin-bottom:1.25rem;}
.player-level{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-text)}
.player-card h2{font-family:var(--font-display);font-size:1.35rem;color:var(--text);margin:.3rem 0 1.25rem}
.player-hint{font-size:.82rem;color:var(--text-muted);margin-bottom:1.25rem;line-height:1.5}
.play-btn-big.playing{animation:listening-pulse 1s ease infinite}
@keyframes listening-pulse{0%,100%{box-shadow:0 0 0 0 var(--accent-soft)}50%{box-shadow:0 0 0 10px transparent}}
.plays-used{display:flex;align-items:center;gap:.35rem;width:fit-content;margin:0 auto;background:var(--surface-2);border:1px solid var(--border);border-radius:99px;padding:.2rem .7rem;font-size:.78rem;color:var(--text-dim)}
.reveal-btn{margin-top:1.25rem;padding:.65rem 1.8rem;border-radius:var(--radius);border:none;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:.92rem;cursor:pointer}
.reveal-btn:hover{opacity:.88}
.reveal-btn:disabled{opacity:.4;cursor:not-allowed}

/* ── Questions ────────────────────────────────────────────────────────── */
/* M164: was .questions-card, now plain .s-card (shared.css) — identical
   recipe, no page-specific descendant rules depended on the old name. */
.question-block{margin-bottom:1.4rem}
.question-block:last-child{margin-bottom:0}
.question-prompt{font-size:.95rem;color:var(--text);margin-bottom:.65rem}
.question-options{display:flex;flex-direction:column;gap:.5rem}

.submit-btn{margin-top:.5rem;width:100%;padding:.75rem;border-radius:var(--radius);border:none;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:.95rem;cursor:pointer}
.submit-btn:hover:not(:disabled){opacity:.88}
.submit-btn:disabled{opacity:.4;cursor:not-allowed}

/* Compact summary bar above the still-visible question review (M284) —
   was a full-screen celebration block that replaced the quiz entirely;
   now it sits on top of it instead, so it needs to read as a banner, not
   a standalone page. */
.dialogue-complete{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;text-align:left;padding:1rem 1.15rem;margin-bottom:1rem;border-radius:var(--radius);background:var(--surface-2);border:1.5px solid var(--border)}
.dialogue-complete-icon{font-size:1.6rem;flex-shrink:0}
.dialogue-complete p{color:var(--text);font-size:1.05rem;font-weight:700;margin:0;flex:1;min-width:120px}
.dialogue-complete .back-btn{flex-shrink:0}
/* M572 — paywall hero + locked rows */
.dialogue-item.is-locked{opacity:.78;border-style:dashed}
.dialogue-item.is-locked .dialogue-item-title{color:var(--text-muted)}
.li-paywall{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;background:var(--surface);border:1px solid var(--accent);border-radius:var(--radius-lg);padding:1.1rem 1.2rem}
.li-paywall-badge{font-size:.7rem;font-weight:700;letter-spacing:.06em;color:var(--accent-text)}
.li-paywall-title{font-family:var(--font-display);font-size:1.15rem;margin:0;color:var(--text)}
.li-paywall-copy{margin:0;font-size:.9rem;color:var(--text-muted);line-height:1.45}
.li-paywall-chips{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0}
.li-paywall-chips li{font-size:.76rem;padding:.2rem .6rem;border:1px solid var(--border);border-radius:999px;color:var(--text)}
.li-paywall-cta{cursor:pointer;border:0;border-radius:var(--radius-lg);padding:.6rem 1.3rem;font-weight:700;font-size:.95rem;background:var(--accent);color:var(--accent-contrast,#fff)}
.li-locked-title{font-family:var(--font-display);margin:.2rem 0 .8rem}

/* M637: tokens for shared.css DS:TYPE --option / --play. */
.q-option-btn{--opt-accent:var(--accent);--opt-sel-bg:var(--accent-soft);font-size:.9rem;padding:.65rem 1rem}
.play-btn-big{--play-size:88px;margin-bottom:.75rem;font-size:2.2rem}