/* Shared chrome for Lesson 5 task pages: reset, nav, sidebar, tabs, buttons, hero shell.
   Each page still defines its own small :root block with --navy/--accent/--accent-mid/
   --accent-light/--accent-bg/--accent-border/--bg/--border/--hero-gradient (phase colours)
   plus any page-unique component CSS (e.g. the persona carousel, the quiz, the closing overlay). */

:root{
  --yellow:#F5C800;
  --ink:#0F172A;
  --muted:#3B4A6B;
  --correct:#22C55E;
  --wrong:#EF4444;
  --radius:16px;
  --ph1:#0E7490;--ph2:#6D28D9;--ph3:#92400E;--ph4:#9D174D;--ph5:#166534;
}

*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Nunito Sans',sans-serif;background:var(--bg);color:var(--ink);overflow-x:hidden;}

@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes slideIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
@keyframes wipeIn{from{opacity:0;}to{opacity:1;}}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-5px);}75%{transform:translateX(5px);}}
@keyframes popIn{from{transform:scale(.85) rotate(-2deg);opacity:0;}to{transform:scale(1) rotate(var(--rot,0deg));opacity:1;}}

/* ── TOP NAV ── */
.top-nav{background:linear-gradient(90deg,var(--navy),var(--accent));display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:60px;position:sticky;top:0;z-index:100;}
.nav-left{display:flex;align-items:center;gap:12px;}
.back-btn{color:rgba(255,255,255,.65);text-decoration:none;font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;border:1px solid rgba(255,255,255,.2);transition:.2s;}
.back-btn:hover{background:rgba(255,255,255,.1);color:#fff;}
.nav-title{color:#fff;font-family:'Nunito',sans-serif;font-size:15px;font-weight:800;}
.nav-right{display:flex;align-items:center;gap:10px;}
.phase-badge{background:rgba(245,200,0,.18);border:1px solid rgba(245,200,0,.38);color:var(--yellow);font-size:11px;font-weight:800;padding:4px 12px;border-radius:20px;}
.complete-badge{background:rgba(245,200,0,.2);border:1px solid rgba(245,200,0,.4);color:var(--yellow);font-size:11px;font-weight:800;padding:4px 12px;border-radius:20px;display:none;}
.complete-badge.show{display:block;animation:fadeIn .5s ease both;}
.progress-bar{background:rgba(255,255,255,.15);height:3px;width:80px;border-radius:3px;overflow:hidden;}
.progress-fill{height:100%;background:var(--yellow);border-radius:3px;transition:width .6s ease;width:0%;}

/* ── LAYOUT ── */
.lesson-layout{display:grid;grid-template-columns:1fr 300px;gap:0;max-width:1200px;margin:0 auto;padding:28px 20px;align-items:start;}
@media(max-width:860px){.lesson-layout{grid-template-columns:1fr;}.sidebar{display:none;}}
.main-col{min-width:0;}

/* ── SIDEBAR ── */
.sidebar{position:sticky;top:72px;display:flex;flex-direction:column;gap:14px;margin-left:10px;}
.sb-card{background:#fff;border-radius:var(--radius);border:1.5px solid var(--border);padding:16px;}
.sb-task-label{font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--accent);margin-bottom:4px;}
.sb-task-title{font-family:'Nunito',sans-serif;font-size:14px;font-weight:900;color:var(--ink);margin-bottom:12px;line-height:1.3;}
.sb-stats{display:flex;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:14px;}
.sb-stat{flex:1;padding:10px 8px;text-align:center;}
.sb-stat:not(:last-child){border-right:1px solid var(--border);}
.sb-val{font-family:'Nunito',sans-serif;font-size:15px;font-weight:900;color:var(--ink);display:block;}
.sb-lbl{font-size:9px;color:var(--muted);font-weight:700;letter-spacing:.4px;text-transform:uppercase;}
.continue-btn{width:100%;padding:12px;background:var(--accent-mid);color:#fff;border:none;border-radius:12px;font-family:'Nunito',sans-serif;font-size:14px;font-weight:900;cursor:pointer;transition:.2s;}
.continue-btn:hover:not(:disabled){background:var(--navy);}
.continue-btn:disabled{opacity:.45;cursor:not-allowed;}

.progress-card{background:#fff;border-radius:var(--radius);border:1.5px solid var(--border);padding:16px;}
.progress-title{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:10px;display:flex;justify-content:space-between;}
.progress-track{height:7px;background:#eee;border-radius:4px;overflow:hidden;margin-bottom:12px;}
.progress-bar-inner{height:100%;background:linear-gradient(90deg,var(--accent-mid),var(--navy));border-radius:4px;transition:width .5s;}
.steps{display:flex;flex-direction:column;gap:8px;}
.step-item{display:flex;align-items:center;gap:8px;font-size:12px;}
.step-dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--muted);flex-shrink:0;transition:.3s;}
.step-dot.done{background:var(--correct);border-color:var(--correct);color:#fff;}
.step-dot.active{border-color:var(--accent-mid);color:var(--accent-mid);}
.step-text{color:var(--muted);font-size:12px;}
.step-text.active{color:var(--ink);font-weight:600;}
.step-text.done{text-decoration:line-through;color:#bbb;}

.curr-card{background:#fff;border-radius:var(--radius);border:1.5px solid var(--border);padding:14px;}
.curr-title{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:10px;}
.curr-item{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:.15s;}
.curr-item:last-child{border-bottom:none;}
.curr-item:hover .curr-name{color:var(--accent-mid);}
.curr-num{width:22px;height:22px;border-radius:5px;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:var(--muted);flex-shrink:0;}
.curr-num.current{background:var(--accent-bg);border-color:var(--accent-border);color:var(--accent);}
.curr-name{font-size:11px;color:var(--ink);flex:1;transition:.15s;}
.curr-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.ph1{background:var(--ph1);}.ph2{background:var(--ph2);}.ph3{background:var(--ph3);}.ph4{background:var(--ph4);}.ph5{background:var(--ph5);}

.role-banner{background:#fff;border:1.5px solid var(--border);border-radius:var(--radius);padding:16px 18px;margin-bottom:20px;display:flex;gap:14px;align-items:flex-start;}
.role-icon{width:44px;height:44px;border-radius:12px;background:var(--accent-bg);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.role-title{font-family:'Nunito',sans-serif;font-weight:900;font-size:14px;color:var(--ink);}
.role-desc{font-size:12px;color:var(--muted);line-height:1.6;margin-top:2px;}

/* ── HERO ── */
.lesson-hero{background:var(--hero-gradient);border-radius:var(--radius);padding:24px 28px;margin-bottom:20px;position:relative;overflow:hidden;}
.lesson-hero::before{content:'';position:absolute;top:-50px;right:-50px;width:180px;height:180px;background:radial-gradient(circle,rgba(245,200,0,.2),transparent 70%);}
.lesson-hero::after{position:absolute;right:28px;bottom:20px;font-size:52px;opacity:.18;}
.hero-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.hero-chip{padding:4px 11px;border-radius:20px;font-size:11px;font-weight:700;}
.chip-phase{background:rgba(255,255,255,.15);color:rgba(255,255,255,.85);}
.chip-type{background:rgba(255,255,255,.1);color:rgba(255,255,255,.6);}
.chip-time{background:rgba(245,200,0,.2);color:var(--yellow);}
.hero-title{font-family:'Nunito',sans-serif;font-size:24px;font-weight:900;color:#fff;margin-bottom:6px;}
.hero-sub{font-size:13px;color:rgba(255,255,255,.65);line-height:1.6;max-width:520px;}

/* ── TABS ── */
.tabs{display:flex;border-bottom:2px solid var(--border);margin-bottom:24px;}
.tab{padding:10px 16px;font-size:13px;font-weight:700;color:var(--muted);background:none;border:none;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:.2s;font-family:'Nunito Sans',sans-serif;}
.tab.active{color:var(--accent-mid);border-color:var(--accent-mid);}
.tab-panel{display:none;}.tab-panel.active{display:block;}

.sec-label{font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin-bottom:12px;display:flex;align-items:center;gap:8px;}
.sec-label::after{content:'';flex:1;height:1px;background:var(--border);}

/* ── INFO BOXES (Overview / SEN tabs) ── */
.info-box{background:#fff;border-radius:var(--radius);border:1.5px solid var(--border);padding:20px;margin-bottom:14px;}
.info-box h3{font-family:'Nunito',sans-serif;font-size:16px;font-weight:900;margin-bottom:10px;}
.info-box p{font-size:14px;color:var(--muted);line-height:1.75;}
.info-box ul{font-size:13px;color:var(--muted);padding-left:18px;line-height:1.9;}
.info-tag{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;}
.tag-blue{color:#0EA5E9;}
.tag-yellow{color:#7A5F00;}

/* ── BRIDGE / NAV ── */
.bridge{background:var(--accent-bg);border-left:3px solid var(--accent-mid);border-radius:0 var(--radius) var(--radius) 0;padding:16px 20px;margin:20px 0;display:none;}
.bridge.show{display:block;animation:fadeUp .4s ease both;}
.bridge-lbl{font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--accent-mid);margin-bottom:6px;}
.bridge-text{font-size:14px;color:var(--ink);line-height:1.7;font-style:italic;}
.next-nav{display:flex;justify-content:space-between;align-items:center;margin-top:8px;}
.prev-btn{display:inline-flex;align-items:center;gap:6px;padding:12px 22px;background:#fff;color:var(--muted);border:1.5px solid var(--border);border-radius:30px;font-family:'Nunito',sans-serif;font-size:14px;font-weight:800;text-decoration:none;transition:.2s;}
.prev-btn:hover{color:var(--ink);border-color:var(--accent-mid);}
.next-btn,.lesson-complete-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;background:var(--accent-mid);color:#fff;border-radius:30px;font-family:'Nunito',sans-serif;font-size:15px;font-weight:900;text-decoration:none;transition:.2s;border:none;cursor:pointer;}
.next-btn:hover,.lesson-complete-btn:hover{background:var(--navy);}
.next-btn-disabled{opacity:.4;pointer-events:none;}
.lesson-complete-btn:disabled{opacity:.4;cursor:not-allowed;}