/* Lesson pages — shared stylesheet. Ported from the real dashboard's
   assets/lesson.css; terminal mode dropped by request (light/dark stay). */

:root{--ink:#1a2332;--mute:#5d6b7f;--line:#dde3ec;--accent:#1f4e79;--warm:#b45309;--bg:#f7f9fc;
  --card:#fff;--tint:#eef4fb;--tint-warm:#fff7ed;--tint-green:#f0f7f0;--tint-quote:#fbfcfe;
  --hol-bg:#fdf0ee;--hol-line:#f0c9c2;--hol-ink:#922b21;}
*{box-sizing:border-box}
body{margin:0;font:16px/1.6 -apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg);}
.wrap{max-width:1000px;margin:0 auto;padding:0 28px 80px;}
header{background:var(--accent);color:#fff;padding:28px 0 24px;margin-bottom:0;}
header .wrap{padding-bottom:0}
h1{margin:0 0 6px;font-size:27px;letter-spacing:-.01em}
.sub{opacity:.85;font-size:15px}
h2{margin:38px 0 14px;font-size:21px;color:var(--accent);border-bottom:2px solid var(--line);padding-bottom:7px}
h3{margin:26px 0 8px;font-size:17px}
a{color:var(--accent);text-decoration:none;border-bottom:1px solid #b9cbe0}
a:hover{background:#e8f0f8}
.bar{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 20px;margin:22px 0;box-shadow:0 1px 3px rgba(20,40,80,.06)}
.bar h3{margin:0 0 10px;font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--mute)}
.links{display:flex;flex-wrap:wrap;gap:9px}
.btn{display:inline-block;padding:8px 14px;background:#eef4fb;border:1px solid #cddcec;border-radius:7px;font-size:14px;font-weight:600;border-bottom:1px solid #cddcec}
.btn:hover{background:#dce9f7}
.btn.todo{background:var(--tint-warm);border-color:#fed7aa;color:var(--warm)}
.btn.off{background:#f2f5f9;border-color:var(--line);color:#a8b3c2;border-style:dashed;cursor:default}
table{width:100%;border-collapse:collapse;background:var(--card);margin:14px 0;font-size:15px}
th{background:var(--tint);text-align:left;padding:9px 12px;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--mute);border:1px solid var(--line)}
td{padding:9px 12px;border:1px solid var(--line);vertical-align:top}
td.t{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600;width:74px;color:var(--accent)}
.card{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:0 8px 8px 0;padding:14px 18px;margin:14px 0}
.say{background:var(--tint-quote);border-left:3px solid #9fc0dd;padding:9px 16px;margin:10px 0;font-style:italic;color:#2c3e52}
.say::before{content:"\201C"}.say::after{content:"\201D"}
.note{background:var(--tint-warm);border-left:3px solid #f59e0b;padding:10px 16px;margin:12px 0;font-size:15px}
.slide{display:inline-block;background:var(--accent);color:#fff;padding:2px 9px;border-radius:5px;font-size:13px;font-weight:700;border:0}
.slide:hover{background:#2d6ba3;color:#fff}
.pg{font-size:13px;font-weight:600}
.pg.off{color:#a8b3c2}
ul{padding-left:22px}li{margin:5px 0}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;background:#eef2f8;padding:2px 6px;border-radius:4px}
footer{margin-top:50px;padding-top:18px;border-top:1px solid var(--line);color:var(--mute);font-size:14px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.nav a,.nav span{font-size:14px;font-weight:600;padding:8px 15px;border-radius:7px;border:1px solid var(--line);background:#fff;border-bottom:1px solid var(--line)}
.nav a:hover{background:#e8f0f8}
.nav .off{color:#a8b3c2;background:#f2f5f9;border-style:dashed}
.nav .mid{border:0;background:none;color:var(--mute);font-weight:500}
.setup{background:var(--tint-green);border-left:3px solid #4a9d5f;padding:10px 16px;margin:12px 0;font-size:14.5px}

/* PRINT FOR THIS LESSON — the first thing on every page */
.printbox{background:var(--card);border:1px solid var(--accent);border-radius:10px;padding:15px 20px 17px;
          margin:22px 0 8px;box-shadow:0 2px 6px rgba(20,40,80,.09)}
.printbox h3{margin:0 0 11px;font-size:14px;text-transform:uppercase;letter-spacing:.09em;color:var(--accent)}
.printbox table{margin:0;font-size:15px;border-collapse:collapse}
.printbox th{background:var(--accent);color:#fff;border-color:var(--accent)}
.printbox td.n{width:66px;text-align:center;font-weight:800;font-size:18px;color:var(--accent);
               font-variant-numeric:tabular-nums;white-space:nowrap}
.printbox td.w{width:82px;text-align:center;font-size:13px;color:var(--mute)}
.printbox tr.sum td{background:var(--tint);font-weight:700}
.printbox .also{margin:11px 0 0;font-size:14px;color:var(--mute)}
@media print{.printbox{break-inside:avoid;border-width:1px}.printbox th{background:#000}}

/* Teacher's Edition guidance — collapsed by default so it never gets projected by accident */
details.te{background:#fdfaf3;border:1px solid #ecdcc0;border-radius:8px;padding:0 16px;margin:14px 0}
details.te[open]{padding-bottom:12px}
details.te summary{cursor:pointer;padding:11px 0;font-weight:700;font-size:14px;color:#8a6516;list-style:none}
details.te summary::-webkit-details-marker{display:none}
details.te summary::before{content:"\25B8  ";display:inline-block;transition:transform .15s}
details.te[open] summary::before{content:"\25BE  "}
details.te p,details.te li{font-size:14.5px}

@media print{
 body{background:#fff;font-size:11pt}header{background:#fff;color:#000;border-bottom:3px solid #000}
 .bar,.card,.say,.note,table{break-inside:avoid}.links,.nav,.setup{display:none}
 a{color:#000;border:0}.slide{background:#000;color:#fff}
 h2{page-break-after:avoid}
 details.te{border:1px solid #999}details.te[open] summary::before{content:""}
}

/* ===================================================================
   DARK MODE
   Toggled by assets/theme.js, which sets data-theme on <html> and
   shares the setting with every other page. Print always renders light.
   =================================================================== */
html[data-theme="dark"]{
  --ink:#e9e6e0;--mute:#a5a19a;--line:#3b3a37;--accent:#94b8e0;--warm:#e0a458;--bg:#1f1e1d;
  --card:#2a2927;--soft:#232a31;--warmsoft:#38301f;--greensoft:#1f2f24;
  --tint:#332f2c;--tint-warm:#38301f;--tint-green:#1f2f24;--tint-quote:#242a2f;
  --hol-bg:#3a2724;--hol-line:#5c3a34;--hol-ink:#e8a49b;
  color-scheme:dark;
}
html[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
html[data-theme="dark"] header{background:#2a2927;border-bottom:1px solid var(--line)}
html[data-theme="dark"] h2{border-bottom-color:var(--line)}
html[data-theme="dark"] .bar,html[data-theme="dark"] .card,
html[data-theme="dark"] table,html[data-theme="dark"] .printbox{background:var(--card)}
html[data-theme="dark"] th{background:#332f2c;color:var(--mute);border-color:var(--line)}
html[data-theme="dark"] td{border-color:var(--line)}
html[data-theme="dark"] a{color:var(--accent);border-bottom-color:#41586d}
html[data-theme="dark"] a:hover{background:#31383f}
html[data-theme="dark"] .btn{background:#32363a;border-color:#454a4f;color:var(--accent)}
html[data-theme="dark"] .btn:hover{background:#3c4146}
html[data-theme="dark"] .btn.todo{background:var(--warmsoft);border-color:#5c4a23;color:var(--warm)}
html[data-theme="dark"] .say{background:#242a2f;border-left-color:#4a6b86;color:#c9d4de}
html[data-theme="dark"] .note{background:var(--warmsoft);border-left-color:#a8761d}
html[data-theme="dark"] .setup{background:var(--greensoft);border-left-color:#4a9d5f}
html[data-theme="dark"] .slide{background:#3b5f85;color:#f0f4f8}
html[data-theme="dark"] .slide:hover{background:#4a739e}
html[data-theme="dark"] .mono{background:#332f2c;color:#d8d4cd}
html[data-theme="dark"] .nav a,html[data-theme="dark"] .nav span{background:var(--card);border-color:var(--line)}
html[data-theme="dark"] .nav a:hover{background:#343b42}
html[data-theme="dark"] .nav .off{background:#262523;color:#6b6862}
html[data-theme="dark"] .nav .mid{background:none;color:var(--mute)}
html[data-theme="dark"] .printbox{border-color:var(--accent)}
html[data-theme="dark"] .printbox h3{color:var(--accent)}
html[data-theme="dark"] .printbox th{background:#31435a;color:#dce7f2;border-color:#31435a}
html[data-theme="dark"] .printbox tr.sum td{background:#2b333d}
html[data-theme="dark"] details.te{background:#2b2723;border-color:#4a4133}
html[data-theme="dark"] details.te summary{color:#d3ac63}
html[data-theme="dark"] footer{border-top-color:var(--line)}

/* Header controls: the theme select (injected by theme.js) and the nav
   links rendered into .theme-bar. .theme-btn is shared by both, and is
   used on <a> elements, so it has to undo the global a{} border-bottom. */
header .wrap{position:relative}
.theme-sel,.theme-btn{background:rgba(255,255,255,.16);color:#fff;
  border:1px solid rgba(255,255,255,.4);border-radius:7px;font:600 13px inherit;cursor:pointer}
.theme-sel{padding:6px 10px}
.theme-btn{padding:6px 13px;text-decoration:none;white-space:nowrap;
  display:inline-flex;align-items:center}
.theme-sel:hover,.theme-btn:hover{background:rgba(255,255,255,.26)}
.theme-btn:hover{color:#fff}
.theme-sel option{background:#fff;color:#1a2332}
html[data-theme="dark"] .theme-sel,html[data-theme="dark"] .theme-btn{background:#38352f;
  border-color:#4d4941;color:var(--ink)}
html[data-theme="dark"] .theme-btn:hover{background:#454138;color:var(--ink)}
html[data-theme="dark"] .theme-sel option{background:#2a2927;color:#e9e6e0}
.theme-bar{position:absolute;top:0;right:28px;display:flex;gap:6px;z-index:5}
/* Reserves room for the select plus up to two nav links, so a long lesson
   title can't run underneath them. */
header .wrap h1,header .wrap .sub{padding-right:320px}
@media(max-width:820px){.theme-bar{position:static;margin:10px 0 0;right:auto;flex-wrap:wrap}
  header .wrap h1,header .wrap .sub{padding-right:0}}

@media print{
  .theme-sel,.theme-bar{display:none}
  html[data-theme="dark"]{--ink:#1a2332;--mute:#5d6b7f;--line:#dde3ec;--accent:#1f4e79;
    --warm:#b45309;--bg:#fff}
  html[data-theme="dark"] body,html[data-theme="dark"] header,html[data-theme="dark"] .bar,
  html[data-theme="dark"] .card,html[data-theme="dark"] table,html[data-theme="dark"] .printbox,
  html[data-theme="dark"] td,html[data-theme="dark"] th{background:#fff;color:#000}
  html[data-theme="dark"] a{color:#000}
}

/* ===================================================================
   COLLAPSIBLE LESSON SECTIONS
   render.js builds these as <details class="sec-l"> directly; the
   summary is styled to read exactly as the h2 it replaces.
   =================================================================== */
details.sec-l{margin:0}
details.sec-l>summary{list-style:none;cursor:pointer;margin:38px 0 14px;font-size:21px;
  color:var(--accent);border-bottom:2px solid var(--line);padding:0 0 7px 22px;position:relative}
details.sec-l>summary::-webkit-details-marker{display:none}
details.sec-l>summary::before{content:"\25B8";position:absolute;left:2px;top:1px;font-size:15px;
  color:var(--mute);transition:transform .18s ease;display:inline-block}
details.sec-l[open]>summary::before{transform:rotate(90deg)}
details.sec-l>summary:hover{color:var(--ink)}
details.sec-l>summary:hover::before{color:var(--accent)}
details.sec-l:first-of-type>summary{margin-top:24px}
.sec-l-body{padding:0 0 4px}
.sec-l-body>h3:first-child{margin-top:0}

@media print{
  details.sec-l>summary{margin:22px 0 10px;padding-left:0;cursor:auto}
  details.sec-l>summary::before{display:none}
  details.sec-l,.sec-l-body{display:block}
}