/* loop-engine.css — A Girl & Her Futures™
 * The Dayli Learning Loop prototype (Watch → See It → Try It →
 * Say It Back → Save It). Kept separate from lesson-engine.css so this
 * can be iterated on/ripped out without touching the proven 16-lesson
 * styles. Reuses tokens.css custom properties and the `.lw-*` chrome
 * classes already loaded by lesson-engine.css (card, eyebrow, pills,
 * feedback, opts, continue-btn, etc.) — only genuinely new classes live
 * here.
 */

/* ── Launchpad ──────────────────────────────────────────────────── */
.dl-launchpad{background:var(--ink-bg,var(--dark));color:var(--fg-ffffff,#fff);border-radius:20px;padding:28px 30px;box-shadow:0 10px 30px rgba(30,26,28,.16);position:relative;overflow:hidden;}
.dl-launchpad::after{content:'✦';position:absolute;right:14px;bottom:-14px;font-size:64px;opacity:.06;}
.dl-launchpad h2{font-family:var(--font-display);font-size:1.4rem;color:var(--fg-ffffff,#fff);margin:2px 0 10px;}
.dl-outcome{color:rgba(255,255,255,.72);font-size:.9rem;line-height:1.7;margin-bottom:14px;}
.dl-outcome strong{color:var(--fg-ffffff,#fff);}
.dl-launchpad-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.dl-mission-q{background:rgb(var(--glass-rgb,255 255 255) / .06);border:1px solid rgb(var(--glass-rgb,255 255 255) / .12);border-radius:14px;padding:14px 16px;}
.dl-mission-q-label{font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--pink-light);font-weight:700;margin-bottom:6px;}
.dl-mission-q-text{font-family:var(--font-display);font-style:italic;font-size:.95rem;color:var(--fg-ffffff,#fff);line-height:1.6;}

/* ── Watch: markers + Focus Mode ───────────────────────────────── */
.dl-watch-block{position:relative;transition:.3s;}
.dl-focus-toggle{position:absolute;top:12px;right:12px;z-index:2;font-family:var(--font-body);background:rgba(30,26,28,.55);color:var(--fg-ffffff,#fff);border:1px solid rgb(var(--glass-rgb,255 255 255) / .25);border-radius:100px;padding:6px 13px;font-size:.72rem;font-weight:600;cursor:pointer;}
.dl-focus-toggle:hover{background:rgba(30,26,28,.75);}
.dl-marker-rail{display:flex;flex-direction:column;gap:6px;margin-top:12px;}
.dl-marker{display:flex;align-items:center;gap:10px;font-family:var(--font-body);background:var(--bg-ffffff,#fff);border:1px solid var(--border);border-radius:12px;padding:9px 13px;cursor:pointer;text-align:left;transition:border-color .15s;}
.dl-marker:hover{border-color:var(--pink-light);}
.dl-marker-t{font-size:.72rem;font-weight:700;color:var(--muted);min-width:38px;font-variant-numeric:tabular-nums;}
.dl-marker-label{font-size:.82rem;color:var(--text);}
.dl-marker.is-active{border-color:var(--pink);background:var(--pink-pale);}
.dl-marker.is-active .dl-marker-t{color:var(--pink);}
.lw-video-block .dl-video{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--ink-bg,var(--dark));object-fit:contain;}
.lw-watched-btn.is-ready{animation:dlReadyPulse 1.6s ease-in-out 2;}
@keyframes dlReadyPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.04);box-shadow:0 0 0 6px var(--pink-pale);}}
.lw-slide.dl-focus-active .dl-launchpad,
.lw-slide.dl-focus-active .lw-watched-btn{display:none;}
.lw-slide.dl-focus-active .dl-watch-block{max-width:640px;margin:0 auto;}
.dl-watch-preview-canvas{position:absolute;inset:0;width:100%;height:100%;}
.dl-watch-preview-caption{position:absolute;left:0;right:0;bottom:0;padding:14px 16px 12px;background:linear-gradient(transparent,rgb(var(--ink-rgb,44 24 16) / .72));color:var(--fg-ffffff,#fff);font-size:.8rem;font-weight:600;line-height:1.5;z-index:1;min-height:1.4em;}

/* ── See It: cards mode (non-canvas staged reveal) ────────────────── */
.dl-concept-card{background:var(--bg-ffffff,#fff);border:1px solid var(--border);border-radius:14px;padding:14px 16px;margin-top:10px;opacity:0;transform:translateY(8px);transition:.35s;}
.dl-concept-card.show{opacity:1;transform:translateY(0);}
.dl-concept-card:first-child{margin-top:4px;}
.dl-concept-label{font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--dark);margin-bottom:4px;}
.dl-concept-text{font-size:.85rem;line-height:1.65;color:var(--text);}

/* ── See It: guided reveal ──────────────────────────────────────── */
.dl-canvas.dl-canvas-fade{animation:dlCanvasFade .45s ease;}
@keyframes dlCanvasFade{from{opacity:.15;transform:scale(.97);}to{opacity:1;transform:scale(1);}}
.dl-reveal-caption{min-height:1.6em;margin-top:12px;font-size:.92rem;color:var(--dark);font-weight:600;line-height:1.6;opacity:0;transform:translateY(6px);transition:.35s;}
.dl-reveal-caption.show{opacity:1;transform:translateY(0);}
.dl-reveal-dots{display:flex;gap:6px;margin-top:12px;}
.dl-reveal-dot{width:7px;height:7px;border-radius:50%;background:var(--border);border:1.5px solid var(--border);}
.dl-reveal-dot.done{background:var(--teal);border-color:var(--teal);}
.dl-reveal-dot.active{background:var(--pink);border-color:var(--pink);transform:scale(1.3);}

/* ── Try It: decision path ──────────────────────────────────────── */
.dl-decision-card{background:var(--cream);border:1px solid var(--border);border-radius:16px;padding:16px 18px;}
.dl-decision-q{font-family:var(--font-display);font-size:1rem;color:var(--dark);line-height:1.5;margin-bottom:12px;}
.dl-decision-outcome{background:var(--teal-pale);border:1px solid var(--teal-light);border-radius:16px;padding:16px 18px;}
.dl-decision-outcome p{color:var(--dark);}

/* ── Say It Back ─────────────────────────────────────────────────── */
.dl-say-compare{margin-top:14px;display:flex;flex-direction:column;gap:12px;}
.dl-model-answer{background:var(--bg-ffffff,#fff);border:1px solid var(--border);border-top:2px solid var(--peach);border-radius:14px;padding:14px 16px;}
.dl-model-answer p{color:var(--dark);font-size:.88rem;line-height:1.7;margin-top:4px;}
.dl-say-selfmark{display:flex;gap:9px;flex-wrap:wrap;}
.dl-say-selfmark .lw-qopt{flex:1;text-align:center;min-width:180px;}

/* ── Save It: playbook card ─────────────────────────────────────── */
.dl-playbook-card{background:var(--bg-ffffff,#fff);}
.dl-playbook-checklist{display:flex;flex-direction:column;gap:9px;margin:6px 0 16px;}
.dl-playbook-item{color:var(--dark);font-size:.88rem;}
.dl-playbook-remember{background:var(--cream);border:1px solid var(--border);}
.dl-playbook-remember .lw-remember-label{color:var(--pink);}
.dl-playbook-remember-text{color:var(--dark);}
.dl-playbook-badge{margin-top:14px;}
.dl-playbook-actions{display:flex;gap:10px;flex-wrap:wrap;}
.dl-playbook-actions .lw-continue-btn{flex:1;min-width:200px;text-align:center;justify-content:center;display:flex;}
.dl-download-btn{background:transparent!important;border:1.5px solid var(--border)!important;color:var(--muted)!important;box-shadow:none!important;}

@media(max-width:760px){
  .dl-launchpad{padding:22px;}
  .dl-focus-toggle{position:static;margin-bottom:10px;display:inline-block;}
}

/* ── Phase 7: Learn with Dayli (see p7-learn.js) ───────────────── */
.p7-learn{display:flex;flex-direction:column;gap:12px;}
.p7-step-label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--pink);margin-top:4px;}
.p7-chip{display:inline-flex;align-items:center;gap:6px;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:5px 10px;border-radius:999px;background:var(--pink-pale);color:var(--pink);}
.p7-videos{display:grid;gap:12px;}
.p7-videos.is-pair{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:stretch;}
.p7-videos.is-pair .p7-poster.is-supporting{aspect-ratio:auto;}
.p7-poster{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;color:var(--fg-ffffff,#fff);padding:18px 20px;display:flex;flex-direction:column;justify-content:space-between;
  background:radial-gradient(70% 90% at 15% 20%,rgb(var(--pink-rgb,244 130 154) / .45) 0%,transparent 60%),radial-gradient(60% 80% at 90% 90%,rgba(126,206,196,.28) 0%,transparent 60%),var(--ink-bg,var(--dark));box-shadow:0 10px 30px rgba(30,26,28,.18);}
.p7-poster-num{position:absolute;right:-6px;bottom:-34px;font-family:var(--font-display);font-weight:900;font-size:13rem;line-height:1;color:rgba(255,255,255,.07);pointer-events:none;}
.p7-poster-top{display:flex;justify-content:space-between;gap:8px;position:relative;}
.p7-poster .p7-chip{background:rgb(var(--glass-rgb,255 255 255) / .12);color:var(--fg-ffffff,#fff);}
.p7-poster .p7-chip.is-soon{background:var(--pink);}
.p7-poster-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:var(--bg-ffffff,#fff);color:var(--pink);display:flex;align-items:center;justify-content:center;font-size:1.3rem;padding-left:4px;box-shadow:0 8px 24px rgba(0,0,0,.3);}
.p7-poster-title{position:relative;display:flex;flex-direction:column;gap:2px;}
.p7-poster-title b{font-family:var(--font-display);font-size:2rem;line-height:1.1;}
.p7-poster-title i{font-family:var(--font-display);font-size:1.02rem;color:var(--pink-light);}
.p7-poster.is-supporting .p7-poster-num{font-size:8rem;bottom:-20px;}
.p7-poster.is-supporting .p7-poster-play{width:46px;height:46px;font-size:1rem;}
.p7-poster.is-supporting .p7-poster-title b{font-size:1.25rem;}
.p7-poster.is-supporting .p7-poster-title i{font-size:.85rem;}
.p7-video-cap{display:flex;align-items:center;gap:8px;margin-top:8px;font-family:var(--font-display);font-weight:700;color:var(--dark);}
.p7-quote{background:var(--bg-ffffff,#fff);border:1px solid var(--border);border-radius:20px;padding:22px 24px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;box-shadow:0 6px 20px rgba(30,26,28,.06);}
.p7-quote-text{font-family:var(--font-display);font-style:italic;font-weight:700;font-size:1.6rem;line-height:1.3;color:var(--dark);}
.p7-quote-link{font-size:.82rem;font-weight:700;color:var(--pink);text-decoration:none;}
.p7-quote-link:hover{text-decoration:underline;}
.p7-handson{display:flex;align-items:center;gap:16px;background:var(--teal-pale);border-radius:20px;padding:20px 22px;}
.p7-handson.is-finale{background:var(--pink-pale);}
.p7-handson-icon{flex:none;width:56px;height:56px;border-radius:16px;background:var(--bg-ffffff,#fff);display:flex;align-items:center;justify-content:center;font-size:1.7rem;box-shadow:0 4px 14px rgba(30,26,28,.08);}
.p7-handson .p7-chip{background:var(--bg-ffffff,#fff);color:var(--dark);}
.p7-handson-text{font-family:var(--font-display);font-weight:700;font-size:1.3rem;line-height:1.3;color:var(--dark);margin-top:6px;}
.p7-rule-card{background:var(--ink-bg,var(--dark));color:var(--fg-ffffff,#fff);border-radius:16px;padding:16px 18px;margin:4px 0 14px;}
.p7-rule-label{font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--pink-light);margin-bottom:6px;}
.p7-rule-text{font-family:var(--font-display);font-style:italic;font-size:1.08rem;line-height:1.5;}
.p7-rule-from{font-size:.72rem;color:rgba(255,255,255,.6);margin-top:8px;}
@media (max-width:640px){.p7-videos.is-pair{grid-template-columns:1fr;}.p7-poster-title b{font-size:1.5rem;}.p7-quote-text{font-size:1.3rem;}.p7-poster-num{font-size:9rem;}}

/* ── Phase 7 screens in the Phase 1 look (see p7-v2.js) ───────────── */
.p7v2-chart{width:100%;align-self:center;}
.p7v2-chart .p7-chart-wrap{background:var(--bg-ffffff,#fff);border-radius:18px;padding:12px;box-shadow:0 10px 30px rgba(30,26,28,.10);}
.p7v2-steps{display:flex;flex-direction:column;gap:10px;width:100%;}
.p7v2-step{display:flex;align-items:center;gap:14px;text-align:left;font-family:var(--font-body);background:var(--bg-ffffff,#fff);border:1px solid var(--border);border-radius:16px;padding:12px 14px;cursor:pointer;opacity:.55;transition:.25s;box-shadow:0 4px 14px rgba(30,26,28,.05);}
.p7v2-step:hover{opacity:.8;}
.p7v2-step.is-on{opacity:1;border-color:var(--pink-light);transform:translateX(4px);}
.p7v2-step-n{flex:none;width:34px;height:34px;border-radius:50%;background:var(--pink-pale);color:var(--pink);font-family:var(--font-display);font-weight:900;display:flex;align-items:center;justify-content:center;}
.p7v2-step.is-on .p7v2-step-n{background:var(--pink);color:var(--fg-ffffff,#fff);}
.p7v2-step-txt{display:flex;flex-direction:column;gap:2px;}
.p7v2-step-txt b{font-family:var(--font-display);font-size:1.05rem;color:var(--dark);}
.p7v2-step-txt span{font-size:.82rem;color:var(--muted);}
.v2-r .p7-rule-card{width:100%;margin:0 0 10px;}