/* ════════════════════════════════════════════════════════════════
   course.css — folha de estilo compartilhada do curso "IA local no M5 Max"
   Design canônico Warm-Neutral (packages/design/src/themes.ts).
   TODA lição linka este arquivo. Nunca duplicar CSS numa lição.
   ════════════════════════════════════════════════════════════════ */
:root{--serif:ui-serif,Georgia,"Times New Roman",serif;--sans:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
[data-theme="dark"]{--bg:#1a1a18;--panel:#211f1d;--panel-2:#262421;--ink:#ECEAE3;--ink-dim:#B6B3AA;--line:#3a3733;--accent:#E0875F;--accent-ink:#F0A883;--olive-ink:#9DB37E;--code-bg:#161513;--badge-bg:#2d2a26;--ok:#7FB069;--bad:#D9776B;--keyw:#C9A36B;--str:#9DB37E;--com:#7c766c}
[data-theme="light"]{--bg:#FAF9F5;--panel:#fff;--panel-2:#fff;--ink:#141413;--ink-dim:#3D3D3A;--line:#D1CFC5;--accent:#D97757;--accent-ink:#9F3F1F;--olive-ink:#5a6e44;--code-bg:#F7F6F1;--badge-bg:#F0EEE6;--ok:#3f7a3f;--bad:#9F3F1F;--keyw:#8a5a1f;--str:#4a6e34;--com:#8a857c}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:20.5px/1.7 var(--sans);transition:background .2s,color .2s}
.layout{display:flex;max-width:1280px;margin:0 auto;gap:0}
/* ── LEFT SIDEBAR (índice) ── */
nav.side{position:sticky;top:0;align-self:flex-start;height:100vh;width:286px;flex:0 0 286px;overflow-y:auto;border-right:1px solid var(--line);padding:24px 16px 60px;background:linear-gradient(180deg,#0c1019 0,var(--bg) 220px)}
[data-theme="light"] nav.side{background:linear-gradient(180deg,#f1efe7 0,var(--bg) 220px)}
nav.side .home{font-family:var(--mono);font-size:12px;color:var(--ink-dim);letter-spacing:.1em;text-transform:uppercase}
nav.side h4{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);margin:20px 0 8px}
nav.side a{display:block;color:var(--ink-dim);font-size:14px;padding:5px 9px;border-radius:7px;border:1px solid transparent;text-decoration:none;line-height:1.35}
nav.side a:hover{background:var(--panel);color:var(--ink)}
nav.side ol{list-style:none;margin:0;padding:0;counter-reset:l}
nav.side ol li{counter-increment:l}
nav.side ol a{padding-left:30px;position:relative}
nav.side ol a:before{content:counter(l,decimal-leading-zero);position:absolute;left:8px;font-family:var(--mono);font-size:10px;color:var(--accent);top:7px}
nav.side ol a.cur{color:var(--ink);font-weight:600}
nav.side .toc a.active{background:#152232;color:var(--accent);border-color:#244}
[data-theme="light"] nav.side .toc a.active{background:#fbeae3;color:#9F3F1F;border-color:#e7c4b4}
main{flex:1 1 auto;min-width:0;padding:30px clamp(20px,4vw,48px) 120px;max-width:1000px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.crumbs{font-family:var(--mono);font-size:14.5px;color:var(--ink-dim)}.crumbs a{color:var(--accent)}
.btn{font-family:var(--mono);font-size:14.5px;border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:7px 13px;border-radius:6px;cursor:pointer}.btn:hover{border-color:var(--accent)}
.kicker{font-family:var(--mono);font-size:13px;color:var(--ink-dim);letter-spacing:.12em;text-transform:uppercase}
h1{font-family:var(--serif);font-size:40px;line-height:1.14;margin:8px 0 10px}
h2{font-family:var(--mono);font-size:17px;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-ink);margin:44px 0 12px;border-top:1px solid var(--line);padding-top:20px;scroll-margin-top:12px}
h3{font-family:var(--serif);font-size:25px;margin:24px 0 6px}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
p{margin:13px 0}.lede{font-size:22px;color:var(--ink-dim);max-width:820px}
code{font-family:var(--mono);font-size:.86em;background:var(--badge-bg);padding:1px 6px;border-radius:4px}
.diagram{border:1px solid var(--line);background:var(--panel-2);border-radius:10px;padding:18px;margin:18px 0}
.diagram .t{font-family:var(--mono);font-size:13px;color:var(--ink-dim);margin-bottom:10px}
svg{max-width:100%;height:auto;display:block}
.callout{border:1px solid var(--line);border-left:3px solid var(--olive-ink);background:var(--panel-2);border-radius:8px;padding:14px 18px;margin:18px 0;font-size:18.5px;color:var(--ink-dim)}.callout b{color:var(--ink)}
.spotlight{border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--panel);border-radius:8px;padding:14px 18px;margin:18px 0}.spotlight .h{font-family:var(--mono);font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:6px}
blockquote{margin:16px 0;padding:6px 0 6px 18px;border-left:3px solid var(--accent);color:var(--ink)}
blockquote .src{display:block;margin-top:8px;font-family:var(--mono);font-size:13.5px;color:var(--ink-dim)}
table{border-collapse:collapse;width:100%;font-size:18px;margin:14px 0}
th,td{border:1px solid var(--line);padding:9px 12px;text-align:left}th{background:var(--panel-2);font-family:var(--mono);font-size:14px;text-transform:uppercase;color:var(--ink-dim)}td b{color:var(--ink)}
.stat{display:flex;gap:14px;flex-wrap:wrap;margin:16px 0}
.stat .box{flex:1;min-width:140px;border:1px solid var(--line);background:var(--panel);border-radius:9px;padding:14px 16px}
.stat .box .n{font-family:var(--mono);font-size:29px;color:var(--accent-ink)}
.stat .box .l{font-size:14px;color:var(--ink-dim);margin-top:3px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0}
@media (max-width:680px){.grid2{grid-template-columns:1fr}}
/* ── teach: fonte primária + lembrete de professor ── */
.primary-source{border:1px solid var(--accent);border-radius:10px;background:var(--panel);padding:14px 18px;margin:22px 0}
.primary-source .h{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:5px}
.primary-source a{font-family:var(--serif);font-size:19px}
.ask{border:1px dashed var(--line);border-radius:10px;background:var(--panel-2);padding:13px 18px;margin:22px 0;font-size:17px;color:var(--ink-dim)}.ask b{color:var(--accent-ink)}
.recall{border-left:3px solid var(--olive-ink);padding:4px 0 4px 16px;margin:18px 0;font-style:italic;color:var(--ink-dim)}
/* ── controles interativos ── */
.ctl{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin:6px 0 14px;font-family:var(--mono);font-size:15px}
.ctl label{display:flex;flex-direction:column;gap:4px;color:var(--ink-dim)}
.ctl input[type=range]{accent-color:var(--accent);width:200px;cursor:pointer}
.ctl b{color:var(--accent-ink)}
.tabs{display:flex;gap:8px;margin:10px 0;flex-wrap:wrap}
.tabs button{font-family:var(--mono);font-size:14px;border:1px solid var(--line);background:var(--panel);color:var(--ink-dim);padding:7px 13px;border-radius:7px;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.tabs button.on{border-color:var(--accent);color:var(--accent-ink);background:var(--panel-2)}
.tabpane{display:none}.tabpane.on{display:block;animation:fadein .4s ease}
.quiz{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:18px 20px;margin:20px 0}
.quiz .q{font-weight:600;margin-bottom:10px}
.quiz button.opt{display:block;width:100%;text-align:left;font:18.5px/1.5 var(--sans);color:var(--ink);background:var(--panel-2);border:1px solid var(--line);border-radius:7px;padding:11px 14px;margin:8px 0;cursor:pointer;transition:border-color .12s,background .12s,transform .1s}
.quiz button.opt:hover{border-color:var(--accent);transform:translateX(3px)}
.quiz button.opt.correct{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 16%,transparent)}
.quiz button.opt.wrong{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 16%,transparent)}
.quiz .exp{display:none;margin-top:11px;font-size:17.5px;color:var(--ink-dim);border-top:1px dashed var(--line);padding-top:11px}.quiz .exp.show{display:block}
.nav{display:flex;justify-content:space-between;margin-top:36px;font-family:var(--mono);font-size:15px}
footer{margin-top:44px;font-size:14.5px;color:var(--ink-dim);font-family:var(--mono);border-top:1px solid var(--line);padding-top:16px;line-height:1.8}
.pill{display:inline-block;font-family:var(--mono);font-size:13px;padding:2px 8px;border-radius:5px;border:1px solid var(--line);color:var(--ink-dim)}
/* ── animação (guarda reduced-motion) ── */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}.reveal.in{opacity:1;transform:none}
@keyframes dashflow{to{stroke-dashoffset:-28}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.25);opacity:1}100%{transform:scale(1)}}
.flow{stroke-dasharray:8 6;animation:dashflow 1s linear infinite}.lit{animation:pulse 1.8s ease-in-out infinite}
.gbar{transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.2,.8,.2,1)}.gbar.in{transform:scaleX(1)}
.gcell{opacity:0;transition:opacity .5s ease}.gcell.in{opacity:1}
.calcbar{transition:width .5s cubic-bezier(.2,.8,.2,1),fill .3s}
.pop{animation:pop .5s var(--ease,ease) both}
/* ════════ TEACHING COMPONENTS (merged from dair-academy learn + lesson-generator) ════════ */
/* top scroll-progress bar (set width via JS) */
.vc-prog{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--accent),var(--olive-ink));z-index:60;transition:width .12s linear;box-shadow:0 0 8px color-mix(in srgb,var(--accent) 60%,transparent)}
/* learning objectives card */
.objectives{border:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 7%,var(--panel)),var(--panel));border-radius:12px;padding:16px 20px;margin:20px 0}
.objectives .h{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:8px}
.objectives ul{list-style:none;margin:0;padding:0}
.objectives li{position:relative;padding:6px 0 6px 30px;font-size:18px;line-height:1.45}
.objectives li:before{content:"◇";position:absolute;left:5px;top:7px;color:var(--accent);font-size:15px;transition:color .3s,transform .3s}
.objectives li.done:before{content:"◆";color:var(--ok);transform:scale(1.1)}
/* flashcards — 3D flip on click */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:14px;margin:18px 0}
.flashcard{perspective:1100px;height:172px;cursor:pointer;outline:none}
.flashcard .inner{position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.flashcard.flipped .inner{transform:rotateY(180deg)}
.flashcard .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;justify-content:center;background:var(--panel);transition:border-color .15s,box-shadow .15s}
.flashcard:hover .face{border-color:var(--accent);box-shadow:0 8px 22px var(--shadow,rgba(0,0,0,.25))}
.flashcard .back{transform:rotateY(180deg);background:var(--panel-2)}
.flashcard .q{font-family:var(--serif);font-size:19.5px;line-height:1.25}
.flashcard .a{font-size:16.5px;color:var(--ink-dim);line-height:1.5}
.flashcard .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:6px}
.flashcard .hint{margin-top:auto;font-family:var(--mono);font-size:11px;color:var(--ink-dim)}
/* prediction prompt — guess before reveal */
.predict{border-left:3px solid var(--keyw);background:color-mix(in srgb,var(--keyw) 8%,var(--panel-2));border-radius:0 10px 10px 0;padding:14px 18px;margin:18px 0}
.predict .h{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--keyw);margin-bottom:6px}
.predict .rbtn{font-family:var(--mono);font-size:14px;border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:7px 14px;border-radius:7px;cursor:pointer;margin-top:8px;transition:border-color .14s,transform .1s}
.predict .rbtn:hover{border-color:var(--accent);transform:translateY(-1px)}
.predict .ans{display:none;margin-top:12px;border-top:1px dashed var(--line);padding-top:12px;font-size:18px}.predict .ans.show{display:block;animation:vt-slidein .45s ease}
/* worked example → try it */
.worked{border:1px solid var(--line);border-radius:12px;background:var(--panel-2);margin:18px 0;overflow:hidden}
.worked .wh{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);padding:12px 18px;border-bottom:1px solid var(--line);background:var(--panel)}
.worked .step{display:flex;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line)}.worked .step:last-child{border-bottom:0}
.worked .step .n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#1a1a18;font-family:var(--mono);font-size:13px;display:flex;align-items:center;justify-content:center;font-weight:700}
[data-theme="light"] .worked .step .n{color:#fff}
/* final cumulative review */
.review{border:1.5px solid var(--accent);border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,var(--panel)),var(--panel));padding:18px 22px;margin:24px 0}
.review .h{font-family:var(--serif);font-size:22px;margin:0 0 6px}
.review .score{font-family:var(--mono);font-size:15px;color:var(--accent-ink);margin-top:10px}
/* source rail / source cards (real links) */
.srcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin:16px 0}
.srccard{display:block;border:1px solid var(--line);border-radius:10px;padding:12px 15px;background:var(--panel);text-decoration:none;transition:border-color .14s,transform .12s,box-shadow .12s}
.srccard:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 20px var(--shadow,rgba(0,0,0,.25))}
.srccard .t{color:var(--accent-ink);font-size:15.5px}.srccard .m{font-family:var(--mono);font-size:12px;color:var(--ink-dim);margin-top:3px}
/* ════════ RICHER ANIMATION LAYER ════════ */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}.reveal.in{opacity:1;transform:none}
.reveal.stagger>*{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.stagger.in>*{opacity:1;transform:none}
.reveal.stagger.in>*:nth-child(2){transition-delay:.07s}.reveal.stagger.in>*:nth-child(3){transition-delay:.14s}.reveal.stagger.in>*:nth-child(4){transition-delay:.21s}.reveal.stagger.in>*:nth-child(5){transition-delay:.28s}.reveal.stagger.in>*:nth-child(6){transition-delay:.35s}
@keyframes dashflow{to{stroke-dashoffset:-28}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.25);opacity:1}100%{transform:scale(1)}}
@keyframes vt-slidein{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes vt-draw{to{stroke-dashoffset:0}}
@keyframes vt-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes vt-shimmer{0%{background-position:-180% 0}100%{background-position:180% 0}}
.flow{stroke-dasharray:8 6;animation:dashflow 1s linear infinite}.lit{animation:pulse 1.8s ease-in-out infinite}
.gbar{transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.2,.8,.2,1)}.gbar.in{transform:scaleX(1)}
.gcell{opacity:0;transition:opacity .5s ease}.gcell.in{opacity:1}
.calcbar{transition:width .5s cubic-bezier(.2,.8,.2,1),fill .3s}
.pop{animation:pop .5s var(--ease,ease) both}
.draw{stroke-dasharray:var(--len,420);stroke-dashoffset:var(--len,420)}.draw.in{animation:vt-draw 1.3s ease forwards}
.float{animation:vt-float 3.2s ease-in-out infinite}
.micro{transition:transform .15s ease,box-shadow .15s ease}.micro:hover{transform:translateY(-3px);box-shadow:0 12px 30px var(--shadow,rgba(0,0,0,.3))}
@media (prefers-reduced-motion: reduce){
  .reveal,.gbar,.gcell,.reveal.stagger>*{opacity:1!important;transform:none!important;transition:none!important}
  .flow,.lit,.float,.draw{animation:none!important}.draw{stroke-dashoffset:0!important}.calcbar{transition:none}
  html{scroll-behavior:auto}.flashcard .inner{transition:none}.vc-prog{transition:none}
}
@media (max-width:880px){nav.side{display:none}.cards,.srcs{grid-template-columns:1fr}}