/* Shared chrome for Lesson 2 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. Base tokens below use the existing Arts brand palette
   (--arts / phase colours) carried over from the pre-rebuild lessons2 files. */

:root{
  --yellow:#F5C800;
  --ink:#1A1A2E;
  --muted:#5A4A3A;
  --correct:#22C55E;
  --wrong:#EF4444;
  --radius:16px;
  --arts:#C2410C;--arts-dark:#7C2D12;--arts-light:#FFF7ED;
  --ph1:#C2410C;--ph2:#7055B5;--ph3:#7A5F00;--ph4:#A03800;--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;text-decoration:none;}
.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-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;}

/* ── SHARED WIDGETS reused across several lesson2 activities ── */

/* Poll (task1) */
.poll-card{background:#fff;border-radius:var(--radius);border:1.5px solid var(--border);overflow:hidden;}
.poll-header{padding:14px 20px;border-bottom:1px solid var(--border);background:var(--accent-bg);}
.poll-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--accent);margin-bottom:5px;}
.poll-question{font-family:'Nunito',sans-serif;font-size:17px;font-weight:900;color:var(--ink);line-height:1.35;}
.poll-hint{font-size:12px;color:var(--muted);margin-top:3px;}
.poll-body{padding:18px 20px;display:flex;flex-direction:column;gap:10px;}
.poll-opt{display:flex;align-items:center;gap:12px;padding:13px 16px;border:1.5px solid var(--border);border-radius:12px;cursor:pointer;transition:.2s;background:var(--bg);}
.poll-opt:hover{border-color:var(--accent-mid);}
.poll-opt.picked{border-color:var(--accent-mid);background:var(--accent-bg);}
.poll-opt-letter{width:26px;height:26px;border-radius:8px;background:#fff;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:'Nunito',sans-serif;font-weight:900;font-size:12px;color:var(--accent);flex-shrink:0;}
.poll-opt.picked .poll-opt-letter{background:var(--accent-mid);border-color:var(--accent-mid);color:#fff;}
.poll-opt-text{font-size:14px;color:var(--ink);font-weight:600;flex:1;}

/* Confidence / self-rating 1-5 button group */
.confidence-section{margin-bottom:16px;}
.confidence-card{background:#fff;border-radius:var(--radius);border:1.5px solid var(--border);padding:18px 20px;margin-bottom:12px;}
.confidence-q{font-family:'Nunito',sans-serif;font-size:14px;font-weight:900;color:var(--ink);margin-bottom:12px;}
.confidence-scale{display:flex;gap:8px;flex-wrap:wrap;}
.confidence-btn{flex:1;min-width:60px;padding:12px 6px;background:var(--bg);border:1.5px solid var(--border);border-radius:10px;text-align:center;font-size:12px;font-weight:800;color:var(--ink);cursor:pointer;transition:.2s;}
.confidence-btn:hover{border-color:var(--accent-mid);}
.confidence-btn.picked{border-color:var(--accent-mid);background:var(--accent-bg);color:var(--accent);}

/* Journal */
.journal-card{background:#fff;border-radius:var(--radius);border:1.5px solid var(--border);overflow:hidden;}
.journal-header{padding:14px 20px;border-bottom:1px solid var(--border);background:var(--accent-bg);}
.journal-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--accent);margin-bottom:5px;}
.journal-title{font-family:'Nunito',sans-serif;font-size:17px;font-weight:900;color:var(--ink);}
.journal-sub{font-size:12px;color:var(--muted);margin-top:3px;}
.journal-body{padding:18px 20px;}
.journal-private-note{background:var(--accent-bg);border:1.5px solid var(--accent-border);border-radius:10px;padding:10px 14px;font-size:13px;color:var(--accent);margin-bottom:12px;line-height:1.55;}
.journal-textarea{width:100%;background:var(--bg);border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;font-size:14px;font-family:'Nunito Sans',sans-serif;color:var(--ink);resize:none;line-height:1.65;}
.journal-textarea:focus{outline:none;border-color:var(--accent-mid);}
.journal-footer{display:flex;align-items:center;justify-content:space-between;margin-top:8px;flex-wrap:wrap;gap:8px;}
.j-char{font-size:11px;color:var(--muted);}
.j-char.warn{color:var(--wrong);}
.j-save-btn{padding:10px 24px;background:var(--accent-mid);color:#fff;border:none;border-radius:24px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:800;cursor:pointer;}
.j-save-btn:hover:not(:disabled){background:var(--navy);}
.j-save-btn:disabled{opacity:.4;cursor:not-allowed;}
.j-saved{font-size:12px;color:var(--correct);font-weight:700;display:none;align-items:center;gap:5px;}
.j-saved.show{display:flex;}

/* Generic char-counted card (movement facts, AI verification, DEAR) */
.field-card{background:#fff;border-radius:var(--radius);border:1.5px solid var(--border);padding:18px 20px;margin-bottom:12px;}
.field-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--accent);margin-bottom:8px;}
.field-hint{font-size:12px;color:var(--muted);margin-bottom:8px;line-height:1.55;}
.field-textarea{width:100%;background:var(--bg);border:1.5px solid var(--border);border-radius:10px;padding:11px 14px;font-size:13px;font-family:'Nunito Sans',sans-serif;color:var(--ink);resize:none;line-height:1.6;}
.field-textarea:focus{outline:none;border-color:var(--accent-mid);}
.field-footer{display:flex;align-items:center;justify-content:space-between;margin-top:6px;}
.field-char{font-size:11px;color:var(--muted);}
.field-char.warn{color:var(--wrong);}

/* Verify 3-way button row (AI check) */
.ai-card{background:#fff;border-radius:var(--radius);border:1.5px solid var(--border);overflow:hidden;margin-bottom:16px;}
.ai-header{padding:14px 20px;border-bottom:1px solid var(--border);background:var(--accent-bg);display:flex;align-items:center;gap:10px;}
.ai-badge{width:30px;height:30px;border-radius:8px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.ai-prompt{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--accent);}
.ai-prompt-text{font-size:13px;color:var(--ink);font-style:italic;margin-top:2px;}
.ai-body{padding:16px 20px;}
.ai-response{background:var(--bg);border-radius:10px;border:1px solid var(--border);padding:14px 16px;font-size:13px;color:var(--ink);line-height:1.7;margin-bottom:14px;}
.ai-response-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#B45309;background:#FFFBEB;border:1px solid #FDE68A;border-radius:8px;padding:6px 10px;margin-bottom:10px;display:inline-block;}
.verify-row{display:flex;gap:8px;flex-wrap:wrap;}
.verify-btn{flex:1;min-width:100px;padding:10px;border-radius:10px;border:1.5px solid var(--border);background:#fff;font-size:12px;font-weight:800;cursor:pointer;transition:.15s;}
.verify-btn:hover:not(:disabled){border-color:var(--accent-mid);}
.verify-btn.picked{background:var(--accent-bg);border-color:var(--accent-mid);color:var(--accent-mid);}
.verify-btn:disabled{cursor:default;}
.verify-note{display:none;margin-top:10px;font-size:12px;color:var(--muted);font-style:italic;}
.verify-note.show{display:block;animation:fadeUp .3s ease both;}

/* Thumbnail picker grid (artworks / movements / masterpieces) */
.thumb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
@media(max-width:600px){.thumb-grid{grid-template-columns:repeat(2,1fr);}}
.thumb-card{border:2px solid var(--border);border-radius:12px;overflow:hidden;cursor:pointer;transition:.2s;background:#fff;position:relative;}
.thumb-card:hover:not(.locked){border-color:var(--accent-mid);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.1);}
.thumb-card.selected{border-color:var(--accent-mid)!important;box-shadow:0 0 0 3px var(--accent-border);}
.thumb-img{width:100%;height:90px;display:flex;align-items:center;justify-content:center;font-size:32px;}
.thumb-info{padding:8px 10px;}
.thumb-title{font-family:'Nunito',sans-serif;font-size:11px;font-weight:900;color:var(--ink);line-height:1.3;}
.thumb-meta{font-size:10px;color:var(--muted);margin-top:1px;}
.thumb-badge{position:absolute;top:6px;right:6px;background:var(--accent-mid);color:#fff;font-size:9px;font-weight:800;padding:2px 7px;border-radius:10px;display:none;}
.thumb-card.selected .thumb-badge{display:block;}

/* Simple single-choice option list (quiz-style) */
.opt-btn{padding:10px 14px;border-radius:10px;border:1.5px solid var(--border);background:#fff;font-size:13px;color:var(--ink);cursor:pointer;text-align:left;transition:.2s;width:100%;}
.opt-btn:hover:not(:disabled){border-color:var(--accent-mid);background:var(--accent-bg);}
.opt-btn:disabled{cursor:default;}
.opt-btn.opt-correct{background:rgba(34,197,94,.1);border-color:var(--correct);color:#14532D;font-weight:700;}
.opt-btn.opt-wrong{background:rgba(239,68,68,.07);border-color:var(--wrong);color:#7F1D1D;}
.opt-btn.opt-show{background:rgba(34,197,94,.06);border-color:var(--correct);color:#14532D;}